@charset "UTF-8";

/* =========================
   Base
========================= */
body {
  color: #2d2d2d;
  font-family: "游ゴシック Medium","Yu Gothic Medium","メイリオ",Meiryo,sans-serif;
  margin-top: 70px;
  line-height: 1.7;
}

main > .container {
  width: 100%;
  max-width: 915px;
  min-width: 250px;
  margin: 100px auto 0;
  box-sizing: border-box;
}

main > .container section {
  width: 100%;
  margin: 0 auto 4em;
}

p {
  margin-bottom: 1em;
  line-height: 1.8;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: 2.3rem;
  margin-bottom: 1.2em;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 0.8em;
}

h3 {
  font-size: 1.4rem;
}

main img:not(.pc_apper):not(.tb_apper):not(.sp_apper) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   HERO
========================= */
.h1_wrap {
  width: 100%;
  height: 200px;
  padding-top: 70px;
  background: linear-gradient(to right, #00A0FF, #6446C8);
  box-sizing: border-box;
}

/* =========================
   Section headings
========================= */
#features figure,
#flow figure,
#movie figure,
#details figure {
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  text-align: left;
}

#features figure h2,
#flow figure h2,
#movie figure h2,
#details figure h2,
#features figure figcaption,
#flow figure figcaption,
#movie figure figcaption,
#details figure figcaption {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

#features > figure h2 {
  margin-top: 320px;
  letter-spacing: 0.04em;
}

#features > h2 {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

/* =========================
   Features
========================= */
#features {
  text-align: center;
}

#features h3,
#features h4,
#features h5,
#features p,
#features ul,
#features ol {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* =========================
   Flow common
========================= */
#flow {
  max-width: 915px;
  margin: 0 auto 4em;
}

#flow h3,
#flow h4,
#flow h5,
#flow p,
#flow ul,
#flow ol {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* PREVIX flow */
#flow .previx-flow {
  max-width: 600px;
  margin: 0 auto;
}

#flow .previx-flow-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 56px;
}

#flow .previx-flow-num {
  flex: 0 0 56px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #1d3f91;
  text-align: center;
}

#flow .previx-flow-body {
  flex: 1;
  margin: 0;
}

#flow .previx-flow-body h3 {
  max-width: none;
  margin: 0 0 12px;
  font-size: 1.2rem;
}

#flow .previx-flow-body p {
  max-width: none;
  margin: 0 0 12px;
  line-height: 1.8;
}

/* =========================
   touch flow
========================= */
body#touch #flow .flow_img {
  position: relative;
  z-index: 1;
  max-width: 915px;
  margin: 0 auto;
}

body#touch #flow .flow_img::after {
  content: "";
  width: 100%;
  height: 107%;
  background-color: #E6F0FA;
  top: -5%;
  right: 0;
  position: absolute;
  z-index: -1;
}

/* PC */
body#touch #flow .flow_img > img {
  width: 62.5%;
  max-width: none;
  margin-left: 10%;
  margin-right: 0;
  display: block;
}

body#touch #flow .flow_img h3,
body#touch #flow .flow_img p[class^="num"],
body#touch #flow .flow_img .modal_btn {
  position: absolute;
  z-index: 5;
  max-width: none;
  margin: 0;
}

body#touch #flow .flow_img h3 {
  left: calc(10% + 62.5%);
  color: #172A88;
  line-height: 1.7;
}

body#touch #flow .marker_yw {
  background-color: #FFF100;
  padding: .02em .7em 0 .7em;
}

body#touch #flow .num01 { top: 2%; }
body#touch #flow .num01p { top: 21.5%; left: 44.5%; }

body#touch #flow .num02 { top: 27.5%; }
body#touch #flow .num02p { top: 46%; left: 38%; }

body#touch #flow .num03 { top: 53.2%; }
body#touch #flow .num03p { top: 71.3%; left: 44%; }

body#touch #flow .num04 { top: 78.8%; }

body#touch #flow .modal_btn {
  top: 47.5%;
  left: 63%;
}

/* =========================
   Movie
========================= */
#movie {
  width: 100%;
  max-width: 915px;
  margin: 0 auto 4em;
  background-color: #E6F0FA;
  padding: 40px 0 72px;
  box-sizing: border-box;
}

#movie::after {
  content: none;
}

#movie p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

#movie .youtube {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 64px;
}

#movie .movie-content-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #fff;
}

#movie .movie-content-wrap iframe,
#movie .movie-content-wrap .movie-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#movie .sp-spacer {
  display: none !important;
}

/* =========================
   Details
========================= */
#details .inner,
#details .arrow,
#details h3,
#details p,
#details ul,
#details ol {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* =========================
   service-service-content
========================= */
.service-service-content {
  width: 100%;
  max-width: 915px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.service-service-content h2,
.service-service-content h3,
.service-service-content h4,
.service-service-content h5,
.service-service-content p,
.service-service-content ul,
.service-service-content ol {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* =========================
   Contact
========================= */
#contact {
  text-align: center;
}

#contact p {
  text-align: center;
}

#contact .button {
  display: inline-block;
  padding: 12px 32px;
  background-color: #E83828;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

/* =========================
   touch.html
========================= */
body#touch .list_wrap {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

body#touch .list_wrap ol {
  margin: 0;
  padding-left: 1.5em;
}

body#touch .list_wrap li {
  text-align: left;
}

body#touch #flow .modal_btn {
  text-align: left;
}

/* modal image switch */
body#touch .modal_inner {
  max-width: 600px;
  margin: 0 auto;
}

body#touch .modal_inner img {
  width: 100%;
  height: auto;
  display: none;
}

body#touch .modal_inner .pc_apper {
  display: block;
}

/* =========================
   Header icon fix
========================= */
header .icon,
#button_to_contact .icon {
  display: inline-block !important;
  width: 1em;
  max-width: none;
  height: auto;
  margin-right: 4px;
  vertical-align: middle;
}

/* =========================
   Tablet / SP
========================= */
@media screen and (max-width: 1024px) {
  body#touch .modal_inner .pc_apper {
    display: none;
  }

  body#touch .modal_inner .tb_apper {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  main > .container {
    width: calc(100% - 32px);
    margin-top: 80px;
  }

  #flow .previx-flow-item {
    flex-direction: column;
    gap: 8px;
  }

  #flow .previx-flow-num {
    text-align: left;
  }

  body#touch #flow .flow_img > img {
    margin-left: 2%;
  }

  body#touch #flow .flow_img h3 {
    left: calc(2% + 62.5%);
  }
}

@media screen and (max-width: 600px) {
  body#touch .modal_inner .tb_apper {
    display: none;
  }

  body#touch .modal_inner .sp_apper {
    display: block;
  }
}

/* PC（そのまま or 少し調整） */
.marker_yw {
  background: #fff100;
  padding: 2px 4px;
  line-height: 1.6;
}

/* SPだけ小さく */
@media screen and (max-width: 768px) {
  .marker_yw {
    font-size: 0.6em;   /* ←これが効く */
    line-height: 0.8;
    padding: 1px 3px;
  }
}