@charset "UTF-8";
/* CSS Document */
 html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333333;
}

@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: normal; 
  src: url('/fonts/kiloji_b.ttf') format('ttf');
}
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: bold; 
  src: url('/fonts/kiloji_b.ttf') format('ttf');
}
 
/* きろ字
  font-family: 'kiloji', sans-serif !important;
*/

ul {
  list-style: none;
}
h2, h3 {
	margin: 0;
}
a {
	text-decoration: none;
}

a:hover {
   opacity: 0.8; 
}

img {
	width: 100%;
}

.pc_block {
	display: block;
}

.sp_block {
	display: none;
}

.mt_10 {
	margin-top: 10px !important;
}
.mt_20 {
	margin-top: 20px !important;
}

.mt_40 {
	margin-top: 40px !important;
}

.mt_60 {
	margin-top: 60px !important;
}

.mt_140 {
	margin-top: 140px !important;
}

.mt_90 {
	margin-top: 90px !important;
}

.mr_30_pc {
	margin-right: 30px;
}
.mt_30_pc {
	margin-top: 30px;
}

.fz_24 {
	font-size: 24px;
}

article {
	overflow: hidden;
	margin-top: 145px;
}

/* 初期状態（非表示） */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* 表示状態 */
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 左右シーソー */
@keyframes seesaw {
  0% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

.seesaw {
  animation: seesaw 1.2s steps(2, end) infinite;
  transform-origin: center bottom;
}

/* 上下 */
@keyframes kakukaku-y {
  0% {
    transform: translateY(-4px);
  }

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

.kakukaku-y {
  animation: kakukaku-y 1.2s steps(2, end) infinite;
}

/* 震える */
@keyframes buruburu {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(-1px, -1px); }
  60%  { transform: translate(1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

.buruburu {
  animation: buruburu 0.3s infinite;
}





/*==============
　header
===============*/
header {
	background-color: #c4ad93;
	width: 100%;
}
#header_content {
	position: relative;
}

.header_content_kv {
	width: 80%;
	margin: 0 auto;
	position: relative;

}

#header_content h1 {
    font-size: clamp(2rem, 4vw, 5.2rem);
    font-weight: 700;
    line-height: 5.1rem;
    letter-spacing: 2px;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #9E8C7A;
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#ring {
  position: absolute;
  bottom: -3%;
  right: -2%;
  width: 8%;
  animation: rotateRing 10s linear infinite;
}

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

.text_c1 {
	color: #c4ad93;
	position: absolute;
    top: 17%;
    left: 43%;
}

.text_c2 {
	color: #edebe4;
	text-align: center;
	margin: 5px 0 14px;
}

.border {
	height: 50px;
	background: #edebe4;
}

/*==============
　contents
===============*/
/* lead */
.lead {
	line-height: 2.2rem;
	text-align: center;
}

/* nav */
/*
.nav_flex {
	display: flex;
	gap: 40px;
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.nav_flex2 {
	display: flex;
	gap: 40px;
	width: 59.2%;
	margin: 0 auto;
	text-align: center;
}

.nav_list {
	
}

.nav_list_img {
	margin: 0 auto;

}

.nav_list_name {
    color: #c0192f;
    font-weight: 700;
    width: fit-content;
    margin: 8px auto 2px;
    font-size: 1.2rem;
}

.down {
	width: 7%;
	margin: 0 auto;
}
*/

.nav_flex,
.nav_flex2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 80%;
    margin: 0 auto;
}

.nav_flex2{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: calc(80% * 3 / 4);
    margin: 40px auto 0;
}


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

.nav_list_name {
    color: #c0192f;
    font-weight: 700;
    margin: 8px auto 2px;
    font-size: 1.8rem;
    text-align: center;
}

.down {
    width: 14px;
    margin: 0 auto;
}

/* contents 共通 */
.content {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

.content_nam {
    font-size: 2rem;
    background: #a38f7c;
    border: 1px #a38f7c solid;
    padding: 1px 12px 4px;
    color: #fff;
    width: fit-content;
    border-radius: 50%;
    font-weight: 700;
    margin: 0 auto;
}

.content_title {
    color: #c0192f;
    font-size: 3rem;
    font-weight: 700;
}

.content_subtitle {
    color: #c0192f;
    font-weight: 700;
    font-size: 1.8rem;
}

.content_lead {
    font-size: 1.6rem;
    line-height: 3rem;
    margin-top: 30px;
}

/* recommended items */

/*
.recommend-card{
	position:relative;
	overflow:visible;
	max-width:1000px;
	margin:auto;
	padding: 30px 80px 0px;
	background:#fff;
	border:1px solid #b8a694;
	border-radius:300px;
	text-align:center;
}

.recommend-title{
  font-size:2rem;
  color:#a89684;
  font-weight:700;
  letter-spacing:.08em;
}

.item-img{
    max-width: 300px;
}

.item-tag{
  width:220px;
  margin:-20px auto 30px;
  padding:12px;
  background:#ff00ff;
  color:#fff;
  font-size:24px;
  font-weight:bold;
}

.item-model{
  font-size:1rem;
  color:#4d4d4d;
  margin: 0;
}

.item-name{
	font-size: 1.1rem;
	color:#4d4d4d;
    margin: 6px 0 0;
}

.shop-btn{
	position: relative;
    left: 20%;
    bottom: -30px;
	transform: translateX(-50%);
	max-width: 380px;
	padding: 8px 80px 14px;
	border-radius: 999px;
	background: #b09d8b;
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	z-index: 20;
	display:inline-block;
	  margin-top:30px;
}

.slide-btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
    width: fit-content;
    height: fit-content;
	background:none;
	border:none;
	padding:0;
	cursor:pointer;
	z-index:10;
}

.slide-btn img{
  width: 34%;
  height:auto;
  display:block;
}

.prev{
  left: -2%;
}

.next{
  right: -12%;
}

.dots{
  margin-top:70px;
  text-align:center;
}

.recommendSwiper{
	overflow:hidden;
}

.swiper-slide{
	text-align:center;
	padding-bottom:0;
}

.swiper-pagination{
	position:static !important;
	margin-top:40px;
}

.swiper-pagination-bullet{
	width:14px;
	height:14px;
	margin:0 8px !important;
	background:#ddd;
	opacity:1;
}

.swiper-pagination-bullet-active{
	background:#b09d8b;
}
*/

.recommend-title{
	font-size:3rem;
	color:#a89684;
	font-weight:700;
	letter-spacing:.08em;
	margin-bottom: 3px;
}

.recommend-card{
    position:relative;
    overflow:visible;
    max-width:700px;
    margin:auto;
    padding: 30px 80px 60px;
	background:#fff;
    border:1px solid #b8a694;
    border-radius:300px;
    text-align:center;
}

.recommendSwiper {
    overflow:hidden;
}

.swiper-slide {
    text-align:center;
}

.item-img {
    max-width:300px;
}

.item-model {
  font-size:1.6rem;
  color:#4d4d4d;
  margin: 0;
}

.item-name{
    font-size: 1.8rem;
    color: #4d4d4d;
    margin: 0;
}

.shop-btn{
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    display:inline-block;
    padding:8px 80px 14px;
    border-radius:999px;
    background:#b09d8b;
    color:#fff;
    text-decoration:none;
    font-size:1.8rem;
    font-weight:bold;
    z-index:100;
	max-width: 290px;
}

.swiper {
    overflow: hidden !important;
}

.swiper-pagination{
    position:static !important;
    margin-top:50px;
    text-align: center !important;
}

.swiper-pagination-bullet{
    width:14px;
    height:14px;
    margin:0 8px !important;
    background:#ddd;
    opacity:1;
}

.swiper-pagination-bullet-active{
    background:#b09d8b;
}

.slide-btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
    width: fit-content;
    height: fit-content;
	background:none;
	border:none;
	padding:0;
	cursor:pointer;
	z-index:10;
}

.slide-btn img{
  width: 34%;
  height:auto;
  display:block;
}

.prev{
  left: -3%;
}

.next{
  right: -12%;
}

.swiper-pagination-bullet-active {
	background: #a38f7c !important;
}

.swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
	background: #ddd;
}

/* comingsoonのcolor */
.shop-btn.is-coming {
    background: #c9c9c9;
    cursor: default;
    pointer-events: none;
}

/* === 01 === */
.content01_img {
    display: flex;
    gap: 30px;
}

.content01_img_r {
    position: relative;
}

.content01_img_text {
    width: 60%;
    position: absolute;
    top: -10%;
    right: -5%;
}

.recommend-section{
    padding: 4% 9%;
    background: #fdf5e8;
    border-radius: 40px;
}

/* === 02 === */
.content02_img {
	display: flex;
    gap: 20px;
    width: 90%;
    margin: 30px 0 0 auto;
}

.img_layout1 {
	position: relative;
	width: 90%;
}

/* 画像1枚 テキスト右 */
.img_layout1_text_r {
	position: absolute;
	top: 10%;
	right: -9%;
	width: 25%;
}

.img_layout2 {
	position: relative;
    width: 70%;
    margin: 20px 0 0 auto;
}

/* 画像1枚 テキスト左 */
.img_layout2_text {
    position: absolute;
    top: 17%;
    left: -22%;
    width: 25%;
}

.recommend-section2 {
    padding: 4% 9%;
    background: #e6f0f4;
    border-radius: 40px;
}

.img_layout1_3 {
    width: 70%;
    margin: 30px auto 0;
}
/* === 03 === */
.recommend-section3 {
    padding: 4% 9%;
    background: #EFE5D8;
    border-radius: 40px;
}

.content03_img {
	display: flex;
    gap: 20px;
    width: 80%;
    margin: 30px auto 0;
}

.content_img03_r {
    align-content: end;
}

/* === 04 === */
.content04_img {
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 30px auto 0;
}

.content04_img_l, .content04_img_r {
	width: 50%;
}

.content04_img_r {
    position: relative;
}

.content04_img_text {
    position: absolute;
    width: 60%;
    top: -14%;
    right: 0%;
}

.recommend-section4 {
    padding: 4% 9%;
    background: #F7E6E2;
    border-radius: 40px;
}

/* === 05 === */
.recommend-section5 {
    padding: 4% 9%;
    background: #F9F3DC;
    border-radius: 40px;
    padding-bottom: 70px;
}

.content05_img {
	display: flex;
    gap: 20px;
    width: 100%;
    margin: 30px auto 0;
    position: relative;
}

.content05_img_l {
    width: 50%;
    position: relative;
}

.content_img05_1 {
    width: 65%;
    position: absolute;
    top: -11%;
    left: 19%;
}

.content_img05_2 {
    width: 85%;
    position: absolute;
    top: -8%;
    left: 8%;
}

.content05_img_r {
    width: 50%;
}

/* === 06 === */
.recommend-section6 {
    padding: 4% 9%;
    background: #ddede3;
    border-radius: 40px;
    padding-bottom: 70px;
}

.content06_img {
    position:relative;
    width: 80%;
	margin-top: 30px;
}

.content06_img_text {
    position: absolute;
    width: 20%;
    top: 20%;
    right: 5%;
}

.content06_img_text {
}

.content06_img2 {
    width: 80%;
	display: flex;
    gap: 20px;
    margin: 30px auto 0;
}


.content06_img_l {
    position: relative;
	width: 60%;
}

.content06_img_r {
	width: 40%;
}

.content06_img_text1 {
    width: 5%;
    position: absolute;
    top: 30%;
    left: 17%;
}

.content06_img_text2 {
    width: 7%;
    position: absolute;
    top: 20%;
    right: 14%;
}

.content06_img_text3 {
}


/* === 07 === */
.recommend-section7 {
    padding: 4% 9%;
    background: #dfe5f2;
    border-radius: 40px;
    padding-bottom: 70px;
}

.content07_img {
    position:relative;
    width: 100%;
	margin-top: 30px;
    display: flex;
    gap: 20px;
}

.content07_img_l, .content07_img_r {
    width: 50%;
}

.content07_img_l {
    position: relative;
}

.content07_img_l_text {
    width: 28%;
    position: absolute;
    left: 39%;
    top: 17%;
}


/* === footer === */
.footer_index {
    color: #9e8c7a;
    font-size: 2rem;
}

.footer_sub {
    color: #c4ad93;
    margin: 0 0 30px;
    font-size: 1.1rem;
}

.footer_name {
    color: #9e8c7a;
    margin: 30px 0 30px;
    font-size: 1.1rem;
    font-weight: 700;
}

.autoSwiper{
    width:100%;
    overflow:hidden;
}

.autoSwiper .swiper-wrapper{
    transition-timing-function: linear !important;
}

.autoSwiper .swiper-slide{
    width:220px !important;
}

.autoSwiper .swiper-slide img{
    display:block;
    width:100%;   /* 好きなサイズ */
}

/* footer */
.content_footer {
	width: 100%;
	text-align: center;
}




/* ---- レスポンシブ ---- */
@media screen and (min-width: 1299px) {
.next{
  right: -14%;
}
}
@media screen and (max-width: 1300px) {
.next{
  right: -14%;
}
}
@media screen and (max-width: 1100px) {
#header_content {
    margin-top: 95px;
}
    
#header_content h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 2.8rem;
    top: -3%;
}    
    
.recommend-section {
    padding: 4% 5%;
}
    
.text_c1 {
    top: 18%;
    left: 38%;
}
    
#ring {
    bottom: -5%;
    right: -3%;
    width: 11%;
}

.next {
    right: -16%;
}
    
.prev {
    left: -3%;
}

.shop-btn {
    bottom: -22px;
}

.swiper-pagination {
    position: static !important;
    margin-top: 40px;
}
}

@media screen and (max-width: 820px) {
#header_content h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 2.4rem;
    top: -4%;
}
    
.text_c1 {
    top: 82px;
    left: 39%;
    font-size: 1.2rem;
}
    
.content {
    width: 81%;
}
    
.recommend-title {
    font-size: 3.1rem;
    position: absolute;
    top: -12%;
    left: -1%;
}

.item-img {
    max-width: 460px;
}

.prev {
    left: -4%;
}
    
.next {
    right: -19%;
}
    
.shop-btn {
    padding: 7px 70px 14px;
}   
}
/*@media screen and (max-width: 768px) {*/
@media (width < 768px) {
article {
	margin-top: 85px;
}
.pc_block {
	display: none;
}
.sp_block {
	display: block;
}

.spmt_60 {
    margin-top: 60px !important;
}
    
#sp_ring {
    position: absolute;
    bottom: -4%;
    right: -8%;
    width: 23%;
    animation: rotateRing 10s linear infinite;
}
    
#sp_ring img {
	width:100%;
    height:auto;
    display:block;
}
    
#header_content {
    margin-top: 15px;
}
    
#header_content h1 {
    font-size: clamp(5.6rem, 4vw, 3.2rem);
    line-height: 5.4rem;
    top: 14%;
}  
    
.content_lead {
    font-size: 2rem;
    line-height: 3.8rem;
}
    
.text_c1 {
    top: 27%;
    left: 29%;
    font-size: 2.8rem;
    }    
    
.text_c2 {
    font-size: 1.8rem;
}    
    
.nav_flex,
.nav_flex2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    gap: 24px 16px;
}

/* 最後だけ中央 */
.nav_flex2 .nav_list:last-child{
    grid-column: 1 / 3;
    justify-self: center;
    width: calc((100% - 16px) / 2);
}
    
.nav_list_name {
    font-size: 2.6rem;
    text-align: center;
}    
    
/*=== contents ==*/
.content {
    width: 90%;
}

/* 01 */
.content01_img {
    display: block;
}
  
.content01_img_l, .content01_img_r {
    width: 90%;
}    
    
.content01_img_r {
    margin: 0 0 0 auto;
}    
    
.shop-btn {
    padding: 7px 75px 14px;
}

#header_inst {
	margin-top: 10px;
}
article {
	margin-top: 70px;
}
    
/*#header_content h1 {
    top: 3%;
    font-size: clamp(2.6rem, 4vw, 3.2rem);
    line-height: 2.6rem;
}
*/    
.text_c1 {
    top: 28%;
    left: 33%;
    font-size: 2.2rem;
}
    
.text_c2 {
    margin-top: 14px;
    font-size: 1.6rem;
}

.content_sub {
	width: 90%;
	margin: 50px auto 0;
}	
    
.spmt_50 {
    margin-top: 50px !important;
}
    
.w100 {
    width: 100%;
}
 
.down {
    margin: 0 auto 20px;
}
    
/* 01 */
.recommend-section, .recommend-section2, .recommend-section3, .recommend-section4, .recommend-section5, .recommend-section6, .recommend-section7 {
    padding: 20% 5% 2%;
}
    
.recommend-card {
    padding: 75px 28px 150px;
    position:relative;
}    
    
/*.recommend-title {
    font-size: 1.8rem;
    position: absolute;
    right: 3%;
    top: -12%;
}*/
    
.prev {
    left: -5%;
}
    
.next {
    right: -20%;
}    
    
.shop-btn {
    bottom: 50px !important;
    padding: 8px 20px 14px;
    font-size: 2.4rem;
    /* max-width: 390px; */
    width: 50%;
}    
   
.swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
}
    
.item-model {
    font-size: 1.3rem;
}
    
.item-name {
    font-size: 1.6rem;
}    
    
.swiper-pagination {
    margin-top: 20px;
}    
    
.content01_img_r {
    margin-right: -21px;
}

.content01_img_text {
    right: 6%;
}
    

/* 02 */
.img_layout1 {
    margin: 0 auto 30px;
}
    
.content02_img {
    display: block;
    margin: 0;
    width: 100%;
}

.content02_img_l {
    width: 90%;
    margin-left: -21px;
}
    
.content02_img_r {
    width: 80%;
    margin: 30px 0 0 auto;
}

.img_layout2 {
    width: 80%;
    margin: 20px 20px 0 auto;
}

.img_layout1_3 {
    width: 90%;
}
    
/* 03 */
.content03_img, .content04_img, .content05_img, .content06_img2, .content07_img {
    display: block;
    width: 100%;
    margin: 0;
}

.content_img03_l {
    width: 100%;
    text-align: end;
}

.content_img03_l img {
    width: 86%;
    margin-right: -21px;
}

.content_img03_r {
    width: 100%;
    text-align: left;
}

.content_img03_r img {
    width: 70%;
    margin-top: 30px;
}

/* 04 */
.content04_img_l {
    width: 100%;
}

.content04_img_r {
    width: 90%;
    margin: 30px 0 0 auto !important;
}
   
.content04_img_text {
    width: 30%;
    top: 8%;
    left: -9%;
}
    
/* 05 */
.content05_img_l, .content05_img_r {
    width: 100%;
}

.content05_img_l {
    margin-left: -21px;
}

.content05_img_r {
    margin: 30px auto 0;
}

.content05_img_l_img {
    width: 90%;
    margin-left: -36px;
}
    
.content_img05_1 {
    width: 40%;
    position: absolute;
    top: -6%;
    left: 33%;
}
    
.content_img05_2 {
    width: 58%;
    position: absolute;
    top: -9%;
    left: 24%;
}
    
/* 06 */
.content06_img {
    width: 100%;
}

.content06_img_l {
    width: 90%;
    margin: 30px 0 0 -21px;
}

.content06_img_r {
    width: 70%;
    margin: 30px 0 0 auto;
}

/* 07 */
.content07_img_l {
    width: 90%;
    margin-left: -21px;
    margin-top: 30px !important;
}


.content07_img_r {
    width: 100%;
    margin-top: 30px;
}
    
/* footer */
.content_footer {
	width: 100%;
	text-align: center;
}

.footer_name {
    font-size: 2.1rem;
}
     
}