/*--------------------------------------
背景関係CSS
---------------------------------------*/


.bgGR {
	background-color:#1C7024;
}

.bgptn {
	background-image: url("../img/bg_ptn.jpg");
	width: 100%;
	background-repeat: repeat;
	background-size: auto;
}




.bg_box {
	background-color:#FFFFFF;
    border-radius: 25px;
	padding:3%;
}



.goods_tyui {
    border-radius: 10px;
	padding:1% 3%;
	margin: 0 10%;
	border: solid 2px #FA9123;
	color: #FA9123;
	font-size: 80%;
}



.box_orange {
	background-color:#FFFFF2;
    border-radius: 25px;
	padding:3%;
}

.box_orange02 {
	background-color:#FFDE9F;
    border-radius: 25px;
	padding:3%;
}


.shadow {
  box-shadow: 0px 0px 20px #4FC64F;
}


/*--------------------------------------
カミングスーン 画像回転
---------------------------------------*/

.rotate img {
  animation: rotation 200s linear infinite;
}
/* アニメーション */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/*--------------------------------------
ボタン系CSS
---------------------------------------*/
/* イベントボタン(ホバー時アニメーション)　*/
.event_btn{
	position:relative;
	top:0;
}
.event_btn:hover{
	top:-10px;
	transition:0.3s;
}


/* 青ボタンのデザイン */
.orange-button {
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  /* サイズ設定 */
  min-width: auto;
  padding: 18px 50px;
  margin: 2% auto;
  /* 見た目：青背景、白枠、カプセル型 */
  background-color: #FA9123;
  border-radius: 100px;
  /* 文字の設定 */
  color: #ffffff;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none; /* リンクの下線を消す */
  
}
/* 右側の矢印（>） */
.orange-button::after {
  content: '';
  position: absolute;
  right: 35px;
　top: 50%;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg); /* 傾けて矢印にする */
  margin-top: -21px;
}
.orange-button a{
	color: white;
}




	


/* youtube 縦横比率固定 */
.movie {
  width: 100%; /* 横幅変更 */
  padding: 0;
  box-sizing: border-box;
}
.movie-wrap {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/*--------------------------------------
　商品リスト　関連CSS
---------------------------------------*/

.shop_goods {
	width: 80%;
	margin: 20px 10%;
	padding: 30px 18px 30px;
	background-color: #ffffff;
	font-family: serif;
	color: #102875;
	font-weight: bold;
	font-size: 200%;
	border-radius: 20px;
}



.waku_pd {
	display: flex;
	flex-wrap:wrap;
}

.waku_goods {
	width: 48%;
	margin: 10px 1% 0px;
	padding: 20px 20px;
	font-size: 100%;
	float: left;
	flex-direction:column;
	align-items: flex-start;
	background-color: #FFFFFF;
	border-radius: 20px;
  box-shadow: 0px 0px 5px #FFA96E;

}







.goods_name {
	color: #FA9123 ;
	padding: 10px  0px 0px;
}


.suryo_gentei {
	color: #ffffff ;
	padding: 10px  10px;
	margin: 5px 0px 0px;
	width: 100%;
	background-color: #DB3C38;
}

.goods_suryo p{
	color: #ffffff ;
	padding: 5px  10px;
	margin: 5px 0px 0px;
	width: 100%;
	background-color: #FA9123;
	font-size: 90%;
	text-align: center;
}


@media screen and (max-width: 767px){
	
.waku_pd {
	padding: 0 20px;
	display:block;
}
	
	
.shop_goods {
	width: 80%;
	margin: 20px 10%;
	padding: 20px 18px 20px;
	background-color: #F0F0F0;
	font-family: serif;
	color: #102875;
	font-weight: bold;
	font-size: 110%;
	border-radius: 10px;
}
	
	
	

.waku_goods {
	width: 98%;
	margin: 20px 1% 0px;
	padding: 20px 20px;
	font-size: 140%;
	float: left;
	border-radius: 20px;
  box-shadow: 0px 0px 5px #FFA96E;
	
}





}




/*--------------------------------------
コラボルーム 本文左右組み替え
---------------------------------------*/

.media{
min-height:1px;
display: flex;
	
}



@media (max-width:767px){


.media01{
flex-direction: column;
}
	
.media02{

flex-direction:column-reverse;
}
	
	
	
}



.media_01_r{
width:90%;
float: none;
margin: 0 5%;
}


.media_02_l{
width:90%;
float: none;
margin: 0 5%;
}




@media (min-width:768px){
	

.media_01_l{
width:60%;
height:auto;
float:left;
}


.media_01_r{
width:40%;
height:auto;
float:left;
margin:  0;
}




.media_02_l{
width:40%;
height:auto;
float:left;
margin: 0;
}


.media_02_r{
width:60%;
height:auto;
float:left;
}



}




 /*--------------------------------------
スマホの時だけ改行
---------------------------------------*/
.sma{
    display: block;
}



/* ホテルボタン　*/

.wan_hotel_btn{
	position:relative;
	top:0;
}
.wan_hotel_btn:hover{
	top:-10px;
	transition:0.3s;
}




/*--------------------------------------
ピンク角丸装飾文字
---------------------------------------*/
.pink_bgtxt {
  background-color: #E75297; /* 背景色 */
  border-radius: 100vh;      /* 角の丸み */
  padding: 2%;        /* 文字と枠の余白 */
  display: flex;
  font-weight: 700;
  color: white;
  margin: 0 auto;
  text-align: center;
  width: 60%;
  justify-content: center;      /* 左右中央揃え */
  align-items: center;          /* 上下中央揃え */
}



/*--------------------------------------
TOPページバナーCSS
---------------------------------------*/
.bana_goods {
  background-color: #ffffff;
  border-radius: 0 50px 0 0;
  border-style:solid solid solid none;
  border-color: #FA9123;
  border-width:5px;
  padding: 2%;
  display: flex;
  margin: 0 auto 0 0;
  text-align: center;
  width: 80%;
  justify-content: center;      /* 左右中央揃え */
  align-items: center;          /* 上下中央揃え */
  box-shadow: 10px 10px 0px #FA9123;
	transform: translateX(-10px);
}


.bana_hotels {
  background-color: #ffffff; 
  border-radius: 50px 0 0 0; 
  border-style:solid none solid solid ;
  border-color: #FA9123;
  border-width:5px;
  padding: 2%; 
  display: flex;
  margin: 0  0 0 auto;
  text-align: center;
  width: 80%;
  justify-content: center;      /* 左右中央揃え */
  align-items: center;          /* 上下中央揃え */
  box-shadow: -10px 10px 0px #FA9123;
	transform: translateX(10px);
}



/*-----------------------------------------------
TOPICS(おしらせ)
------------------------------------------------*/



.topics {
	font-size: 110%;
	font-weight: bold;
}

.underline {
	border-bottom: dashed 1px #383838;
	margin: 10px 0 ;
}

.topics a{
	color: #302C2C;
}

.day-date {
	width: 30%;
	padding: 0 0 0 10px;
	color: #D83379;
	float: left;
}

.content-date {
	width: 70%;
	color: #302C2C;
	float: left;
}


/* スクロールバー デコ */

.scrollArea{
	height: 120px;
	overflow: auto;
	padding-right: 20px;
}

/*height: 200px; 増えたら縦幅のばす*/



/*スクロールバーの横幅指定*/
.scrollArea.deco::-webkit-scrollbar {
    width: 15px;
}
/*スクロールバーの背景色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#D83379;
}