@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");


/* 基本設定 */
html {
  font-size: 3.125vw; /* 10px見当 */
}
@media screen and (min-width: 374px) {
  html {
    font-size: 2.673796791vw;
    /*  10px / 374px * 100 =2.673796791  */
  }
}
@media screen and (min-width: 576px) {
  html {
    font-size: 1.736111111vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.3020833333vw;
  }
}
@media screen and (min-width: 992px) {
  html {
    font-size: 1.008064516vw;
  }
  a[href^="tel:"] {
    pointer-events: none;
    /* PC表示ではtel反応しないようにする */
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 10px;
  }
}
body {
  background-color: #fff;
  color: var(--text-color);
  font-family: "Roboto", "Noto Sans JP", "Noto Serif JP",  sans-serif;
  font-weight: normal;
  font-weight: 400;
  position: relative;

  overflow-wrap: break-word;
}
.container {
  background-color: var(--bg);
  font-size: 1.2em; /* =12px */
  line-height: 1.5;
  letter-spacing: .04em;
  width: 100%;
  min-width: 1%;
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.container-inner {
  display: flex;
  flex-direction: column; /* header main footer　を縦並びにする */
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  /* font-family: ; */
}
.main-inner,
.footer-inner {
  width: 100%;
  max-width: var(--document-max-width);
  margin: 0 auto;
  padding: 0 1.5em;
}
@media screen and (min-width: 374px) {
  .container {
    font-size: 1.2em;
  }
}
@media screen and (min-width: 576px) {
  .container {
    font-size: 1.3em;
  }
}
@media screen and (min-width: 768px) {
  .container {
    font-size: 1.4em;
  }
  .main-inner,
  .footer-inner {
    padding: 0 2.5em;
  }
}
@media screen and (min-width: 992px) {
  .container {
    font-size: 1.6em;
  }
  a[href^="tel:"] {
    pointer-events: none;
    /* PC表示ではtel反応しないようにする */
  }
}
@media screen and (min-width: 1200px) {
  .container {
    font-size: 1.6em;
    font-size: 16px;
  }
}
.main {
  font-size: 1.2em;
  line-height: 1.7;
}
.main-inner,
.footer-inner {
  padding: 0 1.25em;
}
.main-inner {
}
@media screen and (min-width: 768px) {
  .main-inner,
  .footer-inner {
    padding: 0 1.5em;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-style: normal;
  font-weight: bold;
  font-weight: 700;
  line-height: 1.33;
  margin: 0;
  padding: 0;

  margin-block-start: 0;
  margin-block-end: 0;
}
header,
main,
footer {
  width: 100%;
  min-width: 1%;
  margin: 0 auto;
  z-index: 1;
}
nav {
  position: relative;
  z-index: 15;
}
footer {
  margin-top: auto;
  position: relative;
}
main,
footer .site-footer,
.breadcrumb {
  /* max-width: var(--content-max-width); */
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  nav {
    z-index: 9;
  }
}
ul {
  padding-left: 1em;
}
ul.list {
  list-style-type: none;
  margin: 1em 0;
  padding: 0;
}
ul.list > li {
  display: block;
  position: relative;
}
strong {
  color: #333;
  font-size: 1em;
  font-style: normal;
  font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="submit"],
input[type="reset"],
textarea,
select,
button {
  /* border-radius: 4px; */
  background-color: #ecf2f8;
  border: transparent 2px solid;
  color: var(--text-color);
  font-size: 1.33334em; /* 16px =画面サイズごとの設定で元12px*1.33334em */
  letter-spacing: .06em;
  width: 100%;
  padding: .4em .5em;
}
@media screen and (min-width: 576px) {
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="datetime"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="submit"],
  input[type="reset"],
  textarea,
  select,
  button {
    font-size: 1.2em;
    padding: .5em;
  }
}
input[type="submit"] {
  background-color: transparent;
  border: none;
  font-size: 1.1em;
  letter-spacing: .06em;
  padding: 0;
  transition: color var(--duration-x) ease, background-color .33s ease;
}
input[type="submit"]:disabled {
  opacity: .5;
}
input[type="submit"].is-inactive {
  transition: color var(--duration-x) ease, background-color .33s ease;
}
[type="checkbox"],
[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
input:focus-visible,
textarea:focus-visible,
input[type="checkbox"]:focus + .item-name,
input[type="radio"]:focus + .item-name,
select:focus,
.btn-btn:focus,
.btn-btn:focus-visible {
  outline: var(--form-point-color) solid 2px;
  z-index: 10;
  transition: outline .15s ease;
}
input[type="submit"]:focus,
input[type="submit"]:focus-visible {
  outline: var(--main-sub-color) solid 2px;
  transition: outline .15s ease;
}

a,
button,
input,
label,
textarea {
  cursor: pointer;
}
input.is-inactive {
  cursor: not-allowed;
}
input,
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
/* ::placeholder */
::-webkit-input-placeholder {
  color: #afafaf;
}
::-moz-placeholder {
  color: #afafaf;
  opacity: 1;
}
::placeholder {
  color: #afafaf;
  opacity: 1;
}

:focus::-webkit-input-placeholder {
  color: transparent;
}
:focus::-moz-placeholder {
  color: transparent;
}
:focus::placeholder {
  color: transparent;
}
/*  */
img {
  width: 100%;
  height: auto;
  min-height: 1%;
}
p {
  margin-block-start: 0;
  margin-block-end: 0;
}
ul.style-none,
ol.style-none,
ul.cell,
ol.cell,
ul.check-list,
ul.contact,
ul.field,
ul.symbol-list,
ol.symbol-list,
ul.item,
ul.menu,
ul.nav,
ul.submenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.style-none > li,
ol.style-none > li,
ul.cell > li,
ol.cell > li,
ul.check-list > li,
ul.contact > li,
ul.field > li,
ul.symbol-list > li,
ol.symbol-list > li,
ul.menu > li,
ul.nav > li,
ul.submenu > li {
  margin: 0;
  padding: 0;
}
ul > li > p,
ol > li > p {
  margin: 0;
}
ul {
  margin: 0;
}
ol {
  padding-inline-start: 0;
}
dl {
  margin: 2em 0;
}
th {
  font-weight: inherit;
}
dd {
  margin-inline-start: 0;
}
table {
  border-spacing: 0;
}
td {
  padding: 0;
}
nav li {
  position: relative;
}
nav li::before {
  position: absolute;
}
a {
  color: var(--link-text);
  text-decoration: none;
}
a:hover,
a.hover {
  text-decoration: none;
}
a[href^="tel:"] {
  color: var(--text-color);
}
.link-text {
  position: relative;
}
.link-text::before {
  border-bottom: var(--link-text) .09375em solid;
  content: "";
  width: 0;
  height: .09375em;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width .33s ease;
}
.link-text:hover::before {
  width: calc(100% + .1em);
  transition: width .33s ease;
}
.display-none {
  display: none;
}
.header-inner,
.article-header,
.list-heading,
.arrow {
  position: relative;
}
.header-inner::before,
.header-inner::after,
.article-header::before,
.article-header::after,
.article-header_sub::before,
.article-header_sub::after,
.list-heading::before,
.list-heading::after,
.arrow:before {
  content: "";
  position: absolute;
}
/* 共通 */
.site-heading {
  margin: auto 0;
}
.group-heading {
}
.list-heading {
}
.article {
  margin: 6em 0;
  position: relative;
  z-index: 1;
}
.article-header {
  margin-bottom: 2em;
}
.article-header .article-heading {
  font-family: "Noto Serif JP", sans-serif;
}
.article-heading > .heading-inner {
  font-size: 1.6em;
  display: block;
}
.heading-inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .article {
    margin: 6em 0;
  }
}
/* テキスト系設定 */
.text-text,
p.text-text {
  margin: 1em 0;
}
.text-bold {
  font-weight: bold;
}
.text-large {
  font-size: 1.2em;
}
.text-small {
  font-size: .9em;
}
.text-highlight {
  font-size: 1.2em;
  line-height: 1;
}
.text-center {
  text-align: center;
}
.text-inline,
.i-block {
  display: inline-block;
}
.text-label {
  background-color: var(--nav-bg);
  color: #fff;
  display: inline-block;
  padding: .2em .4em;
}
.text-underline,
.text-marker,
.text-deco,
.text-dot,
.brackets,
.text-triangle {
  position: relative;
}
.text-underline::before {
  background-color: rgb(246, 218, 85);
  content: "";
  width: 102%;
  height: .1em;
  position: absolute;
  bottom: -.08em;
  left: -.1em;
}
.text-marker {
  background: linear-gradient(transparent 60%, rgb(246 218 85 / 98%) 0%);
  display: inline;
}
.text-marker_light {
  background: linear-gradient(transparent 60%, rgb(246 218 85 / 80%) 0%);
}
.text-dot::before {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  color: #fff;
  width: .25em;
  height: .25em;
  position: absolute;
  top: -.1em;
  left: calc(50% - .125em);
}
.text-color-01 {
  color: var(--main-sub-color);
}
.text-color-02 {
  color: var(--yellow);
}
.text-color-03 {
  color: var(--orange);
}

.text-triangle {
  padding-left: 1em;
}
.text-triangle::before {
  content: "▶︎";
  font-size: .6em;
  display: inline-block;
  width: .7em;
  position: relative;
  top: -.25em;
  left: -1em;
}
span.text-block,
small.text-block {
  display: block;
}
.serif {
  font-family: "Noto Serif JP", serif;
}
.arrow.before {
  margin-left: -.4em;
  left: .1em;
}
.brackets.before {
  margin-right: .05em;
  margin-left: -.25em;
}
.brackets.after {
  margin-right: -.25em;
  margin-left: .05em;
}
.copyright {
  font-size: .9em;
}
.font-en {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 500;
}
.kome-inner {
  display: flex;
  flex-direction: row;
}
.symbol,
.kome {
  display: inline-block;
}


/* パーツなどのテンプレート設定 */
ul.list-dot > li {
  padding-left: 1em;
}
ul.list-checklist > li {
  padding-left: 2em;
}
ul.list-dot > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
ul.list-checklist > li::before {
  background-color: #fffdf8;
  /* border: .1em solid #80829d; */
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  top: .2em;
  left: .25em;
}
ul.list-checklist > li::after {
  border-right: .25em solid var(--orange);
  border-bottom: .25em solid var(--orange);
  content: "";
  display: block;
  width: .8em;
  height: 1.4em;
  position: absolute;
  top: -.15em;
  left: .45em;
  transform: rotate(45deg);
}
.list-inner {
  margin: 0 0 .5em;
  position: relative;
}
.item,
ul.item {
  display: flex;
}
.item.column,
.item.row {
  flex-direction: column;
}
.grid {
  display: grid;
}
@media screen and (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
  }
  .grid.grid-items-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid > div {
    margin: 0;
  }
}

.field-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 3em 0;
}
.field-header {
  font-size: 1em;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  margin: 1em 0;
}
.field-body {
  width: 100%;
  position: relative;
}
.must,
.mustnot {
  background-color: #eb3b3b;
  border-radius: 1em;
  color: #fff;
  font-size: .9em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .1em;
  min-width: 3.4em;
  margin: auto 1em auto 0;
  padding: .4em .4em .4em .6em;
}
.mustnot {
  background-color: #808080;
}
input[type="submit"].submit,
.btn-btn {
  background-color: var(--main-sub-color);
  box-shadow: 2px 4px 6px #959595;
  color: #fff;
  text-align: center;
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: 1em 2.5em;
  transform: translateY(0);
  transition: background-color .33s ease, transform .33s ease, color .33s ease;
}
input[type="submit"].submit {
  background: linear-gradient(180deg, var(--orange) 40%, #f55f27 100%);
  box-shadow: 2px 4px 6px #959595;
}
input[type="submit"].submit.is-active:hover,
.btn-btn:hover {
  transform: translateY(.25em);
  transition: background-color .33s ease, transform .33s ease;
}
input[type="submit"].submit::before {
  background-color: var(--orange);
}

.group {
}
.group-inner {
}
.group-box,
.item-box {
  margin: 2em 0;
  position: relative;
}
.text-box {
  margin: 1em 0;
}
.img-box {
  width: 100%;
  height: 100%;
  min-height: 1%;
}
.box-inner {
  position: relative;
}
.img-box > .box-inner {
  width: 100%;
  height: 100%;
}
/* 共通したテキストボックスなど */
.box-shape,
.box-shape-outline,
.box-outline {
  margin: 2em 0;
  padding: 1em 2em;
}
.box-shape {
  /* box-shadow: 0 10px 10px rgba(0,0,0,.05); */
}
.box-shape,
.box-shape-outline {
  background-color: var(--shape-bg);
}
.item.row > .list-inner.box-shape {
  padding: 1em 2em;
}
.box-shape-outline,
.box-outline {
  border: 1px solid #a7a7a7;
}
.arrow::before {
  border-top: 1em solid #4f4f4f;
  border-right: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid transparent;
  bottom: -2em;
  left: calc(50% - 1em);
}
.hyphen {
  padding: 0 .3em 0 .5em;
}
.sp-only {
  display: block;
}
.pc-only {
  display: none;
}
@media screen and (min-width: 374px) {
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .item.row {
    flex-flow: row;
  }
  .item.row > .list-inner {
    padding: 0 1em;
  }
  .contents-small {
    max-width: var(--contents-width);
    margin: 0 auto;
  }
  .field-header {
    width: 37%;
    margin: .25em 0 auto 0;
  }
  .field-body {
    width: 63%;
    margin: auto 0;
  }
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  .field-header {
    width: 33%;
  }
  .field-body {
    width: 67%;
  }
}
/* 三角形の擬似要素 */
.triangle::after {
  background: #fbfbfb;
  content: "";
  width: 20vw;
  height: 10vw;
  margin: 0 auto;
  position: absolute;
  top: -.01%;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  clip-path: polygon(0 0, 50% 50%, 100% 0);

  @media screen and (min-width: 768px) {
      width: 10vw;
      height: 5vw;
  }
  @media screen and (min-width: 1600px) {
    width: 10em;
    height: 5em;
  }
}

/*
___________________
基本16px
0.0625em | 1px
0.09375em | 1.5px
0.125em | 2px
0.1875em | 3px
0.25em | 4px
・・・
0.625em | 10px
1em | 16px
___________________ */

/* ---------------------
index.html
------------------------ */

/* header */
.header {
  background: #343d99;
  height: 3em;
  position: relative;
  position: fixed;
  z-index: 5;;
}
.header .header-inner {
  max-width: var(--document-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5em;
}
.header .tel-num {
  letter-spacing: .075em;
}
.header .tel-num .fa-icon {
  padding-right: .5em;
}
.header .tel-num img {
  width: 3em;
}
.header .site-heading {
  color: #fff;
  height: 100%;
  /* padding: 1em 0; */
  padding: .5em 0;
}
.header a {
  color: #fff;
}
.header .site-heading > .heading-inner {
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.header .site-heading .subtext-area {
  margin: auto 0;
}
.header .site-heading .subtext-area .img-img {
  display: inline-block;
  width: 10em;
  margin: auto 0;
}
.header .site-heading .tel-area {
  text-align: right;
  margin: auto 0;
}
.header .site-heading .tel-area .tel-num {
  font-size: 1.5em;
  font-weight: bold;
  margin: auto 0;
}
.header .site-heading .tel-area .tel-time {
  font-size: .85em;
  margin: auto 0 auto 1em;
  padding-top: .2125em;
}
.nav .nav-menu {
  background-color: rgba(var(--main-color-rgb), .96);
  width: 100vw;
  margin: 0 ;
  padding: 3em 5em 2em 1.5em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  transition: transform .33s ease;
}
.nav-menu .nav-menu_item {
  padding: 1.5em 0;
  position: relative;
  opacity: 1;
  transition: opacity .33s ease;
}
.nav-menu .nav-menu_item a:hover,
.footer .list-inner a:hover {
  opacity: .6;
  transition: opacity .33s ease;
}
/* hamberger-btn */
.nav .hamberger-btn {
  width: 3.5em;
  height: 3em;
  position: fixed;
  top: 0;
  right: 1em;
  z-index: 20;
  cursor: pointer;
}
.hamberger-btn .btn-inner::before,
.hamberger-btn .btn-inner::after {
  content: "";
}
.hamberger-btn .hamberger {
  background-color: #fff;
  display: block;
  width: 2.2em;
  height: 2.5px;
  position: absolute;
  top: .75em;
  left: 1em;
  opacity: 1;
  transform: none;
  transition: transform .33s ease, opacity .33s ease, display .33s ease, left .33s ease;

  transform-origin: right center;
}
.hamberger-btn .hamberger:nth-child(2) {
  top: 1.5em;

  transform-origin: center;
}
.hamberger-btn .hamberger:nth-child(3) {
  top: 2.25em;
}
.active .hamberger-btn {
  /* border: 1px #fff solid; */
}
.active .hamberger-btn .hamberger:nth-child(1) {
  left: .25em;
  transform: rotate(-45deg);
  transition: transform .33s ease, left .33s ease;

  transform-origin: right center;
}
.active .hamberger-btn .hamberger:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}
.active .hamberger-btn .hamberger:nth-child(3) {
  left: .25em;
  transform: rotate(45deg);
  transition: transform .33s ease, left .33s ease;

  transform-origin: right center;
}
.nav-bg {
  background-color: transparent;
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .33s ease;
}
.active .nav-bg {
  display: block;
  opacity: 1;
  transition: opacity .33s ease;
}
@media screen and (min-width: 768px) {
  .header {
    height: 3.5em;
    position: relative;
  }
  .header.header-down {
    position: fixed;
    animation: DownHeader .5s forwards;
  }
  @keyframes DownHeader {
    from {
      opacity: 0;
      transform: translateY(-7em);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .header.header-up {
    position: fixed;
    animation: UpHeader .5s forwards;
  }
  @keyframes UpHeader {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-7em);
    }
  }
  .header .header-inner {
    max-width: var(--document-max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5em;
  }
  .header .site-heading .subtext-area .img-img {
    width: 12.5em;
  }
  .header .site-heading .tel-area {
    padding-right: 4em;
  }
  .nav .hamberger-btn {
    width: 4em;
    height: 3.5em;
    position: absolute;
    /* top: -3.6em; */
    top: -3.5em;
    right: 0;
  }
  .nav .nav-menu {
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 3.5em 5em 1em 5em;
    position: relative;
  }
  .nav .nav-menu_item {
    line-height: 1;
    text-align: center;
    margin: 0 .5em;
    padding: 1em .5em;
  }
  .nav .nav-menu_item span {
    font-size: 1.2em;
    display: block;
    min-width: 5em;
    padding: .8em 1em;
  }
  .hamberger-btn .hamberger {
    width: 2.2em;
    height: 2.5px;
    top: 1em;
    left: 1.5em;
  }
  .hamberger-btn .hamberger:nth-child(2) {
    top: 1.75em;
  }
  .hamberger-btn .hamberger:nth-child(3) {
    top: 2.5em;
  }
  .active .hamberger-btn .hamberger:nth-child(1) {
    left: .5em;
  }
  .active .hamberger-btn .hamberger:nth-child(3) {
    left: .5em;
  }
}
body.active-01 .nav .nav-menu {
  position: fixed;
  z-index: 1;
  opacity: 0;
  transform: translate(120vw);
  transition: transform .33s ease, opacity .33s ease;
}
body.active-01 .nav .nav-menu_item {
  text-align: center;
  text-align: left;
  width: fit-content;
  z-index: 0;
  transform: translate(-250vw);
}
body.active-01 .nav .active .nav-menu {
  z-index: 5;
  opacity: 1;
  transform: translate(0);
  transition: transform .33s ease, opacity .33s ease;
}
body.active-01 .nav .active .nav-menu_item {
  transform: translate(0);
  transition: transform .66s ease-in-out;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(2) {
  transition-delay: .05s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(3) {
  transition-delay: .1s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(4) {
  transition-delay: .15s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(5) {
  transition-delay: .2s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(6) {
  transition-delay: .25s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(7) {
  transition-delay: .3s;
}
body.active-01 .nav .active .nav-menu_item:nth-of-type(8) {
  transition-delay: .35s;
}

@media screen and (min-width: 768px) {
  .active .top-bg {
    top: 4.5em;
  }
  body.active-01 .nav .nav-menu_item {
    margin-left: 12.5%;
  }
}
/* .main | .top-view */
.top-view {
  /* padding-top: 2.5em; */
  padding-top: 2.490em;
  @media screen and (min-width: 768px) {
    padding-top: 0;
  }
  @media screen and (min-width: 992px) {
    margin-top: -.05em;
  }
}
.top-view .box-inner {
  position: relative;
}
.top-view .text-small {
  font-size: .85em;
}
/* .top-view .main-img */
.top-view .main-img {
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  position: relative;
  z-index: 0;

  @media screen and (min-width: 576px) {
    height: auto;
  }
  @media screen and (min-width: 768px) {
  }
  @media screen and (min-width: 1200px) {
    max-width: 1200px;
    margin: 0 calc(50% - 600px);
  }
}
.top-view .box-inner::before {
  @media screen and (min-width: 768px) {
    width: 10vw;
    height: 5vw;
    top: 99.9%;
    left: calc(50% - 5vw);
  }
}
.top-view .main-img::before {
  content: none;
  @media screen and (min-width: 1200px) {
    background: #343d99;
    content: "";
    width: 49vw;
    height: 675px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    clip-path: unset;
  }
}
.top-view .main-img::after {
  background: url(../img/top_img.webp) no-repeat;
  background-size: 100%;
  content: "";
  width: 80%;
  height: 42%;
  position: absolute;
  top: 8.5em;
  right: 0;
  left: auto;
  @media screen and (min-width: 374px) {
    background-position: 0% 15%;
    width: 80%;
    height: 40%;
    top: 9.5em;
  }
  @media screen and (min-width: 576px) {
    background-position: 0% 40%;
    width: 77%;
    height: 42%;
    top: 13em;
  }
  @media screen and (min-width: 768px) {
    width: 50%;
    height: 57%;
    top: auto;
    bottom: 25%;
  }
  @media screen and (min-width: 992px) {
    width: 50%;
    height: 55%;
  }
}
.top-view .main-img img {
  width: 100%;
  position: relative;
  @media screen and (min-width: 576px) {
    width: 100%;
    right: 0;
    left: 0;
  }
}

/* .top-view .main-heading */
.top-view .main-heading {
  color: #fff;
  width: auto;
  position: absolute;
  top: 1em;
  right: 0;
  left: auto;
  z-index: 2;
  @media screen and (min-width: 374px) {
  }
  @media screen and (min-width: 576px) {
    top: 1em;
  }
  @media screen and (min-width: 768px) {
    width: 100%;
    position: absolute;
    right: auto;
    left: 0;
    z-index: 2;
  }
  @media screen and (min-width: 992px) {
    width: 100%;
    top: 2em;
  }
  @media screen and (min-width: 1200px) {
    top: 1.5em;
  }

}
.top-view .main-heading .heading-inner {
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
  display: block;
}
.top-view .main-heading .img-img {
  display: block;
  width: 100%;
}

.top-view .fadein.fadein-delay {
  animation-delay: .1s;
}
.top-view .fadein.fadein-delay- {
  animation-delay: .15s;
}
.top-view .fadein.fadein-delay-- {
  animation-delay: .3s;
}

.top-view .main-heading .top-text01a {
  width: 80%;
}
.top-view .main-heading .top-text01a,
.top-view .main-heading .top-text02a {
  @media screen and (min-width: 768px) {
    width: 62%;
  }
  @media screen and (min-width: 992px) {
      width: 62%;
  }
}
.top-view .main-heading .top-text02a {
  font-size: .9em;
  letter-spacing: .05em;
  width: 100%;
  padding-top: .5em;
  @media screen and (min-width: 374px) {
    width: 83%;
  }
  @media screen and (min-width: 576px) {
    width: 75%;
    font-size: 1.2em;
    padding-top: 1em;
  }
  @media screen and (min-width: 768px) {
    font-size: 1.1em;
    padding-top: 0.2em;
    width: 50%;
  }
  @media screen and (min-width: 992px) {
    font-size: 1.2em;
  }
  @media screen and (min-width: 1200px) {
    font-size: 1.4em;
    padding-top: .5em;
  }
}

/* 仮に画像を入れたとき */
.top-view .main-heading.kari01,
.top-view .main-heading.kari02 {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  top: 0;
  left: 0;
}
.top-view .main-heading.kari01 .top-text01a,
.top-view .main-heading.kari02 .top-text01a {
  width: 100%;
}
/* .main .article:first-of-type {
  margin-top: 4em !important;
} */

/* .top-view .sub-text */
.top-view .sub-text {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 2.5em;
  & > .box-inner {
    display: flex;
    gap: .5em;
    justify-content: space-between;
    margin: 0 -.25em;
  }
  & .img-img {
    width: 40%;
    height: 40%;
    position: relative;
    top: 0;
    left: 0;
  }
  & .btn-box {
    text-align: center;
    margin: auto;
  }
  & .btn-btn {
    background-color: #2597aa;
    box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
    padding: .5em 1em;
    margin-top: 1em;

    & .icon {
      padding-left: .5em;
    }
  }
  @media screen and (min-width: 374px) {
    bottom: 4.5em;
    & .img-img {
      width: 42%;
      height: 42%;
    }
  }
  @media screen and (min-width: 576px) {
    bottom: 7em;
    width: 100%;
    & > .box-inner {
      margin: 0;
    }
    & .img-img {
      width: 45%;
      height: 45%;
    }
    & .btn-btn {
      margin-top: 3em;
      padding: .5em 1.5em;
      & .btn-inner > span {
        font-size: 1.1em;
      }
    }
  }
  @media screen and (min-width: 768px) {
    width: 50%;
    top: auto;
    bottom: 25%;
    & .box-inner {
      display: block;
    }
    & .img-img {
      width: 53%;
      height: 53%;
      margin: 0 auto;
    }
    & .btn-btn {
      margin-top: 0.5em;
    }
  }
  @media screen and (min-width: 992px) {
    bottom: 25%;
    & .img-img {
    }
    & .btn-btn {
      padding: .5em 2em;
      & .btn-inner > span {
        font-size: 1.2em;
      }
    }
  }
  @media screen and (min-width: 1200px) {
    & .img-img {
      width: 60%;
      height: 60%;
    }
    & .btn-btn {
      margin-top: 1.25em;
      & .btn-inner > span {
        font-size: 1.4em;
      }
    }
  }
  @media screen and (min-width: 1600px) {
    & .img-img {
    }
  }
}


/* .top-view .sub-bottom-text */
.top-view .sub-bottom-text {
  width: 100%;
  margin: 0 ;
  position: absolute;
  bottom: -8em;
  z-index: 2;
  & > .box-inner {
    background-color: var(--main-color);
    color: #fff;
    display: block;
    margin: 0 -1.25em;
    /* margin: 0 auto; */
    padding: 1em;
    position: relative;
  }
  & > .box-inner .text-text {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0;
  }

  @media screen and (min-width: 374px) {
    bottom: -4.5em;
    & .text-text.text-center {
      font-size: .8em;
    }
  }
  @media screen and (min-width: 576px) {
    width: 90%;
    margin: 0 5%;
    bottom: 0;
    & > .box-inner  .text-text {
      font-size: 1em;
    }
  }
  @media screen and (min-width: 768px) {
    bottom: 0;
    & > .box-inner {
      text-align: center;
      padding: 1em 1em 1em;
    }
    & > .box-inner .text-text {
      font-size: .9em;
      line-height: 1.7;
    }
  }
  @media screen and (min-width: 992px) {
    width: calc(100% - 6em);
    margin: 0 2em;
    bottom: 0;
    & > .box-inner::before {
      top: 99.5%;
    }
    &  > .box-inner .text-text {
      font-size: .9em;
    }
  }
  @media screen and (min-width: 1200px) {
    bottom: 0;
    & > .box-inner .text-text {
      font-size: 1.1em;
      line-height: 2;
      padding-top: 0;
    }
  }
  @media screen and (min-width: 1600px) {
    width: 100%;
    margin: 0 auto;
    bottom: -2em;
    & > .box-inner::before {
      width: 10em;
      height: 5em;
    }
    &  > .box-inner .text-text {
      font-size: 1.2em;
      padding: 0;
    }
  }
}

/* .article */
.main .article:first-of-type {
  margin-top: 9em;
}
body[class^="page-"] .main .article:first-of-type {
  margin-top: 3em;
}
.article-header .article-heading {
  color: var(--main-sub-color);
  text-align: center;
  /* padding: 1.25em 0; */
  padding: 5em 0 1em;
}
.article-heading::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
}
.article-heading > .heading-inner.font-en {
  color: #e4edf2;
  font-size: 4.5em;
  letter-spacing: -.05em;
  display: block;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: .05em;
  z-index: -1;
}
@media screen and (min-width: 374px) {
  .main .article:first-of-type {
    margin-top: 6em;
  }
}
@media screen and (min-width: 576px) {
  .main .article:first-of-type {
    margin-top: 3em;
  }
}
@media screen and (min-width: 768px) {
  .main .article:first-of-type {
    margin-top: 3em;
  }
  .article-heading > .heading-inner.font-en {
    letter-spacing: .15em;
    left: .15em;
  }
  .page-map .main .article:first-of-type {
    margin-top: 0;
  }
}
@media screen and (min-width: 992px) {
  .main .article:first-of-type {
    margin-top: 4em;
  }
}
@media screen and (min-width: 1600px) {
  .main .article:first-of-type {
    margin-top: 10em;
  }
}
.fadein {
  opacity: 0;
}
.fadein.scrollin {
  opacity: 0;
  animation-name: fadeinAnime;
  animation-duration: .6s;
  animation-fill-mode: forwards;
}
@keyframes fadeinAnime {
  from {
    opacity: 0;
    transform: translateY(5em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.text-box-outline.scrollin {
  animation-delay: .9s;
}
.top-view .sub-text-list .list-inner:first-of-type.scrollin {
  animation-delay: .1s;
}
.top-view .sub-text-list .list-inner:nth-of-type(2).scrollin {
  animation-delay: .18s;
}
.top-view .sub-text-list .list-inner:nth-of-type(3).scrollin {
  animation-delay: .26s;
}
.top-view .sub-text-list .list-inner:nth-of-type(4).scrollin {
  animation-delay: .34s;
}

/* #article-worry */
#article-worry .article-header .article-heading {
  padding-top: 0;
}
#article-worry .article-inner:before {
  background-position: bottom;
  background-size: cover;
  content: "";
  display: block;
  height: calc(100% + 6em);
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
  opacity: .3;
}
#article-worry .article-inner:before {
}
#article-worry .group-heading {
  text-align: center;
}
#article-worry .group-heading > .heading-inner {
  font-size: 1.3em;
}
#article-worry .group .item {
  flex-wrap: wrap;

  margin-block: 0;
  gap: 1.5em;
}
#article-worry .group .item > .list-inner {
  border: 1px solid #abc6d5;
  /* background-color: rgb(255 255 255 / 65%);
  border: var(--main-color) dotted 2px; */
  margin-bottom: 9em;
  padding: 1em 1.5em 0 1.5em;
}
#article-worry .item > .list-inner .item-icon {
  background: url(../img/icon-01.webp) no-repeat;
  background-size: 100%;
  content: "";
  display: inline-block;
  width: 6em;
  height: 8em;
  position: absolute;
  top: auto;
  bottom: -9.5em;
  left: calc(50% - 3em);
}
#article-worry .item > .list-inner:first-of-type .item-icon {
  background: url(../img/icon-02.webp) no-repeat;
  background-size: 100%;
}
#article-worry .item > .list-inner::before {
  background: var(--bg);
  content: "";
  display: block;
  width: 1.8em;
  height: 5px;
  position: absolute;
  bottom: -4px;
  left: calc(50% - .9em);
}
#article-worry .item > .list-inner::after {
  border-right: 1.5px solid #abc6d5;
  border-bottom: 1.5px solid #abc6d5;
  content: "";
  display: block;
  width: 1.4em;
  height: 1.4em;
  position: absolute;
  top: auto;
  bottom: -.8em;
  left: calc(50% - .7em);
  transform: rotate(45deg);
}

#article-worry .group-heading::before {
}
#article-worry .group {
  margin-top: 2em;
  padding-bottom: 6em;
}
#article-worry .group:last-of-type {
  padding-bottom: 0;
}
#article-worry .before-souzoku .heading-inner .text-dot,
#article-worry .after-souzoku .heading-inner .text-dot {
  color: #e37e7e;
  font-size: 1.2em;
  padding: 0 .05em;
}
#article-worry .after-souzoku .heading-inner .text-dot {
  color: var(--main-green);
}
#article-worry .heading-inner .text-dot::before {
  background-color: #e37e7e;
  top: -.4em;
}
#article-worry .after-souzoku .heading-inner .text-dot::before {
  background-color: var(--main-green);
}

#article-worry  ul.list-checklist > li > span {
  font-size: 1.15em;
}

#article-worry  ul.list-checklist > li::before {
  width: 1.6em;
  height: 1.6em;
  top: 0;
  left: 0;
}
#article-worry .before-souzoku  ul.list-checklist > li::before {
  background-color: #ffeae0;
}
#article-worry .before-souzoku ul.list-checklist > li::after {
  border-right: .25em solid #e37e7e;
  border-bottom: .25em solid #e37e7e;
}
#article-worry .after-souzoku  ul.list-checklist > li::before {
  background-color: #d6efe0;
}
#article-worry .after-souzoku ul.list-checklist > li::after {
  border-right: .25em solid var(--main-green);
  border-bottom: .25em solid var(--main-green);
}
@media screen and (min-width: 576px) {
  #article-worry {
    margin-bottom: 8em;
  }
  #article-worry .group .item {
    gap: 2em;
  }
  #article-worry .group .item > .list-inner {
    width: calc(50% - 1em);
    margin-bottom: 0;
    padding: 1em 1em 0 ;
  }
  #article-worry .group:last-of-type {
    padding-bottom: 12em;
  }
  #article-worry .article-inner:before {
    background-position: top;
  }
}
@media screen and (min-width: 768px) {
}

/* #article-about */
#article-about.article-bg-border01::before {
  background-color: var(--main-sub-light-color);
  height: calc(100% + 6em);
}
#article-about.article-bg-border01::after {
}
#article-about .article-header .article-heading {
  padding-top: .5em;
}
#article-about .article-subheading {
  color: var(--main-sub-color);
  font-family: "Noto Serif JP", sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  text-align: center;
  position: relative;
  top: -2em;
}
#article-about .item-box .item-icon {
  margin: 0;

  aspect-ratio: 3 / 2;
}
#article-about .item-box .item-icon {
  /* background-color: #fbfbfb; */
  border-radius: 50%;
  width: 8em;
  height: 8em;
  margin: 0 auto;
}
#article-about .item-box .item-icon::before {
  background: url(../img/rule-icon01.webp) no-repeat;
  background-size: 70%;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  top: 12.5%;
  left: 15%;
}
#article-about .item-box:last-of-type .item-icon::before {
  background: url(../img/rule-icon02.webp) no-repeat;
  background-size: 70%;
}
#article-about .article-heading > .heading-inner {
  font-size: 1.4em;
}
#article-about .top-line {
  margin-bottom: 4em;
}
#article-about .top-line::before,
#article-about .top-line::after {
  background-color: #333899;
}
#article-about .group-inner::before {
  content: "";
  display: block;
  height: calc(100% + 5em);
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -2;
  opacity: .6;
}
#article-about .group .item-box {
  background-color: rgb(255, 255, 255, .7);
  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}
#article-about .group .item-box::before {
  /* background-color: rgb(17 143 175 / 19%);
  content: ""; */
  width: 100%;
  /* height: calc(100% - 5em); */
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
#article-about .item-box .group-heading {
  background: linear-gradient(90deg, #333899 2%, #369 70%);
  color: #fff;
  text-align: center;
  margin: -1em -1em 1em;

  padding-block: .8em;
}
#article-about .group .group-inner > .list {
  flex-direction: column;
  flex-wrap: wrap;

  margin-block: 0;
  gap: 2em;
}
#article-about .group .text-center {
  width: 100%;
}
#article-about .item-box {
  padding: 1em;
  z-index: 0;
}
#article-about .group .item-box > .box-inner {
  text-align: left;
}
#article-about .item-box .group-heading .heading-inner {
  font-size: 1.3em;
  letter-spacing: .05em;

  margin-block: 0 .5em;
}
#article-about .item-box .list {
  margin: 0;
}
#article-about .item-box .list-inner {
  letter-spacing: .025em;

  margin-block: .25em;
}
#article-about .item-box .list-inner > span {
  font-size: 1.15em;
}
#article-about ul.list-checklist > li::after {
  top: 0;
}

#article-about .box-inner .text-text:last-of-type {
  margin-block: 1.5em 0;
}

@media screen and (min-width: 576px) {
  #article-about .group .item-box {
    min-width: 31em;
  }
}
@media screen and (min-width: 768px) {
  #article-about .article-heading > .heading-inner {
    font-size: 1.6em;
  }
  #article-about .group .group-inner > .list {
    flex-direction: row;
    flex-wrap: nowrap;

    gap: 2em;
  }
  #article-about .group .item-box {
    /* width: calc(50% - 1em); */
    width: 100%;
    min-width: 1%;
  }
  #article-about .group .item-box::before {
    /* width: calc(100% + 2.5em);
    height: calc(100% - 1em);
    left: -2.5em; */
  }
  #article-about .item-box .item-icon {
    /*
    position: absolute;
    top: calc(50% - 4em);
    right: -35%;
    left: auto; */
  }
}
@media screen and (min-width: 992px) {
  #article-about .group .group-inner {
    gap: 2em;
  }
  #article-about .group .item-box {
    /* width: calc(50% - 1em); */
    width: calc(72% - 1em);

    margin-inline: 0 auto;
  }
}

/* #article-rule */
.article-bg-border01::before,
.article-bg-border01::after,
.article-bg-border02::before,
.article-bg-border02::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
}
#article-rule::before {
  background-color: var(--main-sub-light-color);
  height: calc(100% + 6em);
}
#article-rule .article-heading .text-large {
  font-size: 1.4em;
}
#article-rule::after {
  height: calc(100% + 6em);
}
#article-rule .box-shape {
  counter-increment: box-shaped;
  display: flex;
  flex-direction: column;
  margin-bottom: 5em;
  padding: 2em;
}
#article-rule .box-shape::before {
  background: linear-gradient(90deg, #34339a 2%, #346699 70%);
  content: "0"counter(box-shaped);
  color: var(--main-sub-color);
  font-family: "Bodoni Moda", serif;
  font-size: 4em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .05em;
  width: 1.4em;
  position: absolute;
  top: -1em;
  left: .1em;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#article-rule .box-shape .box-heading {
  font-family: "Noto Serif JP", serif;
  line-height: 1;

  padding-block: 1em;
}
#article-rule .box-shape .num-text {
  color: var(--main-sub-color);
  display: block;
}
#article-rule .box-shape .num-text > span {
  font-size: 1.4em;
}
#article-rule .box-shape .text-box {
  margin-top: 0;
}
@media screen and (min-width: 576px) {
  #article-rule .box-shape {
    flex-direction: row;
  }
  #article-rule .box-shape > .box-inner:first-of-type {
    width: 40%;
  }
  #article-rule .box-shape > .box-inner:last-of-type {
    width: 60%;
    padding-left: 2em;
  }
  /* #article-rule .box-shape > .box-inner:first-of-type {
    width: 25%;
    max-width: 200px;
    margin: auto;

    aspect-ratio: 1 / 1;
  }
  #article-rule .box-shape > .box-inner:last-of-type {
    width: 75%;
    padding-left: 2em;
  } */
}
@media screen and (min-width:768px) {
  #article-rule .box-shape .box-heading {
    padding-block: 0 1em;
  }
}
/* #article-faq */
#article-faq .list-inner {
  width: 100%;
}
#article-faq .list-inner .img-img {
  width: 100%;
  overflow: hidden;
}
#article-faq .list-inner .text-box {
  margin: 4em 0;
}
#article-faq .list:not(.faq-header) .list-inner:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  #article-faq .list-inner .item-box .img-img {
    width: 60%;
  }
}
/* #artixcle-faq .accordion-box
アコーディオン */
.accordion-box .accordion-text {
  display: none;
}
.accordion-box .accordion-text {
  margin: 0;
  padding-top: 1em;
}

/* #article-faq .accordion-box */
#article-faq .accordion-box {
  margin: 4em 0;
}
#article-faq .accordion-box .heading {
  border-bottom: var(--main-sub-color) solid 2px;
  color: var(--main-sub-color);
  position: relative;
  cursor: pointer;

  padding-block: 1em .2em;
}
/* #article-faq .accordion-box .heading::before {
  background-color: var(--main-sub-color);
  content: "";
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  right: 0;
  bottom: -.05em;
  clip-path: polygon(100% 0, 0 0, 50% 70%);
  transition: transform .33s ease, bottom .33s ease;
}
#article-faq .accordion-box.open  .heading::before {
  bottom: .5em;
  transform: rotate(-180deg);
  transition: transform .33s ease;
} */
#article-faq .accordion-head::before {
  background-color: var(--main-sub-color);
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: auto;
  right: 0;
  bottom: -.05em;
  clip-path: polygon(100% 0, 0 0, 50% 70%);
  transform: rotate(0);
  transition: transform .33s ease, bottom .33s ease;
}
#article-faq .accordion-head:hover::before {
  bottom: -.2em;
  transition: transform .33s ease, bottom .33s ease;
}
#article-faq .accordion-head.open::before {
  bottom: .5em;
  transform: rotate(-180deg);
  transition: transform .33s ease, bottom .33s ease;
}
#article-faq .accordion-head:hover.open::before {
  bottom: .85em;
  transition: transform .33s ease, bottom .33s ease;
}
#article-faq .accordion-box .heading > .heading-inner {
  font-family: "Noto Serif JP", sans-serif;
  font-size: 1.1em;
}
#article-faq .accordion-box .heading .font-en {
  font-size: 1.15em;
  position: absolute;
  top: -1.2em;
}
#article-faq .accordion-text .text-bold.text-color-01 {
  font-size: 1.2em;
}
#article-faq .accordion-text .text-color-01 .number {
  font-size: 1.4em;
  position: relative;
  bottom: -.05em;
}
@media screen and (min-width: 576px) {
  #article-faq .accordion-list .heading > .heading-inner {
    font-size: 1.25em;
  }
}
/* #article-faq .item-box .box */
#article-faq .box table {
  margin: 1em auto 0;
}
#article-faq .box th,
#article-faq .box td {
  text-align: center;
  width: 25%;
  padding: .5em 0;
}
#article-faq .box thead tr {
  background-color: var(--main-sub-light-color);
}
#article-faq .box tbody tr {
  border-top: #d4e0eb 2px solid;
}
#article-faq .text-text {
  font-size: 1.1em;
}
#article-faq .box .table-color-01 {
  background-color: rgb(76 154 215 / 18%);
}
#article-faq .box .text-top {
  display: inline-block;
  margin-top: 2em;
}
#article-faq .text-top > span {
  font-size: 1.2em;
}
/* #article-faq | #faq-01 */

/* #article-faq | #faq-02 */
#article-faq #faq-02 .img-img {
  width: 100%;
  margin: 1em auto 0;
}

/* #article-faq | #faq-03 */
#article-faq #faq-03 .box-heading {
  text-align: center;
  margin: 0 0 1em;
  padding: 1em 0;
}
#article-faq #faq-03 .item-box {
  margin: 1em 0;
}
#article-faq #faq-03 .box-heading span {
  font-size: 1.1em;
  font-weight: 700;
}
@media screen and (min-width: 374px) {
  #article-faq .box th,
  #article-faq .box td {
    text-align: center;
    width: calc(26.6% - 1em);
    padding: .5em 1em;
  }
  #article-faq .box th:first-of-type,
  #article-faq .box td:first-of-type {
    width: calc(20% - 1em);
    padding: .5em 1em;
  }
}
@media screen and (min-width: 576px) {
  #article-faq .box th,
  #article-faq .box td {
    text-align: center;
    width: auto;
    padding: .5em 2em;
  }
  #article-faq .box th:first-of-type,
  #article-faq .box td:first-of-type {
    width: auto;
  }
}
@media screen and (min-width: 768px) {
  #article-faq .box th,
  #article-faq .box td,
  #article-faq .box th:first-of-type,
  #article-faq .box td:first-of-type {
    padding: .5em 3em;
  }

  #article-faq #faq-02 .img-img {
    width: 80%;
  }
}
@media screen and (min-width: 992px) {
  #article-faq .box table {
    width: 80%;
  }
}

/* #article-faq .item-box:last-child */
#article-faq .group-inner > .item-box:last-child {
  margin-top: 6em;
}
#article-faq .group-inner > .item-box:last-child .list-checklist {
  margin: 0;
}
#article-faq .group-inner > .item-box:last-child .box-heading {
  color: var(--main-sub-color);
  text-align: center;
  padding: 1em 0;
}
#article-faq .group-inner > .item-box:last-child .item-box {
  margin-top: 0;
}
#article-faq ul.list-checklist > li::before {
  background-color: #fff;
}
#article-faq ul.list-checklist > li::after {
  border-right: .25em solid #779ec5;
  border-bottom: .25em solid #779ec5;
}
#article-faq .group-inner > .item-box:last-child .box-inner.item {
  background-color: var(--main-sub-light-color);
  flex-direction: column;
  padding: 1.5em 1em;
}
#article-faq .group-inner > .item-box:last-child .list-inner {
  width: 100%;
  margin: 0 0 1.5em;
  padding: 0 .5em 0 2em;
}
#article-faq .group-inner > .item-box:last-child .list-inner p {
  color: var(--main-sub-color);
  font-weight: 700;
}
#article-faq .group-inner > .box .img-img {
  width: 11em;
  height: 9em;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 576px) {
  #article-faq .group-inner > .item-box:last-child .box-inner.item {
    padding: 1.5em 2em;
  }
}
@media screen and (min-width: 768px) {
  #article-faq .group-inner > .item-box:last-child .box-inner.item {
    flex-direction: row;

    gap: 1.5em;
  }
}
@media screen and (min-width: 992px) {
  #article-faq .group-inner > .item-box:last-of-type .list-inner p {
    letter-spacing: 0;
  }
}
/* #article-step */
/* #article-step .group .list */
#article-step .list-inner {
  background-color: #d8e6f4;
  border-radius: .1em;
  counter-increment: box-shaped;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: 80%;
  margin: 0 auto 3em;
  padding: 1.5em;
  left: .75em;
}
#article-step .list-inner .icon {
  display: inline-block;
  width: 3em;
}
#article-step .list-inner.triangle::after {
  background: #d8e6f4;
  width: 2.5em;
  height: 2.5em;
  top: 99%;
  right: auto;
  left: calc(50% - 1.25em);
}
#article-step .list-inner p {
  width: max-content;
  margin: 0 auto;
  position: absolute;
  top: -1.5em;
  left: -2.5em;
}
#article-step .list-inner p > span {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto 0;
}
#article-step .list-inner p > span,
#article-step .list-inner p > span::after {
  background: linear-gradient(90deg, #34339a 2%, #346699 70%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#article-step .list-inner p > span::after {
  background: linear-gradient(90deg, #34339a 2%, #346699 70%);
  content: "0"counter(box-shaped);
  color: #fff;
  color: var(--main-sub-color);
  font-size: 3em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  position: relative;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#article-step .list-inner .list-heading {
  margin: auto 0;
}
#article-step .list-inner .icon-box {
  margin: 0 1em 0 1.5em;
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
  #article-step .list {
    display: grid;

    margin-block: 5em 4em;
    gap: 1.5em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  #article-step .list-inner {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 1em .5em;
    left: 0;
  }
  #article-step .list-inner.triangle::after {
    width: 2.5em;
    height: 2.5em;
    top: calc(25% - 1.25em);
    right: -2.5em;
    left: auto;
    transform: rotate(-90deg);
  }
  #article-step .list-inner .list-heading {
    text-align: center;
    min-height: 2em;
    margin: 2em auto 0;
  }
  #article-step .list-inner p {
    width: 4em;
    height: 4em;
    top: -2.6em;
    left: .5em;
  }
  #article-step .list-inner p > span::after {
    font-size: 2.5em;
  }
  #article-step .list-inner .icon-box {
    margin: 1em auto;
  }
  #article-step .list-inner .icon {
    width: 4em;
  }
}
/* #article-step .group .item-box.soudankai-box  */
#article-step .group .item-box {
  margin: 6em 0 0;
}
#article-step .group .item-box .text-box {
  margin: 0;
}
#article-step .soudankai-box {
  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
}
#article-step .soudankai-box .box {
  margin: 0 auto;
}
#article-step .soudankai-box .box > .box-inner {
  background-color: rgb(73 187 129 / 8%);
  display: flex;
  flex-direction: column;
  padding: 2em;
}
#article-step .soudankai-box .add-heading {
  background-color: var(--main-green);
  color: #fff;
  line-height: 1;
  display: inline-block;
  width: 100%;
  padding: .7em 1em .6em;
}
#article-step .soudankai-box .add-heading > span {
  font-size: 1.2em;
}
/* #article-step .group .soudankai-box .img-box  */
#article-step .soudankai-box .box .img-box {
  margin: 0 auto;
}
/* #article-step .group .soudankai-box .text-box  */
#article-step .soudankai-box .text-box .box-heading {
  color: var(--main-green);
  font-weight: 700;

  margin-block: 1em;
}
#article-step .soudankai-box .text-box .box-heading > .heading-inner {
  font-size: 1.4em;
}
@media screen and (min-width: 768px) {
  #article-step .soudankai-box .box > .box-inner {
    flex-direction: row;
  }
  #article-step .soudankai-box .box .img-box {
    width: 40%;
  }
  #article-step .group .soudankai-box .text-box {
    width: 60%;
    padding-left: 2em;
  }
  #article-step .soudankai-box .text-box .box-heading {
    margin-block: 0 2em;
  }
}
@media screen and (min-width: 992px) {
}

/* .aside */
.aside {
  margin-bottom: -6em;
  position: relative;
  z-index: 2;
}
.aside .aside-inner {
  color: #fff;
  position: relative;
}
.aside-inner .group-inner {
  padding: 2em 0;
  @media screen and (min-width: 768px) {
    padding: 3em 0;
  }
}
.aside-inner .banner-contact::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: 0;
  opacity: .5;
}
.aside-inner .banner-contact::after,
.aside-inner .banner-map::before,
.aside-inner .banner-map::after {
  background: linear-gradient(90deg, #34339a 2%, #346699 70%);
  background-color: #34339a;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -2;

  mix-blend-mode: multiply;
}
.aside a {
  color: #fff;
  display: flex;
  justify-content: center;
}
.aside .banner-contact a .cta-text {
  /* padding: .5em; */
  transition: outline .23s ease, opacity .23s ease;
}

/* .aside .banner-map */
.aside .banner-map {
  line-height: 1;
  width: 100%;
  position: relative;

  padding-block: 2.5em 3.5em;
}
.aside-inner .banner-map::before {
  background: linear-gradient(90deg, #118faf 8%, #36a2bf 60%, #118faf 89%);
  background: url(../img/bg-koshi.png);
  background-size: 1.3%;
  border-top: #cacaca .75px solid;
  opacity: .5;
}
.aside-inner .banner-map::after {
  background: #fff;
  z-index: -1;
}
.aside .banner-map a {
  display: inline-block;
  margin: 0;
  transition: transform .33s ease, opacity .33s ease;
}
.aside .banner-map a:hover {
  transform: translateY(.15em);
  /* opacity: .85; */
  transition: transform .33s ease, opacity .33s ease;
}
.aside .banner-map .link-map .img-img {
  display: block;
  position: relative;
}

.aside .banner-map .link-map .img-img::before {
  background-image: url(../img/bnr_map_pointer.webp) ;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  width: 5em;
  height: 5em;
  position: absolute;
  top: auto;
  right: 1em;
  bottom: -2.5em;
  left: auto;
  z-index: 1;
  transition: bottom .33s ease, background-image .15s ease;
}
@media screen and (max-width: 767px) {
  .aside .banner-map .link-map .img-img::before {
    animation: upAndDown .85s ease-in-out infinite alternate;
    animation-play-state: running;
  }
  @keyframes upAndDown {
    0% {
      bottom: -2.5em;
    }
    100% {
      background-image: url(../img/bnr_map_pointer_02.webp) ;
      background-repeat: no-repeat;
      bottom: -1.75em;
    }
  }
}
@media screen and (min-width: 768px) {
  .aside .banner-map .link-map .img-img::before {
    top: auto;
    right: 1em;
    bottom: -2em;
    left: auto;
  }
  .aside .banner-map .link-map:hover .img-img::before {
    background-image: url(../img/bnr_map_pointer_02.webp) ;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: -1em;
    transition: bottom .33s ease, background-image .15s ease;
  }
}

/* .move-up-and-dn {
  animation: upAndDown 1s ease-in-out infinite alternate;
  animation-play-state: running;
}
@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(12px);
  }
}
.move-up-and-dn:hover {
  animation-play-state: paused;
} */

/* .aside .banner-contact */
.aside .banner-contact {
  position: relative;
}
.aside .heading {
  position: relative;
  /* top: -.5em; */
}
.aside .heading .heading-inner {
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .05em;
}
.aside .heading + p {
  font-size: 1em;
  margin-bottom: .5em;
}
.aside .heading + p span {
  background-color: rgb(255 255 255 / 98%);
  color: var(--main-sub-color);
  padding: .2em 1.5em;
}
.aside .group-inner {
  text-align: center;
}
.aside .reserve-btn > .box-inner {
  display: flex;
  flex-direction: column;
}
/* .aside .cta-tel */
.aside .cta-tel {
  margin-block: 0 .5em ;
}
.aside .cta-tel .cta-text,
.footer .cta-tel .cta-text {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.footer .cta-tel .cta-text {
  flex-direction: row;
}
.footer .cta-tel .icon-tel {
  font-size: 2.15em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}

.top-view + .aside:first-of-type .aside-inner::before {
  background: none;
}
.top-view + .aside:first-of-type .banner-map {
  width: 100vw;
  position: relative;
  left: calc(50% - 50vw);
}
.top-view + .aside:first-of-type .banner-map a {
  margin: 0;
  padding: 0;
}
/* 2025-04-10 added */
.aside .reserve-btn > .box-inner {
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  @media screen and (min-width: 576px) {
    margin: 1em auto;
    width: 80%;
  }
  @media screen and (min-width: 768px) {
    width: 100%;
    margin: 2em 0 0;
    flex-direction: row;
    gap: 1.5em;
  }
}
.aside .cta-tel,
.aside .cta-mail {
  border-radius: 5em;
  box-shadow: inset 0px -2px 1px 2px rgb(0 0 0 / 40%);
  width: 100%;
  margin-bottom: .2em;
  position: relative;
  overflow: hidden;
  @media screen and (min-width: 768px) {
    width: 49%;
    transition: transform .33s ease;
  }
}
.aside .cta-tel {
  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient( 130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
    animation: shine 3.5s infinite;
    @media screen and (min-width: 768px) {
      content: none;
    }
  }
}
.aside .cta-mail {
  background: linear-gradient(90deg, #faad1d 2%, #fe8800 70%);
  @media screen and (min-width: 768px) {
  &:hover {
    transform: translateY(.25em);
    transition: transform .33s ease;
    }
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient( 130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
    animation: shine 3.5s infinite;
    animation-delay: .3s;
    @media screen and (min-width: 768px) {
      content: none;
    }
  }
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
.aside .cta-tel {
  background: linear-gradient(90deg, #e392c0 2%, #df59a4 76%);
}
.aside .cta-tel .cta-tel-inner,
.aside .cta-mail .cta-mail-inner {
  width: 100%;
  height: 100%;
}
.aside .cta-tel .cta-tel-inner a,
.aside .cta-mail .cta-mail-inner a {
  display: flex;
  justify-content: center;
  height: 4.5em;
  padding: 1.2em 0;
  @media screen and (min-width: 576px) {
    height: 100%;
  }
  @media screen and (min-width: 576px) {
    padding: 1.35em 0;
  }
}
.aside .cta-mail .cta-text,
.aside .cta-tel .cta-text {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.aside .cta-mail .cta-text .fz-large,
.aside .cta-tel .cta-text .fz-large {
  margin: auto 0;
  font-size: 1.2em;
  font-weight: 600;
  @media screen and (min-width: 768px) {
  }
}
.aside .cta-tel .icon-tel,
.aside .cta-mail .icon-mail {
  margin: auto 0;
}
.aside .cta-mail .icon-mail {
  width: 2em;
  height: 100%;
  margin: auto .5em auto 0;
}
.aside .cta-tel .fa-icon,
.aside .cta-mail .fa-icon {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  margin: auto .3em auto 0;
}

.page-map .aside:last-of-type {
  margin-bottom: 0;
}
.page-map .aside:last-of-type .group-inner {
  padding: 2em 0 4em;
}
@media screen and (min-width: 374px) {
  .aside .heading + p span {
    font-size: 1em;
  }
}
@media screen and (min-width: 576px) {
  .aside-inner::before {
    background-position: 100% 41%;
  }
  .aside .heading {
    top: 0;
  }
  .aside .heading .heading-inner {
    font-size: 1.3em;
  }
  .aside img.sp-only {
    display: none;
  }
  .aside img.pc-only {
    display: block;
  }
  .aside .heading + p span {
    font-size: 1.2em;
  }
}
@media screen and (min-width: 768px) {
  .aside .heading .heading-inner {
    font-size: 1.5em;
  }
  .aside .banner-map a {
    margin: 0;
  }
  .aside .heading + p span {
    font-size: 1.4em;
  }

}
@media screen and (min-width: 992px) {
  .aside .cta-btn a[class^="cta-btn-"],
  .cta-btn a {
    margin: 0 auto;
  }
}

/* #article-contact */
.ui-icon {
  width: 100%;
  height: 75%;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 6px;
}
#article-contact .tel-hyphen {
  padding-top: .6em;
}
#article-contact .field-choice {
  display: flex;
  flex-direction: row;
  position: relative;
}
#article-contact label[for="form-privacy-policy"] {
  display: inline-block;
  margin-top: .25em;
}
.field-choice .field-header {
  display: block;
}
.field-choice .input-text {
  margin-bottom: 1em;
}
.field-choice .field-body {
  position: inherit;
}
.field-choice .field-body .body-inner {
  margin: 0 0 1.5em ;
}
.field-choice .field-body .input-outer {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.field-choice .field-body .input-outer label {
  display: flex;
  justify-content: space-between;
  margin: 1em 0;
}

@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
  .field-choice .choice-space {
    padding-left: 7.27em;
  }
  .field-choice .field-header {
  }
  .field-choice .input-text {
    margin-bottom: 1em;
  }

  .field-choice .field-body .body-inner {
    margin-block: 0 2.5em ;
  }
  .field-choice .field-body .body-inner:last-of-type {
    margin-bottom: 0;
  }
  .field-choice .field-body .input-outer {
    flex-direction: row;
    margin: 0 0;
  }
  .field-choice .field-body .input-outer label {
    width: max-content;
    margin: .25em 0 0;
    position: absolute;
    right: 100%;
  }
  .field-choice .field-body .input-outer label .mustnot {
    margin: auto 1em;
  }
  .field-choice .field-body .input-outer .input-inner {
    display: block;
    width: 100%;
  }
}
#article-contact .item-name.checkbox .fa-up-right-from-square {
  padding-right: .3em;
  padding-left: .05em;
}

/* input | .select-outer */
.select-outer {
  position: relative;
}
.select-outer::before {
  background-color: var(--text-color);
  content: "";
  display: block;
  width: .8em;
  height: .8em;
  margin: auto;
  position: absolute;
  top: .4em;
  right: .75em;
  bottom: 0;
  z-index: 0;
  clip-path: polygon(50% 50%, 0 0, 100% 0);
}
/* input | .checkbox */
.item-name.checkbox,
.item-name.radio {
  padding: .3em .1em .2em 2em;
  position: relative;
}
.item-name.checkbox::before,
.item-name.radio::before {
  border: var(--main-color) 1.5px solid;
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  margin: auto;
  position: absolute;
  top: .25em;
  left: .25em;
  transition: background-color .23s ease;
}
.item-name.checkbox::before {
  background-color: transparent;
}
.item-name.checkbox::after,
.item-name.radio::after {
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  opacity: 0;
  transition: opacity .23s ease;
}
.item-name.checkbox::after {
  border-bottom: #fff 4px solid;
  border-left: #fff 4px solid;
  width: 1.1em;
  height: .8em;
  top: 0;
  bottom: .45em;
  left: .3em;
  transform: rotate(-45deg);
}
input[type="checkbox"]:checked + .item-name.checkbox::before {
  background-color: var(--main-sub-color);
  transition: background-color .23s ease;
}
input[type="checkbox"]:checked + .item-name.checkbox::after,
input[type="radio"]:checked + .item-name.radio::after {
  opacity: 1;
  transition: opacity .23s ease;
}
/* input | radio */
.radio-outer {
  position: relative;
}
.item-name.radio::before {
  background-color: #fff;
  border-radius: 50%;
}
.item-name.radio::after {
  background-color: var(--main-sub-color);
  border-radius: 50%;
  width: .9em;
  height: .9em;
  top: .425em;
  left: .425em;
}

/* #article-simulation */
#article-simulation {
  margin-bottom: 4em;
}

#article-simulation input[type="text"],
#article-simulation input[type="number"],
#article-simulation textarea,
#article-simulation select {
  background-color: #fff;
  border: #354d72 1.5px solid;
}
#article-simulation .field-inner {
  margin: 2em 0;
}
#article-simulation .form-form {
  width: 90%;
  margin: 0 auto;
}
#article-simulation .field-radio .input-outer {
  padding-right: 2em;
}
@media screen and (min-width: 768px) {
  #article-simulation .form-form {
    width: 80%;
  }
}
@media screen and (min-width: 1200px) {
  #article-simulation {
    margin-bottom: 8em;
  }
}
/* #article-simulation | #unit-sim */
#article-simulation .field-header {
  flex-direction: row;
}
#article-simulation form.form-inner {
  width: 100%;
}
#article-simulation .text-text {
  font-size: 1.1em;
  font-weight: 500;
}
/* #article-simulation | #unit-sim | .step-inner */
#article-simulation .step-inner {
  padding: 2em 0 1em;
  position: relative;
}
#article-simulation  .step-inner .step-heading {
  color: var(--main-sub-color);
  margin-bottom: 3em;
}
#article-simulation  .step-inner .step-heading .heading-inner::before {
  border-bottom: var(--main-sub-color) solid 1px;
  content: "";
  width: calc(100% + 1em);
  position: absolute;
  bottom: -.3em;
  left: -.25em;
}
#article-simulation .step-heading .font-en {
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: .05em;
  display: inline-block;
  margin-right: 1em;
  position: relative;
}
#article-simulation .step-heading .font-en::before {
  background-color: var(--main-color);
  content: "";
  display: inline-block;
  width: .4em;
  height: .4em;
  position: absolute;
  top: calc(50% - .2em);
  left: calc(100% + .25em);
  clip-path: polygon(75% 50%, 25% 0%, 0 100%);
}

#article-simulation .step-inner .step-heading .string,
#article-simulation .step-inner .step-add-heading .string,
#article-simulation .step-inner .text-simulator .string {
  font-size: 1.2em;
  font-weight: bold;
}
#article-simulation .step-2nd {
  padding-top: 6em;
}
/* #article-simulation .step-1st .step-heading .icon-icon::before,
#article-simulation .step-2nd .step-heading .icon-icon::before {
  background-color: var(--main-sub-color);
  border-radius: 50%;
  content: "";
  width: 4em;
  height: 4em;
  position: absolute;
  top: -1.65em;
  left: -.75em;
  z-index: -1;
} */
#article-simulation .step-2nd::before,
#article-simulation .step-add::before,
#article-simulation .calculator::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
}
#article-simulation .step-2nd::before,
#article-simulation .step-add::before {
  background-color: #ebf1f8;
  width: 100vw;
  height: 100%;
}
#article-simulation .calculator::before {
  background-color: #f7ecdf;
  width: 100vw;
  height: 100%;
}
#article-simulation .step-2nd::before {
  height: calc(100% + 2em);
}
@media screen and (min-width: 768px) {
  #article-simulation .step-inner .step-heading .string,
  #article-simulation .step-inner .text-simulator .string {
    font-size: 1.4em;
  }
}
/* #article-simulation | #unit-sim | .step-body */
#article-simulation .step-body .field-header .string {
  font-size: 1.2em;
}
#article-simulation .step-body .field-body .string {
  font-size: 1.1em;
}

#article-simulation .step-inner.step-add.close .step-body {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height .3s linear ,opacity .15s linear, visibility .15s linear;
}
#article-simulation .step-inner.step-add .step-body {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: height .3s linear ,opacity .15s linear, visibility .15s linear;
}
/* #article-simulation .step-inner.step-2nd::before,
#article-simulation .step-inner.step-add::before {
  background-color: #f2f6fa;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
} */
#article-simulation .unit-yen {
  display: flex;
  flex-direction: row;
}
#article-simulation .unit-yen > span {
  width: 80%;
}
#article-simulation .unit-yen > .yen {
  width: 20%;
  margin: auto 0 0;
  padding-left: 1em;
}
#article-simulation .step-add,
#article-simulation .step-start .text-simulator {
  text-align: center;
}

#article-simulation .step-add {
  padding-top: 0;
}
#article-simulation .step-add .btn-btn {
  box-shadow: none;
  padding: 1em 2em .5em;
}
.step-add .btn-btn .icon-arrow {
  display: block;
  width: 1.2em;
  margin: 0 auto;
}
/* #article-simulation | #unit-sim | .step-start */
#article-simulation .step-start {
  margin-bottom: 4em;
  padding-top: 4em;
}
#article-simulation .step-start .btn-btn:focus,
#article-simulation .step-start .btn-btn:focus-visible {
  outline: var(--form-point-color) solid 2px;
  transition: outline .15s ease;
}
#article-simulation .step-start .btn-btn {
  background: linear-gradient(180deg, var(--orange) 40%, #f55f27 100%);
  box-shadow: 2px 4px 6px #959595;
}
#article-simulation .step-start.triangle::after {
  background: #ebf1f8;
}
#article-simulation #result-item .note {
  border: #f5963a 1.5px solid;
  padding: .5em 1em;
}

/* #article-simulation | #unit-sim | .close */
#unit-sim .field-inner.close,
#unit-sim .close .field-inner {
  line-height: 0;
  height: 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: line-height .3s ease, height .3s linear, margin-top .3s ease, opacity .15s linear, visibility .15s linear;
}
#unit-sim .close .step-body {
  padding-top: 0;
}
#unit-sim .close .field-header {
  margin-top: 0;
  margin-bottom: 0;
}
#unit-sim .close .btn-btn .icon-icon {
  transform: rotate(180deg);
}
#unit-sim .close .input-text {
  border-width: 0;
  line-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
#unit-sim .close .unit-yen .yen {
  padding-bottom: 0;
}
/* #article-simulation | #unit-sim | (open) */
#unit-sim .field-inner {
  line-height: 1.75;
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: line-height .3s ease, height .3s linear, opacity .15s linear .1s, visibility .15s linear .1s;
}
#unit-sim .step-body {
  transition: padding-top .3s ease;
}
#unit-sim .field-header {
  transition: margin-top .3s ease, margin-bottom .3s ease;
}
#unit-sim .btn-btn .icon-icon {
  transform: rotate(0);
  transition: transform .3s ease;
}
#unit-sim .input-text {
  transition: border-width .3s ease, line-height .3s linear, padding-top .3s ease, padding-bottom .3s ease;
}
#unit-sim .unit-yen .yen {
  transition: padding-bottom .3s ease;
}
/* #article-simulation | #result-item */
#article-simulation #result-item .calculator-inner {
  padding: 1.5em 0 1em;
  position: relative;
}
#article-simulation #result-item .calculator-inner::before {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: -1;
}
#article-simulation #result-item .btn-btn {
  font-size: 1em;
}
#article-simulation #result-item .calculator-heading {
  text-align: center;
  margin-bottom: 1em;
}
#article-simulation #result-item .calculator-heading .heading-inner {
  font-size: 1.5em;
}
/*  #article-simulation | #result-item | .result */
#article-simulation #result-item .result {
  text-align: center;
}
#article-simulation #result-item .result > .result-inner {
  margin-bottom: 4em;
}
#article-simulation #result-item .result-heading {
  margin-bottom: 1.5em;
}
#article-simulation #result-item .result .conclusion > span {
  font-size: 1.2em;
}
#article-simulation #result-item .result .conclusion .amount {
  color: var(--red);
  font-size: 2em;
  font-weight: bold;
  padding: 0 .1em;
}
#article-simulation #result-item .result .item {
  justify-content: space-evenly;
}
#article-simulation #result-item .result .text-link,
#article-simulation #result-item .result .link-inner {
  height: 100%;
}
#article-simulation #result-item .result .link-inner {
  display: flex;
  justify-content: center;
}
#article-simulation #result-item .result .link-inner .string {
  margin: auto 0;
}

/* #article-simulation | #result-item | .detail */
#article-simulation #result-item .detail .item {
  flex-direction: column;
}
#article-simulation #result-item .detail .item-inner {
  display: flex;
  justify-content: center;
}
#article-simulation #result-item .detail .item-header {
  background-color: rgb(244 140 33 / 90%);
  border-bottom: #fff 1.5px solid;
  color: #fff;
  text-align: left;
  min-width: 10.5em;
  padding: 1em;
}
#article-simulation #result-item .detail .item-header .string,
#article-simulation #result-item .detail .item-body .string {
  font-size: 1.2em;
}
#article-simulation #result-item .detail .item-body {
  background-color: rgb(255 255 255 / 90%);
  border-bottom: #e5d9c4 1.5px solid;
  text-align: left;
  width: 100%;
  min-width: 40%;
  padding: 1em 2em 1em 3em;
}
#article-simulation #result-item .detail .item-inner:last-of-type .item-header,
#article-simulation #result-item .detail .item-inner:last-of-type .item-body {
  border: none;
}
@media screen and (min-width: 376px) {
  #article-simulation #result-item .detail .item-header {
    padding: 1em 2em;
  }
}
@media screen and (min-width: 768px) {
  #article-simulation #result-item .detail .item-body {
    width: auto;
  }
}
/* #article-simulation | #result-item | .note */
#article-simulation #result-item .note .note-inner {
  font-size: .9em;
}
#article-simulation #result-item .note .rice-inner {
  text-align: left;
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 768px) {
  #article-simulation #result-item .note {
    margin: 0 3em;
  }
}

/* footer */
.footer {
  background-color: var(--main-color);
  color: #fff;
}
.footer-inner {
  margin-block: 2em 5em;
}
.footer .text-box {
  margin: 1em 0;
}
.footer a {
  color: #fff;
}
.footer .text-box .text-text {
  text-align: left;
  max-width: max-content;
  margin: 0 auto;
}
@media screen and (min-width: 576px) {
  .footer-inner {
    margin-block: 2em 6em;
  }
}
@media screen and (min-width: 768px) {
  .footer-inner {
    margin-block: 2em 1em;
  }
}

/* .footer | .go-to-top */
.go-to-top {
  position: fixed;
  right: 0;
  opacity: 0;
  transition: opacity .33s ease;
}
.changed .go-to-top {
  width: 4em;
  height: 4em;
  bottom: 4.1em;
  opacity: 1;
  transition: opacity .33s ease;
}
.changed .go-to-top.absolute {
  position: absolute;
  top: -3.5em;
  bottom: auto;
}
.go-to-top a {
  /* background: linear-gradient(135deg, #243e74 50%, #1c3368 50%); */
  background-color: var(--main-color);
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: transform .23s ease;;
}
.go-to-top a:hover {
  transform: translateY(-.3em);
  transition: transform .23s ease, opacity .33s ease;
}
.go-to-top a > span {
  font-size: 1.2em;
}
.go-to-top a > span {
  background-color: #fff;
  content: "";
  display: inline-block;
  width: .75em;
  height: .75em;
  position: relative;
  top: calc(50% - .4em);
  left: calc(50% - .375em);
  clip-path: polygon(100% 75%, 50% 0, 0 75%);
  transform: rotate(0);
}
@media screen and (min-width: 576px) {
  .changed .go-to-top {
    /* bottom: 9.8em; */
  }
}
@media screen and (min-width: 768px) {
  .go-to-top {
    right: 1.8em;
  }
  .changed .go-to-top {
    width: 3.5em;
    height: 3.5em;
    bottom: 0;
  }
}
/* .footer .fotter-banner */
.footer-banner {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  transition: opacity .33s ease;
  @media screen and (min-width: 768px) {
    display: none;
  }
}
.footer-banner .text-box {
  padding: .5em 0;
}
.footer-banner .banner-inner.item {
  flex-direction: row-reverse;
  justify-content: space-around;
}
/* .footer-banner .cta-tel */
.footer-banner .cta-tel,
.footer-banner .cta-mail {
  width: 49%;
  border-radius: 5em;
  margin-bottom: .2em ;
  box-shadow: inset 0 -3px 1px 2px rgb(0 0 0 / 40%);
}
.footer-banner .cta-tel {
  background: linear-gradient(90deg, #e392c0 2%, #df59a4 76%);
}
.footer-banner .cta-tel .cta-tel-inner,
.footer-banner .cta-mail .cta-mail-inner {

}
.footer-banner .cta-tel .cta-tel-inner a,
.footer-banner .cta-mail .cta-mail-inner a {
  display: flex;
  justify-content: center;
  padding: .8em 0 .85em;
}
.footer-banner .cta-tel .fz-small {
  line-height: 1.1;
  padding-top: .2em;
  font-size: .95em;
}
.footer-inner .cta-tel .fa-icon {
  margin-right: .4em;
}
.footer-inner .cta-tel .fz-large,
.footer-inner .cta-mail .fz-large {
  font-size: 1.3em;
  font-weight: 600;
  margin: auto 0;
  letter-spacing: -.01em;
}
/* .footer-banner .cta-mail */
.footer-banner .cta-mail {
  background: linear-gradient(90deg, #faad1d 2%, #fe8800 70%);
}
.footer-banner .cta-mail .cta-text {
  display: flex;
  flex-direction: row;
}
.footer-banner .cta-mail .icon-mail {
  margin-right: .4em;
  width: 2.8em;
  display: inline-block;
}


/* .footer-banner .cta-btn */
/* .footer-banner .cta-btn {
  margin: 0;
  width: 50%;
}
.footer .cta-btn a {
  min-width: auto;
  width: 100%;
}
.footer-banner .cta-btn img {
  min-height: 40px;

  object-fit: cover;
  object-position: 40% 0;
}
@media screen and (min-width: 576px) {
  .footer .cta-btn a {
    margin: 0;
  }
  .footer-banner .cta-btn img {
    object-position: 0;
  }
}
@media screen and (min-width: 768px) {
  .footer-banner {
    display: none;
    opacity: -1;
  }
}*/

/* .footer .footer-box */
.footer .footer-box .link-text .icon {
  padding-left: .2em;
}

/* .footer.copyright */
.copyright {
  text-align: center;
}

/*
.page-map
 */
.page-map .article-header .article-heading {
  padding-top: 6em;
}
.page-map .group-heading {
  text-align: center;
  margin-bottom: 3em;
}
.page-map .group-heading > .heading-inner {
  font-size: 1.4em;
}
.page-map a[href^="#"] {
  color: var(--main-sub-color);
}
.page-map .article .text-text {
  margin: 2em 0;
}
.page-map .page-nav .item {
  flex-wrap: wrap;

  gap: 1.5em;
}
.page-map .page-nav .item .list-inner {
  width: calc(50% - .75em);
  margin-bottom: 0;
}
.page-map .page-nav .item .list-inner a {
  border: 1.5px solid var(--main-sub-color);
  text-align: center;
  display: block;
  min-width: 8em;
  padding: 1.5em;
  position: relative;
}
.page-map .page-nav .item .list-inner span {
  font-size: 1.2em;
}
.page-map .article[id$="-ku"] .img-img {
  max-width: 900px;
  margin: 0 auto 2em;
}
.page-map .text-heading {
  text-align: center;
}
.page-map .text-heading > .heading-inner {
  color: var(--main-sub-color);
  font-size: 1em;
  margin: 0 auto;
  position: relative;
}
.page-map .text-heading > .heading-inner::before {
  background: linear-gradient(90deg, #333899 0%, #369 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.page-map #minato-ku .text-heading > .heading-inner {
  font-size: .9em;
}
.page-map .page-nav .item .list-inner a::before {
  background-color: var(--main-sub-color);
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.page-map .page-nav .item .list-inner a:hover {
  color: #fff;
}
.page-map .page-nav .item .list-inner a:hover::before {
  width: 100%;
  transition: width .33s ease;
}
.page-map .footer a {
  color: #fff;
}
@media screen and (min-width: 374px) {
  .page-map #minato-ku .text-heading > .heading-inner {
    font-size: 1em;
  }
}
@media screen and (min-width: 768px) {
  .page-map .page-nav .item {
    gap: 2em;
  }
  .page-map .page-nav .item .list-inner {
    width: calc(33.3% - 1.33em);
  }
  .page-map .page-nav .item .list-inner a {
    padding: 1em 1.5em;
  }
  .page-map .text-heading > .heading-inner,
  .page-map #minato-ku .text-heading > .heading-inner {
    font-size: 1.2em;
  }
}
@media screen and (min-width: 992px) {
  .page-map .page-nav .item {
    gap: 1em;
  }
  .page-map .page-nav .item .list-inner {
    width: calc(20% - .8em);
  }
}
/* 2025-05-23 added 料金表 */
/* #article-fee */
#article-fee .article-header {
  & .heading-inner:not(.font-en) {
  }
  @media screen and (min-width: 768px) {
    & .heading-inner:not(.font-en) {
      font-size: 1.8em;
    }
  }
}
#article-fee .article-heading {
  &::before {
    background-color: #abc6d5;
    content: "";
    width: 60%;
    height: 1.5px;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 20%;
  }
  &::after {
    background-color: var(--bg);
    border-right: 1.5px solid #abc6d5;
    border-bottom: 1.5px solid #abc6d5;
    content: "";
    display: block;
    width: 1.4em;
    height: 1.4em;
    position: absolute;
    top: auto;
    bottom: -0.65em;
    left: calc(50% - .7em);
    transform: rotate(45deg);
  }

  & .heading-inner:first-of-type {
    display: inline-block;
    width: 80%;
    position: relative;
    &::before,
    &::after {
      content: "";

      margin: 0 auto;
      position: absolute;
    }
    &::before {
      background: url(../img/light.webp) no-repeat;
      background-size: contain;
      width: 2.2em;
      height: 2.2em;
      top: 0;
      left: -1em;
    }
  }
  @media screen and (min-width: 374px) {
    & .heading-inner:first-of-type {
      &::before {
        left: -.5em;
      }
    }
  }
  @media screen and (min-width: 576px) {
    & .heading-inner:first-of-type {
      width: auto;
      padding-left: 1em;
      &::before {
        top: -.5em;
        left: -1.1em;
      }
    }
  }
  @media screen and (min-width: 768px) {
    & .heading-inner:first-of-type {
      width: auto;
      padding-left: 1em;
      &::before {
        top: -50%;
        left: -1em;
      }
    }
  }
}

#article-fee .item-box .box {
  & .text-box .list-inner {
    margin-bottom: 0;
  }
}
#article-fee .box-anshin {
  position: relative;
  @media screen and (min-width: 768px){
    width: 80%;
    margin: 2em auto;
  }
  & > .box-inner {
    display: flex;
    justify-content: center;
    padding: 1em 1.5em ;
  }
  & .img-box  {
    width: auto;
    & .img-img {
      width: 5em;
      height: auto;
    }
  }
  & .text-box {
    margin: 0;
    padding-left: 1em;
    & .text-text {
      margin: 0;
    }
    & .text-bold {
      background: var(--red-light);
      color: #fff;
      display: inline-block;
      font-size: 1.4em;
      font-weight: 600;
      padding: .35em 1em;
    }
  }
  @media screen and (min-width: 768px) {
    & .img-box  {
      padding: 1em 0;
      & .img-img {
        width: 7em;
        height: auto;
      }
    }
    & .text-box {
      padding-left: 1.5em;
      & .text-text {
        margin: 1em 0;
      }
      & .text-bold {
        font-size: 1.5em;
      }
    }
  }
}

#article-fee .box-warning {
  background-color: var(--main-color);
  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
  color: #ededed;
  margin: 0 0 3em;
  padding: 1em;
  @media screen and (min-width: 576px) {
    padding: 1em 1.5em;
  }
  @media screen and (min-width: 768px) {
    width: 85%;
    padding: 1em ;
    margin: 2em auto 4em;
  }

  & .text-color-02 {
    line-height: 1;
    text-align: center;
    padding: 0 1em;
    margin: 0 0 1em ;
    position: relative;
    &::before {
      background: url(../img/warning.webp) no-repeat;
      background-size: contain;
      content: "";
      display: inline-block;
      width: 3em;
      height: 3em;
      position: relative;
      top: -.25em;
      left: 0;
    }
    & > span {
      display: inline-block;
      margin: auto 0;
      font-size: 1.4em;
      font-weight: 700;
      position: relative;
    }
  }
  & .text-color {
    background-color: var(--yellow);
    color: var(--main-color);
    padding: 1em;
    margin: 0;
    letter-spacing: .01em;
    & > span {
      font-weight: 600;
    }
  }
  @media screen and (min-width: 768px) {
    & .text-color-02 {
      margin: -1em 0 1em;
      &::before {
        margin-right: .5em;
        top: .75em;
      }
      & > span {
      }
    }
  }
}

#article-fee ul.list-checklist > li {
  &::after {
    border-right: .25em solid #779ec5;
    border-bottom: .25em solid #779ec5;
  }

}

.table {
  width: 100%;
}
.table .thead {
  & .tr {
    background-color: var(--main-sub-color);
    color: #fff;
    &:first-of-type {
      border-bottom: 1px solid var(--main-sub-light-color);
    }
  }
  & .th {
    border-left: 1px solid var(--main-sub-light-color);
    font-weight: bold;
    letter-spacing: .1em;
  }
  & .th .text-text {
    margin: .75em 0;
  }
}

@media screen and (max-width: 767px) {
  #article-fee .item-box .box {
    & > .box-inner {
      margin: 0 -.5em;
    }
  }
  #article-fee .thead {
    & .th[rowspan="2"] {
      width: 4.4em;
    }
  }
  #article-fee .tbody .td {
    &:not(:first-of-type) {
      border-left: 1px solid #c1c6cd;
    }
    & .tax-excluded {
      & .num {
        letter-spacing: -.025em;
        min-width: 2.5em;
      }
      & .yen {
        display: inline-block;
      }
    }
    & .tax-included {
      display: block;
      & .string {
        display: block;
      }
    }
  }
  #article-fee .tbody .tr {
    border-bottom: 1px solid #c1c6cd;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  #article-fee .tbody .td {
    & .tax-included {
      & .string {
        display: inline-block;
      }
    }
  }
  #article-fee .thead {
    & .th[rowspan="2"] {
        width: 6em;
    }
  }
}
.table .tbody {
  border-left: 1px solid #c1c6cd;
  border-right: 1px solid #c1c6cd;
  border-bottom: 1px solid #c1c6cd;
  @media screen and (min-width: 768px) {
    border-left: 1px solid #c1c6cd;
    border-right: 1px solid #c1c6cd;
    border-bottom: 1px solid #c1c6cd;
  }
  & .tr {
    &:nth-of-type(2n+1) {
      background-color: #ebf1f8;
    }
    @media screen and (min-width: 768px) {
      &:last-of-type td:first-of-type {
        border-bottom: none;
      }
    }
  }
  & .td {
    font-weight: bold;
    & .td-inner {
      text-align: right;
      padding: .5em;
      & .text-text {
      margin: 0;
      }
      & .text-small {
        color: #323232;
        font-weight: 400;
        letter-spacing: -.02em;
        font-size: .8em;
      }
    }
    & .tax-excluded,
    & .tax-included {
      line-height: 1.4;
    }
    & .tax-excluded {
      font-size: 1.1em;
      & .num {
        font-size: 1.25em;
      }
    }
    &:first-of-type {
      background-color: #e0e4ea;
      & .td-inner {
        text-align: left  ;
      }
    }
    &:nth-of-type(2) {
      color: var(--main-sub-color);
      font-size: 1.15em;
    }
    @media screen and (min-width: 768px) {
      &:first-of-type {
        border-bottom: 1px solid #fff;
        border-right: 1px solid #c1c6cd;
      }
      &:not(:first-of-type) {
        border-left: 1px solid #c1c6cd;
      }
      & .td-inner {
        padding: .75em .5em .75em .5em;
        & .text-text {
          margin: 0;
        }
        & .text-small {
          font-size: .8em;
          font-weight: 400;
        }
      }
      &:first-of-type .td-inner  {
        text-align: center;
        padding: .75em .5em;
      }
      & .tax-included {
        display: block;
      }
    }
  }
}
#article-fee .item-box .box .text-box.text-small {
  font-size: .85em;
  line-height: 1.5;
}

/* 2025-09-11 */
#article-simulation,
#article-simulation + aside {
  display: none;
}
/*  */