body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:1560px; }
	      }
/*バスのモーションEND*/

header{
	padding:0;
	margin:0;
	position: fixed;
	top:0;
	z-index:2;
	width:100%;
	background-color: #a2d7d4;
}

h1{
	margin:0;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:1200px;
}

header li{
	list-style-type: none;
	padding-right:50px;
	padding-bottom:10px;
	font-size:1.2em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

.current a{
	color:#ffffff;
}

main{
	padding-top:210px;
}

h2,h3{
	text-align:center;
}

h3{
	padding-top:50px;
}

.bread ul{
	display:flex;
}

.bread li{
	list-style-type: none;
	padding-left:0.5em;
}

.bread li a{
	color:#2352a3;
}

.bread li a:hover{
	color:#2ea7e0;
}

.study{
	padding-top:50px;
}

.study h2{
	text-decoration: underline;
}

.study .letters{
	width:1000px;
	padding-left:480px;
	line-height: 3em;
}



.contents{
	padding-left:280px;
}

.contents ol{
	flex-wrap:wrap;
	display:flex;
	width:1500px;
}

.contents li{
	padding-bottom:20px;
	width:500px;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 150px;
}

#letter{
	padding-top:150px;
}

#assigntment{
	padding-top:150px;
}

#drawing{
	padding-top:150px;
}

#ceramic{
	padding-top:150px;
}

#illustrator{
	padding-top:150px;
}

.pics{
	display:flex;
	flex-wrap:wrap;
	width:1300px;
	padding-left:300px;
}

.pics img{
	width:600px;
	padding-left:30px;
}

.silkscreen{
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:600px;
	height:300px;
	margin-left:700px;
}

.youtube iframe{
	width:1000px;
	height:600px;
	padding-left:460px;
}

.letterpress{
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:500px;
	height:800px;
	margin-left:700px;
}

.essay{
	display:flex;
}

.essay img{
	width:600px;
	padding-left:250px;
	padding-top:40px;
}

.essay .letters{
	padding-left:30px;
	padding-top:20px;
	width:600px;
}

.exchange{
	width:1800px;
	flex-wrap:wrap;
	display: flex;
	padding-left:100px;
}

.exchange img{
	width:400px;
	padding:10px;
}

.life{
	width:1800px;
	flex-wrap:wrap;
	display: flex;
	padding-left:100px;
}

.life img{
	width:400px;
	padding:10px;
}

.illustrator{
	padding-left: 700px;
}

.illustrator img{
	width:500px;
}




.goandback{
	padding-left:780px;
}

.goandback ul{
	display: flex;
}

.goandback li{
	list-style-type: none;
	padding-right:30px;
}

.goandback li a{
	color:black;
}

.goandback li a:hover{
	color:#e4007f;
}

#next{
	position:fixed;
	bottom:230px;
	right:10px;
	display:block;
	width:110px;
}

#next img{
	width:80px;
}

#next a{
	text-decoration:none;
	color:black;
}

#next a:hover{
	color:#e4007f;
}


#previous{
	position:fixed;
	bottom:230px;
	left:10px;
	display:block;
	width:110px;
}

#previous img{
	width:80px;
}

#previous a{
	text-decoration:none;
	color:black;
}

#previous a:hover{
	color:#e4007f;
}

.top p{
	text-align: center;
	padding-top:100px;
}


footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
}





/***responsive***/
/*smartphone(330px以上530px未満)*/

@media screen and (min-width:330px) and (max-width:529px) {

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:255px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:50%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:120px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:155px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:300px;
	padding-left:20px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:10px;
}

.contents ol{
	width:300px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:350px;
	padding-left:20px;
}

.pics img{
	width:150px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:100px;
	margin-left:60px;
}

.youtube iframe{
	width:300px;
	height:200px;
	padding-left:30px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:200px;
	margin-left:60px;
}


.essay{
	display:flex;
}

.essay img{
	width:150px;
	padding-left:20px;
	padding-top:10px;
}

.essay .letters{
	padding-left:5px;
	width:180px;
}

.exchange{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.exchange img{
	width:150px;
	padding:5px;
}

.life{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.life img{
	width:150px;
	padding:5px;
}

.illustrator{
	padding-left:40px;
}

.illustrator img{
	width:300px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}
















/*tablet(1030px以上1920px未満)*/

@media screen and (min-width:1030px) and (max-width:1919px) {

@charset "utf-8";

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:1060px; }
	      }
/*バスのモーションEND*/

header{
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

h1{
	margin:0;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:700px;
}

header li{
	list-style-type: none;
	padding-right:50px;
	padding-bottom:10px;
	font-size:1.2em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

.study .letters{
	width:900px;
	padding-left:300px;
	line-height: 3em;
}


.contents{
	padding-left:100px;
}

.contents ol{
	flex-wrap:wrap;
	display:flex;
	width:1300px;
}

.contents li{
	padding-bottom:20px;
	width:500px;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}





.pics{
	display:flex;
	flex-wrap:wrap;
	width:1300px;
	padding-left:100px;
}

.pics img{
	width:600px;
	padding-left:30px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:600px;
	height:300px;
	margin-left:460px;
}


.youtube iframe{
	width:1000px;
	height:600px;
	padding-left:200px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:500px;
	height:800px;
	margin-left:460px;
}

.essay{
	display:flex;
}

.essay img{
	width:600px;
	padding-left:60px;
	padding-top:40px;
}

.essay .letters{
	padding-left:30px;
	padding-top:20px;
	width:600px;
}

.exchange{
	width:1300px;
	flex-wrap:wrap;
	display: flex;
	padding-left:50px;
}

.exchange img{
	width:300px;
	padding:10px;
}

.life{
	width:1300px;
	flex-wrap:wrap;
	display: flex;
	padding-left:50px;
}

.life img{
	width:300px;
	padding:10px;
}

.illustrator{
	padding-left:500px;
}

.illustrator img{
	width:500px;
}



.goandback{
	padding-left:500px;
}

.goandback ul{
	display: flex;
}

.goandback li{
	list-style-type: none;
	padding-right:30px;
}

.goandback li a{
	color:black;
}

.goandback li a:hover{
	color:#e4007f;
}

}



/*ipad(761px以上780px未満)*/

@media screen and (min-width:761px) and (max-width:779px) {

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:540px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:30%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:400px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:170px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:300px;
	padding-left:250px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:50px;
}

.contents ol{
	width:300px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:350px;
	padding-left:250px;
}

.pics img{
	width:150px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:100px;
	margin-left:250px;
}

.youtube iframe{
	width:300px;
	height:200px;
	padding-left:250px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:200px;
	margin-left:250px;
}


.essay{
	display:flex;
}

.essay img{
	width:150px;
	padding-left:250px;
	padding-top:10px;
}

.essay .letters{
	padding-left:5px;
	width:180px;
}

.exchange{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:250px;
}

.exchange img{
	width:150px;
	padding:5px;
}

.life{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:250px;
}

.life img{
	width:150px;
	padding:5px;
}

.illustrator{
	padding-left:250px;
}

.illustrator img{
	width:300px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}

/*************************************************************************/

/*iPadpro(780px以上1030px未満)*/

@media screen and (min-width:780px) and (max-width:1029px) {

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:740px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:30%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:600px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:190px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:300px;
	padding-left:360px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:10px;
}

.contents ol{
	width:300px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:350px;
	padding-left:360px;
}

.pics img{
	width:150px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:100px;
	margin-left:360px;
}

.youtube iframe{
	width:300px;
	height:200px;
	padding-left:360px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:200px;
	margin-left:360px;
}


.essay{
	display:flex;
}

.essay img{
	width:150px;
	padding-left:360px;
	padding-top:10px;
}

.essay .letters{
	padding-left:5px;
	width:180px;
}

.exchange{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:360px;
}

.exchange img{
	width:150px;
	padding:5px;
}

.life{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:360px;
}

.life img{
	width:150px;
	padding:5px;
}

.illustrator{
	padding-left:360px;
}

.illustrator img{
	width:300px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}

/****************************************************************************/

/*smartphone(290px以上330px未満)*/

@media screen and (min-width:290px) and (max-width:329px) {

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:220px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:50%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:100px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:155px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:200px;
	padding-left:20px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:10px;
}

.contents ol{
	width:200px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:210px;
	padding-left:20px;
}

.pics img{
	width:100px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:150px;
	height:100px;
	margin-left:30px;
}

.youtube iframe{
	width:200px;
	height:150px;
	padding-left:30px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:200px;
	height:150px;
	margin-left:30px;
}


.essay{
	display:flex;
}

.essay img{
	width:100px;
	padding-left:20px;
	padding-top:10px;
}

.essay .letters{
	padding-left:5px;
	width:180px;
}

.exchange{
	width:220px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.exchange img{
	width:100px;
	padding:5px;
}

.life{
	width:220px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.life img{
	width:100px;
	padding:5px;
}

.illustrator{
	padding-left:40px;
}

.illustrator img{
	width:200px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}


/******************************************************************/

/*smartphone(290px未満)*/

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

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:190px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:50%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:70px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:155px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:200px;
	padding-left:20px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:10px;
}

.contents ol{
	width:200px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:210px;
	padding-left:20px;
}

.pics img{
	width:100px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:150px;
	height:100px;
	margin-left:30px;
}

.youtube iframe{
	width:200px;
	height:150px;
	padding-left:30px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:200px;
	height:150px;
	margin-left:30px;
}


.essay{
	display:flex;
}

.essay img{
	width:100px;
	padding-left:20px;
	padding-top:10px;
}

.essay .letters{
	padding-left:5px;
	width:180px;
}

.exchange{
	width:220px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.exchange img{
	width:100px;
	padding:5px;
}

.life{
	width:220px;
	flex-wrap:wrap;
	display: flex;
	padding-left:15px;
}

.life img{
	width:100px;
	padding:5px;
}

.illustrator{
	padding-left:40px;
}

.illustrator img{
	width:200px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}

/***************************************************************************/

/*smartphone(530px以上760px未満)*/

@media screen and (min-width:530px) and (max-width:760px) {

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

/*バスのモーション*/
.london{
	background-image:url(../images/london.png);
	width:100%;
	background-repeat:repeat-x;
	height:50px;
	margin-top:0px;
	margin-bottom:0px;
}

.animation3 {
	        animation: anim3 10s infinite;
	      }
	      @keyframes anim3 {
	        0% { left:100%; }
	        100% { left:390px; }
	      }
/*バスのモーションEND*/

.bread{
	font-size:0.5em;
}

.bread ul{
	display:flex;
	margin:0;
}

header{
	background-position:top;
	padding:0;
	margin:0;
	background-color: #a2d7d4;
}

header h1 img{
	padding-top:10px;
	padding-left:10px;
	width:50%;
	position: relative;
	z-index: 4;
}

header ul{
	margin:0;
	display:flex;
	padding-left:250px;
}

header li{
	list-style-type: none;
	padding-right:10px;
	padding-bottom:5px;
	font-size:0.5em;
}

header li a{
	color:#2352a3;
	text-decoration: none;

	position: relative;
	display: inline-block;
	transition: .3s;
	justify-content: flex-end;
	line-height: 1em;
}

header li a::after{
	background-color:#2ea7e0;

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	transition: .3s;
}

header li a:hover::after {
	width: 100%;
}

header li a:hover{
	color:#2ea7e0;
}

header small{
  font-size:0.3em;
}

header li img{
	width:10px;
}

main{
	padding-top:180px;
}

h2,h3{
	text-align:center;
	font-size:0.8em;
}

h3{
	padding-top:10px;
}

.study{
	padding-top:10px;
}

.study .letters{
	width:300px;
	padding-left:100px;
	line-height: 2em;
	font-size:0.5em;
}


.contents{
	padding-left:10px;
}

.contents ol{
	width:300px;
}

.contents li{
	padding-bottom:5px;
	font-size:0.5em;
}

.contents li a{
	color:black;
	text-decoration: none;
}

.contents li a:hover{
	color:#e4007f;
}

#printing{
	padding-top: 100px;
}

#letter{
	padding-top:100px;
}

#assigntment{
	padding-top:100px;
}

#drawing{
	padding-top:100px;
}




.pics{
	display:flex;
	flex-wrap:wrap;
	width:350px;
	padding-left:100px;
}

.pics img{
	width:150px;
	padding-left:5px;
}

.silkscreen{
	text-align: center;
	background-image: url(../images/IMG_6360.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:100px;
	margin-left:100px;
}

.youtube iframe{
	width:300px;
	height:200px;
	padding-left:100px;
}

.letterpress{
	text-align: center;
	background-image:url(../images/IMG-6595.jpg);
	background-repeat: no-repeat;
	background-size:250px;
	height:200px;
	margin-left:100px;
}


.essay{
	display:flex;
}

.essay img{
	width:150px;
	padding-left:20px;
	padding-top:10px;
}

.essay .letters{
	padding-left:100px;
	width:180px;
}

.exchange{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:100px;
}

.exchange img{
	width:150px;
	padding:5px;
}

.life{
	width:330px;
	flex-wrap:wrap;
	display: flex;
	padding-left:100px;
}

.life img{
	width:150px;
	padding:5px;
}

.illustrator{
	padding-left:100px;
}

.illustrator img{
	width:300px;
}






#next img{
	width:50px;
}

#next{
	font-size:0.3em;
	width:60px;
}

#previous img{
	width:50px;
}

#previous{
	font-size:0.3em;
	width:70px;
}

footer{
	background-color:#000;
	color:#fff;
	text-align: center;
	padding:10px 0px;
	font-size:0.3em;
}

}