@charset "UTF-8";
/*----------------------------------------------
  案内
----------------------------------------------*/
#annai {
  background-position: 0 600px, right 1218px;
  padding-bottom: 140px;
}
#annai .boxHead {
  display: flex;
  flex-direction: row-reverse;
  padding-top: 28px;
  padding: 28px 0 12px;
  gap: 0 46px;
}
#annai .boxHead h1 {
  flex: 0 0 auto;
}
#annai .boxHead .photo {
  margin-top: 32px;
  flex: 0 0 auto;
}
#annai .boxHead .photo img {
  border-radius: 6px;
  overflow: hidden;
}
#annai .message {
  text-align: center;
}
#annai .boxIn {
  margin-top: 68px;
  padding-bottom: 20px;
  font-size: 1.7rem;
}
#annai .boxIn dl {
  margin-left: 0;
  margin-right: 45px;
  width: calc(50% - 45px);
}
#annai .boxIn dl:first-of-type {
  margin-left: 45px;
  margin-right: 0;
}
#annai .boxIn dl.long {
  width: auto;
  margin-inline: 45px;
}
#annai .boxIn dl dt {
  padding: 5px 10px;
}
#annai .boxIn dl dd {
  padding-bottom: 30px;
}
#annai .map {
  background-color: #fff;
  border: 1px solid var(--line);
  max-width: 1080px;
  height: 480px;
  margin: 50px auto 0;
  position: relative;
}
#annai .map iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.btnExpand {
  display: none;
  margin-top: 8px;
  width: 120px;
}
.btnExpand a {
  background-color: #BEA45D;
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  border-radius: 10px;
  text-align: center;
  font-size: 1.7rem;
  color: #fff;
}
.btnExpand a img {
  rotate: -35deg;
}
@media screen and (max-width: 767px) {
  #annai {
    padding-bottom: 60px;
  }
  #annai .boxBody {
    width: 100%;
  }
  #annai .boxHead {
    width: 89.3333%;
    margin: 0 auto;
    gap: 0 8.3582%;
    padding-top: 10px;
  }
  #annai .boxHead .photo {
    width: 65.6716%;
    margin-top: 8px;
  }
  #annai .message {
    width: 92%;
    margin: 0 auto;
  }
  .btnExpand {
    display: block;
  }
  #annai .boxIn {
    margin-top: 40px;
    max-width: none;
    width: 90.6667%;
  }
  #annai .boxIn h2 {
    padding: 12px 15px;
    margin-bottom: 30px;
    font-size: 1.8rem;
  }
  #annai .boxIn dl {
    margin-right: 0;
    padding: 0 15px;
    width: 100%;
  }
  #annai .boxIn dl:first-of-type {
    margin-left: 0;
  }
  #annai .boxIn dl.long {
    margin-inline: 0;
  }
  #annai .boxIn dl dd span {
    display: inline-block;
  }
  #annai .boxIn dl.long dd {
    padding-bottom: 0;
  }
  #annai .map {
    width: 90.6667%;
    margin-top: 30px;
  }
}
/*----------------------------------------------
  優書会とは
----------------------------------------------*/
.voice01 {
  width: 100%;
  height: 1068px;
  background: #fff url(../img/voice-main-bg.webp) no-repeat center / cover;
  text-align: center;
}
.voiceList {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0 50px;
  margin: 80px 0;
  padding: 64px 0;
  background: url(../img/voicelist-bg01.webp) repeat-x center / auto 100%;
  position: relative;
}
.voiceList::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(50% + 470px);
  top: -95px;
  width: 195px;
  aspect-ratio: 391 / 370;
  background: url(../img/panda01.webp) no-repeat center / contain;
}
.voiceList li {
  flex: 0 0 auto;
  width: 300px;
  position: relative;
  border: 4px solid #E4DACE;
  background: #F4F0EB url(../img/voice-bg.webp) no-repeat center / 100% auto;
  justify-content: center;
  align-items: center;
  padding: 30px 14px 30px 18px;
}
.voiceList li::before,
.voiceList li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 22px;
  width: 34px;
  height: 2px;
  background-color: #b7a99d;
  rotate: -45deg;
}
.voiceList li::after {
  left: auto;
  top: auto;
  right: 2px;
  bottom: 24px;
}
.voiceList li img {
  max-width: 100%;
  width: 253px;
  height: auto;
}
.voiceList02,
.voiceList06,
.voiceList10 {
  background-image: url(../img/voicelist-bg02.webp);
}
.voiceList03,
.voiceList07 {
  background-image: url(../img/voicelist-bg03.webp);
}
.voiceList04,
.voiceList08 {
  background-image: url(../img/voicelist-bg04.webp);
}
.voiceList02::before,
.voiceList06::before,
.voiceList10::before {
  background-image: url(../img/panda02.webp);
  width: 336px;
  aspect-ratio: 336 / 288;
  left: auto;
  top: auto;
  right: calc(50% + 240px);
  bottom: 50%;
  translate: 0 50%;
}
.voiceList02::after,
.voiceList06::after {
  content: "";
  display: block;
  flex: 0 0 300px;
}
.voiceList03::before,
.voiceList07::before {
  background-image: url(../img/panda03.webp);
  width: 150px;
  aspect-ratio: 300 / 288;
  top: auto;
  bottom: -24px;
  left: calc(50% + 540px);
  translate: 0 0;
}
.voiceList04::before,
.voiceList08::before {
  background-image: url(../img/panda04.webp);
  aspect-ratio: 394 / 372;
  width: 197px;
  position: absolute;
  left: auto;
  right: calc(50% + 530px);
  top: -148px;
}
.voiceList06::before {
  right: 50%;
  translate: 50% 50%;
}
.voiceList10::before {
  width: 262px;
  right: calc(50% + 476px);
  bottom: auto;
  top: -165px;
  translate: 0 0;
}
.voiceList06 > li:last-of-type {
  order: 1;
}
@media screen and (max-width: 767px) {
  .voice01 {
    height: auto;
    background-image: url(../img/voice-main-bg-sp.webp);
  }
  .voice01 + .btnExpand {
    margin-top: 0;
    margin-left: 4.6667%;
  }
  .voiceList {
    flex-direction: column;
    gap: 20px 0;
    padding: 42px 0 38px;
    margin: 60px auto;
    width: 92%;
    background-repeat: repeat;
    background-size: auto 550px;
  }
  .voiceList::before {
    width: 31.8841%;
    max-width: 110px;
    left: auto;
    right: 5.5072%;
    top: max(-62px, -16.5333vw);
  }
  .voiceList li {
    width: 92.7536%;
    padding: 36px 17px;
    text-align: center;
  }
  .voiceList li::before {
    left: 2px;
    top: 28px;
  }
  .voiceList li::after {
    bottom: 28px;
  }
  .voiceList li img {
    width: 97.1223%;
  }
  .voiceList01 {
    margin-top: 46px;
    gap: 30px 0;
  }
  .voices > ul:nth-of-type(n+5) {
    padding-bottom: 50px;
  }
  .voiceList02::before,
  .voiceList06::before {
    width: 50.4348%;
    max-width: 174px;
    right: 50%;
    top: auto;
    translate: 50% 50%;
  }
  .voiceList02::after {
    flex-basis: 24.5333vw;
    width: 100%;
  }
  .voiceList02 li:last-of-type {
    order: 1;
    position: relative;
    z-index: 1;
  }
  .voiceList03::before, .voiceList07::before {
    width: 27.8261%;
    max-width: 96px;
    right: 10.7246%;
    top: max(-50px, -13.3333vw);
    bottom: auto;
  }
  .voiceList04::before, .voiceList08::before {
    width: 39.1304%;
    max-width: 135px;
    right: auto;
    left: 3.7681%;
    top: auto;
    bottom: 100%;
    translate: 0 30%;
  }
  .voiceList06::before {
    translate: 50% 0;
    bottom: 0;
  }
  .voiceList06::after {
    flex-basis: 21.3333vw;
    width: 100%;
  }
  .voiceList06 li:last-of-type {
    order: 0;
  }
  .voices ul.voiceList07 {
    padding-bottom: 45px;
  }
  .voiceList08::before {
    left: auto;
    right: 10.7246%;
  }
  .voiceList09::before {
    max-width: 153px;
    width: 44.3478%;
    right: auto;
    left: 3.7681%;
    top: max(-95px, -25.3333vw);
  }
  .voiceList10::before {
    width: 50.4348%;
    max-width: 174px;
    top: max(-98px, -26.1333vw);
    right: 50%;
    translate: 50% 0;
  }
}
/*----------------------------------------------
  書道サロン優書会について
----------------------------------------------*/
main > .btn1:last-child {
  width: 480px;
  margin: 80px auto 145px;
}
main > .btn1:last-child a {
  justify-content: center;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.6;
  font-weight: 700;
  padding: 27px 0;
  height: auto;
}
@media screen and (max-width: 767px) {
  main > .btn1:last-child {
    width: 90.6667%;
    margin: 48px auto 80px;
  }
  main > .btn1:last-child a {
    padding: 17px 28px;
    font-size: min(1.6rem, 4.4444vw);
    line-height: 1.5;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  main > .btn1:last-child a::after {
    right: 18px;
  }
}