@charset "utf-8";


/*基本サイズ表

14px = 1em
15px = 1.07em
16px = 1.14em
18px = 1.28em
20px = 1.42em
30px = 2.14em
40px = 2.85em
50px = 3.57em
60px = 4.28em
50px = 5em

*/



/* loading
---------------------------------------------------------- */

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFF;
    z-index: 2;
}

#loading #siteid-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 64px;
    margin: auto;
    z-index: 3;
}

#loading #siteid-svg{
    stroke: #357dce;
    fill: rgba(0,0,0,0);
    transition: all 1.0s;
    -webkit-transition: all 1.0s;
}

#loading #siteid-svg.is-active {
    stroke: none;
    fill:#3c7ece;
}



/* mv
---------------------------------------------------------- */

#mv {
    position:relative;
    display: -webkit-box;/*--- Android ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- Safari ---*/
    display: flex;
    -webkit-justify-content: center;/*--- Safari ---*/
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

#mv_header {
    position:absolute;
    top:5em;
    left:4.28em;
    z-index: 1;
}

#mv .mv_header_siteId{
    margin-bottom:2.14em;
}

#mv .mv_header_nav{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    letter-spacing:0.25em;
    line-height:2.65;
}

#mv .mv_header_nav li{ 
    position:relative;
}

#mv .mv_header_nav li:before{ 
    content: "";
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    display:block;
    margin: auto;
    width: 1px;
    height: 10px;
    background:url(../img/common/pat_01.png);
}

#mv .mv_header_nav li a{
    display:block;
    font-size:1.07em;
    padding:1.6em 0 0;
    text-decoration:none;
}

#mv .mv_header_nav li a:hover{
    color:#8bceea;
}

#mv_concept {
    position: absolute;
    top: 5em;
    right: 4.28em;
}

#mv_concept li{
    float:right;
}

#mv_concept li:nth-child(2){
    margin:0 3.57em 0 3.5em;
    animation-delay: 0.8s;
}
#mv_concept li:nth-child(3){
    animation-delay: 1.6s;
}

#mv_scroll p,
#mv .scrollBar{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    text-align:center;
    width:5.71em;
    margin: auto;
}

#mv_scroll p{
    font-family: 'Cormorant Garamond', serif;
    color:#3C7ECE;
    letter-spacing:0.28em;
    font-size:1.14em;
    font-weight:500;
    bottom: 4em;
    animation: flash 1.7s infinite;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

@keyframes flash {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

#mv .scrollBar {
    display: block;
    width: 2px;
    height: 50px;
    background:#3C7ECE;
    animation: vertical 1.7s infinite;
}

@keyframes vertical {
    0%{
        height:50px;
        opacity:0;
    }
    20%{
        opacity:1;
    }
    100%{
        height:0;
    }
}

@media screen and (max-width:1280px) {
    #mv_img img{
        width:120px;
    }
    #mv_scroll p{
        bottom: 2.14em;
    }
    #mv .scrollBar{
        bottom:-25px;
    }
}

@media screen and (max-width:960px) {
    #mv {
        height: calc(100vh - 64px);
    }
    #mv_header {
        display:none;
    }
    #mv_concept {
        top: 2.14em;
        right: 1.43em;
    }
    #mv_img {
        padding-bottom: 4.28em;
    }
    #mv_img img {
        width: 100px;
    }
}

@media screen and (max-width:767px) {
    #mv {
        display:table;
    }
    #mv_img {
        display:table-cell;
        vertical-align:middle;
        position:static;
        transform:none;
    }
    #mv_img img {
        width: 70%;
        margin:auto;
    }
    #mv_concept {
        display:none;
    }
}

@media screen and (max-width:480px) {
    .iPhone #mv_scroll p{
        bottom: 5em;
    }
}



/* #sec-season
-------------------------------------------------------- */

#sec-season .sec_inner {
    max-width: 1200px;
}

.sec-season_cont {
    position:relative;
    margin-bottom: 17.8em;
}

.sec-season_cont.winter {
    margin-bottom: 9.64em;
}

.sec-season_cont_txt:after,
.sec-season_cont_txt .txt-left:after,
.sec-season_cont_txt .txt-right:after,
.sec-season_cont_img:after{
    content: "";
    display: table;
    clear: both;
}

.sec-season_cont_txt{
    position:relative;
    z-index:2;
}

.sec-season_cont_txt .txt-left,
.sec-season_cont_txt .txt-right{
    width:570px;
}

.sec-season_cont_txt .txt-right {
    float:right;
    margin-right:7.14em;
}

.sec-season_cont_txt p {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    float: right; 
    font-size: 1.07em;
    letter-spacing: 0.25em;
    line-height: 2.26;
    white-space: nowrap; /* 句読点前での改行禁止 */
}

.sec-season_cont_txt p:not(.p-03){
    margin-left: 3.3em;
}

.sec-season_cont_txt p .space-nrw{
    letter-spacing:-0.6em;
    font-size:0.92em;
}

.sec-season_cont_img{
    position:relative;
    z-index: 1;
    margin-top: 5em;
}

.list-img-right,
.list-img-left{
    display: -webkit-box;/*--- Android ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- Safari ---*/
    display: flex;
    align-items: baseline;
    width:68.462%;
    min-width:500px;
}

.list-img-right{
    float:right;
    flex-direction:row-reverse;
}

.list-img-right li:first-child{
    margin-left:1.42em;
}

.list-img-left li:first-child{
    margin-right:1.42em;
}

.sec-season_cont_img .illust-cloud{
    position: absolute;
    z-index: -1;
}

.spring .sec-season_cont_img .illust-cloud,
.autumn .sec-season_cont_img .illust-cloud{
    top: -6.21em;
    left: 2.14em;
}

.summer .sec-season_cont_img .illust-cloud{
    top: -5.14em;
    right: 26%;
}

.winter .sec-season_cont_img .illust-cloud {
    top: -5em;
    right: 25%;
}

.sec-season_cont_img .illust-tsuru {
    position: absolute;
}

.spring .sec-season_cont_img .illust-tsuru {
    right: 5.71em;
    bottom: -2.85em;
}

.summer .sec-season_cont_img .illust-tsuru {
    left: 0;
    bottom: -1.42em;
}

.autumn .sec-season_cont_img .illust-tsuru {
    right: 5.71em;
    bottom: -1.42em;
}

.winter .sec-season_cont_img .illust-tsuru {
    left: 0;
    bottom: -0.35em;
}


/*四季のアニメーション*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sec-season_cont .ttl-01,
.sec-season_cont p,
.sec-season_cont_img .illust-tsuru{
    opacity:0;
}

.sec-season_cont.is-visible .ttl-01,
.sec-season_cont.is-visible p,
.sec-season_cont_img.is-visible .illust-tsuru{
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    opacity:1;
}

.p-01  {animation-delay: .7s;}
.p-02  {animation-delay: 1.5s;}
.p-03  {animation-delay: 2.3s;}

.sec-season_cont_img li:nth-child(1) {animation-delay: .8s;}
.sec-season_cont_img li:nth-child(2) {animation-delay: 1.6s;}
.sec-season_cont_img .illust-cloud{animation-delay: 1.8s;}
.sec-season_cont_img .illust-tsuru {animation-delay: 2.2s;}


@media screen and (max-width:1200px) {
    .sec-season_cont_txt .txt-right {
        margin-right:0;
    }
    .spring .sec-season_cont_img .illust-tsuru,
    .autumn .sec-season_cont_img .illust-tsuru{
        right: 0;
    }
}

@media screen and (max-width:960px) {
    .list-img-right,
    .list-img-left {
        width: 75%;
        min-width:75%;
    }
    .sec-season_cont .illust-tsuru {
        width:16%;
    }
}

@media screen and (max-width:767px) {
    .sec-season_cont {
        margin-bottom: 7.14em;
    }
    .sec-season_cont_txt .txt-left,
    .sec-season_cont_txt .txt-right{
        width:420px;
    }
    .sec-season_cont_txt p{
        font-size: 1em;
        line-height: 2;
    }
    .sec-season_cont_txt p:not(.p-03){
        margin-left: 1.78em;
    }
    .sec-season_cont_img{
        margin-top: 2.85em;
    }
    .summer .sec-season_cont_img .illust-cloud,
    .winter .sec-season_cont_img .illust-cloud{
        right: 2.14em;
    }
    .list-img-right li:first-child{
        margin-left:1.07em;
    }
    .list-img-left li:first-child{
        margin-right:1.07em;
    }
    .list-img-right li:first-child,
    .list-img-left li:first-child{
        flex:1.2;
    }
    .list-img-right li:last-child,
    .list-img-left li:last-child{
        flex:1;
    }
}

@media screen and (max-width:480px) {
    .sec-season_cont{
        margin-bottom: 5em;
    }
    .sec-season_cont.winter{
        margin-bottom: 0;
    }
    .sec-season_cont_txt .txt-left,
    .sec-season_cont_txt .txt-right{
        width:100%;
        padding-right:0;
    }
    .sec-season_cont_txt .txt-left{
        text-align:right;
    }
    .sec-season_cont_txt p {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        float: none;
        line-height:1.7;
        font-size:0.92em;
    }
    .sec-season_cont_txt p:not(.p-03){
        margin: 0 0 0.71em 0;
    }
    .sec-season_cont_img{
        margin-top: 2em;
    }
    .sec-season_cont_img .illust-cloud{
        display:none;
    }
    .list-img-right,
    .list-img-left {
        display:block;
        width: 100%;
        min-width:100%;
    }
    .list-img-right li,
    .list-img-left li{
        width:100%;
        margin:0 0 1.42em 0 !important;
    }
    .sec-season_cont .illust-tsuru {
        display:none;
    }
    .sec-season_cont_img li:nth-child(1) {animation-delay: .4s;}
    .sec-season_cont_img li:nth-child(2) {animation-delay: .8s;}
}



/* #sec-about
-------------------------------------------------------- */

#sec-about .p-lead{
    font-size:1.07em;
    margin-bottom:4em;
    line-height:2.13;
    letter-spacing:0.2em;
}

#sec-about .sec-about_img{
    background: url(../img/top/img_about_01.jpg) center;
    background-size: cover;
    height:700px;
    overflow:hidden;
}


@media screen and (max-width:767px) {
    #sec-about .p-lead{
        font-size:1em;
        margin-bottom:2.85em;
    }
    #sec-about .sec-about_img{
        height:300px;
    }
}



/* #sec-series
-------------------------------------------------------- */

#sec-series .sec_inner{
    max-width:1300px;
}

#sec-series .list-series {
    display: -webkit-box;/*--- Android ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- Safari ---*/
    display: flex;
    -ms-flex-wrap: wrap;/*--- IE10 ---*/
    -webkit-flex-wrap: wrap;/*--- Safari ---*/
    flex-wrap: wrap;
    -webkit-box-pack: justify;/*--- Android ---*/
    -ms-flex-pack: justify;/*--- IE10 ---*/
    -webkit-justify-content: space-between;/*--- Safari ---*/
    justify-content: space-between;
    padding-top:2.6em;
}

#sec-series .list-series li {
    position:relative;
    width:48%;
    padding-bottom:8.57em;
}

#sec-series .list-series li:nth-child(2){
    animation-delay: 0.5s;
}

#sec-series .list-series_img {
    position:relative;
    text-align:center;
    display: table;
    width:100%;
    height:400px;
    margin-bottom:4.28em;
}

#sec-series .list-series_img:before {
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:-2.85em;
    left:0;
    z-index:-1;
    background:#f5f5f7;
}

#sec-series .img-main {
    display: table-cell;
    vertical-align: bottom;
}

#sec-series .img-sub {
    position: absolute;
    bottom: 0;
    right: -1em;
}

#sec-series .list-series li:nth-child(2) .img-sub{
    bottom: -5px;
    animation-delay: 0.5s;
}

#sec-series .list-series h3 {
    font-size:2.4rem;
    font-weight:normal;
    letter-spacing:0.2em;
}

#sec-series .list-series h3:after {
    content:"";
    display:block;
    height:1px;
    width:24px;
    margin:0.83em 0 1.25em;
    background:url(../img/common/pat_02.png);
}

#sec-series .list-series p {
    font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
    letter-spacing:0.1em;
    line-height:2.14;
}

#sec-series .list-series .btn-02 {
    position:absolute;
    bottom:0;
    left:0;
}


@media screen and (max-width:1300px) {
    #sec-series .sec_inner{
        padding-left:4.28em;
        padding-right:4.28em;
    }
}

@media screen and (max-width:1100px) {
    #sec-series .list-series li {
        width:100%;
        margin-bottom:14.2em;
    }
    #sec-series .list-series li:last-child {
        margin-bottom:0;
    }
    #sec-series .list_mgn{
        margin-top:18% !important;
    }
}

@media screen and (max-width:767px) {
    #sec-series .sec_inner{
        padding-left:1.42em;
        padding-right:1.42em;
    }
    #sec-series .list-series li {
        margin-bottom:9.28em;
         padding-bottom:6.42em;
    }
    #sec-series .list-series .img-main img{
        width:30%;
        min-width:140px;
    }
    #sec-series .list-series_img {
        height:30%;
        margin-bottom: 1.43em;
    }
    #sec-series .list-series h3 {
        font-size:2.0rem;
        line-height:1.6;
        letter-spacing:0.1em;
    }
    #sec-series .list-series .btn-02{
        margin-left:auto;
        margin-right:auto;
    }
    #sec-series .list_mgn{
        margin-top:30% !important;
    }

}

@media screen and (max-width:640px) {
    #sec-series .list-series .img-sub{
        width:34%;
        right:-0.71em;
    }
    #sec-series .list_mgn{
        margin-top:30% !important;
    }
}

@media screen and (max-width:480px) {
    #sec-series .list-series .img-main img{
        min-width:90px;
    }
    #sec-series .list-series .konahamigaki img{
        min-width:180px !important;
    }
    #sec-series .list-series .img-sub{
        top:-5.71em;
    }
    #sec-series .list_mgn{
        margin-top:30% !important;
    }
}

#sec-series .list_mgn{
    margin-top:7%;
    }


/* #sec-store
-------------------------------------------------------- */

#sec-store .list-store{
    display: -webkit-box;/*--- Android ---*/
    display: -ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- Safari ---*/
    display: flex;
    -ms-flex-wrap: wrap;/*--- IE10 ---*/
    -webkit-flex-wrap: wrap;/*--- Safari ---*/
    flex-wrap: wrap;
    -webkit-box-pack: justify;/*--- Android ---*/
    -ms-flex-pack: justify;/*--- IE10 ---*/
    -webkit-justify-content: space-between;/*--- Safari ---*/
    justify-content: space-between;
    width:100%;
    max-width:820px;
    margin:auto;
}

#sec-store .list-store li{
    margin-bottom:1.42em;
    width:48.78%;
}


@media screen and (max-width:767px) {
    #sec-store .list-store li{
        width:100%;
        margin-bottom:1em;
    }
    #sec-store .list-store li .btn-01{
        font-size:0.92em;
    }
}