/*必須記述*/
@charset "utf-8";
    /*フォント読み込み*/
    @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
    /*自作フォント読み込み*/
    @font-face {
        font-family: 'ymkw';
        src: url('../ymkw.woff') format('woff');
    }

/*border-boxを全ての要素に適用*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*下まで背景色*/
html {
    width: 100%;
    height: 100%;
}
/*ヘッダー分mainを下げる*/
main {
    margin-top: 65px; /*外側*/
}
/*箇条書きデザイン*/
ul {
    list-style: none;
}
/*余白ゼロ*/
body, ul, p {
    margin: 0; /*外側*/
    padding: 0; /*内側*/
}
/*buttonタグのスタイルをリセット*/
button {
    all: unset; /* 全てのスタイルをリセット */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/*---------------------------------------------------------------------------------------------------------------------*/
/*色コード、アイコンコード指定（変数）;TODO:整理-----------------------------------------------------------------------------------------------------------------------*/
:root {
    --min_width_mobile: 340px;

    --maincolor1: #fddada;
    --maincolor2: #FDF3F3;
    --subcolor1: #FEF2F2;
    --subcolor2: #f8f4f4;
    --fontcolor1: #554540;
    --fontcolor2: #837874;
    --fontcolorlink1: #E49495;
    --fontcolorbold: #bdb0d9;
    --colorwhite: #ffffff;

    --colortransparent1: rgba(131,120,116,0.3);
    --colortransparent2: rgba(255,255,255,0.8);
    --colortransparent3: rgba(228,148,149,0.1);
    --colortransparent4: rgba(253,218,218,0.9);

    --tagbasecolor: #EBB1B2;
    --tagmaincolor1: #EEC4DC;
    --tagmaincolor2: #BDD1E4;
    --tagmaincolor3: #DDC8DD;
    --tagsubcolor0: #f9f5f5;
    --tagsubcolor1: #f9eef1;
    --tagsubcolor2: #EEE2EE;
    --tagsubcolor3: #E6EEF5;
    --tagsubcolor4: #ecebfc;
    --tagsubcolor5: #F3F2FD;
    --tagsubcolor6: #fcecec;
    
    --icon_hakase: "\e80c"; /*博士帽*/
    --icon_hatena: "\e887"; /*丸の中にはてな*/
    --icon_bookmark: "\e866"; /*ブクマ*/
    --icon_illust: "\e666"; /*ページをめくる本*/
    --icon_game: "\f135"; /*ゲーム機*/
    --icon_learn: "\e2dc"; /*虫めがねの中に人*/
    --icon_make: "\f8aa"; /*植木鉢から芽*/
    --icon_anniv: "\ea65"; /*クラッカー*/

    --icon_sns1: "\f52b"; /*お知らせSNS*/
    --icon_sns2: "\e618"; /*絵だけのSNS*/
    --icon_sns3: "\f555"; /*壁打ちSNS*/
    --icon_ematome: "\e060"; /*絵まとめ*/
    --icon_e1: "\e413"; /*絵１枚*/
    --icon_manga: "\f5e3"; /*漫画*/
    --icon_blog1: "\ea19"; /*お知らせブログ*/
    --icon_blog2: "\ea3e"; /*日記ブログ*/
    --icon_movie: "\e02c"; /*動画*/
    --icon_shop1: "\ea12"; /*おもち直売所*/
    --icon_shop2: "\e8d1"; /*LINESTORE*/
    --icon_commission: "\e3ae"; /*Skeb（筆）*/
    --icon_notion: "\f527"; /*notion*/
    --icon_love: "\ea70"; /*メッセージなど*/
    --icon_stop: "\ef44"; /*更新停止中*/

    --icon_human: "\e92c"; /*人間*/
    --icon_hatena2: "\eb8b"; /*（もち族以外の）その他*/
    --icon_boy: "\e87c"; /*男の子キャラ*/
    --icon_girl:"\f8db" ; /*女の子キャラ*/
    --icon_yami: "\e3f3"; /*ヤンデレ*/
}
    /*アイコン指定-----------------------------------------------------------------------------------------------------------------------*/
    .btn_puni1::before {content: var(--icon_hakase);}
        .teigi::before {content: var(--icon_hatena);}
        .aboutlink_title::before {content: var(--icon_bookmark);}
        .mochi_title1::before {content: var(--icon_illust);}
        .mochi_title2::before {content: var(--icon_game);}
        .mochi_title3::before {content: var(--icon_learn);}
        .mochi_title4::before {content: var(--icon_make);}

        .link_icon_sns1::before {content: var(--icon_sns1);}
        .link_icon_sns2::before {content: var(--icon_sns2);}
        .link_icon_sns3::before {content: var(--icon_sns3);}
        .link_icon_ematome::before {content: var(--icon_ematome);}
        .link_icon_e1::before {content: var(--icon_e1);}
        .link_icon_manga::before {content: var(--icon_manga);}
        .link_icon_blog1::before {content: var(--icon_blog1);}
        .link_icon_blog2::before {content: var(--icon_blog2);}
        .link_icon_game::before {content: var(--icon_game);}
        .link_icon_movie::before {content: var(--icon_movie);}
        .link_icon_shop1::before {content: var(--icon_shop1);}
        .link_icon_shop2::before {content: var(--icon_shop2);}
        .link_icon_commission::before {content: var(--icon_commission);}
        .link_icon_notion::before {content: var(--icon_notion);}
        .link_icon_love::before {content: var(--icon_love);}
        .link_icon_mochi::before {content: var(--icon_make);}
        .link_icon_stop::before {content: var(--icon_stop);}

        .icon_mokuji::before {content: var(--icon_hakase)}

        .icon_anniv::before {content: var(--icon_anniv)}
        
        .chara_icon_1human::before{content: var(--icon_human);}
        .chara_icon_1mochi::before{content: var(--icon_make);}
        .chara_icon_1nazo::before{content: var(--icon_hatena2);}
        .chara_icon_2boy::before {content: var(--icon_boy);}
        .chara_icon_2girl::before {content: var(--icon_girl);}
        .chara_icon_3yami::before {content: var(--icon_yami);}
        .chara_icon_4game::before {content: var(--icon_game);}

/*全体-----------------------------------------------------------------------------------------------------------------------*/
body {
    font-family: 'Zen Kaku Gothic New', sans-serif; /*フォント*/
    color: var(--fontcolor1); /*文字色*/
    line-height: 1.7; /*行間*/
    text-align:center; /*左右中央寄せ*/
    font-size: 15px;
}
    /*ymkwフォント適用場所*/
    .font_ymkw {
        font-family: 'ymkw', sans-serif;
        font-size: 1.3em;
        line-height: 1.7;
        font-weight: normal;
    }
    /*スマホでは文字サイズ小さく*/
    @media screen and (max-width: 650px) {
        body {
            font-size: 13px;
        }
    }

/*リンクテキスト*/
a {
    color: var(--fontcolorlink1); /*文字色*/
    text-decoration: none /*下線を消す*/
}
    a:hover {
        color: var(--fontcolorbold);
    }

/*見出し*/
h1, h2 {
    font-size: 1.5em;
    display: block;
    width: 100%;
}
    h3 {
        font-size: 1.1em;
        display: block;
    }

/*ヘッダー-----------------------------------------------------------------------------------*/
.header {
    background-color: var(--colortransparent4);
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    right: 0;
    height: 65px;
    text-align: left;
}
    /*ヘッダーのロゴ*/
    .header_rogo {
        margin-top: 10px;
        margin-left: 15px;
        height: 80%;
    }
        /*スマホでは小さく*/
        @media screen and (max-width: 650px) {
            .header_rogo {
                margin: 10px 5px;
                padding: auto 0;
                height: 40%;
            }
        }

    /*ページトップに戻るボタン*/
    .page_top_btn {
        background-color: transparent;
        color: var(--fontcolorlink1);
        font-size: 10px;
        position: fixed;
        top: 5px;
        right: calc(50% - 30px);
        width: 60px;
        height: 60px;
        /* 上向きの三角と、TOPの文字の位置を揃える */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /*アニメーション*/
        transition: .3s;
    }
        .page_top_btn:hover {
            color: var(--colorwhite);
        }
        .page_top_btn::before {
            content: "";
            display: block;
            /* 三角のサイズ */
            width: 10px;
            height: 10px;
            /* 三角の線と回転角度 */
            border-top: 2px solid var(--fontcolorlink1);
            border-right: 2px solid var(--fontcolorlink1);
            transform: rotate(-45deg);
            /*アニメーション*/
            transition: .3s;
        }
        .page_top_btn:hover::before {
            border-top: 2px solid var(--colorwhite);
            border-right: 2px solid var(--colorwhite);
        } 

    /*========= ナビゲーションのためのCSS===============*/
        #g-nav{
            /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
            position:fixed;
            z-index: 999;
            /*ナビのスタート位置と形状*/
            top:0;
            right: -120%;
            width:30%;
            height: 100vh;/*ナビの高さ*/
            background:var(--fontcolorlink1);
            /*動き*/
            transition: all 0.6s;
        }
        /*アクティブクラスがついたら位置を0に*/
        #g-nav.panelactive{
            right: 0;
        }
        /*背景暗く*/
        .nav-bg-cover {
            visibility:hidden; /*非表示にしておく*/
            background: transparent;
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            z-index: 997;
            /*動き*/
            transition: all 0.4s;
        }
        .nav-bg-cover.panelactive {
            visibility:visible; /*表示*/
            background: rgba(0,0,0,0.4);
        }
        /*ナビゲーションの縦スクロール*/
        #g-nav.panelactive #g-nav-list{
            /*ナビの数が増えた場合縦スクロール*/
            position: fixed;
            z-index: 999; 
            width: 30%;
            height: 100vh;/*表示する高さ*/
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        /*ナビゲーション*/
        #g-nav ul {
            /*ナビゲーション天地中央揃え*/
            position: absolute;
            z-index: 999;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        /*リストのレイアウト設定*/
        #g-nav li{
            list-style: none;
            text-align: left;
        }
        #g-nav li a{
            color: var(--colorwhite);
            padding:8px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom:10px;
            /*線の基点とするためrelativeを指定*/
            position: relative;
        }
        #g-nav li a::after {
            content: '';
            /*絶対配置で線の位置を決める*/
            position: absolute;
            bottom: 0;
            left: 5%;
            /*線の形状*/
            width: 90%;
            height: 3px;
            background:var(--colorwhite);
            /*アニメーションの指定*/
            transition: all .3s;
            transform: scale(0, 1);/*X方向0、Y方向1*/
            transform-origin: left top;/*左上基点*/
        }
        /*現在地とhoverの設定*/
        #g-nav li a:hover::after {
            transform: scale(1, 1);/*X方向にスケール拡大*/
        }
        /*========= ボタンのためのCSS ===============*/
        .openbtn{
            position:fixed;
            z-index: 9999;/*ボタンを最前面に*/
            top:10px;
            right: 10px;
            cursor: pointer;
            width: 50px;
            height:50px;
        }
        /*×に変化*/	
        .openbtn span{
            display: inline-block;
            transition: all .4s;
            position: absolute;
            left: 14px;
            height: 3px;
            border-radius: 2px;
            background-color: var(--fontcolor2);
            width: 45%;
        }
        .openbtn span:nth-of-type(1) {
            top:15px;	
        }
        .openbtn span:nth-of-type(2) {
            top:23px;
        }
        .openbtn span:nth-of-type(3) {
            top:31px;
        }
        .openbtn.active span:nth-of-type(1) {
            top: 18px;
            left: 18px;
            transform: translateY(6px) rotate(-45deg);
            width: 30%;
        }
        .openbtn.active span:nth-of-type(2) {
            opacity: 0;
        }
        .openbtn.active span:nth-of-type(3){
            top: 30px;
            left: 18px;
            transform: translateY(-6px) rotate(45deg);
            width: 30%;
        }
            /*スマホでのデザイン*/
            @media screen and (max-width: 650px) {
                #g-nav {
                    width:85%;
                }
                #g-nav.panelactive #g-nav-list {
                    width: 100%;
                }
                #g-nav ul {
                    top: 40%;
                    left: 35%;
                }
                #g-nav li a{
                    padding:7px;
                    letter-spacing: 0.1em;
                    font-size: 1.3em;
                    margin-bottom:7px;
                }
            }

/*共通の基本的な装飾や配置----------------------------------------------------------------------------------------------------*/

/*装飾用ドット下線*/
.dotline {
    border-bottom: dotted 2px var(--fontcolorlink1);
    padding: 1em 0; /*内側*/
}

/*薄い色の枠*/
.kakomi1 {
    background-color: var(--subcolor2);
    border-radius:10px; /*角丸く*/
    padding: 2em 2.5em;
}
    /*スマホでの余白*/
    @media screen and (max-width: 650px) {
        .kakomi1 {
            padding: 2em 1.5em;
        }
    }
    /*薄い色の枠のタイトル*/
    .kakomi_title {
        margin: 0;
        padding: 0;
    }

/*文字の前にアイコン*/
.icon_before::before {
    font-family: "Material Symbols Rounded";
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
    font-size: 1.5em;
    display: inline-block;
    vertical-align: middle;/*縦の表示位置*/
    padding-right: 0.3em;
    padding-bottom: 0.15em;
}

/*背景、見出しの背景*/
.bg_pink {
    background-color: var(--subcolor1);
}

/*文字サイズ小さめ*/
.komoji {
    font-size: 90%;
}
/*太字*/
.bold {
    font-weight: bold;
}
/*左寄せ*/
.left {
    text-align: left;
}
/*スマホのときだけ左寄せ*/
@media screen and (max-width: 650px) {
    .mobile_left {
        text-align: left;
    }
}
/*スマホのときだけ左右余白*/
@media screen and (max-width: 650px) {
    .mobile_pad {
        padding: 0 1em; /*内側*/
    }
}

/*横並び中央寄せにしたいとき用*/
.flex_center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*横並び左寄せにしたいとき用*/
.flex_left {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

/*３分割*/
.list3bun {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 350px);
    justify-content: center;
    grid-gap: 1em; /* 要素間の余白を設定*/
    margin: 40px auto;
}
    .list3bun_1 {
        display: inline-block;
        min-width: 350px;
        width: calc(33.333%);
        text-align:left; /*左寄せ*/
        background-color: var(--colorwhite);
        padding: 1em 0.5em; /*内側の余白*/
    }

/*余白-----------------------------------------------------------------------------------------------------------------------*/

/*コンテンツ最大幅*/
.max_width {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto; /*外側の余白*/
}
    
    /*縦の余白*/
    .pad_height {
        padding: 40px 0; /*内側の余白*/
    }
        /*一番下のコンテンツの余白は少し少なく*/
        .pad_height:last-child {
            margin-bottom: 20px; /*外側*/
        }
    .marbottom_height {
        margin-bottom: 30px; /*外側*/
    }

    /*主にメインページ以外の最初の説明の位置調整用*/
    .pad_top {
        padding-top: 30px; /*内側の余白*/
    }

    /*横の余白*/
    .mar_width {
        margin: 0 1em; /*外側の余白*/
    }

    /*縦横の余白*/
    .marpad_waku {
        padding: 1.5em; /*内側の余白*/
        margin: 15px auto; /*外側の余白*/
        width: 93%;
        max-width: 850px;
    }
        /*スマホでの余白*/
        @media screen and (max-width: 650px) {
            .max_width {
                width: 95%;
            }
            .mar_width {
                margin: 0 0.3em; /*外側の余白*/
            }
            .marpad_waku {
                padding: 0.5em; /*内側の余白*/
                width: 97%;
            }
        }

/*ボタン関連-----------------------------------------------------------------------------------------------------------------------*/

/*ぷにってするボタン*/
.btn_puni {
    display: inline-block;
    border:2px solid var(--fontcolorlink1);
    color: var(--fontcolorlink1);
    background-color: var(--colorwhite);
    border-radius:100px; /*角丸く*/
    margin: 1em auto; /*外側の余白*/
    padding: 0.7em 2em;/*文字周りの余白*/
    text-align:center; /*左右中央寄せ*/
    transition: .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
        .btn_puni:hover{
            padding: 0.7em 4em;/*文字周りの余白*/
            background-color: var(--fontcolorlink1);
            box-shadow: 0px 5px 5px var(--colortransparent1);
            color: var(--colorwhite);
            transition:.3s;
        }
        .btn_puni:active{
            box-shadow: 0px 2px 5px var(--colortransparent1);
            transition: .05s
        }
        /*スマホでは小さく*/
        @media screen and (max-width: 650px) {
            .btn_puni {
                margin: 1em auto; /*外側の余白*/
                padding: 0.6em 1em;/*文字周りの余白*/
            }
                .btn_puni:hover{
                    padding: 0.6em 2em;/*文字周りの余白*/
                }
        }

/*２分割、３分割ボタン*/
.btn2bun , .btn3bun, .btn2bun_m, .btn3bun_m {
    position: relative; /*矢印の基点とするためrelativeを指定*/
    display: inline-block;
    border:2px solid var(--fontcolor2);
    color: var(--fontcolor2);
    border-radius:10px; /*角丸く*/
    margin: 1em; /*外側の余白*/
    padding: 0.5em 0;
    text-align:center; /*左右中央寄せ*/
}
    .btn2bun:hover, .btn3bun:hover, .btn2bun_m:hover, .btn3bun_m:hover {
        background-color: var(--fontcolor2);
        color: var(--colorwhite);
        transition:.3s;
    }
    /* 矢印が右に移動 */
    .btn2bun::after, .btn3bun::after, .btn2bun_m::after, .btn3bun_m::after{
        content: '';
        position: absolute; /*絶対配置で矢印の位置を決める*/
        top:42%;
        right: 15px;
        /*矢印の形状*/
        width: 7px;
        height: 7px;
        border-top: 2px solid var(--fontcolor2);
        border-right: 2px solid var(--fontcolor2);
        transform: rotate(45deg);
        transition: all .3s; /*アニメーションの指定*/
    }
        /*hoverした際*/
        .btn2bun:hover::after, .btn3bun:hover::after, .btn2bun_m:hover::after, .btn3bun_m:hover::after{
            right: 10px;
            border-top: 2px solid var(--colorwhite);
            border-right: 2px solid var(--colorwhite);
        }
.btn2bun, .btn2bun_m {
    width: 300px;
}
.btn3bun, .btn3bun_m {
    width: 170px;
}

/*２分割、３分割ボタン（反転）*/
    /* 矢印が左に移動 */
    .btn2bun_m::after, .btn3bun_m::after{
        left: 15px;
        transform: rotate(-135deg);
    }
        /*hoverした際*/
        .btn2bun_m:hover::after, .btn3bun_m:hover::after{
            left: 10px;
        }

/*上のボタンのピンクバージョン*/
.game_btn {
    border:2px solid var(--fontcolorlink1);
    color: var(--fontcolorlink1);
    background-color: var(--colorwhite);
}
    .game_btn:hover {
        background-color: var(--fontcolorlink1);
    }
    .game_btn::after {
        border-top: 2px solid var(--fontcolorlink1);
        border-right: 2px solid var(--fontcolorlink1);
    }

/*サークルロゴ*/
    .rogo {
        margin-top: 20px; /*外側の余白*/
        width: 30%;
        min-width: 200px;
    }
    /*スマホでのデザイン*/
    @media screen and (max-width: 650px) {
        .rogo {
            margin-top: 10px; /*外側の余白*/
            width: 70%;
            min-width: 270px;
        }
    }

/*更新履歴----------------------------------------------------------------------------------------------------------------*/

/*箇条書きの・*/
.rireki_item li {
    list-style: disc inside;
}

/*履歴の大枠*/
.rireki_item {
    background-color: var(--colortransparent2);
    border-radius:15px; /*角丸く*/
    width: 55%;
    margin: 30px auto; /*外側の余白*/
    padding: 10px; /*内側の余白*/
    height: 10em;
    overflow: auto; /*スクロールできるようにする*/
}

    /*履歴１列*/
    .rireki_1 {
        display: flex;
        padding: 0.55em 2em;
    }
    .rireki_1:not(:first-child){
        border-top: 1px solid var(--maincolor1);
      }

    .rireki_date {
        display: flex;
        width: 110px;
        padding-top: 3px;
        padding-left: 10px;
        color: var(--fontcolor2);
      }
     .rireki_text {
        width: calc(100% - 100px);
        padding-left: 20px;
        padding-top: 3px;
        line-height: 1.5;
        text-align:left; /*左寄せ*/
      }
        /*スマホでのデザイン*/
        @media screen and (max-width: 1150px) {
            .rireki_item {
                width: 90%;
                padding: 10px 5px; /*内側の余白*/
            }
                .rireki_1 {
                    display: block;
                    padding: 0.55em 1em;
                }
                 .rireki_text {
                    width: 100%;
                  }
        }

/*餅学研究会の楽しみ方、おもち直売所----------------------------------------------------------------------------------------------------*/
    .mochi_inner p, .mochi_inner ul, .shop_inner ul {
        text-align: center;
        color: var(--fontcolor2);
    }
    /*スマホでのデザイン*/
    @media screen and (max-width: 650px) {
        .mochi_inner p, .mochi_inner ul, .shop_inner ul {
            text-align: left;
        }
    }

        .shop_inner_1 {
            display: inline-block;
            color: var(--fontcolor2);
            background-color: var(--subcolor2);
            border-radius:10px; /*角丸く*/
            margin: 30px 1em; /*外側の余白*/
            padding: 2em 0;
            width: 150px;
            height: 140px;
            text-align:center; /*左右中央寄せ*/
        }
            .shop_btn_title {
                font-weight: bold;
                width: 80%;
                border-bottom: dotted 2px var(--fontcolor2);
                margin:  auto;
            }
            .shop_btn_moji {
                margin: 1em auto;
                font-size: 0.8em;
            }
                .shop_inner_1:hover {
                    background-color: var(--colortransparent3);
                    color: var(--fontcolorlink1);
                    letter-spacing: 0.1em;
                    transition:.3s;
                }

/*ゲーム紹介-----------------------------------------------------------------------------------------------------------------------------------*/

    /*ゲームジャンルの定義*/
    .game_setsumei {
        background-color: var(--colorwhite);
        border-radius:15px; /*角丸く*/
    }
        /*定義のタイトル文字*/
        .teigi {
            font-weight: bold; /*太字*/
            border-bottom:2px solid var(--maincolor1); /*枠線*/
        }
        /*ゲームジャンルの定義、中身*/
        .game_setsumei_inner {
            color: var(--fontcolor2);
            width: 85%;
            text-align: left;
            margin: 0 auto; /*外側の余白*/
            margin-top: 1.5em; /*外側の余白*/
        }
            /*ゲームタグの説明のところは要素を横並びに*/
            .gametag_setsumei_flex {
                display: flex;
                flex-wrap: wrap;
                justify-content: left;
            }
            /*説明中に出てくるゲームタグの幅を揃える*/
            .gametag_setsumei {
                width: 8em;
                text-align: center;
            }
            /*説明中ゲームタグの右にスペース空ける*/
            .gametag_setsumei_moji {
                margin-left: 1em; /*外側の余白*/
            }

    /*ゲームページに飛ぶボタン*/
    .game_button {
        text-align:center; /*左右中央寄せ*/
        display: flex;
        align-items: center;
        height: 230px;
        background-color: var(--subcolor2);
        width: 100%;
        margin: 0;
        transition: 0.3s;
    }
        .game_button:hover{
            opacity: 0.7;
        }
        /*ゲームタイトル画像*/
        img.game_shoukai_gazou {
            vertical-align:middle;
            width:auto;
            height:auto;
            max-width: 90%;
            max-height: 90%;
        }

    /*ゲームジャンルタグ群*/
    .gametags_a, .gametags_b, .gametags_c {
        padding: 0.2em 1em; /*内側の余白*/
        text-align: left;
    }

    /*ゲームジャンルタグ*/
    .gametag {
        font-size: 0.9em; /*文字サイズ小さめ*/
        display: inline-block;
        color: var(--colorwhite); /*文字色*/
        background: var(--tagbasecolor); /*背景色*/
        padding: 0.1em 0.6em; /*文字周りの余白*/
        margin: 0.1em; /*外側の余白*/
        border-radius: 0.3em;/*角の丸み*/
    }

        /*大きめのタグ*/
        .gametag_a {
            color: var(--colorwhite); /*文字色*/
        }
            .muryou, .jikkyo_ok {background: var(--tagmaincolor2);}
            .yuuryou, .jikkyo_ng {background: var(--tagmaincolor1);}
            .pc_sumaho {background: var(--tagmaincolor3);}

        /*小さめのタグ*/
        .gametag_b,.gametag_c {
            color: var(--fontcolor2); /*文字色*/
            font-size: 0.75em; /*文字サイズ小さめ*/
        }
            .time {background: var(--tagsubcolor1);}
            .taishou {background: var(--tagsubcolor2);}
            .janru {background: var(--tagsubcolor3);}

            .otome {background: var(--tagsubcolor4);}
            .josei {background: var(--tagsubcolor5);}
            .kouhai {background: var(--tagsubcolor6);}
            .nose {background: var(--maincolor2);}

            .sub {background: var(--tagsubcolor0);}

/*リンクまとめ-----------------------------------------------------------------------------------------------------------------------------*/
.link_inner_1 {
    display: flex;
    align-items: center;
    background-color: var(--subcolor2);
    color: var(--fontcolor2);
    border-radius:10px; /*角丸く*/
    margin: 0.5em auto; /*外側の余白*/
    padding: 10px;
    width: 60%;
    min-width: var(--min_width_mobile);
    height: 80px;
}
    .link_inner_1:hover {
        background-color: var(--colortransparent3);
        color: var(--fontcolorlink1);
        transition:.3s;
    }
    .link_icon {
        height: 60px;
        width: 60px;
        border-radius:10px; /*角丸く*/
        background-color: var(--colorwhite);
        color: var(--colortransparent1);
        font-family: "Material Symbols Rounded";
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
        font-size: 40px;
        line-height: 60px;
    }
    .link_text {
        text-align: left;
        margin-left: 1em;
    }
    .link_btn_title {
        font-weight: bold;
    }
    .link_btn_moji {
        font-size: 0.8em;
    }
.link_3bun {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: var(--subcolor2);
    color: var(--fontcolor2);
    border-radius:10px; /*角丸く*/
    margin: 0.5em; /*外側の余白*/
    padding: 5px 10px;
    width: 120px;
    height: 85px;
}
    .link_3bun:hover {
        background-color: var(--colortransparent3);
        color: var(--fontcolorlink1);
        transition:.3s;
    }
    .link_3bun_text {
        font-size: 90%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
    }
    .link_3bun_text .link_btn_title {
        margin-bottom: 0.5em;
    }
    /*スマホでのデザイン*/
    @media screen and (max-width: 650px) {
        .link_3bun {
            width: 100px;
        }
    }


/*フッター　-----------------------------------------------------------------------------------------------------------------------------*/
footer { 
    text-align: center;
    color: var(--colorwhite); /*文字色*/
    background-color: var(--fontcolor2); /*背景色*/
    font-size: 0.7em; /*文字サイズ*/
    padding: 0.5em 0; /*内側の余白*/
}








/*メインページ以外のデザイン  -----------------------------------------------------------------------------------------------*/
    
    /*全体----------------------------------------------------------------------------------------------------*/
    
    /*ピンクのフキダシ見出し*/
    .midashi_pink {
        position: relative;
        font-size: 1.3em; /*フォントサイズ*/
        padding: 0.5em 1em; /*内側の余白*/
        background-color: var(--subcolor1);
        border-radius: 7px;/*角の丸み*/
        color: var(--fontcolor2); /*文字色*/
    }
        .midashi_pink:after {
            position: absolute;
            content: '';
            top: 100%;
            left: 80px;
            border: 15px solid transparent;
            border-top: 15px solid var(--subcolor1);
            width: 0;
            height: 0;
            }

    /*サイト説明ページ---------------------------------------------------------------------------------------------*/

        /*リンクについての説明*/
            .aboutlink_inner {
                padding: 1em 2em; /*内側の余白*/
                color: var(--fontcolor2);
            }
            .banner_1 {
                text-align: center;
                padding: 2em 2em 1em 2em;
            }
        
        /*管理人アイコン*/
        .yumikawa_icon_pic {
            margin: 2em; /*外側の余白*/
            width: 120px;
            border: 5px solid var(--subcolor2);
            border-radius:50%; /*角丸く*/
        }
        /*管理人紹介*/
        .yumikawa_moji {
            width: 70%;
            color: var(--fontcolor2);
        }
            .yumikawa_name {
                color: var(--fontcolor1);
                font-weight: bold;
            }
            .yumikawa_like_title {
                font-weight: bold;
                padding-top: 1em;
            }
            /*スマホでのデザイン*/
            @media screen and (max-width: 650px) {
                .yumikawa_icon_pic {
                    border: 3px solid var(--subcolor2);
                }
                .yumikawa_moji {
                    width: 80%;
                }
            }
        
        /*餅学研究会の歴史*/
        /*文字色や配置など*/
        .history_1 {
            color: var(--fontcolor2);
            text-align: left;
        }
        /*日付と見出しは横並び、太字に*/
        .history_title {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            font-weight: bold;
        }
        /*スマホでは縦並びに*/
        @media screen and (max-width: 650px) {
            .history_title {
                display: block;
            }
        }
            /*見出しを同じ分右にずらすため、日付の横幅を指定*/
            .history_title_date {
                width: 8em;
            }
            .history_moji {
                font-size: 0.9em;
                margin: 1em;
            }

    /*キャラクター図鑑、ギャラリーページ-----------------------------------------------------------------------------------------------------------------------*/
    
    /*選択されていないものは非表示*/
    .is-hide {
        display: none;
    }

    /*チェックボックスの見出し*/
    .search-box_label {
        color: var(--fontcolor2);
        font-weight: bold;
        margin-bottom: 0.2em; /*外側*/
    }

    /*ラジオボタンを中央寄せ*/
    .radio_waku {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /*チェックボックスのデザイン------------------------------------------------*/
    .check1, .check2, .checkA, .checkB {
        margin: auto;
        width: 90%;
        max-width: 1000px;
        min-width: 350px;
        color: var(--fontcolor2);
    }
        .check1 .checkbox_waku, 
        .check2 .checkbox_waku, 
        .checkA .checkbox_waku, 
        .checkB .checkbox_waku {
            width: 100%;
            text-align: left;
            border: 1px solid var(--colorwhite);
            border-radius: 5px;
            background: var(--colorwhite);
        }
        /*チェックボタンの配置*/
        .checkboxbun {
            display: grid;
            grid-template-columns: repeat(auto-fit, 100px);
            justify-content: center;
            grid-gap: 0.5em; /* 要素間の余白を設定*/
            margin: 0 auto; /*外側*/
            padding: 0.5em; /*内側の余白*/
        }
            .checkboxbun_1 {
                min-width: 100px;
                width: calc(8%);
                text-align:left; /*左寄せ*/
                background-color: var(--colorwhite);
                padding: 1em; /*内側の余白*/
            }
        /*チェックボックスの四角を消す*/
        .check1 input[type="checkbox"], 
        .check2 input[type="checkbox"], 
        .checkA input[type="checkbox"], 
        .checkB input[type="checkbox"] {
            display: none;
        }
        input[type="checkbox"].checkboxbun_1:checked + label {
            background: var(--fontcolorbold);
            color: var(--colorwhite);
        }
            /*キャラクター名のチェックボックスのデザイン*/
            .checkA dd label {
                position: relative;
                line-height:2.5;
                padding: 0 0 5px 27px;
                }
                .checkA dd input:hover:after {
                    border-color: var(--fontcolorbold);
                }
                .checkA dd label:after, .checkA dd label:before{
                    position: absolute;
                    content: ""; 
                    display: block;
                    top: 50%;
                }
                .checkA dd label:after {
                    left: 0;
                    margin-top: -12px;
                    width: 18px;
                    height: 18px;
                    border: 2px solid var(--fontcolorbold);
                }
                .checkA dd label:before {
                    left: 6px;
                    margin-top: -9px;
                    width: 7px;
                    height: 11px;
                    border-right: 3px solid var(--colorwhite);
                    border-bottom: 3px solid var(--colorwhite);
                    transform: rotate(45deg);
                    opacity: 0;
                }
                input[type=checkbox].checkboxbun_2:checked + label::after {
                    background-color: var(--fontcolorbold);
                }
                input[type=checkbox].checkboxbun_2:checked + label:before {
                    opacity: 1;
                    z-index: 1;
                }
        .check1 label:hover, 
        .check2 label:hover, 
        .checkA dt label:hover,
        .checkB label:hover {
            background-color: var(--colortransparent3);
        }
        .check1 label, 
        .check2 label, 
        .checkA dt label,
        .checkB label {
            text-align: center;
            padding: 0.3em 0; /*内側*/
            cursor: pointer;
            color: var(--fontcolorbold);
            border: 2px solid var(--fontcolorbold);
            border-radius: 5px;
        }

        /*ギャラリーのほうのボタン幅など微調整*/
        .checkA .marbottom_height, .checkB .marbottom_height {
            margin-bottom: 15px;
        }
        .checkboxbun-gal {
            font-size: 0.8em;
            display: grid;
            grid-template-columns: repeat(auto-fit, 160px);
            justify-content: center;
            grid-gap: 0.5em; /* 要素間の余白を設定*/
            margin: 0 auto; /*外側*/
            padding: 0.3em 0.5em; /*内側の余白*/
        }
            /*ギャラリー内「シリーズ・キャラクター」のチェックボックスのデザイン*/
            /*各シリーズごとに区切り線*/
            .gal-serieslist {
                border-bottom: dotted 1px var(--fontcolorbold);
                padding-bottom: 0.4em; /*内側の余白*/
                margin: 0.4em 0; /*外側*/
            }
                .gal-serieslist:last-child {
                    border: none;
                    padding-bottom: 0;
                }
            /*シリーズ名とキャラ名のかたまりを横並びに*/
            .gal-flex {
                display: flex;
                flex-wrap: nowrap;
                justify-content: left;
                align-items: center;
            }
            .checkboxbun-galSP {
                font-size: 0.8em;
                display: block;
                justify-content: center;
                margin: 0 auto; /*外側*/
                padding: 0.4em 0.6em; /*内側の余白*/
            }
                /*シリーズ名*/
                .checkA dt label {
                    display: block;
                    width: 140px;
                    color: var(--fontcolorbold);
                    text-align: center;
                    padding: 0.3em 0; /*内側*/
                    cursor: pointer;
                    color: var(--fontcolorbold);
                    border: 2px solid var(--fontcolorbold);
                    border-radius: 5px;
                }
                /*キャラクター名*/
                .checkA dd label {
                    color: var(--fontcolorbold);
                }
                /*１シリーズのキャラクター全員の外枠*/
                .gal-chara_waku {
                    width: 100%;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, 200px);
                    justify-content: left;
                    grid-gap: 4px; /* 要素間の余白を設定*/
                }
                    .gal-chara_waku dd {
                        margin-left: 1.4em; /*外側*/
                        display: inline-block;
                        min-width: 200px;
                        width: calc(10%);
                        text-align:left; /*左寄せ*/
                        font-size: 0.85em;
                    }
                

    /*キャラリストの並び-----------------------------------------------*/
    .charalistbun {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, 150px);
        justify-content: center;
        grid-gap: 2em 0.5em; /* 要素間の余白を設定*/
        margin: 40px auto;
    }
        .charalistbun_1 {
            display: inline-block;
            min-width: 150px;
            width: calc(10%);
            text-align:left; /*左寄せ*/
            background-color: var(--colorwhite);
            padding: 0.8em; /*内側の余白*/
            font-size: 0.9em;
            height: 230px;
            transition: 0.2s;
        }
            .charalistbun_1:hover{
                opacity: 0.7;
            }

    /*キャラリスト１個1個のデザイン*/
    .charalist_name {
        color: var(--fontcolor1);
    }
        /*画像サイズ*/
        .charalist_gazou {
            vertical-align:middle;
            width:auto;
            height:auto;
            max-width: 100%;
            max-height: 100%;
        }
        /*画像＋名前、属性アイコンを上下に離して配置*/
        .charalist_flex {
            display: flex;
            height: 100%;
            flex-wrap: wrap;
            align-content: space-between;
        }
            /*属性アイコンのデザイン*/
            .chara_icon_waku {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: flex-end;
            }
                .chara_icon {
                    height: 27px;
                    width: 27px;
                    border-radius:5px; /*角丸く*/
                    background-color: var(--tagsubcolor5);
                    color: var(--colorwhite);
                    font-family: "Material Symbols Rounded";
                    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' -25, 'opsz' 20;
                    line-height: 27px;
                    font-size: 24px;
                    margin: 0 2px; /*外側*/
                    text-align: center;
                }
                    /*各アイコンの色*/
                    /*人間、その他*/
                    .chara_icon_1human {background-color: var(--tagmaincolor1);}
                    .chara_icon_1mochi, 
                    .chara_icon_1nazo {background-color: var(--tagmaincolor3);}
                    /*男女　※girlはフォントサイズ小さめに*/
                    .chara_icon_2boy {background-color: var(--tagmaincolor2);}
                    .chara_icon_2girl {font-size: 20px; background-color: var(--tagmaincolor1);}
                    /*ヤンデレ　※アイコンの色を変える*/
                    .chara_icon_3yami {color: var(--fontcolorbold);}
                    /*出演ゲームあり　※アイコンの色を変える*/
                    .chara_icon_4game {color: var(--fontcolor2);}
    /*スマホでのデザイン*/
    @media screen and (max-width: 650px) {
        .checkA dt label {
            width: 125px;
        }
        .charalistbun {
            grid-template-columns: repeat(auto-fit, 90px);
            grid-gap: 1em 0.3em; /* 要素間の余白を設定*/
        }
            .charalistbun_1 {
                min-width: 90px;
                width: calc(10%);
                padding: 0.6em; /*内側の余白*/
                height: 150px;
                font-size: 0.8em;
            }
                    .chara_icon {
                        height: 14px;
                        width: 14px;
                        border-radius:2px; /*角丸く*/
                        line-height: 14px;
                        font-size: 12px;
                        margin: 0 1px; /*外側*/
                    }
    }
                   

    /*画像ポップアップの動き--------------------------------------------------------------------------------------*/
        #popup-bg-cover {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 100% !important;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 1000;
        }
        #popup-bg-cover img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            max-width: 90%;
            max-height: 90%;
            height: 90%;
            object-fit: contain;
        }

    /*超詳細設定*/
    /*一列に並べる*/
    .popupimg-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1em; /*外側*/
    }
        /*超詳細設定、１個ずつのサイズ*/
        .popupimg-wrapper .popupimg-item {
            width: calc(24%);
            min-width: 145px;
            margin: 0.5em 0.1em; /*外側*/
            padding: 0.5em; /*内側*/
            background-color: rgba(139, 108, 108, 0.1);
            cursor: pointer;
            border-radius: 5px;
        }
            /*超詳細設定の画像*/
            .popupimg-item-img-small {
                width: 100%;
                height: 100%;
                max-height: 130px;
                object-fit: contain;
            }
            /*文字*/
            .popupimg-item p {
                text-align: center;
                font-size: 0.8em;
                color: var(--fontcolor2);
            }
            /*カーソル乗ったら薄くする*/
            .popupimg-item:hover {
                opacity: 0.7;
            }