/*
 *	m.css
 *	～782px
 */

/*--------------------------------------------------
	モバイル用設定
 */

.for_l {
	display	:	none !important;
}

.for_s {
	display	:	none !important;
}

.fxw_l {
	flex-flow	:	column nowrap;
}

.fxw_l .fx6 {
	width	:	100%;
	max-width	:	100%;
}

.fxw_l img{
	margin-bottom	:	2rem;
}

.fxw {
	flex-flow	:	column nowrap;
}

section.content-box {
	padding: 0 1rem;
	margin: 2rem 0 4rem;
}

section.fxw {
	margin: 2rem 0 10rem;
}

.fxb {
	padding: 1rem 0 2rem;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

/*--------------------------------------------------
	基本構造
 */

body {
	margin-top	:	46px;
}

aside,
main {
	padding	:	0;
}

#ftrnav > li {
	width	:	50%;
}

/*--------------------------------------------------
	css 追加要素
 */

.maw {
	width	:	100% !important;
	min-width	:	100%;
}

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

#masthead {
	position	:	fixed;
	width	:	100%;
	height	:	48px;
	left	:	0;
	top		:	0;
	min-width	:	320px;
}

.logged-in #masthead {
	position	:	fixed;
	top		:	46px;
}

/*	ヘッダキャッチ	*/
#h_catch {
	position	:	relative;
	height	:	48px;
	display	:	flex;
	align-items	:	center;
	color	:	white;
	width: calc( 100% - 48px );
}

#h_catch a {
	font-weight	:	bold;
	padding-left: 1.5rem;
}


/*	メニューボタン	*/
#menubutton {
	position	:	fixed;
	top	:	0;
	right	:	0;
	display	:	flex;
	justify-content	:	center;
	align-items	:	center;
	width	:	24px;
	height	:	24px;
	margin: 12px;
	font-size	:	18px;
	color	:	#7A6550;
}

.logged-in #menubutton {
	position	:	absolute;
	top	:	0;
}

.open #menubutton::before {
	content	:	"\f00d";
}


/*	メニュー部分	*/
#h_nav {
	position	:	fixed;
	left	:	0;
	top		:	48px;
	width	:	100%;
	background-color	:	white;
	box-shadow	:	0 1rem -0.8rem #000000;
}

.logged-in #h_nav {
	position	:	absolute;
	top		:	48px;
}

#h_nav ul {
	margin	:	0 auto;
	width	:	100%;
	height	:	0;
	display	:	block;
	position	:	relative;
	overflow	:	hidden;
	overflow-y	:	auto;
	transition	:	all 0.2s ease;
}

.open #h_nav ul {
	height	:	auto;
}

#h_nav ul li {
	display	:	flex;
	flex	: 1 1 auto;
	justify-content	:	center;
	background-color	:	white;
	flex-flow	:	column nowrap;
	position	:	relative;
}

#h_nav ul li a {
	display	:	flex;
	align-items	:	center;
	justify-content: left;
	width	:	100%;
	height	:	auto;
	min-height	:	48px;
	text-align	:	left;
	border-left	:	3px  solid transparent;
	background-color	:	var(--bgcolor);
	padding-left	:	3rem;
	color: var(--maincolor);
	border-bottom: 1px solid var(--bdcolor);
}

#h_nav ul li a:hover {
	color	:	var(--hovercolor);
}

#h_nav ul li a:hover::before {
	position	:	absolute;
	content	:	'';
	display	:	block;
	height	:	48px;
	width	:	5px;
	background-color	:	var(--maincolor);
	left	:	0;
	top		:	0;
}

#h_nav ul.sub-menu {
	position	:	relative;
}

#h_nav ul.sub-menu {
	position	:	unset;
}

#h_nav ul.sub-menu li {
	border-bottom	:	none;
}

#h_nav ul.sub-menu li a {
	padding-left	:	4rem;
}

.open #h_nav #menu-header {
	max-height	:	calc( 100vh - 48px );
}

.logged-in .open #h_nav #menu-header {
	max-height	:	calc( 100vh - 48px - 46px );
}

#menu-header li a {
	border-bottom	:	1px solid #666;
}

#menu-header li.menu-item-has-children a {
	border-bottom	:	1px dotted #999;
}

#menu-header ul.sub-menu li:last-child a {
	border-bottom	:	1px solid #666;
}

body.open {
	overflow	:	hidden;
}

#h_contactbox {
	position	:	absolute;
	top	:	0;
	right	:	56px;
}

#h_contactbox a.button {
	display	:	flex;
	align-items	:	center;
	justify-content	:	center;
	width	:	48px;
	height	:	48px;
	font-size	:	42px;
	background-color	:	transparent;
	box-shadow	:	none;
}

#h_contactbox .img-circle.cimg,
#h_contactbox .img-circle.cimg .imgbox {
	position	:	relative;
}

#h_contactbox .img-circle.cimg .imgclip,
#h_contactbox .img-circle.cimg .imgbox:hover .imgclip {
	width	:	2rem;
	height	:	2rem;
}

.open main::before {				/*	メニュー以外を黒く覆う	*/
	display	:	block;
	width	:	100%;
	height	:	100%;
	position	:	fixed;
	top	:	0;
	left	:	0;
	content	:	'';
	z-index: 10;
	background-color	:	rgba( 0, 0, 0, 0.8 );
}

/*--------------------------------------------------
    フッタ
 */

#ftr-content {
	flex-flow: row nowrap;
}

#colophon .tal,
#colophon .tar {
	text-align: center;
}

/*
#colophon p {
	margin-bottom: 1rem;
}
*/

/*--------------------------------------------------
	ホーム
 */

.home section > div {
	padding: 2rem 0 3rem;
}

#home-sec1 #logo {
	width	:	max(40vw, 360px);
	height	:	auto;
	margin	:	2rem auto 0;
}

#product-image2 {
	display	:	none
}

#workshop-image {
	width: 100%;
	max-width: 100vw;
}

/*--------------------------------------------------
	WARAKUとは
 */

#about .fxi-logo {
	position:	initial;
	width	:	max(40vw, 360px);
	height: auto;
}

/*--------------------------------------------------
    ボタン
 */

.button-more {
	left: calc( 50% - 71px );
	bottom: 3.5rem;
}

ul.disc {
	text-align: left;
	width: max( 320px, 70vw );
	margin: 0 auto;
}

/*--------------------------------------------------
    ブログ
 */

#blog-archive.content-box{
	flex-flow: column wrap;
}

#blog-archive .poster{
	width: auto;
}