/* ======================================
   PC Styles
====================================== */

* {
    box-sizing: border-box;
}

html, body {
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    background-color: rgb(15,63,60);
    font-family: "Zen Maru Gothic", sans-serif;
    color: #404141;
}

.page{
    width: 1280px;
    margin: 0 auto;
    background: #fff;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ======================================
共通
====================================== */
.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.sr-only{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.sectionTitle{
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: lowercase;
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
}

.sectionTitle::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 110px;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    opacity: 0.7;
}

.sectionLead{
    margin: 26px 0 40px;
    font-size: 20px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}

.br--sp{
    display: none;
}

/* ======================================
hero
====================================== */

.hero__kv {
    position: relative;
    overflow: hidden;
    height: 936px;
    background: url("../img/hero_bg.webp") center top / cover no-repeat;
}

.hero__kvInner {
    height: 936px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    position: relative;
    z-index: 0;
}

.hero__leaf{
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    z-index: 2;
    pointer-events: none;
    transform: translateX(0);
}

.hero__leaf--left{
    left: 0;
    animation: openLeft 1.0s cubic-bezier(.7,0,.3,1) 0.3s forwards;
}

.hero__leaf--right{
    right: 0;
    animation: openRight 1.0s cubic-bezier(.7,0,.3,1) 0.3s forwards;
}

@keyframes openLeft {
    to { transform: translateX(-35%);}
}

@keyframes openRight {
    to { transform: translateX(50%);}
}

.hero__brand{
    margin: 0;
    opacity: 0;
    filter: blur(12px);
    animation: logoIn 0.8s ease 1.2s forwards;
}

.hero__brand img{
    display: block;
}

@keyframes logoIn{
    0% {
        opacity: 0;
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.hero__copy {
    background-color: rgb(252,248,240);
    position: relative;
    overflow: hidden;
    padding: 80px 0 0;
}

.hero__copyInner{
    text-align: center;
    position: relative;
}

.hero__title{
    font-size: 40px;
    font-weight: 500;
    margin: 0 0 32px;
    letter-spacing: 0.05em;
}

.hero__lead{
    font-size: 20px;
    line-height: 2;
    margin: 0 0 80px;
}

.hero__illust{
    display: block;
    margin: 0 auto;
    width: 900px;
}

.hero__bird{
    position: absolute;
    right: 120px;
    width: 80px;
}

.hero__bird--green{
    top: 160px;
    animation: floatGreen 4s ease-in-out infinite;
}

.hero__bird--orange{
    top: 260px;
    right: 240px;
    animation: floatOrange 4s ease-in-out infinite;
}

@keyframes floatGreen{
    0%,100% { transform: translateY(0);}
    50% { transform: translateY(-12px);}
}

@keyframes floatOrange{
    0%,100% { transform: translateY(0);}
    50% { transform: translateY(12px);}
}

/* ======================================
stories
====================================== */

.stories{
    padding: 60px 0 60px;
    text-align: center;
    background: #fff;
}

.stories__title{}

.stories__lead{
}

.story{
    padding: 35px 0;
}

.story__header{
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.story__header::after{
    content: "";
    display: block;
    width: 600px;
    height: 2px;
    background: #404141;
    margin: 20px auto 0;
}

.story__no{
    position: relative;
    display: inline-block;
    font-size: 34px;
    font-weight: 500;
    padding-top: 20px;
    letter-spacing: 0.05em;
}

.story__no::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 60px;
    border: 2px solid #404141;
    border-bottom: none;
    border-radius: 120px 120px 0 0;
}

.story__content{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    position: relative;
}

.story__left{
    width: 220px;
    text-align: center;
}

.story__right{
    width: 300px;
    display: flex;
    justify-content: center;
}

.story__cta{
    margin-top: 30px;
    display: inline-block;
    animation: ctaMove 3s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes ctaMove{
    0% { transform: translateX(20px);}
    50% { transform: translateX(40px);}
    100% { transform: translateX(20px);}
}

.story__book{
    display: block;
    width: 250px;
    height: auto;
    transition: transform .18s cubic-bezier(.2,.9,.2,1);
    cursor: pointer;
}

.story__book:hover{
    transform: scale(1.01);
}

.story__book:active{
    transform: scale(0.98);
}

.story__book.is-pressing{
    transform: scale(0.93);
}

.story__bookBtn{
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.story__illust{
    position: absolute;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(.65,0,.35,1), transform 700ms cubic-bezier(.65,0,.35,1);
    will-change: transform, opacity;
}

.story--01__illust,
.story--03__illust{
    transform: translateX(-60px);
}

.story--02__illust,
.story--04__illust{
    transform: translateX(60px);
}

.story__illust.is-inview{
    opacity: 1;
    transform: translateX(0);
}

.story--01__illust{
    left: 80px;
    top: 120px;
    width: 140px;
}

.story--02__illust{
    right: 130px;
    top: 170px;
    width: 164px;
}

.story--03__illust{
    left: 30px;
    top: 50px;
    width: 183px;
}

.story--04__illust{
    right: 130px;
    top: 170px;
    width: 130px;
}

.story__detail{
    margin: 60px auto 0;
    width: 593px;
}

.story__detailInner{
    text-align: center;
    transform-origin: top;
}

.story__detailHeader{
    margin: 0 0 30px;
}

.story__detailTitle{
    display: block;
    margin: 0 auto;
    max-width: 360px;
    height: auto;
}

.story__detailBody{
    position: relative;
    width: 100%;
    height: 1326px;
    margin: 0 auto 18px;
}

.story__detailImage-sp{
    display: none;
    width: 100%;
    height: auto;
}

.story__detailBody--01{
    background: url("../img/story01_detail_main.webp") center top / contain no-repeat;
}

.story__detailBody--02{
    background: url("../img/story02_detail_main.webp") center top / contain no-repeat;
}

.story__detailBody--03{
    background: url("../img/story03_detail_main.webp") center top / contain no-repeat;
}

.story__detailBody--04{
    background: url("../img/story04_detail_main.webp") center top / contain no-repeat;
}

.story__detailText{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 78%;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .04em;
}

.story__detailBody--01 .story__detailText--1{ top: 320px; transform: translateX(calc(-50% + 0px)); }
.story__detailBody--01 .story__detailText--2{ top: 440px; transform: translateX(calc(-50% + 320px)); text-align: left; } 
.story__detailBody--01 .story__detailText--3{ top: 615px; transform: translateX(calc(-50% - 130px)); }
.story__detailBody--01 .story__detailText--4{ top: 860px; transform: translateX(calc(-50% - 130px)); } 
.story__detailBody--01 .story__detailText--5{ top: 990px; transform: translateX(calc(-50% + 105px)); }

.story__detailBody--02 .story__detailText--1{ top: 350px; transform: translateX(calc(-50% + 0px)); }
.story__detailBody--02 .story__detailText--2{ top: 395px; transform: translateX(calc(-50% + 0px)); } 
.story__detailBody--02 .story__detailText--3{ top: 585px; transform: translateX(calc(-50% - 140px)); }
.story__detailBody--02 .story__detailText--4{ top: 790px; transform: translateX(calc(-50% + 330px)); text-align: left; } 
.story__detailBody--02 .story__detailText--5{ top: 990px; transform: translateX(calc(-50% + 0px)); }

.story__detailBody--03 .story__detailText--1{ top: 248px; transform: translateX(calc(-50% - 85px)); }
.story__detailBody--03 .story__detailText--2{ top: 285px; transform: translateX(calc(-50% - 120px)); } 
.story__detailBody--03 .story__detailText--3{ top: 465px; transform: translateX(calc(-50% + 310px)); text-align: left; }
.story__detailBody--03 .story__detailText--4{ top: 605px; transform: translateX(calc(-50% - 130px)); } 
.story__detailBody--03 .story__detailText--5{ top: 880px; transform: translateX(calc(-50% + 0px)); }

.story__detailBody--04 .story__detailText--1{ top: 274px; transform: translateX(calc(-50% - 90px)); }
.story__detailBody--04 .story__detailText--2{ top: 310px; transform: translateX(calc(-50% - 90px)); } 
.story__detailBody--04 .story__detailText--3{ top: 455px; transform: translateX(calc(-50% + 355px)); text-align: left; }
.story__detailBody--04 .story__detailText--4{ top: 625px; transform: translateX(calc(-50% + 120px)); text-align: left; } 
.story__detailBody--04 .story__detailText--5{ top: 765px; transform: translateX(calc(-50% - 290px)); text-align: right; }
.story__detailBody--04 .story__detailText--6{ top: 930px; transform: translateX(calc(-50% + 0px)); }

.story__detailFooter{
    display:flex;
    justify-content:center;
    margin: 0;
}

.story__detailClose{
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.story__detailClose img{
    display: block;
    width: 177px;
    height: auto;
}

/*.story__detail.is-opening .story__detailInner{
    animation: detailGrow .45s cubic-bezier(.2,.9,.2,1) forwards;
}

.story__detail.is-closing .story__detailInner{
    animation: detailShrink .28s cubic-bezier(.4,0,.6,1) forwards;
}*/
.story__detail {
    display: block;
}
.story__detail {
    display: grid; 
    grid-template-rows: 0fr;
    transition: 500ms grid-template-rows ease;
}
.story__detail.open {
    grid-template-rows: 1fr;
}
.story__detail .story__detailInner {
    overflow: hidden;
}

/*@keyframes detailGrow{
    0%   { opacity: 0; transform: scaleY(0.0); }
    60%  { opacity: 1; transform: scaleY(1.02); } 
    100% { opacity: 1; transform: scaleY(1.0); }
}

@keyframes detailShrink{
    0%   { opacity: 1; transform: scaleY(1.0); }
    100% { opacity: 0; transform: scaleY(0.0); }
}

@media (prefers-reduced-motion: reduce){
    .story__detail.is-opening .story__detailInner,
    .story__detail.is-closing .story__detailInner{
        animation: none;
    }
}*/

.story__store{
    position: relative;
    width: 416px;
    margin: 60px auto 0;
}

.story__store-btn{
    display: block;
    width: 90%;
    max-width: 415px;
    height: auto;
    margin: 0 auto;
    transition: transform .18s cubic-bezier(.2, .9, .2, 1);
}
.story__store-btn:hover{
    transform: scale(1.01);
}

.story__store-btn:active{
    transform: scale(0.98);
}

.coming{
    position: absolute;
    height: auto;
    pointer-events: none;
}

.coming--pc{
    top: 3px;
    left: 120px;
    width: 100%;
    height: auto;
}

.coming--sp{
    display: none;
    width: min(50vw, 202px);
    left: 55%;
    transform: translateX(-40%);
    top: 25%;
}

/* ======================================
   section common
====================================== */
.instagram,
.illustration,
.allitems{
  text-align: center;
  background: #fff;
}

.instagram,
.illustration{
  padding: 60px 0;
}

.allitems{
  padding: 60px 0 120px;
}

/* inner */
.instagram__inner,
.illustration__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.allitems__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* lead margin reset */
.instagram__lead,
.illustration__lead{
  margin: 0;
}

/* illustration only */
.illustration__illust{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.illustration__char{
  transform-origin: 50% 90%;
  animation: sway 3.2s ease-in-out infinite;
  display: block;
}

@keyframes sway{
  0% { transform: rotate(-4deg); }
  50%{ transform: rotate(4deg); }
  100%{ transform: rotate(-4deg); }
}

/* allitems only */
.allitems-btnWrap{
  position: relative;
  display: inline-block;
}
.allitems-btn{
    transition: transform .18s cubic-bezier(.2, .9, .2, 1);
}
.allitems-btn:hover{
    transform: scale(1.01);
}
.allitems-btn:active{
    transform: scale(0.98);
}

.allitems-coming{
  position: absolute;
  top: 3px;
  left: 120px;
  pointer-events: none;
}

.allitems-coming--pc{ display: block; }
.allitems-coming--sp{ display: none; }

@media (max-width: 800px){
  .allitems-coming--pc{ display: none; }
  .allitems-coming--sp{ display: block; }

  .container.container--flush{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ======================================
footer
====================================== */
.container--flush{
    padding-left: 0;
    padding-right: 0;
}

.footer__photo{
    display: block;
    width: 100%;
    height: auto;
}

.footer__band{
    background: #3d574e;
    padding: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -1px;
}

.footer__logo{
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto;
}


/* ======================================
   Responsive 800
====================================== */
@media (max-width: 800px){
    body {
        background-color: #3d574e;
    }
    .page{
        width: 100%;
    }

    .container{
        padding: 0 16px;
    }

    .br--pc{
        display: none;
    }

    .br--sp{
        display: inline;
    }

    .hero__kv,
    .hero__kvInner{
        height: auto;
        min-height: 87.3vw;
    }

    .hero__kvInner{
        padding-top: 6vw;
    }

    .hero__brand img{
        width: min(40vw, 250px);
        height: auto;
    }

    @keyframes openLeft {
        to { transform: translateX(-45%);}
    }

    @keyframes openRight {
        to { transform: translateX(60%);}
    }

    .hero__copy {
        padding: 50px 0 0;
    }

    .hero__title{ font-size: 28px; }
    .hero__lead{ 
        font-size: 16px;
        margin-bottom: 40px;
    }
    .hero__illust{ width: 100%; max-width: 520px; }
    
    .hero__bird{
        width: min(10vw, 50px);
        right: 30px;
        top: 50%;
    }

    .hero__bird--orange{
        top: 55%;
        right: 100px;
    }

    .sectionTitle{ font-size: 20px;}
    .sectionLead{ font-size: 16px; line-height: 2; }

    .story{
        padding: 35px 0 70px;
    }

    .story__header::after{
        margin: 15px auto 0;
    }

    .story__no{
        font-size: min(10vw, 24px);
    }

    .story__no::before{
        width: 100px;
        height: 50px;
        border-radius: 100px 100px 0 0;
    }

    .story__content{
        gap: 20px;
    }

    .story__cta{
        margin-top: 20px;
        display: inline-block;
    }

    @keyframes ctaMove{
        0% { transform: translateX(15px);}
        50% { transform: translateX(25px);}
        100% { transform: translateX(15px);}
    }
    
    .story__detail{
        width: 100%;
        max-width: none;
        margin: 50px auto 0;
    }

    .story__detailInner{
        width: 100%;
    }

    .story__detailTitle{
        width: min(60vw, 300px);
    }

    .story__detailHeader{
        margin: 0 0 20px;
    }

    .story__header::after{
        width: min(90vw, 600px);
    }

    .story__detailBody{
        background: none;
        height: auto;
    }

    .story__detailText{
        display: none;
    }

    .story__detailImage-sp{
        display: block;
        max-width: 600px;
        height: auto;
        margin: 0 auto;
    }

    .story__left,
    .story__right{
        width: auto;
    }

    .story__illust{ display: none; }

    .story__store{
        width: 100%;
        margin: 35px auto 0;
    }
    
    .story__store-btn{
        width: 100%;
    }

    .coming--pc{
        display: none;
    }

    .coming--sp{
        display: block;
    }

    .instagram{
        padding: 30px 0 60px;
    }

    .instagram__inner img{
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .container.container--flush{
        padding-left: 0;
        padding-right: 0;
    }

    .footer__logo{ width: min(160px, 50%) }
}