/* ===== Base Styles ===== */
body {
    padding: 0px;
    margin: 0px;
    background-color: silver;
}
#MainWrap {
    max-width: 562.5px;
    margin: 0 auto;
    padding: 0px;
}
.wrapMain {
    max-width: 562.5px;
    margin: 0 auto;
    background-color: white;
    padding: 0px;
}
.box {
}
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 300px;
}
.example {
    display: block;
    width: 100px;
    background: #FFF;
}
.editBtn1 a {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
/* 隙間調整 */
p {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ===== CSS Variables ===== */
:root {
    --color1: #003f33;
    --color2: #f5fffb;
    --color3: #ff8624;
    --color4: #e6e8ef;
    --black: #052828;
    --spacing: 0.05em;
}

/* ===== Color Utilities ===== */
.txt_color_nomal, .hvr_txt_color_nomal:hover { color: var(--black); }
.txt_white, .hvr_txt_white:hover { color: white; }
.txt_red, .hvr_txt_red:hover { color: #C12326; }
.txt_gray, .hvr_txt_gray:hover { color: #ccc; }
.txt_color1, .hvr_txt_color1:hover { color: var(--color1); }
.txt_color2, .hvr_txt_color2:hover { color: var(--color2); }
.txt_color3, .hvr_txt_color3:hover { color: var(--color3); }
.txt_color4, .hvr_txt_color4:hover { color: var(--color4); }

.bg_white, .hvr_bg_white:hover { background-color: white; }
.bg_black, .hvr_bg_black:hover { background-color: var(--black); }
.bg_gray, .hvr_bg_gray:hover { background-color: #ccc; }
.bg_color1, .hvr_bg_color1:hover { background-color: var(--color1); }
.bg_color2, .hvr_bg_color2:hover { background-color: var(--color2); }
.bg_color3, .hvr_bg_color3:hover { background-color: var(--color3); }
.bg_color4, .hvr_bg_color4:hover { background-color: var(--color4); }
.bg_color_clear, .hvr_bg_color_clear:hover { background-color: transparent !important; }

.border_white, .hvr_border_white:hover { border-color: white; }
.border_black, .hvr_border_black:hover { border-color: var(--black); }
.border_gray, .hvr_border_gray:hover { border-color: #ccc; }
.border_color1, .hvr_border_color1:hover { border-color: var(--color1); }
.border_color2, .hvr_border_color2:hover { border-color: var(--color2); }
.border_color3, .hvr_border_color3:hover { border-color: var(--color3); }
.border_color4, .hvr_border_color4:hover { border-color: var(--color4); }

/* ===== Typography ===== */
.bwrap {
    color: var(--black);
    line-height: 1.7;
    font-family: "BIZ UDPMincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", serif;
}
.bwrap *, .bwrap *::before, .bwrap *::after {
    box-sizing: border-box;
    letter-spacing: var(--spacing);
}
.bwrap * {
    box-sizing: border-box;
}
.box_title, .box_title1, .box_title2, .box_title3, .box_title4, .box_title5 {
    line-height: 1.3;
}
.bwrap .box_title1, .bwrap .box_title2, .bwrap .box_title3, .bwrap .box_title4, .bwrap .box_title, .bwrap .title {
    line-height: 1.25;
}
.bwrap .editTxt1 {
    letter-spacing: 0.05em;
}
.bwrap .font_bold {
    font-weight: 700;
}

/* ===== Shadow ===== */
.shadow-h {
    box-shadow: 0 3px 8px color-mix(in srgb, var(--color1) 30%, transparent);
}
.shadow-h2 {
    background-image: linear-gradient(45deg, color-mix(in srgb, var(--color1) 5%, transparent) 50%, transparent 50%);
}

/* ===== FV Section ===== */
.fv .box_item1 .box_img1 img {
    mask-image: linear-gradient(to bottom, transparent, #000 100px);
}
.fv .box_title1::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: solid 10px transparent;
    border-top: solid 10px #fff;
    border-right: solid 10px transparent;
    left: 0;
    right: 0;
    bottom: -10px;
    margin: auto;
}
.fv .box_title3 {
    background-color: rgb(255 255 255 / 0.1);
}

/* ===== Checklist ===== */
.checklist .box_title2 .editTxt1 {
    position: relative;
    padding-left: 10%;
}
.checklist .box_title2 .editTxt1::before {
    position: absolute;
    content: '';
    width: 5%;
    aspect-ratio: 1.8;
    box-sizing: border-box;
    top: 0;
    left: 0;
    border-left: 2px solid var(--color3);
    border-bottom: 2px solid var(--color3);
    transform: translateY(70%) rotate(-45deg);
}

/* ===== Layout Utilities ===== */
.height33 {
    height: 33%;
}
.bottom0 {
    bottom: 0;
}
.bottom10 {
    bottom: 10px;
}
.posi_center_lr {
    left: 50%;
    transform: translate(-50%, 0);
}

/* ===== Reason Box ===== */
.reason-box .box_title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    background: #FFF;
}
.reason-box .inner {
    padding: 1.2em .5em .5em;
}

/* ===== FAQ ===== */
.qa-1 {
    border-bottom: 2px solid #d6dde3;
}
.qa-1 summary {
    justify-content: space-between;
    padding: 1em 2em 1em 3em;
    cursor: pointer;
}
.qa-1 summary::before,
.qa-1 .faq-1-a::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}
.qa-1 summary::before {
    color: #75bbff;
    content: "Q";
}
.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}
.qa-1[open] summary::after {
    transform: rotate(225deg);
}
.qa-1 .faq-1-a {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    transition: transform .5s, opacity .5s;
}
.qa-1[open] .faq-1-a {
    transform: none;
    opacity: 1;
}
.qa-1 .faq-1-a::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}
.block_g-28 .block_h-7 .box_img1 img {
    aspect-ratio: 1;
}