@charset "utf-8";
/* body {
	overflow: hidden;
} */
/* setting of animation  */
@keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(20) rotate(45deg);
    opacity: 0;
  }
}

@keyframes shake {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes big-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circle-sp {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circle1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes circle2 {
  0% {
    transform: rotate(324deg);
  }
  100% {
    transform: rotate(-36deg);
  }
}
@keyframes circle3 {
  0% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(-72deg);
  }
}
@keyframes circle4 {
  0% {
    transform: rotate(252deg);
  }
  100% {
    transform: rotate(-108deg);
  }
}
@keyframes circle5 {
  0% {
    transform: rotate(216deg);
  }
  100% {
    transform: rotate(-144deg);
  }
}
@keyframes circle6 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes circle7 {
  0% {
    transform: rotate(144deg);
  }
  100% {
    transform: rotate(-216deg);
  }
}
@keyframes circle8 {
  0% {
    transform: rotate(108deg);
  }
  100% {
    transform: rotate(-252deg);
  }
}
@keyframes circle9 {
  0% {
    transform: rotate(72deg);
  }
  100% {
    transform: rotate(-288deg);
  }
}

@keyframes circle10 {
  0% {
    transform: rotate(36deg);
  }
  100% {
    transform: rotate(-324deg);
  }
}

@keyframes package-move {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  88% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
}
@keyframes package-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulsate {
  0% {
    transform: translate(-50%, 0%) scale(0.75);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0%) scale(1.08);
    opacity: 0;
  }
}
@keyframes move-in {
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes move-in-sp {
  100% {
    transform: translate(0px, -50%);
    opacity: 1;
  }
}

@media (max-width: 641px) {
  .btn-cart {
    right: 12px;
    top: 60px;
  }
}
@keyframes slideIn {
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes open-news {
  20% {
    opacity: 1;
  }
  100% {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}
html {
  overflow-y: scroll;
}
/* #container { background: #fff4c9;} */

#loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background: #ffc400;
}
#loading .inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#loading #progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
#loading #progress svg {
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#loading #progress .progressbar-text {
  font-size: 40px;
}
#loading .logo {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 2;
  opacity: 0;
  mask-image: url("../img/logo-mask.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 300px;
  mask-size: 340px;
  -webkit-mask-image: url("../img/logo-mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 300px;
  -webkit-mask-size: 340px;
}
#loading .mask {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
}
#loading .mask img {
  width: 100%;
  opacity: 0;
  mask-image: url("../img/logo-mask.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 300px;
  mask-size: 340px;
  -webkit-mask-image: url("../img/logo-mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 300px;
  -webkit-mask-size: 340px;
}
#loading .mask-sp {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
}
#loading.start #progress {
  opacity: 0;
}
#loading.start .logo {
  animation: zoom1 4s ease 0.4s forwards;
  -webkit-animation: zoom1 4s ease 0.4s forwards;
}
#loading.start .mask img {
  animation: zoom2 4s ease 0.4s forwards;
  -webkit-animation: zoom2 4s ease 0.4s forwards;
}
@keyframes zoom1 {
  0% {
    mask-size: 340px;
    mask-position: 50% 300px;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    mask-size: 2000px;
    mask-position: 50% -400px;
    opacity: 0;
  }
}
@-webkit-keyframes zoom1 {
  0% {
    -webkit-mask-size: 340px;
    -webkit-mask-position: 50% 300px;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    -webkit-mask-size: 2000px;
    -webkit-mask-position: 50% -400px;
    opacity: 0;
  }
}
@keyframes zoom2 {
  0% {
    opacity: 0;
    mask-size: 340px;
    mask-position: 50% 300px;
  }
  30% {
    opacity: 1;
  }
  100% {
    mask-size: 2000px;
    mask-position: 50% -400px;
    opacity: 1;
  }
}
@-webkit-keyframes zoom2 {
  0% {
    opacity: 0;
    -webkit-mask-size: 340px;
    -webkit-mask-position: 50% 300px;
  }
  30% {
    opacity: 1;
  }
  100% {
    -webkit-mask-size: 2000px;
    -webkit-mask-position: 50% -400px;
    opacity: 1;
  }
}
@media (max-width: 641px) {
  #loading .logo {
    mask-position: 50% 240px;
    -webkit-mask-position: 50% 240px;
    mask-size: 200px;
    -webkit-mask-size: 200px;
  }
  #loading .mask {
    display: none;
  }
  #loading .mask-sp {
    display: block;
  }
  #loading .mask-sp img {
    width: 100%;
    mask-image: url("../img/logo-mask.svg");
    mask-repeat: no-repeat;
    mask-position: 50% 240px;
    mask-size: 200px;
    opacity: 0;
    -webkit-mask-image: url("../img/logo-mask.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 240px;
    -webkit-mask-size: 200px;
  }
  #loading.start .logo {
    animation: zoom1sp 4s ease 0.4s forwards;
    -webkit-animation: zoom1sp 4s ease 0.4s forwards;
  }
  #loading.start .mask-sp img {
    animation: zoom2sp 4s ease 0.4s forwards;
    -webkit-animation: zoom2sp 4s ease 0.4s forwards;
  }
}
@keyframes zoom1sp {
  0% {
    mask-size: 200px;
    mask-position: 50% 240px;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    mask-size: 1500px;
    mask-position: 50% -200px;
    opacity: 0;
  }
}
@-webkit-keyframes zoom1sp {
  0% {
    mask-size: 200px;
    mask-position: 50% 240px;
    -webkit-mask-size: 200px;
    -webkit-mask-position: 50% 240px;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    mask-size: 1500px;
    mask-position: 50% -200px;
    -webkit-mask-size: 1500px;
    -webkit-mask-position: 50% -200px;
    opacity: 0;
  }
}
@keyframes zoom2sp {
  0% {
    opacity: 0;
    mask-size: 200px;
    mask-position: 50% 240px;
  }
  30% {
    opacity: 1;
  }
  100% {
    mask-size: 1500px;
    mask-position: 50% -200px;
    opacity: 1;
  }
}
@-webkit-keyframes zoom2sp {
  0% {
    opacity: 0;
    mask-size: 200px;
    mask-position: 50% 240px;
    -webkit-mask-size: 200px;
    -webkit-mask-position: 50% 240px;
  }
  30% {
    opacity: 1;
  }
  100% {
    mask-size: 1500px;
    mask-position: 50% -200px;
    -webkit-mask-size: 1500px;
    -webkit-mask-position: 50% -200px;
    opacity: 1;
  }
}

.wrap-index {
  position: relative;
  z-index: 10;
}

.sct {
  position: relative;
  z-index: 2;
}
.sct .inner-sct {
  position: relative;
}

.ttl h2 {
  color: #f69e03;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.ttl h2 img {
  width: 80%;
}
.ttl h2 img.sp {
  display: none;
}
.ttl h2 span {
  display: block;
  margin: 30px 0 0;
}
.ttl p {
  color: #767676;
  font-size: 20px;
  letter-spacing: 0.1rem;
  text-align: center;
}
@media (max-width: 641px) {
  .ttl h2 span {
    margin: 20px 0 0;
  }
  .ttl p {
    font-size: 16px;
  }
  .ttl p span {
    display: block;
  }
}
@media (max-width: 481px) {
  .ttl h2 {
    font-size: 20px;
  }
  .ttl h2 span {
    margin: 12px 0 0;
  }
  .ttl p {
    font-size: 14px;
  }
}

/* 
.spacer { width: 100%; height: 72vh;}
.fix-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; opacity: 1;}
.fix-bg.show { opacity: 1;}
.fix-bg .bg-1,
.fix-bg .bg-2,
.fix-bg .bg-3 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.fix-bg .bg-1 { z-index: 3;}
.fix-bg .bg-2 { z-index: 2;}
.fix-bg .bg-3 { z-index: 1;} */
/* .fix-bg .bg-1:before,
.fix-bg .bg-2:before,
.fix-bg .bg-3:before { content: ''; display: block; width: 100%;  margin: 0 auto; height: 1000px;}
.fix-bg .bg-1:before { background: url('../img/bg/bg-fix-1.jpg') no-repeat 50% 50%;}
.fix-bg .bg-2:before { background: url('../img/bg/bg-fix-2.jpg') no-repeat 50% 50%;}
.fix-bg .bg-3:before { background: url('../img/bg/bg-fix-3.jpg') no-repeat 50% 50%;} */
@media (min-width: 1401px) {
  .fix-bg .bg-1 {
    background-size: 100% auto;
  }
  .fix-bg .bg-2 {
    background-size: 100% auto;
  }
  .fix-bg .bg-3 {
    background-size: 100% auto;
  }
}
@media (max-width: 641px) {
  .spacer {
    height: 40vh;
  }
  .fix-bg .bg-1:before {
    background: url("../img/bg/bg-fix-1-sp.jpg") no-repeat 50% 0% / 100% auto;
  }
  .fix-bg .bg-2:before {
    background: url("../img/bg/bg-fix-2-sp.jpg") no-repeat 50% 0% / 100% auto;
  }
  .fix-bg .bg-3:before {
    background: url("../img/bg/bg-fix-3-sp.jpg") no-repeat 50% 0% / 100% auto;
  }
}
@media (max-width: 481px) {
  .spacer {
    height: 45vh;
  }
}

.note {
  width: 100%; /* transition: 1.2s ease; opacity: 0;*/
}
.note ul {
  margin: 0 0 0 auto;
}
.note ul li {
  color: #c08408;
  font-size: 10px !important;
  text-align: justify;
}
.note.show {
  opacity: 1;
}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
  .sct p.txt {
    font-size: 16px;
  }
}
@media (max-width: 801px) {
  .note {
    position: relative;
    width: 100%;
    margin: 0 auto;
    left: auto;
  }
  .note ul {
    width: 92%;
    margin: 0 auto;
  }
}
@media (max-width: 481px) {
  .note {
    transition: 0.8s ease;
  }
}

#kv-index {
  position: relative;
  margin-bottom: -10%;
}
#kv-index .inner-kv {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 4;
}
#kv-index .ctn {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding-top: 10%;
}
#kv-index .ctn h1 {
  width: 39%;
  text-align: center;
}
#kv-index .ctn h1 img {
  width: 79%;
}
#kv-index .ctn .icn-new {
  position: absolute;
  left: 27%;
  top: 27%;
  width: 10%;
  height: 30%;
  transition: 0.4s ease 0.8s;
  opacity: 1;
}
#kv-index .ctn .icn-new .mask {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),
    0 0 6px inset #fff;
}

#kv-index .ctn .icn-new .mask::before {
  content: "";
  display: block;
  width: 40px;
  height: 200px;
  background-color: #fff;
  position: absolute;
  top: -180px;
  left: 0;
  animation: shiny-btn1 3s ease-in-out infinite;
}
#kv-index .icn-new .inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#kv-index .icn-new .inner img {
  width: 100%;
}
#kv-index .bg {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 0;
  padding-top: 77%;
  z-index: 3;
  background: url("../img/bg/mv_img_ds.webp") no-repeat top center / cover;
}

/* MVスライダー（Figma 2パターン） */
#kv-index.kv-mv-slider {
  margin-bottom: -10%;
  padding-top: 0;
  overflow: visible;
  background: transparent;
}
#kv-index.kv-mv-slider .mv-slider {
  position: relative;
  width: 100%;
  z-index: 3;
  margin-bottom: 0;
  background: transparent;
}
#kv-index.kv-mv-slider .mv-slider.slick-dotted {
  margin-bottom: 0;
}
/* slick初期化前は2枚目を隠す */
#kv-index.kv-mv-slider
  .mv-slider:not(.slick-initialized)
  .mv-slide:not(:first-child) {
  display: none;
}
#kv-index.kv-mv-slider .mv-slide {
  position: relative;
  width: 100%;
  outline: none;
  background: transparent;
}
#kv-index.kv-mv-slider .mv-slide img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  background: transparent;
}
#kv-index.kv-mv-slider .slick-list {
  width: 100%;
  overflow: hidden;
  background: transparent;
}
#kv-index.kv-mv-slider .slick-track {
  display: block;
  background: transparent;
}
#kv-index.kv-mv-slider .slick-slide {
  padding: 0 !important;
  float: left;
  height: auto;
  line-height: 0;
}
#kv-index.kv-mv-slider .slick-slide > div {
  height: auto;
  line-height: 0;
}
#kv-index.kv-mv-slider .slick-dots {
  position: absolute;
  left: 50%;
  top: 68.56%;
  bottom: auto;
  transform: translateX(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 25px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 10;
  pointer-events: auto;
}
#kv-index.kv-mv-slider .slick-dots li {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
}
#kv-index.kv-mv-slider .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: transparent !important;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  opacity: 0.9;
  transition:
    background 0.3s ease,
    opacity 0.3s ease;
}
#kv-index.kv-mv-slider .slick-dots li button:hover,
#kv-index.kv-mv-slider .slick-dots li button:focus {
  background: rgba(255, 255, 255, 0.35) !important;
  outline: none;
}
#kv-index.kv-mv-slider .slick-dots li button:before {
  display: none;
  content: none;
}
#kv-index.kv-mv-slider .slick-dots li.slick-active button,
#kv-index.kv-mv-slider .slick-dots li.slick-active button:hover,
#kv-index.kv-mv-slider .slick-dots li.slick-active button:focus {
  background: #fff !important;
  opacity: 1;
}

@media (min-width: 1441px) {
  #kv-index .ctn .icn-new {
    height: 27%;
  }
}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
  #kv-index .ctn {
    padding-top: 28vw;
  }
}
@media (max-width: 768px) {
  #kv-index .ctn h1 {
    width: 100%;
    text-align: center;
  }
  /* #kv-index { margin-bottom: 0px; padding-top: 269%;} */
  #kv-index {
    margin-bottom: 0px;
    padding-top: 282%;
  }
  #kv-index .ctn h1 img {
    width: 49%;
  }
  #kv-index .ctn .icn-new {
    width: 100px;
    height: 100px;
    top: 38%;
    left: 67%;
  }
  #kv-index .inner-kv {
    position: relative;
    height: 0;
    padding-top: 72%;
  }
  /* #kv-index .bg { position: absolute; left: 0; top: 0; height: 0; padding-top: 285%; background: url('../img/bg/mv_img_ds_sp.png') no-repeat 50% 0% / 100% auto;} */
  #kv-index .bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    padding-top: 282%;
    background: url("../img/bg/mv_img_ds_sp.webp") no-repeat 50% 0% / 100% auto;
  }

  /* MVスライダー SP（Figma 390x1101） */
  #kv-index.kv-mv-slider {
    margin-bottom: -8%;
    padding-top: 0 !important;
  }
  #kv-index.kv-mv-slider .mv-slide img {
    width: 100%;
    height: auto;
  }
  #kv-index.kv-mv-slider .slick-dots {
    top: 74.2%; /* Frame 1320 y=817 / 1101 */
    gap: 18px;
  }
  #kv-index.kv-mv-slider .slick-dots li,
  #kv-index.kv-mv-slider .slick-dots li button {
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 481px) {
  #kv-index .ctn .icn-new {
    width: 70px;
    height: 70px;
  }
}

#lead {
  position: relative;
  z-index: 2;
}
#lead .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/bg-1.png") no-repeat 50% 100% / cover;
  opacity: 0;
  transition: 0.4s linear;
}
#lead .inner-sct {
  position: relative;
}
#lead .ctn {
  position: relative;
  width: 100%;
  background: url("../img/bg/lead.png") no-repeat 50% 100% / cover;
}
#lead .ctn h2 {
  width: 90%;
  max-width: 760px;
  margin: 0 auto;
}
#lead .ctn h2 img {
  width: 86%;
}
#lead .ctn .badge {
  width: 200px;
  position: absolute;
  right: 15%;
  top: 40px;
}
#lead .ctn .badge img {
  width: 100%;
}
#lead .txt {
  width: 90%;
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 0 140px;
}
#lead .txt p {
  color: #767676;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2rem;
}
#lead .txt p sub {
  font-size: 10px;
  vertical-align: baseline;
}
#lead .note {
  position: absolute;
  right: 5%;
  bottom: 40px;
  max-width: 200px;
}
#lead.show .bg {
  opacity: 1;
  background: url("../img/bg/sec01_bg.png") no-repeat fixed center / cover;
  padding-top: 44%;
}

@media (max-width: 1001px) {
  #lead .ctn .badge {
    width: 160px;
    right: 10%;
    top: 80px;
  }
}
@media (max-width: 801px) {
  #lead .txt p {
    font-size: 2.85vw;
  }
}
@media (max-width: 641px) {
  #lead .bg {
    background: url("../img/bg/sec01_bg_sp.png") no-repeat 50% 100% / 100% auto;
  }
  #lead .ctn .badge {
    width: 140px;
    right: 8%;
    top: 60px;
  }
  #lead .txt {
    padding: 10vw 0 20vw;
  }
  #lead .txt p {
    font-size: 4.2vw;
  }
  #lead .txt p span {
    display: block;
  }
}
@media (max-width: 481px) {
  #lead .ctn h2 img {
    width: 100%;
  }
  #lead .ctn .badge {
    width: 80px;
    right: 4%;
    top: 40px;
  }
}

#care {
  position: relative;
  z-index: 3;
  padding-top: 44%;
  margin-top: -0.5%;
}
#care .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/sec02_bg_pc.png") no-repeat 50% 50% / cover;
  position: absolute;
  top: -16%;
  padding: 26.2% 0;
}
#care .ctn-flex {
  display: flex;
  justify-content: center;
  transition: 0.4s linear;
}
#care .txt {
  width: 50%;
}
#care .fig {
  width: 50%;
}
#care .txt h2 {
  margin-bottom: 40px;
  text-align: center;
}
#care .txt h2 img {
  width: 95%;
}
#care .txt p {
  font-size: 17px;
  letter-spacing: 0.1rem;
  text-align: center;
}
#care .txt p sub {
  font-size: 10px;
  vertical-align: baseline;
}
#care .txt p span {
  display: block;
}
#care .fig figure {
  margin-bottom: 8px;
  text-align: center;
}
#care .fig figure img {
  width: 100%;
}
#care .title_box {
  margin-bottom: -2%;
}
#care .title_box .ttl_inner {
  text-align: center;
}
#care .title_box .ttl_inner img {
  width: 38.81%;
}
#care .out_line {
  width: 100%;
}
#care .inner_box_img .tyusen_box {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(19%, 19%);
  width: 21.8%;
  padding-top: 18%;
  overflow: hidden;
  border-radius: 50%;
}
#care .inner_box_img {
  width: 52.083%;
  text-align: center;
  position: relative;
  margin: auto;
}
#care .inner_box_img .btn_box {
  position: absolute;
  bottom: 2%;
  left: 51.5%;
  transform: translateX(-50%);
  width: 96%;
}
#care .inner_box_img .btn_box a {
  transition: 0.5s;
  transform: translateY(0);
  display: block;
}
#care .inner_box_img .btn_box a:hover {
  transform: translateY(-5px);
}

#care .inner_box_img .btn_box img {
  width: 100%;
}
#care .inner_box_img img {
  width: 100%;
  text-align: center;
}
#care .inner_box_img .tyusen_box img {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#care.show .ctn-flex {
  opacity: 1;
}
@media (max-width: 768px) {
  #care .bg {
    background: url("../img/bg/sec02_bg_sp.png") no-repeat 50% 50% / cover;
    padding: 107% 0 40%;
    top: -23%;
  }
  #care {
    padding-top: 110%;
  }
  #care .ctn-flex {
    display: block;
  }
  #care .txt {
    width: 100%;
    margin: 0 auto 20px;
  }
  #care .fig {
    width: 100%;
  }
  #care .txt h2 {
    margin-bottom: 20px;
  }
  #care .txt p {
    font-size: 14px;
  }
  #care .title_box .ttl_inner img {
    width: 87.94%;
  }
  #care .inner_box_img {
    width: 89.94%;
  }
  #care .inner_box_img .btn_box {
    position: absolute;
    bottom: 2%;
    left: 52.5%;
    transform: translateX(-50%);
    width: 85.5%;
  }
  #care .title_box {
    margin-bottom: 1%;
  }
  #care .inner_box_img .tyusen_box {
    width: 59.58%;
    padding-top: 12%;
    transform: translate(-6%, 29%);
    border-radius: 100px;
  }
}

#develop {
  position: relative;
  z-index: 3;
  padding-top: 98%;
}
#develop .bg {
  width: 100%;
  margin: 0 auto;
  background: url(../img/sec04_img.png) no-repeat center center / cover;
  height: 100%;
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  #develop .bg {
    width: 100%;
    margin: 0 auto;
    background: url(../img/sec04_img_sp.png) no-repeat center center / cover;
    height: 100%;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
  }
  #develop {
    padding-top: 213%;
  }
}
@media (max-width: 481px) {
  #develop .ctn h2 {
    margin-bottom: 12px;
  }
  #develop .item-sp {
    margin: 0 auto 12px;
  }
  #develop .txt {
    width: 80%;
    margin: auto;
  }
  #develop .txt h3 {
    margin-bottom: 8px;
  }
  #develop .txt p {
    font-size: 11px;
    letter-spacing: 0.05rem;
  }
}

#program {
  position: relative;
  z-index: 4;
}
#program .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/sec11_bg.png") no-repeat center center / cover;
}
#program .inner-sct {
  position: relative;
  margin: 0 auto;
  padding: 210px 0px 150px;
}

#program .box .memo {
  width: 100%;
}
#program .box .memo ul li {
  color: #f0b76c;
  font-size: 10px;
  line-height: 1.2;
}
#program .cpn {
  position: absolute;
  right: 4%;
  bottom: 50px;
  width: 108px;
}
#program .cpn img {
  width: 100%;
}
@media (max-width: 1001px) {
  #program .box .tit {
    padding: 20px 30px 0;
  }
}
@media (max-width: 801px) {
  #program .box {
    border-radius: 20px;
  }
  #program .box .ctn-flex {
    display: block;
  }
  #program .box .txt p span {
    display: inline;
  }
}
@media (max-width: 768px) {
  #program .bg {
    background: url("../img/bg/sec11_bg_sp.png") no-repeat center center / cover;
  }
  #program .inner-sct {
    padding: 32vw 0px 35vw;
  }
  #program .ttl h2 {
    margin-bottom: 20px;
  }
  #program .ttl h2 img.pc {
    display: none;
  }
  #program .ttl h2 img.sp {
    display: block;
    margin: 0 auto;
  }
  #program .box .tit h3 img.pc {
    display: none;
  }
  #program .box .tit h3 img.sp {
    display: block;
    margin: 0 auto;
  }
  #program .box .txt p {
    font-size: 13px;
  }
}

#program .box.care-1 .ctn-flex {
  padding: 0 50px;
  background: url("../img/care-1-bg.jpg") 100% 100% / cover;
}
#program .box.care-1 .txt {
  width: 50%;
  padding-top: 30px;
}
#program .box.care-1 .fig {
  width: 50%;
  padding-bottom: 20px;
}
#program .box.care-1 .fig .fig-ctn {
  position: relative;
}
#program .box.care-1 .fig .fig-ctn figure {
  position: relative;
  z-index: 1;
  text-align: center;
}
#program .box.care-1 .fig .fig-ctn figure img {
  position: relative;
  width: 38%;
  max-width: 110px;
  margin: 0 auto;
  opacity: 0;
  transition: 0.8s ease 0.4s;
  transform: translateY(-20px);
}
#program .box.care-1 .fig .fig-ctn .icn {
  position: absolute;
  width: 75px;
  opacity: 0;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-1 {
  top: 60px;
  left: 8px;
  transition: 1.2s ease 0.6s;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-2 {
  top: 160px;
  left: 20px;
  transition: 1.2s ease 0.8s;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-3 {
  top: 0px;
  right: 20px;
  transition: 1.2s ease 1s;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-4 {
  top: 80px;
  right: 0px;
  transition: 1.2s ease 1.2s;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-5 {
  top: 180px;
  right: 10px;
  transition: 1.2s ease 1.4s;
}
#program .box.care-1 .fig .fig-ctn .icn img {
  position: relative;
  width: 100%;
  animation: 3s ease-in-out shake infinite;
}
#program .box.care-1 .fig .fig-ctn .icn.icn-2 img,
#program .box.care-1 .fig .fig-ctn .icn.icn-4 img {
  animation: 2.6s ease-in-out shake infinite;
}
#program .box.care-1 .memo {
  position: absolute;
  left: 0;
  bottom: 20px;
}
#program .box.care-1 .memo ul {
  width: 50%;
  padding-left: 50px;
}
#program .slick-active .box.care-1 .fig .fig-ctn figure img {
  opacity: 1;
  transform: translateY(0px);
}
#program .slick-active .box.care-1 .fig .fig-ctn .icn {
  opacity: 1;
}
@media (max-width: 1001px) {
  #program .box.care-1 .ctn-flex {
    padding: 0 30px;
  }
  #program .box.care-1 .txt {
    min-height: 140px;
    padding-top: 20px;
  }
  #program .box.care-1 .fig .fig-ctn {
    padding: 65px 0 20px;
  }
  #program .box.care-1 .fig .fig-ctn figure img {
    width: 60px;
  }
  #program .box.care-1 .fig .fig-ctn .icn {
    width: 60px;
  }
  #program .box.care-1 .memo ul {
    padding-left: 30px;
  }
}
@media (max-width: 801px) {
  #program .box.care-1 .ctn-flex {
    padding: 0 30px 20px;
    background: url("../img/care-1-bg-sp.jpg") 50% 50% / 100% auto;
  }
  #program .box.care-1 .txt {
    width: 100%;
    padding-top: 10px;
  }
  #program .box.care-1 .fig {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  #program .box.care-1 .memo {
    position: relative;
    left: auto;
    bottom: auto;
  }
  #program .box.care-1 .memo ul {
    width: 100%;
    padding: 0px;
  }
}
@media (max-width: 641px) {
  #program .box.care-1 .txt {
    min-height: auto;
    margin-bottom: 18px;
    padding-top: 12px;
  }
  #program .box.care-1 .fig {
    width: 75%;
    padding-bottom: 10px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-5 {
    top: auto;
    bottom: 10px;
  }
}
@media (max-width: 481px) {
  #program .box.care-1 .ctn-flex {
    padding: 0 15px 10px;
  }
  #program .box.care-1 .txt {
    margin-bottom: 0px;
    padding-top: 8px;
  }
  #program .box.care-1 .fig {
    width: 100%;
  }
  #program .box.care-1 .fig .fig-ctn {
    padding: 40px 0 10px;
  }
  #program .box.care-1 .fig .fig-ctn .icn {
    width: 55px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-1 {
    top: 40px;
    left: 0px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-2 {
    top: 120px;
    left: 10px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-3 {
    top: 6px;
    right: 20px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-4 {
    top: 70px;
    right: 0px;
  }
  #program .box.care-1 .fig .fig-ctn .icn.icn-5 {
    top: 140px;
    right: 10px;
  }
}

#program .box.care-2 .ctn-flex {
  padding: 0 20px;
}
#program .box.care-2 .txt {
  width: 50%;
  padding-top: 30px;
  padding-left: 30px;
}
#program .box.care-2 .fig {
  width: 50%;
}
#program .box.care-2 .fig .fig-ctn {
  position: relative;
  width: 92%;
  margin: 0 auto;
  padding-top: 92%;
}
#program .box.care-2 .fig .fig-ctn .icns {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 0%;
  right: 0%;
  width: 96%;
  height: 96%;
  animation: 200s linear big-circle infinite;
}
#program .box.care-2 .fig .fig-ctn .icn {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 24%;
  max-width: 100px;
  height: 50%;
  transform-origin: 50% 100%;
}
#program .box.care-2 .fig .fig-ctn .icn div {
  position: relative;
  transform: translateY(100%);
  opacity: 0;
}

#program .box.care-2 .fig .fig-ctn .icn img {
  position: relative;
  width: 100%;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-1 {
  transform: translate(-50%, 0);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 {
  transform: translate(-50%, 0) rotate(36deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 {
  transform: translate(-50%, 0) rotate(72deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 {
  transform: translate(-50%, 0) rotate(108deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 {
  transform: translate(-50%, 0) rotate(144deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 {
  transform: translate(-50%, 0) rotate(180deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 {
  transform: translate(-50%, 0) rotate(216deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 {
  transform: translate(-50%, 0) rotate(252deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 {
  transform: translate(-50%, 0) rotate(288deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-10 {
  transform: translate(-50%, 0) rotate(324deg);
}
#program .box.care-2 .fig .fig-ctn .icn.icn-1 div {
  transition: 0.5s ease-out 0s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 div {
  transition: 0.5s ease-out 0.1s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 div {
  transition: 0.5s ease-out 0.2s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 div {
  transition: 0.5s ease-out 0.3s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 div {
  transition: 0.5s ease-out 0.4s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 div {
  transition: 0.5s ease-out 0.5s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 div {
  transition: 0.5s ease-out 0.6s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 div {
  transition: 0.5s ease-out 0.7s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 div {
  transition: 0.5s ease-out 0.8s;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-10 div {
  transition: 0.5s ease-out 0.9s;
}

#program .box.care-2 .fig .fig-ctn .icn.icn-1 img {
  animation: 200s linear circle1 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-2 img {
  animation: 200s linear circle2 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-3 img {
  animation: 200s linear circle3 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-4 img {
  animation: 200s linear circle4 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-5 img {
  animation: 200s linear circle5 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-6 img {
  animation: 200s linear circle6 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-7 img {
  animation: 200s linear circle7 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-8 img {
  animation: 200s linear circle8 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-9 img {
  animation: 200s linear circle9 infinite;
}
#program .box.care-2 .fig .fig-ctn .icn.icn-10 img {
  animation: 200s linear circle10 infinite;
}
#program .box.care-2 .memo {
  position: absolute;
  left: 0;
  bottom: 20px;
}
#program .box.care-2 .memo ul {
  width: 50%;
  padding-left: 50px;
}
#program .slick-active .box.care-2 .fig .fig-ctn .icn div {
  opacity: 1;
  transform: translateY(0%);
}
@media (max-width: 1001px) {
  #program .box.care-2 .ctn-flex {
    padding: 0 20px 20px;
  }
  #program .box.care-2 .txt {
    padding-top: 10px;
    padding-left: 10px;
  }
  #program .box.care-2 .memo ul {
    padding-left: 30px;
  }
}
@media (max-width: 801px) {
  #program .box.care-2 .ctn-flex {
    padding: 0 30px 20px;
  }
  #program .box.care-2 .txt {
    width: 100%;
    min-height: 90px;
    padding-top: 12px;
    padding-left: 0px;
  }
  #program .box.care-2 .fig {
    width: 65%;
    margin: 0 auto;
  }
  #program .box.care-2 .memo {
    position: relative;
    left: auto;
    bottom: auto;
  }
  #program .box.care-2 .memo ul {
    width: 100%;
    padding-left: 0px;
  }
}
@media (max-width: 641px) {
  #program .box.care-2 .txt {
    min-height: auto;
    margin-bottom: 8px;
  }
  #program .box.care-2 .fig {
    width: 100%;
  }
}
@media (max-width: 481px) {
  #program .box.care-2 .ctn-flex {
    padding: 0 15px 12px;
  }
  #program .box.care-2 .fig {
    margin: 0 auto 10px;
  }
  #program .box.care-2 .fig .fig-ctn {
    width: 100%;
    padding-top: 100%;
  }
}

#program .box.care-3 .ctn-flex {
  padding: 20px 20px 30px;
}
#program .box.care-3 .txt {
  width: 50%;
  padding-top: 30px;
  padding-left: 30px;
}
#program .box.care-3 .fig {
  width: 50%;
  padding-top: 12px;
}
#program .box.care-3 .fig figure {
  text-align: center;
}
#program .box.care-3 .fig figure img {
  width: 100%;
}
#program .box.care-3 .fig figure img.sp {
  display: none;
}
#program .box.care-3 .fig figure figcaption {
  margin-top: 10px;
  font-size: 10px;
}
#program .box.care-3 .memo {
  position: absolute;
  left: 0;
  bottom: 20px;
}
#program .box.care-3 .memo ul {
  width: 50%;
  padding-left: 50px;
}
@media (max-width: 1001px) {
  #program .box.care-3 .txt {
    padding-left: 10px;
  }
  #program .box.care-3 .memo ul {
    padding-left: 30px;
  }
}
@media (max-width: 801px) {
  #program .box.care-3 .ctn-flex {
    padding: 20px 30px 20px;
  }
  #program .box.care-3 .txt {
    width: 100%;
    min-height: 140px;
    padding-top: 0px;
    padding-left: 0px;
  }
  #program .box.care-3 .fig {
    width: 100%;
    margin-bottom: 24px;
    padding-top: 6px;
  }
  #program .box.care-3 .fig figure img {
    width: 80%;
    max-width: 350px;
    margin: 0 auto;
  }
  #program .box.care-3 .fig figure figcaption {
    margin-top: 6px;
  }
  #program .box.care-3 .memo {
    position: relative;
    left: auto;
    bottom: auto;
  }
  #program .box.care-3 .memo ul {
    width: 100%;
    padding-left: 0px;
  }
}
@media (max-width: 641px) {
  #program .box.care-3 .ctn-flex {
    padding: 10px 30px 20px;
  }
  #program .box.care-3 .txt {
    min-height: auto;
  }
  #program .box.care-3 .fig {
    margin-bottom: 12px;
    padding-top: 6px;
  }
  #program .box.care-3 .fig figure img.pc {
    display: none;
  }
  #program .box.care-3 .fig figure img.sp {
    display: block;
    max-width: 250px;
    margin: 0 auto;
  }
}
@media (max-width: 481px) {
  #program .box.care-3 .ctn-flex {
    padding: 10px 15px 12px;
  }
  #program .box.care-3 .fig {
    padding-top: 12px;
  }
}

#program .box.care-4 .ctn-flex {
  padding: 0 50px;
}
#program .box.care-4 .txt {
  width: 52%;
  padding-top: 15px;
}
#program .box.care-4 .fig {
  width: 48%;
  padding-bottom: 20px;
}
#program .box.care-4 .txt p.icn {
  margin-bottom: 10px;
}
#program .box.care-4 .txt p.icn img {
  width: 60%;
  max-width: 210px;
}
#program .box.care-4 .fig .fig-ctn {
  position: relative;
  margin: -10px 0 10px;
}
#program .box.care-4 .fig figure {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transition: 0.8s linear 1s;
}
#program .box.care-4 .fig figure img {
  width: 72px;
  margin: 0 auto;
}
#program .box.care-4 .fig .package-1,
#program .box.care-4 .fig .package-2 {
  width: 72px;
  position: absolute;
  left: 50%;
  top: 0;
  opacity: 1;
  transform: translateX(-50%);
}
#program .box.care-4 .fig .package-1 img {
  width: 100%;
  transform: translateX(-120%);
}
#program .box.care-4 .fig .package-2 img {
  width: 100%;
  transform: translatex(140%);
}
#program .box.care-4 .fig ul {
  font-size: 0;
  text-align: center;
}
#program .box.care-4 .fig ul li {
  position: relative;
  display: inline-block;
  width: 28%;
  margin: 0 auto;
}
#program .box.care-4 .fig ul li img {
  width: 100%;
}
#program .box.care-4 .fig ul li img.def {
  position: relative;
  z-index: 1;
  opacity: 1;
}
#program .box.care-4 .fig ul li img.hv {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 2;
}
#program .box.care-4 .fig li:nth-child(1) img.hv {
  animation: 10s linear fade-InOut-1 1s infinite;
}
#program .box.care-4 .fig li:nth-child(2) img.hv {
  animation: 10s linear fade-InOut-2 1s infinite;
}
#program .box.care-4 .fig li:nth-child(3) img.hv {
  animation: 10s linear fade-InOut-3 1s infinite;
}
#program .box.care-4 .fig ul li span {
  position: relative;
  display: block;
  width: 100%;
}
#program .box.care-4 .fig ul li span:before,
#program .box.care-4 .fig ul li span:after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, 0%) scale(0.75);
  animation: pulsate 3s linear infinite;
  z-index: 3;
}
#program .box.care-4 .fig ul li:nth-child(1) span:before,
#program .box.care-4 .fig ul li:nth-child(1) span:after {
  border: 1px solid #c3cc42;
}
#program .box.care-4 .fig ul li:nth-child(2) span:before,
#program .box.care-4 .fig ul li:nth-child(2) span:after {
  border: 1px solid #69c3be;
}
#program .box.care-4 .fig ul li:nth-child(3) span:before,
#program .box.care-4 .fig ul li:nth-child(3) span:after {
  border: 1px solid #8297d9;
}
#program .box.care-4 .fig ul li span:after {
  animation-delay: 1s;
}
#program .box.care-4 .memo {
  position: absolute;
  left: 0;
  bottom: 20px;
}
#program .box.care-4 .memo ul {
  width: 50%;
  padding-left: 50px;
}
@media (max-width: 1001px) {
  #program .box.care-4 .ctn-flex {
    padding: 0 20px;
  }
  #program .box.care-4 .txt {
    padding-top: 6px;
    padding-left: 10px;
  }
  #program .box.care-4 .txt p.icn {
    margin-bottom: 6px;
  }
  #program .box.care-4 .txt p span {
    display: inline;
  }
  #program .box.care-4 .fig .fig-ctn {
    margin: 10px 0 20px;
  }
  #program .box.care-4 .fig figure img {
    width: 50px;
  }
  #program .box.care-4 .fig .package-1,
  #program .box.care-4 .fig .package-2 {
    width: 50px;
  }
  #program .box.care-4 .memo ul {
    padding-left: 30px;
  }
}
@media (max-width: 801px) {
  #program .box.care-4 .ctn-flex {
    padding: 0 30px 20px;
  }
  #program .box.care-4 .txt {
    width: 100%;
    padding-top: 0px;
    padding-left: 0px;
  }
  #program .box.care-4 .fig {
    width: 100%;
    padding: 12px 0;
  }
  #program .box.care-4 .txt p.icn {
    margin-bottom: 10px;
  }
  #program .box.care-4 .txt p.icn img {
    max-width: 180px;
    margin: 0 auto;
  }
  #program .box.care-4 .fig .fig-ctn {
    margin: 0px auto 10px;
  }
  #program .box.care-4 .fig ul {
    max-width: 320px;
    margin: 0 auto;
  }
  #program .box.care-4 .memo {
    position: relative;
    left: auto;
    bottom: auto;
  }
  #program .box.care-4 .memo ul {
    width: 100%;
    padding-left: 0px;
  }
}
@media (max-width: 641px) {
  #program .box.care-4 .ctn-flex {
    padding: 10px 30px 20px;
  }
  #program .box.care-4 .txt p.icn img {
    max-width: 200px;
  }
}
@media (max-width: 481px) {
  #program .box.care-4 .ctn-flex {
    padding: 0 15px 12px;
  }
  #program .box.care-4 .txt {
    padding-top: 10px;
  }
  #program .box.care-4 .fig {
    padding: 6px 0;
  }
  #program .box.care-4 .fig ul {
    max-width: 85%;
  }
}

#program .slick-active .box.care-4 .fig .fig-ctn .package-1 img {
  animation: 0.8s linear movin 0.4s forwards;
}
#program .slick-active .box.care-4 .fig .fig-ctn .package-2 img {
  animation: 0.8s linear movin 0.4s forwards;
}
#program .slick-active .box.care-4 .fig figure {
  opacity: 1;
}
@keyframes movin {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
}

#program .box.care-5 .ctn-flex {
  padding: 0 20px;
}
#program .box.care-5 .txt {
  width: 48%;
  padding-top: 40px;
  padding-left: 30px;
  padding-right: 20px;
}
#program .box.care-5 .fig {
  width: 52%;
  padding: 35px 0;
}
#program .box.care-5 .fig figure img {
  width: 100%;
}
#program .box.care-5 .fig figure figcaption {
  color: #f0b76c;
  font-size: 10px;
  text-align: right;
}
#program .box.care-5 .memo {
  position: absolute;
  left: 0;
  bottom: 20px;
}
#program .box.care-5 .memo ul {
  width: 45%;
  padding-left: 50px;
}
@media (max-width: 1001px) {
  #program .box.care-5 .txt {
    width: 52%;
    padding-top: 10px;
    padding-left: 10px;
  }
  #program .box.care-5 .fig {
    width: 48%;
    padding: 15px 0 70px;
  }
  #program .box.care-5 .memo ul {
    width: 90%;
    padding-left: 30px;
  }
}
@media (max-width: 801px) {
  #program .box.care-5 .ctn-flex {
    padding: 0 30px 20px;
  }
  #program .box.care-5 .txt {
    width: 100%;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #program .box.care-5 .fig {
    width: 100%;
    padding: 15px 0;
  }
  #program .box.care-5 .fig figure img {
    max-width: 400px;
    margin: 0 auto;
  }
  #program .box.care-5 .memo {
    position: relative;
    left: auto;
    bottom: auto;
  }
  #program .box.care-5 .memo ul {
    width: 100%;
    padding-left: 0px;
  }
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
  #program .box.care-5 .ctn-flex {
    padding: 0 15px 12px;
  }
  #program .box.care-5 .fig {
    padding: 25px 0;
  }
}

#program .slide-aside {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 0;
}
#program .slide-aside ul {
  font-size: 0;
  text-align: center;
}
#program .slide-aside ul li {
  position: relative;
  display: inline-block;
  width: 27px;
  margin: 0 8px;
}
#program .slide-aside ul li span {
  position: relative;
  z-index: 2;
  display: block;
  color: #fcd88b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#program .slide-aside ul li.current span {
  color: #f09805;
}
#program .slide-aside ul li:after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border: solid 2px #fcd88b;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
#program .slide-aside ul li svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%) rotate(-90deg);
  z-index: 2;
}
#program .slide-aside ul li svg circle {
  fill: transparent;
}
#program .slide-aside ul li.current svg circle {
  stroke: #f09805;
  stroke-width: 8;
  animation: circle 4.8s forwards;
}

#program .slick-arrow {
  bottom: -60px;
  left: 50%;
  background: none;
}
#program .slick-prev {
  transform: translateX(-160px);
}
#program .slick-next {
  transform: translateX(120px);
}
@media (max-width: 481px) {
  #program .slide-aside {
    padding: 20px 0;
  }
  #program .slick-arrow {
    bottom: -50px;
  }
  #program .slick-prev {
    transform: translateX(-150px);
  }
  #program .slick-next {
    transform: translateX(110px);
  }
}

#product {
  position: relative;
  z-index: 3;
}
#product .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/product.jpg") no-repeat 50% 0;
}
#product .inner-sct {
  padding-top: 110px;
}
#product .ttl h2 {
  margin-bottom: 20px;
}
#product .ttl h2 img {
  max-width: 450px;
}
#product .blank {
  position: relative;
  width: 100%;
  height: 540px;
  z-index: 5;
}

#product .btn-open {
  position: absolute;
  width: 100%;
  z-index: 2;
  bottom: 60px;
  transition: 0.4s linear;
}
#product .btn-open .btn-inner {
  width: 72%;
  max-width: 440px;
  margin: 0 auto;
  padding: 4px;
  background: #f69f03;
  border-radius: 10px;
  cursor: pointer;
}
#product .btn-open .btn-inner div {
  position: relative;
  padding: 15px;
  border: solid 2px #fff;
  border-radius: 8px;
}
#product .btn-open .btn-inner div:before,
#product .btn-open .btn-inner div:after {
  content: "";
  display: block;
  width: 2px;
  height: 20px;
  background: #fff;
  position: absolute;
  right: 22px;
  top: 50%;
  transition: 0.4s linear;
}
#product .btn-open .btn-inner div:before {
  transform: translate(0, -50%);
}
#product .btn-open .btn-inner div:after {
  transform: translate(0, -50%) rotate(90deg);
}
#product .btn-open .btn-inner div p {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18rem;
  line-height: 1;
  text-align: center;
}
#product .btn-open .btn-inner:hover {
  background: #f8b235;
}

#product .btn-open.open {
  transform: translateY(88px);
}
#product .btn-open.open .btn-inner div:before {
  transform: translate(0, -50%) rotate(90deg);
}
#product .hide-ctn {
  position: relative;
  display: none;
  z-index: 2;
}
#product .product-bloc {
  position: relative;
  background: linear-gradient(#fff4c9, #ffe04e);
}
#product .product-bloc .inner-bloc {
  position: relative;
  width: 92%;
  margin: 0 auto;
  padding: 80px 0 60px;
  z-index: 2;
}
#product .product-bloc .ctn-flex {
  display: flex;
  width: 100%;
}
#product .product-bloc .pht {
  width: 36%;
}
#product .product-bloc .txt {
  width: 64%;
  padding-left: 40px;
}
#product .product-bloc .pht figure {
  text-align: center;
}
#product .product-bloc .pht figure.tr {
  text-align: right;
}
#product .product-bloc .pht figure.tr img {
  width: 50%;
  max-width: 135px;
}
#product .product-bloc .txt h3 {
  margin-bottom: 18px;
}
#product .product-bloc .txt h3 img {
  width: 100%;
  max-width: 480px;
}
#product .product-bloc .txt h3 img.sp {
  display: none;
}
#product .product-bloc .txt p.lead {
  margin-bottom: 18px;
  color: #786245;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
#product .product-bloc .txt p.lead sub {
  font-size: 10px;
  vertical-align: baseline;
}
#product .product-bloc .txt p.price {
  margin-bottom: 10px;
  color: #f68703;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
#product .product-bloc .txt dl {
  display: table;
  width: 100%;
  margin-bottom: 18px;
}
#product .product-bloc .txt dl dt,
#product .product-bloc .txt dl dd {
  display: table-cell;
  vertical-align: middle;
}
#product .product-bloc .txt dl dt {
  width: 72px;
}
#product .product-bloc .txt dl dt img {
  width: 100%;
}
#product .product-bloc .txt dl dd {
  width: auto;
  padding-left: 20px;
  color: #786245;
  font-size: 18px;
  font-weight: 700;
}
#product .product-bloc .txt .btn-cart {
  width: 100%;
  max-width: 260px;
}
#product .product-bloc .txt .btn-cart a {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 0;
  background: linear-gradient(#ffb96e, #ff9e47 70%, #ff962f);
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
#product .product-bloc .txt .btn-cart a:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#product .product-bloc .txt .btn-cart a svg {
  display: inline-block;
  width: 25px;
  margin-right: 10px;
  vertical-align: middle;
  fill: #fff;
}
#product .product-bloc .txt .btn-cart a em {
  display: inline-block;
  font-weight: 700;
  vertical-align: middle;
}
#product .product-bloc .txt .btn-cart a:hover {
  opacity: 0.8;
}

#product .product-bloc .txt .btn-cart span {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 0;
  background: #aaa;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
#product .product-bloc .txt .btn-cart span svg {
  display: inline-block;
  width: 25px;
  margin-right: 10px;
  vertical-align: middle;
  fill: #fff;
}
#product .product-bloc .txt .btn-cart span em {
  display: inline-block;
  font-weight: 700;
  vertical-align: middle;
}

#product .product-bloc .note {
  position: absolute;
  bottom: 15px;
  z-index: 1;
}
#product .product-bloc .note ul {
  width: 92%;
  margin: 0 auto;
}
#product .product-bloc .note ul li {
  text-align: right;
}
#product .product-bloc .note ul li br {
  display: none;
}
#product .product-bloc .line {
  height: 90px;
}

#product .product-bloc .bubble {
  position: absolute;
  width: 160px;
  height: 100%;
  position: absolute;
  top: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#product .product-bloc .bubble.bubble-1-L {
  left: 8%;
  background-image: url("../img/product/bubble-1.png");
}
#product .product-bloc .bubble.bubble-1-R {
  right: 8%;
  background-image: url("../img/product/bubble-2.png");
}
#product .product-bloc .bubble.bubble-2-L {
  left: 8%;
  background-image: url("../img/product/bubble-1.png");
}
#product .product-bloc .bubble.bubble-2-R {
  right: 8%;
  background-image: url("../img/product/bubble-2.png");
}
#product .product-bloc .bubble.bubble-3-L {
  left: 8%;
  background-image: url("../img/product/bubble-1.png");
}
#product .product-bloc .bubble.bubble-3-R {
  right: 8%;
  background-image: url("../img/product/bubble-2.png");
}
#product .product-bloc .bubble.bubble-4-L {
  left: 8%;
  background-image: url("../img/product/bubble-2.png");
}
#product .product-bloc .bubble.bubble-4-R {
  right: 8%;
  background-image: url("../img/product/bubble-1.png");
}
@media (max-width: 801px) {
  #product .product-bloc .pht {
    width: 30%;
  }
  #product .product-bloc .txt {
    width: 70%;
    padding-left: 0px;
  }
  #product .product-bloc .pht figure.tr {
    text-align: center;
  }
}
@media (max-width: 641px) {
  #product .bg {
    background: url("../img/bg/product-sp.jpg") no-repeat 50% 0 / 100% auto;
  }
  #product .blank {
    height: 90vw;
  }
  #product .btn-open {
    bottom: 40px;
  }
  #product .btn-open.open {
    transform: translateY(68px);
  }

  #product .product-bloc {
    padding-bottom: 20px;
  }
  #product .product-bloc .inner-bloc {
    padding: 60px 0 20px;
  }
  #product .product-bloc .ctn-flex {
    display: block;
  }
  #product .product-bloc .pht {
    width: 100%;
    margin: 0 auto 20px;
  }
  #product .product-bloc .txt {
    width: 100%;
  }
  #product .product-bloc .txt h3 img {
    width: 80%;
    max-width: 480px;
  }
  #product .product-bloc .txt h3 img.pc {
    display: none;
  }
  #product .product-bloc .txt h3 img.sp {
    display: block;
    margin: 0 auto;
  }
  #product .product-bloc .txt p.lead {
    text-align: center;
  }
  #product .product-bloc .txt p.price {
    text-align: center;
  }
  #product .product-bloc .txt dl {
    display: inline-block;
    margin: 0 auto 12px;
    text-align: center;
  }
  #product .product-bloc .txt dl dt,
  #product .product-bloc .txt dl dd {
    display: inline-block;
  }
  #product .product-bloc .txt dl dd {
    padding-left: 12px;
  }
  #product .product-bloc .txt .btn-cart {
    margin: 0 auto;
  }
  #product .product-bloc .note {
    position: relative;
    bottom: auto;
  }
  #product .product-bloc .note ul li {
    text-align: center;
  }

  #product .product-bloc .line {
    height: 60px;
  }

  #product .product-bloc .bubble {
    width: 120px;
  }
  #product .product-bloc .bubble.bubble-1-L {
    left: 2%;
  }
  #product .product-bloc .bubble.bubble-1-R {
    right: 2%;
  }
  #product .product-bloc .bubble.bubble-2-L {
    left: 2%;
  }
  #product .product-bloc .bubble.bubble-2-R {
    right: 2%;
  }
  #product .product-bloc .bubble.bubble-3-L {
    left: 2%;
  }
  #product .product-bloc .bubble.bubble-3-R {
    right: 2%;
  }
  #product .product-bloc .bubble.bubble-4-L {
    left: 2%;
  }
  #product .product-bloc .bubble.bubble-4-R {
    right: 2%;
  }
}
@media (max-width: 481px) {
  #product .inner-sct {
    padding-top: 90px;
  }
  #product .ttl h2 {
    margin-bottom: 12px;
  }
  #product .ttl h2 img {
    width: 65%;
  }
  #product .blank {
    height: 86vw;
  }
  #product .btn-open .btn-inner {
    padding: 3px;
    border-radius: 8px;
  }
  #product .btn-open .btn-inner div {
    padding: 12px;
    border-width: 1px;
    border-radius: 6px;
  }
  #product .btn-open .btn-inner div:before,
  #product .btn-open .btn-inner div:after {
    height: 18px;
  }
  #product .btn-open .btn-inner div p {
    font-size: 14px;
  }
  #product .btn-open.open {
    transform: translateY(62px);
  }

  #product .product-bloc {
    padding-bottom: 12px;
  }
  #product .product-bloc .inner-bloc {
    padding: 40px 0 15px;
  }
  #product .product-bloc .txt h3 {
    margin-bottom: 10px;
  }
  #product .product-bloc .txt p.lead {
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.05rem;
  }
  #product .product-bloc .txt dl {
    margin-bottom: 8px;
  }
  #product .product-bloc .txt dl dt {
    width: 50px;
  }
  #product .product-bloc .txt dl dd {
    padding-left: 8px;
    font-size: 13px;
  }
  #product .product-bloc .txt p.price {
    font-size: 13px;
    letter-spacing: 0.05rem;
  }
  #product .product-bloc .txt .btn-cart {
    max-width: 240px;
  }
  #product .product-bloc .txt .btn-cart a {
    padding: 6px 0;
    font-size: 16px;
  }
  #product .product-bloc .txt .btn-cart a svg {
    width: 20px;
  }
  #product .product-bloc .note ul li br {
    display: block;
  }

  #product .product-bloc .bubble {
    width: 120px;
  }
  #product .product-bloc .bubble.bubble-1-L {
    left: 0%;
    background-size: 150px auto;
    background-position-x: 100%;
  }
  #product .product-bloc .bubble.bubble-1-R {
    right: 0%;
    background-size: 150px auto;
    background-position-x: 0%;
  }
  #product .product-bloc .bubble.bubble-2-L {
    left: 0%;
    background-size: 150px auto;
    background-position-x: 100%;
  }
  #product .product-bloc .bubble.bubble-2-R {
    right: 0%;
    background-size: 150px auto;
    background-position-x: 0%;
  }
  #product .product-bloc .bubble.bubble-3-L {
    left: 0%;
    background-size: 150px auto;
    background-position-x: 100%;
  }
  #product .product-bloc .bubble.bubble-3-R {
    right: 0%;
    background-size: 150px auto;
    background-position-x: 0%;
  }
  #product .product-bloc .bubble.bubble-4-L {
    left: 0%;
    background-size: 150px auto;
    background-position-x: 100%;
  }
  #product .product-bloc .bubble.bubble-4-R {
    right: 0%;
    background-size: 150px auto;
    background-position-x: 0%;
  }
}

#shop {
  position: relative;
  z-index: 3;
  margin-top: -11%;
}
#shop .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/sec09_bg.png") no-repeat center center / cover;
}

#insta {
  position: relative;
  z-index: 3;
}
#insta .bg {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}

#campaign {
  position: relative;
  z-index: 3;
}
#campaign .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/present.jpg") no-repeat 50% 50% / cover;
}
#campaign .inner-sct {
  padding: 40px 0 20px;
}
#campaign h2 {
  margin-bottom: 80px;
  text-align: center;
}
#campaign h2 img {
  width: 90%;
  max-width: 560px;
}
#campaign .ctn {
  position: relative;
  width: 92%;
  max-width: 780px;
  margin: 0 auto;
}
#campaign figure {
  position: relative;
  z-index: 1;
}
#campaign figure img {
  width: 100%;
}
#campaign figure img.sp {
  display: none;
}
#campaign .btn {
  position: absolute;
  width: 100%;
  bottom: 20px;
  z-index: 2;
}
#campaign .btn a {
  display: block;
  width: 40%;
  max-width: 310px;
  margin: 0 10px 0 auto;
  border-radius: 10px;
  overflow: hidden;
}
#campaign .btn a img {
  width: 100%;
}
#campaign .btn a img.sp {
  display: none;
}
#campaign .btn a:hover {
  opacity: 0.8;
}
@media (max-width: 801px) {
  #campaign .btn a {
    margin: 0 8px 0 auto;
  }
}
@media (max-width: 641px) {
  #campaign .inner-sct {
    padding: 0px;
  }
  #campaign h2 {
    display: none;
  }
  #campaign .ctn {
    width: 100%;
  }
  #campaign figure img.pc {
    display: none;
  }
  #campaign figure img.sp {
    display: block;
  }
  #campaign .btn {
    bottom: 6vw;
    padding: 0 16vw;
  }
  #campaign .btn a {
    width: 55%;
    margin: 0px 0px 0px auto;
    border-radius: 6px;
  }
  #campaign .btn a img.pc {
    display: none;
  }
  #campaign .btn a img.sp {
    display: block;
  }
}

#lineup {
  position: relative;
  z-index: 3;
}
#lineup .bg {
  width: 100%;
  margin: 0 auto;
  background: url("../img/bg/lineup.jpg") no-repeat 50% 50% / cover;
}
#lineup .inner-sct {
  width: 90%;
  max-width: 840px;
  margin: 0 auto;
  padding: 50px 0 60px;
}
#lineup .ctn {
  width: 55%;
  padding-left: 8%;
}
#lineup .ctn h3 {
  text-align: center;
}
#lineup .ctn h3 img {
  width: 100%;
}
#lineup .ctn .btn-more {
  width: 85%;
  max-width: 350px;
  margin: 0 auto;
}
#lineup .ctn .btn-more a {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 0;
  border-radius: 8px;
  background: url("../img/bg/btn-lineup.jpg") no-repeat 50% 50% / cover;
  color: #6e6e6e;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
#lineup .ctn .btn-more a svg {
  display: block;
  width: 40px;
  fill: #6e6e6e;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
}
#lineup .ctn .btn-more a:hover {
  opacity: 0.8;
}
@media (max-width: 641px) {
  #lineup .bg {
    background: url("../img/bg/lineup-sp.jpg") no-repeat 50% 50% / 100% auto;
  }
  #lineup .inner-sct {
    padding: 10vw 0 8vw;
  }
  #lineup .ctn {
    width: 100%;
    padding-left: 0%;
  }
  #lineup .ctn h3 {
    width: 52%;
    margin: 0 0 30px;
    text-align: center;
  }
  #lineup .ctn h3 img {
    width: 90%;
  }
  #lineup .ctn .btn-more {
    width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 481px) {
  #lineup .ctn h3 {
    margin: 0 0 20px;
  }
  #lineup .ctn .btn-more a {
    border-radius: 5px;
    font-size: 14px;
  }
  #lineup .ctn .btn-more a svg {
    width: 30px;
  }
}

.sct-special {
  position: relative;
  margin-top: -150px;
  background: url(../img/top/bg-ptn-6.png) no-repeat 50% 50% / auto 100%;
}
.sct-special .inner-sct {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0 120px;
  overflow: hidden;
}
.sct-special .ttl p {
  color: #2c7cb5;
}
.sct-special .slider-special {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 90px 30px;
  text-align: center;
}
.sct-special .slider-special a {
  display: block;
  width: 94%;
  max-width: 320px;
  margin: 0 auto;
}
.sct-special .slider-special a dl dt img {
  width: 100%;
  margin: 0 auto 15px;
  border-radius: 15px;
}
.sct-special .slider-special a dl dd {
  font-size: 18px;
  text-align: left;
}
.sct-special .slider-special a dl dd.tit {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: solid 1px #5c5c5c;
  color: #5c5c5c;
  font-weight: 700;
  text-align: center;
}
.sct-special .slider-special a dl dd.tit sub {
  font-size: 12px;
  vertical-align: bottom;
}
.sct-special .slider-special a dl dd.txt {
  margin-bottom: 10px;
  color: #5c5c5c;
}
.sct-special .slider-special a dl dd.txt sub {
  font-size: 12px;
  vertical-align: bottom;
}
.sct-special .slider-special a dl dd.kome {
  padding-bottom: 12px;
  color: #9c9c9c;
  font-size: 12px;
}
.sct-special .slider-special a:hover {
  opacity: 0.85;
}
.sct-special .slider-special .slick-dots {
  left: 0;
  bottom: 0px;
}

@media (min-width: 1401px) {
  .sct-special {
    background-size: 100% 100%;
  }
}
@media (max-width: 801px) {
  .sct-special {
    margin-top: 0px;
    margin-bottom: -80px;
  }
  .sct-special .inner-sct {
    padding: 12vw 0 16vw;
  }
  .sct-special .ttl {
    margin-bottom: 60px;
  }
  .sct-special .slider-special {
    padding: 0px 60px 30px;
  }
  .sct-special .slider-special .slick-prev {
    left: 0px;
  }
  .sct-special .slider-special .slick-next {
    right: 0px;
  }
}
@media (max-width: 641px) {
  .sct-special .ttl {
    margin-bottom: 40px;
  }
  .sct-special .slider-special {
    width: 92%;
    padding: 0 50px 30px;
  }
  .sct-special .slider-special a dl dd {
    font-size: 14px;
  }
}
@media (max-width: 481px) {
  .sct-special {
    margin-top: 0px;
    background: url(../img/top/bg-ptn-6-sp.png) no-repeat 50% 50% / 100% auto;
  }
  .sct-special .inner-sct {
    padding: 24vw 0 30vw;
  }
  .sct-special .ttl {
    margin-bottom: 30px;
  }
  .sct-special .ttl h2 {
    margin-bottom: 6px;
  }
  .sct-special .ttl h2 img {
    width: 92%;
  }
  .sct-special .slider-special {
    padding: 0px 0px 30px;
  }
  .sct-special .slider-special a {
    width: 92%;
    max-width: 92%;
  }
  .sct-special .slider-special a dl dd.tit sup {
    font-size: 10px;
  }
  .sct-special .slider-special a dl dd.txt sup {
    font-size: 10px;
  }
  .sct-special .slider-special .slick-arrow {
    top: 26%;
  }
}

.sct-honey {
  position: relative;
  margin-top: -80px;
  margin-bottom: -120px;
  background: url(../img/top/bg-ptn-honey.png) no-repeat 50% 50% / cover;
}
.sct-honey .inner-sct {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 80px 0 120px;
  overflow: hidden;
}
.sct-honey h2 {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
  transition: 1s ease;
  opacity: 0;
}
.sct-honey h2:before,
.sct-honey h2:after {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
}
.sct-honey h2:before {
  transform: translate(10px, -20%) rotate(45deg);
}
.sct-honey h2:after {
  transform: translate(10px, -20%) rotate(-45deg);
}
.sct-honey h2 img {
  display: inline-block;
  vertical-align: middle;
}
.sct-honey h2 img.l {
  width: 42%;
  max-width: 350px;
  margin-right: 60px;
}
.sct-honey h2 img.r {
  width: 40%;
  max-width: 320px;
  margin-left: 60px;
}
.sct-honey h3 {
  margin-bottom: 20px;
  text-align: center;
}
.sct-honey h3 img {
  position: relative;
  width: 90%;
  max-width: 680px;
  transition: 1.2s ease 0.2s;
  opacity: 0;
  transform: translateY(30px);
}
.sct-honey p {
  position: relative;
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;
  transition: 1.2s ease 0.5s;
  opacity: 0;
  transform: translateY(30px);
}
.sct-honey p sub {
  font-size: 12px;
  vertical-align: bottom;
}
.sct-honey .btn {
  width: 80%;
  max-width: 360px;
  margin: 0 auto 20px;
}
.sct-honey .btn a {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 8px #999;
  transition: 1.2s ease 0.8s;
  opacity: 0;
  transform: translateY(30px);
}
.sct-honey .btn a:hover {
  opacity: 0.8;
}
.sct-honey .btn a img {
  width: 100%;
}
.sct-honey figure {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
  transition: 1.8s ease 0.8s;
  opacity: 0;
}
.sct-honey figure img {
  width: 100%;
}
.sct-honey .float-item {
  position: relative;
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
}
.sct-honey .float {
  position: absolute;
  width: 160px;
  height: 380px;
}
.sct-honey .item1 {
  top: -180px;
  left: 0%;
  background: url(../img/top/item-ululis-1.png) no-repeat 50% 0 / 100% auto;
  transform: translate(-100px, 0);
  opacity: 0;
}
.sct-honey .item2 {
  top: -180px;
  right: 0%;
  background: url(../img/top/item-honey-1.png) no-repeat 50% 0 / 100% auto;
  transform: translate(100px, 0);
  opacity: 0;
}
.sct-honey .item3 {
  top: 35%;
  left: 6%;
  background: url(../img/top/item-ululis-2.png) no-repeat 50% 40% / 100% auto;
  transform: translate(-100px, 0);
  opacity: 0;
}
.sct-honey .item4 {
  top: 35%;
  right: 6%;
  background: url(../img/top/item-honey-2.png) no-repeat 50% 40% / 100% auto;
  transform: translate(100px, 0);
  opacity: 0;
}
.sct-honey .note {
  bottom: 140px;
}
.sct-honey .note ul {
  max-width: 300px;
  padding-right: 50px;
}
.sct-honey .note ul li {
  color: #b4b4b4;
}

.sct-honey.show h2 {
  opacity: 1;
}
.sct-honey.show h3 img,
.sct-honey.show p,
.sct-honey.show .btn a {
  opacity: 1;
  transform: translateY(0px);
}
.sct-honey.show figure {
  opacity: 1;
}
.sct-honey.show .item1 {
  animation: 1s ease move-in 0.4s forwards;
}
.sct-honey.show .item2 {
  animation: 1s ease move-in 0.4s forwards;
}
.sct-honey.show .item3 {
  animation: 0.8s ease move-in 0.8s forwards;
}
.sct-honey.show .item4 {
  animation: 0.8s ease move-in 0.8s forwards;
}

@media (min-width: 1401px) {
  .sct-honey {
    background-size: 100% 100%;
  }
}
@media (max-width: 1201px) {
  .sct-honey h2 img.l {
    max-width: 280px;
    margin-right: 40px;
  }
  .sct-honey h2 img.r {
    max-width: 260px;
    margin-left: 40px;
  }
  .sct-honey h3 img {
    max-width: 500px;
  }
}
@media (max-width: 1001px) {
  .sct-honey .float {
    width: 120px;
    height: 285px;
  }
  .sct-honey p span {
    display: block;
  }
}
@media (max-width: 801px) {
  .sct-honey {
    margin-top: -50px;
    background: url(../img/top/bg-ptn-honey-sp.png) no-repeat 50% 50% / 100%
      100%;
  }
  .sct-honey .inner-sct {
    padding: 80px 0 60px;
  }

  .sct-honey .float-item {
    margin: 0 auto 30px;
  }
  .sct-honey .item1 {
    position: relative;
    top: 0px;
    left: 5%;
    background-position: 50% 50%;
    transform: translate(-100px, 0);
    opacity: 0;
  }
  .sct-honey .item2 {
    top: 50%;
    right: 5%;
    background-position: 50% 50%;
    transform: translate(100px, -50%);
    opacity: 0;
  }
  .sct-honey .item3 {
    top: 0px;
    left: 23%;
    background-position: 50% 50%;
    transform: translate(-100px, 0);
    opacity: 0;
  }
  .sct-honey .item4 {
    top: 50%;
    right: 23%;
    background-position: 50% 50%;
    transform: translate(100px, -50%);
    opacity: 0;
  }
  .sct-honey figure {
    margin: 0 auto 30px;
  }
  .sct-honey.show .item1 {
    animation: 1s ease move-in 0.4s forwards;
  }
  .sct-honey.show .item2 {
    animation: 1s ease move-in-sp 0.4s forwards;
  }
  .sct-honey.show .item3 {
    animation: 0.8s ease move-in 0.8s forwards;
  }
  .sct-honey.show .item4 {
    animation: 0.8s ease move-in-sp 0.8s forwards;
  }
  .sct-honey .note {
    bottom: auto;
  }
  .sct-honey .note ul {
    max-width: 250px;
    margin: 0 0 0 auto;
    padding-right: 20px;
  }
}
@media (max-width: 481px) {
  .sct-honey .inner-sct {
    padding: 60px 0 40px;
  }
  .sct-honey h2 {
    margin-bottom: 10px;
  }
  .sct-honey h2:before,
  .sct-honey h2:after {
    height: 30px;
  }
  .sct-honey h2:before {
    transform: translate(2px, -20%) rotate(45deg);
  }
  .sct-honey h2:after {
    transform: translate(2px, -20%) rotate(-45deg);
  }
  .sct-honey h2 img {
    display: inline-block;
    vertical-align: middle;
  }
  .sct-honey h2 img.l {
    width: 36%;
    max-width: 180px;
    margin-right: 20px;
  }
  .sct-honey h2 img.r {
    width: 34%;
    max-width: 160px;
    margin-left: 30px;
  }
  .sct-honey h3 {
    margin-bottom: 10px;
  }
  .sct-honey p {
    margin-bottom: 10px;
    font-size: 13px;
  }
  .sct-honey .float {
    width: 80px;
    height: 190px;
  }
  .sct-honey .item1 {
    left: 2%;
  }
  .sct-honey .item2 {
    right: 2%;
  }
  .sct-honey .item3 {
    left: 23%;
  }
  .sct-honey .item4 {
    right: 23%;
  }
  .sct-honey figure {
    margin: 0 auto 10px;
  }
}

.sct-type {
  background: #fff url("../img/top/bg-ptn-5.png") no-repeat 50% 100% / 100% auto;
}
.sct-type .inner-sct {
  width: 100%;
  margin: 0 auto;
  padding: 80px 0 180px;
  transition: 0.8s ease;
  opacity: 0;
}
.sct-type p.txt {
  margin-bottom: 30px;
  text-align: center;
}
.sct-type .ctn {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.sct-type .ctn figure {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}
.sct-type .ctn figure img {
  width: 100%;
}
.sct-type .ctn ul {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-left: 7.5%;
  font-size: 0;
  text-align: right;
  z-index: 2;
}
.sct-type .ctn ul li {
  display: inline-block;
  width: 25%;
}
.sct-type .ctn ul li a {
  display: block;
  width: 85%;
  margin: 0 auto;
  padding: 8px 0;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.sct-type .ctn ul li:nth-child(1) a {
  background: #ffa824;
}
.sct-type .ctn ul li:nth-child(2) a {
  background: #ff8096;
}
.sct-type .ctn ul li:nth-child(3) a {
  background: #9e63a8;
}
.sct-type .ctn ul li a:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  vertical-align: middle;
}
.sct-type .ctn ul li a span {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.sct-type .ctn ul li a:hover {
  opacity: 0.85;
}
.sct-type ul.compare-sp {
  display: none;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.sct-type ul.compare-sp li {
  width: 100%;
}
.sct-type ul.compare-sp li dl dt {
  position: relative;
  padding: 12px;
  text-align: center;
}
.sct-type ul.compare-sp li dl dt:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  transform: translate(0, -60%) rotate(38deg) skew(-15deg);
  position: absolute;
  right: 20px;
  top: 50%;
}
.sct-type ul.compare-sp li:nth-child(1) {
  background: #e1f5ff;
}
.sct-type ul.compare-sp li:nth-child(1) dl dt:after {
  border-bottom: solid 3px #4eb8b2;
  border-right: solid 3px #4eb8b2;
}
.sct-type ul.compare-sp li:nth-child(2) {
  background: #f9ffd2;
}
.sct-type ul.compare-sp li:nth-child(2) dl dt:after {
  border-bottom: solid 3px #ffa824;
  border-right: solid 3px #ffa824;
}
.sct-type ul.compare-sp li:nth-child(3) {
  background: #ffecf1;
}
.sct-type ul.compare-sp li:nth-child(3) dl dt:after {
  border-bottom: solid 3px #ff8096;
  border-right: solid 3px #ff8096;
}
.sct-type ul.compare-sp li:nth-child(4) {
  background: #e9d8f5;
}
.sct-type ul.compare-sp li:nth-child(4) dl dt:after {
  border-bottom: solid 3px #9e63a8;
  border-right: solid 3px #9e63a8;
}

.sct-type ul.compare-sp li dl dd {
  display: none;
}
.sct-type ul.compare-sp li dl dt img,
.sct-type ul.compare-sp li dl dd img {
  width: 100%;
}
.sct-type ul.compare-sp li dl dd span {
  display: block;
  padding: 15px;
}
.sct-type ul.compare-sp li dl dd a {
  display: block;
  width: 92%;
  margin: 0 auto;
  padding: 8px 0;
  border-radius: 6px;
  text-align: center;
}
.sct-type ul.compare-sp li:nth-child(2) dl dd span {
  border-top: solid 1px #f9f2ba;
}
.sct-type ul.compare-sp li:nth-child(3) dl dd span {
  border-top: solid 1px #ffcad4;
}
.sct-type ul.compare-sp li:nth-child(4) dl dd span {
  border-top: solid 1px #d1b3dd;
}
.sct-type ul.compare-sp li:nth-child(2) dl dd a {
  background: #ffa824;
}
.sct-type ul.compare-sp li:nth-child(3) dl dd a {
  background: #ff8096;
}
.sct-type ul.compare-sp li:nth-child(4) dl dd a {
  background: #9e63a8;
}
.sct-type ul.compare-sp li dl dd a:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  vertical-align: middle;
}
.sct-type ul.compare-sp li dl dd a em {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
}

.sct-type ul.compare-sp li dl dt.open:after {
  transform: translate(0, -50%) rotate(218deg) skew(-15deg);
}
.sct-type.show .inner-sct {
  opacity: 1;
}
@media (max-width: 801px) {
  .sct-type {
    background: #fff url("../img/top/bg-ptn-5-sp.png") no-repeat 50% 100% / 100%
      auto;
  }
  .sct-type .inner-sct {
    padding: 120px 0 140px;
  }
  .sct-type .ctn {
    display: none;
  }
  .sct-type ul.compare-sp {
    display: block;
  }
}
@media (max-width: 641px) {
  .sct-type .inner-sct {
    padding: 120px 0 80px;
  }
  .sct-type p.txt {
    font-size: 14px;
  }
  .sct-type p.txt span {
    display: block;
  }
}

/*.sct-lineup { background: #e3f3fc url(../img/top/bg-ptn-5.png) no-repeat 50% 100% / 100% auto;}*/
.sct-lineup {
  background: url(../img/top/bg-ptn-5.png) no-repeat 50% 100% / 100% auto;
}
.sct-lineup .inner-sct {
  width: 92%;
  margin: 0 auto;
  padding: 40px 0 150px;
  transition: 0.8s ease;
  opacity: 0;
}
.sct-lineup p.txt {
  margin-bottom: 20px;
  text-align: center;
}
.sct-lineup figure {
  width: 90%;
  max-width: 940px;
  margin: 0 auto 20px;
}
.sct-lineup figure img {
  width: 100%;
}
.sct-lineup .btn {
  width: 80%;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 1px 8px #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.sct-lineup .btn a {
  display: block;
}
.sct-lineup .btn a img {
  width: 100%;
}
.sct-lineup.show .inner-sct {
  opacity: 1;
}
@media (max-width: 801px) {
  /*	.sct-lineup { background: #e3f3fc url(../img/top/bg-ptn-5-sp.png) no-repeat 50% 100% / 100% auto;}*/
  .sct-lineup {
    background: #fff url("../img/top/bg-ptn-5-sp.png") no-repeat 50% 100% / 100%
      auto;
  }
  .sct-lineup .inner-sct {
    padding: 40px 0 140px;
  }
}
@media (max-width: 641px) {
  .sct-lineup p.txt {
    font-size: 14px;
  }
}
@media (max-width: 481px) {
  .sct-lineup .inner-sct {
    padding: 40px 0 80px;
  }
}

.sct-shop {
  position: relative;
  z-index: 1;
  background: #fff; /* background: #e3f3fc;*/
}
.sct-shop .inner-sct {
  width: 92%;
  margin: 0 auto;
  padding: 20px 0px; /* padding: 20px 0 300px;*/
}
.sct-shop h2 {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}
.sct-shop h2 em {
  display: block;
  margin: 0 auto 20px;
  color: #7e97e5;
  font-size: 10px;
}
.sct-shop p {
  margin-bottom: 30px;
  text-align: center;
}
.sct-shop .btn {
  width: 80%;
  max-width: 420px;
  margin: 0 auto;
}
.sct-shop .btn a {
  display: block;
}
.sct-shop .btn a img {
  width: 100%;
}
@media (max-width: 481px) {
  .sct-shop .inner-sct {
    padding: 20px 0 40px; /* padding: 20px 0 200px; */
  }
  .sct-shop h2 {
    margin-bottom: 15px;
  }
  .sct-shop p {
    font-size: 13px;
  }
}

.sct-present {
  background: url("../img/top/bg-present.jpg") no-repeat 50% 0 / auto 100%;
}
.sct-present .inner-sct {
  position: relative;
  width: 92%;
  margin: 0 auto;
  padding: 50px 0 120px;
}
.sct-present h2 {
  position: relative;
  margin-bottom: 120px;
  text-align: center;
}
.sct-present h2 img {
  width: 100%;
  max-width: 620px;
}
.sct-present h2 img.sp {
  display: none;
}
.sct-present .ctn {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 100px;
}
.sct-present .ctn:before {
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  background: url("../img/top/code_sakura.png") no-repeat 50% 50% / 100% auto;
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translateY(-50%);
}
.sct-present .ctn .ctn-flex {
  display: flex;
  justify-content: space-between;
}
.sct-present .img {
  width: 56%;
}
.sct-present .txt {
  width: 44%;
}
.sct-present .img img {
  width: 96%;
}
.sct-present .txt img {
  width: 92%;
}
.sct-present .btn {
  position: absolute;
  left: 58%;
  bottom: 4%;
  width: 30%;
}
.sct-present .btn a {
  display: block;
  width: 94%;
  border-radius: 6px;
  box-shadow: 0 0 8px #fff;
  overflow: hidden;
}
.sct-present .btn a img {
  width: 100%;
}
.sct-present .btn a img.sp {
  display: none;
}
.sct-present .btn a:hover img {
  opacity: 0.85;
}
@media (min-width: 1601px) {
  .sct-present {
    background-size: 100% 100%;
  }
}
@media (max-width: 1201px) {
  .sct-present h2:after {
    right: 2%;
  }
}
@media (max-width: 1001px) {
  .sct-present h2 {
    padding-right: 30px;
  }
  .sct-present h2:after {
    width: 100px;
    height: 100px;
    right: 0%;
  }
  .sct-present .ctn {
    padding: 0 80px;
  }
  .sct-present .ctn:before {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 801px) {
  .sct-present h2 {
    padding-right: 80px;
  }
  .sct-present h2:after {
    width: 80px;
    height: 80px;
  }
  .sct-present .ctn {
    padding: 0 60px;
  }
  .sct-present .ctn:before {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 641px) {
  .sct-present {
    background: none;
  }
  .sct-present .inner-sct {
    width: 100%;
    padding: 0px;
  }
  .sct-present h2 {
    margin-bottom: 0px;
    padding-right: 0px;
  }
  .sct-present h2:after {
    content: none;
  }
  .sct-present h2 img.pc {
    display: none;
  }
  .sct-present h2 img.sp {
    display: block;
    max-width: 100%;
  }
  .sct-present .ctn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
  }
  .sct-present .ctn:before {
    content: none;
  }
  .sct-present .ctn .ctn-flex {
    display: none;
  }
  .sct-present .btn {
    left: 48%;
    bottom: auto;
    top: 72%;
    width: 48%;
  }
  .sct-present .btn a img.pc {
    display: none;
  }
  .sct-present .btn a img.sp {
    display: block;
  }
}

#ft.index-ft {
  margin-top: 0px; /* margin-top: -120px; */
}
@media (max-width: 641px) {
  #ft {
    background: #fff;
  }
}

.show .ctn .sec01_img {
  text-align: center;
}
.show .ctn .sec01_img img {
  width: 38%;
}
@media (max-width: 768px) {
  .show .ctn .sec01_img img {
    width: 82%;
  }
  #lead.show .bg {
    padding-top: 72%;
    background: none;
    position: relative;
  }
  /* #lead.show .bg{ padding-top: 72%; background: url('../img/bg/sec01_bg_sp.png') no-repeat fixed center / cover; position: relative;} */
  /* #lead.show .bg:before{ position: fixed; content:''; width: 100%; height: 100%; left: 0; top: 0; background: url('../img/bg/sec01_bg_sp.png') no-repeat center center / cover;} */
}

#care .title_sec {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  padding-top: 22%;
  transform: translateY(-50%);
  background: url("../img/title_bg01.png") no-repeat center center / cover;
}
#care .title_sec .title_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -63%);
  width: 29%;
}
#care .title_sec .title_img img {
  width: 100%;
}
@media (max-width: 768px) {
  #care .title_sec {
    background: url("../img/sp_title_bg01.png") no-repeat center center / cover;
  }
  #care .title_sec {
    padding-top: 53%;
  }
  #care .title_sec .title_img {
    width: 74%;
  }
  #lead .note {
    bottom: -24%;
  }
}
/* 
#care{ padding-top:12%; } */

/* #care .content_box{ width: 48.847926%; position: absolute;} */
#care .content_inner .content_img {
  text-align: center;
}
#care .content_inner .content_img img {
  width: 100%;
}

#care .content_inner .content_img .inner_box {
  text-align: center;
}

/* #care .out_line{ width: 75.3472%; margin: auto; position: relative; padding-top: 81%;} */
#care .tyuui {
  font-size: 10px;
  color: #c08408;
  margin-top: 3%;
}
#care .content_box.point_02 .content_inner {
  padding-top: 37%;
  animation-delay: 0.8s;
}
#care .content_box.point_02 {
  right: 1%;
  top: 20%;
}
#care .content_box.point_02 h3 {
  width: 65.235%;
  margin: auto;
}
#care .content_box.point_02 .content_img img {
  width: 28.3%;
}
#care .content_box.point_02 .tyuui {
  max-width: 63%;
  margin: auto;
  margin-top: 3%;
}

#care .content_box.point_01 {
  top: 0;
}
#care .content_box.point_03 h3 {
  width: 85.234%;
  margin: auto;
}
#care .content_box.point_03 .content_inner {
  padding-top: 27%;
  animation-delay: 1.6s;
}
#care .content_box.point_03 {
  left: 11.0599%;
  top: 55%;
}

#care .content_box.point_02 .content_inner:before {
  left: auto;
  right: 3%;
  background: url("../img/point02.png") no-repeat center center / cover;
}
#care .content_box.point_03 .content_inner:before {
  background: url("../img/point03.png") no-repeat center center / cover;
}

#care .note {
  position: absolute;
  right: 5%;
  bottom: 11%;
  max-width: 200px;
}
@media (max-width: 1439px) and (min-width: 769px) {
  #care .content_box.point_03 {
    top: 57%;
  }
}
@media (max-width: 768px) {
  #care .note {
    bottom: 7%;
  }
  #care .content_box {
    width: 100%;
  }
  #care .out_line {
    margin: auto;
    position: relative;
  }
  #care .content_inner .content_txt p {
    font-size: 3.3333vw;
  }
  #care .content_box.point_03 {
    left: 0%;
    top: 78%;
  }
  #care .content_box.point_02 {
    top: 38%;
  }
  #care .content_box.point_02 .tyuui {
    max-width: 100%;
  }
  #care .content_box.point_03 .content_inner {
    padding-bottom: 4.5%;
  }
}
@media (max-width: 375px) {
  #care .note {
    bottom: 8%;
  }
  #care .content_box.point_02 {
    top: 39%;
  }
  #care .content_box.point_03 {
    top: 79%;
  }
}

#develop .title_sec {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  padding-top: 22%;
  transform: translateY(-50%);
  background: url("../img/title_bg02.png") no-repeat center center / cover;
}
#develop .title_sec .title_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -63%);
  width: 29%;
}
#develop .title_sec .title_img img {
  width: 100%;
}
@media (max-width: 768px) {
  #develop .title_sec {
    background: url("../img/sp_title_bg02.png") no-repeat center center / cover;
  }
  #develop .title_sec {
    padding-top: 53%;
  }
  #develop .title_sec .title_img {
    width: 74%;
  }
}

#develop .flex {
  display: flex;
  margin-bottom: 4%;
}
#develop .flex .inner_box {
  width: 48%;
}
#develop .flex .inner_box:not(:last-child) {
  margin-right: 4%;
}
#develop .flex .inner_box img {
  width: 100%;
}
#develop .flow_img {
  display: flex;
  align-items: center;
  justify-content: center;
}
#develop .flow_img img {
  width: 100%;
}
#develop .flow_img .img_box {
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 2;
  /* box-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 6px inset #fff; */
}
.mask:before {
  content: "";
  display: block;
  width: 40px;
  height: 200px;
  background-color: #fff;
  position: absolute;
  top: -180px;
  left: 0;
  animation: shiny-btn1 3s ease-in-out infinite;
}
#develop .flow_img .inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#develop .txt_box {
  margin-top: 5%;
}
#develop .txt_box p {
  font-size: 1.25vw;
  color: #483704;
  text-align: center;
}

@media (max-width: 768px) {
  #develop .flex {
    display: block;
    margin-bottom: 14%;
  }
  #develop .flow_img {
    display: block;
    align-items: center;
    margin: auto;
    width: 80%;
  }
  #develop .flex .inner_box {
    width: 100%;
  }
  #develop .flex .inner_box:not(:last-child) {
    margin-right: 0;
    margin-bottom: 3%;
  }
  #develop .txt_box p {
    font-size: 4.102vw;
  }
  #develop .flow_img .img_box:nth-child(2n) {
    padding: 0 1.3%;
  }
}

#program .title_sec {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  padding-top: 22%;
  transform: translateY(-50%);
  background: url("../img/title_bg03.png") no-repeat center center / cover;
}
#program .title_sec .title_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -63%);
  width: 18%;
}
#program .title_sec .title_img img {
  width: 100%;
}
@media (max-width: 768px) {
  #program .title_sec {
    background: url("../img/sp_title_bg03.png") no-repeat center center / cover;
  }
  #program .title_sec {
    padding-top: 53%;
  }
  #program .title_sec .title_img {
    width: 50%;
  }
}

#program .content_box {
  width: 36.9107%;
  text-align: center;
}
#program .content_box img {
  width: 100%;
}
#program .content_box img {
  width: 100%;
}
#program .btn_box a {
  width: 83.48%;
  display: block;
  margin: auto;
  background: url("../img/sec11_btn.png") no-repeat center center / cover;
  padding-top: 16.3%;
  transition: 0.5s;
  opacity: 1;
}
#program .txt_box p {
  color: #fff;
  font-size: 1.041vw;
}
#program .btn_box a:hover {
  opacity: 0.5;
}
#program .inner-sct {
  max-width: 71.77777%;
  margin: auto;
  padding: 29% 0 13%;
}
#program .content_box .img_box {
  margin-bottom: 3%;
}
#program .content_box .txt_box {
  margin-bottom: 10%;
}
#program .note {
  position: absolute;
  right: 5%;
  bottom: 8%;
  max-width: 200px;
}
#program .note ul li {
  color: #fff;
}
@media (max-width: 768px) {
  #program .inner-sct {
    width: 92.6923%;
    padding: 68% 0 8%;
  }
  #program .js-show {
    margin-top: 0;
  }
  #program .content_box {
    width: 100%;
    text-align: center;
  }
  #program .txt_box p {
    font-size: 2.564vw;
  }
  #program .note {
    bottom: 1%;
  }
  #program .btn_box a {
    width: 100%;
    padding-top: 19.3%;
  }
}
@keyframes moving {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}
#present {
  position: relative;
  padding-top: 107%;
  margin-top: -21%;
  z-index: 2;
}
#present .point_list div {
  position: absolute;
  width: 24.44%;
  top: 0;
  animation: 2.4s moving linear infinite;
}
#present .point_list div.point_01 {
  left: 27%;
  top: 21%;
}
#present .point_list div.point_02 {
  left: 58%;
  top: 26%;
  animation-delay: 0.7s;
}
#present .point_list div.point_03 {
  left: 12%;
  top: 42%;
  animation-delay: 1.4s;
}
#present .point_list div.point_04 {
  left: 25%;
  top: 65%;
  animation-delay: 2.1s;
}
#present .point_list div.point_05 {
  left: 60%;
  top: 59%;
  animation-delay: 2.8s;
}
#present .point_list div img {
  width: 100%;
}
#present .bg {
  width: 100%;
  padding-top: 110%;
  height: 0%;
  margin: 0 auto;
  background: url("../img/bg/sec05_bg.png") no-repeat center center / cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  #present {
    position: relative;
    padding-top: 189%;
    margin-top: -45%;
  }
  #present .bg {
    padding-top: 204%;
    background: url("../img/bg/sec05_bg_sp.png") no-repeat center center / cover;
  }
  #present .point_list div {
    width: 39.44%;
  }
  #present .point_list div.point_01 {
    left: 29%;
    top: 27%;
  }
  #present .point_list div.point_02 {
    left: 60%;
    top: 39%;
    animation-delay: 0.7s;
  }
  #present .point_list div.point_03 {
    left: 0%;
    top: 42%;
    animation-delay: 1.4s;
  }
  #present .point_list div.point_04 {
    left: 6%;
    top: 62%;
    animation-delay: 2.1s;
  }
  #present .point_list div.point_05 {
    left: 60%;
    top: 61%;
    animation-delay: 2.8s;
  }
}

section.which_series figure img {
  position: relative;
  width: 79%;
  margin: 0 auto;
  transition: 1s ease 0.4s;
}

section.which_series .slick-active figure img {
  opacity: 1;
  animation: zoomIn 1s ease;
}

/* Miracle Lock HOWTO button */
#slider_01 .box.care-4 figure {
  position: relative;
  width: 79%;
  margin: 0 auto;
}
#slider_01 .box.care-4 figure > img.pc-only,
#slider_01 .box.care-4 figure > img.sp-only {
  width: 100%;
  margin: 0;
}
/* 画像単体のzoomは打ち消し、figureごと動かす */
section.which_series .slick-active .box.care-4 figure > img {
  animation: none;
}
#slider_01 .slick-active .box.care-4 figure {
  animation: zoomIn 1s ease;
}
#slider_01 .box.care-4 .howto-btn {
  position: absolute;
  left: 19%;
  top: 71.9%;
  width: 30%;
  z-index: 2;
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}
#slider_01 .box.care-4 .howto-btn:hover {
  opacity: 0.5;
}
#slider_01 .box.care-4 .howto-btn img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  position: static;
  animation: none !important;
  opacity: 1;
  transition: none;
}
@media (max-width: 768px) {
  #slider_01 .box.care-4 figure {
    width: 82%;
  }
  #slider_01 .box.care-4 .howto-btn {
    left: 50%;
    top: 87%;
    width: 48.2%;
    transform: translateX(-50%);
  }
}

/* HOWTO movie popup */
.howto-movie-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.howto-movie-popup.is-open {
  opacity: 1;
  visibility: visible;
}
.howto-movie-popup__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.howto-movie-popup__inner {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 900px;
}
.howto-movie-popup__video {
  display: block;
  width: 40%;
  height: auto;
  background: #000;
  outline: none;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .howto-movie-popup__video {
    width: 65%;
  }
}
.howto-movie-popup__close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.howto-movie-popup__close:before,
.howto-movie-popup__close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 24px;
  background: #fff;
}
.howto-movie-popup__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.howto-movie-popup__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 768px) {
  .howto-movie-popup__inner {
    width: 94%;
  }
  .howto-movie-popup__close {
    top: -36px;
    width: 28px;
    height: 28px;
  }
}
section.line_up .slick-active figure img {
  opacity: 1;
  animation: zoomIn 1s ease;
}
section.line_up figure img {
  position: relative;
  width: 69%;
  margin: 0 auto;
  transition: 1s ease 0.4s;
  margin-left: 11%;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moving {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* section .slick-list{
	overflow: unset;
  } */
#slider_01 {
  padding: 12% 0;
  background: url("../img/bg/sec03_bg.png") no-repeat center center / cover;
  margin-top: -7%;
}
#slider_01 .title_img_box {
  width: 28.05%;
  margin: auto;
}
#slider_01 .title_img_box img {
  width: 100%;
}

@media (max-width: 768px) {
  #slider_01 .title_img_box {
    width: 68.05%;
  }
  #slider_01 {
    /* padding: 28% 0; */
    padding: 50% 0 28%;
    background: url("../img/bg/sec03_bg_sp.png") no-repeat center center / cover;
    margin-top: -11%;
    position: relative;
    z-index: 2;
  }
}

#slider_02 {
  position: relative;
  z-index: 3;
}
#slider_02 .slick-arrow.slick-prev {
  left: 21%;
}
#slider_02 .slick-arrow.slick-next {
  right: 21%;
}
#slider_02 .bg {
  background: url("../img/bg/sec06_bg.png") no-repeat center center / cover;
  margin-top: -7.5%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 89%;
  width: 100%;
}
#slider_02 .slick-slider {
  transform: translateY(30%);
}
@media (max-width: 768px) {
  #slider_02 .bg {
    background: url("../img/bg/sec06_bg_sp.png") no-repeat center center / cover;
    margin-top: -12%;
    padding-top: 255%;
  }
  #slider_02 .slick-slider {
    transform: translateY(40%);
  }
  section.line_up figure img {
    width: 85%;
    padding-right: 9.2%;
    margin-left: 6%;
  }
  #slider_02 .slick-arrow.slick-prev {
    left: 6%;
  }
  #slider_02 .slick-arrow.slick-next {
    right: 6%;
  }
}
.show02 .bg {
  opacity: 1;
  background: url("../img/bg/sec07_bg.jpg") no-repeat fixed center / cover;
  padding-top: 59%;
}
.show02 .ctn .sec01_img {
  text-align: center;
}
.show02 .ctn .sec01_img img {
  width: 38%;
}
@media (max-width: 768px) {
  .show02 .ctn .sec01_img img {
    width: 82%;
  }
  .show02 .bg {
    padding-top: 176%;
    background: none;
    position: relative;
  }
  /* .show02 .bg:before{ position: fixed; content:''; width: 100%; height: 100%; left: 0; top: 0; background: url('../img/bg/sec07_bg_sp.jpg') no-repeat center center / cover; z-index:2;}
	.show02 .bg:before{ background: url('../img/bg/sec07_bg_sp.jpg') no-repeat fixed center / cover;} */
}
.sec08 {
  height: 0;
  padding-top: 207%;
  position: relative;
  z-index: 4;
  margin-top: -0.5%;
}
.sec08 .bg {
  opacity: 1;
  background: url("../img/bg/sec08_bg_ds.png") no-repeat center / cover;
  padding-top: 225%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-6%);
}
.sec08 .ctn .sec01_img {
  text-align: center;
}
.sec08 .ctn .sec01_img img {
  width: 38%;
}
.sec08 .btn_list div {
  position: absolute;
  top: 0;
  width: 21.38%;
}
.sec08 .btn_list div.btn_box01 {
  top: 22.5%;
  left: 47.6%;
}
/* .sec08 .btn_list div.btn_box01{ top: 30%; left: 47.6%;} */
.sec08 .btn_list div.btn_box02 {
  top: 44.3%;
  left: 47.6%;
}
/* .sec08 .btn_list div.btn_box02{ top: 59%; left: 47.6%;} */
.sec08 .btn_list div.btn_box03 {
  top: 66%;
  left: 47.6%;
}

.sec08 .btn_list div.btn_box04 {
  top: 88%;
  left: 47.6%;
}
/* .sec08 .btn_list div.btn_box03{ top: 87.6%; left: 47.6%;} */
.sec08 .btn_list div img {
  width: 100%;
}
.sec08 .btn_list div a {
  opacity: 1;
  transition: 0.5s;
  display: block;
}
.sec08 .btn_list div a:hover {
  opacity: 0.5;
}
@media (max-width: 768px) {
  .sec08 {
    padding-top: 484%;
    margin-top: -5%;
  }
  /* .sec08 {
		padding-top: 395%;;
	} */
  /* .sec08 .bg{ padding-top: 419%; background: url('../img/bg/sec08_bg_sp_ds.png') no-repeat center center / cover;} */
  .sec08 .bg {
    padding-top: 533%;
    background: url("../img/bg/sec08_bg_sp_ds.png") no-repeat center center /
      cover;
  }
  .sec08 .btn_list div {
    width: 50.38%;
  }
  /* .sec08 .btn_list div.btn_box01{ top: 29.5%; left: 43.6%;}
.sec08 .btn_list div.btn_box02{ top: 58.4%; left: 43.6%;}
.sec08 .btn_list div.btn_box03{ top: 86.6%; left: 43.6%;} */
  .sec08 .btn_list div.btn_box01 {
    top: 22.8%;
    left: 43.6%;
  }
  .sec08 .btn_list div.btn_box02 {
    top: 44.9%;
    left: 43.6%;
  }
  .sec08 .btn_list div.btn_box03 {
    top: 68.7%;
    left: 43.6%;
  }
  .sec08 .btn_list div.btn_box04 {
    top: 92.7%;
    left: 43.6%;
  }
}

#shop .content_box .img_box {
  width: 32.15%;
  margin: auto;
  margin-bottom: 3%;
}
#shop .content_box .img_box img {
  width: 100%;
}
#shop .content_box .btn_box {
  width: 25.62%;
  margin: auto;
}
#shop .content_box .btn_box a {
  transition: 0.5s;
  opacity: 1;
}
#shop .content_box .btn_box a:hover {
  opacity: 0.5;
}
#shop .content_box .btn_box img {
  width: 100%;
}
#shop .bg {
  padding: 32% 0 40%;
}
@media (max-width: 768px) {
  #shop .bg {
    background: url(../img/bg/sec09_bg_sp.png) no-repeat center center / cover;
  }
  #shop {
    margin-top: -3%;
  }
  #shop .bg {
    padding: 61% 0 68%;
  }
  #shop .content_box .btn_box {
    width: 66.6666%;
  }
  #shop .content_box .img_box {
    width: 83.15%;
  }
}
#series img {
  width: 100%;
}
#series {
  position: relative;
}
#series .bg {
  width: 100%;
  margin: 0 auto;
  background: url(../img/bg/sec10_bg.jpg) no-repeat center center / cover;
  padding: 13% 0 14%;
}
#series .bg .img_box {
  width: 84.88888%;
  margin: auto;
  position: relative;
}
#series .bg .img_box div {
  position: absolute;
  bottom: -1.5%;
  width: 18%;
}
#series .bg .img_box div a {
  opacity: 1;
  transition: 0.5s;
}
#series .bg .img_box div a:hover {
  opacity: 0.6;
}
#series .bg .img_box div.btn_01 {
  left: 10%;
}
#series .bg .img_box div.btn_02 {
  left: 33%;
}
#series .bg .img_box div.btn_03 {
  left: 56%;
}
#series .bg .img_box div.btn_04 {
  left: 79.5%;
}

@media screen and (max-width: 768px) {
  #series .bg {
    background: none;
    padding: 12% 0 0%;
  }
  #series {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 10;
  }
  #series ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    margin: -13% auto 0;
  }
  #series ul li {
    width: 100%;
  }
  #series ul li dl dt {
    position: relative;
    padding: 12px;
    text-align: center;
  }
  #series ul li dl dt:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    transform: translate(0, -60%) rotate(38deg) skew(-15deg);
    position: absolute;
    right: 20px;
    top: 50%;
  }
  #series ul li:nth-child(1) {
    background: #e1f5ff;
  }
  #series ul li:nth-child(1) dl dt:after {
    border-bottom: solid 3px #4eb8b2;
    border-right: solid 3px #4eb8b2;
  }
  #series ul li:nth-child(2) {
    background: #f9ffd2;
  }
  #series ul li:nth-child(2) dl dt:after {
    border-bottom: solid 3px #ffa824;
    border-right: solid 3px #ffa824;
  }
  #series ul li:nth-child(3) {
    background: #ffecf1;
  }
  #series ul li:nth-child(3) dl dt:after {
    border-bottom: solid 3px #ff8096;
    border-right: solid 3px #ff8096;
  }
  #series ul li:nth-child(4) {
    background: #e9d8f5;
  }
  #series ul li:nth-child(4) dl dt:after {
    border-bottom: solid 3px #9e63a8;
    border-right: solid 3px #9e63a8;
  }

  #series ul li dl dd {
    display: none;
    padding-bottom: 1%;
  }
  #series ul li dl dt img,
  #series ul li dl dd img {
    width: 100%;
  }
  #series ul li dl dd div {
    width: 100%;
    text-align: center;
  }
  #series ul li dl dd div img {
    width: 50%;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 5%;
  }
  #series ul li dl dt.open:after {
    transform: translate(0, -50%) rotate(218deg) skew(-15deg);
  }
  #series.show .inner-sct {
    opacity: 1;
  }
  #series ul li:nth-child(1) dl dd div {
    border-top: solid 1px #c7e8f2;
  }
  #series ul li:nth-child(3) dl dd div {
    border-top: solid 1px #ffcad4;
  }
  #series ul li:nth-child(4) dl dd div {
    border-top: solid 1px #d1b3dd;
  }
  #series ul li dl dd div img {
    width: 50%;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 5%;
  }
}
@media (max-width: 768px) {
  .b_bg {
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    background: #fff;
  }
  .b_bg.bg01 {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: url("../img/bg/sec01_bg_sp_01.jpg") no-repeat 50% 0% / 100% auto;
  }
  .b_bg.bg02 {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: url("../img/bg/sec07_bg_sp_02.jpg") no-repeat 50% 0% / 100% auto;
  }
}

/* クーポン追記 */
#care .bg .cpn_box {
  position: absolute;
  display: block;
  width: 7.916%;
  bottom: 8%;
  /* bottom: 5%; */
  right: 14%;
}
#care .bg .cpn_box img {
  width: 100%;
}
@media (max-width: 768px) {
  #care .bg .cpn_box {
    width: 20.5263%;
    bottom: 13%;
    right: 8%;
  }
}

/* つむつむ */
#care .inner_box_img .tsumutsumu {
  position: absolute;
}
#care .inner_box_img .tsumutsumu img {
  width: 100%;
  pointer-events: none;
}
#care .inner_box_img .tsumutsumu.tsumutsumu_l {
  left: -5%;
  width: 7.6388vw;
  transform: rotate(-29deg);
  bottom: 12%;
}
#care .inner_box_img .tsumutsumu.tsumutsumu_r {
  right: -5%;
  width: 9.06vw;
  transform: rotate(13deg);
  bottom: 11%;
}

#care .inner_box .txt_ {
  width: 52.083%;
  margin: auto;
  color: #939393;
  font-size: 0.8333333vw;
  margin-top: 0.8em;
}
@media (max-width: 768px) {
  #care .inner_box {
    overflow: hidden;
  }
  #care .inner_box_img .tsumutsumu.tsumutsumu_l {
    left: -9%;
    width: 22.6388vw;
    transform: rotate(-29deg);
    bottom: -6%;
  }
  #care .inner_box_img .tsumutsumu.tsumutsumu_r {
    right: -9%;
    width: 27.06vw;
    transform: rotate(13deg);
    bottom: 7%;
  }
  #care .inner_box .txt_ {
    width: 89.94%;
    margin: auto;
    color: #939393;
    font-size: 2.0512vw;
    margin-top: 1.2em;
  }
}

.series {
  position: relative;
  z-index: 2;
  margin-top: -6.7%;
  padding-top: 10%;
  padding-bottom: 9.74%;
  background-color: #d5ecef;
}

.series-bg {
  width: 100%;
}

.series-title {
  width: 44%;
  margin: 0 auto;
  padding-top: 6.3%;
  text-align: center;
  display: block;
}

.series-table {
  padding-top: 4.2%;
  width: 86.9%;
  margin: auto;
  position: relative;
}

.series-table img {
  width: 100%;
}

.seriesbtn li {
  position: absolute;
  width: 16%;
  bottom: -2.5%;
}

.seriesbtn__0 {
  left: 7.4%;
}

.seriesbtn__1 {
  left: 26%;
}

.seriesbtn__2 {
  left: 45.1%;
}

.seriesbtn__3 {
  left: 64%;
}

.seriesbtn__4 {
  left: 83%;
}

.seriesbtn li a {
  opacity: 1;
  transition: 0.5s;
}

.seriesbtn li a:hover {
  opacity: 0.5;
}

.series-caution {
  width: 86.9%;
  margin: 4% auto 0;
}

.series-caution p {
  margin-left: 6.2%;
}

.series-caution img {
  width: 16%;
}

@media (max-width: 768px) {
  .series {
    margin-top: -11.7%;
    padding-top: 35%;
    padding-bottom: 24.9%;
  }

  .series-title {
    width: 89.3%;
    margin: 0 auto;
    padding-top: 26.7%;
  }

  .series-wrap {
    display: flex;
    margin-left: 5.2%;
    align-items: center;
    margin-top: -10%;
  }

  .series-side {
    width: 24.5%;
    margin-top: -12%;
    z-index: 50;
  }

  .series-side img {
    width: 100%;
  }

  .series-table {
    margin-top: 1%;
    width: 100%;
    position: relative;
    overflow: scroll;
    padding-bottom: 13.5%;
    padding-top: initial;
    margin-left: -2.6%;
  }

  .series-table img {
    width: 290.3%;
    padding-right: 5.2%;
  }

  .seriesbtn li {
    position: absolute;
    width: 48%;
    bottom: 6.5%;
  }

  .seriesbtn li a img {
    width: 100%;
    padding-right: initial;
  }

  .seriesbtn__0 {
    left: 3%;
  }

  .seriesbtn__1 {
    left: 61%;
  }

  .seriesbtn__2 {
    left: 118.5%;
  }

  .seriesbtn__3 {
    left: 176%;
  }

  .seriesbtn__4 {
    left: 234%;
  }

  .seriesbtn li a {
    opacity: 1;
    transition: 0.5s;
  }

  .series-caution {
    width: 41%;
    margin: 8% auto 0;
  }

  .series-caution p {
    margin-left: 0;
  }

  .series-caution img {
    width: 100%;
  }
}

.cta {
  position: relative;
  z-index: 5;
  padding-top: 47%;
}

.cta-bg {
  background: url(../img/cta-top.png) no-repeat center / cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 47%;
}

.cta-btn {
  position: absolute;
  width: 20.48%;
  top: 64%;
  left: 17%;
}

.cta-btn a {
  opacity: 1;
  transition: 0.5s;
}

.cta-btn a:hover {
  opacity: 0.5;
}

/* SNS section (above footer) */
#sns {
  position: relative;
  z-index: 5;
  background: #fff;
}
#sns .sns__bg {
  width: 100%;
  aspect-ratio: 1557 / 423;
  background: url("../img/sns_wave_bg_pc.png") no-repeat center top / 100% 100%;
}
#sns .sns__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7.5%;
}
#sns .sns__logo {
  width: 12.5%;
  max-width: 200px;
  margin: 0;
}
#sns .sns__logo img {
  width: 100%;
  height: auto;
  display: block;
}
#sns .sns__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 6.6%;
  max-width: 106px;
  margin: 1.8% 0 0;
  padding: 0;
  list-style: none;
}
#sns .sns__list li {
  width: 34.3%;
}
#sns .sns__list a {
  display: block;
  opacity: 1;
  transition: 0.5s;
}
#sns .sns__list a:hover {
  opacity: 0.5;
}
#sns .sns__list img {
  width: 100%;
  height: auto;
  display: block;
}
#ft .inner-ft {
  padding-top: 60px;
}
@media (max-width: 768px) {
  #sns .sns__bg {
    aspect-ratio: 390 / 229;
    background-image: url("../img/sns_wave_bg_sp.png");
  }
  #sns .sns__inner {
    padding-top: 7.7%;
  }
  #sns .sns__logo {
    width: 36.8%;
    max-width: 144px;
  }
  #sns .sns__list {
    width: 19.45%;
    max-width: 76px;
    margin-top: 5.2%;
  }
  #ft .inner-ft {
    padding-top: 40px;
  }
}