@charset "utf-8";

/* 基礎レイアウト
========================================================= */

img { width: 100%; height: auto; vertical-align: top; }

#contentsheader {
	width: 100%;
	height: 360px;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	overflow: hidden;
}
#contentsheader p.icon {
	width: 55px;
	height: 55px;
	background: url(/images/h1_special2_icon.svg) no-repeat;
	margin: 120px auto 25px;
}
#contentsheader h1 { color: #ffffff; font-size: 48px; margin-right: auto; margin-left: auto; }



@media screen and (max-width: 1199px) {
	#contentsheader { height: 320px; }
	#contentsheader p.icon { margin-top: 100px; }
}

@media screen and (max-width: 992px) {
	#contentsheader { height: 280px; }
	#contentsheader p.icon { margin-top: 80px; }
}

@media screen and (max-width: 768px) {
	#contentsheader { height: 240px; }
	#contentsheader p.icon { width: 44px; height: 44px; margin-top: 60px; margin-bottom: 22px; }
	#contentsheader h1 { font-size: 36px; }
}

@media screen and (max-width: 480px) {
	#contentsheader { height: 160px; }
	#contentsheader p.icon { width: 33px; height: 33px; margin-top: 40px; margin-bottom: 16px; }
	#contentsheader h1 { font-size: 24px; }
}

#snsArea .sns_icon_area .fb-share-button,
#snsArea .sns_icon_area .twitter-share-button {
	display: inline-block;
	vertical-align: bottom;
}





/* book
========================================================= */

#book { line-height: 1.0; }



@media screen and (max-width: 767px) {
	
}





/* bookMain
========================================================= */

#book .main { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); margin: 50px 0 0 0; }
#book .main h2 { width: 100%; max-width: 1100px; margin: 0 auto; }

#book .main .lead { width: 100%; max-width: 1100px; display: table; margin: 0 auto; position: relative; }
#book .main .lead p { float: left; font-size: 20px; line-height: 1.9; margin: 40px 0; }
#book .main .lead div {
	width: calc(320/1100 * 100%);
	max-width: 320px;
	float: right;
	margin: calc(-160/1100 * 100%) 20px 0 0;
}
#book .main .lead div table { font-size: 14px; line-height: 1.7; margin: 15px auto 0; }
#book .main .lead div table td:first-child { white-space: nowrap; text-align: right; }



@media screen and (max-width: 1200px) {
	#book .main .lead p { font-size: 1.65vw; }
	#book .main .lead div table { font-size: 1.1vw; }
}

@media screen and (max-width: 767px) {
	#book .main { margin: 20px 0 0 0; }
	#book .main .lead p { float: none; display: block; font-size: 15px; line-height: 1.5; margin: 20px 0; }
	#book .main .lead p br { display: none; }
	#book .main .lead div {
		width: 100%;
		max-width: 100%;
		float: none;
		display: table;
		margin: 20px 0 0 0;
	}
	#book .main .lead div img { width: 180px; display: table; margin: 0 auto; }
	#book .main .lead div table { font-size: 12px; line-height: 1.5; margin: 15px auto 0; }
}





/* title
========================================================= */

#book .sectionTitle { width: 100%; margin: 70px 0 0 0; }
#book section + .sectionTitle { margin: 120px 0 0 0; }
#book .writerTitle + .sectionTitle,
#book .storeTitle + .sectionTitle { margin: 50px 0 0 0; }
#book .sectionTitle:after {
	content: "";
	width: 100%;
	height: 2px;
	display: block;
	background: #333333;
	margin: -2px 0 0 0;
}
#book .sectionTitle .title {
	width: 390px;
	border-right: solid 2px #333333;
	border-left: solid 2px #333333;
	box-sizing: border-box;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}
#book .sectionTitle .title img {
	width: 390px;
	transform: translateX(-50%);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
}
#book .sectionTitle .title img + img { display: none; }
#book .sectionTitle .titleInner {
	background: #ffffff;
	text-align: center;
	position: relative;
	z-index: 2;
}
#book .sectionTitle .titleInner p:first-child { font-size: 20px; padding: 60px 0 5px 0; }
#book .sectionTitle .titleInner h3 { font-size: 36px; line-height: 1.4; font-weight: bold; padding: 80px 0 0 0; }
#book .sectionTitle .titleInner p + h3 { padding: 0; }
#book .sectionTitle .titleInner h3 + p {
	width: 150px;
	border-radius: 15px;
	background: #fad6d8;
	font-size: 18px;
	line-height: 30px;
	margin: 5px auto 0;
}

#book .writerTitle { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#book .writerTitle img { width: 100%; max-width: 920px; display: block; margin: 150px auto 0; }
#book .writerTitle dl { display: table; text-align: center; margin: 120px auto 0; }
#book .writerTitle img + dl { margin: 60px auto 0; }
#book .writerTitle dt { font-size: 20px; }
#book .writerTitle dd { font-size: 36px; margin: 10px 0 0 0; }

#book .storeTitle { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#book .storeTitle img { width: 100%; max-width: 760px; display: block; margin: 150px auto 0; }
#book .storeTitle p { display: table; font-size: 36px; text-align: center; margin: 120px auto 0; }
#book .storeTitle img + p { margin: 60px auto 0; }

#book .usedTitle { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#book .usedTitle img { width: 100%; max-width: 860px; display: block; margin: 150px auto 0; }

#book .cafeBarTitle { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#book .cafeBarTitle img { width: 100%; max-width: 811px; display: block; margin: 150px auto 0; }



@media screen and (max-width: 767px) {
	#book .sectionTitle { width: 100%; margin: 50px 0 0 0; }
	#book section + .sectionTitle { margin: 80px 0 0 0; }
	#book .writerTitle + .sectionTitle,
	#book .storeTitle + .sectionTitle { margin: 20px 0 0 0; }
	#book .usedTitle + .sectionTitle,
	#book .cafeBarTitle + .sectionTitle { margin: 30px 0 0 0; }
	
	#book .sectionTitle .title { width: 240px; }
	#book .sectionTitle .title img { width: 240px; }
	#book .sectionTitle .title img:first-child { display: none; }
	#book .sectionTitle .title img + img { display: block; }
	#book .sectionTitle .titleInner p:first-child { font-size: 15px; padding: 35px 0 5px 0; }
	#book .sectionTitle .titleInner h3 { font-size: 23px; padding: 45px 0 0 0; }
	#book .sectionTitle .titleInner h3 + p {
		width: 120px;
		border-radius: 12px;
		font-size: 14px;
		line-height: 24px;
	}
	
	#book .writerTitle img { margin: 100px auto 0; }
	#book .writerTitle dl { margin: 70px auto 0; }
	#book .writerTitle img + dl { margin: 40px auto 0; }
	#book .writerTitle dt { font-size: 15px; }
	#book .writerTitle dd { font-size: 24px; }
	
	#book .storeTitle img { margin: 100px auto 0; }
	#book .storeTitle p { font-size: 23px; margin: 70px auto 0; }
	#book .storeTitle img + p { margin: 30px auto 0; }
	
	#book .usedTitle img { margin: 100px auto 0; }
	
	#book .cafeBarTitle img { margin: 100px auto 0; }
}





/* content
========================================================= */

#book section { width: 100%; box-sizing: border-box; padding: 30px calc(20/375 * 100%) 0; }
#book section .content { width: 100%; max-width: 920px; margin: 0 auto; }
#book section .content .cap { font-size: 14px; line-height: 1.7; margin: 5px 0 0 0; }
#book section .content .cap.taC { text-align: center; }
#book section .content .cap + img { margin: 25px 0 0 0; }

#book section .content img.w560 { width: calc(560/920 * 100%); min-width: 240px; display: block; margin: 0 auto; }

#book section .content .text { font-size: 18px; line-height: 1.7; overflow: hidden; margin: 50px 0 0 0; }
#book section .content.content01 .text { margin: 90px 0 0 0; }
#book section .content .text h4 {
	color: #ec6d6e;
	font-size: 30px;
	line-height: 1.2;
	font-weight: bold;
	margin: 0 0 30px 0;
}
#book section .content .text li:nth-child(1) { width: calc(560/920 * 100%); float: left; }
#book section .content .text li:nth-child(2) { width: calc(300/920 * 100%); float: right; }
#book section .content .text p + img {
	width: calc(620/920 * 100%);
	max-width: 620px;
	display: block;
	margin: 20px auto 0;
}

#book section .content .data {
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
	font-size: 16px;
	line-height: 1.7;
	box-sizing: border-box;
	padding: 30px;
	margin: 40px 0 0 0;
	position: relative;
}
#book section .content .data ul { width: 100%; display: table; }
#book section .content .data li { float: left; }
#book section .content .data li.img { width: calc(150/860 * 100%); margin: 0 30px 0 0; }
#book section .content .data ul + img {
	width: calc(300/920 * 100%);
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	right: 30px;
}
#book section .content .data table td:first-child { text-align: right; white-space: nowrap; }

#book section .content .info {
	background: #fce4e1;
	font-size: 18px;
	line-height: 1.7;
	box-sizing: border-box;
	padding: 40px 50px;
	margin: 120px 0 0 0;
}
#book section .content.content08 .info { background: #f4ecde; }
#book section .content .info p {
	color: #ec6d6e;
	font-size: 24px;
	line-height: 1.2;
	font-weight: bold;
	margin: 0 0 10px 0;
}
#book section .content .info dl { line-height: 1.2; margin: 0 0 35px 0; }
#book section .content .info dt {
	color: #333333;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho Pro", serif;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 0.3em;
	margin: 0 0 10px 0;
}
#book section .content .info dd { font-size: 16px; }
#book section .content .info ul { overflow: hidden; }
#book section .content .info li:nth-child(1) { width: calc(530/820 * 100%); float: left; }
#book section .content .info li:nth-child(2) { width: calc(230/820 * 100%); max-width: 230px; float: right; }
#book section .content.content08 .info li:nth-child(1) { width: calc(470/820 * 100%); float: left; }
#book section .content.content08 .info li:nth-child(2) { width: calc(290/820 * 100%); max-width: 290px; float: right; }

#book section .content .onlyOne {
	border: solid 3px #000000;
	font-size: 18px;
	line-height: 1.7;
	box-sizing: border-box;
	padding: 45px 45px 40px;
	margin: 130px 0 0 0;
	position: relative;
}
#book section .content .onlyOne p { width: 232px; position: absolute; top: -34px; left: calc(200/920 * 100%); }
#book section .content .onlyOne ul { overflow: hidden; }
#book section .content .onlyOne li:nth-child(1) { width: calc(230/824 * 100%); max-width: 230px; float: left; }
#book section .content .onlyOne li:nth-child(2) { width: calc(530/824 * 100%); float: right; }
#book section .content .onlyOne dl { font-size: 14px; margin: 7px 0 0 0; }
#book section .content .onlyOne dt { font-weight: bold; }
#book section .content .onlyOne dd {
	border-top: solid 1px #cccccc;
	font-size: 14px;
	padding: 7px 0 0 0;
	margin: 4px 0 0 0;
}
#book section .content .onlyOne dd span { font-size: 18px; font-weight: bold; }



@media screen and (max-width: 767px) {
	#book section .content .cap { font-size: 12px; line-height: 1.5; }
	
	#book section .content .text { font-size: 15px; line-height: 1.5; margin: 30px 0 0 0; }
	#book section .content.content01 .text { margin: 45px 0 0 0; }
	#book section .content .text h4 { font-size: 22px; margin: 0 0 10px 0; }
	#book section .content .text li:nth-child(1) { width: 100%; float: none; }
	#book section .content .text li:nth-child(2) { width: 100%; max-width: 240px; float: none; margin: 20px auto 0; }
	#book section .content .text p + img { width: 100%; }
	
	#book section .content .data { font-size: 14px; line-height: 1.5; padding: 20px 15px; }
	#book section .content .data li { float: none; display: table; margin: 0 auto; }
	#book section .content .data li + li { margin: 30px auto 0; }
	#book section .content .data li.img { width: 150px; margin: 0 auto; }
	#book section .content .data li.img.w100 { width: 100px; }
	#book section .content .data ul + img { width: 180px; transform: none; top: 20%; right: 15px; }
	
	#book section .content .info { font-size: 15px; line-height: 1.5; padding: 20px; margin: 50px 0 0 0; }
	#book section .content .info p { font-size: 20px; }
	#book section .content .info dl { margin: 0 0 20px 0; }
	#book section .content .info dt { font-size: 22px; }
	#book section .content .info dd { font-size: 14px; }
	#book section .content .info li:nth-child(1) { width: 100%; float: none; }
	#book section .content .info li:nth-child(2) { width: 100%; float: none; margin: 20px auto 0;  }
	#book section .content.content08 .info li:nth-child(1) { width: 100%; float: none; }
	#book section .content.content08 .info li:nth-child(2) { width: 100%; float: none; margin: 20px auto 0; }
	
	#book section .content .onlyOne {
		border: solid 2px #000000;
		font-size: 15px;
		line-height: 1.5;
		padding: calc(30/375 * 100%) 20px 20px;
		margin: 80px 0 0 0;
	}
	#book section .content .onlyOne p {
		width: calc(232/685 * 100%);
		min-width: 150px;
		top: -24px;
		right: 0;
		left: 0;
		margin: auto;
	}
	#book section .content .onlyOne li:nth-child(1) { width: 100%; float: none; margin: 0 auto; }
	#book section .content .onlyOne li:nth-child(2) { width: 100%; float: none; margin: 20px 0 0 0; }
	#book section .content .onlyOne dl { font-size: 14px; margin: 7px 0 0 0; }
	#book section .content .onlyOne dd span { font-size: 16px; font-weight: bold; }
}

@media screen and (max-width: 480px) {
	#book section .content .data li.img.left { margin: 0; }
}





/* 汎用パーツ
========================================================= */

/* plusIssue
------------------------------------------ */

.plusIssue { display: table; padding: 0 calc(20/375 * 100% ); margin: 100px auto 40px; }
.plusIssue div { display: table-cell; vertical-align: middle; }
.plusIssue div:nth-child(1) { width: 140px; }
.plusIssue div:nth-child(2) { padding: 0 0 0 20px; }
.plusIssue p { text-align: center; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.plusIssue a {
	border: solid 2px #cacaca;
	display: table;
	font-size: 16px;
	padding: 0.5em 2em;
	margin: 15px auto 0;
}
.plusIssue ul { display: table; font-size: 13px; line-height: 20px; margin: 15px auto 0; }
.plusIssue li { display: table-cell; vertical-align: top; }

@media screen and (max-width: 767px) {
	.plusIssue { margin: 80px auto 40px; }
	.plusIssue div { display: block; }
	.plusIssue div:nth-child(2) { padding: 0; }
	.plusIssue div:nth-child(1) { margin: 0 auto 15px; }
	.plusIssue a { font-size: 14px; }
	.plusIssue ul { font-size: 12px; }
}



/* detailsLink
------------------------------------------ */

.detailsLink1 { width: 100%; max-width: 200px; margin: 15px 0 0 0; }
.detailsLink1 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

.detailsLink2 { width: 100%; max-width: 260px; margin: 15px auto 0; }
.detailsLink2 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

@media screen and (min-width: 769px) {
	.detailsLink1 a { transition: 0.2s; }
	.detailsLink1 a:hover { background-color: #e6e6e6; color: #000000; }
	
	.detailsLink2 a { transition: 0.2s; }
	.detailsLink2 a:hover { background-color: #e6e6e6; color: #000000; }
}

@media screen and (max-width: 767px) {
	.detailsLink1 { margin: 15px auto 0; }
	.detailsLink2 { margin: 15px auto 0; }
}