@charset "UTF-8";

.event-cosmos img { max-width: 100%;}
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 */
.event-cosmos .design-ttl h2 { padding: 0; margin: 0; border: none; background: none; font-size: 36px; font-weight: bold; color: #fff;}
.event-cosmos .design-ttl h2 .color { color: #f6ff00;}
.event-cosmos .design-ttl { height: 90px; border-radius: 43px; background: #ff3891 url("../img/header_design.png") 12px center no-repeat; -webkit-background-size: 26px 73px; background-size: 26px 73px; display: flex; justify-content: center; align-items: center; position: relative;}
.event-cosmos .design-ttl::after { content: ''; width: 26px; height: 73px; background: url("../img/header_design.png") left center no-repeat; -webkit-background-size: 26px 73px; background-size: 26px 73px; display: block; position: absolute; right: 12px; top: calc(50% - 36.5px); transform: rotate(180deg);}

/* h3 */
.event-cosmos h3.sub { padding: 0; margin: 30px 0; border: none; font-size: 24px; font-weight: bold; text-align: center; background: #fff; color: #443829;}
.event-cosmos h3.sub-ttl { width: 100%; height: 60px; padding: 0; margin: 0 0 20px 0; border: none; border-radius: 8px; font-size: 26px; font-weight: bold; display: flex; justify-content: center; align-items: center; background: #ffbbd9; color: #443829;}
.event-cosmos h3.sub::before,
.event-cosmos h3.sub-ttl::before { display: none;}
.event-cosmos h3.sub::after,
.event-cosmos h3.sub-ttl::after  { display: none;}

/* h4 */
.event-cosmos h4.line-ttl { padding: 0; margin: 20px 0 15px; border: none; text-align: center; position: relative;}
.event-cosmos h4.line-ttl::before { content: ''; width: 100%; height: 2px; text-align: center; background: #ffbbd9; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1;}
.event-cosmos h4.line-ttl span { padding: 0 20px; font-size: 24px; font-weight: bold; background: #ffebf4; display: inline-block; color: #443829; position: relative; z-index: 2;}

/* P */
.event-cosmos p.head-text { margin: 0 0 20px 0; font-size: 18px; line-height: 2.0;}

/* button */
.event-cosmos .design-button { margin: 0 0 80px 0; text-align: center;}
.event-cosmos .design-button a { width: 560px; min-height: 70px; padding: 0; margin: 0 auto; border: #ff3891 2px solid; border-radius: 70px; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.2; text-decoration: none; color: #ff3891; background: #fff; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative;}
.event-cosmos .design-button a::before { content: ''; width: 10px; height: 10px; border-top: #ff3891 2px solid; border-right: #ff3891 2px solid; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 30px; top: calc(50% - 12px);}
.event-cosmos .design-button a::after { content: ''; width: 10px; height: 10px; border-top: #ff3891 2px solid; border-right: #ff3891 2px solid; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 30px; top: calc(50% - 4px);}

/* Table */
.event-cosmos .table-box + .table-box { margin-top: 20px;}
.event-cosmos .table-box h4.title { padding: 0; margin: 0; border-radius: 10px 10px 0 0; text-align: center; line-height: 1.2; background: #ab7e92;}
.event-cosmos .table-box h4.title span { padding: 14px 0 11px 40px; font-size: 20px; font-weight: bold; color: #fff; display: inline-block;}
.event-cosmos .table-box.seiiku h4.title span { background: url("../img/icon_seiiku.png") left center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px;}
.event-cosmos .table-box.saibai h4.title span{ background: url("../img/icon_saibai.png") left center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px;}
.event-cosmos .table-box dl { border-bottom: #ead6df 1px solid; display: flex; flex-wrap: nowrap; background: #fff;}
.event-cosmos .table-box dt { width: 130px; padding: 10px; border-right: #ead6df 1px solid; font-size: 18px; text-align: center; line-height: 1.4; box-sizing: border-box;}
.event-cosmos .table-box dd { width: calc(100% - 130px); padding: 10px; font-size: 18px; line-height: 1.4; text-align: center; box-sizing: border-box;}

/* Point */
.event-cosmos .point-box { margin: 0 0 40px 0;}
.event-cosmos h4.point-ttl { width: 100%; padding: 0; margin: 0 0 20px 0; font-size: 26px; font-weight: bold; line-height: 1.0; text-align: center; position: relative;}
.event-cosmos h4.point-ttl::before { content: ''; width: 48px; height: 55px; background: url("../img/icon_point.png") center top no-repeat; -webkit-background-size: cover; background-size: cover; display: block; position: absolute; top: -65px; left: calc(50% - 24px);}
.event-cosmos .pickup-point { padding: 40px; margin: 40px 0; border-radius: 8px; background: #fff; position: relative;}

/* FAQ */
.event-cosmos .faq-box { margin: 0 40px 50px;}
.event-cosmos .faq-box .q { min-height: 50px; padding: 0 0 0 70px; margin: 0 0 30px 0; background: url("../img/q.png") left top no-repeat; -webkit-background-size: 50px auto; background-size: 50px auto; font-size: 22px; font-weight: bold; line-height: 1.4; display: flex; align-items: center;}
.event-cosmos .faq-box .a { padding: 0 0 0 70px; background: url("../img/a.png") left top no-repeat; -webkit-background-size: 50px auto; background-size: 50px auto; overflow: hidden;}
.event-cosmos .faq-box .a .text { padding: 15px 20px; margin: 0; border-radius: 8px; font-size: 18px; line-height: 1.4; background: #fff;}

/* 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;}
	
	#cosmos_sec02 { padding: 0 40px 1px; margin: 0 0 80px 0; background: #ffebf4; position: relative;}
	#cosmos_sec02 .flex-box { display: flex; justify-content: space-between;}
	#cosmos_sec02 .flex-box figure { width: 420px;}
	#cosmos_sec02 .flex-box .text-box { width: 360px;}
	#cosmos_sec02 .design-ttl { margin: 0 -40px; position: relative; top: -45px;}
	#cosmos_sec03 { padding: 0 0 1px 0; margin: 0 0 40px 0; background: #ffebf4; position: relative;}
	#cosmos_sec03 .design-ttl { position: relative; top: -45px;}
	#cosmos_sec04 .design-ttl { margin-bottom: 20px;}
	#cosmos_sec05 .design-ttl { margin-bottom: 20px;}
	#cosmos_osusume .design-ttl { margin-bottom: 20px;}
}

/* SP
----------------------------*/
@media only screen and (max-width: 896px) {
	.wrapper { max-width: 100vw; overflow-x: hidden;}
	
  .event-bottom-banners { margin: 4vw; }
  .event-bottom-banners ul li:not(:last-child) { margin: 0 0 10px;}
	
	.special-intro { margin: 0 10px 40px;}
	.event-cosmos  { margin: 0 15px;}
	
	.event-cosmos .design-ttl h2 { font-size: 20px;}
	.event-cosmos .design-ttl h2 .color { color: #f6ff00;}
	.event-cosmos .design-ttl { height: 70px; border-radius: 40px; background: #ff3891 url("../img/header_design.png") 10px center no-repeat; -webkit-background-size: 20px auto; background-size: 20px auto; display: flex; justify-content: center; align-items: center;}
	.event-cosmos .design-ttl::after { content: ''; width: 20px; height: 100%; background: url("../img/header_design.png") left center no-repeat; -webkit-background-size: 20px auto; background-size: 20px auto; display: block; position: absolute; right: 10px; top: 0; transform: rotate(180deg);}
	.event-cosmos h3.sub { margin: 30px 0 15px; font-size: 20px;}
	.event-cosmos h3.sub-ttl { height: 50px; margin-bottom: 15px; font-size: 20px;}
	.event-cosmos h4.line-ttl span { padding: 0 20px; font-size: 18px; line-height: 1.4;}
	.event-cosmos h4.point-ttl { padding: 15px 0 0 0; font-size: 20px;}
	.event-cosmos h4.point-ttl::before { top: -50px;}
	.event-cosmos p.head-text { font-size: 16px; line-height: 1.8;}
	.event-cosmos .pickup-point { padding: 25px; margin: 40px 0 20px;}
	.event-cosmos .faq-box { margin: 0 20px 30px;}
	.event-cosmos .faq-box .q { padding: 0 0 0 40px; margin: 0 0 20px 0; background: url("../img/q.png") left top no-repeat; -webkit-background-size: 28px auto; background-size: 28px auto; font-size: 18px; font-weight: bold;}
	.event-cosmos .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;}
	.event-cosmos .faq-box .a .text { font-size: 16px; line-height: 1.4; background: #fff;}
	.event-cosmos .design-button { margin: 30px 10px 60px; text-align: center;}
	.event-cosmos .design-button a { width: auto; min-height: 60px; font-size: 16px;}
	.event-cosmos .design-button a::before { right: 20px;}
	.event-cosmos .design-button a::after  { right: 20px;}
	
	#cosmos_sec02 { padding: 0 20px 1px; margin-bottom: 80px; background: #ffebf4; position: relative;}
	#cosmos_sec02 .flex-box .text-box { margin-bottom: 20px;}
	#cosmos_sec02 .flex-box figure { margin: 0 0 30px;}
	#cosmos_sec02 .design-ttl { margin: 0 -15px; position: relative; top: -25px;}
	#cosmos_sec03 { padding: 0 0 1px 0; margin-bottom: 40px; background: #ffebf4; position: relative;}
	#cosmos_sec03 .design-ttl { position: relative; top: -25px;}
	#cosmos_sec04 .design-ttl { margin-bottom: 15px;}
	#cosmos_sec05 .design-ttl { margin-bottom: 15px;}
	#cosmos_osusume { margin: 0 !important;}
	#cosmos_osusume .design-ttl { margin: 0 10px 15px;}
	
}