@charset "utf-8";
/*reset*/
#main-contents p { line-height:180%}
#main-contents .wapper-special #ikeido p {margin-bottom:0}
#main-contents { width:100%; margin:0 !important; padding:0 !important; font-size:16px !important}
#editor .wapper-special { width:100%; max-width:none !important; border:none; !important}
#contents { margin:0 !important; padding:0; !important}
#ikeido header { margin:0 0 0px 0; position: sticky; z-index: 1; top: 0;background-image: url(../img/bg_texture.jpg);}
.special-sns{ display:none!important}
#editor .wrapper{ padding:0}
#search-box {display: none}
#ikeido li {list-style: none}
/********************* 特設サイト共通 *********************/
#editor .wapper-special{ width:100%; max-width:980px; margin: 0 auto; padding:0; line-height:1.8em; font-size:105%; position:relative; }
#ikeido .container{ padding:2em 1em 1em ; margin:0;max-width:980px; margin:0 auto; }
/*#main-contents .wapper-special p + p{ margin-top:1em}*/
#editor .wapper-special img{ width:100%; vertical-align:bottom}
#ikeido figure { margin-bottom:1em}
#ikeido figcaption,#ikeido figcaption a { margin-top: .5em; font-size: 1.0em; color: #222; text-align: left;}

/*フォント*/
#main-contents .wapper-special #ikeido h3,
#main-contents .wapper-special #ikeido h4, 
#main-contents .wapper-special #ikeido h5,
#main-contents .wapper-special #ikeido nav{ text-align:center; font-family: "Zen Kaku Gothic New"; font-weight: 700;letter-spacing: .07em; }

#main-contents .wapper-special #ikeido h3 { margin-bottom:.5em; font-size:220%; }
#main-contents .wapper-special #ikeido h4 { margin-bottom:1.2em; font-size:160%; font-weight: 900} 
#main-contents .wapper-special #ikeido h5 { margin-top:2em; margin-bottom:1.2em; font-size:120%;color:#ffe100}

@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .container{ padding:4em 2em 2em;}
	#main-contents .wapper-special #ikeido h3 { margin-bottom:1.2em;}
}

/*全体背景 色関係*/
#ikeido {background:#FAF8F5; color:#222; background-image: url(../img/bg_texture.jpg); }
#ikeido .bg_dark{ background: rgba(0,0,0,.15)}
#ikeido .bg_light{ background: rgb(255 255 255 / 60%);}

/*リンク設定*/
#main-contents #ikeido a{color:#000; }
#main-contents #ikeido a:hover{ text-decoration:none; opacity:0.75}
.wrapper .navi a:hover{border-bottom: none; opacity:0.4}

#main-contents #ikeido .link_b a{color:#000; border-bottom:#ba0000 solid 2px}
#main-contents #ikeido .link_b a:hover{ border-bottom:#f05982 solid 2px; text-decoration:none; opacity:0.8}

/*helper*/
.min{ font-family:'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;}
.gos{ font-family:"Zen Kaku Gothic New" , 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
#main-contents .wapper-special #ikeido .m_b_2em { margin-bottom:2em !important}
#main-contents .wapper-special #ikeido .m_t_2em { margin-top:2em !important}
.t_center { text-align:center !important}
.t_right { text-align:right !important}
.t_left { text-align:left !important}
.t_small { font-size:80%; font-weight: normal}
.t_red { color:#f00 }
.clearfix::after { content: ""; display: block; clear: both;}
.sp { display:block }
.pc { display:none }

@media screen and (min-width: 768px){
	.sp { display:none }
	.pc { display: block }
}

/***** 部品 *****************************************************************/
/*--flexbox--*/
/*基本のflexbox*/
.flex_b { display:flex; flex-wrap: wrap; justify-content: space-between; align-items:flex-start;font-feature-settings: "palt";}
.flex_b img { width:100%; height:auto; display:block; margin:0 auto;object-fit: contain; }

	@media screen and (min-width: 768px){
		.flex_b { display:flex; flex-direction:row; }
		.flex_b > p,
		.flex_b_imgL > div{ width:48%; }/*.flex_b_imgLは左側に画像がある場合につけるクラス*/

		.flex_b_imgL div { flex-basis:300px; flex-grow:1}
		.flex_b_imgL div:nth-child(2) { flex-grow:6; margin-left:3%}
	}
	@media screen and (min-width: 1024px){
		.flex_b_imgL p,
		.flex_b_imgL > div { flex-basis:150px; }
		.flex_b_imgL div:nth-child(2) { flex-grow:10;}
	}

/*バナー*/
#main-contents .wapper-special #ikeido .bnr { max-width: 1000px; width:100%; margin:2em auto 1em; text-align: center}
#main-contents .wapper-special #ikeido .bnr a{ margin: 0 1% 1em; display: inline-block; max-width: 500px;}
#main-contents .wapper-special #ikeido .comment > .bnr {}
@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .bnr a{ width: 46%;}
}

/********************* loading *********************/
#loader { display: none; position: fixed; left: 50%; z-index: 100;
	_position: absolute; /* IE6対策 */
	margin-top: -71px; /* heightの半分のマイナス値 */
	margin-left: -100px; /* widthの半分のマイナス値 */
	top: 50%;
    left: 50%;
    z-index: 100;
}
#loader p { width:auto; height:16%; max-width:200px; text-align:center; margin:0 auto; color:#fff; line-height:4em}
#loader p img { height:100%}
#fade {	width: 100%; height: 100%; display: none; background:#000 ; position: absolute;  z-index: 50;}

/********************* header *********************/
#editor .wapper-special #ikeido #header .logo_header {margin: 0 auto;padding: 8px 0; text-align: center}
#editor .wapper-special #ikeido #header .logo_header img { height: 55px; width: auto;}
.logo_project2026 { margin-right: 20px }
@media screen and (min-width: 768px){
	#ikeido #header .logo_header {padding: 5px 0}
	
}

/********************* navi *********************/
#main-contents .wapper-special #ikeido nav { margin-bottom:0; background:rgb(0 0 0 / 25%);padding:0;/*position: sticky;*/ top: 0; z-index: 1}
#main-contents #ikeido nav ul{ display:flex; justify-content: space-between; width:100%;margin:0 auto;padding: 0}
#main-contents #ikeido nav ul li {width: 25%; font-size:100%; text-align:center}
#main-contents #ikeido nav ul li a{ display:block; border-bottom: none; padding:1% 0; background: none;transition: background .3s;}
#main-contents #ikeido nav ul li a:hover{background:rgba(255, 255, 255, .3); }
@media screen and (min-width: 480px){
	/*#main-contents #ikeido nav ul li { width:50%}*/
}
@media screen and (min-width: 768px){
	#main-contents #ikeido nav ul{ justify-content: center; width:100%; max-width:980px;}
	#main-contents #ikeido nav ul li { width:auto; font-size:110%;}
	#main-contents #ikeido nav ul li a{ padding:.3em 1em;}
}

/********************* #newbook  *********************/
#main-contents .wapper-special #ikeido .about .container{ padding:0 1.0em ; margin:0;max-width:980px; margin:0 auto;padding:0 1em 1em; }
#main-contents .wapper-special #ikeido .book_img {width: 40%; max-width: 250px; margin: 0 3% 1.5em; display: inline-block}
#main-contents .wapper-special #ikeido .comment{/*margin: 2em 0 4em;*/ padding: 1.5em 1em; background: rgba(255,255,255,.6) ;color: #000}
#main-contents .wapper-special #ikeido .comment h4 {margin: 0 0 .5em}
#main-contents .wapper-special #ikeido .comment p {line-height: 2.2em;font-weight: 700}

@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .about .container{padding:0 2em 1em }
	#main-contents .wapper-special #ikeido .comment{ padding: 2.5em 4em;}
}

/*以下オレハコ---------------------------*/
#main-contents .wapper-special #ikeido .orehako {background: url("../img/orehako/bg_drama.webp") no-repeat bottom center / 100% auto;background-color: #1eb5e9; color: white}
#main-contents .wapper-special #ikeido .orehako h4.deco { position: relative; padding-top:100px}
#main-contents .wapper-special #ikeido .orehako h4.deco::before { position: absolute; content: ""; background-image: url(../img/orehako/icon_runner1.webp);background-size: auto 100%;width: 80px;height:80px;top: 0px;left: calc(50% - 40px);background-repeat: no-repeat;background-position: center;}
#main-contents .wapper-special #ikeido .orehako h4.deco2::before { background-image: url(../img/orehako/icon_tonbo.webp);}
#main-contents .wapper-special #ikeido .orehako h4.deco3::before { background-image: url(../img/orehako/icon_shoes.webp);}
#main-contents .wapper-special #ikeido .orehako h4.deco4::before { background-image: url(../img/orehako/icon_stopwatch.webp);}
#main-contents .wapper-special #ikeido .orehako h5{ background: #ffe100;color: #1eb5e9;border-radius: 60px;width: fit-content;padding: .3em 1em;margin: 2.8em auto 1.5em;letter-spacing: normal;}

/*メインイメージ*/
#main-contents .wapper-special #ikeido .full-width-wrapper {position: relative; width: 100%; overflow: hidden;}
#main-contents .wapper-special #ikeido .main-image-container {position: relative;width: 100%; max-width: 800px; margin: 0 auto; overflow: visible;}
#main-contents .wapper-special #ikeido .band-wrap {position: absolute;top: clamp(10px, 5vw, 50px);left: -10px;width: calc(200vw + 10px);height: clamp(28px, 5.5vw, 56px);background: #FFE800;display: flex;align-items: center;z-index: 10;transform-origin: left top;transform: rotate(-8deg);}

#main-contents .wapper-special #ikeido .orehako .band-text-image {height: 75% ;width: auto !important;display: block;flex-shrink: 0;margin-left: 4vw;}
  @media (min-width: 601px) {
	  #main-contents .wapper-special #ikeido .orehako .band-text-image {margin-left: 7vw;}
	}
  @media (min-width: 1001px) {
	 #main-contents .wapper-special #ikeido .orehako  .band-text-image {margin-left: min(calc((100vw - 1000px) / 2 + 20px), 50px);}
  }
#main-contents .wapper-special #ikeido .main-image-wrap {position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding-top: clamp(40px, 4vw, 50px);}
#main-contents .wapper-special #ikeido .main-image {display: block;width: 100%;height: auto;}


#main-contents .wapper-special #ikeido .orehako .catch { width: 90%; max-width: 800px; margin: 0px auto 2.5em; text-align: right}
#main-contents .wapper-special #ikeido .orehako .catch .txt_drama{width:80%; margin-right: 2% }
#main-contents .wapper-special #ikeido .orehako .catch .btn_link_drama{width:17%;}

#main-contents .wapper-special #ikeido .orehako .catch_bottom { width: 90%; max-width: 600px; margin: 30px auto 15px}

/*著者コメント*/
#main-contents .wapper-special #ikeido .orehako .comment{background: rgba(255,255,255,.6) url("../img/orehako/bg_comment.webp");background-size:cover; background-position:right bottom;}

/*登場人物＆地図*/
#main-contents .wapper-special #ikeido .orehako .charactor{ background: url("../img/orehako/bg_charactor.webp") no-repeat center 50px / 100% auto;}
#main-contents .wapper-special #ikeido .orehako .charactorlist{width: 100%}
#main-contents .wapper-special #ikeido .orehako .charactorlist dl{ font-size: .9em; text-align: left;line-height: 1.2em; }
#main-contents .wapper-special #ikeido .orehako .charactorlist dl dt {display: inline-block;width: 6.5em; margin: 0; padding: 0; font-weight:bold;vertical-align: top;}
#main-contents .wapper-special #ikeido .orehako .charactorlist dl dd {display: inline-block;width: calc(100% - 7em); margin-bottom: .6em;text-align: left;}

@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .orehako .charactorlist{width: 47%}
}

/*インタビュー*/
#main-contents .wapper-special #ikeido .orehako .orehako_interview_ikeido { margin-top: 1.5em; padding: 1em 1em 0; background: rgb(255,255,255) url("../img/orehako/img_runner.webp") no-repeat bottom right/ 35% auto; border: 1px solid white; border-radius: 5px; text-align: left;line-height: 140%;}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_ikeido li{margin-bottom: 1.2em; padding-bottom: .8em;;border-bottom: 2px dashed #cfe9f4; font-weight: bold;font-feature-settings: "palt";}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_ikeido li:before {content:""; width:.5em; height:.5em; display:inline-block; background-color:#2ba1cf; border-radius:50%; position:relative; top: -1px; margin-right: .4em;}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_people li { width: 46%;border-radius: 5px; background: white; margin-top: 1.5em;}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_people li img{ width: 100%;border-radius: 5px 5px 0 0}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_people .name {font-weight: 900;padding: .3em 0 0 .7em}
#main-contents .wapper-special #ikeido .orehako .orehako_interview_people .career {padding:.1em 1em 1em 1em; line-height: 1.5em;font-size: .7em; font-weight: 100;}

@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .orehako .orehako_interview_ikeido { padding: 2em 2em 1em;}
	#main-contents .wapper-special #ikeido .orehako .orehako_interview_people li { width: 30%;}
}

/*ドラマ情報*/
/*#main-contents .wapper-special #ikeido .orehako .drama{ }*/
@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .drama .bnr a{ width: 100%;}
}

/********************* news *********************/
/*#news { width:100%; }*/
#news dl{ position:relative; margin:1em 0 0 0; text-align:left; font-size:.9rem; line-height:1.6em; display:flex; flex-wrap:wrap}
#news dt{ font-weight:bold; width: 100%}
#news dd{ margin-bottom:1.5em;}	
#news dt:nth-of-type(n + 5),
#news dd:nth-of-type(n + 5){display: none}
#news .more{text-align: right;font-size: .9rem;margin: -1em auto 1.5em;}
#news dd.finished:after{ content:"　※終了しました"; color:#f00}	
@media screen and (min-width: 768px){
	#news dt, #news dd{ display:inline-block}
	#main-contents .wapper-special #ikeido #news dt{ width:8em ; vertical-align:top; font-weight:bold;}
	#main-contents .wapper-special #ikeido #news dd{ width:calc(100% - 9em); margin-bottom:1.4em}	
	#main-contents .wapper-special #ikeido #news .more{ margin:0}
}

/********************* series *********************/
#main-contents .wapper-special #ikeido #series ul.list li {margin:1em auto}

#main-contents .wapper-special #ikeido #series .series_bookinfo { display:flex; flex-wrap:wrap; font-size: 92%}
#main-contents .wapper-special #ikeido #series .series_bookinfo > li{ width: 100% !important; padding: 2%; background: rgba(255,255,255,.6);}
#main-contents .wapper-special #ikeido #series .series_bookinfo	h4{width: fit-content;margin: -.8em auto .5em;padding: 0 .3em; background: black; color: white;font-size: 140%;}
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_catch { margin-bottom:1em; text-align: center}

/*関連ページへのリンク*/
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link {height: 6em; overflow: auto;  scrollbar-width: thin;scrollbar-color: #c9c9c9 #fff; border: 1px solid; font-size: 86%; line-height: 1.2em; padding: 1em; position: relative; text-align: left; z-index:0; background: white}		
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link li { width: 100%}
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link::before { background: black; position: absolute;padding: 0.1em .3em; top: 0; left: 0em;font-size: 90%; color: white; content: "関連ページ";}
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link span { background: #ffe1007a; margin-left: 0.5em; padding:0 1%; font-size:90%}
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link p {margin: 0.3em 0 0; line-height: 140%;}
#main-contents .wapper-special #ikeido #series .series_bookinfo .book_link li:last-child { margin-bottom:0}
#main-contents .wapper-special #ikeido #series .series_bookinfo a.button { width: fit-content; margin: 1.5em auto 0; padding: 1em 2em; border-radius: 2em; display: block; background: #efd300;}

@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido #series .series_bookinfo	h4{margin-top: -1.2em}
	#main-contents .wapper-special #ikeido #series .series_bookinfo > li{ width: 45% !important }
}

/********************* author *********************/
#main-contents .wapper-special #ikeido #author { background: rgb(250 244 206 / 40%);}
#main-contents .wapper-special #ikeido .author_img {width: 50%; margin: 1em auto}
#main-contents .wapper-special #ikeido .author_name { margin-bottom: .4em; font-size: 120%; font-weight: bold}
@media screen and (min-width: 768px){
	#main-contents .wapper-special #ikeido .author_img { float: left; width: 30%; max-width: 400px; margin:0em 5% 3em 0}
}

/*YouTubeレスポンシブ*/
#main-contents .wapper-special #ikeido .youtube { position:relative; width: 100%; margin: 3em auto 5em;max-width: 500px;}
#main-contents .wapper-special #ikeido .youtube::before { content: ""; display: block; width: 100%; padding-top: 56.25%;}
#main-contents .wapper-special #ikeido .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}