/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require font-awesome
 *= require ./lib/bootstrap-4.0.0/bootstrap.min
 *= require ./lib/jquery.smartmenus.bootstrap.css
 *= require_tree .
 *= require_self

 */

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

@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 2;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

a img {
  border: none;
}

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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

html, body {
  color: #000;
  font-family:  "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro", "游ゴシック", "游明朝", "ヒラギノ明朝 Pro", "Oswald", "メイリオ", "游ゴシック", "Noto Serif", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  line-height: 1.8;
  text-align: justify;
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
  font-weight: 400;
}

a,a:hover {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

h1, h2, h3, h4, h5,  h6, p {
  margin: auto;
}

p, dt, dd {
  overflow-wrap: break-word;
}

body {
  margin: auto; 
  position: relative;
}

/*--------------------------responsive ---------------------*/
.clearfix::before,
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}


/*--------------------------------------------------------------------------*/
/* Common
---------------------------------------------------------------------------------*/

body {
  position: relative;
  margin: 0;
}

h1 {
  margin: initial;
}

h2 {
  font-size: 4.5rem;
  text-align: center;
}

h1, h2, h3, h4 {
  line-height: 1.5;
  font-weight: bold;
  margin: 0;
}

p, td, label, div, ul, li, strong  {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
}
p {
  white-space: pre-line;
}
p.normal {
  font-size: 1.8rem;
  color: white;
  text-align: center;
  line-height: 2;
}
p.normal.black {
  color: black;
}
p.normal .underline {
  text-decoration: underline;
}
.container {
  width: 100rem;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
  position: relative;
}
main {
  position: relative;
}
.py10 {
  padding: 10rem 0;
}
.py8 {
  padding: 8rem 0;
}
.py6 {
  padding: 6rem 0;
}
.py5 {
  padding: 5rem 0;
}
.py4 {
  padding: 4rem 0;
}
.pt8 {
  padding-top: 8rem;
}
.pb8 {
  padding-bottom: 8rem;
}
.mt10 {
  margin-top: 10rem;
}
.mt8 {
  margin-top: 8rem;
}
.mt7 {
  margin-top: 7rem;
}
.mt5 {
  margin-top: 5rem;
}
.mt4 {
  margin-top: 4rem;
}
.mt3 {
  margin-top: 3rem;
}
.mt2 {
  margin-top: 2rem;
}
.mt1 {
  margin-top: 1rem;
}
.bg1 {
  background: #F7F7F7;
}
.padBg1 {
  position: relative;
}
.padBg2 {
  position: relative;
}
.padBg2:before {
  content: "";
  left: 0;
  right: 0;
  top: 10rem;
  bottom: 0;
  position: absolute;
  z-index: -1;
}
.btn {
  display: block;
  cursor: pointer;
}
.btn_main {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: pulse;
  display: block;
  width: 80rem;
  margin: auto;
}
.boxShadow {
  box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.54);
  -webkit-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.54);
  -moz-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.54);
}
.formMain {
  margin-top: 4rem;
}
.title {
  width: 84.5rem;
  margin: auto;
}
.onayami:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 3rem solid transparent;
  border-right: 3rem solid transparent;
  border-top: 2rem solid #26A7BC;
  position: absolute;
  left: calc(50% - 3rem);
  bottom: calc(1px - 2rem);
}
.onayamiInfo {
  position: relative;
  width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}
.checkList li {
  font-size: 2rem;
  color: white;
  position: relative;
  padding: 1rem 0;
  line-height: 1.5;
  padding-left: 2.5rem;
  list-style: none;
}
.checkList li:before {
  content: "";
  background: url(img/icon_check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.9rem;
  height: 2.5rem;
  position: absolute;
  left: 0;
  top: 1rem;
}
.onayamiImg {
  width: 20rem;
  position: absolute;
  right: 0;
  top: 0;
}
.solutionImg {
  width: 55.3rem;
  margin: auto;
}
.aboutGraph h3 {
  font-size: 3rem;
  color: white;
  text-align: center;
}
.aboutGraph {
  width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.aboutGraph p {
  font-size: 1.4rem;
  color: black;
  text-align: center;
}
.graph2Img {
  width: 55rem;
  margin-left: auto;
  margin-right: auto;
}
.aboutReason h3 {
  width: 21.3rem;
  margin: auto;
  position: relative;
}
.aboutReason {
  width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.aboutReasonInfo {
  margin-top: -2.5rem;
  padding: 4rem 6rem;
  border: 2px solid white;
  border-radius: 2rem;
}
.costImg {
  width: 68.6rem;
  margin-left: auto;
  margin-right: auto;
}
.aboutSubTtl1Img {
  width: 50rem;
  margin-left: auto;
  margin-right: auto;
}
.aboutSubTtl2Img {
  width: 66.3rem;
  margin-left: auto;
  margin-right: auto;
}
.diff h2 {
  width: 54.7rem;
  margin: auto;
}
.diffMediaImg {
  width: 80rem;
  margin: auto;
  border: 1px solid #f2f2f2;
  border-radius: 2rem;
}
.diffList {
  width: 90rem;
  margin-left: auto;
  margin-right: auto;
}
.diffList ul {
  list-style: none;
}
.diffItem h3 {
  width: 70rem;
  margin: auto;
}
.diffItemInfo {
  padding: 10rem 5rem 5rem;
  border-radius: 3rem;
  margin-top: -9rem;
}
.stepList {
  width: calc(100% + 4rem);
  margin: -2rem;
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}
.stepList>li {
  width: calc(50% - 4rem);
  margin: 2rem;
  position: relative;
}
.stepList>li:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 4rem;
  border-radius: 2rem;
  z-index: -1;
}
.stepMediaImg {
  width: 70rem;
  margin: auto;
}
.fv31Img {
  height: 119rem;
  object-fit: cover;
}
.fv32Img {
  height: 70rem;
  object-fit: cover;
}
.companyInfo {
  display: flex;
  justify-content: space-between;
}
.companyInfoTbl  {
  width: 47rem;
}
.companyMedia {
  width: 50%;
}
.companyInfoTbl th,
.companyInfoTbl td {
  padding: 1.5rem;
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
}
.privacy {
  padding: 4rem 0;
}
.privacy h2 {
  font-size: 2rem;
}
.privacy p {
  text-align: center;
  font-size: 1.4rem;
  color: #4D4D4D;
  line-height: 1.5;
}
.copyright {
  background: black;
  color: white;
  font-size: 1.4rem;
  text-align: center;
  padding: 1rem 0;
}
.formMainWrap {
  margin-top: 5rem;
  padding: 4rem;
  border-radius: 4rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.16);
}
.formMainTxt {
  color: red;
  font-size: 4.5rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 3rem;
}




















.reason:before {
  top: 7rem;
}
.onayami:before {
  top: 6rem;
}
.about:before {
  top: 7.5rem;
}
.fv11Img {
  height: 117rem;
  object-fit: cover;
}
.fv12Img {
  height: 84rem;
  object-fit: cover;
}
.fv21Img {
  height: 140rem;
  object-fit: cover;
}
.fv22Img {
  height: 99rem;
  object-fit: cover;
}


.lp3 .aboutReason h3,
.lp3 .padBg2:before,
.lp3 .diffItemInfo,
.lp3 .stepList>li:after  {
  background: #26A7BC;
}
.lp3 .onayami:after {
  border-top: 2rem solid #26A7BC;
}

.lp1 .aboutReason h3,
.lp1 .padBg2:before,
.lp1 .diffItemInfo,
.lp1 .stepList>li:after  {
  background: #81dbff;
}
.lp1 .onayami:after {
  border-top: 2rem solid #81dbff;
}
.lp1 .reason:before {
    top: 10rem;
}
.lp1 .step h2 {
  width: auto;
  margin: auto;
}
.lp1 .about:before {
    top: 6.5rem;
}

.lp2 .aboutReason h3,
.lp2 .padBg2:before,
.lp2 .diffItemInfo,
.lp2 .stepList>li:after  {
  background: #2693d6;
}
.lp2 .onayami:after {
  border-top: 2rem solid #2693d6;
}





.pc{
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 1250px) {
  html, body {
    font-size: calc(100vw / 125);
  }
}





@media screen and (max-width: 767px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  html, body {
    font-size: calc(100vw / 60);
  }
  h2 {
    font-size: 3.5rem;
  }
  .py10 {
    padding: 8rem 0;
  }
  .py8 {
    padding: 7rem 0;
  }
  .py6 {
    padding: 5.5rem 0;
  }
  .py5 {
    padding: 4.5rem 0;
  }
  .py4 {
    padding: 3.5rem 0;
  }
  .pt8 {
    padding-top: 7rem;
  }
  .pb8 {
    padding-bottom: 7rem;
  }
  .mt10 {
    margin-top: 8rem;
  }
  .mt8 {
    margin-top: 7rem;
  }
  .mt7 {
    margin-top: 6rem;
  }
  .mt5 {
    margin-top: 4.5rem;
  }
  .mt4 {
    margin-top: 3.5rem;
  }
  .mt3 {
    margin-top: 3rem;
  }
  .container {
    width: calc(100% - 4rem);
  }
  .fv31Img {
    content: url(img/fv31_sp.jpg);
    height: auto;
  }
  .fv32Img {
    content: url(img/fv32_sp.jpg);
    height: auto;
  }
  .fv11Img {
    content: url(img/fv11_sp.jpg);
    height: auto;
  }
  .fv12Img {
    content: url(img/fv12_sp.jpg);
    height: auto;
  }
  .fv21Img {
    content: url(img/fv21_sp.jpg);
    height: auto;
  }
  .fv22Img {
    content: url(img/fv22_sp.jpg);
    height: auto;
  }
  .btn_main {
    width: 90%;
  }
  .title {
    width: 100%;
  }
  .onayamiImg {
    display: none;
  }
  .aboutGraph {
    width: 100%;
  }
  .graph2Img {
    width: 100%;
  }
  .aboutReason {
    width: 100%;
  }
  .aboutReasonInfo {
    padding: 3rem 2rem 2rem;
  }
  .costImg,
  .aboutSubTtl2Img,
  .diffMediaImg,
  .diffList,
  .diffItem h3,
  .stepMediaImg {
    width: 100%;
  }
  .diffItem h3 {
    width: 96%;
  }
  .diffItemInfo {
    margin-top: -7rem;
    padding: 10rem 2rem 2rem;
  }
  .stepList>li:after {
    top: 2rem;
  }
  .stepList {
    width: calc(100% + 2rem);
    margin: -1rem; 
  }
  .stepList>li {
    width: calc(50% - 2rem);
    margin: 1rem;
  }
  .companyInfo {
    display: block;
  }
  .companyMedia {
    height: 25rem;
    width: 100%;
  }
  .companyInfoTbl {
    width: 100%;
    margin-top: 4rem;
  }
  .companyInfoTbl table {
    width: 100%;
  }
  .lp1 .onayami:before {
    top: 4rem;
  }
  .lp1 .about:before {
    top: 4rem;
  }
  .lp1 .reason:before {
    top: 7rem;
  }
  .formMainTxt {
    font-size: 3rem;
  }
}