@charset "UTF-8";
/* campain - calendar (2027) -*/

.campainCalendarMainTitle { width: 100%; min-height: 640px; background-position: center; background-repeat: no-repeat; background-color:#fff6c0;}
.campainCalendarMainTitleImg { width: 1400px; height: 600px; margin: auto; background-size: contain; background-position: 50% 20px; background-repeat: no-repeat; position: relative; }

.campainCalendarMainTitleImg p.exp { width: 100%; position: absolute; top: 65%; left: 0; text-align: center; font-size: 18px; font-weight: bold; line-height: 1.8;}
.campainCalendarMainTitleImg p.days { width: 100%; position: absolute; top: 80%; left: 0; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.8; font-family: 'M PLUS 1p', sans-serif;}
.campainCalendarMainTitleImg p.days span { font-size: 24px; display: block;}
.campainMainTitleInner { max-width: 960px; margin: auto;}

  /* 2027 ver */
.campainCalendarMainTitle.calendar2027 { 
background-image: url(../images/campain_calendar2027/campain_calendar2027_title_bg.jpg); background-size: 2000px 786px;}
.campainCalendarMainTitle.calendar2027 .campainCalendarMainTitleImg { 
background-image: url(../images/campain_calendar2027/campain_calendar2027_titleSet.png); }


@media (max-width: 1400px) { 
.campainCalendarMainTitle { min-height: 550px; height: 550px; }
.campainCalendarMainTitleImg { width: 100%; /*background-position: 50% 10%;*/ background-size: 1100px auto; }
.campainCalendarMainTitleImg p.exp { top: 50%; font-size: 17px;}
.campainCalendarMainTitleImg p.days { top: 65%; font-size: 25px; }
.campainCalendarMainTitleImg p.days span { font-size: 23px;}
}
@media (max-width: 1200px) { 
campainCalendarMainTitleImg { min-height: auto; height: 400px; }
}

@media only screen and (max-width: 960px) { 
.campainCalendarMainTitleImg p.exp { top: 48%;}
.campainCalendarMainTitleImg p.days { top: 64%;  line-height: 1.5}
}

@media only screen and (max-width: 640px) { 
.campainCalendarMainTitle { height: 360px; min-height: auto; background-size: 190% auto !important; background-position: 50% 2%;}
.campainCalendarMainTitleImg { width: 100%; background-size: 150% auto;  background-position: 53% 20%; height: 100%;}
.campainCalendarMainTitleImg p.exp { width: 77%; margin: auto; padding-left: 0%; top: 60%; left: 0; right: 0; font-size: /*13px*/ clamp(11px, 2vw, 13px); /*text-align: left;*/ line-height: 1.5}
/*.campainCalendarMainTitleImg p.exp br { display: none;}*/
.campainCalendarMainTitleImg p.days { top: 68%; font-size: /*16.8px*/ clamp(14px, 3vw, 16.8px);}
.campainCalendarMainTitleImg p.days span { font-size: /*16px*/ clamp(13.5px, 2.8vw, 16px); }
}

.campainPresent.calendar2027 .campainPresentHeadInner { max-width: 1200px;}
.campainPresent.calendar2027 .campainPresentHeadChara { max-width: 1500px;}
.campainPresent.calendar2027 .campainPresentHead { background-image: none;}
.campainPresent.calendar2027 .campainPresentHead p.note { max-width: 1200px; width: auto; margin: 20px auto 0 ;  text-align: center; display: block;}
@media only screen and (max-width: 1110px) { 
.campainPresent.calendar2027 .campainPresentHeadChara { padding-bottom: 40px;}
}
@media only screen and (max-width: 860px) { 
.campainPresent.calendar2027 .campainPresentHeadChara { padding-bottom: 5px;}
}
@media only screen and (max-width: 640px) { 
.campainPresent.calendar2027 .campainPresentHeadInner { text-align: left;}
.campainPresent.calendar2027 .campainPresentHeadChara { padding-bottom: 0;}
.campainPresent.calendar2027 .campainPresentHead p.note { margin-top: 60px; font-size: 11px !important;}
}

.campainPresent.calendar2027 .expIll { width: 100%; max-width: 1500px; list-style: none; font-size: 0; display: block;  margin-bottom: 30px; ;}
.campainPresent.calendar2027 .expIll p { width: 55%; margin: 2% 0; padding: 0;display: inline-block; vertical-align: top; /*border: 1px solid #fcc;*/}
.campainPresent.calendar2027 .expIll p img { width: 100%;}

@media only screen and (max-width: 640px) { 
.campainPresent.calendar2027 .expIll { margin: 0 auto 20px; text-align: center;}
.campainPresent.calendar2027 .expIll p { width: 85%; margin: 40px 0 20px 10% ; display: block;}
}

  /* カレンダーサンプル */
.campainPresent.calendar2027 .sampleCal { max-width: 1110px; margin: auto; /*min-height: 500px;*/ padding: 10px 0 20px; position: relative;} 
.campainPresent.calendar2027 .sampleCal ul { width: 100%; padding: 0; list-style: none; font-size: 0; text-align: center; display: block;  } 
.campainPresent.calendar2027 .sampleCal ul li { width: 40%; margin: 0 1%; padding: 0;display: inline-block; vertical-align: top;}
.campainPresent.calendar2027 .sampleCal ul li img { width: 100%; border: 1px solid #ddd;}

.campainPresent.calendar2027 .sampleCal ul li.cover { margin: auto; }

.campainPresent.calendar2027 .sampleCal ul li.front,
.campainPresent.calendar2027 .sampleCal ul li.back { position: absolute; top: 40%; z-index: -1;}

.campainPresent.calendar2027 .sampleCal ul li.front { left: 0; top: 95px; transform: rotate(-7deg);}
.campainPresent.calendar2027 .sampleCal ul li.back { right: -50px; transform: rotate(7deg);}
/*.campainPresent.calendar2027 .sampleCal p.note { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);}*/

.campainPresent.calendar2027 p.note { color: #545454; font-size: 14px !important; font-weight: normal  !important; line-height: 1.4  !important; text-align: left; display: inline-block; margin: 3px auto 0;}

@media only screen and (max-width: 1110px) {
.campainPresent.calendar2027 .sampleCal { width: 80%; /*min-height: 300px;*/ margin: 0 auto 50px}
.campainPresent.calendar2027 .sampleCal ul li { width: 48%; }
} 
@media only screen and (max-width: 960px) { /*.campainPresent.calendar2027 .sampleCal_old { min-height: 450px;}*/ .campainPresent.calendar2027 p.note { text-align: center;}}
@media only screen and (max-width: 800px) { /*.campainPresent.calendar2027 .sampleCal_old { min-height: 400px;}*/}
@media only screen and (max-width: 640px) { 
.campainPresent.calendar2027 .sampleCal { width: 80%; /*min-height: 300px;*/ margin: 0 auto 50px}
.campainPresent.calendar2027 .sampleCal ul li { width: 90%;  position: relative; z-index: 2;}
.campainPresent.calendar2027 .sampleCal ul li.front,
.campainPresent.calendar2027 .sampleCal ul li.back { position: static; width: 90%; z-index: -1;}
/*.campainPresent.calendar2027 p.note { font-size: 11px !important; text-align: center;}*/
}
@media only screen and (max-width: 500px) { 
.campainPresent.calendar2027 .sampleCal { /*min-height: 210px;*/ margin: 0 auto 50px}
}


  /* 2027 ver add */
.btnCampainApplyTitHead { max-width: 960px; width: 100%; margin: 80px auto 60px;}
@media (max-width: 960px) { .btnCampainApplyTitHead { max-width: none; width: 90%;}}

.btnCampainApplyTitHead h4 { margin: 0 0 20px; padding: 0; font-size: 24px; font-weight: bold; text-align: center; line-height: 1.7;}
.btnCampainApplyTitHead p { padding: 0; font-size: 16px; text-align: center;}

@media (max-width: 640px) { 
.btnCampainApplyTitHead h4 { font-size: 21px;}
.btnCampainApplyTitHead p { font-size: 15px; line-height: 1.6; text-align: left;}
}

.campainPresent.calendar2027 .btnCampainApply.step1 a:before { background-image: url(../images/campain_calendar2027/campain_process_step1.svg);}
.campainPresent.calendar2027 .btnCampainApply.step2 a:before { background-image: url(../images/campain_calendar2027/campain_process_step2.svg);}
/*.campainPresent.calendar2027 .btnCampainApply.step3 a:before { background-image: url(../images/campain_calendar2027/campain_process_step3.svg);}*/