@charset "utf-8";
/* ############################################### */
/* #   "style.css"：公政標準       2025.11.13版   # */
/* ############################################### */

/*******************************/
/* アプリケーション非依存の定型部 */
/*******************************/
*,::before,::after{   /* 各種ブラウザ固有の余白設定をリセット */
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 虎の巻参照の事 */
}
ul,ol{
  list-style: none;       /* リスト行頭の「・」の自動付加抑止 */
}
a{                    /* リンク文字列装飾のデフォルトパターンを解除 */
  text-decoration: none;  /* アンダーラインなし */
  color: inherit;         /* 文字色は親要素の色を継承 */
}
img{
  max-width: 100%;        /* 画像は全体を表示 */
}

/****************************************/
/* カスタムプロパティ（グローバル変数）定義 */
/****************************************/
:root{
  --screen-max-width: 960px;          /* 最大画面幅 */
  --screen-width: 95%;                /* Windowに対する幅占有率 */
  --elem-V-gap: 0.7em;                /* 表示域内：項目間行間値 */
  --elem-H-gap: 1.5em;                /* 表示域内：項目間列間値 */
  --indent-width: 15px;               /* 表示域内：インデント幅 */
  --side-margin: 20px;                /* 表示域内の横側余白 */
  --sect-V-gap: 40px;                 /* セクション間隙：縦並び */
  --sect-H-gap: 20px;                 /* セクション間隙：横並び */
  --Primary-color: #036;            /* テーマカラー：第１ */
  --Secondary-color: #DCDCDC;       /* テーマカラー：第２ */
  --Accent-color: #00ADAD;          /* アクセントカラー */
  --String-color: #000000;          /* 標準文字列色 */
  --HighLight-color: #FFF;          /* 標準強調色 */
  --Header-height: 68px;              /* ヘッダの垂直幅 */
}
.zen-antique-soft-regular {   /* Googleフォント：Zen Antique Soft  */
  font-family: "Zen Antique Soft", serif;
  font-weight: 400;
  font-style: normal;
}


/******************************/
/* アプリケーション依存の設計部 */
/******************************/
/*##################### 汎用意匠部品定義 #####################*/
/*=========== 標準とする FlexBox の定義 ============*/
.Hflame{            /* 水平フレーム（枠なし） */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: row;                /* 枠内要素の配置方向：左→右 */
  flex-wrap: wrap;                    /* 枠内要素の表示幅不足の場合：改行 */
  padding: var(--indent-width);       /* 枠内余白 */
/*  background-color: aquamarine;     /* #### デバッグ用識別色 #### */
}
.Vflame{            /* 垂直フレーム（枠なし） */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: column;             /* 枠内要素の配置方向：上→下 */
  flex-wrap: nowrap;                  /* 枠内要素の表示幅不足の場合：非改行 */
  padding: var(--indent-width);       /* 枠内余白 */
/*  background-color: gray;           /* #### デバッグ用識別色 #### */
}
/* "boxpos-xxxx" は、class="Hflame boxpos-center" のように同時に指定する */
.boxpos-center{     /* フレックスボックス内の要素配置：中央寄せ */
  justify-content: center;            /* ボックス内の配置：中央 */
}
.boxpos-left{       /* フレックスボックス内の要素配置：左寄せ */
  justify-content: flex-start;        /* ボックス内の配置：左寄せ */
}
.boxpos-right{      /* フレックスボックス内の要素配置：右寄せ */
  justify-content: flex-end;          /* ボックス内の配置：右寄せ */
}
.boxpos-balance{    /* フレックスボックス内の要素配置：要素均等割付 */
  justify-content: space-around;      /* ボックス内の配置：均等割付 */
}
.boxpos-strech{     /* フレックスボックス内の要素配置：要素両端揃え */
  justify-content: space-between;     /* ボックス内の配置：両端揃え */
}
/* "with-border" は、class="Hflame with-border" のように同時に指定する */
.with-border{       /* フレームに枠線を付加 */
  border: solid 1px black;          /* 枠囲い指定 */
}
.txa-R{             /* 文字列の配置：右寄せ */
  text-align: right;                  /* 文字列右寄せ */
}
.txa-C{             /* 文字列の配置：中央寄せ */
  text-align: center;                 /* 文字列中央寄せ */
}
.txa-L{             /* 文字列の配置：左寄せ */
  text-align: left;                   /* 文字列左寄せ */
}

/*=========== FlexBox：フレーム内説明 派生系列 ============*/
.inbox-right{       /* フレーム内説明：説明文右側配置 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: row;                /* 枠内要素の配置方向：左→右 */
  width: var(--screen-max-width);     /* 画面最大幅設定 */
  max-width: var(--screen-width);     /* Windowに対する幅占有率 */
  flex-wrap: wrap;                    /* 枠内要素の表示幅不足の場合：改行 */
  padding: var(--indent-width);       /* 枠内余白 */
  gap: var(--elem-H-gap);             /* 枠内要素間の間隙 */
  margin: 5px;                        /* 枠外側余白 */
}
.inbox-left{        /* フレーム内説明：説明文左側配置 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: row-reverse;        /* 枠内要素の配置方向：右→左 */
  width: var(--screen-max-width);     /* 画面最大幅設定 */
  max-width: var(--screen-width);     /* Windowに対する幅占有率 */
  flex-wrap: wrap;                    /* 枠内要素の表示幅不足の場合：改行 */
  padding: var(--indent-width);       /* 枠内余白 */
  gap: var(--elem-H-gap);             /* 枠内要素間の間隙 */
  margin: 5px;                        /* 枠外側余白 */
}
.inbox-below{       /* フレーム内説明：説明文下側配置 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: column;             /* 枠内要素の配置方向：上→下 */
  align-items: center;                /* 枠内の各要素の位置を中心揃え */;
  padding: var(--indent-width);       /* 枠内余白 */
  gap: var(--elem-V-gap);             /* 枠内要素間の間隙 */
  margin: 5px;                        /* 枠外側余白 */
}

/*########### BODY領域全体共通のデフォルト意匠定義 ############*/
body{
  background-color: white;          /* 白地に       */
  color: var(--String-color);         /*       黒文字 */
  font-size: 16px;                    /* 文字サイズ：16ピクセル */
  line-height: 1em;                   /* １行の高さ＝文字サイズ */
}
#content-warpper{   /* "content-warpper"："header部 + main部 + footer部" の概念層 */
  width: var(--screen-max-width);     /* 画面最大幅設定 */
  max-width: var(--screen-width);     /* Windowに対する幅占有率 */
  margin-left: auto;                  /* コンテンツをWindow中央に表示：左調整 */
  margin-right: auto;                 /* コンテンツをWindow中央に表示：右調整 */
}

/*#################### ヘッダ部の意匠定義 ####################*/
.header {           /* ヘッダ領域全体と対応付く概念クラス */
  height: var(--Header-height);       /* ヘッダ高 */
  z-index: 8;                         /* 表示レイヤー層：手前側で表示 */
/*  background-color:red;             /* #### デバッグ用識別色 #### */
}
.header-container{  /* ヘッダ領域の（枠＋下地）と対応付く概念クラス */
/*  background-color: coral;          /* #### デバッグ用識別色 #### */
}
.header-inner{      /* ヘッダ枠の内部と対応付く概念クラス */
  padding-left: var(--side-margin);   /* 枠内余白（左辺） */
  padding-right: var(--side-margin);  /* 枠内余白（右辺） */
  display: flex;                      /* 枠内に記述する要素（ロゴ、ナビメニュー）を並行に配置 */
  justify-content: space-between;     /* 記述する要素を枠内に等間隔に配置　*/
  align-items: center;                /* 枠内の各要素の上下位置を中心揃え */
  height: var(--Header-height);       /* ヘッダ高 */
  background-color: var(--Primary-color); /* ヘッダ下地のデフォルト色指定 */
}
/*------------------ ヘッダ枠内に設置する要素の意匠定義 ---------------------*/
.header-title {   /* タイトル文字列の意匠指定 */
  color:var(--Accent-color);          /* 文字色 */
  font-weight: bold;                  /* 文字スタイル */
  font-size: 33px;                    /* 文字サイズ */
  display: inline-block;              /* 横並び要素 */
  vertical-align: middle;             /* 垂直方向配置 */
}
.header-title p {
  border: solid 3px yellow;         /* 枠線 */
}
.header-logo{       /* ヘッダ・ロゴの意匠指定 */
  display: block;                     /* インライン要素の意匠設定を固定→可変 */
}
.header-logo img {  /* ロゴイメージの意匠指定 */
  max-width: 100px;                       /* イメージの最大表示幅 */
  height: auto;
}
.header-menu-button{/* ハンバーガーボタンの表示指定 */
  display: none;                      /* 幅広（パソコン）画面では "非表示" に設定 */
}
.hamburger-btn{     /* ハンバーガーボタンの表示指定 */
  display: none;                      /* 幅広（パソコン）画面では "非表示" に設定 */
}
.site-menu ul{      /* ナビメニューの配置指定 */
  display: flex;                      /* ナビメニューの各項目を並行に配置 */
}
.site-menu ul li{   /* ナビメニューの各項目間の隙間設定 */
  margin-left: 5px;                   /* 各項目の左側隙間サイズ */
  margin-right: 5px;                  /* 各項目の右側隙間サイズ */
}
.navi-button{       /* ナビメニューボタンの意匠 */
  border: double;                     /* 枠：二重線 */
  border-radius: 7px;                 /* ボタン形状の面取り */
  padding-left: 5px;                  /* 内側余白：左 */
  padding-right: 5px;                 /* 内側余白：右 */
  background-color: var(--Primary-color); /* 背景：プライマリー色 */
  color: var(--HighLight-color);      /*     文字：ハイライト色   */
  font-size: 14px;                    /* 文字サイズ*/
  text-align: center;                 /* 文字位置：中央寄せ */
  transition-duration: 0.4s;          /* ホバー時のアニメ所要時間 */
}
.navi-button:hover{ /* ナビメニューボタンでのマウスオーバー時の動作 */
  background-color: var(--Accent-color); /* 背景：強調色 */
}


/*#################### ページ本体領域の意匠定義 ####################*/
.main{  /* ページ本体領域の概念クラス*/
  font-family: 'zen-antique-soft-regular', sans-serif;
/*  background-color: lightslategray; /* #### デバッグ用識別色 #### */
}
.main-container{  /* ページ本体領域の（枠＋下地）と対応付く概念クラス */
/*  background-color: chartreuse; */  /* #### デバッグ用識別色 #### */
}
.main-inner{      /* ページ本体領域内部と対応付く概念クラス */
  padding-top: 10px;                  /* 上部内側余白 */
  padding-bottom: 10px;               /* 下部内側余白 */
  padding-left: var(--side-margin);   /* 枠内余白（左） */
  padding-right: var(--side-margin);  /* 枠内余白（右） */
  background-color: white;          /* 本体部下地のデフォルト色指定 */
}

/*-------------- ファーストビュー領域の意匠定義 --------------*/
h1{                               /* サイトタイトル */
/*  margin-top: var(--Header-height);   /* 領域の上外側に調整用の空白 */
  margin-left: auto;                  /* 文字列表示枠センタリング */
  margin-right: auto;                 /* 　同上                 */
  margin-bottom: 5px;                 /* 領域の下外側に調整用の空白 */
  font-size: 36px;                    /* 文字サイズ */
  color: var(--Primary-color);        /* 文字色 */
  font-family: 'Montserrat', sans-serif;  /* Webフォント（Google提供品）利用 */
  line-height: 1.0em;                 /* 文字改行幅 */
  text-align: center;                 /* 文字列表示枠内センタリング */
  max-width: 90%;                     /* 文字列領域の最大横幅 */
}
#slider-container h2{             /* ファーストビュー画像に重ねる画像タイトル文字列 */
  padding-top: 10px;                  /* 上部内側余白 */
  color: var(--Accent-color);         /* デフォルト文字色 */
  text-shadow: 3px 4px 10px var(--Primary-color);  /* 文字装飾：陰影付加 */
  font-size: 32px;                    /* 文字サイズ */
  line-height: 1.0em;                 /* 文字改行幅 */
  text-align: center;                 /* 文字列表示枠内センタリング */;
  font-weight: bold;                  /* フォント：強調 */
  z-index: 5;                         /* 表示レイヤー層 */
}
#slider-container .bg-img1 h2{        /* ファーストビュー１番画像に重ねるタイトル文字列 */
  color: red;                       /* 指定文字色 */
}
#slider-container .bg-img2 h2{        /* ファーストビュー２番画像に重ねるタイトル文字列 */
  color: black;                     /* 指定文字色 */
}
#slider-container .bg-img3 h2{        /* ファーストビュー３番画像に重ねるタイトル文字列 */
  color: var(--Accent-color);         /* 指定文字色 */
}
#slider-container .bg-img4 h2{        /* ファーストビュー４番画像に重ねるタイトル文字列 */
  color: var(--Accent-color);         /* 指定文字色 */
}
#slider-container .bg-img5 h2{        /* ファーストビュー５番画像に重ねるタイトル文字列 */
  color: var(--Accent-color);         /* 指定文字色 */
}
#slider-container .bg-img6 h2{        /* ファーストビュー５番画像に重ねるタイトル文字列 */
  color: black;                     /* 指定文字色 */
}
#slider-container .slider-for{    /* ファーストビュー画像枠 */
  position: relative;                 /* スライドショーの位置の起点 */
  z-index: 1;                         /* スライドショーのレイヤーは最奥 */
  height: 61vh;                       /* スライダー全体の高さ：ウインドウ全体分 */
  border: 3px double black;         /* 枠線 */
}
#slider-container .first-view{    /* ファーストビュー画像の意匠定義と文言の位置指定 */
  width: 90%;                         /* ファーストビュー全体の幅：親要素相対 */
  height: 60vh;                       /* ファーストビュー全体の高さ：ウインドウ相対 */
  margin-left: auto;                  /* 表示枠センタリング */
  margin-right: auto;                 /* 　同上            */
  background-repeat: no-repeat;       /* 一枚絵（繰り返しなし）で背景画像表示 */
  background-position: center center; /* 背景画像表示基準位置：領域中央 */
  background-size: contain;           /* 背景画像がスライダーアイテム全体を覆って表示 */
}
#slider-container .first-view:hover{/* ファーストビュー領域へのマウスオーバー時の動作 */
  transform: scale(1.1);              /* 画像表示サイズを変更 */
}
/* 背景画像ファイル指定 */
.bg-img1{
  background-image: url(../img/ソフト設計イメージ.png);
}
.bg-img2{
  background-image: url(../img/データ分析中.png);
}
.bg-img3{
  background-image: url(../img/情報要約中.png);
}
.bg-img4{
  background-image: url(../img/WEB開発中.png);
}
.bg-img5{
  background-image: url(../img/ゲーム開発中.png);
}
.bg-img6{
  background-image: url(../img/プロンプト設計中.png);
}
#slider-container .slider-nav img{  /* スライダー画像意匠 */
  width: calc(100% - 20px);           /* 表示サイズ：幅指定 */
  object-fit: contain;                /* 高さを合わせるように画像全体を縮小 */
  border: solid 1px;                  /* 枠付き */
  margin-top: 15px;                   /* 上要素との隙間 */
}

/*-------------- ページ本体領域に設置する要素の意匠定義 --------------*/
.sect-title{      /* ページ本体領域に共通する意匠定義 */
  margin-top: var(--elem-V-gap);      /* 領域の上外側に調整用の空白 */
  width: 200px;                       /* 枠の横幅 */
  margin: 0 auto;                     /* 文字列表示枠センタリング */
  text-align: center;                 /* 文字列表示枠内センタリング */
}
.sect-title h2 {  /* 和文タイトル */
  font-size: x-large;
}
.sect-title p {   /* 英文タイトル */
  margin-top: 0.4em;                  /* 領域の上外側に調整用の空白 */
  font-size: small;
}

/* --------------------------------------------------------------- */
#sect-1{          /* §１全体に共通する意匠定義 */
  margin-top: var(--sect-V-gap);      /* 前セクションとの間隙 */
  padding: var(--indent-width);       /* セクション内余白 */
  background-color: var(--Secondary-color); /* セクションの背景色 */
}
#sect-1 .flexbox-container{         /* §１-段落のフレーム内のボックス配置 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  justify-content: center;            /* フレックスボックスの配置：中央 */
}
#sect-1 .inbox-below h3, img, p {   /* §１-段落のフレーム内説明の共通意匠定義 */
  width: 200px;                       /* 枠の横幅 */
}
#sect-1 .inbox-below img{           /* §１-フレーム内説明：画像 */
  width: 180px;                       /* 幅を指定 */
  height: auto;                       /* 高さを自動調整 */
  margin: 0 auto;                     /* 領域内の要素の水平配置：中央 */
  display: block;                     /* インライン要素の img をブロック要素へ転換 */
}
#sect-1 .inbox-below h3{            /* §１-フレーム内説明：見出し */
  text-align: center;                 /* 文字列表示枠内センタリング */
  line-height: 1.2em;                 /* 見出しの行間 */
}
#sect-1 .inbox-below p{             /* §１-フレーム内説明：説明文 */
  line-height: 1.5em;                 /* 説明文の行間 */
}
#sect-1 .inbox-below .small-p{      /* §１-フレーム内説明：補足説明文 */
  font-size: small;                   /* フォントサイズ */
  line-height: 1.0em;                 /* 説明文の行間 */
  padding: 5px;                       /* 枠内余白 */
  border: 1px solid black;          /* 枠線 */
}
/* 技術系の各要素へのマウスオーバー時の共通動作 */
#skill-Web-design:hover,            /* 「Webデザイン」要素 */
#skill-prompt-design:hover,         /* 「生成ＡＩ指示設計」要素 */
#skill-data-analysis:hover,         /* 「データ分析」要素 */
#skill-system-design:hover,         /* 「構造設計」要素 */
#skill-game-system:hover{           /* 「ゲームシステム」要素 */
  background-color: var(--Accent-color);  /* 背景色 */
  border-radius: 15px;                /* 矩形角の面取り */
  transform: scale(1.05);             /* 画像表示サイズを変更 */
}

/* --------------------------------------------------------------- */
#sect-2{          /* §２全体に共通する意匠定義 */
  margin-top: var(--sect-V-gap);      /* 前セクションとの間隙 */
  padding: var(--indent-width);       /* 枠内余白 */
  color: var(--HighLight-color);      /* 文字色 */
  background-color: var(--Primary-color); /* セクションの背景色 */
}
#sect-2 .chamfer{                    /* §２-段落のフレーム矩形の面取り */
  border-radius: 10px;                /* 角の丸めの大きさ */
}
#sect-2 .inbox-below{       /* フレーム内説明：説明文下側配置 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  flex-direction: column;             /* 枠内要素の配置方向：上→下 */
  align-items: center;                /* 枠内の各要素の位置を中心揃え */;
  padding: var(--indent-width);       /* 枠内余白 */
  gap: var(--elem-V-gap);             /* 枠内要素間の間隙 */
  margin: 5px;                        /* 枠外側余白 */
}
#sect-2 .inbox-below h3, img, p {   /* §２-段落のフレーム内説明の共通意匠定義 */
  width: 200px;                       /* 枠の横幅 */
}
#sect-2 .inbox-below img{           /* §２-フレーム内説明：画像 */
  width: 180px;                       /* 幅を指定 */
  height: auto;                       /* 高さを自動調整 */
  margin: 0 auto;                     /* 領域内の要素の水平配置：中央 */
  display: block;                     /* インライン要素の img をブロック要素へ転換 */
}
#sect-2 .inbox-below h3{            /* §２-フレーム内説明：見出し */
  text-align: center;                 /* 文字列表示枠内センタリング */
  line-height: 1.3em;                 /* 見出しの行間 */
}
#sect-2 .inbox-below p{             /* §２-フレーム内説明：説明文 */
  line-height: 1.5em;                 /* 説明文の行間 */
}
#sect-2 .inbox-below .small-p{      /* §２-フレーム内説明：補足説明文 */
  font-size: small;                   /* フォントサイズ */
  line-height: 1.0em;                 /* 説明文の行間 */
  padding: 5px;                       /* 枠内余白 */
  border: 1px solid white;          /* 枠線 */
}
/* 管理系の各要素へのマウスオーバー時の共通動作 */
#skill-summarize:hover,             /* 「要約・教育」要素 */
#skill-quality-mng:hover,           /* 「デザインレビュー・品質管理」要素 */
#skill-project-mng:hover {          /* 「プロジェクト管理・リスク管理」要素 */
  background-color: var(--String-color);  /* 背景色 */
  border-radius: 15px;                /* 矩形角の面取り */
  transform: scale(1.05);             /* 画像表示サイズを変更 */
}

/* --------------------------------------------------------------- */
#sect-3{          /* §３全体に共通する意匠定義 */
/*  margin-top: var(--sect-V-gap);      /* 前セクションとの間隙 */
  margin-top: calc(var(--sect-V-gap) *2);      /* 前セクションとの間隙 */
}
#sect-3 .sect-container{    /* §３領域の（枠＋下地）に対応する抽象クラス */
/*  background-color: yellow;         /* #### デバッグ用識別色 #### */
}
#sect-3 h2{                 /* §３のタイトル行の意匠定義 */
  padding-top: var(--elem-V-gap);     /* タイトル行セクション内上側余白 */
}

#sect-3 caption{            /* テーブル：タイトル */
  margin-bottom: 0.5em;               /* テーブルとの隙間 */
}
#sect-3 table{              /* テーブル：外枠 */
  border-collapse: collapse;          /* 表中のセルの隙間なし */
  border: 2px solid black;          /* 表の枠線 */
}
#sect-3 tbody{              /* テーブル：表本体の外枠 */
  border-top: 1px solid black;      /* 見出し行と表本体の境界線 */
}
#sect-3 tbody > tr:nth-child(odd){/* テーブル：奇数行 */
  background-color: var(--Secondary-color); /* 下地色 */
}
#sect-3 th{                 /* テーブル：項目名列の内部 */
  padding: 0.4em;                     /* 行間調整 */
  border-right: 1px solid black;    /* 区切り縦線 */
}
#sect-3 td{                 /* テーブル：表本体（データ部） */
  padding: 0.4em;                     /* 行間調整 */
  border-right: 1px solid black;    /* 区切り縦線 */
}

#sect-3 .mycareer-table{    /* 経歴表テーブル */
  margin-top: 20px;                   /* 経歴表外上側余白 */
}
#sect-3 .boxpos-center{     /* §３の発信情報（写真フレーム＋グリッド表）の意匠定義 */
  display: flex;                      /* 枠内要素の扱い：フレックス構造体 */
  justify-content: center;            /* ボックスの配置：中央 */
  align-items: center;                /* 枠内の各要素の上下位置を中心揃え */
}
#sect-3 .inbox-right .face-photo img{  /* 写真フレーム：顔写真 */
  width: 140px;                       /* フレームの横幅 */
  height: 140px;                      /* フレームの高さ */
  object-fit: contain;                /* 画像サイズ変更時に縦横比を維持 */
  border-radius: 70px;                /* 角とり：円形フレーム */
  outline: 7px solid var(--Primary-color);  /* 画像の外枠 */
}

/*######## main と footer 間の調節用隙間（スペーサー） ########*/
#bottom-spacer{
  height: 80px;                       /* 高さ */
}

/*#################### フッタ部の意匠定義 ####################*/
.footer{            /* フッタ領域全体と対応付く概念クラス */
  margin-top: var(--sect-V-gap);      /* 前セクションとの間隙 */
  background-color: grey;           /* #### デバッグ用識別色 #### */
}
.footer-container{  /* フッタ領域の（枠＋下地）と対応付く概念クラス */
  background-color: darkgreen;      /* #### デバッグ用識別色 #### */
}
.footer-inner{      /* フッタ枠の内部と対応付く概念クラス */
  line-height: 1.3em;                 /* 枠の高さ */
  padding-left: var(--side-margin);   /* 枠内余白（左） */
  padding-right: var(--side-margin);  /* 枠内余白（右） */
  display: flex;                      /* 枠内に記述する要素（ロゴ、著作権宣言）を並行に配置 */
  justify-content: space-between;     /* 記述する要素を枠内に等間隔に配置　*/
  align-items: center;                /* 枠内の各要素の上下位置を中心揃え */
  color: var(--HighLight-color);      /* フッタ内の文字デフォルト色 */
  background-color: var(--Primary-color); /* フッタ下地のデフォルト色指定 */
}
.footer-logo{       /* フッタ内に表示するロゴの意匠指定 */
  display: block;                     /* インライン要素の意匠設定を固定→可変 */
}
.footer-logo img {  /* フッタ内に表示するロゴイメージの意匠指定 */
  width: 200px;                       /* ロゴ意匠の横幅指定 */
}
.footer-mailto{
  font-size: 18px;                    /* 文字サイズ */
  color: var(--HighLight-color);      /* 文字色 */
  font-weight: bold;                  /* 文字装飾 */
}
.footer-copyright{  /* フッタ末に表示する著作権宣言の意匠指定 */
  float: right;                       /* 表示位置：右端 */
  font-size: 16px;                    /* 文字サイズ */
  color: var(--HighLight-color);      /* 文字色 */
  font-weight: bold;                  /* 文字装飾 */
}


/*############## オーバーレイ設置部品の意匠定義 ###############*/

/* ----------------- サイト起動時の目隠し仕様定義 ------------------ */
#splash{      /* バックヤード目隠しを全画面表示 */
  position:fixed;                     /* 目隠し中に表示する画像位置：固定 */
  z-index: 20;                        /* 表示レイヤー層：手前側で表示 */
  left: 0;                            /* 目隠し表示基準位置（左） */
  right: 0;                           /* 目隠し表示基準位置（右） */
  top: 0;                             /* 目隠し表示基準位置（上） */
  bottom: 0;                          /* 目隠し表示基準位置（下） */
  background-color:lightgrey;       /* 目隠し背景色 */
}
#splash_logo{ /* 目隠しアニメーション中のロゴの表示位置定義 */
  position: fixed;                    /* 目隠し中に表示するロゴ位置：固定 */
  z-index: 21;                        /* 表示レイヤー層：手前側で表示 */
  top:50%;                            /* 画面中央 */
  left:50%;                           /* （同上） */
  transform:translate(-50%,-50%);     /* （同上） */
}
#splash_logo img{  /* 目隠しアニメーション中のロゴ・サイズ */
  width: 150px;
}
/* アニメーション仕様 */
.fadeup{      /* サイト起動時のバックヤード目隠しアニメーション */
  animation-name: fadeUpAnime;        /* 目隠しはフェードイン */
  animation-duration: 1s;             /* フェードイン所要時間 */
  animation-fill-mode: forwards;
  opacity: 0%;                        /* 非表示状態でスタート */
}
@keyframes fadeUpAnime{
  from {
      opacity: 0%;                    /* 非表示状態でスタート */
       transform: translateY(100px);  /* 下から出現 */
  } to {
      opacity: 100%;                  /* 出現完遂時は */
      transform: translateY(0);       /* 画面中央 */
  }
}
/* --------------------------------------------------------------- */

/* --------- ページトップ帰投ボタンの機能仕様・表示仕様定義 ---------- */
#back-home{     /* ページトップ帰投ボタンの配置仕様 */
  position: fixed;          /* 帰投ボタンを物理画面内に常時表示 */
  bottom: 40px;             /* 物理画面下からの固定距離 */
  opacity: 0%;              /* 初期状態：非表示 */
  transform: translateY(100px);
}
#back-home.UpMove{  /* 帰投ボタンが出現するアニメーション動作 */
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{   /* 出現アニメーション動作仕様 */
  from {
      opacity: 0%;          /* 非表示状態から */
      transform: translateY(100px);
  } to {
      opacity: 100%;        /* 表示状態へ */
      transform: translateY(0);
  }
}
#back-home.DownMove{  /* 帰投ボタンが退出するアニメーション動作 */
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{   /* 退出アニメーション動作仕様 */
  from {
      opacity: 100%;        /* 表示状態から */
      transform: translateY(0);
  } to {
      opacity: 0%;          /* 非表示状態へ */
      transform: translateY(100px);
  }
}
#back-home a{         /* ページトップ帰投ボタンの意匠＆ヒットチェック仕様 */
  display: flex;           /* ヒットチェック範囲を文字列枠からボタン枠へ拡張 */
  color: white;          /* 帰投ボタンの文字色 */
  background: rgba(128, 128, 128, 0.65);/* 帰投ボタンの背景色 */
  text-align: center;      /* 要素（文字列）：横センタリング */
  align-items: center;     /* 要素（文字列）：縦センタリング */
  width: 58px;             /* 帰投ボタン＆ヒットチェック矩形（ｘ軸）サイズ */
  height: 50px;            /* 帰投ボタン＆ヒットチェック矩形（ｙ軸）サイズ */
  border-radius: 25%;      /* 帰投ボタン矩形の角を丸め */
}
#back-home a:hover{   /* マウスが上に重なった時の帰投ボタンの表示仕様 */
  background-color: var(--Accent-color);  /* 背景色：強調色 */
}
/* --------------------------------------------------------------- */


/*******************************************************************/
/*      レスポンシブデザイン（モバイルサイト用）のレイアウト調整部      */
/*******************************************************************/
@media (max-width: 768px) {   /* レスポンシブデザイン適用境界 */

  /*---------- モバイル用ナビメニュー領域の意匠定義 ----------*/
  :root{
    --Header-height: 44px;              /* ヘッダの垂直幅 */
  }

  .site-menu ul{      /* ナビメニューの表示モードをデフォルトに戻す */
    display: block;                     /* ナビメニューの Flex 指定を解除 */
    text-align: center;                 /* 文字列表示枠内センタリング */
  }
  .site-menu li{      /* ナビメニューの縦方向の設定調整 */
    margin-top: 20px;                   /* 各メニュー項目間の隙間を設定 */
  }
  .header{            /* モバイル用ヘッダ領域の枠組み定義 */
    position: fixed;                    /* ヘッダを固定表示 */
    top: 0;                             /* ヘッダ位置（上）：基準位置からのオフセット */
    left: 0;                            /* ヘッダ位置（左）：基準位置からのオフセット */
    right: 0;                           /* ヘッダ位置（右）：基準位置からのオフセット */
    background-color: var(--Primary-color); /* ヘッダ下地のデフォルト色指定 */
    height: var(--Header-height);       /* 固定ヘッダ部の高さ（厚み） */
    z-index: 10;                        /* 表示レイヤー層：手前側で表示 */
  }
  .header-inner{      /* ヘッダ枠の内部と対応付く概念クラス */
    padding-left: var(--side-margin);   /* 枠内余白（左辺） */
    padding-right: var(--side-margin);  /* 枠内余白（右辺） */
    height: 100%;                       /* 親要素と同じ高さに設定 */
    position: relative;                 /* 子要素の位置を本要素基準に設定 */
  }
  .header-logo img {  /* ロゴイメージの意匠指定 */
    max-width: 72px;                    /* イメージの最大表示幅 */
  }
  .header-title {   /* タイトル文字列の意匠指定 */
    font-size: 24px;                    /* 文字サイズ */
  }

  /*---------- モバイル向けのハンバーガー・メニュー定義 ----------*/
  .header-site-menu{  /* ハンバーガー・メニューの土台 */
    position: absolute;                 /* 親要素(header-inner)に対する位置指定 */
    top: 97%;                           /* メニュー位置：親要素からの下向きオフセット */
    left: 60%;                          /* メニュー位置：親要素からの右向きオフセット */
    right: 0;                           /* メニュー位置：親要素からの左向きオフセット */
    background-color: var(--Primary-color); /* メニュー土台の背景色 */
    opacity: 75%;                       /* 土台矩形の透過度 */
    color: var(--HighLight-color);      /* 文字色 */
/*    padding-top: 10px;                  /* 上部内側余白 */
    padding-bottom: 20px;               /* 下部内側余白 */
    display: none;                      /* デフォルトは非表示 */
  }
  .hamburger-btn{           /* ハンバーガーボタンの表示指定 */
    display: block;                     /* 幅狭（モバイル）画面では "表示" */
  }
  .header-site-menu.is-show{  /* ハンバーガー・ボタン押下時の処理 */
    display: block;                     /* ナビメニューを表示 */
  }

  /*-------------- ファーストビュー領域の意匠定義 --------------*/
  h1{                               /* サイトタイトル */
    margin-top: 20px;                  /* 領域の上外側に調整用の空白 */
    font-size: 28px;                    /* 文字サイズ */
  }
  #slider-container h2{             /* スライダー画像に重ねる画像タイトル文字列 */
    padding-top: 20px;                  /* モバイルのヘッダー固定表示領域分の上部内側余白 */
    font-size: 24px;                    /* 文字サイズ */
  }
  #slider-container .slider-for{    /* スライダー画像枠 */
    height: 30vh;                       /* スライダー全体の高さ：ウインドウ全体分 */
  }
  #slider-container .first-view{    /* 背景画像の意匠定義と文言の位置指定 */
    height: 29vh;                       /* スライダー全体の高さ：ウインドウ相対 */
  }
  #slider-container .first-view:hover{/* ファーストビュー領域へのマウスオーバー時の動作 */
    transform: scale(0.9);              /* 画像表示サイズを変更 */
  }
  
  /*------------------ フッター領域の意匠定義 -----------------*/
  .footer-logo{       /* フッタ内に表示するロゴの意匠指定 */
    display: none;                      /* 表示停止 */
  }
  
}