/* =====================================
   RESET
===================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

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

/* =====================================
   BASE TYPOGRAPHY
===================================== */

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #f5f3ee;           /* ← 背景色変更可 */
  color: #2a2a2a;
  line-height: 1.8;
}

/* 明朝を使いたい箇所用（任意で使用） */
.mincho {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* =====================================
   TOP HAFU（固定・左寄せ）
===================================== */

.top-hafu {
  width: 100%;
  height: 51px;                                        /* hafu.gifの高さ */
  background : url(../image/hafu.gif) left top / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: auto;
}

/* =====================================
   HEADER
===================================== */

.site-header {
  max-width: 1000px;
  margin: -40px auto 0; /* ← ロゴ被せ量ここで調整 */
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
  position:relative;
  z-index:10;
}

.logo-link img {
  height: 36px; /* ← ロゴサイズ調整ここ */
}

.site-nav {

  font-size: 0.85rem;
  color: #333;
  font-weight: 500;
}

.site-nav a {
  margin-left: 5px;
  text-decoration: none;
  color: #777;
  font-weight: 500;
}

.site-nav a:hover {
  color: #c62828;               /* ← アクセント色 */
}


/* =====================================
   BREADCRUMB
===================================== */

.breadcrumb{
  max-width:1000px;
  margin: 10px auto 0;
  padding: 0 20px;
  font-size: 0.85rem;
  color: #777;
text-align:right;   /* ← 右寄せ */
}

.breadcrumb a{
  text-decoration: none;
  color: #777;
}

.breadcrumb a:hover{
  color: #c62828;
}

.breadcrumb span{
  margin: 0 6px;
}

.breadcrumb .current{
  color: #333;
  font-weight: 500;
}

/* =====================================
   PAGE TITLE
===================================== */

.page-title {
  max-width: 1000px;
  margin: 20px auto 10px;           /* ← タイトルの上下マージン広くするには  margin:40px auto 30px; */
  padding: 0 20px;
  font-size: 1.7rem;
  text-align:center;
  font-weight: 700;
  letter-spacing:0.05em;
  color: #c62828;
}

.update {
  max-width: 1000px;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size: 0.85rem;
  color: #777;
  text-align:right; /* PC右寄せ */
}



/* =========================
   CONTENT
   ========================= */

.content{
  max-width:1000px;　　　　　 /* ← 800のほうがいい？幅が狭くなる */
  margin:0 auto 60px;
  padding:0 20px;
  font-size:0.95rem;
}

.content p{
  margin-bottom:1.2em;
}

/* =========================
   CONTENT
   ========================= */

.content{
  margin:0 auto 60px;
}

/* =====================================
   BACK TO TOP
===================================== */

.back-to-top{
  position:fixed;
  right:25px;
  bottom:25px;

  width:42px;
  height:42px;
  line-height:42px;
  text-align:center;

  text-decoration:none;
  color:#fff;
  font-size:18px;
  font-weight:600;

  border-radius:50%;

  background:linear-gradient(135deg,#1a237e,#3949ab);

  box-shadow:0 4px 12px rgba(0,0,0,0.15);

  opacity:0.4;                 /* ← 常時は控えめ */
  transform:translateY(10px);  /* ← 少し沈ませる */
  transition:all 0.3s ease;
}

/* ホバーで浮く（PC） */
.back-to-top:hover{
  opacity:0.9;
  transform:translateY(-4px);
}


/* =====================================
   FOOTER
===================================== */

.site-footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 20px 20px; /* ← 上余白ここで調整 */
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  border-top: 1px solid #e0dad0;
}

/* =========================
   FOOTER NAV
   ========================= */

.footer-nav{
  margin-bottom:16px;
  font-size:0.85rem;
}

.footer-nav a{
  color:#444;
  text-decoration:none;
  margin:0 8px;
}

.footer-nav a:hover{
  text-decoration:underline;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 768px) {

  .site-header {
    flex-direction: column;
    align-items: flex-start;　　/* ← これは必要？ */
    gap: 10px;
  }

  .site-nav {
    align-self: flex-end;
  }

  .page-title {
    text-align: left; /* モバイルでは中央にしない */
    /* font-size:1.5rem;←これ必要か？ */
  }

  .back-to-top{
    right:15px;
    bottom:15px;
    width:36px;
    height:36px;
    line-height:36px;
    font-size:16px;
  }

.site-footer{
  padding:5px 0px 0px 0px; /* ← 上下余白調整可 */
  font-size:0.7rem;
}

/* =========================
   MOBILEで実証確認の上削除可？
   ========================= */

@media(max-width:768px){

  .page-title{
    font-size:1.5rem;
  }

  .intro{
    font-size:1rem;
  }

  .intro{
    font-size:1rem;
  }




}