@charset "UTF-8";

/*------------------------------------------------------------------------------
	カメヤ教材（陶楽房） - Import CSS
	URL: https://tourakubou.com/tencho/
	Date: 2019-07-29
	(C) 2015 KAMEYA KYOUZAI Inc. All Rights Reserved.
------------------------------------------------------------------------------*/

@media screen and (max-width:768px) {
	body{
		color: #6f594c;
		font-size: 95%;
		font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
		line-height: 1.0;
		text-size-adjust: none;
	}
	header {
		background: #fff;
	}
	#header,
	header p{
		margin:0;
	}
	header #tagline{
		margin: 0;
		text-align: center;
		width: 100%;
		float: none;
		background: #360;
		padding: 1% 0 2%;
		margin-top: 0;
		color: #fff;
		font-size: 11px;	
	}
	header .soryo {
		width: 100%;
		text-align: center;
		padding: 3% 0;
		border-bottom: 1px solid #eee;
	}
	header .soryo img {
		width: 55%;
	}
	header .headIn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:3%;
	}
	header p#login{
		text-align: center;
		display: flex;
		align-items: center;
	}
	header p#login a{
		color: #fff;
		position: static;
		background: #638742;
		padding: 8px 10px;
		font-size: 10px;
		border-radius: 5px;
		text-decoration: none;
	}
	header p#login a:before{
		content:url("../img/ico/ico_key.png");
		display: block;
		margin-bottom: 10%;
		zoom: 70%;
	}
	header p#login a br{
		display: block;
	}
	header p#login a img{
		display: none;
	}
	header h1#siteTitle {
		width: 38%;
		margin:0;
	}
	header h1#siteTitle img{
		width: 100%;
		height: auto;
	}
	header .hamburger {
		display: block;
		position: static;
		padding: 15px 0 0;
	}
	header .hamburger::after{
		content:"MENU";
		display: block;
		margin-top: 3px;
	}
    header #headInner{
        width: 100%;
        display: none;
        position: absolute;
        top: 150px;
        right: 0;
        width: 100vw;
        background: #fff;
        z-index: 99999;
    }
	header #headInner #categoryNav #menu{
		margin:0;
		text-align: left;
	}
	header #headInner #categoryNav #menu dt {
		display: block;
		border-bottom: 1px solid #d3c3b9;
		padding:20px 10px;
		color: #6f594c;
		cursor:pointer;
		background:url(../img/ico/ico_toggle_bottom.png) no-repeat 97% center;
	}
	header #headInner #categoryNav #menu dt.active {
		background:url(../img/ico/ico_toggle_top.png) no-repeat 97% center;
	}
	header #headInner #categoryNav #menu dd {
		display: none;
		margin: 0;
	}
	header #headInner #categoryNav #menu dd ul{
		background: #f7f3e8;
	}
	header #headInner #categoryNav #menu dd ul li a{
		display:block;	
		border-bottom: 1px solid #d3c3b9;
		padding:13px 30px 13px 15px;
		background:url(../img/ico/ico_pan.png) no-repeat 95% center;
		font-size:85%;
		display:block;
		color: #6f594c;
		text-decoration: none;
	}
	header #headInner #categoryNav #menu dd ul li.current > a{
		background:#e57c37 url(../img/ico/ico_arrow_wht.png) no-repeat 95% center;
		color:#fff;
	}
	header #headInner #categoryNav #menu dd ul li ul{
		background: #ece5d3;	
	}
	header #headInner #categoryNav #menu dd ul li ul li a{
		padding:10px 30px 10px 25px;
	}
	header #headInner #categoryNav #menu dd ul li ul li ul li a{
		padding:10px 30px 10px 35px;
	}
    header #headInner .contact{
        width: auto;
        float:none;
        display: block;
        text-align: center;
        margin: 0;
        border-bottom:1px solid #d3c3b9;
        padding: 6% 3%;
    }
    header #headInner .contact li{
        margin: 0;
        float: none;
        margin-bottom: 3%;
    }
    header #headInner .contact li:last-child{
        margin-bottom: 0;
    }
	header #searchbox{
		display: block;
		position: static;
		top: 0;
		background: none !important;
		padding: 0 3%;
		text-align: left;
		width: auto;	
	}
	header #searchbox form{
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		margin: 0;
		border: 3px solid #efd29a;
		border-radius: 10px;
		background: #f4f0ec;
	}
	header #searchbox form input.text1{
		width: 100%;
		font-size:16px;
		padding: 9px 5px 8px;
		border: none;
		background: #f4f0ec;
		float: left;
		border-radius: 5px 0 0 5px;
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		vertical-align: top;
		font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HiraKakuPro-W3", Osaka, "Meiryo", Sans-Serif;
	}
	header #searchbox form input.button1{
		padding:0;
	}
    header ul#globalNav{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        padding: 5% 0;
    }
    header ul#globalNav li{
        float:none;
        width: 25%;
    	background: url(../img/bg/bg_gNav.png) no-repeat right center;
    }
	header ul#globalNav li:last-child{
		background: none;
	}
    header ul#globalNav li a{
        padding: 40px 3% 0 3%;
        text-align: center;
        font-size: 11px;
        background-size: 30px;
		color: #6f594c;
		display: block;
    }
	header ul#globalNav li.guide a{
		background:url(../img/ico/ico_guide.png) no-repeat top center;
	}
	header ul#globalNav li.shop a{
		background:url(../img/ico/ico_shop.png) no-repeat top center;
	}
	header ul#globalNav li.cart a{
		background:url(../img/ico/ico_cart.png) no-repeat top center;
	}
	header ul#globalNav li.newMember a{
		background:url(../img/ico/ico_newMember.png) no-repeat top center;
	}
	
	#footer{
		background: #fff;
    	margin-top: 20px;
	}
	footer#footer .freearea{
    	padding: 8% 0 0 !important;
		margin:0;
	}
	footer .freearea ul{
		list-style: none;
		padding:0;
	}
	footer .freearea .subBnr ul{
		padding: 0 3% 8%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: space-between;
		-ms-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	footer .freearea .subBnr ul li{
		width: 49%;
		margin-bottom: 2%;
	}
	footer #shopguide {
		padding: 6% 3%;
    	background: #fffaec url(../img/bg/bg_shopguide.png) no-repeat left top;
	}
	footer #shopguide .ftInner{
		background:none !important;
		padding:0 !important;
	}
	footer #shopguide li{
		padding-bottom: 6%;
   		color: #6f594c;
	}
	footer #shopguide li h2{
		text-align: left;
		border-bottom: 1px solid #c5b3a8;
		padding: 0 0 8px 0;
		margin: 0 0 10px 0;
		background: none;
	}
	footer #shopguide li p {
		line-height: 1.6;
	}
	footer #shopguide li p .card {
		display: block;
		padding: 20px 0;
	}
	footer #address {
		padding-top: 10%;
	}
	footer #address h1 {
		margin: auto;
		padding: 0;
		float: none;
		margin-bottom: 6%;
		text-align: center;
	}
	footer #address h1 img {
		width: 150px;
		height: auto;
		margin: auto;
	}
	footer #address ul li {
		margin-bottom: 20px;
		line-height: 1.5;
    	color: #6f594c;
	}
	footer #address .ftInner{
		padding:0 !important;
	}
	footer #address .ftInner h1 + ul{
		padding:0 3%;
	}
	footer ul#subNav {
		margin-bottom: 0;
	}
	footer ul#subNav li {
		margin: 0;
	}
	footer ul#subNav li a {
		font-size: 13px;
		display: block;
		width: 100%;
		background: #f8f8f8;
		padding: 4% 3%;
		border-top: 1px solid #7f7976;
		position: relative;
		box-sizing: border-box;
    	color: #3d312a;
		text-decoration: none;
	}
	footer ul#subNav li a:after {
		content: "";
		width: 0;
		height: 0;
		border-bottom: 0 solid transparent;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		border-top: 5px solid #7f7976;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 3%;
		margin: auto;
	}
	footer p#copyright {
		font-size: 70%;
		margin:0;
		padding: 3% 0;
		text-align: center;
		background: #3d312a;
		color: #eee3dc;
	}
}