@charset "UTF-8";
/*
Theme Name: PAW Theme
*/
:root {
    --primary: #0F4C3A;
    --secondry: #F2F2F2;
    --accent: #D96704;
    --text: #524341;
    --base: #EDE6D6;

}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: "gotham", "zen-kaku-gothic-antique", sans-serif;
    font-weight: 400;  
    font-style: normal;
    color: var(--text);

}

body.page,
body.blog,
body.single{
    background-image: linear-gradient(#248b6c 1px, transparent 1px), linear-gradient(90deg, #248b6c 1px, transparent 1px);
    background-size: 16px 16px;
    background-color: var(--base);
}
body.page-id-293,
body.page-id-416 {
    background-color: var(--primary);
	 background-image: none;
}
    

@media screen and (min-width: 768px) {
    
    body.page,
	body.blog,
	body.single {
    background-image: linear-gradient(#248b6c 1px, transparent 1px), linear-gradient(90deg, #248b6c 1px, transparent 1px);
    background-size: 29px 29px;
    background-color: var(--base);
    }
	
body.page-id-293,
	body.page-id-416{
    background-color: var(--primary);
	    background-image: none;
}
	
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

h1 {
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 20%;
    text-align: center;

    color: var(--secondry);
}

h2 {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}

h3 {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}

h4 {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 700;
    }

p, ul, ol, a {
    font-size: 1.2rem;
    line-height: 1.8;
}


.page_title {
    display: block;
    width: 100%;
    background-color: var(--primary);
    border-radius: 0 0 50px 50px ;
    padding: 16px 0;
}


h2.section_title {
    display:inline-block;
    font-size: 2.2rem;
    width: fit-content; 
    line-height: 1.5;
    letter-spacing: 20%;
    color: var(--secondry);

    border-radius: 10vh 100vh 100vh 10vh;
    background: var(--primary);
    padding: 1rem 2rem 1rem 4rem;

    position:relative;
    justify-content: flex-start;

    margin: 20px 0 0;
}

h2.section_title::before{
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: var(--base);

  z-index:100;
}


@media screen and (min-width: 768px) {
    
    h1 {
        font-size: 2.6rem;
    }
    
    h2 {
        font-size: 2.4rem;
    }
    
    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.8rem;
    }
    
    p, ul, ol, a {
        font-size: 1.6rem;
    }

    .page_title {
        padding:60px 0;
        border-radius: 0 0 170px 170px;
    }

    h2.section_title {
    display:inline-block;
    font-size: 3rem;
    padding: 1rem 3rem 1rem 6rem;
    margin-left: 6.94vw;
    }

    h2.section_title::before{
    position: absolute;
    top: calc(50% - 10px);
    left: 20px;
    width: 20px;
    height: 20px;
    }
}


.container {
    width: 100%;
    max-width: 2100px;
    margin: 0 auto;
}

/* ヘッダー */

.header {
    position: relative;
    background-color: var(--primary);
    padding: 10px 5.33vw;
    height: 100%;
    width: 100%;
    
    display: flex;
    align-items: center;
}

.header_logo {
    width: 29.33vw;
    height: 10.66vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header_logo p {
    font-size: 1rem;
    letter-spacing: 20%;
}

.header_nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;

    position: fixed;
    top: 0;
    right: 0;
    width: 60vw;
    height: 100vh;

    background-color: var(--secondry);
    box-shadow: -2px 0px 4px 0 rgba(82, 67, 65, 0.20);
    transform: translateX(110%);
    transition: transform 0.3s ease;

    z-index: 400;
}
    

.header_nav.open {
    transform: translateX(0);
}

.header_nav nav ul{
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;

    font-size: 1.6rem;
    font-weight: 700;

}

.menu_buttons {
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
}



.header_location {
    width: 8vw;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 30vw;
    top: 15px;
    
}

.header_location img {
    width: 100%;
}

/* 言語切り替えスイッチ */

.header_en {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10.66vw;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 20vw;
    top: 10px;
    
}

.bogo-language-switcher {
	display: flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.bogoflags
 {
	display:none;
}
 .bogo-language-name li,
 .bogo-language-name a{
	color: var(--secondry);
	font-size:1.0rem;
	font-weight:700;
	line-height: 0;
	text-align:center;
	text-decoration:underline;
}

.hamburger {
    background-color: var(--secondry);
    box-shadow: 0 2px 10px var(--Base2, #52434121);

    width: 13.33vw;
    aspect-ratio: 5 / 4;
    border-radius: 20px;
    position: fixed;
    right: 5.33vw;
    top: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.06vw;

    z-index: 500;
}

.hamburger span {
    width: 8vw;
    height: 2px;
    border-radius: 1px;
    background-color: var(--primary);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.open {
    background-color: transparent;
    box-shadow: none;
}


.hamburger.open span:nth-child(1){
    transform: rotate(-45deg) translateY(8px) ;
}

.hamburger.open span:nth-child(2){
    opacity: 0;
}

.hamburger.open span:nth-child(3){
    transform: rotate(45deg) translateY(-8px) ;
}

@media  screen and (min-width: 768px) {
    
    .header {
        justify-content: space-between;
        padding: 10px 6.94vw;
    }

    .header_logo {
        width: 200px;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;

        color: var(--secondry);

        flex-grow: 0;
    }

    .header_logo p {
        white-space: nowrap;
    }

    .header_logo img {
        width: 200px;
        height: 60px;
        aspect-ratio: 10/3;
        
    }

    .header_nav nav {
        flex: 1;
    }

    .header_nav nav ul {
        width: 100%;
        flex-direction: row;
        padding: 0 0 0 8.33vw;
        justify-content: center;
        row-gap: 12px;
        column-gap: 60px;

        flex-wrap: wrap;
        white-space: nowrap;
        align-items: center;

        color: var(--secondry);
    }

    .header_nav nav ul li a {
        font-size:1.6rem
    }

    .header_nav nav ul li a:hover {
        color: var(--accent);
    }

    .header_nav {
        height: fit-content;
        width: fit-content;
        
        gap: 0;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        background-color: transparent;
        box-shadow: none;
        transform: translateX(0);

        flex-grow: 1;
    }

	 .bogo-language-name li,
	 .bogo-language-name a{
		color: var(--primary);
		 background-color: var(--secondry);
		 border-radius:100vh;
		 padding: 4px 12px;
		line-height: 1.2;
		text-decoration:none;
	}
}


/* 空室確認 */
.vacancy {
    position: fixed;
    bottom: 3.3vh;
    right: 3.73vw;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    
    width: fit-content;
    min-height: 16rem;
    
    z-index: 300;
    
    opacity: 0;
    animation: fadeIn 2s ease 2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.vacancy_close {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: end;
    box-shadow: 0 2px 1px var(--Base2, #52434141);

}

summary.vacancy_close {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--secondry);
    box-shadow: none;
    list-style: none;
    cursor: pointer;
}

summary.vacancy_close::before,
summary.vacancy_close::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background-color: var(--text);
    border-radius: 2px;
    transform-origin: center;
}

summary.vacancy_close::before {
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.3s ease;
}

summary.vacancy_close::after {
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.vacancy[open] > summary.vacancy_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.vacancy[open] > summary.vacancy_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 1;
}

.vacancy_btn {
    width: 90px;
    margin: 0 auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 2px 4px var(--Base2, #52434124));
}
.vacancy_btn svg {
    width: 100%;
    height: auto;
    display: block;
	overflow: visible;
}



@media screen and  (min-width: 768px){
    .vacancy {
        top: 74.9vh;
        right: 1.5vw;
    }

    details.vacancy {
        min-height: 16rem;
    }

    .vacancy_close img {
    width: 20px;
    height: 20px;
}
    .vacancy_btn {
    width: 110px;
    height: auto;
}

}


/* フッター */
footer {
    
    background: var(--secondry);

}

.footer {
    padding: 30px 5.33vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer p .footer a{
    font-size: 1.2rem;
}

.footer_logo {
    width: 53.33vw;
}

.footer_info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    width: fit-content;
}

.info_title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 20%;
}


.info_txt a {
    color: var(--primary);
    text-decoration: underline;
}

.info_contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info_contact div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.info_contact img {
    width: 4vw;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.footer_nav {
    padding: 0 2.78vw;
    flex-grow: 1;
}

.footer_nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;

    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 20%;

}

@media screen and (min-width: 768px) {
    .footer {
        padding: 30px 6.94vw;
        flex-direction: row;
        justify-content: space-between;
    }

    .footer_logo {
        width: 200px;
    }

    .info_contact img {
        width: 15px;
        aspect-ratio: 1/1;
        object-fit: contain;
    }

    .footer p, .footer a{
        font-size: 1.2rem;
    }
    
}


/* フッターボタン*/
.footer_buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
}


.instagram {
    width: 100%;
    display: flex;
    justify-content: center;
    gap:30px;
}

.instagram img {
    display: block;
    object-fit: contain;
    width: 50px;
}


.inquiry, .book {
    padding: 6px 20px;
    border-radius: 8px;
    border: 4px solid var(--accent);
    box-shadow: 0 2px 10px var(--Base2, #52434121);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.inquiry {
    background-color: var(--secondry);
}

.book {
    color: var(--secondry);
    background-color: var(--accent);
}

.inquiry img, .book img {
    height: 100%;
    aspect-ratio: 1/1;
}



.inquiry p, .book p {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 20%;
    width: 11.2rem;
    white-space: nowrap;
    text-align: center;
    
}

/* フッター下　*/

.footer_small {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.footer_small p {
    font-size: 0.8rem;
}

.footer_small a {
    font-size: 0.8rem;
    text-decoration: underline;
}



.pc {
    display: none;
}

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


.fadein {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;

}

.fadein.visible {
    opacity: 1;
    transform: translateY(0);
}

/* TOP */
.hero {
    position: relative;
    padding: 0 2.66vw;
    width: 100%;
    overflow: hidden;
}


.hero::before {
    content: "";
    position: absolute;
    inset:0;
    background-color: #0f4c3a77;
    width: 100%;
    height: calc(100vh - 13.33vw * 5 / 4);
    border-radius: 390px;
    z-index: 50;
    opacity: 1;
    animation: fadeOut 1s ease 4s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.hero img {
    width: 100%;
    height: calc(90vh - 13.33vw * 5 / 4);
    border-radius: 390px;
    object-fit: cover;
    object-position: center;
}

.hero_title {
    font-size: 1.8rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    letter-spacing: 50%;
    line-height: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    z-index: 100;
    opacity: 0;
    animation: fadeInOut 5s ease 0s forwards, translateY 5s ease 0s forwards;

}

@keyframes fadeInOut {
    from {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes translateY {
    from {
        transform: translate(-50%, -40%);
    }
    20% {
        transform: translate(-50%, -50%);
    }
    80% {
        transform: translate(-50%, -50%);
    }
    to {
        transform: translate(-50%, -40%);
    }
}

@media screen and (min-width: 768px) {
    .hero {
        padding: 0 5.33vw;
    }

    .hero::before {
        height: calc(100vh - 5.33vw * 5 / 4);
    }

    .hero img {
        height: calc(90vh - 5.33vw * 5 / 4);
    }
    
}

/* コンセプト */
.cards {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 100px 5.33vw;
}

.concept_card {
    display: flex;
    flex-direction: column;
    opacity: 1;

}

.card_text {
    position: relative;
    width: 100%;
    aspect-ratio: 7/6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: -60px;
    background-position: center;
}

.concept_card:nth-child(1) .card_text{
    background-image: url(images/brand/oval1.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.concept_card:nth-child(2) .card_text{
    background-image: url(images/brand/oval2.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.concept_card:nth-child(3) .card_text{
    background-image: url(images/brand/oval3.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.viewall a{
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: var(--primary) 1px solid;
    color: var(--primary);
}

.viewall img {
    width: 18px ;
    height: 18px;
    object-fit: contain;
}

.card_photo {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 30px;
    object-fit: cover;
    z-index: 100;
    box-shadow: 0 4px 10px var(--Base2, #52434179);
}

.gif{
    position: absolute;
    width: 100px;
    aspect-ratio: 1/1;
    z-index: 200;

}

.concept_card:nth-child(odd) .gif{
    top: 50%;
    left: 0;
}

.concept_card:nth-child(even) .gif{
    top: 50%;
    right: 0;
}

@media screen and (min-width: 768px) {
    .concept_card {
        flex-direction: row;
    }

    .card_text {
        width: 37.5vw;
        margin-right: -2.08vw;
    }

    .card_photo {
        width: 55.56vw;
        height: auto;
    }

    .concept_card:nth-child(2) {
        flex-direction: row-reverse;
    }

    .concept_card:nth-child(2) .card_text {
        margin-right: 0;
        margin-left: -2.08vw;
    }

    .gif {
        width: 200px;
    }
}

/* 注意喚起 */

.warning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin: 20px 5.33vw 60px;
    padding: 20px 5.32vw;
    
    border-radius: 30px;
    border: 4px dashed var(--accent);

}

.warning_topic {
    width: fit-content;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 0;

    color: var(--secondry);
}

.warning_txt {
    width: fit-content;
    text-align: center;
}

.warning_topic img {
    width: 55px;
}

.warning_img {
    display: flex;
    justify-content: center;
}

.warning_img img{
    width: 20vw;
    height: 100%;
}

@media screen and (min-width:768px){
    .warning_img img{
        width: 4.86vw;
    }

    .warning {
        width: fit-content;
        flex-direction: row;
        gap: 20px;
        padding: 20px 5.33vw;
        margin: 0 auto 100px;
    }
}


/* Facility */

.map {
    width: 100%;
    padding: 40px 5.33vw;
    margin: 40px auto 0;
}

.popup {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3px 0;
    border-bottom: var(--primary) 1px solid;
    color: var(--primary);
}

.popup img {
    width: 18px ;
    height: 18px;
    object-fit: contain;
}

.facilities {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 5.33vw 60px;
    gap: 20px;
}

.facility {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    height:fit-content;
    padding: 30px 2.66vw;
    
    background-color: var(--base);
    border-radius: 30px;
    border: var(--primary) 2px solid;
}

.facility:nth-of-type(even) {
    background-color: var(--primary);
}
.facility:nth-of-type(even) h3,
.facility:nth-of-type(even) p ,
.facility:nth-of-type(even) ul,
.facility:nth-of-type(even) ul li::before {
    color: var(--secondry);

}

.facility:nth-of-type(even) .popup {
    color: var(--secondry);
    border-bottom: var(--secondry) 1px solid;
}

.facility_photo {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 30px;
}

.facility_detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 0 5.33vw;
   
    background-color: #52434193;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:10px;
    z-index: 600;

    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.facility_detail.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease;
}

.facility_detail button{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: flex-end;
}

.facility_detail button img {
    width: 40px;
    height: 40px;
}

.facility_detail__content {
    width: 100%;
    max-height: calc(100vh - 340px);
    background-color: var(--base);
    border-radius: 10px;
    color: var(--text);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    
    padding: 20px 8vw;
}

.facility_detail__content img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.facility p {
    text-align: start;
}

.facility ul {
    width: fit-content;
}

.facility ul li::before {
    content: "✓";
    color: var(--primary);
    font-weight: 700;
    display: inline-block;
    width: 20px;
    
}

.facilities .cat {
    width: 140px;
    height: 140px;
    object-fit: contain;
    
    position: absolute;
    bottom: -40px;
    left: 0;

    z-index: 500;
    
}

@media screen and (min-width: 768px) {

    .map {
        padding: 60px 15.27vw;
        max-width: 1440px;
    }

    .popup {
        gap: 10px;
        padding: 6px 0;
    }

    .popup img {
        width: 24px;
        height: 24px;
    }


    .facilities {
        width: 100%;
        max-width:1200px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: start;
        margin:0 auto;
        padding: 80px 0;
        gap: 40px;
    }

    .facility {
        height: 100%;
        border-width: 4px;
    }

    .facility:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc((100% - 40px) / 2);
        justify-self: center;
    }

    .facility > h2,
    .facility > p{
        width: 100%;
        max-width: 507px;
    }
    
    .facility ul {
        width: fit-content;
        padding-left: 0;
    }
    .facility li {
        width: fit-content;
    }

    .facility ul li::before {
        width: 24px;
    }
    .facility:nth-of-type(even) {
    background-color: var(--base);
    }
    .facility:nth-of-type(even) h3,
    .facility:nth-of-type(even) p ,
    .facility:nth-of-type(even) ul {
        color: var(--text);
    }
    .facility:nth-of-type(even) ul li::before {
        color: var(--primary);

    }
    .facility:nth-of-type(even) .popup {
        color: var(--primary);
        border-bottom: var(--primary) 1px solid;
    }

    .facilities .cat {
        width: 200px;
        height: 200px;
    }

    #detail_lounge .cat {
        left: -10%;
        bottom: -8%;
    }

    #detail_shower .cat {
        left: 50%;
        bottom: -20%;
    }
    
    .facility_detail__content {
        width: 63vw;
        aspect-ratio: 16/9;
        max-height: calc(100vh - 120px);
        background-color: var(--base);
        
    }

    .facility_detail__content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0 0 40px;
}

.faq_item {
    position: relative;
    padding: 10px 20px 10px 64px;
    min-height: 44px;
    display: flex;
	flex-direction:column;
    align-items: flex-start;
    cursor: pointer;
    background-color: var(--secondry);
    border-radius: 20px;
    box-shadow: 0 2px 10px var(--Base2, #52434121);
}

.faq_item summary {
	width:100%;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 700;
	
}
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}
.faq_item p {
		width:100%;
	    margin: 0;
    padding: 20px 0 0;
}

.faq_item summary::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 11px solid #7f7672;
    transition: transform 0.2s ease, border-bottom-color 0.2s ease;
}

.faq_item[open] {
    border-radius: 28px;
}

.faq_item[open] summary::before {
    transform: translateY(-50%) rotate(0deg);
    border-bottom-color: var(--accent);
}

/* お問い合わせフォーム */

.contact {
    width: 100%;
}

.fukidashi {
    margin: 0 auto 40px;
    position: relative;
    width: 100%;
    padding: 16px 32px;
    color: var(--secondry);
    border-radius: 100vh;
    background-color: var(--text);
    isolation: isolate;
}

.fukidashi::after {
    display: block;
    content: "";
    position: absolute;
    top: 99%;
    left: 50%;
    z-index: -1;
    width: 20px;
    height: 12px;
    box-sizing: border-box;
    background-color: var(--text);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    translate: -50% 0;
}


.contact_inner {
    width: 100%;
    background-color: var(--primary);
    padding: 30px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.contact_inner h3 {
    color: var(--secondry);
}

.contact_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact_field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact_field label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--secondry);
}

.required {
    display: inline-block;
    text-align: center;
    padding: 6px 8px;
    border-radius: 10px;
    background-color: var(--accent);
    color: var(--secondry);
    font-size: 1.4rem;
    line-height: 120%;
}

.contact_field input,
.contact_field select,
.contact_field textarea {
    width: 100%;
    border: 1px solid var(--secondry);
    background-color: #fff;
    color: var(--text);
    font-size: 1.6rem;
    padding: 6px 20px;
}

.contact_field input::placeholder,
.contact_field select,
.contact_field textarea::placeholder {
    color: #7b7b7b;
}

.contact_field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #7b7b7b 50%), linear-gradient(135deg, #7b7b7b 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.contact_field textarea {
    min-height: 230px;
    resize: vertical;
}

.contact_agree {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 1.4rem;
    color: var(--secondry);
}

.contact_agree input {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: 18px;
    height: 18px;
    border: 1px solid var(--secondry);
    accent-color: var(--secondry);
}

.contact_agree a {
    color: var(--secondry);
    text-decoration: underline;
    font-size: 1.4rem;
}

.contact_submit {
    width: fit-content;
    margin: 12px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 40px;
    border-radius: 10px;
    background-color: var(--secondry);
    color: var(--text);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.contact_submit span {
    font-size: 2rem;
}

.contact_inner p {
    color: var(--secondry);
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
}

.contact_result {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.contact_result img {
    width: 30px;
    height: 30px;
}

.contact_result.is_visible {
    display: flex;
}

.contact_result_title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #4AFF93;
}

.contact_cat {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

@media screen and (min-width: 768px) {

    .faq {
        padding:0 0 100px;
        gap: 20px;
    }

    .faq_item {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        min-height: 60px;
        padding: 16px 30px 16px 82px;
    }

    .faq_item summary{
        font-size: 1.8rem;
    }

    .faq_item summary::before {
        left: 30px;
    }

    .faq_item p {
        padding: 20px 0 0;
    }

    .fukidashi {
        width:fit-content;
    }

    .contact_inner {
        padding: 50px min(8vw, 120px) 80px;
    }

    .contact_form {
        max-width: 980px;
    }

    .contact_field textarea {
        min-height: 280px;
    }

    .contact_inner p {
        font-size: 1.6rem;
    }

    .contact_result {
        gap: 8px;
    }

    .contact_inner {
        position:relative;
    }
    .contact_cat {
        width: 200px;
        height: 200px;
        position: absolute;
        bottom:0%;
        left:70%;
    }
}


.rooms {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 5.33vw 30px;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background-color: var(--base);
    border-radius: 30px;
    border: var(--primary) 2px solid;
    padding: 20px 2.66vw;
}

.room_img_large {
    width: 100%;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
}

.room:nth-child(1) .room_img_large {
    background-image: url(images/photos/room1.jpg);
}

.room:nth-child(2) .room_img_large {
    background-image: url(images/photos/210.jpg);
}

.room_img_small {
    display: flex;
	width:100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.room_img {
    width: 100%;
    aspect-ratio: 4/3;
    border: 2px solid transparent;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.room_img.active {
    border-color: var(--accent);
}

.room:nth-child(1) .room_img:nth-child(1) { background-image: url(images/photos/room1.jpg); }
.room:nth-child(1) .room_img:nth-child(2) { background-image: url(images/photos/roommap6.jpg); }
.room:nth-child(1) .room_img:nth-child(3) { background-image: url(images/photos/207.jpg); }
.room:nth-child(1) .room_img:nth-child(4) { background-image: url(images/photos/roomma8.jpg); }

.room:nth-child(2) .room_img:nth-child(1) { background-image: url(images/photos/210.jpg); }
.room:nth-child(2) .room_img:nth-child(2) { background-image: url(images/photos/212.jpg); }
.room:nth-child(2) .room_img:nth-child(3) { background-image: url(images/photos/212-2.jpg); }
.room:nth-child(2) .room_img:nth-child(4) { background-image: url(images/photos/212.jpg); }

.room_detail {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.room_detail li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
        gap: 10px;
    }

.room_detail li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--accent);
}

/* アメニティ */

.amenities {
    padding: 20px 5.33vw;
    display: flex;
    justify-content:center;
}
.amenity {
    width: 100%;
    /* padding: 40px 20px 30px; */
    display: flex;
    flex-direction: column;
    gap: 20px;

    background-color: var(--base);
    border-radius: 30px;
    border: var(--primary) 2px solid;
    padding: 20px 5.33vw;
}

.amenity_list,
.cautions_list {
    color: var(--text);
}


.amenity_list li::before {
    content: "•";
    color: var(--primary);
    font-weight: 700;
    display: inline-block;
    width: 20px;
    
}

.cautions_list li::before {
    content: "※";
}

/* 共用部分 */
.shared {
    width: 100%;
    padding: 20px 5.33vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

}

.shared img {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 30px;
    object-fit: cover;
    object-position: center;
}

.reason {
    width: 100%;
    background-color: var(--primary);
    color: var(--secondry);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px 5.33vw 20px;
}

.reason h2 {
    color: var(--secondry);
    margin-bottom: 10px;
}

.reason p,
.reason span {
    width:100%;
    color: var(--secondry);
}

.reason span {
    font-weight: 700;
}

.reason_cat {
    display: block;
    width: 150px;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .rooms {
        flex-direction: row;
        padding: 60px 0;
        margin: 0 auto;
        gap:60px;
        width:100%;
        max-width: 1200px;
    }

    .card{
        gap:40px;
        border-width:4px;
    }

    .shared {
       flex-direction: row;
        padding: 60px 0;
        margin: 0 auto;
        gap:60px;
        width:100%;
        max-width: 1200px;
    }


    .shared img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .amenities {
        padding: 60px 0 40px;
    }

    .amenity {
        width:fit-content;
        border-width:4px;
        max-width: 1400px;
    }


    .amenity,
    .shared,
    .reason {
        align-items: center;
    }

    .amenity_list {
        width:100%;
    }
    .cautions_list {
        width: fit-content;

    }
    .reason p {
        max-width: 62rem;
    }

    .reason_cat {
        width: 200px;
        height: 200px;
    }
}

/* Access */

.access_map {
    width: 100%;
    padding: 20px 5.33vw 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.googlemap iframe,
.topic_image {
    width: min(100%, 320px);
    height: 240px;
    border-radius: 30px;
    object-fit: cover;
}

.access_map_info {
    width: fit-content;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.access_map_info h2 {
    text-align: left;
}

.access_btn {
    border: 4px solid var(--accent);
    border-radius: 8px;
    background-color: var(--secondry);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 20px;
    width: fit-content;
    box-shadow: 0 2px 10px var(--Base2, #52434121);
}

.access_btn span {
    font-weight: 700;
    letter-spacing: 0.2em;
    white-space: nowrap;
}

.access_btn img {
    width: 24px;
    height: 24px;
}

.access_topics {
    width: 100%;
    padding: 0 5.33vw 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.access_topic {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.access_topic > h3 {
    width: 100%;
}

.access_block {
    width: 100%;
    max-width: 320px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.access_block h4 {
    text-align: left;
    display: flex;
    align-items: center;
}

.access_block h4::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--accent);
    margin-right: 8px;
}


.access_block a {
    color: var(--primary);
    text-decoration: underline;
    word-break: break-all;
}

/* 観光情報 */
.sightseeing {
    width: 100%;
    padding:40px 0 60px;
    background-color: var(--primary);

    display:flex;
    flex-direction:column;
    gap:20px;

}

.sightseeing h3,
.sightseeing p {
    color: var(--secondry);
}


.sightseeing .section_title {
    color: var(--primary);
    background-color: var(--secondry);
}


.sightseeing .section_title::before{
  background: var(--primary);
}

.spots {
    display: grid;
    padding: 0 5.33vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
}

.spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.spot img {
    width: min(100%, 140px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}


.spot p {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .card {
        border-width: 4px;
    }

    .access_map {
        padding: 60px 0 100px;
        max-width:1200px;
        margin:0 auto;
    }
    
    .access_map .card {
        flex-direction: row;
        justify-content: space-around;
        width:100%;
    }

    .googlemap iframe {
        width: 100%;
        aspect-ratio: 4 / 3;
        min-height: 300px;
    }

    .access_map_info {
        gap: 40px;
        padding: 20px 0;
        white-space: nowrap;
    }

    .access_map_info a {
        width: fit-content;
    }

    .access_topics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        padding: 0 0 100px;
        gap: 60px;
        max-width:1200px;
        margin:0 auto;
        
    }

    .access_topic {
        width: 100%;
    
    }

    .access_topic.card {
        position: relative;
        height: 100%;
        justify-content: flex-start;

        gap: 40px;

    }

    .access_topic img {
        width: 480px;
        height: 360px;
    }
    .access_block {
        max-width: none;
    }

    /* 観光情報 */

    .spots{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 30px;
        
    }   

    .sightseeing {
        padding: 60px 6.94vw 100px;
    }

    .spot img {
    width: min(100%, 350px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}
}


.blog_archive {
	width:100%;
}

.blog_list {
	padding: 20px 5.33vw 60px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.blog_card {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
	gap:10px;

    background-color: var(--base);
    border-radius: 30px;
    border: var(--primary) 2px solid;
    padding: 10px 2.66vw;
}

.blog_card a {
	display: block;
}

.blog_thumb {
	width: 30vw;
	aspect-ratio: 4 / 3;
	border-radius: 30px;
	overflow: hidden;
}

.blog_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.blog_meta {
	display: flex;
	height:100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	flex: 1;
}

.blog_category {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--secondry);
	font-weight: 700;
	border-radius: 20px;
	padding: 4px 11px;
	background-color: var(--text);
	min-width: 6em;
	text-align: center;
}

.blog_category_info {
	background-color: var(--accent);
}

.blog_category_blog {
	background-color: var(--primary);
}

.blog_date {
	font-size: 1.0rem;
	line-height: 1.2;
	font-weight: 700;
}

.blog_meta h3 {
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: 700;
	text-align: left;
}

/* ページネーション */
.Pagination {
	width: fit-content;
	background: var(--primary);
	margin: 0 auto 60px;
	display: flex;
	align-items: center;
	border: solid 2px var(--primary);
	border-radius: 100vh;
	overflow: hidden;
}
.Pagination > * + * {
	border-left: solid 2px var(--secondry);
}
.Pagination-Item-Link {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 40px;
	height: 40px;
	background: var(--primary);
	font-size: 1.2rem;
	color: var(--secondry);
	font-weight: 700;
	transition: all 0.2s linear;
}
.Pagination-Item-Link-Icon {
	width: 20px;
}
.Pagination-Item-Link.isActive {
	background: var(--secondry);
	color: var(--primary);
	pointer-events: none;
}
.Pagination-Item-Link:not(.isActive):hover {
	background: var(--secondry);
	color: var(--primary);
	transition: all 0.2s linear;
}

/* 個別記事ページ */
.page_section,
.article_page {
	padding: 40px 20px 60px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.article_head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    gap: 10px;
}

.article_head h1 {
	color: var(--text);
    text-align: left;
	letter-spacing: 0;
}

.article_thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.page_section img,
.article_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.article_body {
	color: var(--text);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page_section h2,
.article_body h2 {
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.page_section h2::before,
.article_body h2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 1.8rem;
    background-color: var(--accent);
    margin-right: 8px;
}

.page_section p,
.article_body p {
	font-size: 1.4rem;
	line-height: 1.8;
}

.article_back a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.4rem;
	line-height: 1.8;
}

.article_back img {
	width: 24px;
	height: 24px;
}

.page_card,
.article_card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;

    background-color: var(--base);
    border-radius: 30px;
    border: var(--primary) 2px solid;
    padding: 20px 2.66vw;
    
}

@media screen and (min-width: 768px) {

	.blog_list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 30px;
		padding: 40px 6.94vw 100px;
	}

	.blog_card {
		width:fit-content;
		padding: 20px 20px;
		margin:0 auto;
		flex-direction: column;
		border-width: 4px;
		gap:20px
	}
	
    .blog_date, .blog_category {
        font-size: 1.2rem;
    }

	.blog_thumb {
		width: 100%;
		min-width: 120px;
		aspect-ratio: 4 / 3;

	}

	.blog_meta {
		width:100%;
	}

	.blog_meta h3 {
		font-size: 1.6rem;
	}

	.blog_meta p {
		font-size: 1.2rem;
	}
    .page_section,
	.article_page {
		max-width: 920px;
		margin: 0 auto;
		padding: 56px 40px 100px;
	}

    .page_section h2::before,
    .article_body h2::before {
    height: 2.4rem;
}

    .article_body {
        
        padding: 0 100px;
    }

    .page_card,
    .article_card {
                gap:40px;
        border-width:4px;
    }
}