@charset "UTF-8";


/* ------------------------------------------------
  reset
------------------------------------------------ */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

sup {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 60%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
caption, th{
	font-weight: normal;
	text-align:left;
}

h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:500;
}
area {
	border:none;
	outline:none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img{
	border:0;
	vertical-align:bottom;
}

strong {
	font-weight: inherit;
}


/* ------------------------------------------------
  common
------------------------------------------------ */

html,body {
	height: 100%;
}

html {
	font-size: 62.5%;
}

/*html.lock,*/
html.lock body {
  height: 100vh;
	/*overflow: hidden;*/
}

body {
	color: #313131;
	font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","メイリオ ", Meiryo, Osaka, sans-serif;
	font-weight: 500;
	line-height:1.4;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	background-color: #FFF;
	-webkit-text-size-adjust: 100%;
	font-feature-settings : "palt";
}
@media screen and (max-width: 668px) {
	body {
		font-size: 1.4rem;
		font-size: 3.74vw;
		letter-spacing: 0;
	}
}


#stage {
	margin: 0 auto;
	background-color: #FFF;
	overflow: hidden;
}

#stage .btn > a {
	text-decoration: none;
}

#wrapper {
	width: 100%;
	margin: 0 auto;
/* 	overflow: hidden; */
	position: relative;
}
#wrapper section {
	position: relative;
	z-index: 10;
	padding: 0;
}
#wrapper .inner {
	margin: 0 auto;
	box-sizing: border-box;
}
@media screen and (max-width: 668px) {
	#stage {

	}
	#wrapper {
		width: auto;
		min-width: 375px;
	}
	#wrapper section {
		padding: 0;
	}
	#wrapper img {
		max-width: 100%;
		height: auto
	}
}


a {
	color: inherit;
	outline: none;
	text-decoration:none;
}
a:active,
a:focus {
	text-decoration: underline;
}


a:hover,
a:hover span {
	text-decoration: underline;
	outline: none;
}

a.underline {
	text-decoration: underline;
}
a.underline:hover {
	opacity: 0.7;
}

a:hover span {
	text-decoration: none;
}

a.disabled {
	pointer-events: none;
}

@media screen and (min-width: 669px) {
	.fade {
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	.fade:hover {
		opacity: 0.6;
	}
}

.cf::before,
.cf::after,
.clearfix::after {
	content: " ";
	display: table;
}
.cf::after,
.clearfix::after {
	clear: both;
}

.cb {
	clear: both;
}

img.liquid {
	width: 100%;
	height: auto;
}

img {
	max-width: 100%;
	height: auto;
}

.p_rel {
	position: relative;
}


/* ------------------------------------------------
  ヘッダー
------------------------------------------------ */
#header {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	min-width: 1200px;
}
#header .inner {
	width: 100%;
	max-width: 1240px;
	padding: 0;
}
@media screen and (max-width: 668px) {
	#header {
		padding: 3.75% 4%;
		min-width: 375px;
	}

	#header .inner .logo {
		width: 90px;
	}
}


/* ------------------------------------------------
  メニュー
------------------------------------------------ */
.pc_menu {
    position: fixed;
    z-index: 10000;
    left: 0;
    right: 0;
    top: 0;
	padding: 20px 0;
}
.pc_menu.is-changed{
	background-color: rgba(255, 255, 255, 0.8);
}
.pc_menu_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	width: 1000px;
}
.pc_menu li {
	text-align: center;
	width: calc(100% / 8);
	font-size: 15px;
    font-weight: bold;
}
.pc_menu li:first-child {
	width: 8%;
	padding: 0 5px;
}
.pc_menu li a {
	color: #fff;
}
.pc_menu.is-changed li a {
	color: #000;
}
.pc_menu_disp {
	display: block;
	}
.sp_menu_disp {
	display: none;
}
#kv .sp_menu_disp {
	display: none;
}

@media screen and (max-width: 1000px) {
	.pc_menu_disp {
		display: none;
	}
	.sp_menu_disp {
		display: block;
	}
	#kv .sp_menu_disp {
		display: block;
	}
}


#btn_menu {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 990;
	width: 1000px;
	margin: auto;
	box-sizing: border-box;
	pointer-events: none;
}
#btn_menu a {
	font-size: 0;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 0 0 auto;
	overflow: hidden;
	background-image: url(../images/btn_menu.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	pointer-events: visible;
}
#btn_menu.open a {
	background-image: url(../images/close.svg);
}
#menu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #f0f0f0;
	/*background-image: url(../images/bg_menu.png);*/
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	display: none;
}
#menu .logo {
	position: absolute;
	top: 30px;
	left: 50px;
	z-index: 100;
}

#menu .inner {
	width: 1200px;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	position: relative;
}
#menu .inner ul {
	width: 500px;
}
#menu .inner ul li + li {
	border-top: 2px solid #E6282C;
}
#menu .inner ul li a {
	display: block;
	font-size: 29px;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	padding: 20px 0;
}
#menu .inner ul li a::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #E6282C;
	border-right: 2px solid #E6282C;
	transform: rotate(45deg);
	position: absolute;
	bottom: 45%;
	right: 15%;
	margin: auto;
}


@media screen and (min-width: 768px) and (max-width: 1000px) {
	#btn_menu {
		width: 100%;
		top: 0;
		margin: 0.8666% 0 0 0;
		padding-right: 6.8%;
		box-sizing: border-box;
	}
	#btn_menu a {
		width: 5.5837%;
		height: 0;
		padding-top: 6.5837%;
		background-image: url(../images/btn_menu.png);
	}
}
@media screen and (max-width: 768px) {
	#btn_menu {
		width: 100%;
		top: 0;
		margin: 3.8666% 0 0 0;
		padding-right: 6.8%;
		box-sizing: border-box;
	}
	#btn_menu a {
		width: 8.5837%;
		height: 0;
		padding-top: 8.5837%;
		background-image: url(../images/btn_menu.png);
	}
	#btn_menu.open a {
		background-image: url(../images/sp/close.svg);
	}
	#menu {
		/*background-image: url(../images/sp/bg_menu.png);*/
		background-position: 100% 30%;
	}
	#menu .logo {
		top: 0;
		left: 0;
		margin: 5.3333% 0 0 5.3333%;
		width: 20%;
	}

	#menu .inner {
		width: 100%;
	}
	#menu .inner ul {
		width: 85%;
	}
	#menu .inner ul li + li {
		border-top: 1px solid #E6282C;
	}
	#menu .inner ul li a {
		font-size: 1.5em;
		padding: 5% 0;
	}
	#menu .inner ul li a::after {
		width: 8px;
		height: 8px;
		right: 0%;
	}
}


/* ------------------------------------------------
  フッター
------------------------------------------------ */
#footer {
	font-size: 14px;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	background-image: url(../images/pc/footer_bg.jpg);
  	background-repeat: no-repeat;
  	background-position: center center; /* または top center など */
  	background-size: cover;
	position: relative;
	z-index: 100;
	margin-top: 80px;
}
#footer::before,
#footer::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	background-color: inherit;
}
#footer::before {
	left: calc(100% - 1px);
}
#footer::after {
	right: calc(100% - 1px);
}
#footer .inner {
	padding: 0 10px;
}
#footer .menu {
	display: flex;
	justify-content: center;
	padding: 1.8em 0;
}
#footer .menu li {
	margin: 0 1em;
}
#footer .menu a {
	color: inherit;
}
.copyright {
	padding: 1em;
	text-align: center;
	color: #000;
}

@media screen and (max-width: 668px) {
	#footer {
		background-image: url(../images/sp/footer_bg.png);
  		background-repeat: no-repeat;
  		background-position: center center; /* または top center など */
  		background-size: cover;
		font-size: 1em;
		margin-top: 4%;
	}
	#footer .inner {
		padding: 0 8%;
	}
	#footer .menu {
		display: block;
		padding: 2em 0;
		margin-bottom: 0;
	}
	#footer .menu li {
		margin: 0;
	}
	#footer .menu li + li {
		margin-top: 1em;
	}
	.copyright {
		font-size: 0.64285em;
		padding: 2em 0 12em;
	}
}


/* ------------------------------------------------
  コンテンツ
------------------------------------------------ */

.contents_block {
	max-width: 1000px;
	margin: 0 auto;
}

h2.circle {
	display: flex;
	margin-bottom: 15px;
}
h2.circle em {
	font-style: normal;
	display: inline-block;
}
h2.circle::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-image: url(../images/circle.svg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 0.5em;
}
h2.circle span {
	font-size: 22px;
	font-weight: bold;
	flex: 1;
}
@media screen and (max-width: 668px) {
	h2.circle {
		margin-bottom: 15px;
		padding-right: 12%;
	}
	h2.circle::before {
		width: 1.28571em;
		height: 1.28571em;
		margin-top: 0.3em;
	}
	h2.circle span {
		font-size: 1.42857em;
		line-height: 1.3;
	}
}


/* ------------------------------------------------
  Q&A
------------------------------------------------ */
#qa {
	background-image: url(../images/pc/cnt12_bg.jpg);
  	background-repeat: no-repeat;
  	background-position: center center; /* または top center など */
  	background-size: cover;
}

#qa .inner .body {
	display: block;
	height: auto;
	padding: 0 8% 5%;
	border: none;
}
#qa #accordion > a {
	display: block;
	font-size: 22px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background-color: #E6282C;
	padding: 18px;
	position: relative;
	text-decoration: none;
}
#qa .inner .body ul {
	max-width: 880px;
	margin: 0 auto;
}

#qa .inner .body .answer {
	display: none;
}

#qa .inner .body .question::after {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border-top: 1px solid #9a9a9a;
	border-right: 1px solid #9a9a9a;
	transform: rotate(-45deg);
	position: absolute;
	bottom: 45%;
	right: 5%;
	margin-bottom: -10px;
	pointer-events: visible;
}
#qa .inner .body li.open .question::after {
	transform: rotate(135deg);
	margin: auto;
}
#qa #accordion.open > a::after {
	transform: rotate(0deg);
	margin-bottom: -10px;
}


#qa .inner .body ul li,
#qa .inner .body ul li + li {
	margin-top: 0;
	padding: 1em 0;
}
#qa .inner .body ul li a {
	display: block;
	text-decoration: none;
	pointer-events: visible;
}
#qa .inner .body ul li a * {
	pointer-events: visible;
}

#qa .inner .body .question::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 3%;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: visible;
}

#qa .inner .body .answer .a_inner::after {
	content: "";
  	position: absolute;
  	top: 0;
  	left: 50%;
  	transform: translateX(-50%);
  	width: 95%;
  	height: 1px;
  	background-color: #9a9a9a;
}
#qa .inner .body .answer .a_inner::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 13px;
	left: 3%;
	pointer-events: visible;
}
#qa .border-line {
	border-top: 1px solid;
}
#qa .inner .body .question,
#qa .inner .body .answer .a_inner {
	display: flex;
}

#qa .inner .body .question .q_inner {
	flex: 1;
	padding-left: 9%;
	font-weight: bold;
}
#qa .inner .body .answer .a_inner p {
	flex: 1;
	padding-left: 8.5%;
	font-weight: bold;
	padding-bottom: 2%;
	padding-right: 2%;
}
#qa .inner .body .question .q_inner {
	font-weight: bold;
}
#qa .inner .body .question {
	margin-bottom: 0;
  padding-right: 7%;
	padding-top: 2%;
	padding-bottom: 2%;
  position: relative;
	color: #000;
	background: #fff;
	border-radius: 10px 10px 0 0;
}
#qa .inner .body .open .question {
	border-radius: 10px;
}
#qa .inner .body .question::before {
	background-image: url(../images/pc/q_icon.png);
}
#qa .inner .body .answer {
	line-height: 1.6;
	background: #fff;
	color: #000;
	border-radius: 0 0 10px 10px;
	padding-top: 1em;
}
#qa .em {
	color: #e75f25;
}


@media screen and (min-width: 768px) {
	#qa .inner .body .answer {
		height: auto !important;
	}
}

#qa .inner .body .answer .a_inner::before {
	background-image: url(../images/pc/a_icon.png);
}

@media screen and (max-width: 768px) {
	#qa {
		background-image: url(../images/sp/cnt12_bg.png);
	}
	#qa .inner {
		padding: 0;
	}
	#qa .inner .body {
		display: block;
		height: auto;
		padding: 0 5% 10%;
		border: none;
	}
	#qa #accordion > a {
		font-size: 1.42857em;
		line-height: 1.2;
		padding: 4% 8%;
		pointer-events: visible;
		text-align: left;
	}
	#qa .inner .body ul li,
	#qa .inner .body ul li + li {
		margin-top: 0;
		padding: 1em 0;
	}

	#qa .inner .body .question .q_inner {
		font-size: 3.73vw;
	}
	#qa .inner .body .question {
		margin-bottom: 0;
		padding-right: 15%;
		padding-top: 5%;
		padding-bottom: 5%;
		position: relative;
	}
	#qa .inner .body .question::after {
		content: "";
		display: block;
		width: 15px;
		height: 15px;
		border-top: 1px solid #9a9a9a;
		border-right: 1px solid #9a9a9a;
		transform: rotate(-45deg);
		position: absolute;
		bottom: 45%;
		right: 5%;
		margin-bottom: -10px;
		pointer-events: visible;
	}
	#qa .inner .body .question::before {
		width: 6.26vw;
		height: 6.26vw;
	}
	#qa .inner .body .answer .a_inner::before {
		width: 8.26vw;
		height: 6.26vw;
		top: 7%;
	}
	#qa .inner .body .question .q_inner {
		padding-left: 16%;
	}
	#qa .inner .body .answer .a_inner p {
		padding-left: 14%;
	}
	#qa .inner .body .answer .a_inner p {
		padding-bottom: 5%;
		padding-right: 5%;
	}
	#qa .inner .body .answer {
		line-height: 1.6;
		/*display: none;*/
		padding-top: 0.5em;
	}
}


/* ------------------------------------------------
  footer前ブロック
------------------------------------------------ */
#wrapper section.explanation {
	padding: 50px 0 0;
	color: #000;
}
.explanation .explanation_title {
	font-size: 32px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 50px;
}
.explanation .img_block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}
.explanation .img_block .left_block {
	width: 30%;
}
.explanation .img_block .right_block {
	width: 63%;
}
.explanation .img_block .right_block ul  {
	list-style: disc;
}
.explanation .img_block .right_block ul li {
	font-size: 18px;
	line-height: 38px;
}

.explanation .explanation_text {
	font-size: 14px;
	line-height: 24px;
	padding: 2% 4%;
	border: 1px solid #7a7a7a;
}
.explanation .explanation_text dt,
.explanation .explanation_text dd, {
	display: block;
}
.explanation .explanation_text .mb30 {
	margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
	#wrapper section.explanation {
	padding: 6.51vw 5%;
	}
	.explanation .explanation_title {
		font-size: 7.166vw;
		margin-bottom: 6.51vw;
	}
	.explanation .img_block {
		display: block;
		margin-bottom: 6.51vw;
	}
	.explanation .img_block .left_block {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5vw;
	}
	.explanation .img_block .right_block {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.explanation .img_block .right_block ul li {
		font-size: 3.34vw;
		line-height: 6.94vw;
	}
	.explanation .explanation_text {
		font-size: 2.82vw;
		line-height: 5.125vw;
	}
}

/* ----------------------------
  デバイス振り分け
---------------------------- */
.sp_disp {
	display: none!important;
}

@media screen and (max-width: 668px) {
	.pc_disp {
		display: none!important;
	}
	.sp_disp {
		display: block!important;
	}
	table.sp_disp {
		display: table!important;
	}
	tbody.sp_disp {
		display: table-row-group!important;
	}
	img.sp_disp {
		display: inline-block!important;
	}
	br.sp_disp {
		display: inline!important;
	}
}