@charset "UTF-8";
/*loading */
#loading{width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;}
#loading .scrollLine{position: absolute; bottom:50%; left:25%; width:50%; height:1px; overflow: hidden;}
#loading .scrollLine .baseLine{width: 100%; height:1px; background: #eee;}
#loading .scrollLine .overlapLine{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 1px;
    display: block;
    top: 0;
    background: #000;
    -webkit-animation: loadingline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation: loadingline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes loadingline {
  0% { left:-100%; }
  100% { left:100%; }
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}


main a{transition:500ms all;}

.ml-05{margin-left: -0.5em;}
.wFull img{width:100%;}
main .w1000, main .wFull{margin-bottom: 150px;overflow: hidden;}

.bgBlack{background:#000;}
.bgBlack *,
.bgBlack a:link{color:#fff;}
.indent{display: inline-block; text-indent: -0.5em;}

/* inview */
.inview.left{ position:relative;
    transition:all 0.3s ease;
    transition-delay: 0.4s;
    -webkit-transform:translateX(-5%) ;
    transform:translateX(-5%);
    opacity:0;
}
.inview.inviewShow.left{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.right{
    position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
     -webkit-transform:translateX(5%);
     transform:translateX(5%);
    opacity:0;
}
.inview.inviewShow.right{ -webkit-transform:translateX(0); transform:translateX(0); opacity:1;}

.inview.bottom{ position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
    -webkit-transform:translateY(5%) ;
    transform:translateY(5%);
    opacity:0;
}
.inview.inviewShow.bottom{-webkit-transform:translateY(0) ;
transform:translateY(0); opacity:1;}
 /* delay */
.d1{transition-delay: 0.1s !important;}
.d2{transition-delay: 0.2s !important;}
.d3{transition-delay: 0.3s !important;}
.d4{transition-delay: 0.4s !important;}
.d5{transition-delay: 0.5s !important;}
.d6{transition-delay: 0.6s !important;}
.d8{transition-delay: 0.8s !important;}
.d10{transition-delay: 1s !important;}
.t2{transition-duration:2s !important;}

/* mainImg */
main .mainImg{position: relative;    height: 100vh; overflow: hidden;}
main .mainImg>img{position: absolute;width:auto;height: 100%;transform: translate(-50%,-50%);top: 50%;left: 50%;}
@media only screen and (min-width:1100px) and (orientation: landscape){
    main .mainImg>img{
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        }
}
.mainImg img.inview.right{ -webkit-transform:translate(-55% , -50%); transform:translate(-55%, -50%);}
.mainImg img.inview.inviewShow.right{ -webkit-transform:translate(-50% , -50%); transform:translate(-50%, -50%);}
.mainImg h1{ position: absolute;
    left: 9%;
    bottom: -33vw;
    height: 50vw;
}
main .mainImg h1 div{white-space: nowrap;}


.mainImg h1 picture{display: block; height:100%;}
.mainImg h1 img{height: 28vw;
    width: auto;
    margin-top: -15vw;
    margin-left: -16vw;}
/*izuru*/
main.izuru .mainImg h1 img{    height: 26vw;    margin-top: -13vw;    margin-left: -14vw;}
/*nozomi*/
main.nozomi .mainImg h1{left:8%;}
main.nozomi .mainImg h1 img {   height: 25vw;  margin-top: -13vw;  margin-left: -14vw;}
/*makoto*/
main.makoto .mainImg h1{
    left: inherit;
    right: -5vh;
    bottom: inherit;
    top: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    }
main.makoto .mainImg h1 div,
main.yuki .mainImg h1 div{white-space: normal;display: flex;
    flex-direction: row-reverse;
    align-items: start;}
main.makoto .mainImg h1 img{height: auto;width:36vh;margin-top:0;margin-left: -18vh;}
main.makoto .namePlate,
main.yuki .namePlate{right:inherit; left:0; border-left:none; border-right:2px solid #d0121b;}
main.makoto .txt h2{font-size: 41px;}

/* yuki */
main.yuki .mainImg h1{
    left: inherit;
    right: 4vw;
    bottom: inherit;
    top: 35%;
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    }
main.yuki .mainImg h1 img{height: 55vh; margin-left:2vw;}
main.yuki .mainImg h1>div>img:last-child{height: 39vh;}
/*shiori*/
main.shiori .mainImg h1>div{margin-left:1.5vw;}

@media only screen and (max-width:1366px) and (orientation: landscape){
    main .mainImg>img{margin-left:-15%;}
}
@media only screen and (max-width:1024px) {
    main.yuki .mainImg h1 div{-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    flex-direction: row;}
    main.yuki .mainImg h1{top:25%;}
    main.yuki .mainImg h1 img{height: 58vw;}
    main.yuki .mainImg h1>div>img:last-child{height: 42vw;margin-top: 1.5vw;}
}
@media only screen and (max-width:767px) {
    main.yuki .mainImg h1{top:30%;}
}
/* yuji */
main.yuji .namePlate{width:227px;}


.namePlate{background:rgba(0,0,0,0.7); border-left:2px solid #d0121b; width:198px; height: 128px; position: absolute !important; bottom:calc(50% - 64px); right:0; color:#fff; padding: 29px 0 0 23px; line-height: 1;}
.namePlate .name{font-size: 25px; display: block; margin-bottom: 15px; font-family: 'Playfair Display', serif; font-weight: 400;}
.namePlate .position{line-height: 1.2; font-size: 14px;}


/* text */
.bgBlack .shoulder:before{background:#fff;}
.shoulder:before{width:90px; height:8px; background:#000; content:""; display: inline-block; vertical-align: middle;margin-right: 6px;margin-bottom: 2px;}
.shoulder{font-size:8px; font-family: 'Oswald', sans-serif; font-weight: 500;}

section .floatL.txt,
section .floatR.txt{width:425px;}

section .floatL img,
section .floatR img{margin-top:120px; width:100%;}
.w1000 img{width: 100%;}

section.rightFit{margin-left:calc(50% - 500px); margin-bottom: 150px; overflow: hidden;}
section.rightFit .txt,
section.leftFit .txt{min-width: 425px;}
section.leftFit{margin-right:calc(50% - 500px); margin-bottom: 150px;}
section.rightFit .floatR{width: calc(100% - 480px);   overflow: hidden;   text-align: right;}

.txt h2{margin-top:40px; margin-bottom: 57px;  font-family: 'Noto Serif JP', serif; font-weight: 500; font-size:46px; line-height: 1.5;}
section:not(.leftFit):not(.rightFit) .floatL.img, section:not(.leftFit):not(.rightFit) .floatR.img{width:calc(100% - 468px); overflow: hidden;}
section:not(.leftFit):not(.rightFit) .floatL.img img{float:right;}

.photo3{display: flex;    flex-shrink: 0;}
.photo3 img{width:33.3%; height: auto;}

p.note{font-size: 12px;
    text-align: right;
    line-height: 1.5;}

/* One More Words */
.profile{background:#000; padding:53px 46px; color:#fff;}
.profile h2{color:#d0121b; font-family: 'Oswald', sans-serif; font-size: 18px; margin-bottom: 25px; font-weight: 500;letter-spacing: 0.2em;}
.profile .catch{font-family: 'Noto Serif JP', serif; font-size:26px;}
.profile .floatL{width:446px;}
.profile .floatR img{margin-top:0.5em;}
.bgBlack .profile{background: #fff;}
.bgBlack .profile p{color: #000;}

/* other persons (slick) */
.otherPersons{border-top:solid 1px #000; padding-top:130px;}
.otherPersons>.w1000:first-child{margin-bottom: 0;}
.otherTtl{font-family: 'Noto Serif JP', serif; font-size:26px; margin-bottom: 60px;font-weight: 500;}
.otherList{    width: 1080px;
    margin: 0 auto;
    padding: 0 40px;}
.slick-initialized .slick-slide{margin:8px; position: relative; overflow: hidden;}
.slick-initialized .slick-slide a img{transition:500ms all; width:100%;}
.slick-initialized .slick-slide a:hover img{  transform:scale(1.05,1.05);}
.slick-arrow{text-indent: -9999px; width:40px; height: 40px; border:none; background-color:#E7EBED; position: relative;}
.slick-arrow:before{position: absolute; content: ""; width: 16px;    left: 11px;
    top: 19px;
    height: 1px;
    background: #000;}
.slick-arrow:after{position: absolute; content: "";right: 13px; top:15px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);}
.slick-arrow.slick-prev:after{-webkit-transform: rotate(225deg);
    transform: rotate(225deg); right: 20px;}
.slick-prev{top:192px;left: -40px;}
.slick-next{    bottom: 212px;
    left: 1006px;}

.otherList .names{ position: absolute; left:22px; bottom:22px; color:#fff; line-height: 1.2;}
.otherList .names .name{font-family: 'Playfair Display', serif; font-weight: 400;font-size: 26px; display: block; margin-bottom: 12px;}
.otherPersons .toList{text-align: right; margin-top: 20px;}
.otherPersons .toList a{position: relative; color:#000; font-family: 'Noto Serif JP', serif; text-decoration: none;}
.otherPersons .toList a:before{content:""; display: inline-block;
    vertical-align: middle;    margin-bottom: 4px;
    margin-right: 10px; width:23px; height:23px; background:url(../../shared/images/icon_list.svg);}
.otherPersons .toList a:after{content:""; display: inline-block;
    vertical-align: middle;    margin-bottom: 6px;
    margin-left: 9px; width:14px; height:11px; background:url(../../shared/images/icon_arrow.svg);}
.otherPersons .toList a:hover{text-decoration: none; color:#d0121b;}
.bgBlack .otherPersons{background: #fff;}
.bgBlack .otherPersons h2{color:#000;}

@media only screen and (max-width:1100px){
    section.rightFit{margin-left: 2.5%;}
    .txt h2{font-size: 4.5vw;}
    main section.profile{margin: 2.5%; padding: 23px;}
    .profile .floatL{width:60%;}
    .profile .floatR{width:37%;}

    /* mainImg */
    main{overflow-x:hidden;}
    main .wFull.mainImg{overflow: visible; margin-bottom: 150px;}
    .mainImg h1{
    left: 12vw;
    right: inherit;
    bottom: -36px;
    height: auto;
    width: 98%;
    top: inherit;
    }
    /*izuru*/
    main.izuru .mainImg h1 {    left: 10vw;}
    .namePlate{right: 0;
        bottom: -60px;
        height: 100px;
        padding: 16px 0 0 18px;}
    

    /* other Persons */
    .slick-initialized .slick-slide{opacity: 0.5 !important;}
    .slick-initialized .slick-slide.slick-active{ opacity: 1 !important;}
    .otherTtl{text-align: center;}
    .otherPersons .toList{text-align: center;}
    .otherList{    width: calc(100% - 80px);
    margin: 0 auto;
    padding: 0 40px;}
    .slick-next{left:100%;}
}
@media only screen and (max-width:851px){
.otherList{width:100%; padding:0; margin:0;}
}
@media only screen and (max-width:767px){
    .spWshort{padding-left:20px; padding-right:20px;}
    main .w1000, main .wFull{margin-bottom: 60px;}
    section.rightFit{margin-left:0;padding:0 20px;margin-bottom: 60px;}
    section .floatL,
    section .floatR,
    .profile .floatL,
    .profile .floatR{float:none !important;    width: 100% !important;}
    section .floatL.txt,
    section .floatR.txt{width:100%; min-width: inherit;}
    section.rightFit .floatR{width:auto; overflow: visible; text-align: center;}
    section .floatL img, section .floatR img{margin-top:1em;}
    .w1000.spWide{padding:0;}


    /* text */
    .txt h2{font-size: 30px; margin-top:24px; margin-bottom:28px;}
    .wFull>.inview>img {
    width: 216%;
    margin-left: -50%;
    }
    /*tomohiko*/
    .tomohiko .wFull>.inview>img {    margin-left: -42%;    }
    /*shogo*/
    .shogo .wFull>.inview>img {    margin-left: -53%;    }
    /*nozomi*/
    .nozomi .wFull>.inview>img {    margin-left: -57%;    }
    /*yui*/
    .yui .wFull>.inview>img {    margin-left: -54%;    }
    /*yumi*/
    .yumi .wFull>.inview>img {    margin-left: -42%;    }
    /* yuka */
    main.yuka .mainImg>img{margin-left: 12%;}
    main.yuka .mainImg h1{left:20vw;}
    /* yukino */
    main.yukino .mainImg h1{    left: 22vw;}
    main.yukino .mainImg h1 img {    height: 43vw;}
    main.yukino .wFull>.inview>img{margin-left:-41%;}
    /* nobuko */
    main.nobuko .mainImg h1 {    left: 21vw;}
    main.nobuko .mainImg h1 img {    height: 42vw;}
    main.nobuko .wFull>.inview>img{margin-left: -40%;}
    /* shiori */
    main.shiori .mainImg h1 {    left: 22vw;}
    main.shiori .mainImg h1 img{     height: 43vw;    margin-top: -25vw;}
    main.shiori .wFull>.inview>img{margin-left: -75%;}
    /* yuki */
    main.yuki .wFull>.inview>img{margin-left: -58%;}
    /* haruka */
    main.haruka .mainImg h1 {    left: 22vw;}
    main.haruka .mainImg h1 img {    height: 43vw;        margin-top: -25vw;}
    /* yuji */
    main.yuji .mainImg h1 {    left: 23vw;}
    main.yuji .mainImg h1 img {    height: 39vw;        margin-top: -25vw;}
    main.yuji .wFull>.inview>img{margin-left: -43%;}
    /* satomi */
    main.satomi .mainImg h1 {    left: 21vw;}
    main.satomi .mainImg h1 img {    height: 42vw;        margin-top: -25vw;}
    main.satomi .wFull>.inview>img{margin-left:-58%;}
    /* kotaro */
    main.kotaro .mainImg>img{transform: translate(-41%,0) !important;}
    main.kotaro .mainImg h1 img {margin-left:-23vw;}
    main.kotaro .wFull>.inview>img{margin-left:-94%;}
    /* profile */
    main section.profile{margin: 80px 20px 90px;
    width: calc(100% - 40px);}
    .profile .floatL,
    .profile .floatR{width:100%;}
    /* other person (slick) */
    .otherPersons{padding: 80px 0 1px;}
    .otherList { width: 100%; padding: 0;}
    .otherTtl{ text-align: center;}
    .slick-arrow{display: none;}
}
@media (max-height:900px) and (min-aspect-ratio: 1366/900) {  main .mainImg>img {top:60%;  } main.yuki .mainImg h1{top:50%;}}
@media (max-height:900px) and (min-aspect-ratio: 1366/650) {  main .mainImg>img {top:75%;  }}

@media only screen and (max-width:1100px) and (orientation: landscape){
    .mainImg h1{margin-bottom: 0;}
    /*makoto*/
    main.makoto .mainImg h1 img{margin-left: -17vh;}
}
@media only screen and (max-width:1100px) and (orientation: portrait){
    /*makoto*/
    main.makoto .txt h2{font-size: 27px;}
    main.makoto .mainImg h1{top:50px;right: -3vw;}
    main.makoto .mainImg h1 div { -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    flex-direction: row;}
    main.makoto .mainImg h1 img{width:22vh;margin-left: -12vh;}
    main.makoto .mainImg h1 div img:last-child{margin-top:-11vh;}
    main.makoto .mainImg>img {/* margin-left: -80%; */}
}
@media only screen and (max-width:767px)  and (orientation: portrait){
    main .mainImg{height:auto;}
    main .mainImg>img{transform: translate(-50%,0) !important;width: auto;
    height: 564px;}
    /* nana */
    main .mainImg h1 div { white-space: normal;}
    .mainImg h1 img{ height: 47vw;
    margin-top: -27vw;
    margin-left: -32vw;}
    /*tomohiko*/
    main.tomohiko .mainImg h1{left:21vw;}
    main.tomohiko .mainImg h1 img{    height: 44vw;    margin-top: -24vw;}
    /*nana*/
    main.nana .mainImg h1 { left: 21vw;}
    main.nana .mainImg>img{margin-left: 50px;}
    /*emi*/
    main.emi .mainImg h1 { left: 23vw;}
    main.emi .mainImg>img{margin-left: -52px;}
    /*shogo*/
    main.shogo .mainImg h1 { left: 22vw;}
    /*yui */
    main.yui .mainImg h1 img{     height: 41vw;    margin-top: -22vw; margin-left: -23vw;}
    /*izuru*/
    main.izuru .mainImg h1 img {  height: 33vw;     margin-top: -16vw;}
    main.izuru .mainImg>img{    margin-left: 24px;}
    /*nozomi*/
    main.nozomi .mainImg h1 img {    height: 33vw;    margin-top: -16vw;}
    main.nozomi .mainImg>img{margin-left: 37px;}
    /*yumi*/
    main.yumi .mainImg h1 img {    margin-left: -22vw;}
    /*makoto*/
    main.makoto .txt h2{font-size: 27px;}
    main.makoto .mainImg h1{top:50px;right: -6vw;}
    main.makoto .mainImg h1 div { -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    flex-direction: row;}
    main.makoto .mainImg h1 img{width: 21vh;margin-left: -11vh;}
    main.makoto .mainImg h1 div img:last-child{margin-top: -11vh;}
    main.makoto .mainImg>img {/* margin-left: -80%; */}
    /*yuki*/
    main.yuki .mainImg>img {margin-left: -10%;}
    /*shiori */
    main.shiori .mainImg>img {margin-left: -15%;}
    /*akiyo*/
    main.akiyo .mainImg h1 img {
    height: 35vw;
    margin-top: -20vw;
    margin-left: -21vw;
}
}