@charset "UTF-8";
/* ---------------------------------------------------------------------------------
 = Reset default browser CSS. 
--------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;box-sizing:border-box;}:focus{outline:0}body{background:#fff;line-height:1}ol,ul,li{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{font-weight:300;text-align:left}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}a img{border:0}article,aside,details,figcaption,figure,footer,main,header,hgroup,menu,nav,section{display:block}

/* -----------------------------------------------
 = Global 
----------------------------------------------- */
*,
*:before,
*:after {-webkit-box-sizing:border-box; box-sizing:border-box; background-repeat:no-repeat; flex-wrap:wrap; -webkit-tap-highlight-color:transparent;}
*:focus {outline:none;}
html {}
body {position:relative;}
body,
input,
textarea {
font-family:zen-old-mincho, sans-serif;
-webkit-font-smoothing:subpixel-antialiased;
color:#222; font-size:62.5%; font-weight:400; line-height:1.8;}

/* Headings */
h1, h2, h3, h4, h5, h6 {}
hr {}
/* Text elements */
p {}
ul, ol {list-style-type:none;}
dl {}
dt {}
dd {}
strong, b {}
cite, em, i {}
blockquote {}
pre {}
code, kbd, samp, var {}
abbr, acronym, dfn {}
address {}
ins {}
sup {vertical-align:super;}
sub {}
small {}
/* Table */
table {border-collapse:collapse;}
/* image */
img {width:auto; max-width:100%; height:auto;
/*-webkit-touch-callout:none;*/
/*-webkit-user-select:none;*/
/*-moz-touch-callout:none;*/
/*-moz-user-select:none;*/
/*touch-callout:none;*/
/*user-select:none;*/
}
/* Before After */
a,
span,
strong,
:before,
:after {position:relative; background-repeat:no-repeat; transition:all .3s ease-out;}
/* Links */
a {color:#222; text-decoration:none;}
a,
a:before,
a:after {position:relative; transition:all .3s ease-in; will-change:transform;}
/* select area */
::selection {background-color:#ccc; color:#000; -webkit-text-stroke:none;}
::-moz-selection {background-color:#ccc; color:#000; -webkit-text-stroke:none;}

/* -----------------------------------------------
 = Font
----------------------------------------------- */
h1, h2, h3, h4, h5, h6,
strong, b {font-weight:400; font-style:normal;}
.bold {font-weight:500;}
.en {font-family:"Cormorant Garamond", serif; font-weight:400;}
.zen-old-mincho {font-family:zen-old-mincho, sans-serif;}

/* ------------------------------------------------
 = Loading
------------------------------------------------ */
.loading {z-index:10000; position:fixed; top:0; left:0;
	display:flex; justify-content:center; align-items:center;  width:100vw; height:100vh; background-color:#fff;}
.loading__logo {width:540px; max-width:86%; padding-bottom:2%; opacity:.4; transition:opacity .1s ease}
.loading__number {position:absolute; left:0; bottom:8%; width:100%; text-align:center; font-size:230%; letter-spacing:6px; color:#a4874e; transition:opacity .1s ease}



/* ------------------------------------------------
 = Structuer 
------------------------------------------------ */
.main {width:100%; padding-top:160px; background-color:#f8f5f1;}
.main.index {padding-top:0;}



/* -----------------------------------------------
 = Header 
----------------------------------------------- */
.header {z-index:9000; position:absolute; width:100%;}
.header.hide {opacity:0; pointer-events:none; transition:all .3s ease-in;}
.header.fixed {position:fixed;}
.header.index {position:fixed; transition:all .3s ease-in;}
.header__wrap {display:flex; justify-content:flex-end; width:1366px; margin:auto; padding-top:60px;}
.header__botton {z-index:1000; position:relative; display:inline-block; font-size:190%; letter-spacing:4px; color:#a4874e; text-transform:uppercase; opacity:1; cursor:pointer;}
.header__botton:before {content:""; position:absolute; bottom:5px; left:-2px; width:100%; height:1px; background-color:#a4874e;}
/*logo*/
.logo {z-index:10; position:relative; display:flex; width:1366px; height:0; margin:auto;}
[class*='logo__image'] {width:280px;}
.stay .logo {z-index:1;}

/* = Navigation
------------------------------------------------ */
.navigation {z-index:900; position:fixed; top:0; left:-100%; display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background-color:rgba(221, 221, 221, .95);
	opacity:0; filter:blur(5px); transition:opacity .2s ease-in, filter .2s ease-in;}
.navigation.active {filter:blur(0px); opacity:1; transition:opacity .4s ease, filter .5s ease;}
.navigation__wrap {width:700px;}
/*contents*/
.nav {}
.nav__list {margin-bottom:70px;}
.nav__item {position:relative; line-height:1; padding-bottom:45px; font-size:280%; letter-spacing:6px; text-transform:uppercase;}
.nav__link {position:relative; color:#a4874e;}
.nav__link:before,
.nav__link:after {content:""; position:absolute; height:1px; background-color:#a4874e;}
.nav__link:before {left:0; bottom:0; width:300px;}
.nav__link:after {left:291px; bottom:4px; width:10px; transform:rotate(45deg);}
.nav__instagram {padding:80px 0 40px; font-size:270%; letter-spacing:6px;}
.nav__instagram-link {position:relative; padding-left:20px; color:#a4874e;}
.nav__instagram-link:before {content:""; position:absolute; top:12px; left:0; width:9px; height:9px; background-color:#a4874e; border-radius:50%;}



/* -----------------------------------------------
 = Footer 
----------------------------------------------- */
body.stay {overflow:hidden;}
.footer {line-height:1; padding:140px 0 20px; background-color:#f8f5f1;}
.footer__wrap {position:relative; display:flex; justify-content:space-between; width:1366px; margin:auto;}
/*left*/
.footer__left {display:inline-block; width:344px;}
.footer__logo { width:340px; text-align:center; padding-bottom:55px;}
.footer__list {display:flex; justify-content:space-between;}
.footer__item {font-size:170%; letter-spacing:4px; text-transform:uppercase;}
.footer__link {color:#a4874e;}
.footer__link:hover {opacity:.5;}
/*right*/
.footer__right {display:inline-flex; justify-content:flex-end; align-items:flex-end;}
.footer__instagram {font-size:210%; letter-spacing:4px;}
.footer__instagram-link {position:relative; padding-left:20px; color:#a4874e;}
.footer__instagram-link:before {content:""; position:absolute; top:10px; left:0; width:7px; height:7px; background-color:#a4874e; border-radius:50%;}
.footer__instagram-link:hover {opacity:.5;}
/*end*/
.footer__sup {padding-top:90px; text-align:center; font-size:100%; letter-spacing:2px;}

/* ------------------------------------------------
 = Index
------------------------------------------------ */
.firstview {z-index:9010; position:relative; width:100%; height:100vh; background-image:url(/img/index_main.jpg?ver=241024); background-position:50% top; background-size:cover;}
.firstview__wrap {position:relative; width:1366px; margin:auto; padding-top:8%;}
.firstview__logo {max-width:540px; padding-bottom:90px; transition:opacity .8s ease-in, filter .5s ease-in;}
.firstview__text {line-height:2.2; font-size:150%; letter-spacing:6px; transition:opacity 1s ease-in, filter .5s ease-in;}
.firstview__logo.hide {opacity:0; filter:blur(6px);}
.firstview__text.hide {opacity:0; filter:blur(2px);}

/* = Text flow
----------------------------------------------- */
[class*='firstview__flow'] {z-index:2; position:absolute; left:0; bottom:-20px; width:100%;}
.firstview__flow--sp {display:none; bottom:-100px;}
.firstview__path {fill:#a1854d; transition:fill 1s ease-in-out;}
.firstview__svg--fix {position:absolute; top:0; left:0; opacity:1; transition:opacity 1s ease-in;}
.firstview__svg--fix.hide {opacity:0;}


/* ------------------------------------------------
 = Index
------------------------------------------------ */
.index__section {position:relative; background-color:#f8f5f1;}
.index__wrap {position:relative; width:1366px; margin:auto; padding:120px 0 100px 0;}
[class*='index__content'] {display:flex; justify-content:space-between; width:100%;}
[class*='index__flex'] {width:50%;}
[class*='index__paragraph'] {display:flex; justify-content:center; padding-top:70px;}
[class*='index__lead'],
[class*='index__text'] {writing-mode:vertical-rl; text-orientation:upright; line-height:2.4; white-space:nowrap;}
[class*='index__lead'] {font-size:160%; letter-spacing:-3px;}
[class*='index__text'] {font-size:130%; letter-spacing:-2px;}
.no-rotate {text-orientation:sideways; unicode-bidi:isolate;}
.punct-fixed,
.periode-fixed {display:inline-block; position:relative; top:.3em; right:7px;}
.punct-fixed::before,
.periode-fixed::before {content:"、"; position:absolute; top:-.5em; left:-.6em;}
.punct-fixed::before {content:"、";}
.periode-fixed::before {content:"。";}
/*01*/
.index__content--01 {padding-top:70px; flex-direction:row-reverse;}
.index__paragraph--01 {width:50%; padding-bottom:160px; flex-direction:row-reverse;}
.index__lead--01 {padding-left:45px;}
/*02*/
.index__content--02 {padding-top:70px;}
.index__paragraph--02,
.profile-href {width:calc(50% - 35px);}
.index__lead--02 {}
.index__text--02 {padding:210px 0 0 50px;}
/*profile link*/
.profile-href__more {padding-top:100px; text-align:right;}
.profile-href__link {display:inline-block; position:relative; line-height:1.5; padding:0 90px 0 0; font-size:340%; letter-spacing:6px; color:#a4874e;}
.profile-href__link:hover {opacity:.5;}
.profile-href__link::before,
.profile-href__link::after {content:""; position:absolute; height:1px; background-color:#a4874e;}
.profile-href__link::before {bottom:0; right:1px; width:100%;}
.profile-href__link::after {bottom:5px; right:0; width:14px; transform:rotate(45deg);}
/*fade in*/
[class*='index__text'],
[class*='index__lead'],
[class*='index__paragraph'] {opacity:1; filter:blur(0px); transition:opacity 1s ease-in, filter .5s ease-in;}
[class*='index__text'].hide,
[class*='index__lead'].hide,
[class*='index__paragraph'].hide {opacity:0; filter:blur(4px);}


/* = Slider
----------------------------------------------- */
.index__box {position:relative; width:50%;}
[class*='index__slide'] {position:absolute;}
.index__slide--01 {z-index:10; top:0; left:0; width:365px; height:380px;}
.index__slide--02 {z-index:9; top:150px; left:340px; width:265px; height:398px;}
/*slider*/
.slide {position:relative;}
.slide__image {z-index:1; position:absolute; top:0; left:0; opacity:0; width:100%; transition:opacity 1s ease-in;}
.slide__image.active {z-index:10; opacity:1;}
/*thumb*/
.thumb {z-index:20; position:absolute; bottom:0; left:0; width:100%; text-align:center;}
.thumb__number {z-index:10; position:relative; display:inline-block; width:12px; height:12px; margin-left:4px; border-radius:50%; cursor:pointer;}
.thumb__number.active {background-color:#ddd3be;}
.thumb__number:before,
.thumb__number:after {content:""; position:absolute; border-radius:50%;}
.thumb__number:before {z-index:10; top:4px; left:4px; width:4px; height:4px; background-color:#a4874e;}
.thumb__number:after {z-index:2; top:1px; left:1px; width:10px; height:10px; background-color:#f8f5f1;}
/*svg*/
[class*='thumb__svg'] {z-index:20; visibility:hidden; position:absolute; top:1px; left:1px; width:10px; height:10px; transform:scale(135%) rotate(-90deg);
	fill:none; stroke:#a4874e; stroke-width:1; stroke-dasharray:25 25; vertical-align:middle;}
.active > .thumb__svg {visibility:visible; animation:loader 3.4s infinite; animation-iteration-count:1;}
@keyframes loader {
	from {stroke-dashoffset:25;}
	to {stroke-dashoffset:0;}
}

/* = Concept
----------------------------------------------- */
.concept {width:100%; background-color:#f8f5f1;}
.concept__wrap {position:relative; width:1133px; margin:auto; padding:70px 0 150px 0;}
.concept__title {line-height:1; font-size:550%; letter-spacing:18px; color:#a4874e;}
.concept__caption {position:absolute; top:70px; right:80px; font-size:170%; letter-spacing:-2px;
	writing-mode:vertical-rl; text-orientation:upright; line-height:2.4;}
.concept__caption-line {border-right:1px solid #222;}
[class*='concept__text'] {text-align:center; font-size:120%;}
/* = Concept circle
----------------------------------------------- */
.concept__list {position:relative; width:100%; height:1060px;}
.concept__list::before {content:""; position:absolute; top:150px; left:calc(50% - 380px); width:760px; height:760px; border:2px dotted #a4874e; border-radius:50%;}
[class*='concept__circle'] {z-index:1; position:absolute; width:320px; height:320px; background-color:#dcd0ba; border-radius:50%;}
[class*='concept__circle']::before {z-index:3; content:""; position:absolute; top:1px; left:1px; width:calc(100% - 2px); height:calc(100% - 2px); background-color:#f8f5f1; border-radius:50%;}
.concept__circle--01 {top:0; left:calc(50% - 170px);}
.concept__circle--02 {top:255px; right:30px;}
.concept__circle--03 {top:650px; right:180px;}
.concept__circle--04 {top:650px; left:180px;}
.concept__circle--05 {top:255px; left:30px;}
/*text area*/
.concept__item {z-index:5; position:absolute; display:inline-flex; flex-direction:column; justify-content:center; text-align:center; width:100%;}
[class*='concept__number'] {padding-top:35px; font-size:300%; color:#a4874e;}
.concept__lead {padding-top:10px; font-size:180%; letter-spacing:2px; color:#a4874e;}
.concept__text--02 {padding-top:30px;}
.concept__text--03 {padding-top:30px;}
.concept__text--04 {padding-top:30px;}
.concept__number--03,
.concept__number--04 {padding-top:40px;}
.concept__text--last {line-height:2.2; font-size:130%; padding-bottom:130px;}
.concept__text--last .br {display:block;}
/*svg*/
[class*='concept__svg'] {z-index:20; 
/*visibility:hidden; */
position:absolute; top:12px; left:12px; width:296px; height:296px; transform:scale(135%) rotate(-90deg); opacity:0;
	fill:none; stroke:#a4874e; stroke-width:1; stroke-dasharray:800 800; vertical-align:middle;}
[class*='concept__circle'].active .concept__svg {visibility:visible; animation:loaderConcept 2.3s; animation-iteration-count:1; opacity:1;}
@keyframes loaderConcept {
	from {stroke-dashoffset:800;}
	to {stroke-dashoffset:0;}
}


/* = Instagram
----------------------------------------------- */
.instagram {overflow:hidden; position:relative; display:block; padding:70px 0 50px; border-top:1px solid #a4874e; border-bottom:1px solid #a4874e; text-align:center; background-color:#f3efe8;}
.instagram:hover {background-color:#e7e0d1;}
.instagram__bg {z-index:1; position:absolute; top:130px; width:100%; line-height:0; font-size:1100%; letter-spacing:20px; text-align:center; text-transform:uppercase; color:#efe9df;}
.instagram__text {z-index:10; position:relative; padding-bottom:40px; font-size:180%; letter-spacing:4px;}
.instagram__link {z-index:10; position:relative; display:inline-block; line-height:1; padding-right:28px; font-size:290%; letter-spacing:6px; color:#a4874e;}
.instagram__design {position:absolute; top:18px; right:0; width:25px; height:1px; background-color:#a4874e; transform:rotate(-45deg);}
.instagram__design::before,
.instagram__design::after {content:""; position:absolute; width:6px; height:1px; background-color:#a4874e;}
.instagram__design::before {top:-2px; right:-1px; transform:rotate(45deg)}
.instagram__design::after {top:2px; right:-1px; transform:rotate(-45deg)}



/* ------------------------------------------------
 = Page Common 
------------------------------------------------ */
.page {margin:auto; width:100%; background-color:#fff;}
[class*='page__section'] {position:relative; width:1366px; margin:auto;}
[class*='page__wrap'] {position:relative; width:1133px; margin:auto;}
.page__title {z-indx:100; position:absolute; top:-13px; left:0; display:inline-block; line-height:1; font-size:350%; letter-spacing:8px; color:#a4874e; text-transform:uppercase;}

/* = Post list
----------------------------------------------- */
.post-list {width:100%; background-color:#fff;}
[class*='post-list__wrap'] {position:relative; width:1366px; margin:auto; padding:120px 0 130px;}
.post-list__wrap--profile {border-top:1px solid #676363;}
.post-list__title {text-align:center; line-height:1; padding-bottom:60px; font-size:840%; letter-spacing:20px; color:#a4874e;}
/*more link*/
.post-list__more {padding-top:100px; text-align:right;}
.post-list__link {display:inline-block; position:relative; line-height:1.5; padding:0 90px 0 0; font-size:180%; letter-spacing:6px; color:#a4874e;}
.post-list__link:hover {opacity:.5;}
.post-list__link::before,
.post-list__link::after {content:""; position:absolute; height:1px; background-color:#a4874e;}
.post-list__link::before {bottom:0; right:1px; width:100%;}
.post-list__link::after {bottom:5px; right:0; width:14px; transform:rotate(45deg);}

/* = Contact banner
----------------------------------------------- */
.contact {display:block; padding:85px 0; text-align:center; background-color:#3e3a3a;}
.contact:hover {background-color:#595656;}
.contact__link {position:relative; display:inline-block; line-height:1; padding-right:45px; font-size:480%; letter-spacing:12px; color:#fff; text-transform:uppercase;}
.contact__design {position:absolute; top:23px; right:0; width:45px; height:1px; background-color:#fff; transform:rotate(-45deg);}
.contact__design::before,
.contact__design::after {content:""; position:absolute; width:6px; height:1px; background-color:#fff;}
.contact__design::before {top:-2px; right:-1px; transform:rotate(45deg)}
.contact__design::after {top:2px; right:-1px; transform:rotate(-45deg)}
.contact__text {padding-top:10px; font-size:150%; letter-spacing:3px; color:#fff;}


/* -----------------------------------------------
 = Profile
----------------------------------------------- */
.page__wrap--about {display:flex; justify-content:flex-start; padding:110px 0 100px 65px;}
[class*='about__flex'] {}
.about__flex--left {width:30%;}
.about__flex--right {width:50%;}
/*left*/
[class*='about__name'] {}
.about__name--jp {font-size:250%; letter-spacing:4px; padding-bottom:5px;}
.about__name--en {font-size:140%; letter-spacing:4px; padding-left:3px;}
/*right*/
.about__photo {max-width:420px; padding-bottom:80px;}
[class*='about__text'] {padding-bottom:40px; line-height:2.2; font-size:140%; letter-spacing:2px;}
.about__text--sign {padding-top:50px; line-height:1.85; font-size:160%;}


/* -----------------------------------------------
 = Works
----------------------------------------------- */
.page__section--works {padding:110px 0 90px 0;}
.works__list {display:flex; justify-content:flex-start;}
.works__item {width:calc(33.33% - 30px); margin-right:45px; padding-bottom:55px;}
.works__item:nth-of-type(3n) {margin-right:0;}
.works__image {display:block; width:100%; aspect-ratio:10/6; background-position:center; background-size:cover;}
.works__image:hover {opacity:.5;}
.works__title {padding-top:15px; font-size:170%; letter-spacing:3px;}
/*coming soon*/
.works__soon {display:block; width:100%; padding:20px 0 0 10px; text-align:center; font-size:260%; letter-spacing:8px; color:#a4874e;}


/* = Page navi
----------------------------------------------- */
.pagenavi {text-align:center; padding:80px 0 55px; font-size:130%;}
.pagenavi__block {position:relative; display:inline-block;}
.page-numbers {display:inline-block; padding:8px}
.page-numbers.current {color:#a4874e;}
.prev.page-numbers,
.next.page-numbers {position:absolute; top:-7px; width:40px; height:30px; border-bottom:1px solid #a4874e;}
.prev.page-numbers {left:-130px;}
.next.page-numbers {right:-130px;}
.prev.page-numbers:before,
.next.page-numbers:before {content:""; position:absolute; bottom:3px; width:10px; height:1px; background-color:#a4874e;}
.prev.page-numbers:before {left:0; transform:rotate(-45deg)}
.next.page-numbers:before {right:0; transform:rotate(45deg)}


/* -----------------------------------------------
 = Single
----------------------------------------------- */
.page__wrap--single {padding:110px 0 0 65px;}
/*head*/
.single__head {padding:60px 0 35px; border-bottom:1px solid #676363;}
.single__title {padding-bottom:35px; font-size:170%; letter-spacing:1px;}
/*content*/
.single__content {padding-top:70px;}
.single__content p {padding-bottom:40px; font-size:140%; letter-spacing:2px;}
.single__content p:has(img) {padding-bottom:55px; text-align:center;}
.single__content p:not(img) + p:has(img) {padding-top:15px;}
.single__content img {width:auto; max-width:540px; height:auto; max-height:450px;}
.single__content a {padding:0 3px; color:#a4874e; border-bottom:1px solid transparent;}
.single__content a:hover {border-color:#a4874e;}
/*ikosha link*/
.single__ikosha {padding:10px 0 100px; text-align:right; border-bottom:1px solid #676363;}
.single__ikosha-link {display:inline-block; position:relative; padding:0 90px 4px 0; font-size:180%; letter-spacing:8px; color:#a4874e;}
.single__ikosha-link:hover {opacity:.5;}
.single__ikosha-link::before,
.single__ikosha-link::after {content:""; position:absolute; height:1px; background-color:#a4874e;}
.single__ikosha-link::before {bottom:0; right:1px; width:100%;}
.single__ikosha-link::after {bottom:5px; right:0; width:14px; transform:rotate(45deg);}

/* = Single navi
----------------------------------------------- */
.single__control {text-align:center; padding:110px 0 190px; border-top:1px solid #bbb;}
.single__navigation {position:relative; display:inline-block;}
.single__back {font-size:170%; letter-spacing:4px; text-transform:uppercase;}
.single__back:hover {color:#a4874e;}
.single__prev,
.single__next {position:absolute; bottom:14px; width:40px; height:30px; border-bottom:1px solid #a4874e;}
.single__prev {left:-130px;}
.single__next {right:-130px;}
.single__prev:before,
.single__next:before {content:""; position:absolute; bottom:3px; width:10px; height:1px; background-color:#a4874e;}
.single__prev:before {left:0; transform:rotate(-45deg)}
.single__next:before {right:0; transform:rotate(45deg)}

