@charset "utf-8";

/* ------------------------------------------- */
/* common */
/* ------------------------------------------- */

:root {
  --px: calc(var(--100vw) / 750);
}

@media (min-width: 750px) {
  :root {
    --px: 1px;
  }
}

.inner {
  margin-right: auto;
  margin-left: auto;
}

.w1300 {
  width: calc(var(--100vw) - 40px);
}

@media (min-width: 1241px) {
  .w1300 {
    width: 1200px;
  }
}

.w650 {
  width: calc(var(--100vw) - 40px);
}

@media (min-width: 691px) {
  .w650 {
    width: 650px;
  }
}

.apply_btn {
  display: block;
  margin-top: calc(60 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: 530px;
  max-width: calc(var(--100vw) - 40px);
}

.apply_btn:hover {
  opacity: 0.7;
}

.detail_btn {
  display: flex;justify-content: center;align-items: center;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: min(calc(100% - 40px), 610px);
  height: min(120px, calc(120 * var(--px)));
  font-size: min(40px, calc(40 * var(--px)));
  font-weight: 500;
  font-family: "Noto Sans JP";
  color: #e91f23;
  line-height: 1;
  text-align: center;
  background-color: #fff;
  border: solid calc(4 * var(--px)) #e91f23;
  border-radius: calc(60 * var(--px));
}

@media screen and (min-width: 768px) {
  .detail_btn {
    width: min(calc(100% - 40px), 530px);
    height: min(105px, calc(105 * var(--px)));
  }
}

.detail_btn:hover {
  opacity: 0.7;
}

.detail_btn::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: calc(29 * var(--px));
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: calc(60 * var(--px));
  width: calc(25 * var(--px));
  height: calc(37 * var(--px));
  background-color: #e91f23;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ------------------------------------------- */
/* header */
/* ------------------------------------------- */

header{
	margin: 0;
	padding: 0;
	background-color: #fff;
  border-bottom: solid 1px #d7d7d7;
}
header a{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 1.34vw, 15px) 0;
}
header a img{
	width: clamp(142px, 22.46vw, 235px);
	height: auto;
}

/* ------------------------------------------- */
/* mainvisual */
/* ------------------------------------------- */

#mainvisual {
  position: relative;
  --px: calc(var(--100vw) / 750);
}

@media (min-width: 768px) {
  #mainvisual {
    --px: calc(var(--100vw) / 1920);
  }
}

.mainvisual_main_img {
  width: 100%;
}

.mainvisual_fukidashi {
  position: absolute;
  top: calc(340 * var(--px));
  right: calc(59 * var(--px));
  z-index: 1;
  width: calc(150 * var(--px));
  /* height: calc(151 * var(--px)); */
}

@media (min-width: 768px) {
  .mainvisual_fukidashi {
    display: none;
  }
}

.mainvisual_classic {
  display: none;
}

@media (min-width: 768px) {
  .mainvisual_classic {
    display: block;
    position: absolute;
    top: calc(312 * var(--px));
    right: calc(90 * var(--px));
    z-index: 1;
    width: calc(292 * var(--px));
    /* height: calc(60 * var(--px)); */
  }
}

.mainvisual_card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.mainvisual_card_neon_blue {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_neon_blue {
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_neon_pink {
  position: absolute;
  top: 0;
  left: calc(var(--100vw) / 3);
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_neon_pink {
    top: calc(224 * var(--px));
    left: 0;
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_neon_yellow {
  position: absolute;
  top: 0;
  left: calc(var(--100vw) / 3 * 2);
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_neon_yellow {
    top: calc(224 * 2 * var(--px));
    left: 0;
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_classic_yellow {
  position: absolute;
  top: calc(685 * var(--px));
  left: 0;
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_classic_yellow {
    top: 0;
    right: 0;
    left: auto;
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_classic_blue {
  position: absolute;
  top: calc(685 * var(--px));
  left: calc(var(--100vw) / 3);
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_classic_blue {
    top: calc(224 * var(--px));
    right: 0;
    left: auto;
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_classic_pink {
  position: absolute;
  top: calc(685 * var(--px));
  left: calc(var(--100vw) / 3 * 2);
  width: calc(100% / 3);
  height: calc(380 * var(--px));
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainvisual_card_classic_pink {
    top: calc(224 * 2 * var(--px));
    right: 0;
    left: auto;
    width: calc(665 * var(--px));
    height: calc(100% / 3);
  }
}

.mainvisual_card_neon_blue_img, .mainvisual_card_neon_pink_img, .mainvisual_card_neon_yellow_img, .mainvisual_card_classic_yellow_img, .mainvisual_card_classic_blue_img, .mainvisual_card_classic_pink_img {
  position: absolute;
  left: calc(15 * var(--px));
  bottom: calc(-26 * var(--px));
  width: calc(334 * var(--px));
  max-width: none;
  /* height: calc(230 * var(--px)); */
}

@media (min-width: 768px) {
  .mainvisual_card_neon_blue_img, .mainvisual_card_neon_pink_img, .mainvisual_card_neon_yellow_img {
    position: absolute;
    left: calc(391 * var(--px));
    bottom: calc(-48 * var(--px));
  }

  .mainvisual_card_classic_yellow_img, .mainvisual_card_classic_blue_img, .mainvisual_card_classic_pink_img {
    left: calc(46 * var(--px));
    bottom: calc(-48 * var(--px));
    width: calc(486 * var(--px));
    max-width: none;
    height: calc(224 * var(--px));
  }
}

#mainvisual .mainvisual_card_neon_blue_img, #mainvisual .mainvisual_card_neon_pink_img, #mainvisual .mainvisual_card_neon_yellow_img, #mainvisual .mainvisual_card_classic_yellow_img, #mainvisual .mainvisual_card_classic_blue_img, #mainvisual .mainvisual_card_classic_pink_img {
  top: 100%;
  left: 100%;
  transition: ease 1s left, ease 1s top;
}

@media (min-width: 768px) {
  #mainvisual .mainvisual_card_neon_blue_img, #mainvisual .mainvisual_card_neon_pink_img, #mainvisual .mainvisual_card_neon_yellow_img {
    top: 100%;
    left: 100%;
  }

  #mainvisual .mainvisual_card_classic_yellow_img, #mainvisual .mainvisual_card_classic_blue_img, #mainvisual .mainvisual_card_classic_pink_img {
    top: 100%;
    left: calc(268 * var(--px));
  }
}

#mainvisual .mainvisual_card_neon_blue_img.on, #mainvisual .mainvisual_card_neon_pink_img.on, #mainvisual .mainvisual_card_neon_yellow_img.on, #mainvisual .mainvisual_card_classic_yellow_img.on, #mainvisual .mainvisual_card_classic_blue_img.on, #mainvisual .mainvisual_card_classic_pink_img.on {
  top: calc(174 * var(--px));
  left: calc(15 * var(--px));
}


/* @media print {
  #mainvisual .mainvisual_card_neon_blue_img, #mainvisual .mainvisual_card_neon_pink_img, #mainvisual .mainvisual_card_neon_yellow_img, #mainvisual .mainvisual_card_classic_yellow_img, #mainvisual .mainvisual_card_classic_blue_img, #mainvisual .mainvisual_card_classic_pink_img {
    left: calc(15 * var(--px));
    bottom: calc(-26 * var(--px));
  }
} */

@media (min-width: 768px) {
  #mainvisual .mainvisual_card_neon_blue_img.on, #mainvisual .mainvisual_card_neon_pink_img.on, #mainvisual .mainvisual_card_neon_yellow_img.on {
    top: calc(43 * var(--px));
    left: calc(391 * var(--px));
  }

  #mainvisual .mainvisual_card_classic_yellow_img.on, #mainvisual .mainvisual_card_classic_blue_img.on, #mainvisual .mainvisual_card_classic_pink_img.on {
    top: calc(43 * var(--px));
    left: calc(46 * var(--px));
  }
}


/* @media print and (min-width: 768px) {
  #mainvisual .mainvisual_card_neon_blue_img, #mainvisual .mainvisual_card_neon_pink_img, #mainvisual .mainvisual_card_neon_yellow_img {
    left: calc(391 * var(--px));
    bottom: calc(-48 * var(--px));
  }

  #mainvisual .mainvisual_card_classic_yellow_img, #mainvisual .mainvisual_card_classic_blue_img, #mainvisual .mainvisual_card_classic_pink_img {
    left: calc(46 * var(--px));
    bottom: calc(-48 * var(--px));
  }
} */

.mainvisual_apply_btn {
  position: relative;
  z-index: 1;
  margin-top: calc(40 * var(--px));
}

@media (min-width: 768px) {
  .mainvisual_apply_btn {
    position: absolute;
    right: 0;
    bottom: calc(238 * var(--px));
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: calc(416 * var(--px));
    height: calc(87 * var(--px));
  }
}

.return_banner {
  display: block;
  position: relative;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(92 * var(--px));
  padding-bottom: calc(69 * var(--px));
  width: calc(610 * var(--px));
}

@media screen and (min-width: 768px) {
  .return_banner {
    position: absolute;
    right: 0;
    left: 0;
    bottom: calc(40 * var(--px));
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    width: calc(403 * var(--px));
    height: calc(168 * var(--px));
  }
}

.return_banner:hover {
  opacity: 0.7;
}

/* ------------------------------------------- */
/* links */
/* ------------------------------------------- */

#links {
  display: flex;
  justify-content: center;
  padding-top: calc(69 * var(--px));
  padding-bottom: calc(85 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 40px);
}

@media screen and (min-width: 768px) {
  #links {
    padding-top: calc(65 * var(--px));
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .links_item {
    width: calc(230 * var(--px));
    height: calc(110 * var(--px));
  }

  .links_item:not(:first-child) {
    margin-left: calc(25 * var(--px));
  }
}

.links_item img {
  width: 100%;
  /* height: 100%; */
  object-fit: contain;
}

/* ------------------------------------------- */
/* feature */
/* ------------------------------------------- */

#feature {
  padding-top: calc(101 * var(--px));
  padding-bottom: calc(98 * var(--px));
  background-color: #e6edee;
}

.feature_title {
  display: block;
  margin-right: auto;
  padding-bottom: calc(48 * var(--px));
  margin-left: auto;
  width: calc(370 * var(--px));
  /* height: calc((73 + 48) * var(--px)); */
}

@media (min-width: 768px) {
  .feature_title {
    width: calc(310 * var(--px));
    /* height: calc((61 + 48) * var(--px)); */
  }
}

.feature-row {
  padding-top: calc(73 * var(--px));
}

@media screen and (min-width: 768px) {
  .feature-row {
    display: flex;
  }
}

.feature_item {
  margin-top: calc(73 * var(--px));
  position: relative;
  background-color: #fff;
}

@media (min-width: 691px) {
  .feature_item {
    padding-right: calc((var(--100vw) - 40px - 650px) / 2);
    padding-left: calc((var(--100vw) - 40px - 650px) / 2);
  }
}

@media screen and (min-width: 768px) {
  .feature_item {
    padding-right: 20px;
    padding-left: 20px;
    border-radius: calc(10 * var(--px));
  }
}

@media (min-width: 1241px) {
  .feature_item {
    padding-right: 0;
    padding-left: 0;
  }
}

.feature_item:not(:first-child) {
  margin-top: calc((59 + 73) * var(--px));
}

@media (min-width: 768px) {
  .feature_item:not(:first-child) {
    margin-top: calc(73 * var(--px));
    margin-left: calc(19 * var(--px));
  }
}

@media screen and (min-width: 1241px) {
  .feature-row .feature_item {
    width: calc((100% - (19 * var(--px))) / 2);
  }
}

.feature_item_title {
  position: absolute;
  top: calc(-73 * var(--px));
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: calc(200 * var(--px));
}

@media (min-width: 768px) {
  .feature_item_title {
    top: calc(-58 * var(--px));
    width: calc(160 * var(--px));
  }
}

.feature_item_main {
  font-size: calc(40 * var(--px));
  font-family: "Noto Sans JP";
  color: #231815;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

@media (min-width: 1241px) {
  .feature_item_main {
    font-size: 32px;
  }
}

.red-text {
  color: #e91f23;
}

.feature_item_sub {
  font-size: calc(30 * var(--px));
  font-weight: 500;
  font-family: "Noto Sans JP";
  color: #231815;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 768px) {
  .feature_item_sub {
    font-size: calc(22 * var(--px));
  }
}

.highlight-text {
  position: relative;
}

.highlight-text::after {
  content: "";
  display: block;
  position: absolute;
  top: 0.1em;
  right: 0;
  bottom: 0.1em;
  left: 0;
  background-color: #fff06d;
}

@media screen and (min-width: 768px) {
  .highlight-text::after {
    top: 0.7em;
    bottom: 0;
  }
}

.highlight-text span {
  position: relative;
  z-index: 1;
}

.feature_item_01 {
  padding-top: calc(85 * var(--px));
  padding-bottom: calc(58 * var(--px));
}

@media (min-width: 831px) {
  .feature_item_01 {
    padding-right: 20px;
    padding-left: 20px;
  }
}

.feature_item_01_main {
  margin-bottom: calc(61 * var(--px));
}

.feature_item_01_circles {
  display: block;
  margin-top: calc(29 * var(--px));
  margin-right: auto;
  margin-bottom: calc(28 * var(--px));
  margin-left: auto;
  width: calc(583 * var(--px));
  /* height: calc(180 * var(--px)); */
}

@media (min-width: 768px) {
  .feature_item_01_circles {
    margin-top: calc(42 * var(--px));
    margin-bottom: calc(43 * var(--px));
    width: calc(549 * var(--px));
    /* height: calc(171 * var(--px)); */
  }
}

.feature_item_01_example_wrapper {
  display: block;
  width: 100%;
  text-align: center;
}

.feature_item_01_example {
  margin-top: calc(73 * var(--px));
  margin-bottom: calc(40 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: calc(607 * var(--px));
  /* height: calc(308 * var(--px)); */
}

@media (min-width: 923px) {
  .feature_item_01_example {
    margin-bottom: calc(82 * var(--px));
    width: calc(952 * var(--px));
    /* height: calc(294 * var(--px)); */
  }
}

.feature_item_01_grid_container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
}

@media (min-width: 768px) {
  .feature_item_01_grid_container {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 40px);
  }
}

@media screen and (min-width: 1041px) {
  .feature_item_01_grid_container {
    grid-template-columns: auto auto;
    width: 960px;
    justify-content: center;
  }
}

.feature_item_01_main_everymonths {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

@media (min-width: 768px) {
  .feature_item_01_main_everymonths {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    margin-bottom: 51px;
    width: calc(462 * var(--px));
    font-size: calc(30 * var(--px));
    line-height: calc(40 * var(--px));
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .feature_item_01_main_everymonths .highlight-text::after {
    top: 0.2em;
    bottom: 0.2em;
  }
}

.feature_item_01_image {
  display: block;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: calc(83 * var(--px));
  margin-right: auto;
  margin-bottom: calc(41 * var(--px));
  margin-left: auto;
  width: calc(516 * var(--px));
  /* height: calc(780 * var(--px)); */
}

@media (min-width: 768px) {
  .feature_item_01_image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin-top: 0;
    padding-right: calc(20 * var(--px));
    margin-bottom: 0;
    width: calc(371 * var(--px));
    /* height: calc(484 * var(--px)); */
    object-fit: contain;
  }
}

@media screen and (min-width: 1041px) {
  .feature_item_01_image {
    padding-right: calc(51 * var(--px));
  }
}

/* @media (min-width: 1041px) {
  .feature_item_01_image {
    width: calc(431 * var(--px));
    height: calc(637 * var(--px));
  }
} */

.feature_item_01_note {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

@media (min-width: 768px) {
  .feature_item_01_note {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: calc(462 * var(--px));
  }
}

.feature_item_01_note_title {
  margin-bottom: calc(30 * var(--px));
  font-size: calc(24 * var(--px));
  font-family: "Noto Sans JP";
  color: #231815;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
}

@media (min-width: 768px) {
  .feature_item_01_note_title {
    margin-bottom: calc(17 * var(--px));
    font-size: calc(18 * var(--px));
    text-align: left;
  }
}

.feature_item_01_note_text {
  margin-right: auto;
  margin-left: auto;
  font-size: calc(20 * var(--px));
  font-family: "Noto Sans JP";
  color: #231815;
  line-height: 1.7;
  text-align: left;
  width: calc(100% - 40px);
}

@media (min-width: 768px) {
  .feature_item_01_note_text {
    width: 100%;
    font-size: calc(14 * var(--px));
  }
}

.feature_item_02 {
  padding-top: calc(61 * var(--px));
  padding-bottom: calc(60 * var(--px));
}

@media (min-width: 768px) {
  .feature_item_02 {
    margin-right: 20px;
    padding-top: calc(58 * var(--px));
    padding-right: calc(45 * var(--px));
    padding-left: calc(45 * var(--px));
    width: calc((100% - 20px) / 2);
  }
}

.feature_item_02_main {
  margin-bottom: calc(58 * var(--px));
}

@media (min-width: 768px) {
  .feature_item_02_main {
    margin-bottom: calc(61 * var(--px));
    width: 100%;
    font-size: 32px;
    line-height: calc(40 * var(--px));
    height: 3em;
  }
}

@media screen and (min-width: 961px) {
  .feature_item_02_main {
    height: 2em;
  }
}

@media screen and (min-width: 1241px) {
  .feature_item_02_main {
    height: auto;
  }
}

.feature_item_02_free {
  display: block;
  margin-top: calc(29 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: calc(366 * var(--px));
  /* height: calc(228 * var(--px)); */
}

@media (min-width: 768px) {
  .feature_item_02_free {
    margin-top: calc(64 * var(--px));
    width: calc(220 * var(--px));
  }
}

@media (min-width: 1241px) {
  .feature_item_02_free {
    width: calc(356 * var(--px));
    /* height: calc(222 * var(--px)); */
  }
}

.feature_item_03 {
  padding-top: calc(61 * var(--px));
  padding-bottom: calc(60 * var(--px));
}

@media (min-width: 768px) {
  .feature_item_03 {
    padding-top: calc(58 * var(--px));
    padding-right: calc(45 * var(--px));
    padding-left: calc(45 * var(--px));
    width: calc((100% - 20px) / 2);
  }
}

.feature_item_03_main {
  margin-bottom: calc(81 * var(--px));
}

@media (min-width: 768px) {
  .feature_item_03_main {
    margin-bottom: calc(61 * var(--px));
    width: 100%;
    height: 3em;
    font-size: 32px;
    line-height: calc(40 * var(--px));
  }
}

@media screen and (min-width: 961px) {
  .feature_item_03_main {
    height: 2em;
  }
}

@media screen and (min-width: 1241px) {
  .feature_item_03_main {
    height: auto;
    line-height: 1;
  }
}


.feature_item_03_touch {
  display: block;
  margin-top: calc(35 * var(--px));
  margin-right: auto;
  margin-bottom: calc(42 * var(--px));
  margin-left: auto;
  width: calc(439 * var(--px));
  /* height: calc(262 * var(--px)); */
  object-fit: contain;
  object-fit: contain;
}

@media (min-width: 768px) {
  .feature_item_03_touch {
    margin-top: calc(64 * var(--px));
    width: calc(230 * var(--px));
    /* height: calc(219 * var(--px)); */
  }
}

@media (min-width: 1241px) {
  .feature_item_03_touch {
    width: calc(367 * var(--px));
    /* height: calc(219 * var(--px)); */
  }
}

.feature_item_03_note {
  margin-top: calc(20 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 40px);
  font-size: calc(20 * var(--px));
  font-family: "Noto Sans JP";
  color: #231815;
  line-height: 1.7;
  text-align: left;
}

@media (min-width: 1241px) {
  .feature_item_03_note {
    font-size: 14px;
  }
}

.feature_detail_btn {
  margin-top: calc(60 * var(--px));
  margin-bottom: calc(80 * var(--px));
}

@media (min-width: 570px) {
  .feature_detail_btn {
    margin-bottom: calc(40 * var(--px));
    max-width: 530px;
    font-size: min(34px, calc(40 * var(--px)));
  }
}

/* ------------------------------------------- */
/* safe */
/* ------------------------------------------- */

#safe {
  padding-top: calc(98 * var(--px));
  padding-bottom: calc(100 * var(--px));
}

@media (min-width: 691px) {
  #safe .w1300 {
    padding-right: calc((var(--100vw) - 40px - 650px) / 2);
    padding-left: calc((var(--100vw) - 40px - 650px) / 2);
  }
}

@media (min-width: 768px) {
  #safe .w1300 {
    padding-right: 0;
    padding-left: 0;
  }
}

.safe_title {
  display: block;
  margin-right: auto;
  margin-bottom: calc(48 * var(--px));
  margin-left: auto;
  width: calc(580 * var(--px));
  /* height: calc(75 * var(--px)); */
}

@media (min-width: 768px) {
  .safe_title {
    width: calc(486 * var(--px));
    /* height: calc(63 * var(--px)); */
  }
}

@media (min-width: 768px) {
  .safe_item_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  .safe_item {
    width: calc((100% - 20px * 2) / 3);
  }
}

.safe_item:not(:first-child) {
  margin-top: calc(60 * var(--px));
}

@media (min-width: 768px) {
  .safe_item:not(:first-child) {
    margin-top: 0;
    margin-left: calc(15 * var(--px));
  }
}

.safe_item_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(134 * var(--px));
  font-size: calc(40 * var(--px));
  font-family: "Noto Sans JP";
  color: #fff;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background-color: #005782;
}

@media (min-width: 768px) {
  .safe_item_title {
    padding-right: 10px;
    padding-left: 10px;
    height: calc(87 * var(--px));
    font-size: calc(28 * var(--px));
  }
}

.safe_item_title::before {
  content: "";
  display: block;
  margin-right: calc(21 * var(--px));
  width: calc(54 * var(--px));
  height: calc(54 * var(--px));
  background-image: url(../img/safe_icon_check.png);
  background-size: contain;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .safe_item_title::before {
    margin-right: calc(9 * var(--px));
    width: calc(40 * var(--px));
    height: calc(40 * var(--px));
  }
}

.safe_item_text {
  padding-top: calc(40 * var(--px));
  padding-right: calc(34 * var(--px));
  padding-bottom: calc(40 * var(--px));
  padding-left: calc(34 * var(--px));
  font-size: calc(30 * var(--px));
  font-family: "Noto Sans JP";
  font-weight: 500;
  color: #231815;
  line-height: 1.4;
  text-align: center;
  border-right: solid calc(4 * var(--px)) #005782;
  border-bottom: solid calc(4 * var(--px)) #005782;
  border-left: solid calc(4 * var(--px)) #005782;
}

@media (min-width: 768px) {
  .safe_item_text {
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    height: calc(100% - 87px);
    font-size: 20px;
    text-align: left;
    border-right: solid calc(2 * var(--px)) #005782;
    border-bottom: solid calc(2 * var(--px)) #005782;
    border-left: solid calc(2 * var(--px)) #005782;
  }
}

.safe_apply_btn {
  margin-top: calc(55 * var(--px));
}

/* ------------------------------------------- */
/* flow */
/* ------------------------------------------- */

#flow {
  padding-top: calc(99 * var(--px));
  padding-bottom: calc(100 * var(--px));
  background-color: #e6edee;
}

.flow_title {
  display: block;
  margin-right: auto;
  margin-bottom: calc(43 * var(--px));
  margin-left: auto;
  width: calc(464 * var(--px));
  /* height: calc(148 * var(--px)); */
}

@media (min-width: 768px) {
  .flow_title {
    width: calc(417 * var(--px));
    /* height: calc(133 * var(--px)); */
  }
}

.flow_box {
  padding-top: calc(66 * var(--px));
  padding-right: calc(30 * var(--px));
  padding-bottom: calc(66 * var(--px));
  padding-left: calc(30 * var(--px));
  background-color: #fff;
  border-radius: calc(15 * var(--px));
}

@media (min-width: 691px) {
  .flow_box {
    padding-right: calc((var(--100vw) - 40px - 650px) / 2);
    padding-left: calc((var(--100vw) - 40px - 650px) / 2);
  }
}

@media (min-width: 768px) {
  .flow_box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (min-width: 1041px) {
  .flow_box {
    padding-right: 0;
    padding-left: 0;
  }
}

.flow_step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .flow_step {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 260px;
  }
}

.flow_step:not(:first-child) {
  margin-top: calc(62 * var(--px));
}

@media (min-width: 768px) {
  .flow_step:not(:first-child) {
    margin-top: 0;
    margin-left: calc(20 * var(--px));
  }
}

@media (min-width: 1041px) {
  .flow_step:not(:first-child) {
    margin-left: calc(95 * var(--px));
  }
}

.flow_step_img {
  width: calc(135 * var(--px));
}

@media (min-width: 768px) {
  .flow_step_img {
    margin-bottom: 17px;
    width: 101px;
    height: 148px;
    object-fit: contain;
    object-position: top center;
  }
}

.flow_step_text_area {
  width: calc(445 * var(--px));
}

@media (min-width: 768px) {
  .flow_step_text_area {
    width: 100%;
  }
}

.flow_step_title {
  margin-bottom: calc(29 * var(--px));
  padding-bottom: calc(26 * var(--px));
  font-size: calc(40 * var(--px));
  font-family: "Noto Sans JP";
  color: #765f57;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;
  border-bottom: solid calc(4 * var(--px)) #765f57;
}

@media (min-width: 768px) {
  .flow_step_title {
    display: flex;justify-content: center;align-items: center;
    margin-bottom: 20px;
    padding-bottom: 17px;
    height: calc(2em * 1.25 + 17px);
    font-size: 22px;
    text-align: center;
  }
}

@media screen and (min-width: 1041px) {
  .flow_step_title {
    font-size: 28px;
  }
}

.flow_step_text {
  font-size: calc(30 * var(--px));
  font-weight: 500;
  font-family: "Noto Sans JP";
  color: #231815;
  line-height: 1.4;
  text-align: left;
}

@media (min-width: 768px) {
  .flow_step_text {
    font-size: 20px;
  }
}

.flow_apply_btn {
  margin-top: calc(80 * var(--px));
}

/* ------------------------------------------- */
/* card */
/* ------------------------------------------- */

#card {
  padding-top: calc(100 * var(--px));
  padding-bottom: calc(100 * var(--px));
  background-color: #d7d7d7;
}

@media screen and (min-width: 768px) {
  #card .w650 {
    width: calc(100% - 40px);
  }
}

@media screen and (min-width: 1000px) {
  #card .w650 {
    width: 960px;
  }
}

.card_title {
  display: block;
  margin-right: auto;
  margin-bottom: calc(60 * var(--px));
  margin-left: auto;
  width: calc(278 * var(--px));
  /* height: calc(59 * var(--px)); */
}

@media (min-width: 768px) {
  .card_title {
    width: calc(222 * var(--px));
    /* height: calc(48 * var(--px)); */
  }
}

.card_table_tr:not(:first-child) {
  border-top: solid 2px #d7d7d7;
}

@media screen and (min-width: 1000px) {
  .card_table {
    width: 100%;
  }
}

.card_table_th {
  padding-top: calc(25 * var(--px));
  padding-right: calc(23 * var(--px));
  padding-bottom: calc(25 * var(--px));
  padding-left: calc(23 * var(--px));
  font-size: calc(28 * var(--px));
  font-family: "Noto Sans JP";
  font-weight: 500;
  color: #64504a;
  line-height: 1.429;
  text-align: center;
  white-space: nowrap;
  background-color: #fff;
  border-right: solid 2px #d7d7d7;
}

.card_table_td {
  padding-top: calc(25 * var(--px));
  padding-right: calc(23 * var(--px));
  padding-bottom: calc(25 * var(--px));
  padding-left: calc(23 * var(--px));
  font-size: calc(28 * var(--px));
  font-family: "Noto Sans JP";
  font-weight: 500;
  color: #64504a;
  text-align: center;
  background-color: #fff;
}

.card_text_small {
  display: block;
  margin-top: calc(18 * var(--px));
  font-size: calc(20 * var(--px));
  line-height: calc(24 * var(--px));
}

#card_design {
  margin-top: calc(32 * var(--px));
  padding: calc(38 * var(--px)) calc(43 * var(--px)) calc(48 * var(--px));
  background-color: #fff;
}

#card_design > .title {
  margin-bottom: calc(55 * var(--px));
/*  margin-bottom: calc(18 * var(--px));*/
  font-size: calc(28 * var(--px));
  font-family: "Noto Sans JP";
  color: #64504a;
  line-height: 1.429;
  text-align: center;
}

#card_design > .text {
  margin-bottom: calc(55 * var(--px));
  font-size: calc(18 * var(--px));
  font-family: "Noto Sans JP";
  color: #64504a;
  line-height: 1.3;
  text-align: center;
}

/*#card_design .splide__slide .default:hover {
  cursor: pointer;
}*/

#card_design .splide__slide .default img {
  margin-bottom: calc(20 * var(--px));
  width: calc(389 * var(--px));
  height: calc(244 * var(--px));
}

#card_design .splide__slide:not(.is-active) .default {
  pointer-events: none;
}


#card_design .splide__slide .default_caption {
  font-size: calc(20 * var(--px));
  font-family: "Noto Sans JP";
  color: #64504a;
  line-height: 1.3;
  text-align: center;
}

#card_design .splide__slide:not(.is-active) .default_caption {
  display: none;
}

#card_design .modal-wrapper .modal {
  display: none;
  position: relative;
}

#card_design .modal-wrapper .modal.active {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
}

@media screen and (min-width: 768px) {
  #card_design .modal-wrapper .modal.active {
    margin: auto;
  }
}

#card_design .modal-wrapper .modal .close:not(.close-btn) {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
}

@media screen and (min-width: 768px) {
  #card_design .modal-wrapper .modal .close:not(.close-btn) {
    background-color: transparent;
  }
}

#card_design .modal-wrapper .modal .modal-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

@media screen and (min-width: 768px) {
  #card_design .modal-wrapper .modal .modal-inner {
    padding: calc(160 * var(--px)) 0 calc(80 * var(--px));
    width: calc(790 * var(--px));
    background-color: rgba(0,0,0,0.8);
  }
}

#card_design .modal-wrapper .modal .modal_arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: calc(156 * var(--px));
  transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
  #card_design .modal-wrapper .modal .modal_arrows {
    width: calc(100% - 40px);
  }
}

/* @media screen and (max-width: 767px) {
	#card_design .modal-wrapper .modal .modal_arrows {
    top: calc(30px + calc(var(--100vw) - 40px) / 730 * 500 + 20px);
    height: 20px;
  }
} */

#card_design .modal-wrapper .modal .modal_arrow {
  width: calc(47 * var(--px));
}

/* @media screen and (max-width: 767px) {
	#card_design .modal-wrapper .modal .modal_arrow {
    width: 20px;
  }
} */

#card_design .modal-wrapper .modal .modal_arrow:hover {
  cursor: pointer;
}

#card_design .modal-wrapper .modal .modal_arrow:disabled {
  visibility: hidden;
}

#card_design .modal-wrapper .modal .modal_arrow.prev {
  padding-left: 10px;
}

#card_design .modal-wrapper .modal .modal_arrow.next {
  padding-right: 10px;
}

#card_design .modal-wrapper .modal .modal_arrow img {
  width: 100%;
  height: 100%;
}

#card_design .modal-wrapper .modal .modal_arrow.prev img {
  transform: scaleX(-1);
}

#card_design .modal-card-area {
  position: relative;
}

#card_design .modal-card-area img {
  margin-bottom: calc(31 * var(--px));
  width: calc(520 * var(--px));
  height: calc(328 * var(--px));
}

#card_design .modal-card-area .modal_caption {
  font-size: calc(28 * var(--px));
  font-family: "Noto Sans JP";
  color: #ffffff;
  line-height: 1.143;
  text-align: center;
}

#card_design .modal-wrapper .modal .close-btn {
  content: '';
  display: block;
  position: absolute;
  top: calc(-70 * var(--px));
  right: calc(-70 * var(--px));
  left: auto;
  width: calc(41 * var(--px));
  height: calc(42 * var(--px));
  background-image: url(../img/icon_close.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#card_design .modal-wrapper .modal .close-btn:hover {
  cursor: pointer;
}

/* ------------------------------------------- */
/* bottom_visual */
/* ------------------------------------------- */

#bottom_visual {
  position: relative;
}

@media (min-width: 768px) {
  #bottom_visual {
    --px: calc(var(--100vw) / 1920);
  }
}

@media screen and (min-width: 768px) {
  #bottom_visual .mainvisual_classic {
    right: calc(99 * var(--px));
  }
}

@media screen and (min-width: 768px) {
  #bottom_visual .mainvisual_card_neon_blue, #bottom_visual .mainvisual_card_neon_pink, #bottom_visual .mainvisual_card_neon_yellow, #bottom_visual .mainvisual_card_classic_yellow, #bottom_visual .mainvisual_card_classic_blue, #bottom_visual .mainvisual_card_classic_pink {
    width: calc(695 * var(--px));
  }
}

.bottom_visual_apply_btn {
  position: relative;
  z-index: 1;
  margin-top: calc(60 * var(--px));
}

@media (min-width: 768px) {
  .bottom_visual_apply_btn {
    position: absolute;
    right: 0;
    bottom: calc(235 * var(--px));
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: calc(416 * var(--px));
    height: calc(87 * var(--px));
  }
}

/* ------------------------------------------- */
/* footer */
/* ------------------------------------------- */

footer{
  padding-top: calc(69 * var(--px));
  margin-top: calc(69 * var(--px));
	background-color: #fff;
  border-top: solid 1px #d7d7d7;
	font-weight: normal;
}

@media screen and (min-width: 768px) {
  footer {
    padding-top: calc(22 * var(--px));
  }
}

footer a,
footer a:link,
footer a:visited{
	color: #777;
	text-decoration: none;
	transition: all .3s ease;
}
footer a:hover,
footer a:active,
footer a:focus{
	color: #bf0000;
	text-decoration: underline;
	transition: all .3s ease;
}

footer nav{

}
footer nav ul{
	width: min(100%,800px);
	margin: 0 auto clamp(16px, 9.376px + 1.77vw, 32px);
	text-align: center;
}
footer nav ul li{
	font-size: clamp(12px, 11.168px + 0.22vw, 14px);
  line-height: 1.5;
}
@media all and (min-width: 768px){
	footer nav ul{
	    display: flex;
	    justify-content: center;
	}
	footer nav ul li{
		position: relative;
		padding: 0 clamp(12px, 11.168px + 0.22vw, 14px);
	}

	footer nav ul li::after{
		content: "";
		display: inline-block;
		height: 10px;
		width: 1px;
		background-color: #ccc;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto 0;
	}
	footer nav ul li:last-child::after{
		display: none;
	}
}
footer .footer-area{
    margin: 0 auto;
    padding: 0 25px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
}
footer .footer-area P{
	/* 10-12px	*/
	font-size: clamp(10px, 9.168px + 0.22vw, 12px);
	display: inline-block;
	max-width: 430px;
  line-height: 1.5;
}
footer .footer-privacy-mark{
  flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    width: 78px;
}
@media screen and (min-width: 768px) {
  footer .footer-privacy-mark {
    margin-left: 20px;
    padding-right: 10px;
    padding-left: 10px;
    width: 110px;
  }
}

footer .footer-privacy-mark img{
	width: 100%;
	height: auto;
}
footer #copyright{
	text-align: center;
	font-size: 10px;
	padding: 25px;
}

.cp_bnr {
	margin-top: calc(40 * var(--px));
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 40px);
}

@media screen and (min-width: 768px) {
  .cp_bnr {
    width: 100%;
    text-align: center;
  }
}