@charset "utf-8";
/*
Theme Name: WPT_MONO
Theme URI: 
Description: 
Author: 440.373
Version: 1.1
Tags: 
*/


/* ----------------------------------------------------------------------------------------- RESET */

    html,body                 { height                  : 100%;
                                background              : #f1f1f1;
    }

    body,div,h1,h2,h3,h4,h5,h6,
    p,blockquote,pre,address,
    figure,
    ul,ol,li,dl,dd,dt,
    table,th,td,
    form,fieldset,legend      { margin                  : 0;
                                padding                 : 0;
                                word-wrap               : break-word;
				                word-break      		: break-all;
    }

    ul                        { list-style-type         : none;
    }

    table                     { border-collapse         : collapse;
    }

    img                       { border                  : 0px #fff none;
    }

    hr                        { display                 : none;
    }

    a:link,
    a:visited                 { color                   : #000000;
                                text-decoration         : none;
    }
    a:hover,
    a:active                  { color                   : #666666;
                                text-decoration         : underline;
    }

    /* Webフォントを定義（フォントの呼称、フォントのフォーマットとこのCSSから見たパス */
    @font-face                { font-family             : "futura"; 
                                src                     : url("futuraBook_.TTF") format("truetype");
    }

    .sawarabi-gothic-regular  { font-family             : "Sawarabi Gothic", sans-serif;
   				                font-weight     		: 400;
				                font-style      		: normal;
			                  }

    /* 基準フォント設定(10px)  paltは自動カーニング */
    body                      { color                   : #222;
                                font-size               : 12px;
                                font-weight             : 400;
                                font-style              : normal;
                                line-height             : 1;
                                font-family             : "futura", "Noto Color Emoji","Zen Kaku Gothic New","Noto Sans JP", sans-serif;
                                font-feature-settings   : "palt";
                                font-optical-sizing     : auto;
    }
    /* サイトのデフォルトフォント指定(12px) */
    h1,h2,h3,h4,h5,h6,
    p,blockquote,pre,address,
    table,
    ul,ol,dl,label,
    input,textarea,select     { font-size               : 1.2em;
                                line-height             : 1.2;
    }
    /* float解除関連 */
    /* [A]ボックスの最後でクリアする（floatしてる要素の親ボックスに指定） */
    .clfx:after               { content                 : ".";
                                display                 : block;
                                clear                   : both;
                                height                  : 0;
                                visibility              : hidden;
    }
    .clfx                     { display                 : inline-block;
    }
    /* [B]単体で使うクラス */
    .clboth                   { clear                   : both;
    }
    .hidari                   { float                   : left;
    }
    .migi                     { float                   : right;
    }

/* ---------------------------------------------------------------------------------- パララックス */

	body                      { width                   : 100%;
                                height                  : 100%;
                                background              : #fff;
                                color                   : #1a1a1a;
    }	
	.block                    { width                   : 100%;
                                height                  : 100vh;
                                display                 : flex;
                                align-items             : center;
                                justify-content         : center;
                                position                : -webkit-sticky;
                                position                : sticky;
                                top                     : 0;
                                /* Android端末で右に余白ができるのを避ける */
                                overflow                : hidden;
    }
	.item                     { text-align              : left;
    }

	.parabg                   { background-size         : cover;
                    	    	background-position     : center;
                    		    background-repeat       : no-repeat;
                    		    color                   : #fff;
                                z-index                 : 100;
    }
    .paracont                 { background              : #fff;
                                z-index                 : 200;
                                height                  : 50vh;
    }

/* -------------------------------------------------------------------------------------- ヘッダー */
    /* ※下スクロールで消えて上スクロールで表示 */

    #header-wrap              { background-color        : rgba(0,0,0,0.4);
                                border-bottom           : 1px solid #333;
                                height                  : 45px;
                                position                : fixed;
                                z-index                 : 9997;
                                top                     : 0;
                                left                    : 0;
                                width                   : 100%;
                                transition              : .3s;
    }
    .sitename img             { height                  : 18px;
                                position                : absolute;
                                top                     : 14px;
                                left                    : 24px;
    }

/* ------------------------------------------------------------------------ パララックス・ブロック */

    .block-cover              { background-image        : url('img/bg00.jpg');
    }

    .block-intro              { background-color        : rgba(255, 255, 255, 0.90);
                                height                  : 40vh;
    }

    /* 調整用 */
    .block-space              { height                  : 60vh;
    }

    /* カルーセル */
    .block-list               { height                  : 32vh;
                                background              : #f2f2f2;
    }

    /* 記事 */
    .block-kiji               { height                  : auto;
                                min-height              : 1px;
    }


    .block-pickup             { height                  : 40vh;
                                background-image        : url('img/bg02.jpg');
    }

    .block-pick               { height                  : 40vh;
    }

    .block-favo               { height                  : 10vh;
                                background              : #000;
                                color                   : #fff;
                                text-align              : center;
    }

    .block-youtube            { height                  : 45vh;
                                background              : #000;
                                color                   : #fff;
    }

    .block-last               { background-image        : url('img/bg00.jpg');
                                z-index                 : 300;
                              }

/* ---------------------------------------------------------------------- 画面全体に画像を表示 IMG */
    .block-cover img,
    .block-last img           { width           		: 50vw;
                                min-width               : clamp(360px, 50vw, 560px) !important;
    }

/* ----------------------------------------------------------------------------- block-introの設定 */

    .block-intro .item        { width           		: 50vw;
                                min-width               : clamp(360px, 50vw, 560px) ;
    }

    .block-intro p            { line-height             : 1.8;
                                margin-bottom           : 20px;
    }

    .block-intro .cloud       { padding                 : 0 10px 20px;
                                text-align              : center;
                                line-height             : 0.9em;
    }

    .block-intro.cloud a      { display                 : inline-block;
                                vertical-align          : middle;
                                font-size               : 0.8em;
                                line-height             : 0.9em;
                                color                   : #333;
    }

/* ------------------------------------------------------------------------------ block-listの設定 */

    .block-list .item         { width           		: 50vw;
                                min-width               : clamp(420px, 80vw, 820px) ;
    }
    .carousel-container h2    { padding                 : 10px 20px;
                                font-size               : 1.6em;

    }

    /*  カルーセル外側の枠：幅をいっぱいにする・はみ出しを隠す */
    .carousel-container       { width                   : 100%;
                                overflow                : hidden;
                                position                : relative;
    }

    /* スクロール部分 横に並べる、はみ出したらスクロール可能にする、改行を防ぐ、アイテム間の隙間 */
    ul.mono-carousel          { display                 : flex;
                                overflow-x              : auto;
                                white-space             : nowrap;
                                padding                 : 20px;
                                margin                  : 0;
                                gap                     : 20px; 
                                /* スクロールを滑らかにする（スマホ・Mac用） */
                                -webkit-overflow-scrolling: touch;
    }

    /* スクロールバーを見せない場合 */
    ul.mono-carousel::-webkit-scrollbar { display       : none;
    }

    /* Firefox */
    ul.mono-carousel          { scrollbar-width         : none;
                              }

    /* 各アイテムの見た目  幅を固定し、勝手に縮まないようにする */
    ul.mono-carousel li       { flex                    : 0 0 auto;
                                width                   : 280px;
                                height                  : 120px;
                                background              : rgba(153, 153, 153, 0.5);
                                white-space             : normal;
                                word-wrap               : break-word;
                                overflow-wrap           : break-word;
    
                                /* 装飾
                                border                  : 1px solid rgba(192, 192, 192, 0.5);
                                border-radius           : 8px;
                                display                 : flex;
                                align-items             : left;
                                justify-content         : center;
                                color                   : #fff; */
    }

    /* 一つ一つのli */
    .eyecth                   { float                   : left;
                                width                   : 80px;
                                height                  : 80px;
                                overflow-x              : clip;
                                overflow-y              : clip;
                                text-align              : center;
                                background-color        : #fff;
    }
    .gazou                    { width                   : 80px;
                                height                  : 80px;
                                object-fit              : cover;
                                object-position         : 50% 50%
    }
    .titoru                   { float                   : left;
                                width                   : 180px;
                                height                  : 70px;
                                padding                 : 10px 10px 0 10px;
                                margin                  : 0;
                                text-align              : left;
                                font-size               : 1.0em;
                                line-height             : 1.2em;
                                font-weight             : 700;
    }
    .hiniti                   { font-size               : 0.9em;
                                font-weight             : 500;
    }
    .entry-tag                { padding-top             : 5px;
                                padding-left            : 5px;
                                font-size               : 0.7em;
                                line-height             : 1.6;
    }

/* 矢印のコンテナ：右端中央に固定 */
.scroll-hint-container {
    position: absolute;
    top: 62%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 600; 
    display: none; /* JSで「is-overflowing」クラスがついた時だけ表示 */
    pointer-events: none; /* 矢印がクリックの邪魔をしないように */
}

/* 矢印本体のスタイル */
.scroll-hint-arrow {
    width: 40px;
    height: 40px;
    line-height: 38px;
    border: 2px solid white;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    color: white;
    background-color: rgba(0, 0, 0, 0.4); /* 背景を少し暗くして視認性を確保 */
    animation: bounceRight 1.5s ease-in-out infinite;
}

/* 横揺れアニメーション */
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* はみ出している時だけコンテナを表示 */
.is-overflowing .scroll-hint-container {
    display: flex;
}


/* ------------------------------------------------------------------------------ block-kijiの設定 */

    .block-kiji .item         { width           		: 50vw;
                                min-width               : clamp(380px, 50vw, 580px) ;
    }


    /* 各要素 */
    .postkiji                 { width           		: 50vw;
                                min-width               : clamp(380px, 50vw, 580px) !important;
                                min-height              : 30vh;
                                padding                 : 40px 0px 10px;
                                margin                  : 0px auto 20px;
                                text-align              : left;
                                background              : rgba(255,255,255,1.0);
                                border-radius           : 10px 10px 10px 10px;
    }

    h2.wp-block-heading       { margin                  : 30px 20px;
                                font-size               : 1.6em;

    }

    .postkiji figure.wp-block-image
                              { display                 : block;
                                width                   : 95%;
                                padding                 : 8px 5px;
                                margin                  : 0 auto 10px;
    }

    .postkiji img             { width                   : 100%;
                                height                  : 100%;
                                object-fit              : cover;
                                margin                  : 20px auto 20px;
                                display                 : block;
    }

    .postkiji h2.kijititle    { display                 : block;
                                width                   : 95%;
                                padding                 : 15px 5px;
                                margin                  : 0 auto 10px;
                                font-size               : 1.8em;
                                line-height             : 1.8em;
                                border-top              : 4px solid #333;
                                border-bottom           : 4px solid #333;
    }

    .postkiji h3              { display                 : block;
                                width                   : 90%;
                                padding                 : 10px 10px;
                                margin                  : 40px auto 20px;
                                font-size               : 1.6em;
                                line-height             : 1.6em;
                                border-top              : 4px solid #333;
                                xxborder-bottom           : 4px #ccc dotted;
    }

    .postkiji p               { display                 : block;
                                width                   : 90%;
                                margin                  : 20px auto 20px;
                                text-align              : left;
                                line-height             : 1.8em;
    }

    .postkiji .postdate       { display                 : block;
                                width	                : 95%;
                                margin                  : 0 auto 20px;
                                text-align              : right;
                                font-size               : 0.9em;
    }

    .edit-link                { padding                 : 2px 10px;
                                background-color        : #212121;
                                border-radius           : 4px 4px 4px 4px;
     }

    .postkiji .kategobox      { display                 : block;
                                width                   : 92%;
                                padding                 : 10px 10px;
                                margin                  : 50px auto 10px;
                                font-size               : 0.9em;
                                border-top              : 5px dotted #ccc;
    }

    .postkiji .tagobox        { display                 : block;
                                width                   : 92%;
                                padding                 : 0px 10px 10px;
                                margin                  : 0px auto 10px;
                                font-size               : 0.9em;
    }

    .postkiji a:link,
    .postkiji a:visited       { color                   : #33cc99;
                                text-decoration         : none;
    }


    .kategobox a:link,
    .kategobox a:visited,
    .tagobox a:link,
    .tagobox a:visited        { color                   : #000;
                                text-decoration         : none;
    }

    .kategobox a:hover,
    .kategobox a:active,
    .tagobox a:hover,
    .tagobox a:active         { color                   : #000;
                                text-decoration         : underline;
    }

    /* twitter埋め込み用 */
    .postkiji iframe          { margin-left             :40px;
    }
    
    /* 他サイト埋め込みリンク */
    .postkiji div.linkcard    { display                 : block;
                                width	                : 90%;
                                height                  : 100px;
                                margin                  : 0 auto 40px;
                                text-align              : left;
                                font-size               : 0.9em;
                                color                   : #000000;
                                text-decoration         : none;
                                background-color        : #fefefe;
                                border                  : 1px solid #cccccc;
                                border-radius           : 4px 4px 4px 4px;
    }

    .postkiji div.lkc-card    { display                 : block;
                                position                : relative;
                                top                     : 0;
                                left                    : 0;
    }

    .postkiji div.lkc-info    { display                 : block;
                                width	                : 230px;
                                position                : absolute;
                                top                     : 0;
                                right                   : 0;
    }

    .postkiji div.lkc-favicon { display                 : block;
                                width                   : 16px;
                                height                  : 16px;
                                float                   : right;
                                margin-right            : 4px;
                                margin-top              : -16px;
    }

    .postkiji div.lkc-domain  { display                 : block;
                                float                   : right;
                                margin-right            : 22px;
                                margin-top              : 6px;
                                overflow-x              : hidden;
    }

    .postkiji div.lkc-content { display                 : block;
                                position                : relative;
    }

    .postkiji figure.lkc-thumbnail img
                              { display                 : block;
                                width                   : 100px;
                                height                  : 100px;
                                position                : absolute;
                                top                     : -20px;
                                left                    : 0;
                                margin-left             : 0;
                                overflow-x              : hidden;
                                overflow-y              : hidden;
                                border-radius           : 4px 0 0 4px;
    }

    .postkiji div.lkc-title,
    .postkiji div.lkc-url,
    .postkiji div.lkc-excerpt { display                 : block;
                                position                : absolute;
                                left                    : 120px;
                                text-align              : left;
    }

    .postkiji div.lkc-title   { top                     : 24px;
                                padding-right           : 10px;
                                font-size               : 1.2em;
                                font-weight             : 700;
                                color                   : #000000;
                                text-decoration         : none;
    }

    .postkiji div.lkc-url     { top                     : 50px;
                                font-size               : 0.8em;
                                color                   : #000066;
                                text-decoration         : none;
                                overflow-x              : hidden;
    }

    .postkiji div.lkc-excerpt { top                     : 62px;
                                height                  : 28px;
                                font-size               : 0.9em;
                                line-height             : 1.5;
                                color                   : #000000;
                                text-decoration         : none;
                                padding-right           : 10px;
                                overflow-y              : hidden;
    }

/* --------------------------------------------------------------------------- block-youtubeの設定 */

    .youtube                  { position                : relative;
                                width                   : 60vw;
                                min-width               : clamp(380px, 60vw, 640px) ;
                                max-width               : 720px ;
                                /* width: 100%; */
    }
    .youtube:before           { content                 : "";
                                display                 : block;
                                padding-top             : 56.25%;
    }
    .youtube iframe           { position                : absolute;
                                top                     : 0;
                                left                    : 0;
                                width                   : 100%;
                                height                  : 100%;
    }

/* ------------------------------------------------------------------------------------ 下向き矢印 */
    .scroll-arrow-container   { position                : fixed;
                                top                     : 62%;
                                left                    : 0;
                                width                   : 100%;
                                display                 : flex;
                                justify-content         : center;
                                /* block-cover より上に */
                                z-index                 : 600;
    }
    .scroll-arrow             { width                   : 40px;
                                height                  : 40px;
                                line-height             : 40px;
                                border                  : 2px solid white;
                                border-radius           : 50%;
                                text-align              : center;
                                font-size               : 24px;
                                color                   : white;
                                cursor                  : pointer;
                                animation               : bounce 1.5s ease-in-out 3;
    }

    @keyframes bounce         {
                                0%, 100% { transform: translateY(0); }
                                50% { transform: translateY(10px); }
    }

    .scroll-arrow a:link,
    .scroll-arrow a:visited,
    .scroll-arrow a:hover,
    .scroll-arrow a:active    { color                   : #ffffff;
                                text-decoration         : none;
    }

/* ---------------------------------------------------------------------------- トップへ戻るボタン */
    #page_top                 { width                   : 50px;
                                height                  : 50px;
                                position                : fixed;
                                /* right: 10px; 右に寄せたい場合はこれ */
                                left                    : 50%;
                                transform               : translateX(-50%);
                                bottom                  : 10px;
                                background              : #666;
                                opacity                 : 0.6;
                                border-radius           : 50%;
                                z-index                 :900;
    }

    #page_top a               { position                : relative;
                                display                 : block;
                                width                   : 50px;
                                height                  : 50px;
                                text-decoration         : none;
    }

    #page_top a::before       { font-family             : 'Font Awesome 5 Free';
                                font-weight             : 900;
                                content                 : '\f106';
                                font-size               : 25px;
                                color                   : #fff;
                                position                : absolute;
                                width                   : 25px;
                                height                  : 25px;
                                top                     : -5px;
                                bottom                  : 0;
                                right                   : 0;
                                left                    : 0;
                                margin                  : auto;
                                text-align              : center;
    }

/* ハンバーガーアイコン（左） -------------------------------------------------------------------- */

    .hmbrg                    { position                : fixed;
                                z-index        	        : 500;
                                bottom         	        : 0;
                                left           	        : 0;
                                width          	        : 50px;
                                height         	        : 50px;
                                display        	        : flex;
                                justify-content	        : center;
                                align-items    	        : center;
                                background     	        : #eeeeee;
                                cursor         	        : pointer;
                                transition     	        : all 0.5s;
                                opacity                 : 0.6;
    }

    .hmbrg .MenuBtn-BarFrame  { position                : absolute;
                                display                 : block;
                                width                   : 26px;
                                height                  : 4px;
                                transition              : all .60s ease-in;
    }

    .hmbrg_line               { position                : absolute;
                                display                 : block;
                                border-radius           : 9999px;
                                background-color        : #000000;
                                transition              : all .15s linear;
    }

    .hmbrg_line1              { width                   : 100%;
                                height                  : 100%;
    }
    .hmbrg_line2              { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center left;
                                transform               : translateY(-9px) rotate(0deg);
    }
    .hmbrg_line3              { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center left;
                                transform               : translateY(9px) rotate(0deg);
                              }
    /* ハンバーガーがクリックされた時の動き */
    .open .fstnav             { left                    : 0;
                                width                   : 280px;
    }
    .open .hmbrg_line2        { width                   : 16px;
                                transform               : translateY(1.414px) rotate(-45deg);
    }
    .open .hmbrg_line3        { width                   : 16px;
                                transform               : translateY(-1.414px) rotate(45deg);
                              }

/* ハンバーガーアイコン2（右）-------------------------------------------------------------------- */

    .hmbrg2                   { position                : fixed;
                                z-index                 : 9999;
                                bottom         	        : 0;
                                right         	        : 0;
                                width                   : 50px;
                                height                  : 50px;
                                display                 : flex;
                                justify-content         : center;
                                align-items             : center;
                                background              : #33cc99;
                                cursor                  : pointer;
                                transition              : all 0.5s;
    }

    .hmbrg2 .MenuBtn-BarFrame2{ position                : absolute;
                                display                 : block;
                                width                   : 26px;
                                height                  : 4px;
                                transition              : all .60s ease-in;
    }

    .hmbrg_line-2             { position                : absolute;
                                display                 : block;
                                border-radius           : 9999px;
                                background-color        : #eee;
                                transition              : all .15s linear;
    }

    .hmbrg_line2-1            { width                   : 100%;
                                height                  : 100%;
    }
    .hmbrg_line2-2            { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center right;
                                transform               : translateY(-9px) rotate(0deg);
    }
    .hmbrg_line2-3            { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center right;
                                transform               : translateY(9px) rotate(0deg);
    }

    /* ハンバーガー2がクリックされた時の動き */
    .open2 .scndnav           { right                   : 0;
                                width                   : 320px;
                                /* 開いたら影を出す：距離を短く、ぼかしを大きく、色は薄く */
                                box-shadow              : -3px 0px 15px rgba(0, 0, 0, 0.1);
    }
    .open2 .hmbrg_line2-2     { width                   : 16px;
                                transform-origin        : right center;
                                transform               : translate(9px, 1.414px) rotate(45deg);
    }
    .open2 .hmbrg_line2-3     { width                   : 16px;
                                transform-origin        : right center;
                                transform               : translate(9px, -1.414px) rotate(-45deg);
    }

/* 1階層目ナビ  ---------------------------------------------------------------------------------- */
    .nav-wrapper              { position                : relative;
                                overflow-y              : hidden;
    }

    /* 1階層目メニュー部分 */
    .fstnav                   { position                : fixed;
                                z-index                 : 400;
                                top                     : 0;
                                left                    : -280px;
                                width                   : 280px;
                                height                  : 100vh;
                                padding-top             : 50px;
                                overflow-x              : hidden;
                                overflow-y              : auto;
                                background-color        : #313640;
                                /* box-shadow              : 5px 0px 8px #b2b2b2; */
                                transition              : all 0.5s;
                                opacity                 : 0.8;
                                color                   : #ffffff;
                                /* 追加：スクロールの連鎖を止める */
                                overscroll-behavior     : contain;
    }
    /* スクロールバー */
    .fstnav::-webkit-scrollbar{ background              : #333;
                                width                   : 5px;
    }
    .fstnav::-webkit-scrollbar-thumb
                              { background-color        : #666;
                                border-radius           : 20px;
    }
    .fstnav::-webkit-scrollbar-thumb:hover
                              { background-color        : green;
    }
    /* 各要素 */
    .fstnav h2                { width                   : 260px;
                                padding                 : 15px 10px; 
                                margin                  : 0;
                                text-align              : left;
                                color                   : #fff; 
                                border-top              : 1px solid #3d4965; 
    }

    .fstnav form              { margin                  : 0 10px 20px;
                                color                   : #fff;                                
    }

    .fstnav form.addentry     { padding-top             : 20px;
    }

    .fstnav form .s           { width                   : 180px;
    }

    .cloud                    { padding                 : 0 10px 20px;
                                text-align              : center;
                                line-height             : 0.9em;
    }
    .cloud a                  { display                 : inline-block;
                                vertical-align          : middle;
                                font-size               : 0.8em;
                                line-height             : 0.9em;
                                color                   : #d6d7d9;
    }

    .fstnav ul                { width                   : 280px;
    }
    .fstnav ul li             { width                   : 250px;
                                padding                 : 5px 15px;
                                text-align              : left;
                                line-height             : 1.6em;
    }
    .fstnav ul li a           { display                 : block;
                                position                : relative;
                                color                   : #d6d7d9;
    }

/* 2階層目ナビ  --------------------------------------------------------------------------- */
    .nav-wrapper2             { position                : relative;
                                overflow-y              : hidden;
    }

    /* 2階層目メニュー部分 */
    .scndnav                  { position                : fixed;    
                                top                     : 0;        
                                right                   : -320px;        
                                width                   : 320px;    
                                height                  : 100vh;    
                                background-color        : #333;     
                                z-index                 : 9998;
                                overflow-x              : hidden;
                                overflow-y              : auto;
                                /* background-color        : #f4f5f6; */
                                background-color        : rgba(244, 245, 246, 0.9);
                                transition              : all 0.5s;
                                /* 追加：スクロールの連鎖を止める */
                                overscroll-behavior     : contain;
                                box-shadow              : none;
    }

    /* スクロールバー */
    .scndnav::-webkit-scrollbar{ background-color        : rgba(244, 245, 246, 0.9);
                                 width                   : 5px;
    }
    .scndnav::-webkit-scrollbar-thumb
                              { background-color        : #666;
                                border-radius           : 20px;
    }
    .scndnav::-webkit-scrollbar-thumb:hover
                              { background-color        : green;
    }

    .scndnav h2               { position                : fixed;
                                top                     : 0;
                                z-index                 ; 500;
                                width                   : 320px;
                                height                  : 35px;
                                padding                 : 30px 0 0;
                                margin                  : 0;
                                text-align              : center;
                                color                   : #807f83;
                                background-color        : #f4f5f6;
                                border-bottom           : 1px solid #e5e5e5;
                              }

    .scndnav ul               { width                   : 100%;
                                /* ★上から60px下げる */
                                padding-top             : 70px; 
                                display                 : flex;
                                flex-direction          : column;
                                /* ★liを左右中央に配置 */
                                align-items             : center; 
    }


    .scndnav ul li            { flex                    : 0 0 auto;
                                width                   : 280px;
                                height                  : 120px;
                                xxbackground              : rgba(153, 153, 153, 0.5);
                                white-space             : normal;
                                word-wrap               : break-word;
                                overflow-wrap           : break-word;

                                border-bottom           : 1px solid #666666;
                                margin-bottom           : 10px;
    }