@charset "utf-8";

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

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

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

.br767 { display: none; }

@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: 767px) {
	.br767 { display: block; }
}

@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; }
}



/* nightTitle
========================================================= */

#nightTitle { background: url(/images/special/nw_05/decoration_star.png) repeat center top #e2f0d4; background-size: 396px 450px; padding-top: 70px; padding-bottom: 20px; }
#nightTitle .titleInner { overflow: hidden; max-width: 1076px; margin: 0 auto 65px; }

.titleLogo { float: left; overflow: hidden; width: calc( 200 / 1076 * 100% ); height: 0; background: url(/images/special/nw_05/title_logo1.png) no-repeat left top; background-size: cover; text-indent: 100%; white-space: nowrap; padding-top: calc( 177 / 1076 * 100% ); margin-top: 10px; }

.titleFrame { float: left; position: relative; width: calc( 600 / 1076 * 100% ); box-sizing: border-box; padding: 30px calc( 50 / 1076 * 100% ) 0; margin-top: 20px; margin-left: calc( 25 / 1076 * 100% ); }
.titleFrame::before,
.titleFrame::after { position: absolute; top: 0; display: block; width: 20px; height: 220px; content: ""; }
.titleFrame::before { left: 0; background: url(/images/special/nw_05/title_frame1.png) no-repeat left top; background-size: cover; }
.titleFrame::after { right: 0; background: url(/images/special/nw_05/title_frame2.png) no-repeat left top; background-size: cover; }
.titleFrame .frameIcon { background: url(/images/special/nw_05/title_icon.png) no-repeat left top; background-size: 40px; font-size: 20px; line-height: 30px; font-weight: bold; letter-spacing: 4px; padding: 8px 0 8px 50px; margin-bottom: 10px; }
.titleFrame .frameTxt { font-size: 36px; line-height: 52px; font-weight: bold; }
.titleFrame .frameTxt span { color: #6eba44; }

.titleProfile { float: right; width: calc( 230 / 1076 * 100% ); }
.titleProfile div { width: calc( 150 / 230 * 100% ); margin-right: auto; margin-left: auto; }
.titleProfile div img { overflow: hidden; display: block; box-sizing: border-box; border: solid 5px #ffffff; border-radius: 50%; }
.titleProfile dl { font-size: 13px; line-height: 20px; }
.titleProfile dl dt { font-weight: bold; }

@media screen and (max-width: 1199px) {
	#nightTitle .titleInner { width: 95%; }
}

@media screen and (max-width: 1000px) {
	#nightTitle { padding-top: 40px; }
	#nightTitle .titleInner { margin-bottom: 45px; }
	
	.titleFrame::before,
	.titleFrame::after { width: 15px; height: 165px; }
	.titleFrame .frameTxt { font-size: 26px; line-height: 38px; }
	
	.titleProfile div { margin-bottom: 5px; }
	.titleProfile dl { font-size: 12px; line-height: 18px; }
}

@media screen and (max-width: 767px) {
	#nightTitle { background-size: 198px 225px; padding-top: 30px; padding-bottom: 30px; }
	#nightTitle .titleInner { max-width: 500px; width: calc( 300 / 320 * 100% ); margin-bottom: 20px; }
	
	.titleLogo { float: none; width: calc( 159 / 300 * 100% ); background: url(/images/special/nw_05/title_logo2.png) no-repeat left top; background-size: cover; padding-top: calc( 66 / 300 * 100% ); margin-top: 0; }
	
	.titleFrame { float: none; width: 280px; padding: 37px 0 33px 10px; margin: calc( 12 / 300 * 100% ) auto calc( 20 / 300 * 100% ); }
	.titleFrame::before,
	.titleFrame::after { width: 280px; height: 22px; margin-right: auto; margin-left: auto; }
	.titleFrame::before { right: 0; background-image: url(/images/special/nw_05/title_frame3.png); }
	.titleFrame::after { top: auto; bottom: 0; left: 0; background-image: url(/images/special/nw_05/title_frame4.png); }
	.titleFrame .frameIcon { font-size: 17px; padding: 6px 0 6px 50px; margin-bottom: 4px; }
	
	.titleProfile { float: none; display: table; width: 100%; }
	.titleProfile div { display: table-cell; width: 90px; vertical-align: top; margin-right: 0; margin-left: 0; }
	.titleProfile dl { display: table-cell; font-size: 13px; line-height: 20px; vertical-align: middle; padding-left: 10px; }
}



/* nightMain
========================================================= */

#nightMain::before { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url(/images/special/nw_05/main_bg1.jpg) no-repeat center center; background-size: cover; content: ""; z-index: -100; }
#nightMain .mainInner { max-width: 1076px; margin-right: auto; margin-left: auto; }

.mainLead { overflow: hidden; }
.mainLead .leadTxt { float: left; width: calc( 537 / 1076 * 100% ); box-sizing: border-box; padding-left: calc( 70 / 1076 * 100% ); margin-top: calc( 70 / 1076 * 100% ); }
.mainLead .leadTxt div { font-size: 22px; line-height: 30px; font-weight: bold; }
.mainLead .leadTxt div span { display: inline-block; background-color: #ffffff; border: solid 1px #000000; padding: 8px 0 4px 10px; }
.mainLead .leadTxt div:not(:last-child) { margin-bottom: 26px; }
.mainLead .leadImg { float: right; width: calc( 539 / 1076 * 100% ); }

.mainBlock { display: table; }
.mainBlock .blockImg { display: table-cell; width: 50.09293680297398%; vertical-align: top; }
.mainBlock .blockTxt { display: table-cell; width: 49.90706319702602%; background: no-repeat center 48px #e2f0d4; box-sizing: border-box; font-size: 15px; line-height: 28px; padding: 128px calc( 55 / 1076 * 100% ) calc( 30 / 1076 * 100% ); }
.mainBlock.blockType1 .blockTxt { background-image: url(/images/special/nw_05/txt_number1.gif); background-size: 28px 52px; letter-spacing: -1px; }
.mainBlock.blockType2 .blockTxt { background-image: url(/images/special/nw_05/txt_number2.gif); background-size: 28px 52px; }
.mainBlock.blockType3 .blockTxt { background-image: url(/images/special/nw_05/txt_number3.gif); background-size: 28px 52px; }
.mainBlock.blockType4 .blockTxt { background-image: url(/images/special/nw_05/txt_number4.gif); background-size: 28px 52px; }

@media screen and (max-width: 1199px) {
	#nightMain .mainInner { width: 95%; }
}

@media screen and (max-width: 1000px) {
	.mainLead .leadTxt div { font-size: 18px; line-height: 22px; }
	.mainLead .leadTxt div:not(:last-child) { margin-bottom: 20px; }
	.mainLead .leadTxt div span { padding-top: 5px; }
	
	.mainBlock .blockTxt { font-size: 13px; line-height: 22px; padding: 80px calc( 35 / 1076 * 100% ) calc( 20 / 1076 * 100% ); }
	.mainBlock.blockType1 .blockTxt,
	.mainBlock.blockType2 .blockTxt,
	.mainBlock.blockType3 .blockTxt,
	.mainBlock.blockType4 .blockTxt { background-position: center 28px; background-size: 22px 40px; }
}

@media screen and (min-width: 768px), print {
	.mainLead .leadImg img:nth-child(2) { display: none; }
	.mainBlock .blockImg img:nth-child(2) { display: none; }
}

@media screen and (max-width: 767px) {
	#nightMain::before { background-image: url(/images/special/nw_05/main_bg2.jpg); }
	#nightMain .mainInner { max-width: 500px; width: calc( 300 / 320 * 100% ); }
	
	.mainLead .leadTxt { float: none; width: 100%; padding-left: 0; margin-top: 40px; margin-bottom: 40px; }
	.mainLead .leadTxt div { font-size: 14px; line-height: 24px; }
	.mainLead .leadTxt div span { padding: 2px 2px 1px 7px; }
	.mainLead .leadTxt div:not(:last-child) { margin-bottom: 16px; }
	.mainLead .leadImg { float: none; width: 100%; }
	.mainLead .leadImg img:nth-child(1) { display: none; }
	
	.mainBlock .blockImg { display: block; width: 100%; }
	.mainBlock .blockImg img:nth-child(1) { display: none; }
	.mainBlock .blockTxt { display: block; width: 100%; padding: 90px calc( 10 / 300 * 100% ) calc( 24 / 300 * 100% ); }
	.mainBlock.blockType1,
	.mainBlock.blockType3 { display: flex; flex-wrap: wrap; }
	.mainBlock.blockType1 .blockImg,
	.mainBlock.blockType3 .blockImg { order: 2; }
	.mainBlock.blockType1 .blockTxt,
	.mainBlock.blockType3 .blockTxt { order: 1; }
	
	.mainBlank { display: none; }
}



/* nightData
========================================================= */

#nightData { background: url(/images/special/nw_05/decoration_star.png) repeat center top #e2f0d4; background-size: 396px 450px; padding-top: 74px; padding-bottom: 65px; }
#nightData .dataInner { overflow: hidden; max-width: 1076px; margin-right: auto; margin-left: auto; }

.dataFrame { float: left; width: 520px; }
.dataFrame .frameTitle { font-size: 18px; line-height: 28px; font-weight: bold; margin-top: 24px; margin-bottom: 10px; }
.dataFrame .frameList { margin-bottom: 24px; }
.dataFrame .frameList dl:not(:last-child) { margin-bottom: 4px; }
.dataFrame .frameList dl dt::before { position: absolute; top: 9px; left: 0; display: block; width: 6px; height: 6px; background-color: #ffffff; border-radius: 50%; content: ""; }
.dataFrame .frameList dl.listType1 { display: table; }
.dataFrame .frameList dl.listType1 dt { display: table-cell; position: relative; font-weight: bold; padding-left: 16px; }
.dataFrame .frameList dl.listType1 dd { display: table-cell; }
.dataFrame .frameList dl.listType2 dt { position: relative; font-weight: bold; padding-left: 16px; }
.dataFrame .frameList dl.listType2 dd { padding-left: 16px; }
.dataFrame .frameAdd { font-size: 13px; line-height: 18px; margin-top: 20px; }
.dataFrame .frameAdd dl { display: table; }
.dataFrame .frameAdd dl dt { display: table-cell; }
.dataFrame .frameAdd dl dd { display: table-cell; }

.dataIllust { float: right; width: calc( 250 / 1076 * 100% ); margin-top: calc( 134 / 1076 * 100% ); margin-right: calc( 100 / 1076 * 100% ); }

@media screen and (max-width: 1199px) {
	#nightData .dataInner { width: 95%; }
}

@media screen and (max-width: 1000px) {
	.dataIllust { margin-right: 0; }
}

@media screen and (max-width: 767px) {
	#nightData { background-size: 198px 225px; padding-top: 40px; padding-bottom: 40px; }
	#nightData .dataInner { max-width: 500px; width: calc( 300 / 320 * 100% ); }
	
	.dataFrame { float: none; width: 100%; }
	.dataFrame .frameTitle { font-size: 16px; line-height: 24px; margin-top: 18px; }
	.dataFrame .frameList { font-size: 13px; line-height: 20px; margin-bottom: 16px; }
	.dataFrame .frameList dl:not(:last-child) { margin-bottom: 6px; }
	.dataFrame .frameList dl dt::before { top: 7px; }
	.dataFrame .frameList dl.listType1 { display: block; }
	.dataFrame .frameList dl.listType1 dt { display: block; }
	.dataFrame .frameList dl.listType1 dd { display: block; padding-left: 16px; }
	.dataFrame .frameAdd { font-size: 12px; margin-top: 15px; }
	
	.dataIllust { float: none; width: 250px; margin: 53px auto 0; }
}