/* dr_egg_230425 */
body{
	background-image:linear-gradient(to bottom, #009ce5, #b7dff5, #fff);
	font-family: "ヒラギノ丸ゴ Pro W4", sans-serif;
	font-feature-settings: "palt";
}
/* 背景画像を含めた全体のフレックスボックス */
.drEggFlexBox{
	display: flex;
}
/* 左側の背景画像 */
.drEggLeftImg{
	flex: 1;
	background: url("/design_items/pc/img/dr_egg/img_background_220302.png") repeat;
	background-size: 32px 32px;
}
/* 背景以外のフレックスボックス */
.drEggMainWrap{
	flex: 1;
}
header{
	position: relative;
}
/* トップ画像 */
.drEggHeaderImg{
	width: 980px;
	margin: 0 auto;
	display: block;
}


/************************** 追加 **************************/

/* トップ画像（タイトル） */
.drEggHeaderTitleImg{
	width: 980px;
	margin: 0 auto;
	display: block;
}

/* トップ画像（イラスト） */
.drEggHeaderIllustImg{
	width: 980px;
	margin: 0 auto;
	display: block;
}

/************************** 追加 **************************/


/* SNSリンク */
.drEggSNSLnk{
	display: block;
	width: 100%;
	min-height: 20px;
	margin: 15px auto;
	text-align: right;
	font-size: 12px;
	line-height: 1.5;
	position: absolute;
	top: 0;
	right: 50px;
}
.drEggTwitter{
	text-decoration: none;
	color: #fff;
}
a:hover.drEggTwitter{
	text-decoration: underline;
}
.drEggFacebook{
	margin: 0 0 0 20px;
	text-decoration: none;
	color: #fff;
}
a:hover.drEggFacebook{
	text-decoration: underline;
}

/* YouTube */
.drEggYouTubeWrap{
	display: block;
	width: 980px;
	margin: 0 auto 40px;
}
.drEggYouTubeWrap iframe {
	width: 860px;
	height: 483px;
	margin: 40px auto;
	display: block;
}
.drEggHeaderIllustImgWrap{
	height: 474px;
	margin: 0 auto 40px;
	position: relative;
}
/* ヤン博士 */
.drEggYangWrap{
	width: 100px;
	border-radius: 10px;
	padding: 10px;
	background-color: #fff;
	position: absolute;
	top: 280px;
	left: 270px;
}
.drEggYangWrap > h2{
	font-size: 18px;
	color: #f08300;
	text-align: center;
	line-height: 1.2;
	border-bottom: 6px dotted;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.drEggYangWrap, .drEggEggWrap, .drEggWungWrap> p{
	font-size: 12px;
	line-height: 1.75;
}
/* エッグ博士 */
.drEggEggWrap{
	width: 140px;
	border-radius: 10px;
	padding: 10px;
	background-color: #fff;
	position: absolute;
	top: 280px;
	left: 532px;
}
.drEggEggWrap > h2{
	font-size: 18px;
	color: #45b035;
	text-align: center;
	line-height: 1.2;
	border-bottom: 6px dotted;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
/* ウン博士 */
.drEggWungWrap{
	width: 100px;
	border-radius: 10px;
	padding: 10px;
	background-color: #fff;
	position: absolute;
	top: 280px;
	left: 810px;
}
.drEggWungWrap > h2{
	font-size: 18px;
	color: #0068b7;
	text-align: center;
	line-height: 1.2;
	border-bottom: 6px dotted;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
/* 本についての説明文 */
.drEggDescriptionWrap{
	display: block;
	width: 780px;
	border-radius: 20px;
	background-color: #95c036;
	margin: 0 auto;
	position: relative;
}
.drEggDescriptionImg{
	width: 780px;
	margin: 8px auto;
	display: block;
	position: absolute;
}
.drEggDescriptionWrap > h3{
	text-align: center;
	font-size: 28px;
	color: #fff;
	line-height: 1.2;
	padding: 20px 0 0 0;
	margin: 0 0 15px 0;
}
.drEggDescriptionWrap > p{
	font-size: 18px;
	line-height: 1.75;
	text-align: center;
	padding: 0 0 20px 0;
}



/* 本と購入ボタンを左右に配置するフレックスボックス */
.drEggBooksFlexBox{
	display: flex;
	margin: 40px 0 0 0;
}
/* 左側の本と購入ボタンをまとめるカラム */
.drEggBookLeftWrap{
	flex: 1;
	width: 370px;
	margin: 0 20px 40px 100px;
}
.drEggBookLeftWrap > h1{
	font-family: "ヒラギノ角ゴシック";
	font-size: 46px;
	font-weight: bold;
	text-align: center;
}
.drEggBookLeftWrap > p{
	font-size: 16px;
	text-align: center;
	line-height: 1.75;
}
/* 書影 */
.drEggBookImg{
	display: block;
	width: 330px;
	margin: 0 auto 40px;
}
/* 購入はこちらボタン */
.drEggBooksBuyBtn{
	display: block;
	margin: 20px auto 40px;
	position: relative;
	width: 258px;
	height: 72px;
}
.drEggBooksBuyBtn > a{
	display: block;
	width: 258px;
	height: 72px;
	background: url("/design_items/pc/img/dr_egg/btn_buy.png") no-repeat 0 0;
	position: absolute;
	background-size: 258px 144px;
}

.drEggBooksBuyBtn > a:hover {
	background-position: 0 bottom;
}
/* ページ紹介（左右とも） */
.drEggPageIntroImg{
	width: 370px;
}
/* ドクターエッグ1のページ（上部） */
.drEggPage1AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_1_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 256px;
	margin: 40px 0 0 0;
	float: left;
}
/* ドクターエッグ1の下部のページをまとめる */
.drEggPage1BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_1_below.png") no-repeat 0 0;
	width: 185px;
	height: 256px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* 拡大ボタン（オレンジ・ピンク共通） */
.drEggOrangeZoomBtn, .drEggPinkZoomBtn {
	display: block;
	position: absolute;
	width: 102px;
	height: 104px;
	bottom: 0;
	right: 0;
}

.drEggOrangeZoomBtn > a {
	display: block;
	width: 102px;
	height: 104px;
	background: url("/design_items/pc/img/dr_egg/btn_zoom_orange.png") no-repeat 0 0;
	position: absolute;
	background-size: 102px 208px;
}

.drEggPinkZoomBtn > a {
	display: block;
	width: 102px;
	height: 104px;
	background: url("/design_items/pc/img/dr_egg/btn_zoom_pink.png") no-repeat 0 0;
	position: absolute;
	background-size: 102px 208px;
}

.drEggOrangeZoomBtn > a:hover, .drEggPinkZoomBtn > a:hover {
	background-position: 0 bottom;
}
.drEggCaptionAboveImg{
	width: 192px;
	height: 58px;
	transform: translate(calc(370px - 100%), 100px);
}
/* ドクターエッグ1・2の下部のページのキャプション */
.drEggCaptionBelowSImg{
	width: 192px;
	height: 58px;
	transform: translate(calc(-100% + 7px), 100px);
}
/* ドクターエッグ2の上部ページをまとめる */
.drEggPage2AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_2_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 256px;
	margin: 40px 0 0 0;
	float: left;
}
.drEggCaption2aboveImg{
	width: 220px;
	height: 58px;
	transform: translate(calc(370px - 100%), 100px);
}
/* ドクターエッグ2の下部ページをまとめる */
.drEggPage2BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_2_below.png") no-repeat 0 0;
	width: 185px;
	height: 256px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* ドクターエッグ3のページ（上部） */
.drEggPage3AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_3_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 260px;
	margin: 40px 0 0 0;
	float: left;
}
/* ドクターエッグ3の下部のページをまとめる */
.drEggPage3BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_3_below.png") no-repeat 0 0;
	width: 185px;
	height: 260px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* ドクターエッグ4のページ（上部） */
.drEggPage4AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_4_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 256px;
	margin: 40px 0 0 0;
	float: left;
}
/* ドクターエッグ4の下部のページをまとめる */
.drEggPage4BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_4_below.png") no-repeat 0 0;
	width: 185px;
	height: 256px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* ドクターエッグ5のページ（上部） */
.drEggPage5AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_5_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 260px;
	margin: 40px 0 0 0;
	float: left;
}
/* ドクターエッグ5の下部のページをまとめる */
.drEggPage5BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_5_below.png") no-repeat 0 0;
	width: 185px;
	height: 260px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* ドクターエッグ6のページ（上部） */
.drEggPage6AboveWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_6_above.png") no-repeat 0 0;
	background-size: contain;
	width: 185px;
	height: 260px;
	margin: 40px 0 0 0;
	float: left;
}
/* ドクターエッグ6の下部のページをまとめる */
.drEggPage6BelowWrapper{
	display: block;
	position: relative;
	background: url("/design_items/pc/img/dr_egg/img_page_6_below.png") no-repeat 0 0;
	width: 185px;
	height: 260px;
	background-size: contain;
	float: right;
	clear: left;
	margin: 20px 0 0 0;
}
/* 右側のカラムの本や購入ボタン等をまとめる */
.drEggBookRightWrap{
	flex: 1;
	width: 370px;
	margin: 0 100px 40px 20px;
}
.drEggBookRightWrap > h1{
	font-family: "ヒラギノ角ゴシック";
	font-size: 46px;
	font-weight: bold;
	text-align: center;
}
.drEggBookRightWrap > p{
	font-size: 16px;
	text-align: center;
	line-height: 1.75;
}

/* 右側の背景画像 */
.drEggRightImg{
	flex: 1;
	background: url("/design_items/pc/img/dr_egg/img_background_220302.png") repeat;
	background-size: 32px 32px;
}

/* 区切り線 */
.drEggBorderLine{
	width: 780px;
	height: 20px;
	display: block;
	margin: 0 auto;
}
/* 本の著者名のフッターテキスト */
.drEggFooterTxt{
	font-family: "ヒラギノ角ゴシック";
	font-size: 12px;
	text-align: center;
	margin: 0 0 40px 0;
}
/* アンケート */
.drEggAsideWrap{
	display: inline-block;
	vertical-align: top;
	margin: 0 15px 0 263px;
}
.drEggAsideWrap > a{
	display: block;
	width: 414px;
	font-size: 28px;
	text-align: center;
	color: #ee762b;
	background-color:#fffbc4;
	padding: 10px 20px;
	border-radius: 20px 10px;
	text-decoration: none;
	line-height: 1.2;
}
.drEggAsideWrap > a:hover{
	text-decoration: underline;
}
.drEggAsideWrap > span{
	font-size: 14px;
	color: #ee762b;
	text-align: center;
	margin: 20px auto 0;
	display: block;
}
/* クワガタとカブトムシの画像 */
.drEggInsectsImg{
	display: inline-block;
	vertical-align: top;
	width: 135px;
	height: 135px;
}
footer{
	height: 20px;
    margin: 0 auto 40px;
    padding: 50px 0 0 0;
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 1.5;
}