@charset "UTF-8";

/* Reset */
* {box-sizing: border-box;}
ul {list-style:none;}
ul,li {margin:0; padding:0;}
a {color:#0d97ff; text-decoration:none; outline:none;}
p a {text-decoration:underline;}
img {vertical-align:middle;}
p,dl,dt,dd {margin:0;}
figure {margin:0;}
h1,h2,h3,h4,h5,h6 {margin:0;}
address,caption,em,th {font-style:normal;}
img {width:100%; height:auto;}

/* --------------------------------------------------
	ベース
-------------------------------------------------- */
html {background-color:#fff; color:#333; font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.5; height:100%; scroll-padding-top: 120px;}
body.fixing-body {position: fixed; width: 100%; height: 100%;}
/* --------------------------------------------------
	共通
-------------------------------------------------- */
/* SP-ONLY,PC-ONLY  */
.pc_only {display:none;}

/* ボタン1  */
.btn01 a {display:inline-block; background-color:#f12545; width:80vw; color:#fff; font-size:1em; padding:1.9em 0; text-align:center;border-radius: 50px;box-shadow: 0 0 8px rgba(0,0,0,0.3);text-shadow: none;line-height: 120%; font-weight: bold; border: 1px solid transparent;
background: -moz-linear-gradient(right, #f12545, #F9739C); 
background: -webkit-linear-gradient(right, #f12545, #F9739C); 
background: linear-gradient(to right, #f12545, #F9739C);  }

/* ボタン2  */
.btn02 a {display:inline-block; background-color:#0d97ff; width:80vw; color:#fff; font-size:1em; padding:1.9em 0; text-align:center;border-radius: 50px;box-shadow: 0 0 8px rgba(0,0,0,0.3);text-shadow: none;line-height: 120%; font-weight: bold; border: 1px solid transparent;
background: -moz-linear-gradient(right, #0d97ff, #63b8f7); 
background: -webkit-linear-gradient(right, #0d97ff, #63b8f7); 
background: linear-gradient(to right, #0d97ff, #63b8f7); }

.btn0222 a {display:inline-block; background-color:rgba(255,255,255,0.8); width:82vw; color:#112952; font-size:1.1em; padding:1.4em 0; text-align:center;border-radius:6px;box-shadow: 0 0 8px rgba(0,0,0,0.3);text-shadow: none; line-height: 100%; font-weight: 600; border: none;border: 1px solid #112952; position: relative; }
.btn0222 a:hover {color:#112952; background:rgba(242, 250, 252,0.95);}
.btn0222 a:after {content: "";margin: auto;position: absolute;top: 0;bottom: 0;right: 8%;width: 10px;height: 10px;border-top: 3px solid #112952;border-right: 3px solid #112952;transform: rotate(45deg);transition: .3s;}
.btn0222 a:hover:after {right: 16px;}

@media all and (max-width: 374px) {
	.btn0222 a {font-size:1em;}
	.btn0222 a:after {right: 6%;}
}

/* ボタン3  */
.btn03 a {display:inline-block; border:1px solid #000; width:48vw; color:#333; font-size:2.5vw; padding:1.75em 0; text-align:center;}

/* Flexboxレイアウト */
.flex {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;/*-webkit-justify-content: space-between; justify-content:space-between;*/}

section h2::after {content: '';width: 33px;display: block;margin: 8% 0 30px;margin: 25px auto 30px;border-radius: 6px;background-color: #ff7043;height: 6px;position: relative;bottom: -3px;}

/* マーカー */
.uline01 {color: #fff7b3;text-decoration-line: underline;text-underline-offset: 5px;text-decoration-thickness: 2px;text-decoration-style:dotted;}

/* --------------------------------------------------
	ヘッダ
-------------------------------------------------- */
/* ヘッダー */
#header {width:100%; position:fixed; top:0; left:0; transition: all 0.25s ease; z-index:100;
background: -moz-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 100%);
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 100%);
}
#header h1 {font-size:1px; /*width:32vw;*/width:40vw; margin:0 auto; padding:6vw 0 2vw;}

/* メニュートグル＆ハンバーガーアイコン */
.drawer_toggle {position:absolute; /*top:3.3vw;*/top:6.8vw; right:5vw; font-size:2vw; color:#fff; width:4.5em; height:calc(3vw + 12px + 1em); cursor:pointer;} 
.drawer_toggle span {display:block; position:absolute; left:1.5vw;}
.drawer_toggle span,.drawer_toggle span:before,.drawer_toggle span:after {content:""; position:absolute; width:5.5vw; height:2px; background-color:#fff; transition: all 0.25s ease;}
.drawer_toggle span:before {top:calc(1.5vw + 2px);}
.drawer_toggle span:after {top:calc(3vw + 4px);}
.drawer_toggle:after {position:absolute; bottom:0; left:0; display:block; width:100%; text-align:center; content:"MENU"; letter-spacing:0.1em;}

/* メニュートグル＆クローズアイコン */
.open .drawer_toggle span,.open .drawer_toggle span:before,.open .drawer_toggle span:after {width:auto; height:auto; top:0;}
.open .drawer_toggle span {top:2vw; width:6vw; height:2px; 
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.open .drawer_toggle span:after {content:""; display:block; width:100%; height:100%; background-color:inherit;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.open .drawer_toggle:after {content:"CLOSE";}

#header.is-fixed {background-color:rgba(0, 95, 197,0.99); /*box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);*/ padding: 0 0 3%;}
#header.open {height:100%; background-color:#aaa;}
#header .lang {display: none;}
/* --------------------------------------------------
	Gナビ
-------------------------------------------------- */
#gNavi {display:none; position:fixed; margin-top:calc(3vw + 12px + 1em + 8vw); top:0; left:0; width:100%; height:100%; overflow-y:auto; text-align:center;}
#gNavi li a {display:block; color: #fff; font-size:4.375vw; padding:1.5em 0; font-weight: bold;}
#gNavi .copyright {color:#000; font-size:2.8vw; padding-top:3em; padding-bottom:10em;}
.is-fixed #gNavi li a {color:#fff !important;}

/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
#backToTop {position:fixed; right:20px; bottom:-100px; line-height:1; cursor:pointer; z-index:90; background-color:rgba(241,37,69,0.9); padding:14px 14px 11.5px; text-align:center; color:#fff; font-size:14px; border-radius:50%; transition: all 0.5s ease;}
#backToTop .angle-up {display:block; width:25px; height:25px; border-top:1px solid #fff; border-left:1px solid #fff; margin:0 auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
#backToTop em {display:block; margin-top:-7px;}

/* --------------------------------------------------
	フッター
-------------------------------------------------- */
#footer {background-color:#eee; text-align:center; padding: 0 0 4vw;}
#footer h1 {width:40vw; margin:0 auto; padding:6.25vw 0;}
#footer ul {border-top:none;}
#footer li {font-size:3.8vw;}
#footer li a {display:block; color:#666; padding:1.5em 0; border-bottom:none;}
#footer .copyright {color:#666; foznt-size:2.5vw; padding:2em 0;}

/* --------------------------------------------------
	FIRST VIEW
-------------------------------------------------- */
#firstview {background-size:cover; background-position:top; background-repeat:no-repeat; padding:28vw 0 34vw; margin-bottom:0; color:#fff; text-align:center; position: relative;}
#firstview.ht02 {background-image:url("../images2/mv07c_sp.jpg");}
/*bg暗く*/	
#firstview.ht02:before{background-color: rgba(107, 83, 55, 0.135);position: absolute;top: 0;right: 0;bottom: 0;left: 0;content: ' ';}
#firstview .inner {position: relative;margin: 0 auto;width: 100%;height: 100%;}
#firstview .fv { /*padding: 10vw 0 0;*/}
#firstview .catch {width: 94%; margin:0 auto; line-height:220%; font-weight:600; font-size:0.86em; letter-spacing: .05em; color: #041730 !important;
/*text-shadow:1.0px 1.0px 0 rgba(225,225,225,1.0),-1.0px 1.0px 0 rgba(225,225,225,1.0),1.0px -1.0px 0 rgba(225,225,225,1.0),-1.0px -1.0px 0 rgba(225,225,225,1.0);*/
}

#firstview h2:after{content: none;} 
#firstview .catch.nosdw {/*text-shadow:none; color:#203142;*/}
#firstview .catch span{display: block;} 	
#firstview .catch .c01 {font-size:1.68em; text-align: center; padding: 0 0 1%; -webkit-text-stroke: 2px rgba(225,225,225,1.0); text-stroke: 2px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c02 {font-size:1.585em; text-align: center; padding: 0 0 1%;font-feature-settings: "palt"; -webkit-text-stroke: 2px rgba(225,225,225,1.0); text-stroke: 2px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c03 {font-size:1.24em; text-align: center; padding: 0; margin: 0; -webkit-text-stroke: 2px rgba(225,225,225,1.0); text-stroke: 2px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c05 { color: #F0531F;font-size:1.585em; padding: 0 0.6%; font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight:500;font-style: normal;  -webkit-text-stroke: 2px rgba(225,225,225,1.0); text-stroke: 2px rgba(225,225,225,1.0); paint-order: stroke;}


@media all and (max-width: 374px) {
#firstview .catch .c01 {font-size:1.36em;}
#firstview .catch .c02 {font-size:1.36em;}
}
@media all and (min-width: 375px) and (max-width: 389px) {
#firstview .catch .c01 {font-size:1.6em;}
#firstview .catch .c02 {font-size:1.6em;}
}
/*バックスラッシュ
#firstview .catch .c01 {display: flex;justify-content: center;align-items: center;position: relative;}
#firstview .catch .c01:before,
#firstview .catch .c01:after {content: "";width: 20px;height: 1.5px;background-color: #005fc5;margin: 0px 0px 0px;}
#firstview .catch .c01:before {transform: rotate(60deg);}
#firstview .catch .c01:after {transform: rotate(-60deg);}*/

#firstview .fv .btn01{ margin-top: 4vw;}

#firstview .fv ul { margin: 4vw auto 4vw; font-size:2.5vw; text-align:center; -webkit-justify-content:center; justify-content:center; position: relative;}
#firstview .fv li {display:flex; width:calc(94%/3); line-height:1.35; position:relative;padding: 1% 1%; margin: 0.4%;align-items: center; -webkit-align-items: center; -webkit-justify-content:center; justify-content:center;text-shadow:none; letter-spacing: 0.05em; border-radius: 50px;font-size: 1.4em;}

#firstview .fv li.nvy {background: rgba(0, 95, 196, 0.8); color: #fff; font-feature-settings: "palt";}

#firstview .mv01 picture{ display: block; width: 28%; position: absolute; left: 35%; top:104%;}
#firstview .batch picture{ display: block; width: 36%; position: absolute; left: 60%; top:114%; z-index: 1;transform: rotate(2deg);}

/* --------------------------------------------------
	ぐるかむエンタープライズとは？
-------------------------------------------------- */
#what {text-align:center; margin-bottom:0; color: #fff; padding: 30vw 0 0;
  background: linear-gradient(-45deg, #ABE9CD, #3EADCF, #0094d3);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  /*height: 100vh;*/
/*background: linear-gradient(-45deg, #ABE9CD, #3EADCF, #00a2d3, #0094d3);*/}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#what h2 {font-size:7.8vw; line-height:1.2; margin:0; font-weight: 600;}
#what h2 em { font-weight: 100;}
#what h2 span {display:block; font-size:0.6em; font-weight:normal; letter-spacing:0.2em; margin-top:0.6em;}
#what .logo {width:53vw; margin:0 auto 6.25vw;}
#what p {text-align:center;display:inline-block; padding-top:0;  font-size:4.2vw; line-height:1.85; margin-bottom:3em;}
.chart {width:87vw; margin:0 auto 8vw;}

/* --------------------------------------------------
	使い方は、無限大∞。
-------------------------------------------------- */
#infinity {text-align:center; margin-bottom:10vw; padding: 10vw 0; background: rgba(242, 250, 252,1.0);}
#infinity h2 {font-size:4.7vw; line-height:1.2; margin-bottom:2em;}
#infinity h2 em {font-size:0.83em;}
#infinity h2 span {display:block; font-size:1.5em; letter-spacing:0.1em; margin-top:0.3em;}
#infinity figure {width:40vw; margin:0 auto 6.25vw;}
#infinity figcaption{ display: block; width: 100%; font-size: 0.8em; line-height: 160%; text-align: center; max-width: 255px;}
#infinity figcaption span{  display: block; width: 100%; ffont-size: 1.2em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;}

#infinity p {font-size:3.8vw; line-height:1.55; margin-bottom:0.75em;}
#infinity ul {font-size:0; margin-top:7vw;}
#infinity li {display:inline-block; margin:0 1.875vw;}
#infinity li img {width:auto; height:8.28vw;}

/* --------------------------------------------------
	利用実績
-------------------------------------------------- */
#usage {text-align:center; margin:10vw 0 8vw; padding: 10vw 0; background: url("../images2/bg_riyou2.jpg"); background-repeat: no-repeat; background-size: cover;color: #fff; overflow: hidden;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight:400;font-style: normal;}
#usage h2 {font-size:4.7vw; line-height:1.2; margin-bottom:2em;}
#usage h2 span {display:block; font-size:1.5em; letter-spacing:0.1em; margin-top:0; font-feature-settings: "palt"}
#usage p.lead{margin-bottom: 10%;letter-spacing: 0.06em; padding: 0 10%;}	
#usage .usage_box_wrap {display: flex;justify-content: space-around; align-items:flex-start; width:92%; flex-wrap: wrap; margin: auto;}
#usage .usage_box {display: block; width: calc(92%/2);}	
#usage .usage_box h4 {font-size: 0.975em; font-weight: 500; letter-spacing: 0.04em;margin-bottom: 1.4%;}	
#usage .usage_box h5 {display: block; border-radius: 50px; width: 100%; padding: 0.4%; background-image: linear-gradient(143deg, rgba(4, 60, 83, 1), rgba(5, 64, 89, 1)); font-size: 0.8em;margin-bottom: 1.4%; font-weight: 500;letter-spacing: 0.04em;}
#usage .usage_box h5 em{font-size: 1.5em;font-family: "Cabin Condensed", sans-serif;font-weight: 600;font-style: normal;}
#usage .usage_box h6 {font-size: 0.8em;margin-bottom: 1.4%; font-weight: 500;letter-spacing: 0.04em;}
#usage .usage_box h6 em{font-size: 1.875em;font-family: "Cabin Condensed", sans-serif;font-weight: 600;font-style: normal;}	
#usage .usage_box h6 span{border-bottom: 1px solid rgba(255,255,255,0.9); padding-bottom: 1%;}	
#usage .usage_box p.exp { font-size: 0.75em;margin-bottom: 8%;letter-spacing: 0;font-feature-settings: "palt"}
#usage .usage_box figure{width: 80%; margin: auto;}	

/* --------------------------------------------------
	サービスの信頼性
-------------------------------------------------- */
#trust {text-align:center; margin:0; padding:0;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight:400;font-style: normal;}
#trust .inner{text-align:center; margin:0 0 8vw; padding:4vw 8%; background:rgba(220, 237, 241, 1.0);}	
#trust h2{width:100%; font-size:4.7vw; margin-top:30px; margin-bottom:0; text-align:center; letter-spacing: 0.18em;background: linear-gradient(transparent 35%, rgba(220, 237, 241,1.0) 35%); }
#trust h2 span {font-size:1.4em; margin-top: 2vw}
#trust h2::after{ margin: 25px auto 0 !important;}
#trust p.lead{margin-bottom: 1%;letter-spacing: 0.06em; padding: 0;font-weight: 500; }
#trust p.lead em{font-size: 1em;}
#trust h3{ font-weight: 500;}
#trust h3 em{ font-size: 1.5em; color: #ee7950;font-family: "Cabin Condensed", sans-serif;font-weight: 500;font-style: normal;letter-spacing: 0.02em;}
#trust h3 span{ padding: 0 .4%; background: linear-gradient(transparent 50%, rgba(125, 255, 183,0.2) 50%); letter-spacing: 0.08em; display: inline-block;}
#trust figure{ width: 94%;  margin:4% auto 0;}	

/* --------------------------------------------------
	ご利用に必要なもの。
-------------------------------------------------- */
#mainfunctions2 {text-align:center;  padding: 6vw 0; }
#mainfunctions2 .inner{ width: 100%; margin: 0 auto 10vw;}

#mainfunctions2 h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#mainfunctions2 h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}

#mainfunctions2 .flex{ width: 100%; margin: 8% auto 5%}
#mainfunctions2 .flex li{display: block; width: calc(88%/3); margin: 0 2%; text-align: center; align-items: center; justify-content: center; box-shadow:0 0 8px rgba(0,0,0,0.1);border-radius: 6px; padding: 4% 2% 16%; position: relative;}
#mainfunctions2 .flex li h4{ display: block; margin: 0 0 2vw; color: #1d4b82; font-size: 110%;}
#mainfunctions2 .flex li h4:after{content: '';width: 18px;display: block;margin: 25px auto 30px;border-radius: 6px;background-color:#ff7043;height: 6px;position: relative;}
#mainfunctions2 .flex li:first-child figure{ width: 60%; height: auto; margin: 1vw auto 8%;}
#mainfunctions2 .flex li:nth-child(2) figure{ width: 90%; height: auto; margin: 3vw auto 8%;}
#mainfunctions2 .flex li:last-child figure{ width: 60%; height: auto; margin: 4vw auto 8%;}

#mainfunctions2 .flex li ul.sub92{ width: 100%; margin: 0 auto; display: block;}
#mainfunctions2 .flex li ul.sub92 li{ display: inline-block; border-radius: 4px; background:none; color: #fff; padding: 0% 1%; margin: 0 2%; width: 40% !important;font-size: 80%; box-shadow: none; background-color:#56a4ff;}
#mainfunctions2 .flex li ul.sub92 li:after{content: none;}
#mainfunctions2 ul.btn {text-align:center;}
#mainfunctions2 ul.btn li:first-child {margin-bottom:7.8vw;}
.nesimg {width:87vw; margin:0 auto 8vw;}
.nestext { padding-bottom:0; font-size: 80%; position: absolute; display: block; width: 100%; bottom: 20px;left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);}

/* --------------------------------------------------
	利用シーン。
-------------------------------------------------- */
#scene {margin-bottom:20vw; position:relative;}
#scene .lead {position:absolute; top:0; right:0; z-index:1; width:70vw; background-color:rgba(255,255,255,0.88); padding:0 4vw  6vw;}
#scene h2  {font-size:4.7vw; line-height:1.2; margin-bottom:0.5em;}
#scene h2 em {font-size:0.83em;}
#scene h2 span {display:block; font-size:1.5em; margin:0.3em 0; white-space:nowrap;}
#scene p {font-size:3.8vw; line-height:1.55;}
#scene .photo01 {padding-top:14vw;}
#scene .photo02 {width:80vw; margin:-5.6vw 0 0 3vw;}
#scene .photo03 {width:62vw; margin:-11vw 0 0 38vw;}
#scene .photo04 {width:52vw; margin:-9.4vw 0 18vw 3vw;}
#scene ul {text-align:center;}
#scene li:first-child {margin-bottom:7.8vw;}

/* --------------------------------------------------
	主な機能
-------------------------------------------------- */
#mainfunctions {text-align:center; padding: 6vw 0; background-color:rgba(244,244,244,1.0);}
#mainfunctions h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#mainfunctions h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#mainfunctions ul.f_list {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content:center; margin-bottom: 10vw;}

#mainfunctions ul.f_list li { display: block; padding: 1.6% 2.8%; color: #fff; border-radius: 4px; margin: 1.5% 1%; width: 90%;
background: -moz-linear-gradient(right, #22a99b, #71cfbd); 
background: -webkit-linear-gradient(right, #22a99b, #71cfbd); 
background: linear-gradient(to right, #22a99b, #71cfbd);}

#mainfunctions ul.f_list li:nth-child(-n+5) {padding: 2.4% 4.4%; font-weight: bold;
background: -moz-linear-gradient(right, #1237a1, #1873d3); 
background: -webkit-linear-gradient(right, #1237a1, #1873d3); 
background: linear-gradient(to right, #1237a1, #1873d3);}

#mainfunctions ul.f_list li:nth-last-child(-n+5) {padding: 1.6% 3.2%; width: 90%;
background: -moz-linear-gradient(right, #F68E38, #FDB018); 
background: -webkit-linear-gradient(right, #F68E38, #FDB018); 
background: linear-gradient(to right, #F68E38, #FDB018);}

#mainfunctions ul.f_list li span{ font-size: 80%;}
#mainfunctions ul {text-align:center;}
#mainfunctions li:first-child {margin-bottom:7.8vw;}

/* --------------------------------------------------
	お困りのこと
-------------------------------------------------- */
#Trouble {text-align:center; margin-bottom:20vw; padding: 6vw 4% 0;}
#Trouble h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#Trouble h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#Trouble figure {width:60vw; margin: 4vw auto 6.25vw;}
#Trouble figure img {max-width:340px; box-shadow: 0 0 8px rgba(0,0,0,0.18);}
#Trouble figure .im01 {z-index: 2; position: relative; top: 20px; left: 40px;}
#Trouble figure .im02 {z-index: 1; position: relative;top: 0px; left: -40px;}
#Trouble p {font-size:3.8vw; line-height:1.55; margin-bottom:0.75em;}
#Trouble ul { align-items: center; justify-content: center;}
#Trouble li { display: block; padding: 2% 3%; border-radius: 6px; background:rgba(152, 152, 152,0.2); margin: 2%;font-size: 90%;}	

/* --------------------------------------------------
	できること
-------------------------------------------------- */
#Ability2 {width: 100%; margin:0 auto; padding:6vw 0; overflow:hidden; background-color:rgba(244,244,244,1.0);}
#Ability2 .inner{ max-width: 1200px;margin: 0 auto;padding: 0 20px;overflow: hidden;}
#Ability2 h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;text-align:center;}
#Ability2 h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#Ability2 ul {display: flex;justify-content: center; align-content: center; flex-wrap: wrap; width: 98%; margin: 0 auto;}
#Ability2 li {position: relative;display:block; width: calc(98%/2); margin:0 auto 5%; font-size: .89em; text-align: center; line-height: 138%;}
#Ability2 li .tx01 h4{ font-weight: bold; font-size: 1.3em; margin: 0 0 4%;}

#Ability2 li figure { background: #fff; padding: 16%; border-radius: 50%; width: 120px; height: 120px; margin: 0 auto 5%; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.03));}
#Ability2 li figure img { width: 100%; height: auto;}
#Ability2 p {line-height:1.55; margin-bottom:0.75em;text-align:center;}

#Ability2 .for_plan_detail a{border-radius: 50px !important; background: rgba(255,255,255,0.9) !important;font-size: 1em !important; display: block;margin: 0 auto 2em; box-shadow: 0 0 6px rgba(0,0,0,0.1) !important;}

/* --------------------------------------------------
	メリット
-------------------------------------------------- */	
#Merit {text-align:center; width: 100%; padding: 6vw 0; margin: 0; background-position: top 0 left 82%;}
#Merit h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#Merit h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#Merit ul{ align-items: center; justify-content: center; width: 100%; margin: 0;}
#Merit li{ display: block; padding: 8%; margin: 0 auto; width: 88%; position: relative;}

#Merit li figure { display: block; padding: 0; margin: 0 auto 8%;}
#Merit li figure img{ border-radius: 50%; width: 120px; height: 120px; }

#Merit li .tx01{ line-height: 160%; text-align: left;}		
#Merit li .tx01 h3{ display: block; position: relative; z-index: 3; padding: 0; margin-bottom: 8vw;}	
#Merit li .tx01 h3:after{content: '';width: 10px;height: 3px;background-color: #FA633D;position: absolute;bottom: -10px;left: 0;}	
#Merit li .tx01 p{font-size:0.89em;line-height: 140%;}	

#Merit li:first-child .tx01 h3:before{ content: "01."; margin-right: 2%; color:#FA633D; }
#Merit li:nth-child(2) .tx01 h3:before{ content: "02."; margin-right: 2%; color:#FA633D; }	
#Merit li:nth-child(3) .tx01 h3:before{ content: "03."; margin-right: 2%; color:#FA633D; }	
#Merit li:nth-child(4) .tx01 h3:before{ content: "04."; margin-right: 2%; color:#FA633D; }	
#Merit li:nth-child(5) .tx01 h3:before{ content: "05."; margin-right: 2%; color:#FA633D; }	
#Merit li:nth-child(6) .tx01 h3:before{ content: "06."; margin-right: 2%; color:#FA633D; }	
#Merit li:nth-child(7) .tx01 h3:before{ content: "07."; margin-right: 2%; color:#FA633D; }	

/* --------------------------------------------------
	選ばれる理由
-------------------------------------------------- */
#Reasons {text-align:center; width: 100%; margin: 0 auto 12vw;background-color: rgba(244,244,244,0.5); padding:6vw 0; position: relative;}
#Reasons h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#Reasons h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#Reasons .reason {margin-top: 3vw;}	
#Reasons .reason li { margin: 0 auto 2vw; background:rgba(255,255,255,0.8); padding:8% 0 0; width: 88%; box-shadow: 0 0 8px rgba(0,0,0,0.1); line-height: 144%;}
#Reasons .reason li:last-child {margin-bottom: 0;}	
#Reasons .reason li figure { width: 40%; margin: 0 auto;}
#Reasons .reason li .txt02{ background:#fff; text-align: left; padding:4% 8% 8%;font-size: 0.89em;line-height:1.4;}
#Reasons .reason li .txt02 h4 {margin: 0 0 1.8vw; font-weight: bold; font-size: 1.3em;}
#Reasons .reason li .txt02 span{ display: block; background:#ff7043; color: #fff; margin: 0 0 2.5vw; padding:2% 4%; font-size: 0.8em;font-weight: bold; position: relative; border-radius: 1px;}


/* --------------------------------------------------
	壁紙
-------------------------------------------------- */
#skin {text-align:center; width: 100%; margin: 0 auto 12vw;background:linear-gradient(135deg, rgb(182 250 244 / 5%) 0%, rgb(80 234 180 / 5%) 100%); padding:6vw 0; position: relative;}
#skin h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#skin h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#skin .inner{margin: 0 auto;}
#skin ul{ display: flex;justify-content: space-between; align-items:flex-start; flex-wrap: wrap; width: 90%; margin: auto;}
#skin li{ width: calc(76%/3); margin: 4% auto;}
#skin li img{margin:0 0 4%;}
#skin li .skin_name{ display: block; width: 100%; font-size: 0.7em; line-height: 160%}
#skin li .skin_name h4{ font-size: 1.2em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;}
#skin li em{ display: inline-block; margin: 0 0 1%; background:#ff7043; color: #fff; padding: 1% 8%; font-size: 0.675em; text-align: center; border-radius: 50px;}

/* --------------------------------------------------
	他のアプリとの比較
-------------------------------------------------- */
#Compare {text-align:center; margin-bottom:20vw; padding: 6vw 4% 0;}
#Compare h2 {font-size:0.9em; line-height:1.2; margin-bottom:2em; color: #999; letter-spacing: 0.18em;}
#Compare h2 span {display:block; font-size:1.8em; letter-spacing:0.1em; margin-top:0.8em; color:#222;}
#Compare .compare {margin-top: 3vw;}	

.compare_tbwrap{
  width:100%;
  max-width:600px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.compare_tb-title{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  font-size:14px;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.compare_tb{
  background:rgba(0, 91, 178, 0.1);
  margin:0;
  padding:0.3em 1em;
}
.compare_tb table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
  width: 100%;
}
.compare_tb table th,.compare_tb table td {
  width:50%;
}
.compare_tb table thead th{
  background : #b5bfcb;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 1em;
  text-align: center;
}
.compare_tb table thead th.grcom{background :rgba(11, 111, 217,1);}

.compare_tb table tbody th{
  background : #1d4b82;
  text-align: center;
  color:#fff;
  border:none;
  border-radius:50px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.8em 1em;
  font-size: 1em;
  line-height: 1.3;
}
.compare_tb table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  /*border-radius:3px;*/
  padding:1.2em;
  color: #222;
  /*line-height: 1.8;*/
  text-align:justify;
  vertical-align:top;
  border: 1px solid rgba(209, 209, 209,0.8);
  font-feature-settings: "palt";
}
.compare_tb table tbody td.grcom{box-shadow: 0 0 5px rgba(11, 111, 217,0.5); border: 1px solid rgba(11, 111, 217,0.7);}

.compare_tb table tbody td ul{ 
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        margin: 1% auto;}
.compare_tb table tbody td li{ 
        width: auto;
        font-size: 0.75rem;
        font-weight: normal;
        color: #fff;
        padding: 1% 4%;
        border-radius: 50px;
        margin: 0 0.8%;}
.plan_a {background: #75CFEE;}
.plan_o {background: #F9CC50;}

.compare_tb table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.compare_tb table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  /*color:#1d4b82;*/
  font-size: 1.875em;
  margin-bottom:7px;
}
.compare_tb table tbody td .td-h.maru{ color: #005bb2;}
.compare_tb table tbody td .td-h.batsu{ color:#909090;}
.compare_tb table tbody td .td-h.subtxt{ font-size: 0.9em;}


@media screen and (max-width: 768px){
  .compare_tb{
    padding:7px;
  }
  .compare_tb table{
    border-spacing:3px 10px;
  }
  .compare_tb table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }
}

/* --------------------------------------------------
	ご利用プラン
-------------------------------------------------- */
#plan {background-image:url(../images2/plan_bg.jpg); background-repeat:no-repeat; background-size:cover; background-position:center; padding:12vw 0; margin-bottom:16vw; text-align:center;width:100%;}
#plan.req {margin-bottom:0px !important;}
#plan .inner {width:100%; margin:0 auto;}
#plan h2  {color:#fff; font-size:0.9em; line-height:1.2; text-shadow:0 0 10px #000; text-align:center; letter-spacing:0.2em; margin-bottom:1em;}
#plan h2 span {display:block; font-size:1.8em;  font-weight:bold;margin-top:0.4em;}
#plan .item {width:95vw; height:47.1875vw; background-image:url(../images2/plan_sp_sp.png); background-repeat:no-repeat; background-size:100% 100%; padding-top:9vw; margin:0 auto 7vw;}
#plan .plan_name {text-align:center; margin-bottom:4vw;}
#plan .plan_name figure,#plan .plan_name h3 {display:inline-block; vertical-align:top;}
#plan .plan_name h3 {font-size:5.9vw; line-height:1.2; margin-left:0.5em;}
#plan .plan_name h3 span {display:block; font-size:0.47em; font-weight:normal;}
#plan .plan_data {display:table; width:74%; margin:0 auto;}
#plan .plan_data dl {display:table-cell; vertical-align:top;}
#plan .plan_data dt {font-size:2.5vw; margin-bottom:0;}
#plan .plan_data dd {font-size:3.3vw; line-height:1.35;}
#plan .plan_data dd em {color:#f12545;font-size:1.2em;}
#plan .plan_data dd span {font-size:0.76em;}
#plan .plan_data dd span.caution {font-size:0.71em; line-height:1.35; display:inline-block; margin-top:0.2em;} 
#plan .free figure {width:8.75vw;}
#plan .daily figure {width:9vw;}
#plan .monthly figure {width:9.375vw;}
#plan p {color:#fff; font-size:3.2vw; line-height:1.55;}
#plan ul {text-align:center; margin-top: 8vw;}
#plan li:first-child {margin-bottom:7.8vw;}

#plan ul.btnfield {display: flex;flex-wrap: wrap; flex-direction:row; width: 100%; align-items: center; justify-content: center;}
#plan ul.btnfield li{ display: flex !important;}

#plan .for_plan_detail a{border-radius: 50px !important; background: rgba(255,255,255,0.9) !important;font-size: 1em !important;}	

@media screen and (min-width : 768px) {
    #plan ul.btnfield {flex-direction: column;}
}

.cation01{ font-size: 90%; color:#FA585B; font-weight: 600;}
/* --------------------------------------------------
	よくある質問
-------------------------------------------------- */
#faq {margin-bottom:10.75vw;}
#faq h2 {font-size:8vw; line-height:1.2; text-align:center; margin-bottom:15vw;}
#faq h2 span {display:block; font-size:0.5em; font-weight:normal;}
#faq .qa {width:90vw; max-width:734px; font-size:4.2vw; line-height:1.55; margin:0 auto 12.5vw;}
#faq .qa li {padding-left:2em; position:relative;}
#faq .question,#faq .q {margin-bottom:1em;}
#faq .answer,#faq .a {padding-bottom:2em; margin-bottom:2em; border-bottom:1px solid #e5e5e5;}
#faq .answer:last-child,#faq .a:last-child {margin-bottom:0; padding-bottom:0; border:none;}
#faq .question:before,#faq .answer:before,#faq .q:before,#faq .a:before {position:absolute; top:0; left:0; font-size:1.4em; line-height:1;}
#faq .question:before,#faq .q:before {content:"Q"; color:#0d97ff;}
#faq .answer:before,#faq .a:before {content:"A"; color:#f12545;}
#faq .q {}
#faq .a {}
#faq .a h4{padding: .1rem 1rem; border-left: 4px solid #949493; color: #4A4A4A;}
#faq .a h5{border-bottom: 3px dotted #949493; padding: 1%; font-size:100%; color: #4A4A4A;}
#faq .app_btn img {width:auto; height:8.28vw; margin:0.8em 0 1.5em;}
#faq .app_btn:last-child img {margin-bottom:0;}
#faq .btn01,#faq .btn02, #faq .btn03 {text-align:center; margin-bottom: 7.8vw;}
#faq .btn02 {margin-bottom:2em;}
#faq .btn03 {margin-bottom:3em;}

.b01{ font-weight: bold; font-size: 120%;}

/* --------------------------------------------------
	お問い合わせボタンエリア
-------------------------------------------------- */
.cv01 { padding:6% 2%; width: 100%; margin: 0 auto; background-image: url("../images2/cv01_bg.jpg"); background-size: cover; background-repeat: repeat-x;/*animation: slide 60s linear infinite;*/}	
.cv01 ul.btn li {display:block; margin:0 .5%; width: calc(98%/2);}
.cv01 ul.btn li.btn01 a,.cv01 ul.btn li.btn02 a {width: 100%; padding: 1.8em 0; font-size: .8em;}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}


/* --- 520px〜　タブレット --- */

@media print, screen and (min-width : 520px) {

#firstview .catch .c01 {font-size:1.8em; text-align: center; padding: 1% 0;}
#firstview .catch .c02 {font-size:1.8em; text-align: center; padding: 0;}
#firstview .catch .c03 {font-size:1.64em; text-align: center; padding: 1% 0; margin: 0;}	
#firstview .mv01 picture{ display: block; width: 28%; position: absolute; left: 35%; top:104%;}

/* --------------------------------------------------
	ご利用プラン
-------------------------------------------------- */
#plan .item {width:95vw; height:47.1875vw; background-image:url(../images2/plan_sp_sp.png); background-repeat:no-repeat; background-size:100% 100%; padding-top:8vw; margin:0 auto 7vw;}	
#plan .plan_name {text-align:center; margin-bottom:4vw;}	
#plan .plan_data dt {font-size:2.5vw; margin-bottom:0em;}

}

/* --- 884px〜　タブレット --- */
@media print, screen and (min-width : 884px) {

.pc_none{ display: none;}	
body.fixing-body {position:static; height:auto; top:auto !important;}

/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
#backToTop:hover {background-color:#ff6079;}
	
/* --------------------------------------------------
	共通パーツ
-------------------------------------------------- */
a:hover {color:#72c2ff;}
a:hover img {opacity: 0.85;	filter: alpha(opacity=75); transition: all 0.25s ease;}

.sp_only {display:none;}
.pc_only {display:block;}

/* ボタン1  */
.btn01 a {width:400px; font-size:18px; transition: all 0.25s ease;}
.btn01 a:hover {background: rgba(255,255,255,0.7) ; border: 1px solid #f12545; color:#f12545;}

/* ボタン2  */
.btn02 a {width:400px; font-size:18px; transition: all 0.25s ease;}
.btn02 a:hover {background: rgba(255,255,255,0.7) ; border: 1px solid #41adff; color:#0d97ff;}

.btn0222 a {display:inline-block; background-color:#fff; width:38vw; color:#112952; font-size:.6em; padding:1.9em 0; text-align:center;border-radius:6px;box-shadow: 0 0 8px rgba(0,0,0,0.3);text-shadow: none; line-height: 120%; font-weight: 600; border: none;border: 1px solid #112952; position: relative; }		

/* ボタン3  */
.btn03 a {width:310px; font-size:16px; transition: all 0.25s ease;}
.btn03 a:hover {background-color:#333; color:#fff;}

/* --------------------------------------------------
	ヘッダ
-------------------------------------------------- */
#header .inner {margin:0 auto; padding:2% 2%; overflow:hidden; display: flex;align-items: center;}
#header h1 {width:200px;/*width:171px;*/ margin:0; padding:0; float:left;}
#header.open {height:auto; background-color:rgba(0,0,0,0.75);}
#header .lang{ display: block; visibility: visible; position: relative; float: right; font-size: 12px; text-align: center; font-weight: bold;}
#header .lang span{ margin: 0 6%; color: #989898;}	
#header .lang a{ color: #454249;}
/* --------------------------------------------------
	Gナビ
-------------------------------------------------- */
#gNavi {display:block !important; position:static; margin-top:0px; width:calc(100% - 200px); height:auto; /*text-align:right;*/ float:right;}
#gNavi ul {font-size:0;}
#gNavi li {display:inline-block; margin:0 0 0 1.2%; padding-right:10px; position:relative;}
#gNavi li:last-child {margin-right:0; padding-right:0;}
#gNavi li:after {position:absolute; top:0; right:0; display:block; content:""; width:1px; height:14px; /*background-color:#fff;*/}
#gNavi li:last-child:after {display:none;}
#gNavi li a {font-size:14px; padding:0;}
#gNavi a:after {opacity:0; content:""; display:block; width:0; height:1px; background-color:#fff; margin:5px auto 0;
-webkit-transition: all 0.25s cubic-bezier(.25,.1,.25,1);
transition: all 0.25s cubic-bezier(.25,.1,.25,1);}
#gNavi a:hover:after {width:100%; opacity:1;}
#gNavi .copyright {display:none;}

/* --------------------------------------------------
	フッター
-------------------------------------------------- */
#footer {padding:60px 0 30px;}
#footer h1 {width:253px; padding:0; margin-bottom:80px;}
#footer ul {font-size:0; margin-bottom:100px; border:none;}
#footer li {display:inline-block; font-size:16px;  margin:0 1em 1.5em 0; padding-right:1em; border-right:1px solid #444;}
#footer li:last-child {margin-right:0; padding-right:0; border:none;}
#footer li a {display:inline; padding:0; border:none;}
#footer li a:hover {color:#999; text-decoration:underline;}
#footer .copyright {font-size:14px; padding:0;}

/* --------------------------------------------------
	FIRST VIEW
-------------------------------------------------- */
#firstview {margin: 0 auto;max-width: 1680px;max-height: 864px;width: 100%;height: 51.42857143vw;background-size: 100% auto;background-repeat: no-repeat;padding: 0;position: relative;}
	
/*bg*/
#firstview.ht02 {background-image:url(../images2/mv07c.jpg);}	
/*bg暗く*/	
#firstview.ht02:before{background-color: rgba(107, 83, 55, 0.135);position: absolute;top: 0;right: 0;bottom: 0;left: 0;content: ' ';}

#firstview .inner {position: relative;margin: 0 auto;max-width: 1200px;max-height: 864px;width: 71.42857143vw;height: 100%;	}
#firstview ul + div {clear:both;}
#firstview .catch ul { margin: 2vw auto 3.2vw; text-align:center; -webkit-justify-content:center; justify-content:center; position: relative; font-size:12px; position: relative;}	
#firstview .catch li {display:flex; width:calc(84%/5); line-height:1.35; position:relative; padding: 0.4%; margin: 0 0.4%;align-items: center; -webkit-align-items: center; -webkit-justify-content:center; justify-content:center; border-radius: 50px; color: #1e88e5; font-size: 120%;}	
	
#firstview .fv { padding: 9.4vw 0 0;}
#firstview .catch {width: 88%; font-size:1.8em; margin:0 10% 0 24%; line-height:180%; letter-spacing: .04em;}
#firstview .catch span{display: block;} 	
#firstview .catch .c01 {font-size:0.9em; padding: 0; text-align: center;}
#firstview .catch .c02 {font-size:0.9em; padding: 0; text-align: center;}
#firstview .catch .c03 {font-size:0.9em; padding: 0; text-align: center; margin: 0;}
#firstview .catch .c05 {font-size:1.385em;}
	

#firstview .catch .btn01{ margin-top: 0vw;}	
#firstview .mv01 picture{ display: block; width: 23%; position: absolute; left: 0vw; top:28vw;z-index: 1;}
#firstview .batch picture{ display: block; width: 28%; position: absolute; left: -7vw; top:12.5vw;z-index: 2;}
	
#firstview .fv li {display:flex; width:calc(98%/5); line-height:1.35; position:relative;padding: 1% 0; margin: 0 0.2%;align-items: center; -webkit-align-items: center; -webkit-justify-content:center; justify-content:center; text-shadow:none; letter-spacing: 0.05em; border-radius: 50px; font-size: 1.1em;}	
/* --------------------------------------------------
	ぐるかむエンタープライズとは？
-------------------------------------------------- */
#what {margin-bottom:10vw; width: 94%; margin: -2.4% auto 4% 0; padding: 6% 0 4% 20%; position: relative; color: #fff;}
#what h2 {font-size:46px; margin-bottom:30px;}
#what h2 em {}
#what h2 span {display:block; font-size:0.6em; letter-spacing:0.2em; margin-top:0.6em;}
#what .logo {width:340px; margin:0 auto 40px;}
#what p {text-align:center;display:inline-block; padding-top:30px;line-height:1.55; margin-bottom:50px; font-size: 1.4em;}
	
.chart {max-width:1118px; margin:0 auto 150px;}
	
/* --------------------------------------------------
	使い方は、無限大∞。
-------------------------------------------------- */
#infinity { margin:0 auto 20%; padding:1% 20px; text-align:left; overflow:hidden;}
#infinity h2 {width:67%; float:left; font-size:26px; margin-top:60px; margin-bottom:30px; text-align:center;}
#infinity figure {width:33%; float:right; margin:0;}
#infinity figure img {max-width:255px; margin-bottom: 2%;}
#infinity p {width:67%; float:left; font-size:16px; text-align:center;}
#infinity ul {width:67%; float:left; margin-top:40px; text-align:center;}
#infinity li {margin:0 10px;}
#infinity li img {width:auto; height:53px;}
	
/* --------------------------------------------------
	利用実績
-------------------------------------------------- */
#usage {width:100%; margin:0 auto 4vw; padding:0 20px 6vw;background: url("../images2/bg_riyou2.jpg"); background-repeat: no-repeat; background-size: cover; color: #fff; overflow: hidden;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight:400;font-style: normal;}
#usage h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#usage h2 em {font-size:0.83em;}
#usage h2 span{font-size:1.4em; margin-top: 2vw}
#usage p.lead{margin-bottom: 4%;letter-spacing: 0.06em;}	
#usage .usage_box_wrap {display: flex;justify-content: space-around; align-items: center; width:80%; flex-wrap: wrap; margin: auto;}
#usage .usage_box {display: block; width: calc(70%/3);}	
#usage .usage_box h4 {font-size: 0.975em; font-weight: 500; letter-spacing: 0.04em;margin-bottom: 1.4%;}	
#usage .usage_box h5 {display: block; border-radius: 50px; width: 100%; padding: 0.4%; background-image: linear-gradient(143deg, rgba(4, 60, 83, 1), rgba(5, 64, 89, 1)); font-size: 0.8em;margin-bottom: 1.4%; font-weight: 500;letter-spacing: 0.04em;}
#usage .usage_box h5 em{font-size: 1.5em;font-family: "Cabin Condensed", sans-serif;font-weight: 600;font-style: normal;}
#usage .usage_box h6 {font-size: 0.8em;margin-bottom: 1.4%; font-weight: 500;letter-spacing: 0.04em;}
#usage .usage_box h6 em{font-size: 1.875em;font-family: "Cabin Condensed", sans-serif;font-weight: 600;font-style: normal;}	
#usage .usage_box h6 span{border-bottom: 1px solid rgba(255,255,255,0.9); padding-bottom: 1%;}	
#usage .usage_box p.exp { font-size: 0.8em;margin-bottom: 8%;letter-spacing: 0.03em;}
#usage .usage_box figure{width: 80%; margin:auto;}	
	
/* --------------------------------------------------
	サービスの信頼性
-------------------------------------------------- */
#trust {text-align:center; margin:0; padding:0;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight:400;font-style: normal;}
#trust .inner{text-align:center; margin:0 0 4vw; padding:4vw 0; background:rgba(220, 237, 241, 1.0);}	
	
#trust h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:0; text-align:center; letter-spacing: 0.18em;background: linear-gradient(transparent 35%, rgba(220, 237, 241,1.0) 35%); }
#trust h2 span {font-size:1.4em; margin-top: 2vw}
#trust h2::after{ margin: 25px auto 0 !important;}
	
#trust p.lead{margin-bottom: 1%;letter-spacing: 0.06em; padding: 0;font-weight: 500; }
#trust p.lead em{font-size: 1em;}
#trust h3{ font-weight: 500;}
#trust h3 em{ font-size: 1.5em; color: #ee7950;font-family: "Cabin Condensed", sans-serif;font-weight: 500;font-style: normal;letter-spacing: 0.02em;}
#trust h3 span{ padding: 0 .4%; background: linear-gradient(transparent 50%, rgba(125, 255, 183,0.2) 50%); letter-spacing: 0.08em;}
#trust figure{ width: 60%;  margin:4% auto 0;}		

/* --------------------------------------------------
	利用シーン。
-------------------------------------------------- */
#scene {max-width:1500px; margin:0 auto 180px;}
#scene .lead {margin-top:-100px; width: 60vw;}
#scene h2  {font-size:26px; margin-bottom:30px;}
#scene p {font-size:16px;}
#scene .photo01 {width:76.3125vw; padding-top:0px;}
#scene .photo02 {width:40vw; max-width:641px; margin:-4vw 0 0 0;}
#scene .photo03 {width:28.4vw; max-width:455px; margin:-21vw 0 0 42.5vw;}
#scene .photo04 {width:20.75vw; max-width:332px; margin:-28vw 0 26vw 66vw;}
#scene ul {font-size:0;}
#scene li {display:inline-block; margin:0 30px; font-size:16px;}
#scene li:first-child {margin-bottom:0;}

/* --------------------------------------------------
	ご利用に必要なもの。
-------------------------------------------------- */
#mainfunctions2 {width:100%; margin:0 auto 10vw; padding:0 20px; text-align:left; overflow:hidden;}
#mainfunctions2 .inner{ max-width: 1200px;margin: 0 auto;padding: 0 20px;text-align: left;overflow: hidden;}		
#mainfunctions2 h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#mainfunctions2 h2 span{font-size:1.6em; margin-top: 2vw}		
#mainfunctions2 ul.btn {font-size:0;}
#mainfunctions2 ul.btn li {display:inline-block; margin:0 30px; font-size:16px;}
#mainfunctions2 ul.btn li:first-child {margin-bottom:0;}
#mainfunctions2 .flex{ width: 100%; margin: 8% auto 5%}
#mainfunctions2 .flex li{display: block; width: calc(94%/3); margin: 0 1%; text-align: center; align-items: center; justify-content: center; box-shadow:0 0 8px rgba(0,0,0,0.1);border-radius: 6px; padding: 4% 4% 8%; position: relative;}
#mainfunctions2 .flex li:after{content:""; background-image: url(../images2/icon_unchecked.png);background-size: contain;display: inline-block;vertical-align: middle;-webkit-transform: scale(0.5);transform: scale(0.5); width: 122px; height: 122px;position: absolute; right: -74px; top:38%;}
#mainfunctions2 .flex li:last-child:after{content:none; }	
#mainfunctions2 .flex li h4{ display: block; margin: 0 0 2vw; color: #1d4b82; font-size: 140%;}
#mainfunctions2 .flex li h4:after{content: '';width: 18px;display: block;margin: 25px auto 30px;border-radius: 6px;background-color:#ff7043;height: 6px;position: relative;}
#mainfunctions2 .flex li:first-child figure{ width: 60%; height: auto; margin: 1vw auto 0;}
#mainfunctions2 .flex li:nth-child(2) figure{ width: 90%; height: auto; margin: 3vw auto 0;}
#mainfunctions2 .flex li:last-child figure{ width: 60%; height: auto; margin: 4vw auto 0;}
#mainfunctions2 .flex li ul.sub92{ width: 100%; margin: 0 auto; display: flex;}
#mainfunctions2 .flex li ul.sub92 li{ margin: 0 1%; display: block; border-radius: 10px; background: #56a4ff; color: #fff; padding: 1% 2%; }	
	
.nesimg {max-width:768px; margin:0 auto 0;padding-top:20px;}
.nestext {text-align: center;padding-top:20px; padding-bottom:0; font-size: 100%; position: absolute; display: block; width: 100%;bottom: 30px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);}
	
/* --------------------------------------------------
	主な機能
-------------------------------------------------- */
#mainfunctions {width:100%; margin:0 auto; padding:0 20px; text-align:left; overflow:hidden;}
#mainfunctions .inner{ max-width: 1200px;margin: 0 auto; padding: 4%;}			
#mainfunctions h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#mainfunctions h2 span{font-size:2.0em; margin-top: 2vw}	
#mainfunctions ul.f_list { margin-bottom: 10vw;}
#mainfunctions li {display:inline-block; margin:0 30px; font-size:16px; width: auto !important;}
#mainfunctions li:first-child {margin-bottom:0;}
	
/* --------------------------------------------------
	お困りのこと
-------------------------------------------------- */	
#Trouble {width: 100%; margin:0 auto 10vw; padding:0 20px; text-align:left; overflow:hidden;}
#Trouble h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#Trouble h2 span{font-size:1.6em; margin-top: 2vw}
#Trouble p {font-size:16px; text-align:center;}	
#Trouble .inner{ max-width: 1200px;margin: 0 auto;padding: 20px 0;text-align: left;overflow: hidden;}	
#Trouble figure {width:33%; float:left; margin:0;text-align: right; position: relative;}
#Trouble figure img {max-width:340px; box-shadow: 0 0 8px rgba(0,0,0,0.18);}
#Trouble figure .im01 {z-index: 2; position: relative; top: 20px; left: 40px;}
#Trouble figure .im02 {z-index: 1; position: relative;top: 0px; left: -20px;}
#Trouble .txt01 {width:62%; float:right; }
#Trouble .txt01 ul{ align-items: center; justify-content: center;}
#Trouble .txt01 li{ display: block; padding: 1.4% 2%; border-radius: 10px; margin: 1.4%;font-size: 100%;}	
#Trouble .txt01 li:nth-child(3n){font-size: 140%;}
	
/* --------------------------------------------------
	できること
-------------------------------------------------- */
#Ability2 {width: 100%; margin:0 auto; padding:0 20px 6vw; text-align:left; overflow:hidden; background-color: rgba(244,244,244,1.0); }
#Ability2 .inner{ max-width: 1200px;margin: 0 auto;padding: 0 20px;text-align: left;overflow: hidden;}
#Ability2 h2{width:100%; font-size:1.6em; margin-top:6vw; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#Ability2 h2 span{font-size:1.6em; margin-top: 2vw}	
#Ability2 ul {display: flex;justify-content: center; align-content: center; flex-wrap: wrap; width: 80%; margin: 0 auto;}	
#Ability2 li {position: relative;display:block; width: calc(90%/3); margin:0 auto 5%; font-size: 1em; text-align: center; line-height:160%;}
#Ability2 li p {margin: 0; padding: 0;}
#Ability2 li .tx01 h4{ font-weight: bold; font-size: 1.4em; margin: 0 0 2%;}	
#Ability2 li figure { background: #fff; padding: 13%; border-radius: 50%; width: 180px; height: 180px; margin: 0 auto 5%;}
#Ability2 li figure img { width: 100%; height: auto;}	
	
#Ability2 .for_plan_detail a{border-radius: 50px !important; background: rgba(255,255,255,0.9) !important;font-size: 1em !important;}	
/* --------------------------------------------------
	メリット
-------------------------------------------------- */	
#Merit {text-align:center; width: 100%; padding:0 20px 6vw;}
#Merit .inner{ max-width: 1200px; margin: 0 auto;}
#Merit h2{width:100%; font-size:1.6em; margin-top:6vw; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#Merit h2 span{font-size:1.6em; margin-top: 2vw}
#Merit ul{ align-items: center; justify-content: center; width: 100%; margin: 0;}
#Merit li{ display: flex; align-items: center; justify-content: left; padding: 4%; margin: 0 auto; width: 88%; position: relative;}
#Merit li figure { display: block; padding: 0; margin: 0 4%;}
#Merit li figure img{ border-radius: 50%; width: 280px; height: 280px; }
#Merit li .tx01{ line-height: 160%; text-align: left;}		
#Merit li .tx01 h3{ display: block; position: relative; z-index: 3; padding: 0; margin-bottom: 2vw; font-size: 1.4em;}	
#Merit li .tx01 h3:after{content: '';width: 10px;height: 3px;background-color: #FA633D;position: absolute;bottom: -10px;left: 0;}	
#Merit li .tx01 p{font-size:1em;line-height: 160%;}	

/* --------------------------------------------------
	選ばれる理由
-------------------------------------------------- */
#Reasons {width: 100%; margin:0 auto; padding:0 20px 6vw; text-align:left; overflow:hidden; background-color: rgba(244,244,244,1.0); }
#Reasons .inner{ max-width: 1200px; margin: 0 auto;}
#Reasons h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#Reasons h2 span{font-size:1.6em; margin-top: 2vw}
#Reasons .reason {margin-top: 3vw;}	
#Reasons .reason li {display: flex; margin: 0 !important; background: transparent !important; box-shadow:none; width: 100%; padding:4% 0;}
#Reasons .reason li:last-child {margin-bottom: 0;}	
#Reasons .reason li figure { width: 32%; margin-top: -40px; margin-bottom: 40px; box-shadow: 2px 2px 0 #ccc;}
#Reasons .reason li .txt02{ width: calc(100% - 32%); background:#fff; padding: 0; box-shadow: 2px 2px 0 #ccc; text-align: left; position: relative;z-index: 1; left: -10px;font-size: 1em;line-height:1.6;}	
#Reasons .reason li .txt02 .txt022{padding: 4%;}	
#Reasons .reason li .txt02 .txt022 h4 {margin: 0 0 1.8vw;font-size: 1.4em;font-weight: bold;}	
#Reasons .reason li .txt02 span{ display: block; width: 14%; margin: 0; padding:1% 2%; font-size: 0.8em;font-weight: bold; position: relative; border-radius: 1px;}
#Reasons .reason li .txt02 .txt022 p {margin: 0; padding:0;}	
	
/* --------------------------------------------------
	壁紙
-------------------------------------------------- */
#skin {text-align:center; width: 100%; margin: 0 auto;background:linear-gradient(135deg, rgb(182 250 244 / 5%) 0%, rgb(80 234 180 / 5%) 100%); padding:6vw 0; position: relative;}
#skin h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#skin h2 span{font-size:1.6em; margin-top: 2vw}
#skin .inner{margin: 0 auto;}
#skin ul{ display: flex;justify-content: space-between; align-items:flex-start; flex-wrap: wrap; width: 50%; margin: auto;}
#skin li{ width: calc(76%/3); margin: 4% auto;}
#skin li img{margin:0 0 4%;}
#skin li .skin_name{ display: block; width: 100%; font-size: 0.85em; line-height: 160%}
#skin li .skin_name h4{ font-size: 1.2em;font-family: "Outfit", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;}
#skin li em{ display: inline-block; margin: 0 0 1%; background:#ff7043; color: #fff; padding: 1% 8%; font-size: 0.75em; text-align: center; border-radius: 50px;}		
/* --------------------------------------------------
	他のアプリとの比較
-------------------------------------------------- */	
#Compare {width: 100%; margin:0 auto 10vw; padding:0 20px; text-align:left; overflow:hidden;}
#Compare h2{width:100%; font-size:1.6em; margin-top:60px; margin-bottom:4vw; text-align:center; letter-spacing: 0.18em;}
#Compare h2 span{font-size:1.6em; margin-top: 2vw}	
#Compare .compare {margin-top: 3vw;}		
	
/* --------------------------------------------------
	ご利用プラン
-------------------------------------------------- */
#plan {padding:80px 4%; margin-bottom:190px;}
#plan.req {margin-bottom:0px !important;}	
#plan h2 {font-size:1.6em;}
#plan h2 span{font-size:1.5em;margin-top: 2vw}
#plan .item {background-image:url(../images2/plan_sp_pc.png); width:33%; height:66vw; padding-top:10vw; margin:0 0.5% 40px 0; float:left;}
#plan .item:last-of-type {margin-right:0;}
#plan .plan_name {margin-bottom:20px;}
#plan .plan_name figure,#plan .plan_name h3 {display:block;}
#plan .plan_name figure {margin:0 auto 2.6vw;}
#plan .plan_name h3 {font-size:4vw; margin-left:0;}
#plan .plan_data {display:block; width:100%;}
#plan .plan_data dl {display:block; margin-bottom:3vw;}
#plan .plan_data dt {font-size:1.8vw; margin-bottom:0;}
#plan .plan_data dd {font-size:2.1vw; line-height:1.15;}
#plan .free figure {width:7.3vw;}
#plan .daily figure {width:7.6vw;}
#plan .monthly figure {width:7.8vw;}
#plan ul {text-align:center; margin-top: 4vw;}
#plan p {clear:both; font-size:16px;}

#plan li {display:inline-block; margin:0 30px; font-size:16px;}
#plan li:first-child {margin-bottom:0;}	
#plan .btn {font-size:0; text-align:center;}
#plan .btn01,#plan .btn02 {display:inline-block; margin:10px 30px;}
	
#plan .for_plan_detail a{border-radius: 50px !important; background: rgba(255,255,255,0.9) !important;font-size: 1em !important;}	
	

/* --------------------------------------------------
	よくある質問
-------------------------------------------------- */
#faq {margin-bottom:0 auto 150px;}
#faq h2 {font-size:48px; margin-bottom:110px;}

#faq .qa {font-size:18px; margin-bottom:110px;}
#faq .app_btn img {height:52px;}
#faq .btn {font-size:0; text-align:center;}
#faq .btn03 {margin-bottom:170px;}
#faq .btn01,#faq .btn02 {display:inline-block; margin:10px 30px;}
	
/* --------------------------------------------------
	お問い合わせボタンエリア
-------------------------------------------------- */
.cv01 { padding: 4%; width: 100%; margin: 0 auto;background-size: contain;}	
.cv01 ul.btn li {display:block; margin:0 2%; width: calc(92%/2);}
.cv01 ul.btn li.btn01 a,.cv01 ul.btn li.btn02 a {width: 100%; padding: 1.8em 0; font-size: 18px;}
	
}

/* --- 1024px〜　PC --- */
@media print, screen and (min-width : 1024px) {
#header.is-fixed {background-color:rgba(0, 95, 197,0.99); /*box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);*/ padding: 0;}    

.btn0222 a {display:inline-block; background-color:#fff; width:38vw; color:#112952; font-size:.6em; padding:1.9em 0; text-align:center;border-radius:6px;box-shadow: 0 0 8px rgba(0,0,0,0.3);text-shadow: none; line-height: 120%; font-weight: 600; border: none;border: 1px solid #112952; position: relative; }	
/* --------------------------------------------------
	Gナビ
-------------------------------------------------- */
#gNavi {display:block !important; position:static; margin-top:0px; width:calc(100% - 200px); height:auto; /*text-align:right;*/ float:right;}
#gNavi ul {font-size:0;}
#gNavi li {display:inline-block; margin:0 0 0 1vw; padding-right:0px; position:relative;}
#gNavi li:last-child {margin-right:0; padding-right:0;}
#gNavi li:after {position:absolute; top:0; right:0; display:block; content:""; width:1px; height:14px; /*background-color:#fff;*/}
#gNavi li:last-child:after {display:none;}
#gNavi li a {font-size:14px; padding:0;}
#gNavi a:after {opacity:0; content:""; display:block; width:0; height:1px; background-color:#fff; margin:5px auto 0;
-webkit-transition: all 0.25s cubic-bezier(.25,.1,.25,1);
transition: all 0.25s cubic-bezier(.25,.1,.25,1);}
#gNavi a:hover:after {width:100%; opacity:1;}
#gNavi .copyright {display:none;}

/*アカウント登録、ログイン*/
#gNavi li.b01,#gNavi li.b02{ margin: 0 0 0 1.4%;}	
	
#gNavi li.b01 a,#gNavi li.b02 a{ display: block; padding: 10% 0 10% 0;border-radius: 2px;position: relative;background:rgba(255, 255, 255,0.5);border: 1px solid #005fc4;margin: 0 0 0 1%; color: #005fc4; text-align: center; width: 11vw;}
#gNavi li.b01 a:hover,#gNavi li.b02 a:hover{background:rgba(255, 255, 255,0.8);}

.is-fixed #gNavi li.b01 a,.is-fixed #gNavi li.b02 a{/*background:rgba(255, 255, 255,0.8);*/ background: rgba(11, 111, 217,1); /*color:#005fc4 !important;*/ color:#fff !important;}
.is-fixed #gNavi li.b01 a:hover,.is-fixed #gNavi li.b02 a:hover{background:rgba(255, 255, 255,0.95); color:#005fc4 !important;}	
#gNavi li.b01 a:after,#gNavi li.b02 a:after{display: none;}	
/*言語*/
#gNavi li.b03 a{color: #008e76;}
#gNavi li.b03:hover:last-child a{background:rgba(190, 250, 222, 0.5);}
#gNavi li.b03:last-child a:hover:after{display: none;}

/* --------------------------------------------------
	FIRST VIEW
-------------------------------------------------- */
#firstview {margin: 0 auto; max-width: 100% !important;max-height: 864px;width: 100%;height: 51.42857143vw;background-size:cover;background-repeat: no-repeat;padding: 0;}
#firstview .inner {position: relative;margin: 0 auto;max-width: 1200px;max-height: 864px;width: 71.42857143vw;height: 100%;	}
#firstview ul + div {clear:both;}
#firstview .catch{/*text-shadow:1.4px 1.4px 0 rgba(225,225,225,1.0),-1.4px 1.4px 0 rgba(225,225,225,1.0),1.4px -1.4px 0 rgba(225,225,225,1.0),-1.4px -1.4px 0 rgba(225,225,225,1.0);*/}	
	
#firstview .catch ul { margin: 2vw auto 3.2vw; text-align:center; -webkit-justify-content:center; justify-content:center; font-size:12px; position: relative;}	
#firstview .catch ul.mg01 { margin: 2vw auto 3.2vw;}		
#firstview .catch li {display:flex; width:calc(98%/5); line-height:1.35; position:relative; padding: 1% 0.8%; margin: 0 0.2%;align-items: center; -webkit-align-items: center; -webkit-justify-content:center; justify-content:center; border-radius: 50px; color: #1e88e5; font-size: 0.9rem;}	
#firstview .fv { padding: 9.4vw 0 0;}
#firstview .catch {width: 88%; font-size:2.1em; margin:0 10% 0 24%; line-height:200%; letter-spacing: .02em;}
#firstview .catch span{display: block;} 	
#firstview .catch .c01{font-size:0.9em; padding: 0; -webkit-text-stroke: 3px rgba(225,225,225,1.0); text-stroke: 3px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c02{font-size:0.9em; padding: 0; -webkit-text-stroke: 3px rgba(225,225,225,1.0); text-stroke: 3px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c03 {font-size:0.9em; padding: 0; -webkit-text-stroke: 3px rgba(225,225,225,1.0); text-stroke: 3px rgba(225,225,225,1.0); paint-order: stroke;}
#firstview .catch .c05 {font-size:1.485em;-webkit-text-stroke: 3px rgba(225,225,225,1.0); text-stroke: 3px rgba(225,225,225,1.0); paint-order: stroke;}

	
#firstview .catch .btn01{ margin-top: 0vw;}	
#firstview .mv01 picture{ display: block; width: 23%; position: absolute; left: 0vw; top:28vw;z-index: 1;}
#firstview .batch picture{ display: block; width: 24%; position: absolute; left: -11vw; top:18.5vw; z-index: 2; transform: rotate(-4deg);}	

/* --------------------------------------------------
	使い方は、無限大∞。
-------------------------------------------------- */
#infinity { margin:0 auto 14%; padding:1% 20px; text-align:left; overflow:hidden;}
	
/* --------------------------------------------------
	ご利用プラン
-------------------------------------------------- */
#plan .inner {width:1000px; margin:0 auto;}
#plan .item {width:303px; height:608px; padding-top:96px; margin-right:4%; float:left;}
#plan .item:last-of-type {margin-right:0; float: right;}
#plan .plan_name {margin-bottom:20px;}
#plan .plan_name figure {margin-bottom:20px;}
#plan .plan_name h3 {font-size:38px;}
#plan .plan_data dl {margin-bottom:20px;}
#plan .plan_data dt {font-size:16px;}
#plan .plan_data dd {font-size:19px;}
#plan .free figure {width:56px;}
#plan .daily figure {width:58px;}
#plan .monthly figure {width:60px;}

}

/* --- 1280px〜　PC --- */
@media print, screen and (min-width : 1200px) {

/* --------------------------------------------------
	FIRST VIEW
-------------------------------------------------- */
#firstview .catch ul.mg01 { margin: 2vw auto 5.8vw;}	
#firstview .catch .c01{font-size:1em;}
#firstview .catch .c02{font-size:1em; }
#firstview .catch .c03 {font-size:1em;}
#firstview .catch .c05 {font-size:1.585em;}	
	
/* --------------------------------------------------
	利用シーン。
-------------------------------------------------- */
#scene .lead {width:590px; padding:100px 65px  130px; margin-top:0;}
#scene .photo01 {width:1221px; margin-left:50px;}
#scene .photo02 {width:641px; margin:-60px 0 0 0;}
#scene .photo03 {width:455px; margin:-340px 0 0 680px;}
#scene .photo04 {width:332px; margin:-450px 0 450px 1070px;}
	
}