@charset "utf-8";

/* ----------------------------------------------------
base setting
---------------------------------------------------- */
body {
  font-size:var(--fs-18);
  letter-spacing: 0.1rem;
}

#wrapper {
  margin: 0 auto;
  position: relative;
}

/* ----------------------------------------------------
animation
---------------------------------------------------- */
.js-scroll-fade {opacity: 0;transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform;}
.js-scroll-fade.is-active {opacity: 1; transform: translate(0, 0) scale(1);}

.fadeUp {transform: translateY(30px);}
.fadeLeft { transform: translateX(-30px);}
.fadeRight {transform: translateX(30px);}
.zoomIn { transform: scale(0.95);}

/* ----------------------------------------------------
element base setting
---------------------------------------------------- */
h1, h2, h3, h4, h5, h6, table, ul, ol, p, dl { font-size: 100%; margin: 0;}

ul {list-style: none;}
dd { margin: 0;}
table, ul, ol, p, dl { margin-bottom: 1em;}

header :is(table, ul, ol, p, dl),
footer :is(table, ul, ol, p, dl) {
  margin-bottom: 0;
}

/* link  */
.clickable { cursor: pointer;}

@media (min-width:781px) { /* PC + tablet */
  .sp, .pcNoDisplay, #ftSlideBlock {
    display: none !important;
  }
  a[href^="tel:"] {
    cursor: default;
  }
  a:hover[href^="tel:"] {
    text-decoration: none;
  }
  a.telNum {
    color: inherit;
  }
}

@media (max-width: 780px) {
  /*  sp */
  .pc, .spNoDisplay {
    display: none;
  }
  .sp, .pcNoDisplay {
    display: block !important;
  }
  a:hover {
    text-decoration: none !important;
  }
}


/* ----------------------------------------------------
 calendar
---------------------------------------------------- */
/* table reset */
div.cal_wrapper {
  margin: 0;
}
div.cal_wrapper table, 
div.cal_wrapper table tbody,
div.cal_wrapper th,
div.cal_wrapper td {
  display: block !important;
  width: 100%;
  text-align: center;
}
div.cal_wrapper tr{
  display: flex;
  justify-content: space-between;
}

/* month prev next */
div.cal_wrapper tr:first-child th {
  position: relative;
  padding-bottom: var(--space-16);
}
div.cal_wrapper .cal_ui {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
}
div.cal_wrapper .cal_ui input {
  border: none;
}
div.cal_wrapper .cal_ui input:nth-child(2) {
  width: 7em;
  border: none;
  background:none;
  text-indent: -9999px;
  overflow: hidden;
}
div.cal_wrapper .cal_ui input:not(:nth-child(2)) {
  cursor: pointer;
}

/* day */
div.cal_wrapper td > div {
  aspect-ratio: 1/1;
  display: flex; 
  align-items: center;
  justify-content: center;
  position: relative;
}
div.cal_wrapper td > div span {
  position: absolute;
  top: var(--space-24);
  left: 0px;
  display: none;
  width: 8em;
  border: solid 1px #EEE;
  background-color: #FFF;
  text-align: left;
  padding: 5px;
  z-index: 10;
  color: #000;
  font-weight: normal;
  line-height: 1.5;
  box-shadow: 1px 1px 3px #666;
}
div.cal_wrapper td > div.backward {
  font-weight: normal;
  opacity: 0.5;
}
div.cal_wrapper td > div.pointer {
  cursor: pointer;
}

/* 凡例 */
.cal-txt {
  font-size: var(--fs-fix-14);
  margin: var(--space-16) 0 0;
}


/* ----------------------------------------------------
topicPath 
---------------------------------------------------- */
ol.topicPath {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-fix-12);
  margin-inline:auto;
  font-size: var(--fs-fix-12);
}
ol.topicPath li {
  position: relative;
}
ol.topicPath li:not(:first-child) {
  padding: 0 0 0 var(--space-16);
  position: relative;
}
ol.topicPath li:not(:first-child)::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  rotate: 45deg;
}
ol.topicPath li a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------
    heading
----------------------------------------------------- */
.heading-num span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.3;
}

.grdTitle :is(h3, h4) {margin-top: 0;}
.flexColCont :is(h3, h4):first-child {margin-top: 0;}
.dec-block :is(h3, h4):first-of-type { margin-top: 0;}
.dec-block :is(p, div, ul, dl, ol, table):last-child { margin-bottom: 0 !important;}

/* --------------------------------------------------
text
----------------------------------------------------- */
.strongB { font-size: 1.2em;}
.fontS {font-size: 0.8em;}

/* --------------------------------------------------
link
----------------------------------------------------- */
.link-tel {
  position: relative;
  font-weight: 600;
  padding-left: 1.5em;
  text-decoration: none;
}

.link-tel::before {
  content: "phone";
  font-family:var(--ff-symbol);
  font-variation-settings: 'FILL' 1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 1.25em;
}

#main a:not([class]),
.link-external {
  text-decoration: underline;
}
#main a:not([class]):hover{
  text-decoration: none;
}
.link-external {
  position: relative;
}
.link-external::after {
  content: "open_in_new";
  font-family:var(--ff-symbol);
  vertical-align: middle; 
}
.link-arrow {
  position: relative;
  text-decoration: none;
  font-weight: 600;
}
.link-arrow__L::before,
.link-arrow__R::after{
  content: "\f591";
  font-family: var(--ff-symbol);
  color: var(--c-main);
  font-size: 1.5em;
  font-variation-settings: 'FILL' 1;
  vertical-align: middle;
  font-weight: normal;
}

.btn {
  display: block;
  position: relative;
}
.btn::before {
  content:"";
  width: var(--space-fix-12);
  aspect-ratio: 1/1;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  right: var(--space-20);
  top: 50%;
  translate: 0 -50%;
  rotate: 45deg;
}
.btn--center{
  margin-inline: auto;
}

.btn--S::before{
  width: var(--space-fix-8);
  right: var(--space-16);
}
.btn.link-external {
  text-decoration: none;
}
.btn.link-external::before{
  content: none;
}
.btn.link-external::after{
  right: 1em;
  font-weight: normal;
  position: absolute;
}
.btn.btn--S.link-external::after{
  right: 0.6em;
}

/* --------------------------------------------------
list
----------------------------------------------------- */
.list li {position: relative;}

.list-dot li {
  padding-left: 1em;
  position: relative;
}

.list-dot li::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #eee;
  position: absolute;
  left: 0.25em;
  top: 0.75em;
}
.list-num  {
  margin-left: 1.5em;
}
.list-num li {
  list-style: decimal;
}

.list-num-circle {
  counter-reset: my-counter;
}
.list-num-circle li {
  padding-left: 2em;
  position: relative;
}
.list-num-circle li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #333;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.8em;
  aspect-ratio: 1/1;
  font-size: var(--fs-fix-14);
  line-height: 1;
  position: absolute;
  top: 0.2em;
  left: 0;
  font-weight: 600;
}

.list-note li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: var(--fs-fix-14);
}

.list-note li::before {
  content: "※";
}

.list-check li {
  padding-left: 2em;
  position: relative;
}

.list-check li::before {
  position: absolute;
  left: 0;
  top: -0.3em;
  content: "check_box";
  font-family:var(--ff-symbol);
  color: #eee;
  font-size: 1.5em;
}

.list-data dt {
  font-weight: 600;
}

.ic-openlink {
  position: relative;
}
.ic-openlink::after{
  content: "open_in_new";
  font-family:var(--ff-symbol);
  vertical-align: middle;
  margin-left: 5px;
}

@media (max-width: 780px) {}


/* --------------------------------------------------
table
----------------------------------------------------- */
.table {
  width: 100%;
}
.table-time {
  margin-bottom: 5px;
}
.table-time td {
  width: 10%;
  text-align: center;
}
.table-time span {
  font-size: 90%;
}
@media (max-width: 780px) {
  .table-vertical {
    border-top: none !important;
  }

  .table-vertical th {
    width: 100%;
    display: block;
    border-left: none !important;
    border-right: none !important;
  }

  .table-vertical td {
    width: 100%;
    display: block;
    border: none !important;
  }

  .table-time th, .table-time td {
    padding: 1vw !important;
    font-size: var(--fs-16);
    line-height: 1.4;
    letter-spacing: normal; 
  }
}



/* --------------------------------------------------
参考リンク
---------------------------------------------------- */
.link-related {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--space-24);
}
.link-related dl {
  margin-bottom: 0;
}
.link-related dl dd {
  font-size: var(--fs-15);
  line-height: 1.5;
  margin-top: var(--space-fix-8);
}
@container (max-width: 840px) and (min-width: 601px) {
  .link-related {
      display: block;
  }
  .link-related__image{
    margin-bottom: var(--space-24);
  }
}

@container (max-width: 600px) {
  .link-related {
    border-bottom: 1px dashed #666;
    padding-bottom: var(--space-40);
  }
 }

/* --------------------------------------------------
column list  (サイズ均等)
---------------------------------------------------- */
.flex { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.flex--2 li,
.flex--2 .flex__content { width: calc((100% - var(--space-24)) / 2); }
.flex--3 li,
.flex--3 .flex__content { width: calc((100% - var(--space-24) * 2) / 3); }
.flex--4 li,
.flex--4 .flex__content { width: calc((100% - var(--space-24) * 3) / 4); }
.flex--grow li,
.flex--grow .flex__content  { flex-grow: 1; }

@media (max-width: 971px) and (min-width: 781px) {
  .flex--3 li,
  .flex--3 .flex__content,
  .flex--4 li,
  .flex--4 .flex__content { 
    width: calc((100% - var(--space-24)) / 2);
  }
}
@media (max-width: 780px) {
  .flex li,
  .flex .flex__content {
    width: 100%;
  }
  .flex.flex--sp2 li,
  .flex.flex--sp2 .flex__content { 
    width: calc((100% - var(--space-24)) / 2);
  }
}


/* --------------------------------------------------
flex レイアウト　左右サイズ均等
---------------------------------------------------- */
.flex-block {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--space-40);
  gap: var(--space-64);
}
.flex-block .flex-block__content {
  flex: 1;
  min-width: 0;
}
.flex-block .flex-block__image {
  flex-shrink: 0;
  width: 40%;
}

@media (max-width: 780px) {
 .flex-block:not(.flex-block__scale) {
    gap: 0 !important;
  }
  .flex-block:not(.flex-block__scale) .flex-block__content{
    margin:var(--space-16) 0;
    flex: auto;
  }
  .flex-block:not(.flex-block__scale) .flex-block__image {
    width: 100%;
  }
}

/* --------------------------------------------------
gridレイアウト　左右サイズ不均等（画像＋コンテンツ）
---------------------------------------------------- */
.grid-block {
  display: grid;
  grid-template-rows: max-content 1fr;
  column-gap: var(--grid-gap, var(--space-64));
  grid-template-columns: 1fr var(--img-w, 40%);
  grid-template-areas:
    "area1 area2"
    "area3 area2";
}
.grid-block .grid-block__title { grid-area: area1;}
.grid-block .grid-block__image { grid-area: area2;}
.grid-block .grid-block__content { grid-area: area3;}
.grid-block.grid-block__L {
  grid-template-columns: var(--img-w, 40%) 1fr;
  grid-template-areas:
  "area2 area1"
  "area2 area3";
}
.grid-block .grid-block__title .heading-lv4 {margin-top: 0;}

@media (max-width: 767px) {
  .grid-block:not(.grid-block__scale) {
    display: block;
    margin-bottom: var(--space-32);
  }
  .grid-block:not(.grid-block__scale) .grid-block__image {
    margin-bottom: var(--space-32);
  }
  .grid-block:not(.grid-block__scale) .grid-block__content {margin: var(--space-32) 0;}
}

/* grid 画像ギャラリー */
.grid-picture {
  display: grid;
  gap: var(--space-fix-12);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.grid-picture__text p {margin: var(--space-fix-8) auto 0;}

.grid-picture:not(.grid-picture__text) div {overflow: hidden; position: relative;}
.grid-picture:not(.grid-picture__text) div img {width: 100%; height: 100%; object-fit: cover;}

.grid-picture .grid-picture__L  { grid-column: 1 / 2; grid-row: 1 / 3; }
.grid-picture .grid-picture__Rt { grid-column: 2 / 3; grid-row: 1 / 2;}
.grid-picture .grid-picture__Rb { grid-column: 2 / 3; grid-row: 2 / 3;}

.grid-picture .grid-picture__R  { grid-column: 2 / 3; grid-row: 1 / 3;}
.grid-picture .grid-picture__Lt { grid-column: 1 / 2; grid-row: 1 / 2;}
.grid-picture .grid-picture__Lb { grid-column: 1 / 2; grid-row: 2 / 3;}

.grid-picture__caption {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100%;
}

@media (max-width: 600px) {
  .grid-picture {
    grid-template-columns: 1fr;
    gap: var(--space-24) 0;
  }
  .grid-picture.grid-picture__text {display: block;}
 .grid-picture__text > div {margin-bottom: var(--space-24);
}
}


/* --------------------------------------------------
step
---------------------------------------------------- */
.step-block {
  position: relative;
}
.step-block:not(:last-child) {
  margin-bottom: 0;
}
.step-block .heading-lv4:first-of-type {
  margin-top: 0;
}
.step--01 .step-block__num,
.step--02 .step-block__num {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  padding: var(--space-8);
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin:0;
  font-size: var(--fs-fix-14);
  font-weight: 600;
  width: clamp(65px, 58.947px + 1.645vw, 80px);
}
.step--01 .step-block__num span,
.step--02 .step-block__num span {
  font-size: var(--fs-18);
}

/* type--01 */
.step--01 .step-block {
  margin: var(--space-80) auto;
  padding: clamp(45px, 34.912px + 2.741vw, 70px) var(--space-56) var(--space-56);
}
.step--01 .step-block__num {
  left: 50%;
  top: 0;
  translate: -50% -50%;
}

/* type-02 */
.step--02 {margin-top: var(--space-80);}
.step--02 .step-block { 
  padding: 0 0 var(--space-120) clamp(85px, 58.772px + 7.127vw, 150px);
}
.step--02 .step-block::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: calc(clamp(65px, 58.947px + 1.645vw, 80px) / 2);
  top: 0;
  background-color: #ccc;
}
.step--02 .step-block:last-child { padding-bottom: 0;}
.step--02 .step-block:last-child::before{ content: none;}
.step--02 .step-block__num {
  border: 1px solid var(--c-main);
  color: var(--c-main);
  left: 0;
  top: 0;
  translate: 0 -25%;
  background-color: #fff;
}

/* type 03 */
.step--03 .grid-block {
  display: block !important;
}
.step--03 {
  display: flex;
  gap: var(--space-40);
  flex-wrap: wrap;
}
.step--03 .step-block {
  width: calc(calc(100% - var(--space-40)) / 2 );
  position: relative;
}
.step--03 .step-block__num {
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 0;
  background-color: var(--c-main);
  color: #fff;
  padding: 0 var(--space-16);
  font-weight: 600;
  font-size: var(--fs-16);
  z-index: 2;
}
.step--03 .step-block__num span {
  font-size: var(--fs-20);
}
.step--03 .grid-block__image {
  position: relative;
}
.step--03 .step-block:not(:last-child) .grid-block__image::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  translate:180% -50%;
  width: var(--space-16);
  aspect-ratio: 52/180;
  background: url(../img/page/common/arrow-step.png) center center / cover no-repeat;
}
.step--03 .grid-block__title {
  margin-top: var(--space-32);
}

@media (max-width: 600px) {
  .step--03 .step-block {
    width: 100%;
    position: relative;
  }
  .step--03 .step-block:not(:last-child) .grid-block__image::before {content: none;}
  .step--03 .step-block:not(:last-child) {padding-bottom: var(--space-64);}
  .step--03 .step-block:not(:last-child):before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    width: var(--space-16);
    aspect-ratio: 52/180;
    rotate:90deg;
    background: url(../img/page/common/arrow-step.png) center center / cover no-repeat; 
  }
}

/* ---------------------------------------------------
access
--------------------------------------------------- */

.access-block__image {
  position: relative;
}
.access-block__num {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  line-height: 1.3;
}
.access-block:not(:last-child) .access-block__image::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 150% -50%;
  width: var(--space-16);
  aspect-ratio: 52/180;
  background: url(../img/page/common/arrow-step.png) center center / cover no-repeat;
}
.access-block h3 {
  text-align: center;
  font-weight: 600;
  margin: var(--space-fix-16) 0;
}
.access-block__caption {
  font-size: var(--fs-16);
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .access {gap: var(--space-24);}
  .access-block {position:relative;}
  .access-block:not(:last-child) .access-block__image::before  {content: none;}
  .access-block:not(:last-child) {padding-bottom: var(--space-80);}
  .access-block:not(:last-child)::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    width: var(--space-16);
    aspect-ratio: 52/180;
    rotate:90deg;
    background: url(../img/page/common/arrow-step.png) center center / cover no-repeat; 
  }
}

/* --------------------------------------------------
faq
---------------------------------------------------- */
.faq-block__title {
  cursor: pointer;
  position: relative;
  transition: 0.3s ease-in-out;
}
.faq-block__title::before,
.faq-block__title::after{
  content: "";
  position: absolute;
  right: var(--space-24);
  top: 50%;
  transition: 0.3s ease-in-out;
  translate: 0 -50%;
}
.faq-block__title::after {
  rotate: 90deg;
}
.faq-block span {
  position: absolute;
  vertical-align: middle;
  line-height: 1.1;
}

.faq-block__title.is-active::after {
  rotate: 0deg;
}
.faq-block__content {
  display: none;
}
.faq-block__content p:last-child {
  margin-bottom: 0;
}
.faq-block__content.is-active {
  display: block;
}

/* --------------------------------------------------
img
---------------------------------------------------- */
.img--auto {
  width: auto;
  max-width: 100%;
}

.w120 { width: 120px !important;}
.w140 { width: 140px !important;}
.w150 { width: 150px !important;}
.w200 { width: 200px !important;}
.w240 { width: 240px !important;}
.w280 { width: 280px !important;}
.w300 { width: 300px !important;}
.w320 { width: 320px !important;}
.w400 { width: 400px !important;}
.w640 { width: 640px !important;}
.w840 { width: 840px !important; max-width: 100%;}

@media (max-width: 767px) {
  .w20p { width: 20% !important; }
  .w25p { width: 25% !important; }
  .w30p { width: 30% !important; }
  .w35p { width: 35% !important; }
  .w40p { width: 40% !important; }
  .w50p { width: 50% !important; }
  .w60p { width: 60% !important; }
  .w70p { width: 70% !important; }
  .w80p { width: 80% !important; }
  .w100p { width: 100% !important; }
}


/* ----------------------------------------------------
helperClass
---------------------------------------------------- */
/* align */
.alignC, .txt-alignC { text-align: center !important;}
.alignR { text-align: right !important;}
.alignL { text-align: left !important;}

@media (max-width: 767px) {
.txt-alignC  { text-align: left !important;}
}

/* margin-bottom */
.mb00 { margin-bottom: 0 !important;}
.mb16 {margin-bottom: var(--space-16) !important;}
.mb24 {margin-bottom: var(--space-24) !important;}
.mb32 { margin-bottom: var(--space-32) !important;}
.mb40 { margin-bottom: var(--space-40) !important;}
.mb48 { margin-bottom: var(--space-48) !important;}
.mb80 {margin-bottom: var(--space-80) !important;}


/* margin-top */
.mt00 { margin-top: 0 !important;}
.mt16 { margin-top: var(--space-16) !important;}
.mt24 { margin-top: var(--space-24) !important;}
.mt32 { margin-top: var(--space-32) !important;}
.mt40 { margin-top: var(--space-40) !important;}
.mt56 { margin-top: var(--space-56) !important;}
.mt64 { margin-top: var(--space-64) !important;}
.mt80 {margin-top: var(--space-80) !important;}
.mt120 {margin-top: var(--space-120) !important;}

/* padding-right */
.pr00 {padding-right: 0 !important;}