/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


/* 
v1.0 | 20180620
*/

/********* base *********/
html{font-size: 62.5%; /* sets the base font to 10px for easier math */}

body{
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color: #000;
	font-size: 16rem;
	font-size: 16px;/*ie*/
	line-height: 1.8;
	letter-spacing: 0.1em;}

a{text-decoration: none;
    color: #0277bd;}

img {
	max-width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: bottom;
	display: block;
	margin: 0 auto;}

/********* header *********/
header{
	width: 100%;
    text-align: center;}

header img{width: 100%;}
/********* main *********/
.main{min-width: 100%;}
h1{
    text-align: center;
    margin-bottom:6px;}

#system{
    background: url(../images/system-bg.jpg)no-repeat top center;
    background-size: cover;
    padding: 5% 0 1%;}

#system .menu{
    margin: 0 auto;}

#system .menu ul{
    margin-bottom: 3%;
    }

#system .menu ul li {
    margin-bottom: 3%;}

#system .bnr{
    text-align: center;
    margin-bottom: 6px;
    }

.pink{
    font-size: 36px;
    text-align: center;
    color: #FF3E3E;
    font-weight: bold;
    }

#system .system-img{
    margin: 34px auto 0;}
#system .system-img ul li{
    margin-bottom: 3%;}

#reason{
    background: url(../images/system-arrow.png)no-repeat top;
    text-align: center;
    padding: 56px 0 0;}
#reason .txt{
    font-size: 24px;
    color: #333;
    margin-bottom: 45px;}

#flow{
    background:#FF5E5E url(../images/flow-bg.png)repeat-x top;
    background-size: 100%;
    padding: 10% 0 4%;
    margin-top: 38px; }
#flow img{width: 90%;}
#flow .txt{
    margin-bottom: 2%;
}
#price{
    background: url(../images/flow-arrow.png),url(../images/dot-bg.png);
    background-position: top center,top;
    background-repeat: no-repeat,repeat;
    text-align: center;
    padding: 52px 8% 36px;}

#case{
    background: url(../images/case-bg.jpg)no-repeat top;
    background-size: cover;
    padding: 4% 0 3%;
}

#case .case-wrap{
    margin: 0 auto;}
#case .case-block{
   background: #fff url(../images/case-block-bg.jpg)no-repeat 2px 2px;
    padding: 27px 0;
    width: 90%;
    margin: 0 auto 5%;  
    box-shadow:5px 5px 0px 0px rgba(130,130,130,0.49);}
#case .case-block h2{
    margin: 0px auto 3%;
    font-size: 25px;
    /* text-align: center; */
    color: #FF3E3E;
    font-weight: bold;
    line-height: 1.2;
    width: 90%;}
#case .case-block .img{
    text-align: center;
    margin-bottom: 2%;}
#case .case-block p{
    margin: 0 auto;
    line-height: 1.4;
    margin-bottom: 12px;
    width: 95%;}
#case .case-bnr{
    font-size: 36px;
    font-weight: bold;
    padding: 30px 0 24px;
    background: #FF5E5E;/*ボタン色*/
    color: #FFF;
    border-radius: 71px;
    text-align: center;
    line-height: 1.3;}

/*** qa ***/
#faq{
	background: url(../images/dot-bg.png)repeat;
    padding: 4% 0 1%;}
#faq p{
    text-align: center;
    margin-top: 17px;
    font-size: 18px;}

.displayNone {display: none;}
.qa-box{
    width: 98%;
    margin: 3% auto 0;}

.qa-box .question {
	background: #35ACDF;
	border-radius: 5px;
	color: #fff;
	cursor:pointer;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 3%;
	padding:9px 7px;	
	position: relative;
	vertical-align: baseline;
    display: flex;
    align-items: center;}

.qa-box .question:after {
	position: absolute;
	right: 20px;
	top:-4px;
	content: '+';
	font-family: serif;
	font-size: 40px;
	color: #fff;}
.question.open:after {
	content: '－';
	top:0px;
    right: 13px;
	font-size: 40px;
    font-family: serif;}

.qa-box .question span.num{
	display: inline-block;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	height: 19px;
	margin-right: 10px;
	padding: 15px 10px 15px;
	vertical-align: middle;}
.qa-box .question span.txt{
	display: inline-block;
    width: 80%;
    line-height: 1.2;}

.qa-box .answer {
	margin-bottom: 22px;
	background: #fff;
	border: #e6e6e6 1px solid;
	border-radius: 5px;
	padding: 30px 40px 40px;}

/*** contact ***/
#contact{
	background: url(../images/contact-bg.jpg) repeat-x top;
    padding: 30px 0 5px;}
#contact p.txt{padding: 26px 0 15px;}
#contact p{
    text-align: center;
    font-size: 14px;}

.contact-box{
    border: 4px solid #DBDBDB;
    margin: 33px auto;
}

.contact-box dl{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;}
.contact-box dt {
	margin-top: 13px;
	font-size: 20px;
	color: #323232;
}
.contact-box dd {
	width:100%;} 

.contact-box dt span{
	font-size: 14px;
	border-radius: 3px;
	color: #fff;
	padding:0 3px;
	margin-right: 20px;}

.contact-box dt span.req{
	background: #ff5252;}
.contact-box dt span.any{
	background: #a0a0a0;}

.contact-box form input.txt-input{
	border-radius: 5px;
	border: 1px solid #ccc;
	display: inline-block;
	font-size: 20px;
	padding: 10px 5px;
	width:98%;
	margin-bottom: 18px;}

.contact-box form textarea{
	border-radius: 3px;	
	border: 1px solid #ccc;
	display: inline-block;	
	font-size: 20px;
	padding: 12px 5px;
	width:98%;
	margin-bottom: 10px;
	height: 165px;}

.checkbox01-parts a{
	text-decoration: underline;
	color: #1846b9;} 

.contact-box .contact-txt{
	text-align: center;
	margin-top: 10px;}

.contact-box form{
	margin-top: 42px;}

.contact-box form dl{
	margin-top: 5% ;}

.contact-box form p {margin-bottom:15px; }
.contact-box form p span{
	color: #002a6f; 
	display: inline-block;
	font-size: 18px;
	text-align: right;
	margin-right: 27px;
	width:25%;}

.contact-box form label{
	display: block;
	margin: 0 auto;
	width: 30%;}

.contact-box form .contact-brtn{
	text-align: center;
	margin-top: 35px;}

.contact-box .contact-btn{
	text-align: center;
	float: none;
    margin: 35px 0 0;
	}
.contact-box dt span{
    color: #FF5E5E;
    font-size: 16px;}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.contact-box .contact-btn input[type="submit"]{
  font-size: 20px;
    display: inline-block;
    padding: 20px 41px 15px;
    text-decoration: none;
    background: #FF5E5E;/*ボタン色*/
    color: #FFF;
    border-top: none;
    border-bottom: solid 6px #FF3C3C;
    border-left: none;
    border-right: none;
    border-radius: 40px;
    font-weight: bold;
    margin-bottom: 23px;
}

.contact-box .contact-btn input[type="submit"]:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/}

.policy-block {
    height: 195px;
    border: 2px solid #d4d4d4;
    margin: 17px auto;
    overflow: auto;
    padding: 14px;}

.policy-block h1{
    background: #525252;
    border-radius: 5px;
    text-align: left;
    color: #fff;
    padding: 10px 18px 5px;
    font-size: 18px;
}
.policy-block h2{
    margin: 15px 0 0;
    color: #FF5E5E;
    font-size: 22px;
}
.policy-block h3{
    font-weight: bold;
}
.policy-block p{
    line-height: 1.6;
    text-align: left!important;
}

address{
    background: url(../images/footer-bg.png)repeat;
    text-align: center;
    color: #fff;
    padding: 3% 0 20%;
}
address img{display: inline-block;}

.footer-copy{
    font-size: 14px;
    margin-top: 35px;}
/********* footer *********/

footer{
    position: fixed;
    bottom: 0;
    background: #fff;
    border: 2px solid #FF5E5E;
    border-radius: 5px;
    padding: 1%;
    color: #fff;
    font-size: 14px;
    width: 97%; 
}
footer .footer-inner{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;}
footer .footer-inner .btn{
    display: flex;
    width: 462px;
    justify-content: space-between;
    padding-top:5px; 
}
footer .footer-inner .txt{
    width: 25%;
    padding-top: 2%;}
footer .footer-inner .btn01,
footer .footer-inner .btn02{
    display: inline-block;    
    border-top: none;
    border-bottom: solid 4px #FF3C3C;
    border-left: none;
    border-right: none;
    border-radius: 25px;    
    text-decoration: none;    
    width: 30%;
    text-align: center;
}
footer .footer-inner .btn01{
    font-size: 20px;
    padding: 12px 1em 0;
    background: #FF5E5E;/*ボタン色*/
    border-bottom: solid 4px #FF3C3C;    
    color: #FFF;
    height: 37px;}

footer .footer-inner .btn02{
    font-size: 20px;
    font-weight: bold;
    padding: 10px 1em 0;
    background: #005BAC;/*ボタン色*/
    border-bottom: solid 4px #003366;    
    height: 39px;}

footer .footer-inner .btn02 a:link{
    color: #fff;}


/*** thanks.html ***/
header#masthead{
    background: url(../images/footer-bg-02.png)repeat-x bottom;
    padding: 3px 0 5px;
    width: 100%;
    color: #fff;
    font-size: 14px;
    position: fixed;
    top: 0;
}
header#masthead img{width: auto;}
.header-inner {
    padding-bottom: 1%;
}

article#thanks{
    background: url(../images/thanks-header.jpg)no-repeat top;
    background-size: 100%;
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    padding: 155px 0 62px;
    margin-top: 9%;
}

.mtb50{margin: 50px 0;}

@media screen and (max-width: 768px){ 
    footer .footer-inner .btn02{
        padding: 1% 3% 0;
        font-size: 3vw;
        height: auto;
         display: -webkit-flex;
         display: flex;
         -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
         align-items: center; /* 縦方向中央揃え */
         -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
         justify-content: center; /* 横方向中央揃え */
    }       
}
@media screen and (max-width: 425px){ 
    .pink{
        font-size: 8vw;
        line-height: 1.4;}
    #reason .txt{
        font-size: 4.5vw;}
    #case .case-bnr{
        font-size: 5vw;
        line-height: 1.4;}
    #faq p{
        font-size: 3vw;}
    .qa-box .question span.txt{
        font-size: 5vw;
        width: 58%;
        vertical-align: middle;
        line-height: 1.5;}
    
    .contact-box .contact-btn input[type="submit"]{
        width: 100%;
        font-size: 5vw;
        padding: 20px 0 15px;}
    footer .footer-inner .btn01{
        padding: 12px 3% 0;
        height: 24px;
        }
}

.map {
    border: 2px solid #fff;
    height: 200px;
    width: 316px;
    margin: 0 auto;}