@charset "UTF-8";

/*--------------------------------------------------------------------
/- file   : kitanroom210716.css
/- admin  : TAAP Co.,Ltd.
/- update : 20210716
/- desc   : css for publications.asahi.com
/--------------------------------------------------------------------*/

body{
	font-family: "ヒラギノ角ゴシック";
}

#homeContentHolder{
  background-color:#010101;
}

/* header */
#top{
background-color: #154260;
color: #fff;
padding: 16px 0;
margin-bottom: 24px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}

@media screen and (max-width: 640px) {
#top{
padding: 8px 0;
}
}

#top .h1__heading{
display: flex;
justify-content: center;
gap: clamp(8px, 1.6vw, 16px);
background:none;
}

@media screen and (max-width: 640px) {
#top .h1__heading{
flex-direction: column;
align-items: center;
}
}

#top .h1__author{
font-size: clamp(10px, 1.8vw, 18px);
background-color: #fff;
padding: clamp(4px, 0.8vw, 8px) ;
color: #000;
border-radius: 10px;
letter-spacing: 0.25rem;
display: inline-block;
}
@media screen and (max-width: 640px) {
#top .h1__author{
padding-right: 8px ;
padding-left: 8px ;
}
}

#top .h1__title{
display: inline-block;
display: flex;
align-items: flex-end;
column-gap: 8px;
}

#top .h1__series{
font-family: Noto Serif JP, serif;
font-size: clamp(18px, 2.4vw, 24px);
line-height: 1;
color:#fff!important;
}

#top small{
font-size: clamp(8px, 1.6vw, 16px);
color:#fff!important;
}

h1{
	color: #000;
}

.header__hayamine{
display: flex;
justify-content: center;
align-items: center;
column-gap: 10px;
margin-bottom: 24px;
padding: 0 16px;
margin-top: clamp(100px,9vw,90px); /* 固定ヘッダーの高さに合わせて調整 */
width: fit-content;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 640px) {
header .h1__heading{
flex-direction: column;
align-items: center;
}
}

.hayamine__icon{
display: flex;
flex-direction: column;
max-width: 50px;
width: 100%;
align-items: center;
}
.hayamine__icon img{
    width: 100%;
}

.hayamine__icon span{
font-size: 10px;
display: inline-block;
width: fit-content;
}

.hayamine__speech{
  position: relative;
}

.hayamine__text{
font-size: clamp(13px, 1.4vw, 14px);
position: absolute;
top: 48%;
left: 57%;
transform: translate(-50%, -50%);
width: 100%;
line-height:1.5;
}

@media screen and (max-width: 640px) {
.hayamine__speech img{
height: 60px;
}
}

ul li{
	list-style-type: none;
}
#kitanroomContentWrap{
	color: #fff;
	font-feature-settings: "palt";
}
/*背景画像*/

#kitanroomBackgroundImg{
	width:650px;
	background-color: #000;
	background-image: url("/design_items/pc/img/kitanroom/img_bg_210716_cut.jpg");
	background-repeat: no-repeat;
	display: block;
	position: relative;
}


/*NavArea*/

.kitanroomNavWrap{
	width:650px;
	background-image: url("/design_items/pc/img/kitanroom/img_header_210716.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
}

.kitanroomNavArea{
	background-image: url("/design_items/pc/img/kitanroom/bg_nav.png");
	width:650px;
	height: 75px;
	position: relative;
	margin-bottom: -100px;
	z-index: 2;
}

/* ナビボタン共通 */
#kitanroomNavLnk01 > a,#kitanroomNavLnk02 > a,#kitanroomNavLnk03 > a,#kitanroomNavLnk04 > a,#kitanroomNavLnk05 > a {
	display: block;
	height: 44px;
	width: 110px;
	color: #fff;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 2.6;
	border: 3px solid #fff;
	background : linear-gradient(180deg, rgba(119, 183, 229, 1) 0%, rgba(110, 178, 226, 1) 5.69%, rgba(84, 164, 218, 1) 15.16%, rgba(43, 141, 205, 1) 27.15%, rgba(0, 118, 191, 1) 37.97%, rgba(50, 105, 186, 1) 44.6%, rgba(104, 90, 181, 1) 52.68%, rgba(150, 78, 177, 1) 60.85%, rgba(188, 68, 173, 1) 68.96%, rgba(217, 60, 171, 1) 76.97%, rgba(238, 54, 169, 1) 84.87%, rgba(251, 51, 167, 1) 92.61%, rgba(255, 50, 167, 1) 100%);
}

#kitanroomNavLnk01 > a:hover,#kitanroomNavLnk02 > a:hover,#kitanroomNavLnk03 > a:hover,#kitanroomNavLnk04 > a:hover,#kitanroomNavLnk05 > a:hover {
	background : linear-gradient(180deg, rgba(119, 183, 229, 1) 0%, rgba(110, 178, 226, 1) 2.64%, rgba(84, 164, 218, 1) 7.03%, rgba(43, 141, 205, 1) 12.59%, rgba(0, 118, 191, 1) 17.61%, rgba(52, 104, 186, 1) 26.69%, rgba(105, 90, 181, 1) 37.31%, rgba(151, 78, 177, 1) 48.06%, rgba(188, 68, 173, 1) 58.74%, rgba(218, 60, 171, 1) 69.32%, rgba(238, 54, 169, 1) 79.78%, rgba(251, 51, 167, 1) 90.07%, rgba(255, 50, 167, 1) 100%);
	background-position: 0 bottom;
}

/* ナビボタン1 */
#kitanroomNavLnk01{
	display:block;
	position: absolute;

	top: 12px;
	left: 20px;
}

/* ナビボタン2 */
#kitanroomNavLnk02{
	display:block;
	position: absolute;

	top: 12px;
	left: 144px;
}

/* ナビボタン3 */
#kitanroomNavLnk03{
	display:block;
	position: absolute;

	top: 12px;
	left: 268px;
}

/* ナビボタン4 */
#kitanroomNavLnk04{
	display:block;
	position: absolute;

	top: 12px;
	left: 392px;
}

/* ナビボタン5 */
#kitanroomNavLnk05{
	display:block;
	position: absolute;
	
	top: 12px;
	left: 514px;
}

.fixed {
	/* position: fixed; */
	top: 0;
	width:650px;
	z-index: 10000;
}


#kitanroomNav1{
	padding-top: 100px;
	/* margin-top: -100px; */
}

#kitanroomNav2{
	padding-top: 100px;
	margin-top: -100px;
}

#kitanroomNav3{
	padding-top: 100px;
	margin-top: -150px;
}

#kitanroomNav4{
	padding-top: 100px;
	margin-top: -50px;
}

#kitanroomNav5{
	padding-top: 100px;
	margin-top: -50px;
}

/********** コンテンツ画像 **********/
/* ヘッダー */
.kitanroomHeaderImg{
	background-image: url("/design_items/pc/img/kitanroom/img_header_210716.png");
	width: 650px;
	height: 874px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.kitanroomHeaderTitleSTxt{
	font-size: 17px;
	color: #ff32a7;
	font-weight: bold;
	text-align: center;
	display: block;
	width: 550px;
	position: absolute;
	top: 84px;
	left: 52px;
}
.kitanroomHeaderTitleLTxt{
	font-size: 54px;
	color: #ff32a7;
	font-weight: bold;
	text-align: center;
	display: block;
	width: 650px;
	line-height: 1;
	letter-spacing: 0.5em;
	position: absolute;
	top: 111px;
}
.kitanroomHeaderTitleLTxt:after{
	content:"";
	margin: 0 -0.5em 0 0;
}
.kitanroomHeaderTitleMTxt{
	display: block;
	font-size: 28px;
	color: #ff32a7;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 170px;
	left: 110px;
}
.kitanroomHeaderCartoonistTxt{
	position: absolute;
	top:557px;
	left: 572px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	font-size: 21px;
	color: #ff32a7;
	font-weight: bold;
}
.kitanroomHeaderDateTxt{
	font-size: 24px;
	font-weight: bold;
	position: absolute;
	top: 817px;
	left: 355px;
}
.kitanroomHeaderPriceTxt{
	font-size: 18px;
	position: absolute;
	top: 842px;
	left: 355px;
}

/* 作品紹介 */
.kitanroomIntroductionImg{
	background-image: url("/design_items/pc/img/kitanroom/img_introduction_210716_cut.png");
	width: 650px;
	height: 520px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.kitanroomIntroductionH2Wrap{
	display: block;
	width: 200px;
	height: 60px;
	position: relative;
	background-color:#ff32a7 !important;
	transform: rotate(-10deg);
	margin: 0 0 0 50px !important;
	padding: 0 !important;
}
.kitanroomIntroductionH2Txt{
	display: block;
	font-size: 24px;
	line-height: 2.5;
	text-align: center;
	font-weight: bold;
}
.kitanroomIntroductionMurdererSpeechbubbleTxt{
	font-size: 29px;
	color:#ff32a7;
	position: absolute;
	top: 85px;
	left: 100px;
	font-family: "ヒラギノ丸ゴ ProN W4" !important;
    line-height: 1.3;
}
.kitanroomIntroductionDescriptionTxt{
	font-size: 18px;
	line-height: 1.75;
	font-weight: bold;
	position: absolute;
	top: 250px;
	left: 80px;
}
.kitanroomIntroductionAuthorTxt{
	font-size: 12px;
	line-height: 1.75;
	font-weight: bold;
	position: absolute;
	top: 600px;
	left: 74px;
}
.kitanroomIntroductionAuthorSpeechbubbleTxt{
	font-size: 18px;
	line-height: 1.75;
	font-family: "ヒラギノ丸ゴ ProN W4" !important;
	position: absolute;
	top: 520px;
	left: 209px;
}
.kitanroomIntroductionH3Wrap{
	display: block;
	width: 110px;
	height: 35px;
	position: absolute;
	top: 680px;
	background-color:#ff32a7 !important;
	transform: rotate(-10deg);
	margin: 0 0 0 50px !important;
	padding: 0 !important;
}
.kitanroomIntroductionH3Txt{
	display: block;
	font-size: 14px;
	line-height: 2.5;
	text-align: center;
	font-weight: bold;
}
.kitanroomIntroductionNovelTxt{
	font-size: 14px;
	line-height: 1.75;
	position: absolute;
	top: 890px;
	left: 300px;
}
.kitanroomIntroductionPresentTitleTxt{
	font-size: 36px;
	font-weight: bold;
	color:#ff32a7;
	position: absolute;
	top: 1100px;
	left: 100px;
}
.kitanroomIntroductionPresentDescriptionTxt{
	font-size: 24px;
	position: absolute;
	top: 1144px;
	left: 100px;
}
.kitanroomIntroductionPresentExpirationTxt{
	font-size: 14px;
	position: absolute;
	top: 1218px;
	left: 100px;
}

/* common__btn */
.common__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: clamp(14px, 2vw, 20px);
font-family: "Noto Serif JP", serif;
font-weight: bold;
color: #000!important;
background-color: #FFF100;
padding: 8px;
border-radius: 16px;
text-decoration: none;
border: 2px solid #000;
max-width: clamp(170px,25vw,250px);
width: 100%;
box-shadow: 6px 6px 0 #fff;
transition: all 0.1s ease;
position: absolute;
bottom: 110px;
left: 50%;
transform: translate(-50%, 50%);
text-decoration: none!important;
}

.common__btn:hover {
box-shadow: 0 0 0 #fff;
}

.common__btn img {
max-width: 20%;
width: 100%;
height: auto;
}

/* 書籍情報 */
.kitanroomBookImg{
border: dashed 1.5px #fff;
margin: 0 20px;
padding-bottom: 40px;
}
.book__inner{
display: flex;
gap: 24px;
justify-content: center;
padding-top: 40px;
}

.book__img{
width: 34%;
position: relative;
left: 0;
text-align: center;
}

.book__img img{
width: 100%;
}

.detail__btn{
display: inline-block;
text-decoration: none;
color: #000!important;
width: 180px;
height: 36px;
text-align: center;
line-height: 2.3;
border-radius: 10px;
border: solid 1px #000;
font-weight: bold;

margin-inline: auto;
background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
text-decoration: none!important;
}

.detail__btn:hover{
background: linear-gradient(to bottom, #fff 0%, #dbdbdb 80%);
}

.heading-book{
padding: 18px 4px 8px;
}

.book__info{
	position: relative;
}

.book__info div{
margin-bottom: clamp(16px, 3.2vw, 32px);
}

.book__info h3{
font-size: 24px!important;
letter-spacing: 0.25rem;
margin-bottom: clamp(4px, 0.8vw, 8px);
}

.book__info p{
margin-bottom: clamp(8px, 1.6vw, 16px);
line-height: 1.8;
}

.book__info span{
font-size: clamp(12px, 1.6vw, 16px);
}

/* book__btn */
.book__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: clamp(12px, 1.6vw, 16px);
font-family: "Noto Serif JP", serif;
font-weight: bold;
color: #000!important;
background-color: #FFF100;
padding: 8px;
border-radius: 16px;
text-decoration: none;
border: 2px solid #000;
max-width: clamp(100px,17vw,170px);
width: 100%;
box-shadow: 6px 6px 0 #fff;
transition: all 0.1s ease;
text-decoration: none!important;
margin-top: 8px;
}

.book__btn:hover {
box-shadow: 0 0 0 #fff;
}

.book__btn img {
max-width: 20%;
width: 100%;
height: auto;
}

/* 登場人物 */
.kitanroomCharacterImg{
	background-image: url("/design_items/pc/img/kitanroom/img_character_210716.png");
	width: 650px;
	height: 1474px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.kitanroomCharacterH2Wrap{
	display: block;
	width: 200px;
	height: 60px;
	position: relative;
	background-color:#ff32a7 !important;
	transform: rotate(-10deg);
	margin: 0 0 0 50px !important;
	padding: 0 !important;
}
.kitanroomCharacterH2Txt{
	display: block;
	font-size: 21px;
	text-align: center;
	font-weight: bold;
	padding: 3px 0 0 0;
}
.kitanroomPolarbearNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 224px;
	left: 51px;
	font-weight: bold;
}
.kitanroomPolarbearSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 140px;
	left: 210px;
}
.kitanroomWolfSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 286px;
	left: 78px;
}
.kitanroomWolfNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 370px;
	left: 490px;
	font-weight: bold;
}
.kitanroomRaccoondogNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 515px;
	left: 45px;
	font-weight: bold;
}
.kitanroomRaccoondogSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 448px;
	left: 210px;
}
.kitanroomElephantSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 576px;
	left: 75px;
}
.kitanroomElephantNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 640px;
	left: 512px;
	font-weight: bold;
}
.kitanroomKoalaNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 765px;
	left: 45px;
	font-weight: bold;
}
.kitanroomKoalaSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 693px;
	left: 210px;
}
.kitanroomLionSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 812px;
	left: 75px;
}
.kitanroomLionNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 884px;
	left: 490px;
	font-weight: bold;
}
.kitanroomPantherNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 1010px;
	left: 45px;
	font-weight: bold;
}
.kitanroomPantherSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 933px;
	left: 210px;
}
.kitanroomCheetahSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 1062px;
	left: 77px;
}
.kitanroomCheetahNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 1126px;
	left: 487px;
	font-weight: bold;
}
.kitanroomSheepNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 1267px;
	left: 58px;
	font-weight: bold;
}
.kitanroomSheepSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 1177px;
	left: 210px;
}
.kitanroomMeSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px !important;
	line-height: 1.75;
	position: absolute;
	top: 1327px;
	left: 74px;
}
.kitanroomMeNameTxt{
	font-size: 12px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 1412px;
	left: 520px;
	font-weight: bold;
}

/* インタビュー */
.kitanroomInterviewImg{
	background-image: url("/design_items/pc/img/kitanroom/img_interview_210716.png");
	width: 650px;
	height: 1980px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.kitanroomInterviewH2Wrap{
	display: block;
	width: 300px;
	height: 60px;
	position: relative;
	background-color:#ff32a7 !important;
	transform: rotate(-10deg);
	margin: 0 0 0 50px !important;
	padding: 0 !important;
}
.kitanroomInterviewH2Txt{
	display: block;
	font-size: 21px;
	text-align: center;
	font-weight: bold;
	padding:3px 0 0 0;
}
.kitanroomInterviewAuthorNameTxt{
	font-size: 12px;
	line-height: 1.75;
	position: absolute;
	top: 236px;
	left: 74px;
	font-weight: bold;
}
.kitanroomInterviewSpeechbubbleTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 32px;
	line-height: 1.5;
	position: absolute;
	top: 138px;
	left: 210px;
}
.kitanroomInterviewDescriptionTxt{
	font-size: 14px;
	line-height: 1.75;
	position: absolute;
	top: 323px;
	left: 180px;
	width: 420px;
}
.kitanroomInterviewQandAWrap{
	width: 550px;
	margin: 0 auto;
	position: absolute;
	top: 420px;
	left: 50px;
}
.kitanroomInterviewQuestionTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px;
	line-height: 1.75;
	color:#ff32a7;
	margin: 0 0 40px 0;
}
.kitanroomInterviewAnswerTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 28px 0;
}
.kitanroomInterviewQuestionIndentTxt{
	text-indent: 1em;
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 18px;
	line-height: 1.75;
	color:#ff32a7;
	margin: 0 0 28px 0;
}
.kitanroomInterviewCautionTxt{
	font-family: "ヒラギノ丸ゴ ProN W4";
	font-size: 12px;
}
.kitanroomInterviewProfileNameTxt{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.75;
	position: absolute;
	top: 1740px;
	left: 180px;
	width: 420px;
}
.kitanroomInterviewProfileTxt{
	font-size: 12px;
	line-height: 1.75;
	position: absolute;
	top: 1771px;
	left: 180px;
	width: 420px;
}

/* Youtube */
.kitanroomYoutubeImg{
	background-image: url("/design_items/pc/img/kitanroom/img_youtube_210716.png");
	width: 650px;
	height: 500px;
	background-size: contain;
	background-repeat: no-repeat;
}
.kitanroomYoutubeH2Wrap{
	display: block;
	width: 200px;
	height: 60px;
	position: relative;
	background-color:#ff32a7 !important;
	transform: rotate(-10deg);
	margin: 0 0 0 50px !important;
	padding: 0 !important;
}
.kitanroomYoutubeH2Txt{
	display: block;
	font-size: 24px;
	line-height: 2.5;
	text-align: center;
	font-weight: bold;
	color:#fff;
}

.kitanroomYoutubeIframe{
	display: block;
	margin: 20px auto 0;
}
/* 試し読みボタン */
.kitanroomTrial_Btn{
	display: block;
    position: absolute;
    width: 250px;
    height: 80px;
    top: 938px;
    left: 300px;
}
    
.kitanroomTrial_Btn > a {
	display: block;
    width: 250px;
    height: 80px;
	background: url("/design_items/pc/img/kitanroom/btn_trial.png") no-repeat 0 0;
	position: absolute;
}

.kitanroomTrial_Btn > a:hover {
	background-position: 0 bottom;
}

/* 詳細ページボタン */
.kitanroomDetail_Btn{
    display: block;
    position: absolute;
    width: 180px;
    height: 36px;
    top: 980px;
    left: 102px;
}
    
.kitanroomDetail_Btn > a {
	display: block;
    width: 180px;
    height: 36px;
	background: url("/design_items/pc/img/kitanroom/btn_detail.png") no-repeat 0 0;
	position: absolute;
}

.kitanroomDetail_Btn > a:hover {
	background-position: 0 bottom;
}

ruby {
ruby-position: over; /* 通常はデフォルトでOK */
line-height: 1.7;
}

ruby rt {
font-size: 0.55em;
position: relative;
top: -0.2em;  /* ルビの上下位置を微調整 */
line-height: 1;
}

footer {
position: relative;
padding: 40px 16px;
text-align: center;
background: #fff;
font-size: 12px;
margin-top:0!important;
}

.copyright {
margin-bottom: 16px;
color: #000;
}