@charset"UTF-8";

/*基本*/
:root{
	--v-space:clamp(90px,9vw,120px);
	
	}

body{
	margin:0;
	background-color:#eee;
	color:#222;
	font-family:sans-serif;
	
	}

h1,h2,h3,h4,h5,h6,p,figure,ul{
	margin:0;
	padding:0;
	list-style:none;
	
	}

p{
	line-height:1.8;
	
	}

a{
	color:inherit;
	text-decoration:none;
	
	}

a:hover{
	filter:brightness(90%) contrast(120%);
	
	}

img{
	display:block;
	max-width:100%;
	height:auto;
	
	}

/*横幅と左右の余白*/
.w-container{
	width:min(92%,1166px);
	margin:auto;
	position:relative;
	
	}

/*ヘッダー*/
.header{
	height:112px;
	background-color:#fff;
	
	}
	
.header-container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:100%;
	
	}

/*ナビゲーションボタン*/
.navbtn{
	padding:0;
	outline:none;
	border:none;
	background:transparent;
	cursor:pointer;
	color:#aaa;
	font-size:30px;
	
	}

.open .navbtn {
	z-index: 110;
	color: #ffffff;
}

.navbtn .fa-bars {
	display: revert;
}
.open .navbtn .fa-bars {
	display: none;
}

.navbtn .fa-times {
	display: none;
}
.open .navbtn .fa-times {
	display: revert;
}

@media (min-width: 768px) {
	.navbtn {
		display: none;
	}
}

/*リンクをポイント：スタイル変更*/
nav a:hover{
	color:#ff0000;
	
	}

/* ナビゲーションメニュー：モバイル */
@media (max-width: 767px) {
	.nav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: #4e483ae6;
		transition: transform 0.3s;
	}

	.open .nav {
		transform: translate(-100%, 0);
	}

	.open body {
		position: fixed;
		overflow: hidden;
	}

	.nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
		color: #ffffff;
	}
}

/* ナビゲーションメニュー：PC */
@media (min-width: 768px) {
	.nav ul {
		display: flex;
		gap: 40px;
		color: #707070;
	}
}

/*ヒーロー*/
.hero{
	height:850px;
/*Gダーニング画像*/
	background-image:url(img/g01.jpg);
	background-position:center;
	background-size:cover;
	
	}

.hero-container{
	display:grid;
	justify-items:center;
	align-content:center;
	height:100%;
	
	}

.hero h1{
	margin-bottom:42px;
	font-family:"montserrat",sans-serif;
	font-size:clamp(48px,5vw,68px);
	min-height:0vw;
	font-weight:550;
	line-height:1.3;
	text-align:center;
	color:#fff;
	
	}

.hero p{
	margin-bottom:72px;
	font-weight:550;
	color:#fff;
	
	}

/*ボタン*/
.btn{
	display:block;
	width:260px;
	padding:10px;
	box-sizing:border-box;
	border-radius:4px;
	/*ボタンの色　半透明にする*/
	background-color:rgba(210,180,140,0.8);
	color:#fff;
	font-size:18px;
	text-align:center;
	text-shadow:0 0 6px #00000052;
	
	}

/*画像とテキスト*/
.imgtext{
	padding:var(--v-space) 0;
	background-color:#fff;
	
	}

.imgtext + .imgtext{
	padding-top:0;
	
	}

.imgtext-container{
	display:flex;
	flex-direction:column;
	gap:clamp(45px,6vw,80px);
	
	}

/*タイトルとサブタイトル（赤色の短い線で装飾）*/
.heading-decoration{
	font-size:clamp(30px,3vw,40px);
	min-height:0vw;
	font-weight:400;
	
	}

.heading-decoration::after{
	display:block;
	content:'';
	width:160px;
	height:0px;
/*タイトル下線色　赤に変更*/
	border-top:solid 1px #ff0000;
	margin-top:0.6em;
	
	}

.heading-decoration + p{
	margin-top:1em;
	margin-bottom:2em;
	color:#707070;
	font-family:"montserrat",sans-serif;
	font-size:18px;
	
	}

/*記事一覧*/
.posts{
	padding:var(--v-space) 0;
	background-color:#f3f1ed;
	
	}

.posts-container{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:32px 25px;
	
	}

/*記事一覧内の各記事*/
.post img{
	aspect-ratio:3/2;
	object-fit:cover;
	width:100%;
	
	}

@supports not(aspect-ratio:3/2){
	.post img{
		height:180px;
		
		}
}

.post a{
	display:block;
	
	}

.post h3{
	margin:1em 0 0.5em;
	font-size:clamp(12px,2vw,20px);
	min-height:0vw;
	
	}

.post p{
	max-width:20em;
	font-size:clamp(10px,1.6vw,14px);
	min-height:0vw;
	
	}

/*パーツの見出し*/
.heading{
	font-family:"montserrat",sans-serif;
	font-size:clamp(40px,5.2vw,70px);
	min-height:0vw;
	font-weight:300;
	position:absolute;
	top:calc((var(--v-space) + 0.6em)*-1);
	
	}

.heading span{
	display:block;
	color:#666;
	font-size:18px;
	
	}

/*フッター*/
.footer{
	padding:70px 0;
	background-color:#fff;
	color:#707070;
	font-size:13px;
	
	}

.footer-container{
	display:grid;
	gap:50px;
	justify-items:center;
	
	}

/*フッター：SNSメニュー*/
.footer-sns{
	display:flex;
	gap:24px;
	font-size:24px;
	
	}

.footer-sns a{
	display:grid;
	place-items:center;
	width:36px;
	aspect-ratio:1/1;
	background-color:#ccc;
	clip-path:circle(50%);
	
	}

@supports not(aspect-ratio:1/1){
	.footer-sns a{
		height:36px;
		}
}

/*フッター：テキストメニュー*/
.footer-menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
	
	}

/*記事*/
.entry {
	padding-bottom: var(--v-space);
	background-color: #ffffff;
}

.entry-img img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	margin-bottom: calc(var(--v-space) * 2 / 3);
}

.entry .w-container {
	max-width: 720px;
}

.entry .heading-decoration {
	font-size: clamp(30px, 6.25vw, 48px);
}

.entry-container {
	font-size: clamp(16px, 2.4vw, 18px);
}

.entry-container :where(h1, h2, h3, h4, h5, h6, p, figure, ul) {
	margin-top: revert;
	margin-bottom: revert;
	padding: revert;
	list-style: revert;
}

.entry-container p {
	margin: 1.8em 0;
}

.entry-container > :first-child {
	margin-top: 0;
}

.entry-container > :last-child {
	margin-bottom: 0;
}

/* プラン */
.plans {
	padding: var(--v-space) 0;
	background-color: #e9e5e9;
}

.plans-container {
	display: grid;
	gap: 27px;
}

@media (min-width: 768px) {
	.plans-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* プラン：カード */
.plan {
	display: flex;
	flex-direction: column;
	padding: 60px 27px;
	border-radius: 20px;
	background-color: #ffffff;
}

.plan h3 {
	margin-bottom: 38px;
	font-family: "Montserrat", sans-serif;
	font-size: 38px;
	font-weight: 400;
}

.plan .desc {
	margin-bottom: 38px;
}

.plan .price {
	margin-top: auto;
	/*margin-bottom: 22px;
	font-size: 26px;
	font-weight: bold;*/
}

.plan .btn {
	width: auto;
}

/*768px以上のディスプレイ表示（横並び）*/
@media(min-width:768px){
	.imgtext-container{
		flex-direction:row;
		align-items:center;
		
		}
	
	.imgtext-container.reverse{
		flex-direction:row-reverse;
		
		}

	.imgtext-container > .text{
		flex:1;
		min-width:17em;
		
		}
	
	.imgtext-container > .img{
		flex:2;
		
		}
	
	.posts-container{
		grid-template-columns:repeat(3,1fr);
		
		}

	.footer-container{
		grid-template-columns:auto auto;
		grid-template-rows:auto auto auto;
		gap:20px;
		
		}
	
	.footer-container>.footer-sns{
		grid-column:2;
		grid-row:1/4;
		
		}

}/*768px以上のディスプレイ表示（横並び）
ここで終了*/