@charset "utf-8";

/* ==========================================
 Common
============================================*/
:root {
  --min_w1: 375;
  --max_w1: 750;
  --color-red: #bf0c0c;
  --color-orange: #ff8941;
  --font-serif: "Noto Serif JP", serif;
}

.text-red {
  color: var(--color-red);
}

.text-orange {
  color: var(--color-orange);
}

/* contents */
.contents {
  color: #1b1b1b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--sz-30);
  font-weight: 500;
  line-break: strict;
}

.contents h1,
.contents h2,
.contents h3,
.contents h4,
.contents h5,
.contents h6 {
  font-family: inherit;
  color: inherit;
}

.contents .img-wrap {
  position: relative;
}

.contents img {
  max-width: 100%;
  height: auto;
  display: block;
}

.contents p {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ratio */
.ratio {
  position: relative;
  width: 100%;
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}

/* ==========================================
 Layout
============================================*/
.container {
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

.inner {
  --bs-gutter-x: var(--sz-30);
  padding-left: var(--bs-gutter-x);
  padding-right: var(--bs-gutter-x);
}

/* ==========================================
 Layer
============================================*/

.layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.layer--1 {
  width: 91.6%;
  top:  18%;
}

.layer--2 {
  width: 89%;
  top: 20%;
}

.layer--3 {
  top: 70%;
  width: 90%;
}

.layer--4 {
  width: 100%;
  top: 28%;
}

.layer--5 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  line-height: 1.8;
}

.layer--6 {
  top: 25%;
  line-height: 2;
  text-align: center;
  width: 90%;
}

.layer--7 {
  top: 23%;
  width: 90%;
}

.layer--8 {
  top: var(--sz-250);
  width: 89%;
}

/* ==========================================
 FV
============================================*/

/* ==========================================
 CTA
============================================*/

.cta1 .btn {
  display: block;
  border-radius: var(--sz-30);
}

.cta1 .btn + .btn {
  margin-top: var(--sz-30);
}

.cta2 .btn {
  display: block;
  border-radius: var(--sz-30);
}

.cta2 .btn + .btn {
  margin-top: var(--sz-30);
}
.layer--7 {
    top: 32%;
    width: 90%;
}
a.btn_magt {
    margin-top: 74px !important;
}

@media screen and (max-width:600px) {
	a.btn_magt {
    	margin-top: 38px !important;
	}
 }
/* ==========================================
 Worry
============================================*/
.worry {
  background-color: #9fb0c0;
  padding-bottom: var(--sz-50);
}

.worry .inner {
  padding-top: var(--sz-50);
}

.worry .img1 {
  width: var(--sz-369);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -20%);
}

.worry .img2 {
  margin: var(--sz-30) auto;
}

.worry .img3 {
  margin: var(--sz-25) auto;
  width: var(--sz-8);
}

.worry .img4 {
  width: 89%;
  margin: 0 auto;
}

.worry .p1 {
  text-align: center;
  margin-bottom: var(--sz-70);
}

.worry .p2 {
  color: var(--color-red);
  font-family: var(--font-serif);
  font-weight: bold;
  line-height: 1;
  margin-bottom: var(--sz-60);
}

.worry .p3 {
  text-align: center;
  color: #fff;
  font-family: var(--font-serif);
  margin-bottom: var(--sz-10);
}

.worry .p4 {
  text-align: center;
  color: #fff;
}

.worry .p5 {
  text-align: center;
}

.worry .worry__box {
  background-color: #fff;
  position: relative;
  border-radius: var(--sz-15);
  margin-bottom: var(--sz-60);
  padding: var(--sz-140) var(--sz-20) var(--sz-60);
  text-align: center;
}

/* ==========================================
 High Volt
============================================*/
.high-volt {
  background-color: #cacbd0;
}

.high-volt .p1 {
  text-align: center;
}

.high-volt .p2 {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: bold;
}

.high-volt .p3 {
  text-align: center;
  color: #333333;
}

.high-volt .p4 {
  text-align: center;
  margin-bottom: var(--sz-60);
}

.high-volt .p5 {
  font-family: var(--font-serif);
  text-align: center;
  margin-bottom: var(--sz-10);
}

.high-volt .p6 {
  text-align: center;
}

.high-volt .p7 {
  font-family: var(--font-serif);
  text-align: center;
  line-height: 1.3;
  margin-bottom: var(--sz-50);
}

.high-volt .p8 {
  text-align: center;
  margin-bottom: 2em;
}

.high-volt .p9 {
  text-align: center;
  margin-bottom: var(--sz-50);
}

.high-volt .p10 {
  color: #fff;
  text-align: center;
  font-weight: normal;
  line-height: 1.8;
}

.high-volt .p11 {
  background-color: #fff;
  text-align: center;
  padding: var(--sz-40) var(--sz-30) var(--sz-50);
  line-height: 1.8;
}

/* ==========================================
 Reason
============================================*/
.reason {
  background-color: #f2f7fa;
}

.reason .inner {
  --bs-gutter-x: var(--sz-45);
  padding-top: var(--sz-40);
  padding-bottom: var(--sz-80);
}

.reason .img1 {
  transform: translateX(calc(-1 * var(--sz-45)));
}

.reason .reason__item p {
  margin-bottom: 1.5em;
  line-height: 1.8;
}

.reason .reason__item p:last-child {
  margin-bottom: 0;
}

.reason .reason__item .p1 {
  margin-top: 1.5em;
}

.reason .reason__item-title {
  color: #202e7b;
  font-family: var(--font-serif);
  font-weight: 600;
  margin-bottom: var(--sz-40);
}

/* ==========================================
 Voice
============================================*/
.voice .inner {
  --bs-gutter-x: var(--sz-40);
}

.voice .voice__list {
  margin-bottom: var(--sz-90);
}

.voice .voice__item {
  border: var(--sz-5) solid #84b9e9;
  box-shadow: 0 var(--sz-9) var(--sz-16) rgb(134 134 134 / 20%);
  padding: var(--sz-40);
  margin-bottom: var(--sz-30);
}

.voice .voice__item:last-child {
  margin-bottom: 0;
}

.voice .voice__head {
  display: grid;
  grid-template-areas:
    "pic title"
    "pic name";
  gap: var(--sz-20) var(--sz-30);
  grid-template-columns: var(--sz-159) 1fr;
  align-items: flex-start;
  margin-bottom: var(--sz-50);
}

.voice .voice__pic {
  grid-area: pic;
}

.voice .voice__title {
  grid-area: title;
  font-size: var(--sz-32);
  font-weight: bold;
  color: #5d64ab;
  line-height: 1.4;
}

.voice .voice__name {
  font-size: var(--sz-24);
  color: #fff;
  background-color: #5d64ab;
  border-radius: 100vh;
  padding: 0.1em 1em;
}

.voice .voice_desc {
  font-size: var(--sz-26);
  color: #000;
}

/* ==========================================
 Media
============================================*/
.media {
  margin-bottom: var(--sz-80);
}

.media .inner {
  --bs-gutter-x: var(--sz-45);
}

/* ==========================================
 Effect
============================================*/
.effect {
  padding-bottom: var(--sz-100);
}

.effect .inner {
  --bs-gutter-x: var(--sz-35);
}

.effect .effect__list {
  margin-top: calc(-1 * var(--sz-150));
  position: relative;
  --gap: var(--sz-30);
}

.effect .effect__list::after {
  content: "";
  clear: both;
  display: block;
}

.effect .effect__item {
  width: calc((100% - var(--gap)) / 2);
  margin-bottom: var(--gap);
  float: left;
}

.effect .effect__item:last-child {
  margin-bottom: 0;
}

.effect .effect__item:first-child {
  width: 100%;
}

.effect .effect__item:nth-child(even) {
  margin-right: var(--gap);
}

.effect .effect__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ==========================================
 Comment
============================================*/

/* ==========================================
 Price
============================================*/

/* ==========================================
 Message
============================================*/
.message {
  background-color: #e5f8fc;
}

.message .message__heading {
  padding-top: var(--sz-50);
  padding-bottom: var(--sz-20);
  color: #5d64ab;
  font-family: var(--font-serif);
  font-size: var(--sz-44);
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
}

.message .message__heading span {
  font-size: 90%;
}