@charset "UTF-8";

:root {
  /*キーカラー*/
  --keycolor: #B70000;
  /*キーカラーサブ*/
  --keycolor-sub: #d7000a;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  font-family: sans-serif;
  height: 100%;
  margin: 0 auto;
  max-width: 640px;
  padding: 0 0;
  width: 100%;
}

html {
  font-size: 62.5%;
}

body {
  -webkit-text-size-adjust: 100%;
  background: url(../img/title.png) #e7f4fa no-repeat top center / contain;
  color: #111;
  font-family: "Yu Gothic", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6,
p,
address,
ul, ol, li, dl,
dt, dd, table,
caption,
th, td,
img,
form {
  border: none;
  border-collapse: collapse;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

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

p {
  margin: 0;
}

img {
  border-style: none;
  vertical-align: bottom;
}

hr {
  display: none;
}

em {
  font-style: normal;
}

* html .CF {
  height: 1%;
}

*+html .CF {
  min-height: 1%;
}

.cf {
  display: block;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

input {
  line-height: normal;
  vertical-align: top;
}

textarea {
  font-size: 100%;
}

button,
input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a,
input,
textarea,
select {
  outline: none;
}

input,
textarea,
select {
  font-size: 1.6rem;
}

input[type="email"] {
  line-height: 2;
}

#personals input[type="tel"],
#personals input[type="email"],
#personals input[type="text"],
#personals textarea,
select {
  background: #fff;
  border: 2px solid #b9b9b9;
  box-shadow: none;
  box-sizing: border-box;
  padding: 0.5em;
}

select {
  height: 50px;
  width: 100%;
}

select::-ms-expand {
  display: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus {
  border-color: #ff0000 !important;
  outline: 0 none;
  background: #fddfe9 !important;
  color: #bf8f9d !important;
  animation-name: colorRandam;
  animation-duration: 1.42s;
  animation-iteration-count: infinite;
}

ul.t {
  display: table;
  width: 100%;
}

ul.t li.t {
  display: table-cell;
}

.centering {
  text-align: center;
}

.righting {
  text-align: right;
}

/*brak point*/
.max374 {
  display: none;
}

/*header*/
h1 {
  color: transparent;
  position: absolute;
}

article {
  overflow: hidden;
  position: relative;
  width: 100%;
}

#loader {
  background: #fff;
  border-radius: 20px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  padding: 10px;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 5;
}

#loader img {
  height: auto;
  width: 100%;
}

button {
  background: -moz-linear-gradient(top, #f39f01, #e85000);
  background: -webkit-linear-gradient(top, #f39f01, #e85000);
  background: linear-gradient(to bottom, #f39f01, #e85000);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.8em 0;
  position: relative;
  text-align: center;
  transition: 0.3s;
  width: 100%;
}

button:focus {
  outline-width: 0;
}

p.button {
  margin: 16px auto 0;
  width: 165px;
}

.col_form {
  position: relative;
}

.back {
  color: #333;
  display: inline-block;
  font-size: 1.2rem;
  left: 15px;
  position: absolute;
  top: 340px;
}

/*main contents*/
ul#articles {
  /*#space_countの高さ分*/
  margin-top: -30px;
  /*-36*/
}

li.space {
  float: left;
  padding-bottom: 40px;
}

li.col {
  float: left;
}

.question_1 {
  margin: 127px 0 0;
}

.question_2,.question_3 {
  margin: 95px 0 0;
}

section#space_answer {
  background: transparent;
  margin: 0 10px;
  min-height: 190px;
  padding: 20px 0 10px;
  position: relative;
}

@media screen and (min-width:400px){
  .question_1{
    margin: 137px 0;
  }
  .question_2,.question_3{
    105px 0 0;
  }
}

@media screen and (min-width:640px) {
  .question_1 {
    margin: 190px 0 0;
  }

  .question_2,.question_3 {
    margin: 160px 0 0;
  }
}

/*ページャー（あと○つ）*/
#space_count {
  background: #fff;
  border-radius: 5px 5px 0 0;
  height: 30px;
  left: 0;
  margin: auto auto auto 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 70px;
  z-index: 2;
}

#space_count ul {
  width: 210px;
}

#space_count li {
  color: #111;
  float: left;
  font-size: 14px;
  /*1.5rem*/
  font-weight: 700;
  line-height: 1;
  padding: 5px 3px;
  text-align: center;
  white-space: nowrap;
  width: 70px;
}

#space_count em {
  color: #111;
  font-weight: 700;
}

#space_count em span {
  color: var(--keycolor-sub);
  font-size: 20px;
  /*2.4rem*/
}

div.contents_wrapper {
  padding: 0 0 20px;
  position: relative;
  z-index: 0;
}

/* --------------------
質問文
-------------------- */
.title {
  background: #fff;
  border-radius: 0 5px 5px 5px;
  font-size: 1.6rem;
  margin: 0;
  overflow: hidden;
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.title ul li {
  float: left;
  font-weight: bold;
  height: 100%;
  overflow: hidden;
}

.title ul li .icon_q {
  display: inline-block;
  line-height: 1.5;
  text-align: left;
  padding: 13px 15px 13px 40px;
  position: relative;
}

.title ul li .icon_q:before {
  background: url(../img/icon_q.png) top center/contain no-repeat;
  content: '';
  height: 32px;
  overflow: hidden;
  vertical-align: text-bottom;
  width: 24px;
  margin: 0 5px 0 3px;
  position: absolute;
  left: 0;
}

#spece_contents {
  background: #fff;
  border-radius: 5px;
  margin: 10px 0 0 0;
  padding: 0 5px;
  height: 320px;
}

/* --------------------
チェックボックス
-------------------- */
.item_input_checkbox {
  display: block;
  font-weight: bold;
  margin: 30px 32px;
}

.item_input_checkbox:nth-of-type(2) {
  margin: 40px 32px;
}

.item_input_checkbox input[type="checkbox"] {
  display: none;
}

.item_input_checkbox input[type="checkbox"]+label {
  display: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  padding-right: 10px;
}

.item_input_checkbox input[type="checkbox"]+label::before {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  left: 0;
  top: 50%;
  border: 2px solid #b9b9b9;
  background-color: #fff;
}

.item_input_checkbox-click input[type="checkbox"]+label::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 9px;
  margin-top: -9px;
  top: 50%;
  left: 3px;
  transform: rotate(-45deg);
  border-bottom: 3px solid;
  border-left: 3px solid;
  border-color: #000;
}

.item_input_checkbox input {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

/* --------------------
入力フォーム
-------------------- */
.col_form input {
  background: #fff;
  border: 2px solid #b9b9b9;
  display: inline-block;
  font-size: 1.8rem;
  padding: 0.8em 1em;
  width: 80%;
  margin: 0 5px 0 0;
  height: 50px;
}

.col_form .form_content {
  margin: 25px 32px;
}

.col_form .form_content .content_item:nth-child(n+2) {
  margin: 20px 0 0;
}

.col_form .form_content .content_item .item_name {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 14px;
}

.col_form .form_content .content_item .item_input {
  display: flex;
  align-items: center;
}

.col_form .form_content .content_item .item_input_answer {
  display: flex;
  align-items: center;
  width: 70%;
}

.col_form .form_content .content_item .item_input_answer .item_input_answer_text {
  display: inline-block;
  font-weight: bold;
}

.col_form .form_content .content_item .item_input_checkbox {
  display: inline-block;
  font-weight: bold;
  margin: 0;
}

.col_form .form_content .content_item .item_input select {
  background: url(../img/icon_arrow.png) calc(100% - 18px) center/18px 9px no-repeat;
}

.col_form-address .form_content .content_item .item_input .item_input_answer {
  width: 100%;
}

.col_form-address .form_content .content_item .item_input .item_input_answer input {
  width: 100%;
}

.col_form button {
  width: 165px;
  height: 50px;
  margin: 0 auto;
  position: absolute;
  top: 233px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.col_form button:focus,
.col_form button:active,
.col_form button:hover {
  background: var(--keycolor);
  color: #fff;
  transition: 0s;
}

#number_input {
  margin: 12px 5px 0 45px;
}

#number_input span {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 5px 3px;
  vertical-align: bottom;
}

#number_input em {
  align-items: center;
  display: flex;
  font-weight: 700;
  justify-content: center;
  margin: 0 3em 0.5em 0;
  text-align: center;
}

/* --------------------
個人情報入力
-------------------- */
#personals {
  background: #fff;
  border-radius: 5px;
  margin: 35px 10px 0 10px;
  min-height: 230px;
  padding: 0 0 20px;
  position: relative;
  z-index: 1;
}

#personals .personals_txt{
  margin: 0px 15px;
  font-size: 14px;
  color: #f00;
  padding: 20px 0 0;
  line-height: 1.3;
  text-align: center;
}

#personals dl {
  font-size: 1.6rem;
  margin: 0 15px;
  padding: 1px 0 6px;
}

#personals dt {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 0;
}

#personals dt span {
  font-size: 1.4rem;
  background: #eee;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0 0 0 5px;
}

#personals dd {
  margin: 0.4em 0 0;
}

#personals dd.tel {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

#personals dd.tel span {
  font-size: 3.2rem;
}

#personals dd.tel input {
  height: 50px;
  vertical-align: baseline;
  text-align: center;
}

#personals input[type="tel"],
.tel .select_box {
  width: 27%;
}

#personals input[type="email"],
#personals input[type="text"] {
  height: 50px;
  width: 100%;
}

#personals textarea {
  height: 60px;
  width: 100%;
}

#personals .infomation_text {
  font-size: 1.2rem;
  margin: 15px;
  line-height: 1.5;
}

#personals .infomation_text-check {
  margin: 0 15px;
  text-align: center;
}

#personals .infomation_text-check input {
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

#personals .infomation_text-check .approve_text a {
  border-bottom: 1px solid;
}

@media screen and (min-width:640px) {
  #personals .pc_hide{
    display: none;
  }

  #personals .infomation_text {
    text-align: center;
  }

  #personals dd.tel {
    justify-content: start;
  }

  #personals dd.tel input {
    margin: 0 10px 0 0;
  }

  #personals dd.tel input:nth-of-type(n+2) {
    margin: 0 10px 0 10px;
  }
}


/* --------------------
LINE
-------------------- */
#linePage {
  background: #fff;
  border-radius: 5px;
  margin: 20px 0 10px;
  min-height: 230px;
  padding: 0 0 20px;
  position: relative;
  z-index: 1;
}

.linePage_img {
  padding: 20px 20px;
}

img {
  width: 100%;
  height: auto;
}

/* --------------------
送信ボタン
-------------------- */
#personals .button {
  margin: 0 15px;
  padding: 24px 0 0;
  width: auto;
}

#personals .button #submit {
  height: 460px;
}

.before {
  background: url(../img/button_1.gif) top center/ 100% no-repeat;
  border-radius: 0;
}

.after {
  background: url(../img/button_2.png) top center/ 100% no-repeat;
  border-radius: 0;
}

@media screen and (min-width:400px) {
  #personals .button #submit{
    height: 510px;
  }
}

@media screen and (min-width:640px) {
  #personals .button {
    width: 53%;
    margin: 10px auto 0;
  }

  #personals .button #submit {
    height: 470px;
  }
}

/*div.footer*/
div.footer {
  margin: 20px auto 0;
  width: 100%;
  text-align: center;
  padding-bottom: 15px;
}

div.footer p {
  display: inline-block;
  padding: 0 5px;
}

div.footer p a {
  color: #333;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
}

/*thanksページ*/
body.thanks header p.o_name {
  margin: 0;
}

.thanks article {
  background: none;
}

.thanks .comment_space {
  background: #fff;
  border-radius: 5px;
  margin: 100px 10px 15px;
  padding: 20px 10px 35px;
  position: relative;
}

.thanks .title_thanks {
  display: block;
  font-size: 4vw;
  font-weight: 700;
  margin: 0;
  text-align: center;
  border-bottom: 2px solid #ddd;
  padding: 0 0 20px;
}

.thanks .comment_space p {
  margin: 1em 0 0 0;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
  color: #040f40;
}

.thanks .comment_space .thanks_txt{
  color: #fe0000;
  line-height: 1.8;
}

.thanks .comment_space .thanks_txt-2{
  margin: 0;
}

.thanks .comment_space .thanks_txt-3{
  font-size: 14px;
}

.thanks .thanks_txt span{
  background:linear-gradient(transparent 60%, #ff0 60%);
}

.thanks .comment_space .number{
  font-size: 30px;
  margin: 10px 0 0;
}

.thanks .comment_space .number-2{
  margin: 0;
}

.thanks .comment_space .number::before{
  content: "";
  display: inline-block;
  background: url(../img/tel.png) top center/100%;
  width: 30px;
  height: 30px;
  margin: 0 5px 0 0;
}

.thanks .jost{
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 640px){
  .thanks .title_thanks{
    font-size: 20px;
  }
  .thanks .comment_space{
    margin:160px 10px 15px;
  }
  .thanks .comment_space p{
    font-size: 20px;
  }
  .thanks .comment_space .thanks_txt-3{
    font-size: 18px;
  }
  .thanks .comment_space .number{
    font-size: 40px;
  }
}

/*法テラス*/
#no_office {
  background: #fff;
  border-radius: 5px;
  margin: 15px 10px 0 10px;
  min-height: 230px;
  padding: 10px 0 20px 0;
  position: relative;
}

#no_office p {
  line-height: 1.5;
  margin: 1em 15px;
  text-align: center;
}

#no_office .logo {
  margin: 20px 40px;
}

#no_office .logo img {
  max-width: 100%;
}

#no_office .note {
  background: transparent;
  font-size: 1.2rem;
  width: auto;
}

/*error*/
.error .comment_space {
  background: #fff;
  border-radius: 5px;
  margin: 15px 10px;
  min-height: 230px;
  padding: 10px 10px 20px;
  position: relative;
}

.error_title {
  font-size: 2rem;
  font-weight: 700;
  margin: 1em 0;
  text-align: center;
}

.error_text {
  color: #c30;
  font-weight: 700;
  text-align: center;
}

@media screen and (min-width: 640px) {
  .thanks_call_num {
    font-size: 3vw;
  }
}

@media screen and (max-width: 374px) {
  .max374 {
    display: block;
  }
}

.bold{font-weight:bold;}
div.holidays{
  border:2px solid #95dddd;
  border-radius:5px;
  margin-top:30px;
  padding:10px 15px 25px;
}
div.holidays h3{
  color:#ef1038;
  font-size:38px;
  font-size:3.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:900;
  line-height:1.5;
  margin:20px auto 0;
  text-align:center;
}
article#article_thanks div.holidays p{
  font-size:16px;
  font-size:1.6rem;
  line-height:1.6;
  margin:10px auto 0;
  width:100%;
  text-align:center;
}
article#article_thanks div.holidays div.day{
  margin-top:10px;
  text-align:center;
}
article#article_thanks div.holidays div.day ul{
  background:#33bdbf;
  border-radius:5px;
  display:inline-block;
  padding:5px 30px 15px;
}
article#article_thanks div.holidays div.day ul li{
  color:#fff;
  display:inline-block;
  font-size:26px;
  font-size:2.6rem;
  font-weight:bold;
  line-height:1.6;
  margin:0;
  vertical-align:bottom;
}
article#article_thanks div.holidays div.day ul li span{
  font-size:16px;
  font-size:1.6rem;
  font-weight:bold;
}
@media screen and (max-width: 640px){
  div.holidays{
    padding:5px 10px 20px;
  }
  div.holidays h3{
    font-size:22px;
    font-size:2.2rem;
  }
  article#article_thanks div.holidays p{
    font-size:14px;
    font-size:1.4rem;
  }
  article#article_thanks div.holidays p.center{
    text-align:center;
  }
  article#article_thanks div.holidays div.day ul{
    padding:3px 10px 13px;
  }
  article#article_thanks div.holidays div.day ul li{
    font-size:18px;
    font-size:1.8rem;
    line-height:1.4;
  }
  article#article_thanks div.holidays div.day ul li span{
    font-size:14px;
    font-size:1.4rem;
  }
}
@media screen and (max-width:370px) {
  article#article_thanks div.holidays div.day ul li{
    font-size:15px;
    font-size:1.5rem;
  }
}