@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;}
li{ list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins { background-color:#ff9; color:#000; text-decoration:none;}
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

.bold { font-weight:bold;}
.fl { float:left;}
.fr { float:right;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}
.hidden { display: none;}
.absolute { position:absolute;}
.relative { position:relative;}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:24px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#333; border-radius:4px;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}


* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-family:Georgia,"游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E","メイリオ","Meiryo",serif; line-height:1.7; color:#000; letter-spacing:0.1em;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}
#copyRight{ font-size:0.75rem; letter-spacing:0em; padding:1rem 0 1rem;}

header{ max-width:960px; margin:0 auto; padding:2rem 0; width:100%; text-align:left;}
header h1 img{ width:180px; height:auto;}

#introWrapper{ position:relative; width:100%; max-width:960px; margin:0 auto; padding:6rem 0 12rem; overflow:hidden;}

#triggerWrapper{}
#triggerWrapper ul{ display:inline-block; position:relative; padding:0 2rem; margin-left:-4rem;}
#triggerWrapper ul:after{ content:""; position:absolute; bottom:0; left:0; height:1px; width:100%; background:#707070; padding-right:4rem;}
#triggerWrapper ul li{ display:inline-block; padding:0 0 5px 4rem;}
#triggerWrapper ul li:after{ content:"/"; padding-left:4rem;}
#triggerWrapper ul li:last-child:after{ content:none;}

#triggerWrapper ul li a{ position:relative;}
#triggerWrapper ul li a:hover{ opacity:0.5;}
#triggerWrapper ul li:nth-child(1) a:after{ content:"produce"; font-size:0.75rem; color:#C1BDBD; color:#333; display:block; position:absolute; top:3em; left:50%; transform:translate(-50%,0); font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}
#triggerWrapper ul li:nth-child(2) a:after{ content:"directing"; font-size:0.75rem; color:#C1BDBD; color:#333; display:block; position:absolute; top:3em; left:50%; transform:translate(-50%,0); font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}
#triggerWrapper ul li:nth-child(3) a:after{ content:"coaching"; font-size:0.75rem; color:#C1BDBD; color:#333; display:block; position:absolute; top:3em; left:50%; transform:translate(-50%,0); font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}

.dispBox{ position:fixed; top:0; right:-110%; width:100%; height:100vh; background:rgba(255, 255, 255, 0.99); transition:all 1s; z-index:1000; overflow:auto;}
.dispBox ul li{ margin:0.5rem 0; display:block; padding:0;}
.dispBox ul li:after{ content:none;}

.dispBox.on{ right:0;}
#works1.on .worksObj{ opacity:1;}
#works2.on .worksObj{ opacity:1;}
#works3.on .worksObj{ opacity:1;}

.worksBox{ max-width:1280px; width:100%; margin:0 auto; text-align:left; padding:6rem 0; position:relative;}
.worksText{ max-width:960px; width:100%; margin:0 auto; padding:0 4rem;}
.worksText h2{ font-size:1.4rem; line-height:1.4; font-weight:normal; margin-bottom:2rem;}
.closeBtn{ position:absolute; top:2rem; right:2rem; cursor: pointer; width:2rem; height:auto;}
.closeBtn:hover{ opacity:0.5;}
.closeTextBtn{ margin:2rem auto 0; text-align:center; cursor: pointer;}

#works1 .worksObj{ position:absolute; top:35%; left:50%; max-width:460px; width:50%; height:auto; opacity:1; transition:all 1s; transition-delay:1.1s;}
#works1 .worksText{ margin-top:2rem; line-height:2.4;}
#works1 .worksText h2:after{ content:"produce"; line-height:1; display:block; color:#C1BDBD; font-weight:bold; font-size:1rem; font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}
#produceImage{ height:460px; width:100%; background:url(img/produce_image.jpg) center center no-repeat; background-size:cover;}

#works2 .worksObj{ position:absolute; top:30%; right:50%; max-width:460px; width:50%; height:auto; opacity:1; transition:all 1s; transition-delay:1.1s;}
#works2 .worksText{ margin-top:2rem; line-height:2.4; margin-left:40%; width:60%;}
#works2 .worksText h2{ margin-left:15%;}
#works2 .worksText h2:after{ content:"directing"; display:block; color:#C1BDBD; font-weight:bold; font-size:1rem; font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}
#directingImage{ height:460px; width:100%; background:url(img/directing_image.jpg) center center no-repeat; background-size:cover;}

#works3 .worksObj{ position:absolute; top:20%; left:50%; max-width:460px; width:50%; height:auto; opacity:1; transition:all 1s; transition-delay:1.1s;}
#works3 .worksText{ margin-top:2rem; line-height:2.4;}
#works3 .worksText h2:after{ content:"coaching"; line-height:1; display:block; color:#C1BDBD; font-weight:bold; font-size:1rem; font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;}
#coachingImage{ height:460px; width:100%; background:url(img/coaching_image.jpg) center center no-repeat; background-size:cover;}

.engTitle{ font-size:1rem; margin:0 auto 2rem;}
.verticalText{ writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}
.primeText{ line-height:2.4; margin:4rem auto;}
.primeText.bigText{ font-size:1.2rem; line-height:1.5; text-align:justify; margin-left:auto; margin-right:auto; max-width:80%;}

#conceptWrapper{ overflow:hidden; margin-top:8rem;}
#conceptList > li{ text-align:left; max-width:960px; width:100%; margin:2rem auto; position:relative;}
#conceptList > li:nth-child(1){ position:relative; left:8rem;}
#conceptList > li:nth-child(2){ position:relative; left:0;}
#conceptList > li:nth-child(3){ position:relative; left:8rem;}

.imageTitleWrapper{ display:table; table-layout:fixed; width:100%;}
.imageTitleWrapper > h2{ display:table-cell; width:15%; vertical-align:bottom; padding-bottom:2rem;}
.imageWrapper{ display:table-cell; text-align:left;}

#conceptList > li:nth-child(1) .imageTitleWrapper > h2 img{ width:2.8rem; height:auto;}
#conceptList > li:nth-child(2) .imageTitleWrapper > h2 img{ width:2rem; height:auto;}
#conceptList > li:nth-child(3) .imageTitleWrapper > h2 img{ width:6rem; height:auto;}


#profileWrapper{ text-align:left; max-width:960px; width:100%; margin:8rem auto 0;}
#profileWrapper h2{ font-weight:normal;}
#profileWrapper > dl{ margin:4rem 0;}
#profileWrapper > dl > dt{ margin-bottom:1rem;}
#profileWrapper > dl > dd{ font-size:0.8rem;}

.profileText{ font-size:0.8rem;}

#profileMetaWrapper{ margin:2rem auto 0;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content:space-around;
}
.linkTableWrapper{ padding:0 0 0 2rem;}
.linkTableWrapper > table{ display:inline-block; font-size:0.8rem;}
.linkTableWrapper > table th{ text-align:left; font-weight:normal;}
.linkTableWrapper > table td{ text-align:left; padding-left:1rem;}
.linkTableWrapper > table td a{ text-decoration:underline;}
.linkTableWrapper > table td a:hover{ text-decoration:none;}
.profileImageWrapper{flex-basis:30%;}


#contactWrapper{ max-width:960px; width:100%; margin:4rem auto 4rem;}
#contactWrapper a{ text-decoration:underline;}
#contactWrapper a:hover{ text-decoration:none;}
.contactNote{ font-size:0.8rem; margin-top:2rem;}

#hamburger{ position:fixed; top:2rem; right:2rem;}

@media only screen and (max-width : 800px) {
    header{ padding:1rem;}
    header h1 img{ width:120px; height:auto;}

    #introWrapper{ height:auto; padding:4rem 0;}

    #triggerWrapper ul{ display:block; margin-left:0;}
    #triggerWrapper ul:after{ content:none;}
    #triggerWrapper ul li{ display:block; padding:0; margin-bottom:3rem;}
    #triggerWrapper ul li:after{ content:none;}    
    #triggerWrapper ul li .dispBox{ opacity:1; position:static; width:100%; padding:1rem; transform:translate(0,0); margin:7px 0 2rem;}
    #triggerWrapper ul li:nth-child(1) a:after{ top:1.6em; border-top:1px solid #707070; padding:0.2rem 2rem 0; margin-top:0.2rem;}
    #triggerWrapper ul li:nth-child(2) a:after{ top:1.6em; border-top:1px solid #707070; padding:0.2rem 2rem 0; margin-top:0.2rem;}
    #triggerWrapper ul li:nth-child(3) a:after{ top:1.6em; border-top:1px solid #707070; padding:0.2rem 2rem 0; margin-top:0.2rem;}

    .primeText{ margin:2rem auto; text-align:left; padding:0 1rem;}
    .primeText br{ display:none;}
    .primeText.bigText{ font-size:1rem; max-width:100%; text-align:left;}

    #conceptWrapper{ overflow:hidden; margin-top:4rem;}
    #conceptList > li:nth-child(1){ left:0; margin-bottom:4rem;}
    #conceptList > li:nth-child(1) .imageTitleWrapper > h2 img{ width:2.4rem;}
    #conceptList > li:nth-child(2){ left:0; margin-bottom:4rem;}
    #conceptList > li:nth-child(3){ left:0;}

    .imageTitleWrapper{ display:block;}
    .imageTitleWrapper > h2{ display:block; width:100%; padding-bottom:2rem; text-align:center;}
    .imageWrapper{ display:block; width:100%; text-align:center;}

    #profileWrapper{ margin:4rem auto 0; padding:0 1rem;}
    .profileText br{ display:none;}
    #profileWrapper > dl{ margin:2rem 0;}
    .linkTableWrapper{ text-align:left; margin:1rem 0;}
    .linkTableWrapper > table{ display:block;}
    .linkTableWrapper > table th{ text-align:left; font-weight:normal;}
    .linkTableWrapper > table td{ text-align:left; padding-left:1rem;}
    .linkTableWrapper > table td a{ text-decoration:underline;}
    .linkTableWrapper > table td a:hover{ text-decoration:none;}
    .profileImageWrapper{ text-align:center;}
    .profileImageWrapper img{ max-width:800px; width:100%; height:auto; margin:0 auto;}

    #contactWrapper{ margin:4rem auto 4rem;}

    .worksBox{ padding:3rem 0;}
    .worksText{ padding:0 1rem 0;}
    .worksText h2{ font-size:1.2rem; margin-bottom:1rem;}

    #works1 .worksObj{ top:10rem; left:auto; right:0; width:50%;}
    #works1 .worksText{ margin-top:6rem; line-height:1.7;}
    #works1 .worksText br{ display:none;}
    #works1 .worksText h2:after{ font-size:0.7rem;}
    #produceImage{ height:160px;}

    #works2 .worksObj{ padding:2rem 0 1rem;}
    #works2 .worksObj{ top:4rem; right:auto; left:0; width:50%;}
    #works2 .worksText{ margin-top:3rem; line-height:1.7; margin-left:0; width:100%;}
    #works2 .worksText br{ display:none;}
    #works2 .worksText h2{ margin-left:50%;}
    #works2 .worksText h2:after{ font-size:0.7rem;}
    #directingImage{ height:160px;}

    #works3 .worksObj{ top:7rem; left:auto; right:0; width:50%;}
    #works3 .worksText{ margin-top:4rem; line-height:1.7;}
    #works3 .worksText br{ display:none;}
    #works3 .worksText h2:after{ font-size:0.7rem;}
    #coachingImage{ height:160px;}

    .closeBtn{ top:1rem; right:1rem; width:1.4rem;}
    .closeTextBtn{ font-size:0.8rem;}


    #profileMetaWrapper{ flex-direction:column;}
    .profileImageWrapper{flex-basis:100%;}


    #hamburger{ top:10px; right:10px;}
}


#navWrapper{ padding:0 2rem 0 0; position:fixed; top:5rem; right:0; transform-origin: right top; transform:rotate(-180deg); transition: all .5s;}
#navWrapper.menuOn{ transform:rotate(0deg);}
#navWrapper ul li{ padding-bottom:10px;}

#formWrapper{margin:2rem auto 2rem; width:100%; padding:0 1rem;}
#formWrapper dl#formList{ max-width:380px; margin:0 auto 2rem;}
#formWrapper dl dt{margin:0 auto 0.5rem; text-align:left;}
#formWrapper dl dd{margin:0 auto 1.5rem;}
#formWrapper dl dd input{ font-size:16px; width:100%; border:1px solid #999; padding:0.5rem 1rem; box-sizing:border-box; text-align:left;-webkit-appearance:none; border-radius:0;}
#formWrapper dl dd textarea{ font-size:16px; width:100%; height:10rem; border:1px solid #999; padding:1rem; box-sizing:border-box; text-align:left;
    -webkit-appearance:none; border-radius:0;
}
.addLine{ font-size:16px; width:100%; border:1px solid #999; padding:1rem; box-sizing:border-box; text-align:left;}
.submitBtn{ display:block; cursor:pointer; max-width:380px; width:100%; margin:0 auto 1rem;
color:#fff; line-height:1; letter-spacing:0.1em; background:#000; border:none; display:inline-block; padding:1rem 4rem; box-sizing:border-box; opacity:1;
-webkit-appearance: none;
}
.submitBtn.bgGray{ background:#666;}
.submitBtn:hover{ opacity:0.8;}
#formWrapper dd.mb1rem{margin:0 auto 1.5rem;}
#preCheckText{ padding:0 1rem;}

.catTitle{ font-size:1.4rem; font-weight:normal; margin-bottom:2rem;}
#singleWrapper{ text-align:left; max-width:960px; width:100%; margin:0 auto;}
#singleWrapper p{ font-size:0.8rem; margin:2rem 0;}
#singleWrapper ul li{ margin:1rem 0;}
.videoWrapper{
position:relative;
height:0;
padding-top:66.6989351%; /* 4:3 */
padding-top:56.25%; /* 16:9 */
}
.videoWrapper iframe{
height:100%;
position:absolute;
left:0;
top:0;
width:100%;
}

.catPostList{ margin:4rem auto 0; max-width:calc(960px + 1rem); text-align: left;}
.catPostList li{ margin-bottom:2rem; display:inline-block; width:33.33%; padding:0 0.5rem 1rem; text-align:center; overflow:hidden;}
.catPostList li a{ text-decoration:underline;}
.catPostList li a:hover{ text-decoration:none;}

.bottomNavList{ margin:5rem auto 0; border-top:1px solid #707070; padding-top:2rem; max-width:960px;}
.bottomNavList li a{ text-decoration:underline;}
.bottomNavList li a:hover{ text-decoration:none;}

.blogNav{ margin:1rem auto 0;}

.column2List > li{ width:100%; text-align:center;}
.column2List > li img{ max-width:480px;}

#companyWrapper{ text-align:center; margin:4rem auto;}
#companyWrapper img{ width:180px; height:auto;}
#companyWrapper table{ max-width:680px; margin:2rem auto 0; text-align:left; font-size:0.8rem;}
#companyWrapper table th{ font-weight:normal; text-align:right;}
#companyWrapper table td{ padding:0 0 0 1rem;}
#companyWrapper table td a{ text-decoration: underline;}
#companyWrapper table td a:hover{ text-decoration: none;}

@media only screen and (max-width : 800px) {
    #navWrapper{ padding:0 1rem 0 0; top:3rem;}
    .submitBtn{ font-size:1rem;}

    #lowerWrapper{ padding:0 1rem;}
    .catLead{ text-align:left;}
    .catLead br{ display:none;}

    .catPostList li{ margin-bottom:1rem; display:block; width:100%; padding:0;}
    .bottomNavList{ margin:4rem auto 0;}

    .column2List > li img{ width:100%}

    #companyWrapper img{ width:120px;}
}