@charset "utf-8";

/*===================================
 CSS INFO
 Description : guide css
=====================================*/

.guide-index{}
.guide-index .guide-contents-head{
	text-align: center;
}
.guide-index .guide-list li a{
	background-color: #fff;
}
.guide-index .guide-list li{
	padding: 10px;
}
.guide-index .guide-list li:first-child{
	padding-left: 10px;
}


.guide-page{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 30px;
	margin-bottom: 30px;
}
.guide-contents{
	width: calc(100% - 300px);
	padding-left: 20px;
}
.guide-nav-menu,.faq-nav-menu{
	width: 260px;
	/*background-color: #fff;*/
	/*padding: 10px;*/
	margin: 0;
	/*border: 1px solid var(--light-gray);*/
}
.guide-nav-ttl{
	font-weight: bold;
}
.guide-nav-ttl a{
	color: var(--basic-text-color);
}
.guide-nav-list li{
	border-bottom: 1px solid var(--light-gray);
	padding: 8px 0;
}
.guide-nav-list li a:before{
	font-size: 18px;
}
.guide-nav-list li a:hover{
	text-decoration: none;
}

.guide-contents-head{
	border-bottom: 1px solid var(--light-gray);
	margin-bottom: 2rem;
}
.guide-page .guide-contents-head h1{
	margin-top: 0;
}

/*faq*/
.faq-top-gatlist,.guide-top-gatlist{
	display: flex;
	flex-wrap: wrap;
}
.faq-top-gatlist li{
	width: 25%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
.faq-top-gatlist li a,.guide-top-gatlist li a{
	display: block;
	border: 1px solid var(--basic-blue);
	border-radius: 80px;
	padding: 10px 10px 10px 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.faq-top-gatlist li a:before{
	content: "\e5cf";
	font-family: var(--font-family-icn);
	vertical-align: middle;
	font-size: 18px;
	margin-left: 5px;
}

.faq-wrap{
	display: flex;
	flex-wrap: wrap;
}
.faq-wrap .faq-items{
	width: 50%;
	padding-left: 10px;
	padding-right: 10px;
}
.faq-wrap .faq-items ul li,
.faq-nav-menu dl dd li{
	width: 95%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 10px;
}
.faq-wrap .faq-items ul li:before,
.faq-nav-menu dl dd li:before{
	display: inline-block;
	background-color: var(--basic-blue);
	width: 22px;
	height: 22px;
	padding: 5px;
	border-radius: 80px;
	margin-right: 5px;
	color: #FFF;
	font-size: 13px;
	text-align: center;
}
.faq-nav-ttl{
	font-weight: bold;
	font-size: 18px;
}

.faq-dtl-cat{
	background-color: var(--blue-gray);
	border-radius: 80px;
	padding: 5px 15px;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	color: var(--dark-navy);
}
.faq-detail-ttl h1{
	font-size: 20px;
	display: flex;
	flex-wrap: wrap;
}
.faq-detail-ttl h1:before{
	display: inline-block;
	background-color: var(--basic-blue);
	border-radius: 80px;
	color: #FFF;
	width: 30px;
	height: 30px;
	text-align: center;
	padding-top: 7px;
	font-size: 16px;
}
.faq-detail-ttl h1 span{
	width: calc(100% - 30px);
	padding-left: 10px;
}
.faq-nav-menu .toggle-content{
	display: none;
}
.faq-nav-menu .toggle{
	cursor: pointer;
}
.faq-nav-menu .toggle:before{
	content: "\e5cf";
	font-family: var(--font-family-icn);
	vertical-align: middle;
}
.faq-nav-menu .toggle.active:before{
	content: "\e5ce";
}
.faq-nav-menu dl{
	margin: 0;
	border-bottom: 1px solid var(--light-gray);
	padding: 10px 0;
}
.faq-nav-menu .guide-nav-ttl{
	margin-top: 40px;
	font-size: 18px;
}
.faq-nav-menu .guide-nav-ttl a{
	color: #0071bc;
}
.faq-nav-menu .guide-nav-list a{
	color: var(--basic-text-color);
}
.faq-nav-menu .guide-nav-list a:hover{
	color: var(--basic-orange);
}
.faq-index .guide-nav-ttl{
	display: none;
}
.faq-index .guide-nav-list{
	display: flex;
	flex-wrap: wrap;
}
.faq-index .guide-nav-list li{
	padding: 10px;
	border: none;
	width: 33.333333%;
}
.faq-index .guide-nav-list li a{
	border: 1px solid var(--light-gray);
	display: block;
	padding: 12px;
}

/*reserve*/

.guide-wrap{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.guide-imgarea{
	width: 30%;
}
.guide-txtarea{
	width: 70%;
	padding-left: 20px;
}

.guide-txtarea p{
	margin-top: 0;
}
.guide-inner{
	margin-bottom: 2rem;

}
.guide-cap{
	text-align: center;
}

.attentMsg{
	color: #F15A24;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #f39800;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}

a.btn-s {
	font-size: 15px;
	font-weight: bold;
	padding: 5px 15px;
}

.guide-top-gatlist{
	margin: 2rem 0;
}

.guide-top-gatlist li{
	width: 50%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}

.guide-top-gatlist li a:before{
	content: "\e5cf";
	font-family: var(--font-family-icn);
	vertical-align: middle;
	font-size: 18px;
	margin-left: 5px;
}

.reseve-notice {
	border: 1px solid var(--basic-yellow);
	padding: 20px;
	background-color: var(--pale-yellow);
}
.reseve-notice p{
	margin: 0;
}

/*insurance*/

span.marker {
    background: linear-gradient(transparent 50%, #ffea29 50%);
}

.meseki-notice {
	border: 1px solid var(--light-gray);
	padding: 20px;
	background-color: var(--pale-blue-gray);
}

.meseki-notice p{
	margin: 0;
}