/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


html,body { 
    margin: 0; 
    background-color: #efefef;
    color: #c65705;
    overflow-x:hidden;
    font-weight: bold;
    font-family: "Yu Mincho Demibold","游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN", "ＭＳ 明朝", "MS Mincho", serif;
}

.page-tabs_container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    background: #c65705; 
    color: #fff;
    position: sticky;
    top: 0;
}

.page-tabs_rogo {
    width: clamp(90px, 8vw, 140px); 
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 auto;
}

.page-tabs_rogo img {
    height: auto;     
    width: 100%;
    display: block;  
}

.brand-ja {
    display: block;
    white-space: nowrap;
    margin-top: -13px; 
}

.page-tabs { 
    flex: 1;  
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    overflow-x: auto;
}
  
.page-tabs ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; 
    gap: 24px;                
    white-space: nowrap;      
    overflow-x: auto;         
    -webkit-overflow-scrolling: touch;
}

.page-tabs .nav__item.is-current .nav__link {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }
  
.page-tabs a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 12px 0;
    letter-spacing: .06em;
}

.page-tabs a:hover {
    text-decoration: underline;
}

.page-tabs a:focus { 
    outline: none; 
}

.page-tabs a.active{
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
}
  
.brand-en{
    font-size: 14px;
    opacity: .9;
}

.hamburger,
.menu-close {        
    display: none;
}

.hero { 
    position: relative; 
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero > img {
    width: 100%;
    height: 90vh;           
    object-fit: cover;
    display: block;
  
}

.brand-rogo { 
    position: absolute;
    left: 70%;    
    z-index: 2;             
    top: 10px;     
    margin-top: 20px; 
    text-align: center;  
}

.brand-rogo.hero-tagline {
    font-size: 14px;
    margin-bottom: 5px;
}

.brand-rogo img {
    width: 260px;           
    height: auto;
    display: block;
    z-index: 2; 
    text-align: center;
    margin: 10px 0 auto;
}

.hero-brand-ja {
    display: block;
    font-size: 24px;
    font-weight: 700;
    z-index: 2;
    margin: 0 auto;
    transform: translateY(-40%);
}

.hero-brand-en {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.14em;  
    z-index: 2;
    margin: 0 auto;
    transform: translateY(-60%);
}

.rest-area {
    margin: 0 auto;
    width: 75%;
    text-align: center;
    margin-bottom: 100px;
}

.chiyomaru {
    margin: 0 auto;
    width: 50%;
    text-align: center;
    padding-bottom: 120px;
}

.chiyomaru img {
    margin: 100px auto 0;
    width: 80%;
}

.chiyomaru-brand-ja {
    font-size: 36px;
    font-weight: 700;
    margin-top: 20px;
    letter-spacing: 0.4em; 
    white-space: nowrap; 
    margin: 0 auto;
}

.chiyomaru-brand-en {
    font-size: 28px;
    font-weight: 700;
    margin-top: 20px;
    white-space: nowrap;
    margin: 0 auto;
}

.rest-area h2 {
    font-size: 30px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0 auto;
    margin-top: 50px;
    display: block;
    color: #c65705;
}

.rest-area span {
    display: block;
    width: 65%;
    margin: 0 auto;
    font-size: 18px;
    text-align: left;
}

.room-info {
    width: 80%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.room-info h2 {
    font-size: 30px;
    font-weight:700; 
    white-space:nowrap;
    margin: 120px auto 80px;
    display: block; 
    color: #c65705;
}

.room-guide {
    display: flex;
    width: 100%;
    height: auto;
    gap: 40px;
    margin-bottom: 80px;
}

.container-left {
    width: 50%;
    height: auto;    
}

.main-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.share-gallery{
    max-width: 800px;
    margin: 0 auto;
}
  
.share-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;         
}

.share-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
  
.share-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 2px solid #e7ecf1;   
    box-shadow: 0 0 0 6px #000033 inset; 
}

.container-right {
    width: 50%;
    height: auto;
}

.container-right h3 {
    font-size: 24px;
    text-align: left;
    margin: 0 0 30px;
    color: #c65705;
}

.room-meta {
    width: 100%;
    height: auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.room-price{
    width: 40%;
    min-width: 220px; 
}
  
.room-price__label{
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
}
  
.room-price__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 3.5em 1fr;
    column-gap: 12px;
    row-gap: 4px;
    font-size: 16px;
    color: #555555;
}
  
.room-price__list dt,
.room-price__list dd{
    margin: 0;
}
  
.room-price__list dt{
    white-space: nowrap;
}
  
.room-price__list dd{
    white-space: nowrap;
}

.room-price__list dt::after{
    content: "：";
    margin-left: .2em;
}

.room-side{
    display: grid;
    gap: 14px; 
    min-width: 240px;
}
  
.room-side__label{
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
}
  
.room-side__value{
    line-height: 1.6;
    column-gap: 12px;
    align-items: baseline;
    margin: 4px 0;
    font-size: 16px;
    text-align: left;
    color: #555555;
}

.room-desc{
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
}
  
.room-desc p{
    margin: 30px 0;
    color: #555555;
}
  
.room-amenities{
    margin-top: 14px;
    display: grid;
    gap: 16px;
}

.room-amenities__title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    color: #c65705;
}

.room-amenities__list {
    color: #555555;
}

.room-txt {
    width: 80%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.room-txt h2 {
    font-size: 30px;
    font-weight:700; 
    white-space:nowrap;
    margin: 120px auto 80px;
    display: block; 
    color: #c65705;
}

.br-sm {
    display: none;
}

.room-txt__lead {
    display: block;
    width: 65%;
    margin: 0 auto;
    font-size: 18px;
    text-align: left;
    line-height: 1.9;
    color: #555555;
}

.spot{
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin: 40px 0;
}
  
.spot__image{
    flex: 0 0 45%;
    width: 400px;
    height: auto;
    max-width: 45%;
}
  
.spot__image img{
    width: 100%;
    height: auto;
    display: block;
}
  
.spot__text{
    flex: 1;
    min-width: 0;
    margin: 0 auto;
    padding: 50px;
    text-align: left;
}
  
.spot__title{
    margin: 0 0 30px;
    font-size: 24px;
    line-height: 1.4;
    color: #c65705;
}
  
.spot__desc{
    margin: 0 0 10px;
    line-height: 1.9;
    color: #555555;
}
  
.spot__fee{
    margin: 0 0 6px;
    font-weight: 700;
    color: #555555;
}
  
.spot__note{
    margin: 0;
    line-height: 1.9;
    color: #555555;
}
  
.spot--reverse{
    flex-direction: row-reverse;
}


.common-area {
    margin: 0 auto;
    width: 70%;
    text-align: center;
    margin-bottom: 50px;
}


.fees-img {
    position: relative;   
    display: inline-block;       
    margin: 0 auto 50px; 
}

.fees-img img {
    width: 100%;
    height: auto;
    display: block;
    margin: 120px auto 80px;
}

.fees-label {
    position: absolute;
    left: 55%;
    bottom: 35%;              
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: 0.08em;
    white-space: nowrap;       
}

.share-gallery{
    max-width: 1200px;
    margin: 0 auto;
}
  
.share-grid{
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;         
}

.share-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
  
.share-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 2px solid #e7ecf1;   
    box-shadow: 0 0 0 6px #000033 inset; 
}
   
.share-card figcaption{
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #c65705;
}

@media (min-width: 900px){
    .room-amenities{
      grid-template-columns: 1fr 1fr;
    }
  
  .room-amenities__list{
    margin: 0;
    padding-left: 1.1em; 
  }
  
  .room-amenities__list li{
    margin: 0 0 6px;
  }
}

.br-hidden {
    display: none;
}

footer {
    width: 100%;
    height: auto;
    background-color: #c65705;
    padding-bottom: 80px;
    display: flex;
}

.footer-left {
    width: 60%; 
}

.footer_rogo {
    width: 50%;
    padding: 30px 0 20px 140px;   
    display: flex;
    align-items: flex-end;
}

.footer_rogo img {
    width: 60%;
    height: auto;
}

.footer-brand-ja {
    display: block;
    font-size: 22px;
    font-weight: 700; 
    z-index: 2;
    color: #fff;
    white-space: nowrap; 
    padding: 0 0 10px 20px;
    margin: 0;
}

.footer-brand-en{
    display: inline-block;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    transform: translateY(-80%);
    padding-left: 140px;
}

.footer-left span {
    text-align: left;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    padding-left: 140px;
}

.footer-right {
    width: 40%;
    align-items: flex-end; 
    flex-direction: row;       
    justify-content: flex-end; 
    gap: 12px;                
    margin:  0 0;    
    padding-right: 140px; 
    display: flex;  
}

.footer-right img {
    width: 60px;              
    height: 60px;
    display: block;
}

.ft__sns:hover{ 
    opacity: 1; 
    transform: scale(1.05); 
}

.footer-weather {         
    height: auto;
    display: block;
    padding-right: 140px;
    text-align: right; 
}

.footer-weather img {
    display: inline-block;
}

/* go-to-top */
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	color: #c65705;
    opacity: 0.5;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
    outline: 1px solid #c65705;
    outline-offset: 1px;
}

#page-top a:hover{
	background: #777;
}

#page-top {
	position: fixed;
	right: 50px;
	bottom:40px;
	z-index: 1000;
	opacity: 0;
	transform: translateY(130px);
}

#page-top .chev{
    width: 10px; height: 10px;
    border-top: 3px solid #000033;
    border-right: 3px solid #000033;
    transform: rotate(-45deg);     
    margin-top: 8px;
}

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(130px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(130px);
  }
}


/* 固定お問い合わせ */
.fixed-call{
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0;
    z-index: 900;
    background: #c65705; 
    color:#fff;
    padding: 10px 16px 10px;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:14px;
}
  
.call-lead{
    display:inline-block;          
    padding: 5px 14px;
    background:#fff; 
    color:#555555;
    border-radius: 999px;
    font-weight:700; 
    white-space:nowrap;
}
  
.call-btn{
    color:#fff;
    text-decoration:none; 
    padding:0 16px;
    border-radius:999px; 
    font-weight:700;
    font-size: 30px;
    white-space:nowrap; 
    display:inline-block;
}

.call-btn:hover{ 
    opacity:.9; 
}
  
.call-note{ 
    font-size:14px; 
    opacity:.9; 
    white-space:nowrap; 
}

#coming-soon-footer-banner {
    display: none !important;
  }

/* ===== タブレット表示 ===== */
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .hero{
        width: 100vw;
        height: 60vh;           
        overflow: hidden;
    }

    .hero > img{
        width: 100%;
        height: 60vh;
        object-fit: cover;       
    }

    .hero-brand-en {
        top: 110px;
    }

    .page-tabs_rogo img {
        height: 35px;
        width: auto;
    }

    .brand-en {
        font-size: 12px;
    }

    .fees-label {
        bottom: 25%;
    }
    
    .footer_rogo {
        width: 50%;
        padding: 50px 0 20px 80px;
    }

    .footer-left span {
        font-size: 20px;
        padding-left: 80px;
    }

    .footer-icon {
        justify-items: flex-end;
        width: auto;
        height: auto;
        padding: 30px 73px 0 0;
    }

    .br-sm {
        display: none;
    }

}

@media screen and (min-width: 768px) and (max-width: 1023px){
    .brand-ja {
        font-size: 14px;
        margin-top: -2px;
    }

    .hero {
        width: 100vw;
        height: 50vh;           
        overflow: hidden;
    }

    .hero > img {
        width: 100%;
        height: 60vh;
        object-fit: cover;
        object-position: 50% 40%;
    }

    .brand-rogo {
        left: 70%;
        margin: 20px auto;
    }

    .hero-tagline {
        margin: 0 auto;
        font-size: 12px;
    }
    

    .brand-rogo img {
        width: 150px;
        margin: 10px auto 0;
    }

    .hero-brand-ja {
        display: block;
        font-size: 14px;
        transform: translateY(-10%);
    }

    .hero-brand-en {
        font-size: 14px;
        top: 110px;
        transform: translateY(-43%);
    }

    .page-tabs_container {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;    
    }

    .page-tabs_rogo img {
        width: 60px;
        height: auto;
        display: block;
    }

    .page-tabs {
        text-align: center;
        align-items: center;
    }

    .page-tabs ul { 
        gap: 12px;
        font-size: 14px;
    }

    .page-tabs .nav__link{
        display: flex;            
        align-items: center;      
        line-height: 1.2;         
    }

    .brand-en {
        font-size: 10px;
        text-align: end;
        order: 2;
            
        margin-top: 4px;
    }

    .br-hidden {
        display: inline;
    }

    .br-sm {
        display: block;
    }

    .chiyomaru-brand-ja {
        font-size: 34px;
        letter-spacing: 0;
    }

    .room-meta {
        gap: 20px;
    }

    .room-price {
        width: 40%;
        min-width: 180px;
    }

    .room-price__list {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 3.5em 1fr;
    }

    .room-side {
        display: grid;
        gap: 14px;
        min-width: 200px;
    }

    .room-side__value {
        white-space: normal;
    }

    .spot__text {
        padding: 0;
    }

    .spot__title {
        margin: 0 0 20px;
    }

    .common-area {
        width: 80%;
    }

    .fees-label {
        bottom: 25%;
    }

    .fixed-call {
        gap: 0;
    }

    .footer_rogo {
        width: 50%;
        padding: 50px 0 20px 40px;
    }

    .footer-brand-ja {
        margin: 0 auto;
    }

    .footer-brand-en{
        font-size: 20px;
        padding-left: 40px;
    }

    .footer-left span {
        font-size: 18px;
        padding-left: 40px;
    }

    .footer-right {
        padding-right: 80px;
    }

}

/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    header{
        position: relative;
        z-index: 100000;
    }

    .page-tabs_container{
        display: flex;
        flex-wrap: wrap;       
        align-items: center;
        gap: 8px 12px;  
        row-gap: 0px;        
    }

    .page-tabs_rogo {
        width: 25%;
        order: 1; 
    }

    .brand-ja {
        font-size: 14px;
        margin-top: -10px;
    }

    .brand-en {   
        font-size: 10px;
        order: 3;
        flex-basis: 100%;
        width: 100%;
        display: block;
        transform: translateY(-5px); 
        padding-left: 5px;
    }

    .br-hidden {
        display: none;
    }

    .br-sm {
        display: block;
    }

    .hamburger {
        position: relative;
        display: block;
        cursor: pointer;
        width: 50px;
        height:50px;
        background: transparent;       
        border: none; 
        z-index: 1100;
        margin-left: auto;
        order: 2;
    }
    
    .hamburger__line{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        background: #fff;  
        width: 45%;
    }
    
    .hamburger__line:nth-of-type(1) {
        top:15px;	
    }
    
    .hamburger__line:nth-of-type(2) {
        top:23px;
    }
    
    .hamburger__line:nth-of-type(3) {
        top:31px;
    }
    
    .hamburger.active .hamburger__line:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .hamburger.active .hamburger__line:nth-of-type(2) {
        opacity: 0;
    }
    
    .hamburger.active .hamburger__line:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    
    #nav-menu.page-tabs {
        position: fixed;
        display: block; 
        overflow: visible; 
        top: 0%;
        left: 0;
        width: 250px;
        height: 80vh;
        background-color: #c65705;
        box-shadow: 2px 0 4px rgba(0,0,0,.1);
        transform: translateX(-100%);
        transition: transform .4s;
        z-index: 100001;
    }
      
    #nav-menu.active {
        transform: translateX(0);
    }
      
    .page-tabs ul {
        margin: 0;
        padding: 100px 0 0 60px;
        list-style: none;
        overflow-x: visible;
        flex-direction: column;
        gap: 15px;
    }
      
    .page-tabs li {
        width: 100%;
    }
      
    .page-tabs.nav__link {
        display: block;
        padding: 5px 0;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid #eee;
    }
    
    .page-tabs a{
        color: #fff;
        text-decoration: none;
        opacity: .95;
        padding: 8px 0;
    }
    
    .page-tabs a:hover{
        opacity: 1;
        color: #ab6520;
    } 

    .hero{
        width: 100%;
        height: 75vh;        
    }

    .hero > img {     
        width: 100%;
        height: 75vh;   
        
    }

    .brand-rogo {
        left: 50%;
        z-index: 2;
        top: 10px;
        margin-top: 20px;
        text-align: center;
    }

    .hero-tagline {
        margin: 0 auto;
        font-size: 12px;
    }

    .brand-rogo img {
        width: 110px;    
        margin: 10px auto;       
    }

    .hero-brand-ja {
        display: block;
        font-size: 14px;
        transform: translateY(-20%);
    }

    .hero-brand-en {
        font-size: 14px;
        top: 80px;
        transform: translateY(-43%);
    }
    
    .chiyomaru-brand-ja {
        font-size: 22px;
        transform: translateY(-20%);
    }

    .chiyomaru-brand-en {
        font-size: 18px;
        transform: translateY(-50%);
    }

    .rest-area span {
        width: 100%;
    }

    .room-info {
        width: 80%;
        margin: 0 auto;
    }

    .room-guide {
        display: flex;
        width: 100%;
        height: auto;
        gap: 16px;
        margin-bottom: 50px;
        flex-direction: column;
    }
    
    .container-left,
    .container-right{
        width: 90%;
        margin: 0 auto;
    }

    .main-image {
        margin-bottom: 20px;
    }

    .main-image img{
        width: 100%;
        height: auto;
        display: block;
      }
    
    .share-gallery{
        max-width: none;
        margin: 0;
    }
    
    .share-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    
    .container-right h3{
        font-size: 22px;
        margin: 0;
    }
    
    .room-meta{
        display: grid;
        gap: 14px;
    }
    
    .room-price{
        width: 100%;
        min-width: 0;
    }
    
    .room-price__label,
    .room-side__label,
    .room-amenities__title{
        font-size: 18px;
    }
    
    .room-amenities{
        grid-template-columns: 1fr;
    }

    .room-txt {
        width: 80%;
        margin: 50px auto;
    }

    .room-txt h2 {
        font-size: 22px;
        white-space: normal;
    }

    .room-txt__lead {
        width: 100%;
    }

    .spot {
        width: 100%;
        display: flex;
        gap: 16px;
        margin-bottom: 50px;
        flex-direction: column;
        margin: 30px auto;
    }

    .spot__image {
        flex: 0 0 45%;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .spot__text {
        width: 100%;
        margin: 30px auto;
        padding: 0;
        text-align: center;
    }

    .spot__title {
        margin: 0 0 30px;
        font-size: 22px;
    }

    .spot__desc {
        margin: 0 0 20px;
    }

    .common-area {
        width: 80%;
    }

    .fees-label {
        bottom: 8%;
    }
    
   
     /*
    .top-Chiyomaru {
        width: 80%;
    }

    .top-Chiyomaru img {
        width: 50%;
    }

    .Chiyomaru-brand-en {
        font-size: 24px;
        margin-top: 10px;
    }

    .top-container {
        width: 90%;
    }

    .top-container-top {
        flex-direction: column;
    }

    .top-container-left {
        width: 100%;
    }

    .top-container-right {
        width: 100%;
    }

    .top-container-bottom {
        margin-top: 50px;
    }
    */
    .fixed-call {
        flex-direction: column;  
        z-index: 900;
        align-items:center;
        row-gap:0;  
    }

    .call-lead {
        display: inline-block;
        padding: 6px 18px;
        font-size: 14px;
        margin-bottom: 2px;   
    }

    .call-btn {
        display: inline-block;
        font-size: 28px;            
        font-weight: 800;
        line-height: 1;
        padding: 4px 14px;          
          
    }

    .call-note { 
        white-space:nowrap;              
        text-align: center;         
    }


    footer {
        flex-direction: column;
        height: auto;
        padding-bottom: 125px;
    }

    .footer-left {
        width: 90%;
        margin: 0 auto;

    }

    .footer_rogo {
        width: 70%;
        padding-left: 0;
        
    }

    .footer_rogo img {
        width: 70%;
    }

    .footer-brand-ja {
        font-size: 20px;
        padding-left: 10px;
        letter-spacing: 0;
    }

    .footer-brand-en {
        font-size: 20px;
        transform: translateY(-110%);
        padding-left: 10px;
    }

    .footer-adress {
        margin: 0 auto;
        width: 90%;
    }

    .footer-left span {
        font-size: 14px;
        padding-left: 20px;
    }

    .br-hidden {
        display: inline;
    }

    .footer-right {
        display: flex;
        width: 90%;
        margin: 40px auto 0;
        justify-content: flex-end;
        padding-right: 0;
    }

    .footer-right img {
        width: 40px;
        height: 40px;
    }

    #page-top {
        right: 30px;
    }

    .ast-plain-container {
        min-height: calc(100vh - 80px);
        padding-bottom: 80px;
    }

}

/* ====== activities===== */

.activity {
    margin: 0 auto;
    width: 60%;
    text-align: center;
    margin-bottom: 80px;
}

.activity-title {
    width: 60%;
    height: auto;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-end;
}

.activity-title img {
    width: 20%;
    height: auto;
}

.activity-title h3 {
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0 auto;
    display: block;
    align-items: flex-end;
    color: #c65705;
}

.activity p {
    width: 60%;
    color:#555555;
    margin: 60px auto;
    line-height: 1.9em;
}

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

.activity__fee{
    margin: 30px auto 0;
    font-weight: 700;
    color: #555555;
}
  
.activity__note{
    margin: 0;
    line-height: 1.9;
    color: #555555;
}

.activity-desc {
    margin-left: 30px;
}

.activity-title span {
    width: auto;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    display: block;
    align-items: flex-end;
}

.cta-btn {
    width: 60%;
    margin: 0 auto 80px;
}

.restspace-cta {   
    width: 70%;
    height: 90px;
    background-color: #000333;
    border-radius: 15px;
    display: block; 
    text-align: center;
    text-decoration: none;     
    margin: 16px auto;      
    white-space: nowrap; 
    color: #fff;
    font-size: 24px;
    line-height: 90px;
}

/* ===== タタブレット表示 ===== */
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .activity-title {
        width: 80%;
    }

    .activity-title h3 {
        margin: 0 auto 0 20px;
    }

}
@media screen and (min-width: 768px) and (max-width: 1023px){
    .activity {
        width: 80%;
    }

    .activity-title h3 {
        text-align: left;
        margin-left: 10px;
    }

    .br-sm {
        display: block;
    }

    .restspace-cta{
        display: flex;
        justify-content: center;
        align-items: center;
    }
      
    .restspace-cta__text {
        line-height: 1.2;
        transform: translateY(2px); 
    }

}

/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    .rest-area {
        margin-bottom: 50px;
    }

    .chiyomaru {
        width: 90%;
        padding-bottom: 30px;
    }
    
    .chiyomaru-brand-ja {
        font-size: 22px;
        transform: translateY(-20%);
    }
    
    .chiyomaru-brand-en{
        font-size: 18px;
        transform: translateY(-50%);
    }

    .activity {
        width: 90%;
        margin-bottom: 80px;
    }
    
    .activity-title {
        width: 90%;
    }
    
    .activity-title img {
        width: 20%;
    }

    .activity-title h3 {
        font-size: 18px;
        white-space: normal;
        margin-left: 20px;
        text-align: left;
    }
   
    .activity p {
        width: 80%;
        line-height: 1.9em;
    }
    
    .activity__fee{
        font-size: 14px;
        margin: 30px 10px 0;
    }
  
    .activity__note{
        font-size: 14px;
        margin: 0 10px;
    }

    .activity-desc {
    margin-left: 15px;
    }

    .cta-btn {
        width: 90%;
    }

    .restspace-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        font-size: 16px;
        width: 80%;
        height: 80px;
    }


}

/* ====== about ===== */

.about-Chiyomaru1,
.about-Chiyomaru2 {
    margin: 0 auto;
    width: 65%;
    text-align: center;
    padding-bottom: 100px;
}

.Chiyomaru1-txt {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 50px;
    
}
.about-Chiyomaru1 p {
    font-size: 18px;
    margin: 0;
}

.about-main-img {
    width: 100%;
    height: 90vh;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

.about-Chiyomaru1 h2,
.about-Chiyomaru2 h2 {
    font-size: 30px;
    font-weight:700; 
    white-space:nowrap;
    margin: 50px auto 20px;
    color: #c65705;
}

.about-Chiyomaru1 span,
.about-Chiyomaru2 span {
    display: block;
    width: 60%;
    margin: 0 auto;
    font-size: 18px;
    margin-bottom: 50px;
    text-align: left;
    color: #555555;
}

.equip-gallery{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}
  
.equip-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 18px;         
}
  
.equip-card{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
  
.equip-card img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 2px solid #e7ecf1;   
    box-shadow: 0 0 0 6px #000033 inset; 
}
  
.equip-card figcaption{
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #000033;
}

.captains {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 70px;
}

figure { 
    margin: 0; 
}

.captain {
    width: 100%;
    max-width: 1100px;  
    box-sizing: border-box;  
    background-color: #e3e1e1;
    display: flex;
    margin: 20px auto;
    align-items: center; 
    gap: 28px;            
    padding: 24px;  
}

.captain img {
    width: clamp(260px, 24vw, 360px);
    height: auto;
    display: block;
    object-fit: cover;
    padding: 0;
    margin: 0;
}

.captain-txt {     
    flex: 1;
    max-width: 520px;      
    padding: 0;            
    margin: 0;
    text-align: center;
    min-width: 0; 
    
}

.captain-txt h3 {
    font-size: 22px;
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    color: #c65705;
}

.captain-txt p {
    text-align: left;
    margin: 0;
    font-size: 18px;
    width: auto;
    text-align: left;
    color: #555555;
}

.about-nagimiport {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 70px;
}
  
.about-nagimiport h2 {
    font-size: 30px;
    font-weight:700; 
    white-space:nowrap;
    margin: 30px auto 20px ;
    text-align: center;
    color: #c65705;
}

.about-nagimiport > p {
    font-size: 18px;
    display: block;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 50px;
    color: #555555;
}

.about-nagimiport img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}


/* ===== タブレット表示 ===== */
@media screen and (min-width: 1024px) and (max-width: 1240px){

    .about-main-img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }

    .about-Chiyomaru1 span, 
    .about-Chiyomaru2 span {
        font-size: 16px;
    }

    .captain-txt {
        padding: 50px 20px;
    }

    .captain-txt h3 {
        font-size: 18px;
    }

    .captain-txt p {
        font-size: 14px;
    }

    .about-nagimiport img {
        height: auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px){
    .about-Chiyomaru1,
    .about-Chiyomaru2 {
        width: 80%;
        padding-bottom: 70px;
        margin: 0 auto;
        text-align: center;
    }

    .about-main-img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }

    .about-Chiyomaru1 p {
        font-size: 16px;
        margin: 0;
    }

    .about-Chiyomaru1 span, 
    .about-Chiyomaru2 span {
        display: block;
        width: 70%;
        margin: 0 auto;
        font-size: 16px;
        margin-bottom: 50px;
    }

    .equip-gallery {
        
        padding: 20px 16px 20px;
    }

    .captains {
        margin-top: 50px;
    }

    .captain img {
        height: auto;
    }

    .captain-txt {
        padding: 50px 20px;
    }

    .captain-txt h3 {
        font-size: 18px;
    }

    .captain-txt p {
        font-size: 16px;
    }

    .about-nagimiport {
        width: 80%;
    }

    .about-nagimiport img {
        height: auto;
    }
}


/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    .Chiyomaru {
        width: 90%;
    }

    .Chiyomaru img {
        margin-top: 70px auto 0;
        width: 70%;
        padding-left: 0;
    }

    .Chiyomaru-brand-en {
        font-size: 26px;
        font-weight: 700;
        margin: 0 auto;
    }

    .about-Chiyomaru1,
    .about-Chiyomaru2 {
        width: 85%;
        padding-bottom: 50px;
    }

    .Chiyomaru1-txt {
        width: 100%;
    }

    .about-main-img {
        height: auto;
    }

    .about-Chiyomaru1 span, 
    .about-Chiyomaru2 span {
        display: block;
        width: 85%;
    }

    .equip-gallery{
        max-width: 100%;
        padding: 20px 12px 40px;  
    }

    .equip-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;            
    }

    .captains {
        margin-top: 30px;
    }

    .captain {
        width: 100%;
        flex-direction: column;   
        align-items: center;
    }

    .captain img {
        width: 100%;               
        height: auto;    
        max-width: 520px;         
        padding: 24px 16px 8px;
    }
    
    .captain-txt {
        padding: 30px 25px;
        text-align: center;
    }

    .captain-txt h3 {
        font-size: 16px;
        line-height: 1.5;
    }

    .captain-txt p {
        font-size: 14px;
    }

    .about-nagimiport {
        width: 90%;
        margin-bottom: 50px;
    }

    .about-nagimiport h2 {
        font-size: 30px;
        white-space: normal;
    }

    .about-nagimiport > p {
        font-size: 14px;
        width: 85%;
    }

    .about-nagimiport img {
        height: auto;
    }
}

/* ====== stay===== */
/* ===== ご予約に関して ===== */
.reservation-notes{
    width: min(900px, 80%);
    margin: 0 auto;
    padding: 56px 0 80px;
    text-align: left;
    color: #333;
}
  
.reservation-notes h2{
    margin: 0 0 50px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #c65705; /* ここの色はお好みで */
    text-align: center;
}
  
.reservation-notes h3{
    margin: 34px 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #000033; /* ネイビー系 */
    padding-left: 12px;
    border-left: 4px solid #000033;
}
  
.reservation-notes p{
    margin: 10px 0;
    line-height: 1.9;
    font-size: 16px;
    color: #555;
}
  
.reservation-notes strong{
    font-weight: 700;
    color: #000033;
}
  
.reservation-notes ul,
.reservation-notes ol{
    margin: 10px 0 0;
    padding: 0;
    list-style-position: inside;
}
  
.reservation-notes li{
    margin: 8px 0;
    line-height: 1.8;
    font-size: 16px;
    color: #555;
}
  
.reservation-notes ol{
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}
  
.reservation-notes ol li{
    position: relative;
    padding-left: 34px;
    margin: 10px 0;
}
  
.reservation-notes ol li::before{
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #000033;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.reservation-notes ul{
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 16px 18px;
}
  
.reservation-notes ul li{
    list-style: none;
    position: relative;
    padding-left: 18px;
    margin: 10px 0;
}
  
.reservation-notes ul li::before{
    content: "●";
    position: absolute;
    left: 0;
    top: 0;
    color: #c65705;
    font-size: 12px;
}
  
.reservation-notes .note{
    margin-top: .5em;
    font-size: 14px;
    color: #666;
}
  
.reservation-notes h3 + p strong{
    font-size: 18px;
}
  
/* ===== タブレット ===== */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .reservation-notes{
      padding: 46px 0 70px;
    }
    .reservation-notes h2{
      font-size: 28px;
    }
}
  
/* ===== スマホ ===== */
@media screen and (max-width: 767px){
    .reservation-notes{
      width: 88%;
      padding: 40px 0 60px;
    }
  
    .reservation-notes h2{
      font-size: 24px;
      margin-bottom: 14px;
    }
  
    .reservation-notes h3{
      font-size: 18px;
      margin-top: 26px;
    }
  
    .reservation-notes p,
    .reservation-notes li{
      font-size: 15px;
    }
  
    .reservation-notes ul{
      padding: 14px 14px;
    }
  
    .reservation-notes ol li{
      padding-left: 32px;
    }
}

/* ====== rest ===== */

.private-area {
    margin: 0 auto;
    width: 70%;
    text-align: center;
    justify-items: center;
}

.private-area img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.private-gallery{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}
  
.private-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 18px;         
}
  
.private-card{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
  
.private-card img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 2px solid #e7ecf1;   
    box-shadow: 0 0 0 6px #000033 inset; 
}
  
.private-card figcaption{
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #000033;
}

.restspace {
    margin: 0 auto;
    width: 70%;
    text-align: center;
    justify-items: center;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: center;
}

.restspace img {
    width: 100%;
    height: 60vh;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

.restspace h2 {
    font-size: 30px;
    font-weight:700; 
    white-space:nowrap;
    margin: 50px auto 20px;
    text-align: center;
}

.restspace p {
    width: 60%;
    display: block;
    text-align: left;
    font-size: 18px;
    margin: 0 auto;
    margin-bottom: 50px;
}
/*
.restspace-cta {   
    width: 50%;
    height: 90px;
    background-color: #ab6520;
    border-radius: 15px;
    display: inline-block; 
    text-align: center;
    text-decoration: none;     
    margin: 16px auto;      
    white-space: nowrap; 
    color: #fff;
    font-size: 24px;
    line-height: 90px;
}
*/
/* ====== price ===== */

.fees-container {
    margin: 0 auto;
    width: 60%;
    text-align: center;
    padding-bottom: 50px;
}

.about-fees {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.about-fees img {
    display: inline-block;
    height: 40px;
}

.fees-container-top {
    display: flex;
    margin: 0 auto;
}

.fees-container-left,
.fees-container-right {
    width: 45%;
    margin: 0 auto;
    gap: 10%;
}

.fees-container-left p,
.fees-container-right p,
.fees-container-bottom p {
    text-align: center;
    display: block;
    font-size: 18px;
    margin: 0;
}

.fees-container-bottom {
    width: 100%;
    margin: 0 auto;
}

.fees-container-bottom .fees-img {
    position: relative;   
    display: inline-block;       
    margin: 0 auto; 
    margin-top: 50px;
}

.fees-container-bottom .fees-img img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.fees-container-bottom .fees-label {
    position: absolute;
    left: 50%;
    bottom: 24%;              
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    font-size: clamp(24px, 2vw, 20px);
    letter-spacing: 0.08em;
    white-space: nowrap;       
}

.fees-container-bottom h3 {
    font-size: 24px;
    margin-bottom: 24px;
}

.fees-container-bottom p {
    font-size: 18px;
    margin: 0;
}

.fees-rental {
    width: 100%;
    margin: 0 auto;
}

.fees-rental p {
    font-size: 24px;
}

.guidance {
    margin: 0 auto;
    width: 60%;
    height: auto;
    text-align: center;
    padding-bottom: 50px;
    margin-top: 50px;
}

.riyou-annai img {
    display: block;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 230px;
}

.guidance .fees-img {
    position: relative;   
    display: inline-block;       
    margin: 0 auto; 
    margin-bottom: 50px;
    width: 50%;
}

.guidance .fees-img img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.guidance .fees-label {
    position: absolute;
    left: 55%;
    bottom: 18%;              
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    font-size: clamp(16px, 2vw, 20px);
    letter-spacing: 0.08em;
    white-space: nowrap;       
}

.chiyo-tel {
    display: flex;
    justify-content: center;
    gap: 30px;            
    margin-top: 40px;
    margin: 0 auto;
    height: auto;
}

.chiyo-tel-left,
.chiyo-tel-right {
    display: flex;
    align-items: center;  
    gap: 12px;            
}

.chiyo-tel-left {
    justify-content: flex-end;
}

.chiyo-tel-right {
    justify-content: flex-start;
}

.chiyo-tel-left img,
.chiyo-tel-right img {
    width: 17%;          
    height: auto;
    flex-shrink: 0;
    display: block;  
}

.chiyo-tel-left a,
.chiyo-tel-right a {
    white-space:nowrap;
    text-decoration: none;
    font-size: 30px;
    color: #000033;
    font-weight: bold;
}

.guidance-txt {
    width: 90%;
    margin: 30px 0 auto;
}

.guidance-txt li {
    list-style: none;
    text-align: left;
    font-size: 18px;
}

.line-reservation {
    display: flex;
    width: 70%;
    height: 100px;
    background-color: #e3e1e1;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 50px;
}

.line-reservation img {
    width: 15%;
    height: auto;
    margin: 0 10px;
}

.line-reservation p {
    white-space:nowrap;
    text-align: left;
    display: block;
    margin-bottom: 0;
}

.schedule {
    margin: 0 auto;
    width: 40%;
    text-align: center;
    margin-top: 50px;
}

.toujitsu img {
    display: block;
    height: 52px;
    margin: 0 auto;
    margin-bottom: 50px;
    
}

.schedule .fees-img {
    position: relative;   
    display: inline-block;       
    margin: 30px auto 30px;
}

.schedule .fees-img img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.schedule .fees-label {
    position: absolute;
    left: 55%;
    bottom: 16%;              
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    font-size: clamp(24px, 2vw, 30px);
    letter-spacing: 0.08em;
    white-space: nowrap;       
}

.schedule p {
    white-space: normal;
    text-align: left;
    display: block;
    font-size: 20px;
}

/* ===== タブレット表示 ===== */
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .fees-container {
        width: 75%;
    }

    .guidance {
        width: 75%;
    }
}


@media screen and (min-width: 768px) and (max-width: 1023px){
    .fees-container {
        width: 80%;
    }

    .fees-container-left p,
    .fees-container-right p, 
    .fees-container-bottom p {
        font-size: 16px;
    }

    .fees-container-bottom .fees-label {
        bottom: 18%;              
    }

    .guidance {
        width: 80%;
    }

    .line-reservation {
        width: 75%;
    }

    .line-reservation p { 
        font-size: 14px;
    }

    .schedule p {
        font-size: 18px;
    }

}


/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    .fees-container {
        width: 80%;
    }

    .about-fees {
        width: 90%;
        padding-top: 50px;
    }

    .fees-container-top {
        flex-direction: column;
        column-gap: 15px;
    }

    .fees-container-left, 
    .fees-container-right {
        width: 100%;
    }

    .fees-container-top .fees-img {
        width: 100%;
    }

    .fees-container-bottom .fees-img {
        margin: 50px 0 30px;
    }

    .fees-container-left p, 
    .fees-container-right p, 
    .fees-container-bottom p {
        bottom: 30%;
    }

    .fees-container-bottom .fees-label {
        bottom: 5%;
        font-size: 16px;
    }

    .fees-container-bottom h3 {
        font-size: 20px;
    }

    .fees-rental p {
        font-size: 20px;
    }
    
    .guidance {
        width: 80%;
    }

    .guidance .fees-img {
        width: 100%;
        margin-bottom: 30px;
    }

    .guidance .fees-label {
        bottom: 10%;
        font-size: 18px;
    }

    .chiyo-tel {
        flex-direction: column;
        justify-content: center; 
        align-items: center;
    }

    .chiyo-tel-left {
        justify-content: center;
    }

    .chiyo-tel-right {
        justify-content: center;
    }

    .line-reservation {
        width: 100%;
        margin: 0 auto;
    }

    .line-reservation p {
        width: 80%;
        white-space: normal; 
    }

    .schedule {
        width: 60%;
    }

    .schedule .fees-img {
        margin: 30px auto 20px;
    }

    .schedule .fees-label {
        bottom: 5%;
    }

    .schedule p {
        font-size: 18px;
    }
}

/* ====== access ===== */

.access-container-top {
    margin: 0 auto;
    width: 70%;
    text-align: center;
}

.access-container-top h2 {
    font-size: 30px;
    font-weight: 700;
    white-space: nowrap;
    margin: 100px auto 50px;
    display: block;
    color: #c65705;
}

.about-access {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
}

.about-access > p {
    text-align: center;
    display: block;
    font-size: 16px;
    margin-bottom: 0;
}

.access-map {
    width: 100%;
    margin: 30px auto 50px;
    position: relative;
    aspect-ratio: 3 / 2;   
    overflow: hidden;
}

.access-map-frame {
    position: absolute;
    inset: 0;               
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;  
}

.access-container-bottom {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 50px;
}

.access-image-row {
    width: 100%;
    height: auto;
    display:flex;
    align-items:center;
    gap: clamp(24px,3vw,40px);
    margin: 24px 0;
}

.media{ 
    flex: 0 0 48%; 
    padding: 20px;
    box-sizing: border-box;
}

.media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    padding: 0;
}

.text { 
   width: 50%;
   height: auto;
   text-align: center; 
}

.text p {
    text-align: center;
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-top: 100px;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 70px solid #c65705;
    margin: 60px auto 0;
    transform: translateY(90%);
}

.access-image-row:last-child .triangle-down {
    display: none;
}

/* PC用（横長） */
@media screen and (min-width: 768px) {
    .access-map-frame {
        aspect-ratio: 3 / 2;   
    }
}

/* ===== タブレット表示 ===== */
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .access-container-top{ 
        width: 70%; 
    }

    .access-container-bottom {
        width: 75%;
        padding-bottom: 0;
    }
}


@media screen and (min-width: 768px) and (max-width: 1023px){
    .access-container-top{ 
        width: 80%; 
    }
    
    .access-map {
        margin-bottom: 0;
    }

    .access-container-bottom {
        width: 80%;
        padding-bottom: 0;
    }

    .text p {
        font-size: 24px;
    }
}

/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    .access-container-top {
        width: 80%;
    }

    .access-map{ 
        margin: 20px auto 0; 
    }

    .about-access > p {
        font-size: 14px;
    }

    .access-map-frame {
        aspect-ratio: 1 / 1;   
    }

    .access-container-bottom {
        width: 80%;
        padding-bottom: 0;
    }

    .access-image-row {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        gap: clamp(24px, 3vw, 40px);
        margin: 24px 0 0;
        flex-direction: column;
        justify-content: center; 
    }

    .media{
        flex: 0 0 auto;  
        width: 100%;      
        padding: 0;       
    }
    
    .media img{
        display: block;
        margin: 0 auto;   
    }

    .text {
        width: 100%; 
    }

    .text p {
        margin-top: 0;
        font-size: 24px;
        transform: translateY(30%);
    }

    .triangle-down {
        margin: 0 auto;
        transform: translateY(-3%);
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #000033;
    }

}    


/* ====== tokuteisho ===== */

.tokusho-wrapper {
    max-width: 960px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.03);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    line-height: 1.7;
    color: #000033;
}

.tokusho-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #000033;
}

.tokusho-intro {
    font-size: .9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.tokusho-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.8rem 0 .6rem;
    border-left: 4px solid #000033;
    padding-left: .6rem;
}

.tokusho-list {
    margin: 0;
    padding: 0;
}

.tokusho-list dt {
    font-weight: 600;
    margin-top: 1rem;
    font-size: .95rem;
}

.tokusho-list dd {
    margin: .2rem 0 0 0;
    font-size: .95rem;
}

.tokusho-note {
    margin-top: 2.5rem;
    font-size: .85rem;
    color: #777;
    border-top: 1px dashed #ddd;
    padding-top: 1rem;
}

/* タブレット表示 */
@media screen and (min-width: 1024px) {
    .tokusho-wrapper {
        margin: 2rem auto;
        padding: 1.8rem 1.3rem;
        
      }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .tokusho-wrapper {
        margin: 2rem 1rem;
        padding: 1.8rem 1.3rem;
      }
}

/* スマホ表示 */
@media (max-width: 767px) {
    .tokusho-wrapper {
      margin: 2rem 1rem;
      padding: 1.8rem 1.3rem;
    }

    .tokusho-title {
      font-size: 1.4rem;
    }
}

/* ====== 商品詳細ページ ===== */

.woocommerce #primary.content-area {
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}

/* セクション見出し（🔶をCSSで付ける） */
.room-section-title {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 1.4em;
}
  
.room-section-title::before {
    content: "🔶";
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 1rem;
}

.amenity-list,
.room-info-list,
.policy-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0 0 0 1.2em;
}

.amenity-list li {
  position: relative;
  margin-bottom: 0.25em;
}

.amenity-list li::before {
  content: "✔";
  position: absolute;
  left: -1.2em;
  top: 0;
  font-size: 0.9em;
}

.room-info-list li,
.policy-list li {
  position: relative;
  margin-bottom: 0.25em;
}

.room-info-list li::before,
.policy-list li::before {
  content: "・";
  position: absolute;
  left: -1em;
  top: 0;
}

/* ====== 投稿ページ ===== */

/* =========================================================
   Astraテーマの一覧レイアウトの上書き
   ========================================================= */

/* Flexbox/Gridの親要素（.ast-rowや.ast-archive-post）を見つけて上書き */
/* DevToolsで見ると .ast-separate-container .ast-article-post のあたりが怪しいです */

.ast-separate-container article.catch-item {
    width: 100%; 
    max-width: 100%;
    margin: 40px auto ; 
    padding: 0 !important; 
    box-sizing: border-box;
}

/* 投稿アイテムが横並びにならないように設定（Flex/Gridのアイテムとして振る舞うのをやめる） */
.ast-separate-container .ast-row {
    display: block; 
}

/* 投稿アイテム自体が持つ不要な余白をリセット */
.ast-separate-container .ast-archive-post,
.ast-separate-container .ast-row > .ast-article-post {
    padding: 0; 
    margin-left: 0;
    margin-right: 0;
}

.catch-item-inner { 
    position: relative;
    width: 80%;
    margin: 40px auto 0;
}

.catch-item-img {
    width: 100%;
}

.catch-item-img img {
  display: block;
  width: 100%;   
  height: auto;
}

.catch-item-head {
    position: absolute;
    display: flex;
    width: 90%;
    top: 30%;
    transform: translateX(-10%);
    white-space: nowrap;
    z-index: 20;
    justify-content: flex-end; 
    align-items: center; 
    gap: 12px;
    align-items: center;
    
}

.catch-item-head p {
    display: inline-block;
    text-align: left;
    margin: 0;
    padding: 6px 0;
    font-size: 20px;
    letter-spacing: 0.08em;
    white-space: nowrap;  
    flex-shrink: 1; 
    min-width: 0;     
}

.post-content-wrap {
    margin: 50px auto;
    width: 80%;
}

.post-content-wrap p {
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
}

/* ===== 投稿詳細ページ ===== */
#main.site-main {
    width: 70%;    
    margin: 0px auto;
}



/* ===== タブレット表示 ===== 
@media screen and (min-width: 1241px) and (max-width: 1285px) {
    .catch-item-head {
        top: 25%;
        transform: translateX(0%);
    }

    .catch-item-head p {
        font-size: clamp(14px, 1.6vw, 18px);
    }

    

}
*/
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .catch-item-head {
        top: 25%;
        transform: translateX(10%);
        gap: 10px;
        font-size: clamp(14px, 1.6vw, 18px);
    }

    .catch-item-head p {
        font-size: 18px;
    }

}


@media screen and (min-width: 768px) and (max-width: 1023px){
    #main.site-main.catch-archive,
    body.single-post #main.site-main,
    body.single #main.site-main  {
        width: 80%;
        margin: 0 auto;
    }

    .catch-item-head {
        top: 13%;
        transform: translateX(13%);
        gap: 10px;
        font-size: clamp(14px, 1.6vw, 18px);
    }

    .catch-item-head p {
        font-size: 15px;
    }

    /* --------------------------------------------------------------------- */
    /* ★ 投稿一覧 (.archive) と 詳細ページ (.single-post) の画像レイアウト修正 ★ */
    /* --------------------------------------------------------------------- */

    /* セレクタの共通化: body.archive.category-choka と body.single-post.category-choka を両方ターゲットにする */
    .category-choka .post-content-wrap .wp-block-columns,
    .category-choka .post-content-wrap .wp-block-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 16px; /* 画像のすき間 */
        margin: 0 auto;
    }
    
    /* 画像ブロック（またはカラム内の画像要素）を 2列レイアウトにする */
    .category-choka .post-content-wrap 
      figure.wp-block-image, /* 画像ブロック単体をターゲット */
    .category-choka .post-content-wrap 
      .wp-block-columns > .wp-block-column { /* カラムブロック内の列をターゲット */
        flex: 0 0 calc(50% - 8px);  /* 2列になるように幅を半分に (gap 16px / 2 = 8px) */
        max-width: calc(50% - 8px);
        margin: 0;
    }
    
    /* 画像自体の幅をそろえる */
    .category-choka .post-content-wrap 
      figure.wp-block-image img,
    .category-choka .post-content-wrap 
      .wp-block-columns img {
        width: 100%;
        height: auto;
        display: block;
    }
    

}

/* ===== スマホ表示 ===== */
@media screen and  (max-width: 767px) {
    #main.site-main.catch-archive  {
        width: 90%;
        margin: 0 auto;
    }

    .catch-item-head {
        top: 5%;
        transform: translateX(5%);
        gap: 10px;
        font-size: clamp(14px, 1.6vw, 18px);
    }

    .catch-item-head p {
        font-size: 15px;
    }
}
  

/* ====== 投稿詳細ページ ===== */

#main.site-main.catch-archive {
    width: 70%;
    margin: 0 auto;
}

.entry-content .wp-block-columns {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

header.entry-header .entry-title {
    font-weight: 700;
    margin-bottom: 40px;
}

.entry-meta {
    display: none;
}

.entry-content {
    margin-bottom: 0.8em;
}
/*
.entry-content {
    width: 80%;
    margin: 0 auto;
}*/