@charset "UTF-8";

@media screen and (min-width:631px){
/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
}
	
	.atention{
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		margin:0 0 3.3em 0;
		color: #39077C;
		animation-name: svelte-2pslu5-loop;
    animation-iteration-count: infinite;
    animation-duration: 5s; 
		background: rgba(93,218,255,1.00);
			width:32em;
		border: groove rgba(255,211,0,1.00) 10px;
}
	 @keyframes svelte-2pslu5-loop {
    0% {
      filter: hue-rotate(0deg) saturate(8); }
    50% {
      filter: hue-rotate(360deg) saturate(1); }
    100% {
      filter: hue-rotate(0deg) saturate(8); } }
	

#container{
width: auto;
	margin: 50px;
	display: grid;
	grid-template-columns: 30vw 670px ;
	grid-template-rows: auto; 
	font-family: Arial,Helvetica,"sans-serif","Noto Sans JP";
		color: black;

}

/* メニュー全体*/

header{
	position: fixed;
	width:30vw;
	margin: 0px;
	padding: 0px;
}
h1 a{
	text-decoration: none;
	color:black;
	font-size: calc(11px + 2vw)
}

ul{
	padding: 0px;
	margin: 0px;
	
}
ul li{
	list-style-type: none;
	line-height: 1.5em;
}

ul li a{
	text-decoration: none;
	color: #504275
}

/* workpage */
	
#portofolio{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	
	grid-column: 2 / 3;
	grid-row: 1;
	
}

#portofolio p a{
	text-decoration: none;
	
}
		#portofolio16{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio15{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio14{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio13{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio12{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
	
	#portofolio11{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio9{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio8{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
		#portofolio7{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	#portofolio6{
	
	padding: 2px 10px;
	margin: 10px 0px;
		
}
	#portofolio6 img{
	width:30vw
}

#portofolio5{
	
	padding: 2px 10px;
	margin: 10px 0px;
}

#portofolio4{
	
	padding: 2px 10px;
	margin: 10px 0px;
}

#portofolio3{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
#portofolio2{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
#portofolio1{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
/* workpage end */

/* price */

#price{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	grid-column: 2 / 3;
	grid-row: 1;
}
#mainsent{
	

	padding: 2px 10px;
	margin: 10px 0px;
	
}

/* price end */
footer{
	
	font-size: 8px;
	margin: 0px 50px 0 50px;
	width: calc(670px + 30vw);
	padding:1px 0px;
}

}

@media screen and (max-width:630px){
/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
}

#container{
width: auto;
	margin: 20px;
	display: grid;
	grid-template-columns: 90vw ;
	grid-template-rows: 220px 4526px; 
	font-family: Arial,Helvetica, "sans-serif","Noto Sans JP";
		color: black;

}

/* メニュー全体*/

header{
	height: 10px;
	margin: 0px;
	padding: 0px;
}
h1 a{
	text-decoration: none;
	color:black;
}

ul{
	padding: 0px;
	margin: 0px;
	
}
ul li{
	list-style-type: none;
	line-height: 1.5em;
}

ul li a{
	text-decoration: none;
	color: #504275
}

/* workpage */
	
#portofolio{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	grid-column: 1 / 2;
	grid-row: 2;
	
}

#portofolio p a{
	text-decoration: none;
	
	}
		#portofolio16{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio15{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio14{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
		#portofolio13{
	
	padding: 2px 10px;
	margin: 10px 0px;
	}
	
		#portofolio12{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	
	#portofolio11{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	
	
	#portofolio10{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	
	#portofolio9{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
		#portofolio8{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
		
	#portofolio7{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	
	#portofolio6{

	padding: 2px 10px;
	margin: 10px 0px;
}
	
		#portofolio6 img{
	width:30vw
}

#portofolio5{
	
	padding: 2px 10px;
	margin: 10px 0px;
}

#portofolio4{
	
	padding: 2px 10px;
	margin: 10px 0px;
}

#portofolio3{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
#portofolio2{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
#portofolio1{
	
	padding: 2px 10px;
	margin: 10px 0px;
}
	
	iframe{
		width: 80vw;
	}
/* workpage end */

/* price */

#price{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	grid-column: 1 / 2;
	grid-row: 2;

}
#mainsent{

	padding: 2px 10px;
	margin: 10px 0px;
	
}

/* price end */
footer{
	
	font-size: 4px;
	margin: 0px 20px 0 20px;
	width: calc(30vw);
	padding:1px 0px;
	
}
	
	.atention{
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		margin:0 0 3.3em 0;
		color: #39077C;
		animation-name: svelte-2pslu5-loop;
    animation-iteration-count: infinite;
    animation-duration: 5s; 
		background: rgba(93,218,255,1.00);
			width:32em;
		border: groove rgba(255,211,0,1.00) 10px;
}
	 @keyframes svelte-2pslu5-loop {
    0% {
      filter: hue-rotate(0deg) saturate(8); }
    50% {
      filter: hue-rotate(360deg) saturate(1); }
    100% {
      filter: hue-rotate(0deg) saturate(8); } }

}