/******************************************************************

Stylesheet: 全体

******************************************************************/
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Black.woff) format('woff');
  font-weight: 900;
}
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Bold.woff) format('woff');
  font-weight: 700;
}
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Medium.woff) format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Regular.woff) format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Light.woff) format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'noto-sans-cjk-jp';
  src: url(NotoSansCJKJP/Thin.woff) format('woff');
  font-weight: 100;
}

body {
  font-family: noto-sans-cjk-jp, sans-serif;
}
html {
  font-family: noto-sans-cjk-jp, sans-serif;
}

.flex {
  display: flex;
}

/******************************************************************

Stylesheet: ヘッダー

******************************************************************/
.header {
  height: 100px;
  width: 100%;
  padding: 25px 150px 0;
  background-color: #ffffff;
}
.header__log {
  width: 130px;
  height: 47px;
}

.mobile-menu__btn {
  display: none;
}
.mobile-menu {
  display: none;
}

/******************************************************************

Stylesheet: バナー

******************************************************************/
.banner__PC {
  position: relative;
}
.banner__PC > img {
  height: 100%;
  width: 100%;
}

.banner__SP {
  display: none;
}

.banner__fin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 178, 42, 0.8);
}
.banner__fin p {
  color: #fff;
  font-size: 20px;
  text-align: center;
  width: 100%;
  padding: 30% 0;
}
/******************************************************************

Stylesheet: Swiper

******************************************************************/
.swiper-container {
  width: 280px;
  height: 547px;
  text-align: center;
}
.swiper__title {
  font-size: 12px;
}
.swiper__bar {
  text-align: center;
  width: 255px;
  height: 12px;
}
.swiper__img {
  width: 280px;
  height: 498px;
}
.swiper-pagination {
  width: 100%;
  /* transform: translateY(-50px); */
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper-button-prev {
  transform: translateX(50px);
}
.swiper-button-next {
  transform: translateX(-50px);
}

/******************************************************************

Stylesheet: キャンペーン概要

******************************************************************/
.campaign {
  width: 100%;
  padding-bottom: 160px;
}

.campaign__period {
  width: 650px;
  margin: 0 auto;
  text-align: center;
}
.period__title {
  display: block;
  position: relative;
  margin: 0 auto;
  height: 180px;
}
.PC__ribbonS {
  width: 345px;
  height: 60px;
  margin-top: 120px;
}
.campaign__title {
  font-size: 27px;
  font-weight: normal;
  transform: translateY(-52px);
  color: #fff;
}
.PC__ribbonS {
  display: inline;
}
.SP__ribbonS {
  display: none;
}
.campaign__condition {
  font-size: 28px;
  font-weight: bold;
  margin: 36px 0;
}
.campaign__br{
  display: none;
}
.campaign__condition__bank{
  color: #61B323;
}
.campaign__btn {
  background-color: #61B323;
  padding: 16.5px 101px;
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 18px;
  font-weight: 600;
}
.campaign__concern {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.concern__title{
  height: 180px;
}
.campaign__contents {
  width: 720px;
  text-align: left;
  margin: 0 auto;
  margin-top: 36px;
  padding: 20px;
  padding-bottom: 10px;
  font-size: 21px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}
.campaign__ul {
  list-style-type: none;
  padding-left: 0;
}
.li__text {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.8;
}

/******************************************************************

Stylesheet: Hugmegとは

******************************************************************/
.detail {
  padding-top: 66px;
  padding-bottom: 65px;
  width: 100%;
  background-color: #f1f3cd;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.detail__img {
  width: 535px;
  height: 527px;
}
.detail__title > span {
  font-size: 23px;
  font-weight: bold;
  vertical-align: bottom;
}
.detail__title > img {
  width: 210px;
  height: 74px;
}
.detail__text {
  width: 400px;
  font-size: 18px;
  text-align: left;
  margin-top: 40px;
  margin-bottom: 90px;
}
.detail__btn {
  background-color: #64b22a;
  padding: 20px 25px;
  color: #fff;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 600;
}

.detail__SP {
  display: none;
}

.triangle {
  position: relative;
}
.triangle::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border-right: 50vw solid transparent;
  border-left: 50vw solid transparent;
  border-top: 80px solid #f1f3cd;
  align-items: flex-end;
  z-index: 10;
}

/******************************************************************

Stylesheet: 応募方法

******************************************************************/
.method {
  padding-bottom: 200px;
  margin-top: 160px;
  width: 100%;
}
.inquiry {
  margin-top: 240px;
  text-align: center;
}
.inquiry__title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}
.inquiry__btn {
  background-color: #61b323;
  padding: 20px 100px;
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 18px;
  font-weight: bold;
}

.inquiry__SP {
  display: none;
}

/******************************************************************

Stylesheet: フッター

******************************************************************/
.footer {
  width: 100%;
  background-color: #64b22a;
  padding-top: 120px;
  padding-bottom: 32px;
}

.footer__app {
  justify-content: center;
}
.footer__app__android__btn {
  border: none;
  background-color: #64b22a;
  padding: 1px 6px;
}
.footer__app__android__btn > img {
  width: 177px;
  height: 53px;
}
.footer__app__iphone__btn {
  border: none;
  background-color: #64b22a;
  padding: 1px 6px;
}
.footer__app__iphone__btn > img {
  width: 144px;
  height: 53px;
}
.footer__textGoogle {
  width: 329px;
  font-size: 11px;
  color: #fff;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 1em;
  text-indent: -1em;
}
.footer__textApple {
  width: 329px;
  font-size: 11px;
  color: #fff;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: -1em;
}
.footer__copy {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 120px;
}

.mobile__app {
  display: none;
}
.mobile__textGoogle, .mobile__textApple {
  display: none;
}

/* TOPに戻るボタン */
#page__top {
  width: 75px;
  height: 75px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 1.2rem;
  line-height: 1.0rem;
  background: #fff;
  color: #707070;
  padding: 20px 18px;
  /* border: solid 1px; */
  border-radius: 50%;
  /* box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.5),
    0 3px 10px -4px rgba(0, 0, 0, 0.2); */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
  z-index: 100;
}

@media screen and (max-width: 960px) {
  /******************************************************************

    Stylesheet: ヘッダー

    ******************************************************************/
    .header {
      height: 75px;
      width: 100%;
      padding: 10px 20px 10px 20px;
      background-color: #ffffff;
      justify-content: space-between;
    }
    .header__log {
      width: 112px;
      height: 40px;
      transform: translateY(10px);
    }
    .campaign{
      padding-bottom: 100px;
    }
    /* モバイルメニュー */
    .mobile-menu {
      display: none;
      position: fixed;
      overflow: scroll;
      right: 0;
      top: 120px;
      width: 100%;
      /* z-index: 210; */
    }
    .mobile-menu__btn {
      display: block;
      background-color: unset;
      border: none;
      outline: none !important;
      cursor: pointer;
      z-index: 200;
    }
    .mobile-menu__btn > span {
      background-color: #000;
      width: 35px;
      height: 4px;
      display: block;
      margin-bottom: 6px;
      transition: transform 0.7s;
    }
    .mobile-menu__btn > span:last-child {
      margin-bottom: 0;
    }
    .mobile-menu__cover {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(100, 178, 42, 0.95);
      opacity: 0;
      visibility: hidden;
      transition: opacity 1s;
      cursor: pointer;
      /* z-index: -1; */
    }
    .mobile-menu__main {
      padding: 0;
      perspective: 2000px;
      transform-style: preserve-3d;
      visibility: collapse;
      /* z-index: -1; */
    }
    .mobile-menu__item {
      list-style: none;
      display: block;
      transform: translate3d(0, 0, -1000px);
      padding: 0 40px;
      transition: transform 0.3s, opacity 0.2s;
      opacity: 0;
    }
    .mobile-menu__link {
      display: block;
      margin-top: 30px;
      color: #000;
      text-decoration: none;
    }

    .menu-open .mobile-menu {
      display: block;
      z-index: 200;
    }
    .menu-open .mobile-menu__main {
      text-align: center;
      visibility: visible;
    }
    .menu-open .mobile-menu__cover {
      opacity: 1;
      visibility: visible;
      z-index: 200;
    }
    .menu-open .mobile-menu__item {
      transform: none;
      opacity: 1;
      max-width: 280px;
      margin: 0 auto;
      border-bottom: solid 2px #fff;
      padding: 12px 0;
    }
    .menu-open .mobile-menu__link {
      position: relative;
      margin-top: 0;
      /* z-index: 201; */
    }
    .menu-open .mobile-menu__btn {
      position: fixed;
      top: 30px;
      right: 20px;
    }
    .menu-open .mobile-menu__btn > span {
      background-color: #fff;
    }
    .menu-open .mobile-menu__btn > span:nth-child(1) {
      transition-delay: 70ms;
      transform: translateY(10px) rotate(135deg);
    }
    .menu-open .mobile-menu__btn > span:nth-child(2) {
      transition-delay: 0s;
      transform:  translateX(-18px) scaleX(0);
    }
    .menu-open .mobile-menu__btn > span:nth-child(3) {
      transition-delay: 140ms;
      transform: translateY(-10px) rotate(-135deg);
    }
    .main-title {
      font-weight: bold;
      font-size: 18px;
      color: #fff;
    }
    #last-title {
      border-bottom: none;
    }

    .mobile__app {
      perspective: 2000px;
      transform-style: preserve-3d;
    }
    .mobile__app__android__btn, .mobile__app__android__btn > img, 
    .mobile__app__iphone__btn, .mobile__app__iphone__btn > img, 
    .mobile__textApple, .mobile__textGoogle {
      display: block;
      transform: translate3d(0, 0, -1000px);
      transition: transform 0.3s, opacity 0.2s;
      opacity: 0;
    }

    .menu-open .mobile__app {
      display: flex;
      justify-content: center;
      margin-top: 80px;
    }
    .menu-open .mobile__app__android__btn {
      border: none;
      background-color: rgba(100, 178, 42, 0.95);
      opacity: 1;
      transform: none;
    }
    .menu-open .mobile__app__android__btn > img {
      width: 177px;
      height: 53px;
      opacity: 1;
      transform: none;
    }
    .menu-open .mobile__app__iphone__btn {
      border: none;
      background-color: rgba(100, 178, 42, 0.95);
      opacity: 1;
      transform: none;
    }
    .menu-open .mobile__app__iphone__btn > img {
      width: 144px;
      height: 53px;
      opacity: 1;
      transform: none;
    }
    .menu-open .mobile__textGoogle {
      display: block;
      width: 329px;
      font-size: 11px;
      color: #fff;
      margin: 0 auto;
      margin-top: 15px;
      padding-left: 1em;
      text-indent: -1em;
      opacity: 1;
    }
    .menu-open .mobile__textApple {
      display: block;
      width: 329px;
      font-size: 11px;
      color: #fff;
      margin: 0 auto;
      padding-left: 1em;
      text-indent: -1em;
      opacity: 1;
    }

  /******************************************************************

    Stylesheet: バナー

    ******************************************************************/
  .banner__PC {
    display: none;
  }
  
  .banner__SP {
    display: block;
    position: relative;
  }
  .banner__SP > img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .banner__fin p {
    color: #fff;
    font-size: 20px;
    text-align: center;
    width: 100%;
    padding: 57% 0;
  }
  /******************************************************************

    Stylesheet: Swiper

    ******************************************************************/
  .swiper-pagination {
    width: 100%;
    transform: translateY(0);
  }
  .swiper-button-prev {
    transform: translateX(0);
  }
  .swiper-button-next {
    transform: translateX(0);
  }

  /******************************************************************

    Stylesheet: キャンペーン概要

    ******************************************************************/
  .campaign__period {
    width: 90%;
    padding-top: 60px;
  }
  .campaign__condition {
    font-size: 24px;
  }
  .campaign__contents {
    width: 85%;
    font-size: 18px;
    padding: 20px 20px;
    padding-bottom: 10px;
    margin-top: 24px;
  }

  /******************************************************************

    Stylesheet: Hugmegとは

    ******************************************************************/
  .detail {
    display: none;
  }
  
  .detail__SP {
    display: block;
    width: 100%;
    background-color: #f1f3cd;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .detail__SP__title {
    padding-top: 60px;
    margin-bottom: 30px;
  }
  .detail__SP__title > img {
    width: 130px;
    height: 47px;
  }
  .detail__SP__title > span {
    font-size: 15px;
    font-weight: bold;
    vertical-align: bottom;
  }
  .detail__SP__text {
    font-size: 12px;
    width: 280px;
    text-align: left;
    margin: 0 auto;
  }
  .detail__SP__img {
    width: 330px;
    height: 325px;
    margin-top: 18px;
    margin-bottom: 10px;
  }
  .detail__SP__btn {
    background-color: #64b22a;
    padding: 20px 25px;
    color: #fff;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 60px;
  }
  .SP__img {
    width: 100%;
  }

  /* .triangle::after {
    border-top: 10px solid #f1f3cd;
  } */

  /******************************************************************

    Stylesheet: 応募方法

    ******************************************************************/
    .method {
      padding-bottom: 80px;
      margin-top: 100px;
    }
    .rightEdge {
      width: 10px;
      height: 20px;
      margin: 0 10px;
      transform: translateY(-15px);
    }
    .inquiry {
      margin-top: 200px;
    }
    /* .inquiry__SP {
      display: block;
      width: 100%;
      text-align: center;
    }
    .inquiry__SP__title {
      font-size: 20px;
      font-weight: bold;
      margin-top: 130px;
      margin-bottom: 25px;
    }
    .inquiry__SP__btn {
      background-color: #61b323;
      padding: 14px 42px;
      color: #fff;
      border-radius: 5px;
      border: none;
      font-size: 15px;
      font-weight: bold;
    } */

  /******************************************************************

    Stylesheet: フッター

    ******************************************************************/
    .footer {
      padding-top: 60px;
    }
}

@media screen and (max-width: 600px) {
  /******************************************************************

    Stylesheet: ヘッダー

    ******************************************************************/

  /******************************************************************

    Stylesheet: バナー

    ******************************************************************/
    .banner__SP {
      display: block;
    }
    .banner__SP > img {
      width: 100%;
      height: auto;
    }

    .banner__fin p {
      color: #fff;
      font-size: 16px;
      text-align: center;
      width: 100%;
      padding: 57% 0;
    }
  /******************************************************************

    Stylesheet: Step

    ******************************************************************/

  /******************************************************************

    Stylesheet: キャンペーン概要

    ******************************************************************/
    .campaign__period, .campaign__concern {
      margin: 0 auto;
      text-align: start;
    }
    .campaign__period {
      width: 100%;
      padding-top: 100px;
    }
    .campaign__condition, .campaign__text {
      text-align: center;
      margin: 24px 0;
    }
    .campaign__condition{
      font-size: 16px;
    }
    .campaign__contents{
      font-size: 16px;
    }
    .campaign__br{
      display: inline;
    }
    .campaign__title{
      font-size: 16px;
      transform: translateY(-33px);
    }
    #day__title{
      margin-left: 40px;
    }
    .campaign__btn__container{
      text-align: center;
    }
    .campaign__btn{
      padding: 13.75px 42.5px;
      margin-bottom: 100px;
      font-size: 15px;
    }
    .period__title {
      display: block;
      position: relative;
      margin: 0 auto;
      height: 40px;
    }
    .PC__ribbonS {
      display: none;
    }
    .SP__ribbonS {
      display: inline;
    }
    .SP__ribbonS {
      width: 190px;
      height: 40px;
      transform: translateX(-10%);
    }
    .concern__title{
      height: 40px;
    }
    .campaign__contents{
      width: min(336px, 80%);
    }
    #contents__title {
      margin-left: 5%;
      margin: 0px 0px 8px 40px;
    }

  /******************************************************************

    Stylesheet: Hugmegとは

    ******************************************************************/
    
  /******************************************************************

    Stylesheet: 応募方法

    ******************************************************************/
    .triangle::after {
      border-top: 10px solid #f1f3cd;
    }
    .inquiry {
      display: none;
    }
    .inquiry__SP {
      display: block;
      width: 100%;
      text-align: center;
    }
    .inquiry__SP__title {
      font-size: 20px;
      font-weight: bold;
      margin-top: 100px;
      margin-bottom: 25px;
    }
    .inquiry__SP__btn {
      background-color: #61b323;
      padding: 14px 42px;
      color: #fff;
      border-radius: 5px;
      border: none;
      font-size: 15px;
      font-weight: bold;
    }
  /******************************************************************

    Stylesheet: フッター

    ******************************************************************/
    .footer{
      padding-bottom: 96px;
    }
}

@media screen and (max-width: 370px) {
  /******************************************************************

    Stylesheet: ヘッダー

    ******************************************************************/

  /******************************************************************

    Stylesheet: バナー

    ******************************************************************/
  /* .stepIcon__SP__register__icon {
      width: 65px;
      height: 65px;
  }
  .stepIcon__SP__check__icon {
    width: 65px;
    height: 65px;    
  }
  .stepIcon__SP__get__icon {
    width: 65px;
    height: 65px;       
  } */
  /******************************************************************

    Stylesheet: Step

    ******************************************************************/
    /* .step__01__android__btn > img {
      width: 157px;
      height: 43px;
    }
    .step__01__iphone__btn > img {
      width: 121px;
      height: 43px;
    }

    .step__02__img > img {
      width: 310px;
      height: 303px;
    }

    .step__03__title {
      font-size: 18px;
    } */
    .swiper__img {
      width: 250px;
      height: 468px;
    }

  /******************************************************************

    Stylesheet: キャンペーン概要

    ******************************************************************/

  /******************************************************************

    Stylesheet: Hugmegとは

    ******************************************************************/
    .detail__SP__img {
      width: 300px;
      height: 295px;
    }

  /******************************************************************

    Stylesheet: フッター

    ******************************************************************/
    .footer__app__android__btn > img {
      width: 157px;
      height: 43px;
    }
    .footer__app__iphone__btn > img {
      width: 124px;
      height: 43px;
    }

    .footer__textGoogle, .footer__textApple {
      width: 309px;
    }
}

@media screen and (max-width: 1280px) {
  /******************************************************************

    Stylesheet: ヘッダー

    ******************************************************************/

  /******************************************************************

    Stylesheet: バナー

    ******************************************************************/

  /******************************************************************

    Stylesheet: Step

    ******************************************************************/

  /******************************************************************

    Stylesheet: キャンペーン概要

    ******************************************************************/

  /******************************************************************

    Stylesheet: Hugmegとは

    ******************************************************************/

  /******************************************************************

    Stylesheet: 応募方法

    ******************************************************************/

  /******************************************************************

    Stylesheet: フッター

    ******************************************************************/
}