@charset "UTF-8";

/* スマホ 分岐
-------------------------------------------------*/

/* PCサイズ */

.pc{display: none;}
.sp{display: block;}
.tabBox{display: none;}
.spBox{display: block;}

.width100sp,
.width100spmax{
	width: auto;
	}

.brno{
	display: block;
	}

.spbrno{
	display:block;
	}

.spon{
	display: block;
	}

.spoff{
		/* spときはdisplay:none */
}

/* キャッチコピーテキスト
-------------------------------------------------*/
.catchCOPY{
	color: #0086d1;
    text-align: center;
	font-size: 160%;
	line-height: 180%;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.subcatchCOPY{
    text-align: center;
    font-size: 120%;
    line-height: 180%;
    font-family: 'Noto Sans Japanese', sans-serif;
}

/* メインビジュアル
-------------------------------------------------*/

#mv{
    width: 100%;
    margin: 0 auto;
    background: none;	
}

#mv > div {
	width: 100%;
	margin: auto;
}

/* 基本ボックス
-------------------------------------------------*/
.pageBox,
#header{
	width: 100%;
	margin: auto;
}

.pageBox10{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}



/*　ヘッダー部分
-------------------------------------------------*/
header{
	border-top: 3px solid #0086d1;
	width: 100%;
	background: #FFF;
	padding: 0.5em;
}


header h1{
	display: none;
	font-size: 10px;
	line-height: 240%;
	font-weight: 700;
}

#header{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#header > div{
	width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
	/*border: 1px solid #F00;*/
}

header img {
	height: 60px;
}

/* ヘッダー部分中央部 */
#headerC{
	display: none;
}

/* ヘッダー部分中央部分のリストタグ */
#headerC ul {
	width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
}

#headerC li{
		width: 80%;
}

#headerC li > a{
	width: 100%;
	font-weight: 700;
	padding: 10px;
	margin: 1%;
	line-height: 180%;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: right center;
	background-repeat: no-repeat;
	border-radius: 5px;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #FFF;
}

#headerC li > a > i{
	font-size: 110%;
	margin: 0 5px 0 0;
}

#headerC li > a > span{
	font-size: 100%;
}

.toiawaseButton01{
	background: #ff7800;
}

.toiawaseButton02{
	background: #CC0000;
}

#headerMail:hover{
	background: #bbc001;
}



/* htag
-------------------------------------------------*/
#secondPage h3,
.htag3{
	font-size: 32px;
	font-family: 'Noto Sans Japanese', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5em 0 2.0em 0;
	/*font-family: 'Noto Serif JP', serif;
	text-align: center;
	color: #ff7e00;*/
}

#secondPage h3 > span,
h3.htag3 > span{
    display: inline-block;
	text-align: center;
	font-size: 1.5rem;
	line-height: 150%;
	margin: 0.5em 0;
	border-bottom: 7px solid #0086d1;
	padding-bottom: 0.1em;
}

.htag3zero{
	font-size: 1rem;
	font-family: 'Noto Sans Japanese', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5em 0 0 0;
	/*font-family: 'Noto Serif JP', serif;
	text-align: center;
	color: #ff7e00;*/
}

.htag3zero > span{
    display: inline-block;
	text-align: center;
	font-size: 1.5rem;
	line-height: 150%;
	margin: 0.5em 0;
	border-bottom: 7px solid #0086d1;
	padding-bottom: 0.1em;
}

.font240{
	text-align: center;
	font-size: 100%;
	line-height: 180%;
	font-family: 'Noto Sans Japanese', sans-serif;
}


/* halfBox(50%)
-------------------------------------------------*/

/* 複数共通のクラスで指定する場合はカンマで区切る*/
.halfBox,
.halfBoxsp,
.halfBoxL30,
.halfBoxR30{
	width: 100%;
	margin: auto;
}

.halfBox > div ,
.halfBoxsp > div{
	/* .halfBoxや.halfBoxspの入れ子になったDIVを指定する場合 */
	width: 100%;
	padding: 1em;
}

.halfBox > div > figure{
	width: 100%;
}

.halfBox > div > figure > img{
	width: 100%;
}


/* ntc-child(*)というのは順番を意味してます */
.halfBoxL30 div:nth-child(odd) {
	width: 100%;
	padding: 1em;
}


.halfBoxL30 div:nth-child(even){
	width: 100%;
	padding: 1em;
}


.halfBoxR30 div:nth-child(odd) {
	width: 100%;
	padding: 1em;
}

.halfBoxR30 div:nth-child(even) {
	width: 100%;
	padding: 1em;
}


.halfBoxL30 div:nth-child(odd) figure > img,
.halfBoxR30 div:nth-child(even) figure > img{
	width: 100%;
}


.halfBoxL30,
.halfBoxR30{
	margin-bottom: 1em;
}


.halfBox dt,
.halfBoxL30 dt,
.halfBoxR30 dt{
	text-align: center;
	font-size: 160%;
	line-height: 180%;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.halfBox dd,
.halfBoxL30 dd,
.halfBoxR30 dd{
	font-size: 100%;
	line-height: 180%;
}



/* firstcopy
-------------------------------------------------*/
#firstcopy{
	width: 100%;
	padding: 0;
	margin: auto;
}

#firstcopy > div{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}

/* merit
-------------------------------------------------*/
#merit{
	width: 100%;
	padding: 50px 0;
	margin: auto;
	background: #f6f6f6;
}

#merit > div{
	width: 100%;
}


/* license
-------------------------------------------------*/
#license{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}

#license > div{
	width: 100%;
	margin: auto;
}

/* price
-------------------------------------------------*/
#price{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}

#price > div{
	width: 100%;
	margin: auto;
}

#price > div.width640{
	width: 100%;
	margin: auto;
	margin-bottom: 20px;
}

#price > div > table {
	/* border-collapse: collapse; */
	margin: 3px auto;
}

#price > div > table > tbody > tr {
	background-color:#f2f2f2;
}

/* 奇数行 */
#price > div > table > tbody > tr:nth-child(odd) > td{
	background-color:#bce5ff;
}



/* voice
-------------------------------------------------*/
#voice{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}

/* faq
-------------------------------------------------*/
#faq{
	width: 100%;
	padding: 1em;
	background: #EEEEEE;
}

#faq > div{
	width: 100%;
	padding: 50px 0;
	margin: auto;
}

#faq dl{
	background: #FFF;
	width: 100%;
	margin: 1em 0;
	padding: 0;
}

#faq dl{
	font-size: 100%;
}
#faq dl dt{
	padding: 10px;
	color: #0377be;
	background: #bae5ff;
	font-weight: bold;
}

#faq dl dd{
	line-height: 240%;
	padding: 20px;
}


#faq dl dt::before {
    content: "Q:" ;
    margin-right: 10px;
}

#faq dl dd::before {
    content: "A:" ;
    color: #990000;
    margin-right: 10px;
}
/* orderFlow
-------------------------------------------------*/
#orderFlow{
	width: 100%;
	background: #EEEEEE;
}

#orderFlow > div{
	margin: auto;
}

#orderFlow dl{
	background: #FFF;
	width: 100%;
	margin: 1em 0;
	padding: 0;
}

#orderFlow dl{
	font-size: 100%;
}

#orderFlow dl dt{
	padding: 10px;
	color: #CC0000;
	background: #bae5ff;
	font-weight: bold;
}

#orderFlow dl dd{
	line-height: 240%;
	padding: 20px;
}

#orderFlow dl dt::before {
    content: "Q:" ;
    margin-right: 10px;
}

#orderFlow dl dd::before {
    content: "A:" ;
    color: #990000;
    margin-right: 10px;
}

/* orderArea
-------------------------------------------------*/

#orderArea{
	width: 100%;
	padding: 1em 1em;
	margin: auto;
}

#orderArea > div{
	width: 100%;
	padding: 1em 0;
	margin: auto;
	font-size: 100%;
	line-height: 180%;
	margin-bottom: 2em;
}

/*	フッター（ナビゲーション）
------------------------------------------------------*/
#payment{
	padding: 2em 0 0 0 ;
	font-family: sans-serif; /* 1 */
	font-size: 80%;
	line-height: 180%;
	color: #FFFFFF;
	background: #0086d1;
	margin: 1em 0 0 0 0;
}

@media screen and (min-width:801px) {
	#payment{
	    margin-top: 5em;
	}
	
	#payment > div {
			width: 100%;
			margin: auto;
		padding: 1em 0 0 0;
		/*background: #FFF;*/
		display: flex;
		flex-wrap: wrap;
	}

	#payment > div > div{
		width: 33.3333%;
		padding: 1em;
		/*background: #f5f4f2;*/
		text-align: left;
	}
}

@media screen and (max-width:800px) {
	#payment{
	    margin-top: 3em;
	    padding: 2em 1em;
	}
	
}

#payment dl{
	margin-bottom: 2em;
}


#payment > div > div > h2,
#payment dt{
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #DDDDDD;
	font-weight: bold;
	margin-bottom: 0.5em;
}

#payment ul{
	list-style: none;
	margin: 0 0 1em 0;
	padding: 0;
}

#payment ul li:before {
	content: '■'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-0em; /* 3文字分、左に寄せる */
}


#payment li{
	color: #FFF;
	margin: 0 0 0.5em 0;
}

#payment dd > p,
#payment dd > span,
#payment > div > div > p,
#payment > div > div > p:last-child{
    margin-bottom: 0.5em;
    line-height: 180%;
}


#payment dd,
#payment dd > ul > li{
	color: #FFF;
        line-height: 180%;
}