@charset "utf-8";

*{
	margin:0;
	padding:0;
}

.test{	border: 1px solid #855555;/*てすと*/
}

html {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}
body {
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	background-color: #FFFFFF;
	text-align: center;
	color: #2d2d33;
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	position: relative;
}
h2 {
	padding-top: 50px;
	}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	h2 {padding-top: 20px;}
}
a {
	text-decoration: none;
	color: #555555;
}
a:hover {
	color: #B3D8D8;
}


.box {
	margin: 0 auto;
	max-width: 1140px;
}
.box2 {
	padding-right: 20px;
	padding-left: 20px;
	padding-right: calc(constant(safe-area-inset-right) + 20px);
	padding-left: calc(constant(safe-area-inset-left) + 20px);
	padding-right: env(constant(safe-area-inset-right) + 20px);
	padding-left: env(constant(safe-area-inset-left) + 20px);
}


.logoBackGround{
	min-width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index:101;
	overflow: hidden;
	background-color: #ffffff;
	animation: 3s forwards logoAnimeBackGround;
}
@keyframes logoAnimeBackGround{
	0%   {transform:translateY(0%);}
	50%  {transform:translateY(0%);}
	83% {transform:translateY(-100%);}
	100% {transform:translateY(-100%);}
}
.logoCase{
	min-width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index:102;
	overflow: hidden;
	background-color: #ffffff;
	animation: 3s forwards logoAnimeBack;
}
@keyframes logoAnimeBack{
	0% {
		visibility: visible;
		opacity: 1;
	}
	50% {
		visibility: visible;
		opacity: 1;
	}
	100% {
		visibility: hidden;
		opacity: 0;
	}
}
.logoPosition{
	position: absolute;
	top:45%;
	left:45%;
	transform:translate(-45%,-45%);
	animation: 3s forwards logoOpacity,3s forwards logoAnime;
}
@keyframes logoOpacity {
	0%   {opacity: 0;}
	20%  {opacity: 0.25;}
	50%  {opacity: 0.25;}
	60%  {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes logoAnime {
	0%   {transform: scale(3,0);}
	1%   {transform: scale(3.5,-0.2);}
	4%   {transform: scale(4.2,1.2);}
	10%  {transform: scale(4.5,-2);}
	20%  {transform: scale(5,5);}
	100% {transform: scale(5,5);}
}

@media screen and (max-width:600px) {  /*　画面サイズ600pxまでに適用　*/
	.logoPosition{
		top:50%;
		left:39%;
		transform:translate(-50%,-39%);
	}
	@keyframes logoAnime {
		0%   {transform: scale(2,0);}
		1%   {transform: scale(2.3,-0.1);}
		4%   {transform: scale(2.8,0.8);}
		10%  {transform: scale(3,-1.3);}
		20%  {transform: scale(3.3,3.3);}
		100% {transform: scale(3.3,3.3);}
	}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.logoPosition{
		top:50%;
		left:36%;
		transform:translate(-50%,-36%);
	}
	@keyframes logoAnime {
		0%   {transform: scale(1.5,0);}
		1%   {transform: scale(1.7,-0.1);}
		4%   {transform: scale(2.1,0.6);}
		10%  {transform: scale(2.7,-1);}
		20%  {transform: scale(2.5,2.5);}
		100% {transform: scale(2.5,2.5);}
	}
}
.logoSVG path,ellipse{
		opacity:1;
		fill:#000000;
		stroke:#000000;
		stroke-width:0.1;
		stroke-opacity:1;
		stroke-linecap:round;
		stroke-linejoin:arcs;
		stroke-dasharray:none;
		paint-order:markers stroke fill;
}
.logoSize {transform:matrix(3,0,0,3,10,1);}


.contents_area {
	padding: 70px 0;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.contents_area {
		padding: 30px 0;
	}
}

.wid100 { width: 100%;}
.hei100 { height: 100%;}
.marg0a { margin: 0 auto;}

.table { display: table;}
.cell  { display: table-cell;}
@media screen and (max-width:1000px) {  /*　画面サイズ1000pxまでに適用　*/
	.block0 { display: block;}
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.block { display: block;}
}
@media screen and (max-width:430px) {  /*　画面サイズ430pxまでに適用　*/
	.block3 { display: block;}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.block2 { display: block;}
}


.title {
	margin-top: -7px;
	padding-left: 4px;
	padding-bottom: 10px;
	color: #222222;
	font-weight: normal;
	font-size: 45%; /*35*/
	text-shadow: 1px 1px #EEEEEE
}
@media screen and (max-width:430px) {  /*　画面サイズ430pxまでに適用　*/
	.title { display: none;}
}
.mainvisual_alpha {
	background-color: rgba(255,255,255,0.2);
}
.maintext {
	position: absolute;
	top: 45%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	width: 80%;
	text-align: center;
	color: #222222;
	font-weight: bold;
	font-size: 131%;
	letter-spacing: 0.15em;
	text-shadow: -2px -2px 2px #FFFFFF, 2px 2px 2px #FFFFFF, 2px -2px 2px #FFFFFF, -2px 2px 2px #FFFFFF, 2px 0px 2px #FFFFFF, 0px 2px 2px #FFFFFF, -2px 0px 2px #FFFFFF, 0px -2px 2px #FFFFFF, 6px 6px rgba(102, 204, 255, 0.1), 4px 4px 10px #DDFFFF;
	animation: fadein 3s ease-in-out;
	z-index: 10;
}
@keyframes fadein{
	0%{
		opacity: 0;
		visibility: hidden;
	}
	50%{
		opacity: 0;
		visibility: hidden;
	}
	100%{
		opacity: 1;
		visibility: visible;
	}
}

.sub {
	position: relative;
	height: 150px;
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.sub {height: 100px;}
}
.sub2{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}
.subt {
	width :420px;
	position: relative;
	font-weight: bold;
	font-size: 120%;
	text-align: center;
	text-shadow: -2px -2px #FFFFFF, 2px 2px #FFFFFF, 2px -2px #FFFFFF, -2px 2px #FFFFFF, 2px 0px #FFFFFF, 0px 2px #FFFFFF, -2px 0px #FFFFFF, 0px -2px #FFFFFF;
}
.subt_s {
	width :420px;
	margin-top: -110px;
	margin-left: -10px;
	color: #F2FFFF;
	font-weight: bold;
	font-size: 270%;
	position: absolute;
	z-index: -2;
	text-shadow: -2px -2px 3px #FFFFFF, 2px 2px 3px #FFFFFF, 2px -2px 3px #FFFFFF, -2px 2px 3px #FFFFFF, 2px 0px 3px #FFFFFF, 0px 2px 3px #FFFFFF, -2px 0px 3px #FFFFFF, 0px -2px 3px #FFFFFF, 6px 6px rgba(102, 204, 255, 0.1), 4px 4px 10px rgba(221, 255, 255, 0.5);
	opacity: 0.7;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.subt {
		width :300px;
	}
	.subt_s {
		width :300px;
		margin-top: -80px;
		margin-left: 0;
		font-size: 190%;
	}
}

.service {
	background-color: ;
	padding-bottom: 60px;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.service {padding-bottom: 20px;}
}
.service_back {
	padding : 40px;
	background-image: url("../img/haikan1.jpg");
	background-repeat: no-repeat;
	background-position: 5% 10%;
	background-size: 520px;
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.service_back {padding : 40px 10px;}
}
.service_text {
	margin: 0 auto;
	padding: 5px 0 60px;
}
.service_left img {
	float: left;
	margin: 10px 20px 10px 0px;
	width: 50px;
	height: 50px;
}
.service_left {
	min-width: 270px;
	vertical-align: middle;
}
.service_left_text {
	text-align: left;
	font-size: medium;
	font-weight: normal;
	vertical-align: middle;
	text-shadow: 1px 1px #FFFFFF;
}
.service_middle {
	width: 100px;
}
.service_right {
	vertical-align: middle;
	padding: 30px;
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.service_right {
		padding: 30px 0;
	}
}
.service_bottom {margin: 0 auto;}

.work {
	background-image: url("../img/work_back.jpg");
	background-size: cover;
	background-position: center 20%;
}














.work_new {
	width: 948px;
}
.work_new ul {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
}
.work_new li {
	position: relative;
	width: 280px;
	height: 210px;
	background-size: 100%;
	background-position: center center;
	filter: saturate(75%);
	margin: 0px 10px 20px 10px;
	border: 8px solid #F6FFFF;
}
.work_new li:hover {
	background-size: 105%;
	filter: saturate(115%);
	transition: .4s;
}
.work_new li a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 99%;
	height: 99%;
	text-decoration: none;
	z-index: 30;
}
.work_new h3 {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #2d2d33;
	font-size: 120%;
	font-weight: bold;
	text-shadow: 1px 0 3px #FFF, 0 1px 3px #FFF, -1px 0 3px #FFF, 0 -1px 3px #FFF, 0 0 3px #FFF, 1px 1px 3px #FFF, -1px -1px 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 4px #FFF,0 0 4px #FFF,0 0 4px #FFF, 4px 4px 8px #DDFFFF;
	text-align: left;
	padding: 20px;
	z-index: 20;
}
.work_bottom {
	margin: 40px auto;
}
@media screen and (max-width:1000px) {  /*　画面サイズ1000pxまでに適用　*/
	.work_new {	width: 744px;}
	.work_new li {
		width: 220px;
		height: 165px;
		margin: 0px 8px 15px 8px;
		border: 6px solid #F6FFFF;
	}
	.work_new h3 {
		font-size: 100%;
		padding: 15px;
	}
	.work_bottom { margin: 55px auto;}
}
@media screen and (max-width:764px) {  /*　画面サイズ764pxまでに適用　*/
	.work_new {	width: 584px;}
	.work_new li {
		width: 260px;
		height: 180px;
		margin: 0px 8px 10px 8px;
		border: 7px solid #F6FFFF;
	}
	.work_new h3 {
		font-size: 110%;
		padding: 20px;
	}
	.work_bottom { margin: 50px auto;}
}
@media screen and (max-width:600px) {  /*　画面サイズ600pxまでに適用　*/
	.work_new {	width: 370px;}
	.work_new li {
		width: 168px;
		height: 123px;
		margin: 0px 5px 8px 5px;
		border: 2px solid #F6FFFF;
	}
	.work_new h3 {
		font-size: 100%;
		padding: 5px;
	}
	.work_bottom { margin: 52px auto;}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.work_new {	width: 228px;}
	.work_new li {
		width: 220px;
		height: 130px;
		margin: 0px 0px 5px 0px;
		border: 4px solid #F6FFFF;
	}
	.work_new h3 {
		font-size: 110%;
		padding: 10px;
	}
	.work_bottom { margin: 55px auto;}
}













.news {
	background-color: ;
	padding-bottom: 120px;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.news {padding-bottom: 60px;}
}
.news_box {
	width: 60%;
}
.news_line {
	position:relative;
	border-bottom: 2px solid #B3D8D8;
	width: 100%;
	height: 48px;
	font-size: 95%;
	text-align: left;
	overflow: hidden;
}
.news_none  { display: none;}
@media screen and (max-width:864px) {  /*　画面サイズ768pxまでに適用　*/
	.news_box {
		width: 70%;
		min-width: 350px;
	}
	.news_line {
		border-top: 1px solid #B3D8D8;
		height: 72px;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:650px) {  /*　画面サイズ650pxまでに適用　*/
	.news_box {
		width: 90%;
	}
	.news_none { display: block;}
}
@media screen and (max-width:520px) {  /*　画面サイズ520pxまでに適用　*/
	.news_box {min-width: 300px;}
	.news_line {height: 105px;}
}
@media screen and (max-width:460px) {  /*　画面サイズ460pxまでに適用　*/
	.news_line {max-height: 125px;}
}
.news_line a {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #2d2d33;
}
/*.news_line a:hover .ya_b:after {
	border-top: 1px solid #FF7D7D;
	border-right: 1px solid #FF7D7D;
	transition: .4s;
}*/
.news_line a:hover {
	animation: newslink .4s ease-in-out;
	background: linear-gradient(#FFFFFF, #EBFFFF);
}
@keyframes newslink {
	0%  {background: linear-gradient(#FFFFFF, #FFFFFF);}
	25% {background: linear-gradient(#FFFFFF, #FBFFFF);}
	50% {background: linear-gradient(#FFFFFF, #F6FFFF);}
	75% {background: linear-gradient(#FFFFFF, #F0FFFF);}
	100%{background: linear-gradient(#FFFFFF, #EBFFFF);}
}
.news_date {
	padding-left: 10px;
	font-size: 100%;
	vertical-align: middle;
}
.news_text {
	width: 100%;
	padding-left: 20px;
	vertical-align: middle;
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.news_text {padding-left: 10px;}
}
.news_ya {
	padding-right: 10px;
}
.news_more {
	padding-top: 20px;
}
.news_more a:hover .ya_b:after {
	border-top: 1px solid #B3D8D8;
	border-right: 1px solid #B3D8D8;
}
.news_more_ya {
	margin: 0 0 0 5px;
}


.company {
	background-image: url("../img/company_back.jpg");
	background-size: cover;
	background-position: center center;
}
.company_box {
	background-color: #FFFFFF;
	padding: 40px 20px;
	opacity: 0.9;
}
.company_about {
	padding-bottom:90px;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.company_about {padding-bottom:30px;}
}
.company_philo {
	position:relative;
	width: 330px;
	min-height: 380px;
}
.company_philot {
	position: absolute;
	top: 20px;
	font-weight: bold;
	font-size: 140%;
	text-align: center;
	width: 100%;
	text-shadow: 2px 2px #FFFFFF, 3px 3px #B3D8D8;
}
.company_philo_box {
	position: absolute;
	top: 70px;
	text-align: center;
	width: 100%;
}
.company_philo1 {
	text-shadow: 2px 2px #FFFFFF, 2px 2px 3px #D9AE82;
	background-color: #FFFFF6;
	background-image: url("../img/philo1.jpg");
	z-index: 4;
}
.company_philo2 {
	margin-left: 0px;
	margin-top: -40px;
	text-shadow: 2px 2px #FFFFFF, 2px 2px 3px #3091F2;
	background-color: #F6FFFF;
	background-image: url("../img/philo2.jpg");
	z-index: 3;
}
.company_philo3 {
	margin-left: -20px;
	margin-top: -40px;
	text-shadow: 2px 2px #FFFFFF, 2px 2px 3px #D96DA3;
	background-color: #FFF6FF;
	background-image: url("../img/philo3.jpg");
	z-index: 2;
}
.company_philo_circle {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	border-top: 2px solid #B3D8D8;
	border-bottom: 2px solid #B3D8D8;
	border-radius: 50%;
	width: 170px;
	height: 170px;
	opacity: 0.9;
	mix-blend-mode: multiply;
	background-size: cover;
	background-position: center center;
}
.company_philo_circle span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	font-weight: bold;
	vertical-align: middle;
	font-size: 130%;
	width: 170px;
}
.company_philo_btn {
	vertical-align: middle;
	padding: 15px;
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.company_philo_btn_768 {
		display: table;
		margin: 0 auto;
	
	}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.company_philo {
		width: 200px;
		min-height: 420px;
	}
	.company_philo3 {
		margin-left: 0;
	}
	.company_philo_circle {
		width: 150px;
		height: 140px;
	}
	.company_philo_circle span {
		font-size: 120%;
		width: 150px;
	}
	.company_philo_btn {display: table-cell;}
}
.company_center {
	width: 90px;
}
.company_right {
	text-align: left;
	vertical-align: middle;
	max-width: 330px;
	padding-top: 45px;
}
.company_right p {
	text-indent: 1em;
	line-height: 180%;
	padding-bottom: 25px;
}
.company_contact {
	background-color: #E5F3FC;
	max-width: 600px;
	padding: 40px 20px 10px;
	margin: 0 auto;
}
@media screen and (max-width:500px) {  /*　画面サイズ500pxまでに適用　*/
	.company_contact {padding: 20px 20px 0px;}
}
.company_trustme {
	vertical-align: middle;
	min-width: 40px;
}
.company_trustme img {
	width: 200px;
	height: auto;
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.company_trustme img {padding-bottom: 20px;}
}
.company_trustme_bottom {
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 30px;
}


header {
	flex: 0 0 auto;
	text-align: left;
	padding: 30px 0 0;
	vertical-align: middle;
}
.header_rogo {
	width: 45%;
	max-width: 160px;
}
.header_syamei {
	padding-left: 5px;
	width: 45%;
	max-width: 150px;
}
.header_left {
	width: 40%;
	text-align: left;
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.header_left {width: 100%;}
}
.main_area {
	flex: 1 0 auto;

}
footer {
	flex-shrink: 0;
	color: #F9FEFE;
	background-color: #4B5050;
	padding: 20px 0;
}
.footer_rogo {
	vertical-align: middle;
	font-size: small;
	text-align: left;
	padding-right: 20px;
}
.footer_rogo img {
	width: 160px;
}
.footer_text {
	vertical-align: middle;
	font-size: 95%;
	text-align: left;
	min-width: 200px;
}
.footer_contents {
	padding-top: 20px;
	font-size: 95%;
	text-align: center;
}
.footer_contents a {color: #DADAFE;}
.footer_contents a:hover {color: #F0F0FE;}
.footer_contents span {
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.footer_contents span {display: none;}
	.footer_contents a {
		margin-bottom: 18px;
		padding: 1px 0;
	}
}

.copyright {
	padding-top: 5px;
	font-size: small;
	text-align: center;
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.copyright { font-size: 100%;}
}
.PSPolicy h4 {
	font-size: 90%;
	padding: 2em 0 1em;
}
.PSPolicy p {
	font-size: 85%;
	padding-left: 30px;
}
.PSPolicy ul {
	font-size: 85%;
	margin: 5px 0 10px 70px;
}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.PSPolicy h4 {font-size: 100%;}
	.PSPolicy p {font-size: 100%;}
	.PSPolicy ul {font-size: 100%;}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.PSPolicy p {padding-left: 10px;}
	.PSPolicy ul {margin: 5px 0 10px 40px;}
}

.sitemap ul {list-style: none;}
.sitemap li {
	position:relative;
	padding: 3px 0 3px 15px;
}
.sitemap a {
	font-size: 90%;
	color: #2d2d33;
}
.sitemap a:hover {
	color: #B3D8D8;
}
.map_1 li:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	border-style: solid;
	border-width: 6px 0 6px 7px;
	border-color: transparent transparent transparent #3091F2;
	margin-top: 6px;
}
.map_2 li:before {border-color: transparent transparent transparent #D96DA3;}
.map_3 li:before {border-color: transparent transparent transparent #D9AE82;}
.map_4 li:before {border-color: transparent transparent transparent #82d982;}
.map_2 {padding-left: 30px;}
.map_3 {padding-left: 30px;}
.map_4 {padding-left: 30px;}
@media screen and (max-width:768px) {  /*　画面サイズ768pxまでに適用　*/
	.map_2 {padding-left: 10px;}
	.map_3 {padding-left: 10px;}
	.map_4 {padding-left: 10px;}
}
@media screen and (max-width:400px) {  /*　画面サイズ400pxまでに適用　*/
	.map_2 {padding-left: 5px;}
	.map_3 {padding-left: 5px;}
	.map_4 {padding-left: 5px;}
}