@charset "utf-8";

/* 共通 ============================== */
body { background-color: black; letter-spacing: 0.05em; }


p.headLine { text-align: center; padding: 3px 0 1px; line-height: 1.25; min-width: 980px; }

div.titWrap { text-align: center; background: red url(../images/bg_stripe.gif) left top; padding-top: 16px; min-width: 980px; }
div.titWrapMobile { display: none; }

div.leadWrap { text-align: center; background-color: white; min-width: 980px; padding: 0 0 40px; }
div.leadWrap p.lead { padding-top: 20px; }
div.leadWrap div.presentBox { border: dashed 1px red; padding: 15px 20px 20px; margin-top: 20px; display: inline-block; }
div.leadWrap div.presentBox p.prsntTit { background-color: black; border-radius: 5px; padding: 5px 12px 4px; display: inline-block; line-height: 1.25; }

div.leadWrap div.presentBox div.prsntWrap { margin-top: 15px; }
div.leadWrap div.presentBox div.prsntWrap div.prsnt1 { float: left; text-align: center; padding-right: 18px; border-right: solid 1px #ccc; }
div.leadWrap div.presentBox div.prsntWrap div.prsnt2 { float: right; text-align: center; padding-left: 18px; padding-top: 40px; }
div.leadWrap div.presentBox div.prsntWrap p.prsntName { line-height: 1.25; marign-top: 5px; }
div.leadWrap div.presentBox div.prsntWrap p.prsntpic1 { margin-top: 10px; }
div.leadWrap div.presentBox div.prsntWrap p.prsntpic2 { margin-top: 36px; }

div.leadWrap div.prsntDateWrap { margin-top: 20px; }
div.leadWrap div.prsntDateWrap p.prsntDate { background-color: #eee; border-radius: 4px; padding: 10px 40px 9px; display: inline-block; line-height: 1.25; }

div.registryBtnWrap { background-color: #eee; padding: 50px 5px 60px; min-width: 980px; text-align: center; }

div.stepsWrap { background-color: red; padding: 30px 0 6px; min-width: 980px; }
div.stepsContWrap { width: 962px; margin: 0 auto; }
/* ul.prsntSteps { background-color: blue; } */
ul.prsntSteps li { float: left; min-height: 320px; } 
ul.prsntSteps li.step1 { width: 190px; background: url(../images/index_step1.png) center top no-repeat; } 
ul.prsntSteps li.step2 { width: 160px; background: url(../images/index_step2.png) center top no-repeat; } 
ul.prsntSteps li.step3 { width: 240px; background: url(../images/index_step3.png) center top no-repeat; } 
ul.prsntSteps li.step4 { width: 210px; background: url(../images/index_step4.png) center top no-repeat; } 
ul.prsntSteps li.arrow { width: 54px; background: url(../images/index_arrow.png) 13px 75% no-repeat; } 
ul.prsntSteps li div.stepTit { margin-top: 97px; background-color: black; text-align: center; line-height: 1.25; } 
ul.prsntSteps li div.stepTit p { padding: 12px 8px; }
ul.prsntSteps li div.stepContBg { background-color: black; padding: 0 5px 5px; } 
ul.prsntSteps li div.stepContBg div.stepContFrm { background-color: white; } 
ul.prsntSteps li div.stepContBg div.stepContFrm div.stepContArea { padding: 10px; } 
ul.prsntSteps li div.stepContBg div.stepContFrm p.btnFrm { background-color: #eee; border-radius: 4px; padding: 5px; text-align: center; margin-top: 10px; } 
ul.prsntSteps li div.stepContBg div.stepContFrm p.stepNote { margin-top: 10px; letter-spacing: 0; line-height: 1.35; } 

div.stepsWrap ul.stepsNote { margin-top: 30px; }
div.stepsWrap ul.stepsNote li { text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; margin-top: 5px; }

div.footWrap { position: relative; background-color: red; min-width: 980px; }
div.footWrap p.footChara { position: absolute; bottom: 0; right: 80px; z-index: 10; }
div.footWrap div.footStripe { background: red url(../images/bg_stripe.gif) left top; height: 96px; }
div.footWrap div.footFrm { background-color: white; margin-top: 24px; padding: 10px 10px 15px; }
div.footWrap div.footFrm ul.footNote { float: left; width: 66%; }
div.footWrap div.footFrm ul.footNote li { text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; margin-top: 5px; }
div.footWrap div.footFrm ul.footNote li.noteTit { margin-top: 10px; }
div.footWrap div.footFrm p.footLogo { float: right; padding-top: 10px; }

p.copy { background-color: black; text-align: right; padding: 3px 10px 1px; min-width: 960px; }





/* RESPONSIVE ---------------------------------------------------- */
@media screen and (max-width: 765px) {

	p.headLine { min-width: 360px; }

	div.leadWrap { min-width: 340px; padding: 0 10px 30px; }

	div.titWrap { display: none; }
	div.titWrapMobile { display: block; background: red url(../images/bg_stripe.gif) left top; padding: 10px 10px; min-width: 340px; }
	div.titWrapMobile p.titimg { height: 292px; width: 100%; background: url(../images/index_tit_mobile.png) center center no-repeat; background-size: contain; }

	div.leadWrap div.presentBox div.prsntWrap div.prsnt1 { float: none; padding-right: 0; }
	div.leadWrap div.presentBox div.prsntWrap div.prsnt2 { float: none; padding-left: 0; border-left: none; margin-top: 10px; padding-top: 15px; border-top: solid 1px #ccc; }
	div.leadWrap div.presentBox div.prsntWrap p.prsntpic1 { margin-top: 8px; }
	div.leadWrap div.presentBox div.prsntWrap p.prsntpic2 { margin-top: 8px; }

	div.registryBtnWrap { min-width: 360px; }

	div.stepsWrap { min-width: 360px; }
	div.stepsContWrap { width: auto; padding: 0 10px; }
	ul.prsntSteps li { float: none; min-height: 48px; padding-top: 72px; } 
	ul.prsntSteps li.step1 { width: auto; } 
	ul.prsntSteps li.step2 { width: auto; } 
	ul.prsntSteps li.step3 { width: auto; } 
	ul.prsntSteps li.step4 { width: auto; } 
	ul.prsntSteps li.arrow { width: auto; background: url(../images/index_arrow_down.png) 50% 10px no-repeat; padding-top: 0; } 
	ul.prsntSteps li div.stepTit { margin-top: 0; background-color: black; text-align: center; line-height: 1.25; } 
	ul.prsntSteps li div.stepTit p { padding: 5px 5px; } 
	ul.prsntSteps li div.stepContBg div.stepContFrm div.btnWrap { text-align: center; } 
	ul.prsntSteps li div.stepContBg div.stepContFrm p.btnFrm { padding: 6px 8px; display: inline-block; } 

	div.footWrap { min-width: 360px; }
	div.footWrap div.footFrm { padding-bottom: 320px; }
	div.footWrap div.footFrm ul.footNote { float: none; width: auto; }
	div.footWrap div.footFrm p.footLogo { float: none; padding-top: 30px; text-align: center; }
	div.footWrap p.footChara { position: absolute; bottom: 0; left: 50%; margin-left: -64px; z-index: 10; }
	p.copy { min-width: 340px; }
}