/*--------------------------------
	全体　
 --------------------------------*/
html, body {
	width: 100%;
	height: 100%;
	font-family: "MS P明朝","Noto Serif JP";
	background-color: #590a27;
	margin: 0 0;
	color: #999398;
}
html {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

/*--------------------------------
	ローディング画面　
 --------------------------------*/
.loader {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(127,107,90,0.9);
	z-index: 555;
	top: 0;
	left: 0;
	animation-duration: 8s;
	animation-name: fadeout;
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
/* ロードイメージ */
.load-image {
	position: relative;
	top: 35%;
	background-image: url(../images/forteLOGO_gray_text.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 50vw;
	height: 50vw;
	margin: auto;
	animation-duration: 8s;
	animation-name: fadeout;
}
@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*--------------------------------
	ヘッダー 
 --------------------------------*/
header {
	width: 100%;
	height: 5%;
}
/*ハンバーガーメニュー  */
.openbtn2{
	position: fixed;
	left:85%;
	width: 50px;
	height:50px;
	cursor: pointer;
	z-index: 1001;
} 
/* ボタン内側 */  
.openbtn2 span{	  display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 13px;
	height: 1px;
	background: #999398;
}
.openbtn2 span:nth-of-type(1) {
	top:22px; 
	width: 50%;
}  
.openbtn2 span:nth-of-type(2) {
	top:29px;
	width:30%;
}  
  /*activeクラスが付与されると線が回転して×に*/  
.openbtn2.active span:nth-of-type(1) {
	top: 20px;
	left: 16px;
	transform: translateY(6px) rotate(-45deg);
	width: 35%;
	background-color: #534d4d;
}
.openbtn2.active span:nth-of-type(2) {
	top: 32px;
	left: 16px;
	transform: translateY(-6px) rotate(45deg);
	width: 35%;
	background-color: #534d4d;
}
/* スライドメニュー */
.slider-menu{
	position: fixed;
	right:-60%;
	/*width: 35%;*/
	height: 100%;
	top:0;	
	background: rgba(153, 147, 152, 0.9);
	transition: all 1.2s ease-in-out;
	z-index:100;
}
.slider-menu.active{
	right: 0;
	transition: all 1.2s ease-in-out;
}
ul{
	margin-top: 15vw;
}
li{
	list-style: none;
	color: #534d4d;
	text-align: right;
	margin-right: 7vw;
	line-height: 9vw;
}
a{
	text-decoration: none;
	color:inherit
}

/*--------------------------------
	フッダー
 --------------------------------*/
#DivFooter {
	display: grid;
	grid-template-columns: 90% 10%;
	height: 2%;
	width: 95%;
	margin: 8vw auto 0 auto;
	border-top: solid 1px;
	padding: 2vw 0;
}
#instagram {
	text-align: center;
}

/*--------------------------------
	ページ共通
 --------------------------------*/
/* ページタイトル */
.page-title {
	text-align: center;
	font-size:3.5vw;
}
/* プライスリンク */
.price-link {
	text-align: right;
	margin-right: 7vw;
}
.price-link a{
	transition: 0.3s;
	text-decoration:none;
	color:unset;

}
.price-link a:hover{
	color:#ffffff;
}
.none{
	display:none;
}

.select-box {
	display: inline-flex;
	align-items: center;
	position: relative;
}
.select-box::after {
	position: absolute;
	right: 22px;
	width: 10px;
	height: 7px;
	background-color: #999398;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	pointer-events: none;
}
.select-box select {
	appearance: none;
	padding: .4em calc(.8em + 30px) .4em .8em;
	border: 1px solid #999398;
	border-radius: 3px;
	background-color: #fff;
	color: #ffffff;
	font-size: 2.5vw;
	cursor: pointer;
	background-color:transparent;
}
select option {
	background: #590a27;
}
/*---------------------------------------*/
/*               スマホ　     　　       */
/*---------------------------------------*/
@media screen and (min-width:360px ) {
	body{
		font-size:min(2.5vw,20px);
	}
	/* ロードイメージ */
	.load-image {
		top: 35%;
		width: 50vw;
		height: 50vw;
	}

}
/*---------------------------------------*/
/*                   PC       　　       */
/*---------------------------------------*/
@media screen and (min-width:960px ){
	body{
		font-size:min(0.8vw,58px);
	}
	/* ページタイトル */
	.page-title{
		font-size: 1.1vw;
		height: 2vw;
	}
	/* ---- ロードイメージ　----- */
	.load-image {
		top: 18%;;
		width: 30vw;
		height: 30vw;
	}
	/* ---- スライダーメニュ　----- */
	.openbtn2{
		left:95%;
		width: 3vw;
		height:3vw;
	}
	.openbtn2 span:nth-of-type(1) {
		top:0.5vw; 
		width: 50%;
	}  
	.openbtn2 span:nth-of-type(2) {
		top:1vw;
		width:30%;
	}  
	.slider-menu{
		right:-80%;
		width: 15%;
	}
	ul{
		margin-top: 3vw;
	}
	li{
		list-style: none;
		color: #534d4d;
		text-align: right;
		margin-right: 3vw;
		line-height: 2.5vw;
	}
	.select-box select {
		appearance: none;
		padding: .4em calc(.8em + 30px) .4em .8em;
		border: 1px solid #999398;
		border-radius: 3px;
		background-color: #fff;
		color: #ffffff;
		font-size: 0.8vw;
		cursor: pointer;
		background-color: transparent;
	}
	#instagram img{
		width:1.3vw;
		height:1.3vw;
	}
}