@charset "utf-8";
/* common */
*, *::before, *::after { box-sizing:border-box; }

html { overflow:auto; -webkit-text-size-adjust:100%; }
body {
  margin:0; padding:0;
  font-size:16px; color:#222; line-height:1.8; letter-spacing: 0.03em;
  -webkit-font-smoothing:antialiased; font-weight:300;
  font-family:
    'Noto Sans JP', "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Meiryo",
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  }
h1, h2, h3, h4, dl, dd, ul, form, textarea, figure { margin:0; padding:0; font-size:100%; }
article, aside, dialog, figure, footer, header, hgroup, nav, section, main { display:block; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; }

/* clearfix 回り込み解除 ------------------------ */
.clearfix:after { content:""; clear:both; display:block; }

/* 共通 ------------------------ */
a { color:#000; text-decoration:none; }
a:not(.fade), .anime { -webkit-transition:all .3s; transition:all .3s; }
a:active, a:hover { color:#e94609; }
a:focus { outline:none; }

strong { font-size:1.2em; }
em { font-style:normal; font-weight:bold; }

ul { list-style-type:none; }
img { max-width:100%; height:auto; font-size:0; line-height:0; border-width:0px; vertical-align:bottom; }
img.middle { vertical-align:middle; }

.fleft  { float:left; }
.fright { float:right; }

.left   { text-align:left; }
.center { text-align:center; }
.right  { text-align:right; }

.hide   { display:none; }
.wide   { width:100%; }
.indent { text-indent:-1em; padding-left:1em; }
.shadow { box-shadow:0 0 3px rgba(0,0,0,0.3); }

.red, .err { color:#bf0669; }

.flex { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.flex-between { -webkit-justify-content:space-between; justify-content:space-between; }
.flex-center  { -webkit-justify-content:center; justify-content:center; }
.flex-align-center { -webkit-box-align:center; -webkit-align-items:center; align-items:center; }

.vh_ctr {
  position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  }

.link-disabled { cursor:default; pointer-events:none; opacity:0.6; }

.is-fixed { position:fixed; top:0; right:0; bottom:0; left:0; }
.is-hide { transform: translateY(-100%); }

/* base ------------------------*/
#wrapper, .wrapper{ max-width: 750px; margin: 0 auto; position: relative; overflow: hidden; }
.inner{ width: 94%; margin: 0 auto; }

/* header ------------------------*/
#header{ position:relative; z-index:100; }
#gnav .menu a{ display:block; position:relative; }

/* common------------------------*/
.sec-box{ margin-bottom:3em; }
.btn_apply{ display:block; width:70%; margin:1em auto; }

/* gnav ------------------------*/
#gnav { display:none; position: fixed; width:100%; height:100vh; left: 0; top: 0;
   background:#efebe1; -webkit-transition:none; transition:none;
   overflow-x:auto; -webkit-overflow-scrolling:touch; }
#gnav.open { -webkit-transform:translate(0); transform:translate(0); }
#gnav a{ text-decoration:none; color:#18575c; }
.pic_menu{ display:none; }

/* menuボタン */
.menu-button { position:absolute; z-index:9999; top:0; right:0; padding:0.7em; background:#f3eed8; }
.menu-button,
.menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s;
  box-sizing:border-box; }
.menu-button .h_menu { position:relative; width:30px; height:18px; margin:0 auto; }
.menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#333; }
.menu-button.open span{ background:#18575c; }

.menu-button span:nth-of-type(1) { top: 0; }
.menu-button span:nth-of-type(2) { top: 8px; }
.menu-button span:nth-of-type(3) { bottom: 0; }

.menu-button.open span:nth-of-type(1) {
  -webkit-transform: translateY(7px) rotate(-45deg);
  transform: translateY(7px) rotate(-45deg);
}
.menu-button.open span:nth-of-type(2) {
  opacity: 0;
}
.menu-button.open span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
.menu-button .label { width:auto; height:auto; margin:5px 0 0; color:#333;
  text-align:center; line-height:1; font-size:11px; }

#gnav .menu{ padding:1em 1em 0; }
#gnav .menu li{ width:100%; border-bottom:1px solid #18575c; }
#gnav .menu li:last-child{ border:0; }
#gnav .menu li a{ display:block; padding:1em 1em; }


/* contents */
.lead{ position:relative; padding:1em 1em; text-align:center; font-size:1.2em; font-weight:500; }
.lead::before{ position:absolute; content:""; width: 0; height: 0; bottom:-24px; left:calc(50% - 24px);
  border-style: solid; border-width: 24px 24px 0 24px;
  border-color: #fff transparent transparent transparent; }
.lead p{ margin:0.5em 0; }

.tantou{ margin:0; text-align:center; }

.reason{ margin:1em 1em; padding:1em; background:#dbe7ed; }
.ttl_reason{ margin:-1.3em 0 1.2em; }
.reason-list{ margin-bottom:1em; padding-bottom:1.5em; background:url(img/bo_dotted.svg) repeat-x left bottom / 100%; }
.reason-list li{ width:30%; }
.reason-list li:nth-child(1){ margin-top:0.5em; }
.reason-list li:nth-child(2){ margin-top:1.3em; }

.system-box .txt{ -webkit-box-flex:1; flex:1; margin:0.5em 0.5em; font-size:0.9em; }
.system-box .pic{ width:26%; margin:2em 0 0 1em; }

.flow{ padding:1.8em 0 1.5em; background:#efebe1; }
.ttl_flow{ width:38%; margin-bottom:1em; }
.flow-list{ margin-bottom:2em; padding:1em 1.5em 0; }

.merit{ position:relative; padding:2em 0 0; }
.merit::before{ position:absolute; content:""; width: 0; height: 0; bottom:-24px; left:calc(50% - 24px);
  border-style: solid; border-width: 24px 24px 0 24px;
  border-color: #fff transparent transparent transparent; z-index:1; }
.ttl_merit{ width:85%; margin-bottom:1em; }
.merit-list{ padding:1em 25% 1.5em 2.5em; font-size:0.9em; font-weight:500; }
.merit-list li{ position:relative; }
.merit-list li:not(:last-child){ margin-bottom:1.5em; }
.merit-list li::before{ position:absolute; content:""; width:50px; height:100%; right:-5em; top:2em;
  background:url(img/img_merit1.svg) no-repeat 0 0 / 100%; }
.merit-list li.merit2::before{ background-image:url(img/img_merit2.svg); width:90px; right:-7em; }
.merit-list li.merit3::before{ background-image:url(img/img_merit3.svg); width:50px; }
.merit-list .sub{ width:85%; margin-left:-1em; }
.merit-list p{ margin:0.5em 0; }

.demerit{ position:relative; padding:2.5em 0 0.5em; background:#efebe1; }
.demerit::before{ position:absolute; content:""; width: 0; height: 0; bottom:-24px; left:calc(50% - 24px);
  border-style: solid; border-width: 24px 24px 0 24px;
  border-color: #efebe1 transparent transparent transparent; }
.demerit .con{ position:relative; padding:0 2.5em 1em; font-size:0.9em; font-weight:500; }
.demerit .con::before{ position:absolute; content:""; width:80px; height:100%; right:1em; top:60%;
  background:url(img/img_demerit.svg) no-repeat 0 0 / 100%; }
.demerit .sub{ width:60%; margin-left: -1em; }

.osusume{ position:relative; padding:3em 0 0; }
.ttl_osusume{ width:75%; margin-bottom:1em; }
.osusume-list{ padding:2em 2em; }
.osusume-list li:not(:last-child){ margin-bottom:1.5em; }

.voice{ position:relative; padding:0 0 1.5em; background:#efebe1; }
.voice-list{ padding: 2em 2em 1.5em 1em; }
.voice-list li:not(:last-child){ margin-bottom:1.5em; }

.qa{ padding-bottom:1.5em; background:#f3eed8; }
.ttl_qa{ margin-bottom:2em; }
.qa-list{ width:75%; margin:2em auto; }
.qa-list li{ margin-bottom:2.5em; }

.hikaku{ padding:2em 0 0.5em; }
.ttl_hikaku{ width:70%; margin:0 auto 2.5em; }
.hikaku-list{ width:82%; margin:2em auto; }
.hikaku-list li:not(:last-child){ margin-bottom:2em; }

.about{ padding:1em 1em; }
.bg_about{ padding:1em 1em 0; background:#eeefef; }
.ttl_about{ margin-bottom:1.5em; }
.about-list{ width:85%; margin:0 auto; }
.about-list li{ width:44%; margin-bottom:1.5em; }
.about-list li .pic{ margin-bottom:1em; }
.about .txt_box{ padding:0.5em 0.5em 1em; }
.about6 .pic{ width:52%; margin-right:1em; }
.about6 .txt{ -webkit-box-flex:1; flex:1; margin:0; }

.btn-box{ padding:0.8em 0; text-align:center; color:#18575c; background:#f9d8a0; }
.btn-box p{ margin:0; font-size:1.25em; font-weight:500; }
.btn-box .btn_apply{ margin-top:0.5em; }
.policy{ margin:2em 0 0; }

.wrap-movie{ width:92%; margin:1em auto; }
.movie-box{ position: relative; padding-top: 56.25%; }
.movie-box iframe, .movie-box .test{ position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important; }
.wrap-movie .video{ width:100%; }

/* footer */
#footer{ padding-bottom:5em; }

/* フローティングボタン */
.fl_link{ position:fixed; left:0; bottom:0; z-index: 500; /*background: #FFF;*/ }
.fl_link li{ text-align:center; background:#18575c; }
.fl_link a{ display:block; padding:0.5em 0.5em; }
.fl_tel{ width:43%; margin-right:0.5%; }
.fl_online{ width:43%; }
.fl_link li.pagetop{ width:13.5%; background:#ffe900; }
.fl_link li.pagetop a{ padding:0.8em 0.8em; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  .sec-box{ margin-bottom:5em; }
  .sp_none { display: block; }
  .sp_only { display:none; }

  /* menu */
  .menu-button{ padding: 1em; cursor: pointer; }
  .menu-button .h_menu{ width:50px; }
  .menu-button .label{ margin-top:8px; font-size: 15px; }

  /* contents */
  .lead{ padding: 1.5em 1em; font-size:1.7em; }
  .lead::before{ bottom:-50px; left:calc(50% - 50px); border-style: solid; border-width: 50px 50px 0 50px; }

  .reason{ margin:3em 1em; padding:1em 2.2em 2em; }
  .reason-list{ margin-bottom:2em; padding-bottom:1.8em; }
  .reason-list li:nth-child(2){ margin-top:2em; }

  .ttl_system{ margin-bottom:1.2em; }
  .system-box .txt{ font-size:1.1em; }

  .flow{ padding-top:3em; padding-bottom:2.5em; }
  .flow-list{ margin-bottom:3em; padding:2em 4em 0; }
  .flow-list li:not(:last-child){ margin-bottom:1.2em; }

  .merit::before{ bottom:-50px; left:calc(50% - 50px); border-style: solid; border-width: 50px 50px 0 50px; }
  .merit{ padding:5em 0 2em; }
  .ttl_merit{ margin-bottom: 2em; }
  .merit-list{ padding-right:30%; font-size: 1.1em; }
  .merit-list .sub{ width:75%; }
  .merit-list li::before, .merit-list li.merit3::before{ width:70px; right: -8em; }
  .merit-list li.merit2::before{ width:150px; right: -9em; }

  .demerit{ padding-top:5.5em; padding-bottom:2.5em; }
  .demerit::before{ bottom:-50px; left:calc(50% - 50px); border-style: solid; border-width: 50px 50px 0 50px; z-index:1; }
  .demerit .con{ font-size: 1.1em; }
  .demerit .sub{ width: 45%; }
  .demerit .con::before{ width: 150px; right: 5em; top: 50%; }

  .osusume{ padding-top:5.5em; padding-bottom:2em; }
  .ttl_osusume{ margin-bottom:2em; }
  .osusume-list{ padding: 2em 7em; }

  .voice{ padding-bottom:3em; }
  .voice-list{ padding:2em 4.5em 2.5em 2em; }
  .voice-list li:not(:last-child){ margin-bottom: 2.5em; }

  .ttl_qa{ margin-bottom:3em; }
  .qa-list{ width:60%; }
  .qa-list li{ margin-bottom:3em; }

  .hikaku{ padding:4em 0 1.5em; }
  .ttl_hikaku{ margin-bottom:4em; }
  .hikaku-list{ width:75%; margin:4em auto; }
  .hikaku-list li:not(:last-child){ margin-bottom:3.5em; }

  .bg_about{ padding: 1.5em 1.5em 0; }
  .ttl_about{ margin-bottom: 2.5em; }
  .about-list li{ margin-bottom: 2.5em; }
  .about .txt_box{ padding:2em 1em 3em; }
  .about6 .pic{ width: 48%; margin-right: 2em; }

  .btn-box{ padding: 1.2em 0; }
  .btn-box p{ font-size:2em; letter-spacing:0.08em; }
  .policy{ font-size:1.3em; }

  /* footer */
  #footer{ padding-bottom: 8em; }
  .fl_link{ width:100%; }
  .fl_link li img{ width:300px; }
  .fl_link li.pagetop img{ width:50px; }

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .pc_none { display:none; }
  ::selection { background:#EEE; }
  ::-moz-selection { background:#EEE; }
  /* 電話番号リンク PCで無効 */
  a[href^='tel:'] { cursor:default; pointer-events:none; }

}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }
  .inner, .narrow { margin: 0 30px; }
  .pc_only { display:none; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }
  .sp_none { display:none; }

  /* footer */
  #footer a{ display: block; }
  .copyright{ line-height:1.4; }

}