@charset "UTF-8";
/* --------------------------------------------------- */
/* --- CSS reset & custom property & mixin ----------- */
/* --------------------------------------------------- */
body {
  box-sizing: border-box;
  margin: 0;
  border: none;
  padding: 0;
  line-height: 2;
}

*, *::before, *::after {
  box-sizing: border-box;
}

header, main, footer, nav, article, aside, details, figcaption, figure, menu, section, summary, blockquote {
  display: block;
}

header, main, footer, nav, article, aside, details, figcaption, figure, menu, section, summary, blockquote, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, tr, th, td, img picture, span, a {
  margin: 0;
  padding: 0;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  vertical-align: bottom;
}

table, table thead, table tbody, table tfoot, table tr, table tr th, table tr td {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

input, textarea, select, button, label {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

a {
  word-break: break-word;
}

:root {
  /* -- color style --- */
  --color_main: rgba(234,184,46,1);
  --color_main_sub: rgba(21,63,152,1);
  --color_accent: rgba(250,190,0,1);
  --color_txt: rgba(32,32,32,1);
  --color_txt-sub: rgba(104,96,96,1);
  --color_txt-subColor: rgba(104,43,5,1);
  --color_txt-subColor2: rgba(250,190,0,1);
  --color_txt-link: rgba(0,23,71,1);
  --color_txt-link_hover:var(--color_red);
  --color_txt-link_hoverBG: rgba(0,51,255,0.1);
  --color_bg-main: rgba(244,233,204,1);
  --color_bg-mainHover: rgba(104,43,5,1);
  --color_bg-dark: rgba(160,160,160,1);
  --color_bg-light: rgba(238,238,238,1);
  --color_bg-nav: rgba(197,167,79,1);
  --color_bg-navHover: rgba(173,159,120,1);
  --color_bg-navNow: rgba(94,75,1,1);
  --color_bg-txtbtn: rgba(168,132,14,1);
  --color_bg-txtbtnHover: rgba(104,43,5,1);
  --color_bd-subColor: rgba(89,66,0,1);
  --color_bd-dark: rgba(64,64,64,1);
  --color_bd-light: rgba(144,144,144,1);
  --color_bd-link: var(--color_txt-link);
  --color_black: rgba(8,8,8,1);
  --color_white: rgba(255,255,255,1);
  --color_red: rgba(162,0,0,1);
  /* -- margin style --- */
  --mg_sec_bottom: 100px;
  --mg_h2_top: 120px;
  --mg_h2_bottom: 30px;
  --mg_h3_top: 60px;
  --mg_h3_bottom: 20px;
  --mg_h4_top: 40px;
  --mg_h4_bottom: 20px;
  --mg_h2_top_sp: 60px;
  --mg_h2_bottom_sp: 30px;
  --mg_h3_top_sp: 40px;
  --mg_h3_bottom_sp: 20px;
  --mg_h4_top_sp: 30px;
  --mg_h4_bottom_sp: 20px;
  --mg_txt_bottom: 1.5em;
  --mg_list_bottom: 5px;
  --mg_img_top: 30px;
  --mg_img_bottom: 30px;
  --mg_img_cap_t: 5px;
  --mg_img_cap_b: 5px;
  --mg_boxTtl_bottom: 10px;
  --mg_boxTtl_bd_bottom: 5px;
  --mg_repeatItem_t: 20px;
  --mg_repeatItem_b: 30px;
  /* -- border style --- */
  --bd_radius-L: 12px;
  --bd_radius-M: 8px;
  --bd_radius-S: 5px;
  --bd_radius-C: 50%;
  /* -- padding style --- */
  --pad_header_bottom: 40px;
  --pad_main_tb: 60px;
  --pad_vns_layout: 10px;
  --pad_footer: 20px;
  --pad_box-M: 12px 15px 10px 15px;
  --pad_box-S: 6px 10px 8px 10px;
  --pad_box-point: 6px 12px 4px 12px;
  --pad_txtbtn: 12px 30px 10px 30px;
  --pad_t_cell: 2px 8px;
  --pad_repeatItem: 15px;
  /* -- width-height style --- */
  --h_img_max: 80vh;
  /* -- text style --- */
  --ta_img: center;
  --ta_fig_img: center;
  /* -- font style --- */
  --fz_10: calc((10 / 16) * 16px);
  --fz_11: calc((11 / 16) * 16px);
  --fz_12: calc((12 / 16) * 16px);
  --fz_13: calc((13 / 16) * 16px);
  --fz_14: calc((14 / 16) * 16px);
  --fz_16: calc((16 / 16) * 16px);
  --fz_18: calc((18 / 16) * 16px);
  --fz_20: calc((20 / 16) * 16px);
  --fz_22: calc((22 / 16) * 16px);
  --fz_24: calc((24 / 16) * 16px);
  --fz_26: calc((26 / 16) * 16px);
  --fz_28: calc((28 / 16) * 16px);
  --fz_h1: calc((36 / 16) * 16px);
  --fz_h2: calc((30 / 16) * 16px);
  --fz_h3: calc((24 / 16) * 16px);
  --fz_h4: calc((20 / 16) * 16px);
  --fz_box_ttl: calc((16 / 16) * 16px);
  --fz_box_txt: calc((14 / 16) * 16px);
  --fz_box_txt_s: calc((13 / 16) * 16px);
  --fz_box_link: calc((14 / 16) * 16px);
  --fz_box_link_s: calc((12 / 16) * 16px);
  --fz_credit_ttl: calc((16 / 16) * 16px);
  --fz_credit_txt: calc((14 / 16) * 16px);
  --fz_copyright: calc((14 / 16) * 16px);
  --fw_h2: bold;
  --fw_h3: bold;
  --fw_h4: bold;
  --fw_ttl: bold;
  --fw_credit_ttl: bold;
  --fw_copyright: normal;
  --ff_noto-sans: 'Noto Sans JP', sans-serif;
  --ff_noto-serif: 'Noto Serif JP', serif;
  /* -- line-height style --- */
  --lh_txt: 2.0;
  --lh_txt_s: 1.5;
  --lh_ttl: 1.5;
  --lh_caption: 1.5;
  --lh_thin: 1.25;
  --lh_1: 1;
  /* -- list-style style --- */
  --ls_ol: decimal;
  --ls_ul: disc;
  --ls_ul_note: '※';
  /* -- space style --- */
  --space_l: 100px;
  --space_m: 60px;
  --space_s: 40px;
}

/* --------------------------------------------------- */
/* --- common CSS style ------------------------------ */
/* --------------------------------------------------- */
body {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif, "Noto Sans JP", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--color_txt);
}

a {
  color: var(--color_txt-link);
}
a:hover {
  text-decoration: underline;
  color: var(--color_txt-link_hover);
}
a:hover img {
  transform: scale(1.025);
}
a[target=_blank]::after {
  content: "";
  display: inline-block;
  margin-right: 3px;
  margin-left: 3px;
  width: 16px;
  height: 16px;
  background-image: url(/shogikio/img/ico_blank.png);
  background-repeat: no-repeat;
  background-position: center center;
}

@media (max-width: 800px) {
  .sp {
    display: block !important;
  }
  .sp_fl {
    display: flex !important;
  }
  .pc {
    display: none !important;
  }
}
@media (min-width: 801px) {
  .pc {
    display: block !important;
  }
  .pc_fl {
    display: flex !important;
  }
  .sp {
    display: none !important;
  }
}
.mt0 {
  margin-top: 0 !important;
}

.mt05 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt55 {
  margin-top: 55px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt65 {
  margin-top: 65px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt75 {
  margin-top: 75px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt85 {
  margin-top: 85px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt95 {
  margin-top: 95px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mr05 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr55 {
  margin-right: 55px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.mr65 {
  margin-right: 65px !important;
}

.mr70 {
  margin-right: 70px !important;
}

.mr75 {
  margin-right: 75px !important;
}

.mr80 {
  margin-right: 80px !important;
}

.mr85 {
  margin-right: 85px !important;
}

.mr90 {
  margin-right: 90px !important;
}

.mr95 {
  margin-right: 95px !important;
}

.mr100 {
  margin-right: 100px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb05 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb55 {
  margin-bottom: 55px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb65 {
  margin-bottom: 65px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb75 {
  margin-bottom: 75px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb85 {
  margin-bottom: 85px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.mb95 {
  margin-bottom: 95px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.ml0 {
  margin-left: 0 !important;
}

.ml05 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml55 {
  margin-left: 55px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.ml65 {
  margin-left: 65px !important;
}

.ml70 {
  margin-left: 70px !important;
}

.ml75 {
  margin-left: 75px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.ml85 {
  margin-left: 85px !important;
}

.ml90 {
  margin-left: 90px !important;
}

.ml95 {
  margin-left: 95px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.txt {
  line-height: var(--lh_txt);
  font-size: var(--fz_16);
}
.txt + .txt {
  margin-top: 1.5em;
}
.img + .txt {
  margin-top: 1.5em;
}

.img {
  text-align: center;
  font-size: var(--fz_14);
  color: var(--color_txt-sub);
}
.img img {
  margin: 5px auto;
}
.img span {
  display: inline-block;
  text-align: left;
}

.fz_l {
  font-size: 1.25em;
}

.fz_s {
  font-size: 0.75em;
}

.fw_b {
  font-weight: bold;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.tal {
  text-align: left !important;
}

.d_none {
  display: none !important;
}

.bd_dashed {
  border-style: dashed;
}

.bd_dotted {
  border-style: dotted;
}

.bd_double {
  border-style: double;
  border-width: 3px;
}

.txtLink {
  position: relative;
  padding-right: 12px;
}
.txtLink::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-width: 0;
  border-left: 6px solid var(--color_txt-link);
}
.txtLink:hover::after {
  border-left-color: var(--color_txt-link_hover);
}

.txtBtn {
  margin-top: 40px;
  text-align: center;
}
.txtBtn > a {
  position: relative;
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--color_bg-txtbtn);
  border-radius: 4px;
  padding: 1px;
  width: auto;
  background-color: var(--color_bg-txtbtn);
  text-decoration: none;
  color: var(--color_red);
}
@media (max-width: 800px) {
  .txtBtn > a {
    max-width: 90%;
    height: 55px;
    font-size: var(--fz_18);
  }
}
@media (min-width: 801px) {
  .txtBtn > a {
    height: 74px;
    font-size: var(--fz_20);
  }
}
.txtBtn > a {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.txtBtn > a .tbBgBox {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9px;
  height: 100%;
  background-color: var(--color_white);
  background-image: url(/shogikio/img/bg_txtbtn.jpg);
  line-height: var(--lh_thin);
  font-weight: bold;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
@media (max-width: 800px) {
  .txtBtn > a .tbBgBox {
    padding-right: 36px;
    padding-left: 74px;
  }
}
@media (min-width: 801px) {
  .txtBtn > a .tbBgBox {
    padding-right: 97px;
    padding-left: 135px;
  }
}
.txtBtn > a .tbBgBox {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.txtBtn > a .tbBgBox::before, .txtBtn > a .tbBgBox::after {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
}
.txtBtn > a .tbBgBox::before {
  content: "";
  background-image: url(/shogikio/img/ico_koma_fu.png);
  transform: rotate(8.81deg);
}
@media (max-width: 800px) {
  .txtBtn > a .tbBgBox::before {
    top: -10px;
    left: 5px;
    width: 35px;
    height: 50px;
  }
}
@media (min-width: 801px) {
  .txtBtn > a .tbBgBox::before {
    top: -12px;
    left: 22px;
    width: 44px;
    height: 63px;
  }
}
.txtBtn > a .tbBgBox::after {
  content: "";
  background-image: url(/shogikio/img/ico_koma_kyousha.png);
  transform: rotate(-6.68deg);
}
@media (max-width: 800px) {
  .txtBtn > a .tbBgBox::after {
    top: 8px;
    left: 31px;
    width: 38px;
    height: 52px;
  }
}
@media (min-width: 801px) {
  .txtBtn > a .tbBgBox::after {
    top: 15px;
    left: 55px;
    width: 49px;
    height: 67px;
  }
}
.txtBtn > a .tbBgBox span {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
.txtBtn > a .tbBgBox span::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
@media (max-width: 800px) {
  .txtBtn > a .tbBgBox span::after {
    margin-top: 2px;
    margin-left: 10px;
    border: 6px solid transparent;
    border-right-width: 0px;
    border-left: 10px solid var(--color_red);
  }
}
@media (min-width: 801px) {
  .txtBtn > a .tbBgBox span::after {
    margin-top: 3px;
    margin-left: 18px;
    border: 7px solid transparent;
    border-right-width: 0px;
    border-left: 11px solid var(--color_red);
  }
}
@media (min-width: 801px) {
  .txtBtn > a:hover {
    background-color: var(--color_red);
  }
  .txtBtn > a:hover .tbBgBox::before {
    animation: txtbtnKoma_fu 500ms linear forwards;
  }
  .txtBtn > a:hover .tbBgBox::after {
    animation: txtbtnKoma_kyosha 500ms linear forwards;
  }
  @keyframes txtbtnKoma_fu {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes txtbtnKoma_kyosha {
    0% {
      opacity: 0;
    }
    60% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .txtBtn > a:hover .tbBgBox span {
    filter: drop-shadow(0 0 1px var(--color_red)) drop-shadow(0 0 1px var(--color_red));
    color: var(--color_white);
  }
  .txtBtn > a:hover .tbBgBox span::after {
    border-left-color: var(--color_white);
  }
}

.colWrap {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
.colWrap.colRv {
  flex-direction: row-reverse;
}
.colWrap.col2 .colItem {
  margin-top: 40px;
  margin-right: 40px;
  width: calc((100% - 40px) / 2);
}
.colWrap.col2 .colItem:nth-child(2n) {
  margin-right: 0;
}
.colWrap.col2 .colItem:nth-child(-n+2) {
  margin-top: 0;
}
.colWrap.col3 .colItem {
  margin-top: 30px;
  margin-right: 30px;
  width: calc((100% - 60px) / 3);
}
.colWrap.col3 .colItem:nth-child(3n) {
  margin-right: 0;
}
.colWrap.col3 .colItem:nth-child(-n+3) {
  margin-top: 0;
}
@media (max-width: 800px) {
  .colWrap.col3 .colItem {
    margin-right: 20px;
    width: calc((100% - 20px) / 2);
  }
  .colWrap.col3 .colItem:nth-child(3n) {
    margin-right: 20px;
  }
  .colWrap.col3 .colItem:nth-child(-n+3) {
    margin-top: 30px;
  }
  .colWrap.col3 .colItem:nth-child(2n) {
    margin-right: 0;
  }
  .colWrap.col3 .colItem:nth-child(-n+2) {
    margin-top: 0;
  }
}
.colWrap.col4 .colItem {
  margin-top: 10px;
  margin-right: 10px;
  width: calc((100% - 30px) / 4);
}
.colWrap.col4 .colItem:nth-child(4n) {
  margin-right: 0;
}
.colWrap.col4 .colItem:nth-child(-n+4) {
  margin-top: 0;
}
@media (max-width: 800px) {
  .colWrap.col4 .colItem {
    margin-top: 20px;
    margin-right: 20px;
    width: calc((100% - 20px) / 2);
  }
  .colWrap.col4 .colItem:nth-child(-n+4) {
    margin-top: 20px;
  }
  .colWrap.col4 .colItem:nth-child(2n) {
    margin-right: 0;
  }
  .colWrap.col4 .colItem:nth-child(-n+2) {
    margin-top: 0;
  }
}

.animeSlow {
  transition-property: all;
  transition-duration: 350ms;
  transition-timing-function: ease-in;
}

.animeNormal {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in;
}

.animeFast {
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease-in;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.showF {
  display: flex !important;
}

/* --------------------------------------------------- */
/* --- contents style -------------------------------- */
/* --------------------------------------------------- */
body {
  background-image: url(/shogikio/img/bg_body.jpg);
  background-repeat: repeat-y;
  background-size: contain;
}
body::before {
  content: "";
  position: absolute;
  left: 0;
  z-index: -1;
  display: block;
  aspect-ratio: 1000/1900;
  width: 100%;
  background-image: url(/shogikio/img/bg_body_top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 800px) {
  body:has(#top)::before {
    top: 25vw;
  }
}
@media (min-width: 801px) {
  body:has(#top)::before {
    top: 200px;
  }
}
@media (max-width: 800px) {
  body:has(:not(#top))::before {
    top: 12.5vw;
  }
}
@media (min-width: 801px) {
  body:has(:not(#top))::before {
    top: 100px;
  }
}

header {
  background-image: url(/shogikio/img/header_bg.jpg);
  background-position: center center;
}
@media (max-width: 800px) {
  header {
    background-size: auto 100%;
  }
  header:has(:not(#top)) {
    position: sticky;
    top: 0;
    z-index: calc(infinity);
  }
}
@media (min-width: 801px) {
  header {
    background-size: contain;
  }
}
header:has(+ #top) h1, header:has(:not(#top)) p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 800px;
}
header:has(+ #top) h1 {
  aspect-ratio: 800/200;
}
@media (max-width: 800px) {
  header:has(+ #top) h1 img {
    height: 90%;
  }
}
header:has(:not(#top)) p {
  aspect-ratio: 800/100;
}
header:has(:not(#top)) p img {
  height: 80%;
}

main {
  margin: 0 auto;
  padding-bottom: 100px;
}
@media (max-width: 800px) {
  main {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (min-width: 801px) {
  main {
    max-width: 800px;
  }
}
main#top {
  padding-top: 40px;
}
main:not(#top) {
  padding-top: 5px;
}
main:not(#top) > h1 {
  text-align: center;
  color: var(--color_txt-subColor);
}
@media (max-width: 800px) {
  main:not(#top) > h1 {
    margin-top: 60px;
    margin-bottom: var(--mg_h2_top_sp);
  }
}
@media (min-width: 801px) {
  main:not(#top) > h1 {
    margin-top: 80px;
    margin-bottom: var(--mg_h2_top);
  }
}
main > nav {
  position: sticky;
  z-index: calc(infinity);
}
@media (max-width: 800px) {
  main > nav {
    top: 10px;
    right: 0px;
  }
}
@media (min-width: 801px) {
  main > nav {
    top: 0px;
  }
}
main > nav .menu {
  position: absolute;
  z-index: 2;
  width: 50px;
  height: 50px;
  background-color: var(--color_red);
}
@media (max-width: 800px) {
  main > nav .menu {
    top: 0;
    right: 0;
  }
}
@media (min-width: 801px) {
  main > nav .menu {
    right: -50px;
  }
}
main > nav .menu .txt {
  position: absolute;
  bottom: 3px;
  left: 0px;
  display: inline-block;
  width: 50px;
  text-align: center;
  line-height: var(--lh_1);
  font-size: var(--fz_12);
  color: var(--color_white);
}
main > nav .menu .bar {
  position: absolute;
  left: 10px;
  top: calc(50% - 6px);
  display: inline-block;
  border-radius: 2px;
  width: 30px;
  height: 2px;
  background-color: var(--color_white);
}
main > nav .menu .bar::before, main > nav .menu .bar::after {
  content: "";
  position: absolute;
  display: inline-block;
  border-radius: 2px;
  height: 2px;
  background-color: var(--color_white);
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
main > nav .menu.spOff .bar {
  background-color: var(--color_white);
}
main > nav .menu.spOff .bar::before, main > nav .menu.spOff .bar::after {
  left: 0;
  width: 30px;
  background-color: var(--color_white);
}
main > nav .menu.spOff .bar::before {
  top: -8px;
}
main > nav .menu.spOff .bar::after {
  bottom: -8px;
}
main > nav .menu.spOn .bar {
  background-color: var(--color_white);
}
main > nav .menu.spOn .bar::before, main > nav .menu.spOn .bar::after {
  right: 0;
  width: 10px;
  background-color: var(--color_white);
}
main > nav .menu.spOn .bar::before {
  top: -3px;
  transform: rotate(35deg);
}
main > nav .menu.spOn .bar::after {
  bottom: -3px;
  transform: rotate(-35deg);
}
main > nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 800px) {
  main > nav ul {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    display: block;
    transition-property: all;
    transition-duration: 125ms;
    transition-timing-function: ease-in-out;
  }
  main > nav ul.spOff {
    opacity: 0;
    visibility: hidden;
  }
  main > nav ul.spOn {
    padding: 60px 15px 80px;
    width: 80vw;
  }
  main > nav ul::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--color_bg-nav);
    opacity: 0.95;
  }
}
@media (min-width: 801px) {
  main > nav ul {
    display: flex;
    border: 1px solid var(--color_bd-subColor);
    height: 50px;
    background-color: var(--color_bg-nav);
  }
}
main > nav ul li:not(.closeBtn) {
  display: block;
}
@media (max-width: 800px) {
  main > nav ul li:not(.closeBtn) {
    margin-bottom: 15px;
  }
  main > nav ul li:not(.closeBtn):has(+ .closeBtn) {
    margin-bottom: 0px;
  }
}
@media (min-width: 801px) {
  main > nav ul li:not(.closeBtn) {
    border-right: 1px solid #000;
    width: 100%;
  }
  main > nav ul li:not(.closeBtn):nth-last-child(-n+2) {
    border-right: none;
  }
}
@media (max-width: 800px) {
  main > nav ul li.closeBtn {
    position: absolute;
    bottom: 10px;
    font-size: var(--fz_14);
    font-weight: bold;
  }
  main > nav ul li.closeBtn::after {
    content: "→";
    display: inline-block;
    margin-left: 5px;
  }
}
@media (min-width: 801px) {
  main > nav ul li.closeBtn {
    display: none;
  }
}
main > nav ul li a {
  text-decoration: none;
  text-align: center;
}
@media (max-width: 800px) {
  main > nav ul li a {
    display: inline-block;
    border-bottom: 1px dotted var(--color_white);
    width: 100%;
    line-height: 2.5;
    font-weight: bold;
    color: var(--color_txt-subColor);
  }
}
@media (min-width: 801px) {
  main > nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: var(--lh_thin);
  }
}
main > nav ul li a.now {
  text-decoration: none;
}
@media (max-width: 800px) {
  main > nav ul li a.now {
    font-weight: normal;
    color: var(--color_white);
  }
}
@media (min-width: 801px) {
  main > nav ul li a.now {
    background-color: var(--color_bg-navNow);
    color: var(--color_white);
  }
}
main > nav ul li a:not(.now):hover {
  text-decoration: none;
}
@media (max-width: 800px) {
  main > nav ul li a:not(.now):hover {
    font-weight: bold;
    color: var(--color_txt-subColor);
    filter: drop-shadow(0 0 1px var(--color_white));
  }
}
@media (min-width: 801px) {
  main > nav ul li a:not(.now):hover {
    background-color: var(--color_bg-navHover);
    color: var(--color_txt);
  }
}
main > nav ul li a span {
  display: inline-block;
}
main > section {
  margin-bottom: var(--mg_sec_bottom);
}
main > section:first-of-type {
  margin-bottom: 0;
  padding-bottom: 20px;
}
main > section:last-of-type {
  margin-bottom: 0;
}
main > section > h2 {
  position: relative;
  border-bottom: 1px solid var(--color_bd-subColor);
  text-align: center;
  color: var(--color_black);
}
@media (max-width: 800px) {
  main > section > h2 {
    margin-top: var(--mg_h2_top_sp);
    margin-bottom: var(--mg_h2_bottom_sp);
  }
}
@media (min-width: 801px) {
  main > section > h2 {
    margin-top: var(--mg_h2_top);
    margin-bottom: var(--mg_h2_bottom);
  }
}
main > section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  border-bottom: 2px solid var(--color_bd-subColor);
}
main > section > h3 {
  position: relative;
  padding-bottom: 5px;
  text-align: center;
  font-weight: bold;
  color: var(--color_bd-subColor);
}
@media (max-width: 800px) {
  main > section > h3 {
    margin-top: var(--mg_h3_top_sp);
    margin-bottom: var(--mg_h3_bottom_sp);
  }
}
@media (min-width: 801px) {
  main > section > h3 {
    margin-top: var(--mg_h3_top);
    margin-bottom: var(--mg_h3_bottom);
  }
}
main > section > h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50px);
  display: inline-block;
  width: 100px;
  height: 1px;
  background-color: var(--color_bd-subColor);
}
main > section .noteList {
  list-style: none;
  margin: 0;
  padding: 0;
}
main > section .noteList li {
  margin-bottom: 10px;
  padding-left: 1.1em;
  text-indent: -1.1em;
  line-height: var(--lh_txt_s);
}
main > section .noteList li::before {
  content: "※";
  display: inline-block;
  margin-right: 0.1em;
  width: 1em;
  text-indent: 0;
}
main > section .photoList {
  list-style: none;
  margin: 0;
  padding: 0;
}
main > section .photoList .img {
  display: inline-block;
  aspect-ratio: 1/1;
}
main > section .photoList .img img {
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
main > section .newsItem > a {
  display: block;
  text-decoration: none;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
main > section .newsItem > a .img {
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
}
main > section .newsItem > a .img img {
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  width: 100%;
  height: 100%;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
main > section .newsItem > a .ttl {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: var(--fz_16);
  line-height: var(--lh_ttl);
  color: var(--color_txt-subColor);
}
main > section .newsItem > a .date {
  line-height: var(--lh_ttl);
  font-size: var(--fz_14);
  color: var(--color_txt);
}
main > section .newsItem > a .link {
  line-height: var(--lh_thin);
  font-size: var(--fz_16);
}
main > section .archiveList {
  list-style: none;
  margin: 0;
  padding: 0;
}
main > section .archiveList .alItem > a {
  display: block;
  padding: 8px 10px;
  background-image: url(/shogikio/img/bg_txtbox.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: var(--color_white);
  transition-property: all;
  transition-duration: 125ms;
  transition-timing-function: ease-in-out;
}
main > section .archiveList .alItem > a:hover {
  background-color: var(--color_bd-subColor);
  font-weight: bold;
  color: var(--color_white);
}
main > section#registration #newstopbox {
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
}
main > section#registration #newstopbox .colItem:nth-child(3n+1):last-of-type, main > section#registration #newstopbox .colItem:nth-child(3n+2):last-of-type {
  margin-right: 0;
}
main > section#registration #newstopbox .colItem > a {
  display: inline-block;
  border: 1px solid var(--color_bd-light);
  padding: 5px 10px;
}
main > section#registration #newstopbox .colItem > a img {
  opacity: 0.8;
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
main > section#registration #newstopbox .colItem > a:hover img {
  opacity: 1;
}
main > section#registration #newstopbox .colItem > a::after {
  content: none;
}

#pagetop {
  position: sticky;
  bottom: 60px;
  z-index: calc(infinity);
  margin-bottom: 10px;
  width: 26px;
  height: 30px;
}
@media (max-width: 800px) {
  #pagetop {
    left: calc(100% - 27px);
  }
}
@media (min-width: 801px) {
  #pagetop {
    left: calc(50% + 410px);
  }
}

#sjkd_contents_div #vnStyle .vnsFunc.vns_pagetop {
  display: none !important;
}

#fixedBtn {
  position: sticky;
  bottom: 0;
  width: 100%;
}
#fixedBtn > a {
  display: block;
  padding: 5px;
  width: 100%;
  text-align: center;
  background-color: var(--color_bg-navHover);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--fz_20);
  color: var(--color_white);
  text-shadow: 0 1px 4px var(--color_txt-subColor);
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
#fixedBtn > a .kin {
  position: relative;
  display: inline-block;
  margin-right: 15px;
  margin-left: 15px;
  width: 57px;
  height: 1em;
}
#fixedBtn > a .kin::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: calc(50% - 44px);
  display: block;
  width: 87px;
  height: 102px;
  background-image: url(/shogikio/img/ico_koma_kin.png);
  background-repeat: no-repeat;
  background-size: 57px 72px;
  background-position: center bottom;
  filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
}
#fixedBtn > a:hover {
  background-color: var(--color_bg-navNow);
}
#fixedBtn > a:hover .kin::before {
  animation: fixedKin 750ms ease-in-out forwards;
}
@keyframes fixedKin {
  0% {
    transform: rotate3d(1, 0, 0, 0deg) translateY(0);
    filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
  }
  75% {
    transform: rotate3d(1, 0, 0, 25deg) translateY(-15px);
    filter: drop-shadow(0px 20px 5px rgba(0, 0, 0, 0.5));
  }
  90% {
    transform: rotate3d(1, 0, 0, 25deg) translateY(-15px);
    filter: drop-shadow(0px 20px 5px rgba(0, 0, 0, 0.5));
  }
  98% {
    transform: rotate3d(1, 0, 0, -5deg) translateY(0);
    filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
  }
  100% {
    transform: rotate3d(1, 0, 0, 0deg) translateY(0);
    filter: drop-shadow(0px 0px 0px rgb(0, 0, 0));
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 200px;
  background-image: url(/shogikio/img/footer_bg.jpg);
  background-position: center center;
  color: var(--color_white);
}
@media (max-width: 800px) {
  footer {
    padding: 30px 10px 10px;
  }
}
@media (min-width: 801px) {
  footer {
    padding: 60px 10px 20px;
  }
}
footer .kdo_links {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}
@media (min-width: 801px) {
  footer .kdo_links {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
}
footer .kdo_links li {
  text-align: center;
}
@media (min-width: 801px) {
  footer .kdo_links li {
    width: calc((100% - 60px) / 3);
  }
}
footer .kdo_links li a {
  text-decoration: none;
  font-size: var(--fz_14);
  color: var(--color_white);
  filter: drop-shadow(0 0 2px var(--color_black));
}
footer .kdo_links li a:hover {
  text-decoration: underline;
}
footer .kdo_links li a[target=_blank]::after {
  width: 14px;
  height: 14px;
  background-size: contain;
  filter: grayscale(100%) brightness(400%);
}
footer > p {
  text-align: center;
  font-size: var(--fz_13);
}

/* --------------------------------------------------- */
/* --- page style ----------------------------------- */
/* --------------------------------------------------- */
@media (min-width: 801px) {
  #top > section.lead {
    margin-bottom: 60px;
  }
}
@media (max-width: 800px) {
  #top > section.about .colWrap {
    display: block;
  }
  #top > section.about .colWrap .colItem {
    margin-right: 0;
    width: auto;
  }
  #top > section.about .colWrap .colItem.img {
    margin-bottom: 1em;
  }
}
@media (min-width: 801px) {
  #top > section.about .colWrap .colItem.img {
    width: calc((100% - 40px) / 3);
  }
  #top > section.about .colWrap .colItem:not(.img) {
    width: calc((100% - 40px) / 3 * 2);
  }
}

#about section > .txt {
  margin-bottom: 4em;
}
#about section > .img {
  margin-bottom: 5em;
}
#about section .kioTitle {
  background-image: url(/shogikio/img/about/kio_title_bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 801px) {
  #about section .kioTitle {
    display: flex;
    justify-content: space-around;
  }
}
@media (max-width: 800px) {
  #about section .kioTitle article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
}
@media (min-width: 801px) {
  #about section .kioTitle article {
    padding: 0 20px 20px;
  }
}
@media (max-width: 800px) {
  #about section .kioTitle article h3 {
    width: 60%;
  }
}
#about section .kioTitle article ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 800px) {
  #about section .kioTitle article ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: calc(40% - 15px);
  }
}
@media (min-width: 801px) {
  #about section .kioTitle article ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
#about section .kioTitle article ul li {
  font-size: var(--fz_18);
  color: var(--color_txt-subColor2);
}
@media (max-width: 800px) {
  #about section .kioTitle article ul li {
    width: 50%;
    text-align: center;
  }
}
@media (min-width: 801px) {
  #about section .kioTitle article ul li {
    display: inline-block;
    padding: 5px 0.6em;
  }
}

/* --------------------------------------------------- */
/* --- modal style ----------------------------------- */
/* --------------------------------------------------- */
#modal {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  pointer-events: initial;
}
#modal.off {
  display: none;
}
#modal.on {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(infinity);
  display: flex !important;
  justify-content: center;
  align-items: center;
}
#modal.off #md_area {
  display: none;
}
#modal ._close_ {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#modal #md_area {
  box-sizing: border-box;
  position: relative;
  width: 90vw;
  height: calc(100% - 90px);
  background-color: var(--color_white);
}
@media (max-width: 767px) {
  #modal #md_area {
    border-radius: 20px;
    padding: 30px 15px 50px;
  }
}
@media (min-width: 768px) {
  #modal #md_area {
    border-radius: 30px;
    padding: 50px 25px;
    max-width: 1200px;
  }
  #modal #md_area.wide {
    max-width: 1800px;
  }
}
#modal #md_area .md_cont {
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
  padding: 15px;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  #modal #md_area .md_cont {
    padding: 15px 0;
  }
}
#modal #md_area .md_close {
  margin: 15px auto 0;
  width: 100px;
  text-align: center;
  line-height: 1.5;
  /* font-size: 1.4em; */
  color: var(--color_txt);
  cursor: pointer;
}
#modal #md_area .md_close > span {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 14px;
  height: 14px;
}
#modal #md_area .md_close > span::before, #modal #md_area .md_close > span::after {
  content: "";
  position: absolute;
  top: 7px;
  display: block;
  background-color: var(--color_txt);
  width: 16px;
  height: 2px;
}
#modal #md_area .md_close > span::before {
  transform: rotate(45deg);
}
#modal #md_area .md_close > span::after {
  transform: rotate(-45deg);
}
#modal #md_area .md_close_btn {
  position: absolute;
  display: block;
  cursor: pointer;
}
@media (max-width: 767px) {
  #modal #md_area .md_close_btn {
    top: 5px;
    right: 10px;
    width: 25px;
    height: 25px;
  }
}
@media (min-width: 768px) {
  #modal #md_area .md_close_btn {
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
  }
}
#modal #md_area .md_close_btn::before, #modal #md_area .md_close_btn::after {
  content: "";
  position: absolute;
  top: 15px;
  display: block;
  margin-left: -5px;
  background-color: var(--color_txt);
}
@media (max-width: 767px) {
  #modal #md_area .md_close_btn::before, #modal #md_area .md_close_btn::after {
    width: 25px;
    height: 2px;
  }
}
@media (min-width: 768px) {
  #modal #md_area .md_close_btn::before, #modal #md_area .md_close_btn::after {
    width: 35px;
    height: 2px;
  }
}
#modal #md_area .md_close_btn::before {
  transform: rotate(45deg);
}
#modal #md_area .md_close_btn::after {
  transform: rotate(-45deg);
}/*# sourceMappingURL=style.css.map */