@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}: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;}
*:focus {outline:none;}
/*html {-webkit-font-smoothing:antialiased;}*/
html {-webkit-font-smoothing:subpixel-antialiased;}
body,
input,
textarea,
select {color:#222;
font-family:yu-gothic-pr6n, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-size:62.5%; font-weight:500; line-height:1.8; letter-spacing:2px;}
/* Headings */
h1, h2, h3, h4, h5, h6 {clear:both; font-weight:500;}
/* Text elements */
p {}
ul, ol {list-style-type:none;}
dl {}
dt {}
dd {}
strong, b {font-weight:500;}
cite, em, i {font-style:normal;}
blockquote {font-style:italic;}
pre {overflow:auto; padding:0.75em 1.625em; background:#f4f4f4;}
code, kbd, samp, var {}
abbr, acronym, dfn {}
address {}
ins {text-decoration:none;}
sup {vertical-align:super;}
sub {}
small {}
/* Table */
table {border-collapse:collapse;}
/* image */
img {max-width:100%; height:auto;
pointer-events:none; 
-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; transition:all .2s ease-out;}
/* Links */
a {color:#222; font-weight:300; text-decoration:none;}
a,
a:before,
a:after {position:relative; will-change:transform;}
a:hover {color:#222;}
/* hover */
a:hover {
cursor:url("/img/icon_cursor.cur"), pointer;
cursor:-webkit-image-set(url('/img/cursor.png') 1x, url('/img/cursor@2x.png') 2x), pointer;
}
/* fontfamily */
.jp {font-family:yu-gothic-pr6n, sans-serif; font-weight:400; font-style:normal;}
.en {font-family:itc-avant-garde-gothic-pro, sans-serif; font-weight:300; font-style:normal;}
/* clearfix */
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
* html .clearfix {zoom:1}
*:first-child+html .clearfix{zoom:1}
/* select area */
::selection {background-color:#eccbcd; color:#222;}
::-moz-selection {background-color:#eccbcd; color:#222;}

/* -----------------------------------------------
 = Structure
----------------------------------------------- */
body {opacity:0; transition:opacity .7s ease-in; transition-delay:.2s;}
body.show {opacity:1;}
.site-wrapper {display:flex; flex-direction:column; min-height:100vh;}
.main {flex:1; overflow-x:hidden;}
.article {padding:50px 0;}

/* -----------------------------------------------
 = Header PC
----------------------------------------------- */
.header {display:flex; justify-content:space-between; overflow:hidden; width:80%; height:120px; margin:auto;}
.header__title {display:inline-block; line-height:110px; font-size:150%; letter-spacing:5px;}
.header__nav {display:flex;}
[class^="header__item"] {overflow:hidden; position:relative; display:inline-block; margin-right:15px; font-size:140%;}
[class^="header__link"] {position:relative; margin:0 4px 0 3px; padding:0 0 0 4px; line-height:114px; letter-spacing:4px;}
.header__link:before {content:""; position:absolute; right:0; bottom:-1px; width:0px; height:1px; background-color:#222; transition:all .3s ease-in-out;}
.header__link:hover:before {width:100%; right:auto; left:0;}
li.active .header__link:before {width:100%;}
.header__item {}
.header__item--contact {margin-right:28px;}
.header__item--image {margin-right:7px; padding-left:5px; transform:translateY(5px);}
.header__item--image:last-of-type {margin-right:0; padding-left:0;}
.header__link--image {padding:0; transition:all .2s ease-out;}
.header__link--image:hover {opacity:.5;}
.header__item--text {margin-right:6px}
/*index*/
.header.index {height:90px;}

/* -----------------------------------------------
 = Header Mobile
----------------------------------------------- */
.header__toggle {display:none; position:fixed; z-index:11000; top:30px; right:24px; width:46px; height:50px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.header__toggle::selection {background:none;}
.header__toggle div {position:relative;}
.header__toggle span {display:block; position:absolute; left:0; height:1px; width:100%; background-color:#333; transition:.3s ease-in-out;}
.header__toggle span:nth-of-type(1) {top:20px;}
.header__toggle span:nth-of-type(2) {top:30px;}
/*Toggle / open*/
.header__toggle.active span {top:25px;}
.header__toggle.active span:nth-of-type(1) {transform:rotate(390deg);}
.header__toggle.active span:nth-of-type(2) {transform:rotate(-390deg);}
/*hide area*/
.site-wrapper.active {position:fixed; left:0; right:0;}
/*nav area*/
.spnav {display:none; z-index:-1; overflow:hidden; position:fixed; top:0; bottom:0; right:-150px; width:280px; height:100%; background-color:rgba(255,255,255,.95); opacity:0; transition:all .4s ease-out;}
.spnav.active {right:0; opacity:1;}
.spnav__content {overflow-y:auto; height:100%; padding:120px 15px 50px 30px;}
.spnav__list {}
[class^="spnav__item"] {padding-left:40px; padding-bottom:18px; font-size:140%; opacity:0; transition:none;}
/*active ani*/
.active [class^="spnav__item"] {padding-left:0; opacity:1; transition:all .2s ease-out;}
[class^="spnav__item"] a {display:inline-block;}
[class^="spnav__item"].active > a {border-bottom:1px solid #333;}
[class^="spnav__item"]:nth-of-type(1) {transition-delay:.2s;}
[class^="spnav__item"]:nth-of-type(2) {transition-delay:.25s;}
[class^="spnav__item"]:nth-of-type(3) {transition-delay:.30s;}
[class^="spnav__item"]:nth-of-type(4) {transition-delay:.35s;}
[class^="spnav__item"]:nth-of-type(5) {transition-delay:.40s;}
[class^="spnav__item"]:nth-of-type(6) {transition-delay:.45s;}
/*nav portfolio*/
.spnav__more {display:block;}
.spnav__more:before,
.spnav__more:after {content:''; position:absolute; top:14px; width:11px; height:1px; background-color:#333;}
.spnav__more:before {left:99px; transform:rotate(-45deg);}
.spnav__more:after {left:92px; transform:rotate(45deg);}
.spnav__more.active:before,
.spnav__more.active:after {top:15px;}
.spnav__more.active:before {left:99px; transform:rotate(45deg);}
.spnav__more.active:after {left:92px; transform:rotate(-45deg);}
.spnav__item--portfolio span.active:after {top:14px;}
.spnav__sublist {display:none; margin:5px 0 7px 1.1em;}
.spnav__submenu {position:relative; padding:18px 0 0 .7em; letter-spacing:1px;}
.spnav__submenu.active:before {content:''; position:absolute; top:30px; left:0; width:6px; height:6px; background-color:#333; border-radius:50%;}
/*past works*/
.spnav__item--past {padding-top:10px; padding-bottom:0;}
/*sns nav*/
.spnav__item--sns {display:flex; padding-top:15px;}
.spnav__item--sns a {display:inline-block; width:20px; margin-right:15px;}
.spnav__item--sns a:nth-of-type(2) {transform:translateX(10px); opacity:.5}
.active .spnav__item--sns a:nth-of-type(2) {transform:translateX(0); opacity:1; transition:all .2s linear; transition-delay:.5s;}

/* -----------------------------------------------
 = Footer
----------------------------------------------- */
.footer {padding:100px 0 15px; text-align:center;}
.footer__text {font-size:110%; letter-spacing:2px;}
/*go top*/
.gotop {display:none; position:fixed; bottom:30px; right:calc(5% - 20px); width:40px; height:65px;}
.gotop:hover {cursor:url("/img/icon_cursor.cur"), pointer; cursor:-webkit-image-set(url('/img/cursor.png') 1x, url('/img/cursor@2x.png') 2x), pointer;}
.gotop:before,
.gotop:after {content:''; position:absolute; width:1px; background-color:#333;}
.gotop:before {top:5px; left:20px; height:60px;}
.gotop:after {top:3px; left:25px; height:15px; transform:rotate(-50deg);}
.gotop:hover:before,
.gotop:hover:after {background-color:#333; transition:all .4s ease-out;}
.gotop:hover:before {top:-5px; left:20px; height:60px;}
.gotop:hover:after {top:-7px; left:25px; height:15px; transform:rotate(-50deg);}

/* -----------------------------------------------
 = Index
----------------------------------------------- */
/*photo*/
.article.index {padding:0;}
[class^='index__photo'] {position:relative; width:100%; margin-bottom:10px; background-repeat:no-repeat; background-size:cover; background-position:center;  transition:all .2s ease-in;}
[class^='index__photo']:nth-of-type(1) {margin-bottom:10px;}
[class^='index__photo']:last-of-type {margin-bottom:0;}
/*botton*/
.index__botton {position:absolute; bottom:50px; right:calc(10% - 45px); text-align:center; width:270px; padding:14px 20px 12px 10px; border:1px solid #333; background-color:#fff; transition:all .4s ease-in;}
.index__botton:hover {background-color:#e6e6e6;}
.index__botton span {position:relative; padding-right:13px; font-size:140%; letter-spacing:3px; text-transform:lowercase;}
.index__botton span.short {letter-spacing:3px;}
.index__botton span.veryshort {letter-spacing:2px;}
.index__botton:before,
.index__botton:after {content:''; position:absolute; height:1px; background-color:#333;}
.index__botton:before {bottom:19px; right:18px; width:25px;}
.index__botton:after {bottom:25px; right:16px; width:15px; transform:rotate(50deg);}
/*more botton*/
.index__more {position:relative; text-align:center; padding:80px 0 50px;}
.index__more a {position:relative; display:inline-block; padding:12px 45px 15px; border:1px solid #333; border-top:none; transition:all .4s ease-in;}
.index__more a:hover {background-color:#e6e6e6;}
.index__more a span {position:relative; padding-right:25px; font-size:140%; letter-spacing:4px;}
.index__more a:before,
.index__more a:after {content:''; position:absolute; height:1px; background-color:#333;}
.index__more a:before {bottom:23px; right:25px; width:30px;}
.index__more a:after {bottom:28px; right:21px; width:15px; transform:rotate(50deg);}

/* -----------------------------------------------
 = About
----------------------------------------------- */
.about {}
.about__content {width:660px; margin:auto;}
/* .about__image {width:600px; margin:auto;} */
.about__title {text-align:center;}
.about__title strong {display:block; padding:0 0 20px; font-size:160%; letter-spacing:6px;}
.about__title span {font-size:160%; font-weight:700;}
.about__caption {padding:25px 0 20px; text-align:center; font-size:140%; letter-spacing:3px;}
.about__lead {padding-top:100px; font-size:140%;}
.about__lead:nth-of-type(2) {padding-top:50px;}
[class^='about__text'] {padding-top:50px; font-size:140%;}
.about__text.en {font-size:120%; word-break:break-all; text-align:justify;}
.about__text--under-title {padding-top:0;}
.about__text--under-title .etc {display:block; text-align:right;}
.history__space {padding-right:10px;}

/* -----------------------------------------------
 = News
----------------------------------------------- */
.news__content {position:relative; width:880px; margin:auto; padding:80px 115px;}
.news__content:nth-of-type(1) {padding-top:0;}
.news__content:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:radial-gradient(circle farthest-side, #222, #222 20%, transparent 20%, transparent); background-size:5px 2px;}
.news__title {position:relative; font-size:170%;}
.news__title:before {content:''; position:absolute; top:11px; left:-1em; width:6px; height:6px; background-color:#333; border-radius:50%;}
.news__date {padding-top:5px; font-size:120%; letter-spacing:3px;}
/*the content*/
.news__text {padding-top:50px; font-size:140%;}
.news__text p {margin-bottom:1.5em;}
.news__text strong {font-weight:700;}
.news__text a {position:relative; font-size:85.71%;}
.news__text a:before {content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background-color:#444; transition:all .4s ease-in-out;}
.news__text a:hover:before {width:0%; left:auto; right:0;}
.news__image {text-align:center; line-height:1;}
.news__image img {width:600px;}
/*nav*/
.news__nav {padding-top:120px; text-align:center;}
.news__nav ul {display:inline-block; position:relative; margin:auto;}
.news__nav li {float:left; padding:0 10px; font-size:140%; font-family:itc-avant-garde-gothic-pro, sans-serif; font-weight:300; font-style:normal;}
[class^="news__botton"] {position:relative; line-height:1; letter-spacing:4px;}
.news__botton--next {margin-right:calc(4.2em + 4px); padding-left:70px;}
.news__botton--prev {margin-left:4.2em; padding-right:70px;}
[class^="news__botton"]:before,
[class^="news__botton"]:after {content:''; position:absolute; height:1px; background-color:#333;}
[class^="news__botton"]:hover:before,
[class^="news__botton"]:hover:after {transition:all .3s linear;}
[class^="news__botton"]:before {bottom:3px;}
[class^="news__botton"]:after {bottom:8px;}
.news__botton--next:before {left:0px; width:50px;}
.news__botton--next:after {left:-4px; width:15px; transform:rotate(-50deg);}
.news__botton--prev:before {right:0px; width:50px;}
.news__botton--prev:after {right:-4px; width:15px; transform:rotate(50deg);}
.news__botton--next:hover:before {left:-10px;}
.news__botton--next:hover:after {left:-14px;}
.news__botton--prev:hover:before {right:-10px;}
.news__botton--prev:hover:after {right:-14px;}
.news__botton--next.none:hover:before {left:0px;}
.news__botton--next.none:hover:after {left:-4px;}
.news__botton--prev.none:hover:before {right:-0px;}
.news__botton--prev.none:hover:after {right:-4px;}
.page-numbers {display:block;}
.page-numbers:before {content:''; position:absolute; top:-3px; left:calc(50% - 4px); width:6px; height:6px; background-color:transparent; border-radius:50%;}
.page-numbers.current:before,
.page-numbers:hover:before {top:-8px; background-color:#333;}
.page-numbers.next:hover:before,
.page-numbers.prev:hover:before {background-color:transparent;}
.page-numbers.none {opacity:.2; color:#000;}
.page-numbers.none:before {display:none;}
.news__link {position:relative;}
.news__link:before {content:""; position:absolute; right:0; bottom:-2px; width:0px; height:1px; background-color:#222; transition:all .3s ease-in-out;}
[class^="news__botton"]:hover .news__link:before {width:100%; right:auto; left:0;}

/* -----------------------------------------------
 = Portfolio Common
----------------------------------------------- */
.portfolio__nav {width:80%; padding-bottom:80px; margin:auto; text-align:center;}
.portfolio__nav ul {display:inline-block; max-width:980px;}
.portfolio__nav li {display:inline-block; padding:0 10px 25px;}
.portfolio__nav a {position:relative; padding-left:3px; font-size:130%; letter-spacing:3px;}
.portfolio__nav a:before {content:""; position:absolute; right:0; bottom:-1px; width:0px; height:1px; background-color:#222; transition:all .4s ease-in-out;}
.portfolio__nav a:hover:before {width:100%; right:auto; left:0;}
.portfolio__nav .active a:after {content:''; position:absolute; top:-3px; left:-5px; width:6px; height:6px; background-color:#333; border-radius:50%;}

/* -----------------------------------------------
 = Portfolio list
----------------------------------------------- */
[class^='portfolio__list'] {display:flex; flex-wrap:wrap; width:80%; max-width:1200px; margin:auto;}
.portfolio__item {overflow:hidden; display:block; width:31%; margin-right:3.5%; margin-bottom:35px; border:1px solid transparent; transition:all .4s ease-in;}
.portfolio__item:nth-of-type(3n) {margin-right:0;}
.portfolio__item:hover {border-color:#333;}
.portfolio__thumbnail {background-position:50%; background-repeat:no-repeat; opacity:0; transition:all 1s ease-in;}
.portfolio__thumbnail {background-size:cover;}
.portfolio__thumbnail.active {opacity:1; transition:opacity .5s ease-in, transform .3s ease-in;}
.portfolio__item:hover .portfolio__thumbnail {transform:scale(1.01)}

/* -----------------------------------------------
 = Portfolio single
----------------------------------------------- */
.portfolio__content {position:relative; width:80%; max-width:1200px; margin:auto; padding:50px 0 120px;}
.portfolio__content:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:radial-gradient(circle farthest-side, #222, #222 20%, transparent 20%, transparent); background-size:5px 2px;}
.portfolio__photo {text-align:center;}
.portfolio__photo img {width:100%; height:auto; padding-bottom:80px;}
.portfolio__title {text-align:center; font-size:150%; letter-spacing:5px;}
.portfolio__lead {text-align:center; padding:55px 30px 0;}
.portfolio__lead p {padding-bottom:1.2em;; font-size:140%;}
.portfolio__lead strong {font-weight:700;}
.portfolio__lead a {position:relative; font-size:85.71%;}
.portfolio__lead a:before {content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background-color:#444; transition:all .4s ease-in-out;}
.portfolio__lead a:hover:before {width:0%; left:auto; right:0;}
.portfolio__detail {width:75%; margin:auto;}
.portfolio__detail div:nth-of-type(1) {padding-top:150px;}
.portfolio__detail img {width:100%; height:auto; margin-bottom:30px;}
.portfolio__detail img.lazyloaded {opacity:1;}
/*cancel*/
.portfolio__cancel {position:absolute; top:0; right:0; display:block; width:30px; height:30px;}
/*background-color:#f00;}*/
.portfolio__cancel:before,
.portfolio__cancel:after {content:''; position:absolute; top:0px; width:1px; height:30px; background-color:#333;}
.portfolio__cancel:before {left:15px; transform:rotate(-45deg);}
.portfolio__cancel:after {right:15px; transform:rotate(45deg);}
.portfolio__cancel:hover:before {left:15px; transform:rotate(-225deg);}
.portfolio__cancel:hover:after {right:15px; transform:rotate(225deg);}
/*related*/
.related {position:relative; text-align:center; width:80%; max-width:1200px; margin:auto; padding-top:60px;}
.related__title {padding-bottom:40px; font-size:150%; letter-spacing:3px;}
[class^='related__list'] {display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; margin:auto;}
[class^='related__item'] {overflow:hidden; display:block; width:31%; margin-bottom:30px; border:1px solid transparent; transition:all .4s ease-in;}
[class^='related__item']:hover {border-color:#333;}
[class^='related__thumbnail'] {background-position:50%; background-repeat:no-repeat; transition:all .3s ease-in;}
.related__thumbnail {background-size:cover;}
.related__item:hover .related__thumbnail {transform:scale(1.01)}
.related__list--single {width:31%}
.related__list--double {width:66%}
.related__item--single {width:100%;}
.related__item--double {width:48%;}
/*more botton*/
.related__more {position:relative; text-align:center; padding:70px 0;}
.related__more:after {content:''; position:absolute; left:10%; bottom:0; width:80%; height:2px; background:radial-gradient(circle farthest-side, #222, #222 20%, transparent 20%, transparent); background-size:5px 2px;}
.related__botton {display:inline-block; padding:12px 45px 15px; border:1px solid #333; border-top:none; transition:all .5s ease-in;}
.related__botton span {position:relative; padding-right:45px; font-size:140%; letter-spacing:4px;}
.related__botton span:before,
.related__botton span:after {content:''; position:absolute; height:1px; background-color:#333;}
.related__botton span:before {bottom:2px; right:0px; width:30px;}
.related__botton span:after {bottom:7px; right:-4px; width:15px; transform:rotate(50deg);}
.related__botton:hover {background-color:#e6e6e6;}


/* -----------------------------------------------
 = 404
----------------------------------------------- */
.notfound {width:100%; padding-top:10%; text-align:center; font-size:140%; letter-spacing:3px;}