@charset "UTF-8";

/* Class */
.font-poppins{
	font-family:Poppins;
}
.fc_red{
	color:#C00000;
}
.fc_blue{
	color:#2474C5;
}
.fw_600{
	font-weight:600;
}

body{
	background-color:#F8F7F5;
	color:#1A1A1A;
	font-family:sans-serif;
	line-height:1.8;
	font-weight:400;
}

/* ヘッダー */
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-color:#FFFFFF;
	z-index:1000;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.header_logo a{
	display:inline-block;
	text-decoration:none;
	color:#1A1A1A;
	font-weight:500;
}
.hamburger{
	display:flex;
	flex-direction:column;
	justify-content:center;
	cursor:pointer;
}
.hamburger span{
	display:block;
	width:100%;
	background:#1A1A1A;
	border-radius:2px;
	transition:.3s;
}

/* ハンバーガーがアクティブな時に「×」表示 */
.hamburger.active span:nth-child(2){
    opacity:0;
}
.hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}
.hamburger span{
    transition:.3s;
}

/* メニュー内 */
.menu{
	display:none;
	position:fixed;
	right:0;
	background-color:#FFFFFF;
	height:100vh;
	z-index:2000;
}
.menu.open{
	display:block;
}
.menu li{
	border-bottom:1px solid #EEEEEE;
}
.menu a{
	display:flex;
	align-items:center;
	text-decoration:none;
}
.menu picture{
	display:flex;
}
.menu img{
	height:auto;
}
.menu p{
	color:#1A1A1A;
	font-weight:500;
}


/* 一覧ページ タイトル */
#page_title{
	text-align:center;
}
h1{
	line-height:1;
}
span.title_en{
	font-weight:600;
}
span.title_ja{
	display:block;
	font-weight:500;
}

/* 一覧ページ コンテンツ */
.list ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.list li{
    border:2px solid #FFFFFF;
    border-radius:4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.list li:hover{
    background-color:#FFFFFF;
}
.list a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    text-decoration:none;
    color:#1A1A1A;
}
.list picture{
	display:flex;
}
.list img{
    height:auto;
}
.list p{
	font-weight:500;
}


/* マニュアルページ */
#virtual-detail {
  scroll-margin-top:100px;
}

#manual_title h1{
	color:#2474C5;
}
#manual_title span{
	color:#1A1A1A;
}
#manual_contents h2{
	display:flex;
	align-items:center;
}
#manual_contents h2 span{
	display:inline-block;
}
#manual_contents .step_order{
    color:#FFFFFF;
    background-color:#2474C5;
    text-align:center;
    box-sizing:border-box;
    border-radius:4px 4px 0 0;
}
#manual_contents .detail_box{
    box-sizing:border-box;
    border-top:1px solid #2474C5;
    border-bottom:1px solid #2474C5;
}
#manual_contents .text_box a{
	color:#2474C5;
	text-decoration:underline;
	font-weight:500;
}
#manual_contents .text_box ul{
	list-style:square;
}
.lead_buttons{
	position:relative;
}
.lead_buttons a{
	position:absolute;
	text-decoration:none;
	text-align:center;
	background-color:#6FC4BE;
	color:#FFFFFF;
	font-weight:500;
    box-sizing:border-box;
    border-radius:4px;
}
.lead_buttons a:hover{
	color:#6FC4BE;
	background-color:#FFFFFF;
	border:1px solid #6FC4BE;
}
.lead_buttons a.btnBack{
	left:0;
}
.lead_buttons a.btnBack::before{
	content:"←";
}
.lead_buttons a.btnNext{
	right:0;
}
.lead_buttons a.btnNext::after{
	content:"→";
}

/* FAQページ */
#manual_contents .faq_box{
	box-sizing:border-box;
	border-bottom:1px solid #2474C5;
}
.faq_box dt{
	position:relative;
	cursor:pointer;
	border-top:1px solid #2474C5;
}
.faq_box dd{
	display:none;
	background-color:#FFFFFF;
}
.faq_box dt::before{
	content:"";
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background-color:#2474C5;
}
.faq_box dt::after{
	content:"";
	position:absolute;
	transition:height .3s ease;
}
.faq_box dt.open::after{
	height:0;
	background-color:#2474C5;
}
#manual_contents .faq_box a{
	color:#2474C5;
	text-decoration:underline;
	font-weight:500;
}

/* チャットサポート */
#chat_support .caption p:last-child{
	margin-bottom:0;
}
#chat_support .detail_box{
	background-color:#FFFFFF;
	border-radius:4px;
}
#chat_support .order{
	font-weight:600;
}
#chat_support .emoji{
	font-family:apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
	padding:0 5px;
}
#chat_support .contents li{
	list-style:inside;
}
#chat_support .mail_support a{
	display:flex;
	align-items:center;
	color:#1A1A1A;
	text-decoration:none;
}
#chat_support .mail_support a:hover{
	color:#6FC4BE;
}
#chat_support .mail_support h2{
	margin-bottom:0;
}


/* Footer */
footer{
	text-align:center;
	padding:10px 0;
}