@charset "UTF-8";
/* 共通部分 */
html{
	font-size: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
}
body{
	line-height: 1.5;
	max-width: 100vw;
	background-color: #FAFAFA;

}
.sp{
	display: none;
}
a{
	text-decoration: none;
	color: #333;
}
img{
	max-width: 100%;
}
h2{
	font-size:2rem;
	font-weight: 600;
	letter-spacing: 0.1rem;
	font-family: 'Caveat', cursive;
	text-align: center;
	text-transform:uppercase;
	background: -webkit-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background: -o-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background: linear-gradient(to right, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 300px 2px;
	color: #767D7C;
	margin-bottom: 5%;
	padding-top:6%;
}
/*	上へ戻るボタン	*/
#page-top{
	position:fixed;
	bottom:5%;
	right:5%;
	z-index: 2000;
}
#page-top img{
	width: 3rem;
}
#move-page-top{
	transition-property: all;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
#move-page-top:hover{
	cursor: pointer;
	opacity: 0.7;
}
.br{
	display:none;
}
/*スクロールでふわっと表示*/
.fadeInDown {
		 	-webkit-animation-fill-mode:both;
		 	-ms-animation-fill-mode:both;
		 	animation-fill-mode:both;
		 	-webkit-animation-duration:1.5s;
		 	-ms-animation-duration:1.5s;
		 	animation-duration:1.5s;
		 	-webkit-animation-name: fadeInDown;
		 	animation-name: fadeInDown;
		 	visibility: visible !important;
		}
		@-webkit-keyframes fadeInDown {
		 	0% { opacity: 0; -webkit-transform: translateY(20px); }
		 	100% { opacity: 1; -webkit-transform: translateY(0); }
		}
		@keyframes fadeInDown {
		 	0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
		 	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
		}
	/*   header   */
header{
	width: 100vw;
	padding: 0 2% 0 1%;
	height: auto;
	background-color: rgba(255,255,255,.5);
	position: fixed;
	top:0;
	left:0;
	display: flex;
	justify-content: space-between;
	z-index: 500;
}
header img{
	width: 50%;
	height: auto;
}
h1{
	width:35rem;
}
h1 .none{
	display: none;
}
h1 img{
	width: 17rem;
	vertical-align: middle;
}
.menu{
	display: flex;
	justify-content: flex-end;
}
.menu a{
	padding:10px;
	color:#333333;
	font-weight: 600;
	display: inline-block;
	position: relative;
	font-family: 'Caveat', cursive;
	font-size:1.5rem;
}
.menu a:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #83C7E0;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
}
.menu a:hover:before {
	transform: scale(1);
}
.menu_phone{
	display: none;
}
#open{
	display: none;
}
/*    TOP   */
#top{
	width:100vw;
	min-height: 100vh;
	background-image: url("../images/top.jpg");
	background-size: cover;
	background-position: center;
	position: relative;
}
#top svg{
	position: absolute;
	width:100px;
	left:50%;
	bottom:10%;
	transform: translateX(-50%);
  -webkit-transform:translateX(-50%);
  -webkit-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5)); /* SafariなどのWebkitブラウザ用 */
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5)); 

}
#top p{
	color: #fff;
	position: absolute;
	bottom:5%;
	left:50%;
	transform: translateX(-50%);
  -webkit-transform:translateX(-50%);
	font-size: 1.25rem;
	font-weight: bold;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.line_stp{
	width: 180px;
	position: absolute;
	bottom: 10%;
	left: 10%;
	filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, .3));
	animation: move-y 1.5s infinite alternate ease-in-out;
}
/* 上下を繰り返すアニメーション */
@keyframes move-y {
	from {
	  transform: translateY(0);
	}
	to {
	  transform: translateY(10px);
	}
  }

/*  about us  */
#aboutus{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.about{
	display: grid;
	/* width: 60vw; */
	/* max-width: 700px; */
	margin:5% auto;
	/* grid-template-rows: 1fr 1fr;
	grid-template-columns:1fr 1fr; */
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap:2%;
}
h3 {
	text-align: center;
	margin-top: 4%;
	margin-bottom: 4%;
	color:#aaa;
	font-family: 'Caveat', cursive;
	font-size: 2.5rem;
}
.parts{
	height: auto;
	border: solid 1.5px #ccc;
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	margin-right: 1%;
	text-align: center;
	padding: 2%;
	color: 808080;
	max-width: 450px;
}
.parts1 { grid-area: 1 / 1 / 2 / 3; }
.parts2 { grid-area: 1 / 3 / 2 / 5; }
.parts3 { grid-area: 1 / 5 / 2 / 7; }
.parts4 { grid-area: 2 / 2 / 3 / 4; }
.parts5 { grid-area: 2 / 4 / 3 / 6; }
.parts ul{
	list-style: none;
	text-align: center;
}
.parts ul li{
	margin-bottom: 0.5rem;
	font-weight: 300;
	font-size: 1rem;
}
.parts ul li:last-child{
	margin-bottom: 1rem;
}
.parts ul li .bold {
	font-weight: bold;
}
.parts ul li .normal {
	font-weight: normal;
}
.parts hr {
	width: 13em;
	margin: 0 auto 0.5em;
	border: none;
    border-top: 1px dotted #aaa;
}
.parts_icon{
	width: 150px;
	margin-top: 30px;
}
.quick{
	width:9rem;
}
.parts5 li:first-of-type a img{
	width: 50%;
}
	/*  PRODUCT  */
#product h3 {
	text-align: center;
  	position: relative;
	width: 250px;
	height: 4.5rem;
	padding: 1.25rem 0;
	margin: 5% auto 3% auto;
	color: #707070;
	border: 4px solid #707070;
}

#product h3:after {
	text-align: center;
  position: absolute;
  top:2px;
  left: -10px;
  width: 250px;
  height: 4.5rem;
  background: rgba(131,199,224,.4);
	content: '';
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
	z-index: -99;
}
.shadow{
	filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, .3));
}
#product h4{
	margin-top: 5%;
	margin-bottom: 4%;
	line-height: 1;
	font-size: 1rem;
}
.big{
	font-size:1.2rem;
}

/* カルーセル */

.swiper-wrapper {
	padding: 0;
	width: 85%;
	max-width:850px;
	margin: 1% auto;
	padding-left: 1%;
	display: flex;
	justify-content: flex-end!important;
	/* height: 29vw;  */
}
.item{
	text-align: center;
	margin:0 20px;
}

.swiper-wrapper .item img{ 
	width: auto;
	margin-right:auto;
	margin-left: auto;
	height: 20vw; 
	max-height: 350px; 
	min-height: 300px; 
}
#product .nourl{
	margin-bottom: 1.5rem;
}
.slick-prev:before, .slick-next:before{
	color: dimgray;
	font-size: 30px;
	z-index: 100;
} 
#product h4{
	margin-bottom: 10px;
}
h4 small{
	font-weight: normal;
	margin-top: 1px;
}

#product a,#product h4,#product figcaption{
	text-align: center;
}
#product figcaption{
	font-size: 0.75rem;
	margin-top:5px;
}
.flex{
	margin-top:5%;
	margin-bottom: 3%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.zoom{
	cursor: zoom-in;
}
/*		DTP 	*/
.center{
	text-align: center;
}
#dtp, #sup{
	width: 70%;
	max-width: 700px;
	margin: 10% auto 5% auto;
}
#sup h4 {
	line-height: 1.2;
}
/* カルーセル */
.dtp_slide img, .sup_slide img{
	margin: 1% 5px 0;
}

/*	MANAGEMENT: ;*/
#management img{
	margin-right: 10%;
	width:15%;
}
#management .flex{
	align-items: center;
	margin-top:0;
}
#management h3{
	text-align: left;
	font-size: 1.5rem;
	margin-bottom: 5%;
	margin-left: -1.5rem;
}
#management ul li{
	list-style: none;
	padding-bottom: 4%;
	font-size: 1.1rem;
	position: relative;
	transition-property: all;
}
#management ul li a:hover{
	color: #83c7e0;
		transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
#management ul li:before{
	counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: -1.5rem;
  height: 0;
  width: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left:0.8rem solid #83c7e0;
  top: 38%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#management p{
	margin-bottom: 6%;
}
.column{
	display: flex;
	flex-direction: column;
}

/*		CONTACT 	*/

.space{
	margin-right: 3rem;
}
form{
text-align: center;
}
.form_center{
	width:60vw;
	margin-left: auto;
	margin-right: auto;
}
.p_left{
	text-align: left;
	margin-bottom: 3%;
}
form input[type="text"],input[type="email"]{
	width: 60vw;
	height: 45px;
	border: solid 1px #aaa;
	margin-bottom: 2%;
	text-indent: 1em;
	border-radius: 8px;
}
form textarea{
	width: 60vw;
	height: 200px;
	border: solid 1px #aaa;
	margin-bottom: 2%;
	text-indent: 1em;
	border-radius: 8px;
}
.red{
	color: #EF4154;
}
.privacy{
	width: 60vw;
	text-align: left;
	height: 200px;
	font-size: 0.9rem;
	font-weight: 300;
	border: solid 1px #aaa;
	overflow-y: scroll;
	margin-bottom: 1%;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	border-radius: 8px;
}
input[type="checkbox"]{
	width:1.5rem;
	height:1.5rem;
	margin-right:1%;
	vertical-align: bottom;
}
.btn_submit{
	width: 270px;
	height: 63px;
	border-radius: 30px;
	background-color: #68BA95;
	color: #fff;
	font-weight: bold;
	margin-top:4% auto 1% auto;
	letter-spacing: 0.25rem;
	transition-property: all;
	transition: 0.5s;
		-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
.btn_submit:hover{
	opacity: 0.7;
}
#submit{
	margin-top:4%;
}
form{
	margin-top:2%;
}
/*　エラーメッセージ　*/
span.error_m {
	font-size: 0.8rem;
	font-weight: normal;
	color: #EF4154;
	display: block;
	margin: -2% 0 0 0;
}

input[type="text"].inp_error,[type="email"].inp_error,textarea.inp_error,label.inp_error {
    border: 1px solid #F88A8A;
    background: #F4D4D4;
}

/*		CSR 		*/
#csr{
	width: 85%;
	max-width: 800px;
	display: flex;
	justify-content: center;
	margin: 5% auto;
}
.left{
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: 500px;
	margin-right: 5%;
}
.left img{
	margin-bottom: 5%;
}

/*		COMPANY_PROFILE		*/
#COMPANY_PROFILE{
	width: 100vw;
	min-height: 100vh;
	padding-top:2%;
	padding-bottom: 2%;
	background-image: url("../images/office.jpg");
	background-size: cover;
	background-position: center top;
}
#COMPANY_PROFILE h2{
	background: -webkit-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background: -o-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background: linear-gradient(to right, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 400px 2px;
	letter-spacing: 0.1rem;
	font-weight: 600;
	color: #000;
}
.cp li{
	margin-bottom: 1.5%;
	list-style: none;
	font-weight:500;
}
#COMPANY_PROFILE a{
	transition-property: all;
	text-decoration: underline dotted #606060;
}
#COMPANY_PROFILE a:hover{
	color: #808080;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
.flex_top{
	display: flex;
	justify-content: center;
}
.flex_top section{
	min-width: 430px;
}
.flex_top section:first-child{
	margin-right: 5%;
}
table{
	width: 65vw;
	margin: 1% auto;
}
th{
	text-align: right;
	min-width: 100px;
}
td,th{
	padding: 1%;
	font-weight:500;
}
tr{
	margin-bottom: 1%;
}
table td{
	padding-left:2%;
}

	/*	地図	*/
iframe{
	width: 100vw;
	vertical-align: bottom;
}
	/*			footer			*/
footer{
	width: 100vw;
	height: 50px;
	  background: -webkit-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	  background: -o-linear-gradient(left, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	  background: linear-gradient(to right, #68ba95 0%, #68ba95 90%, #83c7e0 90%, #83c7e0 100%);
	 display: -webkit-flex;
	 display: flex;
	 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	 align-items: center; /* 縦方向中央揃え */
	 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	 justify-content: center; /* 横方向中央揃え */
}
footer p{
	color: #fff;
	text-align: center;
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
	letter-spacing: 0.05rem;
}