@charset "utf-8";
/*google fontインポート*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap');


/* 基本レイアウト ここから↓ */
body {
	background-color: #d4d4d4;
	color: #333333;
	font-family: 'M PLUS 1p', sans-serif;
	margin:0;}/*マージン*/
header{
	position:relative;

}
h1{
	position:fixed;
	top:0;
	left:0;
	margin-top:0;
	z-index:100;
	}
h1 img{
	transition:border-radius 0.2s;
	transition:transform 0.5s ease-in-out 0s;
}/*8/19　↑丸く変形　↓拡大*/
h1 img:hover{
	border-radius:50%;
	transform:scale(2.5);
}/*8/19　↑丸く変形　↓拡大*/
nav ul{
	list-style:none;
	position:fixed;
	right:0;
	top:0;
	margin-top:0;
	z-index:100;
	font-weight:900;}

/*スライダー制御(ヒーローヘッダーにしたい！)*/
#graphic {
	
	width:1280px;
	height:800px;
	margin: 0 auto 30px auto;
}
#graphic ul {
	list-style: none;
	padding-left: 0;
	margin-top:0;
}
#graphic ul li {
	display: none;
	position: absolute;
}
#graphic ul li.now {
	display: block;	
}
/*ここまでスライダー制御*/
nav li{
	display:inline;
	padding-left:15px;
	padding-right: 15px;
	border:2px solid #4b0082;
	background-color: #00ffff;
}

h2{
	font-size:200%;
	margin-left:100px;
	padding-left:20px;
	border-bottom:3px solid #ffcc66;
	border-left:10px solid #ffcc66;}
ul {
	list-style:none;
}
section ul li{
	margin-left:100px;
	padding-left:20px;
	border-bottom:3px dotted #ffcc66;
	font-size:160%;
}

nav a:hover{
	color:#000000;
	background-color:#99ff66;
}
aside p:hover{
	color:#000000;
	background-color:#99ff66;
}
aside img{
	position:fixed;
	bottom:0px;
	right:0;
	transition:border-radius 0.2s;
	transition:transform 0.5s ease-in-out 0s;
}/*8/19 ↑丸く変形　↓拡大*/
aside img:hover{
	border-radius:50%;
	transform:scale(2.5);	
}/*8/19 ↑丸く変形　↓拡大*/
aside p{
	clear:both;
}
footer {
	width:100%;
	text-align:center;
	background-color: #00ffff;}
footer p{
	padding-bottom:20px;
}
address{
	padding-top:20px;
}
#copyright{
	margin-bottom: 0;
}
/*.header-in*/
.graphic{
	max-width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
ol li{
	display:inline;
	font-size:80%;
}

/*ここから事業内容*/
.graphicc{
	width:1280px;
	height:800px;}
.graphicc ul{
	list-style: none;
	padding-left: 0;
	margin: 0;
}

section ul li{
	margin-left:100px;
	padding-left:20px;
	border-bottom:3px dotted #ffcc66;
	font-size:200%;
}
/*ここからサービス*/
.sage2 h2{
	margin-top:120px;
	margin-bottom: -60px;}

.servis_box figure{
	display:block;
	max-width:100%;
	margin:100px 0px 0px 90px;
	float:left;
}
.servis_box figure:last-child{
	margin-right:0;
	/*margin-top:100px;*/
	margin-bottom: 30px;
	
}
.servis_box {
	overflow: hidden;
}
.box1 {
  display:flex;
  flex-direction: row-reverse;
  justify-content: center;
	margin:20px;
}
.box2{
  display:flex;
  flex-direction: row;
  justify-content: center;
	margin-top:30px;
}
.text {
	text-align:left;
	margin-left:20px;
}

h3 {
  font-size: 30px;
  margin: 0;
}

.pict {
 max-width: 100%;
  margin-left: 3%;
}

/*ここから商品開発*/

.sage h2{margin-top:120px;}
.box {
  display:flex;
  flex-direction: row-reverse;
	justify-content: space-between;
	margin:20px;
}
.boxx {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
	margin-top:30px;
}

/* ここからお問い合わせ*/
.p label{margin-left:300px;}
input[type="text"] {
	width: 250px;
/*margin-left:150px;*/
}
input[type="email"] {
	width: 250px;
}
textarea{
	width:300px;
	height:150px;
}
.attend li{
	margin-left:150px;}
.action{
	margin-left:150px;}
.text_area{
	margin-left:150px;}
input[type="radio"] {
	/*vertical-align:1px;*/
	top: -3px;
	}/*ラジオボタンとテキストずれ*/
.gmap{
		height:0;
		overflow:hidden;
		padding-bottom:23%;
		position:relative;
}/*グーグルマップ埋め込み*/
.gmap iframe {
	position: absolute;
	left: 100px;
	top: 0;
	height: 100%;
	width: 50%;
}/*グーグルマップ画像*/
.gmapbig{
	width:260px;
	height:50px;
	background-color:rgb(197, 140, 211);
	padding:10px;
	margin:0 0 10px 100px;
}/*マップリンク*/
.gmapbig{
	transition: width 0.5s ease-in-out 0s;
}/*右に伸びる*/
.gmapbig:hover{
	width:600px;
}/*右に伸びる*/

/*1024px以下の場合*/
@media(max-width:1024px){
header img{
	max-width:100%;
	height:auto;}
nav li {
	text-align:left;
	padding:0;
}
h1 img{
	max-width:100%;
	height:auto;
}

aside img{
	max-width:60%;
	height:auto;
	z-index:100;	
}

.header-in{
	width:auto;
}
.servis_box figure{
	max-width:48%;/*100*/
	margin:100px 0 0 0;
}}


/*600px以下の場合*/
@media(max-width:600px){
/*---グローバルメニューを非表示---*/
nav{
		display: none;
}
/*---グローバルメニューを非表示---*/	
nav li{
	font-size:60%;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:transparent;
}
h1 img{
	max-width:50%;
	height:auto;
}
#graphic{
	max-width:100%;
	height:220px;/*300*/
	margin-left:auto;
	margin-right:auto;
}
#graphic ul{
	margin-top: 0;
}
#graphicc{
	max-width:100%;
	margin-left:auto ;
	margin-right:auto;
}
#graphicc ul{
		padding-left: 0 ;
		margin-top: 0;
}
h2{	
	font-size:80%;
	margin-left:20px;
}
section ul li{
	font-size:110%;
	margin-left:30px;
	margin-right:30px;
	padding-left:0;
}
.sage2 h2{
	margin-top:60px;
	margin-bottom: -40px;}

.servis_box figure{
	max-width:100%;/*100*/
	margin:60px 0 -40px 90px;
}
.servis_box img{
	width:70%;
	/*margin:0;*/}

.sage h2{margin-top:60px;}


article li{
	font-size:80%;
}
aside img{
	max-width:30%;
	height:auto;
position:fixed;
	bottom:120px;/*top:450*/
	right:0;
z-index:100;	
}
.box1 {
    flex-direction: column-reverse;
  }
 .box2{
    flex-direction: column-reverse;
margin-left:20px;
  }
.box {
    flex-direction: column-reverse;
  }
 .boxx{
    flex-direction: column-reverse;
  }
h3 {
  font-size: 10px;
}
.image_right{
  max-width: 100%;
  height:auto;
}
.image_left{
  max-width: 90%;
  height:auto;
 margin-left:12px;
}
.attend li{
	margin-left:20px;}
.action{
	margin-left:40px;}/*80*/
.text_area{
	margin-left:30px;}
textarea{
	max-width:80%;}
.gmap {
	padding-bottom: 56.25%;
}
.gmap iframe {
	position: absolute;
	left: 0px;
	top: 0;
	height: 100%;
	width: 100%;
}
.sukima{		/*position:relative;*/
	display:inline-block;
	margin-left:-10px;}
	/*padding-left:20px;*/
.container{
	padding-bottom: 120px;
	box-sizing: border-box;
}
footer{
	position:fixed;
	bottom: 0;
}

address{
	font-size:50%;}}

/*ここから下がハンバーガーメニューのスタイル*/
.gnavi__sp-style {
	display: none;
  }
  @media screen and (max-width: 600px) {
  .gnavi__pc-style {
	display: none;    
  }
  .gnavi__sp-style {
	display: block;
  }
   
  /*メニューボタン　展開前*/
  .menu-btn {
	display : block;
	position: fixed;
	z-index: 3;
	right: 0;/*30px*/
	top: 0;/*20px*/
	width: 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
	background: rgb(240, 240, 240);
  }
  .menu-btn span {
	display : block;
	position: absolute;
	width: 30px;
	height: 2px ;
	left: 6px;
	background: #555;
	transition: 0.3s ease-in-out;
  }
  .menu-btn span:nth-of-type(1) {
	top: 10px;
  }
  .menu-btn span:nth-of-type(2) {
	top: 20px;
  }
  .menu-btn span:nth-of-type(3) {
	top: 30px;
  }
	 
  /*メニューボタン　展開後*/
  .menu-btn.active span:nth-child(1) {
	top: 16px;
	left: 6px;
	background :#555;
	transform: rotate(-45deg);
  }
  .menu-btn.active span:nth-child(2),
  .menu-btn.active span:nth-child(3) {
	top: 16px;
	background :#555;
	transform: rotate(45deg);
  }
   
  /*スマホ用のメニュー*/
  .gnavi__sp-style {
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;/*left*/
	color: #fff;
	background-color: rgba(0,0,0,0.7);
	text-align: center;
	width: 31%;/*100*/
	height: 31vh;/*100*/
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
	display: flex;
	align-items: center;
	/*visibility: hidden;*//*8/19 追記　消し*/
  }
  .gnavi__sp-style ul {
	margin: 0 auto;
	padding: 0;
	width: 25%;/*100*/
  }
  .gnavi__sp-style ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;/*100*/
	transition: .4s all;
  }
  .gnavi__sp-style ul li:last-of-type {
	padding-bottom: 0;
  }
  .gnavi__sp-style ul li:hover{
	background :#ddd;
  }
  .gnavi__sp-style ul li a {
	display: block;
	color: #fff;
	padding: 1em 0;/*8/18　追記*/
	text-decoration :none;
	margin: 50px 0 -50px 10px;/*8/18　追記*/
	pointer-events: none;/*8/18　追記*/
  }
  .gnavi__sp-style.active {
	opacity: 1;/*1*/
	visibility: visible;/*8/19　追記*/
  }
  .gnavi__sp-style.active ul li a {
  	pointer-events: auto;
  }/*8/19　追記*/
}
  /*https://sakuragraphica.jp/web_construction/web_html_css/post-1592/*/
  /*https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events*/

/*大きさと色が変わるアニメーション*/
aside img{animation: scale-and-color 4s ease 0s infinite alternate;}
/*scale-and-colorのキーフレームを定義*/
@keyframes scale-and-color {
    0%{
        background: #ad4444;
        transform: scale(1);
    }
    50%{
        background: #3946ad;
        transform: scale(2.5);
    }
    100%{
        background: #4dad48;
        transform: scale(1);
    }
}

/*600px以下の場合*/
@media(max-width:600px){
	/*ジグザグに動くアニメーション*/
aside img{animation: zigzag 4s ease 0s 5 normal;}
/*zigzagのキーフレームを定義*/
@keyframes zigzag {
    0%{transform: translate(0,0);}
    10%{transform: translate(-50px,-100px);}
 20%{transform: translate(-100px,0px);}
30%{transform: translate(-150px,-100px);}
40%{transform: translate(-200px,0px);}
50%{transform: translate(-250px,-100px);}
60%{transform: translate(-300px,0px);}
70%{transform: translate(-300px,-100px);}
80%{transform: translate(0px,-100px);}
90%{transform: translate(-300px,0px);}
 100%{transform: translate(0,0);}
}
/*右に伸びる左寄せ*/
.gmapbig{
	margin-left: 0;
}}