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

    /* メイン */
    --main_yellow: #F4C721;
    --main_orange: #FF7F50;
    --main_red: #E60013;
    --main_terracotta: #DD6136;
    --main_brick: #8F1E01;
    --main_peach: #FFD299;
    --main_brown: #8B4513;

    /* フォント */
    --title_fv: #D33E16;
    --title_diff: #8F1E01;
    --title_diff_s: #CCC200;
    --title_trouble: #8B4513;
    --title_trouble_s: #E4C58B;
    --title_trouble_q: #8F1E01;
    --title_trouble_a: #FF7F50;
    --title_trouble_a_item: #DD6136;
    --tittle_point: #FF7F50;

    /* bg */
    --bg_diff: #FFFEEC;
    --bg_diff_table_cell: #FBF7EE;
    --bg_diff_table_title: #F3E8CD;
    --bg_trouble_stripe: #F7EEDD;
    --bg_trouble_q_item: #EDE3D3;
    --bg_trouble_a_item: #FFFEEC;
    --bg_about: #FF7F50;
    --bg_compare_stripe: #FFFEEC;
    --bg_ranking: #FFD299;

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

    /* タイトル */
    --title_pc: 0.5rem 1rem;
    --title_sp: 0.25rem 0.75rem;

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

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

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

    /* 塗りつぶし */
    --padding_fill_pc: 0.15rem 0.5rem;

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

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

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

    /* 高さ */
    /* ---------------------------------- */
    /* header */
    --header_height: 5rem;

    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
}

body {
    width: 100%;
    max-width: 100%;
    margin: auto;
    font-family: "Mochiy Pop One", sans-serif;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-family: "Playfair Display", serif;
    font-family: "BIZ UDGothic", sans-serif;
    font-family: "Kadwa", serif;
    font-family: sans-serif;
}

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

.logo {
    padding: 10px;
    width: 20%;
    max-width: 150px;
}

.sp_FV {
    display: block;
    width: 100%;
    aspect-ratio: 90/59;
    height: auto;
    object-fit: cover;
}

/* 必要な場合のみ非表示 */
@media screen and (min-width: 481px) {
    .sp_FV {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        padding: 0;
        margin: 1rem;
        margin-bottom: 0;
        width: 35%;
        max-width: 150px;
    }

    .pc_FV {
        display: none;
    }

}

/* 
=======================================================
COMMON
=======================================================
Width 設定：一律1000px
wrapは中の要素、wrap抜きのクラス名で全面背景色の設定可能
=======================================================
*/
.diff_wrap,
.trouble_wrap,
.about_wrap,
.compare_wrap,
.rank_wrap,
.footer .menu,
.privacy_wrap,
.evidence_wrap,
.company_wrap,
.redirect_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

.header_wrap {
    max-width: 150px;
}

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

    .header_wrap,
    .diff_wrap,
    .trouble_wrap,
    .about_wrap,
    .rank_wrap,
    .privacy_wrap,
    .evidence_wrap,
    .company_wrap,
    .redirect_wrap {
        margin: 0 1rem;
    }

    .header_wrap {
        max-width: 100px;
    }

    .compare_wrap {
        margin: 0 0 0 0.5rem;
    }
}

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

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

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

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

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

.red {
    color: red;
}

.white {
    color: white;
}

.black {
    color: black;
}

/* 
塗りつぶし
=======================================================
*/
.fill_blick {
    padding: var(--padding_fill_pc);
    background-color: var(--main_brick);
    color: white;
    text-shadow: none;
    margin: 0 0.5rem;
    border-radius: 2px;
}

@media screen and (max-width: 480px) {
    .fill_blick {
        margin: 0 0.25rem;
    }
}

.fill_blick.red {
    background-color: var(--main_red);
}

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

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

@keyframes shine {
    0% {
        left: -100%;
    }

    50% {
        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%;
    }
}

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

    100% {
        opacity: 1;
    }
}

@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 fuwafuwa {
    0% {
        transform: translateY(0px);
    }

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

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

@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;
    }
}

/* 
=======================================================
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;
}

.cta .triangle,
.float_menu .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%);
}

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

    .cta .triangle {
        right: 1.5rem;
    }

    .float_menu .triangle {
        height: 1.5rem;
        top: calc(50% - 0.75rem);
        right: 1rem;
    }
}

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

.triangle {
    background: white;
}



/* 
=======================================================
＼ ／
=======================================================
*/
.above {
    position: relative;
    font-size: 1.25rem;
    font-weight: bolder;
}



@media screen and (max-width: 480px) {
    .above {
        font-size: 0.9rem;
    }
}

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

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

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

    /* ＼ ／ */
    .above:before {
        margin-right: 0.5rem;
    }

    .above:after {
        margin-left: 0.5rem;
    }
}

/* 
=======================================================
＋ーボタン
=======================================================
*/
/* SPのみ＋ーボタン表示 */
@media screen and (max-width: 480px) {
    summary::after {
        position: absolute;
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
    }

    details[open] summary::after {
        position: absolute;
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
    }
}

/* 
=======================================================
POINT
=======================================================
*/
/* POINT 囲み */
.end_point {
    display: flex;
    align-items: center;
    gap: var(--gap_pc);
    padding: var(--title_pc);
    background: white;
    border: var(--main_orange) 0.5rem solid;
    border-radius: 5rem;
}

/* POINT */
.end_point span {
    color: var(--main_orange);
    font-weight: bolder;
}

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

    .end_point p {
        font-size: smaller;
    }
}

/* 
=======================================================
カーセブン
=======================================================
*/
.car_seven {
    font-family: "BIZ UDGothic", sans-serif;
    font-size: larger;
    margin: 0 0.5rem;
    color: yellow;
    text-shadow:
        2px 2px 0 var(--main_red),
        -1px 2px 0 var(--main_red),
        0px -2px 0 var(--main_red),
        0px -2px 0 var(--main_red),
        2px 0px 0 var(--main_red),
        1px -2px 0 var(--main_red),
        0px -1px 0 var(--main_red),
        0px -2px 0 var(--main_red),
        1px 2px 0 var(--main_red),
        -1px 1px 0 var(--main_red),
        1px -1px 0 var(--main_red),
        -1px -1px 0 var(--main_red),
        0px 1px 0 var(--main_red),
        -1px 0px 0 var(--main_red)
}

.car_seven.largest {
    font-size: 3rem;
    line-height: 1;
}

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

/* 
=======================================================
CTA
=======================================================
*/
/* Fisrt CTA
=======================================================
*/
/* First CTA 全体 */
.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 今すぐ！ */
.cta .above {
    color: var(--title_fv);
    text-shadow: 1px 1px 0 white, -1px -1px 0 white,
        -1px 1px 0 white, 1px -1px 0 white,
        0px 1px 0 white, 0 -1px 0 white,
        -1px 0 0 white, 1px 0 0 white;
}

/* 厳選ファクタリング無料一括査定 */
.cta h1 {
    position: relative;
    height: 100%;
    background: var(--main_yellow);
    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) {
    .cta h1 {
        width: 100%;
        padding: var(--btn_padding_sp);
        font-size: 1.2rem;
    }
}

/* PC以上のサイズはマウスオーバー時に色が変わるようにする */
@media (min-width: 1024px) {
    .cta:hover {
        opacity: 1;
    }

    .cta:hover h1 {
        background-color: #780116;
        transition: 0.5s;
    }
}

/* IMAGE CTA
=======================================================
*/
.image_cta {
    display: flex;
    animation: heartbeat 3s ease 0s infinite alternate;
}

.image_cta--float {
    width: 50%;
}

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

    .image_cta {
        width: 100%;
    }

    .image_cta--float {
        width: 80%;
    }
}

.image_cta .logo {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--gap_pc);
    background: var(--main_yellow);
    padding: var(--padding_pc);
    max-width: none;
    width: 100%;
    margin: 0;
}

/* △ */
.image_cta .logo::before {
    position: absolute;
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background: var(--main_yellow);
    width: 2rem;
    height: 100%;
    top: 0;
    left: 100%;
}

.logo img {
    max-width: 150px;
}

.image_cta .logo .above {
    font-size: small;
}


.image_cta .apply {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    background: var(--main_orange);
    padding: 1rem 2rem;
}

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

    /* △ */
    .image_cta .logo::before {
        width: 1rem;
    }

    .image_cta--float .logo {
        padding: 0.5rem;
    }

    .image_cta--float .apply {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .image_cta--float .logo img {
        max-width: 110px;
    }
}

/* 
=======================================================
HEADER
=======================================================
*/
.menu {
    font-size: 1.6rem;
    line-height: 1.45%;
}

.menu_wrap {
    width: 50px;
    height: 50px;
    background-color: #3B3B3B;
    position: fixed;
    z-index: 150000;
    right: 0;
}

.nav__header {
    width: 100%;
    height: 100%;
}

.nav--top {
    position: fixed;
    top: 0;
    left: -100%;
    /* 初期状態は画面外 */
    width: 100%;
    height: 100vh;
    background-color: rgba(51, 51, 51, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.3s;
    z-index: 149999;
}

.main_nav {
    padding-top: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #FFF;
}

.main_nav a {
    font-size: 5rem;
}

.nav--top.active {
    left: 0;
}

.menu-icon.active .line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 5px);
}

.menu-icon.active .line:nth-child(2) {
    opacity: 0;
}

.menu-icon.active .line:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -1px);
}

.nav__header {
    display: flex;
    padding: 0 8%;
    align-items: center;
    justify-content: space-between;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.menu-icon {
    z-index: 200000;
    position: absolute;
    top: 25%;
    left: 25%;
}

.line {
    width: 25px;
    height: 2px;
    background-color: #fff;
    margin-top: 4px;
    transition: 0.3s;
}

/* .menu-icon {
    display: none;
} */

.contents_menu {
    width: 100%;
    background-color: #E8E8E8;
}

.nav--contents {
    width: fit-content;
    margin: 0 auto;
}

.contents_nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 60px;
    padding-bottom: 50px;
}

.contentsNav_item a {
    font-size: 1.6rem;
    line-height: 1.45em;
}

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

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

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

/* 
=======================================================
FV
=======================================================
*/
.fv {
    position: relative;
    mix-blend-mode: color-burn;
    /* background-image: url(../img/1_fv/02_fv_pc.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom; */
    /* padding: var(--section_updown_pc);
    padding-top: 2.5rem; */
}

@media screen and (max-width: 480px) {
    .fv {
        background-size: cover;
        /* padding: var(--section_updown_sp); */
        /* padding-bottom: 2.5rem; */
    }
}

.fv::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 110%;
    top: calc(-1 * var(--header_height));
    mix-blend-mode: multiply;
    /* background-image: url(../img/1_fv/01_fv_pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1; */
}

@media screen and (max-width: 480px) {
    /* .fv::before {
        background-image: url(../img/1_fv/01_fv_sp.png);
    } */
}

.fv_wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap_pc);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_compare_stripe) 0.5rem, var(--bg_compare_stripe) 1rem);
}

.image_wrap {
    width: 100%;
}

.fv img {
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 480px) {
    .fv img {
        width: 100%;
        object-fit: cover;
    }
}

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

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

/* 全体くくり */
.diff_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

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

    /* 全体くくり */
    .diff_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 
diff タイトル
-------------------------------------------------------
*/
/* タイトルくくり */
.diff .title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトル */
.diff h2 {
    color: var(--title_diff);
    text-shadow:
        2px 2px 0px var(--bg_diff),
        4px 4px 0px var(--main_orange);
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .diff h2 {
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 1), 2px 2px 0px rgba(255, 127, 80, 1);
    }
}

/* 
diff 同じ車でも買取金額が異なる理由
-------------------------------------------------------
*/
/* 理由囲み */
.diff .reason {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
    width: 100%;
    background: white;
    border: var(--main_yellow) 0.25rem solid;
    border-radius: 2px;
    padding: var(--padding_pc);
    padding-top: 0;
    font-family: sans-serif;
}

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

    /* 理由囲み */
    .diff .reason {
        gap: var(--section_gap_sp);
    }
}

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

    /* 理由囲み */
    .diff .reason {
        padding: var(--padding_sp);
        padding-top: 0;
    }
}

/* タイトル */
.diff .reason h3 {
    position: relative;
    background: var(--main_yellow);
    width: fit-content;
    text-align: center;
    padding: var(--title_pc);
    padding-top: 0;
    z-index: 0;
}

@media screen and (max-width: 480px) {
    .diff .reason h3 {
        padding: 0 0.75rem 0.5rem 0.75rem;
    }
}

/* 背景黄色 */
.diff .reason h3::before {
    position: absolute;
    content: "";
    width: calc(100% + 0.5rem);
    height: calc(100% + 0.175rem);
    left: -0.25rem;
    top: -2px;
    border: var(--main_yellow) 1rem solid;
    border-bottom-left-radius: var(--text_radius);
    border-bottom-right-radius: var(--text_radius);
    z-index: -1;
}

/* 白点線 */
.diff .reason h3::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: -0.25rem;
    border: white 2px dashed;
    border-top: unset;
    border-bottom-left-radius: calc(var(--text_radius) - 2px);
    border-bottom-right-radius: calc(var(--text_radius) - 2px);
    z-index: -1;
}

/* リスト囲み */
.diff .reason ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

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

    /* リスト囲み */
    .diff .reason ul {
        gap: var(--gap_pc);
    }
}

/* リストアイテム */
.diff .reason li {
    position: relative;
    counter-increment: number;
    display: flex;
    align-items: center;
}

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

    /* リストアイテム */
    .diff .reason li {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--gap_sp);
    }
}

/* 数字 */
.diff .reason li::after {
    position: absolute;
    content: counter(number);
    font-family: "Kadwa", serif;
    text-align: center;
    font-size: 2rem;
    line-height: 1.5;
    left: 0;
    width: 3rem;
    height: 3rem;
    color: white;
    background-color: var(--main_yellow);
    border-radius: var(--btn_radius);
}

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

    /* 数字 */
    .diff .reason li::after {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 1.3;
        left: -0.25rem;
        top: -0.1rem;
    }
}

/* リストまとめ */
.diff .reason li .summary {
    font-size: large;
    font-weight: 900;
    padding: 0.25rem 1rem;
    padding-left: 3.5rem;
    background-color: var(--bg_diff);
    border: var(--main_yellow) 2px solid;
    border-radius: var(--btn_radius);
}

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

    /* リストまとめ */
    .diff .reason li .summary {
        width: fit-content;
        font-size: medium;
        padding-left: 3rem;
    }
}

/* リスト詳細 */
.diff .reason li p {
    padding-left: 1rem;
    padding-bottom: 0.25rem;
    border-bottom: var(--main_yellow) 2px dashed;
}

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

    /* リスト詳細 */
    .diff .reason li p {
        padding-left: 0;
    }

    .diff .reason li:last-child p {
        border-bottom: unset;
        padding-bottom: 0;
    }
}

/* 
diff 主な車売買方法3選
-------------------------------------------------------
*/
/* 方法くくり */
.diff .method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap_pc);
}

/* タイトル */
.diff .method h3 {
    position: relative;
    color: var(--main_brick);
    padding: var(--padding_pc);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
    z-index: 1;
}

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

    /* タイトル */
    .diff .method h3,
    .diff .points h3 {
        padding: var(--padding_sp);
        gap: 3rem;
    }
}

/* □ */
.diff .method h3::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 25%;
    bottom: 25%;
    background: var(--main_yellow);
    z-index: -1;
}

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

    /* □ */
    .diff .method h3::before {
        height: 30%;
        bottom: 20%;
    }
}

/* 3 */
.diff .method .number {
    left: calc(50% + 3rem);
    text-shadow: -2px -2px 0 var(--bg_diff), -3px -3px 0 var(--bg_diff),
        -3px 3px 0 var(--bg_diff), 0 -2px 0 var(--bg_diff),
        3px 3px 0 var(--bg_diff), -2px -2px 0 var(--bg_diff),
        -3px 4px 0 var(--bg_diff), 3px -1px 0 var(--bg_diff)
}

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

    /* 3 */
    .diff .method .number {
        bottom: 1rem;
    }
}

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

    /* 3 */
    .diff .method .number {
        left: calc(50% + 2.5rem);
    }
}

/* ３◯ */
.diff .method .three::before {
    position: absolute;
    content: "";
    width: 3rem;
    height: 3rem;
    top: -1.75rem;
    border-radius: 50%;
    background-color: var(--main_yellow);
    z-index: -1;
}

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

    /* ３◯ */
    .diff .method .three::before {
        width: 2.5rem;
        height: 2.5rem;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: var(--main_yellow);
        z-index: -1;
    }
}

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

    /* ３◯ */
    .diff .method .three::before {
        left: -0.5rem;

    }
}

/* 3選テーブルくくり */
.diff .method table {
    width: 100%;
    table-layout: fixed;
    margin: 0 auto;
    border-collapse: collapse;
}

@media screen and (max-width: 480px) {
    .diff .method table {
        font-size: smaller;
    }
}

/* 3選テーブルヘッダー */
.diff .method table .header th {
    text-align: center;
    background: var(--bg_diff_table_title);
    color: black;
}

/* 3選テーブルおすすめ */
.diff .method table .header th.recommend {
    position: relative;
    background: var(--main_orange);
    color: white;
}

/* 3選テーブルおすすめ王冠 */
.diff .method table .header th.recommend::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 50px;
    background-image: url(../img/5_compare/rank_1st.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
}

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

    /* 3選テーブルおすすめ王冠 */
    .diff .method table .header th.recommend::before {
        width: 30px;
        height: 40px;
        background-image: url(../img/5_compare/medal1.webp);
        top: -1.5rem;
        left: 0rem;
        z-index: 10;
    }
}

/* 3選テーブル各セル設定 */
.diff .method table th,
.diff .method table td {
    padding: var(--padding_pc);
    vertical-align: middle;
    text-align: left;
    background-color: var(--bg_diff_table_cell);
    border: white 1px solid;
}

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

    /* 3選テーブル各セル設定 */
    .diff .method table th,
    .diff .method table td {
        padding: var(--padding_sp);
    }
}

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

    /* 3選テーブル各セル設定 */
    .diff .method table th,
    .diff .method table td {
        padding: var(--padding_mini);
    }
}

/* 3選テーブル最初の1列目 */
.diff .method table th.item {
    padding: var(--padding_sp);
    width: 10%;
    text-align: center;
    background: var(--main_brick);
    color: white;
}

/* 3選テーブル最初の1列目 */
.diff .method table tr td:first-of-type {
    background-color: var(--main_peach);
}

/* 3選テーブル画像 */
.diff .method table .evaluation td img {
    max-width: 3rem;
    max-height: 3rem;
}

/* テーブル角丸 */
.diff .method table tr:first-child>*:first-child {
    border-top-left-radius: 0.5rem;
}

.diff .method table tr:first-child>*:last-child {
    border-top-right-radius: 0.5rem;
}

.diff .method table tr:last-child>*:first-child {
    border-bottom-left-radius: 0.5rem;
}

.diff .method table tr:last-child>*:last-child {
    border-bottom-right-radius: 0.5rem;
}

/* 
diff 愛車を高く売る3つのポイント
-------------------------------------------------------
*/
/* 理由くくり */
.diff .points {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: white;
    font-family: sans-serif;
}

/* タイトル */
.diff .points h3 {
    position: relative;
    background: var(--main_orange);
    color: white;
    padding: var(--padding_pc);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

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

    /* タイトル */
    .diff .points h3 {
        padding: var(--padding_sp);
        gap: 3rem;
    }
}

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

    /* タイトル */
    .diff .points h3 {
        padding: var(--padding_sp);
        gap: 2rem;
    }
}

/* 3 */
.diff .points .number {
    left: calc(50% + 0.75rem);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-shadow: 3px 3px 0 var(--main_orange), -3px -3px 0 var(--main_orange),
        -3px 3px 0 var(--main_orange), 3px -3px 0 var(--main_orange),
        0px 3px 0 var(--main_orange), 0 -3px 0 var(--main_orange),
        -3px 0 0 var(--main_orange), 3px 0 0 var(--main_orange);
}

/* リスト囲み */
.diff .points ul {
    display: flex;
    gap: var(--gap_pc);
    width: 100%;
    padding: var(--padding_pc);
    padding-top: 1.5rem;
}

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

    /* リスト囲み */
    .diff .points ul {
        gap: 0.75rem;
        padding: 0.75rem var(--padding_sp);
        flex-direction: column;
    }
}

/* リストアイテム */
.diff .points li {
    position: relative;
    counter-increment: number;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* POINT */
.diff .points li::after {
    position: absolute;
    content: "POINT " counter(number);
    font-family: "Kadwa", serif;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    left: -0.25rem;
    top: -1rem;
    padding: 0 0.25rem;
    color: var(--main_orange);
    background-color: white;
    border: var(--main_peach) 2px solid;
}

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

    /* POINT */
    .diff .points li::after {
        font-size: smaller;
        left: -0.5rem;
        top: -0.75rem;
    }
}

/* リストアコーディオン */
.diff .points details {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
}

/* リストタイトル */
.diff .points summary {
    position: relative;
    flex: 1;
    font-size: large;
    font-weight: 900;
    padding: 0.5rem;
    padding-top: 0.75rem;
    width: 100%;
    color: var(--main_brick);
    background-color: var(--main_peach);
}

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

    .diff .points details {
        width: 100%;
        flex: 1;
    }

    /* リストタイトル */
    .diff .points li summary {
        font-size: medium;
    }
}

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

    /* リストタイトル */
    .diff .points li summary {
        font-size: small;
    }
}

/* SPのみ＋ーボタン表示 */
@media screen and (max-width: 480px) {
    .diff .points summary::after {
        background-image: url(../img/2_diff/open.svg);
    }

    .diff .points details[open] summary::after {
        background-image: url(../img/2_diff/close.svg);
    }
}

/* リスト中身 */
.diff .points li .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--padding_sp);
    border: var(--main_peach) 2px solid;
    z-index: 1;
}

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

    /* リスト中身 */
    .diff .points li .content {
        flex-direction: row;
        gap: var(--gap_sp);
    }
}

/* リスト背景 */
.diff .points li .content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 30%;
    bottom: 0;
    background: var(--main_yellow);
    z-index: -1;
}

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

    /* リスト背景 */
    .diff .points li .content::before {
        position: absolute;
        content: "";
        width: 20%;
        height: 100%;
        right: 0;
        top: 0;
        background: var(--main_yellow);
        z-index: -1;
    }
}

/* リスト詳細 */
.diff .points li img {
    display: block;
    margin: auto;
    max-width: 124px;
    height: 124px;
}

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

    /* リスト詳細 */
    .diff .points li img {
        max-width: 80px;
        height: 80px;
    }
}

.bold--table {
    margin-bottom: 10px;
}

.bold--pad {
    padding-bottom: 10px;
}

/* 
=======================================================
TROUBLE
=======================================================
/* 
trouble全体にかかる設定
-------------------------------------------------------
*/
/* 背景 */
.trouble {
    position: relative;
    padding: var(--section_updown_pc);
    background-size: auto auto;
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent,
            transparent 0.5rem,
            var(--bg_trouble_stripe) 0.5rem,
            var(--bg_trouble_stripe) 1rem);
}

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

/* ▽ */
/* .trouble::before {
    content: "";
    position: absolute;
    height: 10rem;
    width: 100%;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent,
            transparent 0.5rem,
            var(--bg_trouble_stripe) 0.5rem,
            var(--bg_trouble_stripe) 1rem);
    left: 0;
    bottom: calc(-10rem + 1px);
} */

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

    .trouble::before {
        height: 3rem;
        bottom: calc(-3rem + 1px);
    }
} */

/* 全体くくり */
.trouble_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

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

    /* 全体くくり */
    .trouble_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 
trouble タイトル
-------------------------------------------------------
*/
/* タイトルくくり */
.trouble .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg_trouble_stripe);
    padding: 1rem 5rem;
    border-radius: 10rem;
}

@media screen and (max-width: 480px) {
    .trouble .title {
        width: fit-content;
        padding: 1rem 2.5rem;
        border-radius: 10rem;
    }
}

/* タイトル */
.trouble h2 {
    color: var(--title_trouble);
    text-shadow:
        2px 2px 0px var(--bg_trouble_stripe),
        4px 4px 0px #E4C58B;
    font-weight: bold;
}

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

    /* タイトル */
    .trouble h2 {
        text-shadow:
            1px 1px 0px var(--bg_trouble_stripe),
            2px 2px 0px #E4C58B;
    }
}

/* 
Q. なぜ車売買時のトラブルが多いのか？
A. トラブルを回避する方法
共通
-------------------------------------------------------
*/
/* 囲み */
.trouble .reason,
.trouble .soln {
    position: relative;
    width: 100%;
    padding: var(--padding_pc);
    padding-top: 3rem;
    margin-top: 2rem;
    background: white;
    border-radius: var(--text_radius);
    display: flex;
    flex-direction: column;
    gap: var(--section_gap_pc);
}

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

    /* 囲み */
    .trouble .reason,
    .trouble .soln {
        gap: var(--section_gap_sp);
        padding: var(--padding_sp);
        padding-top: 3rem;
    }
}

/* タイトル */
.trouble .reason h3,
.trouble .soln h3 {
    position: relative;
    position: absolute;
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: fit-content;
    padding: var(--title_pc);
    padding-left: 5rem;
    color: white;
    border-radius: 5rem;
}

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

    /* タイトル */
    .trouble .reason h3,
    .trouble .soln h3 {
        top: -2.25rem;
        width: 90%;
    }
}

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

    /* タイトル */
    .trouble .reason h3,
    .trouble .soln h3 {
        width: 100%;
    }
}

/* Q & A*/
.trouble .reason h3::before,
.trouble .soln h3::before {
    position: absolute;
    width: 5rem;
    height: 5rem;
    font-size: 4rem;
    font-family: "Playfair Display", serif;
    line-height: 0.9;
    text-align: center;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background: white;
    border-radius: 5rem;
}

/* 
Q. なぜ車売買時のトラブルが多いのか？
-------------------------------------------------------
*/
/* 囲み */
.trouble .reason {
    border: 0.25rem solid var(--main_brick);
}

/* タイトル */
.trouble .reason h3 {
    background: var(--main_brick);
}

/* Q */
.trouble .reason h3::before {
    content: "Q";
    color: var(--main_brick);
    border: 4px solid var(--main_brick);
}

/* 
Q. なぜ車売買時のトラブルが多いのか？ 図解
-------------------------------------------------------
*/
/* 図解囲み */
.trouble .reason .diagram {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--gap_pc);
}

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

    /* 図解囲み */
    .trouble .reason .diagram {
        gap: var(--gap_sp);
        flex-direction: column;
    }
}

/* 図解文章 */
.trouble .reason .diagram .text {
    display: flex;
    width: 70%;
    flex-direction: column;
    justify-content: space-between;
}

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

    /* 図解文章 */
    .trouble .reason .diagram .text {
        width: 100%;
    }

    /* 図解文章: SP非表示 */
    .trouble .reason .diagram .text .hide_sp {
        display: none;
    }
}

/* 図解参照 */
.trouble .reason .diagram .ref p,
.trouble .reason .diagram .ref li a {
    font-size: small;
}

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

    /* 図解参照 */
    .trouble .reason .diagram .ref p,
    .trouble .reason .diagram .ref li,
    .trouble .reason .diagram .ref li a {
        font-size: xx-small;
        line-height: normal;
    }
}

/* 図解画像 */
.trouble .reason .diagram img {
    width: 30%;
}

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

    /* 画像 */
    .trouble .reason .diagram img {
        width: 100%;
    }

    .diagram img {
        max-width: 420px;
        height: auto;
        aspect-ratio: 1/1;
    }
}

/* 
Q. なぜ車売買時のトラブルが多いのか？ 報告されているトラブル例
-------------------------------------------------------
*/
/* トラブル例囲み */
.trouble .example {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap_pc);
}

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

    /* トラブル例 */
    .trouble .example {
        gap: var(--gap_sp);
    }
}

/* タイトル */
.trouble .example h4 {
    position: relative;
    width: fit-content;
    padding: var(--title_pc);
    padding-left: 2.25rem;
    color: white;
    background: var(--main_brick);
}

/* ◯ */
.trouble .example h4::before {
    position: absolute;
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 5rem;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* トラブル例紹介囲み */
.trouble .example ul {
    display: flex;
    width: 100%;
    gap: var(--gap_pc);
}

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

    /* トラブル例紹介囲み */
    .trouble .example ul {
        flex-wrap: wrap;
        gap: var(--gap_sp);
    }
}

/* トラブル例各囲み */
.trouble .example li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--gap_pc);
    padding: var(--padding_pc);
    background: var(--bg_trouble_q_item);
    border-radius: var(--text_radius);
}

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

    /* トラブル例各囲み */
    .trouble .example li {
        padding: var(--padding_sp);
        width: calc(50% - (var(--gap_sp)/2));
        gap: var(--gap_sp);
    }
}

/* トラブル例中身 */
.trouble .example li p,
.trouble .example li .icon {
    flex: 1;
}

/* トラブル例アイコン背景 */
.trouble .example li .icon {
    background-image: url(../img/3_trouble/Q/bg_circle.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* トラブル例アイコン */
.trouble .example li .icon img {
    aspect-ratio: 1/1;
    max-height: 124px;
}

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

    /* トラブル例アイコン */
    .trouble .example li .icon img {
        max-height: 80px;
    }
}

/* 
A. トラブルを回避する方法
-------------------------------------------------------
*/
/* 囲み */
.trouble .soln {
    border: 0.25rem solid var(--main_orange);
}

@media screen and (max-width: 480px) {
    .trouble .soln {
        margin-top: 2rem;
    }
}

/* タイトル */
.trouble .soln h3 {
    background: var(--main_orange);
}

/* A */
.trouble .soln h3::before {
    content: "A";
    color: var(--main_orange);
    border: 4px solid var(--main_orange);
}

/* 
A. トラブルを回避する方法　回避方法詳細
-------------------------------------------------------
*/
/* 回避方法詳細囲み */
.trouble .soln ol {
    display: flex;
    flex-direction: column;
    gap: var(--gap_pc);
    width: 100%;
}

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

    /* 回避方法詳細囲み */
    .trouble .soln ol {
        gap: var(--gap_sp);
    }
}

/* 回避方法各囲み */
.trouble .soln li {
    display: flex;
    gap: var(--gap_pc);
    width: 100%;
    background: var(--bg_trouble_a_item);
    border: 1px solid var(--main_terracotta);
    border-radius: 2px;
}

/* 偶数アイテムは逆 */
.trouble .soln li:nth-child(even) {
    flex-direction: row-reverse;
}

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

    /* 回避方法各囲み */
    .trouble .soln li,
    .trouble .soln li:nth-child(even) {
        flex-direction: column;
        gap: var(--gap_sp);
    }
}

/* 回避方法文章囲み */
.trouble .soln li details {
    width: 60%;
}

/* 回避方法タイトル */
.trouble .soln li summary {
    position: relative;
    padding: var(--title_pc);
    padding-left: 3.25rem;
    padding-right: 2.5rem;
    padding-bottom: 0.25rem;
    color: var(--title_trouble_a_item);
    font-weight: bolder;
    border-bottom: 2px solid var(--title_trouble_a_item);
}

/* 回避方法タイトル旗 */
.trouble .soln li summary::before {
    position: absolute;
    content: "";
    width: 2.5rem;
    height: 2.75rem;
    bottom: -2px;
    left: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 旗1 */
.trouble .soln li:first-child summary::before {
    background-image: url(../img/3_trouble/A/1_flag.png);
}

/* 旗2 */
.trouble .soln li:nth-child(2) summary::before {
    background-image: url(../img/3_trouble/A/2_flag.png);
}

/* 旗3 */
.trouble .soln li:nth-child(3) summary::before {
    background-image: url(../img/3_trouble/A/3_flag.png);
}

/* SPのみ＋ーボタン表示 */
@media screen and (max-width: 480px) {
    .trouble .soln summary::after {
        width: 2rem;
        height: 2rem;
        background-image: url(../img/3_trouble/A/open.svg);
    }

    .trouble .soln details[open] summary::after {
        background-image: url(../img/3_trouble/A/close.svg);
    }
}

/* 回避方法文章 */
.trouble .soln li details .content {
    padding: var(--padding_pc);
}

/* 回避方法文章  */
.trouble .soln li details .content a {
    font-size: smaller;
}

/* 回避方法アイコン囲み */
.trouble .soln li .icon {
    width: 40%;
    height: fit-content;
    margin: auto;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

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

    /* 回避方法各囲み */
    .trouble .soln li details,
    .trouble .soln li .icon {
        width: 100%;
    }
}

/* 査定依頼先を事前にリサーチ 背景 */
.trouble .soln li:first-child .icon {
    background-image: url(../img/3_trouble/A/1_circle.png);
}

/* 事故・修復歴などの情報を偽らない 背景 */
.trouble .soln li:nth-child(2) .icon {
    background-image: url(../img/3_trouble/A/2_circle.png);
}

/* JPCU（適正買取店認定制度）の認定あるか確認 背景 */
.trouble .soln li:nth-child(3) .icon {
    padding: var(--padding_pc);
    background-image: url(../img/3_trouble/A/3_circle.png);
}

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

    /* JPCU（適正買取店認定制度）の認定あるか確認 背景 */
    .trouble .soln li:nth-child(3) .icon {
        padding: var(--padding_sp);
    }
}

/* 回避方法アイコン */
.trouble .soln li .icon img {
    aspect-ratio: 1/1;
    max-height: 124px;
    margin: auto;
}

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

    /* 回避方法アイコン */
    .trouble .soln li .icon img {
        max-height: 80px;
        width: auto;
        height: auto;
    }
}

/* 
イチオシ吹き出し
-------------------------------------------------------
*/
/* イチオシ吹き出し囲み */
.trouble .bubble {
    /* ↓親は trouble section */
    position: absolute;
    bottom: -7rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 10rem;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/3_trouble/trouble_bubble.svg);
}

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

    /* イチオシ吹き出し囲み */
    .trouble .bubble {
        width: 100%;
        height: 7rem;
        bottom: -5rem;
    }
}

/* ＼ イチオシ ／ */
.trouble .bubble .above {
    color: var(--main_orange);
}

/* 安心・安全に愛車を売りたい方におすすめ！ */
.trouble .bubble p {
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    line-height: 1.3;
    color: var(--main_terracotta);
    text-shadow: 2px 2px 0 white, -2px -2px 0 white,
        -2px 2px 0 white, 2px -2px 0 white,
        0px 2px 0 white, 0 -2px 0 white,
        -2px 0 0 white, 2px 0 0 white;
}

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

    /* 安心・安全に愛車を売りたい方におすすめ！ */
    .trouble .bubble p {
        font-size: large;
    }
}

/* 
=======================================================
ABOUT
=======================================================
/* 
about全体にかかる設定
-------------------------------------------------------
*/
/* 背景 */
.about {
    padding: var(--section_updown_pc);
    padding-top: calc(3rem + 10rem);
    background: var(--bg_about);
}

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

/* 全体くくり */
.about_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

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

    /* 全体くくり */
    .about_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 
about タイトル
-------------------------------------------------------
*/
/* タイトルくくり */
.about .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    background-image: url(../img/4_about/about_cloud.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* タイトル */
.about h2 {
    color: var(--title_diff);
    text-shadow:
        2px 2px 0px white,
        4px 4px 0px var(--main_orange);
    font-weight: bold;
    line-height: 1;

}

@media screen and (max-width: 480px) {
    .about h2 {
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 1), 2px 2px 0px rgba(255, 127, 80, 1);
    }
}

/* 
カーセブンについて
-------------------------------------------------------
*/
.about .pros {
    display: flex;
    flex-direction: column;
    gap: var(--section_gap_pc);
    background: white;
}

/* 
カーセブンについて
-------------------------------------------------------
*/
@media screen and (max-width: 480px) {
    .about .pros {
        gap: var(--gap_sp);
    }
}

/* 
カーセブンが掲げている5つの安心安全宣言
-------------------------------------------------------
*/
/* 宣言全体囲み */
.declare {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

/* タイトル */
.declare .points {
    position: relative;
    position: absolute;
    top: -0.5rem;
    background: var(--main_orange);
    font-size: x-large;
    color: white;
    padding: var(--title_pc);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    border-radius: 10rem;
}

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

    /* タイトル */
    .declare .points {
        font-size: medium;
        padding: var(--title_sp);
        gap: 2rem;
    }
}

/* 5 */
.declare .number {
    left: calc(50% + 3.75rem);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-shadow: 3px 3px 0 var(--main_orange), -3px -3px 0 var(--main_orange),
        -3px 3px 0 var(--main_orange), 3px -3px 0 var(--main_orange),
        0px 3px 0 var(--main_orange), 0 -3px 0 var(--main_orange),
        -3px 0 0 var(--main_orange), 3px 0 0 var(--main_orange);
}

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

    /* 5 */
    .declare .number {
        left: calc(50% + 2.5rem);
        font-size: 3rem;
    }
}

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

    /* 5 */
    .declare .number {
        left: calc(50% + 1rem);
    }
}

/* 宣言内容囲み */
.declare .content {
    display: flex;
    flex-direction: column;
    padding: var(--padding_pc);
    padding-bottom: 0;
    gap: var(--gap_pc);
    width: 100%;
}

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

    /* 宣言内容囲み */
    .declare .content {
        padding: var(--padding_sp);
        padding-bottom: 0;
        gap: var(--gap_sp);
    }
}

/* 画像囲み */
.declare .diagram {
    display: flex;
    width: 100%;
    padding: var(--padding_pc);
    padding-top: 2.5rem;
    border: 0.25rem solid var(--main_orange);
    border-radius: var(--text_radius);
}

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

    /* 画像囲み */
    .declare .diagram {
        flex-direction: column;
        align-items: center;
        padding: var(--padding_sp);
        padding-top: 1.5rem;
        gap: var(--gap_sp);
    }
}

/* 画像 */
.declare .diagram img {
    width: 100%;
    height: 100%;
}

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

    /* 画像 */
    .declare .diagram img {
        max-height: 88px;
        margin: 0;
    }
}

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

    /* 画像 */
    .declare .diagram img {
        max-height: 64px;
        margin: 0;
    }
}

/* 文章 */
.about .declare .text {
    padding: var(--padding_pc);
    background: var(--bg_diff);
    border-top: 1px solid var(--main_yellow);
    border-bottom: 1px solid var(--main_yellow);
}

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

    /* 文章 */
    .about .declare .text {
        padding: var(--padding_sp);
    }
}

/* 
カーセブンで車を売った人達の声
-------------------------------------------------------
*/
/* 声全体囲み */
.about .review {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* タイヤ */
.about .review .tire {
    position: relative;
    position: absolute;
    content: "";
    width: 6rem;
    height: 6rem;
    background-color: #3B3B3B;
    border-radius: 50%;
    border: 0.25rem solid white;
    bottom: 1rem;
    z-index: 1;
}

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

    /* タイヤ */
    .about .review .tire {
        width: 3.5rem;
        height: 4rem;
        border-radius: 0.5rem;
        bottom: 1rem;
    }
}

/* タイヤ */
.about .review .tire.tire_left {
    left: 20%;
}

/* タイヤ */
.about .review .tire.tire_right {
    right: 20%;
}

/* 口コミ囲み */
@media screen and (max-width: 480px) {

    /* タイヤ */
    .about .review .tire.tire_left {
        left: 0.5rem;
    }

    /* タイヤ */
    .about .review .tire.tire_right {
        right: 0.5rem;
    }
}

/* タイヤ中白 */
.about .review .tire::before,
.about .review .tire::after {
    position: absolute;
    content: "";
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

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

    /* タイヤ中白 */
    .about .review .tire::before,
    .about .review .tire::after {
        display: none;
    }
}

/* タイトル */
.about .review h3 {
    position: relative;
    text-align: center;
    background: white;
    color: var(--main_brick);
    padding: var(--padding_pc);
    width: 50%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border: 1rem solid var(--main_red);
    border-bottom: unset;
}

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

    /* タイトル */
    .about .review h3 {
        width: 90%;
        margin: 0 3rem;
        padding: var(--padding_sp);
    }
}

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

    /* タイトル */
    .about .review h3 {
        width: 90%;
        margin: 0;
    }
}

/* タイトル：⊿ */
.about .review h3::before,
.about .review h3::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    width: 50px;
    height: calc(100% + 2rem);
    background-color: var(--main_red);
}

/* タイトル：⊿左 */
.about .review h3::before {
    left: calc((50px + 0.99rem) * (-1));
    clip-path: polygon(0 100%, 100% 100%, 100% 10%);
}

/* タイトル：⊿右 */
.about .review h3::after {
    width: 55%;
    right: -55%;
    clip-path: polygon(0% 0%, 0% 100%, 97% 90%, 70% 0%);
}

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

    /* タイトル：⊿ */
    .about .review h3::before,
    .about .review h3::after {
        display: none;
    }
}

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

    /* タイトル：⊿ */
    .about .review h3::before,
    .about .review h3::after {
        display: none;
    }
}

/* 口コミ囲み */
.about .review ul {
    /* ↓タイヤ */
    position: relative;
    display: flex;
    margin: 0 1rem 3rem 1rem;
    padding: 4.75rem 1rem 3rem 1rem;
    gap: var(--gap_pc);
    background-color: var(--main_red);
    border-radius: 0.25rem;
}

/* 口コミ囲み */
@media screen and (max-width: 480px) {
    .about .review ul {
        flex-direction: column;
        margin: 0 0.5rem 3rem 0.5rem;
        gap: 4.5rem;
        z-index: 10;
    }

    /* 車のバックミラー */
    .about .review ul::before,
    .about .review ul::after {
        position: absolute;
        content: "";
        width: 2rem;
        height: 1.5rem;
        top: 0.25rem;
        background-color: var(--main_red);
    }

    .about .review ul::before {
        left: -0.75rem;
    }

    .about .review ul::after {
        right: -0.75rem;
    }
}

/* 口コミ各アイテム囲み */
.about .review li {
    /* ↓アイコン */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: var(--padding_pc);
    padding-top: 4.5rem;
    background-color: white;
}

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

    /* 口コミ各アイテム囲み */
    .about .review li {
        padding: var(--padding_sp);
        padding-top: 4.5rem;
    }

    /* 口コミ各アイテム囲み：非表示 */
    .about .review li.hide {
        display: none;
    }
}

/* 口コミ各アイコン */
.about .review li .icon {
    position: relative;
    position: absolute;
    width: 8rem;
    height: 8rem;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 0.25rem solid white;
}

/* 車のライト */
@media screen and (max-width: 480px) {

    .about .review li:first-child .icon::before,
    .about .review li:first-child .icon::after {
        position: absolute;
        content: "";
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        top: 0.25rem;
        background-color: #eee;
        border: white solid 0.25rem;
    }

    .about .review li .icon::before {
        left: calc((100% - 2rem) * (-1));
    }

    .about .review li .icon::after {
        right: calc((100% - 2rem) * (-1));
    }
}

@media screen and (max-width: 320px) {
    .about .review li .icon::before {
        left: calc((100% - 4rem) * (-1));
    }

    .about .review li .icon::after {
        right: calc((100% - 4rem) * (-1));
    }
}

/* 口コミ各アイコン */
.about .review li .icon img {
    object-fit: cover;
}

/* もっとみる 非表示*/
.about .review .more-button {
    display: none;
}

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

    /* もっとみる 非表示*/
    .about .review .more-button {
        position: absolute;
        padding: var(--title_sp);
        bottom: 3.5rem;
        display: block;
        z-index: 999;
    }

    .about .review .more-button.open {
        background-color: var(--bg_diff);
        color: var(--main_brick);
        font-weight: bold;
    }

    .about .review .more-button.close {
        background-color: var(--main_brick);
        color: white;
    }
}

.transition {
    padding-top: 5rem;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_compare_stripe) 0.5rem, var(--bg_compare_stripe) 1rem);
    position: relative;
    padding-bottom: 5rem;
}

.transition_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
    max-width: var(--width_pc);
    margin: 0 auto;
}

.title--transition {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    align-items: center;
    background-color: white;
    padding: 1rem 3rem;
    border: 3px solid var(--main_orange);
    position: absolute;
    top: 30px;
    border-radius: 100px;
}

.transition_title {
    position: relative;
    color: var(--title_diff);
    background: white;
    text-shadow: 2px 2px 0px white, 4px 4px 0px var(--bg_ranking);
    font-weight: bold;
    width: fit-content;
    line-height: 1;
}

.transition_info {
    font-size: 2rem;
    font-weight: bold;
    color: var(--title_diff);
}

.transition_info span {
    background-image: repeating-linear-gradient(-45deg,
            var(--main_yellow) 0 5px, var(--bg_compare_stripe) 5px 10px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 50%;
}

.button_wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    display: flex;
    padding: 0.5rem;
    padding-top: 3rem;
    border: 0.25rem solid var(--main_orange);
    border-radius: var(--text_radius);
    background-color: white;
}

.transition_button {
    padding-left: 10%;
    padding-right: 2%;
    overflow: hidden;
    display: inline-flex;
    background-color: var(--main_brick);
    align-items: center;
    justify-content: space-between;
    color: white;
    font-weight: bolder;
    border-radius: 100px;
    box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.20);
    width: 30%;
    max-width: 300px;
    height: 50px;
}

.arrow {
    animation: bggradient 1s ease infinite, moveRight 1s linear infinite;
}

@media screen and (max-width:1000px) {
    .transition_wrap {
        margin: 0 1rem;
    }
}

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

    .transition_wrap {
        margin: 0 0.5rem;
    }

    .transition_info {
        font-size: 1.3rem;
    }

    .title--transition {
        padding: 0.5rem 1rem;
    }

    .transition_button {
        padding-left: 4%;
        padding-right: 2%;
        color: white;
        font-weight: bolder;
        border-radius: 100px;
        box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.20);
        width: 30%;
        max-width: 300px;
        height: 40px;
        font-size: 0.9rem;
    }
}


/* 
=======================================================
COMPARE
=======================================================
/* 
compare全体にかかる設定
-------------------------------------------------------
*/
/* 背景 */
.compare {
    padding-top: 5rem;
    background-size: auto auto;
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent,
            transparent 0.5rem,
            var(--bg_compare_stripe) 0.5rem,
            var(--bg_compare_stripe) 1rem);
}

.compare--last {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_trouble_stripe) 0.5rem, var(--bg_trouble_stripe) 1rem);
    padding-bottom: 5rem;
}

@media screen and (max-width: 480px) {
    .compare {
        padding-top: 1rem;
    }

    .compare--last {
        padding-bottom: 1rem;
        padding-top: 0;
    }
}

/* 全体くくり */
.compare_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

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

    /* 全体くくり */
    .compare_wrap {
        gap: 0;
    }
}

/* 
compare タイトル
-------------------------------------------------------
*/
/* タイトルくくり */
.compare .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg_compare_stripe);
    padding: 1rem 5rem;
    border-radius: 10rem;
}

@media screen and (max-width: 480px) {
    .compare .title {
        width: fit-content;
        padding: 1rem 2.5rem;
        border-radius: 10rem;
    }
}

@media screen and (max-width: 320px) {
    .compare .title {
        padding: 1rem 2rem;
    }
}

/* タイトル */
.compare h2 {
    color: var(--main_terracotta);
    text-shadow:
        2px 2px 0px var(--bg_trouble_stripe),
        4px 4px 0px #E4C58B;
    font-weight: bold;
}

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

    /* タイトル */
    .compare h2 {
        text-shadow:
            1px 1px 0px var(--bg_trouble_stripe),
            2px 2px 0px #E4C58B;
    }
}

/* 
compare table　イメージ
-------------------------------------------------------
テーブル内のイメージを左右中央寄せ */

.scroll_x img {
    height: 65px;
}

@media screen and (max-width: 480px) {
    .scroll_x img {
        width: 65px;
    }
}

/* 重要！指定した幅から文字が超えたときに改行するように */
td p,
th p,
td a,
th a {
    display: block;
}

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

    td p,
    th p,
    td a,
    th a {
        font-size: small;
    }
}

/*
テーブル　ロゴイメージ後ろの背景色
-------------------------------------------------------
*/
/* ロゴ画像の部分 */
.scroll_x .fields td {
    background-color: var(--main_yellow);
}

/* ロゴ画像サイズ指定 */
.scroll_x .fields img {
    height: 130px;
    width: 200px;
    object-fit: contain;
    padding-top: var(--padding_pc);
}

/* 1~3位はメダル表示 */
.scroll_x .fields .no1,
.scroll_x .fields .no2,
.scroll_x .fields .no3 {
    position: relative;
}

/* 1~3位: 疑似要素の共通設定 */
.scroll_x .fields .no1::before,
.scroll_x .fields .no2::before,
.scroll_x .fields .no3::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll_x .fields .no1::before {
    background-image: url(../img/5_compare/rank_1st.png);
}

.scroll_x .fields .no2::before {
    background-image: url(../img/5_compare/rank_2nd.png);
}

.scroll_x .fields .no3::before {
    background-image: url(../img/5_compare/rank_3rd.png);
}

/*
テーブル　総合評価
-------------------------------------------------------
*/
/* 評価項目は上揃え */
.scroll_x .ver_top td {
    vertical-align: top;
}

/*
テーブル　周りの設定
-------------------------------------------------------
*/
.scroll_x {
    overflow: scroll;
    margin: var(--box_marging_bottom_pc) auto;
    margin-top: 0;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .scroll_x {
        margin: 0 auto;
    }
}

/*
テーブル　全体の設定
-------------------------------------------------------
*/
.scroll_x table {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    border: 1px solid var(--main_peach);
}

/*
テーブル　最初の1行
-------------------------------------------------------
/*
テーブル　最初の1行を縦書き
-------------------------------------------------------*/
.scroll_x table th:first-child.vertical {
    text-orientation: mixed;
    white-space: wrap;
    /* テキストが折り返されないようにする */
}

/*
テーブル　最初の1行を固定
-------------------------------------------------------
*/
.scroll_x table .sticky_1 {
    position: sticky;
    left: 0;
    z-index: 1;
}

/*
テーブル　ヘッダー(th) とセル（td）の全体設定
-------------------------------------------------------
*/
.scroll_x table th,
.scroll_x table td {
    border: 1px solid var(--main_peach);
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

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

    .scroll_x table th,
    .scroll_x table td {
        padding: var(--padding_mini);
        font-size: smaller;
    }

}

.scroll_x table th:not(.sticky_1):not(.sticky_2) {
    min-width: 270px;
}


/*
テーブル　ヘッダー(th: 項目名）の設定
左端固定項目コラム
-------------------------------------------------------
*/
.scroll_x table th {
    white-space: nowrap;
    padding: var(--padding_sp);
    color: white;
    background-color: var(--main_terracotta)
}

/*
テーブル　セル（td: 各データ）の全体設定
-------------------------------------------------------
*/
.scroll_x td {
    white-space: wrap;
    border-right: 1px solid var(--main_peach);
    border-bottom: 1px solid var(--main_peach);
    background: white;
    padding: var(--padding_sp);
    min-width: 240px;
}

@media screen and (max-width: 480px) {
    .scroll_x td {
        padding: var(--padding_mini);
        min-width: 125px;
    }
}

/* 
COMPARE TABLE 装飾部分
=======================================================
公式サイトへのボタン
-------------------------------------------------------
*/
table .button_offical {
    background: var(--main_orange);
    color: white;
    font-weight: bold;
    border-radius: var(--text_radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding_pc);
    margin: 0 auto;
    max-width: 260px;
    height: 80px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    animation: scaling 0.5s ease 0s infinite alternate;
}


@media screen and (max-width: 480px) {
    table .button_offical {
        padding: var(--padding_sp);
        font-size: 0.9rem;
    }
}

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

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

/* 全体くくり */
.rank_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section_gap_pc);
}

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

    /* 全体くくり */
    .rank_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 
rank タイトル
-------------------------------------------------------
*/
/* タイトルくくり */
.rank .title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    /* ↓王冠画像用 */
    padding-top: 3rem;
    overflow: hidden;
}

/* タイトル */
.rank h2 {
    position: relative;
    color: var(--title_diff);
    background: white;
    padding: var(--padding_pc);
    text-shadow:
        2px 2px 0px white,
        4px 4px 0px var(--bg_ranking);
    font-weight: bold;
    width: fit-content;
    line-height: 1;
}

@media screen and (max-width: 480px) {
    .rank h2 {
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 1), 2px 2px 0px rgba(255, 127, 80, 1);
    }
}

/* タイトル王冠 */
.rank h2 img {
    position: absolute;
    height: calc(3rem - 2px);
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
}

/* タイトル左: 2位 */
.rank h2::before {
    position: absolute;
    content: "";
    vertical-align: middle;
    width: 50%;
    height: 70%;
    background: white;
    bottom: 0;
    right: 100%;
    border-right: 2px solid var(--bg_ranking);
}

/* タイトル右: 3位 */
.rank h2::after {
    position: absolute;
    content: "";
    width: 50%;
    height: 60%;
    background: white;
    bottom: 0;
    left: 100%;
    border-left: 2px solid var(--bg_ranking);
}

/* 
rank 表示絞り込み
-------------------------------------------------------
*/
/* 表示絞り込み */
.rank .filter_header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* 
rank 業者ランキング
-------------------------------------------------------
*/
.rank .list {
    display: flex;
    flex-direction: column;
    gap: var(--section_gap_pc);
    width: 100%;
}

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

/* 各業者くくり */
.rank .list .rank_item {
    display: flex;
    flex-direction: column;
    background: white;
    gap: var(--section_gap_pc);
    width: 100%;
    border: 1px solid var(--cta_robust);
}

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

    /* 各業者くくり */
    .rank .list .rank_item {
        gap: var(--section_gap_sp);
    }
}

/* 社名 */
.rank .list .rank_item .name {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--padding_pc);
    /* ↓ランキング画像用 */
    padding-left: 4rem;
    background: var(--main_brick);
    color: white;
}

/* ランキング画像 */
.rank .list .rank_item .name .ranking_img {
    position: absolute;
    width: 3rem;
    left: 0.5rem;
    top: -0.5rem;
}


/* 概要 */
.rank .list .rank_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) {
    .rank .list .rank_item .overview {
        padding: var(--padding_sp);
        flex-direction: column;
        align-items: center;
    }

}

/* バナー&ロゴ */
.rank .list .rank_item .banner,
.recommend_list .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap_pc);
    width: 40%;
}

@media screen and (max-width: 480px) {
    .rank .list .rank_item .banner {
        width: 100%;
    }
}

/* ロゴ */
.rank .list .rank_item .banner .logo {
    height: 60px;
    width: 100%;
    max-width: none;
    padding: 0;
}

/* 情報: 外ストライプ */
.rank .list .rank_item .info {
    width: 60%;
    background: repeating-linear-gradient(-45deg, var(--bg_diff) 0 5px, var(--bg_ranking) 5px 10px);
    padding: var(--padding_pc);
}

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

    /* 情報 */
    .rank .list .rank_item .info,
    .recommend_list .info {
        width: 100%;
    }
}

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

    /* 情報 */
    .rank .list .rank_item .info,
    .recommend_list .info {
        padding: var(--padding_sp);
    }
}

/* 情報: 中 */
.rank .list .rank_item .info .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg_diff);
    padding: var(--padding_pc);
    width: 100%;
    height: 100%;
    gap: var(--padding_pc);
}

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

    /* 情報: 中 */
    .rank .list .rank_item .info .inner {
        padding: var(--padding_sp);
        gap: var(--gap_pc);
    }
}

/* 〇〇のここがすごい！ */
.rank .list .rank_item .info p {
    color: var(--main_brown);
    font-weight: bold;
}

/* 情報リストくくり */
.rank .list .rank_item .info ol {
    display: flex;
    flex-direction: column;
    gap: var(--padding_pc);
    width: 100%;
}

/* 情報リスト各アイテム */
.rank .list .rank_item .info li {
    position: relative;
    counter-increment: number;
    padding-left: 3rem;
}

/* 数字 */
.rank .list .rank_item .info li::after {
    position: absolute;
    content: counter(number);
    font-family: "Kadwa", serif;
    text-align: center;
    font-size: 1.75rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    color: var(--main_brown);
    background-color: var(--main_yellow);
    border-radius: var(--btn_radius);
}

/* 詳細内のCTA */
.rank .list .rank_item .info a {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: var(--main_red);
    color: white;
    text-align: center;
    font-size: x-large;
    font-weight: bolder;
    padding: var(--btn_padding_pc);
    border-radius: var(--text_radius);
}

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

    /* 詳細内のCTA */
    .rank .list .rank_item .info a {
        width: 100%;
        text-align: center;
        padding: var(--btn_padding_sp);
    }
}

/* ボタンをキラッとさせる */
.rank .list .rank_item .info a::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
    -webkit-animation: shine 2.5s infinite;
    animation: shine 2.5s infinite;
}

/* 
評価表の全体
-------------------------------------------------------
*/
.rank_table {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 var(--padding_pc);
    border: 2px solid var(--main_brown);
}

.smaller {
    display: none;
    margin-bottom: 3rem;
}

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

    .rank_table {
        margin: 0 var(--padding_sp);
        flex-wrap: wrap;
    }

    .smaller {
        display: block;
        margin-bottom: 1rem;
    }
}

.rank_table img {
    max-height: 48px;
}

.rank_table p {
    font-size: smaller;
}

/* 各評価項目 */
.rank_table li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    border-right: 2px solid var(--main_brown);
}

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

    /* 各評価項目 */
    .rank_table li {
        width: calc(100% / 2);
    }

    .rank_table li:last-child {
        width: 100%;
    }
}

.rank_table li:last-child {
    border-right: 0;
}

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

    /* 各評価項目 */
    .rank_table li:nth-child(n+3):nth-child(-n+6) {
        border-top: 2px solid var(--main_brown);
    }

    .rank_table li:nth-child(even) {
        border-right: 0;
    }
}

/* 評価項目名 */
.rank_table .rank_th {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: fit-content;
    color: var(--main_brown);
    background-color: var(--main_peach);
    padding: var(--padding_mini);
    border-bottom: 2px solid var(--main_brown);
}

/* 評価詳細 */
.rank_table .rank_dt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap_pc);
    width: 100%;
    height: 100%;
    padding: var(--padding_mini);
    background: var(--bg_diff);
}

/* 
Rank Review
=======================================================
カーセブンで車を売った人達の声
-------------------------------------------------------
*/
/* 声全体囲み */
.rank .review {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* タイトル */
.rank .review h4 {
    position: relative;
    position: absolute;
    background: white;
    padding: var(--title_pc);
    border: 1rem solid var(--main_yellow);
    top: 0;
    width: 70%;
    text-align: center;
    font-size: larger;
    color: var(--main_brick);
    border-radius: 4px;
}

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

    /* タイトル */
    .rank .review h4 {
        width: fit-content;
        padding: var(--title_sp);
        border: 0.5rem solid var(--main_yellow);
    }
}

/* タイトル */
.rank .review h4::before {
    position: absolute;
    content: "";
    clip-path: polygon(34% 0, 0% 100%, 100% 0);
    background: white;
    width: 48px;
    height: 32px;
    top: 100%;
    left: 70%;
}

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

    /* タイトル */
    .rank .review h4::before {
        width: 32px;
        height: 16px;
        left: 60%;
    }
}



.rank .review ul {
    display: flex;
    padding: var(--padding_pc);
    padding-top: 7rem;
    margin-top: 2rem;
    gap: var(--gap_pc);
    background-color: var(--main_yellow);
}

/* 口コミ囲み */
@media screen and (max-width: 480px) {
    .rank .review ul {
        flex-direction: column;
        padding-bottom: 3rem;
        padding-top: 6rem;
        margin-top: 1.75rem;
        gap: 4.5rem;
    }
}

/* 口コミ各アイテム囲み */
.rank .review li {
    /* ↓アイコン */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: var(--padding_pc);
    padding-top: 4.5rem;
    background-color: white;
}

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

    /* 口コミ各アイテム囲み */
    .rank .review li {
        padding: var(--padding_sp);
        padding-top: 4.5rem;
    }

    /* 口コミ各アイテム囲み：非表示 */
    .rank .review li.hide {
        display: none;
    }
}

/* 口コミ各アイコン */
.rank .review li .icon {
    position: absolute;
    width: 8rem;
    height: 8rem;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 0.25rem solid white;
}

/* 口コミ各アイコン */
.rank .review li .icon img {
    object-fit: cover;
}

/* もっとみる 非表示*/
.rank .review .more-button {
    display: none;
}

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

    /* もっとみる 非表示*/
    .rank .review .more-button {
        position: absolute;
        padding: var(--title_sp);
        bottom: 0.5rem;
        display: block;
        z-index: 999;
    }

    .rank .review .more-button.open {
        background-color: var(--bg_diff);
        color: var(--main_brick);
        font-weight: bold;
    }

    .rank .review .more-button.close {
        background-color: var(--main_brick);
        color: white;
    }
}

/* 
rank 星レート
-------------------------------------------------------
*/

/* Recommendation bar */
.rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-bottom: 1rem;
}

.rate_left {
    padding: 10px 20px;
    background-color: #f69157;
    border: 3px solid #f69157;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.rate_right {
    display: flex;
    background-color: #fff;
    padding: 10px 20px;
    border: 3px solid #f69157;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.rate {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 30px;
    font-size: 30px;
    margin-right: 20px;
}

.rate::before,
.rate::after {
    position: absolute;
    display: inline-block;
    height: 30px;
    content: '★★★★★';
    line-height: 30px;
}

.rate::before {
    color: #c4c4c4;
}

.no1_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 5 * 30 = 150px */
    width: 150px;
    color: #ffeb00;
}

.no2_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 135px;
    color: #ffeb00;
}

.no3_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 126px;
    color: #ffeb00;
}

.recotext {
    font-weight: 700;
    font-size: 18px;
}

.recommend_level {
    color: #fff;
}

.rate-wrap {
    display: flex;
    width: 330px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1.5px solid #e8d8b0;
    margin: 20px auto 0;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .rating {
        justify-content: center;
        margin: .5rem 0;
        margin-top: 0;
        padding: 0;
    }

    .rate_left {
        border: none;
        padding: 5px 10px;
    }

    .rate_right {
        border: none;
        padding: 5px 10px;
    }

    .recotext {
        font-size: 0.9rem;
    }
}

/* 利用者の口コミ
=======================================================*/
.card_wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1rem;
    padding: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.card:last-child {
    margin-right: 0;
}

.card_header {
    width: 30%;
    margin: 1rem 0;
}

.card_text {
    height: 70%;
    padding: 1rem 2rem;
    background-color: #dee4b3;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dog_detail {
    margin-top: 0.3rem;
    text-align: right;
}

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

    .card {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .card:last-child {
        margin-right: 0;
        margin-bottom: 0;
    }
}

/* 
=======================================================
FLOAT MENU
=======================================================
*/
.float_menu {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    bottom: 0;
    width: 100%;
    height: 15vh;
    background: white;
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: var(--padding_pc);
}

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

.float_menu_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
}

.top_btn {
    position: fixed;
    z-index: 100000;
    bottom: 40px;
    right: 2.6vw;
    background-color: var(--main_orange);
    width: 60px;
    height: 60px;
    border-radius: 100px;
    padding: var(--padding_pc);
    transform: translateY(15%);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}


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

.top_btn sup {
    color: white;
}

.arrow_float {
    width: 17px;
}

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


    .float_menu a p {
        padding: 0.5rem 1rem;
        padding-right: 3rem;
        width: fit-content;
    }

    .float_menu_btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 85%;
        height: 100%;
    }

    .top_btn {
        position: fixed;
        z-index: 100000;
        bottom: 40px;
        right: 2.6vw;
        background-color: var(--main_orange);
        width: 45px;
        height: 45px;
        border-radius: 100px;
        padding: 0;
        transition: all 0.3s;
        transform: translateY(23%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .arrow_float {
        width: 12px;
    }
}

/* 
=======================================================
FOOTER
=======================================================
*/
.footer {
    position: sticky;
    top: 100vh;
    width: 100%;
    color: white;
    background: var(--main_orange);
    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: 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;
}

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

.privacy_wrap,
.evidence_wrap,
.company_wrap {
    display: flex;
    flex-direction: column;
    padding: var(--section_updown_pc);
    gap: var(--section_gap_pc);
}

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

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

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

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

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

.privacy01 h2 {
    font-size: large;
}


/* 
=======================================================
LOADING
=======================================================
*/
.redirect_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section_updown_pc);
    gap: var(--section_gap_pc);
}

/* くるくる回るやつ */
.loader {
    color: var(--main_orange);
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

.re-load-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    position: relative;
    color: white;
    background-color: var(--main_red);
    border-radius: var(--btn_radius);
    padding: 1.5rem;
    height: 100%;
}

@media screen and (max-width: 480px) {
    .re-load-link {
        margin: 5vh 1rem;
        padding: 1rem;
    }
}

.re-load-link img {
    height: 30px;
    padding-right: 0.5rem;
}

.redirect_btn {
    color: var(--body_white);
    font-size: 1.3rem;
    font-weight: bolder;
}


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

/* ===================================
recommend TOP3
=======================================*/
.recommend {
    padding-top: 5rem;
    background-size: auto auto;
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_compare_stripe) 0.5rem, var(--bg_compare_stripe) 1rem);
}

.recommend_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

.recommend_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
}

.recommend_item--next {
    order: 3;
}

.recommend_item--chojin {
    margin-top: 70px;
    order: 3;
}

.recommend_item--carnext {
    margin-top: 70px;
    order: 2;
}

.recommend_list .overview {
    display: flex;
    flex-direction: column;
}

.recommend_item {
    width: 31%;
    background-color: #fff;
    height: fit-content;
}

.above--recommend::before {
    margin-right: 0.5rem;
}

.above--recommend::after {
    margin-left: 0.5rem;
}

.recommend_list .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap_pc);
    width: 100%;
    padding-top: 5px;
}

.recommend_list .info .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg_diff);
    padding: 0.3rem;
    width: 100%;
    height: 100%;
    gap: var(--padding_sp);
}

.logo--recommend {
    width: 100%;
    padding: 10px 0;
}

.recommend_list .info {
    background: repeating-linear-gradient(-45deg, var(--bg_diff) 0 5px, var(--bg_ranking) 5px 10px);
    padding: var(--padding_sp);
}

.recommend_item .cta {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: var(--main_red);
    color: white;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bolder;
    padding: var(--btn_padding_pc);
    border-radius: var(--text_radius);
}

.recommend_item .name {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--padding_pc);
    padding-left: 4rem;
    background: var(--main_brick);
    color: white;
}

.recommend_img {
    position: absolute;
    width: 3rem;
    left: 0.5rem;
    top: -0.5rem;
}

.triangle--recommend {
    display: block;
}

.red--top {
    text-shadow: 2px 2px 0px var(--bg_trouble_stripe), 4px 4px 0px rgb(222, 192, 192);
    color: #e83200;
}

.recommend h2 {
    color: var(--main_terracotta);
    text-shadow: 2px 2px 0px var(--bg_trouble_stripe), 4px 4px 0px #E4C58B;
    font-weight: bold;
}


@media screen and (max-width:1000px) {
    .recommend_wrap {
        margin: 0 1rem;
    }
}


@media screen and (max-width:480px) {
    .recommend {
        padding-top: 1rem;
    }

    .above--recommend::before {
        margin-right: 0.2rem;
    }

    .above--recommend::after {
        margin-left: 0.2rem;
    }

    .recommend_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 1rem;
    }

    .recommend_list .overview {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .recommend_item {
        width: 100%;
    }

    .recommend_item--next {
        order: 0;
    }

    .recommend_item--carnext,
    .recommend_item--chojin {
        margin-top: 20px;
    }

    .recommend_list .banner {
        width: 50%;
    }

    .recommend_list .info {
        width: 60%;
    }

    .recommend_item .cta {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .logo--recommend {
        width: 80%;
    }

    .triangle--recommend {
        display: none;
    }
}

@media screen and (max-width:345px) {
    .logo--recommend {
        width: 100%;
        padding: 0px 0;
        margin: 0;
    }

    .above {
        font-size: 0.75rem;
    }

    .recommend_item .cta {
        font-size: 0.8rem;
    }

    .image_cta .logo .above {
        font-size: 0.7rem;
    }
}

/*=========　検索フォーム　=========*/

.col1 {
    padding-top: 1rem;
    background-size: auto auto;
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_compare_stripe) 0.5rem, var(--bg_compare_stripe) 1rem);
}

.form_box2 {
    background-color: white;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 0.5rem, var(--bg_compare_stripe) 0.5rem, var(--bg_compare_stripe) 1rem);
}

.form_box,
.form_box2 {
    width: 100%;
    max-width: var(--width_pc);
    margin: 0 auto;
    padding: 20px;
    border-radius: 25px;
}



.form_box h3,
.form_box2 h3 {
    text-align: center;
    margin: 0px 0 5px;
    padding: 10px 10px;
    font-size: 16px;
    clear: both;
    color: #3B3B3B;
    background-color: #bababa;
    border-radius: 15px 15px 0 0;
}

.form_title {
    background-color: #d1d1d1;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    text-align: center;
    color: #3B3B3B;
    font-size: 1.2em;
    font-weight: bolder;

}

.form_table {
    border-collapse: separate;
    border-spacing: 10px;
    width: 100%;
    margin-bottom: 0px;
}

.th_form {
    width: 30%;
    font-size: 1.4em;
    height: auto;
    vertical-align: middle;

}

.td_form02 {
    background-color: white;
    border: none;
    padding: 0px;
    height: auto;
    vertical-align: middle;
    font-size: 0.9em;
    flex-wrap: wrap;
    font-weight: bolder;
    border-radius: 0px;
}

.submit {
    margin-top: 5px;
}

label {
    margin: 10px;
}

@media screen and (max-width:480px) {
    .th_form {
        width: 30%;
        font-size: 0.8em;
        height: auto;
        vertical-align: middle;
    }

    .form_box {
        padding: 10px;
    }
}

.red--inline {
    display: inline;
}

.td_form {
    background-color: #C2F9C7;
    border: none;
    padding: 0px;
    height: 40px;
    vertical-align: middle;
}

.td_form02 {
    background-color: white;
    border: none;
    padding: 0px;
    height: auto;
    vertical-align: middle;
    font-size: 0.9em;
    flex-wrap: wrap;
    font-weight: bolder;
    border-radius: 0px;
}


.td_form03 {
    background-color: #FFE6E6;
    border: none;
    padding: 0px;
    height: 40px;
    vertical-align: middle;
    font-size: 0.9em;
    flex-wrap: wrap;
}

.td_form02 ul {
    list-style: none;
}

.ul_form {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 10px
}

@media screen and (max-width:480px) {
    .ul_form {
        display: flex;
        flex-wrap: wrap;
        height: 70px;
        padding: 10px
    }
}

.ul_form li {
    margin: auto;
}



.styled-select {
    overflow: hidden;
    width: 80%;
    margin: 5px auto;
    font-weight: bolder;
    height: 40px;
}

.styled-select select {
    width: 100%;
    padding-right: 1em;
    cursor: pointer;
    text-align: center;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.styled-select select::-ms-expand {
    display: none;
}

.styled-select.sl01 {
    position: relative;
    border-radius: 2px;
    border: 2px solid #3B3B3B;
    border-radius: 50px;
    background: #ffffff;
    font-size: 1.3em;
    text-align: center;
}

.styled-select.sl01::before {
    position: absolute;
    top: 0.9rem;
    right: 0.8em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #3B3B3B;
    pointer-events: none;
}

.styled-select.sl01 select {
    padding: 4px 38px 8px 8px;
    color: black;
    font-size: 14px;
}


/*さらに検索
---------------------------------------------------*/
#acMenu::after {
    content: "";
    display: block;
    clear: both;
}

#acMenu dt {
    float: right;
    display: block;
    width: 85px;
    line-height: 24px;
    margin: 5px 5px 5px 0;
    padding: 2px 0 0 28px;
    font-size: 12px;
    border: 1px solid #d1d1d1;
    cursor: pointer;
    background: url(/img/items/plus_icon-40.png) no-repeat 5px 4px;
    background-size: 20px;
}

#acMenu dd {
    width: 100%;
    height: auto;
    display: none;
}

#acMenu dt.active {
    background: url(/img/items/minus_icon-40.png) no-repeat 5px 4px;
    background-size: 20px;
}

.open {
    display: none;
}

/*検索ボタン*/
.btn_form {}

/*検索フォームボタン*/
.btn_kensaku img {
    width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*	margin: 0 auto 15px;*/
    text-align: center;
}

/*フォーム 20151028改修版
---------------------------------------------*/
.form_box02 {}

.form_box02>ul {
    display: table;
    width: 100%;
    font-size: 12px;
    margin: 0 0 5px 0;
}

.form_box02>ul>li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 10px;
    background-color: #3B3B3B;
    border: solid 1px #3B3B3B;
}

.form_box02>ul>li>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.form_box02>ul>li>ul>li {
    list-style: none;
    padding: 1px 5px 1px 5px;
    width: 40%;
}

.form_box02>ul>li:first-child {
    width: 20%;
    padding: 0 5px 0 0;
    background-color: #d1d1d1;
    text-align: center;
}

.form_box02>ul>li:last-child {
    width: 80%;
    padding: 10px;
    background-color: white;
    text-align: center;

}


.form_box02 p {
    font-size: 15px;
    font-weight: bolder;
    color: #3B3B3B;
}

.form_box02 li label:hover {
    background-color: gold;
}

.form_koumoku ul {
    display: inline;
}

.form_koumoku li {
    list-style: none;
    padding: 1px 5px 1px 5px;
    width: 40%;
}


.form_koumoku label {
    vertical-align: middle;
    color: black;
}



@media screen and (max-width: 480px) {
    .form_box02>ul {
        display: table;
        width: 100%;
        margin: 0 0 5px 0;
        border: 1px solid #d1d1d1;
    }

    .form_box02>ul>li {
        display: table-cell;
        vertical-align: middle;
        padding: 0 0 0 10px;
        background-color: #d1d1d1;
        border: solid 1px #d1d1d1;
    }

    .form_box02>ul>li>ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        width: 90%;
    }

    .form_box02>ul>li>ul>li {
        list-style: none;
        padding: 1px 5px 1px 5px;
        width: 100%;
    }

    .form_box02>ul>li:first-child {
        width: 15%;
        padding: 0 5px 0 0;
        background-color: #d1d1d1;
        text-align: center;
        font-size: 15px;
    }

    .form_box02>ul>li:last-child {
        width: 80%;
        padding: 5px;
        background-color: #fff;
        text-align: center;
        font-size: 10px;
    }

    .form_box02 p {
        font-size: 13px;
        font-weight: bolder;
        color: #3B3B3B;
    }

    .form_box02 li label:hover {
        background-color: gold;
    }

    .form_koumoku ul {
        display: flex;
        flex-wrap: wrap;
    }

    .form_koumoku li {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 1px 5px 1px 5px;
    }


    .form_koumoku label {
        vertical-align: middle;
        color: black;
        white-space: wrap;
        text-align: start;
    }

    .styled-select.sl01 select {
        padding: 7px 38px 8px 8px;
        color: black;
    }
}

#btn-click,
#btn-click2 {
    width: 100%;
}


/*=========　チェックボックス　=========*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
    font: 12px 'Open Sans', Arial, sans-serif;
    cursor: pointer;
    font-weight: bolder;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

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

    input[type="checkbox"]+label {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 20px;
        font: 14px 'Open Sans', Arial, sans-serif;
        cursor: pointer;
        font-weight: bolder;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

    }
}

input[type="checkbox"]+label:last-child {
    margin-bottom: 0;
}

input[type="checkbox"]+label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #3B3B3B;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked+label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*=========　チェックボックスここまで　=========*/

.button06 {
    display: block;
    position: relative;
    background-color: #ed2f2f;
    border-radius: 4px;
    color: #fff;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
    padding: 6px 6px;
    overflow: hidden;
    width: 100%;
    margin: 0px auto 1px;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    padding: 15px;
}

.button_text {
    font-weight: bold;
}


/* ====== radio button ====== */
input[type="radio"] {
    display: none;
}

input[type="radio"]+label {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
    font: 16px 'Open Sans', Arial, sans-serif;
    cursor: pointer;
    font-weight: bolder;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

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

    input[type="radio"]+label {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 20px;
        font: 14px 'Open Sans', Arial, sans-serif;
        cursor: pointer;
        font-weight: bolder;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

    }
}

input[type="radio"]+label:last-child {
    margin-bottom: 0;
}

input[type="radio"]+label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #3B3B3B;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input[type="radio"]:checked+label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.title_wrap_list {
    display: flex;
    gap: 10px;
}

.title_wrap_list:last-child {
    margin-top: 10px;
}

.fv_search {
    background-color: var(--bg_diff);
    padding-top: 3rem;
}

.title_wrap {
    vertical-align: middle;
    list-style: none;
    padding: 15px;
    margin: 0px auto 0;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    max-width: var(--width_pc);
}

.title_wrap img {
    width: 40px;
    aspect-ratio: auto;
}

.title_wrap p {
    font-size: 1.5rem;
    font-weight: bold;
}

.diff_width {
    padding: 10px 0 3rem;
}

.diff .points_width {
    max-width: var(--width_pc);
    margin: 0 auto;
}

.compare_search {
    padding-top: 3rem;
}

.rank_search {
    padding-top: 3rem;
}

@media screen and (max-width:1000px) {
    .fv_search {
        padding: 1rem;
    }

    .diff_width {
        padding: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .title_wrap p {
        font-size: 0.9rem;
        font-weight: bold;
    }

    .title_wrap img {
        width: 30px;
        aspect-ratio: auto;
    }

    .rank_search {
        padding-top: 1rem;
    }

}

.annotation--note {
    text-align: right;
}

.howtu {
    background-image: repeating-linear-gradient(90deg, transparent, transparent .5rem, var(--bg_compare_stripe) .5rem, var(--bg_compare_stripe) 1rem);
}

.howtu_wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 5rem 0 0;
}

.howtu_wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.howtu_text {
    background: repeating-linear-gradient(-45deg, var(--bg_diff) 0 5px, var(--bg_ranking) 5px 10px);
    padding: var(--padding_pc);
    margin-top: 2rem;
}

.howtu_text_wrap {
    background-color: #FFFEEC;
}

.underline_effect {
    background-image: repeating-linear-gradient(-45deg, var(--main_yellow) 0 5px, var(--bg_compare_stripe) 5px 10px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 50%;
}

@media screen and (max-width:480px) {
    .howtu {
        padding: 1rem;
    }

    .howtu_text {
        background: repeating-linear-gradient(-45deg, var(--bg_diff) 0 5px, var(--bg_ranking) 5px 10px);
        padding: var(--padding_sp);
        margin-top: 1rem;
    }

    .howtu_wrapper {
        max-width: 1000px;
        margin: 0 auto;
        padding: 1rem 0 0;
    }

    .howtu_wrap {
        max-width: 1000px;
        margin: 1rem auto;
    }    
    
}