@charset "utf-8";
@import url("reset.css");


body {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
-ms-text-size-adjust: 100%;/*EgdeMobile*/
-moz-text-size-adjust: 100%;/*firefox*/
}

/*-------------------------------------------- */
/* root
---------------------------------------------- */
:root {
--black: #000;
--white: #fff;
--gray: #565656;
--gray_oc95: rgba(112, 112, 112, 0.95);/*#707070*/
--gray_oc90: rgba(112, 112, 112, 0.90);/*#707070*/
--gray_oc70: rgba(214, 214, 214, 0.7);/*#cccccc*/
--gray_oc40: rgba(71, 71, 71, 0.4);/*#474747*/
--bg_greige: #e7f6ff;
--greige_oc70: rgba(240, 237, 236, 0.7);/*#f0edec*/
--greige: #9fd9fa;
--light_greige: #ccbab6;
--dark_graige: #295b73;
--dark-pink: #99465d;

--fs12: 1.5625vw;
--fs14: 1.823vw;
--fs16: 2.0833vw;
--fs18: 2.3437vw;
--fs20: 2.6vw;
--fs22: 2.8645vw;
--fs24: 3.125vw;
--fs26: 3.385vw;
--fs28: 3.645vw;
--fs30: 3.9vw;
--fs32: 4.1667vw;
--fs36: 4.6875vw;
--fs38: 4.948vw;
--fs42: 5.4687vw;
--fs48: 6.25vw;
--fs50: 6.5101vw;
--fs66: 8.5931vw;
--fs70: 10.4167vw;
--fs96: 12.5vw;

--space5: 0.6511vw;
--space10: 1.302vw;
--space15: 1.953vw;
--space20: 2.604vw;
--space25: 3.2552vw;
--space30: 3.906vw;
--space35: 4.557vw;
--space40: 5.208vw;
--space50: 6.511vw;
--space60: 7.8125vw;
--space62: 8.0723vw;
--space65: 8.4635vw;
--space70: 9.115vw;
--space80: 10.4167vw;
--space90: 11.7188vw;
--space100: 13.02vw;
--space140: 18.2292vw;
--space170: 22.1354vw;
--space180: 23.4375vw;
--space200: 26.042vw;
--space230: 29.948vw;
--space250: 32.5521vw;
--space280: 36.4583vw;
--space320: 41.6666vw;
--space360: 46.875vw;
--space380: 49.4792vw;
--space390: 50.7813vw;
--space400: 52.0833vw;
--space430: 55.9896vw;
--space450: 58.5938vw;
--space470: 61.1979vw;
--space480: 62.5vw;
--space500: 65.1042vw;
--space550: 71.6146vw;
--space560: 72.9167vw;
--space660: 85.9375vw;
--space700: 91.1458vw;
--space860: 111.9792vw;
--space880: 114.5833vw;

--headerH: 15.625vw;
--btWebW: 44vw;

--ease-custom-in: cubic-bezier(.2,.17,1,.28);
--ease-custom-out: cubic-bezier(.16,.5,.25,1);

--mv_textPT: 37.7605vw;
--mv_newopenW: 40.1041vw;
--mv_newopenH: 14.8443vw;

--header_logoW: 19.5312vw;
--header_logoH: 9.6354vw;
--header_menuW: 7.8125vw;
--header_menuLine_BTY: 1.3021vw;
--header_menuLine_ATY: -1.3021vw;
--header_icon_instagramW: 5.4687vw;
--header_icon_instagramPR: 17.7083vw;
--header_icon_instagramPT: 5vw;
--logoMark_firstW: 20.8333vw;
--logoMark_firstH: 20.8333vw;

--section_PT: calc(var(--headerH) + var(--space80));
}

@media screen and (min-width: 786px){
:root {
--fs12: 1.2rem;
--fs14: 1.4rem;
--fs16: 1.6rem;
--fs18: 1.8rem;
--fs20: 2rem;
--fs22: 2.2rem;
--fs24: 2.4rem;
--fs26: 2.6rem;
--fs28: 2.8rem;
--fs30: 3rem;
--fs32: 3.2rem;
--fs36: 3.6rem;
--fs38: 3.8rem;
--fs42: 4.2rem;
--fs48: 4.8rem;
--fs48: 5rem;
--fs66: 6.6rem;
--fs70: 7rem;
--fs96: 9.6rem;

--space5: 5px;
--space10: 10px;
--space15: 15px;
--space20: 20px;
--space25: 25px;
--space30: 30px;
--space35: 35px;
--space40: 40px;
--space50: 50px;
--space60: 60px;
--space62: 62px;
--space65: 65px;
--space70: 70px;
--space80: 80px;
--space90: 90px;
--space100: 100px;
--space140: 140px;
--space170: 170px;
--space180: 180px;
--space200: 200px;
--space230: 230px;
--space250: 250px;
--space280: 280px;
--space320: 320px;
--space360: 360px;
--space380: 380px;
--space390: 390px;
--space400: 400px;
--space430: 430px;
--space450: 450px;
--space470: 470px;
--space480: 480px;
--space500: 500px;
--space550: 550px;
--space560: 560px;
--space660: 660px;
--space700: 700px;
--space860: 860px;
--space880: 880px;

--headerH: 90px;
--btWebW: 250px;

--mv_textPT: 150px;
--mv_newopenW: 308px;
--mv_newopenH: 108px;

--header_logoW: 150px;
--header_logoH: 74px;
--header_menuW: 60px;
--header_menuLine_BTY: 5px;
--header_menuLine_ATY: -5px;
--header_icon_instagramW: 42px;
--header_icon_instagramPR: 120px;
--header_icon_instagramPT: 25px;
--logoMark_firstW: 160px;
--logoMark_firstH: 160px;

}
}

[data-d="1"] { transition-delay: .1s!important;}
[data-dh="1"] { transition-delay: .05s!important;}
[data-d="2"] { transition-delay: .2s!important;}
[data-dh="2"] { transition-delay: .1s!important;}
[data-d="3"] { transition-delay: .3s!important;}
[data-dh="3"] { transition-delay: .15s!important;}
[data-d="4"] { transition-delay: .4s!important;}
[data-dh="4"] { transition-delay: .2s!important;}
[data-d="5"] { transition-delay: .5s!important;}
[data-dh="5"] { transition-delay: .25s!important;}
[data-d="6"] { transition-delay: .6s!important;}
[data-dh="6"] { transition-delay: .3s!important;}
[data-d="7"] { transition-delay: .7s!important;}
[data-dh="7"] { transition-delay: .35s!important;}
[data-d="8"] { transition-delay: .8s!important;}
[data-dh="8"] { transition-delay: .4s!important;}
[data-d="9"] { transition-delay: .9s!important;}
[data-dh="9"] { transition-delay: .45s!important;}
[data-d="10"] { transition-delay: 1s!important;}
[data-dh="10"] { transition-delay: .5s!important;}
[data-d="11"] { transition-delay: 1.1s!important;}
[data-dh="11"] { transition-delay: .55s!important;}
[data-d="12"] { transition-delay: 1.2s!important;}
[data-dh="12"] { transition-delay: .6s!important;}
[data-d="13"] { transition-delay: 1.3s!important;}
[data-dh="13"] { transition-delay: .65s!important;}
[data-d="14"] { transition-delay: 1.4s!important;}
[data-dh="14"] { transition-delay: .7s!important;}
[data-d="15"] { transition-delay: 1.5s!important;}
[data-dh="15"] { transition-delay: .75s!important;}
[data-d="16"] { transition-delay: 1.6s!important;}
[data-dh="16"] { transition-delay: .8s!important;}
[data-d="17"] { transition-delay: 1.7s!important;}
[data-dh="17"] { transition-delay: .85s!important;}
[data-d="18"] { transition-delay: 1.8s!important;}
[data-dh="18"] { transition-delay: .9s!important;}
[data-d="19"] { transition-delay: 1.9s!important;}
[data-dh="19"] { transition-delay: .95s!important;}
[data-d="20"] { transition-delay: 2s!important;}
[data-dh="20"] { transition-delay: 1s!important;}
[data-d="21"] { transition-delay: 2.1s!important;}
[data-dh="21"] { transition-delay: 1.05s!important;}
[data-d="22"] { transition-delay: 2.2s!important;}
[data-dh="22"] { transition-delay: 1.1s!important;}
[data-d="23"] { transition-delay: 2.3s!important;}
[data-dh="23"] { transition-delay: 1.15s!important;}
[data-d="24"] { transition-delay: 2.4s!important;}
[data-dh="24"] { transition-delay: 1.2s!important;}
[data-d="25"] { transition-delay: 2.5s!important;}
[data-dh="25"] { transition-delay: 1.25s!important;}
[data-d="26"] { transition-delay: 2.6s!important;}
[data-dh="26"] { transition-delay: 1.3s!important;}
[data-d="27"] { transition-delay: 2.7s!important;}
[data-dh="27"] { transition-delay: 1.35s!important;}
[data-d="28"] { transition-delay: 2.8s!important;}
[data-dh="28"] { transition-delay: 1.4s!important;}
[data-d="29"] { transition-delay: 2.9s!important;}
[data-dh="29"] { transition-delay: 1.45s!important;}
[data-d="30"] { transition-delay: 3s!important;}
[data-dh="30"] { transition-delay: 1.5s!important;}
[data-d="40"] { transition-delay: 4s!important;}
[data-d="50"] { transition-delay: 5s!important;}
[data-d="60"] { transition-delay: 6s!important;}
[data-d="70"] { transition-delay: 7s!important;}
[data-d="80"] { transition-delay: 8s!important;}
[data-d="90"] { transition-delay: 9s!important;}
[data-d="100"] { transition-delay: 10s!important;}
[data-d="110"] { transition-delay: 11s!important;}
[data-d="120"] { transition-delay: 12s!important;}

/*-------------------------------------------- */
/* animation
---------------------------------------------- */
@keyframes bgAnm { 
    0% {
        -webkit-background-position: 0% 50%; 
        background-position: 0% 50%; 
        }

    50% { 
        -webkit-background-position: 100% 50%;
        background-position: 100% 50%; 
    }

    100% {
        -webkit-background-position: 0% 50%;
        background-position: 0% 50%; 
    } 
}

@keyframes bgMv {
    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    } 
}

@keyframes scroll {
    0%,6% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px)
    }

    33%,66% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    94%,100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }
}

@keyframes slideinTop {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
  }

@keyframes fadeup {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
  }

@keyframes planImg {
    0%{
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30%{
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    70%{
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    } 
  }



/*-------------------------------------------- */
/* common
---------------------------------------------- */
body,
html {
width: 100%; color: var(--black);
font-family: "YuMincho", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", serif;; font-size: 62.5%; font-weight: 400;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
}


/* ---------- COMMON : LOADING ---------- */
.loading { background: linear-gradient(-71deg, var(--light_greige) 0%, var(--dark_graige) 100%); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; z-index: 999; background-size: 200% 200%; animation: bgAnm 4s ease infinite; }
.loading_logo { opacity: 0; width: var(--logoMark_firstW); height: var(--logoMark_firstH); transition: 2s;}
.loading_logo.show { opacity: 1; transition: 2s;}

.wrap { max-width: 768px; min-height: 100vh; font-size: var(--fs18); margin: 0 auto; position: relative;}
.btWebArea { display: flex; justify-content: end; height: 40px; position: sticky; bottom: 0; right: 0; z-index: 998;}
.btWeb { display: flex; align-items: center; justify-content: center; width: var(--btWebW); height: 40px; text-decoration: none; font-size: var(--fs26); background: var(--gray_oc90); color: var(--white); letter-spacing: .1em; cursor: pointer;}

.btArea { display: flex; justify-content: center; margin: var(--space60) 0 0 0;}
.bt { width: var(--space480); height: var(--space90); display: flex; align-items: center; justify-content: center; background: var(--light_greige); border-radius: var(--space90); color: var(--white); font-size: var(--fs32); line-height: 1.1em; letter-spacing: .05em; text-decoration: none;}
.btArrowLight { width: var(--space480); height: var(--space90); display: flex; align-items: center; justify-content: space-between; border-radius: var(--space90); color: var(--white); font-size: var(--fs32); line-height: 1.1em; letter-spacing: .05em; text-decoration: none; padding: 0 var(--space50);}
.btArrowLight { background: var(--light_greige);}
.btArrowLight img { width: var(--space20); height: var(--space20);}
.bt:hover,
.btArrowLight:hover { opacity: .7; transition: .2s;}


.btArrowLight {justify-content: flex-end;}
.btArrowLight img {margin-left: 25%;}

/*-------------------------------------------- */
/* header
---------------------------------------------- */
header { width: 100%; max-width: 768px; height: var(--headerH); background: var(--white); position: fixed; z-index: 2;}
.header_in { display: flex; align-items: center;  width: 100%; height: 100%;  padding: var(--space10) var(--space40); position: relative;}
.header_in .logo {width: var(--header_logoW); height: var(--header_logoH); fill: #2e2624; transition: 1s; position: absolute; left: var(--space40); z-index: 2;}
.header_in .header_icon_instagram { width: var(--header_icon_instagramW); fill: var(--black); transition: 1s; position: absolute; top: var(--header_icon_instagramPT); right: var(--header_icon_instagramPR); z-index: 2;}
.header_in .logo.white,
.header_in .header_icon_instagram.white { fill: var(--white); transition: 1s;}


.menu { width: var(--header_menuW); height: 12px; background: none; border: none; position: relative; cursor: pointer; position: absolute; right: var(--space40); z-index: 2;}
.menu .menuLine:before,
.menu .menuLine:after { content: ""; display: block; width: 100%; height: 2px; background: var(--gray); transition: 1s;}
.menu .menuLine:before { position: absolute; top: 0;}
.menu .menuLine:after {  position: absolute; bottom: 0;}
.menu .menuLine.close:before { background: var(--white); transform: translateY(var(--header_menuLine_BTY)) rotate(15deg);}
.menu .menuLine.close:after { background: var(--white); transform: translateY(var(--header_menuLine_ATY)) rotate(-15deg);}

.globalNav { display: block; width: 100%; max-width: 768px; background: var(--gray_oc95); font-size: var(--fs48); color: var(--white); padding: var(--headerH) var(--space50); text-align: right; letter-spacing: .1em; position: absolute; top: 0; left: 0; z-index: 1;clip-path: inset(0 0 100% 0); overflow: hidden;transition: clip-path .8s var(--ease-custom-out), -webkit-clip-path .8s var(--ease-custom-out);}
.globalNav ul { list-style: none;}
.globalNav li { padding-bottom: var(--space20);}
.globalNav a { color: var(--white); text-decoration: none; line-height: 1.3; margin-top: -.1em; transition: .4s var(--ease-custom-out); overflow: hidden;}
.globalNav .contact { border-top: 1px solid var(--white); border-bottom: 1px solid var(--white); padding: 30px 0; margin-bottom: 30px;}
.globalNav .icon_instagram { display: flex; align-items: center; justify-content: end;}
.globalNav .icon_instagram:after { content: ""; width: 20px; height: 20px; background: url(../images/Instagram_Glyph_White.svg) no-repeat; margin-left: 15px;}

.clipTx_in { overflow: hidden;}
.clipTx_text { overflow: hidden; transform: translateY(140%); transition: transform .6s var(--ease-custom-out);}
.active { clip-path: inset(0 0 0 0);}
.active .clipTx_text { transform: translate(0); transition: .8s var(--ease-custom-out);}


/*-------------------------------------------- */
/* mv
---------------------------------------------- */
main { padding-bottom: var(--space50);}
.mvArea { width: 100%; height: 100vh; background: #ddd; overflow: hidden; position: relative;}
.mvArea:before { content: ""; width: 100%; height: calc(100vh - var(--headerH));
background: url(../images/01_firstview.webp) no-repeat center;
background-size: cover;
position: fixed; top: var(--headerH); left: 0;
z-index: -1;
animation: bgMv 15s ease-in-out forwards;}
.mvText { position: absolute; left: var(--space40); top: var(--mv_textPT);}
.mvText .newopenArea { margin-bottom: 20px;}
.mvText .newopen { width: var(--mv_newopenW); height: var(--mv_newopenH); padding-bottom: var(--space10);}
.mvText .date { font-size: var(--fs70); color: var(--white); line-height: 1;}
.mvText .title { font-size: var(--fs26); color: var(--white); line-height: 1.2;}

.scrollCont { width: 10px; position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%);}
.scrollCont > span { display: block; color: var(--white); font-size: var(--fs22); line-height: 1em; letter-spacing: .1em; transform: rotateZ(270deg); margin-top: 40px; margin-right: 3px;}
.scrollBar { height: 100px; overflow: hidden; position: relative;}
.scrollBar:before,
.scrollBar:after { content: ""; display: block; width: 1px; height: 100px; position: absolute; left: 50%; bottom: 0;}
.scrollBar:before { background: var(--black);}
.scrollBar:after { background: var(--white); animation: scroll 2.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;;}


/*-------------------------------------------- */
/* contents
---------------------------------------------- */
.contents { position: relative; z-index: 1;}
.logoMark_first { width: var(--logoMark_firstW); margin: auto;}
h2 { text-align: center; font-size: var(--fs48); font-weight: 400; letter-spacing: .1em; margin: 0 auto;}
h3 { text-align: center;}

/* about
---------------------------------------------- */
section#about { padding: var(--section_PT) var(--space40) 0; margin-bottom: var(--space200);}
section#about h2 { margin-bottom: var(--space30);}
section#about h3 { font-weight: 400; font-size: var(--fs36); letter-spacing: .1em; margin: 0 auto var(--space70);}

section#about p { font-size: var(--fs26); line-height: 2.5em; letter-spacing: .08em; text-align: center; margin-bottom: var(--space80);
opacity: 0;
transform: translate(0, 30px);
-webkit-transform: translate(0, 30px);}
section#about p.is_play {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 1s ease;
transition: all 1s ease;}


/* features
---------------------------------------------- */
section#features { background: var(--bg_greige); padding: var(--section_PT) 0 var(--space70);}
section#features h2 { margin-bottom: var(--space15);}
section#features h3 { font-weight: 400; font-size: var(--fs26); letter-spacing: .1em; margin: 0 auto var(--space70);}

section#features article { display: flex; justify-content: space-between; padding-bottom: var(--space70);}
section#features article figure { width: var(--space320); height: var(--space470); margin: 0; padding: 0; overflow: hidden;}
section#features article img { width: 100%;}

section#features article .textArea{ width: var(--space400);
opacity: 0;
transform: translate(0, 50px);
-webkit-transform: translate(0, 50px)
}
section#features article .textArea.is_play {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 2s ease;
transition: all 2s ease;
}

section#features article h4 { font-weight: 400; font-size: var(--fs36); margin: 0 0 var(--space35);}
section#features article h5 { font-weight: 600; font-size: var(--fs24); margin: 0 0 var(--space15); letter-spacing: .05em;}
section#features article p { font-size: var(--fs22); letter-spacing: 0.05em; margin: 0 0 1em; line-height: 1.8em;}
section#features article:nth-child(odd) .textArea { padding-right: var(--space40);}
section#features article:nth-child(even) .textArea { padding-left: var(--space40);}


/* photo
---------------------------------------------- */
section.photo { padding: var(--section_PT) var(--space40) 0;  margin-bottom: var(--space50);} 
section#locationPhoto { padding-top: var(--space170); margin-bottom: var(--space200);}
section.photo h2 { margin-bottom: var(--space30);}
section.photo p { font-size: var(--fs24); letter-spacing: 0.05em; text-align: center; margin: 0 auto var(--space10);}


/* photo slick
---------------------------------------------- */
section.photo .slick-prev, section.photo .slick-next { display: block ;width: var(--space60); height: var(--space60); position: absolute; top: 50%;
 -webkit-transform: translate(0, -50%);
 -ms-transform: translate(0, -50%);
 transform: translate(0, -50%);
 cursor: pointer;
 border: none;
 outline: none;
 position: absolute;
 top: 50%;
 z-index: 3;
}
section.photo .slick-prev { left: calc(-1 * var(--space30));}
section.photo .slick-next { right: calc(-1 * var(--space30));}
section.photo .slick-prev:before,
section.photo .slick-next:before {
content: ""; display: block; width: 100%; height: 100%;
}
section.photo .slick-prev:before { background: url(../images/slider_arrow.svg) no-repeat; background-size: cover;}
section.photo .slick-next:before { background: url(../images/slider_arrow.svg) no-repeat; background-size: cover; transform: rotate(180deg);}
section.photo .slick-dots { bottom: calc(-1 * var(--space60));}
section.photo .slick-dots li { margin: var(--space10) var(--space5);}
section.photo .slick-dots li button { padding: 0;}
section.photo .slick-dots li button:before { font-size: var(--fs18); color: #d6d1d0; opacity: 1}
section.photo .slick-dots li.slick-active button:before { color: var(--black); opacity: 1}
section.photo .slick-slide { position: relative; z-index: 1;}
section.photo .slick-slide span { font-size: var(--fs20); color: var(--white); position: absolute; bottom: var(--space20); right: var(--space30); z-index: 2;}


/* plan
---------------------------------------------- */
section#studioPlan,
section#locationPlan { padding: var(--section_PT) var(--space40) var(--space70);}
section.plan h2 { margin-bottom: var(--space20);}

section.plan article { height: var(--space880); margin-bottom: var(--space80); position: relative;}
section#studioPlan.plan article { background: var(--bg_greige);}
section#locationPlan.plan article { background: var(--gray_oc70);}
section.plan article figure { width: 100%; margin: 0; padding: 0; position: absolute; top: var(--space80); z-index: 0; overflow: hidden;}
section.plan article figure img.is_play { animation: planImg 30s ease-in-out infinite;}
section.plan article .num { font-size: var(--fs96); position: absolute; top: var(--space10); z-index: 2;}
section#studioPlan article .num { color: var(--white);}
section.plan article:nth-of-type(2n-1) .num { left: var(--space10);}
section.plan article:nth-of-type(2n) .num { right: var(--space10); color: var(--white);}
section.plan article h3 { font-weight: 400; font-size: var(--fs28); line-height: 1; padding: var(--space20) var(--space50); margin: 0; position: absolute; top: var(--space30); z-index: 2;}
section#studioPlan.plan article h3 { background: var(--gray_oc70);}
section#locationPlan.plan article h3 { background: var(--greige_oc70); text-align: left; line-height: 1.4em;}
section#locationPlan.plan article h3 span {display: block; padding-left: 1em;}
section.plan article:nth-of-type(2n-1) h3 { right: 0;}
section.plan article:nth-of-type(2n) h3 { left: 0;}
section.plan article .explain { width: var(--space500); height: var(--space180); display: flex; align-items: center; font-size: var(--fs20); line-height: 1.8; padding: 0 var(--space20) 0 var(--space50); margin: 0; position: absolute; top: var(--space450); z-index: 2;}
section#studioPlan.plan article .explain { background: var(--gray_oc70);}
section#locationPlan.plan article .explain { background: var(--greige_oc70);}
section.plan article:nth-of-type(2n-1) .explain { left: var(--space20);}
section.plan article:nth-of-type(2n) .explain { right: var(--space20);}
section#studioPlan.plan article:nth-of-type(2n) .explain
 { height: var(--space230);position: absolute; top: var(--space400);}
section.plan article .patch { width: var(--space180); height: var(--space180); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--greige); border-radius: 50%; font-weight: 600; color: var(--dark-pink); font-size: var(--fs26); position: absolute; top: var(--space560); z-index: 3;}
section#locationPlan.plan article:nth-of-type(2n) .patch { color: var(--black);}
section.plan article:nth-of-type(2n-1) .patch { right: var(--space20);}
section.plan article:nth-of-type(2n) .patch { left: var(--space20);}
section.plan article .patch span { display: block; font-size: var(--fs36);}
section.plan article .priceArea { width: var(--space500); height: var(--space170); text-align: center; padding: 0 var(--space35); position: absolute; top: var(--space660); z-index: 1;}
section.plan article:nth-of-type(2n-1) .priceArea { left: var(--space20);}
section.plan article:nth-of-type(2n) .priceArea { right: var(--space20);}
section#studioPlan.plan article:nth-of-type(2n) .priceArea { padding-left: var(--space80);}
section.plan article .priceArea .before { font-size: var(--fs28); text-decoration: line-through; margin: 0 0 var(--space50); position: relative;}
section#studioPlan.plan article:nth-of-type(2n) .priceArea .before { padding-right: var(--space30);}
section.plan article .priceArea .before:after { content: ""; display: block; width: var(--space20); height: calc(var(--space20) / 2 * tan(60deg)); background: var(--black); clip-path: polygon(0 0, 100% 0, 50% 100%);; position: absolute; top: var(--space50); left: calc(50% - var(--space10)); z-index: 3;}
section#studioPlan.plan article:nth-of-type(2n) .priceArea .before:after { left: calc(50% - var(--space30));}
section#studioPlan.plan article .priceArea .before:after { content: ""; display: block; width: var(--space20); height: calc(var(--space20) / 2 * tan(60deg)); background: var(--black); clip-path: polygon(0 0, 100% 0, 50% 100%);; position: absolute; top: var(--space50); left: calc(50% - var(--space10)); z-index: 3;}
section.plan article .priceArea .after { font-size: var(--fs28); line-height: 1.1em;}
section.plan article .priceArea .after span { font-size: var(--fs42); font-weight: 600; color: var(--dark-pink); padding: 0 0 0 var(--space30);}
section.plan article .priceArea .note { font-size: var(--fs16); text-align: left; padding-left: var(--space25); margin: 0;}

section.plan article .delivery { width: 100%; background: var(--greige); text-align: center; font-size: var(--fs22); line-height: 1em; padding: var(--space20); position: absolute; bottom: 0;}


/* costume
---------------------------------------------- */
section#costume { padding: var(--section_PT) var(--space40) var(--space70);}
section#costume h2 { margin-bottom: var(--space30);}
section#costume h2 + p { font-size: var(--fs22); text-align: center; margin: 0 auto var(--space10);}

/* costume slick
---------------------------------------------- */
section#costume .slick-prev,
section#costume .slick-next { display: block; width: var(--space60); height: var(--space60); position: absolute; top: 50%;
 -webkit-transform: translate(0, -50%);
 -ms-transform: translate(0, -50%);
 transform: translate(0, -50%);
 cursor: pointer;
 border: none;
 outline: none;
 position: absolute;
 top: 50%;
 z-index: 3;
}
section#costume .slick-prev { left: var(--space40);}
section#costume .slick-next { right: var(--space40);}
section#costume .slick-prev:before,
section#costume .slick-next:before {
content: ""; display: block; width: 100%; height: 100%;
}
section#costume .slick-prev:before { background: url(../images/slider_arrow.svg) no-repeat; background-size: cover;}
section#costume .slick-next:before { background: url(../images/slider_arrow.svg) no-repeat; background-size: cover; transform: rotate(180deg);}
section#costume .slick-dots { bottom: calc(-1 * var(--space60));}
section#costume .slick-dots li { margin: var(--space10) var(--space5);}
section#costume .slick-dots li button { padding: 0;}
section#costume .slick-dots li button:before { font-size: var(--fs18); color: #d6d1d0; opacity: 1}
section#costume .slick-dots li.slick-active button:before { color: var(--black); opacity: 1}
section#costume .sliderArea { margin-bottom: var(--space140);}
/*
section#costume .sliderArea img {
width: 100%;
height: var(--space700);
}
*/
section#costume .slick-slide img{
transform: scale(.8);
transition: .2s;
}
section#costume .slick-slide.slick-center img {
 transform: scale(1.1);
 transition: .2s;
}


/* instagram
---------------------------------------------- */
aside#instagram { padding: var(--section_PT) var(--space40) var(--space70);}
aside#instagram h2 { margin-bottom: var(--space30); line-height: 1.5em;}

aside#instagram a { display: flex; align-items: center; justify-content: center; position: relative;}
aside#instagram a:after { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, .4);
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.iPhone aside#instagram a:after,
.iPad aside#instagram a:after,
.Android aside#instagram a:after { display: none;}
aside#instagram a:hover:after { background: rgba(0, 0, 0, 0);}
aside#instagram div { display: flex; align-items: center; justify-content: center; flex-direction: column; width: var(--space140); height: var(--space140); background: var(--gray_oc40);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
z-index: 2;} 
aside#instagram div img { width: var(--space60); height: var(--space60);}
aside#instagram div p { margin: 0; text-align: center; font-size: var(--fs22); color: var(--white);}


/* contact
---------------------------------------------- */
section#contact { padding: var(--section_PT) var(--space40) var(--space70);}
section#contact h2 { margin-bottom: var(--space50); line-height: 1.2em;}
section#contact h2 + p { font-size: var(--fs22); text-align: center; margin: 0 auto var(--space50);}

#mailForm input,
#mailForm textarea,
#mailForm select { width: 100%; background: var(--bg_greige); border: none; padding: var(--space20);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none; 
}
select:-ms-expand { display: none;}
#mailForm input:focus,
#mailForm textarea:focus,
#mailForm select:focus { border: none; background-color: var(--gray_oc70); box-shadow: none; outline: none;}

#mailForm select { background: var(--bg_greige) url(../images/icon_arrowDown.svg) 95% center no-repeat; background-size: var(--space20) var(--space20); padding-right: var(--space30);}
#mailForm select.disabled { color: #ccc;}

#mailForm dl { margin: 0 auto var(--space40);}
#mailForm dt { width: 100%; font-size: var(--fs22); line-height: 1em; margin-bottom: var(--space5); position: relative;}
#mailForm dt.required:after { content: "Required"; display: flex; align-items: center; justify-content: center; width: var(--space90); height: var(--space20); background: var(--dark_graige); font-size: var(--fs12); color: var(--white); position: absolute; bottom: 0; right: 0;}

#mailForm dt span { font-size: var(--fs16);}
#mailForm dd { width: 100%; margin: 0;}
#mailForm dd > span { font-size: 70%;}
#mailForm dd dl { width: 100%;}

#mailForm .btArea { margin-bottom: var(--space140);}
#mailForm .btArea input.btArrowDark {  width: var(--space480); height: var(--space90); background: var(--dark_graige) url(../images/icon_arrow.svg) no-repeat 90% center; background-size: var(--space20) var(--space20); display: flex; align-items: center; text-align: center; border: none; border-radius: var(--space90); color: var(--white); font-size: var(--fs32); line-height: 1.1em; letter-spacing: .05em; text-decoration: none; padding: 0 var(--space50); cursor: pointer;}
#mailForm .btArea input.btArrowDark:hover { opacity: .7; transition: .2s;}


/*-------------------------------------------- */
/* footer
---------------------------------------------- */
footer { background: var(--gray_oc70); padding: var(--space140) 0 0; margin-bottom: -40px; text-align: center;}
footer .logoMark { width: var(--space170); height: var(--space170); margin: 0 auto var(--space70);}
footer .logo { font-size: var(--fs32); margin-bottom: var(--space90);}
footer address { font-size: var(--fs26); font-style: normal; margin-bottom: var(--space60);}
footer .shopInfo { font-size: var(--fs24); line-height: 2em; margin-bottom: var(--space140);}
footer .shopInfo a { text-decoration: none; color: var(--black);}
footer .googlemap { display: inline-block; color: var(--black); font-size: var(--fs22); text-decoration: none; border-bottom: 1px solid var(--black); padding-bottom: var(--space5); margin-bottom: var(--space60);}
footer .sns { margin-bottom: var(--space200);}
footer .sns p { font-size: var(--fs24); margin-bottom: var(--space60);}
footer .sns a.icon_instagram { display: block; width: var(--space50); height: var(--space50); margin: 0 auto;}
footer .copyright { font-size: var(--fs20); padding-bottom: 60px;}