@charset "utf-8";
/* CSS Document */

/*背景*/
body{
	
    background-image: url("../imges/background.jpg"); /* 背景画像を指定 */
    background-repeat: no-repeat;                    /* 画像を繰り返さない */
    background-size: cover;                          /* 画像がコンテナを覆うようにリサイズ */
    background-attachment: fixed;                    /* スクロールしても背景画像は動かない */

}

@media (max-width:768px){
	
	/*スマホで背景を１色に*/
	body{
		
		background:#FDECED;
	}
	
}

/*スクロールでふわっとぼかし*/

.fadein{
	opacity:0;
	filter: blur(3px);
	transition:all 1.5s;
}

.scrollin{
	opacity:1;
	filter:blur(0px);
	
}


/*フォント*/
/*ナビ*/
.jacques-francois-regular-1 {
  font-family: "Jacques Francois", serif;
  font-weight: 400;
  font-style: normal;
	font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	color:#6A3C27;
	
}
/*ｈ*/
.jacques-francois-regular-2 {
  font-family: "Jacques Francois", serif;
  font-weight: 400;
  font-style: normal;
	font-size:clamp(2.188rem, 0.801rem + 6.93vw, 6rem);
	color:#6A3C27;
	letter-spacing: 0.3em;
}

.point{
	color:#87B87D;
}


/*日付け、コピーライト*/
/*写真の文章*/
.inria-sans-light {
  font-family: "Inria Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
	color:#8A604D;
}

.inria-sans-regular {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
	color:#A87474;
	line-height:2em;
}
/*日付*/
.inria-sans-bold {
  font-family: "Inria Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
	
	font-size:18px;
	color:#8A604D;
}

.inria-sans-light-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.inria-sans-regular-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.inria-sans-bold-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/*ボタン*/
/*ボタン*/
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
	font-size:clamp(0.75rem, 0.729rem + 1.03vw, 1.5rem);
	color:#6A3C27;
}

.kaisei-opti-medium {
  font-family: "Kaisei Opti", serif;
  font-weight: 500;
  font-style: normal;
}

.kaisei-opti-bold {
  font-family: "Kaisei Opti", serif;
  font-weight: 700;
  font-style: normal;
	font-size:30px;
	color:#6A3C27;
}

/*キャッチコピー*/


.noto-serif-bold {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
	font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
	color:#6A3C27;
}


/*段落、写真キャプション*/

/*段落*/
.kiwi-maru-regular-p {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
	font-size:16px;
	color:#8A604D;
	line-height:2em;
}

/*写真キャプション*/
.kiwi-maru-regular-pc {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
	font-size:clamp(1rem, -0.091rem + 5.45vw, 4rem);
	color:#8A604D;
}


/*ヘッダー*/
/*ヘッダー大枠*/
.he-container{
	/*border:1px solid #000000;*/
	width:100%;height:100px;
	display:flex;
	align-items:center;
	
}

@media(max-width:768px){
	
	/*ヘッダーの大きさ変更*/
	.he-container{
		height:80px;
		position: fixed;
		top:0;left:0;
		z-index:100;
	}
	
}

/*ロゴリンク*/
.logo-con{
	display:inline-block;
	/*border:1px solid #000000;*/
	width:164px;height:auto;
}

@media(max-width:768px){
	.logo-con{
		width:20%;height:auto;
	}
	
}

/*ロゴ画像*/
.logo{
	width:100%;height:auto;
	transition:opacity 0.5s;
}

.logo:hover{
	opacity:0.7;
}

/*リストコンテナ*/
.nav-con{
	/*border:1px solid #000000;*/
	width:100%;height:100%;
	display:flex;
	justify-content:space-between;
	align-items: center;
}


@media(max-width:768px){
	.he-nav{
		display:none;
	}
}

/*メニューのホバー*/
.menu{
	transition:color 0.5s;	
}

.menu:hover{
	color:#DCA187;	
}


/*ナビ*/
.he-nav{
	/*border:1px solid #000000;*/
	width:50%;height:auto;
	
}

/*ヘッダー中身ブロック*/
.he-block{
	/*border:1px solid #000000;*/
	width:70%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}


@media(max-width:768px){
	.he-block{
		width:90%;
	}
}

/*ハンバーガー表示非表示*/
.hun-con{
	display:none;
}

@media(max-width:768px){
	.hun-con{
		display:block;
	}
}

/*ハンバーガーメニューレイアウト*/
/*ハンバーガーアイコン*/
.hun-con{
	width:39px;height:39px;
	/*background:#FFFFFF;*/
	border-radius:5px;
	/*padding:10px;*/
	position:relative;
	z-index:100;
}

/*ハンバーガー三本線表示*/
.hun-con span{
	position:absolute;/*浮かせたことですべてのスパンが中央寄せになる*/
	display:inline-block;/*インラインのママだと高さ調整できないため*/
	width:100%;height:5px;/*高さ調整*/
	background:#6A3C27;
	top:50%;/*spanの基準をアイコンの真ん中にする*/
	transform:translateY(-50%);/*要素分の位置調整これは高さのみで良い*/
	border-radius:2.5px;
}

/*ハンバーガー三本線個別設定*/

.hun-con span:nth-child(1){
	top:0px;/*さっき指定した基準からそれぞれの線の位置を決める*/
	transition:all 0.3s;
}

.hun-con span:nth-child(2){
	top:35px;
	transition:all 0.3s;
}

.hun-con span:nth-child(3){
	top:17px;
	transition:all 0.3s;
	
}



/*クリック時のアイコン表示方法*/

/*ハンバーガー三本線個別設定*/
/*1本目*/
.hun-con.clicked span:nth-child(1){
	top:17px;/*クリック前の状態でrotateするとその位置で傾いてしまうため、線の位置を真ん中に戻しきれいな×にする*/
	transform:rotate(45deg);
}

/*3本目*/
.hun-con.clicked span:nth-child(2){
	transform:rotate(-45deg);
	top:17px;
}

/*2本目*/
.hun-con.clicked span:nth-child(3){
	opacity:0;
	
}












/*メニューの大枠*/
/*一応レイアウトを整えてる状態で非表示にしている*/
.hun-menu{
	
	background-color:rgba(255, 255, 255,0.8);
	opacity:0;
	width:100%;height:100vh;
	position:fixed;/*画面固定*/
	top:0;right:0;
	transform:translate(100%,0%);
	/*display:none;/*クリック前は非表示*/
	transition:all 0.8s;
}


/*クリック時のメニュー表示方法*/
.hun-menu.clicked{
	transform:translate(0,0);
	opacity:1;
}

/*メニューの中身の大枠*/
.hun-menu ul{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:60px;
	padding-top:100px;
	padding-bottom:100px;
	
}




/*ナビのフォントサイズ変更*/
.nav-con{
	font-size:30px;
}



/*ボタン*/
.button{
	padding:20px 70px;
	display:inline-block;
	background:rgba(218, 202, 202,0.4);
	border:1px solid #6A3C27;
	border-radius:50px;
	box-shadow:0px 4px 4px rgb(152, 104, 104,0.5);
	transition:background 0.4s,color 0.4s;
	text-align:center;
}

@media(max-width:768px){
	.button{
		padding:10px 20px;
		
	}
}


.button:hover{
	
	background:#6A3C27;
	color:#DCA187;
}


/*下層ページヘッダー*/
.under-he-block{
	align-items:flex-start;
	padding-top:30px;
	height:300px;
	background-image:url("../imges/wabeunder.svg");
	background-repeat:no-repeat;
	background-size:100% 100%;
}

@media(max-width:768px){
	.under-he-block{
		padding-top:10px;
		height:80px;
}
}
/*フッダー*/

.fo-box{
	width:100%;heigth:auto;
	/*border:1px solid #000000;*/
	background:url("../imges/footer.png") no-repeat;/*カバーが利かない*/
    background-size:cover;
	padding-top:300px;
	padding-bottom:30px;
}


@media(max-width:768px){
	.fo-box{
		padding-top:150px;
	}
}


/*フッターの中身の大枠*/
.fo-con{
	/*border:1px solid #000000;*/
	width:60%;height:auto;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	gap:120px;
	
}

@media(max-width:768px){
	.fo-con{
		width:90%;
		gap:30px;
	}
	
}




/*フッターのナビ大枠*/
.fo-nav{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
}


/*ナビのフレックス*/
.fo-nav-con{
	display:flex;
	width:100%;
	justify-content:space-between;
	align-items:center;
}

/*アイコンの大枠*/
.fo-img-con{
	/*border:1px solid #000000;*/
	width:40%; height:auto;
	display:flex;
	justify-content: space-between;
}


/*それぞれのアイコンの大枠*/
.icon-con{
	/*border:1px solid #000000;*/
	width:20%;height:auto;
}

/*アイコンを画像コンテナに合わせる*/
.icon{
	width:100%;height:100%;
	
}

/*コピーのセンター*/
.fo-text{
	text-align:center;
	font-size:12px;
}



/*ナビのホバー*/
.fo-nav-item{
	transition:color 0.5s;
}


.fo-nav-item:hover{
	
	color:#DCA187;
}


.icon path{
	transition:fill 0.5s;
}

.icon path:hover{
	fill:#DCA187;
}