@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 */
.title-frame { padding: 8px; border-radius: 10px;}
.title-frame.head { margin-bottom: 0 !important; border-radius: 10px 10px 0 0;}
.title-frame h2 { background-color: none;}
html[data-browse-mode="P"] .title-frame { margin: 80px 0 40px 0; background: url("../img/title_bg.jpg") center center repeat;}
html[data-browse-mode="P"] .title-frame h2 { padding: 20px; margin: 0; border: #fff 2px dashed; border-radius: 10px; text-align: center; background: none;}
html[data-browse-mode="P"] .title-frame h2 img { vertical-align: middle;}
html[data-browse-mode="S"] .title-frame { margin: 40px 0 20px 0; background: url("../img/title_bg.jpg") center center repeat; -webkit-background-size: 15px 15px; background-size: 15px 15px;}
html[data-browse-mode="S"] .title-frame h2 { padding: 15px; margin: 0; border: #fff 2px dashed; border-radius: 10px; text-align: center; background: none;}
html[data-browse-mode="S"] .title-frame h2 img { vertical-align: middle;}

/* h3 */
h3.color-ttl { padding: 0; margin: 60px 0 40px; border: none; font-size: 34px; font-weight: bold; text-align: center; background: none;}
h3.color-ttl img { vertical-align: middle;}
h3.color-ttl::after { display: none;}
h3.color-ttl strong { font-weight: bold; color: #ff5f95;}
html[data-browse-mode="S"] h3.color-ttl { padding: 0; margin: 40px 0 10px; font-size: 22px; text-align: center;}
html[data-browse-mode="S"] h3.color-ttl img { width: 100%;}
h3.image-ttl { padding: 0; margin: 0 0 20px; border: none; text-align: left; background: none;}
h3.image-ttl img { vertical-align: middle;}
h3.image-ttl::after { display: none;}
html[data-browse-mode="P"] h3.image-ttl img { max-height: 58px;}
html[data-browse-mode="S"] h3.image-ttl { padding: 0; margin: 0 0 10px; text-align: center;}
html[data-browse-mode="S"] h3.image-ttl img { width: 100%;}

/* button */
.btm-button { margin: 0 0 80px 0; text-align: center;}
.btm-button a { width: 570px; padding: 18px 20px 18px 5px; 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: #ff5f95; 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 60px; text-align: center;}
html[data-browse-mode="S"] .btm-button a { width: auto; font-size: 16px;}
html[data-browse-mode="S"] .btm-button a::before { right: 15px;}
html[data-browse-mode="S"] .btm-button a::after  { right: 15px;}

/* 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;}
	.pane-main .text.center { text-align: center; line-height: 1.2;}
	
	#akachan-tulip .special-anchor-links .child { letter-spacing: -0.08em;}
	#akachan-tulip img { max-width: 100%;}	
	#akachan-tulip section { margin-bottom: 80px;}	
	#akachan-tulip .text-memo { padding-left: 1em; text-indent: -1em;}
	#akachan-tulip .box-frame { padding: 40px 40px 1px 40px; margin: 0 0 60px 0; border-radius: 0 0 10px 10px; background: #fff4f8;}
	#akachan-tulip .point-box { margin: 0 0 40px 0;}
	#akachan-tulip .point-box .flex-box { margin: 0;}
	#akachan-tulip .flex-box { margin: 40px 0;}
	#akachan-tulip .flex-box.reverse { flex-direction: row-reverse;}
	#akachan-tulip .flex-box .image { width: 48%;}
	#akachan-tulip .flex-box .desc  { width: 48%;}
	#akachan-tulip .flex-box .flex-box-item { width: 48%;}
	
	#akachan-tulip .flex-box.line01 { margin: 0 0 40px;}
	#akachan-tulip .flex-box.line01 .flex-box-item.item01 { width: 42%;}
	#akachan-tulip .flex-box.line01 .flex-box-item.item02 { width: 54%;}
	#akachan-tulip .flex-box.line02 .flex-box-item figure { margin-bottom: 20px;}
	#akachan-tulip #point01 .text.mb { margin-bottom: 40px;}
	#akachan-tulip #point05 figure img { border-radius: 10px;}
}

/* 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 .text.center { text-align: center;}
	
	#akachan-tulip .special-anchor-links .child { padding: 1px 6% 0 2%; font-size: 17px; letter-spacing: -0.08em;}
	#akachan-tulip { padding: 0 10px;}
	#akachan-tulip sup { font-size: 12px; vertical-align: top;}
	#akachan-tulip section { margin-bottom: 40px;}
	#akachan-tulip .text-memo { padding-left: 1em; text-indent: -1em;}
	#akachan-tulip .box-frame { padding: 20px; margin: 0 0 40px 0; border-radius: 0 0 10px 10px; background: #fff4f8;}
	#akachan-tulip .point-box { margin: 0 0 20px 0;}
	#akachan-tulip .point-box .flex-box { margin: 0;}
	#akachan-tulip .flex-box { margin-bottom: 30px;}
	#akachan-tulip .flex-box .image { margin: 0 0 15px; text-align: center;}
	#akachan-tulip .flex-box .flex-box-item { margin-bottom: 30px;}
	#akachan-tulip .flex-box .flex-box-item figure { margin: 0 0 10px 0; text-align: center;}
	
	#akachan-tulip #point01 .text.mb { margin-bottom: 30px;}
	#akachan-tulip #sec01 .text { margin-bottom: 20px;}
	#sec04.title-frame { margin: 40px 10px 20px;}
	#sec05.title-frame { margin: 40px 10px 20px;}
}