@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------
スペシャル
--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.PageBody.-special .layout { overflow:hidden; padding:16px; }
.PageBody.-special .layout > ul { display:flex; flex-wrap:wrap; align-items:stretch; margin-right:-1px; }
.PageBody.-special .layout li { width:25%; margin-bottom:80px; padding-right:1px; box-sizing:border-box; }
.PageBody.-special .layout a.thumArea { display:block; overflow:hidden; width:100%; padding-top:56.25%; position:relative; cursor:pointer; }
.PageBody.-special .layout .img { width:100%; position:absolute; top:0; right:0; width:100% !important; height:auto !important; transform:scale(1.01); transition-duration:0.3s; z-index:1; }
.PageBody.-special .layout .textArea { padding:26px 40px 0 0; }
.PageBody.-special .layout .name { font-size:0; margin-bottom:4px; }
.PageBody.-special .layout .name p { display:block; font-size:12px; line-height:2; margin-bottom:32px; font-feature-settings:"palt"; letter-spacing:.04em; }

/* hover */
.hover .PageBody.-special .layout a.thumArea:hover .img { transform:scale(1.1) rotate(0.1deg); opacity:.8; }

/* ページナビ */
.SpecialNavi#specialupperpart { overflow:hidden; width:520px; float:left; margin-top:54px; z-index:1; opacity:1; transition: opacity .3s ease }
.SpecialNavi#speciallowerpart { overflow:hidden; width:520px; position: absolute; right:auto; margin:auto; bottom:0; left:0; z-index:-1; opacity:0; transition: opacity .3s ease }

.SpecialNavi ul { margin:0; margin-right:-1px; }
.SpecialNavi ul::after { content:""; display:block; clear:both; }
.SpecialNavi li { float:left; width:40%; padding:0; box-sizing:border-box; color:#fff; padding-right:1px; box-sizing:border-box; }
.SpecialNavi .SpecialNavi__link { display:block; font-size:10px; padding:15px; font-family:'Roboto', sans-serif; letter-spacing:.1em; text-indent:.1em; text-align:center; text-decoration:none; color:inherit; background:#333; }
.normal .SpecialNavi .SpecialNavi__link.-active { background:#296393; color:rgba(255,255,255,.9); }
.dark .SpecialNavi .SpecialNavi__link.-active { background:#AA8B5D; color:#151515; }
.hover .SpecialNavi .SpecialNavi__link:hover { background:#444; }
.hover.normal .SpecialNavi .SpecialNavi__link.-active:hover { background:#296393; color:rgba(255,255,255,.9); }
.hover.dark .SpecialNavi .SpecialNavi__link.-active:hover { background:#AA8B5D; color:#151515; }

@media screen and (max-width:1023px) { /* tablet tablet */
	.SpecialNavi#specialupperpart { right:auto; left:0; float:none;  }
}
@media screen and (max-width:767px) { /* sp_3 6Plus */
	.SpecialNavi#specialupperpart, .SpecialNavi#speciallowerpart { width:100%; }
	.SpecialNavi#specialupperpart .SpecialNavi__link, .SpecialNavi#speciallowerpart .SpecialNavi__link { text-indent:0; letter-spacing:0; padding:15px 0; }
}

/* Interviews & Articles Pages "Inar" */
.Layout2Colum.-special .Layout2Colum__nav { width:136px; } /* 追従エリアの横幅 */
@media screen and (max-width:1023px) { /* tablet tablet */
	.PageBody.-special .Layout2Colum.-special .Layout2Colum__nav { width:100%; padding:0; box-sizing:border-box; } /* 追従エリアの横幅 */
}
/*左メニュ*/
.is-hide { display:none; }
.SpecialMenu { padding:0 16px; }
.SpecialMenu .search-box { margin-bottom:24px; }
.SpecialMenu .search-box:last-child { margin-bottom:0; }
.SpecialMenu .search-box_label { display:block; margin-bottom:8px; font-size:10px; font-family:'Roboto',sans-serif; font-feature-settings:"palt"; font-weight:400; letter-spacing:.08em; }
/*選択中のアイテム*/
.SpecialMenu .display_selectedItem { display:flex; justify-content:left; align-items:center; width:100%; height:32px; box-sizing:border-box; padding:0 20px 0 8px; cursor:pointer; font-family:'Roboto',sans-serif; font-weight:500; font-feature-settings:"palt"; font-size:10px; line-height:1.1; position:relative; }
.SpecialMenu .display_selectedItem::after { content:""; display:block; width:5px; height:10px; position:absolute; top:50%; right:8px; transform:translateY(-50%); }
/*リスト*/
.SpecialMenu .select_box { overflow:hidden; width:100%; }
.SpecialMenu .select_box li { position:relative; }
.SpecialMenu .select_box li::after { content:""; display:block; width:calc(100% - 16px); height:1px; position:absolute; top:0; left:0; right:0; margin:auto; }
.SpecialMenu .select_box li:last-child { border-bottom:none; }
.SpecialMenu label { cursor:pointer; padding:5px 8px; min-height:28px; display:flex; justify-content:left; align-items:center; font-size:10px; line-height:1.1; font-family:'Roboto',sans-serif; font-feature-settings:"palt"; cursor:pointer; box-sizing:border-box; }
.SpecialMenu label input { display:none; }
.SpecialMenu .display_selectedArea { position:relative; }
.SpecialMenu .select_box { display:none; position:absolute; top:32px; left:0; z-index:1; }
.SpecialMenu .select_box > .inner { display:block; height:160px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* normal */
.normal .SpecialMenu .search-box_label { color:rgba(255,255,255,.7); }
.normal .SpecialMenu .display_selectedItem { color:#223A5F; background:#fff; }
.normal .SpecialMenu .display_selectedItem::after { opacity:1; background:url(/static/img/library/arrow.png) 0 0 no-repeat; background-size:5px 10px; }
.normal .SpecialMenu label { color:rgba(0,0,0,.7); background:#fff; }
.normal .SpecialMenu .select_box li::after { background:rgba(0,0,0,.1); }
.normal .SpecialMenu .select_box li.-active label { background:#eee; }
.normal.hover .SpecialMenu .display_selectedItem:hover { background:#eee; }
.normal.hover .SpecialMenu label:hover { background:#eee; }
/* dark */
.dark .SpecialMenu .search-box_label { color:rgba(255,255,255,.7); }
.dark .SpecialMenu .display_selectedItem { color:rgba(255,255,255,.7); background:#222; }
.dark .SpecialMenu .display_selectedItem::after { opacity:.7; background:url(/static/img/library/arrow_white.png) 0 0 no-repeat; background-size:5px 10px; }
.dark .SpecialMenu label { color:rgba(255,255,255,.7); background:#222; }
.dark .SpecialMenu .select_box li::after { background:rgba(255,255,255,.1); }
.dark .SpecialMenu .select_box li.-active label { background:#111; }
.dark.hover .SpecialMenu .display_selectedItem:hover { background:#111; }
.dark.hover .SpecialMenu label:hover { background:#111; }
.SpecialMenuToggle { display:none; }
@media screen and (max-width:1023px) { /* tablet */
	.SpecialMenu { background:#333; position:fixed; top:0; left:0; width:136px; box-sizing:border-box; height:100vh; z-index:1000; display:flex; align-items:center; transform:translate3d(-136px,0,0); transition:transform .3s; }
	.SpecialMenu.-active { transform:translate3d(0,0,0); }
	.SpecialMenuCover { position:fixed; top:0; left:0; z-index:999; background:#000; width:0; height:0; opacity:0; transition:opacity .3s; }
	.SpecialMenu.-active + .SpecialMenuCover { width:100%; height:100vh; opacity:.3; }
	.SpecialMenu form { width:100%; }

	.PageBody.-special .Layout2Colum__contents { padding-top:56px; min-height:100vh; box-sizing:border-box; }

	.SpecialMenuToggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; position:absolute; top:16px; left:0; margin:0 0 16px 16px; z-index:998; box-sizing:border-box; }
	.SpecialMenuToggle i { font-size:12px; }
	.normal	.SpecialMenuToggle{ color:#333; border:1px solid rgba(0,0,0,.2); }
	.dark .SpecialMenuToggle { color:rgba(255, 255, 255, .9); border:1px solid rgba(255,255,255,.2); }

	.SpecialMenuToggle { position:absolute; top:16px; left:0; transition:all .2s; }
	.SpecialMenuToggle.-fixed { position:fixed; top:16px; left:0; z-index:999; }
	.normal .SpecialMenuToggle.-fixed { background:rgba(0,0,0,.3); border:none; color:rgba(255,255,255,1); }
	.dark .SpecialMenuToggle.-fixed { background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.3); }

	.normal .SpecialMenu { background:#223A5F; }
	.dark .SpecialMenu { background:#333; }
}

/* Inar List Area */
.PageBody.-special .layout.inar { padding:0; }
.SpecialLayout__listArea { padding:120px; width:100%; box-sizing:border-box; }
.SpecialLayout__listArea p { font-size:14px; }
.SpecialLayout__list { width:100%; margin:auto; }
.SpecialLayout__list li {}
.SpecialLayout__list > li > a { display:block; padding:24px 42px 20px 0; text-decoration:none; position:relative; }
.SpecialLayout__list > li > a::after { content:''; display:block; width:10.5px; height:10.5px; border-top:1px solid rgba(0,0,0,.7); border-right:1px solid rgba(0,0,0,.7); -webkit-transform:rotate(45deg) translateY(-50%); transform:rotate(45deg) translateY(-50%); transform-origin:center center; box-sizing:border-box; 
	position:absolute; top:50%; right:23px;
}
.SpecialLayout__list li a > .inner { padding:0; } /*リンクありの場合*/
.SpecialLayout__list li .inner { padding:24px 42px 20px 0; } /*リンクなしの場合*/
.SpecialLayout__list .layout { display:table; width:100%; margin-bottom:8px; }
.SpecialLayout__list .layout .layout__col.-label { display:table-cell; vertical-align:middle; width:96px; padding-right:8px; }
.SpecialLayout__list .layout .layout__col.-label > .inner { display:block; padding:7px 0 6px; font-family:'Roboto', sans-serif; font-size:12px; text-align:center; letter-spacing:.1em; text-indent:.1em; }
.SpecialLayout__list .layout .layout__col.-date { display:table-cell; vertical-align:middle; }
.SpecialLayout__list .layout .layout__col.-date > .inner { font-family:'Roboto', sans-serif; font-size:14px; opacity:.7; }
.SpecialLayout__list .txt { font-size:14px; line-height:2; }
.SpecialLayout__list .yeartxt { font-size:30px; font-weight: 700; padding-top: 15px; }
.SpecialLayout__list .txt > .inner {}
/* normal */
.normal .SpecialLayout__list > li > a { color:#333; }
.normal .SpecialLayout__list > li > a::after { border-color:rgba(0,0,0,.7); }
.normal .SpecialLayout__list li {  border-bottom:1px solid rgba(0,0,0,.2); }
.normal .SpecialLayout__list .layout .layout__col.-label > .inner { background:#223a5f; color:rgba(255,255,255,.9); }
/* dark */
.dark .SpecialLayout__list > li > a { color:#DEDEDE; }
.dark .SpecialLayout__list > li > a::after { border-color:rgba(255,255,255,.7); }
.dark .SpecialLayout__list li { border-bottom:1px solid rgba(255,255,255,.1); }
.dark .SpecialLayout__list .layout .layout__col.-label > .inner { background:#AA8B5D; color:rgba(0,0,0,.9); }
/* responsive */
@media screen and (max-width:1400px) { /* macbookpro13 */
	.SpecialLayout__listArea { padding:80px; }
}
@media screen and (max-width:1023px) { /* tablet tablet */
	.PageBody.-special .Layout2Colum.-special .SpecialLayout__listArea { padding:0 40px 40px; }
}
@media screen and (max-width:767px) { /* sp_3 6Plus */
	.PageBody.-special .Layout2Colum.-special .SpecialLayout__listArea { padding:0 16px; }
	.SpecialLayout__listArea p { font-size:16px; }
	.SpecialLayout__list li:last-child { border-bottom:none; }
	.SpecialLayout__list .txt { font-size:14px; line-height:1.5; }
}

/*　Inar Icons　*/
.SpecialLayout__list li .inar-item { display:flex; justify-content:space-between; align-items:center; }
.SpecialLayout__list li .inar-item .inar-icon { width:110px; text-align:right; }
.SpecialLayout__list li .icon { display:inline-block; width:44px; height:44px; border-radius:50%; overflow:hidden; position:relative; z-index:1; }

/* Margin Fix */
.needspace { margin-top:3px; }

/* For Smartphone */
.pc-interviewee { display: inline-block; }
.sp-interviewee { display: none; }

@media screen and (max-width:1600px) {
	.PageBody.-special .layout li { width:33.33%; }
}
/*
@media screen and (max-width:1300px) {
	.SpecialLayout__list li .icon { display:none; }
}
*/
@media screen and (max-width:1199px) {
	.PageBody.-special .layout li { width:50%; }
	.SpecialLayout__list li .icon { display:none; }
}
@media screen and (max-width:1023px) {
	.PageBody.-special .layout li { margin-bottom:40px; }
	.SpecialLayout__list li .inar-item .inar-icon { display:none; }
}
@media screen and (max-width:767px) {
	.PageBody.-special .layout li { width:100%; margin-bottom:36px; }
	.PageBody.-special .layout .textArea { padding:12px 0 0 0; }
	.PageBody.-special .layout .name { margin-bottom:0; }
	.PageBody.-special .layout .name p {  margin-bottom:0; line-height:1.5; }
	.sp-interviewee { display: inline-block; font-family:'Roboto', sans-serif; font-size:14px !important; opacity:.7; }
	.pc-interviewee { display: none; }
	.SpecialLayout__list li .inar-item .inar-icon { display:none; }
}