@charset "utf-8";
/* ==========================================================================
   index.html に直接記述されていた CSS を集約したファイル
   ・上部: 元 <style> ブロック2つの内容
   ・下部: 元インライン style="" / <font> / <hr color> をクラス化したもの
   ※ 読み込みは他CSS（style/slide-down/adv）より後にすること
   ========================================================================== */

/* ---------- 元 <style> ブロック ---------- */
    .font-bold {
      font-weight: 700 !important;
    }

    #index_top {
      text-align: center;
    }

    #index_top #top_catch p.top_denchou {
      font-size: 150% !important;
      color: yellow !important;
    }

    #index_top #top_catch .top_midashi1 {
      font-size: 150%;
    }

    #index_top #top_catch .top_midashi2 {
      font-size: 250%;
      text-align: center;
    }

    #index_top #top_catch .top_midashi3 {
      font-size: 350%;
      text-align: center;
    }

    @media screen and (max-width: 640px) {
      #index_top #top_catch p.top_denchou {
        font-size: 120% !important;
        color: yellow !important;
      }

      #index_top #top_catch .top_midashi1 {
        font-size: 130%;
      }

      #index_top #top_catch .top_midashi2 {
        font-size: 200%;
      }

      #index_top #top_catch h2 .top_midashi3 {
        font-size: 250% !important;
      }

      .pc_only {
        display: none;
      }
    }

    .pick_up ul li a div {
      top: 27%;
    }

    .flex_box-box {
      background-color: #eee;
      /* 背景色指定 */
      padding: 10px;
      /* 余白指定 */
    }

    .flex_box-box {
      display: flex;
      /* フレックスボックスにする */
    }

    h3.bgwhite {
      padding: 5px;
      color: #000000 !important;
      /* 文字色 */
      margin: 10px;
      /* 外側の余白 */
      background: #fff;
      /* 角丸指定 */
    }

    h3.subtitle {
      padding: 5px;
      color: #000000 !important;
      /* 文字色 */
      margin: 10px;
      /* 外側の余白 */
      background: #fff;
      /* 角丸指定 */
    }

    .flex_box-item {
      padding: 5px;
      color: #fff;
      /* 文字色 */
      margin: 5px;
      /* 外側の余白 */
      border-radius: 5px;
      /* 角丸指定 */
      text-align: center;
    }

    .flex_box-item p {
      margin-right: 10px;
      margin-left: 10px;
      color: #FFF;
      /* 文字色 */
      text-align: left !important;
    }

    .flex_box-item:nth-child(1) {
      background-color: #2196F3;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(2) {
      background-color: #4CAF50;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(3) {
      background-color: #3F51B5;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(4) {
      background-color: #00BCD4;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(5) {
      background-color: #2196F3;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(6) {
      background-color: #4CAF50;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(7) {
      background-color: #3F51B5;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item:nth-child(8) {
      background-color: #00BCD4;
      /* 背景色指定 */
      width: 100%;
    }

    .flex_box-item h3 {
      color: #fff;
      border: none;
      text-align: center;
      padding-left: 10px;
    }

    .content h3::after {
      display: none;
    }

    @media screen and (max-width: 767px) {
      .flex_box-box {
        display: block;
        margin: 0 auto;
      }

      .flex_box-item {
        margin: 10px auto;
      }
    }

    .box_att {
      margin: 3em auto;
    }

    .box_right p {
      text-align: left;
    }

    .box_right h3,
    .box_left h3 {
      text-align: center;
    }

    figcaption {
      text-align: center;
    }

    .marker-yellow {
      background: linear-gradient(transparent 60%, #ffff00 0%);
    }

    .content h3 .font-large-bold {
      font-size: 200%;
      line-height: 30px;
      margin-bottom: 30px;
      padding: 0;
      position: relative;
      font-weight: 700;
      color: #1d6336;
      font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
      clear: both;
      letter-spacing: 0.05em;
    }

    .recommend ul {
      border: solid 2px skyblue;
      border-radius: 5px;
      padding: 0.5em 1em 0.5em 2.3em;
      position: relative;
    }

    .recommend ul li {
      line-height: 1.5em;
      padding: 1.1em;
      list-style-type: none !important;
      font-size: 130%;
      font-weight: 700;
    }

    .recommend ul li:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\f138";
      /*アイコンの種類*/
      /*アイコンの種類*/
      font-weight: 900;
      position: absolute;
      left: 1em;
      /*左端からのアイコンまでの距離*/
      color: skyblue;
      /*アイコン色*/

    }
  

    .g-recaptcha {
      margin-right: auto;
      margin-left: auto;
      text-align: center;
      width: 300px;
      margin-top: 20px;
    }

    #input1:valid {
      color: red;
    }

    #input1:invalid {
      background: LightGrey;
    }

    /* 以下モーダル部分 */
    .popup {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: .6s;
    }

    .popup.is-show {
      opacity: 1;
      visibility: visible;
    }

    .popup-inner {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 600px;
      max-height: 80%;
      overflow-x: scroll;
      padding: 50px;
      background-color: #fff;
      z-index: 2;
    }

    .popup-inner img {
      width: 100%;
    }

    .close-btn {
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }

    .close-btn i {
      font-size: 20px;
      color: #333;
    }

    .black-background {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .8);
      z-index: 1;
      cursor: pointer;
    }

/* =========================================================
   以下は index.html のインライン指定から抽出したクラス
   （元 style="" / <font> / <HR color> 相当）
   ========================================================= */

/* 元 style="" 属性 */
.c-white   { color: white; }
.lh-18     { line-height: 1.8; }
.shadow-7  { box-shadow: 7px 7px 10px; }
.ta-center { text-align: center; }
.fs-200    { font-size: 200%; }
.mb-50     { margin-bottom: 50px; }

/* 元 <font color> 相当 */
.fc-black  { color: black; }
.fc-gray   { color: gray; }
.fc-green  { color: green; }
.fc-red    { color: red; }
.fc-msg    { color: mediumseagreen; }
.font5     { font-size: x-large; }   /* 元 <font size="5"> 相当 */

/* 元 <HR color=mediumseagreen> 相当 */
hr.hr-msg  { border-color: mediumseagreen; color: mediumseagreen; }