@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Shippori+Mincho&display=swap");
.zooming,
.fade,
.fadein,
.fadein-top,
.fadein-left,
.fadein-right,
.opening {
  opacity: 0;
  transition: all 0.575s cubic-bezier(0.66, 0.01, 0.38, 1); }

.zoomingrev {
  opacity: 0;
  transform: translate(0, 50px) scale(0.1);
  transition: opacity 0.875s ease-in-out, transform 0.875s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity; }

.zooming {
  opacity: 0;
  transform: scale(2) translateY(50px);
  transition: none; }

.fade {
  transform: translate(0, 0); }

.fadein {
  transform: translate(0, 100px); }

.fadein-top {
  transform: translate(0, -100px); }

.fadein-left {
  transform: translate(-100px, 0); }

.fadein-right {
  transform: translate(100px, 0); }

.zoomingrev.scrollin,
.fade.scrollin,
.fadein.scrollin,
.fadein-top.scrollin,
.fadein-left.scrollin,
.fadein-right.scrollin,
.opening.active {
  opacity: 1;
  transform: translate(0, 0); }

.zooming.scrollin {
  animation: bounceIn 1.2s cubic-bezier(0.25, 1.25, 0.5, 1) forwards; }

.zoomingrev.scrollin {
  opacity: 1;
  transform: translate(0, 0) scale(1); }

#pagetop {
  width: 34px;
  height: 34px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 200; }

.font-poppins {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal; }

.pc {
  display: block; }

.sp {
  display: none; }

.l-main {
  overflow: hidden; }

.p-breadcrumb {
  margin-bottom: 0; }

.l-footer {
  position: relative;
  z-index: 20; }

.app-ai-chat-window {
  z-index: 100; }

/* overlay animate in */
.mfp-bg.mfp-ready {
  opacity: 0.8; }

/* overlay animate out */
.mfp-bg.mfp-removing {
  opacity: 0; }

.mfp-bg {
  background-color: rgba(86, 58, 44, 0.95);
  z-index: 7001; }

.mfp-wrap {
  z-index: 7002; }

/* content at start */
.mfp-wrap .modal-content,
.mfp-wrap .mfp-content {
  transform: translateY(-30px);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

/* content animate it */
.mfp-wrap.mfp-ready .modal-content,
.mfp-wrap.mfp-ready .mfp-content {
  transform: translateY(0);
  opacity: 1; }

/* content animate out */
.mfp-wrap.mfp-removing .modal-content,
.mfp-wrap.mfp-removing .mfp-content {
  transform: translateY(30px);
  opacity: 0; }

/* mfp-close none*/
.mfp-close {
  display: none !important; }

img {
  width: 100%;
  max-width: 100%;
  height: auto; }

@keyframes float {
  0% {
    transform: translate(0, 0); }
  25% {
    transform: translate(10px, -5px); }
  50% {
    transform: translate(0, 5px); }
  75% {
    transform: translate(-10px, -5px); }
  100% {
    transform: translate(0, 0); } }
@keyframes float2 {
  0% {
    transform: translate(0, 0); }
  25% {
    transform: translate(2px, -2px); }
  50% {
    transform: translate(0, 2px); }
  75% {
    transform: translate(-2px, -2px); }
  100% {
    transform: translate(0, 0); } }
/* ゆっくり水平反転して戻る */
@keyframes flipL {
  0% {
    transform: scaleX(1);
    opacity: 1; }
  49% {
    transform: scaleX(1);
    opacity: 1; }
  50% {
    transform: scaleX(-1);
    opacity: 1; }
  99% {
    transform: scaleX(-1);
    opacity: 1; }
  /* 左右反転 */
  100% {
    transform: scaleX(1);
    opacity: 1; } }
/* ゆっくり水平反転して戻る */
@keyframes flipR {
  0% {
    transform: scaleX(1);
    opacity: 1; }
  49% {
    transform: scaleX(1);
    opacity: 1; }
  50% {
    transform: scaleX(-1);
    opacity: 1; }
  99% {
    transform: scaleX(-1);
    opacity: 1; }
  /* 左右反転 */
  100% {
    transform: scaleX(1);
    opacity: 1; } }
@keyframes smokeUp {
  0% {
    transform: translateY(10px) scale(1);
    opacity: 0; }
  50% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0.6; }
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.9; } }
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(2.5) translateY(50px); }
  40% {
    opacity: 1;
    transform: scale(0.9) translateY(-10px); }
  60% {
    transform: scale(1.05) translateY(5px); }
  80% {
    transform: scale(0.98) translateY(-2px); }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0); } }
.move {
  animation: float2 6s ease-in-out infinite alternate; }
  .move.left img {
    display: block;
    animation: flipL 8s ease-in-out infinite;
    transform-origin: center; }
  .move.right img {
    display: block;
    animation: flipR 10s ease-in-out infinite;
    transform-origin: center; }
  .move.center {
    animation: float 6s ease-in-out infinite alternate; }
    .move.center img {
      display: block;
      animation: flipR 10s ease-in-out infinite;
      transform-origin: center; }

.bounce {
  opacity: 0;
  transform: scale(2) translateY(50px);
  transition: none; }
  .bounce.active {
    animation: bounceIn 1.2s cubic-bezier(0.25, 1.25, 0.5, 1) forwards; }

.otonanof {
  position: relative; }
  .otonanof .lead {
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 2.7818448023vw;
    position: relative;
    padding: 1.0980966325vw 0 0.3660322108vw; }
    .otonanof .lead .up {
      display: inline-block; }
      .otonanof .lead .up:before {
        position: absolute;
        content: "";
        top: 0.7320644217vw;
        margin-left: 1.0980966325vw;
        width: 0.7320644217vw;
        height: 0.7320644217vw;
        border-radius: 0.3660322108vw;
        background: #e50012; }
  .otonanof .kv {
    position: relative;
    height: 47.5841874085vw;
    /* 下からふわっと現れる */
    /* ゆらゆらと上下に揺れる */ }
@keyframes curtain {
  0% {
    transform: scaleX(1) translateX(0) skewY(0deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  10% {
    /* 中央が少しだけ先に動く */
    transform: scaleX(0.95) translateX(10%) skewY(0deg);
    clip-path: polygon(0% 0%, 1% 20%, 0% 50%, 1% 80%, 0% 100%, 100% 100%, 100% 0%); }
  80% {
    /* ほぼ閉じる */
    transform: scaleX(0.5) translateX(140%) skewY(0deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%); }
  100% {
    /* 左へはける */
    transform: scaleX(0) translateX(110%) skewY(0deg);
    opacity: 1; } }
@keyframes fadeInBase {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes smokeIn {
  0% {
    opacity: 0;
    transform: translateY(40px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@keyframes smokeFloat {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(-8px); }
  50% {
    transform: translateY(0); }
  75% {
    transform: translateY(6px); }
  100% {
    transform: translateY(0); } }
    .otonanof .kv--upper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 36.6032210835vw;
      z-index: 3; }
      .otonanof .kv--upper img {
        display: block;
        width: 100%;
        transform-origin: right center;
        /* 右端から縮む */
        animation: curtain 3s ease-in-out forwards;
        animation-delay: 2s;
        /* ← ここで0.8秒遅らせる */ }
    .otonanof .kv--back {
      width: 100%;
      height: 47.5841874085vw;
      position: relative;
      z-index: 2; }
      .otonanof .kv--back:after {
        position: absolute;
        content: "";
        background: url("../images/back_1.jpg") no-repeat center top/cover;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0; }
      .otonanof .kv--back .backimg_smoke {
        opacity: 0;
        position: absolute;
        top: -32.2108345534vw;
        width: 64.4216691069vw;
        left: 50%;
        margin-left: -32.2108345534vw;
        z-index: 2;
        animation: smokeIn 1s ease-out 2s forwards, smokeFloat 6s ease-in-out 3s infinite;
        /* 揺れループ */ }
      .otonanof .kv--back .backimg_base {
        opacity: 0;
        position: absolute;
        width: 62.9575402635vw;
        left: 50%;
        margin-left: -31.4787701318vw;
        bottom: 0;
        z-index: 1;
        animation: fadeInBase 1s ease-in-out forwards;
        animation-delay: 2s;
        /* ← 1秒遅れて開始 */ }
    .otonanof .kv--main {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2; }
      .otonanof .kv--main h1 {
        opacity: 0;
        width: 40.2635431918vw;
        margin: 0 auto;
        padding-top: 6.588579795vw;
        animation: fadeInBase 1s ease-in-out forwards;
        animation-delay: 3s;
        /* ← 1秒遅れて開始 */ }
      .otonanof .kv--main .caption {
        opacity: 0;
        width: 40.2635431918vw;
        margin: 0 auto;
        font-size: 0.9516837482vw;
        font-weight: bold;
        text-align: right;
        margin-top: 31.4787701318vw;
        padding-right: 2.9282576867vw;
        animation: fadeInBase 1s ease-in-out forwards;
        animation-delay: 3s;
        /* ← 1秒遅れて開始 */ }
  .otonanof .anchor {
    position: relative;
    background: url("../images/tab_back.jpg") no-repeat center top/cover; }
    .otonanof .anchor .tab {
      opacity: 0;
      padding: 2.635431918vw 0;
      display: flex;
      justify-content: center;
      animation: fadeInBase 1s ease-in-out forwards;
      animation-delay: 2s;
      /* ← 1秒遅れて開始 */ }
      .otonanof .anchor .tab li {
        width: 25.7686676428vw;
        margin: 0 -0.878477306vw; }
  .otonanof .top {
    position: relative;
    background: url("../images/back_2.jpg") no-repeat center top/cover;
    height: 47.9502196193vw; }
    .otonanof .top--inner {
      width: 74.9633967789vw;
      height: 47.9502196193vw;
      margin: 0 auto;
      position: relative; }
      .otonanof .top--inner h2 {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-weight: bold;
        font-size: 1.3909224012vw;
        line-height: 2.9282576867vw;
        text-align: center;
        padding-top: 7.3206442167vw;
        position: relative;
        z-index: 2; }
      .otonanof .top--inner .smoke {
        position: absolute;
        width: 54.6120058565vw;
        top: 0;
        left: 50%;
        margin-left: -27.3060029283vw; }
      .otonanof .top--inner .under {
        position: absolute;
        width: 51.2445095168vw;
        bottom: 0;
        left: 50%;
        margin-left: -25.6222547584vw; }
      .otonanof .top--inner .smoke,
      .otonanof .top--inner .fade-text {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
      .otonanof .top--inner .smoke.active {
        opacity: 1;
        transform: translateY(-10px);
        transition-delay: 0s; }
      .otonanof .top--inner .fade-text.active {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s; }
      .otonanof .top--inner .obj {
        position: relative; }
        .otonanof .top--inner .obj .cloud {
          position: absolute;
          width: 29.2825768668vw;
          animation: float 20s ease-in-out infinite; }
          .otonanof .top--inner .obj .cloud.left {
            left: -8.1991215227vw;
            top: 23.4260614934vw; }
          .otonanof .top--inner .obj .cloud.right {
            right: -5.8565153734vw;
            top: 4.39238653vw; }
      .otonanof .top--inner .pict {
        position: relative; }
        .otonanof .top--inner .pict .obj {
          position: absolute; }
          .otonanof .top--inner .pict .obj.left {
            width: 12.1522693997vw;
            left: 0;
            top: 5.710102489vw; }
          .otonanof .top--inner .pict .obj.right {
            width: 12.8843338214vw;
            top: 22.6939970717vw;
            right: -2.196193265vw; }
  .otonanof .pack {
    padding: 4.39238653vw 0;
    position: relative; }
    .otonanof .pack:before, .otonanof .pack:after {
      position: absolute;
      content: "";
      width: 100%;
      background: linear-gradient(to right, #f6e291 0%, #dcb75b 35%, #f6e291 63%, #f6e291 100%);
      height: 4.39238653vw; }
    .otonanof .pack:before {
      top: 0; }
    .otonanof .pack:after {
      bottom: 0; }
    .otonanof .pack--inner {
      width: 74.9633967789vw;
      height: 35.1390922401vw;
      margin: 0 auto;
      position: relative; }
      .otonanof .pack--inner .imgbox {
        position: relative; }
        .otonanof .pack--inner .imgbox .imgs {
          position: absolute; }
          .otonanof .pack--inner .imgbox .imgs.left {
            width: 19.7657393851vw;
            left: -3.6603221083vw;
            top: 5.1244509517vw; }
            .otonanof .pack--inner .imgbox .imgs.left img {
              transform: rotate(-18deg); }
          .otonanof .pack--inner .imgbox .imgs.right {
            width: 21.5959004392vw;
            right: -3.6603221083vw;
            top: 8.0527086384vw; }
            .otonanof .pack--inner .imgbox .imgs.right img {
              transform: rotate(18deg); }
      .otonanof .pack--inner .pict {
        position: relative; }
        .otonanof .pack--inner .pict .move {
          position: absolute; }
          .otonanof .pack--inner .pict .move.right {
            width: 8.78477306vw;
            top: -0.7320644217vw;
            right: -3.6603221083vw; }
      .otonanof .pack--inner .lead {
        width: 40.9956076135vw;
        box-sizing: border-box;
        border: 0.2196193265vw solid #000;
        margin: 0 auto;
        margin-top: 2.196193265vw; }
      .otonanof .pack--inner h4 {
        font-weight: bold;
        font-size: 1.317715959vw;
        line-height: 2.3426061493vw;
        text-align: center;
        margin-top: 2.196193265vw;
        position: relative; }
  .otonanof .secret {
    background: url("../images/back_4.jpg") no-repeat center top/cover;
    padding: 6.588579795vw 0 10.980966325vw; }
    .otonanof .secret--inner .lead {
      width: 40.7027818448vw;
      box-sizing: border-box;
      border: 0.2928257687vw solid #000;
      margin: 0 auto;
      background: #fff;
      position: relative; }
      .otonanof .secret--inner .lead:before {
        position: absolute;
        content: "";
        box-sizing: border-box;
        width: 42.1669106881vw;
        height: 7.906295754vw;
        left: -1.0248901903vw;
        top: -1.0248901903vw;
        border: 0.7320644217vw solid #fff; }
    .otonanof .secret--inner--box {
      width: 82.4304538799vw;
      margin: 0 auto;
      display: flex;
      position: relative; }
      .otonanof .secret--inner--box:after {
        position: absolute;
        content: "";
        height: 24.9633967789vw;
        width: 1.9765739385vw; }
      .otonanof .secret--inner--box .pict {
        position: absolute;
        width: 100%;
        top: 0; }
        .otonanof .secret--inner--box .pict .move {
          position: absolute; }
      .otonanof .secret--inner--box figure {
        width: 29.2825768668vw; }
        .otonanof .secret--inner--box figure figcaption {
          font-size: 0.9516837482vw; }
      .otonanof .secret--inner--box h4 {
        display: flex;
        align-items: center; }
        .otonanof .secret--inner--box h4 strong {
          font-family: "Poppins", sans-serif;
          font-weight: 100;
          font-style: normal;
          font-size: 6.588579795vw;
          line-height: 1;
          letter-spacing: 0.1em;
          margin-right: 1.4641288433vw; }
        .otonanof .secret--inner--box h4 span {
          font-family: "Yu Mincho", "YuMincho", serif;
          font-weight: bold;
          font-size: 2.9282576867vw; }
      .otonanof .secret--inner--box h5 {
        font-size: 1.2445095168vw;
        line-height: 2;
        font-weight: 500; }
      .otonanof .secret--inner--box.pos_1 {
        margin-top: 6.588579795vw; }
        .otonanof .secret--inner--box.pos_1 figure {
          margin-right: 4.39238653vw; }
        .otonanof .secret--inner--box.pos_1 h4 {
          padding-top: 1.4641288433vw; }
        .otonanof .secret--inner--box.pos_1 .pict .move {
          width: 18.3748169839vw;
          right: -1.9033674963vw;
          top: -2.196193265vw; }
        .otonanof .secret--inner--box.pos_1:after {
          background: url("../images/tex_3_1.jpg") no-repeat center center/cover;
          right: -8.78477306vw; }
      .otonanof .secret--inner--box.pos_2 {
        align-items: center;
        flex-direction: row-reverse; }
        .otonanof .secret--inner--box.pos_2 figure {
          margin-left: 11.7130307467vw; }
        .otonanof .secret--inner--box.pos_2 .pict .move {
          width: 27.9648609078vw;
          right: 23.4260614934vw;
          top: -6.588579795vw; }
        .otonanof .secret--inner--box.pos_2:after {
          background: url("../images/tex_3_2.jpg") no-repeat center center/cover;
          left: -8.78477306vw; }
      .otonanof .secret--inner--box.pos_3 {
        align-items: center; }
        .otonanof .secret--inner--box.pos_3 figure {
          margin-right: 2.9282576867vw; }
        .otonanof .secret--inner--box.pos_3 .pict {
          top: auto;
          bottom: 0; }
          .otonanof .secret--inner--box.pos_3 .pict .move {
            width: 26.0614934114vw;
            right: 0.7320644217vw;
            bottom: -6.588579795vw; }
        .otonanof .secret--inner--box.pos_3:after {
          background: url("../images/tex_3_3.jpg") no-repeat center center/cover;
          right: -8.78477306vw; }
  .otonanof .product {
    background: url("../images/back_5.jpg") no-repeat center top/cover;
    padding: 10.980966325vw 0 10.980966325vw;
    position: relative; }
    .otonanof .product:before {
      position: absolute;
      content: "";
      width: 100%;
      background: linear-gradient(to right, #f6e291 0%, #dcb75b 35%, #f6e291 63%, #f6e291 100%);
      height: 4.39238653vw;
      top: 0; }
    .otonanof .product--inner .lead {
      width: 40.7027818448vw;
      box-sizing: border-box;
      border: 0.2928257687vw solid #000;
      margin: 0 auto;
      background: #fff;
      position: relative;
      margin-bottom: -4.39238653vw; }
      .otonanof .product--inner .lead:before {
        position: absolute;
        content: "";
        box-sizing: border-box;
        width: 42.1669106881vw;
        height: 7.906295754vw;
        left: -1.0248901903vw;
        top: -1.0248901903vw;
        border: 0.7320644217vw solid #fff; }
    .otonanof .product--inner--box {
      width: 76.1346998536vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative; }
      .otonanof .product--inner--box .productbox {
        width: 35.8711566618vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
        margin-top: 9.5168374817vw; }
        .otonanof .product--inner--box .productbox:after {
          position: absolute;
          content: "";
          width: 24.1581259151vw;
          height: 24.1581259151vw;
          border-radius: 12.4450951684vw;
          right: 1.4641288433vw;
          bottom: -5.1244509517vw;
          background: #fff;
          opacity: .5; }
        .otonanof .product--inner--box .productbox .obj {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 1; }
        .otonanof .product--inner--box .productbox figure {
          width: 17.5695461201vw;
          position: relative;
          z-index: 1; }
        .otonanof .product--inner--box .productbox dl {
          padding-bottom: 2.196193265vw;
          width: 16.8374816984vw;
          text-align: center;
          position: relative;
          z-index: 1; }
          .otonanof .product--inner--box .productbox dl dt {
            font-family: "Yu Mincho", "YuMincho", serif;
            font-weight: bold;
            font-size: 2.196193265vw;
            line-height: 1.2;
            padding: 0.5856515373vw;
            color: #e9b955;
            background: #000; }
          .otonanof .product--inner--box .productbox dl dd {
            font-size: 1.317715959vw;
            font-weight: bold; }
            .otonanof .product--inner--box .productbox dl dd a {
              display: block;
              background: #ccc;
              color: #fff;
              padding: 0.878477306vw 0;
              position: relative; }
              .otonanof .product--inner--box .productbox dl dd a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-top: 0.3660322108vw solid transparent;
                border-bottom: 0.3660322108vw solid transparent;
                border-left: 0.6588579795vw solid #fff;
                border-right: 0;
                right: 1.4641288433vw;
                top: 50%;
                margin-top: -0.2928257687vw; }
        .otonanof .product--inner--box .productbox.cl_1 .obj {
          width: 14.6412884334vw;
          right: 1.0248901903vw; }
        .otonanof .product--inner--box .productbox.cl_1 dl dd a {
          background: #02a9e4; }
        .otonanof .product--inner--box .productbox.cl_2 .obj {
          width: 8.6383601757vw;
          right: 6.588579795vw;
          top: 0.7320644217vw; }
        .otonanof .product--inner--box .productbox.cl_2 dl dd a {
          background: #ed6d02; }
        .otonanof .product--inner--box .productbox.cl_3 .obj {
          width: 8.78477306vw;
          right: 5.270863836vw;
          top: -0.3660322108vw; }
        .otonanof .product--inner--box .productbox.cl_3 dl dd a {
          background: #6fb92d; }
        .otonanof .product--inner--box .productbox.cl_4 .obj {
          width: 16.1054172767vw;
          right: 1.8301610542vw;
          top: -1.4641288433vw; }
        .otonanof .product--inner--box .productbox.cl_4 dl dd a {
          background: #b36320; }
        .otonanof .product--inner--box .productbox.cl_5 .obj {
          width: 9.7364568082vw;
          right: 5.8565153734vw;
          top: 1.4641288433vw; }
        .otonanof .product--inner--box .productbox.cl_5 dl dd a {
          background: #f29a76; }
        .otonanof .product--inner--box .productbox.cl_6 .obj {
          width: 15.1537335286vw;
          right: 1.4641288433vw;
          top: 1.4641288433vw; }
        .otonanof .product--inner--box .productbox.cl_6 dl dd a {
          background: #e9518e; }
  .otonanof .mini {
    background: url("../images/back_6.jpg") no-repeat center top/cover;
    padding: 0vw 0 10.980966325vw; }
    .otonanof .mini .obj {
      width: 7.027818448vw;
      margin: 0 auto;
      position: relative;
      top: -3.513909224vw; }
    .otonanof .mini--top {
      width: 74.9633967789vw;
      margin: 0 auto;
      display: flex;
      align-items: center; }
      .otonanof .mini--top figure {
        width: 11.420204978vw; }
      .otonanof .mini--top .leadbox {
        margin-left: 2.635431918vw; }
        .otonanof .mini--top .leadbox .ttl {
          font-family: "Yu Mincho", "YuMincho", serif;
          font-weight: bold;
          font-size: 2.9282576867vw; }
        .otonanof .mini--top .leadbox .txt {
          font-size: 1.1713030747vw;
          line-height: 1.8; }
    .otonanof .mini--inner {
      width: 80.5270863836vw;
      margin: 6.588579795vw auto 0;
      display: flex;
      justify-content: center;
      gap: 0 2.7086383602vw; }
      .otonanof .mini--inner .minibox {
        width: 25.2562225476vw; }
        .otonanof .mini--inner .minibox .obj {
          width: 25.2562225476vw;
          margin-bottom: -5.1244509517vw; }
        .otonanof .mini--inner .minibox dl {
          width: 19.7657393851vw;
          margin: 0 auto;
          text-align: center;
          position: relative;
          z-index: 1; }
          .otonanof .mini--inner .minibox dl dt {
            font-family: "Yu Mincho", "YuMincho", serif;
            font-weight: bold;
            font-size: 2.196193265vw;
            line-height: 1.2;
            padding: 0.5856515373vw;
            color: #fff;
            background: #000; }
          .otonanof .mini--inner .minibox dl dd {
            font-size: 1.317715959vw;
            font-weight: bold; }
            .otonanof .mini--inner .minibox dl dd a {
              display: block;
              background: #ccc;
              color: #fff;
              padding: 0.878477306vw 0;
              position: relative; }
              .otonanof .mini--inner .minibox dl dd a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-top: 0.3660322108vw solid transparent;
                border-bottom: 0.3660322108vw solid transparent;
                border-left: 0.6588579795vw solid #fff;
                border-right: 0;
                right: 1.4641288433vw;
                top: 50%;
                margin-top: -0.2928257687vw; }
        .otonanof .mini--inner .minibox .cap {
          text-align: center;
          font-size: 1.1713030747vw;
          font-weight: bold;
          margin-top: 1.4641288433vw; }
        .otonanof .mini--inner .minibox.cl_1 dl dt {
          background: #000; }
        .otonanof .mini--inner .minibox.cl_1 dl dd a {
          background: #e70112; }
        .otonanof .mini--inner .minibox.cl_2 dl dt {
          background: #241e84; }
        .otonanof .mini--inner .minibox.cl_2 dl dd a {
          background: #f39800; }
        .otonanof .mini--inner .minibox.cl_3 dl dt {
          background: #ed9f23; }
        .otonanof .mini--inner .minibox.cl_3 dl dd a {
          background: #014c30; }

@media screen and (max-width: 767px) {
  .pc {
    display: none; }

  .sp {
    display: block; }

  img {
    width: 100%; }

  .p-breadcrumb {
    display: block; }

  .l-footer {
    margin-top: 16vw; }

  .l-footer-pagetop {
    margin-bottom: 15px; }

  .p-breadcrumb {
    position: relative;
    z-index: 3; }

  .otonanof {
    position: relative; }
    .otonanof .lead {
      font-size: 4.8vw;
      padding: 2vw 0 0.6666666667vw; }
      .otonanof .lead .up:before {
        top: 1.3333333333vw;
        margin-left: 2vw;
        width: 1.3333333333vw;
        height: 1.3333333333vw;
        border-radius: 0.6666666667vw; }
    .otonanof .kv {
      position: relative;
      height: 106.6666666667vw; }
      .otonanof .kv--upper {
        height: 106.6666666667vw; }
      .otonanof .kv--back {
        height: 106.6666666667vw; }
        .otonanof .kv--back:after {
          position: absolute;
          content: "";
          background: url("../images/top_back_sp.jpg") no-repeat center top/cover;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0; }
        .otonanof .kv--back .backimg_smoke {
          opacity: 0;
          position: absolute;
          top: -40vw;
          width: 100vw;
          left: 50%;
          margin-left: -50vw;
          z-index: 2; }
        .otonanof .kv--back .backimg_base {
          width: 100vw;
          left: 50%;
          margin-left: -50vw;
          bottom: 8vw; }
      .otonanof .kv--main {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 2; }
        .otonanof .kv--main h1 {
          width: 86.6666666667vw;
          margin: 0 auto;
          padding-top: 21.3333333333vw; }
        .otonanof .kv--main .caption {
          width: 86.6666666667vw;
          font-size: 1.7333333333vw;
          margin-top: 64vw;
          padding-right: 12vw; }
    .otonanof .anchor {
      background: url("../images/tab_back.jpg") no-repeat center top/cover; }
      .otonanof .anchor .tab {
        padding: 4.8vw 0;
        flex-wrap: wrap; }
        .otonanof .anchor .tab li {
          width: 46.9333333333vw;
          margin: 0 -1.6vw; }
    .otonanof .top {
      height: 106.6666666667vw; }
      .otonanof .top--inner {
        width: 100vw;
        height: 106.6666666667vw; }
        .otonanof .top--inner h2 {
          font-size: 3.4666666667vw;
          line-height: 1.8;
          padding-top: 13.3333333333vw; }
        .otonanof .top--inner .smoke {
          position: absolute;
          width: 120vw;
          top: 0;
          left: 50%;
          margin-left: -60vw; }
        .otonanof .top--inner .under {
          position: absolute;
          width: 93.3333333333vw;
          bottom: 0;
          left: 50%;
          margin-left: -46.6666666667vw; }
        .otonanof .top--inner .obj .cloud {
          width: 53.3333333333vw; }
          .otonanof .top--inner .obj .cloud.left {
            left: -14.9333333333vw;
            top: 42.6666666667vw; }
          .otonanof .top--inner .obj .cloud.right {
            right: -10.6666666667vw;
            top: 8vw; }
        .otonanof .top--inner .pict .obj.left {
          width: 18.6666666667vw;
          left: 0.6666666667vw;
          top: 10.4vw; }
        .otonanof .top--inner .pict .obj.right {
          width: 18.6666666667vw;
          top: 41.3333333333vw;
          right: 0.6666666667vw; }
    .otonanof .pack {
      padding: 8vw 0;
      position: relative; }
      .otonanof .pack:before, .otonanof .pack:after {
        background: linear-gradient(to right, #f6e291 0%, #dcb75b 35%, #f6e291 63%, #f6e291 100%);
        height: 8vw; }
      .otonanof .pack:before {
        top: 0; }
      .otonanof .pack:after {
        bottom: 0; }
      .otonanof .pack--inner {
        width: 93.3333333333vw;
        height: 120vw; }
        .otonanof .pack--inner .imgbox .imgs.left {
          width: 28.3333333333vw;
          left: 14.6666666667vw;
          top: 76vw; }
        .otonanof .pack--inner .imgbox .imgs.right {
          width: 28vw;
          right: 14.6666666667vw;
          top: 77.3333333333vw; }
        .otonanof .pack--inner .pict .move.right {
          width: 16vw;
          top: 33.3333333333vw;
          right: 1.4641288433vw; }
        .otonanof .pack--inner .lead {
          width: 74.6666666667vw;
          border: 0.4vw solid #000;
          margin-top: 13.3333333333vw; }
        .otonanof .pack--inner h4 {
          font-size: 3.2vw;
          line-height: 5.3333333333vw;
          text-align: center;
          margin-top: 6.6666666667vw;
          position: relative; }
    .otonanof .secret {
      background: url("../images/back_4.jpg") no-repeat center top/cover;
      padding: 13.3333333333vw 0 13.3333333333vw; }
      .otonanof .secret--inner .lead {
        width: 73.8666666667vw;
        border: 0.4vw solid #000;
        margin-bottom: 0vw; }
        .otonanof .secret--inner .lead:before {
          width: 76.8vw;
          height: 14.4vw;
          left: -1.8666666667vw;
          top: -1.8666666667vw;
          border: 1.3333333333vw solid #fff; }
      .otonanof .secret--inner--box {
        width: 82.6666666667vw;
        flex-wrap: wrap;
        margin-top: 9.3333333333vw; }
        .otonanof .secret--inner--box:after {
          position: absolute;
          content: "";
          height: 24.9633967789vw;
          width: 1.9765739385vw; }
        .otonanof .secret--inner--box .pict {
          position: absolute;
          width: 100%;
          top: 0; }
          .otonanof .secret--inner--box .pict .move {
            position: absolute; }
        .otonanof .secret--inner--box figure {
          width: 49.3333333333vw; }
          .otonanof .secret--inner--box figure figcaption {
            font-size: 1.7333333333vw; }
        .otonanof .secret--inner--box .txtbox {
          width: 82.6666666667vw;
          margin: 0 auto; }
        .otonanof .secret--inner--box h4 {
          display: flex;
          align-items: center;
          padding-top: 1.3333333333vw; }
          .otonanof .secret--inner--box h4 strong {
            font-size: 14.4vw;
            line-height: 1;
            letter-spacing: 0.1em;
            margin-right: 3.2vw; }
          .otonanof .secret--inner--box h4 span {
            font-size: 6.4vw; }
        .otonanof .secret--inner--box h5 {
          font-size: 3.7333333333vw;
          text-align: justify; }
          .otonanof .secret--inner--box h5 br {
            display: none; }
        .otonanof .secret--inner--box.pos_1 {
          margin-top: 6.588579795vw; }
          .otonanof .secret--inner--box.pos_1 figure {
            margin-right: 0vw; }
          .otonanof .secret--inner--box.pos_1 h4 {
            padding-top: 2.6666666667vw; }
          .otonanof .secret--inner--box.pos_1 .pict .move {
            width: 33.4666666667vw;
            right: -3.4666666667vw;
            top: 8vw; }
          .otonanof .secret--inner--box.pos_1:after {
            background: url("../images/tex_3_1.jpg") repeat center center/cover;
            right: -8.78477306vw;
            height: 50%;
            bottom: 0; }
        .otonanof .secret--inner--box.pos_2 {
          align-items: center;
          flex-direction: row-reverse; }
          .otonanof .secret--inner--box.pos_2 figure {
            margin-left: 0vw; }
          .otonanof .secret--inner--box.pos_2 .pict .move {
            width: 32vw;
            right: auto;
            left: 0;
            top: 14.6666666667vw; }
          .otonanof .secret--inner--box.pos_2:after {
            left: -8.78477306vw;
            height: 50%;
            bottom: 0; }
        .otonanof .secret--inner--box.pos_3 {
          align-items: center; }
          .otonanof .secret--inner--box.pos_3 figure {
            margin-right: 0vw; }
          .otonanof .secret--inner--box.pos_3 .pict {
            top: 0;
            bottom: auto; }
            .otonanof .secret--inner--box.pos_3 .pict .move {
              width: 33.4666666667vw;
              right: -3.4666666667vw;
              bottom: auto;
              top: 14.6666666667vw; }
          .otonanof .secret--inner--box.pos_3:after {
            right: -8.78477306vw;
            height: 40%;
            bottom: 0; }
    .otonanof .product {
      padding: 21.3333333333vw 0 13.3333333333vw;
      position: relative; }
      .otonanof .product:before {
        width: 100%;
        height: 8vw;
        top: 0; }
      .otonanof .product--inner .lead {
        width: 73.8666666667vw;
        border: 0.4vw solid #000;
        margin-bottom: -5.3333333333vw; }
        .otonanof .product--inner .lead:before {
          width: 76.8vw;
          height: 14.4vw;
          left: -1.8666666667vw;
          top: -1.8666666667vw;
          border: 1.3333333333vw solid #fff; }
      .otonanof .product--inner--box {
        width: 86.6666666667vw;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap; }
        .otonanof .product--inner--box .productbox {
          width: 86.6666666667vw;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: 17.3333333333vw; }
          .otonanof .product--inner--box .productbox:after {
            width: 66vw;
            height: 66vw;
            border-radius: 34vw;
            right: 4vw;
            bottom: -14vw;
            opacity: .5; }
          .otonanof .product--inner--box .productbox .obj {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1; }
          .otonanof .product--inner--box .productbox figure {
            width: 48vw;
            z-index: 1; }
          .otonanof .product--inner--box .productbox dl {
            padding-bottom: 6vw;
            width: 41.6vw;
            z-index: 1; }
            .otonanof .product--inner--box .productbox dl dt {
              font-size: 6vw;
              line-height: 1.2;
              padding: 1.6vw; }
            .otonanof .product--inner--box .productbox dl dd {
              font-size: 3.6vw;
              font-weight: bold; }
              .otonanof .product--inner--box .productbox dl dd a {
                padding: 2.4vw 0; }
                .otonanof .product--inner--box .productbox dl dd a:after {
                  border-top: 1vw solid transparent;
                  border-bottom: 1vw solid transparent;
                  border-left: 1.8vw solid #fff;
                  right: 4vw;
                  margin-top: -0.8vw; }
          .otonanof .product--inner--box .productbox.cl_1 .obj {
            width: 34.6666666667vw;
            right: 2.4266666667vw; }
          .otonanof .product--inner--box .productbox.cl_2 .obj {
            width: 20.4533333333vw;
            right: 15.6vw;
            top: 2vw; }
          .otonanof .product--inner--box .productbox.cl_3 .obj {
            width: 20.8vw;
            right: 12.48vw;
            top: -1vw; }
          .otonanof .product--inner--box .productbox.cl_4 .obj {
            width: 38.1333333333vw;
            right: 4.3333333333vw;
            top: -4vw; }
          .otonanof .product--inner--box .productbox.cl_5 .obj {
            width: 23.0533333333vw;
            right: 13.8666666667vw;
            top: 4vw; }
          .otonanof .product--inner--box .productbox.cl_6 .obj {
            width: 35.88vw;
            right: 3.4666666667vw;
            top: 4vw; }
    .otonanof .mini {
      background: url("../images/back_6.jpg") no-repeat center top/cover;
      padding: 0vw 0 13.3333333333vw; }
      .otonanof .mini .obj {
        width: 19.2vw;
        top: -9.6vw; }
      .otonanof .mini--top {
        width: 93.3333333333vw;
        display: block;
        align-items: center; }
        .otonanof .mini--top figure {
          width: 33.3333333333vw;
          margin: 0 auto; }
        .otonanof .mini--top .leadbox {
          width: 93.3333333333vw;
          margin-left: auto;
          margin: 4vw auto 0; }
          .otonanof .mini--top .leadbox .ttl {
            font-size: 4.5333333333vw;
            padding-bottom: 2.6666666667vw; }
          .otonanof .mini--top .leadbox .txt {
            font-size: 3.2vw;
            line-height: 1.8; }
            .otonanof .mini--top .leadbox .txt br {
              display: none; }
      .otonanof .mini--inner {
        width: 93.3333333333vw;
        margin: 4vw auto 0;
        flex-wrap: wrap;
        gap: 5.3333333333vw; }
        .otonanof .mini--inner .minibox {
          width: 44vw;
          margin-top: 10.6666666667vw; }
          .otonanof .mini--inner .minibox .obj {
            width: 44vw;
            margin-bottom: -14vw; }
          .otonanof .mini--inner .minibox dl {
            width: 36vw;
            z-index: 1; }
            .otonanof .mini--inner .minibox dl dt {
              font-size: 6vw;
              line-height: 1.2;
              padding: 1.6vw; }
            .otonanof .mini--inner .minibox dl dd {
              font-size: 3.6vw; }
              .otonanof .mini--inner .minibox dl dd a {
                padding: 2.4vw 0; }
                .otonanof .mini--inner .minibox dl dd a:after {
                  border-top: 1vw solid transparent;
                  border-bottom: 1vw solid transparent;
                  border-left: 1.8vw solid #fff;
                  right: 4vw;
                  margin-top: -0.8vw; }
          .otonanof .mini--inner .minibox .cap {
            text-align: center;
            font-size: 2.1333333333vw;
            font-weight: bold;
            margin-top: 1.4641288433vw; }
          .otonanof .mini--inner .minibox.cl_1 dl dt {
            background: #000; }
          .otonanof .mini--inner .minibox.cl_1 dl dd a {
            background: #e70112; }
          .otonanof .mini--inner .minibox.cl_2 dl dt {
            background: #241e84; }
          .otonanof .mini--inner .minibox.cl_2 dl dd a {
            background: #f39800; }
          .otonanof .mini--inner .minibox.cl_3 dl dt {
            background: #ed9f23; }
          .otonanof .mini--inner .minibox.cl_3 dl dd a {
            background: #014c30; } }