@charset "utf-8";

/* パソコン、タブレット、スマートフォン全体の共通設定ここから */
/*■■■■■ デザインの全体設定ここから ■■■■■*/

* {
	font-style: normal;
	list-style-type: none;
	margin: 0; /* ← 外側の余白 */
	padding: 0; /* ← 内側の余白 */
	word-break: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

.s {
	font-weight: bold;
}

.sr {
	font-weight: bold;
	color: #b20000;
}

img { /* ← 画像全体の設定 */
	border: none;
	vertical-align: bottom;
	border-radius: 4px; /* ← 画像の角を丸くする設定（※画像を丸くしたくない場合は、このセレクタごと削除してください） */
}

/*■■■■■ デザインの全体設定ここまで ■■■■■*/





/*■■■■■ リンクの色、カーソルをリンクの上に置いたときの設定ここから ■■■■■*/

a {
	color: #0070c0; /* ← 最初から表示しているリンクの色 */
	text-decoration: none; /* ← リンクの下線を消す設定 */
}

a:hover {
	color: #d96d00; /* ← カーソルを乗せたときに表示するリンクの色 */
	text-decoration: underline; /* ← カーソルを乗せたときに表示するリンクの下線 */
}

/*■■■■■ リンクの色、カーソルをリンクの上に置いたときの設定ここまで ■■■■■*/





/*■■■■■ ホームページ全体の文字の色、文字の種類、文字のサイズ、行間、文字間の設定ここから ■■■■■*/

body {
	color: #333; /* ← 文字の色 */
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", 'MS PGothic','ＭＳ Ｐゴシック', 'MS Gothic', sans-serif;
	font-size: 16px; /* ← 文字の大きさ */
	word-break: normal; /* ← 自動で改行しないための設定 */
	word-wrap : break-word; /* ← 自動で改行しないための設定 */
	overflow-wrap : break-word; /* ← 自動で改行しないための設定 */
}

/*■■■■■ ホームページ全体の文字の色、文字の種類、文字のサイズ、行間、文字間の設定ここまで ■■■■■*/





/*■■■■■ ヘッダーここから（プリヘッド、ホームページ名、電話番号）■■■■■*/

header {
	width: 100%; /* ← ヘッダー全体の幅 */
}

header h1 { /* ← プリヘッドの設定 */
	width: 100%;
	font-size: 16px; /* ← プリヘッドに書かれている文字の大きさ */
	font-weight: normal; /* ← 文字の太さ */
	text-align: center; /* ← 中央寄せの設定 */
	color: #ffffff; /* ← プリヘッドの文字の色 */
	line-height: 2.5em; /* ← 文字の行間の設定 */
	letter-spacing: 0.02em; /* ← 文字の間隔の設定 */
	background-color: #51814f; /* ← プリヘッド部分の背景色の設定 */
}

header .h_inner { /* ← ホームページ名と電話番号が入る領域の幅 */
	width: 1024px;
	position: relative;
	margin: 20px auto; /* ← 上下の余白 */
}

header .top_title {
	font-size: 36px; /* ← ホームページ名の文字の大きさ */
}

header img { /* ← ヘッダー内の画像の設定 */
	width: 100%;
	height: auto;
	max-width: 450px; /* ← ホームページの名前の画像の最大横幅の設定 */
	transition: all 0.2s; /* ← カーソルを乗せたとき白く透過させるための設定 */
}

header img:hover {
	opacity: 0.6; /* ← 実際にカーソルを乗せたとき白くなる透過度の指定 */
}

header a:hover {
	text-decoration: none; /* ← カーソルを乗せたときリンクの下線が出ない設定 */
}

header .h_inner address { /* ← 電話番号、定休日の領域の設定 */
	position: absolute;
	top: -4px; /* ← 上からの位置を設定する */
	right:20px; /* ← 右からの位置を設定する */
	transition: all 0.2s;
}

header .h_inner address a.tel { /* ← パソコンで見たときの電話番号の設定 */
	font-size: 27px; /* ← 電話番号の文字の大きさ */
	font-weight: bold; /* ← 電話番号の文字の太さ */
	color: #555; /* ← 電話番号の色 */
	display: block;
}

header .h_inner address a.tel .h_info1 i.fa.fa-phone-square { /* ← 電話番号のマークの設定 */
	font-size: 28px; /* ← 電話マークの大きさ */
	margin-right: 10px; /* ← 電話マークの右の余白（電話番号とくっつかないようにするための余白） */
	color: #555; /* ← 電話マークの色 */
}

header .h_inner address a.tel .h_info1:hover {
	opacity: 0.6;
	transition: all 0.2s; /* ← カーソルを乗せたとき白く透過させるための設定 */
}

header .h_inner address .h_info2 {
	font-size: 13px; /* ← 定休日の文字の大きさ */
	padding: 0; /* ← 文字の上の余白 */
	line-height: 1.4em; /* ← 文字の行間 */
	color: #555; /* ← 文字の色 */
	display: block;
}

header .h_inner address a .info_form { /* ← 「お問い合わせはこちらをクリック」の設定 */
    width: 360px;
	font-size: 16px; /* ← 文字の大きさ */
	letter-spacing: 0.05em;
	color: #ffffff; /* ← 文字の色 */
	text-align: center; /* ← 文字の位置（ここでは中央寄せにしてあります） */
	margin-top: 7px; /* ← 文字の外側の余白 */
	padding: 3%; /* ← 文字の内側の余白 */
	background-color: #ce3e39; /* ← 文字を囲っている枠の色 */
	border-radius: 4px; /* ← 文字を囲っている枠の角を丸くする設定（0ゼロにすれば丸みはなくなります） */
}


header .h_inner address a .info_form:hover {
	opacity: 0.6;
	transition: all 0.2s; /* ← カーソルを乗せたとき白く透過させるための設定 */
}

header .h_inner address a .info_form .fa.fa-caret-right { /* ← お問い合わせにある矢印の設定 */
	font-size: 16px; /* ← 矢印の大きさ */
	color: #ffffff; /* ← 矢印の色 */
	margin-right: 10px; /* ← 矢印の右側の余白（文字とくっつかないために） */
}

/*■■■■■ ヘッダーここまで（プリヘッド、ホームページ名、電話番号）■■■■■*/





/*■■■■■ グローバルナビゲーション（上部メニュー）ここから ■■■■■*/

nav#g_menu {
	background-color: #51814f; /* ← グローバルメニューの背景色の設定 */
}

nav#g_menu ul {
	width: 1024px;
	height: 60px;
	margin: 0 auto;
}

nav#g_menu ul li { /* ← 上部メニュー1つ1つの幅の設定 */
	float: left;
	width: 169px;
	text-align: center;
}

nav#g_menu ul li a {
	height: 60px; /* ← 上部メニューの高さ幅の指定 */
	text-decoration: none;
	display: block;
    overflow: hidden;
	line-height: 60px; /* ← 文字の行間 */
	color: #ffffff; /* ← 文字の色 */
	font-size: 16px; /* ← 文字の大きさ */
	letter-spacing: 0.05em; /* ← 文字間の設定 */
	transition: all 0.2s; /* ← カーソルを乗せたとき柔らかく色が変化する動きの設定 */
}

nav#g_menu ul li a:hover { /* ← グローバルナビゲーション用のメニューにカーソルを乗せたときの設定 */
	background-color: #ffffff; /* ← カーソルを乗せたときの背景色 */
	color: #555; /* ← カーソルを乗せたときの文字の色 */
}

nav#g_menu .fa-angle-right{
	margin-right: 5px; /* ← グローバルナビゲーションの中にあるフォントオーサムのwebアイコン（矢印マーク）の右側の余白 */
	font-size: 20px; /* ← グローバルナビゲーションの中にあるフォントオーサムのwebアイコン（矢印マーク）の大きさ */
}

/*■■■■■ グローバルナビゲーション（上部メニュー）ここまで ■■■■■*/





/*■■■■■ メインビジュアル（トップページの大きな画像）ここから ■■■■■*/

#main_visual {
	width: 1024px;
	margin: 40px auto; /* ← メインビジュアルの上下の余白 */
}

#main_visual img {
	width: 100%;
	max-width: 1024px; /* ← 画像を最大で1024pxまで表示させるための設定 */
	height: auto;
}

#main_visual aside img:hover {
	opacity:0.8;
}

/*■■■■■ メインビジュアル（トップページの大きな写真）ここまで ■■■■■*/





/*■■■■■ コンテンツここから（サイドメニューとメインメニュー両方を囲んでいる部分）■■■■■*/

#contents {
	width: 1024px;
	margin: 0 auto;
	padding: 0;
}

/*■■■■■ コンテンツここまで（サイドメニューとメインメニュー両方を囲んでいる部分）■■■■■*/





/*■■■■■ メインメニュー（記事を書くメインの部分）ここから ■■■■■*/

#main {
	float: right;
	width: 700px; /* ← メイン部分全体の幅 */
	margin: 0 auto 50px;
}

#main .main_section { /* メインメニュー1つ1つの設定 */
	padding-bottom: 30px;
}

#main .main_section h2 { /* メインメニューの記事タイトル（中見出し）の設定 */
	font-size: 23px; /* ← 中見出しの文字の大きさ */
	margin: 0 0 25px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid #51814f; /* ← 中見出しの下部分に表示する区切り線の設定 */
}

#main .main_section h3 { /* メインメニューの記事タイトル（小見出し）の設定 */
	font-size: 22px; /* ← 小見出しの文字の大きさ */
	margin: 10px 0 25px;
	padding-bottom: 3px;
	border-bottom: 1px solid #51814f; /* ← 小見出しの下部分に表示する区切り線の設定 */
}

#main .main_section p { /* メインメニューの文字（テキスト）の設定 */
	width: 100%;
	font-size: 18px; /* ← 文字の大きさ */
	color: #333; /* ← 文字の色 */
	margin: 0; /* ← 文字の外側の余白 */
	padding-bottom: 30px; /* ← 文字の内側（下部分）の余白 */
	line-height: 1.8em;  /* ← 文字の行間の設定 */
	letter-spacing: 0.02em; /* ← 文字間の設定 */
	word-break: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

#main .main_section .photo1 { /* 左に写真、右に文章（テキスト）が入る場合の画像の設定 */
	max-width: 350px; /* ← 最大で画像を350pxまで表示させる設定 */
	height: auto;
	margin: 5px 20px 17px 0; /* ← 画像と文字がくっつかないようにするための余白 */
	float: left;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo2 { /* そのまま写真を入れる場合の設定（写真の下に文章がくる設定） */
	width: 100%;
	max-width: 700px; /* ← 最大で700pxまで表示させる設定 */
	height: auto;
	margin: 20px 0 27px;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo3 { /* 画像の下に説明文をつける場合の画像の設定 */
	width: 100%;
	max-width: 350px; /* ← 最大で350pxまで表示させる設定 */
	height: auto;
	margin: 5px 0 10px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo_hover { /* 画像にカーソルを乗せたら白く透過する前の設定（画像にリンクを貼りたい場合に） */
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 20px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
	transition: all 0.2s;
}

#main .main_section .photo_hover:hover { /* 画像にカーソルを乗せたら白く透過する後の設定 */
    opacity: 0.7;
	cursor: pointer;
}

#main .main_section .caption { /* 画像の下の説明文（キャプション）の設定 */
	width: 90%;
	font-size: 13px; /* ← 文字の大きさ */
	color: #333333; /* ← 文字の色 */
	margin: 0 auto;
	padding: 0 5%;
	text-align: left;
}

#main .main_section .float { /* 左に写真、右にテキストが入っている枠全体の設定 */
	overflow: hidden;
	width: 100%;
	margin-bottom: 10px;
	padding: 0;
}

#main .main_section .float .float_left { /* 左に写真、右にテキストが入っている枠の左側の枠の設定 */
	float: left;
	width: 300px;
}

#main .main_section .float .float_right { /* 左に写真、右にテキストが入っている枠の右側の枠の設定 */
	float: right;
	width: 380px;
}

#main .main_section .fa { /* メインメニューの中で使うアイコン（フォントオーサム）の設定 */
	margin-right: 10px; /* ← アイコンが文字とくっつかないようにするための右の余白 */
}

/*■■■■■ メインメニューここまで ■■■■■*/





/*■■■■■ レスポンスデバイス（お問い合わせボタン）ここから ■■■■■*/

#main .r-devise { /* お問い合わせボタン2つを囲っている枠 */
	width: 100%;
	height: auto;
	margin: -20px 0 0 0;
	padding: 0 0 20px 0;
	overflow: hidden;
	letter-spacing: 0.02em;
}

#main .r-devise a:hover { /* お問い合わせボタンにカーソルを乗せてもリンクの下線が表示されないようにする設定 */
	text-decoration: none;
}

#main .r-devise .r_left { /* 電話ボタンの設定 */
	float: left;
	width: 300px; /* ← 電話ボタンの横幅 */
	max-width: 300px;
	height: auto; /* ← 電話ボタンの縦幅 */
	background-color: #CE3E39; /* ← 電話ボタン全体の背景色 */
	border-radius: 5px; /* ← 電話ボタンの角を丸くする設定 */
	margin: 0; /* ← 電話ボタンの外側の余白 */
	padding: 15px; /* ← 電話ボタンの内側の余白 */
	display: block;
	transition: all 0.2s;
}

#main .r-devise .r_left .r_text { /* 電話ボタンのタイトル文字の設定 */
	width: 100%;
	text-align: center; /* ← 文字を中央寄せにする指定 */
	font-size: 18px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 1.5em; /* ← 文字の行間（上下）の幅 */
}

#main .r-devise .r_left .r_tel { /* 電話ボタンの電話番号の設定 */
	width: 100%;
	text-align: center;
	font-size: 28px;
	color: #ffffff;
	margin: 0;
	padding: 5px 0;
	line-height: 1.5em;
}

#main .r-devise .r_left .r_time { /* 電話ボタンの受付時間文字の設定 */
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

#main .r-devise .r_right { /* メールフォームボタンの設定 */
	float: right;
	width: 300px; /* ← メールフォームボタンの横幅 */
	max-width: 300px;
	height: auto; /* ← メールフォームボタンの縦幅 */
	background-color: #EE8373; /* ← メールフォームボタン全体の背景色 */
	border-radius: 5px; /* ← メールフォームボタンの角を丸くする設定 */
	margin: 0; /* ← メールフォームボタンの外側の余白 */
	padding: 15px; /* ← メールフォームボタンの内側の余白 */
	display: block;
	transition: all 0.2s;
}

#main .r-devise .r_right .r_text { /* メールフォームボタンのタイトル文字の設定 */
	width: 100%;
	text-align: center; /* ← 文字を中央寄せにする指定 */
	font-size: 18px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 1.5em; /* ← 文字の行間（上下）の幅 */
}

#main .r-devise .r_right .r_tel { /* メールフォームボタンの24時間受付の文字の設定 */
	width: 100%;
	text-align: center;
	font-size: 28px;
	color: #ffffff;
	margin: 0;
	padding: 5px 0;
	line-height: 1.5em;
}

#main .r-devise .r_right .r_time { /* メールフォームボタンの返信内容文字の設定 */
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

#main .r-devise .r_left img { /* 電話ボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

#main .r-devise .r_right img { /* メールフォームボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

#main .r-devise .r_left:hover { /* 電話ボタンにカーソルを乗せたら薄く白くなる設定 */
	opacity: 0.7;
}

#main .r-devise .r_right:hover { /* メールフォームボタンにカーソルを乗せたら薄く白くなる設定 */
	opacity: 0.7;
}

/*■■■■■ レスポンスデバイス（お問い合わせボタン）ここまで ■■■■■*/





/*■■■■■ 個別ページの画像（個別ページのメインビジュアル）の設定ここから ■■■■■*/

#main .main_section img.page_visual {
	width: 100%;
	height: auto;
	max-width: 700px;
	margin: 30px auto 50px;
	display: block;
	vertical-align: baseline;
}

/*■■■■■ 個別ページの画像（個別ページのメインビジュアル）の設定ここまで ■■■■■*/





/*■■■■■ 商品ページの設定ここから ■■■■■*/

#main .main_section #commo { /* ← 商品ページ全体の設定 */
	width: 100%;
	height: auto;
	text-align: center;
}

#main .main_section #commo article { /* 商品1つ1つを囲っている枠の設定 */
	width: 49%;
	height: auto;
	margin-bottom: 50px;
	vertical-align: top;
	display: inline-block;
}

#main .main_section #commo article a img { /* 商品画像の設定 */
	width: 100%;
	height: auto;
	max-width: 200px;/* ← 最大で200pxまで表示させる設定 */
	display: block;
	margin: 30px auto;
	transition: all 0.2s;
}

#main .main_section #commo article a img:hover { /* 商品画像にマウスが乗ったときの設定 */
	opacity: 0.7;
}

#main .main_section #commo article h2.commo_h2 { /* 商品タイトルの設定 */
	width: 95%;
	margin-bottom: 20px; /* ← 商品タイトルの文字の下の余白 */
	font-weight: normal; /* ← 商品タイトルの文字の太さ */
	font-size: 18px; /* ← 商品タイトルの文字の大きさ */
	text-align: left; /* ← 商品タイトルの文字の位置設定（ここでは左寄せに設定してあります） */
	border: none; /* ← 商品タイトルの下の下線を非表示にしている設定 */
}

#main .main_section #commo article h2.commo_h2 a { /* リンクされている商品タイトルの設定 */
	width: 95%;
	margin: 0 auto;
	padding: 0;
}

#main .main_section #commo article p { /* 商品の説明文（テキスト）の設定 */
	width: 90%;
	margin: 0;
	padding: 0;
	font-size: 18px; /* ← 商品説明文の文字の大きさ */
	line-height: 1.8em;  /* ← 文字の行間の設定 */
	letter-spacing: 0.02em; /* ← 文字間の設定 */
	text-align: left; /* ← 商品説明文の文字の位置設定（ここでは左寄せにしてあります） */
}

/*■■■■■ 商品ページの設定ここまで ■■■■■*/





/*■■■■■ お問い合わせフォームの設定ここから ■■■■■*/

input[type="text"], /* 入力前に入力ボックスに表示させている薄いグレーの文字の設定 */
textarea {
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #ccc;
	font-family: "メイリオ", "Meiryo", sans-serif;
}

label, input, select, textarea { /* 入力項目、入力ボックス、問い合わせ内容入力部分の文字サイズの設定 */
	font-size: 16px;
}

#main .main_section .m_top { /* お問い合わせフォームの上部の説明文の設定 */
    width: 100%;
	margin: 30px 0;
	padding: 0;
	font-size: 18px;
}

#main .main_section p .f_sr { /* 電話番号の文字サイズ、色の設定 */
	color: #b20000;
	font-size: 28px;
	font-weight: bold;
}

#main .main_section .form_text { /* 「電話受付時間」のテキストの設定 */
	width: 90%;
	font-size: 20px;
	margin: 10px 0 50px;
	padding: 2% 5%;
	background-color: #42bdcb; /* ← 背景色の設定 */
	color: #fff; /* ← 文字の色の設定 */
}

#main .main_section .form_text i { /* 「電話受付時間」の電話マークの設定 */
	font-size: 20px;
	margin-right: 10px;
}

#main .main_section .c_label{ /* 項目名をクリック・タップしたとき入力ボックスに移動する設定 */
	display: block;
}

#main .main_section .tbl-layout { /* お問い合わせフォーム全体の枠の設定 */
	width: 100%;
	margin: 0 auto;
}

#main .main_section .tbl-layout dt,  /* お問い合わせフォーム内の項目、入力ボックスの余白の設定 */
#main .main_section .tbl-layout dd {
	padding: 0;
}

#main .main_section .tbl-layout dt { /* 入力項目のタイトル部分（お名前・フリガナなど）の設定 */
	font-weight: bold; /* 文字を太くする設定 */
	color: #333; /* 文字色の設定 */
}

#main .main_section .tbl-layout dt.f_dt { /* 入力フォーム全体を囲っている部分（上下の余白の調整） */
	margin: 0;
	padding: 0;
}

#main .main_section .tbl-layout dd { /* 入力ボックスの設定 */
	width: 100%;
	margin: 0 auto;
	padding: 5px 0 20px;
}

#main .main_section .tbl-layout dd select { /* お問い合わせ内容・住所などの選択ボックスの幅、文字サイズの設定 */
	width: 100%;
	padding: 10px;
	font-family: "メイリオ", "Meiryo", sans-serif;
}

#main .main_section .tbl-layout dd textarea { /* お問い合わせ内容を記入する一番下の大きなボックスの設定 */
	margin: 0;
	padding: 10px;
	color: #333;
}

#main .main_section .tbl-layout .t100 { /* 入力ボックス内の文字サイズや幅、高さの指定 */
	padding: 10px;
}

#main .main_section .tbl-layout .t50 { /* 3つある電話番号の各ボックスの設定 */
	width: 30%;
	padding:  1% 2%;
	margin-right: 1%;
}

#main .main_section #contact p.btn { /* 確認画面ボタンの枠の設定 */
	text-align: center;
	padding: 10px 0 30px;
}

#main .main_section #contact p.btn input { /* 確認画面に進むボタンの設定 */
	width: 200px;
	height: 50px;
	color: #333;
}

#main .main_section #contact .f_m { /* 「半角入力の指定」を伝えるテキストの設定 */
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#main .main_section #contact .kome { /* 入力必須の文字の設定 */
	font-weight: bold;
	color: #b20000;
}

#main .main_section #contact .any { /* 入力任意の文字の設定 */
	font-weight: bold;
	color: #265cff;
}

#main .main_section #contact dd p.q_t1 { /* アンケートの項目タイトルの設定 */
	width: 100%;
	margin: 0;
	padding: 5px 0 2px 0; /* ← 文字の内側の余白 */
}

#main .main_section #contact dd p.q_t { /* 2つ目以降のアンケートの項目タイトルの設定 */
	width: 100%;
	margin: 0;
	padding: 15px 0 2px 0; /* ← 文字の内側の余白 */
}

#main .main_section #contact .checkbox { /* アンケートのチェックボックスのテキストの設定 */
	font-size: 13px; /* ← 文字の大きさ */
	margin: 0 10px 0 5px; /* ← 文字の外側の余白 */
	vertical-align: top; /* ← チェックボックスと文字を揃えるための設定 */
}

/*■■■■■ お問い合わせフォームの設定ここまで ■■■■■*/





/*■■■■■ テーブルの設定ここから ■■■■■*/

#main .main_section table { /* テーブル全体の枠線を重ねて表示させる設定 */
	border-collapse: collapse;
}

#main .main_section #table_field { /* テーブル全体の設定 */
	width: 100%;
	margin: 0 auto;
}

#main .main_section #table_field caption { /* テーブルのキャプション（見出し）の設定 */
	width: 100%;
	font-size: 20px; /* ← 文字の大きさの設定 */
	font-weight: bold; /* ← 文字の太さの設定（ここでは太く設定してあります） */
	text-align: left; /* ← 文字の位置設定（ここでは左寄せに設定してあります） */
	margin-bottom: 15px; /* ← 文字の下の余白の設定 */
	padding: 0;
}

#main .main_section #table_field table.tb_d { /* テーブル1つ1つの設定 */
	width: 100%;
	margin: 30px auto 40px;
	font-size: 18px;
}

#main .main_section #table_field table tbody tr th.td_h { /* テーブルの見出しの部分（背景がグレーの部分）の設定 */
	width: 30%; /* ← テーブルの枠の幅の設定（ここでは30%にしてあります。幅を変更するときは数字を入力して%で変更してください） */
	margin: 0; /* ← テーブルの枠の外側の余白 */
	padding: 20px; /* ← テーブルの枠の中の内側の余白 */
	text-align: left; /* ← テーブルの枠の中の文字の位置設定（ここでは左寄せにしてあります） */
	border: 1px solid #dddddd; /* ← テーブルの枠線の太さ、種類（ここでは実線）、色の設定 */
	background-color: #eeeeee; /* ← テーブルの枠の中の背景色の設定 */
	font-size: 15px; /* ← テーブルの枠の中の文字の大きさ */
	font-weight: normal; /* ← テーブルの枠の中の文字の太さ（ここでは太くない設定をしてあります） */
	line-height: 1.8em; /* ← テーブルの枠の中の文字の行間 */
	letter-spacing: 0.02em; /* ← テーブルの枠の中の文字の間隔 */
	word-break: normal; /* ← 自動で改行してしまわないための設定 */
	word-wrap : break-word; /* ← 自動で改行してしまわないための設定 */
	overflow-wrap : break-word; /* ← 自動で改行してしまわないための設定 */
}

#main .main_section #table_field table tbody tr td.td_s { /* テーブルの内容の部分（背景が白の部分）の設定 */
	width: auto; /* ← テーブルの枠の幅の設定（ここではautoにしてあります。幅を変更するときは数字を入力して%で変更してください） */
	margin: 0; /* ← テーブルの枠の外側の余白 */
	padding: 20px; /* ← テーブルの枠の中の内側の余白 */
	text-align: left; /* ← テーブルの枠の中の文字の位置設定（ここでは左寄せにしてあります） */
	border: 1px solid #dddddd; /* ← テーブルの枠線の太さ、種類（ここでは実線）、色の設定 */
	background-color: #ffffff; /* ← テーブルの枠の中の背景色の設定 */
	font-size: 14px; /* ← テーブルの枠の中の文字の大きさ */
	line-height: 1.8em; /* ← テーブルの枠の中の文字の行間 */
	letter-spacing: 0.02em; /* ← テーブルの枠の中の文字の間隔 */
	word-break: normal; /* ← 自動で改行してしまわないための設定 */
	word-wrap : break-word; /* ← 自動で改行してしまわないための設定 */
	overflow-wrap : break-word; /* ← 自動で改行してしまわないための設定 */
}

#main .main_section #table_field > p { /* テーブルの下にあるテキストの設定 */
	width: 100%;
	font-size: 18px; /* ← 文字の大きさ */
	padding-bottom: 30px;
	line-height: 1.8em;
	letter-spacing: 0.02em; /* ← テーブルの枠の中の文字の間隔 */
	word-break: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

#main .main_section ul.t_ul { /* ← 「会社概要」の住所や役員など項目の設定 */
	text-align: left;
	margin: 10px 0;
	padding: 0;
}

#main .main_section ul li.t_li { /* ← 「会社概要」の住所や役員など項目の文字の設定 */
	margin: 0 auto;
	padding: 0;
	line-height: 2em;
}

/*■■■■■ テーブルの設定ここまで ■■■■■*/





/*■■■■■ Googleマップの設定ここから ■■■■■*/

#main .main_section .g_map {
	width: 99%;
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

#main .main_section .g_map iframe { /* ← ページ内でGoogleマップを表示させるための設定 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* ← Googleマップの幅の指定 */
	height: 100%; /* ← Googleマップの高さの指定 */
	margin: 0;
	border: none;
}

#main .main_section #table_field table tr td.td_s p.g_map_p { /* ← 「大きな地図で見る」のリンクの設定 */
	width: 100%; /* ← 文字全体の幅 */
	font-size: 14px; /* ← 文字の大きさ */
	text-align: left; /* ← 文字を左寄せ */
	margin: 10px 0 0 0; /* ← 文字の外側の余白 */
	padding: 0; /* ← 文字の内側の余白 */
}

/*■■■■■ Googleマップの設定ここまで ■■■■■*/





/*■■■■■ サイドメニューの設定ここから ■■■■■*/

#side {
	float: left;
	width: 280px; /* ← サイドメニュー全体の幅 */
	margin: 0;
	padding: 0;
}

#side aside { /* ← サイドメニューのカテゴリ1つ1つの設定（プロフィールやバナー、メニューなど） */
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#side aside a img { /* ← サイドメニューの画像の設定 */
	width: 100%;
	max-width: 280px; /* ← サイドメニューの画像の幅（ここでは最大で280pxで表示するように指定しています） */
	height: auto;
	transition: all 0.2s;
}

#side aside a img:hover { /* ← 画像にカーソルが乗ったとき白く透過する設定 */
	opacity: 0.7;
}

#side aside .side_title_profile { /* ← サイドメニューのプロフィールの設定 */
	margin: 0 0 30px; /* ← プロフィールタイトル文字の外側の上下の余白 */
	padding-bottom: 10px; /* ← プロフィールタイトル文字の下の内側の余白 */
	border-bottom: 4px solid #51814f; /* ← プロフィール（タイトル文字）の下線の設定（px:線の太さ・solid:線の種類・#42bdcb:線の色） */
	font-weight: bold; /* ← プロフィール（タイトル文字）の文字の太さ（ここでは太く指定してあります） */
	font-size: 18px; /* ← プロフィール（タイトル文字）の文字の大きさ */
}

#side aside .caption { /* ← プロフィールの代表挨拶（キャプション）の文字の設定 */
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 10px 0 15px;
}

#side aside .side_text { /* ← プロフィール説明文の設定 */
	font-size: 15px;
	line-height: 1.8em;
}
#side aside .p_continu { /* ← プロフィール説明文の「続きを読む」の設定 */
	font-size: 15px;
	text-align: right;
	padding: 10px 0;
}

#side aside .side_title_menu { /* ← 「サービス案内」「お役立ち情報」のタイトル文字の設定 */
	margin: 9px 0 10px;
	padding-bottom: 10px;
	border-bottom: 4px solid #51814f;
	font-weight: bold;
	font-size: 18px;
}

#side .box1 { /* ← 電話受付バナー、お問い合わせフォームのバナーを囲っている枠の設定 */
	width: 100%;
	height: auto;
	margin-bottom: 50px;
	text-align: center;
}

#side .box1 a #banner1 { /* ← 電話受付バナーの設定 */
	width: 255px;
	height: auto;
	margin-bottom: 30px; /* ← お問い合わせフォームのバナーの外側下の余白 */
	padding: 15px;
	background-color: #ce3e39; /* ← 電話受付バナーの背景色 */
	border-radius: 5px; /* ← 電話バナーの角を丸くする設定 */
	transition: all 0.2s;
}

#side .box1 a #banner2 { /* ← メールフォームのバナーの設定 */
	width: 255px;
	height: auto;
	margin-bottom: 30px;
	padding: 15px;
	background-color: #ee8373; /* ← メールフォームのバナーの背景色 */
	border-radius: 5px; /* ← メールフォームバナーの角を丸くする設定 */
	transition: all 0.2s;
}

#side .box1 a .side_box_text1 { /* ← 電話・メールのバナーの中に書かれているタイトル文字の設定 */
	font-size: 16px;
	color: #ffffff;
}

#side .box1 a .side_tel_mail { /* ← 電話・メールのバナーの中に書かれている電話番号、24時間受付文字の設定 */
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	margin: 0;
	padding: 5px 0;
	line-height: 1.5em;
}

#side .box1 a .side_box_text2 { /* ← 電話・メールのバナーの中に書かれている説明文の設定 */
	width: 100%;
	font-size: 14px;
	color: #ffffff;
	margin: 0 auto;
	line-height: 1.5em;
	text-align: center;
}

#side .box1 a #banner1:hover, /* ← バナーにカーソルを乗せたとき白く透過する設定 */
#side .box1 a #banner2:hover {
	opacity: 0.8;
}

#side .box1 a:hover { /* ← バナーにカーソルを乗せたときリンクの下に下線を表示させない設定 */
	text-decoration: none;
}


#side .box2 { /* ← 「サービス案内」や「お役立ち情報」のメニュー全体を囲っている枠の設定 */
	margin-bottom: 30px;
}

#side ul li {
	position: relative;
}

#side ul li a { /* ← サイドメニューのメニュー設定 */
	color: #555; /* ← 文字の色 */
	text-decoration: none;
	display: block;
	border-bottom: 1px solid #51814f; /* ← メニューの区切り線の色 */
	line-height: 1.6em; /* ← 行間の幅 */
	transition: all 0.2s; /* ← カーソルを乗せたとき柔らかく色が変化する動きの設定 */
	padding: 20px 40px 20px 10px;
	font-size: 15px;
}

#side .box2 ul li a:hover { /* ← サイドメニューのメニューにカーソルを乗せたときの設定 */
	background-color: #51814f; /* ← カーソルを乗せたときの背景色 */
	color: #ffffff; /* ← カーソルを乗せたときの文字の色 */
}

#side i.fa-angle-right { /* ← サイドメニューの矢印アイコン（フォントオーサム）の設定 */
	font-size: 20px; /* ← 矢印アイコンの大きさ */
	position: absolute;
	display: block;
	top: 21px;
	right: 10px;
}

/*■■■■■ サイドメニューの設定ここまで ■■■■■*/





/*■■■■■ フッターの設定ここから ■■■■■*/

footer {
	width: 100%; /* ← フッター全体の幅 */
	overflow: hidden;
	text-align: center; /* ← フッター内容の位置（ここでは中央寄せに設定してあります） */
	padding: 40px 0 30px; /* ← フッターの上下の内側の余白 */
	background-color: #51814f; /* ← フッター全体の背景色 */
}

footer #footermenu { /* ← 会社概要などのメニューの下の余白 */
	margin-bottom: 10px;
}

footer #footermenu li {
	display: inline;
	padding: 0 5px;
}

footer #footermenu li a {
	color: #ffffff; /* ← フッターメニューの文字の色 */
}

footer small { /* ← コピーライト（著作権:「ホームページの文章や画像を勝手にコピーして使ってはダメですよ」という記述）の設定 */
	color: #ffffff; /* ← コピーライトの文字の色 */
	font-weight: normal; /* ← コピーライトの文字の太さ */
	font-size: 16px; /* ← コピーライトの文字の大きさ */
}

footer small a { /* ← コピーライトの部分のホームページの名前の設定 */
	color: #ffffff; /* ← 文字の色 */
	font-weight: normal; /* ← 文字の太さ */
}

footer small a:hover { /* ← コピーライトの部分のリンクの設定 */
	color: #ffffff; /* ← リンクにカーソルが乗ったときの文字の色 */
	text-decoration: underline; /* ← リンクにカーソルが乗ったときの文字の下に下線が表示される設定 */
}

/*■■■■■ フッターの設定ここまで ■■■■■*/





/*■■■■■ 「ページトップへ戻る」ボタンの設定ここから ■■■■■*/

.page_top {
	display: none;
	position: fixed;
	bottom: 2%;
	right: 5%;
}

.page_top a {
	display: block;
	width: 90px; /* ← トップへ戻るボタンの横幅 */
	height: 45px; /* ← トップへ戻るボタンの縦幅 */
	text-align: center;
	color: #fff; /* ← 文字の色 */
	font-size: 12px; /* ← 文字の大きさ */
	text-decoration: none;
	line-height: 45px; /* ← 文字の行間 */
	background: rgba(00, 00, 00, 0.3); /* ← ボタンの背景色と透明度 */
	border-radius:5px; /* ← ボタンを角丸にする設定 */
}

/*■■■■■ 「ページトップへ戻る」ボタンの設定ここまで ■■■■■*/
/*■■■■■ パソコン、タブレット、スマートフォン全体の共通ここまで ■■■■■*/





/*■■■■■ タブレット用の設定ここから ■■■■■*/

@media only screen and (min-width:481px) and (max-width:1024px) {

/*■■■■■ タブレットヘッダー設定ここから ■■■■■*/

header {
	width: 100%; /* ← ヘッダー全体の幅 */
}

header h1 { /* ← プリヘッドの設定 */
	width: 100%;
	font-size: 14px; /* ← プリヘッドに書かれている文字の大きさ */
	font-weight: normal; /* ← 文字の太さ */
	text-align: center; /* ← 中央寄せの設定 */
	color: #ffffff; /* ← プリヘッドの文字の色 */
	line-height: 2.5em; /* ← 文字の行間の設定 */
	letter-spacing: 0.02em; /* ← 文字の間隔の設定 */
}

header .h_inner {
	width: 100%;
	height: auto;
	text-align: center;
}

header .top_tile {
	font-size: 36px; /* ← タブレットで見たときのホームページ名の文字の大きさ */
}

header img { /* ← タブレットで見たときのホームページの名前の画像の設定 */
	width: 100%;
	height: auto;
	max-width: 760px; /* ← ホームページの名前の画像の最大横幅の設定 */
	margin: 0 auto;
}

header .h_inner address { /* ← 電話番号、受付時間を囲っている枠の設定 */
	position: static;
	padding: 10px 0;
	font-size: 85%;
	text-align: center;
}

header .h_inner address .h_info1 a.tel { /* ← タブレットで見たときの電話番号の設定 */
	font-size: 28px;
}

header .h_inner address .h_info2 { /* ← タブレットで見たときの受付時間、定休日の文字の大きさ */
	font-size: 15px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 10px;
}

header .h_inner address a .info_form { /* ← タブレットで見たときの「お問い合わせはこちらをクリック」の設定 */
    width: 100%;
    font-size: 20px;
	margin: 20px auto 0;
	padding: 15px 0;
	border-radius: 0;
}

header .h_inner address a .info_form .fa.fa-caret-right { /* ← タブレットで見たときのお問い合わせにある矢印の設定 */
	font-size: 20px;
}

/*■■■■■ タブレットヘッダー設定ここまで ■■■■■*/





/*■■■■■ タブレットグローバルナビゲーションここから ■■■■■*/

nav#g_menu {
	width: 100%;
	overflow: hidden;
}

nav#g_menu ul {
	width: 100%;
}

nav#g_menu ul li {
	width: 50%;
	border-left: 1px solid #ffffff; /* ← タブレットで見たとき、グローバルメニューの左に白色の区切り線が入る設定 */
	border-bottom: 1px solid #ffffff; /* ← タブレットで見たとき、グローバルメニューの下に白色の区切り線が入る設定 */
	box-sizing: border-box;
	text-align: left;
	position: relative;
}

nav#g_menu ul li a {
	padding-left: 20px; /* ← グローバルメニューの左側に余白を入れている設定 */
}

nav#g_menu ul li a:hover {
	border-bottom: none;
}

nav#g_menu .fa-angle-right { /* ← グローバルナビメニューの右に表示させる矢印の設定 */
	position: absolute;
	top: 19px;
	right: 10px;
	font-size: 20px;
	display: block;
}

/*■■■■■ タブレットグローバルナビゲーションここまで ■■■■■*/





/*■■■■■ タブレットメインビジュアルここから ■■■■■*/

#main_visual {
	width: 100%;
	height: auto;
	margin: 40px auto;
}

#main_visual img {
	width: 100%;
	height: auto;
	border-radius: 0;
	border-radius: 0; /* ← タブレットの場合は、メインビジュアルの画像を角丸にしない設定（画面端まで表示させるため） */
}

/*■■■■■ タブレットメインビジュアルここまで ■■■■■*/





/*■■■■■ タブレットコンテンツここから（サイドメニュー、メインメニューを囲んでいる部分） ■■■■■*/

#contents {
	width: 95%; /* ← 文字が画面両端にくっつかないようにするための余白（可読性を高めるため） */
	margin-bottom: 50px;
}

/*■■■■■ タブレットコンテンツここまで（サイドメニュー、メインメニューを囲んでいる部分） ■■■■■*/





/*■■■■■ ■タブレットメインメニュー（記事を書くメインの部分）ここから ■■■■■*/

#main {
	float: none;
	width: 100%;
	margin: 0 auto 50px;
}

#main .main_section{ /* タブレットで見たときの記事1つ1つの設定 */
	padding-bottom: 10px;
}

#main .main_section h1 { /* タブレットで見たときの記事タイトル（大出し部分）の設定 */
	font-size: 26px;
	margin: 0 0 30px 0;
	padding-bottom: 10px;
}

#main .main_section h2 { /* タブレットで見たときの記事タイトル（中出し部分）の設定 */
	font-size: 24px;
	margin: 10px 0 30px 0;
	padding-bottom: 8px;
}

#main .main_section h3 { /* タブレットで見たときの記事タイトル（小出し部分）の設定 */
	font-size: 22px;
	margin: 10px 0 30px 0;
	padding-bottom: 8px;
}

#main .main_section p {
	font-size: 16px;
}

#main .main_section .photo1 { /* タブレットの場合も左に写真が入る設定 */
	max-width: 350px;
	height: auto;
	margin: 5px 20px 17px 0;
	float: left;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo2 { /* そのまま写真を入れる場合の設定（写真の下に文章がくる設定） */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 30px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo3 { /* 画像の下に説明文（キャプション）をつける場合の画像の設定 */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .caption { /* 画像の下の説明文（テキスト）の設定 */
	width: 90%;
	font-size: 14px; /* ← 文字の大きさ */
	margin: 0 auto;
	padding: 0 0 20px 0;
	text-align: left;
}

#main .main_section .float {
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
}

#main .main_section .float:last-child {
	margin: 20px 0 0 0;
}

#main .main_section .float .float_left {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

#main .main_section .float .float_right {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

#main .main_section .fa {
	margin-right: 10px;
}

/*■■■■■ タブレットメインメニュー（記事を書くメインの部分）ここまで ■■■■■*/





/*■■■■■ タブレットのレスポンスデバイス（お問い合わせボタン）ここから ■■■■■*/

#main .r-devise {
	width: 100%;
	margin: 0;
	padding: 10px 0 50px;
}

#main .r-devise .r_left { /* お問い合わせボタンの左側の枠 */
	float: none;
	width: 92%;
	max-width: 92%;
	height: auto;
	display: block;
	margin-bottom: 40px;
	padding: 3% 4%;
}

#main .r-devise .r_left .r_text { /* お問い合わせボタンの左側のタイトル文字の設定 */
	width: 100%;
	height: auto;
	font-size: 18px;
}

#main .r-devise .r_left .r_tel { /* お問い合わせボタンの左側の電話番号の設定 */
	width: 100%;
	height: auto;
	font-size: 32px;
}

#main .r-devise .r_left .r_time { /* お問い合わせボタンの左側の受付時間文字の設定 */
	width: 100%;
	height: auto;
	font-size: 14px;
}

#main .r-devise .r_right { /* お問い合わせボタンの右側の枠 */
	float: none;
	width: 92%;
	max-width: 92%;
	height: auto;
	display: block;
	margin: 0;
	padding: 3% 4%;
}

#main .r-devise .r_right .r_text { /* お問い合わせボタンの右側のタイトル文字の設定 */
	width: 100%;
	height: auto;
	font-size: 18px;
}

#main .r-devise .r_right .r_tel { /* お問い合わせボタンの右側の24時間受付の文字の設定 */
	width: 100%;
	height: auto;
	font-size: 28px;
}

#main .r-devise .r_right .r_time { /* お問い合わせボタンの右側の返信内容文字の設定 */
	width: 100%;
	height: auto;
	font-size: 14px;
}

#main .r-devise .r_left img { /* 電話ボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

#main .r-devise .r_right img { /* メールフォームボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

/*■■■■■ タブレットのレスポンスデバイス（お問い合わせボタン）ここまで ■■■■■*/





/*■■■■■ タブレット個別ページの画像（個別ページの上部にある画像）の設定ここから ■■■■■*/

#main .main_section img.page_visual {
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 30px auto 40px;
	display: block;
	vertical-align: baseline;
}

/*■■■■■ タブレット個別ページの画像（個別ページのメインビジュアル）の設定ここから ■■■■■*/





/*■■■■■ タブレット商品ページのレイアウトここから ■■■■■*/

#main .main_section #commo {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

#main .main_section #commo article {
	width: 49%;
	display: inline-block;
}

#main .main_section #commo article a img { /* タブレットで見たときの商品画像の設定 */
	max-width: 200px; /* ← 画像の大きさを変えるときに変更する */
}

#main .main_section #commo article .commo_h2 {
	width: 100%;
	margin: 0;
	padding: 0;
}

#main .main_section #commo article h2 a { /* リンクされている商品タイトルの設定 */
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 16px;
}

#main .main_section #commo article p { /* 商品説明文の設定 */
	font-size: 16px;
}

/*■■■■■ タブレット商品ページのレイアウトここまで ■■■■■*/





/*■■■■■ タブレットテーブルここから ■■■■■*/

#main .main_section #table_field {
	width: 100%;
	margin: 0 auto;
}

#main .main_section #table_field caption { /* テーブルのタイトル説明（キャプション）の設定 */
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	padding: 0;
}

#main .main_section #table_field table.tb_d {
	width: 100%;
	margin: 20px auto 0;
	padding: 0;
	word-break: break-all;
	overflow-wrap: break-word;
	border-collapse: collapse;
table-layout: fixed;
}

#main .main_section #table_field table tbody tr th.td_h { /* テーブルの見出し（背景がグレーの部分）の設定 */
	width: 96%;
	display: block;
	text-align: left;
	margin-bottom: -1px;
	padding: 2%;
}

#main .main_section #table_field table tbody tr td.td_s { /* テーブルの内容（背景が白の部分）の設定 */
	width: 96%;
	display: block;
	text-align: left;
	margin-bottom: -1px;
	padding: 2%;
}

#main .main_section #table_field p { /* テーブルの中に書かれている文字サイズの設定 */
	font-size: 16px;
}

#main .main_section .g_map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 1% 0;
}

#main .main_section #table_field table tr {
	width: 100%;
	text-align: center;
	display: block;
	margin: 0 auto;
}

#main .main_section #table_field table th {
	width: 100%;
	text-align: center;
	display: block;
	margin: 0 auto;
	padding: 0;
	line-height: 3em;
}

#main .main_section #table_field table tbody tr td.td_s:last-child {
	margin-bottom: 30px;
}

/*■■■■■ タブレットテーブルここまで ■■■■■*/





/*■■■■■ タブレットGoogleマップの設定ここから ■■■■■*/

#main .main_section #table_field table tbody tr td.td_s p.g_map_p { /* ← 「大きな地図で見る」のリンクの設定 */
	width: 100%; /* ← 文字全体の幅 */
	font-size: 14px; /* ← 文字の大きさ */
	text-align: left; /* ← 文字を左寄せ */
	margin: 10px 0 0 0; /* ← 文字の外側の余白 */
	padding: 0; /* ← 文字の内側の余白 */
}

/*■■■■■ タブレットGoogleマップの設定ここまで ■■■■■*/





/*■■■■■ ■タブレットお問い合わせフォームの設定ここから ■■■■■*/

#main .main_section .m_top { /* お問い合わせフォームの説明文の設定 */
    width: 100%;
	margin: 30px 0;
	padding: 0;
	font-size: 16px;
}

#main .main_section p .f_sr { /* 電話番号の文字サイズや色の設定 */
	color: #b20000;
	font-size: 24px;
	font-weight: bold;
}

#main .main_section .form_text { /* 「電話受付時間」のテキストの設定 */
	width: 90%;
	font-size: 18px;
	margin: 10px 0 50px;
	padding: 2% 5%;
	background-color: #42bdcb;
	color: #fff;
	text-align: center;
}

/*■■■■■ タブレットお問い合わせフォームの設定ここまで ■■■■■*/





/*■■■■■ タブレットサイドメニューここから ■■■■■*/

#side {
	width: 100%;
	margin-top: -50px;
	padding-bottom: 40px;
}

#side aside .side_title_profile { /* ← タブレットで見たときのサイドメニューのプロフィール（タイトル）の設定 */
	margin: 9px 0 30px;
	padding-bottom: 10px;
	font-weight: bold;
	font-size: 22px; /* ← タイトル名の文字の大きさ */
}

#side aside a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	transition: all 0.2s;
}

#side aside .caption { /* ← プロフィールの代表挨拶（キャプション）の文字の設定 */
	font-size: 16px;
	margin: 0;
	padding: 20px 0 10px;
}

#side aside .side_text { /* ← プロフィールの説明文の設定 */
	font-size: 16px;
	line-height: 1.8em;
}

#side aside .p_continu {
	font-size: 16px;
	text-align: right;
	padding: 10px 0;
}

#side .box1 {
	width: 100%;
	margin: 0;
	padding: 30px 0;
	text-align: center;
	letter-spacing: 0.02em;
}

#side aside a img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

#side .box1 a #banner1 { /* ← タブレットで見たときのバナー（上）の設定 */
	float: none;
	width: 92%;
	height: auto;
	display: block;
	margin: 0 0 30px 0;
	padding: 3% 4%;
}

#side .box1 a #banner2 { /* ← タブレットで見たときのバナー（下）の設定 */
	float: none;
	width: 92%;
	display: block;
	margin: 0;
	padding: 3% 4%;
}

#side .box1 a .side_box_text1 { /* ← タブレットで見たときのバナーの中に書かれているタイトル文字の設定 */
    width: 100%;
	font-size: 18px;
}

#side .box1 a .side_tel_mail { /* ← タブレットで見たときのバナーの中に書かれている電話番号と24時間受付文字の設定 */
	font-size: 32px;
}

#side .box1 a .side_box_text2 { /* ← タブレットで見たときのバナーの中に書かれている説明文の設定 */
	width: 100%;
	font-size: 14px;
}

#side aside .side_title_menu { /* ← タブレットで見たときの「サービス案内」「お役立ち情報」のタイトル文字の設定 */
	margin: 9px 0 10px;
	padding-bottom: 10px;
	font-weight: bold;
	font-size: 22px; /* ← タイトル名の文字の大きさ */
}

#side ul li a {
	font-size: 16px;
	line-height: 1.5em;
	padding: 15px 15px 15px 10px;
}

#side i.fa-angle-right { /* ← サイドメニューの矢印アイコン（フォントオーサム）の設定 */
	font-size: 20px; /* ← 矢印アイコンの大きさ */
	position: absolute;
	display: block;
	top: 17px;
	right: 10px;
}

/*■■■■■ タブレットサイドメニューここまで ■■■■■*/





/*■■■■■ ■タブレットフッターここから ■■■■■*/

footer {
	width: 100%;
}

footer #footermenu {
	width: 95%;
	display: block;
	margin: 0 auto 2%;
}

footer small {
	width: 95%;
	font-size: 0.8em;
	display: block;
	margin: 0 auto;
	line-height: 1.5em;
	padding-bottom: 2%;
}

/*■■■■■ タブレットフッターここまで ■■■■■*/





/*■■■■■ ■タブレットバナーの非表示設定ここから（タブレットの場合、お問い合わせページにバナーを表示させない設定） ■■■■■*/

body#form #side aside.box1 {
	display: none;
}

/*■■■■■ タブレットバナーの非表示設定ここまで ■■■■■*/
}
/*■■■■■ タブレット用の設定ここまで■ ■■■■■*/





/*■■■■■ スマートフォン用の設定ここから ■■■■■*/

@media only screen and (max-width : 480px) {
	
/*■■■■■ スマートフォンヘッダーここから ■■■■■*/

header h1 { /* ← プリヘッドの設定 */
	width: 96%;
	font-size: 14px;
	padding: 2%;
}

header .h_inner { /* ← スマートフォン用のホームページ名と電話番号が入る部分の幅 */
	width: 100%;
	text-align: center;
	margin: 8px auto 12px;
}

header .h_inner .top_title { /* ← スマートフォン用のホームページ名の文字の設定 */
	font-size: 130%;
	position: static;
	margin: 10px 0
}

header img { /* ← スマートフォン用のホームページの名前の画像の設定 */
    width: 95%;
	height: auto;
	margin: 5px auto 0;
}

header .h_inner address { /* ← スマートフォン用の電話番号と受付時間の部分の設定 */
	position: static;
	padding: 0;
}

header .h_inner address a.tel .h_info1 { /* ← スマートフォンで見たときの電話番号の設定 */
	margin-top: 10px;
	font-size: 22px;
}

header .h_inner address .h_info2 { /* ← スマートフォン用の受付時間の部分の設定 */
	font-size: 12px;
	line-height: 1.5em;
	margin: 0 auto;
	text-align: center;
}

header .h_inner address a.tel .h_info1 i.fa.fa-phone-square { /* ← スマートフォン用のヘッダー内にある電話マークの設定 */
	font-size: 22px;
	margin-right: 10px;
}

header .h_inner address a .info_form { /* ← 「お問い合わせはこちらをクリック」の設定 */
    width: 96%;
    font-size: 16px;
	margin: 15px auto 20px;
	padding: 2%;
	border-radius: 0;
}

header .h_inner address a .info_form .fa.fa-caret-right { /* ← お問い合わせにある矢印の設定 */
	font-size: 15px;
}

/*■■■■■ スマートフォンヘッダーここまで ■■■■■*/






/*■■■■■ スマートフォングローバルメニューここから ■■■■■*/
nav#g_menu {
	height: auto;
	overflow: hidden;
	border-bottom: none;
}

nav#g_menu ul {
	width: auto;
}

nav#g_menu ul li {
	width: 50%;
	box-sizing: border-box;
	border-left: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	text-align: left;
	position: relative;
	padding: 0;
}

nav#g_menu ul li a {
	height: 50px;
	font-size: 15px;
	margin: -10px 0 0 0;
	padding: 0 0 0 8px;
}

nav#g_menu .fa-angle-right {
	position: absolute;
	top: 14px;
	right: 7px;
	font-size: 12px;
	display: block;
}

/*■■■■■ スマートフォングローバルメニューここまで ■■■■■*/





/*■■■■■ スマートフォンメインビジュアルここから ■■■■■*/

#main_visual {
	width: 100%;
	height: auto;
	margin: 25px auto;
}

#main_visual img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/*■■■■■ スマートフォンメインビジュアルここまで ■■■■■*/





/*■■■■■ スマートフォンコンテンツここから（サイドメニュー、メインメニューを囲んでいる部分） ■■■■■*/

#contents {
	width: 95%;
	margin: 30px auto 50px;
	padding: 0;
}

/*■■■■■ スマートフォンコンテンツここまで（サイドメニュー、メインメニューを囲んでいる部分） ■■■■■*/





/*■■■■■ ■スマートフォンメインメニューここから ■■■■■*/

#main, #side {
	float: none;
	width: 100%;
}

#main {
	margin: 0;
	padding: 0;
}

#main .main_section {
	width: 100%;
	margin: 0;
	padding: 0;
}

#main .main_section h2 { /* スマートフォンで見たときの記事タイトル（中見出し部分）の設定 */
	font-size: 18px;
	margin: 20px 0 25px;
}

#main .main_section h3 { /* スマートフォンで見たときの記事タイトル（小見出し部分）の設定 */
	font-size: 17px;
	margin: 20px 0 25px;
}

#main .main_section p { /* スマートフォンで見たときの文字のサイズ設定 */
	font-size: 0.90em;
	padding-bottom: 20px;
}

#main .main_section .photo1 { /* スマートフォンで見たときのメインメニュー1の画像の設定 */
	width: 100%;
	max-width: 150px;
	height: auto;
	margin: 5px 15px 10px 0;
	float: left;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo2 { /* スマートフォンで見たときのメインメニュー2の画像の設定 */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 20px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .photo3 { /* スマートフォンで見たときのメインメニュー3の画像の設定 */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
	padding: 0;
	vertical-align: bottom;
	display: block;
}

#main .main_section .caption { /* 画像の下の説明文（テキスト）の設定 */
	width: 90%;
	font-size: 12px;
	margin: 0 auto 20px;
	padding: 0 5%;
	text-align: left;
}

#main .main_section .float {
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
}

#main .main_section .float:last-child {
	margin: 20px 0 0 0;
}

#main .main_section .float .float_left {
	float: none;
	width: 100%;
	height: auto;
	display: block;
}

#main .main_section .float .float_right {
	float: none;
	width: 100%;
	height: auto;
	display: block;
	padding: 0;
}

/*■■■■■ スマートフォンメインメニューここまで ■■■■■*/





/*■■■■■ スマートフォンのレスポンスデバイス（お問い合わせボタン）ここから ■■■■■*/

#main .r-devise {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 10px 0 50px;
	display: block;
}

#main .r-devise .r_left { /* お問い合わせボタンの左側の枠 */
	float: none;
	width: 92%;
	max-width: 92%;
	height: auto;
	display: block;
	margin-bottom: 20px;
	padding: 3% 4%;
}

#main .r-devise .r_left .r_text { /* お問い合わせボタンの左側のタイトル文字の設定 */
	width: 100%;
	height: auto;
	font-size: 16px;
}

#main .r-devise .r_left .r_tel { /* お問い合わせボタンの左側の電話番号の設定 */
	width: 100%;
	height: auto;
	font-size: 24px;
}

#main .r-devise .r_left .r_time { /* お問い合わせボタンの左側の受付時間文字の設定 */
	width: 100%;
	height: auto;
	font-size: 13px;

}

#main .r-devise .r_right { /* お問い合わせボタンの右側の枠 */
	float: none;
	width: 92%;
	max-width: 92%;
	height: auto;
	display: block;
	margin: 0;
	padding: 3% 4%;
}

#main .r-devise .r_right .r_text { /* お問い合わせボタンの右側のタイトル文字の設定 */
	width: 100%;
	height: auto;
	font-size: 16px;
}

#main .r-devise .r_right .r_tel { /* お問い合わせボタンの右側の24時間受付の文字の設定 */
	width: 100%;
	height: auto;
	font-size: 24px;
}

#main .r-devise .r_right .r_time { /* お問い合わせボタンの右側の返信内容文字の設定 */
	width: 100%;
	height: auto;
	font-size: 13px;
}

#main .r-devise .r_left img { /* 電話ボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

#main .r-devise .r_right img { /* メールフォームボタンの画像の設定 */
	max-width: 100%; /* 最大横幅の指定 */
	height: auto;
}

/*■■■■■ スマートフォンのレスポンスデバイス（お問い合わせボタン）ここまで ■■■■■*/





/*■■■■■ ■スマートフォン個別ページのメイン画像の設定ここから ■■■■■*/

#main .main_section img.page_visual {
	width: 100%;
	height: auto;
	margin: 0 auto 25px;
	display: block;
	vertical-align: baseline;
}

/*■■■■■ スマートフォン個別ページのメイン画像の設定ここまで ■■■■■*/





/*■■■■■ ■スマートフォン商品ページのレイアウトここから ■■■■■*/

#main .main_section #commo {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

#main .main_section #commo article {
	width: 100%;
	display: block;
}

#main .main_section #commo article a img { /* スマートフォンで見たときの商品画像の設定 */
	max-width: 150px; /* ← 画像の大きさを変えるときに変更する */
}

#main .main_section #commo article .commo_h2 {
	width: 100%;
	margin: 0;
	padding: 0;
}

#main .main_section #commo article h2 a {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 15px;
}

#main .main_section #commo article p {
	font-size: 15px;
}

/*■■■■■ スマートフォン商品ページのレイアウトここまで ■■■■■*/





/*■■■■■ スマートフォンお問い合わせここから ■■■■■*/

label, input, select, textarea { /* 入力項目、入力ボックス、問い合わせ内容入力部分の文字サイズの設定 */
	font-size: 13px;
}

#main .main_section .m_top { /* お問い合わせフォームの説明文の設定 */
    width: 100%;
	font-size: 15px;
	margin: 20px 0;
	padding: 0;
}

#main .main_section p .f_sr { /* 電話番号の文字サイズや色の設定 */
	font-size: 17px;
}

#main .main_section .form_text { /* 「電話受付時間」のテキストの設定 */
	width: 90%;
	font-size: 15px;
	margin: 10px 0 30px;
	padding: 3% 5%;
	background-color: #42bdcb;
	color: #fff;
	line-height: 1.8em;
}

#main .main_section .tbl-layout dt { /* 入力項目のタイトル部分（お名前・フリガナなど） */
	font-weight: bold; /* 文字を太くする設定 */
	font-size: 13px; /* 文字の大きさの設定 */
	color: #333; /* 文字色の設定 */
}

#main .main_section .tbl-layout .t50 { /* 3つある電話番号の各ボックスの設定 */
	width: 27%;
	padding:  1% 2%;
	margin: 1% 1% 1% 0;
}

#main .main_section .tbl-layout dd span {
	font-size: 14px;
}

/*■■■■■ スマートフォンお問い合わせここまで ■■■■■*/





/*■■■■■ スマートフォンテーブルここから ■■■■■*/

#main .main_section #table_field {
	width: 100%;
	display: block;
	margin: 0 auto;
	word-break: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

#main .main_section #table_field caption {
	width: 100%;
	text-align: left;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.8em;
}

#main .main_section #table_field table.tb_d {
	width: 100%;
	margin: 10px auto;
	word-break: break-all;
	overflow-wrap: break-word;
	border-collapse: collapse;
table-layout: fixed;
}

#main .main_section #table_field table tbody tr th.td_h {/* テーブルの見出し（背景がグレーの部分）の設定 */
	width: 94%;
	display: block;
	text-align: left;
	margin-bottom: -1px;
	font-size: 14px; /* ← テーブルの枠の中の文字の大きさ */
	padding: 3%;
	line-height: 1.8em; /* ← テーブルの枠の中の文字の行間 */
}

#main .main_section #table_field table tbody tr td.td_s { /* テーブルの内容（背景が白の部分）の設定 */
	width: 94%;
	display: block;
	text-align: left;
	margin-bottom: -1px;
	font-size: 13px; /* ← テーブルの枠の中の文字の大きさ */
	padding: 3%;
	line-height: 1.8em; /* ← テーブルの枠の中の文字の行間 */
}

#main .main_section #table_field p { /* テーブルの下にある文字の設定 */
	font-size: 14px;
}

#main .main_section #table_field table tbody tr td.td_s:last-child {
	margin-bottom: 20px;
}

/*■■■■■ スマートフォンテーブルここまで ■■■■■*/





/*■■■■■ スマートフォンサイドメニューここから ■■■■■*/

#side {
	width: 100%;
	margin: 0 auto 10px;
}

#side aside a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	transition: all 0.2s;
}

#side aside .side_title_profile { /* ← スマートフォンで見たときのサイドメニューのプロフィール（タイトル）の設定 */
	margin-bottom: 20px;
	padding-bottom: 10px;
	font-size: 18px; /* ← タイトル名の文字の大きさ */
}

#side aside .caption { /* ← スマートフォンで見たときの代表挨拶（キャプション）の設定 */
	font-size: 14px; /* ← 文字の大きさ */
	margin: 0;
	padding: 20px 0 10px;
}

#side aside .side_text { /* ← スマートフォンで見たときのプロフィール文の設定 */
	font-size: 0.90em; /* ← 文字の大きさ */
	line-height: 1.8em;
}

#side aside .p_continu { /* ← スマートフォンで見たときの「続きを読む」の設定 */
	font-size: 15px; /* ← 文字の大きさ */
	text-align: right;
	padding: 10px 0;
}

#side .box1 {
	width: 100%;
	height: auto;
	margin: 0 0 30px 0;
	padding: 20px 0 0 0;
	letter-spacing: 0.02em;
}

#side aside a img {
	max-width: 100%;
	height: auto;
}

#side .box1 a #banner1 {
	width: 92%;
	height: auto;
	margin: 0 0 20px 0;
	padding: 4%;
}

#side .box1 a #banner2 {
	width: 92%;
	height: auto;
	margin: 0 0 40px 0;
	padding: 4%;
}

#side .box1 a .side_box_text1 { /* ← スマートフォンで見たときのバナーの中に書かれているタイトル文字の設定 */
	font-size: 16px;
}

#side .box1 a .side_tel_mail { /* ← スマートフォンで見たときのバナーの中に書かれている電話番号とメールの24時間受付文字の設定 */
	font-size: 26px;
}

#side .box1 a .side_box_text2 { /* ← スマートフォンで見たときのバナーの中に書かれている説明文の設定 */
	font-size: 13px;
}

#side aside .side_title_menu { /* ← スマートフォンで見たときの「サービス案内」「お役立ち情報」のタイトル文字の設定 */
	margin: 9px 0 10px;
	padding-bottom: 10px;
	font-size: 18px; /* ← タイトル名の文字の大きさ */
}

#side ul li a { /* ← スマートフォンで見たときのサイドメニューの設定 */
	font-size: 13px; /* ← サイドメニューの文字の大きさ */
	line-height: 1.3em;
	padding: 15px 15px 15px 10px;
}

#side i.fa-angle-right { /* ← サイドメニューの矢印アイコン（フォントオーサム）の設定 */
	font-size: 20px; /* ← 矢印アイコンの大きさ */
	position: absolute;
	display: block;
	top: 13px;
	right: 10px;
}

/*■■■■■ スマートフォンサイドメニューここまで ■■■■■*/





/*■■■■■ スマートフォンフッターここから ■■■■■*/

footer {
	width: 100%;
	margin: 0;
	padding: 20px 0 10px;
}

footer #footermenu {
	width: 95%;
	display: block;
	margin: 0 auto 10px;
}

footer small {
	width: 95%;
	font-size: 10px;
	display: block;
	margin: 0 auto 10px;
	line-height: 1.6em;
}

ul#footermenu li {
	padding: 0 2px;
}

ul#footermenu li a {
	font-size: 12px;
}

/*■■■■■ スマートフォンフッターここまで ■■■■■*/





/*■■■■■ スマートフォンページトップの設定ここから ■■■■■*/

.page_top {
	display: none;
	position: fixed;
	bottom: 2%;
	right: 5%;
}

.page_top a {
	display: block;
	width: 70px;
	height: 45px;
	text-align: center;
	font-size: 60%;
	text-decoration: none;
	line-height: 45px;
}

/*■■■■■ スマートフォンページトップの設定ここまで ■■■■■*/





/*■■■■■ スマートフォンバナーの非表示設定ここから（スマホの場合、お問い合わせページにバナーを表示させない設定） ■■■■■*/
body#form #side aside.box1 {
	display: none;
}
/*■■■■■ スマートフォンバナーの非表示設定ここまで ■■■■■*/
}
/*■■■■■* スマートフォン用の設定ここまで ■■■■■*/