@charset "utf-8";
/**
 * ============================================================================
 * com-core-base.css
 * ============================================================================
 * 
 * 【目的】
 * サイト全体の基本スタイルを定義する。
 * フォント、色、レスポンシブフォントサイズ、基本レイアウト構造（article, header, footer）を提供。
 * 
 * 【使用ページ】
 * 全ページ（必須）
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css（先に読み込まれている前提）
 * 
 * 【読み込み順序】
 * 2番目（com-core-reset.css の直後）
 * 
 * 【主要な機能】
 * 1. レスポンシブフォントサイズ
 *    - 600px〜999px: 18px〜22px (112.5%〜137.5%)
 *    - 1000px〜: 22px〜27px (137.5%〜)
 *    - calc() を使用した滑らかなフォントサイズ変化
 * 
 * 2. フォントファミリー
 *    - 游明朝, Noto Serif JP, Sawarabi Mincho (明朝体)
 * 
 * 3. 基本レイアウト
 *    - article: 最大幅1060px、中央寄せ、白背景
 *    - header: ロゴ、タイトル配置
 *    - footer: 背景画像、半透明白背景
 * 
 * 4. 共通テキストスタイル
 *    - p, strong, em, ul, ol のスタイル
 * 
 * 5. 画像フロート
 *    - .fl (float: left), .fr (float: right)
 *    - 700px以下でフロート解除
 * 
 * 【レスポンシブブレークポイント】
 * - 600px: フォントサイズ可変開始 (112.5%)
 * - 700px: 画像フロート解除、フッター縦並び
 * - 1000px: フォントサイズ可変継続 (137.5%〜)
 * - 1062px: article パディング調整
 * 
 * 【注意事項】
 * - フォントサイズの calc() を変更すると全体のバランスが崩れます
 * - article の max-width (1060px) は com-core-layout.css と連動しています
 * - footer の背景画像は /i/layout/dioramalike.jpg に依存
 * - body の背景画像は /i/layout/bg_main.jpg に依存
 * - ミニファイ後は core-base.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: common2.css から改名・充実したドキュメント追加
 * 
 * ============================================================================
 */


/* ============================================================================
   レスポンシブフォントサイズ
   ----------------------------------------------------------------------------
   画面幅に応じてフォントサイズを動的に調整します。
   
   【サイズ計算】
   〜599px: 16px (100%)
   600px〜999px: 18px〜22px
     calc(112.5% + 4 * (100vw - 600px) / 400)
     → 100pxごとに1px大きくなる
   
   1000px〜: 22px〜27px
     calc(137.5% + 5 * (100vw - 1000px) / 1800)
     → 100pxごとに約0.3px大きくなる
   
   この設定により、画面サイズに応じて読みやすいフォントサイズを維持します。
   大画面でも極端に大きくならないよう、1000px以降は緩やかに変化します。
   ============================================================================ */

html {
 height:100%;
 max-width:100%;
 font-size:100%;
 width:100%;
}/* 16px */
  /*  600pxから1,000pxまで、100pxごとに1px大きくなる */
@media (min-width: 600px) {
html{
      font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
}
}
  /*   1,000pxから2,000pxまで、100pxごとに0.5px大きくなる には1800を1000に。今は画面が大きくてもそれほど大きくならない*/
@media (min-width: 1000px) {
html{
        font-size: calc(137.5% + 5 * (100vw - 1000px) / 1800);
}
}


/* ============================================================================
   body 基本スタイル
   ----------------------------------------------------------------------------
   【フォントファミリー】
   1. 游明朝 (Windows/Mac 標準)
   2. ヒラギノ明朝 ProN W3 (Mac)
   3. Noto Serif JP (Webフォント)
   4. Sawarabi Mincho (Webフォント)
   5. A1 Mincho
   6. serif (最終フォールバック)
   
   【背景】
   /i/layout/bg_main.jpg - ピンクの亀背景
   ============================================================================ */

body{
 font-family: "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Noto Serif JP","Sawarabi Mincho","A1 Mincho", serif;
 height:100%;
 background-image:url('/i/layout/bg_main.jpg');
 /*ピンクの亀背景*/;
 font-size:100%;
}
::selection{ background-color:#f77;color:#fff
}
hr{ margin:1em;}
img{
 vertical-align:top;
 margin:0 auto;
 text-align:center;
}


/* ============================================================================
   画像フロート
   ----------------------------------------------------------------------------
   画像を左または右に回り込ませるためのユーティリティクラス。
   
   【使用例】
   <img src="..." class="fl"> 左寄せ
   <img src="..." class="fr"> 右寄せ
   
   【レスポンシブ】
   700px以下: float解除、中央寄せに変更
   ============================================================================ */

/* ●画像フロート左寄せなどに*/
.fl{
 float:left;
 margin:5px 1em;
}
/* ●画像フロート寄せなどに*/
.fr{
 float:right;
 margin:5px 1em;
}
@media(max-width:700px) {
#bodymain img.fl,#bodymain img.fr{
  margin:2em auto auto;
  text-align:center;
  float:none;
  display:inherit;
}/* ●画像フロートは700以下でフロート切る */
}


/* ============================================================================
   article - メインコンテンツエリア
   ----------------------------------------------------------------------------
   headerやnavやfooter以外のメインコンテンツを囲む要素。
   
   【スタイル】
   - 最大幅: 1060px
   - 中央寄せ (margin: 0 auto)
   - 白背景
   - 下部パディング: 20px
   
   【レスポンシブ】
   1062px以下: パディング0に変更
   
   【注意】
   max-width: 1060px は com-core-layout.css の .inner と連動しています
   ============================================================================ */

article{
    /*headerやnavやfooter以外のところをすべて囲むもの、横幅1060まで広がる*/
    max-width:1060px;
    margin:0 auto;
    padding: 0 0 20px 0px;
    background-color:#fff;
}


/* ============================================================================
   テキスト段落修飾系
   ----------------------------------------------------------------------------
   p, strong, em などの基本的なテキストスタイルを定義します。
   ============================================================================ */

#bodymain a{ color:#00f;}
#bodymain a:visited{ color:#31a;}
p{
 color:#222;
 line-height:1.4;
 text-indent:1em;
 margin:0 1em;
 text-align:left;
}
#bodymain p.right{text-align:right;}
.noind{ text-indent:0;}
.red{ color:#f00;}
.blue{color:#00f}
.gray{color:#999}
.kyoutyou{ border-bottom:dashed 1px #888;}
#bodymain .climg{
 margin:0;
 border:none;
 box-shadow:none;
 vertical-align:middle;
}
strong {
 font-weight: bold;
 color: #f44;
 background: linear-gradient(transparent 50%, rgba(255, 255, 90, .54) 50%);
}
em {
 font-weight: bold;
 font-style: normal;
 color: #111;
 background: linear-gradient(transparent 50%, rgba(90, 255, 255, .24) 50%);
}


/* ============================================================================
   リスト (ul, ol)
   ----------------------------------------------------------------------------
   【ul】
   - 中央寄せ
   - 幅80%
   - 内容は左寄せ
   
   【ol】
   - 数字リスト (decimal)
   - ネスト時は英字小文字 (lower-alpha)
   ============================================================================ */

ul {
 text-align: center;
 line-height: 1.4;
 margin-left: auto;
 margin-right: auto;
 width: 80%
} 
li{text-align: left;}

ol{
 list-style-type:decimal;
 margin-left:3em;
 text-align:left;
 line-height:1.4;
}
ol ol{
 list-style-type:lower-alpha;
}
ol ol li{
 list-style-type:lower-alpha;
}


/* ============================================================================
   header - ヘッダーエリア
   ----------------------------------------------------------------------------
   サイト上部のヘッダー要素のスタイル。
   
   【構造】
   header
   ├─ h1 (ロゴ)
   ├─ .header-inner (背景画像)
   ├─ .logo (ロゴ配置)
   └─ .title (タイトル)
   
   【背景】
   /i/layout/back_06.png
   ============================================================================ */

header h1{
 padding-right:1em;
}
header h1 a{ height:56px;
 display:block;
}

.title {
 height: inherit;
 margin: 0 auto;
 text-align: center;
}
.title img {
 margin: 0 auto;
}

.logo {
 text-align: center;
}
.header-inner {
 /* #utopで問題はない命名ではある */
 max-width: 100%;
 overflow: hidden;
 margin: 0 auto;
 padding: 0;
 border-top: 5px solid #f07f89;
 background: url("/i/layout/back_06.png");
}


/* ============================================================================
   footer - フッターエリア
   ----------------------------------------------------------------------------
   ※ 2025-10-20: フッターは com-components-footer.css で管理されています。
   ※ 旧スタイルは削除済み。新デザインではCSS変数を使用。
   ============================================================================ */


/* ============================================================================
   article レスポンシブ (1062px以下)
   ----------------------------------------------------------------------------
   タブレット・モバイルでのパディング調整
   ============================================================================ */

@media only screen and (max-width: 1062px) {
article {
  padding:0;
}
}