@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
///// 全ページ共通CSS ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* ==================================================
FONT SETTING
================================================== */

html {
  font-size: 2.97vw;
  scroll-behavior: smooth;
  scroll-padding-top: 13.5vw;
}
@media screen and (min-width: 769px) {
  html {
    font-size: 2.47vw;
    scroll-padding-top: 60px;
  }
}
@media screen and (min-width: 961px) {
  html {
    font-size: 1.35vw;
  }
}
@media screen and (min-width: 1281px) {
  html {
    font-size: 17px;
  }
}

body {
  /*ゴシック系*/
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  background: #ffffff;
  line-height: 1.7;
  -ms-font-feature-settings: "normal";
  font-feature-settings: "palt";
  overflow-x: hidden;
}
.enSerif {
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
}
.enGothic {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.jpSerif {
  font-family: "游明朝", "Yu Mincho", YuMincho, serif;
  font-weight: 400;
  font-style: normal;
}
.jpSerif.fwBold {
  font-weight: 700;
}
.pagerTxt,
.mbTitle {
  line-height: 0.9;
  letter-spacing: -0.05em;
}
:root {
  --XsTxt: 2.2vw;
  --STxt: 2.564vw;
  --MTxt: 3.077vw;
  --S-MTxt: 3.077vw;
  --LTxt: 3.59vw;
  --STitle: 3.59vw;
  --MTitle: 4.359vw;
  --LTitle: 4.359vw;
  --StrongTitle: 4.359vw;
  --headerTxt: 5.128vw;
  --headerTxtS: 3.077vw;
}
@media screen and (min-width: 769px) {
  :root {
    --XsTxt: 1.15vw;
    --STxt: 1.042vw;
    --MTxt: 1.25vw;
    --S-MTxt: 1.458vw;
    --LTxt: 1.563vw;
    --STitle: 1.667vw;
    --MTitle: 1.875vw;
    --LTitle: 2.083vw;
    --StrongTitle: 3.125vw;
    --headerTxt: 2.083vw;
    --headerTxtS: 1.25vw;
  }
}
@media screen and (min-width: 961px) {
  :root {
    --XsTxt: 1.04vw;
    --STxt: 0.781vw;
    --MTxt: 0.938vw;
    --S-MTxt: 1.094vw;
    --LTxt: 1.172vw;
    --STitle: 1.25vw;
    --MTitle: 1.406vw;
    --LTitle: 1.563vw;
    --StrongTitle: 2.344vw;
    --headerTxt: 1.563vw;
    --headerTxtS: 0.938vw;
  }
}
.XsTxt {
  font-size: clamp(8px, var(--XsTxt), 13px);
}
.STxt {
  font-size: clamp(10px, var(--STxt), 10px);
}
.MTxt {
  font-size: clamp(12px, var(--MTxt), 12px);
}
.S-MTxt {
  font-size: clamp(12px, var(--S-MTxt), 14px);
}
.LTxt {
  font-size: clamp(14px, var(--LTxt), 15px);
}
.STitle {
  font-size: clamp(14px, var(--STitle), 16px);
}
.MTitle {
  font-size: clamp(17px, var(--MTitle), 18px);
}
.LTitle {
  font-size: clamp(17px, var(--LTitle), 20px);
}
.StrongTitle {
  font-size: clamp(17px, var(--StrongTitle), 30px);
}
.fwBold {
  font-weight: 600;
}
.headerTxt {
  font-size: clamp(16px, var(--headerTxt), 18px);
}
.headerTxtS {
  font-size: clamp(12px, var(--headerTxtS), 12px);
}
@media screen and (min-width: 961px) {
  .pcFBig {
    font-size: 120%;
  }
}

/* ==================================================
color
================================================== */

:root {
  --clr-def: #000000;
  --clr-wh: #ffffff;
  --clr-base: #2a332e;
  --clr-line: #e0e0e0;
  --clr-gr: #7c7c7c;
}
body {
  color: var(--clr-def);
}
.mainColor {
  color: var(--clr-def);
}
.attention {
  color: #a80028;
}
.clr-gr {
  color: var(--clr-gr);
}

/* ==================================================
link
 ================================================== */

a:link {
  color: var(--clr-def);
  text-decoration: underline;
}
a:visited {
  color: var(--clr-def);
  text-decoration: underline;
}
a:active {
  color: var(--clr-def);
  text-decoration: underline;
}
/* ==================================================
common
================================================== */

svg {
  fill: var(--clr-def);
}

input {
  -webkit-appearance: none;
}

.scrollArrow span {
  width: 1px;
}

.js-appSlidein {
  transition:
    transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-nowPage {
  position: relative;
}

.js-nowPage::after {
  content: "";
  display: none;
  background: #000;
  width: 70%;
  height: 1px;
  position: absolute;
  bottom: 5px;
  left: 8vw;
}
@media screen and (min-width: 769px) {
  .js-nowPage::after {
    left: 4vw;
  }
}

@media screen and (min-width: 961px) {
  .js-nowPage::after {
    bottom: -5px;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
  }
}

@media screen and (min-width: 1281px) {
  .menuOnline {
    display: none;
  }
}

/* ==================================================
BtnSet
================================================== */

.btnObj {
}
.btnObj a {
}
.btnObj svg {
}
.btnObj.mainBtn {
}

@media screen and (min-width: 769px) {
}

@media screen and (min-width: 961px) {
}

/* ==================================================
header
================================================== */
#hdrSct {
  height: 13.5vw;
  position: fixed;
  z-index: 1020;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#hdrSct.hdrBgActive {
}
#hdrSct::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--clr-base);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#hdrSct.hdrBgActive::before {
  transition: opacity 0.4s ease;
  opacity: 1;
}

#hdrSct div.logoArea {
  padding: 0 0 0 min(5vw, 40px);
}

#hdrSct div.logoArea a {
  width: 100%;
  height: 100%;
}

#hdrSct div.logoArea a h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#hdrSct div.logoArea h1 svg {
  height: min(10vw, 128px);
  aspect-ratio: 100 / 87;
  display: block;
  fill: #5a1e0f;
}

#hdrSct .menuArea {
  margin: 0 5vw 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-flow: wrap;
  width: 56%;
}

#hdrSct .menuArea .cartObj {
  margin: 0 min(10%, 30px) 0 0;
  height: 100%;
  width: min(8.8%, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#hdrSct .menuArea .cartObj a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.1em;
}
#hdrSct .menuArea .cartObj a img {
}

#hdrSct .menuArea .mainMenuSet {
  width: 100%;
  height: 100vh;
  background: var(--clr-base);
  position: fixed;
  top: 0;
  right: -100vw;
  opacity: 0;
  z-index: -1;
  overflow-y: auto;
  text-align: left;
  box-sizing: border-box;
}

.js-spMenuOn #hdrSct .menuArea .mainMenuSet {
  right: 0;
  opacity: 1;
  transition: 0.3s opacity ease;
}

#hdrSct .menuArea .mainMenuSet .mainMenuLists {
  padding: 3em 5vw 0 8vw;
  border-top: 1px solid var(--clr-wh);
  margin: 13.5vw 0 0;
}

#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList {
  margin: 0 0 1.2em 0;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList.prdList {
  padding-left: 1em;
  margin: 0 0 0.75em;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList a {
  color: var(--clr-wh);
  text-decoration: none;
}

#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList.home {
  margin: 0 0 3em 0;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList.topics {
  margin-top: 3em;
}

#hdrSct .menuArea .subMenuSet {
  margin: 0;
  padding: 2em 5vw 12em 8vw;
}

#hdrSct .menuArea .subMenuSet .subMenuLists {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList {
  margin: 0 2em 0 0;
}
#hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList a {
  color: var(--clr-wh);
  text-decoration: none;
}

#hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList + .subMenuList {
}
#hdrSct .menuArea .subMenuSet .btnObj {
  margin: 4em auto 0;
}
#hdrSct .menuArea .subMenuSet .btnObj a {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  background: var(--clr-def);
  color: var(--clr-wh);
  text-decoration: none;
  padding: 1.5em 0;
  line-height: 1;
}
#hdrSct .menuArea .subMenuSet .btnObj a .icon {
  margin: 0 1.5em 0 0;
  width: 1.2em;
  height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hdrSct .menuArea .subMenuSet .btnObj a p {
}

#hdrSct .menuArea .subMenuSet .snsMenuLists {
  margin: 3em 0 0;
  display: flex;
  flex-flow: row;
  align-items: center;
}
#hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList {
  margin: 0 2em 0 0;
}
#hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList + .snsMenuList {
}
#hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList a {
}

#hdrSct .menuArea .js-menuHmbrgr {
  margin: 0;
  z-index: 100;
  position: relative;
  right: 0;
  order: 3;
}

#hdrSct .hdrContactArea .btnScrllFllw {
  position: fixed;
  bottom: -30vw;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.js-menuAppear #hdrSct .hdrContactArea .btnScrllFllw {
  bottom: 10vw;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.js-menuAppear #hdrSct .hdrContactArea .btnScrllFllw.js-btnScrolling {
  bottom: -30vw;
  transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.emmrBlk {
  display: none;
  height: 2em;
}
.emmrOn .emmrBlk {
  display: block;
}
.emmrOn #hdrSct {
  top: 2em;
}
.emmrOn #cntsSct {
  padding-top: 19.5vw;
}
.popupTxtBlk {
  background: #5a1e0f;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.popupTxtBlk p {
  cursor: pointer;
  padding: 0.5em 0 0;
  color: #fff;
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  #hdrSct {
    height: min(7.5vw, 96px);
    height: 60px;
  }
  #hdrSct div.logoArea h1 svg {
    height: min(6vw, 76.8px);
  }
  #hdrSct .menuArea {
    margin: 0 30px 0 auto;
  }

  #hdrSct .menuArea .mainMenuSet {
    width: min(100%, 400px);
  }

  #hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList.home {
    margin: 0 0 2em 0;
  }
  #hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList {
    margin: 0 0 1em 0;
  }
  #hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList.topics {
    margin-top: 2em;
  }

  #hdrSct .menuArea .subMenuSet {
    margin: 0;
    padding: 0 3vw;
  }

  #hdrSct .menuArea .subMenuSet .subMenuLists {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList {
    margin: 0 2em 0 0;
  }
  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList a {
    color: var(--clr-wh);
    text-decoration: none;
  }

  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList + .subMenuList {
  }
  #hdrSct .menuArea .subMenuSet .btnObj {
    margin: 2em auto 0;
  }
  #hdrSct .menuArea .subMenuSet .btnObj a {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    background: var(--clr-def);
    color: var(--clr-wh);
    text-decoration: none;
    padding: 1.2em 0;
    line-height: 1;
  }
  #hdrSct .menuArea .subMenuSet .btnObj a .icon {
    margin: 0 1em 0 0;
  }
  #hdrSct .menuArea .subMenuSet .btnObj a p {
  }

  #hdrSct .menuArea .subMenuSet .snsMenuLists {
    margin: 3em 0 0;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  #hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList {
    margin: 0 2em 0 0;
  }
  #hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList + .snsMenuList {
  }
  #hdrSct .menuArea .subMenuSet .snsMenuLists .snsMenuList a {
  }
}
@media screen and (min-width: 961px) {
  #hdrSct .menuArea .mainMenuSet .mainMenuLists {
    padding: 3em 3vw 2em;
    margin: 60px 0 0;
  }
  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList {
    margin: 0 2.5vw 0 0;
  }
  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList .btnLine,
  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList .btnIg {
    width: 2.4vw;
    height: 2.4vw;
  }
  #hdrSct .menuArea .subMenuSet .subMenuLists .subMenuList figure.iconCart svg {
    width: 2.5vw;
    height: 2.5vw;
  }
  .emmrOn #cntsSct {
    padding-top: min(10vw, 128px);
  }
  .popupTxtBlk p {
    padding: 0.2em 0 0;
  }
}

/* ==================================================
humberger-menu animation
================================================== */
.js-menuHmbrgr {
  width: 6.5vw;
  height: 16px;
}

.js-menuTrggr {
  position: relative;
  width: 100%;
  height: 100%;
}

.js-menuTrggr,
.js-menuTrggr span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}
.js-menuTrggr {
  position: absolute;
  left: 0;
  top: 0;
}
.js-menuTrggr span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--clr-wh);
}

.js-menuTrggr span:nth-of-type(1) {
  top: calc(50% - 7px);
}

.js-menuTrggr span:nth-of-type(2) {
  top: calc(50% - 1px);
}

.js-menuTrggr span:nth-of-type(3) {
  bottom: calc(50% - 7px);
}

.js-menuTrggr span:nth-of-type(1) {
  animation: menu-bar01 0.75s forwards;
}

@keyframes menu-bar01 {
  0% {
    transform: translateY(6px) rotate(45deg);
  }

  50% {
    transform: translateY(-6px) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-menuTrggr span:nth-of-type(2) {
  transition: all 0.25s 0.25s;
  opacity: 1;
}

.js-menuTrggr span:nth-of-type(3) {
  animation: menu-bar02 0.75s forwards;
}

@keyframes menu-bar02 {
  0% {
    transform: translateY(-6px) rotate(-45deg);
  }

  50% {
    transform: translateY(6px) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(1) {
  animation: active-menu-bar01 0.75s forwards;
}

@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-6px) rotate(0);
  }

  100% {
    transform: translateY(6px) rotate(45deg);
  }
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(2) {
  opacity: 0;
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(3) {
  animation: active-menu-bar03 0.75s forwards;
}

@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(6px) rotate(0);
  }

  100% {
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media screen and (min-width: 769px) {
  .js-menuHmbrgr {
    width: 4.1vw;
    height: 22px;
  }

  .js-menuTrggr span {
    height: 1px;
  }

  .js-menuTrggr span:nth-of-type(1) {
    top: calc(50% - 10px);
  }

  .js-menuTrggr span:nth-of-type(2) {
    top: 50%;
  }

  .js-menuTrggr span:nth-of-type(3) {
    bottom: calc(50% - 10px);
  }

  .js-menuTrggr span:nth-of-type(1) {
    animation: menu-bar01 0.75s forwards;
  }

  @keyframes menu-bar01 {
    0% {
      transform: translateY(9px) rotate(45deg);
    }

    50% {
      transform: translateY(-9px) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(0);
    }
  }

  .js-menuTrggr span:nth-of-type(3) {
    animation: menu-bar02 0.75s forwards;
  }

  @keyframes menu-bar02 {
    0% {
      transform: translateY(-9px) rotate(-45deg);
    }

    50% {
      transform: translateY(9px) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(0);
    }
  }

  .js-spMenuOn .js-menuTrggr span:nth-of-type(1) {
    animation: active-menu-bar01 0.75s forwards;
  }

  @keyframes active-menu-bar01 {
    0% {
      transform: translateY(0) rotate(0);
    }

    50% {
      transform: translateY(-9px) rotate(0);
    }

    100% {
      transform: translateY(9px) rotate(45deg);
    }
  }

  .js-spMenuOn .js-menuTrggr span:nth-of-type(3) {
    animation: active-menu-bar03 0.75s forwards;
  }

  @keyframes active-menu-bar03 {
    0% {
      transform: translateY(0) rotate(0);
    }

    50% {
      transform: translateY(9px) rotate(0);
    }

    100% {
      transform: translateY(-9px) rotate(-45deg);
    }
  }
}
@media screen and (min-width: 961px) {
  .js-menuHmbrgr {
    width: 2.5vw;
  }
}

/* ==================================================
footer
================================================== */
#FtrSct {
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  background: var(--clr-base);
  padding: 6% 0 0;
}
#FtrSct a {
  text-decoration: none;
  color: var(--clr-wh);
}
#FtrSct .FtrMenuArea {
  padding: 4em 6%;
  background: var(--clr-base);
  display: flex;
  align-items: flex-start;
  flex-flow: wrap;
  border-top: 1px solid var(--clr-wh);
  border-bottom: 1px solid var(--clr-wh);
}

#FtrSct .FtrMenuArea .FtrNaviLists {
  width: 65%;
  padding: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#FtrSct .FtrMenuArea .FtrNaviLists .FMANaviList {
  text-align: left;
  width: 50%;
  line-height: 1;
  margin: 0 0 0.5em;
}
#FtrSct .FtrMenuArea .FtrSnsLists {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0 0 0 auto;
}
#FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList {
  width: min(14%, 30px);
}
#FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList a {
}
#FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList + .FtrSnsList {
  margin: 0 0 0 15%;
}

#FtrSct .ftrCpGlp {
  position: relative;
  padding: 10% 0 25vh;
  overflow: hidden;
}
#FtrSct .ftrCpGlp .copyright {
  position: relative;
  z-index: 10;
  color: var(--clr-wh);
  letter-spacing: 0.05em;
}
#FtrSct .ftrCpGlp .logoObj {
  position: relative;
  z-index: 10;
  width: min(90%, 700px);
  margin: 10% auto 0;
}
#FtrSct .ftrCpGlp .bgBlk {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#FtrSct .ftrCpGlp .bgBlk .bgObj {
}
#FtrSct .ftrCpGlp .bgBlk .bgObj img {
}

@media screen and (min-width: 769px) {
  #FtrSct {
    padding: 30px 0 0;
  }
  #FtrSct .FtrMenuArea {
    padding: 80px max(5vw, calc(45% - 600px));
  }
  #FtrSct .FtrMenuArea .FtrNaviLists {
    width: min(50%, 360px);
    margin: 0 auto 0 0;
    justify-content: flex-start;
  }
  #FtrSct .FtrMenuArea .FtrNaviLists .FMANaviList {
    margin: 0;
  }
  #FtrSct .FtrMenuArea .FtrSnsLists {
    width: 20%;
  }
  #FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList {
    width: min(10%, 18px);
  }
  #FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList a {
  }
  #FtrSct .FtrMenuArea .FtrSnsLists .FtrSnsList + .FtrSnsList {
    margin: 0 0 0 15px;
  }

  #FtrSct .ftrCpGlp {
    padding: 50px 0 220px;
  }
  #FtrSct .ftrCpGlp .copyright {
  }
  #FtrSct .ftrCpGlp .logoObj {
    margin: 5% auto 0;
  }
  #FtrSct .ftrCpGlp .bgBlk {
    height: 100%;
    width: 100%;
  }
  #FtrSct .ftrCpGlp .bgBlk .bgObj {
    width: 100%;
    height: 100%;
    display: block;
  }
  #FtrSct .ftrCpGlp .bgBlk .bgObj img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ===========================
popup
=============================*/
.popupArea {
  position: fixed;
  inset: 0;
  background: rgba(42, 51, 46, 0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 0 0;
  display: flex; /* flexは維持 */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
.popupArea.active {
  opacity: 1;
  visibility: visible;
}
.popupArea .popWrap {
  background: #fff;
  padding: 0;
  /* max-height: 85vh; */
  width: min(95vw, 850px);
  border-radius: 0;
  position: relative;
  z-index: 2;
  transform: translateY(-30px);
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  /* overflow-y: scroll; */
  max-height: 80svh;
}
.popupArea[data-size="small"] .popWrap {
  width: min(95vw, 560px);
  padding: 0;
}

.popupArea.active .popWrap {
  transform: translateY(0);
  opacity: 1;
}
.popupArea .popupSet {
  max-height: 80svh;
  overflow-y: scroll;
  padding: 40px 2.5% 40px;
  box-sizing: border-box;
}
.popupCnt {
  display: none;
}
/* 閉じるボタン */
.js-popupCloseBtn {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 100;
  width: 25px;
  height: 25px;
  right: 0;
  top: -40px;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-popupCloseBtn::before,
.js-popupCloseBtn::after {
  content: "";
  position: absolute;
  right: 0;
  background: var(--clr-wh);
  padding: 0;
  border-radius: 0;
  z-index: 100;
  width: 100%;
  height: 1px;
  transform: translate(0, -50%) rotate(45deg);
  top: 50%;
}
.js-popupCloseBtn::after {
  transform: translate(0, -50%) rotate(-45deg);
}
@media screen and (min-width: 769px) {
  .popupArea {
  }
  .popupArea.active {
  }
  .popupArea .popWrap {
    padding: 0;
  }

  .popupArea.active .popWrap {
  }
  .popupArea .popupSet {
    padding: 80px 5%;
  }
  .popupArea[data-size="small"] .popupSet {
    padding: 40px 10% 20px;
  }

  /* 閉じるボタン */
  .js-popupCloseBtn {
  }
  .js-popupCloseBtn::before,
  .js-popupCloseBtn::after {
  }
}

body.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
  touch-action: none; /* スマホのスワイプ無効 */
}

/* ==================================================
swiper
================================================== */

.slideTypeA .swiper-pagination {
  width: 90%;
  margin: 5% auto 0; /* 中央寄せ */
  display: flex;
  justify-content: space-between;
  position: relative;
  bottom: 0;
  top: 0;
}
.slideTypeA .swiper-pagination span.swiper-pagination-bullet {
  flex: 1; /* 均等幅 */
  height: 12px; /* 線の太さ */
  background: none; /* 黒いライン */
  border-radius: 0; /* 角丸なし */
  opacity: 1; /* 非アクティブは薄め */
  margin: 0 3%; /* 線の間隔 */
  transition: opacity 0.3s;
  position: relative;
}

.slideTypeA .swiper-pagination span.swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.2;
}
.slideTypeA .swiper-pagination span.swiper-pagination-bullet-active::before {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .slideTypeA .swiper-pagination {
    width: min(60%, 400px);
    margin-top: 12px;
  }
  .slideTypeA .swiper-pagination span.swiper-pagination-bullet {
    width: 120px !important;
  }
}

/* ==================================================
slidebar
================================================== */
.horizontal-scroll {
  width: 100%;
  overflow-x: auto; /* 横方向にスクロール */
  overflow-y: hidden; /* 縦は不要 */
  white-space: nowrap; /* 横並び */
  max-width: 100%;

  /* スマホでスムーズにフリック操作できるように */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x; /* 横スクロール専用 */
}

.simplebar-track.simplebar-horizontal {
  height: 12px;
  background: none;
  width: 90%;
  margin: 0;
  cursor: pointer;
}
.simplebar-track.simplebar-horizontal::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--clr-line);
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  background: #000;
  height: 2px;
  top: calc(50% - 1px);
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .simplebar-track.simplebar-horizontal {
    width: 95%;
  }
  .simplebar-content-wrapper {
    cursor: grab;
  }
  .simplebar-content-wrapper.dragging {
    cursor: grabbing;
  }
}

.lowerPage {
}
.lowerPage .mainArea {
  /* padding-top: min(10vw, 128px); */
}
.lowerPage .breadLists {
  display: flex;
  width: 90%;
  margin: 1em auto 2em;
}
.lowerPage .breadLists .breadList {
}
.lowerPage .breadLists .breadList + .breadList {
  margin-left: 1em;
}
.lowerPage .breadLists .breadList + .breadList::before {
  content: ">";
  margin: 0 1em 0 0;
}
.lowerPage .ttlGlp {
  border-bottom: 1px solid var(--clr-line);
  padding: 0 0 10%;
}
.lowerPage .ttlGlp .ttlObj {
}
@media screen and (min-width: 769px) {
  .lowerPage {
  }
  .lowerPage .mainArea {
    padding-top: min(10vw, 90px);
  }
  .lowerPage .ttlGlp {
    padding: 0 0 80px;
  }
  .lowerPage .breadLists {
  }
  .lowerPage .breadLists .breadList {
  }
  .lowerPage .breadLists .breadList + .breadList {
  }
  .lowerPage .breadLists .breadList + .breadList::before {
  }

  .lowerPage .ttlGlp .ttlObj {
  }
}