@charset "UTF-8";
body {
	font-family: "Cabin", 'DIN 2014', "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	color: #333333;
	background-color: #ffffff;
}

/* ------------------------------------
共通・全体
------------------------------------ */
img {
	max-width: 100%;
}

a {
	text-decoration: none;
	cursor: pointer;
}

a:link {
	color: #008dda;
}

a:visited {
	color: #008dda;
}

a:hover {
	opacity: 0.5;
	transition: 0.2s;
}

ul {
	list-style-type: none;
}

#section01,
#section02,
#section03,
#section04,
#section05,
#section06,
#section07,
#section08,
#section09,
#section10,
#section11,
.cta {
	padding: 80px 0;
}

.section-inner {
	width: 100%;
	max-width: 1100px;
	padding: 0 20px;
	margin: 0 auto;
}

.wide-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.narrow-inner {
	width: 100%;
	max-width: 920px;
	padding: 0 10px;
	margin: 0 auto;
}

.col-2, .col-3, .col-4 {
	display: flex;
	justify-content: space-between;
}

.col-2 .col-2-content {
	width: calc((100% - 50px)/2);
}

.col-3 .col-3-content {
	width: calc((100% - 110px)/3);
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

.tb-only {
	display: none;
}

/* フェードイン用 */
.fadeIn {
  opacity: 0;
  transform: translate(0, 0);
  transition: 2s;
}

.fadeIn.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_bottom {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1.5s;
}

.fadeIn_bottom.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_left {
  opacity: 0;
  transform: translate(-5%, -2%);
  transition: 1.2s;
}

.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* ------------------------------------
テキスト
------------------------------------ */
h2.mvtitle {
	font-size: 60px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	margin-bottom: 45px;
	color: #ffffff;
}

h3.section-title {
	font-size: 33px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}

h4.middle-title {
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

p.sub-title {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.05em;
	padding: 18px 0 50px 0;
	text-align: center;
}

p.main-text {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

p.text {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

p.mvcopy {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
}

p.col-4-box {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.sec02_large {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.aquablue {
	color: #008dda;
}

/* ------------------------------------
CTAエリア
------------------------------------ */
.cta {
	background: linear-gradient(90deg, rgba(0,141,218,1) 0%, rgba(65,201,226,1) 55%, rgba(186,231,248,1) 80%, rgba(255,255,255,1) 100%);
}

.cta-download {
	display: block;
	text-align: center;
}

.cta-download img:nth-child(2) {
	margin-left: -85px;
}

.cta .col-2 .col-2-content {
	width: calc(100%);
}

.cta .col-2 {
	margin: 0 180px;
}


/* ------------------------------------
ヘッダー	
------------------------------------ */
#header {
	height: 100px;
	width: 100%;
	padding: 0 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 1;
	background-color: #ffffff;
}

h1.logo {
	width: 200px;
	height: auto;
}

ul.header-link li {
	display: inline-block;
	padding-right: 20px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

ul.header-link li a:hover {
	color: #cccccc;
	transition: 0.2s;
}

.gnav-sp-wrap, .menu-button {
	display: none;
}

#header a:link {
	color: #333333;
}

#header a:visited {
	color: #333333;
}

.header-tel a {
	font-size: 22px;
}

.header-cta {
	display: inline-block;
	background-color: #fff000;
	border-radius: 25px;
	padding: 8px 35px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.gnav-pc-wrap {
	display: flex;
	align-items: center;
}


/* ------------------------------------
メインビジュアル
------------------------------------ */
#mainvisual {
	width: 100%;
	margin: 0 auto;
	object-fit: cover;
	position: relative;
	margin-top: 100px;
}

h2.mvtitle {
	position: absolute;
	top: 70px;
}

.mv-sub {
	position: absolute;
	top: 210px;
}

p.mvcopy {
	position: absolute;
	top: 65px;
	left: 6%;
	z-index: 20;
}

.mvillust {
	position: relative;
	z-index: 1;
	width: 580px;
	height: auto;
	margin-left: -12px;
}

.mv-circle {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: #ffffff;
	/* 位置指定 */
	position: absolute;
	bottom: 145px;
	right: -30px;
}

.mv-circle p {
	position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width : 140px;
  text-align: center;
	color: #008dda;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.05em;
	line-height: 1.25;
}

.mv-circle span {
	font-size: 19px;
	padding-left: 3%;
	letter-spacing: 0.02em;
}

#mainvisual .col-2 {
	justify-content: flex-start;
	align-items: center;
}

.mv-cta {
	position: absolute;
	top: 390px;
}

.mv-cta img {
	width: 300px;
	padding-right: 30px;
}

.mvdocument img:nth-child(2) {
	width: 150px;
	margin-left: -100px;
}

.mvtel {
	position: absolute;
	top: 540px;
}

.mvtel img {
	height: 32px;
	padding-right: 10px;
}

.mvtel p {
	font-size: 38px;
	letter-spacing: 0.03em;
	font-weight: 700;
	color: #ffffff;
}

.mvtel span {
	font-size: 18px;
	font-weight: 500;
}



/* ------------------------------------
企業ロゴ
------------------------------------ */
.logo-area {
	padding: 80px 0;
}


/* ------------------------------------
section01 こんなお悩みありませんか？
------------------------------------ */
#section01 {
	background-color: #e3f7ff;
	position: relative;
}

#section01::after { 
  content: "";
  position: absolute;
  top: 100%;
  box-sizing: border-box;
  border-right: 50vw solid transparent;
  border-left: 50vw solid transparent;
  border-top: 100px solid #e3f7ff;
}

#section01 h3.section-title {
	padding-bottom: 60px;
}

#section01 .col-4-content {
	text-align: center;
}

#section01 .col-4-box {
	background-color: #ffffff;
	padding: 30px 20px;
	border-radius: 10px;
	position: relative;
	margin-bottom: 35px;
}

#section01 .col-4-box::before {
	content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffffff;
}

#section01 .col-4-content img {
	height: 165px;
}


/* ------------------------------------
section02 そのお悩み解決します！
------------------------------------ */
#section02 {
	background-color: #ffffff;
}

.section02-title {
	padding-top: 90px;
	text-align: center;
}

#section02 p.main-text {
	background-color: #e3f7ff;
	padding: 20px 15px;
	border-radius: 15px 15px 0 0;
	text-align: center;
}


/* ------------------------------------
section03 サービス内容
------------------------------------ */
#section03 {
	background-color: #e3f7ff;
}

#section03 .col-3-content {
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 5px;
	padding: 30px;
}

.sec03-cabin {
	font-size: 23px;
	font-weight: 400;
	color: #008dda;
	padding-right: 12px;
	letter-spacing: 0.1em;
}

#section03 p.main-text {
	padding-bottom: 30px;
}

#section03 p.text {
	font-weight: 300;
	padding-bottom: 10px;
}

#section03 p.text:last-child {
	padding-bottom: 0;
}

#section03 p.text::before {
	content:"■";
  font-size: 12px;
  margin-right: 10px;
	color: #008dda;
}

#section03 h4.middle-title {
	padding-top: 50px;
	text-align: center;
}


/* ------------------------------------
section04 選ばれる理由
------------------------------------ */
#section04 {
	background-color: #e3f7ff;
}

#section04 h3.section-title {
	padding-bottom: 75px;
}

#section04 .col-2 {
	padding-bottom: 50px;
}

#section04 .col-2:last-child {
	padding-bottom: 0;
}

.sec04-textbox {
	background-color: #ffffff;
	padding: 35px 25px;
	border-radius: 10px;
	width: 450px;
	position: relative;
}

.sec04-cabin {
	position: absolute;
	top: -15px;
	left: -10px;
	color: #41c9e2;
	opacity: 0.5;
	font-size: 25px;
	letter-spacing: 0.05em;
}

#section04 h4.middle-title {
	padding-bottom: 20px;
}

#section04 p.text {
	line-height: 1.75;
}

.sec04-textbox {
	flex-basis: 52%;
}

.sec04-imgbox {
	flex-basis: 48%;
}

#section04 .col-2-content:nth-child(1) {
	margin-right: 50px;
}


/* ------------------------------------
section05 他サービスとの比較
------------------------------------ */
#section05 {
	background-color: #ffffff;
}

table {
  width: 100%;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.3;
	position: relative;
	margin-top: 40px;
	border-collapse: collapse;
}

th,td {
  border: 1px #cccccc solid;
}

th.blank {
	border: none;
}

th {
  width: 15%;
}

td {
  width: 20%;
	text-align: center;
}

/* 表の細かいデザイン設定 */
th.service-title {
	background-color: #d7d7d7;
	padding: 10px;
	height: 50px;
}

th.category {
	background-color: #f0f2f4;
	padding: 10px;
	height: 140px;
}

th.Dtitle {
	background-color: #008dda;
	color: #ffffff;
	font-size: 28px;
	letter-spacing: 0.05em;
	line-height: 100px;
	height: 100px;
	border-radius: 20px 20px 0 0;
	position: absolute;
	top: -50px;
	left: 165px;
	border: none;
	width: 227.5px;
}

td.Ditem {
	background-color: #e3f7ff;
	color: #008dda;
	border: none;
}

td.Ditem img {
	display: block;
	margin: 0 auto;
	margin-top: -8px;
	padding-bottom: 12px;
}

td.other {
	padding-top: 10px;
	color: #777777;
}

td.other img {
	display: block;
	margin: 0 auto;
	margin-top: -8px;
	padding-bottom: 12px;
}

td.border-rl {
	border-right: 5px #008dda solid;
	border-left: 5px #008dda solid;
}

td.Dlast {
	border-bottom: 5px #008dda solid;
	border-right: 5px #008dda solid;
	border-left: 5px #008dda solid;
}

td.tablesymbol {
	display: inline-block;
	text-align: center;
}


/* ------------------------------------
section06 料金について
------------------------------------ */
#section06 {
	background-color: #e3f7ff;
}

#section06 p.sub-title {
	padding: 15px 0 40px 0;
}

#section06 span.aquablue {
	font-size: 30px;
	font-weight: 700;
}

#section06 h4.middle-title {
	color: #008dda;
	text-align: center;
	padding-bottom: 15px;
}

#section06 h4.middle-title span {
	font-size: 14px;
	vertical-align: top;
	margin-left: -5px;
}

#section06 .col-3 {
	align-items: center;
	margin: 0 200px;
}

#section06 .col-3 .col-3-content {
	width: calc(100%);
}

.sec06-box {
	background-color: #ffffff;
	border: 1px #cccccc solid;
	border-radius: 15px;
	padding: 25px 50px;
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.plussymbol {
	font-size: 60px;
	color: #008dda;
	font-weight: 700;
	text-align: center;
	margin-top: 35px;
	margin-left: -90px;
	margin-right: -90px;
}

#section06 .attention {
	margin: 0 200px;
	text-align: right;
	padding: 8px 50px 0 0;
}

#section06 .col-2 {
	margin: 0 80px;
	padding-top: 50px;
}

#section06 .col-2 .col-2-content {
	height: 300px;
	width: auto;
}

#section06 .col-2 .col-2-content:nth-child(2) {
	padding-right: 60px;
}


/* ------------------------------------
section07 事例紹介
------------------------------------ */
#section07 {
	background-color: #e3f7ff;
}

#section07 h3.section-title {
	padding-bottom: 75px;
}

.sec07-img {
	position: relative;
}

.col-2-hidden {
	display: flex;
	justify-content: space-between;
}

.col-2-hidden .col-2-content {
	width: calc((100% - 50px)/2);
}

.sec07-cabin {
	position: absolute;
	top: -25px;
	left: -25px;
	background-color: #ffffff;
	color: #41c9e2;
	padding: 6px 15px;
	font-size: 25px;
	letter-spacing: 0.05em;
}

.sec07-text {
	flex-basis: 700px;
}

.sec07-mini,
.sec08-point {
	font-size: 20px;
	letter-spacing: 0.05em;
	font-weight: 500;
	padding: 0 0 15px 12px;
}

.sec07-arrow {
	padding: 12px 0;
}

.sec07-text p.main-text {
	line-height: 1.8;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration-color: rgba(65, 201, 226, 0.5);
  text-decoration-line: underline;
  text-decoration-thickness: 12px;
  text-underline-offset: -3px;
}

#section07 .support {
	position: relative;
}

#section07 .left::before {
	content: "";
	display: block;
	width: 5px;
	height: 23px;
	background: #008dda;
	position: absolute;
	left: 0;
	top: 4px;
}

#section07 .right::before {
	content: "";
	display: block;
	width: 5px;
	height: 23px;
	background: #41c9e2;
	position: absolute;
	left: 0;
	top: 4px;
}

/* ボタンでさらに表示される設定 */
.casestudy .sec07-item {
	padding-bottom: 120px;
	opacity: 1;
	transition: all 0.4s ease 0s;
}

.casestudy .sec07-item .is-hidden {
	opacity: 0;
	height: 0;
	margin: 0;
}

.morebtn {
	text-align: center;
}

button {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	background-color: #ffffff;
	color: #008dda;
	border-radius: 35px;
	border: 1px #cccccc solid;
	padding: 18px 45px;
	display: inline-block;
	cursor: pointer;
	margin-top: -150px;
}

.hidden-view {
	display: none;
}
.hidden-view.open {
	display: flex;
}


/* ------------------------------------
section08 お客さまの声
------------------------------------ */
#section08 {
	background-color: #ffffff;
}

#section08 .col-4-content {
	width: 290px;
}

#section08 .left {
	position: relative;
}

#section08 .left::before {
	content: "";
	display: block;
	width: 5px;
	height: 23px;
	background: #008dda;
	position: absolute;
	left: 0;
	top: 4px;
}

.sec08-text {
	background-color: #e3f7ff;
	padding: 20px;
	border-radius: 0 0 10px 10px;
}

#section08 .name {
	font-size: 18px;
	font-weight: 700;
	padding-bottom: 10px;
}

#section08 .industry {
	font-size: 13px;
	font-weight: 400;
	float: right;
	padding-top: 2%;
}

.sec08-category {
	background-color: #008dda;
	color: #ffffff;
	padding: 10px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.sec08-category-box {
	margin-bottom: 18px;
}

#section08 .col-4-content img {
	display: flex;
}


/* ------------------------------------
section09 ご利用の流れ
------------------------------------ */
#section09 {
	background-color: #e3f7ff;
}

#section09 .sub-title {
	padding-bottom: 80px;
}

#section09 span.aquablue {
	font-size: 22px;
	font-weight: 700;
}

#section09 .main-text {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.05em;
	background-color: #ffffff;
	border-radius: 35px;
	padding: 20px 50px;
	text-align: center;
	width: 470px;
	margin: 0 auto;
	margin-bottom: 50px;
}

.sec09-box {
	position: relative;
	z-index: 10;
}

.grayborder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	width: 3px;
	height: 380px;
	background-color: #cccccc;
	opacity: 0.7;
	z-index: -1;
}

.sec09-cabin {
	position: absolute;
	top: -15px;
	left: -10px;
	color: #41c9e2;
	opacity: 0.8;
	font-size: 25px;
	letter-spacing: 0.05em;
}


/* ------------------------------------
section10 よくあるご質問
------------------------------------ */
#section10 {
	background-color: #ffffff;
}

#section10 h3.section-title {
	padding-bottom: 70px;
}

.question-box,
.answer-box {
	margin: 0 50px;
}

#section10 .main-text {
	letter-spacing: 0.05em;
	color: #008dda;
}

.answer {
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.05em;
	margin-left: 2.6em;
	text-indent: -2.6em;
	
}

#section10 .main-text::before {
	content:"Q";
	font-size: 20px;
	font-weight: 500;
	margin-right: 20px;
	background-color: #008dda;
	color: #ffffff;
	padding: 8px 10px;
	border-radius: 10px;
	line-height: 40px;
}

.sec10-border {
	border-bottom: 2px #cccccc solid;
	margin: 20px 0;
}

#section10 .answer::before {
	content:"A";
	font-size: 20px;
	font-weight: 500;
	margin-right: 20px;
	background-color: #e3f7ff;
	color: #333333;
	padding: 8px 10px;
	border-radius: 10px;
	line-height: 40px;
}

/* ボタンでさらに表示される設定 */
.casestudy .sec10-content {
	padding-bottom: 80px;
	opacity: 1;
	transition: all 0.4s ease 0s;
}

.casestudy .sec10-content .is-hidden {
	opacity: 0;
	height: 0;
	margin: 0;
}

.morebtn {
	text-align: center;
}

.hidden-view-qa {
	display: none;
}
.hidden-view-qa.open {
	display: block;
}


/* ------------------------------------
section11 サービス資料・料金表をダウンロード
------------------------------------ */
#section11 {
	background-color: #e3f7ff;
}

#section11 h3.section-title {
	padding-bottom: 70px;
}

#section11 h4.middle-title {
	background: linear-gradient(90deg, rgba(0,141,218,1) 12%, rgba(25,213,247,1) 50%);
	padding: 20px;
	border-radius: 10px;
	position: relative;
	margin-bottom: 35px;
	width: 420px;
	color: #ffffff;
	text-align: center;
}

#section11 h4.middle-title::before {
	content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 20px solid #008dda;
}

#section11 p.sub-title {
	text-align: left;
	line-height: 1;
	padding: 10px 0 30px 0;
}

#section11 p.sub-title span {
	font-weight: 700;
}

.sec11-point {
	font-size: 40px;
}

.bubble {
	padding: 15px 50px;
}

.sec11-appeal {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

.sec11-appeal span.aquablue {
	font-size: 32px;
	font-weight: 700;
}

.sec11-ctabtn {
	display: block;
	text-align: center;
}

.sec11-ctabtn p {
	background-color: #fff000;
	color: #008dda;
	border-radius: 35px;
	padding: 20px 30px;
	display: inline-block;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-top: 15px;
}

.DLbubble {
	padding: 0 60px;
	position: relative;
	top: 20px;
}

.dummy-frame {
	background-color: #ffffff;
	height: 88%;
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: 0.1;
	color: #cccccc;
}


/* ------------------------------------
フッター
------------------------------------ */
footer {
	height: 170px;
	padding: 20px 0;
}

.footer-logo {
	padding-bottom: 15px;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

ul.footer-link li {
	display: inline-block;
	padding-right: 100px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #333333;
	border-bottom: 1px #cccccc solid;
	padding-bottom: 10px;
	margin-right: 50px;
	position: relative;
}

footer a:visited {
	color: #333333;
}

ul.footer-link li a:hover {
	color: #cccccc;
	transition: 0.2s;
}

.footer-link li::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: solid 3px #333333;
	border-right: solid 3px #333333;
	transform:rotate(45deg);
	position: absolute;
	top: 8px;
	right: 8px;
}


/*================================================
画面の横幅が1024pxまで タブレット
=================================================*/
@media screen and (max-width:1024px){
	/* ------------------------------------
	共通
	------------------------------------ */
	.wide-inner {
    width: 100%;
    max-width: 950px;
	}

	.tb-only {
		display: block;
	}


	/* ------------------------------------
	ヘッダー
	------------------------------------ */
	#header {
		padding: 0 20px;
	}

	h1.logo {
    width: 120px;
	}

	.header-cta {
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
	}

	.header-tel a {
		font-size: 18px;
	}


	/* ------------------------------------
	メインビジュアル
	------------------------------------ */
	h2.mvtitle {
    font-size: 48px;
    margin-bottom: 30px;
		top: 50px
	}

	.mv-sub {
    top: 160px;
	}

	#mainvisual p.mvcopy {
    top: 54px;
    left: 5%;
		font-size: 19.5px;
	}

	.mvillust {
    width: 500px;
	}

	.mv-circle {
    bottom: 125px;
    right: -10px;
	}

	.mv-cta {
    top: 310px;
	}

	.mv-cta img {
    width: 240px;
    padding-right: 20px;
	}

	.mvdocument img:nth-child(2) {
    width: 120px;
    margin-left: -80px;
	}

	.mvtel {
    top: 410px;
	}

	.mvtel img {
    height: 25px;
	}

	.mvtel p {
    font-size: 25px;
		font-weight: 600;
	}

	/* ------------------------------------
	section05 他サービスとの比較
	------------------------------------ */
	th.Dtitle {
    font-size: 26px;
    line-height: 85px;
    height: 80px;
    top: -30px;
    left: 153px;
    width: 211.5px;
	}


	/* ------------------------------------
	section06 料金について
	------------------------------------ */
	#section06 .col-3 {
    margin: 0 140px;
	}

	#section06 .attention {
    padding: 8px 0px 0 0;
	}


	/* ------------------------------------
	CTAエリア
	------------------------------------ */
	.cta .col-2 {
    margin: 0 140px;
	}


	/* ------------------------------------
	section07 事例紹介
	------------------------------------ */
	.sec07-text {
    flex-basis: 600px;
	}

	.sec07-cabin {
		left: 0;
	}


	/* ------------------------------------
	section08 お客さまの声
	------------------------------------ */
	#section08 .col-4-content {
    width: 230px;
	}

	.sec08-category-box span {
		display: inline-block;
		margin-top: 10px;
	}


	/* ------------------------------------
	section11 サービス資料・料金表をダウンロード
	------------------------------------ */
	#section11 p.sub-title {
		font-size: 20px;
	}

}/* タブレットここまで */



/*================================================
画面の横幅が768pxまで スマホ
=================================================*/
@media screen and (max-width:768px){
	/* ------------------------------------
	共通
	------------------------------------ */
	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.tb-only {
		display: none;
	}

	.section-inner,
	.wide-inner {
		padding: 0 25px;
		max-width: 600px;
	}

	.narrow-inner {
		padding: 0 20px;
	}

	.col-3,
	.col-4 {
		display: block;
	}

	.col-3 .col-3-content {
		width: 100%;
	}

	#section01,
	#section02,
	#section03,
	#section04,
	#section05,
	#section06,
	#section07,
	#section08,
	#section09,
	#section10,
	#section11,
	.cta {
		padding: 50px 0;
	}
	
	/* ------------------------------------
	テキスト
	------------------------------------ */
	h3.section-title {
		font-size: 28px;
	}
	
	h4.middle-title {
		font-size: 25px;
	}
	
	p.sub-title {
		font-size: 22px;
		/* padding: 18px 0 50px 0; */
	}
	
	p.main-text {
		font-size: 22px;
	}
	
	p.text {
		font-size: 16px;
	}
	
	p.col-4-box {
		font-size: 20px;
	}
	
	.sec02_large {
		font-size: 32px;
	}


	/* ------------------------------------
	CTAエリア
	------------------------------------ */
	.cta-download {
		display: block;
		text-align: center;
	}

	.cta-download img:nth-child(2) {
		margin-left: -90px;
		width: 100px;
		padding-bottom: 10px;
	}

	.cta .col-2 .col-2-content {
		padding-bottom: 15px;
	}

	.cta .col-2 .col-2-content:nth-child(2) {
		padding-bottom: 0;
	}

	.cta .col-2 {
		margin: 0 0 0 10px;
		display: block;
	}


	/* ------------------------------------
	ヘッダー
	------------------------------------ */
	#header {
		height: 70px;
		padding: 0 30px;
	}

	h1.logo {
		width: 150px;
		margin-top: 5px;
	}

	/* ハンバーガーメニュー */
	.menu-button {
		display: block;
		width: 50px;
		height: 60px;
		padding: 20px 0 15px 15px;
	}

	.menu-button-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.menu-button-inner span {
		position: absolute;
		display: block;
		height: 3px;
		width: 100%;
		background-color: #333333;
		transition: all .6s;
	}
	
	.menu-button-inner .top {
		top: 0;
	}

	.menu-button-inner .middle {
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.menu-button-inner .bottom {
		bottom: 0;
	}

	/* クリックしたら×印になる */
	.menu-button-inner.active .top {
		transform: translateY(8px) rotate(-45deg);
	}

	.menu-button-inner.active .middle {
		opacity: 0;
	}

	.menu-button-inner.active .bottom {
		transform: translateY(-13px) rotate(45deg);
	}

	/* メニューの中身（クリックしたら表示されるようにする） */
	.gnav-sp-wrap {
		position: fixed;
		z-index: 12;
		top: 0;
		left: 0;
		text-align: center;
		width: 100%;
		margin-top: 70px;
		display: none;
		background-color: rgba(250, 250, 250, 0.8);
		padding-bottom: 30px;
	}

	ul.gnav-sp {
		padding-top: 30px;
	}

	ul.gnav-sp li {
		padding: 20px 0;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0.1em;
	}


	/* ------------------------------------
	メインビジュアル
	------------------------------------ */
	#mainvisual {
		max-width: 600px;
		position: relative;
		margin-top: 70px;
	}

	#mainvisual .col-2 {
		display: block;
	}

	.mv-cta {
		text-align: center;
		margin-top: 100px;
		left: 0;
	}

	.mv-cta img {
		width: 280px;
		padding-right: 0;
	}

	.mvdocument {
		position: relative;
	}

	.mvdocument img {
		margin-top: 10px;
	}

	.mvdocument img:nth-child(2) {
		position: absolute;
		bottom: 8px;
		right: -22px;
		width: 100px;
	}

	/* 企業ロゴ */
	.logo-area {
		padding: 40px 0;
	}

	/* スマホのみ表示するアイコン */
	.sp-icon {
		margin-top: 190px;
	}

	.sp-icon .col-3 img {
		height: 80px;
		width: auto;
	}


/* ------------------------------------
section01 こんなお悩みありませんか？
------------------------------------ */
	#section01 h3.section-title {
		padding-bottom: 30px;
	}

	#section01 .col-4-content {
		margin-bottom: 20px;
	}

	#section01::after { 
		border-top: 60px solid #e3f7ff;
	}


/* ------------------------------------
section02 そのお悩み解決します！
------------------------------------ */
	#section02 .col-3-content {
		margin-bottom: 20px;
	}

	.section02-title {
		padding-top: 50px;
	}


/* ------------------------------------
section03 サービス内容
------------------------------------ */
	#section03 .col-3-content {
		margin-bottom: 20px;
	}

	#section03 .col-3-content:last-child {
		margin-bottom: 0;
	}


/* ------------------------------------
section04 選ばれる理由
------------------------------------ */
	#section04 h3.section-title {
		padding-bottom: 60px;
	}

	#section04 .col-2 {
		padding-bottom: 50px;
	}

	#section04 .col-2:last-child {
		padding-bottom: 0;
	}

	#section04 .sp-no1,
	#section04 .sp-no3,
	#section04 .sp-no5 {
		flex-direction: column-reverse;
	}

	#section04 .sp-no2,
	#section04 .sp-no4 {
		display: block;
	}

	#section04 .col-2 .col-2-content {
		width: calc(100%);
	}

	.sec04-textbox {
		border-radius: 10px 10px 0 0;
	}


/* ------------------------------------
section05 他サービスとの比較
------------------------------------ */
	.table-wrap {
		overflow-x: scroll;
	}

	table {
		white-space: nowrap;
		border-collapse: collapse;
	}

	/* 表の細かいデザイン設定 */
	th.Dtitle {
		font-size: 23px;
		height: 80px;
		line-height: 82px;
		top: -30px;
		left: 121px;
		width: 215px;
	}

	td.Ditem {
		padding: 10px 10px 0 10px;
	}

	td.other {
		padding: 10px 10px 0 10px;
	}


/* ------------------------------------
section06 料金について
------------------------------------ */
	#section06 .col-3 {
		margin: 0;
	}

	.plussymbol {
		font-size: 40px;
		font-weight: 500;
		margin: 0;
	}

	#section06 .attention {
		margin: 0;
		text-align: center;
		padding: 5px 0 0 0;
	}

	#section06 .col-2 {
		display: block;
		margin: 0;
		padding-top: 0;
	}

	#section06 .col-2 .col-2-content {
		height: auto;
		padding-top: 30px;
	}

	#section06 .col-2 .col-2-content:nth-child(2) {
		padding-right: 0;
	}


/* ------------------------------------
section07 事例紹介
------------------------------------ */
	#section07 h3.section-title {
		padding-bottom: 60px;
	}

	#section07 .col-2 {
		display: block;
	}

	#section07 .col-2 .col-2-content {
		width: calc(100%);
	}

	.col-2-hidden {
		flex-direction: column;
	}
	
	.col-2-hidden .col-2-content {
		width: calc(100%);
	}

	.sec07-img {
		padding-bottom: 15px;
	}

	#section07 .support {
		padding-bottom: 15px;
	}

	.sec07-arrow {
		padding: 0 0 12px 0;
	}

	.sec07-text {
		flex-basis: 0;
	}

	/* ボタンでさらに表示される設定 */
	.casestudy .sec07-item {
		padding-bottom: 80px;
	}


/* ------------------------------------
section08 お客さまの声
------------------------------------ */
	#section08 .col-4-content {
		width: 100%;
		padding-bottom: 20px;
	}

	#section08 .col-4-content:last-child {
		padding-bottom: 0;
	}


/* ------------------------------------
section09 ご利用の流れ
------------------------------------ */
	#section09 .sub-title {
		padding-bottom: 50px;
	}

	#section09 .main-text {
		padding: 20px;
		width: 100%;
	}


/* ------------------------------------
section10 よくあるご質問
------------------------------------ */
	#section10 h3.section-title {
		padding-bottom: 70px;
	}

	.question-box,
	.answer-box {
		margin: 0;
	}


/* ------------------------------------
section11 サービス資料・料金表をダウンロード
------------------------------------ */
	#section11 h3.section-title {
		padding-bottom: 40px;
	}

	#section11 .col-2 {
		display: block;
	}

	#section11 .col-2 .col-2-content {
		width: calc(100%);
	}

	#section11 h4.middle-title {
		padding: 15px;
		width: 100%;
	}

	#section11 h4.middle-title::before {
		top: 100%;
		left: 45%;
		margin-left: -15px;
		border: 30px solid transparent;
		border-top: 20px solid rgba(25,213,247,1);
	}

	#section11 p.sub-title {
		text-align: center;
		line-height: 1.4;
	}

	.bubble {
		padding: 15px;
	}

	.sec11-ctabtn p {
		padding: 20px;
	}

	.dummy-frame {
		font-size: 25px;
	}


	/* ------------------------------------
	フッター
	------------------------------------ */
	footer {
		height: 200px;
		padding: 20px 0;
	}

	.footer-content {
		align-items: end;
	}
	
	ul.footer-link li {
		padding: 10px 50px 10px 0;
		margin-right: 50px;
	}
	
	.footer-link li::after {
		width: 8px;
		height: 8px;
		top: 18px;
	}

	.footer-box .top-arrow {
		width: 100px;
		height: auto;
	}


}/* メディアクエリ終了 */