/* ============================================================
   style.css
   ============================================================ */


/* ===== CSS変数 ===== */
:root {
  /* カラー */
  --color-bg:       #ffffff;
  --color-text:     #000000;
  --color-text-sub: #666666;
  --color-border:   #dddddd;
  --color-accent:   #0066cc;

  /* タイポグラフィ */
  --font-family:    dnp-shuei-gothic-gin-std,"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                    "Hiragino Sans", Meiryo, sans-serif;
  --font-size-base: 24.2px;
  --line-height:    1.8;

  /* レイアウト */
  --max-width:      980px;
  --padding-inline: 20px;
}


/* ===== リセット ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ===== ベース ===== */
html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iOS 自動拡大防止 */
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: justify;
}

/* 画像・動画をレスポンシブに */
img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンク */
a {
  color: var(--color-accent);
  text-decoration: underline;
}
a:hover {
  opacity: 0.75;
}

/* リスト */
ul,
ol {
  list-style: none;
}

/* テーブル */
table {
  border-collapse: collapse;
  width: 100%;
}


/* ===== ラッパー（最大幅980px・中央寄せ） ===== */
.wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}


/* ===== ヘッダー ===== */
header {
  background-image:
    url("/medium_club/image/head_back.jpg"),   /* 手前の画像（透過PNGなど） */
    url("/medium_club/image/back.jpg");       /* 奥の背景画像 */
  background-size:
    contain,   /* 手前の画像のサイズ（cover / contain / px指定も可） */
    cover;  /* 奥の画像のサイズ */
  background-repeat:
    no-repeat,  /* 手前の繰り返し */
    no-repeat;  /* 奥の繰り返し */
  background-attachment: scroll; /* fixed にするとパララックス効果 */

  /* コンテンツを縦中央寄せ */
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  box-shadow: 8px 0 10px -8px rgb(0 0 0 / 54%), -8px 0 10px -8px rgb(0 0 0 / 54%);
}
header .wrapper{
  padding-left: var(--padding-inline) !important;
  padding-top: var(--padding-inline);
  padding-inline: unset;
}

/* ===== メイン ===== */
main {
  /* 例: padding-block: 40px; */
  background-image:
    url("/medium_club/image/back.jpg");
/*  background-size: cover;*/
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* fixed にするとパララックス効果 */
  /* コンテンツを縦中央寄せ */
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-bottom: 30px;
  box-shadow: 8px 0 10px -8px rgb(0 0 0 / 54%), -8px 0 10px -8px rgb(0 0 0 / 54%);
}
/* h2：中央テキスト＋左右に線 */
 
/* 親要素で線を描く */
main h2 {
  text-align: center;
  padding: 0 30px;
  border-radius: 50px;
  background-color: #3d00c5;
  font-size: 1.2em;
  color: #ffffff;
  width: max-content;
  margin: 0 auto 20px;
 
  /* 親のposition:relativeに対して中央に浮かせる */
  position: relative;
  z-index: 1;
}
main h2 span{
  font-size:0.8em;
}
/* h2を包む要素（.h2-wrap）側で左右の線を引く */
.h2-wrap {
  position: relative;
  align-items: center;
  width: 85%;
  border-bottom: 1px solid #3d00c5;
  padding-bottom: 20px;
}
 
.h2-wrap::before,
.h2-wrap::after {
  content: "";
  position: absolute;
  top: 25px;                      /* 縦中央 */
  width: calc(50% - (var(--h2-half, 80px)));  /* h2の半分の幅を除いた長さ */
  height: 1px;
  background-color: #3d00c5;
}

.h2-wrap::before {
  left: 0;
}
 
.h2-wrap::after {
  right: 0;
}
 
/* ドロップキャップ（2行分） */
.drop-cap {
    initial-letter: 2;
    -webkit-initial-letter: 2;
    font-size: 3em;
    line-height: 1;
    float: left;
    margin-right: 0.2em;
    margin-top: 0.1em;
    color: #3d00c5;
    margin-left: -25px;
}

.arasuji {
    width: 85%;
    margin: 30px auto;
    border: 5px solid #3d00c5;
    padding: 40px 0;
    border-radius: 20px;
    background-color: #FFFFFF;
}
.arasuji p {
    margin: 10px 30px 30px;
}
p.icon {
    padding: 0px 8px;
    background-color: #222;
    width: fit-content;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 30px 30px 0px;
}
.arasuji .btn,.kiyaku .btn,.btn {
    text-align: center;
    margin: 30px 0px;
}
.arasuji .btn a,.kiyaku .btn a,.btn a {
    margin: 0 20px 10px;
    padding: 10px 20px;
    background-color: #e1bb6e;
    text-decoration: none;
    color: #3d00c5;
    font-weight: bold;
    border: 7px double #8f7800;
}
.oubo {
    width: 90%;
    margin: auto;
}
h3 {
    padding: 3px 15px;
    background-color: #3d00c5;
    color: #FFFFFF;
    margin: 25px auto 15px;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    gap: 8px;
}
h3 span {
    font-size: 0.55em;
    padding-left: 15px;
    vertical-align: middle;
    line-height: 1;
}
.seitokai1 img, .seitokai2 img {
    max-width: 400px;
    display: block;
    margin-inline: auto;
}
.seitokai3 img {
    max-width: 640px;
    display: block;
    margin-inline: auto;
}
.seitokai2 {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.seitokai2 img {
    width: calc(50% - 10px);
    height: auto;
}
li {line-height: 1.4;}
ul.circle li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 1.2em;
    list-style: none;
}
ul.circle li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #3d00c5;
}
ul.howto {
  list-style: none;
  counter-reset: circle-counter; /* カウンターを初期化 */
  padding-left: 0;
}
ul.howto li {
  position: relative;
  padding-left: 1.5em;
  counter-increment: circle-counter; /* liごとに+1 */
  margin-bottom: 8px;
}

ul.howto li::before {
  content: counter(circle-counter); /* 数字を表示 */
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  border: 1px solid #3d00c5;  /* 丸の線 */
  color: #3d00c5;             /* 数字の色 */
  font-size: 0.75em;
  line-height: 1.4em;
  text-align: center;
  top: 0.5em;
}
ul.rule {
  margin: 10px 30px;
  font-size: 0.8rem;
  line-height:1.3;
}
ul.rule li {
  position: relative;
  padding-left: 1.5em;
  list-style: none;
}

ul.rule li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.term span,.circle span {
    color: #3d00c5;
    font-weight: bold;
}
/* 全体：左右2カラム */
.shinsain {
  display: flex;
  gap: 40px;
  align-items: flex-start; /* 上揃え */
}

/* 左：文章 */
.text-col {
  flex: 1; /* 残りのスペースを使う */
}

/* 右：画像エリア */
.img-col {
  display: flex;
  gap: 16px;         /* 画像間の余白 */
  flex-shrink: 0;    /* 縮まないように固定 */
}

/* キャプション＋画像のセット */
figure {
  margin: 0;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figcaption {
  font-size: 0.8em;
  margin-bottom: 6px;
  color: #666666;
  word-break: break-all;
  margin-top: auto;  /* 上の余白を自動で吸収 → 常に画像のすぐ上に */
  line-height: 1.2;
  text-align: center;
}

figure img {
  width: 180px;
  height: auto;
}

/* ===== フッター ===== */
footer {
  /* 例: border-top: 1px solid var(--color-border); */
  text-align: center;
  background-color: #3d00c5;
  color: #FFFFFF;
  max-width: var(--max-width);
  margin-inline: auto;
  padding:10px 0;
  box-shadow: 8px 0 10px -8px rgb(0 0 0 / 54%), -8px 0 10px -8px rgb(0 0 0 / 54%);
}
@media (max-width: 946px) {
h3 {display: grid;}
h3 span {padding-bottom: 5px;padding-left:0px;}
  .shinsain {
    flex-direction: column;
  }

  .img-col {
    width: 100%;
    justify-content: center;
  }

}
/* スマホ（〜767px） */
@media (max-width: 767px) {
:root {
  --font-size-base: 19.3px;
  --line-height:    1.5;

  /* レイアウト */
  --padding-inline: 10px;
}
  .arasuji .btn a, .kiyaku .btn a {
    display: block;
  }

  /* 文字サイズを小さく */
  body {font-size: 0.9rem;}
.btn {font-size: 0.8rem;}
.btn a {margin:0px;}
.arasuji {padding: 20px 0;}
.seitokai2 {display: block;}
.seitokai1 img,.seitokai2 img,.seitokai3 img {width: 100%;}
  figure img {
/*    width: 70%;*/
    margin-bottom: 20px;
  }
.shinsain {gap: 20px;}
footer {font-size: 0.9rem;}
}
h3 {
    font-size: 1.3em;
}