@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
	font-family: 'gotham';
	src: url('fonts/gotham-book.otf');
	font-weight: 300;
}
@font-face {
	font-family: 'gotham';
	src: url('fonts/gotham-bold.otf');
	font-weight: 600;
}

/* !-------------------- リスト -- */
[class*="list_split_"]{
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.list_split_1 > li { width: 100%;}
.list_split_2 > li { width: 50%;}
.list_split_3 > li { width: 33.3333%;}
.list_split_4 > li { width: 25%;}
.list_split_5 > li { width: 20%;}
.list_split_6 > li { width: 16.6666%;}

@media screen and (max-width: 1080px){
  .list_split_1_1080 > li { width: 100%;}
  .list_split_2_1080 > li { width: 50%;}
  .list_split_3_1080 > li { width: 33.3333%;}
  .list_split_4_1080 > li { width: 25%;}
  .list_split_5_1080 > li { width: 20%;}
  .list_split_6_1080 > li { width: 16.6666%;}
}
@media screen and (max-width: 960px){
  .list_split_1_960 > li { width: 100%;}
  .list_split_2_960 > li { width: 50%;}
  .list_split_3_960 > li { width: 33.3333%;}
  .list_split_4_960 > li { width: 25%;}
  .list_split_5_960 > li { width: 20%;}
  .list_split_6_960 > li { width: 16.6666%;}
}
@media screen and (max-width: 768px){
  .list_split_1_768 > li { width: 100%;}
  .list_split_2_768 > li { width: 50%;}
  .list_split_3_768 > li { width: 33.3333%;}
  .list_split_4_768 > li { width: 25%;}
  .list_split_5_768 > li { width: 20%;}
  .list_split_6_768 > li { width: 16.6666%;}
}
@media screen and (max-width: 640px){
  .list_split_1_640 > li { width: 100%;}
  .list_split_2_640 > li { width: 50%;}
  .list_split_3_640 > li { width: 33.3333%;}
  .list_split_4_640 > li { width: 25%;}
  .list_split_5_640 > li { width: 20%;}
  .list_split_6_640 > li { width: 16.6666%;}
}
@media screen and (max-width: 480px){
  .list_split_1_480 > li { width: 100%;}
  .list_split_2_480 > li { width: 50%;}
  .list_split_3_480 > li { width: 33.3333%;}
  .list_split_4_480 > li { width: 25%;}
  .list_split_5_480 > li { width: 20%;}
  .list_split_6_480 > li { width: 16.6666%;}
}
@media screen and (max-width: 374px){
  .list_split_1_374 > li { width: 100%;}
  .list_split_2_374 > li { width: 50%;}
  .list_split_3_374 > li { width: 33.3333%;}
  .list_split_4_374 > li { width: 25%;}
}


/* !--------------------------------------- ボタン -- */
[class*="btn_"] {
  cursor: pointer;
  color: #fff;
  font: 600 13px/1em 'noto sans japanese';
  border: 1px solid #182B4A;
  background: #182B4A;
  padding: .4em 2em;
  display: inline-block;
  border-radius: 100px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,.2);
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,.2);
}
[class*="btn_"][class*="gray"] {
  background: #ccc;
  border-color: #ccc;
}

/* ボタンエリア */
[class*="btnarea_"][class*="center"] {
  text-align: center;
}


/* !--------------------------------------- ブレイク -- */
.br_768 {
  display: none;
}
.br_640 {
  display: none;
}
.br_560 {
  display: none;
}
.br_480 {
  display: none;
}
@media screen and (max-width: 768px){
  .br_768 {
    display: block;
  }
}
@media screen and (max-width: 640px){
  .br_640 {
    display: block;
  }
}
@media screen and (max-width: 560px){
  .br_560 {
    display: block;
  }
}
@media screen and (max-width: 480px){
  .br_480 {
    display: block;
  }
}



/* !--------------------------------------- フォーム -- */
/*
  .form_box
    .form_ttl
    .form_cnt
      .input_wrap
        .select_wrap
        .checkbox_wrap
        .radio_wrap
*/

form a:not([class*="btn_"]) {
  color: #0cb;
}
form a:not([class*="btn_"]):hover {
  text-decoration: underline;
}

/* --------------------
スイッチ
-------------------- */
.switch-wrap input {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.switch-btn {
  position: relative;
  display: block;
  height: 14px;
  width: 48px;
  margin: 0 auto;
  background: #ccc;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,.3) inset;
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,.3) inset;
}
.switch-btn:before {
  content: "英語";
  color: #fff;
  font: 500 10px/1em 'noto sans japanese';
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.switch-btn:after {
  content: '\f068';
  color: #ccc;
  font: normal 10px/1.5em 'fontawesome';
  position: absolute;
  left: -2px;
  top: -3px;
  display: block;
  width: 20px;
  height: 20px;
  padding-top: 1px;
  border: 1px solid #ccc;
  border-radius: 100px;
  background: #fff;
  transition: all 0.3s ease;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.switch-btn:active:after { transform: scale(1.1, 0.9); }
.switch-base:checked + .switch-btn {
  background: #29638e;
}
.switch-base:checked + .switch-btn:before {
  right: auto;
  left: 8px;
}
.switch-base:checked + .switch-btn:after {
  content: "\f00c";
  color: #224477;
  left: 30px;
  border-color: #224477;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.switch-base:disabled .switch-btn {
  background: #d5d5d5;
  pointer-events: none;
}
.switch-base:disabled .switch-btn:after {
  background: #bcbdbc; }
.switch-wrap {
  font: 300 11px/1em 'noto sans japanese';
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.switch-wrap p {
  color: #555;
  font: 300 11px/1em 'noto sans japanese';
  margin: 0 0 0 8px;
}
.chat-form-btn {
  width: 100%;
  padding: 10px;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* !-----　フォームのリストの ----- */
.list_form {
  margin: -5px;
}
.list_form li {
  padding: 5px;
}
.list_form [class*="btnarea"] {
  margin: 20px 0 0;
}

/* !-----　フォームのレイアウト ----- */
.form_box {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
}
.form_ttl {
  font: 700 13px/1em 'noto sans japanese';
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: flex-start; align-items: flex-start;
  -webkit-flex: 0 0 50px; flex: 0 0 50px;
  position: relative;
  padding: 4px 0 0 ;
}
.form_ttl small {
  font-size: 10px;
}
.form_cnt {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
}
.form_contact.confirm .form_ttl {
  -webkit-flex: 0 0 120px; flex: 0 0 120px;
}

/* 必須 */
.form_ttl:before {
  content: "任意";
  color: #182B4A;
  font: 300 10px/1em 'noto sans japanese';
  padding: .2em .8em;
  border: 1px solid #182B4A;
  -webkit-transform:scale(.8);
  transform:scale(.8);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.required .form_ttl:before {
  content: "必須";
  color: #fff;
  background: #182B4A;
}
.form_contact.confirm .form_ttl:before {
  content: none;
}

/* !-----　インプットを入れるボックス ----- */
.input_wrap {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
  width: 100%;
}
.input_wrap .button_wrap {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  flex: 0 0 auto;
}

/* !-----　インプットとボタンを並べるデザイン ----- */
.input_combi {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  position: relative;
}
.combi_submit[disabled] {
  cursor: default;
  background: rgb(187,187,187);
  background: -moz-linear-gradient(-45deg, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(187,187,187,1) 0%,rgba(238,238,238,1) 100%);
  background: linear-gradient(135deg, rgba(187,187,187,1) 0%,rgba(238,238,238,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#eeeeee',GradientType=1 );
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,.2) inset;
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,.2) inset;
}
.combi_submit[disabled]:before {
  content: none;
}
.input_combi input[type="text"] {
  padding-right: 100px;
}
.input_combi input[type="text"]:focus + button {
  opacity: 1;
}
.input_combi button {
  position: absolute;
  right: 5px;
  top: 50%;
  border-radius: 3px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.input_combi button:before {
  border-radius: 3px;
}

/* !-----　パーツ ----- */
input:not([type="checkbox"]):not([type="submit"]),select,textarea,
input[type="file"]:before {
  font: 300 12px/1.5em 'noto sans japanese';
  border: none;
  border-bottom: 1px dotted #A7C3CE;
  border-radius: 0;
  padding: 4px 8px;
  background: transparent;
/*   -webkit-flex: 1 1 auto;flex: 1 1 auto; */
  width: 100%;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #A7C3CE;
}
button {
  outline: none;
}
input:not([type="submit"]),select {
  height: 30px;
}
input,select,button,textarea{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
textarea {
  min-height: 60px;
  resize: none;
}
/* プレイスホルダー */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #999;}
input:-ms-input-placeholder { color: #999;}
input::-moz-placeholder { color: #999;}

/* !-----　パーツ横幅指定 ----- */
.input_50 { max-width: 50px;}
.input_75 { max-width: 75px;}
.input_100 { max-width: 100px;}
.input_120 { max-width: 120px;}
.input_140 { max-width: 140px;}
.input_150 { max-width: 150px;}
.input_200 { max-width: 200px;}
.input_250 { max-width: 250px;}
.input_300 { max-width: 300px;}
.input_350 { max-width: 350px;}
.input_400 { max-width: 400px;}
.input_450 { max-width: 450px;}
.input_500 { max-width: 500px;}
.input_550 { max-width: 550px;}
.input_600 { max-width: 600px;}
.input_max { max-width: 100vw; }


/* !-----　ユニット ----- */
[class*="unit"] {
  color: #333;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  font: 400 11px/1em 'noto sans japanese';
  flex: 0 0 2.5em;
}
[class*="unit_1"] { -webkit-flex: 0 0 1em; flex: 0 0 1em; }
[class*="unit_2"] { -webkit-flex: 0 0 2em; flex: 0 0 2em; }
[class*="unit_3"] { -webkit-flex: 0 0 3em; flex: 0 0 3em; }
[class*="unit_4"] { -webkit-flex: 0 0 4em; flex: 0 0 4em; }
[class*="unit_5"] { -webkit-flex: 0 0 5em; flex: 0 0 5em; }
[class*="unit_6"] { -webkit-flex: 0 0 6em; flex: 0 0 6em; }
[class*="unit_7"] { -webkit-flex: 0 0 7em; flex: 0 0 7em; }
[class*="unit_8"] { -webkit-flex: 0 0 8em; flex: 0 0 8em; }
[class*="unit"][class*="left"] {
  -webkit-justify-content: flex-start; justify-content: flex-start;
  padding-left: .3em;
}
[class*="unit"][class*="right"] {
  -webkit-justify-content: flex-end; justify-content: flex-end;
  padding-right: .3em;
}
[class *="unit"][class*="center"] {
  -webkit-justify-content: center; justify-content: center;
  padding: 0 .5em;
}

/* !---------- セレクト ---------- */
select {
  width: 100%;
  padding-right: 20px;
  -webkit-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}
.select_wrap {
  width: 100%;
  position: relative;
}
.select_wrap:before {
  color: #333;
  content: "\f107";
  font: normal 15px/1em 'fontawesome';
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events:none;
}
.select_wrap + .select_wrap,
.select_wrap + button {
  margin: 0 0 0 3px;
}

/* !---------- チェックボックス/ラジオボタン ---------- */
.checkbox_wrap,
.radio_wrap {
  width: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  position: relative;
}
.checkbox_wrap input,
.radio_wrap input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.checkbox_wrap label,
.radio_wrap label {
  font: 400 11px/1.3em 'noto sans japanese';
  position: relative;
  padding: 0 0 0 24px;
  height: 24px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.checkbox_wrap label:before,
.checkbox_wrap label:after,
.radio_wrap label:before,
.radio_wrap label:after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.radio_wrap label:before,
.radio_wrap label:after {
  border-radius: 50%;
}
.checkbox_wrap label:before,
.radio_wrap label:before {
  display: block;
  background: transparent;
  border: 1px solid #A7C3CE;
}
.checkbox_wrap label:after,
.radio_wrap label:after {
  background: #A7C3CE;
}
.checkbox_wrap label:after {
  content: "\f00c";
  color: #fff;
  font: normal 12px/16px 'fontawesome';
  text-align: center;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: none;
}
.radio_wrap label:after {
  content: "";
  width: 14px;
  height: 14px;
  background: #A7C3CE;
  border-radius: 100px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-transform:scale(.5) translateY(-50%);
  transform:scale(.5) translateY(-50%);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  display: none;
}
input[type=checkbox]:checked + label::after,
input[type=radio]:checked + label::after  {
  display: block;
}
/* ラベルが並ぶ場合 */
input[type="checkbox"] + label,
input[type="radio"] + label{
  margin-right: 20px;
}
/* ラベルが並ぶ場合(crasconavi) */
.wrapper-radio + .wrapper-radio {
  margin-left: 20px;
}

/* ラベルがない場合 */
.checkbox_wrap .label-none {
  padding: 0 0 0 16px; /* boxの幅分 */
}
/* ラジオボタンでタブを変更 */
.radio_wrap .tab-radio-nav {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: transparent;
  border: none;
  padding: 0;
  margin: -5px;
}
.radio_wrap .tab-radio-nav li {
  padding: 5px;
}
.radio_wrap .tab-cnt {
  width: 100%;
  margin: 15px 0;
}

/* エラーメッセージ */
.error_list {
  color: #f06;
  font: 300 10px/1em 'noto sans japanese';
  border: 1px dotted #f06;
  padding: 5px;
  margin: 10px 0 0;
}