@charset "utf-8";

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

div.titWrap { text-align: center; background: red url(../images/index_tit_bg.png) center top no-repeat; min-width: 980px; height: 431px; }
div.titWrap div.titArea { padding-top: 8px; height: 369px; border-bottom: solid 27px black; text-align: center; position: relative; background: url(../images/index_tit_bg_belt.png) 0 125px repeat-x;}
div.titArea p.logo { position: absolute; top: 10px; right: 15px; z-index: 10; }
div.titArea p.sign { position: absolute; bottom: -34px; left: 50%; z-index: 20; width: 364px; margin-left: -182px; }
div.titArea p.abe { position: absolute; bottom: -5px; left: 18%; z-index: 5; }
div.titArea p.anju { position: absolute; bottom: -6px; right: 20%; z-index: 5; }

div.titWrapMobile { display: none; }

div.leadWrap { background-color: white; min-width: 980px; padding: 30px 0; }
div.leadWrap div.leadArea { width: 940px; margin: 0 auto; }
div.leadArea div.leadTxt { float: left; width: 380px; }
div.leadArea div.leadTxt p { margin-top: 10px; }

div.leadArea div.leadPresent { float: right; width: 520px; }
div.leadPresent div.leadPresentBox { border: dashed 1px red; }
div.leadPresentBox p.presentTit { background-color: red; text-align: center; line-height: 1; padding: 6px 0 3px; }
div.leadPresentBox div.presentCapArea { padding: 15px 20px 12px 224px; background: url(../images/index_goods_image.png) 20px 50% no-repeat; min-height: 160px; }
div.presentCapArea p.prsntCapLead { background-color: #eee; padding: 12px 15px; border-radius: 8px; line-height: 1.5; }
div.presentCapArea p.prsntCapTxt { margin-top: 10px;}
div.leadPresent p.presentNote { margin-top: 8px; text-align: right; }

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: 980px; margin: 0 auto; }
/* ul.prsntSteps { background-color: blue; } */
ul.prsntSteps li { float: left; min-height: 280px; }
ul.prsntSteps li.step1 { width: 144px; background: url(../images/index_step1.png) center top no-repeat; } 
ul.prsntSteps li.step2 { width: 180px; background: url(../images/index_step2.png) center top no-repeat; } 
ul.prsntSteps li.step3 { width: 144px; background: url(../images/index_step3.png) center top no-repeat; } 
ul.prsntSteps li.step4 { width: 144px; background: url(../images/index_step4.png) center top no-repeat; } 
ul.prsntSteps li.step5 { width: 240px; background: url(../images/index_step5.png) center top no-repeat; } 
ul.prsntSteps li.arrow { width: 32px; background: url(../images/index_arrow.png) 7px 75% no-repeat; } 
ul.prsntSteps li div.stepTit { margin-top: 93px; 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: 8px; }
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 { padding: 8px; border-top: dashed 1px black; letter-spacing: 0; line-height: 1.35; } 

div.stepsWrap ul.stepsNote { margin-top: 20px; padding-bottom: 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: white; min-width: 980px; }
div.footWrap p.footChara { position: absolute; bottom: 0; right: 10px; z-index: 10; }
div.footWrap div.footFrm { padding: 10px 15px 120px; }
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; }

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





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

	div.titWrap { text-align: center; background: red url(../images/index_tit_bg_mobile.png) center top no-repeat; min-width: 360px; background-size: cover; height: auto; padding-bottom: 27px; }
	div.titWrap div.titArea { padding-top: 8px; height: 300px; border-bottom: solid 27px black; text-align: center; position: relative; background: none;}
	div.titArea img.derbylogo { width: 90%; height: auto; }
	div.titArea p.logo { position: absolute; top: 10px; right: 15px; z-index: 10; text-align: right; }
	div.titArea p.logo img { width: 50%; height: auto; }
	div.titArea p.sign { position: absolute; bottom: -34px; left: 2%; z-index: 20; width: 96%; margin-left: 0; }
	div.titArea p.sign img { width: 100%; height: auto; }
	div.titArea p.abe { position: absolute; bottom: -5px; left: 8%; z-index: 5; }
	div.titArea p.anju { position: absolute; bottom: -6px; right: 10%; z-index: 5; }

	div.leadWrap { background-color: white; min-width: 360px; padding: 20px 0; }
	div.leadWrap div.leadArea { width: 94%; margin: 0 auto; }
	div.leadArea div.leadTxt { float: none; width: auto; }
	div.leadArea div.leadPresent { float: none; width: auto; margin-top: 20px; }
	div.leadPresentBox div.presentCapArea { padding: 180px 10px 10px; background: url(../images/index_goods_image.png) 50% 10px no-repeat; min-height: 60px; }
	div.leadPresent p.presentNote { margin-top: 8px; text-align: left; text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; }

	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.step5 { 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.stepsWrap ul.stepsNote { margin-top: 20px; padding-bottom: 20px; }

	div.footWrap { min-width: 360px; }
	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: relative; bottom: auto; right: auto; z-index: auto; text-align: center; }
	div.footWrap p.footChara img { width: 90%; height: auto; }
	p.copy { min-width: 340px; }
}