@charset "utf-8";

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

 CP 

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

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

:root {
	--font-color-base: #202020;
  --font-family-base: "Inter", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1.55rem;
  --font-weight-base: 400;
  --line-height-base: 1.85;
  --letter-spacing-base: 0;
  --text-align-base: left;

  --fc-link: #0078de;
  --fc-link-hv: #f60;
}


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

:root {
  --color-primary: #096fca;

  --color-border: #ddd;
	--color-page-bg: #f0f0f0;
}


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

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

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


@media ( min-width: 768px ) {
:root {
  --post-padding-side: 20px;
}
}


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

 Base Setting

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

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

body {
  width: 100%;
  height: 100%;
  color: var(--font-color-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  text-align: var(--text-align-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: 700;
}

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

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



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

 Layout

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

.main {
  width: 100vw;
  max-width: var(--main-width);
  margin: 0 auto;
  padding: 0 var(--post-padding-side) 60px;
  background: #fff;
}


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

 Post Body

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

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


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

 Footer

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

.g-footer {
  width: 100vw;
  max-width: var(--main-width);
  margin: 0 auto;
  padding: 32px;
  color: #fff;
  text-align: center;
  background: var(--color-primary);
}

.footer-copyright {
  font-size: 1.3rem;
}


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

 Ranking

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

.ranking {
  margin: 40px calc(var(--post-padding-side) * -1) 0;
}

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

.ranking thead th {
  padding: 2px 0;
  font-size: 1.3rem;
  font-weight: 600;
  background: #f5f5f5;
  border: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.ranking .column--service {
  width: 104px;
}

.ranking .column--rating {
  width: 56px;
}

.ranking .column--vol {
  width: 96px;
}

.ranking tbody td {
  border: 1px solid var(--color-border);
}

.ranking tbody td {
  font-size: 1.3rem;
  text-align: center;
  vertical-align: middle;
}

.ranking tbody th {
  padding: 8px;
  border: 1px solid var(--color-border);
}

.ranking tbody th img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.ranking tbody .ranking__service-name {
  color: var(--fc-link);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  display: block;
  text-decoration: underline;
}

.ranking tbody .ranking__official-link {
  height: 22px;
  margin: 6px 0 0;
  color: #049f64;
  font-size: 1.2rem;
  font-weight: 600;
  background: #ecfaf4;
  border: 1px solid #049f64;
  border-radius: 3px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.ranking tbody .cell--description {
  padding: 0 8px;
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: left;
}

.ranking tbody .cell--rating {
  padding: 0 6px;
  font-size: 1.6rem;
}

.ranking tbody .cell--vol {
  padding: 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.ranking tbody .ranking__limit {
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.ranking tbody .ranking__limit::before {
  margin-bottom: 4px;
  color: #777;
  content: "＋";
}

.ranking tbody .ranking__limit span {
  padding: 4px 0;
  color: var(--color-primary);
  font-size: 1.15rem;
  background: #e7f4ff;
}