@charset "utf-8";
/* CSS Document */
body {
	min-width:320px;
	max-width:1920px;
}
/*フェードインのCSS*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* フェードインで動く高さを指定 */
  transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/*ナビゲーション*/
h1 {
	color:#6883D8;
	font-size: 2.5rem;
	font-family: 'Lalezar', cursive;
	font-family: 'Secular One', sans-serif;
	font-family: 'Sora', sans-serif;
	margin-left: 2.5%;
	line-height:2.3vw;
	margin-top:1%;
}
.ja {
	font-size: 1rem;
	margin-left: 3.5%;
	letter-spacing: 0.8vw;
}
header {
	z-index: 11;
	position: relative;
	height: 80px;
	width: 100%;
	padding-top: 20px;
}
#tel {
	width:28%;
	position: absolute;
	top: 18%;
	left:60%;
	color: #ffffff;
	background-color: rgba(104, 131, 216, 0.8);
	padding:1% 0 1% 1%;
	
}
#tel img {
	position:absolute;
	top:15%;
	left:3%;
	color: #ffffff;
	width:12%;
}
#number {
	color: #ffffff;
	text-decoration: none;
	padding-left:2%;
	text-align:center;
	font-size: 2rem;
}

/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	h1 {
		font-size:1.8rem;
	}
	#tel {
		width:30%;
	}
	#number {
		font-size:1.5rem;
	}	
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	h1 {
		margin-top:-1%;
		font-size:1.5rem;
		line-height:0.7em;
	}
	.ja {
		font-size:0.8rem;
	}
	#tel {
		position:absolute;
		left:50%;
		width:35%;
	}
	#tel img {
		width:8%;
	}
	#number {
		font-size:1.3rem;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	h1 {
		margin-top:-1%;
		font-size:1rem;
		line-height:0.6em;
	}
	.ja {
		font-size:0.5rem;
	}
	#tel {
		position:absolute;
		top:10%;
		left:45%;
		width:38%;
	}
	#tel img {
		position: absolute;
		top:25%;
		width:8%;
	}
	#number {
		font-size:1rem;
	}
}
	/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 12;
  right : 1rem;
  top   : 1rem;
  width : 3rem;
  height: 3rem;
  cursor: pointer;
  text-align: center;
  background-color: #0E1B3F;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 2.2rem;
  height  : 0.2rem ;
  left    : 0.4rem;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 0.5rem;
}
.hamburger span:nth-child(2) {
  top: 1.45rem;
}
.hamburger span:nth-child(3) {
  top: 2.4rem;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 1.5rem;
  left: 0.5rem;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top:1.5rem;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
　z-index:12;
　display:none;
  position: fixed;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
　z-index:12;
  background-color: #191A1D;
  margin: 0 auto;
  padding: 3% 0;
  width: 100%;
  flex-direction: column;
  position:fixed;
  top:0;
  left:0;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background-color: rgba(190,193,239,0.6);
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 0.8rem 0;
  text-decoration :none;
  font-size: 2rem;
  text-shadow: 2px 2px 2px black;
  font-weight: bold;
}
nav.globalMenuSp ul li .ja1 {
	font-size: 1rem;
}
	nav.globalMenuSp ul li a:hover{
  color: #000;
  text-shadow: none;
	}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
	opacity: 100;
	display:inline;
	z-index:11;
}

/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	nav.globalMenuSp ul li a {
		font-size: 1.5rem;
	}
	nav.globalMenuSp ul li .ja1 {
		font-size: 0.8rem;
	}
	.hamburger {
		position: fixed;
		right : 0.5rem;
		top   : 0.5rem;
	}
}
#otoiawase {
	z-index:20;
	position: fixed;
	top:50%;
	right:0;
	background-color: #F64649;
	padding: 3% 2%;
}
#otoiawase a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	writing-mode: vertical-rl;
	font-size: 1rem;
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	#otoiawase {
		position:fixed;
		top:30%;
		padding:5% 3.2%;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	_::-webkit-full-page-media, _:future, :root body {
		#otoiawase {
			position:fixed;
			top:30%;
			padding:5% 5%;
}
	}

/*トップ画像のCSS*/
.main_imgBox {
	width: 100vw;
    height: 50vw;
    overflow: hidden;
    position: relative;
}

.main_logo {
    z-index: 11;
	font-size: 5vw;
	color: #fff;
    position: absolute;
    top:15%;
    left:55%;
    transform:translate(-50%,-50%);
    width:50%;
    height:auto;
}

/*タイピング文字のCSS*/
#title {
   z-index: 10;
   position: absolute;
    top:60%;
    left:30%;
    transform:translate(-50%,-50%);
    width:55%;
    height:auto;
    color: #fff;
    font-size: 3.2rem;
	font-weight: bold;
	letter-spacing: 0.3em;
	line-height: 1.5em;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, "serif";
}
/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	#title {
		font-size:2rem;
	}
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	#title {
		width:70%;
		font-size:1.3rem;
		position:absolute;
		left:40%;
	}
}
  .main_img {
    /*z-index:10;*/
    opacity: 0;
    width: 100vw;
    height: 50vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }
.main_img img {
	width: 100%;
}
    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_imgM {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_imgM:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_imgM:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_imgM:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_imgM:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_imgM:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
				transform: scale(1.2);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
				-webkit-transform: scale(1.2);
            z-index:9;
    }
    100% { opacity: 0 }
}
/*トップ画像のCSSここまで*/

/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	.main_imgBox {
    height: 60vw;
	}
	.main_img {
    height: 60vw;
	}
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	.main_imgBox {
    height: 85vw;
	}
	.main_img {
    height: 85vw;
	}
}

#topBtn {
    /*-----必須-----*/
    position: fixed;
    bottom: 20px;
    right: 20px;

    /*-----装飾-----*/
	text-decoration: none;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background-color: #6060EF;
	border-radius: 100%;
    color: #ffffff;
	z-index: 100;
	font-weight: bold；
}

/*メインコンテンツのCSS*/
main {
	width: 100%;
	margin: 0 auto;
	text-align:center;
	z-index:10;
}
/*TopごあいさつのCSS*/
#aisatu, #aisatu2{
	width: 100%;
	position: relative;
	padding:3% 0;
}
#midasi {
	width:60%;
	color: #0E1B3F;
	text-align:justify;
	margin:0 auto;
	letter-spacing: 0.2em;
	line-height:1.3;
	font-weight: bold;
	font-size: 1.5rem;
}
#aisatucom {
	padding-bottom:3%;
}
#aisatucom p{
	width:70%;
	color: #0E1B3F;
	text-align:start;
	line-height: 1.5;
	letter-spacing: 0.2em;
	font-weight: bold;
	font-size: 1rem;
	margin:1em auto;
}
.en {
	position: absolute;
	top:20%;
	left:1%;
	writing-mode: vertical-lr;
	font-size: 3rem;
	font-weight: bold;
	color: rgba(190,193,239,0.6);
}

/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width: 560px) {
	#midasi {
		font-size:1.2rem;
		width:70%;
	}
	#aisatucom p{
		font-size:1rem;
		width:75%;
		margin:1em auto;
	}
	.en {
		position:absolute;
		top:25%;
		left:-5%;
		font-size:2.3rem;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width: 414px) {
	#midasi {
		font-size:1.2rem;
		width:75%;
	}
	#aisatucom p{
		font-size:1rem;
		width:75%;
		margin:1em auto;
	}
	.en {
		position:absolute;
		top:25%;
		left:-7%;
		font-size:2.3rem;
	}
}

/*Top事業内容のCSS*/
#business {
	position: relative;
	background-color: #0F0F15;
	padding: 3% 5%;
}
#business2 {
	display: flex;
	justify-content: space-around;
	margin-right: 5%;
}
#business h2 {
	color: #fff;
	font-size: 2rem;
}
.en2 {
	position: absolute;
	top:30%;
	left:88%;
	writing-mode: vertical-lr;
	font-size: 3rem;
	font-weight: bold;
	color: rgba(190,193,239,0.6);
}
.business1, .business2, .business3{
	width: 30%;
	padding-bottom: 20%;
}
.business1 p, .business2 p, .business3 p {
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	background-color:rgba(81, 95, 117, 0.8);
	padding:5% 0;
}

.business1 {
	background-image: url("../images/3004665_s.jpg");
	background-repeat: no-repeat;
	background-size:107%;
	
}
.business2 {
	background-image: url("../images/heylagostechie-vII7qKAk-9A-unsplash (2).jpg");
	background-repeat: no-repeat;
	background-size: 120%;
}
.business3 {
	background-image: url("../images/PPC_senbannomitudumecyakku.jpg");
	background-repeat: no-repeat;
	background-size: 120%;
}

#button1 a {
	text-decoration: none;
	font-size: 1.3rem;
	color: rgba(190,193,239,1);
	letter-spacing: 0.3em;
	border: 1.5px solid #bec1ef;
	padding: 1% 2% 1% 2%;
}
#button1 a:hover {
	background-color:#C7CAEC;
	border: 0.1px solid #C7CAEC;
	color: #0E1B3F;
	font-weight:800;
}

/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	#business2 {
		display:initial;
	}
	.en2 {
		position:absolute;
		top:15%;
		left:85%;
	}
	.business1, .business2, .business3{
		width: 90%;
		margin:0 auto;
	}
	.business1 p, .business2 p, .business3 p {
		font-size: 1.8rem;
	}
	#button1 {
		position:relative;
		margin: 3% 0 3% 0;
	}
	#button1 a {
		font-size: 1.3rem;
	}

}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	.en2 {
		position:absolute;
		top:20%;
		left:82%;
		font-size:2.3rem;
	}
	.business1, .business2, .business3{
		width: 88%;
		margin:0 auto;
	}
	.business1 p, .business2 p, .business3 p {
		font-size: 1.2rem;
	}
	#button1 {
		position:relative;
		margin: 3% 0 3% 0;
	}
	#button1 a {
		font-size: 1rem;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
.arrow{
	position: absolute;
	left:67%;
}
}
/*画面幅が390pxまではここを読み込む*/
@media screen and (max-width:390px) {
	.en2 {
		position:absolute;
		left:78%;
	}
}
/*画面幅が375pxまではここを読み込む*/
@media screen and (max-width:375px) {
	.arrow{
		position: absolute;
		left:69%;
	}
	.en2 {
		position:absolute;
		left:80%;
	}
}
/*Topのお問い合わせのCSS*/
.contact {
	position: relative;
	background-color: #D2D6EB;
	padding: 2% 0 10% 0;
}
.en3 {
	position: absolute;
	top:15%;
	left:2%;
	writing-mode: vertical-lr;
	font-size: 3rem;
	font-weight: bold;
	color: rgba(14, 27, 63, 0.6);
}
.contact h2 {
	font-size: 2rem;
}
.contactcom {
	font-size:1rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.2em;
}
#tel2 {
	position: absolute;
	top:68%;
	left:25%;
	text-decoration: none;
	font-size:1vw;
	border-right: 2px solid #0E1B3F;
	padding-right:5%;
}
#number2 {
	color: #0E1B3F;
	text-decoration: none;
	font-size: 3vw;
	font-weight: bold;
}

#tel2 img {
	position:absolute;
	top:1%;
	left:-14%;
	color: #0E1B3F;
	width: 10%;
}

#mail a {
	position: absolute;
	top:65%;
	left:60%;
	font-size: 1.5vw;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	background-color: #6552DD;
	border: 0.1px solid #6552DD;
	padding: 1.2% 4% 1.2% 3%;
	
}
#mail a:hover {
	opacity: 0.5;
}


/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	.contact {
		padding-bottom:20%;
	}
	.contactcom {
		width:60%;
		font-size:1rem;
		margin:0 auto;
	}	
	#tel2 {
		position: absolute;
		top:54%;
		left:35%;
		border-right: none;
	}
	#number2 {
		font-size: 2rem;
	}
	#mail a {
		width:40%;
		position: absolute;
		top:70%;
		left:26%;
		font-size: 1.5rem;
	}
}
/*画面幅が650pxまではここを読み込む*/
@media screen and (max-width:650px) {
	#tel2 {
		position: absolute;
		top:60%;
		left:30%;
	}
	#number2 {
		font-size: 1.8rem;
	}
	#mail a {
		width:50%;
		position: absolute;
		top:75%;
		left:22%;
		font-size: 1.5rem;
	}
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	.en3 {
		position: absolute;
		top:30%;
		left:-3%;
		font-size:2.3rem;
	}
	#tel2 {
		position: absolute;
		top:60%;
		left:30%;
	}
	#number2 {
		font-size: 1.8rem;
	}
	#mail a {
		width:50%;
		position: absolute;
		top:78%;
		left:22%;
		font-size: 1.3rem;
	}
}
/*画面幅が470pxまではここを読み込む*/
@media screen and (max-width:470px){
	#tel2 {
		position: absolute;
		top:65%;
		left:30%;
	}
	#number2 {
		font-size: 1.8rem;
	}
	#mail a {
		width:50%;
		position: absolute;
		top:80%;
		left:22%;
		font-size: 1rem;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	.contact {
		padding-bottom:30%;
	}
	#tel2 {
		position: absolute;
		top:63%;
		left:28%;
	}
	#number2 {
		font-size: 1.5rem;
	}
	#mail a {
		width:50%;
		position: absolute;
		top:78%;
		left:22%;
		font-size: 1.1rem;
	}
}
/*画面幅が390pxまではここを読み込む*/
@media screen and (max-width:390px) {
	#mail a {
		width:53%;
	}
}
/*画面幅が375pxまではここを読み込む*/
@media screen and (max-width:375px) {
	#mail a {
		width:52%;
		position: absolute;
		top:78%;
		left:22%;
		font-size: 1.1rem;
	}
}
/*画面幅が320pxまではここを読み込む*/
@media screen and (max-width:320px) {
	#tel2 {
		position: absolute;
		top:70%;
		left:28%;
	}
	#number2 {
		font-size: 1.5rem;
	}
	#mail a {
		width:70%;
		position: absolute;
		top:82%;
		left:12%;
		font-size: 1.1rem;
	}
}
/*フッターのCSS*/
footer {
	background-color: #0E1B3F;
	width: 100%;
	margin: 0 auto;
  position: relative;
	padding:3% 0 1% 0;
}

.logo2 {
	margin-top: -1%;
	margin-left: 3%;
	color: #fff;
	font-size: 1.8rem;
	font-family: 'Lalezar', cursive;
	font-family: 'Secular One', sans-serif;
	font-family: 'Sora', sans-serif;
	margin-left: 2%;
	line-height: 0.8em;
}
.ja2 {
	font-size:0.8rem;
	letter-spacing:0.5em;
	margin-left:2%;
}
.linkList {
	width:100%;
}
.linkList ul {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom:3%;
}
.linkList ul li {
	width:12%;
	list-style-type: none;
}
.linkList ul li a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 3% 5%;
  font-size: 1rem;

}
.linkList ul li a:hover {
	color: #D2D6EB;
	font-size:1.1rem;
}
#copyright {
	width:20%;
	display: table-cell;
	vertical-align: center;
	text-align: center;
}
.copyright {
  font-size:0.8rem;
  color: #fff;
}
/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	.linkList ul li{
		width:15%;
		font-size:0.8rem;
	}
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	.linkList ul li{
		width:20%;
		margin-left:-1%;

	}
	.linkList ul li a {
		font-size:0.9rem;
	}
	.logo2 {
		font-size: 1.5rem;
		margin:2% 0 0 3%;
	}
	.ja2 {
		font-size:0.7rem;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	.logo2 {
		width:58%;
		margin: 5% auto 0;
	} 
	.linkList ul {
		margin:8% auto 3%;
		display:flex;
		flex-wrap:wrap;
		justify-content: start;
		width:80%;
	}
	.linkList ul li {
		width:40%;
		padding:0 0 5% 0;
	}
	.linkList ul li a {
		text-align:left;
		padding-left:0;
	}
}

/*会社概要のCSS*/
#top3{
position: relative;
width: 100%;
height: 35vw;
background-image: url("../images/skyscraper-3184798_1920.jpg");
background-repeat: no-repeat;
background-size:100% auto;
background-position:0 50%;
}

#top3 h2 {
position: absolute;
top: 40%;
left:5%;
color: #fff;
font-size: 5vw;
padding: 1% 5%;
text-shadow:0 0 5px gray;
letter-spacing: 0.1em;
line-height:1em;
font-family: 'Lalezar', cursive;
font-family: 'Secular One', sans-serif;
font-family: 'Sora', sans-serif;
background-color: rgba(23, 82, 118, 0.8);
}
#top3 h2 .company_ja {
	font-size:3vw;
	letter-spacing: 0.2em;
}
h3 {
font-family: 'Do Hyeon', sans-serif;
font-size: 2rem;
}
#aisatu2 {
	position: relative;
	padding:5% 0;
	}
#aisatu2 .en {
	position: absolute;
	top:30%;
}
/*画面幅が560pxの場合ここを読み込む*/
@media screen and (max-width:560px) {
	#aisatu2 .en {
		position: absolute;
		top:23%;
	}
}
/*画面幅が414pxの場合ここを読み込む*/
@media screen and (max-width:414px) {
	#top3 h2 {
		font-size:2rem;
		position:absolute;
		top:20%;
		left:20%;
	}
	#top3 h2 .company_ja {
		font-size:1.2rem;
	}
	h3 {
		font-size:1.5rem;
}
#aisatu2 {
position: relative;
padding:5% 0;
}
#aisatu2 .en {
position: absolute;
top:20%;
}
}
/*画面幅が360pxの場合ここを読み込む*/
@media screen and (max-width:360px) {
	#top3 h2 {
		font-size:1.6rem;
	}
	#top3 h2 .company_ja {
		font-size:1rem;
	}
}
/*画面幅1920px以下*/
@media screen and (min-width:1920px) {
	#top {
		background-size:100% 150%;
	}
}
/*会社概要のCSS*/
#gaiyo {
width: 80%;
margin: 0 auto 5%;
}
#gaiyo dl {
border-top: 1px solid #292626;
margin: 0 auto;
display: flex;
}
#gaiyo dl dt{
padding-top: 3%;
padding-bottom: 3%;
padding-left: 5%;
width: 20%;
font-size: 1.2rem;
font-weight: bold;
text-align:justify;
}
#gaiyo dl dd {
padding-top: 3%;
padding-bottom: 3%;
font-size: 1rem;
text-align: justify;
}
#gaiyo dl:last-child {
border-bottom: 1px solid #292626;		
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width:560px) {
	#gaiyo dl {
		width:80%;
		display: initial;
		margin:0 auto;
	}
	#gaiyo dl dt {
		width:100%;
		padding-left:0;
		border-top: 1px solid #292626;
	}
	#gaiyo dl dd {
		width:80%;
	}
}
/*アクセスのCSS*/
#access {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-color: #2C0B78;
	color: #fff;
	padding: 3% 0 35% 3%;
}
#access h3{
position: absolute;
top: 5%;
left:60%;
color: #fff;
font-size: 3rem;
padding: 1% 5%;
text-shadow:0 0 5px gray;
letter-spacing: 0.1em;
line-height:0.5em;
font-family: 'Lalezar', cursive;
font-family: 'Secular One', sans-serif;
font-family: 'Sora', sans-serif;

}
#access h3 .access_ja {
	font-size:1rem;
	letter-spacing: 0.2em;
}
#access #tetra {
	position: absolute;
	top:35%;
	left:65%;
	font-size: 1.4rem;
}
#access h4 {
	font-size: 1.3rem;
	margin-bottom: 0.3%;
}
#access #zyusyo p {
	font-size: 1rem;
}
#access #zyusyo {
	position: absolute;
	top:48%;
    left:64%;
	text-align: justify;
}
#map iframe{
	width: 45%;
	height: 75%;
	position:absolute;
	top:15%;
	left:5%;
}
/*画面幅が900pxまではここを読み込む*/
@media screen and (max-width: 900px) {
	#access {
		padding-bottom:45%;
	}
}
/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width: 768px) {
	#top3{
		margin-top:-3%;
	}
	#access {
		padding-bottom:90%;
	}
	#access h3{
		position: absolute;
		top: 1%;
		left:30%;
	}
		#access #tetra {
			position: absolute;
			top:14%;
			left:30%;
			font-size:2rem;
		}
		#access #zyusyo {
			position: absolute;
			top:24%;
			left:30%;
			text-align: justify;
		}
		#map iframe{
			width: 90%;
			height: 40%;
			position:absolute;
			top:55%;
			margin:0 auto;
		}
}
/*画面幅が610pxまではここを読み込む*/
@media screen and (max-width:610px) {
	#access {
		padding-bottom:120%;
	}
	#access h3 {
		position:absolute;
		left:25%;
	}
}
/*画面幅が500pxまではここを読み込む*/
@media screen and (max-width: 500px) {
	#top3{
		margin-top:-8%;
	}
	#access {
		padding-bottom:150%;
	}
	#access #tetra {
		position: absolute;
		top:12%;
		left:25%;
		font-size:1.8rem;
}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	#top3{
		margin-top:-12%;
	}
	#access {
		padding-bottom:160%;
	}
	#access h3 {
		position:absolute;
		left:20%;
		font-size:2.3rem;
	}
	#access #tetra {
		position: absolute;
		top:13%;
		left:15%;
	}
	#access #zyusyo {
		position: absolute;
		left:17%;
	}
}
/*画面幅が350pxまではここを読み込む*/
@media screen and (max-width: 350px) {
	#access {
		padding-bottom:200%;
	}
	#access h3 {
		position:absolute;
		left:15%;
	}
	#access #tetra {
		font-size:1.5rem;
		position:absolute;
		top:15%;
		left:17%;
	}
}
/*画面幅が320pxまではここを読み込む*/
@media screen and (max-width: 320px) {
	#top3 {
		margin-top:-15%;
	}
}

/*contactのCSS*/
#contact {
	position: relative;
	padding: 5% 0 5% 0;
}
#top4 {
width: 100%;
}
#top4 h2 {
color: #fff;
font-size: 3rem;
padding:3% 0 2% 0;
text-align:center;
text-shadow:0 0 5px gray;
letter-spacing: 0.1em;
line-height:0.8em;
font-family: 'Lalezar', cursive;
font-family: 'Secular One', sans-serif;
font-family: 'Sora', sans-serif;
background-color: rgba(23, 82, 118, 0.8);
}
#top4 h2 .contact_ja {
	font-size:1.5rem;
	letter-spacing: 0.2em;
}
#contact dl {
	width: 80%;
	margin: 0 auto;
}
#contact dl dt{
	float: left;
	padding:2% 2% 2% 8%;
	width: 80%;
	font-weight: bold;
	font-size: 1.2rem;
	text-align: justify;
}
#contact dl dd {
	border-bottom: 1px solid #3A3A3D;
	margin: 0;
	padding: 3% 0 3% 25%;
	font-size: 1.2rem;
}
#contact dl dt .must {
	font-size: 0.8rem;
	color: #fff;
	background-color: red;
	padding: 1% 4%;
	margin-right: 3%;
	font-size: 0.8rem;
}
input {
	padding: 2% 30% 2% 2%;
}

.button2 {
	display: block;
	padding: 1% 5% 1% 5%;
	text-align: center;
	color: #fff;
	background-color: #6883D8;
	position: absolute;
	top: 90%;
	left: 42%;
	font-size: 1.5rem;
	letter-spacing: 0.3;
	border-radius: 3px;
}
#contact p {
	width:47%;
	margin:0 auto;
	color: #0E1B3F;
	text-align: justify;
	line-height: 1.5;
	letter-spacing: 0.2em;
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom:5%;
}
#contactcom {
	display:block;
	text-align:center;
	font-size:130%;
	margin:5% auto;
}
/*画面幅が1000pxまではここを読み込む*/
@media screen and (max-width:1000px) {
	#contactcom {
		font-size:1.2rem;
	}
}

/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width: 768px) {
	#contactcom {
		font-size:1rem;
		margin:5% 3%;
	}
	#top4 h2 {
		font-size:200%;
	}
	#top4 h2 .contact_ja {
		font-size:1rem;
	}
	#contact dl {
		position: relative;
		padding: 3% 0 2% 0;
	}
	#contact dl dt{
		float: none;
		padding: 5% 0 0 0;
	}
	#contact dl dd {
		padding: 5% 0 5% 12%;
	}
	.button2 {
		position: absolute;
		top:95%;
		left:35%;
	}
}
/*画面幅が560pxまではここを読み込む*/
@media screen and (max-width: 560px) {
	#contact p {
		font-size:1rem;
	}
	.button2 {
		font-size:1rem;
	}
}
/*画面幅が480pxまではここを読み込む*/
@media screen and (max-width: 480px) {
	#contactcom {
		font-size:1rem;
		margin:10% 3%;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width: 428px) {
	#contact dl dt {
		width:100%;
	}
	#contact dl dd {
		padding:5% 10%;
		width:30%;
		border:none;
	}
	#contact dl dt{
		border-top:1px solid #3A3A3D;;
	}
}
/*画面幅が320pxまではここを読み込む*/
@media screen and (max-width: 320px) {
		#contact dl dd {
			padding:5% 1%;
		}
	}

/*事業案内のCSS*/
#top2 {
position: relative;
width: 100%;
height: 35vw;
background-image: url("../images/business_top.jpg");
background-repeat: no-repeat;
margin-bottom: -1.5%;
background-size:100%;
}
#top2 h2 {
position: absolute;
display:block;
top: 40%;
left:5%;
color: #fff;
font-size: 5vw;
padding: 1% 5%;
text-shadow:0 0 5px gray;
letter-spacing: 0.1em;
line-height:1em;
font-family: 'Lalezar', cursive;
font-family: 'Secular One', sans-serif;
font-family: 'Sora', sans-serif;
background-color: rgba(23, 82, 118, 0.8);
}
#top2 h2 .business_ja {
	font-size:3vw;
	letter-spacing: 0.2em;
}
#topcom {
	width:70%;
	color: #0E1B3F;
	text-align:justify;
	line-height: 1.5;
	letter-spacing: 0.2em;
	font-weight: bold;
	font-size: 1.3rem;
	margin: 3% auto 10% auto;
	padding-top: 5%;
}
/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width:768px) {
	#topcom {
		font-size:1rem;
		width:75%;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	#topcom {
		font-size:1rem;
		width:80%;
	}
	#top
}
#kiban, #software, #machinery {
	width: 100vw;
	height:50vw;
	position: relative;
	background-color:#E6F1FD;
}
#kiban {
	padding-top:3%;
}
#machinery {
	padding-bottom:5%;
}
#kiban_img img, #machinery_img img{
	width: 50%;
	position: absolute;
	top:7vw;
	left:10%;
}
#kiban #service, #machinery #service3{
	position: absolute;
	display:inline-block;
	top:0;
	left:5%;
	z-index: 10;
	font-size: 2.5rem;
	font-weight:bold;
	color:#6883D8;
	text-shadow: 1px 1px 3px #2d188a;
}
#kiban .number, #machinery .number {
	display:inline-block;
	position: absolute;
	top:-50%;
	left:108%;
	font-size:4.5rem;
	font-weight:bold;
}
.com {
	width:40vw;
	z-index: 20;
	position: absolute;
	display:block;
	top:26vw;
	left:50%;
	background-color: rgba(210,214,235,0.8);
	padding: 3% 3%;
	color: #0E1B3F;
	text-align:justify;
	letter-spacing: 0.2em;
	font-weight:bold;
}
#kiban h4, #machinery h4{
	font-size:2.5rem;
	z-index:20;
	color:#6883D8;
	text-shadow: 1px 1px 3px #b4afce;
	position:absolute;
	display:block;
	top:2vw;
	left:70%;
}
.kibancom1, .machinerycom1{
	width:30vw;
	position:absolute;
	dislay:block;
	top:13vw;
	left:63%;
	color: #0E1B3F;
	text-align:justify;
	letter-spacing: 0.2em;
	font-size: 1.2rem;
	font-weight:bold;
}
#naiyo {
	font-size:1rem;
}
.com h5 {
	font-size:1.2rem;
	width:36vw;
	margin:0 auto;
}

#software_img img{
	width: 50%;
	position: absolute;
	top:7vw;
	left:45%;
}
#service2 {
	position: absolute;
	display:inline-block;
	top:-2vw;
	left:43%;
	z-index: 10;
	font-size: 2.5rem;
	font-weight:bold;
	color:#6883D8;
	text-shadow: 1px 1px 3px #2d188a;
}
#service2 .number {
	display:inline-block;
	font-size:4.5rem;
	font-weight:bold;
}
.com2 {
	width:40vw;
	z-index: 20;
	display:block;
	position: absolute;
	top:25vw;
	left:5%;
	background-color: rgba(210,214,235,0.8);
	padding: 3% 3%;
	color: #0E1B3F;
	text-align:justify;
	letter-spacing: 0.2em;
	font-weight:bold;
}
.com2 h5 {
	font-size:1.2rem;
	width:36vw;
	margin: 0 auto;
}
#software h4 {
	display:block;
	position:absolute;
	top:4vw;
	left:13%;
	font-size:2.5rem;
	z-index:20;
	margin-right:50%;
	color:#6883D8;
	text-shadow: 1px 1px 3px#b4afce;
}
.softwarecom1 {
	width:25vw;
	position:absolute;
	display:block;
	top:13vw;
	left:13vw;
	color: #0E1B3F;
	text-align:justify;
	letter-spacing: 0.2em;
	font-size: 1.2rem;
	font-weight:bold;
}
/*画面幅が1190pxまではここを読み込む*/
@media screen and (max-width:1190px) {
	#machinery {
		padding-bottom:10%;
	}
	#kiban, #software, #machinery {
		height:60vw;
	}
}
/*画面幅が1024pxまではここを読み込む*/
@media screen and (max-width:1024px) {
	.com, .com2 {
		width:60vw;
		position:absolute;
		display:block;
		top:34vw;
	}
	.com {
		position:absolute;
		display:block;
		left:30%;
	}
	.com h5, .com2 h5 {
		width:55vw;
	}
	#machinery {
		padding-bottom:5%;
	}
	#kiban, #software, #machinery {
		width: 100vw;
		height:65vw;
		position: relative;
	}
	#service2 {
		position:absolute;
		display:inline-block;
		top:-5vw;
	}
	#kiban #service, #machinery #service3 {
		position:absolute;
		display:inline-block;
		top:-3vw;
	}
}
/*画面幅が900pxまではここを読み込む*/
@media screen and (max-width: 900px) {
	#software h4 {
		position:absolute;
		top:4vw;
		left:8%;
}
#kiban, #software, #machinery {
	height:70vw;
}
}
/*画面幅が768pxまではここを読み込む*/
@media screen and (max-width: 768px) {
	#top2 {
	margin-top:-3%;
	}
	#kiban, #software, #Machinery {
		height:auto;
		position:static;
		padding-bottom:5%;
	}
	#kiban {
		padding-top:0;
	}
	#machinery {
		padding-bottom:70%;
	}
	#kiban_img img, #software_img img, #machinery_img img {
		position:static;
		margin-top:2%;
		width:80%;
		z-index:0;
	}
	#kiban #service, #software #service2, #machinery #service3 {
		font-size:2rem;
		position:static;
		display:inline-flex
		z-index:0;
		text-align:center;
		margin-top:1%;
	}
	#kiban .number, #software .number, #machinery .number {
		position:static;
		font-size:2.5rem;
	}
	.com, .com2 {
		position:static;
		z-index:0;
		width:80%;
		margin:3% auto 5%;
	}
	#kiban h4, #software h4, #machinery h4 {
		position: static;
		z-index:0;
		text-align: center;
		margin:0 auto;
		padding-top:5%;
	}
	.com h5, .com2 h5 {
		width:80%;
	}
	.kibancom1, .softwarecom1, .machinerycom1 {
		position:static;
		width:80%;
		margin:5% auto ;
	}
}
/*画面幅が560pxまではここを読み鋳込む*/
@media screen and (max-width:560px) {
	#machinery {
		padding-bottom:100%;
	}
	#kiban h4, 	#software h4, #machinery h4 {
		font-size:2rem;
	}
	#kiban #service, #software #service2, #machinery #service3 {
		font-size:1.5rem;
	}
}
/*画面幅が500pxまではここを読み込む*/
@media screen and (max-width:500px) {
	#top2 {
		margin-top:-8%;
	}
	#machinery {
		padding-bottom:130%;
	}
}
/*画面幅が414pxまではここを読み込む*/
@media screen and (max-width:414px) {
	#top2 {
		margin-top:-12%;
	}
	#top2 h2 {
		position:absolute;
		top:20%;
		left:20%;
		font-size:2rem;
	}
	#top2 h2 .business_ja {
		font-size:1.2rem;
	}
	#machinery {
		padding-bottom:140%;
	}
	#kiban_img img, #software_img img, #machinery_img img {
		width:90%;
	}
	.com h5, .com2 h5 {
		width:95%;
	}
}
/*画面幅が390pxまではここを読み込む*/
@media screen and (max-width:390px) {
	#machinery {
		padding-bottom:160%;
	}
	}
/*画面幅が375pxまではここを読み込む*/
@media screen and (max-width:375px) {
	#machinery {
		padding-bottom:170%;
	}
	}
	/*画面幅が360pxまではここを読み込む*/
@media screen and (max-width:360px) {
	#top2 h2 {
		font-size:1.6rem;
	}
	#top2 h2 .business_ja {
		font-size:1rem;
	}
/*画面幅が320pxまではここを読み込む*/
@media screen and (max-width:320px) {
	#top2 {
		margin-top:-15%;
	}
	#machinery {
		padding-bottom:210%;
	}
}