@charset "utf-8";

/* デバッグ用：すべての要素を枠線で囲む
.unit  {
    background-color: rgba(0, 0, 255, 0.1);
    outline: 1px solid blue !important;
}
.unit p {
    background-color: rgba(255, 0, 0, 0.1);
    outline: 1px solid red;
}
/*---------------------------------------------------------------------*/

/* 全要素を「枠線の内側に余白を含める」設定（超重要！） */
* {
    box-sizing: border-box;
}

/* ページ全体の文字サイズの設定 */
/* （ブラウザの標準設定は、16px） */
html {
    font-size: 62.5%; /* ページ全体の基準サイズへ変換(10px相当) */
}

/* コンテンツ全体の基本設定 */
body {
    margin: 0;
    background-color: rgba(2, 6, 0, 0.85);
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
                 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 1.6rem;  /* 標準の大きさ(16px相当) */
    font-weight: 400;   /* normal(標準)、bold(太め): 700 */
}

/* ページヘッダーの設定 */
header {
    display: block;
    margin: 25px auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    text-align: center;
}
header p {
    text-align: center;
    margin: 5px ;
    font-size: 0.9rem;
}

/* ページフッターの設定 */
footer {
    display: block;
    margin: 5px auto 5px;
    width: 100%;
    height: auto;
    max-width: 100%;
    text-align: center;
    opacity: 0.7;
}


/* 全ての画像に対する各種設定 */
img {
 /* 画像が枠からはみ出ないようにする強制ガード */
    max-width: 100%;
    height: auto;

 /* 全ての画像をシャープにする設定 */
 /* ブラウザに「滑らかさ」よりも「コントラスト/エッジ」を優先させる命令 */
    image-rendering: -webkit-optimize-contrast; /* Safari, Chrome用 */
    image-rendering: crisp-edges;               /* Firefox, 標準 */
    filter: contrast(1.05);
}
  /* 個別に標準設定に戻す場合（以下をhtml内に記述） */
  /* style="image-rendering: auto;" */

/* 各種・水平線の設定 */
/* 水平線が枠からはみ出ないようにする強制ガード */
hr {
    max-width: 100%;
    width: 100%;

 /* <hr>タグ誤設置時の発見用 */
    height: 5px;
    border: dotted #fff;
    background-color: #f00;
}
/* ネオン風・太め仕様 */
.hr-01 {
    height: 1px;
    border:none;
    margin-bottom: 5px;
    /* 変数[--hr-color: #000;]の定義（デフォルトは黒） */
    background-color: var(--hr-color, #000);
    box-shadow: 0px 0px 9px 5px var(--hr-color, #000);
}
/* 下部グラデーション仕様 */
.hr-02 {
    height:10px;
    border:none;
    background-color: var(--hr-color, #000);
    background-image: linear-gradient(var(--hr-color, #000), #fff);
}
/* 上部グラデーション仕様 */
.hr-02r {
    height:10px;
    border:none;
    background-color: var(--hr-color, #000);
    background-image: linear-gradient(#fff, var(--hr-color, #000));
}
/* 謝辞コメント記載仕様 */
.hr-03 {
    height: 1px;
    border: none;
    margin: 5px 0;
    border-top: 4px solid var(--hr-color, #000);
    text-align: left;
    overflow: visible;
}
.hr-03::after {
    content: 'Special Thanks !';
    display: inline-block;
    position: relative;
    top: -15px;
    left: 40px;
    padding: 0 10px;
    background-color: #fff;
    color: #000;
 /*   font: 700 italic 1.5rem; */
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 700;
}
/* 左右グラデーション仕様 */
.hr-04 {
    height: 2px;
    border: none;
    margin: 12px 0 4px;
    background: #fff;
    background-image: -webkit-linear-gradient(left, #eee, #444, #eee);
    background-image: -moz-linear-gradient(left, #eee, #444, #eee);
    background-image: -ms-linear-gradient(left, #eee, #444, #eee);
    background-image: -o-linear-gradient(left, #eee, #444, #eee);
}

/* [戻る]ボタンの基本設定 */
.back-button {
    cursor: pointer;
    padding: 5px 15px;
    display: inline-block;
    background-color: #f0f0f0;
    border: 3px solid #444;
    border-radius: 15px;
    transition: all 0.4s ease;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 400;
}
.back-button:hover {
    transform: translateY(-2px);              /* 上にnpx移動 */
    box-shadow: 0 5px 12px rgba(0,0,0,0.5); /* 影をつけて浮いた演出 */
    background-color: rgba(255, 255, 0, 0.8);
}
/* [戻る]ボタンの配置設定 */
.unit.button-right {
    text-align: right;
    padding: 5px 20px; /* 右側に少し余白を */
}

@media (max-width: 767px) {
    header img {
        padding: 0;
        margin: 0 auto;
        max-width: 75%;
    }
}