@charset "utf-8";

/*---------------------------------------------------------
【メディアクエリ区分 - PCファーストで記述していく】
レスポンシブ対応する場合は、以下の該当箇所に記述する

@media screen and (max-width: 1200px)
@media screen and (max-width: 1024px)
@media screen and (max-width: 979px)
@media screen and (max-width: 800px)
@media screen and (max-width: 768px)
@media screen and (max-width: 640px)
@media screen and (max-width: 568px)
@media screen and (max-width: 480px)
@media screen and (max-width: 414px)
@media screen and (max-width: 375px)
@media screen and (max-width: 320px)

【CSS振り分け】

01.共通 
基本,
#hd-ex 
#header 
#sl-button
#slide-menu
#gnave
.main
.sidebar
コンタクト, 
.widget
カテゴリー, バナー, 固定ページ, 新着情報
カスタムメニュー
.shopinfo
#sns
RSS購読ボタン
バナー
Related Post
#footer 
#copyright,
googlemap

02.トップページ
基本, アイキャッチ, 新着情報

03.個別ページ
基本
アイキャッチ
breadcrmb 
エントリー
見出し, ul, ol, dl, table, form, 引用, 
gallery, button, 詳細ボタン, flow, image-box, 
Q&A, sample, col2, col3
新着ブログ,
ページナビ,
404ページ

04.投稿ページ
エントリー
Post meta

05.カテゴリページ
エントリー
post-cat


【設定カラー】
色01 #5c6266 濃い目の灰色	:	メインカラー
色02 #e7e5e4 薄めの灰色		：	キーカラー01
色03 #fff 白							：	キーカラー02
色04 #333 黒							：	メインカラーの上にのるフォントカラー


【変更履歴】
20170109 mnite ：背景を入れた時におかしくないよう調整
20170514 mnite ：スマートフォン表示（480以下）のヘッダー部分の調整（重なり順、フォントアイコンの位置）

--------------------------------------------------------*/
/*======================================================
Responsive: 1200px
========================================================*/
@media screen and (max-width: 1200px) {
}

/*======================================================
Responsive: 1024px
========================================================*/
@media screen and (max-width: 1024px) {
}

/*======================================================
Responsive: 979px
========================================================*/
@media screen and (max-width: 979px) {
/*----------------
  *	01.共通
  - #gnavi
  - 基本
  -----------------*/
#gnavi li a {
	font-size: 80%;
}
/*----------------
  *	01.共通
  - .main
  -----------------*/
.main {
	float: none;
	width: 98%;
	max-width: 650px;
	margin: 0 auto;
}
.main .entry {
	/*padding: 0; 20170109 mnite*/
	padding: 10px 0px; /*20170109 mnite*/
}
.col7_3 .main {
	float: none;
	width: 98%;
	max-width: 650px;
	margin: 0 auto;
}
.col5_5 .main {
	float: left;
	width: 48%;
}
.col10 .main {
	width: 80%;
	margin: 0 auto;
	float: none;
}
.colfull .main {
	width: 100%;
	max-width: none;
}
/*----------------
  *	01.共通
  - .sidebar
  - 基本
  -----------------*/
.sidebar {
	display: none;
	float: none;
	clear: both;
	width: 98%;
	max-width: 650px;
	margin: 0 auto;
}
.col5_5 .sidebar {
	width: 48%;
}
/*----------------
  *	01.共通
  - .sidebar
  - コンタクト
  -----------------*/
#contact_sb {
	margin: 0 auto;
	min-height: 105px;/*width: 430px;*/
}
#contact_sb .lead {
	padding: 0 0 10px 0;
	border-bottom: 1px dotted #5C6266;
}
#contact_sb .tel {
	float: left;
}
#contact_sb .mail {
	float: right;
}
#contact_sb .ex {
	clear: both;
}
/*----------------
  *	03.個別ページ
  - アイキャッチ
  -----------------*/
.single #eyecatch-in {
	max-width: 100%; /*20170109 mnite*/
}
}

/*======================================================
Responsive: 800px
========================================================*/
@media screen and (max-width: 800px) {
/*----------------
  *	01.共通
  - #gnavi
  - 基本
  -----------------*/
#gnavi li a {
	font-size: 70%;
}
}

/*======================================================
Responsive: 768px
========================================================*/
@media screen and (max-width: 768px) {
/*----------------
  *	01.共通
  - 基本
  -----------------*/
#hd-ex-in, #header-in, #eyecatch-in, #gnavi-in, .col10, .col7_3, .col5_5, #footer-in, #copyright-in {
	width: 98%;
	margin: 0 auto;
}
body.open #all { /*20170109 mnite*/
	min-width: 703px;
}
/*----------------
  *	01.共通
  - #hd-ex
  - 基本
  -----------------*/
#hd-ex p {
	margin: 10px 0 30px;
	font-size: 90%;
	line-height: 1.2;
}
/*----------------
  *	01.共通
  - #header
  - #sl-button
  -----------------*/
#header {
	margin: 10px 0;
}
#header .align-left {
	width: 35%;
	min-width: auto;
	float: left;
}
#header .align-contact {
    margin: 0 45px 0 0;
    min-width: 250px;
    width: 25%;
    float: right;
}
#header .align-center {
	float: right;
	margin: 0;
	max-width: 275px;
}

#header .align-center #mail {
	float: left;
}
#header .align-right {
    float: left;
    margin: 2px 0 0 5px;
}
#header .align-append {
	position: absolute;
	top: 0;
	right: 0;
}
#header #sl-button {
	display: block;
}
#header #sl-button a {
	float: right;
	margin: 0 0 0 5px;
	padding: 10px;
	line-height: 1.6;
	min-width: 30px;
	display: block;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#header #sl-button a.clicked {
	background-color: #333;
}
#header #sl-button a:hover {
	background-color: #5C6266;
	opacity: 0.8;
	text-decoration: none;
}
/*----------------
  *	01.共通
  - #gnavi
  -----------------*/
#gnavi, #gnavi > #gnavi-in > div#mega-menu-wrap-navbar {
	display: none;
	margin: 0 0 20px 0;
}
#gnavi li {
	width: 100%;
	height: 40px;
	background-color: #5C6266;
	float: none;
	border-left: none;
	margin: 1px 0px 0px 0px;
	text-align: center;
	line-height: 40px;
	box-sizing: border-box;
}
#gnavi li a {
	color: #FFF;
	text-decoration: none;
	display: block;
}
/*----------------
  *	01.共通
  - .main
  -----------------*/
.main {
	width: 100%;
}
.col5_5 .main, .col5_5 .main.col-r, .col10 .main {
	float: none;
	width: 98%;
	max-width: 650px;
	margin: 0 auto;
}
/*----------------
  *	01.共通
  - .sidebar
  - 基本
  -----------------*/


  /*----------------
  *	01.共通
  - #footer
  - 基本
  -----------------*/
#footer-info.sticky {
    padding: 15px 5px;
}
.contact_ft .mailarea {
    margin: 0 0 0 10px;
    float: left;
}
#footer-in .align-left {
	width: 49%;
	margin: 0 2% 0 0;
}
#footer-in .align-center {
	width: 49%;
	margin: 0;
}
#footer-in .align-right {
	float: none;
	clear: both;
	width: 100%;
}
/*----------------
  *	02.トップページ
  - 基本
  -----------------*/
#eyecatch-in {
	width: 100%;
	margin: 0 auto;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - col
  -----------------*/
  /* col2 */
.entry .col2 div {
}
/* col3 */
.entry .col3 div {
}
/* banner 9つ並んだバナー */
.boxBanner.col2 div {
	float: left;
	width: 48%;
	margin: 10px 1%;
}
.boxBanner.col3 div {
	float: left;
	width: 48%;
	margin: 10px 1%;
}
.boxBanner.col4 div {
	float: left;
	width: 48%;
	margin: 10px 1%;
}
.widget_my_widget17 .boxBanner.col3 > div:nth-of-type(3n+1), .widget_my_widget17 .boxBanner.col4 > div:nth-of-type(4n+1) {
	clear: none;
}
.widget_my_widget17 .boxBanner.col3 > div:nth-of-type(2n+1), .widget_my_widget17 .boxBanner.col4 > div:nth-of-type(2n+1) {
	clear: both;
}
.boxBanner.col2 img, .boxBanner.col3 img, .boxBanner.col4 img {
	width: 100%;
	margin: 0 auto!important;
}
.boxBanner {
	overflow: hidden;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - gallery
  -----------------*/
.col10 .entry .gallery {
	width: auto;
	max-width: initial;
	max-width: auto;
	margin: 30px auto;
}
}

/*======================================================
Responsive: 640px
========================================================*/
@media screen and (max-width: 640px) {
/*----------------
  *	01.共通
  -	widget#01投稿リスト
  -----------------*/
.contact {
}
.contact_in .mailarea {
    min-width: 224px;
    text-align: center;
    float: none;
}
.contact_in .telarea {
    margin: 0 auto;
    min-width: 244px;
    text-align: center;
    float: none;
}
.contact_in .tel {
	margin: 0 auto !important;
	max-width: 244px;
}
.contact_in .mail {
	margin:0 auto;
	max-width: inherit;
}
.col7_3 .entry .widget_my_widget02 ul.template1, .col7_3 .entry .widget_my_widget02 ul.template3, .col7_3 .entry .widget_my_widget02 ul.template4, .col10 .entry .widget_my_widget02 ul.template1, .col10 .entry .widget_my_widget02 ul.template3, .col10 .entry .widget_my_widget02 ul.template4, .colfull .entry .widget_my_widget02 ul.template1, .colfull .entry .widget_my_widget02 ul.template3, .colfull .entry .widget_my_widget02 ul.template4 {
	-moz-column-count: auto;
	-moz-column-gap: normal;
	-moz-column-rule: none;
	-webkit-column-count: auto;
	-webkit-column-gap: normal;
	-webkit-column-rule: none;
	column-count: auto;
	column-gap: normal;
	column-rule: none;
}
/*----------------
  *	05.カテゴリー
  - エントリー 
  - post-cat
  -----------------*/
.category .entry .post-cat {
	min-height: 400px;
	margin: 30px 2% 30px;
}
.category .entry .post-cat img {
	width: 100%;
}
}

/*======================================================
Responsive: 568px
========================================================*/
@media screen and (max-width: 568px) {
/*----------------
  *	01.共通
  - .main
  -----------------*/
#header .align-left {
}
#header .align-contact {
    min-width: 52px;
    width: auto;
}
#header .align-center {max-width: none;}
#header .align-center .pc {
	display: none !important;
}
#header .align-center .sm {
	min-width: auto;
	font-size: 100%;
	display: block !important;
}
#header .align-center .sm a {
	background-color: #1e73be;
	color: #ffffff;
	font-size: 100%;
	text-align: center;
	margin: 0 0 0 5px;
	padding: 10px;
	line-height: 1.6;
	min-width: 30px;
	display: block;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	display: block !important;
}
#header .align-center .sm a:before {
	display: none;
}
#header .align-right {margin: 0;}
#header .align-right .pc {
	display: none !important;
}
#header .align-right .sm {
	display: block !important;
}
#header .align-right .sm a {
	font-size: 100%;
	text-align: center;
	margin: 0 0 0 5px;
	padding: 10px;
	line-height: 1.6;
	min-width: 30px;
	display: block;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	display: block !important;
}
#header .align-right .sm a:before {
	display: none;
}
#header .align-append {
}
#contents {
	margin: 40px 0;
}
/*----------------
  *	01.共通
  - .main
  - コンタクト
  -----------------*/
.main #contact_sb {
	min-height: 105px;
	min-width: 200px;
	max-width: 253px;
	width: 95%;
}
.main #contact_sb .tel {
	min-height: 50px;
	float: none;
}
.main #contact_sb .mail {
	float: none;
}
/*----------------
  *	01.共通
  - .sidebar
  - コンタクト
  -----------------*/
#contact {
	width: 100% !important;
}
#contact_sb {
	min-height: 160px;
	min-width: 200px;
	max-width: 268px;
}
#contact_sb .tel {
	min-height: 50px;
	float: none;
}
#contact_sb .mail {
	float: none;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - flow
  -----------------*/
.entry .flow > p {
	margin: 0 auto;
	width: 100%;
	float: none;
}
.entry .flow > p img {
	margin: 0 auto;
}
.entry .flow div {
	width: 100%;
	float: none;
}
.entry .flow h3 {
	margin: 10px 0 0;
	text-align: center;
}
.entry .flow p {
	margin: 10px 0;
}
}

/*======================================================
Responsive: 480px
========================================================*/
@media screen and (max-width: 480px) {
/*----------------
  *	01.共通
  - 基本
  -----------------*/
.pc {
	display: none !important;
}
.sm {
	display: block !important;
}
body.open #all { /*20170109 mnite*/
	min-width: initial;
	min-width: auto;
}
#footer-info.sticky {
    padding: 15px 20px;
}

/*----------------
  * 01.共通
  - #header
  - #sl-button
  -----------------*/
#header-in .align-left {
}
#header-in .align-center {
}
#header-in .align-right {
}
#header-in .align-center #mail, #header-in .align-center #sl-button {
}
#header-in .align-right #tel {
}
#header #tel, #header #mail, #header #sl-button {
}
#header #tel a {
}
#header #mail a {
}
#header #sl-button a {
}
#header #sl-button a.clicked {
	background-color: #e7e5e4;
}
.page #eyecatch-in img, .single #eyecatch-in img, .category #eyecatch-in img {
	min-height: 100px;
}
/*----------------
  *	01.共通
  - #gnavi
  -----------------*/
#header-in {
	padding: 0;
	/*background-color: #fff; 20170109 mnite*/
}
#header-in.is-fixed {
	position: fixed;
	z-index: 9999; /*20170514 mnite*/
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 10px;
	background-color: #fff;
}
#header .align-contact {
    margin: 0 55px 0 0;
}
#gnavi li {
	border-left: none;
}
/*----------------
  *	01.共通
  - .main
  -----------------*/
#contents {
	margin: 0;
}
.main {
	max-width: 479px;
}
.main .entry {
	margin: 0 0 20px 0;
	padding: 0;
}
.col5_5 .main {
	width: 98%;
}
.col10 .main {
	width: 98%;
}
/*----------------
  *	01.共通
  - .sidebar
  - コンタクト
  -----------------*/

.main #contact_sb {
	min-width: 85%;
	max-width: 268px;
	padding: 5%;
}
/*----------------
  *	01.共通
  - .sidebar
  - 基本
  -----------------*/


  /*----------------
  *	01.共通
  - .sidebar
  - バナー
  -----------------*/
.main .banner img {
	width: 100%;
	margin: 10px auto;
	float: none;
}
/*----------------
  *	01.共通
  - #footer
  -----------------*/
#footer {
	margin: 50px 0 0 0;
}
#footer-in .align-left {
	float: none;
	width: 100%;
	margin: 0;
}
#footer-in .align-center {
	float: none;
	width: 100%;
}
#footer-in .align-right {
	margin: 40px 0 0 0;
}
#copyright {
	font-size: 80%;
	line-height: 1.2;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - dl
  -----------------*/
.entry dl.dl02 dt {
	float: none;
	margin: 5px auto;
	border: none;
}
.entry dl.dl02 dd {
	border: none;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - table
  -----------------*/

.entry table.res-h {
	display: block;
	overflow-x: auto;
}
.entry table.res-h th, .entry table.res-h td {
	width: 700px;
	white-space: nowrap;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - form
  -----------------*/
.entry form table tr {
	border: none;
	display: block;
}
.entry form table th {
	border: none;
	width: auto;
	display: block;
}
.entry form table td {
	display: list-item;
	list-style: none;
	line-height: 2.0;
	margin: 0 auto;
	padding: 0;
	width: 96%;
	border: none;
	text-align: center;
}
/*20170109 mnite ここから*/
.entry form input[type="text"], .entry form input[type="password"], .entry form input[type="email"], .entry form textarea {
	margin: 20px auto;
	width: 96%;
	max-width: 96%;
	line-height: 2.0;
}
.entry form .mwform-tel-field input, .entry form .mwform-fax-field input {
	width: 24%;
}
/*20170109 mnite ここまで*/

  /*----------------
  *	03.個別ページ
  - エントリー
  - gallery
  -----------------*/
.entry .gallery-columns-2 .gallery-item, .entry .gallery-columns-2 .gallery-item, .entry .gallery-columns-3 .gallery-item, .entry .gallery-columns-4 .gallery-item {
	float: none;
	width: 100%;
	margin: 0 auto 2%;
}
/*20170109 mnite ここから*/
.entry .gallery-columns-2 dl:nth-of-type(2n), .entry .gallery-columns-3 dl:nth-of-type(3n-1), .entry .gallery-columns-3 dl:nth-of-type(3n), .entry .gallery-columns-4 dl:nth-of-type(4n-1), .entry .gallery-columns-4 dl:nth-of-type(4n-2), .entry .gallery-columns-4 dl:nth-of-type(4n) {
	margin: 0 auto 2%;
}
/*20170109 mnite ここまで*/

  /* .gallery-columns-4を2段組にする場合は コメント外す 
  .entry .gallery-columns-4 .gallery-item {
  float: left;
  width: 50%;
  margin: 0 auto;
}	
  */

.entry .gallery-item img {
	margin: 0 auto;
}
.entry .gallery br {
	display: none;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - image-box
  -----------------*/
.entry .image-box > p {
	margin: 0 auto;
	width: 100%;
	float: none;
}
.entry .image-box > p img {
	margin: 0 auto;
}
.entry .image-box div {
	width: 100%;
	float: none;
}
.entry .image-box h3 {
	margin: 10px 0 0;
	text-align: center;
}
.entry .image-box p {
	margin: 10px 0;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - Q&A
  -----------------*/
.entry .qanda dt {
	background-position: left 20px;
	border-top: #E7E5E4 1px solid;
	border-bottom: #E7E5E4 1px solid;
	/*padding: 60px 0 20px; 20170109 mnite*/
	padding: 25px 0 15px 100px; /*20170109 mnite*/
	line-height: 1.4;
}
/*----------------
  *	03.個別ページ
  - エントリー
  - col
  -----------------*/
  /* col2 */
.entry .col2 div {
	width: 98%;
	float: none;
	margin: 10px auto;
}
.entry .col2 div img {
	margin: 10px auto;
}
/* col3 */
.entry .col3 div {
	width: 88%;
	float: none;
	margin: 0 auto 20px;
}
/* banner 9つ並んだバナー */
.boxBanner.col2 div {
	float: none;
	width: 100%;
	margin: 5px 1% 30px;
}
.boxBanner.col3 div {
	float: left;
	width: 48%;
	margin: 5px 1%;
}
.boxBanner.col4 div {
	float: left;
	width: 48%;
	margin: 5px 1%;
}
.boxBanner.col2 img, .boxBanner.col3 img, .boxBanner.col4 img {
	width: 100%;
	margin: 0 auto!important;
}
.boxBanner {
	overflow: hidden;
}
/*----------------
  *	05.カテゴリーページ
  - エントリー
  - post-cat
  -----------------*/
.category .entry .post-cat .post-cat-col {
	width: 93%;
	max-width: 400px;
	min-height: 450px;
	margin: 20px auto;
	float: none;
}
/*20170109 mnite ここから*/
.category .entry .post-cat .post-cat-col:nth-of-type(2n) {
	margin: 20px auto;
}
/*20170109 mnite ここまで*/

.category .entry .post-cat .post-cat-col img {
	margin: 0 auto;
	max-width: 400px;
	float: none;
}
.category .entry .post-cat .post-cat-col div {
	width: 100%;
	float: none;
}
}

/*======================================================
Responsive: 414px
========================================================*/
@media screen and (max-width: 414px) {
}

/*======================================================
Responsive: 375px
========================================================*/
@media screen and (max-width: 375px) {
#header #tel a, #header #mail a, #header #sl-button a {
	margin: 0 3px;
}
#header .align-contact {
    margin: 0 57px 0 0;
}
}

/*======================================================
Responsive: 320px
========================================================*/
@media screen and (max-width: 320px) {
/*----------------
  *	03.個別ページ
  - エントリー
  - form
  -----------------*/
  /*20170109 mnite ここから*/	
.entry form .mwform-tel-field input, .entry form .mwform-fax-field input {
	width: 20%;
}
.entry form input[type="submit"], .entry form input[type="reset"] {
	width: 44%;
}
/*20170109 mnite ここまで*/

}