@charset "UTF-8";

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
}

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

audio,
canvas,
progress,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

progress {
  vertical-align: baseline
}

[hidden],
template {
  display: none
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

figure {
  margin: 1em 40px
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

button,
input,
select,
textarea {
  font: inherit;
  margin: 0
}

optgroup {
  font-weight: 700
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0
}

html {
  font-size: 62.5%
}

body,
html {
  width: 100%;
  height: 100%
}

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
  color: #333;
}

@media screen and (min-width:828px) {
  body {
    font-size: 2rem
  }
}

@media screen and (max-width:828px) {
  body {
    font-size: 3.5vw
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  margin: 0
}

p {
  line-height: 1.6
}

a {
  color: #4c8077;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

figure {
  margin: 0
}

img {
  max-width: 100%;
  width: auto;
  height: auto
}

ol,
ul {
  list-style: none
}

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

hr {
  border: solid #ccc;
  border-width: 1px 0 0
}

@media screen and (min-width:828px) {
  hr {
    margin: 60px 0
  }
}

@media screen and (max-width:828px) {
  hr {
    margin: 24px 0
  }
}

button,
input,
select,
textarea {
  font-family: sans-serif
}

::selection {
  color: #fff;
  background: #ff667f
}

::-moz-selection {
  color: #fff;
  background: #ff667f
}

.l-header {
  z-index: 1;
  position: relative
}

.l-header img {
  width: 100%;
}

.l-header p {
  font-size: 10px;
  color: #aaa;
  padding: 0 3%;
  margin: 1% 0;
}

.l-contents__wrap {
  position: relative;
  overflow-x: hidden;
  max-width: 750px;
  margin: auto;
  background-color: #f7fdff; 
}

.l-contents {
  position: relative;
  padding: 0 10px 10px 10px;
}

.l-footer {
  background: #f2f2f2;
  text-align: center;
  padding: 10%;
}

.l-footer__public {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 0 8%
}

.l-footer__public-caa,
.l-footer__public-ncac {
  width: 48%;
  padding: 4%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center
}

.l-footer__public-ncac {
  background: #fff1d7
}

.l-footer__public-caa {
  background: #fff
}

.l-footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.l-footer-nav__item {
  margin: 0 2%
}

.l-footer-nav__link {
  color: #999;
  line-height: 1;
  font-size: 2rem
}

@media screen and (max-width:750px) {
  .l-footer-nav__link {
    font-size: 2.6vw
  }
}

.l-footer__copyright {
  margin-top: 4%
}

.l-footer__copyright small {
  line-height: 1;
  color: #999;
  font-size: 2rem;
  display: block
}

@media screen and (max-width:750px) {
  .l-footer__copyright small {
    font-size: 2.6vw
  }
}


.c-button {
  display: block;
  text-align: center;
  font-weight: 700;
  margin-top: 1%;
  padding: 4%;
  line-height: 1.3;
  color: #fff;
  border-radius: 6px;
  background: #F76A56;
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 10px 0 #911E18;
  position: relative;
}

@media screen and (min-width: 720px) {
  .c-button {
  font-size: 1.8rem;
}
}

.p8 {
  padding: 8%;
}

@media screen and (min-width: 720px) {
  .p8 {
  padding: 4%;
}
}

.c15 {
  font-size: 1.4rem;
  padding: 1.2rem 0;
}

@media screen and (min-width: 720px) {
  .c15 {
  font-size: 2rem;
  padding: 2rem 0;
  letter-spacing: 0.2;
}
}

.fa-solid {
  position: absolute;
  right: 6%;
  top: 15px;
}

@media screen and (min-width: 720px) {
  .fa-solid {
  position: absolute;
  right: 6%;
  top: 24px;
}
}

.c-button.is-green {
  background: #00bda0;
  -webkit-box-shadow: 0 10px 0 #008a75;
  box-shadow: 0 10px 0 #008a75;
  -webkit-animation: blink 2s infinite;
  animation: blink 2s infinite
}

.c-button.is-green:after {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 2%;
  background: url(../images/ic_link.webp) 50%/1em no-repeat
}

.c-button.is-green.is-small {
  -webkit-box-shadow: 0 5px 0 #008a75;
  box-shadow: 0 5px 0 #008a75
}

@-webkit-keyframes blink {

  0%,
  50%,
  to {
    opacity: .5
  }

  25%,
  75% {
    opacity: 1
  }
}

@keyframes blink {

  0%,
  50%,
  to {
    opacity: .5
  }

  25%,
  75% {
    opacity: 1
  }
}

.c-button.is-small {
  -webkit-box-shadow: 0 5px 0 #cc5266;
  box-shadow: 0 5px 0 #cc5266;
  border-radius: 8px
}

.c-button.is-gray {
  background: #f2f2f2;
  -webkit-box-shadow: 0 10px 0 #bfbfbf;
  box-shadow: 0 10px 0 #bfbfbf;
  color: #999
}

.c-button.is-gray.is-small {
  -webkit-box-shadow: 0 5px 0 #bfbfbf;
  box-shadow: 0 5px 0 #bfbfbf
}

.c-button.is-icon:after {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 2%;
  background: url(../images/ic_link.webp) 50%/1em no-repeat
}

@media screen and (max-width:750px) {
  .c-button {
    box-shadow: 0 1vw 0 #911E18;
  }

  .c-button.is-small {
    -webkit-box-shadow: 0 .5vw 0 #cc5266;
    box-shadow: 0 .5vw 0 #cc5266;
    border-radius: 4px
  }

  .c-button.is-green {
    -webkit-box-shadow: 0 1vw 0 #008a75;
    box-shadow: 0 1vw 0 #008a75
  }

  .c-button.is-green.is-small {
    -webkit-box-shadow: 0 .5vw 0 #008a75;
    box-shadow: 0 .5vw 0 #008a75
  }

  .c-button.is-gray {
    -webkit-box-shadow: 0 1vw 0 #bfbfbf;
    box-shadow: 0 1vw 0 #bfbfbf
  }

  .c-button.is-gray.is-small {
    -webkit-box-shadow: 0 .5vw 0 #bfbfbf;
    box-shadow: 0 .5vw 0 #bfbfbf
  }
}

.c-table {
  width: 100%;
  border: 2px solid #ccc;
  margin-bottom: 3rem;
}

.c-table th {
  font-weight: 400;
  vertical-align: middle;
  background: #f9f9f9
}

.c-table td,
.c-table th {
  color: #000;
  width: 50%;
  padding: 4%;
  text-align: center;
  border: 2px solid #eee
}

.c-app-table {
  margin: 8% 0;
  width: 100%
}

.c-app-table th {
  background: #f9f9f9
}

.c-app-table td,
.c-app-table th {
  border: 1px solid #eee;
  padding: 10px;
  font-size: 2rem;
  text-align: center
}

.c-app-table td {
  vertical-align: middle
}

@media screen and (max-width:750px) {

  .c-app-table td,
  .c-app-table th {
    font-size: 2.8vw;
    padding: 1.2vw
  }
}

.c-app-table__icon {
  width: 20%;
}

.c-app-table__icon-link img {
  border-radius: 10%;
  max-width: 70%;
}

.c-app-table__icon-link.is-border img {
  border: 2px solid #ddd
}

@media screen and (max-width:750px) {
  .c-app-table__icon-link.is-border img {
    border: 1px solid #ddd
  }
}

.c-app-table__name {
  margin-top: 4%
}

.c-app-table__name a {
  color: #000;
  position: relative;
  display: block;
  line-height: 1.2
}

.c-app-table__name a img {
  width: 1em;
  height: 1em
}

.c-app-table__purpose {
  width: 12%;
  font-weight: 700
}

.c-app-table__purpose-love {
  color: #ff667f
}

.c-app-table__purpose-play {
  color: #41c9d5
}

.c-app-table__purpose-marriage {
  color: #fbbc43
}

.c-app-table__age,
.c-app-table__fee {
  width: 25%
}

.c-app-table__btn-item:not(:first-of-type) {
  margin-top: 6%
}

.c-app-table__btn-item .c-button {
  margin-top: 0;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.c-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #ff667f
}

@media screen and (max-width:750px) {
  .c-title {
    font-size: 4.2vw
  }
}

@-webkit-keyframes blink1 {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes blink1 {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.blinking5 {
  -webkit-animation: blink1 1.5s ease-in-out infinite alternate;
  animation: blink1 1.5s ease-in-out infinite alternate
}

.p-top__title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #ff667f;
  margin-bottom: 8%
}

@media screen and (max-width:750px) {
  .p-top__title {
    font-size: 4.2vw
  }
}

.p-top__attention {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 8%;
  font-weight: 700;
  color: #555
}

.p-top__attention span {
  font-size: 1.8rem;
  vertical-align: middle
}

@media screen and (max-width:750px) {
  .p-top__attention {
    font-size: 3.2vw
  }

  .p-top__attention span {
    font-size: 2.4vw
  }
}

.p-top__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 8%
}

.p-top__button-item {
  text-align: center
}

.p-top__button-item:first-child {
  width: 40%
}

.p-top__button-item:last-child {
  width: 60%
}

.p-top__button-return {
  font-size: 2.4rem;
  color: #aaa;
  font-weight: 700;
  text-decoration: none
}

@media screen and (max-width:750px) {
  .p-top__button-return {
    font-size: 3.2vw
  }
}

.p-top__button-next {
  display: block;
  text-align: center;
  font-weight: 700;
  padding: 4%;
  line-height: 1;
  color: #fff;
  border-radius: 100px;
  background: #ff667f;
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 2.4rem;
  cursor: pointer
}

.p-top__button-next span {
  display: block;
  margin-top: 2%;
  font-size: 1.8rem
}

@media screen and (max-width:750px) {
  .p-top__button-next {
    font-size: 3.2vw
  }

  .p-top__button-next span {
    font-size: 2.4vw
  }
}

.p-lp__head-text {
  margin: 1% 0;
  line-height: 1.8;
  font-weight: 700;
  text-align: center;
  font-size: 3rem
}

.p-lp__head-text span {
  color: #ff667f;
}

@media screen and (max-width:750px) {
  .p-lp__head-text {
    font-size: 3.97vw
  }
}

@media screen and (max-width:750px) {
  .p-lp__head-text span {
    color: #ff667f;
  font-size: 4.5vw;
}
}

.p-lp__head-text-j {
  text-align: center;
  margin: 1% 0;
  margin-bottom: 1rem;
  line-height: 1.8;
  font-weight: 700;
  text-align: center;
  font-size: 2.5rem
}

@media screen and (max-width:750px) {
  .p-lp__head-text-j {
    text-align: center;
    font-size: 3.8vw
  }
}

.p-lp__text {
  margin: 8% 0;
  line-height: 1.8
}

.p-lp__text span {
  color: #ff667f
}

.p-lp__eyecatch {
  background: url(../images/eyecatch_bg.webp) 50%/cover no-repeat;
  padding-top: 53.3%;
  position: relative
}

.p-lp__eyecatch__app,
.p-lp__eyecatch__app--two-line {
  position: absolute;
  top: 12%;
  right: 6%;
  width: 44%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.p-lp__eyecatch__app--two-line li,
.p-lp__eyecatch__app li {
  width: 18%;
  margin: 1%;
  overflow: hidden
}

.p-lp__eyecatch__app--two-line li img,
.p-lp__eyecatch__app li img {
  border-radius: 10%
}

.p-lp__eyecatch__app--two-line {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  top: 6%
}

.p-lp__eyecatch__app--two-line li {
  margin: 2%
}

.p-lp__eyecatch__app--two-line+.p-lp__eyecatch__title {
  top: 46%
}

.p-lp__eyecatch__title {
  position: absolute;
  top: 36%;
  right: 6%;
  width: 44%
}

.p-lp__eyecatch__title img {
  width: 100%
}

.p-lp__ranking-head {
  background: #ff667f;
  padding: 1rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.p-lp__ranking-head span {
  background: #ff667f;
  color: #fff;
  display: inline-block;
  margin-top: 5px;
line-height: 1.3;
font-size: 16px;
}

.p-lp__ranking-head span::after {
  content: "";
  background: #ff667f;
  color: #fff;
  font-size: 1rem;
  vertical-align: 10%;
}

.p-lp__ranking-body {
  border: 4px solid #ff667f;
  border-top-width: 0;
  padding: 4% 1% 4% 1%
}

/* 一旦削除
@media screen and (max-width:750px) {
  .p-lp__ranking-body {
    border-width: 0 5px 5px
  }
}
   */

.p-lp__ranking {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.p-lp__ranking:not(:first-of-type) {
  margin-top: 6%
}

.p-lp__ranking-icon {
  width: 20%
}

.p-lp__ranking-icon img {
  border-radius: 10%
}

.p-lp__ranking-icon.is-border img {
  border: 2px solid #ddd
}

.p-lp__ranking-detail {
  width: 88%;
  margin-left: 1rem;
}

.p-lp__ranking-title {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700
}

.p-lp__ranking-title a {
  color: #ff667f;
  display: inline-block;
  padding-right: 1.5em;
  position: relative
}

.p-lp__ranking-title a:after {
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/ic_sign.webp) 50% no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  display: block
}

@media screen and (max-width:750px) {
  .p-lp__ranking-title {
    font-size: 4.2vw
  }

  .p-lp__ranking-title a:after {
    background: url(../images/ic_sign.webp) 50%/contain no-repeat
  }
}

.p-lp__ranking-text {
  margin-top: 2%;
  margin-bottom: 3%;
}

.p-lp__text_sub {
  color: #555;
  margin-top: 5%;
  font-size: 1.2vw
}

@media screen and (max-width:750px) {
  .p-lp__text_sub {
    margin-top: 3%;
    font-size: 2.6vw
  }
}

.p-lp__flowchart-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.p-lp__flowchart-wrap:not(:first-child) {
  margin-top: 4%
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-head {
  background: #ff667f
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-head:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-item {
  background: #fff2f4
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-app {
  background: url(../images/ic_link_lover.webp) right 4% center/1em no-repeat
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-text {
  background: #f9a
}

.p-lp__flowchart-wrap.is-lover .p-lp__flowchart-text:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #f9a)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #f9a)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #f9a 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #f9a 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-head {
  background: #41c9d5
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-head:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #41c9d5)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #41c9d5)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #41c9d5 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #41c9d5 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-item {
  background: #e7f9fb
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-app {
  background: url(../images/ic_link_marriage.webp) right 4% center/1em no-repeat
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-text {
  background: #74d9e1
}

.p-lp__flowchart-wrap.is-marriage .p-lp__flowchart-text:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #74d9e1)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #74d9e1)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #74d9e1 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #74d9e1 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-head {
  background: #fbbc43
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-head:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #fbbc43)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #fbbc43)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #fbbc43 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #fbbc43 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-item {
  background: #fff4e0
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-app {
  background: url(../images/ic_link_play.webp) right 4% center/1em no-repeat
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-text {
  background: #f9c460
}

.p-lp__flowchart-wrap.is-play .p-lp__flowchart-text:after {
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #f9c460)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #f9c460)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #f9c460 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #f9c460 50.1%) no-repeat 100% 100%/100% 50.1%
}

.p-lp__flowchart-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  width: 16%;
  background: #ff667f;
  position: relative;
  font-size: 3.2rem;
  border-radius: 16px 0 0 16px
}

.p-lp__flowchart-head:after {
  content: "";
  position: absolute;
  top: 0;
  right: -20%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20%;
  height: 100%;
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 100% 100%/100% 50.1%
}

@media screen and (max-width:750px) {
  .p-lp__flowchart-head {
    font-size: 4.2vw;
    border-radius: 8px 0 0 8px
  }
}

.p-lp__flowchart {
  width: 80%
}

.p-lp__flowchart-item {
  border-radius: 16px;
  overflow: hidden;
  background: #c4fcf0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.p-lp__flowchart-item:not(:first-of-type) {
  margin-top: 2%
}

@media screen and (max-width:750px) {
  .p-lp__flowchart-item {
    border-radius: 8px
  }
}

.p-lp__flowchart-text {
  line-height: 1.2;
  width: 30%;
  background: #ff667f;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  text-align: center;
  font-size: 2.2rem
}

.p-lp__flowchart-text:after {
  content: "";
  position: absolute;
  top: 0;
  right: -12%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 12%;
  height: 100%;
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 0 0/100% 50.1%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, hsla(0, 0%, 100%, 0)), color-stop(50.1%, #ff667f)) no-repeat 100% 100%/100% 50.1%;
  background: linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 0 0/100% 50.1%, linear-gradient(to top left, hsla(0, 0%, 100%, 0) 50%, #ff667f 50.1%) no-repeat 100% 100%/100% 50.1%
}

@media screen and (max-width:750px) {
  .p-lp__flowchart-text {
    font-size: 3vw
  }
}

.p-lp__flowchart-app-wrap {
  width: 70%
}

.p-lp__flowchart-app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 4% 2% 4% 10%;
  color: #000
}

.p-lp__flowchart-app-icon {
  width: 20%
}

.p-lp__flowchart-app-icon img {
  border-radius: 10%
}

.p-lp__flowchart-app-icon.is-border img {
  border: 2px solid #ddd
}

.p-lp__flowchart-app-name {
  width: 76%
}

.p-lp__section {
  margin-top: 8%
}

.p-lp__app-rank {
  font-size: 3.2rem;
  line-height: 1.5;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 4px solid #ff667f;
  padding-bottom: 2%;
  margin-bottom: 4%
}

.p-lp__app-rank,
.p-lp__app-rank:before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.p-lp__app-rank:before {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  width: 12%;
  margin-right: 4%;
  padding-top: 2%;
  font-size: 2.4rem;
  font-weight: 700;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

.p-lp__app-rank.is-ranki1:before,
.p-lp__app-rank:before {
  background: url(../images/ic_crown_rank1.webp) 50%/contain no-repeat
}

.p-lp__app-rank.is-ranki1:before {
  content: "1"
}

.p-lp__app-rank.is-ranki2:before {
  content: "2";
  background: url(../images/ic_crown_rank2.webp) 50%/contain no-repeat
}

.p-lp__app-rank.is-ranki3:before {
  content: "3";
  background: url(../images/ic_crown_rank3.webp) 50%/contain no-repeat
}

.p-lp__app-rank.is-ranki4:before {
  content: "4";
  background: url(../images/ic_crown_rank4.webp) 50%/contain no-repeat
}

.p-lp__app-rank.is-ranki5:before {
  content: "5";
  background: url(../images/ic_crown_rank5.webp) 50%/contain no-repeat
}

@media screen and (max-width:750px) {
  .p-lp__app-rank {
    font-size: 4.2vw
  }

  .p-lp__app-rank:before {
    font-size: 3vw
  }
}

.p-lp__app-rank-other {
  font-size: 3.2rem;
  line-height: 1.5;
  border-bottom: 4px solid #ff667f;
  padding-bottom: 2%;
  margin-bottom: 4%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

@media screen and (max-width:750px) {
  .p-lp__app-rank-other {
    font-size: 4.2vw
  }

  .p-lp__app-rank-other:before {
    font-size: 3vw
  }
}

.p-lp__app-rank-other-icon {
  display: block;
  color: #ff667f;
  width: 12%;
  padding-bottom: 12%;
  background: #ffe9e8;
  margin-right: 4%;
  font-size: 2.4rem;
  font-weight: 700;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative
}

.p-lp__app-rank-other-icon span {
  position: absolute;
  line-height: 24px;
  top: calc(50% - 12px);
  left: 0;
  width: 100%;
  text-align: center;
  display: block
}

@media screen and (max-width:750px) {
  .p-lp__app-rank-other-icon {
    top: 0
  }

  .p-lp__app-rank-other-icon span {
    font-size: 3vw
  }
}

.p-lp__app-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #000
}

.p-lp__app-head:hover {
  text-decoration: none
}

.p-lp__app-icon {
  width: 16%
}

.p-lp__app-icon img {
  border-radius: 10%
}

.p-lp__app-icon.is-border img {
  border: 2px solid #ddd
}

.p-lp__app-title {
  width: 62%;
  line-height: 1.8;
  padding-left: 4%
}

.p-lp__app-type {
  width: 22%;
  padding: 0 0 0 8%;
  background: url(../images/ic_link_text.webp) left 12% center/1em no-repeat
}

.p-lp__app-type.is-ic-right {
  padding: 0 6% 0 2%;
  background: url(../images/ic_link_text.webp) 100%/1em no-repeat
}

.p-lp__app-type span {
  display: block;
  color: #ff667f;
  border: 4px solid #ff667f;
  padding: 4%;
  text-align: center
}

@media screen and (max-width:750px) {
  .p-lp__app-type span {
    border: 2px solid #ff667f
  }
}

.p-lp__app-badge {
  margin-top: 4%
}

@media screen and (max-width:750px) {
  .p-lp__app-badge {
    width: 60%
  }
}

.p-lp__app-img {
  margin: 4% 0 4% 0
}

.p-lp__app-img img {
  width: 100%
}

.p-lp__app-text {
  margin: 4% 0;
  line-height: 1.8
}

.p-lp__app-text span {
  color: #ff667f
}

.p-lp__app-merit-wrap {
  background: #fff2f4;
  padding: 4%;
  margin-bottom: 2rem;
}

.p-lp__app-merit-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #ff667f
}

@media screen and (max-width:750px) {
  .p-lp__app-merit-title {
    font-size: 4.2vw
  }
}

.p-lp__app-merit li {
  margin-top: 4%;
  margin-left: 4%;
  list-style: disc
}

.p-lp__app-merit li span {
  color: #ff667f
}

.p-lp__app-dl-title-wrap {
  text-align: center;
  margin: 4% 0
}

.p-lp__app-dl-title {
  display: inline-block;
  vertical-align: bottom;
  font-weight: 700;
  position: relative
}

.p-lp__app-dl-title:after,
.p-lp__app-dl-title:before {
  content: "";
  display: block;
  width: .5%;
  height: 100%;
  background: #ff667f;
  position: absolute;
  top: 0
}

.p-lp__app-dl-title:before {
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  left: -8%
}

.p-lp__app-dl-title:after {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  right: -8%
}

.p-lp__app-dl-title span {
  vertical-align: bottom
}

.p-lp__app-dl-title span.is-red {
  color: #ff667f
}

.p-lp__app-dl-title span.is-big {
  font-size: 3.2rem;
  vertical-align: -.05em;
  padding: 0 .1em
}

@media screen and (max-width:750px) {
  .p-lp__app-dl-title span.is-big {
    font-size: 4.2vw
  }
}

.p-lp__app-dl-caption {
  color: #a09f9f;
  text-align: center;
  margin-top: 2%;
  font-size: 1.4rem
}

@media screen and (max-width:750px) {
  .p-lp__app-dl-caption {
    font-size: 1.8vw
  }
}

.p-lp__toggle-head-check {
  display: none
}

.p-lp__toggle-head-check:checked+.p-lp__toggle-head:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg)
}

.p-lp__toggle-head-check:checked+.p-lp__toggle-head+.p-lp__toggle-body {
  display: block
}

.p-lp__toggle-head {
  background: #f8bb5e;
  text-align: center;
  font-weight: bold;
  padding: 14px;
  line-height: 1.3;
  color: #fff;
  font-size: 2.8rem;
  cursor: pointer;
  width: 100%;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

@media screen and (min-width: 720px) {
  .p-lp__toggle-head {
    font-size: 2rem;
    padding: 2rem;
  }
}

.p-lp__toggle-head:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/ic_arrow.webp) 50%/contain no-repeat;
  position: absolute;
  top: 50%;
  right: 4%;
  margin-top: -.5em;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

@media screen and (max-width:750px) {
  .p-lp__toggle-head {
    font-size: 1.4rem
  }
}

.p-lp__toggle-body {
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
  border-top-width: 0;
}

.p-lp__app-review-prof {
  display: flex;
  align-items: center;
}

.p-lp__app-review-prof:not(:first-child) {
  margin-top: 8%
}

.p-lp__app-review-prof-img {
  max-width: 45px;
  border-radius: 50%;
}

@media screen and (min-width: 720px) {
  .p-lp__app-review-prof-img {
  max-width: 60px;
  border-radius: 50%;
}
}

.p-lp__app-review-prof-detail {
  width: 72%;
  margin-left: 20px;
}

.p-lp__app-review-prof-name {
  font-size: 3.2rem;
}

@media screen and (max-width:750px) {
  .p-lp__app-review-prof-name {
    font-size: 1.2rem
  }
}

@media screen and (min-width: 720px) {
  .p-lp__app-review-prof-name {
    font-size: 2rem;
  }
}

.p-lp__app-review-prof-data {
  margin-top: 2%;
  line-height: 1.3;
  font-size: 1.2rem;
}

@media screen and (min-width: 720px) {
  .p-lp__app-review-prof-data {
    font-size: 2rem;
  }
}

.p-lp__app-review-prof-rank {
  color: #ED7081;
  font-weight: bold;
}

.p-lp__app-review-prof-star {
  color: #fbbc43;
  overflow: hidden;
  display: inline-block
}

.p-lp__app-review-text {
  padding: 0 0 10px;
  margin-top: 15px;
  position: relative;
  border-radius: 16px
}

.p-lp__app-review-text span {
  font-weight: 700
}

/* 
.p-lp__app-review-text:before { 
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -1em;
  left: 8%;
  border-left: .8em solid transparent;
  border-right: .8em solid transparent;
  border-bottom: 1em solid #f2f2f2
 } 
 */

@media screen and (max-width:750px) {
  .p-lp__app-review-text {
    border-radius: 8px
  }
}

.p-lp__app-review-comment {
  background: #ecf9fb;
  padding: 4%;
  margin-top: 6%;
  position: relative;
  border-radius: 16px
}

@media screen and (max-width:750px) {
  .p-lp__app-review-comment {
    border-radius: 8px
  }
}

.p-lp__app-review-comment-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #0fb4c2
}

@media screen and (max-width:750px) {
  .p-lp__app-review-comment-title {
    font-size: 4.2vw
  }
}

.p-lp__app-review-comment-text {
  margin-top: 2%
}

.p-lp__app-review-table {
  border: 2px solid #f2f2f2;
  width: 100%;
  margin-top: 4%
}

.p-lp__app-review-table tr:not(:last-of-type) th {
  border-bottom: 2px solid #fff
}

.p-lp__app-review-table td,
.p-lp__app-review-table th {
  padding: 2%
}

.p-lp__app-review-table th {
  background: #f2f2f2;
  border-bottom: 2px solid #fff;
  font-weight: 400;
  text-align: left
}

.p-lp__app-review-table td {
  border-bottom: 2px solid #f2f2f2
}

.p-lp__app-review-table-rank {
  color: #ff667f
}

.p-lp__app-review-table-star {
  color: #fbbc43;
  overflow: hidden;
  display: inline-block
}

.p-lp__recommend-title {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  margin-top: 8%
}

@media screen and (max-width:750px) {
  .p-lp__recommend-title {
    font-size: 4.2vw
  }
}

.p-lp__recommend {
  display: flex;
  flex-direction: column;
  
}

.p-lp__recommend-item {
 margin: 5px auto;
}

.p-lp__recommend-item img {
  width: auto;
  max-height: 50px;
  max-width: 200px;
}

.p-lp__public {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 8% 0
}

.p-lp__public-ncac {
  background: #fff1d7
}

.p-lp__public-caa,
.p-lp__public-ncac {
  width: 48%;
  padding: 4%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.p-lp__public-caa {
  text-align: center;
  border: 10px solid #eee
}

@media screen and (max-width:750px) {
  .p-lp__public-caa {
    border: 5px solid #eee
  }
}

.p-lp__search-head {
  font-weight: 700;
  margin-bottom: 2%
}

.p-lp__search-head:not(:first-child) {
  margin-top: 4%
}

.p-lp__search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.p-lp__search-item {
  width: 48%;
  margin: 4% 0 0 4%
}

.p-lp__search-item:nth-of-type(-n+2) {
  margin-top: 0
}

.p-lp__search-item:nth-of-type(2n-1) {
  margin-left: 0
}

.p-lp__search-item-wide {
  width: 100%
}

.p-lp__search-item-wide:not(:first-child) {
  margin-top: 4%
}

.p-lp__search-radio label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  cursor: pointer;
  padding: 1em;
  position: relative;
  background: #f2f2f2
}

.p-lp__search-radio label:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: .5em
}

.p-lp__search-radio input[type=radio] {
  display: none
}

.p-lp__search-radio input[type=radio]:checked+label:before {
  background: #ff667f
}

.p-lp__search-select {
  background: #f2f2f2;
  position: relative
}

.p-lp__search-select:before {
  content: "▼";
  width: 1em;
  height: 1em;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -.5em
}

.p-lp__search-select select {
  display: block;
  cursor: pointer;
  padding: 1em;
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.p-lp__search-count span {
  font-size: 1.5em;
  font-weight: 700;
  color: #ff667f;
  vertical-align: bottom;
  padding-right: .1em
}

.p-lp__modal-wrap {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: none
}

.p-lp__modal-bg,
.p-lp__modal-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.p-lp__modal-bg {
  position: absolute;
  background: rgba(0, 0, 0, .5)
}

.p-lp__modal {
  width: 90%;
  max-width: 640px;
  padding-bottom: 6%;
  border-radius: 2%;
  background: #fff;
  position: relative
}

@media screen and (max-width:750px) {
  .p-lp__modal {
    border-radius: 1%
  }
}

.p-lp__modal-head {
  padding: 6%
}

.p-lp__modal-head-caption {
  text-align: center;
  color: #333
}

.p-lp__modal-head-caption span {
  font-weight: 700;
  font-size: 2.8rem;
  display: inline-block;
  padding: 0 1em;
  position: relative
}

.p-lp__modal-head-caption span:after,
.p-lp__modal-head-caption span:before {
  content: "";
  display: block;
  width: 1px;
  height: 1.5em;
  border-left: 1px solid #333;
  top: 0;
  position: absolute
}

.p-lp__modal-head-caption span:before {
  left: 0;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg)
}

.p-lp__modal-head-caption span:after {
  right: 0;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg)
}

@media screen and (max-width:750px) {
  .p-lp__modal-head-caption span {
    font-size: 3.6vw
  }
}

.p-lp__modal-head-title {
  font-weight: 700;
  font-size: 3.6rem;
  text-align: center;
  color: #333;
  line-height: 1;
  margin-top: 2%
}

@media screen and (max-width:750px) {
  .p-lp__modal-head-title {
    font-size: 4.8vw
  }
}

.p-lp__modal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.p-lp__modal-item {
  width: 50%;
  padding: 4%;
  text-align: center
}

.p-lp__modal-item .c-button {
  font-size: 20px;
  line-height: 1.5
}

@media screen and (max-width:750px) {
  .p-lp__modal-item .c-button {
    font-size: 2.8vw
  }
}

.p-lp__modal-item:first-child {
  background: #fff2f4
}

.p-lp__modal-item:first-child .p-lp__modal-icon {
  background: #ff667f
}

.p-lp__modal-item:first-child .p-lp__modal-icon:after {
  border-top-color: #ff667f
}

.p-lp__modal-item:first-child .p-lp__modal-title span {
  color: #ff667f
}

.p-lp__modal-item:first-child .p-lp__modal-arrow:after,
.p-lp__modal-item:first-child .p-lp__modal-arrow:before {
  border-top-color: #ff667f
}

.p-lp__modal-item:last-child {
  background: #e7f9fb
}

.p-lp__modal-item:last-child .p-lp__modal-icon {
  background: #41c9d5
}

.p-lp__modal-item:last-child .p-lp__modal-icon:after {
  border-top-color: #41c9d5
}

.p-lp__modal-item:last-child .p-lp__modal-title span {
  color: #41c9d5
}

.p-lp__modal-item:last-child .p-lp__modal-arrow:after,
.p-lp__modal-item:last-child .p-lp__modal-arrow:before {
  border-top-color: #41c9d5
}

.p-lp__modal-icon {
  display: inline-block;
  font-size: 6.4rem;
  width: 120px;
  height: 120px;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  color: #fff
}

.p-lp__modal-icon:after {
  content: "";
  border: 10px solid transparent;
  border-top-color: #000;
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  bottom: -16px;
  left: calc(50% - 10px)
}

@media screen and (max-width:750px) {
  .p-lp__modal-icon {
    width: 16vw;
    height: 16vw;
    font-size: 8vw
  }
}

.p-lp__modal-title {
  margin: 8% 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1
}

@media screen and (max-width:750px) {
  .p-lp__modal-title {
    font-size: 3.6vw
  }
}

.p-lp__modal-app-icon {
  width: 50%;
  margin: auto
}

.p-lp__modal-app-icon img {
  border-radius: 10%
}

.p-lp__modal-app-icon.is-big-radius img {
  border-radius: 22%
}

.p-lp__modal-app-icon.is-border img {
  border: 2px solid #ddd
}

.p-lp__modal-arrow {
  margin: 8%;
  position: relative;
  height: 48px
}

.p-lp__modal-arrow:after,
.p-lp__modal-arrow:before {
  content: "";
  border-color: #000 transparent transparent;
  border-style: solid;
  border-width: 32px 40px;
  width: 80px;
  height: 64px;
  display: block;
  position: absolute;
  left: calc(50% - 40px);
  opacity: .65
}

.p-lp__modal-arrow:before {
  top: 0
}

.p-lp__modal-arrow:after {
  top: 16px
}

@media screen and (max-width:750px) {
  .p-lp__modal-arrow {
    height: 6vw
  }

  .p-lp__modal-arrow:after,
  .p-lp__modal-arrow:before {
    content: "";
    border: 4vw solid transparent;
    border-top-color: #000;
    width: 8vw;
    height: 8vw;
    display: block;
    left: calc(50% - 4vw)
  }

  .p-lp__modal-arrow:after {
    top: 2vw
  }
}

.p-lp__modal-caption {
  font-size: 1.2rem;
  margin-top: 8%;
  color: #d1d1cf
}

@media screen and (max-width:750px) {
  .p-lp__modal-caption {
    font-size: 1.6vw
  }

  .p-lp__modal-caption span {
    display: block;
    line-height: 1.2
  }
}

.u-block {
  display: block
}

.u-inline-block {
  display: inline-block
}

.u-inline {
  display: inline
}

.u-hidden {
  display: none
}

@media screen and (max-width:828px) {
  .u-variable {
    display: block
  }
}

@media screen and (min-width:828px) {
  .u-variable {
    display: inline-block
  }
}

@media screen and (max-width:828px) {
  .u-pc-only {
    display: none !important
  }
}

@media screen and (min-width:828px) {
  .u-tablet-only {
    display: none !important
  }
}

.android .iphone-content {
  display: none;
}

.ipad .android-content {
  display: none;
}

.iphone .android-content {
  display: none;
}

.balloon_red {
  position: relative;
  padding: 10px;
  background: red;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  display: inline-block
}

.balloon_red:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid red;
  width: 0;
  height: 0
}

@media screen and (max-width:750px) {
  .balloon_red:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 10px solid transparent;
    border-top: 10px solid red;
    width: 0;
    height: 0
  }
}

.footer_btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  background: #f8f8f8;
  font-size: 16px
}

.footer_btn a {
  display: inline-block;
  width: 45%;
  margin: 3% 1%;
  padding: 2% 0%;
  color: #fff;
  background-color: #00bda0;
  font-weight: bold
}

.footer_btn a:hover {
  opacity: .8
}

.pc_none {
  display: none
}
  .pc_none {
    display: block
  }

  .ranking-button-wrap {
    display: flex;
    align-items: flex-end;
    margin-top: -1rem;
  }

  .ranking-right-wrap {
    width: 33%;
  }

  .ranking-right-wrap a {
    padding: 0.9rem;
  }

  .bold_red {
    color: #ff0000;
    font-weight: bold;
  }

  .bold_blue {
    color: #0000ff;
    font-weight: bold;
  }

  .box_blue {
    position: relative;
    margin-top: 40px;
    margin-bottom: 4%;
    padding: 20px;
    border: solid 3px #41c9d5;
  }

  .box_blue .box_title {
    position: absolute;
    display: inline-block;
    top: -40px;
    left: -3px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    background: #41c9d5;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
  }

  .box_yellow {
    position: relative;
    margin-top: 40px;
    margin-bottom: 4%;
    padding: 20px;
    border: solid 3px #fbbc43;
  }

  .box_yellow .box_title {
    position: absolute;
    display: inline-block;
    top: -40px;
    left: -3px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    background: #fbbc43;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
  }

  .box_red {
    position: relative;
    margin-top: 40px;
    margin-bottom: 4%;
    padding: 20px;
    border: solid 3px #ff0000;
  }

  .box_red .box_title {
    position: absolute;
    display: inline-block;
    top: -40px;
    left: -3px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    background: #ff0000;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
  }

  .box_pink {
    background: #fff2f4;
    margin-bottom: 4%;
  }

  .box_pink .box-title {
    font-size: 1.2em;
    background: #ff99aa;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.05em;
  }

  .box_pink p {
    padding: 20px;
    margin: 0;
  }

  .balloon_red {
    position: relative;
    padding: 10px;
    background: #ff0000;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    margin: 0 0 2em;
  }

  .balloon_red:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #ff0000;
    width: 0;
    height: 0;
  }

  .c-chart table {
    width: 100%;
    border: 0;
  }

  .c-chart__question td {
    background: #c4fcf0;
    padding: 4%;
    font-weight: 700;
    line-height: 1.5;
    font-size: 3rem;
  }

  .c-chart__question td span {
    font-size: 1.8rem;
    padding: 1.5rem 3rem;
    background: #000;
    color: #fff;
    line-height: 1;
    display: inline-block;
    margin-right: 10px;
  }

  @media screen and (max-width: 828px) {
    .c-chart__question td {
      font-size: 4vw;
    }

    .c-chart__question td span {
      font-size: 2.4vw;
      padding: 2vw 4vw;
      margin-right: 1.4vw;
    }
  }

  .c-chart__anser td {
    width: 50%;
    padding: 2% 4%;
    text-align: center;
    font-weight: 700;
    color: #fff;
  }

  .c-chart__anser td:first-of-type {
    background: #50b1bc;
  }

  .c-chart__anser td:nth-of-type(2) {
    background: #cc6060;
  }

  .c-chart__no-contents-bottom td,
  .c-chart__no-contents-top td,
  .c-chart__yes-contents-bottom td,
  .c-chart__yes-contents-top td {
    padding: 4% 1%;
    font-weight: 700;
  }

  .c-chart__no-contents-bottom td:first-of-type,
  .c-chart__no-contents-top td:first-of-type,
  .c-chart__yes-contents-bottom td:first-of-type,
  .c-chart__yes-contents-top td:first-of-type {
    text-align: right;
    color: #50b1bc;
  }

  .c-chart__no-contents-bottom td:nth-of-type(2),
  .c-chart__no-contents-top td:nth-of-type(2),
  .c-chart__yes-contents-bottom td:nth-of-type(2),
  .c-chart__yes-contents-top td:nth-of-type(2) {
    text-align: left;
    color: #50b1bc;
  }

  .c-chart__no-contents-bottom td:nth-of-type(3),
  .c-chart__no-contents-top td:nth-of-type(3),
  .c-chart__yes-contents-bottom td:nth-of-type(3),
  .c-chart__yes-contents-top td:nth-of-type(3) {
    text-align: right;
    color: #cc6060;
  }

  .c-chart__no-contents-bottom td:nth-of-type(4),
  .c-chart__no-contents-top td:nth-of-type(4),
  .c-chart__yes-contents-bottom td:nth-of-type(4),
  .c-chart__yes-contents-top td:nth-of-type(4) {
    text-align: left;
    color: #cc6060;
  }

  .c-chart__no-contents-top td:first-of-type,
  .c-chart__yes-contents-top td:first-of-type {
    border-right: 4px solid #50b1bc;
  }

  .c-chart__no-contents-top td:nth-of-type(2),
  .c-chart__yes-contents-top td:nth-of-type(2) {
    border-left: 4px solid #50b1bc;
  }

  .c-chart__no-contents-top td:nth-of-type(3),
  .c-chart__yes-contents-top td:nth-of-type(3) {
    border-right: 4px solid #cc6060;
  }

  .c-chart__no-contents-top td:nth-of-type(4),
  .c-chart__yes-contents-top td:nth-of-type(4) {
    border-left: 4px solid #cc6060;
  }

  .c-chart__yes-contents-bottom td:first-of-type,
  .c-chart__yes-contents-top td:first-of-type {
    width: 25%;
  }

  .c-chart__yes-contents-bottom td:nth-of-type(2),
  .c-chart__yes-contents-top td:nth-of-type(2) {
    width: 55%;
  }

  .c-chart__yes-contents-bottom td:nth-of-type(3),
  .c-chart__yes-contents-top td:nth-of-type(3) {
    width: 5%;
  }

  .c-chart__yes-contents-bottom td:nth-of-type(4),
  .c-chart__yes-contents-top td:nth-of-type(4) {
    width: 15%;
  }

  .c-chart__yes-contents td:first-of-type {
    width: 80%;
  }

  .c-chart__yes-contents td:nth-of-type(2) {
    width: 5%;
    border-right: 4px solid #cc6060;
    text-align: right;
    color: #cc6060;
  }

  .c-chart__yes-contents td:nth-of-type(3) {
    width: 15%;
    border-left: 4px solid #cc6060;
    text-align: left;
    color: #cc6060;
  }

  .c-chart__no-contents-bottom td:first-of-type,
  .c-chart__no-contents-top td:first-of-type {
    width: 10%;
  }

  .c-chart__no-contents-bottom td:nth-of-type(2),
  .c-chart__no-contents-top td:nth-of-type(2) {
    width: 5%;
  }

  .c-chart__no-contents-bottom td:nth-of-type(3),
  .c-chart__no-contents-top td:nth-of-type(3) {
    width: 55%;
  }

  .c-chart__no-contents-bottom td:nth-of-type(4),
  .c-chart__no-contents-top td:nth-of-type(4) {
    width: 25%;
  }

  .c-chart__yes-contents-bottom td:nth-of-type(3) {
    border-right: 4px solid #cc6060;
  }

  .c-chart__yes-contents-bottom td:nth-of-type(4) {
    border-left: 4px solid #cc6060;
  }

  .c-chart__no-contents-bottom td:first-of-type {
    border-right: 4px solid #50b1bc;
  }

  .c-chart__no-contents-bottom td:nth-of-type(2) {
    border-left: 4px solid #50b1bc;
  }

  .c-chart__no-contents td:first-of-type {
    width: 15%;
    border-right: 4px solid #50b1bc;
    text-align: right;
    color: #50b1bc;
  }

  .c-chart__no-contents td:nth-of-type(2) {
    width: 5%;
    border-left: 4px solid #50b1bc;
    text-align: left;
    color: #50b1bc;
  }

  .c-chart__no-contents td:nth-of-type(3) {
    width: 80%;
  }

  .c-chart__contents {
    background: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  @media screen and (max-width: 828px) {
    .c-chart__contents {
      border-radius: 2.4vw;
    }
  }

  .c-chart__contents-title {
    padding: 4%;
    font-weight: 700;
    border-bottom: 4px solid #ccc;
  }

  .c-chart__contents-inner {
    padding: 4%;
    line-height: 1.5;
  }

  .c-chart__end {
    width: 100%;
  }

  .p-lp__ranking-text span {
    color: #ff667f;
  }

  .ranking_title {
    position: relative;
    margin: 0px 20px;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .ranking_title:before,
  .ranking_title:after {
    position: absolute;
    z-index: 0;
    bottom: -10px;
    display: block;
    content: '';
    border: 1.5em solid #518ebf;
  }

  .ranking_title:before {
    left: -25px;
    border-left-width: 15px;
    border-left-color: transparent;
  }

  .ranking_title:after {
    right: -25px;
    border-right-width: 15px;
    border-right-color: transparent;
  }

  .ranking_title span {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1rem 2rem;
    color: #fff;
    background: #64AAE1;
    font-weight: bold;
    font-size: larger;
  }

  .ranking_title span:before,
  .ranking_title span:after {
    position: absolute;
    bottom: -10px;
    display: block;
    width: 10px;
    height: 10px;
    content: '';
    border-style: solid;
    border-color: #457397 transparent transparent transparent;
  }

  .ranking_title span:before {
    left: 0;
    border-width: 10px 0 0 10px;
  }

  .ranking_title span:after {
    right: 0;
    border-width: 10px 10px 0 0;
  }

  .table_wrap {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .success_rate_up {
    margin-top: 4%;
  }

  .success_rate_up img:first-child {
    width: 25%;
    display: block;
    margin: auto;
  }

  .success_rate_up p {
    font-size: 1.5rem;
    margin-top: -3%;
    color: #ff667f;
    text-align: center;
    letter-spacing: 0.1rem;
  }

  .c-pie__wrap {
    width: 50%;
    height: 0;
    padding: 50% 0 0;
    position: relative;
    margin: 2em auto
  }

  .c-pie__center {
    position: absolute;
    width: 90%;
    height: 90%;
    background: #fff;
    top: 5%;
    left: 5%;
    border-radius: 50%;
    font-weight: 700
  }

  .c-pie__center.is-inversion .c-pie__text1 {
    bottom: auto;
    top: 0
  }

  .c-pie__center.is-inversion .c-pie__text2 {
    top: auto;
    bottom: 0
  }

  .c-pie__text1 {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 2.4rem;
    padding: 16%;
    text-align: center;
    line-height: 1
  }

  .c-pie__text1 span {
    font-size: 6rem;
    display: block;
    margin-top: 5%
  }

  .c-pie__text1 span small {
    vertical-align: bottom
  }

  @media screen and (max-width:828px) {
    .c-pie__text1 {
      font-size: 3.2vw
    }

    .c-pie__text1 span {
      font-size: 8vw
    }
  }

  .c-pie__text2 {
    position: absolute;
    top: 0;
    left: 0;
    color: #aaa;
    font-size: 2rem;
    padding: 16%;
    text-align: center;
    line-height: 1
  }

  .c-pie__text2 span {
    font-size: 4.8rem;
    display: block;
    margin-top: 5%
  }

  .c-pie__text2 span small {
    vertical-align: bottom
  }

  @media screen and (max-width:828px) {
    .c-pie__text2 {
      font-size: 2.6vw
    }

    .c-pie__text2 span {
      font-size: 6.4vw
    }
  }

  .c-pie {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: #ddd;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(0, #ff667f));
    background-image: linear-gradient(90deg, transparent 50%, #ff667f 0)
  }

  .c-pie span {
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0/50%;
    background-color: inherit;
    -webkit-transform-origin: left;
    transform-origin: left
  }

  .c-pie span.is-over50 {
    background: #ff667f
  }

  .c-code {
    background-color: #364549;
    color: #e3e3e3;
    font-size: 1.6rem;
    padding: 1em 32px;
    word-break: break-all;
    line-height: 1.2;
    margin: 2em 0;
    overflow: auto
  }

  .numberSpans {
    color: rgb(251, 135, 67);
    font-weight: bold;
  }

  .coupon_container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .copy-input {
    flex: 1;
    padding: 0.5rem;
    margin-right: 1rem;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
  }


  .copy-button {
    font-size: 14px;
    font-weight: bold;
    padding: 1rem;
    margin-right: 0.5rem;
    background-color: #ff677f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    min-width: 80px;
    /* 例：最小幅を80pxに設定 */
    /* 水平方向の位置, 垂直方向の位置, ぼかし量, 影の色 */
  }

  .copy-button:hover {
    background-color: #ff677f;
  }

  @media screen and (min-width: 828px) {
    .container {
      max-width: 600px;
    }

    .copy-input {
      width: 80%;
    }
  }

  @media screen and (max-width: 827px) {
    .copy-input {
      width: 90%;
    }
  }

  .coupon_content {
    padding: 0 1rem 0 1rem
  }

  .coupon_text {
    color: #484848;
    line-height: 1.7;
    margin-top: 2rem;
    margin-bottom: -0.6rem;
  }

  .coupon_text span {
    color: #ff677f;
    background: linear-gradient(transparent 50%, #fffab4 50%);
    display: inline;
    font-weight: bold;
  }

  .coupon_caution_text {
    color: #999999;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 1.1rem;
    margin-bottom: 1.2rem;
  }

  .heading-3 {
    text-align: center;
    font-size: 1.5rem;
    padding: 0 .4em .9em;
    border-bottom: 3px dotted #ff677f;
    color: #ff677f;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }

  .box-005 {
    max-width: 400px;
    margin-top: 3rem;
    border: 2px solid #a3a3a3;
    border-radius: 5px;
    color: #a3a3a3;
  }

  .box-005 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -12px;
    left: 8px;
    margin: 0 4px;
    padding: 0 12px;
    background: #a3a3a3;
    color: #ffffff;
    font-weight: 600;
    vertical-align: top;
    border-radius: 4px;
    letter-spacing: 0.1rem;
  }

  .box-005 div::before {
    width: 24px;
    height: 26px;
    margin-left: -0.3rem;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
  }


  .box-005 p {
    margin: 0;
    padding: 0 1.5em 1.5em;
    font-size: 1rem;
    color: #979797;
  }


  .box-013 {
    max-width: 400px;
    border: 2px solid #ff677f;
    border-radius: 3px;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
  }

  .box-013 span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .9em 0;
    background-color: #ff677f;
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
  }

  .box-013 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
  }

  .box-013 p span {
    color: #ff677f;
    font-weight: bold;
  }

  .box-013_container {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }

  .p-lp__ranking-text-sub {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 5%;
  }

  @media only screen and (max-width: 750px) {
    .p-lp__ranking-text-sub {
      font-size: 1rem;
      margin-bottom: 3%;
      line-height: 150%;
    }
  }


.c-pickup__ribbon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  text-align: center;
  padding: 0 2rem;
  background: #f13e46;
  color: #fff;
  box-sizing: border-box;
  font-weight: bold;
}

@media screen and (min-width: 720px) {
  .c-pickup__ribbon {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 719px) {
  .c-pickup__ribbon {
    font-size: 1.7rem;
    line-height: 1.5;
    flex-flow: column;
    margin-top: 1rem;
  }
}

.c-pickup__ribbon::before,
.c-pickup__ribbon::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
}

.c-pickup__ribbon::before {
  top: 0;
  left: 0;
  border-width: 3rem 0 3rem 1rem;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.c-pickup__ribbon::after {
  top: 0;
  right: 0;
  border-width: 3rem 1rem 3rem 0;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.c-pickup {
  overflow: hidden;
  margin: 1rem 0;
}

.c-pickup__box {
  border-radius: 1rem;
  overflow: hidden;
  background: #f7f7f7;
  margin: 2.5rem 0 6rem;
  border: 1px solid #dbdbdb;
}

.c-pickup__img {
  position: relative;
  overflow: hidden;
  padding-top: 135%;
}

.c-pickup__img__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-pickup__img__slider img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.c-pickup__img__slider iframe {
  width: 100%;
  height: 100%;
}

.c-pickup__img__slider__item {
  position: relative;
}

.c-pickup__img__slider__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}

.c-pickup__img__slider__pagination {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.c-pickup__img__slider__pagination .swiper-pagination-bullet {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 0;
  background: #FFBC09;
  opacity: 0.3;
}

.c-pickup__img__slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.c-pickup__img__detail {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
}

.c-pickup__img__detail__inner {
  padding: 2.5rem;
  color: white;
}

.c-pickup__img__detail__title {
  font-weight: bold;
  line-height: 1;
}

@media screen and (min-width: 720px) {
  .c-pickup__img__detail__title {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 719px) {
  .c-pickup__img__detail__title {
    font-size: 1.4rem;
  }
}

.c-pickup__img__detail__date {
  margin-top: 10px;
  line-height: 1;
}

@media screen and (min-width: 720px) {
  .c-pickup__img__detail__date {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 719px) {
  .c-pickup__img__detail__date {
    font-size: 1rem;
  }
}

.c-pickup__body {
  padding: 1rem;
  border: 4px solid #f13e46;
  border-top: #ffffff;
}

.c-pickup__text {
  margin-bottom: 0px;
  line-height: 1.8;
}

.c-pickup__text>span {
  background: linear-gradient(transparent 50%, #fffab4 50%);
  display: inline;
  font-weight: bold;
}

.c-pickup__text>span>span {
  color: #D10318;
}

.c-pickup__text strong {
  color: #1977E7;
}

@media screen and (min-width: 720px) {
  .c-pickup__text {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 719px) {
  .c-pickup__text {
    font-size: 1.2rem;
  }
}


.c-pickup__button__head {
  text-align: center;
  margin-top: 1rem;
}

.c-pickup__button__head>span {
  display: inline-block;
  position: relative;
  padding: -0.1rem;
  text-align: center;
  font-size: 1.6rem;
}

.c-pickup__button__head>span::before,
.c-pickup__button__head>span::after {
  content: "";
  position: absolute;
  top: 60%;
  display: inline-block;
  width: 3rem;
  height: 0.1rem;
  background-color: #ffbc09;
}

.c-pickup__button__head>span::before {
  left: 0;
  transform: rotate(60deg);
}

.c-pickup__button__head>span::after {
  right: 0;
  transform: rotate(-60deg);
}

a.c-pickup__button {
  font-size: 1.6rem;
  margin-top: 1.8rem;
  line-height: 1;
  background: #ffbc09;
  color: white;
  font-weight: bold;
  padding: 2rem;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  text-align: center;
}

a.c-pickup__button.--green {
  background: #06d64c;
}

a.c-pickup__button:hover {
  opacity: 0.7;
}

a.c-pickup__button::after {
  display: inline-block;
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0.1rem 1rem;
  background-image: url(../img/icon-blank.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

a.c-pickup__button::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 4rem;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}



.c-pickup__slash {
  text-align: center;
  margin-top: 2.5rem;
}

.c-pickup__slash>p {
  display: inline-block;
  position: relative;
  padding: 0.2rem;
  text-align: center;
  font-size: 1.6rem;
}

.c-pickup__slash>p::before,
.c-pickup__slash>p::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 1.8rem;
  height: 0.1rem;
  background-color: #FFBC09;
}

.c-pickup__slash>p::before {
  left: 0;
  transform: rotate(60deg);
}

.c-pickup__slash>p::after {
  right: 0;
  transform: rotate(-60deg);
}

.c-pickup__slash>p>span {
  background: linear-gradient(transparent 50%, #fffab4 50%);
  display: inline;
  font-weight: bold;
}

.c-pickup__slash>p>span>span {
  color: #D10318;
}

@media screen and (max-width: 719px) {
  .c-pickup__slash>p>span>span {
    display: inline-block;
  }
}

.c-pickup__slash>p strong {
  color: #ffbc09;
}

.c-pickup__button__head {
  text-align: center;
  margin-top: 2.5rem;
}

.c-pickup__button__head>span {
  display: inline-block;
  position: relative;
  padding: 0 2rem;
  text-align: center;
  font-size: 1.6rem;
}

.c-pickup__button__head>span::before,
.c-pickup__button__head>span::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 1.6rem;
  height: 0.1rem;
  background-color: #D10318;
}

.c-pickup__button__head>span::before {
  left: 0;
  transform: rotate(60deg);
}

.c-pickup__button__head>span::after {
  right: 0;
  transform: rotate(-60deg);
}


.c-pickup__marker {
  background: linear-gradient(transparent 50%, #fffab4 50%);
  display: inline;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-pickup__marker>span {
  color: #D10318;
}

.c-pickup__marker strong {
  color: #D10318;
}

.c-pickup__color {
  color: #D10318;
}

@keyframes shiny {
  0% {
    left: -20%;
  }

  10% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}


.invisible {
  display: none;
}

/* タブデザイン */
.c-tabContents {
  padding: 3% 0% 3% 0%;
}

.c-tabContents__tab {
  display: flex;
  justify-content: space-between;
  list-style: none;
  position: relative;
}

.c-tabContents__tab.--ul>*::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.c-tabContents__tab>* {
  align-items: center;
  background: #f3f3f3;
  border-radius: 0.8rem 0.8rem 0 0;
  color: #b0b0b0;
  cursor: pointer;
  display: flex;
  height: 7rem;
  justify-content: center;
  text-align: center;
  width: calc((100% - 1.4rem) / 2);
}

@media screen and (min-width: 720px) {
  .c-tabContents__tab>* {
  align-items: center;
  background: #f3f3f3;
  border-radius: 0.8rem 0.8rem 0 0;
  color: #b0b0b0;
  cursor: pointer;
  display: flex;
  height: 5rem;
  justify-content: center;
  text-align: center;
  width: calc((100% - 2rem) / 5);
}
}

@media screen and (max-width:750px) {
  .c-tabContents__tab>* {
  align-items: center;
  background: #f3f3f3;
  border-radius: 0.8rem 0.8rem 0 0;
  color: #b0b0b0;
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 4.2rem;
  justify-content: center;
  text-align: center;
  width: calc((100% - 1.4rem) / 5);
}
}

.c-tabContents__tab>*.--active {
  color: white;
  font-weight: bold;
}

.c-tabContents__tab>*.--active.--category1 {
  background: #64AAE1;
}

.c-tabContents__tab>*.--active.--category1::after {
  border-bottom: 2px solid #64AAE1;
}

.c-tabContents__tab>*.--active.--category2 {
  background: #cc5266;
}

.c-tabContents__tab>*.--active.--category2::after {
  border-bottom: 2px solid #cc5266;
}


.c-tabContents__box {
  display: none;
  margin-bottom: 5px;
}

.c-tabContents__box.--category1 {
  background: #E6F4FF;
  padding: 0 10px;
  border: 1px #64AAE1 solid;
}

.c-tabContents__box.--category2 {
  background: #fff;
  padding: 4% 1% 4% 1%;
  border: 3px #cc5266 solid;
}

.c-tabContents__box.--active {
  display: block;
}

.c-tabContents__box__list {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.c-tabContents__box__list>* {
  width: calc((100% - 7.8rem) / 4);
}

.c-tabContents__box__list__head {
  border-radius: 0.8rem;
  color: white;
  display: block;
  font-size: 1.4rem;
  text-align: center;
}

.--category1 .c-tabContents__box__list__head {
  background: #24acbe;
}

.--category2 .c-tabContents__box__list__head {
  background: #da3b9a;
}

.--category3 .c-tabContents__box__list__head {
  background: #51c247;
}

.c-tabContents__box__list__list {
  list-style: none;
}

.c-tabContents__box__list__list__icon {
  margin-top: 1.6rem;
}

.c-tabContents__box__list__list__icon img {
  border: 1px solid #d9d9d9;
  border-radius: 1.2rem;
  overflow: hidden;
  width: 100%;
}

.c-tabContents__box__list__list__name {
  font-size: 1.4rem;
  margin-top: 0.4rem;
  text-align: center;
}

.center {
  text-align: center;
}

/* マウスピースLP */
.osusume_box {
  border: #64AAE1 solid 1px;
  padding: 10px;
  line-height: 1.5;
  margin: 20px auto 40px;
  background-color: #fff;
}

.point {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #64AAE1;
}

@media screen and (min-width: 720px) {
  .point {
  font-weight: bold;
  color: #64AAE1;
  font-size: 2rem;
  }
}

.point::before {
  content: "";
  display: inline-block;
  background-image: url(../img/ic_top_arrow.webp);
  background-size: cover;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
  margin-right: 5px;
}

@media screen and (min-width: 720px) {
  .point::before {
  content: "";
  display: inline-block;
  background-image: url(/img/ic_top_arrow.webp);
  background-size: cover;
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  vertical-align: text-bottom;
  margin-right: 5px;
}
}

.point_list {
   list-style: none; 
   line-height: 1.6;
   padding: 5px 10px 10px 15px;
}

.point_list > li { 
   position: relative; 
   margin-bottom: .6rem;
}

.point_list > li:before {
   content: ''; 
   background-color: #64AAE1;
   position: absolute; 
   top: 8px; 
   left: -1em; 
   width: 5px; 
   height: 5px; 
   border-radius: 50%; 
}

@media screen and (min-width: 720px) {
  .point_list {
   list-style: none; 
   line-height: 1.6;
   padding: 5px 10px 10px 35px;
}

.point_list > li { 
   position: relative; 
}

.point_list > li:before {
   content: ''; 
   background-color: #64AAE1;
   position: absolute; 
   top: 16px; 
   left: -1em; 
   width: 8px; 
   height: 8px; 
   border-radius: 50%; 
}
}

.comparison_table_heading {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.comparison_table_heading span {
  border-bottom: 2px dashed #0E629E;
}

@media screen and (min-width: 720px) {
  .comparison_table_heading {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

.comparison_table_heading span {
  border-bottom: 4px dashed #0E629E;
}
}

.table_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.table_flex p {
  margin-right: 6px;
}

.table_flex p:nth-child(2n) {
  margin-right: 0;
}

.comparison_table_subheading {
  font-size: 16px;
  font-weight: bold; 
}

.comparison_table_subheading span {
  background-color: #64AAE1;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
}

.comparison_table_subheading2 {
  font-size: 14px;
  font-weight: bold; 
}

.comparison_table_subheading2 span {
  background-color: #D9D9D9;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
}

@media screen and (min-width: 720px) {
  .comparison_table_subheading {
  font-size: 2.6rem;
  font-weight: bold; 
}

.comparison_table_subheading span {
  background-color: #64AAE1;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
}

.comparison_table_subheading2 {
  font-size: 2.6rem;
  font-weight: bold; 
}

.comparison_table_subheading2 span {
  background-color: #D9D9D9;
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
}
}


.img_box {
  margin-bottom: 20px;
}

@media screen and (min-width: 720px) {
  .img_box {
  margin: 30px auto;
  text-align: center;
}
}

.top_text {
  margin-bottom: 20px;
  line-height: 1.8;
}

.top_text span {
  background: linear-gradient(transparent 50%, rgba(255,250,125,0.86)  70%);
  font-weight: bold;
}

/*テーブルデザイン*/
.c-table-group {
  margin-bottom: 40px;
}


.c-table-group .table {
  margin-left: auto;
  margin-right: auto;
}

.c-table-group .table img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.c-recommend-app__name {
  line-height: 1.3;
  color: #64AAE1;
  font-size: 1.4rem;
}

@media screen and (min-width: 720px) {
  .c-recommend-app__name {
    font-size: 1.8rem;
  }
}

.c-table-group .table-title {
  color: #fff;
  text-align: center;
  padding: 1em;
  font-size: 1.3em;
  font-weight: 600;
  border-radius: 0.5em 0.5em 0 0;
}

.c-table-group .table .inner-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #ddd;
  text-align: center;
  background-color: #fff;
}

.c-table-group .table .fixed-row {
  position: sticky;
  top: 0;
  z-index: 10;
}

.c-table-group .table .inner-table thead th {
  padding: .5em;
  /* background-color: #fff; */
  box-shadow: 0 0 0 #000;
}

.c-table-group .table .inner-table tbody th {
  background-color: #ddf6ff;
  font-weight: 700;
  font-size: 1.3rem;
  padding: .8rem;
  text-align: center;
  color: #64AAE1;
}

@media screen and (min-width: 720px) {
  .c-table-group .table .inner-table tbody th {
    font-size: 1.8rem;
    padding: 1.2rem;
  }
}

.c-table-group .table .inner-table tbody td {
  padding: 1em 0.5em;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
}

@media screen and (min-width: 720px) {
  .c-table-group .table .inner-table tbody td {
  padding: 1.2rem;
  font-size: 1.6rem;
}
}

.c-table-group .table .inner-table tbody:last-child td {
  border-bottom: none;
}

.c-table-group .table .inner-table th,
.c-table-group .table .inner-table td {
  border-bottom: 1px solid #ddd;
  border-right: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-top: solid 1px #ddd;
}

.t1 {
  background-color: #FFF5D4;
   border: 1px  solid #FFF5D4;
}

.t2 {
  background-color: #FFF9E5;
  border: 1px  solid #FFF9E5;
}

.t3 {
  background-color: #FDF2F4;
  border: 1px  solid #FDF2F4;
}



.contents_title {
  color: #333;
  padding: 0.7em 0;
  border-top: solid 3px #64AAE1;
  border-bottom: solid 3px #64AAE1;
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (min-width: 720px) {
  .contents_title {
    font-size: 2.2rem;
  }
}

.area_box {
    position: relative;
    padding: 1rem;
    border: solid 1px #F8BB5E;
    background-color: #fff;
    margin-bottom: 20px;
}

.area_box .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: -1px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    background: #F8BB5E;
    color: #ffffff;
    font-weight: bold;
}

@media screen and (min-width: 720px) {
  .area_box .box-title {
    font-size: 2rem;
    height: 30px;
    line-height: 30px;
     top: -30px;
  }
}

.area_box p {
    margin: 0; 
    padding: 0;
}

.button_box {
    padding: 2rem;
    font-weight: bold;
    border: solid 1px #F8BB5E;
    background-color: #fff;
    margin-bottom: 20px;
}

.button_box p {
    margin: 0; 
    padding: 0;
}

.img_box_button {
  background-color: #E6F9FF;
  margin-bottom: 12px;
  text-align: center;
}

.img_box_button img {
  max-height: 50px;
  width: auto;
}

.point_box {
    position: relative;
    padding: 40px 15px 20px;
    border: solid 1px #F8BB5E;
    background: #fff;
    margin-bottom: 25px;
}

.point_box .box-title {
    position: absolute;
    display: inline-block;
    top: -1px;
    left: -1px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    background: #F8BB5E;
    color: #ffffff;
    font-weight: bold;
}

@media screen and (min-width: 720px) {
  .point_box .box-title {
    font-size: 2rem;
    height: 30px;
    line-height: 30px;
  }
}

.point_box p {
    margin: 0; 
    padding: 0;
}

.title_c {
  background: #64AAE1;
  padding: 12px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
}

@media screen and (min-width: 720px) {
  .title_c {
  padding: 2rem;
  font-size: 2rem;
}
}

.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width: 720px) {
  .flex_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
}


.flex_box  p {
  margin-top: 15px;
}

.case_box {
    margin-top: 15px;
    background: #dcefff;
}
.case_box .box-title {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.05em;
}
.case_box p {
    padding: 15px 20px;
    margin: 0;
}

.be {
  background: #ABAAAA;
}

.be_box {
  background: #D9D9D9;
}

.af {
  background: #00BFFF;
}

.af_box {
  background: #7DDEFF;
}

.case_img {
  padding: 15px;
}

.case_img img {
  background-color: #fff;
}

@media screen and (min-width: 720px) {
  .case_img img {
    max-width: 300px;
  }
}

.case_text_box {
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.case_text_box p {
  display: block;
  line-height: 1.8;
  font-weight: bold;
}

.case_text_box span {
  color: #ED7081;
}

.order_box {
    background: #FFF5D4;
    margin: 25px 0;
}

.order_box p {
    font-weight: bold;
    font-size: 1.4rem;
    padding: 10px 10px 5px 10px;
}

@media screen and (min-width: 720px) {
  .order_box p {
    font-size: 2rem;
}
}

.order_box ul {
  padding-bottom: 15px;
}

.order_box li {
  line-height: 1.5;
  margin-bottom: 5px;
  padding-left: 10px;
}

.ranking_top_text {
  color: #64AAE1;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 10px;
}

@media screen and (min-width: 720px) {
  .ranking_top_text {
  font-size: 2.6rem;
}
}

.c-button--flash {
  overflow: hidden;
  position: relative;
}

.c-button--flash::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: flash 3s ease-in-out infinite;
}

@-webkit-keyframes flash {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.content_box {
  margin-bottom: 45px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

@media screen and (min-width: 720px) {
  table {
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 719px) {
  table {
    margin-bottom: .5rem;
  }
}

table tr th,
table tr td {
  padding: 1rem;
  border: 1px solid #dbdbdb;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
}

@media screen and (min-width: 720px) {
  table tr th, table tr td {
  font-size: 1.6rem;
  padding: 1.2rem;
}
}

table tr th {
  background-color: #65a9e1;
  text-align: center;
  color: #fff;
  font: weight 0;
}

table tr td {
  background-color: #ffffff;
}

.sub_text {
  font-size: 1rem;
  color: #333;
}

.mg0 {
  margin-bottom: 0;
}

.mg40 {
  margin-bottom: 40px;
}

.mg20 {
  margin-bottom: 20px;
}

@media screen and (min-width: 720px) {
  .c-list li {
    margin-bottom: 1.6rem;
  }
}

@media screen and (max-width: 719px) {
  .c-list li {
    margin-bottom: 1.2rem;
  }
}

.c-list--check {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.c-list--check li {
  position: relative;
}

@media screen and (min-width: 720px) {
  .c-list--check li {
    padding-left: 3rem;
  }
}

@media screen and (max-width: 719px) {
  .c-list--check li {
    padding-left: 2.3rem;
    line-height: 1.3;
  }
}

.c-list--check li:before {
  position: absolute;
  left: 0;
  display: block;
  content: "";
  background-color: #58CA12;
  background-image: url(../img/ico-checkbox.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

@media screen and (min-width: 720px) {
  .c-list--check li:before {
    top: 0.3rem;
    width: 1.8rem;
    height: 1.8rem;
  }
}

@media screen and (max-width: 719px) {
  .c-list--check li:before {
    top: 0.2rem;
    width: 1.4rem;
    height: 1.4rem;
  }
}

.c-list--posi li span {
  background: linear-gradient(transparent 50%, #5cc5d8 50%);
  display: inline;
  font-weight: bold;
}

.c-list--nega span {
  background: linear-gradient(transparent 50%, #f5515a 50%);
  display: inline;
  font-weight: bold;
}

.c-list--nega li::before {
  background-color: #f5515a;
}


.c-list>*:last-child {
  margin-bottom: 0;
}

.gray {
  color: #999;
}

.review_box {
  margin-bottom: 5px;
  background-color: #fff;
  padding: 10px;
  border: #FDDB99 1px solid;
}

@media screen and (min-width: 720px) {
  .review_box {
    padding: 20px;
  }
}

.center_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* コラム */
.c-hw-level2 {
  border-bottom: 3px solid #64AAE1;
  font-weight: 700;
}

@media screen and (min-width: 720px) {
  .c-hw-level2 {
    line-height: 1.5;
    padding-bottom: 1.6rem;
    margin-top: 6rem;
    margin-bottom: 4rem;
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 719px) {
  .c-hw-level2 {
    line-height: 1.4;
    padding-bottom: 1.2rem;
    margin-top: 4rem;
    margin-bottom: 2.8rem;
    font-size: 1.6rem;
  }

  .c-hw-level2>span {
    display: inline-block;
  }
}

.c-contents h3 {
  line-height: 1.5;
  font-weight: 700;
}

@media screen and (min-width: 720px) {
  .c-contents h3 {
    margin-bottom: 2rem;
    margin-top: 4rem;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 719px) {
  .c-contents h3 {
    margin-bottom: 1.4rem;
    margin-top: 2.8rem;
    font-size: 1.4rem;
  }
}

.c-contents p {
  line-height: 1.8;
}

/*テーブル赤文字クラス*/
.content_box table span{
  color: #f5515a;
}

/*sbcロゴ用クラス*/
.img_box_button_sbc {
  background-color: #63AAE1;
  margin-bottom: 12px;
  text-align: center;
}

.img_box_button_sbc img {
  max-height: 50px;
  padding: 3px;
  width: auto;
}

/* アコーディオン */
.accordion-008 {
    max-width: 500px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    background-color: #fff;
}

@media screen and (min-width: 720px) {
  .accordion-008 {
    max-width: 1200px;
  }
}

.accordion-008 summary {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
}

.accordion-008 summary::-webkit-details-marker {
  display: none;
}

.accordion-008 summary::before,
.accordion-008 summary::after {
  width: 3px;
  height: .9em;
  border-radius: 5px;
  background-color: #333333b3;
  content: '';
}

.accordion-008 summary::before {
  position: absolute;
  right: 2em;
  rotate: 90deg;
}

.accordion-008 summary::after {
  transition: rotate .3s;
  position: absolute;
  right: 2em;
}

.accordion-008[open] summary::after {
  rotate: 90deg;
}

.accordion-008 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.em 1.em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-008[open] p {
  transform: none;
  opacity: 1;
  line-height: 1.8;
}

.accordion-008 ul {
  margin: 0;
  padding: .3em 2em 1em;
  color: #333333;
}

.accordion-008 li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.custom-list {
  list-style: none;
  line-height: 1.5;
}

.custom-list>li {
  position: relative;
}

.custom-list>li:before {
  content: '';
  background-color: #ED7081;
  position: absolute;
  top: 8px;
  left: -1em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.question::before {
  content: "";
  display: inline-block;
  background-image: url(../img/ic_question.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  vertical-align: text-bottom;
  margin-right: 15px;
}

@media screen and (min-width: 720px) {
  .question::before {
    width: 40px;
    height: 40px;
  }
}

.answer::before {
  content: "";
  display: inline-block;
  background-image: url(../img/ic_answer.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  vertical-align: text-bottom;
  margin-right: 15px;
}

@media screen and (min-width: 720px) {
  .answer::before {
    width: 40px;
    height: 40px;
  }
}

.answer_titel {
  display: flex;
  align-items: center;
  padding: .3em 2em 1.5em;
}

.answer_text {
  padding: .3em 2em 1.5em;
}

/* 新テーブルデザイン */
.table_wrap {
  overflow-x: auto;
}

.comparison_table {
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px 0;
  white-space: wrap;
}

.comparison_table th {
  font-size: 12px;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  color: #65a9e1;
  border-radius: 6px 0px 0 6px;
}

.comparison_table td {
  font-size: 12px;
  border: none;
  padding: 12px 6px;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 1.7;
  vertical-align: top;
}

.comparison_table thead th {
  border-radius: 6px 6px 0 0;
  color: #fff;
}

.comparison_table thead th:nth-child(1) {
  background: #eaf6fe;
  background-color: transparent;
}

.comparison_table tbody tr:first-child th {
  border-radius: 6px 0px 0 6px;
}

.comparison_table tbody tr:last-child td {
  border-radius: 0 0 6px 6px;
}

.comparison_table thead th:nth-child(2) {
  border-top: solid 2px #ED7081;
  border-left: solid 2px #ED7081;
  border-right: solid 2px #ED7081;
}

.comparison_table tbody td:nth-child(2) {
  border-left: solid 2px #ED7081;
  border-right: solid 2px #ED7081;
}

.comparison_table tbody tr:last-child td:nth-child(2) {
  border-bottom: solid 2px #ED7081;
}

/* テーブル内のリスト */
.comparison_table ul {
  text-align: left;
}

.comparison_table li {
  margin-left: 2rem;
  position: relative;
  margin-bottom: 5px;
}

.comparison_table li:before {
   content: ''; 
   background-color: #F76A56;
   position: absolute; 
   top: 10px; 
   left: -1em; 
   width: 4px; 
   height: 4px; 
   border-radius: 50%; 
}

.th-top {
  border: 1px #eaf6fe solid;
}

.th-sub {
  width: 80px;
  background: #ddf6ff;
  border: 1px #fff solid;
}


  .table_wrap {
    position: relative;
    margin: 20px auto 40px;
    padding-top: 25px;
  }

  .table_wrap::before {
    content: '＼編集部のおすすめ／';
    font-size: 13px;
    font-weight: bold;
    color: #ED7081;
    position: absolute;
    top: 6px;
    left: 100px;
  }

  @media screen and (min-width: 720px) {
  .table_wrap {
    position: relative;
    margin: 20px auto 40px;
    padding-top: 25px;
  }

  .table_wrap::before {
    content: '＼編集部のおすすめ／';
    position: absolute;
    top: 6px;
    left: 125px;
  }
  }

.table_icon {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.left {
  text-align: left;
}

/* ボタン影 */
.box_shadow {
  filter: drop-shadow(4px 4px 4px #aaa);
}

/* 調査のコンテンツcss */
.tyousa_text {
  margin: 10px 0;
}

.tyousa_text img {
  padding: 0 40px;
}

@media screen and (min-width:828px) {
  .tyousa_text img {
  padding: 0 40px;
}
}

.right_text {
  text-align: right;
  padding: 0 20px;
  font-size: 8px;
  margin-bottom: 45px;
}

.tyousa_box {
  background-color: #fff;
  border: #64AAE1 6px solid;
  border-radius: 1rem;
  margin-bottom: 45px;
  position: relative;
}

@media screen and (min-width:828px) {
  .tyousa_box　{
  padding: 0 40px;
}
}

.clip {
  z-index: 1;
  position: absolute;
  top: -60px;
  left: 27%;
}

@media screen and (min-width:750px) {
  .clip {
    top: -64px;
  }
}

.clip img {
  max-width:150px;
  height: auto;
}

@media screen and (min-width:750px) {
  .clip img {
    max-width:300px;
  }
}

.tyousa_box img {
  padding: 30px 20px;
}

@media screen and (min-width:750px) {
  .tyousa_box img {
    padding: 30px 80px;
  }
}

.tyousa_midashi {
  margin-top: 20px;
}

.tyousa_midashi span {
  background-color: #4da1e4;
  color: #fff;
  padding: 10px;
  font-weight: bold;
  border-radius: 0px 20px 20px 0;
}

/* グラフ */
.Matching__eyecatchBox {
    margin: 2rem 0
}

.Matching__eyecatch {
    width: 35rem;
    height: 35rem;
    background-color: #fff;
    margin: auto;
    position: relative;
}

.Matching__eyecatch::before,
.Matching__eyecatch::after {
    content: "";
    display: block;
    background: #64AAE1;
    position: absolute
}

.Matching__eyecatch::before {
    width: 60%;
    height: .2rem;
    top: 17.9rem;
    left: 75px;
    z-index: 999
}

.Matching__eyecatch::after {
    width: .2rem;
    height: 68%;
    top: 62px;
    left: 17.9rem;
    z-index: 999
}

.Matching__eyecatch__name {
    position: absolute;
    text-align: center;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.2
}

.--red .Matching__eyecatch__name {
    color: #f2556f
}

.--blue .Matching__eyecatch__name {
    color: #53adff
}

.Matching__eyecatch__name.--top {
    top: 0rem;
    padding: 1rem;
    background-color: #ff9500;
    left: 41%;
    font-size: 10px;
    color: #fff;
}

.Matching__eyecatch__name.--bottom {
    bottom:0rem;
    left: 43%;
    padding: 1rem;
    font-size: 10px;
    background-color: #bfbfbf;
    color: #fff;
}

.Matching__eyecatch__name.--left {
    top: calc(50% - 2rem);
    left: 0rem;
    padding: 1rem;
    background-color: #bfbfbf;
    font-size: 10px;
    color: #fff;
}

.Matching__eyecatch__name.--right {
    top: calc(50% - 2rem);
    right: 0rem;
    padding: 1rem;
    background-color: #ff9500;
    font-size: 10px;
    color: #fff;
}

.Matching__eyecatch__icon {
    --xPoint: calc((var(--x) - 1) * 9rem);
    --yPoint: calc((var(--y) - 1) * 9rem);
    top: var(--yPoint);
    left: var(--xPoint);
    position: absolute;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4);
  }

.Matching__eyecatch__icon img {
  max-width: 70px;
}

.Matching__eyecatch__icon_b {
    --xPoint: calc((var(--x) - 1) * 9rem);
    --yPoint: calc((var(--y) - 1) * 9rem);
    top: var(--yPoint);
    left: var(--xPoint);
    position: absolute;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4);
  }

.Matching__eyecatch__icon_b img {
  max-width: 30px;
}

.Matching__eyecatch__ranking {
    background: #FFF;
    margin-bottom: 2em
}

.Matching__eyecatch__syousai__app {
    display: flex;
    padding: 1em .5em 1em .5em
}

.Matching__eyecatch__syousai__icon {
    width: 20%;
    padding: 1.8em .8em
}

.Matching__eyecatch__syousai__detail {
    width: 85%
}

.Matching__eyecatch__syousai__detail span {
    line-height: 1.5;

}

.Matching__eyecatch__button {
    margin-top: 1em
}

.Matching__eyecatch__text__pp {
    padding: 1rem 3rem 0 3rem;
    margin: 2% 0 0 0
}

.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.heading-16::before,
.heading-16::after {
    width: 1px;
    height: 25px;
    background-color: #333;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 12px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 12px;
}

.right {
  text-align: right;
  font-size: 8px;
  margin-bottom: 15px;
}

.hayamihyou {
  margin-bottom: 40px;
}

.map_box {
  background-color: #fff;
  border: #64AAE1 1px solid;
}

.question_box {
  margin-bottom: 45px;
}

.osusume_img {
  padding: 10px 20px 20px 20px;
}

@media screen and (min-width:750px) {
  .osusume_img {
  padding: 40px 60px
}
}

.osusume_img img {
   border: 1px #64AAE1 solid;
}

.step_img {
  position: relative;
}

.step_button {
  position: absolute;
  top:228px;
}

@media screen and (min-width:750px) {
  .step_button {
  top:450px;
}
}

/* 単一記事 */
/*#########################################################

アニメーション

#########################################################*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes updown {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 15px);
  }
}

/* ========================================================
矢印
=========================================================*/
.arrow.-openleft::before, .arrow.-openright::before, .arrow.-opendown::before, .arrow.-openup::before {
  width: 9px;
  height: 9px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow.-left::after, .arrow.-right::after, .arrow.-up::after, .arrow.-down::after {
  width: 9px;
  height: 9px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  text-indent: -10000px;
  width: 9px;
  height: 9px;
}
.arrow::after, .arrow::before {
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
  margin: auto;
  vertical-align: middle;
}
.arrow.-opendown::before, .arrow.-openup::before {
  transform: rotate(-45deg);
}
.arrow.-opendown::before {
  transform: rotate(135deg);
}
.arrow.-openleft::before, .arrow.-openright::before {
  transform: rotate(45deg);
}
.arrow.-openleft::before {
  transform: rotate(-135deg);
}
.arrow.-up, .arrow.-down {
  width: 9px;
}
.arrow.-up::before, .arrow.-down::before {
  right: 0;
  width: 1px;
  height: 9px;
  background: #000;
}
.arrow.-up::after, .arrow.-down::after {
  transform: rotate(-45deg);
}
.arrow.-down::after {
  transform: rotate(135deg);
}
.arrow.-left::before, .arrow.-right::before {
  width: 9px;
  height: 1px;
  background: #000;
}
.arrow.-left::after, .arrow.-right::after {
  transform: rotate(45deg);
}
.arrow.-left::after {
  transform: rotate(-135deg);
}

/* ========================================================
Components
=========================================================*/
/* ========================================================
Project
=========================================================*/
/* ========================================================
固定ページ
=========================================================*/
.p-pageContents {
  background: white;
  margin: auto;
  max-width: 75rem;
  width: 100%;
}

.p-right {
  text-align: right;
}

.p-pageContents__area1 {
  position: relative;
  padding-bottom: 8em; 
}

@media screen and (max-width: 719px) {
  .p-pageContents__area1 {
  padding-bottom: 4em;
}
}

.p-pageContents__area1::after {
  border-color: transparent white white white;
  border-style: solid;
  border-width: 8rem 37.5rem 0;
  bottom: 0;
  content: "";
  display: block;
  height: 8rem;
  left: 0;
  position: absolute;
}

@media screen and (max-width: 719px) {
.p-pageContents__area1::after {
  border-width: 4rem 50vw 0;
}
}

/* .p-pageContents__area1.is-show-after::after { 
  opacity: 1;
}
  */

.p-pageContents__area2 {
  background: white;
  position: relative;
}

.p-pageContents__head {
  display: flex;
  flex-flow: column;
  margin-bottom: 4rem;
  text-align: center;
}

@media screen and (max-width: 719px) {
  .p-pageContents__head {
    margin-bottom: 2rem;
  }
}

.p-pageContents__head__sub {
  font-size: 3.6rem;
  line-height: 1.4375em;
  margin-bottom: 1rem;
}

@media screen and (max-width: 719px) {
  .p-pageContents__head__sub {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
}

.p-pageContents__head__sub strong {
  color: #e5296e;
  line-height: 1.4375em;
}
.p-pageContents__head__sub strong em {
  font-size: 4.8rem;
  font-style: normal;
  line-height: 1.4375em;
}

@media screen and (max-width: 719px) {
  .p-pageContents__head__sub strong em { 
    font-size: 2.4rem;
  }
}

.p-pageContents__head__main {
  font-size: 5.6rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.4375em;
}

@media screen and (max-width: 719px) {
  .p-pageContents__head__main {
    font-size: 1.8rem;
  }
}

.c-question {
  margin-bottom: max(3rem, 8vw);
}
.c-question__item {
  margin-bottom: 8rem;
}
.c-question__item__bc {
  margin-bottom: 2rem;
}
.c-question__item__bc ol {
  display: flex;
  gap: 7.6rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 719px) {
  .c-question__item__bc ol { 
   gap: 2.6rem;
  }
}

.c-question__item__bc ol li {
  align-items: center;
  background-color: #dfdfdf;
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 4rem;
  height: 10rem;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 10rem;
}

@media screen and (max-width: 719px) {
  .c-question__item__bc ol li {  
   font-size: 2rem;
   height: 5rem;
   width: 5rem;
  }
}

.c-question__item__bc ol li.c-question__item__bc__selected {
  background-color: #06b7c9;
}
.c-question__item__bc ol li:not(:last-child)::before {
  background-color: #dfdfdf;
  content: "";
  height: 0.5rem;
  position: absolute;
  right: -7.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7.6rem;
  z-index: 0;
}
.c-question__item__head {
  color: #06b7c9;
  font-size: 5.6rem;
  font-weight: bold;
  line-height: 1.4375em;
  text-align: center;
}

@media screen and (max-width: 719px) {
  .c-question__item__head {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}

.c-question__item__title {
  margin-bottom: 4rem;
}

@media screen and (max-width: 719px) {
  .c-question__item__title {
      margin-bottom: 2rem;
  }
}

.c-question__item__title p {
  color: #333;
  font-size: 3.2rem;
  line-height: 1.4375em;
  text-align: center;
}

@media screen and (max-width: 719px) {
  .c-question__item__title p {
    font-size: 1.4rem;
  }
}

.c-question__item__img {
  margin-bottom: 4rem;
  text-align: center;
}
.c-question__item__img img {
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}
.c-question__item__btn {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.c-question__item__btn > div {
  width: calc((100% - 2rem) / 2);
}


.c-question__item__btn.--wide > div {
  width: 100%;
}
.c-question__item__btn label {
  align-items: center;
  background-color: white;
  border: 2px solid #dfdfdf;
  border-radius: 1rem;
  color: #ff1493;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  font-size: 2.6rem;
  font-weight: bold;
  gap: 1rem;
  line-height: 1.4375em;
  padding: 2rem 0;
  text-align: center;
  transition: all 0.2s ease;
}

@media screen and (max-width: 719px) {
  .c-question__item__btn label {
    font-size: 1.2rem;
  }
}

.c-question__item__btn label img {
  display: block;
  height: 10rem;
  width: auto;
}

@media screen and (max-width: 719px) {
  .c-question__item__btn label img {
     height: 6rem;
  }
}

.c-question__item__btn input[type=radio] {
  display: none;
}
.c-question__item__btn input[type=radio]:checked + label {
  background-color: #e5296e;
  border-color: #e5296e;
  color: white;
}

.c-answer {
  text-align: center;
}
.c-answer__head {
  display: flex;
  flex-flow: column;
  margin-bottom: 4rem;
  text-align: center;
}

@media screen and (max-width: 719px) {
  .c-answer__head {
    margin-bottom: 2rem;
  }
}

.c-answer__head__sub {
  font-size: 3.6rem;
  line-height: 1.4375em;
  margin-bottom: 1rem;
}

@media screen and (max-width: 719px) {
  .c-answer__head__sub {
    font-size: 1.6rem;
  }
}

.c-answer__head__main {
  align-items: center;
  display: flex;
  font-size: 4.8rem;
  font-weight: bold;
  gap: 2rem;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1.4375em;
  position: relative;
}

@media screen and (max-width: 719px) {
  .c-answer__head__main {
    font-size: 1.8rem;
  }
}

.c-answer__head__main::before, .c-answer__head__main::after {
  border: 1px solid #333333;
  content: "";
  display: block;
  height: 1em;
  width: 1px;
}

.c-answer__head__main::before {
  transform: rotate(-45deg);
}
.c-answer__head__main::after {
  transform: rotate(45deg);
}
.c-answer__head__main strong {
  color: #e5296e;
  line-height: 1.4375em;
}
.c-answer__img {
  margin-bottom: 8rem;
}

@media screen and (max-width: 719px) {
  .c-answer__img {
     margin-bottom: 2rem;
}
}

.c-answer__img img {
  height: auto;
  width: 100%;
}
.c-answer__point__head {
  align-items: center;
  display: flex;
  font-weight: bold;
  gap: 4rem;
  justify-content: center;
  margin-bottom: 4rem;
}
.c-answer__point__head__icon {
  width: 8rem;
}

@media screen and (max-width: 719px) {
  .c-answer__point__head__icon {
width: 2rem;
}
}

.c-answer__point__head__text {
  text-align: left;
}
.c-answer__point__head__text span {
  background: linear-gradient(transparent 70%, #f5f197 30%);
  color: #e5296e;
  font-size: 5.6rem;
  line-height: 1.4375em;
}

@media screen and (max-width: 719px) {
  .c-answer__point__head__text span {
    font-size: 1.8rem;
  }
}

.c-answer__point {
  padding-top: 14rem;
}

@media screen and (max-width: 719px) {
  .c-answer__point {
    margin-top: -7rem;
  }
}

.c-answer__point li:not(:last-child) {
  margin-bottom: 18rem;
}

@media screen and (max-width: 719px) {
  .c-answer__point li:not(:last-child) {
    margin-bottom: 10rem;
  }
}

.c-answer__pointBox {
  background-color: #06b7c9;
  border-radius: 2rem;
  margin: 0 auto;
  padding: 0 3rem 6rem;
  position: relative;
}
.c-answer__pointBox::before {
  background-color: #06b7c9;
  border-radius: 50%;
  content: "";
  display: block;
  height: 38rem;
  left: calc(50% - 19rem);
  position: absolute;
  top: -14rem;
  width: 38rem;
  z-index: 0;
}

@media screen and (max-width: 719px) {
.c-answer__pointBox::before {
   height: 18rem;
   left: calc(50% - 9rem);
   top: -7rem;
   width: 18rem;
}
}

.c-answer__pointBox__head {
  align-items: center;
  display: flex;
  flex-flow: column;
  position: relative;
}
.c-answer__pointBox__head__icon {
  margin: -9rem 0 1rem;
}

@media screen and (max-width: 719px) {
  .c-answer__pointBox__head__icon {
  margin: -5rem 0 1rem;
}
}

.c-answer__pointBox__head__icon img {
  height: auto;
  width: 20rem;
}

@media screen and (max-width: 719px) {
  .c-answer__pointBox__head__icon img {
      height: auto;
      width: 10rem;
}
}

.c-answer__pointBox__text {
  color: white;
  margin-bottom: 2rem;
  position: relative;
}

.c-answer__pointBox__text span {
  display: block;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.4375em;
}

@media screen and (max-width: 719px) {
  .c-answer__pointBox__text span {
    font-size: 1.6rem;
  }
}

.c-answer__pointBox__body {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  position: relative;
}
.c-answer__pointBox__body p {
  color: white;
  font-size: 2.6rem;
  line-height: 1.4375em;
}

@media screen and (max-width: 719px) {
  .c-answer__pointBox__body p {
    font-size: 1.3rem;
  }
}

.c-answer__pointBox__body p span {
  color: #f5f197;
}
.c-answer__pointBox__body p small {
  color: #666;
  color: white;
  font-size: 2.2rem;
}

@media screen and (max-width: 719px) {
  .c-answer__pointBox__body p small {
    font-size: 1.2rem;
  }
}

.c-cta {
  background: url(../img/cta_bg.webp) center center/cover no-repeat;
  height: 126.3rem;
  padding: 97rem 5rem 7.3rem;
  width: 100%;
}

@media screen and (max-width: 719px) {
  .c-cta {
    height: 58.3rem;
    padding: 45rem 1rem 2.3rem;
    margin: 4rem 0;
  }

}

.c-cta a {
  display: block;
  text-decoration: none;
}
.c-cta a img:hover {
  transform: translateY(max(-0.2rem, -0.5vw));
}