@charset "UTF-8";
/*!
 * ress.css • v4.0.0
 * MIT License
 * github.com/filipelinhares/ress
 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4; }

*, :after, :before {
  background-repeat: no-repeat;
  box-sizing: inherit; }

:after, :before {
  text-decoration: inherit;
  vertical-align: inherit; }

* {
  padding: 0;
  margin: 0; }

hr {
  overflow: visible;
  height: 0;
  color: inherit; }

details, main {
  display: block; }

summary {
  display: list-item; }

small {
  font-size: 80%; }

[hidden] {
  display: none; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

a {
  background-color: transparent; }

a:active, a:hover {
  outline-width: 0; }

code, kbd, pre, samp {
  font-family: monospace,monospace; }

pre {
  font-size: 1em; }

b, strong {
  font-weight: bolder; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

table {
  border-color: inherit;
  text-indent: 0; }

input {
  border-radius: 0; }

[disabled] {
  cursor: default; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  resize: vertical; }

button, input, optgroup, select, textarea {
  font: inherit; }

optgroup {
  font-weight: 700; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  color: inherit; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted ButtonText; }

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button; }

button, input, select, textarea {
  background-color: transparent;
  border-style: none; }

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-width: 0; }

select {
  -moz-appearance: none;
  -webkit-appearance: none; }

select::-ms-expand {
  display: none; }

select::-ms-value {
  color: currentColor; }

legend {
  border: 0;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit; }

img {
  border-style: none; }

progress {
  vertical-align: baseline; }

[aria-busy=true] {
  cursor: progress; }

[aria-controls] {
  cursor: pointer; }

[aria-disabled=true] {
  cursor: default; }

* {
  box-sizing: border-box; }

body {
  background: url("../images/rep.webp") repeat-y, #F4F2EC;
  background-size: 100% auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(0.9375rem, calc(0.900462963rem + 0.1851851852vw), 1.0625rem);
  font-weight: 400;
  line-height: 1.8em;
  font-feature-settings: "palt";
  color: #000; }
  @media screen and (max-width: 600px) {
    body {
      background: url("../images/rep-sp.webp") repeat-y, #F4F2EC;
      background-size: 100% auto; } }

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

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s; }
  a:hover {
    transition: 0.3s;
    text-decoration: none; }
  a img {
    transition: 0.3s; }
    a img:hover {
      opacity: 0.7;
      transition: 0.3s; }

li {
  list-style: none; }

.flb_sb, .contact-box .box, .point ul, .content .course, .content .course .left ul, .content .topping ul, .access .inner, .access dl dt {
  display: flex;
  justify-content: space-between; }

.flb_ct, .content .course .left ul li.txt, .content .course .table, .content .course .table ol li, .content .course .table ol li::before, .content .course .table dl dd::before {
  display: flex;
  justify-content: center; }

.flb_st, .content .course .table dl dd, .access dl {
  display: flex;
  justify-content: flex-start; }

.flb_ed {
  display: flex;
  justify-content: flex-end; }

.fadeIn {
  opacity: 0;
  transition: 3s; }
  .fadeIn.is-show {
    opacity: 1; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50px);
  transition: 1s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_left {
  opacity: 0;
  transform: translate(-50px, 0);
  transition: 2s; }
  .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_right {
  opacity: 0;
  transform: translate(50px, 0);
  transition: 2s; }
  .fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

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

.sp {
  display: none; }
  @media screen and (max-width: 600px) {
    .sp {
      display: block; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes swing {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-10deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }
@keyframes sway {
  0% {
    transform: rotate(-5deg); }
  50% {
    transform: rotate(5deg); }
  100% {
    transform: rotate(-5deg); } }
/* 共通 */
.inner {
  width: min(calc(100% - 40px), 1330px);
  margin: auto; }

.contact-box {
  border-top: #fff 8px solid;
  border-bottom: #fff 8px solid;
  position: relative; }
  @media screen and (max-width: 600px) {
    .contact-box {
      border-top: #fff 5px solid;
      border-bottom: #fff 5px solid; } }
  .contact-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #FFEAC3;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0; }
  .contact-box .box {
    border-top: #1A1411 2px solid;
    border-bottom: #1A1411 2px solid;
    position: relative; }
    .contact-box .box .left {
      display: block;
      width: 32.5vw; }
      @media screen and (max-width: 600px) {
        .contact-box .box .left {
          width: 44.5333333333vw; } }
      .contact-box .box .left img {
        display: block; }
    .contact-box .box .right {
      display: block;
      width: 42.9375vw; }
      @media screen and (max-width: 600px) {
        .contact-box .box .right {
          width: 46.4vw; } }
      .contact-box .box .right img {
        display: block; }
  .contact-box .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .contact-box .inner img {
      display: block; }
    .contact-box .inner h2 {
      width: 48.625vw;
      margin: 0 auto 2.5vw; }
      @media screen and (max-width: 600px) {
        .contact-box .inner h2 {
          width: 90%;
          margin-bottom: 3.4666666667vw; } }
    .contact-box .inner a {
      display: block;
      width: 39.8125vw;
      margin: auto;
      transform: translateY(50px);
      opacity: 0; }
      @media screen and (max-width: 600px) {
        .contact-box .inner a {
          width: 76%; } }
      .contact-box .inner a.is-show {
        animation: fadeUp 1s ease forwards;
        animation-delay: 0.4s; }

/* ヘッダー */
header {
  position: relative; }
  header .img {
    display: block; }
  header .logo {
    display: block;
    width: min(60%, 670px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    header .logo:hover img {
      opacity: 1; }

/* フッター */
footer {
  text-align: center; }
  footer .copy {
    padding: 2.5vw 0;
    font-size: 12px; }
    @media screen and (max-width: 600px) {
      footer .copy {
        padding: 6.4vw; } }

/* コンテンツ */
.mv {
  padding-top: 8.5px;
  margin-bottom: 36px;
  position: relative; }
  @media screen and (max-width: 600px) {
    .mv {
      padding-top: 10px;
      margin-bottom: 12px;
      overflow: hidden; } }
  .mv h1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: min(48%, 771px);
    transform: translateY(-60px); }
    @media screen and (max-width: 600px) {
      .mv h1 {
        width: min(93%, 350px);
        transform: translateY(0) translateX(-20px); } }
    .mv h1 picture {
      display: block; }
      .mv h1 picture img {
        display: block; }
  .mv ul {
    width: calc(100% - 80px);
    margin: auto;
    position: relative; }
    @media screen and (max-width: 600px) {
      .mv ul {
        width: calc(100% - 20px); } }
  .mv .img {
    display: block;
    width: 97%;
    position: absolute;
    left: 0;
    bottom: 1%;
    z-index: 2; }
    @media screen and (max-width: 600px) {
      .mv .img {
        width: 100%; } }

.point {
  padding-bottom: 3.125vw;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 600px) {
    .point {
      padding-bottom: 13.8666666667vw; } }
  .point .img {
    display: block;
    width: min(100%, 1584px);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (max-width: 600px) {
      .point .img {
        display: none; } }
  .point .inner {
    width: min(calc(100% - 40px), 1056px);
    position: relative;
    z-index: 1;
    text-align: center; }
    .point .inner::before, .point .inner::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      animation: sway 4s ease-in-out infinite; }
      @media screen and (max-width: 600px) {
        .point .inner::before, .point .inner::after {
          content: none; } }
    .point .inner::before {
      right: 100%;
      width: min(14vw, 223px);
      aspect-ratio: 223 / 356;
      background: url("../images/sanshin.webp") center center no-repeat;
      background-size: 100% auto; }
    .point .inner::after {
      left: 100%;
      width: min(16vw, 254px);
      aspect-ratio: 509 / 449;
      background: url("../images/cup.webp") center center no-repeat;
      background-size: 100% auto; }
  .point h2 {
    width: min(80%, 852px);
    margin: 0 auto 2.375vw; }
    @media screen and (max-width: 600px) {
      .point h2 {
        width: 100%;
        margin-bottom: 2.6666666667vw; } }
    .point h2 img {
      display: block; }
  .point p {
    font-size: clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem);
    font-weight: 500;
    line-height: 2em; }
  .point ul {
    padding-top: 4.875vw;
    flex-wrap: wrap; }
    @media screen and (max-width: 600px) {
      .point ul {
        padding-top: 6.9333333333vw; } }
    .point ul li {
      width: 22.7%;
      opacity: 0;
      transform: translateY(10px); }
      @media screen and (max-width: 600px) {
        .point ul li {
          width: 46.8%;
          margin-bottom: 2.1333333333vw; } }
    .point ul.is-show li {
      animation: fadeUp 0.6s ease forwards; }
      .point ul.is-show li:nth-child(1) {
        animation-delay: 0.1s; }
      .point ul.is-show li:nth-child(2) {
        animation-delay: 0.4s; }
      .point ul.is-show li:nth-child(3) {
        animation-delay: 0.8s; }
      .point ul.is-show li:nth-child(4) {
        animation-delay: 1.2s; }

.content {
  padding-top: 5vw;
  overflow: hidden; }
  @media screen and (max-width: 600px) {
    .content {
      padding-top: 8vw; } }
  .content .inner {
    width: min(calc(100% - 20px), 1360px);
    background: #fff;
    padding: 10px; }
    @media screen and (max-width: 600px) {
      .content .inner {
        padding: 6px; } }
  .content .inbox {
    border: #000 4px solid; }
    @media screen and (max-width: 600px) {
      .content .inbox {
        border: #000 2px solid; } }
  .content .inview {
    opacity: 0;
    transform: translateY(30px); }
    .content .inview.is-show {
      animation: fadeUp 1s ease forwards; }
      .content .inview.is-show.no2 {
        animation-delay: 0.4s; }
  .content h2 {
    background: #E39500;
    padding-top: 2.125vw;
    padding-bottom: 1.5vw;
    position: relative;
    margin-bottom: 4.5vw; }
    @media screen and (max-width: 600px) {
      .content h2 {
        padding: 3.2vw;
        margin-bottom: 10px; } }
    .content h2 img {
      display: block;
      width: 16vw;
      margin: auto; }
      @media screen and (max-width: 600px) {
        .content h2 img {
          width: 37.7%; } }
    .content h2::after {
      content: "";
      display: block;
      width: 100%;
      aspect-ratio: 666 / 5;
      background: url("../images/line.webp") center center no-repeat;
      background-size: 100% auto;
      position: absolute;
      top: 100%;
      left: 0; }
      @media screen and (max-width: 600px) {
        .content h2::after {
          aspect-ratio: 339 / 5;
          background: url("../images/line-sp.webp") center center no-repeat;
          background-size: 100% auto; } }
  .content .course {
    width: min(calc(100% - 32px), 1180px);
    border-bottom: #1A1411 2px solid;
    padding-bottom: 2.3125vw;
    margin: 0 auto 2.5vw; }
    @media screen and (max-width: 600px) {
      .content .course {
        display: block;
        padding-bottom: 24px;
        margin-bottom: 24px; } }
    .content .course h3 {
      width: 100%;
      margin-bottom: 1.5vw; }
      @media screen and (max-width: 600px) {
        .content .course h3 {
          margin-bottom: 4.2666666667vw; } }
      @media screen and (max-width: 600px) {
        .content .course h3:nth-of-type(2) {
          border-top: #1A1411 2px solid;
          padding-top: 24px; } }
      .content .course h3 img {
        display: block; }
    .content .course .left {
      width: calc(100% - 310px); }
      @media screen and (max-width: 600px) {
        .content .course .left {
          width: 100%; } }
      .content .course .left .table {
        display: none; }
        @media screen and (max-width: 600px) {
          .content .course .left .table {
            display: block; } }
      @media screen and (max-width: 960px) {
        .content .course .left ul {
          flex-wrap: wrap; } }
      .content .course .left ul.line {
        border-bottom: #1A1411 2px solid;
        padding-bottom: 2vw;
        margin-bottom: 2vw; }
        @media screen and (max-width: 600px) {
          .content .course .left ul.line {
            padding-bottom: 4.8vw;
            margin-bottom: 0;
            border-bottom: 0; } }
      @media screen and (max-width: 600px) {
        .content .course .left ul:nth-of-type(3n) li {
          margin-right: 0; } }
      .content .course .left ul li {
        display: block;
        margin-right: 3%; }
        @media screen and (max-width: 600px) {
          .content .course .left ul li:nth-child(3n) {
            margin-right: 0; } }
        .content .course .left ul li:last-child {
          margin-right: 0; }
        .content .course .left ul li img {
          display: block;
          width: auto;
          max-height: 10.5vw; }
          @media screen and (max-width: 600px) {
            .content .course .left ul li img {
              max-height: 31.4666666667vw; } }
        .content .course .left ul li.txt {
          align-items: center;
          width: 15.9375vw;
          text-align: center;
          border: #1A1311 3px solid;
          font-size: clamp(1.125rem, calc(0.989rem + 0.4vw), 1.5rem);
          font-weight: 700;
          line-height: 1.6em; }
          @media screen and (max-width: 960px) {
            .content .course .left ul li.txt {
              width: 100%;
              margin-top: 11px;
              padding: 12px 0; } }
    .content .course .table {
      flex-direction: column;
      width: 280px;
      background: url("../images/table.webp") center center no-repeat;
      background-size: cover;
      position: relative;
      padding: 32px; }
      @media screen and (max-width: 600px) {
        .content .course .table {
          display: none;
          width: 100%;
          margin-bottom: 24px; } }
      .content .course .table::before {
        content: "";
        display: block;
        width: 2vw;
        aspect-ratio: 4 / 3;
        background: url("../images/speech.webp") center center no-repeat;
        background-size: 100% auto;
        position: absolute;
        right: 100%;
        top: 28%; }
        @media screen and (max-width: 600px) {
          .content .course .table::before {
            content: none; } }
      .content .course .table .time {
        background: #fff;
        padding: 8px 9px 16px;
        margin-bottom: 32px; }
      .content .course .table h4 {
        margin-bottom: 8px; }
        .content .course .table h4 img {
          display: block; }
      .content .course .table ol {
        list-style: none;
        counter-reset: listnum;
        padding-bottom: 8px;
        margin-left: 0; }
        .content .course .table ol li {
          font-size: 26px;
          font-weight: 700;
          margin-bottom: 8px;
          align-items: center; }
          .content .course .table ol li::before {
            align-items: center;
            width: 32px;
            height: 32px;
            counter-increment: listnum;
            content: counter(listnum);
            background: #844D25;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            margin-right: 8px; }
      .content .course .table ul li {
        font-size: 12px;
        line-height: 1.5em;
        text-indent: -2em;
        padding-left: 2em; }
        .content .course .table ul li::before {
          content: "※";
          margin-right: 1em; }
      .content .course .table dl {
        counter-reset: listnum; }
        .content .course .table dl dt {
          margin-bottom: 16px; }
          .content .course .table dl dt img {
            display: block; }
        .content .course .table dl dd {
          align-items: center;
          margin-bottom: 12px; }
          .content .course .table dl dd:last-of-type {
            margin-bottom: 0; }
          .content .course .table dl dd::before {
            align-items: center;
            counter-increment: listnum;
            content: counter(listnum,upper-alpha);
            width: 32px;
            height: 32px;
            background: #844D25;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            margin-right: 8px; }
          .content .course .table dl dd span {
            display: block;
            width: calc(100% - 40px);
            font-size: 13px;
            font-weight: 500;
            line-height: 1.6em; }
            .content .course .table dl dd span b {
              display: block;
              font-size: 18px;
              font-weight: 700; }
  .content .topping {
    width: min(calc(100% - 32px), 1180px);
    margin: auto;
    padding-bottom: 3.5vw; }
    @media screen and (max-width: 600px) {
      .content .topping {
        padding-bottom: 10.6666666667vw; } }
    .content .topping h3 {
      width: min(91.3%, 671px);
      text-align: center;
      margin: 0 auto 2vw; }
      @media screen and (max-width: 600px) {
        .content .topping h3 {
          margin-bottom: 4.2666666667vw; } }
      .content .topping h3 img {
        display: block; }
      .content .topping h3 span {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5em; }
    @media screen and (max-width: 600px) {
      .content .topping ul {
        display: block; } }
    .content .topping ul li:first-child {
      width: 79.5%; }
      @media screen and (max-width: 600px) {
        .content .topping ul li:first-child {
          width: 100%;
          margin-bottom: 8.5333333333vw; } }
    .content .topping ul li:last-child {
      width: 17.7%; }
      @media screen and (max-width: 600px) {
        .content .topping ul li:last-child {
          width: 100%; } }
  .content .img {
    display: block;
    position: relative; }
    .content .img img {
      display: block; }
    .content .img::after {
      content: "";
      display: block;
      width: 35%;
      aspect-ratio: 932 / 645;
      background: url("../images/man.webp") center center no-repeat;
      background-size: 100% auto;
      position: absolute;
      left: -4.5%;
      bottom: 0;
      opacity: 0;
      transform: translateY(20px); }
      @media screen and (max-width: 600px) {
        .content .img::after {
          width: 48%;
          left: -20px; } }
    .content .img.is-show::after {
      animation: fadeUp 1s ease forwards;
      animation-delay: 0.4s; }

.access {
  padding-top: 8.4375vw;
  padding-bottom: 10vw; }
  @media screen and (max-width: 600px) {
    .access {
      padding-top: 12.8vw;
      padding-bottom: 16vw; } }
  .access .inner {
    align-items: flex-start; }
    @media screen and (max-width: 600px) {
      .access .inner {
        display: block; } }
  .access .txt {
    width: 58%; }
    @media screen and (max-width: 600px) {
      .access .txt {
        width: 100%;
        padding-bottom: 20px; } }
  .access iframe {
    display: block;
    width: 60%;
    aspect-ratio: 200 / 117;
    object-fit: cover;
    border: 0; }
    @media screen and (max-width: 600px) {
      .access iframe {
        width: 100%;
        aspect-ratio: 335 / 196; } }
  .access h2 {
    width: 21.625vw;
    margin-bottom: 3.5vw; }
    @media screen and (max-width: 600px) {
      .access h2 {
        width: 51.3%;
        margin: 0 auto 5.8666666667vw; } }
    .access h2 img {
      display: block; }
  .access p, .access dt, .access dd {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8em; }
  .access dt, .access dd {
    padding-top: 16px; }
    @media screen and (max-width: 600px) {
      .access dt, .access dd {
        padding-top: 8px; } }
  .access dl {
    align-items: flex-start;
    flex-wrap: wrap; }
    .access dl dt {
      width: 88px; }
      .access dl dt::after {
        content: "："; }
    .access dl dd {
      width: calc(100% - 88px); }

.faq {
  background: #C4933C;
  position: relative;
  padding-top: 5.3125vw;
  padding-bottom: 4vw; }
  @media screen and (max-width: 600px) {
    .faq {
      padding: 5.3333333333vw 0; } }
  .faq::before, .faq::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 40 / 1;
    background: url("../images/faq-line.webp") repeat-x;
    background-size: 1600px auto;
    position: absolute;
    left: 0; }
    @media screen and (max-width: 600px) {
      .faq::before, .faq::after {
        aspect-ratio: 75 / 4;
        background: url("../images/faq-line-sp.webp") repeat-x;
        background-size: 375px auto; } }
  .faq::before {
    bottom: 100%;
    transform: scale(1, -1); }
  .faq::after {
    top: 100%; }
  .faq h2 {
    width: 24.75vw;
    margin: 0 auto 3.5vw; }
    @media screen and (max-width: 600px) {
      .faq h2 {
        width: 55%;
        margin-bottom: 4.2666666667vw; } }
    .faq h2 img {
      display: block; }
  .faq .box {
    background: #fff;
    padding: 10px;
    margin-bottom: 16px; }
    .faq .box dl {
      border: #000 4px solid;
      padding: 3vw 4.375vw 2.875vw 7.375vw; }
      @media screen and (max-width: 600px) {
        .faq .box dl {
          border: #000 2px solid;
          padding: 6.4vw 4.2666666667vw 6.4vw 12.8vw; } }
      .faq .box dl dt {
        font-size: clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem);
        font-weight: 700;
        color: #D44018;
        position: relative;
        margin-bottom: 2.125vw; }
        @media screen and (max-width: 600px) {
          .faq .box dl dt {
            margin-bottom: 10px; } }
        .faq .box dl dt::before {
          content: "";
          display: block;
          width: 2.5vw;
          aspect-ratio: 22 / 21;
          background: url("../images/q.webp") center center no-repeat;
          background-size: 100% auto;
          position: absolute;
          right: calc(100% + 8px);
          top: 0; }
          @media screen and (max-width: 600px) {
            .faq .box dl dt::before {
              width: 6.4vw;
              top: 4px; } }
      .faq .box dl dd {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.8em;
        position: relative; }
        .faq .box dl dd::before {
          content: "";
          display: block;
          width: 2.5vw;
          aspect-ratio: 1 / 1;
          background: url("../images/a.webp") center center no-repeat;
          background-size: 100% auto;
          position: absolute;
          right: calc(100% + 8px);
          top: 0; }
          @media screen and (max-width: 600px) {
            .faq .box dl dd::before {
              width: 6.4vw;
              top: 4px; } }

.precautions {
  padding-top: 7.8125vw;
  padding-bottom: 7.5vw; }
  @media screen and (max-width: 600px) {
    .precautions {
      padding-top: 16vw;
      padding-bottom: 10.6666666667vw; } }
  .precautions .inner {
    width: min(calc(100% - 40px), 800px); }
  .precautions h2 {
    width: 49.125vw;
    margin: 0 auto 1vw; }
    @media screen and (max-width: 600px) {
      .precautions h2 {
        width: 71%;
        margin-bottom: 4.2666666667vw; } }
    .precautions h2 img {
      display: block; }
  .precautions dl dt {
    font-size: clamp(1rem, calc(0.8518518519rem + 0.7407407407vw), 1.5rem);
    font-weight: 700;
    color: #844D25;
    padding-top: 2.5vw;
    padding-bottom: 1.5vw; }
    @media screen and (max-width: 600px) {
      .precautions dl dt {
        padding-top: 6.4vw;
        padding-bottom: 2.1333333333vw; }
        .precautions dl dt:first-of-type {
          padding-top: 0; } }
  .precautions dl dd {
    font-size: clamp(0.875rem, calc(0.837962963rem + 0.1851851852vw), 1rem);
    font-weight: 500;
    line-height: 1.8em; }
    .precautions dl dd dl dt {
      padding-top: 1em;
      font-size: clamp(0.875rem, calc(0.837962963rem + 0.1851851852vw), 1rem);
      font-weight: 500;
      line-height: 1.8em;
      color: #000;
      padding-bottom: 0; }
      @media screen and (max-width: 600px) {
        .precautions dl dd dl dt {
          padding-top: 1em; }
          .precautions dl dd dl dt:first-of-type {
            padding-top: 1em; } }