@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: local('NotoSansJP-Regular.otf'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
html {
height: 100%;
}
body {
height: 100%;
font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Verdana, 'ï¼ï¼³ Ｐゴシック', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #000;
color: #fff;
-webkit-text-size-adjust: 100%;
}
html.open {
overflow: hidden;
}
.serif {
/*
font-family: 'Sawarabi Mincho', 'Noto Serif Japanese', "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "游明æœ", YuMincho, "HG明æœE", "ï¼ï¼³ Ｐ明æœ", "ï¼ï¼³ 明æœ", serif;
*/
}
a:link,
a:visited {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: underline;
}
a:active {
color: #fff;
}
img {
max-width: 100%;
height: auto;
}
.indent {
padding-left: 1.1em;
text-indent: -1.1em;
}
.indent.mb0 {
margin-bottom: 0 !important;
}
.indent .indent-mark {
display: inline-block;
width: 1.1em;
text-indent: 0;
}
.txt_center {
text-align: center;
}
/* parts ////////////////////////////////////////////////////*/
.common_tit {
color: #666;
font-style: italic;
text-shadow: 0 8px 8px rgba(0,0,0,.3);
}
/* main_visual ////////////////////////////////////////////////////*/
.main_visual {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.main_visual::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-opacity: 1;
opacity: 1;
background-color: #000;
-webkit-transition: 1s opacity ease-out .7s;
transition: 1s opacity ease-out .7s;
z-index: 10;
}
.main_visual.scrollin::after {
-webkit-opacity: 0;
opacity: 0;
}
.main_visual .outer {
width: 100%;
height: 100%;
}
.main_visual .outer.interview.ito {
background: url(../ito/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.ito {
background: url(../ito/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kuroki {
background: url(../kuroki/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.kuroki {
background: url(../kuroki/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sasagawa {
background: url(../sasagawa/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.sasagawa {
background: url(../sasagawa/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.totani {
background: url(../totani/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.totani {
background: url(../totani/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.tamura {
background: url(../tamura/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.tamura {
background: url(../tamura/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.nakazawa {
background: url(../nakazawa/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.nakazawa {
background: url(../nakazawa/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yokosawa {
background: url(../yokosawa/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.yokosawa {
background: url(../yokosawa/img/process_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kosugi {
background: url(../kosugi/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kubo {
background: url(../kubo/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sakai {
background: url(../sakai/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yamada_kudo_yamada {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: url(../yamada_kudo/img/interview_bg_yamada.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yamada_kudo_kudo {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url(../yamada_kudo/img/interview_bg_kudo.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.mitani_kobayashi_mitani {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: url(../mitani_kobayashi/img/interview_bg_mitani.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.mitani_kobayashi_kobayashi {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url(../mitani_kobayashi/img/interview_bg_kobayashi.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.fujisawa_matsumoto_fujisawa {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: url(../fujisawa_matsumoto/img/interview_bg_fujisawa.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.fujisawa_matsumoto_matsumoto {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url(../fujisawa_matsumoto/img/interview_bg_matsumoto.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.hirano_ishida_hirano {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: url(../hirano_ishida/img/interview_bg_hirano.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.hirano_ishida_ishida {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url(../hirano_ishida/img/interview_bg_ishida.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kojima {
background: url(../kojima/img/interview_bg.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sawada_mishima_sawada {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: url(../sawada_mishima/img/interview_bg_sawada.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sawada_mishima_mishima {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url(../sawada_mishima/img/interview_bg_mishima.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
/* opacity: 0; */
}
.main_visual .slide span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
}
.main_visual .slide span.slide_sawada_mishima {
background: url(../img/main_visual_sawada_mishima.jpg) center 0 no-repeat;
background-size: cover;
}
.tablet .main_visual .slide span.slide_sawada_mishima {
background: url(../img/main_visual_sawada_mishima_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_kojima {
background: url(../img/main_visual_kojima.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_hirano_ishida {
background: url(../img/main_visual_hirano_ishida.jpg) center 0 no-repeat;
background-size: cover;
}
.tablet .main_visual .slide span.slide_hirano_ishida {
background: url(../img/main_visual_hirano_ishida_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_fujisawa_matsumoto {
background: url(../img/main_visual_fujisawa_matsumoto.jpg) center 0 no-repeat;
background-size: cover;
}
.tablet .main_visual .slide span.slide_fujisawa_matsumoto {
background: url(../img/main_visual_fujisawa_matsumoto_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_mitani_kobayashi {
background: url(../img/main_visual_mitani_kobayashi.jpg) center 0 no-repeat;
background-size: cover;
}
.tablet .main_visual .slide span.slide_mitani_kobayashi {
background: url(../img/main_visual_mitani_kobayashi_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_sakai {
background: url(../img/main_visual_sakai.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide07 {
background: url(../img/main_visual_slide07.jpg) center 0 no-repeat;
background-size: cover;
}
.tablet .main_visual .slide span.slide07 {
background: url(../img/main_visual_slide07_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide06 {
background: url(../img/main_visual_slide06.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide05 {
background: url(../img/main_visual_slide05.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide04 {
background: url(../img/main_visual_slide04.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide03 {
background: url(../img/main_visual_slide03.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide02 {
background: url(../img/main_visual_slide02.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide01 {
background: url(../img/main_visual_slide01.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_kuroki {
background: url(../img/main_visual_slide_kuroki.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_ito {
background: url(../img/main_visual_slide_ito.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_sasagawa {
background: url(../img/main_visual_slide_sasagawa.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide.load span {
-ms-animation: imgTrans 80s infinite;
-webkit-animation: imgTrans 80s infinite;
animation: imgTrans 80s infinite;
}
.main_visual .slide.load span.sawada_mishima {
-ms-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.main_visual .slide.load span.slide_kojima {
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.main_visual .slide.load span.slide_hirano_ishida {
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.main_visual .slide.load span.slide_fujisawa_matsumoto {
-ms-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.main_visual .slide.load span.slide_mitani_kobayashi {
-ms-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.main_visual .slide.load span.slide_sakai {
-ms-animation-delay: 25s;
-webkit-animation-delay: 25s;
animation-delay: 25s;
}
.main_visual .slide.load span.slide07 {
-ms-animation-delay: 30s;
-webkit-animation-delay: 30s;
animation-delay: 30s;
}
.main_visual .slide.load span.slide06 {
-ms-animation-delay: 35s;
-webkit-animation-delay: 35s;
animation-delay: 35s;
}
.main_visual .slide.load span.slide05 {
-ms-animation-delay: 40s;
-webkit-animation-delay: 40s;
animation-delay: 40s;
}
.main_visual .slide.load span.slide_kuroki {
-ms-animation-delay: 45s;
-webkit-animation-delay: 45s;
animation-delay: 45s;
}
.main_visual .slide.load span.slide_ito {
-ms-animation-delay: 50s;
-webkit-animation-delay: 50s;
animation-delay: 50s;
}
.main_visual .slide.load span.slide_sasagawa {
-ms-animation-delay: 55s;
-webkit-animation-delay: 55s;
animation-delay: 55s;
}
.main_visual .slide.load span.slide04 {
-ms-animation-delay: 60s;
-webkit-animation-delay: 60s;
animation-delay: 60s;
}
.main_visual .slide.load span.slide03 {
-ms-animation-delay: 65s;
-webkit-animation-delay: 65s;
animation-delay: 65s;
}
.main_visual .slide.load span.slide02 {
-ms-animation-delay: 70s;
-webkit-animation-delay: 70s;
animation-delay: 70s;
}
.main_visual .slide.load span.slide01 {
-ms-animation-delay: 75s;
-webkit-animation-delay: 75s;
animation-delay: 75s;
}
@-ms-keyframes imgTrans {
0% { opacity: 0; }
5% { opacity: 1; }
10% { opacity: 1;}
15% { opacity: 0;}
80% { transform: scale(1.2,1.2); }
}
@-webkit-keyframes imgTrans {
0% { opacity: 0; }
5% { opacity: 1; }
10% { opacity: 1;}
15% { opacity: 0;}
80% { transform: scale(1.2,1.2); }
}
@keyframes imgTrans {
0% { opacity: 0; }
8% { opacity: 1; }
10% { opacity: 1;}
15% { opacity: 0;}
80% { transform: scale(1.2,1.2); }
}
.main_visual h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
line-height: 1;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.main_visual .interview h1 {
width: 50%;
color: #fff;
font-size: 24px;
-webkit-text-shadow: 0 8px 8px rgba(0,0,0,.5);
text-shadow: 0 8px 8px rgba(0,0,0,.5);
}
.ito .main_visual .interview h1 {
width: 82%;
text-align: right;
}
.ito .main_visual .interview h1 .ctl {
display: none;
}
.kuroki .main_visual .interview h1 {
width: 65%;
}
.totani .main_visual .interview h1 {
width: 60%;
color: #000;
-webkit-text-shadow: 0 8px 8px rgba(255,255,255,.5);
text-shadow: 0 8px 8px rgba(255,255,255,.5);
}
.nakazawa .main_visual .interview h1 {
width: 65%;
line-height: 1.2;
}
.yokosawa .main_visual .interview h1 {
text-align: right;
}
.kosugi .main_visual .interview h1,
.kubo .main_visual .interview h1 {
width: 70%;
}
.sakai .main_visual .interview h1 {
width: 80%;
top: auto;
bottom: 20%;
}
.kojima .main_visual .interview h1 {
width: 80%;
top: auto;
bottom: 30%;
}
.yamada_kudo .main_visual .interview h1 {
width: auto;
top: auto;
left: 60px;
bottom: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.yamada_kudo .main_visual .interview.yamada_kudo_kudo h1 {
left: auto;
right: 60px;
}
.mitani_kobayashi .main_visual .interview h1 {
width: auto;
top: auto;
left: 60px;
bottom: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mitani_kobayashi .main_visual .interview.fujisawa_matsumoto_kobayashi h1 {
left: auto;
right: 60px;
}
.fujisawa_matsumoto .main_visual .interview h1 {
width: auto;
top: auto;
left: 60px;
bottom: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fujisawa_matsumoto .main_visual .interview.fujisawa_matsumoto_matsumoto h1 {
left: auto;
right: 60px;
}
.hirano_ishida .main_visual .interview h1 {
width: auto;
top: auto;
left: 60px;
bottom: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hirano_ishida .main_visual .interview.hirano_ishida_ishida h1 {
left: auto;
right: 60px;
}
.nakazawa .main_visual .interview h1 .ctl {
display: none;
}
.sawada_mishima .main_visual .interview h1 {
width: auto;
top: auto;
left: 60px;
bottom: 70px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sawada_mishima .main_visual .interview.sawada_mishima_mishima h1 {
left: auto;
right: 60px;
}
.main_visual .interview h1 .name {
font-size: 40px;
}
.main_visual .process h1 {
width: 100%;
padding: 0 50px;
color: #fff;
font-size: 24px;
text-shadow: 0 8px 8px rgba(0,0,0,.5);
text-align: center;
line-height: 1.7;
}
.main_visual .process h1 .name {
font-size: 40px;
}
.main_visual .process h1 .tit {
font-size: 40px;
font-style: italic;
}
@media screen and (max-width:1400px) {
.main_visual .outer.interview.fujisawa_matsumoto_fujisawa {
background-position: 65% center;
}
.main_visual .outer.interview.fujisawa_matsumoto_matsumoto {
background-position: 25% center;
}
}
@media screen and (max-width:1150px) and (orientation: portrait) {
.main_visual .outer.interview.totani {
background-position: 65% center;
}
.main_visual .outer.interview.nakazawa {
background-position: 45% center;
}
.main_visual .outer.interview.hirano_ishida_hirano {
background-position: 60% center;
}
.main_visual .outer.interview.hirano_ishida_ishida {
background-position: 35% center;
}
.main_visual .outer.interview.kojima {
background-position: 57% center;
}
.main_visual .outer.interview.sawada_mishima_sawada {
background-position: 45% center;
}
}
@media screen and (max-width:1500px) {
.nakazawa .main_visual .interview h1 {
width: 80%;
}
.yamada_kudo .main_visual .interview h1 .name {
display: block;
margin-top: 10px;
}
.mitani_kobayashi .main_visual .interview h1 .name,
.fujisawa_matsumoto .main_visual .interview h1 .name,
.hirano_ishida .main_visual .interview h1 .name,
.sawada_mishima .main_visual .interview h1 .name {
display: block;
margin-top: 10px;
}
}
@media screen and (max-width:1400px) {
.ito .main_visual .interview h1 {
line-height: 1.4;
}
.ito .main_visual .interview h1 .ctl {
display: inline;
}
}
@media screen and (max-width:1150px) {
.totani .main_visual .interview h1 {
width: 90%;
}
.main_visual .slide span.slide_kojima {
background-position: 75% center;
}
}
@media screen and (max-width:1024px) {
.sasagawa .main_visual .interview h1,
.kuroki .main_visual .interview h1,
.tamura .main_visual .interview h1,
.nakazawa .main_visual .interview h1,
.yokosawa .main_visual .interview h1,
.kosugi .main_visual .interview h1 {
width: 85%;
}
.kubo .main_visual .interview h1 {
top: 60%;
width: 85%;
}
.kojima .main_visual .interview h1 {
width: 90%;
top: 50%;
bottom: auto;
}
.nakazawa .main_visual .interview h1 .ctl {
display: inline;
}
.yamada_kudo .main_visual .interview h1 {
left: 30px;
bottom: 40px;
}
.yamada_kudo .main_visual .interview.yamada_kudo_kudo h1 {
right: 30px;
}
.mitani_kobayashi .main_visual .interview h1,
.fujisawa_matsumoto .main_visual .interview h1,
.hirano_ishida .main_visual .interview h1,
.sawada_mishima .main_visual .interview h1 {
left: 30px;
bottom: 40px;
}
.mitani_kobayashi .main_visual .interview.mitani_kobayashi_kobayashi h1,
.fujisawa_matsumoto .main_visual .interview.fujisawa_matsumoto_matsumoto h1,
.hirano_ishida .main_visual .interview.hirano_ishida_ishida h1,
.sawada_mishima .main_visual .interview.sawada_mishima_mishima h1 {
right: 30px;
}
.main_visual .outer.interview.ito {
background-position: 35% center;
}
.ito .main_visual .interview h1 {
top: 70%;
}
}
@media screen and (max-width:767px) {
.main_visual .outer.interview.sasagawa {
background: url(../sasagawa/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.sasagawa {
background: url(../sasagawa/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kuroki {
background: url(../kuroki/img/interview_bg_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .outer.process.kuroki {
background: url(../kuroki/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.ito {
background: url(../ito/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.ito {
background: url(../ito/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.totani {
background: url(../totani/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.totani {
background: url(../totani/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.tamura {
background: url(../tamura/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.tamura {
background: url(../tamura/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.nakazawa {
background: url(../nakazawa/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.nakazawa {
background: url(../nakazawa/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yokosawa {
background: url(../yokosawa/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.process.yokosawa {
background: url(../yokosawa/img/process_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kosugi {
background: url(../kosugi/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kubo {
background: url(../kubo/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yamada_kudo_yamada {
background: url(../yamada_kudo/img/interview_bg_yamada_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.yamada_kudo_kudo {
background: url(../yamada_kudo/img/interview_bg_kudo_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sakai {
background: url(../sakai/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.mitani_kobayashi_mitani {
background: url(../mitani_kobayashi/img/interview_bg_mitani_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.mitani_kobayashi_kobayashi {
background: url(../mitani_kobayashi/img/interview_bg_kobayashi_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.fujisawa_matsumoto_fujisawa {
background: url(../fujisawa_matsumoto/img/interview_bg_fujisawa_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.fujisawa_matsumoto_matsumoto {
background: url(../fujisawa_matsumoto/img/interview_bg_matsumoto_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.hirano_ishida_hirano {
background: url(../hirano_ishida/img/interview_bg_hirano_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.hirano_ishida_ishida {
background: url(../hirano_ishida/img/interview_bg_ishida_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.kojima {
background: url(../kojima/img/interview_bg_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sawada_mishima_sawada {
background: url(../sawada_mishima/img/interview_bg_sawada_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .outer.interview.sawada_mishima_mishima {
background: url(../sawada_mishima/img/interview_bg_mishima_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_sawada_mishima {
background: url(../img/main_visual_sawada_mishima_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_kojima {
background: url(../img/main_visual_kojima_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_hirano_ishida {
background: url(../img/main_visual_hirano_ishida_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_fujisawa_matsumoto {
background: url(../img/main_visual_fujisawa_matsumoto_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_mitani_kobayashi {
background: url(../img/main_visual_mitani_kobayashi_sp.jpg) center center no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_sakai {
background: url(../img/main_visual_sakai_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_kuroki {
background: url(../img/main_visual_kuroki_sp.jpg) center 7% no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_ito {
background: url(../img/main_visual_ito_sp.jpg) center 7% no-repeat;
background-size: cover;
}
.main_visual .slide span.slide_sasagawa {
background: url(../img/main_visual_sasagawa_sp.jpg) center 7% no-repeat;
background-size: cover;
}
.main_visual .slide span.slide07 {
background: url(../img/main_visual_slide07_sp.jpg) center 7% no-repeat;
background-size: cover;
}
.main_visual .slide span.slide06 {
background: url(../img/main_visual_slide06_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide05 {
background: url(../img/main_visual_slide05_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide04 {
background: url(../img/main_visual_slide04_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide03 {
background: url(../img/main_visual_slide03_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide02 {
background: url(../img/main_visual_slide02_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual .slide span.slide01 {
background: url(../img/main_visual_slide01_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.main_visual h1 {
width: 55%;
top: auto;
bottom: 20%;
z-index: 20;
line-height: 1;
-webkit-transform: translate3d(-50%, -0, 0);
transform: translate3d(-50%, 0, 0);
}
.main_visual .interview h1 {
position: absolute;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
padding: 20px 15px !important;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #fff !important;
font-size: 16px;
text-shadow: 0 8px 8px rgba(0,0,0,.5) !important;
text-align: left !important;
background-color: rgba(0,0,0,.75);
}
.ito .main_visual .interview h1 {
font-size: 14px;
}
.yamada_kudo .main_visual .interview h1 {
font-size: 12px;
}
.mitani_kobayashi .main_visual .interview h1 {
font-size: 12px;
}
.main_visual .interview h1 .ctl {
display: none !important;
}
.main_visual .interview h1 .name {
font-size: 24px;
}
.yamada_kudo .main_visual .interview h1 .name {
font-size: 18px;
}
.mitani_kobayashi .main_visual .interview h1 .name,
.fujisawa_matsumoto .main_visual .interview h1 .name,
.sawada_mishima .main_visual .interview h1 .name {
font-size: 18px;
}
.main_visual .process h1 {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 15px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 12px;
text-shadow: 0 8px 8px rgba(0,0,0,.5);
background-color: rgba(0,0,0,.75);
}
.main_visual .process h1 .name {
font-size: 18px;
}
.main_visual .process h1 .tit {
display: block;
margin-top: 10px;
font-size: 22px;
line-height: 1.4;
}
}
@media screen and (max-width:320px) {
.yamada_kudo .main_visual .interview h1 {
font-size: 11px;
}
.yamada_kudo .main_visual .interview h1 .name {
font-size: 16px;
}
}
/* /////////////////////////////////////////////
index
///////////////////////////////////////////// */
/* artisans ////////////////////////////////////////////////////*/
.artisans {
background: #093042 url(../img/artisans_bg.png);
}
.artisans .outer {
padding: 0;
background: url(../img/artisans_light_bg.png) center 0 no-repeat;
}
.artisans .inner {
padding: 200px 0;
}
.artisans .inner > .tit,
.artisans .txt {
padding: 0 50px;
}
.artisans .inner > .tit {
margin-bottom: 50px;
font-size: 30px;
text-align: center;
}
.artisans .txt {
margin-bottom: 110px;
font-size: 18px;
text-align: center;
line-height: 2;
}
.artisans .carousel {
display: none;
}
.artisans .carousel.slick-initialized {
display: block;
}
.artisans .carousel .slick-slide {
width: 312px;
padding: 0 15px;
}
.artisans .carousel .card {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: (auto)[3];
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
}
.artisans .carousel .slick-slide .card:hover {
-webkit-opacity: 1 !important;
opacity: 1 !important;
}
.artisans .carousel a:hover {
text-decoration: none !important;
}
.artisans .carousel .tit_name {
-ms-grid-column: 1;
-ms-grid-row: 3;
grid-column: 1 / 2;
grid-row: 3 / 4;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.artisans .carousel .tit_name > div {
flex: 1;
}
.artisans .carousel .card .tit {
font-size: 14px;
text-align: center;
}
.artisans .carousel .card.yamada_kudo .tit {
font-size: 12px;
text-align: center;
}
.artisans .carousel .card .tit .name {
display: inline-block;
margin-top: 3px;
font-size: 20px;
}
.artisans .carousel .num {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1 / 2;
grid-row: 1 / 2;
margin-bottom: 25px;
font-size: 16px;
text-align: center;
line-height: 1;
}
.artisans .carousel .img {
position: relative;
width: 100%;
-ms-grid-column: 1;
-ms-grid-row: 2;
grid-column: 1 / 2;
grid-row: 2 / 3;
margin-bottom: 20px;
border: #fff 1px solid;
}
.artisans .carousel .img::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 0 10px rgba(255,255,255,.5) inset;
z-index: 2;
-webkit-transition: box-shadow .8s ease-out;
transition: box-shadow .8s ease-out;
}
.artisans .carousel .card:hover .img::after {
box-shadow: 0 0 0 10px rgba(255,255,255,1) inset;
}
.artisans .carousel .img img {
width: 100%;
position: relative;
z-index: 1;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.artisans .carousel .card:hover .img img {
-webkit-opacity: .7;
opacity: .7;
}
.artisans .slick-arrow {
display: block !important;
position: absolute;
top: 42%;
left: 0;
right: auto;
display: inline-block;
width: 100px;
height: 80px;
line-height: 1;
cursor: pointer;
vertical-align: middle;
-webkit-transition: all .6s ease-out;
transition: all .6s ease-out;
z-index: 1001;
}
.artisans .slick-arrow.slick-next {
left: auto;
right: 0;
}
.artisans .slick-arrow:hover {
-webkit-opacity: .6;
opacity: .6;
}
.artisans .slick-arrow.slick-prev:before,
.artisans .slick-arrow.slick-next:before {
display: none;
}
.artisans .slick-arrow:after {
content: '';
position: absolute;
top: 0;
left: 40px;
display: inline-block;
width: 42px;
height: 42px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
-webkit-transform: translateY(18px) rotate(-45deg);
transform: translateY(18px) rotate(-45deg);
transform-origin: center center;
}
.artisans .slick-arrow.slick-next:after {
left: auto;
right: 40px;
-webkit-transform: translateY(18px) rotate(135deg);
transform: translateY(18px) rotate(135deg);
}
@media screen and (max-width: 1470px) {
/*
.artisans .carousel .card .tit {
font-size: 18px;
}
.artisans .carousel .card .tit .name {
font-size: 22px;
}
.artisans .carousel .img {
margin-bottom: 20px;
}
*/
}
@media screen and (max-width: 1360px) {
.artisans .txt {
margin-bottom: 95px;
}
}
@media screen and (max-width: 1024px) {
.artisans .inner {
padding: 120px 0;
}
.artisans .txt {
margin-bottom: 80px;
}
.artisans .carousel .slick-slide {
padding: 0 10px;
}
}
@media screen and (max-width: 900px) {
.artisans .carousel .slick-slide {
-webkit-opacity: .4;
opacity: .4;
-webkit-transition: all .8s ease-out .2s;
transition: all .8s ease-out .2s;
}
.artisans .carousel .slick-slide.slick-current {
-webkit-opacity: 1;
opacity: 1;
}
}
@media screen and (max-width: 767px) {
.artisans .outer {
background-size: 200% auto;
}
.artisans .inner {
padding: 80px 0;
}
.artisans .inner > .tit,
.artisans .txt {
padding: 0 20px;
}
.artisans .inner > .tit {
margin-bottom: 25px;
font-size: 24px;
}
.artisans .txt {
margin-bottom: 50px;
font-size: 15px;
line-height: 1.8;
}
.artisans .carousel .slick-slide {
width: 210px;
padding: 0 5px;
}
.artisans .carousel .card {
width: 200px;
}
.artisans .carousel .img {
background-color: #000;
}
.artisans .carousel .num {
margin-bottom: 10px;
font-size: 14px;
}
.artisans .carousel .img {
margin-bottom: 10px;
}
.artisans .carousel .img::after,
.artisans .carousel .card:hover .img::after {
box-shadow: 0 0 0 5px rgba(255,255,255,.5) inset;
}
.artisans .carousel .card:hover .img img {
-webkit-opacity: 1;
opacity: 1;
}
.artisans .carousel .card .tit {
font-size: 11px !important;
}
.artisans .carousel .card .tit .name {
margin-top: 3px;
font-size: 14px;
}
.artisans .slick-arrow {
top: 43%;
width: 60px;
height: 60px;
}
.artisans .slick-arrow:after {
position: absolute;
top: 0;
left: 25px;
width: 28px;
height: 28px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
-webkit-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
transform-origin: center center;
}
.artisans .slick-arrow.slick-next:after {
left: auto;
right: 25px;
-webkit-transform: translateY(15px) rotate(135deg);
transform: translateY(15px) rotate(135deg);
}
.artisans .selector {
width: 57px;
height: 42px;
}
.artisans .selector.left-selector {
left: 0;
padding-left: 15px;
}
.artisans .selector.right-selector {
right: 0;
padding-right: 15px;
}
.artisans .selector span {
width: 29px;
height: 29px;
}
}
@media screen and (max-width: 320px) {
.artisans .carousel .card .tit {
font-size: 10px !important;
}
.artisans .carousel .card .tit .name {
font-size: 12px;
}
.artisans .slick-arrow {
width: 50px;
}
.artisans .slick-arrow:after {
left: 15px;
}
.artisans .slick-arrow.slick-next:after {
right: 15px;
}
}
/* photo_box ////////////////////////////////////////////////////*/
.photo_box {
width: 100%;
max-height: 400px;
position: relative;
overflow: hidden;
text-align: center;
background-color: #000;
}
.interview .photo_box {
max-height: 500px;
}
.sawada_mishima.interview .photo_box.img2 {
max-height: 750px;
background-color: #78afe5;
}
.photo_box::before {
content:"";
display: block;
padding-top: 25%;
}
.interview .photo_box::before {
padding-top: 30%;
}
.sawada_mishima.interview .photo_box.img2::before {
padding-top: 40%;
}
.photo_box::after {
position: absolute;
content: '';
width: 150px;
height: 150px;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
background: url(../img/photo_box_illust.png) 0 0 no-repeat;
background-size: 150px 150px;
z-index: 3;
}
.interview .photo_box::after {
display: none;
}
.photo_box .txt {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
z-index: 4;
font-size: 16px;
}
.photo_box > img {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 50%;
max-width: inherit;
width: 100%;
vertical-align: top;
z-index: 2;
}
.kosugi .photo_box.interview.img1 .inner {
position: absolute;
width: 100%;
top: 0;
left: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.kosugi .photo_box.interview.img1 .inner div {
width: 33.33333333%;
}
.kosugi .photo_box.interview.img1 .inner div img {
max-width: inherit;
width: 100%;
-webkit-transform: translate3d(0, -15%, 0) !important;
transform: translate3d(0, -15%, 0) !important;
}
.photo_box.fujisawa_matsumoto img,
.photo_box.sawada_mishima img {
margin-top: -12%;
}
.photo_box.mitani_kobayashi img {
margin-top: -18%;
}
.photo_box.sakai img,
.photo_box.kojima img {
margin-top: -7%;
}
.photo_box.yamada_kudo img {
margin-top: -10%;
}
.photo_box.kubo img {
margin-top: -7%;
}
.photo_box.kosugi img {
margin-top: -10%;
}
.photo_box.kuroki img {
margin-top: -15%;
}
.photo_box.ito img {
margin-top: -13%;
}
.photo_box.yokosawa img {
margin-top: -8%;
}
.photo_box.nakazawa img {
margin-top: -25%;
}
.photo_box.tamura img {
margin-top: -22%;
}
.photo_box.totani img {
margin-top: -5%;
}
.photo_box.sasagawa img {
margin-top: -7%;
}
.photo_box.interview img {
margin-top: -10%;
}
.kosugi .photo_box.interview.img2 img {
width: 100% !important;
}
.yamada_kudo .photo_box.img2 img {
margin-top: -13%;
width: 117%;
}
.yamada_kudo .photo_box.img3 img {
width: 100%;
}
.hirano_ishida .photo_box.img1 img {
width: 100%;
margin-top: -8%;
}
.sawada_mishima .photo_box.img2 img {
margin-top: -6%;
}
@media screen and (min-width: 2000px) {
.photo_box img {
width: 100%;
}
.kojima .photo_box.img1 img {
width: 85%;
}
.fujisawa_matsumoto .photo_box img {
margin-top: -13%;
}
.sawada_mishima .photo_box img {
margin-top: -13%;
}
.sawada_mishima .photo_box.img2 img {
margin-top: -9%;
}
}
@media screen and (max-width: 1460px) {
.kubo .photo_box img {
width: 120%;
}
.sakai .photo_box.img3 img {
width: 115%;
margin-top: -8%;
}
}
@media screen and (max-width: 1400px) {
.yamada_kudo .photo_box.img1 img {
margin-top: -13%;
}
.sakai .photo_box.img1 img,
.kojima .photo_box.img1 img {
width: 125%;
}
.mitani_kobayashi .photo_box.img4 img {
width: 120%;
}
.fujisawa_matsumoto .photo_box.img2 img {
width: 110%;
}
.photo_box.fujisawa_matsumoto img {
margin-top: -10%;
}
.photo_box.hirano_ishida img,
.photo_box.kojima img {
width: 110%;
}
}
@media screen and (max-width: 1300px) {
.yamada_kudo .photo_box img {
width: 120%;
margin-top: -8%;
}
.yamada_kudo .photo_box.img1 img {
margin-top: -10%;
}
.yamada_kudo .photo_box.img2 img {
width: 135%;
margin-top: -15%;
}
.yamada_kudo .photo_box.img3 img,
.hirano_ishida .photo_box.img1 img {
width: 100%;
margin-top: -4%;
}
.mitani_kobayashi .photo_box.img3 img {
width: 115%;
}
.mitani_kobayashi .photo_box.img1 img,
.mitani_kobayashi .photo_box.img2 img {
margin-top: -5%;
}
.fujisawa_matsumoto .photo_box.img1 img {
margin-top: -8%;
}
.fujisawa_matsumoto .photo_box.img2 img {
margin-top: -12%;
}
}
@media screen and (max-width: 1024px) {
.photo_box::before {
padding-top: 30%;
}
.interview .photo_box::before {
padding-top: 35%;
}
.photo_box img,
.kubo .photo_box img {
margin-top: 0;
}
.photo_box.totani img {
margin-top: 0;
}
.tablet .photo_box.totani img {
margin-top: -12%;
}
.sakai .photo_box.img1 img,
.kojima .photo_box.img1 img {
margin-top: -7%;
}
.kosugi .photo_box.interview.img2 img {
left: 50%;
}
.yamada_kudo .photo_box img {
margin-top: -5%;
}
.yamada_kudo .photo_box.img2 img {
width: 140%;
}
.sakai .photo_box.img3 img {
width: 125%;
margin-top: -5%;
}
.mitani_kobayashi .photo_box.img3 img,
.mitani_kobayashi .photo_box.img4 img {
margin-top: -5%;
}
.fujisawa_matsumoto .photo_box.img2 img {
margin-top: -8%;
}
.sawada_mishima .photo_box.img1 img,
.sawada_mishima .photo_box.img3 img {
margin-top: -6%;
}
.sawada_mishima .photo_box.img2 img {
margin-top: -2%;
}
}
/* tablet */
.tablet .photo_box img {
position: absolute;
left: 0;
bottom: 0;
max-width: 100%;
width: auto;
-webkit-transform: translate3d(0, -5%, 0px) !important;
transform: translate3d(0, -5%, 0px) !important;
}
.tablet .photo_box.totani img {
-webkit-transform: translate3d(0, 5%, 0px) !important;
transform: translate3d(0, 5%, 0px) !important;
}
.tablet .interview .photo_box img {
left: 50%;
max-width: inherit;
width: 120%;
-webkit-transform: translate3d(-50%, -7%, 0px) !important;
transform: translate3d(-50%, -7%, 0px) !important;
}
.tablet .interview.kosugi .photo_box.img1 img {
position: relative;
left: 0;
}
.tablet .interview.kubo .photo_box img {
margin-top: -10%;
}
.tablet .interview.yamada_kudo .photo_box img {
margin-top: -10% !important;
}
.tablet .interview.yamada_kudo .photo_box.img1 img {
margin-top: -7.5% !important;
}
.tablet .interview.mitani_kobayashi .photo_box img {
margin-top: -8% !important;
width: 100%;
}
.tablet .interview.fujisawa_matsumoto .photo_box.img1 img {
margin-top: -7% !important;
width: 100%;
}
.tablet .interview.fujisawa_matsumoto .photo_box.img2 img {
margin-top: -9% !important;
width: 100%;
}
.tablet .interview.hirano_ishida .photo_box img {
margin-top: -8% !important;
}
.tablet .interview.kojima .photo_box.img1 img {
width: 100%;
}
.tablet .interview.sawada_mishima .photo_box.img1 img {
width: 110%;
margin-top: -9% !important;
}
.tablet .interview.sawada_mishima .photo_box.img2 img {
width: 100%;
margin-top: -4% !important;
}
.tablet .interview.sawada_mishima .photo_box.img3 img {
width: 120%;
margin-top: -12% !important;
}
@media screen and (max-width: 767px) {
.photo_box,
.interview .photo_box {
height: auto;
}
.photo_box::before,
.interview .photo_box::before {
display: none;
}
.photo_box img,
.interview .photo_box img,
.kosugi .photo_box.interview.img2 img,
.yamada_kudo .photo_box.img2 img,
.yamada_kudo .photo_box.img3 img {
width: 100%;
height: auto;
max-width: 100%;
position: relative;
left: auto;
margin-top: 0 !important;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.photo_box::after {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: url(../img/photo_box_illust.png) 0 0 no-repeat;
background-size: 100px 100px;
z-index: 3;
}
.photo_box .txt {
font-size: 13px;
}
}
/* story ////////////////////////////////////////////////////*/
.story {
background-color: #f0f0f0;
color: #666;
}
.story .outer {
padding-top: 100px;
}
.story .common_tit {
margin-bottom: 45px;
padding: 0 50px;
font-size: 44px;
text-align: center;
}
.story .inner {
max-width: 1260px;
margin: auto;
padding: 0 50px 220px;
display: -webkit-flex;
display: flex;
/*
-webkit-align-items: center;
align-items: center;
*/
background: url(../img/story_bg_right.png) center 0 no-repeat;
}
.story .inner.reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
background: url(../img/story_bg_left.png) center 0 no-repeat;
background-size: 100% auto;
}
.story .inner .img_area {
width: 50%;
}
.story .inner .txt_area {
width: 50%;
padding: 0 100px;
}
.story .name {
margin-bottom: 20px;
font-size: 24px;
}
.story .name .small {
font-size: 20px;
}
.story .lead {
margin-top: 40px;
margin-bottom: 50px;
font-size: 16px;
line-height: 1.8;
}
.story .link {
margin-bottom: 50px;
}
.story .link:last-of-type {
margin-bottom: 0;
}
.story .link a {
display: block;
position: relative;
padding: 0 20px 10px 0;
font-size: 16px;
color: #105779;
text-decoration: none;
line-height: 1.4;
}
.story .link a span {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 95%;
height: 1px;
background-color: #105779;
-webkit-animation: index_link_line 3s infinite;
-ms-animation: index_link_line 3s infinite;
animation: index_link_line 3s infinite;
}
.story .link a span::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
border-top: 1px solid #105779;
border-right: 1px solid #105779;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: right top;
transform-origin: right top;
}
@-ms-keyframes index_link_line {
5% {
width: 95%;
}
45% {
width: 100%;
}
55% {
width: 100%;
}
95% {
width: 95%;
}
}
@-webkit-keyframes index_link_line {
5% {
width: 95%;
}
45% {
width: 100%;
}
55% {
width: 100%;
}
95% {
width: 95%;
}
}
@keyframes index_link_line {
5% {
width: 95%;
}
45% {
width: 100%;
}
55% {
width: 100%;
}
95% {
width: 95%;
}
}
@media screen and (max-width: 1240px) {
.story .tit {
margin-bottom: 40px;
font-size: 45px;
}
.story .common_tit {
margin-bottom: 40px;
font-size: 40px;
}
.story .inner {
-webkit-align-items: flex-start;
align-items: flex-start;
padding-bottom: 140px;
background-size: 100% auto;
}
.story .inner .txt_area {
padding: 0 50px;
}
}
@media screen and (max-width: 1024px) {
.story .common_tit {
margin-bottom: 35px;
font-size: 40px;
}
.story .inner {
padding-bottom: 120px;
}
.story .inner .txt_area {
padding: 0 0 0 50px;
}
.story .inner.reverse .txt_area {
padding: 0 50px 0 0;
}
.story .name {
font-size: 19px;
}
.story .name .small {
font-size: 15px;
}
.story .lead {
margin-top: 30px;
margin-bottom: 40px;
}
.story .link {
margin-bottom: 30px;
}
.story .link a {
font-size: 16px;
}
}
@media screen and (max-width: 960px) {
.story .lead {
font-size: 15px;
}
.story .link a {
font-size: 15px;
}
}
@media screen and (max-width: 900px) {
.story .common_tit {
font-size: 28px;
}
.story .name {
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
.story .outer {
padding-top: 30px;
}
.story .common_tit {
margin-bottom: 30px;
padding: 0 20px;
font-size: 24px;
}
.story .inner {
display: block !important;
position: relative;
padding: 0 20px 50px;
background: none !important;
}
.story .inner .img_area {
width: 100%;
padding: 0;
}
.story .inner .txt_area {
width: 100%;
padding: 0;
}
.story .inner.reverse .txt_area {
padding: 0;
}
.story .name {
margin: 10px 0 15px;
font-size: 17px;
}
.story .name .small {
font-size: 13px;
}
.story .lead {
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
}
.story .link {
margin-bottom: 20px;
}
.story .link a {
padding: 10px 20px 10px 0;
font-size: 14px;
}
.story .link a span::after {
width: 20px;
height: 20px;
}
}
/* /////////////////////////////////////////////
interview
///////////////////////////////////////////// */
#main.interview {
background-color: #f0f0f0;
}
/* intro ////////////////////////////////////////////////////*/
.interview .intro .outer {
padding: 145px 50px 175px;
color: #000;
}
.interview .intro .outer .lead {
max-width: 1200px;
margin: 0 auto 90px;
line-height: 1.8;
}
.interview .intro .inner {
position: relative;
max-width: 1400px;
margin: 0 auto 100px;
background-image: url(../tamura/img/interview_main.png);
background-position: 100px 0;
background-repeat: no-repeat;
background-size: 100% auto;
}
.interview.ito .intro .inner {
background-image: url(../ito/img/interview_main.png);
}
.interview.kuroki .intro .inner {
background-image: url(../kuroki/img/interview_main.png);
}
.interview.sasagawa .intro .inner {
background-image: url(../sasagawa/img/interview_main.png);
}
.interview.totani .intro .inner {
background-image: url(../totani/img/interview_main.png);
}
.interview.tamura .intro .inner {
background-image: url(../tamura/img/interview_main.png);
}
.interview.nakazawa .intro .inner {
background-image: url(../nakazawa/img/interview_main.png);
}
.interview.yokosawa .intro .inner {
background-image: url(../yokosawa/img/interview_main.png);
}
.interview.kosugi .intro .inner {
background-image: url(../kosugi/img/interview_main.png);
}
.interview.kubo .intro .inner {
background-image: url(../kubo/img/interview_main.png);
}
.interview.sakai .intro .inner {
background-image: url(../sakai/img/interview_main.png);
}
.interview.mitani_kobayashi .intro .inner {
background-image: url(../mitani_kobayashi/img/interview_main.png);
}
.interview.fujisawa_matsumoto .intro .inner {
background-image: url(../fujisawa_matsumoto/img/interview_main.png);
}
.interview.hirano_ishida .intro .inner {
background-image: url(../hirano_ishida/img/interview_main.png);
}
.interview.kojima .intro .inner {
background-image: url(../kojima/img/interview_main.png);
}
.interview.sawada_mishima .intro .inner {
background-image: url(../sawada_mishima/img/interview_main.png);
}
.interview.hirano_ishida .inner_intro {
max-width: 1200px;
margin: 0 auto 120px;
}
.interview.hirano_ishida .inner_intro .common_tit {
margin-bottom: 50px;
font-size: 40px;
text-align: center;
line-height: 1.4;
}
.interview.hirano_ishida .inner_intro p {
margin-bottom: 2em;
font-size: 16px;
line-height: 2;
}
.interview.hirano_ishida .inner_intro p:last-of-type {
margin-bottom: 0;
}
.interview .intro .inner::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
-webkit-transition: opacity .6s ease-out;
transition: opacity .6s ease-out;
}
.interview .intro .inner.scrollin::before {
-webkit-opacity: 0;
opacity: 0;
}
.interview .intro .txt_area {
position: relative;
width: 57.145%;
margin-left: auto;
}
.interview .intro .txt_area .common_tit {
padding: 170px 0 180px 10%;
font-size: 50px;
text-align: center;
line-height: 1.4;
}
.interview.kuroki .intro .txt_area .common_tit,
.interview.ito .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit {
font-size: 38px;
}
.interview.fujisawa_matsumoto .intro .txt_area .common_tit,
.interview.hirano_ishida .intro .txt_area .common_tit,
.interview.sawada_mishima .intro .txt_area .common_tit {
font-size: 36px;
}
.interview.sawada_mishima .intro .txt_area .common_tit span {
margin-top: .5em;
display: block;
font-size: 70%;
}
.interview.mitani_kobayashi .intro .txt_area .common_tit,
.interview.sakai .intro .txt_area .common_tit {
font-size: 32px;
}
.interview.kubo .intro .txt_area .common_tit {
font-size: 42px;
}
.interview.nakazawa .intro .txt_area .common_tit,
.interview.kosugi .intro .txt_area .common_tit {
padding: 140px 0 150px 15%;
}
.interview.nakazawa .intro .txt_area .common_tit,
.interview.kosugi .intro .txt_area .common_tit {
font-size: 44px;
}
.interview .intro .txt_area .common_tit .sub {
font-size: 28px;
}
.interview .intro .txt_area .lead {
padding: 30px;
background-color: rgba(240,240,240,.75);
}
.interview .intro .txt_area .lead p {
margin-bottom: 2em;
font-size: 16px;
line-height: 2;
}
.interview .intro .txt_area .lead p:last-of-type {
margin-bottom: 0;
}
.interview .intro .txt_area a.txt_link {
color: #000;
text-decoration: underline;
}
.interview .intro .txt_area a.txt_link:hover {
text-decoration: none;
}
.interview.ito .intro .txt_area .lead .about_mems {
margin-top: 2.5em;
padding: 30px;
border: 2px solid #ababab;
line-height: 1.6;
}
.interview.ito .intro .txt_area .lead .about_mems .tit {
margin-bottom: 15px;
font-size: 24px;
}
.interview.ito .intro .txt_area .lead .about_mems p {
font-size: 14px;
}
.interview .intro .profile {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
max-width: 1014px;
margin: 0 auto 50px;
padding: 5px;
border: 2px solid #ababab;
border-radius: 2px;
}
.interview .intro .profile:nth-of-type(odd) {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.interview.hirano_ishida .intro .profile:nth-of-type(odd) {
-webkit-flex-direction: row;
flex-direction: row;
}
.interview.hirano_ishida .intro .profile:nth-of-type(even) {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.interview .intro .profile:last-of-type {
margin-bottom: 0;
}
.interview .intro .profile .img {
width: 40%;
}
.interview .intro .profile .txt {
width: 60%;
padding: 0 60px;
font-size: 15px;
line-height: 1.8;
}
.interview.nakazawa .intro .profile .txt {
padding: 0 30px;
font-size: 14px;
line-height: 1.7;
}
.interview .intro .profile .txt .tit {
margin-bottom: 20px;
color: #666;
font-size: 24px;
text-shadow: 0 8px 8px rgba(0,0,0,.2);
text-align: center;
}
.interview.kosugi .intro .profile .txt .tit {
margin-bottom: 40px;
}
.interview .intro .profile .txt .tit .name {
font-size: 32px;
}
@media screen and (max-width: 1500px) {
.interview.mitani_kobayashi .intro .txt_area .common_tit {
font-size: 26px;
}
}
@media screen and (max-width: 1400px) {
.interview.kuroki .intro .txt_area .common_tit,
.interview.ito .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit {
font-size: 34px;
}
.interview.sakai .intro .txt_area .common_tit {
font-size: 28px;
}
.interview.fujisawa_matsumoto .intro .txt_area .common_tit,
.interview.hirano_ishida .intro .txt_area .common_tit,
.interview.sawada_mishima .intro .txt_area .common_tit {
font-size: 27px;
}
.interview.kosugi .intro .txt_area .common_tit,
.interview.kubo .intro .txt_area .common_tit {
font-size: 40px;
}
.interview.kojima .intro .txt_area .common_tit {
font-size: 46px;
}
}
@media screen and (max-width: 1300px) {
.interview.hirano_ishida .inner_intro .common_tit {
margin-bottom: 40px;
font-size: 36px;
}
.interview .intro .inner {
background-position: 0 0;
}
.interview .intro .txt_area {
width: 65%;
}
.interview .intro .txt_area .common_tit {
padding: 13% 0 15% 10% !important;
}
.interview.kosugi .intro .txt_area .common_tit,
.interview.kubo .intro .txt_area .common_tit {
font-size: 36px;
}
}
@media screen and (max-width: 1140px) {
.interview .intro .profile .img p {
overflow: hidden;
}
.interview .intro .profile .img p img {
max-width: inherit;
width: auto;
height: 100%;
}
.interview .intro .profile .txt,
.interview.nakazawa .intro .profile .txt {
padding: 20px;
line-height: 1.666;
}
.interview.kosugi .intro .profile .txt {
padding: 0 50px;
line-height: 1.8;
}
.interview .intro .profile .txt .tit {
margin-bottom: 20px;
font-size: 18px;
}
.interview.kuroki .intro .txt_area .common_tit,
.interview.ito .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit {
font-size: 30px;
}
.interview.sakai .intro .txt_area .common_tit {
font-size: 24px;
}
.interview.kosugi .intro .profile .txt .tit {
font-size: 24px;
}
.interview .intro .profile .txt .tit .name {
font-size: 28px;
}
.interview.kosugi .intro .profile .txt .tit .name {
font-size: 32px;
}
.interview.kojima .intro .txt_area .common_tit {
font-size: 42px;
}
}
@media screen and (max-width: 1024px) {
.interview.hirano_ishida .inner_intro .common_tit {
margin-bottom: 35px;
font-size: 30px;
}
.interview .intro .outer {
padding: 95px 50px 125px;
}
.interview .intro .outer .lead {
margin-bottom: 50px;
}
.interview .intro .profile {
display: block;
padding: 30px;
}
.interview .intro .profile .img {
width: 100%;
text-align: center;
}
.interview .intro .profile .img p img {
width: 40%;
height: auto;
}
.interview .intro .profile .txt {
width: 100%;
padding: 20px 0 0 !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
.interview .intro .txt_area .common_tit {
padding: 12% 0 12% 10% !important;
font-size: 38px;
}
.interview .intro .txt_area .common_tit .sub {
font-size: 18px;
}
.interview.kuroki .intro .txt_area .common_tit,
.interview.ito .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit {
font-size: 30px;
}
.interview.nakazawa .intro .txt_area .common_tit {
font-size: 34px;
}
.interview.sakai .intro .txt_area .common_tit {
font-size: 20px;
}
.interview.kosugi .intro .txt_area .common_tit {
font-size: 30px;
}
.interview.mitani_kobayashi .intro .txt_area .common_tit {
font-size: 22px;
}
.interview.kojima .intro .txt_area .common_tit {
font-size: 36px;
}
.interview.kosugi .intro .profile .txt .tit {
font-size: 18px;
}
.interview.kosugi .intro .profile .txt .tit .name {
font-size: 28px;
}
}
@media screen and (max-width: 900px) {
.interview.kuroki .intro .txt_area .common_tit,
.interview.ito .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit {
font-size: 22px;
}
.interview.fujisawa_matsumoto .intro .txt_area .common_tit,
.interview.hirano_ishida .intro .txt_area .common_tit {
font-size: 20px;
}
.interview.sawada_mishima .intro .txt_area .common_tit {
font-size: 23px;
}
.interview.sakai .intro .txt_area .common_tit {
font-size: 18px;
}
.interview.nakazawa .intro .txt_area .common_tit,
.interview.kosugi .intro .txt_area .common_tit,
.interview.kubo .intro .txt_area .common_tit {
font-size: 26px;
}
.interview.mitani_kobayashi .intro .txt_area .common_tit {
font-size: 18px;
}
.interview.kojima .intro .txt_area .common_tit {
font-size: 30px;
}
.interview .intro .profile .img p img {
width: 50%;
}
}
@media screen and (max-width: 767px) {
.interview .intro .outer {
padding: 60px 20px;
}
.interview .intro .outer .lead {
margin-bottom: 30px;
font-size: 14px;
}
.interview .intro .inner {
margin-bottom: 30px;
padding-top: calc(100vw - 40px);
}
.interview.hirano_ishida .inner_intro {
margin-bottom: 45px;
}
.interview.hirano_ishida .inner_intro .common_tit {
margin-bottom: 25px;
font-size: 24px;
}
.interview.hirano_ishida .inner_intro p {
margin-bottom: 1.5em;
font-size: 14px;
line-height: 1.8;
}
.interview.kuroki .intro .inner {
background: url(../kuroki/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.ito .intro .inner {
background: url(../ito/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.sasagawa .intro .inner {
background: url(../sasagawa/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.totani .intro .inner {
background: url(../totani/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.tamura .intro .inner {
background: url(../tamura/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.nakazawa .intro .inner {
background: url(../nakazawa/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.yokosawa .intro .inner {
background: url(../yokosawa/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.kosugi .intro .inner {
background: url(../kosugi/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.kubo .intro .inner {
background: url(../kubo/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.sakai .intro .inner {
background: url(../sakai/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.mitani_kobayashi .intro .inner {
background: url(../mitani_kobayashi/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.fujisawa_matsumoto .intro .inner {
background: url(../fujisawa_matsumoto/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.hirano_ishida .intro .inner {
background: url(../hirano_ishida/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.kojima .intro .inner {
background: url(../kojima/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview.sawada_mishima .intro .inner {
background: url(../sawada_mishima/img/interview_main_sp.jpg) center 0 no-repeat;
background-size: 100% auto;
}
.interview .intro .txt_area .common_tit {
padding: 30px 0 !important;
font-size: 24px;
}
.interview.kojima .intro .txt_area .common_tit {
font-size: 24px;
}
.interview .intro .txt_area {
width: 100%;
}
.interview .intro .txt_area .lead {
padding: 0;
}
.interview .intro .txt_area .lead p {
margin-bottom: 1.5em;
font-size: 14px;
line-height: 1.8;
}
.interview.ito .intro .txt_area .lead .about_mems {
margin-top: 2em;
padding: 15px;
}
.interview.ito .intro .txt_area .lead .about_mems .tit {
margin-bottom: 10px;
font-size: 18px;
}
.interview.ito .intro .txt_area .lead .about_mems p {
font-size: 12px;
}
.interview.kosugi .intro .txt_area .common_tit {
font-size: 24px;
}
.interview .intro .profile {
margin-bottom: 30px;
padding: 15px;
}
.interview .intro .profile .img p img {
max-width: 100%;
width: auto;
}
.interview .intro .profile .txt .tit {
margin-bottom: 15px !important;
font-size: 15px !important;
}
.interview .intro .profile .txt .tit .name {
font-size: 24px !important;
}
.interview .intro .profile .txt p {
font-size: 13px;
}
}
@media screen and (max-width: 320px) {
.interview.nakazawa .intro .txt_area .common_tit,
.interview.kosugi .intro .txt_area .common_tit,
.interview.kubo .intro .txt_area .common_tit {
font-size: 22px;
}
.interview.kuroki .intro .txt_area .common_tit,
.interview.sasagawa .intro .txt_area .common_tit,
.interview.sakai .intro .txt_area .common_tit,
.interview.kojima .intro .txt_area .common_tit {
font-size: 20px;
}
.interview.fujisawa_matsumoto .intro .txt_area .common_tit,
.interview.hirano_ishida .intro .txt_area .common_tit,
.interview.sawada_mishima .intro .txt_area .common_tit {
font-size: 18px;
}
}
/* title_visual ////////////////////////////////////////////////////*/
.interview .title_visual .outer {
position: relative;
width: 100%;
max-height: 800px;
}
.kuroki.interview .title_visual .outer {
background: #000 url(../kuroki/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.ito.interview .title_visual .outer {
background: #000 url(../ito/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.sasagawa.interview .title_visual .outer {
background: #000 url(../sasagawa/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.totani.interview .title_visual .outer {
background: #000 url(../totani/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.tamura.interview .title_visual .outer {
background: #000 url(../tamura/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.nakazawa.interview .title_visual .outer {
background: #000 url(../nakazawa/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.yokosawa.interview .title_visual .outer {
background: #000 url(../yokosawa/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.kosugi.interview .title_visual .outer {
background: #000 url(../kosugi/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.kubo.interview .title_visual .outer {
background: #000 url(../kubo/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.yamada_kudo.interview .title_visual .outer {
background: #000 url(../yamada_kudo/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.sakai.interview .title_visual .outer {
background: #000 url(../sakai/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.mitani_kobayashi.interview .title_visual .outer {
background: #000 url(../mitani_kobayashi/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.fujisawa_matsumoto.interview .title_visual .outer {
background: #000 url(../fujisawa_matsumoto/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.hirano_ishida.interview .title_visual .outer {
background: #000 url(../hirano_ishida/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.kojima.interview .title_visual .outer {
background: #000 url(../kojima/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.sawada_mishima.interview .title_visual .outer {
background: #000 url(../sawada_mishima/img/interview_title_bg.jpg) center center no-repeat;
background-size: cover;
}
.interview .title_visual .outer::before {
content:"";
display: block;
padding-top: 41.666%;
}
.interview .title_visual .outer::after {
position: absolute;
content:"";
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-opacity: 1;
opacity: 1;
background-color: #000;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
z-index: 1;
}
.interview .title_visual.scrollin .outer::after {
-webkit-opacity: 0;
opacity: 0;
}
.interview .title_visual .inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
z-index: 2;
}
.interview .title_visual .tit_box {
width: 100%;
padding: 50px 30px;
text-align: center;
background-color: rgba(0,0,0,.5);
}
.interview .title_visual .tit_box .tit {
font-size: 40px;
line-height: 1.2;
font-style: italic;
}
.interview .title_visual .tit_box .tit .sub {
display: block;
margin-top: 20px;
font-size: 16px;
font-style: normal;
text-align: center;
}
@media screen and (max-width: 1300px) {
.interview .title_visual .tit_box {
padding: 40px 30px;
}
.interview .title_visual .tit_box .tit {
font-size: 30px;
}
.interview .title_visual .tit_box .tit .sub {
margin-top: 10px;
font-size: 14px;
}
}
@media screen and (max-width: 900px) {
.interview .title_visual .tit_box {
padding: 30px 20px;
}
.interview .title_visual .tit_box .tit {
font-size: 26px;
}
.interview.nakazawa .title_visual .tit_box .tit {
font-size: 24px;
}
.interview .title_visual .tit_box .tit .sub {
margin-top: 5px;
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.interview .title_visual {
margin-bottom: 130px;
}
.kojima.interview .title_visual {
margin-bottom: 100px;
}
.yamada_kudo.interview .title_visual .outer {
background-position: center 0;
background-size: 140%;
}
.hirano_ishida.interview .title_visual .outer {
background-position: center 0;
background-size: 130%;
}
.interview .title_visual .inner {
display: block;
margin-top: 41.666%;
}
.interview .title_visual .tit_box {
padding: 20px;
background-color: rgba(0,0,0,1);
}
.interview .title_visual .tit_box .tit {
font-size: 22px !important;
line-height: 1.4;
}
.interview.hirano_ishida .title_visual .tit_box .tit {
font-size: 20px !important;
}
.interview .title_visual .tit_box .tit .sub {
font-size: 14px;
}
}
@media screen and (max-width: 320px) {
.interview .title_visual .tit_box .tit,
.interview.hirano_ishida .title_visual .tit_box .tit{
font-size: 18px !important;
}
}
/* faq ////////////////////////////////////////////////////*/
.interview .faq .outer {
max-width: 1300px;
margin: auto;
padding: 150px 50px 100px;
}
.interview .faq .lead_txt {
margin-bottom: 70px;
color: #000;
font-size: 16px;
line-height: 2;
}
.interview .faq .common_tit {
margin-bottom: 45px;
font-size: 40px;
}
.interview.sakai .faq .common_tit {
font-size: 38px;
}
.interview .faq .sub_tit {
margin: 0 0 55px;
font-size: 24px;
color: #666;
}
.interview .faq .sub_tit.ctl {
display: inline-block;
margin-left: 41.667%;
}
.interview .faq .inner {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 100px;
padding-bottom: 100px;
border-bottom: 1px solid #cfcfcf;
}
.interview .faq .inner:nth-of-type(even) {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.interview .faq .inner.row {
-webkit-flex-direction: row;
flex-direction: row;
}
.interview .faq .inner.reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.interview .faq .inner.no_border {
margin-bottom: 100px;
padding-bottom: 0;
border-bottom: none;
}
.interview .faq .inner.no_border.low_space {
margin-bottom: 50px;
}
.interview.kosugi .faq .inner:nth-of-type(even) {
-webkit-flex-direction: row;
flex-direction: row;
}
.interview.kosugi .faq .inner:nth-of-type(3),
.interview.kosugi .faq .inner:nth-of-type(5),
.interview.kosugi .faq .inner:nth-of-type(7),
.interview.kosugi .faq .inner:nth-of-type(10) {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.interview.kubo .faq .inner:nth-of-type(1){
margin-bottom: 100px;
padding-bottom: 0;
border-bottom: none;
}
.interview .faq .inner:last-child,
.interview .faq .inner:last-child.no_border {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.interview .faq .img {
width: 33.334%;
line-height: 1;
}
.interview .faq .img p {
margin-bottom: 35px;
}
.interview .faq .img p:last-of-type {
margin-bottom: 0;
}
.interview .faq .img .caption {
margin-top: -15px;
padding: 0 5%;
font-size: 14px;
color: #000;
line-height: 1.6;
}
.interview .faq .img .caption .inner_txt {
display: block;
margin-top: 10px;
}
.interview .faq .img a,
.interview .faq .img .no-modal {
display: block;
position: relative;
}
.interview .faq .img a::before,
.interview .faq .img .no-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px rgba(255,255,255,1) inset;
z-index: 1;
-webkit-transition: box-shadow .15s ease-out;
transition: box-shadow .15s ease-out;
}
.interview .faq .img a:hover::before {
box-shadow: 0 0 0 5px rgba(255,255,255,1) inset;
}
.interview .faq .img a::after {
content: '+';
position: absolute;
right: 10px;
bottom: 10px;
width: 15px;
height: 15px;
border: 1px solid #fff;
font-size: 13px;
text-align: center;
z-index: 1;
}
.interview .faq .img img {
box-shadow: 1px 1px 8px -2px #000;
}
.interview .faq .txt {
width: 58.333%;
color: #000;
}
.interview .faq .txt.full {
width: 100%;
}
.interview .faq .txt .num_list {
padding-left: 20px;
list-style: decimal;
}
.interview .faq .txt .sub_tit {
margin-top: 70px;
}
.interview .faq .txt p,
.interview .faq .txt li {
margin-bottom: 2em;
font-size: 16px;
line-height: 2;
}
.interview .faq .txt p .font_s {
display: inline-block;
margin-top: 5px;
font-size: 12px;
line-height: 1.8;
}
.interview .faq .txt p:last-of-type,
.interview .faq .txt li:last-of-type {
margin-bottom: 0;
}
.interview.kuroki .faq .txt .design_policy {
margin-bottom: 2em;
}
.interview.mitani_kobayashi .faq .txt .technologies {
margin-top: 2.5em;
padding: 30px 45px;
border: 2px solid #ababab;
line-height: 1.6;
}
.interview.mitani_kobayashi .faq .txt .technologies .tit {
margin-bottom: 20px;
font-size: 24px;
}
.interview.mitani_kobayashi .faq .txt .technologies li {
display: flex;
margin-bottom: .8em;
line-height: 1.4;
counter-increment: num;
}
.interview.mitani_kobayashi .faq .txt .technologies li::before {
display: block;
content: counter(num) ".\00a0\00a0";
}
.interview.fujisawa_matsumoto .faq .txt .astron_points {
margin: 2em 0;
}
.interview.sawada_mishima .faq .txt .process {
margin-top: 2em;
}
.interview.fujisawa_matsumoto .faq .txt .astron_points li,
.interview.sawada_mishima .faq .txt .process li {
display: flex;
margin-bottom: .8em;
line-height: 1.4;
counter-increment: num;
}
.interview.fujisawa_matsumoto .faq .txt .astron_points li::before,
.interview.sawada_mishima .faq .txt .process li::before {
display: block;
content: counter(num) ",\00a0\00a0";
}
@media screen and (max-width: 1300px) {
.interview .faq .outer {
padding: 120px 50px 70px;
}
.interview .faq .common_tit {
margin-bottom: 30px;
font-size: 36px;
}
}
@media screen and (max-width: 1024px) {
.interview .faq .outer {
padding: 100px 50px 50px;
}
.interview .faq .lead_txt {
font-size: 15px;
}
.interview .faq .common_tit {
margin-bottom: 25px;
font-size: 32px !important;
}
.interview.mitani_kobayashi .faq .txt .technologies {
padding: 20px 35px;
}
.interview.mitani_kobayashi .faq .txt .technologies .tit {
font-size: 20px;
}
}
@media screen and (max-width: 960px) {
.interview .faq .txt p,
.interview .faq .txt li {
font-size: 15px;
}
.interview .faq .img .caption {
font-size: 13px;
}
}
@media screen and (max-width: 767px) {
.interview .faq .outer {
padding: 50px 20px;
}
.interview.nakazawa .faq .outer,
.interview.kosugi .faq .outer {
padding-top: 80px;
}
.interview.fujisawa_matsumoto .faq .outer,
.interview.sawada_mishima .faq .outer {
padding-top: 90px;
}
.interview .faq .lead_txt {
line-height: 1.8;
}
.interview .faq .common_tit {
margin-bottom: 20px;
font-size: 20px !important;
}
.interview .faq .sub_tit {
margin-bottom: 25px;
margin-left: 0 !important;
font-size: 16px;
}
.interview .faq .inner {
margin-bottom: 50px;
padding-bottom: 50px;
display: block;
}
.interview .faq .inner.no_border {
margin-bottom: 50px;
}
.interview .faq .inner.no_border.low_space {
margin-bottom: 25px;
}
.interview.kubo .faq .inner:nth-of-type(1){
margin-bottom: 50px;
}
.interview.kubo .faq .inner:nth-of-type(1):last-of-type{
margin-bottom: 0;
}
.interview .faq .img {
width: 100% !important;
/* margin-bottom: 1.5em; */
max-width: 400px;
margin: 0 auto 1.5em;
}
.interview .faq .img .caption {
font-size: 12px;
}
.interview .faq .txt {
width: 100% !important;
}
.interview .faq .txt p,
.interview .faq .txt li {
margin-bottom: 1.5em;
font-size: 14px;
line-height: 1.8;
}
.interview.mitani_kobayashi .faq .txt .technologies {
padding: 10px 15px;
}
.interview.mitani_kobayashi .faq .txt .technologies .tit {
margin-bottom: 10px;
font-size: 15px;
}
.interview.mitani_kobayashi .faq .txt .technologies li {
font-size: 12px;
}
.interview.fujisawa_matsumoto .faq .txt .astron_points {
margin: 1.5em 0;
}
.interview.sawada_mishima .faq .txt .process li {
margin-bottom: .5em;
line-height: 1.6;
}
}
@media screen and (max-width: 320px) {
.interview.nakazawa .faq .outer {
padding-top: 30px;
}
.interview.kosugi .faq .outer {
padding-top: 40px;
}
.interview .faq .img .caption {
padding: 0 2.5%;
}
}
/* bnr_link ////////////////////////////////////////////////////*/
.interview .bnr_link,
.process .bnr_link {
padding: 70px 50px 175px;
}
.interview .bnr_link a .txt,
.process .bnr_link a .txt {
color: #fff;
}
.interview .bnr_link .outer,
.process .bnr_link .outer {
position: relative;
max-width: 1200px;
max-height: 400px;
margin: auto;
}
.ito.interview .bnr_link .outer {
background: #000 url(../ito/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.ito.process .bnr_link .outer {
background: #000 url(../ito/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.kuroki.interview .bnr_link .outer {
background: #000 url(../kuroki/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.kuroki.process .bnr_link .outer {
background: #000 url(../kuroki/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.sasagawa.interview .bnr_link .outer {
background: #000 url(../sasagawa/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.sasagawa.process .bnr_link .outer {
background: #000 url(../sasagawa/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.totani.interview .bnr_link .outer {
background: #000 url(../totani/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.totani.process .bnr_link .outer {
background: #000 url(../totani/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.tamura.interview .bnr_link .outer {
background: #000 url(../tamura/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.tamura.process .bnr_link .outer {
background: #000 url(../tamura/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.nakazawa.interview .bnr_link .outer {
background: #000 url(../nakazawa/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.nakazawa.process .bnr_link .outer {
background: #000 url(../nakazawa/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.yokosawa.interview .bnr_link .outer {
background: #000 url(../yokosawa/img/interview_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.yokosawa.process .bnr_link .outer {
background: #000 url(../yokosawa/img/process_bnr_link_bg.jpg) center center no-repeat;
background-size: cover;
}
.interview .bnr_link .outer::before,
.process .bnr_link .outer::before {
content:"";
display: block;
padding-top: 33.333%;
}
.interview .bnr_link .outer::after,
.process .bnr_link .outer::after {
position: absolute;
content:"";
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-opacity: 1;
opacity: 1;
background-color: #000;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
z-index: 1;
}
.interview .bnr_link.scrollin .outer::after,
.process .bnr_link.scrollin .outer::after {
-webkit-opacity: 0;
opacity: 0;
}
.interview .bnr_link .inner,
.process .bnr_link .inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.interview .bnr_link .inner:hover,
.process .bnr_link .inner:hover {
background-color: rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,1);
box-shadow: 0 0 15px 0 rgba(0,0,0,1);
}
.interview .bnr_link .txt,
.process .bnr_link .txt {
position: absolute;
top: 50%;
width: 100%;
padding: 0 50px;
font-size: 40px;
font-style: italic;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.interview .bnr_link a .txt,
.process .bnr_link a .txt {
text-decoration: none;
}
.interview .bnr_link .txt span,
.process .bnr_link .txt span {
display: block;
position: absolute;
left: 50%;
bottom: -40px;
width: 35%;
height: 1px;
margin-left: -18%;
background-color: #6fbee3;
-webkit-animation: int_link_line 3s infinite;
-ms-animation: int_link_line 3s infinite;
animation: int_link_line 3s infinite;
}
.interview .bnr_link .txt span::after,
.process .bnr_link .txt span::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 26px;
height: 26px;
border-top: 1px solid #6fbee3;
border-right: 1px solid #6fbee3;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: right top;
transform-origin: right top;
}
@-ms-keyframes int_link_line {
5% {
width: 35%;
}
45% {
width: 37%;
}
55% {
width: 37%;
}
95% {
width: 35%;
}
}
@-webkit-keyframes int_link_line {
5% {
width: 35%;
}
45% {
width: 37%;
}
55% {
width: 37%;
}
95% {
width: 35%;
}
}
@keyframes int_link_line {
5% {
width: 35%;
}
45% {
width: 37%;
}
55% {
width: 37%;
}
95% {
width: 35%;
}
}
@media screen and (max-width: 1300px) {
.interview .bnr_link .txt,
.process .bnr_link .txt {
font-size: 36px;
}
}
@media screen and (max-width: 1024px) {
.interview .bnr_link .txt,
.process .bnr_link .txt {
font-size: 32px;
}
}
@media screen and (max-width: 900px) {
.interview .bnr_link .txt,
.process .bnr_link .txt {
top: 40%;
}
}
@media screen and (max-width: 767px) {
.interview .bnr_link, .process .bnr_link {
padding: 0 20px 80px;
}
.interview .bnr_link .outer::before,
.process .bnr_link .outer::before {
padding-top: 60%;
}
.interview .bnr_link .txt,
.process .bnr_link .txt {
padding: 0 20px;
font-size: 20px;
}
.interview.sasagawa .bnr_link .txt,
.interview.ito .bnr_link .txt {
font-size: 17px;
}
.interview .bnr_link .txt span::after,
.process .bnr_link .txt span::after {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 320px) {
.interview.sasagawa .bnr_link .txt {
font-size: 15px;
}
.process.kuroki .bnr_link .txt {
font-size: 18px;
}
}
/* /////////////////////////////////////////////
process
///////////////////////////////////////////// */
#main.process {
background-color: #f0f0f0;
}
/* workflow ////////////////////////////////////////////////////*/
.process .workflow .outer {
max-width: 1500px;
margin: auto;
padding: 100px 50px 100px;
}
.process .workflow .inner {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 30px;
}
.process .workflow .inner:nth-of-type(even) {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.process .workflow .inner:last-child {
margin-bottom: 0;
}
.process .workflow .img {
width: 50%;
padding-left: 100px;
line-height: 1;
}
.process .workflow .inner:nth-of-type(even) .img {
padding-right: 100px;
padding-left: 0;
}
.process .workflow .txt {
width: 50%;
}
.process .workflow .inner.txt_full .txt {
width: 100%;
}
.process .workflow .txt .box {
position: relative;
margin-left: -100px;
padding: 30px 25px;
color: #000;
background-color: rgba(240,240,240,.75);
}
.process .workflow .inner:nth-of-type(even) .txt .box {
margin-right: -100px;
margin-left: 0;
}
.process .workflow .txt .box .tit {
margin-bottom: 20px;
padding-bottom: 15px;
font-size: 26px;
border-bottom: 1px solid #000;
}
.process .workflow .txt .box p {
margin-bottom: 2em;
font-size: 16px;
line-height: 2;
}
.process .workflow .txt .box p.note {
font-size: 80%;
}
.process .workflow .txt .box p:last-of-type {
margin-bottom: 0;
}
@media screen and (max-width: 1160px) {
.process .workflow .img {
padding: 0 !important;
}
}
@media screen and (max-width: 1024px) {
.process .workflow .txt .box {
margin-left: -150px;
}
.process .workflow .inner:nth-of-type(even) .txt .box {
margin-right: -150px;
}
}
@media screen and (max-width: 960px) {
.process .workflow .outer {
padding: 75px 50px 50px;
}
.process .workflow .inner {
-webkit-align-items: flex-start;
align-items: flex-start;
margin-bottom: 60px;
}
.process .workflow .inner:last-of-type {
margin-bottom: 0;
}
.process .workflow .inner.txt_full .img {
display: none;
}
.process .workflow .txt .box {
margin: 0 !important;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.process .workflow .inner.txt_full .txt .box {
padding-left: 0;
}
.process .workflow .inner:nth-of-type(even) .txt .box {
padding-right: 25px;
padding-left: 0;
}
.process .workflow .txt .box p {
font-size: 15px;
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.process .workflow .outer {
padding: 55px 20px 60px;
}
.process .workflow .inner {
display: block !important;
}
.process .workflow .img {
width: 100% !important;
margin-bottom: 1.5em;
padding: 0 !important;
}
.process .workflow .img p {
text-align: center;
}
.process .workflow .txt {
width: 100% !important;
}
.process .workflow .txt .box {
padding: 0 !important;
}
.process .workflow .txt .box .tit {
margin-bottom: 15px;
padding-bottom: 10px;
font-size: 20px;
}
.process .workflow .txt .box p {
margin-bottom: 1.5em;
font-size: 14px;
}
}
/* /////////////////////////////////////////////
mitani_kobayashi carousel
///////////////////////////////////////////// */
/*! jQuery.Flipster, v1.1.2 (built 2017-11-10) */.flipster{display:block;overflow-x:hidden;overflow-y:visible;position:relative}.flipster:focus{outline:none}.flipster__container,.flipster__item{margin:0;padding:0;list-style-type:none;position:relative}.flipster__container{display:block;white-space:nowrap;word-spacing:-0.25em;transform-origin:50% 50%;backface-visibility:hidden}.flipster__item{display:inline-block;white-space:normal;word-spacing:normal;vertical-align:bottom}.flipster--click .flipster__item--past,.flipster--click .flipster__item--future{cursor:pointer}.flipster__item img{max-width:100%}.flipster__button{position:absolute;top:50%;display:block;appearance:none;background:none;border:none;padding:0;z-index:999;cursor:pointer;font-size:15px;opacity:.5;transition:opacity 500ms ease;margin:-1em 2em}.flipster__button svg{width:2em;stroke:currentColor;fill:transparent;stroke-width:3;stroke-linecap:round}.flipster__button:hover,.flipster__button:focus{opacity:1}.flipster__button--prev{left:0}.flipster__button--next{right:0}.flipster__nav,.flipster__nav__item{list-style-type:none;margin:0;padding:0}.flipster__nav{display:block;margin:0 0 4em;text-align:center;position:relative}.flipster__nav__item{display:inline-block;margin:0 .25em}.flipster__nav__link{display:block;color:inherit;padding:.5em 1em;position:relative;overflow:hidden;transition:all 250ms ease-out;transition-timing-function:cubic-bezier(.56, .12, .12, .98)}.flipster__nav__link::after{content:'';display:block;background:#232221;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transform:translateY(100%) translateY(-0.25em);transition:inherit}.flipster__nav__item--current>.flipster__nav__link,.flipster__nav__link:hover,.flipster__nav__link:focus{color:#fff}.flipster__nav__item--current>.flipster__nav__link::after,.flipster__nav__link:hover::after,.flipster__nav__link:focus::after{transform:translateY(0)}.flipster__nav__child{display:none;position:absolute;top:100%;left:0;right:0;margin-top:-1px;padding:.5em;background:#4e4441;z-index:1}.flipster__nav__child .flipster__nav__link{color:#fff}.flipster__nav__child .flipster__nav__link::after{background:#fff}.flipster__nav__child .flipster__nav__item--current>.flipster__nav__link,.flipster__nav__child .flipster__nav__link:hover,.flipster__nav__child .flipster__nav__link:focus{color:#232221}.flipster__nav__item--current .flipster__nav__child{display:block}.flipster--carousel .flipster__container,.flipster--carousel .flipster__item,.flipster--carousel .flipster__item__content{transition:all 350ms ease-in-out;transition-timing-function:cubic-bezier(.56, .12, .12, .98)}.flipster--carousel .flipster__item{perspective:800px}.flipster--carousel .flipster__item--past,.flipster--carousel .flipster__item--future{opacity:0;transition-delay:115ms}.flipster--carousel .flipster__item--past-2,.flipster--carousel .flipster__item--future-2{opacity:.6;transition-delay:90ms}.flipster--carousel .flipster__item--past-1,.flipster--carousel .flipster__item--future-1{opacity:.8;transition-delay:60ms}.flipster--carousel .flipster__item--past .flipster__item__content{transform:translateX(100%) rotateY(-20deg) scale(.5)}.flipster--carousel .flipster__item--past-2 .flipster__item__content{transform:translateX(25%) rotateY(40deg) scale(.65)}.flipster--carousel .flipster__item--past-1 .flipster__item__content{transform:rotateY(45deg) scale(.8)}.flipster--carousel .flipster__item--future .flipster__item__content{transform:translateX(-100%) rotateY(20deg) scale(.5)}.flipster--carousel .flipster__item--future-2 .flipster__item__content{transform:translateX(-25%) rotateY(-40deg) scale(.65)}.flipster--carousel .flipster__item--future-1 .flipster__item__content{transform:rotateY(-45deg) scale(.8)}.flipster--carousel.no-rotate .flipster__item--past .flipster__item__content{transform:translateX(175%) scale(.5)}.flipster--carousel.no-rotate .flipster__item--past-2 .flipster__item__content{transform:translateX(25%) scale(.65)}.flipster--carousel.no-rotate .flipster__item--past-1 .flipster__item__content{transform:translateX(0) scale(.8)}.flipster--carousel.no-rotate .flipster__item--future .flipster__item__content{transform:translateX(-175%) scale(.5)}.flipster--carousel.no-rotate .flipster__item--future-2 .flipster__item__content{transform:translateX(-25%) scale(.65)}.flipster--carousel.no-rotate .flipster__item--future-1 .flipster__item__content{transform:translateX(0) scale(.8)}.flipster--carousel .flipster__item--current .flipster__item__content{transform:translateX(0) rotateY(0deg) scale(1);transition-delay:60ms}.flipster--coverflow .flipster__container,.flipster--coverflow .flipster__item,.flipster--coverflow .flipster__item__content{transition:all 350ms ease-in-out;transition-timing-function:cubic-bezier(.56, .12, .12, .98)}.flipster--coverflow .flipster__item{perspective:800px}.flipster--coverflow .flipster__container{padding-bottom:5%}.flipster--coverflow .flipster__item__content{transform-origin:50% 100%;box-reflect:below 0 -webkit-gradient(linear, left bottom, left top, color-stop(.05, rgba(255,255,255,0.12)), color-stop(.2, transparent));-webkit-box-reflect:below 0 -webkit-gradient(linear, left bottom, left top, color-stop(.05, rgba(255,255,255,0.12)), color-stop(.2, transparent))}.flipster--coverflow .flipster__item__content img:only-child{display:block}.flipster--coverflow .flipster__item--past .flipster__item__content{transform-origin:0 50%;transform:scale(.75) rotateY(55deg)}.flipster--coverflow .flipster__item--future .flipster__item__content{transform-origin:100% 50%;transform:scale(.75) rotateY(-55deg)}.flipster--coverflow .flip-current .flipster__item__content{transform:rotateY(0deg)}.flipster--flat .flipster__container,.flipster--flat .flipster__item,.flipster--flat .flipster__item__content{transition:all 400ms ease-in-out}.flipster--flat .flipster__item--past,.flipster--flat .flipster__item--future{opacity:.5}.flipster--flat .flipster__item--past .flipster__item__content{transform:scale(.75)}.flipster--flat .flipster__item--future .flipster__item__content{transform:scale(.75)}.flipster--wheel{overflow:hidden}.flipster--wheel .flipster__container,.flipster--wheel .flipster__item__content{transition:all 400ms ease-in-out;transition-timing-function:cubic-bezier(.56, .12, .12, .98)}.flipster--wheel .flipster__container{padding-bottom:20%}.flipster--wheel .flipster__item__content{transform-origin:50% 100%}.flipster--wheel .flipster__item--past .flipster__item__content{transform-origin:100% 100%}.flipster--wheel .flipster__item--future .flipster__item__content{transform-origin:0 100%}.flipster--wheel .flipster__item__content img:only-child{display:block}.flipster--wheel .flipster__item--past .flipster__item__content{opacity:0;transform:rotateZ(-80deg) translate(-170%, 110%)}.flipster--wheel .flipster__item--future .flipster__item__content{opacity:0;transform:rotateZ(80deg) translate(170%, 110%)}.flipster--wheel .flipster__item--past-3 .flipster__item__content{opacity:1;transform:rotateZ(-60deg) translate(-70%, 75%)}.flipster--wheel .flipster__item--future-3 .flipster__item__content{opacity:1;transform:rotateZ(60deg) translate(70%, 75%)}.flipster--wheel .flipster__item--past-2 .flipster__item__content{opacity:1;transform:rotateZ(-40deg) translate(-17%, 30%)}.flipster--wheel .flipster__item--future-2 .flipster__item__content{opacity:1;transform:rotateZ(40deg) translate(17%, 30%)}.flipster--wheel .flipster__item--past-1 .flipster__item__content{opacity:1;transform:rotateZ(-20deg)}.flipster--wheel .flipster__item--future-1 .flipster__item__content{opacity:1;transform:rotateZ(20deg)}.flipster--wheel .flip-current .flipster__item__content{transform:rotateX(0deg)}
.flipster__item {
/* for FF */
outline: solid 1px transparent;
}
.carousel_box {
width: 100%;
padding: 40px 0 80px;
background-color: #000;
}
.carousel_box .year {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
font-style: italic;
text-align: center;
}
body:not(.ios):not(.safari) .carousel_box .flipster{
overflow: hidden;
}
.carousel_box .text ul {
margin-top: 65px;
}
.carousel_box .text li {
max-width: 800px;
margin: auto;
padding: 0 20px;
display: none;
}
.carousel_box .text li a {
text-decoration: underline;
}
.carousel_box .text li a:hover {
text-decoration: none;
}
.carousel_box .text li .tit {
margin-bottom: 35px;
font-size: 24px;
text-align: center;
}
.carousel_box .flipster__button {
opacity: 1;
margin: 0;
transition: opacity .6s ease-out;
transform: translateY(-50%);
}
.carousel_box .flipster__button:hover {
opacity: .6;
}
.carousel_box .flipster__button svg {
color: #fff;
stroke-linecap: butt;
width: 2.8em;
stroke-width: 2.5;
}
.interview.hirano_ishida .carousel_box .flipster__button svg {
color: #0a0000;
}
.carousel_box .flipster__button--prev {
left: calc(50% - 243px);
}
.carousel_box .flipster__button--next {
right: calc(50% - 243px);
}
@media screen and (max-width: 767px) {
.carousel_box {
padding: 30px 0 50px;
}
.carousel_box .year {
margin-bottom: 20px;
font-size: 25px;
}
.carousel_box .flipster__button svg {
width: 2em;
stroke-width: 2;
}
.carousel_box .flip-items li img {
width: 250px;
height: 250px;
}
.carousel_box .text ul {
margin-top: 30px;
}
.carousel_box .text li .tit {
margin-bottom: 15px;
font-size: 18px;
}
.carousel_box .text li p {
font-size: 14px;
}
.carousel_box .flipster__button--prev {
left: calc(50% - 115px);
}
.carousel_box .flipster__button--next {
right: calc(50% - 115px);
}
}
@media screen and (max-width: 320px) {
.carousel_box .year {
margin-bottom: 15px;
font-size: 22px;
}
.carousel_box .flipster__button svg {
width: 1.5em;
stroke-width: 1.5;
}
.carousel_box .flip-items li img {
width: 200px;
height: 200px;
}
.carousel_box .text ul {
margin-top: 20px;
}
.carousel_box .text li .tit {
margin-bottom: 12px;
font-size: 16px;
}
.carousel_box .text li p {
font-size: 12px;
}
.carousel_box .flipster__button--prev {
left: calc(50% - 90px);
}
.carousel_box .flipster__button--next {
right: calc(50% - 90px);
}
}