@charset "utf-8";


$base: #FFF8EC;
$main: #36368a;
$accent: #3F90CB;
$sab: #202020;
$font: #202020;



body {
  background-color: $base;
  font-family: "Zen Maru Gothic";
  font-size: 1.6rem;
  z-index: 1;
}

header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  // align-items: center;

  .key_visual {
    position: relative;
    max-width: 70%;
    border-right: 15px double $main;
    ;
    border-bottom: 15px double $main;
    ;
    border-radius: 0 0 50px 0;
    margin-left: 0;

    .header_photo {
      .header_photo-img1 {
        // background-image: url(../img/fv_img1.jpg);
        background-size: cover;
        height: 80vh;
        // aspect-ratio: 2/1;
        // object-fit: cover;
        border-radius: 0 0 35px 0;
        // display: none;
      }

      .header_photo-img2 {
        display: none;
      }
    }

    .header_text_wrapper {
      // max-width: 320px;
      position: absolute;
      top: 25%;
      right: 15%;
      left: 15%;
      background-color: rgba(105, 105, 105, 0.4);
      backdrop-filter: blur(1px);
      box-shadow: 5px 5px 10px #525252;
      text-align: center;

      img {
        max-width: 50%;
        border-bottom: 2px solid #fff;
        padding-bottom: 5px;
        margin: 0 auto;
        margin-bottom: 10px;
      }

      p {
        font-size: 3.6rem;
        font-weight: 900;
        color: #fff;
        text-shadow: 2px 2px 6px #525252;
        line-height: 3.6rem;
        letter-spacing: 0.3rem;
        padding: 5px 0;
      }
    }
  }

  .vertical_text {
    writing-mode: vertical-rl;
    font-size: 3.6rem;
    font-weight: 900;
    letter-spacing: 0.6rem;
    padding-right: 10%;
    background-image: url(../img/icon_camera1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right 0;
    padding-top: 20px;

    p {
      margin: 0 30px;
    }

    p:nth-child(2) {
      text-indent: 1em;
    }
  }
}

.period {
  max-width: 540px;
  text-align: justify;
  background-color: $main;
  border-radius: 10px;
  color: #fff;
  font-size: 3.0rem;
  padding: 10px 0px;
  margin: 20px auto;

  p {
    max-width: 90%;
    line-height: 1em;
    letter-spacing: 0.1rem;
    margin: 10px auto;

    .month {
      font-family: "Varela Round", sans-serif;
      font-size: 2.4rem;

      .date {
        font-size: 3.6rem;
      }
    }
  }
}


.content {
  // display: none;
  padding: 50px 0;
  margin: 100px 0;

  .title {
    width: 470px;
    position: relative;
    // display: inline-block;
    // padding: 0 75px;
    margin: 0 auto;
    text-align: center;
    color: $main;
    font-size: 4.0rem;
    font-weight: 900;
    margin: 0 auto;

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      width: 70px;
      height: 3px;
      content: '';
      border-top: solid 2px $main;
      border-bottom: solid 2px $main;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }
  }
}

.content_1 {
  background-image: url(../img/icon_camera2.png);
  background-repeat: no-repeat;
  background-position: left 7% top 0;
  background-size: 15%;

  ul.content_1_flex {
    max-width: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    margin: 0 auto;

    li.content_1_flex_apply {
      position: relative;
      max-width: 350px;
      background-color: #f0f0f0;
      border-radius: 20px;
      padding: 0 10px;
      margin: 80px 0;

      .step {
        font-size: 3.2rem;
        position: absolute;
        left: 5px;
        top: -25px;
      }

      div.step_wrapper {
        max-width: 90%;
        margin: 10px auto;

        .step_method {
          font-size: 3.2rem;
          color: $accent;
          text-align: center;
        }


        .icon_follow,
        .frame_wrapper {
          padding: 10px 0;
          margin: 0 auto;
        }

        .icon_follow {
          max-width: 80%;
        }



        .insta_account {
          background-image: url(../img/insta_icon.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: left center;
          padding-left: 70px;
          margin: 10px;

          a.insta {
            font-size: 2.0rem;
            color: $accent;
          }
        }

        p.step_detail {
          strong {
            color: $accent;
          }
        }
      }
    }
  }

  //---インスターーーー
  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  img {
    max-width: 100%;
    display: block;
  }

  .frame_wrapper {
    justify-content: space-between;
    align-items: center;

    .frame {
      max-width: 280px;
      font-size: 14px;
      background: #fff;
      border-radius: 24px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, .3);
      margin: 0 auto;

      .photo_head {
        align-items: center;
        padding: 10px 10px 5px;
        width: 250px;
        height: 25px;

        .icon {
          max-width: 12%;
          padding: 8px;
          border: solid 1px #d8d8d8;
          border-radius: 50%;
          margin-right: 5px;
        }
      }

      .photo {
        height: 210px;
        background-image: url(../img/fv_img1.jpg);
        background-size: cover;
      }

      .tag {
        color: rgb(13, 114, 172);
      }
    }

    .insta_text {
      padding: 10px 10px 20px 10px;
    }

    .link_area {
      justify-content: space-between;
    }

    .link_area .left {
      justify-content: space-between;
      // width: 40%;
    }

    .link_area span:nth-child(3) {
      padding-top: 1px;
    }

    .left img {
      max-width: 80%;
    }

    .right img {
      width: 20px;
    }

    .tag {
      padding: 10px 0;
    }
  }

  .content_1_sab {
    max-width: 100%;
    background-image: url(../img/toki.png ), url(../img/sake.png);
    background-repeat: no-repeat;
    background-position: left 15% top 0, right 15% bottom 0;
    text-align: center;
    // width: fit-content;
    margin: 0 auto;

    h3 {
      text-align: center;
      font-size: 3.2rem;
    }

    p.theme {
      max-width: 380px;
      font-size: 2.8rem;
      color: $accent;
      // text-align: justify;
      margin: 0 auto;
    }



    p.attention {
      max-width: 600px;
      text-align: justify;
      padding: 0 15px;
      margin: 10px auto;
    }

  }
}



.content_2 {
  background-image: url(../img/icon_camera3.png), url(../img/icon_camera3-2.png), url(../img/content_2_back.jpg), ;
  background-size: 75%, 75%, cover;
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-position: 200px 90%, 200px 10%, 0;

  .text_back {
    max-width: 365px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 20px auto 0;
    text-align: justify;
  }

  .everyone_photo_wrapper {
    max-width: 900px;
    padding: 0 10px;
    margin: 0 auto;

    .everyone_photo_flex {
      display: flex;


      //-----チェキ風ーーーーーー
      .everyone_photo {
        border: 10px solid #fff;
        background-color: #fff;
        box-shadow: 0 0 1px #ccc, 2px 2px 5px rgba(50, 50, 50, 0.2);
        padding-bottom: 7%;
        // &::after {
        //   content: '';
        //   display: block;
        //   width: 0;
        //   height: 0;
        //   border-style: solid;
        //   border-width: 0 0 60px 60px;
        //   border-color: transparent transparent #ffe9b7 transparent;
        //   box-shadow: 1px 1px 1px rgba(50, 50, 50, 0.1);
        //   position: absolute;
        //   right: -20px;
        //   bottom: -20px;
        //   z-index: 999;
        // }

        .everyone_photo_relative {
          position: relative;


          img {
            // position: absolute;
            width: 100%;
            border: 1px solid #cecece;

          }
        }
      }

      .everyone_photo_relative::before {
        content: '';
        width: 40%;
        height: 40px;
        background-color: rgba(255, 255, 255, .5);
        border-left: 2px dotted rgba(0, 0, 0, .1);
        border-right: 2px dotted rgba(0, 0, 0, .1);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        // display: block;
        // width: 0;
        // height: 0;
        // border-style: solid;
        // border-width: 60px 60px 0 0;
        // border-color: #ffe9b7 transparent transparent transparent;
        // box-shadow: -1px -1px 1px rgba(50, 50, 50, 0.1);
        position: absolute;
        left: 50px;
        top: -30px;
        z-index: 999;
      }

      // .everyone_photo_relative::after {
      //   content: '';
      //   display: block;
      //   width: 0;
      //   height: 0;
      //   border-style: solid;
      //   border-width: 0 0 60px 60px;
      //   border-color: transparent transparent #ffe9b7 transparent;
      //   box-shadow: 1px 1px 1px rgba(50, 50, 50, 0.1);
      //   position: absolute;
      //   right: -20px;
      //   bottom: -20px;
      //   z-index: 999;
      // }
    }

    .everyone_photo_flex_top {
      margin-top: 70px;
      position: relative;
      height: 60%;

      .everyone_photo1 {
        position: absolute;
        top: 10%;
        left: 12%;
        max-width: 30%;
        // transform: rotate(-10deg);
      }

      .everyone_photo2 {
        max-width: 40%;
        transform: rotate(10deg);
        right: 0;
        margin: 0 0 0 50%;
      }
    }

    .everyone_photo_flex_bottom {
      position: relative;

      .everyone_photo3 {
        margin-left: 30px;
        max-width: 50%;
        transform: rotate(3deg);
      }

      .everyone_photo4 {
        position: absolute;
        right: 25%;
        max-width: 25%;
        transform: rotate(-15deg);
      }
    }

  }
}






.content_3 {
  background-image: url(../img/present2.png), url(../img/present.png);
  background-repeat: no-repeat;
  background-size: 10%, 20%;
  background-position: right top, left bottom;

  ul.present {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    // align-items: center;
    text-align: center;

    li.present_goods {
      position: relative;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      // flex: 4;
      background-color: #fff;
      border-radius: 20px;
      margin: 50px 0;

      span.rank {
        max-width: 25%;
        position: absolute;
        left: -30px;
        top: -50px;
        

        p {
          width: 160px;
          color: #fff;
          background-color: $accent ;
          border-radius: 20px;
        }
      }


      img {
        border-radius: 20px 20px 0 0;
      }

      p {
        background-color: #fff;
        border-radius: 0 0 20px 20px;
        padding: 20px;
        font-size: 2.0rem;
        flex-grow: 1;

        span {
          font-size: 1.6rem;
        }
      }
    }
  }
}

div.attention {
  max-width: 50%;
  font-weight: 500;
  font-size: 1.4rem;
  color: $font;
  border: 1px solid #777;
  padding: 20px;
  margin: 0 auto 50px auto;

  dt.attention_title {
    font-size: 2.4rem;
    text-align: center;
  }

  dd.attention_item {
    text-align: justify;
    margin: 10px 0;
  }
}

footer {
  background-color: $main;
  color: #fff;
  font-weight: bold;
  position: relative;

  .footer-flex {
    max-width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
    margin: 0 auto;

    .footer-left {
      max-width: 40%;
    }
  }

  .site-logo {
    &:hover {
      opacity: 0.5;
    }
  }

  .footer-right {

    address {
      font-style: normal;

      span {
        display: block;
      }
    }
    a{
      color: #fff;
    }
  }

  .photo_head {
    margin-top: 30px;
    align-items: center;

    img {
      display: block;
      margin-right: 20px;
    }
  }

  small {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
  }
}

.element {
  /* 最初は非表示 */
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}

/* フェードイン時に入るクラス */
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}