@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque&family=Klee+One:wght@600&family=Lobster&family=M+PLUS+2:wght@500;600;800;900&display=swap');

/* =============================================
  共通部分
============================================= */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; }

body {
  width: 100%;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: "M PLUS 2", sans-serif;
  color: #000000;
  min-width: 1260px;
  overflow: hidden; }
  @media only screen and (max-width: 767px) {
    body {
      font-size: calc(16/375*100vw); /* 375px(100%)の時16px */
      min-width: 100%;
      overflow: visible; } }

img {
  vertical-align: top; }

a {
  text-decoration: none; }

a.txt { 
  text-decoration: underline;
  color: #0033cc;}

a.txt:hover { 
  opacity: 0.7;
  text-decoration: none;}
  @media only screen and (max-width: 767px) {
    a.txt:hover {
      opacity: 1; } }


.pc_item {
  display: block; }
  @media only screen and (max-width: 767px) {
    .pc_item {
      display: none; } }

.sp_item {
  display: none; }
  @media only screen and (max-width: 767px) {
    .sp_item {
      display: block; } }

.tab_item {
  display: block !important; }
  @media only screen and (max-width: 960px) {
    .tab_item {
      display: none !important; } }

/* .bg-gray {
  background: url(../img/bg_gray.jpg); } */

.bg-blueimg {
  background: url(../img/line-bg.webp) repeat-x left bottom; }
  @media only screen and (max-width: 767px) {
    .bg-blueimg {
      background: url(../img/title-bg_sp.webp) #fff no-repeat left top;
      background-size: 100%; }}

.bg-blue {
  background-color: #006bb8; }

.bg-lightblue {
  background-color: #2fa0df; }
  
.bg-white {
  background-color: #fff; }

.txt-blue {
  color: #006bb8; }

.txt-white {
  color: #fff; }


.ttl .ttl-inner {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.24;
  color: #006bb8;
  display: inline-block;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .ttl .ttl-inner {
      font-size: calc(22/375*100vw);
      line-height: 1.24; }}
    

/* セクションタイトル
-------------------------- */
/* .sec-ttl {
  margin: 0 auto; }
  .sec-ttl .sec-ttl-inner {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 10px 10px 30px; }
    @media only screen and (max-width: 767px) {
      .sec-ttl .sec-ttl-inner {
        padding: calc(5/375*100vw) calc(10/375*100vw) calc(10/375*100vw); } }
    .sec-ttl .sec-ttl-inner::before, .sec-ttl .sec-ttl-inner::after {
      position: absolute;
      content: "";
      display: inline-block;
      width: 34px;
      height: 34px; }
      @media only screen and (max-width: 767px) {
        .sec-ttl .sec-ttl-inner::before, .sec-ttl .sec-ttl-inner::after {
          width: calc(12/375*100vw);
          height: calc(12/375*100vw); } }
    .sec-ttl .sec-ttl-inner::before {
      border-top: 5px solid #e6001b;
      border-left: 5px solid #e6001b;
      top: 0;
      left: 0; }
      @media only screen and (max-width: 767px) {
        .sec-ttl .sec-ttl-inner::before {
          border-top: 2px solid #e6001b;
          border-left: 2px solid #e6001b; } }
    .sec-ttl .sec-ttl-inner::after {
      border-top: 5px solid #e6001b;
      border-right: 5px solid #e6001b;
      top: 0;
      right: 0; }
      @media only screen and (max-width: 767px) {
        .sec-ttl .sec-ttl-inner::after {
          border-top: 2px solid #e6001b;
          border-right: 2px solid #e6001b; } }
    .sec-ttl .sec-ttl-inner .sub {
      font-size: 4.4rem;
      letter-spacing: 0.05em; }
      @media only screen and (max-width: 767px) {
        .sec-ttl .sec-ttl-inner .sub {
          font-size: calc(17/375*100vw); } }
    .sec-ttl .sec-ttl-inner .ttl {
      margin-top: 0.3em;
      font-size: 6rem;
      font-weight: 900;
      font-style: italic;
      letter-spacing: 0.05em;
      line-height: 1.3; }
      @media only screen and (max-width: 767px) {
        .sec-ttl .sec-ttl-inner .ttl {
          margin-top: 0.2em;
          font-size: calc(29/375*100vw); } }
      .sec-ttl .sec-ttl-inner .ttl::before, .sec-ttl .sec-ttl-inner .ttl::after {
        position: absolute;
        content: "";
        display: inline-block;
        width: 34px;
        height: 34px; }
        @media only screen and (max-width: 767px) {
          .sec-ttl .sec-ttl-inner .ttl::before, .sec-ttl .sec-ttl-inner .ttl::after {
            width: calc(12/375*100vw);
            height: calc(12/375*100vw); } }
      .sec-ttl .sec-ttl-inner .ttl::before {
        border-left: 5px solid #e6001b;
        border-bottom: 5px solid #e6001b;
        bottom: 0;
        left: 0; }
        @media only screen and (max-width: 767px) {
          .sec-ttl .sec-ttl-inner .ttl::before {
            border-left: 2px solid #e6001b;
            border-bottom: 2px solid #e6001b; } }
      .sec-ttl .sec-ttl-inner .ttl::after {
        border-bottom: 5px solid #e6001b;
        border-right: 5px solid #e6001b;
        bottom: 0;
        right: 0; }
        @media only screen and (max-width: 767px) {
          .sec-ttl .sec-ttl-inner .ttl::after {
            border-bottom: 2px solid #e6001b;
            border-right: 2px solid #e6001b; } } */

/* =============================================
　　ヘッダー
============================================= */
header .lead-top {
  background: url(../img/title-bg.webp) #2fa0df;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  /* margin-top: -300px; */
  padding: 0; /* 300px 0 50px */ }
  @media only screen and (max-width: 767px) {
    header .lead-top {
      background: none;
       } }
  header .lead-top .lead-txt-area {
  }
header .lead-txt-area {
    margin: 0 auto;
    padding: 20px 0 60px;
    background: url(../img/title-bglight.webp) no-repeat top center;
    position: relative;
    z-index: 3;}
    @media only screen and (max-width: 767px) {
      header .lead-txt-area {
        background: none;
        width: 100%;
        padding:  calc(17/375*100vw) calc(17/375*100vw) 0; } }
  header .lead-txt-area .area-inner {
    width: 880px;
    margin: 0 auto;
    padding: 0 30px 0;}
    @media only screen and (max-width: 767px) {
      header .lead-txt-area .area-inner {
        width: 100%;
        padding: 0; } }
  header .lead-txt-area .area-inner ul.sns-link {
    list-style: none;
    max-width: 120px;
    margin: 0 223px 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1; }
    @media only screen and (max-width: 767px) {
      header .lead-txt-area .area-inner ul.sns-link {
        margin: 0 0 0 auto; }}

    header .lead-txt-area .area-inner ul.sns-link li {
      width: 30px;
    }
    header .lead-txt-area .area-inner ul.sns-link li.btn a:hover {
      opacity: 0.7; }
  header .lead-txt-area .lead-img {
    position: relative; }
    @media only screen and (max-width: 767px) {
      header .lead-txt-area .lead-img {
        margin-top: calc(17/375*100vw); } }
        header .lead-txt-area .lead-img .lead-img-inner-left {
          position: relative; }
        @media only screen and (max-width: 767px) {
        header .lead-txt-area .lead-img .lead-img-inner-left {
          margin-bottom: calc(17/375*100vw); } }
        header .lead-txt-area .lead-img .lead-img-inner-right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        position: absolute;
        top: -40px;
        right: 20px;}
        @media only screen and (max-width: 767px) {
          header .lead-txt-area .lead-img .lead-img-inner-right {
            position: relative;
            justify-content: flex-end;
            top: 10px;
            right: 0;} }
        header .lead-txt-area .lead-img .lead-img-inner-right .item.dra {
          max-width: 160px;
          padding-bottom: 30px;
          }
          @media only screen and (max-width: 767px) {
            header .lead-txt-area .lead-img .lead-img-inner-right .item.dra {
              max-width: 351px;
              width: calc(170/375*100vw);
              margin-right: calc(20/375*100vw);
              padding-bottom: 6px;
              }}

        header .lead-txt-area .lead-img .lead-img-inner-right .item.sp_sample {
          max-width: 148px; }
          @media only screen and (max-width: 767px) {
            header .lead-txt-area .lead-img .lead-img-inner-right .item.sp_sample {
              max-width: 226px;
              width: calc(113/375*100vw);
              margin-right: calc(20/375*100vw); }}

header .lead-bottom {
  width: 880px;
  margin: 0 auto;
  padding: 0 20px 40px;
  position: relative;
  z-index: 0;}
  @media only screen and (max-width: 767px) {
    header .lead-bottom {
      flex-direction: column-reverse;
      align-items: center;
      width: 100%;
      /* margin: calc(-140/375*100vw) auto 0; */
      padding: 0 calc(17/375*100vw) calc(34/375*100vw); } }
header .top-subsc-btn {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  padding: 25px 0 15px;
  border-radius: 15px;
  margin: 0; }
  @media only screen and (max-width: 767px) {
    header .top-subsc-btn {
      width: 100%;
      padding: calc(14/375*100vw) calc(5/375*100vw) calc(15/375*100vw);
      border-radius: 14px;
      /* margin: calc(-100/375*100vw) 0 calc(18/375*100vw); */
      z-index: 5; } }
  header .top-subsc-btn .ttl {
    position: relative;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      header .top-subsc-btn .ttl .ttl-inner {
        font-size: calc(18/375*100vw);
        }}
        header .top-subsc-btn .ttl .ttl-inner::before {
          position: absolute;
          content: "";
          background-image: url(../img/ttl-style-img01.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 38px;
          height: 26px;
          top: 0;
          left: -50px; }
          @media only screen and (max-width: 767px) {
            header .top-subsc-btn .ttl .ttl-inner::before {
              top: calc(10/375*100vw); } }


        header .top-subsc-btn .ttl .ttl-inner::after {
          position: absolute;
          content: "";
          background-image: url(../img/ttl-style-img01.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 38px;
          height: 26px;
          top: 0;
          right: -50px;
          transform: scale(-1, 1); }
          @media only screen and (max-width: 767px) {
            header .top-subsc-btn .ttl .ttl-inner::after {
              top: calc(10/375*100vw); } }

  header .top-subsc-btn .subsc-btn {
    width: 715px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between; }
  header .top-subsc-btn .subsc-btn.col1 {
    justify-content: center; }
    @media only screen and (max-width: 767px) {
      header .top-subsc-btn .subsc-btn {
        width: 100%;
        margin-top: calc(5/375*100vw); }
       }
    header .top-subsc-btn .subsc-btn .btn {
      width: 345px; }
      @media only screen and (max-width: 767px) {
        header .top-subsc-btn .subsc-btn .btn {
          width: calc(170/375*100vw);
          padding: 0 calc(5/375*100vw); }
        header .top-subsc-btn .subsc-btn.col1 .btn {
          width: calc(375/375*100vw);
          padding: 0 calc(0/375*100vw); }
        }

      header .top-subsc-btn .subsc-btn .btn a {
        /* width: 345px; */
        display: block;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 15px 40px; }
        @media only screen and (max-width: 767px) {
          header .top-subsc-btn .subsc-btn .btn a {
            margin: 0 auto;
            width: calc(250/375*100vw);
            padding: calc(10/375*100vw) calc(10/375*100vw); }
          }

          header .top-subsc-btn .subsc-btn .btn a.txt {
            display: inline;
            color: #0033cc;
            padding: 0; }
  
          header .top-subsc-btn .subsc-btn .btn a:hover {
            opacity: .7; }
            @media only screen and (max-width: 767px) {
              header .top-subsc-btn .subsc-btn .btn a:hover {
                opacity: 1; }}


        header .top-subsc-btn .subsc-btn .btn a.bgColor01 {
          background-color: #ff7a0d; }
        header .top-subsc-btn .subsc-btn .btn a.bgColor02 {
          background-color: #006bb8; }
            header .top-subsc-btn .subsc-btn .btn a h2 {
              font-size: 2rem;
              border-bottom: 1px solid #fff;
              padding: 0 0 10px; }
              @media only screen and (max-width: 767px) {
                header .top-subsc-btn .subsc-btn .btn a h2 {
                  font-size: calc(13/375*100vw);
                  padding: 0 0 calc(5/375*100vw);
                  line-height: calc(22/375*100vw); }
              }

            header .top-subsc-btn .subsc-btn .btn a h2 .waku { }
              @media only screen and (max-width: 767px) {
                header .top-subsc-btn .subsc-btn .btn a h2 .waku {
                  border: 1px solid #Fff;
                  padding: calc(2/375*100vw) calc(10/375*100vw);}}

            header .top-subsc-btn .subsc-btn .btn a p {
              font-size: 2rem;
              line-height: 1.25;
              padding-top: 10px; }
              @media only screen and (max-width: 767px) {
                header .top-subsc-btn .subsc-btn .btn a p {
                  font-size: calc(10/375*100vw);
                  padding: calc(5/375*100vw) 0;}}
                  @media only screen and (max-width: 767px) {
                    header .top-subsc-btn .subsc-btn .btn a p .b {
                      font-size: calc(14/375*100vw);
                      padding: 0 calc(2/375*100vw);}}

                  header .top-subsc-btn .subsc-btn .btn a p .pc_item {
              display: inline-block; }
              @media only screen and (max-width: 767px) {
                header .top-subsc-btn .subsc-btn .btn a p .pc_item {
                  display: none; }}
    

  header .top-subsc-btn .subsc-btn .btn p.attention {
    padding-top: 10px; }
    @media only screen and (max-width: 767px) {
      header .top-subsc-btn .subsc-btn .btn p.attention {
        font-size: 1.2rem;
        padding-top: 10px; }
      }
        
  header .top-subsc-btn .presents_kikaku p {
    max-width: 515px;
    text-align: center;
    margin: 15px auto;
    padding: 10px 5px;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: bold;
    color: #ff66cc;
    border-top: 1px solid #ff66cc;
    border-bottom: 1px solid #ff66cc;
    }
    @media only screen and (max-width: 767px) {
      header .top-subsc-btn .presents_kikaku p {
    width: calc(290 / 375 * 100vw);
    padding: calc(10 / 375 * 100vw) calc(10 / 375 * 100vw);
    margin: 20px auto 0;
}    
      }
    header .top-subsc-btn .presents_kikaku p .em {
      font-size: 2.5rem;
      font-weight: bold;
      }
      @media only screen and (max-width: 767px) {
        header .top-subsc-btn .presents_kikaku p .em {
    font-size: 1.8rem;
}    
        }


/* =============================================
　　トーチュウ電子版とは
============================================= */

.about_app {
  padding: 0;
  position: relative;
  z-index: 0;}
  .about_app .about_app-area {
    width: 880px;
    margin: 0 auto;
    padding: 0 30px 40px;
    position: relative;}
    @media only screen and (max-width: 767px) {
      .about_app .about_app-area {
        width: 100%;
        padding: calc(17/375*100vw)  calc(17/375*100vw);
      }}
    .about_app .about_app-area .area-inner {
      width: 580px;
      margin: 0 auto;
      padding: 0 20px 15px;
      position: relative;
      border: solid 2px #006bb8;
      }
      @media only screen and (max-width: 767px) {
        .about_app .about_app-area .area-inner {
          width: 100%;
          padding: 0 calc(17/375*100vw)  calc(17/375*100vw);}}
        .about_app .about_app-area .area-inner::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: -8px;
        right: -8px;
        left: 6px;
        border: solid 2px #2fa0df;
        z-index: -1; }
        .about_app .about_app-area .area-inner .ttl {
          position: relative;
          text-align: center;
          top: -10px; }
          .about_app .about_app-area .area-inner .ttl .ttl-inner {
            color: #000;
            font-size: 2.4rem;
            background-color: #fff;
            padding: 0 10px; }
      .about_app .about_app-area .area-inner .about_app-txt {
        font-family: "Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
        font-size: 1.6rem;
        line-height: 1.5;
        text-align: left;
        /* margin-left: 10px; */
        }
        @media only screen and (max-width: 767px) {
          .about_app .about_app-area .area-inner .about_app-txt {
            line-height: 1.35;}}
      

        .about_app .about_app-area .area-inner .about_app-txt .txt-blue {
          font-weight: bold;}

/* =============================================
　　トーチュウ電子版はこんなに便利
============================================= */
.useful {
  padding: 0;
  position: relative;
  z-index: 0;}
  .useful .useful-area {
    width: 880px;
    margin: 0 auto;
    padding: 35px 24px 40px;
    position: relative;}
    @media only screen and (max-width: 767px) {
    .useful .useful-area {
        width: 100%;
        margin: 0;
        padding: calc(37/375*100vw)  calc(17/375*100vw)  calc(37/375*100vw);
        position: relative; }}


    .useful .useful-area .ttl {
      position: relative;
      text-align: center;
      margin-bottom: 20px;}
      .useful .useful-area .ttl .ttl-inner {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 700;
        padding-bottom: 5px;
        border-bottom: 3px dotted #fffa57; }
        @media only screen and (max-width: 767px) {
          .useful .useful-area .ttl .ttl-inner {
            margin-right: 35px; }
        }
        .useful .useful-area .ttl .ttl-inner span.italic {
          font-size: 2.4rem;
          font-weight: 600;
          font-style: italic;
          position: relative;
          left: -5px;}
        .useful .useful-area .ttl .ttl-inner::before {
          position: absolute;
          content: "";
          background-image: url(../img/ttl-style-img02.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 34px;
          height: 31px;
          top: -15px;
          left: -45px; }
        .useful .useful-area .ttl .ttl-inner::after {
          position: absolute;
          content: "";
          background-image: url(../img/doara26_img02.png);
          background-repeat: no-repeat;
          background-size: contain;
          width: 87px;
          height: 57px;
          top: -10px;
          right: -90px; }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .ttl .ttl-inner::after {
              width: 75px;
              height: 49px;
              top: 7px;
              right: -79px;}
          }  
      .useful .useful-area .inner {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
        @media only screen and (max-width: 767px) {
          .useful .useful-area .inner {
            width: 100%;
            flex-wrap: nowrap;
            flex-direction: column; } 
        }
        .useful .useful-area .inner .item {
          position: relative;
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 33.33%;
          margin: 0;
          padding: 20px 15px 25px 15px;
          border-radius: 10px;
          background-color: #fff;
          flex: 0 0 calc(50% - 10px / 2);
        }
        .useful .useful-area .inner .item:nth-child(odd):last-child {
          flex: 0 0 100%;
        }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item {
              width: 100%;
              margin: 0;
              padding: calc(10/375*100vw) calc(10/375*100vw) calc(25/375*100vw);
              /* margin-bottom: calc(0/375*100vw); */
              }
          }
          .useful .useful-area .inner .item figure {
            position: absolute;
            top: 16px;
            left: 16px;
            text-align: left;
            width: 44px;
            height: 58px;
            display: flex;
            align-items: center;
          }
          .useful .useful-area .inner .item.pen figure {
            width: 48px;
          }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item figure {
              width: auto;
              height: auto;
              /* position: absolute; */
              top: calc(17/375*100vw);
              left: calc(17/375*100vw);
              /* text-align: left; */
            }
          }
            .useful .useful-area .inner .item figure img {
              width: 100%;
              /* max-width: 51px; */
            }
            @media only screen and (max-width: 767px) {
              .useful .useful-area .inner .item figure img {
                width: calc(37/375*100vw);
                max-width: 60px;
              }
            }
            @media only screen and (max-width: 767px) {
              .useful .useful-area .inner .item.viewer figure img {
                max-width: 46px; }
              .useful .useful-area .inner .item.bn figure img {
                width: calc(42/375*100vw);}
              .useful .useful-area .inner .item.sc figure img {
                width: calc(44/375*100vw);}
              .useful .useful-area .inner .item.pen figure img {
                width: calc(47/375*100vw);}
              }
          .useful .useful-area .inner .item h3 {
            font-weight: 800;
            font-size: 2rem;
            line-height: 1.35;
            color: #006bb8;
            /* margin-bottom: 15px; */
            /* text-align: center; */
            width: 100%;
            padding-left: 55px;
            margin: 10px 0 0 0;
            text-align: left;
          }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item h3 {
              width: 100%;
              font-size: calc(18/375*100vw);
              padding-left: calc(60/375*100vw);
              margin: calc(10/375*100vw) 0 calc(20/375*100vw);
              /* text-align: left;  */
            }
          }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item.viewer h3 {
              margin: calc(15/375*100vw) 0 calc(25/375*100vw) }}
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item.bn h3 {
              margin: calc(15/375*100vw) 0 calc(15/375*100vw) }}
              @media only screen and (max-width: 767px) {
                .useful .useful-area .inner .item.sc h3 {
                  margin: calc(15/375*100vw) 0 calc(15/375*100vw) }}

        .useful .useful-area .inner .item p {
          margin-top: 25px;
          font-family: "Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
          font-size: 1.6rem;
          line-height: 1.5;
          }
          @media only screen and (max-width: 767px) {
            .useful .useful-area .inner .item p {
              margin-top: 0; 
              font-size: calc(15/375*100vw);
              padding-left: calc(10/375*100vw);
              line-height: 1.5; }}
    
/* =============================================
　　トーチュウ電子版の盛りだくさんなコンテンツ
============================================= */
.about_content {
  padding: 0;
  position: relative;
  z-index: 0;}
  .about_content .about_content-area {
    width: 880px;
    margin: 0 auto;
    padding: 40px 0 25px;
    position: relative;}
    @media only screen and (max-width: 767px) {
      .about_content .about_content-area {
        width: 100%;
        padding: calc(20/375*100vw) calc(17/375*100vw) 0; }}



    .about_content .about_content-area .ttl {
      position: relative;
      text-align: center;
      margin-bottom: 20px;}
      @media only screen and (max-width: 767px) {
        .about_content .about_content-area .ttl {
          margin-bottom: calc(20/375*100vw);}
            }
      .about_content .about_content-area .ttl .ttl-inner {
        font-size: 2.4rem;
        padding:0 10px 5px;
        border-bottom: 3px dotted #006bb8;
        display: inline-block; }
    .about_content .about_content-area .content-box {
      width: 100%;
      position: relative;
      display: flex;
      flex-wrap: wrap;}
      @media only screen and (max-width: 767px) {
        .about_content .about_content-area .content-box {
          display: block;
          width: 100%;
          padding: 0;}
            }
      .about_content .about_content-area .content-box .box {
        position: relative;
        display: flex;
        width: 50%;
        padding: 0 8px 15px 0;}
        @media only screen and (max-width: 767px) {
          .about_content .about_content-area .content-box .box {
            display: block;
            width: 100%;
            padding: 0;
            margin-bottom: calc(18/375*100vw);}
             }

      .about_content .about_content-area .content-box .box:nth-child(2n) {
        padding: 0 0 15px 8px;}
        @media only screen and (max-width: 767px) {
          .about_content .about_content-area .content-box .box:nth-child(2n) {
            padding: 0;}}
        .about_content .about_content-area .content-box .box .box-inner {
          width: 100%;
          position: relative;
          display: flex;
          padding: 10px 8px;
          background: #006bb8; }
          @media only screen and (max-width: 767px) {
            .about_content .about_content-area .content-box .box .box-inner {
              padding: calc(5/375*100vw);}}
  
          .about_content .about_content-area .content-box .box .box-inner .box-inner02 {
            width: 100%;
            display: flex;
            position: relative;
            padding: 10px 12px;
            border: 1px solid #fff;
            flex-direction: row-reverse;
            justify-content: flex-end; }
            @media only screen and (max-width: 767px) {
              .about_content .about_content-area .content-box .box .box-inner .box-inner02 {
                padding: calc(10/375*100vw) calc(10/375*100vw) calc(15/375*100vw);
                position: unset;
              }}
              @media only screen and (max-width: 767px) {
                .about_content .about_content-area .content-box .box.keiba .box-inner .box-inner02,
                .about_content .about_content-area .content-box .box.wrapping .box-inner .box-inner02 {
                  padding: calc(10/375*100vw) calc(10/375*100vw) calc(30/375*100vw);
                }}

            .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl {
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly; }
              @media only screen and (max-width: 767px) {
                .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl {
                  width: 100%;
                  align-items: center;
                  text-align: center;
                  justify-content: center;
                  padding-bottom: calc(30/375*100vw);
                }}
              @media only screen and (max-width: 767px) {
                .about_content .about_content-area .content-box .box.keiba .box-inner .box-inner02 .box-ttl,
                .about_content .about_content-area .content-box .box.wrapping .box-inner .box-inner02 .box-ttl {
                  padding-bottom: 0;
                }}
            .about_content .about_content-area .content-box .box .box-inner .box-inner02 .img {
              color: #fff;
              max-width: 163px;
              display: flex;
              align-items: center; }
            @media only screen and (max-width: 767px) {
            .about_content .about_content-area .content-box .box .box-inner .box-inner02 .img {
              max-width: 165px; }}
                
            .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .ttl {
              font-weight: 700;
              font-size: 2.4rem;
              font-style: italic;
              text-align: left;
              color: #fff;
              margin-bottom: 0;
              margin: 0 0 0 10px; }
              @media only screen and (max-width: 767px) {
                .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .ttl {
                  text-align: center;
                  margin: 0 0 0 calc(10/375*100vw);
                  font-size: calc(20/375*100vw);
                  font-weight: 600;
                  line-height: calc(26/375*100vw); }}

                .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .ttl .small {
                font-weight: 700;
                font-size: 2rem;
                display: block;
                font-style: italic;
                padding-bottom: 5px; }
                @media only screen and (max-width: 767px) {
                  .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .ttl .small {
                    font-size: calc(17/375*100vw); 
                  }}

              .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .sub {
                font-size: 1.6rem;
                line-height: 1.35;
                position: relative;
                display: inline-block;
                padding: 0.7em 1em 0.8em 0.8em;
                position: relative;
                color: #fff;
                z-index: 1; }
                @media only screen and (max-width: 767px) {
                  .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .sub {
                    font-size: calc(15/375*100vw);
                    line-height: calc(18/375*100vw);
                    position: absolute;
                    bottom: 0;
                    left: 0;}}

              .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .sub:after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: -1;
                background: #ff7a0d;
                transform: scaleY(1.1) perspective(0.8em) rotateX(1.2deg);
                transform-origin: bottom left; }
                @media only screen and (max-width: 767px) {
                  .about_content .about_content-area .content-box .box .box-inner .box-inner02 .box-ttl .sub:before {
                    content: "";
                    position: absolute;
                    bottom: calc(5/375*100vw);
                    left: calc(5/375*100vw);
                    width: 105%;
                    height: 100%;
                    border-left: 1px solid #FFF;
                    border-bottom: 1px solid #FFF; }}

                .about_content .about_content-area .content-box .box.dra .box-inner .box-inner02 .box-ttl .sub:after {
                  min-width: 195px; }
                .about_content .about_content-area .content-box .box.f1 .box-inner .box-inner02 .box-ttl .sub:after {
                  min-width: 195px; }
                .about_content .about_content-area .content-box .box.keiba .box-inner .box-inner02 .box-ttl .sub:after {
                  min-width: 215px; }
                .about_content .about_content-area .content-box .box.wrapping .box-inner .box-inner02 .box-ttl .sub:after {
                  min-width: 235px; }
                  @media only screen and (max-width: 767px) {
                    .about_content .about_content-area .content-box .box.dra .box-inner .box-inner02 .box-ttl .sub:after {
                      min-width: calc(180/375*100vw); }
                    .about_content .about_content-area .content-box .box.f1 .box-inner .box-inner02 .box-ttl .sub:after {
                      min-width: calc(270/375*100vw); }
                    .about_content .about_content-area .content-box .box.keiba .box-inner .box-inner02 .box-ttl .sub:after {
                      /* min-width: calc(295/375*100vw); */
                      min-width: calc(220/375*100vw); }
                    .about_content .about_content-area .content-box .box.wrapping .box-inner .box-inner02 .box-ttl .sub:after {
                      min-width: calc(235/375*100vw); }
                    }
                
/* =============================================
　　アプリダウンロード
============================================= */
.app_operation {
  padding: 0;
  position: relative;
  z-index: 0;}
  .app_operation .app_operation-area {
    width: 880px;
    margin: 0 auto;
    padding: 40px 0 40px;
    position: relative;}
    @media only screen and (max-width: 767px) {
      .app_operation .app_operation-area {
        width: 100%; }
         }
    @media only screen and (max-width: 767px) {
      .app_operation .app_operation-area {
        width: 100%;
        padding: calc(20/375*100vw) calc(17/375*100vw) calc(40/375*100vw) ; }}

    .app_operation .app_operation-area .inner {
      width: 670px;
      margin: 0 auto;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .app_operation .app_operation-area .inner {
          width: 100%; }
          }
    

      .app_operation .app_operation-area .inner .ttl {
        text-align: left;
        padding-left: 130px;
        }
        @media only screen and (max-width: 767px) {
          .app_operation .app_operation-area .inner .ttl {
            padding-left: calc(22/375*100vw); }
            }
      

		
        .app_operation .app_operation-area .inner .ttl .ttl-inner {
          color: #000;
          font-size: 2rem;
          font-weight: 700;
          margin-bottom: 25px;
          display: inline-block;
          text-align: center; }
          @media only screen and (max-width: 767px) {
            .app_operation .app_operation-area .inner .ttl .ttl-inner {
              font-size: calc(20/375*100vw); }}

          .app_operation .app_operation-area .inner .ttl .ttl-inner span.txt-blue {
            font-weight: 700; }
          .app_operation .app_operation-area .inner .ttl .ttl-inner::before {
            position: absolute;
            content: "";
            background-image: url(../img/ttl-style-img01.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 38px;
            height: 26px;
            bottom: 0;
            left: -43px; }
            @media only screen and (max-width: 767px) {
              .app_operation .app_operation-area .inner .ttl .ttl-inner::before {
                  width: 35px;
                  height: 23px;
                  bottom: 0;
                  left: -20px;
                  top: -5px; }}
          .app_operation .app_operation-area .inner .ttl .ttl-inner::after {
            position: absolute;
            content: "";
            background-image: url(../img/ttl-style-img01.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 38px;
            height: 26px;
            right: -43px;
            transform: scale(-1, 1); }
            @media only screen and (max-width: 767px) {
              .app_operation .app_operation-area .inner .ttl .ttl-inner::after {
                width: 35px;
                height: 23px;
                right: -20px;
                top: -5px; }}

            
      .app_operation .app_operation-area .inner .doala-img {
        max-width: 111px;
        position: absolute;
        top: -36px;
        right: 40px; }
        @media only screen and (max-width: 767px) {
          .app_operation .app_operation-area .inner .doala-img {
            max-width: calc(111/375*100vw);
            position: absolute;
            top: calc(-6/375*100vw);
            right: 0; }}

        .app_operation .app_operation-area .inner .app_area {
        width: 660px;
        padding: 20px 0;
        text-align: center;
        position: relative;
        background-color: #e6e6e6;
        border-radius: 15px; }
        @media only screen and (max-width: 767px) {
          .app_operation .app_operation-area .inner .app_area {
            width: 100%;
            padding: calc(20/375*100vw); } }

        .app_operation .app_operation-area .inner .app_area .dl-btn {
          width: 440px;
          margin: 0 auto 10px;
          display: flex;
          justify-content: space-between; }
          @media only screen and (max-width: 767px) {
            .app_operation .app_operation-area .inner .app_area .dl-btn {
              width: calc(300/375*100vw);
              display: block; } }

          .app_operation .app_operation-area .inner .dl-btn .item { }
              @media only screen and (max-width: 767px) {
                .app_operation .app_operation-area .inner .dl-btn .item {
                  padding: 0 calc(30/375*100vw);
                  margin: 0 0 15px;
                }}
            .app_operation .app_operation-area .inner .dl-btn .item a {
              display: inline-block; }
              @media only screen and (max-width: 767px) {
                .app_operation .app_operation-area .inner .dl-btn .item a {
                  width: 100%;
                }}

            .app_operation .app_operation-area .inner .dl-btn .item a:hover {
              opacity: 0.7; }
              @media only screen and (max-width: 767px) {
                .app_operation .app_operation-area .inner .dl-btn .item a:hover {
                  opacity: 1; }
                .app_operation .app_operation-area .inner .dl-btn .item a img {
                  width: 100%;
                  display: block; }}
  

          .app_operation .app_operation-area .inner .app_area .note {
            width: 600px;
            margin: 0 auto;
            font-size: 1.3rem;
            line-height: 1.65; }
            @media only screen and (max-width: 767px) {
              .app_operation .app_operation-area .inner .app_area .note {
                width: 100%;
                display: block; } }


/* =============================================
  よくある質問＆お問い合わせ
============================================= */
/* Q&Aアコーディオン
-------------------- */
.question {
  padding: 0;
  position: relative;
  z-index: 0;}
  @media only screen and (max-width: 767px) {
    .question {
      padding: 0; } }
  .question .question-inner {
    width: 880px;
    margin: 0 auto;
    padding: 40px 40px 40px;
    position: relative;}
    @media only screen and (max-width: 767px) {
      .question .question-inner {
        width: 100%;
        padding: calc(40/375*100vw) calc(17/375*100vw) calc(60/375*100vw); } }
    .question .question-inner .ttl {
      text-align: center; }
      .question .question-inner .ttl .ttl-inner {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 700;
        /* margin-bottom: 25px; */
        display: inline-block;
        text-align: center; }
    .question .qa-area {
    width: 800px;
    margin: 0 auto;
    padding: 0 20px; }
    @media only screen and (max-width: 767px) {
      .question .qa-area {
        width: 100%;
        padding: 0;
        margin: 0; } }
  .question .qa-block {
    padding: 20px 0 20px; }
    @media only screen and (max-width: 767px) {
      .question .qa-block {
        margin-top: calc(20/375*100vw);
        padding: 0; } }
    .question .qa-block + .qa-block {
      margin-top: 45px; }
      @media only screen and (max-width: 767px) {
        .question .qa-block + .qa-block {
          margin-top: calc(40/375*100vw); } }
  .question .qa-ttl {
    position: relative;
    cursor: pointer;
    min-height: 50px;
    padding: 15px;
    margin-top: 15px;
    letter-spacing: calc((50 / 1000)*1em);
    line-height: 1.2;
    font-family: "Bahnschrift","Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
    font-size: 1.6rem;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,1);
    border-left: 1px solid rgba(255,255,255,1);
    border-right: 1px solid rgba(255,255,255,1);
    border-bottom: 1px solid rgba(255,255,255,1);
    box-shadow: 2px 6px 10px -2px #00569b; }
    @media only screen and (max-width: 767px) {
      .question .qa-ttl {
        min-height: inherit;
        padding: calc(15/375*100vw) calc(45/375*100vw) calc(15/375*100vw) calc(45/375*100vw);} }
  .question .qa-body .qa-ttl:first-child {
    margin-top: 0; }
    .question .qa-ttl.open {
      border-bottom: 1px solid rgba(255,255,255,0); }

    .question .qa-ttl i {
      display: inline-block;
      width: 35px;
      height: 35px;
      margin-right: 10px;
      border-radius: 35px;
      background-color: #fff;
      color: #006bb8;
      letter-spacing: 0;
      line-height: 1.45;
      font-size: 2.8rem;
      text-align: center;
      /* vertical-align: middle; */
      vertical-align: top; }
      @media only screen and (max-width: 767px) {
        .question .qa-ttl i {
          font-family: "Bahnschrift","Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
          position: absolute;
          top: 13px;
          left: 8px;
          width: calc(32/375*100vw);
          height: calc(32/375*100vw);
          border-radius: calc(40/375*100vw);
          margin: 0;
          font-size: calc(24/375*100vw); } }
    .question .qa-ttl::before, .question .qa-ttl::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 15px;
      width: 20px;
      height: 2px;
      background-color: #fff; }
    .question .qa-ttl::after {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }
    .question .qa-ttl.open::before {
      transform: rotate(-45deg); }
    .question .qa-ttl.open::after {
      transform: rotate(45deg); }
  .question .qa-desc {
    display: none;
    padding: 0 15px 20px;
    border-left: 1px solid rgba(255,255,255,1);
    border-right: 1px solid rgba(255,255,255,1);
    border-bottom: 1px solid rgba(255,255,255,1);
    box-shadow: 2px 6px 10px -2px #00569b;
    background-color: #006bb8;
    position: relative;
    top: -1px; }
    @media only screen and (max-width: 767px) {
      .question .qa-desc {
        padding: 0 calc(17/375*100vw) calc(17/375*100vw) calc(10/375*100vw);
    }
   }

    .question .qa-desc .qa-desc-inner {
      position: relative;
      /* cursor: pointer; */
      min-height: 50px;
      padding-top: 15px;
      letter-spacing: calc((50 / 1000)*1em);
      line-height: 1.2;
      font-size: 1.6rem;
      color: #fff;
      text-align: right;
      border-top: 1px solid rgba(255,255,255,1); }
      @media only screen and (max-width: 767px) {
        .question .qa-desc .qa-desc-inner {
          font-size: calc(17/375*100vw); } }
    .question .qa-desc i {
      font-family: "Bahnschrift",sans-serif;
      display: inline-block;
      width: 35px;
      height: 35px;
      margin-right: 10px;
      border-radius: 35px;
      border:  1px solid rgba(255,255,255,1);
      background-color: transparent;
      color: #fff;
      letter-spacing: 0;
      line-height: 1.45;
      font-size: 2.4rem;
      font-weight: 300;
      text-align: center;
      position: absolute;
      top: 15px;
      left: 0; }
      @media only screen and (max-width: 767px) {
        .question .qa-desc i {
          position: absolute;
          top: 13px;
          left: 0;
          width: calc(32/375*100vw);
          height: calc(32/375*100vw);
          border-radius: calc(40/375*100vw);
          margin: 0;
          font-size: calc(24/375*100vw);
          line-height: calc(30/375*100vw); } }
      .question .qa-ttl .qa-desc-inner .txt,
      .question .qa-desc .qa-desc-inner .txt {
        width: 683px;
        display: inline-block;
        text-align: left;
        font-family: "Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
        font-size: 1.6rem;
        line-height: 1.35; }
      .question .qa-ttl .qa-desc-inner .txt {
        width: 640px; }

        @media only screen and (max-width: 767px) {
          .question .qa-ttl .qa-desc-inner .txt,
          .question .qa-desc .qa-desc-inner .txt {
            width: calc(275/375*100vw);
            margin-top: 0;
            padding-left: 0; }
            .question .qa-ttl .qa-desc-inner .txt {
              width: calc(250/375*100vw);
            }
      
          
          }

        .question .qa-desc .qa-desc-inner .txt .txt-white.tel {
          font-weight: 400;
          text-decoration: none;
          pointer-events: none; }

        .question .qa-desc .qa-desc-inner .txt span {
          text-indent: -10px;
          display: inline-block; } 
        .question .qa-desc .qa-desc-inner .txt a.txt-white {
          text-decoration: underline;
          font-weight: bold; }
        .question .qa-desc .qa-desc-inner .txt a.txt-white:hover {
          text-decoration: none; }
      
        .question .qa-ttl .qa-desc-inner .txt.short-txt,
        .question .qa-desc .qa-desc-inner .txt.short-txt {
          margin-top: 10px; }
          @media only screen and (max-width: 767px) {
            .question .qa-ttl .qa-desc-inner .txt.short-txt {
              margin-top: 0; }
          }


/* =============================================
  お問い合わせ
============================================= */

.contact {
  padding: 0;
  position: relative;
  z-index: 0; }
  @media only screen and (max-width: 767px) {
    .contact {
      width: 100%;
      margin: 0;
      pointer-events: initial; } }

  .contact .contact-area {
    width: 880px;
    margin: 40px auto 0;
    /* margin: 40px auto 200px; */
    padding: 0 20px; }
    @media only screen and (max-width: 767px) {
      .contact .contact-area {
        width: 100%;
        /* padding: calc(40/375*100vw) calc(17/375*100vw) calc(100/375*100vw) ; */
        padding: calc(40/375*100vw) calc(30/375*100vw) calc(40/375*100vw) ;
        margin: 0;}}
    .contact .contact-area .ttl {
      margin-bottom: 30px;
      text-align: center; }
      .contact .contact-area .ttl .ttl-inner {
        font-size: 2.4rem;
        width: 100%;
        display: flex;
        justify-content: center; }


.contact .contact-area .contact-inner {
  text-align: center;
  /* display: flex;
  justify-content: center; */}
  @media only screen and (max-width: 767px) {
    .contact .contact-area .contact-inner {
      display: block;}}

.contact-detail-top {
  color: #006bb8;}
  @media only screen and (max-width: 767px) {
    .contact-detail-top {
      text-align: center;
      margin-bottom: 30px; }}
        /* .contact .btm-logo {
        margin: 15px 30px 15px 0; }
        @media only screen and (max-width: 767px) {
          .contact .btm-logo {
            width: calc(300/375*100vw);
            margin: 0 auto 15px; }} */
    .contact-detail-top .name {
      font-size: 1.8rem;
      font-weight: 600;
      padding-bottom: 5px; }
      @media only screen and (max-width: 767px) {
        .contact-detail-top .name {
          font-size: 1.6rem;
          font-weight: 800; }}
    .contact-detail-top .tel a {
      color: #006bb8;
      display: inline-block;
      pointer-events: none; }
      @media only screen and (max-width: 767px) {
        .contact-detail-top .tel a {
          pointer-events: initial; }}
    .contact-detail-top .tel a .num {
      font-size: 3.5rem;
      font-weight: 700; }
    .contact-detail-top p.time {
      font-size: 1.8rem;
      font-weight: 600;
      padding-top: 5px; }
      @media only screen and (max-width: 767px) {
        .contact-detail-top p.time {
          font-size: 1.6rem;
          font-weight: 800; }}

      .contact-detail-bottom {
        margin-top: 20px;
        padding: 0 50px; }
        @media only screen and (max-width: 767px) {
          .contact-detail-bottom {
            margin: 0;
            padding: 0; } }


  .contact-detail-bottom .txt {
    font-family: "Hiragino Kaku Gothic Pro","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
    font-size: 1.6rem;
    margin-bottom: 20px;
    line-height: 1.5; }
  .contact-detail-bottom .txt.txt-blue {
    font-weight: bold; }
  .contact-detail-bottom .txt.txt-blue:hover {
    opacity: 1; }


  .contact-detail-bottom .linkbox {
      text-align: center; }
  .contact-detail-bottom .btn {
    display: inline-block; }
.contact-detail-bottom .linkbox .btn a {
  background-color: #003377;
  padding: 12px 35px;
  width: 100%;
  display: block;
  border-radius: 5px;
}

.contact-detail-bottom ul.sns-link {
  list-style: none;
  max-width: 150px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;}
  @media only screen and (max-width: 767px) {
    .contact-detail-bottom ul.sns-link {
      margin: 40px auto 0; }}

.contact-detail-bottom li {
    width: 30px;
  }
  .contact-detail-bottom .btn a:hover {
    opacity: 0.7; }
    @media only screen and (max-width: 767px) {
      .contact-detail-bottom .btn a:hover {
        opacity: 1; } }


.attention {
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.4; }

/* topへ戻る
-------------------- */
.back-top {
  position: absolute;
  bottom: 0;
  right: 60px; }
  @media only screen and (max-width: 767px) {
    .back-top {
      bottom: calc(10/375*100vw);
      right: calc(10/375*100vw); } }
  .back-top a {
    position: relative;
    width: 60px;
    height: 60px;
    border: 3px solid #006bb8;
    border-radius: 50%;
    display: block;
    box-shadow: 13px 31px 49px -2px #ebebeb;
    background-color: #fff; }
    @media only screen and (max-width: 767px) {
      .back-top a {
        width: calc(50/375*100vw);
        height: calc(50/375*100vw); } }
    .back-top a::before {
      content: '';
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-top: 0; 
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      border-bottom: 20px solid #006bb8;}
      @media only screen and (max-width: 767px) {
        .back-top a::before {
          top: calc(-1/375*100vw);
          border-right-width: calc(10/375*100vw);
          border-left-width: calc(10/375*100vw);
          border-bottom-width: calc(15/375*100vw); 
        } }
    .back-top a:hover {
      opacity: 0.7; }
      @media only screen and (max-width: 767px) {
        .back-top a:hover {
          opacity: 1; } }

/* =============================================
  フローティング
============================================= */
.floating {
  position: fixed;
  width: 100%;
  text-align: center;
  z-index: 99;
  bottom: 0;
  background-color: #e6e6e6;
  opacity: 0.9; }
  .floating .floating-inner {
    width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 110px; }
    @media only screen and (max-width: 767px) {
      .floating .floating-inner {
        width: 100%; }
           }
    .floating .floating-inner .logo-img {
      padding-right: 15px; }
    .floating .floating-inner .logo-img img {
      max-width: 220px; }
    .floating .floating-inner .subsc-btn {
      width: 100%;
      margin: 20px auto;
      display: flex;
      justify-content: space-around; }
    .floating .floating-inner .subsc-btn.col1 {
      justify-content: center; }
      .floating .floating-inner .subsc-btn .btn {
        display: flex;
        align-items: center; }
        .floating .floating-inner .subsc-btn .btn a {
          display: block;
          border-radius: 5px;
          color: #fff;
          padding: 10px 20px;}
          .floating .floating-inner .subsc-btn .btn a.txt {
            display: inline;
            color: #0033cc;
            padding: 0; }
          .floating .floating-inner .subsc-btn .btn a:hover {
            opacity: .7; }
          .floating .floating-inner .subsc-btn .btn a.bgColor01 {
            background-color: #ff7a0d;
            width: 295px; }
          .floating .floating-inner .subsc-btn .btn a.bgColor02 {
            background-color: #006bb8;
            width: 295px; }
            .floating .floating-inner .subsc-btn .btn a h2 {
              font-size: 1.4rem; }
            .floating .floating-inner .subsc-btn .btn a h2 .waku {
              border: 1px solid #fff;
              padding: 1px 5px 2px; }
            .floating .floating-inner .subsc-btn .btn a p {
              font-size: 1.4rem;
              line-height: 1.25;
              padding-top: 10px; }
            .floating .floating-inner .subsc-btn .btn .small {
              display: inline-block;
              font-size: 1rem; }
.floating-sp {
  position: fixed;
  width: 100%;
  text-align: center;
  z-index: 99;
  bottom: -5px;
  background-color: #e6e6e6;
  opacity: 0.9; }
  .floating-sp .floating-sp-inner {
    padding: calc(10/375*100vw) calc(5/375*100vw) calc(10/375*100vw);
    display: flex;
    align-items: center; }
    .floating-sp .floating-sp-inner .subsc-btn {
      width: 100%;
      margin: 0; 
      padding: 0;
      z-index: 5; } 
    
      .floating-sp .floating-sp-inner .subsc-btn {
        width: 100%;
        margin: calc(5/375*100vw) auto 0;
        display: flex;
        justify-content: space-between;
            }
      .floating-sp .floating-sp-inner .subsc-btn.col1 {
        justify-content: center;
            }

        .floating-sp .floating-sp-inner .subsc-btn .btn {
          width: 70%;
          /* width: 50%; */
          padding: 0 calc(5/375*100vw);
          display: flex; }
    
          .floating-sp .floating-sp-inner .subsc-btn .btn a {
            width: 100%;
            display: block;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: calc(10/375*100vw) }
    
              .floating-sp .floating-sp-inner .subsc-btn .btn a.txt {
                display: inline;
                color: #0033cc;
                padding: 0; }
      
              .floating-sp .floating-sp-inner .subsc-btn .btn a:hover {
                opacity: .7; }
            .floating-sp .floating-sp-inner .subsc-btn .btn a.bgColor01 {
              background-color: #ff7a0d; }
            .floating-sp .floating-sp-inner .subsc-btn .btn a.bgColor02 {
              background-color: #006bb8; }
                .floating-sp .floating-sp-inner .subsc-btn .btn a h2 {
                  border-bottom: 1px solid #fff;
                  font-size: calc(14/375*100vw);
                  padding: 0 0 calc(10/375*100vw);
                  line-height: calc(7/375*100vw); }
                    .floating-sp .floating-sp-inner .subsc-btn .btn a h2 .waku {
                      border: 1px solid #Fff;
                      padding: calc(7/375*100vw) calc(10/375*100vw);
                      display: block;}
                      .floating-sp .floating-sp-inner .subsc-btn .btn a h2 .small {
                        font-size: calc(10/375*100vw);}
                .floating-sp .floating-sp-inner .subsc-btn .btn a p {
                      font-size: calc(14/375*100vw);
                      padding: calc(5/375*100vw) 0;
                      line-height: calc(16/375*100vw); }
                        .floating-sp .floating-sp-inner .subsc-btn .btn a p .b {
                          font-size: calc(14/375*100vw);
                          padding: 0 calc(2/375*100vw);}
#floating-in {
  bottom: -200px;
  transition: all .4s linear; }

#floating-in.UpMove {
  bottom: 0; }

#floating-in-sp {
  bottom: -400px;
  transition: all .6s linear; }

#floating-in-sp.UpMove {
  bottom: 0; }

/* =============================================
  フッター
============================================= */
footer {
  background-color: #006bb8;
  /* margin-top: -180px; */
  position: relative; }
  @media only screen and (max-width: 767px) {
    footer {
      /* margin-top: calc(-100/375*100vw); */
      margin-top: calc(0/375*100vw); } }
  footer .copy {
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 13px 0 110px; }
    @media only screen and (max-width: 767px) {
      footer .copy {
        font-size: calc(10/375*100vw);
        padding: calc(13/375*100vw) calc(17/375*100vw) calc(150/375*100vw);
        /* padding: calc(13/375*100vw) calc(17/375*100vw) calc(138/375*100vw); */
        text-align: left; } }




/* == 遅延読み込み ========= */
.trigger {
  opacity: 0;
}

.trigger.up.is-active {
  animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

.trigger.in.is-active {
  animation: slideIn 1.5s .1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}



@keyframes slideUp {
  0% {
    transform: translateY(180px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
  }

  40%, 100% {
    opacity: 1;
  }
}

@keyframes slideIn {
    0% {
      transform: translateX(180px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
    }
  
    40%, 100% {
      opacity: 1;
    }
 }