@charset "UTF-8";

:root{
  --font-en:"Roboto";

  --font-wht:#fff;
  --font-gry:#C5D0DE;
  --font-blk:#23222F;
  --font-blue:#0068B7;
  --font-orange:#F0840A;
  
  --font-size_min:clamp(10px,1.09375vw,14px);

  --font-size01:clamp(14px,1.25vw,16px);
  --font-size02:clamp(16px,1.5625vw,20px);
  --font-size03:clamp(20px,1.875vw,24px);

  --font-size_large:clamp(24px,2.5vw,32px);
  --font-size_xlarge:clamp(30px,4.21875vw,54px);

  --bk-col-lblue:#F6F9FC;
  --bk-col-blue:#0068B7;
  
}
*{
  box-sizing:border-box;
  max-width:100%;
  margin:0;
  padding:0;
}
html {
  font-family: 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, sans-serif,'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-text-size-adjust: 100%;	
  font-display: swap;
  margin:0;
  padding:0;
}
body {
  font-size:var(--font-size01);
  color: var(--font-blk);
  line-height: 1.8;
  letter-spacing:.05em;
  font-weight: 400;
  hanging-punctuation: allow-end;
  margin: 0;
  padding: 0;
  word-break: break-all;
  overflow-x:hidden;
}
body.hidden{
  overflow:hidden;
  height:100%;
}

.fadein {
	opacity: 0;
	transition: 0.8s ease-out;
}
.fadein.is-show {opacity: 1;}
.fadein_up {
  opacity: 0;
  transform: translate(0, 120px);
  transition: 0.8s ease;
}
.fadein_up.type02 {transform: translate(0, 160px);}
.fadein_up.type03 {transform: translate(0, 200px);}
.fadein_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

p{font-size:var(--font-size01);}
.blue{color:var(--font-blue);}
.r-txt{text-align:right;}
.center{text-align:center;}
.min{font-size:var(--font-size_min);}
.indent{
  padding-left:1em;
  text-indent:-1em;
}

/*ボタン*/
a.btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:clamp(320px,31.25vw,400px);
  height:clamp(60px,6.25vw,80px);
  color:var(--font-wht);
  font-size:var(--font-size02);
  line-height:1;
  font-weight:600;
  letter-spacing:0.25pt;
  text-decoration:none;
  background:#0068B7;
  box-shadow:0 6px 6px rgba(0,0,0,0.1);
  transition:0.4s ease;
  border-radius:40px;
}
a.btn:hover{
  transform:translateY(5px);
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
}
a.btn span{text-align:center;}
a.btn span.min{
  display:block;
  font-size:var(--font-size_min);
  padding-bottom:clamp(5px,0.78125vw,10px);
}
a.btn::after{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  right:clamp(20px,2.343vw,30px);
  display:inline-block;
  width:20px;
  height:20px;
  background:url(../img/icon/arrow-i-blue.svg) center/contain no-repeat;
}

/* 資料ダウンロード */
a.btn.document{background: linear-gradient(90deg, #ebac65, #f0840a);}
a.btn.document::after{
  right:clamp(20px,2.343vw,30px);
  width:20px;
  height:16.89px;
  background:url(../img/icon/download-i.svg) center/contain no-repeat;
}
a.btn.document img{
  position:absolute;
  left:clamp(-50px,-3.906vw,-25px);
  top:50%;
  transform:translateY(-50%);
  margin-top:5px;
  height:clamp(100px,9.375vw,120px);
}

/* 白青反転 */
a.btn.reverse{
  color:var(--font-blue);
  background:#fff;
  border:2px solid #0068B7;
}

/* お問い合わせエリア */
a.btn.document.type02::after{
  width:35px;
  height:35px;
  background:url(../img/icon/download-i02.svg) center/contain no-repeat;
}
a.btn.trial.type02::after{
  width:35px;
  height:35px;
  background:url(../img/icon/trial-i02.svg) center/contain no-repeat;
}
a.btn.contact.type02::after{
  width:35px;
  height:35px;
  background:url(../img/icon/mail-i02.svg) center/contain no-repeat;
}

/*サブボタン*/
a.btn.sub{
  width:clamp(280px,25.781vw,330px);
  height:clamp(50px,4.6875vw,60px);
  color:var(--font-blk);
  font-size:var(--font-size01);
  background:#fff;
  border:1px solid #ccc;
  box-shadow:none;
  border-radius:30px;
}
a.btn.sub:hover{
  color:#fff;
  background:#0068B7;
  transform:translateY(0);
}
a.btn.sub::after{
  right:clamp(15px,1.5625vw,20px);
  width:20px;
  height:20px;
  background:url(../img/icon/arrow-i-blue.svg) center/contain no-repeat,url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
  background-size:cover, 0 0;
  transition:0.2s ease;
}
a.btn.sub:hover::after{
  right:15px;
  background-size:0 0,cover;
}
div.btn-wrap{
  display:flex;
  justify-content:center;
  margin:40px auto 0;
}
div.btn-wrap a + a{margin-left:20px;}

/******************** header ヘッダー********************/
#wrapper{
  margin:0;
  padding:0;
}
header{
  position:relative;
  padding:0;
  background:#fff;
  border-bottom:1px solid #e0e0e0;
  z-index:20;
  transition:0.4s ease;
}
header.is_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  width:100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#header{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:1920px;
  padding:0 15px;
  height:100px;
  margin:0 auto;
  top:0;
  background:#fff;
  z-index:2;
}
a#logo{
  display:block;
  width:clamp(120px,16.6vw,250px);
  height:50px;
  background:#333;
  transition:0.4s ease;
  line-height:1;
  margin:0;
}
a#logo img{
  display:inline-block;
  width:100%;
  vertical-align: bottom;
}
a#logo:hover{opacity:0.7;}

/*ボタン*/
header div.btns{
  display:flex;
  align-items:center;
}
header a.btn.document{
  width:clamp(220px,18.6vw,280px);
  height:60px;
  font-size:clamp(14px,1.06vw,16px);
}
header a.btn.document::after{
  right:25px;
  width:20px;
  height:16.89px;
  background:url(../img/icon/download-i.svg) center/contain no-repeat;
}
header a.btn.document img{
  left:-40px;
  margin-top:5px;
  height:100px;
}

div.tel-wrap{
  display:flex;
  flex-direction:column;
  margin-left:15px;
}
header a.btn.tel{
  width:clamp(180px,13.3vw,200px);
  height:30px;
  font-size:13px;
  font-weight:400;
}
header a.btn.tel::after{
  right:10px;
  width:15px;
  height:15px;
  background:url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
}
header a.btn.tel span{
  position:relative;
  padding-left:26px;
}
header a.btn.tel span::before{
  position:absolute;
  content:"";
  display:inline-block;
  width:16.41px;
  height:12px;
  left:0;
  top:50%;
  transform:translateY(-50%);
  background:url(../img/icon/mail-i.svg) center/contain no-repeat;
}
header a.txt.tel{
  position:relative;
  font-family:var(--font-en);
  color:var(--font-blue);
  font-size:clamp(20px,1.6vw,24px);
  line-height:1;
  padding:2px 0 0 30px;
  margin-top:8px;
  pointer-events:none;
}
header a.txt.tel::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width:24px;
  height:24px;
  background:url(../img/icon/tel-i-blue.svg) center/contain no-repeat;
}

@media screen and (min-width:1025px) {
header.is_fixed{transition:0.4s ease-out;}
}
@media screen and (max-width:1024px) {

#header{
  height:60px;
  padding:0 70px 0 10px;
}  
a#logo{margin:0 auto 0 0;}

/*ボタン*/
header a.btn.document{
  width:200px;
  height:40px;
  transform:translateY(0);
}
header a.btn.document::after{
  right:15px;
  width:15px;
  height:12.67px;
}
header a.btn.document img{
  left:-20px;
  margin-top:0;
  height:60px;
}
div.tel-wrap{margin-left:10px;}

header a.btn.tel{
  width:200px;
  height:40px;
  font-size:14px;
  font-weight:500;
  transform:translateY(0);
}
header a.btn.tel::after{right:15px;}
header a.txt.tel{display:none;}

}
@media screen and (max-width:768px) {

#wrapper{overflow:hidden;}

#header{
  height:50px;
  padding-right:60px;
}

/*ボタン*/
header a.btn.document{
  width:160px;
  height:30px;
  font-size:12px;
  transform:translateY(0);
}
header a.btn.document::after{
  right:12px;
  width:12px;
  height:10.14px;
}
header a.btn.document img{
  left:-10px;
  height:40px;
}
div.tel-wrap{display:none;}

}

/******************** header ヘッダー　ここまで********************/


/********************グローバルメニュー　ここから********************/

nav#pcnav {
  margin:0 auto 0 30px;
  transition: 0.4s ease;
}
nav#pcnav ul {
  display:flex;
  justify-content:center;
  align-items: center;
  margin:0 auto;
  padding:0;
}
nav#pcnav ul li{
  display:flex;
  margin:0;
  padding:0;
}
nav#pcnav ul li + li{margin-left:clamp(10px,1.5625vw,30px);}

nav#pcnav ul li a{
  position: relative;
  display:flex;
  justify-content: center;
  align-items:center;
  width:auto;
  font-size:var(--font-size01);
  line-height: 1;
  font-weight:500;
  letter-spacing:0;
  color: var(--font-blk);
  text-align:center;
  text-decoration: none;
  margin: 0 auto;
  padding:0;
  transition: 0.4s ease;
}
nav#pcnav ul li:hover a,
nav#pcnav ul li.current a{color:#0068B7;}

@media screen and (max-width:1024px) {

nav#pcnav{display:none;}

}

/* ハンバーガーメニュー */
#navigation {display:none;}  

#mobile-head {
  display:inline;
  width: 60px;
  height: 60px;
  position: absolute;
  right:0;
  top:0;
  transition:0.4s ease;
}
#nav-toggle {
  display: none;
  position: relative;
  top:0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  box-sizing: border-box;
  transition:0.2s ease;
  border-left:1px solid #e0e0e0;
  border-right:1px solid #e0e0e0;
}
#nav-toggle div {
  position: absolute;
  top:18px;
  left:15px;
  width:30px;
  height:30px;
}
#nav-toggle span {
display: block;
position: absolute;
height: 3px;
border-radius: 4px;
width: 100%;
background:#23222F;
left: 50%;
transform: translateX(-50%);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#nav-toggle {display: block;}	

/* ハンバーガー */
.open #nav-toggle span{border-radius:0;}
.open #nav-toggle span:nth-child(1) {
left: 1px;
top: 11px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
left: 1px;
top: 11px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* +- */
nav#nav li.child > i{
display: inline-block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height:49px;
line-height: 1;
cursor: pointer;
}
nav#nav li.child > i:before,
nav#nav li.child > i:after{
content: "";
display: inline-block;
position: absolute;
top:24px;
right:15px;
width: 10px;
height: 1px;
background: #0068B7;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
}
nav#nav li.child > i:after{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
nav#nav li.child.open > i:after{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

nav#nav {
  visibility:hidden;
  position: fixed;
  top:101px;
  left:0;
  width:100%;
  height:calc(100vh - 101px);
  transition: 0.2s ease-in-out;
  display: block;
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);  
  opacity:0;
  z-index:1;
}
.open nav#nav {
  visibility:inherit;
  opacity:1;
}
nav#nav ul.menu {
  position:relative;
  display:block;
  margin:0 0 0 auto;
  width:100%;
  max-width:initial;
  height:100%;
  overflow-y: scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
}

nav#nav ul.menu li{
  display:block;
  position:relative;
  padding:0;
}
nav#nav ul.menu li + li{
  margin-left:0;
  border-top:1px solid #E0E0E0;
}

/* 各メニューnav */
nav#nav ul.menu li a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:50px;
  color:#23222F;
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:500;
  line-height:1;
  letter-spacing:0.02em;
  text-align:left;
  text-decoration:none;
  margin:0;
  padding:0 15px;
  transition:0.2s ease;
}

/* arrow */
nav#nav ul.menu li a::after {
position: absolute;
content: "";
display:inline-block;
top: 50%;
right: 18px;
width: 6px;
height: 6px;
border-top: 1.5px solid #070C1A;
border-right: 1.5px solid #070C1A;
transform:translateY(-50%) rotate(45deg);
}
nav#nav ul.menu li.child a::after{display:none;}
nav#nav ul.menu li:hover a,
nav#nav ul.menu li.current a{background:#F6F9FC;}

/* 概要系ページ */
nav#nav ul.menu li.sub_st a{
  position:relative;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-start;
  height:40px;
  font-size:12px;
  background:#f7f7f7;
}
nav#nav ul.menu li.sub_st a:hover{
  opacity:1;
  background:#efefef;
}

@media screen and (max-width:1024px) {

#navigation {display:block;}  
#navigation::before{
  top:60px;
  height:calc(100% - 60px);
}
nav#nav {
  top:61px;
  height:calc(100vh - 61px);
}

}
@media screen and (max-width:768px) {

#navigation::before{
  top:50px;
  height:calc(100% - 50px);
}  
#nav-toggle {
  top:0;
  width: 50px;
  height: 50px;
  border-right:none;
}
#nav-toggle div {
  top:15px;
  left:15px;
  width:20px;
  height:20px;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 9px;}
#nav-toggle span:nth-child(3) {top: 18px;}
#mobile-head {
width: 50px;
height: 50px;
}  
.open #nav-toggle span:nth-child(1),
.open #nav-toggle span:nth-child(3) {
  top: 9px;
  left:0;
}
nav#nav {
  top:51px;
  height:calc(100vh - 51px);
}

}

/********************グローバルメニュー　ここまで********************/


/********************フッター　ここから********************/

div.footer-response{
  position:relative;
  width:calc(100% - clamp(30px,3.125vw,60px));
  padding:clamp(40px,6.25vw,80px) clamp(20px,2.343vw,30px) clamp(20px,3.125vw,40px);
  margin:0 auto;
  background:#0068B7;
  border-radius:10px;
}
div.footer-response::before{
  position:absolute;
  left:-30px;
  bottom:0;
  content:"";
  display:inline-block;
  width:100vw;
  height:50%;
  background:#F6F9FC;
  z-index:-1;
}

div.footer-response div.head{
  position:relative;
  width:calc((100% - 40px) / 2);
  padding-bottom:40px;
}
div.footer-response div.head h2{
  color:#fff;
  font-size:clamp(28px,4.16vw,32px);
  font-weight:600;
  line-height:1.5;
}
div.footer-response div.head h2 + p{
  color:var(--font-wht);
  padding-top:15px;
}
div.footer-response div.tel-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid #fff;
}
div.footer-response div.tel-info p{
  color:var(--font-wht);
  font-size:clamp(10px,1.09375vw,14px);
}
div.footer-response div.tel-info span.tel-number{
  position:relative;
  font-family:var(--font-en);
  padding-left:30px;
  color:#fff;
  font-size:clamp(24px,2.5vw,32px);
  line-height:1;
}
div.footer-response div.tel-info span.tel-number::before{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  left:0;
  display:inline-block;
  width:24px;
  height:24px;
  background:url(../img/icon/tel-i-wht.svg) center/contain no-repeat;
}

/* 3カラムメニュー */
div.footer-response div.response-nav{
  display:flex;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
  overflow:hidden;
}
div.footer-response div.response-nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:calc(100% / 3);
  min-height:200px;
  color:var(--font-blk);
  padding:30px 50px 30px 30px;
  transition:0.4s ease;
}
div.footer-response div.response-nav a::after{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  right:15px;
  display:inline-block;
  width:20px;
  height:20px;
  background:url(../img/icon/arrow-i-blue.svg) center/contain no-repeat;
}
div.footer-response div.response-nav a + a::before{
  position:absolute;
  content:"";
  top:0;
  left:0;
  display:inline-block;
  width:1px;
  height:100%;
  background:#e0e0e0;
}
div.footer-response div.response-nav a span.heading{
  position:relative;
  font-size:var(--font-size02);
  font-weight:600;
  line-height:1;
  padding-left:40px;
  transition:0.4s ease;
}
div.footer-response div.response-nav a p{
  font-size:14px;
  padding-top:15px;
}

div.footer-response div.response-nav a span.heading::before{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  left:0;
  display:inline-block;
}
div.footer-response div.response-nav a span.heading.trial::before{
  width:23.62px;
  height:20px;
  background:url(../img/icon/trial-i-blue.svg) center/contain no-repeat;
}
div.footer-response div.response-nav a span.heading.document::before{
  width:23.68px;
  height:20px;
  background:url(../img/icon/download-i-blue.svg) center/contain no-repeat;
}
div.footer-response div.response-nav a span.heading.contact::before{
  width:27.35px;
  height:20px;
  background:url(../img/icon/mail-i-blue.svg) center/contain no-repeat;
}
div.footer-response div.response-nav a:hover{background:#F6F9FC;}
div.footer-response div.response-nav a:hover span.heading{color:var(--font-blue);}

div.footer-response ul.sub-link{
  display:flex;
  margin-top:10px;
}
div.footer-response ul.sub-link li + li{margin-left:20px;}
div.footer-response ul.sub-link li a{
  position:relative;
  color:var(--font-wht);
  font-size:var(--font-size01);
  font-weight:500;
  line-height:1;
  padding-right:21px;
}
div.footer-response ul.sub-link li a::after{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  margin-top:1px;
  right:0;
  display:inline-block;
  width:16px;
  height:16px;
  background:url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
}
div.footer-response ul.sub-link li a:hover{text-decoration:underline;}

@media screen and (max-width:1024px){

div.footer-response div.head{
  width:450px;
  padding-bottom:300px;
}  
/* 3カラムメニュー */
div.footer-response div.response-nav{
  flex-wrap:wrap;
  justify-content:space-between;
  background:none;
  border-radius:0;
  box-shadow:none;
}
div.footer-response div.response-nav a{
  width:calc((100% - 20px)/2);
  min-height:150px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
div.footer-response div.response-nav a:nth-child(3){margin-top:20px;}
div.footer-response div.response-nav a + a::before{display:none;}

}
@media screen and (max-width:768px){

div.footer-response{
  width:100%;
  border-radius:0;
}
div.footer-response::before{display:none;}
div.footer-response div.response-nav{flex-direction:column;}
div.footer-response div.response-nav a{
  width:100%;
  min-height:120px;
  padding:25px 40px 20px 20px;
  margin-top:10px;
}
div.footer-response div.response-nav a:nth-child(3){margin-top:10px;}

}
@media screen and (max-width:480px){

div.footer-response div.tel-info{
  flex-direction:column;
  align-items:flex-start;
}
div.footer-response div.tel-info p{font-size:14px;}
div.footer-response div.tel-info span.tel-number{
  font-size:32px;
  margin-top:10px;
}

}

#footer{
  padding:clamp(50px,5.208vw,100px) 20px 20px;
  background:#F6F9FC;
}
#footer div.contents{
  display:flex;
  justify-content:flex-start;
  width:1280px;
  margin:0 auto;
}
#footer div.info,
#footer div.nav{width:50%;}

#footer div.info a.flogo{
  font-family:var(--font-en);
  color:var(--font-blk);
  font-size:28px;
}
#footer div.info a.flogo + p{margin-top:5px;}

#footer div.info a.blank-i{
  position:relative;
  color:var(--font-blue);
  font-weight:500;
  padding-right:20px;
}
#footer div.info a.blank-i::after{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  right:0;
  transform:translateY(-50%);
  margin-top:2px;
  width:16px;
  height:16px;
  background:url(../img/icon/blank-i.svg) center/contain no-repeat;
}
#footer div.info a.blank-i:hover{text-decoration:underline;}

#footer div.nav{
  display:flex;
  justify-content:flex-start;
}
#footer div.nav nav + nav{margin-left:50px;}
#footer div.nav nav ul li + li{margin-top:clamp(15px,2.929vw,30px);}
#footer div.nav nav ul li a{
  color:var(--font-blk);
  font-size:var(--font-size02);
  line-height:1;
  font-weight:500;
  transition:0.2s ease;
}
#footer div.nav nav ul li a:hover{color:var(--font-blue);}

#footer div.nav nav ul.sub li{margin-top:clamp(10px,1.464vw,15px);}
#footer div.nav nav ul.sub li a{
  color:var(--font-blk);
  font-size:var(--font-size01);
  font-weight:400;
}
#footer div.nav nav ul.sub li a:hover{text-decoration:underline;}

#copyright{
  width:1280px;
  color:var(--font-blk);
  font-size:14px;
  text-align:right;
  border-top:1px solid #23222F;
  padding-top:15px;
  margin:clamp(50px,5.208vw,100px) auto 0;
}

@media screen and (max-width:1024px) {

#footer div.contents{flex-direction:column-reverse;}
#footer div.info{margin-top:30px;}
#footer div.info,
#footer div.nav{width:auto;}
#footer div.nav{flex-direction:column;}
#footer div.nav nav + nav{margin:clamp(15px,2.929vw,30px) 0 0;}

}

/* 共通パーツ ここから */
div.area{
  padding-left:15px;
  padding-right:15px;
  margin:clamp(50px,9.765vw,75px) auto 0;
}
div.area:last-child{margin-bottom:clamp(50px,9.765vw,75px);}
div.area.col{
  background:#F6F9FC;
  padding-top:clamp(50px,9.765vw,75px);
  padding-bottom:clamp(50px,9.765vw,75px);
}
div.area.overflow{overflow:hidden;}
div.contents{
  width:1280px;
  margin:0 auto;
}
div.contents.w-adjust{width:1000px;}
div.area.full{
  width:1920px;
  padding:0;
}
div.full div.contents{width:100%;}

/* h2 */
div.area span.en{
  display:block;
  font-family:var(--font-en);
  color:var(--font-blue);
  font-size:var(--font-size02);
  font-weight:600;
  text-align:center;
}
div.area h2{
  position:relative;
  color:var(--font-blk);
  font-size:var(--font-size_large);
  line-height:1.5;
  font-weight:600;
  text-align:center;
  margin:0 auto;
  padding:0;
}
div.area h2 + p{margin-top:0.5rem;}
div.area h2 + p.h2-read{text-align:center;}
div.area h2 + div,
p.h2-read + div,
div.area h2 + table{margin-top:40px;}

div.area h2.wht{color:#fff;}

h3{
  font-size:var(--font-size03);
  line-height:1.5;
  font-weight:600;
}
br.br768,
br.br480,
br.br1024{display:none;}

/* お問い合わせエリア */
div.area.response{
  margin-top:0;
  background:#0068B7;
}
div.area:has( + div.response){padding-bottom:140px;}
div.area.response + div.area.col{margin-top:0;}

div.response-wrap{
  position:relative;
  top:-40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
div.response-wrap div.box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:calc((100% - 40px)/2);
  padding:0 20px clamp(20px,3.906vw,40px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}

div.response-wrap div.box::before{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  content:"";
  display:inline-block;
  width:80%;
  height:8px;
  border-radius:4px;
  background:#333;
}
div.response-wrap div.img{
  position:relative;
  margin-top:-40px;
  height:250px;
}
div.response-wrap div.img img{max-height:100%;}
div.response-wrap div.box h3{
  font-size:clamp(20px,2.5vw,32px);
  font-weight:600;
  line-height:1;
  text-align:center;
  padding-top:15px;
}
div.response-wrap div.box p{
  text-align:center;
  line-height:2;
  padding-top:10px;
}
div.response-wrap div.box a{
  width:480px;
  margin:20px auto 0;
}

/* 3分でわかるサンシスコンPBX */
div.response-wrap div.box.document::before{background:#F0840A;}
div.response-wrap div.box.document h3{color:var(--font-orange);}

/* 無料トライアル */
div.response-wrap div.box.trial::before{background:#0068B7;}

/* お問い合わせ */
div.response-wrap div.box.contact{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  width:100%;
  min-height:250px;
  padding:0 clamp(20px,3.125vw,40px);
  margin-top:40px;
}
div.response-wrap div.box.contact::before{display:none;}
div.response-wrap div.box.contact div.img{
  margin-top:10px;
  height:150px;
}
div.response-wrap div.box.contact div.txt{
  margin-left:clamp(10px,3.125vw,40px);
  margin-right:auto;
}
div.response-wrap div.box.contact h3{
  text-align:left;
  padding-top:0;
}
div.response-wrap div.box.contact p{text-align:left;}
div.response-wrap div.box.contact a{
  width:clamp(360px,37.5vw,480px);
  margin:0;
}

@media screen and (max-width:1024px){

div.response-wrap{
  flex-direction:column;
  width:640px;
  margin-left:auto;
  margin-right:auto;
}
div.response-wrap div.box{width:100%;}
div.response-wrap div.box + div.box{margin-top:40px;}

div.response-wrap div.img{
  margin-top:-20px;
  width:clamp(300px,52.083vw,400px);
  height:auto;
}
div.response-wrap div.box p{text-align:left;}

/* お問い合わせ */
div.response-wrap div.box.contact{
  flex-direction:column;
  min-height:initial;
  padding:0 20px clamp(20px,3.906vw,40px);
}
div.response-wrap div.box.contact::before{
  display:inline-block;
  background:#0068B7;
}
div.response-wrap div.box.contact div.img{
  margin-top:-20px;
  height:auto;
}
div.response-wrap div.box.contact h3{
  text-align:center;
  padding-top:15px;
}
div.response-wrap div.box.contact div.txt{margin-left:auto;}

div.response-wrap div.box.contact a{
  width:480px;
  margin-top:20px;
}

}

/* 比較表 */
table.comparison-table{
  position:relative;
  width:1280px;
  max-width:initial;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  margin:20px auto;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}
table.comparison-table tr + tr td{border-top:1px solid #e0e0e0;}

table.comparison-table tr th,
table.comparison-table tr td{
  font-size:var(--font-size01);
  font-weight:600;
  line-height:1.5;
  text-align:center;
  padding:30px 10px;
}
table.comparison-table tr th:first-child{background:none;}
table.comparison-table tr th:last-child{border-radius:0 10px 0 0;}

table.comparison-table tr td img{
  position:relative;
  display:block;
  max-width:28px;
  margin:0 auto;
}
table.comparison-table tr td img.mb10{margin-bottom:10px;}

/* サンシスコン */
table.comparison-table tr th.sunsyscon{
  position:relative;
  color:#fff;
  font-size:clamp(18px,1.875vw,24px);
  background:#0068B7;
}
table.comparison-table tr th span.crown{position:relative;}
table.comparison-table tr th.sunsyscon::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:-20px;
  left:0;
  width:100%;
  height:20px;
  border-radius:20px 20px 0 0;
  background:#005391;
  z-index:1;
}
table.comparison-table tr td.sunsyscon{
  position:relative;
  color:#fff;
  font-size:clamp(18px,1.875vw,24px);
  text-align:left;
  padding-left:clamp(60px,6.25vw,80px);
  background:#0068B7;
  border-color:#005391;
}
table.comparison-table tr td.sunsyscon::after{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  left:clamp(15px,2.343vw,30px);
  width:30px;
  height:30px;
  background:url(../img/icon/check-i.svg) center/contain no-repeat;
}
table.comparison-table tr td.sunsyscon.min{font-size:var(--font-size01);}
table.comparison-table tr:last-child td.sunsyscon::before{
  position:absolute;
  content:"";
  display:inline-block;
  bottom:-20px;
  left:0;
  width:100%;
  height:20px;
  border-radius:0 0 20px 20px;
  background:#0068B7;
  z-index:1;
}

@media screen and (max-width:1024px){

table.comparison-table{
  width:1080px;
  margin:10px auto;
}
table.comparison-table tr th.sunsyscon::before{
  top:-10px;
  height:10px;
}
table.comparison-table tr:last-child td.sunsyscon::before{
  bottom:-10px;
  height:10px;
}

}

/* 料金表 */
table.plan-table{
  position:relative;
  width:1280px;
  max-width:initial;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:10px;
  background:#fff;
  margin:40px auto 0;
}
table.plan-table tr + tr{padding-left:10px;}

table.plan-table tr th,
table.plan-table tr td{
  font-size:var(--font-size01);
  font-weight:600;
  line-height:1.5;
  text-align:center;
  padding:20px 10px;
  border-radius:10px;
}
table.plan-table tr th{
  position:relative;
  color:#fff;
  font-size:clamp(18px,1.875vw,24px);
}
table.plan-table tr th span.min{
  display:block;
  font-size:var(--font-size_min);
  font-weight:500;
  line-height:1.3;
  padding-top:0.1em;
}
table.plan-table tr th:nth-child(1){
  color:var(--font-blk);
  background:#F8F8FA;
}
table.plan-table tr th span.label{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  width:120px;
  height:30px;
  color:var(--font-wht);
  font-size:12px;
  font-weight:500;
  line-height:1;
  background:#23222F;
  border-radius:15px;
}
table.plan-table tr th span.label::before{
  position:absolute;
  content:"";
  display:inline-block;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top:8px solid #23222F;
}
table.plan-table tr:nth-child(odd) td{background:#F6F9FC;}
table.plan-table tr td:first-child{background:#F8F8FA;}
table.plan-table tr:nth-child(even) td:first-child{background:none;}

table.plan-table tr td span.fee{
  font-family:var(--font-en);
  font-size:var(--font-size_xlarge);
  letter-spacing:0;
  line-height:1;
}
table.plan-table tr td span.jpy{
  font-size:clamp(24px,2.5vw,32px);
  font-weight:900;
  line-height:1;
  padding-left:0.25em;
}
table.plan-table tr td span.min{
  display:block;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  padding-top:1em;
}
table.plan-table tr td span.firstpay{
  font-family:var(--font-en);
  font-size:28px;
  padding-right:0.2em;
}

table.plan-table tr th:nth-child(2){background:#4F9FDB;}
table.plan-table tr td:nth-child(2) span.fee{color:#4F9FDB;}
table.plan-table tr th:nth-child(3){background:#0068B7;}
table.plan-table tr td:nth-child(3) span.fee{color:#0068B7;}
table.plan-table tr th:nth-child(4){background:#005391;}
table.plan-table tr td:nth-child(4) span.fee{color:#005391;}

@media screen and (max-width:1024px){

table.plan-table{width:clamp(864px,105.468vw,1080px);}  
br.br1024{display:inline;}

}

@media screen and (max-width:768px){

br.br768{display:inline;}
br.br768-non{display:none;}

}

@media screen and (max-width:480px){

br.br480{display:inline;}
br.br480-non{display:none;}

}

/* スライダースタイル */
div.slider-wrap > div{position:relative;}
div.slider-wrap{margin:0 auto;}
div.slider-wrap div.swiper-wrapper{
  display:flex;
  justify-content:space-between;
  margin:0 auto;
}
div.slider-wrap .swiper-slide {
  position:relative;
  display:block;
  transition:0.4s ease;
}

/* swiper 全体スタイル */
.swiper-android .swiper-slide, .swiper-wrapper {transform: translate3d(0px, 0, 0)}
.swiper-pointer-events {touch-action: pan-y;}
.swiper-pointer-events.swiper-vertical {touch-action: pan-x;}
.swiper-slide {
  flex-shrink: 0;
  position: relative;
  transition-property: transform;
}
.swiper-button-lock {display: none}

/* ネーション（ドット） */
.swiper-pagination {
  position:relative;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0, 0, 0);
  margin-top:30px;
}
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  transition:0.2s ease;
}
.swiper-pagination-bullet {
  display: inline-block;
  border-radius: 50%;
  background: #efefef;
}
.swiper-pagination-bullet + .swiper-pagination-bullet{margin-left:10px;}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer}
.swiper-pagination-bullet:only-child {display: none !important}
.swiper-pagination-bullet-active {
  opacity: 1;
  width:32px;
  background:#0068B7;
  border-radius:8px;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity:0;
    cursor: auto;
    pointer-events: none
}
/* 前後ボタン */
.swiper-button-next,
.swiper-button-prev {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
}
.swiper-button-prev {
  left:-100px;
  background:url(../img/icon/slide-l.svg) center/contain no-repeat;
}
.swiper-button-next {
  right:-100px;
  background:url(../img/icon/slide-r.svg) center/contain no-repeat;
}

.sp-slide{margin:0 auto;}
.sp-slide .swiper-pagination,
.sp-slide .swiper-button-next,
.sp-slide .swiper-button-prev{display:none;}

@media screen and (max-width:1024px){

.sp-slide{width:330px;}  
.sp-slide .swiper-pagination,
.sp-slide .swiper-button-next,
.sp-slide .swiper-button-prev{display:block;}  

/* 前後ボタン */
.swiper-button-next,
.swiper-button-prev {
  top:auto;
  bottom:0;
  transform:translateY(0);
  width:30px;
  height:30px;
}
.swiper-button-prev {left:0;}
.swiper-button-next {right:0;}

}


/******* モーダル *****/
.modal-box {
  position: fixed;
  z-index:40;
  display: none;
  width: 1000px;
  max-width: 870pt;
  height: 82vh;
  max-height: 55pc;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 40px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  overflow-y: scroll;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index:30;
  display: none;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-box.option-type {
  width:330px;
  height:250px;
  padding:20px;
  text-align:left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  overflow-y:visible;
}
.modal-box.option-type p{
  font-size:14px;
  line-height:2;
}
.modal-box.option-type span.modal-close {
  position:absolute;
  top:-12px;
  right:-12px;
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-weight:600;
  border-radius:15px;
  padding-left:2px;
  background:#C5D0DE;
  cursor:pointer;
}


@media screen and (max-width:1024px) {

  .modal-box {
    width: 94%;
    padding: 40px 20px
  }

}

@media screen and (max-width:480px) {
  .modal-box {
    top: 70px;
    width: 90%;
    height: 82vh;
    padding:30px 10px 10px;
  }

}