@charset "UTF-8";

html{font-size: 100%;  margin: 0;
  padding: 0;}
body{color: #333;font-size: 0.875rem;margin:0;padding:0;
font-family:'Noto Serif JP', serif, "Times New Roman", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS PMincho", "MS 明朝", serif;
}
img{max-width:100%}
ul{list-style: none}


/*-------------------------------------------
ヘッダー
-------------------------------------------*/

#header{}

.h1bg{
  background: linear-gradient(17deg, #fefcfd, #fef5f9, #ffe99a);
}

.h1frame{
	padding:10px 20px;	
}

.h1frame p{
	font-size: 0.605rem;
	color: #898989;
	margin-bottom: 8px;
	margin-left: 5px;
	font-family: "Arial", "Helvetica", "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}

.site-title{
	width:500px;
	background-color: #fff;
	padding: 8px 15px;
	border-radius: 15px;
}

#header .nav{
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 950px;
	margin: 0 auto; 
	font-size: 1rem;
	
}

#header .navbg{
		background-color: #fff;
	height: 50px;
	justify-content: center;
	width:100%;
	margin: 25px 0 20px 0;
	
	
}


#header .flex{
	display: flex;
	line-height: 0;
	}

#header .flex li{
	width: calc(100%/3);
	margin: 0;
}

#header li a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;   /* デフォルトの下線を消す */
}

#header li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;            /* 文字の下に少しずらす */
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0;               /* 初期は透明 */
  transform: translateY(1px); /* 下に少しずらしてスタート */
  transition: transform 0.2s ease-out, opacity 0.1s ease-out;
}

#header li a:hover::after {
  opacity: 1;
}

#header .catchbg{
	background-image: url("../img/head_bg.png");
	opacity: 0.9; 
	height: 210px;  /* 高さを指定 */
  background-size: cover;       /* 背景を要素に合わせる */
  background-position: center;  /* 中央寄せ */
  background-repeat: no-repeat; /* 繰り返さない */
}

#header .catch_jp{
	text-align: center;
	padding-top:18px;
	font-size: 2.5rem;
	letter-spacing: 0.4rem;

}

#header .catch_eng{
	text-align: center;
	padding-top:20px;
	font-size: 2.5rem;
	color: #fff;
		letter-spacing: 0.2rem;
	 white-space: nowrap;
}