@charset "utf-8";
/* FONT Lora */
@font-face {
src:url("../font/Lora/static/Lora-Medium.woff") format("woff");
font-family:"Lora";
font-weight:500;
font-style:normal;
font-display:swap;
}
@font-face {
src:url("../font/Lora/static/Lora-Bold.woff") format("woff");
font-family:"Lora";
font-weight:700;
font-style:normal;
font-display:swap;
}
/* ----------------------------------------------
All area
---------------------------------------------- */
*, *::before, *::after {margin:0;padding:0}
article, aside, figure, footer, header, main, nav, section {display:block;overflow:hidden}

body {
  font-family: 'Lora', 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.8;
  color: #000;
  background-color: #fff;
}
h1, h2, h3, h4, h5, h6, strong {font-family:'Lora', 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;font-weight:700}
p {margin-top:0;margin-bottom:1rem}
a, a:visited {color:#000;text-decoration:none}
a:hover, a:active, a:focus {
	color:#000;
	font-weight:700;
  background-color:rgba(118, 198, 218, 0.5);
  padding:0.15rem;
  border-radius:0.3rem;
    text-decoration:none;
    transition-property:all;
    transition-duration:600ms;
    transition-delay:0s;
    transition-timing-function:ease;
  }
a.disabled, span.disabled {pointer-events:none}

hr {box-sizing:content-box;height:0;overflow:visible}
.text-left, .align-left {text-align:left !important}
.text-right, .align-right {text-align:right !important}
.text-center, .align-center {text-align:center !important}
.clearfix::after {display:block;clear:both;content:""}

.row {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
section {max-width:920px;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}

/* --- logo and name --- */
#lgkanji {color:#000;font-weight:700;font-size:1.6rem}
#lgkanji img {width:36px;height:36px}
#lgkanji span.red {color:#d12800}
#lgkanji a, #lgkanji a:visited {color:#000;text-decoration:none;font-weight:700;font-size:1.6rem}
#lgkanji a:hover, #lgkanji a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}

/* --- navigation visible on mobile only --- */
#navmob {visibility:hidden;height:1px;margin-top:-3.5rem;overflow:hidden}
 
/* --- search field 1 -long --- */
#search1 .border1 {border:4px solid #989898;border-radius:16px;box-shadow:1px 1px 4px 0px #989898;border-radius:16px;width:30rem;margin:0 auto;vertical-align:middle}
#search1 input {font-size:2rem;border:#fff;width:20rem;margin:0 0 3px 0}

/* --- search field 4, 5 -short --- */
#search4 .border1, #search5 .border1 {border:4px solid #989898;border-radius:16px;box-shadow:1px 1px 4px 0px #989898;border-radius:16px;width:14rem;margin:0 auto;padding:0;text-align:center;vertical-align:middle}
#search4 input, #search5 input {font-size:2rem;border:#fff;width:8rem;margin:0 0 3px 0;text-align:center}
#search4 h2, #search5 h2 {padding:0.5rem 0 0 0.5rem}

/* --- search 1,4,5 find icon button --- */
#search1 input[type="button"],
#search4 input[type="button"],
#search5 input[type="button"] {
  background-image: url(../img/icn-find-01.gif);
  background-repeat: no-repeat;
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  float: right;
  margin-right: 1rem;
}
#search1 input[type="button"]:hover,
#search4 input[type="button"]:hover,
#search5 input[type="button"]:hover {
  background-image: url(../img/icn-find-02.gif);
  background-repeat: no-repeat;
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  float: right;
  margin-right: 1rem;
}
#search1 input[value="search"],
#search4 input[value="search"],
#search5 input[value="search"] {color:transparent}

/* --- fukidashi box --- */
.arrow_box {position:relative;background:#fff;border:6px solid #76c6da;border-radius:16px;padding:1rem}
.arrow_box:after, .arrow_box:before {bottom:100%;left:50%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none}
.arrow_box:after {border-color:rgba(255, 255, 255, 0);border-bottom-color:#fff;border-width:22px;margin-left:-22px}
.arrow_box:before {border-color:rgba(0, 158, 199, 0);border-bottom-color:#76c6da;border-width:31px;margin-left:-31px}

/* --- fukidashi box - list under-line, text size --- */
#search2 ul li, #search2 p, #search3 ul li, #search3 p {font-size:1rem}
#search2 ul li, #search3 ul li {font-size:1rem;border-bottom:1px solid #dee2e6}
ul.list3c {column-count:3}
ul.list4c {column-count:4}
#search2 ul li.additional {padding-left:20px;}

/* --- candidates box --- */
.cand_box {background:#fff;border:4px solid #989898;border-radius:16px;padding:1rem 0.25rem 0 1rem;margin:0 0.1rem;vertical-align:middle}

/* --- column colours --- */
.colpnk {color:#fff;background-color:#d3799e;border:16px solid #fff; border-radius:32px}
.colgrn {color:#fff;background-color:#8ac43f;border:16px solid #fff; border-radius:32px}
.colblu {color:#000;background-color:#76c6da;border:16px solid #fff; border-radius:32px}

/* --- column - pink link --- */
.colpnk a, .colpnk a:visited {color:#fff;font-size:1rem;text-decoration:none}
.colpnk a:hover, .colpnk a:active, .colpnk a:focus {color:#000;background-color:#fff;padding:0.15rem;border-radius:0.3rem}

/* --- column - green link --- */
.colgrn a, .colgrn a:visited {color:#fff;font-size:1rem;font-weight:700;text-decoration:none}
.colgrn a:hover, .colgrn a:active, .colgrn a:focus {color:#000;background-color:#fff;padding:0.15rem;border-radius:0.3rem}

/* --- column - blue link --- */
.colblu a, .colblu a:visited {color:#fff;font-size:1rem;font-weight:700;text-decoration:none}
.colblu a:hover, .colblu a:active, .colblu a:focus {color:#000;background-color:#fff;padding:0.15rem;border-radius:0.3rem}
.randam ul {display:block}
.randam li {display:inline-block;min-width:6.5rem}

/* --- English contents x4 --- */
#more4 img {width:140px;height:140px;border-radius:16px}
#more4 a, #more4 a:visited {display:block;color:#000;font-size:1.05rem;font-weight:700;text-align:left;margin:0 auto;max-width:150px;background-color:rgba(255, 255, 255,0.05)}
#more4 a:hover, #more4 a:active, #morex4 a:focus {display:block;color:#000;font-weight:700;text-align:left;margin:0 auto;max-width:150px;background-color:rgba(255, 255, 255,0.05)}

/* --- Short Story links --- */
#story ul li a, #story ul li a:visited {display:block;color:#000;font-size:1.05rem;font-weight:700;text-align:left;margin:0 auto}
#story ul li a:hover, #story ul li a:active, #story ul li a:focus {display:block;color:#000;font-weight:700;text-decoration:none;text-align:left;padding:0.05rem;border-radius:0.3rem}

/* --- Chart by p #srtoke --- */
#stroke p {display:table;width:100%;font-weight:500;font-size:1.25rem;height:2.5rem;text-align:center;padding:0;margin-bottom:0;float:left}
#stroke p a, #stroke p a:visited {display:table-cell;width:5%;margin-bottom:0;height:2.5rem;text-align:center;line-height:1;vertical-align:middle}
#stroke p a:hover, #stroke p a:active, #stroke p a:focus {display:table-cell;width:5%;margin-bottom:0;height:2.5rem;border-radius:0.35rem;text-align:center;line-height:1;vertical-align:middle}
#stroke .bg1 {background-color:rgba(204, 204, 204, 0.35)}
#stroke .bg2-lg {background-color:#fff}

/* --- Top link #stroke --- */
#stroke .colblk {color:#fff;background-color:#000;margin-bottom:2rem}
#stroke .colblk a, #stroke .colblk a:visited {display:inline-block;width:6.6667%;height:1.5rem;padding:0.25rem;text-align:center;line-height:1;color:#fff;font-size:1.125rem;font-weight:700;vertical-align:middle}
#stroke .colblk a:hover, #stroke .colblk a:active, #stroke .colblk a:focus {display:inline-block;width:6.6667%;height:1.5rem;padding:0.25rem;border-radius:0.35rem;color:#fff;background:#d12800;text-align:center;line-height:1;vertical-align:middle}
#stroke span.h5 {margin-bottom:2rem}

/* --- Kaku (Strokes) No. only --- */
em.redcir {display:inline-block;width:2rem;height:2rem;border-radius:50%;color:#fff;background:#d12800;font-size:1rem;text-align:center;line-height:2rem;font-style:normal}

/* --- table small option --- */
.table-sm> :not(caption)>*>* {
  padding:0.1rem 0.1rem;
}

/* --- Handwritten area #drawbox --- */
.writing {border:4px solid #989898;border-radius:16px;max-width:50%;min-height:340px;margin:0 auto}
.switch {width:100%;padding:2rem 0;text-align:center}
.switch button, .switch button a, .switch button a:visited {color:#fff;background-color:#505050;border:1px solid #505050;border-radius:8px;padding:0.25rem 1rem 0.25rem 0.25rem;vertical-align:middle}
.switch button i {padding:0.25rem;vertical-align:middle}
.switch button:hover,
.switch button:active,
.switch button:focus {
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
  text-decoration: none;
  transition-property: all;
  transition-duration: 600ms;
  transition-delay: 0s;
  transition-timing-function: ease;
}

/* --- colours --- */
.gray {color:#989898}
.red {color:#d12800}
.pink {color:#d3799e}
.blue {color:#76c6da}
.green {color:#8ac43f}
.black{color:#000}

/* --- icon marks --- */
.ic, .ic1 {display:inline-block;width:1.2rem;height:1.2rem}
.ic-cir {background:url(../img/ic-circle-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* マル */
.ic-cro {background:url(../img/ic-cross-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* バツ */
.ic-tri {background:url(../img/ic-triangle-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* 三角 */
.ic-squ {background:url(../img/ic-square-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* 四角 */
.ic-tri-rw {background:url(../img/ic-trianglew-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* 三角右向き白 */

/* --- btn marks --- */
.bt, .bt1 {display:inline-block;width:2rem;height:2rem}
.bt-cir {background:url(../img/btn-circle-01.png);background-repeat:no-repeat;background-size:2rem} /* ボタン マル */
.bt-cro {background:url(../img/btn-cross-01.png);background-repeat:no-repeat;background-size:2rem} /* ボタン バツ */
.bt-tri {background:url(../img/btn-triangle-01.png);background-repeat:no-repeat;background-size:2rem} /* ボタン 三角 */
.bt-squ {background:url(../img/btn-square-01.png);background-repeat:no-repeat;background-size:2rem} /* ボタン 四角 */
.bt-tri-rw {background:url(../img/btn-triangle-w01.png);background-repeat:no-repeat;background-size:2rem} /* ボタン 右向き白 */
.bt-tri-rw90 {background:url(../img/btn-trianglew-01.gif);background-repeat:no-repeat;background-size:2rem} /* ボタン 三角右向き白 90%small */

/* --- btn small smarks --- */
.bt-sm, bt-sm1 {display:inline-block;width:1.2rem;height:1.2rem}
.bt-sm-cir {background:url(../img/btn-circle-01.png);background-repeat:no-repeat;background-size:1.2rem} /* ボタン マル */
.bt-sm-cro {background:url(../img/btn-cross-01.png);background-repeat:no-repeat;background-size:1.2rem} /* ボタン バツ */
.bt-sm-tri {background:url(../img/btn-triangle-01.png);background-repeat:no-repeat;background-size:1.2rem} /* ボタン 三角 */
.bt-sm-squ {background:url(../img/btn-square-01.png);background-repeat:no-repeat;background-size:1.2rem} /* ボタン 四角 */
.bt-sm-tri-rw {background:url(../img/btn-triangle-w01.png);background-repeat:no-repeat;background-size:1.2rem} /* ボタン 右向き白 */
.bt-sm-tri-rw90 {background:url(../img/btn-trianglew-01.gif);background-repeat:no-repeat;background-size:1.2rem} /* ボタン 三角右向き白 90%small */

/* --- changing angle - for btn-icon marks --- */
.r45 {transform:rotate(45deg)}
.r90 {transform:rotate(90deg)}

/* --- bg wave image --- */
.bgbutton-wave {display:block;background-image:url(../img/bg-wave-01.gif);background-repeat:no-repeat;background-size:35% auto;background-position:bottom left;padding:0;overflow:hidden}
/* --- wave line --- */
.waveline {display:block;background-image:url(../img/bg-waveline-01.png);background-repeat:repeat-x;height:42px;margin:0;padding:0;width:100%;overflow:hidden}

/* --- Footer --- */
footer {background-color:#009ec7}
footer h4, footer h4 a, footer h4 a:visited {color:#fff;font-size:1.35rem;font-weight:700;text-align:center;text-decoration:none;padding:0.25rem 0 1rem 0}
footer h4 a:hover, a:active, a:focus {color:#fff;font-weight:700;text-align:center;text-decoration:none;padding:0.25rem 0 1rem 0;background-color:rgba(49, 61, 64, 0.05)}
footer h5 {font-size:1.125rem}
footer ul li, footer ul li a:link, footer ul li a:visited {color:#fff;font-size:1rem;text-decoration:none;line-height:1.5}
footer ul li a:hover, footer ul li a:active, footer ul li a:focus {color:#fff;text-decoration:none;font-weight:700}
/* --- Copyright --- */
.bgcopy {width:100%;background-color:#505050;color:#fff;text-align:center;border-top:1px solid #fff;padding:0;margin:0}
.bgcopy p {font-size:0.8rem;text-align:center;text-decoration:none;padding:0.5rem 1.5rem 1rem;margin-bottom:0}

/* --- "To Top" Button --- */
.arwtop {position:fixed;bottom:3rem;right:3rem;margin:0 auto;z-index:200}
.arwtop a, .arwtop a:visited {display:inline-block;position:relative;padding:3.25rem 1.5rem 0 1.5rem;margin:0 auto;z-index:201;color:#fff;font-size:1rem;line-height:1.2;text-align:center}
.arwtop a:hover, .arwtop a:active, .arwtop a:focus {background-color:rgba(0, 158, 199, 0.01)}
.arwtop::before {
    position: absolute;
    content: '';
    width: 5rem;
    height: 5rem;
    background: rgba(209, 40, 0, 0.5);
    border-radius: 2.5rem;
    top: 27.5%;
    left: 0;
    margin-top: -0.5rem;
}
.arwtop::after {
    position: absolute;
    content: '';
    width: 2.85rem;
    height: 2.85rem;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 50%;
    left: 1rem;
    margin-top: 0;
}
/* ----- Menu (Floating) ----- */
.floating-nav {position:fixed;width:50px;right:0;top:10%;cursor:pointer}
.floating-nav a {color:#fff;writing-mode:vertical-rl;text-orientation:upright;text-decoration:none}

/* ----------------------------------------------
media queries
---------------------------------------------- */

/* mid-device (tablet, more than 768px)
============================================== */
@media (min-width: 768px) {
  .img-size {width:70px;margin-bottom:0.5rem}

/* --- Top link #stroke --- */
#stroke .colblk {color:#fff;background-color:#000;margin-bottom:2rem;height:auto}

/* --- navigation visible on mobile only --- */
#navmob {visibility:hidden;height:1px;margin-top:-3.5rem;overflow:hidden}
#navbar .collapse .navbar-collapse {display:none}

/* --- white background column (for bg-wave) --- */
.bg-sm-white {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  margin: 0 auto;
}
/* --- bg wave image --- */
.bg-wave {display:block;background-image:url(../img/bg-wave-01.gif);background-repeat:no-repeat;background-size:38% auto;background-position:bottom left;padding:0;overflow:hidden}
/* --- wave line --- */
.waveline {display:block;background-image:url(../img/bg-waveline-02.png);background-repeat:repeat-x;background-size:auto 28px;height:28px;margin:0;padding:0;width:100%;overflow:hidden}
}

/* large-device (desktop, more than 992px)
============================================== */
@media (min-width: 992px) {
  nav ul {display:flex}
/* --- navigation visible on mobile only --- */
#navmob {visibility:hidden;height:1px;margin-top:-3.5rem;overflow:hidden}
}
/* mid-device (tablet, less than 992px)
============================================== */
@media (max-width: 991.98px) {
  nav ul {
    padding-top:1rem;
  }
/* --- logo and name --- */
#lgkanji {color:#000;font-weight:700;font-size:1.6rem}
#lgkanji img {width:36px;height:36px}
#lgkanji span.red {color:#d12800}
#lgkanji a, #lgkanji a:visited {color:#000;text-decoration:none;font-weight:700;font-size:1.6rem}
#lgkanji a:hover, #lgkanji a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}

/* --- navigation visible on mobile only --- */
#navmob {visibility:visible;height:auto;margin-top:0;width:100%}
#navmob button {visibility:hidden}
/* --- logo name --- */
#navmob {color:#000;font-weight:700;font-size:1rem}
#navmob img {width:26px;height:26px}
#navmob span.red {color:#d12800}
#navmob a, #navmob a:visited {color:#000;text-decoration:none;font-weight:700;font-size:1.25rem}
#navmob a:hover, #navmob a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}
/* --- navigation list --- */
#navbar {font-weight:500}
#navbar a, #navbar a:hover, a:visited {color:#000;text-decoration:none;font-weight:500;font-size:1rem}
#navbar a:hover, #navbar a:hover, a:focus {color:#989898;text-decoration:none;font-weight:500}

/* --- Chart by p #srtoke --- */
#stroke p {display:table;width:100%;font-weight:500;font-size:1.25rem;height:3rem;text-align:center;padding:0;margin-bottom:0;float:left}
#stroke p a, #stroke p a:visited {display:table-cell;width:5%;height:3rem;margin-bottom:0;text-align:center;line-height:1;vertical-align:middle}
#stroke p a:hover, #stroke p a:active, #stroke p a:focus {display:table-cell;width:5%;margin-bottom:0;height:3rem;border-radius:0.35rem;text-align:center;line-height:1;vertical-align:middle}
#stroke .bg1, #stroke .bg2 {background-color:rgba(204, 204, 204, 0.35)}

/* --- Top link #stroke --- */
#stroke .colblk {color:#fff;background-color:#000;margin-bottom:2rem;height:auto}
#stroke .colblk a, #stroke .colblk a:visited {display:inline-block;width:6.6667%;height:1.5rem;text-align:center;line-height:1;color:#fff;font-size:1rem;font-weight:700;vertical-align:middle}
#stroke .colblk a:hover, #stroke .colblk a:active, #stroke .colblk a:focus {display:inline-block;width:6.6667%;height:1.5rem;border-radius:0.35rem;color:#fff;background:#d12800;text-align:center;line-height:1;vertical-align:middle}
#stroke span.h5 {font-size:1rem;margin-bottom:2rem}

/* --- Handwritten area #drawbox --- */
.writing {border:4px solid #989898;border-radius:16px;max-width:70%;min-height:330px;margin:0 auto}
/* --- bg wave image --- */
.bg-wave {display:block;background-image:url(../img/bg-wave-01.gif);background-repeat:no-repeat;background-size:55% auto;background-position:bottom left;padding:0;overflow:hidden}
/* --- wave line --- */
.waveline {display:block;background-image:url(../img/bg-waveline-02.png);background-repeat:repeat-x;background-size:auto 28px;height:28px;margin:0;padding:0;width:100%;overflow:hidden}
/* --- Footer --- */
footer h5 {font-size:1rem}

/* --- white background column (for bg-wave) --- */
.bg-sm-white {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  margin: 0 auto;
}
}
/* small-device (mobile SE, tablet horizontal, less than 668px)
============================================== */
@media (max-width: 667.98px) {
#stroke .bg1 {background-color:rgba(204, 204, 204, 0.35)}
#stroke .bg2 {background-color:#fff}
#stroke .bg2-lg {background-color:transparent}
#stroke .hide {display:none}

/* --- Handwritten area #drawbox --- */
.writing {border:4px solid #989898;border-radius:16px;max-width:80%;min-height:330px;margin:0 auto}
.switch {width:100%;padding:2rem 0;text-align:center}
.switch button {color:#fff;background-color:#505050;border:1px solid #505050;border-radius:8px;padding:0.25rem 1rem 0.25rem 0.25rem;margin-bottom:0.35rem;vertical-align:middle}
.switch button i {padding:0.25rem;vertical-align:middle}

/* --- navigation visible on mobile only --- */
#navmob button {visibility:hidden}

/* --- Footer --- */
footer h5 {font-size:1rem}
}

/* extra-small-device (mobile vertical, less than 576px）
============================================== */
@media (max-width: 575.98px) {
  nav {background-color:#fff}
  nav ul li {background-color:rgba(204, 204, 204, 0.35);border-bottom:1px solid #fff}
  nav ul li a:link, nav ul a:visited {display:block;padding:10px 12px;text-align:left}
  nav ul li a:hover, nav ul li a:active, nav ul li a:focus {color:#000;display:block;padding:10px 12px;text-align:left;font-weight:700}

/* --- navigation visible on mobile only --- */
#navmob button {visibility:visible;height:auto;margin-top:0}
#navmob button.navbar-toggler, #navmob button.navbar-toggler.collapsed {position:sticky;top:0.5rem;right:1rem}
/* --- logo name --- */
#navmob {color:#000;font-weight:700;font-size:1.25rem;margin-left:0.5rem}
#navmob img {width:26px;height:26px}
#navmob span.red {color:#d12800}
#navmob a, #navmob a:visited {color:#000;text-decoration:none;font-weight:700;font-size:1.25rem}
#navmob a:hover, #navmob a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}
/* --- navigation list --- */
#navbar {font-weight:500;margin-right:1rem}
#navbar a, #navbar a:hover, a:visited {color:#000;text-decoration:none;font-weight:500;font-size:1rem}
#navbar a:hover, #navbar a:hover, a:focus {color:#989898;text-decoration:none;font-weight:500}

.container-fluid, #stroke {padding:0;margin:0}
article .container {padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
#drawbox, #search1, #search2 {margin-right:1rem;margin-left:1rem}
#stroke .col-12 {padding:0}

/* --- white background column (on bg-wave) --- */
.bg-sm-white {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 87%, rgba(255, 255, 255, 0.1));
  margin:0 auto;
}
/* --- search field 1 -long --- */
#search1 .border1 {border:4px solid #989898;border-radius:16px;box-shadow:1px 1px 4px 0px #989898;border-radius:16px;width:100%;margin:0 auto;vertical-align:middle}
#search1 input {font-size:2rem;border:#fff;width:18rem;margin:0 0 3px 0}
ul.list3c {column-count:1}
ul.list4c {column-count:2}

/* --- Handwritten area #drawbox --- */
.writing {border:4px solid #989898;border-radius:16px;max-width:100%;min-height:330px;margin:0 auto}
.switch {width:100%;padding:2rem 0;text-align:center}
.switch button {color:#fff;background-color:#505050;border:1px solid #505050;border-radius:8px;padding:0.25rem 1rem 0.25rem 0.25rem;margin-bottom:0.35rem;vertical-align:middle}
.switch button i {padding:0.25rem;vertical-align:middle}

/* --- column colours --- */
.colpnk {color:#fff;background-color:#d3799e;border:1px solid #fff; border-radius:16px}
.colgrn {color:#fff;background-color:#8ac43f;border:1px solid #fff; border-radius:16px}
.colblu {color:#000;background-color:#76c6da;border:1px solid #fff; border-radius:16px}

/* --- candidates box --- */
.cand_box {background:#fff;border:4px solid #989898;border-radius:16px;padding:1rem 0;margin:0 0.1rem;vertical-align:middle;text-align:center}
.cand_box h5 {font-size:0.9rem;text-align:center}
.cand_box .text-left {text-align:center!important}

/* --- Chart by p #srtoke --- */
#stroke p {display:table;width:100%;font-weight:500;font-size:1.25rem;height:3rem;text-align:center;padding:0;margin-bottom:0;float:left;vertical-align:middle}
#stroke p a, #stroke p a:visited {display:table-cell;width:10%;margin-bottom:0;height:3rem;text-align:center;line-height:1;vertical-align:middle}
#stroke p a:hover, #stroke p a:active, #stroke p a:focus {display:table-cell;width:10%;margin-bottom:0;height:3rem;border-radius:0.35rem;text-align:center;line-height:1;vertical-align:middle}
#stroke .bg1 {background-color:rgba(204, 204, 204, 0.35)}
#stroke .bg2 {background-color:#fff}
#stroke .bg2-lg {background-color:transparent}
#stroke .hide {display:none}

#stroke .colblk {color:#fff;background-color:#000;margin-bottom:2rem;height:auto}
#stroke .colblk a, #stroke .colblk a:visited {display:inline-block;width:6.6667%;height:3rem;text-align:center;line-height:2.5;color:#fff;font-size:1rem;font-weight:700;vertical-align:middle}
#stroke .colblk a:hover, #stroke .colblk a:active, #stroke .colblk a:focus {display:inline-block;width:6.6667%;height:3rem;border-radius:0.35rem;color:#fff;background:#d12800;text-align:center;line-height:2.5;vertical-align:middle}
#stroke span.h5 {font-size:1rem;margin-bottom:2rem}

/* --- bg wave image --- */
.bgwave {display:block;background-image:url(../img/bg-wave-02.gif);background-repeat:no-repeat;background-size:100% auto;background-position:bottom left;padding:0;overflow:hidden}
/* --- wave line --- */
.waveline {display:block;background-image:url(../img/bg-waveline-02.png);background-repeat:repeat-x;background-size:auto 28px;height:28px;margin:0;padding:0;width:100%;overflow:hidden}
/* --- Footer --- */
footer h5 {font-size:1rem}

/* --- "To Top" Button --- */
.arwtop {position:fixed;bottom:2rem;right:42%;margin:0 auto;z-index:200}
.arwtop a, .arwtop a:visited {display:inline-block;position:relative;padding:2.5rem 1rem 0 1rem;margin:0 auto;z-index:201;color:#fff;font-size:1rem;line-height:1.6;text-align:center}
.arwtop a:hover, .arwtop a:active, .arwtop a:focus {background-color:rgba(0, 158, 199, 0.01)}
.arwtop::before {
    position: absolute;
    content: '';
    width: 4rem;
    height: 4rem;
    background: rgba(209, 40, 0, 0.5);
    border-radius: 2rem;
    top: 27.5%;
    left: 0;
    margin-top: -0.5rem;
}
.arwtop::after {
    position: absolute;
    content: '';
    width: 2.25rem;
    height: 2.25rem;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
    left: 0.9rem;
    margin-top: 0;
}
}
/* X-extra-small-device (mobile vertical, less than 480px）
============================================== */
@media (max-width: 479.98px) {
.container-fluid, #stroke {padding:0;margin:0}
article .container {padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
#drawbox, #search1, #search2 {margin-right:1rem;margin-left:1rem}
#stroke .col-12 {padding:0}

/* --- navigation visible on mobile only --- */
#navmob button {visibility:visible;height:auto;margin-top:0}
#navmob button.navbar-toggler, #navmob button.navbar-toggler.collapsed {position:sticky;top:0.5rem;right:1rem}
/* --- logo name --- */
#navmob {display:inline-block;color:#000;font-weight:700;font-size:1rem;margin-left:0.5rem}
#navmob img {width:22px;height:22px}
#navmob span.red {color:#d12800}
#navmob a, #navmob a:visited {color:#000;text-decoration:none;font-weight:700;font-size:1rem}
#navmob a:hover, #navmob a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}
#navbar {margin-right:1rem}

/* --- search field 1 -long --- */
#search1 .border1 {border:4px solid #989898;border-radius:16px;box-shadow:1px 1px 4px 0px #989898;border-radius:16px;width:100%;margin:0 auto;vertical-align:middle}
#search1 input {font-size:1.8rem;border:#fff;width:8rem;margin:6px 0 3px 0}
#search1 h2 .h4 {padding:0}
.randam li {display:inline-block;min-width:5rem}

#search2 {padding:0}
ul.list3c {column-count:1}
ul.list4c {column-count:2}

/* --- on mobile only --- */
#res1 {text-align:center}
#res1 i.ic1, #res1 i.bt-sm1, #res1 i.ic1, #res1 i.bt1 {display:none}
#search4, #extra {text-align:center}
#extra h3.h5 {padding-left:1rem}

/* --- English contents x4 --- */
#more4 {align-items:center;margin:0 auto}
#more4 img {width:140px;height:140px;border-radius:16px}
#more4 h4 .text-start {text-align:center !important}

/* --- #srtoke --- */
#stroke .row {margin:0;padding:0}
/* --- Chart by p #srtoke --- */
#stroke p {display:table;width:100%;font-weight:500;font-size:1.25rem;height:3rem;text-align:center;padding:0;margin:0;float:left}
#stroke p a, #stroke p a:visited {display:table-cell;width:5%;height:3rem;margin:0;text-align:center;line-height:1;vertical-align:middle}
#stroke p a:hover, #stroke p a:active, #stroke p a:focus {display:table-cell;width:5%;height:3rem;margin-bottom:0;border-radius:0.35rem;text-align:center;line-height:1;vertical-align:middle}
#stroke .bg1 {background-color:rgba(204, 204, 204, 0.35)}
#stroke .bg2 {background-color:#fff}
#stroke .bg2-lg {background-color:transparent}
#stroke .hide {display:none}

#stroke .colblk {color:#fff;background-color:#000;margin-bottom:2rem;height:auto}
#stroke .colblk a, #stroke .colblk a:visited {display:inline-block;width:12.5%;height:3rem;text-align:center;line-height:2.5;color:#fff;font-size:1rem;font-weight:700;vertical-align:middle}
#stroke .colblk a:hover, #stroke .colblk a:active, #stroke .colblk a:focus {display:inline-block;width:12.5%;height:3rem;border-radius:0.35rem;color:#fff;background:#d12800;text-align:center;line-height:2.5;vertical-align:middle}
#stroke span.h5 {font-size:1rem;margin-bottom:2rem}

/* --- bg wave image --- */
.bgwave {display:block;background-image:url(../img/bg-wave-02.gif);background-repeat:no-repeat;background-position:bottom left;padding:0}
/* --- wave line --- */
.waveline {display:block;background-image:url(../img/bg-waveline-02.png);background-repeat:repeat-x;background-size:auto 28px;height:28px;margin:0;padding:0;width:100%}
/* --- Footer --- */
footer h5 {font-size:1rem}

/* --- "To Top" Button --- */
.arwtop {position:fixed;bottom:1rem;right:41%;margin:0 auto;z-index:200}
.arwtop a, .arwtop a:visited {display:inline-block;position:relative;padding:2.5rem 1rem 0 1rem;margin:0 auto;z-index:201;color:#fff;font-size:1rem;line-height:1.6;text-align:center}
.arwtop a:hover, .arwtop a:active, .arwtop a:focus {background-color:rgba(0, 158, 199, 0.01)}
.arwtop::before {
    position: absolute;
    content: '';
    width: 4rem;
    height: 4rem;
    background: rgba(209, 40, 0, 0.5);
    border-radius: 2rem;
    top: 27.5%;
    left: 0;
    margin-top: -0.5rem;
}
.arwtop::after {
    position: absolute;
    content: '';
    width: 2.25rem;
    height: 2.25rem;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
    left: 0.9rem;
    margin-top: 0;
}
}
/* XX-extra-small-device (mobile vertical, less than 300px）
============================================== */
@media (max-width: 299.98px) {

/* --- navigation visible on mobile only --- */
#navmob button {visibility:hidden}

/* --- logo name --- */
#navmob {display:inline-block;color:#000;font-weight:700;font-size:1rem;margin-left:0.5rem}
#navmob img {width:16px;height:16px}
#navmob span.red {color:#d12800}
#navmob a, #navmob a:visited {color:#000;text-decoration:none;font-weight:700;font-size:0.9rem}
#navmob a:hover, #navmob a:focus {color:#989898;text-decoration:none;font-weight:700;background:none}

/* --- English contents x4 --- */
#more4 img {width:85px;height:85px;border-radius:16px}
}