@charset "UTF-8";
@import url("fontawesome.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

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

/****************************************
 	mixin								*
*****************************************/
/****************************************
 	keyframes							*
*****************************************/
@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --mainR: 88;
  --mainG: 166;
  --mainB: 45;
  --mainColor: #58a62d;
  --mainColor02: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(88, 166, 45, 0.2));
}

/****************************************
 	基本設定							*
*****************************************/
* {
  box-sizing: border-box;
}

html {
  /* scroll-behavior: smooth; */
  scroll-padding-top: calc(60px + 46.5px + 20px);
  font-size: 13px;
}

body {
  background: url("../images/background.jpg");
  background-size: 10%;
  background-color: #f3f3f4;
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 1rem;
  color: #4c4948;
}
body.classic {
  background-image: none;
  background-color: #000;
}

input, select, textarea, button, option {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 1rem;
  color: #4c4948;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--mainColor);
}
a:hover {
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
}
img.round {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.sp {
  display: none;
}

/****************************************
 	レイアウト							*
*****************************************/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 300px);
  height: 60px;
  z-index: 100;
}

nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  z-index: 200;
}

main {
  max-width: 768px;
  min-height: calc(100vh - 60px - 300px - (30px * 2));
  margin-top: calc(60px + 30px);
  margin-left: calc(((100% - 300px) - 768px) / 2);
}
main.fixed {
  margin-top: calc(60px + 30px + 46.5px);
}
main.fixed #top {
  position: fixed;
  top: 60px;
  width: 100%;
  max-width: 768px;
  padding: 10px;
  z-index: 99;
}
main.fixed #top h1 {
  font-size: 1.25em;
}
main.fixed #top h1 img {
  display: none;
}

#breadcrumbs {
  height: 35px;
  max-width: calc(100% - 300px);
  margin-top: 30px;
}

footer {
  height: 300px;
  max-width: calc(100% - 300px);
  margin-top: 30px;
}

#breadcrumbs + footer {
  margin-top: 0;
}

/****************************************
 	ヘッダー							*
*****************************************/
header {
  padding: 10px 0;
  background-color: #fff;
  -moz-box-shadow: 0 2px 5px #ddd;
  -webkit-box-shadow: 0 2px 5px #ddd;
  box-shadow: 0 2px 5px #ddd;
}
header .warp {
  position: absolute;
  top: 12px;
  left: 12.5px;
}
header .warp a {
  display: inline-block;
}
header .warp a:hover img {
  animation: rotate-anime 5s linear infinite;
}
header .warp a img {
  width: 38px;
  animation: rotate-anime 12.5s linear infinite;
}
header .logo {
  text-align: center;
}
header .logo a h1,
header .logo a p {
  display: inline-block;
}
header .logo a h1 img,
header .logo a p img {
  width: 240px;
}
header .nav {
  display: none;
  position: absolute;
  top: 18px;
  right: 15px;
}
header .nav .btn-trigger {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 26px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  box-sizing: border-box;
}
header .nav .btn-trigger:hover span {
  background-color: #4a4a4a;
}
header .nav .btn-trigger span {
  position: absolute;
  display: inline-block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #2d3748;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  box-sizing: border-box;
}
header .nav .btn-trigger span:nth-of-type(1) {
  top: 0;
}
header .nav .btn-trigger span:nth-of-type(2) {
  top: 11px;
}
header .nav .btn-trigger span:nth-of-type(3) {
  bottom: 0;
}
header .nav .btn-trigger.active span:nth-of-type(1) {
  -moz-transform: translateY(10px) rotate(315deg);
  -ms-transform: translateY(10px) rotate(315deg);
  -webkit-transform: translateY(10px) rotate(315deg);
  transform: translateY(10px) rotate(315deg);
}
header .nav .btn-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
header .nav .btn-trigger.active span:nth-of-type(3) {
  -moz-transform: translateY(-12px) rotate(-315deg);
  -ms-transform: translateY(-12px) rotate(-315deg);
  -webkit-transform: translateY(-12px) rotate(-315deg);
  transform: translateY(-12px) rotate(-315deg);
}

/****************************************
 	ナビゲーション						*
*****************************************/
nav {
  overflow: auto;
  background: url("../images/gr_03.png") 50% 50px/500% no-repeat var(--mainColor);
  opacity: 1;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
nav .search {
  position: relative;
  height: 60px;
  padding: 8px;
  border-bottom: 1px solid #fff;
}
nav .search input[type='text'] {
  width: 100%;
  padding: 10px 20px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
nav .search a {
  position: absolute;
  top: calc((100% - 34px) / 2);
  right: 13px;
  width: 32px;
  height: 32px;
  padding-top: 6px;
  background-color: var(--mainColor);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 1.25em;
  text-align: center;
  color: #fff;
}
nav .main ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
nav .main ul li {
  width: 100%;
}
nav .main ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
nav .main ul li:hover a {
  padding-left: 33px;
  background-color: #fff;
  color: var(--mainColor);
  opacity: 1;
}
nav .main ul li a {
  display: block;
  padding: 16px 0 16px 30px;
  color: #fff;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
nav .main ul li a span {
  display: block;
  margin-bottom: 3px;
  font-size: 0.75em;
  letter-spacing: 1px;
}
nav .special ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
nav .special ul li {
  width: 100%;
}
nav .special ul li:hover a {
  background-color: var(--mainColor);
  border-color: #fff;
  color: #fff;
  opacity: 1;
}
nav .special ul li a {
  display: block;
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--mainColor);
  outline: 1px solid #fff;
  text-align: center;
  font-size: 1.2em;
  color: var(--mainColor);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
nav .special ul li a i {
  margin-right: 8px;
}
nav .sub {
  margin-top: 20px;
}
nav .sub + .sub {
  margin-top: 10px;
}
nav .sub:last-child {
  margin-bottom: 20px;
}
nav .sub ul {
  display: flex;
  flex-wrap: wrap;
}
nav .sub ul li {
  width: 100%;
  padding: 10px 0 10px 30px;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
nav .sub ul li:hover {
  padding-left: 32px;
}
nav .sub ul li a {
  display: inline-block;
  color: #fff;
}
nav .sub ul li a i {
  display: inline-block;
  width: 16px;
  margin-right: 5px;
  text-align: center;
}

/****************************************
 	メイン								*
*****************************************/
main {
  background-color: #fff;
  -moz-box-shadow: 2px 2px 5px #ddd;
  -webkit-box-shadow: 2px 2px 5px #ddd;
  box-shadow: 2px 2px 5px #ddd;
}
main .row {
  display: flex;
  gap: 20px;
}
main .row + .row {
  margin-top: -10px;
}
main .row article {
  width: 100%;
}
main .row article.col12 {
  width: 100%;
}
main .row article.col11 {
  width: 91.6667%;
}
main .row article.col10 {
  width: 83.3333%;
}
main .row article.col9 {
  width: 75%;
}
main .row article.col8 {
  width: 66.6667%;
}
main .row article.col7 {
  width: 58.3333%;
}
main .row article.col6 {
  width: 50%;
}
main .row article.col5 {
  width: 41.6667%;
}
main .row article.col4 {
  width: 33.3333%;
}
main .row article.col3 {
  width: 25%;
}
main .row article.col2 {
  width: 16.6667%;
}
main .row article.col1 {
  width: 8.33333%;
}
main section {
  position: relative;
}
main section + section {
  padding-top: 0 !important;
}
main section.full {
  padding: 0;
}
main section .flex {
  display: flex;
  flex-wrap: wrap;
}
main section .flex div.col12 {
  width: 100%;
}
main section .flex div.col11 {
  width: 91.6667%;
}
main section .flex div.col10 {
  width: 83.3333%;
}
main section .flex div.col9 {
  width: 75%;
}
main section .flex div.col8 {
  width: 66.6667%;
}
main section .flex div.col7 {
  width: 58.3333%;
}
main section .flex div.col6 {
  width: 50%;
}
main section .flex div.col5 {
  width: 41.6667%;
}
main section .flex div.col4 {
  width: 33.3333%;
}
main section .flex div.col3 {
  width: 25%;
}
main section .flex div.col2 {
  width: 16.6667%;
}
main section .flex div.col1 {
  width: 8.33333%;
}
main section .action {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}
main section .action a[data-action='modal'] {
  position: absolute;
  right: 0;
}
main section .paginator {
  margin-top: 20px;
}
main section .paginator ul {
  display: flex;
  justify-content: center;
}
main section .paginator ul li {
  margin-left: -1px;
  background-color: #fcfcfc;
  border: 1px solid #dee2e6;
}
main section .paginator ul li:hover {
  background-color: #f0f0f0;
}
main section .paginator ul li:first-child {
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
main section .paginator ul li:last-child {
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
main section .paginator ul li.disabled {
  background-color: #fff;
  border-color: #dee2e6;
}
main section .paginator ul li.disabled a {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
}
main section .paginator ul li.current {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
}
main section .paginator ul li.current a {
  color: #fff;
}
main section .paginator ul li a {
  display: inline-block;
  padding: 12px 14px;
  color: var(--mainColor);
}
main section table .paginator {
  margin-top: 0;
}
main section h2 + p.lead,
main section h3 + p.lead {
  margin-top: 0;
}
main section p.lead {
  margin-top: 10px;
  padding: 10px;
  background-color: #ffffdf;
  line-height: 1.5em;
}
main section h3 + p.explain,
main section h2 + p.explain {
  margin-top: 0;
}
main section > p.explain {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  font-size: 0.9em;
  line-height: 1.5em;
}
main section .big {
  font-size: 1.3em;
}
main section .red {
  color: #e30;
}
main section .bold {
  font-weight: bold;
}
main #top {
  position: relative;
  padding: 20px;
  background: url("../images/gr_03.png") 50% 53%/125% no-repeat rgba(0, 0, 0, 0.8);
}
main #top.open a.down {
  display: none;
}
main #top.open ul {
  display: flex;
}
main #top h1 {
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: #eee;
}
main #top h1 img {
  display: block;
  height: 64px;
  margin: 0 auto 5px;
}
main #top h1 img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
main #top h1 span {
  display: block;
  margin-top: 5px;
  font-size: 0.5em;
  font-weight: normal;
}
main #top h1 a.down {
  position: absolute;
  right: 15px;
  top: 30%;
  color: #fff;
}
main #top ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  padding: 15px 10px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid #fff;
}
main #top ul li {
  width: calc((100% - (5px * 2)) / 3);
}
main #top ul li a {
  /* scroll-behavior: smooth; */
  display: block;
  padding: 10px;
  text-align: left;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #fff;
  color: #fff;
}
main #top ul li a i {
  margin-right: 5px;
}
main h2 {
  margin-bottom: 20px;
  padding-left: 12px;
  background-color: #F8F8F8;
  border-left: 4px solid var(--mainColor);
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 37px;
  text-shadow: 1px 1px #ddd;
}
main h2#rarity1 {
  border-left-color: #51cc54;
}
main h2#rarity2 {
  border-left-color: #4fa5e6;
}
main h2#rarity3 {
  border-left-color: #b762bb;
}
main h2#rarity4 {
  border-left-color: #f4c26d;
}
main h2#rarity5 {
  border-left-color: #e7e9e8;
}
main h2#rarity6 {
  border-left-color: #f3e86a;
}
main h2#rarity7 {
  border-left-color: #90ffe9;
}
main h2#lineage1 {
  border-left-color: #037bcc;
}
main h2#lineage2 {
  border-left-color: #d72f13;
}
main h2#lineage3 {
  border-left-color: #248a06;
}
main h2#lineage4 {
  border-left-color: #be6d01;
}
main h2#lineage5 {
  border-left-color: #6e47af;
}
main h2#lineage6 {
  border-left-color: #6e47af;
}
main h2#lineage7 {
  border-left-color: #ab458f;
}
main h2#lineage8 {
  border-left-color: #e4b900;
}
main h2#lineage9 {
  border-left-color: #c4cdd4;
}
main h2#attribute1 {
  border-left-color: #fe5e58;
}
main h2#attribute2 {
  border-left-color: #fcb159;
}
main h2#attribute3 {
  border-left-color: #2ba7fd;
}
main h2#attribute4 {
  border-left-color: #05cd61;
}
main h2#attribute5 {
  border-left-color: #f8ee61;
}
main h2#attribute6 {
  border-left-color: #ffff48;
}
main h2#attribute7 {
  border-left-color: #a85ca9;
}
main h2 img {
  width: 20px;
  margin-right: 2px;
  vertical-align: sub;
}
main h2 i {
  margin-right: 5px;
}
main h2 span {
  font-size: 0.6em;
  float: right;
  margin-right: 10px;
  line-height: 3.8em;
  font-weight: normal;
}
main h3 {
  margin-bottom: 15px;
  padding-bottom: 8px;
  padding-left: 8px;
  background: var(--mainColor02);
  font-size: 1.1rem;
  font-weight: bold;
  color: #666;
  text-shadow: 2px 2px #fff;
}
main h3:not(:first-child) {
  margin-top: 20px;
}
main h3 i {
  margin-right: 5px;
}
main h3 img {
  height: 16px;
  vertical-align: top;
  margin-right: 5px;
}
main h3 span {
  font-size: 0.7em;
  float: right;
  margin-right: 10px;
  line-height: 2.25em;
  font-weight: normal;
}

body.classic main {
  background-color: transparent;
  box-shadow: none;
}
body.classic main #top {
  background-color: #000;
  border: 4px solid #fff;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px;
  border-radius: 10px 10px 0 0;
}
body.classic main .row {
  background-color: #000;
  border: 4px solid #fff;
  border-top: none;
}
body.classic main .row:last-of-type {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0;
  border-radius: 0 0 10px 10px;
}
body.classic main.fixed:before {
  content: "";
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 18px;
  background-color: #000;
  z-index: 98;
}
body.classic main.fixed #top {
  top: calc(60px + 10px);
}

/****************************************
 	セクション（お知らせ）				*
*****************************************/
section.news {
  padding: 20px;
}
section.news .list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
section.news .list.allshow dl:nth-child(n+4) {
  display: flex;
}
section.news .list dl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
section.news .list dl:not(:last-child) {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 10px;
}
section.news .list dl:nth-child(n+4) {
  display: none;
}
section.news .list dl dt {
  display: flex;
  align-items: center;
  gap: 10px;
}
section.news .list dl dt span.date {
  width: 38px;
  font-size: 0.9em;
  text-align: center;
  color: #999;
}
section.news .list dl dt span.date span.new {
  display: inline-block;
  padding: 3px 5px;
  background-color: #e30;
  font-size: 0.8em;
  color: #fff;
}
section.news .list dl dt span.category {
  display: inline-block;
  padding: 3px 4px;
  font-size: 0.75em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
section.news .list dl dt span.category.underworld {
  border: 1px solid #0c1532;
  color: #0c1532;
}
section.news .list dl dt span.category.primary {
  background-color: #4c4948;
  border-color: #4c4948 #4c4948 #4c4915;
  color: #fff;
}
section.news .list dl dt span.category.success {
  background-color: #5ab75a;
  border-color: #5ab75a #5ab75a #5ab727;
  color: #fff;
}
section.news .list dl dt span.category.info {
  background-color: #5bc0de;
  border-color: #5bc0de #5bc0de #5bc0ab;
  color: #fff;
}
section.news .list dl dt span.category.warning {
  background-color: #ed9c28;
  border-color: #ed9c28 #ed9c28 #ed9c00;
  color: #fff;
}
section.news .list dl dt span.category.danger {
  background-color: #d2322d;
  border-color: #d2322d #d2322d #d23200;
  color: #fff;
}
section.news .list dl dt span.category.inverse {
  background-color: #171717;
  border-color: #171717 #171717 #171700;
  color: #fff;
}
section.news .list dl dt span.category.clear {
  background-color: #edf2f7;
  border-color: #edf2f7 #edf2f7 #edf2c4;
  color: #999;
}
section.news .list dl dd a {
  color: #666;
  border-bottom: 1px dashed #666;
}
section.news .list dl dd a i {
  margin-left: 3px;
}

/****************************************
 	セクション（メニュー）				*
*****************************************/
section.menu {
  padding: 20px;
}
section.menu .box.short ul li {
  width: calc((100% - (3px * 3)) / 4);
}
section.menu .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
section.menu .box ul li {
  display: flex;
  width: calc((100% - (3px * 2)) / 3);
}
section.menu .box ul li.off a {
  background-color: #ccc;
  pointer-events: none;
}
section.menu .box ul li a {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 7px;
  width: 100%;
  padding: 17px 0;
  background: url("../images/gr_03.png") 50% 66% no-repeat var(--mainColor);
  font-size: 1.1em;
  white-space: pre;
  color: #fff;
}
section.menu .box ul li a.front {
  background-color: #58a62d;
}
section.menu .box ul li a.underworld {
  background-color: #0c1532;
}
section.menu .box ul li a i {
  display: block;
  font-size: 1.5em;
}
section.menu .box ul li a img {
  display: block;
  width: 24px;
}
section.menu .box ul li a span.yet {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  background-color: #e30;
  border-radius: 3px;
  border: 1px solid #fff;
  font-size: 0.7em;
}

/****************************************
 	セクション（バナー）				*
*****************************************/
section.banner {
  padding: 20px;
}
section.banner.half .box ul li {
  width: calc((100% - 10px) / 2);
}
section.banner.one .box ul li {
  width: 100%;
}
section.banner .box ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
section.banner .box ul li {
  width: calc((100% - (10px * 2)) / 3);
  padding: 2px;
  border: 1px solid #ccc;
}
section.banner .box ul li a {
  position: relative;
}
section.banner .box ul li a p {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #333;
  font-size: 0.8em;
  line-height: 1.2em;
  text-align: center;
  color: #fff;
}
section.banner .box ul li a span.new {
  margin-left: 5px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #e30;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-size: 0.8em;
  vertical-align: top;
}
section.banner .box ul li img {
  display: block;
  width: 100%;
}
section.banner .box ul li img.wide {
  object-fit: cover;
  aspect-ratio: 16/9;
}
section.banner .box ul li img.wide.top {
  object-position: top;
}

/****************************************
 	セクション（キーワード検索）		*
*****************************************/
section.keyword {
  padding: 20px 20px;
  background-color: var(--mainColor);
}
section.keyword .form dl {
  width: 100%;
}
section.keyword .form dl dd .search {
  position: relative;
  height: 60px;
  padding: 8px;
}
section.keyword .form dl dd .search input[type='text'] {
  width: 100%;
  padding: 10px 20px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  font-size: 1.25em;
}
section.keyword .form dl dd .search a {
  position: absolute;
  top: calc((100% - 34px) / 2);
  right: 15px;
  width: 36px;
  height: 36px;
  padding-top: 8px;
  background-color: var(--mainColor);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 1.4em;
  text-align: center;
  color: #fff;
}

/****************************************
 	セクション（検索）					*
*****************************************/
section.search {
  margin-bottom: 20px;
  padding: 25px 35px;
  background-color: #f8f8f8;
}
section.search .form {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
section.search .form dl {
  width: 100%;
}
section.search .form dl.col8 {
  width: calc((100% - (10px)) / 3 * 2);
}
section.search .form dl.col6 {
  width: calc((100% - (20px * 1)) / 2);
}
section.search .form dl.col4 {
  width: calc((100% - (20px * 2)) / 3);
}
section.search .form dl.col3 {
  width: calc((100% - (20px * 3)) / 4);
}
section.search .form dl dt {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b7b7b7;
  font-weight: bold;
  font-size: 1.15em;
}
section.search .form dl dt.icon img {
  width: 24px;
  margin-right: 5px;
  vertical-align: text-bottom;
}
section.search .form dl dt span {
  float: right;
  font-size: 0.7em;
  font-weight: normal;
  line-height: 2em;
  color: #666;
}
section.search .form dl dd .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
section.search .form dl dd .flex.long > * {
  width: calc((100% - (5px * 2)) / 3);
}
section.search .form dl dd .flex > * {
  width: calc((100% - (5px * 3)) / 4);
  white-space: nowrap;
}
section.search .form dl dd .separator {
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px dashed #ddd;
}
section.search .form dl dd .center {
  justify-content: center;
}
section.search .form dl dd .area {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
section.search .form dl dd .area > * {
  width: calc((100% - (5px * 9)) / 10);
  max-width: 66px;
  white-space: nowrap;
}
section.search .form dl dd .area > * img {
  display: block;
}
section.search .form dl dd .candidate {
  margin-top: 10px;
  padding: 0 5px;
}
section.search .form dl dd .candidate ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;
}
section.search .form dl dd .candidate ul li a {
  padding-bottom: 2px;
  border-bottom: 1px dashed #ccc;
  font-size: 0.9em;
  color: #999;
}
section.search .form dl dd .candidate ul li a i {
  margin-right: 3px;
}
section.search .form dl dd .banner ul {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
section.search .form dl dd .banner ul li {
  width: calc((100% - (5px * 2)) / 3);
  padding: 2px;
  background-color: #fff;
  border: 1px solid #ccc;
}
section.search .form dl dd .banner ul li img {
  display: block;
  width: 100%;
}
section.search .form dl dd .banner ul li img.wide {
  object-fit: cover;
  aspect-ratio: 16/9;
}

#modal section.search .form dl dd label {
  overflow: hidden;
}
#modal section.search .form dl dd label b {
  white-space: pre;
  padding-right: 20px;
  vertical-align: text-top;
}

/****************************************
 	セクション（該当なし）				*
*****************************************/
section.nodata {
  padding: 20px;
}
section.nodata .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #f5f5f5;
}
section.nodata .box > i {
  display: inline-block;
  font-size: 3em;
  color: #aaa;
}
section.nodata .box p {
  line-height: 1.4em;
  text-align: center;
  color: #999;
}
section.nodata .box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
section.nodata .box ul li a i {
  margin-right: 5px;
}
section.nodata .box > a {
  display: inline-block;
}

/****************************************
 	セクション（動画）					*
*****************************************/
section.movie {
  padding: 20px;
}
section.movie.half .box ul li {
  width: calc((100% - 10px) / 2);
}
section.movie.one .box ul li {
  width: 100%;
}
section.movie .box ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
section.movie .box ul li {
  width: calc((100% - (10px * 2)) / 3);
  padding: 2px;
  border: 1px solid #ccc;
}
section.movie .box ul li a {
  position: relative;
  display: block;
}
section.movie .box ul li a p {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #333;
  font-size: 0.8em;
  line-height: 1.2em;
  text-align: center;
  color: #fff;
}
section.movie .box ul li a p span.new {
  margin-left: 5px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #e30;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-size: 0.8em;
  vertical-align: top;
}
section.movie .box ul li a > img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}
section.movie .box ul li a > span.channel {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10%;
}
section.movie .box ul li a > span.channel img {
  object-fit: cover;
  aspect-ratio: 1/1;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #fff;
}

/****************************************
 	セクション（ブロック）				*
*****************************************/
section.block {
  padding: 20px;
}
section.block + section.block {
  padding-top: 0;
}
section.block .box + .box {
  margin-top: 15px;
}
section.block .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
section.block .box ul li {
  width: calc((100% - (9px * 3)) / 10);
}
section.block .box ul li a {
  position: relative;
  display: block;
}
section.block .box ul li a img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}
section.block .box ul li a img.circle {
  border: 1px solid #eee;
}
section.block .box ul li a img.round + span.new {
  top: 0;
  right: 0;
}
section.block .box ul li a span.new {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 2px 3px;
  background-color: #e30;
  font-size: 0.75em;
  color: #fff;
}

/****************************************
 	セクション（チェック）				*
*****************************************/
section.check {
  padding: 20px;
}
section.check.equipment .box ul li div.icon.checked {
  background-color: #666;
}
section.check.equipment .box ul li div.icon.checked:after {
  content: "所持";
  background-color: rgba(0, 0, 0, 0.75);
}
section.check.equipment .box ul li div.icon.checked img {
  opacity: 0.5;
}
section.check + section.check {
  padding-top: 0;
}
section.check .box + .box {
  margin-top: 15px;
}
section.check .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
section.check .box ul li {
  width: calc((100% - (9px * 2)) / 10);
}
section.check .box ul li div.icon {
  cursor: pointer;
  padding: 2px;
  /*
  opacity: 0.85;
  &:hover{
  	opacity: 1;
  }
  */
}
section.check .box ul li div.icon.checked {
  position: relative;
  background-color: #e30;
  /* opacity: 1; */
}
section.check .box ul li div.icon.checked:after {
  content: "選択中";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px;
  background-color: rgba(255, 0, 0, 0.75);
  text-align: center;
  font-size: 0.7em;
  color: #fff;
}
section.check .box ul li div.icon img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}

/****************************************
 	セクション（選択）					*
*****************************************/
section.select {
  position: fixed;
  left: calc(((100% - 300px) - 768px) / 2);
  bottom: 0;
  width: 100%;
  max-width: 768px;
  padding: 20px;
  background: url("../images/overlay90.png");
}
section.select.static {
  position: relative;
  left: initial;
  margin-top: 20px;
}
section.select .menu {
  position: absolute;
  top: -25px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
}
section.select .menu .switch ul {
  display: flex;
  gap: 2px;
}
section.select .menu .switch ul li a.button {
  padding: 2px 5px;
  font-size: 0.9em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #fff;
}
section.select .box {
  margin-bottom: 10px;
}
section.select .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
section.select .box ul:empty:before {
  content: "なかまを選択してください";
  display: flex;
  align-items: center;
  margin: auto;
  min-height: 58.35px;
  text-align: center;
  font-size: 1.25em;
  color: #fff;
}
section.select .box ul:has(:nth-child(11)) li {
  width: calc((100% - (10 * 2px)) / 11);
}
section.select .box ul:has(:nth-child(24)) li {
  width: calc((100% - (11 * 2px)) / 12);
}
section.select .box ul:has(:nth-child(39)) li {
  width: calc((100% - (12 * 2px)) / 13);
}
section.select .box ul:has(:nth-child(56)) li {
  width: calc((100% - (13 * 2px)) / 14);
}
section.select .box ul:has(:nth-child(75)) li {
  width: calc((100% - (14 * 2px)) / 15);
}
section.select .box ul:has(:nth-child(96)) li {
  width: calc((100% - (15 * 2px)) / 16);
}
section.select .box ul:has(:nth-child(119)) li {
  width: calc((100% - (16 * 2px)) / 17);
}
section.select .box ul:has(:nth-child(144)) li {
  width: calc((100% - (17 * 2px)) / 18);
}
section.select .box ul:has(:nth-child(171)) li {
  width: calc((100% - (18 * 2px)) / 19);
}
section.select .box ul:has(:nth-child(200)) li {
  width: calc((100% - (19 * 2px)) / 20);
}
section.select .box ul li {
  width: calc((100% - (9 * 2px)) / 10);
}
section.select .box ul li div.icon {
  position: relative;
  cursor: pointer;
  padding: 2px;
}
section.select .box ul li div.icon:before {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  display: inline-block;
  right: -5px;
  top: -5px;
  width: 30%;
  max-width: 20px;
  height: 30%;
  background: url("../images/remove.png") no-repeat;
  background-size: 100%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
section.select .box ul li div.icon img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}
section.select .action {
  margin-top: 0;
}
section.select .action .weight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #fff;
  color: #fff;
}
section.select .action .weight span {
  font-size: 0.75em;
}
section.select .action .weight p {
  font-size: 1.25em;
}
section.select .action .button {
  min-width: auto;
}

/****************************************
 	セクション（比較）					*
*****************************************/
section.compare .scroll {
  overflow-x: auto;
}
section.compare table thead tr th, section.compare table tbody tr th {
  min-width: 100px;
  font-weight: bold;
  position: sticky;
  left: -1px;
}
section.compare table thead tr td, section.compare table tbody tr td {
  max-width: 83px;
  min-width: 83px;
}
section.compare table thead tr th, section.compare table thead tr td, section.compare table tbody tr th, section.compare table tbody tr td {
  border: 1px solid #eee;
  text-align: center;
}
section.compare table thead tr th p, section.compare table thead tr td p, section.compare table tbody tr th p, section.compare table tbody tr td p {
  font-size: 0.9em;
}
section.compare table thead tr th p.ranking, section.compare table thead tr td p.ranking, section.compare table tbody tr th p.ranking, section.compare table tbody tr td p.ranking {
  margin-top: 3px;
  color: #999;
  font-size: 0.7em;
}
section.compare table thead tr th img.icon, section.compare table thead tr td img.icon, section.compare table tbody tr th img.icon, section.compare table tbody tr td img.icon {
  width: 16px;
}
section.compare table thead tr th, section.compare table thead tr td {
  background-color: #f5f5f5;
}
section.compare table thead tr th p {
  margin-top: 3px;
}
section.compare table thead tr td {
  padding: 10px;
}
section.compare table thead tr td p {
  margin-top: 8px;
}
section.compare table thead tr td p a.button {
  padding: 2px 7px;
}
section.compare table tbody tr:nth-child(odd) th, section.compare table tbody tr:nth-child(odd) td {
  background-color: #fff;
}
section.compare table tbody tr:nth-child(even) th, section.compare table tbody tr:nth-child(even) td {
  background-color: #f5f5f5;
}
section.compare table tbody tr.separator th {
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #ddd !important;
}
section.compare table tbody tr.blank th {
  display: none;
  padding: 0;
  border: none;
}
section.compare table tbody tr th, section.compare table tbody tr td {
  padding-top: 10px;
  padding-bottom: 10px;
}
section.compare table tbody tr td:empty:before {
  content: "--";
  font-size: 0.85em;
  color: #ccc;
}
section.compare table tbody tr td span[class^='rint'] {
  display: inline-block;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  text-shadow: 1.5px 1.5px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000,1px 0 1px #000,0 1px 1px #000,-1px 0 1px #000,0 -1px 1px #000;
  letter-spacing: 2px;
  color: #ffffff;
}
section.compare table tbody tr td span[class^='rint'].rint0 {
  color: #ffffff;
}
section.compare table tbody tr td span[class^='rint'].rint25, section.compare table tbody tr td span[class^='rint'].rint50 {
  color: #e6e6fa;
}
section.compare table tbody tr td span[class^='rint'].rint150, section.compare table tbody tr td span[class^='rint'].rint200 {
  color: #ffd803;
}

main.fixed section.compare {
  margin-top: calc(60px + 30px);
}
main.fixed section.compare thead {
  position: fixed;
  top: calc(60px + 46.5px);
  z-index: 1;
  overflow: auto;
  left: calc(((100% - 300px) - 768px) / 2);
  right: calc(((100% + 300px) - 768px) / 2);
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: 2px solid #ddd;
}

/****************************************
 	セクション（リスト）				*
*****************************************/
section.list {
  padding: 20px;
}
section.list + section.block {
  padding-top: 0;
}
section.list table {
  width: 100%;
  color: #4b4949;
}
section.list table caption {
  padding: 10px;
  background-color: #edf2f7;
  border: 1px solid #dee2e6;
  border-width: 1px 1px 0 1px;
  font-weight: bold;
}
section.list table th.sp, section.list table td.sp {
  display: none;
}
section.list table thead th, section.list table thead td,
section.list table tbody th,
section.list table tbody td {
  padding: 12px;
  border: 1px solid #dee2e6;
  line-height: 1.4em;
  word-wrap: anywhere;
}
section.list table thead th.check, section.list table thead td.check,
section.list table tbody th.check,
section.list table tbody td.check {
  padding: 0 5px;
  text-align: center;
}
section.list table thead th.check label.radio,
section.list table thead th.check label.checkbox, section.list table thead td.check label.radio,
section.list table thead td.check label.checkbox,
section.list table tbody th.check label.radio,
section.list table tbody th.check label.checkbox,
section.list table tbody td.check label.radio,
section.list table tbody td.check label.checkbox {
  line-height: 1.5;
}
section.list table thead th.check label.radio span,
section.list table thead th.check label.checkbox span, section.list table thead td.check label.radio span,
section.list table thead td.check label.checkbox span,
section.list table tbody th.check label.radio span,
section.list table tbody th.check label.checkbox span,
section.list table tbody td.check label.radio span,
section.list table tbody td.check label.checkbox span {
  width: 20px;
  height: 20px;
  font-size: 13px;
}
section.list table thead th.tl, section.list table thead td.tl,
section.list table tbody th.tl,
section.list table tbody td.tl {
  padding-right: 0;
  text-align: left;
}
section.list table thead th.tc, section.list table thead td.tc,
section.list table tbody th.tc,
section.list table tbody td.tc {
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}
section.list table thead th.tr, section.list table thead td.tr,
section.list table tbody th.tr,
section.list table tbody td.tr {
  padding-left: 0;
  text-align: right;
}
section.list table thead tr {
  background-color: #f5f5f5;
}
section.list table thead th {
  font-weight: bold;
  color: #292828;
}
section.list table thead th a {
  color: #292828;
}
section.list table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}
section.list table tbody tr[data-href]:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
section.list table tbody tr.none {
  background-color: #fffaeb;
}
section.list table tbody tr.none td {
  padding: 30px;
}
section.list table tbody tr.checked {
  background-color: #ccc;
  color: #fff;
}
section.list table tbody tr.checked td.name {
  position: relative;
}
section.list table tbody tr.checked td.name:before {
  content: "入手済";
  position: absolute;
  top: 30%;
  left: 48.5%;
  display: block;
  padding: 0 5px;
  background-color: #fff;
  border: 2px solid #e30;
  font-size: 0.8em;
  text-align: center;
  color: #e30;
}
section.list table tbody tr.checked td p {
  color: #fff;
}
section.list table tbody td {
  position: relative;
}
section.list table tbody td:empty:before {
  content: "--";
  font-size: 0.85em;
  color: #ccc;
}
section.list table tbody td.yet {
  background-color: #e30;
}
section.list table tbody td.minus {
  color: #e30;
}
section.list table tbody td.minus p {
  color: #e30;
}
section.list table tbody td.nolink select {
  padding: 6px 9px;
}
section.list table tbody td.thumbnail {
  padding: 6px;
}
section.list table tbody td.thumbnail a {
  position: relative;
  display: block;
}
section.list table tbody td.thumbnail a img {
  vertical-align: middle;
}
section.list table tbody td.thumbnail a img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
section.list table tbody td.thumbnail a img.round + span.new {
  top: 0;
  right: 0;
}
section.list table tbody td.thumbnail a span.new {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 2px 3px;
  background-color: #e30;
  font-size: 0.75em;
  line-height: 1em;
  color: #fff;
}
section.list table tbody td.check input[type='checkbox'] {
  width: 32px;
  height: 32px;
}
section.list table tbody td p {
  font-size: 0.75em;
  line-height: 1.25em;
  color: #999;
}
section.list table tbody td > span.new {
  padding: 0 3px;
  background-color: #e30;
  font-size: 0.7em;
  color: #fff;
}
section.list table tbody td span.unit {
  margin-left: 3px;
  vertical-align: bottom;
  font-size: 0.85em;
  color: #999;
}
section.list table tbody td .button {
  padding: 4px 7px;
}
section.list table tbody td .memo {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;
  background-color: #ffe;
  border: 1px dotted #999;
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
section.list table tbody td .memo:first-child {
  margin-top: 0;
}
section.list table tbody td .memo:last-child {
  margin-bottom: 0;
}
section.list table tbody td ul.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
section.list table tbody td ul.tag li {
  display: inline-block;
  padding: 0 2px;
  background-color: #eee;
  border: 1px solid #ccc;
  font-size: 0.7em;
  line-height: 1.6em;
  color: #666;
}
section.list table tbody td ul.character {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 500px;
}
section.list table tbody td ul.character li {
  width: calc((100% - 9 * 2px) / 10);
  max-width: 48px;
}
section.list table tbody td ul.character li.thinly {
  opacity: 0.33;
}
section.list table tbody td ul.character li img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}
section.list table tbody td ul.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}
section.list table tbody td ul.icons li a {
  display: block;
}
section.list table tbody td ul.icons li a img {
  display: block;
  width: 32px;
  height: 32px;
}
section.list table tbody td img.banner {
  width: 100%;
  margin-top: 5px;
  padding: 1px;
  border: 1px solid #ccc;
}
section.list table tbody td span.rest {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 5px;
  background-color: #e30;
  font-size: 0.9em;
  color: #fff;
}
section.list table tbody + tfoot td {
  padding-top: 20px;
}
section.list table tfoot:first-child td {
  padding-top: 0;
}
section.list table tfoot td {
  padding-top: 20px;
}
section.list table tfoot td:empty {
  padding-top: 0;
}
section.list table tfoot td.pt10 {
  padding-top: 10px;
}
section.list table tfoot td .input-group {
  max-width: none;
}
section.list table tfoot td input[type='text'],
section.list table tfoot td input[type='email'],
section.list table tfoot td input[type='number'],
section.list table tfoot td input[type='tel'],
section.list table tfoot td input[type='url'],
section.list table tfoot td input[type='password'],
section.list table tfoot td input[type='file'],
section.list table tfoot td textarea,
section.list table tfoot td select {
  max-width: none;
}
section.list table tfoot td p.explain {
  margin-bottom: 10px;
  font-size: 0.8em;
  color: #999;
}
section.list table tfoot td span.unit {
  margin-left: 3px;
  vertical-align: bottom;
  font-size: 0.85em;
  color: #999;
}
section.list table tfoot td .link {
  text-align: center;
}
section.list table tfoot td .link a {
  display: inline-block;
}

/****************************************
 	セクション（対戦カード）			*
*****************************************/
section.versus {
  padding: 20px;
}
section.versus .box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
section.versus .box ul li {
  display: flex;
  gap: 10px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
}
section.versus .box ul li .left,
section.versus .box ul li .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 43%;
  padding-top: 10px;
  padding-bottom: 10px;
}
section.versus .box ul li .left .emblem,
section.versus .box ul li .right .emblem {
  display: block;
  max-width: 48px;
  width: 20%;
}
section.versus .box ul li .left .guild,
section.versus .box ul li .right .guild {
  text-align: center;
  word-break: break-all;
  font-size: 0.9em;
}
section.versus .box ul li .left .summary,
section.versus .box ul li .right .summary {
  font-size: 0.8em;
  color: #999;
}
section.versus .box ul li .left .result,
section.versus .box ul li .right .result {
  width: 25%;
}
section.versus .box ul li .left .result img,
section.versus .box ul li .right .result img {
  display: block;
}
section.versus .box ul li .vs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 14%;
}
section.versus .box ul li .vs img {
  display: block;
  width: 100%;
}
section.versus .box ul li .vs img.vs {
  max-width: 64px;
}
section.versus .box ul li .vs p.diff {
  margin-top: 3px;
  font-size: 0.7em;
  font-weight: bold;
  color: #e30;
}

/****************************************
 	セクション（カード）				*
*****************************************/
section.card {
  padding: 20px;
}
section.card .box.slim ul li a {
  flex-direction: row;
  justify-content: left;
}
section.card .box.slim ul li a .guild {
  text-align: left;
}
section.card .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
section.card .box ul li {
  width: calc((100% - 10px * 2) / 3);
}
section.card .box ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
}
section.card .box ul li a .emblem {
  display: block;
  max-width: 48px;
  width: 20%;
}
section.card .box ul li a .guild {
  text-align: center;
  word-break: break-all;
  font-size: 0.9em;
  line-height: 1.2em;
}
section.card .box ul li a .summary {
  display: block;
  font-size: 0.8em;
  color: #999;
}

/****************************************
 	セクション（カレンダー）			*
*****************************************/
section.calendar {
  padding: 20px;
}
section.calendar table {
  width: 100%;
}
section.calendar table caption {
  padding: 10px;
  background-color: var(--mainColor);
  text-align: center;
  font-size: 1.25em;
  color: #fff;
}
section.calendar table th, section.calendar table td {
  text-align: center;
  width: calc(100% / 7);
  border: 1px solid #eee;
  padding: 10px 0;
}
section.calendar table th.sun span.day, section.calendar table td.sun span.day {
  color: #e30;
}
section.calendar table th.sat span.day, section.calendar table td.sat span.day {
  color: #30e;
}
section.calendar table thead tr {
  background-color: #ddd;
}
section.calendar table thead th {
  font-weight: bold;
}
section.calendar table tbody tr {
  height: 73px;
}
section.calendar table tbody tr:nth-child(odd) {
  background-color: #fcfcfc;
}
section.calendar table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
section.calendar table tbody td {
  position: relative;
  vertical-align: top;
}
section.calendar table tbody td.today {
  background-color: #e302;
}
section.calendar table tbody td.today span.day {
  padding-left: 5px;
  padding-right: 5px;
  background-color: #e30;
  color: #fff;
}
section.calendar table tbody td span.day {
  font-size: 0.9em;
}
section.calendar table tbody td ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 2px 0;
}
section.calendar table tbody td ul li a {
  display: block;
  padding: 7px 5px;
  background-color: var(--mainColor);
  font-size: 0.9em;
  line-height: 1.5em;
  color: #fff;
}
section.calendar table tbody td ul li a.blank {
  opacity: 0.15;
}

/****************************************
 	セクション（詳細）					*
*****************************************/
section.detail {
  padding: 20px;
}
section.detail .column {
  display: flex;
  flex-wrap: wrap;
}
section.detail .column + .column {
  margin-top: -1px;
}
section.detail .column.full dl {
  width: 100%;
}
section.detail .column.full dl:nth-child(-n+4) {
  border-top: none;
}
section.detail .column.full dl:nth-child(-n+1) {
  border-top: 1px solid #ddd;
}
section.detail .column.full dl:nth-child(4n) {
  border-right: none;
}
section.detail .column.full dl:nth-child(1n), section.detail .column.full dl:last-child {
  border-right: 1px solid #ddd;
}
section.detail .column.full dl dt, section.detail .column.full dl dd {
  text-align: left;
}
section.detail .column.full dl dt {
  padding-left: 10px;
  padding-right: 10px;
}
section.detail .column.full dl dd {
  padding-left: 12px;
  padding-right: 12px;
  align-items: start;
}
section.detail .column.half dl {
  width: 50%;
}
section.detail .column.half dl:nth-child(-n+4) {
  border-top: none;
}
section.detail .column.half dl:nth-child(-n+2) {
  border-top: 1px solid #ddd;
}
section.detail .column.half dl:nth-child(4n) {
  border-right: none;
}
section.detail .column.half dl:nth-child(2n), section.detail .column.half dl:last-child {
  border-right: 1px solid #ddd;
}
section.detail .column.long dl {
  width: 33.33333%;
}
section.detail .column.long dl:nth-child(-n+4) {
  border-top: none;
}
section.detail .column.long dl:nth-child(-n+3) {
  border-top: 1px solid #ddd;
}
section.detail .column.long dl:nth-child(4n) {
  border-right: none;
}
section.detail .column.long dl:nth-child(3n), section.detail .column.long dl:last-child {
  border-right: 1px solid #ddd;
}
section.detail .column dl {
  display: flex;
  flex-direction: column;
  width: 25%;
  background-color: #fcfcfc;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
section.detail .column dl:nth-child(-n+4) {
  border-top: 1px solid #ddd;
}
section.detail .column dl:nth-child(4n), section.detail .column dl:last-child {
  border-right: 1px solid #ddd;
}
section.detail .column dl.convention dd {
  padding: 3px;
  position: relative;
  container-type: inline-size;
}
section.detail .column dl.convention dd span {
  position: absolute;
  top: 4.5cqw;
  right: 18cqw;
  -webkit-text-stroke: 3.5px black;
  text-stroke: 3.5px black;
  paint-order: stroke;
  font-size: 4cqw;
  color: #fff;
}
section.detail .column dl.convention dd img {
  display: block;
}
section.detail .column dl dt, section.detail .column dl dd {
  text-align: center;
  line-height: 1.4em;
}
section.detail .column dl dt {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}
section.detail .column dl dt span.ranking {
  margin-left: 3px;
  font-size: 0.8em;
  color: #999;
}
section.detail .column dl dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
}
section.detail .column dl dd:empty:before {
  content: "--";
  font-size: 0.8em;
  color: #999;
}
section.detail .column dl dd.image {
  padding: 5px 0 0;
}
section.detail .column dl dd.image img {
  display: inline-block;
  height: 32px;
}
section.detail .column dl dd.text {
  font-size: 0.9em;
}
section.detail .column dl dd a i {
  margin-right: 5px;
}
section.detail .column dl dd [class^='rint'] {
  display: inline-block;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  text-shadow: 1.5px 1.5px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000,1px 0 1px #000,0 1px 1px #000,-1px 0 1px #000,0 -1px 1px #000;
  letter-spacing: 2px;
  color: #ffffff;
}
section.detail .column dl dd [class^='rint'].rint0 {
  color: #ffffff;
}
section.detail .column dl dd [class^='rint'].rint25, section.detail .column dl dd [class^='rint'].rint50 {
  color: #e6e6fa;
}
section.detail .column dl dd [class^='rint'].rint150, section.detail .column dl dd [class^='rint'].rint200 {
  color: #ffd803;
}
section.detail .column dl dd span.huge {
  font-size: 2.25em;
  line-height: 1em;
  font-weight: bold;
}
section.detail .column dl dd span.ranking {
  margin-left: 3px;
  font-size: 0.7em;
  color: #999;
}
section.detail .column dl dd span.date {
  font-size: 0.8em;
  color: #999;
}
section.detail .column dl dd span.unit {
  margin-left: 3px;
  font-size: 0.7em;
  color: #999;
}
section.detail .column dl dd img.rank {
  height: 16px;
  width: auto;
}
section.detail .column dl dd ul.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
section.detail .column dl dd ul.checks li {
  border: 1px solid #ccc;
  padding: 2px 4px;
}
section.detail .column dl dd ul.checks li a {
  font-size: 0.8em;
  color: #999;
}
section.detail .column dl dd ul.checks li.on {
  background-color: var(--mainColor);
}
section.detail .column dl dd ul.checks li.on a {
  color: #fff;
}
section.detail .column dl img.icon {
  height: 18px;
  vertical-align: text-bottom;
}
section.detail table {
  width: 100%;
  color: #4b4949;
}
section.detail table caption {
  padding: 10px;
  background-color: #edf2f7;
  border: 1px solid #dee2e6;
  border-width: 1px 1px 0 1px;
  font-weight: bold;
}
section.detail table thead th, section.detail table thead td,
section.detail table tbody th,
section.detail table tbody td {
  padding: 12px;
  border: 1px solid #dee2e6;
  line-height: 1.5em;
  word-wrap: anywhere;
}
section.detail table thead th.tl, section.detail table thead td.tl,
section.detail table tbody th.tl,
section.detail table tbody td.tl {
  padding-right: 0;
  text-align: left;
}
section.detail table thead th.tc, section.detail table thead td.tc,
section.detail table tbody th.tc,
section.detail table tbody td.tc {
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}
section.detail table thead th.tr, section.detail table thead td.tr,
section.detail table tbody th.tr,
section.detail table tbody td.tr {
  padding-left: 0;
  text-align: right;
}
section.detail table thead th {
  font-weight: bold;
  color: #292828;
}
section.detail table thead th a {
  color: #292828;
}
section.detail table tbody th {
  min-width: 90px;
  width: 20%;
  background-color: #f5f5f5;
}
section.detail table tbody td {
  background-color: #fcfcfc;
}
section.detail table tbody td:empty:before {
  content: "--";
  font-size: 0.85em;
  color: #ccc;
}
section.detail table tbody td.yet {
  background-color: #e30;
}
section.detail table tbody td.minus {
  color: #e30;
}
section.detail table tbody td.minus p {
  color: #e30;
}
section.detail table tbody td.nolink select {
  padding: 6px 9px;
}
section.detail table tbody td.thumbnail {
  padding: 6px;
}
section.detail table tbody td.thumbnail a {
  position: relative;
  display: block;
}
section.detail table tbody td.thumbnail a img {
  vertical-align: middle;
}
section.detail table tbody td.thumbnail a img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
section.detail table tbody td.thumbnail a img.round + span.new {
  top: 0;
  right: 0;
}
section.detail table tbody td.thumbnail a span.new {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 2px 3px;
  background-color: #e30;
  font-size: 0.75em;
  line-height: 1em;
  color: #fff;
}
section.detail table tbody td p {
  font-size: 0.85em;
  line-height: 1.45em;
  color: #999;
}
section.detail table tbody td > span.new {
  padding: 0 3px;
  background-color: #e30;
  font-size: 0.7em;
  color: #fff;
}
section.detail table tbody td span.unit {
  margin-left: 3px;
  vertical-align: bottom;
  font-size: 0.85em;
  color: #999;
}
section.detail table tbody td .button {
  padding: 4px 7px;
}
section.detail table tbody td .memo {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;
  background-color: #ffe;
  border: 1px dotted #999;
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
section.detail table tbody td .memo:first-child {
  margin-top: 0;
}
section.detail table tbody td .memo:last-child {
  margin-bottom: 0;
}
section.detail table tbody td ul.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
section.detail table tbody td ul.tag li {
  display: inline-block;
  padding: 0 2px;
  background-color: #eee;
  border: 1px solid #ccc;
  font-size: 0.7em;
  line-height: 1.6em;
  color: #666;
}
section.detail table tbody td ul.character {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 500px;
}
section.detail table tbody td ul.character li {
  width: calc((100% - 9 * 2px) / 10);
  max-width: 48px;
}
section.detail table tbody td ul.character li.thinly {
  opacity: 0.33;
}
section.detail table tbody td ul.character li img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}
section.detail table tbody td ul.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}
section.detail table tbody td ul.icons li a {
  display: block;
}
section.detail table tbody td ul.icons li a img {
  display: block;
  width: 32px;
  height: 32px;
}
section.detail table tbody td img.rank {
  display: block;
  margin: auto;
}

/****************************************
 	セクション（フォーム）				*
*****************************************/
section.form {
  padding: 20px;
}
section.form table {
  width: 100%;
  color: #4b4949;
}
section.form table caption {
  padding: 10px;
  background-color: #edf2f7;
  border: 1px solid #dee2e6;
  border-width: 1px 1px 0 1px;
  font-weight: bold;
}
section.form table thead th, section.form table thead td,
section.form table tbody th,
section.form table tbody td {
  padding: 12px;
  border: 1px solid #dee2e6;
  line-height: 1.5em;
  word-wrap: anywhere;
}
section.form table thead th.tl, section.form table thead td.tl,
section.form table tbody th.tl,
section.form table tbody td.tl {
  padding-right: 0;
  text-align: left;
}
section.form table thead th.tc, section.form table thead td.tc,
section.form table tbody th.tc,
section.form table tbody td.tc {
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}
section.form table thead th.tr, section.form table thead td.tr,
section.form table tbody th.tr,
section.form table tbody td.tr {
  padding-left: 0;
  text-align: right;
}
section.form table thead th {
  font-weight: bold;
  color: #292828;
}
section.form table thead th a {
  color: #292828;
}
section.form table tbody th {
  min-width: 90px;
  width: 20%;
  background-color: #f5f5f5;
}
section.form table tbody th span.ranking {
  display: block;
  font-size: 0.8em;
  color: #999;
}
section.form table tbody td {
  background-color: #fcfcfc;
}
section.form table tbody td:empty:before {
  content: "--";
  font-size: 0.85em;
  color: #ccc;
}
section.form table tbody td.yet {
  background-color: #e30;
}
section.form table tbody td.minus {
  color: #e30;
}
section.form table tbody td.minus p {
  color: #e30;
}
section.form table tbody td.nolink select {
  padding: 6px 9px;
}
section.form table tbody td.thumbnail {
  padding: 6px;
}
section.form table tbody td.thumbnail a {
  position: relative;
  display: block;
}
section.form table tbody td.thumbnail a img {
  vertical-align: middle;
}
section.form table tbody td.thumbnail a img.circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
section.form table tbody td.thumbnail a img.round + span.new {
  top: 0;
  right: 0;
}
section.form table tbody td.thumbnail a span.new {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 2px 3px;
  background-color: #e30;
  font-size: 0.75em;
  line-height: 1em;
  color: #fff;
}
section.form table tbody td .input-group + p {
  margin-top: 3px;
}
section.form table tbody td p {
  font-size: 0.85em;
  line-height: 1.45em;
  color: #999;
}
section.form table tbody td p.explain {
  margin-top: 5px;
}
section.form table tbody td > span.new {
  padding: 0 3px;
  background-color: #e30;
  font-size: 0.7em;
  color: #fff;
}
section.form table tbody td span.unit {
  margin-left: 3px;
  vertical-align: bottom;
  font-size: 0.85em;
  color: #999;
}
section.form table tbody td .button {
  padding: 4px 7px;
}
section.form table tbody td .memo {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;
  background-color: #ffe;
  border: 1px dotted #999;
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
section.form table tbody td .memo:first-child {
  margin-top: 0;
}
section.form table tbody td .memo:last-child {
  margin-bottom: 0;
}
section.form table tbody td ul.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
section.form table tbody td ul.tag li {
  display: inline-block;
  padding: 0 2px;
  background-color: #eee;
  border: 1px solid #ccc;
  font-size: 0.7em;
  line-height: 1.6em;
  color: #666;
}
section.form table tbody td ul.character {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 500px;
}
section.form table tbody td ul.character li {
  width: calc((100% - 9 * 2px) / 10);
  max-width: 48px;
}
section.form table tbody td ul.character li.thinly {
  opacity: 0.33;
}
section.form table tbody td ul.character li img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
}
section.form table tbody td ul.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}
section.form table tbody td ul.icons li a {
  display: block;
}
section.form table tbody td ul.icons li a img {
  display: block;
  width: 32px;
  height: 32px;
}
section.form table tbody td img.rank {
  display: block;
  margin: auto;
}
section.form table tbody td .flex label {
  width: 25%;
}
section.form table tbody td .vertical label {
  width: 100%;
}
section.form table tbody td label.radio input[type='radio']:checked + span + b {
  font-weight: bold;
  color: var(--mainColor);
}

/****************************************
 	セクション（文書）					*
*****************************************/
section.document {
  padding: 20px;
}
section.document dl {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  background-color: #fcfcfc;
  line-height: 1.5em;
}
section.document dl:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
section.document dl dt {
  width: 25%;
  padding: 10px 0;
  text-align: right;
  font-weight: bold;
}
section.document dl dd {
  flex: 1;
  padding: 10px 20px;
}
section.document dl dd i {
  margin-right: 5px;
}
section.document dl dd img {
  max-width: 80%;
}
section.document dl dt + dd {
  border-left: 3px solid var(--mainColor);
}

/****************************************
 	セクション（広告）					*
*****************************************/
section.advertise {
  padding: 20px;
}

/****************************************
 	セクション（新規登録）				*
*****************************************/
section.register {
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 100px;
  padding-bottom: 100px;
  font-size: 1.5em;
  color: #fff;
}
section.register .step {
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-width: 300px;
  padding-left: 25px;
  padding-right: 25px;
}
section.register dl {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
}
section.register dl.caveat dt {
  color: #ff9a39;
}
section.register dl.caveat dd {
  border-color: #ff9a39;
}
section.register dl.caveat input, section.register dl.caveat select, section.register dl.caveat textarea {
  color: #ff9a39;
}
section.register dl.caveat input::placeholder, section.register dl.caveat select::placeholder, section.register dl.caveat textarea::placeholder {
  color: #fdc38b;
}
section.register dl.error dd {
  border-color: #e30;
  font-size: 0.75em;
  line-height: 1.75em;
  color: #e30;
}
section.register dl dt {
  position: absolute;
  left: 15px;
  top: -8px;
  padding: 0 5px;
  background-color: #000;
  font-size: 0.8em;
}
section.register dl dd {
  padding: 15px 15px;
  border: 2px solid #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
section.register dl dd input, section.register dl dd select, section.register dl dd textarea {
  padding: 0;
  background-color: #000;
  border: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1em;
  color: #fff;
}
section.register dl dd input:focus, section.register dl dd select:focus, section.register dl dd textarea:focus {
  box-shadow: none;
}
section.register dl dd textarea {
  max-width: 250px;
  height: 58px;
  resize: none;
  overflow-y: hidden;
}
section.register dl dd textarea::placeholder {
  color: #fff;
}
section.register dl dd span {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1.25em;
  word-break: break-all;
}
section.register dl dd.explain {
  font-size: 0.75em;
  line-height: 1.75em;
}
section.register dl + ul {
  margin-top: 20px;
  align-items: last baseline;
}
section.register ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
section.register ul li:not(:first-child) a:before {
  display: none;
}
section.register ul li a {
  position: relative;
  padding-left: 20px;
  color: #fff;
}
section.register ul li a:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 3px;
  left: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
}

/****************************************
 	セクション（サンプル）				*
*****************************************/
section.sample {
  padding: 20px;
}
section.sample .box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
section.sample .box ul li {
  width: calc((100% - (11px * 3)) / 12);
}
section.sample .box ul li a img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: fill;
  border-radius: 5px;
}

/****************************************
 	セクション（エラー）				*
*****************************************/
section.error {
  padding: 20px;
  line-height: 1.5em;
  letter-spacing: 0.5px;
}
section.error a {
  text-decoration: underline;
}
section.error p.error {
  color: #e30;
}
section.error pre {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
}

/****************************************
 	パンくず							*
*****************************************/
#breadcrumbs {
  background-color: #f0f0f0;
  border-top: 1px solid #e3e3e3;
}
#breadcrumbs ol {
  display: flex;
  justify-content: center;
  padding: 10px;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.9em;
}
#breadcrumbs ol li:not(:last-child):after {
  content: "-";
  margin-left: 4px;
  color: #999;
}
#breadcrumbs ol li.current a {
  color: #999;
}

/****************************************
 	フッター							*
*****************************************/
footer {
  padding: 40px;
  background-color: #333;
}
footer .logo {
  text-align: center;
}
footer .logo a img {
  width: 240px;
}
footer .link {
  margin-top: 30px;
}
footer .link ul {
  display: flex;
  justify-content: center;
  gap: 15px;
}
footer .link ul li a {
  color: #eee;
}
footer .link ul li a i {
  margin-right: 5px;
}
footer .copyright {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #444;
  text-align: center;
  font-size: 0.8em;
  color: #eee;
}
footer .copyright p {
  line-height: 1.2em;
}
footer .copyright p + p {
  margin-top: 20px;
}

/****************************************
 	モーダル							*
*****************************************/
#overlay {
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/overlay90.png");
}
#overlay #modal {
  max-height: 90svh;
  max-width: 768px;
  width: 95vw;
  box-shadow: 0px 0px 5px 1px #999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow-y: auto;
}

/****************************************
 	モーダル（詳細）					*
*****************************************/
#modal .title {
  position: relative;
  padding: 20px;
  background: url("../images/gr_03.png") 50% 53%/125% no-repeat rgba(0, 0, 0, 0.8);
}
#modal .title h1 {
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: #eee;
}
#modal .title h1 span {
  display: block;
  margin-top: 5px;
  font-size: 0.5em;
  font-weight: normal;
}
#modal section:last-child {
  margin-bottom: 0;
}
#modal section.search {
  padding-bottom: 40px;
}
#modal .action {
  z-index: 1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: url("../images/overlay90.png");
}

/****************************************
 	パーツ（フォーム）					*
*****************************************/
.form-group {
  display: flex;
}
.form-group + .form-group {
  margin-top: 10px;
}

.inline-block {
  display: inline-block;
}
.inline-block + .inline-block {
  margin-left: 10px;
}

.input-group {
  display: flex;
  flex: 1;
}
.input-group + .input-group {
  margin-left: 10px;
}
.input-group a.button {
  padding-top: 10px;
}
.input-group input[type='text']:not(:first-child):not(:last-child),
.input-group input[type='email']:not(:first-child):not(:last-child),
.input-group input[type='number']:not(:first-child):not(:last-child),
.input-group input[type='tel']:not(:first-child):not(:last-child),
.input-group input[type='url']:not(:first-child):not(:last-child),
.input-group input[type='password']:not(:first-child):not(:last-child),
.input-group input[type='file']:not(:first-child):not(:last-child),
.input-group textarea:not(:first-child):not(:last-child),
.input-group select:not(:first-child):not(:last-child) {
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group input[type='text']:first-child,
.input-group input[type='email']:first-child,
.input-group input[type='number']:first-child,
.input-group input[type='tel']:first-child,
.input-group input[type='url']:first-child,
.input-group input[type='password']:first-child,
.input-group input[type='file']:first-child,
.input-group textarea:first-child,
.input-group select:first-child {
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group input[type='text']:last-child,
.input-group input[type='email']:last-child,
.input-group input[type='number']:last-child,
.input-group input[type='tel']:last-child,
.input-group input[type='url']:last-child,
.input-group input[type='password']:last-child,
.input-group input[type='file']:last-child,
.input-group textarea:last-child,
.input-group select:last-child {
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

input[type='text'],
input[type='email'],
input[type='number'],
input[type='tel'],
input[type='url'],
input[type='password'],
input[type='file'],
textarea,
select {
  z-index: 1;
  flex: 1;
  width: 100%;
  padding: 10px 9px;
  background-color: #fff;
  border: 1px solid #ced4da;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  -webkit-appearance: none;
}
input[type='text']:invalid,
input[type='email']:invalid,
input[type='number']:invalid,
input[type='tel']:invalid,
input[type='url']:invalid,
input[type='password']:invalid,
input[type='file']:invalid,
textarea:invalid,
select:invalid {
  box-shadow: none;
  border-left-width: 3px;
  border-left-color: #d2322d;
}
input[type='text']:disabled,
input[type='email']:disabled,
input[type='number']:disabled,
input[type='tel']:disabled,
input[type='url']:disabled,
input[type='password']:disabled,
input[type='file']:disabled,
textarea:disabled,
select:disabled {
  cursor: no-drop;
  background-color: #eee;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='file']:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: #80bdff;
  -moz-box-shadow: 0 0 3px 3px rgba(0, 123, 255, 0.25);
  -webkit-box-shadow: 0 0 3px 3px rgba(0, 123, 255, 0.25);
  box-shadow: 0 0 3px 3px rgba(0, 123, 255, 0.25);
}
input[type='text'].datepicker,
input[type='email'].datepicker,
input[type='number'].datepicker,
input[type='tel'].datepicker,
input[type='url'].datepicker,
input[type='password'].datepicker,
input[type='file'].datepicker,
textarea.datepicker,
select.datepicker {
  width: 100px;
}
input[type='text'].datetimepicker,
input[type='email'].datetimepicker,
input[type='number'].datetimepicker,
input[type='tel'].datetimepicker,
input[type='url'].datetimepicker,
input[type='password'].datetimepicker,
input[type='file'].datetimepicker,
textarea.datetimepicker,
select.datetimepicker {
  width: 150px;
}
input[type='text'].tl,
input[type='email'].tl,
input[type='number'].tl,
input[type='tel'].tl,
input[type='url'].tl,
input[type='password'].tl,
input[type='file'].tl,
textarea.tl,
select.tl {
  text-align: left;
  text-align-last: left;
}
input[type='text'].tc,
input[type='email'].tc,
input[type='number'].tc,
input[type='tel'].tc,
input[type='url'].tc,
input[type='password'].tc,
input[type='file'].tc,
textarea.tc,
select.tc {
  text-align: center;
  text-align-last: center;
}
input[type='text'].tr,
input[type='email'].tr,
input[type='number'].tr,
input[type='tel'].tr,
input[type='url'].tr,
input[type='password'].tr,
input[type='file'].tr,
textarea.tr,
select.tr {
  text-align: right;
  text-align-last: right;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type='file'] {
  background-color: #fff;
  padding: 7px 7px 6px;
}

textarea {
  height: 120px;
  line-height: 1.5em;
}

select[multiple] {
  padding: 0;
}
select[multiple] option {
  padding: 10px;
}
select[multiple] option:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

a.append,
button.append,
span.append {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  color: #495057;
  margin-right: -1px;
  margin-left: -1px;
  width: 50px;
  text-align: center;
  line-height: 3em;
}
a.append:first-child,
button.append:first-child,
span.append:first-child {
  margin-left: 0;
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px 0 0 3px;
}
a.append:last-child,
button.append:last-child,
span.append:last-child {
  margin-right: 0;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0;
  border-radius: 0 3px 3px 0;
}
a.append.primary,
button.append.primary,
span.append.primary {
  background-color: #4c4948;
  border-color: #4c4948 #4c4948 #4c4915;
  color: #fff;
}
a.append.success,
button.append.success,
span.append.success {
  background-color: #5ab75a;
  border-color: #5ab75a #5ab75a #5ab727;
  color: #fff;
}
a.append.info,
button.append.info,
span.append.info {
  background-color: #5bc0de;
  border-color: #5bc0de #5bc0de #5bc0ab;
  color: #fff;
}
a.append.warning,
button.append.warning,
span.append.warning {
  background-color: #ed9c28;
  border-color: #ed9c28 #ed9c28 #ed9c00;
  color: #fff;
}
a.append.danger,
button.append.danger,
span.append.danger {
  background-color: #d2322d;
  border-color: #d2322d #d2322d #d23200;
  color: #fff;
}
a.append.inverse,
button.append.inverse,
span.append.inverse {
  background-color: #171717;
  border-color: #171717 #171717 #171700;
  color: #fff;
}
a.append.clear,
button.append.clear,
span.append.clear {
  background-color: #edf2f7;
  border-color: #edf2f7 #edf2f7 #edf2c4;
  color: #999;
}

select.append {
  background-color: #e9ecef;
}

label.radio,
label.checkbox {
  position: relative;
  display: inline-block;
  top: 3px;
  vertical-align: sub;
  line-height: 1.6;
}
label.radio.img input[type='radio']:checked + img,
label.radio.img input[type='checkbox']:checked + img,
label.checkbox.img input[type='radio']:checked + img,
label.checkbox.img input[type='checkbox']:checked + img {
  opacity: 1;
  border-color: #e30;
}
label.radio.img img,
label.checkbox.img img {
  opacity: 0.6;
  border: 5px solid #fff;
}
label.radio input[type='radio'],
label.radio input[type='checkbox'],
label.checkbox input[type='radio'],
label.checkbox input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
}
label.radio input[type='radio']:disabled + span,
label.radio input[type='checkbox']:disabled + span,
label.checkbox input[type='radio']:disabled + span,
label.checkbox input[type='checkbox']:disabled + span {
  background-color: #d5d5d5;
  cursor: no-drop;
}
label.radio input[type='radio']:checked + span:after,
label.radio input[type='checkbox']:checked + span:after,
label.checkbox input[type='radio']:checked + span:after,
label.checkbox input[type='checkbox']:checked + span:after {
  position: absolute;
  font-family: "Font Awesome 5 Solid";
}
label.radio input[type='radio']:focus + span,
label.radio input[type='checkbox']:focus + span,
label.checkbox input[type='radio']:focus + span,
label.checkbox input[type='checkbox']:focus + span {
  outline: 0;
  -moz-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  -webkit-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
label.radio input[type='radio'] + span,
label.checkbox input[type='radio'] + span {
  border-radius: 50%;
}
label.radio input[type='radio']:checked + span:after,
label.checkbox input[type='radio']:checked + span:after {
  top: 0px;
  left: 4.2px;
  color: var(--mainColor);
  content: "\f111";
}
label.radio input[type='radio']:checked + span,
label.checkbox input[type='radio']:checked + span {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--mainColor);
}
label.radio input[type='checkbox']:checked + span,
label.checkbox input[type='checkbox']:checked + span {
  background-color: var(--mainColor);
  border: 1px solid var(--mainColor);
}
label.radio input[type='checkbox']:checked + span:after,
label.checkbox input[type='checkbox']:checked + span:after {
  top: 0px;
  left: 4px;
  color: rgba(255, 255, 255, 0.9);
  content: "\f00c";
}
label.radio span,
label.checkbox span {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
  -moz-transition: background-color, 0.5s, ease, 0s;
  -o-transition: background-color, 0.5s, ease, 0s;
  -webkit-transition: background-color, 0.5s, ease, 0s;
  transition: background-color, 0.5s, ease, 0s;
  font-size: 14px;
}
label.radio b,
label.checkbox b {
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 10px;
  font-size: 0.9em;
}

/****************************************
 	パーツ（ボタン）					*
*****************************************/
.button {
  padding: 8px 16px;
  background-color: #ccc;
  border: 1px solid;
  border-color: #ccc #ccc #b3b3b3;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  text-align: center;
  line-height: 1.5em;
  font-weight: normal;
  color: #fff;
  cursor: pointer;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
}
.button:hover {
  opacity: 0.75;
}
.button.primary {
  background-color: #4c4948;
  border-color: #4c4948 #4c4948 #4c4915;
}
.button.success {
  background-color: #5ab75a;
  border-color: #5ab75a #5ab75a #5ab727;
}
.button.info {
  background-color: #5bc0de;
  border-color: #5bc0de #5bc0de #5bc0ab;
}
.button.warning {
  background-color: #ed9c28;
  border-color: #ed9c28 #ed9c28 #ed9c00;
}
.button.danger {
  background-color: #d2322d;
  border-color: #d2322d #d2322d #d23200;
}
.button.inverse {
  background-color: #171717;
  border-color: #171717 #171717 #171700;
}
.button.clear {
  background-color: #f8f8f8;
  border-color: #f8f8f8 #f8f8f8 #f8f8c5;
  border: 1px solid #999;
  color: #666;
}
.button i {
  margin-right: 3px;
}
.button i:last-child {
  margin-right: 0;
}

/****************************************
 	width								*
*****************************************/
.w100p {
  width: 100% !important;
  max-width: 100% !important;
}

.w0 {
  width: 0px !important;
}

.w5 {
  width: 5px !important;
}

.w10 {
  width: 10px !important;
}

.w15 {
  width: 15px !important;
}

.w20 {
  width: 20px !important;
}

.w25 {
  width: 25px !important;
}

.w30 {
  width: 30px !important;
}

.w35 {
  width: 35px !important;
}

.w40 {
  width: 40px !important;
}

.w45 {
  width: 45px !important;
}

.w50 {
  width: 50px !important;
}

.w55 {
  width: 55px !important;
}

.w60 {
  width: 60px !important;
}

.w65 {
  width: 65px !important;
}

.w70 {
  width: 70px !important;
}

.w75 {
  width: 75px !important;
}

.w80 {
  width: 80px !important;
}

.w85 {
  width: 85px !important;
}

.w90 {
  width: 90px !important;
}

.w95 {
  width: 95px !important;
}

.w100 {
  width: 100px !important;
}

.w105 {
  width: 105px !important;
}

.w110 {
  width: 110px !important;
}

.w115 {
  width: 115px !important;
}

.w120 {
  width: 120px !important;
}

.w125 {
  width: 125px !important;
}

.w130 {
  width: 130px !important;
}

.w135 {
  width: 135px !important;
}

.w140 {
  width: 140px !important;
}

.w145 {
  width: 145px !important;
}

.w150 {
  width: 150px !important;
}

.w155 {
  width: 155px !important;
}

.w160 {
  width: 160px !important;
}

.w165 {
  width: 165px !important;
}

.w170 {
  width: 170px !important;
}

.w175 {
  width: 175px !important;
}

.w180 {
  width: 180px !important;
}

.w185 {
  width: 185px !important;
}

.w190 {
  width: 190px !important;
}

.w195 {
  width: 195px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.w300 {
  width: 300px !important;
}

.w350 {
  width: 350px !important;
}

.w400 {
  width: 400px !important;
}

.w450 {
  width: 450px !important;
}

.w500 {
  width: 500px !important;
}

.w600 {
  width: 600px !important;
}

.w700 {
  width: 700px !important;
}

.w800 {
  width: 800px !important;
}

.w900 {
  width: 900px !important;
}

.w1000 {
  width: 1000px !important;
}

/****************************************
 	height								*
*****************************************/
.h0 {
  height: 0px !important;
}

.h10 {
  height: 10px !important;
}

.h20 {
  height: 20px !important;
}

.h30 {
  height: 30px !important;
}

.h40 {
  height: 40px !important;
}

.h50 {
  height: 50px !important;
}

.h60 {
  height: 60px !important;
}

.h70 {
  height: 70px !important;
}

.h80 {
  height: 80px !important;
}

.h90 {
  height: 90px !important;
}

.h100 {
  height: 100px !important;
}

.h110 {
  height: 110px !important;
}

.h120 {
  height: 120px !important;
}

.h130 {
  height: 130px !important;
}

.h140 {
  height: 140px !important;
}

.h150 {
  height: 150px !important;
}

.h160 {
  height: 160px !important;
}

.h170 {
  height: 170px !important;
}

.h180 {
  height: 180px !important;
}

.h190 {
  height: 190px !important;
}

.h200 {
  height: 200px !important;
}

.h250 {
  height: 250px !important;
}

.h300 {
  height: 300px !important;
}

.h350 {
  height: 350px !important;
}

.h400 {
  height: 400px !important;
}

.h450 {
  height: 450px !important;
}

.h500 {
  height: 500px !important;
}

.h600 {
  height: 600px !important;
}

.h700 {
  height: 700px !important;
}

.h800 {
  height: 800px !important;
}

.h900 {
  height: 900px !important;
}

.h1000 {
  height: 1000px !important;
}

/****************************************
 	レスポンシブル						*
*****************************************/
/* ノートPC -------------------------------------------------- */
@media only screen and (min-width: calc(768px + (30px*2) + 1px)) and (max-width: calc(768px + 300px + (30px*2))) {
  /****************************************
  	レイアウト							*
  *****************************************/
  header {
    width: 100%;
  }

  body:not(.open) nav {
    right: -100vw;
    opacity: 0;
  }

  nav {
    top: 60px;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: scroll;
  }

  main {
    margin-left: auto;
    margin-right: auto;
  }

  #breadcrumbs {
    max-width: 100%;
  }

  footer {
    max-width: 100%;
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header .nav {
    display: inline-block;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav .main ul li {
    width: 50%;
  }
  nav .sub ul li {
    width: 50%;
  }

  /****************************************
  	セクション（選択）					*
  *****************************************/
  section.select {
    left: auto;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav {
    background-size: 100%;
  }
  nav .special ul li {
    width: calc((100% - 15px) / 2);
  }

  /****************************************
  	セクション（比較）					*
  *****************************************/
  main.fixed section.compare thead {
    left: auto;
    right: auto;
    width: 768px;
  }
}
/* タブレット -------------------------------------------------- */
@media only screen and (min-width: calc(768px + 1px)) and (max-width: calc(768px + (30px*2))) {
  /****************************************
  	レイアウト							*
  *****************************************/
  header {
    width: 100%;
  }

  body:not(.open) nav {
    right: -100vw;
    opacity: 0;
  }

  nav {
    top: 60px;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: scroll;
  }

  main {
    margin-left: auto;
    margin-right: auto;
  }

  #breadcrumbs {
    max-width: 100%;
  }

  footer {
    max-width: 100%;
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header .nav {
    display: inline-block;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav .main ul li {
    width: 50%;
  }
  nav .sub ul li {
    width: 50%;
  }

  /****************************************
  	セクション（選択）					*
  *****************************************/
  section.select {
    left: auto;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav {
    background-size: 100%;
  }
  nav .special ul li {
    width: calc((100% - 15px) / 2);
  }

  /****************************************
  	セクション（比較）					*
  *****************************************/
  main.fixed section.compare thead {
    left: auto;
    right: auto;
    width: 768px;
  }

  /****************************************
  	基本設定							*
  *****************************************/
  main {
    min-height: calc((100vh - 60px - 300px + (30px * 2)) - (100vw - 768px + 60px));
    margin-top: calc(((100vw - 768px) / 2) + 60px);
  }

  #breadcrumbs,
  footer {
    margin-top: calc((100vw - 768px) / 2);
  }
}
/* スマホ -------------------------------------------------- */
@media only screen and (max-width: 768px) {
  /****************************************
  	レイアウト							*
  *****************************************/
  header {
    width: 100%;
  }

  body:not(.open) nav {
    right: -100vw;
    opacity: 0;
  }

  nav {
    top: 60px;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: scroll;
  }

  main {
    margin-left: auto;
    margin-right: auto;
  }

  #breadcrumbs {
    max-width: 100%;
  }

  footer {
    max-width: 100%;
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header .nav {
    display: inline-block;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav .main ul li {
    width: 50%;
  }
  nav .sub ul li {
    width: 50%;
  }

  /****************************************
  	セクション（選択）					*
  *****************************************/
  section.select {
    left: auto;
  }

  /****************************************
  	基本設定							*
  *****************************************/
  html {
    scroll-padding-top: calc(60px + 46.5px + 10px);
    font-size: 12px;
  }

  img.round {
    border-radius: 3px;
  }

  .sp {
    display: initial;
  }

  .pc {
    display: none;
  }

  /****************************************
  	レイアウト							*
  *****************************************/
  main {
    min-height: calc(100svh - 60px - 400px);
    margin-top: 60px;
  }
  main.fixed {
    margin-top: calc(60px + 46.5px);
  }

  #breadcrumbs {
    margin-top: 0;
  }

  footer {
    margin-top: 0;
    height: 400px;
  }

  body.classic main.fixed #top {
    width: calc(100% - 20px);
  }

  /****************************************
  	ヘッダー							*
  *****************************************/
  header {
    padding: 13px 0;
  }
  header .warp {
    top: 14px;
  }
  header .warp a img {
    width: 36px;
  }
  header .logo a h1 img,
  header .logo a p img {
    width: 220px;
  }

  /****************************************
  	ナビゲーション						*
  *****************************************/
  nav {
    background-size: 200%;
  }
  nav .search {
    height: calc(60px - 3px);
    padding: 8px;
    border-bottom: 1px solid #fff;
  }
  nav .search input[type='text'] {
    width: 100%;
    padding: 10px 20px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
  }
  nav .main ul li:hover a {
    padding-left: 23px;
  }
  nav .main ul li a {
    padding-left: 20px;
  }
  nav .special ul {
    gap: 10px;
    padding: 10px;
  }
  nav .special ul li {
    width: calc((100% - 10px) / 2);
  }
  nav .special ul li a {
    padding: 10px;
    font-size: 1em;
    text-align: left;
  }
  nav .sub {
    margin-top: 15px;
  }
  nav .sub + .sub {
    margin-top: 7.5px;
  }
  nav .sub ul li {
    padding: 8px 0 8px 15px;
  }
  nav .sub ul li:hover {
    padding-left: 19px;
  }
  nav .sub ul li a i {
    width: 12px;
  }

  /****************************************
  	メイン								*
  *****************************************/
  main .row {
    gap: 15px;
  }
  main section .action {
    gap: 10px;
    margin-top: 15px;
  }
  main #top {
    padding: 15px;
  }
  main #top h1 {
    font-size: 1.5em;
  }
  main #top h1 span {
    margin-top: 4px;
  }
  main #top ul li {
    width: calc((100% - (5px * 1)) / 2);
  }
  main h2 {
    margin-bottom: 15px;
    padding-left: 8px;
    font-size: 1.2em;
    overflow: hidden;
  }
  main h3 {
    margin-bottom: 10px;
  }
  main h3 i {
    margin-right: 3px;
  }

  body.classic main {
    padding: 10px;
  }

  /****************************************
  	セクション（お知らせ）				*
  *****************************************/
  section.news {
    padding: 15px 10px;
  }
  section.news .list dl {
    gap: 5px;
    padding-left: 2.5px;
    padding-right: 2.5px;
  }
  section.news .list dl dt {
    gap: 5px;
  }
  section.news .list dl dt span.date {
    width: 35px;
  }

  /****************************************
  	セクション（メニュー）				*
  *****************************************/
  section.menu {
    padding: 15px 10px;
  }
  section.menu .box ul {
    gap: 2px;
  }
  section.menu .box ul.mini li {
    width: calc((100% - (2px * 3)) / 4);
  }
  section.menu .box ul li {
    width: calc((100% - (2px * 2)) / 3);
  }
  section.menu .box ul li.reduction a {
    font-size: 0.7em;
  }
  section.menu .box ul li a {
    gap: 3px;
    padding: 10px 0;
    font-size: 0.8em;
    background-position-y: 64%;
  }
  section.menu .box ul li a i {
    font-size: 1.5em;
    line-height: 1.05em;
    text-align: center;
  }
  section.menu .box ul li a img {
    display: inline-block;
    width: 14px;
    margin: auto;
  }

  /****************************************
  	セクション（バナー）				*
  *****************************************/
  section.banner {
    padding: 15px 10px;
  }
  section.banner.half:not(.toppage) .box ul li {
    width: 100%;
  }
  section.banner:not(.half):not(.one) .box ul li:nth-child(n+9) {
    display: none;
  }
  section.banner .box ul {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  section.banner .box ul li {
    width: calc((100% - 10px) / 2);
  }
  section.banner.excerpt .box ul li:nth-child(n+5) {
    display: none;
  }

  /****************************************
  	セクション（キーワード検索）		*
  *****************************************/
  section.keyword {
    padding: 0;
  }
  section.keyword .form dl dd .search {
    height: calc(60px - 3px);
  }
  section.keyword .form dl dd .search input[type='text'] {
    font-size: 1em;
  }
  section.keyword .form dl dd .search a {
    right: 13px;
    width: 32px;
    height: 32px;
    padding-top: 6px;
    font-size: 1.25em;
  }

  /****************************************
  	セクション（検索）					*
  *****************************************/
  main section.search {
    margin-bottom: 15px;
    padding: 20px 15px;
  }
  main section.search .form {
    gap: 10px;
  }
  main section.search .form dl.col8 {
    width: calc((100% - (5px)) / 3 * 2);
  }
  main section.search .form dl.col6 {
    width: calc((100% - (10px * 1)) / 2);
  }
  main section.search .form dl.col4 {
    width: calc((100% - (10px * 2)) / 3);
  }
  main section.search .form dl.col3 {
    width: calc((100% - (10px * 3)) / 4);
  }
  main section.search .form dl dt {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 1em;
  }
  main section.search .form dl dt.icon img {
    width: 16px;
    margin-right: 3px;
  }
  main section.search .form dl dd .flex {
    gap: 3px;
  }
  main section.search .form dl dd .flex.mini > * {
    width: calc((100% - (5px * 3)) / 4);
  }
  main section.search .form dl dd .flex.long > * {
    width: calc((100% - (5px * 1)) / 2);
  }
  main section.search .form dl dd .flex > * {
    width: calc((100% - (5px * 2)) / 3);
  }
  main section.search .form dl dd .area {
    gap: 3px;
  }
  main section.search .form dl dd .area > * {
    width: calc((100% - (3px * 6)) / 7);
  }
  main section.search .form dl dd .candidate {
    margin-bottom: 10px;
    padding: 0 3px;
  }
  main section.search .form dl dd .candidate ul li a {
    padding-bottom: 1px;
  }
  main section.search .form dl dd .banner ul li {
    width: calc((100% - (5px * 1)) / 2);
  }

  /****************************************
  	セクション（該当なし）				*
  *****************************************/
  section.nodata {
    padding: 15px 10px;
  }
  section.nodata .box {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  section.nodata .box p {
    font-size: 0.9em;
    line-height: 1.4em;
  }

  /****************************************
  	セクション（動画）					*
  *****************************************/
  section.movie {
    padding: 15px 10px;
  }
  section.movie.half .box ul li {
    width: 100%;
  }
  section.movie .box ul {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  section.movie .box ul li {
    width: calc((100% - 10px) / 2);
  }
  section.movie .box ul li a span.channel {
    top: 3px;
    right: 3px;
  }
  section.movie .box ul li a span.channel img {
    border-width: 1px;
  }

  /****************************************
  	セクション（ブロック）				*
  *****************************************/
  section.block {
    padding: 15px 10px;
  }
  section.block.toppage .box ul li:nth-child(n+8) {
    display: none;
  }
  section.block .box ul {
    gap: 2px;
  }
  section.block .box ul li {
    width: calc((100% - (6px * 2)) / 7);
  }
  section.block .box ul li a span.new {
    font-size: 1.75vw;
  }

  /****************************************
  	セクション（チェック）				*
  *****************************************/
  section.check {
    padding: 15px 10px;
  }
  section.check .box ul {
    gap: 1px;
  }
  section.check .box ul li {
    width: calc((100% - (6px * 1)) / 7);
  }
  section.check .box ul li div.icon {
    padding: 1px;
  }
  section.check .box ul li div.icon.checked:after {
    padding: 2px;
    font-size: 0.6em;
  }

  /****************************************
  	セクション（選択）					*
  *****************************************/
  section.select {
    padding: 10px;
  }
  section.select .menu {
    top: -20px;
    left: 10px;
    right: 10px;
  }
  section.select .menu .switch ul li a.button {
    padding: 1px 3px;
    font-size: 0.8em;
  }
  section.select .box ul {
    gap: 1px;
  }
  section.select .box ul:has(:nth-child(8)) li {
    width: calc((100% - (7 * 1px)) / 8);
  }
  section.select .box ul:has(:nth-child(11)) li {
    width: calc((100% - (7 * 1px)) / 8);
  }
  section.select .box ul:has(:nth-child(18)) li {
    width: calc((100% - (8 * 1px)) / 9);
  }
  section.select .box ul:has(:nth-child(24)) li {
    width: calc((100% - (8 * 1px)) / 9);
  }
  section.select .box ul:has(:nth-child(30)) li {
    width: calc((100% - (9 * 1px)) / 10);
  }
  section.select .box ul:has(:nth-child(39)) li {
    width: calc((100% - (9 * 1px)) / 10);
  }
  section.select .box ul:has(:nth-child(44)) li {
    width: calc((100% - (10 * 1px)) / 11);
  }
  section.select .box ul:has(:nth-child(56)) li {
    width: calc((100% - (10 * 1px)) / 11);
  }
  section.select .box ul:has(:nth-child(60)) li {
    width: calc((100% - (11 * 1px)) / 12);
  }
  section.select .box ul:has(:nth-child(75)) li {
    width: calc((100% - (11 * 1px)) / 12);
  }
  section.select .box ul:has(:nth-child(78)) li {
    width: calc((100% - (12 * 1px)) / 13);
  }
  section.select .box ul:has(:nth-child(96)) li {
    width: calc((100% - (12 * 1px)) / 13);
  }
  section.select .box ul:has(:nth-child(98)) li {
    width: calc((100% - (13 * 1px)) / 14);
  }
  section.select .box ul:has(:nth-child(119)) li {
    width: calc((100% - (13 * 1px)) / 14);
  }
  section.select .box ul:has(:nth-child(120)) li {
    width: calc((100% - (14 * 1px)) / 15);
  }
  section.select .box ul:has(:nth-child(144)) li {
    width: calc((100% - (15 * 1px)) / 16);
  }
  section.select .box ul:has(:nth-child(170)) li {
    width: calc((100% - (16 * 1px)) / 17);
  }
  section.select .box ul:has(:nth-child(171)) li {
    width: calc((100% - (16 * 1px)) / 17);
  }
  section.select .box ul:has(:nth-child(198)) li {
    width: calc((100% - (17 * 1px)) / 18);
  }
  section.select .box ul:has(:nth-child(200)) li {
    width: calc((100% - (17 * 1px)) / 18);
  }
  section.select .box ul:has(:nth-child(228)) li {
    width: calc((100% - (18 * 1px)) / 19);
  }
  section.select .box ul:has(:nth-child(260)) li {
    width: calc((100% - (19 * 1px)) / 20);
  }
  section.select .box ul li {
    width: calc((100% - (6 * 1px)) / 7);
  }
  section.select .box ul li div.icon {
    padding: 1px;
  }
  section.select .action {
    margin-top: 5px;
  }

  /****************************************
  	セクション（比較）					*
  *****************************************/
  section.compare table thead tr th, section.compare table tbody tr th {
    min-width: 63px;
  }
  section.compare table thead tr th span.reduction, section.compare table tbody tr th span.reduction {
    font-size: 0.8em;
  }
  section.compare table thead tr td, section.compare table tbody tr td {
    max-width: 65px;
    min-width: 65px;
  }
  section.compare table thead tr th p, section.compare table thead tr td p, section.compare table tbody tr th p, section.compare table tbody tr td p {
    font-size: 0.6em;
  }
  section.compare table thead tr td {
    padding: 5px;
  }
  section.compare table tbody tr th, section.compare table tbody tr td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  section.compare table tbody tr td span[class^='rint'] {
    font-size: 0.8em;
  }

  main.fixed section.compare {
    margin-top: calc(60px + 8px);
  }
  main.fixed section.compare thead {
    left: 0;
    right: 0;
  }

  /****************************************
  	セクション（リスト）				*
  *****************************************/
  section.list {
    padding: 15px 10px;
  }
  section.list table thead th, section.list table thead td,
  section.list table tbody th,
  section.list table tbody td {
    padding: 8px;
  }
  section.list table tbody td.check input[type='checkbox'] {
    width: 24px;
    height: 24px;
  }
  section.list table tbody td ul.character li {
    width: calc((100% - 5 * 2px) / 6);
  }
  section.list table tbody td ul.icons li a img {
    width: 24px;
    height: 24px;
  }

  /****************************************
  	セクション（対戦カード）			*
  *****************************************/
  section.versus {
    padding: 15px 10px;
  }
  section.versus .box ul {
    gap: 5px;
  }

  /****************************************
  	セクション（カード）				*
  *****************************************/
  section.card {
    padding: 15px 10px;
  }
  section.card .box.slim ul li a {
    padding: 5px;
  }
  section.card .box.slim ul li a .emblem {
    max-width: 32px;
    width: 15%;
  }
  section.card .box ul {
    gap: 5px;
  }
  section.card .box ul li {
    width: calc((100% - 5px * 1) / 2);
  }

  /****************************************
  	セクション（カレンダー）			*
  *****************************************/
  section.calendar {
    padding: 15px 10px;
  }
  section.calendar table tbody tr {
    height: 53px;
  }
  section.calendar table tbody td {
    padding: 5px 0;
  }
  section.calendar table tbody td ul {
    gap: 3px;
    margin: 5px 2.5px 0;
  }
  section.calendar table tbody td ul li a {
    min-height: 25px;
    padding: 3px 1px 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font-size: 0.7em;
    line-height: 1.2em;
  }

  /****************************************
  	セクション（詳細）					*
  *****************************************/
  section.detail {
    padding: 15px 10px;
  }
  section.detail .column dl.convention dd span {
    top: 3cqw;
    -webkit-text-stroke: 2px black;
    text-stroke: 2px black;
  }
  section.detail .column dl dd ul.checks {
    gap: 2px;
  }
  section.detail .column dl dd ul.checks li {
    padding: 2px 4px;
    font-size: 0.75em;
  }
  section.detail table thead th, section.detail table thead td,
  section.detail table tbody th,
  section.detail table tbody td {
    padding: 8px;
  }
  section.detail table tbody td ul.character li {
    width: calc((100% - 5 * 2px) / 6);
  }
  section.detail table tbody td ul.icons li a img {
    width: 24px;
    height: 24px;
  }

  /****************************************
  	セクション（フォーム）				*
  *****************************************/
  section.form {
    padding: 15px 10px;
  }
  section.form table thead th, section.form table thead td {
    padding: 8px;
  }
  section.form table tbody tr {
    display: flex;
    flex-direction: column;
  }
  section.form table tbody tr:not(:first-child) th {
    border-top: none;
  }
  section.form table tbody th {
    width: 100%;
    padding: 4px 8px;
  }
  section.form table tbody th span.ranking {
    display: inline-block;
  }
  section.form table tbody td {
    padding: 8px;
  }
  section.form table tbody td:not(:first-child) {
    border-top: none;
  }
  section.form table tbody td ul.character li {
    width: calc((100% - 5 * 2px) / 6);
  }
  section.form table tbody td ul.icons li a img {
    width: 24px;
    height: 24px;
  }

  /****************************************
  	セクション（文書）					*
  *****************************************/
  section.document {
    padding: 15px 10px;
  }
  section.document dl {
    gap: 15px;
  }
  section.document dl dd {
    padding-left: 15px;
  }

  /****************************************
  	セクション（広告）					*
  *****************************************/
  section.advertise {
    padding: 15px 10px;
  }

  /****************************************
  	セクション（サンプル）				*
  *****************************************/
  section.sample {
    padding: 15px 10px;
  }
  section.sample .box ul {
    gap: 2px;
    padding: 5px;
  }
  section.sample .box ul li {
    width: calc((100% - (6px * 2)) / 7);
  }

  /****************************************
  	パンくず							*
  *****************************************/
  #breadcrumbs ol {
    justify-content: left;
  }

  /****************************************
  	フッター							*
  *****************************************/
  footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  footer .link ul {
    text-align: center;
    flex-wrap: wrap;
    gap: 15px 0;
  }
  footer .link ul li {
    width: calc(100% / 2);
  }

  /****************************************
  	パーツ（フォーム）					*
  *****************************************/
  label.radio span,
  label.checkbox span {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  label.radio b,
  label.checkbox b {
    top: -6px;
    margin-left: 5px;
  }
}