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

/*=============
base
==============*/
html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

ul li{
	list-style-type: none;
}

a{
	text-decoration: none;
	color: #f8f8f8;
}

span{
	color: #edb315;
}

/*=============
slider.js用のcss
=============*/

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	position: relative;
}


/*=============
top_animation
=============*/


.animation_news::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background-color: #fff;
bottom: -3px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.8s; /*変形の時間*/
}

.animation_news:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}


/*=============
top_nav
=============*/

#top_nav{
	position: fixed;
	z-index: 9999;
	right: 0;
	width: 200px;
	background-color: rgba(0,67,86,0.7);
	height: 100%;
}

#top_nav ul{
	margin-top: 50px;
}

#top_nav ul li{
	padding: 15px 20px;	
/*	margin-left: -40px;*/
	font-size: 1em;
	line-height: 40px;
}

#top_nav ul li:hover{
	background-color: #4a133a;
	transition: 0.7s;
}


.heart_icon,.cart_icon {
	width: 20%;
}

#coupon{
	margin-top: -250px;
}

.coupon_icon{
	position: absolute;
	transform: rotate(-25deg);
	filter: drop-shadow(5px 0 10px #fff );
}
	
.coupon_icon:hover{
	margin-top: 150px;
	transition: 0.4s;
	transform: none;
}

.logo{
	width: 100%;
/*	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
/*	margin-top: 40%;*/
	filter: drop-shadow(5px 0 10px #fff );
}

.logo:hover{
	opacity: 0.8;
}

#top_news{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
/*	width: 100%;
	display: inline-block;
	text-align: center;*/
	color: #f8f8f8;
}



/*=============]
shop
=============*/

#shop {
	position: relative;
}

.titlle_line{
	background-color: #4a133a;
	width: 100%;
	height: auto;
	color: #f8f8f8;
}

.titlle_line h2{
	margin-left: 25px;
}

/*=============
aside_nav
=============*/

.container{
	width: 100%;
}
.container aside{
	margin: 0 auto;
}

aside nav ul{
	display: flex;
	}
	
aside nav ul li:nth-child(4){
	clear: both;
}

/*=============
swiper（gallery）
=============*/

.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 300px;
  height: 100%;
  text-align: center;
  line-height: 300px;
/*  text-align: center;*/
}

.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}


/*=============
swiper（SALE SALE SALE SALE）
=============*/

.swiper-wrapper_sale {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide_sale {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
/*  text-align: center;*/
}

.swiper-slide_sale:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide_sale:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide_sale:nth-child(3n + 3) {
  background-color: #53c638;
}

.swiper-button-prev_sale,
.swiper-button-next_sale {
  width: 24px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  background-size: 24px 40px; /* 表示したいサイズ */
  transform: translateY(-50%);
  margin-top: 0;
}

/* 次ページボタンのスタイル */
.swiper-button-next_sale {
background-image: url('https://kiomiru.co.jp/blog/wp-content/uploads/2021/09/img_arrow_black_01.png');
}

/* 前ページボタンのスタイル */
.swiper-button-prev_sale {
  background-image: url('https://kiomiru.co.jp/blog/wp-content/uploads/2021/09/img_arrow_black_01.png');
  transform: translateY(-50%) scale(-1, 1); /* 左右反転 */
}

.swiper-button-prev_sale:after,
.swiper-button-next_sale:after {
 display: none;
}



/*=============
cssシグネチャ
=============*/

#inquiry #top_nav ul li:nth-last-child(3){
	background-color: #4a133a;
}

#inquiry #top_nav ul li:nth-last-child(3) a{
	opacity: 0.8;
}


/*=============
form
=============*/

form, .me{
	height: 100vh;
	background-color: #4a133a;
	opacity: 0.9;
}

form p{
	width: 100%;
	margin: 0 auto 30px;
	padding: 15px;
	line-height: 2em;
	text-align: center;
}

form div{
	display: flex;
	padding: 20px;
	background-color: #fff;
	opacity: 0.7;
	margin: 10px 20%;
}

form h2{
	text-align: left;
	font-weight: 500;
	font-size: 2em;
	padding: 30px;
}



label{
	width: 250px;
	text-align: center;
	color: #000;
}

input, textarea{
	margin: 0 auto;
	width: 400px;
	background-color: #999999;

}

textarea{
	height: 80px;
	overflow-y: scroll;
}

::placeholder{
	color: #fff;
}



.submit_b {
width: 100px;
/*		margin-top: 50px;
	margin-left: auto;
	margin-bottom: 0;*/
/*	margin: 50px auto 0;*/
}
.inquiry, .submit_b  {
	color: #f8f8f8;
}
.button {
  display       : inline-block;
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 15px 5px;   /* 余白       */
  background    : #999999;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 5px 5px 16px #666666;  /* 影の設定 */
  border        : 2px solid #999999;    /* 枠の指定 */
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #999999;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

#inquiry .logo{
	padding: 3%;
	margin: 10px auto;
}


/*=============
footer
=============*/

footer{
	text-align: center;
	background-color: rgba(0,67,86,0.9);
	color: #f8f8f8;
	padding: 1.5%;
}

.openbtn {

}