@charset "UTF-8";

/* =================================
reset
================================= */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    /* font-weight: 500; */
    font-size: 100%;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
}

/* =================================
common
================================= */
html {
    height: 100%;
}

body {
    height: 100%;
    color: #464646;
    letter-spacing: .05em;
    line-height: 1.8;
    /* text-align: center; */
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    text-size-adjust: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

span,
strong {
    display: inline;
}

a {
    display: block;
    text-decoration: none;
    margin: 0 auto;
    word-break: break-all;
}


a:hover {
    text-decoration: none;
    opacity: .5;
    transition: all .2s ease-in;
}

.sp {
    display: none;
}

.inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.container {
    padding: 100px 0 60px;
    width: min(880px, calc(100% - 40px));
    margin: 0 auto;
    line-height: 1.6;
}

.container:has(.column) {
    width: min(1000px, calc(100% - 40px));
}

.container * {
    box-sizing: border-box;
}

.container img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .container {
        padding-top: 85px;
    }

    .pc {
        display: none;
    }

    .sp {
        display: inherit;
    }

    .inner {
        width: 90%;
    }
}

/* =================================
header
================================= */
.shadow {
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
}

.header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 80px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

.header.hide {
    z-index: -1;
    transform: translateY(-160%);
}

.header .logo_h {
    width: 100%;
    max-width: 235px;
    padding-left: 30px;
}

.header .right_area {
    width: 100%;
    max-width: 330px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .sp-menu {
    cursor: pointer;
}

.header .sp-menu i {
    width: 32px;
    height: 20px;
    display: block;
    position: relative;
    margin: 0 auto;
}

.header .sp-menu span {
    transition: all 0.3s;
    width: 20px;
    height: 1px;
    background: #767676;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.header .sp-menu span.top {
    top: 0;
}

.header .sp-menu span.middle {
    top: 0;
    bottom: 0;
}

.header .sp-menu span.bottom {
    bottom: 0;
}

.header .sp-menu.open .top {
    transform: rotate(-45deg);
    bottom: 0;
}

.header .sp-menu.open .middle {
    background: rgba(255, 255, 255, 0);
}

.header .sp-menu.open .bottom {
    transform: rotate(45deg);
    top: 0;
}

.header .sp-menu strong {
    display: block;
    color: #767676;
    font-size: 13px;
    font-family: "futura-pt", sans-serif;
    line-height: 1;
    margin-top: 10px;
}

.header .btn_r {
    color: #fff;
    background: #E67E8F;
    line-height: 1.2;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0;
    width: 100%;
    max-width: 270px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header .header-sitemap {
    background: #fff;
    position: fixed;
    right: 0;
    z-index: -1;
    padding: 40px 0 0;
    box-sizing: border-box;
    transition: all 0.3s;
    animation: hs-fadeIn 0.5s ease;
    transform: translateX(100%);
    top: 80px;
    width: 100%;
    max-width: 270px;
    height: 100vh;
}

.header .header-sitemap.open {
    transform: translateX(0);
}

.header .list-wrap {
    display: flex;
    justify-content: center;
}

.header .list-wrap li {
    margin-bottom: 1.5em;
}


.header .list-wrap li:last-of-type {
    margin-bottom: 0;
}

.header .list-wrap a {
    display: flex;
    align-items: center;
    color: #59c3e1;
}

.header .list-wrap img {
    max-width: 50px;
    margin-right: 1em;
}

.header .list-wrap span {
    font-weight: bold;
}

.header .close {
    display: block;
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 15px 0;
    background: #59c3e1;
    color: #fff;
    margin: 40px auto 0;
    text-align: center;
    font-weight: bold;
}

.header .close:hover {
    opacity: .5;
    transition: all .2s ease-in;
}

@media screen and (max-width: 768px) {
    .header {
        width: 100%;
        height: 65px;
    }

    .header .logo_h {
        max-width: 135px;
        padding-left: 15px;
    }

    .header .right_area {
        max-width: 160px;
    }

    .header .sp-menu i {
        height: 15px;
    }

    .header .sp-menu strong {
        font-size: 12px;
        margin-top: 5px;
    }

    .header .btn_r {
        max-width: 110px;
    }

    .header .header-sitemap {
        top: 65px;
        padding-top: 20px;
        overflow-y: scroll;
        padding-bottom: 100px;
    }

    .header .scroll-wrap {
        overflow-y: scroll;
        box-sizing: border-box;
        padding-bottom: 30px;
    }

    .header .list-wrap li {
        margin-bottom: 2em;
    }

    .header .list-wrap img {
        max-width: 40px;
    }

    .header .close {
        max-width: 180px;
        padding: 12px 0;
        margin-top: 30px;
    }
}

/* =================================
footer
================================= */
footer {
    position: sticky;
    top: 100vh;
    background: #7dcce3;
    color: #fff;
    padding: 3.5em 0 2em;
    text-align: center;
}

footer .logo_f {
    margin-bottom: 1.2em;
    max-width: 300px;
}

footer .add {
    display: block;
    margin-bottom: 2em;
}

footer .copy {
    display: block;
    font-size: .65em;
}

@media print,
screen and (max-width: 768px) {
    footer .logo_f {
        max-width: 250px;
    }
}



/* 追加 */
:root {
    --main_color: #59c3e1;
    --pink: #E67E8F;
    --gray: #f5f5f5;
    --light_blue: #e5f5fa;
}

.sp_only {
    display: none;
}

.pc_only {
    display: block;
}

main:has(.column_h1) {
    padding-top: 80px;
}

.column_h1 {
    padding: 40px 20px;
    color: #fff;
    background: linear-gradient(135deg, #59c3e1, #baeaf7);
}

.column_h1 strong {
    font-family: "futura-pt", sans-serif;
    font-size: 1.9em;
    margin-bottom: 0.25em;
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
    display: block;
}

.column_h1 span {
    font-size: .9em;
    letter-spacing: 0;
    text-align: center;
    display: block;
    font-weight: normal;
}

.newpostlist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
}

.newpostlist a {
    text-decoration: none;
    color: #464646;
}

.newpostlist_img {
    margin-bottom: 10px;
}

.newpostlist_ttl {
    font-size: .9em;
    margin-bottom: 0.4em;
}

.newpostlist_date {
    font-size: 0.8em;
    text-align: right;
    margin-bottom: 0;
}




textarea {
    width: 100%;
    height: 120px;
}

.breadcrumb_scroll {
    overflow-x: auto;
    margin-bottom: 1.2em;
}

.breadcrumb_inner {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding-bottom: 0.2em;
    font-size: 14px;
}

.breadcrumb_scroll a {
    color: #464646;
}

.thumbnail {
    margin-bottom: 1em;
}

.article_info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 1.6em;
}

.article_date {
    font-size: 14px;
}

.pr_mark {
    font-size: 12px;
    padding: 0.2em 0.4em;
    border: 1px solid #464646;
}

:where(.container) a {
    display: inline;
    color: #1A0DAB;
    text-decoration: underline;
}

:where(.container) a:hover {
    transition: all .2s ease;
}

:where(.container) p {
    margin-bottom: 1.2em;
}

:where(.content, #mokuji_area)>[class] {
    margin-bottom: 26px;
}

.container h1 {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 0.4em;
}

.container h2 {
    font-size: 24px;
    font-weight: bold;
    border-top: 2px solid var(--main_color);
    border-bottom: 2px solid var(--main_color);
    padding: 0.4em;
    margin: 2.2em -0.4em 1.4em;
}

.container h3 {
    position: relative;
    font-size: 22px;
    font-weight: bold;
    border-left: 6px solid var(--main_color);
    padding: 0.2em 0.2em 0.2em 0.6em;
    margin: 2em 0 1.4em;
}

.container h2+h3 {
    margin-top: 0;
}

.container h3::before {
    position: absolute;
    left: -6px;
    bottom: 0;
    content: "";
    display: block;
    width: 6px;
    height: 50%;
    background: #bceefc;
}

.container h4 {
    font-size: 20px;
    font-weight: bold;
    color: var(--main_color);
    margin: 2em 0 1.4em;
}

.container h3+h4 {
    margin-top: 0;
}

.subhead {
    position: relative;
    font-size: 20px;
    line-height: 1.4;
    margin: 2em 0 1.2em;
    padding-left: 1.2em;
    font-weight: bold;
}

.subhead::before {
    position: absolute;
    top: .4em;
    left: 0;
    content: '';
    display: block;
    width: .7em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--main_color);
}

.numhead {
    position: relative;
    font-size: 20px;
    line-height: 1.4;
    margin: 2em 0 1.2em;
    padding-left: 2.5em;
    font-weight: bold;
}

.numhead_num {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    aspect-ratio: 1 / 1;
    background: var(--main_color);
    color: #fff;
    font-weight: bold;
}

.color_pink {
    color: var(--pink);
    font-weight: bold;
}

.color_blue {
    color: var(--main_color);
    font-weight: bold;
}

.caution {
    display: inline-block;
    font-size: .75em;
    color: #707070;
}

p .caution {
    margin-bottom: 0;
}

*:has(+.caution) {
    margin-bottom: 2px;
}

.bold {
    font-weight: bold;
}

.marker {
    background: -webkit-linear-gradient(transparent 64%, #ffeeb6 70%);
    background: linear-gradient(transparent 64%, #ffeeb6 70%);
    font-weight: bold;
}

.table {}

.table thead th {
    background: var(--light_blue);
    font-weight: bold;
}

.table thead th a {
    font-weight: bold;
}

.table tbody th {
    background: var(--gray);
}

.table thead th,
.table tbody th {
    text-align: center;
}

.table th,
.table td {
    vertical-align: middle;
    text-align: center;
    font-size: 0.94em;
    padding: .7em;
    white-space: wrap;
    border: 1px solid #ccc;
}

.table th>:last-child,
.table td>:last-child {
    margin-bottom: 0;
}

.table th ul:not([class]),
.table td ul:not([class]),
.table th ol:not([class]),
.table td ol:not([class]),
.table th .checklist,
.table td .checklist {
    text-align: left;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.table th ul:not([class]) li,
.table td ul:not([class]) li,
.table th ol:not([class]) li,
.table td ol:not([class]) li,
.table th .checklist li,
.table td .checklist li {
    width: fit-content;
}

.table img {
    margin: 0 auto;
}

.table-logo {
    margin: 0 auto 4px;
    max-width: 150px;
}

.table .c-btn {
    margin-top: 0;
    width: 100%;
}

.table .c-btn a {
    margin: 0 auto;
    width: 100%;
    min-width: auto;
    border-radius: 20px;
    padding: 10px 12px;
    font-size: 18px;
    gap: .8em;
}

.table .c-btn a::after {
    display: none;
}

.simplebox {
    padding: 1.5em;
    border: 1px solid #ccc;
}

.simplebox>:first-child {
    margin-top: 0;
}

.simplebox>:last-child {
    margin-bottom: 0;
}

.simplebox.-color {
    border: none;
    background: var(--light_blue);
}

.simplebox.-gray {
    border: none;
    background: var(--gray);
}

.colorbox>:last-child {
    margin-bottom: 0;
}

.box-ttl {
    font-size: 20px;
    line-height: 1.4;
    margin: 1.5em 0 1em;
    font-weight: bold;
}

ul:not([class]),
ol:not([class]),
ul.checklist {
    padding-left: 0;
    margin-bottom: 26px;
}

ul:not([class]) li,
ol:not([class]) li,
.checklist li {
    margin: .6em 0;
    list-style-type: none;
}

ul:not([class]) li {
    position: relative;
    padding-left: 1.3em;
}

ul:not([class]) li::before {
    content: "";
    position: absolute;
    display: block;
    background: var(--main_color);
    width: .5em;
    aspect-ratio: 1 / 1;
    top: .5em;
    left: .3em;
    border-radius: 50%;
}

ol:not([class]) {
    padding: 0 0 0 20px;
}

ol:not([class]) li {
    list-style-type: decimal;
}

ol:not([class]) li::marker {
    color: var(--main_color);
    font-weight: bold;
}

.checklist li {
    position: relative;
    padding-left: 1.6em;
}

.checklist li::before {
    position: absolute;
    left: 0;
    top: 0.4em;
    transform: rotate(-45deg);
    content: "";
    display: block;
    width: .8em;
    aspect-ratio: 2 / 1;
    border-left: 3px solid var(--main_color);
    border-bottom: 3px solid var(--main_color);
}

.grid {
    display: grid;
    grid-template-columns: 48% 1fr;
    gap: 14px;
}

.grid_inner>:last-child {
    margin-bottom: 0;
}

.float {}

.float::after {
    content: "";
    display: table;
    clear: both;
}

.float img {
    float: left;
    max-width: 48%;
    margin: 0 14px 10px 0;
}

.float_inner>:last-child {
    margin-bottom: 0;
}

.arrow_down,
.arrow_down_small {
    width: min(65px, 15%);
    margin: 2.8em auto;
    aspect-ratio: 2 / 1;
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    background: var(--main_color);
}

.arrow_down_small {
    width: min(34px, 15%);
    margin: 1.2em auto;
}

.img_full {
    width: 100%;
}

.img_full img {
    display: block;
    width: 100%;
    height: 100%;
}

.quotebox {
    position: relative;
    padding: 1.5em 1.5em 1.5em 5em;
    background: var(--gray);
}

.quotebox::before {
    position: absolute;
    top: 1.2em;
    left: 1.5em;
    content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    transform: rotate(180deg);
    background: url(../img/quote.png) center center / contain no-repeat;
}

.quotebox .img_full {
    width: 80%;
    margin: 0 auto 1em;
}

.quotebox>:first-child {
    margin-top: 0;
}

.quotebox>:last-child {
    margin-bottom: 0;
}

.fukidashi {
    position: relative;
    width: fit-content;
    padding: .6em 1em;
    min-width: 120px;
    max-width: 100%;
    margin: 2em auto 1.6em;
    font-size: 18px;
    background: var(--light_blue);
    font-weight: bold;
    text-align: center;
}

.fukidashi:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid var(--light_blue);
}

.summarybox {
    border: 5px double var(--main_color);
    padding: 1.5em;
}

.summarybox>:first-child {
    margin-top: 0;
}

.summarybox>:last-child {
    margin-bottom: 0;
}

.summarybox_ttl {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0.4em;
    margin: 0 0 0.8em;
}

.summarybox_ttl::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background: var(--main_color);
}


.surveybox {
    padding: 1.5em;
    background: var(--gray);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.surveybox>:last-child {
    margin-bottom: 0;
}

.surveybox_ttl {
    text-align: center;
    position: relative;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 18px;
}

.notebox {
    position: relative;
    border: 1px solid #ccc;
}

.notebox_ttl {
    padding: .4em 1em;
    font-weight: bold;
    background: #ccc;
}

.notebox_inner {
    font-size: 90%;
    padding: 1em 1.5em 1.5em;
}

.notebox_inner>:first-child {
    margin-top: 0;
}

.notebox_inner>:last-child {
    margin-bottom: 0;
}

.c-btn {
    width: fit-content;
    margin: 30px auto 40px;
}

.c-btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: fit-content;
    min-width: 280px;
    max-width: 100%;
    min-height: 60px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    padding: .6em 1em;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    background: var(--pink);
    box-shadow: 0 2px 2px #B35968, 0 4px 8px -4px #B35968;
}

.c-btn a::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' width='1em' viewBox='0 0 48 48'%3E%3Cpath d='M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z'/%3E%3Cpath d='m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0;
}

.tag {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: start;
    padding: 0;
}

.tag li {
    background: var(--gray);
    border-left: 3px solid #ccc;
    color: #727678;
    letter-spacing: 0;
    display: inline-block;
    padding: 8px 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    min-width: 70px;
}

.tag li.on {
    background: var(--light_blue);
    border-left-color: var(--main_color);
    color: #464646;
}

.scrolltable {
    overflow-x: auto;
    padding-right: 1px;
}

.scrolltable thead th {
    width: min(190px, 44vw);
}

.scrolltable thead th:first-of-type {
    width: min(150px, 34vw);
}

.scrolltable .table {
    width: 110%;
    max-width: none;
    margin-bottom: 0;
}

.scrolltable .table th,
.scrolltable .table td {
    text-align: center;
}

table.sticky_top thead {
    position: sticky;
    /* JSでtop上書き */
    top: 0;
    left: 0;
    z-index: 5;
}

table.sticky_top thead th:not(:last-of-type) {
    position: relative;
}

table.sticky_top thead th:not(:last-of-type):after {
    position: absolute;
    top: 0;
    right: -1px;
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #d4d4d4;
}

.sticky_top .c-btn a {
    font-size: 1.14em;
}

.scrolltable .sticky_left {
    min-width: 110%;
}

.sticky_left {
    will-change: transform;
}

.sticky_left thead th {
    background-color: var(--gray);
    color: #464646;
    min-width: 160px;
}

.sticky_left thead th a {
    color: #464646;
}

.sticky_left tbody th,
.sticky_left thead th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--light_blue);
    z-index: 1;
    color: #fff;
}

.sticky_left tbody th::before,
.sticky_left thead th:first-child::before {
    position: absolute;
    top: 0;
    left: -1px;
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: #d4d4d4;
}

.jump {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    line-height: 1.6;
    letter-spacing: 0.1em;
    padding-left: 0;
}

.jump li {
    text-align: center;
    margin: 0;
    list-style-type: none;
}

.jump a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    height: 100%;
    color: var(--main_color);
    font-weight: 700;
    text-decoration: none;
    padding: .4em .8em;
    border: solid 1px var(--main_color);
    border-radius: .5rem;
}

.jump a:hover {
    text-decoration: none;
    opacity: 1;
    background: var(--main_color);
    color: #fff;
}

.numbering {
    padding-left: 0;
}

.numbering_inner li>:last-child {
    margin-bottom: 0;
}

.numbering_ttl {
    position: relative;
    font-size: 20px;
    line-height: 1.4;
    margin: 2em 0 1.2em;
    padding-left: 2.5em;
    font-weight: bold;
}

.numbering_num {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    aspect-ratio: 1 / 1;
    background: var(--main_color);
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
}

.pickup {
    position: relative;
    padding: .8em 1em;
    border-bottom: solid 3px var(--main_color);
    line-height: 1.4;
    margin: 2em 0 1em;
    background: var(--light_blue);
}

.pickup::before {
    position: absolute;
    right: 0;
    bottom: -3px;
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background: #bceefc;
}

.pickup_text {
    font-size: .9em;
    display: block;
    margin-bottom: 4px;
}

.pickup_name {
    font-size: 20px;
    font-weight: bold;
}

.pickup>:last-child {
    margin-bottom: 0;
}

.ranking {}

.ranking-head {
    position: relative;
    padding: .8em .6em .8em 3.6em;
    border-top: double 6px var(--main_color);
    line-height: 1.4;
    margin: 2em 0 0;
    background: #fdf4ea;
}

.step {
    position: relative;
}

.step:has(+.step) {
    margin-bottom: 0;
}

.step_ttl {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    margin: 2em 0 1em;
    line-height: 1.4;
    font-weight: bold;
}

.step_num {
    display: inline-block;
    color: var(--main_color);
    font-weight: bold;
    font-size: 22px;
}


.step_inner {}

.step_inner>:last-child {
    margin-bottom: 0;
}

.postlist {
    margin: 40px 0;
}

.postlist_ttl {
    padding: 0.4em 0.8em;
    margin-bottom: 14px;
    font-size: 20px;
    background: #ccc;
    text-align: center;
    font-weight: bold;
}

.postlist_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 14px;
}

.postlist_post .postlist_img {
    width: 100%;
    margin-bottom: 8px;
}

.postlist_post .postlist_img img {
    display: block;
    width: 100%;
    height: auto;
}

.postlist_post_ttl {
    margin-bottom: 0;
    font-size: .9em;
}

.faq {}


.faq:has(+ .faq) {
    margin-bottom: 0;
}

.faqQ {
    position: relative;
    font-weight: bold;
    padding-left: 1.8em;
    margin: 1.8em 0 1em;
}

.faqQ::before {
    position: absolute;
    top: -.3em;
    left: 0;
    font-size: 1.6em;
    content: "Q";
    color: var(--pink);
    font-weight: bold;
}


.faqQ>:last-child,
.faqA>:last-child {
    margin-bottom: 0;
}

.faqA {
    position: relative;
    padding-left: 1.8em;
}

.faqA::before {
    position: absolute;
    top: -.3em;
    left: 0;
    font-size: 1.6em;
    content: "A";
    color: var(--main_color);
    font-weight: bold;
}


.link_right,
.link_right_icon {
    width: fit-content;
    margin: auto 0 1.5em auto;
    text-align: right;
    font-size: max(11px, .9em);
}

.link_right_icon a {
    position: relative;
    padding-left: 1.2em;
}

.link_right_icon a::before {
    content: '';
    position: absolute;
    top: .2em;
    left: 0px;
    display: block;
    background: url(../img/icon-link-arrow.svg) center center / contain no-repeat;
    width: 1em;
    aspect-ratio: 1 / 1;
}

.link_right:has(+.link_right),
.link_right:has(+.link_right_icon),
.link_right_icon:has(+.link_right),
.link_right_icon:has(+.link_right_icon) {
    margin-bottom: 8px;
}

.imgscrollbox {
    width: 100%;
    background: var(--gray);
    padding: 1.5em;
    overflow-x: auto;
    white-space: nowrap;
}

.imgscrollbox_wrap {
    width: fit-content;
    display: flex;
    justify-content: center;
}

.imgscrollbox_list {
    display: flex;
    gap: 1em;
    padding: 0;
    margin: 0;
    list-style: none;
}

.imgscrollbox_list li {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
    text-align: center;
    position: relative;
}


.imgscrollbox_list li:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    height: 1px;
    width: 1.5em;
    background-color: transparent;
}

.imgscrollbox_list img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.imgscrollbox_list .caption {
    display: block;
    max-width: 100%;
    font-size: .8em;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.imgscrollbox.center {
    overflow-x: hidden;
}

.imgscrollbox.center li {
    width: 33.33%;
}

.imgscrollbox.center .imgscrollbox_list {
    justify-content: center;
    gap: 1em;
}

.tabarea {}

.tab_list {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--main_color);
    padding-left: 0;
}

.tab {
    border-radius: 5px 5px 0 0;
    flex: auto;
    text-align: center;
    cursor: pointer;
    width: 100%;
    min-height: 50px;
    padding: 4px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: .8em;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-bottom: none;
}

.tab.active {
    position: relative;
    border: 1px solid var(--main_color);
    border-bottom: none;
    background: var(--light_blue);
}

.tab.active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    content: "";
    display: block;
    width: 1.6em;
    aspect-ratio: 2 / 1;
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    background: var(--main_color);
}

.tab_wrap {
    display: none;
    padding: 1em .8em .8em;
    border: 1px solid #ccc;
}

.tab_wrap.show {
    display: block;
}

.tab_wrap>:last-child {
    margin-bottom: 0;
}

.meritdemerit:has(+.meritdemerit) {
    margin-bottom: 16px;
}

.meritdemerit[data-type="merit"] {
    border: 2px solid var(--pink);
}

.meritdemerit[data-type="merit"] .meritdemerit_ttl {
    background: #feeaed;
    border-bottom: 2px solid var(--pink);
}

.meritdemerit[data-type="demerit"] {
    border: 2px solid #ccc;
}

.meritdemerit[data-type="demerit"] .meritdemerit_ttl {
    background: var(--gray);
    border-bottom: 2px solid #ccc;
}

.meritdemerit_ttl {
    padding: 0.8em 1em;
    font-weight: bold;
    font-size: 18px;
}

.meritdemerit_inner {
    padding: 1em 1.25em;
}

.meritdemerit_inner>:last-child {
    margin-bottom: 0;
}

.meritdemerit_list {
    position: relative;
    padding-left: 0;
    margin: 0;
    margin-bottom: 16px;
}

.meritdemerit_list li {
    padding-left: 1.2em;
    position: relative;
    margin: .6em 0;
    list-style-type: none;
}

.meritdemerit_list li:before {
    content: "";
    position: absolute;
    display: block;
    width: .5em;
    aspect-ratio: 1 / 1;
    top: .5em;
    left: .3em;
    border-radius: 50%;
    flex-shrink: 0;
}

.meritdemerit[data-type="merit"] .meritdemerit_list li:before {
    background-color: var(--pink);
}

.meritdemerit[data-type="demerit"] .meritdemerit_list li:before {
    background-color: #666;
}

.review_scroll {
    overflow-x: scroll;
    display: flex;
    gap: 16px;
}

.review {
    width: 100%;
    min-width: 80%;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    align-items: center;
    -webkit-align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: var(--gray);
    padding: 1.5em;
    border: 1px solid #ccc;
    white-space: normal;
    overflow: hidden;
    scroll-snap-align: center;
}

.review_info {
    width: 100%;
    margin-bottom: 1em;
}

.review_name {
    font-weight: bold;
    margin-bottom: 14px;
    font-size: 18px;
}

.review_label {
    width: 100%;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.review_label li {
    margin: .6em 0;
}

.review_label span {
    display: inline-block;
    padding: 4px 6px;
    margin-right: 8px;
    background: var(--main_color);
    color: #fff;
    letter-spacing: .08em;
    font-weight: bold;
    font-size: .8em;
}

.review_inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.review_inner>:last-child {
    margin-bottom: 0;
}

.map_ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.4;
    margin: 2em auto 1.5em;
    font-weight: bold;
    text-align: center;
}

.map_ttl::before {
    content: "";
    display: block;
    width: 2px;
    height: 1.6em;
    background: #464646;
    transform: rotate(-15deg);
    flex-shrink: 0;
}

.map_ttl::after {
    content: "";
    display: block;
    width: 2px;
    height: 1.6em;
    background: #464646;
    transform: rotate(15deg);
    flex-shrink: 0;
}

.map {}


.accordion {}

.accordion_ttl {
    position: relative;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-top: -1px;
    padding: 0.8em 2.5em 0.8em 1em;
    position: relative;
    background: #fff;
    font-weight: bold;
    font-size: 18px;
}

.accordion_ttl.action {
    background: var(--light_blue);
}

.accordion_inner {
    display: none;
    padding: 1em 1.25em;
}

.accordion_inner p {
    margin-bottom: .8em;
}

.accordion_inner>:last-child {
    margin-bottom: 0;
}

.accordion_flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.accordion_subttl {
    flex-shrink: 0;
    font-weight: bold;
}

.accordion_btn {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: block;
    width: min(20px, 6%);
    aspect-ratio: 1 / 1;
}

.accordion_btn::before {
    position: absolute;
    top: 50%;
    left: 1px;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--main_color);
}

.accordion_btn::after {
    position: absolute;
    top: 1px;
    left: 50%;
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: var(--main_color);
}

.accordion_ttl.action .accordion_btn::after {
    display: none;
}