@charset "UTF-8";
/* CSS Document */ :root {
  --base-fnt: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Osaka, Sans-Serif;
  --base-clr: #1a1a1a;
  --main-clr: #7c002f;
  --main-text-clr: #9c1447;
  --green: #0eb759;
  --fnt-osw: 'Oswald', var(--base-fnt);
  --pink: #ee3939;
  --yellow: #fffb8e;
  --d-pink: #df0153;
  --bdr-gry: #aaaaaa;
  --wall-green: #f8fffd;
  --wall-pink: #f7eaef;
  --wall-gry: #f2f2f2;
  --btn-clr-grn: linear-gradient(180deg, #0f9f30, #22db4d);
  --btn-clr-org: linear-gradient(180deg, #f97500, #f0b544);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .4s var(--easing);
  --gap-size: min(20px, 3vw);
}
/*Common
===============================================================*/
body {
  width: 100%;
  height: 100%;
  font-family: var(--base-fnt);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
  -moz-font-feature-settings: 'liga', 'kern';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
*/
  font-size: min(16px, 3.6vw);
  font-weight: 400;
  background-size: 100%;
  background-position: top center;
  background-color: #f2f8f6;
  color: var(--base-clr);
}
#pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 5;
  display: none;
}
#pagetop.is-fit {
  position: absolute;
  bottom: auto;
  top: 0;
  transform: translateY(-100%);
}
.fnt-osw {
  font-family: 'Oswald';
}
/*Container
===============================================================*/
#container {
  width: min(640px, 100%);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .16);
}
#container::-webkit-scrollbar {
  display: none;
}
.inner {
  padding-left: min(40px, 2vw);
  padding-right: min(40px, 2vw);
}
/*header/nav
===============================================================*/
header {
  width: min(640px, 100%);
  height: min(50px, 12vw);
  padding-bottom: min(10px, 2vw);
  padding-top: min(10px, 2vw);
  display: grid;
  -ms-align-items: center;
  align-items: center;
  top: 0;
  left: 50%;
  background: var(--main-clr);
  translate:-50% 0;
  position: fixed;
    z-index: 10;
}
.head-logo {
  display: grid;
  place-items: baseline;
  font-weight: 900;
  color: #fff;
  font-size: min(24px, 4vw);
}
/*humhum
====================*/
.hum-btn-wrap {
  padding-top: 4px;
  width: min(640px, 100%);
  height: min(50px, 12vw);
  position: fixed;
  left: 50%;
  top: 0;
  translate: -50% 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: calc(infinity);
}
#hum-btn {
  width: min(50px, 12vw);
  aspect-ratio: 1;
  pointer-events: all;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
#hum-btn button {
  width: 60%;
  height: 3px;
  background: #fff;
  position: relative;
  transition: rotate var(--transit);
}
#hum-btn button::before, #hum-btn button::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #fff;
  transition: all var(--transit);
}
#hum-btn button::before {
  top: 8px;
}
#hum-btn button::after {
  top: -8px;
}
#hum-btn.open button {
  rotate: 45deg;
  background: var(--main-clr);
}
#hum-btn.open button::before, #hum-btn.open button::after {
  rotate: 90deg;
  top: 50%;
  translate: 0 -50%;
  background: var(--main-clr);
}
#l-nav {
  width: min(640px, 100%);
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 50%;
  translate:-50% 0;
  z-index: 100;
  transition:all var(--transit);
  height: 100vh;
  overflow-y: scroll;
  opacity: 0;
  background: url(../imgs/icon/magic.svg) no-repeat right -200px top -170px / cover;
  background-color: var(--wall-pink);
  background-size: min(600px, 140vw);
}
#l-nav.slide{
  visibility: visible;
  opacity: 1;
}
.l-nav_inner{
  width: auto;
  margin-left: auto;
  min-height: 100%;
  padding: min(80px,15vw) min(30px,5vw) min(160px,25vw);
}
.l-nav__menu > li {
  font-weight: 600;
  background: radial-gradient(circle farthest-side, var(--main-clr), var(--main-clr) 50%, transparent 50%, transparent);
    background-size: 6px 5px;
  background-repeat: repeat-x;
  background-position: bottom left;
  padding-bottom: min(25px,6vw);
}
.l-nav__menu > li:nth-child(n+2){
  padding-top: min(20px,5vw);
}
.l-nav__menu > li > a{
  display: block;
  font-size: min(20px,4.5vw);
}
.l-nav__menu > li .child{
  margin-top: min(15px,3vw);
  font-size: min(16px,4.2vw);
}
.l-nav__menu > li .child > li:nth-child(n+2){
  margin-top: 10px;
}
.l-nav__menu > li.tile .child{
    display: grid;
    place-items: flex-start;
    gap: var(--gap-size);
    grid-template-columns: repeat(auto-fill, minmax(
    min(120px, calc((100% - (var(--gap-size) * 2)) / 3)), 1fr));
    padding-top: min(15px, 3vw);
}
.l-nav__menu > li.tile .child > li:nth-child(n+2){
    margin: 0;
}
.tile_box{
    background: #fff;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 2px solid #711630;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}
.tile_box a{
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
}
.tile_box figure{
    display: grid;
    place-items: center;
}
.tile_box figure span{
    width: min(80px, 16vw);
}
.l-nav__menu > li.tile > a{
    pointer-events: none;
}
.l-nav__menu > li.tile .child > li:nth-child(1)::before,
.l-nav__menu > li.tile .child > li:nth-child(2)::before,
.l-nav__menu > li.tile .child > li:nth-child(3)::before{
    content: "";
    width: min(35px, 8vw);
    aspect-ratio: 1 / 0.8947;
    position: absolute;
    top: 1%;
    left: -10%;
    background: url(../imgs/icon/rank01.svg) no-repeat;
    background-size: 100%;
    background-position: center top;
    translate: 0 -60%;
    transform: rotate(-13deg);
}
.l-nav__menu > li.tile .child > li:nth-child(2)::before{
    background: url(../imgs/icon/rank02.svg) no-repeat;
}
.l-nav__menu > li.tile .child > li:nth-child(3)::before{
    background: url(../imgs/icon/rank03.svg) no-repeat;
}
/*main
===============================================================*/
main {
  flex: 1;
}
/*Content
=====================================*/
#content {
  margin-top: min(20px, 4vw);
}
.fw-b {
  font-weight: 600;
}
.line-ylw {
  background: linear-gradient(rgba(255, 256, 186, 0) 60%, rgba(255, 256, 186, 1) 60%)
}
.fc-pink {
  color: var(--pink);
}
.in-text {
  line-height: calc(26/16);
}
.in-text.wid {
  font-size: min(16px, 4.2vw);
}
.in-text a{
    text-decoration: underline;
    color: var(--d-pink);
}
.att-list {
  counter-reset: count 0;
}
.att-list.num {
    counter-reset: count 0;
}
.att-list a{
    text-decoration: underline;
}
* + .att-list {
    margin-top: min(25px, 3vw);
}
.att-list > li {
    font-size: min(14px, calc(100vw / 30));
    color: #555555;
    padding-left: 2em;
    line-height: calc(21/16);
}
.att-list.num > li {
    padding-left: 2em;
}
.att-list > li::before {
    counter-increment: count 1;
  content: "※"counter(count);
  position: absolute;
  left: 0;
  top: 0;
}
.fl{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.fl_c{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
}
h2.m_circle-h2{
    background: url(../imgs/icon/magic.svg) no-repeat center center / cover;
    background-color: var(--main-clr);
    padding: min(20px, 4vw) min(10px, 2vw);
    background-size: 70%;
    color: #fff;
    display: grid;
    font-size: min(24px, calc(100vw / 24));
    place-items: center;
    font-weight: 800;
    line-height: 1.2;
}
h2.m_circle-h2 .m_circle-h2__sub::before {
    content: "";
    position: absolute;
    right: min(-25px,-3vw);
    top: 50%;
    width: 20px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg) translateY(-50%);
}
h2.m_circle-h2 .m_circle-h2__sub::after {
    content: "";
    position: absolute;
    left: min(-25px,-3vw);
    top: 50%;
    width: 20px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg) translateY(-50%);
}
h2.m_circle-h2 .m_circle-h2__title{
    font-size: 1.35em;
}
h2.m_circle-h2 .m_circle-h2__title > span{
    color: #fffb8e;
}
h2.m_circle-h2 .m_circle-h2__title > span.num{
    font-size: 1.35em;
}
h2.icon-title{
    display: grid;
    grid-template-columns: min(20px, 5vw) auto;
    align-items: center;
    gap: .3em;
    font-size: min(22px, 4.5vw);
    font-weight: 600;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--main-clr);
}
h3.dot-h3{
    margin-top: min(30px, 6vw);
    font-weight: 700;
    font-size: min(22px, 4.8vw);
    padding-left: 1.35em;
}
h3.dot-h3::before{
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: .85em;
    height: .85em;
    border-radius: 50%;
    background: var(--main-clr);
}
h3.dot-h3.gry::before{
    background: #9f9f9f;
}
.trg-title {
    justify-content: center;
    padding-bottom: .75em;
}
.trg-title span {
    padding-left: 1.25em;
    padding-right: 1.25em;
    color: #1a1a1a;
    font-weight: 600;
}
.trg-title span::before,
.trg-title span::after {
    content: "▼";
    position: absolute;
    color: var(--main-clr);
    top: 50%;
    translate: 0 -50%;
    font-size: .825em;
}
.trg-title span::before {
    left: 0;
}
.trg-title span::after {
    right: 0;
}
#update-date{
    display: block;
    margin-top: min(10px, 1.5vw);
}
/*button setting +++++++++++++++++*/
.button_block{
    gap: min(10px, 3vw);
    margin-top: min(20px, 6vw);
}
.button_border{
    width: 100%;
}
.button_border a {
  border-radius: 100vw;
  display: grid;
  grid-template-columns: min(25px, 5vw) auto;
  align-items: center;
  justify-content: center;
  gap: .3em;
  font-size: min(22px, 3.6vw);
  font-weight: 600;
    padding: min(10px, 2vw);
    line-height: calc(26 / 22);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    animation: purupuru2 1.2s infinite;
}
.button_border.beginner a{
    border: 2px solid #0eb759;
    color: #0eb759;
}
.button_border.ball a{
    border: 2px solid #f88c18;
    color: #f88c18;
}
.button_border a span img {
    aspect-ratio: 1 / 1.2;
}
.button_solid.button_border.beginner a{
    background: #5ac682;            /* ベタ塗り */
  color: #ffffff;                 /* 文字色 */
  border: 2px solid #ffffff;      /* 境界線 */
  /* 影：R50 G114 B74 透過80% / 下に3px / くっきり */
  box-shadow: 0 3px 0 rgba(50, 114, 74, 0.8);
}
.button_solid.button_border.ball a{
  background: #f88c18;        /* ベタ塗り */
  color: #ffffff;                 /* 文字色 */
  border: 2px solid #ffffff;      /* 境界線 */
  /* 影：R144 G79 B8 / 透過80% / 下に3px / くっきり */
  box-shadow: 0 3px 0 rgba(144, 79, 8, 0.8);
}
/*datamap +++++++++++++++++++*/
.fkds-box {
    display: grid;
    grid-template-columns: min(90px, 23.5vw) auto;
    gap: min(16px, 5vw);
}
.fkds-box .comment p {
    background: var(--wall-pink);
    padding: min(10px, 3vw) min(15px, 5vw);
    border-radius: 20px;
}
.fkds-box .comment p::before {
    content: "";
    width: min(15px, 4vw);
    aspect-ratio: 1;
    background: var(--wall-pink);
    position: absolute;
    left: 2px;
    top: 2em;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    translate: -100% 0;
}
.fkds-box figcaption{
    font-size: min(10px, 2.5vw);
    padding-top: 5px;
    line-height: 1.3;
}
.sec-datamap-blc {
  padding-bottom: min(40px, 8vw);
}
.sec-datamap-blc .top-text {
  margin-top: min(20px, 5vw);
}
.data-graph {
  margin-top: min(20px, 6vw);
}
/*writer-block +++++++++++++++++*/
.writer-block{
    background: #f9f9f9;
    padding: min(20px, 4vw) min(20px, 4vw);
    margin-top: min(20px, 5vw);
    border-radius: 20px;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: min(90px, 23.5vw) auto;
    gap: min(16px, 5vw);
}
.writer-block_ttl{
    display: grid;
    grid-template-columns: min(20px, 10vw) auto;
    align-items: center;
    gap: min(5px, 3vw);
    font-weight: 700;
    color: var(--main-clr);
    font-size: min(18px, 4.2vw);
    grid-column: 1 / -1;
}
.writer-block_text h4{
    font-size: min(18px, 4.2vw);
    font-weight: 700;
}
.writer-block_text{
    display: grid;
    gap: min(5px, 1vw);
}
.writer-block_text p{
    font-size: .95em;
    line-height: calc(20 / 15);
}
/*sec-point-blc++++++++++++++++++++*/
.sec-point-blc {
    padding-bottom: min(58px, 14vw);
    background: var(--wall-gry);
}
.point-list-wrap{
    background: #fff;
    padding: min(40px, 6vw) min(20px, 3vw);
    border-radius: 15px;
    margin-top: min(40px, 6vw);
    margin-bottom: min(40px, 6vw);
    display: grid;
    gap: min(40px, 6vw);
}
.point-list-wrap li > * + *{
    margin-top: min(14px, 3vw);
}
/*define-table++++++++++++++++++++*/
.define-table {
    display: grid;
    justify-content: center;
    font-size: 1.15em;
    line-height: calc(16 / 12);
}
.define-title {
    background: #462a35;
    color: #fff;
    text-align: center;
    padding: min(13px, 3vw);
    font-weight: 700;
    font-size: 1.125em;
}
.define-table dl {
    border: 1px solid #9f9f9f;
}
.define-table dl > div {
    display: grid;
    grid-template-columns: min(200px,40vw) auto;
}
.define-table dl dt {
    display: grid;
    place-content: center;
    background: #f1f1f1;
    font-weight: 700;
}
.define-table dl dd {
    padding: 7px 10px;
    border-left: 1px solid #9f9f9f;
}
.define-table dl > div:nth-child(n + 2) {
    border-top: 1px solid #9f9f9f;
}
/*simple-table++++++++++++++++++++*/
.simple-table {
  line-height: calc(20 / 16);
    width: 100%;
}
.simple-table th {
  background: #f88c18;
  color: #fff;
  padding: 5px 8px;
  font-weight: 600;
  border: 1px solid #9f9f9f;
    vertical-align: middle;
    text-align: center;
}
.simple-table td {
  padding: 5px 8px;
  border: 1px solid #9f9f9f;
  vertical-align: middle;
}
.simple-table td > span{
    display: inline-block;
}
.simple-table tbody tr td:nth-child(1) {
  background: #f7f7f7;
  text-align: center;
  font-weight: 600;
}
.simple-table td:nth-child(1){
    width: min(150px, 20vw);
}
.simple-table td:nth-child(2){
    width: min(150px, 26vw);
}
.simple-table_grn.simple-table th{
    background: var(--green);
}
.simple-table_3rows.simple-table td:nth-child(1){
    width: min(80px, 8vw);
}
.simple-table_3rows.simple-table td img{
    aspect-ratio: 1 / 1;
    width: min(30px,8vw);
    height: auto;
    margin: 0 auto;
}
.simple-table_3rows.simple-table td > span{
    display: inline;
}
.simple-table td > span.sml_cmnt_blk{
    font-size: .845em;
    display: flex;
    padding-top: 2px;
}
.sml_cmnt_blk::before{
    content: "※";
}
/*link-table++++++++++++++++++++*/
.link-table {
  line-height: calc(20 / 16);
    width: 100%;
}
.link-table th {
  color: #fff;
  padding: 5px 8px;
  font-weight: 600;
  border: 1px solid #9f9f9f;
}
.link-table.org th {
  background: #f88c18;
}
.link-table.purple th {
  background: #7f58c7;
}
.link-table.red th {
  background: #c63c3c;
}
.link-table td {
  padding: 5px 8px;
  border: 1px solid #9f9f9f;
  vertical-align: middle;
}
.link-table td:nth-child(1){
    width: min(100px, 25vw);
    background: #f7f7f7;
    font-weight: 600;
    padding: 10px 5px 10px min(30px,7.5vw);
}
.link-table td:nth-child(1)::before{
    content: '';
    position: absolute;
    z-index: 0;
    width: min(20px, 6vw);
    aspect-ratio: 1;
    background: url(../imgs/icon/rank01.svg) no-repeat center 2px / contain;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
}
.link-table tr:nth-child(2) td:nth-child(1)::before{
    background: url(../imgs/icon/rank02.svg) no-repeat center 2px / contain;
}
.link-table tr:nth-child(3) td:nth-child(1)::before{
    background: url(../imgs/icon/rank03.svg) no-repeat center 2px / contain;
}
.link-table td:nth-child(2){
    width: calc(100% - min(100px, 25vw));
}
.link-table td a{
    color: #016dc4;
    text-decoration: underline;
}
.link-table td a + a{
    padding-left: .5em;
}
/*check-table++++++++++++++++++++*/
.check-table {
    display: grid;
    justify-content: center;
    line-height: calc(16 / 12);
    padding-top: min(20px,6vw);
}
.check-table dl {
    border: 1px solid #9f9f9f;
}
.check-table dl > div {
    display: grid;
    grid-template-columns: min(200px,36vw) min(60px,14vw) auto;
}
.check-table dl > div.check-table_head{
    background: #c7b5bc;
    font-weight: 600;
}
.check-table dl dt{
    font-weight: 600;
    display: grid;
    padding: 7px 10px;
    align-items: center;
    word-break: keep-all;
}
.check-table dl dd {
    padding: 7px 10px;
    border-left: 1px solid #9f9f9f;
    display: grid;
}
.check-table dl dd:nth-of-type(1) {
    place-content: center;
}
.check-table dl > div:nth-child(n + 2) {
    border-top: 1px solid #9f9f9f;
}
/*sec-hikaku-blc++++++++++++++++++++*/
.sec-hikaku-blc{
    padding-bottom: min(50px, 6vw);
}
.sec-hikaku-blc .inner{
    padding-top: min(50px, 6vw);
}
/*hikaku-table++++++++++++++++++++*/
.hikaku-table-wrap {
  width: 100%;
  padding-bottom: 10px;
  padding-top: min(20px,6vw);
  font-size: min(14px, 3.5vw);
}
.hikaku-table {
  width: 100%;
  table-layout: fixed;
}
.hikaku-table::after {
  content: "";
  width: 1px;
  height: 100%;
  background: #c3c2c2;
  position: absolute;
  left: 0;
  top: 0;
}
.hikaku-table tbody{
    background: #fff;
}
.hikaku-table tr th{
    background: #f9f9f9;
}
.hikaku-table tr th,
.hikaku-table tr td {
  border: 1px solid #c3c2c2;
  vertical-align: middle;
  text-align: center;
  line-height: 1.2;
  width: 110px;
  padding: 10px 5px;
  font-weight: 600;
}
.hikaku-table .num{
    font-size: 1.35em;
    display: contents;
}
.hikaku-table figure {
    display: grid;
    place-items: center;
}
.hikaku-table figcaption {
  min-height: 2em;
  display: grid;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
}
.hikaku-table td > div{
    -ms-align-items: center;
    align-items: center;
    gap: 5px;
}
.hikaku-table tr > td:nth-of-type(1),
.hikaku-table tr > th:nth-of-type(1){
  position: sticky;
  left: 0;
  z-index: 1;
  width: 90px;
    background: #fff;
}
.hikaku-table tr > td:nth-of-type(1)::before,
.hikaku-table tr > th:nth-of-type(1)::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 99%;
  height: 100%;
  border-left: 1px solid #C3C2BB;
  border-right: 1px solid #C3C2BB;
  z-index: -2;
}
.hikaku-table tr > th:nth-of-type(1){
    background: #f9f9f9;
}
.hikaku-table tr > td:nth-of-type(2),
.hikaku-table tr > th:nth-of-type(2){
  width: 80px;
}
.hikaku-table tr:nth-child(1) td:nth-child(2){
    color: var( --d-pink);
    font-size: min(20px, 5vw);
}
.hikaku-table tr:nth-child(3) td:nth-child(2) p.mark{
    color: var( --d-pink);
}
.hikaku-table td.hikaku-table_thum span:nth-of-type(1){
    width: min(60px, 12vw);
}
.hikaku-table td.hikaku-table_thum.bg-img span:nth-of-type(1){
    width: min(65px, 16vw);
}
.hikaku-table tbody tr:nth-of-type(1) {
  border: 2px solid var(--d-pink);
}
.hikaku-table tr:nth-of-type(1) td{
    background-color: #fffddf;
}
.hikaku-table tr:nth-of-type(1) td::before{
    content: "";
    position: absolute;
    top: 0;
    left: -1%;
    width: 99%;
    height: 100%;
    border-left: 2px solid var(--d-pink);
    z-index: -1;
}
.hikaku-table td .mark::before{
    content: "";
    width: min(50px, 12vw);
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    opacity: .2;
}
.hikaku-table td .mark {
    min-height: 3em;
    display: grid;
    place-content: center;
}
.hikaku-table td .score {
    background: #462a35;
    color: #fff;
    padding: 3px 1em 4px;
    border-radius: 100vmax;
    font-size: min(13px, 3vw);
    line-height: 1;
}
.hikaku-table td .mark.max::before {
    background-image: url(../imgs/icon_good.svg);
}
.hikaku-table td .mark.mid::before {
    background-image: url(../imgs/icon_usual.svg);
}
.hikaku-table td .mark.min::before {
    background-image: url(../imgs/icon_bad.svg);
}
.hikaku-table td .in-text{
    font-size: min(13px, .85em);
/*    font-weight: 400;*/
    line-height: calc(20 / 16);
}
.hikaku-table td .button,
.hikaku-table td .button_org{
  padding-left: 3px;
  padding-right: 3px;
  overflow: hidden;
  width: 100%;
}
.hikaku-table td .button a,
.hikaku-table td .button_org a{
  display: grid;
  place-content: center;
  background: var(--btn-clr-grn);
  color: #fff;
  border-radius: 100vmax;
  height: 2.8em;
  font-weight: 600;
  font-size: min(14px, 3.2vw);
  font-feature-settings: "palt";
}
.hikaku-table td .button_org a{
  background: var(--btn-clr-org);
}
.hikaku-table td .button a::before,
.hikaku-table td .button_org a::before{
  content: "";
  animation: shine 3s ease-in-out infinite;
  background-color: rgba(255, 255, 255, .5);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -50px;
  transform: rotate(45deg);
  width: 15px;
}
.hikaku-table td .button a span,
.hikaku-table td .button_org a span {
  padding-right: .75em;
}
.hikaku-table td .button a span::before,
.hikaku-table td .button_org a span::before{
  content: "";
  width: 3px;
  aspect-ratio: 1;
  border: 1.5px solid;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  rotate: 45deg;
}
.hikaku-table .att {}
.hikaku-table .att::after {
  counter-increment: number 1;
  content: "※"counter(number);
  /*
  position: absolute;
  top: 0;
  right: 0;
*/
  font-size: min(10px, 3vw);
  font-weight: 400;
}
.sec-hikaku-blc .att-list {
  display: grid;
  /* justify-content: center; */
  margin-top: min(30px, 3vw);
}
.fixed-header-container {
  position: fixed;
  top: var(--header-h, 0px);
  z-index: 99;
  background: #fff;

  /* 追加 */
  overflow: hidden;
}
.fixed-header-table {
  table-layout: fixed;
  background: #fff;
}

/*acv-ranking-list++++++++++++++++++++*/
.acv-ranking-list{
    margin-top: min(50px, 6vw);
    border-top: 1px solid #D1CDD4;
    counter-reset: rank 0;
}
.acv_ranking{
    padding: min(10px, 2vw) min(10px, 2vw);
    padding-right: min(25px, 6vw);
    border-bottom: 1px solid #D1CDD4;
}
.acv_ranking .ranking_head {
    gap: 0 min(30px, 2vw);
    line-height: 1.3;
    padding-left: min(4px, 1vw);
    -ms-align-items: flex-end;
    align-items: flex-end;
    margin-bottom: min(15px, 3vw);
}
.acv_ranking .ranking_data {
    gap: min(20px, 2vw);
     align-items: center; 
    margin-bottom: min(10px, 2vw);
}
.acv_ranking .ranking_head > .title {
    -ms-align-items: flex-end;
    align-items: flex-end;
    gap: 5px;
}
.acv_ranking .ranking_head > .title .site_name {
    font-size: min(22px, 4.5vw);
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
}
.acv_ranking .ranking_head .rank.num {
    width: min(35px, 6vw);
    aspect-ratio: 1 / 0.8947;
}
.acv_ranking .rank.num::after {
    counter-increment: rank 1;
    content: counter(rank);
    font-size: min(24px, 5vw);
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 0;
    font-family: Oswald;
    font-style: italic;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}
.acv_ranking .rank.num::before {
    content: '';
    position: absolute;
    top: .2em;
    left: .2em;
    z-index: 0;
    width: 100%;
    height: 100%;
    translate: 0 -10%;
    background: url(../imgs/icon/rank.svg) no-repeat;
    background-size: contain;
}
.acv-ranking-list > .acv_ranking:nth-child(1) .rank.num::before {
    background: url("../imgs/icon/rank01.svg") no-repeat;
    background-size: contain;
}
.acv-ranking-list > .acv_ranking:nth-child(2) .rank.num::before {
    background: url("../imgs/icon/rank02.svg") no-repeat;
    background-size: contain;
}
.acv-ranking-list > .acv_ranking:nth-child(3) .rank.num::before {
    background: url("../imgs/icon/rank03.svg") no-repeat;
    background-size: contain;
}
.acv_ranking .site-score_title {
    font-size: min(16px, 3vw);
    white-space: nowrap;
    letter-spacing: normal;
}
.acv_ranking .site-score_num .num{
    font-size: 1.45em;
    color: var(--d-pink);
    font-weight: 900;
}
.acv_ranking .ranking_head .site-score {
    margin-left: auto;
    -ms-align-items: baseline;
    align-items: baseline;
    gap: min(10px, 2vw);
    font-weight: 600;
    line-height: 1;
    font-size: min(24px, 5vw);
    background: linear-gradient(rgba(255, 256, 186, 0) 80%, rgba(255, 256, 186, 1) 80%);
}
/*
.acv_ranking .site-score .score {
    width: min(160px, 16vw);
}
.acv_ranking .site-score .count {
    font-size: min(30px, 5.2vw);
    color: var(--d-pink);
}
*/
.acv_ranking .site_thumb {
    width: min(200px, 32vw);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bdr-gry);
    height: 100%;
}
.acv_ranking .ranking_data_box {
    width: calc(100% - min(220px, 34vw));
    gap: min(15px,2vw);
}
.acv_ranking .cvr.arw {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.acv_ranking .cvr.arw::after {
    content: "";
    width: 8px;
    aspect-ratio: 1;
    position: absolute;
    right: min(10px, 1.8vw);
    top: 50%;
    translate: 0 -50%;
    border: 2px solid;
    border-color: var(--d-pink) var(--d-pink) transparent transparent;
    rotate: 45deg;
}
.acv_ranking .site-detail_list{
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}
.acv_ranking .site-detail_list li.grd {
    display: grid;
    grid-template-columns: 5.5em auto;
    font-size: min(16px, 3.2vw);
    line-height: calc(19 / 16);
    font-weight: 600;
}
.acv_ranking .site-detail_list li.grd:nth-child(1){
    border-bottom: 1px solid #c7c7c7;
}
.acv_ranking .site-detail_list li.grd .label {
    color: #fff;
    background: #f88c18;
    padding: 3px;
    display: grid;
    place-content: center;
}
.acv_ranking .site-detail_list li.grd:nth-child(2) .label{
    background: var(--green);
}
.acv_ranking .site-detail_list li.grd > p {
    padding: 5px;
}
.acv_ranking .ranking_data_box .site-text {
    font-size: min(1em, 3.5vw);
    line-height: calc(20 / 14);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
/*アコーディオン++++++++++++++++++++*/
.js-details-content {
  overflow: hidden;
}
.details-summary{
    background: var(--wall-gry);
    padding: .85em;
    text-align: center;
    font-weight: 600;
    text-decoration: underline;
    margin: min(10px, 2vw);
}
/*sec-ranking-blc++++++++++++++++++++*/
.sec-ranking-blc{
    padding-bottom: min(40px, 10vw);
    background: var(--wall-gry);
/*    padding-top: min(50px, 6vw);*/
}
.sec-ranking-box{
    margin-bottom: min(40px, 6vw);
    display: grid;
    gap: min(40px, 6vw);
    counter-reset: rank 0;
}
.ranking-box-wrap{
    display: grid;
    gap: min(15px, 3vw);
    background: #fff;
    padding: min(40px, 6vw) min(20px, 3vw);
}
#content .ranking-box-wrap{
    border-radius: 15px;
}
.ranking-box-wrap > div + div:not(.cta-button):not(.ranking__point):not(.ranking__target) {
    padding-bottom: min(10px, 1vw);
}
.ranking__head{
    display: grid;
    gap: min(15px, 3vw);
}
.ranking__head .rank.num {
    width: min(35px, 6vw);
    aspect-ratio: 1 / 0.8947;
}
.ranking__head .site-name{
    display: grid;
    grid-template-columns: min(35px, 6vw) auto;
    -ms-align-items: flex-end;
    align-items: flex-end;
    gap: .65em;
    font-weight: 600;
    padding-bottom: 1.25em;
}
.ranking__head .site-name::before{
    background: radial-gradient(circle farthest-side, var(--main-clr), var(--main-clr) 40%, transparent 40%, transparent);
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.ranking__head .site-name span{
    font-size: min(30px, calc(100vw / 18));
}
.sec-ranking-box > li .ranking__head .rank.num::before {
    content: '';
    position: absolute;
    top: .2em;
    left: .2em;
    z-index: 0;
    width: 100%;
    height: 100%;
    translate: 0 -10%;
    background: url("../imgs/icon/rank.svg") no-repeat;
    background-size: contain;
}
.ranking__head .rank::after {
    counter-increment: rank 1;
    content: counter(rank);
    font-size: min(24px, 5vw);
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 0;
    font-family: Oswald;
    font-style: italic;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
                 -1px 1px 0 #fff, 1px -1px 0 #fff,
                 1px 0 0 #fff, -1px 0 0 #fff,
                 0 1px 0 #fff, 0 -1px 0 #fff;
}
.sec-ranking-box > li:nth-child(1) .ranking__head .rank.num::before{
    background: url("../imgs/icon/rank01.svg") no-repeat;
    background-size: contain;
}
.sec-ranking-box > li:nth-child(2) .ranking__head .rank.num::before{
    background: url("../imgs/icon/rank02.svg") no-repeat;
    background-size: contain;
}
.sec-ranking-box > li:nth-child(3) .ranking__head .rank.num::before{
    background: url("../imgs/icon/rank03.svg") no-repeat;
    background-size: contain;
}
.ranking__score{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    -ms-align-items: center;
    align-items: center;
}
.ranking__score > figure:nth-child(3){
    grid-column: 1 / -1;
}
.ranking__point {
    background: #edfcff;
    margin-top: min(10px,3vw);
}
.ranking__target{
    background: #fff5e6;
    margin-top: min(15px,4vw);
}
.ranking__point ul,
.ranking__target ul {
    padding: min(30px, 8vw) min(30px, 2vw) min(15px, 3vw);
    font-weight: 600;
    font-size: min(18px, 3.6vw);
}
.ribon_title{
    position: absolute;
    width: min(200px, 44vw);
    top: -1em;
    left: -6px;
}
.check-list > li {
    line-height: calc(16 / 10);
    padding-left: 1.5em;
}
.check-list > li::before {
    content: "";
    width: 1em;
    aspect-ratio: 1;
    background: url("../imgs/icon/check.svg") no-repeat center / cover;
    position: absolute;
    left: 0;
    top: .25em;
}
.ranking__detail,
.ranking__detail_box,
.ranking__voice,
.ranking__voice_box,
.ranking__price,
.ranking__price_box,
.ranking__campaign,
.ranking__campaign_box{
    display: grid;
    gap: min(15px, 4vw);
}
.ranking__voice .fkds-box .comment p,
.ranking__voice .fkds-box .comment p::before{
    background: #f9f9f9;
}
.ranking__voice .in-text .in-text__ttl{
    font-weight: 600;
    font-size: 1.15em;
    padding-bottom: .25em;
    display: block;
    line-height: calc(22 / 18);
}
.ranking__voice .in-text a{
    color: #016dc4;
    font-size: .95em;
}
/*sec-teller-box++++++++++++++++++++*/
.sec-teller-box{
    padding-top: min(50px, 6vw);
    padding-bottom: min(40px, 10vw);
    display: grid;
    gap: min(40px, 6vw);
}
.sec-teller-wrap{
    display: grid;
    gap: min(15px, 3vw);
}
/*cta-button++++++++++++++++++++*/
.cta-button{
    display: grid;
    gap: 5px;
}
.cta-button a{
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--btn-clr-grn);
    border-radius: 10px;
    gap: min(7px,1vw);
    font-weight: 800;
    padding: min(20px, 3vw) 5px;
    box-shadow: rgb(17, 161, 50) 0px 4px 0px;
    animation: 3s ease-in-out 0s infinite normal none running dokudoku;
}
.cta-button a::before {
    content: "";
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    right: 0;
    width: min(20px, 4vw);
    translate: -40% -50%;
    transition: right .3s ease;
    background: url("../imgs/btn-arrow.png") no-repeat center center/ 100%;
}
.cta-button a .sub {
    font-size: min(22px, 4vw);
    color: #fff843;
}
.cta-button a .main {
    font-size: min(28px, calc(100vw / 22));
}
.sml_cmnt {
    font-size: .845em;
    text-align: right;
    color: #7d7d7d;
    margin-left: auto;
    margin-top: min(10px, 1vw);
}
/*footer
===============================================================*/
.footer_txt{
  background: var(--wall-gry);
  padding: 1em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
  gap: 3em;
}
.footer_txt a::before {
    content: "";
    width: 5px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 51%;
    left: -1em;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-left: 5px solid var(--main-clr);
    transform: translateY(-50%);
}
footer {
  background: var(--main-clr);
  color: #fff;
  padding: min(20px,5vw) min(15px,3vw);
}
footer .copy{
  text-align: center;
  font-size: min(12px,3.2vw);
}
/*フローティング
===============================================================*/
.float-button__wrap {
    display: none;
    width: min(100px, 20vw);
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}
.float-button__inner{
    gap: min(10px,2vw);
}
.float-button__wrap a {
    border-radius: 100vw;
    aspect-ratio: 1;
    color: #fff;
    text-align: center;
    padding: min(10px, 2vw);
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: min(6px, 2vw);
    line-height: 1.2;
    font-size: min(16px, 3.6vw);
    box-shadow: 0 10px 10px rgba(0, 0, 0, .16);
    border: 2px solid var(--main-clr);
}
.float-button_pink{
    background: var(--main-clr);   
}
.float-button_pink p{
    padding-top: 10px;
}
.float-button_pink figure{
    width: min(15px,3.5vw);
}
.float-button_pinkwhite{
    background: #fff;
}
.float-button_pinkwhite figure{
    width: min(40px,8vw);
}
/*animation
===============================================================*/
@keyframes shine{
0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
}
80% {
    transform: scale(0) rotate(45deg);
    opacity: .5;
}
81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
}
100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
}
    }
@keyframes dokudoku{
    0% {
    box-shadow: rgb(17, 161, 50) 0px 4px 0px;
    top: 0px;
}
10% {
    box-shadow: rgb(17, 161, 50) 0px 0px 0px;
    top: 4px;
}
20% {
    box-shadow: rgb(17, 161, 50) 0px 4px 0px;
    top: 0px;
}
30% {
    box-shadow: rgb(17, 161, 50) 0px 0px 0px;
    top: 4px;
}
40% {
    box-shadow: rgb(17, 161, 50) 0px 4px 0px;
    top: 0px;
}
}
@keyframes purupuru2 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.98, 0.95)
    }
}