@charset "UTF-8";
/* Body */

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;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

html {
  font-size: 110%;
}

body {
	font-family: "YuGothic" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin: 0;
	font-size:14px;
	color: #111;
  background: #f0f0f0;
}

h1{
	font-size:2rem;
	text-align: center;
}



p{

}

a{
	text-decoration: none;
	color: #505050;
}

a.fade{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
a.fade:hover{opacity: 0.7;}

img.objectfit{width: 100%;height: 100%;object-fit: cover;}

.clear{
	content:"";display:block;clear:both
}

.bold{
	font-weight: bold;
}

.red{
	color: #CE316D;
}

.pc-block{
	display: block;
}

.sp-block{
	display: none;
}

.shadow{filter:drop-shadow(0 3px 5px rgba(0,0,0,0.2));}

/* Container */
.container {
	width: 100%;
	margin-left: 0 auto;
	margin-right: 0 auto;
  overflow-x: hidden;
}

.container p{}




/* Header */
header {position: fixed;width: 100%;height: 70px;z-index: 999;background: linear-gradient(#fff,#efefef);}

.head_contents	{/*width: 960px;*/margin:0 5%;display: flex;align-items: center;justify-content: space-between;}
.head_contents h1{font-size: 0.8rem;color: #ffffff;text-align: left;padding-left: 5px;}
.head_logo img{height: 40px;margin-top: 5px;}
.head_logo a {text-decoration: none;}

#head_menu{display: flex;align-items: center;}
#head_menu ul	{font-size: 0;}
#head_menu li{display: inline-block;}
#head_menu li:last-child{border-right: none;}
#head_menu li a	{font-size:1rem;padding:8px 15px;color:#151515;text-decoration:none;font-weight: bold;}
#head_menu li a:hover	{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}

/*footer設定*/
footer {background: #6288c5;color: #fff;padding: 15px 5px;}
footer .copyright{text-align: center;}

/* pagetop button */
#pageTop {position: fixed;bottom: 20px;right: 10px;z-index: 999;opacity: 0.8;}
#pageTop img{width: 80px;}
/*#pageTop i {padding-top: 3px;font-size: 1.5rem;}
#pageTop a {display: block;background-color: rgba(98,136,197,0.80);color: #fff;font-weight: bold;border-radius: 10px;padding: 20px 10px;line-height: 14px;text-align: center;font-size: 12px;}
#pageTop a:hover {text-decoration: none;opacity: 0.7;}*/


/*main contents*/
/*共通設定*/
.contents{
	max-width: 1200px;
	margin: 0 auto 50px auto;
  padding: 15px;
}

.contents img{max-width: 100%;}

.contents h2{font-size:2rem;letter-spacing: 0.3rem;font-weight: bold;color: #6288c5;text-align: center;margin: 30px auto;}
.contents h2.section-title{}
.contents h3{font-size:1.5rem;color: #192269;font-weight: bold;}
.contents h4{font-size:1.3rem;font-weight: bold;}
.contents h5{font-size:1.1rem;font-weight: bold;}
.contents p{font-size:1.1rem;margin: 15px 0;letter-spacing: 0.1rem;font-weight: bold;}
.contents .red{color: #DC162E;}

/*ボタン設定*/
.btn-blue{text-align: center;}
.btn-blue a{display: inline-block;padding: 10px 50px;background: linear-gradient(#242852,#1E4E93);color: #fff;font-weight: bold;margin: 15px auto;font-size:1.1rem;letter-spacing: 0.1rem;}
.btn-blue a span{display: inline-block;border-bottom:1px solid #fff;}
.btn-blue a:hover{opacity: 0.9;}

.btn-entry{margin: 0 5px;}
.btn-entry a{display: inline-flex;padding: 5px 30px;background: linear-gradient(90deg,#eb7063,#6288c5);color: #fff;font-weight: bold;margin: 10px auto;border-radius: 50px;justify-content: center;align-items: center;height: 40px;font-size: 1rem;}
.btn-entry a .icon{font-size: 1.2rem;line-height: 1.2rem;margin-right: 10px;}
.btn-entry a:hover{background: #777;}

.bnr-contact{margin: 50px auto;}
.bnr-contact img{width: 100%;}

.contact-box{margin: 30px auto;background: #fff;padding: 15px 30px;}
.contact-box.flex-two .image{width: 25%;text-align: center;margin-left: 5%;}
.contact-box.flex-two .text{width: 70%;text-align: center;}
.contact-box h3{color: #FF5A1D;}

/* TOPコンテンツ */
.head-space{width: 100%;height: 70px;}
#first_view{position: relative;}
#first_view img{vertical-align: middle;}
#first_view .btn-img{display: block;position: absolute;bottom: 7%;left: 22%;width: 30%;}
#first_view .btn-img:hover{opacity: 0.9;}

.flex-two{display: flex;justify-content: space-around;margin: 30px auto;align-items: center;flex-wrap: wrap;}
.flex-two .box{width: 48%;margin: 15px auto;}
.flex-three{display: flex;justify-content: space-around;margin: 30px auto;}
.flex-three .box{width: 30%;}
.flex-three .box h4{text-align: center;}

.basic-table{width: 100%;border-collapse:collapse;table-layout: fixed;margin: 30px auto;}
.basic-table th{background: #00A0E9;color: #fff;font-weight: bold;border:1px solid #8D8D8D;padding: 10px;font-size: 1rem;vertical-align: middle;}
.basic-table th.sub{background: #DAEFF8;color: #111;}
.basic-table td{background: #fff;border:1px solid #8D8D8D;padding: 10px;font-size: 1rem;text-align: center;vertical-align: middle;}

.topic-box{background: #fff;padding: 30px;margin: 30px auto;border:1px solid #183FAA;position: relative;}
.topic-box:after{display: block;position: absolute;top:0;left:0;content: "";width: 30px;height: 30px;border-top: 10px solid #183FAA;border-left: 10px solid #183FAA;}

#sec1{padding: 100px 0;background: #fff;position: relative;}
#sec1:before,#sec1:after{width: 100%;height: 20px;display: block;content: "";background-color: rgba(145, 172, 215, 1);background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(98, 136, 197, 1) 10px, rgba(98, 136, 197, 1) 20px );}
#sec1:before{position: absolute;top:0;left: 0;}
#sec1:after{position: absolute;bottom:0;left: 0;}
#sec1 h2{text-align: center;}
#sec1 h2 img{width: 80%;}

#sec2{margin: 100px auto;text-align: center;}
#sec2 .flex-list{display: flex;margin: 50px auto;}
#sec2 .flex-list li{margin: 15px 30px;width: 25%;list-style: none;}
#sec2 .flex-list li img{width: 100%}

#sec3{padding: 100px 0;background: #fff;text-align: center;}

#sec5{margin: 50px auto;}
#sec5 .ec-list{display: flex;padding: 30px;background: #fff;align-items: center;}
#sec5 .ec-list li{margin: 15px;list-style: none;}
#sec5 .flex-three{flex-wrap: wrap;}
#sec5 .flex-three .box{background: #fff;padding: 15px;margin: 15px auto;width: 28%;}
#sec5 .flex-three .box img{width: 50%;margin: 5px auto;display: block;}

#sec6{background: #C9EEFF;padding: 50px 0;}
#sec6 h3{margin: 30px auto 15px auto;background: #183FAA;color: #fff;padding: 10px;}

#sec7{margin: 50px auto;}
#sec7 .tools{margin: 30px auto;max-width: 960px;padding: 30px;background: #C9EEFE;}
#sec7 .tools h3{border-bottom: 1px solid;}
#sec7 .tools h4{color: #192269;margin: 15px 0;}
#sec7 .tools .blue{color: #192269;font-weight: bold;}
#sec7 .step-box{margin: 30px auto;max-width: 960px;}
#sec7 .step-box h3{display: flex;align-items: center;}
#sec7 .step-box h3 .num{display: inline-block;background: #192269;color: #fff;padding: 5px 15px;margin-right: 15px;}
#sec7 .flex-two .image{width: 20%;}
#sec7 .flex-two .text{width: 75%;margin-left: 5%;}

#sec8{padding: 50px 0;background: #C9EEFE;}
#sec8 .qa-wrap{margin: 50px auto;}
#sec8 .qa-wrap .qa-box{margin: 15px auto;border:1px solid #192269;background: #fff;}
#sec8 .qa-wrap .qa-box .q-box{background: #DEF5FF;padding: 10px;}
#sec8 .qa-wrap .qa-box .q-box h3{margin:auto 30px;position: relative;font-size: 1.2rem;}
#sec8 .qa-wrap .qa-box .q-box h3:before{display: block;content: "Q.";position: absolute;top:0;left: -30px;}
#sec8 .qa-wrap .qa-box .q-box h3:after{display: block;content: "▼";position: absolute;top:0;right: -30px;}
#sec8 .qa-wrap .qa-box .q-box.open h3:after{content: "▲";}
#sec8 .qa-wrap .qa-box .a-box{padding: 10px 10px 10px 45px;position: relative;}
#sec8 .qa-wrap .qa-box .a-box:before{display: block;content: "A.";position: absolute;top:20px;left: 10px;font-size:1.2rem;color: #192269;font-weight: bold;}

#mailform{margin: 50px auto;}
.mail_form{margin: 50px auto;}
.mail_form table{width: 100%;font-size: 1.1rem;border-collapse:collapse;}
.mail_form th{padding: 15px 0;text-align: left;width: 30%;vertical-align: top;border-top:1px solid #777;}
.mail_form th span{display: inline-block;background: #6288c5;color: #fff;font-size: 1rem;margin: 0 10px 0 0;padding: 5px 10px 0 10px;border-radius: 3px;width: 50px;text-align: center;}
.mail_form th span.blank{background: none;}
.mail_form td{padding: 15px 0;border-top:1px solid #777;}
.mail_form .answer{width: 90%;margin: 15px 5% 50px 5%;}
.mail_form .radio-area p{display: inline-block;padding-right: 15px;}
.mail_form .answer select{padding: 5px 10px;font-size: 1.1em;}
.mail_form .input_box{width: calc(100% - 25px);padding: 5px 10px;font-size:1.1em;}
.mail_form .input_text{width: calc(100% - 25px);height: 150px;padding: 5px 10px;font-size:1.1em;}
.form_btn {text-align: center;}
.form_btn button{width: 300px;padding: 10px 30px;border-radius: 15px;background: #6288c5;color: #fff;font-weight: bold;margin: 15px auto;font-size:1.2rem;letter-spacing: 0.1rem;}

.policy-box p{text-align: center;}
.policy-box p span{display: inline-block;background: #6288c5;color: #fff;font-size: 0.9rem;margin: 0 10px 0 0;padding: 5px 10px 0 10px;border-radius: 3px;width: 50px;text-align: center;}
.policy-box .policy-links{display: flex;justify-content: center;margin: 30px auto;}
.policy-box .policy-links a{display: block;padding: 5px;background: #fff;color: #1E4E93;border:1px solid;width: 200px;margin: 15px;text-align: center;}
.policy-box .policy-links a:hover{background: #eee;}

/*tablet*/
@media (min-width:429px) and (max-width:960px){
/*共通設定*/
.contents{
	width: 90%;
	margin: 0 5%;
}

#sec2{margin: 100px auto;text-align: center;}
#sec2 .flex-list{display: flex;flex-wrap: wrap;}
#sec2 .flex-list li{margin: 15px auto;width: 46%;}

#sec3 .flex-two{flex-wrap: wrap;}
#sec3 .flex-two h3{min-width: 400px;}
}

@media (max-width: 428px) {
html{font-size: 100%;}
	.contents{
	width: 94%;
	margin: 0 3%;
	padding: 10px 0;
}

.contents_min{
	width: 80%;
	margin: 0 10%;
}
}

/* Mobile */
@media (max-width: 430px) {

h1{
	text-align: center;
}



p{
}

.pc-block{
	display: none;
}

.sp-block{
	display: block;
}


/* Container */
.container {
	width: 100%;
	overflow: hidden;
}

.container p{}


/* Header */
header {}
.head_contents	{width: 100%;margin: 0;}
.head_logo img{height: 30px;margin-left: 10px;}
.head_logo a {text-decoration: none;}

/*footer設定*/


/*main contents*/
/*共通設定*/

.contents:after{
	content:"";display:block;clear:both
}

.contents h2{font-size:1.8rem;letter-spacing: 0.3rem;}
.contents h3{font-size:1.3rem;letter-spacing: 0rem;}
.contents h4{font-size:1.2rem;}
.contents h5{font-size:1rem;}
.contents p{font-size: 1rem;margin: 15px auto;}

.contents .section-title{margin-bottom:50px; }

.lines:before{top:0;left:auto;right:2%;}
.lines2:before{top:-30px;right:auto;left: 2%;}

.more_info{
	float: right;
	text-decoration: underline;
	padding: 5px;
}

.contact-box{margin: 30px auto;padding: 15px;}
.contact-box.flex-two .image{width: 50%;margin-left: 0;}
.contact-box.flex-two .text{width: 100%;}

/*ボタン設定*/
.btn-entry{margin: 0 5px;}
.btn-entry a{padding: 5px 15px;margin: 10px auto;height: 40px;font-size: 0.9rem;}
.btn-entry a .icon{font-size: 1.1rem;line-height: 1.1rem;margin-right: 10px;}

/* TOPコンテンツ */
.flex-two{margin: 30px auto;flex-direction: column;}
.flex-two .box{width: 100%;}
.flex-three{margin: 30px auto;flex-direction: column;}
.flex-three .box{width: 100%;}

#first_view .btn-img{display: block;position: absolute;bottom: 7%;left: 15%;width: 70%;}

.topic-box{padding: 30px 15px;margin: 30px auto;}

#sec1{}

#sec2{margin: 50px auto;}
#sec2 .flex-list{flex-direction: column;}
#sec2 .flex-list li{margin: 15px auto;width: 80%;}

#sec3{margin: 30px auto;}
#sec4{margin: 30px auto;}
#sec4 .box .top h4 span{font-size: 2rem;}
#sec4 .box .bottom{padding: 10px;font-size: 1rem;}

#sec5{margin: 30px auto;}
#sec5 .ec-list{display: flex;padding: 30px;background: #fff;align-items: center;flex-wrap: wrap;justify-content: center;}
#sec5 .ec-list li{margin: 15px;list-style: none;max-width: 23%;}
#sec5 .flex-three{flex-wrap: wrap;flex-direction: row;}
#sec5 .flex-three .box{padding: 15px 2%;margin: 15px auto;width: 44%;}

#sec6{padding: 30px 0;}

#sec7{margin: 30px auto;}
#sec7 .tools{margin: 30px auto;padding: 15px;}
#sec7 .step-box{margin: 30px auto;}
#sec7 .flex-two .image{width: 50%;}
#sec7 .flex-two .text{width: 100%;margin-left: 0;}

#sec8{padding: 50px 0;background: #C9EEFE;}
#sec8 .qa-wrap{margin: 50px auto;}
#sec8 .qa-wrap .qa-box{margin: 15px auto;border:1px solid #192269;background: #fff;}
#sec8 .qa-wrap .qa-box .q-box{background: #DEF5FF;padding: 10px;}
#sec8 .qa-wrap .qa-box .q-box h3{margin:auto 30px;position: relative;font-size: 1.2rem;}
#sec8 .qa-wrap .qa-box .q-box h3:before{display: block;content: "Q.";position: absolute;top:0;left: -30px;}
#sec8 .qa-wrap .qa-box .q-box h3:after{display: block;content: "▼";position: absolute;top:0;right: -30px;}
#sec8 .qa-wrap .qa-box .q-box.open h3:after{content: "▲";}
#sec8 .qa-wrap .qa-box .a-box{padding: 10px 10px 10px 45px;position: relative;}
#sec8 .qa-wrap .qa-box .a-box:before{display: block;content: "A.";position: absolute;top:20px;left: 10px;font-size:1.2rem;color: #192269;font-weight: bold;}

/* pagetop button */
#pageTop {
  position: fixed;
  bottom: 25px;
  right: 20px;
  z-index: 999;
}

#pageTop img{
  width: 60px;
}

#pageTop i {

}



#pageTop a {
  display: block;
  border-radius: 10px;
  padding: 10px 5px;
}



#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
}

#sp-phone {
    position: absolute;
    right: 70px;
    top: 5px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 100;
	font-size:38px;
}

/* トグルメニュー */
#nav-toggle {
    display: none;
    position: absolute;
    right: 20px;
    top: 19px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 100;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #777; /*トグルボタン色設定*/
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media (max-width:960px){
 #head_menu {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -560px;
        background: rgba(255,255,255,0.9);
        width: 100%;
        text-align: center;
	 	padding-top:30px;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
	 	margin: 0;
	 	padding-top: 80px;
    display: block;
    }
    #head_menu ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #head_menu ul li {
        position: static;
        display: block;
    }
    #header #head_menu ul li a,
    #header.fixed #head_menu ul li a {
        width: 100%;
        display: block;
        padding: 18px 0;
    }

    #nav-toggle {
        display: block;
    }


    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #head_menu {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(520px);
        -webkit-transform: translateY(520px);
        transform: translateY(520px);
    }
}

/*tablet*/
@media (min-width:421px) and (max-width:960px){

}

.ac-box{}
.ac-box .ac-header{}
.ac-box .ac-inner{display: none;}

@media (max-width:960px){
#mailform{margin: 50px auto;}
.mail_form{margin: 50px auto;}
.mail_form table{width: 100%;font-size: 1.2rem;}
.mail_form th{display: block;padding: 15px 0 5px 0;width: 100%;}
.mail_form th span{font-size: 1rem;}
.mail_form th span.blank{display: none;}
.mail_form td{display: block;border: none;}
.mail_form .answer{width: 100%;margin: 15px 0 50px 0;}
.mail_form .radio-area p{display: inline-block;padding-right: 15px;font-size: 1.1em;margin: 5px auto;}
.mail_form .answer select{padding: 5px 10px;font-size: 1.1em;}
.mail_form .input_box{width: 90%;padding: 5px 10px;font-size:1.1em;}
.mail_form .input_text{width: 90%;height: 150px;padding: 5px 10px;font-size:1.1em;}
.form_btn {text-align: center;}
.form_btn button{width: 300px;padding: 10px 30px;border-radius: 15px;font-weight: bold;margin: 15px auto;font-size:1.2rem;letter-spacing: 0.1rem;}

.policy-box p{text-align: left;}
.policy-box p span{display: inline-block;font-size: 0.9rem;margin: 0 10px 0 0;padding: 5px 10px 0 10px;border-radius: 3px;width: 50px;text-align: center;}
.policy-box .policy-links{display: flex;justify-content: center;margin: 30px auto;}
.policy-box .policy-links a{display: block;padding: 5px;background: #fff;color: #1E4E93;border:1px solid;width: 200px;margin: 15px;text-align: center;}
.policy-box .policy-links a:hover{background: #eee;}
}