@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word; }

body {
  font-size: 1.4rem;
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 640px) {
    body {
      font-size: 1.6rem; } }

*,
*::before,
*::after {
  box-sizing: border-box; }

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

a:hover {
  opacity: 0.8; }

@media only screen and (min-width: 960px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }

@media only screen and (min-width: 420px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.cloud {
  background-image: url("../img/bg_cloud_sp.png");
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat; }
  @media only screen and (min-width: 640px) {
    .cloud {
      background-image: url("../img/bg_cloud_pc.png");
      background-position: top center;
      background-size: 100% auto; } }
  @media only screen and (min-width: 960px) {
    .cloud {
      background-image: url("../img/bg_cloud_pcl.png");
      background-position: top center;
      background-size: auto auto; } }
  .cloud--inner {
    width: 100%;
    padding: 2.533vw 0 3.733vw;
    margin: 0 auto; }
    @media only screen and (min-width: 640px) {
      .cloud--inner {
        width: calc(960/960 * 100%);
        padding: calc(42/960 * 100%) 0 calc(45/960 * 100%);
        margin: 0 auto; } }
    @media only screen and (min-width: 960px) {
      .cloud--inner {
        width: 960px;
        padding: 42px 0 45px;
        margin: 0 auto; } }
  .cloud .navi {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; }
    @media only screen and (min-width: 640px) {
      .cloud .navi {
        margin: 0 auto;
        width: calc(894/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .cloud .navi {
        margin: 0 auto;
        width: 894px; } }
    .cloud .navi img {
      height: 4.666vw; }
      @media only screen and (min-width: 640px) {
        .cloud .navi img {
          height: calc(45/960 * 100vw); } }
      @media only screen and (min-width: 960px) {
        .cloud .navi img {
          height: 45px; } }
  .cloud .mv {
    width: 100%;
    padding: 2.812vw 0 0;
    margin: 0 auto; }
    @media only screen and (min-width: 640px) {
      .cloud .mv {
        width: calc(960/960 * 100%);
        padding: calc(41/960 * 100%) 0 0;
        margin: 0 auto; } }
    @media only screen and (min-width: 960px) {
      .cloud .mv {
        width: 960px;
        padding: 41px 0 0;
        margin: 0 auto; } }
  .cloud .loss01 {
    width: 100%;
    margin: 7.6vw auto 0; }
    @media only screen and (min-width: 640px) {
      .cloud .loss01 {
        width: calc(960/960 * 100%);
        margin: calc(61/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      .cloud .loss01 {
        width: 960px;
        margin: 61px auto 0; } }
  .cloud .loss02 {
    width: 100%;
    margin: 3.6vw auto 0; }
    @media only screen and (min-width: 640px) {
      .cloud .loss02 {
        width: calc(960/960 * 100%);
        margin: calc(4/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      .cloud .loss02 {
        width: 960px;
        margin: 4px auto 0; } }
  .cloud .loss03 {
    width: 100%;
    margin: 5.333vw auto 0; }
    @media only screen and (min-width: 640px) {
      .cloud .loss03 {
        width: calc(960/960 * 100%);
        margin: calc(-85/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      .cloud .loss03 {
        width: 960px;
        margin: -85px auto 0; } }
  .cloud .loss04 {
    width: 100%;
    margin: 2.266vw auto 0; }
    @media only screen and (min-width: 640px) {
      .cloud .loss04 {
        width: calc(960/960 * 100%);
        margin: calc(-65/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      .cloud .loss04 {
        width: 960px;
        margin: -65px auto 0; } }

.green {
  width: 100%;
  background-color: #f6f9e1;
  background-image: url("../img/bg_green_sp.jpg");
  background-position: top center;
  background-size: auto 100%; }
  @media only screen and (min-width: 640px) {
    .green {
      background-image: url("../img/bg_green_pc.jpg");
      background-size: auto auto; } }
  .green .green--inner {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20vw; }
    @media only screen and (min-width: 640px) {
      .green .green--inner {
        width: calc(960/960 * 100%);
        padding-bottom: calc(180/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .green .green--inner {
        width: 960px;
        padding-bottom: 180px; } }

.bt_leaf {
  width: 39.333vw;
  margin: -10.266vw auto 0; }
  @media only screen and (min-width: 640px) {
    .bt_leaf {
      width: calc(295/960 * 100%);
      margin: calc(-128/960 * 100%) calc(107/960 * 100%) 0 auto; } }
  @media only screen and (min-width: 960px) {
    .bt_leaf {
      width: 295px;
      margin: -128px 107px 0 auto; } }

.dot {
  margin: 10.4vw auto 0; }
  @media only screen and (min-width: 640px) {
    .dot {
      margin: calc(118/960 * 100%) auto 0; } }
  @media only screen and (min-width: 960px) {
    .dot {
      margin: 118px auto 0; } }

#cp h2 {
  width: 56.8vw;
  margin: 5vw auto 0; }
  @media only screen and (min-width: 640px) {
    #cp h2 {
      width: calc(532/960 * 100%);
      margin: calc(28/960 * 100%) auto 0; } }
  @media only screen and (min-width: 960px) {
    #cp h2 {
      width: 532px;
      margin: 28px auto 0; } }
#cp .cp_cont {
  position: relative;
  width: 100%;
  margin: 5vw auto 0; }
  @media only screen and (min-width: 640px) {
    #cp .cp_cont {
      margin: 15px auto 0; } }
  @media only screen and (min-width: 960px) {
    #cp .cp_cont {
      margin: 15px auto 0; } }
  #cp .cp_cont .color {
    background: #555;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 95%;
    height: 102.5%;
    position: absolute;
    mix-blend-mode: multiply; }
  #cp .cp_cont .close_text {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    color: #FFF; }
    @media only screen and (min-width: 640px) {
      #cp .cp_cont .close_text {
        font-size: 3rem; } }
  #cp .cp_cont .btarea {
    width: 60vw;
    margin: -16vw auto 0; }
    @media only screen and (min-width: 640px) {
      #cp .cp_cont .btarea {
        width: calc(560/960 * 100%);
        margin: calc(-140/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      #cp .cp_cont .btarea {
        width: 560px;
        margin: -140px auto 0; } }
    #cp .cp_cont .btarea a {
      display: block; }
    #cp .cp_cont .btarea a:last-child {
      margin-bottom: 0; }

.period {
  width: 86vw;
  margin: 12vw auto 0; }
  @media only screen and (min-width: 640px) {
    .period {
      width: calc(742/960 * 100%);
      margin: calc(90/960 * 100%) auto 0; } }
  @media only screen and (min-width: 960px) {
    .period {
      width: 742px;
      margin: 90px auto 0; } }

.ptop {
  position: fixed;
  bottom: 3vw;
  right: 3vw;
  width: 17vw; }
  @media only screen and (min-width: 640px) {
    .ptop {
      width: calc(148/960 * 100%);
      bottom: calc(15/960 * 100%);
      right: calc(15/960 * 100%); } }
  @media only screen and (min-width: 960px) {
    .ptop {
      width: 148px;
      bottom: 15px;
      right: 15px; } }