/* 
=======================================================
GENERAL
=======================================================
*/

* {
    line-height: 1.5;
}

:root {
    /* カラー */
    /* ---------------------------------- */
    /* CTA */
    --cta_robust: #780116;

    /* メイン */
    --main_yellow: #f9f871;
    --main_purple: #8b95c9;
    --main_navy: #383f51;
    --main_grey: #4a5061;

    /* フォント */
    --title_a: #FEFEEC;
    --title_point_h2: #A68053;
    --title_point_p: #626E8C;
    --title_step: #2F4673;

    /* bg */
    --bg_first: #383F51;
    --bg_first_text: rgba(139, 149, 201, 0.5);
    --bg_form_item: #2F4673;
    --bg_form_btn: #5872A6;
    --bg_intro: #D5D9EB;
    --bg_qa_title: #383f51;
    --bg_points_title: #F9F871;
    --bg_pick: #F1F3F9;
    --bg_pick_title: #8b95c9;
    --bg_pick_title_pale: #F1F2F8;
    --bg_pick_step: #FEFEEC;
    --bg_pick_step_icon: #FDFDD8;
    --bg_merit_title: #2F4673;
    --bg_review: #FEFEEB;
    --bg_review_title: #4a5061;
    --bg_confirm: #2F4673;
    --bg_confirm_title: #F1F2F8;
    --bg_thanks: #D5D9EB;
    --bg_recommend: #FEFEEC;

    /* 余白 */
    /* ---------------------------------- */
    /* セクション */
    --section_updown_pc: 5rem 0;
    --section_updown_sp: 3rem 0;

    /* タイトル */
    --title_bottom_pc: 1.5rem;
    --title_bottom_sp: 1rem;

    /* 要素の余白 */
    --padding_pc: 1rem;
    --padding_sp: 0.5rem;

    /* text */
    --text_padding_pc: 1.5rem 1rem;
    --text_padding_sp: 1rem;

    /* ボタン */
    --btn_padding_pc: 1rem 3rem 1rem 2rem;
    --btn_padding_sp: 0.5rem 1.5rem 1rem 0;
    --btn_radius: 12rem;
    --text_radius: 0.5rem;

    --margin_bottom_pc: 1rem;
    --margin_bottom_sp: 0.5rem;

    /* GAP */
    --section_gap_pc: 1.5rem;
    --section_gap_sp: 1rem;
    --gap_pc: 1rem;
    --gap_sp: 0.5rem;

    /* 幅 */
    /* ---------------------------------- */
    /* PC幅 */
    --width_pc: 1000px;
}

body {
    width: 100%;
    max-width: 100%;
    margin: auto;
    font-family: 'Zen Old Mincho', serif;
    font-family: "Noto Sans JP", sans-serif;
}

/* under 480 */
@media screen and (max-width: 480px) {
    body {
        font-size: 1rem;
    }
}

main {
    margin: 0;
}

h1 {
    font-size: 2rem;
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
}

h2 {
    font-size: 1.5rem;
    font-family: "Murecho", sans-serif;
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.25rem;
    }
}

/* タイトル上下に飾り画像 */
h2.deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: var(--title_bottom_pc);
}

h2.deco img {
    width: fit-content;
    max-width: 200px;
}

@media screen and (max-width: 480px) {
    h2.deco img {
        max-width: 128px;
    }
}


h2.deco img:first-child {
    margin-bottom: 0.5rem;
}

h2.deco img:last-child {
    margin-top: 0.5rem;
    transform: scale(1, -1);
}

@media screen and (max-width: 480px) {
    h2.deco {
        margin-bottom: var(--title_bottom_sp);
    }
}

h3 {
    font-size: 1.3rem;
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 1rem;
    }
}

h4 {
    font-size: 1.1rem;
}

@media screen and (max-width: 480px) {
    h4 {
        font-size: 0.95rem;
    }
}

p,
a {
    font-style: normal;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

ul,
ol {
    list-style: none;
}

input {
    appearance: none;
    height: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    height: 100%;
}

label {
    font-size: 1rem;
    color: #444;
    line-height: 28px;
}

p:last-child {
    margin-bottom: 0;
}

span {
    display: inline-block;
}

form {
    width: 100%;
    margin: 0 auto;
}

a {
    color: var(--main_moonstone);
    text-decoration: none;
    cursor: pointer;
}

sup {
    vertical-align: top;
    font-size: xx-small;
}

summary {
    display: block;
}

summary::-webkit-details-marker {
    display: none;
}

.redirect {
    margin: 0;
    padding: 0;
}

/*
PC、SPの改行
=======================================================
*/
.pc {
    display: block;
}

@media screen and (max-width:768px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp {
        display: block;
    }
}

/* 
=======================================================
強調デザイン
=======================================================
フォントサイズ
=======================================================
*/
.larger {
    font-size: larger;
}

.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.largest {
    font-size: 3rem;
}

@media screen and (max-width: 480px) {
    .largest {
        font-size: 1.8rem;
        line-height: 1;
    }
}

.smaller {
    font-size: smaller;
}

h2 .smaller {
    font-size: 1.1rem;
}

.small {
    font-size: small;
}

.x-small {
    font-size: x-small;
}

/* 
太さ
=======================================================
*/
.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

/* 
フォント
=======================================================
*/
.murecho {
    font-family: "Murecho", sans-serif;
}

.shippori {
    font-family: 'Shippori Mincho', serif;
}


/* 
文字上ドット
=======================================================
*/
.dots {
    background-image: radial-gradient(circle at center,
            var(--body_maize) 20%, transparent 20%);
    /* 点の色とサイズ調整 */
    background-position: top left;
    /* 点の位置 */
    background-repeat: repeat-x;
    /* 横方向に繰り返し */
    background-size: 1em 0.3em;
    /* 点の間隔とサイズ調整 */
    padding-top: 0.3rem;
    /* 縦方向の位置調整 */
}

/* 
カラー
=======================================================
*/
.main_yellow {
    color: var(--main_yellow);
}

.main_purple {
    color: var(--main_purple);
}

.main_navy {
    color: var(--main_navy);
}

.main_grey {
    color: var(--main_grey);
}

.red {
    color: var(--cta_robust);
}

.brown {
    color: var(--title_point_h2);
}

/* 
下線
=======================================================
*/
.underline {
    text-decoration: underline solid;
}

.dotline {
    text-decoration: underline dotted;
}

/* 
ハイライト
=======================================================
*/
.highlight_red_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    line-height: 1;
    background: linear-gradient(transparent 40%, rgba(255, 0, 0, 0.2) 40% 90%, transparent 90%);
}

.highlight_red_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 0, 0, 0.2) 10% 90%, transparent 90%);
}

.highlight_pink_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 230, 238, 0.6) 40% 90%, transparent 90%);
}

.highlight_pink_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 230, 238, 0.6) 10% 90%, transparent 90%);
}

.highlight_yellow_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    line-height: 1;
    background: linear-gradient(transparent 40%, rgba(255, 240, 0, 0.4) 40% 90%, transparent 90%);
}

.highlight_yellow_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 240, 0, 0.4) 10% 90%, transparent 90%);
}

.highlight_white_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.6) 50% 90%, transparent 90%);
    padding-bottom: 0.3rem;
}

.highlight_white_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 255, 255, 0.6) 10% 90%, transparent 90%);
}

.highlight_green_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #b9e382 40% 90%, transparent 90%);
}

.highlight_green_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #b9e382 10% 90%, transparent 90%);
}

.highlight_blue_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #79DFFF 40% 90%, transparent 90%);
}

.highlight_blue_100 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #79DFFF 40% 90%, transparent 90%);
}

/* 
文字寄せ
=======================================================
*/
.right {
    text-align: right;
    margin-right: 1rem;
}

.left {
    text-align: left;
}

.separator {
    margin-bottom: 1.5rem;
}

/* 
=======================================================
Animationアニメーション
=======================================================
*/

/* アニメーション適用例 */
.fuwafuwa {
    -webkit-animation: fuwafuwa 2s infinite;
    -moz-animation: fuwafuwa 2s infinite;
    animation: fuwafuwa 2s infinite;
}

@keyframes shine {
    33% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    4% {
        transform: scale(1.02);
    }

    8% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.02);
    }

    16% {
        transform: scale(1);
    }
}

@keyframes dokidoki {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    4% {
        transform: scale(1.02);
    }

    8% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.02);
    }

    16% {
        transform: scale(1);
    }
}

@keyframes scaling {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-moz-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-webkit-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0px);
    }
}

@-moz-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@-moz-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes fuwafuwa_updown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* 横のふわふわの動き */
@keyframes fuwafuwa_sideway {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes kurukuru {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0.5rem);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes shine {
    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        /* 透明 */
        transform: translateY(-10px);
        /* 上から表示 */
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* 
=======================================================
COMMON
=======================================================
Width 設定：一律1000px
wrapは中の要素、wrap抜きのクラス名で全面背景色の設定可能
=======================================================
*/
.header_wrap,
.fv_wrap,
.image_wrap,
.first_wrap,
.form_wrap,
.intro_wrap,
.points_wrap,
.pick_wrap,
.merit_wrap,
.review_wrap,
.footer .menu,
.confirm_wrap,
.thanks_wrap,
.recommend_wrap,
.company_wrap,
.privacy_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {

    .header_wrap,
    .fv_wrap,
    .first_wrap,
    .intro_wrap,
    .points_wrap,
    .pick_wrap,
    .merit_wrap,
    .review_wrap,
    .footer .menu,
    .confirm_wrap,
    .thanks_wrap,
    .recommend_wrap,
    .company_wrap,
    .privacy_wrap {
        margin: 0 1rem;
    }
}


/* 
=======================================================
TRIANGLE ▶
=======================================================
*/
.triangle {
    display: inline-block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-size: 200% 200%;
    animation: bggradient 1s ease infinite, moveRight 1s linear infinite;
}

.first_cta .triangle,
.shiny_button .triangle,
.middle_cta .triangle,
.step .triangle,
.back_btn .triangle,
.send_btn .triangle {
    position: absolute;
    width: 1rem;
    height: 2rem;
    top: calc(50% - 1rem);
    right: 1.5rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.first_cta .triangle {
    background-image: radial-gradient(circle farthest-corner at 3.2% 8.6%, rgba(80, 12, 139, 1) 0%, rgb(250, 2, 221) 100%);
}

.shiny_button .triangle {
    background-image: linear-gradient(107.7deg, #cea369 8.4%, #fefcec 90.3%);
}

.middle_cta .triangle {
    background-image: linear-gradient(107.7deg, rgba(255, 244, 169, 1) 8.4%, rgba(255, 244, 234, 1) 90.3%);
}

@media screen and (max-width: 480px) {
    .middle_cta .triangle {
        right: 1rem;
    }
}

/* STEPS */
.step .triangle {
    top: calc(50% - 1rem);
    right: -1.5rem;
    background-image: radial-gradient(circle farthest-corner at 3.2% 8.6%, rgba(80, 12, 139, 1) 0%, rgb(250, 2, 221) 100%);
    z-index: 2;
}

/* 横向きから下向き */
@media screen and (max-width: 480px) {
    .step .triangle {
        top: unset;
        bottom: -1rem;
        left: calc(50% - 1rem);
        transform: translateX(-50%);
        width: 2rem;
        height: 1rem;
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
        animation: bggradient 1s ease infinite, fuwafuwa_updown 1s linear infinite;
    }
}

.back_btn .triangle {
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
    top: 50%;
    right: auto;
    left: 1.5rem;
    background-image: linear-gradient(107.7deg, #cea369 8.4%, #fefcec 90.3%);
    animation: bggradient 1s ease infinite;
}

@media screen and (max-width: 480px) {
    .back_btn .triangle {
        left: 0.5rem;
    }
}

.send_btn .triangle {
    top: 50%;
    background-image: linear-gradient(107.7deg, #cea369 8.4%, #fefcec 90.3%);
    animation: bggradient 1s ease infinite;

}

@media screen and (max-width: 480px) {
    .send_btn .triangle {
        right: 0.5rem;
    }
}

/* 
=======================================================
CTA
=======================================================
*/
/* Fisrt CTA
=======================================================
*/

/* First CTA 全体 */
.first_cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* 今すぐ！ */
.first_cta .above {
    position: relative;
    font-size: 1.3rem;
    color: var(--main_purple);
}

/* ＼ ／ */
.first_cta .above:before {
    margin-right: 1rem;
    content: '＼';
}

.first_cta .above:after {
    margin-left: 1rem;

    content: '／';
}

/* 厳選ファクタリング無料一括査定 */
.first_cta h1 {
    position: relative;
    height: 100%;
    background: var(--main_purple);
    color: white;
    padding: var(--btn_padding_pc);
    border-radius: var(--btn_radius);
    vertical-align: middle;
    text-align: center;
    animation: 2s fuwafuwa infinite;
}

@media screen and (max-width: 480px) {
    .first_cta h1 {
        width: 100%;
        padding: var(--btn_padding_sp);
    }
}

/* MIDDLE CTA
=======================================================
*/
.middle_cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 100%;
    margin-top: 3rem;
    padding: var(--btn_padding_pc);
    border-radius: var(--text_radius);
    background-color: var(--cta_robust);
    animation: 2s heartbeat linear infinite;
}

@media screen and (max-width: 480px) {
    .middle_cta {
        width: 100%;
        padding: var(--btn_padding_sp);
        margin-top: 0;
    }
}

.middle_cta::before {
    content: '';
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border: 1px solid var(--cta_robust);
    border-radius: calc(var(--text_radius) + 2px);
    position: absolute;
    top: -3px;
    left: -3px;
}

.middle_cta img {
    position: absolute;
    width: 20%;
    max-height: 8rem;
    bottom: -0.3rem;
    left: -1rem;
}

@media screen and (max-width: 768px) {
    .middle_cta img {
        display: none;
    }
}

.middle_cta .text {
    color: white;
    font-family: "Murecho", sans-serif;
    text-align: center;
}

/* 厳選ファクタリング一括査定 */
.middle_cta .text p:first-child {
    position: relative;
    font-size: 1.3rem;
}

/* ＼ ／ */
.middle_cta .text p:first-child:before {
    margin-right: 1rem;
    content: '＼';
}

.middle_cta .text p:first-child:after {
    margin-left: 1rem;

    content: '／';
}

@media screen and (max-width: 480px) {

    /* 厳選ファクタリング一括査定 */
    .middle_cta .text p:first-child {
        font-size: 1rem;
    }

    /* ＼ ／ */
    .middle_cta .text p:first-child:before {
        margin-right: 0.5rem;
    }

    .middle_cta .text p:first-child:after {
        margin-left: 0.5rem;
    }
}

/* 今すぐ査定する */
.middle_cta .text p:last-child {
    font-size: 3rem;
    line-height: 1;
}

@media screen and (max-width: 480px) {
    .middle_cta .text p:last-child {
        font-size: 2rem;
    }
}

/* 
=======================================================
BUTTON
=======================================================
*/

/* Default button background color is #EFEFEF, reset the color */
button {
    width: 100%;
    background-color: transparent;
}

.shiny_button {
    position: relative;
    overflow: hidden;
    width: fit-content;
    margin: 1rem auto 0;
    padding: var(--btn_padding_pc);
    font-size: 2rem;
    font-weight: bolder;
    color: white;
    background: var(--bg_form_item);
    border-radius: var(--btn_radius);
}

@media screen and (max-width: 480px) {
    .shiny_button {
        width: 100%;
        font-size: 1.5rem;
        padding: var(--btn_padding_sp);
    }

}

.shiny_button::after {
    position: absolute;
    content: '';
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 100%);
    height: 100%;
    left: -100%;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    animation: 2s 0s shine linear infinite;
}

/* 
=======================================================
HEADER
=======================================================
*/
header {
    position: absolute;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    height: 5rem;
    padding: 0.5rem 0;
}


@media screen and (max-width: 480px) {
    header {
        height: 4rem;
    }
}

.header_wrap {
    position: relative;
    /* ↓ 5rem を継承 */
    height: 100%;
}

header a {
    position: absolute;
    display: block;
    /* ↓ 5rem を継承 */
    height: 100%;
    width: auto;
}

header img {
    /* ↓ 5rem を継承 */
    height: 100%;
    width: 100%;
}

/* 
=======================================================
FV
=======================================================
*/
.fv {
    background-image: url(../img/fv/fv_01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--section_updown_pc);
}

@media screen and (max-width: 480px) {
    .fv {
        padding: var(--section_updown_sp);
    }
}

.fv::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 80%;
    background-image: url(../img/fv/fv_02.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

@media screen and (max-width: 480px) {
    .fv::before {
        display: none;
    }

}

.fv_wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap_pc);
}

@media screen and (max-width: 480px) {
    .fv img {
        margin: 1.5rem 0 0;
        width: 100%;
    }
}

.fv .slogan {
    position: absolute;
    top: -150%;
    left: 3rem;
    text-align: center;
}

.fv .slogan p {
    color: var(--main_grey);
    font-size: x-large;
    font-family: "Murecho", sans-serif;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .fv .slogan {
        top: -75%;
        left: 1rem;
    }

    .fv .slogan p {
        font-size: medium;
    }
}

@media screen and (max-width: 480px) {
    .fv .slogan {
        position: static;
    }
}

/* 
=======================================================
FIRST
=======================================================
first全体にかかる設定
-------------------------------------------------------
*/
/* 背景 */
.first {
    padding: var(--section_updown_pc);
    background: var(--bg_first);
}

@media screen and (max-width: 480px) {
    .first {
        padding: var(--section_updown_sp);
    }
}

/* タイトル */
.first h2.deco {
    color: white;
}

/* 本文 */
.first .text {
    color: var(--main_navy);
    background-color: white;
    padding: var(--text_padding_pc);
    background-image:
        linear-gradient(-45deg, #A68053 0.5rem, transparent 0),
        linear-gradient(135deg, #A68053 0.5rem, transparent 0);
    border: 1px solid var(--title_point_h2);
}

@media screen and (max-width: 480px) {
    .first .text {
        padding: var(--text_padding_sp);
    }
}


/* 
=======================================================
FORM
=======================================================
FORM全体にかかる設定
-------------------------------------------------------
*/
.form {
    background-image: url(../img/background/form_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--section_updown_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .form {
        padding: var(--section_updown_sp);
    }
}

.form h2 {
    color: var(--bg_form_item);
}


/* 
FORM 項目囲み
-------------------------------------------------------
*/
.form_wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}

@media screen and (max-width: 1000px) {
    .form_wrap {
        gap: 0.25rem;
        padding: 0 1rem;
    }
}

/* 
FORM 項目
-------------------------------------------------------
*/
.form .item {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid var(--bg_form_item);
}

/* 項目名 */
.form .name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: left;
    background: var(--bg_form_item);
    padding: var(--padding_pc);
    min-width: 30%;
    max-width: 30%;
}

@media screen and (max-width: 480px) {
    .form .name {
        padding: var(--padding_sp);
        align-items: flex-start;
    }
}

/* 注釈 */
.form .name sup {
    width: 100%;
    text-align: right;
    color: var(--main_yellow);
}

/* 注釈※必須 */
.form .name sup.optional {
    color: white;
}

/* 選択肢 */
.form .input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: white;
    padding: var(--padding_pc);
    width: 100%;
    gap: 0.5rem;
}

@media screen and (max-width: 480px) {
    .form .input {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        padding: var(--padding_sp);
        gap: 0.25rem;
    }
}

.form .input .choice {
    display: flex;
    width: calc(50% - 0.5rem);
}

@media screen and (max-width: 480px) {
    .form .input .choice {
        width: 100%;
    }
}


/* 都道府県選択用 */
.form .input .choice.region {
    flex-direction: column;
    align-items: center;
}

.form .input .choice.region:last-child {
    padding-left: 0.5rem;
    border-left: 1px solid var(--bg_form_item);
}

@media screen and (max-width: 480px) {
    .form .input .choice.region:last-child {
        padding: 0;
        padding-top: 0.25rem;
        border-left: none;
        border-top: 1px solid var(--main_navy);
        ;
    }
}

/* 
CHECK BOX
選択肢のチェックボックス
-------------------------------------------------------
*/
.form input[type="checkbox"]+label {
    position: relative;
    width: 100%;
    padding-left: 2rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media screen and (max-width: 480px) {
    .form input[type="checkbox"]+label {
        padding: 0;
        padding-left: 1.5rem;
    }
}

/* □ */
.form input[type="checkbox"]+label:before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--main_grey);
    border-radius: var(--box_radius);
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

.form input[type="checkbox"]:checked+label:before {
    width: 8px;
    top: 20%;
    left: 0.5rem;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 
RADIO
選択肢のラジオボタン
-------------------------------------------------------
*/
.form input[type="radio"] {
    appearance: none;
}

.form input[type="radio"]+label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: var(--box_padding_pc);
    padding-left: 2rem;
    position: relative;
    width: auto;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label {
        padding: 0;
        padding-left: 1.5rem;
    }
}

.form input[type="radio"]+label::before {
    border: 2px solid var(--main_grey);
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    left: 0px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label::before {
        height: 20px;
        width: 20px;
        left: 0px;
        margin-top: -9px;
    }
}

/* 
ラジオボタン選択時のアニメーション
-------------------------------------------------------
*/
.form input[type="radio"]+label::after {
    background: var(--main_purple);
    border-radius: 50%;
    content: '';
    display: block;
    height: 18px;
    width: 18px;
    left: 3px;
    margin-top: -9px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale3d(.3, .3, 1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label::after {
        height: 14px;
        width: 14px;
        left: 3px;
        margin-top: -6px;
    }
}

.form input[type="radio"]:checked+label:before {
    border-color: var(--main_grey);
}

.form input[type="radio"]:checked+label::after {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

/* 
SELECT2 上書き
選択肢のセレクト
-------------------------------------------------------
*/
.form select {
    height: 100%;
    width: 100%;
}

.select2-container {
    line-height: 0;
}

/* ! select2.min.css より枠線を無効化  */
.select2-container--default .select2-selection--single {
    border: none;
}

.select2-container--default .select2-selection--single:focus {
    border-color: var(--main_purple);
    outline: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
}

/* 
注意事項
-------------------------------------------------------
*/
.form .mandatory {
    display: flex;
    flex-direction: column;
    padding: var(--padding_pc);
    background-color: white;
    border: 1px solid var(--bg_form_item);
}

@media screen and (max-width: 480px) {
    .form .mandatory {
        padding: var(--padding_sp);
    }
}

.form .mandatory input[type="checkbox"]+label {
    width: fit-content;
}

@media screen and (max-width: 480px) {
    .form .mandatory input[type="checkbox"]+label {
        font-size: smaller;
    }

}

.form .caution p{
    font-size: small;
    font-weight: bold;
    color: red;
}

/* 
=======================================================
Q&A 共有
=======================================================
*/
/* q_a タイトル */
.q_a .title,
.q_a .detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--text_padding_pc);
    border: 1px solid var(--main_navy);
}

@media screen and (max-width: 480px) {

    .q_a .title,
    .q_a .detail {
        padding: var(--text_padding_sp);
    }
}

/* 
Q&A タイトル部分
-------------------------------------------------------
*/
.q_a .title {
    justify-content: center;
    background: var(--bg_qa_title);
    background-image:
        /* linear-gradient(-45deg, #FEFEEC 0.5rem, transparent 0); */
        linear-gradient(135deg, #f9f871 0.5rem, transparent 0);
    gap: 2rem;
    overflow: hidden;
}

@media screen and (max-width: 480px) {
    .q_a .title {
        gap: 1.5rem;
    }
}

/* Q. */
.q_a h2.q_title {
    position: relative;
    text-align: center;
    width: 100%;
    color: white;
    padding-bottom: 2rem;
}

@media screen and (max-width: 480px) {
    .q_a h2.q_title {
        padding-bottom: 1rem;
    }

}

/* Q. 吹き出し */
.q_a h2.q_title::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/deco/q_balloon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 1rem;
    left: 24.5%;
    height: 5.25rem;
    width: 50%;
}

@media screen and (max-width: 480px) {

    /* Q. 吹き出し */
    .q_a h2.q_title::before {
        height: 3rem;
        max-width: 70%;
        top: 1.5rem;
        left: 12%;
        width: 100%;
    }

    /* 質問文が2行になったとき用 */
    .q_a h2.q_title.two_lines::before {
        top: 3rem;
    }
}

/* A. */
.q_a h3.a_title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--title_a);
    text-align: center;
    font-size: xx-large;
    width: fit-content;
    height: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {

    /* A. */
    .q_a h3.a_title {
        font-size: large;
    }
}

/* A. 大きいA */
.q_a h3.a_title .big_a {
    display: block;
    width: fit-content;
    height: fit-content;
    margin-right: 1rem;
}

@media screen and (max-width: 480px) {

    /* A. 大きいA */
    .q_a h3.a_title .big_a {
        width: 3rem;
        height: 3rem;
        margin-right: 0.5rem;
    }
}

/* A. 左右飾り共通 */
.q_a h3.a_title::before,
.q_a h3.a_title::after {
    position: absolute;
    content: "";
    width: 3rem;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 480px) {

    /* A. 左右飾り共通 */
    .q_a h3.a_title::before,
    .q_a h3.a_title::after {
        width: 2rem;
    }
}

/* A. 左 */
.q_a h3.a_title::before {
    background-image: url(../img/deco/a_left.webp);
    left: -3.5rem;
}

@media screen and (max-width: 480px) {

    /* A. 左 */
    .q_a h3.a_title::before {
        left: -2rem;
    }
}

/* A. 右 */
.q_a h3.a_title::after {
    background-image: url(../img/deco/a_right.webp);
    right: -3.5rem;
}

@media screen and (max-width: 480px) {

    /* A. 右 */
    .q_a h3.a_title::after {
        right: -2.5rem;
    }
}

/* q_a 本文部分 */
.q_a .detail {
    gap: var(--gap_pc);
    background: white;
    background-image:
        linear-gradient(-45deg, #f9f871 0.5rem, transparent 0);
}

@media screen and (max-width: 480px) {

    .q_a .diagram img {
        max-width: 100%;
    }

}

/* 
=======================================================
INTRO
=======================================================
intro 背景部分の設定
-------------------------------------------------------
*/
.intro {
    padding: var(--section_updown_pc);
    background-color: var(--bg_intro);
}

@media screen and (max-width: 480px) {
    .intro {
        padding: var(--section_updown_sp);
    }
}

/* 
intro レイアウト
-------------------------------------------------------
*/
.intro .intro_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 
=======================================================
POINTS
=======================================================
points 背景部分の設定
-------------------------------------------------------
*/
.points {
    background-image: url(../img/background/points_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--section_updown_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .points {
        padding: var(--section_updown_sp);
    }
}

/* 
points レイアウト
-------------------------------------------------------
*/
.points .points_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--section_gap_pc);
}

/* 
points タイトル
-------------------------------------------------------
*/
.points h2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    width: 100%;
    margin-bottom: var(--title_bottom_pc);
}

@media screen and (max-width: 480px) {
    .points h2 {
        margin-bottom: 0;
    }
}

/* ポイント3つ */
.points h2 .title_bottom {
    position: absolute;
    display: flex;
    font-size: xx-large;
    font-weight: bolder;
    font-family: 'Shippori Mincho', serif;
    color: var(--title_point_p);
    justify-content: center;
    margin: 2.5rem auto 0;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .points h2 .title_bottom {
        margin-top: 1.5rem;
    }
}

/* ポイント3つ 背景画像 */
.points h2 img.deco {
    opacity: 0.5;
    z-index: -1;
    width: fit-content;
    max-width: 200px;
}

/* 
points 3つのポイント詳細 全体
-------------------------------------------------------
*/
.points .points_details {
    display: flex;
    gap: var(--gap_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .points .points_details {
        flex-direction: column;
        gap: var(--gap_sp);
    }
}

/* 
points 3つのポイント詳細 個々
-------------------------------------------------------
*/
.points .points_details details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* points 3つのポイント詳細 個々 タイトル*/
.points .points_details summary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* POINT 上半分 */
.points .points_details summary .above {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--gap_pc);
    height: fit-content;
}

@media screen and (max-width: 480px) {
    .points .points_details summary .above {
        gap: var(--gap_sp);
    }
}

/* 背景黄色 */
.points .points_details summary .above::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--main_yellow);
    border-top-left-radius: var(--text_radius);
    border-top-right-radius: var(--text_radius);
    mix-blend-mode: multiply;
    z-index: 0;
}

/* POINT 囲み*/
.points .points_details summary .point {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    padding-top: var(--padding_pc);
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .points .points_details summary .point {
        padding-top: var(--padding_sp);
    }
}

/* POINT */
.points .points_details summary .point p {
    font-size: 2rem;
    line-height: 1;
    font-family: 'Montagu Slab', serif;
    color: var(--title_point_p);
    border-bottom: 1px solid var(--title_point_p);
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {
    .points .points_details summary .point p {
        font-size: 1.25rem;
    }
}

/* NUMBER */
.points .points_details summary .point img {
    height: 3rem;
}

@media screen and (max-width: 480px) {
    .points .points_details summary .point img {
        height: 2rem;
    }
}

/* まとめ */
.points .points_details summary h3 {
    font-family: 'Shippori Mincho', serif;
    font-style: normal;
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--title_point_h2);
    z-index: 1;
    padding-bottom: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .points .points_details summary h3 {
        font-size: 1.75rem;
        padding-bottom: var(--padding_sp);
    }
}

/* 要約 下半分*/
.points .points_details summary .in_short {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    background: white;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
    width: 100%;
    height: 50%;
    padding: var(--padding_pc);
    padding-bottom: 3rem;
    font-family: 'Murecho', sans-serif;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 500;
}

@media screen and (max-width: 480px) {
    .points .points_details summary .in_short {
        height: fit-content;
        font-size: 1.15rem;
        line-height: 1.3;
    }
}


/* 閉じてるときに表示される */
.points_details summary .in_short::after,
.points_details details[open] summary .in_short::after {
    position: absolute;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1;
    padding: var(--padding_sp);
    color: white;
    background:
        linear-gradient(135deg, transparent 50%, white 50%) bottom right,
        linear-gradient(225deg, transparent 0%, #5969B1 0%) bottom right;
    background-size: 0.5rem 0.5rem;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: var(--main_purple);
    right: -0.1rem;
    top: calc(100% - 1rem);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.points_details summary .in_short::after {
    content: "READ MORE";
}

/* 開いてるときに表示される */
.points_details details[open] summary .in_short::after {
    content: "CLOSE";
}

/* 開いた後のテキスト */
.points .points_details details[open] .content {
    background-color: rgba(255, 255, 255, 0.5);
    padding: var(--padding_pc);
    z-index: 0;
}

@media screen and (max-width: 480px) {
    .points .points_details details .content {
        padding: var(--padding_sp);
    }
}

/* 
=======================================================
PICK
=======================================================
pick 背景部分の設定
-------------------------------------------------------
*/

.pick {
    padding: var(--section_updown_pc);
    background-color: var(--bg_pick);
    /* border-top: 1px solid var(--main_purple); */
}

@media screen and (max-width: 480px) {
    .pick {
        padding: var(--section_updown_sp);
    }
}

/* 
pick レイアウト
-------------------------------------------------------
*/
.pick .pick_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

@media screen and (max-width: 480px) {
    .pick .pick_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 図解　全体 */
.pick .diagram {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: var(--gap_pc);
    width: 100%;
}

.pick .diagram.portrait {
    align-items: center;
    flex-direction: column;
}

@media screen and (max-width: 480px) {
    .pick .diagram {
        flex-direction: column;
    }
}

/* 図解　画像サイズ */
.pick .diagram img {
    width: 100%;
    max-height: 640px;
    max-width: 800px;
}

@media screen and (max-width: 480px) {
    .pick .diagram img {
        padding-top: 0.25rem;
        max-width: 100%;
    }
}

/* 図解　一括査定を利用しない場合・利用した場合 */
.pick h4 {
    background: var(--bg_pick_title_pale);
    border-bottom: 1px solid var(--bg_pick_title);
    padding-right: var(--padding_sp);
    width: 100%;
}

.pick .if_not h4,
.pick .if_use h4 {
    margin-bottom: var(--gap_pc);
}



/* 図解　一括査定 */
.pick h4 span.bg_purple {
    background-color: var(--bg_pick_title);
    color: white;
    padding: var(--padding_sp);
    margin-right: 0.2rem;
}

/*
about_us
-------------------------------------------------------
*/
.pick .about_us {
    width: 100%;
}

/* 見出し */
.pick .about_us h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: var(--bg_pick_title);
    background-image:
        linear-gradient(135deg, white 0.5rem, transparent 0);
    border: 1px solid var(--main_purple);
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .pick .about_us h2 {
        padding: var(--padding_sp);
    }
}

/* 1 */
.pick .about_us h2 img {
    height: 3rem;
}

/* 本文部分 */
.pick .about_us .detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap_pc);
    width: 100%;
    padding: var(--text_padding_pc);
    background: white;
    background-image:
        linear-gradient(-45deg, #8b95c9 0.5rem, transparent 0);
    border: 1px solid var(--bg_pick_title);
    border-top: none;
}

@media screen and (max-width: 480px) {
    .pick .about_us .detail {
        gap: var(--gap_sp);
        padding: var(--text_padding_sp);
    }
}

/* 区切り画像 */
.hr {
    width: 50%;
    max-width: 360px;
}

/* STEP */
.pick .about_us ol {
    display: flex;
    gap: var(--gap_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .pick .about_us ol {
        flex-direction: column;
    }
}

/* STEP 囲み */
.pick .about_us li,
.pick .about_us li a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {

    .pick .about_us li,
    .pick .about_us li a {
        flex-direction: row;
        align-items: center;
    }
}

.pick .about_us li {
    counter-increment: number;
    background: var(--bg_pick_step);
    border: 1px solid var(--main_yellow);
    border-radius: var(--text_radius);
}

/* STEP 説明文 */
.pick .about_us li p {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: "Murecho", sans-serif;
    font-weight: 500;
    font-size: larger;
    color: var(--main_grey);
    margin-bottom: 1rem;
    margin-top: 5rem;
    z-index: 1;
    height: 100%;
}

@media screen and (max-width: 480px) {
    .pick .about_us li p {
        font-size: medium;
        margin-top: 2rem;
        margin-bottom: 0;
        text-align: left;
        width: 70%;
    }
}

/* STEP 1のみ強調 */
.pick .about_us li a p {
    text-decoration: underline;
    padding-bottom: 0.1rem;
    color: var(--cta_robust);
}

/* STEP */
.pick .about_us li p::after {
    position: absolute;
    content: "STEP 0" counter(number) ".";
    font-family: "Shippori Mincho", serif;
    font-size: 2rem;
    line-height: 1;
    top: -5rem;
    width: 100%;
    background-color: var(--main_yellow);
    padding: var(--padding_pc);
    border-top-left-radius: var(--text_radius);
    border-top-right-radius: var(--text_radius);
    color: var(--title_step);
    z-index: -1;
}

@media screen and (max-width: 480px) {
    .pick .about_us li p::after {
        font-size: 1.05rem;
        top: calc(-2.7rem - 1px);
        padding: var(--padding_sp);
        border-radius: unset;
        border-top-left-radius: var(--text_radius);
    }
}

/* STEP アイコン */
.pick .about_us li .icon {
    display: flex;
    justify-content: center;
    padding: var(--padding_pc);
    height: 100%;
    width: 100%;
    background: var(--bg_pick_step_icon);
}

@media screen and (max-width: 480px) {

    /* STEP アイコン */
    .pick .about_us li .icon {
        justify-content: flex-start;
        padding: var(--padding_sp);
        width: 30%;
        border-left: 1px solid var(--main_yellow);
    }
}

.pick .about_us li .icon img {
    max-height: 124px;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* STEP 1 サイズ微調整 */
@media screen and (max-width: 480px) {
    .pick .about_us li .icon img {
        height: 88px;
    }
}

/* 
=======================================================
MERIT
=======================================================
merit 背景部分の設定
-------------------------------------------------------
*/

.merit {
    background-image: url(../img/background/merit_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--section_updown_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .merit {
        padding: var(--section_updown_sp);
    }
}

/* 
merit レイアウト
-------------------------------------------------------
*/
.merit .merit_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 
merit タイトル
-------------------------------------------------------
*/
.merit h2 {
    color: var(--main_grey);
}

.merit h2 .title_bottom {
    line-height: 1;
    font-size: xx-large;
    font-weight: bolder;
    font-family: 'Shippori Mincho', serif;
    color: var(--title_point_h2);
}

/* 
merit 項目
-------------------------------------------------------
*/
.merit ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .merit ol {
        gap: var(--gap_sp);
    }

}

.merit li {
    counter-increment: number;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 3 - 0.7rem);
    height: 100%;
    aspect-ratio: 1;
}

@media screen and (max-width: 480px) {
    .merit li {
        width: calc(100% / 2 - 0.25rem);
    }
}

/* merit title */
.merit li .title {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 20%;
    width: 100%;
    background-color: var(--title_point_h2);
}

@media screen and (max-width: 480px) {

    /* merit title */
    .merit li .title {
        height: fit-content;
    }
}


.merit li .title h3 {
    position: relative;
    width: 100%;
    line-height: 1;
    text-align: center;
    padding: var(--padding_pc);
    padding-left: 3rem;
    color: white;
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .merit li .title h3 {
        padding: var(--padding_sp);
    }
}

.merit li .title h3::before {
    position: absolute;
    content: "0" counter(number);
    font-family: "Shippori Mincho", serif;
    font-size: 4.25rem;
    line-height: 1;
    bottom: 0;
    left: -1.5rem;
    color: rgba(255, 255, 255, 0.2);
    z-index: -1;
}

@media screen and (max-width: 480px) {
    .merit li .title h3::before {
        left: -0.5rem;
        font-size: 2rem;
    }
}

/* merit title */
.merit li .icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap_pc);
    width: 100%;
    height: 80%;
    padding: var(--padding_pc);
    background: white;
}

@media screen and (max-width: 480px) {
    .merit li .icon {
        padding: var(--padding_sp);
        gap: var(--gap_sp);
    }
}

.merit li .icon p {
    text-align: center;
}

@media screen and (max-width: 480px) {
    .merit li .icon p {
        font-size: smaller;
    }
}

.merit li .icon img {
    width: 100%;
    height: 160px;
}

@media screen and (max-width: 768px) {
    .merit li .icon img {
        height: 70px;
        max-width: 124px;
        margin: 0 auto;
    }
}

/* 
=======================================================
REVIEW
=======================================================
review 背景部分の設定
-------------------------------------------------------
*/

.review {
    background-color: var(--bg_review);
    padding: var(--section_updown_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .review {
        padding: var(--section_updown_sp);
    }
}

/* 
review レイアウト
-------------------------------------------------------
*/
.review .review_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 480px) {
    .review .review_wrap {
        gap: var(--gap_pc);
    }
}


/* 
points タイトル
-------------------------------------------------------
*/
.review h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--title_bottom_pc);
}

@media screen and (max-width: 480px) {
    .review h2 {
        margin-bottom: 0;
    }
}

/* 利用者の声 */
.review h2 .title_bottom {
    display: flex;
    align-items: center;
    font-size: xx-large;
    color: var(--title_point_p);
    gap: var(--gap_sp);
    justify-content: center;
    width: 100%;
}

/* 声 背景画像 */
.review h2 .voice {
    position: relative;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    line-height: 1;
    font-size: 5rem;
    z-index: 9;
}

.review h2 .voice::before {
    position: absolute;
    content: "";
    width: 5rem;
    height: 5rem;
    top: 0;
    background-image: url(../img/deco/voice_test.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

/* CASE */
.review ol {
    display: flex;
    flex-direction: column;
    gap: var(--gap_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .review ol {
        gap: var(--gap_sp);
    }
}


.review li.case {
    counter-increment: number;
    display: flex;
}

@media screen and (max-width: 480px) {
    .review li.case {
        position: relative;
        flex-direction: column;
        width: 100%;
    }
}

/* 口コミ画像 */
.review li .image {
    position: relative;
    width: 30%;
}

@media screen and (max-width: 480px) {
    .review li .image {
        position: absolute;
        width: 35%;
        max-width: 6.5rem;
        top: -1.5rem;
        left: -0.5rem;
    }
}

.review li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 480px) {
    .review li .image img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        border: 0.25rem solid var(--bg_review_title);
    }
}

.review li .image .result {
    position: absolute;
    bottom: 0;
    background: var(--main_yellow);
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .review li .image .result {
        display: none;
    }
}

@media screen and (min-width: 480px) {
    .review li .result_sp {
        display: none;
    }
}

.review li .result_sp {
    width: 100%;
    text-align: center;
    background: var(--main_yellow);
    padding: var(--padding_sp);
    margin-bottom: 0;
}


/* 口コミ文章 */
.review li .detail {
    display: flex;
    flex-direction: column;
    width: 70%;
}

@media screen and (max-width: 480px) {

    /* 口コミ文章 */
    .review li .detail {
        width: 100%;
        align-items: flex-end;
    }

}

/* タイトル */
.review li h3 {
    display: flex;
    align-items: center;
    gap: var(--gap_pc);
    background: var(--bg_review_title);
    color: white;
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .review li h3 {
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 0;
    }
}

.review li h3 span {
    position: relative;
    background: white;
    color: var(--bg_review_title);
    padding: var(--padding_sp);
    padding-right: 2.5rem;
}

.review li h3 span::before {
    position: absolute;
    content: "0" counter(number);
    width: 2rem;
    right: 0;
}

/* 本文 */
.review li .text {
    background-color: white;
    padding: var(--padding_pc);
    width: 100%;
}

.review li .text .profile {
    text-align: right;
    font-size: small;
}

/* 
=======================================================
FLOAT MENU
=======================================================
*/
.float_menu {
    position: fixed;
    z-index: 99998;
    bottom: 0;
    width: 100%;
    height: 15vh;
    background: white;
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* 今すぐ！ */
.float_menu .above {
    position: relative;
    font-size: 1rem;
    color: var(--main_purple);
    animation: 1.1s fuwafuwa infinite linear;
}

/* ＼ ／ */
.float_menu .above:before {
    margin-right: 1rem;
    content: '＼';
}

.float_menu .above:after {
    margin-left: 1rem;
    content: '／';
}

.float_menu a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--padding_pc);
}

.float_menu a p {
    background-color: var(--main_purple);
    color: white;
    padding: var(--padding_pc);
    border-radius: var(--btn_radius);
    text-align: center;
    width: 100%;
    max-width: var(--width_pc);
}

@media screen and (max-width: 480px) {
    .float_menu a p {
        padding: 0.5rem 1rem;
        width: fit-content;
    }
}

/* 
=======================================================
FOOTER
=======================================================
*/
.footer {
    width: 100%;
    color: white;
    background: var(--main_purple);
    text-align: center;
    font-weight: bolder;
    padding: var(--section_updown_pc);
    padding-bottom: calc(15vh + 5rem);
}

@media screen and (max-width:480px) {
    .footer {
        padding: var(--section_updown_sp);
        padding-bottom: calc(15vh + 3rem);
    }
}

.footer.nofollow {
    padding-bottom: 5rem;
}

@media screen and (max-width:480px) {
    .footer.nofollow {
        padding-bottom: 3rem;
    }
}


.footer .menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

@media screen and (max-width:480px) {
    .footer .menu {
        justify-content: flex-start;
    }
}

.footer .menu li {
    margin: 0;
    padding: 0 0px;
    color: var(--body_white);
}

@media screen and (max-width:480px) {
    .footer .menu li {
        width: calc(100% / 2);
    }
}

.footer .menu li::before {
    position: relative;
    content: "｜";
    padding-right: 30px;
    padding-left: 30px;
}

.footer .menu li:first-child::before {
    content: "";

}

@media screen and (max-width:480px) {
    .footer .menu li::before {
        content: "";
        padding: 0;
    }
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}


.footer .copyright {
    font-size: smaller;
}

/* 
*******************************************************
=======================================================
confirm.html
送信内容確認画面
=======================================================
*******************************************************
*/
/* 
=======================================================
CONFIRM
=======================================================
*/
/* 全体にかかる設定 */
/* ---------------------------------- */
/* 背景 */
.confirm {
    padding: var(--section_updown_pc);
    padding-top: calc(5rem + 3rem);
    background: var(--bg_confirm);
}

@media screen and (max-width: 480px) {
    .confirm {
        padding: var(--section_updown_sp);
        padding-top: calc(3rem + 4rem);
    }
}

.confirm .confirm_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--section_gap_pc);
}

@media screen and (max-width: 480px) {
    .confirm .confirm_wrap {
        gap: var(--section_gap_sp);
    }
}

/* タイトル */
/* ---------------------------------- */
.confirm h2.deco {
    color: white;
    margin-bottom: 0;
}

/* 確認依頼 */
/* ---------------------------------- */
.confirm .caution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap_pc);
    color: var(--main_navy);
    background-color: white;
    padding: var(--text_padding_pc);
    background-image:
        linear-gradient(-45deg, #f9f871 0.5rem, transparent 0),
        linear-gradient(135deg, #f9f871 0.5rem, transparent 0);
}

@media screen and (max-width: 480px) {
    .confirm .caution {
        flex-direction: column;
        gap: var(--gap_sp);
        padding: var(--text_padding_sp);
    }
}

/* アイコン */
.confirm .caution .icon {
    max-width: 80px;
}

@media screen and (max-width: 480px) {
    .confirm .caution .icon {
        max-width: 48px;
    }
}

.confirm .caution .icon img {
    width: 100%;
}

/* フロー図 */
/* ---------------------------------- */
ol.flow {
    display: flex;
    width: 100%;
    max-width: 70%;
    gap: 1.5rem;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    ol.flow {
        max-width: unset;
    }
}

ol.flow li {
    position: relative;
    text-align: center;
    font-size: larger;
    width: calc(100% / 3 - -1.5rem);
    padding: var(--padding_sp);
    color: var(--main_grey);
    background-color: var(--bg_review);
}

@media screen and (max-width: 480px) {
    ol.flow li {
        font-size: medium;
        padding: 0.25rem;
    }
}

ol.flow li::before {
    position: absolute;
    content: "";
    display: inline-block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 0;
    right: calc(-1rem + 0.5px);
    width: 1rem;
    height: 100%;
    background-color: var(--bg_review);
}

ol.flow li.current {
    font-weight: bold;
    color: var(--main_navy);
    background-color: var(--main_yellow);
}

ol.flow li.current::before {
    background-color: var(--main_yellow);
}

/* 最後のステップからは三角を消す */
ol.flow li:last-child:before {
    display: none;
}

/* 入力内容 */
/* ---------------------------------- */
.confirm .data_entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--gap_sp);
}

.confirm .data_entry img {
    width: fit-content;
    max-width: 200px;
}

@media screen and (max-width: 480px) {
    .confirm .data_entry img {
        max-width: 128px;
    }
}

.confirm .data_entry img:last-child {
    transform: scale(1, -1);
}

dl {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--main_grey);
    border-bottom: none;
}

/* 項目名 */
dl dt {
    font-weight: bold;
    color: var(--title_step);
    background: var(--bg_confirm_title);
    padding: var(--padding_pc);
    width: 30%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 480px) {
    dl dt {
        width: 45%;
        padding: var(--padding_sp);
    }
}

/* 入力内容 */
dl dd {
    color: var(--main_grey);
    background: white;
    padding: var(--padding_pc);
    width: 70%;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 480px) {
    dl dd {
        width: 55%;
        padding: var(--padding_sp);
    }
}

/* ボタン */
/* ---------------------------------- */
.confirm_btn {
    display: flex;
    gap: var(--gap_pc);
    justify-content: space-between;
}

.confirm_btn .back_btn,
.confirm_btn .send_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 20%;
    padding: var(--padding_pc);
    color: var(--bg_confirm);
    border-radius: var(--text_radius);
    font-size: larger;
    font-weight: bolder;
}

@media screen and (max-width: 480px) {

    .confirm_btn .back_btn,
    .confirm_btn .send_btn {
        width: fit-content;
        min-width: unset;
        padding: var(--padding_sp) 1rem;
    }
}

.confirm_btn .back_btn::before,
.confirm_btn .send_btn::before {
    content: '';
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: calc(var(--text_radius) + 2px);
    position: absolute;
    top: -3px;
    left: -3px;
}

/* 戻る */
.confirm_btn .back_btn {
    background-color: var(--bg_review);
}

@media screen and (max-width: 480px) {

    .confirm_btn .back_btn {
        padding-left: 2rem;
    }
}

.confirm_btn .back_btn::before {
    border: 1px solid var(--bg_review);
}

/* 送信する */
.confirm_btn .send_btn {
    background-color: var(--main_yellow);
}

@media screen and (max-width: 480px) {

    .confirm_btn .send_btn {
        padding-right: 2rem;
    }
}

.confirm_btn .send_btn::before {
    border: 1px solid var(--main_yellow);
}

/* 注意書き */
/* ---------------------------------- */
.note p {
    font-size: x-small;
    color: white;
}

/* 
*******************************************************
=======================================================
thanks.html
送信完了
=======================================================
*******************************************************
*/
/* 
=======================================================
THANKS
=======================================================
*/
/* 全体にかかる設定 */
/* ---------------------------------- */
/* 背景 */
.thanks {
    padding: var(--section_updown_pc);
    padding-top: calc(5rem + 3rem);
    background: var(--bg_thanks);
}

@media screen and (max-width: 480px) {
    .thanks {
        padding: var(--section_updown_sp);
        padding-top: calc(3rem + 4rem);
    }
}

.thanks .thanks_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--section_gap_pc);
}

@media screen and (max-width: 480px) {
    .thanks .thanks_wrap {
        gap: var(--section_gap_sp);
    }
}

/* タイトル */
/* ---------------------------------- */
.thanks h2.deco {
    color: var(--main_grey);
}

/* 本文 */
.thanks .text {
    color: var(--main_navy);
    background-color: white;
    padding: var(--text_padding_pc);
    background-image:
        linear-gradient(-45deg, #2F4673 0.5rem, transparent 0),
        linear-gradient(135deg, #2F4673 0.5rem, transparent 0);
    border: 1px solid var(--title_step);
}

@media screen and (max-width: 480px) {
    .thanks .text {
        padding: var(--text_padding_sp);
    }
}

/* 
=======================================================
RECOMMEND
=======================================================
recommend 背景部分の設定
-------------------------------------------------------
*/
.recommend {
    padding: var(--section_updown_pc);
    background-color: var(--bg_recommend);
}

@media screen and (max-width: 480px) {
    .recommend {
        padding: var(--section_updown_sp);
    }
}

/* 
recommend レイアウト
-------------------------------------------------------
*/
.recommend .recommend_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* タイトル */
/* ---------------------------------- */
.recommend h2.deco {
    color: var(--title_step);
}

/* 
会社紹介
-------------------------------------------------------
*/
.recommend .list {
    display: flex;
    flex-direction: column;
    gap: var(--gap_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .recommend .list {
        gap: var(--gap_sp);
    }
}

.list .item {
    counter-increment: number;
    display: flex;
    flex-direction: column;
    background: white;
    gap: var(--gap_pc);
    width: 100%;
    border: 1px solid var(--cta_robust);
}

/* 社名 */
.list .item h3 {
    position: relative;
    width: 100%;
    padding: var(--padding_pc);
    background: var(--cta_robust);
    color: white;
}

.list .item h3 .deco_recommend {
    position: absolute;
    width: 10rem;
    height: 10rem;
    right: -2rem;
    top: -100%;
}

.list .item h3 .deco_recommend img {
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 480px) {
    .list .item h3 .deco_recommend {
        width: 6rem;
        height: 6rem;
        right: -1rem;
        top: -80%;
    }
}

/* 概要 */
.list .item .overview {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 var(--padding_pc);
    gap: var(--gap_pc);
}

@media screen and (max-width: 480px) {
    .list .item .overview {
        flex-direction: column;
        align-items: center;
    }
}

/* ロゴ */
.list .item .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
}

@media screen and (max-width: 480px) {
    .list .item .logo {
        width: 100%;
    }
}

.list .item .logo a {
    display: block;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .list .item .logo a {
        width: fit-content;
    }
}

.list .item .logo img {
    width: 80%;
    object-fit: contain;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .list .item .logo img {
        max-width: 216px;
    }
}


/* 詳細 */
.list .item .detail {
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: var(--gap_pc);
}

@media screen and (max-width: 480px) {
    .list .item .detail {
        gap: 1.5rem;
        width: 100%;
    }
}

.list .item .detail h4 {
    position: relative;
    padding-bottom: var(--padding_sp);
    border-bottom: 4px solid;
    color: var(--main_purple);
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.list .item .detail h4:before,
.list .item .detail h4:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.list .item .detail h4:before {
    border: 1rem solid;
    border-color: transparent;
    border-top-color: var(--main_purple);
    margin-left: -1rem;
}

.list .item .detail h4:after {
    border: 0.625rem solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -0.625rem;
}


/* 
特徴
-------------------------------------------------------
*/
.list .item .detail ol {
    display: flex;
    flex-direction: column;
    gap: var(--gap_sp);
    counter-reset: li;
    width: 100%;
}

@media screen and (max-width:480px) {
    .list .item .detail ol {
        gap: 0.25rem;
    }

}

.list .item .detail ol li {
    position: relative;
    padding: 0;
    padding-left: 2.5rem;
    line-height: 0;
}


.list .item .detail ol li:first-child {
    margin-top: 0;
}

.list .item .detail ol>li:before {
    position: absolute;
    font-weight: bold;
    counter-increment: li;
    content: counter(li) "";
    left: 0;
    top: -1px;
    color: #fff;
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    line-height: 0.9;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
    background: var(--main_grey);
    padding: 0.375rem 0;
}

/* 
評価表
=======================================================
*/
/* PC向けスタイル（画面幅が768px以上） */
.mobile-view {
    display: none;
    /* スマートフォン向けの表示を非表示にする */
}

.pc-view {
    display: table;
    /* PC向けの表示を表示する */
}

/* スマートフォン向けスタイル（画面幅が480px以下） */
@media screen and (max-width: 480px) {
    .mobile-view {
        display: table;
    }

    .pc-view {
        display: none;
    }
}

/* 
評価表の全体
-------------------------------------------------------
*/
.detail_table {
    padding: 0 var(--padding_pc);
}

.detail_table table {
    border-collapse: collapse;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    table-layout: fixed;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .detail_table table {
        width: 100%;
        align-items: center;
        justify-content: center;
    }
}

/* 
評価表 th（見出し）, td（セル）の設定
-------------------------------------------------------
*/
.detail_table table th,
.detail_table table td {
    padding: var(--padding_sp);
    border: 1px solid var(--main_grey);
    text-align: center;
    vertical-align: middle;
}

@media screen and (max-width: 480px) {

    .detail_table table th,
    .detail_table table td {
        width: auto;
        border-bottom: none;
        text-align: center;
        padding: var(--padding_sp) 0.1rem;
    }

    .detail_table tr:last-child {
        border-bottom: 1px solid var(--main_grey);
    }
}

/* 
評価表 th（見出し）の設定
-------------------------------------------------------
*/

.detail_table table th {
    color: white;
    background: var(--main_purple);
    width: calc(100% / 6);
    vertical-align: middle;
}

/* 
評価表 td（セル）の設定
-------------------------------------------------------
*/
@media screen and (max-width: 480px) {
    .detail_table table td {
        padding: var(--padding_sp);
        line-height: 1;
    }
}

.detail_table table td img {
    width: 50%;
    margin: 0 auto;
}

/*
評価表　左寄せ
-------------------------------------------------------
*/
.detail_table table .text_left {
    text-align: left;
}

.annotation {
    padding: var(--padding_pc);
    padding-top: 0;
}

.annotation p {
    font-size: x-small;
}

/* 
=======================================================
プライバシーポリシー
運営者情報
=======================================================
*/

.privacy_wrap,
.company_wrap {
    padding: var(--section_updown_pc);
    padding-top: calc(5rem + 3rem);
}

@media screen and (max-width: 480px) {

    .privacy_wrap,
    .company_wrap {
        padding: var(--section_updown_sp);
        padding-top: calc(3rem + 1rem);
    }
}

.privacy_wrap h1,
.company_wrap h1 {
    text-align: center;
    color: var(--main_navy);
}

.privacy01 {
    margin: 1rem auto;
}

.privacy01 ol {
    margin: 15px auto;
    list-style-type: decimal;
    /* 数字形式（1, 2, 3, ...） */
}

.privacy01 li {
    margin: 1rem 0 0.5rem 1rem;
}

.privacy01 h2 {
    color: var(--main_purple);
    margin-bottom: 0.5rem;
}

/* 
=======================================================

=======================================================
*/

.error {
    font-size: small;
    color: red;
}

.error_hight {
    height: fit-content;
}