@charset "UTF-8";
/* CSS Document */
	/*共通CSS*/
	/*WordPress対策・全ページ余白なし*/
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		margin: 0;
		padding: 0;
		color: #fff;
		background: #fff;
		font-family: 'Shippori Mincho', serif, 'Shippori Mincho B1', serif, 'Zen Maru Gothic', serif, 'Shippori Mincho', 'Shippori Mincho B1', 'Zen Maru Gothic', serif;
	}
	
	img {
		vertical-align: bottom; /*下に余白を作らない*/
		max-width: 100%;
		width: 100vw;
	}
	
	p,h1,h2,h3,h4,span {
		font-family: 'Shippori Mincho', serif;
font-family: 'Shippori Mincho B1', serif;
font-family: 'Zen Maru Gothic', serif;
		font-family:'Shippori Mincho', 'Shippori Mincho B1', 'Zen Maru Gothic', serif;
	}
	
    ul li{
		list-style: none;
	}

	a {
		text-decoration: none;
		color:#fff;
	}

	a:hover{
		opacity: 0.7;
	}
	
	.wrap {
		overflow: hidden;
	}
	
	/*floatを解除する*/
	.clear {
		clear: both;
	}
	
    .pcbr{
		display: block;
	}
    .spbr{display: none;}

	.all-page {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}

/*PC*/
@media only screen and (min-width: 1000px){	
		.sp { display: none !important; }
	
	.anker {
			margin-top: -110px;
			padding-top: 110px;
		}

	/*ヘッダー＆フッター*/
		/*グローバルメニュー*/
		header {
			position:fixed;
			z-index: 104;
			width: 85%;
			height:70px;
			padding: 20px 10% 20px 5%;
			background: linear-gradient(to right, #3e1dc8 0%, #0096ee 100%);
		}
		
		#header-content {
			position: relative;
			display: inline-block;
			z-index: 102;
			width: 600px;
			height:auto;
		}

		.header-box{
			position: relative;
			display: inline-block;
			float: right;
			vertical-align: top;
			font-size: 0;
		}
		
	    .head-menu{
			display: inline-block;
			position: relative;
			text-align: center;
			
		}
		
		.head-menu:last-child {
			
		}
	
		.header-content01 {
			display: inline-block;
			position: relative;
			width: 130px;
			padding: 16px 20px;
			color: #fff;
			font-size: 18px;
			text-align: center;
		}
	    
	    .header-content01 span{
			display: block;
			font-size: 8px;
	    }
	
	    .header-content01:hover {
			cursor: pointer;
	    }
	
	    .header-content01::after {
			position: absolute;
			bottom: 32px;
			left: 0;
			content: '';
			width: 100%;
			height: 2px;
			background: #000;
			transform: scale(0, 1);
			transform-origin: right top;
			transition: transform .3s;
	    }
	
		#logo {
			position: relative;
			display: inline-block;
			z-index: 102;
			width: 180px;
            height: auto;
		}
	
		.head_icon {
			position: fixed;
			z-index: 999;
			top: 200px;
			right: 0;
		}
	
		.head_icon img {
			width: 100px;
			margin: 10px 0;
			display: block;
		}
	
.dropdown {
    z-index:1000;
    background:#000;
    position:absolute;
    left:-60px;
    top:91px;
    width:200px;
    padding:10px 20px;
    display:none;
	}
	
.dropdown li {
      display:block;
      margin:10px 0;
	}
	
.dropdown li a {
        color:#fff;
	    font-size: 16px;
      }
	
.open {
    display:block;
  }
.close {
    display:block;
  }
		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			margin: 0 auto;
			height: auto;
		}
	
	    #page_top{
			z-index: 3;
			width: 50px;
			height: 50px;
			position: fixed;
			right: 20px;
			bottom: 100px;
			background: #808080;
			opacity: 0.6;
			border-radius: 10%;
	     }
	
	    #page_top a{
			position: relative;
			display: block;
			width: 50px;
			height: 50px;
			text-decoration: none;
	     }
	
	    #page_top a::before{
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			content: '\f102';
			font-size: 25px;
			color: #fff;
			position: absolute;
			width: 25px;
			height: 25px;
			top: -5px;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			text-align: center;
	    }
	
		.footer-box{
			position: relative;
			width:100%;
			height: auto;
			text-align: center;
			margin: 0 auto;
			background: #333333;
			padding: 40px 0;
		}
	
	    .footer-menu{
		    display: block;
			width: 100%;
			height: auto;
			padding: 1% 0;
			background: #fff;
	    }
	
	    .footer-menu ul li{
		    display: inline-block;
			width: 16%;
			height: auto;
			color:#000;
	    }
		
	    .logo-area {
			position: relative;
			display: block;
	    }
	
	    .logo-area img{
		    width: 200px;
		    height: auto;
	    }
	    
	    .add-area{
			font-size: 14px;
			padding-top: 20px;
			display: block;
			color: #fff;
	    }
	
		.tel-area{
			font-size: 28px;
			padding-top: 20px;
			display: block;
			color: #fff;
	    }
	
	
		.footer-credit {
			position: relative;
			padding: 10px 0;
			background: linear-gradient(to right, #3e1dc8 0%, #0096ee 100%);
    		color: #fff;
			font-size: 16px;
			text-align: center;
		}
}

	/*トップページ*/
	/*PC*/
	@media only screen and (min-width: 1000px){
		/*トップページ*/
		h3 {
			font-size: 24px;
			font-weight: bold;
		}

		h4{
			font-size: 24px;
		}
		/*キービジュアル*/
		#top-keyvisual {
			position: relative;
			width: 100%;
			padding-top: 110px;
			height: auto;
			font-size: 0;
		}
		
		.top_m {
		}
		
		#video{
			width: 100%;
		}
		
		.fadein {
			opacity : 0;
			transform : translate(0, 50px);
			transition : all 600ms;
		}
		
		.fadein.scrollin {
			opacity : 1;
			transform : translate(0, 0);
		}
		
		.back_btn {
			display: block;
			position: relative;
			width: 20%;
			padding: 1.0em;
			text-align: center;
			color: #d8cf9f;
			margin: 4% auto;
			font-size: 16px;
			font-weight: bold;
			background-color: #000;
		}
		
		.back_btn:hover{
			opacity: 0.8;
			cursor: pointer;
		}
		
		@keyframes scroll {
			0%{
				height: 0;
			}
			50%{
				height: 100px;
				margin-top: 0;
			}
			100%{
				margin-top:0px;
				height: 100px;
			}
		}
		
		.content-top{
			position: relative;
			display: block;
			text-align: center;
			width: 100%;
			height: auto;
			padding: 50px 0;
		}
		
		.content-top h2{
			font-size: 36px;
			font-weight: bold;
			width: 360px;
			margin: 0 auto;
			border-bottom: 1px solid;
			padding-bottom: 10px;
			letter-spacing: 4px;
		}
		
		.content-top span{
			display: block;
			font-size: 16px;
			font-weight: bold;
			padding-top: 10px;
			letter-spacing: 4px;
		}
		
		.catch{
			font-size: 36px;
		}
		
		.catch-area {
			width: 76%;
			margin: 0 12%;
		}
		
		.banner-area {
			width: 76%;
			margin: 0 12%;
			padding-top: 40px;
		}
		
		.banner-area li {
			display: inline-block;
			width: 49%;
		}
		
		#about-top{
			background: linear-gradient(to right, #3e1dc8 0%, #0096ee 100%);
			margin-bottom: 120px;
		}
		
		.hc02{
			color:#3e1dc8;
		}
		
		.hdetail{
			text-align: center;
			font-size: 18px;
			padding-bottom: 50px;
		}
		
		.company-top{
			position: relative;
			width: 100%;
			height: auto;
		}
		
		.busi_area{
			position: relative;
			display: inline-block;
		}
		
		.text-area{
			position: relative;
			display: inline-block;
			padding-left: 50%;
			width: 48%;
			height: auto;
			margin: 0 0 0 2%;
			font-size: 24px;
			vertical-align: top;
		}
		
		.text-area02{
			position: relative;
			display: inline-block;
			float: right;
			width: 52%;
			height: auto;
		}
		
		.text-area03{
			position: relative;
			display: inline-block;
			width: 47%;
			margin-top: 5%;
			text-align: center;
			color: #404040;
			vertical-align: top;
		}
		
		.text-area p{
			margin: 40px 0;
            font-size: 16px;
		}
		
		.text-area02 p{
            font-size: 18px;
		}
		
		.btn2 {
			display: block;
			position: relative;
			width: 160px;
			padding: 0.4em;
			text-align: center;
			color: #000;
			margin: 0 auto;
			font-size: 20px;
			border:1px solid #fff;
			background-color: #d8cf9f;
		}
		
		.btn2:hover {
			background-color: #fff;
			color: #000;
			border: 1px solid #404040;
			cursor: pointer;
		}
		
		.btn3 {
			display: inline-block;
			position: relative;
			width: 260px;
			padding: 0.4em;
			text-align: center;
			color: #fff;
			margin: 9%;
			font-size: 20px;
			border: 1px solid #fff;
			background-color: #000;
		}
		
		.btn3:hover {
			background-color: #fff;
			color: #000;
			border: 1px solid #404040;
			cursor: pointer;
		}
		
		.btn1 {
			display: block;
			position: absolute;
			width: 160px;
			padding: 0.4em;
			text-align: center;
			left: 36%;
			bottom: 0;
			color: #fff;
			background-color:#191970;
		}
		
		.btn1:hover {
			opacity: 0.8;
			cursor: pointer;
		}
		
		.img-area{
			position: relative;
			display: inline-block;
			width: 49%;
		}
		
		.img-area img{
			float: right;
			position: relative;
			top: -100px;
			right: -20px;
		}
		
		.img-area01{
			position: absolute;
			top: 0;
			right: 50vw;
			width: 70vh;
			margin: 40px 0;
		}
		
		.img-area02{
			position: relative;
			display: inline-block;
			width: 46%;
			padding-left: 2%;
		}
		
		.img-area01 img{
			position: relative;
		}
		
		.img-area02 img{
			position: relative;
		}
		
		.business-top {
			padding-top: 120px;
			padding-bottom: 60px;
		}
		
		.company-area {
			width: 76%;
			margin: 60px 12%;
			padding-left: 6%;
		}
		
		.grid_area {
			background: #edf8f6;
		}
		
		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			width: 98%;
			height: auto;
			margin: 0 auto;
			padding: 120px 0;
		}

		.quadrant {
			border-right: 1px solid black;
			border-bottom: 1px solid black; 
		}

		/* 2列目（右端）の縦線を削除 */
		.quadrant:nth-child(2n) {
			border-right: none;
		}

		/* 2行目（下端）の横線を削除 */
		.quadrant:nth-child(n + 3) {
			border-bottom: none;
		}

		.quadrant {
			padding: 0 20px;
		}
		
		.grid-container h3{
			padding: 10px 0;
		}
		
		.quadrant p{
			font-size: 15px;
			color: #000;
			padding-bottom: 20px;
			line-height: 28px;
		}
		
		.quadrant.top-left{
			padding-bottom: 20px;
		}
		
		.quadrant.bottom-right {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
		}
		
		.inlim{
			display: flex;
			width: 100%;
			height: auto;
			justify-content: space-between;
		}
		
		.inlim img{
			width: 49%;
		}
		
		#service-top{
			background: linear-gradient(to top left, #3e1dc8 0%, #0096ee 50%);
			padding: 120px 0;
		}
		
		.serh{
			font-size: 28px !important;
			padding-bottom: 10px;
			border-bottom: 1px solid;
		}
		
		.serp{
			padding-top: 10px;
		}
		
		.pro_cont {
			position: relative;
			width: 100%;
			height: auto;
			z-index: 0;
		}
		
		.pro_area01 {
			display: flex;
			padding: 60px 0;
		}
		
		.pro_area02 {
			display: flex;
			flex-direction: row-reverse;
			padding: 60px 0;
		}
		
		.ppho{
			 width: 54%;
    		padding-top: 40px;
		}
		
		.icon_area {
			display: flex;
			flex-flow: column;
			width: 400px;
			height: auto;
			justify-content: center;
			padding: 0 3%;
		}
		
		td {
			display: inline-block;
			width: 200px;
		}
		
		.t_wrap {
			margin-bottom: 40px;
		}
		
		#access-top{
			margin-top: 120px;
		}
		
		.map {
			width: 100%;
			height: 500px;
		}
		
		#contact-top{
			background: linear-gradient(to top left, #3e1dc8 0%, #0096ee 50%);
			padding: 120px 0;
		}
		
		.page-content-top{
			position: relative;
			display: block;
			width: 100%;
			height: 300px;
			background:#dcdcdc;
		}
		
		.page-content-top h2{
			position: absolute;
			top:40%;
			left: 0;
			right: 0;
			font-size: 48px;
			color:#696969;
			text-align: center;
			font-weight: 100;
		}
		
		.page-content-top span{
			display: block;
			font-size: 18px;
		}
		
		.page-content-top img{
			display: block;
			width: 100%;
			height: 300px;
			opacity: 0.5;
		}
		
		.content-area{
			width: 100%;
			height: auto;
			color: #fff;
		}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}
		/*お問い合わせ*/
		
		.contact-box{
			margin-top:50px;	
		}	
		
		.contact-p{
			width: 90%;
			margin: 50px auto;
			text-align: center;
		}
		
		.contact-catch {
			text-align: center;
			font-size: 24px;
			margin-bottom: 60px;
		}
		
		
		.contact-form-inner {
			max-width: 640px;
			margin: 0 auto;
			padding-top: 110px;
			padding-bottom: 60px;
			text-align: left;
		}
		
		.thanks {
			font-size: 32px;
			text-align: center;
			padding: 20px 0;
			color: #3e1dc8;
		}
		
		.thank_p {
			color: #000;
		}
		
		.btn {
			display: block;
			position: relative;
			width: 300px;
			padding: 0.4em;
			text-align: center;
			color: #fff;
			margin: 40px auto;
			font-size: 20px;
			border: none;
			border-radius: 30px;
			height: auto;
			background: #3e1dc8;
		}

		.contact-form-inner h3{
			position:relative;
			font-size: 18px;
        	font-weight: bold;
        	padding: 20px;
		}
	
		.contact-form-inner h3:before{
			position: absolute;
			content: '';
			top:20px;
			left: 0;
			width: 10px;
			height: 26px;
			background: #000;
		}

		.p_check{
			text-align: center;
			margin: 20px 0;
			font-size: 14px;	
		}		

		.contact-de{
			margin-top: 40px;	
		}

		.contact-de span{
			font-size: 20px;
			font-weight: bold;
			color: #0055be;	
		}
		
		.contact-de p{
			margin-top:10px;
		}

		.contact-end{
			font-size: 15px;
    		margin: 40px 0;	
		}
		
		input[type="checkbox"] {
			width: 20px !important;
			height: 20px !important;
			margin-right: 20px;
			margin-top: 30px!important;
			vertical-align: bottom;
		}
		
.form-item:first-child {
    margin-top: 0;
}
.form-item {
    margin: 30px auto 0;
}
.form-item label{
    display: block;
    font-size: 16px;
	color: #fff;
	text-align: left;
	font-weight: bold;
}
.form-item input{
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    margin-top: 10px;
}
.form-item input::placeholder,
.form-item textarea::placeholder {
    padding-left:15px;
}
	
.form-item:first-child {
    margin-top: 0;
}
.form-item02 {
    margin-top: 30px;
    margin-right: 30px;
    width: 260px;
}
.form-item02 label{
    display: block;
    font-size: 16px;
	color: #fff;
	text-align: left;
	font-weight: bold;
}
.form-item02 input{
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    margin-top: 10px;
}
.form-item02 input::placeholder,
.form-item02 textarea::placeholder {
    padding-left:15px;
}
	
	.inli{
		display: inline-block;
	}

.form-hissu {
    color: #fff;
    font-size: 13px;
    margin-left: 15px;
    padding: 3px 5px;
    background-color: #e5002d;
}
	
.form-nin {
    color: #fff;
    font-size: 13px;
    margin-left: 15px;
    padding: 3px 5px;
    background-color: #00a89c;
}

.form-item textarea{
    height: auto;
    width: 100%;
    border: 1px solid #3c3c3c !important;
    margin-top: 10px;
}
.last_check {
    display: block;
    text-align: center;
    vertical-align: middle;
	margin-top: 20px;
}
.last_check > input {
    width: auto;
    height: auto;
    margin: 0 10px 0 0;
}
.last_check a {
    text-decoration: none;
}
.form-item.send-btn{
	position: relative;
    width: 300px;
    margin: 40px auto 0;
}

.form-item.send-btn input{
    	display: block;
        position: relative;
        width: 300px;
        padding: 0.4em;
        text-align: center;
        color: #3e1dc8;
        margin: 0 auto;
        font-size: 20px;
        border: none;
        border-radius: 30px;
        height: auto;
       background: linear-gradient(to right, #30c3c1 0%, #59f0c1 100%);
}
	
.form-item.send-btn:after{
			content: '▶︎';
			display: inline-block;
			position: absolute;
			top: 17px;
			right: 24px;
			font-size: 10px;
			color: #3e1dc8;
		}
	
.form-item.send-btn input:hover {
    transition: all .3s;
	opacity: 0.7;
	cursor: pointer;
}
		
form.wpcf7-form.invalid {
    max-width: 1000px;
    margin: 0 auto;
}
	
.wpcf7-list-item {
    display: inline-block;
}
		
span.wpcf7-list-item.last{
    margin-left: 40px;
}
	
	.file{
		display: block;
		margin: 30px auto 0;
	}
	
	#your-file {
		font-weight: bold;
	}
	
	.con{
		width: 310px;
        margin: 40px auto;
	}
	
	.wpcf7-form-control-wrap {
		position: relative;
		display: block;
	}
	
	input.wpcf7-form-control.wpcf7-file {
		margin: 20px 0;
	}
	
	.btn2 {
		display: block;
		position: relative;
		width: 300px;
		padding: 0.4em;
		text-align: center;
		color: #fff;
		margin: 40px auto;
		font-size: 20px;
		border: none;
		border-radius: 30px;
		height: auto;
		background: #000;
	}
	
	.content {
		padding: 60px 0;
	}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translate(0px, 50px);
  }

  to {
    opacity: 1;
	transform: translate(0px, 0px);
  }
}		
}