@charset "utf-8";
/* =========================================
CSS Inf	rmation

Update:2024/01/18
------------------------------------------------------------------------------
00:custom property
01:reset
02:link
03:design detail
04:module template
05:content style
========================================= */
/*----------------------------------------------------------------------------
	00:custom property
----------------------------------------------------------------------------*/
:root {
	--main-color: #ca2a1e;
	--sub-color: #FFB600;
}
/*----------------------------------------------------------------------------
	01:reset
----------------------------------------------------------------------------*/
body,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,p,table,form,img {
margin:0;
padding:0;
font-size:100%;
line-height:1.5;
}

body {
margin:0;
color:#333;
font-size:100%;
font-family:'Noto Sans JP','メイリオ', sans-serif;
/*overflow: auto;*/
}

html {overflow-x: hidden;}
img {border:none; vertical-align:top;max-width: 100%;}
ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
th,td {vertical-align:top;}
select option {padding:0 5px;}
hr {display:none;}
*,*::before,*::after{box-sizing: border-box;}
.is-pc{display:block;}
.is-sp{display:none;}

/*----------------------------------------------------------------------------
	02:link
----------------------------------------------------------------------------*/
a{color:#369; text-decoration:none; transition: 0.5s;}
a:hover{text-decoration:none; transition: 0.5s;}
/**:focus {-moz-outline-style:none;}*/
/*a {outline:none;}*/
a::before{transition: 0.5s;}
a:hover::before{transition: 0.5s;}

/*----------------------------------------------------------------------------
	03:afterdesign detail
----------------------------------------------------------------------------*/
/* margin padding */
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mtb10{margin-bottom:10px; margin-top:10px;}
.mt30{margin-top:30px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.mt15{margin-top: 15px;}
.mt30{margin-top: 30px;}
.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}
.ml20{margin-left:20px;}
.mr20{margin-right:20px;}
.ml30{margin-left:30px;}
.mr30{margin-right:30px;}
.plr30{padding-left:30px; padding-right:30px;}
.plr50{padding-left:50px; padding-right:50px;}

/* font */
.fontWeight{font-weight:bold;}
.fs-xxs{font-size:.7em;}
.fs-xs{font-size:.8em;}
.fs-s{font-size:.9em;}
.fs-l{font-size:1.2em;}
.fs-xl{font-size:1.4em;}
.fs-xxl{font-size:1.6em;}

/* align */
.tAlignL{text-align:left;}
.tAlignC{text-align:center;}
.tAlignR{text-align:right;}

/* note */
.note01{display:block;padding-left:1em;text-indent:-1em;}/*※*/
.note02{display:block;padding-left:1.6em;text-indent:-1.6em;}/*（1）［1］*/
.note03{display:block;padding-left:0.5em;text-indent:-0.5em;}/*・*/
.note04{display:block;padding-left:1.3em;text-indent:-1.3em;}/*1．1）*/

/* text */
.nowrap{text-wrap:suppress;}
.tx-red{color: #D90003;}
.tx-blue{color: #2A2BA8;}

/* text link */
main p a{
	color: #3370C4;
}
main p a:hover{
	text-decoration: underline;
}
main a.tx-link{
	color: #3370C4;
	padding-left: 15px;
	position: relative;
}
main a.tx-link:hover{
	text-decoration: underline;
}
main a.tx-link::before{
	content: '';
	position: absolute;
	left: 0;
	top: calc(50% - 2px);
	width: 0;
	height: 0;
	border: 4px solid;
	border-color:#3370C4 #3370C4 transparent transparent;
	transform: rotate(45deg);
}

/* button */
a.btn-arr{
	display: inline-block;
	padding: 10px 40px 10px 25px;
	margin: 15px 0 0;
	color: #FFF;
	background-color: var(--main-color);
	position: relative;
	line-height: 1;
	border-radius: 100vh;
}
a.btn-arr:hover{
	background-color: var(--sub-color);
}
a.btn-arr::after{
	content:'';
	position: absolute;
	right: 15px;
	top: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border: 1px solid;
	border-color: #FFF #FFF transparent transparent;
	transform: rotate(45deg);
}
a.btn-blk{
	display: inline-block;
	padding: 10px 40px 10px 25px;
	margin: 15px 0 0;
	color: #FFF;
	background-color: var(--main-color);
	position: relative;
	line-height: 1;
	border-radius: 100vh;
}
a.btn-blk:hover{
	background-color: var(--sub-color);
}
a.btn-blk img.blk-icon{
	position: absolute;
	right: 15px;
	top: calc(50% - 6px);
	width: 12px;
	height: 12px;
}

/* list style */
ul.li-disc li{
	list-style: none;
	position: relative;
	padding-left: 15px;
	margin-top: 10px;
}
ul.li-disc li::before{
	content: '';
	width: 0;
	height: 0;
	border: 4px solid var(--main-color);
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: calc(50% - 2px);
}
ul.li-flow li{
	margin-top: 10px;
	position: relative;
	text-align: center;
	width: 100%;
	max-width: 640px;
}
ul.li-flow li img{
	max-width: 100%;
}
ul.li-flow li:nth-child(n+2){
	margin-top: 60px;
}
ul.li-flow li:nth-child(n+2)::before{
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: calc(50% - 22px);
	top: -60px;
	border: 20px solid;
	border-color: transparent var(--main-color) var(--main-color) transparent;
	transform: rotate(45deg);
}
.li-middle{
	list-style-type: disc;
	padding-left:1em;
	margin-left: 1.4em;
}

/*----------------------------------------------------------------------------
	04:module template
----------------------------------------------------------------------------*/
body{
	background-color:#f4f4f4;
	/*overflow-x: hidden;*/
	position: relative;
	width: 100%;
}
body.ov-hide main{
	overflow-y: hidden;
}
@media screen and (max-width: 767px){
	.is-pc{display:none;}
	.is-sp{display:block;}
}
@media print {
    body {
        zoom: 0.68;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* header
----------------------------------------------------------------------------*/
header{
	position: relative;
	background-color: #FFF;
}
header .hd-logo{
	position: absolute;
	width: 160px;
	left: 15px;
	top: 15px;
}
header .hd-logo img{
	width: 100%;
}
header h1{
	width: 100%;
	padding: 30px;
	font-size: 2.6em;
	/*background: #fff url("../images/cmn.gif") left 15px top 15px no-repeat;*/
	/*background-size: 160px;*/
	box-sizing: border-box;
	line-height: 0.6;
	text-align: center;
}
header h1 span{
	font-size: 1rem;
}
header h1 a{
	color: #000;
}
.hd-nav{
	position: fixed;
	width: 100%;
	/*height: 100vh;*/
	background-color: #FFF;
	top: -100%;
	padding: 100px;
	box-sizing: border-box;
	z-index: 101;
	transition: .5s;
	display: none;
	overflow: auto;
	min-height: 100%;
}
.hd-nav.active{
	top: 0;
	display: block;
	animation: navigation .5s ease forwards;
}
@keyframes navigation{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.hd-nav a{
	color: #000;
}
.hd-nav a:hover{
	color:  var(--main-color);
}
@media screen and (max-width: 767px){
	header{
		overflow-x: hidden;
		width: 100%;
	}
	header .hd-logo{
		width: 20%;
		left: 10px;
		top: 10px;
	}
	header h1{
		width: 100%;
		padding: 10px;
		font-size: 1.2em;
		/*background: #fff url("../images/cmn.gif") left 10px top 10px no-repeat;
		background-size: 20%;*/
		line-height: 0.8;
	}
	header h1 span{
		font-size: 0.7rem;
	}
	.hd-nav{
		padding: 100px 30px 30px;
		top:0;
		left:100%;
	}
	.hd-nav.active{
		top:0;
		left:0;
	}
}

.hd-nav_ttl{
	width: 100%;
	font-weight: bold;
	font-size: 1.8em;
	text-align: center;
	margin-bottom: 50px;
}
.hd-nav_back{
	display: inline-block;
	padding: 5px 10px 5px 30px;
	margin-bottom: 30px;
	border: 1px solid #CCC;
	background: url("../images/icon-back.svg") left 5px top 8px no-repeat;
	background-size: 20px;
}
.hd-nav a.hd-nav_back:hover{
	color: #000;
	background-color: #DDD;
}
.hd-nav_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 960px;
}
.hd-nav_list>li{
	margin: 0 0 30px 0;
	width: calc(50% - 25px);
	text-align: left;
}
.hd-nav_list>li:first-child{
	margin-right: 50px;
}
.hd-nav_list h2{
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
	text-align: center;
	border-bottom: 1px solid #999;
}
.hd-nav_list .target li{
	margin-bottom: 5px;
}
.hd-nav_list .target li a{
	padding: 5px 0 5px 20px;
	display: block;
	position: relative;
}
.hd-nav_list .target li a::before{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	left: -5px;
	top: 12px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	transform: rotate(-45deg);
}
.hd-nav_list .target li a:hover::before{
	border-right: 1px solid var(--main-color);
	border-bottom: 1px solid var(--main-color);
}
@media screen and (max-width: 767px){
	.hd-nav_ttl{
		margin-bottom: 30px;
	}
	.hd-nav_list>li:first-child{
		margin-right: 0;
	}
	.hd-nav_list .trigger{
		position: relative;
	}
	.hd-nav_list .trigger::before{
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		right: 10px;
		top: 6px;
		border-right: 1px solid #999;
		border-bottom: 1px solid #999;
		transform: rotate(45deg);
		transition: .3s;
	}
	.hd-nav_list .trigger.active::before{
		top: 12px;
		transform: rotate(-135deg);
		transition: .3s;
	}
	.hd-nav_ttl{
		font-size: 1.4em;
	}
	.hd-nav_list>li{
		width: 100%;
	}
}
/* hamburger */
.btn_hamburger {
	margin: 0 0 2em !important;
	width: 60px;
	padding: 20px 7px;
	position: fixed;
	right: 10px;
	top: 10px;
	z-index: 102;
}
.btn_hamburger button {
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
	width: 60px;
	height: 60px;
    transition: all .4s;
	border: none;
	background-color: #FFF;
}
.btn_hamburger span {
	position: absolute;
	display: inline-block;
	right: 15%;
	width: 70%;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
    transition: all .4s;
}
.btn_hamburger span:nth-of-type(1) {
	top: 10px;
}
.btn_hamburger span:nth-of-type(2) {
	top: 29px;
}
.btn_hamburger span:nth-of-type(3) {
	bottom: 10px;
}
.btn_hamburger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
    transition: all .4s;
}
.btn_hamburger .active span:nth-of-type(2) {
    transform: rotate(-45deg);
}
.btn_hamburger .active span:nth-of-type(2)::after {
    transform: rotate(90deg);
}
.btn_hamburger .active span:nth-of-type(1) {
    transform: translateY(20px) scale(0);
}
.btn_hamburger .active span:nth-of-type(3) {
    transform: translateY(-20px) scale(0);
}

@media screen and (max-width: 767px){
	.btn_hamburger {
		width: 40px;
		height: 40px;
		padding: 0;
		right: 5px;
		top: 5px;
		z-index: 102;
		background-color: #FFF;
	}
	.btn_hamburger button {
		width: 40px;
		height: 40px;
	}
	.btn_hamburger span:nth-of-type(2) {
		top: 19px;
	}
}
/* breadcrumbs
----------------------------------------------------------------------------*/
.breadcrumbs{
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 15px;
	display: flex;
}
.breadcrumbs li{
	padding: 0 0 0 1em;
	font-size: 0.9em;
	list-style: none;
	white-space: nowrap;
}
.breadcrumbs li a{
	color: #333;
}
.breadcrumbs li:nth-child(n+2)::before{
	content: '＞　';
}
@media screen and (max-width: 767px){
	.breadcrumbs{
		overflow-x: scroll;
	}
	.breadcrumbs li{
		font-size: 0.76em;
	}
}
/* footer
----------------------------------------------------------------------------*/
footer{
	width: 100%;
	padding: 100px 0;
	background-color: #472B2C;
	text-align: center;
	margin: 100px 0 0;
}
footer p{
	color: #999;
	font-size: 0.8rem;
	margin: 0;
	padding: 0;
}
footer #pageTop{
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #472B2C;
	width: 50px;
	height: 50px;
	cursor: pointer;
	border: none;
}
footer #pageTop::before{
	content: '';
	position: absolute;
	left: 18px;
	bottom: 11px;
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-color: #FFF transparent transparent #FFF;
	transform: rotate(45deg);
}
@media screen and (max-width: 767px){
	footer{
		padding: 30px 0;
	}
	footer #pageTop{
		right: 0;
	}
}
/*----------------------------------------------------------------------------
	05:content style
----------------------------------------------------------------------------*/
/* main content
----------------------------------------------------------------------------*/
main h1.h-std{
	font-size: 2.6em;
	text-align: center;
	margin: 80px auto 10px;
	position: relative;
}
main h1.h-std span{
	font-size: 1.2rem;
}
main h1.h-std::before,main h1::after{
	content: '';
	width: 25px;
	height: 1px;
	position: absolute;
	bottom: -12px;
}
main h1.h-std::before{
	left: calc(50% - 25px);
	border-bottom: 6px solid var(--main-color);
}
main h1.h-std::after{
	left: 50%;
	border-bottom: 6px solid #999;
}
main h2.h-std{
	font-size: 2em;
	text-align: left;
	margin: 80px auto 0;
	padding: 0 0 10px;
	border-bottom: 2px solid #999;
	position: relative;
}
main h2.h-std::before{
	content: '';
	width: 30%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: -2px;
	border-bottom: 2px solid var(--main-color);
}
main h3.h-std{
	font-size: 1.4em;
	text-align: left;
	margin: 80px auto 0;
	position: relative;
	padding-left: 30px;
}
main h3.h-std::before,main h3.h-std::after{
	content: '';
	width: 10px;
	height: 1px;
	position: absolute;
	top: calc(50% - 2px);
}
main h3.h-std::before{
	left: 0;
	border-bottom: 4px solid var(--main-color);
}
main h3.h-std::after{
	left: 10px;
	border-bottom: 4px solid #999;
}
main h3.step{
	font-size: 1.2em;
	line-height: 1.2;
	padding:0 0 12px 60px;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3em;
}
main h3.step::before{
	position: absolute;
	content: 'STEP';
	font-size: 0.6em;
	color: #FFF;
	width: 50px;
	height: 50px;
	padding-top: 5px;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: var(--main-color);
	text-align: center;
}
main h3.step.point::before{
	content: 'POINT';
}
main h3.step::after{
	display: none;
}
main h3.step span{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	width: 50px;
	height: 50px;
	letter-spacing: 0;
	text-align: center;
	padding: 13px 0 0;
	color: #FFF;
}
main h4.h-std{
	font-size: 1.2em;
	text-align: left;
	margin: 50px auto 0;
	position: relative;
	padding-left: 18px;
}
main h4.h-std::before{
	content: '';
	width: 10px;
	height: 10px;
	position: absolute;
	top: calc(50% - 4px);
	left: 0;
	border: 5px solid;
	border-color: var(--main-color) #999 #999 var(--main-color);
}
@media screen and (max-width: 767px){
	main h1.h-std{
		font-size: 1.6em;
		margin: 50px auto;
	}
	main h2.h-std{
		font-size: 1.3em;
		margin: 40px auto 0;
	}
	main h3.h-std{
		font-size: 1.15em;
		margin: 30px auto 0;
	}
	main h3.step{
		font-size: 1.1em;
		line-height: 1.2;
		padding:0px 0 5px 60px;
		position: relative;
		min-height: 3em;
		display: flex;
		align-items:center;
	}
	main h4.h-std{
		font-size: 1em;
		margin: 20px auto 0;
	}
}
main p{
	text-align: left;
	line-height: 1.8;
}
.main-wrap{
	width: 100%;
	max-width: 1280px;
	padding:0 30px;
	margin: 0 auto;
}
section.main-wrap:nth-child(n+2){
	margin-top: 200px;
}
@media screen and (max-width: 767px){
	.main-wrap{
		width: 100%;
		padding: 0 15px;
		margin: 0 auto;
	}
	section.main-wrap:nth-child(n+2){
		margin-top: 80px;
	}
}
/* flex-box */
.flex-2-1{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
}
.flex-2-1>div,.flex-2-1>figure{
	width: calc(50% - 25px);
}
.flex-2-1>figure{
	margin: 15px 0;
}
.flex-2-1>figure img{
	width: 100%;
}
@media screen and (max-width: 767px){
	.flex-2-1>div,.flex-2-1>figure{
		width: 100%;
	}
}

/* accordion std */
dl.ac-std{
	margin: 30px 0 0;
	border-bottom: 1px solid #CCC;
}
dl.ac-std dt{
	padding: 20px 40px 20px 20px;
	cursor: pointer;
	position: relative;
	border-top: 1px solid #CCC;
	font-weight: bold;
	background-color: #FCFCFC;
	transition: .5s;
}
dl.ac-std dt:hover,dl.ac-std dt.active{
	background-color: #FBEBAA;
}
dl.ac-std dt::after{
	content: '';
	position: absolute;
	right: 20px;
	top: calc(50% - 10px);
	width: 12px;
	height: 12px;
	border: 1px solid;
	border-color: transparent #000 #000 transparent;
	transform: rotate(45deg);
	transition: .5s;
}
dl.ac-std dt.active::after{
	transform: rotate(-135deg);
	top: calc(50% - 5px);
}
dl.ac-std dd{
	padding: 20px;
	background-color: #FFF;
	position: relative;
	border-top: 1px dotted #DDD;
	display: none;
}

/* q and a */
dl.ac-qa{
	margin: 80px 0 0;
	border-bottom: 1px solid #CCC;
}
dl.ac-qa dt{
	padding: 0;
	position: relative;
	border-top: 1px solid #CCC;
	background-color: #FCFCFC;
	transition: .5s;
}
dl.ac-qa dt button{
	padding: 22px 40px 18px 50px;
	font-weight: bold;
	width: 100%;
	border: none;
	background-color: transparent;
	text-align: left;
	font-size: 1.2em;
	cursor: pointer;
	line-height: 1.2;
	color: #000;
}
dl.ac-qa dt::before{
	content: 'Q';
	position: absolute;
	font-size: 2em;
	color: var(--main-color);
	left: 10px;
	top: 5px;
	font-weight: bold;
}
dl.ac-qa dt:hover,dl.ac-qa dt.active{
	background-color: #F3D9D9;
}
dl.ac-qa dt::after{
	content: '';
	position: absolute;
	right: 20px;
	top: calc(50% - 10px);
	width: 12px;
	height: 12px;
	border: 1px solid;
	border-color: transparent #000 #000 transparent;
	transform: rotate(45deg);
	transition: .5s;
}
dl.ac-qa dt.active::after{
	transform: rotate(-135deg);
	top: calc(50% - 5px);
}
dl.ac-qa dd{
	padding: 30px 20px 30px 50px;
	background-color: #FCEFEF;
	position: relative;
	border-top: 1px dotted #DDD;
	display: none;
}
dl.ac-qa dd::before{
	content: 'A';
	position: absolute;
	font-size: 2.3em;
	color: #66A33B;
	left: 10px;
	top: 15px;
	font-weight: bold;
}
@media screen and (max-width: 767px){
	dl.ac-qa{
		margin-top: 30px;
	}
	dl.ac-qa dt button{
		font-size: 1em;
	}
	dl.ac-qa dd{
		font-size: 0.86em;
	}
}

/* --------------------------------------------------
  Top page
----------------------------------------------------- */
.top-bg{
	background: url("../../images/main-bg.jpg") center center no-repeat;
	background-size: cover;
	padding: 100px 15px 30px;
}
.top-mv{
	display: flex;
	flex-wrap: wrap;
	max-width: 1180px;
	margin: 0 auto;
}
.top-mv>div{
	width: 65%;
}
.top-mv>figure{
	width: 35%;
	padding: 0;
	margin: 0;
}
.top-mv>figure img{
	width: 100%;
}
.top-mv p{
	margin-bottom: 30px;
}
.top-ttl-sub{
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 50px;
}
.top-ttl-main{
	font-weight: bold;
	font-size: 2.8em;
	margin-bottom: 50px;
}
.top-ttl-main span{
	color: var(--main-color);
}
.top-mv ul{
	display: flex;
}
.top-mv ul li{
	width: calc(40% - 15px);
}
.top-mv ul li:nth-child(2n-1){
	margin-right: 30px;
}
.top-mv ul li a{
	display: block;
	text-align: center;
	padding: 15px 0;
}
.top-mv ul li:nth-child(2n) a{
	background-color: #66A33B;
}
.top-mv ul li:nth-child(2n) a:hover{
	background-color: var(--sub-color);
}
.top-mv ul li a span{
	font-size: 2em;
	line-height: 1.2;
	font-weight: bold;
}
@media screen and (max-width: 767px){
	.top-bg{
		padding: 30px 0 0;
	}
	.top-mv{
		position: relative;
		padding: 30px 15px;
	}
	.top-mv>div{
		width: 100%;
	}
	.top-mv>figure{
		position: absolute;
		width: 46%;
		right: 0;
		top: 100px;
	}
	.top-ttl-sub{
		font-size: 1em;
		margin-bottom: 20px;
	}
	.top-ttl-main{
		font-size: 2.2em;
		margin-bottom: 20px;
	}
	.top-mv p{
		font-size: 0.8em;
	}
	.top-mv ul li{
		width: calc(50% - 10px);
	}
	.top-mv ul li:nth-child(2n-1){
		margin-right: 20px;
	}
	.top-mv ul li a{
		font-size: 0.8em;
	}
	.top-mv ul li a span{
		font-size: 1.6em;
	}
}

.point-list{
	margin-top: 100px;
	display: flex;
	flex-wrap: wrap;
}
.point-list li{
	width: calc(50% - 25px);
	margin:0 50px 50px 0;
	display: flex;
	flex-wrap: wrap;
}
.point-list li:nth-child(2n){
	margin-right: 0;
}
.point-list li div{
	width: calc(70% - 50px);
	margin-right: 50px;
}
.point-list li figure{
	width: 30%;
	padding: 0;
	margin: 0;
}
.point-list li figure img{
	width: 100%;
	border-radius: 20px 20px 0 0;
	border: 3px solid #666;
	margin: 0;
}
@media screen and (max-width: 767px){
	.point-list{
		margin-top: 50px;
	}
	.point-list li{
		width: 100%;
		margin:0 0 45px 0;
	}
	.point-list li div{
		width: 100%;
		margin-right: 0;
	}
	.point-list li figure{
		width: 100%;
		padding: 30px;
	}
}
/* top nav */
.top-nav{
	/*background: #FFF;*/
	padding: 100px 0;
}
.top-nav_list{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.top-nav_list>li{
	width: calc(50% - 25px);
}
.top-nav_list>li:first-child{
	margin-right: 50px;
}
.top-nav_list>li h2{
	text-align: center;
	font-size: 1.4em;
	padding-bottom: 15px;
	border-bottom: 1px solid #CCC;
}

.top-nav_list>li ul li{
	border-bottom: 1px solid #CCC;
}
.top-nav_list>li ul li a{
	display: block;
	padding: 15px 15px 15px 30px;
	margin: 0;
	position: relative;
	color: #000;
}
.top-nav_list>li ul li a:hover{
	background-color: #F3D9D9;
}
.top-nav_list>li ul li a::before{
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-color:#CCC #CCC transparent transparent;
	transform: rotate(45deg);
	left: 0;
	top: calc(50% - 7px);
}
@media screen and (max-width: 767px){
	.top-nav_list{
		padding: 0 15px;
		box-sizing: border-box;
	}
	.top-nav_list>li{
		width: 100%;
	}
	.top-nav_list>li:first-child{
		margin-right: 0;
		margin-bottom: 50px;
	}
}
/* app download */
.app-wrap{
	background-color: #FFF;
	margin: 100px 0;
	padding: 5px 30px 100px 30px;
}
.app-box{
	max-width: 1280px;
	margin: 0 auto;
}
.app{
	display: flex;
	width: 100%;
	max-width: 900px;
	margin: 50px auto 0;
	align-items:center;
	flex-wrap: wrap;
}
.app figure{
	width: 30%;
	text-align: center;
	margin: 0;
	padding: 0 30px 0 0;
}
.app figure figcaption{
	text-align: center;
	font-weight: bold;
}
.app figure img{
	margin: 0 auto;
}
.app>div{
	width: 70%;
}
.app>ul{
	width: 100%;
}
.app-sc{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 900px;
	margin: 50px auto 0;
}
.app-sc figure{
	width: 30%;
	margin: 0;
	padding: 0 30px 0 0;
}
.app-sc figure img{
	width: 100%;
	border-radius: 20px 20px 0 0;
	border: 3px solid #666;
}
.app-sc>div{
	width: 70%;
}
.app-dl{
	width: 100%;
	max-width: 900px;
	margin: 50px auto 0;
}
.app-dl-ttl{
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 1.6em;
	margin-bottom: 20px;
}
.app-dl-ttl::before{
	content: '＼';
}
.app-dl-ttl::after{
	content: '／';
}
.app-dl ul.app-icon{
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	justify-content: center;
	margin-bottom: 30px;
}
.app-dl ul.app-icon li{
	width: 232px;
}
.app-dl ul.fs-xs{
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
	.app{
		width: 100%;
		padding: 0 15px;
		margin: 0;
	}
	.app figure,.app>div{
		width: 100%;
		margin-top: 50px;
		padding: 0;
	}
	.app div ul.app-icon li{
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
	.app div ul.fs-xs{
		width: 100%;
	}
	.app-dl-ttl{
		font-size: 1.2em;
	}
	.app-sc figure{
		margin-bottom: 30px;
	}
	.app-sc figure,.app-sc>div{
		width: 100%;
		padding: 0;
	}
}

/* --------------------------------------------------
  Guidance page
----------------------------------------------------- */
ul.guide-flow,div.w-wrap,div.g-wrap{
	width: 100%;
	max-width: 1280px;
	margin: 50px auto 0;
}
ul.guide-flow>li,div.w-wrap{
	margin-top: 30px;
	position: relative;
	padding: 30px;
	background-color: #FFF;
}
div.g-wrap{
	margin-top: 50px;
	padding: 30px;
}
ul.guide-flow>li:nth-child(n+2){
	margin-top: 120px;
}
ul.guide-flow>li:nth-child(n+2)::before{
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: calc(50% - 22px);
	top: -90px;
	border: 20px solid;
	border-color: transparent var(--main-color) var(--main-color) transparent;
	transform: rotate(45deg);
}
ul.guide-flow>li p{
	margin-bottom: 40px;
}
ul.guide-flow>li div{
	display: flex;
	flex-wrap: wrap;
}
ul.guide-flow>li div figure{
	width: calc(25% - 30px);
	margin:0 40px 0 0;
	padding: 0;
	position: relative;
}
ul.guide-flow>li div figure:nth-child(4n){
	margin-right: 0;
}
ul.guide-flow>li div figure img{
	width: 100%;
	border-radius: 15px;
	border:3px solid #666;
}
ul.guide-flow>li div figure.flow-arrow::before{
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: -35px;
	top: 180px;
	border: 10px solid;
	border-color: transparent var(--main-color) var(--main-color) transparent;
	transform: rotate(-45deg);
}
ul.guide-flow>li h3.h-std,div.w-wrap h3.h-std{
	margin-top: 0;
	margin-bottom: 20px;
}
ul.guide-flow>li h4.h-std,div.w-wrap h4.h-std{
	margin-top: 0;
	margin-bottom: 20px;
}
ul.guide-flow>li h4.h-std span,div.w-wrap h4.h-std span{
	font-size: 0.8em;
	font-weight: normal;
}
div.guide-notes{
	width: 100%;
	max-width: 1280px;
	margin: 25px auto 0;
	padding-top: 25px;
	border-top: 1px solid #DDD;
}
ul.guide-flow div.guide-notes p{
	margin-bottom: 0;
}
@media screen and (max-width: 767px){
	ul.guide-flow li{
		flex-wrap: wrap;
	}
	ul.guide-flow li figure,ul.guide-flow li>div{
		width: 100%;
		margin: 30px 0 0;
		padding: 0 15%;
	}
	ul.guide-flow li>div>figure{
		width: 100%;
		margin-right: 0;
	}
	ul.guide-flow li>div figure:nth-child(n+2){
		margin-top: 50px;
	}
	ul.guide-flow li div figure.flow-arrow::before{
		left: calc(50% - 14px);
		top: -40px;
		border: 10px solid;
		border-color: transparent var(--main-color) var(--main-color) transparent;
		transform: rotate(45deg);
	}
	ul.guide-flow li p{
		width: 100%;
	}
}



/* --------------------------------------------------
  Q and A page
----------------------------------------------------- */
.qanda ol{
	padding-left: 2em;
}
.qanda ul{
	padding-left: 1em;
}
.qanda ul li{
	list-style: disc;
	margin-bottom: 1em;
}
.code-table{
	border-top:1px solid #CCC;
	border-left:1px solid #CCC;
	width: 100%;
	max-width: 640px;
}
.code-table th,.code-table td{
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	padding: 10px;
	
}
.code-table th{
	background-color: #F79C9E;
}
.code-table td{
	background-color: #FFF;
}
@media screen and (max-width: 767px){
	.code-table th,.code-table td{
		padding: 10px 5px;
		font-size: 0.8em;
	}
}

main.qanda h3.h-std{
	font-size: 1.2em;
	margin: 20px auto 10px;
}

main.qanda h4.h-std{
	font-size: 1em;
	margin: 20px auto  10px;
}
/* ----- Contact ------------------------------------- */
.contact-table{
	border-top:1px solid #CCC;
	width: 100%;
	max-width: 800px;
	margin-top: 30px;
}
.contact-table th,.contact-table td{
	text-align: left;
	border-bottom:1px solid #CCC;
	padding: 10px;
	background-color: #FEFEFE;
}
.contact-table tr:nth-child(2n) th,.contact-table tr:nth-child(2n) td{
	background-color: #F9EEEE;
}
.contact-table td:nth-child(3){
	font-weight: bold;
	font-size: 1.2em;
}
@media screen and (max-width: 767px){
	.contact-table th,.contact-table td{
		display: block;
		width: 100%;
		border-bottom: none;
		text-align: center;
	}
	.contact-table td{
		padding-top: 0;
	}
	.contact-table td:nth-child(3){
		border-bottom:1px solid #CCC;
		font-size: 1.6em;
	}
}

/* --------------------------------------------------
Q&A table
----------------------------------------------------- */
#sp_QABox table{
	margin-bottom: 15px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	word-break : break-all;
	padding-right: 1em;
}
#sp_QABox td:not([class="td1"]),#sp_QABox th{
	vertical-align: top;
	height:2em;
	padding-top: 1em;
	padding-right: auto;
	padding-bottom: 1em;
	padding-left: auto;
	border-width: 1px;
	border-style: solid;
	border-color: #CCC;
	word-break : break-all;
	background-color: #FFF;
}
#sp_QABox tr:nth-child(1) th{
	width: 27%;
}
#sp_QABox tr:nth-child(1) td.a{
	width: 12%;
}
#sp_QABox .tategaki{
	margin-right: auto;
	margin-left: auto;
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	white-space: nowrap;
	-webkit-text-orientation: upright;
	text-orientation : upright ;
	word-break : break-all;
}
#sp_QABox td.td1{
	border-style:none;
	display:table-cell;
	vertical-align:middle;
}
#sp_QABox tr td.bg-yellow{
	background-color: #FCE544;
}
#sp_QABox tr td.bg-green{
	background-color: #79CC79;;
}
#sp_QABox tr td.bg-blue{
	background-color: #81B1DE;;
}