/*

Theme Name: BLOG
Author: KEI
Description: Blog theme
Version: 1.0

*/
@charset "UTF-8"; /* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body, html {
    background-color: #fff;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 
        Lato,
        "Montserrat",
        "Noto Sans JP",
        "Yu Gothic Medium",
        "YuGothic",
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        "MS PGothic",
        sans-serif;
}

#header a {
    color: #000;
    text-decoration: none;
    overflow: hidden;
    display: inline-block;
    padding-bottom: 0;
}

#header a:hover {
    text-decoration: underline;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

main a {
    color: #000;
}

.main-left a {
    text-decoration: none;
}

.main-left a:hover {
    text-decoration: underline;
}

main {
    width: 92%;
    margin: 9% auto 0;
    overflow: visible;
}

.main-left {
    float: left;
    width: 40%;
    position: relative;
    height: 400px;
}

.header-h1 {
    font-size: 11px;
    margin-bottom: 5px;
}

.pick {
    position: absolute;
    top: -40px;
    width: 130px !important;
    left: -50px;
    z-index: 10;
}

.main-left img {
    width: 100%;
    height: auto;
}

.main-left h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4em;
    margin-top: 10px;
}

.main-left a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.main-right {
    float: right;
    width: 56%;
    padding: 0 0% 1%;
    border: 1px solid #ddd;
    height: 390px;
    overflow: scroll;
}

.main-right-pp {
    font-size: 15px;
    background: #ddd;
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
}

.main-right img {
    width: 100%;
    height: auto;
}

.main-right-li {
    margin: 1% auto;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1%;
    padding-top: 1%;
}

.main-right-li:last-child {
    border-bottom: none;
}

.main-right-li-left {
    float: left;
    width: 20%;
}

.main-right-li-left img {
    width: 100%;
    height: auto;
}

.main-right-li-right {
    width: 77%;
    float: right;
}

.main-right ul a:hover {
    overflow: hidden;
    background: #ddd;
}

.main-right ul a {
    padding: 1%;
    overflow: hidden;
    display: block;
}

.main-right-li-right h3 {
    font-size: 18px;
    line-height: 1.5em;
}

.main-right-li-right h3 STRONG{
	font-weight: bold;
}

.tabs {
    margin-top: 50px;
    padding-bottom: 0;
    background-color: #fff;
    width: 100%;
    margin: 5% auto 0 auto;
}

.tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #bdbdbd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

input[name="tab_item"] {
    display: none;
}

.tab_item1 {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #bdbdbd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item1:hover {
    opacity: 0.75;
}

input[name="tab_item1"] {
    display: none;
}


.tab_content {
    display: none;
    padding: 3% 0 0;
    clear: both;
    overflow: hidden;
}

#all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content {
    display: block;
}

.tabs input:checked + .tab_item {
    background-color: #7d7d7d;
    color: #fff;
}

.tabs input:checked + .tab_item1 {
    background-color: #7d7d7d;
    color: #fff;
}

.index-left {
    float: left;
    width: 65%;
    padding: 2%;
}

.index-left a {
    /* background: #ddd; */
}

.index-right {
    float: right;
    width: 31%;
}

.index-right h3 {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #5c5c5c;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-left: 5px solid #5c5c5c;
    padding-left: 10px;
}

.index-right p {
    font-size: 16px;
}

.index-right ul {
    overflow: hidden;
    margin-top: 5px;
}

.index-right ul a {
    padding: 4%;
    overflow: hidden;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
}

.index-right ul a:hover {
    overflow: hidden;
    background: #ddd;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.index-right li {
    margin: 0;
    margin-bottom: 20px;
    width: 50%;
    float: left;
    font-size: 13px;
}

.index-left-left {
    float: left;
    width: 40%;
    height: auto
}

.index-left-left img {
    width: 100%;
    height: auto;
}

.index-left-right {
    float: right;
    width: 58%;
    font-size: 23px;
    line-height: 1.5em;
    color: #000;
}

..index-left-right a:visited {
    color: #999999;
}

.index-left li {
    margin-bottom: 20px;
    overflow: hidden;
}

.pro {
    margin: 0;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    padding: 6%;
}

.pro img {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 100px;
}

.pro-name {
    font-size: 18px !important;
    margin-bottom: 15px;
}

.pro-name span {
    font-size: 14px !important;
}

.pro-p {
    font-size: 13px !important;
    line-height: 1.2em;
}

.pagination .nav-links {
    text-align: center;
}

.pagination .nav-links .current {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 8px;
    border: 1px solid #7d7d7d;
    border-radius: 50%;
    background: #7d7d7d;
    color: #fff;
    font-size: 1.4rem;
    line-height: 30px;
}

.pagination .nav-links .dots {
    display: inline-block;
    margin: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 30px;
}

.pagination .nav-links a.page-numbers {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 8px;
    border: 1px solid #7d7d7d;
    border-radius: 50%;
    font-size: 1.2rem;
    text-decoration: none;
    line-height: 30px;
    color: #7d7d7d;
}

.pagination .nav-links a.page-numbers:hover {
    background: #7d7d7d;
    color: #fff;
    transition: all .3s;
}

.pagination .nav-links a.prev.page-numbers, .pagination .nav-links a.next.page-numbers {
    width: auto;
    padding-right: 6px;
    padding-left: 6px;
    border: 0;
    border-bottom: 1px solid #7d7d7d;
    border-radius: 0;
    background: transparent;
}

.pagination .nav-links a.prev.page-numbers:hover, .pagination .nav-links a.next.page-numbers:hover {
    background: #7d7d7d;
    color: #fff;
}

.blog-list {
    overflow: hidden;
}

.blog-list ul {
    overflow: hidden;
}

.blog-list li {
    margin-bottom: 15px;
    overflow: hidden;
    width: 100%;
}

.blog-list-left {
    float: left;
    width: 25%;
}

.blog-list-left img {
    width: 100%;
    height: auto;
}

.blog-list-right {
    float: right;
    width: 71%;
    font-size: 13px;
    line-height: 1.3em;
    text-align: left;
}

.point {
    margin: 0;
}

.point li {
    float: left;
    width: 24%;
    padding: 0.5%;
    text-align: center;
}

.point img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.point a {
    padding: 10%;
    overflow: hidden;
    display: block;
    text-align: center;
    text-decoration: none;
}

.point a:hover {
    overflow: hidden;
    background: #ddd;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.button {
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 20px;
    color: #fff;
    background: #383838;
    padding: 13px;
    cursor: pointer;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    border-radius: 100px;
    margin-right: 2%;
    margin-bottom: 1%;
}

.button1 {
    position: fixed;
    right: 100px;
    bottom: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: .3s;
}


.active {
    opacity: 1;
    visibility: visible;
}

.eye img {
    width: 80%;
    height: auto;
    margin: 10px auto 40px;
    display: block;
}

.copyright {
    font-size: 10px;
    text-align: center;
    padding-bottom: 0;
}

.breadcrumbs {
    font-size: 12px;
}

.single h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 10px;
}

.date {
    font-size: 14px;
}

.date1 {
  font-size: 12px;
  text-align: right;
}

.small{
	font-size: 12px;
	color: #4A4949;
}

.single-box p {
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.8em;
}


.date-single {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    line-height: 1.4em !important;
    margin-top: 40px !important;
}

.single-box strong {
    background: linear-gradient(transparent 60%, #f5bf25 60%);
    font-weight: bold;
    font-size: 18px;
}

/* -------------------------------------------------
   single-box 見出しセット（PC用）
   h2：セクションタイトル
   h3：大きめブロック見出し
   h4：テキスト中の小見出し
-------------------------------------------------- */

/* h2：セクションタイトル */
.single-box h2 {
  position: relative;
  padding: 1.2em 2.8em;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 72px 0 56px;
  color: #111;
}

/* 角のライン（少しだけ丸み＆短めにして上品に） */
.single-box h2::before,
.single-box h2::after {
  position: absolute;
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.single-box h2::after {
  top: 0;
  left: 0;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.single-box h2::before {
  right: 0;
  bottom: 0;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

/* h3：大きめブロック見出し */
.single-box h3 {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 24px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #222;  /* 少し細く・色もやや柔らかく */
  letter-spacing: 0.04em;
  color: #111;
}

/* h4：テキスト中の小見出し */
.single-box h4 {
  position: relative;
  padding-left: 14px;
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 16px;
  line-height: 1.6;
  color: #111;
}

/* 左の縦ライン（細め・シンプル） */
.single-box h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 3px;
  border-radius: 999px;
  background: #000;
  opacity: 0.8;
}

/* h3 の直後に来る h4 は、少しだけ間隔を詰めると読みやすい */
.single-box h3 + h4 {
  margin-top: 18px;
}




.single hr {
    border: 1px solid #ddd;
}


.single_btn {
    display: inline-block;
    width: auto;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #1B85FB;
    padding: 0 50px;
}

.single_btn a {
    display: block;
    width: 100%;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #1B85FB;
    position: relative;
}

.single_btn a::before {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    bottom: 0;
    content: "";
    height: 7px;
    width: 7px;
    margin: auto;
    position: absolute;
    right: -27px;
    top: 0;
    transform: rotate(45deg);
    transition: right .3s;
}

.single_btn a:hover::before {
    right: -35px;
}

ul.cp_list {
    position: relative;
    padding: 5px;
    border: solid 1px #000000;
    list-style-type: none;
    width: 60%;
    margin: 30px 0;
    display: block;
}

ul.cp_list li {
    display: flex;
    padding: 5px 10px 5px 20px;
    border-bottom: 1px dashed #000000;
}

ul.cp_list li::before {
    position: absolute;
    left : 5px;
    content: "ul.cp_list {
position: relative;
padding: 5px;
;;;;;;;;;;
list-style-type: none;
}
ul.cp_list li {display: flex;padding: 20px 20px 20px 40px;border-bottom: 1px dashed #000000;}
ul.cp_list li::before {position: absolute;left: 7px;content: "\002713";font-weight: bold;color: #000000;margin-top: -5px;}
ul.cp_list li:last-of-type {
border-bottom: none;
}2713";
    font-weight: bold;
    color: #AB47BC;
}

ul.cp_list li:last-of-type {
    border-bottom: none;
}

.post-re {
    overflow: hidden;
    width: 650px;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 60px auto;
}

.post-re-left {
    float: left;
    width: 31%;
}

.post-re-left img {
    width: 100%;
    height: auto;
}

.post-re-right {
    float: right;
    width: 65%;
    font-size: 18px;
}

.post-re-right p {
    font-size: 16px;
}

.related-post-wrap {
    margin: 2em 0;
}

.related-post-wrap ul {
    display: grid;
    list-style: none;
    gap: .875em;
    grid-template-columns: repeat(2, 1fr);
}

.related-post {
    margin-bottom: 5px;
}

.related-post a {
    display: block;
    text-decoration: none;
    color: #000;
}

.related-post a:hover {
    opacity: .6;
}

.related-post img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    margin-bottom: .5em;
    object-fit: cover;
}

.related-post .text-wrap {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3em;
}

@media (max-width: 600px) {
    .related-post-wrap ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

.single-h3 {
    padding: 0.25em 0.5em;
    color: #000000;
    background: transparent;
    border-left: solid 5px #4f4f4f;
    font-size: 16px !important;
    margin-bottom: 20px;
    font-weight: bold;
    margin-top: 10px;
    padding: 2% 0;
    padding-left: 20px;
}

.sma {
    display: none;
}

.pc {
    display: block;
}

.single-price-box {
    width: 800px;
    overflow: hidden;
    margin: 40px auto;
    border: solid 1px #ffe5cb;
    padding: 40px;
    background: #fff8f1;
    padding-top: 0;
    padding-bottom: 20px;
}

.single-price-box a {
    text-decoration: none;
}

.single-price-box a:hover {
    text-decoration: underline;
}

.single-price-box-left {
    width: 35%;
    float: left;
}

.single-price-box-left img {
    width: 100% !important;
    height: auto !important;
    border-radius: 3px;
    margin: 0 !important;
}

.single-price-box-right {
    width: 60%;
    float: right;
}

.single-price-box-right-p {
    font-size: 13px !important;
    border-bottom: 1px solid #000;
    display: inline-block;
    margin-bottom: 4% !important;
}

.single-price-box-right-p1 {
    font-size: 13px !important;
    margin-bottom: 5% !important;
}

.single-price-box-right-p2 {
    font-size: 11px !important;
}

.single-price-box-right-p3 {
    font-size: 13px;
}

.single-price-box-right-p1-1 {
    font-size: 16px;
    margin-right: 10px;
}

.single-price-box-right-p1-2 {
    font-size: 28px;
    font-weight: bold;
    margin-left: 10px;
}

.single-price-box-right-h {
    font-size: 24px !important;
    margin-bottom: 1% !important;
    font-weight: bold;
}

.single-price-box-right-p11 {
    font-size: 12px !important;
    margin-bottom: 2% !important;
}

.single-price-box-right-box {
    margin: 0;
    overflow: hidden;
}

.single-price-box-right-left {
    float: left;
    width: 50%;
}

.single-price-box-right-right {
    float: right;
    width: 50%;
}

.single-price-box-h3 {
    font-size: 19px !important;
    text-align: center;
    margin: 20px 0;
    background: #de954c;
    padding: 10px;
    font-weight: bold;
    color: #fff;
}

.single-price-box-left-p1 {
    font-size: 11px !important;
    margin-bottom: 0 !important;
}

.single-price-box-right-p3 a {
    background: #2db260;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #f3f3f3;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.single-price-box-right-p3 a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.single-price-box-right-p3 a:hover {
    background: #73b88e;
    color: #FFF;
    text-decoration: none;
}

.single-price-box-right-p3 a:hover:after {
    right: 1.4rem;
}

.video {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.video iframe {
    width: 70%;
    height: 510px;
    margin: 0 auto 60px;
    display: block;
}

.map {
    position: relative;
    width: 100%;
    padding-top: 40.25%;
    height: 0;
    margin: 40px 0 50px;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.single-map {
    width: 80%;
    overflow: hidden;
    margin: 10px auto 60px auto;
}

.single-map-left {
    float: left;
    width: 50%;
}

.single-map-left iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}

.single-map-right {
    float: right;
    width: 46%;
    margin-top: 5px;
}

.single-map-right-name {
    margin: 0;
    font-size: 21px !important;
    margin-bottom: 0 !important;
    font-weight: bold;
}

.single-map-right-ul-1 {
    margin: 0;
    overflow: hidden;
}

.single-map-right-ul-2 {
    margin: 0;
}

.single-map-right-ul-3 {
    font-size: 16px;
}

.single-map-right-ul-4 {
    margin: 0;
}

.single-map-right-p-1 {
    margin: 20px 0 10px !important;
    font-size: 16px !important;
}

.single-map-right-p-2 {
    margin: 20px 0 20px !important;
    border-bottom: 1px solid #000;
    display: inline-block;
    font-weight: bold;
}

.single-map-right-ul-1 li {
    float: none;
    margin-bottom: 10px;
    line-height: 1.4em;
    font-size: 14px;
}


.single-map-right-name-1{
	color: #6f6f6f;
	margin-bottom: 20px !important;
	font-size: 13px !important;
}

.single-map-right-ul-1 a {
    text-decoration: none;
    background: none;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #828282;
    font-size: 0.6em;
}

.single-map-right-ul-2 span {
    padding: 6px 10px;
    margin-right: 5px;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    position: relative;
    top: -2px;
    font-weight: bold;
    margin-left: 5px;
}

.single-map-right-ul-3 span {
    margin: 0;
    display: block;
    font-size: 11px;
    margin-top: 10px;
}

.button012{
	margin: 20px 0;
}

.button012 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 20px 25px 20px 50px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eee;
    border-radius: 50px;
    z-index: 0;
    overflow: hidden;
    text-decoration: none;
}
.button012 a:before {
    font-family: "Font Awesome 5 Brands"; /* 竊� 縺薙％繧� Brands 縺ｫ螟画峩 */
    content: "\f16d"; /* 竊� Instagram 縺ｮ Unicode */
    font-weight: 400; /* Brands 繧｢繧､繧ｳ繝ｳ縺ｯ騾壼ｸｸ 400 */
    line-height: 1;
    position: absolute;
    left: 5px;
    background: #fff;
    padding: 12px 11px;
    border-radius: 60px;
    z-index: 2;
    margin-left: 20px;
}
.button012 a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #ccc;
    transition: 0.3s;
    left: 0;
}
.button012 a:hover:after {
    width: 100%;
    z-index: -1;
}

/* 蜈ｱ騾壹ョ繧ｶ繧､繝ｳ */
.button011 {
  margin: 20px 0;
}

.button011 a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 240px;
  padding: 20px 25px 20px 50px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  background: #eee;
  border-radius: 50px;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
}

/* 繧｢繧､繧ｳ繝ｳ驛ｨ蛻� */
.button011 a:before {
  font-family: "Font Awesome 5 Free"; /* 竊� 騾壼ｸｸ縺ｮ Free迚� */
  content: "\f02d"; /* 竊� 譛ｬ縺ｮ繧｢繧､繧ｳ繝ｳ��a-book�� */
  font-weight: 900;
  line-height: 1;
  position: absolute;
  left: 5px;
  background: #fff;
  padding: 12px 13px;
  border-radius: 60px;
  z-index: 2;
  margin-left: 20px;
}

/* 繝帙ヰ繝ｼ繧ｨ繝輔ぉ繧ｯ繝� */
.button011 a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #ccc;
  transition: 0.3s;
  left: 0;
}

.button011 a:hover:after {
  width: 100%;
  z-index: -1;
}

/* ================================
   繝帙ユ繝ｫ莠育ｴ��繧ｿ繝ｳ��.button013��
   窶ｻ濶ｲ繧� .button014 縺ｨ邨ｱ荳��医げ繝ｪ繝ｼ繝ｳ邉ｻ��
================================ */
.button013 {
  margin: 20px 0;
}

.button013 a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 260px;
  padding: 20px 25px 20px 55px;
  color: #ffffff;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  background: #16a34a;        /* 邨ｱ荳�繧ｰ繝ｪ繝ｼ繝ｳ */
  border-radius: 50px;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  font-size: 15px;
}

/* 繧｢繧､繧ｳ繝ｳ驛ｨ蛻�ｼ医�繝�Ν繧｢繧､繧ｳ繝ｳ�� */
.button013 a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f594";            /* fa-hotel */
  font-weight: 900;
  line-height: 1;
  position: absolute;
  left: 8px;
  background: #ffffff;
  color: #16a34a;              /* 譛ｬ菴薙→蜷後§繧ｰ繝ｪ繝ｼ繝ｳ */
  padding: 12px 13px;
  border-radius: 60px;
  z-index: 2;
  margin-left: 20px;
  font-size: 14px;
}

/* 繝帙ヰ繝ｼ繧ｨ繝輔ぉ繧ｯ繝茨ｼ域�繧九ａ繧ｰ繝ｪ繝ｼ繝ｳ縺ｮ蜈会ｼ� */
.button013 a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #22c55e;         /* 繝帙ヰ繝ｼ譎ゅ�繝ｩ繧､繝医げ繝ｪ繝ｼ繝ｳ */
  transition: 0.3s;
  left: 0;
}

.button013 a:hover:after {
  width: 100%;
  z-index: -1;
}

/* =====================================================
   螟ｧ蝙�90%蟷��繧ｿ繝ｳ��utton014��
   窶ｻ縺薙■繧峨ｂCV繝懊ち繝ｳ縺ｨ縺励※蜷後§繧ｰ繝ｪ繝ｼ繝ｳ邉ｻ
===================================================== */

.button014 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0 25px 0;
}

.button014 a {
  width: 90%;
  max-width: 600px;
  padding: 25px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  background: #16a34a;        /* 邨ｱ荳�繧ｰ繝ｪ繝ｼ繝ｳ */
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 繧｢繧､繧ｳ繝ｳ驛ｨ蛻�ｼ�ontAwesome蟇ｾ蠢懶ｼ� */
.button014 a .icon {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 18px;
}

/* 繝帙ヰ繝ｼ��C縺ｮ縺ｿ�� */
@media (min-width: 900px) {
  .button014 a:hover {
    background: #149043;      /* 蟆代＠縺 縺第ｿ�＞繧ｰ繝ｪ繝ｼ繝ｳ */
    transform: translateY(1px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  }
	
.button014 a .icon {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.85em;
}
	
}

/* Font Awesome 繧剃ｽｿ縺� ｴ蜷茨ｼ壹け繝ｩ繧ｹ蜷阪↓蜷医ｏ縺帙※隱ｭ縺ｿ霎ｼ縺ｿ貂医∩蜑肴署
   .button014 縺ｯ譌｢蟄倥ｒ諠ｳ螳壹�ゆｸ九� button015 逕ｨ�郁牡縺ｯ button014 縺ｨ蜷檎ｳｻ縺ｫ謠�∴繧具ｼ� */

/* 蜈ｱ騾夲ｼ夊牡險ｭ險茨ｼ�utton014 縺ｨ蜷後§襍､邉ｻ�� */
:root{
  --cta-red: #d32f2f;         /* 荳ｻ隕∬牡��utton014縺ｫ蜷医ｏ縺帙ｋ�� */
  --cta-red-dk: #b71c1c;      /* 繝帙ヰ繝ｼ/謚ｼ荳区凾 */
  --cta-shadow: rgba(211,47,47,0.35);
  --cta-text: #ffffff;
  --sub-text: rgba(255,255,255,0.9);
}

/* button015�夊ｩｳ邏ｰ繧定ｦ九ｋ��V蜷台ｸ顔沿�� */
.button015 { margin: 14px 0 0; }

.button015 a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    padding: 20px 18px 20px 46px;
    color: var(--cta-text);
    background: var(--cta-red);
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    box-shadow: 0 6px 18px var(--cta-shadow);
    transition: transform .15s 
ease, box-shadow .15s 
ease, background-color .15s 
ease;
    margin: 0 auto;
}

.button015 a:hover{
  background: var(--cta-red-dk);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--cta-shadow);
}

.button015 a:active{
  transform: translateY(0);
  box-shadow: 0 5px 14px var(--cta-shadow);
}

/* 繝｡繧､繝ｳ陦鯉ｼ亥､ｧ縺阪ａ�会ｼ九し繝冶｡鯉ｼ郁ｪｬ譏趣ｼ� */
.button015-main{
  font-size: 16px;
  letter-spacing: .02em;
}

.button015-sub{
  font-size: 12px;
  font-weight: 600;
  color: var(--sub-text);
  opacity: .95;
}

/* 遏｢蜊ｰ繧｢繧､繧ｳ繝ｳ��A諠ｳ螳夲ｼ� */
.button015 .icon{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;           /* solid */
  position: absolute;
  left: 16px;
  font-size: 16px;
  line-height: 1;
}

/* 繧ｹ繝槭�縺ｯ蜈ｨ蟷�〒繧ｿ繝��縺励ｄ縺吶￥ */
@media (max-width: 640px){
  .button014 a,
  .button015 a{
    max-width: 100%;
    padding-left: 0px;
  }
}


.green {
    background: #26681a;
}

.purple {
    background: #6000AE;
}

.red {
    font-size: 12px;
    color: #F4080C;
}

.orange {
    background: #C3680E;
}

.blue {
    background: #0214B3;
}

.brown {
    background: #593A01;
}

.gray {
    background: #4F4F4F;
}

.single-map-right-ul-4 span {
    margin-left: 10px;
}

.single-map-right-ul-4 a {
    text-decoration: none;
}

.single-map-right-ul-4 a:hover {
    text-decoration: underline;
}

.single-map-right-ul-4 li {
    list-style: disc;
    margin-bottom: 20px;
}

.single img {
    width: 70%;
    height: auto;
    display: block;
    margin: 30px auto;
}

.list-4 {
    border: 2px solid #2589d0;
    width: 50%;
    margin: 20px auto 50px;
    font-size: 18px;
}

.list-4 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.list-4 ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.list-4 li {
    padding: .3em .3em .3em 0;
    font-size: 16px;
    margin-bottom: 15px;
}

.list-4 li:last-child {
    margin-bottom: 0;
}

.list-4 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

.button-container {
    text-align: center;
    margin: 50px 0;
}

.button-top-text {
    color: #1a3c7f;
    margin-bottom: 10px !important;
    font-weight: bold;
    display: block;
}

.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #04c755;
    color: #fff;
    padding: 2% 10%;
    font-size: 18px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
    width: 35%;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 40px;
}

.custom-button img {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-block;
    margin: 0 !important;
    position: relative;
    top: 8px;
    right: 15px;
}

.custom-button:hover {
    background-color: #76b319;
}

.hotel-list {
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hotel-item {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
}

.hotel-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.hotel-info {
    flex: 1;
    margin-left: 20px;
}

.hotel-name-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #007bff;
    margin: 20px 0 10px !important;
    border: none !important;
}

.hotel-location {
    font-size: 14px !important;
    margin: 0 0 10px;
}

.hotel-description {
    font-size: 16px !important;
    color: #555;
    margin: 0 0 10px;
    line-height: 1.4em !important;
}

.hotel-more-link {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.hotel-more-link:hover {
    text-decoration: underline;
}

.hotel-details {
    text-align: right;
    margin-left: 20px;
    flex-basis: 100%;
    margin-top: 0px;
}

.hotel-rating {
    font-size: 16px !important;
    font-weight: bold;
    color: #4CAF50;
    margin: 0 !important;
}

.hotel-review {
    font-size: 14px;
    color: #666;
}

.hotel-price {
    font-size: 20px !important;
    font-weight: bold;
    color: #007bff;
}

.hotel-price span {
    font-size: 14px;
    color: #666;
}

.button-clear {
    clear: both;
}

.button-container {
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
}

.hotel-check-button {
    flex: 1;
    padding: 20px 20px;
    font-size: 14px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    margin-right: 10px;
    font-weight: bold;
}

.hotel-check-button:last-child {
    margin-right: 0;
}

.hotel-check-button:hover {
    background-color: #0056b3;
}

.agoda-button {
    background-color: #32a852;
}

.bookingcom-button {
    background-color: #003580;
}

.toc-container {
    position: relative;
    width: 60%;
    margin: 0 auto;
}


.toggle-button {
    position: relative;
    padding: 10px 20px;
    width: 400px;
    background-color: #166c9d;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    margin: 20px auto;
    display: block;
    top: -100px;
    left: 5%;
}

.toggle-button:hover {
    background-color: #0e4a72;
}

.toc-001 {
    margin-bottom: 30px;
    padding: 2em 1em 3em 2em;
    border: 1px solid #999;
    background-color: #ffffff;
    color: #333333;
    margin-top: 40px;
    width: 100%;
    max-height: 350px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}


.toc-001.gradient-visible::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent, white);
    display: block;
}

.toc-001:not(.gradient-visible)::after {
    display: none;
}


.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 ol {
    counter-reset: section;
    list-style-type: none;
    padding: 20px 50px 0;
}

.toc-001 ol > li {
    counter-increment: section;
    margin-bottom: 15px;
    position: relative;
}

.toc-001 ol > li::before {
    content: counter(section) ". ";
    position: absolute;
    left: -25px;
}

.toc-001 ol ol {
    counter-reset: subsection;
    list-style-type: none;
    padding-left: 20px;
}

.toc-001 ol ol > li {
    counter-increment: subsection;
    margin-bottom: 13px;
    position: relative;
    font-size: 13px;
}

.toc-001 ol ol > li::before {
    content: counter(section) "-" counter(subsection) ". ";
    position: absolute;
    left: -35px;
}

.toc-001 a {
    color: #166c9d;
    text-decoration: none;
    margin-left: 10px;
}

.toc-expanded {
    max-height: none;
}

.toc-001.toc-expanded::after {
    display: none;
}

.image-container {
    width: 100%;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.image-container::-webkit-scrollbar {
    height: 8px;
}

.image-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.image-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 2px solid #f1f1f1;

}

.image-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.image-wrapper {
    display: flex;
    width: 220%;
}

.image-wrapper img {
    width: 96%;
    object-fit: cover;
    margin: 2% !important;
}

.wp-caption {
    text-align: center;
    width: 100% !important;
}

.wp-caption-text {
    font-size: 14px !important;
    color: #666;
    margin-top: 0;
    margin-bottom: 30px !important;
}

.wp-caption img {
    display: block;
    margin: 30px auto 10px;
}

.table-container {
    width: 95%;
    overflow-x: auto;
    padding: 10px;
    margin: 20px 0 30px;
    position: relative;
}

.table-container table {
    width: 1200px;

    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.table-container th, td {
    border: 1px solid #ddd;
    padding: 20px 50px;
    text-align: center;
    white-space: nowrap;
}

.table-container thead th {
    background-color: #f4f4f4;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-container tbody th {
    background-color: #f9f9f9;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 5;
}

.table-container tbody td {
    background-color: transparent;
}

.table-container tbody tr:nth-child(even) th, .table-container tbody tr:nth-child(odd) th {
    position: sticky;
    left: 0;
    z-index: 5;
}

.scroll-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    animation: scrollHint 2s infinite;
    white-space: nowrap;
    pointer-events: none;
}

@keyframes scrollHint {
    0%, 100% {
        right: 10px;
    }

    50% {
        right: 20px;
    }
}

.scroll-hint span {
    margin-right: 5px;
    font-size: 20px;
}

.custom-scroll-hint {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: shake 1s infinite alternate;
}

@keyframes shake {
    0% {
        transform: translate(0, -50%);
    }

    100% {
        transform: translate(10px, -50%);
    }
}

.custom-image-container {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.custom-image-container1 {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.custom-image-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: 2000px;
}

.custom-image-item {
    width: 40%;
    display: inline-block;
    position: relative;
    margin-right: 10px;
    box-sizing: border-box;
}

.custom-image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin: 0;
}

.custom-scroll-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: shake 1s infinite alternate;
    z-index: 10;
}

.custom-scroll-hint1 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: shake 1s infinite alternate;

    z-index: 10;
}

.custom-tour-card {
    width: 250px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
    position: relative;
    margin-bottom: 20px;
}

.custom-tour-card img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0;
}
	
.custom-tour-card-content {
    padding: 15px;
}

.custom-tour-card-content h3 {
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

.custom-tour-card-content p {
    font-size: 12px;
    margin-bottom: 5px;
    color: #959595;
}

.custom-tour-card-content .custom-tour-rating {
    font-size: 14px;
    color: #ffa500;
    margin-bottom: 10px;
}

.custom-rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: gold;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
}

.custom-tour-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.custom-blog-button {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
}

.custom-blog-button:hover {
    background-color: #0056b3;
}

.custom-blog-button1 {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 11px;
    position: relative;
    top: -10px;
    left: 37px;
}

.custom-blog-button2 {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 11px;
    position: relative;
    top: -10px;
    left: 37px;
}

.custom-tour-buttons {
    height: auto;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(10px);
    }
}

.button-image-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    margin-bottom: 30px;
}

.button-image-wrapper {
    display: flex;
    width: calc(100% * 5 / 3.5);
}

.button-image-item {
    width: calc(100% / 3.5);

    display: inline-block;
    position: relative;
    margin-right: 10px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 3px;
    background: #f7f7f7;
}

.button-image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin: 0;
}

.button-image-button {
    display: block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
}

.scroll-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    z-index: 10;
}

.button-image-container:scroll {
    .scroll-hint {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
}

.button-scroll-hint {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 10;
    white-space: nowrap;
}

.button-image-container:hover .button-scroll-hint {
    opacity: 0;
    transition: opacity 0.3s;
}

.button-image-container:active .button-scroll-hint, .button-image-container:focus .button-scroll-hint {
    display: none;
}

.mokuji {
    font-size: 16px !important;
    text-align: right;
}

.media-tabs {
    margin-top: 50px;
    padding-bottom: 0;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
}

.media-tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid #bdbdbd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.media-tab_item:hover {
    opacity: 0.75;
}

input[name="media_tab_item"] {
    display: none;
}

.media-tab_content {
    display: none;
    padding: 3% 0 0;
    clear: both;
    overflow: hidden;
}

#photos:checked ~ #photos_content, #videos:checked ~ #videos_content, #maps:checked ~ #maps_content {
    display: block;
}

.media-tabs input:checked + .media-tab_item {
    background-color: #7d7d7d;
    color: #fff;
}

.media-tabs input[type="radio"] {
    display: none;
}

.media-tab_item:hover {
    background-color: #b3b3b3;
}

.media-tabs-2 {
    margin-top: 50px;
    padding-bottom: 0;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
}

.media-tab_item2 {
    width: calc(100%/2);
    height: 50px;
    border-bottom: 3px solid #bdbdbd;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.media-tab_item2:hover {
    opacity: 0.75;
}

input[name="media_tab_item_55"] {
    display: none;
}

.media-tab_content2 {
    display: none;
    padding: 3% 0 0;
    clear: both;
    overflow: hidden;
}

#photos-55:checked ~ #photos_content_55, #maps-55:checked ~ #maps_content_55 {
    display: block;
}

.media-tabs-2 input:checked + .media-tab_item2 {
    background-color: #7d7d7d;
    color: #fff;
}

.media-tabs-2 input[type="radio"] {
    display: none;
}

.media-tab_item2:hover {
    background-color: #b3b3b3;
}

.app {
    width: 40%;
    margin: 50px auto;
    border: 1px solid #ddd;
    padding: 40px;
    border-radius: 3px;
}

.app1 {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 40px;
    border-radius: 3px;
}

.app-left {
    width: 20%;
    float: left;
}

.app-left img {
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;
}

.app-right-1 {
    font-size: 22px !important;
    font-weight: bold;
    margin-bottom: 0px !important;
    line-height: 1em !important;
    height: 50px;
}

.app-right-2 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

.app-right-3 {
    font-size: 12px !important;
    margin-bottom: 10px !important;
}

.app-right {
    width: 75%;
    float: right;
}

.app-bottom {
    clear: both;
    margin-top: 20px !important;
    overflow: hidden;
}

.app-box {
    overflow: hidden;
}

.app-bottom {
    margin: 0;
}

.app-bottom li {
    float: left;
    width: 48%;
    margin: 0 1%;
}

.app_btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 60px;
    outline: none;
    color: #1B85FB;
    border: 1px solid #1B85FB;
    background-color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.app_btn:hover {
    color: #fff;
    border: 1px solid #1B85FB;
    background-color: #1B85FB;
}

.app-ul {
    overflow: hidden;
    margin: 40px 0 50px;
}

.app-li {
    margin: 0;
    float: left;
    width: 50%;
}

.recommended-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.recommended-box {
    border: 2px solid #56c0a9;
    padding: 20px;
    position: relative;
    width: 40%;
    background-color: #ffffff;
    margin: 0 auto;
    transition: background-color 0.3s ease;
}

.recommended-box:hover {
    background-color: #f0f7f5;
}

.recommended-tag {
    position: absolute;
    top: -20px;
    left: 10px;
    background-color: #56c0a9;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    font-weight: bold;
}

.recommended-content {
    display: flex;
    align-items: center;
    margin-top: 0px;
}

.recommended-image {
    width: 80px;
    height: 80px;
    background-color: #d3eaea;
    margin-right: 10px;
}

.recommended-text h3 {
    font-size: 16px;
    color: #333333;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #55c1a9;
}

.recommended-text p {
    font-size: 13px;
    color: #777777;
    margin: 5px 0 0;
    line-height: 1.2em !important;
}

.recommended-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin: 0;
}

.blog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #808080;
    color: #fff;
    padding: 2% 10%;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
    width: 35%;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 40px;
}

.blog-button:hover {
    background-color: #A2A2A2;
}

.custom-button1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #808080;
    color: #fff;
    padding: 3% 10%;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
    width: 35%;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 0;
}

.custom-button1:hover {
    background-color: #A2A2A2;
}

.syukujitu {
    border: 1px solid #808080;
    padding: 20px;
    width: 80%;
    margin: 30px auto;
    color: #808080;
    line-height: 1.5em;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
}

.scroll_list {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    overflow-x: auto;
    white-space: nowrap;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.scroll_list li {
    display: inline-block;
    list-style: none;
    height: 290px;
}

.list1 {
    margin-left: 0;
}

.list2, .list3, .list4, .list5 {
    margin-left: 30px;
}

.scroll_list li img {
    width: 100%;
    height: 260px;
    margin: 0 auto;
}

.iconbox {
    margin: 0 auto 2em;
    background: #fef9ed;
    border-radius: 4px;
    max-width: 60%;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.iconbox .box-title {
    font-size: 18px;
    background: #fdc44f;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 4px 4px 0 0;
    line-height: 1.5;
    padding: 1em 2em;
}

.iconbox p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5em;
}

.iconbox .iconbox-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.3em 2em;
}

.iconbox .iconbox-wrap .box-content {
    width: 97%;
    margin: 0 3% 0 0 !important;
    line-height: 1.8;
    -ms-flex-item-align: center;
    align-self: center;
}


.iconbox .iconbox-wrap .box-content p {
    margin-bottom: 1em;
}

.iconballoon {
    -ms-flex-item-align: end;
    align-self: flex-end;
    width: 30%;
    position: relative;
    top: -10px;
    left: -10px;
}

.iconballoon .icon {
    text-align: center;
}

.iconballoon .icon img {
    width: 90px;
    margin: 0 auto;
    overflow: hidden;
    display: block;
    border-radius: 100px;
    margin-top: 50px;
}

.iconballoon amp-img {
    max-width: 120px !important;
    margin: 0;
}

.iconballoon .balloon p {
    line-height: 1.4;
}

.iconballoon .balloon {
    position: relative;
    width: 140px;
    background: #fff;
    padding: 10px;
    text-align: center;
    border: 2px solid #999;
    color: #555555;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1.5;
    left: 0px;
    top: 30px;
}

.iconballoon .balloon:after,.balloon:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    top: 100%;
    left: 50%;
}

.iconballoon .balloon:after {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-top-color: #FFFFFF;
}

.iconballoon .balloon:before {
    border-color: "rgba(153, 153, 153, 0)";
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color: #999999;
}


.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;
}

.iconbox .iconbox-wrap .box-content {
    font-size: .65em;
    margin: 0 5% 0 !important;
}

.iconballoon .icon img {
    width: 80px;
    margin-top: 15px;
}

.iconballoon amp-img {
    max-width: 80px !important;
    margin-top: 5px;
}

.iconballoon .balloon {
    width: 80px;
    font-size: 8px;
    padding: 1em;
    border: 1px solid #999;
    left: 17%;
    top: 0;
}

.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}

.iconbox .list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}
.iconbox .list li {
    position: relative;
    margin: 0 0 0.5em 0 !important;
    padding: 0 0 0.5em 1.4em !important;
    line-height: 1.8;
}

.iconbox .list li:before {
    background-color: #ffa952;
    position: absolute;
    top: 13px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 4px;
    content: '';
}

@media screen and (max-width: 480px) {
    .iconbox .list li:before {
        top: 8px;
    }
}
.iconbox .list-number li {
    position: relative;
    margin: 0.5em 0 !important;
    max-width: 500px;
    padding: 0 0 0.5em 1.8em !important;
    line-height: 1.8;
}

.iconbox .list-number li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #fdc44f;
    color: #fff;
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

@media screen and (max-width: 480px) {
    /* 繝ｪ繧ｹ繝磯 �岼縺ｮ繝代ョ繧｣繝ｳ繧ｰ隱ｿ謨ｴ */
    .iconbox .list-number li {
        padding: 0 0 0.5em 2em !important;
    }

    /* 繝ｪ繧ｹ繝磯 �岼逡ｪ蜿ｷ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
    .iconbox .list-number li:before {
        font-size: 10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        top: 2px;
    }
}

/* 繧ｰ繝ｪ繝ｼ繝ｳ縺ｮ繧｢繧､繧ｳ繝ｳ繝懊ャ繧ｯ繧ｹ */
.iconbox-green {
    background: #eafaf7 !important;
}

/* 繧ｰ繝ｪ繝ｼ繝ｳ縺ｮ繝倥ャ繝�繝ｼ */
.iconbox-green .box-head-green {
    background: #2fcdb4 !important;
}

/* 繝｡繧､繝ｳ縺ｮ蟾ｦ繝代ロ繝ｫ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.main-left-pp {
    text-align: center;
    padding: 15px;
    background: #d7364f;
    font-weight: bold;
    color: #fff;
}


.cf7-req {
    font-size: .8em;
    padding: 4px 6px;
    background: #eb2a2a;
    color: #ffffff;
    margin-left: 10px;
    display: inline-block;
}

@media screen and (max-width: 768px) {
    .cf7-item {
        display: block;
    }

    #cf7-area label {
        display: block;
        margin-bottom: 10px;
    }

    .cf7-q {
        width: 100%;
        margin: 0;
    }

    .cf7-a {
        width: 100%;
    }

    .cf7-submit {
        width: 90%;
    }
}

.wpcf7 {
    width: 50%;
    float: left;
}

.related-box {
    width: 48%;
    float: right;
}

input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    font-weight: bold;
    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background-color: #04c755;
    border: none;
    color: #fff;
    cursor: pointer;
}

span.wpcf7-spinner {
    display: none;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: var(--swiper-scrollbar-bottom, auto) !important;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, auto) !important;
}

.swiper-horizontal {
    margin-bottom: 40px !important;
    margin-top: 40px;
}

div.fixed-wrap {
    position: relative;
    clip-path: inset(0 0 0 0);
    width: 100%;
    height: 450px;
    margin-top: 0;
}

div.fixed {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100vw;
    height: calc(100vh + 150px);
    background-image: url(http://oglife555.com/wp/wp-content/uploads/2026/03/back.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #000;
    z-index: -1;
}

div.fixed1 {
    font-size: 32px;
    position: relative;
    top: 0;
    left: 0;
    color: #fff;
    font-weight: bold;
}

div.fixed-wrap h1  {
    position: relative;
    top: 170px;
    left: 20%;
}

.single {
    margin-top: 130px;
}

.header-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #04c755;
    color: #fff !important;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
    width: 200px;
    margin: 0 auto;
    display: block !important;
    margin-top: 0;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 10px !important;
    position: relative;
    margin-right: 15px;
}

.header-contact a:hover {
    background-color: #76b319;

    text-decoration: none !important;
}

.pro-ul {
    margin: 0;
}

.pro-ul li {
    margin: 0;
    width: 9%;
    margin-right: 10px;
}

.pro-ul img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.pro-li a:hover {
    background-color: #fff !important;
}

.pro-ul1 {
    margin: 0;
}

.pro-ul1 li {
    margin: 0;
    width: 30px;
    margin-right: 0;
    float: left;
}

.pro-ul1 img {
    width: 60%;
    height: auto;
    border-radius: 0;
    margin: 10px;
}

.pro-li1 a:hover {
    background-color: #fff !important;
}



.pro-ul2 {
  margin-top: 10px !important;
}

.pro-ul2 li {
    margin: 0;
    width: 10%;
    margin-right: 0;
    float: left;
}

.pro-ul2 img {
    width: 60%;
    height: auto;
    border-radius: 0;
    margin: 10px;
}

.pro-li2 a:hover {
    background-color: #fff !important;
}

.support {
    margin: 0;
}

.support h3 {
    width: 91%;
    border-left: 5px solid #4f4f4f;
    border-radius: 2px;
    font-weight: bold;
    padding: 1% 3%;
    margin: 0 0 2em;
}

.support p {
    font-size: 16px;
    line-height: 1.8em;
}

.support p strong {
    background: linear-gradient(transparent 60%, #f5bf25 60%);
    font-weight: bold;
    font-size: 18px;
}

.selectbox-3 {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.selectbox-3::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox-3 select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.list-9 {
    list-style-type: disc;
    list-style-position: inside;
    padding: 1em;
    border: 2px solid #e7e7e7;
    margin: 10px 0 30px 0;
}

.list-9 li {
    padding: 1em;
    line-height: 1.5em;
}

.list-9 li:not(:last-child) {
    border-bottom: 1px dashed #a4a4a4;
}

.list-9 li::marker {
    color: #818181;
    font-size: 1.1em;
}

.name-box {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    border: 1px solid #d3d3d3;
    margin-bottom: 50px;
}

.profile-header h2 {
    text-align: center;
    font-size: 24px;
    color: #333;
}

.profile-content {
    display: flex;
    align-items: center;
    margin-top: 0;
}

.profile-image img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.profile-info-name {
    margin: 0;
    font-size: 18px !important;
    font-weight: bold;
}

.profile-info-name span {
    font-size: 14px !important;
}

.profile-info p {
    margin: 5px 0;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
}

.single-line {
    margin: 0;
    overflow: hidden;
    border: dotted 4px #04c755;
    padding: 20px;
    background: #f1f5f3;
}

.single-line img {
    width: 80%;
    height: auto;
    position: relative;
    top: 30px;
    left: 10px;
}

.single-line p {
    font-size: 13px !important;
    line-height: 1.2em;
    margin-bottom: 10px !important;
}

.single-line-left {
    float: left;
    width: 15%;
}

.single-line-right {
    float: right;
    width: 80%;
}

.single-line-right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #04c755;
    color: #fff !important;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
    width: 95%;
    margin: 0 auto;
    display: block !important;
    margin-top: 0;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 10px !important;
    position: relative;
}

.single-line-right a:hover {
    background-color: #76b319;
    text-decoration: none !important;
}

.quote-2 {
    max-width: 70%;
    position: relative;
    padding: 2.5em 2.5em 2em 3em;
    color: #787878;
    margin: 0 auto 50px;
    font-size: 12px;
}

.quote-2::before, .quote-2::after {
    display: inline-block;
    position: absolute;
    width: 4em;
    height: 4em;
    content: '';
}

.quote-2::before {
    top: 0;
    left: 0;
    border-top: 3px solid #919191;
    border-left: 3px solid #919191;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23929292'%3E%3C/path%3E%3C/svg%3E");
    background-position: top 35% left 35%;
    background-size: 2em;
    background-repeat: no-repeat;
}

.quote-2::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #919191;
    border-right: 3px solid #919191;
}

.quote-2 p {
    font-size: 15px;
    line-height: 1.8em;
}

.quote-2 p:last-of-type {
    margin-bottom: 0;
}

.review-wrapper {
    display: flex;
    overflow-x: auto;
    margin-right: 10px;
    padding: 20px 0;
    margin-top: 30px;
    padding-top: 30px !important;
    position: relative;
}

.review-container {
    min-width: 190px;
    flex-shrink: 0;
    border: 2px solid #dfdfdf;
    border-radius: 10px;
    padding: 40px 20px 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    position: relative;
    width: 305px;
    margin-right: 20px;
}

.review-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 10;
}

.review-icon img {
    width: 70px;
    height: 70px;
    border-radius: 0%;
    object-fit: cover;
}

.review-content p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 0;
}

.continue-button {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background-color: #387ed8;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.continue-button:hover {
    background-color: #689CDF;
}

.continue-button a {
    color:#fff; 
	text-decoration: none;
    color: #fff;
}

.qa-6 {
    max-width: 100%;
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa-6 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-6 summary::before, .qa-6 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-6 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-6 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-6[open] summary::after {
    transform: rotate(225deg);
}

.qa-6 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-6[open] p {
    transform: none;
    opacity: 1;
}

.qa-6 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

.top-review-h2 {
    position: relative;
    padding: 1em 2em;
    text-align: center;
    font-size: 28px;
    margin: 60px 0;
    font-weight: bold;
}

.top-review-h2:before, .top-review-h2:after {
    position: absolute;
    content: '';
}

.top-review-h2:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.top-review-h2:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}


.top-review-h21 {
    position: relative;
    padding: 1em 2em;
    text-align: center;
    font-size: 28px;
    margin: 0 0 60px 0;
    font-weight: bold;
}

.top-review-h21:before, .top-review-h21:after {
    position: absolute;
    content: '';
}

.top-review-h21:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.top-review-h21:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}



.category {
    margin: 40px auto 0;
    width: 95%;
    overflow: hidden;
}

.category-name {
    position: relative;
    top: 180px;
    z-index: 2;
    color: #fff;
    font-size: 34px;
    text-align: center;
    font-weight: bold;
}

.top-bar {
    overflow: hidden;
    margin: 20px auto 30px;
    display: block;
}

.top-bar li {
    float: left;
    width: 31%;
    margin: 1%;
}

.top-bar li:first-child {
    margin-left: 1.7%;
}

.top-bar img {
    width: 100%;
    height: auto;
}

.footer {
    background-color: #ececec;
    color: #fff;
    padding: 40px 0 0;
    font-family: 'Arial', sans-serif;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    flex: 1;
    text-align: center;
    margin-bottom: 20px;
}

.footer-logo img {
    width: 100%;
    height: auto;
}

.footer-logo h2 {
    color: #fff;
    font-size: 24px;
    margin: 10px 0;
}

.footer-logo p {
    font-size: 9px;
    color: #4f4f4f;
    text-align: center;
    display: contents;
}

.footer-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links nav ul {
    list-style: none;
    padding: 0;
    display: block;
    justify-content: center;
    margin-bottom: 20px;
}

.footer-links nav ul li {
    margin: 15px 0;
    display: block;
    overflow: hidden;
    width: 100%;
    font-size: 13px;
}

.footer-links nav ul li a {
    color: #000;
    text-decoration: none;
}

.footer-links nav ul li a:hover {
    text-decoration: underline;
}

.contact-button {
    background-color: #ffcc00;
    color: #1c1e26;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.footer-contact {
    flex: 1;
    margin-bottom: 20px;
    margin-right: 20px;
}

.footer-contact h3 {
    color: #333333;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.footer-contact p, .footer-contact a {
    color: #5e5e5e;
    text-decoration: none;
}

.footer-contact p, .footer-contact a:hover {
    text-decoration: underline;
}

.footer-contact li {
    font-size: 13px;
    margin-bottom: 10px;
	color: #000;
}

.footer-topics {
    flex: 1;
}

.footer-topics h3 {
    color: #333333;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.footer-topics ul {
    list-style: none;
    padding: 0;
}

.footer-topics ul li {
    font-size: 13px;
    margin-bottom: 10px;
}

.footer-topics ul li a {
    color: #5e5e5e;
    text-decoration: none;
}

.footer-topics ul li a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    background-color: #181a21;
    border-top: 1px solid #333;
    margin-top: 30px;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: #a0a0a0;
}

.footer-terms {
    display: none;
}

.footer-terms a {
    color: #a0a0a0;
    text-decoration: none;
    margin: 0 10px;
}

.most-popular-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

.section-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.most-popular-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.popular-post {
    background: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    width: calc(25% - 15px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popular-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.post-thumbnail img {
    width: 100%;
    height: 185px;
    display: block;
	margin: 0;
}

.post-title {
    font-size: 16px;
    font-weight: none;
    margin: 10px;
    color: #333;
    text-align: left;
    line-height: 1.4em;
}

.post-title a {
    text-decoration: none;
    color: inherit;
}

.more-articles {
    position: absolute;
    top: 30px;
    right: 30px;
}

.more-articles-btn {
    font-size: 14px;
    padding: 10px 20px;
    border: 2px solid #868686;
    border-radius: 5px;
    text-decoration: none;
    color: #626262;
    transition: background 0.3s ease;
}

.more-articles-btn:hover {
    background: #000;
    color: #fff;
}

.must-list {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #ddd;
    padding-top: 30px;
    margin-top: 50px;
}

.card-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
}

.card-container {
    display: flex;
    gap: 20px;
}

.card {
    position: relative;
    width: 430px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ddd;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.card img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 240px 20px 60px;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #3c3c3c);
    text-shadow: 0 2px 4px rgb(56 56 56 / 50%);
}

.card-content h2 {
    font-size: 32px;
    font-weight: bold;
}

.card-content p {
    font-size: 14px;
    margin-top: 5px;
}

.page-template {
    width: 97%;
    margin: 140px auto 0;
    overflow: hidden;
}

.single-tag {
    border: 1px solid #ddd;
    padding: 15px 20px;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    display: inline-block;
    background: #f4f4f4;
}

.tags a {
    text-decoration: none;
    background: #ddd;
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 3px;
    margin-;: unset;
    font-size: 12px;
    margin-left: 10px;
}

.myChangeImage {
    position: relative;
    width: 100%;
    height: 300px;
}

.myChangeImage img {
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImage 10s infinite;
    opacity: 0;
    width: 100%;
    height: 290px;
}

@keyframes ChangeImage {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.myChangeImage img:nth-of-type(1) {
    animation-delay: 0s;
}

.myChangeImage img:nth-of-type(2) {
    animation-delay: 2s;
}

.myChangeImage img:nth-of-type(3) {
    animation-delay: 4s;
}

.myChangeImage img:nth-of-type(4) {
    animation-delay: 6s;
}

.myChangeImage img:nth-of-type(5) {
    animation-delay: 8s;
}

.fixed-cat {
    position: relative;
}

.notpage {
    margin-top: 130px;
    width: 98%;
    margin: 130px auto 20px;
}

.notpage img {
    width: 100%;
    height: auto;
}

.notpage h1 {
    font-size: 21px;
    margin: 20px 0;
    font-weight: bold;
}

.notpage h2 {
    margin: 0;
}

.notpage p {
    margin: 0;
}

.unique-profile-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.unique-profile-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.unique-profile-pic img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
}

.unique-profile-details {
    position: relative;
    flex-grow: 1;
}

.unique-profile-details h2 {
    font-size: 24px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: bold;
}

.unique-profile-details h3 {
    font-size: 15px;
    color: #666;
    margin-bottom: 10px;
    margin-top: 10px;
}

.unique-profile-details p {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.unique-social-list {
    display: flex;
    padding: 0;
    list-style: none;
}

.unique-social-item {
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.unique-social-item img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin: 0;
}

.unique-read-more {
    position: absolute;
    top: 5px;
    right: 0;
    padding: 15px 20px;
    border: 1px solid #939393;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}

.unique-read-more:hover {
    background-color: #A2A2A2;
    transition: all .3s;
}

.custom-main-wrapper {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}

.custom-category-section {
    margin-bottom: 20px;
    position: relative;
}

.custom-category-header {
  padding: 0px;
}

.custom-category-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: #3b2a1a; /* ブラウン系：ディスペンサリー見出しと同じ */
  margin: 0px;
  line-height: 1.35;
  position: relative;
  padding-bottom: 10px;
}

/* 下にゴールドのライン */
.custom-category-header h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: #c9a96a; /* ゴールドライン */
  border-radius: 999px;
  margin-top: 10px;
}

.custom-category-header .custom-see-all {
    color: #007bff;
    text-decoration: none;
}

.custom-scroll-area {
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    padding-bottom: 10px;
}

.custom-scroll-area::-webkit-scrollbar {
    display: none;
}

.custom-large-card {
    width: 49%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
}

.custom-large-card img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin: 0;
}

.custom-large-card-content {
    padding: 15px;
}

.custom-large-card-content h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.custom-large-card-content p {
    font-size: 14px;
    margin-bottom: 5px;
}

.custom-large-card-content .custom-rating {
    font-size: 14px;
    color: #ffa500;
    margin-bottom: 5px;
}

.custom-large-card-content strong {
    color: #333;
    font-weight: bold;
    font-size: 16px;
}

.custom-small-card {
    width: 340px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
    position: relative;
}

.custom-small-card img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin: 0;
}

.custom-small-card-content {
    padding: 15px;
}

.custom-small-card-content h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.custom-small-card-content p {
    font-size: 12px;
    margin-bottom: 5px;
    color: #5b5b5b;
}

.custom-small-card-content .custom-rating {
    font-size: 14px;
    color: #ffa500;
    margin-bottom: 5px;
}

.custom-small-card-content strong {
    color: #333;
    font-weight: bold;
    font-size: 11px;
}

.custom-small-card a {
    color: #000;
    text-decoration: none;
}

.custom-large-card a {
    color: #000;
    text-decoration: none;
}

.custom-rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: gold;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
}

.custom-scroll-area::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .custom-large-card {
        width: 90%;
    }

    .custom-small-card {
        width: 80%;
    }

    .custom-scroll-area {
        gap: 10px;
    }
}

.custom-large-card:hover, .custom-small-card:hover {
    background-color: #fff4e0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-large-card, .custom-small-card {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.custom-small-card-p {
    font-size: 12px;
    text-align: right;
}

.content-wrapper, .custom-content-wrapper {
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    align-items: center;
}

.image-section, .custom-image-section {
    flex: 1;
    margin-right: 20px;
}

.image-section img, .custom-image-section img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.text-section, .custom-text-section {
    flex: 1;
    margin-left: 1%;
    margin-right: 2%;
}

.text-section h2, .custom-text-section h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.5em;
}

.text-section p, .custom-text-section p {
    font-size: 16px;
    line-height: 1.4em;
    margin-bottom: 15px;
}

.text-section a, .custom-text-section a {
    color: #007bff;
    text-decoration: none;
}

.text-section a:hover, .custom-text-section a:hover {
    text-decoration: underline;
}

.custom-content-wrapper {
    flex-direction: row-reverse;
}

.tag-number {
    margin: 0;
    font-size: 12px;
    margin-bottom: 20px;
    border-bottom: 2.5px solid #454545;
    display: inline-block;
}

.pr1 {
    width: 96%;
    margin: 0 auto;
}

.pr2 {
    width: 96%;
    margin: 0 auto;
}


.pr3 {
    width: 91%;
    margin: 0 auto;
}

.kotei-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f9f9f9;
    padding: 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.kotei-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    max-width: 1070px;
    margin: 0 auto;
}

.kotei-content p {
    font-size: 12px;
    color: #333;
    margin-right: 0;
    font-weight: 600;
}

.kotei-buttons {
    display: flex;
    gap: 10px;
    font-size: 12px;
}

.kotei-button-outline {
    padding: 15px 20px;
    border: 1px solid #333;
    background-color: transparent;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.kotei-button-outline:hover {
    background-color: #f1f1f1;
}

.kotei-button-solid {
    padding: 15px 20px;
    background-color: #04c755;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.kotei-button-solid:hover {
    background-color: #046E09;
}

.kotei-content p br {
    display: none;
}

.kotei-container.hidden {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.kotei-container.visible {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.custom-card-container {
    display: flex;
    overflow-x: scroll;
    padding: 20px;
    margin-bottom: 30px;
}

.custom-card {
    width: 540px;
    background-color: white;
    margin-right: 20px;
    flex-shrink: 0;
    border: 1px solid #ddd;
    position: relative;
}

.custom-card-image-wrapper {
    float: left;
    width: 48%;
}

.custom-card-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.custom-card-tag {
	position: absolute;
    bottom: 65px;
    left: 10px;
    background-color: #1c2a52;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    border: 1px solid #101729;
    position: absolute;
}

.custom-card-content {
    float: right;
    width: 48%;
    margin-right: 5px;
}

.custom-card-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.3em;
    margin-top: 10px;
}

.custom-card-content .custom-card-date {
    font-size: 11px;
    color: #777;
    margin: 5px 0px;
}

.custom-card-content .custom-card-button {
    background-color: #523d35;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: block;
    width: 90%;
    margin: 20px auto 0 auto;
}

.custom-card-content .custom-card-button:hover {
    background-color: #3e2d27;
}

.custom-card-text {
    padding: 20px;
    background-color: #f0f0f0;
    font-size: 14px;
    color: #555;
    clear: both;
    line-height: 1.3em;
}

.index-tag {
    font-size: 18px;
    font-weight: normal;
}

.post-count {
    display: block;
    font-size: 13px;
    margin-top: 10px;
    text-decoration: underline;
}

.page-template1 {
    margin-top: 30px;
}

.page-template2 {
  width: 98%;
  margin: 170px auto 0 auto;
}

.page-template3 {
  width: 98%;
  margin: 30px auto 0 auto;
}

.category-main{
	width: 95%;
	margin: 0 auto;
}

.noblog {
    font-size: 14px;
}

.hotel-rev-p {
    font-size: 11px !important;
    margin-top: 10px;
    line-height: 1.3;
    background: #fff6d9;
    padding: 2%;
    border: 1px solid #e8e2a0;
    border-radius: 3px;
}

#cf7-area{
	width: 45%;
	float: left;
}

#cf7-area p{
	font-size: 16px;
	line-height: 1.5em;
	margin-bottom: 30px;
}

blockquote {
    position: relative;
    padding: 20px 45px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
    width: 70%;
    margin: 50px auto;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

#toc_container {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: block !important;
	line-height: 1.4;
	margin: 6em auto 0;
	padding: 2em 2em 1em;
	position: relative;
	width: 50% !important;
}

.toc_title {
	background-color: #fff;
	padding: 0 1em;
	position: absolute;
	text-align: center;
	top: -.8em;
}

.toc_list a {
	border: none;
	color: #444;
	display: block;
	text-decoration: none;
}

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.toc_list ul {
	font-size: .9em;
	padding: 0.7em 0 0 1em;
}

.toc_list li {
	background: none;
	margin-bottom: 0.4em;
	padding-bottom: 0.2em;
	padding-left: 0;
}

.toc_list > li > a {
	font-weight: bold;
	padding: 0 .5em .5em;
}


:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --head-bg: #f3f4f6;
  --row-alt: #fafafa;
  --scroll-thumb: #cfcfcf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --text: #e5e7eb;
    --muted: #a5acb8;
    --line: #1f2937;
    --head-bg: #1f2937;
    --row-alt: rgba(255,255,255,0.05);
    --scroll-thumb: #555;
  }
}

.terp-block {
  background: var(--bg);
  color: var(--text);
  padding: 20px;
}
.terp-block h2 {
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.3;
  margin: 0 0 .5rem;
}
.terp-lead {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1rem;
}

.terp-scroll {
  width: 100%;
  overflow-x: auto;        
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch; 
}


.terp-scroll::-webkit-scrollbar { height: 8px; }
.terp-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
}

.terp-table {
  width: 100%;            
  min-width: 950px;      
  border-collapse: collapse;
  font-size: .95rem;
  text-align: center;   
  table-layout: auto;
}

.terp-table th,
.terp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  word-break: keep-all;
}

.terp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--head-bg);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}



.terp-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}

.terp-table th span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: .85em;
}

.terp-note {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--muted);
}


@media (max-width: 1024px) {
  .terp-table { min-width: 860px; }
}
@media (max-width: 768px) {
  .terp-table { min-width: 720px; font-size: .92rem; }
  .terp-table th, .terp-table td { padding: 10px 12px; }
}

.terp-figure{
	overflow: scroll;
}

/* =====================================
   参考リンクボックス（Apple風ミニマル）
   ※ 崩れ対策・テーマ上書き対策を完全に含む
===================================== */

/* --- ボックス本体 --- */
.ref-box {
  display: block !important; /* テーマのflex破壊対策 */
  border: 2px solid #e5e5e5;
  border-radius: 22px;
  padding: 32px 1.4rem 24px;
  background: #fafafa;
  color: #111;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  max-width: 680px;
  position: relative;
  margin: 48px auto;
  box-shadow: 0 8px 28px rgba(0,0,0,0.04);
  overflow: visible;
  transition: box-shadow .25s ease, transform .25s ease;
}

.ref-box:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* --- ラベル（参考リンク） --- */
.ref-label {
  position: absolute;
  top: 0;
  left: 1.4rem;
  transform: translateY(-50%);
  background: #111;
  color: #fff;
  padding: 0.35em 1em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* --- リンク全体（クリック範囲） --- */
.ref-link {
  display: flex !important;           /* ←最重要：スマホで消されるのを防ぐ */
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  color: inherit;
}

/* --- サムネイル画像 --- */
.ref-thumb {
  width: 82px !important;
  height: 82px !important;
  border-radius: 12px;
  object-fit: cover !important;       /* ←画像崩れ対策 */
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* --- タイトル --- */
.ref-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #000;
  transition: color .2s ease;
}

.ref-title:hover {
  color: #0071e3; /* Appleブルー */
  text-decoration: underline;
}


/* =====================================
   スマホ専用（768px以下）
===================================== */
@media (max-width: 768px) {

  .ref-box {
    border-radius: 18px;
    padding: 28px 1.2rem 20px;
    margin: 40px auto;
  }

  .ref-label {
    left: 1.2rem;
    font-size: 0.72rem;
  }

  .ref-link {
    display: flex !important;         /* ←スマホで上書きされるため再指定必須 */
    flex-direction: row;
    gap: 1rem;
  }

  .ref-thumb {
    width: 70px !important;
    height: 70px !important;
    border-radius: 10px;
    object-fit: cover !important;
  }

  .ref-title {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}

/* 共通（PC ベース）*/
.list-8 {
  position: relative;
  width: min(75%, 760px);
  margin: 40px auto;
  padding: 1.75rem 1.75rem 1.75rem 2.75rem;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

/* 左のアクセントバー */
.list-8::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00c6ff, #0072ff);
}

/* ラベル（タイトル） */
.list-8 > div {
  position: absolute;
  top: -0.9em;
  left: 1.75rem;
  padding: 0.25em 0.9em;
  background-color: #ffffff;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  color: #6e6e73;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* リスト本体 */
.list-8 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-8 li {
  position: relative;
  padding: 0.3em 0 0.3em 1.2em;
  color: #1d1d1f;
  line-height: 1.6;
}

/* カスタムのドット */
.list-8 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0072ff;
  box-shadow: 0 0 0 4px rgba(0,114,255,0.12);
}

/* ホバーでほんの少しだけ動き＋色変化 */
.list-8 li:hover {
  color: #000;
}

.list-8 li:hover::before {
  transform: scale(1.1);
}

.list-8-strong{
    background:none !important;
}


.ref-box p{
	margin: 0;
}

/* 繝輔か繝ｼ繝 蜈ｨ菴薙�繝�じ繧､繝ｳ */
.contact-form-container {
    max-width: 80%;
    margin: 40px auto;
    padding: 40px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 蜷��蜉帙ヵ繧｣繝ｼ繝ｫ繝峨�繝ｩ繝吶Ν */
.contact-form-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 14px;
}

/* 蠢� 医ヵ繧｣繝ｼ繝ｫ繝峨�繧ｹ繧ｿ繧､繝ｫ */
.contact-form-container label:has([required])::after {
    content: " *";
    color: red;
}

/* 蜈･蜉帙ヵ繧｣繝ｼ繝ｫ繝峨�繝�じ繧､繝ｳ */
.contact-form-container input,
.contact-form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* 繝輔か繝ｼ繧ｫ繧ｹ譎ゅ�繧ｹ繧ｿ繧､繝ｫ */
.contact-form-container input:focus,
.contact-form-container textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 繝�く繧ｹ繝医お繝ｪ繧｢縺ｮ隱ｿ謨ｴ */
.contact-form-container textarea {
    height: 120px;
    resize: vertical;
}

/* 騾∽ｿ｡繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.contact-form-container input[type="submit"] {
    background-color: #007bff;
    color: white;
    font-size: 18px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 60%;
    margin: 0 auto;
    display: block;
}

/* 騾∽ｿ｡繝懊ち繝ｳ縺ｮ繝帙ヰ繝ｼ繧ｨ繝輔ぉ繧ｯ繝� */
.contact-form-container input[type="submit"]:hover {
    background-color: #0056b3;
}

/* 繧ｨ繝ｩ繝ｼ繝｡繝�そ繝ｼ繧ｸ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.wpcf7-not-valid-tip {
    color: red;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* 謌仙粥繝｡繝�そ繝ｼ繧ｸ */
.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    color: #155724;
    border-left: 5px solid #28a745;
    padding: 10px;
    margin-bottom: 10px;
}

/* 繧ｨ繝ｩ繝ｼ繝｡繝�そ繝ｼ繧ｸ */
.wpcf7-validation-errors {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 5px solid #dc3545;
    padding: 10px;
    margin-bottom: 10px;
}

/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢懶ｼ医せ繝槭�逕ｨ�� */
@media screen and (max-width: 480px) {
    .contact-form-container {
        padding: 15px;
		max-width: 98%;
    }
    .contact-form-container input,
    .contact-form-container textarea {
        font-size: 14px;
    }
    .contact-form-container input[type="submit"] {
        font-size: 16px;
        padding: 8px;
    }
}


form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.item-group p{
	width: 50%;
	float: left;
}


/* ===============================
   CF7 蜍慕噪繧｢繧､繝�Β縺ｮ繝ｬ繧､繧｢繧ｦ繝亥ｮ牙ｮ壼喧
   =============================== */
#item-wrapper { margin: 0 0 24px; }

/* 陦後Ξ繧､繧｢繧ｦ繝茨ｼ�2繧ｫ繝ｩ繝 �井ｸ翫↓繝ｩ繝吶Ν繝ｻ荳九↓繝輔ぅ繝ｼ繝ｫ繝会ｼ� */
#item-wrapper .item-group{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "l1 l2"
    "f1 f2";
  gap: 8px 24px;
  align-items: center;
}

/* 繝ｩ繝吶Ν蜈ｱ騾� */
#item-wrapper .item-group > label{ 
  margin:0; font-weight:700; line-height:1.2;
}

/* 逶ｴ荳九こ繝ｼ繧ｹ��<p>縺ｧ蛹�∪繧後※縺�↑縺�ｼ� */
#item-wrapper .item-group > label:nth-of-type(1){ grid-area: l1; }
#item-wrapper .item-group > label:nth-of-type(2){ grid-area: l2; }
#item-wrapper .item-group > select[name="item[]"]{ grid-area:f1; width:100%!important; }
#item-wrapper .item-group > input[name="qty[]"]  { grid-area:f2; width:100%!important; }

/* <p> 繝ｩ繝��繧ｱ繝ｼ繧ｹ縺ｫ繧ょｯｾ蠢懶ｼ�F7縺ｮ逋厄ｼ� */
#item-wrapper .item-group > p{ margin:0; }
#item-wrapper .item-group > p:nth-of-type(1){ grid-area:f1; }
#item-wrapper .item-group > p:nth-of-type(1) select{ width:100%!important; }
#item-wrapper .item-group > p:nth-of-type(2){ grid-area:f2; }
#item-wrapper .item-group > p:nth-of-type(2) input{  width:100%!important; }

/* remove 繝懊ち繝ｳ縺ｯ陦後�荳九↓繝輔Ν蟷�〒鄂ｮ縺� */
#item-wrapper .item-group .remove-item-btn{
  grid-area: f1 / 1 / f1 / -1;  /* 1陦御ｸ九�蟾ｦ蜿ｳ繝輔Ν */
  justify-self: start;
  margin-top: 6px;
}

/* 逕ｻ髱｢縺檎強縺�→縺阪�1繧ｫ繝ｩ繝  */
@media (max-width:640px){
  #item-wrapper .item-group{
    grid-template-columns:1fr;
    grid-template-areas:
      "l1" "f1"
      "l2" "f2";
    gap:8px;
  }
  #item-wrapper .item-group .remove-item-btn{ grid-area:auto; }
}

/* 莠磯亟�壻ｸ�ｸ�谿九▲縺溽ｩｺ<p>縺ｯ髱櫁｡ｨ遉ｺ */
.wpcf7 form p:empty{ display:none; }

/* CF7 蜍慕噪繧｢繧､繝�Β縺ｮ螳牙ｮ壹Ξ繧､繧｢繧ｦ繝� */
#item-wrapper .item-group{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;            /* 竊� remove 逕ｨ縺ｮ3陦檎岼繧定ｿｽ蜉  */
  grid-template-areas:
    "l1 l2"
    "f1 f2"
    "rm rm";                                      /* 竊� remove 陦� */
  gap: 8px 24px;
  align-items:center;
}

/* 繝ｩ繝吶Ν */
#item-wrapper .item-group > label{margin:0;font-weight:700;line-height:1.2;}
#item-wrapper .item-group > label:nth-of-type(1){ grid-area:l1; }
#item-wrapper .item-group > label:nth-of-type(2){ grid-area:l2; }

/* 逶ｴ荳九ヵ繧｣繝ｼ繝ｫ繝� */
#item-wrapper .item-group > select[name="item[]"]{grid-area:f1;width:100%!important;height: 55px;}
#item-wrapper .item-group > input[name="qty[]"]  { grid-area:f2; width:100%!important; }

/* <p> 繝ｩ繝��縺ｫ繧ょｯｾ蠢� */
#item-wrapper .item-group > p{ margin:0; }
#item-wrapper .item-group > p:nth-of-type(1){ grid-area:f1; }
#item-wrapper .item-group > p:nth-of-type(1) select{ width:100%!important; }
#item-wrapper .item-group > p:nth-of-type(2){ grid-area:f2; }
#item-wrapper .item-group > p:nth-of-type(2) input{ width:100%!important; }

/* remove 繝懊ち繝ｳ縺ｯ蟆ら畑陦後↓驟咲ｽｮ�磯㍾縺ｪ繧企亟豁｢�� */
#item-wrapper .item-group .remove-item-btn {
    grid-area: rm;
    justify-self: start;
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* 繝｢繝舌う繝ｫ縺ｯ1繧ｫ繝ｩ繝  */
@media (max-width:640px){
  #item-wrapper .item-group{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "l1" "f1" "l2" "f2" "rm";
    gap:8px;
  }
}


.grecaptcha-badge{
	display: none !important;
}

.selectbox-3 {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 100%;          /* 蟷�ｒ繝輔か繝ｼ繝 縺ｫ蜷医ｏ縺帙◆縺� ｴ蜷� */
  max-width: 420px;     /* 莉ｻ諢� */
	height: 45px;
}

/* 笆ｼ縺ｮ逍台ｼｼ隕∫ｴ  */
.selectbox-3::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #535353;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  pointer-events: none;
}

/* Contact Form 7 縺ｮ select 縺ｫ繧る←逕ｨ */
.selectbox-3 select,
.selectbox-3 .wpcf7-form-control.wpcf7-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 230px;         /* 100% 縺ｫ縺励◆縺�↑繧� 100% 縺ｫ */
  width: 100%;
  height: 2.8em;
  padding: .4em calc(.8em + 30px) .4em .8em; /* 蜿ｳ蛛ｴ縺ｯ笆ｼ縺ｮ蛻�□縺醍｢ｺ菫� */
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background-color: #fff;
  color: #333;
  font-size: 1em;
  line-height: 1.2;
  cursor: pointer;
}

/* 繧ゅ＠繝��繝槫�縺ｮ繝輔か繝ｼ繝 陬�｣ｾ縺悟ｼｷ縺� ｴ蜷医�繝ｪ繧ｻ繝�ヨ�井ｻｻ諢擾ｼ� */
.selectbox-3 .select-reset {
  background-image: none !important;
  box-shadow: none !important;
}

.line_btn {
  padding: 10px 0;
  width: 80%;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #06C755;
  margin: 0 auto;
  display: block;
}
.line_btn a {
  display: inline-block;
  width: 100%;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #06C755;
  position: relative;
}
.line_btn a::before {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  bottom: 0;
  content: "";
  height: 7px;
  width: 7px;
  margin: auto;
  position: absolute;
  right: 30px;
  top: 0;
  transform: rotate(45deg);
  transition: right .3s;
}
.line_btn a:hover::before {
  right: 25px;
}

.line_btn_main h2 {
    position: relative;
    padding: 1em 2em;
    text-align: center;
    font-size: 28px;
    margin: 60px 0;
    font-weight: bold;
}

.line_btn_main h2:before, .line_btn_main h2:after {
    position: absolute;
    content: '';
}

.line_btn_main h2:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.line_btn_main h2:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

.line_btn_main p {
    margin: 40px auto;
    font-size: 18px;
    line-height: 1.6em;
    width: 90%;
}

.custom-card-button a{
	color: #fff;
	text-decoration: none;
}

/* =========================================
   ★ Apple 風 “強調ボックス”（.single-new-ul）
   ========================================= */
.single-new-ul {
  position: relative;
  width: min(78%, 800px);
  margin: 48px auto;
  padding: 2rem 2rem 2rem 3rem;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #d0d0d0;
  box-shadow: 0 22px 45px rgba(0,0,0,0.08);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

/* 左のアクセントバー（強調版） */
.single-new-ul::before {
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 6px;                     /* ← .list-8 より太い */
  border-radius: 999px;
  background: linear-gradient(180deg, #111, #555); /* 黒基調で重要感 */
}

/* タイトルラベル（より強い存在感） */
.single-new-ul > div {
  position: absolute;
  top: -1.1em;
  left: 2rem;
  padding: 0.35em 1.1em;
  background-color: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* リスト本体 */
.single-new-ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-new-ul li {
  position: relative;
  padding: 0.45em 0 0.45em 1.4em;
  color: #1d1d1f;
  line-height: 1.7;
  font-weight: 500;               /* 少し強調 */
}

/* カスタムドット（黒＋外側の淡い光） */
.single-new-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.12);
}

/* ホバーで微妙に強調 */
.single-new-ul li:hover {
  color: #000;
}

.single-new-ul li:hover::before {
  transform: scale(1.12);
}


.product-card{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 20px;
  display: grid;
  gap: 16px;
  max-width: 400px;
  margin: 24px auto;
}

.product-media{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.product-media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto;
}

.product-body{
  display: grid;
  gap: 14px;
}

.product-title{
  margin: 0 !important;
  font-weight: 600;
  font-size: 19px !important;
  line-height: 1.3em !important;
  letter-spacing: .01em;
}

.product-price{
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price{
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 600;
}
.price-note{
  font-size: 13px;
  color: var(--muted);
}

/* ===== 繝懊ち繝ｳ�医す繝ｳ繝励Ν�� ===== */
.product-btn {
  display: inline-block;
  width: 180px;
  text-align: center;
  padding: 12px 0;
  background: #d76464;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
  color: #fff;
  font-weight: bold;
}

.product-btn:hover {
  background: var(--btn-hover);
}


/* 蜈ｨ菴薙�蝗ｲ縺� */
.dispensary-section {
  border: 1px solid #e6dec1;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 40px auto;
  max-width: 960px;
  background-color: #fffcf3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.dispensary-section1 {
  border: 1px solid #e6dec1;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 0px auto 40px;
  max-width: 960px;
  background-color: #fffcf3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* 繧ｿ繧､繝医Ν驛ｨ蛻� */
.dispensary-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 28px;
  border-bottom: 2px solid #e6dec1;
  padding-bottom: 10px;
  color: #111827;
  letter-spacing: 0.03em;
}

/* ==== セクション全体 ==== */
.dispensary-section {
  background: #fefaf0;
  border: 1px solid #f3e6c2;
  border-radius: 24px;
  padding: 40px 28px;
  text-align: center;
}

.dispensary-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 32px;
}

/* ==== ボタン全体をグリッド制御 ==== */
.area-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* ==== 通常ボタン ==== */
.area-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-radius: 20px;
  background-color: #050b21;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  transition: 0.2s ease;
}

.area-buttons a:hover {
  opacity: 0.85;
  transform: translateY(1px);
}

/* ==== disabled（その他） ==== */
.area-buttons .disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-radius: 20px;
  background-color: #e5e5e5;
  color: #777;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.9;
  cursor: default;
}

/* ==== スマホ（2列） ==== */
@media (max-width: 640px) {
  .area-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* 蜈ｨ菴薙Λ繝�ヱ繝ｼ */
.relocation-choices {
  padding: 32px 16px 24px;
  background: #f9f5eb;
}

.relocation-choices-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 繝ｩ繝吶Ν */
.relocation-choices-label {
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #191919;
    margin-bottom: 16px;
    font-weight: bold;
}

/* 繧ｰ繝ｪ繝�ラ */
.relocation-choices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 繧ｫ繝ｼ繝牙�騾� */
.relocation-choice-card {
  display: block;
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.04);
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  cursor: pointer;
}

/* 繝帙ヰ繝ｼ逕ｨ */
.relocation-choice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border-color: #960406;
}

/* 逶ｮ遶九◆縺帙◆縺�3縺､逶ｮ */
.relocation-choice-card-accent {
  background: #ffefef;
  border-color: #ffe3e3;
}

relocation-choice-card-accent .relocation-choice-tag {
    background: rgb(121 24 24 / 8%);
    color: #bf3c7f;
}

.relocation-choice-card-accent .relocation-choice-title {
}

.relocation-choice-card-accent .relocation-choice-desc {
}

/* 繧ｿ繧ｰ */
.relocation-choice-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  margin-bottom: 10px;
}

/* 荳ｭ霄ｫ繝ｬ繧､繧｢繧ｦ繝� */
.relocation-choice-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 繧｢繧､繧ｳ繝ｳ */
.relocation-choice-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

/* 繝�く繧ｹ繝� */
.relocation-choice-text {
  flex: 1;
}

.relocation-choice-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

.relocation-choice-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}

/* 笆ｼ 繝悶Ξ繝ｼ繧ｯ繝昴う繝ｳ繝茨ｼ医ち繝悶Ξ繝�ヨ莉･荳翫�3蛻暦ｼ� */
@media (min-width: 768px) {
  .relocation-choices {
    padding: 40px 20px 32px;
  }

  .relocation-choices-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .relocation-choice-card {
    padding: 20px 20px 18px;
  }

  .relocation-choice-title {
    font-size: 17px;
  }

  .relocation-choice-desc {
    font-size: 13px;
  }
}

/* 笆ｼ 繧ゅ≧蟆代＠蠎�＞逕ｻ髱｢縺ｧ縺ｮ蠕ｮ隱ｿ謨ｴ */
@media (min-width: 1024px) {
  .relocation-choices {
    padding: 48px 24px 40px;
  }

  .relocation-choice-card {
    border-radius: 16px;
  }

  .relocation-choice-title {
    font-size: 16px;
  }

  .relocation-choice-desc {
    font-size: 14px;
    line-height: 1.3em;
    margin-top: 11px;
  }
}

.moving-wrapper{
	margin: 0;
}

.moving-wrapper p{
	margin: 20px 0;
	font-size: 18px;
	line-height: 1.5em;
}


.moving-wrapper strong {
    background: linear-gradient(transparent 60%, #f5bf25 60%);
    font-weight: bold;
    font-size: 18px;
}

.moving-wrapper h2 {
    position: relative;
    padding: 1em 2em;
    text-align: center;
    font-size: 28px;
    margin: 60px 0;
    font-weight: bold;
}

.moving-wrapper h2:before, .moving-wrapper h2:after {
    position: absolute;
    content: '';
}

.moving-wrapper h2:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.moving-wrapper h2:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

.moving-wrapper h3 {
    border-bottom: 3px dashed #000;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 10px;
    margin-top: 40px;
}


/* =========================
   Apple繝ｩ繧､繧ｯ縺ｪ蝓ｺ貅悶ヨ繝ｼ繧ｯ繝ｳ
========================= */
:root{
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #6B7280;
  --line: #E5E7EB;
  --accent: #007AFF;
  --cta: #34C759;

  --radius-lg: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 6px 24px rgba(0,0,0,.08);
}

/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜈ｨ菴薙�閭梧勹�亥ｿ�ｦ√↑繧会ｼ� */
.section--soft {
  background: var(--bg);
  padding: clamp(24px, 5vw, 56px) 0;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* 2繧ｫ繝ｩ繝 �壼ｷｦ=譛ｬ譁� / 蜿ｳ=繧ｫ繝ｼ繝� */
.split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(24px, 4vw, 40px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}
@media (max-width: 900px){
  .split { grid-template-columns: 1fr; }
}

/* ===== 隕句�縺暦ｼ�2��: 隗偵き繧ｮ繧�､ｪ縺�｣�｣ｾ縺ｯ蟒�ｭ｢ ===== */
.apple-h2 {
  margin: 0 0 10px !important;
  font-weight: 700;
  font-size: 21px !important;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 繧ｵ繝悶Λ繧､繝ｳ�育ｴｰ縺�ｸ狗ｷ夲ｼ� */
.apple-h2 + .subrule {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  margin: 8px 0 28px;
}

/* 譛ｬ譁�ユ繧ｭ繧ｹ繝� */
.lead {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.75;
  color: var(--muted);
}

/* ===== 蜿ｳ蛛ｴ繧ｫ繝ｼ繝会ｼ�dvisor�� ===== */
.advisor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 3.2vw, 28px);
  color: var(--ink);
}

.advisor-card .badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  letter-spacing: .02em;
  margin-bottom: 12px;
  background: #fff;
}

.advisor-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.advisor-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.advisor-name {
  font-size: 16px !important;
  font-weight: 700;
  margin: 0 !important;
}
.advisor-meta {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: var(--muted);
}

/* 邂�擅譖ｸ縺搾ｼ壹ラ繝�ヨ縺ｮ縺ｿ繝ｻ鬮倥さ繝ｳ繝医Λ繧ｹ繝医�驕ｿ縺代ｋ */
.advisor-list {
  margin: 12px 0 18px 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.advisor-list li { margin: 4px 0; }
.advisor-list b { color: var(--ink); font-weight: 700; }

/* CTA繝懊ち繝ｳ�壹ヵ繝ｩ繝�ヨ��す繝ｳ繝励Ν */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--cta);
  box-shadow: none;
  text-decoration: none;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #2FB653; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}
.btn--block {width: 90%;}

/* 蜿ｳ繧ｫ繝ｼ繝峨ｒ逕ｻ髱｢蟷�〒豌玲戟縺｡蠎�£繧具ｼ井ｻｻ諢擾ｼ� */
@media (min-width: 901px){
  .advisor-card { position: sticky; top: 24px; }
}

.advisor-body{
	font-size: 14px !important
}

/* ====== 繝吶�繧ｹ繝ｬ繧､繧｢繧ｦ繝� ====== */

.visa-section {
  max-width: 1100px;
  margin: 60px auto;
  padding: 32px 24px 40px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* 繧ｿ繧､繝医Ν蜻ｨ繧� */
.visa-intro {
  text-align: left;
  margin-bottom: 32px;
}

.visa-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}

.visa-title {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.visa-lead {
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}

/* ====== 繝薙じ繧ｫ繝ｼ繝� ====== */

.visa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.visa-card {
  background: #f9fafb;
  border-radius: 18px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.visa-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  margin-bottom: 10px;
}

.visa-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.visa-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 10px;
}

.visa-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.visa-points li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
  margin-top: 4px;
}

.visa-points li::before {
  content: "繝ｻ";
  position: absolute;
  left: 4px;
  top: 0;
}

/* ====== 閾ｪ蟾ｱ邏ｹ莉九き繝ｼ繝� ====== */

.visa-profile {
  border-top: 1px solid rgba(209, 213, 219, 0.8);
  padding-top: 24px;
  margin-top: 8px;
}

.visa-profile-inner {
  background: #f9fafb;
  border-radius: 18px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.visa-profile-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  background: #e5f4ff;
  color: #0369a1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.visa-profile-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.visa-profile-role {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 10px;
}

.visa-profile-text {
  font-size: 13px;
  line-height: 1.8;
  color: #4b5563;
}


/* === 讓ｪ蟷�100%繧｢繝峨ヰ繧､繧ｶ繝ｼ繧ｫ繝ｼ繝� === */
.advisor-full {
  width: 100%;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
}

.advisor-full-inner {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 24px 20px 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* 繝ｩ繝吶Ν */
.advisor-label {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px !important;
  font-weight: 600;
  background: #e8efff;
  color: #334155;
  border-radius: 999px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

/* 繝倥ャ繝�繝ｼ驛ｨ蛻� */
.advisor-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.advisor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee;
  flex-shrink: 0;
}

.advisor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advisor-name {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.advisor-job {
  font-size: 14px !important;
  color: #6b7280;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* 譛ｬ譁� */
.advisor-body p {
  font-size: 15px !important;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 14px;
  margin-top: 0;
}

/* 繝懊ち繝ｳ */
.advisor-button-wrap {
  margin-top: 20px;
  text-align: center;
}

.advisor-button {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  padding: 14px 0;
  background: #22c55e;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.2s;
}

.advisor-button:hover {
  background: #16a34a;
}

/* === PC繝�じ繧､繝ｳ === */
@media (min-width: 900px) {
  .advisor-full {
    padding: 0 32px;
  }

  .advisor-full-inner {
    padding: 32px 32px 36px;
    border-radius: 26px;
  }

  .advisor-name {
    font-size: 20px;
  }

  .advisor-body p {
    font-size: 16px;
  }

  .advisor-button {
    max-width: 300px;
  }
}

.header-no{
	margin-top: 170px;
}

/* ====== 繝��繝悶Ν蜈ｨ菴難ｼ域ｨｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ�� ====== */
.hotel-table-wrapper {
  width: 100%;
  overflow-x: auto;       /* 縺ｯ縺ｿ蜃ｺ縺溘ｉ讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ */
	margin-bottom: 40px;
}

.hotel-compare-table {
  width: 100%;
  min-width: 900px;       /* PC縺ｧ隕九◆縺ｨ縺阪�讓ｪ蟷��逶ｮ螳� */
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
}

.hotel-compare-table th,
.hotel-compare-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;    /* 譁�ｭ励′隧ｰ縺ｾ繧企℃縺弱ｋ縺ｮ繧帝亟縺� */
}

.hotel-compare-table th {
  background: #f7f7f7;
  font-weight: 700;
}

/* ====== 繝ｪ繝ｳ繧ｯ蛻怜�縺ｮ繝懊ち繝ｳ驟咲ｽｮ ====== */
.hotel-compare-table td .hotel-table-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ====== 莠育ｴ��繧ｿ繝ｳ��utton013縺ｨ蜷後§濶ｲ�� ====== */
.hotel-btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background-color: #00a651; /* 竊� 縺薙％繧� button013 縺ｨ蜷後§濶ｲ縺ｫ蜷医ｏ縺帙※縺上□縺輔＞ */
  border: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.hotel-btn-reserve:hover {
  opacity: 0.85;
}

.hotel-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background-color: #135d9d;
  border: 1px solid #3c549b;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hotel-btn-detail:hover {
  background-color: #d4d4d4;
  border-color: #bbb;
}

/* 繧ｹ繝槭�縺ｧ蟆代＠縺 縺第枚蟄励ｒ蟆上＆縺上＠縺溘＞蝣ｴ蜷� */
@media (max-width: 768px) {
  .hotel-compare-table th,
  .hotel-compare-table td {
    padding: 12px 8px;
    font-size: 13px;
  }
}

/* =========================================
   CV繝ｪ繝ｳ繧ｯ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ�亥�菴難ｼ�
========================================= */

.cv-link-section {
  width: 100%;
  margin: 30px auto 50px;
  padding: 0 20px;
}

.cv-link-inner {
  width: 100%;
}

.cv-link-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cv-link-header p {
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
  line-height: 1.8;
}

/* =========================================
   繧ｰ繝ｪ繝�ラ繝ｬ繧､繧｢繧ｦ繝�
========================================= */

.cv-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* =========================================
   繧ｫ繝ｼ繝画悽菴�
========================================= */

.cv-link-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow .25s ease, transform .25s ease;
}

.cv-link-card:hover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* =========================================
   繧ｵ繝 繝阪う繝ｫ逕ｻ蜒�
========================================= */

.cv-link-thumb img  {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 0 10px;
}

/* =========================================
   繧ｫ繝ｼ繝牙�繝�く繧ｹ繝医お繝ｪ繧｢
========================================= */

.cv-link-body {
  padding: 12px 14px 16px;
}

/* 繧ｫ繝�ざ繝ｪ繝ｼ繧ｿ繧ｰ */
.cv-link-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* 繧ｿ繧ｰ濶ｲ蛻�¢ */
.cv-hotel { background: #e8f1ff; color: #1e4c9a; }
.cv-line  { background: #d8ffe3; color: #0b8a36; }
.cv-rule  { background: #fff2d6; color: #9a6a15; }
.cv-shop  { background: #f2e1ff; color: #6530a4; }

/* =========================================
   繧ｿ繧､繝医Ν繝ｪ繝ｳ繧ｯ
========================================= */

.cv-link-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #111;
  text-decoration: none;
  margin-bottom: 6px;
}

.cv-link-title:hover {
  color: #c08a2f;
}

/* =========================================
   隱ｬ譏取枚
========================================= */

.cv-link-text {
  margin: 5px 0 10px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* =========================================
   CTA繝懊ち繝ｳ
========================================= */

.cv-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #c8a96b;
  background: #f6eee0;
  font-size: 13px;
  font-weight: 600;
  color: #2c2110;
  text-decoration: none;
  transition: all .2s ease;
  margin-top: 8px;
}

.cv-link-card:hover .cv-link-btn {
  background: #c8a96b;
  color: #fff;
  border-color: #c8a96b;
  transform: translateY(-1px);
}

/* =========================================
   繝ｬ繧ｹ繝昴Φ繧ｷ繝厄ｼ医ち繝悶Ξ繝�ヨ��
========================================= */

@media (max-width: 1024px) {

  .cv-link-section {
    margin: 64px auto 48px;
  }

  .cv-link-header h2 {
    font-size: 24px;
  }

  .cv-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* =========================================
   繝ｬ繧ｹ繝昴Φ繧ｷ繝厄ｼ医せ繝槭���
========================================= */

@media (max-width: 640px) {

  .cv-link-section {
    margin: 48px auto 40px;
    padding: 0 16px;
  }

  .cv-link-header h2 {
    font-size: 20px;
  }

  .cv-link-header p {
    font-size: 13px;
    line-height: 1.7;
  }

  .cv-link-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cv-link-body {
    padding: 10px 12px 14px;
  }

  .cv-link-title {
    font-size: 15px;
    line-height: 1.5;
  }

  .cv-link-text {
    font-size: 13px;
    line-height: 1.6;
  }

  .cv-link-btn {
    width: 90%;
    justify-content: center;
    font-size: 13px;
    padding: 10px 14px;
  }
	
	.area-buttons br{
		display: none;
	}
}

/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ繧ｿ繧､繝医Ν */
.disp-section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 4px;
  color: #2c2110;
}

.top-bar.dispensary-highlight {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 0 10px;
    scroll-snap-type: x mandatory;
    margin-bottom: 3%;
}

.top-bar.dispensary-highlight::-webkit-scrollbar {
  display: none;
}

/* 蜷�き繝ｼ繝� */
.top-bar.dispensary-highlight li {
  flex: 0 0 75%;
  max-width: 280px;
  list-style: none;
  scroll-snap-align: start;
}

.top-bar.dispensary-highlight li a {
  display: block;
  text-decoration: none;
  color: #111;
  background: #fff;
  border: 1px solid #e6dbc6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  transition: .2s ease;
}

.top-bar.dispensary-highlight li a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* 逕ｻ蜒� */
.top-bar.dispensary-highlight img {
  width: 100%;
  height: 140px;
  object-fit: cover;
	margin: 0;
}

/* 繝�く繧ｹ繝磯Κ蛻� */
.disp-card-content {
  padding: 12px 14px 16px;
}

.disp-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.disp-area {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

/* CTA��V譛�驥崎ｦ�ｼ� */
.disp-cta {
  display: inline-block;
  padding: 6px 14px;
  background: #f6eee0;
  border-radius: 999px;
  border: 1px solid #c8a96b;
  font-size: 12px;
  font-weight: 600;
  color: #2c2110;
  transition: .2s ease;
}

.top-bar.dispensary-highlight li a:hover .disp-cta {
  background: #c8a96b;
  color: #fff;
  border-color: #c8a96b;
}

.disp-note {
  font-size: 12px;
  color: #8a806f;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* 隕句�縺励ヶ繝ｭ繝�け蜈ｨ菴� */
.disp-section-header {
  margin: 32px 0 16px;
  padding: 0 4px;
}

/* 蟆上＆縺ｪ闍ｱ蟄励Λ繝吶Ν */
.disp-section-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b39a6a;
  margin: 0 0 4px;
}

/* H2譛ｬ菴� */
.disp-heading {
  margin: 0;
  padding: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #2c2110;
  line-height: 1.5;
  border: none;              /* 繝��繝槭�繧ｰ繝ｬ繝ｼ邱壹ｒ謇薙■豸医☆ */
  position: relative;
}

/* 荳九↓遏ｭ縺�い繧ｯ繧ｻ繝ｳ繝医Λ繧､繝ｳ�育ｫｹ�九ざ繝ｼ繝ｫ繝峨▲縺ｽ縺�げ繝ｩ繝�ｼ� */
.disp-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c8a96b, #e4d7b7);
}

/* 繧ｹ繝槭�縺ｧ蟆代＠縺 縺大ｰ上＆縺� */
@media (max-width: 768px) {
  .disp-heading {
    font-size: 1em;
  }
	
    .dispensary-random-p {
        font-size: .8em !important;
        margin-bottom: 2% !important;
        margin-top: 7%;
    }
	
}


.date .published,
.date .modified {
  margin-right: 4px;
}
.date .tags {
  margin-left: 8px;
}


#gt_float_wrapper{
	position: relative;
	top: 0px !important;
}

.laa{
	margin: 0;
}

.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 10px 15px;
    color: #333;
    font-weight: bold;
    font-size: 12px;
}


.gt_float_switcher img {
    vertical-align: middle;
    display: inline-block;
    width: 23px;
    height: auto;
    margin: 0 5px 0 0;
    border-radius: 3px;
}



/* 枠デザイン（Kei と同じ） */
.name-box-tt {
  background: #fafafa;
  border-radius: 22px;
  padding: 24px;
  margin: 40px auto;
  border: 1px solid #eaeaea;
  width: 60%;
}

/* ヘッダー（使っていないが統一のため残す） */
.profile-header-tt {}

/* レイアウト（横並び） */
.profile-content-tt {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 150px;
}

/* プロフィール画像 */
.profile-image-tt img {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
}

/* テキスト部分 */
.profile-info-tt {
  flex: 1;
  line-height: 1.7;
  color: #333;
}

/* 名前 */
.profile-info-name-tt {
  font-size: 20px !important;
  margin: 0 0 6px !important;
  font-weight: bold !important;
}

/* SNS リスト */
.pro-ul1-tt {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 12px;
  margin-top: 0 !important;
}

.unique-social-item-tt img {
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  transition: .2s;
  margin: 0 !important;
}

.unique-social-item-tt img:hover {
  background: #eee;
}

.profile-info-tt p {
  font-size: 12px;
  line-height: 1.4em;
  font-weight: normal;
  margin-bottom: 10px;
}

.profile-info-tt{
	font-size: 16px !important;
	line-height: 1.4em;
	font-weight: bold;
}


/* =========================
   PC：現行のまま（常時表示）
========================= */
@media (min-width: 769px) {
  /* スマホ用ボタンは非表示 */
  .scene-summary { display: none; }

  /* PCは今まで通り：タイトル表示、リスト常時表示 */
  .scene-accordion .strain-side-title { display: block; }
  .scene-accordion .strain-tags-list {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
}

/* =========================
   スマホ：ボタンで開閉
========================= */
@media (max-width: 768px) {

  /* PC用のh2は隠す（ボタンに置き換え） */
  .scene-accordion .strain-side-title { display: none; }

  /* summaryをボタン化 */
  .scene-summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e6d9bf;
    background: #fff;
    color: #7b5e1e;
    font-weight: 800;
    font-size: 15px;
    list-style: none;
    cursor: pointer;
    user-select: none;
  }

  /* デフォルト三角を消す */
  .scene-summary::-webkit-details-marker { display: none; }

  /* 右側の▼アイコン（CSSで作る） */
  .scene-summary::after{
    content: "▼";
    font-size: 12px;
    opacity: 0.8;
    transition: transform .25s ease;
  }

  /* 開いてる時は回転 */
  .scene-accordion[open] .scene-summary::after{
    transform: rotate(180deg);
  }

  /* 中身の開閉アニメ（CSSのみ） */
  .scene-accordion .strain-tags-list{
    margin-top: 12px;
    overflow: hidden;

    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
  }

  .scene-accordion[open] .strain-tags-list{
    max-height: 1200px; /* 足りなければ増やしてOK */
    opacity: 1;
  }
}


/* ============================
   2カラムレイアウト（PC）
============================ */

.strain-layout {
  display: flex;
  gap: 40px;
  max-width: 1180px;
  margin: 60px auto;
  padding: 0 20px;
  align-items: flex-start;
}

/* 左：サイド（タグ） */
.strain-sidebar {
  order: 1;
  flex: 0 0 25%;
  max-width: 30%;
  background: #fff;
  padding: 22px 20px 26px;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  position: sticky;
  top: 155px;
  margin-top: 60px;
}

/* サイドバータイトル */
.strain-side-title {
  font-size: 16px;
  font-weight: 700;
  color: #a27a2a;
  margin: 0 0 14px;
  letter-spacing: 0.05em;
}

/* タグリスト全体（PCは縦） */
.strain-tags-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 6px;
}

/* カード型リンク */
.tag-card {
  display: block;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fdf8ee;
  color: #333;
  text-decoration: none;
  border: 1px solid #e6d9bf;
  transition: all 0.22s ease;
}
.tag-card:hover {
  background: #f4e7c8;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.tag-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #7b5e1e;
  margin-bottom: 4px;
}
.tag-card-desc {
  font-size: 13px;
  color: #847b6f;
  line-height: 1.4;
}

/* 右：メイン */
.strain-main {
  order: 2;
  flex: 0 0 70%;
  max-width: 70%;
  margin-top: 90px;
}
.strain-archive-list {
  margin-top: 30px;
}

/* ============================
   ストレイン詳細カード（PC）
============================ */

.strain-hero {
  max-width: 980px;
  margin: 0px auto 32px;
  padding: 0 20px;
}

.strain-hero-inner {
  display: flex;
  gap: 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px 22px;
  margin-top: 30px;
}

.strain-hero-thumb {
  flex: 0 0 38%;
  margin: 0;
}

.strain-hero-thumb img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 12px;
}

.strain-hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.strain-hero-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a27a2a;
  margin-bottom: 4px;
}

.strain-hero-name {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
}

.strain-hero-meta {
  font-size: 13px;
  color: #777;
  margin: 0 0 12px;
}

.strain-hero-desc {
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 14px;
}

.strain-hero-terpenes {
  padding-top: 8px;
  border-top: 1px solid #f0e4d0;
}

.strain-terp-title {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #a27a2a;
  margin-bottom: 4px;
}

.strain-terp-text {
  font-size: 13px;
  margin: 10px 0;
  line-height: 1.3em;
}

.strain-terp-text strong {
  font-weight: bold;
}

/* ===========================
   シチュエーションタグ（ピル）
=========================== */

.strain-scene-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
}
.strain-scene-item {
  margin: 0;
  padding: 0;
}
.strain-scene-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid #e2c990;
  background: #fff8e9;
  font-size: 11px;
  font-weight: 600;
  color: #b78526;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all .18s ease;
  white-space: nowrap;
}
.strain-scene-pill:hover {
  background: #b78526;
  color: #fff;
  border-color: #b78526;
  transform: translateY(-1px);
}

/* =========================================================
   ✅ ここから：左サイドだけ開閉（安全に最小限）
   - 右側(メイン)は一切触らない
========================================================= */

/* summaryのデフォルト三角を消す */
.scene-summary::-webkit-details-marker { display: none; }
.scene-summary { list-style: none; }

/* PC：常時表示（summaryは出さない / 中身は普通に見せる） */
@media (min-width: 769px) {
  .scene-summary { display: none; }

  /* PCは今まで通り：見出しとリストを表示 */
  .strain-side-title { display: block; }
  .strain-tags-list { display: flex; }
}

/* スマホ：1カラム + summaryボタンで開閉（初期は閉っぽく見せる） */
@media (max-width: 768px) {

  /* レイアウト縦積み */
  .strain-layout{
    flex-direction: column;
    gap: 18px;
    margin: 28px auto;
    padding: 0 14px;
    max-width: 100%;
  }

  /* sidebar */
  .strain-sidebar{
        position: static;
        top: auto;
        max-width: 100%;
        width: 92%;
        margin-top: 25%;
        padding: 14px;
        border-radius: 14px;
    }

  /* h2は隠してsummaryを見出しにする */
  .strain-side-title { display: none; }

  /* summaryをボタン化 */
  .scene-summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e6d9bf;
    background: #fff;
    color: #7b5e1e;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
  }

  .scene-summary::after{
    content: "▼";
    font-size: 12px;
    opacity: 0.85;
    transition: transform .25s ease;
  }

  /* openのとき矢印回転 */
  .scene-accordion[open] .scene-summary::after{
    transform: rotate(180deg);
  }

  /* ✅ 中身：スマホは「閉」をデフォルト表示にする */
  /* open属性がPC用に付いていても、スマホでは見た目を閉にする */
  .scene-accordion .strain-tags-list{
    margin-top: 12px;
    padding: 0;
    gap: 10px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
  }

  /* open時だけ展開 */
  .scene-accordion[open] .strain-tags-list{
    max-height: 1200px;
    opacity: 1;
  }

  /* タグカード詰める */
  .tag-card{
    padding: 12px;
    border-radius: 12px;
  }
  .tag-card-title{
    font-size: 13px;
    margin-bottom: 3px;
  }
  .tag-card-desc{
    font-size: 12px;
    line-height: 1.35;
  }

  /* メイン側もスマホ最適化（元のあなたのCSS通り） */
  .strain-main{
    max-width: 100%;
    width: 100%;
    margin-top: 0;
  }

  .strain-hero{
    margin: 18px auto;
    padding: 0 14px;
  }
  .strain-hero-inner{
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
  }
  .strain-hero-thumb img{
    max-height: 220px;
  }
  .strain-hero-name{
    font-size: 20px;
  }
  .strain-hero-desc{
    font-size: 13px;
    line-height: 1.6;
  }
}

/* 小さいスマホ：1列 */
@media (max-width: 600px){
  .scene-accordion .strain-tags-list{
    grid-template-columns: 1fr;
  }
  .strain-hero-thumb img{
    max-height: 200px;
  }
	
	.scene-pc{
		display: none;
	}	
	
}



.line-talk-p {
    font-size: 16px;
    line-height: 1.4em;
}

/* ==============================
   取り扱い店舗カード
   ============================== */

.related-shop-box {
  width: 90%;
  margin: 20px auto 40px;
  padding: 20px 28px 15px;
  border-radius: 24px;
  background: #f0d17252;
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.related-shop-box a{
	text-decoration: none;
}

.related-shop-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.related-shop-text {
  flex-grow: 1;
}

.related-shop-label {
  font-size: 12px;
  background: #B2852A;
  padding: 10px 15px;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-block;
}

.related-shop-name a{
	color: #000;
}

.related-shop-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
}

.related-shop-name a:hover {
  color: #B2852A;
}

.related-shop-btn {
  display: inline-block;
  padding: 14px 28px;
  background: #FFF8E9;
  color: #B2852A;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid #E5C98C;
  font-size: 10px;
  float: right;
}

.related-shop-btn:hover {
  background: #E5C98C;
  color: #fff;
}


/* ==============================
   Related Articles – Apple Minimal Style
   ============================== */

.related-one-section {
  max-width: 1200px;
  margin: 20px auto 80px;
  padding: 0 16px;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCもスマホも常に4枠 */
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ▼ カード（Appleのカードライク） */
.related-item {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.related-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

/* ▼ サムネイル */
.related-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.related-item:hover .related-thumb img {
  transform: scale(1.05);
}

/* ▼ テキストボックス */
.related-meta {
  padding: 14px 12px 18px;
}

/* ラベル */
.related-label {
  font-size: 10px;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* ▼ タイトル（最初の12文字だけ表示） */
.related-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin: 0;
  line-height: 1.45;

  /* タイトルを12文字で切る */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ▼ 全体リンク */
.related-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* ▼ スマホ */
@media (max-width: 720px) {
  .related-list {
    grid-template-columns: repeat(2, 1fr); /* スマホは2x2で最大4つ */
    gap: 16px;
  }

  .related-title {
    font-size: 13px;
  }
}



/* ==== 説明文をフェードアウト（グラデーション） ==== */

.strain-archive-excerpt-wrapper {
  position: relative;
  max-height: 70px; /* ←表示する高さ。調整OK */
  overflow: hidden;
  margin-bottom: 20px;
}

/* 下半分が白に溶けるグラデーション */
.strain-archive-excerpt-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
}

/* 説明文本体 */
.strain-archive-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* ボタンを説明文のすぐ下に配置 */
.strain-archive-readmore {
  display: inline-block;
  padding: 20px 22px;
  background: #fff8e9;
  border: 1px solid #e5c98c;
  border-radius: 999px;
  font-size: 14px;
  color: #b78526;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  margin-top: 4px; /* ←説明文に近づけたい時に調整 */
  text-align: center;
}

.strain-archive-readmore:hover {
  background: #b78526;
  color: #fff;
  border-color: #b78526;
  transform: translateY(-1px);
}

/* === 検索フォーム === */
.gb-search {
  display: flex;
  align-items: center;
  max-width: 420px;       /* 横幅。もう少し長くしたければ 480px などに */
  width: 100%;
  margin: 32px 0 16px;    /* 上下の余白で呼吸感を出す */
  padding: 4px 4px 4px 16px;
  border-radius: 999px;
  border: 1px solid #e3e3e3;
  background-color: #f7f7f7;
  box-sizing: border-box;
}

.gb-search__field {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}

.gb-search__field::placeholder {
  color: #999;
}

/* ボタンは黒ベースで落ち着いたアクセントに */
.gb-search__button {
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .08em;
  background-color: #111;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.gb-search__button:hover {
  background-color: #333;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.gb-search__button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* スマホはフル幅で */
@media (max-width: 768px) {
  .gb-search {
    max-width: 100%;
  }
}

.dispensary-random-p{
	text-align: right;
	font-size: 16px;
}

.dispensary-random-p a{
	text-decoration: none;
}

.dispensary-random-p a:hover{
	text-decoration: underline;
}


/* 共通セクションタイトル 4ガイド用 */
.gbj-section-title {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 0px 0px;
}

.gbj-section-title1 {
  max-width: 100%;
  margin: 0 auto;
  padding: 0px 0px 30px;
}

.gbj-section-title2 {
  max-width: 100%;
  margin: 0 auto;
  padding: 30px 0px 10px;
}

/* 上の英語見出し（BANGKOK DISPENSARY GUIDE と同じノリ） */
.gbj-section-en {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9a96a;           /* 2枚目と同じようなゴールド系 */
  margin: 0 0 8px;
}

/* 日本語のメイン見出し */
.gbj-section-ja {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: #3b2a1a;          /* 2枚目のブラウンっぽい色 */
  margin: 0;
}

/* 下のゴールドライン */
.gbj-section-line {
  display: block;
  width: 80px;
  height: 3px;
  background-color: #c9a96a;
  border-radius: 999px;
  margin: 10px 0 0;
}

/* リード文（今のグレーの文章） */
.gbj-section-lead {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: #666;
}


/* === カード全体をリンク化 === */
.og-product-card-link {
  text-decoration: none;
  color: inherit; /* テキスト色をリンク色に変更されないように */
  display: block;
}

/* === カード本体 === */
.og-product-card {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  border: 2px solid #ffd0af;
  border-radius: 18px;
  background: #fff9f4;
  display: flex;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

/* ホバー時：少し浮く（CV向上） */
.og-product-card-link:hover .og-product-card {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* 数量限定ラベル */
.og-ref-label {
  position: absolute;
  top: -17px;
  left: 20px;
  background: #ffd0af;
  color: #000;
  padding: 10px 40px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
}
/* 左側：画像 */
.og-product-image {
  flex: 0 0 260px;
}

.og-product-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
	margin: 0;
}

/* 右ブロック */
.og-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* タイトル */
.og-product-title {
  margin: 0 !important;
  font-size: 1.2em !important;
  font-weight: 700;
  color: #1c1c1c;
 line-height: 1em !important;
}

/* ブランド */
.og-product-brand {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: #4a4a4a;
 line-height: 1em !important;
}

/* 価格 */
.og-product-price {
  margin: 0 !important;
  font-size: 1.3em !important;
  font-weight: bold;
  color: #111;
}

/* CTAボタン（ダミー：実際はカード全体がリンク） */
.og-product-button {
  align-self: flex-start;
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background: #ff6b00;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .og-product-card {
    flex-direction: column;
    align-items: stretch;
  }

  .og-product-image {
    flex: none;
  }

  .og-product-button {
    align-self: stretch;
    text-align: center;
  }
}

.cat-must-box{
	width: 90%;
	margin: 0 auto;
}


/* 大麻・アルコール・タバコ比較ブロック
   Appleっぽい余白多め＆フラットなカードデザイン
-------------------------------------------------- */

.risk-compare {
  margin: 2.5rem 0;
  padding: 1.75rem 1.5rem;
  background: #f5f5f7; /* Apple系の明るいグレー */
  border-radius: 18px;
}

/* レイアウト：スマホは縦並び、タブレット以上で3カラム */
.risk-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

/* カード全体 */
.risk-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.25rem 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.02);
}

/* タイトル部分（hタグは使わずクラスで指定） */
.risk-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: #111111;
  margin: 0 0 0.85rem;
  letter-spacing: 0.01em;
}

.risk-card__title span {
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: #6b7280; /* 少し青みのあるグレー */
}

/* リスト部分 */
.risk-card__list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: #1f2933;
}

.risk-card__list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0;
	font-size: 12px;
}

/* 「タバコ：」「アルコール：」ラベル */
.risk-card__list .label {
  font-weight: 600;
  color: #111111;
}

/* ランキングバッジ（1位/2位/3位） */
.risk-card__list .rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: #111111;
}

/* 注釈テキスト */
.risk-card__note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #6b7280;
}

/* タブレット以上で3カラム */
@media (min-width: 768px) {
  .risk-compare {
    padding: 2rem 2.25rem;
  }

  .risk-compare__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .risk-card {
    padding: 1.35rem 1.4rem;
  }

  .risk-card__title {
    font-size: 1.08rem;
  }

  .risk-card__note {
    font-size: 0.88rem;
  }
}

/* デスクトップで少しだけ余白を増やす */
@media (min-width: 1024px) {
  .risk-compare {
    margin: 0 0 30px;
    padding: 2.25rem 2.5rem;
  }

  .risk-card {
    border-radius: 18px;
  }
}


.reco-add-01{
	width: 100%;
	display: block;
}

.reco-add-01 img{
	width: 100%;
	height: auto;
}

.reco-add-01 ul{
	margin: 0;
}

.reco-add-01 li{
	float: left;
	width: 50%;
}

/* li 自体はただの枠 */
.disp-card {
  list-style: none;
}

/* カード本体（aタグ） */
.disp-card-link {
  display: block;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
  text-decoration: none;
}

/* 上の写真だけをクリップする箱 */
.disp-card-thumb {
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.disp-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* コンテンツ部分 */
.disp-card-content {
  padding: 18px 20px 22px; /* ← 底に少し多めに余白 */
}

/* 準備中バッジ & ギフトはそのまま */
.disp-cta.is-waiting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid #d8c29a;
  font-size: 12px;
  font-weight: 500;
  color: #8b6b2e;
  background: #fffaf0;
}

.disp-gift {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #fff9e0, #ffeabf);
  border: 1px solid rgba(219, 186, 106, 0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.disp-gift-eyebrow {
font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  color: #b9861b;
  border-bottom: 1.5px solid #b9861b;
  padding-bottom: 1%;
  display: block;
}

.disp-gift-main {
  font-size: 11px;
  line-height: 1.6;
  font-weight: bold;
  color: #5b4317;
}

/* =========================================================
   カード全体（高さは内容に応じて自由に変化）
========================================================= */
.custom-tour-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  overflow: hidden;
  flex: 0 0 auto; /* ← 高さを揃えさせない */
  display: flex;
  flex-direction: column;
  width: 260px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

/* =========================================================
   画像
========================================================= */
.custom-tour-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   カード内容（高さが自動で伸縮）
========================================================= */
.custom-tour-card-content {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: auto !important;
}

/* 店名 */
.custom-tour-card-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 !important;
}

/* エリアテキスト */
.custom-tour-card-content p {
  margin: 0;
  color: #999;
  font-size: 11px !important;
}

/* =========================================================
   特典ギフト（Appleデザイン）
========================================================= */
.custom-tour-gift {
    padding: 10px 15px;
    background: radial-gradient(circle at top left, #fff9e5, #ffe4b7);
    border-radius: 18px;
    border: 1px solid rgba(190, 150, 80, 0.35);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}

/* ラベル */
.custom-tour-gift .gift-label {
  font-size: 11px;
  font-weight: 700;
  color: #b68b1f;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ギフトメインテキスト */
.custom-tour-gift .gift-text {
  font-size: 11px;
  line-height: 1.55;
  color: #4a3a18;
  font-weight: 600;
}

/* ギフト無し（HTMLが無い場合も保険として） */
.custom-tour-gift:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   ボタン（カード最下部に固定）
========================================================= */
.custom-tour-buttons {
  margin-top: auto; /* ← 内容が少なければ上詰めになる */
  display: flex;
}

.custom-blog-button {
    display: inline-block;
    background: #2f7cff;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

/* =========================================================
   横スクロール用ラッパー
========================================================= */
.custom-scroll-area {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 10px 0 0px;
  align-items: flex-start !important; /* ← 高さ揃え禁止（重要） */
  scroll-snap-type: x mandatory;
}

/* スクロールするときのスナップ */
.custom-tour-card {
  scroll-snap-align: start;
}

/* スクロールヒント */
.custom-scroll-hint1 {
  font-size: 14px;
  color: #aaa;
  margin: 0 0 10px 8px;
}

/* スクロールバー非表示（iPhone対応） */
.custom-scroll-area::-webkit-scrollbar {
  display: none;
}


/* ==== 全体ボックス ==== */
.grower-comment-photo-box {
  display: flex;
  gap: 20px;
  padding: 20px;
  margin: 28px 0 20px;
  border-radius: 18px;
  background: #f3faf5;
  border: 1px solid rgba(0, 120, 80, 0.12);
  align-items: flex-start;
}

/* ---- 画像を消した時の最適化 ---- */
.grower-comment-photo-box.no-photo {
  display: block;          /* 横並びを解除 */
  padding: 24px 20px;
}

/* ==== 写真エリア（消してOK） ==== */
.grower-comment-photo {
  display: none !important;
}

/* ==== テキストエリア ==== */
.grower-comment-photo-body {
  width: 100%;
}

.grower-comment-photo-label {
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #2f6f4a;
}

.grower-comment-photo-text {
  margin: 8px 0 0;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #333;
  font-weight: 500;
}

/* ==== スマホ対応 ==== */
@media (max-width: 768px) {
  .grower-comment-photo-box.no-photo {
    padding: 18px;
  }

  .grower-comment-photo-text {
    font-size: 14px;
    line-height: 1.75;
  }
}


/* ==== 特典ボックス（1カラムに変更） ==== */
.store-bonus-box {
  display: block;               /* ← flexをやめて1カラムに */
  margin: 24px 0 32px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #fff8e7;
  border: 1px solid rgba(230, 180, 80, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

/* ラベルを上にちょこんと置く */
.store-bonus-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3cf7d;
  color: #4b3200;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 8px;              /* ← 下にだけ少し余白 */
}

/* 本文エリアは幅100%で左詰め */
.store-bonus-body {
  margin: 0;
  padding: 0;
}

.store-bonus-title {
  margin: 0px !important;
  font-size: 14px !important;
  font-weight: normal;
  color: #3b2a00;
}

.store-bonus-text {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #333;
}

.store-bonus-text strong {
  font-weight: 700;
}

/* ---- スマホ ---- */
@media (max-width: 768px) {
  .store-bonus-box {
    padding: 14px 14px 16px;
  }

  .store-bonus-title {
    font-size: 14px;
  }

  .store-bonus-text {
    font-size: 13px;
  }
}


.choice-section {
  display: grid;
  gap: 28px;
  margin: 40px 0;
}

@media (min-width: 900px) {
  .choice-section {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* カード本体 */
.choice-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 32px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* タグ */
.choice-tag {
  font-size: 13px !important;
  color: #fff;
  background: #2f7f6b;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}

.wifi-tag {
  background: #4a627f;
}

/* タイトル */
.choice-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #2f2f2f;
}

.wifi-title {
  color: #3f4d63;
}

/* 価格視覚ブロック */
.choice-price {
  text-align: center;
  margin: 10px 0 20px;
}

.price-main {
  font-size: 40px;
  font-weight: 600;
  color: #2f7f6b;
}

.wifi-number {
  font-size: 30px;
  color: #3f4d63;
}

.price-unit {
  font-size: 18px;
  margin-left: 6px;
}

.price-caption {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

/* リード文 */
.choice-lead {
  font-size: 15px !important;
  line-height: 1.7!important;
  margin-bottom: 18px!important;
  color: #333;
}

/* リスト */
.choice-list {
  margin: 0 0 20px!important;
  padding-left: 18px;
}

.choice-list li {
  font-size: 14px!important;
  line-height: 1.7;
  margin-bottom: 6px!important;
  list-style-type: "・ ";
}

/* まとめ */
.choice-summary {
  font-size: 14px!important;
  color: #555;
  line-height: 1.7;
  margin-bottom: 24px!important;
}

/* CTAボタン */
.choice-btn {
  display: block;
  text-align: center;
  padding: 12px 0;
  border-radius: 999px;
  font-size: 15px!important;
  font-weight: 500;
  text-decoration: none;
}

.primary-btn {
  background: #2f7f6b;
  color: #fff;
}

.outline-btn {
  border: 1px solid #aaa;
  color: #4a4a4a;
  background: #fff;
}
/* ボタン共通のホバーアニメーション */
.choice-btn {
  transition: all 0.2s ease;
}

.choice-btn:hover {
  opacity: 0.75;
}

.trave-block {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 20px 28px;
  border: 1px solid #e5f7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin: 32px 0;
}

/* ヘッダー */
.trave-header {
  margin-bottom: 18px;
}

/* ラベル（淡いミント背景 × 深緑文字） */
.trave-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f5f1; /* ライトグリーン */
  color: #2f7f6b; /* メインカラー */
  font-size: 11px !important;
  letter-spacing: 0.06em;
  margin: 0 0 8px !important;
}

/* タイトル（深いグリーン） */
.trave-title {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 600;
  color: #1f3d34; /* グリーンを含む深い濃色 */
}

/* 説明文（落ち着いたグレイッシュグリーン） */
.trave-desc {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #4f6962; /* サブテキストに最適 */
}

/* メリット部分 */
.trave-benefits {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 900px) {
  .trave-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trave-benefit {
  background: #f8fbff;
  border-radius: 14px;
  padding: 14px 14px 16px;
}

.trave-benefit-label {
  font-size: 12px !important;
  letter-spacing: 0.06em;
  color: #6b7c8f;
  margin: 0 0 4px !important;
}

.trave-benefit-title {
  font-size: 14px !important;
  font-weight: 600;
  color: #203043;
  margin: 0 0 6px !important;
}

.trave-benefit-text {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: #5a6a7a;
  margin: 0 !important;
}

/* 料金プラン部分 */
.trave-plans-wrapper {
  margin-top: 22px;
}

.trave-plans-title {
  font-size: 13px !important;
  color: #203043;
  margin: 0 0 10px;
}

/* 横スクロール（スマホ）／グリッド（PC） */
.trave-plans {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.trave-plans::-webkit-scrollbar {
  height: 4px;
}
.trave-plans::-webkit-scrollbar-thumb {
  background: #d0deef;
  border-radius: 999px;
}

@media (min-width: 900px) {
  .trave-plans {
    overflow-x: visible;
  }
}

/* プランカード */
.trave-plan {
  flex: 0 0 180px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid ;
  padding: 14px 14px 16px;
  text-align: center;
}

@media (min-width: 900px) {
  .trave-plan {
    flex: 1;
  }
}

.trave-plan-main {
  border-width: 2px;
  border-color: #2f7f6b;
  box-shadow: 0 6px 14px rgba(15, 95, 168, 0.12);
  position: relative;
}

.trave-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd83b;
  color: #333;
  font-size: 11px !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.trave-plan-gb {
  margin: 10px 0 2px !important;
  font-size: 22px !important;
  font-weight: 600;
  color: #2f7f6b;
}
.trave-plan-gb span {
  font-size: 12px;
  margin-left: 3px;
}

.trave-plan-term {
  margin: 0 0 6px !important;
  font-size: 12px;
  color: #6b7c8f;
}

.trave-plan-price {
  margin: 0 0 6px !important;
  font-size: 13px;
  color: #203043;
}
.trave-plan-price span {
  font-size: 20px;
  font-weight: 600;
  margin-right: 2px;
}

.trave-plan-note {
  margin: 0 !important;
  font-size: 11px !important;
  color: #6b7c8f;
  line-height: 1.6 !important;
}

/* CTAボタン */
.trave-cta {
  display: block;
  margin-top: 36px;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  border-radius: 999px;
  background: #2f7f6b;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.trave-cta:hover {
  opacity: 0.8;
}

/* ============ HERO (Global-link風) ============ */
.hero{
  padding: 28px 16px;
}

.hero-inner{
  max-width: 1350px;
  margin: 0px auto 40px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* ---- 左：大カード ---- */
.hero-left{
  position: relative;
  display: flex;                /* ← 高さ計算を安定 */
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease; /* ← hover側じゃなく通常に */
}

.hero-bg{
  position: absolute;
  inset: 0;
}

/* 背景フェード用 */
.hero-bg-img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  opacity: 0;
  animation: heroFade 18s infinite;
  filter: saturate(1.05);
}

/* ★ここをあなたの画像URLに差し替え */
.hero-bg-img.bg1{ background-image: url("https://oglife555.com/wp/wp-content/uploads/2026/02/pattaya-12.jpg"); animation-delay: 0s; }
.hero-bg-img.bg2{ background-image: url("https://oglife555.com/wp/wp-content/uploads/2026/02/pattaya-beach-clean-safe-season-guide-8.jpg"); animation-delay: 6s; }
.hero-bg-img.bg3{ background-image: url("https://oglife555.com/wp/wp-content/uploads/2026/02/snorkeling.jpg"); animation-delay: 12s; }

@keyframes heroFade{
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 文字が読みやすいように暗いグラデを被せる */
.hero-left::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 500px at 20% 30%, rgba(0,0,0,0.15), rgba(0,0,0,0.65)),
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.55));
  z-index: 1;
}

/* テキスト領域 */
.hero-text{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 26px 26px 48px;      /* ← ここが重要：下に安全余白 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.hero-text .sub{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.hero-title{
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-text .desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.92;
  max-width: 54ch;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 700;
  position: relative;
  z-index: 3;                   /* ← グラデより上に */
  transition: background .2s ease; /* ← hover側じゃなく通常に */
}

/* ホバー（PC） */
@media (hover:hover){
  .hero-left:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 52px rgba(0,0,0,0.14);
  }
  .hero-left:hover .hero-btn{
    background: rgba(255,255,255,0.14);
  }
}

/* ---- 右：カード2枚 ---- */
.hero-right{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.hero-card{
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  min-height: 200px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease; /* ← hover側じゃなく通常に */
}

.hero-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(1.05);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.60));
  z-index: 1;
}

.card-overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  padding: 18px 18px 16px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.card-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.card-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.card-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 700;
  transition: background .2s ease; /* ← hover側じゃなく通常に */
}

/* ホバー（PC） */
@media (hover:hover){
  .hero-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.14);
  }
  .hero-card:hover .card-btn{
    background: rgba(255,255,255,0.14);
  }
}

/* ============ レスポンシブ（スマホ） ============ */
@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: 1fr;
  }

  .hero-left{
    min-height: 360px;
    border-radius: 22px;
  }

  .hero-title{
    font-size: 30px;
  }

  .hero-text{
    padding: 20px 18px 44px; /* ← スマホも下余白確保 */
  }

  .hero-right{
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  .hero-card{
    min-height: 180px;
    border-radius: 20px;
  }

  .card-title{
    font-size: 16px;
  }
}

@media (max-width: 480px){
  .hero{
    padding: 22px 12px;
  }

  .hero-title{
    font-size: 26px;
    line-height: 1.15;
  }

  .hero-text .desc{
    font-size: 13px;
    line-height: 1.65;
  }
}

.insurance-carousel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:32px 0;
}

.insurance-card{
  position:relative;
  background:#fff;
  border:1px solid #a9aaaa;
  border-radius:16px;
  padding:20px;
}

.insurance-card.highlight{
  border:2px solid #2f7f6b;
}

.card-badge{
  position:absolute;
  top:-10px;
  left:18px;
  background:#2f7f6b;
  color:#fff;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
}

.card-title{
  font-size:16px;
  font-weight:600;
  color:#fff;
  margin-bottom:12px;
}

.price-main{
  font-size:28px;
  font-weight:700;
  color:#111827;
}

.price-unit{
  font-size:14px;
  margin-left:4px;
  color:#6b7280;
}

.price-note{
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.card-points{
  margin:16px 0;
  display:grid;
  gap:8px;
}

.point{
  display:flex;
  justify-content:space-between;
  font-size:14px;
}

.point-label{
  color:#6b7280;
}

.point-value{
  color:#374151;
}

.point-value.strong{
  font-weight:600;
  color:#111827;
}

.card-cta{
  margin-top:12px;
}

.cta-btn{
  border:1px solid #2f7f6b;
  color:#2f7f6b;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  text-align:center;
  cursor:pointer;
  transition:opacity .2s;
}

.cta-btn.primary{
  background:#2f7f6b;
  color:#fff;
}

.cta-btn:hover{
  opacity:0.7;
}

/* 強みブロック（静かな強調） */
.card-strength{
  margin-top:14px;
}

.strength-inner {
  background: #f3faf7;
  border: 1px solid #2f7f6b;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.3;
  color: #374151;
  border-radius: 8px;
}

.strength-inner strong{
	font-size: 14px !important;
}


/* スマホ横スクロール */
@media(max-width:860px){
  .insurance-carousel{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
  }
  .insurance-card{
    scroll-snap-align:start;
  }
}

/* ラッパー */
.hotel-cta-wrap{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 50px 0;
}

/* 共通ボタン */
.hotel-cta{
  flex: 1;
  max-width: 420px;
  padding: 25px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: 0.25s ease;
}

.hotel-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* ブランド名（視認性最優先） */
.hotel-cta .brand{
  font-size: 15px;
  font-weight: 800;
}

/* Agoda */
.hotel-cta.agoda{
  background: #16a34a;
}

/* Booking.com */
.hotel-cta.booking{
  background: #003580;
}

/* スマホ：縦並び */
@media (max-width: 768px){
  .hotel-cta-wrap{
    flex-direction: column;
  }
  .hotel-cta{
    max-width: 100%;
  }
}

/* 2ボタンの並び：PCは横、スマホは縦 */
.aff-buttons{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* 中のボタン幅を揃える */
.aff-buttons .button013,
.aff-buttons .buttonBooking{
  flex: 1 1 260px;
  max-width: 360px;
}

/* 既存 .button013 の「margin: 20px 0;」があるなら上書きして詰める */
.aff-buttons .button013{ margin: 0; }

/* ボタンのリンクは横並びでも100%幅にして揃える */
.aff-buttons .button013 a,
.aff-buttons .buttonBooking a{
  width: 75%;
  max-width: none;   /* 既存の max-width:260px を無効化して伸ばす */
}

/* スマホ：縦積み */
@media (max-width: 600px){
  .aff-buttons{
    flex-direction: column;
  }
  .aff-buttons .button013,
  .aff-buttons .buttonBooking{
    max-width: 420px;
    width: 100%;
  }
}

/* ================================
   Bookingボタン（デザインは同型）
================================ */
.buttonBooking { margin: 0; }

.buttonBooking a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 20px 25px 20px 55px;
  color: #ffffff;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  background: #2563eb;          /* Bookingっぽい青 */
  border-radius: 50px;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  font-size: 15px;
}

.buttonBooking a:before{
  font-family: "Font Awesome 5 Free";
  content: "\f594";             /* fa-hotel（同じでもOK） */
  font-weight: 900;
  line-height: 1;
  position: absolute;
  left: 8px;
  background: #ffffff;
  color: #2563eb;
  padding: 12px 13px;
  border-radius: 60px;
  z-index: 2;
  margin-left: 20px;
  font-size: 14px;
}

.buttonBooking a:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #3b82f6;          /* hover時に少し明るい青 */
  transition: 0.3s;
  left: 0;
}

.buttonBooking a:hover:after{
  width: 100%;
  z-index: -1;
}

/* =========
   Mobile First
   ========= */

/* 横スクロールの器：スマホで“気持ちよく”スクロールできるように */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;

  /* スクロールバーが邪魔なら */
  scrollbar-width: thin;                 /* Firefox */
}

/* スクロールの“端”が分かりやすいように薄くフェード（対応ブラウザのみ） */
@supports (mask-image: linear-gradient(#000, #000)) {
  .table-scroll {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
}

/* テーブル本体 */
.rule-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 98%;

  /* スマホでも“横スクロールで成立する最小幅”に寄せる */
  min-width: 680px;

  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 3px;

  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* 横スクロール時の見え方を安定させる */
  table-layout: fixed;
  margin: 0 auto;
}

/* ヘッダー */
.rule-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;

  text-align: left;
  padding: 12px 14px;

  background: #fafafa;
  border-bottom: 1px solid #e6e6e6;

  /* スマホでヘッダーを見失いにくく */
  position: sticky;
  top: 0;
  z-index: 2;
}

/* セル共通（スマホは行間と余白を詰め過ぎない） */
.rule-table td {
  padding: 14px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
  text-align: left;
}

/* 最終行 */
.rule-table tbody tr:last-child td {
  border-bottom: none;
}

/* 列：項目（左列）を“固定”して横スクロールしても見失わない */
.rule-table .col-item {
  width: 150px;
  font-weight: 600;
  color: #1d1d1f;
  background: #fafafa;

  position: sticky;
  left: 0;
  z-index: 1;

  /* 固定列の境界を自然に見せる */
  box-shadow: 1px 0 0 #e6e6e6;
  font-size: 14px;
}

/* 他列幅 */
.rule-table .col-key { width: 310px; }
.rule-table .col-note { width: 320px; }

/* テキスト：ズレ防止（余計な余白を入れない） */
.rule-table .one-line {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #1d1d1f;
  letter-spacing: 0.01em;

  /* スマホで“1行に固執しすぎて読めない”を防ぐ */
  white-space: normal;
  word-break: break-word;
}

.rule-table .note {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #6e6e73;

  white-space: normal;
  word-break: break-word;
}

/* 行の視認性（薄いホバーや交互背景は“やりすぎない”） */
.rule-table tbody tr:nth-child(even) td:not(.col-item) {
  background: #fcfcfc;
}

/* =========
   Tablet / PCで少しだけ“余裕”を戻す
   ========= */
@media (min-width: 900px) {
  .table-scroll { margin: 45px 0; }

  .rule-table {
    min-width: 860px;
  }

  .rule-table thead th {
    font-size: 13px;
    padding: 16px 20px;
    text-align: center;
  }

  .rule-table td {
    padding: 30px 20px;
    font-size: ;
  }

  .rule-table .one-line {
    font-size: 14px;
    line-height: 1.7;
  }

  .rule-table .note {
    font-size: 14px;
    line-height: 1.7;
  }

  .rule-table .col-item {
    width: 160px;
  }

  .rule-table .col-key { width: 360px; }
  .rule-table .col-note { width: auto; }
}

.ganjamaylife-side{
	width: 100%;
}

.ganjamaylife-side img{
	width: 100%;
	height: auto;
}

/* CSS */
.city-buttons{
  display: flex;
  gap: 12px;
  justify-content: space-between; /* 横一列で均等配置 */
  align-items: stretch;
  flex-wrap: nowrap;
  margin: 25px 0;
}

.city-btn{
  flex: 1;                 /* 4つを同じ幅に */
  text-align: center;
  padding: 15px 10px;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: #76b319;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .08s ease;
}

.city-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* スマホ：縦並び */
@media (max-width: 640px){
  .city-buttons{
    flex-direction: column;
  }
  .city-btn{
    width: 100%;
  }
}


/* ===== Ganja Story Component ===== */

.ganja-story-wrap {
  padding: 16px;
}

.ganja-story-frame {
  max-width: 1000px;
  margin: 0 auto;
  border: 3px solid #efefef;
  padding: 30px 20px;
  background: #f7f7f7;
}

/* 上段 */
.ganja-story-top {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.ganja-story-image {
  width: 30%;
  min-height: 250px;
}

.ganja-story-image img{
	width: 100%;
	height: auto;
}

.ganja-story-text {
  width: 70%;
}

.ganja-story-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: bold;
}

.ganja-story-description {
  line-height: 1.5;
  margin-bottom: 20px;
}

/* はじめにリンク */
.ganja-story-intro-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  background: #76b319;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.2s ease;
  width: 87%;
}

.ganja-story-intro-link:hover {
  opacity: 0.7;
}

/* セクションタイトル */
.ganja-story-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
}

.ganja-story-section-line {
  flex: 1;
  height: 1.5px;
  background: #dbdbdb;
}

.ganja-story-section-label {
  margin: 0;
  font-weight: bold;
}

/* ボタン群 */
.ganja-story-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  font-size: 15px;
}

/* ボタン共通 */
.ganja-story-button {
  background: #76b319;
  color: #fff;
  border-radius: 8px;
  padding: 14px 12px;
  font-weight: bold;
  text-align: center;

  white-space: normal;
  line-height: 1.5;
  word-break: break-word;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 72px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* 有効 */
.ganja-story-button--active:hover {
  opacity: 0.7;
}

/* 無効 */
.ganja-story-button--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .ganja-story-top {
    flex-direction: column;
  }

	.ganja-story-image{
		display: none;
	}
	
	
  .ganja-story-text {
    width: 100%;
  }

  .ganja-story-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .ganja-story-button {
    min-height: 88px;
    font-size: 14px;
  }

  .ganja-story-intro-link {
    width: 78%;
  }
}


/* ===== Human Vision Section ===== */

.human-vision-wrap {
  padding: 40px 16px;
  background: #eaf7f0;
}

.human-vision-box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 32px 40px;
  background: #eaf7f0;
  border: 2px solid #04c755;
  border-radius: 6px;
  position: relative;
}

/* タイトルラベル */
.human-vision-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #04c755;
  color: #fff;
  padding: 10px 28px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

/* 本文 */
.human-vision-content p {
  margin: 0 0 24px;
  line-height: 2;
  font-size: 16px;
  color: #2b3a40;
}

.human-vision-content p:last-child {
  margin-bottom: 0;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  .human-vision-box {
    padding: 40px 20px 28px;
  }

  .human-vision-label {
    font-size: 14px;
    padding: 8px 20px;
  }

  .human-vision-content p {
    font-size: 15px;
    line-height: 1.9;
  }
}



/* =================================================
   Apple-like Table + CSS Accordion (Button Below)
   ================================================= */

/* ---------- Toggle（checkboxは非表示） ---------- */
.pog-table-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* ---------- Accordion Container ---------- */
.pog-apple-table-wrap{
  max-width:980px;
  margin:0 0 8px;
  max-height:250px;              /* 初期表示 */
  overflow:hidden;
  position:relative;
  transition:max-height .45s ease;
}

/* 下に続きがあることを示すフェード */
.pog-apple-table-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:64px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.95)
  );
  pointer-events:none;
}

/* 開いた状態 */
.pog-table-toggle:checked + .pog-apple-table-wrap{
  max-height:2000px; /* 十分大きく */
}
.pog-table-toggle:checked + .pog-apple-table-wrap::after{
  display:none;
}

/* ---------- Toggle Button（表の下・中央） ---------- */
.pog-table-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:14px auto 0;            /* 下・中央 */
  padding:10px 18px;
  border-radius:999px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.12);
  font-size:14px;
  font-weight:600;
  color:rgba(0,0,0,.7);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.pog-table-button:hover{
  background:rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.pog-table-toggle:checked + .pog-apple-table-wrap + .pog-table-button::after{
  content:"（閉じる）";
  margin-left:6px;
  font-size:12px;
  opacity:.7;
}

/* ---------- Table (Apple-like) ---------- */
.pog-apple-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.pog-apple-table thead th{
  text-align: center;
  padding:14px 18px;
  font-size:13px;
  font-weight:700;
  color:rgba(0,0,0,.6);
  background:rgba(0,0,0,.02);
  border-bottom:1px solid rgba(0,0,0,.08);
  letter-spacing:.02em;
}
.pog-apple-table tbody td{
  padding:16px 18px;
  font-size:15px;
  font-weight0:normal;
  color:rgba(0,0,0,.82);
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
}
.pog-apple-table tbody tr:last-child td{
  border-bottom:none;
}

/* 未確定行（探索中） */
.pog-apple-muted td{
  color:rgba(0,0,0,.42);
}

/* ショップ名リンクだけ“押せる”見た目 */
.pog-apple-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.1);
  text-decoration:none;
  color:rgba(0,0,0,.85);
  font-weight:600;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.pog-apple-link:hover{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.14);
  transform:translateY(-1px);
  opacity:.95;
}
.pog-apple-link:focus-visible{
  outline:3px solid rgba(0,122,255,.35);
  outline-offset:2px;
}

/* ---------- Mobile (Card-style) ---------- */
@media (max-width:768px){
  .pog-apple-table thead{ display:none; }
  .pog-apple-table,
  .pog-apple-table tbody,
  .pog-apple-table tr,
  .pog-apple-table td{
    display:block; width:100%;
  }
  .pog-apple-table tbody tr{
    padding:14px 16px;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .pog-apple-table tbody tr:last-child{ border-bottom:none; }
  .pog-apple-table tbody td{
    border-bottom:none;
    padding:10px 0;
  }
  .pog-apple-table tbody td:nth-child(1)::before,
  .pog-apple-table tbody td:nth-child(2)::before,
  .pog-apple-table tbody td:nth-child(3)::before{
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:700;
    color:rgba(0,0,0,.5);
    letter-spacing:.02em;
  }
  .pog-apple-table tbody td:nth-child(1)::before{ content:"シチュエーション"; }
  .pog-apple-table tbody td:nth-child(2)::before{ content:"品種名"; }
  .pog-apple-table tbody td:nth-child(3)::before{ content:"ショップ名"; }
  .pog-apple-link{ width:100%; }
}

.pog-research-title{
  position: relative;
  line-height: 1.4;
  padding: 0.25em 1em;
  display: inline-block;
  top: 0;
  margin: 20px 0;
  font-size: 16px;
  font-weight: 600;
}

.pog-research-title::before,
.pog-research-title::after{
  position: absolute;
  top: 0;
  content: '';
  width: 8px;
  height: 100%;
  display: inline-block;
}

.pog-research-title::before{
  left: 0;
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.pog-research-title::after{
  right: 0;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
}

/* ===== POG Coverflow 5 (CSS only) ===== */
.pog-cflow5{
  --w: min(860px, 92vw);
  --h: min(420px, 56vw);
  --gap: 340px;      /* 左右の広がり */
  --z: 160px;        /* 奥行き */
  --rot: 18deg;      /* 斜め角 */
  --sideScale: .88;  /* 左右縮小 */
  --sideOpacity: .62;
  --dur: 520ms;

  position: relative;
  margin: 18px auto;
	margin-top: 20px;
}

.pog-cflow5__state{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.pog-cflow5__viewport{
  width: var(--w);
  height: var(--h);
  margin: 0 auto;
  position: relative;
  perspective: 1100px;
}

.pog-cflow5__track{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

/* カード */
.pog-cflow5__card{
  position:absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  background: #fff;

  transition: transform var(--dur) ease, opacity var(--dur) ease, filter var(--dur) ease;
  backface-visibility: hidden;

  /* 初期は非表示に近く（:checkedで必要分だけ出す） */
  opacity: 0;
  transform: translateX(0) translateZ(calc(var(--z) * -1)) rotateY(0) scale(.92);
}

/* 画像の収まり */
.pog-cflow5__card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* 中央カードはクリア、左右は少し暗く */
.pog-cflow5__card::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.08);
  opacity: 0;
  transition: opacity var(--dur) ease;
  pointer-events:none;
}
.pog-cflow5__card:hover{
  transform: translateX(0) translateZ(8px) rotateY(0) scale(1.01);
}

/* ===== state: s1 ===== */
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__card--1{
  opacity:1; transform: translateX(0) translateZ(0) rotateY(0) scale(1);
}
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__card--5{
  opacity:var(--sideOpacity);
  transform: translateX(calc(var(--gap) * -1)) translateZ(calc(var(--z) * -1)) rotateY(var(--rot)) scale(var(--sideScale));
}
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__card--2{
  opacity:var(--sideOpacity);
  transform: translateX(var(--gap)) translateZ(calc(var(--z) * -1)) rotateY(calc(var(--rot) * -1)) scale(var(--sideScale));
}
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__card--5::after,
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__card--2::after{ opacity:.18; }

/* ===== state: s2 ===== */
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__card--2{ opacity:1; transform: translateX(0) translateZ(0) rotateY(0) scale(1); }
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__card--1{
  opacity:var(--sideOpacity);
  transform: translateX(calc(var(--gap) * -1)) translateZ(calc(var(--z) * -1)) rotateY(var(--rot)) scale(var(--sideScale));
}
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__card--3{
  opacity:var(--sideOpacity);
  transform: translateX(var(--gap)) translateZ(calc(var(--z) * -1)) rotateY(calc(var(--rot) * -1)) scale(var(--sideScale));
}
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__card--1::after,
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__card--3::after{ opacity:.18; }

/* ===== state: s3 ===== */
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__card--3{ opacity:1; transform: translateX(0) translateZ(0) rotateY(0) scale(1); }
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__card--2{
  opacity:var(--sideOpacity);
  transform: translateX(calc(var(--gap) * -1)) translateZ(calc(var(--z) * -1)) rotateY(var(--rot)) scale(var(--sideScale));
}
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__card--4{
  opacity:var(--sideOpacity);
  transform: translateX(var(--gap)) translateZ(calc(var(--z) * -1)) rotateY(calc(var(--rot) * -1)) scale(var(--sideScale));
}
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__card--2::after,
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__card--4::after{ opacity:.18; }

/* ===== state: s4 ===== */
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__card--4{ opacity:1; transform: translateX(0) translateZ(0) rotateY(0) scale(1); }
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__card--3{
  opacity:var(--sideOpacity);
  transform: translateX(calc(var(--gap) * -1)) translateZ(calc(var(--z) * -1)) rotateY(var(--rot)) scale(var(--sideScale));
}
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__card--5{
  opacity:var(--sideOpacity);
  transform: translateX(var(--gap)) translateZ(calc(var(--z) * -1)) rotateY(calc(var(--rot) * -1)) scale(var(--sideScale));
}
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__card--3::after,
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__card--5::after{ opacity:.18; }

/* ===== state: s5 ===== */
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__card--5{ opacity:1; transform: translateX(0) translateZ(0) rotateY(0) scale(1); }
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__card--4{
  opacity:var(--sideOpacity);
  transform: translateX(calc(var(--gap) * -1)) translateZ(calc(var(--z) * -1)) rotateY(var(--rot)) scale(var(--sideScale));
}
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__card--1{
  opacity:var(--sideOpacity);
  transform: translateX(var(--gap)) translateZ(calc(var(--z) * -1)) rotateY(calc(var(--rot) * -1)) scale(var(--sideScale));
}
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__card--4::after,
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__card--1::after{ opacity:.18; }

/* ===== arrows ===== */
.pog-cflow5__arrows{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.pog-cflow5__btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  pointer-events:auto;
  user-select:none;
  cursor:pointer;

  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;

  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(8px);

  opacity:.9;
  transition: opacity .18s ease, transform .18s ease;
}
.pog-cflow5__btn:hover{
  opacity:1;
  transform: translateY(-50%) scale(1.03);
}
.pog-cflow5__btn--prev{ left: 14px; }
.pog-cflow5__btn--next{ right: 14px; }

/* 状態に応じて表示する矢印だけ表示 */
.pog-cflow5__btn{ display:none; }
#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__btn[data-show="s1"]{ display:block; }
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__btn[data-show="s2"]{ display:block; }
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__btn[data-show="s3"]{ display:block; }
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__btn[data-show="s4"]{ display:block; }
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__btn[data-show="s5"]{ display:block; }

/* ===== dots ===== */
.pog-cflow5__dots{
  position:absolute;
  left:0; right:0;
  bottom: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
}
.pog-cflow5__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.pog-cflow5__dot:hover{ transform: scale(1.2); }

#pog-cflow5-s1:checked ~ .pog-cflow5__viewport .pog-cflow5__dots label[for="pog-cflow5-s1"],
#pog-cflow5-s2:checked ~ .pog-cflow5__viewport .pog-cflow5__dots label[for="pog-cflow5-s2"],
#pog-cflow5-s3:checked ~ .pog-cflow5__viewport .pog-cflow5__dots label[for="pog-cflow5-s3"],
#pog-cflow5-s4:checked ~ .pog-cflow5__viewport .pog-cflow5__dots label[for="pog-cflow5-s4"],
#pog-cflow5-s5:checked ~ .pog-cflow5__viewport .pog-cflow5__dots label[for="pog-cflow5-s5"]{
  background: rgba(255,255,255,.92);
  transform: scale(1.25);
}

/* ===== mobile tuning ===== */
@media (max-width: 680px){
  .pog-cflow5{
    --gap: 220px;
    --rot: 14deg;
    --h: min(360px, 62vw);
  }
  .pog-cflow5__btn{ padding: 8px 12px; }
}

.clin-p-01 {
  font-size: 18px;
  width: 80%;
  margin: 20px auto;
  line-height: 1.8em;
}

.clin-p-01 strong {
  background: linear-gradient(transparent 60%, #f5bf25 60%);
  font-weight: bold;
}

.clin-p-h1 {
  font-size: 35px;
  width: 80%;
  margin: 20px auto;
  line-height: 1.8em;
  text-align: center;
  font-weight: bold;
}

.clin-p-h2{
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #5c5c5c;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-left: 5px solid #5c5c5c;
  padding-left: 10px;
}

.index-right1{
	margin-top: 30px;
}

.tag-shop-add{
	width: 90%;
	padding: 1% 5%;
}

.tag-shop-add iframe{
	width: 100%;
	height: auto;
}

.tag-shop-add img{
	width: 100%;
	height: auto;
}

.tag-shop-add-p-1{
	font-size: 18px !important;
	margin-top: 10px;
}

.tag-shop-add-p-2{
	font-size: 12px !important;
	color: #828282;
	margin: 5px 0;
}

.tag-shop-add-p-3{
	font-size: 12px !important;
	line-height: 1.2 !important;
}

/* ===== Open/Close Hours (POG) ===== */
.pog-hours{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  overflow: hidden;
	margin-top: 20px;
}

/* summary */
.pog-hours__summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 700;
  color: #111;
}

.pog-hours__summary::-webkit-details-marker{
  display: none;
}

/* status */
.pog-hours__status{
  font-size: 14px;
  letter-spacing: .02em;
}

/* chevron */
.pog-hours__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .9;
}

/* opened state */
.pog-hours[open] .pog-hours__chev{
  transform: rotate(225deg);
}

/* body */
.pog-hours__body{
  padding: 4px 18px 16px;
}

.pog-hours__list{
  margin: 0;
  padding: 0;
}

/* rows */
.pog-hours__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.pog-hours__day{
  margin: 0;
  font-weight: normal;
  color: rgba(0,0,0,.82);
}

.pog-hours__time{
  margin: 0;
  font-weight: normal;
  color: rgba(0,0,0,.82);
  text-align: left;
}

/* mobile */
@media (max-width: 560px){
  .pog-hours__summary{
    padding: 14px 14px;
  }
  .pog-hours__status{
    font-size: 16px;
  }
  .pog-hours__body{
    padding: 2px 14px 12px;
  }
  .pog-hours__row{
    grid-template-columns: 86px 1fr;
    padding: 12px 0;
  }
  .pog-hours__day{
    font-size: 14px;
  }
  .pog-hours__time{
    font-size: 14px;
  }
}

.pog-contact-btn{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 420px;
  height: 50px;

  margin: 20px auto;

  background-color: #5cc468; /* LINE風グリーン */
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: .05em;

  border-radius: 10px;

  transition: 
    background-color .2s ease, transform .15s ease, box-shadow .15s ease;

  font-weight: bold;
}

/* hover（PC） */
.pog-contact-btn:hover{
  background-color: #4fb85c;
  transform: translateY(-1px);
}

/* active（タップ時） */
.pog-contact-btn:active{
  transform: translateY(0);
}

/* スマホ最適化 */
@media (max-width: 480px){
    .pog-contact-btn {
        height: 52px;
        font-size: 16px;
        border-radius: 8px;
        width: 90%;
        margin: 0 auto 5%;
    }
}

/* ===== OG Perk Box (fits site, no shadow) ===== */
.pog-campaign-box {
    width: 96%;
    max-width: 100%;
    margin: 0 0 30px;
    padding: 18px 18px 16px;
    background: #ffe4c2;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 16px;
    position: relative;
    text-align: center;
}


/* title：大きくしない。情報の“ラベル”として置く */
.pog-campaign-title{
  margin: 0 0 12px;
  padding: 0 0 10px 14px;

  font-size: 14px;
  font-weight: 700;
  color: #222;
  letter-spacing: .04em;

  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* inner */
.pog-campaign-inner{
  padding-left: 14px; /* 左バー分 */
}

/* main text：ここが主役。読みやすさ優先 */
.pog-campaign-main{
  margin: 0;
  line-height: 1.85;
  font-size: 18px;
  font-weight: 500;
  color: #111;
}

/* 強調：派手にしないが“確実に拾う” */
.pog-campaign-main strong{
  font-weight: 800;
}

/* 「OG Times」＝タグ感（リンクやボタンに見せない） */
.pog-campaign-main strong:first-of-type {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 2px;
    border-radius: 999px;
    background: rgb(220 130 46 / 95%);
    border: 1px solid rgb(198 90 66 / 30%);
    color: #ffffff;
    transform: translateY(-1px);
    font-weight: 900;
}

/* 「120％喜ぶお得な特典」＝一段だけ上げる */
.pog-campaign-main strong:last-of-type{
  font-size: 20px;
  color: #000;
}

/* ===== Mobile ===== */
@media (max-width: 600px){
    .pog-campaign-box {
        width: 90%;
        max-width: 100%;
        margin: 10% 0 10%;
        padding: 18px 18px 16px;
        background: #ffe4c2;
        border: 1px solid rgba(0, 0, 0, .10);
        border-radius: 16px;
        position: relative;
        text-align: center;
    }

  .pog-campaign-box::before{
    top: 12px;
    bottom: 12px;
    width: 5px;
  }

  .pog-campaign-box::after{
    left: 14px;
    right: 14px;
  }

    .pog-campaign-title {
        font-size: 1em;
        padding-left: 12px;
        margin-bottom: 10px;
    }

  .pog-campaign-inner{
    padding-left: 12px;
  }

    .pog-campaign-main {
        font-size: 1em;
        line-height: 1.9;
    }

  .pog-campaign-main strong:last-of-type{
    font-size: 17px;
  }
}

/* ★これが無いと3つ目は絶対出ない */
#shopinfo:checked ~ #shopinfo_content { display:block; }

/* ===== Place Table (PC) ===== */
.ogtPlaceTable{
  margin: 18px 0;
}

.ogtPlaceTable__inner{
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
  background:#fff;
}

.ogtPlaceTable__row{
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-top: 1px solid #eee;
}

.ogtPlaceTable__row--head{
  background: #f5f5f5;
  border-top: none;
  font-weight: 700;
  font-size: 14px;
  color:#444;
}

.ogtPlaceTable__name{
  font-weight: 700;
  font-size: 18px;
  color:#111;
}

.ogtPlaceTable__area{
  color:#666;
  font-size: 15px;
}

.ogtPlaceTable__action{
  font-size: 15px;
  color:#888;
}

/* buttons */
.ogtPlaceBtn{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  text-decoration: none;
  color:#222;
  font-size: 14px;
  line-height: 1;
  transition: .2s ease;
  white-space: nowrap;
}

.ogtPlaceBtn:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}

.ogtPlaceBtn--map{
  border-color:#bdbdbd;
}

/* ===== Mobile: card layout ===== */
@media (max-width: 768px){

  .ogtPlaceTable__row--head{
    display:none;
  }

  .ogtPlaceTable__row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 16px;
  }

  .ogtPlaceTable__name{
    font-size: 17px;
  }

  .ogtPlaceTable__area{
    font-size: 14px;
  }

  /* label-style */
  .ogtPlaceTable__area::before{
    content:"エリア：";
    font-weight: 700;
    color:#111;
    margin-right: 6px;
  }

  /* the 3rd column / 4th column both have ogtPlaceTable__action
     so we add labels by position */
  .ogtPlaceTable__row .ogtPlaceTable__action:nth-of-type(3)::before{
    content:"記事：";
    font-weight: 700;
    color:#111;
    margin-right: 6px;
  }

  .ogtPlaceTable__row .ogtPlaceTable__action:nth-of-type(4)::before{
    content:"地図：";
    font-weight: 700;
    color:#111;
    margin-right: 6px;
  }

  .ogtPlaceBtn{
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* =================================================
  OG SNS Dock (mobile-first)
  - icon in circle
  - centered row
  - responsive size
================================================= */

.ogSnsDock{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 14px;
  background:#fff;
}

/* circle button */
.ogSnsBtn{
  width:52px;
  height:52px;
  border-radius:999px;
  border:3px solid #e3e3e3;
  background:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  color:#111;

  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ogSnsBtn:hover{
  transform:translateY(-1px);
  border-color:#cfcfcf;
}

.ogSnsBtn:active{
  transform:translateY(0);
}

/* keyboard focus */
.ogSnsBtn:focus-visible{
  outline:3px solid #111;
  outline-offset:3px;
}

/* icon */
.ogSnsIco{
  width:26px;
  height:26px;
  display:block;
  fill:currentColor;
}

/* make svg strokes (if any) consistent */
.ogSnsIco *{
  vector-effect: non-scaling-stroke;
}

/* ===== Small phones ===== */
@media (max-width: 360px){
  .ogSnsDock{
    gap:10px;
    padding:14px 10px;
  }
  .ogSnsBtn{
    width:46px;
    height:46px;
    border-width:3px;
  }
  .ogSnsIco{
    width:24px;
    height:24px;
  }
}

/* ===== Tablets / PC ===== */
@media (min-width: 768px){
  .ogSnsDock{
    gap:16px;
    padding:5px 16px;
  }
  .ogSnsBtn{
    width:56px;
    height:56px;
  }
  .ogSnsIco{
    width:28px;
    height:28px;
  }
}

/* YouTubeだけ強制補正（上書きされないように !important） */
.ogSnsDock .ogSnsBtn[aria-label="YouTube"] .ogSnsIco{
  transform: scale(1.18) !important;
  transform-origin: center !important;
}

/* ▶︎だけ白にして潰れ防止（見た目が一番安定） */
.ogSnsDock .ogSnsBtn[aria-label="YouTube"] .ogSnsIco path:last-child{
  fill:#fff !important;
}

/* ================
   Article Grid (OG)
================ */
.og-articlegrid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.og-articlegrid__item{ margin:0; padding:0; }

.og-articlegrid__empty{
  margin: 0;
  padding: 14px 0;
  color: #666;
  font-size: 14px;
}

/* ================
   Card
================ */
.og-articlecard{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;

  /* “押せる”を作る：影なしでも、枠と色で反応させる */
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.og-articlecard:hover{
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.01);
  transform: translateY(-1px); /* 影なしでも上品に反応 */
}

/* サムネ */
.og-articlecard__thumb{
  width: 100%;
  aspect-ratio: 1 / 1;   /* ← 横幅＝高さ */
  overflow: hidden;
  background: #f3f3f3;
}

.og-articlecard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* ← 縦横比を保ったまま中央トリミング */
  display: block;
}

/* 本文 */
.og-articlecard__body{
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
}

/* メタ */
.og-articlecard__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.og-articlecard__pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: rgba(0,0,0,.72);
  background: #fbf6ea;                 /* サイトの淡いベージュ寄せ */
  border: 1px solid rgba(0,0,0,.10);
}

.og-articlecard__new{
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f8ee;                 /* グリーン寄せ */
  color: #2a6b2f;
  border: 1px solid rgba(42,107,47,.18);
}

/* タイトル：読みやすさ最優先 */
.og-articlecard__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: .01em;

  /* 3行までで揃える */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  min-height: calc(1.55em * 3);
}

/* CTA：記事だと認識させる最重要要素 */
.og-articlecard__cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.72);
  font-size: 13px;
  letter-spacing: .02em;
}

.og-articlecard__ctaText{
  font-weight: 700;
}

.og-articlecard__ctaArrow{
  font-size: 14px;
  transition: transform .18s ease, opacity .18s ease;
  opacity: .7;
}

.og-articlecard:hover .og-articlecard__ctaArrow{
  transform: translateX(2px);
  opacity: 1;
}

/* サムネも少しだけ反応（やりすぎない） */
.og-articlecard:hover .og-articlecard__img{
  opacity: .92;
}

/* ================
   Responsive
================ */
@media (max-width: 1024px){
  .og-articlegrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .og-articlegrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .og-articlecard__title{
    font-size: 17px;
    -webkit-line-clamp: 2;
    min-height: calc(1.55em * 2);
  }
}


/* =========================
  OG Times - Pick Grid (Revised)
  - Crown icon
  - Each card clearly boxed
  - No shadow
========================= */

.ogt-pick-grid{
  --gap: 22px;
  --radius: 18px;
  --border: rgba(0,0,0,.12);
  --text: #111;
  --muted: rgba(0,0,0,.55);
  --footer-bg: #f3f4f6;
  --badge-bg: rgba(0,0,0,.78);

  margin: 30px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

/* card = link (BOXED) */
.ogt-pick-card{
  display: block;
  text-decoration: none;
  color: var(--text);
  min-width: 0;

  /* ② 全体を線で囲って、1つ1つが明確に */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

/* hover: subtle (no shadow) */
.ogt-pick-card:hover{
  border-color: rgba(0,0,0,.22);
}

/* image area */
.ogt-pick-media{
  position: relative;
  background: #eee;
}

.ogt-pick-media img{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  object-fit: cover;

  transform: scale(1);
  transition: transform .22s ease;
}

.ogt-pick-card:hover .ogt-pick-media img{
  transform: scale(1.04);
}

/* ① badge: Crown */
.ogt-pick-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(249, 193, 62, 0.78);
  color: #fff;
  display: grid;
  place-items: center;
}

/* title */
.ogt-pick-title{
  margin: 12px 14px 12px;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 800;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* footer block (inside card) */
.ogt-pick-footer{
  margin: 0 14px 14px;
  border-radius: 14px;
  background: var(--footer-bg);
  padding: 12px 12px 12px;
  border: 1px solid rgba(0,0,0,.08);
}

/* person row */
.ogt-pick-person{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ogt-pick-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12);
}

.ogt-pick-person-meta{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.ogt-pick-name{
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14em;
}

.ogt-pick-date{
  margin: 0;
  font-size: 13px;
  color: rgba(0,0,0,.45);
  white-space: nowrap;
}

.ogt-pick-review{
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(0,0,0,.66);

  display: -webkit-box;
  -webkit-line-clamp: 3; /* スマホでレビューが見える */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* focus */
.ogt-pick-card:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 4px;
}


/* =========================
  Responsive
========================= */
@media (max-width: 1100px){
  .ogt-pick-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .ogt-pick-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --gap: 16px;
  }
}
@media (max-width: 520px){
      .ogt-pick-grid {
        grid-template-columns: 1fr;
        width: 90%;
        margin: 7% auto 10%;
    }
  .ogt-pick-title{ font-size: 18px; }
}

/* =========================
  POG 2段式 Q&A（CSS）
  - JS不要
  - 初期は閉じる（detailsデフォルト）
  - スマホ対応
========================= */

.pog2qa-wrap{
  max-width: 95%;
  margin: 24px auto;
  padding: 0 16px;
}

.pog2qa-head{ margin: 0 0 14px; }
.pog2qa-title{
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 6px;
  letter-spacing: .02em;
}
.pog2qa-sub{
  margin: 0;
  font-size: 13px;
  color: #666;
}

/* list frame */
.pog2qa-list{
  border-top: 1px solid rgba(0,0,0,.10);
}

/* parent item */
.pog2qa-parent{
  border-bottom: 1px solid rgba(0,0,0,.10);
  background: #fff;
}

/* remove default marker */
.pog2qa-parent > summary,
.pog2qa-child > summary{
  list-style: none;
}
.pog2qa-parent > summary::-webkit-details-marker,
.pog2qa-child > summary::-webkit-details-marker{
  display:none;
}

/* parent summary */
.pog2qa-parent-q{
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 10px;
  align-items: center;
  padding: 14px 10px;
  cursor: pointer;
  user-select: none;
}
.pog2qa-parent-q:hover{
  background: rgba(0,0,0,.03);
}

.pog2qa-badge{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
}

.pog2qa-parent-text{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #111;
}

/* chevron */
.pog2qa-chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(45deg);
  transition: transform .18s ease;
  justify-self: end;
}
.pog2qa-chevron.sm{
  width: 9px;
  height: 9px;
}
.pog2qa-parent[open] .pog2qa-parent-q .pog2qa-chevron{
  transform: rotate(-135deg);
}
.pog2qa-child[open] .pog2qa-child-q .pog2qa-chevron{
  transform: rotate(-135deg);
}

/* children area */
.pog2qa-children{
  padding: 0 10px 12px;
}

/* child item */
.pog2qa-child{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  margin: 10px 0 0;
  overflow: hidden;
  background: #fff;
}

.pog2qa-child-q{
  display: grid;
  grid-template-columns: 10px 1fr 18px;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(0,0,0,.02);
}
.pog2qa-child-q:hover{
  background: rgba(0,0,0,.04);
}

.pog2qa-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.28);
  display: inline-block;
  margin-left: 2px;
}

.pog2qa-child-text{
  font-size: 14px;
  line-height: 1.55;
  color: #111;
}

/* answer */
.pog2qa-a{
  padding: 10px 12px 12px;
}
.pog2qa-a-inner{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

.pog2qa-abadge{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  opacity: .85;
}

.pog2qa-atext{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #222;
}

/* =========================
  Mobile
========================= */
@media (max-width: 600px){
  .pog2qa-wrap{
    margin: 18px auto;
    padding: 0 12px;
  }
  .pog2qa-title{ font-size: 18px; }
  .pog2qa-parent-q{
    padding: 13px 8px;
    grid-template-columns: 26px 1fr 18px;
    gap: 9px;
  }
  .pog2qa-parent-text{ font-size: 14px; }
  .pog2qa-children{ padding: 0 8px 12px; }
  .pog2qa-child-q{ padding: 12px 10px; }
  .pog2qa-atext{ font-size: 13.5px; }
}


/* =========================
   Review Section (Fixed / Responsive)
========================= */

.pog-review{
  padding: 24px 10px;
  background: #f9f9f9;
  border: 2px solid #f2f2f2;
  margin-top: 20px;
}

.pog-review__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: 22px;
  align-items: start;
}

/* LEFT */
.pog-review__left{
  min-width: 0; /* ★ grid内のはみ出し防止 */
}

.pog-review__title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* rail wrap */
.pog-review__railWrap{
  position: relative;
}

/* Horizontal scroll rail */
.pog-review__rail{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 6px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  /* ★ iOSで横スクロールが詰まる時の保険 */
  touch-action: pan-x;
}

.pog-review__rail::-webkit-scrollbar{ height: 8px; }
.pog-review__rail::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.pog-review__rail::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

/* Review card */
.pog-reviewCard{
  flex: 0 0 320px; /* PC */
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 18px 18px 14px;
  scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.pog-reviewCard__headline{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.pog-reviewCard__body{
  margin: 12px 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: #222;
}

.pog-reviewCard__meta{
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #eee;
}

/* Divider */
.pog-review__divider{
  margin-top: 16px;
  height: 2px;
  background: #111;
  width: 100%;
  opacity: .12;
}

/* Stars */
.pog-stars{
  --starSize: 14px;
  --starColor: #111;
  --starEmpty: #d9d9d9;

  position: relative;
  width: calc(var(--starSize) * 5 + 4px);
  height: var(--starSize);
  background: linear-gradient(90deg, var(--starEmpty) 0 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 0l3.09 7.26L23 8.27l-5.5 4.77L19.18 21 12 16.9 4.82 21l1.68-7.96L1 8.27l7.91-1.01L12 0zm24 0l3.09 7.26L47 8.27l-5.5 4.77L43.18 21 36 16.9 28.82 21l1.68-7.96L25 8.27l7.91-1.01L36 0zm24 0l3.09 7.26L71 8.27l-5.5 4.77L67.18 21 60 16.9 52.82 21l1.68-7.96L49 8.27l7.91-1.01L60 0zm24 0l3.09 7.26L95 8.27l-5.5 4.77L91.18 21 84 16.9 76.82 21l1.68-7.96L73 8.27l7.91-1.01L84 0zm24 0l3.09 7.26L119 8.27l-5.5 4.77L115.18 21 108 16.9 100.82 21l1.68-7.96L97 8.27l7.91-1.01L108 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 0l3.09 7.26L23 8.27l-5.5 4.77L19.18 21 12 16.9 4.82 21l1.68-7.96L1 8.27l7.91-1.01L12 0zm24 0l3.09 7.26L47 8.27l-5.5 4.77L43.18 21 36 16.9 28.82 21l1.68-7.96L25 8.27l7.91-1.01L36 0zm24 0l3.09 7.26L71 8.27l-5.5 4.77L67.18 21 60 16.9 52.82 21l1.68-7.96L49 8.27l7.91-1.01L60 0zm24 0l3.09 7.26L95 8.27l-5.5 4.77L91.18 21 84 16.9 76.82 21l1.68-7.96L73 8.27l7.91-1.01L84 0zm24 0l3.09 7.26L119 8.27l-5.5 4.77L115.18 21 108 16.9 100.82 21l1.68-7.96L97 8.27l7.91-1.01L108 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.pog-stars__fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--starColor);
}

/* =========================
   Right Side: OG Times Review card
========================= */

.review-card{
  min-width: 0;                 /* ★ grid内はみ出し防止 */
  background: #fffaf1;
  border: 1px solid #e6d6ce;
  border-radius: 16px;
  padding: 22px;
  box-sizing: border-box;
  margin: 0;                    /* ★ margin-left を消す */
}

.review-card__title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 3px solid #e1ad7e;
  display: inline-block;
  padding-bottom: 4px;
}

.review-card__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #222;
  word-break: break-word;       /* ★ 長文はみ出し防止 */
  overflow-wrap: anywhere;
}

/* =========================
   Mobile
========================= */
@media (max-width: 768px){
  .pog-review{
    padding: 18px 10px;
  }

  .pog-review__inner{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 12px;
  }

  .pog-review__title{
    font-size: 20px;
    margin-bottom: 12px;
  }

  .pog-reviewCard{
    flex: 0 0 82vw; /* ★ スマホは大きく */
    max-width: 360px;
  }

  .review-card{
    padding: 18px;
  }

  .review-card__title{
    font-size: 16px;
  }

  .review-card__text{
    font-size: 13.5px;
    line-height: 1.75;
  }
}

/* スマホ：左を上、右を下に落とす */
@media (max-width: 768px){
  .pog-review__inner{
    display: flex;        /* gridより順番制御が簡単 */
    flex-direction: column;
    gap: 14px;
  }

  .pog-review__left{
    order: 1;
    min-width: 0;
  }

  /* 右側ラッパーがある場合 */
  .pog-review__right{
    order: 2;
    min-width: 0;
  }

  /* ラッパーが無い場合でもカードを下に */
  .pog-review__inner > .review-card{
    order: 2;
    width: 100%;
    margin: 0;
  }
}


/* ====== Product Grid (PC:4 / SP:2) ====== */
.pog-shopgrid{
  padding: 18px 0;
}

.pog-shopgrid__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC 4列 */
  gap: 28px 22px; /* 行/列 */
}

/* card */
.pog-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

.pog-card__img{
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
  /* 画像エリアの比率：添付っぽく横長 */
  aspect-ratio: 4 / 3;
}

.pog-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 伸び防止 */
  transform: scale(1);
  transition: transform .22s ease;
  display: block;
}

/* hover zoom */
.pog-card:hover .pog-card__img img{
  transform: scale(1.05);
}

.pog-card__title{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: normal;
  letter-spacing: .01em;

  /* 2行で揃える（長い商品名でも崩れにくい） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.9em * 1);
}


.pog-card__price{
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}

  .og-review-footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* ボタン中央 */
    margin-top: 20px;
  }

  .og-review-footer__btn{
    width: 70%;
    padding: 14px 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    line-height: 1;
  }

  .og-review-footer__btn:hover{
    opacity: .9;
  }

.og-review-footer__date {
  margin-top: 20px;
  font-size: 12px;
  color: #777;
  line-height: 1.2;
  display: block;
  text-align: right;
}

.review-card {
  background: #fffaf1;
  border: 1px solid #e6d6ce;
  border-radius: 16px;
  padding: 28px;
  box-sizing: border-box;
  margin-top: 15px;
  margin-left: 15px;
}

.review-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  border-bottom: 3px solid #e1ad7e;
  display: inline-block;
}

.review-card__text{
  font-size: 14px;
  line-height: 1.45;
  color: #222;
  margin-bottom: 24px;
}

.review-card__footer{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #777;
}


/* ====== responsive ====== */
/* タブレット */
@media (max-width: 980px){
  .pog-shopgrid__inner{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
  }
}

/* スマホ：2列 */
@media (max-width: 640px){
  .pog-shopgrid__inner{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* SP 2列 */
    gap: 18px 12px;
    padding: 0 12px;
  }

  .pog-card__title{
    font-size: 13.5px;
    min-height: calc(1.55em * 2);
  }

  .pog-card__price{
    font-size: 15px;
  }
	
.review-card {
  background: #fffaf1;
  border: 1px solid #e6d6ce;
  border-radius: 16px;
  padding: 28px;
  box-sizing: border-box;
  margin-top: 15px;
  margin-left: 15px;
}

.review-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  border-bottom: 3px solid #e1ad7e;
  display: inline-block;
}

.review-card__text{
  font-size: 14px;
  line-height: 1.45;
  color: #222;
  margin-bottom: 24px;
}

.review-card__footer{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #777;
}
	
	
}



/* =========================================================
   POG PICKUP (Card)
   - Left: media (centered with equal padding)
   - Right: title + 3 bullets + button
   - Whole card is clickable (a tag)
   - Mobile: stacked
   - Fix: double bottom line (no heavy shadow)
   - Fix: WP auto <p> inside <a>
========================================================= */

/* Section wrapper */
.pog-pickup{
  margin: 18px 0;
}

/* Whole card link */
.pog-pickup__link{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* 左：右 */
  gap: 0;

  border: 1px solid #cfcfcf;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;

  /* 二重線っぽく見えやすい影を排除 */
  box-shadow: none;

  /* aタグの初期 */
  color: inherit;
  text-decoration: none;

  /* タップ時の青いハイライト抑制（任意） */
  -webkit-tap-highlight-color: transparent;

  /* Safariで変なpが噛んでも崩れない保険 */
  position: relative;
}

/* うっすら浮かせたい場合は「影」じゃなく「薄いoutline」を使う */
.pog-pickup__link{
  outline: 1px solid rgba(0,0,0,0.04);
  outline-offset: -1px;
}

/* Hover: ほんの少しだけ反応（任意） */
@media (hover:hover){
  .pog-pickup__link:hover{
    transform: translateY(-1px);
  }
}

/* =========================
   Chrome崩れ対策パッチ
   (Grid/Flex min-width問題)
========================= */
.pog-review__inner{
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
}

.pog-review__inner > *{
  min-width: 0;
	width: 100%;
}

.pog-review__railWrap,
.pog-review__rail{
  min-width: 0;
	width: 97%;
}

.pog-reviewCard__body,
.pog-reviewSummary{
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =========================================
   Left media area (centered + equal padding)
========================================= */
.pog-pickup__media{
  background: #fff;
  display: grid;
  place-items: center;      /* 縦横中央 */
  padding: 28px;            /* 余白を均等に */
  min-height: 320px;        /* 高さ安定 */
}

.pog-pickup__media img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;      /* 切らずに収める */
  border-radius: 10px;      /* 任意 */
}

/* =========================================
   Right body
========================================= */
.pog-pickup__body{
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Title */
.pog-pickup__title{
  font-size: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: .01em;
  margin: 0 !important;
    margin-bottom: 0px;
  font-weight: 800;
}

/* Bullets */
.pog-pickup__points{
  margin: 6px 0 0;
  padding-left: 1.3em;
}

.pog-pickup__points li{
  font-size: 18px;
  line-height: 1.7;
  margin: 10px 0;
  border-bottom: 1px solid #ddd;
}

/* Button */
.pog-pickup__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 92%;
  max-width: 100%;
  padding: 14px 22px;

  border-radius: 3px;
  background: #1d1d1d;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  text-decoration: none;

  /* ボタンとして押しやすい */
  min-height: auto;
}

@media (hover:hover){
  .pog-pickup__btn:hover{
    opacity: .92;
  }
}

/* 「カード全体がa」構造の場合、ボタン見た目だけにしたいなら spanでもOK
   その場合は .pog-pickup__btn を span にしてもこのCSSで動く */

/* =========================================
   WPが勝手に入れる <p> 対策（aタグ直下に入る空pなど）
========================================= */
.pog-pickup__link . > p{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.pog-pickup__link > p:empty{
  display: none !important;
}

/* もし link の中に「本文用のp」を置きたいなら、上のルールが邪魔になるので
   その場合は、本文pにクラスを付けて例外にしてね（例：.pog-pickup__desc） */
.pog-pickup__link > p.pog-pickup__desc{
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}

/* =========================================
   WordPress 自動 <p> 完全対策（pog-pickup）
========================================= */

/* a直下の不要なp */
.pog-pickup__link > p{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

/* section直下の不要なp */
.pog-pickup > p{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

/* 空のpタグ（保険） */
.pog-pickup p:empty{
  display: none !important;
}

/* 本文として使いたいpは例外にする */
.pog-pickup p.pog-pickup__desc{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}


/* =========================================
   Mobile (stacked)
========================================= */
@media (max-width: 768px){
  .pog-pickup__link{
    grid-template-columns: 1fr;
  }

  .pog-pickup__media{
    min-height: 220px;
    padding: 18px;
  }

  .pog-pickup__body{
    padding: 18px 18px 22px;
    gap: 12px;
  }

  .pog-pickup__title{
    font-size: 20px;
  }

  .pog-pickup__points li{
    font-size: 15px;
    margin: 8px 0;
  }

  .pog-pickup__btn{
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
  }
}

/* =========================================================
   OGT Privacy Policy (GanjaBonsai / Organic Gangsta Times)
   Unique class set: .ogt-privacy
========================================================= */
.ogt-privacy{
  --ogt-pp-fg: currentColor;
  --ogt-pp-muted: rgba(0,0,0,.68);
  --ogt-pp-border: rgba(0,0,0,.12);
  --ogt-pp-panel: rgba(0,0,0,.03);
  --ogt-pp-radius: 16px;

  margin: 24px 0;
}

.ogt-privacy__inner{
  border: 1px solid var(--ogt-pp-border);
  border-radius: var(--ogt-pp-radius);
  background: var(--ogt-pp-panel);
  padding: clamp(16px, 2.5vw, 28px);
}

/* Headings */
.ogt-privacy__h2{
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--ogt-pp-border);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
  letter-spacing: .02em;
}

.ogt-privacy__h2:first-of-type{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.ogt-privacy__h3{
  margin: 14px 0 8px;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.45;
  letter-spacing: .01em;
}

/* Paragraph */
.ogt-privacy__p{
  margin: 0 0 12px;
  color: var(--ogt-pp-muted);
  line-height: 1.9;
  font-size: 15.5px;
}

.ogt-privacy__p:last-child{
  margin-bottom: 0;
}

/* Lists */
.ogt-privacy__list{
  margin: 0 0 14px;
  padding: 0 0 0 1.15em;
  color: var(--ogt-pp-muted);
}

.ogt-privacy__li{
  margin: 0 0 8px;
  line-height: 1.85;
}

/* Optional: make the section feel like a "policy document" */
.ogt-privacy__inner{
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Dark mode friendly (if your theme toggles dark via body.dark) */
body.dark .ogt-privacy{
  --ogt-pp-muted: rgba(255,255,255,.74);
  --ogt-pp-border: rgba(255,255,255,.14);
  --ogt-pp-panel: rgba(255,255,255,.06);
}

body.dark .ogt-privacy__inner{
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
}

.sppage-tab{
	margin-top: 0 !important;
}

/* =========================
   OG Sketch Table – Final (with Mobile)
========================= */

.og-sketchtable{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  color:#111;
}

/* WPの勝手なp対策（この中だけ） */
.og-sketchtable p{ margin:0; }
.og-sketchtable p:empty{ display:none !important; }

/* 外枠 */
.og-sketchtable__scroll{
  border:2px solid #d9d9dd;
  border-radius:18px;
  background:#fff;
  overflow-x:auto;                /* 常に横スクロール */
  -webkit-overflow-scrolling:touch;
}

/* 横スクロール前提の最小幅（PC） */
.og-sketchtable__grid{
  min-width:1100px;
}

/* ヘッダー / 行 共通 */
.og-sketchtable__head,
.og-sketchtable__row{
  display:grid;
  grid-template-columns: 260px 180px 1fr 220px 220px;
}

/* セル共通 */
.og-sketchtable__cell {
  padding: 15px 20px;
  border-right: 2px solid #e2e2e6;
  border-bottom: 2px solid #e2e2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 右端の線を消す */
.og-sketchtable__cell:last-child{
  border-right:none;
}

/* 最終行の下線を消す */
.og-sketchtable__row:last-child .og-sketchtable__cell{
  border-bottom:none;
}

/* ヘッダー */
.og-sketchtable__cell--head {
  background: #fafafb;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
}

/* =========================
   左：名前
========================= */
.og-sketchtable__namecell{
  flex-direction:column;
  gap:10px;
  text-align:center;
}

.og-sketchtable__name{
  font-weight:800;
}

/* =========================
   割合
========================= */
.og-sketchtable__ratio{
  flex-direction:column;
  gap:6px;
  text-align:center;
}

.og-sketchtable__pct{
  font-weight:900;
}

.og-sketchtable__split{
  color:#666;
}

/* =========================
   本文
========================= */
.og-sketchtable__text {
  line-height: 1.4;
  text-align: left;
  max-width: 520px;
	font-size: 13px;
}

/* =========================
   タグ（本文とボタンの間）
   ・縦1列
========================= */
.og-sketchtable__tags{
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.og-sketchtable__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:#f0f0f2;
  border:1px solid #e0e0e5;
  font-weight:700;
  white-space:nowrap;
}

/* =========================
   ボタン
========================= */
.og-sketchtable__cta{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 有効ボタン */
.og-sketchtable__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 200px;
  min-height: auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: #5cc468;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

/* 準備中（別クラス運用） */
.og-sketchtable__btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 200px;
  min-height: auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: #b3b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

/* hoverは両方に効かせる */
.og-sketchtable__btn:hover,
.og-sketchtable__btn1:hover{
  opacity:.92;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

/* もし disabled を使う場合（任意） */
.og-sketchtable__btn--disabled{
  background:#efeff1;
  color:#7a7a7a;
  border-color:#e2e2e6;
  box-shadow:none;
  cursor:not-allowed;
  pointer-events:none;
}

.og-sketchtable__tagpill {
  margin-bottom: 5px;
  display: block;
  margin-right: 30px;
}

.small1 {
  text-align: right;
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: bold;
}

.og-sketchtable__cell--content {
  padding: 10px;
  font-size: 14px;
}

/* =========================
   Mobile (スマホ対応)
   - 横スクは維持
   - 列幅を圧縮して見やすく
   - 余白だけ調整（フォントサイズは基本そのまま）
========================= */
@media (max-width: 768px){

  /* 外枠の角丸とスクロール挙動 */
  .og-sketchtable__scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* スマホでの見切れ（＝一部非表示）を自然にする最低幅 */
  .og-sketchtable__grid{
    min-width: 980px;
  }

  /* 列幅を少しだけ圧縮 */
  .og-sketchtable__head,
  .og-sketchtable__row{
    grid-template-columns: 220px 150px 360px 200px 200px;
  }

  /* セル余白を少し詰める（フォントは触らない） */
  .og-sketchtable__cell{
    padding: 12px 14px;
  }

  /* 本文エリアの最大幅だけ小さく（折り返し綺麗に） */
  .og-sketchtable__text{
    max-width: 360px;
  }

  /* タグ：スマホでは幅が暴れないように */
  .og-sketchtable__tags{
    align-items:flex-start;
    gap:10px;
  }
  .og-sketchtable__tag{
    padding: 9px 14px;
  }

  /* ボタン：スマホは少しだけ横幅を確保 */
  .og-sketchtable__btn,
  .og-sketchtable__btn1{
    width: 88%;
    max-width: 190px;
  }
}


/* =========================
   OGX Latest Rail (Unique)
========================= */

.ogx-latestRail {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 0 18px;
  margin-top: 30px;
}

/* 見出し行 */
.ogx-latestRail__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ogx-latestRail__title{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  color:#111;
}

.ogx-latestRail__more{
  appearance:none;
  border:1px solid #d9d9dd;
  background:#fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor:pointer;
}

/* レール本体 */
.ogx-latestRail__wrap{
  position: relative;
}

/* “一部非表示”の肝：overflow hidden */
.ogx-latestRail__viewport{
  overflow: hidden;
  border-radius: 14px;
  outline: none;
}

/* トラック：横並び */
.ogx-latestRail__track{
  display: flex;
  gap: 26px;
  align-items: stretch;
  padding: 8px 8px 18px;
  margin: 10px 0;
  scroll-behavior: smooth;

  overflow-x: auto;           /* 実際のスクロールはここ */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
}
.ogx-latestRail__track::-webkit-scrollbar{ display:none; }

/* カード */
.ogx-latestCard{
  flex: 0 0 320px;            /* 見切れを作りやすい固定幅 */
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  overflow: hidden;
}

/* サムネ */
.ogx-latestCard__thumb{
  position: relative;
  background:#f2f2f2;
}
.ogx-latestCard__img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
}

/* 本文 */
.ogx-latestCard__body{
  padding: 14px 16px 16px;
}

.ogx-latestCard__headline{
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 800;
  color:#111;
}

/* 日付/タグ：ボタン型（リンク不要） */
.ogx-latestChip{
  appearance: none;
  border: 1px solid #e5e5ea;
  background: #f6f6f8;
  color: #111;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.ogx-latestChip--date{
  border-color: #ff3b30;
  color: #ff3b30;
  background: #fff;
}

/* 右側トグル */
.ogx-latestCard__row{
  display:flex;
  justify-content:flex-end;
  margin-top: 20px;
}

.ogx-latestCard__toggle{
  appearance:none;
  border: 1px solid #d9d9dd;
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.ogx-latestCard__chev{
  display:inline-block;
  transition: transform .18s ease;
}
.ogx-latestCard__toggle[aria-expanded="true"] .ogx-latestCard__chev{
  transform: rotate(90deg);
}

/* 隠しタグ */
.ogx-latestCard__hidden{
  margin-top: 12px;
}
.ogx-latestCard__tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #eeeef2;
}

/* =========================
   Hoverで矢印表示（PREDGEっぽい）
   - 重要：wrap hover / wrap focus-within / viewport focus-within で出す
   - z-index を上げる（フェードより前）
========================= */
.ogx-latestRail__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  z-index: 20;              /* ← フェードより上 */
  opacity: 0;               /* 初期は隠す */
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.ogx-latestRail__arrowIcon{
  font-size: 34px;
  line-height: 1;
  color:#111;
}

.ogx-latestRail__arrow--right{ right: -6px; }
.ogx-latestRail__arrow--left{ left: -6px; }

/* ✅表示トリガ（ここが修正ポイント） */
.ogx-latestRail__wrap:hover .ogx-latestRail__arrow,
.ogx-latestRail__wrap:focus-within .ogx-latestRail__arrow,
.ogx-latestRail__viewport:focus-within ~ .ogx-latestRail__arrow{
  opacity: 1;
  pointer-events: auto;
}

/* hover時の微移動（見た目だけ） */
.ogx-latestRail__wrap:hover .ogx-latestRail__arrow--right,
.ogx-latestRail__wrap:focus-within .ogx-latestRail__arrow--right{
  transform: translateY(-50%) translateX(-2px);
}
.ogx-latestRail__wrap:hover .ogx-latestRail__arrow--left,
.ogx-latestRail__wrap:focus-within .ogx-latestRail__arrow--left{
  transform: translateY(-50%) translateX(2px);
}

/* =========================
   見切れ感を出すフェード
   - クリックを邪魔しない
   - z-indexは矢印より下
========================= */
.ogx-latestRail__fade{
  position:absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events:none;
  opacity: .95;
  z-index: 5;
}
.ogx-latestRail__fade--right{
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(245,245,245,1));
}
.ogx-latestRail__fade--left{
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(245,245,245,1));
  opacity: 0; /* 初期は左フェード薄め（必要なら1に） */
}

/* =========================
   Mobile
   - タッチ環境は hover が効かないので、
     「ホバーできない端末では矢印を常時表示」に寄せる
========================= */
@media (max-width: 768px){
  .ogx-latestRail{
    padding: 6px 0 14px;
  }

  .ogx-latestRail__track{
    gap: 16px;
    padding: 6px 6px 14px;
  }

  .ogx-latestCard{
    flex-basis: 270px;
  }

  .ogx-latestCard__img{
    height: 170px;
  }

  .ogx-latestRail__fade{
    width: 60px;
  }
}

/* ✅hoverできない端末（スマホ/タブレット）は矢印を表示する */
@media (hover: none){
  .ogx-latestRail__arrow{
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================
   pocketog v1 article row list
   (super-unique class names)
========================= */
.pocketog__v1__articleRowList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* card */
.pocketog__v1__articleRowCard{
  display:grid;
  grid-template-columns: 42% 58%;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* left image */
.pocketog__v1__articleRowThumb{
  position:relative;
  background:#f3f3f3;
  min-height:240px;
  overflow:hidden;
}

.pocketog__v1__articleRowImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .22s ease;
}

/* right body */
.pocketog__v1__articleRowBody{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 18px 14px;
  min-width:0; /* 重要：Chromeでのはみ出し/崩れ対策 */
}

/* meta */
.pocketog__v1__articleRowMeta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

/* pills */
.pocketog__v1__articleRowPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:#f2f2f2;
  border:1px solid #e5e5e5;
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:#111;
}

.pocketog__v1__articleRowNew{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:#eaf3e6;
  border:1px solid #d6e8cf;
  font-size:13px;
  font-weight:800;
  line-height:1;
  color:#2a6a2f;
}

/* title */
.pocketog__v1__articleRowTitle{
  margin:0;
  font-size:20px;
  line-height:1.45;
  font-weight:800;
  letter-spacing:.01em;
  min-width:0;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA bottom */
.pocketog__v1__articleRowCta{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #ededed;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  font-weight:700;
}

.pocketog__v1__articleRowCtaText{
  color:#111;
}

.pocketog__v1__articleRowCtaArrow{
  color:#111;
  opacity:.9;
}

/* hover */
.pocketog__v1__articleRowCard:hover{
  border-color:#dedede;
}

.pocketog__v1__articleRowCard:hover .pocketog__v1__articleRowImg{
  transform:scale(1.03);
}

/* =========================
   Responsive
========================= */
@media (max-width: 820px){
  .pocketog__v1__articleRowCard{
    grid-template-columns:1fr;
  }

  .pocketog__v1__articleRowThumb{
    min-height:220px;
  }

  .pocketog__v1__articleRowBody{
    padding:16px 16px 12px;
  }

  .pocketog__v1__articleRowTitle{
    font-size:18px;
    -webkit-line-clamp:4;
  }
}

@media (max-width: 480px){
  .pocketog__v1__articleRowList{
    gap:14px;
  }

  .pocketog__v1__articleRowCard{
    border-radius:18px;
  }

  .pocketog__v1__articleRowThumb{
    min-height:200px;
  }

  .pocketog__v1__articleRowPill,
  .pocketog__v1__articleRowNew{
    font-size:12.5px;
    padding:6px 12px;
  }
}



/* =========================================
   OGX Latest Rail (layout like screenshot)
========================================= */

.ogx-latestRail{
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 0 22px;
}

/* head: 左ロゴ/タイトル + 右上ボタン */
.ogx-latestRail__head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;        /* ←右上に揃う */
  gap: 18px;
  padding: 0 10px 14px;
}

.ogx-latestRail__headText{
  min-width: 0;
}

.ogx-latestRail__label{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .18em;
  color: #b79a6b;
}

.ogx-latestRail__title{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: #2b2013;
  line-height: 1.2;
}

.ogx-latestRail__underline{
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 10px;
  background: #b79a6b;
  border-radius: 999px;
  opacity: .75;
}

/* 右上ボタン（スクショの位置） */
.ogx-latestRail__more{
  justify-self: end;
  align-self: start;
  text-decoration: none;
  color: #111;
	margin-top: 20px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ogx-latestRail__more:hover{
  background: #fafafa;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* rail wrap */
.ogx-latestRail__wrap{
  position: relative;
}

/* “見切れ”を作る */
.ogx-latestRail__viewport{
  overflow: hidden;
  border-radius: 18px;
  outline: none;
}

/* track */
.ogx-latestRail__track{
  display:flex;
  gap: 26px;
  padding: 10px 10px 22px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.ogx-latestRail__track::-webkit-scrollbar{ display:none; }

/* cards */
.ogx-latestCard{
  flex: 0 0 420px;           /* スクショっぽく横長寄り */
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  overflow:hidden;
}

.ogx-latestCard__thumb{ background:#eee; }
.ogx-latestCard__img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.ogx-latestCard__body{ padding: 16px 18px 18px; }
.ogx-latestCard__headline{
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  color:#111;
}

/* chip */
.ogx-latestChip{
  appearance:none;
  border-radius:999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid #e3e3e8;
  background: #f6f6f8;
  white-space:nowrap;
}
.ogx-latestChip--date{
  border-color:#ff3b30;
  background:#fff;
  color:#ff3b30;
}

/* CTA */
.ogx-latestCard__row{
  display:flex;
  justify-content:flex-end;
  margin-top: 20px;
}

.ogx-latestCard__cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background:#fff;
  text-decoration:none;
  color:#111;
  font-size: 13px;
  font-weight: 800;
}
.ogx-latestCard__chev{ font-size: 18px; }

/* arrows (hover) */
.ogx-latestRail__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.95);
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  opacity: 0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 3;
}
.ogx-latestRail__arrowIcon{
  font-size: 34px;
  line-height: 1;
  color:#111;
}
.ogx-latestRail__arrow--right{ right: -8px; }
.ogx-latestRail__arrow--left{ left: -8px; }

.ogx-latestRail__wrap:hover .ogx-latestRail__arrow{
  opacity: 1;
  pointer-events:auto;
}

/* fades */
.ogx-latestRail__fade{
  position:absolute;
  top:0;
  bottom:0;
  width: 110px;
  pointer-events:none;
  z-index: 2;
}
.ogx-latestRail__fade--right{
  right:0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(245,245,245,1));
}
.ogx-latestRail__fade--left{
  left:0;
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(245,245,245,1));
  opacity: .25;
}

/* =========================
   Mobile
========================= */
@media (max-width: 768px){
  .ogx-latestRail{ padding: 0 0 18px; }

  .ogx-latestRail__head{
    grid-template-columns: 1fr auto;
    padding: 0 10px 12px;
  }

  .ogx-latestRail__title{ font-size: 22px; }

  .ogx-latestCard{
    flex-basis: 78vw;      /* 3枚目が見切れる */
    max-width: 420px;
  }

  .ogx-latestCard__img{ height: 180px; }

  .ogx-latestRail__fade{ width: 70px; }

  /* スマホは矢印不要なら */
  .ogx-latestRail__arrow{ display:none; }
}


/* =========================
   OGX New List (Unique)
   - Mobile first
========================= */
.ogx-newlist3{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px;
}

/* Header */
.ogx-newlist3__head{
  margin-bottom: 14px;
}
.ogx-newlist3__headTitle{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .01em;
  color: #111;
}

/* List */
.ogx-newlist3__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* Card */
.ogx-newlist3__item{
  border-radius: 22px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Link layout: left 80% / right 20% */
.ogx-newlist3__link{
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  padding: 18px 18px;
  gap: 12px;
}

/* Left */
.ogx-newlist3__left{
  flex: 0 0 80%;
  min-width: 0; /* important for truncation */
}

/* Title bigger */
.ogx-newlist3__title{
  margin: 0;
  font-size: 20px;   /* bigger title */
  font-weight: 900;
  line-height: 1.35;
  color: #111;

  /* optional: 2 lines clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tag row */
.ogx-newlist3__tags{
  margin-top: 12px;
}

/* Tag width auto */
.ogx-newlist3__tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;               /* auto width */
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #e5e5ea;
  background: #f6f6f8;
  font-size: 13px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

/* Right (20%) */
.ogx-newlist3__right{
  flex: 0 0 18%;
  min-width: 60px;           /* prevents “disappearing” */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: visible;
}

/* Chevron */
.ogx-newlist3__chev{
  display: inline-block !important;
  font-size: 48px;
  line-height: 1;
  color: #111;

  /* force visible against theme overrides */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover / tap feel */
.ogx-newlist3__link:active{
  transform: scale(.995);
}
@media (hover:hover){
  .ogx-newlist3__item:hover{
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
  }
}

/* =========================
   Desktop tweaks
========================= */
@media (min-width: 860px){
  .ogx-newlist3{
    padding: 22px 18px;
  }
  .ogx-newlist3__headTitle{
    font-size: 30px;
  }
  .ogx-newlist3__title{
    font-size: 22px;
  }
  .ogx-newlist3__chev{
    font-size: 56px;
  }
}

/* エリア別チップ（背景色＋縁枠タイプ） */
.pocketog__v1__areaChips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:20px 0 26px;
  padding:14px 16px;
  background:#faf8f5;              /* 薄い背景色 */
  border:1px solid #e6dfd6;         /* コンテナ縁 */
  border-radius:14px;
}

.pocketog__v1__areaChip{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border:1px solid #d8cfc4;         /* チップ縁 */
  border-radius:999px;
  background:#fff;
  color:#2b2b2b;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:background .12s ease, border-color .12s ease;
}

.pocketog__v1__areaChip:hover{
  background:#f4efe9;               /* ほんのり反応 */
  border-color:#c9bfb2;
}

/* 選択中 */
.pocketog__v1__areaChip.is-active{
  background:#efe7dd;
  border-color:#bfae9a;
  color:#1f1f1f;
}

/* 投稿なしエリア（無効チップ） */
.pocketog__v1__areaChip.is-disabled{
  background:#f5f3ef;        /* さらに薄い背景 */
  border-color:#e3ddd4;
  color:#a8a39a;
  cursor:default;
  pointer-events:none;       /* 念のため */
}

/* hover反応を完全に殺す */
.pocketog__v1__areaChip.is-disabled:hover{
  background:#f5f3ef;
  border-color:#e3ddd4;
}


/* スマホ調整 */
@media (max-width: 600px){
  .pocketog__v1__areaChips{
    gap:10px;
    padding:12px 12px;
    margin:16px 0 22px;
  }
  .pocketog__v1__areaChip{
    font-size:13px;
    padding:7px 12px;
  }
}

.border-ogx{
	border: 8px solid #fbc176;
}


.ogx-cbdLegalNote__actions{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap;          /* まずは1列を優先 */
}

.ogx-cbdLegalNote__btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;

  color: #1f2a24;
  background: #eaf2ec;        /* 目に優しい淡いグリーン */
  border: 1px solid #d6e4db;

  white-space: nowrap;        /* ボタン内で改行させない */
  min-width: 0;               /* flexで詰められるように */
  flex: 1 1 auto;             /* 均等固定ではなく、自然に伸び縮み */
}

.ogx-cbdLegalNote__btn--ghost{
  background: #ffffff;
  border: 1px solid #e1e7e3;
}

.ogx-cbdLegalNote__btn:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.ogx-cbdLegalNote__btnIcon{
  font-size: 18px;
  line-height: 1;
  opacity: .8;
}

/* 画面が狭いときだけ綺麗に折り返す（1列に収まらない時の保険） */
@media (max-width: 520px){
  .ogx-cbdLegalNote__actions{
    flex-wrap: wrap;
  }
  .ogx-cbdLegalNote__btn{
    width: 100%;
  }
}

/* ===============================
   OGX CBD Legal Note (Calm)
================================ */

.ogxx-ignore{} /* 他CSSとの誤結合防止用ダミー */

.ogx-cbdLegalNote{
  max-width: 880px;
  margin: 0 auto 32px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
}

.ogx-cbdLegalNote__card{
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e6ebe7;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.ogx-cbdLegalNote__head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 18px 14px;
}

.ogx-cbdLegalNote__icon{
  width: 40px;
  height: 40px;
  fill: #6b8f7a; /* 落ち着いたグリーン */
}

.ogx-cbdLegalNote__icon path:last-child{
  fill: #ffffff; /* チェック */
}

.ogx-cbdLegalNote__title{
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #2f4f3e; /* ダークオリーブ */
  text-align: center;
  line-height: 1.2;
  letter-spacing: .02em;
}

.ogx-cbdLegalNote__body{
  padding: 0px 22px 24px;
}

.ogx-cbdLegalNote__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .01em;
  color: #1f2a24;
}

.ogx-cbdLegalNote__note{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4f7f5;
  border: 1px solid #e1e7e3;
  font-size: 13px;
  line-height: 1.7;
  color: #556a5f;
}

@media (max-width: 520px){
  .ogx-cbdLegalNote__body{
    padding: 0 10% 10%
  }
    .ogx-cbdLegalNote__text {
        font-size: 1em;
        line-height: 1.2em;
    }
	
	.ogx-cbdLegalNote__title{
		font-size: 1em;
	}
}

/* =========================
   CBD Archive CTA (Full Width)
========================= */
.ogx-cbd-archive-cta{
  width: 100%;
  margin: 18px 0 28px;
  padding: 0 16px;
  box-sizing: border-box;
}

.ogx-cbd-archive-cta__btn{
  width: 97.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 2px solid #c9a96a;
  color: #3b2a18;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ogx-cbd-archive-cta__btn:hover{
  background: #fbf5ea;
  border-color: #c9a96a;
  color: #2f2416;
}

.ogx-cbd-archive-cta__btn:active{
  background: #f6ecd8;
}

.ogx-cbd-archive-cta__icon{
  font-size: 22px;
  line-height: 1;
  opacity: .9;
}

/* mobile */
@media (max-width: 768px){
  .ogx-cbd-archive-cta{
    margin: 14px 0 22px;
  }
  .ogx-cbd-archive-cta__btn{
    padding: 20px 22px;
    font-size: 17px;
  }
}



/* =========================
   OGX SKU Card
========================= */
.ogx-skuCard{
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: #ffffff;
  box-sizing: border-box;
}

/* top layout */
.ogx-skuCard__top{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: start;
}

/* image box */
.ogx-skuCard__media{
  width: 140px;
  aspect-ratio: 1 / 1;
  border: 2px solid #c9a96a;
  border-radius: 10px;
  background: #fafafa;
  display: grid;
  place-items: center;
}

.ogx-skuCard__mediaText{
  font-weight: 800;
  color: #1b1b1b;
  letter-spacing: .06em;
}

/* info */
.ogx-skuCard__info{
  min-width: 0;
  margin-left: 20px;
}

.ogx-skuCard__title{
  margin: 2px 0 8px;
  font-size: 20px;
  font-weight: 900;
  color: #000;
}

.ogx-skuCard__price{
  font-size: 14px;
  color: #6c6c6c;
}

.ogx-skuCard__desc{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #222;
  background: #f4efea;
  padding: 10px;
  border-radius: 6px;
}

/* buttons */
.ogx-skuCard__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.ogx-skuCard__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 2px solid #ebe0c9;
  border-radius: 10px;
  background: #f7e9de;
  color: #111;
  font-weight: normal;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  font-size: 13px;
}

.ogx-skuCard__btn:hover{
  background: #fbf5ea;
  color: #2f2416;
}

.ogx-skuCard__btn:active{
  background: #f6ecd8;
}


/* =========================
   SKU Grid (2 columns)
========================= */
.ogx-skuGrid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 40px;
}

/* =========================
   Mobile
========================= */
@media (max-width: 640px){
  .ogx-skuGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ogx-skuCard{
    padding: 14px;
    border-radius: 12px;
  }

  .ogx-skuCard__top{
    grid-template-columns: 1fr;
  }

  .ogx-skuCard__media{
    width: 100%;
    max-width: 220px;
  }

  .ogx-skuCard__actions{
    grid-template-columns: 1fr;
  }

  .ogx-skuCard__btn{
    height: 50px;
    border-radius: 12px;
  }
}

/* =========================
   SKU 350 Card (No heading tags)
   - Image smaller / Detail wider
========================= */

/* wrapper: fit inside 350px (or parent width) */
.ogx-sku350-wrap{
  width: 100%;
}

/* card */
.ogx-sku350-card{
  width: 100%;
  padding: 4.5%;
  border-radius: 14px;
  background: #ffffff;
  box-sizing: border-box;
}

/* top layout (image smaller, detail wider) */
.ogx-sku350-top{
  display: grid;
  grid-template-columns: 26% 1fr; /* ← 写真を小さく / 右を広く */
  gap: 4%;
  align-items: start;
}

/* image box */
.ogx-sku350-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #c9a96a;
  border-radius: 10px;
  background: #fafafa;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.ogx-sku350-mediaText{
  font-weight: 800;
  font-size: 13px;
  color: #1b1b1b;
  letter-spacing: .06em;
}

/* info */
.ogx-sku350-info{
  min-width: 0;
}

.ogx-sku350-title{
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
  color: #000;
  line-height: 1.25;
}

.ogx-sku350-price{
  font-size: 13px;
  color: #6c6c6c;
}

.ogx-sku350-desc{
  margin-top: 10px;
  font-size: 11.5px !important;
  line-height: 1.65;
  color: #222;
  background: #f4efea;
  padding: 8px;
  border-radius: 6px;
}

/* buttons */
.ogx-sku350-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5%;
  margin-top: 12px;
}

.ogx-sku350-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 100%;
  border: 2px solid #ebe0c9;
  border-radius: 10px;
  background: #f7e9de;
  color: #111;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ogx-sku350-btn:hover{
  background: #fbf5ea;
  color: #2f2416;
}

.ogx-sku350-btn:active{
  background: #f6ecd8;
}

/* =========================
   Mobile
========================= */
@media (max-width: 420px){
  .ogx-sku350-card{
    padding: 6%;
  }

  .ogx-sku350-top{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ogx-sku350-media{
    width: 100%;
    max-width: 220px;
  }

  .ogx-sku350-actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ogx-sku350-btn{
    height: 46px;
    font-size: 13px;
    border-radius: 12px;
  }
}






































@media screen and (max-width: 500px) {
    .sma {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    .single-h3 {
        padding: 0.25em 0.5em;
        color: #000000;
        background: transparent;
        border-left: solid 5px #4f4f4f;
        font-size: 1.1em !important;
        margin-bottom: 5%;
        font-weight: bold;
    }

    #header a {
        color: #000000;
        text-decoration: none;
        overflow: hidden;
        display: inline-block;
        border-bottom: none;
        padding-bottom: 0px;
    }

    #header a:hover {
        text-decoration: underline;
        transition: 0.3s ease-in-out;
    }

    #header {
        overflow: hidden;
    }

    main a {
        color: #000;
		overflow-wrap: anywhere;
    }

    .main-left a {
        text-decoration: none;
    }

    .main-left a:hover {
        text-decoration: underline;
    }

    main {
        width: 90%;
        margin: 25% auto 0;
        overflow: visible;
    }

    .main-left {
        float: none;
        width: 100%;
        position: relative;
        height: auto;
    }

    .header-h1 {
        font-size: 7px;
        margin-bottom: 5px;
    }

    .pick {
        position: absolute;
        top: -40px;
        width: 120px !important;
        left: -40px;
        z-index: 10;
    }

    .main-left img {
        width: 100%;
        height: auto;
    }

    .main-left h2 {
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1.2em;
        margin-top: 2%;
    }

    .main-left a:hover img {
        opacity: 0.8;
        transition: 0.3s ease-in-out;
    }

    .main-right {
        float: none;
        width: 100%;
        padding: 1%;
        border: 1px solid #ddd;
        height: 250px;
        overflow: scroll;
        margin: 6% 0 3%;
    }

    .main-right img {
        width: 100%;
        height: auto;
    }

    .main-right-li {
        margin: 1% auto;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        padding-bottom: 1%;
        padding-top: 1%;
    }

    .main-right-li:last-child {
        border-bottom: none;
    }

    .main-right-li-left {
        float: left;
        width: 35%;
    }

    .main-right-li-left img {
        width: 100%;
        height: auto;
    }

    .main-right-li-right {
        width: 60%;
        float: right;
    }

    .main-right ul a:hover {
        overflow: hidden;
        background: #ddd;
    }

    .main-right ul a {
        padding: 1%;
        overflow: hidden;
        display: block;
    }

    .main-right-li-right h3 {
        font-size: .75em;
        line-height: 1.3em;
    }

    .tabs {
        margin-top: 50px;
        padding-bottom: 0;
        background-color: #fff;
        width: 100%;
        margin: 5% auto 0 auto;
    }

    .tab_item {
        width: calc(100% / 3);
        height: 50px;
        border-bottom: 3px solid #bdbdbd;
        background-color: #d9d9d9;
        line-height: 50px;
        font-size: .7em;
        text-align: center;
        color: #565656;
        display: block;
        float: left;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .tab_item:hover {
        opacity: 0.75;
    }

    .tab_item1 {
        width: calc(100%/2);
        height: 50px;
        border-bottom: 3px solid #bdbdbd;
        background-color: #d9d9d9;
        line-height: 50px;
        font-size: .7em;
        text-align: center;
        color: #565656;
        display: block;
        float: left;
        text-align: center;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .tab_item1:hover {
        opacity: 0.75;
    }

    input[name="tab_item"] {
        display: none;
    }

    .tab_content {
        padding: 3% 0;
        clear: both;
        overflow: hidden;
        padding-top: 10%;
    }

    #all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content {
        display: block;
    }

    .tabs input:checked + .tab_item {
        background-color: #7d7d7d;
        color: #fff;
    }

    .index-left {
        float: none;
        width: 96%;
        padding: 2%;
    }

    .index-right {
        float: none;
        width: 100%;
        margin-top: 10%;
    }

    .index-right h3 {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #5c5c5c;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-left: 5px solid #5c5c5c;
        padding-left: 10px;
    }

    .index-right p {
        font-size: 16px;
    }

    .index-right ul {
        margin: 0;
    }

    .index-right1 ul a {
        padding: 4%;
        overflow: hidden;
        display: block;
        text-align: center;
        text-decoration: none;
    }

    .index-right1 ul a:hover {
        overflow: hidden;
        background: #ddd;
        transition: 0.3s ease-in-out;
    }

    .index-right li {
        margin: 0;
        margin-bottom: 20px;
    }

    .index-left-left {
        float: left;
        width: 35%;
        height: auto;
    }

    .index-left-left img {
        width: 100%;
        height: auto;
    }

    .index-left-right {
        float: right;
        width: 58%;
        font-size: .85em;
        line-height: 1.2em;
        margin-right: 2%;
    }

    .index-left li {
        margin-bottom: 20px;
        overflow: hidden;
    }

    .pro {
        margin: 0;
        border: 1px solid #ddd;
        margin-bottom: 40px;
        padding: 6%;
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }

    .pro img {
        width: 40%;
        height: auto;
        margin: 0 auto;
        display: block;
        border-radius: 100px;
    }

    .pro-name {
        font-size: 1em !important;
        margin-bottom: 3%;
    }

    .pro-name span {
        font-size: 14px !important;
    }

    .pro-p {
        font-size: .7em !important;
        line-height: 1.2em;
    }

    .pagination .nav-links {
        text-align: center;
    }

    .pagination .nav-links .current {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 8px;
        border: 1px solid #7d7d7d;
        border-radius: 50%;
        background: #7d7d7d;
        color: #fff;
        font-size: 1.4rem;
        line-height: 30px;
    }

    .pagination .nav-links .dots {
        display: inline-block;
        margin: 8px;
        font-size: 1.2rem;
        font-weight: bold;
        line-height: 30px;
    }

    .pagination .nav-links a.page-numbers {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 8px;
        border: 1px solid #7d7d7d;
        border-radius: 50%;
        font-size: 1.2rem;
        text-decoration: none;
        line-height: 30px;
    }

    .pagination .nav-links a.page-numbers:hover {
        background: #7d7d7d;
        color: #fff;
        transition: all .3s;
    }

    .pagination .nav-links a.prev.page-numbers, .pagination .nav-links a.next.page-numbers {
        width: auto;
        padding-right: 6px;
        padding-left: 6px;
        border: 0;
        border-bottom: 1px solid #7d7d7d;
        border-radius: 0;
        background: transparent;
    }

    .pagination .nav-links a.prev.page-numbers:hover, .pagination .nav-links a.next.page-numbers:hover {
        background: #7d7d7d;
        color: #fff;
    }

    .blog-list {
        overflow: hidden;
    }

    .blog-list ul {
        overflow: hidden;
    }

    .blog-list li {
        margin-bottom: 0;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
    }
	
    .blog-list-left {
        float: left;
        width: 22%;
    }

    .blog-list-left img {
        width: 100%;
        height: auto;
    }

    .blog-list-right {
        float: right;
        width: 75%;
        font-size: .9em;
        line-height: 1.4em;
        text-align: left;
    }

    .point {
        margin: 0;
    }

    .point li {
        float: left;
        width: 49%;
        padding: 0.5%;
        text-align: center;
    }

    .point img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .point a {
        padding: 10%;
        overflow: hidden;
        display: block;
        text-align: center;
        text-decoration: none;
    }

    .point a:hover {
        overflow: hidden;
        background: #ddd;
        transition: 0.3s ease-in-out;
    }

    .button {
        position: fixed;
        right: 0;
        bottom: 0;
        font-size: 20px;
        color: #fff;
        background: #383838;
        padding: 13px;
        cursor: pointer;
        transition: .3s;
        opacity: 0;
        visibility: hidden;
        border-radius: 100px;
        margin-right: 2%;
        margin-bottom: 1%;
    }

    .active {
        opacity: 1;
        visibility: visible;
    }

    .eye img {
        width: 100% !important;
        height: auto;
        margin: 10px auto 40px;
        display: block;
    }

    .copyright {
        font-size: 10px;
        text-align: center;
        padding-bottom: 30px;
    }

    .breadcrumbs {
        font-size: .7em;
        line-height: 1.7em;
        margin: 5% 3%;
    }

    .single h1 {
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1.2em;
        margin-bottom: 10px;
    }

    .date {
        font-size: .6em;
    }

    .single-box p {
        font-size: 1em;
        margin-bottom: 4%;
        line-height: 1.6em;
    }

    .date-single {
        font-size: .5em !important;
        margin-bottom: 0 !important;
        line-height: 1.8em !important;
        margin-top: 4% !important;
    }

    .single-box strong {
        background: linear-gradient(transparent 60%, #f5bf25 60%);
        font-weight: bold;
        font-size: 1.1em;
    }
	
	.single iframe{
		width: 100%;
		height: auto;
	}

/* ==============================
   single-box 見出し（スマホ用）
   h2：大見出し / h3：中見出し / h4：小見出し
============================== */

/* h2：セクションタイトル */
.single-box h2 {
  position: relative;
  padding: 1.1em 1.6em;
  text-align: center;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.5;
  margin: 12% 0 9%;
}

/* 角のライン（スマホなので少し小さめ） */
.single-box h2::before,
.single-box h2::after {
  position: absolute;
  content: "";
  width: 36px;
  height: 36px;
}

.single-box h2::after {
  top: 0;
  left: 0;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.single-box h2::before {
  right: 0;
  bottom: 0;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

/* h3：ブロックの見出し */
.single-box h3 {
  display: inline-block;
  font-size: 1.0em;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 9%;
  margin-bottom: 7%;
  padding-bottom: 3%;
  border-bottom: 2px dashed #222;
}

/* h4：テキスト中の小見出し */
.single-box h4 {
  position: relative;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.6;
  margin: 7% 0 4%;
  padding-left: 10px;
  color: #111;
}

/* 左の縦ライン（細く・短め） */
.single-box h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 2px;
  border-radius: 999px;
  background: #000;
  opacity: 0.85;
}

/* h3→h4 が続くときだけ、少し詰める */
.single-box h3 + h4 {
  margin-top: 4%;
}

	
	
	
    .single hr {
        border: 1px solid #ddd;
    }

    .button-container {
        text-align: center;
    }

    .single_btn {
        display: inline-block;
        width: auto;
        line-height: 60px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        background-color: #1B85FB;
        padding: 0 10%;
        margin: 5% 0;
        font-size: .85em;
    }

    .single_btn a {
        display: block;
        width: 100%;
        line-height: 60px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        background-color: #1B85FB;
        position: relative;
    }

    .single_btn a::before {
        border-right: 2px solid #fff;
        border-top: 2px solid #fff;
        bottom: 0;
        content: "";
        height: 7px;
        width: 7px;
        margin: auto;
        position: absolute;
        right: -27px;
        top: 0;
        transform: rotate(45deg);
        transition: right .3s;
        display: none;
    }

    .single_btn a:hover::before {
        right: -35px;
    }

    .related-post {
        width: 100%;
        float: left;
        margin: 2%;
        font-size: 15px;
    }

    ul.cp_list {
        position: relative;
        padding: 5px;
        border: solid 1px #000000;
        list-style-type: none;
        width: 100%;
        margin: 30px 0;
        display: block;
    }

    ul.cp_list li {
        display: flex;
        padding: 5px 10px 5px 20px;
        border-bottom: 1px dashed #000000;
    }

    ul.cp_list li::before {
        position: absolute;
        left: 5px;
        content: "\002713";
        font-weight: bold;
        color: #AB47BC;
    }

    ul.cp_list li:last-of-type {
        border-bottom: none;
    }

    .post-re {
        overflow: hidden;
        width: 90%;
        border: 1px solid #ddd;
        padding: 20px;
        margin: 5% auto;
    }

    .post-re-left {
        float: none;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 5%;
    }

    .post-re-left img {
        width: 100%;
        height: auto;
    }

    .post-re-right {
        float: none;
        width: 100%;
        font-size: 18px;
    }

    .post-re-right p {
        font-size: 16px;
    }

    .related-post-wrap {
        margin: 2em 0 0;
    }

    .related-post a {
        display: block;
        text-decoration: none;
        color: #000;
    }

    .related-post a:hover {
        opacity: .6;
    }

    .related-post img {
        display: block;
        width: 100%;
        aspect-ratio: 3/2;
        margin-bottom: .5em;
        object-fit: cover;
        height: 100px;
    }

    .related-post .text-wrap {
        font-size: .75em;
        font-weight: normal;
        line-height: 1.1em;
    }

    .header-menu {
        height: fit-content;
        background-color: rgba(255, 255, 255, 1);
        width: 100%;
        z-index: 1000;
    }

    .header-inner {
        padding: 10% 5% 4%;
    }

    /* ---------------------------------------------- */
    /* ------------------------- */
    #header-hamburger {
        background: #656565;
        cursor: pointer;
        width: 40px;
        aspect-ratio: 1/1;
        margin-left: auto;
        position: relative;
        z-index: 10;
        top: 5px;
    }

    #header-hamburger span {
        display: inline-block;
        background: #fff;
        width: 50%;
        height: 2px;
        transition: all .4s;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #header-hamburger span:nth-of-type(1) {
        top: 30%;
    }

    #header-hamburger span:nth-of-type(2) {
        top: 50%;
    }

    #header-hamburger span:nth-of-type(3) {
        top: 70%;
    }

    #header-hamburger.active span:nth-of-type(1) {
        top: 50%;
        left: 25%;
        transform: rotate(-45deg);
        width: 50%;
    }

    #header-hamburger.active span:nth-of-type(2) {
        opacity: 0;
    }

    #header-hamburger.active span:nth-of-type(3) {
        top: 50%;
        left: 25%;
        transform: rotate(45deg);
        width: 50%;
    }

    #hamburger-window {
        transition: 0.3s;
        text-align: center;
        visibility: hidden;
        position: fixed;
        top: 85px;
        right: -100vw;
        width: 100%;
        height: calc(100vh - 50px);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        background: #fff;
        z-index: 11;
    }

    #hamburger-window.open {
        visibility: visible;
        right: 0;
        z-index: 10;
        margin-top: -1%;
    }

    .hamburger-window__link {
        display: block;
        margin: 0 auto;
        width: 100%;
        position: relative;
        border-bottom: 1px solid #ddd;
        padding-bottom: 30px;
        overflow: hidden;
    }

    .hamburger-window__link:hover {
        background-color: #ccc;
    }

    .menu-link {
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding: 7% 0;
        color: #333;
        text-align: center;
        display: block;
        text-decoration: none;
    }

    .hamburger-window__link::after {
        font-weight: 900;
        font-family: "Font Awesome 6 Free";
        display: inline-block;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        aspect-ratio: 1/1;
        color: #333;
    }

    .hamburger-window__title {
        color: #333;
    }

    .last td:last-child {
        border-bottom: solid 1px #ccc;
        width: 100%;
    }

    .tbl-r02 {
        width: 80%;
    }

    .tbl-r02 th, .tbl-r02 td {
        border-bottom: none;
        display: block;
        width: 100%;
    }

    .single-price-box {
        width: 90%;
        overflow: hidden;
        margin: 3% auto;
        border: solid 1px #ffe5cb;
        padding: 3%;
        background: #fff8f1;
        padding-top: 0;
        padding-bottom: 2%;
    }

    .single-price-box a {
        text-decoration: none;
    }

    .single-price-box a:hover {
        text-decoration: underline;
    }

    .single-price-box-left {
        width: 90%;
        float: none;
        margin: 0 auto;
    }

    .single-price-box-left img {
        width: 100%;
        height: auto;
        border-radius: 3px;
    }

    .single-price-box-right {
        width: 100%;
        float: none;
        margin-top: 4%;
    }

    .single-price-box-right-p {
        font-size: 13px !important;
        border-bottom: 1px solid #000;
        display: inline-block;
        margin-bottom: 4% !important;
    }

    .single-price-box-right-p1 {
        font-size: 13px !important;
        margin-bottom: 5% !important;
    }

    .single-price-box-right-p2 {
        font-size: 11px !important;
    }

    .single-price-box-right-p3 {
        font-size: 13px;
    }

    .single-price-box-right-p1-1 {
        font-size: 1em;
        margin-right: 1%;
    }

    .single-price-box-right-p1-2 {
        font-size: 28px;
        font-weight: bold;
        margin-left: 20px;
        position: relative;
        top: -10px;
    }

    .single-price-box-right-h {
        font-size: 1.1em !important;
        margin-bottom: 1% !important;
        font-weight: bold;
    }

    .single-price-box-right-p11 {
        font-size: 10px !important;
        margin-bottom: 2% !important;
    }

    .single-price-box-right-box {
        margin: 0;
        overflow: hidden;
    }

    .single-price-box-right-left {
        float: left;
        width: 48%;
    }

    .single-price-box-right-right {
        float: right;
        width: 48%;
    }

    .single-price-box-h3 {
        font-size: 1em !important;
        text-align: center;
        margin: 20px 0;
        background: #de954c;
        padding: 2% 16%;
        font-weight: bold;
        color: #fff;
    }

    .single-price-box-left-p1 {
        font-size: 10px !important;
        margin-bottom: 0 !important;
    }

    .single-price-box-right-p3 a {
        background: #2db260;
        border-radius: 3px;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        max-width: 280px;
        padding: 10px 25px;
        color: #f3f3f3;
        transition: 0.3s ease-in-out;
        font-weight: 500;
    }

    .single-price-box-right-p3 a:after {
        content: "";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 2rem;
        font-size: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s;
        width: 6px;
        height: 6px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        transform: translateY(-50%) rotate(45deg);
    }

    .single-price-box-right-p3 a:hover {
        background: #73b88e;
        color: #FFF;
        text-decoration: none;
    }

    .single-price-box-right-p3 a:hover:after {
        right: 1.4rem;
    }

    .video {
        position: relative;
        width: 90%;
        padding-top: 60.25%;
        height: auto;
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .map {
        position: relative;
        width: 100%;
        padding-top: 100.25%;

        height: 0;
    }

    .map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .single-map {
        width: 100%;
        overflow: hidden;
        margin: 3% auto;
    }

    .single-map-left {
        float: none;
        width: 100%;
    }

    .single-map-right {
        float: none;
        width: 100%;
        margin-top: 2%;
    }

    .single-map-right-name {
        margin: 0;
        font-size: 1.1em !important;
        margin-bottom: 10px !important;
        font-weight: bold;
    }

    .single-map-right-ul-1 {
        margin: 0;
        overflow: hidden;
    }

    .single-map-right-ul-2 {
        margin: 0;
    }

    .single-map-right-ul-3 {
        font-size: .8em !important;
        line-height: 1.3em;
    }

    .single-map-right-ul-4 {
        margin: 0;
    }

    .single-map-right-p-1 {
        margin: 20px 0 10px !important;
        font-size: .9em !important;
    }

    .single-map-right-p-2 {
        margin: 20px 0 20px !important;
        border-bottom: 1px solid #000;
        display: inline-block;
        font-weight: bold;
    }

    .single-map-right-ul-1 li {
        float: left;
        margin-right: 3%;
    }

    .single-map-right-ul-1 a {
        text-decoration: none;
    }

    .single-map-right-ul-2 span {
        padding: 6px 10px;
        margin-right: 5px;
        border-radius: 20px;
        color: #fff;
        font-size: 13px;
        position: relative;
        top: -2px;
        font-weight: bold;
        margin-left: 5px;
    }

    .single-map-right-ul-3 span {
        margin: 0;
        display: block;
        font-size: 11px;
        margin-top: 10px;
    }

    .green {
        background: #26681a;
    }

    .purple {
        background: #6000AE;
    }

    .red {
        background: #DC0003;
    }

    .orange {
        background: #C3680E;
    }

    .blue {
        background: #0214B3;
    }

    .brown {
        background: #593A01;
    }

    .gray {
        background: #4F4F4F;
    }

    .single-map-right-ul-4 span {
        margin-left: 10px;
    }

    .single-map-right-ul-4 a {
        text-decoration: none;
    }

    .single-map-right-ul-4 a:hover {
        text-decoration: underline;
    }

    .single-map-right-ul-4 li {
        list-style: disc;
        margin-bottom: 7%;
    }

    .single-price-box-right-p1 span {
        display: block;
    }

    .single img {
        width: 10%;
        height: auto;
        display: block;
        margin: 3% auto;
    }

    div.fixed-wrap {
        position: relative;
        clip-path: inset(0 0 0 0);
        width: 100%;
        height: 450px;
    }

    div.fixed {
        position: fixed;
        top: -110px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-image: url(https://ganjabonsai.com/wp/wp-content/uploads/2025/10/pp-scaled1-1.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    div.fixed-wrap p {
        font-size: 1.2em;
        position: relative;
        top: 420px;
        left: 5%;
        color: #fff;
        font-weight: bold;
        width: 90%;
    }

    .header-contact a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #04c755;
        color: #fff !important;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        border-radius: 3px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        display: block !important;
        margin-top: 0;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 10px !important;
        position: relative;
    }

    .header-contact a:hover {
        background-color: #76b319;
        text-decoration: none !important;
    }

    .pro-ul {
        margin-top: 5% !important;
    }

    .pro-ul li {
        margin: 0;
        width: 9%;
        margin-right: 10px;
    }

    .pro-ul img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .pro-li a:hover {
        background-color: #fff !important;
    }

    .support {
        margin: 0;
    }

    .support h3 {
        width: 91%;
        border-left: 5px solid #4f4f4f;
        border-radius: 2px;
        font-weight: bold;
        padding: 1% 3%;
        margin: 0 0 2em;
    }

    .support p {
        font-size: 16px;
        line-height: 1.8em;
    }

    .support p strong {
        background: linear-gradient(transparent 60%, #f5bf25 60%);
        font-weight: bold;
        font-size: 18px;
    }

    .selectbox-3 {
        display: inline-flex;
        align-items: center;
        position: relative;
    }

    .selectbox-3::after {
        position: absolute;
        right: 15px;
        width: 10px;
        height: 7px;
        background-color: #535353;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
        pointer-events: none;
        top: 15px;
        left: 200px;
    }

    .selectbox-3 select {
        appearance: none;
        min-width: 230px;
        height: 2.8em;
        padding: .4em calc(.8em + 30px) .4em .8em;
        border: 1px solid #d0d0d0;
        border-radius: 3px;
        background-color: #fff;
        color: #333333;
        font-size: .85em;
        cursor: pointer;
    }

    .list-9 {
        list-style-type: disc;
        list-style-position: inside;
        padding: 1em;
        border: 2px solid #e7e7e7;
        margin: 10px 0 30px 0;
        font-size: 0.7em;
    }

    .list-9 li {
        padding: 1em;
    }

    .list-9 li:not(:last-child) {
        border-bottom: 1px dashed #a4a4a4;
    }

    .list-9 li::marker {
        color: #818181;
        font-size: 1.1em;
    }

    .name-box {
        background-color: #f9f9f9;
        border-radius: 10px;
        padding: 20px;
        max-width: 600px;
        margin: 5% auto;
        font-family: Arial, sans-serif;
        border: 1px solid #d3d3d3;
    }

    .profile-header h2 {
        text-align: center;
        font-size: 24px;
        color: #333;
    }

    .profile-content {
        display: flex;
        align-items: center;
        margin-top: 0;
        width: 100%;
    }

    .profile-image img {
        border-radius: 50%;
        width: 70px;
        height: 70px;
        margin-right: 0;
        position: relative;
        left: 10px;
    }

    .profile-info-name {
        margin: 0;
        font-size: 1em !important;
        font-weight: bold;
    }

    .profile-info-name span {
        font-size: 14px !important;
    }

    .profile-info p {
        margin: 5% 0;
        color: #555;
        font-size: .65em;
        line-height: 1.2em;
    }

    .single-line {
        margin: 0;
        overflow: hidden;
        border: dotted 4px #04c755;
        padding: 20px;
        width: 85%;
        margin: 0 auto 40px;
        background: #f1f5f3;
    }

    .single-line img {
        width: 100%;
        height: auto;
        top: 50px;
        left: 0;
    }

    .single-line p {
        font-size: 14px;
        line-height: 1.2em;
        margin-bottom: 10px;
    }

    .single-line-left {
        float: left;
        width: 15%;
    }

    .single-line-right {
        float: right;
        width: 75%;
        margin-right: 2%;
    }

    .single-line-right a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #04c755;
        color: #fff !important;
        padding: 10px;
        font-size: .9em;
        font-weight: bold;
        border-radius: 3px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        max-width: 100%;
        width: 95%;
        margin: 0 auto;
        display: block !important;
        margin-top: 0;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 10px !important;
        position: relative;
    }

    .single-line-right a:hover {
        background-color: #76b319;
        text-decoration: none !important;
    }

    .quote-2 {
        max-width: 90%;
        position: relative;
        padding: 2.5em 2.5em 2em 3em;
        color: #787878;
        margin: 0 auto 4%;
        font-size: 9px;
    }

    .quote-2::before, .quote-2::after {
        display: inline-block;
        position: absolute;
        width: 4em;
        height: 4em;
        content: '';
    }

    .quote-2::before {
        top: 0;
        left: 0;
        border-top: 3px solid #919191;
        border-left: 3px solid #919191;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23929292'%3E%3C/path%3E%3C/svg%3E");
        background-position: top 35% left 35%;
        background-size: 2em;
        background-repeat: no-repeat;
    }

    .quote-2::after {
        bottom: 0;
        right: 0;
        border-bottom: 3px solid #919191;
        border-right: 3px solid #919191;
    }

    .quote-2 p {
        font-size: 15px;
        line-height: 1.8em;
    }

    .quote-2 p:last-of-type {
        font-size: 9px;
    }

    .review-wrapper {
        display: flex;
        overflow-x: auto;
        margin-right: 10px;
        padding: 20px 0;
        margin-top: 30px;
        padding-top: 30px !important;
        position: relative;
    }

    .review-container {
        min-width: 190px;
        flex-shrink: 0;
        border: 2px solid #dfdfdf;
        border-radius: 9px;
        padding: 40px 20px 20px;
        text-align: center;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
        position: relative;
        width: 150px;
        margin-right: 20px;
    }

    .review-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #000;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        z-index: 10;
    }

    .review-icon img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .review-content p {
        margin-top: 4%;
        font-size: .7em;
        line-height: 1.1;
        color: #333;
        margin-bottom: 0;
    }

    .continue-button {
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 10px;
        background-color: #387ed8;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .continue-button:hover {
        background-color: #689CDF;
    }

    .continue-button a {
		text-decoration: none;
        color: #fff;
    }
	
	.ogx-newlist3__list{
		width: 100%;
	}
	
	.ogx-newlist3__right{
		width: 50px;
	}
	
	.ogx-newlist3__title{
		font-size: 1em;
	}
	
	.ogx-newlist3__tag{
		margin-bottom: 3%;
		font-size: .7em;
	}
	
	.ogx-latestRail__more{
		margin-top: 44%;
	}
	
	.ogx-newlist3{
		padding: 2%;
		width: 96%;
	}

    .qa-6 {
        max-width: 100%;
        margin-bottom: 5px;
        border-bottom: 2px solid #d6dde3;
    }

    .qa-6 summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 1em 2em 1em 3em;
        color: #333333;
        font-weight: 600;
        cursor: pointer;
    }

    .qa-6 summary::before, .qa-6 p::before {
        position: absolute;
        left: 1em;
        font-weight: 600;
        font-size: 1.3em;
    }

    .qa-6 summary::before {
        color: #75bbff;
        content: "Q";
    }

    .qa-6 summary::after {
        transform: translateY(-25%) rotate(45deg);
        width: 7px;
        height: 7px;
        margin-left: 10px;
        border-bottom: 3px solid #333333b3;
        border-right: 3px solid #333333b3;
        content: '';
        transition: transform .5s;
    }

    .qa-6[open] summary::after {
        transform: rotate(225deg);
    }

    .qa-6 p {
        position: relative;
        transform: translateY(-10px);
        opacity: 0;
        margin: 0;
        padding: .3em 3em 1.5em;
        color: #333;
        transition: transform .5s, opacity .5s;
    }

    .qa-6[open] p {
        transform: none;
        opacity: 1;
    }

    .qa-6 p::before {
        color: #ff8d8d;
        line-height: 1.2;
        content: "A";
    }

    .top-review-h2 {
        position: relative;
        padding: 1em 2em;
        text-align: center;
        font-size: 1em;
        margin: 3% 0;
        font-weight: bold;
    }

    .top-review-h2:before, .top-review-h2:after {
        position: absolute;
        content: '';
    }

    .top-review-h2:after {
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
    }

    .top-review-h2:before {
        right: 0;
        bottom: -12px;
        width: 50px;
        height: 50px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .top-review-h21 {
        position: relative;
        padding: 1em 2em;
        text-align: center;
        font-size: 1em;
        margin: 3% 0;
        font-weight: bold;
    }

    .top-review-h21:before, .top-review-h21:after {
        position: absolute;
        content: '';
    }

    .top-review-h21:after {
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
    }

    .top-review-h21:before {
        right: 0;
        bottom: -12px;
        width: 50px;
        height: 50px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }

	

	
	
    .category {
        margin: 3% auto 0;
        width: 95%;
        overflow: hidden;
    }

    .category-name {
        position: absolute !important;
        top: 410px !important;
        z-index: 2;
        color: #fff;
        font-size: 34px;
        text-align: center;
        font-weight: bold;
    }

    .top-bar {
        overflow: hidden;
        margin: 0% auto 10%;
        display: block;
    }

    .top-bar li {
        float: none;
        width: 100%;
        margin: 2% 0;
    }

    .top-bar li:first-child {
        margin-left: 0%;
    }

    .top-bar img {
        width: 100%;
        height: auto;
    }

    .footer {
        background-color: #ececec;
        color: #fff;
        padding: 40px 0 0;
        font-family: 'Arial', sans-serif;
    }

    .footer .container {
        display: block;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }

    .footer-logo {
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }

    .footer-logo img {
        width: 100%;
        height: auto;
    }

    .footer-logo h2 {
        color: #fff;
        font-size: 24px;
        margin: 10px 0;
    }

    .footer-logo p {
        font-size: 9px;
        color: #4f4f4f;
        text-align: center;
        display: contents;
    }

    .footer-links {
        flex: 1;
        display: block;
        float: none;
        width: 100%;
        text-align: center;
        margin: 10% 0;
    }

    .footer-links nav ul {
        list-style: none;
        padding: 0;
        display: block;
        justify-content: center;
        margin-bottom: 20px;
    }

    .footer-links nav ul li {
        margin: 15px 0;
        display: block;
        overflow: hidden;
        width: 100%;
        font-size: .9em;
    }

    .footer-links nav ul li a {
        color: #000;
        text-decoration: none;
    }

    .footer-links nav ul li a:hover {
        text-decoration: underline;
    }

    .contact-button {
        background-color: #ffcc00;
        color: #1c1e26;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
    }

    .footer-contact {
        flex: 1;
        float: left;
        width: 46%;
        margin-right: 1%;
        margin-left: 3%;
    }

    .footer-contact h3 {
        color: #333333;
        font-size: 1em;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .footer-contact p, .footer-contact a {
        color: #5e5e5e;
        text-decoration: none;
    }

    .footer-contact p, .footer-contact a:hover {
        text-decoration: underline;
    }

    .footer-contact li {
        font-size: .7em;
        margin-bottom: 5%;
        margin-top: 11%;
    }

    .footer-topics {
        float: right;
        width: 46%;
        margin-right: 3%;
        margin-left: 1%;
    }

    .footer-topics h3 {
        color: #333333;
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .footer-topics ul {
        list-style: none;
        padding: 0;
    }

    .footer-topics ul li {
        font-size: 13px;
        margin-bottom: 10%;
        margin-top: 15%;
    }

    .footer-topics ul li a {
        color: #5e5e5e;
        text-decoration: none;
    }

    .footer-topics ul li a:hover {
        text-decoration: underline;
    }

    .footer-bottom {
        text-align: center;
        padding: 20px 0;
        background-color: #181a21;
        border-top: 1px solid #333;
        margin-top: 30px;
    }

    .footer-bottom p {
        margin: 0;
        font-size: .7em;
        color: #a0a0a0;
    }

    .footer-terms {
        display: none;
    }

    .footer-terms a {
        color: #a0a0a0;
        text-decoration: none;
        margin: 0 10px;
    }

    .most-popular-container {
        width: 100%;
        padding: 4%;
        box-sizing: border-box;
        position: relative;
    }

    .section-title {
        font-size: 1.4em;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: left;
    }

    .most-popular-grid {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }

    .popular-post {
        background: #fff;
        border: none;
        border-radius: 8px;
        overflow: hidden;
        width: calc(50% - 15px);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .popular-post:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .post-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
    }

    .post-title {
        font-size: .7em;
        font-weight: none;
        margin: 1% 0;
        color: #333;
        text-align: left;
        line-height: 1.3em;
    }

    .post-title a {
        text-decoration: none;
        color: inherit;
    }

    .more-articles {
        position: absolute;
        top: 15px;
        right: 20px;
    }

    .more-articles-btn {
        font-size: .55em;
        padding: 10px;
        border: 2px solid #868686;
        border-radius: 5px;
        text-decoration: none;
        color: #626262;
        transition: background 0.3s ease;
    }

    .more-articles-btn:hover {
        background: #000;
        color: #fff;
    }

    .must-list {
        overflow: hidden;
        width: 98%;
        margin: 0 auto;
        border-top: 1px solid #ddd;
        padding-top: 8%;
        margin-top: 0%;
    }

    .card-box {
        width: 95%;
        margin: 0 auto 5%;
        padding-left: 5%;
    }

  .card-container {
    display: flex;              /* 讓ｪ荳ｦ縺ｳ */
    gap: 16px;
    overflow-x: auto;           /* 讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺 縺第怏蜉ｹ */
    overflow-y: hidden;
    padding: 0 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .card {
    flex: 0 0 80%;              /* 逕ｻ髱｢縺ｮ8蜑ｲ蟷�〒谺｡縺後メ繝ｩ隕九∴ */
    max-width: 420px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #ddd;
    scroll-snap-align: start;
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
  }

  .card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 85%;
    padding: 240px 20px 30px;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #3c3c3c);
    text-shadow: 0 2px 4px rgb(56 56 56 / 50%);
  }

  .card-content h2 {
    font-size: 24px;
    font-weight: bold;
  }

  .card-content p {
    font-size: 13px;
    margin-top: 5px;
  }
	
    .page-template {
        width: 92%;
        margin: 0px auto 0;
		padding-top: 20%;
    }

    .single-tag {
        border: 1px solid #ddd;
        padding: 15px 20px;
        font-size: 12px;
        margin-top: 5px;
        overflow: hidden;
        display: inline-block;
        background: #f4f4f4;
    }

    .tags a {
        text-decoration: none;
        background: #ddd;
        padding: 5px 10px;
        margin-right: 0;
        border-radius: 3px;
        font-size: 12px;
        margin-left: 0;
        margin-top: 1%;
        display: inline-block;
    }
	
    .date .tags {
        margin-left: 5px;
        margin-right: 5px;
        position: relative;
        top: 15px;
    }

    div.fixed-wrap h1 {
        font-size: .6em;
        position: absolute;
        top: 340px;
        left: 10%;
        color: #fff;
        font-weight: bold;
        width: 78%;
        text-align: center;
    }

    .toc-001 {
        margin-bottom: 10% !important;
        padding: 5% 2% 5% !important;
        border: 1px solid #999;
        background-color: #ffffff;
        color: #333333;
        margin-top: 40px;
        width: 96%;
        max-height: 230px;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }

    .toc-001.gradient-visible::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to bottom, transparent, white);
        display: block;
    }

    .toc-001:not(.gradient-visible)::after {
        display: none;
    }

    .toc-001 div {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 5px 0;
        margin-left: 5%;
        font-weight: bold;
        font-size: 1.1em;
    }

    .toc-001 ol {
        counter-reset: section;
        list-style-type: none;
        padding: 20px 0 0;
        margin-left: 2%;
    }

    .toc-001 ol > li {
        counter-increment: section;
        margin-bottom: 3%;
        position: relative;
        font-size: .8em;
        line-height: 1.4em;
        width: 80%;
        margin: 0 auto;
    }

    .toc-001 ol > li::before {
        content: counter(section) ". ";
        position: absolute;
        left: -25px;
    }

    .toc-001 ol ol {
        counter-reset: subsection;
        list-style-type: none;
        padding-left: 0%;
        width: 100%;
    }

    .toc-001 ol ol > li {
        counter-increment: auto;
        margin-bottom: 2%;
        position: relative;
        font-size: 1em;
    }

    .toc-001 ol ol > li::before {
        content: counter(section) "-" counter(subsection) ". ";
        position: absolute;
        left: -35px;
    }

    .toc-001 a {
        color: #166c9d;
        text-decoration: none;
        margin-left: 10px;
    }

    .toc-container {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }

    .toggle-button {
        position: relative;
        padding: 10px 20px;
        width: 90%;
        background-color: #166c9d;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        margin: 0 auto 20px auto;
        display: block;
        top: 0;
        left: 0;
    }

    .toggle-button:hover {
        background-color: #0e4a72;
    }

    .list-4 {
        border: 2px solid #2589d0;
        width: 90%;
        margin: 4% auto 5%;
        font-size: 1em;
    }

    .list-4 div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 10px 0;
        background-color: #2589d0;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
    }

    .list-4 ul {
        list-style-type: disc;
        margin: 0;
        padding: 1em 1em 1em 2.5em;
    }

    .list-4 li {
        padding: .3em .3em .3em 0;
        font-size: .8em;
        margin-bottom: 2%;
    }

    .list-4 li:last-child {
        margin-bottom: 0;
    }

    .list-4 li::marker {
        color: #2589d0;
        font-size: 1.1em;
    }

    .custom-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #04c755;
        color: #fff;
        padding: 2% 10%;
        font-size: 1.1em;
        font-weight: bold;
        border-radius: 3px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        max-width: 100%;
        width: 75%;
        margin: 0 auto;
        display: block;
        margin-top: 10px;
        text-align: center;
        margin-bottom: 40px;
    }

    .custom-button img {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        display: inline-block;
        margin: 0 !important;
        position: relative;
        top: 15px;
        right: 15px;
    }

    .custom-button:hover {
        background-color: #76b319;

    }

    .wpcf7 {
        width: 100%;
        float: none;
    }

    .related-box {
        width: 100%;
        float: none;
    }

    .single {
        margin-top: 33%;
    }

    .toc-expanded {
        max-height: none !important;
    }

    .single img {
        width: 100% ;
        height: auto;
        display: block;
        margin: 1% auto 5% auto !important;
    }

    .toc-001.toc-expanded::after {
        display: none !important;
    }

    .iconballoon {
        -ms-flex-item-align: end;
        align-self: normal;
        width: 30%;
        position: relative;
        top: 0;
    }

    .app {
        width: 70%;
        margin: 15% auto;
        border: 1px solid #ddd;
        padding: 10%;
        border-radius: 3px;
    }

    .app1 {
        width: 74%;
        margin: 5% auto;
        border: 1px solid #ddd;
        padding: 10%;
        border-radius: 3px;
    }

    .app-left {
        width: 20%;
        float: left;
    }

    .app-left img {
        position: relative;
        border-radius: 20px;
        border: 1px solid #ddd;
    }

    .app-right-1 {
        font-size: 1.3em !important;
        font-weight: bold;
        margin-bottom: 3% !important;
        line-height: 1em !important;
        height: auto;
    }

    .app-right-2 {
        font-size: .8em !important;
        margin-bottom: 10px !important;
    }

    .app-right-3 {
        font-size: .6em !important;
        margin-bottom: 3% !important;
        line-height: 1.6em !important;
    }

    .app-right {
        width: 70%;
        float: right;
    }

    .app-bottom {
        clear: both;
        margin-top: 20px !important;
        overflow: hidden;
    }

    .app-box {
        overflow: hidden;
    }

    .app-bottom {
        margin: 0;
    }

    .app-bottom li {
        float: left;
        width: 48%;
        margin: 0 1%;
    }

    .app_btn {
        display: inline-block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        line-height: 50px;
        outline: none;
        color: #1B85FB;
        border: 1px solid #1B85FB;
        background-color: #fff;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .app_btn:hover {
        color: #fff;
        border: 1px solid #1B85FB;
        background-color: #1B85FB;
    }

    .app-ul {
        overflow: hidden;
        margin: 0 auto;
        overflow: hidden;
    }

    .app-li {
        margin: 0;
        float: none;
        width: 100%;
    }

    .wp-caption-text {
        font-size: .7em !important;
        color: #666;
        margin-top: 0;
    }

    .blog-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #808080;
        color: #fff;
        padding: 5% 10%;
        font-size: .85em;
        font-weight: bold;
        border-radius: 3px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        max-width: 100%;
        width: 75%;
        margin: 10% auto;
        display: block;
        text-align: center;
    }

    .blog-button:hover {
        background-color: #A2A2A2;
    }

    .mokuji {
        font-size: .7em !important;
        text-align: right;
    }

    #cf7-area textarea {
        height: 200px;
        padding: 0.625em 0.4375em;
        width: 90%;
    }

    .iconballoon .balloon {
        position: relative;
        width: 100%;
        background: #fff;
        padding: 10px;
        text-align: center;
        border: 2px solid #999;
        color: #555555;
        font-size: 9px;
        font-weight: bold;
        border-radius: 10px;
        margin-bottom: 10px;
        line-height: 1.5;
        left: -18px;
        top: 0;
    }

    .iconballoon .icon {
        text-align: center;
        position: relative;
        top: -13px;
        left: 13px;
    }

    .media-tabs {
        margin-top: 50px;
        padding-bottom: 0;
        background-color: #fff;
        width: 100%;
        margin: 0 auto;
    }

    .media-tab_item {
        width: calc(100%/3);
        height: 50px;
        border-bottom: 3px solid #bdbdbd;
        background-color: #d9d9d9;
        line-height: 50px;
        font-size: .7em;
        text-align: center;
        color: #565656;
        display: block;
        float: left;
        text-align: center;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .media-tab_item:hover {
        opacity: 0.75;
    }

    input[name="media_tab_item"] {
        display: none;
    }

    .media-tab_content {
        display: none;
        padding: 3% 0 0;
        clear: both;
        overflow: hidden;
    }

    #photos:checked ~ #photos_content, #videos:checked ~ #videos_content, #maps:checked ~ #maps_content {
        display: block;
    }

    .media-tabs input:checked + .media-tab_item {
        background-color: #7d7d7d;
        color: #fff;
    }

    .media-tabs input[type="radio"] {
        display: none;
    }

    .media-tab_item:hover {
        background-color: #b3b3b3;
    }

    .media-tabs-2 {
        margin-top: 50px;
        padding-bottom: 0;
        background-color: #fff;
        width: 100%;
        margin: 0 auto;
    }

    .media-tab_item2 {
        width: calc(100%/2);
        height: 50px;
        border-bottom: 3px solid #bdbdbd;
        background-color: #d9d9d9;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        color: #565656;
        display: block;
        float: left;
        text-align: center;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .media-tab_item2:hover {
        opacity: 0.75;
    }

    input[name="media_tab_item_55"] {
        display: none;
    }

    .media-tab_content2 {
        display: none;
        padding: 3% 0 0;
        clear: both;
        overflow: hidden;
    }

    #photos-55:checked ~ #photos_content_55, #maps-55:checked ~ #maps_content_55 {
        display: block;
    }

    .media-tabs-2 input:checked + .media-tab_item2 {
        background-color: #7d7d7d;
        color: #fff;
    }


    .media-tabs-2 input[type="radio"] {
        display: none;
    }

    .media-tab_item2:hover {
        background-color: #b3b3b3;
    }

    .iconbox {
        margin-top: 10%;
    }

    .box-content {
        float: left;
        width: 70%;
    }

    .iconballoon {
        float: right;
        width: 30%;
    }

    .recommended-image {
        width: 360px;
        height: auto;
        background-color: #fff;
        margin-right: 20px;
    }

    .recommended-box {
        padding: 10px 20px;
    }

    #cf7-area {
        width: 100%;
        float: none;
    }

    #cf7-area p {
        font-size: .75em;
        margin-bottom: 30px;
        line-height: 1.6em;
    }

    .profile-info {
        width: 75%;
        float: right;
        margin-left: 5%;
    }

    .profile-image {
        width: 30%;
        float: left;
    }

    .sma-header-menu {
        text-align: center;
        padding: 1% 1% 15%;
    }

    .sma-header-menu-logo img {
        width: 100px;
        margin-bottom: 20px;
    }

    .sma-header-menu-social a img {
        width: 30px;
        margin: 0 5px;
    }

    .sma-header-menu-links {
        margin: 5% 0 4%;
    }

    .sma-header-menu-links .dropdown {
        margin-bottom: 10px;
    }

    .dropdown-btn {
        background-color: #ddd;
        font-weight: bold;
        border: none;
        font-size: .85em;
        cursor: pointer;
        padding: 2%;
        width: 94%;
        margin: 0 auto;
    }

    .dropdown-content {
        display: block;
        background-color: #f5f5f5;
        text-align: left;
        width: 90%;
        margin: 0 auto;
        padding: 2% 4%;
    }

    .dropdown-content a {
        background: #e7e7e7;
        padding: 3% !important;
        font-size: .6em;
        border-radius: 3px;
        margin: 1% 0;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .sma-header-menu-social {
        margin-top: 4%;
    }

    .sma-header-menu-menu {
        list-style: none;
        padding: 0;
        margin-top: 10%;
    }

    .sma-header-menu-menu li {
        margin: 5% 0px;
        font-size: .7em;
    }

    .sma-header-menu-menu a {
        color: #fff;
        text-decoration: none;
    }

    .sma-header-menu-bottom {
        margin-top: 20px;
    }

    .cookie-settings-btn {
        background-color: transparent;
        border: 1px solid #2a2a2a;
        padding: 5px 15px;
        margin-bottom: 10px;
    }

    .sma-header-menu-country-select {
        margin-top: 10px;
    }

    .sma-header-menu-country-select select {
        background-color: #000;
        color: #fff;
        border: 1px solid #fff;
        padding: 5px;
    }

    .sma-header-menu-legal {
        font-size: 12px;
        margin-top: 20px;
        color: #999;
    }

    .pro-ul1 li {
        margin: 0;
        width: 22%;
        margin-right: 0;
        float: left;
    }

    .pro-ul1 img {
        width: 100%;
        height: auto;
        border-radius: 0;
        margin: 10px;
    }

    .unique-profile-wrapper {
        flex-direction: column;
        padding: 10px;
        border-radius: 5px;
        max-width: 100%;
    }

    .unique-profile-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .unique-profile-pic img {
        width: 60px;
        height: 60px;
        margin-bottom: 15% !important;
        margin-top: 25% !important;
        margin-right: 0;
    }

    .unique-profile-details {
        width: 100%;
    }

    .unique-profile-details h2 {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-weight: bold;
    }

    .unique-profile-details h3 {
        font-size: 14px;
        margin-bottom: 8px;
        margin-top: 5px;
        color: #666;
    }

    .unique-profile-details p {
        font-size: .7em;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .unique-social-list {
        justify-content: center;
        margin-bottom: 10px;
    }

    .unique-social-item {
        margin-right: 2%;
        margin-left: 2%;
    }

    .unique-social-item img {
        width: 35px;
        height: 35px;
        border-radius: 0 !important;
    }

    .unique-read-more {
        position: relative;
        top: auto;
        right: auto;
        padding: 6%;
        margin-top: 8% !important;
        font-size: 12px;
        border: 1px solid #939393;
        text-align: center;
        margin-bottom: 3%;
        display: block;
    }

    .unique-read-more:hover {
        background-color: #A2A2A2;
        transition: all .3s;
    }

    .custom-main-wrapper {
        padding: 0;
        max-width: 100%;
        margin: 0 auto;
    }

    .custom-category-section {
        margin-bottom: 1%;
        position: relative;
    }

    .custom-category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1%;
    }

    .custom-category-header h2 {
        font-size: .95em;
        margin: 0;
        text-decoration: none;
    }

    .custom-category-header .custom-see-all {
        color: #007bff;
        text-decoration: none;
    }

    .custom-scroll-area {
        display: flex;
        gap: 20px;
        overflow-x: scroll;
        padding-bottom: 10px;
    }

    .custom-scroll-area::-webkit-scrollbar {
        display: none;
    }

    .custom-large-card {
        width: 330px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        flex: 0 0 auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .custom-large-card img {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .custom-large-card-content {
        padding: 15px;
    }

    .custom-large-card-content h3 {
        font-size: 1.1em;
        margin-bottom: 5px;
    }

    .custom-large-card-content p {
        font-size: 1em;
        margin-bottom: 5px;
    }

    .custom-large-card-content .custom-rating {
        font-size: 14px;
        color: #ffa500;
        margin-bottom: 5px;
    }

    .custom-large-card-content strong {
        color: #333;
        font-weight: bold;
        font-size: 1em;
    }

    .custom-small-card {
        width: 290px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        flex: 0 0 auto;
        position: relative;
    }

    .custom-small-card img {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .custom-small-card-content {
        padding: 15px;
    }

    .custom-small-card-content h3 {
        font-size: 1em;
        margin-bottom: 3%;
    }

    .custom-small-card-content p {
        font-size: .8em;
        margin-bottom: 5px;
    }

    .custom-small-card-content .custom-rating {
        font-size: 1em;
        color: #ffa500;
        margin-bottom: 5px;
    }

    .custom-small-card-content strong  {
        color: #333;
        font-weight: bold;
        font-size: .8em;
    }

    .custom-rank-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: gold;
        color: white;
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .custom-large-card:hover, .custom-small-card:hover {
        background-color: #fff4e0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .custom-large-card, .custom-small-card {
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    .custom-small-card-p {
        font-size: 12px;
        text-align: right;
    }

    .recommended-box {
        border: 2px solid #56c0a9;
        padding: 20px;
        position: relative;
        width: 70%;
        background-color: #ffffff;
        margin: 0 auto;
        transition: background-color 0.3s ease;
    }

    .recommended-tag {
        position: absolute;
        top: -20px;
        left: 10px;
        background-color: #56c0a9;
        color: #ffffff;
        padding: 5px 10px;
        border-radius: 5px 5px 0 0;
        font-size: 14px;
        font-weight: bold;
    }

    .recommended-content {
        display: flex;
        align-items: center;
        margin-top: 0px;
    }

    .recommended-image {
        width: 80px;
        height: 80px;
        background-color: #d3eaea;
        margin-right: 10px;
    }

    .recommended-text h3 {
        font-size: .7em !important;
        color: #333333;
        margin: 0;
        padding: 0;
        border-bottom: 3px solid #55c1a9;
    }

    .recommended-text p {
        font-size: .5em !important;
        color: #777777;
        margin: 5px 0 0;
        line-height: 1.2em !important;
    }

    .recommended-image img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover;
        border-radius: 5px;
        margin: 0;
    }

    .iconbox {
        margin: 1em auto 1em;
        background: #fef9ed;
        border-radius: 4px;
        max-width: 90%;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    }

    .iconbox .box-title {
        font-size: .8em;
        background: #fdc44f;
        text-align: center;
        color: #fff;
        font-weight: bold;
        letter-spacing: 0.05em;
        border-radius: 4px 4px 0 0;
        line-height: 1.5;
        padding: 1em 2em;
    }

    .iconbox p {
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1.34m;
    }

    .iconbox .iconbox-wrap {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        padding: 1.3em 1em;
    }

    .iconbox .iconbox-wrap .box-content {
        width: 70%;
        margin: 0 5% 0 0 !important;
        line-height: 1.8;
        -ms-flex-item-align: center;
        align-self: center;
        float: left;
    }

    .iconbox .iconbox-wrap .box-content p {
        margin-bottom: 1em;
        font-size: .95em;
        line-height: 1.4em;
    }


    .iconballoon {
        -ms-flex-item-align: end;
        float: left;
        width: 30%;
        position: relative;
        margin-top: 10%;
        left: 0;
    }

    .iconballoon .icon {
        text-align: center;
        width: 50px;
    }

    .iconballoon .icon img {
        width: 90px;
        margin: 0 auto;
        overflow: hidden;
        display: block;
        border-radius: 100px;
        margin-top: 20px;
    }

    .iconballoon amp-img {
        max-width: 120px !important;
        margin: 0;
    }

    .iconballoon .balloon p {
        line-height: 1.4;
    }


    .iconballoon .balloon {
        position: relative;
        width: 50px;
        background: #fff;
        padding: 10px;
        text-align: center;
        border: 2px solid #999;
        color: #555555;
        font-size: .5em;
        font-weight: bold;
        border-radius: 10px;
        margin-bottom: 10px;
        line-height: 1.2;
        left: 0;
        top: -20px;
    }

    .iconballoon .balloon:after,.balloon:before {
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        top: 100%;
        left: 50%;
    }

    .iconballoon .balloon:after {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 10px;
        border-right-width: 10px;
        margin-left: -10px;
        border-top-color: #FFFFFF;
    }

    .iconballoon .balloon:before {
        border-color: "rgba(153, 153, 153, 0)";
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-left-width: 12px;
        border-right-width: 12px;
        margin-left: -12px;
        margin-top: 1px;
        border-top-color: #999999;
    }

    .content-wrapper, .custom-content-wrapper {
        display: flex;
        max-width: 100%;
        margin: 5% auto;
        padding: 0;
        align-items: center;
    }

    .image-section, .custom-image-section {
        flex: 1;
        margin-right: 20px;
    }

    .image-section img, .custom-image-section img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .text-section, .custom-text-section {
        flex: 1;
        margin-left: 1%;
        margin-right: 2%;
    }

    .text-section h2, .custom-text-section h2 {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 15px;
        line-height: 1.3em;
    }

    .text-section p, .custom-text-section p {
        font-size: .9em;
        line-height: 1.4em;
        margin-bottom: 15px;
    }
	
    .text-section a, .custom-text-section a {
        color: #007bff;
        text-decoration: none;
    }

    .text-section a:hover, .custom-text-section a:hover {
        text-decoration: underline;
    }

    .custom-content-wrapper {
        flex-direction: row-reverse;
    }

    .content-wrapper, .custom-content-wrapper {
        flex-direction: column;
    }

    .image-section, .custom-image-section {
        margin-bottom: 20px;
        margin-right: 0;
    }

    .custom-content-wrapper {
        flex-direction: column;
    }

    .kotei-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f9f9f9;
        padding: 20px;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
    }

    .kotei-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .kotei-content p {
        font-size: 16px;
        color: #333;
        margin-right: 20px;
    }

    .kotei-buttons {
        display: flex;
        gap: 10px;
        font-size: .55em;
    }

    .kotei-button-outline {
        padding: 10px 20px;
        border: 1px solid #333;
        background-color: transparent;
        color: #333;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .kotei-button-outline:hover {
        background-color: #f1f1f1;
    }

    .kotei-button-solid {
        padding: 10px 20px;
        background-color: #333;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
		font-size: .8em !important;
    }

    .kotei-button-solid:hover {
        background-color: #555;
    }

    .kotei-container {
        padding: 4%;
        background-color: #333;
        width: 92%;
        z-index: 0;
    }

    .kotei-content {
        flex-direction: column;
        align-items: center;
    }

    .kotei-content p {
        font-size: .6em;
        color: white;
        text-align: center;
        margin-bottom: 4%;
        margin-top: 2%;
        line-height: 1.5em;
        width: 90%;
        margin-right: 0;
    }

    .kotei-buttons {
        width: 100%;
        justify-content: space-around;
    }

    .kotei-button-outline, .kotei-button-solid {
        width: 45%;

        padding: 12px;
        text-align: center;
    }

    .kotei-button-outline {
        background-color: white;
        color: #333;
    }

    .kotei-button-solid {
        background-color: #04c755;
    }

    .kotei-button-outline:hover {
        background-color: #f1f1f1;
    }

    .kotei-button-solid:hover {
        background-color: #046E09;
    }

    .kotei-content p br {
        display: block;
    }

    .custom-card-container {
        display: flex;
        overflow-x: scroll;
        padding: 20px;
    }

    .custom-card {
        width: 540px;
        background-color: white;
        margin-right: 20px;
        flex-shrink: 0;
        border: 1px solid #ddd;
        position: relative;
    }

    .custom-card-image-wrapper {
        float: none;
        width: 100%;
        position: relative;
    }

    .custom-card-image-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .custom-card-tag {
        position: absolute;
        bottom: -63px;
        left: 10px;
        background-color: #2b2e83;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: .5em;
    }	

    .custom-card-content {
        float: none;
        width: 90%;
        margin: 0 auto;
    }

    .custom-card-content h3 {
        font-size: .7em;
        font-weight: bold;
        margin-bottom: 3%;
        line-height: 1.2em;
        margin-top: 10px;
    }

    .custom-card-content .custom-card-date {
        font-size: .6em;
        color: #777;
        margin: 5px 0px;
    }

    .custom-card-content .custom-card-button {
        background-color: #523d35;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: .8em;
        display: block;
        width: 90%;
        margin: 7% auto 10% auto;
    }

    .custom-card-content .custom-card-button:hover {
        background-color: #3e2d27;
    }

    .custom-card-text {
        padding: 10% 5% 5%;
        background-color: #f0f0f0;
        font-size: .6em !important;
        color: #555;
        clear: both;
        line-height: 1.3em;
    }

    .custom-card-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
		padding: 0;
    }

    .custom-card {
        scroll-snap-align: center;
        width: 250px;
        margin-right: 10px;
    }

    .custom-card-container::-webkit-scrollbar {
        display: none;
    }

    .custom-card-text {
        font-size: 12px;
    }

    .custom-scroll-area-new {
        display: block !important;
    }

    .page-template1 {
        margin-top: 10% !important;
    }

    .noblog {
        font-size: .8em;
    }

    .custom-blog-button1  {
        padding: 4% 12%;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 10px;
        position: relative;
        top: 0px;
        left: 0px;
        display: inline-block;
        margin: 6% 0 4%;
        width: auto;
    }

    .custom-blog-button2  {
        padding: 4% 12%;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 12px;
        position: relative;
        top: 7px;
        left: 5px;
        display: inline-block;
        margin: 1% 0 4%;
        width: auto;
    }
	
    .hotel-rev-p {
        font-size: .7em !important;
        margin-top: 3%;
        line-height: 1.3;
        background: #fff6d9;
        padding: 2%;
        border: 1px solid #e8e2a0;
        border-radius: 3px;
    }
	
blockquote {
    position: relative;
    padding: 20px 45px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
    width: 95%;
    margin: 50px auto;
    font-size: 11px;
    line-height: 1.4em;
}
	
#toc_container {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: block !important;
	line-height: 1.4;
	margin: 2em auto 0;
	padding: 2em 1em 1em;
	position: relative;
	width: 100% !important;
}

.toc_title {
	background-color: #fff;
	padding: 0 1em;
	position: absolute;
	text-align: center;
	top: -.8em;
}

.toc_list a {
	border: none;
	color: #444;
	display: block;
	text-decoration: none;
}

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.toc_list ul {
	font-size: .9em;
	padding: 0.7em 0 0 1em;
}

.toc_list li {
	background: none;
	margin-bottom: 0.4em;
	padding-bottom: 0.2em;
	padding-left: 0;
	font-size: 11px;
}

.toc_list > li > a {
	font-weight: bold;
	padding: 0 .5em .5em;
}
	
/* 荳ｸ繝懊ち繝ｳ蜈ｨ菴薙�驟咲ｽｮ */
.kotei-floating {
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1100;
}

/* 荳ｸ繝懊ち繝ｳ縺ｮ蝓ｺ譛ｬ繧ｹ繧ｿ繧､繝ｫ */
.kotei-floating .float-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
background: #ef8c8c;
	margin-bottom: 10%;
}

/* 逶ｮ谺｡繝懊ち繝ｳ */
.kotei-floating .float-btn.outline  {
        background-color: #333;
        margin-bottom: 45%;
    }

/* LINE繝懊ち繝ｳ */
.kotei-floating .float-btn.solid {
  background-color: #04c755; /* LINE繧ｰ繝ｪ繝ｼ繝ｳ */
}

/* 氏 繝励Ξ繧ｼ繝ｳ繝医�繧ｿ繝ｳ�医が繝ｬ繝ｳ繧ｸ蟇�ｊ縺ｮ襍､�� */
.kotei-floating .float-btn.gift {
  background-color: #ff5e3a;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  border: none;
}

/* 繝帙ヰ繝ｼ */
.kotei-floating .float-btn:hover {
  opacity: 0.85;
  transform: translateY(1px);
}
	
/* 氏 邨ｵ譁�ｭ礼判蜒上ｒ2em繧ｵ繧､繧ｺ縺ｫ縺吶ｋ */
.kotei-floating .float-btn.present img.emoji {
  width: 2em !important;
  height: 2em !important;
  object-fit: contain;
  display: block;
}


	
.line_btn {
    padding: 1% 0;
    width: 90%;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #06C755;
    margin: 0 auto 10%;
    display: block;
}
	
    .line_btn_main h2 {
        position: relative;
        padding: 1.5em 2em;
        text-align: center;
        font-size: 1.2em;
        margin: 60px 0;
        font-weight: bold;
    }
	
	.line_btn_main h2:before {
    right: 0;
    bottom: 0;
    width: 50px;
    height: 30px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}
	

	.line_btn_main h2:after {
    top: 0;
    left: 0;
    width: 50px;
    height: 30px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}
	

/* ---- moving-wrapper ---- */
  .moving-wrapper {
    margin: 0 0 24px;
    padding: 0 16px;
  }

  .moving-wrapper p {
        font-size: 0.9em;
        line-height: 1.5;
        margin: 3% 0;
    }

  .moving-wrapper strong {
    background: linear-gradient(transparent 60%, #f5bf25 60%);
    font-weight: bold;
    font-size: 1em;
  }

  .moving-wrapper h2 {
    position: relative;
    padding: 1em 0.5em;
    text-align: center;
    font-size: 1.1em;
    margin: 12% 0 8%;
    font-weight: bold;
    line-height: 1.5em;
  }

  /* 竊� 蜈�� typo `.moving-wrapperh2` 繧剃ｿｮ豁｣ */
  .moving-wrapper h2:before,
  .moving-wrapper h2:after {
    position: absolute;
    content: '';
  }

  .moving-wrapper h2:after {
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
  }

  .moving-wrapper h2:before {
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }

  .moving-wrapper h3 {
    border-bottom: 3px dashed #000;
    display: inline-block;
    font-weight: bold;
    margin-top: 9%;
    margin-bottom: 8%;
    padding-bottom: 4%;
    line-height: 1.4em;
    font-size: 1.05em;
  }

  /* ---- 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ繝ｻ繝ｬ繧､繧｢繧ｦ繝� ---- */
  .section--soft {
    padding: 20px 0;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }

  /* ---- Apple鬚ｨ繧ｿ繧､繝医Ν蜻ｨ繧� ---- */
  .apple-h2 {
    font-size: 1em !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 14px;
  }

  .apple-h2 + .subrule {
    margin: 6px 0 18px;
    height: 1.5px;
  }

  .lead {
    font-size: .9em !important;
    line-height: 1.8;
    margin-bottom: 0 !important;
  }

  /* ---- 蜿ｳ蛛ｴ Advisor 繧ｫ繝ｼ繝� ---- */
  .advisor-card {
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--line);
    position: static; /* sticky 辟｡蜉ｹ蛹� */
  }

  .advisor-card .badge {
    font-size: 11px;
    padding: 5px 9px;
    margin-bottom: 10px;
  }

  .advisor-head {
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .advisor-avatar {
    width: 56px;
    height: 56px;
  }

  .advisor-name {
    font-size: 1em !important;
  }

  .advisor-meta {
    font-size: 13px;
  }

  .advisor-list {
    font-size: 14.5px;
    line-height: 1.65;
    margin: 10px 0 14px;
    padding-left: 16px;
  }

  .advisor-list li {
    margin: 3px 0;
  }

  /* ---- 繝懊ち繝ｳ ---- */
  .btn {
    width: 85%;
    padding: 14px 16px;
    font-size: .8em;
    border-radius: 5px;
    margin-top: 5%;
  }
	
.visa-section {
  max-width: 1100px;
  margin: 20px auto;
  padding: 24px 18px 28px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-sizing: border-box;
}

/* 繧ｿ繧､繝医Ν蜻ｨ繧� */
.visa-intro {
  text-align: left;
  margin-bottom: 24px;
}

.visa-kicker {
  font-size: 1em !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.visa-title {
  font-size: .9em !important;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.visa-lead {
  font-size: .8em !important;
  line-height: 1.4em !important;
  color: #4b5563;
  margin-bottom: 8px;
}

/* ===== 繝薙じ繧ｫ繝ｼ繝� ===== */

.visa-grid {
  display: grid;
  grid-template-columns: 1fr;      /* 繧ｹ繝槭�縺ｯ1繧ｫ繝ｩ繝  */
  gap: 16px;
  margin-bottom: 24px;
}

.visa-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.visa-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: .8em !important;
  font-weight: 600;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  margin-bottom: 8px;
}

.visa-name {
  font-size: .9em !important;
  font-weight: 600;
  color: #111827;
  line-height: 1.4em !important;
}

.visa-desc {
  font-size: .8em !important;
  line-height: 1.4em !important;
  color: #4b5563;
  margin-bottom: 8px !important;
}

.visa-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.visa-points li {
  position: relative;
  padding-left: 14px;
  font-size: .7em;
  line-height: 1.6;
  color: #6b7280;
  margin-top: 1px;
}

.visa-points li::before {
  content: "繝ｻ";
  position: absolute;
  left: 3px;
  top: 0;
}

/* ===== 閾ｪ蟾ｱ邏ｹ莉九き繝ｼ繝� ===== */

.visa-profile {
  border-top: 1px solid rgba(209, 213, 219, 0.8);
  padding-top: 20px;
  margin-top: 8px;
}

.visa-profile-inner {
  background: #f9fafb;
  border-radius: 16px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.visa-profile-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  background: #e5f4ff;
  color: #0369a1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.visa-profile-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.visa-profile-role {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 10px;
}

.visa-profile-text {
  font-size: 13px;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 8px;
}
	
	.advisor-full{
		padding: 0;
	}
	
.advisor-button {
    display: inline-block;
    width: 100%;
    max-width: 360px;
    padding: 14px 0;
    background: #22c55e;
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    font-size: .9em;
    transition: background 0.2s;
}
	
.advisor-body p {
    font-size: .9em !important;
}
	
.header-no {
    margin-top: 28%;
}

.advisor-body {
    font-size: .8em !important;
}
	
.line_btn_main p {
    margin: 6% auto 10%;
    font-size: .9em;
    line-height: 1.4em;
    width: 100%;
}
	
    .line_btn_main h2 {
        position: relative;
        padding: 1.5em 2em;
        text-align: center;
        font-size: 1.2em;
        margin: 5% 0 0;
        font-weight: bold;
    }
	
	#gt_float_wrapper{
	top: -115px !important;
}	
	
    .button1 {
        position: fixed;
        right: 10px;
        bottom: -55px;
        font-size: 20px;
        cursor: pointer;
        transition: .3s;
    }
	
	
  .list-8 {
    width: 80%;
    margin: 32px auto;
    padding: 1.4rem 1.2rem 1.4rem 2.2rem;
    font-size: 0.9rem;
  }

  .list-8::before {
    inset: 12px auto 12px 0;
  }

  .list-8 > div {
    left: 1.2rem;
    font-size: 0.7rem;
  }
	
	
  .single-new-ul {
    width: 80%;
    padding: 1.6rem 1.4rem 1.6rem 2.4rem;
    margin: 36px auto;
    font-size: 0.95rem;
  }

  .single-new-ul::before {
    width: 6px;
    inset: 14px auto 14px 0;
  }

  .single-new-ul > div {
    left: 1.4rem;
    font-size: 0.72rem;
  }

	
/* CTAボタン */
    .trave-cta {
        font-size: 1.1em;
        width: 90%;
        margin: 3% auto;
    }

.trave-plan-box {
    position: relative;
    padding-top: 28px; /* ← バッジ高さに完全対応 */
    overflow: visible !important; /* ← 隠れ防止（強制適用） */
    z-index: 1;
}

.trave-plan-badge {
    position: absolute;
    top: 10px;
    left: 21%;
    transform: translateX(-50%);
    background: #ffd83b;
    color: #333;
    font-size: 11px !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    z-index: 50;
    pointer-events: none;
}
	
	.button014 a, .button015 a{
		font-size: 0.85em
	}

    .hero {
        padding: 3% 3% 0;
    }

	.reco-add-01 li {
    float: none;
    width: 100%;
		margin: 3% 0;
}
	
/* =========================================================
   Mobile Drawer Menu (No JS)
   - checkbox でドロワー開閉
   - details/summary で各セクション開閉
========================================================= */

:root{
  --bg: #f3efea;     /* うすいベージュ */
  --panel: #ffffff;
  --line: #e7ded2;
  --text: #222;
  --muted:#6f6a64;
  --accent:#b78526;  /* 金茶 */
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --radius: 16px;
}

/* ===== ハンバーガー（仮） ===== */
.menu-open-btn{
  position: fixed;
  right: 14px;
  top: 12px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(0,0,0,.65);
  color:#fff;
  font-size: 22px;
  cursor:pointer;
  user-select:none;
}

/* ===== checkbox本体は隠す ===== */
.menu-toggle{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip: rect(0 0 0 0);
  white-space:nowrap;
}

/* ===== overlay ===== */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* ===== drawer ===== */
.menu-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(92vw, 420px);
  background: linear-gradient(180deg, #f6f1ea 0%, var(--bg) 100%);
  z-index: 9998;
  transform: translateX(105%);
  transition: transform .28s ease;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;
}

/* 開いた状態 */
.menu-toggle:checked ~ .menu-overlay{
  opacity: 1;
  pointer-events: auto;
}
.menu-toggle:checked ~ .menu-drawer{
  transform: translateX(0);
}

/* ===== head ===== */
.menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 10px;
}

.menu-brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.menu-logo{
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 22px;
  color: #111;
}
.menu-sub{
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--muted);
}

.menu-close-btn{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(0,0,0,.08);
  color:#111;
  font-size: 22px;
  cursor:pointer;
  user-select:none;
}

/* ===== CTA ===== */
.menu-cta{
  padding: 8px 16px 14px;
  display:grid;
  gap: 10px;
}

.cta-btn{
  display: flex !important;
  align-items:center;
  justify-content:center;
  height: 50px;
  border-radius: 14px;
  text-decoration: none !important;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  padding-top: 0 !important;
}

.cta-black{
  background: #b3b3b3;
  color: #fff !important;
  border: #757575;
}
.cta-line{
  background: #10b74a;
  color: #fff !important;
}

/* ===== nav ===== */
.menu-nav{
  padding: 0 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* detailsカード */
.menu-acc{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 4px;
  overflow:hidden;
}

/* summary（行） */
.menu-acc > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  font-weight: 800;
  color: #1a1a1a;
  font-size: .8em;
}
.menu-acc > summary::-webkit-details-marker{ display:none; }

/* ＋/－アイコン */
.menu-acc > summary::after{
  content:"+";
  font-weight: 900;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
.menu-acc[open] > summary::after{
  content:"–";
  transform: translateY(-1px);
}

/* 中身 */
.menu-acc-body{
  border-top: 1px solid #efe7dc;
  padding: 8px 12px 12px;
  display:grid;
  gap: 8px;
}

.menu-acc-body a{
  text-decoration: none !important;
  color: #2a2a2a !important;
  font-weight: 700;
  padding: 15px 0 !important;
  border-radius: 12px;
  background: #fbf7f0;
  border: 1px solid #f0e4d0;
  overflow: hidden !important;
  text-align: center;
  font-size: .8em;
}
.menu-acc-body a:active{
  transform: translateY(1px);
}

/* タグっぽい見せ方 */
.menu-tags{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-tags .tag{
  font-weight: 800;
  font-size: .55em;
  background: #fff8e9;
  border: 1px solid #e2c990;
  color: #7b5e1e;
}

@media (max-width: 360px){
  .menu-tags{ grid-template-columns: 1fr; }
}

/* ===== footer ===== */
.menu-foot{
  margin-top:auto;
  padding: 14px 16px 18px;
  display:flex;
  gap: 10px;
}
.menu-foot-link{
  flex:1;
  text-align:center;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--line);
  text-decoration:none;
  color: #222;
  font-weight: 800;
}

/* ===== PCではこのドロワーUIを消したい場合 ===== */
@media (min-width: 769px){
  .menu-open-btn,
  .menu-overlay,
  .menu-drawer{
    display:none !important;
  }
}

.name-box-tt {
    background: #fafafa;
    border-radius: 22px;
    padding: 24px;
    margin: 40px auto;
    border: 1px solid #eaeaea;
    width: 85%;
    overflow: hidden;
}
	
	.profile-image-tt{
		width: 30%;
	}
	
.profile-info-tt {
    font-size: .7em !important;
    line-height: 1.4em;
    font-weight: bold;
}
	
.profile-content-tt {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    height: auto;
}
	
.unique-social-item-tt img {
    width: 32px !important;
    height: 34px !important;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    transition: .2s;
}
	
	.custom-tour-card{
		margin-bottom: 0;
	}
	
	.custom-category-header {
    padding: 0;
}
	
.clin-p-h1 {
    font-size: 1.3em;
    width: 100%;
    margin: 20px auto;
    line-height: 1.8em;
    text-align: center;
    font-weight: bold;
}
	
    .clin-p-01 {
        font-size: .8em;
        width: 100%;
        margin: 20px auto;
        line-height: 1.6em;
    }
	
.og-articlecard__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f3f3;
    height: 210px;
}
	
.og-articlecard__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
	
    .pro-ul2 li {
        margin: 0;
        width: 16%;
        margin-right: 0;
        float: left;
    }
	
	.unique-social-item a{
		padding: 0 !important;
	}

    .pro-ul2 img {
        width: 80% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 10px;
    }
	
.card-badge {
    position: absolute;
    top: 20px;
    left: 18px;
    background: #2f7f6b;
    color: #fff;
    padding: 2% 5%;
    border-radius: 999px;
    font-size: 1em;
}
	
.gbj-section-title {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 0px 0px;
}
	
	.ogx-cbdLegalNote{
		padding: 0;
	}
	
	.cv-link-inner{
		width: 90%;
	}
	
}