@charset "utf-8";

html {
scroll-behavior: smooth;
}

body {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "sans-serif";
font-weight: 700;
font-style: normal;
}

section {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.innerBox {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.innerBox-wide {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.innerBox-widemax {
width: 100%;
margin: 0 auto;
}

.pc_show{display: block;}
.pc_none{display: none;}

.sp-br{display: none;}

em{font-style: normal;}
.font--famNum{font-family: "Noto Sans", sans-serif;}
.font--color-white{color: #fff;}
.font--color-kon{color: #020D38;}
.font--color-red{color: #C9171E;}
.font--bold{font-weight: bold !important;}

.font-fam-yuG{
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "sans-serif";
font-weight: 400;
font-style: normal;
}
.font-fam-HGSMinchoE{
font-family: "HGSMinchoE";
font-weight: 400;
font-style: normal;
}
.font-fam-ZenMaruG{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
.font-fam-ZenMaruG.--bold{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
}

.line-block{display: block !important;}

.em-dot{
position: relative;
&::before,
&::after{
content: "";
display: block;
width: 0.4rem;
height: 0.4rem;
background: #020D38;
border-radius: 100%;
position: absolute;
bottom: 2.5rem;
}
&::before{
left: 0.8rem;
}
&::after{
right: 0.8rem;
}
}

.dot-underline{
text-decoration: underline; /*styleとまとめての指定だとsafariで有効にならない*/
text-decoration-style: dotted;
text-underline-offset: 4px;
}

.marker{
display: inline-block;
line-height: 1;
}
.marker--blue{
background: linear-gradient(transparent 50%, #A2D4ED 50%);
}
.marker--kon{
background: #09196B;
}
.marker--nami-first{
height: 54px;
background: url(../images/line-point1.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.marker--nami-second{
height: 54px;
background: url(../images/line-point2.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.marker--nami-third{
height: 54px;
background: url(../images/line-point3.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

.line-grid{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 24px;
justify-content: center;
align-items: end;
}
.line-grid-center{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 24px;
justify-content: center;
align-items: center;
}
.line-naname::before,
.line-naname::after{
content: "";
display: inline-block;
width: 2px;
height: 45px;
background: #020D38;
border-radius: 1px / 22px;
}
.line-naname::before{
transform: rotate(-30deg);
}
.line-naname::after{
transform: rotate(30deg);
}


/* header */
header{
margin: 0 auto;
padding: 20px 0;
background: #C9171E;
color: #fff;
position: relative;
z-index: 1000;
@media screen and (min-width: 768px) and (max-width: 1024px) {
width: 100%;
height: 60px;
padding: 10px 0;
position: fixed;
}
@media screen and (max-width: 767px) {
width: 100%;
height: 60px;
padding: 10px 0;
position: fixed;
}
.innerBoxH{
display: grid;
grid-template-columns: auto auto;
column-gap: 80px;
justify-content: start;
align-items: end;
padding-left: 20px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
column-gap: normal;
justify-content: space-between;
padding-right: 10px;
}
@media screen and (max-width: 767px) {
column-gap: normal;
justify-content: space-between;
padding-right: 10px;
}
nav{
margin-bottom: 10px;
font-family: "poppins", sans-serif;
@media screen and (min-width: 768px) and (max-width: 1024px) {
&#navArea{
transform: translateX(100%);
pointer-events: none;
transition: transform 0.7s ease;
background: #fff;
position: fixed;
top: 0;
right: 0;
width: 400px;
height: 100vh;
z-index: 1000;
&.active {
transform: translateX(0);
pointer-events: auto;
transition: transform 1.0s ease;
overflow-x: scroll;
}
.buttonList{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 32px;
justify-content: center;
align-items: center;
&.--banner{
li{
margin-bottom: 24px;
a{
display: block;
padding: 0;
border: none;
box-shadow: none;
img{
width: 100%;
}
}
}
}
li{
margin-bottom: 24px;
a{
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
justify-content: start;
align-items: center;
width: 80%;
margin: 0 auto;
padding: 8px 16px;
box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
border: 3px solid hwb(47 1% 78%);
border-radius: 100px;
color: #020D38;
line-height: 1;
img{
width: 80px;
}
.button{
font-weight: bold;
letter-spacing: 0;
.--catch{
color: #53854A;
font-size: 14px;
}
.--title{
font-size: 24px;
margin: 4px auto;
}
.--info{
font-size: 14px;
font-weight: 600;
}
}
}
}
}
}
}
@media screen and (max-width: 767px) {
&#navArea{
transform: translateX(100%);
pointer-events: none;
transition: transform 0.7s ease;
background: #fff;
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100vh;
z-index: 1000;
&.active {
transform: translateX(0);
pointer-events: auto;
transition: transform 1.0s ease;
}
.buttonList{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 32px;
justify-content: center;
align-items: center;
&.--banner{
li{
margin-bottom: 24px;
a{
display: block;
padding: 0;
border: none;
box-shadow: none;
img{
width: 100%;
}
}
}
}
li{
margin-bottom: 24px;
a{
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
justify-content: start;
align-items: center;
width: 80%;
margin: 0 auto;
padding: 8px 16px;
box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
border: 3px solid hwb(47 1% 78%);
border-radius: 100px;
color: #020D38;
line-height: 1;
img{
width: 40px;
}
.button{
font-weight: bold;
letter-spacing: 0;
.--catch{
color: #53854A;
font-size: 18px;
}
.--title{
font-size: 20px;
margin: 4px auto;
}
.--info{
font-size: 12px;
font-weight: 600;
}
}
}
}
}
}
}
.menuArea{
display: grid;
grid-template-columns: repeat(6, auto);
column-gap: 20px;
justify-content: center;
align-items: center;
@media screen and (min-width: 768px) and (max-width: 1024px) {
grid-template-columns: none;
grid-template-rows: repeat(6, auto);
gap: 20px 0;
justify-content: space-between;
margin: 80px auto 40px;
padding: 0 24px;
}
@media screen and (max-width: 767px) {
grid-template-columns: none;
grid-template-rows: repeat(6, auto);
gap: 20px 0;
justify-content: space-between;
margin: 80px auto 40px;
padding: 0 24px;
}
a,
a:link{
color: #fff;
font-weight: bold;
@media screen and (min-width: 768px) and (max-width: 1024px) {
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: start;
align-items: center;
color: #020D38;
&::before{
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: #5462AC;
border-radius: 50%;
}
}
@media screen and (max-width: 767px) {
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: start;
align-items: center;
color: #020D38;
&::before{
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: #5462AC;
border-radius: 50%;
}
}
}
a:hover{
opacity: 0.33;
}
}
}
.logoArea{
img{
max-width: 169px;
width: 100%;
@media screen and (min-width: 768px) and (max-width: 1024px) {
max-width: 100px;
width: 100%;
}
@media screen and (max-width: 767px) {
max-width: 108px;
width: 100%;
}
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.hamburger {
background: none;
border: none;
cursor: pointer;
padding: 10px;
span{
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
font-size: 12px;
&.menu--icon{
display: block;
height: 4px;
width: 40px;
background: #fff;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
position: relative;
bottom: 15px;
&::before,
&::after {
content: "";
display: block;
height: 100%;
width: 100%;
background: #fff;
position: absolute;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}        
&::before {
top: 9px;
}        
&::after {
bottom: 9px;
}        
}
&.menu--name{
position: absolute;
bottom: 5px;
right: 22px;
color: #fff;
.menu--open{
display: block;
}
.menu--close{
display: none;
}
}
}
&.active{
z-index: 1100;
span{
background: transparent !important;
transition: transform 0.3s ease, opacity 0.3s ease;
&.menu--icon{
bottom: 5px;
&::before,
&::after{
content: "";
display: block;
background: #020D38;
position: absolute;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
&::before{
transform: translateY(9px) rotate(45deg);
top: -14px;
}
&::after{
transform: translateY(-9px) rotate(-45deg);
bottom: -4px;
}
}
&.menu--name{
position: absolute;
bottom: -5px;
right: 20px;
color: #020D38;
.menu--open{
display: none;
}
.menu--close{
display: block;
}
}
}          
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 998;
&.active {
opacity: 1;
visibility: visible;
}
}
#navArea {
position: fixed;
z-index: 999;
}
}
@media screen and (max-width: 767px) {
.hamburger {
background: none;
border: none;
cursor: pointer;
padding: 10px;
span{
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
font-size: 12px;
&.menu--icon{
display: block;
height: 4px;
width: 40px;
background: #fff;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
position: relative;
bottom: 15px;
&::before,
&::after {
content: "";
display: block;
height: 100%;
width: 100%;
background: #fff;
position: absolute;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}        
&::before {
top: 9px;
}        
&::after {
bottom: 9px;
}        
}
&.menu--name{
position: absolute;
bottom: 5px;
right: 22px;
color: #fff;
.menu--open{
display: block;
}
.menu--close{
display: none;
}
}
}
&.active{
z-index: 1100;
span{
background: transparent !important;
transition: transform 0.3s ease, opacity 0.3s ease;
&.menu--icon{
bottom: 5px;
&::before,
&::after{
content: "";
display: block;
background: #020D38;
position: absolute;
transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
&::before{
transform: translateY(9px) rotate(45deg);
top: -14px;
}
&::after{
transform: translateY(-9px) rotate(-45deg);
bottom: -4px;
}
}
&.menu--name{
position: absolute;
bottom: -5px;
right: 20px;
color: #020D38;
.menu--open{
display: none;
}
.menu--close{
display: block;
}
}
}          
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 998;
&.active {
opacity: 1;
visibility: visible;
}
}
#navArea {
position: fixed;
z-index: 999;
}
}
}
.contactArea{
position: absolute;
right: 0;
bottom: 0;
font-size: 18px;
font-weight: bold;
a,
a:link{
color: #fff;
}
a:visited{
color: #fff;
}
.tellArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: start;
align-items: center;
padding: 0 0 5px;
em{
font-style: normal;
}
small{
font-size: 10px;
}
}
.mailArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: center;
align-items: center;
padding: 15px 10px;
background: #FFF83A;
.bubble{
position: relative;
display: inline-block;
margin-right: 8px;
padding: 5px;
background: #464E53;
border-radius: 8px;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #464E53;
translate: 100% -50%;
}
small{
font-size: 10px;
&.icon{
&.--mail{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: center;
align-items: center;
font-size: 14px;
&::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(../images/header_icom_mail.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
}
}
}
}

/* FirstVew */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hero__inner{
    padding-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  .hero__inner{
    padding-top: 60px;
  }
}

/* 1000円プレゼント */
:root{
--ink: #0a2758;
--accent: #e5391d;
--ring: #e5f0ff;
}

.celebration{
position: relative;
isolation: isolate;
overflow: hidden;
background: #fff;
padding: clamp(62px, 6vw, 72px) 0;
&.--no-arrow{
&::after{
display: none !important;
}
}
/* 紙吹雪(全面背景) */
.celebration__bg{
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.celebration__bg img{
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.celebration__inner img{
width: 80%;
margin: 0 auto;
@media screen and (max-width: 767px;) {
width: 100%;
}
}
}


/* CTA */
.cta{
font-family: "poppins", sans-serif;
font-weight: 400;
font-style: normal;
margin: 60px auto 80px;
position: relative;
&::before{
content: "";
display: block;
width: 40px;
height: 35px;
margin: 0 auto;
background: url(../images/arrow_blue.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -60px;
left: calc(50% - 20px);
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 40px;
    height: 35px;
}
@media screen and (max-width: 767px) {
    width: 40px;
    height: 35px;
}
}
}
.cta h2{
font-size: clamp(1.5rem, 1.484rem + 0.07vw, 1.563rem);
text-align: center;
margin: 0 auto 40px;
@media screen and (max-width: 767px) {
font-size: 1.3rem;
}
.--text-small{
font-size: clamp(1.125rem, 1.093rem + 0.13vw, 1.25rem);
@media screen and (max-width: 767px) {
font-size: 1.125rem;
}
}
}
.cambuttonList{
display: grid;
grid-template-columns: repeat(2, 340px);
column-gap: 20px;
justify-content: center;
align-items: center;
@media screen and (max-width: 767px) {
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 32px;
height: auto;
}
li{
.telWrap,
.mailWrap{
display: grid;
grid-template-columns: auto auto;
column-gap: 15px;
justify-content: start;
align-items: center;
padding: 8px 16px;
box-shadow: 0px 10px 10px -6px rgba(192, 197, 205, 40);
border: 3px solid #020D38;
border-radius: 100px;
color: #020D38;
line-height: 1;
@media screen and (min-width: 768px) and (max-width: 1024px) {
height: auto;
max-height: auto;
padding: 16px;
}
@media screen and (max-width: 767px) {
column-gap: 8px;
width: auto;
padding: 16px 24px;
}
img{
width: 80px;
}
.button{
font-weight: bold;
letter-spacing: 0;
&.--tel{
display: grid;
grid-template-rows: auto auto auto;
row-gap: 4px;
justify-content: center;
align-items: center;
}
.--catch{
color: #53854A;
font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
}
.--catch strong{
font-size: clamp(1.125rem, 1.093rem + 0.13vw, 1.25rem);
}
.--title{
font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
}
.--info{
font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
font-weight: normal;
}
}
}
.mailWrap{
&:hover{
transform: translateY(4px);
box-shadow: none;
@media screen and (min-width: 768px) and (max-width: 1024px) {
transform: none;
box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
}
@media screen and (max-width: 767px) {
transform: none;
box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
}
}
}
}
}


/* 買取例 */
.cards-slider__btn{ display:none; }

.results{
color: #020D38;
background: linear-gradient(180deg,#ffffff,#CCF7FF);
padding: clamp(24px, 4vw, 48px) 0 40px;
.innerBox{
max-width: 1200px;
width: 100%;
}
}

.results *{ box-sizing: border-box; }
.results ol,
.results ul{ margin:0; padding:0; list-style:none; }


/* ================================
ヘッダー
================================ */
.results__head{
display: grid;
grid-template-columns: auto auto;
column-gap: 40px;
justify-content: center;
align-items: center;
max-width: 880px;
margin: 0 auto 40px;
color: #09196B;
@media screen and (max-width: 767px) {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: auto auto;
    row-gap: 30px;
    justify-items: center;
    margin: 0 auto 40px;
}
h2{
font-size: 1.3rem;
@media screen and (max-width: 767px) {
    text-align: center;
}
em{
font-size: 2rem;
}
@media screen and (max-width: 767px) {
    .line-first{
        margin: 0 auto 20px;
    }
}
}
}


.results__lead{
font-size: clamp(18px, 2.4vw, 28px);
line-height: 1.6;
margin: 0;
letter-spacing: .02em;
color: #020D38;
}
.results__lead strong{ color: #C9171E; }
.results__lead span{ white-space: nowrap; }

.results__top p{
font-size: 1.5rem;
}
.results__sub{
margin: 6px 0 0;
}
.results__lead strong{
color: #09196B;
font-size: 2.5rem;
@media screen and (max-width: 767px) {
font-size: 2rem;    
}
}
.results__sub strong{
color: #C9171E;
font-size: 2.5rem;
}

/* ================================
タブ風ナビ
================================ */
.results__tabs{
margin-top: clamp(12px, 2vw, 18px);
margin: 0 auto;
text-align: center;
}
.results__tabs .tabs{
display: inline-flex;
gap: 10px;
flex-direction: row;
@media screen and (max-width: 767px) {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 20px;
    justify-content: center;
    justify-items: center;
}
}
.results__tabs .tabs li{
padding: 8px 14px;
background: #09196B;
color: #ffffff;
font-size: clamp(1rem, 0.968rem + 0.13vw, 1.125rem);
letter-spacing: .02em;
box-shadow: 0 2px 0 rgba(2,13,56,.15);
}
.results__tabs .tabs li:nth-child(1){
grid-row: 1;
grid-column: 1;
}
.results__tabs .tabs li:nth-child(2){
grid-row: 1;
grid-column: 2;
}
.results__tabs .tabs li:nth-child(3){
grid-row: 2;
grid-column: span 2;
}

/* ================================
カードグリッド
================================ */
.cards-slider{
max-width: 1660px;
width: 100%;
margin: 50px auto;
}
.card-grid{
display: grid;
grid-template-columns: repeat(5, auto);
gap: 22px 10px;
}

.card{
background: #ffffff;
border: 2px solid #44A8DA;
border-radius: 12px;
box-shadow: 0 6px 14px rgba(68,168,218,.18);
padding: 14px;
display: grid;
grid-template-rows: auto 1fr;
}

.card__media{
margin: 0;
border-radius: 8px;
overflow: hidden;
background: #f6fbff;
display: grid;
place-items: center;
}
.card__media img{
width: 100%;
height: auto;
object-fit: cover;
}

.card__body{
margin-top: 10px;
display: grid;
gap: 8px;
}

.card__brand{
margin: 0;
font-weight: 700;
line-height: 1.35;
letter-spacing: .02em;
color: #020D38;
}
.card__brand .en{
font-size: 13px;
letter-spacing: .06em;
}
.card__brand .ja{
/*display: block;*/
font-size: 14px;
font-weight: 700;
}

.card__desc{
margin: 0;
color: #020D38;
font-size: 13px;
line-height: 1.5;
padding-bottom: 10px;
border-bottom: 2px dotted #44A8DA;
}

.card__price{
margin-top: 10px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.card__price .badge{
display: inline-block;
background: #44A8DA;
color: #ffffff;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: .03em;
}
.card__price .price{
font-size: 18px;
color: #020D38;
font-weight: 700;
}
.card__price .price data{
font: inherit;
font-size: 1.5rem;
color: #44A8DA;
}

/* ================================
備考
================================ */
.results__note{
max-width: min(1180px, 94vw);
margin: 18px auto 0;
}
.results__note .note{
font-size: 0.75rem;
color: #09196B;
line-height: 1.8;
text-align: left;
}


@media (max-width: 680px){
.results__top{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.results__tabs .tabs{
flex-direction: column;
align-items: stretch; /* 幅いっぱいに伸ばしたい場合 */
}

/* ---------- スマホでスライダー化（<= 680px） ---------- */
.cards-slider{
position: relative;
margin: 0 auto;
}

/* 横スクロールのスナップ */
.cards-slider .card-grid{
display: flex;                 /* ← grid から flex に切替 */
overflow-x: auto;
gap: 12px;
padding: 0 40px;               /* 矢印分の内側余白 */
scroll-snap-type: x mandatory; /* スナップ */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.cards-slider .card-grid::-webkit-scrollbar{ display:none; }

/* 各カードはビューポートに収まる幅で連続表示 */
.cards-slider .card{
flex: 0 0 86%;                 /* 1枚ずつ見せる幅（お好みで調整） */
scroll-snap-align: start;
}

/* 矢印ボタン */
.cards-slider__btn{
display: grid;
place-items: center;
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 9999px;
border: none;
background: #09196B;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
box-shadow: 0 4px 12px rgba(2,13,56,.20);
z-index: 5;
}
.cards-slider__btn--prev{ left: 6px; }
.cards-slider__btn--next{ right: 6px; }

/* ドット */
.cards-slider__dots{
display: flex;
justify-content: center;
gap: 6px;
margin: 10px 0 0;
}
.cards-slider__dots button{
width: 6px;
height: 6px;
border: none;
border-radius: 999px;
background: #C9D6E4;
}
.cards-slider__dots button[aria-current="true"]{
background: #09196B;
}
}

/* 総合満足度 */
.no1{
margin: 120px auto !important;
padding: 60px 16px;
@media screen and (max-width: 767px) {
margin: 80px auto !important;
padding: 40px 16px;
}
}
.no1 img{
width: 80%;
margin: 0 auto;
@media screen and (max-width: 767px) {
    width: 100%;
}
}
.no1 picture{
position: relative;
}
.no1 picture::before,
.no1 picture::after{
content: "";
display: block;
background-image: url(../images/sousyoku_6.webp);
width: 300px;
height: 29px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: calc(50% - 150px);
}
.no1 picture::before{
transform: rotate(180deg);
bottom: -100px;
@media screen and (max-width: 767px) {
bottom: -60px;
}
}
.no1 picture::after{
transform: rotate(360deg);
top: -100px;
@media screen and (max-width: 767px) {
top: -60px;
}
}

/* お任せください！ */
#concerns-and-solution{
color: #020D38;
padding: 56px 16px 64px;
}

.concerns img{
margin: 0 auto;
}

/* 矢印アイコン：テキストを隠して背景画像に */
.solution__chevrons{
margin: 0 auto 12px;
width: 35px;
height: 30px;
background: url("../images/arrow_brown.svg") no-repeat center/contain;
font-size: 0;    /* テキストは非表示 */
}

/* タイトル左右の星アイコン */
.solution__title::before,
.solution__title::after{
content: "";
display: inline-block;
width: 42px;
height: 42px;
background: url("../images/kirakira.webp") no-repeat center/contain;
vertical-align: middle;
margin: 0 8px;
}
.solution__title::before{
transform: rotate(-90deg);
}


/* ---------- 下段：解決メッセージ ---------- */
.solution{
text-align: center;
margin-top: 8px;
}

.solution__title{
margin: 0 0 18px;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
font-family: Roboto, sans-serif;
letter-spacing: .08em;
color: #020D38;
position: relative;
}


/* 強調行（青ハイライトの帯） */
.solution__lines{
margin: 0 auto;
font-family: Roboto, sans-serif;
font-weight: 700;
font-size: 1.6rem;
line-height: 2;
@media screen and (max-width: 767px) {
font-size: 1.12rem;
}
color: #020D38;
em{
font-size: 2rem;
@media screen and (max-width: 767px) {
font-size: 1.4rem;
}
}
}

/* ================================
SPレイアウト（～680px）
================================ */
@media (max-width: 680px){
#concerns-and-solution{
padding: 40px 0 56px;
}
}


/* ブランド */
/* ================================
Brand TOP10
================================ */
#brand-topArea{
color: #020D38;
padding: 64px 0 56px;
}

#brand-topArea *{ box-sizing: border-box; }

/* ---------- ヘッダー ---------- */
.brand-top10__head{
max-width: min(1180px, 92vw);
margin: 0 auto 32px;
text-align: center;
position: relative;
padding-top: 78px; /* 上の装飾分の余白 */
}

/* 一番上の装飾：背景画像 */
.brand-top10__head::before{
content: "";
width: 206px;
height: 33px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
background: url("../images/sousyoku_2.svg") no-repeat center/contain;
}

/* 見出し */
.brand-top10__lead{
margin: 0 0 10px;
letter-spacing: .08em;
font-size: clamp(1.75rem, 1.718rem + 0.13vw, 1.875rem);
font-weight: bold;
}
.brand-top10__title{
position: relative;
margin: 0;
font-weight: 700;
letter-spacing: .25em;
font-size: clamp(1.75rem, 1.718rem + 0.13vw, 1.875rem);
display: inline-block;
padding: 0 .5em;
}
/* 左右のキラキラ星（画像） */
.brand-top10__title::before,
.brand-top10__title::after{
content: "";
display: inline-block;
width: 35px;
height: 33px;
background: url("../images/kirakira2.webp") no-repeat center/contain;
vertical-align: middle;
margin: 0 .45em;
}
.brand-top10__title::before{
transform: rotate(-90deg);
}

/* ---------- 上段：上位3ブランド ---------- */
.brand-top10__featured{
max-width: min(1180px, 92vw);
margin: 18px auto 26px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.brand-card{
background: #FFFFFF;
border-radius: 12px;
/* 角丸ドット枠風 */
border: 2px dashed #CDD1E2;
box-shadow: 0 6px 10px rgba(2,13,56,.06);
padding: 18px 20px;
text-align: center;
}

/* ロゴ行：左に順位バッジ / 右にロゴ */
.brand-card__logo{
display: grid;
grid-template-columns: 80px auto;
align-items: center;
justify-items: center;
gap: 5px;
}

.brand-card__name-ja{
margin: 0;
font-size: 14px;
color: #020D38;
}

.brand-card--gold   { border-color: #CDD1E2; }
.brand-card--green  { border-color: #CDD1E2; }
.brand-card--bronze { border-color: #CDD1E2; }

/* ---------- 下段：その他7ブランド ---------- */
.brand-top10__list{
max-width: min(1180px, 92vw);
margin: 6px auto 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 18px;
}
.brand-logo{
background: #FFFFFF;
border-radius: 12px;
border: 2px dashed #CDD1E2;
box-shadow: 0 5px 10px rgba(2,13,56,.05);
padding: 16px 8px;
display: grid;
place-items: center;
}

/* ロゴ画像は親幅に合わせて安全に縮小 */
.brand-card__logo img{
width: 80px;
}
.brand-card__logo-img img{
width: 260px;
margin-bottom: 5px;
}

/* ================================
レスポンシブ
================================ */
@media (max-width: 1024px){
.brand-top10__featured{
grid-template-columns: 1fr 1fr;
}
.brand-top10__list{
grid-template-columns: repeat(5, 1fr);
}
}

@media (max-width: 680px){
#brand-topArea{
padding: 40px 0 48px;
}

.brand-top10__head{
padding-top: 60px;
margin-bottom: 18px;
}
.brand-top10__head::before{
width: 180px;
height: 33px;
}
.brand-top10__title::before,
.brand-top10__title::after{
width: 20px;
height: 20px;
margin: 0 .35em;
}

/* 上位3つ＝縦並び */
.brand-top10__featured{
grid-template-columns: 1fr;
gap: 12px;
}
.brand-card{
padding: 14px 14px;
}
.brand-card__logo{
grid-template-columns: 90px 1fr;
gap: 8px;
img{
margin: 0 auto 10px;
&.brand-card__logo-num{
width: 80px;
margin: 0 auto;
}
}
}
.brand-card__name-ja{
font-size: 14px;
}

/* 残り7ロゴ：4列→3列に */
.brand-top10__list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
/*grid-template-columns: repeat(4, 1fr);
gap: 12px;*/
}
.brand-logo{
width: calc(100% / 5);
padding: 12px 6px;
}
}


/* 4つのポイント */
.reasons__wrap{
content: "";
display: block;
width: 100%;
color: #020D38;
background: url(../images/bg_anshin.webp);
background-position: 0 bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 56px 0 72px;
}
#reasons *{ box-sizing: border-box; }

/* ---- セクション見出し ---- */
.reasons__head{
margin: 0 auto 24px;
text-align: center;
position: relative;
padding-top: 70px;
@media screen and (max-width: 767px) {
    padding-top: 60px;
}
}
.reasons__head::before{
content:"";
width: 206px;
height: 33px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
background: url("../images/sousyoku_2.svg") no-repeat center/contain;
@media screen and (max-width: 767px) {
    width: 180px;
    height: 33px;
}
}
.reasons__title{
display: inline-block;
margin: 6px 0 0;
font-weight: 700;
line-height: 1.4;
letter-spacing: .06em;
font-size: clamp(22px, 3.4vw, 30px);
position: relative;
@media screen and (max-width: 767px) {
font-size: 1.7rem;
}
span{
display:inline-block;
&:nth-child(1){
@media screen and (max-width: 767px) {
font-size: 1.4rem;
}
}
&.reasons__lead{
margin: 0;
font-size: 16px;
letter-spacing: .2em;
color: #09196B;
position: absolute;
bottom: 75px;
left: 1.5rem;
@media screen and (max-width: 767px) {
font-size: .95rem;
left: 0.7rem !important;
bottom: 4rem !important;
}
}
}
.--line-block{
display: block;
}
}

/* ---- カード 4枚 ---- */
.reasons__list{
margin: 10px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
justify-content: space-between;
align-items: stretch;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    grid-template-columns: repeat(2, auto);
    width: 90%;
}
@media screen and (max-width: 767px) {
    grid-template-columns: repeat(1, auto);
    width: 90%;
    max-width: 90%;
}
}
.reason{
background: #FFFFFF;
border: 2px solid #D9EAF6;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(68,168,218,.18);
padding: 20px 8px;
font-family: Roboto, sans-serif;
}
.reason__title{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 6px;
justify-content: center;
align-items: center;
margin-bottom: 20px;
color: #09196B;
font-family: "HGSMinchoE";
font-weight: normal;
font-size: 1.2rem;
text-align: center;
}
.reason__title::before{
content:"";
display: inline-block;
background-image: url(../images/sousyoku_3.svg);
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 14px;
}
.reason__title::after{
content:""; 
display: inline-block;
background-image: url(../images/sousyoku_5.svg);
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 14px;
}
.reason__title em{
font-size: 1.8rem;
}

.reason__catch{
color: #020D38;
line-height: 1.2;
font-size: .85rem;
font-weight: 700;
text-align: center;
letter-spacing: normal;
margin-bottom: 20px;
@media screen and (max-width: 767px) {
font-size: 1rem;    
}
}
.reason__catch span{
display: block;
padding-bottom: 10px;
font-weight: 500;
}
.reason__catch strong{
font-size: 1.2rem;
font-weight: 700;
@media screen and (max-width: 767px) {
font-size: 1.5rem;    
}
}

/* アイコン／画像 */
.reason__image,
.reason__icon,
.reason__icons{
margin-bottom: 20px;
img{
margin: 0 auto;
}
}
.reason__desc{
margin: 0;
color: #020D38;
font-size: .95rem;
font-weight: normal;
line-height: 1.8;
@media screen and (max-width: 767px) {
padding: 0 10px;
font-size: 1rem;    
}
}


/* =====================================
高く買い取れるのはなぜ？（#why-high-price）
===================================== */
#why-high-price{
color:#020D38;
}
#why-high-price *{ box-sizing:border-box; }

/* 見出し */
.why__head{
max-width: min(1180px, 92vw);
margin: 0 auto 18px;
text-align: center;
position: relative;
padding-top: 70px;
}
.why__lead{
display: block;
margin: 0 0 6px;
letter-spacing: .18em;
font-size: 1.6rem;
font-weight: 500;
@media screen and (max-width: 767px) {
font-size: 1.4rem;    
}
}
.why__title{
margin: 0;
font-weight: 700;
letter-spacing: .02em;
font-size: 1.8rem;
@media screen and (max-width: 767px) {
font-size: 1.5rem;    
}
}


/* 本文カード */
.why__card{
background: #FFFFFF;
border: 2px solid #D9EAF6;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(68,168,218,.18);
display: grid;
gap: 12px;
width: 80%;
padding: 20px 18px 18px;
margin: 14px auto 0;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 26px;
align-items: center;
@media screen and (max-width:767px) {
    grid-template-columns: repeat(1, auto);
    width: 90%;
    max-width: 90%;
    padding: 18px ;
    text-align: center;
}
}

/* 左図版 */
.why__figure{
position: relative;
margin: 0;
display: grid;
place-items: center;
}

/* 右テキスト */
.why__catch{
margin: 0 0 10px;
font-weight: 700;
line-height: 1.65;
font-size: clamp(18px, 2.2vw, 22px);
}
/* マーカーの帯（薄青） */
.u-mark{
background: linear-gradient(transparent 60%, #D9ECF8 60%);
}
.why__desc{
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: #020D38;
@media screen and (max-width:767px) {
    text-align: left;
}
}



/* お客様の声 */
/* ================================
お客様の声
================================ */
.voices{
background: linear-gradient(180deg, #F6FBFE 0%, #EAF6FB 100%);
color: #020D38;
padding: 56px 0 72px;
}
.voices *{ box-sizing: border-box; }

/* 見出し */
.voices__head{
margin: 0 auto 26px;
text-align: center;
position: relative;
padding-top: 72px;
@media screen and (max-width: 767px) {
    padding-top: 60px;
}
}
.voices__head::before{
content: "";
width: 206px;
height: 33px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
background: url("../images/sousyoku_2.svg") no-repeat center/contain;
@media screen and (max-width: 767px) {
    width: 180px;
    height: 33px;    
}
}
.voices__title{
margin: 0;
color: #09196B;
letter-spacing: .08em;
font-size: clamp(1.75rem, 1.718rem + 0.13vw, 1.875rem);
font-weight: bold;
@media screen and (max-width: 767px) {
    font-size: 1.6rem;
}
}

/* リスト（3枚並び） */
.voices__list{
max-width: min(1180px, 92vw);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 24px;
font-family: Roboto, sans-serif;
letter-spacing: normal;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    width: 90%;
    max-width: 90%;
}
/* 各カード */
.voice{
background: #FFFFFF;
border: 1px solid #020D38;
box-shadow: 5px 5px 0 rgba(68, 168, 218, .18);
padding: 22px 16px;
display: grid;
justify-items: center;
gap: 12px;
}

/* 顔写真（枠） */
.voice__image img{
display: block;
width: 160px;
height: auto;
border-radius: 6px;
}

/* メタ（地域/年代） */
.voice__meta{
font-size: .95rem;
@media screen and (max-width:767px) {
font-size: .8rem;
}
}

/* 見出し（淡いマーカーで強調） */
.voice__headline{
text-align: center;
line-height: 1.7;
font-size: 1.2rem;
background: url(../images/marker-blue.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

/* 評価（星画像をそのまま表示） */
.voice__rating{
width: 100%;
margin-top: 2px;
text-align: left;
}

/* カテゴリ */
.voice__category{
width: 100%;
color: #020D38;
font-weight: 700;
font-size: 1rem;
margin-top: 2px;
}

/* 本文 */
.voice__text{
width: 100%;
margin: 0;
color: #020D38;
font-weight: normal;
font-size: .95rem;
line-height: 1.9;
text-align: left;
}
}



/* 高く売るためのポイント */
#tipsArea{
color: #020D38;
background: linear-gradient(180deg,#F6FBFE 0%, #EAF6FB 100%);
padding: 56px 0 72px;
font-family: Roboto, sans-serif;
}
#tipsArea *{ box-sizing: border-box; }

/* 見出し */
.tips__head{
margin: 0 auto 28px;
text-align: center;
position: relative;
@media screen and (max-width: 767px) {
width: 90%;    
}
}
.tips__eyebrow{
display: block;
font-size: 16px;
letter-spacing:.18em;
margin-bottom: 6px;
}
.tips__title{
margin:0;
letter-spacing:.06em;
font-size: 1.4rem;
@media screen and (max-width: 767px) {
    font-size: 1.2rem;
}
span{
display: grid;
.--line-block{
display: block;
}
.line-first{
margin-bottom: 1rem;
font-size: 1.4rem;
@media screen and (max-width: 767px) {
    font-size: 1.2rem;
}
}
em{
font-size: 2rem;
position: relative;
@media screen and (max-width: 767px) {
    font-size: 1.8rem;
}
}
}
}


/* リスト */
.tips__list{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(3, auto);
row-gap: 60px;
}

/* 1ブロック */
.tip{
position: relative;
padding-top: 60px;
&:nth-child(1){
padding-top: 20px;
&::before{
display: none;
}
}
&::before{
content:"";
background-image: url(../images/sousyoku_4.svg);
width: 280px;
height: 10px;
margin: 0 auto;
position:absolute;
left: calc(50% - 140px);
top:0;
}
}
.tip__head{
@media screen and (max-width: 767px) {
    text-align: center;   
}
}
.tip__title{
margin-bottom: 16px;
color:#09196B;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.6;
@media screen and (max-width: 767px) {
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: left;
}
.--line-grid{
column-gap: 16px;
justify-content: center;
align-items: center;
@media screen and (max-width: 767px) {
    column-gap: 16px;
}
}
.tip__point-num{
font-size: 1.1rem;
}
em{
font-size: 1.4rem;
}
}

/* 本文カラム（画像＋テキスト） */
.tip__body{
display:grid;
grid-template-columns: 40% auto;
gap: 18px;
align-items:stretch;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
}

/* 画像 */
.tip__figure{
margin:0;
border-radius:10px;
overflow:hidden;
box-shadow: 0 8px 16px rgba(2,13,56,.10);
}
.tip__figure img{
display:block;
width:100%;
height:auto;
object-fit:cover;
}

/* テキストボックス */
.tip__text{
background:#FFFFFF;
border:2px solid #D9EAF6;
border-radius:10px;
box-shadow: 0 8px 16px rgba(68,168,218,.12);
padding: 16px 10px;
}
.tip__text p{
margin: 0 0 10px;
line-height: 1.5;
font-size: .95rem;
font-weight: normal;
}
.tip__text p:last-child{ margin-bottom:0; }



/* 食器買取の流れ */
#flowArea{
color:#020D38;
background:#FFFFFF;
padding: 56px 0 72px;
@media screen and (max-width: 767px) {
padding: 56px 0;    
}
}
#flowArea *{
box-sizing: border-box;
}

/* ---------- セクション見出し ---------- */
.flow__head{
padding-top: 72px;
margin: 0 auto 26px;
font-weight: bold;
text-align: center;
letter-spacing: .2rem;
position: relative;
&::before{
content: "";
width: 206px;
height: 33px;
background: url("../images/sousyoku_2.svg") no-repeat center/contain;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0;
@media screen and (max-width: 767px) {
    width: 180px;
    height: 33px;    
}
}
}
.flow__eyebrow{
margin: 0 0 4px;
color: #020D38;
font-size: 1.2rem;
}
.flow__title{
margin: 0;
font-size: 1.2rem;
em{
font-size: 1.8rem;
}
}


/* ---------- リスト ---------- */
.flow__list{
width: 90%;
margin: 0 auto;
padding: 0;
font-family: Roboto, sans-serif;
list-style: none;
@media screen and (max-width: 767px) {
    width: 100%;
}
}

/* ---------- 各ステップのカード ---------- */
.flow__item{
position: relative;
background:#FFFFFF;
border: 2px solid #E7F1F8;
border-radius: 16px;
box-shadow: 0 14px 26px rgba(68,168,218,.16);
padding: 22px 22px 24px;
margin-bottom: 44px;
@media screen and (max-width: 767px) {
    width: 90%;
    max-width: 90%;
    margin: 0 auto 60px;
    &:nth-child(3){
        margin: 0 auto;
    }
}
}

/* ステップヘッダ：番号バッジ + 見出し */
.flow__step{
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: center;
column-gap: 14px;
margin-bottom: 16px;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    row-gap: 16px;
    justify-content: center;
    justify-items: center;
}
}
.flow__step img{
width: 60px;
height: 60px;
display:block;
}
.flow__heading{
font-weight: 700;
font-size: 1.2rem;
@media screen and (max-width: 767px) {
    text-align: center;
}
em,
.font-lerge{
font-size: 1.4rem;
}
}

/* 本文：画像 + テキスト（2カラム） */
.flow__body{
display:grid;
grid-template-columns: 240px 1fr;
gap: 18px;
align-items:start;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    row-gap: 16px;
}
}
.flow__media{
margin: 0;
border-radius: 12px;
overflow: hidden;
background:#FFFFFF;
box-shadow: 0 10px 18px rgba(2,13,56,.10);
}
.flow__media img{
display:block;
width: 100%;
height: auto;
object-fit: cover;
}
.flow__text{ line-height: 1.95; }
.flow__text p{
margin: 0;
font-size: .95rem;
font-weight: normal;
}
.flow__text p + p{ margin-top: 10px; }
.flow__text strong{ color:#020D38; }

.flow__arrow{
position:absolute;
left:50%;
bottom:-30px;
translate:-50% 0;
width: 28px;
height: 24px;
background: url("../images/arrow_hazimete.svg") no-repeat center/contain;
font-size: 0;
opacity:.9;
}
.flow__item:last-child .flow__arrow{ display:none; }


/* 出張買取 対応エリア*/
#area-info{
background:#FFFFFF;
padding:clamp(28px,4vw,48px) 0;
color:#020D38;
}

.area-info__inner{
max-width: 810px;
width: 90%;
margin:0 auto;
display:grid;
grid-template-columns:auto auto;
align-items:center;
gap:clamp(18px,4vw,40px);
}

/* 地図 */
.area-info__map{
display:grid;
place-items:center;
}
.area-info__map img{
width:clamp(140px,18vw,190px);
height:auto;
display:block;
}

/* タイトル＆本文 */
.area-info__text{
line-height:1.9;
}
.area-info__title{
margin:0 0 10px;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-size: clamp(1.5rem, 1.404rem + 0.39vw, 1.875rem);
line-height: 1.4;
letter-spacing:.02em;
color:#020D38;
}
.area-info__title .u-highlight{
color:#44A8DA;
}
.area-info__title em{
  font-size: clamp(1.75rem, 1.495rem + 1.05vw, 2.75rem);
}

/* 説明文 */
.area-info__desc{
margin:10px 0 0;
font-size:clamp(14px,1.5vw,18px);
color:#09196B;
}
.area-info__desc .u-note{
display:inline-block;
margin-top:.3em;
color:#C9171E;
font-size: .8rem;
@media screen and (max-width: 767px) {
    font-size: .6rem;    
}
}

/* ================================
SPレイアウト（～680px）
================================ */
@media (max-width:680px){
.area-info__inner{
grid-template-columns:1fr;
text-align:center;
gap:16px;
}
.area-info__map{
order:2;
}
.area-info__map img{
width:clamp(120px,42vw,180px);
opacity:.95;
}
.area-info__title{
line-height:1.7;
}
.area-info__desc{
line-height:1.9;
}
/* img重ねる */
.area-info__inner{
position: relative;
display: block;
text-align: center;
}
.area-info__map{
position: relative;
display: inline-block;
}
.area-info__map img{
width: clamp(160px, 60vw, 220px);
height: auto;
}
.area-info__title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 90%;
font-size: 20px;
line-height: 1.6;
color: #020D38;
}
.area-info__desc{
margin-top: 20px;
}
}

/*  買取対応エリア*/
#area-listArea {
background: #C6D3D910 url(../images/Mailform/coyash_shokki_bg_mailform.webp?1);
background-position: 0 0;
background-size: 50%;
padding: clamp(32px, 5vw, 56px) 0;
text-align: center;
color: #020D38;
}

/* 見出し */
.area-list__head {
margin-bottom: 20px;
border-top: 2px dotted #020D38;
border-bottom: 2px dotted #020D38;
padding: 12px 0;
}
.area-list__title {
margin: 0;
font-size: clamp(20px, 3vw, 26px);
font-weight: 700;
letter-spacing: .04em;
color: #020D38;
}

/* グリッド */
.area-list__grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 16px 24px;
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
text-align: left;
}

/* 各ブロック */
.area-list__block {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 15px;
line-height: 1.6;
}

.area-list__region {
background: #fff;
border-radius: 6px;
padding: 4px 12px;
font-weight: 700;
font-size: .95rem;
color: #020D38;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.area-list__pref {
color: #020D38;
font-size: .95rem;
line-height: 1.6;
}

/* ================================
SP（スマホ縦並び）
================================ */
@media (max-width: 680px) {
.area-list__grid {
grid-template-columns: 1fr;
gap: 12px;
}

.area-list__block {
font-size: .95rem;
}

.area-list__region {
font-size: .95rem;
padding: 4px 10px;
}

.area-list__pref {
font-size: .95rem;
}
}


/* よくある質問*/
.faq{
background:#FFFFFF;
padding: clamp(28px,4vw,56px) 0;
color:#020D38;
}
/* 見出し */
.faq__head{
text-align:center;
padding-top: 72px;
margin-bottom: clamp(18px,3.2vw,32px);
position: relative;
isolation:isolate;
&::before{
content:"";
width: 206px;
height: 33px;
background: url("../images/sousyoku_2.svg") no-repeat center/contain;
position:absolute; left:50%; top:0;
transform: translateX(-50%);
}
}
.question{
padding: 40px 0;
h2{
img{
width: 300px;
margin: 0 auto;
    @media screen and (max-width: 767px) {
        width: 260px;
    }
}
}
.questionList{
width: 70%;
margin: 80px auto 0;
    @media screen and (max-width: 767px) {
        width: 80%;
        margin: 40px auto 0;
    }
li{
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid #464E5330;
h3{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: start;
align-items: center;
margin-bottom: 16px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.1rem;
font-weight: bold;
.questionmark{
display: inline-block;
width: 32px;
height: 32px;
background: #020D38;
border-radius: 50%;
color: #fff;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.4rem;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
}
.answer{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: left;
align-items: center;
.answermark{
display: inline-block;
width: 32px;
height: 32px;
background: #fff;
border: 1px solid #020D38;
border-radius: 50%;
color: #020D38;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.4rem;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
.answercmnt{
font-size: .95rem;
}
}
}
}
}

/* ================
SP レイアウト
================ */
@media screen and (max-width: 680px){
.faq{
padding: 36px 0 44px;
}
.faq__title{
font-size: 26px;
}
}

/* 買取ジャンル*/
.other-cats{
background:#FFFFFF;
color:#020D38;
padding: clamp(28px,4vw,48px) 0 clamp(32px,5vw,56px);
}
.Genre-bg{
background: url(../images/genre/genreArea_bg.webp);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
.genre{
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 64px 0 80px;
h2{
text-align: center;
font-size: 24px;
@media screen and (max-width: 767px) {
    font-size: 22px;
}
img{
display: inline;
@media screen and (max-width: 767px) {
    width: 120px;
}
}
.firstline{
display: grid;
grid-template-columns: auto auto;
column-gap: 4px;
justify-content: center;
align-items: end;
margin-bottom: 8px;
}
.secondline,
.thirdline{
display: inline;
@media screen and (min-width: 768px) and (max-width: 1023px) {
    display: block;
}
@media screen and (max-width: 767px) {
    display: block;
}
}
em{
font-size: 32px;
@media screen and (max-width: 767px) {
    font-size: 1.7rem;
}
}
}
h3{
width: 90%;
margin: 32px auto;
padding: 8px 0;
border-top: 2px solid #382C02;
border-bottom: 2px solid #382C02;
position: relative;
text-align: center;
font-size: 22px;
    @media screen and (max-width: 767px) {
        width: 70%;
        font-size: 16px;
    }
&::before,
&::after{
content: "";
display: block;
width: 12px;
height: 12px;
background: #382C02;
border-radius: 2px;
transform: rotate(-45deg);
position: absolute;
}
&::before{
top: -6px;
right: -24px;
}
&::after{
bottom: -6px;
left: -24px;
}
span{
&::before,
&::after{
content: "";
display: block;
width: 12px;
height: 12px;
background: #382C02;
border-radius: 2px;
transform: rotate(-45deg);
position: absolute;
}
&::before{
top: -6px;
left: -24px;
}
&::after{
bottom: -6px;
right: -24px;
}
}
}
.genreList{
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(4, auto);
gap: 24px;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 16px;
    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(8, auto);
        text-align: left;
        padding: 0 32px;
    }
li{
    @media screen and (max-width: 767px) {
        display: grid;
        grid-template-columns: 80px auto;
        column-gap: 8px;
        justify-content: start;
        align-items: center;
    }
p{
margin-top: 8px;
font-size: 20px;
font-weight: bold;
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        font-size: 18px;
    }    
    @media screen and (max-width: 767px) {
        font-size: 14px;
    }
}
}
}
}
}


.swiperArea{
width: 96%;
margin: 20px auto 40px;
position: relative;
@media screen and (min-width: 768px) and (max-width: 1080px) {
    width: 90%;
    margin: 20px auto 80px;
}
@media screen and (max-width: 767px) {
    margin-bottom: 40px;
    padding: 0 10%;
}
.swiper{
padding: 16px 0;
}
.swiper:not(.swiper-initialized) {
padding: 0;
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-wrapper{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px 16px;
justify-content: space-between;
padding: 16px 0;
@media screen and (min-width: 1081px) and (max-width: 1160px) {
gap: 24px 8px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media screen and (max-width: 767px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
.swiper-slide{
display: grid;
grid-template-rows: repeat(4,auto);
justify-content: center;
align-items: center;
height: auto;
margin: 0 auto;
padding: 8px 16px;
background: #fff;
border: 1px solid #44A8DA;
border-radius: 10px;
box-shadow: 0px 0px 3px 0px #44A8DA;
position: relative;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination{
display: none;
}
@media screen and (max-width: 1080px) {
.swiper-button-next,
.swiper-button-prev{
display: grid;
place-content: center;
width: 48px;
height: 48px;
background: #44A8DA80;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
.swiper-button-next{
right: calc(100% - 5.2rem);
}
.swiper-button-prev{
left: calc(100% - 5.2rem);
}
}
.swiper-button-next{
top: calc(100%/2);
right: -6px;
@media screen and (min-width: 768px) and (max-width: 1080px) {
right: -24px;
}
@media screen and (max-width: 767px) {
right: 16px;
}
&::before,
&::after{
content: "";
position: absolute;
top: calc(50% - 2px);
left: calc(50%/2);
width: 24px;
height: 4px;
border-radius: 9999px;
background-color: #fff;
transform-origin: calc(100% - 2px) 50%;
}
&::before{
transform:  rotate(45deg);
}
&::after{
transform:  rotate(-45deg);
}
}
.swiper-button-prev{
top: calc(100%/2);
left: -6px;
@media screen and (min-width: 768px) and (max-width: 1080px) {
left: -24px;
}
@media screen and (max-width: 767px) {
left: 16px;
}
&::before,
&::after{
content: "";
position: absolute;
top: calc(50% - 2px);
left: calc(50%/2);
width: 24px;
height: 4px;
border-radius: 9999px;
background-color: #fff;
transform-origin: 2px 50%;
}
&::before{
transform:  rotate(45deg);
}
&::after{
transform:  rotate(-45deg);
}
}
.swiper-pagination{
display: block;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction{
bottom: -80px !important;
    @media screen and (max-width: 767px) {
        bottom: -40px !important;
    }
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
width: 24px;
height: 24px;
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,10px);
background: #44A8DA;
border: 1px solid #44A8DA;
border-radius: 50%;
    @media screen and (max-width: 767px) {
        width: 16px;
        height: 16px;
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap,6px);
    }
}
}
}
.shokki--content{
font-weight: bold;
text-align: left;
letter-spacing: 1px;
line-height: 1.3;
.shokki--name{
margin-bottom: 8px;
span{
display: block;
line-height: 1.5 !important;
}
em{
margin-right: 4px;
&.--line-block{
display: block;
}
}
}
img{
margin: 0 auto 16px;
}
.shokki--type{
margin-bottom: 8px;
font-size: 0.813rem;
font-weight: normal;
}
.shokki--priceBox{
width: 100%;
margin-top: 8px;
padding-top: 8px;
border-top: 2px dotted #44A8DA;
.shokki--price--mark{
display: inline-block;
margin: 8px 0;
padding: 2px 5px;
background: #44A8DA;
color: #fff;
font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
text-align: center;
}
.shokki--price{
text-align: right;
font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
em{
color: #44A8DA;
font-size: clamp(1rem, 0.841rem + 0.65vw, 1.625rem);
}
}
}
}
@media screen and (max-width: 767px) {
.shokki--content{
    justify-content: center !important;
}
}


/* footer */
footer{
margin: 0 auto;
padding-bottom: 40px;
background: #C9171E;
color: #fff;
text-align: center;
@media screen and (min-width:768px) and (max-width:1023px){
padding-bottom: 40px/*240px*/;
}
@media screen and (max-width:767px){
padding-bottom: 120px;
}
a,
a:link{
color: #464E53;
}
a:hover{
opacity: 0.33;
}
.innerBoxF{
display: grid;
row-gap: 20px;
padding: 30px 0 20px;
.logoArea{
margin: 0 auto;
text-align: center;
img{
width: 185px;
height: auto;
}
}
.linkBox{
display: grid;
grid-template-columns: repeat(3,auto);
column-gap: 20px;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
@media screen and (max-width: 767px) {
padding: 0 32px;
}
a,
a:link{
color: #fff;
}
a:hover{
opacity: 0.33;
}
}
}
.copyrightBox{
padding: 5px 0;
small{
font-size: 10px;
}
}
}

/* fixed button forPC */
.buttonBox.fixed{
margin: 0 auto;
position: fixed;
top: 140px;
right: 0;
z-index: 1200;
a,
a:link{
display: block;
width: 70px;
margin: 0 auto;
opacity: 10;
position: absolute;
top: 0;
right: 0;
}
&.hidden{
opacity: 0;
visibility: hidden;
}
}

/* fixed button forSP and tab */
.buttonBoxsptab.fixed{
margin: 0 auto;
background: #EBEBE2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
max-width: 100%;
overflow: hidden;
.campaignArea{
padding: 4px 32px;
img{
margin: 0 auto;
}
}
.contactArea{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 5px;
justify-content: center;
align-items: center;
li{
&:nth-child(3){
pointer-events: all;
}
a,
a:link{
display: block;
pointer-events: all;
}
}
}
&.hidden{
opacity: 0;
visibility: hidden !important;
}
}
.buttonBoxsptab .campaignArea .animationimg{
animation: breathing 1s ease-in-out infinite;
will-change: transform;
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}



/* page top link */  
.back-to-top {
display: none;
&.is-visible{
display: block;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #020D38;
text-align: center;
line-height: 50px;  /* 要素の高さと合わせることで縦中央揃え */
font-size: 24px;
border-radius: 50%; /* 円形にする */
opacity: 1;
transition: opacity 0.3s;
z-index: 800;
@media screen and (min-width:768px) and (max-width:1023px){
bottom: 240px;
}
.arrow {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
top: 25%;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 2px);
width: 4px;
height: 24px;
border-radius: 9999px;
background-color: #fff;
transform-origin: 50% 2px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
&:hover{
opacity: 1;
}
}
}

/* tablet1 ================ */
@media screen and (min-width:821px) and (max-width:1024px){

.tab_show{display: block !important;}
.tab_none{display: none !important;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}

}

/* tablet2 ================ */
@media screen and (min-width:768px) and (max-width:820px){

.tab_show{display: block !important;}
.tab_none{display: none !important;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}

}

/* SP ================ */
@media screen and (max-width:767px){

.sp_show{display: block !important;}
.sp_none{display: none !important;}

.sp-br{display: block;}

.font--sizeS{font-size: 14px;}
.font--sizeM{font-size: 18px;}
.font--sizeL{font-size: 26px;}
}