* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
  }

#wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 120px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}


html {
    display: block;
}

body {
    background-color: #101010;
    color: #b0b0b0;
    margin: 0;
    /* font-family: "Ryumin Regular KL","游明朝",Verdana,sans-serif; */
    font-family: "メイリオ", "Meiryo", "verdana", sans-serif;
}

span.l {
    font-size: larger; 
}

span.xl {
    font-size: x-large; 
}

#site_header {
    margin: 0;
    top: 0;
    position: fixed;
    color: #f0f0f0;
    background-color: #202020;
    width: 100%;
    background: url(./img/nothing.png);
    background-size: cover;
}
#site_footer {
    margin: 0;
    bottom: 10%;
    position: fixed;
    color: #f0f0f0;
    width: 100%;
    height: 4vmin;
    padding: 0 0 0 0;
}

#foot_cm {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    grid-template-rows: 5fr 1000px;
    grid-template-columns: 25% 1fr;
    
}

#foot01 {
    font-family: fantasy;
    color:lightcyan;
    background-color: darkblue;
}
#foot02 {
    font-family: 'Gungsuh';
    color:white;
    background-color: #500000;
}
#foot03 {
    font-family: 'Times New Roman', Times, serif;
    color:white;
    background-color: darkmagenta;
}
#foot04 {
    font-family: 'HG行書体';
    color:black;
    background-color: darkgray;
}
#foot05 {
    font-family: 'Georgia';
    color:white;
    background-color: darkgreen;
}
#foot06 {
    font-family: 'Impact';
    color:darkblue;
    background-color: yellow;
}

#foot_pic {
    margin: 8px 8px;
    grid-column: 1/2;
    grid-row: 1/3;
}

#foot_title {
    margin: 4px 4px;
    font-size: 4vmin;
    margin: 4px;
    padding: 32px 0 0 0;
    text-shadow:2px 2px 0px #909090;
    text-align: center;

    grid-column: 2/2;
    grid-row: 2/3;
}
#foot_copy {
    font-size: 2.5vmin;
    margin: 20px 20px;
    padding: 4px 0 0 0;
    text-align: center;
    margin: 4px;

    grid-column: 2/2;
    grid-row: 1/3;
}



#header_title {
    margin: auto;
    padding: 22px;
    text-align: center;
}

h1 .header_menu {
    width: 100%;
    position: relative 15vh;
}

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #202020;
    opacity: 50%;
}

li {
    font-size: 10pt;
    float: left;
    border-right: 1px solid;
    border-radius: 30%;
}
li:last-child{
    float: right;
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    font-weight: normal;
    font-style: oblique;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(#active) {
    color: yellow;
    background-color: black;
}
#active {
	color: #da3c41;
}

#site_main {
    top: 20vh;
    margin-top: 19vh;
    /* margin-top: 19vh; */
    padding: 20px;
}

#center_message{
    position: relative;
    top: 20vh;
    text-align: center;
    z-index: -1;
}

figure {
    float: left;
}

#news_pic_Title {
    grid-column: 1/2;
    grid-row: 1/2;
    /* width: 300px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: left;
    font-size: 12px;
    color: yellow;
}
#news_pic_L {
    /* width: 300px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: left;
    font-size: 12px;
    color: yellow;
}

#news_pic_R {
    /* width: 200px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: right;
    font-size: 12px;
    color: yellow;
    text-align: right;
}

#face_pic_R {
    /* width: 200px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: right;
}
#face_pic_L {
    /* width: 200px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: left;
}

#Quiz_pic_L {
    /* width: 200px; */
    /* margin: 10px 10px; */
    padding: 10px 10px;
    float: left;
}


#writer {
    font-size: 14px;
    color: #b0b0b0;
}
#writer3 {
    font-size: 1.2vmax;
    color: #505050;
}
#QAPlayer {
    font-size: 12px;
    color: #b0b0b0;
}

#abouter {
    font-size: 12px;
    color: #b0b0b0;
}

#bookwriter {
    font-size: 12px;
    color: #b0b0b0;
}

#chair {
    font-size: 12px;
    color: #b0b0b0;
}

#news_pic img {
    margin: 10px;
}

#news_box {
    margin:     10px; 
    padding:    10px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}

#news_title {
    font-size: 32px;
    color: #f0f0f0;
    margin: 0px 20px;
    text-shadow: 2px 2px 0px #000000;
}

#news_doc {
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    color: #f0f0f0;
    text-shadow: 2px 2px 0px #000000;
}

#news_book {
    font-size: 14px;
    color: #b0b0b0;
    float: right;
    /* text-shadow: 2px 2px 0px #000000; */
}

small {
    font-size: 8px;
}

#poem_box {
    margin:     10px; 
    padding:    0px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}

#poem_tema {
    font-family: 'HG正楷書体-PRO';
    font-size: 4vmax;
    text-indent: 0.5ex;
    color: #c0c0c0;
    text-shadow: 2px 2px 0px #000000;
}


#poem_title {
    font-family: 'HG正楷書体-PRO';
    font-size: 2vmax;
    color: #c0c000;
    text-shadow: 2px 2px 0px #000000;
}

#poem_main {
    font-family: 'HG正楷書体-PRO';
    font-size: 2.8vmax;
    color: #e0e0e0;
    text-align: center;
    text-shadow: 2px 2px 0px #000000;
}

#book_box {
    box-sizing: content-box;
    display:    grid;
    grid-template-rows: 5ft 5fr;
    grid-template-columns: 2fr 1fr;
    margin:     10px; 
    padding:    10px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}


#book_writerpicture {
    margin:     5px; 
    padding:    5px; 
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    color: white;
    text-shadow: 2px 2px 0px #000000;
}


#book_face {
    grid-row: 1 / 2;
    grid-column: 1 / 2;    
}

#book_comment {
    margin:     5px; 
    padding:    5px; 
    grid-row: 2 / 3;
    grid-column: 1 / 3;    
}
#book_lovestory {
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    margin:     5px; 
    padding:    5px; 
    grid-row: 2 / 3;
    grid-column: 1 / 3;    
}
#book_erostory {
    font-family: '游明朝', 'Yu Mincho', sans-serif;
    margin:     5px; 
    padding:    5px; 
    grid-row: 2 / 3;
    grid-column: 1 / 3;    
}

#book_myststory {
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    margin:     5px; 
    padding:    5px; 
    grid-row: 2 / 3;
    grid-column: 1 / 3;    
}

#book_title {
    margin: 0px 20px;
}
#book_writerinfo {
    font-size: 3vw;
    margin: 0px 20px;
    /* text-align:right; */
}

#book_maker {
    color:  #C0C0C0;
    text-shadow: 1px 1px 1px #000000;
    font-size: 2vw;
    text-align:left;
}



#book01 {
    font-family: 'Yu Mincho';
    font-style: italic;
    font-weight:bolder;
    color:  white;
    font-size: 4vw;
    text-align:left;
    text-shadow: 3px 3px 0px #000000;
}
#book02 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:bolder;
    color:  white;
    font-size: 4vw;
    text-align:right;
    text-shadow: 3px 3px 0px darkblue;
}
#book03 {
    font-family: 'Times New Roman', Times, serif;
    font-weight:bolder;
    font-style: italic;
    color:  #d0d0d0;
    font-size: 4vw;
    text-align:left;
    text-shadow: 3px 3px 0px #006000;
}

#book04 {
    font-family: 'Meiryo';
    color:  cyan;
    font-style: italic;
    font-size: 5vw;
    text-align:center;
    text-shadow: 3px 3px 0px blue;
}
#book05 {
    font-family:monospace;
    font-weight:bolder;
    color:  lightpink;
    font-size: 5vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkred;
}
#book06 {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight:bolder;
    font-style: italic;
    color:  lightgreen;
    font-size: 5vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkgreen;
}

#book07 {
    font-family: 'Yu Mincho';
    color:  lightyellow;
    font-style: italic;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px red;
}
#book08 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:bolder;
    color:  lightpink;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkred;
}
#book09 {
    font-family: 'Times New Roman', Times, serif;
    font-weight:bolder;
    font-style: italic;
    color:  lightgoldenrodyellow;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkmagenta;
}

#book10 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:900;
    color:  black;
    font-style:italic;
    font-size: 7vw;
    text-align:right;
    text-shadow: 3px 3px 0px #FF3030;
}
#book11 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:900;
    color:  #300000;
    font-style: italic;
    font-size: 7vw;
    text-align:left;
    text-shadow: 3px 3px 0px #FF3030;
}
#book12 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:900;
    color:  #ff0000;
    font-style: italic;
    font-size: 7vw;
    text-align:center;
    text-shadow: 3px 3px 0px #600000;
}

#book13 {
    font-family: 'Yu Mincho';
    color:  pink;
    font-style: italic;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px red;
}
#book14 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight:bolder;
    color:  magenta;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkred;
}
#book15 {
    font-family: 'Times New Roman', Times, serif;
    font-weight:bolder;
    font-style: italic;
    color:  orange;
    font-size: 4vw;
    text-align:center;
    text-shadow: 3px 3px 0px darkmagenta;
}


#qa_box {
    margin:     10px; 
    padding:    10px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}

#qa_title {
    font-size: 32px;
    color: #f0f0f0;
    margin: 0px 20px;
    text-shadow: 2px 2px 0px #000000;
}
#qa_doc {
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    color: #c0c0c0;
    text-shadow: 2px 2px 0px #000000;
}

#quiz_box {
    margin:     10px; 
    padding:    10px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}

#quiz_title {
    font-size: 32px;
    font-weight: bolder;
    color: #f0f000;
    margin: 0px 20px;
    text-shadow: 4px 4px 0px #f00000;
}
#answer_title {
    font-size: 32px;
    font-weight: bolder;
    color: #00f0f0;
    margin: 0px 20px;
    text-shadow: 4px 4px 0px #007f00;
}

#quiz_doc {
    font-size: 24px;
    margin: 0px;
    padding: 0px;
    color: #c0c0c0;
    text-shadow: 2px 2px 0px #000000;
}

#about_box {
    margin:     10px; 
    padding:    10px; 
    border:     0.5px solid #606060;
    border-radius:  10px;
}

#about_title {
    font-size: 24px;
    color: #f0f0f0;
    margin: 0px 20px;
    text-shadow: 2px 2px 0px #000000;
}
#about_doc {
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    color: #c0c0c0;
    text-shadow: 2px 2px 0px #000000;
}

#shop_box {
    margin:     5px;
    padding:    10px;
    border:     0.5px solid #606060;
    border-radius:  10px;
    background-color: white;
}

#shop_pic {
    /* width: 300px; */
    /* margin: 10px 10px; */
    padding: 0px 0px;
    float: center;
}
#shop_title {
    font-family: fantasy;
    font-size: 5vmax;
    color:black;
    margin: 0px 20px;
    text-shadow:2px 2px 0px #C0C0C0;
    text-align: center;
}

#shop_con {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    /* grid-template-rows: 1fr 1fr; */
    grid-template-columns: 50% 1fr;
}
#shop_icon {
    grid-column: 1/2;
    grid-row: 1/2;
}

#shop_catch {
    font-size: 3vmax;
    color:#303030;
    margin: 0px 0px;
    text-align: left;
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
    justify-self: center;
}
#shop_info {
    font-size: 1.8vmax;
    color:#303030;
    grid-column: 1/3;
    grid-row: 2/3;
}

#shop_review_title {
    font-size: 4vmax;
    color:#303030;
    margin: 0px 0px;
    text-align: left;
}
#shop_review_all {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    grid-template-rows: 1fr;
    grid-template-columns: 40% 1fr;
}

#shop_review_all01 {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 2.5vmax;
    color:black;
    margin: 16px 16px;
    text-align: center;
    align-self: center;
    justify-self: center;
}
#shop_review_all02 {
    grid-column: 2/3;
    grid-row: 1/2;
    font-size: 2.0vmax;
    color:black;
    margin: 0px 0px;
    text-align: left;
}


#shop_allscore {
    font-size: 6vmax;
    color:#303030;
    margin: 0px 0px;
    text-align: center;
}

#shop_starL {
    font-size: 3.5vmax;
    color:orange;
    margin: 0px 0px;
    text-align: center;
    text-shadow: 1px 1px 0px #A0A050;
}
#shop_star {
    font-size: 2.5vmax;
    color:orange;
    margin: 0px 0px;
    text-align: left;
    text-shadow: 1px 1px 0px #A0A050;
}
#shop_comtitle {
    font-size: 2.5vmax;
    color:#303030;
    margin: 0px 0px;
    text-align: left;
}
#shop_comdoc {
    font-size: 1.8vmax;
    color:#303030;
    margin: 0px 0px;
    text-align: left;
}

#horo_box {
    margin:     10px auto;
    padding:    10px;
    border:     1px solid #606060;
    width:      90%;
    border-radius:  10px;
    background-color: white;
}

#horo_line {
    margin:     5px;
    padding:    10px 10px;
    color:  black;
    background-color: white;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    border:     0.5px solid #606060;
    width: 90%;
    height: 3.0vh;
    /* height: 8vh; */
    grid-template-rows: min-content;
    grid-template-columns: 10% 1fr 1fr;
}
#horo_line:hover {
    color:  red;
    background-color: yellow;
    /* display: grid;
    margin-left: auto;
    margin-right: auto;
    border:     1px solid #606060;
    width: 100%;
    height: 80px;
    grid-template-rows: 1fr;
    grid-template-columns: 10% 1fr 20% 5% 20%; */
}

#horo_col_icon {
    grid-column: 1/2;
    grid-row: 1/1;
    height: 3.0vh;
    margin: 0 auto;
    /* height: 10vh; */
}

#horo_col_name {
    font-family: 'Times New Roman', Times, serif;
    grid-column: 2/3;
    grid-row: 1/1;
    /* font-size: 3.0vh; */
    margin: 0%;
    text-align: center;
    letter-spacing: 0.3em;
    vertical-align: text-top;
    letter-spacing: 0em;
}
#horo_col_days {
    font-family: 'Times New Roman', Times, serif;
    grid-column: 3/4;
    grid-row: 1/1;
    /* font-size: 2.5vh; */
    margin: 0%;
    text-align: center;
    vertical-align: text-top;
    letter-spacing: 0em;
}

#horo_sent_box {
    margin:     0px auto;
    padding:    10px;
    border:     1px solid #606060;
    width:      100%;
    border-radius:  10px;
    background-color: white;
}

#horo_sent {
    margin:     5px 5px;
    padding:    10px;
    color:  black;
    background-color: white;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    border:     1px solid #606060;
    width: 90%;
    /* grid-template-rows: 5% 5% min-content min-content; */
    grid-template-columns: 30% 5% 1fr;
}

#horo_sent_icon {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.0vw;
    grid-column: 1/2;
    grid-row: 3/3;
    margin: auto;
    text-align: center;
    letter-spacing: 0.8em;
}

#horo_sent_title {
    font-family: 'Times New Roman', Times, serif;
    grid-column: 3/4;
    grid-row: 1/2;
    text-align: center;
    font-size: 4.0vw;
    letter-spacing: 0.1em;
}
#horo_sent_days {
    font-family: 'Times New Roman', Times, serif;
    grid-column: 3/4;
    grid-row: 2/3;
    text-align: center;
    font-size: 3.5vw;
}

#horo_sent_info {
    margin:     20px;
    padding:    20px;
    border:     1px solid black;
    border-radius:  20px;
    color: white;
    background-color: #505050;
    font-family: 'Times New Roman', Times, serif;
    grid-column: 3/4;
    grid-row: 3/4;
    text-align: justify;
    font-size: 3vw;
    /* display: flex; */
    align-items: center;
    /* vertical-align:middle; */

}
#horo_sent_type {
    padding: 2vw;
    font-family: 'Times New Roman', Times, serif;
    grid-column: 1/4;
    grid-row: 4/5;
    text-align: left;
    font-size: 3vw;
}
#horo_sent_items {
    font-family: 'Times New Roman', Times, serif;
    grid-column: 1/4;
    grid-row: 5/6;
    text-align: left;
    font-size: 2.5vw;
}