@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@700&display=swap');

@media screen and (min-width: 450px)
{

	html{ 
			font-size: 62.5%;
			}
body		{
			width: 100%;
			color: #333;
			background-color:#fff;
			-webkit-font-smoothing: antialiased;
			-moz-font-smoothing: antialised;
			font-family: 'Noto Sans JP', serif;
			padding: 0;
			margin: 0;
			overflow: scroll;
		}
i 			{
			font-size: 12px;
			font-size: 1.2rem;
			font-family: 'Noto Sans JP' , serif;
			margin-right: 3px;
			}
			
hr			{
			border: none;
			width: 85%;
			margin-left:0;
			border-top: dashed 1px #ccc;
			border-bottom: 0;
			}
p{			
			font-size: 13px;
			font-size: 1.3rem;
}


/*リンク */

a:visited{
  			color: #000;
}
a {		
			color: #444;
			font-style: bold;
			text-decoration: none;
}
a:hover{
  			color : blue;
}
a:active{
			color : #cccc00;
}


/* 選択時背景色 */ 
::selection {
			background: #cccc00;
			color: #000;
}

/* Firefox */ 
			::-moz-selection {
			background: #cccc00;
			color: #000;
}


h1			{
			font-size: 38px;
			font-size: 3.8rem;
			margin-top: 5px;
			/* background: rgba(255,255,255,0.5); */
			}

h2			{
			margin-top: 0;
			/*border-left: solid 25px #ffcc00-*/
			}
h3			{
			font-size: 16px; 
			font-size: 1.6rem;
			font-weight: bold;
			}

iframe {
			overflow-x: scroll;
			margin: 0;
			border: none;
			width: 100%;
			min-width:650px;
			height: 110px;
}

/*トップ＆ボトムのもや */



/* 回ってるやつ */
header #rotate	{
			width: 100%;
			text-align:left;
			margin: 0px;
			padding: 0px;
			}
	
/* タイトル , メニューバー*/
#yhmenu {
			padding: 0;
			margin: 0;
			width:100%;
			background-color: #fff;
			}

#topmenu {	color: #666;
			z-index: 99;
			width: 60%;
			min-width:490px;
			max-width:700px;
			margin: 0 auto 0 19%;
			padding: 0;
}		

/*メニュー内、writingsやcontactのスタイル */ 
#topmenu a#writings { 
			font-size: 15px; 
			font-size: 1.5rem;
			font-family: 'League Script', serif;
			color: #000;
			}
#topmenu a:hover#writings {
			color:#ff0000;
			background-color:transparent;
			}

/*メニュー内、リンクなどのスタイル */ 
#topmenu a:hover{
			color: #fff;
			background-color :blue;
}

#topmenu a:hover.en {
			background-color: green;
		
}
#topmenu a:hover.jp {
			background-color: red;
			
}
#topmenu a {
			color: #666;
}

#topmenu li	{ 
			letter-spacing: 1.5px;
			font-size: 13px;
			letter-spacing: 0.15rem;
			font-size: 1.3rem;
			font-family: 'Black Ops One', monospace;
			display:inline;
			padding: 0;
			color: #666;
}
#topmenu p.keitaiver {
			display:inline;
			padding-right:5px;
			}
#topmenu ul{
			list-style-type: none;
			display: flex;
			justify-content: space-between;
			margin-top: 85px;
			padding: 0;
			font-size: 0px;
			}

/*タイトルのスタイル */ 
#title {	
			text-align: left;
			padding-left:3px;
			position: absolute;
			top: 30px;
			letter-spacing: 3px;
			letter-spacing: 0.3rem;
			word-spacing: 10px;
			color: #888;
			font-size: 28px;
			font-size: 2.8rem;
			font-family: 'Big Shoulders Inline Text', monospace;
			}
			
#title a{
			color: #000; 
			font-style: none;
			}	
#title a:hover{
			background-color: transparent;
			color: #fff;
			font-style: normal;
			}
#title a:active{
			color:#fff;
			font-style: normal;
			}

/*index*/
#index article { 
			margin: 0 auto 0 13%;
			padding: 0;
		}
#index figcaption {
			margin:0;
			text-align: right;
			font-size: 11px;}
#index a, a:visited{ 
			text-decoration: underline;
			}
#index a:hover{ 
			background-color: blue;
			text-decoration: none;
			}
#index { 
			letter-spacing:1px;
			}
#index figure {width: 60%;
	width: 60vw;
	max-width:700px;
			padding: 0 10px;
}
#index img {width:100%;
			}

/*フッターメニュー*/
#copy { 
			font-size:11px;
			}
#contactp { 
			background-color: #aaa;
			position: fixed;
			bottom:10px;
			right:20px;
			display:inline;
			padding: 3px 5px;
			font-family: 'Black Ops One' , monospace;
			font-size: 12px;
			letter-spacing: 1px;
			font-size: 1.2rem;
			letter-spacing: 0.1rem;
			z-index: 99
}

#contactp a:hover{ 
			color:#fff;
			}
#contactp a,  a:visited{ 
			text-decoration: none;
			color:#333;
			}
/*CV*/
#cv p.pcver {
			display:inline;
			font-size: 11px;
			}
#cv img {
			vertical-align: -5px;
			}

#cv article a:visited { 
			text-decoration: underline;
			}
#cv article a { 
			text-decoration: underline;
			}
			
#cv p {
			padding:0;
			margin: 0;
			}

#cv h1	{
			font-size:20px;
			font-size:2.0rem;
			display: inline;
		}
#cv article section h2	{
			margin: 0;
			padding:20px 0 15px 0;
			font-size:14px;
			font-size:1.4rem;
			}


#cv article {
			line-height: 170%;
			max-width: 800px;
			padding-right: 8px;
			margin: 10px 13% 0 16%;
}
				
#cv article section {
			margin: 0;
			padding: 0px 0 15px 0;
			}

#cv article.cvjp {
			font-family:'Noto Sans JP', sans-serif;
			font-size: 12px;
			font-size: 1.2rem;
}

#cv article.cven {
			padding-top: 40px;
			font-family:'Karla', serif;
			font-size: 14px;
			font-size: 1.4rem;
}

/*contact*/
#contactbox	{	
			width: 250px;
			border: 1px dashed #ccc;
			text-align: center;
			position: fixed;
			top: 40%;
			left: 38%;
			left: calc(50% - 125px);
		}


/* Works index*/

.workbox {
			max-height: 500px;
			width: 220px;
			margin: 1% 1%;
			padding: 0 5px;
			display: inline-block;
			vertical-align: top;	
			}
#workstop a:hover{
			display:block;
			background-color: #d6de92;
}
			
#workstop i{
			font-weight:bold;
			line-height: 1.5;
}
#workstop figcaption{
			margin:0 0 0 8px;
			padding-bottom: 5px;
			font-size:11px; 
			font-size:1.1rem;
			text-align: left;
			}

#workstop figure, #drawingstop figure{ 
			margin:0;
			padding:10px;
			padding-bottom:5px;
}
#workstop img {
			margin:5px 0;
			padding: 0;
			width:210px;
			height:140px;
			object-fit: cover;
			}
		

#workstop article, #drawingstop article{
			max-width: 750px;
			min-width: 550px;
			width: 70%;
			text-align: center;
			padding: 0;
			margin: 40px auto 90px 17%;
			}

/* writing */ 

#writings article{
			margin: 60px auto 50px 17%;
			width:50%;
			width: calc(50vw + 20px); 
			max-width:700px;
			min-width: 400px;
			}

#writings hr{
			border-TOP: dashed 1px #ccc;
			width: 95%;
			margin: 55px auto;
			
			}
#writings img {
			width: 100%; 
			margin: 0;
}
#writings p {
			margin: 0px 15px;
			padding: 10px 0;
			font-size: 12px;
			font-size: 1.2rem;
}

#writings section {
			text-align: justify;

			letter-spacing: 1.5px;
			line-height: 180%;
			word-spacing: 2px;
	}

/* works */

#workspage iframe.ultra {
			max-width: 600px;
			min-width: 350px;
			margin:0;height: 100%;
			margin-left:10px;
			width: 100%

			}
			
#workspage article{
			text-align: left;
			margin: 40px auto 50px auto;
			width:55%;
			width: calc(55vw + 20px); 
			max-width:1100px;
			min-width: 400px;}

#workspage p			{
			text-align: justify;
			margin-top: 15px;
			font-size: 13px;
			font-size: 1.3rem;
			margin-bottom:0px;}
			
			#workspage figcaption		{ 
			letter-spacing: 0.5px;
			letter-spacing: 0.05rem;
			word-spacing: 0.7px;
			text-align: left;
			line-height: 1.5;
			margin: 0 0 0 10px;

}

#workspage figure			{	
			padding: 0;
			margin: 0;
}

#workspage img	{ 	
			Width: 55vw;
			min-width:	400px;
			max-width: 1000px;
			margin: 10px;
}
#workspage figcaption h3 {
			font-size: 13px;
			font-size: 1.3rem;
			margin: 5px 0 7px -2px;					
			font-family: 'Noto Sans JP',serif;
}


/* drawings2*/
#draw2 {
			line-height: 0;
			-webkit-column-count: 3;
			-webkit-column-gap:   23px;
			-moz-column-count:    3;
			-moz-column-gap:      23px;
			column-count:         3;
			column-gap:           23px;
			margin: 30px auto;
			width: 90%;
}

@media (max-width: 850px)
		{
			#draw2 {
			line-height: 0;
			-webkit-column-count: 2;
			-webkit-column-gap:   15px;
			-moz-column-count:2;
			-moz-column-gap:15px;
			column-count:2;
			column-gap: 15px;
			margin: 30px auto;
			width: 90%}
		}
#drawings2 h2 {
			text-align: center;
			font-size: 14px;
			margin:0;letter-spacing: 1px;
			margin-top: 10px;
			}
#drawings2 figcaption		{
			letter-spacing: 0.5px;
			letter-spacing: 0.05rem;
			word-spacing: 0.7px;
			text-align: left;
			line-height: 1.5;
			margin: 0 0 15px 10px;
	
	}
	
#drawings2 figure{
			display: inline-block;
			padding: 0;
			margin: 5px 0;
	}
#draw2 img	{
			/* Just in case there are inline attributes */
			width: 100% !important;
			height: auto !important;
	}
#drawings2 figcaption h3 {
			font-size: 13px;
			font-size: 1.3rem;
			margin: 5px 0 7px -2px;
			font-family: 'Noto Sans JP',serif;}

/* 記 事 */
article	{
			background-color: transparent;
			font-size: 13px;
			font-size: 1.3rem;
			font-family: 'Noto Sans JP', sans-serif;
			height: auto;
			width: 70%;
			margin-left: 17%;
			margin-right: auto;
			margin-bottom: 15px;

			border: 0;
			padding: 30px;
		
			padding-top: 0;
			}


/* rotation */

			.a_rotate {
			position: absolute;
			z-index: 3;
			top: 105px;
			left: 12%;
			width: 160px;
			height:160px;
			-webkit-animation: spin 6s linear infinite;
			-moz-animation: spin 6s linear infinite;
			-ms-animation: spin 6s linear infinite;
			-o-animation: spin 6s linear infinite;
			animation: spin 6s linear infinite;
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
}






















/*携帯版 */

@media screen and (max-width: 449px)
{
html{ 
			font-size: 62.5%;
			}
body		{
			width: 100%;
			color: #333;
			background-color:#fff;
			-webkit-font-smoothing: antialiased;
			-moz-font-smoothing: antialised;
			font-family: 'Noto Sans JP',
			serif;
			padding: 0;
			margin: 0;
			overflow: scroll;
}

i 			{
			font-size: 11px;
			font-size: 1.1rem;
			font-family:'Noto Sans JP' , serif;
			
			margin-right: 3px;
			}
	
hr			{
			border: none;
			width: 85%;
			margin-left:0;
			border-top: dashed 1px #ccc;
			border-bottom: 0;
			}
p{
			font-size: 10px;
			font-size: 1rem;
}
/*リンク */

a:visited{
			color: #000;
}
a { 		
			color: #444;
			font-style: bold;
			text-decoration: none;
}
/* 選択時背景色 */ 
	::selection {
			background: #cccc00;
			color: #000;
}

/* Firefox */ 
			::-moz-selection {
			background: #cccc00;
			color: #000;
}


h1			{
			font-size: 30px;
			font-size: 3rem;
			margin-top: 5px;
		
	}

h2			{
			margin-top: 0;
	}
h3			{
			font-size: 13px; 
			font-size: 13rem;
			font-weight: bold;}

iframe {
			overflow-x: hidden;
			margin: 0;
			border: none;
			width: 100%;
			height: 80px;
}

/* 回ってるやつ */
header #rotate	{
			width: 100%;
			text-align:left;
			margin: 0px;
			padding: 0px;
			}

#topmenu a#writings { 
			font-size: 13px; 
			font-size: 1.3rem;
			font-family: 'League Script', serif;
			color: #000;
}

/* タイトル , メニューバー*/
#yhmenu {
			padding: 0;
			margin: 0;
			width:100%;
			background-color: #fff
			}

#topmenu {	
			color: #666;
			z-index: 99;
			min-width:310px;
			width: 90%;
			margin: 0 auto;
			padding: 0;

}		


#topmenu a {
			color: #666;
}


#topmenu li:first-child	{
			padding:0 5px;}

#topmenu li	{ 
			letter-spacing: 1.3px;
			margin-bottom:5px;
			font-size: 10px;
			letter-spacing: 0.15rem;
			font-size: 1rem;
			font-family: 'Black Ops One', monospace;
			display: inline-block;
			padding: 0 4px;
			color: #666;
}

#topmenu a.keitaiver, #topmenu p.keitaiver {
			display:inline; 
			font-size: 0;
			}

#topmenu ul{
			list-style-type: none;
			margin: 0 auto;
			margin-top: 65px;
			padding: 0;
			font-size: 0px;
			}

#title { 
	
			padding-left:5px;
			position: absolute;
			top: 25px;
			letter-spacing: 2px;
			letter-spacing: 0.2rem;
			color: #888;
			font-size: 20px;
			font-size: 2rem;
			font-family: 'Big Shoulders Inline Text', monospace;
	}
	
#title a{
			color: #000; 
			font-style: none;
			}	

/*index*/


#index a, a:visited{
			text-decoration: underline;
			}
#index { 
			letter-spacing:1px;
			margin-bottom:50px;
			}
#index img {
			margin: 0;
			width: 75vw;
			max-width:400px;
	}
#index figure{ 
			padding:5px;
			margin: 5px;
			}
#index figcaption {
			margin:0;
			text-align: right;
			font-size: 6px;}
			
/*フッターメニュー*/
#copy { 
			font-size:11px;
			}
#contactp { 
			background-color: #aaa;
			position: fixed;
			bottom:10px;
			right:10px;
			display:inline;
			padding: 3px 5px;
			font-family: 'Black Ops One' , monospace;
			font-size: 8px;
			letter-spacing: 1px;
			font-size: 0.8rem;
			letter-spacing: 0.1rem;
			z-index: 99
}

#contactp a,  a:visited{ 
			text-decoration: none;
			color:#333;
			}
/*CV*/
#cv img {
			width:12px; 
			height:12px;
			vertical-align: -2px;
			}

#cv article a:visited { 
			text-decoration: underline;
			}
#cv article a { 
			text-decoration: underline;
			}
	
#cv p {
			padding:0;
			margin: 0;
			}

#cv h1	{
			font-size:18px;
			font-size:1.8rem;
			display: inline;
}
#cv article.cven h2	{
			margin: 0;
			padding:17px 0 7px 0;
			font-size:14px;
			font-size:1.3rem;
	}


#cv article h2	{
			margin: 0;
			padding:22px 0 11px 0;
			font-size:12px;
			font-size:1.2rem;
	}
#cv article {
			line-height: 140%;
			padding-right: 8px;
			margin: 0 auto;
			}
		
#cv article section {
			margin: 0;
			padding: 0;
	}

#cv article.cvjp {
			font-family:'Noto Sans JP', sans-serif;
			font-size: 10px;
			font-size: 1rem;
	}

#cv article.cven {
			padding-top: 20px;
			font-family:'Karla', serif;
			font-size: 12px;
			font-size: 1.2rem;
}

/*drawings2*/
	
#draw2 {
			text-align: center;
			margin: 10px auto 50px auto;
			width:85%;
			width: 85vw; 
			min-width:280px;
			}

#drawings2 p			{
			text-align: justify;
			margin-top: 7px;
			font-size: 11px;
			font-size: 1.1rem;
			margin-bottom:5px;
			}
	
#drawings2 figcaption		{ 
			letter-spacing: 0.4px;
			letter-spacing: 0.04rem;
			word-spacing: 0.6px;
			text-align: left;
			line-height: 1.5;
			margin: 0 auto 16px 14px;

}

#drawings2 figure			{	
			padding: 0;
			margin:0;
}

#drawings2 img	{ 	
			Width: 75vw;
			min-width:	250px;
			max-width:350px;
			margin: 5px;
}
#drawings2 h2 {
			margin: 10px auto 5px auto;
			text-align:center;
			font-family: 'Noto Sans JP',serif;
			}
#drawings2 i {font-size:10px;}
		  

/* Works index*/

.workbox {
			max-height: 500px;
			width: 125px;
			margin: 6px 6px;
			padding: 0;
			display: inline-block;
			vertical-align: top;
	}
#workstop a:hover{
			display:block;
			background-color: #d6de92;
			}
#workstop i{
			font-weight:bold;
			line-height: 1.5;}
			
#workstop figcaption,{
			margin:0 0 0 8px;
			padding-bottom:3px;
			font-size: 9px; font-size:0.9rem;
			text-align: left;
			}

#workstop figure{
			margin:0;
			padding:5px;
	}

#workstop img{
			margin:0 0 5px 0;
			padding: 0;
			width:115px;
			height:75px;
			object-fit: cover;
			}
	
#workstop article{
			min-width:300;
			width: 98%;
			text-align: center;
			padding: 0;
			margin: 20px auto;
			margin-bottom: 50px;}


/* works */

#workspage iframe.ultra {
			min-width: 250px;
			max-width: 350px;
			margin:0;
			margin-left:10px;
			width: 70%;
			height: 70%}
	
#workspage article {
			text-align: center;
			margin: 10px auto 50px auto;
			width:85%;
			width: 85vw; 
			min-width:280px;}

#workspage p			{
			text-align: justify;
			margin-top: 7px;
			font-size: 11px;
			font-size: 1.1rem;
			margin-bottom:5px;}
	
#workspage figcaption		{ 
			letter-spacing: 0.4px;
			letter-spacing: 0.04rem;
			word-spacing: 0.6px;
			text-align: left;
			line-height: 1.5;
			margin: 5px 10px 10px 14px;

}

figure			{	
			padding: 0;
			margin:0;
}

#workspage img	{ 	
			
			Width: 80%;
			Width: 80vw;
			min-width:	250px;
			max-width:400px;
			margin: 5px;
}
#workspage figcaption h3 {
			font-size: 11px;
			font-size: 1.1rem;
			margin: 0 0 7px -2px;
								
			font-family: 'Noto Sans JP',serif;
			}
/* writing */ 
#writings article	{
			text-align: center;
			background-color: transparent;
			font-size: 10px;
			font-size: 1rem;
			font-family: 'Noto Sans JP', sans-serif;
			height: auto;
			width: 95%;
			margin: 0 auto;
			border: 0;
			padding: 10px;
			}


#writings hr{
			width: 85%;
			border: dashed 2px #eee;
			margin: 0 auto;
	}
#writings img {
			width: 95%;
			min-width: 300px;
			max-width: 400px;
			margin: 10px auto;
}
#writings p {
			margin: 10px 0;
			padding: 0 15px;
}
#writings section {
			text-align: justify;
			letter-spacing: 1px;
			letter-spacing: 0.1rem;
			line-height: 170%;
			word-spacing: 1px;
			word-spacing: 0.1rem;}
/* 記 事 */
article	{
			background-color: transparent;
			font-size: 10px;
			font-size: 1rem;
			font-family: 'Noto Sans JP', sans-serif;
			height: auto;
			width: 85%;
			margin: 0 auto;
			border: 0;
			padding: 10px;
}


/* rotation */

.a_rotate {
			 position: fixed;
			 z-index: 3;
			top: 80px;
			right: 5px;
			width:100px;
			height:100px;
			-webkit-animation: spin 6s linear infinite;
			-moz-animation: spin 6s linear infinite;
			-ms-animation: spin 6s linear infinite;
			-o-animation: spin 6s linear infinite;
			animation: spin 6s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
}