@charset "UTF-8";
/*================================

  variables

================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&family=Yuji+Boku&display=swap");
:root {
  --primary: #ecf0eb;
  --primary-rgb: 236, 240, 235;
  --secondary: #888885;
  --common: #fff;
  /*--header: rgba(224, 231, 235, .75);*/
  --header: rgba(224, 231, 235, 1);
  --footer: #2f2725;
  --f-button01: #fdd000;
  --f-button02: #d19a00;
  --f-button03: rgba(253, 208, 0, .5);
  --price: rgba(46, 38, 36, .08);
  --bd01: #ccc6bc;
  --bd02: #afa595;
  --bd03: #988977;
  --bd09: #f4b7b7;
  --bd10: #b7d0b1;
  --bg: 255, 255, 255;
  --bg02: #a66e02;
  --bg03: #f5f3f1;
  --bg04: rgba(245, 243, 241, .8);
  --bg04-rgb: 162, 187, 168;
  --bg05: #b4cfe0;
  --bg06-rgb: 237, 248, 255;
  --bg07-rgb: 61, 113, 48;
  --bg08-rgb: 87, 142, 73;
  --bg09: #f7fafb;
  --bg10-rgb: 236, 240 ,235;
  --bg11: rgba(47, 39, 37, .08);
  --bg-apply: #fefefe;
  --apply01: #c1d0bf;
  --apply02: #597557;
  --apply03-rgb: 0, 53, 41;
  --apply04: #9db6d5;
  --apply04-rgb: 157, 182, 213;
  --ink: 25, 23, 23;
  --form01: #e30000;
  --form02: #faebeb;
  --form04: #a7b9c8;
  --form05: #897a69;
  --form06: #fadada;
  --form07: #d3ebce;
  --form08: #284e1e;
  --font01: #2f2725;
  --font-rgb: 47, 39, 37;
  --font02: #483e3b;
  --font03: #23a300;
  --font04: #861616;
  --home01: #f08401;
  --shadow: 0, 0, 0;
  --shadow02: 22, 30, 21;
  --shadiw03: #f08601;
  --font: Times New Roman,"游明朝",Yu Mincho,"游明朝体",YuMincho,"ヒラギノ明朝 Pro W3",Hiragino Mincho Pro,HiraMinProN-W3,"Noto Serif JP",sans-serif,"HGS明朝E","MS P明朝",MS PMincho,serif;
  --link: #2f2725;
  --hover: #a66e02;
  --hover02: rgba(0, 0, 0, .06);
  --home-large: 1140px;
  --large: 1100px;
  --xlarge: 1440px;
}

@-webkit-keyframes bright-flash {
  0% {
    /* いきなり明るい状態から始めることでユーザー操作の反応の良さを示す */
    -webkit-filter: brightness(2.5);
            filter: brightness(2.5);
  }
  100% {
    -webkit-filter: brightness(1.25);
            filter: brightness(1.25);
  }
}

@keyframes bright-flash {
  0% {
    /* いきなり明るい状態から始めることでユーザー操作の反応の良さを示す */
    -webkit-filter: brightness(2.5);
            filter: brightness(2.5);
  }
  100% {
    -webkit-filter: brightness(1.25);
            filter: brightness(1.25);
  }
}
@-webkit-keyframes fade-up {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-up {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*================================

  base

================================*/
/*
  html
================================*/
html {
  scroll-behavior: smooth;
  scroll-padding: 124px;
}
@media (min-width: 768px) {
  html {
    scroll-padding: 150px;
  }
}

body {
  position: relative;
  color: var(--font01);
  font-family: var(--font);
  text-rendering: optimizeSpeed;
  overflow-wrap: anywhere;
  line-break: strict;
  background-color: var(--primary);
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--font01);
  text-decoration: none;
  transition: 0.3s ease;
}
a:visited {
  color: var(--font01);
}
a:hover, a:active {
  color: var(--font01);
}

/*===============================

  header

================================*/
/*
  layout
================================*/
.header {
  grid-area: header;
  display: -ms-grid;
  display: grid;
  grid-template-columns: [main-start] 10px [content-start] 1fr [content-end] 10px [main-end];
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  height: 64px;
  background-color: var(--common);
}
@media (min-width: 768px) {
  .header {
    grid-template-columns: [main-start] 32px [content-start] 1fr [content-end] 32px [main-end];
    height: 80px;
  }
}
.header > * {
  grid-column: content;
  width: 100%;
  margin-inline: auto;
}
.header-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  grid-template-areas: "logo link button";
}
@media (min-width: 1164px) {
  .header-content {
    grid-template-areas: "logo nav link";
  }
}
.header-content .nav {
  grid-area: nav;
  justify-self: end;
}
.header-content .button-sect {
  grid-area: link;
  justify-self: end;
}
@media (min-width: 1440px) {
  .header-content .button-sect {
    -webkit-margin-start: 6px;
            margin-inline-start: 6px;
  }
}
.header-content .dialog-button {
  grid-area: button;
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
@media (min-width: 768px) {
  .header-content .dialog-button {
    -webkit-margin-start: 20px;
            margin-inline-start: 20px;
  }
}
.header .logo {
  grid-area: logo;
  width: 150px;
  aspect-ratio: 50/9;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 768px) {
  .header .logo {
    width: 250px;
  }
}

/*
  home only
*/
.wrapper._home .header, .wrapper._about .header {
  background-color: var(--header);
}

/*===============================

  dialog nav

================================*/
/*
  layout
================================*/
.dialog-nav {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin-inline: auto 0;
  background-color: rgba(var(--bg), 0.84);
  border: none;
  opacity: 0;
  overflow: initial;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  transition: 0.3s ease;
}
@media (min-width: 768px) {
  .dialog-nav {
    width: 320px;
  }
}
.dialog-nav::-ms-backdrop {
  background-color: rgba(47, 39, 37, 0);
  -ms-transition: background 0.3s;
  transition: background 0.3s;
}
.dialog-nav::-webkit-backdrop {
  background-color: rgba(47, 39, 37, 0);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.dialog-nav::backdrop {
  background-color: rgba(47, 39, 37, 0);
  transition: background 0.3s;
}
.dialog-nav.show {
  opacity: 1;
}
.dialog-nav.show::-ms-backdrop {
  background: rgba(47, 39, 37, 0.5);
}
.dialog-nav.show::-webkit-backdrop {
  background: rgba(47, 39, 37, 0.5);
}
.dialog-nav.show::backdrop {
  background: rgba(47, 39, 37, 0.5);
}
.dialog-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding-inline: 10px;
}
@media (min-width: 768px) {
  .dialog-header {
    gap: 20px;
    height: 90px;
    padding-inline: 32px;
  }
}
.dialog-container {
  display: flex;
  justify-content: center;
  height: calc(100% - 64px);
}
@media (min-width: 768px) {
  .dialog-container {
    height: calc(100% - 90px);
  }
}
.dialog-menu {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  font-feature-settings: "palt" 1;
}
.dialog-item {
  opacity: 0;
  -webkit-animation: fade-up 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fade-up 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.dialog-item:nth-of-type(2) {
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s;
}
.dialog-item:nth-of-type(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
.dialog-item:nth-of-type(4) {
  -webkit-animation-delay: 0.63s;
          animation-delay: 0.63s;
}
.dialog-item:nth-of-type(5) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.dialog-item a {
  position: relative;
  display: block;
  padding-block: 20px;
  font-size: 24px;
}
.dialog-item a span {
  position: absolute;
  top: 12px;
  left: 100%;
  display: flex;
  place-content: center;
  min-width: 24px;
  height: 24px;
  color: var(--common);
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  background-color: var(--font03);
  border-radius: 12px;
}

/*
  dialog - button design
================================*/
:is(.dialog-button, .close-button) {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: transparent;
}

@media (min-width: 1164px) {
  .dialog-button {
    display: none;
  }
}

.dialog-button-border, .close-button-border {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% - 12px);
  width: 24px;
  height: 2px;
  background-color: var(--font01);
}
.dialog-button-border::before, .dialog-button-border::after, .close-button-border::before, .close-button-border::after {
  position: absolute;
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--font01);
}
.dialog-button-border::before, .close-button-border::before {
  top: calc(50% + 6px);
}
.dialog-button-border::after, .close-button-border::after {
  top: calc(50% - 8px);
}

.close-button-border {
  background-color: transparent;
}
.close-button-border::before {
  top: calc(50% - 2px);
  transform: rotate(45deg);
}
.close-button-border::after {
  top: calc(50% - 2px);
  transform: rotate(-45deg);
}

/*===============================

  nav

================================*/
/*
  layout
================================*/
.nav {
  display: none;
}
@media (min-width: 1164px) {
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 18px;
    font-feature-settings: "palt" 1;
  }
}
@media (min-width: 1164px) and (min-width: 1440px) {
  .nav {
    font-size: 20px;
    line-height: 20px;
  }
}

.nav-item {
  position: relative;
}
.nav-item a {
  display: block;
  padding: 10px 18px;
}
@media (min-width: 1440px) {
  .nav-item a {
    padding: 12px 24px;
  }
}
.nav-item a .menu {
  position: relative;
  display: inline;
}
.nav-item a .menu span {
  position: absolute;
  top: -12px;
  left: calc(100% - 2px);
  display: flex;
  place-content: center;
  min-width: 22px;
  height: 22px;
  color: var(--common);
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  background-color: var(--font03);
  border-radius: 11px;
}
.nav-item a .menu::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -3px;
  left: 0;
  background-color: var(--hover);
  transform: scaleX(0);
  transform-origin: right top;
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.nav-item a:hover {
  color: var(--hover);
}
.nav-item a:hover .menu::after {
  transform: scaleX(1);
  transform-origin: left top;
}
.nav-item + .nav-item {
  position: relative;
}
@media (min-width: 1164px) {
  .nav-item + .nav-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 16px;
    -webkit-margin-before: -7px;
            margin-block-start: -7px;
    background-color: currentColor;
  }
}

/*================================

  main

================================*/
/*
  layout
================================*/
.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "header" "visual" "main" "sponser" "footer";
  min-height: 100dvh;
}

.page-visual {
  grid-area: visual;
}

.container {
  display: grid;
  overflow: hidden;
}

:is(.title, .title-small > .title, .title-thin > .title, .title-sub, .title-tertiary, .title-quaternary) {
  color: currentColor;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
:is(.title, .title-small > .title, .title-thin > .title, .title-sub, .title-tertiary, .title-quaternary)::before, :is(.title, .title-small > .title, .title-thin > .title, .title-sub, .title-tertiary, .title-quaternary)::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
:is(.title, .title-small > .title, .title-thin > .title, .title-sub, .title-tertiary, .title-quaternary)::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
:is(.title, .title-small > .title, .title-thin > .title, .title-sub, .title-tertiary, .title-quaternary)::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}

/*
  heading
================================*/
.title {
  font-size: clamp(2.5rem, 1.984rem + 2.12vw, 3rem);
  font-weight: 800;
  font-feature-settings: "palt" 1;
}
.title-container {
  position: relative;
  -webkit-padding-before: clamp(0.688rem, 0.623rem + 0.26vw, 0.75rem);
          padding-block-start: clamp(0.688rem, 0.623rem + 0.26vw, 0.75rem);
  -webkit-padding-after: clamp(4.125rem, 3.545rem + 2.38vw, 4.688rem);
          padding-block-end: clamp(4.125rem, 3.545rem + 2.38vw, 4.688rem);
  -webkit-padding-start: clamp(1.688rem, 0.527rem + 4.76vw, 2.813rem);
          padding-inline-start: clamp(1.688rem, 0.527rem + 4.76vw, 2.813rem);
  -webkit-border-start: 8px solid currentColor;
          border-inline-start: 8px solid currentColor;
  z-index: 1;
}
.title-container::before {
  position: absolute;
  content: "";
  z-index: -1;
}
.title-container._border {
  border-bottom: 1px solid;
}
.title._fill {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 20px;
  padding-inline: 0 24px;
  color: var(--common);
  border-image-source: linear-gradient(rgba(var(--ink), 0.7), rgba(var(--ink), 0.7));
  border-image-slice: fill 0;
  border-image-outset: 0 0px 0 100vw;
}
.title-sub {
  font-size: clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
  font-weight: 800;
  font-feature-settings: "palt" 1;
}
.title-sub + .title {
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
.title-tertiary {
  -webkit-padding-after: clamp(0.75rem, 0.492rem + 1.06vw, 1rem);
          padding-block-end: clamp(0.75rem, 0.492rem + 1.06vw, 1rem);
  font-size: clamp(1.5rem, 1.242rem + 1.06vw, 1.75rem);
  font-feature-settings: "palt" 1;
  -webkit-border-after: 1px solid currentColor;
          border-block-end: 1px solid currentColor;
}
.title-quaternary {
  font-size: clamp(1.25rem, 1.121rem + 0.53vw, 1.375rem);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
}

.title-small {
  -webkit-padding-after: 16px;
          padding-block-end: 16px;
  -webkit-padding-start: 28px;
          padding-inline-start: 28px;
  -webkit-border-start: 2px solid currentColor;
          border-inline-start: 2px solid currentColor;
}
.title-small .title {
  font-size: clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
  font-feature-settings: "palt" 1;
}

.title-thin {
  -webkit-padding-after: 50px;
          padding-block-end: 50px;
  -webkit-padding-start: 32px;
          padding-inline-start: 32px;
  -webkit-border-start: 2px solid currentColor;
          border-inline-start: 2px solid currentColor;
}
@media (min-width: 768px) {
  .title-thin {
    -webkit-padding-after: 20px;
            padding-block-end: 20px;
    -webkit-padding-start: 28px;
            padding-inline-start: 28px;
  }
}
.title-thin .title {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  font-size: clamp(2.5rem, 2.113rem + 1.59vw, 2.875rem);
  font-feature-settings: "palt" 1;
}
.title-thin .title-sub {
  font-size: clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
  font-feature-settings: "palt" 1;
}
.title-thin .title span {
  display: inline-block;
}

/*
  content
================================*/
.content {
  display: grid;
  grid-template-columns: [main-start] 16px [content-start] 1fr [content-end] 16px [main-end];
}
@media (min-width: 768px) {
  .content {
    grid-template-columns: [main-start] 32px [content-start] 1fr [content-end] 32px [main-end];
  }
}
.content > * {
  grid-column: content;
  width: min(100%, var(--large));
  margin-inline: auto;
}
.content-text {
  color: currentColor;
  font-size: 18px;
  line-height: 1.75;
}
.content-text::before, .content-text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.content-text::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
.content-text::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}

.content-through {
  display: grid;
  grid-template-columns: 16px minmax(auto, var(--large)) 16px;
}
@media (min-width: 768px) {
  .content-through {
    grid-template-columns: minmax(32px, 1fr) minmax(auto, var(--large)) minmax(32px, 1fr);
  }
}
.content-through > * {
  grid-column: 2/3;
}

.home-content {
  display: grid;
  grid-template-columns: 16px minmax(auto, var(--home-large)) 16px;
}
@media (min-width: 768px) {
  .home-content {
    grid-template-columns: minmax(32px, 1fr) minmax(auto, var(--home-large)) minmax(32px, 1fr);
  }
}
.home-content > * {
  grid-column: 2/3;
}

/*
  page-visual
================================*/
.page-visual {
  position: relative;
  background: linear-gradient(99.66deg, rgba(14, 41, 2, 0) 34.48%, rgba(22, 30, 21, 0.66) 78.76%), url(/img/common/visual.jpg);
  background-repeat: repeat;
  background-position: 50% 100%;
  background-size: cover;
  height: 427px;
}
@media (min-width: 768px) {
  .page-visual {
    height: 453px;
    background-position: 50% 0;
    background-size: 1440px auto;
  }
}
@media (min-width: 1164px) {
  .page-visual {
    height: 287px;
  }
}
.page-visual .title {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: end;
  -webkit-margin-after: 48px;
          margin-block-end: 48px;
}
@media (min-width: 1164px) {
  .page-visual .title {
    align-self: center;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}
.page-visual .ogoma {
  grid-column: 2/4;
  grid-row: 1/2;
  justify-self: end;
  align-self: start;
  -webkit-margin-before: 26px;
          margin-block-start: 26px;
}
@media (min-width: 768px) {
  .page-visual .ogoma {
    grid-column: 2/3;
  }
}
@media (min-width: 1164px) {
  .page-visual .ogoma {
    align-self: center;
    -webkit-margin-before: -12px;
            margin-block-start: -12px;
  }
}
.page-visual .ogoma .logo {
  width: 240px;
}
@media (min-width: 768px) {
  .page-visual .ogoma .logo {
    width: 320px;
  }
}
@media (min-width: 1164px) {
  .page-visual .ogoma .logo {
    width: 438px;
  }
}
.page-visual .ogoma .logo img {
  width: 100%;
  aspect-ratio: 438/90;
  -o-object-fit: contain;
     object-fit: contain;
}

/*
  text
================================*/
:is(.content, .content-through) .content-text {
  color: currentColor;
  font-size: 18px;
  line-height: 1.75;
}
:is(.content, .content-through) .content-text::before, :is(.content, .content-through) .content-text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
:is(.content, .content-through) .content-text::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
:is(.content, .content-through) .content-text::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}

.text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.75;
}
.text::before, .text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.text::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
.text::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}
.text-bold {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.75;
}
.text-bold::before, .text-bold::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.text-bold::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
.text-bold::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}
.text-middle {
  font-size: clamp(1.375rem, 1.246rem + 0.53vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
}
.text-middle::before, .text-middle::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.text-middle::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.text-middle::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.text-large {
  font-size: clamp(1.875rem, 1.23rem + 2.65vw, 2.5rem);
  font-weight: 800;
  line-height: 1.5;
}
.text-large::before, .text-large::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.text-large::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.text-large::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}

/*
  ogoma info
================================*/
.ogoma-info {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
  color: var(--common);
  border: 1px solid currentColor;
  border-width: 1px 0;
}
@media (min-width: 1164px) {
  .ogoma-info {
    width: 100%;
  }
}
.ogoma-info .item {
  padding: 16px;
  text-align: right;
}
.ogoma-info .item + .item {
  -webkit-border-before: 1px solid currentColor;
          border-block-start: 1px solid currentColor;
}
.ogoma-info .item .text, .ogoma-info .item .text-sub {
  display: block;
  font-weight: 800;
}
@media (min-width: 768px) {
  .ogoma-info .item .text, .ogoma-info .item .text-sub {
    display: inline-block;
  }
}
.ogoma-info .item .text {
  font-size: clamp(1rem, 0.742rem + 1.06vw, 1.25rem);
}
.ogoma-info .item .text span {
  display: inline-block;
  margin-inline: 2px;
  font-size: 16px;
}
.ogoma-info .item .text._day {
  display: block;
  font-size: clamp(1rem, 0.863rem + 0.56vw, 1.25rem);
  font-feature-settings: "palt" 1;
}
.ogoma-info .item .text._deadline {
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
  font-feature-settings: "palt" 1;
}
.ogoma-info .item .text + .text-sub {
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
}
.ogoma-info .item .text-sub {
  font-size: 14px;
}
.ogoma-info .item .text-sub + .text-sub {
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}

/*
  price tag
================================*/
.tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em 1em;
  background-color: rgba(var(--font-rgb), 0.08);
}
.tag-container {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.tag-text {
  font-size: 18px;
  font-weight: 800;
}
.tag-price {
  margin-inline: 20px 6px;
  font-size: 32px;
  font-weight: 800;
}
.tag-lead {
  display: block;
  margin-block: 4px 8px;
  font-size: clamp(0.875rem, calc(0.654rem + 0.98vw), 1.125rem);
  line-height: 1.4;
}

/*===============================

  footer

================================*/
/*
  layout
================================*/
.footer {
  position: relative;
  grid-area: footer;
  display: -ms-grid;
  display: grid;
  grid-template-columns: [main-start] 16px [content-start] 1fr [content-end] 16px [main-end];
  row-gap: 80px;
  padding-block: 80px;
  color: var(--common);
}

@media (min-width: 768px) {
  .footer {
    grid-template-columns: [main-start] 32px [content-start] 1fr [content-end] 32px [main-end];
  }
}
.footer::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(/img/common/bg-footer.jpg);
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: auto 1100px;
  background-color: var(--footer);
}
@media (min-width: 768px) {
  .footer::before {
    background-position: 50% 100%;
  }
}
@media (min-width: 1164px) {
  .footer::before {
    background-position: 50% 80%;
  }
}
.footer > * {
  grid-column: content;
  width: min(100%, var(--large));
  margin-inline: auto;
}

.cf-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-auto-flow: row;
  justify-content: start;
  align-items: start;
  row-gap: 24px;
  grid-template-areas: "nav" "sub" "temples";
}
@media (min-width: 768px) {
  .cf-content {
    gap: 18px;
  }
}
@media (min-width: 1164px) {
  .cf-content {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "nav temples" "sub temples";
  }
}
.cf-content .cf-nav._main {
  grid-area: nav;
}
@media (min-width: 1164px) {
  .cf-content .cf-nav._main {
    justify-self: start;
  }
}
.cf-content .cf-nav._sub {
  grid-area: sub;
}
@media (min-width: 1164px) {
  .cf-content .cf-nav._sub {
    justify-self: start;
  }
}
.cf-content .temples {
  grid-area: temples;
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
}
@media (min-width: 1164px) {
  .cf-content .temples {
    -webkit-margin-before: 15px;
            margin-block-start: 15px;
  }
}
.cf-content .temples .text {
  -webkit-margin-before: 6px;
          margin-block-start: 6px;
  font-size: 14px;
}
@media (min-width: 1164px) {
  .cf-content .temples .text {
    text-align: right;
  }
}

.cf-logo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-auto-flow: row;
  justify-content: start;
  align-items: start;
  row-gap: 12px;
  grid-template-areas: "logo" "office" "number" "time";
}
@media (min-width: 1164px) {
  .cf-logo {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 12px 32px;
    grid-template-areas: "logo office" "logo number" "logo time";
    align-items: start;
  }
}
.cf-logo .logo {
  grid-area: logo;
  font-size: clamp(3rem, 2.286rem + 3.57vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}
.cf-logo .logo::before, .cf-logo .logo::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.cf-logo .logo::before {
  margin-top: calc((1 - 1) * 0.5em);
}
.cf-logo .logo::after {
  margin-bottom: calc((1 - 1) * 0.5em);
}
.cf-logo .office {
  grid-area: office;
  -webkit-margin-before: 32px;
          margin-block-start: 32px;
  font-size: clamp(1.438rem, 1.393rem + 0.22vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
}
.cf-logo .office::before, .cf-logo .office::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.cf-logo .office::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.cf-logo .office::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
@media (min-width: 1164px) {
  .cf-logo .office {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
.cf-logo .number {
  grid-area: number;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
}
.cf-logo .number::before, .cf-logo .number::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.cf-logo .number::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.cf-logo .number::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.cf-logo .number span {
  display: inline-block;
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
  font-size: 32px;
  letter-spacing: 0.08em;
}
.cf-logo .time {
  -webkit-margin-before: 6px;
          margin-block-start: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.cf-logo .time::before, .cf-logo .time::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.cf-logo .time::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.cf-logo .time::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.cf-logo .time span {
  display: inline-block;
}

/*
  nav
================================*/
.cf-nav {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1164px) {
  .cf-nav {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.cf-nav._main {
  font-size: 24px;
  line-height: 24px;
}
.cf-nav._sub {
  font-size: 20px;
  line-height: 20px;
}
.cf-nav .nav-item a {
  display: block;
  padding-block: 18px;
  color: var(--common);
}
@media (min-width: 1164px) {
  .cf-nav .nav-item a {
    padding: 12px 24px;
  }
}
.cf-nav .nav-item a span {
  position: relative;
  white-space: nowrap;
}
.cf-nav .nav-item a span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -3px;
  left: 0;
  background-color: var(--common);
  transform: scaleX(0);
  transform-origin: right top;
  transition: transform 0.3s ease-out;
  will-change: transform;
}
@media (hover: hover) {
  .cf-nav .nav-item a:hover span::after {
    transform: scaleX(1);
    transform-origin: left top;
  }
}
.cf-nav .nav-item + .nav-item {
  position: relative;
}
@media (min-width: 1164px) {
  .cf-nav .nav-item + .nav-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 16px;
    -webkit-margin-before: -7px;
            margin-block-start: -7px;
    background-color: currentColor;
  }
}

/*
  sponsor
================================*/
._sponsor {
  grid-area: sponser;
  row-gap: 32px;
  padding-block: 64px;
  background-color: var(--footer);
}
._sponsor .banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 768px) {
  ._sponsor .banner {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }
}
@media (min-width: 1164px) {
  ._sponsor .banner {
    width: var(--large);
  }
}
._sponsor .banner a {
  -flex-shrink: 1;
}
._sponsor .banner a img {
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}
@media (hover: hover) {
  ._sponsor .banner a:hover img {
    -webkit-filter: brightness(1.75);
            filter: brightness(1.75);
  }
}
@media (hover: none) {
  ._sponsor .banner a:active img {
    -webkit-filter: brightness(1.75);
            filter: brightness(1.75);
  }
}

/*===============================

  form

================================*/
/*
  layout
================================*/
label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  -webkit-margin-after: 2px;
          margin-block-end: 2px;
  font-size: 16px;
}
label .badge {
  display: inline-block;
  -webkit-margin-before: -4px;
          margin-block-start: -4px;
  -webkit-margin-start: 4px;
          margin-inline-start: 4px;
  padding-inline: 6px;
  color: var(--common);
  font-size: 14px;
  font-weight: 700;
  background-color: var(--form01);
  border-radius: 4px;
}

.fieldset {
  font-size: 18px;
  line-height: 1.8;
}
.fieldset::before, .fieldset::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.fieldset::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.fieldset::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.fieldset :is(p, .form-select) {
  position: relative;
  display: flex;
  flex-direction: column;
}
.fieldset :is(p, .form-select) .error {
  display: none;
}
.fieldset .form-address .error {
  display: none;
}

.form-text, .form-textarea {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.form-text {
  height: 52px;
  width: 100%;
  padding-inline: 16px;
  font-size: 18px;
  line-height: 1.8;
  border-radius: 4px;
  border: 0;
  box-shadow: 0 0 0 1px rgba(var(--shadow), 0.2) inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-text::before, .form-text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.form-text::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.form-text::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.form-text:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}
.form-radio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.8;
}
.form-radio::before, .form-radio::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.form-radio::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.form-radio::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.form-radio input {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
}
.form-radio-name {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--font01);
}
.form-radio-name:before {
  flex-shrink: 0;
  display: inline-block;
  content: "";
  width: 1.2em;
  height: 1.2em;
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  border: 1px solid rgba(var(--shadow), 0.2);
  border-radius: 50%;
}
.form-radio input:checked + .form-radio-name {
  color: var(--font01);
}
.form-radio input:checked + .form-radio-name:before {
  border: 0.35em solid var(--font01);
}
.form-radio input:focus-visible + .form-radio-name .form-radio-text {
  background: linear-gradient(transparent 90%, rgba(47, 39, 37, 0.3) 90%);
}
.form-checkbox {
  display: flex;
  flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.8;
}
.form-checkbox::before, .form-checkbox::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.form-checkbox::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.form-checkbox::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.form-checkbox input {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
}
.form-checkbox-name {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
  cursor: pointer;
  color: var(--font01);
}
.form-checkbox-name:before {
  display: inline-block;
  content: "";
  width: 1.12em;
  height: 1.12em;
  border: 1px solid var(--font01);
  border-radius: 3px;
}
.form-checkbox-text {
  -webkit-margin-before: 3px;
          margin-block-start: 3px;
}
.form-checkbox input:checked + .form-checkbox-name {
  color: var(--font01);
}
.form-checkbox input:checked + .form-checkbox-name::before {
  background-color: var(--font01);
  border: 1px solid var(--font01);
}
.form-checkbox input:checked + .form-checkbox-name::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0.065em;
  left: 0.37em;
  width: 0.4em;
  height: 0.65em;
  margin: auto;
  border: solid var(--common);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.form-checkbox input:focus-visible + .form-checkbox-name .form-checkbox-text {
  background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}
.form-select {
  position: relative;
  height: 52px;
  font-size: 18px;
  line-height: 1.8;
}
.form-select::before, .form-select::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.form-select::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.form-select::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.form-select::before {
  position: absolute;
  content: "";
  top: 0;
  right: 23px;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(135deg);
  pointer-events: none;
}
.form-select select {
  width: 100%;
  height: 52px;
  padding-inline: 16px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(var(--shadow), 0.2) inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.form-select select::-ms-expand {
  display: none;
}
.form-select select:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}
.form-textarea {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(var(--shadow), 0.2) inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  resize: vertical;
}
.form-textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.overall-item {
  margin-block: 24px;
  padding: 16px;
  color: currentColor;
  font-size: 18px;
  line-height: 1.5;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}
.overall-item::before, .overall-item::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.overall-item::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.overall-item::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.overall-item._error {
  color: var(--font04);
  background-color: var(--form06);
  border-color: var(--bd09);
}
.overall-item._success {
  color: var(--font03);
  background-color: var(--form07);
  border-color: var(--bd10);
}

.form-text._error, .form-select._error select, .form-address._error {
  color: var(--form01);
  background-color: var(--form02);
  box-shadow: 0 0 0 1px var(--form01) inset;
}
.form-text._error + .error, .form-select._error select + .error, .form-address._error + .error {
  position: absolute;
  display: block;
  bottom: -36px;
  padding: 0 8px 8px 8px;
  color: var(--form01);
  font-size: 14px;
}

.form-text:disabled, .form-select select:default {
  color: rgba(var(--shadow), 0.4);
  background-color: rgba(var(--shadow), 0.05);
  cursor: not-allowed;
}
.form-select select:disabled {
  color: rgba(var(--shadow), 0.4);
  background-color: rgba(var(--shadow), 0.05);
  cursor: not-allowed;
}
.form-checkbox input:disabled ~ * {
  opacity: 0.4;
  cursor: not-allowed;
}
.form-textarea:disabled {
  color: rgba(var(--shadow), 0.4);
  background-color: rgba(var(--shadow), 0.05);
  cursor: not-allowed;
}

.fieldset:disabled .wish-search,
.wish-search:disabled {
  color: rgba(var(--shadow), 0.4);
  background-color: rgba(var(--shadow), 0.05);
  cursor: not-allowed;
}
.fieldset:disabled .wish-search:hover,
.wish-search:disabled:hover {
  color: rgba(var(--shadow), 0.4);
  background-color: rgba(var(--shadow), 0.05);
  border-color: rgba(var(--shadow), 0.4);
}

/*===============================

  column list

================================*/
/*
  home - product-detail / column 3
================================*/
.product-detail {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (min-width: 1164px) {
  .product-detail {
    flex-direction: row;
    gap: 9.2%;
  }
}
@media (min-width: 1164px) {
  .product-detail .list {
    width: 27.2%;
  }
}
.product-detail .list .title-tertiary + * {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.product-detail .list .text {
  font-size: 20px;
  line-height: 1.75;
}
.product-detail .list .text::before, .product-detail .list .text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.product-detail .list .text::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
.product-detail .list .text::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}
.product-detail .list .filled {
  -webkit-padding-start: 60px;
          padding-inline-start: 60px;
}
.product-detail .list .filled li {
  list-style: disc;
  font-size: 20px;
}
.product-detail .list .filled li + li {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}

/*
  fortemples - book / payment
================================*/
._fortemples .detail {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1164px) {
  ._fortemples .detail {
    flex-direction: row;
    gap: 9.2%;
  }
}
._fortemples .detail._book {
  gap: 54px;
}
@media (min-width: 1164px) {
  ._fortemples .detail._book {
    gap: 2.6%;
  }
}
@media (min-width: 1164px) {
  ._fortemples .detail._book .list {
    width: 31.6%;
  }
}
._fortemples .detail._book .list strong {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
  font-size: 22px;
}
@media (min-width: 1164px) {
  ._fortemples .detail._book .list:last-of-type .content-text {
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
  }
}
._fortemples .detail._payment {
  gap: 24px;
}
@media (min-width: 1164px) {
  ._fortemples .detail._payment {
    gap: 1.6%;
  }
}
@media (min-width: 1164px) {
  ._fortemples .detail._payment .list {
    width: 49.2%;
  }
}

/*
  fortemples - payment list
================================*/
.payment-list {
  display: flex;
  flex-wrap: wrap;
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  margin-inline: 16px;
}
.payment-list dt {
  width: 50px;
}
.payment-list dd {
  width: calc(100% - 50px);
}
.payment-list dd span {
  display: block;
  font-size: 14px;
}
@media (min-width: 768px) {
  .payment-list dd span {
    font-size: 18px;
  }
}

/*===============================

  button

================================*/
/*
  main style
================================*/
.button-container {
  display: flex;
  gap: 30px;
}
.button-container._column {
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
@media (min-width: 1164px) {
  .button-container._column {
    flex-direction: row;
    justify-content: space-between;
  }
}
.button-container._column > * {
  flex: 1;
}

.button-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 60px);
  padding-block: 23px;
  padding-inline: 38px 48px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  transition: 0.3s ease;
}
@media (min-width: 768px) {
  .button-link {
    width: auto;
  }
}
.button-link > * {
  color: currentColor;
  font-size: clamp(1.25rem, 1.071rem + 0.89vw, 1.5rem);
  font-feature-settings: "palt" 1;
  line-height: 1.15;
}
.button-link > *::before, .button-link > *::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-link > *::before {
  margin-top: calc((1 - 1.15) * 0.5em);
}
.button-link > *::after {
  margin-bottom: calc((1 - 1.15) * 0.5em);
}
.button-link::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: -60px;
  transform: translateY(calc(-50% - 1px)) rotate(30deg);
  width: 12px;
  height: 1px;
}
.button-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  width: 84px;
  height: 1px;
}

.button-link._pdf {
  padding-inline: 16px 30px;
}
@media (min-width: 768px) {
  .button-link._pdf {
    width: calc(100% - 60px);
  }
}
.button-link._pdf .inner {
  position: relative;
  display: flex;
  align-items: center;
}
.button-link._pdf .inner::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(/img/common/icon-pdf.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
.button-link._pdf .inner .text-pdf {
  font-size: clamp(1.125rem, 0.857rem + 1.34vw, 1.5rem);
  display: inline-block;
  width: auto;
}
.button-link._pdf .inner .text-pdf:first-of-type {
  -webkit-padding-start: 6px;
          padding-inline-start: 6px;
}
.button-link._pdf .inner .text-pdf:last-of-type {
  display: none;
}
@media (min-width: 768px) {
  .button-link._pdf .inner .text-pdf:last-of-type {
    display: inline-block;
  }
}

.button-form {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  padding-block: 23px;
  padding-inline: 38px 48px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  color: currentColor;
  font-size: clamp(1.25rem, 1.071rem + 0.89vw, 1.5rem);
  font-feature-settings: "palt" 1;
  line-height: 1.15;
  transition: 0.3s ease;
}
.button-form::before, .button-form::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-form::before {
  margin-top: calc((1 - 1.15) * 0.5em);
}
.button-form::after {
  margin-bottom: calc((1 - 1.15) * 0.5em);
}
.button-form::before, .button-form::after {
  --font01: transparent;
  position: absolute;
  content: "";
  width: 8px;
  height: 12px;
  top: calc(50% - 6px);
  background-size: contain;
}
.button-form .text {
  font-size: clamp(1.25rem, 1.071rem + 0.89vw, 1.5rem);
  font-feature-settings: "palt" 1;
  line-height: 1.15;
}
.button-form .text::before, .button-form .text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-form .text::before {
  margin-top: calc((1 - 1.15) * 0.5em);
}
.button-form .text::after {
  margin-bottom: calc((1 - 1.15) * 0.5em);
}

.button-add {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  padding-block: 23px;
  padding-inline: 24px 48px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  cursor: pointer;
  transition: 0.3s ease;
}
.button-add span {
  position: relative;
  display: block;
  -webkit-padding-start: 36px;
          padding-inline-start: 36px;
  color: currentColor;
  font-size: clamp(1.25rem, 1.071rem + 0.89vw, 1.5rem);
  font-feature-settings: "palt" 1;
  line-height: 1.15;
  transition: 0.3s ease;
}
.button-add span::before, .button-add span::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-add span::before {
  margin-top: calc((1 - 1.15) * 0.5em);
}
.button-add span::after {
  margin-bottom: calc((1 - 1.15) * 0.5em);
}
.button-add span::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: 0;
  background-image: url(/img/common/icon-add.svg);
  background-size: contain;
}
@media (hover: hover) {
  .button-add:hover {
    background-color: var(--font01);
  }
}
@media (hover: none) {
  .button-add:hover {
    background-color: var(--font01);
  }
}
.button-add:hover span {
  color: var(--common);
}
.button-add:hover span::before {
  background-image: url(/img/common/icon-add-white.svg);
}

.button-form._nfill._next::before {
  display: none;
}
.button-form._nfill._next::after {
  --font01: transparent;
  display: block;
  right: 23px;
  background-image: url(/img/common/arrow-white.svg);
}
.button-form._nfill._next:hover::after {
  background-image: url(/img/common/arrow.svg);
}

.button-form._nedge._back::after {
  display: none;
}
.button-form._nedge._back::before {
  left: 23px;
  background-image: url(/img/common/arrow.svg);
  transform: rotate(180deg);
}
.button-form._nedge._back:hover::before {
  background-image: url(/img/common/arrow-white.svg);
}

.button-form._pfill._next::before {
  display: none;
}
.button-form._pfill._next::after {
  --common: transparent;
  right: 23px;
  background-image: url(/img/common/arrow.svg);
}
.button-form._pfill._next:hover::after {
  background-image: url(/img/common/arrow-white.svg);
}

.button-form._pedge._back::after {
  display: none;
}
.button-form._pedge._back::before {
  --common: transparent;
  left: 23px;
  background-image: url(/img/common/arrow-white.svg);
  transform: rotate(180deg);
}
.button-form._pedge._back:hover::before {
  background-image: url(/img/common/arrow.svg);
}

.button-form._nedge._open {
  position: relative;
  height: 40px;
  padding: 11px 12px 11px 18px;
  font-size: 18px;
}
.button-form._nedge._open::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 9px;
  top: 50%;
  right: 0;
  -webkit-margin-before: -5px;
          margin-block-start: -5px;
  background-image: url(/img/common/arrow.svg);
  background-size: contain;
  transform: rotate(90deg);
}
.button-form._nedge._open:hover::before {
  background-image: url(/img/common/arrow-white.svg);
}

fieldset:disabled :is(.button-link, .button-form) {
  opacity: 0.45;
  cursor: not-allowed;
}
fieldset:disabled :is(.button-link, .button-form)._nfill:hover {
  color: var(--common);
  background-color: var(--font01);
}
fieldset:disabled :is(.button-link, .button-form)._nfill:hover > * {
  color: var(--common);
}
fieldset:disabled :is(.button-link, .button-form)._nfill:hover::after {
  background-image: url(/img/common/arrow-white.svg);
}

:is(.button-link, .button-form)._pedge {
  color: var(--common);
  border-color: var(--common);
  background-color: transparent;
}
:is(.button-link, .button-form)._pedge::before, :is(.button-link, .button-form)._pedge::after {
  background-color: var(--common);
}
:is(.button-link, .button-form)._pedge > * {
  color: var(--common);
}
:is(.button-link, .button-form)._pedge span {
  display: none;
}
@media (hover: hover) {
  :is(.button-link, .button-form)._pedge:hover {
    color: var(--font01);
    border-color: var(--common);
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pedge:hover::before, :is(.button-link, .button-form)._pedge:hover::after {
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pedge:hover > * {
    color: var(--font01);
  }
  :is(.button-link, .button-form)._pedge:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--font01);
  }
}
@media (hover: none) {
  :is(.button-link, .button-form)._pedge:hover {
    color: var(--font01);
    border-color: var(--common);
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pedge:hover::before, :is(.button-link, .button-form)._pedge:hover::after {
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pedge:hover > * {
    color: var(--font01);
  }
  :is(.button-link, .button-form)._pedge:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--font01);
  }
}
:is(.button-link, .button-form)._pfill {
  color: var(--font01);
  border-color: var(--common);
  background-color: var(--common);
}
:is(.button-link, .button-form)._pfill::before, :is(.button-link, .button-form)._pfill::after {
  background-color: var(--common);
}
:is(.button-link, .button-form)._pfill > * {
  color: var(--font01);
}
:is(.button-link, .button-form)._pfill span {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 1px;
  background-color: var(--font01);
}
@media (hover: hover) {
  :is(.button-link, .button-form)._pfill:hover {
    color: var(--common);
    border-color: var(--common);
    background-color: transparent;
  }
  :is(.button-link, .button-form)._pfill:hover::before, :is(.button-link, .button-form)._pfill:hover::after {
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pfill:hover > * {
    color: var(--common);
  }
  :is(.button-link, .button-form)._pfill:hover span {
    display: none;
  }
}
@media (hover: none) {
  :is(.button-link, .button-form)._pfill:hover {
    color: var(--common);
    border-color: var(--common);
    background-color: transparent;
  }
  :is(.button-link, .button-form)._pfill:hover::before, :is(.button-link, .button-form)._pfill:hover::after {
    background-color: var(--common);
  }
  :is(.button-link, .button-form)._pfill:hover > * {
    color: var(--common);
  }
  :is(.button-link, .button-form)._pfill:hover span {
    display: none;
  }
}
:is(.button-link, .button-form)._nedge {
  color: var(--font01);
  border-color: var(--font01);
  background-color: transparent;
}
:is(.button-link, .button-form)._nedge::before, :is(.button-link, .button-form)._nedge::after {
  background-color: var(--font01);
}
:is(.button-link, .button-form)._nedge > * {
  color: var(--font01);
}
:is(.button-link, .button-form)._nedge span {
  display: none;
}
@media (hover: hover) {
  :is(.button-link, .button-form)._nedge:hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nedge:hover::before, :is(.button-link, .button-form)._nedge:hover::after {
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nedge:hover > * {
    color: var(--common);
  }
  :is(.button-link, .button-form)._nedge:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
@media (hover: none) {
  :is(.button-link, .button-form)._nedge:hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nedge:hover::before, :is(.button-link, .button-form)._nedge:hover::after {
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nedge:hover > * {
    color: var(--common);
  }
  :is(.button-link, .button-form)._nedge:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
:is(.button-link, .button-form)._nfill {
  color: var(--common);
  border-color: var(--font01);
  background-color: var(--font01);
}
:is(.button-link, .button-form)._nfill::before, :is(.button-link, .button-form)._nfill::after {
  background-color: var(--font01);
}
:is(.button-link, .button-form)._nfill > * {
  color: var(--common);
}
:is(.button-link, .button-form)._nfill span {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 1px;
  background-color: var(--common);
}
@media (hover: hover) {
  :is(.button-link, .button-form)._nfill:hover {
    color: var(--font01);
    border-color: var(--font01);
    background-color: transparent;
  }
  :is(.button-link, .button-form)._nfill:hover::before, :is(.button-link, .button-form)._nfill:hover::after {
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nfill:hover > * {
    color: var(--font01);
  }
  :is(.button-link, .button-form)._nfill:hover span {
    display: none;
  }
}
@media (hover: none) {
  :is(.button-link, .button-form)._nfill:hover {
    color: var(--font01);
    border-color: var(--font01);
    background-color: transparent;
  }
  :is(.button-link, .button-form)._nfill:hover::before, :is(.button-link, .button-form)._nfill:hover::after {
    background-color: var(--font01);
  }
  :is(.button-link, .button-form)._nfill:hover > * {
    color: var(--font01);
  }
  :is(.button-link, .button-form)._nfill:hover span {
    display: none;
  }
}

/*
  Accordion - button
================================*/
.button-acd {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  position: relative;
  width: 100%;
  height: 40px;
  padding: 11px 11px 11px 13px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  transition: 0.3s ease;
}
@media (min-width: 768px) {
  .button-acd {
    width: 86px;
  }
}
.button-acd > * {
  color: currentColor;
  font-feature-settings: "palt" 1;
  line-height: 1.15;
}
.button-acd > *::before, .button-acd > *::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-acd > *::before {
  margin-top: calc((1 - 1.15) * 0.5em);
}
.button-acd > *::after {
  margin-bottom: calc((1 - 1.15) * 0.5em);
}
.button-acd .text {
  position: relative;
  -webkit-padding-end: 13px;
          padding-inline-end: 13px;
  font-size: 18px;
}
.button-acd .text::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 9px;
  top: 50%;
  right: 0;
  -webkit-margin-before: -5px;
          margin-block-start: -5px;
  background-image: url(/img/common/arrow.svg);
  background-size: contain;
  transition: transform 0.5s;
}

@media (hover: hover) {
  summary:hover .button-acd, .tdata:hover .button-acd {
    color: var(--common);
    background-color: var(--font01);
  }
  summary:hover .button-acd .text::before, .tdata:hover .button-acd .text::before {
    background-image: url(/img/common/arrow-white.svg);
  }
}
@media (hover: none) {
  summary:hover .button-acd, .tdata:hover .button-acd {
    color: var(--common);
    background-color: var(--font01);
  }
  summary:hover .button-acd .text::before, .tdata:hover .button-acd .text::before {
    background-image: url(/img/common/arrow-white.svg);
  }
}

details[open] summary .button-acd .text::before,
.tdata._active .button-acd .text::before {
  transform: rotate(-90deg);
}

details :is(.button-preview, .button-delete),
.accordion-container :is(.button-preview, .button-delete) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  color: currentColor;
  font-feature-settings: "palt" 1;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid currentColor;
  transition: 0.3s ease;
}
details :is(.button-preview, .button-delete):hover,
.accordion-container :is(.button-preview, .button-delete):hover {
  color: var(--common);
}

details .button-preview span,
.accordion-container .button-preview span {
  position: relative;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}
details .button-preview span::before,
.accordion-container .button-preview span::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 15px;
  top: 50%;
  left: 0;
  -webkit-margin-before: -8px;
          margin-block-start: -8px;
  background-image: url(/img/common/icon-preview.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
@media (hover: hover) {
  details .button-preview:hover,
  .accordion-container .button-preview:hover {
    background-color: var(--font01);
  }
}
@media (hover: none) {
  details .button-preview:hover,
  .accordion-container .button-preview:hover {
    background-color: var(--font01);
  }
}
details .button-preview:hover span::before,
.accordion-container .button-preview:hover span::before {
  background-image: url(/img/common/icon-preview-white.svg);
}

details .button-delete,
.accordion-container .button-delete {
  color: var(--form01);
}
@media (hover: hover) {
  details .button-delete:hover,
  .accordion-container .button-delete:hover {
    background-color: var(--form01);
  }
}
@media (hover: none) {
  details .button-delete:hover,
  .accordion-container .button-delete:hover {
    background-color: var(--form01);
  }
}

/*
  button - sect
================================*/
.button-sect {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding-inline: 6px 10px;
  color: currentColor;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid currentColor;
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s ease;
}
.button-sect::before, .button-sect::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-sect::before {
  margin-top: calc((1 - 1.2) * 0.5em);
}
.button-sect::after {
  margin-bottom: calc((1 - 1.2) * 0.5em);
}
@media (min-width: 768px) {
  .button-sect {
    gap: 6px;
    height: 50px;
    font-size: 20px;
    line-height: 20px;
  }
}
.button-sect::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url(/img/common/icon.svg) no-repeat 0 0/contain;
}
@media (min-width: 768px) {
  .button-sect::before {
    width: 44px;
    height: 44px;
  }
}
.button-sect:hover {
  color: var(--common);
  background-color: var(--font01);
  border-color: var(--font01);
}
.button-sect:hover::before {
  background-image: url(/img/common/icon-white.svg);
}
.button-sect._cf {
  gap: 6px;
  height: auto;
  padding-block: 2px;
  padding-inline: 12px 16px;
  color: var(--font01);
  font-size: 20px;
  background-color: var(--common);
}
@media (min-width: 768px) {
  .button-sect._cf {
    height: 50px;
  }
}
.button-sect._cf::before {
  width: 44px;
  height: 44px;
}
.button-sect._cf:hover {
  color: var(--common);
  background-color: var(--font01);
  border-color: var(--common);
}

/*
  button - float
================================*/
.button-float {
  position: relative;
  z-index: 1;
  cursor: pointer;
  color: var(--font01);
  text-align: center;
  background-color: var(--f-button01);
  background-clip: padding-box;
  border-style: solid;
  border-color: var(--f-button03);
  border-radius: 50%;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}
.button-float::after {
  position: absolute;
  content: "";
  z-index: -1;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  -webkit-filter: brightness(1);
          filter: brightness(1);
  transition: border-color 1s, -webkit-filter 1s;
  transition: filter 1s, border-color 1s;
  transition: filter 1s, border-color 1s, -webkit-filter 1s;
}
.button-float:hover {
  -webkit-filter: saturate(2);
          filter: saturate(2);
}
.button-float:hover::after {
  border: 1px solid rgb(255, 255, 255);
  transition: border-color 0.2s;
  -webkit-animation: bright-flash 0.2s linear forwards;
          animation: bright-flash 0.2s linear forwards;
}
.button-float a {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .button-float a {
    gap: 10px;
  }
}
.button-float a .text {
  font-weight: 800;
  line-height: 1.25;
}
/*.button-float a .text::before, .button-float a .text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-float a .text::before {
  margin-top: calc((1 - 1.25) * 0.5em);
}
.button-float a .text::after {
  margin-bottom: calc((1 - 1.25) * 0.5em);
}*/
.button-float a .time {
  line-height: 1.2;
}
/*.button-float a .time::before, .button-float a .time::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.button-float a .time::before {
  margin-top: calc((1 - 1.2) * 0.5em);
}
.button-float a .time::after {
  margin-bottom: calc((1 - 1.2) * 0.5em);
}
@media (min-width: 768px) {
  .button-float a .time {
    font-size: 14px;
    line-height: 1.28;
  }
  .button-float a .time::before, .button-float a .time::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
  }
  .button-float a .time::before {
    margin-top: calc((1 - 1.28) * 0.5em);
  }
  .button-float a .time::after {
    margin-bottom: calc((1 - 1.28) * 0.5em);
  }
}*/

.button-float._float-gomaki {
  width: 140px;
  height: 140px;

  border-width: 10px;

  @media (min-width: 768px) {
    width: 232px;
    height: 232px;
    border-width: 16px;
  }
  & a {
    gap: 8px;
    
    width: 120px;
    height: 120px;
    -webkit-padding-before: 12px;
            padding-block-start: 12px;
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
    
    @media (min-width: 768px) {
      width: 200px;
      height: 200px;
      gap: 10px;
      
      -webkit-padding-before: 28px;
              padding-block-start: 28px;
    }
    
    & .text {
      font-size: 14px;
      letter-spacing: 0.06em;
      
      @media (min-width: 768px) {
        font-size: 22px;
        line-height: 1.4;

        &::before,
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
        }
        &::before {
          margin-top: calc((1 - 1.4) * 0.5em);
        }
        &::after {
          margin-bottom: calc((1 - 1.4) * 0.5em);
        }
      }
      
      & span {
        font-size: 12px;
        
        @media (min-width: 768px) {
          font-size: 16px;
        }
      }
    }
    
    & .link {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      
      width: 100%;
      height: 27px;
      
      color: var(--common);
      
      background-color: var(--f-button02);
      
      @media (min-width: 768px) {
        gap: 12px;
        height: 48px;
      }
      
      &::after {
        content: "";
        width: 6px;
        height: 10px;
        background: url(/img/common/arrow-white.svg) no-repeat 0 100% / contain;
      }
      
      & .link-text {
        -webkit-margin-before: -2px;
                margin-block-start: -2px;	/*見てくれ調整*/
        font-size: 15px;
        font-weight: 800;
        line-height: 15px;
        
        @media (min-width: 768px) {
          font-size: 22px;
          line-height: 22px;
        }
      }
    }
    
    & .time {
      font-size: 12px;
      
      @media (min-width: 768px) {
        font-size: 14px;
      }
    }
  }
}

.button-float._float-gomaki::after {
  width: 140px;
  height: 140px;
  top: -10px;
  left: -10px;
}

@media (min-width: 768px) {
  .button-float._float-gomaki::after {
    width: 232px;
    height: 232px;
    top: -16px;
    left: -16px;
  }
}

.button-float._float-kitofuda {
  width: 98px;
  height: 98px;
  
  border-width: 5px;
  
  @media (min-width: 768px) {
    width: 144px;
    height: 144px;
    -webkit-margin-after: 8px;
            margin-block-end: 8px;
    
    border-width: 8px;

    -webkit-margin-after: 12px;

            margin-block-end: 12px;
  }
  
  & a {
    gap: 4px;
    
    width: 88px;
    height: 88px;
    -webkit-padding-before: 16px;
            padding-block-start: 16px;
    
    @media (min-width: 768px) {
      gap: 6px;
      
      width: 128px;
      height: 128px;
      -webkit-padding-before: 24px;
              padding-block-start: 24px;
    }
    
    & .text {
      font-size: 13px;
      font-feature-settings: "palt" 1;
      
      @media (min-width: 768px) {
        font-size: 18px;
        letter-spacing: .06em;
      }
    }
    
    & hr {
      width: 80px;
      height: 1px;
      margin-inline: auto;
      
      background-color: var(--f-button02);
      
      @media (min-width: 768px) {
        width: 120px;
      }
    }
    
    & .time {
      font-size: 11px;
      
      @media (min-width: 768px) {
        -webkit-margin-before: 2px;
                margin-block-start: 2px;
        
        font-size: 14px;
      }
    }
  }
}

.button-float._float-kitofuda::after {
  width: 98px;
  height: 98px;
  top: -5px;
  left: -5px;
}
@media (min-width: 768px) {
  .button-float._float-kitofuda::after {
    width: 144px;
    height: 144px;
    top: -8px;
    left: -8px;
  }
}
.button-float._float-live {
  width: 140px;
  height: 140px;
  border-width: 10px;
}
@media (min-width: 768px) {
  .button-float._float-live {
    width: 200px;
    height: 200px;
    border-width: 12px;
  }
}
.button-float._float-live::after {
  width: 140px;
  height: 140px;
  inset-block-start: -10px;
  inset-inline-start: -10px;
}
@media (min-width: 768px) {
  .button-float._float-live::after {
    width: 200px;
    height: 200px;
    inset-block-start: -12px;
    inset-inline-start: -12px;
  }
}
.button-float._float-live a {
  gap: 6px;
  width: 120px;
  height: 120px;
  -webkit-padding-before: 12px;
          padding-block-start: 12px;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
}
@media (min-width: 768px) {
  .button-float._float-live a {
    width: 176px;
    height: 176px;
    gap: 8px;
    -webkit-padding-before: 16px;
            padding-block-start: 16px;
  }
}
.button-float._float-live a .text {
  font-size: 14px;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .button-float._float-live a .text {
    font-size: 22px;
    line-height: 1.28;
  }
  .button-float._float-live a .text::before, .button-float._float-live a .text::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
  }
  .button-float._float-live a .text::before {
    margin-top: calc((1 - 1.28) * 0.5em);
  }
  .button-float._float-live a .text::after {
    margin-bottom: calc((1 - 1.28) * 0.5em);
  }
}
.button-float._float-live a .link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 27px;
  -webkit-margin-before: -2px;
          margin-block-start: -2px;
  color: var(--common);
  background-color: var(--f-button02);
}
@media (min-width: 768px) {
  .button-float._float-live a .link {
    gap: 12px;
    height: 48px;
  }
}
.button-float._float-live a .link::after {
  content: "";
  width: 6px;
  height: 8px;
  background: url(/img/common/arrow-white.svg) no-repeat 0 100%/contain;
}
@media (min-width: 768px) {
  .button-float._float-live a .link::after {
    width: 8px;
    height: 11px;
  }
}
.button-float._float-live a .link-text {
  font-size: 15px;
  font-weight: 800;
  line-height: 15px;
}
@media (min-width: 768px) {
  .button-float._float-live a .link-text {
    font-size: 22px;
    line-height: 22px;
  }
}
.button-float._float-live a .time {
  font-size: 12px;
}
@media (min-width: 768px) {
  .button-float._float-live a .time {
    font-size: 14px;
  }
}

/*===============================

  home

================================*/
/*
  layout
================================*/
.wrapper._home {
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "header" "main" "sponser" "footer";
}
.wrapper._home .main {
  /*
  -webkit-margin-before: -64px;
          margin-block-start: -64px;
*/
    /*margin-top: 64px;*/
}
@media (min-width: 768px) {
  .wrapper._home .main {
    /*
    -webkit-margin-before: -86px;
            margin-block-start: -86px;
            */
    /*margin-top: 80px;*/
  }
}
.wrapper._home .container {
  padding: 0;
}

/*
  visual
================================*/
.R8.wrapper {
  display: flex;
  flex-direction: column;
}
.visual {
  display: block;
  position: relative;
  z-index: -1;

  @media (max-width: 768px) {
    height: calc(100vw * 1020 / 1920);
  }
}
.visual picture {
  position: relative;
  z-index: -1;
}
.visual picture img {
}
.visual #visual-movie {
  position: absolute;
  top: 0px;
}
#visual-logo {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.visual-title {
  width: 100%;
  aspect-ratio: 1100/238/*1110/338*/;
}
.visual-title img {
  width: 100%;
}

/* js - control */
[id=visual-movie] {
  grid-column: main;
  grid-row: 1/1;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16/9;
  /*
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
          */
}
@media (min-width: 768px) {
  [id=visual-movie] {
    /*
    -webkit-margin-before: 86px;
            margin-block-start: 86px;
            */
  }
}
[id=visual-movie] > * {
  width: 100%;
  height: auto;
}
/*
[id=visual-logo] {
  grid-column: content;
  grid-row: 1/1;
  width: 74.6%;
  -webkit-margin-after: clamp(2.688rem, 1.785rem + 3.7vw, 3.563rem);
          margin-block-end: clamp(2.688rem, 1.785rem + 3.7vw, 3.563rem);
  -webkit-margin-start: clamp(-0.5rem, -1.016rem + 2.12vw, 0rem);
          margin-inline-start: clamp(-0.5rem, -1.016rem + 2.12vw, 0rem);
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  [id=visual-logo] {
    width: 72%;
    -webkit-margin-after: clamp(3.563rem, -9.016rem + 26.2vw, 9rem);
            margin-block-end: clamp(3.563rem, -9.016rem + 26.2vw, 9rem);
  }
}
@media (min-width: 1164px) {
  [id=visual-logo] {
    -webkit-margin-after: 144px;
            margin-block-end: 144px;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
}
@media (min-width: 1440px) {
  [id=visual-logo] {
    width: 58.6%;
  }
}

[id=visual-logo] .visual-days {
  -webkit-margin-before: -4px;
          margin-block-start: -4px;

  color: black;
  font-size: clamp(0.625rem, calc(-0.007rem + 3.161vw), 7.5rem);
  font-weight: 800;

  text-shadow: 1px 1px 1px var(--common), -1px -1px 1px var(--common), -1px 1px 1px var(--common), 1px -1px 1px var(--common), 1px 0 1px var(--common), -1px 0 1px var(--common), 0 1px 1px var(--common), 0 -1px 1px var(--common);
  
  @media (min-width: 768px) {
    text-shadow: 2px 2px 2px var(--common), -2px -2px 2px var(--common), -2px 2px 2px var(--common), 2px -2px 2px var(--common), 2px 0 2px var(--common), -2px 0 2px var(--common), 0 2px 2px var(--common), 0 -2px 2px var(--common);
  }

  & span:last-of-type {
    -webkit-margin-start: 12px;
            margin-inline-start: 12px;
    font-size: clamp(0.938rem, calc(0.104rem + 4.167vw), 10rem);
  }
}
*/
/*
  shortcuts
================================*/
.shortcuts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, var(--large));
  /*
  margin-block-start: clamp(6rem, 9.621rem - 14.85vw, 2.5rem);
  */
  -webkit-margin-before: clamp(3rem, 9.621rem - 14.85vw, 2.5rem);
          margin-block-start: clamp(3rem, 9.621rem - 14.85vw, 2.5rem);
}
@media (min-width: 768px) {
  .shortcuts {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
}
.shortcuts-link, .shortcuts-link:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 92px;
  -webkit-padding-before: 18px;
          padding-block-start: 18px;
  color: var(--common);
  font-size: 24px;
  background-color: rgba(var(--font-rgb), 0.8);
  border: 1px solid;
}
.shortcuts-link::after, .shortcuts-link:visited::after {
  position: absolute;
  content: "";
  inset-block-end: 14px;
  width: 24px;
  height: 24px;
  background-image: url(/img/common/icon-shortcuts-white.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (hover: hover) {
  .shortcuts-link:hover {
    color: var(--font01);
    background-color: var(--common);
  }
  .shortcuts-link:hover::after {
    background-image: url(/img/common/icon-shortcuts.svg);
  }
}
@media (hover: none) {
  .shortcuts-link:hover {
    color: var(--font01);
    background-color: var(--common);
  }
  .shortcuts-link:hover::after {
    background-image: url(/img/common/icon-shortcuts.svg);
  }
}

/*
  precede
================================*/
._precede {
  position: relative;
  z-index: 0;
  color: var(--common);
  background-color: var(--footer);
  background-image: url(/img/home/bg-precede.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media (min-width: 768px) {
  ._precede {
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
}
._precede::before {
  position: absolute;
  content: "";
  z-index: -1;
  width: 1025px;
  height: 264px;
  inset-block-start: 332px;
  inset-inline-end: -17.6%;
  background-image: url(/img/pattern/kasumi12.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  ._precede::before {
    inset-block-start: 112px;
    inset-inline-end: 37.6%;
  }
}
@media (min-width: 1164px) {
  ._precede::before {
    inset-inline-end: 63%;
  }
}
._precede .bg {
  position: relative;
  grid-column: 1/4;
  grid-row: 4/4;
  height: 348px;
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
  background-image: url(/img/home/precede01.png);
  background-position: 50% 100%;
  background-size: 524px auto;
}
@media (min-width: 768px) {
  ._precede .bg {
    position: absolute;
    z-index: -1;
    inset-inline-start: calc(50% - 60px);
    inset-block-end: 0;
    width: 524px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
@media (min-width: 1164px) {
  ._precede .bg {
    inset-inline-start: calc(50% - 80px);
    width: 870px;
    height: 580px;
    background-size: 870px auto;
  }
}
._precede .title {
  position: relative;
  -webkit-margin-before: 60px;
          margin-block-start: 60px;
  font-size: clamp(2.75rem, 1.976rem + 3.17vw, 3.5rem);
  font-feature-settings: revert;
  line-height: 1.6;
}
@media (min-width: 768px) {
  ._precede .title {
    -webkit-margin-before: 72px;
            margin-block-start: 72px;
  }
}
@media (min-width: 1164px) {
  ._precede .title::before {
    position: absolute;
    content: "";
    inset-block-start: 64px;
    inset-inline-start: -170px;
    width: 134px;
    height: 1px;
    background-color: var(--common);
  }
}
._precede .title span {
  display: block;
  text-shadow: 2px 2px 2px var(--home01), -2px -2px 2px var(--home01), -2px 2px 2px var(--home01), 2px -2px 2px var(--home01), 2px 0 2px var(--home01), -2px 0 2px var(--home01), 0 2px 2px var(--home01), 0 -2px 2px var(--home01);
}
._precede .title span:nth-of-type(2) {
  -webkit-margin-start: 75px;
          margin-inline-start: 75px;
}
@media (min-width: 768px) {
  ._precede .title span:nth-of-type(2) {
    -webkit-margin-start: 48px;
            margin-inline-start: 48px;
  }
}
._precede .text {
  -webkit-margin-before: 60px;
          margin-block-start: 60px;
  font-size: clamp(1.125rem, 0.996rem + 0.53vw, 1.25rem);
  font-weight: 800;
  text-shadow: 0 2px 2px rgba(var(--shadow), 0.65);
}
@media (min-width: 768px) {
  ._precede .text {
    -webkit-margin-before: 70px;
            margin-block-start: 70px;
  }
}
@media (min-width: 768px) {
  ._precede .text span:last-of-type {
    display: block;
  }
}
._precede .button-container {
  -webkit-margin-before: 60px;
          margin-block-start: 60px;
}

.precede {
  grid-area: 1/2/3/3;
}

/*
  news
================================*/
._news {
  background-color: rgba(var(--bg), 0.3);
}

.news {
  grid-area: 1/2/3/3;
  display: flex;
  flex-direction: column;
  gap: 60px;
  z-index: 1;
  padding-block: 80px;
}
@media (min-width: 768px) {
  .news {
    gap: 50px;
  }
}
@media (min-width: 1164px) {
  .news {
    flex-direction: row;
    align-items: flex-start;
    gap: 120px;
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}
@media (min-width: 1164px) {
  .news .title-container {
    flex-shrink: 0;
  }
}
.news-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1164px) {
  .news-list {
    flex-grow: 1;
  }
}
.news-item {
  border-bottom: 1px solid var(--font01);
}
@media (min-width: 1164px) {
  .news-item:first-of-type {
    -webkit-margin-before: -24px;
            margin-block-start: -24px;
  }
}
.news-item a {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto;
  -moz-column-gap: 24px;
       column-gap: 24px;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  grid-template-areas: "image text";
  position: relative;
  padding-block: 24px 16px;
  -webkit-padding-end: 16px;
          padding-inline-end: 16px;
}
.news-item a::after {
  content: "";
  width: 8px;
  height: 12px;
  background: url(/img/common/arrow.svg) no-repeat 100% 0/contain;
  background-size: 8px auto;
}
@media (hover: hover) {
  .news-item a:hover {
    background-color: var(--hover02);
  }
}
@media (hover: none) {
  .news-item a:hover {
    background-color: var(--hover02);
  }
}
.news-image {
  grid-area: image;
  width: 120px;
  height: 85px;
  aspect-ratio: 120/85;
  -o-object-fit: cover;
     object-fit: cover;
}
.news-detail {
  grid-area: text;
  overflow: hidden;
}
.news-detail .date {
  color: rgba(var(--font-rgb), 0.5);
  font-size: 14px;
}
.news-detail .title {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
  font-size: 18px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-detail .title._pdf, .news-detail .title._site {
  position: relative;
  -webkit-padding-start: 27px;
          padding-inline-start: 27px;
  width: calc(100% + 10px);
}
.news-detail .title._pdf::before, .news-detail .title._site::before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 0;
  -webkit-margin-before: -11px;
          margin-block-start: -11px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
.news-detail .title._pdf::before {
  background-image: url(/img/common/icon-pdf.png);
}
.news-detail .title._site::before {
  background-image: url(/img/common/icon-site.svg);
}

/*
  held - event overview
================================*/
.held-wrapper {
  position: relative;
  z-index: 0;
  padding-block: 120px 120px;
  background-image: url(/img/home/bg-event-lead.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
}
@media (min-width: 1440px) {
  .held-wrapper {
    background-size: 180% auto;
  }
}
.held-wrapper::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(172.2deg, rgba(var(--bg10-rgb), 0.6) 0%, rgba(var(--bg10-rgb), 1) 41.8%);
}

._held .title span {
  display: block;
}
@media (min-width: 1164px) {
  ._held .title span {
    display: inline-block;
  }
}
@media (min-width: 1164px) {
  ._held .title span:not(:first-of-type) {
    -webkit-margin-start: 20px;
            margin-inline-start: 20px;
  }
}

.held {
  position: relative;
  width: min(100%, var(--large));
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
  margin-inline: auto;
}
@media (min-width: 1164px) {
  .held {
    -webkit-margin-before: 90px;
            margin-block-start: 90px;
  }
}
.held-lead {
  position: relative;
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
  font-size: clamp(1.25rem, 0.992rem + 1.06vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .held-lead {
    width: 500px;
  }
}
@media (min-width: 1164px) {
  .held-lead {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.held-lead span {
  display: inline;
}
@media (min-width: 1164px) {
  .held-lead span {
    display: block;
  }
}
@media (min-width: 768px) {
  .held-lead span:nth-of-type(5) {
    display: block;
  }
}
@media (min-width: 1164px) {
  .held-lead span:nth-of-type(5) {
    display: inline;
  }
}
.held-lead::after {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 298px;
  height: 1px;
  background-color: currentColor;
}
.held-date > *, .held-place > * {
  font-weight: 800;
}
.held-date {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
@media (min-width: 768px) {
  .held-date {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
}
@media (min-width: 1164px) {
  .held-date {
    -webkit-margin-before: 50px;
            margin-block-start: 50px;
  }
}
.held-date .date-year {
  font-size: clamp(1.75rem, 0.976rem + 3.17vw, 2.5rem);
}
.held-date .date-days {
  font-size: clamp(2rem, 0.452rem + 6.35vw, 3.5rem);
}
.held-place {
  display: flex;
  align-items: center;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
@media (min-width: 1164px) {
  .held-place {
    align-items: baseline;
  }
}
.held-place .place-name {
  font-size: clamp(2.125rem, 1.738rem + 1.59vw, 2.5rem);
}
.held-place .place-box {
  width: 36px;
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
  font-size: clamp(1rem, 0.871rem + 0.53vw, 1.125rem);
  line-height: 1.24;
}
@media (min-width: 768px) {
  .held-place .place-box {
    width: 42px;
  }
}
@media (min-width: 1164px) {
  .held-place .place-box {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 24px;
  }
}
.held-point {
  font-size: clamp(1.25rem, 0.99rem + 1.07vw, 1.75rem);
  font-weight: 800;
}
.held-image {
  position: relative;
  z-index: -1;
  -webkit-margin-before: -48px;
          margin-block-start: -48px;
}
@media (min-width: 768px) {
  .held-image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 403px;
    height: auto;
    -webkit-margin-before: 306px;
            margin-block-start: 306px;
    aspect-ratio: 2/3;
  }
}
@media (min-width: 1164px) {
  .held-image {
    inset-block-start: -50px;
    width: 594px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
.held-list {
  -webkit-margin-before: -40px;
          margin-block-start: -40px;
  padding: 16px 16px 16px 32px;
  background-color: rgba(var(--bg), 0.7);
}
@media (min-width: 768px) {
  .held-list {
    width: 350px;
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
  }
}
@media (min-width: 1164px) {
  .held-list {
    width: 500px;
    background-color: revert;
  }
}
.held-item {
  list-style: disc;
  font-size: clamp(1rem, 0.935rem + 0.27vw, 1.125rem);
}
.held-item:not(:first-of-type) {
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
.held-item span {
  font-weight: 800;
}

/*
  gallery
================================*/
.content-through .gallery {
  z-index: 0;
  grid-column: 2/3;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .content-through .gallery {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .content-through .gallery .gallery-item {
    width: 33.3333333333%;
  }
}
.content-through .gallery .gallery-item img {
  aspect-ratio: 3/2;
}
.content-through._date {
  grid-template-columns: minmax(32px, 1fr) minmax(auto, var(--large)) minmax(32px, 1fr);
  -webkit-margin-before: 104px;
          margin-block-start: 104px;
}
@media (min-width: 768px) {
  .content-through._date {
    -webkit-margin-before: 260px;
            margin-block-start: 260px;
  }
}
.content-through._date .bg {
  position: relative;
  grid-column: 2/4;
  grid-row: 1/3;
  background-image: url(/img/home/bg-event-lead.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.content-through._date .bg::before {
  position: absolute;
  content: "";
  z-index: 1;
  width: 374px;
  height: 157px;
  inset-block-start: -90px;
  inset-inline-start: -160px;
  background-image: url(/img/pattern/kasumi05.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  .content-through._date .bg::before {
    inset-block-start: -150px;
    inset-inline-start: -300px;
    width: 595px;
    height: 249px;
  }
}
@media (min-width: 1164px) {
  .content-through._date .bg::before {
    inset-block-start: -220px;
    inset-inline-end: 85%;
  }
}
.content-through._recept {
  position: relative;
  grid-template-columns: minmax(32px, 1fr) minmax(auto, var(--large)) minmax(32px, 1fr);
  -webkit-margin-before: 120px;
          margin-block-start: 120px;
}
@media (min-width: 768px) {
  .content-through._recept {
    -webkit-margin-before: 160px;
            margin-block-start: 160px;
  }
}
@media (min-width: 1164px) {
  .content-through._recept {
    -webkit-margin-before: 190px;
            margin-block-start: 190px;
  }
}
.content-through._recept .bg {
  position: relative;
  grid-column: 1/3;
  grid-row: 1/3;
  background-image: url(/img/home/bg-fire.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}
.content-through._recept .bg::before, .content-through._recept .bg::after {
  position: absolute;
  content: "";
  z-index: 1;
  background-size: contain;
}
.content-through._recept .bg::before {
  width: 164px;
  height: 45px;
  inset-block-start: -90px;
  inset-inline-end: -70px;
  background-image: url(/img/pattern/kasumi01.svg);
}
@media (min-width: 768px) {
  .content-through._recept .bg::before {
    width: 269px;
    height: 73px;
    inset-block-start: -120px;
    inset-inline-end: -130px;
  }
}
@media (min-width: 1164px) {
  .content-through._recept .bg::before {
    inset-block-start: -24px;
    inset-inline-end: -232px;
  }
}
.content-through._recept .bg::after {
  width: 306px;
  height: 69px;
  inset-block-end: -140px;
  inset-inline-end: -140px;
  background-image: url(/img/pattern/kasumi03.svg);
}
@media (min-width: 768px) {
  .content-through._recept .bg::after {
    width: 494px;
    height: 111px;
    inset-block-end: -180px;
    inset-inline-end: -280px;
  }
}
@media (min-width: 1164px) {
  .content-through._recept .bg::after {
    inset-block-end: -220px;
    inset-inline-end: -380px;
  }
}
.content-through._recept .gallery-item {
  margin-inline: auto 0;
}

/*
  datetime
================================*/
._datetime {
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
}

.datetime-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  align-items: start;
  grid-template-areas: "title01" "person01" "person02" "title02" "person03" "person04";
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
@media (min-width: 768px) {
  .datetime-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "title01 title01" "person01 person02" "title02 title02" "person03 person04";
    -moz-column-gap: 48px;
         column-gap: 48px;
  }
}
@media (min-width: 1164px) {
  .datetime-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    grid-template-areas: "title01 title01 title02 title02" "person01 person02 person03 person04";
  }
}
.datetime-container::before, .datetime-container::after {
  position: absolute;
  z-index: -1;
  width: 564px;
  height: 171px;
  background-image: url(/img/pattern/kasumi02.svg);
  background-size: contain;
}
.datetime-container::before {
  content: "";
  inset-block-start: 200px;
  inset-inline-start: 250px;
}
@media (min-width: 768px) {
  .datetime-container::before {
    content: none;
  }
}
.datetime-container::after {
  content: none;
}
@media (min-width: 768px) {
  .datetime-container::after {
    content: "";
    inset-block-end: -10px;
    inset-inline-end: -280px;
  }
}
@media (min-width: 1164px) {
  .datetime-container::after {
    inset-block-end: -150px;
    inset-inline-end: -180px;
  }
}
.datetime-container ._title01 {
  grid-area: title01;
}
@media (min-width: 1164px) {
  .datetime-container ._title01 {
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }
}
.datetime-container ._title02 {
  grid-area: title02;
  -webkit-margin-before: 32px;
          margin-block-start: 32px;
}
@media (min-width: 1164px) {
  .datetime-container ._title02 {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-start: 4px;
            margin-inline-start: 4px;
  }
}
.datetime-container :is(._person01, ._person03) {
  justify-self: center;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
@media (min-width: 768px) {
  .datetime-container :is(._person01, ._person03) {
    justify-self: end;
  }
}
@media (min-width: 1164px) {
  .datetime-container :is(._person01, ._person03) {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
.datetime-container :is(._person02, ._person04) {
  justify-self: center;
  -webkit-margin-before: 48px;
          margin-block-start: 48px;
}
@media (min-width: 768px) {
  .datetime-container :is(._person02, ._person04) {
    justify-self: start;
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
  }
}
@media (min-width: 1164px) {
  .datetime-container :is(._person02, ._person04) {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
.datetime-container ._person01 {
  grid-area: person01;
}
.datetime-container ._person02 {
  grid-area: person02;
}
@media (min-width: 1164px) {
  .datetime-container ._person02 {
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }
}
.datetime-container ._person03 {
  grid-area: person03;
}
@media (min-width: 1164px) {
  .datetime-container ._person03 {
    -webkit-margin-start: 4px;
            margin-inline-start: 4px;
  }
}
.datetime-container ._person04 {
  grid-area: person04;
}
.datetime-person {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 255px;
}
.datetime-person .text {
  font-size: 14px;
  line-height: 1.5;
}

.title-quaternary._bgcolor {
  padding: 10px 8px;
  background-color: var(--bg11);
}

.title-person {
  padding-block: 8px;
  -webkit-padding-start: 16px;
          padding-inline-start: 16px;
  -webkit-border-start: 3px solid currentColor;
          border-inline-start: 3px solid currentColor;
}
.title-person .title {
  font-size: 20px;
  font-feature-settings: "palt" 1;
  line-height: 1.5;
}
.title-person .title span {
  -webkit-margin-start: 20px;
          margin-inline-start: 20px;
}

/*
  reception
================================*/
._reception {
  -webkit-margin-before: 112px;
          margin-block-start: 112px;
}
@media (min-width: 768px) {
  ._reception {
    -webkit-margin-before: 140px;
            margin-block-start: 140px;
  }
}

.reception-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "title01" "time" "title02" "detail" "map";
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}
@media (min-width: 1164px) {
  .reception-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    -moz-column-gap: 40px;
         column-gap: 40px;
    grid-template-areas: "title01 title01" "time time" "title02 title02" "detail map";
  }
}
.reception-container ._title01 {
  grid-area: title01;
}
.reception-container ._title02 {
  grid-area: title02;
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.reception-time {
  grid-area: time;
  display: flex;
  align-items: baseline;
  gap: 6px;
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.5;
}
.reception-time span {
  font-size: 18px;
  line-height: 1.75;
}
.reception-detail {
  grid-area: detail;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.reception-detail .text {
  font-size: 18px;
  line-height: 1.75;
}
.reception-detail .text:nth-of-type(2) {
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}
.reception-detail .text:last-of-type {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.reception-detail a {
  font-weight: 800;
  -webkit-text-decoration: revert;
          text-decoration: revert;
}
.reception-detail a:hover {
  text-decoration: none;
}
.reception-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
.reception-item {
  width: calc(50% - 4px);
  padding: 8px 6px;
  font-weight: 800;
  background-color: rgba(var(--bg), 0.8);
  border: 1px solid;
}
.reception-map {
  grid-area: map;
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.reception-map img {
  width: 100%;
  height: auto;
  aspect-ratio: 2209/1042;
}

/*
  visit
================================*/
.visit-wrapper {
  position: relative;
  padding-block: 128px 480px;
  background-image: url(/img/home/bg_saicho.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 1354px auto;
}
@media (min-width: 768px) {
  .visit-wrapper {
    background-size: 100% auto;
  }
}
@media (min-width: 1440px) {
  .visit-wrapper {
    -webkit-padding-after: clamp(30rem, 10.714rem + 21.43vw, 75rem);
            padding-block-end: clamp(30rem, 10.714rem + 21.43vw, 75rem);
  }
}
@media (min-width: 1920px) {
  .visit-wrapper {
    background-size: 137% auto;
  }
}
.visit-wrapper::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(0deg, var(--bg05) 46.46%, rgba(var(--bg06-rgb), 0) 100%);
}
.visit-wrapper .title {
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .visit-wrapper .title {
    letter-spacing: 0.08em;
  }
}

.content-through:is(._right, ._left) {
  min-height: 300px;
  -webkit-margin-before: 120px;
          margin-block-start: 120px;
}
.content-through:is(._right, ._left) .bg {
  background-color: rgba(var(--bg), 0.66);
}
.content-through:is(._right, ._left) .visit-details {
  grid-area: 1/2/3/3;
  -webkit-padding-before: 90px;
          padding-block-start: 90px;
}
.content-through._right .bg {
  grid-column: 2/4;
  grid-row: 1/3;
}
.content-through._right .visit-details {
  -webkit-padding-start: 16px;
          padding-inline-start: 16px;
}
@media (min-width: 768px) {
  .content-through._right .visit-details {
    -webkit-padding-start: 32px;
            padding-inline-start: 32px;
  }
}
.content-through._left .bg {
  grid-column: 1/3;
  grid-row: 1/3;
}
.content-through._left .visit-details {
  -webkit-padding-end: 16px;
          padding-inline-end: 16px;
}
@media (min-width: 768px) {
  .content-through._left .visit-details {
    -webkit-padding-end: 32px;
            padding-inline-end: 32px;
  }
}
@media (min-width: 1164px) {
  .content-through._left .visit-details {
    -webkit-padding-end: 64px;
            padding-inline-end: 64px;
  }
}

.visit-details {
  position: relative;
}
.visit-details .content-text {
  font-size: 20px;
}
.visit-details em {
  font-style: normal;
  font-weight: 800;
}
.visit-details .picture {
  display: flex;
  flex-direction: column;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .visit-details .picture {
    flex-direction: row;
  }
}
@media (min-width: 1164px) {
  .visit-details .picture {
    grid-area: picture;
    z-index: 1;
  }
}
@media (min-width: 768px) {
  .visit-details .picture .picture-item {
    width: 50%;
  }
}
.visit-details .picture .picture-item img {
  aspect-ratio: 3/2;
}
.visit-details .photo {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media (min-width: 1164px) {
  .visit-details .photo {
    grid-area: photo;
    align-self: center;
  }
}
.visit-details._special, .visit-details ._gomagi {
  position: relative;
}
.visit-details._special .tag, .visit-details ._gomagi .tag {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.visit-details._special .content-text, .visit-details ._gomagi .content-text {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}

/*
  visit - special
================================*/
.visit-details._special {
  position: relative;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
@media (min-width: 1164px) {
  .visit-details._special {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    -moz-column-gap: 32px;
         column-gap: 32px;
    grid-template-areas: "photo title" "photo tag" "photo text" "photo picture";
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
}
.visit-details._special::before {
  position: absolute;
  content: "";
  z-index: 1;
  width: 595px;
  height: 249px;
  inset-block-start: -150px;
  inset-inline-start: -236px;
  background-image: url(/img/pattern/kasumi05-2.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  .visit-details._special::before {
    inset-block-start: -180px;
    inset-inline-start: -250px;
  }
}
@media (min-width: 1164px) {
  .visit-details._special::before {
    inset-block-start: -140px;
    inset-inline-start: -300px;
  }
}
@media (min-width: 1164px) {
  .visit-details._special .title-tertiary {
    grid-area: title;
  }
}
@media (min-width: 1164px) {
  .visit-details._special .tag {
    grid-area: tag;
  }
}
@media (min-width: 1164px) {
  .visit-details._special .content-text {
    grid-area: text;
  }
}

/*
  visit - gomagi
================================*/
.visit-details ._gomagi {
  position: relative;
  z-index: 0;
  -webkit-margin-after: 120px;
          margin-block-end: 120px;
}
@media (min-width: 1164px) {
  .visit-details ._gomagi {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 296px;
    grid-template-rows: auto auto auto auto 1fr;
    -moz-column-gap: 32px;
         column-gap: 32px;
    grid-template-areas: "title photo" "tag photo" "text photo" "picture photo" "present present";
  }
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .title-tertiary {
    grid-area: title;
  }
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .tag {
    grid-area: tag;
  }
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .content-text {
    grid-area: text;
  }
}
.visit-details ._gomagi .photo {
  width: 100%;
  -webkit-margin-before: -121px;
          margin-block-start: -121px;
}
@media (min-width: 768px) {
  .visit-details ._gomagi .photo {
    position: relative;
    z-index: 0;
  }
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .photo {
    grid-area: photo;
    position: absolute;
    inset-inline-end: 0;
  }
}
@media (min-width: 768px) {
  .visit-details ._gomagi .photo::before {
    position: absolute;
    content: "";
    z-index: -1;
    width: 624px;
    height: 261px;
    inset-block-start: 300px;
    inset-inline-start: 50%;
    background-image: url(/img/pattern/kasumi05-3.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
  }
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .photo::before {
    width: 1151px;
    height: 481px;
    inset-block-start: 0;
    inset-inline-start: -70%;
  }
}
.visit-details ._gomagi .photo img {
  width: 104px;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 52/349;
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .photo img {
    margin-inline: auto 78px;
  }
}
.visit-details ._gomagi .present {
  position: relative;
  grid-area: present;
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
  padding: 24px;
  background-color: rgba(var(--bg), 0.66);
  border: 1px solid var(--bd01);
}
@media (min-width: 1164px) {
  .visit-details ._gomagi .present {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
  }
}
.visit-details ._gomagi .present .present-text {
  font-size: 18px;
  line-height: 1.75;
}
.visit-details ._gomagi .present .present-text:last-of-type {
  -webkit-padding-start: 24px;
          padding-inline-start: 24px;
}
.visit-details ._gomagi .present .present-text:last-of-type::before {
  content: "※";
  -webkit-margin-start: calc(-24px - 1px);
          margin-inline-start: calc(-24px - 1px);
  -webkit-margin-end: 7px;
          margin-inline-end: 7px;
  font-weight: bold;
}

/*
  visit - kitofuda
================================*/
.visit-details ._kitofuda {
  -webkit-padding-after: 80px;
          padding-block-end: 80px;
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda {
    display: grid;
    -webkit-padding-after: 95px;
            padding-block-end: 95px;
  }
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda {
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
}
.visit-details ._kitofuda .lead {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda .lead {
    grid-area: 1/1/1/1;
  }
}
.visit-details ._kitofuda .lead .notes-list {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.visit-details ._kitofuda .lead .notes-list .notes-item {
  font-size: 14px;
}
.visit-details ._kitofuda .kitofuda-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .kitofuda-container {
    flex-wrap: nowrap;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda .kitofuda-container {
    grid-area: 1/1/1/1;
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
}
.visit-details ._kitofuda .notes {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-size: 14px;
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .notes {
    inset-block-start: 141px;
  }
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda .notes {
    inset-block-start: 210px;
    inset-inline-start: 36px;
  }
}
.visit-details ._kitofuda .card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  grid-template-areas: "image" "price";
  width: 33.3333333333%;
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .card {
    width: 20%;
  }
}
.visit-details ._kitofuda .card:nth-last-of-type(-n+2) {
  width: 50%;
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .card:nth-last-of-type(-n+2) {
    width: 20%;
  }
}
.visit-details ._kitofuda .card:is(._paper, ._small, ._middle, ._large, ._xlarge) .photo {
  grid-area: image;
  align-self: end;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
}
.visit-details ._kitofuda .card._paper .photo {
  height: 293px;
  -webkit-margin-after: 8px;
          margin-block-end: 8px;
  background-image: url(/img/form/kitofuda-p2.png);
  background-size: 148px auto;
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .card._paper .photo {
    -webkit-margin-after: 4px;
            margin-block-end: 4px;
  }
}
.visit-details ._kitofuda .card._small .photo {
  height: 264px;
  background-image: url(/img/form/kitofuda-s.png);
  background-size: 88px auto;
}
.visit-details ._kitofuda .card._middle .photo {
  height: 326px;
  background-image: url(/img/form/kitofuda-m.png);
  background-size: 110px auto;
}
.visit-details ._kitofuda .card._large .photo {
  height: 406px;
  background-image: url(/img/form/kitofuda-l.png);
  background-size: 136px auto;
}
.visit-details ._kitofuda .card._xlarge .photo {
  height: 488px;
  background-image: url(/img/form/kitofuda-xl.png);
  background-size: 148px auto;
}
.visit-details ._kitofuda .tag {
  grid-area: price;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 72px;
  padding: 12px 0;
  background-color: var(--bg11);
}
@media (min-width: 768px) {
  .visit-details ._kitofuda .tag {
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
    height: 84px;
  }
}
@media (min-width: 1164px) {
  .visit-details ._kitofuda .tag {
    height: 98px;
  }
}
.visit-details ._kitofuda .tag .tag-name {
  font-size: clamp(1rem, 0.742rem + 1.06vw, 1.25rem);
  font-weight: 800;
}
.visit-details ._kitofuda .tag .tag-container {
  display: flex;
  align-items: baseline;
}
.visit-details ._kitofuda .tag .tag-container .price {
  font-size: clamp(1.25rem, 0.838rem + 1.69vw, 2rem);
  font-weight: 800;
}
.visit-details ._kitofuda .tag .tag-container .unit {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
  font-size: clamp(1rem, 0.742rem + 1.06vw, 1.25rem);
  font-weight: 800;
}

/*
  visit - beads
================================*/
@media (min-width: 1164px) {
  .visit-details ._beads {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    -moz-column-gap: 32px;
         column-gap: 32px;
    grid-template-areas: "photo title" "photo text" "photo picture";
  }
}
@media (min-width: 1164px) {
  .visit-details ._beads .title-tertiary {
    grid-area: title;
  }
}
.visit-details ._beads .content-text {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 1164px) {
  .visit-details ._beads .content-text {
    grid-area: text;
  }
}

@media (min-width: 1164px) {
  .visit-details ._goshuin {
    display: grid;
    align-content: center;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    -moz-column-gap: 32px;
         column-gap: 32px;
    grid-template-areas: "photo title" "photo tag" "photo text";
    -webkit-margin-after: 80px;
            margin-block-end: 80px;
  }
}
@media (min-width: 1164px) {
  .visit-details ._goshuin .title-tertiary {
    grid-area: title;
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
  }
}
.visit-details ._goshuin .tag {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 1164px) {
  .visit-details ._goshuin .tag {
    grid-area: tag;
  }
}
.visit-details ._goshuin .content-text {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
@media (min-width: 1164px) {
  .visit-details ._goshuin .content-text {
    grid-area: text;
  }
}
@media (min-width: 1164px) {
  .visit-details ._goshuin .photo {
    align-self: center;
    grid-area: photo;
  }
}

/*
  access
================================*/
.access-wrapper {
  -webkit-margin-before: 160px;
          margin-block-start: 160px;
  -webkit-padding-after: 160px;
          padding-block-end: 160px;
}
.access-wrapper ._icon-car {
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
  background-image: url(/img/home/icon-car.png);
  background-repeat: no-repeat;
  background-position: 0 -4px;
  background-size: 32px 32px;
}
.access-wrapper ._icon-public {
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
  background-image: url(/img/home/icon-train.png);
  background-repeat: no-repeat;
  background-position: 0 -4px;
  background-size: 32px 32px;
}

.access-lead {
  display: flex;
  flex-direction: column;
  gap: 40px;
  -webkit-margin-before: 48px;
          margin-block-start: 48px;
}
@media (min-width: 1164px) {
  .access-lead {
    flex-direction: row;
  }
}
.access-lead span {
  text-decoration: underline;
}
.access-lead .button-link {
  flex-shrink: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 1164px) {
  .access-lead .button-link {
    width: 518px;
  }
}
.access-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
@media (min-width: 1164px) {
  .access-container {
    flex-wrap: wrap;
    gap: 64px;
    max-height: 1500px;
  }
}
@media (min-width: 1164px) {
  .access-container > * {
    width: 47.06%;
  }
}
.access-container .content-text {
  font-size: 18px;
}
.access-container .content-text._notes {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  text-decoration: underline;
}
.access-list {
  -webkit-margin-start: 32px;
          margin-inline-start: 32px;
}
.access-item {
  list-style-type: disc;
  font-size: 18px;
  line-height: 1.75;
}
.access-item:not(first-of-type) {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}
.access-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.access-detail dt, .access-detail dd {
  display: flex;
  align-items: center;
}
.access-detail dt {
  width: 48px;
}
.access-detail dt .term {
  padding: 2px 8px;
  color: var(--common);
  font-size: 16px;
  font-weight: 800;
  background-color: var(--font01);
}
.access-detail dd {
  width: calc(100% - 60px);
  -webkit-margin-start: -4px;
          margin-inline-start: -4px;
  font-size: 18px;
  font-weight: 800;
}
.access-detail dd span {
  font-weight: 500;
}
.access-car {
  order: 1;
}
.access-carmap {
  order: 2;
}
@media (min-width: 1164px) {
  .access-carmap {
    order: 3;
  }
}
.access-public {
  order: 3;
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
}
@media (min-width: 1164px) {
  .access-public {
    order: 2;
    -webkit-margin-before: 12px;
            margin-block-start: 12px;
  }
}
.access-publicmap {
  order: 4;
}
@media (min-width: 1164px) {
  .access-publicmap {
    -webkit-margin-before: -40px;
            margin-block-start: -40px;
  }
}

:is(.access-car, .access-public) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:is(.access-car, .access-public) .title-quaternary {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}

.float-container {
  position: fixed;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;


  @media (max-width: 768px) {
    inset-block-end: 25vh;
    inset-inline-end: 0px;
  }

  @media (min-width: 768px) {
    inset-block-start: min(100vh - 228px, 90px + 56.25vw - 200px);
    inset-inline-end: 28px;
    /*
    bottom:1em;
    right: 0px;
    */
    
    flex-direction: row;
    align-items: end;
    gap: 12px;
  }

  @media (max-width: 768px) {
    /*
    inset-block-start: min(100vh - 156px, 64px + 56.25vw - 60px);
    inset-inline-end: 16px;
    */
  }
}

/*===============================

  fortemples

================================*/
/*
  layout
================================*/
.wrapper._fortemples {
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "header" "visual" "notice" "main" "sponser" "footer";
}
.wrapper._fortemples ._notice {
  grid-area: notice;
  justify-content: center;
  background-color: var(--bg02);
}
.wrapper._fortemples .container {
  padding-block: 80px;
}
@media (min-width: 1164px) {
  .wrapper._fortemples .container {
    padding-block: 120px;
  }
}
.wrapper._fortemples .content {
  row-gap: 24px;
}
.wrapper._fortemples .title-container + * {
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
}
.wrapper._fortemples .title-tertiary {
  -webkit-margin-before: 56px;
          margin-block-start: 56px;
}
.wrapper._fortemples .button-container {
  -webkit-margin-before: -10px;
          margin-block-start: -10px;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
.wrapper._fortemples .title-quaternary:last-of-type {
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}

/*
  notice
================================*/
._fortemples ._notice {
  gap: 12px;
  padding-block: 24px;
  color: var(--common);
}
._fortemples ._notice > * {
  text-align: center;
}
._fortemples ._notice a {
  color: var(--common);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
._fortemples ._notice a:hover {
  text-decoration: none;
}

/*
  column - layout
================================*/
._fortemples .detail._book .title-quaternary {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
._fortemples .detail._book .text-bold, ._fortemples .detail._book .content-text {
  -webkit-margin-before: 15px;
          margin-block-start: 15px;
}
._fortemples .detail._payment .list {
  padding: 18px;
  background-color: var(--common);
  border: 1px solid rgba(var(--shadow), 0.3);
}
._fortemples .detail._payment .list .title-fifth {
  font-size: 18px;
  font-weight: 800;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
}
._fortemples .detail._payment .list .button-container {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  -webkit-margin-start: 16px;
          margin-inline-start: 16px;
}
@media (min-width: 768px) {
  ._fortemples .detail._payment .list .button-container {
    -webkit-margin-end: 16px;
            margin-inline-end: 16px;
  }
}
._fortemples .detail._payment .list .content-text {
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
  -webkit-margin-start: 16px;
          margin-inline-start: 16px;
}
._fortemples .detail._payment .list .content-text a {
  position: relative;
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
}
._fortemples .detail._payment .list .content-text a::before {
  position: absolute;
  content: "";
  top: -2px;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url(/img/common/icon-pdf.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
._fortemples .detail._payment .list .content-text a::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 30px;
  width: calc(100% - 30px);
  height: 1px;
  background-color: currentColor;
  transition: 0.3s ease;
}
._fortemples .detail._payment .list .content-text a:hover::after {
  background-color: transparent;
}

/*===============================

  policy, privacy, term

================================*/
/*
  layout
================================*/
.wrapper._site .container {
  padding-block: 80px;
}
@media (min-width: 1164px) {
  .wrapper._site .container {
    padding-block: 120px;
  }
}
.wrapper._site .title-container {
  -webkit-padding-start: clamp(1.75rem, 1.571rem + 0.89vw, 2rem);
          padding-inline-start: clamp(1.75rem, 1.571rem + 0.89vw, 2rem);
  padding-block: 12px 15px;
  -webkit-border-start: 6px solid;
          border-inline-start: 6px solid;
}
.wrapper._site .title-container .title {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  font-size: clamp(2.125rem, 1.857rem + 1.34vw, 2.5rem);
  font-feature-settings: "palt" 1;
}
.wrapper._site .title-container + * {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.wrapper._site .title-tertiary {
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
}
.wrapper._site .title-tertiary + * {
  -webkit-margin-before: 28px;
          margin-block-start: 28px;
}
.wrapper._site .text-bold, .wrapper._site + .content-text {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
.wrapper._site .content-text + .content-text {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.wrapper._site .site-list, .wrapper._site .site-inner-list {
  -webkit-padding-start: 24px;
          padding-inline-start: 24px;
  line-height: 1.85;
}
.wrapper._site .site-list::before, .wrapper._site .site-list::after, .wrapper._site .site-inner-list::before, .wrapper._site .site-inner-list::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.wrapper._site .site-list::before, .wrapper._site .site-inner-list::before {
  margin-top: calc((1 - 1.85) * 0.5em);
}
.wrapper._site .site-list::after, .wrapper._site .site-inner-list::after {
  margin-bottom: calc((1 - 1.85) * 0.5em);
}
.wrapper._site .site-item {
  list-style: auto;
}
.wrapper._site .site-inner-list {
  margin-block: 12px;
}
.wrapper._site .site-inner-list .inner-item {
  list-style: disc;
}
.wrapper._site .site-brackets {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  line-height: 1.85;
}
.wrapper._site .site-brackets::before, .wrapper._site .site-brackets::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.wrapper._site .site-brackets::before {
  margin-top: calc((1 - 1.85) * 0.5em);
}
.wrapper._site .site-brackets::after {
  margin-bottom: calc((1 - 1.85) * 0.5em);
}
.wrapper._site .site-brackets .brackets-item {
  counter-increment: cnt;
}
.wrapper._site .site-brackets .brackets-item::before {
  content: "（" counter(cnt) "）";
}
.wrapper._site :is(.text, .text-bold, .content-text, .site-list, .site-inner-list, .site-device, .info-detail span, .brackets-item, .site-info span, .site-substitute) {
  font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
}
.wrapper._site .site-detail {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .wrapper._site .site-detail {
    flex-direction: row;
  }
}
.wrapper._site .site-detail:last-of-type {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.wrapper._site .site-detail dt .text-bold {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.wrapper._site .site-detail dd {
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
}
@media (min-width: 768px) {
  .wrapper._site .site-detail dd {
    -webkit-padding-start: 24px;
            padding-inline-start: 24px;
  }
}
.wrapper._site .site-detail dd .text-bold {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
@media (min-width: 768px) {
  .wrapper._site .site-detail dd .text-bold:first-of-type {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
}
.wrapper._site .site-info {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  padding: 24px;
  background-color: rgba(var(--shadow), 0.08);
}
.wrapper._site .site-info .text-bold {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.wrapper._site .site-info .info-detail {
  display: flex;
  flex-direction: column;
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
@media (min-width: 768px) {
  .wrapper._site .site-info .info-detail {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .wrapper._site .site-info .info-detail dt {
    width: 170px;
    -webkit-padding-before: 6px;
            padding-block-start: 6px;
  }
}
.wrapper._site .site-info .info-detail dd {
  -webkit-padding-before: 12px;
          padding-block-start: 12px;
}
@media (min-width: 768px) {
  .wrapper._site .site-info .info-detail dd {
    width: calc(100% - 170px);
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
.wrapper._site .site-info .info-detail dd span {
  display: inline-block;
}
.wrapper._site .site-info .info-detail dd span:nth-child(-n+2) {
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
}
.wrapper._site .site-info .content-text span {
  display: inline-block;
}
.wrapper._site .site-info .content-text span:nth-child(-n+2) {
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
}
.wrapper._site .site-substitute {
  display: flex;
  flex-direction: column;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  line-height: 1.85;
}
.wrapper._site .site-substitute::before, .wrapper._site .site-substitute::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.wrapper._site .site-substitute::before {
  margin-top: calc((1 - 1.85) * 0.5em);
}
.wrapper._site .site-substitute::after {
  margin-bottom: calc((1 - 1.85) * 0.5em);
}
@media (min-width: 768px) {
  .wrapper._site .site-substitute {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.wrapper._site .site-substitute dt {
  width: 100%;
  font-weight: 800;
}
@media (min-width: 768px) {
  .wrapper._site .site-substitute dt {
    width: 160px;
  }
}
.wrapper._site .site-substitute dd {
  width: 100%;
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
}
@media (min-width: 768px) {
  .wrapper._site .site-substitute dd {
    width: calc(100% - 160px);
  }
}
.wrapper._site .site-substitute dd span {
  display: inline-block;
}
.wrapper._site .site-substitute dd span:nth-child(-n+2) {
  display: block;
}

/*===============================

  apply - dialog

================================*/
/*
  layout
================================*/
:is(.dialog-example, .dialog-preview, .dialog-kf-detail) {
  width: min(100%, 972px);
  margin: auto;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(var(--shadow), 0.5);
  opacity: 0;
  overflow-y: scroll;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail)::-ms-backdrop {
  background-color: rgba(47, 39, 37, 0);
  -ms-transition: background 0.3s;
  transition: background 0.3s;
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail)::-webkit-backdrop {
  background-color: rgba(47, 39, 37, 0);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail)::backdrop {
  background-color: rgba(47, 39, 37, 0);
  transition: background 0.3s;
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail).show {
  opacity: 1;
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail).show::-ms-backdrop {
  background: rgba(47, 39, 37, 0.5);
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail).show::-webkit-backdrop {
  background: rgba(47, 39, 37, 0.5);
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail).show::backdrop {
  background: rgba(47, 39, 37, 0.5);
}
:is(.dialog-example, .dialog-preview, .dialog-kf-detail) .content-text {
  -webkit-margin-before: 32px;
          margin-block-start: 32px;
}

/*
  wish - example
================================*/
.dialog-example {
  height: min(100%, 820px);
  padding: 32px;
  background-color: var(--bg03);
}

:is(.example-container, .preview-container, .kf-tag-container) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:is(.example-container, .preview-container, .kf-tag-container) :is(.title-example, .title-preview, .title-kf-detail) {
  font-size: 22px;
  font-weight: 800;
}
:is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close) {
  position: relative;
  display: flex;
  align-items: center;
  width: 106px;
  height: 40px;
  -webkit-padding-start: 36px;
          padding-inline-start: 36px;
  font-size: 20px;
  background-color: transparent;
  border: 1px solid;
  transition: 0.3s ease;
}
:is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close)::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  top: 10px;
  left: 8px;
  background-image: url(/img/common/icon-add.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  transform: rotate(45deg);
}
:is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover {
  color: var(--common);
}
@media (hover: hover) {
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover::before, :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover::after {
    background-color: var(--font01);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover > * {
    color: var(--common);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
@media (hover: none) {
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover::before, :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover::after {
    background-color: var(--font01);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover > * {
    color: var(--common);
  }
  :is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
:is(.example-container, .preview-container, .kf-tag-container) :is(.wish-close, .preview-close, .kf-tag-close):hover::before {
  background-color: transparent;
  background-image: url(/img/common/icon-add-white.svg);
}

.example-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  gap: 16px;
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}

.example-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
  grid-template-areas: "image text";
  padding: 24px;
  color: var(--font01);
  background-color: var(--common);
  border: 1px solid var(--bd02);
  box-shadow: 0 2px 4px rgba(var(--shadow), 0.25);
}
.example-card .image {
  grid-area: image;
  align-self: center;
  padding: 18px 8px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-image: url(/img/form/bg-wood.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  box-shadow: 0 4px 4px rgba(var(--shadow), 0.25);
}
.example-card .image :is(.wish, .ruby) {
  display: block;
  text-align: center;
  line-height: 1.2;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.example-card .image :is(.wish, .ruby)::before, .example-card .image :is(.wish, .ruby)::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.example-card .image :is(.wish, .ruby)::before {
  margin-top: calc((1 - 1.2) * 0.5em);
}
.example-card .image :is(.wish, .ruby)::after {
  margin-bottom: calc((1 - 1.2) * 0.5em);
}
.example-card .image .wish {
  font-family: "Yuji Boku", serif;
  font-size: 28px;
  letter-spacing: 0.24em;
}
.example-card .image .ruby {
  font-size: 14px;
}
.example-card .wish-text {
  grid-area: text;
  align-self: start;
  font-size: 14px;
}
.example-card .button-form {
  grid-area: text;
  align-self: end;
  height: auto;
  -webkit-margin-after: -2px;
          margin-block-end: -2px;
  padding: 12px 16px;
  font-size: 16px;
}

/*===============================

  apply - common parts

================================*/
/*
  layout
================================*/
.wrapper._apply .page-visual {
  display: grid;
  grid-template-columns: [main-start] 10px [content-start] 1fr [content-end] 10px [main-end];
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual {
    grid-template-columns: [main-start] 32px [content-start] 1fr [content-end] 32px [main-end];
  }
}
.wrapper._apply .page-visual .page-container {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: end;
  width: 100%;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
  padding-block: 24px 20px;
  color: var(--common);
  border-image-source: linear-gradient(rgba(var(--ink), 0.7), rgba(var(--ink), 0.7));
  border-image-slice: fill 0;
  border-image-outset: 0 100vw 0 100vw;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual .page-container {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-margin-after: 64px;
            margin-block-end: 64px;
    padding-inline: 0 24px;
    border-image-outset: 0 0px 0 100vw;
  }
}
.wrapper._apply .page-visual .page-container .title {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.wrapper._apply .page-visual .page-container .title span {
  display: block;
  position: relative;
  width: 100%;
  -webkit-margin-after: 16px;
          margin-block-end: 16px;
  -webkit-border-after: 1px solid;
          border-block-end: 1px solid;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual .page-container .title span {
    padding-inline: 40px 128px;
  }
}
.wrapper._apply .page-visual .ogoma {
  grid-column: 2/4;
  grid-row: 1/2;
  justify-self: end;
  align-self: start;
  -webkit-margin-before: 30px;
          margin-block-start: 30px;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual .ogoma {
    grid-column: 2/3;
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
  }
}
.wrapper._apply .page-visual .ogoma .logo {
  width: 336px;
  -webkit-margin-end: 14px;
          margin-inline-end: 14px;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual .ogoma .logo {
    width: 320px;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
@media (min-width: 1164px) {
  .wrapper._apply .page-visual .ogoma .logo {
    width: 438px;
  }
}
.wrapper._apply .page-visual .ogoma .logo img {
  width: 100%;
  aspect-ratio: 438/90;
  -o-object-fit: contain;
     object-fit: contain;
}
.wrapper._apply .page-visual .ogoma .ogoma-info {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

.wrapper._apply .page-visual {
  height: 440px;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual {
    height: 540px;
  }
}
@media (min-width: 1164px) {
  .wrapper._apply .page-visual {
    height: 504px;
  }
}
.wrapper._apply .page-visual .item :is(.text, .text-sub) {
  text-shadow: 0 0 20px rgba(var(--shadow), 1), 0 4px 4px rgba(var(--shadow), 0.25);
}
.wrapper._apply .page-visual ._fill {
  font-size: clamp(2.125rem, 1.222rem + 3.7vw, 3rem);
}
.wrapper._apply .page-visual .title-apply {
  font-size: 40px;
  font-weight: 800;
  font-feature-settings: "palt" 1;
}

.content-through:is(._intro-gomaki, ._intro-kitofuda) {
  -webkit-padding-after: 160px;
          padding-block-end: 160px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .bg {
  grid-area: 1/1/3/4;
  position: relative;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
@media (min-width: 768px) {
  .content-through:is(._intro-gomaki, ._intro-kitofuda) .bg {
    grid-area: 1/1/3/3;
  }
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead {
  grid-area: 1/2/3/3;
  position: relative;
  z-index: 1;
  padding-block: 40px 160px;
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .title {
  font-size: clamp(1.75rem, 0.976rem + 3.17vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .title span {
  display: inline;
}
@media (min-width: 768px) {
  .content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .title span {
    display: block;
  }
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .text {
  -webkit-margin-before: 36px;
          margin-block-start: 36px;
  font-size: 20px;
  font-weight: 800;
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .text span {
  display: inline-block;
}
@media (min-width: 768px) {
  .content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .text span {
    display: block;
  }
}
.content-through:is(._intro-gomaki, ._intro-kitofuda) .lead .text + .text {
  -webkit-margin-before: 30px;
          margin-block-start: 30px;
}

:is(._apply-gomaki, ._apply-input) {
  grid-column: main;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
@media (min-width: 768px) {
  :is(._apply-gomaki, ._apply-input) {
    grid-column: content;
  }
}

:is(.gomaki-input, .kitofuda-input) {
  border: 0;
}

:is(.gomaki-form, .kitofuda-form) .wish > * {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1164px) {
  :is(.gomaki-form, .kitofuda-form) .wish > * {
    display: inline-block;
  }
}
:is(.gomaki-form, .kitofuda-form) .wish-search {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 242px);
  height: 52px;
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  font-size: 18px;
  background-color: transparent;
  border: 1px solid;
  transition: 0.3s ease;
}
@media (min-width: 1164px) {
  :is(.gomaki-form, .kitofuda-form) .wish-search {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-start: 24px;
            margin-inline-start: 24px;
  }
}
:is(.gomaki-form, .kitofuda-form) .wish-search:hover {
  color: var(--common);
}
@media (hover: hover) {
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover::before, :is(.gomaki-form, .kitofuda-form) .wish-search:hover::after {
    background-color: var(--font01);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover > * {
    color: var(--common);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
@media (hover: none) {
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover {
    color: var(--common);
    border-color: var(--font01);
    background-color: var(--font01);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover::before, :is(.gomaki-form, .kitofuda-form) .wish-search:hover::after {
    background-color: var(--font01);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover > * {
    color: var(--common);
  }
  :is(.gomaki-form, .kitofuda-form) .wish-search:hover span {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background-color: var(--common);
  }
}
:is(.gomaki-form, .kitofuda-form) p:first-of-type:not(.wish p, .data p) {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
:is(.gomaki-form, .kitofuda-form) .form-textarea {
  min-height: 136px;
  max-height: 290px;
}
:is(.gomaki-form, .kitofuda-form) .data {
  -webkit-margin-before: 52px;
          margin-block-start: 52px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1164px) {
  :is(.gomaki-form, .kitofuda-form) .data {
    flex-direction: row;
  }
}
:is(.gomaki-form, .kitofuda-form) .data p {
  flex: 1;
}

.wrapper._apply :is(.notice, .flow) {
  padding: 12px 20px;
  border: 1px solid currentColor;
}
@media (min-width: 768px) {
  .wrapper._apply :is(.notice, .flow) {
    padding-block: 15px;
  }
}
.wrapper._apply .notice {
  grid-column: content;
  -webkit-margin-before: 96px;
          margin-block-start: 96px;
  color: var(--common);
}
@media (min-width: 768px) {
  .wrapper._apply .notice {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "dt dt" "dd01 dd02" "dd03 dd04";
  }
}
@media (min-width: 1164px) {
  .wrapper._apply .notice {
    /*
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "dt dd01 dd02" "dt dd03 dd04";
    */
    -webkit-padding-after: 20px;
            padding-block-end: 20px;
  }
}
.wrapper._apply .notice :is(dt, dt > *, dd) {
  font-size: 18px;
}
.wrapper._apply .notice dt {
  grid-area: dt;
  -webkit-margin-after: 4px;
          margin-block-end: 4px;
  -webkit-padding-after: 10px;
          padding-block-end: 10px;
  -webkit-border-after: 1px solid rgba(var(--bg), 0.5);
          border-block-end: 1px solid rgba(var(--bg), 0.5);
}
@media (min-width: 1164px) {
  .wrapper._apply .notice dt {
    -webkit-padding-after: 0;
            padding-block-end: 0;
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
    -webkit-border-after: 0;
            border-block-end: 0;
  }
}
.wrapper._apply .notice dt .text {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-padding-start: 22px;
          padding-inline-start: 22px;
  font-weight: 800;
}
.wrapper._apply .notice dt .text::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  -webkit-margin-before: -8px;
          margin-block-start: -8px;
  background-color: var(--common);
}
.wrapper._apply .notice dd {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
}
@media (min-width: 768px) {
  .wrapper._apply .notice dd {
    -webkit-padding-before: 15px;
            padding-block-start: 15px;
  }
}
.wrapper._apply .notice dd:first-of-type {
  grid-area: dd01;
}
@media (min-width: 1164px) {
  .wrapper._apply .notice dd:first-of-type {
    -webkit-padding-before: 6px;
            padding-block-start: 6px;
  }
}
.wrapper._apply .notice dd:nth-of-type(2) {
  grid-area: dd02;
}
@media (min-width: 1164px) {
  .wrapper._apply .notice dd:nth-of-type(2) {
    -webkit-padding-before: 6px;
            padding-block-start: 6px;
  }
}
.wrapper._apply .notice dd:nth-of-type(3) {
  grid-area: dd03;
}
.wrapper._apply .notice dd:last-of-type {
  grid-area: dd04;
}
.wrapper._apply .notice dd .text {
  font-size: 18px;
}
@media (min-width: 768px) {
  .wrapper._apply .notice dd:nth-of-type(even) {
    -webkit-padding-start: 18px;
            padding-inline-start: 18px;
  }
}
.wrapper._apply .notice dd:nth-of-type(even) .text {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
@media (min-width: 768px) {
  .wrapper._apply .notice dd:nth-of-type(even) .text {
    display: block;
  }
}
.wrapper._apply .notice dd:nth-of-type(even) .text span {
  -webkit-margin-before: 2px;
          margin-block-start: 2px;
}
@media (min-width: 768px) {
  .wrapper._apply .notice dd:nth-of-type(even) .text span {
    display: inline-block;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }
}

.wrapper._apply ._flow {
  -webkit-margin-after: 140px;
          margin-block-end: 140px;
}
.wrapper._apply ._flow .flow {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
  color: var(--font01);
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 1440px) {
  .wrapper._apply ._flow .flow {
    -webkit-margin-before: 60px;
          margin-block-start: 60px;
  }
}
.wrapper._apply ._flow .flow dt, .wrapper._apply ._flow .flow dd > * {
  font-size: clamp(1rem, 0.863rem + 0.56vw, 1.25rem);
}
.wrapper._apply ._flow .flow dt {
  font-weight: 800;
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dt {
    flex-basis: 25%;/*35%;*/
  }
}
@media (min-width: 1164px) {
  .wrapper._apply ._flow .flow dt {
    flex-basis: 230px;
  }
}
.wrapper._apply ._flow .flow dt:first-of-type {
  -webkit-padding-after: 10px;
          padding-block-end: 10px;
  -webkit-border-after: 1px dotted rgba(var(--ink), 0.5);
          border-block-end: 1px dotted rgba(var(--ink), 0.5);
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dt:first-of-type {
    padding-block: 0;
    border: 0;
  }
}
.wrapper._apply ._flow .flow dt:not(:first-of-type) {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
  padding-block: 10px;
  border-block: 1px dotted rgba(var(--ink), 0.5);
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dt:not(:first-of-type) {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    padding-block: 10px 0;
    border: 0;
  }
}
.wrapper._apply ._flow .flow dd {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dd {
    flex-basis: 75%;/*65%;*/
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
    -webkit-border-start: 1px solid rgba(var(--ink), 0.3);
            border-inline-start: 1px solid rgba(var(--ink), 0.3);
  }
}
@media (min-width: 1164px) {
  .wrapper._apply ._flow .flow dd {
    flex-basis: calc(100% - 230px);
  }
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dd:first-of-type {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
.wrapper._apply ._flow .flow dd .flow-text {
  display: flex;
  gap: 4px;
}
.wrapper._apply ._flow .flow dd span {
  display: inline-block;
}
.wrapper._apply ._flow .flow dd .sup-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 15px;
  -webkit-margin-start: 40px;
          margin-inline-start: 40px;
}
.wrapper._apply ._flow .flow dd .sup-item {
  list-style-type: disc;
  line-height: 1.5;
}
.wrapper._apply ._flow .flow dd .sup-item::before, .wrapper._apply ._flow .flow dd .sup-item::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.wrapper._apply ._flow .flow dd .sup-item::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.wrapper._apply ._flow .flow dd .sup-item::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.wrapper._apply ._flow .flow dd ._inner {
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}
@media (min-width: 768px) {
  .wrapper._apply ._flow .flow dd ._inner {
    flex-wrap: wrap;
  }
}

/*
  gomaki - input
================================*/
:is(.gomaki-apply, .kitofuda-apply) {
  z-index: 0;
  padding: 70px 90px;
  background-color: rgba(var(--bg), 0.8);
  border: 1px solid;
  -webkit-filter: grayscale(0%) opacity(100%);
          filter: grayscale(0%) opacity(100%);
}
:is(.gomaki-apply, .kitofuda-apply) .title {
  font-size: clamp(1.75rem, 0.976rem + 3.17vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}
:is(.gomaki-apply, .kitofuda-apply) .title span {
  display: inline;
}
@media (min-width: 768px) {
  :is(.gomaki-apply, .kitofuda-apply) .title span {
    display: block;
  }
}
:is(.gomaki-apply, .kitofuda-apply) .button-container._column {
  width: min(100%, 792px);
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
  margin-inline: auto;
}

/*
  preview
================================*/
:is(._pv-gomaki, ._pv-kitofuda) {
  margin-block: 80px 120px;
}
:is(._pv-gomaki, ._pv-kitofuda) > * {
  width: min(100%, 908px);
  margin-inline: auto;
}
:is(._pv-gomaki, ._pv-kitofuda) .title {
  font-size: 28px;
}
:is(._pv-gomaki, ._pv-kitofuda) .button-container._column {
  gap: 16px;
  width: min(100%, 908px);
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  :is(._pv-gomaki, ._pv-kitofuda) .button-container._column {
    flex-direction: row;
    gap: 24px;
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
}
:is(._pv-gomaki, ._pv-kitofuda) .button-container._count {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  row-gap: 8px;
  grid-template-areas: "." ".";
  width: min(100%, 908px);
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  :is(._pv-gomaki, ._pv-kitofuda) .button-container._count {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: 18px;
    grid-template-areas: ". .";
    -webkit-margin-before: 16px;
            margin-block-start: 16px;
  }
}
:is(._pv-gomaki, ._pv-kitofuda) .button-container._count .count {
  align-self: flex-end;
  display: grid;
  grid-template-columns: 126px 24px;
  grid-template-rows: auto auto;
  grid-template-areas: ". ." ". .";
  align-items: baseline;
  width: 150px;
  font-size: 14px;
}
:is(._pv-gomaki, ._pv-kitofuda) .button-container._count .count dd {
  text-align: right;
}
.incart-note {
  width: 100%;
  text-align: center;
  font-size: small;
}

/*
  confirm
================================*/
._confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-block: 24px 20px;
  background-color: var(--form04);
}
._confirm .confirm-container {
  display: flex;
  align-items: center;
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}
._confirm .confirm-container .text {
  font-size: 20px;
  font-weight: 800;
}
._confirm .confirm-container .text span {
  display: inline-block;
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
}
._confirm .confirm-container .confirm-kitofuda {
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
  -webkit-padding-start: 24px;
          padding-inline-start: 24px;
  -webkit-border-start: 1px solid;
          border-inline-start: 1px solid;
}
._confirm .confirm-container .button-form {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 500;
}

/*===============================

  apply - gomaki

================================*/
/*
  layout
================================*/
.wrapper._apply .page-visual.vs-gomaki {
  background-image: linear-gradient(180deg, rgba(var(--font-rgb), 0.4) 0%, rgba(var(--font-rgb), 0) 100%), url(/img/form/bg-visual-gomaki.jpg);
  background-position: 70% 30%;
  background-size: auto 800px;
}
@media (min-width: 768px) {
  .wrapper._apply .page-visual.vs-gomaki {
    background-size: auto;
  }
}
@media (min-width: 1164px) {
  .wrapper._apply .page-visual.vs-gomaki {
    background-position: 50% 30%;
  }
}

.gomaki-wrapper {
  position: relative;
  padding-block: 120px;
  background-image: linear-gradient(180deg, rgba(var(--apply03-rgb), 0) 78.57%, rgba(var(--apply03-rgb), 0.8) 100%), linear-gradient(180deg, rgba(var(--primary-rgb)) 0%, rgba(var(--primary-rgb), 0) 40.86%);
}
.gomaki-wrapper::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url(/img/form/bg-gomaki.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  opacity: 0.5;
}
.gomaki-wrapper ._flow {
  -webkit-margin-after: 140px;
          margin-block-end: 140px;
}

.content-through._intro-gomaki .bg {
  background-image: linear-gradient(139.1deg, rgba(var(--primary-rgb), 0.9) 14.63%, rgba(var(--primary-rgb), 0.8) 43.33%, rgba(var(--primary-rgb), 0) 80.79%), url(/img/form/bg-lead-gomaki.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 2000px auto;
}
@media (min-width: 768px) {
  .content-through._intro-gomaki .bg {
    background-size: 1460px auto;
  }
}

._intro-gomaki .lead {
  position: relative;
}
._intro-gomaki .lead::before, ._intro-gomaki .lead::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
._intro-gomaki .lead::before {
  width: 127px;
  height: 127px;
  top: -100px;
  right: 40px;
  background-image: url(/img/form/leaf01.png);
}
@media (min-width: 768px) {
  ._intro-gomaki .lead::before {
    display: none;
  }
}
._intro-gomaki .lead::after {
  width: 321px;
  height: 196px;
  right: -105px;
  bottom: -140px;
  background-image: url(/img/form/leaf02.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  ._intro-gomaki .lead::after {
    right: -120px;
    bottom: -120px;
    width: 419px;
    height: 250px;
  }
}
@media (min-width: 1164px) {
  ._intro-gomaki .lead::after {
    right: -210px;
    bottom: -250px;
    width: 522px;
    height: 323px;
  }
}

.apply-explanation {
  position: relative;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
  padding: 20px;
  background-color: rgba(var(--ink), 0.1);
}
.apply-explanation .text {
  font-size: 20px;
  font-weight: 800;
}
.apply-explanation .text + .text {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}

._apply-gomaki {
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}

.gomaki-container {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "preview form";
}
@media (min-width: 768px) {
  .gomaki-container {
    grid-template-columns: 252px 1fr;
    -moz-column-gap: 16px;
         column-gap: 16px;
  }
}
@media (min-width: 1164px) {
  .gomaki-container {
    grid-template-columns: 300px 1fr;
    -moz-column-gap: 48px;
         column-gap: 48px;
    height: 960px;
  }
}
.gomaki-container .preview {
  position: relative;
  display: grid;
}
.gomaki-container .detail {
  position: relative;
  grid-area: form;
  display: flex;
  flex-direction: column;
  padding: 40px 16px;
  background-color: var(--bg03);
}
@media (min-width: 768px) {
  .gomaki-container .detail {
    padding: 64px 40px;
    box-shadow: 0 12px 24px rgba(var(--shadow), 0.6);
  }
}
.gomaki-container .content-text {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  font-size: 18px;
  font-weight: 800;
}
.gomaki-container .tag .tag-text {
  font-size: 14px;
}
@media (min-width: 768px) {
  .gomaki-container .tag .tag-text {
    font-size: 18px;
  }
}
.gomaki-container .tag .tag-price {
  margin-inline: 6px;
  font-size: 28px;
}
@media (min-width: 768px) {
  .gomaki-container .tag .tag-price {
    margin-inline: 20px 6px;
    font-size: 32px;
  }
}
.gomaki-container .button-container {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 1164px) {
  .gomaki-container .button-container {
    -webkit-margin-before: auto;
            margin-block-start: auto;
  }
}

.gomaki-form .wish {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 768px) {
  .gomaki-form .wish {
    -webkit-margin-before: 48px;
            margin-block-start: 48px;
  }
}
@media (min-width: 1164px) {
  .gomaki-form ._wish {
    width: 400px;
  }
}

/*
  leaf - decoration
*/
._apply-gomaki .title-tertiary {
  position: relative;
}
._apply-gomaki .title-tertiary::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 81px;
  top: -20px;
  left: 45px;
  background-image: url(/img/form/leaf03.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  ._apply-gomaki .title-tertiary::before {
    width: 182px;
    height: 181px;
    top: -80px;
    right: 130px;
    left: auto;
    background-image: url(/img/form/leaf04.png);
  }
}
@media (min-width: 1164px) {
  ._apply-gomaki .title-tertiary::before {
    width: 244px;
    height: 243px;
    top: -10px;
    right: 210px;
  }
}
._apply-gomaki .title-tertiary span {
  display: inline-block;
  -webkit-margin-start: 30px;
          margin-inline-start: 30px;
}
@media (min-width: 768px) {
  ._apply-gomaki .apply-explanation::before {
    position: absolute;
    content: "";
    z-index: 1;
    width: 347px;
    height: 141px;
    top: -70px;
    right: 40px;
    background-image: url(/img/form/leaf05.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
  }
}
@media (min-width: 1164px) {
  ._apply-gomaki .apply-explanation::before {
    width: 465px;
    height: 189px;
    top: 20px;
    right: 40px;
  }
}
._apply-gomaki .preview::before, ._apply-gomaki .preview::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  ._apply-gomaki .preview::before {
    top: -36px;
    left: -45px;
    width: 121px;
    height: 121px;
    background-image: url(/img/form/leaf07.png);
  }
}
._apply-gomaki .preview::after {
  bottom: 180px;
  left: -36px;
  width: 121px;
  height: 121px;
  background-image: url(/img/form/leaf07.png);
}
@media (min-width: 768px) {
  ._apply-gomaki .preview::after {
    left: auto;
    right: -24px;
    bottom: -74px;
    width: 138px;
    height: 178px;
    background-image: url(/img/form/leaf08.png);
  }
}
._apply-gomaki .detail::before {
  position: absolute;
  content: "";
  width: 201px;
  height: 191px;
  top: -70px;
  left: -118px;
  background-image: url(/img/form/leaf06.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  ._apply-gomaki .detail::before {
    width: 268px;
    height: 254px;
    top: -63px;
    left: -268px;
    background-position: 70px 0;
  }
}
@media (min-width: 1164px) {
  ._apply-gomaki .detail::before {
    left: -248px;
    background-position: 0 0;
  }
}

/*
  input - image
*/
.gomaki-container .preview {
  grid-area: preview;
  grid-template-columns: 35px 20px 1fr;
  grid-template-rows: 200px 305px auto;
  grid-template-areas: ". wish ." ". name ." ". age .";
  justify-items: center;
  align-items: start;
  background-color: rgba(var(--bg), 0.64);
  background-image: url(/img/form/gomaki.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media (min-width: 768px) {
  .gomaki-container .preview {
    grid-template-columns: 51px 32px 1fr;
    grid-template-rows: 354px 400px auto;
    background-image: url(/img/form/gomaki-all.png);
    background-position: -28px 0;
    background-size: auto 960px;
  }
}
@media (min-width: 1164px) {
  .gomaki-container .preview {
    grid-template-columns: 80px 32px 1fr;
    background-position: 0 0;
  }
}
.gomaki-container .preview .pview-wish, .gomaki-container .preview .pview-name, .gomaki-container .preview .pview-age {
  font-family: "Yuji Boku", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: inline-block;
  text-align: center;
}
.gomaki-container .preview .pview-wish, .gomaki-container .preview .pview-name {
  font-size: 20px;
  letter-spacing: 0.16em;
}
@media (min-width: 768px) {
  .gomaki-container .preview .pview-wish, .gomaki-container .preview .pview-name {
    font-size: 32px;
  }
}
.gomaki-container .preview .pview-wish {
  grid-area: wish;
  height: 120px;
  -webkit-margin-start: 150px;
          margin-inline-start: 150px;
}
@media (min-width: 768px) {
  .gomaki-container .preview .pview-wish {
    height: 150px;
    -webkit-margin-start: 225px;
            margin-inline-start: 225px;
  }
}
.gomaki-container .preview .pview-name {
  grid-area: name;
  -webkit-margin-start: 175px;
          margin-inline-start: 175px;
}
@media (min-width: 768px) {
  .gomaki-container .preview .pview-name {
    -webkit-margin-start: 200px;
            margin-inline-start: 200px;
  }
}
.gomaki-container .preview .pview-age {
  grid-area: age;
  font-size: 18px;
}
@media (min-width: 768px) {
  .gomaki-container .preview .pview-age {
    font-size: 28px;
  }
}

/*
  preview
================================*/
._pv-gomaki {
  position: relative;
}
._pv-gomaki::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 472px;
  top: 48px;
  left: 0;
  z-index: -1;
  background-image: url(/img/form/bg-gomaki.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 908px auto;
  background-blend-mode: luminosity;
  opacity: 0.5;
}
._pv-gomaki::after {
  position: absolute;
  content: "";
  width: 908px;
  height: 472px;
  top: 48px;
  left: calc(50% - 454px);
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(var(--apply03-rgb), 0) 78.57%, rgba(var(--apply03-rgb), 0.8) 100%), linear-gradient(180deg, rgba(var(--primary-rgb)) 0%, rgba(var(--primary-rgb), 0) 40.86%);
}

.print-header, .print-footer {
  display: none;
}

.preview-container {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 417px 1fr;
  grid-template-areas: "image text" "image .";
  -moz-column-gap: 4px;
       column-gap: 4px;
  width: min(100%, 844px);
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .preview-container {
    grid-template-columns: 114px 1fr;
    grid-template-rows: 468px 1fr;
    -moz-column-gap: 14px;
         column-gap: 14px;
  }
}
.preview-container .image {
  grid-area: image;
  display: grid;
  grid-template-columns: 15px 24px 1fr;
  grid-template-rows: 324px 204px 58px;
  grid-template-areas: ". wish ." ". name ." ". age .";
  justify-items: center;
  align-items: start;
  height: 640px;
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  font-size: 22px;
  background-image: url(/img/form/gomaki-preview.png);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: auto 640px;
}
@media (min-width: 768px) {
  .preview-container .image {
    grid-template-columns: 45px 24px 1fr;
    background-position: 50% 0;
  }
}
.preview-container .image :is(.detail-wish, .detail-name, .detail-age) {
  font-family: "Yuji Boku", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: inline-block;
  text-align: center;
}
.preview-container .image :is(.detail-wish, .detail-name) {
  letter-spacing: 0.12em;
}
.preview-container .image .detail-wish {
  grid-area: wish;
  height: 120px;
  -webkit-margin-start: 132px;
          margin-inline-start: 132px;
}
.preview-container .image .detail-name {
  grid-area: name;
  -webkit-margin-start: 54px;
          margin-inline-start: 54px;
}
.preview-container .image .detail-age {
  grid-area: age;
  height: 58px !important;
  -webkit-padding-after: 0;
          padding-block-end: 0;
  font-size: 18px;
}
.preview-container .preview-text {
  grid-area: text;
  align-self: end;
}
.preview-container .preview-text .comment {
  max-height: 294px;
  padding: 15px 12px;
  overflow: hidden;
  color: var(--common);
  font-size: 18px;
  line-height: 1.75;
  background-color: rgba(var(--ink), 0.48);
}
.preview-container .preview-text .comment::before, .preview-container .preview-text .comment::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.preview-container .preview-text .comment::before {
  margin-top: calc((1 - 1.75) * 0.5em);
}
.preview-container .preview-text .comment::after {
  margin-bottom: calc((1 - 1.75) * 0.5em);
}
@media (min-width: 768px) {
  .preview-container .preview-text .comment {
    max-height: 327px;
  }
}
.preview-container .preview-text .button-wrap {
  display: flex;
  gap: 18px;
  margin-block: 24px;
}
@media (min-width: 768px) {
  .preview-container .preview-text .button-wrap {
    -webkit-margin-after: 40px;
            margin-block-end: 40px;
  }
}
.preview-container .preview-text .button-form {
  grid-area: text;
  align-self: end;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  padding-block: 16px;
  padding-inline: 36px 18px;
  font-size: 18px;
}
.preview-container .preview-text .button-form._back::before {
  left: 15px;
}
.preview-container .preview-text .button-form._print {
  padding-inline: 30px;
}
.preview-container .preview-text .button-form._print::before, .preview-container .preview-text .button-form._print::after {
  content: none;
}

/*
  confrim
================================*/
:is(.title-tertiary, .apply-explanation)._gomaki-confirm::before, :is(.title-tertiary, .apply-explanation)._gomaki-confirm::after {
  background-image: none;
}

/*===============================

  apply - kitofuda

================================*/
/*
  layout
================================*/
.wrapper._apply .page-visual.vs-kitofuda {
  background-image: linear-gradient(180deg, rgba(var(--font-rgb), 0.4) 0%, rgba(var(--font-rgb), 0) 100%), url(/img/form/bg-visual-kf.jpg);
  background-position: 50% 0;
  background-size: cover;
}
.kitofuda-wrapper {
  position: relative;
  padding-block: 120px;
  background-image: linear-gradient(180deg, var(--primary) 0%, rgb(var(--apply04-rgb)) 27.79%, rgba(var(--apply04-rgb), 0) 39.82%);
}
.kitofuda-wrapper::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url(/img/form/bg-kitofuda.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 4180px auto;
  background-blend-mode: luminosity;
  opacity: 0.8;
}
.kitofuda-wrapper ._flow {
  -webkit-margin-after: 180px;
          margin-block-end: 180px;
}

.content-through._intro-kitofuda .bg {
  background-image: linear-gradient(rgba(var(--bg), 0.8), rgba(var(--bg), 0.8)), url(/img/form/bg-lead-kf.jpg);
  background-position: 100% 0;
}
@media (min-width: 768px) {
  .content-through._intro-kitofuda .lead {
    -webkit-padding-end: 54px;
            padding-inline-end: 54px;
  }
}

.content-kitofuda {
  display: grid;
  grid-template-columns: [main-start] 16px [content-start] 1fr [content-end] 16px [main-end];
}
@media (min-width: 768px) {
  .content-kitofuda {
    grid-template-columns: [main-start] 20px [content-start] 1fr [content-end] 20px [main-end];
  }
}
.content-kitofuda > * {
  grid-column: content;
  width: min(100%, var(--large));
  margin-inline: auto;
}

:is(.content-kitofuda, ._apply-kitofuda) .title-tertiary {
  position: relative;
  display: flex;
  align-items: baseline;
  -webkit-padding-start: 45px;
          padding-inline-start: 45px;
  font-weight: 800;
}
:is(.content-kitofuda, ._apply-kitofuda) .title-tertiary::before {
  position: absolute;
  content: attr(data-number);
  top: 5px;
  left: 0;
  width: 40px;
  color: currentColor;
  font-size: clamp(2rem, 1.742rem + 1.06vw, 2.25rem);
}
@media (min-width: 768px) {
  :is(.content-kitofuda, ._apply-kitofuda) .title-tertiary::before {
    top: 7px;
    left: 8px;
  }
}

@media (min-width: 768px) {
  .content-kitofuda .title-tertiary {
    grid-column: main;
  }
}
@media (min-width: 1164px) {
  .content-kitofuda .title-tertiary {
    grid-column: content;
  }
}

.kitofuda-select {
  grid-column: main;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
@media (min-width: 768px) {
  .kitofuda-select {
    grid-column: content;
  }
}
.kitofuda-select .card {
  flex-basis: 100%;
  display: flex;
  gap: 10px;
  padding: 24px 16px 24px 8px;
}
.kitofuda-select .card img {
  grid-area: image;
  justify-self: center;
  align-self: flex-end;
  width: 135px;
  -o-object-fit: contain;
     object-fit: contain;
}
.kitofuda-select .card .kf-detail {
  width: calc(100% - 99px - 10px);
  background-color: var(--bg04);
}
.kitofuda-select .card .kf-detail .button-form {
  height: 50px;
  -webkit-margin-before: auto;
          margin-block-start: auto;
  padding: 16px 12px;
  font-size: 18px;
}
@media (min-width: 768px) {
  .kitofuda-select .card:is(.kf-xl, .kf-l) {
    padding: 24px 56px 24px 28px;
  }
}
@media (min-width: 1164px) {
  .kitofuda-select .card:is(.kf-xl, .kf-l) {
    flex-basis: calc(50% - 8px);
  }
}
.kitofuda-select .card:is(.kf-xl, .kf-l) img {
  -webkit-margin-after: -20px;
          margin-block-end: -20px;
}
@media (min-width: 768px) {
  .kitofuda-select .card:is(.kf-m, .kf-s, .kf-p) {
    flex-basis: calc(50% - 8px);
    padding: 24px 32px 24px 16px;
  }
}
@media (min-width: 1164px) {
  .kitofuda-select .card:is(.kf-m, .kf-s, .kf-p) {
    flex-basis: calc(33.3333333333% - 11px);
  }
}
.kitofuda-select .card:is(.kf-m, .kf-s, .kf-p) img {
  -webkit-margin-after: -20px;
          margin-block-end: -20px;
}
.kitofuda-select .card.kf-xl img {
  aspect-ratio: 99/334;
}
.kitofuda-select .card.kf-l img {
  aspect-ratio: 99/295;
}
.kitofuda-select .card.kf-m img {
  aspect-ratio: 99/284;
  -webkit-margin-after: -24px;
          margin-block-end: -24px;
}
.kitofuda-select .card.kf-s img {
  aspect-ratio: 15/41;
  -webkit-margin-after: -28px;
          margin-block-end: -28px;
}
.kitofuda-select .card.kf-p img {
  aspect-ratio: 99/208;
  -webkit-margin-after: -20px;
          margin-block-end: -20px;
}
@media (min-width: 768px) {
  .kitofuda-select .card:is(.kf-xl, .kf-l) {
    gap: 24px;
  }
}

.kitofuda-select .card {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.kitofuda-select .card.kf-xl {
  background-image: url(/img/form/kitofuda-bg-xl.jpg);
}
.kitofuda-select .card.kf-l {
  background-image: url(/img/form/kitofuda-bg-l.jpg);
}
.kitofuda-select .card.kf-m {
  background-image: url(/img/form/kitofuda-bg-m.jpg);
}
.kitofuda-select .card.kf-s {
  background-image: url(/img/form/kitofuda-bg-s.jpg);
}
.kitofuda-select .card.kf-p {
  background-image: url(/img/form/kitofuda-bg-p.jpg);
}

.fieldset p:is(.kf-name, .kf-size, .kf-text, .kf-price, .kf-unit) {
  display: block;
}

@media (min-width: 768px) {
  :is(.kf-xl, .kf-l) .detail {
    padding: 40px 16px;
  }
}

.kf-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
}
.kf-name {
  font-size: 22px;
  font-weight: 800;
}
.kf-size {
  font-size: 14px;
}
.kf-text {
  font-size: 14px;
}
.kf-pricetag {
  display: flex;
  align-items: baseline;
}
.kf-price {
  font-size: 32px;
  font-weight: 800;
}
.kf-unit {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
  font-size: 20px;
  font-weight: 800;
}

._apply-kitofuda {
  -webkit-margin-before: 160px;
          margin-block-start: 160px;
}

.kitofuda-detail {
  grid-column: main;
  display: flex;
  flex-direction: column;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
  padding: 40px 16px;
  background-color: var(--bg03);
}
@media (min-width: 768px) {
  .kitofuda-detail {
    grid-column: content;
    padding: 64px 40px;
    box-shadow: 0 12px 24px rgba(var(--shadow), 0.6);
  }
}
.kitofuda-detail .button-container {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
@media (min-width: 768px) {
  .kitofuda-detail .button-container {
    -webkit-margin-before: 120px;
            margin-block-start: 120px;
  }
}

.kitofuda-form .wish {
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
@media (min-width: 768px) {
  .kitofuda-form .wish p {
    display: inline-block;
    width: calc(100% - 272px);
  }
}
.kitofuda-form .wish-search {
  width: 100%;
}
@media (min-width: 768px) {
  .kitofuda-form .wish-search {
    width: 242px;
    -webkit-margin-start: 24px;
            margin-inline-start: 24px;
  }
}
.kitofuda-form .data {
  -webkit-margin-before: 48px;
          margin-block-start: 48px;
}

/*
  preview
================================*/
.kitofuda-select._kf-preview .card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  -moz-column-gap: 16px;
       column-gap: 16px;
  grid-template-areas: "kf-preview kf-detail";
  padding: 24px 16px;
}
@media (min-width: 768px) {
  .kitofuda-select._kf-preview .card {
    -moz-column-gap: 24px;
         column-gap: 24px;
    padding: 24px 56px;
  }
}
@media (min-width: 768px) {
  .kitofuda-select._kf-preview .card:not(.kf-xl) {
    padding-block: 54px;
  }
}
.kitofuda-select._kf-preview .kf-preview {
  grid-area: kf-preview;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-areas: ". wish ." ". name .";
  justify-items: center;
  align-items: start;
}
.kitofuda-select._kf-preview .kf-preview .pview-wish, .kitofuda-select._kf-preview .kf-preview .pview-name {
  font-family: "Yuji Boku", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: inline-block;
}
.kitofuda-select._kf-preview .kf-preview .pview-wish {
  grid-area: wish;
}
.kitofuda-select._kf-preview .kf-preview .pview-name {
  grid-area: name;
  align-self: end;
}
.kitofuda-select._kf-preview .kf-detail {
  grid-area: kf-detail;
  align-self: center;
}
@media (min-width: 1164px) {
  .kitofuda-select._kf-preview .kf-detail {
    padding: 32px;
  }
}
.kitofuda-select._kf-preview .kf-detail .kitofuda-form .wish {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.kitofuda-select._kf-preview .kf-detail .kitofuda-form .data {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.kitofuda-select._kf-preview .kf-detail .kitofuda-form p {
  display: block;
  width: 100%;
  font-size: 18px;
}
.kitofuda-select._kf-preview .kf-detail .kitofuda-form label {
  font-size: 16px;
}
.kitofuda-select._kf-preview .kf-detail .button-form {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 52px;
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
  padding-block: 16px;
  padding-inline: 36px 18px;
  font-size: 18px;
}
.kitofuda-select._kf-preview .kf-detail .button-form._back::before {
  left: 15px;
}
.kitofuda-select._kf-preview .card .kf-detail {
  justify-content: center;
  width: 100%;
  height: 100%;
}
.kitofuda-select._kf-preview .card:is(.kf-xl, .kf-l) {
  flex-basis: 100%;
}
.kitofuda-select._kf-preview .card:is(.kf-xl, .kf-l) .kf-detail {
  height: 378px;
}
@media (min-width: 768px) {
  .kitofuda-select._kf-preview .card:is(.kf-m, .kf-s, .kf-p) {
    flex-basis: 100%;
  }
}
.kitofuda-select._kf-preview .card:is(.kf-m, .kf-s, .kf-p) .kf-detail {
  height: 304px;
}

.kitofuda-select._kf-preview .card:is(.kf-xl, .kf-l, .kf-m, .kf-s, .kf-p) .kf-preview {
  align-self: end;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: contain;
  -webkit-filter: drop-shadow(0px 4px 16px rgba(var(--shadow), 0.65));
          filter: drop-shadow(0px 4px 16px rgba(var(--shadow), 0.65));
  -webkit-filter: drop-shadow(0px 0px 4px rgba(var(--shadow), 0.8));
          filter: drop-shadow(0px 0px 4px rgba(var(--shadow), 0.8));
}
.kitofuda-select._kf-preview .card.kf-xl .kf-preview {
  grid-template-columns: 13px 16px 1fr;
  grid-template-rows: 174px 1fr;
  width: 108px;
  height: 437px;
  background-image: url(/img/form/preview-kf-xl.png);
}
.kitofuda-select._kf-preview .card.kf-xl .kf-preview .pview-wish {
  height: 80px;
  -webkit-margin-start: 94px;
          margin-inline-start: 94px;
  font-size: 16px;
}
.kitofuda-select._kf-preview .card.kf-xl .kf-preview .pview-name {
  -webkit-margin-after: 5px;
          margin-block-end: 5px;
  -webkit-margin-end: 45px;
          margin-inline-end: 45px;
  font-size: 20px;
}
.kitofuda-select._kf-preview .card.kf-l .kf-preview {
  grid-template-columns: 16px 16px 1fr;
  grid-template-rows: 140px 1fr;
  width: 108px;
  height: 356px;
  background-image: url(/img/form/preview-kf-l.png);
}
.kitofuda-select._kf-preview .card.kf-l .kf-preview .pview-wish {
  height: 80px;
  -webkit-margin-start: 64px;
          margin-inline-start: 64px;
  font-size: 13px;
}
.kitofuda-select._kf-preview .card.kf-l .kf-preview .pview-name {
  -webkit-margin-after: 5px;
          margin-block-end: 5px;
  -webkit-margin-end: 35px;
          margin-inline-end: 35px;
  font-size: 15px;
}
.kitofuda-select._kf-preview .card.kf-m .kf-preview {
  grid-template-columns: 14px 15px 1fr;
  grid-template-rows: 100px 1fr;
  width: 90px;
  height: 275px;
  background-image: url(/img/form/preview-kf-m.png);
}
.kitofuda-select._kf-preview .card.kf-m .kf-preview .pview-wish {
  height: 50px;
  -webkit-margin-start: 50px;
          margin-inline-start: 50px;
  font-size: 10px;
}
.kitofuda-select._kf-preview .card.kf-m .kf-preview .pview-name {
  -webkit-margin-after: 4px;
          margin-block-end: 4px;
  -webkit-margin-end: 30px;
          margin-inline-end: 30px;
  font-size: 12px;
}
.kitofuda-select._kf-preview .card.kf-s .kf-preview {
  grid-template-columns: 19px 15px 1fr;
  grid-template-rows: 86px 1fr;
  width: 90px;
  height: 214px;
  background-image: url(/img/form/preview-kf-s.png);
}
.kitofuda-select._kf-preview .card.kf-s .kf-preview .pview-wish {
  height: 44px;
  -webkit-margin-start: 42px;
          margin-inline-start: 42px;
  font-size: 10px;
}
.kitofuda-select._kf-preview .card.kf-s .kf-preview .pview-name {
  -webkit-margin-after: 1px;
          margin-block-end: 1px;
  -webkit-margin-end: 28px;
          margin-inline-end: 28px;
  font-size: 10px;
}
.kitofuda-select._kf-preview .card.kf-p .kf-preview {
  grid-template-columns: 3px 15px 1fr;
  grid-template-rows: 90px 1fr;
  width: 90px;
  height: 226px;
  background-image: url(/img/form/preview-kf-p.png);
}
.kitofuda-select._kf-preview .card.kf-p .kf-preview .pview-wish {
  height: 55px;
  -webkit-margin-start: 35px;
          margin-inline-start: 35px;
  font-size: 11px;
}
.kitofuda-select._kf-preview .card.kf-p .kf-preview .pview-name {
  -webkit-margin-end: 25px;
          margin-inline-end: 25px;
  font-size: 11px;
}

/*
  kitofuda - confirm
================================*/
.kitofuda-container .preview._select {
  background-color: transparent;
}

.kitofuda-form .wish {
  -webkit-margin-before: 24px;
          margin-block-start: 24px;
}
.kitofuda-form .data p {
  flex: 0;
  flex-basis: 50%;
}

/*===============================

  apply - prepare

================================*/
/*
  layout
================================*/
.prepare-container {
  background-color: var(--common);
  border: 1px solid var(--bd03);
}
.prepare-container .thead {
  display: grid;
  grid-template-columns: 1fr 124px;
  grid-template-rows: repeat(3, 38px);
  grid-template-areas: "detail surcharge" "detail number" "detail subtotal";
  background-color: rgba(var(--ink), 0.1);
}
@media (min-width: 768px) {
  .prepare-container .thead {
    grid-template-columns: 224px repeat(4, 1fr);
    grid-template-rows: 38px;
    grid-template-areas: "detail surcharge number subtotal close";
  }
}
@media (min-width: 1164px) {
  .prepare-container .thead {
    grid-template-columns: 480px repeat(4, 1fr);
  }
}
.prepare-container .thead > * {
  align-self: center;
  width: 100%;
  height: 38px;
  font-size: 18px;
  line-height: 38px;
  text-align: center;
}
@media (min-width: 768px) {
  .prepare-container .thead div:not(:first-of-type) {
    -webkit-border-start: 1px solid rgba(var(--ink), 0.1);
            border-inline-start: 1px solid rgba(var(--ink), 0.1);
  }
}
.prepare-container .thead .th-detail {
  grid-area: detail;
  -webkit-border-end: 1px solid rgba(var(--ink), 0.1);
          border-inline-end: 1px solid rgba(var(--ink), 0.1);
}
@media (min-width: 768px) {
  .prepare-container .thead .th-detail {
    border: 0;
  }
}
.prepare-container .thead .th-surcharge {
  grid-area: surcharge;
}
.prepare-container .thead .th-number {
  grid-area: number;
}
.prepare-container .thead .th-subtotal {
  grid-area: subtotal;
}
.prepare-container .thead .th-close {
  grid-area: close;
  display: none;
}
@media (min-width: 768px) {
  .prepare-container .thead .th-close {
    display: block;
  }
}
.prepare-container .tdata:not(:first-of-type) {
  -webkit-border-before: 1px solid var(--bd03);
          border-block-start: 1px solid var(--bd03);
}
.prepare-container .tdata {
  display: grid;
  grid-template-columns: 1fr 124px;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "detail surcharge" "detail number" "detail subtotal" "close close";
  cursor: pointer;
}
@media (min-width: 768px) {
  .prepare-container .tdata {
    grid-template-columns: 224px repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "detail surcharge number subtotal close";
    align-content: space-evenly;
  }
}
@media (min-width: 1164px) {
  .prepare-container .tdata {
    grid-template-columns: 480px repeat(4, 1fr);
  }
}
.prepare-container .tdata + .tdata {
  -webkit-border-before: 1px solid var(--bd03);
          border-block-start: 1px solid var(--bd03);
}
.prepare-container .tdata > * {
  align-self: center;
  width: 100%;
  font-size: 18px;
  text-align: center;
}
@media (min-width: 768px) {
  .prepare-container .tdata > * {
    display: grid;
    place-content: center;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .prepare-container .tdata div:not(:first-of-type) {
    -webkit-border-start: 1px solid rgba(var(--font-rgb), 0.1);
            border-inline-start: 1px solid rgba(var(--font-rgb), 0.1);
  }
}
.prepare-container .tdata .td-detail {
  grid-area: detail;
  place-content: center start;
  height: 100%;
  padding: 8px 16px;
  -webkit-border-end: 1px solid rgba(var(--font-rgb), 0.1);
          border-inline-end: 1px solid rgba(var(--font-rgb), 0.1);
}
@media (min-width: 768px) {
  .prepare-container .tdata .td-detail {
    height: auto;
    padding: 8px;
    border: 0;
  }
}
@media (min-width: 1164px) {
  .prepare-container .tdata .td-detail {
    -webkit-margin-start: 80px;
            margin-inline-start: 80px;
  }
}
.prepare-container .tdata .td-surcharge {
  grid-area: surcharge;
  padding: 8px 16px;
}
.prepare-container .tdata .td-number {
  grid-area: number;
  padding: 8px 16px;
}
.prepare-container .tdata .td-subtotal {
  grid-area: subtotal;
  padding: 8px 16px;
}
.prepare-container .tdata .td-close {
  grid-area: close;
  justify-content: center;
  padding: 16px;
}
@media (min-width: 768px) {
  .prepare-container .tdata .td-close {
    padding: 8px 16px;
  }
}
.prepare-container .total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background-color: transparent;
  -webkit-border-before: 1px solid var(--bd03);
          border-block-start: 1px solid var(--bd03);
}
.prepare-container .total p {
  display: contents;
  font-size: 20px;
  font-weight: 700;
}
.prepare-container .total p .title-apply {
  font-size: 20px;
}
.prepare-container .total p .span-total {
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  font-size: 32px;
}

.button-container._prepare {
  -webkit-margin-before: -40px;
          margin-block-start: -40px;
}
@media (min-width: 768px) {
  .button-container._prepare {
    flex-direction: row;
  }
}

/*
  detail - accordion / summary
*/
.prepare-container .td-detail .product {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .prepare-container .td-detail .product {
    gap: 8px;
  }
}
@media (min-width: 1164px) {
  .prepare-container .td-detail .product {
    gap: 24px;
  }
}
.prepare-container .td-detail .product .image {
  width: 80px;
  background-color: rgba(var(--ink), 0.05);
}
@media (min-width: 768px) {
  .prepare-container .td-detail .product .image {
    width: 108px;
  }
}
.prepare-container .td-detail .product .image img {
  height: 180px;
  margin-inline: auto;
}
.prepare-container .td-detail .product .product-name {
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-border-start: 0;
          border-inline-start: 0;
}
@media (min-width: 1164px) {
  .prepare-container .td-detail .product .product-name {
    flex-direction: row;
    gap: 0;
  }
}
.prepare-container .td-detail .product .product-name .text {
  font-size: 20px;
  text-align: left;
}

/* detail - gomaki */
.tdata._pr-gomaki .product {
  gap: 16px;
}

/* detail - kitofuda */
.tdata._pr-kitofuda .product {
  gap: 8px;
}
@media (min-width: 1164px) {
  .tdata._pr-kitofuda .product {
    gap: 24px;
  }
}

/*
  detail - accordion / details
*/
.accordion-container {
  display: none;
}
.accordion-container._open {
  display: block;
}
.accordion-container .product-contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 24px;
  grid-template-areas: "text" "button";
  min-height: 296px;
  -webkit-margin-start: 32px;
          margin-inline-start: 32px;
  padding: 24px 16px 24px 0;
  -webkit-border-before: 1px dotted rgba(var(--ink), 0.2);
          border-block-start: 1px dotted rgba(var(--ink), 0.2);
}
@media (min-width: 768px) {
  .accordion-container .product-contents {
    grid-template-columns: 152px 1fr;
    gap: 0 32px;
    grid-template-areas: "button text";
    -webkit-margin-start: 40px;
            margin-inline-start: 40px;
  }
}
@media (min-width: 1164px) {
  .accordion-container .product-contents {
    grid-template-columns: 220px 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
.accordion-container .product-contents .product-form {
  grid-area: text;
}
.accordion-container .product-contents .product-button {
  grid-area: button;
  display: grid;
  row-gap: 8px;
}
@media (min-width: 768px) {
  .accordion-container .product-contents .product-button {
    align-self: center;
  }
}

.accordion-container .product-form p {
  font-size: 18px;
  line-height: 1.8;
}
.accordion-container .product-form p::before, .accordion-container .product-form p::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.accordion-container .product-form p::before {
  margin-top: calc((1 - 1.8) * 0.5em);
}
.accordion-container .product-form p::after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.accordion-container .product-form .title {
  position: relative;
  display: flex;
  align-items: baseline;
  -webkit-padding-start: 24px;
          padding-inline-start: 24px;
  font-weight: 800;
}
.accordion-container .product-form .title::before {
  position: absolute;
  content: attr(data-number);
  top: 5px;
  left: 0;
  width: 24px;
  color: currentColor;
  font-size: 22px;
}
.accordion-container .product-form p + p {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
.accordion-container .product-form span {
  display: inline-block;
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

/*===============================

  apply data - input

================================*/
/*
  layout
================================*/
.wrapper._apply._data .page-visual {
  height: auto;
}
.wrapper._apply._data ._fill {
  font-size: clamp(2.125rem, 1.222rem + 3.7vw, 3rem);
}
.wrapper._apply._data .container {
  padding-block: 80px;
}
@media (min-width: 768px) {
  .wrapper._apply._data .container {
    padding-block: 120px;
  }
}
.wrapper._apply._data form {
  display: grid;
  row-gap: 64px;
}
.wrapper._apply._data .content-text {
  font-size: 20px;
}
.wrapper._apply._data .apply-container {
  padding-block: 80px;
}
.wrapper._apply._data .fieldset {
  padding: 40px 20px;
  background-color: rgba(var(--ink), 0.05);
  border: 0;
}
@media (min-width: 768px) {
  .wrapper._apply._data .fieldset {
    padding: 40px 24px;
  }
}
.wrapper._apply._data .title-apply {
  float: left;
  width: 100%;
  font-size: 22px;
  font-weight: 800;
  font-feature-settings: "palt" 1;
}
.wrapper._apply._data .title-apply + * {
  display: flow-root;
}
.wrapper._apply._data ._amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background-color: transparent;
  border: 1px solid var(--bd03);
}
.wrapper._apply._data ._amount p {
  display: contents;
  font-size: 20px;
  font-weight: 700;
}
.wrapper._apply._data ._amount p .title-apply {
  font-size: 20px;
}
.wrapper._apply._data ._amount p .span-total {
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  font-size: 32px;
}
.wrapper._apply._data .inner {
  display: flow-root;
  -webkit-margin-before: 45px;
          margin-block-start: 45px;
  padding: 36px 20px 40px;
  background-color: var(--common);
}
@media (min-width: 768px) {
  .wrapper._apply._data .inner {
    padding: 36px 40px 40px;
  }
}
.wrapper._apply._data .inner p {
  font-size: 20px;
  line-height: 1.5;
}
.wrapper._apply._data .inner p::before, .wrapper._apply._data .inner p::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.wrapper._apply._data .inner p::before {
  margin-top: calc((1 - 1.5) * 0.5em);
}
.wrapper._apply._data .inner p::after {
  margin-bottom: calc((1 - 1.5) * 0.5em);
}
.wrapper._apply._data .inner p + p {
  -webkit-margin-before: 45px;
          margin-block-start: 45px;
}
.wrapper._apply._data .button-container {
  width: min(100%, 940px);
  margin-inline: auto;
}

/*
  step - nav
*/
.step-nav {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
@media (min-width: 768px) {
  .step-nav {
    flex-wrap: nowrap;
  }
}
.step-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  /*align-items: center;*/
  height: 52px;
  font-size: 20px;
  text-align: center;
  background-color: var(--apply01);
}
@media (min-width: 768px) {
  .step-item {
    height: 72px;
  }
}
.step-item._this {
  color: var(--common);
  background-color: var(--apply02);
}
.step-item:first-of-type {
  line-height: 1.2;
}
.step-item:first-of-type::before, .step-item:first-of-type::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.step-item:first-of-type::before {
  margin-top: calc((1 - 1.2) * 0.5em);
}
.step-item:first-of-type::after {
  margin-bottom: calc((1 - 1.2) * 0.5em);
}
@media (min-width: 768px) {
  .step-item:first-of-type {
    flex-direction: column;
  }
}
.step-item:nth-child(-n+2) {
  flex-basis: calc(50% - 8px);
}
@media (min-width: 768px) {
  .step-item:nth-child(-n+2) {
    flex-basis: 20%;
  }
}
.step-item:nth-child(n+3) {
  flex-basis: 33.3333333333%;
}
@media (min-width: 768px) {
  .step-item:nth-child(n+3) {
    flex-basis: 20%;
  }
}
.step-item:not(:first-child):not(:last-child) {
  -webkit-padding-start: 12px;
          padding-inline-start: 12px;
}
.step-item::before, .step-item::after {
  position: absolute;
  content: "";
}
.step-item::before, .step-item:first-of-type::before {
  top: -6px;
  right: -18px;
  z-index: 1;
  background: var(--primary);
  width: 18.8235294118px;
  height: 64px;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (min-width: 768px) {
  .step-item::before, .step-item:first-of-type::before {
    width: 24.7058823529px;
    height: 84px;
    right: -21px;
  }
}
.step-item:first-of-type::before {
  top: -5px;
}
.step-item::after, .step-item:first-of-type::after {
  top: -1px;
  right: -15px;
  z-index: 2;
  background: var(--apply01);
  width: 15.8823529412px;
  height: 54px;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (min-width: 768px) {
  .step-item::after, .step-item:first-of-type::after {
    width: 21.7647058824px;
    height: 74px;
    right: -17px;
  }
}
.step-item:last-of-type::before, .step-item:last-of-type::after {
  content: none;
}
.step-item._this::after {
  background: var(--apply02);
}

/*
  data - input
================================*/
.wrapper._apply._data .content-text {
  font-weight: 700;
}
.wrapper._apply._data ._contact .inner {
  width: 100%;
  -webkit-margin-before: 15px;
          margin-block-start: 15px;
}
.wrapper._apply._data .link {
  display: inline-block;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wrapper._apply._data .link:hover {
  text-decoration: none;
}
.wrapper._apply._data ._name {
  width: min(100%, 462px);
}
.wrapper._apply._data ._zip {
  width: 100%;
}
@media (min-width: 768px) {
  .wrapper._apply._data ._zip {
    width: 130px;
  }
}
.wrapper._apply._data .address-search {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
  font-size: 16px;
}
@media (min-width: 768px) {
  .wrapper._apply._data .address-search {
    width: 130px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-start: 8px;
            margin-inline-start: 8px;
  }
}
.wrapper._apply._data .form-address {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-block: 45px;
}
.wrapper._apply._data .form-address label {
  flex-shrink: 0;
}
/*.wrapper._apply._data .form-address input:last-of-type {
  -webkit-margin-before: 32px;
          margin-block-start: 32px;
}*/
.wrapper._apply._data ._tel {
  width: min(100%, 264px);
}
.wrapper._apply._data .form-checkbox:not(.form-checkbox._clone) {
  -webkit-margin-before: 45px;
          margin-block-start: 45px;
}
.wrapper._apply._data .form-checkbox._clone {
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
}
.wrapper._apply._data input[readonly] { /* !important つけるか？ */
  color: black;
  background-color: var(--bg01);
  box-shadow: none;
}
:is(.wrapper._apply._data ._applicant .email-regist-notice, .wrapper._apply._data ._notice .details) li {
  position: relative;
  -webkit-padding-start: 1.5em;
          padding-inline-start: 1.5em;
  line-height: 1.5;
}
:is(.wrapper._apply._data ._applicant .email-regist-notice, .wrapper._apply._data ._notice .details) li::before {
  content: '\0203B';
  position: absolute;
  inset-inline-start: 0;
}
.wrapper._apply._data ._applicant .mt-1 {
  -webkit-margin-before: 1em !important;
          margin-block-start: 1em !important;
}
.wrapper._apply._data ._applicant .email-regist-notice {
  margin: -.6em 1em 1em 1em;
  font-size: 0.9em;
  line-height: 1.2;
}
.wrapper._apply._data ._notice {
  -webkit-margin-after: 2em;
          margin-block-end: 2em;
}

/*===============================

  apply - shipping

================================*/
/*
  layout
================================*/
.wrapper._apply._data .title-apply._correct {
  width: auto;
}
.wrapper._apply._data .correct {
  clear: none;
  float: left;
  display: block;
  margin-block: 2px 8px;
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
  padding: 8px;
  color: currentColor;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  border: 1px solid;
}
.wrapper._apply._data .applicant-name, .wrapper._apply._data .shipping-name {
  display: contents;
}
.wrapper._apply._data .span-name, .wrapper._apply._data .span-kana, .wrapper._apply._data .ship-name, .wrapper._apply._data .ship-kana {
  display: inline-block;
}
.wrapper._apply._data .span-kana, .wrapper._apply._data .ship-kana {
  margin-inline: 6px;
}
.wrapper._apply._data ._applicant .span-zip, .wrapper._apply._data ._applicant .span-address, .wrapper._apply._data ._applicant .ship-zip, .wrapper._apply._data ._applicant .ship-address, .wrapper._apply._data .shipping .span-zip, .wrapper._apply._data .shipping .span-address, .wrapper._apply._data .shipping .ship-zip, .wrapper._apply._data .shipping .ship-address {
  display: inline-block;
  font-size: 20px;
}
.wrapper._apply._data ._applicant .span-address, .wrapper._apply._data ._applicant .ship-address, .wrapper._apply._data .shipping .span-address, .wrapper._apply._data .shipping .ship-address {
  margin-inline: 6px;
}
.wrapper._apply._data .form-checkbox label {
  font-size: 20px;
}
.wrapper._apply._data fieldset:disabled .inner > *:not(._clone) {
  color: rgba(var(--font-rgb), 0.5);
}
@media (min-width: 768px) {
  .wrapper._apply._data ._method p {
    flex-direction: row;
  }
}
.wrapper._apply._data ._method p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wrapper._apply._data ._method p a:hover {
  text-decoration: none;
}
.wrapper._apply._data ._method label {
  display: block;
  width: auto;
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
  font-size: 20px;
}
@media (min-width: 768px) {
  .wrapper._apply._data ._method label {
    display: inline-block;
  }
}
.wrapper._apply._data ._method > span {
  display: block;
}
@media (min-width: 768px) {
  .wrapper._apply._data ._method > span {
    display: inline-block;
  }
}

/*===============================

  apply 07 - complete

================================*/
/*
  layout
================================*/
.wrapper._apply._data .order-number {
  display: inline-block;
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
}
.wrapper._apply._data .text-sub {
  -webkit-margin-before: -32px;
          margin-block-start: -32px;
  font-size: 16px;
}
.wrapper._apply._data ._complete .inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.wrapper._apply._data ._complete .inner .detail {
  font-size: 20px;
}
.wrapper._apply._data ._complete .inner .detail:first-of-type label {
  -webkit-margin-after: 18px;
          margin-block-end: 18px;
}
.wrapper._apply._data ._complete .inner .detail p {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.wrapper._apply._data ._complete .inner .detail p span {
  display: inline-block;
}
.wrapper._apply._data ._complete .inner .detail p + p {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}
.wrapper._apply._data ._complete .inner .detail label {
  -webkit-margin-after: 24px;
          margin-block-end: 24px;
  font-size: 20px;
  font-weight: 700;
}
.wrapper._apply._data ._complete .inner .detail .address .span-address, .wrapper._apply._data ._complete .inner .detail .applicant-name .span-address {
  -webkit-margin-start: 15px;
          margin-inline-start: 15px;
}
.wrapper._apply._data ._complete .inner .detail .span-card, .wrapper._apply._data ._complete .inner .detail .span-cardnumber, .wrapper._apply._data ._complete .inner .detail .span-total {
  display: inline-block;
}

/** バナー追加 */
.banner-youtube {
  display: flex;
  flex-direction: column;
}
.banner-youtube-lead {
  background-color: var(--f-button02);
  background-clip: padding-box;
  border-style: groove;
  border-color: var(--f-button03);
  border-width: 0em;
  padding: 0.2em 0.5em;
  font-weight: bold;
  text-align: center;
  color: white;
  font-size: 1.2em;
}
.banner-youtube-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
@media(max-width:640px) {
  .banner-youtube-link {
    flex-direction: column;
  }
}
.banner-youtube-link img {
  transition: all 0.2s;
}
.banner-youtube-link img:hover {
  opacity: 0.7;
}

/** /バナー追加 */

/*===============================

  CSS end

================================*/