@charset "utf-8";
/*
Theme Name: ncs-lp2
version: 1.0
*/

/* font */
.shippori-mincho-regular {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-style: normal;
}
.shippori-mincho-medium {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-style: normal;
}
.shippori-mincho-semibold {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-style: normal;
}
.shippori-mincho-bold {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-style: normal;
}
.hina-mincho-regular {
  font-family: 'Hina Mincho', serif;
  font-weight: 400;
  font-style: normal;
}

/*
全体の設定 -------------------------------------------*/
* {
  box-sizing: border-box;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
  color: #373737;
}
img {
  vertical-align: bottom;
}
::selection {
  background: #ccc;
  color: #fff;
}
::-moz-selection {
  background: #ccc;
  color: #fff;
}
.br--sp {
  display: none;
}
.br--pc {
  display: block;
}

/*
リンク色と下線の設定 ----------------------------*/

a {
  color: #3c3c3c;
}
a:link {
  color: #3c3c3c;
  text-decoration: none;
}
a:visited {
  color: #3c3c3c;
  text-decoration: none;
}
a:hover {
  color: #3c3c3c;
  text-decoration: none;
}
a:active {
  color: #3c3c3c;
  text-decoration: none;
}
table {
  width: 100%;
  border-collapse: collapse;
}

.spacer {
  clear: both;
  font-size: 0px;
}

/*-----------------
   共通
-------------------*/

#wrapper {
  width: 100%;
  height: auto;
}

[class$='__inner'] {
  width: 100%;
  margin: 0 auto;
  padding: 0 7.14%;
  max-width: calc(800px + 14.28%);
  box-sizing: border-box;
  position: relative;
}

/* btn */
a.btn {
  width: 100%;
  padding: min(1.75vw, 15px);
  font-size: clamp(0.65rem, 1.167vw, 0.875rem); /* 14px */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  display: flex;
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  color: #000;
  transition: opacity 0.2s ease;
}
a.btn:hover {
  opacity: 0.7;
}
a.btn--gold {
  background-image: url(../imgs/button-gold.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
a.btn--yellow {
  background-color: #efae00;
  color: #fff;
}
a.btn--green {
  background-color: #46a342;
  color: #fff;
}
a.btn span {
  margin-right: min(1.5vw, 10px);
  position: relative;
  width: 20px;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* カスタム矢印: シェブロン(>) + 縦線(|) ※画像の形状をSVGで再現 */
a.btn span::before {
  content: '';
  position: absolute;
  width: 1.2em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 L8 6 L0 11' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3Cline x1='14' y1='0' x2='14' y2='12' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
a.btn--yellow span::before,
a.btn--green span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 1 L8 6 L0 11' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'/%3E%3Cline x1='14' y1='0' x2='14' y2='12' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
}
a.btn--yellow img {
  width: 1.5em;
  margin-right: 0.5em;
  object-fit: contain;
}
a.btn--green img {
  width: 2em;
  margin-right: 0.5em;
  object-fit: contain;
}

/* GLOBAL Navi ボタン（青・ピル型・ロゴ＋矢印） */
a.btn-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  gap: min(2vw, 24px);
  width: 100%;
  height: min(12.5vw, 150px);
  margin: 0 auto;
  padding: min(1.667vw, 20px) min(2.667vw, 32px);
  border-radius: 9999px;
  box-sizing: border-box;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a.btn-2:hover {
  opacity: 0.8;
}
.btn2--green .btn-2__wrap {
  width: 80%;
  display: flex;
  align-items: end;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.btn2--blue .btn-2__wrap {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-2__text {
  text-align: left;
  line-height: 1.4;
  color: #fff;
  font-size: clamp(0.65rem, 1.167vw, 0.875rem); /* 14px */
  font-weight: 500;
}
.btn2--blue .btn-2__text {
  letter-spacing: 0.1em;
}
.btn-2__logo {
  display: flex;
  align-items: center;
}
.btn2--green .btn-2__logo {
  width: 80%;
  max-width: 420px;
}
.btn2--blue .btn-2__logo {
  width: 40%;
  max-width: 180px;
}
.btn-2__logo img {
  display: block;
  object-fit: contain;
}
a.btn-2::after {
  content: '';
  flex-shrink: 0;
  width: 15%;
  margin-left: 8px;
  padding: 2%;
  background: url(../imgs/btn-arrow.png) no-repeat center / contain;
}
a.btn2--green {
  background-color: #b7c800;
  margin-top: min(5.83vw, 70px);
}
a.btn2--blue {
  background-color: #2ea7e0;
  margin-top: min(3.75vw, 45px);
}

/*----------------------------
	floating_bnr
----------------------------*/
.floating_bnr {
  position: fixed;
  right: 20px;
  bottom: 10%;
  width: min(14vw, 160px);
  height: auto;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease;
}
.floating_bnr:hover {
  opacity: 0.8;
}

/*----------------------------
	footer
----------------------------*/
footer {
  width: 100%;
  background-image: url(../imgs/footer-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: clamp(200px, 30vw, 330px);
  margin-top: min(12.5vw, 150px);
  position: relative;
}
.footer__logo {
  width: clamp(100px, 15vw, 160px);
  position: absolute;
  top: 20px;
  left: 20px;
}
.footer__text {
  width: min(75vw, 900px);
  position: absolute;
  right: 0;
}
.footer__copyright {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: clamp(0.65rem, 1vw, 0.875rem);
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}

/*
TB用
----------------------------------- */
@media all and (max-width: 960px) {
}
/*--------------------------------
	SP用
----------------------------------- */

@media all and (max-width: 530px) {
  .br--sp {
    display: block;
  }
  .br--pc {
    display: none;
  }

  [class$='__inner'] {
    padding: 0 8%;
  }

  /* btn */
  a.btn {
    padding: min(3.49vw, 15px);
    font-size: clamp(0.6rem, 3.02vw, 0.8125rem); /* 13px */
  }
  a.btn-2 {
    flex-direction: column;
    height: min(29.07vw, 125px);
    gap: 7.5px;
  }
  a.btn span {
    margin-right: min(2.33vw, 10px);
    width: min(4.65vw, 20px);
  }
  a.btn span::before {
    width: 1.8em;
    height: 1.5em;
  }
  a.btn--yellow img {
    /* width: 2em; */
    /* margin-right: 1em; */
  }
  a.btn--green img {
    width: 2.5em;
    margin-right: 1em;
  }
  a.btn2--green {
    margin-top: min(8.14vw, 35px);
  }
  .btn2--green .btn-2__wrap {
    width: 90%;
    gap: min(2.33vw, 10px);
    align-items: center;
  }
  .btn-2__wrap {
    min-height: 12.5vw;
  }
  /*----------------------------
	floating_bnr
----------------------------*/
  .floating_bnr {
    right: min(4.65vw, 20px);
    width: min(29.07vw, 125px);
  }

  /*----------------------------
	  footer
  ----------------------------*/
  footer {
    margin-top: min(12.79vw, 55px);
    height: min(83.72vw, 360px);
  }
  .footer__logo {
    width: min(37.21vw, 160px);
    top: min(5.81vw, 25px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  .footer__text {
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .footer__copyright {
    width: 60%;
    font-size: min(2.79vw, 0.75rem);
    bottom: min(4.65vw, 20px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}