/* ==========================================================================
   GO POINT - style.css（ページ固有＋調整）
   ページ別(#gopoint_*)・シミュレーター・調整(rate-ex/minisim/gnav/faq 等)。通常はここを編集。
   ※ SCSS廃止・このCSSを直接編集。読み込み順: reset → common → style（→ slick）。
      更新時は inc/head.php の各 ?v= を変更してキャッシュ更新。
   ========================================================================== */

#gopoint_top #go_point_various .sec_inner {
  order: 1px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  background-color: var(--color-white);
  padding: 30px 7%;
  margin-bottom: 120px;
}
@media screen and (min-width: 768px) {
  #gopoint_top #go_point_various .sec_inner {
    padding: 40px 50px;
  }
}
#gopoint_top #go_point_various .opening_text {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
#gopoint_top #go_point_various .ttl {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
}
#gopoint_top #go_point_various .ttl:before,
#gopoint_top #go_point_various .ttl:after {
  border-top: 1px solid;
  content: "";
  width: 23%;
}
#gopoint_top #go_point_various .ttl:before {
  margin-right: 1em;
}
#gopoint_top #go_point_various .ttl:after {
  margin-left: 1em;
}
@media screen and (min-width: 768px) {
  #gopoint_top #go_point_various .ttl:before,
  #gopoint_top #go_point_various .ttl:after {
    width: 25%;
  }
}
#gopoint_top #go_point_various .contents {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #gopoint_top #go_point_various .contents {
    justify-content: space-between;
  }
}
#gopoint_top #go_point_various .contents .btn_area {
  margin-top: 30px;
}
#gopoint_top #go_point_various .contents .btn_area .btn {
  display: block;
  padding: 10px 0;
  border: 1px solid var(--color-primary);
  border-radius: 25px;
  width: 150px;
  margin: auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-primary);
}
#gopoint_top #go_point_various .contents .btn_area:last-child {
  margin-left: 40px;
}
@media screen and (min-width: 768px) {
  #gopoint_top #go_point_various .contents .btn_area .btn {
    width: 350px;
  }
  #gopoint_top #go_point_various .contents .btn_area:last-child {
    margin-left: 0;
  }
}
#gopoint_top #mainvisual {
  height: 450px;
  margin: 0 0 30px;
}
@media screen and (min-width: 768px) {
  #gopoint_top #mainvisual {
    height: 240px;
    margin: 0;
    margin: 0;
  }
}
#gopoint_top #mainvisual .inner {
  top: 55%;
}
@media screen and (min-width: 768px) {
  #gopoint_top #mainvisual .inner .ttl {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  #gopoint_top #mainvisual .inner .ttl img {
    width: 400px;
  }
}
#gopoint_top #mainvisual .inner ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  #gopoint_top #mainvisual .inner ul {
    display: none;
  }
}
#gopoint_top #mainvisual .inner ul li {
  width: calc(50% - 5px);
  height: 120px;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 20px;
}
#gopoint_top #mainvisual .inner ul li a {
  display: block;
  height: 100%;
  padding: 10px;
}
#gopoint_top #mainvisual .inner ul li a img {
  width: 50px;
  margin: 0 auto 5px;
}
#gopoint_top #mainvisual .inner ul li:nth-child(n + 3) {
  margin-top: 10px;
}
#gopoint_top #mainvisual .inner ul li:nth-child(4) {
  position: relative;
  border: 1px solid var(--color-white);
  overflow: hidden;
}
#gopoint_top #mainvisual .inner ul li:nth-child(4) a {
  pointer-events: none;
}
#gopoint_top #mainvisual .inner ul li:nth-child(4)::before {
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}
#gopoint_top #mainvisual .inner ul li:nth-child(4)::after {
  content: "coming soon";
  color: var(--color-white);
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #gopoint_top #navi .inner {
    background: none;
    padding: 50px 0;
  }
  #gopoint_top #navi .inner ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #gopoint_top #navi .inner ul li {
    width: calc(25% - 5px);
    height: 150px;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  #gopoint_top #navi .inner ul li a {
    display: block;
    height: 100%;
    padding: 15px;
  }
  #gopoint_top #navi .inner ul li a div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  #gopoint_top #navi .inner ul li a div p.hover_off {
    display: block;
  }
  #gopoint_top #navi .inner ul li a div p.hover_on {
    display: none;
  }
  #gopoint_top #navi .inner ul li a div p img {
    width: 70px;
    margin: 0 auto 5px;
  }
  #gopoint_top #navi .inner ul li:not(:nth-child(4))::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/common/bg_btn.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
  }
  #gopoint_top #navi .inner ul li:hover::before {
    opacity: 1;
  }
  #gopoint_top #navi .inner ul li:not(:nth-child(4)):hover a p.hover_off {
    display: none;
  }
  #gopoint_top #navi .inner ul li:not(:nth-child(4)):hover a p.hover_on {
    display: block;
  }
  #gopoint_top #navi .inner ul li:not(:nth-child(4)):hover p {
    color: var(--color-white);
  }
  #gopoint_top #navi .inner ul li:nth-child(4) {
    position: relative;
    border: 1px solid var(--color-white);
    overflow: hidden;
  }
  #gopoint_top #navi .inner ul li:nth-child(4) a {
    pointer-events: none;
  }
  #gopoint_top #navi .inner ul li:nth-child(4)::before {
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    z-index: 10;
  }
  #gopoint_top #navi .inner ul li:nth-child(4)::after {
    content: "coming soon";
    color: var(--color-white);
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 20;
  }
  #gopoint_top #navi .inner ul li:nth-child(4):hover {
    transform: none;
  }
}
#gopoint_top #about_btn .inner .btn_list {
  margin-top: 30px;
}
#gopoint_top #about_btn .inner .btn_list li:not(:first-child) {
  margin-top: 30px;
}
#gopoint_top #about_btn .inner .btn_list li .ttl {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
#gopoint_top #about_btn .inner .btn_list li .ttl:before,
#gopoint_top #about_btn .inner .btn_list li .ttl:after {
  content: "";
  border-top: 1px solid;
  width: 15%;
}
@media screen and (min-width: 768px) {
  #gopoint_top #about_btn .inner .btn_list li .ttl:before,
  #gopoint_top #about_btn .inner .btn_list li .ttl:after {
    width: 30%;
  }
}
#gopoint_top #about_btn .inner .btn_list li .ttl:before {
  margin-right: 20px;
}
#gopoint_top #about_btn .inner .btn_list li .ttl:after {
  margin-left: 20px;
}
#gopoint_top #about_btn .inner .btn_list .btn_area {
  align-items: center;
  justify-content: space-between;
}
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_save,
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_use {
  position: relative;
  width: calc(50% - 5px);
  border: 1px solid var(--color-primary);
  border-radius: 50px;
  overflow: hidden;
}
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_save a,
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_use a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  transition: color 0.3s ease;
  border-radius: 50px;
  z-index: 1;
}
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_save a::before,
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_use a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/common/bg_btn.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_save a:hover::before,
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_use a:hover::before {
  opacity: 1;
}
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_save a:hover p,
#gopoint_top #about_btn .inner .btn_list .btn_area .btn_use a:hover p {
  color: var(--color-white);
  position: relative;
  z-index: 1;
}
#about_use .inner .flex {
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
#about_use .inner .flex img {
  width: 32%;
  max-width: 120px;
  margin-right: 10px;
}
@media screen and (min-width: 768px) {
  #about_use .inner .flex img {
    max-width: 160px;
  }
}
@media screen and (min-width: 768px) {
  #about_use .inner p span {
    font-size: 32px;
    margin: 0 5px;
  }
}
#about_use .inner hr {
  margin: 30px 0;
}
@media screen and (min-width: 768px) {
  #about_use .inner hr {
    margin: 30px 0;
  }
}
#about_use .inner .user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0;
}
#about_use .inner .user li {
  width: calc(33.3% - 5px);
}
#shop .inner .shop_ttl {
  color: var(--color-primary);
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
#shop .inner .shop_ttl:before,
#shop .inner .shop_ttl:after {
  content: "";
  border-top: 1px solid;
  width: 5%;
}
@media screen and (min-width: 768px) {
  #shop .inner .shop_ttl:before,
  #shop .inner .shop_ttl:after {
    width: 24%;
  }
}
#shop .inner .shop_ttl:before {
  margin-right: 20px;
}
#shop .inner .shop_ttl:after {
  margin-left: 20px;
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0;
    gap: 50px;
  }
}
#shop .inner .map_area .company_logo {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px auto;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area .company_logo {
    display: block;
    width: 50%;
    margin: 0 0 30px;
  }
}
#shop .inner .map_area .company_logo li:nth-child(1) {
  width: 100px;
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area .company_logo li:nth-child(1) {
    width: 150px;
  }
}
#shop .inner .map_area .company_logo li:nth-child(2) {
  width: 160px;
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area .company_logo li:nth-child(2) {
    width: 260px;
    margin: 30px 0 0;
  }
}
#shop .inner .map_area .company_logo li:nth-child(3) {
  width: 160px;
  margin: 10px auto 0;
}
@media screen and (min-width: 520px) {
  #shop .inner .map_area .company_logo li:nth-child(3) {
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area .company_logo li:nth-child(3) {
    width: 260px;
    margin: 30px 0 0;
  }
}
@media screen and (min-width: 768px) {
  #shop .inner .map_area p {
    text-align: left;
  }
}
#shop .inner .mockup_img {
  margin-top: 30px;
}
#shop .inner .shop_map {
  margin: 30px auto;
}
@media screen and (min-width: 768px) {
  #shop .inner .shop_map {
    width: 50%;
    margin: 0;
  }
}
#shop .inner .shop_list {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #shop .inner .shop_list {
    width: 800px;
    margin: 30px calc(0% - 50px);
  }
}
#shop .inner .shop_list::before,
#shop .inner .shop_list::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 15%;
  height: 100%;
  z-index: 1;
}
#shop .inner .shop_list::before {
  background-image: linear-gradient(
    90deg,
    white,
    rgba(255, 255, 255, 0) 100%,
    rgba(255, 255, 255, 0.8) 50%
  );
  left: 0;
}
#shop .inner .shop_list::after {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.8) 50%,
    white
  );
  right: 0;
}
#shop .inner .shop_list li img {
  border-radius: 20px;
}
#shop .inner .shop_list li p {
  font-weight: normal;
}
#shop .inner .bottom_area {
  margin-bottom: 30px;
}
#shop .inner .bottom_area .btn {
  display: block;
  padding: 10px 0;
  border: 1px solid var(--color-primary);
  border-radius: 50px;
  width: 100%;
  max-width: 350px;
}
@media screen and (min-width: 768px) {
  #shop .inner .img_area {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  #shop .inner .img_area {
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  #shop .inner .img_area li {
    width: calc(50% - 5px);
  }
}
.switching {
  width: 95%;
  max-width: 800px;
  margin: 0 auto 30px;
}
.switching .select_list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.switching .select_list li {
  width: 50%;
}
.switching .select_list li.select {
  border-bottom: 1px solid var(--color-primary);
}
.switching .select_list li:not(.select) {
  border-bottom: 1px solid #e5e5ea;
}
#gopoint_owner_use section .inner .emphasis {
  margin-bottom: 30px;
}
#gopoint_owner_use section .inner .emphasis .flex {
  align-items: flex-end;
  justify-content: center;
}
#gopoint_owner_use section .inner .emphasis .flex img {
  width: 180px;
}
#gopoint_owner_use section .inner .owner_use_list {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  #gopoint_owner_use section .inner .owner_use_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
#gopoint_owner_use section .inner .owner_use_list li {
  justify-content: flex-start;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #gopoint_owner_use section .inner .owner_use_list li {
    width: 50%;
  }
}
#gopoint_owner_use section .inner .owner_use_list li:not(:first-child) {
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  #gopoint_owner_use section .inner .owner_use_list li:not(:first-child) {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  #gopoint_owner_use section .inner .owner_use_list li:nth-child(n + 3) {
    margin-top: 15px;
  }
}
#gopoint_owner_use section .inner .owner_use_list li img {
  width: 60px;
  padding: 10px;
  margin-right: 10px;
  border-radius: 50px;
}
@media screen and (min-width: 768px) {
  #gopoint_owner_use section .inner .owner_use_list li img {
    width: 80px;
  }
}
#gopoint_owner_use section .inner .owner_use_list li p span {
  font-weight: normal;
}
#shop_index #mainvisual .inner {
  padding: 0;
}
#shop_index #shop_list .inner {
  padding: 0 0 30px 0;
  background: none;
}
#shop_index #shop_list .inner .tab-menu {
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
#shop_index #shop_list .inner .tab-menu .tab-button {
  width: 50%;
  border: none;
  border-bottom: 1px solid #e5e5ea;
  background: none;
}
#shop_index #shop_list .inner .tab-menu .tab-button.active {
  color: var(--color-primary);
  border-bottom: solid 2px var(--color-primary);
}
#shop_index #shop_list .inner .tab-content .tab-pane {
  display: none;
  list-style: none;
  padding: 0;
}
#shop_index #shop_list .inner .tab-content .tab-pane.active {
  display: block;
}
#shop_index #shop_list .inner .tab-content ul li {
  background-color: var(--color-white);
}
#shop_index #shop_list .inner .tab-content ul li:not(:first-child) {
  margin-top: 10px;
}
#shop_index #shop_list .inner .tab-content ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-black);
}
#shop_index #shop_list .inner .tab-content ul li a .imgbox1-1 {
  width: 30%;
}
@media screen and (min-width: 1024px) {
  #shop_index #shop_list .inner .tab-content ul li a .imgbox1-1::before {
    padding-top: 56.25%;
  }
}
@media screen and (min-width: 1024px) {
  #shop_index #shop_list .inner .tab-content ul li a .imgbox1-1 {
    width: 37%;
  }
}
#shop_index #shop_list .inner .tab-content ul li a dl {
  width: 70%;
  padding: 0 5px;
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1024px) {
  #shop_index #shop_list .inner .tab-content ul li a dl {
    width: 63%;
    padding: 0 15px;
  }
}
#shop_index #shop_list .inner .tab-content ul li a dl dt {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dt {
    width: 20%;
    max-width: 100px;
  }
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dt:first-of-type {
    width: 100%;
    max-width: 220px;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dt:nth-of-type(2) {
    width: 50%;
    max-width: 200px;
  }
}
#shop_index #shop_list .inner .tab-content ul li a dl dt:not(:first-of-type) p {
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  #shop_index
    #shop_list
    .inner
    .tab-content
    ul
    li
    a
    dl
    dt:not(:first-of-type)
    p {
    font-size: 14px;
  }
}
#shop_index #shop_list .inner .tab-content ul li a dl dd {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dd {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dd:first-of-type {
    width: 50%;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 768px) {
  #shop_index #shop_list .inner .tab-content ul li a dl dd:nth-of-type(2) {
    width: 50%;
  }
}
#shop_index #shop_list .inner .tab-content ul li a dl dd:not(:first-of-type) p {
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  #shop_index
    #shop_list
    .inner
    .tab-content
    ul
    li
    a
    dl
    dd:not(:first-of-type)
    p {
    font-size: 14px;
  }
}
#shop_detail #shop_mainvisual {
  margin-top: 40px;
}
#shop_detail #shop_mainvisual .inner {
  background: none;
  padding: 0;
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_mainvisual .inner .shop_name {
    padding: 10px 0;
  }
}
#shop_detail #shop_mainvisual .inner .shop_name span {
  color: var(--color-black);
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_mainvisual .inner .shop_name span {
    font-size: 16px;
    margin-right: 10px;
  }
}
#shop_detail #shop_mainvisual .bg_mainvisual {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_mainvisual .bg_mainvisual {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
#shop_detail #shop_mainvisual .bg_mainvisual::before {
  content: "";
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
  z-index: -1;
}
#shop_detail #shop_mainvisual .bg_mainvisual.shinjuku::before {
  background-image: url(../img/common/shop_shinjuku.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.kawagoe::before {
  background-image: url(../img/common/shop_kawagoe.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.urawa::before {
  background-image: url(../img/common/shop_urawa.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.tokorozawa::before {
  background-image: url(../img/common/shop_tokorozawa.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.keyaki::before {
  background-image: url(../img/common/shop_keyaki.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.kanazawaekimae::before {
  background-image: url(../img/common/shop_kanazawaekimae.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.kanazawananbu::before {
  background-image: url(../img/common/shop_kanazawananbu.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.nonoichi::before {
  background-image: url(../img/common/shop_nonoichi.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.komatsu::before {
  background-image: url(../img/common/shop_komatsu.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.kenchomae::before {
  background-image: url(../img/common/shop_kenchomae.jpg);
}
#shop_detail #shop_mainvisual .bg_mainvisual.itami::before {
  background-image: url(../img/common/shop_itami.jpg);
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_mainvisual .bg_mainvisual .imgbox16-9 {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
  }
}
#shop_detail #shop_info .inner {
  padding: 0;
  background: none;
}
#shop_detail #shop_info .inner .shop_info_list {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_info .inner .shop_info_list {
    margin-bottom: 50px;
  }
}
#shop_detail #shop_info .inner .shop_info_list li {
  padding: 3px 10px;
  margin-top: 5px;
}
#shop_detail #shop_info .inner .shop_info_list li:not(:last-child) {
  margin-right: 5px;
}
#shop_detail #shop_info .inner .shop_info_list li p {
  font-weight: normal;
}
#shop_detail #shop_info .inner .shop_detail {
  align-items: normal;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  #shop_detail #shop_info .inner .shop_detail {
    margin-top: 50px;
  }
}
#shop_detail #shop_info .inner .shop_detail dt,
#shop_detail #shop_info .inner .shop_detail dd {
  border-bottom: 1px solid #444;
}
#shop_detail #shop_info .inner .shop_detail dt:not(:first-of-type),
#shop_detail #shop_info .inner .shop_detail dd:not(:first-of-type) {
  margin-top: 30px;
}
#shop_detail #shop_info .inner .shop_detail dt {
  width: 30%;
}
#shop_detail #shop_info .inner .shop_detail dd {
  width: 70%;
}
#shop_detail #shop_info .inner .shop_detail dd p {
  font-weight: normal;
}
#shop_detail #map {
  display: block;
  border: 0;
  width: 100%;
  height: 300px;
  margin: 50px 0 0 0;
}
@media screen and (min-width: 768px) {
  #shop_detail #map {
    height: 400px;
    margin: 100px 0 0 0;
  }
}
/* #shop_detail .footer_img {
  margin-top: 0;
} */
#gopoint_rent_use .gopoint_rent_use_notes {
  font-weight: normal;
  color: #ff4500;
}
@media screen and (min-width: 768px) {
  #gopoint_rent_use .gopoint_rent_use_notes {
    text-align: right;
  }
}
#gopoint_rent_save #point_save ul {
  margin-bottom: 30px;
}
#gopoint_rent_save #point_save ul li:first-child {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #gopoint_rent_save #point_save ul li:first-child {
    margin-bottom: 50px;
  }
}
#gopoint_rent_save #point_save ul li .case_content .case_image {
  width: 100%;
  max-width: 400px;
  margin: 20px auto 0;
}
@media screen and (min-width: 768px) {
  #gopoint_rent_save #point_save ul li .case_content .case_image {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 0 auto;
  }
}
#fixed-banner-area .inner {
  background: none;
  padding: 0;
}
#fixed-banner-area .inner .hide_sp {
  display: none;
}
@media screen and (min-width: 768px) {
  #fixed-banner-area .inner .hide_sp {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #fixed-banner-area .inner .hide_pc {
    display: none;
  }
}
#fixed-banner-area .inner img {
  width: 100%;
}
#fixed-banner-area .inner ul {
  margin: 0 auto 40px;
  padding: 0;
}
@media screen and (min-width: 768px) {
  #fixed-banner-area .inner ul {
    margin: 0 auto 80px;
  }
}
#fixed-banner-area .inner ul li {
  list-style: none;
}
#fixed-banner-area .inner ul li:not(:first-child) {
  margin-top: 10px;
}

/* ================== 2) シミュレーター（旧 simulator.css） ================== */

/* ==========================================================================
   Point Simulator Section
   ========================================================================== */

.point-simulator .simulator-ttl h3 {
  margin-bottom: 15px;
}

.point-simulator .simulator-ttl img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
}

/* セクション全体の余白調整 */
/* #point-calc {
    padding: 60px 0;
    background-color: var(--color-white);
} */

/* 計算機全体の囲い */
.calc-container {
  max-width: 900px;
  margin: 30 auto 0;
  padding: 0;
}
@media screen and (min-width: 767px) {
  .calc-container {
    margin: 50px auto 0;
  }
}

.simulator-ttl {
  margin-bottom: 15px;
}

.simulator-ttl span {
  font-weight: normal;
}

/* 各計算ブロック（賃貸 / 駐車場） */
.calc-section {
}
@media screen and (min-width: 767px) {
  .calc-section {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 30px 50px;
    /* margin: 20px 0; */
    background-color: #f9f9f9;
  }
}

.calc-section-ttl {
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 25px;
  padding-left: 10px;
  border-left: 4px solid var(--color-primary);
}
@media screen and (min-width: 767px) {
  .calc-section-ttl {
    margin-bottom: 30px;
  }
}

/* 計算行のレイアウト */
.calc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media screen and (min-width: 767px) {
  .calc-row {
    gap: 20px;
  }
}

/* 入力ボックス（枠線あり） */
.calc-box {
  position: relative;
  border: 2px solid var(--color-primary);
  background-color: var(--color-white);
  padding: 10px 10px 5px;
  /* min-width: 200px; */
  flex: 1;
}

/* ラベル（家賃 / 居住期間） */
.calc-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  font-weight: bold;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 2px 5px;
  width: 100%;
}
@media screen and (min-width: 767px) {
  .calc-label {
    font-size: 16px;
  }
}

/* 入力エリアと単位の横並び */
.input-unit {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding-top: 18px;
}
@media screen and (min-width: 767px) {
  .input-unit {
    padding-top: 30px;
  }
}

.calc-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  color: #333;
  padding-right: 5px;
}
@media screen and (min-width: 767px) {
  .calc-input {
    font-size: 20px;
  }
}

/* ブラウザ標準の矢印（スピンボタン）を非表示にする */
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unit {
  font-size: 16px;
  color: var(--color-primary);
  font-weight: bold;
  white-space: nowrap;
}

/* 演算子（×, ＝）と固定倍率（10%, 50%） */
.calc-operator img {
  width: 10px;
  /* font-size: 36px;
    font-weight: bold;
    color: var(--color-primary); */
}
@media screen and (min-width: 767px) {
  .calc-operator img {
    width: 24px;
  }
}

.calc-fixed img {
  width: 30px;
  /* font-size: 48px;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1; */
}
@media screen and (min-width: 767px) {
  .calc-fixed img {
    width: 80px;
  }
}

/* ＋（プラス）アイコン */
.calc-plus img {
  width: 20px;
  margin: 10px auto;
  /* text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--color-primary);
    margin: 10px 0; */
}
@media screen and (min-width: 767px) {
  .calc-plus img {
    width: 50px;
  }
}

/* ==========================================================================
   Total Result Area
   ========================================================================== */
.calc-total {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 91, 161, 0.3);
  margin-top: 20px;
}

.total-label {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  opacity: 0.9;
}
@media screen and (min-width: 767px) {
  .total-label {
    font-size: 24px;
  }
}

.total-display {
  display: flex;
  /* align-items: baseline; */
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
@media screen and (min-width: 767px) {
  .total-display {
    gap: 20px;
  }
}

.total-icon img {
  width: 24px;
}
@media screen and (min-width: 767px) {
  .total-icon img {
    width: 32px;
  }
}

#total-result {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 767px) {
  #total-result {
    font-size: 56px;
  }
}

.total-unit img {
  /* font-size: 24px;
    font-weight: bold; */
  width: 80px;
}
@media screen and (min-width: 767px) {
  .total-unit img {
    width: 120px;
  }
}

.calc-total span {
  display: block;
  line-height: 1.5;
  font-weight: normal;
}

/* ============== 3) 調整・追加（旧 adjust.css ／ 通常はここを編集） ============== */
/* =========================================================================
   GOポイント 調整用 追加スタイル（bootstrap非依存・独立シート）
   出力: src/css/adjust.css（head.php で既存 style.css の後に読み込む）
   ビルド: npx sass src/scss/adjust/style.scss src/css/adjust.css --style=compressed
   ========================================================================= */
/* -------------------------------------------------------------------------
   背景の黒をやわらげる（真っ黒 var(--color-black) → 濃いグレー）
   既存 style.css の後に読み込むので body 指定で上書きされる
   ------------------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  /* 英数字は Poppins（先頭）→ 日本語は Zen Kaku Gothic New → 未読込時はOSゴシックへ */
  font-family:
    "Poppins", "Zen Kaku Gothic New", 游ゴシック, "Yu Gothic", 游ゴシック体,
    YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI",
    メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 黒背景にうっすら追従する「GO POINT」ウォーターマーク。
   画面に固定（スクロールで追従）し、白カード・ヒーロー画像の下には隠れる。
   z-index:-1 でコンテンツの背面、暗い面でだけ薄く見える。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20620%20200'%3E%3Cstyle%3E.cls-1%2C.cls-2%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cg%20transform%3D'translate%2836%2C40%29%20scale%280.8%29'%3E%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M104.46%2C21.06c-.91%2C1.24-2.14%2C2.23-3.69%2C2.99-1.56.76-3.39%2C1.14-5.49%2C1.14h-3.89l-1.65%2C9.26h-6.28l4.55-25.79h10.18c2.69%2C0%2C4.73.59%2C6.1%2C1.78%2C1.37%2C1.19%2C2.06%2C2.8%2C2.06%2C4.83%2C0%2C.61-.05%2C1.18-.15%2C1.69-.25%2C1.49-.82%2C2.86-1.73%2C4.1ZM99.8%2C16.97c.05-.39.07-.67.07-.85%2C0-.78-.25-1.39-.75-1.82-.5-.43-1.27-.64-2.3-.64h-3.42l-1.14%2C6.61h3.38c2.35%2C0%2C3.73-1.1%2C4.15-3.31Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M115.87%2C33.35c-1.65-.91-2.93-2.18-3.84-3.82-.91-1.64-1.36-3.53-1.36-5.66%2C0-3.01.65-5.7%2C1.95-8.06%2C1.3-2.36%2C3.1-4.21%2C5.42-5.53%2C2.31-1.32%2C4.94-1.98%2C7.88-1.98%2C2.2%2C0%2C4.14.45%2C5.8%2C1.34%2C1.67.89%2C2.95%2C2.15%2C3.86%2C3.78.91%2C1.63%2C1.36%2C3.5%2C1.36%2C5.6%2C0%2C3.01-.65%2C5.71-1.95%2C8.1-1.3%2C2.39-3.11%2C4.25-5.44%2C5.58-2.33%2C1.33-4.97%2C2-7.93%2C2-2.18%2C0-4.1-.45-5.75-1.36ZM126.83%2C27.66c1.22-.83%2C2.17-1.95%2C2.85-3.36s1.01-2.93%2C1.01-4.57c0-1.76-.49-3.15-1.47-4.15-.98-1-2.35-1.51-4.11-1.51-1.62%2C0-3.04.42-4.28%2C1.25-1.24.83-2.19%2C1.94-2.87%2C3.32-.67%2C1.38-1.01%2C2.91-1.01%2C4.57%2C0%2C1.76.49%2C3.15%2C1.47%2C4.17.98%2C1.02%2C2.36%2C1.52%2C4.15%2C1.52%2C1.62%2C0%2C3.04-.42%2C4.26-1.25Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M152.15%2C8.66l-4.55%2C25.79h-6.28l4.55-25.79h6.28Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M180.28%2C34.45h-6.28l-7.68-15.91-2.83%2C15.91h-6.28l4.55-25.79h6.28l7.68%2C15.98%2C2.83-15.98h6.28l-4.56%2C25.79Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M212.05%2C8.66l-.84%2C4.96h-6.87l-3.67%2C20.83h-6.28l3.67-20.83h-6.83l.88-4.96h19.95Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M36.74%2C16.82h-17.69v6.67h7.32c-1.67%2C2.62-4.61%2C4.35-7.94%2C4.35-5.21%2C0-9.43-4.22-9.43-9.43s4.22-9.43%2C9.43-9.43c3.42%2C0%2C6.41%2C1.82%2C8.06%2C4.54h9.7C34.04%2C5.73%2C26.9%2C0%2C18.42%2C0%2C8.25%2C0%2C0%2C8.25%2C0%2C18.42s8.25%2C18.42%2C18.42%2C18.42%2C18.42-8.25%2C18.42-18.42c0-.64-.1-1.6-.1-1.6Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M54.6.06c-10.13%2C0-18.35%2C8.21-18.35%2C18.35s8.21%2C18.35%2C18.35%2C18.35%2C18.35-8.21%2C18.35-18.35S64.73.06%2C54.6.06ZM54.6%2C27.93c-5.26%2C0-9.52-4.26-9.52-9.52s4.26-9.52%2C9.52-9.52%2C9.52%2C4.26%2C9.52%2C9.52-4.26%2C9.52-9.52%2C9.52Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M54.6%2C0c-9.6%2C0-17.48%2C7.43-18.28%2C16.82h8.89c.76-4.5%2C4.67-7.94%2C9.39-7.94h20.52l6.59-8.89h-27.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D'translate%28330%2C140%29%20scale%280.8%29'%3E%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M104.46%2C21.06c-.91%2C1.24-2.14%2C2.23-3.69%2C2.99-1.56.76-3.39%2C1.14-5.49%2C1.14h-3.89l-1.65%2C9.26h-6.28l4.55-25.79h10.18c2.69%2C0%2C4.73.59%2C6.1%2C1.78%2C1.37%2C1.19%2C2.06%2C2.8%2C2.06%2C4.83%2C0%2C.61-.05%2C1.18-.15%2C1.69-.25%2C1.49-.82%2C2.86-1.73%2C4.1ZM99.8%2C16.97c.05-.39.07-.67.07-.85%2C0-.78-.25-1.39-.75-1.82-.5-.43-1.27-.64-2.3-.64h-3.42l-1.14%2C6.61h3.38c2.35%2C0%2C3.73-1.1%2C4.15-3.31Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M115.87%2C33.35c-1.65-.91-2.93-2.18-3.84-3.82-.91-1.64-1.36-3.53-1.36-5.66%2C0-3.01.65-5.7%2C1.95-8.06%2C1.3-2.36%2C3.1-4.21%2C5.42-5.53%2C2.31-1.32%2C4.94-1.98%2C7.88-1.98%2C2.2%2C0%2C4.14.45%2C5.8%2C1.34%2C1.67.89%2C2.95%2C2.15%2C3.86%2C3.78.91%2C1.63%2C1.36%2C3.5%2C1.36%2C5.6%2C0%2C3.01-.65%2C5.71-1.95%2C8.1-1.3%2C2.39-3.11%2C4.25-5.44%2C5.58-2.33%2C1.33-4.97%2C2-7.93%2C2-2.18%2C0-4.1-.45-5.75-1.36ZM126.83%2C27.66c1.22-.83%2C2.17-1.95%2C2.85-3.36s1.01-2.93%2C1.01-4.57c0-1.76-.49-3.15-1.47-4.15-.98-1-2.35-1.51-4.11-1.51-1.62%2C0-3.04.42-4.28%2C1.25-1.24.83-2.19%2C1.94-2.87%2C3.32-.67%2C1.38-1.01%2C2.91-1.01%2C4.57%2C0%2C1.76.49%2C3.15%2C1.47%2C4.17.98%2C1.02%2C2.36%2C1.52%2C4.15%2C1.52%2C1.62%2C0%2C3.04-.42%2C4.26-1.25Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M152.15%2C8.66l-4.55%2C25.79h-6.28l4.55-25.79h6.28Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M180.28%2C34.45h-6.28l-7.68-15.91-2.83%2C15.91h-6.28l4.55-25.79h6.28l7.68%2C15.98%2C2.83-15.98h6.28l-4.56%2C25.79Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M212.05%2C8.66l-.84%2C4.96h-6.87l-3.67%2C20.83h-6.28l3.67-20.83h-6.83l.88-4.96h19.95Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M36.74%2C16.82h-17.69v6.67h7.32c-1.67%2C2.62-4.61%2C4.35-7.94%2C4.35-5.21%2C0-9.43-4.22-9.43-9.43s4.22-9.43%2C9.43-9.43c3.42%2C0%2C6.41%2C1.82%2C8.06%2C4.54h9.7C34.04%2C5.73%2C26.9%2C0%2C18.42%2C0%2C8.25%2C0%2C0%2C8.25%2C0%2C18.42s8.25%2C18.42%2C18.42%2C18.42%2C18.42-8.25%2C18.42-18.42c0-.64-.1-1.6-.1-1.6Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M54.6.06c-10.13%2C0-18.35%2C8.21-18.35%2C18.35s8.21%2C18.35%2C18.35%2C18.35%2C18.35-8.21%2C18.35-18.35S64.73.06%2C54.6.06ZM54.6%2C27.93c-5.26%2C0-9.52-4.26-9.52-9.52s4.26-9.52%2C9.52-9.52%2C9.52%2C4.26%2C9.52%2C9.52-4.26%2C9.52-9.52%2C9.52Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M54.6%2C0c-9.6%2C0-17.48%2C7.43-18.28%2C16.82h8.89c.76-4.5%2C4.67-7.94%2C9.39-7.94h20.52l6.59-8.89h-27.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
;
  background-repeat: repeat;
  background-size: 360px auto;
}

/* 既存の英数字用フォントクラスも Poppins に統一 */
.font_roboto,
.Oswald_text {
  font-family: "Poppins", sans-serif !important;
}

/* -------------------------------------------------------------------------
   既存の白カード（.inner.shadow）も角丸を統一（新規カードと同じ $radius）
   ※ 本番バンドルは触らず、後読みのこのシートで上書き
   ------------------------------------------------------------------------- */
.inner.shadow {
  border-radius: 14px;
}

/* -------------------------------------------------------------------------
   驚き演出「こんなに貯まっているの!?」 inc/save_example.php
   公式SVG図版は濃色テキストのため、明るい（白）カードに載せる
   ------------------------------------------------------------------------- */
.go-amount {
  padding: 40px 0 16px;
  /* テキストモード（図版が未用意のセグメント用フォールバック：オーナー等） */
}
@media screen and (min-width: 768px) {
  .go-amount {
    padding: 56px 0 20px;
  }
}

.go-amount__card {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .go-amount__card {
    padding: 34px 40px;
  }
}

.go-amount__fig {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.go-amount__fig--pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .go-amount__fig--pc {
    display: block;
  }
}

.go-amount__fig--sp {
  display: block;
  max-width: 260px;
}
@media screen and (min-width: 768px) {
  .go-amount__fig--sp {
    display: none;
  }
}

.go-amount__note {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 14px;
  line-height: 1.6;
}

.go-amount__text {
  color: var(--color-ink);
}

.go-amount__lead {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .go-amount__lead {
    font-size: 20px;
  }
}

.go-amount__calc {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 4px;
}

.go-amount__result {
  margin: 10px 0 2px;
  line-height: 1.05;
  color: var(--color-primary);
  white-space: nowrap;
}

.go-amount__num {
  font-family: "Poppins", sans-serif;
  font-size: 60px;
  font-weight: 700;
  vertical-align: -2px;
}
@media screen and (min-width: 768px) {
  .go-amount__num {
    font-size: 84px;
  }
}

.go-amount__suffix {
  font-size: 26px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .go-amount__suffix {
    font-size: 34px;
  }
}

.go-amount__sub {
  font-size: 15px;
  color: var(--color-ink);
  font-weight: bold;
  margin-left: 2px;
}
@media screen and (min-width: 768px) {
  .go-amount__sub {
    font-size: 18px;
  }
}

.go-amount__catch {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-ink);
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .go-amount__catch {
    font-size: 24px;
  }
}

.go-amount__brand {
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   ご利用例（複数ケース）inc/save_examples.php
   本番の図版（賃貸 / 駐車場・トランクルーム）を、図版に依存せず
   白カード・3色で再現。数字は編集可能でカウントアップにも対応。
   ------------------------------------------------------------------------- */
.rate-ex {
  padding: 40px 0 16px;
  /* 還元率 */
  /* 計算式 */
  /* 結果 */
}
@media screen and (min-width: 768px) {
  .rate-ex {
    padding: 30px 0 30px;
  }
}

.rate-ex__card {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
}
@media screen and (min-width: 768px) {
  .rate-ex__card {
    padding: 40px;
  }
}

.rate-ex__case + .rate-ex__case {
  margin-top: 22px;
  padding-top: 24px;
  border-top: 1px solid #ececec;
}

.rate-ex__label {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.rate-ex__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .rate-ex__grid {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
}

.rate-ex__rate {
  text-align: center;
  line-height: 1.05;
}
@media screen and (min-width: 768px) {
  .rate-ex__rate {
    flex: 0 0 auto;
  }
}

.rate-ex__pre {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-ink);
}

.rate-ex__big {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
}

.rate-ex__num {
  font-family: "Poppins", sans-serif;
  font-size: 56px;
  vertical-align: -4px;
}
@media screen and (min-width: 768px) {
  .rate-ex__num {
    font-size: 72px;
  }
}

.rate-ex__pct {
  font-size: 26px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .rate-ex__pct {
    font-size: 32px;
  }
}

.rate-ex__jp {
  font-size: 40px;
  font-weight: 700;
}

.rate-ex__post {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 2px;
}

.rate-ex__calc {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .rate-ex__calc {
    flex: 0 0 auto;
    text-align: right;
  }
}

.rate-ex__ex {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--color-ink);
}
@media screen and (min-width: 768px) {
  .rate-ex__ex {
    font-size: 19px;
  }
}

.rate-ex__formula {
  display: inline-block;
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e6e6e6;
}

.rate-ex__res {
  text-align: center;
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  .rate-ex__res {
    flex: 0 0 auto;
    position: relative;
    padding-left: 32px;
  }
}

.rate-ex__eq {
  display: block;
  font-size: 22px;
  color: var(--color-muted);
  margin: 2px 0 6px;
  transform: rotate(90deg);
}
@media screen and (min-width: 768px) {
  .rate-ex__eq {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 26px;
  }
}

.rate-ex__amount {
  color: var(--color-primary);
  white-space: nowrap;
}

.rate-ex__amount-num {
  font-family: "Poppins", sans-serif;
  font-size: 56px;
  font-weight: 700;
  vertical-align: -2px;
}
@media screen and (min-width: 768px) {
  .rate-ex__amount-num {
    font-size: 64px;
  }
}

.rate-ex__amount-suffix {
  font-size: 24px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .rate-ex__amount-suffix {
    font-size: 28px;
  }
}

.rate-ex__catch {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-ink);
  margin-top: 4px;
}

.rate-ex__brand {
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 700;
}

.rate-ex__note {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 18px;
  line-height: 1.6;
  text-align: center;
}

/* -------------------------------------------------------------------------
   シミュレーターへ誘導するバナー（節目に設置） inc/simulator_banner.php
   ------------------------------------------------------------------------- */
.sim-banner {
  padding: 0 0 40px;
}
.sim-banner {
  padding: 30px 0;
}

.sim-banner__link {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.sim-banner__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.sim-banner__icon {
  flex: 0 0 auto;
  display: flex;
}

.sim-banner__icon svg {
  width: 34px;
  height: 34px;
}

.sim-banner__body {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1.4;
}

.sim-banner__label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
}

.sim-banner__text {
  display: block;
  font-size: 18px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .sim-banner__text {
    font-size: 22px;
  }
}

.sim-banner__arrow {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: bold;
}

/* =========================================================================
   トップページ 再構成（ヒーロー → 立場別カード → 3カラム → シミュレーター）
   黒/白/オレンジの3色・グラデ無し・面合わせ（max-width $content）
   ========================================================================= */
/* ヒーロー：既存写真＋暗いオーバーレイにコピーとCTAを載せる */
.hero {
  position: relative;
  background: var(--color-bg) center/cover no-repeat;
  background-image: url(../img/common/bg_mainvisual02.jpg);
  border-bottom: 4px solid var(--color-primary);
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
}

.hero__inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 0px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .hero__inner {
    padding: 50px 0px;
  }
}

.hero__logo {
  width: 200px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}
@media screen and (min-width: 768px) {
  .hero__logo {
    width: 280px;
    margin-bottom: 24px;
  }
}

.hero__title {
  color: var(--color-white);
  font-size: 30px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .hero__title {
    font-size: 52px;
  }
}

.hero__accent {
  color: var(--color-primary);
}

.hero__lead {
  color: #e3e3e3;
  font-size: 14px;
  line-height: 1.9;
  /* max-width: 580px; */
  margin: 20px auto 0px;
}
@media screen and (min-width: 768px) {
  .hero__lead {
    font-size: 17px;
  }
}

.hero__cta {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  font-size: 16px;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease;
}

.hero__cta:hover {
  transform: translateY(-2px);
}

/* 立場別カード */
.roles {
  padding: 48px 0 8px;
}
@media screen and (min-width: 768px) {
  .roles {
    padding: 64px 0 8px;
  }
}

.roles__head {
  text-align: center;
  margin-bottom: 26px;
  padding: 0 16px;
}

.roles__title {
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .roles__title {
    font-size: 28px;
  }
}

.roles__sub {
  color: #9a9a9a;
  font-size: 13px;
  margin-top: 8px;
}

.roles__grid {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media screen and (min-width: 768px) {
  .roles__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.roles__corp {
  width: 95%;
  max-width: 800px;
  margin: 14px auto 0;
  border: 1px dashed #555;
  border-radius: 14px;
  color: #9a9a9a;
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.role-card {
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.role-card__main {
  flex: 1;
  display: block;
  padding: 26px 16px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--color-ink);
}

.role-card__icon {
  width: 56px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}

.role-card__role {
  font-size: 16px;
  font-weight: bold;
}

.role-card__desc {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
}

.role-card__links {
  display: flex;
  border-top: 1px solid #eee;
}

.role-card__links a {
  flex: 1;
  text-align: center;
  padding: 13px 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s ease;
}

.role-card__links a:first-child {
  border-right: 1px solid #eee;
}

.role-card__links a:hover {
  background: var(--color-cream);
}

/* セグメントページ用ヒーロー（ロゴの代わりに小ラベル・やや低め） */
.hero--seg .hero__inner {
  padding: 80px 0px;
}
@media screen and (min-width: 768px) {
  .hero--seg .hero__inner {
    padding: 50px 0px;
  }
}

.hero__label {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* セグメントの「貯め方/使い方」セクション */
/* .seg {
  padding: 48px 0 8px;
} */
.seg__title {
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .seg__title {
    font-size: 28px;
  }
}

.seg__note {
  width: 95%;
  max-width: 800px;
  margin: 14px auto 0;
  color: #9a9a9a;
  font-size: 12px;
  text-align: center;
  line-height: 1.7;
}

.method-grid {
  width: 95%;
  max-width: 800px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media screen and (min-width: 768px) {
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.method-card {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 24px 18px;
  text-align: center;
}

.method-card__icon {
  width: 60px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
}

.method-card__label {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-ink);
}

.method-card__rate {
  margin: 8px 0 4px;
  line-height: 1;
  color: var(--color-primary);
  white-space: nowrap;
}

.method-card__rate .num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 48px;
}

.method-card__rate .pct {
  font-size: 22px;
  font-weight: 700;
}

.method-card__rate .lbl {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-ink);
  margin-left: 4px;
}

.method-card__desc {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
}

/* 単一手法カードは中央に・狭め */
.method-grid--solo {
  max-width: 460px;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .method-grid--solo {
    grid-template-columns: 1fr;
  }
}

/* 還元率ハイライト（全幅・大きな数字でインパクト） 各save系の貯め方 */
.rate-hl {
  width: 95%;
  max-width: 800px;
  margin: 22px auto 0;
  background: var(--color-peach);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .rate-hl {
    padding: 44px 28px;
  }
}

.rate-hl__label {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: bold;
}

.rate-hl__main {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 21px;
  line-height: 1.25;
  margin: 6px 0 12px;
}
@media screen and (min-width: 768px) {
  .rate-hl__main {
    font-size: 25px;
  }
}

.rate-hl__num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 72px;
  color: var(--color-primary);
  vertical-align: -10px;
  margin: 0 2px;
}
@media screen and (min-width: 768px) {
  .rate-hl__num {
    font-size: 96px;
    vertical-align: -14px;
  }
}

.rate-hl__pct {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--color-primary);
}
@media screen and (min-width: 768px) {
  .rate-hl__pct {
    font-size: 46px;
  }
}

.rate-hl__jp {
  font-size: 52px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 4px;
}
@media screen and (min-width: 768px) {
  .rate-hl__jp {
    font-size: 68px;
  }
}

.rate-hl__desc {
  color: #7a6a62;
  font-size: 13px;
  line-height: 1.85;
  max-width: 540px;
  margin: 0 auto;
}

/* 「ポイントが貯まる流れ」3ステップ inc/save_flow.php */
.flow-wrap {
  width: 95%;
  max-width: 800px;
  margin: 24px auto 0;
}

.flow__lead {
  color: #cfcfcf;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}

.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}
@media screen and (min-width: 768px) {
  .flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 4px;
  }
}

.flow__step {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .flow__step {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 26px 18px;
  }
}

.flow__no {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--color-primary);
  flex: 0 0 auto;
  min-width: 30px;
}
@media screen and (min-width: 768px) {
  .flow__no {
    font-size: 24px;
  }
}

.flow__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}

.flow__text {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.55;
}

.flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 20px;
  font-weight: bold;
  transform: rotate(90deg);
  height: 18px;
}
@media screen and (min-width: 768px) {
  .flow__arrow {
    transform: none;
    height: auto;
    padding: 0 4px;
  }
}

/* セグメント補足文（暗背景に白文字） */
.seg__desc {
  width: 95%;
  max-width: 640px;
  margin: 18px auto 0;
  color: #d4d4d4;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* 使い方ハイライト（割引など） */
.highlight {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 30px 22px;
  text-align: center;
}

.highlight__label {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-ink);
}

.highlight__big {
  margin: 8px 0 4px;
  line-height: 1.15;
  color: var(--color-primary);
}

.highlight__big .pre {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-ink);
}

.highlight__big .num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 60px;
  vertical-align: -4px;
}

.highlight__big .pct {
  font-size: 26px;
  font-weight: 700;
}

.highlight__big .suf {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-ink);
  margin-left: 4px;
}

.highlight__desc {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
}

.highlight__notes {
  margin: 16px auto 0;
  max-width: 560px;
  text-align: left;
}

.highlight__notes li {
  font-size: 12px;
  color: #777;
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
}

/* 使い道リスト（オーナー） */
.uselist {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media screen and (min-width: 768px) {
  .uselist {
    grid-template-columns: repeat(2, 1fr);
  }
}

.uselist__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 10px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .uselist__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}

/* 5つ目（その他）は2列ぶち抜きで下段の空きを埋める。PCは中央寄せ */
.uselist__item--wide {
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
  .uselist__item--wide {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

.uselist__icon {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  background: var(--color-primary);
  border-radius: 50%;
  padding: 11px;
  box-sizing: border-box;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
@media screen and (min-width: 768px) {
  .uselist__icon {
    width: 80px;
    height: 80px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .uselist__item:hover .uselist__icon {
    transform: scale(1.12) rotate(-5deg); /* 少し弾むポップな動き */
    box-shadow: var(--shadow-icon-hover);
  }
}

.uselist__text {
  font-weight: bold;
  color: var(--color-ink);
  line-height: 1.5;
}

.uselist__text small {
  display: block;
  font-size: 11px;
  color: #777;
  font-weight: normal;
  margin-top: 2px;
}

/* セグメントの導線ボタン */
.seg-cta {
  padding: 28px 16px 8px;
  text-align: center;
}

.seg-cta__btn {
  display: inline-block;
  width: 95%;
  max-width: 420px;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
  font-size: 15px;
  padding: 15px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.seg-cta__btn:hover {
  background: var(--color-cream);
}

/* 店舗一覧（shop）— カードを角丸に・タブを整える */
#shop_list li.shadow {
  border-radius: 14px;
  overflow: hidden;
}

#shop_list .tab-menu {
  gap: 10px;
}

/* #shop_list .tab-button {
  border-radius: 999px;
} */

/* 店舗詳細（shop/detail）— 新トーン調整（10ページ共通） */
#shop_detail #shop_mainvisual {
  margin-top: 0px;
}

#shop_detail #shop_info{
  margin-top: 30px;
}

#shop_detail #shop_mainvisual .inner .shop_name {
  text-align: center;
}

#shop_detail #shop_mainvisual .bg_mainvisual .imgbox16-9 {
  border-radius: 14px;
}

#shop_detail #shop_info .inner {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
}

#shop_detail #shop_info .shop_info_list li.bg_blu {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

#shop_detail #shop_info .shop_info_list li.bg_blu p {
  font-weight: bold;
}

#shop_detail #map {
  display: block;
  width: 95%;
  max-width: 800px;
  height: 360px;
  margin: 30px auto 0;
  border: 0;
  border-radius: 14px;
}

/* -------------------------------------------------------------------------
   スクロール演出（控えめ・1回）。JS が .reveal-ready を付けたときだけ作用
   ------------------------------------------------------------------------- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   使い方ページの見出し（小リード＋大見出し＋黄色マーカー）
   ------------------------------------------------------------------------- */
.usepage,
.refer {
  padding: 44px 16px 8px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .usepage,
  .refer {
    padding: 56px 16px 8px;
  }
}

.usepage__lead,
.refer__lead {
  color: #cfcfcf;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 6px;
}

.usepage__title,
.refer__title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.45;
  color: var(--color-white);
  margin-bottom: 22px;
}
@media screen and (min-width: 768px) {
  .usepage__title,
  .refer__title {
    font-size: 28px;
  }
}

.refer__sub {
  color: #e3e3e3;
  font-size: 14px;
  line-height: 1.95;
  max-width: 640px;
  margin: -8px auto 26px;
}

.refer__sub .text_orn {
  font-weight: bold;
  color: var(--color-primary-bright);
}

/* ベネフィット（最大30%割引）— ペーパー色で強調 */
.benefit {
  width: 95%;
  max-width: 620px;
  margin: 0 auto;
  background: var(--color-peach);
  border-radius: 14px;
  padding: 30px 22px;
  text-align: center;
}

.benefit__big {
  color: var(--color-primary);
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-size: 26px;
}

.benefit__big .num {
  font-family: "Poppins", sans-serif;
  font-size: 64px;
}

.benefit__big .pct {
  font-size: 34px;
}

.benefit__sub {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 8px;
}

.benefit__brand {
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 700;
}

/* 注意書きリスト */
.usenotes {
  width: 95%;
  max-width: 620px;
  margin: 18px auto 0;
  text-align: left;
}

.usenotes li {
  color: #9a9a9a;
  font-size: 12px;
  line-height: 1.85;
  padding-left: 1em;
  /* text-indent: -1em; */
}

/* -------------------------------------------------------------------------
   ご紹介セクション（STEP＋特典）
   ------------------------------------------------------------------------- */
.steps {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .steps {
    gap: 14px;
  }
}

.step {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 20px 20px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
}

.step__num {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 64px;
  text-align: center;
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.step__icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
}
@media screen and (min-width: 768px) {
  .step__icon {
    width: 56px;
    height: 56px;
  }
}

.step__text {
  flex: 1 1 auto;
}

.step__ttl {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 16px;
}

.step__desc {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 4px;
}

.rewards {
  width: 95%;
  max-width: 800px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .rewards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.reward {
  background: var(--color-peach);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reward__label {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 14px;
}

.reward__label span {
  font-size: 12px;
  color: #777;
}

.reward__amount {
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 10px;
}

.reward__pre {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-ink);
}

.reward__num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 54px;
  letter-spacing: -0.01em;
  vertical-align: -2px;
}

.reward__unit {
  font-size: 22px;
  font-weight: 700;
}

.reward__sub {
  color: var(--color-ink);
  font-weight: bold;
  font-size: 15px;
}

/* -------------------------------------------------------------------------
   簡易シミュレーター（賃料 × 10% × 居住期間 ＝ ポイント） inc/mini_simulator.php
   ------------------------------------------------------------------------- */
.minisim {
  padding: 40px 16px 0;
}
@media screen and (min-width: 768px) {
  .minisim {
    padding: 56px 16px 0;
  }
}

.minisim__head {
  text-align: center;
  margin-bottom: 18px;
}

.minisim__eyebrow {
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 13px;
}

.minisim__title {
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
  margin-top: 4px;
}
@media screen and (min-width: 768px) {
  .minisim__title {
    font-size: 26px;
  }
}

.minisim__card {
  width: 95%;
  max-width: 800px;
  margin: 0 auto 30px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 24px 20px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .minisim__card {
    padding: 30px 26px;
  }
}

/* .minisim__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 640px) {
  .minisim__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
  }
}

.minisim__field {
  text-align: center;
}
@media (min-width: 640px) {
  .minisim__field {
    text-align: left;
  }
}

.minisim__label {
  display: block;
  font-size: 11px;
  color: #999;
  font-weight: bold;
  margin-bottom: 5px;
}

.minisim__input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid #e6e1dc;
  border-radius: 8px;
  padding: 7px 10px;
  transition: border-color 0.15s ease;
}

.minisim__input:focus-within {
  border-color: var(--color-primary);
}

.minisim__input input {
  width: 100px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.minisim__input input::-webkit-outer-spin-button,
.minisim__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.minisim__unit {
  font-size: 13px;
  color: #888;
  font-weight: bold;
  white-space: nowrap;
}

.minisim__op {
  font-size: 18px;
  font-weight: bold;
  color: #ccc6c0;
}
@media (min-width: 640px) {
  .minisim__op {
    align-self: center;
    padding-top: 10px;
  }
}

.minisim__fixed {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--color-primary);
  line-height: 1;
}
@media (min-width: 640px) {
  .minisim__fixed {
    align-self: flex-end;
    padding-bottom: 8px;
  }
}

.minisim__fixed span {
  font-size: 16px;
}

.minisim__result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1ede9;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
} */

.minisim__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.minisim__field {
  text-align: center;
  flex: 1;
  min-width: 0;
}
@media (min-width: 640px) {
  .minisim__field {
    text-align: left;
    flex: 0 1 auto;
  }
}

.minisim__label {
  display: block;
  font-size: 11px;
  color: #999;
  font-weight: bold;
  margin-bottom: 5px;
}

.minisim__input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid #e6e1dc;
  border-radius: 8px;
  padding: 7px 10px;
  transition: border-color 0.15s ease;
  width: 100%;
}

.minisim__input:focus-within {
  border-color: var(--color-primary);
}

.minisim__input input {
  width: 90px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
@media (min-width: 640px) {
  .minisim__input input {
    width: 160px;
  }
}

.minisim__input input::-webkit-outer-spin-button,
.minisim__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.minisim__unit {
  font-size: 13px;
  color: #888;
  font-weight: bold;
  white-space: nowrap;
}

.minisim__op {
  display: none;
  font-size: 18px;
  font-weight: bold;
  color: #ccc6c0;
}
@media (min-width: 640px) {
  .minisim__op {
    display: block;
    align-self: center;
    padding-top: 10px;
  }
}

.minisim__fixed {
  display: none;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--color-primary);
  line-height: 1;
}
@media (min-width: 640px) {
  .minisim__fixed {
    display: block;
    align-self: flex-end;
    padding-bottom: 8px;
  }
}

.minisim__fixed span {
  font-size: 16px;
}

.minisim__result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1ede9;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .minisim__result {
    align-items: baseline;
    max-width: 560px;
    margin: 10px auto;
  }
}

.minisim__eq {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-ink);
}

.minisim__num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--color-primary);
  line-height: 1;
}





.minisim__eq {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-ink);
}

.minisim__num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--color-primary);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .minisim__num {
    font-size: 52px;
  }
}

.minisim__pt {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-ink);
}

.minisim__note {
  color: #b0aaa4;
  font-size: 11px;
  margin-top: 12px;
}

/* -------------------------------------------------------------------------
   よくあるご質問（FAQ）— <details> アコーディオン inc/faq.php
   ------------------------------------------------------------------------- */
.faq {
  padding: 48px 16px 8px;
}
@media screen and (min-width: 768px) {
  .faq {
    padding: 64px 16px 8px;
  }
}

.faq__head {
  text-align: center;
  margin-bottom: 24px;
}

.faq__lead {
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 13px;
}

.faq__title {
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
  margin-top: 4px;
}
@media screen and (min-width: 768px) {
  .faq__title {
    font-size: 28px;
  }
}

.faq__list {
  width: 95%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  color: var(--color-ink);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .faq__q {
    font-size: 16px;
    padding: 20px 24px;
  }
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__mark {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  flex: 0 0 auto;
}

.faq__mark--q {
  color: var(--color-primary);
  font-size: 18px;
}

.faq__mark--a {
  color: #c9c4c0;
  font-size: 18px;
}

.faq__qtext {
  flex: 1 1 auto;
}

.faq__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  border-radius: 1px;
  transition: transform 0.2s ease;
}

.faq__icon::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.faq__icon::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.faq__a {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .faq__a {
    padding: 0 24px 22px;
  }
}

.faq__atext {
  flex: 1 1 auto;
  margin: 0;
}

.faq__item[open] .faq__icon::after {
  transform: scaleY(0);
}

.faq__item[open] .faq__a {
  animation: faqOpen 0.25s ease;
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* GOポイントとは（3カラム） */
.about3 {
  padding: 48px 0;
}
@media screen and (min-width: 768px) {
  .about3 {
    padding: 64px 0;
  }
}

.about3__title {
  color: var(--color-white);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .about3__title {
    font-size: 28px;
  }
}

.about3__sub {
  width: 95%;
  max-width: 640px;
  margin: 0 auto 26px;
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

.about3__grid {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .about3__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about3__extra {
  width: 95%;
  max-width: 800px;
  margin: 20px auto 0;
  background: rgba(235, 92, 1, 0.12);
  border: 1px solid rgba(235, 92, 1, 0.55);
  border-radius: 14px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  line-height: 1.7;
}

.about3__extra-em {
  color: var(--color-primary);
  font-size: 16px;
}

.about3__item {
  background: var(--color-white);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
}

.about3__icon {
  width: 48px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
}

.about3__badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  font-size: 15px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.about3__lead {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-ink);
}

.about3__desc {
  font-size: 12px;
  color: #777;
  margin-top: 6px;
  line-height: 1.7;
}

@media screen and (min-width: 768px) {
  /* .seg {
    padding: 64px 0 8px;
  } */
}

/* -------------------------------------------------------------------------
   ヘッダー：全ページ共通でトップへ戻れるホームリンク（GOポイントロゴ）
   既存は40pxの半透明バー。GOポイントロゴ(左/ホーム)＋クラスコロゴ(右)
   ------------------------------------------------------------------------- */
/* =========================================================================
   グローバルナビ（固定ヘッダー）inc/header.php
   SP=ハンバーガー＋アコーディオン / PC=横並び＋ホバーでドロップダウン
   ========================================================================= */
.gnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(18, 18, 18, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

.gnav__inner {
  /* max-width: 1120px; */
  margin: 0 auto;
}
@media screen and (min-width: 960px) {
  .gnav__inner {
    display: flex;
    align-items: center;
    padding: 0 22px;
  }
}

.gnav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
}
@media screen and (min-width: 960px) {
  .gnav__bar {
    height: 62px;
    padding: 0;
    flex: 0 0 auto;
  }
}

.gnav__logo {
  display: inline-flex;
  align-items: center;
}

.gnav__logo img {
  height: 24px;
  width: auto;
  display: block;
}

.gnav__toggle {
  width: 42px;
  height: 42px;
  margin-right: -8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media screen and (min-width: 960px) {
  .gnav__toggle {
    display: none;
  }
}

.gnav__bars {
  position: relative;
}

.gnav__bars,
.gnav__bars::before,
.gnav__bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    background 0.15s ease;
}

.gnav__bars::before {
  position: absolute;
  top: -7px;
  left: 0;
}

.gnav__bars::after {
  position: absolute;
  top: 7px;
  left: 0;
}

.gnav.is-open .gnav__bars {
  background: transparent;
}

.gnav.is-open .gnav__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.gnav.is-open .gnav__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* SP：開いたときにバーの下へ重ねて表示 */
.gnav__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
}
@media screen and (min-width: 960px) {
  .gnav__menu {
    display: block;
    position: static;
    background: none;
    border-top: 0;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    flex: 1 1 auto;
  }
}

.gnav.is-open .gnav__menu {
  display: block;
}

.gnav__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
@media screen and (min-width: 960px) {
  .gnav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    gap: 2px;
  }
}

.gnav__li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media screen and (min-width: 960px) {
  .gnav__li {
    border-bottom: 0;
    position: relative;
  }
}

.gnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  color: var(--color-white);
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
@media screen and (min-width: 960px) {
  .gnav__link {
    width: auto;
    height: 62px;
    padding: 0 15px;
    font-size: 14px;
    white-space: nowrap;
    justify-content: center;
  }
}

.gnav__chev {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-right: 4px;
  border-right: 2px solid var(--color-primary-bright);
  border-bottom: 2px solid var(--color-primary-bright);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
@media screen and (min-width: 960px) {
  .gnav__chev {
    width: 7px;
    height: 7px;
    margin: 2px 0 5px 6px;
  }
}

.gnav__li--drop.is-open .gnav__chev {
  transform: rotate(-135deg);
}

.gnav__panel {
  display: none;
  padding: 2px 12px 12px;
}
@media screen and (min-width: 960px) {
  .gnav__panel {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 270px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    padding: 10px;
    margin-top: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
  }
}

.gnav__li--drop.is-open .gnav__panel {
  display: block;
}

.gnav__panelttl {
  color: #8f8f8f;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 8px;
}
@media screen and (min-width: 960px) {
  .gnav__panelttl {
    color: #999;
  }
}

.gnav__sublink {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
}

.gnav__sublink:hover,
.gnav__sublink:focus {
  background: rgba(255, 255, 255, 0.06);
}
@media screen and (min-width: 960px) {
  .gnav__sublink:hover,
  .gnav__sublink:focus {
    background: var(--color-cream);
  }
}

.gnav__subact {
  display: block;
  color: var(--color-white);
  font-weight: bold;
  font-size: 14px;
}
@media screen and (min-width: 960px) {
  .gnav__subact {
    color: var(--color-ink);
  }
}

.gnav__subact::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 8px;
  vertical-align: middle;
}

.gnav__subdesc {
  display: block;
  color: #9a9a9a;
  font-size: 12px;
  margin-top: 3px;
  padding-left: 14px;
}
@media screen and (min-width: 960px) {
  .gnav__subdesc {
    color: #888;
  }
}

.gnav__link.is-current {
  color: var(--color-primary-bright);
}

.gnav__sublink.is-current .gnav__subact {
  color: var(--color-primary-bright);
}

/* ---- PC（横並び＋ホバードロップダウン） ---- */
@media screen and (min-width: 960px) {
  .gnav__link:hover {
    color: var(--color-primary-bright);
  }
  .gnav__li--drop:hover .gnav__chev,
  .gnav__li--drop:focus-within .gnav__chev {
    transform: rotate(-135deg);
  }
  .gnav__li--drop:hover .gnav__panel,
  .gnav__li--drop:focus-within .gnav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   フッターのナビ（トップへ戻る／クラスコ公式サイト）
   ------------------------------------------------------------------------- */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 36px 16px 40px;
}

.footer-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 24px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  background: var(--color-white);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.footer-nav__btn:hover {
  background: var(--color-cream);
}

.footer-nav__btn--home {
  background: var(--color-primary);
  color: var(--color-white);
}

.footer-nav__btn--home:hover {
  background: #cf5101;
}