@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800&display=swap');

body {
  font-size: 1.0rem;
  font-family: "M PLUS 1p", serif;
  font-weight: 400;
  font-style: normal;
}
.mincho {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-style: normal;
}
.midashi {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
section { padding: 3.0rem 0; }
.container { max-width: 980px!important; }
.img100 { width: 100%; }
.h100 { height: 100%; }
.w100 { width: 100%; }
.flex { display: flex; }
.v-center { display: flex; align-items: center; }
.vh-center { display: flex; align-items: center; justify-content: center; }
.v-middle { text-align: center; vertical-align: middle; }
.gyou-2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gyou-3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bg-blue { background: #ccddee; }
.bg-white { background: #fff; }
.bg-yellow { background: #c7a901; }
.bg-red { background: #ff0000; }
.small { font-size: 0.9rem; }
.xsmall { font-size: 0.7rem; }
.light-bold { font-weight: 500; }
.bold { font-weight: 700; }
.red { color: #ff0000; }
.blue { color: #0000ff; }
.light-blue { color: #336680; }
.white { color: #fff; }
.form-control::placeholder { color: #c8c8c8; }
.list-bg { background: #fffacd; padding: 1.0rem 0; }
.t-shadow {
  -moz-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -ms-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
}
span.marker {
    background: linear-gradient(transparent 50%, rgb(255, 247, 7, 0.6) 50%);
}
.block-01 { background: rgb(233, 250, 255, 0); padding: 1.5rem; border-left: 3px solid #2984BA; border-right: 3px solid #2984BA; border-radius: 20px; }


.header-inner { display: flex; justify-content: center; align-items: center; background: #2080df; padding: 10px; }
.header-inner h1 { font-size: 2.0rem; margin: 0; color: #fff; line-height: 2.4rem; }
.header-inner-icon { height: 5.0rem; margin-right: 20px; }
.header-sub { font-size: 1.4rem; background: #fff; color: #2080df; border-radius: 20px; padding: 0px 15px; }

.floatnav {
  position: fixed;
  top: 0;
  right: 0;
  font-weight: 500;
  padding: 1.8rem;
  z-index: 99;
  background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%);
  color: #fff;
  font-weight: bold;
  text-align: center;
}

a.float-contact {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  font-size: 1.0rem;
  padding: 8px 18px 10px 18px;
  background: #fa9025;
  box-shadow: 0px 0px 30px #2984BA;
  border-radius: 25px;
  margin: 10px 0 0 0;
  text-align: center;
/* -moz-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -ms-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8); */
}

.float-phone {
  font-size: 1.6rem;
  text-align: center;
  -moz-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  -ms-text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
}

/*H2見出し*/
h2.design-01 {
  padding-bottom: 0.7em;
  font-weight: 500;
  text-align: center;
  position: relative;
  color: #336680;
}
h2.design-01:after {
  content: '';
  position: absolute;
  border-bottom: 10px dotted #4c9ac0;
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

h2.design-02 {
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-bottom: solid 3px red;
    padding: 16px;
    min-width: 240px;
    max-width: 100%;
    text-align: center;
}
h2.design-02:before,
h2.design-02:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
h2.design-02:before{
    border: solid 13px transparent;
    border-top: solid 13px red;
}
h2.design-02:after {
    border: solid 14px transparent;
    border-top: solid 14px #fff;
    margin-top: -5px;
}

/*H3見出し*/
h3.design-01 {
  font-weight: 500;
  font-size: 1.3rem;
  border: 3px solid #4c9ac0;
  padding: 0.5em 1em;
  position: relative;
}
h3.design-01:after {
  content: '';
  background-color: #e1eef5;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  position: absolute;
  top: -7px;
  left: 4px;
  z-index: -1;
}

h3.point {
  font-size: 1.45rem;
  color: #ff0000;
  text-align: center;
  margin: 1.5rem 0 1.0rem 0;
}
h3.point::before {
  font-family: "Font Awesome 6 Free";
  content: "\f0a4";
  margin-right: 8px;
}

/* リンクボタン */
.link-wrap a { background: #2080df; border: 2.5px solid #fff; display: block; padding: .95rem; text-decoration: none; color: #fff; }
.link-wrap a:hover { border: 2.5px solid #2080df; background: #fff; color:#2080df; transition: 0.8s; }
.link-wrap-b a { background: #fff; border: 2.5px solid #2080df; display: block; padding: .95rem; text-decoration: none; color: #2080df; }
.link-wrap-b a:hover { border: 2.5px solid #fff; background: #2080df; color:#fff; transition: 0.8s; }

/* ヘッダー＆ナビ */
.header-wrap {
  background: #2080df;
 /* height: 20vh; */
  padding: 4.0rem 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-wrap { position: absolute; top: 15px; left: 15px; z-index: 999; }
.btn-menu { padding: 0.6rem 1.6rem; border :solid 2px #fff; background: #2080df; color: #fff; }
.btn-menu:hover { border :solid 2px #2080df; background: #fff; color: #2080df; transition: 0.8s; }
.nav-tabs { border-bottom: 0; }
.tab-pane { margin-top: 2.0rem; }
a.haed-title { margin-left: 10px; text-decoration: none; font-weight: 500; color:#fff; }

.offcanvas-header,.offcanvas-body { background: #2080df; }
.offcanvas-body li { color: #fff; font-size: 1.2rem; }
.nav-contact { margin-top: 3.0rem; }


/* トップページ */
.hero-wrap {
  background: linear-gradient(0deg,rgba(218, 236, 245, 0.68) 0%, rgba(111, 148, 171, 1) 50%, rgba(33, 6, 6, 1) 100%);
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: -2px;
  overflow: hidden;
}

.hero-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  z-index: 9;
}
.hero-img-wrap { position: absolute; bottom: 0; right: 0; width: 30%; max-width: 450px; }
.hero-wrap h1 {
  font-size: 2.8rem;
  display: inline-block;
  padding-left: 7.0rem;
  padding-right: 7.0rem;
  /* background-color: #2080df; */
  background-image: linear-gradient(89deg, rgba(255, 255, 255, 0) 3%, rgba(32, 128, 223, 1) 12% 88%, rgba(255, 255, 255, 0) 97%);
  -moz-text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
  -webkit-text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
  -ms-text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
 }
.hero-icon { color: #ffd700; padding: 0 10px; }
.hero-sub { font-size: 1.55rem; font-weight: 500; text-align: center; }

.hero-middle-bg { position: absolute; top: -10%; width: 100%; text-align: right; }
.hero-middle-bg img { width: 45%; }

.hero-upper-bg { position: absolute; top: 0; right: 0; width: 100%; opacity: 1; text-align: right; animation: upperbg 2s ease .5s forwards; }
.hero-upper-bg img { width: 60%; }
@keyframes upperbg {
  0% { right: -120px; opacity: 0; }
  100% { right: 0px; opacity: 1; }
}

.hero-bottom-bg { position: absolute; bottom: -1px; left: -120px; animation: bottombg 2s ease .5s forwards; width: 100%; opacity: 0; }
.hero-bottom-bg img { width: 60%; }
@keyframes bottombg {
  0% { left: -120px; opacity: 0; }
  100% { left: 0px; opacity: 1; }
}

.triangle {
  font-size: 1.35rem;
  height: 4.0rem;
  background-image: url(/assets/img/triangle.svg);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: top center;
}

.front-propose-block { width: 100%; }
.front-propose-item { text-align: center; padding: 0; border-left: 2px solid #fff; }
.front-propose-item a { background: #2080df; color: #fff; text-decoration: none; display: block; padding: 18px 4px; border-radius: 0 0 8px 8px; }
.front-propose-item h3 { font-size: 1.2rem; margin: 0; }
.front-propose-item h3:before { content: '\f061'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px; }
.front-propose-item a:hover { background: #ccddee; color: #2080df; transition: 0.8s; }


.propose-link-wrap { position: relative; }
.propose-link-wrap h4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; background: #fff; padding: 1.3rem 2.0rem; }
.propose-link-wrap a:hover img { transform:scale(1.1,1.1); transition: 0.8s; }
.propose-link { overflow: hidden; }

.reco { position: relative;  font-weight: bold; border: 2px solid #000; }
.reco p { position: absolute; font-size: 6.0rem; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color:rgb(220, 20, 60, 0.6); }


/* お客様の声 */
.voice-wrap { background: #ccddee; border-radius: 10px; padding: 6px; height: 100%; }
.voice-wrap:hover { background: #f8f8f8; transition: 0.8s; }
.voice-wrap img { width:100px; height:100px; border-radius: 50%; object-fit: cover; border: 3px solid #2080df; }
.voice-wrap a { text-decoration: none; font-size: 1.0rem; }
.voice-body { padding-left: 0.8rem; }
.voice-label { color: #333; background: #fff; padding: 3px 6px; font-size: 0.95rem; width: 6.0rem; text-align: center; margin-bottom: 6px; }
.voice-wrap:hover .voice-label { background: #ccddee; transition: 0.8s; }

/* 設置事例 */
.splide__slide { border-radius: 10px; border: 3px solid #fff; aspect-ratio: 4 / 3; overflow: hidden; }
.splide__slide img { width: 115%; }
.splide__arrow { display: none; }

/* お問い合わせページ */
.form-control { border-radius: 0; border-color: #808080; }
.form-label { font-weight: 400; margin-top: 0.5rem; position: relative; }
.form-label:before { font: var(--fa-font-solid); content: "\f152"; padding-right: 0.5rem; }
.req { background: #ff0000; color: #fff; font-size: 0.7rem; text-align: center; margin-left: 6px; position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; padding: 4px 0; border-radius: 4px; }
.form-error { padding: 6px 0.75rem; font-size: 0.9rem; background: #ffd6cc; color: red; }
.form-error:before { font: var(--fa-font-solid); content: "\f06a"; padding-right: 0.3rem; }
.send-check,.sending { border: 2.5px solid #2080df; border-radius: 0; background: #2080df; color: #fff; padding: 1.15rem 0; width: 12rem; margin-top: 10px; }
.send-check:hover,.sending:hover { background: #fff; color: #2080df; transition: 0.8s; }
.return { border: 2.5px solid #ffd6cc; border-radius: 0; background: #ffd6cc; color: red; padding: 1.15rem 0; width: 12rem;  margin-top: 10px; }
.return:hover { border: 2.5px solid red; background: #fff; color: red; transition: 0.8s; }
.thanks-msg { padding: 5.0rem 15px; }
.thanks-msg p { text-align: center; }

/* 未使用 */
#product table { width: 100%; }
#product th { text-align: center; background: #fff; border: 1px solid #000; padding: 6px; font-size: 0.9rem; width: 6rem; background: #ccddee; }
#product td { background: #fff; border: 1px solid #000; padding: 6px; font-size: 0.9rem; line-height: 0.97rem; }

/* ポリシー */
.policy-title { color: #2080df; font-weight: 500; }
.policy-body { padding-left: 1.4rem; }
.policy-list { padding-left: 2.6rem; }

/* フッター */
footer { background: #2080df; padding-top: 3.0rem; }
.return-page { 
  z-index: 100;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: blue;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
 }
.return-page p { margin: 0; padding: 0; line-height: 1.4rem; }
.return-page a { margin: 0; padding: 0; display: inline-block; color: #fff; font-size: 1.0rem; }
.return-page a:hover { color: #ff0000; transition: 0.8s; }
.contact-phone { font-weight: bold; display: inline-block; color: #2080df; background: #ccddee; padding: 0.6rem 3.0rem; border-radius: 50px; }
.copyright { background: #fff; }


/* SP調整 */
@media screen and (max-width: 991px) {
html { font-size: 90%!important; }
.hero-wrap {
  background-size: 60%,60%,50%,100%;
  height: 50vh;
}
.hero-wrap h1 { font-size: 2.0rem; }
}

@media screen and (max-width: 769px) {
html { font-size: 80%!important; }
.md-none { display:none;}
.hero-wrap {
  background-size: 60%,60%,50%,100%;
  height: 45vh;
}
.hero-wrap h1 { background-image:none; background-color: #2080df; padding-left: 3.0rem; padding-right: 3.0rem; }
.hero-img-wrap { width: 35%; }
.hero-sub { font-size: 1.25rem; }
.voice-wrap img { width:80px; height:80px; }
.ex-font { font-size: 3.45rem; }
.front-propose-item a { border-radius: 0; border-bottom: 2px solid #fff; }
.return-page a { font-size: 1.3rem; }
.floatnav { bottom: 0; top:inherit; width: 100%; }
a.float-contact { font-size: 1.4rem; margin-top: 4px;}
}

@media screen and (max-width: 575px) {
html { font-size: 70%!important; }
.hero-wrap {
  background-size: 60%,60%,60%,100%;
  height: 40vh;
}
.hero-wrap h1 { font-size: 1.75rem; padding-left: 1.0rem; padding-right: 1.0rem; }
.hero-middle-bg { top: 1%; }
.hero-img-wrap { width: 40%; }
.ex-font { font-size: 2.45rem; }
.hero-sub { font-size: 1.0rem; text-align: left; }
.voice-wrap img { width:65px; height:65px; }
a.haed-title { margin-left: 0; margin-top: 10px; display: block; }
.sm-none { display: none; }
.hero-icon { display:none; }
}
@media screen and (min-width: 770px) {
.md-on { display:none; width: 100px; }
}
@media screen and (min-width: 576px) {
.sm-on { display:none; }
}