@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/

html {-webkit-text-size-adjust: 100%;/* 2 */-ms-text-size-adjust: 100%;}
* { font-family:'Noto Sans JP', sans-serif, "arial","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
body { width:100%; overflow-x:hidden; font-family: sans-serif ;}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0;	border:0; list-style:none; vertical-align:baseline; background:transparent; outline:none;}
body { line-height:1;}
img {border-style: none;} 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
@media screen and (max-width: 320px){html, body { min-width:320px;}}

/*===================
 LINK
=====================*/
a, a img, a *{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; transition:0.4s;}
a{ text-decoration: underline;}
a:hover, a:hover img { opacity:0.8; filter: alpha(opacity=90); text-decoration: none;}
@media screen and (max-width: 660px) {body, html { width:100%; overflow-x:hidden;}}
@media screen and (max-width: 480px) {body { background: #fff;}}
/*============================
selection
==============================*/
::selection { background: #efefef; color: #777;}
::-moz-selection { background: #efefef; color: #777;}
/*===================
 FONT
=====================*/
h1,h2,h3,h4,h5,h6 {line-height:1.6em; font-size:18px; font-weight: bold; color:#333;	letter-spacing:1px;}
p,li,dt,dl,span { font-size:16px; letter-spacing:1px; line-height:1.6em; color:#444;}
@media screen and (max-width: 640px) {
p,li,dt,dl,span { font-size:15px;}
}
@media screen and (max-width: 400px) {
h1,h2,h3,h4,h5,h6 {line-height:1.5em; font-size:16px;}
p,li,dt,dl,span { line-height:1.5em; font-size:14px;}
}
/*=====================================
 CONTENTS
=======================================*/
main, header, fotter, section { width:100%; display: block;}
.contMin{ margin:0 auto; overflow:hidden\9; *overflow:hidden;}
main{ position: relative; z-index: 1;}
img{ max-width: 100%; width: 100%; height: auto;}
/*------------------------------------------------------------
  header
==============================*/
header{ height: 80px; background: #f0f0f0;}
.kakunin header{ margin-bottom: 0;}
header .contMin{ width: 900px; text-align: right; position: relative; padding-top: 30px;}
header .contMin h1{ position: absolute; left:0; top: 25px;}
header .contMin h1 img{ width: 180px; height: auto;}
header .contMin ul{}
header .contMin ul li{ display: inline-block; padding: 0 10px; margin: 0 10px; font-size: 14px; line-height: 24px; padding-left: 30px; position: relative;}
header .contMin ul li.end{ color: #ccc;}
header .contMin ul li span{ display: inline-block; width: 20px; height: 20px; border-radius: 100%; background: #aaa; position: absolute; left: 0; top: 0;}
header .contMin ul li.now span{ background: #e56862;}
header .contMin ul li.end span{ background: #d5d5d5;}
header .contMin ul li.now span::before, 
header .contMin ul li.end span::before{ width: 26px; height: 26px; position:absolute; border-radius: 100%; border: solid 1px #ccc; left: -4px; top: -4px; content: "";}
header .contMin ul li.now span::before{ border: solid 1px #e56862;}
header .contMin ul li::after{ width: 20px; height: 1px; position: absolute; right: -18px; top: 50%; margin-top: -2px; content: ""; background: #d5d5d5;}
header .contMin ul li:last-child::after{ display: none;}
@media screen and (max-width: 1100px) {
header .contMin{ width: 94%; margin-top: 0 3%;}
}
@media screen and (max-width: 900px) {
header{ height: 70px;}
header .contMin{ padding-top: 20px;}
header .contMin h1{ top: 20px;}
header .contMin h1 img{ width: 150px;}
}
@media screen and (max-width: 700px) {
header .contMin ul li{ margin: 0 5px; font-size: 12px; padding-left: 25px;}
header .contMin ul li.now span::before, 
header .contMin ul li.end span::before{ width: 20px; height: 20px; left: -3px; top: -3px;}
header .contMin ul li span{ display: inline-block; width: 16px; height: 16px; top: 3px;}
header .contMin ul li::after{ width: 15px; right: -8px;}
}
@media screen and (max-width: 600px) {
header{ height: 50px;}
header .contMin{ padding-top: 10px;}
header .contMin h1{ top: 12px;}
header .contMin h1 img{ width: 100px;}
}
/*------------------------------------------------------------
  infoArea
==============================*/
.infoArea{}
.infoArea .contMin{ width: 900px;}
.infoArea .contMin .inner{ display: flex; padding:20px 7% 10px; flex-direction: row; align-items:center;}
.infoArea .contMin h2{ text-align: left; display: block; font-size: 20px; color: #777; font-weight: bold;}
.fin .infoArea .contMin{ text-align: center;}
.fin .infoArea .contMin h2{ width: auto; text-align: center; display: inline-block; margin: 0 auto; border:solid 3px #777; border-radius: 40px; padding: 10px 40px; font-size: 20px; color: #777; font-weight: bold;}

.infoArea .contMin dl{ width: 70%; margin: 20px 5% 20px 0; border: solid 1px #ddd; background: #f9f9f9; border-radius: 6px; padding: 10px; display: flex; flex-direction: row; align-items:center; box-sizing: border-box;}
.infoArea .contMin dl dt{ width: 120px; height: auto; padding-right: 30px; line-height: 1em;}
.infoArea .contMin dl dt img{ width: 100%; height: auto; border-radius: 3px;}
.infoArea .contMin dl dd{ display: block;}
.infoArea .contMin dl dd b{ display: block; font-size: 18px;}
.infoArea .contMin dl dd span{ font-size: 14px;}
.infoArea .contMin p.info{ display: block; padding: 0px 7% 40px; font-size: 15px; line-height: 1.8em;  color: #777;}
@media screen and (max-width: 1000px) {
.infoArea .contMin{ width: 90%; margin: 0 5%;}
}
@media screen and (max-width: 800px) {
.infoArea .contMin h2{ width: auto; padding: 0 20px 0 0; font-size: 18px;}
.infoArea .contMin .inner{ padding:30px 2% 10px;}
.infoArea .contMin p.info{ padding: 0px 2% 40px; font-size: 13px; line-height: 1.6em;}
.infoArea .contMin dl dd b{ font-size: 16px;}
.infoArea .contMin dl dd span{ font-size: 13px;}
}
@media screen and (max-width: 750px) {
.infoArea .contMin{ width: 90%; margin: 0 5%; }
.infoArea .contMin h2{ font-size: 18px;}
.infoArea .contMin dl{ margin: 10px 5% 10px 0;}
.infoArea .contMin dl dt{ width: 100px; padding-right: 20px;}
.infoArea .contMin dl dd b{ font-size: 13px; line-height: 1.2em;}
.infoArea .contMin dl dd span{ font-size: 11px; line-height: 1.2em;}
}
@media screen and (max-width: 600px) {
.infoArea .contMin h2{ width: auto; padding: 0; font-size: 22px;}
.infoArea .contMin .inner{ flex-direction: column; padding-top: 20px;}
.infoArea .contMin dl{ margin:15px 0; width: 100%; justify-content: center;}
.infoArea .contMin p.info{ padding: 0 0 40px;}
}
@media screen and (max-width: 500px) {
.infoArea .contMin p.info{ font-size: 12px;}
}
/*------------------------------------------------------------
  formArea
==============================*/
.formArea{ border-top: solid 14px #f5f5f5; padding-top: 10px;}
.kakunin .formArea{ border-top: none; padding-top: 0;}
.kakunin .formArea{ display: block;}
.formArea .contMin{ width: 900px;}
.formArea .contMin .inner{ width: 94%; margin: 0 3%; display: block;}
.formArea .contMin .inner * { box-sizing: border-box;}
.formArea .contMin .inner .button_box{ display: block; padding-top: 30px; min-height: 270px;}
.formArea .contMin .kakunin{ text-align: center; display: block; width: 94%; margin: 0 3% 20px; line-height: 1.4em; padding: 8px 0; background: #666; color: #fff; border-radius: 4px; box-sizing: border-box;}
.kakunin .formArea .contMin .inner .button_box{ display: flex; flex-direction: row-reverse; justify-content: space-between;}
@media screen and (max-width: 1000px) {
.formArea .contMin{ width: 94%; margin: 0 3%;}
}
@media screen and (max-width: 750px) {
.formArea .contMin .kakunin{ padding: 10px 20px; text-align: left; font-size: 14px;}
}
@media screen and (max-width: 700px) {
.kakunin .formArea .contMin .inner .button_box{ flex-direction: column;}
.kakunin .formArea .contMin .inner{ width: 100%; margin: 0;}
}
@media screen and (max-width: 500px) {
.formArea .contMin .kakunin{ padding: 6px 12px; text-align: left; font-size: 12px;}
}
/*------------------------------------------------------------
  footer
==============================*/
footer{ width: 100%; padding: 20px 0 60px; display: block; text-align: center;}
footer p{ text-align: center;}
footer p a{ display: inline-block; margin: 0 5px; font-size: 12px; color: #999; text-decoration: underline;}
footer p span{ color: #aaa; margin-left: 5px;}
footer img{ width: 150px; height: auto; margin: 40px auto 0;}
@media screen and (max-width: 900px) {
footer{ padding: 0 0 60px;}
footer img{ text-align: center;}
}
/*------------------------------------------------------------
  Common フォーム
==============================*/
/*///////////
 select
/////////////*/
 select {
	padding:0 10px;
    line-height: 30px;
    color: #555;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
    cursor: pointer;
}
@media screen and (max-width: 600px){
input, textarea, select{ font-size: 18px;}
}
/*///////////
 次へボタン
　submit
/////////////*/
.btnA{ width: 50%; margin: 20px 25% 150px; background: #cd4d4d; color: #fff; border-radius: 6px; line-height: 70px; box-shadow: 1px 4px 12px #aaa; font-size: 20px;  letter-spacing: 4px; border: none; cursor: pointer; transition:0.4s; -moz-transition:0.4s; box-sizing: border-box;}
.btnAA{ width: 60%; float: right; display: inline-block; margin: 20px 2% 150px; background: #cd4d4d; color: #fff; border-radius: 6px; line-height: 70px; box-shadow: 1px 4px 12px #aaa; font-size: 20px;  letter-spacing: 4px; border: none; cursor: pointer; transition:0.4s; -moz-transition:0.4s; box-sizing: border-box;}
.btnB{ width: 30%; float: left; display: inline-block; text-align: center; margin: 20px 2% 150px; text-decoration: none; background: #fff; color: #000; border: solid 1px #999; border-radius: 4px; line-height: 70px; box-shadow: none; font-size: 16px;  letter-spacing: 4px; cursor: pointer; transition:0.4s; -moz-transition:0.4s; box-sizing: border-box;}
.btnc{ width: 70%; display: inline-block; text-align: center; margin: 20px 2% 150px; text-decoration: none; background: #e56862; color: #fff; border-radius: 4px; line-height: 120px; box-shadow: 1px 4px 12px #aaa; font-size: 22px;  letter-spacing: 4px; cursor: pointer; transition:0.4s; -moz-transition:0.4s; font-weight: bold; border: solid 8px #e56862; box-sizing: border-box;}
.btnA:hover, 
.btnAA:hover{ box-shadow: 0 0 0 1px #cd4d4d; color: #cd4d4d; background: #fff; border-radius: 2px;}
.btnB:hover{ border: solid 1px #aaa; background: #eee;}
.btnc:hover{ color: #e56862; background: #fff; box-shadow:none;}
@media screen and (max-width: 700px) {
.btnA, 
.btnc{ width: 100%; margin: 20px 0% 60px; line-height: 60px; -webkit-appearance: none;}
.btnAA{ width: 90%;  margin: 20px 5% ; -webkit-appearance: none;}
.btnB{ width:40%; line-height: 40px; margin: 40px 5% 100px; border-radius: 1px; -webkit-appearance: none;}
.fin .btnc{ margin: 50px 0 !important;}
}
/*///////////
　input
/////////////*/
::placeholder { color:#999;}
#formTable > p > div{ display: none;}
#form > tbody > tr:nth-child(5) > td > div > div br{ display: none;}
/* text */
input[type="text"]{ width: 100%; min-width: 140px; line-height: 44px;  vertical-align:middle; outline: none; background: #eee; -webkit-transition: all .3s; transition: all .3s; border-radius:6px; padding: 0 5% 0 3%; font-size: 18px; color: #000; border: solid 1px #aaa;}
input[type="text"]:focus, 
textarea:focus{ box-shadow:0 0 0 1px #ccc; background: #fff; border-radius: 0px; color: #000; border: solid 1px #cc504a;}
/* textarea */
textarea { width: 100%; border: solid 1px #aaa; border-radius:4px; padding: 10px 5%; -webkit-transition: all .3s; transition: all .3s; outline: none; background: #eee; font-size: 18px;}
/* radio */
input[type="radio"] { width: 16pt; height: 16pt; vertical-align:middle;}
input[type="radio"] + label { cursor: pointer; padding: 0 20px 0 3px; border-radius : 5px; transition: .2s; line-height:28px; vertical-align:sub;}
input[type="radio"] + label + br{ display: none;}
input[type="radio"]:checked + label {}
input[type="radio"]:not(:checked) + label:hover { font-weight: bold;}
/*checkbox*/
input[type="checkbox"]{ display: none;}
input[type="checkbox"]+label{ cursor: pointer; display: inline-block; position: relative; padding-left: 30px; padding-right: 10px; margin: 10px 15px 10px 0;}
input[type="checkbox"]+label::before{ content: "";position: absolute; display: block; box-sizing: border-box; width: 20px; height: 20px; margin-top: -10px; left: 0; top: 50%; border: 1px solid #aaa; border-radius: 2px;}
input[type="checkbox"]:checked+label::before{ background: #efefef;}
input[type="checkbox"]:checked+label::after{ content: ""; position: absolute; display: block; box-sizing: border-box; width: 18px; height: 9px; margin-top: -9px; top: 50%; left: 3px; transform: rotate(-45deg); border-bottom: 3px solid #cc504a; border-left: 3px solid #cc504a;}
/**/
select{ padding: 5px 25px 5px 15px; margin: 5px; min-width: 50px; text-align: center; background: #eee; border:none; font-size: 18px;}
select:focus{ box-shadow:0 0 0 1px #ccc; background: #fff; border-radius: 0px; color: #000;}
@media screen and (max-width: 1000px) {
input[type="radio"] + label + br{ display: block;}
}
@media screen and (max-width: 700px) {
input[type="text"]{ line-height: 48px; font-size: 18px; }
textaream, 
input[type="radio"], 
select{ font-size: 18px;}
}

/*------------------------------------------------------------
  table レイアウト
==============================*/
/*-------------------
  table id="form"
--------------------*/
#form{ width: 100%; table-layout: fixed}
#form tbody tr{ border-bottom: dotted 1px #ccc;}
.kakunin #form{ border: solid 1px #999; padding: 10px;}
.kakunin #form tbody tr{ border-bottom: dotted 1px #eee;}
.kakunin #form tbody tr{ width: 100%; padding: 0 10%; display: block;}
#form tbody tr td{ padding: 20px 0 20px; position: relative; display: flex; flex-direction: row; flex-wrap: wrap;}
.kakunin #form tbody tr td{ padding: 10px 0 10px; line-height: 1.6em;}
#form tbody tr th{ width: 250px; height: 60px; vertical-align: middle; padding: 20px 0; margin-bottom: 20px; font-weight: normal; position: relative;}
.kakunin #form tbody tr th{ color: #999;}
#form tbody tr th span.red{ font-size: 0;}
#form tbody tr th span.red::after{ content: "必須"; background:#e56862; font-size: 14px; color: #fff; font-weight: bold; line-height: 28px; display: inline-block; padding: 0 5px; margin-left: 10px;}
.mailCap{ display: block; margin-top: 5px; font-size: 12px; color: #666;}

/*入力ページ　アドレス*/
.address td > div{ display: flex; flex-direction: row; align-content: flex-start; align-items: center; margin-bottom: 15px;}
.address td > div *{ display: block;}
.address td > div .tit{ display: inline-block; width: 160px;}
.address td > div .yuubin { width: 90px; margin: 0 10px;}
.address td > div .addBox { width: 70%;}
.address td > div .addBtn{ width: 300px; line-height: 30px; border: solid 2px #777; box-shadow: 0 0 0 3px #aaa; border-radius: 2px; text-align: center; margin-left: 160px; transition: 0.3s; cursor: pointer; margin-bottom: 10px;}
.address td > div .addBtn:hover{box-shadow: 0 0 0px #aaa; background: #eee;}

@media screen and (max-width: 700px) {
.address td > div .addBtn{ width: 70%; line-height: 40px; margin-left: 0%;}
.address td > div .tit{ font-size: 13px !important; letter-spacing: 0;}
.address td > div{ flex-wrap: wrap;}
.address td > div .tit{ width: 100%; display:block; margin: 0;}
#form > tbody > tr.address > td > div:nth-child(1) > input:nth-child(2), 
.formArea .contMin .inner select{ margin-left: 0;}
.address td > div .addBox{ width: 100%;}
}
/*確認ページ*/
#form.confirm tbody tr {border-bottom: dotted 1px #ccc;}
#form.confirm tbody tr td{ font-size: 18px; padding: 5px 0 15px; line-height: 1.4em;}
#form.confirm tbody tr th{ height: auto; padding: 20px 0 0; margin-bottom: 0; font-size: 14px;}
#form.confirm tbody tr th .cred{ margin-top: -12px;}
/**/
.cap{ width: 100%; float: left; margin-bottom: 25px; font-size: 12px; font-weight: normal;}
.pp{ width: 100%; text-align: center; font-size: 14px; padding: 4px 5%; margin:10px 0 15px;}
.bt_confirm{ margin: 30px auto; text-align: center;}
.bt_confirm input{ max-width: 400px; border-bottom: solid 10px #000; border-radius: 4px; -webkit-transition: all .3s; transition: all .3s;}
.bt_confirm input:hover{ border-bottom: solid 0px #000; margin-top: 10px;}
/*確認*/
.bt_confirm2{ display: block; float: left; padding: 30px 10%; margin-bottom: 100px; text-align: center;}
.bt_confirm2 > *{ display: inline-block;}
.bt_confirm2 a{ float: left; width: 20%; line-height: 80px; border-radius: 8px; border: solid 4px #000; text-align: center; color: #000; text-decoration: none; font-weight: bold;}
.bt_confirm2 a:hover{ background: #000; color: #fff;}
.bt_confirm2 input{ width:70%; float:right;}
.bt_confirm2 input:hover{ opacity: 0.7;}

@media screen and (max-width: 700px) {
.kakunin #form{ border: none;}
.kakunin #form tbody tr{ padding: 0 2%;}
	
#form tbody tr th{ width: 100%; display: block; padding: 0 0 0 5px; border-left: solid 5px #000;text-align: left; line-height: 1.2em; height: auto; margin: 20px 0 0px;}
#form tbody tr td{ width: 100%; display: block; padding: 15px 0 30px;}
.kakunin #form tbody tr td{ padding: 0px 0 30px;}
#form tbody tr:last-child { border-bottom: none;}
#form tbody tr th .cred{ position: absolute; top:0%; margin-top: -5px;}
#form > tbody > tr:nth-child(5) > th > span{ top: 40px;}
#form > tbody > tr:nth-child(5) > th br{ display: none;}
#form tbody tr td, 
#form tbody tr th, 
#form tbody tr td span{ font-size: 15px;}
.kakunin #form tbody tr td, 
.kakunin #form tbody tr th, 
.kakunin #form tbody tr td span{ font-size: 18px;}
.kakunin #form tbody tr th{ padding: 4px 10px;}
.kakunin #form tbody tr td{ padding: 5px 0 10px;}
/**/
#form.confirm tr {border-bottom: dotted 1px #ccc;}
#form.confirm tr td{ font-size: 15px; padding: 10px 20px; line-height: 1.4em;}
#form.confirm tr th{ height: auto; padding: 4px 1%; margin-bottom: 0; background: #f6f6f6;}
#form.confirm tr th .cred{ margin-top: 0px;}
/*確認*/
.bt_confirm2{ padding: 50px 0%;}
.bt_confirm2 a{ width: 20%; line-height: 80px;}
.bt_confirm2 input{ width:70%; float:right;}

}
@media screen and (max-width: 600px) {
.bt_confirm2 a{ width: 100%; line-height: 30px; margin-bottom: 40px; border:solid 2px #000;}
.bt_confirm2 input{ width:100%;}
}
@media screen and (max-width: 500px) {
.bt_confirm input{ max-width: 600px; width: 100%; height: auto; margin-bottom: 100px;}
}
/*------------------------
confirm
-----------------------*/
.fin .btnc{ margin: 50px;}
.fin .infoArea{ padding-top: 50px;}
.fin .contMin p{box-sizing:border-box;}
.fin .contMin p br{ display: block !important;}
.fin .contMin #fintxt{width: 90%; margin: 20px 5% 0; text-align: center; line-height: 1.8em; font-size: 22px; box-sizing: border-box;}
.fin .contMin #fintxt b{ display:inline-block; padding: 5px 30px; margin-bottom: 20px; border: solid 1px #000; border-radius: 50px;}
/**/
.fin .contMin #fininfo{ width: 70%; margin: 20px 15% 30px; padding: 20px 30px; font-size: 14px; background:#eee; border-radius: 20px; text-align: left;}
@media screen and (max-width: 700px) {
.fin .contMin #fintxt{ font-size: 18px;}
}
@media screen and (max-width: 600px) {
.fin .contMin #fintxt{ padding: 0 5%; font-size: 3.4vw; text-align: left;}
.fin .contMin #fintxt br{ display: none !important;}
.fin .contMin #fininfo{ width: 90%; margin: 10px 5% 30px; padding: 10px 20px; border-radius: 10px;}
}
/**/
@media screen and (min-width: 801px) {
.h_br{ display: none;}
}
@media screen and (max-width: 800px) {
#form > tbody > tr:nth-child(3) > td{ line-height: 40px;}
}
.table tr th{ text-align: left; width: 20%;}
input[type="submit"] {
-webkit-appearance: none;
}
.red_txt { width: 100%; float: left;}
.red_txt ul{ width: 100%; float: left; padding: 10px 0 10px 26%; margin:0 0 30px; border: solid 3px #d06550;  border-radius: 10px;}
.red_txt br{ display: none;}
.red_txt ul li{ font-size: 14px; color: #d06550;}
@media screen and (max-width: 700px) {
.red_txt ul{ padding: 10px 5%; margin: 0 2% 30px; width: 96%; float: left;}
.red_txt ul li{ font-size: 12px;}
}