@charset "UTF-8";

html[data-browse-mode="P"] .for-sp { display: none !important;}
html[data-browse-mode="S"] .for-pc { display: none !important;}
html[data-browse-mode="P"] .pane-main { color: #443829; font-size: 20px;}
html[data-browse-mode="S"] .pane-main { color: #443829; font-size: 18px;}

/* h2 */
html[data-browse-mode="P"] h2.image-ttl { height: 126px; padding: 48px 0 0 0; margin: 0; text-align: center; background: url("../img/h2_bg.png") top center repeat-x;}
html[data-browse-mode="P"] h2.image-ttl img { vertical-align: middle;}
html[data-browse-mode="P"] h2.image-ttl#pickup_feature { margin-bottom: 20px;}
html[data-browse-mode="P"] #sec04 h2.image-ttl { margin-bottom: 20px;}
html[data-browse-mode="S"] h2.image-ttl { height: 120px; padding: 58px 0 0 0; margin: 0 -10px 20px; text-align: center; background: url("../img/h2_bg.png") top center repeat-x;}
html[data-browse-mode="S"] h2.image-ttl img { width: auto !important; max-width: 86%; height: auto !important; vertical-align: middle;}
/* h3 */
h3.box-ttl { padding: 20px; margin: 0 0 40px; border: #308c05 5px solid; text-align: center;}
h3.box-ttl img { vertical-align: middle;}
h3.box-ttl::after { display: none;}
html[data-browse-mode="S"] h3.box-ttl { padding: 10px; margin: 0 0 20px; border: #308c05 3px solid; text-align: center;}
html[data-browse-mode="S"] h3.box-ttl img { width: auto; height: 24px; max-height: 24px;}
/* h4 */
h4.line-ttl { padding: 0; margin: 0 0 20px; font-size: 28px; font-weight: bold; text-align: center; position: relative;}
h4.line-ttl span { padding: 0 45px; letter-spacing: 0.1em; display: inline-block; background: #fff; position: relative; z-index: 2;}
h4.line-ttl::after { content: ''; width: 100%; height: 5px; display: block; background: #308c05; position: absolute; top: calc(50% - 5px); left: 0;}
h4.point-ttl { margin: 0 0 20px 0; text-align: center;}
h4.point-ttl img { max-height: 80px;}
html[data-browse-mode="S"] h4.line-ttl { padding: 0; margin: 0 0 15px; font-size: 22px; text-align: center;}
html[data-browse-mode="S"] h4.line-ttl span { padding: 0 15px;}
html[data-browse-mode="S"] h4.line-ttl::after { height: 3px; top: calc(50% - 3px);}
html[data-browse-mode="S"] h4.point-ttl { margin-bottom: 20px;}
html[data-browse-mode="S"] h4.point-ttl img { width: auto; height: auto; max-width: 100%; max-height: 60px;}
html[data-browse-mode="S"] #sec03 h4.point-ttl img { max-height: 120px;}
/* lead */
.lead-txt { margin: 20px 0;}
/* button */
.btm-button { margin: 0 0 80px 0; text-align: center;}
.btm-button a { width: 500px; padding: 15px 20px; margin: 0 auto; border: none; border-radius: 60px; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.2; text-decoration: none; color: #fff; background: #42382b; box-sizing: border-box; display: block; position: relative;}
.btm-button a::before { content: ''; width: 10px; height: 10px; border-top: #fff 2px solid; border-right: #fff 2px solid; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 30px; top: calc(50% - 12px);}
.btm-button a::after { content: ''; width: 10px; height: 10px; border-top: #fff 2px solid; border-right: #fff 2px solid; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 30px; top: calc(50% - 4px);}
html[data-browse-mode="S"] .btm-button { margin: 30px 10px; text-align: center;}
html[data-browse-mode="S"] #grass .btm-button { margin: 30px 0; text-align: center;}
html[data-browse-mode="S"] .btm-button a { width: auto; font-size: 16px;}

/* PC
----------------------------*/
@media only screen and (min-width: 897px) {
  .event-bottom-banners ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
  .event-bottom-banners ul li { width: 49%; margin: 0 0 20px;}
	.pane-main .flex-box { display: flex; justify-content: space-between;}
	.text + .text { margin-top: 20px;}
	.text strong  { font-weight: bold;}
	
	#sec01 .flex-box  { margin-bottom: 60px; align-items: center;}
	#sec01 div.flex-box .image { width: 40%; text-align: center;}
	#sec01 div.flex-box .desc  { width: 54%;}
	#sec01 .flex-box.season    { margin-bottom: 60px;}
	#sec01 .flex-box.season li { width: 48.5%;}
	#sec01 .flex-box.season .name { margin: 0 0 10px; font-size: 22px; font-weight: bold; text-align: center;}
	
	#sec02 .point-box { margin: 40px 0; padding: 30px 40px; background: #eaf6df;}
	#sec02 .point-box ul { width: 600px; margin: 0 auto; text-align: left;}
	#sec02 .point-box li { font-weight: bold; letter-spacing: 0.1em;}
	#sec02 .point-box .color-num { font-weight: bold; color: #308c05;}
	#sec02 .series-box { margin: 40px 0; padding: 30px 40px; background: #f9f7ed;}
	#sec02 .series-box h4.point-ttl img { max-height: 122px;}
	#sec02 .series-box .flex-box { margin-top: 40px;}
	#sec02 .series-box .flex-box .image { width: 46%; text-align: center;}
	#sec02 .series-box .flex-box .desc  { width: 50%;}
	
	#sec03 .series-box { margin: 40px 0; padding: 30px 40px; background: #f9f7ed;}
	#sec03 .series-box h4.point-ttl img { max-height: 118px;}
	
	#sec04 .float-image { width: 320px; margin: 0 0 15px 60px; text-align: center; float: right;}
	#sec04 .image .line01 { margin: 0 0 10px 0;}
	
	#sec05 .ttl-pop { margin: 0 0 20px 0; text-align: center;}
	#sec05 .ttl-pop img { width: 380px;}
	
	#sec_service { padding: 65px 0 0 0; background: url("../img/sec04_service_frame_top.png") center top no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#sec_service .body { background: url("../img/sec04_service_frame_body.png") center 170px no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
	#sec_service .top { padding: 0 60px;}
	#sec_service .bottom { padding: 0 60px 50px; background: url("../img/sec04_service_frame_bottom.png") center bottom no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#sec_service h3::after { display: none;}
	#sec_service .top h3 { padding: 0; margin: 30px 0; text-align: center;}
	#sec_service .top h3 img { width: 593px; vertical-align: top;}
	#sec_service .bottom h3 { padding: 0; margin: 60px 0 30px; text-align: center;}
	#sec_service .bottom h3 img { width: 589px; vertical-align: top;}
	#sec_service .bottom .main { margin: 30px 0 45px; text-align: center;}
	#sec_service .bottom .main img { width: 500px; vertical-align: top;}
	#sec_service .bottom .link { margin-top: 60px;}
	
	.grass-contents { margin: 80px 0 40px;}
	.grass-contents .color-ttl { margin: 20px 0 10px; font-size: 24px; font-weight: bold; text-align: center; color: #2a8706;}
	.grass-contents .flex-box { margin-bottom: 40px; align-items: center;}
	.grass-contents .flex-box.reverse { flex-direction: row-reverse;}
	.grass-contents .flex-box .image { width: 40%; text-align: center;}
	.grass-contents .flex-box .desc  { width: 54%;}
	.grass-contents .point-box { padding: 30px 40px; background: #eaf6df;}
	.grass-contents .point-box .flex-box { margin-bottom: 0;}
	.grass-contents .point-box .flex-box .image { border-radius: 10px; overflow: hidden;}
	
	/* FAQ */
	.faq-box { margin: 0 0 50px 0;}
	.faq-box .q { padding: 0 0 0 50px; margin: 0 0 30px 0; background: url("../img/q.png") left top no-repeat; -webkit-background-size: 32px 30px; background-size: 32px 30px; font-weight: bold;}
	.faq-box .a { padding: 0 0 0 50px; display: flex; justify-content: space-between; flex-direction: row-reverse; background: url("../img/a.png") left top no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px; overflow: hidden;}
	.faq-box .a.no-flex { display: block;}
	.faq-box .a .image { width: 320px;}
	.faq-box .a .desc  { width: 480px;}
	.faq-box .a .memo  { padding-left: 1em; margin-top: 20px; text-indent: -1em; font-size: 14px;}
}

/* SP
----------------------------*/
@media only screen and (max-width: 896px) {
  .event-bottom-banners { margin: 4vw; }
  .event-bottom-banners ul li:not(:last-child) { margin: 0 0 10px;}
	
	.wrapper { max-width: 100vw; overflow-x: hidden;}
	.pane-main .ttl { font-size: 20px; font-weight: bold;}
	
	.pane-main .text + .text { margin-top: 15px;}
	#grass { padding: 0 10px;}
	
	#sec01 .flex-box  { margin-bottom: 40px; align-items: center;}
	#sec01 div.flex-box .image { margin: 0 15% 15px; text-align: center;}
	#sec01 .flex-box.season    { display: flex; justify-content: space-between;}
	#sec01 .flex-box.season li { width: 48.5%;}
	#sec01 .flex-box.season .name { margin: 0 0 5px 0; font-size: 16px; font-weight: bold; text-align: center;}
	
	#sec02 .point-box { margin: 20px 0; padding: 20px; background: #eaf6df;}
	#sec02 .point-box ul { width: auto; margin: 0 auto; text-align: left;}
	#sec02 .point-box li { font-size: 16px; font-weight: bold; letter-spacing: 0.1em;}
	#sec02 .point-box .color-num { font-weight: bold; color: #308c05;}
	#sec02 .series-box { margin: 20px 0; padding: 20px; background: #f9f7ed;}
	#sec02 .series-box h4.point-ttl img { width: auto; height: auto; max-height: 96px;}
	#sec02 .series-box .flex-box { margin-top: 20px;}
	#sec02 .series-box .flex-box .image { margin: 0 0 15px; text-align: center;}
	
	#sec03 .series-box { margin: 20px 0; padding: 15px; background: #f9f7ed;}
	#sec03 .series-box h4.point-ttl img { height: auto;}
	
	#sec04 .image .line01 { margin: 0 0 10px 0;}
	
	#sec05 .ttl-pop { margin: 0 0 10px 0; text-align: center;}
	#sec05 .ttl-pop img { width: 96%; height: auto;}
	html[data-browse-mode="S"] #sec05 h3.box-ttl img { height: 60px; max-height: 60px;}
	
	#sec_service { padding: 15% 0 0 0; background: url("../img/sec04_service_frame_top.png") center top no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#sec_service .body { background: url("../img/sec04_service_frame_body.png") center top repeat-y; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#sec_service .top { padding: 0 8%;}
	#sec_service .bottom { padding: 0 8% 50px; background: url("../img/sec04_service_frame_bottom.png") center bottom no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#sec_service h3::after { display: none;}
	#sec_service .top h3 { padding: 0; margin: 0 0 30px 0; text-align: center;}
	#sec_service .bottom h3 { padding: 0; margin: 60px 0 30px; text-align: center;}
	#sec_service .bottom .main { margin: 20px 0; text-align: center;}
	#sec_service .bottom .main img { height: auto; vertical-align: top;}
	#sec_service .bottom .link { margin-top: 15px;}
	#sec_service.grass-contents .flex-box .image { margin: 0 0 20px; text-align: center;}
	
	.grass-contents { margin: 40px 10px 20px;}
	.grass-contents .color-ttl { margin: 20px 0 10px; font-size: 18px; font-weight: bold; text-align: center; color: #2a8706;}
	.grass-contents .flex-box .image { margin: 0 15% 15px; text-align: center;}
	.grass-contents .point-box { padding: 20px; margin-top: 20px; background: #eaf6df;}
	.grass-contents .point-box .flex-box { margin-bottom: 0;}
	.grass-contents .point-box .flex-box .image { margin: 0 5% 15px; border-radius: 10px; overflow: hidden;}
	
	/* FAQ */
	.faq-box { margin: 0 0 30px;}
	.faq-box .q { padding: 0 0 0 40px; margin: 0 0 30px 0; background: url("../img/q.png") left top no-repeat; -webkit-background-size: 28px auto; background-size: 28px auto; font-weight: bold;}
	.faq-box .a { padding: 0 0 0 40px; background: url("../img/a.png") left top no-repeat; -webkit-background-size: 28px auto; background-size: 28px auto; display: flex; flex-direction: column-reverse;}
	.faq-box .a.no-flex { display: flex; flex-direction: column;}
	.faq-box .a.no-flex .text { order: 1;}
	.faq-box .a.no-flex .float-image { order: 2; margin-top: 20px;}
	.faq-box .a.no-flex .memo { order: 3;}
	.faq-box .a .image { margin: 15px 0 0 0; text-align: center;}
	.faq-box .a .desc  { text-align: left;}
	.faq-box .a .memo  { padding-left: 1em; margin-top: 15px; text-indent: -1em; font-size: 14px;}
}