@charset "utf-8";

#wrapper {padding-top: 80px;}

body.photo #contents,
body.design #contents {padding-left: 280px; z-index: 10;}

/* header */
#siteHeader {background: #fff; height: 80px;z-index: 10;}
.menuopen #siteHeader {}
#siteHeader::after{content: ''; width: 280px; height: 81px; background: #fff; position: absolute; left: 0; top: 0; z-index: 0;}

body.photo #siteHeader::before,
body.design #siteHeader::before{content: ''; width: 1px; height: 360px; background: #e3e3e3; position: absolute; left: 279px; top: 0; z-index: 1;}
#siteHeader #logo {z-index: 10; left: 88px;}
#siteHeader #logo a {background: url(/img/logo.png) left top no-repeat; background-size:104px auto; width: 104px;}
#siteHeader #logo img {opacity: 0;}

/* visual */
#visual {height: 280px; padding: 0; position: relative; z-index: 0; min-width: 840px;}
body.photo #visual,
body.design #visual {padding-left: 280px;}
#visual h2 {background: url(/img/photography/kv.jpg) center center no-repeat; background-size: cover; height: 280px;}
#visual h2 em {font-style: normal; font-size: 15px; line-height: 32px; text-align: center; width: 280px; height: 190px; position: absolute; left: 0; top: 0; z-index: 20; display: flex; align-content: center; align-items: center; justify-content: center; font-weight: bold; letter-spacing: 0.05em; color: #111;}
#visual h2 i {font-style: normal; width: 100%; height: 280px; line-height: 280px; color: #fff; font-size: 32px; text-align: center; display: block; font-family: 'Montserrat'; font-weight: bold; letter-spacing: 0.15em;}

/* left pcnav */
#pcnav {position: absolute; left: 0px; top: 0; width:280px; background: #fff; height: 100%; z-index: 100; border-right: 1px solid #e3e3e3;}
#pcnav .category {font-size: 14px; line-height: 1; display: flex;justify-content: center; align-content: center; align-items: center; position: absolute; left: 0; top: -90px; z-index: 10; width: 280px;}
#pcnav .category li {padding: 0 0.75em;}
#pcnav .category li + li {position: relative;}
#pcnav .category li + li::before {content: '/'; position: absolute; left: -0.15em; top: 0; color: #111;}
#pcnav .category li:nth-child(2) a{color: #999;}
#pcnav .category a{text-decoration: none; letter-spacing: 0.05em; font-weight: bold;}
#pcnav .category a:hover{text-decoration: underline;}
#pcnav .category a.active{color: #777;}
#pcnav h2 {font-size: 18px; line-height: 1; color: #111; font-family: 'Montserrat'; letter-spacing: 0.1em; margin:5px 0 26px; text-align: center; font-weight: bold; display: none;}
#pcnav h2 + ul {border-top:1px dotted #ccc; width: 238px; margin: 0 auto; display: none;}
#pcnav h2 + ul li {height: 50px; text-align: left; display: flex; align-content: center; align-items: center; justify-content: left; margin: 0 auto; border-bottom: 1px dotted #ccc; transition: background 0.3s; cursor: pointer;}
#pcnav h2 + ul li a{color: #111; font-size: 14px; line-height: 1.4; text-decoration: none; padding: 0 0 0 15px; display: block; background: url(/img/arr-black.png) left center no-repeat; font-weight: bold; transition:color 0.2s;}
#pcnav h2 + ul li:hover {background-color: rgba(0,0,0,0.05);}
#pcnav h2 + ul li a.active{color: #777 !important;}
body.works #pcnav h2 + ul li a[href*='works.html'] {color: #777 !important;}

#pcnav h2 + ul li:last-child{border: none;}

/* photography */
body.photo #siteHeader::after{background: #111;}
body.photo #siteHeader #logo a {background: url(/img/logo-white.png) left top no-repeat; background-size:104px auto;}
body.photo #siteHeader::before {display: none;}
body.photo #visual::after{content: ''; width: 280px; height: 280px; background: #111; position: absolute; left: 0; top: 0; z-index: 0;}
body.photo #visual h2 em{color: #fff;}
body.photo #pcnav .category li + li::before{color: #fff;}
body.photo #pcnav .category li:nth-child(2) a{color: #fff;}
body.photo #pcnav .category li:nth-child(1) a{color: #555;}
body.photo #pcnav .category a {color: #fff;}
body.photo #pcnav h2[data-layout='photo'],
body.photo #pcnav h2[data-layout='photo'] + ul{display: block;}
body.photo #pcnav h2 {color: #fff;}
body.photo #pcnav h2 + ul li a{color: #fff; background-image: url(/img/arr-white.png);}
body.photo #pcnav h2 + ul li:hover {background-color: rgba(255,255,255,0.3);}
body.photo #pcnav {background: #111; border-right: none;}

/* main */
main {color: #333; overflow: hidden; border-bottom: 1px solid #e3e3e3;}
main section {padding: 65px 0; clear: both; zoom:1;}
main section::after{content: ''; background: #e3e3e3; width: 300%; height: 1px; position: absolute; left: 50%; top: 0; margin-left: -150%; z-index: -1;}
main .wrap {width: 792px; text-align: left; position: relative; margin-bottom: 72px;}
main section .wrap {margin: 0 auto;}
main h1 {font-size: 32px; line-height: 1; font-weight: bold; letter-spacing: 0.1em; padding: 59px 0 42px 0; color: #111;}
main p.lead {font-size: 18px; line-height: 32px; text-align: center; color: #333; letter-spacing: 0.05em; position: relative; margin-bottom: 58px; font-weight: bold;}
main h1 + .lead {margin-top: 40px;}
main h1 + .lead::after {content: ''; width: 120px; background: #ccc; height: 1px; position: absolute; left: 50%; top: -41px; margin-left: -60px;}
main h2 {font-size: 18px; line-height: 32px; font-weight: bold; letter-spacing: 0.05em; margin: -8px 0 0;}
main ul.note li,
main p.note {font-size: 14px; line-height: 25px;}
main p,main li,main dl{font-size: 16px; line-height: 32px; letter-spacing: 0.05em; margin: -8px 0 0;}
main ul.note li {text-indent: -1em; padding-left: 1em;}
main ul.note li:nth-child(n+2) {margin-top: 0;}
main a{color: #16aab2;}
main a:hover{text-decoration: none;color: #16aab2;}
main .half .item {width: 380px; float: left;}
main .half .item:nth-child(even) {float: right;}
main .half .item:nth-child(odd) {clear: both;}
main .half .item:nth-child(n+3) {margin-top: 22px;}
main .half .item img {width: 100%; height: auto; max-width: 380px; height: auto;}
main dl.price dt {float: left; position: relative; width: 65px;}
main dl.price dt::after{content: ':'; position: absolute; right: 0.5em; top: 0;}
main dl.price dd {zoom:1; overflow: hidden;}
main div.plan {border-top: 1px solid #fff;}
main div.plan figure img {width: 380px; height: auto;}
main div.plan img {float: left; margin-right: 32px;}
main div.plan ul {display: table; width: 380px; border-top: 1px solid #000; border-bottom: 1px solid #000; margin: 22px 0 0; zoom:1; overflow: hidden;}
main div.plan ul li {text-align: left; font-family: 'Montserrat'; font-weight: bold; display: table-cell; line-height: 50px;}
main div.plan ul li img {float: none; vertical-align: middle; margin-right: 10px;}
main div.plan.even img {float: right; margin: 0 0 0 32px;}
main div.plan.even ul li img {float:none; margin: 0 10px 0 0;}
main div.plan h2 {zoom: 1; overflow: hidden; margin: 0 0 -8px; position: relative; top: -8px;}
main .counter {background: #eee; display: flex; height: 307px; align-content:center; align-items: stretch; justify-content: center; margin: 0 0 40px;}
main .counter dl {height: 100%; position: relative; width: 33%; text-align: center; line-height: 1;}
main .counter dl dt {font-size: 16px; font-weight: bold; position: absolute; left: 0; bottom: 47px; width: 100%;}
main .counter dl dd {font-size: 72px; font-weight: 600; font-family: 'Montserrat'; padding: 58px 0 0; transition: opacity 0.3s; opacity: 0;}
main .counter dl.fadein dd {opacity: 1;}
main .counter dl::after{content: ''; background-position: center top; background-image: url(/img/company/icon.png); background-repeat: no-repeat; height: 60px; width: 60px; position: absolute; left: 50%; top: 150px; margin: 0 0 0 -30px;}
main .counter dl:nth-child(2)::after {background-position: center -60px;}
main .counter dl:nth-child(3)::after {background-position: center -120px;}
main table {color: #111; font-size: 16px; line-height: 24px; text-align: center; border: 1px solid #ccc; width: 100%;}
main table th {background: #eee; width: 246px; text-align: center; font-weight: bold; vertical-align: top; padding: 11px 20px 0; border-bottom: 1px dotted #ccc;}
main table td {text-align: left; padding: 11px 20px 10px; border-left:1px solid #ccc; border-bottom: 1px dotted #ccc;}
main table td ol {padding-left: 22px;}
main table td ul li {position: relative; padding-left: 1em;}
main table td ul li::after{content: '・'; position: absolute; left: 0; top: 0;}
main table td p{margin-bottom:16px;}


/* 後続 */
main figure + h2 {margin: 24px 0 0;}
main h2 + p,main h2 + dl {margin:15px 0 0;}
main h2 + table{margin-top: 34px;}
main p + dl.price {margin-top: 33px;}
main p + p{margin-top:36px;}
main p + p span {margin-top:24px; font-size:85%;}
main p + table {margin-top:36px;}
main table td ol + p{margin-top:16px;}



/* design */
body.design #pcnav h2[data-layout='design'],
body.design #pcnav h2[data-layout='design'] + ul{display: block;}
body.design #visual h2 {background-image: url(/img/design/kv.jpg);}

/* company */
body.company #visual h2 {background-image: url(/img/company/kv.jpg);}

/* recruit */
body.recruit #visual h2 {background-image: url(/img/recruit/kv.jpg);}
body.recruit main p.en {font-size: 32px; line-height: 1; font-weight: bold; letter-spacing: 0.1em; padding: 0 0 42px 0; color: #111; text-align: center;}
body.recruit main p.en + h2 {text-align: center; position: relative; margin-top: 40px;}
body.recruit main p.en + h2::after {content: ''; width: 120px; background: #ccc; height: 1px; position: absolute; left: 50%; top: -41px; margin-left: -60px;}
body.recruit main h3 {font-size: 18px; line-height: 32px; font-weight: bold; letter-spacing: 0.05em; margin: 23px 0 22px;}
body.recruit main p.btn {text-align: center; margin: 64px 0 0;}
body.recruit main {border-bottom: none;}


/* service link */
.service {border-bottom: 1px solid #fff; background: #f3f3f3;}
.service::before{content: ''; background: #fff; width: 300%; height: 1px; position: absolute; left: 50%; top: 1px; margin-left: -150%; z-index: 0;}
.service img {float: left;}
.service h2 {padding: 20px 0 0 30px; zoom:1; overflow: hidden; margin-bottom: -5px;}
.service p {padding: 0 0 0 30px; zoom:1; overflow: hidden;}
.service p + p {margin-top: 7px;}
.service p + p.btn {margin-top: 17px;}
.service p.btn {position: absolute; left:436px; bottom: 0; padding: 0;}
.service p.btn a{color: #fff; text-align: center; background: #16aab2;}
.service p.btn a:hover{text-decoration: none; background: #111;}

@media screen and (min-width:641px) and (max-width:1100px){
body.photo #contents,
body.design #contents {padding-left: 0px; z-index: 10;}
#pcnav {height: 0px;}
#pcnav h2,
#pcnav nav{display: none;}
#visual {border-bottom: 1px solid #e3e3e3;}

}

@media screen and (max-width:640px){
#wrapper {padding-top: 0;}

body.photo #contents,
body.design #contents {padding-left: 0; z-index: 10;}

#siteHeader {background: #fff; height: 16vw;}
#siteHeader::after,
#siteHeader::before{display: none;}

/* siteHeader */
#siteHeader {height: 16vw; width:100%; z-index: 100; background: #fff; min-width: inherit; position: static;}
#siteHeader #logo {width: 17.333333vw; height: 3.6vw; left: 50%; top: 6.266667vw; margin-left: -8.666667vw;}
#siteHeader #logo a,
body.photo #siteHeader #logo a{background: url(/img/logo.png) center top no-repeat; background-size: 100% auto; width: 17.333333vw; height: 3.6vw;}
#siteHeader #logo img {display: none;}

/* visual */
#visual {height: 48vw; padding: 0; min-width: inherit;}
#visual::after{display: none;}
body.photo #visual,
body.design #visual {padding-left: 0;}
#visual h2 {background: url(/img/photography/kv-sp.jpg) center center no-repeat; height: 48vw; background-size: cover;}
#visual h2 em {display: none;}
#visual h2 i {font-size: 6.4vw; height: 48vw; line-height: 48vw;}

/* main */
main {border-bottom:none;}
main section {padding: 8vw 0;}
main section::after{content: ''; background: #e3e3e3; width: 300%; height: 1px; position: absolute; left: 50%; top: 0; margin-left: -150%; z-index: -1;}
main .wrap {width: 100%; text-align: left; padding: 0 6.25vw; margin-bottom: 16vw;}
main section .wrap {padding: 0 6.25vw; margin-bottom: 0;}
main h1 {font-size: 6.4vw; padding: 15.2vw 0 8vw;}
main p.lead {font-size: 3.733333vw; line-height: 6.666667vw; margin-bottom: 6.8vw;}

main section .wrap figure {margin: 0 -6.25vw;}
main h1 + .lead {margin-top: 8vw;}
main h1 + .lead::after {content: ''; width: 46.666667vw; top: -6.8vw; margin-left: -23.333333vw;}

main h2 {font-size: 4.375vw; line-height: 7.8125vw; margin: -1.25vw 0 0;}
main p,
main dl{font-size: 4.375vw; line-height: 7.8125vw; margin: -1.25vw 0 0;}
main .half .item {width: 100%; float: none;}
main .half .item:nth-child(even) {float: none;}
main .half .item:nth-child(n+2),
main .half .item:nth-child(n+3){margin-top: 6.2vw;}
main .half .item img {width: 100%; height: auto; max-width: inherit;}
main div.plan img {float:none; margin-right: 0; width: 100%; height: auto;}
main div.plan ul {display: table; width: 100%; margin: 4.2vw 0 0;}
main div.plan ul li {line-height:13.333333vw; font-size: 3.75vw;}
#contents main div.plan ul li img {float: none; margin-right: 2vw; width: 5.333333vw;}
main div.plan.even img {float: none; margin: 0;}
main div.plan.even ul li img {float:none; margin: 0 2vw 0 0;}
main div.plan h2 {margin: 6.4vw 0 0; position: relative; top: 0;}
main ul.note li,
main p.note {font-size: 3.75vw; line-height: 5.9125vw;}
main ul.note li {text-indent: -1em; padding-left: 1em;}
main ul.note li:nth-child(n+2) {margin-top: 0;}
main .counter {display:block; height:auto; margin: 0 0 8vw;}
main .counter dl {width: 100%; height: 50vw; margin: 0; padding: 4vw 0; position: relative;}
main .counter dl + dl::before{content: ''; width: 100%; background: #fff; position: absolute; left: 0; top: 0; margin: 0; height: 2px;}
main .counter dl dt {font-size: 4.266667vw; position: absolute; left: 0; bottom: 7vw; width: 100%;}
main .counter dl dd {font-size: 16vw; padding: 1vw 0 0;}
main .counter dl::after{content: ''; background-position: center top; background-image: url(/img/company/icon.png); background-repeat: no-repeat; height: 12vw; width: 12vw; position: absolute; left: 50%; top: 23.5vw; margin: 0 0 0 -6vw; background-size: 12vw auto;}
main .counter dl:nth-child(2)::after {background-position: center -12vw;}
main .counter dl:nth-child(3)::after {background-position: center -24vw;}
main table {font-size:  4.375vw; line-height: 1.6; text-align: left; border:none; width: 100%; margin:0vw 0 8vw; border-top:none;}
main table th {background: none; width: auto; text-align:left; padding: 4vw 0 1vw; border-bottom:none; display: block;}
main table td {text-align: left; padding: 1vw 0 4vw; border-left:none; border-bottom: 1px dotted #ccc; display: block;}
main table td ol { padding: 0.5vw 0 0 1.5em;}
main table td ol li {font-size:  4.375vw; line-height: 1.6;}
main table td ol li + li {margin: 1vw 0 0;}
main table td ul li {font-size:  4.375vw; line-height: 1.6;}
main table td ul li + li {margin: 1vw 0 0;}
main table td p{margin-bottom:2.14vw;}

/* 後続 */
main figure + h2 {margin: 6.4vw 0 0;}
main h2 + p,
main h2 + ol,
main h2 + dl{margin:4.2vw 0 0;}
main p + p {margin:4.8vw 0 0 0;}
main p + p span {margin-top:3.2vw; font-size:85%;}
main p + table {margin:4.8vw 0 0 0;}
main table td ol + p{margin-top:2.14vw;}



/* service link */
.service {border-bottom: none; text-align: center; margin: 6.4vw 6.25vw 6vw; width: 87.5vw; padding: 8vw 0 ;}
.service::before,.service::after{display: none;}
main .service .wrap {text-align: center;}
#contents main .service img {float: none; width: 45.3125vw;}
.service h2 {padding: 0 0 0 0; margin-bottom: 0; margin-top: 6vw; text-align: center; font-size: 3.75vw; line-height: 7.8125vw;}
.service p {padding: 0 0 0 0; text-align: center; font-size: 3.75vw; line-height: 6.71875vw;}
.service p + p {margin-top:2vw;}
.service p + p.btn {position: static; margin-top: 5.2vw;}
.service p.btn a{width: 100%; line-height: 16vw; font-size: 4.266667vw;}
#iephoto.service p.btn {display: none;}

/* left pcnav */
#pcnav {position: static; width:87.5vw; background: #fff; margin: 0 6.25vw 8vw; border: 1px solid #fff;}
#pcnav .category {display: none;}
#pcnav h2 {font-size: 7.5vw; margin:8vw 0; line-height: 1;}
#pcnav h2 + ul {width: 100%;}
#pcnav h2 + ul li {height: 13.75vw;}
#pcnav h2 + ul li a{font-size: 5vw; line-height: 13.75vw; padding: 0 0 0 12.5vw; background: url(/img/arr-black.png) 6.875vw center no-repeat;}

/* photography */
body.design main{border-bottom: 1px solid #e3e3e3;}
body.design #visual h2 {background-image: url(/img/design/kv-sp.jpg);}

/* company */
body.company #visual h2 {background-image: url(/img/company/kv-sp.jpg);}

/* recriot */
body.recruit #visual h2 {background-image: url(/img/recruit/kv-sp.jpg);}

/* recruit */
body.recruit main p.en {font-size: 6.4vw; padding: 2.4vw 0 8vw;}
body.recruit main p.en + h2 {text-align: center; position: relative; margin-top: 8vw;}
body.recruit main p.en + h2::after {content: ''; width: 46.666667vw; top: -6.8vw; margin-left: -23.333333vw;}
body.recruit main h3 {font-size: 4.375vw; line-height: 7.8125vw; margin: -1.25vw 0 0; margin: 8vw 0 3.2vw; text-align: center;}
body.recruit main p.btn {text-align: center; margin: 4vw 0 8vw;}
body.recruit main table {border-top: 1px dotted #ccc;}
body.recruit main p.btn a{width: 100%; line-height: 16vw; font-size: 4.266667vw;}

}




/* 
	loader
*********************/
@media screen and (min-width:1100px){
body.photo #loader .loader,
body.design #loader .loader {transform: translateX(140px)}
}

/* js */
main section .wrap{opacity:0; transition: opacity 0.8s ease,transform 0.8s; transform: translateY(30px);}
.windowloaded main section.fadein .wrap,
.windowloaded main article.fadein {opacity:1; transform: translateY(0);}
@media screen and (max-width:640px){
main article.fadein,
main section.fadein {opacity:1; transform: none;}
}