/* desktop.css (PC用) */

:root { --header-h: 86px; }

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ヘッダー関連のスタイル（PC用） */
header {
    width: 100%;
    height: 86px;
    min-height: var(--header-h);
    left: 0;
    top: 0;
    z-index: 2;
    position: absolute;
    visibility: visible;
    overflow: clip; /* ヘッダーの高さを超える要素は切り取る */
    display: flex;
    align-items: center;  /* 垂直中央揃え */
}
header * { line-height: 1; }        /* 行間で高さが揺れないように */
header h1, header p, header nav { margin: 0; }  /* 余白で伸びない */

.inner-header {
    width: 100%;
    height: 86px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 5;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
    box-sizing: border-box;
}
/* ロゴ画像自体 */
img.img-logo {
    display: block;
    width: 150px;  /* 270px（実寸） */
    height: 45px;  /* 81px（実寸） */
    margin: 0 0 0 20px;
}

/* PCでは非表示 スマホのみ表示 */
.tel-wrapper-sp {
    display: none;
}

/* PC用ナビゲーション */
nav.nav-pc {
    display: flex;
    justify-content: space-around;
    width: auto;
    right: 0;
    top: 0;
    z-index: 5;
    position: fixed;
    visibility: visible;
    gap: 10px;
    line-height: 1.3; /* = 2.08px */
    min-height: 86px;;
}

.telnum-wrapper {
        width: auto;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
}

div.telnum-text {
        color: #000;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3;
        text-wrap: balance;
        min-height: calc(2 * 1.0 * 0.5em);
        text-align: center;
        margin: 14px 20px 0 0;
}

p.telnumber {
        color: #e8412e;
        font-size: 30px;
        font-weight: 700;
        text-align: left;
        margin: 0 20px 0 0;
}

#btn-header-contact {
        color: #fff;
        font-size: 14px;
        line-height: 14px;
        font-weight: 600;
        background-color: #cf2c26;
        width: auto;
        height: 50px;
        margin: auto 20px auto 0;
        padding: 6px 20px;
        border-style: none;
        cursor: pointer;
        transition: 0.4s;
}
#btn-header-line {
        color: #fff;
        font-size: 14px;
        line-height: 14px;
        font-weight: 600;
        background-color: #05c756;
        width: auto;
        height: 50px;
        margin: auto 0;
        padding: 6px 20px;
        border-style: none;
        cursor: pointer;
        transition: 0.4s;
}
/* ハンバーガーメニュー（トグル）はPCでは非表示 */
div.header-sp {
    display: none;
}

.but01:hover {
    opacity: 0.6;
    background-color: #25407a;
}

.but02 {
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    background-color: #4fac60;
    width: auto;
    height: 50px;
    padding: 6px 20px;
    margin: 18px 20px 0 0;
    border-style: none;
    cursor: pointer;
    transition: 0.4s;
}

.but02:hover {
    opacity: 0.6;
}

.header-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    background: #fff;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.header-action .header-info {
    font-size: 18px;
    color: #111;
    font-weight: 400;
    margin-right: 18px;
    min-width: 180px;
}

.header-action .header-tel {
    font-size: 32px;
    color: #e8412e;
    font-weight: 700;
    margin-right: 18px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.header-action .header-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.header-action .header-btn {
    display: inline-block;
    min-width: 180px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 0 13px 0;
    border-radius: 2px;
    color: #fff;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.header-action .header-btn.web {
    background: #1c355f;
}

.header-action .header-btn.web:hover {
    background: #25407a;
}

.header-action .header-btn.line {
    background: #4fac60;
}

.header-action .header-btn.line:hover {
    background: #43a047;
}
/* ここまでヘッダーバーの中身 */

/* ページトップボタン */
#pagetop {
    width: 50px;  /* 最終表示サイズを事前設定 */
    height: 55px;  /* 最終表示サイズを事前設定 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.page_top {
    visibility: hidden;
    width: 50px;
    height: auto;
}

main {
    margin-top: 0;
    padding-top: 86px;
    max-width: 980px; /* これ以上広い幅ならば余白を表示 */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background: #ffffff;  /* コンテンツの背景は白 */
    border-top: 1px solid transparent; /* 予防（折り畳み封じの保険） */
}
/* FVセクションはHTML上に書いた */
section.price-example {
    padding-top: calc((532 / 980) * 100%);
    text-align: center;
    background-image: url('../images/02-price-ex-pc.webp');
}
.action-buttons-1 {
    display: flex;
    flex-direction: row; /* 横並び */
    gap: 50px; /* 画像に合わせて調整 */
    justify-content: center;
    align-items: center; /* 中央揃えに */
    width: 100%; /* フルサイズ */
    margin: 0 auto; /* 中央寄せ */
    padding: 20px 40px 20px 40px;
    box-sizing: border-box; /* paddingをwidthに含める */
}
.action-buttons-1 a {
    /* 必要であればボタンリンクのスタイル調整 */
    display: block; /* imgを内包するのでブロック要素に */
}
.action-buttons-1 img {
    width: 500px; /* ボタンの幅はここで調整する */
    height: auto;
    display: block; /* img要素の下にできる余白を削除 */
}
section.emergency {
    padding-top: calc((1257 / 980) * 100%);
    background-image: url('../images/03-emergency-pc.webp');
    text-align: center;
}
section.emergency-description {
    width: 80%;
    padding-top: 20px;
    padding-bottom: 50px;
    box-sizing: border-box;
}
p.emergency-text {
    color: #555;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    box-sizing: border-box;
    text-align: justify; /* 両端揃え */
    word-break: normal;  /* デフォルト値。必要に応じて 'keep-all' も検討 */
    line-break: strict;  /* 厳密な禁則処理を適用 */
}
section.why-us {
    padding-top: calc((1466 / 980) * 100%);
    background-image: url('../images/04-why-us-pc.webp');
    text-align: center;
}
section.before-after {
    padding-top: calc((1564 / 980) * 100%);
    background-image: url('../images/05-1-before-after-pc.webp');
    text-align: center;
}
section.priceex {
    padding-top: calc((810 / 980) * 100%);
    background-image: url('../images/05-2-price-sample-pc.webp');
    text-align: center;
}
section.actual-results {
    padding-top: calc((1624 / 980) * 100%);
    background-image: url('../images/06-actual-results-pc.webp');
    text-align: center;
}
section.clearning-procedure {
    padding-top: calc((3741 / 980) * 100%);
    background-image: url('../images/07-clearning-proc-pc.webp');
    text-align: center;
}
section.service-flow {
    padding-top: calc((1667 / 980) * 100%);
    background-image: url('../images/08-service-flow-pc.webp');
    text-align: center;
}
div.bg-img.acd-faq {
    width: 100%;
    padding-top: calc((142 / 980) * 100%);
    background-image: url('../images/09-acd-faq-title-pc.webp'); ;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
}
details {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    text-align: left;
}
summary {
    font-size: 24px;
    font-weight: 700;
    color: #292929;
    transition: 0.4s;
    cursor: pointer;
    text-align: left;
    margin-bottom: 20px; /* [A]との間隔を取る */
}
/* 質問文の前の▲を消す */
summary::marker {
    content: none;
}
summary::before {
    display: inline-flex;
    margin-right:40px;
    content: "";
    background-image: url('../images/Q.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    vertical-align: -16px;
}
summary:hover {
    background-color: #e5feff;
}


details {
    margin: 20px 0;
    padding: 0 20px;
    border: none;
    background-color: transparent;
}
/* detailsの次にdetailsが続く場合にマージンを取る */
details + details {
    margin-top: 10px;
}
span#ans-1, span#ans-2, span#ans-3, span#ans-4, span#ans-5, span#ans-6, span#ans-7 {
    display: flex;
    position: relative;
    max-height: 0; /* 高さを0に設定 */
    opacity: 0; /* 不透明度を0に設定 */
    padding: 0; /* パディングを0に設定 */
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out, transform 0.5s ease-out;
    transform: translateY(-50px) scale(0.8); /* 初期位置を上にずらして縮小 */
}

details[open] > span#ans-1,
details[open] > span#ans-2,
details[open] > span#ans-3,
details[open] > span#ans-4,
details[open] > span#ans-5,
details[open] > span#ans-6,
details[open] > span#ans-7 {
    max-height: 1000px; /* 最大高さを設定 */
    opacity: 1;
    padding: 20px 0 20px 0; /* パディングを追加 */
    transition: max-height 0.6s ease-in, opacity 0.4s ease-in 0.1s, transform 0.6s ease-in;
    transform: translateY(0) scale(1); /* 元の位置に戻して拡大 */
}
details > span > img {
    width: 50px;
    height: 50px;
    vertical-align: -20px;
    margin-right: 40px;
}
footer {
    padding: 50px;
}
footer > a > img {
    width: 240px; /* ロゴ画像の幅 */
    
}
footer > div.flex-callnum {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
}