@charset "UTF-8";

html[data-browse-mode="P"] .sp { display: none !important;}
html[data-browse-mode="S"] .pc { display: none !important;}
#zephyrlily { color: #443829;}
#zephyrlily h2 { padding: 0; margin: 0; background: none;}
#zephyrlily h2::before,
#zephyrlily h2::after { display: none;}

/* 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;}
	
	#zephyrlily h2.ttl { height: 160px; margin: 0 -20px 30px; background: url("../img/title_bg.jpg") center top no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; display: flex; justify-content: center; align-items: center;}
	#zephyrlily h2.ttl img { position: relative; top: -10px;}
	#zephyrlily .text  { font-size: 20px; color: #443829;}
	#zephyrlily .text + .text { margin-top: 20px;}
	#zephyrlily .underline { padding: 0 0 1px 0; border-bottom: #443829 1px solid;}
	
	#zephyrlily_about,
	#zephyrlily_secret,
	#zephyrlily_charm,
	#zephyrlily_point { padding: 40px; margin: 0 0 60px 0; background: #faf7f2;}
	
	#zephyrlily_about h2.ttl img { width: 445px;}
	#zephyrlily_about .flex-innerbox { display: flex; justify-content: space-between;}
	#zephyrlily_about .flex-innerbox .image { width: 50%;}
	#zephyrlily_about .flex-innerbox .desc  { width: 45%;}
	
	#zephyrlily_secret h2.ttl img { width: 535px;}
	#zephyrlily_secret .flex-innerbox { display: flex; flex-direction: row-reverse; justify-content: space-between;}
	#zephyrlily_secret .flex-innerbox .image { width: 50%;}
	#zephyrlily_secret .flex-innerbox .desc  { width: 45%;}
	
	#zephyrlily_charm h2.ttl img { width: 463px;}
	#zephyrlily_charm .flex-innerbox { display: flex; justify-content: space-between;}
	#zephyrlily_charm .flex-innerbox .image { width: 50%;}
	#zephyrlily_charm .flex-innerbox .desc  { width: 45%;}
	#zephyrlily_charm .flex-innerbox .desc p.ttl { margin: 0 0 10px 0;}
	#zephyrlily_charm .flex-innerbox .desc .text { padding: 0 0 0 1em;}
	#zephyrlily_charm .flex-innerbox .desc ul li { margin-bottom: 30px;}
	#zephyrlily_charm .flex-innerbox .desc ul li:last-child { margin-bottom: 0;}
	
	#zephyrlily_point h2.ttl img { width: 455px; top: -5px;}
	#zephyrlily_point ul li { margin: 0 0 50px 0; display: flex; justify-content: space-between;}
	#zephyrlily_point ul li.point02 { flex-direction: row-reverse;}
	#zephyrlily_point ul li:last-child { margin-bottom: 0;}
	#zephyrlily_point .image { width: 50%;}
	#zephyrlily_point .desc  { width: 45%;}
	#zephyrlily_point p.ttl  { margin: 0 0 10px -12px;}
	#zephyrlily_point .text  { padding: 0 0 0 1em;}
	#zephyrlily_point ul li.point03 .desc .text { padding: 0;}
}

/* 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;}
	
	#zephyrlily { padding: 0 10px;}
	
	#zephyrlily h2.ttl { padding: 20px 0; margin: 0 -20px 20px; background: url("../img/title_bg.jpg") center top no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
	#zephyrlily .text  { font-size: 18px; color: #443829;}
	#zephyrlily .text + .text { margin-top: 10px;}
	#zephyrlily .underline { text-decoration: underline;}
	#zephyrlily .flex-innerbox { display: flex; flex-direction: column-reverse;}
	#zephyrlily .image { text-align: center;}
	#zephyrlily .desc  { margin-bottom: 15px;}
	
	#zephyrlily_about,
	#zephyrlily_secret,
	#zephyrlily_charm,
	#zephyrlily_point { padding: 20px; margin: 0 0 30px 0; background: #faf7f2;}
	
	#zephyrlily_about h2.ttl img  { width: 70%; position: relative; top: -4px;}
	#zephyrlily_secret h2.ttl     { padding: 20px 0;}
	#zephyrlily_secret h2.ttl img { width: 88%; position: relative; top: -4px;}
	
	#zephyrlily_charm h2.ttl img  { width: 70%; position: relative; top: -4px;}
	#zephyrlily_charm p.ttl       { width: 80%; margin: 0 0 10px -10px;}
	#zephyrlily_charm li          { margin-bottom: 30px;}
	#zephyrlily_charm li:last-child { margin-bottom: 0;}
	
	#zephyrlily_point h2.ttl img  { width: 76%; position: relative; top: -2px;}
	#zephyrlily_point li          { margin: 0 0 30px 0; display: flex; flex-direction: column-reverse;}
	#zephyrlily_point li:last-child { margin-bottom: 0;}
	#zephyrlily_point p.ttl       { width: 80%; margin: 0 0 10px -10px;}
}