@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: #3b4b58;
  --green: #2ec3a7;
  --fnt-osw: 'Oswald', var(--base-fnt);
  --pink: #f1807f;
  --yellow: #fffdba;
  --d-pink: #e95a63;
  --bdr-gry: #c3c2c2;
  --wall-green: #f8fffd;
  --wall-pink: #f9e4e6;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .4s var(--easing);
}
/*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-image: linear-gradient(90deg, #fcf6e8, #f8e4e4);
  background-size: 100%;
  background-position: top center;
  background-color: #f8e4e4;
  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(460px, 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;
}
#container::-webkit-scrollbar {
  display: none;
}
.inner {
  padding-left: min(40px, 2vw);
  padding-right: min(40px, 2vw);
}
/*header/nav
===============================================================*/
header {
  width: min(460px, 100%);
  height: min(50px, 12vw);
  padding-top: min(10px, 2vw);
  display: grid;
  -ms-align-items: center;
  align-items: center;
  border-top: 4px solid var(--green);
  position: fixed;
  top: 0;
  left: 50%;
  background: #fff;
  z-index: 10;
  translate:-50% 0;
}
.head-logo {
  width: min(242px, 62vw);
}
/*humhum
====================*/
.hum-btn-wrap {
  padding-top: 4px;
  width: min(460px, 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: var(--green);
  position: relative;
  transition: rotate var(--transit);
}
#hum-btn button::before, #hum-btn button::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: var(--green);
  transition: all var(--transit);
}
#hum-btn button::before {
  top: 8px;
}
#hum-btn button::after {
  top: -8px;
}
#hum-btn.open button {
  rotate: 45deg;
  background: #fff;
}
#hum-btn.open button::before, #hum-btn.open button::after {
  rotate: 90deg;
  top: 50%;
  translate: 0 -50%;
  background: #fff;
}
#l-nav {
  width: min(460px, 100%);
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 50%;
  translate:-50% 0;
  z-index: 100;
  transition:all var(--transit);
  height: 100vh;
  overflow-y: scroll;
  background: var(--green);
  opacity: 0;
}
#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);
  color: #fff;
}
.l-nav__menu > li {
  font-weight: 600;
  background: radial-gradient(circle farthest-side, currentColor, currentColor 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;
}
/*main
===============================================================*/
main {
  flex: 1;
}
/*Content
=====================================*/
#content {
  margin-top: min(50px, 12vw);
}
.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);
}
/*button setting +++++++++++++++++*/
.rect-button a {
  width: 100%;
  border-radius: 8px;
  height: 28px;
  background: var(--pink);
  color: #fff;
  display: grid;
  place-content: center;
}
.rect-button a span {
  padding-right: 1em;
  font-weight: 600;
  font-size: min(14px, 3.4vw);
  line-height: 1;
}
.rect-button a span::before {
  content: "";
  width: 3px;
  aspect-ratio: 1;
  border: 2px solid;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  rotate: 45deg;
}
/*ranking +++++++++++++*/
.hikaku-list {
  width: 600px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding-bottom: 10px;
  margin-top: min(30px, 10vw);
}
.hikaku-list li {
  padding: 0 6px min(30px, 8vw);
  display: grid;
  grid-template-rows: subgrid;
  grid-area: span 4;
  gap: 5px;
}
.hikaku-list li::before {
  content: "";
  width: calc(100% - 2px);
  height: calc(100% - min(30px, 6vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  border: 1px solid var(--pink);
  border-radius: 10px;
}
.hikaku-list li .medal {
  width: min(60px, 50%);
  margin-left: auto;
  margin-right: auto;
}
.hikaku-list li .star-box {
  display: grid;
  place-items: center;
  gap: 8px;
  margin-top: 5px;
}
.hikaku-list li .star-box .text {
  color: #fff;
  background: var(--green);
  padding: 5px 1em 7px;
  font-weight: 600;
  line-height: 1;
}
.hikaku-list li .star-box .num {
  font-family: var(--fnt-osw);
  font-weight: 700;
  font-size: min(20px, 4.5vw);
  font-style: italic;
  line-height: 1.4;
}
.hikaku-list li .star-box .num span {
  color: var(--green);
  font-size: 1.25em;
}
.hikaku-list li .data .logo {
  display: grid;
  place-content: center;
  grid-template-columns: 80%;
  aspect-ratio: 1/.6;
}
.hikaku-list li .data .logo img {
  object-fit: contain;
  height: 100%;
  object-position: center;
}
.hikaku-list li .button {
  margin-top: 10px;
}
/*datamap +++++++++++++++++++*/
.sec-datamap-blc {
  margin-top: min(50px, 12vw);
  padding-bottom: min(58px, 14vw);
}
.sec-datamap-blc .top-text {
  margin-top: min(20px, 5vw);
}
.data-graph {
  margin-top: min(25px, 6vw);
}
/*hikaku ++++++++++++++++++++*/
.sec-hikaku-blc {
  padding-bottom: min(30px, 8vw);
}
.hikaku-table-wrap {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 20px;
}
.hikaku-table {
  width: 580px;
  table-layout: fixed;
  counter-reset: number 0;
}
.hikaku-table::after {
  content: "";
  width: 1px;
  height: 100%;
  background: #c3c2c2;
  position: absolute;
  left: 0;
  top: 0;
}
.hikaku-table tr th, .hikaku-table tr td {
  border: 1px solid #c3c2c2;
  vertical-align: middle;
  text-align: center;
  line-height: 1.2;
}
.hikaku-table tr th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 15px 5px;
  background: #fffeec;
}
.hikaku-table tr:nth-child(1) td:nth-of-type(1) figure::after {
  content: "";
  width: calc(100% + 4px);
  height: 15px;
  border-radius: 20px 20px 0 0;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: var(--d-pink);
  translate: -50% -100%;
}
.hikaku-table tr:nth-child(1) td:nth-of-type(1) {
  background-color: var(--d-pink);
}
.hikaku-table tr:nth-child(1) td:nth-of-type(2) {
  background-color: #fc9ea4;
}
.hikaku-table tr:nth-child(1) td:nth-of-type(3) {
  background-color: #fac9cc;
}
.hikaku-table figure {
  padding: 5px;
}
.hikaku-table figcaption {
  min-height: 2em;
  display: grid;
  -ms-align-items: center;
  align-items: center;
  font-size: min(12px, 3.2vw);
  text-align: center;
  margin-top: 3px;
}
.hikaku-table td:nth-of-type(1) {
  font-weight: 600;
  border-left: 2px solid var(--d-pink);
  border-right: 2px solid var(--d-pink);
}
.hikaku-table tr:last-child td:nth-of-type(1) {
  border-bottom: 2px solid var(--d-pink);
}
.hikaku-table td:nth-of-type(1) figcaption {
  font-size: min(14px, 3.4vw);
  color: #fff;
}
.hikaku-table td .button {
  padding-left: 3px;
  padding-right: 3px;
}
.hikaku-table td .button a {
  display: grid;
  place-content: center;
  background: var(--green);
  color: #fff;
  border-radius: 100vmax;
  height: 2.25em;
  font-weight: 600;
  font-size: min(14px, 3.2vw);
  font-feature-settings: "palt";
}
.hikaku-table td .button a span {
  padding-right: .75em;
}
.hikaku-table td .button 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;
}
.att-list {
  counter-reset: count 0;
}
.att-list > li {
  padding-left: 2em;
  line-height: calc(21/16);
}
.att-list > li::before {
  counter-increment: count 1;
  content: "※"counter(count);
  position: absolute;
  left: 0;
  top: 0;
}
.sec-hikaku-blc .att-list {
  display: grid;
  /* justify-content: center; */
  margin-top: min(30px, 3vw);
}
/*feature ++++++++++++++++++*/
.sec-feature-blc {
  padding-top: min(50px, 12vw);
  padding-bottom: min(50px, 15vw);
  background: var(--wall-green);
}
.feature__head {
  background: #fff;
  border-radius: 10px;
  padding: min(15px, 3vw) min(15px, 4vw);
  display: grid;
  grid-template-columns: 35% auto;
  gap: min(15px, 4vw);
  -ms-align-items: center;
  align-items: center;
}
.feature__head .site-name {
  display: grid;
  place-items: center;
  gap: 5px;
}
.feature__head .site-name .name {
  font-weight: 600;
  line-height: 1.4;
}
.feature__head .score {
  display: grid;
  -ms-align-items: flex-start;
  align-items: flex-start;
  grid-template-columns: auto;
  gap: 5px;
}
.feature__head .score .text {
  font-size: min(18px, 4.2vw);
  font-weight: 600;
}
.feature__head .score .campaign p {
  background: var(--d-pink);
  color: var(--yellow);
  border-radius: 5px;
  padding: 5px 5px 6px;
  text-align: center;
  font-weight: 600;
  font-size: min(16px, 4vw);
}
.feature__mainvis {
  margin-top: min(20px, 5vw);
}
.feature__point {
  margin-top: min(40px, 10vw);
}
.feat-title {
  display: grid;
  grid-template-columns: min(50px, 12vw) auto;
  -ms-align-items: center;
  align-items: center;
  gap: min(10px, 4vw);
}
.feat-title .title {
  padding-bottom: 10px;
  font-size: min(26px, calc(100vw/18));
  font-weight: 600;
}
.feat-title .title::before {
  background: radial-gradient(circle farthest-side, var(--green), var(--green) 50%, transparent 50%, transparent);
  background-size: 6px 5px;
  content: '';
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .6;
}
.feat-comment {
  margin-top: min(20px, 5vw);
}
.point-list {
  display: grid;
  justify-content: center;
  font-size: min(16px, 4.2vw);
  gap: 8px;
}
.point-list > li {
  padding-left: 1.25em;
}
.point-list > li::before {
  content: "";
  width: .8em;
  aspect-ratio: 1/0.9167;
  background: url("../imgs/heart.png") no-repeat center/cover;
  position: absolute;
  left: 0;
  top: 0;
  translate: 0 .15em;
}
.service-list {
  background: #fff;
  margin-top: min(25px, 5vw);
  border: 1px solid var(--bdr-gry);
  counter-reset: number 0;
}
.service-list > div {
  display: grid;
  grid-template-columns: 7em auto;
  text-align: center;
  font-size: min(16px, 4.2vw);
}
.service-list > div:nth-child(n+2) {
  border-top: 1px solid var(--bdr-gry);
}
.service-list dt, .service-list dd {
  padding: 8px 5px;
}
.service-list dt {
  background: var(--wall-pink);
}
.service-list dd {
  display: flex;
  justify-content: center;
  border-left: 1px solid var(--bdr-gry);
}
.service-list dd p.att {
  padding-right: 1.5em;
}
.service-list dd p.att::before {
  counter-increment: number 1;
  content: "※"counter(number);
  position: absolute;
  font-size: min(14px, 3.2vw);
  top: 0;
  right: 0;
}
.feature__point .att-list {
  display: grid;
  /* justify-content: center; */
  margin-top: min(15px, 3vw);
   place-content: center;
}
.cta-button {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
  margin-top: min(20px, 8vw);
  gap: 10px;
}
.cta-button a {
  width: 100%;
  display: grid;
  place-content: center;
  height: 47px;
  border-radius: 100vmax;
  background: linear-gradient(#f07b1d, #e95a63);
  color: #fff;
  font-weight: 600;
  font-size: min(16px, 4.2vw);
  box-shadow: 0 4px 0 #8d2516;
}
.cta-button a::after {
  content: "";
  width: 5px;
  aspect-ratio: 1;
  border: 2.5px solid;
  border-color: #fbf31a #fbf31a transparent transparent;
  position: absolute;
  right: 0;
  top: 50%;
  rotate: 45deg;
  translate: -150% -50%;
  border-radius: 2px;
}
.cta-button .pr {
  text-align: center;
  color: #898888;
  font-size: min(13px, 3.2vw);
}
.feature__review {
  margin-top: min(40px, 10vw);
}
.review-list {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap: min(20px, 5vw);
  margin-top: min(20px, 5vw);
}
.review-item {
  padding: min(20px, 4vw);
  background: #fff;
}
.review__data {
  display: grid;
  grid-template-columns: min(60px, 20vw) auto;
  gap: min(30px, 8vw);
  -ms-align-items: center;
  align-items: center;
}
.review__data .icon figure {
  width: 100%;
  aspect-ratio: 1;
  background: var(--wall-pink);
  border-radius: 100vmax;
}
.review__data .icon .tag {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  translate: 50% 0;
}
.review__data .data {
  display: grid;
  grid-template-columns: auto min(90px, 20vw);
}
.review-item .in-text {
  margin-top: min(15px, 4vw);
}
.feature__detail {
  margin-top: min(40px, 10vw);
}
.feat__thumb {
  margin-top: min(20px, 8vw);
}
.feature-item {
  margin-bottom: 40px;
}
/*footer
===============================================================*/
.footer_txt{
  background: var(--bdr-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;
}
.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(--green);
    transform: translateY(-50%);
}
footer {
  background: var(--green);
  color: #fff;
  padding: min(20px,5vw) min(15px,3vw);
}
footer .copy{
  text-align: center;
  font-size: min(12px,3.2vw);
}
@media(min-width:768px){

}