@charset 'UTF-8';

/* --------------------- */
/* var                  */
/* ------------------- */
:root{
  --off-white: #fefefe; --flat-white: #f5f4f2; --mat-white: #f1f1f1;
  --off-gray: #cecece; --flat-gray: #cacaca; --mat-gray: #c1c1c1;
  --off-black: #131313; --flat-black: #1a1a1a; --mat-black: #0a0a0a;
}


/* --------------------- */
/* base                 */
/* ------------------- */
.filter { width: 100%; height: 100%; position: absolute; z-index: 2; }
.filter + .note { z-index: 3; }
.filter.bk { background-color: rgba(0,0,0,.3); }
.filter.bk + .note { color: var(--flat-white); }
.filter.bk + .note a { color: var(--flat-white); }

.fade_up { opacity: 0.1; transform: translate(0,2.5rem); transition: all 0.7s; }
.fade_up.scrollin { opacity: 1; transform: translate(0,0); }
.fade_in { opacity: 0.1; transition: all 1.0s; }
.fade_in.scrollin { opacity: 1; }

.main.wrap { position: relative; overflow: hidden; }

/* --------------------- */
/* index                */
/* ------------------- */
.mov.wrap { width: 100%; height: 100vh; position: relative; }
.mov.content { min-width: 100%; min-height: 100%; position: absolute; top:25%; left:50%; transform: translate(-50%, -25%);}
.mov.note { position: absolute; bottom: 15%; width: 80%; margin: 0 10%; }

.mov.note h1 { font-size: .8rem; display: inline-block; color: var(--flat-white); margin: 0 0 1.5rem; padding: 0.5rem 0; border-bottom: solid 1px var(--flat-white); letter-spacing: .1em; }
.mov.note ul li { line-height: 1.75; font-weight: 900; letter-spacing: .05em; font-size: 1.2rem; }


.wrap.title { display: flex; justify-content: center; padding: 10rem 0; width: 100%; }
.wrap.title h1 { display: flex; flex-flow: column; text-align: center; font-size: 1.6rem; font-weight: bold; }
.wrap.title h1 span { display: block; margin: 1rem 0 0; font-size: .9rem; font-weight: normal; }
.wrap.body h2 { margin: 0; padding: 2rem 2rem 0; font-size: 1.5rem; font-weight: bold; background-color: transparent; color: black; }
.wrap.body p { padding: 1rem 2rem 0; font-size: .7rem; line-height: 1.4; }
.wrap.body p:last-child { padding: 1rem 2rem 5rem; font-size: 1rem; }
.wrap.body p a { border-bottom: solid 1px gray; color: gray; }
.wrap.body:nth-child(odd) { background-color: #f5f4f2; }
.wrap.concept__body p { font-size: .9rem; line-height: 1.75; margin: 1.5rem 2rem; }
.wrap.concept__body h2 { margin: 2rem; font-size: 1.5rem; font-weight: bold; }
.wrap.concept__body hr { margin: 5rem 2rem; }
.contact__form { padding: 4rem 2rem; background-color: #f5f4f2; }
.contact__form dd { margin: 0 0 2rem; }
.contact__form dt { font-size: 1rem; font-weight: bold; margin: 0 0 1rem; }
.contact__form input[type=text] { display: block; width: 100%; padding: 1rem; font-size: 1rem; }
textarea { width: 100%; min-height: 300px; padding: 1rem; font-size: 1rem; }
.contact__wrap input[type=submit] { background-color: gray; padding: 0.5rem 3rem; color: white; }
footer { margin: 4rem 0 0; background-color: #131313; color: white; font-size: .9rem; padding: 4rem 2rem; width: 100%; }
footer a { line-height: 1.5; color: gray; }

.footer___logo { width: 50%; margin: 0 auto 4rem; }
@media screen and (min-width:744px){ .footer___logo { width: 10%; }}


.footerlist li { display: inline-block; margin: 0 0.25rem 0.5rem 0; }
.footerlist { text-align: center; }
address { text-align: center; }
.single.img { padding: 6rem 2rem 4rem; }

.post_content h2::before { display: none;}
.lp-content__inner { width: 100%; max-width: 100%; margin: 0; padding: 0; }

@media screen and (min-width:744px){
  #collection__wrap { display: flex; flex-flow: row wrap; }
  #collection__wrap .wrap.body { width: 50%; }
}