@charset "utf-8";

@media (min-width:768px) {
.contents_box {
width:1280px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.contents_box img {
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.contents_box .img_main {
max-width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.contents_box .img_main ul.image_slider_sp {
display: none;
}
.contents_box .img_main ul.image_slider_pc {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.contents_box .img_main ul.image_slider_pc li {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.contents_box .img_main ul.image_slider_pc li.active {
opacity: 1;
}
.contents_box .img_main ul.image_slider_pc li img {
max-height: 100%;
object-fit: cover;
}

.contents_box .txt_catcharea .txt_title {
margin: 36px auto;
padding:0 24px;
font-size: 36px;
text-align: center;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.5;
}
.contents_box .txt_catcharea .txt_description {
margin: 0 auto 60px auto;
padding:0 24px;
font-size: 16px;
text-align: center;
font-weight: 300;
letter-spacing: 0.12em;
line-height: 1.7;
}
.contents_box .contents_subbox{
margin:0 auto 60px auto;
}
.contents_box .contents_subbox_head{
display: flex;
padding:0 10%;
margin: 0 0 30px 0;
}
.contents_box .contents_subbox .img_subphoto {
margin: 0 auto;
width:40%;
}

.contents_box .contents_subbox .contents_subbox_text {
width: 50%;
}

/* イメージ画像無し（シングルカラム）はこのCSSを採用 */
.contents_box .contents_subbox .contents_subbox_text_img_none{
width: 100%;
}
/* イメージ画像無し（シングルカラム）はこのCSSを採用 ここまで*/

.contents_box .contents_subbox .contents_subbox_title {
margin:0 auto 1em auto;
padding:0;
font-size: 24px;
text-align: left;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.5;
}

.contents_box .contents_subbox .contents_subbox_description {
margin:0 auto 50px auto;
padding:0;
font-size: 14px;
text-align: justify;
font-weight: 300;
letter-spacing: 0.12em;
line-height: 1.5;
}

.contents_box .contents_subbox .list_item.list_in_2item {
margin: 0 auto;
width: 66%;
}
.contents_box .contents_subbox .list_item.list_in_1item {
margin: 0 auto;
width: 33%;
}
.contents_box .contents_subbox .list_item ul {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列のグリッドを作成 */
gap: 10px; /* 列間の隙間を設定 */
}
.contents_box .contents_subbox .list_item.list_in_2item ul {
grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
}
.contents_box .contents_subbox .list_item.list_in_1item ul {
grid-template-columns: repeat(1, 1fr); /* 1列のグリッドを作成 */
}
.contents_box .contents_subbox .list_item ul li a {
display: block;
cursor: pointer;
}

.contents_box .contents_subbox .list_item .list_item_cell .list_item_brand {
margin:1em auto 0 auto;
font-size: 12px;
text-align: left;
color: #555555;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_name {
margin:0.5em auto 0 auto;
font-size: 14px;
text-align: left;
line-height: 1.4;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price {
margin:0.5em auto 0 auto;
font-size: 14px;
text-align: left;
line-height: 1.4;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price span.txt_price_proper {
text-decoration: line-through;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price span.txt_price_sale {
color: #e62514;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_comment {
margin:0.5em auto 14px auto;
font-size: 12px;
text-align: left;
color: #555555;
}
.contents_box .contents_subbox .contents_subbox_foot a {
margin:0 25%;
font-size: 16px;
text-align: center;
line-height: 1.5;
border: 1px solid #999999;
position: relative;
}
.contents_box .contents_subbox .contents_subbox_foot a:before {
content: "";
position: absolute;
top: 43%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(45deg);
}
.contents_box .contents_subbox .contents_subbox_foot a:after {
content: "";
position: absolute;
top: 55%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(-45deg);
}
.contents_box .contents_subbox .contents_subbox_foot a {
padding: 1rem;
display: block;
cursor: pointer;
}

.contents_box .contents_buttonbox {
margin: 0 auto 60px auto;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot ul {
margin: 1em 25%;
display: flex;
justify-content: space-between;
padding: 0;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot ul.buttonbox1 li {
width:100%;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot ul.buttonbox2 li {
width:49%;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot ul.buttonbox3 li {
width:32%;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a {

font-size: 16px;
text-align: center;
line-height: 1.5;
border: 1px solid #999999;
position: relative;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a:before {
content: "";
position: absolute;
top: 43%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(45deg);
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a:after {
content: "";
position: absolute;
top: 55%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(-45deg);
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a {
padding: 1rem;
display: block;
cursor: pointer;
}

.pickup_brand {
    width: 100%;
    padding: 20px 15px 15px 15px;
    margin-bottom: 50px;
    border: solid 1px #000;
    position: relative;
}

.pickup_brand .pickup_brand_hd {
    position: absolute;
    display: block;
    width: 25%;
    padding: 0 5px;
    background-color: #fff;
    top: -7%;
    left: 35.5%;
    font-size: 16px;
}

.pickup_brand .pickup_brand_name {
    width: 100%;
    font-size: 20px;
    margin-bottom: 5px;
}

.pickup_brand .pickup_brand_info {
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 15px;
}

.pickup_brand .pickup_brand_link {
    width: 100%;
    text-align: center;
    font-size: 14px;
}

.pickup_brand .pickup_brand_link a {
    display: block;
    padding: 10px;
    display: block;
    cursor: pointer;
    line-height: 2;
    border: 1px solid #999999;
    position: relative;
}

.pickup_brand .pickup_brand_link a::after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 16px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #999999;
    border-right: solid 1px #999999;
    transform: rotate(45deg);
}

}

/*ここからスマホ*/
@media (max-width: 767px) {

.contents_box {
width:auto;
margin: 0 auto;
text-align: center;
}
.contents_box img {
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.contents_box .img_main {
max-width: 100%;
aspect-ratio: 1 / 1;/* ここにアスペクト比を入れる */
position: relative;
overflow: hidden;
}
.contents_box .img_main ul.image_slider_pc {
display: none;
}
.contents_box .img_main ul.image_slider_sp {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.contents_box .img_main ul.image_slider_sp li {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.contents_box .img_main ul.image_slider_sp li.active {
opacity: 1;
}
.contents_box .img_main ul.image_slider_sp li img {
max-width: 100%;
aspect-ratio: 1 / 1;/* ここにアスペクト比を入れる */
object-fit: cover;
}

.contents_box .txt_catcharea .txt_title {
margin: 1em auto;
padding:0 24px;
font-size: 28px;
text-align: left;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.5;
}
.contents_box .txt_catcharea .txt_description {
margin: 0 auto 36px auto;
padding:0 24px;
font-size: 16px;
text-align: justify;
font-weight: 300;
letter-spacing: 0.12em;
line-height: 1.5;
}
.contents_box .contents_subbox{
margin:0 auto 60px auto;
}
.contents_box .contents_subbox .img_subphoto {
margin:0 0 36px 0;
}

.contents_box .contents_subbox .contents_subbox_title {
margin:1em auto;
padding:0 24px;
font-size: 22px;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.5;
text-align: left;
}
.contents_box .contents_subbox .contents_subbox_description {
margin:0 auto 50px auto;
padding:0 24px;
font-size: 16px;
text-align: justify;
font-weight: 300;
letter-spacing: 0.12em;
line-height: 1.5;
}
.contents_box .contents_subbox .list_item {
padding:0 0 0 24px;
margin:0 auto 24px auto;
}
.contents_box .contents_subbox .list_item ul {
width: 100%;
display: inline-flex; /* inline-flexを使用して横並びにする */
overflow-x: auto; /* 横スクロールを可能にする */
scroll-snap-type: x mandatory;
}
.contents_box .contents_subbox .list_item ul li {
padding:0 8px 0 0;
scroll-snap-align: start; /* スナップの位置 */
min-width: 55% /* 要素の最小幅 */
}

.contents_box .contents_subbox .list_item .list_item_cell .list_item_brand {
margin:14px auto 0 auto;
font-size: 12px;
color: #555555;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_name {
margin:0.5em auto 0 auto;
font-size: 14px;
line-height: 1.4;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price {
margin:0.5em auto 0 auto;
font-size: 14px;
line-height: 1.4;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price span.txt_price_proper {
text-decoration: line-through;
}
.contents_box .contents_subbox .list_item .list_item_cell .list_item_price span.txt_price_sale {
color: #e62514;
}

.contents_box .contents_subbox .list_item .list_item_cell .list_item_comment {
margin:0.5em auto 24px auto;
font-size: 12px;
color: #555555;
}
.contents_box .contents_subbox .contents_subbox_foot a {
margin: 0 24px;
padding: 1rem 3rem;
font-size: 16px;
text-align: center;
line-height: 1.5;
border: 1px solid #999999;
position: relative;
display:block;
}
.contents_box .contents_subbox .contents_subbox_foot a:before {
content: "";
position: absolute;
top: 44%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(45deg);
}
.contents_box .contents_subbox .contents_subbox_foot a:after {
content: "";
position: absolute;
top: 55%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(-45deg);
}

.contents_box .contents_buttonbox{
margin: 0 auto 60px auto;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot li {
margin: 0 auto 24px auto;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a {
margin: 0 24px;
padding: 1rem 3rem;
font-size: 16px;
text-align: center;
line-height: 1.5;
border: 1px solid #999999;
position: relative;
display:block;
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a:before {
content: "";
position: absolute;
top: 43%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(45deg);
}
.contents_box .contents_buttonbox .contents_buttonbox_foot a:after {
content: "";
position: absolute;
top: 55%;
right: 16px;
width: 10px;
height: 1px;
background: #999999;
transform: rotate(-45deg);
}

.pickup_brand {
    width: 85%;
    padding: 20px 15px 15px 15px;
    margin: 0 auto 30px auto;
    border: solid 1px #000;
    position: relative;
}

.pickup_brand .pickup_brand_hd {
    position: absolute;
    display: block;
    width: 40%;
    padding: 0 10px;
    background-color: #fff;
    top: -8%;
    left: 26%;
    font-size: 4.5vw;
}

.pickup_brand .pickup_brand_name {
    width: 100%;
    font-size: 20px;
    margin-bottom: 5px;
}

.pickup_brand .pickup_brand_info {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 15px;
}

.pickup_brand .pickup_brand_link {
    width: 100%;
    text-align: center;
    font-size: 16px;
}

.pickup_brand .pickup_brand_link a {
    display: block;
    padding: 10px;
    display: block;
    cursor: pointer;
    line-height: 2;
    border: 1px solid #999999;
    position: relative;
}

.pickup_brand .pickup_brand_link a::after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 16px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #999999;
    border-right: solid 1px #999999;
    transform: rotate(45deg);
}

}
/*ここまでスマホ*/