@charset "UTF-8";

/*------------------------------------------

 CP 

------------------------------------------*/

/*--------------------------------
 Layout
--------------------------------*/

:root {
  --main-width: 480px;

  --padding-post-side: 16px;
  --padding-item-side: 18px;
}


/*--------------------------------
 Text
--------------------------------*/

:root {
  --fc-base: #202020;
  --ff-base: "Inter", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-base: 1.6rem;
  --fw-base: 400;
  --lh-base: 1.8;
  --ls-base: 0;
  --ta-base: left;


  /* Variant */

  --fs-h3: 1.75rem;
  --fs-h4: 1.65rem;

  --fc-gray: #707070;

  --fc-link: #0078de;
  --fc-link-hv: #f60;
  --fw-bold: 600;

  --lh-ttl: 1.6;
}


/*--------------------------------
 Color
--------------------------------*/

:root {
  --color-primary: #19307c;
  --color-secondary: #3c72df;
  --color-tertiary: #cedcfe;

  --color-page-bg: #ebf4fe;
  --color-border: #d7dddf;
}

:root {
  --btn-color: #f64443;
  --btn-color-d: #d5302f;
}



/*------------------------------------------

 Base Setting

------------------------------------------*/

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  color: var(--fc-base);
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-base);
  letter-spacing: var(--ls-base);
  line-height: var(--lh-base);
  text-align: var(--ta-base);
  background: var(--color-page-bg);
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

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

img, video, iframe{
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

a {
  cursor: pointer;
}

b, strong {
  font-weight: var(--fw-bold);
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.6;
}

h4, h5 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-ttl);
}

button {
  background: none;
  cursor: pointer;
  transition: var(--transition-base);
}

input[type="text"],
input[type="button"],
input[type="email"],
input[type="submit"],
textarea {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.fc-main-color {
  color: var(--color-primary);
}



/*------------------------------------------

 Layout

------------------------------------------*/

.contents {
  width: fit-content;
  margin: 0 auto;
}

.main {
  width: 100vw;
  max-width: var(--main-width);
}

.post {
  padding: 0 var(--padding-post-side) 48px;
  background: #fff;
}



/*------------------------------------------

 Post Body Base

------------------------------------------*/

.post-body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.post-body a:not(:is([class*="btn"] *)) {
  color: var(--fc-link);
}

.post-body a:not(:is([class*="btn"] *)):hover {
  color: var(--fc-link-hv);
}



/*------------------------------------------

 Ranking

------------------------------------------*/

.ranking {
  margin: 0 -16px 0;
}

.ranking__inner {
  overflow-x: auto;
  scroll-behavior: smooth;
}

.ranking table {
  width: 110%;
  table-layout: fixed;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ranking .column--heading {
  width: 68px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: sticky;
  left: 0;
}

.ranking thead th {
  padding: 6px 0;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ranking thead th span {
  font-size: 85%;
}

.ranking thead th:last-child {
  border-right: none;
}


.ranking tbody td {
  padding: 8px 0;
  font-size: 1.35rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.ranking tbody td:last-child {
  border-right: none;
}

.ranking__seal {
  width: 30px;
  margin: 0 auto 3px;
}



/*------------------------------------------

 Items

------------------------------------------*/

.items {
  margin: 40px calc(var(--padding-post-side) * -1) 0;
  padding: 28px 6px;
  background: var(--color-primary);
}

.item {
  padding: 0 var(--padding-item-side) 32px;
  background: #fff;
}

.item-inner-heading {
  padding: 8px 16px;
  color: var(--color-primary);
  font-size: var(--fs-h3);
  background: var(--color-page-bg);
  border-left: 5px solid var(--color-primary);
}


/*--------------------------------
 Item Header
--------------------------------*/

.item-header {
  padding: 16px 0 0;
}

.item-ttl a {
  font-size: 2.2rem;
  text-decoration: underline;
}

.item-rating {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.item-rating::before {
  margin: 0 4px;
  padding: 0 10px;
  height: 20px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  background: #f0f0f0;
  border-radius: 3px;
  content: "おすすめ度";
  display: flex;
  align-content: center;
}

.item-rating span {
  font-size: 1.7rem;
  font-weight: 700;
}

.item-rating img {
  width: 88px;
  margin: 0;
}

.item-img {
  margin-top: 12px;
}


/*--------------------------------
 Item Body
--------------------------------*/

.item-point {
  margin-top: 36px;
}

.item-point ul {
  margin-top: 8px;
}

.item-point li {
  padding: 8px 0 8px 24px;
  position: relative;
}

.item-point li:not(:first-child){
  border-top: 1px dashed #bbb;
}

.item-point li::before {
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 8px;
}

.item-txt {
  margin-top: 24px;
  padding: 16px 16px 20px;
  background: var(--color-page-bg);
  border-radius: 3px;
}

.item-txt__heading {
  margin: 0 0 -4px;
  color: var(--color-primary);
  font-size: var(--fs-h3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.item-txt__heading::before {
  width: 25px;
  height: 25px;
  background-image: url(../img/icon-megaphone.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  transform: translateY(-1px);
}

.item-txt p {
  font-size: 1.5rem;
  line-height: 1.7;
}

.item-txt p:not(:first-child) {
  margin-top: 14px;
}


.item-info-table {
  margin-top: 28px;
}

.item-info-table table {
  width: 100%;
  border: 1px solid var(--color-border);
}

.item-info-table th {
  padding: 8px 0;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  background: #f3f3f3;
  border: 1px solid var(--color-border);
}

.item-info-table td {
  padding: 8px 10px;
  font-size: 1.45rem;
  border: 1px solid var(--color-border);
}

.item-info-table td a {
  font-weight: 600;
  text-decoration: underline;
}



/*------------------------------------------

 FAQ

------------------------------------------*/

.faq {
  margin: 0 calc(var(--padding-post-side) * -1) 0;
  padding: 28px 12px;
  background: var(--color-tertiary);
}

.faq-item {
  padding: 0 16px 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.faq-item + .faq-item {
  margin-top: 16px;
}

.faq-item__heading {
  padding: 16px 12px 16px 32px;
  font-size: var(--fs-h3);
  position: relative;
}

.faq-item__heading::before {
  width: 28px;
  aspect-ratio: 1 / 1;
  background: url(../img/icon-faq-q.svg) no-repeat center / 100%;
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  transform: translateY(-50%);
}

.faq-item__body p {
  font-size: 1.5rem;
  line-height: 1.7;
}

.faq-item__body p + p {
  margin-top: 14px;
}


/*------------------------------------------

 CTA

------------------------------------------*/

.cta-btn {
  margin: 28px auto 0;
  --btn-height: 80px;
}

.cta-btn:is(.micro-copy + *) {
  margin-top: 12px;
}

.cta-btn a {
  height: var(--btn-height);
  color: #fff;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--btn-color);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--btn-color-d);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 0;
}

.cta-btn a::after {
  width: 17px;
  aspect-ratio: 1 / 1;
  background: url(../img/icon-link-white.svg) no-repeat center / 100%;
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  right: 16px;
  transform: translateY(-50%);
}


/*--------------------------------
 Button Animation
--------------------------------*/

.btn-animation--shiny {
  position: relative;
  overflow: hidden;
}

.btn-animation--shiny::before {
  width: 30px;
  height: 100%;
  background: #fb7a79;
  content: "";
  display: block;
  position: absolute;
  top: -60px;
  left: 0;
  z-index: -1;
  animation: shiny 3s ease-in-out infinite;
  opacity: .9;
}

@keyframes shiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  85% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  86% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/*--------------------------------
 Micro Copy
--------------------------------*/

.micro-copy {
  margin: 28px 0 0;
}

.micro-copy--limit {
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.micro-copy--limit::before {
  height: 20px;
  margin: 0 10px 0 0;
  padding: 0 8px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--btn-color);
  border-radius: 3px;
  content: "締切注意";
  display: flex;
  align-items: center;
}

.micro-copy--limit__date {
  margin: 0 -4px 0 0;
  font-weight: 600;
}

.micro-copy--limit__date span {
  margin: 0 0 0 -5px;
  font-size: 90%;
}

.cta-txt-link--bottom {
  margin-top: 16px;
  text-align: center;
}

.cta-txt-link--bottom a {
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: underline;
}



/*------------------------------------------

 Post Footer CTA

------------------------------------------*/

.post-f-cta {
  margin: 40px -4px 0;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.post-f-cta__heading {
  padding: 12px 0;
  color: #fff;
  font-size: 1.9rem;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.post-f-cta__h-label {
  height: 24px;
  padding: 0 12px;
  color: var(--color-primary);
  font-size: 1.4rem;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.post-f-cta__body {
  padding: 20px
}

.post-f-cta__body img {
  border: 1px solid var(--color-primary);
}

.post-f-cta__body ul {
  margin: 20px 0 0;
}

.post-f-cta__body li {
  padding: 0 0 0 24px;
  font-size: 1.65rem;
  font-weight: 600;
  position: relative;
}

.post-f-cta__body li::before {
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 11px;
  left: 8px;
}

.post-f-cta__body .cta-btn {
  margin-top: 20px;
}


.item-photo {
  margin: 40px -18px 0 0;
}

.item-photo:is(.item-point + *) {
  margin-top: 20px;
}

.item-photo .item-inner-heading {
  margin-right: 18px;
}

.item-photo__inner {
  margin-top: 16px;
}

.item-photo .swiper-pagination {
  position: static;
}