@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Outfit:wght@600;700&display=swap');

/* --------------------------
:: カスタムプロパティ
-------------------------- */
:root {
  /*----color-----*/
  --pure-white: #fff;
  --text-color: #1f1f1f;
  --color-shadow: #00000029;
  --color-blue: #3d5ccc;
  --color-orange: #ff7600;
  --color-gold: #7a6b20;
  --color-cta-hover: #ff4d00;
  --color-input-hover: #1b379d;
  --color-contact-btn-hover: #176B7A;
  --color-contact-error: #E31F5A;
  --color-contact-border: #ccc;
  --color-previous-btn: #4d4d4d;
  --color-placeholder: #bbb;
  --color-banner-background: rgba(31, 31, 31, 0.72);
  --background-cover-white: rgba(255, 255, 255, 0.56);
  --background-cover-black: rgba(0, 0, 0, 0.45);
  --table-gray-bg: #F7F7F7;
  --table-border: #d1d1d1;

  /*----grd----*/
  --primary-grd: linear-gradient(90deg, #17474f 0%, #2F9CAE 100%) 0% 0% no-repeat padding-box;
  --gold-grd: radial-gradient(circle at center, var(--color-gold) 20%, transparent 25%) top left 0% / 1em 0.3em repeat-x;
  --background-grd: linear-gradient(90deg, #E0E4ED 0%, #FFFFFF 37%, #E0E4ED 100%) 0% 0% no-repeat padding-box;

  /*----line-height-----*/
  --line-height-1: 1;
  --line-height-1-2: 1.2;
  --line-height-1-3: 1.3;
  --line-height-1-4: 1.4;
  --line-height-1-5: 1.5;
  --line-height-1-6: 1.6;
  --line-height-1-7: 1.7;
  --line-height-1-8: 1.8;
  --line-height-1-9: 1.9;
  --line-height-2: 2;
  --line-height-4-5: 4.5;

  /*----letter-spacing-----*/
  --letter-spacing-0: 0px;

  /*----font-weight-----*/
  --font-weight-bold: 700;
  --font-weight-normal: 400;

  /*----img-----*/
  --img-top_main_bg: url(../../img/remolabo-lp/top_main_bg.jpg);
  --img-top_main_bg_01: url(../../img/remolabo-lp/top_main_bg_01.jpg);
  --img-top_main_bg_02: url(../../img/remolabo-lp/top_main_bg_02.jpg);
  --img-top_main_bg_03: url(../../img/remolabo-lp/top_main_bg_03.jpg);
  --img-top_main_bg_04: url(../../img/remolabo-lp/top_main_bg_04.jpg);
  --img-top_main_bg_05: url(../../img/remolabo-lp/top_main_bg_05.jpg);
  --img-top_main_point: url(../../img/remolabo-lp/icon_check.jpg);
  --img-top_point_img01: url(../../img/remolabo-lp/top_point_img01.jpg);
  --img-top_point_img02: url(../../img/remolabo-lp/top_point_img02.jpg);
  --img-top_point_img03: url(../../img/remolabo-lp/top_point_img03.jpg);
  --img-top_exam_img01: url(../../img/remolabo-lp/top_exam_img01.jpg);
  --img-top_exam_img02: url(../../img/remolabo-lp/top_exam_img02.jpg);
  --img-top_picslide_img01: url(../../img/remolabo-lp/top_picslide_img01.jpg);
  --img-top_picslide_img02: url(../../img/remolabo-lp/top_picslide_img02.jpg);
  --img-top_picslide_img03: url(../../img/remolabo-lp/top_picslide_img03.jpg);
  --img-top_picslide_img04: url(../../img/remolabo-lp/top_picslide_img04.jpg);
  --img-top_summary_bg: url(../../img/remolabo-lp/top_summary_bg.jpg);
  --img-top_summary_bg_01: url(../../img/remolabo-lp/top_summary_bg_01.jpg);
  --img-top_summary_bg_02: url(../../img/remolabo-lp/top_summary_bg_02.jpg);
  --img-top_summary_bg_03: url(../../img/remolabo-lp/top_summary_bg_03.jpg);
  --img-top_summary_bg_04: url(../../img/remolabo-lp/top_summary_bg_04.jpg);
  --img-top_summary_bg_05: url(../../img/remolabo-lp/top_summary_bg_05.jpg);
}

* {
  --opacity: 1;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'Noto Sans', 'Noto Sans JP', sans-serif !important;
  box-sizing: border-box;
}

.for-pc {
  display: block;
}

.for-sp {
  display: none;
}

.t-gold {
  color: var(--color-gold);
}

.t-blue {
  color: var(--color-blue);
}

.f-weight-normal {
  font-weight: normal;
}

/*---------------------------------------- sp */
@media (max-width: 768px) {
  .for-pc {
    display: none;
  }

  .for-sp {
    display: block;
  }
}

/*---------------------------------------- sp */

/* レイアウト */
.font,
.bg,
.footer,
.remolabo-lp,
.contact {
  font-family: 'Roboto', 'Noto Sans', 'Noto Sans JP', sans-serif;
}

.container {
  width: calc(100% - 160px);
  margin: 0 auto;
  display: block;
  max-width: 1540px;
  text-align: center;
}

.container_s {
  display: block;
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: auto;
}

strong {
  position: relative;
}

strong::before {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--gold-grd);
  border-radius: 5px;
}

span.lb {
  display: inline-block;
}

.layout-flex {
  display: flex;
}

.lift-up-4 {
  margin-top: -4px !important;
}

.lift-up-8 {
  margin-top: -8px !important;
}

.lift-up-12 {
  margin-top: -12px !important;
}

p {
  font-size: 14px;
  line-height: var(--line-height-2);
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .container {
    width: calc(100% - 64px);
  }
}

@media (max-width: 768px) {
  .container {
    width: calc(100% - 32px);
  }

  .lift-up-4-sp {
    margin-top: -4px !important;
  }

  .lift-up-8-sp {
    margin-top: -8px !important;
  }

  .lift-up-12-sp {
    margin-top: -12px !important;
  }

  .lift-up-16-sp {
    margin-top: -16px !important;
  }

  p {
    font-size: 12px;
  }
}

/* --------------------------
  ctaボタン
-------------------------- */
.cta-tmp {
  width: 312px;
}

.cta-text {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1);
  margin-bottom: 8px;
}

.cta-text::before,
.cta-text::after {
  width: 1px;
  height: 15px;
  content: "";
  background-color: #1f1f1f;
}

.cta-text::before {
  margin-right: 0.8em;
  transform: rotate(-20deg);
}

.cta-text::after {
  margin-left: 0.8em;
  transform: rotate(20deg);
}

.cta-btn {
  display: block;
  width: 100%;
  height: 58px;
  line-height: 58px;
  letter-spacing: var(--letter-spacing-0);
  text-align: center;
  font-size: 18px;
  color: var(--pure-white);
  font-weight: var(--font-weight-bold);
  background: var(--color-orange);
  border-radius: 4px;
  text-decoration: none;
}

.cta-btn:hover {
  background: var(--color-cta-hover);
}

@media (max-width: 768px) {
  .cta-tmp {
    width: 100%;
  }

  .cta-btn {
    font-size: 14px;
    height: 56px;
    width: 100%;
    line-height: 56px;
  }
}

/* ctaホップアップバナー */
.cta-banner {
  position: fixed;
  bottom: 0;
  padding: 16px 0px 0px 0px;
  width: 100%;
  background: var(--color-banner-background);
  opacity: 0;
  transform: translateY(123px);
  height: 123px;
  display: none;
}

.cta-banner .cta-tmp {
  display: block;
  margin: 0 auto;
  color: var(--pure-white);
}

.cta-banner .cta-tmp .cta-text::before,
.cta-banner .cta-tmp .cta-text::after {
  background-color: var(--pure-white);
}

/* 上に上がる動き */
.cta-banner.UpMove {
  width: 100%;
  animation: UpAnime 0.3s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(123px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* 下に下がる動き */
.cta-banner.DownMove {
  width: 100%;
  animation: DownAnime 0.3s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0px);
  }

  to {
    opacity: 0;
    transform: translateY(123px);
  }
}

.cta-banner.show {
  display: block;
}

@media (max-width: 768px) {
  .cta-banner {
    padding: 16px;
  }

  .cta-banner.UpMove {
    width: -webkit-fill-available;
  }
}

/* --------------------------
  TopPage
-------------------------- */
/* articleタグ */
article.remolabo-lp {
  background: var(--background-grd);
}

/* common */
article.remolabo-lp .title {
  font-family: 'Roboto', 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: var(--font-weight-bold);
}

/* main */
.remolabo-lp .main {
  height: 550px;
  padding: 120px 10vw 0;
}

.remolabo-lp .main .t-normal-small {
  font-size: 21px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1-6);
  margin-bottom: 0px;
}

.remolabo-lp .main h1 {
  font-size: 49px;
  margin-top: 0px;
  margin-bottom: 24px;
}

.remolabo-lp .main .description {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  margin-top: 0px;
  margin-bottom: 56px;
}

/* main-lpba */
.remolabo-lp .main.lpba {
  background: var(--img-top_main_bg) center / cover no-repeat;
  background-position: right 50% bottom 83%;
  background-size: 130%;
}

/* main-lpbb */
.remolabo-lp .main.lpbb {
  background: var(--img-top_main_bg_01) center / cover no-repeat;
  background-position: right 50% bottom 83%;
  background-size: 130%;
}

/* main-lpbc */
.remolabo-lp .main.lpbc {
  background: var(--img-top_main_bg_02) center / cover no-repeat;
  background-position: right 50% bottom 83%;
  background-size: 120%;
}

/* main-lpbd */
.remolabo-lp .main.lpbd {
  background: var(--img-top_main_bg_03) center / cover no-repeat;
  background-position: right 50% bottom 83%;
  background-size: 130%;
}

/* main-lpbe */
.remolabo-lp .main.lpbe {
  background: var(--img-top_main_bg_04) center / cover no-repeat;
  background-position: right 50% bottom 100%;
  background-size: 140%;
}

/* main-lpbf */
.remolabo-lp .main.lpbf {
  background: var(--img-top_main_bg_05) center / cover no-repeat;
  background-position: right 50% bottom 83%;
  background-size: 130%;
}

@media (max-width: 768px) {

  /* main */
  .remolabo-lp .main {
    padding: 0px 16px;
    padding-top: 20%;
  }

  .remolabo-lp .main h1 {
    font-size: 32px;
    line-height: var(--line-height-1-4);
    margin-bottom: 32px;
  }

  .remolabo-lp .main .t-normal-small {
    margin-top: 10px;
    margin-bottom: 6px;
  }

  .remolabo-lp .main .description {
    font-size: 14px;
    line-height: var(--line-height-2);
    margin-bottom: 24px;
  }

  /* main-lpba */
  .remolabo-lp .main.lpba {
    background-position: 61% 27%;
    background-size: auto 130%;
  }

  /* main-lpbb */
  .remolabo-lp .main.lpbb {
    height: 520px;
    background-position: 77% 25%;
    background-size: auto 120%;
  }

  /* main-lpbc */
  .remolabo-lp .main.lpbc {
    background-position: 85% 25%;
    background-size: auto 120%;
  }

  .remolabo-lp .main.lpbc .t-normal-small {
    margin-top: 0px;
  }

  /* main-lpbd */
  .remolabo-lp .main.lpbd {
    background-position: 78% 62%;
    background-size: auto 130%;
  }

  /* main-lpbe */
  .remolabo-lp .main.lpbe {
    background-position: 74% 48%;
    background-size: auto 130%;
  }

  /* main-lpbf */
  .remolabo-lp .main.lpbf {
    background-position: 69% 44%;
    background-size: auto 120%;
    padding-top: 22%;
  }

  .remolabo-lp .main.lpbf .t-normal-small {
    margin-top: 0px;
  }
}

@media (max-width: 440px) {
  /* main */
  .remolabo-lp .main {
    height: 580px;
  }
}

@media (max-width: 325px) {

  /* main-lpbb */
  .remolabo-lp .main.lpbb {
    height: 580px;
  }

  /* main-lpbc */
  .remolabo-lp .main.lpbc {
    height: 630px;
  }
}

/* usage-fee */
section.usage-fee {
  background-color: var(--background-cover-white);
  padding: 120px 0px;
  margin: 0px;
}

section.usage-fee h2 {
  font-size: 48px;
  margin-top: 0px;
  margin-bottom: 56px;
}

section.usage-fee h3 {
  font-size: 40px;
  margin-top: 0px;
  margin-bottom: 56px;
}

section.usage-fee .description {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  margin-top: 0px;
  margin-bottom: 44px;
}

section.usage-fee .marker {
  background: linear-gradient(transparent 45%, #FFEE00 50%);
  display: inline;
}

section.usage-fee .sub-title {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  margin-top: 8px;
  margin-bottom: 16px;
}

section.usage-fee h4 {
  font-size: 24px;
  margin-top: 0px;
  margin-bottom: 40px;
}

section.usage-fee .accent {
  font-size: 42px;
  color: var(--color-orange);
  padding: 0px 5px;
}

section.usage-fee .link-area {
  display: flex;
  justify-content: center;
}

/* sp */
@media (max-width: 768px) {
  section.usage-fee {
    background-color: var(--background-cover-white);
    padding: 56px 0px;
  }

  section.usage-fee h2 {
    font-size: 24px;
    margin-bottom: 40px;
  }

  section.usage-fee h3 {
    font-size: 22px;
  }

  section.usage-fee .description {
    font-size: 12px;
    text-align: left;
    margin-bottom: 40px;
  }

  section.usage-fee .sub-title {
    font-size: 14px;
    text-align: left;
    margin-bottom: 24px;
  }

  section.usage-fee h4 {
    font-size: 16px;
  }

  section.usage-fee .accent {
    font-size: 40px;
  }
}

/* selling-points */
section.selling-points {
  padding: 120px 0px;
  margin: 0px;
}

section.selling-points h2 {
  font-size: 48px;
  margin-top: 0px;
  margin-bottom: 80px;
  line-height: var(--line-height-1-3);
  text-align: center;
}

section.selling-points .grid {
  display: grid;
  grid-template-columns: auto 240px auto;
  grid-template-rows: auto auto auto;
  /* row-gap: 80px; */
  grid-gap: 80px normal;
}

section.selling-points .grid .img {
  height: 600px;
  width: 100%;
  background-repeat: no-repeat;
}

section.selling-points .grid .text {
  display: flex;
  align-items: center;
  width: calc(100% - 160px);
  margin: 0 auto;
  min-width: 360px;
  text-align: left;
}

section.selling-points .grid .img-title {
  font-family: 'Roboto', 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
}

section.selling-points .grid .point1.img {
  grid-column: 1/3;
  grid-row: 1/2;
  background-image: var(--img-top_point_img01);
  background-position: 38% 27%;
  background-size: 220%;
}

section.selling-points .grid .point1.text {
  grid-column: 3/4;
  grid-row: 1/2;
}

section.selling-points .grid .point2.img {
  grid-column: 2/4;
  grid-row: 2/3;
  background-image: var(--img-top_point_img02);
  background-position: 80% 34%;
  background-size: 130%;
}

section.selling-points .grid .point2.text {
  grid-column: 1/2;
  grid-row: 2/3;
}

section.selling-points .grid .point3.img {
  grid-column: 1/3;
  grid-row: 3/4;
  background-image: var(--img-top_point_img03);
  background-position: 78% 47%;
  background-size: 142%;
}

section.selling-points .grid .point3.text {
  grid-column: 3/4;
  grid-row: 3/4;
}

/* tb */
@media (max-width: 1024px) {
  section.selling-points .grid {
    grid-template-columns: auto 10px auto;
  }
}

/* sp */
@media (max-width: 768px) {
  section.selling-points {
    padding: 56px 0px;
  }

  section.selling-points .title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  section.selling-points .grid {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    row-gap: 0;
  }

  section.selling-points .grid .img-title {
    font-size: 18px;
  }

  section.selling-points .grid .img {
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    margin-bottom: 24px;
  }

  section.selling-points .grid .text {
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    margin: 0 auto;
    margin-bottom: 40px;
    min-width: auto;
  }

  section.selling-points .grid .inner h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: var(--line-height-1-6);
    margin-top: 0px;
    margin-bottom: 16px;
  }

  section.selling-points .grid .inner p {
    font-size: 14px;
    margin-bottom: 0;
  }

  section.selling-points .grid .point1.img {
    grid-column: 1/2;
    grid-row: 1/2;
    background-position: 47% 40%;
    background-size: 148%;
  }

  section.selling-points .grid .point1.text {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  section.selling-points .grid .point2.img {
    grid-column: 1/2;
    grid-row: 3/4;
    background-position: 54% 40%;
    background-size: 150%;
  }

  section.selling-points .grid .point2.text {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  section.selling-points .grid .point3.img {
    grid-column: 1/2;
    grid-row: 6/7;
    background-position: 92% 18%;
    background-size: 125%;
  }

  section.selling-points .grid .point3.text {
    grid-column: 1/2;
    grid-row: 7/8;
  }
}

/* end */

/* usage-exam */
section.usage-exam {
  background-color: var(--background-cover-white);
  padding: 120px 0px;
  margin: 0px;
}

section.usage-exam .container h2 {
  font-size: 48px;
  margin-top: 0px;
  margin-bottom: 24px;
}

section.usage-exam .container .sub-title {
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 80px;
  text-align: center;
}

section.usage-exam .grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  column-gap: 80px;
}

section.usage-exam .grid .flame {
  padding: 24px;
  border: solid var(--color-blue) 1.5px;
}

section.usage-exam .grid .flame h3 {
  font-size: 24px;
  line-height: var(--line-height-1-6);
  margin-top: 0px;
  margin-bottom: 24px;
}

section.usage-exam .grid .flame .img {
  height: 200px;
  width: 100%;
  margin-bottom: 24px;
}

section.usage-exam .grid .flame .img.exam-1 {
  background-image: var(--img-top_exam_img01);
  background-size: cover;
}

section.usage-exam .grid .flame .img.exam-2 {
  background-image: var(--img-top_exam_img02);
  background-size: cover;
}

section.usage-exam .grid .flame p {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  text-align: left;
  margin: 0px;
}

@media (max-width: 1024px) {
  section.usage-exam .container h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  section.usage-exam .container .sub-title {
    font-size: 12px;
    margin-bottom: 24px;
    text-align: center;
  }

  section.usage-exam .grid {
    column-gap: 32px;
  }

  section.usage-exam .grid .flame h3 {
    font-size: 23px;
  }
}

@media (max-width: 768px) {
  section.usage-exam {
    padding: 56px 0;
  }

  section.usage-exam .grid {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 16px;
  }

  section.usage-exam .grid .flame {
    padding: 16px;
  }

  section.usage-exam .grid .flame h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  section.usage-exam .grid .flame p {
    font-size: 14px;
    line-height: var(--line-height-2);
  }

  section.usage-exam .grid .flame p.head {
    line-height: var(--line-height-2);
    margin-bottom: 0px;
  }

  section.usage-exam .grid .flame .img {
    height: 160px;
  }

  section.usage-exam .grid .flame .img.exam-1 {
    background-size: 100%;
    background-position: 50% 30%;
  }

  section.usage-exam .grid .flame .img.exam-2 {
    background-size: 100%;
    background-position: 50% 20%;
  }
}

/* end */

/* reason */
section.reason {
  padding: 120px 0px;
  margin: 0px;
}

section.reason .container {
  width: 100%;
  margin: 0px;
  justify-self: center;
}

section.reason .container h2.title {
  margin-top: 0px;
  margin-bottom: 24px;
}

section.reason .container p.sub-title {
  margin-top: 0px;
  margin-bottom: 80px;
}

section.reason .container .grid {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  margin: 0px;
  gap: 40px;
}

section.reason .container .flame {
  background: linear-gradient(135deg, var(--color-orange) 5%, transparent 0);
  background-color: var(--background-cover-white);
  text-align: left;
  width: calc(100% / 5);
  padding: 24px;
}

section.reason .container .flame p {
  margin: 0px;
}

section.reason .container .flame p span:last-child::before {
  content: 'ー';
  margin-right: 8px;
}

section.reason .container .flame .reason-text {
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  display: block;
  line-height: normal;
}

/* sp */
@media (max-width: 768px) {
  section.reason {
    padding: 56px 0px;
  }

  section.reason .container h2.title {
    font-size: 24px;
    /* white-space: nowrap; */
  }

  section.reason .container p.sub-title {
    font-size: 12px;
    margin-left: 16px;
    margin-bottom: 24px;
    text-align: left;
  }

  section.reason .container .grid {
    display: block;
  }

  section.reason .container .flame {
    width: auto;
    margin: 16px;
  }

  section.reason .container .flame .reason-text .t-blue-sp {
    color: var(--color-blue);
  }
}


/* picture slide */
.pic-slide {
  height: 200px;
  display: flex;
}

.pic-slide div {
  height: 100%;
  width: calc(100% / 4);
  background-position: center center;
}

.pic-slide .picture01 {
  background-image: var(--img-top_picslide_img01);
  background-size: cover;
}

.pic-slide .picture02 {
  background-image: var(--img-top_picslide_img02);
  background-size: cover;
}

.pic-slide .picture03 {
  background-image: var(--img-top_picslide_img03);
  background-size: cover;
}

.pic-slide .picture04 {
  background-image: var(--img-top_picslide_img04);
  background-size: cover;
}

@media (max-width: 768px) {
  .pic-slide {
    height: 58px;
  }

  .pic-slide .picture01 {
    background-position: 50% 30%;
  }

  .pic-slide .picture02 {
    background-position: 50% 10%;
  }

  .pic-slide .picture03 {
    background-position: 50% 30%;
  }

  .pic-slide .picture04 {
    background-position: 50% 30%;
  }
}

/* end */

/* message */
section.message {
  padding: 120px 0;
  background: var(--background-cover-white);
}

section.message .container {
  width: calc(100% - 380px);
}

section.message .container h2 {
  margin-top: 0px;
  margin-bottom: 80px;
}

section.message .main-text {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  margin-top: 0px;
  margin-bottom: 24px;
  text-align: left;
}

section.message .signature {
  text-align: right;
  font-size: 16px;
  line-height: var(--line-height-1-8);
}

@media (max-width: 1024px) {
  section.message .container {
    width: calc(100% - 64px);
  }
}

@media (max-width: 768px) {
  section.message {
    padding: 56px 0;
  }

  section.message .container {
    width: calc(100% - 32px);
  }

  section.message .container h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  section.message .main-text {
    font-size: 14px;
    line-height: var(--line-height-2);
  }

  section.message .signature {
    font-size: 14px;
    line-height: var(--line-height-2);
  }
}

/* end */

/* summary section*/
section.summary {
  padding-top: 90px;
  height: 540px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 130%;
  background-position: 70% 74%;
}

section.summary.lpba {
  background-image: var(--img-top_summary_bg);
}

section.summary.lpbb {
  background-image: var(--img-top_summary_bg_01);
  height: 450px;
}

section.summary.lpbc {
  background-image: var(--img-top_summary_bg_02);
}

section.summary.lpbd {
  background-image: var(--img-top_summary_bg_03);
}

section.summary.lpbe {
  background-image: var(--img-top_summary_bg_04);
}

section.summary.lpbf {
  background-image: var(--img-top_summary_bg_05);
}

section.summary .container {
  width: calc(100% - 400px);
}

section.summary .container>p,
section.summary .container>h2 {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  margin: 0px;
  text-align: left;
}

section.summary ul {
  margin: 0px;
  padding: 24px 0px;
}

section.summary ul li {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1-5);
  margin-left: 28px;
  text-align: left;
}

section.summary ul li::marker {
  color: var(--color-blue);
  font-size: 16px;
}

section.summary ul li+li {
  margin-top: 8px;
}

section.summary .cta-tmp {
  margin-top: 56px;
}

@media (min-width: 1440px) {
  section.summary {
    background-size: 115%;
  }
}

@media (max-width: 1024px) {
  section.summary {
    background-size: 150%;
  }

  section.summary .container {
    width: calc(100% - 80px);
  }
}

@media (max-width: 768px) {
  section.summary {
    padding-top: 56px;
    height: auto;
    width: 100%;
    padding-bottom: 316px;
    background-size: auto 65%;
    background-position: 95% 170%;
  }

  section.summary.lpbe {
    background-size: auto 60%;
    background-position: 90% 160%;
  }

  section.summary .container {
    width: calc(100% - 32px);
  }

  section.summary .container>p,
  section.summary .container>h2 {
    font-size: 14px;
    line-height: var(--line-height-2);
  }

  section.summary ul {
    padding: 16px 0;
  }

  section.summary ul li {
    font-size: 14px;
    line-height: var(--line-height-1-4);
  }

  section.summary ul li::before {
    top: 6px;
  }

  section.summary .cta-tmp {
    margin-top: 24px;
  }
}

@media (max-width: 450px) {
  section.summary {
    background-size: auto 46%;
    background-position: 85% 120%;
  }
}

@media (max-width: 400px) {
  section.summary.lpbb {
    height: 570px;
  }

  section.summary.lpbd,
  section.summary.lpbe,
  section.summary.lpbf {
    height: 560px;
  }
}

/* end */

/* --------------------------
  policy Common
-------------------------- */
.bg.privacy-policy {
  background: var(--background-grd);
  padding-bottom: 160px;
}

.bg.privacy-policy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy.pagehead-title-area {
  margin: 0 auto;
  padding-top: 80px;
  margin-bottom: 100px;
}

.policy.pagehead-title-area h1 {
  margin-top: 108px;
  font-size: 48px;
  line-height: var(--line-height-1-4);
  text-align: center;
  font-weight: bold;
}

.policy-text h2 {
  font-size: 20px;
  line-height: var(--line-height-1);
  font-weight: var(--font-weight-bold);
  margin-bottom: 24px;
}

.policy-text h2 .number {
  padding-right: 16px;
}

.policy-text h3 {
  font-size: 20px;
  line-height: var(--line-height-1);
  font-weight: var(--font-weight-bold);
  margin-bottom: 24px;
}

.policy-text h3.small {
  font-size: 16px;
  line-height: var(--line-height-2);
}

.policy-text h4 {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  font-weight: var(--font-weight-bold);
  margin-bottom: 16px;
}

.policy-text h5 {
  font-size: 14px;
  line-height: var(--line-height-1-8);
  font-weight: var(--font-weight-bold);
  margin-bottom: 8px;
}

.policy-text .header-title h5 {
  padding-left: 0px;
}

.policy-text .header-title p {
  margin-top: 0px;
  margin-bottom: 16px;
}

.policy-text h6 {
  font-size: 14px;
  line-height: var(--line-height-2);
  font-weight: var(--font-weight-bold);
  margin: 16px 0px;
}

h6+.list-marker {
  margin-top: -8px;
}

.policy-text .header-title ul {
  padding-left: 0px;
}

.policy-text .header-title ul li .header-title-1 {
  margin-bottom: 8px;
}

.policy .pagehead-title-area p {
  font-size: 20px;
  letter-spacing: var(--letter-spacing-1-4);
  line-height: var(--line-height-1-4);
}

.policy-text .policy-item {
  margin-bottom: 40px;
}

.policy-text .policy-item+.policy-item {
  margin-top: 16px;
  padding-bottom: 0px;
}

.policy-text .policy-item ul {
  list-style: none;
}

.policy-text .policy-item li {
  font-size: 14px;
  line-height: var(--line-height-2);
  list-style: none;
}

.policy-text .policy-item li+li {
  margin-top: 8px;
}

.policy-text .policy-item li.header-title+li.header-title {
  margin-top: 24px;
}

.policy-text ul+ul {
  margin-top: 24px;
}

.policy-text .policy-item .list-marker {
  padding-left: 0;
}

.policy-text .policy-item .list-marker>li {
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.policy-text .policy-item .list-marker li+li {
  margin-top: 8px;
}

.policy-text .policy-item .list-marker>li:before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.2rem;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-contact-border);
}

.policy-text .personal-privacy .policy-item {
  margin-bottom: 80px;
}

.policy-text .policy-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.policy-text h3.contact {
  margin-top: 80px;
}

.policy-text p.contact {
  margin-bottom: 0;
}

.policy-text br.mob {
  display: none;
}

.policy-text .that-all {
  text-align: right;
  margin-top: 40px;
}

.policy-text p.agent-prove-details {
  margin-top: 12px;
  margin-bottom: 8px;
}

.policy-text .last-text {
  margin-bottom: 0;
  padding-bottom: 0;
}

.policy-area .plane-text p a {
  color: var(--simple-black);
}

.policy-text table {
  margin-top: 24px;
  margin-bottom: 40px;
}

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

.policy-text table th,
.policy-text table td {
  border: 1px solid var(--table-border);
  padding: 16px;
  vertical-align: middle;
  font-size: 14px;
  line-height: var(--line-height-2);
}

.policy-text table th {
  background: var(--table-gray-bg);
  font-weight: normal;
  text-align: left;
}

.policy-text table td {
  font-size: 14px;
  line-height: var(--line-height-2);
  vertical-align: top;
  background: var(--pure-white);
}

.policy-text table td:first-child {
  width: 350px;
}

.policy-text .pc {
  display: block;
}

.policy-text .sp {
  display: none;
}

@media screen and (max-width:768px) {
  .bg.privacy-policy {
    padding-bottom: 80px;
  }

  .bg.privacy-policy .container_s {
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  .policy-text h2 {
    font-size: 16px;
    letter-spacing: var(--letter-spacing-2-05);
    line-height: var(--line-height-1-8);
    margin-bottom: 16px;
  }

  .policy-text h3 {
    font-size: 16px;
    letter-spacing: var(--letter-spacing-2-05);
    line-height: var(--line-height-1-8);
    margin-bottom: 16px;
  }

  .policy-text h4 {
    font-size: 14px;
    line-height: var(--line-height-2);
    margin-bottom: 16px;
  }

  .policy-text table {
    margin-top: 16px;
    margin-bottom: 32px;
  }

  .policy-text .personal-privacy .policy-item {
    margin-bottom: 40px;
  }

  .policy-text p.contact+p {
    margin-top: 8px;
  }

  .policy.pagehead-title-area {
    padding-top: 42px;
    margin-bottom: 40px;
  }

  .policy.pagehead-title-area h1 {
    margin-top: 60px;
    font-size: 20px;
    letter-spacing: var(--letter-spacing-2-8);
    line-height: var(--line-height-1-2);
    text-align: left;
  }

  .policy .pagehead-title-area p {
    font-size: 16px;
    letter-spacing: var(--letter-spacing-2-05);
    line-height: var(--line-height-2);
  }

  .policy-text h3.contact {
    margin-top: -8px;
  }

  .policy-text br.mob {
    display: block;
  }

  .policy-text table td:first-child {
    width: 120px;
  }

  .policy-text h5 {
    line-height: var(--line-height-2);
    margin-bottom: 16px;
    margin-top: 16px;
  }

  .policy-text .policy-item {
    margin-bottom: 24px;
  }

  .list-marker+h6 {
    margin-top: 8px;
  }

  .policy-text .policy-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .policy-text .pc {
    display: none;
  }

  .policy-text .sp {
    display: block;
  }
}

/* --------------------------
 Policy
-------------------------- */
.policy-text .policy-section {
  margin-bottom: 40px;
}

.policy-text .policy-section.basic-philosophy {
  margin-bottom: 80px;
}

.policy-text .policy-section .policy-item h4 {
  margin-bottom: 24px;
}

.policy-text .purpose-text {
  margin-bottom: 40px;
}

.policy-text .privacy-policy hr {
  margin: 80px 0;
}

.policy-text p {
  font-size: 14px;
  line-height: var(--line-height-2);
  margin-bottom: 16px;
}

.policy-text p:last-child {
  margin-bottom: 0;
}

.policy-text p.explain {
  margin-bottom: 40px;
}

.policy-text .announce-section {
  margin-bottom: 80px;
}

.policy-text .announce-section .policy-item h4 {
  margin-bottom: 24px;
}

.policy-text .announce-section>h4 {
  padding-left: 0;
}

.policy-text .announce-section .policy-item div.layout-flex>:first-child {
  width: 24px;
}

.policy-text .announce-section .policy-item div.layout-flex>:last-child {
  flex: 1;
}

.policy-text .announce-section .policy-item ul {
  padding: 0px 0px 0px 24px;
}

.policy-text .announce-section .policy-item ul li ul {
  padding: 0px;
}

.policy-text .section-title {
  font-size: 32px;
  letter-spacing: var(--letter-spacing-2-24);
  line-height: var(--line-height-1-6);
  font-weight: var(--font-weight-bold);
  margin-bottom: 24px;
}

.policy-text .section-title.annouce {
  margin-bottom: 80px;
}

.policy-text .held-personal-data {
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .policy-text .privacy-policy hr {
    margin: 40px 0;
  }

  .policy .pagehead-title-area {
    padding-bottom: 80px;
  }

  .policy-text .policy-section.basic-philosophy {
    margin-bottom: 40px;
  }

  .policy-text .policy-section .policy-item h4,
  .policy-text .announce-section .policy-item h4 {
    margin-bottom: 16px;
  }

  .policy-text .purpose-text {
    margin-bottom: 24px;
  }

  .policy-text .section-title {
    font-size: 18px;
    letter-spacing: var(--letter-spacing-1-4);
    line-height: var(--line-height-1);
    margin-bottom: 40px;
  }

  .policy-text .section-title.annouce {
    margin-bottom: 40px;
  }

  .policy-text .held-personal-data {
    margin-top: 40px;
  }

  .policy-text .announce-section {
    margin-bottom: 40px;
  }

  .policy-text p.explain {
    margin-bottom: 32px;
  }

  .policy-text .announce-section .policy-item {
    margin-bottom: 32px;
  }
}

/* --------------------------
 Personal Privacy Policy
-------------------------- */
.policy-text .personal-privacy .first-text {
  margin-bottom: 80px;
}

.policy-text .personal-privacy .privacy-item .contact {
  margin-top: -8px;
  margin-bottom: 40px;
}

.policy-text .enactment-date {
  margin-bottom: 80px;
}

.policy-text .personal-privacy .privacy-item li+li {
  margin-top: 0px;
}

.policy-text .privacy-item {
  list-style: none;
}

.policy-text .privacy-item+.privacy-item {
  margin-top: 16px;
  padding-bottom: 0px;
}

.policy-text .privacy-item li {
  font-size: 14px;
  line-height: var(--line-height-2);
}

.policy-text .privacy-item li+li {
  margin-top: 8px;
}

.policy-text ul+ul {
  margin-top: 24px;
}

.policy-text .personal-privacy .privacy-item {
  margin-bottom: 80px;
}

.policy-text .personal-privacy .privacy-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}


@media screen and (max-width: 768px) {
  .policy-text .personal-privacy .first-text {
    margin-bottom: 40px;
  }

  .policy-text .personal-privacy .privacy-item {
    margin-bottom: 40px;
  }

  .policy-text .personal-privacy .privacy-item:last-child {
    margin-bottom: 0;
  }

  .policy-text .personal-privacy .policy-item .contact {
    margin-top: -12px;
  }

  .policy-text .enactment-date {
    margin-bottom: 40px;
  }
}

/* --------------------------
 About-deal-with-privacy
-------------------------- */
.policy-text .privacy-item .about-deal-with-p {
  padding-left: 16px;
  list-style: decimal;
}

.policy-text .privacy-item .about-deal-with-p li {
  padding-left: 10px;
}

.policy-text .privacy-item li span.number {
  display: inline-block;
  width: 20px;
  margin-right: 8px;
}


/* --------------------------
  contact Common
-------------------------- */
.bg.contact {
  background: var(--background-grd);
  padding-bottom: 160px;
}

.contact.pagehead-title-area {
  margin: 0 auto;
  padding-top: 74px;
  margin-bottom: 100px;
}

.contact.pagehead-title-area h1 {
  margin-top: 108px;
  margin-bottom: 40px;
  font-size: 48px;
  line-height: var(--line-height-1-4);
  text-align: center;
  font-weight: bold;
}

.contact.pagehead-title-area p {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  margin: 40px 0px 0px 0px;
}

.bg.contact .contact-form {
  background-color: var(--background-cover-white);
  padding: 80px;
  position: relative;
  backdrop-filter: blur(30px);
}

.bg.contact .contact-form table {
  width: 100%;
  margin-bottom: 24px;
}

.bg.contact .contact-form table tr:first-child th p {
  margin-top: 0px;
}


.bg.contact .contact-form table tr,
.bg.contact .contact-form table th,
.bg.contact .contact-form table td {
  padding: 0px;
  display: block;
}

.bg.contact .contact-form table tr+tr {
  margin-top: 33px;
}

.bg.contact .contact-form table td {
  font-size: 16px;
  line-height: var(--line-height-1-8);
}

.bg.contact .contact-form table th {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1-6);
}

.bg.contact .contact-form table th p {
  text-align: left;
}

.bg.contact .contact-form table th span {
  display: inline-block;
  width: 58px;
  height: 26px;
  color: var(--pure-white);
  background: var(--color-orange);
  font-size: 12px;
  text-align: center;
  line-height: 26px;
  font-weight: var(--font-weight-normal);
  margin-right: 16px;
  margin-bottom: 0px;
}

.bg.contact .contact-form .wpcf7-checkbox label {
  display: block;
  position: relative;
}

.bg.contact .contact-form .wpcf7-checkbox input[type="checkbox"] {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
}

.bg.contact .contact-form .wpcf7-checkbox .wpcf7-list-item-label {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  position: relative;
  display: inline-block;
  padding-left: 40px;
  cursor: pointer;
  vertical-align: middle;
}

.bg.contact .contact-form .wpcf7-checkbox .wpcf7-list-item-label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--color-contact-border);
  z-index: 0;
  box-sizing: border-box;
  background: var(--pure-white);
}

.bg.contact .contact-form .wpcf7-checkbox .wpcf7-list-item-label:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 5px;
  display: block;

  width: 12px;
  height: 7px;
  border-left: 3px solid var(--text-color);
  border-bottom: 3px solid var(--text-color);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);

  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}

.bg.contact .contact-form .wpcf7-checkbox input[type="checkbox"]:checked+.wpcf7-list-item-label:before {
  opacity: 1;
}

.bg.contact .contact-form td input.wpcf7-text {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 16px;
  margin: 0px;
  background-color: white;
  box-shadow: none;
  border-radius: 4px;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--color-contact-border);
}

.bg.contact .contact-form td input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

span.wpcf7-form-control-wrap[data-name="your-message"] {
  display: grid;
}

.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: none;
}

.bg.contact .contact-form td textarea.wpcf7-textarea {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  padding: 16px;
  background-color: white;
  border-radius: 4px;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--color-contact-border);
}

.bg.contact .contact-form td input.wpcf7-text::placeholder,
.bg.contact .contact-form td textarea.wpcf7-textarea::placeholder {
  font-size: 16px;
  line-height: var(--line-height-1-8);
  color: var(--color-placeholder);
}

.bg.contact .contact-form .agree-area {
  font-size: 14px;
  line-height: var(--line-height-1-6);
  color: var(--text-color);
}

.bg.contact .contact-form .agree-area a {
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-right: 18px;
  position: relative;
}

.bg.contact .contact-form .agree-area a:after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg id="icon_open-in-win" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path id="icon_open-in-win-2" data-name="icon_open-in-win" d="M3.306,15.75a1.5,1.5,0,0,1-1.1-.457,1.5,1.5,0,0,1-.457-1.1V3.306a1.5,1.5,0,0,1,.457-1.1,1.5,1.5,0,0,1,1.1-.457H8.75V3.306H3.306V14.194H14.194V8.75H15.75v5.444a1.56,1.56,0,0,1-1.556,1.556Zm3.656-4.122L5.872,10.539l7.233-7.233h-2.8V1.75H15.75V7.194H14.194v-2.8Z" transform="translate(-1.75 -1.75)" fill="%231a1a1a"/></svg>');
  fill: var(--text-color);
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.bg.contact .contact-form .confirm-btn {
  width: 100%;
  height: 56px;
  margin-top: 56px;
}

.bg.contact .contact-form .confirm-btn input {
  width: 100%;
  height: 56px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1-6);
  color: var(--pure-white);
  background: var(--color-blue);
  box-shadow: none;
  border: none;
  border-radius: 4px;
  transition: background 0.3s ease-out;
}

.bg.contact .contact-form .confirm-btn input:hover {
  background: var(--color-input-hover);
}

.contact-form .wpcf7-list-item {
  margin-left: 40px;
}

.wpcf7-list-item label {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.wpcf7-list-item label::before,
.wpcf7-list-item label::after {
  content: none;
}

.wpcf7-list-item.first {
  margin: 0;
}

.contact-form .wpcf7-not-valid-tip {
  color: var(--color-contact-error);
  font-size: 14px;
  line-height: var(--line-height-1-6);
  margin-top: 16px;
}

.wpcf7-spinner {
  display: none !important;
}

.wpcf7-response-output {
  display: none;
}

@media screen and (max-width: 768px) {
  .contact.pagehead-title-area {
    padding-top: 42px;
    padding-bottom: 0px;
    margin-bottom: 40px;
  }

  .contact.pagehead-title-area h1 {
    margin-top: 60px;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: var(--line-height-1-6);
  }

  .contact.pagehead-title-area p {
    margin-top: 16px;
    font-size: 14px;
    line-height: var(--line-height-2);
  }

  .contact.thanks.pagehead-title-area p {
    padding-bottom: 10px;
  }

  .bg.contact {
    padding-bottom: 80px;
  }

  .bg.contact .contact-form {
    background-color: transparent;
    padding: 0;
    backdrop-filter: none;
  }

  .bg.contact .contact-form .confirm-btn {
    margin-top: 40px;
  }

  .bg.contact .contact-form table tr+tr {
    margin-top: 24px;
  }

  .bg.contact .contact-form tr:first-child .wpcf7-checkbox {
    display: flex;
  }

  .bg.contact .contact-form tr:first-child .wpcf7-checkbox .wpcf7-list-item {
    width: 50%;
  }

  .bg.contact .contact-form table th p {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .bg.contact .contact-form table th span {
    font-size: 13px;
  }

  .bg.contact .contact-form .agree-area p {
    font-size: 14px;
  }

  .contact-form .wpcf7-list-item {
    margin: 0;
  }
}

/* --------------------------
  contact Confirm
-------------------------- */
.bg.contact .contact-form .submit-btn {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.bg.contact .contact-form .submit-btn input {
  height: 56px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-1-6);
  border-radius: 4px;
}

.bg.contact .contact-form .submit-btn input.wpcf7-submit {
  color: var(--pure-white);
  background: var(--color-blue);
  box-shadow: none;
  border: none;
  transition: background 0.3s ease-out;
}

.bg.contact .contact-form .submit-btn input.wpcf7-submit:hover {
  background: var(--color-input-hover);
}

.bg.contact .contact-form .submit-btn input.wpcf7-previous {
  color: var(--color-previous-btn);
  background: transparent;
  box-shadow: none;
  transition: color 0.3s ease-out;
  border: solid var(--color-previous-btn) 1.2px;
}

.bg.contact .contact-form .submit-btn input.wpcf7-previous:hover {
  color: var(--color-blue);
  border: solid var(--color-blue) 1.2px;
}

@media screen and (max-width: 768px) {
  .bg.contact .contact-form .submit-btn {
    margin-top: 40px;
  }
}

/* --------------------------
  contact Thanks
-------------------------- */
.contact.thanks.pagehead-title-area {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .contact.thanks.pagehead-title-area .sp-block {
    display: block;
    content: '';
    width: 100%;
    height: 14px;
  }
}