@charset "utf-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
a{text-decoration: none;}

/* ini */
* {margin: 0;padding: 0;}
*,*::before,*::after {box-sizing: border-box;}
html{height: 100%;scroll-behavior: smooth;}
:root {
  --top-color:#747CBA;
  --main-color:#0099ff;
  --sub-color:#006aff;
  --point-color:#ff701e;
  --font-family-mincho: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-family-gothic:  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  --btn-bgc-normal:#747CBA;
  --btn-bgc-hover:#dfe3fb;
  --btn-bgc-active:#747CBA;
  --btn-normal:#918F8E;
  --btn-hover:#1B66B1;
  --btn-active:#918F8E;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーー
　共通
 ーーーーーーーーーーーーーーーーーーーーーーーー */

body{
  font-family: var(--font-family-gothic);
}

table{
  border-collapse: collapse;
  border-spacing: 0;
}

div.flex_container{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
div.flex_main{
  flex: 1;
  overflow-y: scroll;
}

/* header */
header{
  padding:1em 0 1em 1em;
}
.header_logo img{
  width:clamp(120px,24%,240px);
}
.header_logo img:hover{
  transition: all 0.3s ease;
}




/* ーーーーーーーーーーーーーーーーーーーーーーーー
　TOP
 ーーーーーーーーーーーーーーーーーーーーーーーー */

#top_background {
  width: clamp(390px, 100vw, 1126px);
  margin: 0 auto;
  background-image: url(../images/top_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
}

#top {
  max-width: 736px;
  min-height: 100%;
  margin: 0 auto;
  padding: 70px 0 0 0;
  display: flex;
  flex-direction: column;
}

#container_top_title {
  max-width: 736px;
}

#container_top_title div.subtitle {
  background-color: var(--top-color);
  text-align: center;
  padding: 8px 0 5px 0;
  color: #fff;
}

#container_top_title div.subtitle img {
  width: 80%;
}

#container_top_title h1 {
  width: 100%;
  padding: 0;
}

#container_top_title h1 img {
  width: 100%;
  margin: .5em auto;
}

#container_top_title h1:after {
  display: block;
  content: "";
  width: 100%;
  height: 8px;
  background: radial-gradient(circle farthest-side, #999, #999 50%, transparent, transparent);
  background-size: 8px 8px;
}

#container_navi {
  font-family: var(--font-family-gothic);
  width: 100%;
  display: flex;
  padding: 0 0;
  margin: 2em 0 0 0;
  flex: 1;
}

#container_navi .flexbox_nav_btn {
  max-height: 220px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#container_navi .flexbox_nav_btn .box_item {
  width: 50%;
  text-align: center;
}

.common_btn {
  border: 4px solid var(--top-color);
  border-radius: 24px;
  height: 100%;
  line-height: 150%;
  font-size: clamp(13px, 3 * 1vw / 2, 24px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.common_btn a {
  display: block;
  color: var(--top-color);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.common_btn a:hover {
  /* color:#fff; */
}

.btn_select_book {
  height: 100％;
  width: 96%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.btn_select_book img {
  width: 84%;
}

.btn_select_book::after {
  background: var(--btn-bgc-hover);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.btn_select_book:hover {
  color: var(--btn-bgc-hover);
}

.btn_select_book:hover::after {
  transform: scale(1, 1);
}

.flexbox_select_Ltype {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-around;
  /* justify-content: space-between; */
}

.item_title {
  text-align: center;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
}

.item_title img {
  width: 70%;
}

.btn_select_Ltype {
  width: 44%;
  height: 90px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.btn_select_Ltype img {
  width: 74%;
}

.btn_select_Ltype::after {
  background: var(--btn-bgc-hover);
  ;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.btn_select_Ltype:hover {
  color: #fff;
}

.btn_select_Ltype:hover::after {
  transform: scale(1, 1);
}

div.caption {
  /* width:clamp(360px, 100vw / 2, 1025px); */
  width: 80%;
  margin: 2em auto;
  word-break: break-all;
  line-height: 180%;
  font-size: 1.125em;
  letter-spacing: 1.6px;
}


#container_option_navi {
  font-family: var(--font-family-gothic);
  width: 100%;
  display: flex;
  padding: 0 0;
  margin: 0 0 3em 0;
  flex: 1;
}

#container_option_navi .flexbox_nav_btn {
  max-height: 220px;
  width: 100%;
  display: flex;
}

#container_option_navi .flexbox_nav_btn .box_item {
  width: 50%;
  text-align: center;
}

#container_option_navi .flexbox_nav_btn .box_item a {
  color: #928f8e;
  font-size: 1.75em;
  font-weight: bold;
}

#container_option_navi .flexbox_nav_btn .box_item a:hover {
  color: var(--top-color);
}


#top #top_footer {
  margin: 0 0 3em 0;
}

#top #top_footer .wrap_footer {}

#top #top_footer .wrap_footer:before {
  display: block;
  content: "";
  width: 100%;
  height: 8px;
  background: radial-gradient(circle farthest-side, #999, #999 50%, transparent, transparent);
  background-size: 8px 8px;
}

#top #top_footer .wrap_footer .site_company {
  text-align: right;
  margin: 10px 0;
}

#top #top_footer .wrap_footer .site_company img {
  width: 32%;
}



/* ーーーーーーーーーーーーーーーーーーーーーーーー
　使いかた・仮名字形一覧について
 ーーーーーーーーーーーーーーーーーーーーーーーー */

#how_to_use,
#about{
  width:32em;
  margin:0 0;
  padding:1em 2em 1em 2em;
}

.contents {
  font-family: var(--font-family-mincho);
  line-height:1.8;
}

.contents h1{
  font-family: var(--font-family-gothic);
  margin-bottom:0.5em;
}

.contents h2{
  font-family: var(--font-family-gothic);
  margin:1em 0;
}

.contents p{
  margin-bottom:2em;
}

.contents ul{
  list-style-type:none;
  margin-bottom:2em;
}
.contents ul li{
  padding:5px 0;
}

#footer{
  text-align:right;
}

#footer img{
    width:40%;
}



/* ーーーーーーーーーーーーーーーーーーーーーーーー
　一行表示（表別一覧）
 ーーーーーーーーーーーーーーーーーーーーーーーー */

.btn_back_booklist{
  width: 140px;
  height: 30px;
  overflow: hidden;
  position: fixed;
  top: 10px;
  right: 0;
  z-index: 1;
  background:var(--btn-hover);
  color: #fff;
  line-height: 150%;
  font-size:0.8125em;
}
  .btn_back_booklist a{
    display: block;
    color:#fff;
    width: 140px;
    height: 30px;
    display: grid;
    place-items: center;
    z-index: 3;
  }

.btn_back_booklist::after {
  position: fixed;
  content: '';
  /* background:var(--btn-hover); */
  background: var(--btn-normal);
  color: #fff;
  width: 140px;
  height: 30px;
  top: 10px;
  transition: all 0.3s ease;
  right: 0;
  z-index: -1;
}
.btn_back_booklist:hover {
  color: #fff;
}
.btn_back_booklist:hover::after {
  width: 0px;
}


.wrap_header_book_index{
  display: flex;
  width:100vw;
}

.wrap_header_book_index h1{
  font-size:1.5em;
  flex:1;
  margin:13px;
  line-height: 1.5;
}


.wrap_header_book_index div.flexbox_button{
  margin-left:3em;
  margin-right:3em;
  display:grid;
  place-items: center end;
}

div.select_HK_type{
  display:flex;
}


div #btn_hiragana{
  border: 1px solid var(--btn-normal);
  border-radius: 15px 0 0 15px;
}

div #btn_katakana{
  border: 1px solid var(--btn-normal);
  border-radius: 0 15px 15px 0 ;
}
div #btn_both{
  border-top: 1px solid var(--btn-normal);
  border-bottom: 1px solid var(--btn-normal);
}


div.select_HK_type .button{
  width:60px;
  height:30px;
  /* background-color: var(--btn-normal); */
  color:#000;
  display:grid;
  place-items: center;
  margin:10px 0;
}

div.select_HK_type .button:hover{
  background-color: var(--btn-hover);
  cursor: pointer;
  color:#fff;
}

tr.del{
  display:none;
}

.active{
  background-color: var(--btn-active)!important;
  color:#fff!important;
}


table.wrap_book{
  border-collapse:separate;
  border-top:1px solid #c8c8c8;
  max-width:18000px!important;
}


table td.letters{
  position: sticky;
  font-size:0.8125em;
  border-bottom: 1px solid #c8c8c8;
  border-right:1px solid #c8c8c8;
  min-width:240px;
  padding:8px 1em 8px 1em;
  left: 0;
  background: #fff;
  line-height:1.5;
}

table td.letters a{
  color:#000;
}


table.wrap_book td.wrap_letters{
  padding:1em 1em;
  border-bottom:1px solid #c8c8c8;
}

div.flexbox_letters{
  display:flex;
  gap: 2px 4px;
}

  div.flex_wrap{
    flex-wrap:wrap;
  }

div.flexbox_letters .each_letter{
  min-width:100px;
  overflow: hidden;
}

  img.thumb_letter{
    width:80px;
    transition-duration: .5s;
  }

  img.thumb_letter:hover{
    width:80px;
    transform: scale(1.3);
  }

  div.flexbox_letters div.caption_each_letter{
    font-size:0.75rem;
  }

 /* 50音表示とはスタイルが違うので注意 */
 .each_letter span.no_image{
  display: inline-block;
  width:70px;
  height:70px;
  background-color: #fcfcfc;
  border:1px solid #ececec;
  margin-left:10px;
}






/* ーーーーーーーーーーーーーーーーーーーーーーーー
　一字表示（ひらがな・カタカナから遷移）
 ーーーーーーーーーーーーーーーーーーーーーーーー */
 /* 「掲載されていません」 */
 div.flexbox_letters span.No_Hit{
  font-size:0.8125rem;
}


/* ーーーーーーーーーーーーーーーーーーーーーーーー
　50音表表示
 ーーーーーーーーーーーーーーーーーーーーーーーー */
article.table_each_letters{
 margin:1em;
 position: relative;
}
article.table_each_letters table.container{
  
}
article.table_each_letters table.container td.area_bookinfo{
  border-right:1px solid #c8c8c8;
  vertical-align: top;
}
article.table_each_letters table.container td.area_bookinfo aside.bookinfo{
  width:240px;
  padding:10px 20px 80px 0;
}
aside.bookinfo div{
  margin:5px 0;
}
aside.bookinfo div.comment{
  line-height:180%;
}
article.table_each_letters table.container td.area_bookinfo .book_cover img{
  width:220px;
}
article.table_each_letters div.page_logo {
  position: absolute;
  width:240px;
  bottom:5px;
}
article.table_each_letters div.page_logo img{
  width:80%;
}
article.table_each_letters table.container td.area_tableletters{
  vertical-align: top;
  min-width:684px;
}
article.table_each_letters table.container td.area_tableletters table td{
  vertical-align: top;
  padding:10px 20px;
}
article.table_each_letters table.container td.area_tableletters img.each_letter{
  width:60px;
}

/* 50音表示 空白（冊子に対象文字列がない場合。四角いボーダーあり） */
article.table_each_letters table.container td.area_tableletters span.no_image{
  display: inline-block;
  width:50px;
  height:50px;
  background-color: #fcfcfc;
  border:1px solid #ececec;
  margin:5px;
}
/* 50音表示 空白（や□ゆ□よなどの□） */
.table_each_letters span.blank{
  display: inline-block;
  width:50px;
  height:50px;
  margin:5px;
}




/* ーーーーーーーーーーーーーーーーーーーーーーーー
　一字拡大表示
 ーーーーーーーーーーーーーーーーーーーーーーーー */
div.area_katsuji_png{
  padding:1em;
  text-align:center;
}
div.area_katsuji_png img{
  margin:0 auto;
  width:clamp(100%,90vw,800px);
  image-rendering: pixelated;
}
div.flexbox_katsuji_info{
  display: flex;
  justify-content: space-around;
}
div.page_logo{
  padding:1em;
}
div.page_logo img{
  width:clamp(120px,27vw,160px);
}
div.katsuji_info{
  padding:1em;
  line-height: 1.5;
}
div.katsuji_info span{
  margin:0 0.25em;
}





/* ーーーーーーーーーーーーーーーーーーーーーーーー
　活字見本帳一覧
 ーーーーーーーーーーーーーーーーーーーーーーーー */

#index_select_books{

}

#index_select_books table.container_booklist{
  margin:2em 0;
}

#index_select_books table.container_booklist th,
#index_select_books table.container_booklist td{
  padding:0.5em 1em;
}

#index_select_books th.item_company{
  font-size:1.25em;
  font-weight: 500;
  white-space:nowrap;
  border-right:1px solid #c8c8c8;
  border-bottom:1px solid #c8c8c8;
  text-align: left;
}

#index_select_books th.item_lead{
  text-align: left;
  font-size:1.25em;
  font-weight: 500;
  white-space:nowrap;
  border-bottom:1px solid #c8c8c8;
}

#index_select_books td.name_company{
  font-size:1.25em;
  font-weight: 500;
  white-space:nowrap;
  border-right:1px solid #c8c8c8;
  border-bottom:1px solid #c8c8c8;
}

#index_select_books td.flexbox_books{
  display:flex;
  flex-wrap:wrap;
  font-size:1em;
  border-bottom:1px solid #c8c8c8;
}

.wrap_link_book{
  flex-basis: 240px;
  max-width:320px;
  margin:1em;
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
}

div.book_cover{
  /* text-align: center; */
}

img.tn_book_cover{
  height:200px;
  margin:5px 10px;
}
img.tn_book_cover:hover{
  opacity: 0.5;
}

div.book_name{
  flex-basis: auto;
  max-width:320px;
}




/* ーーーーーーーーーーーーーーーーーーーーーーーー
　選択画面 ひらがな　id:type_Hiragana
 ーーーーーーーーーーーーーーーーーーーーーーーー */
#index_select_letters{
  flex:1;
  overflow-y: scroll;
}

#index_select_letters table.container_letters{
  font-family:var(--font-family-mincho);
  font-size:clamp(20px, 3 * 3vw / 2, 48px);
  font-weight: 600;
  margin:20px auto;
}
#index_select_letters table.container_letters td{
  vertical-align: top;
}

#index_select_letters table.container_letters table.box_letters{
 margin:0px 12px;
}

#index_select_letters table.container_letters table.box_letters td{
  width:72px;
  padding:4px;
}

#index_select_letters.type_Hiragana table.container_letters table.box_letters tr.vrl td{
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

#index_select_letters table.container_letters table.box_letters td.el a{
  color:#333;
}

#index_select_letters table.container_letters table.box_letters td a:hover{
  transition-duration: .5s;
  color: var(--point-color);
}

tr.small a{
  font-size:.75em;
}

#index_select_letters span.blank{
  display: inline-block;
}




@media screen and (max-width: 520px) {

  body {
    font-size: 13px;
  }

  #top {
    width: 100vw;
    padding: 2em;
    margin: 0 auto;
  }

  #how_to_use,
  #about {
    width: 98%;
    margin: 0 auto;
    padding: 1em 1em 1em 1em;
  }

  #container_navi {
    width: 100%;
  }

  .common_btn {
    border: 3px solid var(--top-color);
    border-radius: 16px;
    height: 100%;
    line-height: 150%;
    font-size: clamp(13px, 3 * 1vw / 2, 24px);
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  .item_title {
    margin-bottom: 8px;
  }

  .btn_select_Ltype {
    height: 50px;
  }

  div.caption {
    width: 96%;
    margin: 2em auto;
    line-height: 180%;
    font-size: 1.125em;
    letter-spacing: 0.2px;
  }

  #container_option_navi .flexbox_nav_btn .box_item a {
    font-size: 1em;
    font-weight: normal;
  }

  #index_select_books td.name_company {
    white-space: unset;
  }

  .wrap_header_book_index {
    flex-direction: column-reverse;
  }

  .wrap_header_book_index div.flexbox_button {
    margin-right: 1em;
  }

  table td.letters {
    min-width: 100px;
    padding: 0 1em 0 1em;
  }

  div.flexbox_letters .each_letter {
    min-width: 15vw;
  }

  img.thumb_letter {
    width: 50px;
  }

  span.no_image {
    width: 50px;
    height: 50px;
    margin-left: 0px;
  }

  #index_select_letters {
    max-width: 100vw;
  }

  #index_select_letters table.container_letters {
    margin: 10px auto;
  }

  #index_select_letters table.container_letters table.box_letters {
    min-width: 50%;
    margin: 0px 3px;
  }

  #index_select_letters table.container_letters table.box_letters td {
    max-width: 20%;
    padding: 1px;
    text-align: center;
  }

}