@charset "UTF-8";
/*!職る人 対談篇用スタイル*/
#content2{overflow:hidden}
.heroimg .bg{-webkit-animation-duration:16s;animation-duration:16s}
.heroimg .bg_01{background-image:url(../img/interview1/heroimg_01.jpg);-webkit-animation-delay:-3s;animation-delay:-3s}
.heroimg .bg_02{background-image:url(../img/interview1/heroimg_02.jpg);-webkit-animation-delay:5s;animation-delay:5s}
.article{position:relative;background:url(../img/common/map.png) no-repeat 50% 0}
.article_title .mdash:before{content: "——";font-family: serif;}
.map .imgs{display:-webkit-box;display:-ms-flexbox;display:flex}
.map .imgs .img{-ms-flex-preferred-size:50%;flex-basis:50%}
.map .imgs .img img{width:100%}
.section{position:relative}
.section_heading{font-family:"游明朝体","Yu Mincho",YuMincho,serif;font-weight:700;text-align:center}
.section .container{position:relative}
.section .bg{position:absolute;left:50%;width:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
.section .bg .inner{position:absolute;display:block;height:0;background-color:#f4f3ed;z-index:-1}
.layout{position:relative}
.layout .img img+img{margin-top:50px}
.talk{display:-webkit-box;display:-ms-flexbox;display:flex}
.talk .name{font-weight:700;padding-top:.25em}
.talk .body .comments{display:block;margin-top:.3em;font-size:12px}
.talk .body .mdash{margin-right:.2em;margin-left:.2em}
.talk .body .mdash::before{content:"——";font-family:serif}
.interview::before{content:"——";font-family:serif}
.article_info{text-align:right}
.article .note-list {margin-top: 28px;font-size: .75em;}
.article .note-list li {position: relative;padding-left: 2.5em;}
.article .note-list li span {position: absolute;left: 0;}
.article .note-list li + li {margin-top: 4px;}
#section_01 .bg .inner{left:25%}
#section_02 .container{padding-top:1px}
#section_02 .bg .inner{right:25%}
#section_02 .img_02{z-index:10}
#section_03 .bg{position: absolute;left: 50%;width: 100%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);z-index: -2;}
#section_03 .bg .inner {right: 48%;}
#section_03 .section_header{font-family:"游明朝体","Yu Mincho",YuMincho,serif;letter-spacing:.25em}
#section_03 .section_header .section_03_heading{position:relative}
#section_03 .section_header .row{position:relative;display:inline-block}
#section_03 .section_header .row::before{content:"";position:absolute;left:calc(50% - 1em);top:0;display:block;width:2em;height:100%}
#section_03 .section_header .row::before{background-color:#fff}
#section_03 .section_header .row .inner{position:relative;display:inline-block;padding: 1em 0;}
#section_03 .section_header .inner.tab:before{position:absolute;display:inline-block;left:45px;top:-28px;content: "”";-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-bt;writing-mode: horizontal-tb;}
#section_03 .section_header .inner.tab:after{position:absolute;display:inline-block;right:39px;bottom:-30px;content: "“";-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-bt;writing-mode: horizontal-tb;}
#section_03 .section_header .row.animated{opacity:1}
#section_03 .section_header .row.animated::before{opacity:0;-webkit-transition:opacity;-o-transition:opacity;transition:opacity}
#section_03 .section_header .row.animated::after{content:"";position:absolute;left:calc(50% - 1em);top:0;display:block;width:2em;height:0;background-color:#f4f3ed}
#section_03 .section_header .row.animated .inner{opacity:0;-webkit-transition:opacity;-o-transition:opacity;transition:opacity}
#section_03 .section_header .row.show::before{opacity:1;-webkit-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s}
#section_03 .section_header .row.show::after{-webkit-animation:text-bg 1.5s cubic-bezier(.645,.045,.355,1);animation:text-bg 1.5s cubic-bezier(.645,.045,.355,1)}
#section_03 .section_header .row.show .inner{opacity:1;-webkit-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s}
.next{position:relative;font-family:"游明朝体","Yu Mincho",YuMincho,serif;text-align:center;background-color:#f4f3ed}
.next::after{content:"";display:block;width:1px;margin:10px auto 0;background-color:#333}
.banner_wrap{background-color:#f4f3ed}
.product_banner .txt{text-align:center}
.product_banner .name{font-family:"游明朝体","Yu Mincho",YuMincho,serif}
.product_banner .small_text{font-size: .75em;margin-top: 5px}
.next_banner{background-image:url(../img/interview1/bg_next.jpg)}

@media print,screen and (min-width:768px){/*!職る人 対談篇用スタイル*/
.section{margin-top:110px}
.section_heading{margin-bottom:47px;font-size:1.75em;line-height:1.43}
.section p{line-height:187.5%}
.section .p+.p,.section .p+p,.section p+.p,.section p+p{margin-top:2em}
.section .bg{max-width:1174px;margin:0 auto}
.layout{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.layout .txt{-ms-flex-preferred-size:46.68%;flex-basis:46.68%}
.layout .img{-ms-flex-preferred-size:50%;flex-basis:50%;-ms-flex-negative:0;flex-shrink:0}
.layout_r{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.interview+.talk,.p+.talk,.talk+.interview,.talk+.p,.talk+.talk{margin-top:2em}
.talk .name{-ms-flex-preferred-size:70px;flex-basis:70px;-ms-flex-negative:0;flex-shrink:0;margin-right:30px}
.interview{margin-bottom:25px}
.article_info{margin-top:-1em;font-size:.88em}
.article_info li+li{margin-top:5px}
#section_01 {margin-top:115px}
#section_01 .bg .inner{top:-115px;padding-top:39%;width: 100vw;margin-right: calc(50% - 50vw);}
#section_01 .p:nth-of-type(2) .interview{margin-top: 20px;margin-bottom: -5px;}
#section_01 .p:nth-of-type(3){margin-top: 40px;}
#section_02 {margin-top:116px}
#section_03 .section_heading{margin-bottom:32px}
#section_03 .bg {bottom: 394px}
#section_03 .bg .inner {right: 25%; padding-top: 64.8%;top: -675px; width: 100vw; margin-left: calc(50% - 50vw);}
#section_03 .talk:nth-of-type(1){margin-top: 20px;}
#section_03 .interview:nth-of-type(2){margin-top: 20px;}
#section_03 .talk:nth-of-type(2){margin-top: 20px;}
#section_03{margin-top:183px}
#section_03 .section_header{height:510px;margin-bottom:72px;background:url(../img/interview1/bg_s3_header.jpg) no-repeat 50% 50%;background-size:cover;font-size:1.5em;line-height:3.47}
#section_03 .section_header .section_03_heading{top:-4.8em}
.next{padding-top:50px;font-size:1.13em}
.next::after{height:70px}
.product_banner{margin-top:99px;padding-top:80px}
.product_banner .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.product_banner .txt{-ms-flex-preferred-size:40%;flex-basis:40%}
.product_banner .img{-ms-flex-preferred-size:43.95%;flex-basis:43.95%}
.product_banner .name{margin-bottom:30px;font-size:1.75em;line-height:1.46}
.product_banner .name sup{top: -0.3em}
.product_banner .photo{width:63%;margin:0 auto}
.product_banner .note{margin-top:40px;font-size:.75em}
.product_banner .btn_link{max-width:280px;margin:35px auto 0}
.article_info {margin-top: 71px;font-size: .88em;}
}
@media only screen and (max-width:767px){/*!職る人 対談篇用スタイル*/
.heroimg .bg_01{background-image:url(../img/interview1/heroimg_01_sp.jpg)}
.heroimg .bg_02 {background-image: url(../img/interview1/heroimg_02_sp.jpg);}
.article{background-size: 220% auto;background-position: 50% -0.01%}
.section{margin-top:30px}
.section_heading{margin-bottom:20px;font-size:1.36em;line-height:1.61}
#content2 .section .container{padding:0 40px}
.section p{line-height:182.14%}
.section .p+.p,.section .p+p,.section p+.p,.section p+p{margin-top:1.7em}
.layout .img{margin-bottom:1.7em}
.interview+.talk,.p+.talk,.talk+.interview,.talk+.p,.talk+.talk{margin-top:1.7em}
.talk .name{min-width:65px;margin-right:10px}
.article_info{margin-top:30px;font-size:.86em}
.article_info li+li{margin-top:3px}
.article .note-list {margin-top:12px;font-size: .79em;}
.article .note-list sup{top: -0.1em}
#section_01 .bg .inner{top:-30px;width:77.33%;padding-top:57%}
#section_01 .layout.layout_l .txt+.img{margin-top: 1.7em}
#section_02 {margin-top:53px}
#section_02 .bg{bottom:47%}
#section_02 .bg .inner{width:86.67%;padding-top:117.33%}
#section_02 .layout.layout_l .txt+.img{margin-top: 1.7em}
#section_02 .img_01{margin-right:-40px;margin-left:-40px}
#section_02 .img_02{margin:1.7em 0}
#section_03{margin-top:120px}
#section_03 .section_header{margin-left:auto;margin-bottom:30px;padding-right:25px;background:url(../img/interview1/bg_s3_header_sp.jpg) no-repeat 50% 50%;background-size:cover;background-position:25% 50%;line-height:3.44;min-height:301px;}
#section_03 .section_header .section_03_heading{top:-5em}
#section_03 .bg{bottom:92%}
#section_03 .bg .inner{width:86.67%;padding-top:75%;right: 25%;margin-top: -3%;}
#section_03{margin-top:120px}
#section_03 .section_header .inner.tab:before{left:28px;top:-15px}
#section_03 .section_header .inner.tab:after{right:26px;bottom:-17px}
.next{padding-top:45px;font-size:1.14em}
.next::after{height:50px}
.product_banner{margin-top:40px;padding-top:40px}
.product_banner .name{margin-bottom:20px;font-size:1.36em;line-height:1.42}
.product_banner .name sup{top: 0}
.product_banner .desc{font-size:.86em}
.product_banner .photo{margin:0 auto 25px;width:68.67%;text-align:center}
.product_banner .note{margin-top:20px;font-size:.79em}
.product_banner .btn_link{max-width:220px;margin:20px auto 0}
.next_banner{background-image:url(../img/interview1/bg_next_sp.jpg)}
sup{top: -0.4em}
.bottomBtn .inner sup{top: -0.2em}
}
@-webkit-keyframes slide-anim{0%{opacity:0;-webkit-transform:scale(1) rotate(0.1deg);transform:scale(1) rotate(0.1deg)}
31.25%{opacity:1}
50%{opacity:1}
62.5%{opacity:0}
100%{opacity:0;-webkit-transform:scale(1.16);transform:scale(1.16)}
}
@keyframes slide-anim{0%{opacity:0;-webkit-transform:scale(1) rotate(0.1deg);transform:scale(1) rotate(0.1deg)}
31.25%{opacity:1}
50%{opacity:1}
62.5%{opacity:0}
100%{opacity:0;-webkit-transform:scale(1.16);transform:scale(1.16)}
}