@charset "utf-8";
/************************
*     基本レイアウト    *
*************************/
 @media screen and (min-width:781px){


/* ナビゲーションメニュー */
.nav-menu {
  background-color: #fff; /* メニューの背景色 */
  color: #cc0000; /* メニューテキストの色 */
}
.menu-list {
  display: flex;
  justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
  background-color: #fff; /* メニューアイテムの背景色 */
  color: #cc0000;
  border-left: none; /* メニューアイテムの左ボーダー */
  position: relative;
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.menu-item:last-child {
  border-right: none; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  transform: scaleY(1); /* ドロップダウンメニューの表示 */
}
.menu-item:hover {
  background-color: #fff; /* メニューアイテムのホバー時の背景色 */
  color:#902225;
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.drop-menu-item:hover {
  opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}
.menu-item.drop-menu:before {				/* 親メニュー（子メニューあり）の下矢印 */
	content: '';
	position: absolute;
	left: 8px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #cc0000;
	border-right: 2px solid #cc0000;
	transform: rotate(135deg);
}
.menu-item.drop-menu:before:hover {				/* 親メニュー（子メニューあり）の下矢印 */
	
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}
.menu-item a {
  align-items: center;
  color: #cc0000; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 120px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
	left: 1px;
	position: absolute;
	top: 100%;
	transform: scaleY(0); /* ドロップダウンメニューの非表示 */
	transform-origin: center top; /* 変形を適応する基準を設定 */
	transition: transform .3s; /* 表示の変化をアニメーション化 */
	width: max-content;
	z-index: 1;
}
.drop-menu-item {
  background-color: #fff; /* ドロップダウンメニューの背景色 */

  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important; }
 #wraslider { 
 background: #fff;  
width: 100%;  
height: 270px;  
overflow: hidden;
}
.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
  

}