/* CSS Document */

/*-----共通-----*/

body{
	margin: 0;
	padding: 0;
	font-family:'Quicksand','小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
	color:#313131;
	background: #fcfaf6;
}
h1,h2,h3,h4{
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: block;
}
address{
	font-style: normal;
}
a{
	text-decoration: none;
	color: #313131;
}
p{
	margin: 0;
	padding: 0;
}
img{
	max-width: 100%;
	display: block;
}
li{
	list-style: none;
}
.cf:after{
	content: "";
	display: block;
	clear: both;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.small{
	font-size: 0.85em;
}
.center{
	text-align: center;
}
.wrap{
	padding: 0 20px;
}
.mb30{
	margin-bottom: 30px;
}
/*-----header-----*/
header{
	padding: 10px;
	background: url(../images/back.jpg);
	border-bottom: 3px solid #eb91e0;
}
header #logo{
	width: 20%;
	padding: 10px 0;
}
header h1{
	font-size: 0.8em;
	padding: 5px;
}
#menubtn{
	width: 40px;
    padding: 0;
    margin: 0;
    border: none;
	background: none;
	float: right;
}
/*-----menu-----*/
#menu {
	position: fixed;
	top: 0;
	right: -260px;
	width: 260px;
	height: 100%;
	z-index: 1000;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eb91e0+0,ffffff+4 */
	background: #eb91e0; /* Old browsers */
	background: -moz-linear-gradient(left, #eb91e0 0%, #ffffff 4%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #eb91e0 0%,#ffffff 4%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #eb91e0 0%,#ffffff 4%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb91e0', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
	overflow-y: scroll;
	padding-top: 60px;
}
#closebtn {
	position: absolute;
	top: 20px;
	right: 0;
	font-size: 0.9em;
	padding-left: 20px;
	background: url(../images/close_btn.png) no-repeat left center;
	background-size: 1em;
	border: none;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul li a {
	display: block;
    padding: 12px 0;
    margin: 0 15px;
    color: rgb(49, 49, 49);
    font-size: 14px;
    line-height: 1em;
    text-decoration: none;
    text-align: center;
    border-bottom: 8px solid rgb(238, 238, 238);
}
#menu ul li:first-child a{
	background: url(../images/icon_home.png) no-repeat 30% center;
	background-size: 1em;
}
#menu ul li:nth-child(2) a{
	background: url(../images/icon_school.png) no-repeat 30% center;
	background-size: 1em;
}
#menu ul li:nth-child(3) a{
	background: url(../images/icon_shop.png) no-repeat 30% center;
	background-size: 1em;
}
#menu ul li:nth-child(4) a{
	background: url(../images/icon_access.png) no-repeat 30% center;
	background-size: 1em;
}
/*-----top page-----*/
#index div div.f_l{
	margin-top: 15px;
}
#index main{
	padding: 20px 0 0;
}
h2{
	text-align: center;
	font-size: 0.9em;
}
h2 .large{
	font-size: 1.65em;
    font-weight: 200;
    letter-spacing: 0.4em;
	border-bottom: 1px solid #eb91e0;
}
#home h2 .large{
	border-bottom: 1px solid #8d6fd6;
}
.pic_back_o {
    margin: 0 auto 30px;
    width: 250px;
    height: 250px;
    background: url(../images/outview.jpg) no-repeat center;
    border: solid 20px #fcfaf7;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #8d6fd6;
    position: relative;
    box-sizing: border-box;
}
.pic_back_o img{
	width: 210px;
	height: 210px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
}
.pic_back {
    margin: 0 auto 30px;
    width: 250px;
    height: 250px;
    background: #fcfaf7;
    box-shadow: 1px 1px 1px #eb91e0;
    position: relative;
}
.pic_back img{
	width: 210px;
	height: 210px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
}
#go_down,
#go_top{
	background: #ddd4f3;
    padding: 10px;
    text-align: center;
	margin: 10px 0 0;
	font-size: 0.85em;
}
#go_down img,
#go_top img{
	width: 20px;
	margin: 0 auto;
}
#go_down a,
#go_top a{
	color: #9c9c9c;
}
#index div div p{
	padding: 5px 12%;
    font-size: 0.9em;
    background: #f9def6;
	color: #656565;
}
#ad{
	text-align: center;
}
footer{
	background: url(../images/back.jpg);
	font-size: 0.8em;
	text-align: center;
	padding: 15px 0;
}
/*-----school-----*/
#school #mv{
	position: relative;
	height: 120px;
	overflow: hidden;
}
#school #mv p{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
    text-shadow: 1px 1px 8px #000;
}
#school_nav ul li{
	margin: 10px 0;
}
#school_nav ul li a{
	text-decoration: underline;
    text-decoration-color: rgb(141, 111, 214);
}
#school_nav ul li a:before,
#school h4:before{
	content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
	margin-right: 12px;
	margin-bottom: -3px;
}
#school_nav ul li.lesson a:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bba9e6+0,efbcec+100 */
	background: #bba9e6; /* Old browsers */
	background: -moz-linear-gradient(left, #bba9e6 0%, #efbcec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #bba9e6 0%,#efbcec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #bba9e6 0%,#efbcec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bba9e6', endColorstr='#efbcec',GradientType=1 ); /* IE6-9 */
}
#school_nav ul li.goods a:before{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3bdec+0,f6eeb7+100 */
	background: #f3bdec; /* Old browsers */
	background: -moz-linear-gradient(left, #f3bdec 0%, #f6eeb7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f3bdec 0%,#f6eeb7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f3bdec 0%,#f6eeb7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3bdec', endColorstr='#f6eeb7',GradientType=1 ); /* IE6-9 */
}
#school h4:before{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9ff0a1+0,919ceb+100 */
	background: #9ff0a1; /* Old browsers */
	background: -moz-linear-gradient(left, #9ff0a1 0%, #919ceb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #9ff0a1 0%,#919ceb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #9ff0a1 0%,#919ceb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ff0a1', endColorstr='#919ceb',GradientType=1 ); /* IE6-9 */
}
.mv_img{
	margin: 20px;
    height: 60px;
}
#p_work .mv_img{
	background: url(../images/p_img.jpg) no-repeat center top;
    background-size: 140%;
}
#k_remake .mv_img{
	background: url(../images/k_img.jpg) no-repeat center;
    background-size: cover;
}
#yousai .mv_img{
	background: url(../images/y_img.jpg) no-repeat center;
    background-size: cover;
}
#goods_3 .mv_img{
	background: url(../images/item_img.jpg) no-repeat center top;
    background-size: cover;
}
#goods_ami .mv_img{
	background: url(../images/item_img_02.jpg) no-repeat center top;
    background-size: cover;
}
#amimono .mv_img{
	background: url(../images/a_img.jpg) no-repeat center top;
    background-size: cover;
}
.item_link{
	width: 200px;
	display: block;
	border: 1px solid #eb91e0;
	padding: 5px;
	text-align: center;
	margin: 10px auto;
	box-shadow: 2px 2px 0 #eb91e0;
	background: #ffefff;
}
#school h3{
    font-weight: 100;
    font-size: 1.2em;
    text-align: center;
    border-top: 2px solid;
    margin: 20px;
    padding-top: 10px;
}
#school h4{
	padding-left: 20px;
}
#school .box{
	padding: 5px 0 5px 25%;
	font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
	line-height: 1.8em;
}
#school .box:before{
	content: "−";
	margin-left: -1em;
}
#school .box p{
	display: inline;
}
#school .sample p{
	background: #e5e5e5;
}
.pink_back{
	background:#fff3ff;
}
#item_01 ul,
#item_02 ul{
	padding: 20px;
}
#item_01 ul li:before,
#item_02 ul li:before{
	content: "・";
}
.boshu{
	font-size: 0.8em;
	color: #ff0000;
	border: 1px solid #ff0000;
	padding: 3px;
	margin-left: 6px;
}
#goods_3 ul,
#goods_ami ul{
    padding: 20px;
}
/*-----gallery-----*/
#gallery .wrap{
	padding: 30px 10px;
}
#instafeed li{
	margin-bottom: 55px;
    border-bottom: 1px dashed #e8e0a6;
}
#instafeed li img{
	width: 180px;
	height: auto;
	margin: 10px auto;
	border-radius: 3px;
}
#instafeed li p{
	width: 240px;
	margin: 0 auto;
	text-align: center;
}
#more_insta a {
    display: block;
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background: #eaa8e7;
    color: rgb(255, 255, 255);
    padding: 8px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
	border-radius: 3px;
}
/*-----shop-----*/
#shop_contents li a:before{
	content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
	margin-right: 12px;
	margin-bottom: -3px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bba9e6+0,efbcec+100 */
	background: #bba9e6; /* Old browsers */
	background: -moz-linear-gradient(left, #bba9e6 0%, #efbcec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #bba9e6 0%,#efbcec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #bba9e6 0%,#efbcec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bba9e6', endColorstr='#efbcec',GradientType=1 ); /* IE6-9 */
}
#items .mv_img{
    background: url(../images/items_img.jpg) no-repeat center;
    background-size: cover;
}
#items h3,
#shop_info h3{
    font-weight: 100;
    font-size: 1.2em;
    text-align: center;
    border-top: 2px solid;
    margin: 20px;
    padding-top: 10px;
}
#items h4{
    text-align: center;
    font-size: 1.1em;
    background: #fbf2d8;
    margin: 15px 0;
}
#items .item_box img{
    width: 80%;
    margin: 10px auto;
}
#shop_info .mv_img{
    background: url(../images/outview.jpg) no-repeat top center;
    background-size: cover;
}
#shop_info dt:before{
    content: "";
    border: 5px solid #8d6fd6;
    margin-right: 5px;
}
#shop_info dd{
    margin: 10px;
}
#shop_info iframe{
    margin: 20px 0;
}
/*-----access-----*/
#access_link a{
    display: block;
    text-align: center;
    padding: 10px;
    margin: 10px 0;
    background: rgb(221, 212, 243);
    border-radius: 5px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
/*----------tablet size 768px----------*/
@media screen and (min-width:768px){
	/*-----共通-----*/
    .mv_img{
        height: 120px;
    }
	/*-----header-----*/
	
	header #logo{
		width: 100px;
	}
	header h1{
		font-size: 1em;
	}
	
	/*-----index-----*/
	.pic_back_o img{
		width: 310px;
		height: 310px;
	}
	.pic_back_o{
		width: 350px;
		height: 350px;
	}
	#index div div.f_l:first-child,
	#index div div.f_l:nth-child(2),
	#index div div.f_l:nth-child(3),
	#index div div.f_l:nth-child(4){
		float: left;
		width: 50%;
	}
	#index div div p{
		margin: 15px 0;
	}
    /*-----shop-----*/
    .item_box{
        width: 50%;
        float: left;
        border-right: 1px solid #eee;
        box-sizing: border-box;
    }
    .item_box p{
        padding: 0 20px;
    }
    /*-----gallery-----*/
    #instafeed li{
        width: 33.333%;
        width: calc(100%/3);
        float: left;
        height: 300px;
    }
    #access .wrap iframe{
        height: 500px;
    }
}
/*----------pc size 1024px----------*/
@media screen and (min-width:1024px){
	/*-----共通-----*/
	h2{
		padding: 10px 0;
	}
    #main_contents{
        width: 1000px;
        margin: 0 auto;
    }
	/*-----header-----*/
	#menubtn{
		display: none;
	}
	#menu {
		position: relative;
		right: auto;
		width: 66%;
		float: left;
		background: none;
		overflow-y: hidden;
		padding-top: 0;
	}
	#menu ul{
		text-align: center;
		padding: 10px 0;
	}
	#menu ul li{
		display: inline-block;
	}
	#menu ul li a {
		display: block;
		padding: 12px 0 12px 48px;
		border-bottom: none;
		font-size: 1em;
		margin: 0 15px 0 0;
		background-position:20% center;
	}
	#menu ul li a:hover{
		color: #8d6fd6;
		transition: 0.5s;
		font-weight: bold;
	}
	#menu ul li:first-child a{
		background-position:20% center;
		transition-duration: 1s;
	}
	#menu ul li:nth-child(2) a{
		background-position:20% center;
		transition-duration: 1s;
	}
	#menu ul li:nth-child(3) a{
		background-position:20% center;
		transition-duration: 1s;
	}
	#menu ul li:nth-child(4) a{
		background-position:20% center;
		transition-duration: 1s;
	}
	#menu ul li:nth-child(5) a{
		background-position:20% center;
		transition-duration: 1s;
	}
	#menu ul li:first-child a:hover{
		background: url(../images/icon_home_p.png) no-repeat 20% center;
		background-size: 1em;
	}
	#menu ul li:nth-child(2) a:hover{
		background: url(../images/icon_school_p.png) no-repeat 20% center;
		background-size: 1em;
	}
	#menu ul li:nth-child(3) a:hover{
		background: url(../images/icon_shop_p.png) no-repeat 20% center;
		background-size: 1em;
	}
	#menu ul li:nth-child(4) a:hover{
		background: url(../images/icon_access_p.png) no-repeat 20% center;
		background-size: 1em;
	}
	#closebtn{
		display: none;
	}
	/*-----index-----*/
	#index main{
		padding: 0;
	}
	#index #wrap{
		width: 960px;
		margin: 20px auto;
	}
	.pic_back_o{
		width: 100%;
		height: 520px;
		overflow: hidden;
		border-radius: 0;
		border: none;
		border: none;
		background-attachment: fixed;
	}
	.pic_back_o img {
		width: 100%;
		height: auto;
		border-radius: 0;
		bottom: auto;
	}
	#index div div.f_l a{
		width: 200px;
		display: block;
		margin: 0 auto;
	}
	#index div div.f_l a h2,
	#index #home a h2{
		transition-duration: 0.5s;
	}
	#index div div.f_l a:hover,
	#index #home a:hover{
		transform: translate(5px,5px);
        box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
		transition: 0.5s;
	}
	#index div div.f_l:first-child,
	#index div div.f_l:nth-child(2),
	#index div div.f_l:nth-child(3),
	#index div div.f_l:nth-child(4) {
		float: left;
		width: 43.8%;
		margin: 1% 3%;
		border-right: 1px solid rgb(249, 222, 246);
	}
	#index div div p{
		margin: 15px 0 0;
	}
    /*-----school-----*/
    #school #mv{
        height: 460px;
    }
    #school_nav ul{
        text-align: center;
    }
    #school_nav ul li{
        display: inline-block;
    }
    #school #main_contents section,
    .item_box{
        width: 33.333%;
        width: calc(100%/3);
    }
    #school #main_contents section{
        border-right: 1px solid #eee;
        float: left;
        box-sizing: border-box;
    }
    school #main_contents section:nth-of-type(3){
        border-right: none;
    }
    .item_link{
        display: none;
    }
    .boshu{
        width: 500px;
        margin: 10px auto;
    }
    /*-----shop-----*/
    #shop_contents{
        text-align: center;
    }
    #shop_contents li{
        display: inline-block;
    }
    .item_box img{
        transition-duration: 0.3s;
    }
    .item_box img:hover{
        transform: scale(2);
        transition: 0.3s;
    }
    #items .mv_img,
    #shop_info .mv_img{
        height: 200px;
    }
    #shop_info iframe{
        height: 500px;
    }
    /*-----gallery-----*/
    #instafeed{
        width: 1000px;
        margin: 0 auto;
    }
    #instafeed li img{
        transition-duration: 0.3s;
        width: 230px;
    }
    #instafeed li img:hover{
        transform: scale(1.8);
        transition: 0.3s;
    }
    /*-----access-----*/
    #access main .wrap{
        width: 1000px;
        margin: 0 auto;
    }
    #access .wrap p{
        text-align: center;
    }
}