/* Xeory Base風 基本スタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text);
    background: #fff;
}
a {
    color: #00a4de;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.hero{position:relative}
.hero img{object-fit:cover;display:block}
.hero-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;padding:18px 28px;background:rgba(0,0,0,0.35);border-radius:10px}
.hero-text h1{font-family:'Playfair Display',serif;font-size:40px;margin:0 0 8px}
.hero-text p{margin:0;font-size:18px}
section{padding:60px 0}

.hero2{position:relative}
.hero2 img{width:100%;height:420px;object-fit:cover;display:block}
.hero2-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;padding:18px 28px;background:rgba(0,0,0,0.35);border-radius:10px}
.hero2-text h2{font-family:'Playfair Display',serif;font-size:40px;margin:0 0 8px}
section{padding:60px 0}


.hb {
  background-color: #007BFF; /* ブルー */
  color: white;              /* 文字色を白に */
  padding: 1em;              /* 上下左右の余白 */
  margin: 0;                 /* 不要な余白を消す */
  font-size: 2em;            /* 見やすい大きさに */
  text-align: center;        /* 中央揃え */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.site-header, .site-footer {
    background:#fff;
    border-bottom:1px 
    solid #eee;position:
    sticky;top:0;z-index:10
}
.site-title {
    font-size: 2rem;
    text-align: center;
}
.site-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
}
.site-nav ul li a {
    color: #fff;
}

.flex-container {
    display: flex;
    flex-direction: flex;

    margin-bottom: 30px;
}

.box {
    text-align: center;

    background-color: #E4EDE8;
    margin: 20px;
    width: 400px;
}

.twobox {
    text-align: center;
    background-color: #F4EDE0;
    margin: 20px;
    width: 500px;
}

main {
    padding: 20px 0;
}
@media (max-width: 768px) {
    .site-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .flex-container {
        flex-direction: column;
    }
}