@charset "utf-8";
/*
Theme Name: 書道研究手毬會
Description: 
Author: Sonicgrow×COSMICGEAR
Version: 1.0
*/
/*-root*/ :root {
  --head-h: 90px;
  --base-fnt: 'Zen Kaku Gothic New', sans-serif;
  --fnt-serif: 'Zen Old Mincho', serif;
  --fnt-crim: 'Crimson Pro', var(--base-fnt);
  --fc-base: #1A1A1A;
  --head2: min(42px, calc(100vw/16.25));
  --head2_title: min(35px, calc(100vw/18.25));
  --head3: min(24px, calc(100vw/22.8));
  --clr-org: #DE6316;
  --clr-blue: #1A45A3;
  --clr-olv: #9D8360;
  --clr-gry: #838383;
  --clr-grn: #1AA31A;
  --clr-ppl: #631AA3;
  --clr-red: #B52124;
  --wall-base: #FBFAF9;
  --wall-beg: #F7F1EA;
  --wall-grn: #A0D3B4;
  --wall-org: #E89765;
  --wall-bwn: #7F6644;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .3s var(--easing);
}
/*base=====*/
html {
  scroll-behavior: auto;
}
html, body {
  overscroll-behavior: none;
}
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--base-fnt);
  font-size: min(3.6vw, 16px);
  color: var(--fc-base);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 400;
  transition: opacity .6s var(--easing);
  background-color: var(--wall-base);
  opacity: 0;
}
body.is-load {
  opacity: 1;
}
.fnt-gth {
  font-family: var(--fnt-gth);
}
.fnt-crim {
  font-family: var(--fnt-crim);
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl.jc_c {
  justify-content: center;
}
.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.fl_c.ai_c {
  -ms-align-items: center;
  align-items: center;
}
figure {
  margin-bottom: 0 !important;
}
/*container
========================================================*/
#container {
  width: 100%;
  min-height: 100dvh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}
a.cvr {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/*hum
=====================================*/
#hum-button {
  position: fixed;
  top: 10px;
  right: 10px;
  width: min(40px, 10vw);
  aspect-ratio: 1;
  z-index: calc(infinity);
  cursor: pointer;
  display: none;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-blue);
  border-radius: 100vmax;
  color: #fff;
}
#hum-button button {
  width: 50%;
  height: 1px;
  background-color: currentColor;
  position: relative;
  transition: transform var(--transit);
}
#hum-button button::before, #hum-button button::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  background-color: currentColor;
  transition: transform var(--transit);
  transform-origin: center;
}
#hum-button button::before {
  top: -6px;
}
#hum-button button::after {
  bottom: -6px;
}
#hum-button.open button {
  transform: rotate(-45deg);
}
#hum-button.open button::before, #hum-button.open button::after {
  top: 0;
  bottom: auto;
}
#hum-button.open button::before, #hum-button.open button::after {
  transform: rotate(-90deg);
}
#l-nav {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all var(--transit);
  -o-transition: all var(--transit);
  transition: all var(--transit);
  overflow-y: scroll;
  background-color: var(--wall-base);
}
#l-nav.is-view {
  opacity: 1;
  visibility: visible;
}
.l-nav_inner {
  width: 100%;
  min-height: 100%;
  padding: min(100px, 25vw) min(35px, 8vw) min(50px, 12vw);
  display: grid;
  grid-template-columns: min(700px, 100%);
  justify-content: center;
  align-content: flex-start;
  gap: min(60px, 15vw);
  font-size: min(18px, calc(100vw/21.6667));
  font-family: var(--fnt-serif);
}
.l-nani__menu > li {
  border-bottom: 1px solid var(--clr-olv);
  padding-bottom: 10px;
}
.l-nani__menu > li:nth-child(n+2) {
  padding-top: 10px;
}
.l-nani__menu > li > a {
  font-size: min(24px, calc(100vw/16.25));
  line-height: calc(36/24);
  --arw-clr: #fff;
  display: grid;
  grid-template-columns: 1fr 1.4em;
  -ms-align-items: center;
  align-items: center;
  gap: 5px;
}
.l-nani__menu > li > a .arw {
  aspect-ratio: 1;
  background-color: var(--wall-org);
  display: grid;
  grid-template-columns: 45%;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 100vmax;
}
.l-nani__menu > li .nav-child {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 1.3em;
}
.l-nani__menu > li .nav-child a {
  --arw-clr: var(--wall-org);
  line-height: calc(21/18);
  padding: 5px 0;
  display: grid;
  grid-template-columns: 1fr .7em;
  -ms-align-items: center;
  align-items: center;
}
.l-nav__button {
  gap: min(20px, 5vw);
}
.l-nav__button .round-arw-button {
  width: min(320px, 100%);
}
.l-nav__button .round-arw-button a {
  text-align: left;
  padding-left: 3em;
}
.l-nav__button .round-arw-button a .icn {
  position: absolute;
  width: 1em;
  left: 1.25em;
  top: 50%;
  translate: 0 -50%;
  fill: currentColor;
}
/*header
=====================================*/
header {
  width: 100%;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: background var(--transit);
  font-family: var(--fnt-serif);
}
header.is-scl {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
header.nav-open {
  box-shadow: none;
}
.index-head_inner {
  display: grid;
  grid-template-columns: 1fr;
  padding: min(30px, 4vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.h-title, .head__button {
  position: absolute;
}
.h-title {
  font-weight: 500;
  left: min(30px, 4vw);
  /*  top: min(30px,4vw);*/
  top: 50%;
  translate: 0 -50%;
}
.h-title a {
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  pointer-events: auto;
  gap: 5px;
  letter-spacing: .01em;
  text-indent: .01em;
}
.h-title .ja {
  font-weight: 600;
  font-size: min(24px, 5vw);
}
.h-title .en {
  font-size: min(12.5px, 2.5vw);
  font-family: var(--fnt-crim);
}
.header__nav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  gap: min(60px, 5vw);
}
.header__nav a {
  pointer-events: auto;
  font-weight: 500;
  letter-spacing: .07em;
  text-indent: .07em;
  padding-bottom: .85em;
}
.header__nav a::after {
  content: "";
  width: 4px;
  aspect-ratio: 1;
  background-color: var(--clr-org);
  border-radius: 100vmax;
  position: absolute;
  left: 50%;
  bottom: 0;
  scale: 0;
  transition: scale var(--transit);
}
.header__nav a.current::after {
  scale: 1;
}
.head__button {
  display: grid;
  grid-template-columns: repeat(2, 6em);
  translate: 0 1em;
  right: min(30px, 4vw);
  top: min(30px, 4vw);
}
.head__button a {
  display: grid;
  grid-template-columns: auto;
  place-content: center;
  place-items: center;
  color: #fff;
  gap: .5em;
  pointer-events: auto;
}
.head__button a::before {
  content: "";
  width: calc(100% + 1em);
  aspect-ratio: 1;
  background-color: var(--btn-wall);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 100vmax;
  pointer-events: none;
  transition: scale var(--transit);
}
.head__button a .icon {
  width: min(27px, 10vw);
}
.head__button a .icon svg {
  fill: currentColor;
}
.head__button .link-contact {
  --btn-wall: var(--clr-org);
}
.head__button .link-member {
  --btn-wall: var(--clr-blue);
  translate: 0 30%;
}
@media(hover) {
  .header__nav a:hover::after {
    scale: 1;
  }
  .head__button a:hover::before {
    scale: 1.1;
  }
}
/*main
=====================================*/
main {
  flex: 1;
}
.inner {
  width: min(1300px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
}
.inner.w-mid {
  width: min(1380px, 100%);
}
.pos-pic {
  pointer-events: none;
  position: absolute;
}
/*#hero
============================*/
#hero {}
.hero-main {
  padding-top: var(--head-h);
  padding-left: min(30px, 4vw);
  padding-right: min(30px, 4vw);
}
.hero-main__inner {}
.hero-img__main {
  width: min(1110px, 100%);
}
.hero-img__main img {
  z-index: 2;
}
.hero-img__main::before {
  content: "";
  position: absolute;
  height: 100%;
  aspect-ratio: 1/0.64;
  top: 0;
  left: 50%;
  translate: -50% 0;
  background-image: url("images/index/hero_wall.png"), url("images/index/hero_wall.png");
  background-position: left bottom, right top;
  background-size: auto 95%;
  background-repeat: no-repeat;
}
.hero-img__main::after {
  content: "";
  width: min(277px, 18vw);
  aspect-ratio: 1;
  background-image: url("images/treat/ball_red.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}
#hero .pic__grn-ball {
  width: min(415px, 50vw);
  z-index: 1;
  right: 0;
  bottom: 0;
  translate: 40% -20%;
}
.hero-title-wrap {
  position: absolute;
  left: 0;
  top: 25%;
  z-index: 4;
  font-family: var(--fnt-serif);
}
.hero-title-wrap::before {
  content: "";
  width: min(300px, 30vw);
  aspect-ratio: 1/0.8614;
  background-image: url("images/treat/ccl_org.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
  translate: -45% -45%;
}
.hero-title-wrap::after {
  content: "";
  width: min(150px, 15vw);
  aspect-ratio: 1;
  background-image: url("images/treat/ball_grn.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  translate: 50% -120%;
}
.hero-title {
  font-size: min(64px, calc(100vw/12));
  letter-spacing: .15em;
  line-height: calc(96/64);
  /*  font-weight: 500;*/
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
}
.hero-lead {
  font-size: min(24px, calc(100vw/25));
  letter-spacing: .12em;
  padding-left: 1.5em;
  text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, .15);
  line-height: calc(28/ 16);
}
.hero-lead::before {
  content: "";
  width: .85em;
  height: 2px;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 1em;
}
/* layout settings*/
.box-thumb-detail {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap: min(70px, 12vw);
  counter-reset: num 0;
}
.item-thumb-detail {
  display: grid;
  grid-template-columns: min(535px, 45%) auto;
  gap: min(50px, 12vw) min(60px, 10vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.item-thumb-detail .thumb-area .pos-pic {
  z-index: 1;
}
.item-thumb-detail:nth-child(even) {
  grid-template-columns: auto min(535px, 45%);
}
.item-thumb-detail:nth-child(even) .thumb-area {
  grid-area: 1/2;
}
.item-thumb-detail .comment-area {
  padding-top: min(60px, 4.5vw);
  padding-bottom: min(60px, 4.5vw);
  margin-top: min(80px, 10vw);
}
.item-thumb-detail .comment-area::before, .item-thumb-detail .comment-area::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  z-index: -1;
}
.item-thumb-detail .comment-area::before {
  background-color: var(--wall-beg);
}
.item-thumb-detail .comment-area::after {
  background-image: url(images/wall/noise.png);
  background-repeat: repeat;
  background-size: 70%;
  opacity: .5;
  mix-blend-mode: overlay;
}
.item-thumb-detail:nth-child(odd) .comment-area::before, .item-thumb-detail:nth-child(odd) .comment-area::after {
  border-radius: 100vmax 0 0 100vmax;
  left: 0;
  translate: max(-200px, -15vw);
}
.item-thumb-detail:nth-child(even) .comment-area::before, .item-thumb-detail:nth-child(even) .comment-area::after {
  border-radius: 0 100vmax 100vmax 0;
  right: 0;
  translate: min(200px, 15vw);
}
.item-thumb-detail .comment-area .in-title {
  font-family: var(--fnt-serif);
  font-weight: 500;
  line-height: calc(21/18);
  font-size: var(--head3);
  padding-left: 2em;
}
.item-thumb-detail .comment-area .in-title::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero)'.';
  color: var(--wall-org);
  font-size: 1.1667em;
  padding-right: .25em;
  position: absolute;
  left: 0;
  top: -.1em;
}
.item-thumb-detail .comment-area .lead-text {
  margin-top: min(20px, 5vw);
}
.item-thumb-detail .comment-area .link-list {
  margin-top: min(20px, 5vw);
}
/*#index content 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.index-contents {
  padding-top: min(120px, 15vw);
  padding-bottom: min(120px, 15vw);
}
.lead-text {
  font-kerning: none;
  line-height: calc(32/16);
}
.in-text {
  font-kerning: none;
  line-height: calc(28/16);
}
.tl-cnt {
  text-align: center;
}
/*button settings*/
.button-wrap {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.button-wrap.cnt {
  -ms-align-items: center;
  align-items: center;
}
.arrow-button {
  display: flex;
  justify-content: flex-start;
}
.arrow-button.l-end {
  justify-content: flex-end;
}
.arrow-button a {
  display: grid;
  grid-template-columns: auto min(3.9375em, 9vw);
  -ms-align-items: center;
  align-items: center;
  gap: 1.25em;
}
.arrow-button a .txt {
  white-space: nowrap;
}
.arrow-button .arw {
  --arw-clr: #fff;
  --hvr-arw: var(--clr-org);
  --arw-wall: var(--wall-org);
  --hvr-wall: #fff;
  aspect-ratio: 1;
  border-radius: 100vmax;
  background-color: var(--arw-wall);
  display: grid;
  grid-template-columns: 1em;
  place-content: center;
  fill: var(--arw-clr);
  transition: all var(--transit);
}
/*round button*/
.round-button {
  width: min(265px, 100%);
  height: min(52px, 11vw);
}
.round-button a {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  --bdr-clr: var(--wall-org);
  --txt-clr: currentColor;
  color: var(--txt-clr);
  border-radius: 100vmax;
  border: 1px solid var(--bdr-clr);
  transition: all var(--transit);
}
@media(hover) {
  .round-button a:hover {
    background-color: var(--bdr-clr);
    --txt-clr: #fff;
  }
}
.round-arw-button {
  width: min(295px, 100%);
  height: min(56px, 12vw);
}
.round-arw-button a {
  --wall-clr: var(--wall-org);
  --txt-clr: #fff;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.625em;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  gap: min(10px, 2.5vw);
  background-color: var(--wall-clr);
  color: var(--txt-clr);
  border-radius: 100vmax;
  transition: all var(--transit);
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.round-arw-button.org a {
  --wall-clr: var(--clr-org);
  --txt-clr: #fff;
}
.round-arw-button.blue a {
  --wall-clr: var(--clr-blue);
  --txt-clr: #fff;
}
.round-arw-button a .arw, .round-arw-button.inp > div .arw {
  display: grid;
  grid-template-columns: 45%;
  place-content: center;
  aspect-ratio: 1;
  background-color: currentColor;
  border-radius: 100vmax;
  transition: all var(--transit);
}
.round-arw-button a .arw svg, .round-arw-button.inp > div .arw svg {
  fill: var(--wall-clr);
}
.round-arw-button.inp > div {
  --wall-clr: var(--wall-org);
  --txt-clr: #fff;
  width: 100%;
  height: 100%;
  background-color: var(--wall-clr);
  color: var(--txt-clr);
  border-radius: 100vmax;
  transition: all var(--transit);
}
.round-arw-button.inp > div input {
  height: 100%;
  width: 100%;
}
.round-arw-button.inp > div .arw {
  position: absolute;
  width: 1.625em;
  top: 50%;
  right: 1em;
  translate: 0 -50%;
}
@media(hover) {
  .arrow-button a:hover .arw {
    --arw-clr: var(--hvr-arw);
    --arw-wall: var(--hvr-wall);
  }
  .round-arw-button a:hover {
    background-color: var(--txt-clr);
    color: var(--wall-clr);
    /*
    --wall-clr:#fff;
    --txt-clr:var(--wall-org);
*/
  }
  .round-arw-button a:hover .arw svg, .round-arw-button.inp > div:hover .arw svg {
    fill: var(--txt-clr);
  }
}
/*title settings*/
.sec-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
  letter-spacing: .073em;
  text-indent: .073em;
  font-weight: 500;
  font-family: var(--fnt-serif);
}
.sec-title .main {
  font-size: var(--head2);
}
.sec-title .en {
  font-size: min(22px, 3.6vw);
  color: var(--clr-olv);
}
.sec-title.lf {
  -ms-align-items: flex-start;
  align-items: flex-start;
}
/*thumb sdw*/
.sdw-thumb picture {
  width: 100%;
  border-radius: min(20px, 2.5vw);
  overflow: hidden;
  isolation: isolate;
  display: inline-block;
}
.sdw-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: min(20px, 2.5vw);
  background-color: var(--sdw-clr);
}
.sdw-thumb.grn::before {
  --sdw-clr: var(--wall-grn);
}
.sdw-thumb.sdw-lf {
  rotate: -5deg;
}
.sdw-thumb.sdw-lf::before {
  rotate: -5deg;
  translate: -5% 2.5%;
}
.sdw-thumb.sdw-rt {
  rotate: 5deg;
}
.sdw-thumb.sdw-rt::before {
  rotate: 5deg;
  translate: 5% 2.5%;
}
.sdw-thumb.org::before {
  --sdw-clr: var(--wall-org);
}
.sdw-thumb.rct-hor {
  rotate: none;
}
.sdw-thumb.rct-hor::before {
  rotate: none;
}
.sdw-thumb.rct-hor.sdw-lf::before {
  translate: -10px 10px;
}
.sdw-thumb.rct-hor.sdw-rt::before {
  translate: 10px 10px;
}
/*wall settings*/
.wall-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/wall/noise.png");
  background-repeat: repeat;
  background-size: 70%;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/*index message +++++++++++++++++++++++++*/
.index-message-blc {
  padding-bottom: min(120px, 15vw);
}
.box-index_message {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap: min(60px, 5vw);
  margin-top: min(60px, 5vw);
  font-family: var(--fnt-serif);
}
.pic-message-lf {
  width: min(280px, 20vw);
  left: 0;
  bottom: 50%;
  translate: -5% 50%;
}
.pic-message-lf::after, #toggle-message figure.pic-snd::after {
  content: "";
  width: 30%;
  aspect-ratio: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url("images/treat/ball_blue.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  translate: 40% 50%;
}
#toggle-message figure.pic-snd::after {
  width: 18%;
}
.pic-message-rt {
  right: min(25px, 2vw);
  top: 0;
  width: min(235px, 15vw);
}
.pic-message-rt::after, #toggle-message figure.pic-fst::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 84%;
  aspect-ratio: 1/0.9371;
  background-image: url("images/treat/set-ball_rpk.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  translate: 25% 80%;
}
#toggle-message figure.pic-fst::after {
  width: 35%;
  translate: 45% 35%;
}
#toggle-message {
  overflow: hidden;
}
#toggle-message > * + * {
  margin-top: min(20px, 5vw);
}
#toggle-message p {
  font-kerning: none;
  line-height: calc(32 / 16);
}
#toggle-message .in-thumb {
  width: min(75%, 70vw);
  margin-left: auto;
  margin-right: auto;
  display: none;
}
.js-board-open {
  width: min(145px, 33vw);
  grid-template-columns: auto 1.5625em;
  text-align: left;
  font-size: 1em;
  font-family: var(--base-fnt);
  display: none;
}
.box-index_message {
  text-align: center;
}
.js-board-open .icn {
  border-radius: 100vmax;
  aspect-ratio: 1;
  background-color: var(--wall-org);
}
.js-board-open .icn::before, .js-board-open .icn::after {
  content: "";
  width: 44%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.js-board-open .icn::after {
  transition: rotate var(--transit);
  rotate: 90deg;
}
.js-board-open.is-open .icn::after {
  rotate: 0deg;
}
/*index information +++++++++++++++++++++++++*/
.box-index_info {
  display: grid;
  grid-template-columns: min(220px, 35%) auto;
  grid-template-rows: auto 1fr;
  background-color: var(--wall-beg);
  padding: min(80px, 5vw) min(80px, 5vw) min(20px, 5vw);
  gap: min(40px, 3vw) min(100px, 5vw);
  border-radius: min(20px, 5.3vw);
  overflow: hidden;
}
.box-index_info .arrow-button {
  grid-area: 2/1;
}
.box-index_info .index-info-archive {
  grid-row: span 3;
}
.box-index_info .pic {
  grid-area: 3/1;
  display: grid;
  grid-template-columns: min(190px, 70%);
  justify-content: flex-end;
}
/*post-item*/
.idx-post-item {
  border-bottom: 1px solid var(--clr-olv);
  padding-bottom: min(15px, 3vw);
  display: grid;
  grid-template-columns: 45% auto;
  gap: 10px min(20px, 4vw);
  line-height: calc(24/14);
  -ms-align-items: center;
  align-items: center;
}
.idx-post-item:nth-child(n+2) {
  padding-top: min(15px, 3vw);
}
.idx-post-item .post-data {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}
.idx-post-item .post-title {
  padding-left: min(20px, 4vw);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-left: 1px solid var(--clr-olv);
}
/*category*/
.post-data .category {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px;
}
.post-data .category span {
  border: 1px solid currentcolor;
  font-size: min(14px, 3.4vw);
  border-radius: 100vmax;
  padding: .35em .75em;
  background-color: #fff;
  color: var(--cate-clr);
  line-height: 1;
}
.category span.cate-info {
  --cate-clr: var(--clr-org);
}
.category span.cate-pupils-works {
  --cate-clr: var(--clr-grn);
}
.category span.cate-instructor-works {
  --cate-clr: var(--clr-blue);
}
.category span.cate-child {
  --cate-clr: var(--clr-ppl);
}
.category span.cate-adult {
  --cate-clr: var(--clr-red);
}
/*index slider +++++++++++++++++++++++++*/
.index-slide-blc {
  margin-top: min(120px, 10vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  overflow: hidden;
}
.infinity-slider {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  animation: infinity-scroll-left 85s infinite linear 0.5s both;
}
.infinity-slider li{
  width: min(544px, calc(100vw/2));
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
/*index Teaching +++++++++++++++++++++++++*/
.index-teaching-blc {
  margin-top: min(120px, 10vw);
}
.box-teaching-detail {
  margin-top: min(60px, 5vw);
}
.pic-teach01 {
  width: 40%;
  bottom: 0;
  right: 0;
  translate: 20% 25%;
}
.pic-teach02 {
  width: min(85px, 12vw);
  bottom: 0;
  left: 0;
  rotate: -45deg;
  translate: -50% 10%;
}
.pic-teach03 {
  width: 40%;
  bottom: 0;
  left: 0;
  scale: -1 1;
  translate: -30% 60%;
}
/*index Instructor +++++++++++++++++++++++++*/
.index-instructor-blc {
  margin-top: min(120px, 10vw);
}
.box-index-instructor {
  padding: min(80px, 10vw) min(80px, 4vw);
  background-color: var(--wall-beg);
  border-radius: min(20px, 5.3vw);
  overflow: hidden;
}
.box-index-instructor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: min(40px, 5vw);
}
.item-intra-profile {
  display: grid;
  grid-template-columns: min(228px, 35%) auto;
  gap: min(60px, 5vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.box-index-instructor .item-intra-profile {
  gap: min(40px, 5vw);
}
.item-intra-profile .thumb {
  border-radius: min(20px, 5vw);
  overflow: hidden;
  isolation: isolate;
}
.item-intra-profile .prof-name {
  border-bottom: 1px solid var(--clr-olv);
  padding-bottom: min(20px, 4vw);
  font-family: var(--fnt-serif);
  line-height: calc(36/20);
}
.item-intra-profile .prof-name .name {}
.item-intra-profile .prof-name .name span {
  font-size: 1.25em;
}
.item-intra-profile .prof-comment {
  padding-top: min(20px, 4vw);
}
.item-intra-profile .prof-comment dt {
  font-family: var(--fnt-serif);
  font-size: min(20px, 4.2vw);
}
.item-intra-profile .prof-comment dd {
  margin-top: 10px;
}
.item-intra-profile .prof-comment .arrow-button {
  margin-top: min(40px, 5.3vw);
}
.pic-intra01 {
  width: min(182px, 26vw);
  top: 65%;
  left: 0;
  translate: 50% 0;
}
/*index Corse +++++++++++++++++++++++++*/
.index-course-blc {
  margin-top: min(120px, 10vw);
}
.box-index-course {
  margin-top: min(40px, 5vw);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(40px, 10vw) min(60px, 5vw);
}
.item-index-course {
  display: grid;
  grid-template-rows: subgrid;
  grid-area: span 3;
  gap: min(40px, 4vw);
  padding-bottom: min(40px, 4vw);
}
.item-index-course .thumb {
  border-radius: min(20px, 5vw) min(20px, 5vw) 0 0;
  overflow: hidden;
  isolation: isolate;
}
.item-index-course .comment, .item-index-course .button-wrap {
  padding-left: min(40px, 4vw);
  padding-right: min(40px, 4vw);
}
.item-index-course .comment .in-title {
  font-size: var(--head3);
  font-family: var(--fnt-serif);
}
.item-index-course .comment .in-title span {
  color: var(--wall-org);
  font-size: 1.1667em;
  padding-right: .25em;
}
.item-index-course .lead-text {
  margin-top: min(20px, 3vw);
}
.item-index-course::before, .item-index-course::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.item-index-course::before {
  background-color: var(--wall-beg);
  border-radius: min(20px, 5vw);
}
.item-index-course::after {
  background-image: url(images/wall/noise.png);
  background-repeat: repeat;
  background-size: 70%;
  opacity: .5;
  mix-blend-mode: overlay;
}
.item-index-course .pos-pic {
  z-index: 1;
}
.pic-idx-crse01 {
  width: min(200px, 25vw);
  top: 0;
  left: 0;
  translate: max(-25%, -4vw) -20%;
}
.pic-idx-crse02 {
  width: min(86px, 12vw);
  top: 50%;
  right: 0;
  translate: min(40%, 4vw) -50%;
}
/*index Inquiry +++++++++++++++++++++++++*/
.sec-inquiry-blc {
  margin-top: min(120px, 10vw);
  display: grid;
  grid-template-columns: auto min(470px, 50%);
  gap: min(40px, 5vw) min(50px, 5vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.sec-inquiry-blc .pic-inq {
  width: min(160px, 25vw);
  bottom: 0;
  left: 0;
  translate: min(50px, 4vw) 20%;
  rotate: 15deg;
}
.sec-inquiry-blc .sec-title {
  grid-column: span 2;
}
.item-inquiry-button {
  border-radius: min(20px, 5vw);
  background-color: var(--wall-beg);
  overflow: hidden;
  padding: min(60px, 10vw) min(20px, 3vw);
  gap: min(20px, 2.5vw);
}
.item-inquiry-button .in-title {
  font-size: var(--head3);
  display: grid;
  grid-template-columns: 1.2em auto;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
  font-family: var(--fnt-serif);
}
.item-inquiry-button .in-title svg {
  fill: var(--clr-org);
}
/*footer
=====================================*/
footer {
  background-color: var(--clr-olv);
  background-image: url("images/wall/asanoha.png");
  background-repeat: repeat;
  background-size: min(125px, calc(100vw/5));
  background-position: center;
  color: #fff;
  padding-top: min(60px, 10vw);
  font-family: var(--fnt-serif);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  padding-bottom: min(60px, 10vw);
}
.ft-title {
  font-size: min(22px, calc(100vw/17));
  display: grid;
  grid-template-columns: auto;
  place-content: center;
  place-items: center;
  gap: 5px;
}
.ft-title .ja {
  font-size: min(42px, calc(100vw/15));
}
.ft-title .en {
  font-family: var(--fnt-crim);
  font-size: min(16px, calc(100vw/25));
}
.foot__about .address {
  line-height: calc(24/16);
  margin-top: min(20px, 4vw);
  font-family: var(--base-fnt);
}
.foot__nav {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 2em 3em;
}
footer p.copy {
  text-align: center;
  font-size: min(14px, 3.4vw);
  font-family: var(--base-fnt);
  background-color: var(--wall-bwn);
  padding: min(20px, 4vw);
}