@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;}

html[data-browse-mode="P"] .bg-frame { margin: 0 15px !important; padding-bottom: 1px; background: rgba(255,255,255,0.7);}
html[data-browse-mode="S"] .bg-frame { margin: 0 10px !important; padding-bottom: 1px; background: rgba(255,255,255,0.7);}

html[data-browse-mode="P"] h2.image-ttl { padding: 40px 0; margin: 0; text-align: center; background: url("../img/bg.jpg") center repeat;}
html[data-browse-mode="S"] h2.image-ttl { padding: 20px; margin: 60px auto 0; text-align: center; background: url("../img/bg.jpg") center repeat-y; -webkit-background-size: 100% auto; background-size: 100% auto;}
html[data-browse-mode="S"] #tsugiki_tomato h2.image-ttl { margin: 0 auto;}

/* 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;}
	
	#tsugiki_tomato section { margin: 0 0 100px 0; background: url("../img/bg.jpg") center repeat;}
	#tsugiki_tomato span.color { color: #e0230c; font-weight: bold;}
	.btm-button { padding: 50px 0; text-align: center;}
	
	#sec01 .bg-frame { padding: 60px 50px 50px; margin: 0 0 50px 0;}
	#sec01 .in-box { padding: 0; margin: 0 0 50px 0;}
	#sec01 .in-box .sub-ttl { margin: 0 0 20px 0; text-align: center;}
	#sec01 .in-box .image   { margin: 0 0 40px 0; text-align: center;}
	#sec01 .merit .title { margin: 0 0 35px 0; text-align: center;}
	
	#sec02 .flex-box { padding: 70px 50px; margin: 0 0 50px 0; align-items: center;}
	#sec02 .flex-box .image  { width: 350px;}
	#sec02 .flex-box ul { width: 400px;}
	#sec02 .flex-box ul li { padding: 0 0 0 36px; margin: 0 0 8px 0; background: url("../img/sec02_check.png") left center no-repeat; -webkit-background-size: 26px 26px; background-size: 26px 26px;}
	
	#sec03 .bg-frame { padding: 60px 50px 30px; margin: 0 0 50px 0;}
	#sec03 .sub-ttl  { margin: 0 0 50px 0; text-align: center;}
	#sec03 .flex-box { margin: 0 0 50px; align-items: center;}
	#sec03 .flex-box .image  { width: 320px;}
	#sec03 .flex-box .desc   { width: 420px;}
	#sec03 .flex-box .ttl    { padding-right: 30px; margin-bottom: 15px;}
	#sec03 .flex-box .text   { padding-left: 6px;}
	#sec03 .flex-box#point02 { flex-direction: row-reverse;}
	#sec03 .features { margin: 100px 0 0 0; position: relative;}
	#sec03 .features .title  { margin: 0 0 40px 0; text-align: center;}
	#sec03 .features-list li { margin: 0 0 30px 0;}
	#sec03 .features-list .flex-box { margin: 0;}
	#sec03 .features-list .flex-box .image { width: 220px;}
	#sec03 .features-list .flex-box .desc  { width: 510px;}
	#sec03 .features-list .flex-box .desc .ttl  { margin-bottom: 15px;}
	#sec03 .features-list .flex-box .desc .ttl img { width: 332px;}
	#sec03 .features-list .flex-box .desc .text { padding-bottom: 15px;}
	
	#sec04 .bg-frame { margin: 0 0 50px 0;}
	#sec04 .sub-ttl  { margin: 0 0 50px 0; text-align: center;}
	#sec04 .calendar { padding: 60px 50px 0; margin: 0 0 100px 0;}
	#sec04 .calendar .flex-box { margin: 0 0 30px 0; padding: 0; align-items: flex-end;}
	#sec04 .calendar .flex-box .map  { width: 70%; padding: 0 35px 0 0; border-right: #d3d3d3 4px solid; text-align: right; box-sizing: border-box;}
	#sec04 .calendar .flex-box .mark { width: 30%; padding: 0 0 10px 25px; text-align: center; box-sizing: border-box;}
	#sec04 .calendar .calendar-image { margin: 0 0 10px 0;}
	#sec04 .calendar .calendar-txt   { font-size: 18px; font-weight: bold;}
	#sec04 .howto-items { margin: 0 0 100px 0;}
	#sec04 .howto-items .lit-ttl     { margin: 0 0 15px 0;}
	#sec04 .howto-items .lit-ttl img { height: 46px;}
	#sec04 .howto-items .list { width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
	#sec04 .howto-items .list li.main { width: 100%; margin: 0 auto 50px; text-align: center;}
	#sec04 .howto-items .list li.main img { width: 450px;}
	#sec04 .howto-items .list li.w-frame  { width: 100%; margin: 0 auto 50px;}
	#sec04 .howto-items .list li.w-frame.hachiue { width: 48.5%; margin: 0 auto;}
	#sec04 .howto-items .list li.w-frame.jiue { width: 48.5%; margin: 0 auto;}
	#sec04 .howto-items .list li.w-frame ul li { padding: 0 0 0 15px; font-weight: bold; line-height: 1.2; background: url("../img/dot.png") left calc(0.5em - 3.5px) no-repeat; -webkit-background-size: 7px 7px; background-size: 7px 7px;}
	#sec04 .howto-items .list li.w-frame ul li + li { margin: 10px 0 0 0;}
	#sec04 .howto-items .list li.w-frame ul li .memo { font-size: 0.8em;}
	#sec04 .howto-grow             { padding: 0 0 20px 0;}
	#sec04 .howto-grow .grow-step  { margin: 0 50px;}
	#sec04 .howto-grow .grow-step li { padding: 0; margin: 0 0 50px 0; position: relative;}
	#sec04 .howto-grow .grow-step li .flex-box { align-items: center;}
	#sec04 .howto-grow .step-ttl { margin: 0 0 10px;}
	#sec04 .howto-grow .step-ttl img { height: 42px; position: relative; left: -2px;}
	#sec04 .howto-grow .desc   { width: 400px;}
	#sec04 .howto-grow .desc p:not(.step-ttl) + p { margin-top: 25px;}
	#sec04 .howto-grow .desc p.memo.kome { padding-left: 1em; margin-top: 5px; text-indent: -1em; font-size: 0.8em;}
	#sec04 .howto-grow .image  { width: 340px; text-align: right;}
	#sec04 .text-icon { padding: 4px 12px; margin: 0 8px 0 0; border-radius: 30px; text-align: center; line-height: 1.0; display: inline-block; font-weight: bold; color: #fff;}
	#sec04 .text-icon.jiue { background: #875205;}
	#sec04 .text-icon.hachiue { background: #368534;}
	
	#sec05 .sub-ttl-text { padding: 50px; margin: 0 50px 50px; font-size: 24px; text-align: center; letter-spacing: 0.15em; line-height: 2.0; color: #000; background: rgba(255,255,255,0.7);}
	#sec05 .image { padding-bottom: 50px; text-align: center;}
	
	#pickup_feature { margin: 80px 0 30px !important;}	
}

/* 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;}
	#tsugiki_tomato { padding: 0 10px;}
	#tsugiki_tomato section { margin: 0 0 60px; background: url("../img/bg.jpg") center repeat-y; -webkit-background-size: 100% auto; background-size: 100% auto;}
	#tsugiki_tomato .btm-button { padding: 30px 15px; text-align: center;}
	#tsugiki_tomato span.color { color: #e0230c; font-weight: bold;}
	
	#sec01 .bg-frame { padding: 30px 15px 20px; margin: 0 0 20px 0;}
	#sec01 .in-box { padding: 0; margin: 0 0 40px 0;}
	#sec01 .in-box .sub-ttl { margin: 0 0 20px 0; text-align: center;}
	#sec01 .in-box .image   { margin: 0 0 30px 0; text-align: center;}
	#sec01 .merit { padding: 0; margin: 0;}
	#sec01 .merit .title { margin: 0 0 15px 0; text-align: center;}
	
	#sec02 .flex-box { padding: 30px 15px; margin: 0 0 20px 0; align-items: center;}
	#sec02 .flex-box .image  { max-width: 400px; margin: 0 auto 30px; text-align: center;}
	#sec02 .flex-box ul { width: 400px;}
	#sec02 .flex-box ul li { padding: 0 0 0 28px; margin: 0 0 8px 0; background: url("../img/sec02_check.png") left center no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px;}
	
	#sec03 .bg-frame { padding: 30px 15px; margin: 0 0 30px 0;}
	#sec03 .sub-ttl  { margin: 0 0 20px 0; text-align: center;}
	#sec03 .flex-box { margin: 0 0 20px;}
	#sec03 .flex-box .image  { margin: 0 0 20px 0; text-align: center;}
	#sec03 .flex-box .desc   {}
	#sec03 .flex-box .ttl    { width: 80%; margin-bottom: 15px;}
	#sec03 .flex-box .text   { padding: 0 2%;}
	#sec03 .flex-box#point02 { flex-direction: row-reverse;}
	#sec03 .features         { margin: 50px 0 0 0; position: relative;}
	#sec03 .features .title  { margin: 0 0 20px 0; text-align: center;}
	#sec03 .features-list li { padding: 0; margin: 0 0 30px 0;}
	#sec03 .features-list .flex-box { margin: 0; flex-direction: row-reverse;}
	#sec03 .features-list .flex-box .image { margin: 0 auto 15px;}
	#sec03 .features-list .flex-box .desc .ttl img { width: 220px;}
	#sec03 .features-list .flex-box .desc .text { padding-left: 5px;}
	
	#sec04 .bg-frame { padding: 30px 15px; margin: 0 0 30px 0;}
	#sec04 .sub-ttl  { margin: 0 0 20px 0; text-align: center;}
	#sec04 .calendar { padding: 0; margin: 0 0 40px 0;}
	#sec04 .calendar .flex-box { margin: 0 10px;}
	#sec04 .calendar .flex-box .mark { padding: 20px 28%; border-top: #d3d3d3 2px solid; text-align: center; box-sizing: border-box;}
	#sec04 .calendar .flex-box .map  { padding: 20px 0; text-align: center;}
	#sec04 .calendar .calendar-image { margin: 0 0 10px 0;}
	#sec04 .calendar .calendar-txt   { padding-left: 1em; text-indent: -1em; font-size: 14px; font-weight: bold;}
	#sec04 .howto-items { margin: 0 0 60px 0;}
	#sec04 .howto-items .lit-ttl     { margin: 0 0 10px 0; text-align: left;}
	#sec04 .howto-items .jiue .lit-ttl,
	#sec04 .howto-items .hachiue .lit-ttl { margin: 0 30% 10px 0; text-align: left;}
	#sec04 .howto-items .list li.main { margin: 0 auto 30px;}
	#sec04 .howto-items .list li.w-frame { margin: 0 auto 30px;}
	#sec04 .howto-items .list li.w-frame ul li { padding: 0 0 0 15px; font-weight: bold; line-height: 1.2; background: url("../img/dot.png") left calc(0.5em - 3.5px) no-repeat; -webkit-background-size: 7px 7px; background-size: 7px 7px;}
	#sec04 .howto-items .list li.w-frame ul li { margin: 10px 0 0 0;}
	#sec04 .howto-items .list li.w-frame ul li .memo { font-size: 0.8em;}
	#sec04 .howto-items .icons { display: flex; justify-content: flex-end;}
	#sec04 .howto-items .icons p   { margin-left: 15px;}
	#sec04 .howto-items .icons img { width: 60px;}
	#sec04 .howto-grow { padding: 0 0 15px 0;}
	#sec04 .howto-grow .grow-step li { padding: 0; margin: 0 0 50px 0;}
	#sec04 .howto-grow .grow-step li:last-child { margin: 0;}
	#sec04 .howto-grow .grow-step li .flex-box + .flex-box { margin-top: 25px;}
	#sec04 .howto-grow .step-ttl   { margin: 0 0 15px -2px;}
	#sec04 .howto-grow .step-ttl img { width: auto; height: 32px;}
	#sec04 .howto-grow .desc p:not(.step-ttl) + p { margin-top: 25px;}
	#sec04 .howto-grow .desc p.memo.kome { padding-left: 1em; margin-top: 5px; text-indent: -1em; font-size: 0.8em;}
	#sec04 .howto-grow .image  { margin: 10px 0 0 0; text-align: center;}
	#sec04 .howto-grow .image img { position: relative;}
	#sec04 .text-icon { padding: 4px 12px; margin: 0 8px 0 0; border-radius: 30px; text-align: center; line-height: 1.0; display: inline-block; font-weight: bold; color: #fff;}
	#sec04 .text-icon.jiue { background: #875205;}
	#sec04 .text-icon.hachiue { background: #368534;}
	
	#sec05 .sub-ttl-text { padding: 20px; margin: 0 10px 30px; color: #000; background: rgba(255,255,255,0.7);}
	#sec05 .image { padding: 0 10px 20px; text-align: center;}
}