@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}
#section_01 .bg .inner{left:24.45%}
#section_02 {margin-top:106px}
#section_02 .container{padding-top:1px}
#section_02 .bg .inner{right:25%}
#section_02 .img_02{z-index:10}
#section_02 .txt{position:relative;background-color:#fff}
#section_02 .txt::before{content:"";position:absolute;top:0;left:0;display:block;height:100%;background-color:#fff;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}
#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 .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}
#section_03 .block_mrg{margin-top: 50px}
.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:50px;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;width:89.44%;padding-top:42%}
#section_03 .section_heading{margin-bottom:32px}
#section_03 .bg {bottom: 1014px}
#section_03 .bg .inner {width: 100%;padding-top: 15.6%}
#section_03{margin-top:99px}
#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:72px;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 .photo{width:63.766%;margin:0 auto}
.product_banner .note{margin-top:40px;font-size:.75em}
.product_banner .btn_link{max-width:280px;margin:35px auto 0}
}
@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:255% auto;background-position: 50% -0.2%}
.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}
#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:15%}
#section_02 .bg .inner{width:86.67%;padding-top:117.33%}
#section_02 .img_01{margin-right:-40px;margin-left:-40px}
#section_02 .img_02{margin:1.7em 0}
#section_02 .txt{margin:-30px -20px 0;padding:25px 20px}
#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}
#section_03 .section_header .section_03_heading{top:-5em}
#section_03 .bg{bottom:100%}
#section_03 .bg .inner{width:86.67%;padding-top:75%;right: 25%}
#section_03{margin-top:120px}
#section_03 .block_mrg {margin-top: 30px}
.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 .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}
}
@-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)}
}