@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_01/decoration_star.png) repeat center top #fdede3; background-size: 396px 450px; padding: 70px calc( 10 / 320 * 100% ) 20px; }
#nightTitle .titleInner { overflow: hidden; max-width: 1076px; margin: 0 auto 65px; }

@media screen and (max-width: 1000px) {
	#nightTitle { padding-top: 40px; }
	#nightTitle .titleInner { margin-bottom: 45px; }
}

@media screen and (max-width: 767px) {
	#nightTitle { background-size: 198px 225px; padding-top: 30px; padding-bottom: 30px; }
	#nightTitle .titleInner { max-width: 500px; margin-bottom: 20px; }
}


/* titleLogo
------------------------------------------ */

.titleLogo { float: left; overflow: hidden; width: calc( 200 / 1076 * 100% ); height: 0; background: url(/images/special/nw_01/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; }

@media screen and (max-width: 767px) {
	.titleLogo { float: none; width: calc( 159 / 300 * 100% ); background: url(/images/special/nw_01/title_logo2.png) no-repeat left top; background-size: cover; padding-top: calc( 66 / 300 * 100% ); margin-top: 0; }
}


/* titleFrame
------------------------------------------ */

.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_01/title_frame1.png) no-repeat left top; background-size: cover; }
.titleFrame::after { right: 0; background: url(/images/special/nw_01/title_frame2.png) no-repeat left top; background-size: cover; }
.titleFrame .frameIcon { background: url(/images/special/nw_01/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: #f15757; }

@media screen and (max-width: 1000px) {
	.titleFrame::before,
	.titleFrame::after { width: 15px; height: 165px; }
	.titleFrame .frameTxt { font-size: 26px; line-height: 38px; }
}

@media screen and (max-width: 767px) {
	.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_01/title_frame3.png); }
	.titleFrame::after { top: auto; bottom: 0; left: 0; background-image: url(/images/special/nw_01/title_frame4.png); }
	.titleFrame .frameIcon { font-size: 17px; padding: 6px 0 6px 50px; margin-bottom: 4px; }
}


/* titleProfile
------------------------------------------ */
.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: 1000px) {
	.titleProfile div { margin-bottom: 5px; }
	.titleProfile dl { font-size: 12px; line-height: 18px; }
}

@media screen and (max-width: 767px) {
	.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 { padding-right: calc( 10 / 320 * 100% ); padding-left: calc( 10 / 320 * 100% ); }
#nightMain::before { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url(/images/special/nw_01/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; }

@media screen and (max-width: 767px) {
	#nightMain::before { background-image: url(/images/special/nw_01/main_bg2.jpg); }
	#nightMain .mainInner { max-width: 500px; }
	#nightMain .mainInner .mainBlank { display: none; }
}


/* mainLead
------------------------------------------ */

.mainLead { overflow: hidden; }
.mainLead .leadTxt { float: left; width: calc( 537 / 1076 * 100% ); box-sizing: border-box; padding-left: calc( 60 / 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% ); }

@media screen and (max-width: 1000px) {
	.mainLead .leadTxt { padding-left: 0; }
	.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; }
}

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

@media screen and (max-width: 767px) {
	.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
------------------------------------------ */

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

@media screen and (max-width: 1000px) {
	.mainBlock .blockTxt { font-size: 13px; line-height: 24px; padding: 80px calc( 35 / 1076 * 100% ) calc( 35 / 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 {
	.mainBlock .blockImg img:nth-child(2) { display: none; }
}

@media screen and (max-width: 767px) {
	.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: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
	.mainBlock.blockType1 .blockImg,
	.mainBlock.blockType3 .blockImg { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
	.mainBlock.blockType1 .blockTxt,
	.mainBlock.blockType3 .blockTxt { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
}



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

#nightData { background: url(/images/special/nw_01/decoration_star.png) repeat center top #fdede3; background-size: 396px 450px; padding: 74px calc( 10 / 320 * 100% ) 65px; }
#nightData .dataInner { overflow: hidden; max-width: 1076px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 767px) {
	#nightData { background-size: 198px 225px; padding-top: 40px; padding-bottom: 40px; }
	#nightData .dataInner { max-width: 500px; }
}


/* dataFrame
------------------------------------------ */

.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 { display: table; }
.dataFrame .frameList dl:not(:last-child) { margin-bottom: 4px; }
.dataFrame .frameList dl dt { display: table-cell; position: relative; font-weight: bold; padding-left: 16px; }
.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 dd { display: table-cell; }
.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; }

@media screen and (max-width: 767px) {
	.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 { display: block; }
	.dataFrame .frameList dl:not(:last-child) { margin-bottom: 6px; }
	.dataFrame .frameList dl dt { display: block; }
	.dataFrame .frameList dl dt::before { top: 7px; }
	.dataFrame .frameList dl dd { display: block; padding-left: 16px; }
	.dataFrame .frameAdd { font-size: 12px; margin-top: 15px; }
}


/* dataIllust
------------------------------------------ */

.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: 1000px) {
	.dataIllust { margin-right: 0; }
}

@media screen and (max-width: 767px) {
	.dataIllust { float: none; width: 250px; margin: 53px auto 0; }
}