@charset "UTF-8";

/*共通
---------------------------------------------------------------------------*/
:root {
--maincolor: #222;
--goldcolor: #ad7d43;
--section-space: 90px;
--inner-space: 50px;
--fontsize: 90%;
}

/*全体（TOP）設定
---------------------------------------------------------------------------*/
body {
color: var(--maincolor);
}

/*リンク（TOP）設定
---------------------------------------------------------------------------*/
a {
color:var(--maincolor);
text-decoration:none;
transition: 0.5s;
}
a:hover {
color:#848484;
text-decoration:none;
transition: 0.5s;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}
@media screen and (min-width: 1200px) {
.container {
padding: 0 8%;
max-width: 2000px;
margin: 0 auto;
}}

/*ムービー
---------------------------------------------------------------------------*/
#main-visual{
width:100%;
overflow:hidden;
position:relative
}
.wrap-video video{
display:block;
width:100%;
height:auto;
}
@media screen and (max-width:767px){
.wrap-video{
aspect-ratio: 1 / 1;
}
.wrap-video video{
width:100%;
height:100%;
object-fit:cover;
}
}
@media screen and (min-width:1200px){
.wrap-video video{
width:100%;
height:auto;
}
}
@media screen and (min-width:1500px){
.wrap-video{
height:100vh;
}
.wrap-video video{
width:100%;
height:100%;
object-fit:cover;
}
}

/* テキストを重ねる */
.catch_text{
position:absolute;
bottom: 35%;
right:20%;
z-index:2;
}
.catch_text img{
width: 110px;
height: auto;
}
@media screen and (max-width:1023px){
.catch_text{
right:17%;
}
.catch_text img{
width: 75px;
}
}
@media screen and (max-width:767px){
.catch_text{
right:15%;
}
.catch_text img{
width: 56px;
}
}

/*画像　後からすてる
---------------------------------------------------------------------------*/
.rslides{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.rslides img{
width: 100% !important;
height: 100% !important;
object-fit:cover;
display:block;
object-position: center bottom;
}
@media screen and (max-width:767px){
.rslides img{
aspect-ratio: 1 / 1;
}
}

/*スクロールダウン
---------------------------------------------------------------------------*/
.scrolldown{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
z-index:10;
}
.scrolldown a{
text-decoration:none;
display:block;
}
.scrolldown span{
position:relative;
display:block;
color:#fff;
font-size:12px;
letter-spacing:.2em;
text-align:center;
}
.scrolldown span::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
top:20px;
width:1px;
height:50px;
background:#fff;
animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
0%{transform:translate(-50%,0);opacity:0;}
30%{opacity:1;}
100%{transform:translate(-50%,20px);opacity:0;}
}

/*背景
---------------------------------------------------------------------------*/
#bg_news,
#bg_item{
margin: var(--section-space) 0;
}
#bg_osusume{
margin: 0;
}
#bg_bnr{
padding: var(--section-space) 0;
background: var(--maincolor);
}

#bg_product {
margin: var(--section-space) 0;
}
@media screen and (max-width:767px){
#bg_news,
#bg_item,
#bg_bnr,
#bg_product{
margin: var(--inner-space) 0;
}
}


/*全体見出し
---------------------------------------------------------------------------*/
.section-center-h3,
.section-side-h3{
font-size: 23px;
line-height: 1.5;
font-weight: 500;
letter-spacing:.05em;
margin: 0 0 20px 0;
color: var(--maincolor);
}
.section-center-h3{
text-align:center;
}
.section-side-h3{
text-align:left;
}
@media screen and (min-width: 1024px) {
.section-center-h3,
.section-side-h3{
font-size: 28px;
margin: 0 0 30px 0;
}}



/*メッセージ
---------------------------------------------------------------------------*/
.concept_area{
position:relative;
padding:var(--section-space) 0;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
/* 縦書き */
writing-mode:vertical-rl;
text-orientation:upright;
margin:0 auto;
}
.concept_inner{
max-width:100%;
overflow-wrap:break-word;
}

/* 右上 */
.concept_area::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: url("../img/top/right.svg") no-repeat top right;
background-size: contain;
}
/* 左下 */
.concept_area::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: url("../img/top/left.svg") no-repeat bottom left;
background-size: contain;
}



/* タイトル */
.concept_inner h2{
font-size:clamp(24px,3vw,34px);
line-height:2.1;
letter-spacing:.12em;
margin:0 0 0 60px;
font-weight: normal;
color: var(--goldcolor);
}
/* 本文 */
.concept_text{
line-height:2.8;
letter-spacing:.08em;
}
@media screen and (max-width:1023px){
.concept_text{
line-height:2.6;
}
.concept_inner h2{
line-height:1.9;
margin:0 0 0 40px;
}
}
@media screen and (max-width:980px){
.concept_text{
line-height:2.2;
}
.concept_inner h2{
line-height:1.6;
margin:0 0 0 20px;
}
}

@media screen and (max-width:767px){
.concept_area{
writing-mode:horizontal-tb; /* 横書きに戻す */
text-orientation:mixed;
align-items:flex-start;
padding:var(--inner-space) 0;
}
.concept_inner{
max-width:100%;
max-height:none;
text-align:left;
}
.concept_inner h2{
font-size:28px;
line-height:1.6;
margin:0 0 20px 0;
text-align:left;
}
.concept_text{
line-height:2;
}
}


/*おすすめ商品
---------------------------------------------------------------------------*/
.osusume_box_list {
overflow: hidden;
}
.osusume_box_list ul.slider_info {
display: flex;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
animation: sliderLoop 25s linear infinite;
will-change: transform;
}
.slider_info li {
list-style: none;
margin: 0;
}
.slider_info li.card {
flex: 0 0 auto;
width: 300px;
margin-right: 30px;
}
.slider_info li.card a {
display: block;
text-decoration: none;
}
.slider_info img {
width: 100%;
height: auto;
display: block;
}

/* 画像 */
.i_b_box {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 12px;
}
.i_b_box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* テキスト */
.o_box_tex {
padding: 25px 20px;
}
.o_box_tex h4 {
margin: 0;
line-height: 1.6;
font-weight: normal;
}
@media screen and (min-width: 1024px) {
.o_box_tex {
padding: 30px 0;
}
}
/* 無限スクロール */
@keyframes sliderLoop {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}


/*slick設定（矢印はcom）
---------------------------------------------------------------------------*/
.slider_info .slick-slide {
margin:0 15px;
height:auto !important;
}

/* dotsカスタマイズするCSS */
.dots-wrap {
display: flex;
justify-content: center;
margin: 0 auto;
}
.dots-wrap {
display: flex;
justify-content: center;
}
.dots-wrap li {
width: 30px;
height: 4px;
margin: 0 5px;
background: #fff;
cursor: pointer;
}
.dots-wrap li:hover,
.dots-wrap li.slick-active {
background: coral;
}
.dots-wrap li button {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
border: none;
background-color: transparent;
}
.box.reverse{
flex-direction: row-reverse;
}
.box:nth-child(even) {
flex-direction: row-reverse;
}


/*取扱商品　バナー
---------------------------------------------------------------------------*/
.banner-wrap {
overflow: hidden;
width: 100%;
}
.slider_service {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.slider_service li {
width: calc(100% / 3);
list-style: none;
margin: 0;
}
.banner-item {
position: relative;
display: block;
overflow: hidden;
}
.banner-item img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform .6s ease, filter .6s ease;
}
/* グラデーション */
.banner-item::before {
content: "";
position: absolute;
top: 0;
left: 70%;
z-index: 1;
width: 18%;
height: 90%;
transform: translateX(-50%);
pointer-events: none;
}
/* むらさき */
.banner-item.purple::before {
background: linear-gradient(
to bottom,
rgba(150, 140, 200, 1),
rgba(150, 140, 200, 0)
);
}
/* ピンク */
.banner-item.pink::before {
background: linear-gradient(
to bottom,
rgba(220, 140, 160, 1),
rgba(220, 140, 160, 0));
}
/* 緑 */
.banner-item.green::before {
background: linear-gradient(
to bottom,
rgba(120, 170, 140, 1),
rgba(120, 170, 140, 0));
}
/* ブルー */
.banner-item.blue::before {
background: linear-gradient(
to bottom,
rgba(120, 160, 195, 1),
rgba(120, 160, 195, 0));
}
/* イエロー */
.banner-item.yellow::before {
background: linear-gradient(
to bottom,
rgba(210, 185, 105, 1),
rgba(210, 185, 105, 0));
}
/* ホバー */
.banner-item:hover img {
transform: scale(1.08);
filter: brightness(1.15);
}
/* 縦文字 */
.banner-item span {
position: absolute;
top: 50px;
left: 70%;
z-index: 2;
transform: translateX(-50%);
color: var(--maincolor);
font-size: 1.3rem;
font-weight: bold;
letter-spacing: .3em;
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.slider_service {
display: block;
}
.slider_service li {
width: 100%;
}
.banner-item span {
top: 30px;
}
.banner-item::before {
height: 75%;
}
}
@media screen and (min-width: 1500px) {
.banner-item img {
aspect-ratio: 3 / 2;
}
.banner-item span {
font-size: 1.5rem;
} 
}


/*shop-banner
---------------------------------------------------------------------------*/
.shop-banner {
width: 100%;
max-width: 1280px;
overflow: hidden;
border-radius: 25px;
margin: 60px auto 0;
}
.shop-banner__link {
position: relative;
display: block;
width: 100%;
height: 250px;
color: #fff;
text-decoration: none;
}
.shop-banner__link img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* テキスト */
.shop-banner__text {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
.shop-banner__en {
display: block;
margin: 0;
font-size: 1rem;
font-weight: 400;
letter-spacing: .05em;
line-height: 1.2;
}
.shop-banner__text h3 {
margin: 5px 0 0;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: -.08em;
line-height: 1.3;
white-space: nowrap;
}
/* 矢印の「直線（一本のまっすぐな線）」 */
.shop-banner .arrow {
position: relative;
display: inline-block;
width: 45px;
height: 15px;
margin-left: 25px;
vertical-align: middle;
transition: transform 0.3s ease;
}
/* 直線 */
.shop-banner .arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 45px;
height: 1px;
background-color: #fff;
}
/* 矢印の先端 */
.shop-banner .arrow::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 10px;
height: 1px;
background-color: #fff;
transform-origin: right center;
transform: translateY(-0.5px) rotate(25deg);
}
/* ホバー */
.shop-banner__link:hover .arrow {
transform: translateX(5px);
}
.shop-banner__link:hover {
color: #fff;
}
@media screen and (max-width: 767px) {
.shop-banner {
border-radius: 12px;
}
.shop-banner__link {
height: 150px;
overflow: hidden;
}
.shop-banner__link img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.3) translateX(-18%);
transform-origin: left center;
}
.shop-banner__text {
right: 8%;
}
.shop-banner__en {
margin-bottom: 0;
font-size: .7rem;
}
.shop-banner__text h3 {
font-size: 1.2rem;
}
.shop-banner .arrow {
width: 22px;
margin-left: 10px;
}
.shop-banner .arrow::after {
width: 22px;
}
}

/*商品案内
---------------------------------------------------------------------------*/
.product-inner {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: auto;
padding: 80px 0 80px 80px;
box-sizing: border-box;
}
.product-inner:not(:last-child) {
margin-bottom: 30px;
}

/* 1番目・3番目：右へ伸ばす */
.product-inner::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: calc(100% + 50vw);
border-radius: 25px 0 0 25px;
z-index: 0;
}
/* 2番目：左へ伸ばす */
.product-inner:nth-child(even)::before {
left: auto;
right: 0;
width: calc(100% + 50vw);
border-radius: 0 25px 25px 0;
}

/* ピンク */
.product-inner.pink::before {
background: #fbe5e0;
}
/* 緑 */
.product-inner.green::before {
background: #c9dfd8;
}
/* オレンジ */
.product-inner.orange::before {
background: #fde1b0;
}

/* 左側 */
.product-content {
position: relative;
z-index: 2;
width: 50%;
padding-right: 80px;
box-sizing: border-box;
}

/* 右側画像 */
.product-image {
position: relative;
z-index: 2;
width: 50%;
}
.product-image img {
display: block;
width: 100%;
height: 450px;
object-fit: cover;
border-radius: 25px;
}

/* テキスト */
.product-en {
margin: 0 0 10px;
font-size: .8rem;
line-height: 1.5;
letter-spacing: .04em;
color: #888;
}
.product-content h2 {
margin: 0 0 50px;
font-size: 2.2rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: .08em;
}
.product-text {
margin: 0;
line-height: 2.2;
letter-spacing: 0
}
/*装飾文字　*/
.product-decoration {
position: absolute;
top: 30%;
left: 40%;
z-index: 1;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, .85);
font-size: 15rem;
font-weight: 500;
line-height: 1;
writing-mode: vertical-rl;
pointer-events: none;
}
/* 2番目だけ装飾右側へ */
.product-inner:nth-child(even) .product-decoration {
left: 80%;
}


/* -------------------------------------
 ボタン
------------------------------------- */
.product-buttons {
display: flex;
gap: 10px;
margin-top: 45px;
}
.product-buttons a {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
height: 60px;
border: 1px solid #555;
border-radius: 35px;
background: #fff;
color: var(--maincolor);
text-decoration: none;
transition: .3s ease;
font-size: var(--fontsize)
}
.product-buttons a:hover {
background: none;
color: var(--maincolor);
}

/* -------------------------------------
 2番目だけ反転
------------------------------------- */
/* 2番目だけ左右反転 */
.product-inner:nth-child(even) {
flex-direction: row-reverse;
padding: 80px 80px 80px 0;
}
/* 2番目の文字側の余白も反転 */
.product-inner:nth-child(even) .product-content {
padding-right: 0;
padding-left: 80px;
}
@media screen and (max-width: 1300px) {
.product-buttons {
gap: 5px;
font-size: 80%;
}
}
@media screen and (max-width: 1023px) {
.product-inner {
width: calc(100% + 6vw);
padding: 60px 0 60px 60px;
}
/* 2番目だけ左右反転 */
.product-inner:nth-child(even) {
  width: calc(100% + 6vw);
  padding: 60px 60px 60px 0;
  margin-left: -6vw;
}
.product-content {
padding-right: 50px;
}
/* 2番目だけ左右反転 */
.product-inner:nth-child(even) .product-content {
padding-right: 0;
padding-left: 50px;
}
.product-content h2 {
margin-bottom: 35px;
font-size: 1.8rem;
}
.product-text {
line-height: 2;
}
.product-image img {
height: 450px;
}
}

@media screen and (max-width: 767px) {
.product-inner {
display: block;
overflow: hidden;
padding: 40px;
margin-left: 0;
box-sizing: border-box;
}
/* 2番目の反転を解除 */
.product-inner:nth-child(even) {
padding: 40px;
box-sizing: border-box;
}
.product-content {
width: 100%;
padding-right: 0;
}
/* 2番目だけ左右反転 */
.product-inner:nth-child(even) .product-content {
width: 100%;
padding-right: 0;
padding-left: 0;
}
.product-en {
margin-bottom: 10px;
font-size: .8rem;
}
.product-content h2 {
margin-bottom: 30px;
font-size: 1.6rem;
}
.product-text {
line-height: 1.9;
}

/* 画像 */
.product-image {
width: 100%;
margin-top: 40px;
}
.product-image img {
height: 300px;
border-radius: 18px;
}

/* 装飾文字 */
.product-decoration {
top: 15%;
left:80%;
font-size: 9rem;
}
/* 枠 */
.product-buttons {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 100%;
}
.product-buttons a,
.product-buttons a:last-child {
flex: 0 0 auto;
width: 100%;
height: 50px;
}
}



@media screen and (min-width: 768px) {

} 
@media screen and (min-width: 1024px) {

}
@media screen and (min-width: 1200px) {

}