@charset "UTF-8";
/*haouleafのcss*/

html{background-color:#C7CFC7; /*設定しておきながらbodyと同じ いつか変更できるように置いただけ*/
     scroll-behavior:smooth; /*ページ内リンクをすべてヌルヌル化*/}



/*０ draft ------------------------------------------------------------------------------------------------------------------------*/



/*bgデザイン集*/

.bg1rail{display: inline-block;
         padding: 6px 12px;
         background:linear-gradient(to bottom, #94a3b8 0 2px, transparent 2px calc(100% - 2px), #94a3b8 calc(100% - 2px)), /* レール */
         repeating-linear-gradient(90deg, #b45309 0 4px, #fef3c7 4px 12px); /* 木 */
         border-radius: 4px;}

.bg2ribon{display: inline-block;
          padding: 8px 20px;
          font-family: "Georgia", "游明朝", serif;
          font-size: 0.85rem;
          color: #4a3b32;
          background:linear-gradient(to bottom, transparent 20%, #d4c5b9 20% 80%, transparent 80%), /* 中央を通る石畳の小道 */
          linear-gradient(to right, #e8dfd8, #f5efe9, #e8dfd8);  /* ベースの羊皮紙 */
          border-top: 2px solid #8c6d53;
          border-bottom: 2px solid #8c6d53;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);}
.bg2ribon a{color: #8b0000;
            font-weight: bold;
            text-decoration: none;}
.bg2ribon a:hover{color: #e65100;
                  text-shadow: 0 0 2px rgba(230, 81, 0, 0.5);}



/*１ 外郭１ ------------------------------------------------------------------------------------------*/

body{margin-right:auto; margin-left:auto;
     max-width:550px; width:100%;
     box-sizing:border-box;
     line-height:180%;
     font-size:16px; color:#333333;
     background-color:#C7CFC7;}

header{width:100%; height:180px; /*ヘッダー内に行追加するならここheight増やす*/
       margin-bottom:3em;}
header a:link,
header a:hover,
header a:visited {/* リンク文字装飾 */
                  color:#FFFFFF;
                  white-space:nowrap;}
.size-header{display:block; width:100%; height:180px; border:0;}

footer{width:100%;
       margin:5em 0em 5em;}
footer a,
footer a:link,
footer a:visited,
footer a:hover { /*リンク文字装飾*/
                color:#FFFFFF !important; /*優先*/
                white-space: nowrap;}
.size-footer{display:block;
             width:100%; height:140px; /*フッター内に行追加したいならここheight増*/}

.fmap{/*folderfloorマップ nav用 いつか装飾凝る*/
      margin:3em 0em 3em;
      padding-inline:12px;}

main {/*背景色あり水平線(hr)要らず*/
    background-color:#DBE5DA;
    padding-bottom:5em;
    margin:5em 0 5em; /*main外との距離*/}
main p,
main table {/*面倒だがp始め個別設定していく ※notの方法はspanやul内文字などにも影響してしまい設定増える*/
            padding-inline:12px;}



/*１ 外郭２ ------------------------------------------------------------------------------------------*/

h1{font-size:160%; text-align:center;
   color:#005500;
   padding:5px;
   background:#bca33f;
   border:solid 3px #bca33f;
   margin:0em 0em 3em;}

/*無彩色薄d5ded5 無彩色濃c8d4c8 薄すぎラベンダーE6E6FA オリーブc8ccaa オリーブd0d3b3*/

h2{font-size:120%;
   color:#005500;
   padding:5px;
   background:#d5ded5;
   border:solid 5px #bca33f;
   margin:3em 0em 1em;}

h3{font-size:120%;
   color:#005500;
   padding:5px;
   background-image:linear-gradient(to right,#d5ded5,transparent);
   border-left:solid 5px #bca33f;
   margin:2em 0em 1em;}

h4{font-size:120%;
   margin:1em 0em 1em;}

p{margin:1em 0em 1em;}

hr{margin:5em 0em 5em;}



/*１ 外郭３ ------------------------------------------------------------------------------------------*/

table{border-collapse:collapse;}
th{padding:10px;
   white-space:nowrap;}
td{padding:10px;}

.table1{border:solid black 1px;
        width:94%;
        margin:1em 0em 1em;}
.table1 th,
.table1 td{border:solid black 1px;}

.table2{border:solid #CCC 1px;
        width:94%;
        margin:1em 0em 1em;}
.table2 th,
.table2 td{border:solid #ccc 1px;}

/*横幅設定 あらゆるもの用*/
.width1recipe th{width: 6.5em;}
.width2recipe th{width:5em;}

/*画面追従hub 目次リンク用*/
.hub1scroll {position: fixed;
             left: 50%;
             transform:translateX(-50%); /*hub自体を半分ずらして「完全な中央」に*/
             bottom:90px; /*下部帯広告を避ける高さ*/
             z-index: 999; /*レイヤー値 絶対手前たる999*/
             padding: 10px 20px; border-radius: 20px; /*角丸カプセル形*/
             background-color: rgba(50, 50, 50, 0.2); /*0.2が実体度(=不透明度)*/
             white-space:nowrap; /*改行せず横に広げる*/
             width:max-content;  /*横幅を「文字ぴったり」固定 省エネ環境下にて文字表示無視されないように*/}

/* リターンの杖 目次リンク用 ※演出が自動終了されない ※明度高くて目に悪い*/
.hub1return1 {/*画面追従するミニhub*/
              position:fixed;
              left:50%; transform:translateX(-50%);
              bottom:90px;
              z-index:999;
              padding:10px 20px;
              border:solid 2px rgba(90,60,30,0.5); border-radius:20px;
              background: linear-gradient(135deg, rgba(255, 242, 175, 0.4), rgba(255, 255, 255, 0.4), rgba(255, 215, 0, 0.4));}
.hub1return1-effect {/*演出を仕込む*/
                     position:fixed;
                     left:50%;
                     bottom:90px;
                     width:100px; height:100px;
                     z-index:998;
                     pointer-events:none;
                     opacity:0;
                     transform:translate(-50%,50%) scale(0.2);
                     border-radius:50%;
                     background:radial-gradient(circle,
                      rgba(255,215,0,0.3) 0%,
                      rgba(255,242,175,0.2) 35%,
                      rgba(255,255,255,0.12) 70%,
                      rgba(255,255,255,0) 100%);
                     filter:blur(10px);}
.hub1return1:has(a:hover,a:active) + .hub1return1-effect {/*ポインタかクリックで演出用hub拡大 リターンの光！*/
                                                           opacity:1;
                                                           transform:translate(-50%,50%) scale(8);
                                                           transition:opacity .25s ease,
                                                                      transform .45s ease;}

/*天刻1*/
/*hub板が大胆な色反転 目立ちすぎ？ 画面全体が何かのグラデ ※演出が自動終了されない*/
/*ボックスシャドウ利用*/
.hub1tengoku1 {position:fixed;
               left:50%; transform:translateX(-50%); /*hub自体を半分ずらして「完全な中央」に*/
               bottom: 90px;
               z-index: 999;
               font-weight:bold;
               padding: 10px 20px; border-radius: 20px;
               background-color:rgba(255,255,255,1); mix-blend-mode:difference;}
.hub1tengoku1:has(a:hover,a:active) {transform: translateX(-50%) scale(2.0);
                                     box-shadow:
                                     -120px -80px 180px 300px rgba(255, 0, 60, .20),
                                     140px  80px 200px 350px rgba(30, 80, 255, .20),
                                     -80px 120px 220px 300px rgba(170, 40, 255, .15),
                                     0 0 80px 100vmax rgba(255, 255, 255, .18);
                                     mix-blend-mode:difference;}

/*天刻2*/
/*hub板が控えめ 画面演出が大胆な色反転 ※演出が自動終了されない*/
/*ついでに画像利用に挑戦 文字active連動(+)を実現*/
.hub1tengoku2{/*親hub*/
              position:fixed;
              left:50%; transform:translateX(-50%);
              bottom:90px;
              z-index:999;
              font-weight:bold;
              padding:10px 20px; border-radius:20px;
              background-color:rgba(50,50,50,0.2);}
.hub1tengoku2-screen{/*色反転用レイヤー (画像)*/
                     position:fixed; inset:0;
                     background:url("/medias/notitle/fade2.jpg") center/cover no-repeat; mix-blend-mode:difference;
                     pointer-events:none;
                     opacity:0;
                     z-index:998;}
.hub1tengoku2:has(a:hover,a:active) +.hub1tengoku2-screen{/*ポインタ時とクリック時*/
                                                          opacity:1;
                                                          position:fixed; top:0; left:0;
                                                          width:100vw; height:100vh;}



/*２ 内郭１ ------------------------------------------------------------------------------------------*/



/*３ 身１ ------------------------------------------------------------------------------------------*/

img {max-width:100%;
     height:auto;}
.size94pc{width: 94%;}
.size50pc{width:50%;}
.size32px{width:32px;}
.size1em{width:1em;
         height:1em;
         object-fit:contain;}



/*４ 飾１ ------------------------------------------------------------------------------------------*/

/*ドットから始まる自作コードは class=""で発動 例<p class="marginh">*/

.borderbox1dot{border: 2px dotted #888888;
               padding: 5px;
               border-radius: 4px;}
.borderbox2solid{border: 2px solid #e74c3c;
                 padding: 5px;
                 border-radius: 4px;}/*radius角丸で疑似線(錯覚)を防止*/

a:link{text-decoration:underline;
       color:#003366;}
a:visited{text-decoration:underline;
          color:#555555;}
a:hover{text-decoration:underline;
        color:#003366;}

.linkh{/*タイトル風リンク*/
       font-size:18px; /*タイトル感*/ }

.center{margin-left:auto;
        margin-right:auto;} /*ただのセンタリング 郭用*/

.fonth{text-align:center;
       font-weight:bold;
       display:block;} /*強引センタリング&ボールド ※郭以外用の強引コード 普段はh3などを優先*/

.color1{color:blue;} /*全用 身のみが青になる*/
.color2{color:red;} /*全用 身のみが赤になる*/

.bgcolor1{background-color:#e5f0d7;}
.bgcolor2{background-color:#ffc0a5;}

.marginh{margin-top:3em;} /*マージン大 郭用 h無し用*/
.marginm{margin:0.8em 0em 0.8em;} /*マージン小 タップしやすい 目次用*/

.bold{font-weight:bold;}

.underline{text-decoration:underline;}

.del{text-decoration-line:line-through;
     text-decoration-style:solid;
     text-decoration-color:black;}



/*１０ 事前tips ------------------------------------------------------------------------------------------*/

/*
「ブロック要素 インブロック要素 インライン要素 」
…紛らわしい 分かりづらい

「大箱-外 大箱-内 小箱」「大外 大内 小」
「外郭 内郭 身(or素)」
「基エリア 区エリア 局」
「アウター インナー 身」
…どれがいい？ 単なる3段階制ではなく多次元なのが厄介

ひとまず「外郭 内郭 身」とする

外郭 <h1>~<h6> <p> <div> <table> <ul> <li> など

内郭 <button> など

身の郭化体 <img/> <audio/> <video/> <input> < iframe> など 内郭の1段小

身(=contents) 文章 ol番号 li記号 など

飾 <span> <a> <strong> <border> <br/> など 後付け指示のようなもの
*/