@charset "UTF-8"; 
@import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700&subset=japanese&font-display+swap"; 
@import"https://use.fontawesome.com/releases/v5.6.1/css/all.css"; 

/* reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p { margin: 0; padding: 0; }
html { -ms-touch-action: manipulation; touch-action: manipulation; }
body { font-weight: 400; background: #00c3df; -webkit-font-kerning: auto; font-kerning: auto; letter-spacing: .04em; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Noto Sans JP', '游ゴシック Medium', 'YuGothic', 'YuGothicM', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '-apple-system', 'BlinkMacSystemFont', 'Verdana', 'Meiryo', sans-serif; }
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
@media(min-width:30em) {  body { font-size: 1.5rem; } }
@media(min-width:48em) { body { font-size: 1.6rem; } }
a:hover, button:hover ,img:hover { transition: all .3s ease-in-out; }
img { border: 0; virtical-align: bottom; }
button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
ul, ol { list-style: none; }
input,textarea { -webkit-appearance: none; border-radius: 0; }
::placeholder { color: #CCC; }
.clearfix::after,.radio::after { content:""; display: block; clear: both; }
* html .clearfix { height: 1px; }
i { padding: 0 .2em 0 0; }
table { border-collapse: collapse; border-spacing: 0; }
.view_pc,.view_sp {display: none;}

/* header */
header { width: 100%; position: fixed; top:0; left: 0; z-index: 999;  color: #FFF; background: #49c3df; transition: all .3s ease-in-out; }
header div { position: relative; }
header.header_fixed { box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); transition: all .3s ease-in-out; }
.header_logo a { padding: 1em; display: inline-block; }
.header_logo span { display: inline-block; padding: .5em 1em; vertical-align: top; margin-top: 2em; background: #FFF; border-radius: 40px; color: #49c3df; }
#fv { background: url("../images/fv_bg.jpg") fixed no-repeat; background-size: 100%; } 
#fv h1 { margin: auto; padding: .5em 0; }
.target { background: #f4db32; padding: 1.5em 0; line-height: 2; text-align: center; font-weight: bold; }
.a_title { color: #FFF; padding: 2em 0; line-height: 2; text-align: center; font-weight: bold; }
/* common */
#contents { background: #FFF; padding: 2em; line-height: 2;  }
.content { background: #fafafa; border:1px solid #EEE; margin: 1em 0; padding: 1em; box-sizing: border-box; }
.content h2 {  background: #FFF; font-weight: bold; text-align: center; padding: .2em 0; margin: 1.5em 0; color: #49c3df; border-top:3px solid #49c3df; border-bottom:3px solid #49c3df; box-shadow: 15px 15px #f1f1f1; }
.content h2 img { vertical-align: middle; }

.cont_sub_title { font-weight: bold; padding: 0 0 1em 0; text-align: center; }
.header_btn { position: absolute; top:1em; right:1em; z-index: 999; }
.header_btn a { padding: .5em 0; display: block; color: #FFF; text-decoration: none; border:3px solid #FFF; text-align: center; }
.header_btn a:hover { opacity: .5; transition: all .3s ease-in-out; }
.btn_wrap { margin: 2em auto; font-weight: bold; }
.btn_txt { text-align: center;}
.btn_txt::before { content:""; vertical-align: middle; display: inline-block; background: url("../images/obj_1.svg") no-repeat; background-size: 100%;  margin: 0 .5em 0 0; }
.btn_txt::after { content:""; vertical-align: middle; display: inline-block; background: url("../images/obj_2.svg") no-repeat; background-size: 100%; margin:  0 0 0 .5em; }
.common_btn a ,.submit_btn input { display: block; margin: .5em 0; background: #49c3df; padding: 1em 0; color: #FFF; text-align: center; text-decoration: none; border-bottom: .5em solid #008eaf; }
.common_btn a:hover,.submit_btn input:hover { margin-top: 1em !important; border-bottom: .2em solid #008eaf; }
.submit_btn input { font-weight:bold; border-top: 1px solid #49c3df; border-left: 1px solid #49c3df; border-right: 1px solid #49c3df; }
.img_wprp_1 { margin: 1em auto; }
.txt_center { text-align: center; }

/* form */
.form_wrap { background: #fafafa; }
.form_wrap h3 { background: #bfbfbf; color: #FFF; text-align: center; padding: .5em 0; }
.form_group { padding: 2em; }
.form_group h4 { padding: 1em 0; }
.form_group h4 span { display: inline-block; padding: 0 .5em;margin: 0 .5em 0 0; background: #d54848; color: #FFF; }
.note_txt { color: #ffb400; background: #fffeef; border: 1px solid #ffd200; padding: 1em; margin:.5em 0; }
input.input_wrap_1,input.input_wrap_2 { border:1px solid #EEE; background: #FFF; height: 45px; padding: .5em; margin:0 0 1em 0; }
.radio-input { display: none; }
.radio-input + label{ position:relative; background: #FFF; margin:0 .5em .5em 0; display: block; text-align: center;}
.radio-input + label::before{ content: ""; display: block; position: absolute; top: 24%; left: 1em; border: 1px solid #49c3df; border-radius: 50%; }
.radio-input:checked + label{ color: #FFF; background: #49c3df !important; border:1px solid #49c3df; transition: all .2s ease-in-out; }
.radio-input:checked + label::after{ content: ""; display: block; position: absolute; top: 24%; left: 1em; background: #FFF; border:1px solid #FFF; border-radius: 50%; }
.radio-input + label::before{ width: 12px; height: 12px; }
.radio-input:checked + label::after{ width: 12px; height: 12px; }
.custom-select-wrapper { position: relative; display: inline-block; user-select: none; }
.custom-select-wrapper select { display: none; }
.custom-select { position: relative; display: inline-block; }
.custom-select-trigger { position: relative; display: block; height: 45px; line-height: 2.5; padding: 0 84px 0 22px; color: #555;  background: #FFF; border: 1px solid #EEE; cursor: pointer; margin: .5em 0; }
.custom-select-trigger:after { position: absolute; display: block; content: ''; top: 50%; right: 25px; margin-top: -3px; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; transform: rotate(45deg) translateY(-50%); transition: all .2s ease-in-out; transform-origin: 50% 0; }
.custom-select.opened .custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }
.custom-options { position: absolute; display: block; top: 80%; left: 0; right: 0; z-index: 999; min- margin: 15px 0; border: 1px solid #b5b5b5; border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px rgba(0,0,0,.07); background: #fff; transition: all .2s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); overflow: scroll; -webkit-overflow-scrolling: touch; }
.custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }
.custom-options:before { position: absolute; display: block; content: ''; bottom: 100%; right: 25px; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; background: #fff; transform: rotate(45deg); transition: all .2s ease-in-out; }
.option-hover:before { background: #f9f9f9; }
.custom-option { position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5;  font-weight: 100; color: #111; line-height: 47px; cursor: pointer; transition: all .2s ease-in-out; }
.custom-option:first-of-type { border-radius: 4px 4px 0 0; }
.custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px; }
.custom-option:hover,
.custom-option.selection { background: #f9f9f9; }
.terms_box { font-size: 1.2rem; overflow: scroll; -webkit-overflow-scrolling: touch; height: 200px;  background: #FFF; border:1px solid #CCC; padding: .5em; }
.radio_txt { width: 60%; margin: 1em auto !important; }   
.cp_note { background: #FFF; padding: 1em; color: #555; }

/* sub_contents */
.sub_note { font-size: 1.6rem; padding: .5em; }
.sub_note p,.sub_note ul { font-size: 1.2rem; padding: .5em; }
.sub_note h3,
.sub_note h4 { padding: 1em 0;}
.sub_note li { list-style: decimal; padding:0 .5em; margin: 0 0 .5em 2em; }
.table_area table {  width: 100%; margin: 1em auto; border: 1px solid #CCC; line-height: 2; }
.table_area th { width: 30%; text-align: center; padding: 1em; font-weight: 600; background: #EFEFEF; border: 1px solid #CCC; }
.table_area td { padding: 1em 1em 1em 2em; border: 1px solid #CCC; background: #FFF; }

/* footer */
.footer_in { background: #FFF; padding: 2em 0; text-align: center; }
.footer_logo img { display: block; margin: auto; }
.footer_in ul { text-align: center; margin: 1em 0; line-height: 2; }
.footer_in li { display: inline-block; padding: 0 .5em; }
.footer_in li a { color:#999; }
.copy { color: #FFF; text-align: center; padding: 1em 0; }
#page_top { position: fixed; bottom: 30px; right: 20px; z-index: 999; }
#page_top a { background: rgba(7,7,7,0.50); color: #fff; text-align: center; text-decoration: none; padding:0 .5em; }
#page_top i { padding: 0 !important; }
#page_top a:hover { background: rgba(0,0,0,0.80); text-decoration: none; }

/* ///////////////////////////////////////////////////////////////////// 
// Media Queries
/////////////////////////////////////////////////////////////////////*/
/* PC */
@media screen and (min-width: 768px) { 
  .view_pc {display: block;}
  #wrap { width: 1000px; margin: 0 auto 1em; }
  #fv h1 { width: 65%; }
  .radio { margin: 1em 0; }
  /* width */
  .flex_box { display: flex; }
  .float_box div { float: left; }
  .col_3 div, .col_5 div { width: 33.3%; height:40px; }
  header.header_fixed { width: 100%; }
  .header_logo a { width: 200px; }
  .content h2 img { width: 35%; }
  .content h2::before { content:""; vertical-align: middle; display: inline-block; background: url("../images/obj_0.svg") no-repeat; background-size: 100%; margin: 0 .2em 0 0; }
  .content h2::after { content:""; vertical-align: middle; display: inline-block; background: url("../images/obj_0.svg") no-repeat; background-size: 100%; margin:  0 0 0 .2em; }
  .content h2::before ,.content h2::after { width: 60px; height: 90px; }
  .header_btn a { width: 200px; }
  .btn_wrap { width: 40%; }
  .btn_txt::before ,.btn_txt::after { width: 20px; height: 30px; }
  .submit_btn input { width: 100% ; }
  .img_wprp_1 { width: 60%; }
  .cont_1 .col_3 div::after { width: 60px; height: 72px; }
  .resul_txt img:nth-child(1) { width: 35%; }
  .resul_txt img:nth-child(2) { width: 80%; }
  .es_cont h3 { width: 15%; }
  .es_txt { width: 85%; }
  .cont_3 .col_3 div::before { width: 100px; height: 120px; }
  .cont_3 .col_3 div::after { width: 50px; height: 100px; }
  .col_7 li { width: 14.2%; height: 180px; }
  .voice_box h3::before,.voice_box h3::after { width: 40px; height: 30px; }
  .voice_box { width: 80%; }
  .voice_box h3 { width: 100%; }
  .thum img { width: 30px; }
  .accordion-wrap{ width: 90%; }
  .accordion-item{ width: 100%; }
  .accordion-text{ width: 100%; }
  input.input_wrap_1 { width: 200px; }
  input.input_wrap_2 { width: 100%; }
  .custom-select-trigger:after { width: 10px; height: 10px; }
  .custom-options { width: 100%; height: 200px; }
  .custom-options:before { width: 7px; height: 7px; }
  .footer_logo img { width: 200px; }
  .cont_3 .col_3 div h3 img { display: block; width: 80%; margin: .5em auto; }
  
  /* font-size */
  .target { font-size: 1.2em; }
  .btn_wrap { font-size: 1.4em; }
  .submit_btn input { font-size: 1em;}
  .resul_txt { font-size: 2em; }
  .es_txt h4 { font-size: 1.4em; }
  .es_txt h4 span { font-size: .7em; }
  .form_wrap h3 { font-size: 1.2em; }
  .header_logo span { font-size: .8em; }
  .form_group h4 span { font-size: .8em; }
  .note_txt { font-size: .8em; }
  .footer_in ul { font-size: .8em; }
  #page_top a { font-size: 2em; }
  .copy { font-size: .8em; }
}
/* SP */
@media screen and (max-width: 768px) { 
  .view_sp {display: block;}
  #fv { background: url("../images/fv_bg_sp.jpg") fixed no-repeat; background-size: 100%; } 
  .header_btn a { display: block; padding: .5em 0;}
  .header_logo span { text-align: center; display: block; padding: 1em 0; margin: 0 auto 1em; }
  .header_logo a { padding: .5em 0 0 .5em; }
  #contents { padding: .5em; }
  .content {padding: .5em; }  
  .form_group { padding: 0; }
  .radio-input + label::before{ left: .5em; }
  .radio-input:checked + label::after{ left: .5em; }
  .custom-select-trigger { height: auto; }
  .radio { margin: .5em 0; }
  .radio_txt .radio-input + label::before{ top: 40%;}
  .radio_txt .radio-input:checked + label::after{ top: 40%;}  

  /* width */
  #fv h1 { width: 95%; margin: auto; } 
  .flex_box { display: flex; }
  .float_box div { float: left; }  
  .col_3 div { width: 50%; height:35px; }
  .btn_wrap { width: 95%; }
  .header_btn a { width: 100%; }
  .header_logo span { width: 95%; }
  header.header_fixed { width: 100%; }
  .header_logo a { width: 200px; }
  .btn_txt::before ,.btn_txt::after { width: 20px; height: 30px; }
  .submit_btn input { width: 100% ; }
  .img_wprp_1 { width: 60%; }
  .thum img { width: 30px; }
  .form_group h4 { padding: 1em 0; }
  input.input_wrap_1, input.input_wrap_2 { height: auto;}  
  input.input_wrap_1 { width: 200px; }
  input.input_wrap_2 { width: 100%; margin:0 0 .5em 0; padding: .5em 0; }
  .radio-input + label::before{ width: 10px; height: 10px; }
  .radio-input:checked + label::after{ width: 10px; height: 10px; }
  .custom-select-trigger:after { width: 10px; height: 10px; }
  .custom-options { width: 100%; height: 200px; }
  .custom-options:before { width: 7px; height: 7px; }
  .footer_logo img { width: 200px; }
  
  /* font-size */
  .table_area table { font-size: 1.2rem;}
  .a_title { font-size: 1.2em; } 
  .radio_txt { width: 100%; vertical-align: middle; }   
  .header_logo span {font-size: .6em; }
  .btn_wrap {font-size: 1.3em; width: 95%; }
  .submit_btn input { font-size: 1em;}
  .resul_txt { font-size: 2em; }
  
  .form_wrap h3 { font-size: 1em; margin: 1em 0; }
  .form_group h4 span { font-size: .8em; }
  .note_txt { font-size: .8em; }
  .footer_in { font-size: 1em; padding: 1em 0; }
  #page_top a { font-size: 2em; }
  .copy { font-size: .8em; }
  .footer_in ul { font-size: .8em; }  
}