@charset "UTF-8";
/*!職る人 対談篇用スタイル*/
#content2{overflow:hidden}
.heroimg .bg{-webkit-animation-duration:16s;animation-duration:16s}
.heroimg .bg_01{background-image:url(../img/interview2/heroimg_01.jpg);-webkit-animation-delay:-3s;animation-delay:-3s}
.heroimg .bg_02{background-image:url(../img/interview2/heroimg_02.jpg);-webkit-animation-delay:5s;animation-delay:5s}
.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 .note{display:inline-block}
.section .bg{position:absolute;left:50%;width:100%}
.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}
.interview::before{content:"——";font-family:serif}
.article_info{text-align:right}
#section_01 .container{padding-top:1px}
#section_01 .bg .inner{right:25%}
#section_01 .img_02{z-index:10}
#section_01 .txt{position:relative;background-color:#fff}
#section_01 .txt::after{content:"";position:absolute;top:0;right:0;display:block;height:100%;background-color:#fff;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
#section_03 .bg{left:auto;right:10%}
#section_03 .bg .inner{right:25%}
#section_03 .section_header{background:url(../img/interview2/img_s3_header.jpg) no-repeat 50% 50%;font-family:"游明朝体","Yu Mincho",YuMincho,serif;letter-spacing:.25em}
#section_03 .section_header .section_03_heading{left:100%;position:relative;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}
#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:.6s;-o-transition-delay:.6s;transition-delay:.6s}
.section-ending{text-align:center;margin-top:70px}
.section-ending .logo{width:134px}
.section-ending .description{font-family:"游明朝体","Yu Mincho",YuMincho,serif;color:#fff;text-align:center;line-height:3;font-size:.88em}
.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}
.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:40px;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 .note{margin-top:10px;font-size:.88em}
.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:60px;font-size:.88em}
.article_info li+li{margin-top:5px}
#section_01 .bg{bottom:854px}
#section_01 .bg .inner{width:89.44%;padding-top:100%}
#section_01 .img_01{position:absolute;right:35.5%;max-width:916px;width:78.02%;margin-left:-14.22%}
#section_01 .img_02{position:absolute;bottom:-180px;right:93%;max-width:587px;width:88.94%;margin-left:-11.06%}
#section_01 .txt{width:56.22%;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;margin-top:56px;margin-left:auto;padding:60px 0 60px 9.37%}
#section_01 .txt::after{width:170px}
#section_02{margin-top:410px}
#section_03 .bg{bottom:1303px}
#section_03 .bg .inner{width:89.44%;padding-top:80%}
#section_03{margin-top:240px}
#section_03 .section_header{height:510px;margin-bottom:65px;background-size:cover;font-size:1.5em;line-height:3.47}
#section_03 .section_header .section_03_heading{top:-5em}
.section-ending{height:770px;background:url(../img/interview2/img_se_01.jpg) no-repeat 50% 50%;background-size:cover;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.section-ending .description{margin-top:60px}
.next{padding-top:50px;font-size:1.13em}
.next::after{height:70px}
.product_banner{padding:110px 0 80px}
.product_banner .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.product_banner .txt{-ms-flex-preferred-size:50%;flex-basis:50%}
.product_banner .img{-ms-flex-preferred-size:46.34%;flex-basis:46.34%}
.product_banner .name{margin-bottom:30px;font-size:1.75em;line-height:1.46}
.product_banner .photo{width:83.46%;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){/*!職る人 対談篇用スタイル*/
.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}
.section .note{margin-top:5px;font-size:.86em}
.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{bottom:22%}
#section_01 .bg .inner{width:86.67%;padding-top:100%}
#section_01 .img_01{margin-right:-40px;margin-left:-40px}
#section_01 .img_02{margin:1.7em 0}
#section_01 .txt{margin:-30px -20px 0;padding:25px 20px}
#section_02{margin-top:90px}
#section_03 .bg{bottom:100%}
#section_03 .bg .inner{width:86.67%;padding-top:135%}
#section_03{margin-top:120px}
#section_03 .section_header{height:231px;margin-left:auto;margin-bottom:30px;padding-right:25px;background-size:180% auto;background-position:25% 50%;line-height:3.44}
#section_03 .section_header .section_03_heading{top:-5em;left:calc(100% + 50px)}
.section-ending .bg{background:url(../img/interview2/img_se_01.jpg) no-repeat 50% 50%;background-size:cover;height:270px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.section-ending .logo{width:69px}
.section-ending .description{background-color:#333;padding:40px 15vw}
.next{padding-top:45px;font-size:1.14em}
.next::after{height:50px}
.product_banner{padding:60px 0}
.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%}
.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)}
}