@charset "utf-8";

/* ------------------------------
   Reset
------------------------------ */
* { margin: 0; padding: 0; }
a { text-decoration: none; }
ul,ol { list-style: none; }
img { max-width: 100%; vertical-align: middle; }

/* ------------------------------
   Base
------------------------------ */
html {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 70%; /* 小さめで上品に */
  line-height: 1.6;
  background: #fafafa;
  color: #333;
}

/* 見出しを控えめに */
h1,h2,h3,h4 {
  margin-bottom: 0.8em;
  font-weight: 500;
  color: #2c3e50;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }


/* ------------------------------
   追加；タイトル部分を中央揃え（h1、h2）
------------------------------ */

title-group {
  text-align: center;
}

.title-group h1,
.title-group h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ------------------------------
   Header
------------------------------ */
header h1 img {
  position: relative;
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.25);
}

header h1 img::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 6px;

  /* 光沢を強めたバージョン */
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.15) 75%
  );

  pointer-events: none;
}

header h1 img::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0) 60%
  );
  pointer-events: none;
  border-radius: 6px;
}

/* ------------------------------
   Navigation（非表示のまま）
------------------------------ */
nav { display: none; }

/* ------------------------------
   Contents
------------------------------ */
#contents {
  width: 92%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5em 0;
}

#contents p {
  margin-bottom: 1.2em;
  font-size: 0.9em;
  color: #444;
}

/* セクションのまとまりを上品に */
section {
  background: #ffffff;
  padding: 1.2em 1.4em;
  margin-bottom: 1.4em;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ------------------------------
   Footer
------------------------------ */
footer {
  text-align: center;
  padding: 5em 0;
  background: #2c3e50;
  color: #fff;
  font-size: 0.8em;
  margin-top: 2em;
}

/* ------------------------------
   Responsive
------------------------------ */
@media screen and (min-width: 768px){
  html { font-size: 75%; }
}

@media screen and (min-width: 1024px){
  html { font-size: 80%; }
}