@charset "UTF-8";

/*-----------------------------------------------------------------------------
　各ページごとに設定するコンテンツのスタイル
（このCSSが一番最後に読み込まれる）
-----------------------------------------------------------------------------*/

/*------ 並び箱高さ100％ -----*/
.height-100 {
  height: 100% !important;
}

.height-100 .smb-box__body {
  height: 100%;
}


/*------ テーブル　スマホ幅 -----*/
@media screen and (min-width: 782px) and (max-width: 1024px) {
  table {
    width: 100%;
  }
  table tr td {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
  }

  table tr td:first-child {
    border-bottom: none;
    background: #f5f5f5;
  }
}


@media screen and (max-width: 630px) {
  table {
    width: 100%;
  }
  table tr td {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
  }

  table tr td:first-child {
    border-bottom: none;
    background: #f5f5f5;
  }
}


/*==================== 1.ホームページ ====================*/

/* =======================================
　リード文
======================================= */

/*------ リードアウター -----*/
#top-lead {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

#top-lead .top-lead-text-box {
  padding: 36px !important;
}

@media screen and (max-width: 630px) {
  #top-lead .top-lead-text-box {
  padding: 16px !important;
}
}

/* =======================================
　サービス
======================================= */

/*------ サービスボックス -----*/

.service-box.height-100 {
  height: 100% !important;
}

.service-box.height-100 .smb-box__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-box.height-100 .wp-block-snow-monkey-blocks-buttons {
  margin-top: auto;
}


.service-box.instructor .wp-block-snow-monkey-blocks-btn .smb-btn {
  background: #2f5236 !important;
}


.service-box.inquiry .wp-block-snow-monkey-blocks-btn .smb-btn {
  background: var(--color-accent01) !important;
}



/* =======================================
　ブログ新着一覧
======================================= */

/*------ ブログリスト -----*/
.top-blog .wp-block-query ul li {
  border-bottom: 1px dashed #ccc;
  padding: 2rem 4rem;
}

.top-blog .wp-block-query ul li > div {
  align-items: baseline !important;
}

.top-blog .wp-block-query ul li time {
  margin-right: 2rem;
}

.top-blog .wp-block-query ul li time a {
  text-decoration: none !important;
  color: var(--color-bk) !important;
}

.top-blog .wp-block-query ul li h3 a {
  text-decoration: none !important;
  color: var(--color-bk) !important;
  font-size: 16px !important;
  font-weight: normal !important;
}




/*==================== 2.お見積り・お問い合わせ ====================*/

/* =======================================
　フォーム
======================================= */

.contact-form-outer dl {
  margin-bottom: 2rem;
}

/*------ テキスト入力欄 -----*/
input, textarea {
  width: 100%;
  border: 1px solid #cdd6dd;
  background: #fff;
  padding: 1rem;
}

select {
  width: auto;
  border: 1px solid #cdd6dd;
  background: #fff;
  padding: 1rem;
}

input[type="checkbox"] {
  width: auto;
}

input.schedule.hasDatepicker {
  z-index: 1;
  position: relative;
  width: 280px;
}


.contact-form-outer .button {
  display: flex;
}

.contact-form-outer .button input[name="submitConfirm"] {
  background: var(--color-accent01);
  color: #fff !important;
  border: 1px solid var(--color-accent01);
  padding: 0.6rem 2rem;
}

.contact-form-outer .button input[name="submitBack"] {
  background: #fff;
  color: var(--color-accent01) !important;
  border: 1px solid var(--color-accent01);
  padding: 0.6rem 2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  min-width: 106px;
  box-sizing: border-box;
}

.contact-form-outer .button input[name="submit"] {
  background: var(--color-accent01);
  color: #fff !important;
  border: 1px solid var(--color-accent01);
  padding: 0.6rem 2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

body.contact h3,
body.inquiry h3 {
  padding: 8px 16px;
  position: relative;
  border-left: none;
  margin-bottom: 1rem !important;
  margin-top: 2rem;
}

body.contact h3:before,
body.inquiry h3:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent01);
}