@charset "UTF-8";
/*
 * cmn_layout.css
 *
 */


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-family: "ヒラギノ角ゴ Pro" , "Hiragino Kaku Gothic Pro" , 'メイリオ' ,Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic" , Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	-webkit-text-size-adjust: none;
	line-height: 1.8;
	color: #111;
}

@media screen and (max-width:1039px){
body {
	font-size: 15px;
}
}

@media screen and (max-width:767px){
body {
	font-size: 14px;
}
}

body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}

input, textarea
{ margin: 0; font-size: 100%;}

label
{ cursor: pointer;}

table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}

fieldset, img
{ border: 0;}

img
{ max-width: 100%; height: auto; vertical-align: top;}

address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}

ol, ul
{ list-style: none;}

caption, th
{ text-align: left;}

h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}

q:after, q:before
{ content:'';}

a
{ cursor: pointer; }

a, input
{ outline: none; }

input, textarea
{ border-radius: 0; font-family: "ヒラギノ角ゴ Pro" , "Hiragino Kaku Gothic Pro" , 'メイリオ' ,Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic" , Verdana, Arial, Helvetica, sans-serif;}

input[type="button"],input[type="submit"],input[type="reset"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}

abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Clearfix
---------------------------------------------------------- */
.clearfix,
#contents,
.section
{
	display: block;
	min-height: 1%;
}
.clearfix:after,
#contents:after,
.section:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix,
* html #contents,
* html .section
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { 
	text-align: left;
	position:relative;
}
@media print {
	html,
	html body { *zoom: 0.65;}
}

/* !header
---------------------------------------------------------- */
#headerTop {
	width:100%;
	height:90px;
	background: rgba(255,255,255,1);
}
	#headerTop div.inner {
		width:100%;
		max-width:1120px;
		margin: 0 auto;
		position: relative;
	}
		#headerTop div.inner h1 {
			font-size:12px;
			position: absolute;
			top:5px;
			left:20px;
		}
		#headerTop div.inner p#headerLogo a {
			position: absolute;
			display: block;
			width:390px;
			top:34px;
			left:20px;
		}
			#headerTop div.inner p#headerLogo a img {
				position: absolute;
				display: block;
				width:248px;
				height: 45px;
				top:0;
				left:0;
			}
			#headerTop div.inner p#headerLogo a span {
				position: absolute;
				width:120px;
				height: 30px;
				font-size:14px;
				font-weight: 700;
				text-align: center;
				line-height: 28px;
				color: #FFF;
				background: #02ACD0;
				border-radius: 15px;
				top:7px;
				right:0;
			}
		#headerTop div.inner div.headerTel {
			position: absolute;
			width:190px;
			top:10px;
			right:20px;
		}
			#headerTop div.inner div.headerTel p.tit {
				font-size:14px;
				font-weight: 700;
				color: #FFF;
				text-align: center;
				line-height: 1.6;
				padding:0.2em;
				background: #00336a;
			}
				#headerTop div.inner div.headerTel p.number {
					font-size:20px;
					font-weight: 700;
					line-height: 1.4;
					color: #00336a;
					text-align: center;
				}
					#headerTop div.inner div.headerTel p.number i {
						font-size:80%;
						margin-right:0.4em
					}
					#headerTop div.inner div.headerTel p.number span {
						display: block;
						font-size:12px;
						font-weight: normal;
						color: #111;
					}
#header {
	width:100%;
	height:50px;
	background:#333;
	z-index: 10;
}
	#header nav.global_menu {
		width: 100%;
		max-width:1120px;
		margin: 0 auto;
	}
		#header nav.global_menu ul {
			width:100%;
			display: flex;
		}
			#header nav.global_menu ul li {
				width:100%;
				border-left:1px solid #555;
			}
			#header nav.global_menu ul li:last-child {
				border-right:1px solid #555;
			}
				#header nav.global_menu ul li a {
					display: block;
					width:100%;
					height: 50px;
					font-size:14px;
					text-align: center;
					background: #333;
					color: #FFF;
					line-height: 50px;
					transition:.6s;
				}
					#header nav.global_menu ul li a i {
						margin-right: 0.6em;
					}
					#header nav.global_menu ul li a:hover {
						background: #444;
					}
.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
}

a#panel-btn {
	display: none;
}

@media screen and (max-width:1039px){
#headerTop {
	height:80px;
}
		#headerTop div.inner h1 {
			font-size:11px;
		}
		#headerTop div.inner p#headerLogo a {
			width:350px;
			top:30px;
		}
			#headerTop div.inner p#headerLogo a img {
				width:220px;
				height: 40px;
			}
			#headerTop div.inner p#headerLogo a span {
				width:110px;
				height: 28px;
				font-size:13px;
				line-height: 26px;
			}
		#headerTop div.inner div.headerTel {
			width:170px;
			top:8px;
		}
			#headerTop div.inner div.headerTel p.tit {
				font-size:13px;
			}
				#headerTop div.inner div.headerTel p.number {
					font-size:18px;
				}
					#headerTop div.inner div.headerTel p.number span {
						font-size:11px;
					}

				#header nav.global_menu ul li a {
					font-size:12px;
				}
					#header nav.global_menu ul li a i {
						margin-right: 0.3em;
					}
					#header nav.global_menu ul li a:hover {
						background: #333;
					}
	
	#header .global_menu {
		z-index: 301;
	}
	#panel-btn {
		z-index: 400;
	}
	#header {
		z-index: 100;
	}
}

@media screen and (max-width:767px){
#headerTop {
	height:70px;
	position: fixed;
}
		#headerTop div.inner h1 {
			font-size:10px;
			top:4px;
			left:10px;
		}
		#headerTop div.inner p#headerLogo a {
			width:296px;
			top:28px;
			left:10px;
		}
			#headerTop div.inner p#headerLogo a img {
				width:190px;
				height: 34px;
			}
			#headerTop div.inner p#headerLogo a span {
				width:96px;
				height: 26px;
				font-size:12px;
				line-height: 24px;
				top:4px;
			}
		#headerTop div.inner div.headerTel {
			display: none;
		}
#header {
	width:100%;
	height:0;
	background: none;
}
	#header nav.global_menu { /* メニュー全体のスタイル */
		justify-content: center;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: auto;
		right: -100%;
		padding: 120px 30px 0 30px;
		color: #FFF;
		background: #333;
		overflow-y:  auto;
		text-align: center;
		border-radius: 0;
		transition:.6s;
	}
		#header nav.global_menu ul {
			width:100%;
			flex-wrap: wrap;
		}
			#header nav.global_menu ul li {
				display: block;
				width:100%;
				text-align:center;
				border-left:0;
			}
			#header nav.global_menu ul li:last-child {
				border-right:0;
			}
				#header nav.global_menu ul li a { /* 各項目のスタイル */
					display: block;
					width:100%;
					height: 60px;
					padding: 0 ;
					color:#FFF;
					font-size:14px;
					line-height:60px;
					border-top:1px solid #444;
				}
				#header nav.global_menu ul li:last-child a { /* 各項目のスタイル */
					border-bottom:1px solid #444;
				}
					#header nav.global_menu ul li a i {
						margin-right: 0.6em;
					}
	/* nav open */
	.open {
		overflow: hidden;
	}
	.open #overlay {
		display: block;
	}
	.open .global_menu  {
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
		transition:.6s;
	}
	
	/* z-index */
	.global_menu {
		z-index: 301;
	}
	#panel-btn {
		z-index: 400;
	}
	#headerTop {
		z-index: 100;
	}

a#panel-btn {
	width: 44px;
	height: 44px;
	display: block;
	float:right;
	position:fixed;
	top:13px;
	right:10px;
	z-index:400;
}
#panel-btn{
	display: inline-block;
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #00336a;
}
#panel-btn-icon{
	display: block;
	position: absolute;
	top: 62%;
	left: 50%;
	width: 24px;
	height: 2px;
	background:#FFF;
	margin: -6px 0 0 -12px;
	transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
	display: block;
	content: "";
	position: absolute;
	top: 60%;
	left: 0;
	width: 24px;
	height: 2px;
	background:#FFF;
	transition: .3s;
}
#panel-btn-icon:before{
	margin-top: -7px;
}
#panel-btn-icon:after{
	margin-top: 5px;
}
#panel-btn .close{
	background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
	margin-top: 0;
}
#panel-btn .close:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
}

@media screen and (max-width:360px){
		#headerTop div.inner p#headerLogo a {
			width:270px;
			top:28px;
		}
			#headerTop div.inner p#headerLogo a img {
				width:170px;
				height: 31px;
			}
			#headerTop div.inner p#headerLogo a span {
				width:90px;
				height: 24px;
				font-size:11px;
				line-height: 23px;
			}
	#header nav.global_menu { /* メニュー全体のスタイル */
		padding: 100px 30px 0 30px;
		color: #FFF;
		background: #333;
		overflow-y:  auto;
		text-align: center;
		border-radius: 0;
		transition:.6s;
	}
				#header nav.global_menu ul li a { /* 各項目のスタイル */
					height: 50px;
					line-height:50px;
				}
}

/* !mainvisual
---------------------------------------------------------- */
.main {
	position: relative;
	width:100%;
	height:calc(100vh - 140px);
	background: url("../img/main.jpg") 50% 50% no-repeat;
	background-size: cover;
	overflow: hidden;
	z-index:0;
	-webkit-animation: bg 1.5s 1 ease;
	-moz-animation: bg 1.5s 1 ease;
	animation: bg 1.5s 1 ease ;
}
	.main div.copyArea {
		position: absolute;
		width:800px;
		bottom:10%;
		left:5%;
	}
		.main div.copyArea p.enCopy {
			font-family: 'Oswald', sans-serif;
			font-size:18px;
			font-weight: 700;
			letter-spacing:0.2em;
			color:#009ED2;
			margin-bottom: 10px;
			-webkit-animation: enCopy 2.8s 1 ease;
			-moz-animation: enCopy 2.8s 1 ease;
			animation: enCopy 2.8s 1 ease ;
		}
		.main div.copyArea h2 {
			font-size:42px;
			font-weight: 700;
			line-height: 1.6;
			color: #FFF;
			font-feature-settings: "palt";
			letter-spacing:0.07em;
			margin-bottom: 40px;
			-webkit-animation: copy 2s 1 ease;
			-moz-animation: copy 2s 1 ease;
			animation: copy 2s 1 ease ;
		}
		.main div.copyArea p.read {
			font-size:22px;
			line-height: 1.6;
			color: #FFF;
			-webkit-animation: read 2.4s 1 ease;
			-moz-animation: read 2.4s 1 ease;
			animation: read 2.4s 1 ease ;
		}

/* !アニメーション設定 */
@keyframes bg {
	0% {
		opacity: 0;
    }
	40% {
		opacity: 0;
    }
	100% {
		opacity: 1;
    }
}

@keyframes enCopy {
	0% {
		opacity: 0;
    }
	80% {
		opacity: 0;
    }
	100% {
		transform: translateY(0);
    }
}

@keyframes copy {
    0% {
		opacity: 0;
		transform: translateY(20px);
    }
	70% {
		opacity: 0;
		transform: translateY(20px);
    }
	100% {
		transform: translateY(0);
    }
}

@keyframes read {
    0% {
		opacity: 0;
		transform: translateY(20px);
    }
	75% {
		opacity: 0;
		transform: translateY(20px);
    }
	100% {
		transform: translateY(0);
    }
}

@media screen and (max-width:1039px){
.main {
	height:600px;
}
	.main div.copyArea {
		width:680px;
		bottom:8%;
	}
		.main div.copyArea p.enCopy {
			font-size:17px;
		}
		.main div.copyArea h2 {
			font-size:38px;
		}
		.main div.copyArea p.read {
			font-size:21px;
		}
}

@media screen and (max-width:767px){
.main {
	height:400px;
	background: url("../img/main_sp.jpg") 50% 50% no-repeat;
	background-size: cover;
}
	.main div.copyArea {
		width:320px;
		bottom:30px;
		left:20px;
	}
		.main div.copyArea p.enCopy {
			font-size:12px;
			margin-bottom: 5px;
		}
		.main div.copyArea h2 {
			font-size:19px;
			margin-bottom: 25px;
		}
		.main div.copyArea p.read {
			font-size:12px;
		}
}

@media screen and (max-width:360px){
.main {
	height:360px;
	background: url("../img/main_sp.jpg") 50% 50% no-repeat;
	background-size: cover;
}
	.main div.copyArea {
		width:300px;
		bottom:25px;
		left:20px;
	}
		.main div.copyArea p.enCopy {
			font-size:12px;
		}
		.main div.copyArea h2 {
			font-size:18px;
		}
		.main div.copyArea p.read {
			font-size:11px;
		}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
	position:relative;
}

.linkInPage {
	margin-top:-50px;
	padding-top:50px;
}

@media screen and (max-width:1039px){
.linkInPage {
	margin-top:-50px;
	padding-top:50px;
}
}

@media screen and (max-width:767px){
.linkInPage {
	margin-top:-70px;
	padding-top:70px;
}
}

/* !TOP About
---------------------------------------------------------- */
.topAbout {
	width:100%;
	padding:100px 50px;
	position: relative;
	overflow-x: hidden;
}
	.topAbout div.inner {
		width:100%;
		max-width:1120px;
		margin: 0 auto;
	}
		.topAbout div.inner h2 {
			position: relative;
			font-size:36px;
			font-weight: 700;
			line-height: 1.5;
			text-align: center;
			font-feature-settings: "palt";
			padding-bottom:35px;
			margin-bottom: 70px;
			z-index: 3;
		}
			.topAbout div.inner h2:after {
				position: absolute;
				content:"";
				width:60px;
				height: 6px;
				background: #02ACD0;
				border-radius: 3px;
				bottom:0;
				left:50%;
				margin-left: -30px;
			}
		.topAbout div.inner div.intro {
			position: relative;
			width:100%;
			max-width: 480px;
			margin: 0 auto;
			z-index: 4;
		}
			.topAbout div.inner div.intro p.read {
				line-height: 2.2;
				margin-bottom: 30px;
			}
			.topAbout div.inner div.intro p.read:last-child {
				margin-bottom: 0;
			}
	.topAbout div.photo1 {
		position: absolute;
		display: block;
		width:560px;
		height: 560px;
		border:1px solid #E5F7FA;
		border-radius: 50%;
		padding:15px;
		top:180px;
		left:-15%;
		z-index: 1;
	}
		.topAbout div.photo1 img {
			display: block;
			width:100%;
			border:15px solid #E5F7FA;
			border-radius: 50%;
		}
	.topAbout div.photo2 {
		position: absolute;
		display: block;
		width:424px;
		height: 424px;
		border:1px solid #E5EAF0;
		border-radius: 50%;
		padding:12px;
		top:40px;
		right:-7%;
		z-index: 1;
	}
		.topAbout div.photo2 img {
			display: block;
			width:100%;
			border:12px solid #E5EAF0;
			border-radius: 50%;
		}
	.topAbout div.photo3 {
		position: absolute;
		display: block;
		width:260px;
		height: 260px;
		border:1px solid #E5F7FA;
		border-radius: 50%;
		padding:10px;
		bottom:0;
		right:10%;
		z-index: 1;
	}
		.topAbout div.photo3 img {
			display: block;
			width:100%;
			border:10px solid #E5F7FA;
			border-radius: 50%;
		}

@media screen and (max-width:1039px){
.topAbout {
	padding:90px 30px;
}
		.topAbout div.inner h2 {
			font-size:30px;
			margin-bottom: 60px;
		}
		.topAbout div.inner div.intro {
			max-width: 50%;
		}
	.topAbout div.photo1 {
		width:460px;
		height: 460px;
		top:220px;
		left:-230px;
	}
	.topAbout div.photo2 {
		width:324px;
		height: 324px;
		top:120px;
		right:-120px;
	}
	.topAbout div.photo3 {
		width:220px;
		height: 220px;
		right:20px;
	}
}

@media screen and (max-width:767px){
.topAbout {
	padding:80px 25px 180px 25px;
}
		.topAbout div.inner h2 {
			font-size:20px;
			margin-top: 200px;
			padding-bottom:30px;
			margin-bottom: 40px;
		}
			.topAbout div.inner h2:after {
				width:50px;
				height: 4px;
				margin-left: -25px;
			}
		.topAbout div.inner div.intro {
			max-width: 100%;
		}
	.topAbout div.photo1 {
		width:240px;
		height: 240px;
		padding:8px;
		top:10px;
		left:-60px;
	}
		.topAbout div.photo1 img {
			border:8px solid #E5F7FA;
		}
	.topAbout div.photo2 {
		width:180px;
		height: 180px;
		padding:8px;
		top:100px;
		right:-40px;
	}
		.topAbout div.photo2 img {
			border:8px solid #E5EAF0;
		}
	.topAbout div.photo3 {
		width:160px;
		height: 160px;
		padding:7px;
		bottom:0;
		right:10%;
	}
		.topAbout div.photo3 img {
			width:100%;
			border:7px solid #E5F7FA;
		}
}

@media screen and (max-width:360px){
		.topAbout div.inner h2 {
			font-size:19px;
		}
}

/* !TOP 主な対応エリア
---------------------------------------------------------- */
.topArea {
	width:100%;
	padding:50px 50px 60px 50px;
}
		.topArea div.inner {
			position: relative;
			width:100%;
			max-width:1120px;
			background: #F3F3EF;
			border: 1px solid #707070;
			border-radius: 8px;
			margin:0 auto ;
		}
			.topArea div.inner div.article {
				position: relative;
				width:55%;
				padding:40px 40px 40px 0;
				margin-left:45%;
				z-index: 2;
			}
				.topArea div.inner h2 {
					font-size:30px;
					font-weight: 700;
					line-height: 1.5;
					margin-bottom:40px;
				}
				.topArea div.inner h3 {
					font-size:18px;
					font-weight: 700;
					line-height: 1.6;
					margin-bottom:30px;
				}
			.topArea div.inner img.map {
				position: absolute;
				display: block;
				width:42%;
				top:0;
				left:0;
				z-index: 1;
			}

@media screen and (max-width:1039px){
.topArea {
	padding:40px 30px 60px 30px;
}
			.topArea div.inner div.article {
				padding:40px 30px 30px 0;
			}
				.topArea div.inner h2 {
					font-size:26px;
					margin-bottom:30px;
				}
				.topArea div.inner h3 {
					font-size:16px;
				}
			.topArea div.inner img.map {
				width:48%;
			}
}

@media screen and (max-width:767px){
.topArea {
	padding:30px 20px 50px 20px;
}
		.topArea div.inner {
			position: relative;
			width:100%;
			max-width:1120px;
			background: #F3F3EF;
			border: 1px solid #707070;
			border-radius: 8px;
			margin:0 auto ;
		}
			.topArea div.inner div.article {
				position: relative;
				width:100%;
				padding:140px 20px 30px 20px;
				margin-left:0;
				z-index: 2;
			}
				.topArea div.inner h2 {
					font-size:20px;
					font-weight: 700;
					line-height: 1.5;
					margin-bottom:25px;
				}
				.topArea div.inner h3 {
					font-size:15px;
				}
			.topArea div.inner img.map {
				position: absolute;
				display: block;
				width:200px;
				left:50%;
				margin-left: -100px;
			}
}

/* !TOP 主な業種
---------------------------------------------------------- */
.topIndustry {
	width:100%;
	padding:0 50px 100px 50px;
}
	.topIndustry div.inner {
		width:100%;
		max-width:700px;
		margin:0 auto ;
	}
		.topIndustry div.inner h2 {
			position: relative;
			text-align: center;
			font-feature-settings: "palt";
			margin-bottom: 30px;
		}
			.topIndustry div.inner h2:before {
				position: absolute;
				content: "";
				width:100%;
				height: 1px;
				background: #707070;
				top:50%;
				left:0;
				z-index: 1;
			}
			.topIndustry div.inner h2 span {
				position: relative;
				display: inline-block;
				font-size:30px;
				font-weight: 700;
				background: #FFF;
				padding:0 0.6em;
				z-index: 2;
			}

@media screen and (max-width:1039px){
.topIndustry {
	padding:0 30px 90px 30px;
}
	.topIndustry div.inner {
		max-width:600px;
	}
		.topIndustry div.inner h2 {
			margin-bottom: 25px;
		}
			.topIndustry div.inner h2 span {
				font-size:26px;
			}
}

@media screen and (max-width:767px){
.topIndustry {
	padding:0 20px 80px 20px;
}
			.topIndustry div.inner h2 span {
				font-size:20px;
			}
}

/* !TOP 選ばれる理由
---------------------------------------------------------- */
.topReason {
	width:100%;
	padding:100px 50px 60px 50px;
	background: url("../img/reason_bg.jpg") 50% 50% no-repeat;
	background-size: cover;
}
	.topReason div.inner {
		width:100%;
		max-width:1120px;
		margin:0 auto ;
	}
		.topReason div.inner h2 {
			position: relative;
			font-size:36px;
			font-weight: 700;
			line-height: 1.5;
			text-align: center;
			font-feature-settings: "palt";
			padding-bottom:35px;
			margin-bottom: 60px;
			z-index: 3;
		}
			.topReason div.inner h2:after {
				position: absolute;
				content:"";
				width:60px;
				height: 6px;
				background: #02ACD0;
				border-radius: 3px;
				bottom:0;
				left:50%;
				margin-left: -30px;
			}
		.topReason div.inner ul.reasonList {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.topReason div.inner ul.reasonList li {
				width:30%;
				margin-right: 5%;
				background: #FFF;
				padding:40px 30px;
				border-radius: 5px;
				box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2);
				margin-bottom: 50px;
			}
			.topReason div.inner ul.reasonList li:nth-child(3n) {
				margin-right: 0;
			}
				.topReason div.inner ul.reasonList li img.icon {
					display: block;
					width:150px;
					margin: 0 auto 20px auto;
				}
				.topReason div.inner ul.reasonList li h3 {
					font-size:20px;
					font-weight: 700;
					line-height: 1.5;
					text-align: center;
					margin-bottom: 20px;
				}

@media screen and (max-width:1039px){
.topReason {
	padding:90px 30px 50px 30px;
}
		.topReason div.inner h2 {
			font-size:32px;
			margin-bottom: 50px;
		}
			.topReason div.inner ul.reasonList li {
				padding:30px 25px;
				margin-bottom: 35px;
			}
			.topReason div.inner ul.reasonList li:nth-child(3n) {
				margin-right: 0;
			}
				.topReason div.inner ul.reasonList li img.icon {
					width:120px;
				}
				.topReason div.inner ul.reasonList li h3 {
					font-size:18px;
				}
}

@media screen and (max-width:767px){
.topReason {
	padding:80px 20px 40px 20px;
}
		.topReason div.inner h2 {
			font-size:19px;
			padding-bottom:30px;
			margin-bottom: 40px;
		}
			.topReason div.inner h2:after {
				width:50px;
				height: 4px;
				margin-left: -25px;
			}
		.topReason div.inner ul.reasonList {
			width:100%;
			max-width:320px;
			margin: 0 auto;
		}
			.topReason div.inner ul.reasonList li {
				width:100%;
				margin-right: 0;
				padding:30px 20px;
				margin-bottom: 30px;
			}
				.topReason div.inner ul.reasonList li h3 {
					font-size:18px;
				}
}

@media screen and (max-width:360px){
		.topReason div.inner h2 {
			font-size:18px;
		}
}

/* !TOP プラン
---------------------------------------------------------- */
.topPlan {
	width:100%;
	padding:100px 50px 100px 50px;
	background: url("../img/plan_bg.png") 0 0 repeat;
	background-size: 6px 6px;
}
	.topPlan div.inner {
		width:100%;
		max-width:1120px;
		margin:0 auto ;
	}
		.topPlan div.inner h2 {
			position: relative;
			font-size:36px;
			font-weight: 700;
			line-height: 1.5;
			text-align: center;
			font-feature-settings: "palt";
			padding-bottom:35px;
			margin-bottom: 60px;
			z-index: 3;
		}
			.topPlan div.inner h2:after {
				position: absolute;
				content:"";
				width:60px;
				height: 6px;
				background: #02ACD0;
				border-radius: 3px;
				bottom:0;
				left:50%;
				margin-left: -30px;
			}
		.topPlan div.inner ul.planNavi {
			width:100%;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 60px;
		}
			.topPlan div.inner ul.planNavi li {
				width:49%;
				margin-right: 2%;
				margin-bottom: 10px;
			}
			.topPlan div.inner ul.planNavi li:nth-child(even) {
				width:48%;
				margin-right: 0;
			}
				.topPlan div.inner ul.planNavi li a {
					position: relative;
					display: block;
					width:100%;
					font-size:17px;
					font-weight: 700;
					line-height: 1.5;
					text-align: center;
					padding:0.4em 0.6em;
					border:1px solid #707070;
					border-radius: 4px;
					color: #111;
					transition:.6s;
				}
					.topPlan div.inner ul.planNavi li a i {
						position: absolute;
						font-size:74%;
						top:34%;
						right:20px;
					}
					.topPlan div.inner ul.planNavi li a:hover {
						background: #111;
						border:1px solid #111;
						color: #FFF;
					}
		.topPlan div.inner div.planBox {
			width:100%;
			background: #FFF;
			padding:50px 60px;
		}
			.topPlan div.inner div.planBox ul.label {
				width:100;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-bottom: 10px;
			}
				.topPlan div.inner div.planBox ul.label li {
					display: inline-block;
					position: relative;
					font-size:14px;
					line-height: 1.5;
					padding:0.3em 1.1em 0.3em 1.8em;
					border-radius:20px;
					margin-right: 5px;
					margin-bottom: 5px;
				}
				.topPlan div.inner div.planBox ul.label li.page {
					color: #8BA827;
					background: #E5EFC3;
				}
					.topPlan div.inner div.planBox ul.label li.page:before {
						position: absolute;
						content:"";
						width:6px;
						height: 6px;
						background: #8BA827;
						border-radius: 50%;
						top:42%;
						left:14px;
					}
				.topPlan div.inner div.planBox ul.label li.cms {
					color: #C5811A;
					background: #FDE8C7;
				}
					.topPlan div.inner div.planBox ul.label li.cms:before {
						position: absolute;
						content:"";
						width:6px;
						height: 6px;
						background: #C5811A;
						border-radius: 50%;
						top:42%;
						left:14px;
					}
				.topPlan div.inner div.planBox ul.label li.print {
					color: #CB5C5F;
					background: #FCDBDC;
				}
					.topPlan div.inner div.planBox ul.label li.print:before {
						position: absolute;
						content:"";
						width:6px;
						height: 6px;
						background: #CB5C5F;
						border-radius: 50%;
						top:42%;
						left:14px;
					}
				.topPlan div.inner div.planBox ul.label li.photo {
					color: #1096B2;
					background: #CCEEF6;
				}
					.topPlan div.inner div.planBox ul.label li.photo:before {
						position: absolute;
						content:"";
						width:6px;
						height: 6px;
						background: #1096B2;
						border-radius: 50%;
						top:42%;
						left:14px;
					}
				.topPlan div.inner div.planBox ul.label li.movie {
					color: #00336A;
					background: #CCD6E1;
				}
					.topPlan div.inner div.planBox ul.label li.movie:before {
						position: absolute;
						content:"";
						width:6px;
						height: 6px;
						background: #00336A;
						border-radius: 50%;
						top:42%;
						left:14px;
					}
			.topPlan div.inner div.planBox h3 {
				font-size:28px;
				font-weight: 700;
				line-height: 1.6;
				font-feature-settings: "palt";
				margin-bottom: 30px;
			}
			.topPlan div.inner div.planBox div.article {
				width:100%;
				display: flex;
				justify-content: space-between;
			}
				.topPlan div.inner div.planBox div.article div.left {
					width:45%;
				}
					.topPlan div.inner div.planBox div.article div.left img.photo {
						display: block;
						width:100%;
						max-width:340px;
						margin-bottom: 20px;
					}
					.topPlan div.inner div.planBox div.article div.left p.price {
						font-size:22px;
						font-weight: 700;
					}
						.topPlan div.inner div.planBox div.article div.left p.price span {
							font-family: 'Oswald', sans-serif;
							font-size:180%;
							letter-spacing: 0.04em;
						}
				.topPlan div.inner div.planBox div.article div.right {
					width:55%;
				}
					.topPlan div.inner div.planBox div.article div.right p.read {
						margin-bottom: 30px;
					}
					.topPlan div.inner div.planBox div.article div.right h4.recommendTit {
						display: inline-block;
						font-size:16px;
						font-weight: 700;
						line-height: 1.4;
						color: #FFF;
						background: #333;
						padding:0.5em 0.8em;
						border-radius: 4px;
						margin-bottom: 20px;
					}
					.topPlan div.inner div.planBox div.article div.right ul.recommend {
						margin-bottom: 40px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend li {
							font-size:16px;
							font-weight: 700;
							line-height: 1.6;
							padding-left:30px;
							background: url("../img/icon_check.png") 0 4px no-repeat;
							background-size:20px 20px; 
							margin-bottom: 10px;
						}
					.topPlan div.inner div.planBox div.article div.right ul.recommend2 {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 40px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend2 li {
							width:50%;
							font-size:16px;
							font-weight: 700;
							line-height: 1.6;
							padding-left:30px;
							background: url("../img/icon_check.png") 0 4px no-repeat;
							background-size:20px 20px; 
							margin-bottom: 10px;
						}
					.topPlan div.inner div.planBox div.article div.right a.btn {
						display: inline-block;
						font-size:18px;
						font-weight: 700;
						color: #FFF;
						line-height: 1.5;
						padding:0.7em 3em 0.7em 1.2em;
						border-radius: 50px;
						background: #00336A;
						position: relative;
						transition: .6s;
					}
					.topPlan div.inner div.planBox div.article div.right a.btn:hover {
						background: #02ACD0;
					}
						.topPlan div.inner div.planBox div.article div.right a.btn span.arrow {
							position: absolute;
							display: inline-block;
							width: 20px;
							height: 2px;
							margin-top: 5.7px;
							border-radius: 9999px;
							background-color: #FFF;
							top:40%;
							right:20px;
							transition: .2s;
						}
							.topPlan div.inner div.planBox div.article div.right a.btn span.arrow::before {
								content: "";
								position: absolute;
								width:8px;
								height: 2px;
								background: #FFF;
								top:-3px;
								right:0;
								transform: rotate(45deg);
							}
							.topPlan div.inner div.planBox div.article div.right a.btn:hover span.arrow {
								width: 27px;
								right:13px;
							}
			.topPlan div.inner div.planBox h4.areaTit {
				display: inline-block;
				font-size:16px;
				font-weight: 700;
				line-height: 1.4;
				color: #FFF;
				background: #333;
				padding:0.5em 0.8em;
				border-radius: 4px;
				margin-bottom: 20px;
			}
			.topPlan div.inner div.planBox ul.clientList {
				width:100%;
				display: flex;
				flex-wrap: wrap;
			}
				.topPlan div.inner div.planBox ul.clientList li {
					width:33.33%;
					margin-bottom: 5px;
				}
				.topPlan div.inner div.planBox ul.clientList li i {
					color: #02ACD0;
					margin-right: 0.4em;
				}
		.topPlan div.inner div.planWorksBox {
			width:100%;
			background: #FFF;
			margin-bottom: 60px;
		}
			.topPlan div.inner div.planWorksBox h3 {
				font-size:16px;
				font-weight: 700;
				line-height: 1.6;
				font-feature-settings: "palt";
				color: #FFF;
				text-align: center;
				padding:0.8em 0.8em;
				background: #111;
				position: relative;
				cursor:pointer;
				transition: 0.6s;
			}
				.topPlan div.inner div.planWorksBox h3:hover {
					background: #02ACD0;
				}
				.topPlan div.inner div.planWorksBox h3 i {
					line-height:1;
					color: #FFF;
					position: absolute;
					right: 20px;
					top: 35%;
					transition:0.4s;
				}
					.topPlan div.inner div.planWorksBox h3.active i {
						transform: rotateZ(180deg);
						transition:0.4s;
					}
			.topPlan div.inner div.planWorksBox div.worksBox {
				width:100%;
				padding:50px 60px;
				display: none;
			}
			.topPlan div.inner div.planWorksBox ul.worksList {
				width:100%;
			}
				.topPlan div.inner div.planWorksBox ul.worksList li {
					width:100%;
					margin-bottom: 60px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li:last-child {
					margin-bottom: 0;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li div.image {
						width: 100%;
						position: relative;
						margin-bottom:30px;
					}
						.topPlan div.inner div.planWorksBox ul.worksList li div.image img.pc {
							position: relative;
							display: block;
							width:100%;
							max-width:1000px;
							z-index: 1;
						}
						.topPlan div.inner div.planWorksBox ul.worksList li div.image div.window {
							position: absolute;
							width:79%;
							height: 86.5%;
							background: #999;
							top:4%;
							left:10.5%;
							overflow-y: scroll;
							z-index: 2;
						}
							.topPlan div.inner div.planWorksBox ul.worksList li div.image div.window img.capture {
								display: block;
								width:100%;
							}
				.topPlan div.inner div.planWorksBox ul.worksList li img.panph {
					display: block;
					width:100%;
					margin-bottom: 25px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li img.logo {
					display: block;
					width:100%;
					max-width:200px;
					margin:50px auto 25px auto;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li p.kind {
					text-align: center;
					margin-bottom: 10px;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.kind span {
						display: inline-block;
						font-size:14px;
						padding: 0.3em 0.6em;
						background: #E8E8E8;
						border-radius: 4px;
					}
				.topPlan div.inner div.planWorksBox ul.worksList li p.name {
					font-size:20px;
					font-weight: 700;
					line-height: 1.6;
					text-align: center;
					font-feature-settings: "palt";
					margin-bottom: 20px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li p.link {
					text-align: center;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.link a {
						display: inline-block;
						font-size:16px;
						font-weight: 700;
						line-height: 1.5;
						color: #00336A;
						padding:0.4em 1.4em;
						border:2px solid #00336A;
						border-radius: 30px;
						background: #FFF;
						transition: .6s;
					}
						.topPlan div.inner div.planWorksBox ul.worksList li p.link a i {
							margin-left: 0.8em;
						}
						.topPlan div.inner div.planWorksBox ul.worksList li p.link a:hover {
							background: #00336A;
							color: #FFF;
						}

@media screen and (max-width:1039px){
.topPlan {
	padding:90px 30px 90px 30px;
}
		.topPlan div.inner h2 {
			font-size:32px;
			margin-bottom: 50px;
		}
		.topPlan div.inner ul.planNavi {
			margin-bottom: 50px;
		}
				.topPlan div.inner ul.planNavi li a {
					font-size:13px;
					padding:0.6em 0.6em;
				}
					.topPlan div.inner ul.planNavi li a i {
						top:36%;
						right:10px;
					}
					.topPlan div.inner ul.planNavi li a:hover {
						background: none;
						border:1px solid #707070;
						color: #111;
					}
		.topPlan div.inner div.planBox {
			padding:40px 40px;
		}
				.topPlan div.inner div.planBox ul.label li {
					font-size:13px;
				}
			.topPlan div.inner div.planBox h3 {
				font-size:26px;
			}
					.topPlan div.inner div.planBox div.article div.left p.price {
						font-size:20px;
					}
				.topPlan div.inner div.planBox div.article div.right {
					width:50%;
				}
					.topPlan div.inner div.planBox div.article div.right h4.recommendTit {
						font-size:15px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend li {
							font-size:15px;
							background: url("../img/icon_check.png") 0 3px no-repeat;
							background-size:20px 20px; 
						}
					.topPlan div.inner div.planBox div.article div.right ul.recommend2 {
						margin-bottom: 30px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend2 li {
							width:100%;
							font-size:15px;
							background: url("../img/icon_check.png") 0 3px no-repeat;
							background-size:20px 20px;
						}
					.topPlan div.inner div.planBox div.article div.right a.btn {
						font-size:16px;
						padding:0.7em 2.8em 0.7em 1.8em;
						border-radius: 50px;
					}
					.topPlan div.inner div.planBox div.article div.right a.btn:hover {
						background: #00336A;
					}
						.topPlan div.inner div.planBox div.article div.right a.btn span.arrow {
							right:15px;
						}
							.topPlan div.inner div.planBox div.article div.right a.btn:hover span.arrow {
								width: 20px;
								right:15px;
							}
			.topPlan div.inner div.planBox h4.areaTit {
				font-size:15px;
			}
				.topPlan div.inner div.planBox ul.clientList li {
					width:50%;
				}
		.topPlan div.inner div.planWorksBox {
			margin-bottom: 50px;
		}
			.topPlan div.inner div.planWorksBox h3 {
				font-size:15px;
			}
				.topPlan div.inner div.planWorksBox h3:hover {
					background: #111;
				}
			.topPlan div.inner div.planWorksBox div.worksBox {
				width:100%;
				padding:50px 60px;
				display: none;
			}
				.topPlan div.inner div.planWorksBox ul.worksList li {
					margin-bottom: 60px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li:last-child {
					margin-bottom: 0;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.kind span {
						font-size:13px;
					}
				.topPlan div.inner div.planWorksBox ul.worksList li p.name {
					font-size:18px;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.link a {
						font-size:15px;
					}
						.topPlan div.inner div.planWorksBox ul.worksList li p.link a:hover {
							background: #FFF;
							color: #00336A;
						}
}

@media screen and (max-width:767px){
.topPlan {
	padding:80px 20px 80px 20px;
}
		.topPlan div.inner h2 {
			font-size:20px;
			padding-bottom:30px;
			margin-bottom: 40px;
		}
			.topPlan div.inner h2:after {
				width:50px;
				height: 4px;
				margin-left: -25px;
			}
		.topPlan div.inner ul.planNavi {
			width:100%;
			max-width: 340px;
			margin:0 auto 40px auto;
		}
			.topPlan div.inner ul.planNavi li {
				width:100%;
				margin-right: 0;
				margin-bottom: 10px;
			}
			.topPlan div.inner ul.planNavi li:nth-child(even) {
				width:100%;
			}
				.topPlan div.inner ul.planNavi li a {
					font-size:13px;
				}
					.topPlan div.inner ul.planNavi li a i {
						right:7px;
					}
		.topPlan div.inner div.planBox {
			max-width:340px;
			padding:30px 20px;
			margin: 0 auto;
		}
				.topPlan div.inner div.planBox ul.label li {
					font-size:12px;
				}
					.topPlan div.inner div.planBox ul.label li.page:before {
						width:5px;
						height: 5px;
						top:40%;
					}
					.topPlan div.inner div.planBox ul.label li.cms:before {
						width:5px;
						height: 5px;
						top:40%;
					}
					.topPlan div.inner div.planBox ul.label li.print:before {
						width:5px;
						height: 5px;
						top:40%;
					}
					.topPlan div.inner div.planBox ul.label li.photo:before {
						width:5px;
						height: 5px;
						top:40%;
					}
					.topPlan div.inner div.planBox ul.label li.movie:before {
						width:5px;
						height: 5px;
						top:40%;
					}
			.topPlan div.inner div.planBox h3 {
				font-size:20px;
			}
			.topPlan div.inner div.planBox div.article {
				flex-wrap: wrap;
			}
				.topPlan div.inner div.planBox div.article div.left {
					width:100%;
					margin-bottom: 30px;
				}
					.topPlan div.inner div.planBox div.article div.left img.photo {
						max-width:280px;
						margin:0 auto 10px auto;
					}
					.topPlan div.inner div.planBox div.article div.left p.price {
						font-size:16px;
					}
						.topPlan div.inner div.planBox div.article div.left p.price span {
							font-size:200%;
						}
				.topPlan div.inner div.planBox div.article div.right {
					width:100%;
				}
					.topPlan div.inner div.planBox div.article div.right h4.recommendTit {
						font-size:14px;
					}
					.topPlan div.inner div.planBox div.article div.right ul.recommend {
						margin-bottom: 30px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend li {
							font-size:14px;
							padding-left:26px;
							background: url("../img/icon_check.png") 0 2px no-repeat;
							background-size:20px 20px; 
						}
					.topPlan div.inner div.planBox div.article div.right ul.recommend2 {
						margin-bottom: 30px;
					}
						.topPlan div.inner div.planBox div.article div.right ul.recommend2 li {
							font-size:14px;
							padding-left:26px;
							background: url("../img/icon_check.png") 0 2px no-repeat;
							background-size:20px 20px; 
						}
					.topPlan div.inner div.planBox div.article div.right a.btn {
						font-size:14px;
					}
			.topPlan div.inner div.planBox h4.areaTit {
				font-size:14px;
			}
				.topPlan div.inner div.planBox ul.clientList li {
					width:100%;
				}
		.topPlan div.inner div.planWorksBox {
			max-width:340px;
			margin: 0 auto 40px auto;
		}
			.topPlan div.inner div.planWorksBox h3 {
				font-size:14px;
			}
				.topPlan div.inner div.planWorksBox h3 span {
					display: none;
				}
				.topPlan div.inner div.planWorksBox h3 i {
					right: 15px;
				}
			.topPlan div.inner div.planWorksBox div.worksBox {
				padding:30px 20px;
			}
			.topPlan div.inner div.planWorksBox ul.worksList {
				width:100%;
			}
				.topPlan div.inner div.planWorksBox ul.worksList li {
					width:100%;
					margin-bottom: 40px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li:last-child {
					margin-bottom: 0;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li div.image {
						width: 100%;
						position: relative;
						margin-bottom:15px;
					}
						.topPlan div.inner div.planWorksBox ul.worksList li div.image img.pc {
							position: relative;
							display: block;
							width:100%;
							max-width:1000px;
							z-index: 1;
						}
						.topPlan div.inner div.planWorksBox ul.worksList li div.image div.window {
							position: absolute;
							width:79%;
							height: 86.5%;
							background: #999;
							top:4%;
							left:10.5%;
							overflow-y: scroll;
							z-index: 2;
						}
							.topPlan div.inner div.planWorksBox ul.worksList li div.image div.window img.capture {
								display: block;
								width:100%;
							}
				.topPlan div.inner div.planWorksBox ul.worksList li img.logo {
					max-width:120px;
					margin:30px auto 25px auto;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li p.kind {
					text-align: center;
					margin-bottom: 10px;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.kind span {
						display: inline-block;
						font-size:12px;
						padding: 0.3em 0.6em;
						background: #E8E8E8;
						border-radius: 4px;
					}
				.topPlan div.inner div.planWorksBox ul.worksList li p.name {
					font-size:16px;
					font-weight: 700;
					line-height: 1.6;
					text-align: center;
					margin-bottom: 15px;
				}
				.topPlan div.inner div.planWorksBox ul.worksList li p.link {
					text-align: center;
				}
					.topPlan div.inner div.planWorksBox ul.worksList li p.link a {
						display: inline-block;
						font-size:14px;
						font-weight: 700;
						line-height: 1.5;
						color: #00336A;
						padding:0.4em 1.4em;
						border:2px solid #00336A;
						border-radius: 30px;
						background: #FFF;
						transition: .6s;
					}
						.topPlan div.inner div.planWorksBox ul.worksList li p.link a i {
							margin-left: 0.8em;
						}
						.topPlan div.inner div.planWorksBox ul.worksList li p.link a:hover {
							background: #FFF;
							color: #00336A;
						}
}

@media screen and (max-width:360px){
				.topPlan div.inner ul.planNavi li a {
					font-size:12px;
				}
}

@media screen and (max-width:359px){
				.topPlan div.inner ul.planNavi li a {
					font-size:11px;
				}
}

/* !TOP その他サービス
---------------------------------------------------------- */
.topOther {
	width:100%;
	padding:100px 50px 100px 50px;
	background: url("../img/other_service_bg.jpg") top center repeat-x;
	background-size:auto;
	background-color: #00336A;
	border-radius:0 0 0 120px;
}
	.topOther div.inner {
		width:100%;
		max-width:1120px;
		margin:0 auto ;
	}
		.topOther div.inner h2 {
			position: relative;
			font-size:36px;
			font-weight: 700;
			line-height: 1.5;
			color: #FFF;
			text-align: center;
			font-feature-settings: "palt";
			padding-bottom:35px;
			margin-bottom: 60px;
			z-index: 3;
		}
			.topOther div.inner h2:after {
				position: absolute;
				content:"";
				width:60px;
				height: 6px;
				background: #02ACD0;
				border-radius: 3px;
				bottom:0;
				left:50%;
				margin-left: -30px;
			}
		.topOther div.inner ul.otherService {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.topOther div.inner ul.otherService li {
				width:32%;
				margin-right:2%;
				margin-bottom: 30px;
			}
			.topOther div.inner ul.otherService li:nth-child(3n) {
				margin-right:0;
			}
				.topOther div.inner ul.otherService li a {
					display: block;
					width:100%;
					padding:40px 0 0 0;
					background: #FFF;
					border-radius: 4px;
					transition: .6s;
				}
					.topOther div.inner ul.otherService li a img {
						display: block;
						width:220px;
						margin: 0 auto 20px auto;
					}
					.topOther div.inner ul.otherService li a h3 {
						font-size:18px;
						font-weight: 700;
						line-height: 1.5;
						text-align: center;
						margin-bottom: 20px;
					}
					.topOther div.inner ul.otherService li a p.arrow {
						line-height: 1;
						text-align: center;
					}
						.topOther div.inner ul.otherService li a p.arrow i {
							font-size: 30px;
							transition: .3s;
							margin-bottom: 20px;
						}
							.topOther div.inner ul.otherService li a:hover p.arrow i {
								margin-top: 5px;
								margin-bottom: 15px;
								color: #02ACD0;
							}

@media screen and (max-width:1039px){
.topOther {
	padding:90px 30px 90px 30px;
	border-radius:0 0 0 80px;
}
		.topOther div.inner h2 {
			font-size:32px;
			margin-bottom: 50px;
		}
			.topOther div.inner ul.otherService li {
				margin-bottom: 20px;
			}
				.topOther div.inner ul.otherService li a {
					padding:35px 0 0 0;
				}
					.topOther div.inner ul.otherService li a img {
						width:180px;
					}
					.topOther div.inner ul.otherService li a h3 {
						font-size:15px;
						margin-bottom: 10px;
					}
						.topOther div.inner ul.otherService li a p.arrow i {
							font-size: 24px;
						}
							.topOther div.inner ul.otherService li a:hover p.arrow i {
								margin-top: 0;
								margin-bottom: 20px;
								color: #111;
							}
}

@media screen and (max-width:767px){
.topOther {
	padding:80px 20px 80px 20px;
}
		.topOther div.inner h2 {
			font-size:20px;
			padding-bottom:30px;
			margin-bottom: 40px;
		}
			.topOther div.inner h2:after {
				width:50px;
				height: 4px;
				margin-left: -25px;
			}
		.topOther div.inner ul.otherService {
			max-width:320px;
			margin: 0 auto;
		}
			.topOther div.inner ul.otherService li {
				width:100%;
				margin-right:0;
			}
			.topOther div.inner ul.otherService li:last-child {
				margin-bottom: 0;
			}
				.topOther div.inner ul.otherService li a {
					padding:25px 0 0 0;
				}
					.topOther div.inner ul.otherService li a img {
						width:160px;
						margin: 0 auto 15px auto;
					}
					.topOther div.inner ul.otherService li a h3 {
						font-size:15px;
						margin-bottom: 10px;
					}
						.topOther div.inner ul.otherService li a p.arrow i {
							font-size: 20px;
						}
}

/* !TOP 安心電話サポート
---------------------------------------------------------- */
.topSupport {
	width:100%;
	padding:100px 50px 100px 50px;
}
	.topSupport div.inner {
		width:100%;
		max-width:1120px;
		padding-bottom:80px;
		margin:0 auto ;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
		.topSupport div.inner div.left {
			width:40%;
		}
			.topSupport div.inner div.left div.photo {
				width:100%;
				height: auto;
				position: relative;
			}
				.topSupport div.inner div.left div.photo div.bg {
					position: absolute;
					width:100%;
					height: 100%;
					background: #02ACD0;
					top:15px;
					left:-15px;
					border-radius: 50%;
					opacity:.5;
					z-index: 1;
				}
				.topSupport div.inner div.left div.photo img {
					position: relative;
					display: block;
					width:100%;
					border-radius: 50%;
					z-index: 2;
				}
		.topSupport div.inner div.right {
			width:50%;
		}
			.topSupport div.inner div.right h2 {
				font-size: 36px;
				font-weight: 700;
				line-height: 1.5;
				position: relative;
				padding-left:30px;
				margin-top:10%;
				margin-bottom: 50px;
			}
				.topSupport div.inner div.right h2:before {
					position: absolute;
					content:"";
					width:12px;
					height: 12px;
					background: #02ACD0;
					border-radius: 50%;
					top:46%;
					left:0;
				}
			.topSupport div.inner div.right h3 {
				font-size: 24px;
				font-weight: 700;
				line-height: 1.6;
				margin-bottom: 30px;
			}
	.topSupport div.inner2 {
		width:100%;
		max-width:1120px;
		padding-top:80px;
		border-top: 1px solid #707070; 
		margin:0 auto ;
		display: flex;
		justify-content: space-between;
	}
		.topSupport div.inner2 div.left {
			width:44%;
		}
			.topSupport div.inner2 div.left h2 {
				font-size:24px;
				font-weight: 700;
				line-height: 1.5;
				border-left:5px solid #02ACD0;
				padding-left:0.6em;
				margin-bottom: 40px;
			}
			.topSupport div.inner2 div.left dl {
				width:100%;
			}
				.topSupport div.inner2 div.left dl dt {
					float: left;
				}
				.topSupport div.inner2 div.left dl dd {
					margin-left: 6em;
					margin-bottom: 15px;
				}
		.topSupport div.inner2 div.right {
			width:56%;
		}
@media screen and (max-width:1039px){
.topSupport {
	padding:90px 30px 90px 30px;
}
	.topSupport div.inner {
		padding-bottom:70px;
	}
		.topSupport div.inner div.left {
			width:45%;
			max-width: 400px;
		}
				.topSupport div.inner div.left div.photo div.bg {
					top:12px;
					left:-12px;
				}
		.topSupport div.inner div.right {
			width:47%;
		}
			.topSupport div.inner div.right h2 {
				font-size: 30px;
				padding-left:26px;
				margin-top:0;
				margin-bottom: 40px;
			}
			.topSupport div.inner div.right h3 {
				font-size: 20px;
				margin-bottom: 25px;
			}
	.topSupport div.inner2 {
		padding-top:70px;
	}
		.topSupport div.inner2 div.left {
			width:50%;
		}
			.topSupport div.inner2 div.left h2 {
				font-size:20px;
			}
				.topSupport div.inner2 div.left dl dd {
					margin-left: 5em;
				}
		.topSupport div.inner2 div.right {
			width:50%;
		}
}

@media screen and (max-width:767px){
.topSupport {
	padding:80px 20px 80px 20px;
}
	.topSupport div.inner {
		flex-wrap: wrap;
		padding-bottom:50px;
	}
		.topSupport div.inner div.left {
			width:100%;
			max-width:200px;
			margin:0 auto 40px auto;
		}
			.topSupport div.inner div.left div.photo {
				width:100%;
				height: 100%;
			}
				.topSupport div.inner div.left div.photo div.bg {
					top:10px;
					left:-10px;
				}
		.topSupport div.inner div.right {
			width:100%;
		}
			.topSupport div.inner div.right h2 {
				font-size: 20px;
				padding-left:20px;
				margin-bottom: 30px;
			}
				.topSupport div.inner div.right h2:before {
					width:8px;
					height: 8px;
					top:42%;
				}
			.topSupport div.inner div.right h3 {
				font-size: 16px;
				margin-bottom: 25px;
			}
	.topSupport div.inner2 {
		padding-top:50px;
		flex-wrap: wrap;
	}
		.topSupport div.inner2 div.left {
			width:100%;
			margin-bottom: 30px;
		}
			.topSupport div.inner2 div.left h2 {
				font-size:18px;
				border-left:4px solid #02ACD0;
				margin-bottom: 30px;
			}
		.topSupport div.inner2 div.right {
			width:100%;
		}
}

/* !CTA
---------------------------------------------------------- */
.cta {
	width:100%;
	padding:110px 50px 110px 50px;
	background: url("../img/cta_bg.jpg") 50% 50% no-repeat;
	background-size: cover;
}
	.cta div.inner {
		width:100%;
		max-width:1000px;
		background: #FFF;
		border-radius: 6px;
		padding:50px 10px;
		margin:0 auto ;
	}
		.cta div.inner h2 {
			font-size:36px;
			font-weight: 700;
			line-height: 1.5;
			text-align: center;
			margin-bottom: 30px;
		}
		.cta div.inner p.read {
			text-align: center;
			margin-bottom: 30px;
		}
			.cta div.inner p.read br {
				display: none;
			}
		.cta div.inner ul.ctaMenu {
			width:100%;
			display: flex;
		}
			.cta div.inner ul.ctaMenu li {
				width:50%;
			}
			.cta div.inner ul.ctaMenu li:last-child {
				border-left:1px solid #707070;
			}
				.cta div.inner ul.ctaMenu li h3 {
					font-size:20px;
					font-weight: 700;
					line-height: 1.5;
					text-align: center;
					margin-bottom: 15px;
				}
				.cta div.inner ul.ctaMenu li a.btn {
					display: block;
					width:350px;
					height: 60px;
					font-size:20px;
					font-weight: 700;
					color: #FFF;
					text-align: center;
					line-height: 60px;
					background: #111;
					border-radius: 30px;
					margin: 0 auto 10px auto;
					transition:.6s;
				}
					.cta div.inner ul.ctaMenu li a.btn:hover {
						background: #02ACD0;
					}
				.cta div.inner ul.ctaMenu li p.note {
					font-weight: 700;
					text-align: center;
					line-height: 1.6;
				}
					.cta div.inner ul.ctaMenu li p.note span {
						font-size:80%;
						font-weight: 500;
					}
				.cta div.inner ul.ctaMenu li p.tel {
					font-family: 'Oswald', sans-serif;
					font-size:36px;
					letter-spacing: 0.04em;
					text-align: center;
					line-height: 1.2;
					margin-bottom: 10px;
				}
					.cta div.inner ul.ctaMenu li p.tel i {
						font-size:60%;
						margin-right: 0.4em;
					}

@media screen and (max-width:1039px){
.cta {
	padding:90px 30px 90px 30px;
}
		.cta div.inner h2 {
			font-size:30px;
		}
			.cta div.inner p.read br {
				display: inherit;
			}
				.cta div.inner ul.ctaMenu li h3 {
					font-size:18px;
				}
				.cta div.inner ul.ctaMenu li a.btn {
					width:300px;
					font-size:18px;
				}
				.cta div.inner ul.ctaMenu li p.tel {
					font-size:32px;
				}
}

@media screen and (max-width:767px){
.cta {
	padding:80px 20px 80px 20px;
}
	.cta div.inner {
		padding:40px 20px;
	}
		.cta div.inner h2 {
			font-size:22px;
			margin-bottom: 25px;
		}
		.cta div.inner p.read {
			text-align: left;
		}
			.cta div.inner p.read br {
				display: none;
			}
		.cta div.inner ul.ctaMenu {
			flex-wrap: wrap;
		}
			.cta div.inner ul.ctaMenu li {
				width:100%;
			}
			.cta div.inner ul.ctaMenu li:first-child {
				padding-bottom:25px;
			}
			.cta div.inner ul.ctaMenu li:last-child {
				border-left:0;
				border-top:1px solid #707070;
				padding-top:25px;
			}
				.cta div.inner ul.ctaMenu li h3 {
					font-size:16px;
				}
				.cta div.inner ul.ctaMenu li a.btn {
					width:260px;
					height: 54px;
					font-size:16px;
					line-height: 54px;
				}
				.cta div.inner ul.ctaMenu li p.tel {
					font-size:26px;
				}
}

@media screen and (max-width:359px){
				.cta div.inner ul.ctaMenu li a.btn {
					width:240px;
					height: 54px;
					font-size:15px;
					line-height: 54px;
				}
}

/* !フローティングCTA
---------------------------------------------------------- */
.bl_floatingBanner {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 200px;
	z-index: 50;
	-webkit-animation: ctaBnr 3s 1 ease;
	-moz-animation: ctaBnr 3s 1 ease;
	animation: ctaBnr 3s 1 ease ;
}
.bl_floatingBanner.js_close {
	display: none;
}
.bl_floatingBanner_img {
	display: block;
	width:100%;
	padding:15px 10px;
	background: #02ACD0;
	border-radius: 4px;
	transition: 0.5s;
}
	.bl_floatingBanner_img:hover {
		background: #00336A;
	}
	.bl_floatingBanner_img p.tit {
		font-size:15px;
		line-height: 1.4;
		text-align: center;
		color: #FFF;
		margin-bottom: 10px;
	}
	.bl_floatingBanner_img p.icon {
		text-align: center;
	}
		.bl_floatingBanner_img p.icon i {
			font-size:30px;
			line-height: 1;
			color: #FFF;
		}
	.bl_floatingBanner_img h2 {
		font-size:19px;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		color: #FFF;
	}
.bl_floatingBanner_close {
	width: 30px;
	height: 30px;
	background: #FFF;
	border:1px solid #111;
	border-radius: 50%;
	position: absolute;
	left: -15px;
	top: -15px;
	cursor: pointer;
}
.bl_floatingBanner_close span:nth-of-type(1) {
	position: absolute;
	top: 13px;
	right: 6px;
	width: 15px;
	height: 1px;
	background-color: #111;
	transform: rotate(45deg);
}
.bl_floatingBanner_close span:nth-of-type(2) {
	position: absolute;
	top: 6px;
	right: 13px;
	width: 1px;
	height: 15px;
	background-color: #111;
	transform: rotate(45deg);
}

/* !アニメーション設定 */
@keyframes ctaBnr {
	0% {
		opacity: 0;
		transform: translateX(50px);
    }
	80% {
		opacity: 0;
		transform: translateX(50px);
    }
	100% {
		opacity: 1;
		transform: translateY(0);
    }
}

@media screen and (max-width:1039px){
.bl_floatingBanner {
	width: 180px;
}
.bl_floatingBanner_img {
	padding:15px 10px;
}
	.bl_floatingBanner_img:hover {
		background: #02ACD0;
	}
	.bl_floatingBanner_img p.tit {
		font-size:14px;
	}
		.bl_floatingBanner_img p.icon i {
			font-size:26px;
		}
	.bl_floatingBanner_img h2 {
		font-size:17px;
	}
}

@media screen and (max-width:767px){
.bl_floatingBanner {
	bottom: 10px;
	right: 10px;
	width: 160px;
}
.bl_floatingBanner_img {
	padding:10px 10px;
}
	.bl_floatingBanner_img p.tit {
		display: none;
	}
		.bl_floatingBanner_img p.icon i {
			font-size:22px;
		}
	.bl_floatingBanner_img h2 {
		font-size:15px;
	}
}

/* !pageTop
---------------------------------------------------------- */
.pagetop {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 80;
}
	.pagetop a {
		display: block;
		width: 50px;
		height: 50px;
		background-color: #333;
		text-indent:-9999px;
		transition: all 0.2s ease;
		position:relative;
	}
		.pagetop a:before{
			position:absolute;
			content:"";
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 10px;
			border-top: 2px solid #FFF;
			border-left: 2px solid #FFF;
			transform: rotate(45deg);
			top:24px;
			left:10px;
			transition:.2s;
		}
			.pagetop a:hover:before{
				top:20px;
			}
	
@media screen and (max-width:1039px){
			.pagetop a:hover:before{
				top:24px;
			}
}

@media screen and (max-width:767px){
	.pagetop a {
		width: 44px;
		height: 44px;
	}
		.pagetop a:before{
			top:21px;
			left:6px;
		}
			.pagetop a:hover:before{
				top:21px;
			}
}

/* !footer
---------------------------------------------------------- */
#footer {
	width: 100%;
	position:relative;
	background: #333;
	padding:60px 50px 40px 50px;
	overflow:hidden;
}
	#footer div.inner {
		width:100%;
		max-width:1120px;
		margin:0 auto;
	}
		#footer div.inner ul.footerLinks {
			width:100%;
			display: flex;
			justify-content: center;
			margin-bottom: 50px;
		}
			#footer div.inner ul.footerLinks li {
				width:auto;
				margin-right: 40px;
			}
			#footer div.inner ul.footerLinks li:last-child {
				margin-right: 0;
			}
				#footer div.inner ul.footerLinks li a {
					display: block;
					color: #FFF;
					transition:.5s;
				}
					#footer div.inner ul.footerLinks li a i {
						margin-right: 0.6em;
					}
					#footer div.inner ul.footerLinks li a:hover {
						opacity:.6;
					}
		#footer div.inner p.footerTxt {
			font-size:12px;
			color: #999;
			text-align: center;
			margin-bottom: 40px;
		}
			#footer div.inner p.footerTxt a {
				color: #CCC;
				transition:.5s;
			}
				#footer div.inner p.footerTxt a:hover {
					color: #FFF;
				}
		#footer div.inner p.copyright {
			font-family:'メイリオ' ,Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic" , Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color: #FFF;
			text-align: center;
			letter-spacing: 0.04em;
			opacity:.5;
		}

@media screen and (max-width:1039px){
#footer {
	padding:50px 30px 30px 30px;
}
		#footer div.inner ul.footerLinks {
			margin-bottom: 40px;
		}
			#footer div.inner ul.footerLinks li {
				margin-right: 25px;
			}
				#footer div.inner ul.footerLinks li a {
					font-size:13px;
				}
					#footer div.inner ul.footerLinks li a:hover {
						opacity:1;
					}
		#footer div.inner p.footerTxt {
			text-align: left;
		}
			#footer div.inner p.footerTxt br {
				display: none;
			}
				#footer div.inner p.footerTxt a:hover {
					color: #CCC;
				}
}

@media screen and (max-width:767px){
#footer {
	padding:50px 20px 30px 20px;
}
		#footer div.inner ul.footerLinks {
			flex-wrap: wrap;
		}
			#footer div.inner ul.footerLinks li {
				width:100%;
				margin-right: 0;
			}
			#footer div.inner ul.footerLinks li:last-child {
				margin-right: 0;
			}
				#footer div.inner ul.footerLinks li a {
					width:100%;
					font-size:13px;
					height: 44px;
					line-height: 44px;
					text-align: center;
				}
}

/* !アニメーション
---------------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translateY(70px);
  transition: .8s .4s;
}

.fadeIn_up.is-show {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width:767px){
.fadeIn_up {
  opacity: 0;
  transform: translateY(50px);
  transition: .8s .4s;
}

.fadeIn_up.is-show {
  transform: translateY(0);
  opacity: 1;
}
}