@charset "UTF-8";


/* デスクトップ */

@media screen and (min-width: 768px)

{
/* 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;
	scroll-padding-top: 70px; /* 固定ヘッダの高さ分 */
}

/* 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: 60px;
	height: 60px;
	position: fixed;
	right: 0px;
	bottom: 55px;
	background: #ffa480;
	opacity: 0.5;
	z-index: 9999;
}
#page_top a{
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	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: -25px;
	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: 30px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
/* ヘッダー
----------------------------------------------------*/

div.navToggle {
	display: none;
}

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

header {
	width: 100%;
	height: 80px;
	background: #ffa480;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	margin: 0;
}
header p {
	width: 400px;
	position: absolute;
	left: 20px;
	top: 10px;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.2;
}
nav.menu ul {
	list-style: none;
	width: 500px;
	height: 80px;
	position: absolute;
	top: 42px;
	right: 0;
	bottom: 2px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	display: flex;
	-webkit-display: flex;
	-moz-display: flex;
	-o-display: flex;
	-ms-display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
nav.menu ul li{
	flex: 1 1 8%;
	height: 34px;
	padding: 0;
	position: relative;
	list-style: none;
	font-size: 14px;
	text-align: center;
}
nav.menu ul li:last-child {
	flex: 1 1 14%;
	height: 34px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	text-align: center;
}
nav.menu ul li a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	height: 34px;
	font-size: 14px;
	color: #FFF;
	font-weight: bold;
	padding: 3px 5px;
}
nav.menu ul li a:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 3px;
	background: #b0e0e6;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
}
nav.menu ul li a:hover:before {
	transform: scale(1);
}

/* ミドルdiv
----------------------------------------------------*/
span.pc_br {
	display: block;
}

div.middle {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 80px 0 50px;
	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: 760px;
	height: 100%;
	margin: 0 auto 50px;
	padding: 20px 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;
}

p.top_shokai {
	width: 704px;
	display: block;
	margin: 50px 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.mop_type {
	width: 704px;
	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;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
div.mop_type img {
	display: block;
	width: 240px;
}
div.mop_type p {
	padding: 14px;
	font-size: 14px;
	line-height: 1.8;
}
.bold {
	font-weight: bold;
}

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

div.mop_item {
	width: 704px;
	margin: 80px 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;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}
div.mop_item  h3 {
	width: 98%;
	font-weight: bold;
	font-size: 20px;
	border-bottom: 3px dotted #ffa480;
	padding: 5px 7px 3px;
}
div.mop_item  img {
	display: block;
	margin: 5px;
	
}

/*ギャラリー
-----------------------------------------------------*/
div.photo_container {
	width: 330px;
	margin: 10px auto;
	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: 10px solid #fff;
       padding-bottom: 10px;
       box-shadow: 0 1px 8px #bbb;
       height: 340px;
	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: 350px;
	padding: 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;
}

/* 商品説明文章 */
ul.item_tokucho {
	list-style: disc;
	padding-left: 10px
	margin: 0 10px 0 20px;
}
ul.item_tokucho li {
	margin-top: 8px;
}
/* 対応ホルダー */
ul.taio_holder {
	list-style: none;
	padding: 0;
	margin: 20px auto 10px;
	width: 97%;
	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: 48%;
	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: 300px;
	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: 200px;
	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;
	position: absolute;
	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 {
	width: 400px;
	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;
	display: flex;
	display: -webkit-flex;
	-moz-display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

div.link ul li {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 200px;
}

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;
}

}