@charset "utf-8";

/* reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
img{
width: 100%;
vertical-align: bottom;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
html{
scroll-behavior: smooth;
}

/* header */
header{
height: 50vh;
position: relative;/* 親 */
overflow: hidden;/* はみ出た部分を隠す */
display: flex;
justify-content: center;
align-items: center;
}
/* 画像のコンテナを画面いっぱいに広げる */
.main {
position: absolute;/* 子 */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 重なり順を一番下に */
}
.main > img{
width: 100%;
height: 100%;
object-fit: cover; /* 画像を枠いっぱいに収める */
object-position: center 16%;
}
h1{
position: absolute;/* 子 */
top: 50%;           /* 上から50%の位置 */
left: 50%;          /* 左から50%の位置 */
transform: translate(-50%, -50%); /* 自身の幅の半分だけ戻して真ん中 */
font-family: "Kaisei HarunoUmi", serif;
font-size: 50px;
font-weight: 400;
line-height: 1.7;
color: #FFF;
text-align: center;
z-index: 10;
}

/* main */
.l-nav{
background-color: #A8A8A8;
width: 100%;
height: 40px;
position: sticky;/* 指定した位置に来たら固定となる */
top: 0;
right: 0;
margin-bottom: 64px;
z-index: 99;
}
.l-nav>ul{
display: flex;
justify-content: center;
gap: 0 250px;
height: 40px;
align-items: center;
}
.l-nav a{
padding: 20px 20px;
color: #000;
}
.l-nav a:hover{
text-decoration: underline 2px #fff;
text-underline-offset: 6px;
}
.lead{
padding: 20px;
font-size: 16px;
text-align: center;
line-height: 1.2;
margin-bottom: 56px;
}
.icon {
display: block;/* ブロック要素にする */
margin: 0 auto;
width: 80px;
height: 80px;
margin-bottom: 66px;
}
section{
margin-bottom: 180px;
}
main .container:not(.merit-section){
display: flex;
justify-content: center;
max-width: 960px;
margin: 0 auto 50px;/* 中央寄せ */
gap : 0 40px;
}
h2{
font-family: "Kaisei HarunoUmi", serif;
font-size: 30px;
font-weight: 400;
text-align: center;
margin-bottom: 60px;
}
.image-box{
display: flex;
justify-content: center;
align-items: center;
position: relative;/* 親 */
overflow: hidden;
width: 460px;
height: 270px;;
}
.image-box .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover; /* 画像を枠いっぱいに収める */
}
.image-box h3 {
position: absolute;/* 子 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;/* 画像の上に表示 */
width: 100%;/* 横幅いっぱいに収める */
padding: 8px;
color: #FFF;
background-color: #00000058;
font-weight: 400;

text-align: center;
}
.text-box{
display: flex;
align-items: center;
width: 460px;
}
.text-box>p{
font-size: 16px;
line-height: 1.2;
}
.merit-section{
display: block; /* 縦並び */
max-width: 960px;
margin: 0 auto 50px;
}
.merit{
background-color: #fff8c0;
padding: 20px 4px 6px;
font-weight: 400;
color: #000;
margin-bottom: 20px;
}
.merit-section>p{
font-size: 16px;
padding-left: 40px;
line-height: 1.4;
}
footer{
background-color: #D9D9D9;
text-align: center;
padding: 20px 0 ;
}
.return{
position: fixed;
right: 40px;
bottom: 20px;
}
.circle{
background-color: #000;
color: #fff;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}