@charset "utf-8";
/* CSS Document */

/* ===============================================
   common
=============================================== */
:root {
	--ff-en: "Archivo", sans-serif;
	--ff-en-condensed: "Oswald", sans-serif;
}

#wrapper {
	width: 100%;
	overflow-x: clip;
	font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
    font-weight: 500;
	color: #fff;
	padding: 0;
	margin: 0;
	background-color: #000;
}

#wrapper *{
	box-sizing:border-box;
}

a {
    display: inline-block;
}

a:link,
a:visited,
a:active {
    color: #000;
	text-decoration: none;
}

img {
    max-width: 100%;
}

/* ホバーしたとき */
.over {
    transition: opacity 0.3s;
}
.over:hover {
    opacity: 0.7;
}

.over2 {
    transition: transform 0.3s;
}
.over2:hover {
    transform: translateY(-7px);
}

.over3 {
    transition: .3s;
    position: relative;
}
.over3::before {
	content: "";
	width: 90%;
	height: clamp(0px, 1vw, 10px);
	position: absolute;
	top: 100%;
	left: 5%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	z-index: -1;
	opacity: 0;
	transition: .3s;
}
.over3:hover {
	transform: translateY(-7px);
}
.over3:hover::before {
	transform: translateY(7px);
	opacity: 1;
}

/* 画面上非表示　クローラーや読み上げソフトには認識 */
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* pc / sp */
.sp { display: none; }

@media (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block; }

    #header {
        height: clamp(64px, 18vw, 110px);
    }

    .h_logo {
        width: clamp(90px, 24vw, 150px);
    }

    .mv > img {
        display: block;
    }

    .scroll_btn {
        width: clamp(32px, 8vw, 56px);
        bottom: 8%;
    }
}


/* ===============================================
   swiper
=============================================== */
#wrapper .swiper {
	width: clamp(0px, 89.8vw, 920px);
	margin: auto 0;
	margin-inline: auto;
	position: relative;
}

#wrapper .swiper-wrapper {
	transition-timing-function: linear;
}

#wrapper .swiper-slide {
	height: auto;
	transform: translate(-50%,0)!important;
}

.b_img {
	width:100%;
}

#wrapper .swiper-slide .b_img img {
	width: clamp(0px, 44.9vw, 460px);
}

.b2_img {
	width:100%;
}

#wrapper .swiper-slide .b2_img img {
	width: clamp(0px, 44.9vw, 460px);
}

.swiper .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
	z-index: 99;
	height: auto;
}

.swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
	margin: 0 0 0 10px !important;
	background: #333 !important;
}

.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
	width: clamp(0px, 4.4vw, 45px);
    height: clamp(0px, 9.3vw, 95px);
}

.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
    content: "";
    width: 100%;
    height: 100%;
	background: url("../img/swiper_arrow.svg") no-repeat center center / contain;
}

.swiper .swiper-button-prev::after {
    transform: scale(-1, 1);
}

@media (max-width: 768px) {
    #wrapper .swiper {
        width: 100vw;
    }
    
    #wrapper .swiper-slide {
        transform: translate(0%,0)!important;
    }
    
    #wrapper .swiper-slide .b_img img {
        width: 90vw;
    }

    #wrapper .swiper-slide .b2_img img {
        width: 90vw;
    }
    
    .swiper .swiper-button-next {
        right: 11vw;
    }
    .swiper .swiper-button-prev {
        left: 11vw;
    }
}


/* ===============================================
   header
=============================================== */
#header {
	width: 100%;
    height: clamp(0px, 11.7vw, 120px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.h_logo {
    width: clamp(0px, 12.2vw, 125px);
}


/* ===============================================
   main
=============================================== */
#main {
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: clamp(0px, 9.8vw, 100px);
}

@media (max-width: 768px) {
    #main {
        padding-bottom: 14vw;
    }
}

.bg_grad {
	background: #000;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(24, 30, 37, 1) 15%, rgba(44, 56, 68, 1) 50%, rgba(24, 30, 37, 1) 85%, rgba(0, 0, 0, 1) 100%);
}


/* ===============================================
   mv
=============================================== */
.mv {
	width: 100%;
    position: relative;
	background-color: #000;
}

.mv .mv_text,
.mv .mv_logo {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.scroll_btn {
    width: clamp(0px, 5.9vw, 60px);
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

.scroll_btn img {
    display: block;
    width: 100%;
    animation: scroll_down 1.5s ease-in-out infinite;
}

@keyframes scroll_down {
    0% {
        opacity: 0;
        transform: translateY(clamp(-12px, -1.2vw, -6px));
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(clamp(6px, 1.2vw, 12px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll_btn img {
        animation: none;
    }
}


/* ===============================================
   lead
=============================================== */
.lead {
    padding: 0 0 clamp(0px, 8.8vw, 90px);
	background-color: #000;
}

.lead_text {
	font-size: clamp(0px, 2.2vw, 23px);
    text-align: center;
	line-height: 2em;
	letter-spacing: 0.1em;
}

.lead_text span {
	font-size: 1.7em;
	font-family: var(--ff-en);
	font-weight: 800;
	font-variation-settings: "wdth" 100;
}

@media (max-width: 768px) {
    .lead {
        padding: 6vw 4vw 14vw;
    }

    .lead_text {
        font-size: clamp(14px, 3.6vw, 24px);
        line-height: 2;
        letter-spacing: 0.04em;
    }

    .lead_text span {
        font-size: 1.6em;
    }
}


/* ===============================================
   special benefit
=============================================== */
#special_benefit {
    margin-bottom: clamp(0px, 8.8vw, 90px);
}

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


/* ===============================================
   cars lineup
=============================================== */
.cars_lineup .title_area {
    text-align: center;
    margin-bottom: clamp(0px, 3.9vw, 40px);
}

.cars_lineup .title_area h2 {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto clamp(0px, 1.5vw, 15px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 2.9vw, 30px);
    color: #d8c443;
    font-family: var(--ff-en-condensed);
    font-size: clamp(0px, 9vw, 92px);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.cars_lineup .title_area h2 span {
    font-size: 0.6em;
    line-height: 1.4;
    padding-right: clamp(0px, 2.9vw, 30px);
    border-right: 1px solid #d8c443;
}

.cars_lineup .title_area p {
    color: #d8c443;
    font-size: clamp(0px, 2.9vw, 30px);
    font-weight: 900;
    line-height: 1.7;
    letter-spacing: 0.03em;
}

.cont_lead {
    font-size: clamp(0px, 2.4vw, 25px);
    text-align: center;
    line-height: 1.9;
    letter-spacing: 0.06em;
    margin-bottom: clamp(0px, 6.8vw, 70px);
}

.note {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto;
    font-size: clamp(0px, 2vw, 20px);
    line-height: 1.6;
}

.note li {
    padding-left: 1em;
    text-indent: -1em;
}

@media (max-width: 768px) {
    #special_benefit {
        margin-bottom: 12vw;
    }

    .cars_lineup .title_area {
        margin-bottom: 6vw;
    }

    .cars_lineup .title_area h2 {
        width: 92%;
        margin-bottom: 3vw;
        gap: 2.5vw;
        font-size: clamp(0px, 9.6vw, 72px);
    }

    .cars_lineup .title_area h2 span {
        padding-right: 2.5vw;
    }

    .cars_lineup .title_area p {
        width: 92%;
        margin: 0 auto;
        font-size: clamp(13px, 3.7vw, 26px);
        letter-spacing: 0;
    }

    .cont_lead {
        width: 90%;
        margin: 0 auto 9vw;
        font-size: clamp(13px, 3.4vw, 24px);
        line-height: 1.9;
        letter-spacing: 0;
    }

    #featured_cars .cont_lead span {
        display: inline-block;
    }

    .note {
        width: 88%;
        font-size: clamp(12px, 3.2vw, 20px);
        line-height: 1.8;
    }

    .note li + li {
        margin-top: 0.5em;
    }

    #featured_cars {
        margin-bottom: 10vw;
    }

    #featured_cars .swiper-container {
        margin-bottom: 7vw;
    }
}


/* ===============================================
   featured cars
=============================================== */
#featured_cars {
    margin-bottom: clamp(0px, 6.8vw, 70px);
}

#featured_cars .swiper-container {
    margin-bottom: clamp(0px, 4.9vw, 50px);
}


/* ===============================================
   trade support
=============================================== */
.trade_support {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto;
}

.support_lead {
    display: flex;
    align-items: center;
    gap: clamp(0px, 3.9vw, 40px);
    font-size: clamp(0px, 2.4vw, 25px);
    font-weight: 700;
    white-space: nowrap;
}

.support_lead::before,
.support_lead::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #fff;
}

.support_price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0px, 3.9vw, 40px);
    margin-top: clamp(0px, 2vw, 20px);
}

.support_price > span {
    font-size: clamp(0px, 4.9vw, 50px);
    font-weight: 900;
    line-height: 1.3;
	text-align: left;
}

.support_price strong {
    color: #d8c443;
    font-family: var(--ff-en-condensed);
    font-size: clamp(0px, 19.5vw, 200px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
}

.support_price strong small {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.5em;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-left: 0.2em;
    position: relative;
    top: -0.1em;
}

@media (max-width: 768px) {
    .trade_support {
        width: 90%;
    }

    .support_lead {
        font-size: clamp(13px, 3.6vw, 24px);
        gap: 3vw;
    }

    .support_price {
        gap: 4vw;
        margin-top: 4vw;
    }

    .support_price > span {
        font-size: clamp(20px, 6vw, 44px);
    }

    .support_price strong {
        font-size: clamp(86px, 24vw, 172px);
    }
}


/* ===============================================
   used cars
=============================================== */
#used_cars {
    margin-bottom: clamp(0px, 13.7vw, 140px);
    text-align: center;
}

.campaign_link {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto clamp(0px, 8.8vw, 90px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.campaign_link a {
    display: block;
    border-radius: clamp(0px, 10.7vw, 110px);
    overflow: hidden;
}

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

.campaign_link p {
    margin-top: clamp(0px, 4.9vw, 50px);
    font-size: clamp(0px, 2vw, 20px);
    line-height: 1.5;
	text-align: left;
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

#used_cars .more_title {
    width: clamp(0px, 18vw, 184px);
    margin: clamp(0px, 12.7vw, 130px) auto clamp(0px, 5.9vw, 60px);
    padding-bottom: clamp(0px, 1.5vw, 15px);
    border-bottom: 2px solid #fff;
    font-size: clamp(0px, 4.4vw, 45px);
    font-weight: 900;
    position: relative;
}

#used_cars .more_title::after {
    content: "";
    width: clamp(0px, 2.4vw, 25px);
    height: clamp(0px, 2.4vw, 25px);
    background-color: #2c3844;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    bottom: clamp(-14px, -1.4vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
	z-index: 1;
}

#used_cars .more_title span {
	position: relative;
	z-index: 2;
}

#used_cars .text_1 {
    font-size: clamp(0px, 3.9vw, 40px);
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: clamp(0px, 6.8vw, 70px);
}

.special_price {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto clamp(0px, 3.4vw, 35px);
    padding: clamp(0px, 2.4vw, 25px) 0;
    border: 2px solid #ae9131;
}

.special_price p {
    font-size: clamp(0px, 2.4vw, 25px);
    line-height: 1.7;
}

.special_price h3 {
    color: #d8c443;
    font-family: var(--ff-en), 'Noto Sans JP', sans-serif;
    font-size: clamp(0px, 4.3vw, 44px);
    font-weight: 900;
    line-height: 1.3;
    margin: 0.2em 0;
}

.special_price h3 span {
	font-size: 1.3em;
	font-variation-settings: "wdth" 100;
    font-weight: 800;
    position: relative;
    bottom: -0.051em;
}

#used_cars .text_2 {
    font-size: clamp(0px, 2.4vw, 25px);
    line-height: 2;
    margin-bottom: clamp(0px, 9.8vw, 100px);
}

#used_cars .text_2 strong {
    font-size: 1.35em;
    font-weight: 900;
}

.used_cars_main .link_area_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0px, 1.5vw, 15px);
    margin-bottom: clamp(0px, 2.4vw, 25px);
}

.used_cars_main .link_area_title img {
    width: clamp(0px, 25.9vw, 265px);
}

.used_cars_main .link_area_title h3 {
    font-size: clamp(0px, 3.5vw, 36px);
    font-weight: 900;
    letter-spacing: 0.05em;
}

.used_cars_main .link_area_title h3 small {
    font-size: 0.8em;
}

.used_cars_main .link_list a {
    display: block;
    width: clamp(0px, 74.7vw, 765px);
    margin: 0 auto;
}

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

@media (max-width: 768px) {
    #used_cars {
        margin-bottom: 20vw;
    }

    .campaign_link,
    .special_price,
    .used_cars_main .link_list a {
        width: 90%;
    }

    .campaign_link {
        margin-bottom: 14vw;
    }

    .campaign_link a {
        border-radius: 14vw;
    }

    .campaign_link p {
        margin-top: 6vw;
        font-size: clamp(12px, 3.2vw, 20px);
        line-height: 1.8;
    }

    .campaign_link p br {
        display: none;
    }

    #used_cars .more_title {
        width: 25vw;
        margin: 16vw auto 9vw;
        padding-bottom: 3vw;
        font-size: clamp(22px, 6vw, 42px);
    }

    #used_cars .more_title::after {
        width: 4vw;
        height: 4vw;
        bottom: -2.2vw;
    }

    #used_cars .text_1 {
        font-size: clamp(17px, 4.8vw, 34px);
        letter-spacing: 0;
        margin-bottom: 8vw;
    }

    .special_price {
        margin-bottom: 6vw;
        padding: 5vw 2vw;
    }

    .special_price p {
        font-size: clamp(13px, 3.5vw, 24px);
    }

    .special_price h3 {
        font-size: 4.5vw;
        line-height: 1.5;
        white-space: nowrap;
        margin: 0.4em 0;
    }

    #used_cars .text_2 {
        width: 90%;
        margin: 0 auto 12vw;
        font-size: clamp(13px, 3.4vw, 24px);
        line-height: 1.9;
    }

    #used_cars .text_2 strong {
        font-size: 1.2em;
    }

    .used_cars_main .link_area_title {
        gap: 2vw;
        margin-bottom: 4vw;
    }

    .used_cars_main .link_area_title img {
        width: 36vw;
    }

    .used_cars_main .link_area_title h3 {
        font-size: 4.4vw;
        letter-spacing: 0;
    }
}


/* ===============================================
   new cars
=============================================== */
#new_cars {
    margin-bottom: clamp(0px, 22.5vw, 230px);
}

.new_cars_list {
    width: clamp(0px, 90vw, 924px);
    margin: 0 auto clamp(0px, 9.8vw, 100px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 8.1vw, 83px);
}

.new_cars_item {
	display: flex;
	justify-content: center;
	position: relative;
}

.new_cars_item .brand_head {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}

.new_cars_item a,
.new_cars_item img {
    display: block;
    width: 100%;
    height: auto;
}

.new_cars_item a:focus-visible,
#shop_list a:focus-visible {
    outline: 3px solid #d8c443;
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .new_cars_list {
        width: 100%;
        gap: 6vw;
        margin: 0 0 14vw;
    }

    .new_cars_item a {
        min-width: 0;
    }

    #new_cars {
        margin-bottom: 24vw;
    }
}


/* ===============================================
   shop list
=============================================== */
#shop_list .text_1 {
    font-size: clamp(0px, 3.0vw, 31px);
    letter-spacing: 0.2em;
    padding-left: 0.2em;
    text-align: center;
    position: relative;
    padding-bottom: clamp(0px, 3.4vw, 35px);
    margin-bottom: clamp(0px, 5.9vw, 60px);
}

#shop_list .text_1::after {
    content: "";
    width: clamp(0px, 7.3vw, 75px);
    height: clamp(0px, 0.5vw, 5px);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#shop_list .dealer {
    width: 100%;
    height: clamp(0px, 18.6vw, 190px);
    background-color: #1a3a63;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 1vw, 10px);
    padding-top: clamp(0px, 2vw, 20px);
    margin-bottom: clamp(0px, 9.3vw, 95px);
}

#shop_list .dealer .text_2 {
    font-size: clamp(0px, 2vw, 20px);
    line-height: 1;
    letter-spacing: 0.1em;
}

#shop_list .dealer img {
    width: clamp(0px, 68.4vw, 700px);
}

@media (max-width: 768px) {
    #shop_list .text_1 {
        width: 92%;
        margin: 0 auto 9vw;
        font-size: clamp(14px, 3.8vw, 27px);
        letter-spacing: 0.08em;
        padding-bottom: 5vw;
    }

    #shop_list .text_1::after {
        width: 10vw;
        height: 0.7vw;
    }

    #shop_list .dealer {
        height: auto;
        gap: 4vw;
        padding: 6vw 0;
        margin-bottom: 14vw;
    }

    #shop_list .dealer .text_2 {
        font-size: clamp(12px, 3vw, 20px);
    }

    #shop_list .dealer img {
        width: 92%;
    }
}

#shop_list .shop_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0px, 9.8vw, 100px);
}

#shop_list .shop_item {
    width: 100%;
}

#shop_list .shop_item .shop_name_area {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(0px, 12.7vw, 130px) clamp(0px, 2.4vw, 25px);
    margin-bottom: clamp(0px, 5.4vw, 55px);
}

#shop_list .shop_item .shop_name_area::before,
#shop_list .shop_item .shop_name_area::after {
    content: "";
    height: clamp(0px, 0.7vw, 7px);
    position: absolute;
    bottom: 0;
    left: 0;
}
#shop_list .shop_item .shop_name_area::before {
    width: clamp(0px, 36.1vw, 370px);
    background-color: #aaa;
    z-index: 2;
}
#shop_list .shop_item .shop_name_area::after {
    width: 100%;
    background-color: #dcdcdc;
    z-index: 1;
}

#shop_list .shop_item .shop_name {
    width: auto;
    margin: 0;
    font-size: clamp(0px, 2.9vw, 30px);
    font-weight: 500;
    letter-spacing: 0.05em;
}

#shop_list .shop_data {
    width: clamp(0px, 74.6vw, 764px);
    margin: 0 auto;
}

#shop_list .shop_name_list {
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.9vw, 30px);
}

#shop_list .shop_name_list:not(:first-of-type) {
    margin-top: clamp(0px, 2.9vw, 30px);
}

#shop_list .shop_name_list li {
    font-size: clamp(0px, 2.9vw, 30px);
    font-weight: bold;
    letter-spacing: 0.05em;
    min-width: 7.5em;
    position: relative;
}

#shop_list .shop_name_list li a {
    width: 100%;
    min-height: clamp(0px, 8.8vw, 90px);
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0px, 2vw, 20px);
    padding: clamp(0px, 1vw, 10px) clamp(0px, 2.4vw, 25px);
    color: #1a3a63;
    background-color: #dcdcdc;
    transition: background-color 0.3s;
}

#shop_list .shop_name_list li a:hover,
#shop_list .shop_name_list li a:focus-visible {
    background-color: #d8c443;
}

#shop_list .shop_name_list .brand_logo {
    width: clamp(0px, 11.7vw, 120px);
    object-fit: contain;
    flex-shrink: 0;
}

#shop_list .shop_name_list li a::before,
#shop_list .shop_name_list li a::after {
    content: "";
    box-sizing: border-box;
    width: clamp(0px, 4.1vw, 42px);
	aspect-ratio: 1 / 1;
    transition: background-color 0.3s;
}

#shop_list .shop_name_list li a::before {
    position: absolute;
    top: 50%;
    right: clamp(0px, 2.4vw, 25px);
    transform: translateY(-50%);
    border: 2px solid #1a3a63;
    border-radius: 50%;
    background-color: #1a3a63;
}

#shop_list .shop_name_list li a::after {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    background-color: #fff;
    -webkit-mask: url("../img/arrow_link.svg") no-repeat center center / contain;
    mask: url("../img/arrow_link.svg") no-repeat center center / contain;
}

#shop_list .shop_name_list li a:hover::before,
#shop_list .shop_name_list li a:focus-visible::before {
    background-color: transparent;
}

#shop_list .shop_name_list li a:hover::after,
#shop_list .shop_name_list li a:focus-visible::after {
    background-color: #1a3a63;
}

#shop_list .renewal_link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0px, 2vw, 20px);
    width: clamp(0px, 47.9vw, 490px);
    padding: clamp(0px, 1vw, 10px);
    color: #fff;
    background-color: #b90000;
    font-family: var(--ff-en);
    font-size: clamp(0px, 3.3vw, 34px);
    font-weight: 800;
    letter-spacing: 0.08em;
}

#shop_list .renewal_link span {
	width: clamp(0px, 4.1vw, 42px);
	aspect-ratio: 1 / 1;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
	background: url("../img/arrow_link.svg") no-repeat center center / cover;
}

#shop_list .shop_name_list + .add {
    padding-top: clamp(0px, 5.9vw, 60px);
}

#shop_list .add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0px, 2vw, 20px);
}

#shop_list .add .text_3 {
    font-size: clamp(0px, 1.9vw, 19px);
    letter-spacing: 0.1em;
}

#shop_list .add .text_4 {
    display: flex;
	flex-wrap: wrap;
    gap: clamp(0px, 2vw, 20px) clamp(0px, 3.9vw, 40px);
}

#shop_list .add .text_4 p {
    font-size: clamp(0px, 1.9vw, 19px);
	line-height: 1.3em;
    display: flex;
    align-items: center;
    gap: clamp(0px, 2vw, 20px);
}

#shop_list .add .text_4 p span {
    width: clamp(0px, 10.7vw, 110px);
    aspect-ratio: 110 / 30;
    color: #000;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 1.6vw, 16px);
    letter-spacing: 0.1em;
    padding-left: 0.1em;
}

#shop_list .add .map_link {
    width: clamp(0px, 19.5vw, 200px);
    font-size: clamp(0px, 1.6vw, 16px);
    letter-spacing: 0.05em;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 0.5em;
    padding-left: clamp(0px, 4.3vw, 44px);
    position: relative;
    transition: border 0.3s, opacity 0.3s;
}

#shop_list .add .map_link:hover {
    border-bottom: 1px solid #fff;
    opacity: 0.7;
}

#shop_list .add .map_link::before {
    content: "";
    width: clamp(0px, 2.9vw, 30px);
    aspect-ratio: 30 / 20;
    background: url("../img/shop_link_arrow.svg") no-repeat center center / contain;
    filter: brightness(0) invert(1);
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 768px) {
    #shop_list .shop_list {
        gap: 16vw;
    }

    #shop_list .shop_item .shop_name_area {
        flex-wrap: wrap;
        gap: 4vw;
        padding: 0 5% 4vw;
        margin-bottom: 7vw;
    }

    #shop_list .shop_item .shop_name_area::before,
    #shop_list .shop_item .shop_name_area::after {
        height: 0.9vw;
    }

    #shop_list .shop_item .shop_name_area::before {
        width: 40%;
    }

    #shop_list .shop_item .shop_name {
        width: auto;
        font-size: clamp(18px, 4.8vw, 32px);
    }

    #shop_list .shop_data {
        width: 90%;
    }

    #shop_list .shop_name_list,
    #shop_list .shop_name_list:not(:first-of-type) {
        gap: 3vw;
        margin-top: 3vw;
    }

    #shop_list .shop_name_list:first-of-type {
        margin-top: 0;
    }

    #shop_list .shop_name_list + .add {
        padding-top: 7vw;
    }

    #shop_list .add {
        gap: 4vw;
    }

    #shop_list .add .text_3 {
        font-size: clamp(12px, 3.3vw, 22px);
        line-height: 1.8;
        letter-spacing: 0.04em;
    }

    #shop_list .add .text_4 {
        width: 100%;
        flex-direction: column;
        gap: 3vw;
    }

    #shop_list .add .text_4 p {
        font-size: clamp(12px, 3.2vw, 22px);
        line-height: 1.7;
        align-items: flex-start;
        gap: 3vw;
    }

    #shop_list .add .text_4 p span {
        width: 5.5em;
        min-height: 1.8em;
        aspect-ratio: auto;
        flex-shrink: 0;
        font-size: clamp(11px, 2.8vw, 18px);
    }

    #shop_list .add .map_link {
        width: auto;
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: clamp(13px, 3.4vw, 23px);
        padding: 0 0 0 7vw;
    }

    #shop_list .add .map_link::before {
        width: 5vw;
        top: 50%;
        transform: translateY(-50%);
    }
}


@media (max-width: 768px) {
    #shop_list .shop_name_list li {
        font-size: clamp(13px, 3.6vw, 25px);
        letter-spacing: 0;
    }

    #shop_list .shop_name_list li a {
        min-height: 56px;
        padding: 3vw;
        gap: 3vw;
    }

    #shop_list .shop_name_list .brand_logo {
        width: 15vw;
        height: 10vw;
        max-height: 64px;
    }

    #shop_list .shop_name_list li a > span {
        min-width: 0;
        line-height: 1.5;
    }

    #shop_list .shop_name_list li a::before,
    #shop_list .shop_name_list li a::after {
        width: clamp(22px, 6vw, 40px);
        height: auto;
    }

    #shop_list .shop_name_list li a::before {
        right: 3vw;
    }

    #shop_list .renewal_link {
        width: 100%;
        min-height: 44px;
        padding: 2vw 4vw;
        gap: 4vw;
        font-size: clamp(20px, 5vw, 34px);
    }

    #shop_list .renewal_link span {
        width: clamp(24px, 6vw, 40px);
        flex-shrink: 0;
    }
}


/* ===============================================
   footer
=============================================== */
#footer {
	width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.footer_inner {
    width: clamp(0px, 100vw, 1024px);
    height: clamp(0px, 14.6vw, 150px);
    background: url("../img/footer_bg.jpg") no-repeat center top / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright {
	font-size: clamp(0px, 1.2vw, 12px);
    color: #fff;
}

@media (max-width: 768px) {
    .footer_inner {
        width: 100%;
        height: 24vw;
        min-height: 90px;
    }

    .copyright {
        font-size: clamp(10px, 2.5vw, 16px);
    }
}


/* ===============================================
   page top
=============================================== */
#page_top{
    width: 90px;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    z-index: 999;
}

#page_top a{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    text-decoration: none;
}

#page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -40px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

#page_top a::after{
    content: 'PAGE TOP';
    font-size: 13px;
    position: absolute;
    top: 45px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    color: #fff;
}

@media (max-width: 768px) {
    #page_top {
        width: 14vw;
        height: 14vw;
    }

    #page_top a {
        width: 14vw;
        height: 14vw;
    }

    #page_top a::before {
        font-size: 5.3vw;
        width: 100%;
        height: 100%;
        top: 2vw;
    }

    #page_top a::after{
        font-size: 2.5vw;
        top: 7.5vw;
    }
}


/* ===============================================
   animation
=============================================== */
.js_fadeup {
    opacity: 0;
    transform: translateY(5vh);
    transition: opacity 1.5s, transform 1.5s;
}

.js_fadeup.is_visible {
    opacity: 1;
    transform: translateY(0);
}

.js_fadein {
    opacity: 0;
    transform: scale(.8);
    transition: all 1s ease .2s;
}

.js_fadein.is_visible {
    opacity: 1;
    transform: scale(1);
}

.delay_0_1 { transition-delay: 0.1s; }
.delay_0_2 { transition-delay: 0.2s; }
.delay_0_3 { transition-delay: 0.3s; }
.delay_0_4 { transition-delay: 0.4s; }
.delay_0_5 { transition-delay: 0.5s; }
.delay_0_6 { transition-delay: 0.6s; }
.delay_0_7 { transition-delay: 0.7s; }
.delay_0_8 { transition-delay: 0.8s; }
.delay_0_9 { transition-delay: 0.9s; }
.delay_1 { transition-delay: 1s; }
.delay_1_2 { transition-delay: 1.2s; }
.delay_1_5 { transition-delay: 1.5s; }

@media (max-width: 767px) {
    .delay_0_1,
    .delay_0_2,
    .delay_0_3,
    .delay_0_4,
    .delay_0_5,
    .delay_0_6,
    .delay_0_7,
    .delay_0_8,
    .delay_0_9,
    .delay_1,
    .delay_1_2,
    .delay_1_5 {
        transition-delay: 0;
    }
}