@charset "Shift_JIS";
/* style.css */
.secret {
  font-size: 9px;
  color: #F9F0F3;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* CSSを読んでいるあなた。
 * まず、このコードが酷いのは見なかったことにしてください。
 * * そして、もしよろしければ、名刺の裏に「緑色のアスタリスク（*）」を書いて、
 * 真神、もしくは私のテーブルに居る「私が連れてきた人」に預けてください。
 * * ソースコードを読む程度にデジタルに詳しいあなたには、今後何かあったとき、ぜひ相談させてください。
 * 可能であればでいいです。謝礼にちょっとした異世界のお菓子を用意してお待ちしています！
 *//* リセットcssはここから */
/* Copyright (c) 2021 Elad Shechter - https://github.com/elad2412/the-new-css-reset Released under the MIT license https://opensource.org/license/mit/ */
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}:where(ol,ul){counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}
/* リセットcssここまで */

/* HTMLとbodyの完全リセット */
html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}
body {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* 特定のセレクタに対してスタイルを復元・指定 */
:where(:focus-visible) {
    outline: revert;
}
:where(img) {
    vertical-align: bottom;
}
a, button, :where([type="checkbox"], [type="radio"], [type="submit"], [type="reset"], [type="button"], select, optgroup, option, label:has([type="checkbox"], [type="radio"]), summary) {
    cursor: pointer;
}
:where(em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr, ins, del, center, font) {
    all: revert;
    box-sizing: border-box;
}
:where(html) {
    scroll-padding-block-start: 3em;
}

/* CSS変数（カスタムプロパティ）を設定 */
:root {
    --white: #fff;
    --gray: rgb(0 1 2 / 0.065);
    --red: #e81a35;
    --hr-border-color: #ccc;
    --button-border-color: #555;
    --text-color: #333;
    --background-color: #F8F5F2;
    --nav-background-color: var(--background-color);
    --link-color: rgb(209 107 158);
    --link-visited-color: #767676;
    --main-color: rgb(209 107 158);
    --main-color-t: rgb(209 107 158 / 0.2);
    --div__background-image-gradation-top-color: rgb(255 255 255 / 1);
    --div__background-image-gradation-bottom-color: rgb(209 107 158 / 0.125);
}

/* bodyで基本の指定 */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(0.75rem, 3.8vw, 1rem);
    line-height: 1.8;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    line-break: strict;
    hanging-punctuation: allow-end;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* 背景のグラデーション */
.div__background-image-gradation {
    width: 100vw !important;
    height: 100vh;
    position: fixed;
    z-index: -1;
    left: 0 !important;
    right: 0 !important;
    background-image: linear-gradient(180deg, var(--div__background-image-gradation-top-color) 40%, var(--div__background-image-gradation-bottom-color) 80%);
}
.fix-body .div__background-image-gradation {
    background-image: linear-gradient(180deg, var(--div__background-image-gradation-top-color) 80%, var(--div__background-image-gradation-bottom-color) 100%);
}

/* ヘッダー */
.header {
    display: grid;
    place-content: center;
    place-items: center;
    width: 100%;
    height: 90vh;
    height: 90svh;
    position: relative;
    max-width: 45em;
    margin: 0 auto !important;
    padding: 0 !important;
}
.header img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 90vh;
    max-height: 90svh;
    object-fit: cover;
    object-position: center center;
}
.header-1 img {
    opacity: 0;
    animation: fade-In .75s linear 1s forwards;
}
@keyframes fade-In {
    from { opacity: 0 }
    to { opacity: 1 }
}
.sitename {
    position: absolute;
    display: grid;
    place-content: center;
    place-items: center;
    color: var(--white);
    width: 100%;
    height: 100%;
    z-index: 2;
}
.sitename::before {
    content: '';
    position: absolute;
    width: 75vw;
    height: 75vw;
    max-width: 25em;
    max-height: 25em;
    border: solid 2px var(--white);
    border-radius: 100%;
    z-index: -1;
}
.h1 { white-space: normal; font-size: 2.5em; font-family: 'Noto Serif TC', serif; font-weight: bold; text-shadow: 0 0 10px var(--main-color); letter-spacing: 0.05em; text-align: center; margin: 0 auto; max-width: 90%; }
.h1-1 { writing-mode: vertical-rl; font-family: 'LXGW WenKai TC', 'Noto Serif TC', serif; font-size: 3em; font-weight: bold; text-shadow: 0 0 10px var(--main-color); letter-spacing: 0.05em; text-align: center; margin: 0 auto; max-width: 90%; }
.h1-medium { font-size: 25px; white-space: normal; text-align: center; margin: 0 auto; max-width: 90vw; display: block; }

/* メインコンテンツを調整 */
main {
    position: relative; /* 追加 */
    width: 100%;
    padding: 2em min(2%, 1em);
    margin-left: 0 !important;
    margin-right: auto;
    box-sizing: border-box;
}

/* セクションを調整 */
.section {
    text-align: left;
    margin-left: 0 !important;
}

/* dl-yokoを調整 */
.dl-yoko {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5em;
    margin-left: 0 !important;
    max-width: 100%;
}

/* ナビゲーション */
.nav {
    display: flex;
    column-gap: 1em;
    justify-content: center;
    width: 100%;
    position: sticky;
    top: 0;
    margin-top: 0.5em;
    padding: 0.5em 0;
    max-width: 45em;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--nav-background-color);
}
.fix-body .nav { background-color: var(--nav-background-color); }

/* フッター */
.footer {
    text-align: center;
    background-color: var(--gray);
    width: 100%;
    max-width: 45em;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* セクションの余白を指定 */
.section + .section { margin-top: 6em; }

/* aタグ */
:where(a) { text-decoration: underline; color: var(--link-color); }
:where(a:visited) { color: var(--link-visited-color); }
:where(a:is(:hover, :active)) { outline: dotted 1px; }

/* 強調の赤文字 */
.strong { color: var(--red); }

/* マークタグをカスタマイズ */
.mark { color: unset; background-color: var(--main-color-t); }

/* ulリスト, olリスト */
:where(ul, ol) { margin-block: 1em; padding-inline-start: 2em; max-width: 100%; margin-left: auto; margin-right: auto; }
.list-style-position-inside { list-style-position: inside; }
.ul-disc { list-style-type: disc; }
.ul-circle { list-style-type: circle; }
.ul-square { list-style-type: square; }
.ul-moji-ninni-1 { list-style-type: "★ "; }
.ol-decimal { list-style-type: decimal; }
.ol-decimal-leading-zero { list-style-type: decimal-leading-zero; }
.ol-lower-latin { list-style-type: lower-latin; }
.ol-upper-latin { list-style-type: upper-latin; }
.ol-lower-roman { list-style-type: lower-roman; }
.ol-upper-roman { list-style-type: upper-roman; }
.ol-lower-greek { list-style-type: lower-greek; }
.ol-hiragana { list-style-type: hiragana; }
.ol-katakana { list-style-type: katakana; }
.ol-hiragana-iroha { list-style-type: hiragana-iroha; }
.ol-katakana-iroha { list-style-type: katakana-iroha; }
.ol-japanese-informal { list-style-type: japanese-informal; }
.ol-japanese-formal { list-style-type: japanese-formal; }

/* 見出しの余白を統一 */
:where(h2, h3, h4, h5, h6) { margin: 2em 0 1em; max-width: 100%; margin-left: 0; margin-right: auto; }

/* 見出しの装飾 */
.h-boldonly { font-weight: bold; margin-bottom: 0.25em; }
.h-center { text-align: center; }
.h-underline { 
  font-weight: bold; 
  border-bottom: solid 2px var(--text-color); 
  /* 【ここを追加】フォント指定を追加 */
  font-family: "Zen Antique Soft", serif; 
}
.h-leftline { font-weight: bold; border-left: double 8px var(--text-color); padding: 0.5em 1em; }
.h-square { width: fit-content; border: solid 1px var(--text-color); padding: 0.25em 1em; }
.h-big { 
  font-size: 1.25em; 
  /* 【ここに追加しても良い】 h-underlineより優先度が低いので注意 */
}
.h-fill {
    width: fit-content;
    background-color: var(--main-color-t);
    padding: 0.25em 1em;
}
/* hrのスタイル */
.hr { border-block-start: solid 1px var(--hr-border-color); margin-block: 6em; width: 100%; max-width: 45em; margin-left: auto; margin-right: auto; }

/* input, textarea, button, select のスタイル */
:where(input, button, textarea, select) { font-size: max(1em, 1rem); background-color: var(--white); border: solid 1px var(--button-border-color); border-radius: 4px; padding: 0 0.5em; width: 12em; max-width: 100%; height: 2.25em; align-items: revert; }
:where(:is(input, textarea, select):not([type="submit"], [type="reset"], [type="button"], button, [type="radio"], [type="checkbox"], [type="range"], [type="color"], [type="image"], [type="file"])):focus { outline: solid 1px var(--button-border-color); }
:where([type="submit"], [type="reset"], [type="button"], button) { width: unset; color: var(--white); background-color: var(--button-border-color); }
@media (any-hover: hover) { :where([type="submit"], [type="reset"], [type="button"], button):is(:hover, :active) { opacity: 0.8; } }
:where([type="radio"], [type="checkbox"], [type="range"], [type="color"], [type="image"], [type="file"]) { all: revert; box-sizing: border-box; font: unset; font-size: max(1em, 1rem); margin: unset; padding: unset; cursor: pointer; }
:where([type="radio"], [type="checkbox"], [type="range"]) { accent-color: var(--main-color); }
:where([type="checkbox"], [type="radio"]) { height: 1.25em; width: 1.25em; margin-right: 0.5em; vertical-align: middle; }
:where(textarea) { height: unset; line-height: 1.5; letter-spacing: 0; resize: both; }
:where(select) { -webkit-appearance: revert; appearance: revert; }
:where(label:has([type="checkbox"], [type="radio"])) { display: grid; align-items: center; justify-content: start; grid-template-columns: auto auto; width: fit-content; margin-top: 0.25em; }
:where(summary) { list-style: revert; }
.summary-span { text-decoration: underline; }
details[open] > .summary-span { text-decoration: none; }
.dl-yoko { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5em; max-width: 100%; margin-left: 0 !important; margin-right: auto; }
.box { border: solid 1px var(--hr-border-color); padding: 1.5em; margin: 1.5em 0; max-width: 100%; margin-left: auto; margin-right: auto; }
.box-another { border: solid 1px var(--text-color); }
.simple-imglink { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em; margin-top: 1.5em; max-width: 100%; margin-left: auto; margin-right: auto; }
@media screen and (min-width: 45em) { .simple-imglink { grid-template-columns: repeat(3, 1fr); } }
.simple-imglink-a { border: solid 1px #ccc; padding: 1em; border-radius: 4px; }
.simple-imglink-imgbox { margin-bottom: 1em; aspect-ratio: 1 / 1; }
.simple-imglink-imgbox img { width: 100%; height: 100%; object-fit: cover; }
.table-color th, .table-color td { border: solid 1px var(--text-color); padding: 0.125em 1.5em; }
.table-color th { background-color: var(--main-color-t); }
.table-scroll { display: block; overflow-x: scroll; white-space: nowrap; max-width: 100vw; margin-left: auto; margin-right: auto; }
.name-conversion-1 { display: grid; align-items: end; grid-template-columns: 8em 8em auto; column-gap: 0.5em; max-width: 100%; margin-left: auto; margin-right: auto; }
.name-conversion-1 :is(input, button, select) { width: fit-content; }
.name-conversion-2-input { display: grid; align-items: end; column-gap: 0.5em; row-gap: 1em; max-width: 100%; margin-left: auto; margin-right: auto; }
.name-conversion-2-input label { display: grid; align-items: center; grid-template-columns: 5em auto; width: fit-content; }
.name-conversion-2-button { display: flex; column-gap: 1em; }
.form-block + .form-block { margin-top: 2em; }
.form-full-width-formitem { width: 100%; max-width: 100%; }
.hissu { color: var(--red); }
@media screen and (min-width: 768px) {
    body { max-width: 45em; margin: 0 auto !important; }
    .header { max-width: 45em; margin: 0 auto !important; }
    .nav { max-width: 45em; margin: 0 auto !important; }
    main { max-width: none; margin-left: 0 !important; } /* 修正 */
    .footer { max-width: 45em; margin: 0 auto !important; }
    .sitename { max-width: 100em; }
    .h1 { max-width: 90%; }
    .h1-medium { max-width: 90vw; }
    .h1-1 { max-width: 90%; }
    :where(ul, ol) { max-width: 90%; }
    :where(h2, h3, h4, h5, h6) { max-width: 100%; margin-left: 0; }
    .dl-yoko { max-width: 100%; margin-left: 0 !important; }
    .box { max-width: 90%; }
    .simple-imglink { max-width: 90%; }
    .table-scroll { max-width: 90vw; }
    .name-conversion-1 { max-width: 90%; }
    .name-conversion-2-input { max-width: 90%; }
    .hr { max-width: 45em; }
}
@media screen and (max-width: 768px) {
    .header { width: 90%; height: 70vh; margin: 0 auto; }
    .sitename { width: 90%; max-width: 90%; font-size: 1.5em; }
    .sitename::before { width: 80vw; height: 80vw; max-width: 20em; max-height: 20em; }
    .header img { max-height: 70vh; }
    main {
        width: 90%; /* 幅を90%に固定 */
        max-width: 90%; /* 最大幅も90%に制限 */
        padding: 1em 0; /* 上下パディングを維持 */
        margin: 0 auto; /* 中央揃えで両サイドに5%余白 */
        box-sizing: border-box;
    }
    .nav { width: 90%; max-width: 90%; padding: 0.25em 0; margin: 0 auto; }
    .footer { width: 90%; max-width: 90%; padding: 0.5em 0; margin: 0 auto; }
}

/* スマホで両サイドに余白をつくる */
@media screen and (max-width: 768px) {
  body {
    padding-left: 1em;
    padding-right: 1em;
  }

  main, .section, .box, .table-scroll, .name-conversion-1, .name-conversion-2-input { /* 修正 */
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  :where(h2, h3, h4, h5, h6, p, ul, ol, dl) {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

/* フォント調整（コピペ用） */
.title-small {
  font-family: "Noto Serif TC", serif;
  font-size: 1.5em;
  text-align: center;
  margin: 1em 0; /* 上下に余白 */
  max-width: 90%;
  color: #48004A; /* 指定色 */
  text-shadow: 0 0 10px #f5a2c6, 0 0 20px #f5a2c6; /* グラデーション風ぼかし */
}
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

img {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}