/* top.cssから拝借 */
:root {
    /* カラーパレット */
    --color-primary: #F1404B;
    --color-secondary: #252C41;
    --color-white: #fff;
    --color-black: #000;
    --color-background-light: #fff9e6;
    --color-background-gray: #F4F5F9;
    --color-grid: #dddfe6;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-overlay: rgba(0, 0, 0, 0.3);
    
    /* スペーシング */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 50px;
    
    /* 角 */
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 40px;
    --radius-xl: 80px;
    --radius-round: 50%;
    --radius-pill: 100px;
    
    /* 影 */
    --shadow-light: 0 -5px 20px var(--color-shadow);
    --shadow-medium: 4px 4px 0px 0px var(--color-primary);
    --shadow-dark: 4px 4px 0px 0px var(--color-overlay);
    --shadow-box: 5px 5px 5px rgba(0, 0, 0, 0.2);
    
    /* 文字サイズ */
    --font-size-xs: clamp(0.5rem, 0.833rem + 0.5vw, 1.5rem);
    --font-size-sm: clamp(1rem, 0.506rem + 0.6vw, 1.5rem);
    --font-size-md: clamp(1rem, 2vw, 1.8rem);
    --font-size-lg: clamp(2.5rem, 5vw, 5rem);
    --font-size-xl: clamp(24px, calc(10px + 5vw), 80px);
    
    /* レイアウト */
    --hero-step: 300px;
}

/*
================================================================================
画像の右クリック、長押しで保存禁止
================================================================================
*/
img{
    /* PCの右クリック禁止 */
    pointer-events: none !important;
}

img{
    /* SPの長押し禁止 */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-touch-callout: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}


/*
================================================================================
共通スタイル
================================================================================
*/

body {
    font-family: 'Noto Sans JP', sans-serif;
}


/*
================================================================================
子ページ見出し用
================================================================================
*/
.childPage-header {
    margin-bottom: 50px;
    width: 100%;
    text-align: center;
    padding: 80px 20px 40px;
    /* 方眼紙 */
    background-color: var(--color-background-light);
    background-image: 
        linear-gradient(var(--color-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: 1rem 1rem;
    background-position: center;
    /* 下側の影 */
    box-shadow: inset 0px -10px 20px -10px var(--color-overlay);
}

.page-about .childPage-header {
    margin-bottom: 0px;
}

.childPage-header h1{
    margin: 0;
    font-size: var(--font-size-lg);
}

.childPage-header img{
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}

.childPage-header hr{
    border-bottom: 1px solid var(--color-secondary);
    width: 90%;
    max-width: 1000px;
}

/*
================================================================================
faq.php
================================================================================
*/
/* アコーディオンパネル用 */
/* アコーディオン全体 */
.accordion-area{
    list-style: none;
    width: 90%;
    max-width: 900px;
    margin: 40px auto 80px;
    color: var(--color-secondary);
    padding: 0;
}

.accordion-area li{
    margin: 10px auto;
    border-radius: 15px;
    background-color: #F4F5F9;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

/* balanceを解除 */
.accordion-title, .accordion-area li h3{
    text-wrap: wrap;
}

.accordion-area li:not(:has(.accordion-title.close)):hover {
    background-color: #e6e6ee;
}

/* アコーディオンタイトル */
.accordion-title{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 10px 7px;
    transition: all .5s ease;
    margin: 0;
    line-height: 130%;
}

/* アコーディオンで現れるエリア */
.accordion-box {
    border-top: 1px solid var(--color-secondary);
    display: none;
    background: #f3f3f3;
    padding: 15px 7px;
}

.accordion-box h3{
    display: flex;
    align-items: center;
    font-size: 1.05em;
    font-weight: 700;
    margin: 0;
    line-height: 130%;
}

.accordion-box p{
    font-size: var(--font-size-sm);
    margin: 5px auto;
}

/* faqのみ */
.faq li .accordion-title::before{
    content: "Q";
    color: var(--color-primary);
    font-size: 1.5em;
    margin-right: 10px;
}

.faq li .accordion-box h3::before{
    content: "A";
    color: #2E86E4;
    font-size: 1.8em;
    margin-right: 10px;
}


/*
================================================================================
comment.php
================================================================================
*/
/* アコーディオン部分はfaqを使い回す */
/* チェックマーク */
.comment li{
    position: relative;
}

.comment li .accordion-title::before{
    content: "";
    display: inline-block;
    background-image: url(../img/icon_check.svg);
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-position: center;
    background-size: contain;
}

/* コメントした人の名前 */
.comment-name{
    margin-top: 10px;
    text-align: right;
    font-weight: 600;
}

/* 右側の＋と✕ */
.comment li .accordion-title::after{
    transition: all .5s ease;
    position: absolute;
    right: 0;
    content: "+";
    color: var(--color-secondary);
    font-size: 1.7em;
    margin-right: 20px;
}

.comment li .accordion-title.close::after{
	transform: rotate(45deg);
}


/*
================================================================================
not foundページ
================================================================================
*/
#notFound{
    text-align: center;
}

#notFound p{
    font-size: var(--font-size-xs);
}


/*
================================================================================
guestNoteのスタイル
================================================================================
*/
/* 灰色の帯 */
#guest .section-bg{
    background-color: var(--base); /* 灰色部分 */
    padding: 25px 0; /* 上下の余白 */
}

/* 中央寄せの内容 */
#guest .section-inner{
    width: 90%; /* コンテンツ幅 */
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-background-gray);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
}

/* タイトル用ラベル */
#guest h3{
    position: relative;
    display: inline-block;
    color: var(--color-black);
    padding: 0 0 5px 0;
    font-weight: bold;
}

/* チェックマーク */
#guest  h3::before{
    content: "";
    display: inline-block;
    background-image: url(../img/icon_check.svg);
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 3px;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}


/* タイトル下の灰色の線 */
#guest .section-divider{
    border-bottom: 1px solid var(--color-black); /* 黒色の線 */
    margin-bottom: 20px; /* 線と本文の間の余白 */
}

#guest p,#guest ul{
    line-height: 1.8;
    font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
    #guest .section-bg{
        padding: 40px 0;
    }
        
    #guest .section-inner{
        width: 80%;
    }

    #guest p,#guest ul{
        font-size: 16px;
    }
}

#guest h4 {
    text-align: left;
    font-size: var(--font-size-sm);
    margin-bottom: 20px;
    color: var(--color-black);    
    padding-top: 30px;
}

#guest img {
    display: block;
    width: 90%;
    margin: 0 auto 20px auto;
    border: 1px solid var(--color-black);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#page-guestNote #guest .intro p{
    font-size: 18px;
    font-weight: 500;
}

#page-guestNote #guest .intro img{
    display: block;
    width: 60%;
    margin: 20px auto;
}

@media (min-width: 768px) {
    #guest img {
        width: 70%;
    }

}



/*
================================================================================
footer共通
================================================================================
*/
/* 上半分のfooter */
.footer-nav{
    background-color: #F4F5F9;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}


.footer-nav div{
    margin: 0 auto;
}

.footer-nav p{
    font-weight: 600;
    margin: 5px auto;
    font-size: var(--font-size-md);
    color: var(--color-primary);
}

.footer-nav p::before{
    content: "◆";
    margin-right: 5px;
    color: var(--color-secondary);
}


.footer-nav ul{
    padding: 0 15px;
    margin: 5px auto;
}

footer ul li{
    list-style: none;
    color: var(--color-secondary);
    margin: 3px auto;
}

footer ul li::before{
    content: "-";
    margin-right: 8px;
}

.footer-nav a{
    font-size: 15px;
    text-decoration: none;
    font-feature-settings: "palt";
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer-nav a:hover {
    transform: translateX(8px);
    color: var(--color-secondary);
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.footer-nav a:hover::after {
    transform: scaleX(1);
}


/* 下半分のfooter */
.footer-info{
    text-align: center;
    padding: 20px;
    background-color: var(--color-secondary);
    color: #fff;
}

.footer-info p{
    margin: 10px auto 0;
    font-size: 12px;
}


/* PC向け */
@media (min-width: 769px) {
    /* 3グリッド */
    .footer-nav{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
        padding: 50px 80px;
    }

    .footer-nav a{
        font-size: 17px;
    }

    .footer-info{
        padding: 50px;
    }

}