@charset "utf-8"; /* ==========================================
 共通
============================================*/
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* フォント定義 */
:root {
    --font-default: 'Hiragino Kaku Gothic Pro', 'meiryo', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    --font-serif: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    --font-gothic: "Noto Sans JP";
    --font-size: 16px;
    --line-height: 1.6;
}

.font-default {
    font-family: var(--font-default);
}

.font-serif {
    font-family: var(--font-serif);
}

.font-gothic {
    font-family: var(--font-gothic);
}

body {
    font-family: var(--font-gothic);
    font-size: 3.4vw;
    line-height: var( --line-height);
    background-color: var(--bs-light);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

@media (min-width: 992px) {
    body {
        font-size: 16px;
        background-size: auto 100vw;
    }
}

/* カラー定義 */
:root {
    --gold: #d7a750;
    --beige: #f6f4f2;
    --orange: #fc6f57;
    --red: #ff0000;
    --winered: #920200;
    --yellow: #ffff5e;
    --black: #000;
    --white: #fff;
    --aliceblue: #e8eef4;
}

.text-red {
    color: var(--red)!important;
}

.text-winered {
    color: var(--winered)!important;
}

.text-gold {
    color: var(--gold)!important;
    background-image: linear-gradient( 0deg , #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255,255,255,0);
}

.bg-red {
    background-color: var(--red)!important;
}

.bg-winered {
    background-color: var(--winered)!important;
}

.bg-gold {
    background-color: var(--gold)!important;
}

.bg-beige {
    background-color: var(--beige)!important;
}

.bg-aliceblue {
    background-color: var(--aliceblue)!important;
}

/* 文字サイズ */
.text-larger {
    font-size: 1.3em;
}

.text-large {
    font-size: 1.9em;
}

/* ネオンシャドウ */
.x-sign {
    text-shadow: 0 0 10px var(--color1), 0 0 20px var(--color2), 0 0 40px var(--color3), 0 0 80px var(--color4);
}

.x-sign--type1 {
    color: yellow;
    --color1: goldenrod;
    --color2: orangered;
    --color3: mediumblue;
    --color4: purple;
}

.x-sign--type2 {
    color: lightpink;
    --color1: pink;
    --color2: orangered;
    --color3: red;
    --color4: magenta;
}

.x-sign--type3 {
    color: lightyellow;
    --color1: yellow;
    --color2: lime;
    --color3: green;
    --color4: mediumblue;
}

.x-sign--type4 {
    color: lightyellow;
    --color1: gold;
    --color2: firebrick;
    --color3: pink;
    --color4: red;
}

.x-sign--type5 {
    color: azure;
    --color1: azure;
    --color2: aqua;
    --color3: dodgerblue;
    --color4: blue;
}

.x-sign--type6 {
    color: tomato;
    --color1: orangered;
    --color2: firebrick;
    --color3: maroon;
    --color4: darkred;
}

.x-sign--type7 {
    color: lightyellow;
    --color1: yellow;
    --color2: orange;
    --color3: brown;
    --color4: purple;
}

.x-sign--type8 {
    color: yellow;
    --color1: yellow;
    --color2: lime;
    --color3: green;
    --color4: darkgreen;
}

.x-sign--type9 {
    color: lightyellow;
    --color1: yellow;
    --color2: gold;
    --color3: orange;
    --color4: darkred;
}

/* マーカー */
.mark, mark {
    background-color: var(--yellow);
}

.mark--orange {
    background-color: #ffd36f;
}

/* 画像 */
.img-wrap {
    position: relative;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

a img {
    transition: 0.3s;
}

a:hover img {
    filter: brightness(1.2);
}

/* 段落 */
p {
    /* margin-bottom: 2em; */
    /* margin-top: 2em; */
    /* line-height: 2; */
}

/* スペーサー */
hr {
    margin: 0;
    border: none;
}

.spacer {
    margin-bottom: 2em;
    background-color: rgba(255,255,255,0);
}

.spacer--lg {
    margin-bottom: 3em;
}

/* マージン微調整 */
.-m1 {
    margin-top: -1px;
    margin-bottom: -1px;
}

.-mb1 {
    margin-bottom: -1px;
}

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

/* ボタン */
.btn-wrap {
    width: 100%;
    text-align: center;
    position: relative;
}

.btn {
    position: relative;
    transition: 0.3s;
}

.btn:focus {
    box-shadow: none;
}

/* TOPに戻る */
#page-top {
    position: fixed;
    right: 5%;
    bottom: calc(20vw + 20px);
    bottom: 5%;
    font-size: 3vw;
    margin: 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(100%);
    transition: 0.5s ease-in-out;
}

#page-top.show {
    opacity: 1;
    transform: translateY(0);
}

#page-top a {
    padding: 1em;
    background: var(--bs-dark);
    /* background-image: linear-gradient( 180deg , #a8f2fd , #bafeff , #d2f2fb , #c5fdff, #96e7fa ); */
    color: var(--bs-white);
    text-decoration: none;
    transition: all 0.5s ease;
    /* border-radius: 5px; */
    display: block;
    line-height: 1;
}

#page-top a:hover {
    opacity: 0.6;
}

@media (min-width: 992px) {
    #page-top {
        right: 25px;
        bottom: 25px;
        font-size: 1em;
    }
}

/* 遅延ロード */
[lazyload] {
    /*content-visibility: auto;*/
}

/* ==========================================
 アニメーション
============================================*/
/* パルス */
[data-aos="pulse"] {
    animation-name: pulse;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale(1.05,1.05);
    }

    to {
        transform: scaleX(1)
    }
}

/* 波紋 */
[data-aos=ring]::before, [data-aos=ring]::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 120px;
    box-shadow: 0 0 50px rgb(255, 255, 255) inset;
    animation: ring 2s ease-out infinite;
}

[data-aos=ring]::after {
    animation-delay: .4s;
}

@keyframes ring {
    0% {
        transform: scale(.95);
        opacity: 1
    }

    90% {
        opacity: .1
    }

    to {
        transform: scale(1.05,1.05);
        opacity: 0
    }
}

[data-aos=ring]::before, [data-aos=ring]::after {
    border-radius: 120px;
    box-shadow: 0 0 250px rgb(161 244 147) inset;
}

/* 点滅 */
[data-aos=blink] {
    opacity: 0;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ==========================================
 コンテンツ
============================================*/
.main {
    padding-top: 3%;
    padding-bottom: 3%;
}

.page-title {
    font-size: 1.7em;
    text-align: center;
    line-height: 1.6;
    color: var(--bs-black);
    margin-bottom: 4%;
    letter-spacing: 0.05em;
    font-weight: bold;
    text-shadow: 1px 1px #c3c3c3;
}

.page-title::after {
    content: attr(data-suffix);
    display: block;
    font-size: 50%;
    opacity: 0.7;
    color: silver;
    font-weight: normal;
    text-shadow: none;
}

.contents__table {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.contents__title {
    caption-side: top;
    padding: 1em;
    margin-bottom: 2em;
    color: #fff;
    background-color: steelblue;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.contents__table th,.contents__table td {
    border: none;
    display: block;
    padding: 1em 0.5em;
}

.contents__table th {
    background-color: var(--bs-light);
    position: relative;
    white-space: nowrap;
}

.contents__table th::before,.contents__table th::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: silver;
}

.contents__table th::after {
    width: 25%;
    background-color: steelblue;
}

.contents__table td {
    color: var(--bs-gray);
}

@media (min-width: 992px) {
    .contents__table tr {
        border-width: 1px 0;
    }

    .contents__table th,.contents__table td {
        display: table-cell;
        padding: 1em;
        border-width: 0 1px;
    }

    .contents__table th {
        background-color: steelblue;
        color: var(--bs-white);
    }

    .contents__table th::before,.contents__table th::after {
        display: none;
    }
}