/* ------------ヘッダーの設定-------------- */
@media(min-width:961px){
html,body{
	box-sizing:100%;
}

#header nav{
	width:100%;
	height:50px;
	background-color:#ffa1a1;
	display:flex;
    justify-content:space-between;
	align-items:center;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:0px;
	margin:0px;
	top:0;
	z-index:700;
}

body{
	margin:0;
	}

#header h1 a{
	vertical-align:top;
	text-decoration:none;
	color:#fff;
	font-size:100%;	
	position:;
	font-family: 'Libre Baskerville', serif;
}

#header nav li{
   width:100px;          /* メニュー項目の横幅(200px) */
   display:inline-block; /* ★横並びに配置する */
   list-style-type:none; /* ★リストの先頭記号を消す */
   position:relative;   /* ★サブメニュー表示の基準位置にする */
}

#header nav li a:hover {
   background-color:#3cb371; /* メニュー項目にマウスが載ったときの背景色(ピンク) */
   color:#fff;            /* メニュー項目にマウスが載ったときの文字色(ピンク) */
}



/* ----------サブメニューがある場合に開く処理---------------- */   /* ※サブメニューが1階層しか存在しない場合の記述 */

#header nav ul li:hover ul {
  display:block;      /* マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* サブメニューの装飾 */

#header nav ul ul{
   margin:0px;         /* サブメニュー外側の余白 */
   padding:0px;        /* サブメニュー内側の余白 */
   display:none;       /* 標準では非表示にする */
   position:absolute;  /* 絶対配置にする */
}
#header nav ul ul li{
   width:200px;    /* サブメニュー項目の横幅 */
   z-index:500;
}

/* サブメニュー項目の装飾 */


#header nav ul{
list-style:none;
display:inline-block;
}
#header nav ul li a{
line-height:35px;     /* サブメニュー1項目の高さ */
text-align:center;      /* 文字列の配置 */
padding-left:0px     /* 文字列前方の余白 */
font-weight:bold;   /* 太字にはしない */
background-color:#ffa1a1; /* メニュー項目の背景色 */
display:block;
color: #fff;              /* メニュー項目の文字色 */
line-height: 40px;         /* メニュー項目のリンクの高さ */
text-decoration: none;     /* メニュー項目の装飾 */ 
font-family:'Kiwi Maru', serif;
}

#menu{
	padding-top:50px;
	padding-right:100px;
}
#g-nav{
	display:none;
}

/* ----------------------トップページのスライド写真の編集---------------------------　*/

.slider{
position:relative;
z-index:1; /* 数字を最小設定することで背景になる */
}

/* ------背景画像の設定-----　*/

.slider_1{
	background-image:url("../pic2022/n22_home_kanransya2.jpg"); 
}
.slider_2{
	background-image:url("../pic2022/n22_home_fuji4.jpg");
}
.slider_3{
	background-image:url("../pic2022/n22_home_nsp.jpg");
}

/* ------- 背景写真の設定 -------- */

.slider_photo{
	width:100%;
	height:80vh;
	background-repeat:no-repeat;
	background-position:center;
    background-size:100% auto;
}

/* ------矢印の設定------- */

.slick-prev, 
.slick-next{
    position:absolute;
	z-index:10;
    top:42%;
    cursor:pointer;/* マウスカーソルを指マークに */
    outline:none;/* クリックをしたら出てくる枠線を消す */
    border-top:3px solid #fff;/* 矢印の色 */
    border-right:3px solid #fff;/* 矢印の色 */
    height:25px;
    width:25px;
}

.slick-prev {/* 戻る矢印の位置と形状 */
    left:4.0%;
    transform:rotate(-135deg);
}

.slick-next {/* 次へ矢印の位置と形状 */
    right:1.0%;
    transform:rotate(45deg);
}

/* -------ドットナビゲーションの設定------- */

.slick-dots {
	position:relative;
	z-index:10;
    text-align:center;
	margin:-20px 0 0 0;/* ドットの位置 */
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;/* ドットの間隔 */
}

.slick-dots button {
    color:transparent;
	outline:none;
    width:0px;/* ドットボタンのサイズ */
    height:15px;/* ドットボタンのサイズ */
    display:block;
    border-radius:50%;
    background:#fff;/* ドットボタンの色 */
}

.slick-dots .slick-active button{
    background:#333;/* ドットボタンの現在地表示の色 */
}

/* ------背景画像の外側の設定------ */

main ul{
	margin:0;
	padding:0;
}

/* ------ 中央の文字の設定 ------- */

main h1{
	position:absolute;
	z-index:100;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	font-size:6vw;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Libre Baskerville', serif;
	text-shadow:0px 0px 15px #3cb371;
}
}

/* -------------------------- スマホ版 ------------------------------ */

@media(max-width:960px){
	#header{
	width:100%;
	height:70px;
	background-color:#ffa1a1;
	text-align:center;
    justify-content:space-between;
	margin:0px;
	padding-top:20px;
	padding-bottom:40px;
	padding-left:0px;
	top:0;
	left:0;
	z-index:700;
}
#header nav li {
	display:none;
}
body{
	margin:0;
}
#header h1 a{
	text-decoration:none;
	color:#fff;
	font-size:120%;	
	position:relative;
	font-family: 'Libre Baskerville', serif;
}
/* ------ トップページのスライド写真の編集 -----　*/
.slider{
position:relative;
z-index:1; /* 数字を最小設定することで背景になる */
}
/* ------背景画像の設定-----　*/
.slider_1{
	background-image:url("../pic2022/n22_home_kanransya3.jpg");  
}
.slider_2{
	background-image:url("../pic2022/n22_home_fuji3.jpg");
}
.slider_3{
		background-image:url("../pic2022/n22_home_nsp2.jpg");
}
/* ------- 背景写真の設定 -------- */
.slider_photo{
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:center;
    background-size:cover;
}
/* ------ 矢印の設定 ------- */

.slick-prev, 
.slick-next {
    position:absolute;
	z-index:10;
    top:42%;
    cursor:pointer;/* マウスカーソルを指マークに */
    outline:none;/* クリックをしたら出てくる枠線を消す */
    border-top:3px solid #fff;/* 矢印の色 */
    border-right:3px solid #fff;/* 矢印の色 */
    height:25px;
    width:25px;
}

.slick-prev {/* 戻る矢印の位置と形状 */
    left:4.0%;
    transform:rotate(-135deg);
}

.slick-next {/* 次へ矢印の位置と形状 */
    right:1.0%;
    transform:rotate(45deg);
}

/* ------- ドットナビゲーションの設定 ------- */

.slick-dots {
	position:relative;
	z-index:10;
    text-align:center;
	margin:-20px 0 0 0;/* ドットの位置 */
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;/* ドットの間隔 */
}

.slick-dots button {
    color:transparent;
    width:0px;/* ドットボタンのサイズ */
    height:15px;/* ドットボタンのサイズ */
    display:block;
	outline:none;
    border-radius:50%;
    background:#fff;/* ドットボタンの色 */
}

.slick-dots .slick-active button{
    background:#333;/* ドットボタンの現在地表示の色 */
}
/* ------ 背景画像の外側の設定 ------ */
main ul{
	margin:0;
	padding:0;
}
/* ------ 中央の文字の設定 ------- */
main h1{
	position:absolute;
	z-index:100;
	top:55%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	font-size:8vw;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Libre Baskerville', serif;
	text-shadow:0px 0px 15px #3cb371;
}

/* ------------- ハンバーガーメニュー ------------ */
#g-nav{
    /* position:fixed;にし、z-indexの数値を大きくして前面へ */
    position:fixed;
    z-index:999;
    /* ナビのスタート位置と形状 */
	top:-200%;
    left:0;
	width:100%;
    height:100vh;/* ナビの高さ */
	background:#ffa1a1;
    /* 動き */
	transition:all 0.6s;
}

/* アクティブクラスがついたら位置を0に */
#g-nav.panelactive{
    top: 0;
}

/* ナビゲーションの縦スクロール */
#g-nav.panelactive #g-nav-list{
    /* ナビの数が増えた場合縦スクロール */
    position:fixed;
    z-index:999; 
    width:100%;
    height:100vh;/* 表示する高さ */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

/* ナビゲーション */
#g-nav ul {
    /* ナビゲーション天地中央揃え */
    position:relative;
    z-index:999;

}

/* リストのレイアウト設定 */

#g-nav li{
	list-style:none;
    text-align:center; 	
}

/* -------------- スライドメニューの設定 ---------------- */
#g-nav li a{
	font-size:6vmin;
	position:relative;
	color:#fff;
	text-decoration:none;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	margin:0px;
	padding-top:20px;
	padding-bottom:20px;
    font-family:'Kiwi Maru', serif;
	top:70px;
	right:20px;
}

/* ---------------------- ボタンのためのCSS ------------------ */

.openbtn{
	position:fixed;
    z-index:1000;/* ボタンを最前面に */
	top:10px;
	right:10px;
	cursor:pointer;
    width:50px;
    height:50px;
	background:#ffa1a1;
	border-radius:10px;
}
	
/* ×に変化 */	
.openbtn span{
    display:inline-block;
    transition:all .4s;
    position:absolute;
    left:14px;
    height:3px;
    border-radius:2px;
	background-color:#fff;
  	width:45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top:18px;
    left:18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity:0;
}

.openbtn.active span:nth-of-type(3){
    top:30px;
    left:18px;
    transform:translateY(-6px) rotate(45deg);
    width:30%;
}
}

/* ------------------- 共通css(homeだけ共通cssから除外) ------------------- */
body {
	background-color: #FFFDDE;
}
footer{
	height:50%;
	padding :1em;
	font-size:100%;
	text-align:center;
	color:#000000;
}

@media only screen and (min-width: 821px) {
	#page-top a:hover{
		background:#90ee90;
	}
}

@media only screen and (max-width: 820px) {
	#page-top a:active{
		background:#90ee90;
	}
}

/* page-topリンクの形状 */
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#ffa1a1;
	border-radius:20px;
	width:70px;
	height:70px;
	color:#FFF;
	text-align:center;
	text-transform:uppercase; 
	text-decoration:none;
	font-size:0.6rem;
	transition:all 0.3s;
	font-family: 'Libre Baskerville', serif;
}

/* リンクを右下に固定 */
#page-top {
	position:fixed;
	right:20px;
	bottom:10px;
	z-index:2;
	/* はじめは非表示 */
	opacity:0;
	transform:translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}