@charset "UTF-8";


/* モバイル */

@media screen and (max-width: 767px)

{
/* CSSリセット */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}



/* html
----------------------------------------------------- */

html{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/* body
-----------------------------------------------------*/

body{
	width: 100%;
	height: 100%;
	background: #FFF;
	color: #403929;
	font-size: 14px;
	font-family: "游ゴシック";
	line-height: 1.7em;
	margin: 0;
	padding: 0;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

div#wrap {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

div#container{
	width: 100%;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	margin: 0 auto;
	padding: 0 0 50px 0;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	padding-bottom: 50px;
	background-color: #FFF;
}

/* link関連
----------------------------------------------------*/

a:link {
	text-decoration: none;
	color: #ed6d46;
}
a:visited {
	text-decoration: none;
	color: #7e5f4d;
}
a:hover {
	text-decoration: none;
	color: #f5b1aa;
}
a:active {
	text-decoration: none;
	color: #f5b1aa;
}

/*ページトップへ戻る
-----------------------------------------------------*/
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0px;
	bottom: 20px;
	background: #ff7f4d;
	opacity: 0.5;
	z-index: 9999;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -15px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
#page_top a::after{
	content: 'TOP';
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 25px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/* ナビゲーションメニュー */
nav.menu {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	background: #FFF;
	color: #000;
	text-align: center;
	transform: translateY(-100%);
	transition: all 0.6s;
	width: 100%;
}
nav.menu ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
nav.menu ul li {
	background: #ff7f4d;
	font-size: 13px;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px solid #FFF;
}
/* 最後はラインを描かない */
nav.menu ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
nav.menu ul li a {
	display: block;
	color: #FFF;
	padding: 10px 0;
}
/* このクラスを、jQueryで付与・削除する */
nav.menu.active {
	transform: translateY(0%);
}

.navToggle {
	display: block;
	position: fixed;   /* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 3;
	background: rgba(255,111,0,0.5);
	text-align: center;
	border-radius: 3px;
}

.navToggle span {
	display: block;
	position: absolute;   /* .navToggleに対して */
	width: 30px;
	border-bottom: solid 3px #FFF;
	-webkit-transition: 0.35s ease-in-out;
	-moz-transition: 0.35s ease-in-out;
	transition: 0.35s ease-in-out;
	left: 6px;
	margin: auto;
}
.navToggle span:nth-child(1) {
	top: 9px;
}
.navToggle span:nth-child(2) {
	top: 18px;
}
.navToggle span:nth-child(3) {
	top: 27px;
}
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}

/* ヘッダー
----------------------------------------------------*/

div#header {
	width: 100%;
	height: 70px;
	position: relative;
	z-index: 9999;
}

header {
	width: 100%;
	height: 70px;
	background: #ffa480;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 15px 5px;
	margin: 0;
}
header p {
	width: 65%;
	position: absolute;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.2;
}

/* ミドルdiv
----------------------------------------------------*/

div.middle {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

div.main {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 20px 0 180px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

p.top_shokai {
	margin: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
div.mop_type {
	width: 250px;
	margin: 40px auto 0;
	border: 1px solid #b0e0e6;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
div.mop_type img {
	display: block;
	max-width: 100%;
}
div.mop_type p {
	padding: 14px;
	font-size: 14px;
	line-height: 1.8;
}
.bold {
	font-weight: bold;
}

/*商品紹介枠
-----------------------------------------------------*/

div.mop_item {
	width: 97%;
	margin: 50px auto 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
div.mop_item  h3 {
	width: 95%;
	font-weight: bold;
	font-size: 16px;
	border-bottom: 3px dotted #ffa480;
	padding: 5px 7px 3px;
}
div.mop_item  img {
	display: block;
	margin: 5px;
	
}

/*ギャラリー
-----------------------------------------------------*/
div.photo_container {
	width: 86%;
	margin: 20px auto 10px;
	padding: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.thumbnail {
	margin: 10px;
        padding: 0;
        width: 100%;
        list-style-type: none;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
}
.thumbnail li {
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 0;
	list-style: none;
	width: 25%;
}
.thumbnail li:last-child {
        margin-right: 0;
}
.thumbnail li img {
	max-width: 100%;
	border: 1px solid #CCC;
	opacity: 0.5;
        filter: alpha(opacity=50); 
}
.thumbnail li.current img {
	opacity: 1;
        filter: alpha(opacity=100);
}
.main_photo {
	position: relative;
       border-top: 5px solid #fff;
       border-bottom: 5px solid #fff;
       border-left: 5px solid #fff;
       border-right: 15px solid #fff;
       padding-bottom: 10px;
       box-shadow: 0 1px 8px #bbb;
       height: 300px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.main_photo img {
	position: absolute;
	top: 0;
	max-width: 100%;
	max-height: 100%;
}

/* 商品説明div
-----------------------------------------------------*/

.item_setu {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/* 商品説明文章 */
ul.item_tokucho {
	list-style-type: disc;
	padding-left: 20px;
	margin: 0 20px;
}
ul.item_tokucho li {
	margin-top: 8px;
}
/* 対応ホルダー */
ul.taio_holder {
	list-style: none;
	padding: 0;
	margin: 20px auto 10px;
	width: 90%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items:  flex-start;
}
ul.taio_holder li {
	margin-right: 5px;
	margin-bottom: 5px;
	width: 33%;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
}
ul.taio_holder li:last-child {
	margin-right: 0;
}
ul.taio_holder li img {
	max-width: 100%;
	display: block;
	margin: 0 0 3px;
	border: 1px solid #CCC;
}

/* 寸法・毛足の長さ */
.item_setu dl {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	width: 280px;
	margin: 20px auto;
	display: flex;
       flex-flow: row wrap;
       justify-content: flex-start;
       border-top: 1px solid #ccaea3;
       border-right: none;
       border-bottom: none;
       border-left: none;
       background: #FFF;
}
.item_setu dt {
	padding: 6px;
	margin: 0;
	width: 77px;
	text-align: center;
       border-top: none;
       border-right: 1px solid #ccaea3;
       border-bottom: 1px solid #ccaea3;
       border-left: 1px solid #ccaea3;
       background: #ffdacc;
}
.item_setu dd {
	padding: 4px;
	margin: 0;
	width: 180px;
	text-align: left;
       border-top: none;
       border-right: 1px solid #ccaea3;
       border-bottom: 1px solid #ccaea3;
       border-left: none;
       background: #FFF;
}



/*カンカン・勉強部屋リンク
-----------------------------------------------------*/

div.link{
	width: 100%;
	height: auto !important;
	bottom: 50px;
	margin: 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

div.link ul {
	margin: 0 auto;
	list-style: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

div.link ul li:last-child {
	margin-top: 5px;
}

img.link_img{
	max-width: 100%;
}
/* フッター
----------------------------------------------------*/

footer {
	width: 100%;
	height: 50px;
	background-color: #FFF;
	position: absolute;
	bottom: 0;
}

footer p {
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	font-size: 0.7em;
}

}