/*
Theme Name: My Theme
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
Tags: 
*/

/* テキストを両端ぞろえにする（共通） */
p {
    text-align: justify;
}
a {
    text-align: justify;
}

/* スペーサーブロックのmarginをなくす（共通） */
.wp-block-spacer {
    margin: 0;
}

/* ヘッダー下の影の透明度を調整（共通） */
header {
    position: sticky;
    top: 0;
    z-index: 999;
    .is-style-default.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
        box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ヘッダーのハンバーガーメニュー内に電話をかけられるボタンを付ける（共通） */
header {
	.header-contact {
		margin: 0 auto;
	}
}
@media (min-width: 1281px) {
	header {
		.header-contact {
			display: none;
		}
	}
}

/* ハンバーガーメニューのボタンのデザインを変更（共通） */
button.wp-block-navigation__responsive-container-open {
    svg {
        fill: var(--wp--preset--color--base) !important;
        padding: 8px;
        background-color: var(--wp--preset--color--background-01) !important;
    }
}

/* フッターの各メニューの左側に縦線を入れる（共通） */
footer {
    .footer-right {
        li {
            padding-left: 16px;
            border-left: 2px solid var(--wp--preset--color--background-01);
        }
    }
}

/* ナビゲーションメニューをクリックした際に、ヘッダーに隠れずスムーズにスクロールされる（共通） */
:root{
	scroll-padding: 125px;
	scroll-behavior: smooth;
}

/* サービスのイメージ内の背景色を調整（共通） */
.service-image {
    background: linear-gradient(0deg,rgb(255,255,255) 15%,rgb(248,160,160) 15%,rgba(248,160,160,0.5) 80%,rgb(255,255,255) 100%) !important;
}

/* サービスのイメージ内の見出しの色を変更（共通） */
.text-white {
    h2 {
        color: var(--wp--preset--color--base) !important;
    }
    h3 {
        color: var(--wp--preset--color--base) !important;
    }
    h4 {
        color: var(--wp--preset--color--base) !important;
    }
}

/* h2の横幅を変更（共通） */
.underline-pink {
    width: fit-content;
    h2 {
        margin: 0 !important;
        max-width: 100% !important;
    }
}

/* 5つのポイントの画像のサイズと位置の調整（共通） */
.five-point {
    margin-top: 0;
    .point-sakura {
        width: 80%;
        height: auto;
        margin-left: 0 !important;
    }
    .five-point-list {
        margin-top: -32%;
        position: relative;
        z-index: 997;
        h3 {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
        }
        div {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
        }
    }
    .point-person {
        width: 24%;
        height: auto;
        margin-right: 0 !important;
        margin-top: -8% !important;
        position: relative;
        z-index: 998;
    }
}

/* 操作方法の余白や幅を調整（共通） */
.manual {
    .manual-send {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }
    .manual-choice {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }
    .manual-playback {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }
    .manual-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
        h3 {
            color: var(--wp--preset--color--base) !important;
        }
    }
}

/* サービス利用条件の余白や幅を調整（共通） */
.service-user {
    .user-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
        h3 {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
        }
        h4 {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
        }
    }
}

/* お問い合わせの影を調整（共通） */
.contact {
    .contact-contents {
        box-shadow: 1px 1px 10px rgba(159, 160, 160, 0.3) !important;
    }
}

/* よくある質問内の余白や幅を調整（共通） */
.faq {
    .question-list {
        .question-contents {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
            .question {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
                .question-icon {
                    display: inline-block;
                    aspect-ratio: 1 / 1 !important;
                    max-width: 48px;
                    width: 100%;
                    color: var(--wp--preset--color--base) !important;
                }
                .question-text {
                    text-align: justify;
                }
            }
            .answer {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
                .answer-icon {
                    display: inline-block;
                    aspect-ratio: 1 / 1 !important;
                    max-width: 48px;
                    width: 100%;
                }
                p {
                    text-align: justify;
                }
            }
        }
    }
}

/* PC版のみ適用 */
@media (min-width: 1281px) {
	
	/* 5つのポイントの女性の画像サイズと位置を調整（PC版） */
	.point-person {
		width: 20% !important;
		margin-top: -16% !important;
	}
	
}

/* PC・タブレット版のみ適用 */
@media (min-width: 801px) {

    /* サービスのイメージの01～03の見出しを非表示（PC・タブレット版） */
    .image-SP {
        display: none !important;
    }

    /* 3ステップのPC版の画像を非表示（PC・タブレット版） */
    .three-step-SP {
        display: none !important;
    }

}

/* タブレット版のみ適用 */
@media (min-width: 501px) and (max-width: 1280px) {
	
	/* 5つのポイントの女性の画像サイズと位置を調整（タブレット版） */
	.point-person {
		margin-top: -8% !important;
	}

    /* よくある質問内の余白や幅を調整（タブレット版） */
    .faq {
        .question-list {
            .question-contents {
                .question {
                    .question-icon {
                        aspect-ratio: 1 / 1 !important;
                        max-width: 40px;
                        width: 100%;
                    }
                }
                .answer {
                    .answer-icon {
                        aspect-ratio: 1 / 1 !important;
                        max-width: 40px;
                        width: 100%;
                    }
                }
            }
        }
    }

    @media (max-width: 850px) {
        /* よくある質問内の余白や幅を調整（タブレット版） */
        .faq {
            .question-list {
                .question-contents {
                    .question {
                        .question-icon {
                            aspect-ratio: 1 / 1 !important;
                            max-width: 36px;
                            width: 100%;
                        }
                    }
                    .answer {
                        .answer-icon {
                            aspect-ratio: 1 / 1 !important;
                            max-width: 36px;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /* タブレット版（大きめ）のみ適用 */
    @media (min-width: 801px) {

        /* サービスのイメージ内の背景色を調整（タブレット版） */
        .service-image {
            background: linear-gradient(0deg,rgb(255,255,255) 24%,rgb(248,160,160) 24%,rgba(248,160,160,0.5) 80%,rgb(255,255,255) 100%) !important;
        }

    }
}

/* スマホ・iPad mini版のみ適用 */
@media (max-width: 800px) {

    /* サービスのイメージの01～03の見出しを非表示（スマホ・iPad mini版） */
    .image-PC {
        display: none !important;
    }

    /* テキストの色を変更（スマホ・iPad mini版） */
    .text-white {
        h5 {
            color: var(--wp--preset--color--base) !important;
        }
        p {
            color: var(--wp--preset--color--base) !important;
        }
        a {
            color: var(--wp--preset--color--base) !important;
        } 
    }

    /* サービスのイメージ見出し下のスペーサーを小さくする（スマホ・iPad mini版） */
    .service-image {
        .service-image-spacer {
            height: 32px !important;
        }
    }

    /* 操作方法内の余白や幅を調整（スマホ・iPad mini版） */
    .manual {
        .manual-send {
            margin-top: 32px !important;
            .wp-block-columns {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
        }
        .manual-choice {
            p {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
            figure {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
        }
        .manual-playback {
            p {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
            figure {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
        }
    }

    /* サービス利用条件内の余白や幅を調整（スマホ・iPad mini版） */
    .service-user {
        .service-price {
            margin-top: 32px;
            p {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
        }
    }

    /* 3ステップのPC版の画像を非表示（スマホ・iPad mini版） */
    .three-step-PC {
        display: none;
    }

    /* 3ステップのSP用画像のmarginの調整（スマホ・iPad mini版） */
    .three-step-SP {
        margin-top: 0;
    }

    /* サービスのイメージ内の背景色を調整（スマホ・iPad mini版） */
    .service-image {
        background: linear-gradient(0deg,rgb(255,255,255) 12%,rgb(248,160,160) 12%,rgba(248,160,160,0.5) 80%,rgb(255,255,255) 100%) !important;
    }

}

/* スマホ・タブレット版のみ適用する調整 */
@media (max-width: 1280px) {

    /* 右側のpaddingを変更（スマホ・タブレット版） */
    .wp-block-group.alignfull.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-a374ff7a.wp-block-group-is-layout-flex {
        padding-right: 32px !important;

        /* ヘッダーにある[参加型～サービス]をスマホ・タブレットで非表示にする（スマホ・タブレット版） */
        .header-service {
            display: none;
        }

        /* ハンバーガーメニューをタブレットでも表示する（スマホ・タブレット版） */
        .wp-block-navigation__responsive-container-open {
            display: block !important;
        }
        .wp-block-navigation__responsive-container {
            display: none !important;
        }
        .has-modal-open.is-menu-open {
            display: block !important;
            
            /* ハンバーガーメニューを開いた時の見え方を修正（色・そろえ方など）（スマホ・タブレット版） */
            background-color: var(--wp--preset--color--background-01) !important;
            button {
                color: var(--wp--preset--color--base);
            }
            ul.wp-block-navigation__container.is-responsive.items-justified-right.no-wrap.wp-block-navigation {
                color: var(--wp--preset--color--base) !important;
                width: 100%;
                li.wp-block-navigation-item.wp-block-navigation-link {
                    width: 100%;
                    a {
                        width: 100%;
                        text-align: center !important;
                    }
                }
            }

            /* ハンバーガーメニューを開いた時の上部のmarginを調整（スマホ・タブレット版） */
            .wp-block-navigation__responsive-dialog {
                margin-top: 32px;
            }
        }
    }

    /* ナビゲーションメニューをクリックした際に、ヘッダーに隠れずスムーズにスクロールされる（共通） */
    :root{
        scroll-padding: 95px !important;
    }

    /* 操作方法の左右のpaddingを減らす（スマホ・タブレット版） */
    .manual {
        padding-right: var(--wp--style--root--padding-right) !important;
        padding-left: var(--wp--style--root--padding-left) !important;
    }

    footer {

        /* フッターの左右の余白を減らす（スマホ・タブレット版） */
        .wp-container-core-group-is-layout-e916f9fd {
            margin: 0 !important;
            max-width: 100% !important;
            .wp-container-core-columns-is-layout-12012056 {
                max-width: 100% !important;
            }
        }

        /* スマホ版のみ適用する調整（footer） */
        @media (max-width: 800px) {

            /* 横幅800px以下の時に、フッター内の要素を中央ぞろえにする（スマホ版） */
            .footer-left {
                figure {
                    text-align: center;
                }
                p {
                    text-align: center;
                }
            }
        }
    }

    /* メインビジュアルの左右の余白を減らす（スマホ・タブレット版） */
    .main-visual {
        figure {
            margin: 0;
            max-width: 100%;
        }
    }

    /* スマホ版のみ適用 */
    @media (max-width: 500px) {

        /* スペーサーブロックのheightを修正（スマホ版） */
        .wp-block-spacer {
            height: 64px !important;
        }
		/* メインビジュアルをなるべく大きく表示 */
		.main-visual {
			padding: 0;
		}
        
        /* 一部を除き、サービスのイメージ内の要素の左右の余白を減らす（スマホ版） */
        .service-image {
            div {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }
            h2 {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }
            figure {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }
            .underline-pink {
                margin-left: auto !important;
                margin-right: auto !important;
            }
        }

        /* 5つのポイントの画像のサイズと位置の調整（スマホ版） */
        .five-point {
            .five-point-contents {
                margin-left: 0;
                margin-right: 0;
                max-width: 100%;
				.point-sakura {
					max-width: 100%;
					width: 100%;
				}
				.five-point-list {
					max-width: 100%;
				}
                .point-person {
                    width: 32%;
                    height: auto;
                    margin-top: -16% !important;
					right: -35px;
                }
            }
        }

        /* 操作方法内のpaddingやスペーサーを調整（スマホ版） */
        .manual {
            padding-top: 32px !important;
            padding-bottom: 32px !important;
            .manual-contents {
                margin-left: 0;
                margin-right: 0;
                max-width: 100%;
                padding: 32px !important;
            }
            .wp-block-spacer {
                height: 32px !important;
            }
        }

        /* サービス利用条件内の余白や幅を調整（スマホ版） */
        .service-user {
            .service-price {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
            }
        }

        /* お問い合わせ内の余白や幅を調整（スマホ版） */
        .contact {
            .contact-contents {
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
                h2 {
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                    max-width: 100%;
                }
            }
        }

        /* よくある質問内の余白や幅を調整（スマホ版） */
        .faq {
            .question-list {
                margin-top: 32px;
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100%;
                .question-contents {
                    .question {
                        .question-icon {
                            aspect-ratio: 1 / 1 !important;
                            max-width: 32px;
                            width: 100%;
                        }
                    }
                    .answer {
                        .answer-icon {
                            aspect-ratio: 1 / 1 !important;
                            max-width: 32px;
                            width: 100%;
                        }
                    }
                }
            }
        }

    }

}