/*おおたけ*/

@charset "utf-8";



@keyframes fadeIn {

	from {

		opacity:0; /* 初めは透明 */

	}

	to {

		opacity:1; /* 不透明にする */

	}

}



.company{

	opacity:0;

	position:relative;

	right:-100%; /* 初期位置（画面外） */

	animation:slideInCompany 2s ease-in-out forwards; /* アニメーション効果の設定 */

	z-index:99;

}



@keyframes slideInCompany {

	to {

		opacity:1;

		right:0; /* 目標位置（画面内） */

	}

}



.service{

	opacity:0;

	position:relative;

	animation:slideInService 2s ease-in-out forwards;  /* アニメーション効果の設定 */

	left:-100%; /* 初期位置（画面外） */

	z-index:98;

}



@keyframes slideInService {

	to {

		opacity:1;

		left:0; /* 目標位置（画面内） */

	}

}



.news{

	opacity:0;

	position:relative;

	animation:slideInNews 2s ease-in-out forwards;

	right:-100%;

	z-index:97;

}



@keyframes slideInNews {

	to {

		opacity:1;

		right:0; /* 目標位置（画面内） */

	}

}



body{

	margin:0;

	padding:0;

	overflow-y:scroll; /* 上下のスクロールバーを表示 */

	overflow-x:hidden;

}



nav{

	display:block;

	width:220px;

	position:fixed;

	background-color:#4d4d4d;

	top:0;

	left:-300px;

	bottom:0;

	transition:all 0.5s;

	z-index:10;

	opacity:0;

}



.open nav{

	left:0;

	opacity:1;

  z-index:1000;

}



.sikaku{

	z-index:10;

	width:220px;

	height:100px;

	position:fixed;

	background:#d10011;

	bottom:0;

}



.red{

  background:#ff0000;

}



h4{

	z-index:11;

	color:#fff;

	left:5.6%;

	padding-top:5px;

}



.inner ul li img{

	width:190px;

}



nav .inner{

	padding:25px 0 0 0;

}



nav .inner ul{

	list-style:none;

	margin:0;

	padding:0;

}



nav .inner ul li{

	margin:0;

}



nav .inner ul li a{

	text-align:center;

	display:block;

	text-decoration:none;

	color:#fff;

	font-size:14px;

	padding:1rem;

	transition-duration:0.2s;

}



nav .inner ul li a:hover{

	background-color:#e60013;

}



.toggle-btn{

	display:block;

	position:fixed;

	top:30px;

	right:30px;

	width:30px;

	height:30px;

	z-index:999;

	cursor:pointer;

}



.toggle-btn span{

	z-index:11;

	position:absolute;

	display:block;

	left:0;

	width:30px;

	height:2px;

	background-color:#fff;

	transition:all 0.5s;

	border-radius:4px;

}



.toggle-btn span:nth-child(1){

	top:4px;

}



.toggle-btn span:nth-child(2){

	top:14px;

}



.toggle-btn span:nth-child(3){

	bottom:4px;

}



.open .toggle-btn span{

	background-color:#fff;

}



.open .toggle-btn span:nth-child(1){

	transform:translateY(10px)rotate(-315deg);

}



.open .toggle-btn span:nth-child(2){

	opacity:0;

}



.open .toggle-btn span:nth-child(3){

	transform:translateY(-10px)rotate(315deg);

}



#mask{

	display:none;

	transition:all 0.5s;

}



.open #mask{

	display:block;

	background-color:#000;

	width:100%;

	height:100%;

	top:0;

	left:0;

	position:fixed;

	z-index:997;

	opacity:0.8;

	cursor:pointer;

}



#wrap{

	margin:0 auto;

	height:auto;

}



.shiba{

  width:100vw;

  height:100%;

  z-index:3;

  animation:fadeIn 3s forwards;

  position:absolute;

  top:0;

  display:flex;

  justify-content:center;

  align-items:center;

}



.shiba img{

	width:50vw !important;

	height:calc(50vw * 0.3) !important;

}



.nezi{

  width:100vw;

  height:auto;

  position:relative;

}



.nezi img{

	width:100vw;

	height:auto;

	margin-left: calc(50% - 50vw);

	margin-right: calc(50% - 50vw);

	aspect-ratio: 16 / 9;

}



main{

  margin:0;

  padding:0;

  display:flex;

  flex-direction:column;

}

.strength{

	width:100%;

	height:auto;

	margin-top:65px;

}



.strength h2{

	margin:0;

	padding:0;

	text-align:center;

}



.strength h2 p{

	margin:0;

	padding:0;

	margin-top:12px;

}



.stTitle1{

  height:50px;

  line-height:50px;

	font-size:280%;

	letter-spacing:0.03em;

	font-family:Arial;

	color:#707070;

}



.stTitle1::first-letter{

	color:#ff0000;

}



.stTitle2{

	height:15px;

	line-height:15px;

	font-size:55%;

	letter-spacing:0.1em;

	color:#ff0000;

}



.strength ul{

	margin:0;

	padding:0;

	display:flex;

	justify-content:center;

}



.strength ul li{

	margin:0 10px;

	padding:0;

	list-style:none;

	width:250px;

	display:flex;

	flex-direction:column;

	justify-content:flex-start;

	align-items:center;

}



.strength ul li p{

	margin:0;

	padding:0;

}



.stconTitle{

  width:100%;

	height:20px;

	line-height:20px;

	font-size:120%;

	color:#ff0000;

	letter-spacing:0.4em;

	font-weight:bold;

	text-align:center;

	margin-top:35px !important;

}



.stconImg{

	width:75%;

	height:auto;

	margin-top:25px;

}



.stconText{

	width:75%;

	line-height:1.75;

	margin-top:40px !important;

	font-size:75%;

	letter-spacing:0.1em;

	color:#4d4d4d;

}



.company , .service , .news{

  display:flex;

  flex-direction:row;

  justify-content:center;

  width:100%;

  height:400px;

  margin-top:65px;

}



.contents-img{

	width:550px;

	display:flex;

}



.company .contents-img,

.news .contents-img{

	justify-content:flex-end;

	align-items:flex-end;

}



.service .contents-img{

	justify-content:flex-start;

	align-items:flex-end;

	order:2;

}



.contents-img img{

 	width:calc(495px * 0.75);

 	height:calc(360px * 0.75);

}



.comconImg1{

	display:none;

}



.comconImg2{

	display:block;

	

}



.contents-text{

  width:650px;

  position:relative;

  top:0;

}



.service .contents-text{

	order:1;

}



.service .contxChild{

	margin-left:250px;

}



.contents-text h2{

  margin:0;

  padding:0;

	font-size:680%;

	height:70px;

	line-height:70px;

	padding-left:30px;

	padding-top:12px;

	opacity:0.2;

	position:absolute;

	top:0;

	left:0;

}



.contents-text h2::first-letter{

	color:#ff0000;

}



.service .contents-text h2{

	left:80px;

}



.contxChild{

	margin-left:110px;

}



.contxChild p{

  margin:0;

  padding:0;

}



.contxTitle1{

	margin-top:75px !important;

	font-size:240%;

	color:#ff0000;

	font-weight:bold;

	height:30px;

	line-height:30px;

	position:relative;

}



.contxTitle2{

	margin-top:30px !important;

	font-size:200%;

	height:30px;

	line-height:30px;

	color:#4d4d4d;

}



.contxExplanation{

	margin-top:30px !important;

	font-size:70%;

	width:300px;

	line-height:1.8;

	color:#4d4d4d;

}



.more{

	margin-top:30px !important;

	font-size:0.05em;

	display:block;

	width:140px;

	height:15px;

	line-height:1;

	letter-spacing:0.75em;

	border-bottom:2px solid #ff0000;

	position:relative;

	color:#ff0000;

	font-weight:bold;

}



.more a{

  display:block;

  width:100%;

  height:15px;

	text-decoration:none;

	color:#ff0000;

}



.more::before{

	content:"";

	width:16px;

	height:2px;

	background:#ff0000;

	position:absolute;

	top:8px;

	right:0;

	transition: all .3s;

}



.more::after{

	content:"";

	width:6px;

	height:2px;

	background:#ff0000;

	position:absolute;

	top:8px;

	right:0;

	transform:rotate(35deg);

	transform-origin:100% 100%;

	transition: all .3s;

}



.more:hover::before{

	right:-8px;

}



.more:hover::after{

	right:-8px;

}



.footer{

	width:100vw;

	height:300px;

	background:#313131;

	margin-top:75px;

	color:#fff;

	margin-left:calc(50% - 50vw);

	margin-right:calc(50% - 50vw);

}



.footer p{

	margin:0;

	padding:0;

}



.contact{

	display:flex;

	flex-direction:column;

	align-items:center;

}



.conTitle1{

	font-size:140%;

	font-weight:bold;

	margin-top:10px !important;

}



.addreess small{

	font-size:70%;

}



.tel-num , .fax-num{

	font-size:140%;

	font-weight:bold;

}



.info{

	display:flex;

	width:auto;

	height:70px;

	margin-top:25px;

}



.contact-btn{

	height:70px;

	display:flex;

	align-items:center;

}



.footer-sikaku{

	width:150px;

	height:40px;

	margin-left:50px;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:50%;

	border:2px solid #fff;

	transition: all .3s;

}



.footer-sikaku:hover{

	background:#ff0000;

	transition: all .3s;

}



.footer-logo{

	width:100%;

	display:flex;

	justify-content:center;

}



.footer-logo img{

	width:200px;

}



.copylight{

	font-size:30%;

	width:100%;

	text-align:center;

}



.animated-element {

	opacity:0; /* 最初は透明 */

	transform:translateY(100%); /* 下からスライド */

	transition:opacity 0.5s ease, transform 1.5s ease;

}



.animated-element.active {

	opacity:1; /* 不透明にする */

	transform:translateY(0); /* 下からスライド */

}



@media screen and (max-width:1000px){



 .strength{

  margin-top:75px;

 }

 

 .stTitle1{

   height:37px;

   line-height:37px;

   font-size:200%;

   letter-spacing:0.03em;

 }



 .stTitle2{

   height:12px;

   line-height:12px;

   font-size:45%;

 }



 .stconTitle{

   height:18px;

   line-height:18px;

   font-size:100%;

 }



 .stconText{

   width:100%;

   margin-top:25px !important;

   font-size:70%;

 }



 .company , .service , .news{

  height:auto;

  flex-direction:column;

 }



 .contents-img{

  width:100%;

  position:relative;

}



 .contents-img img{

  width:1000px;

  height:calc(375px * 0.75);

  

 }



 .comconImg1{

   display:block;

 }



 .comconImg2{

   display:none;

 }



 .contents-text{

  top:-30px;

  width:100%;

 }



 .contents-text h2{

  font-size:400%;

  padding-left:10px;

 }



 .contxChild{

  margin-left:50px;

  margin-right:50px;

 }



 .contxExplanation{

  width:100%;

 }



 .service .contents-img{

  order:1;

 }



 .service .contents-text{

  order:2;

 }



 .service .contents-text h2{

  left:0;

 }



 .service .contxChild{

  margin-left:50px;

 }

}

@media screen and (max-width:500px){

	.address{ margin-top:10px; }

	.contents-img img{ width:100%; }

	.tel-num, .fax-num{ font-size:100%; }
 
	.comconImg1{ display:none; }

	.comconImg2{ display:block; }

}