@charset "UTF-8";

body {
	margin: 0;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height:170%;
	 -webkit-text-size-adjust: 100%;
	font-size:1rem;
}
p {
margin:0;
padding:0;
text-align: justify;
text-justify: inter-ideograph;
}
section {
	margin:0;
	padding:0
}
.clearfix::after {
  content: "";
  display: block;
  clear: both
}
.clear { clear: both }
a {	text-decoration:none }
a,
a:visited,
a:hover,
a:active { color: inherit }

a.contact { color: #B58250 }
a.contact:hover { opacity: 0.7 }

.px15 {font-size:15px}
.px14 {font-size:14px}

/* サイト名 */
.site h1 {
	margin:0 0 5px 0}
.site	{
	margin: 15px 0;
}

/* サイト名 下線 */
.hbar {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	z-index: -1;
	margin-bottom:10px;
	border-bottom: solid 2px #dddddd}


/* トグルボタン */
button {
	display: none;
	padding: 6px;
	border: none;
	background-color: transparent;
	color: #888888;
	cursor: pointer;
}

button:focus {outline: none}
.bu {padding-bottom:18px}


/* menu */
.menu ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu li a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	color:#FFF;
	text-decoration: none;
	background-color:#4a9e00;
}

.menu li a:hover {background-color: #5fc900}

/* main1 */
.main1 h2 {
	font-size:1.1rem;
	border-bottom:solid 1px #ffc600;
	border-left:solid 18px #ffc600;
	padding:5px 0 5px 10px;
}
.main1 h3 {
	margin:10px 0 0 0;
	padding:0;
	font-size:16px
}

.fa-check-circle {
	color:#4A9E00;
	padding-right:10px
}
section .right {
	float:right;
	width:45%;
	text-align:right;
}
section .right div {
	margin-top:20px;
}
.right img {width:100%}

/* main2 */
.main2 h3{
	font-size:18px;
	background-color:#4a9e00;
	color:#FFF;
	margin:20px 0 10px ;
	padding:5px 10px;
}
.fa-square {
	padding-right:10px}

section .right-02 {
	float:right;
	width:45%;
	text-align:right;
	margin-top:20px;
}
.right-02 img {width:100%}

/* main1,main2 */
section .left {
	float:left;
	width:52%;
}

.bk-ul {
	background-color:#ababab;
	color:#FFF;
	padding-top:20px;
	padding-bottom:20px;
}

/* main3 */
.main3 {width:100%}
.main3 h3 {
	margin:25px 0 0 0;
	padding:0;
	font-size:17px;
}
.main3 ul{
	margin:10px 0 10px 10px;
	padding:0 0 0 20px;
	list-style:circle;
}

ul.non {
	list-style: none;
	margin:20px 0;
	padding:0;
}
.green {color:#4a9e00}

/* main4 */
.main4 {width:100%}
.red {
color:#F00;
margin:2px;
}
p.que {margin-top:20px}

/* main2,main3,main4 */
section .title{
	margin:0;
	padding:0;
	font-size:1.2rem;
	background:url(../images/line.png) bottom repeat-x;
}
.title img{
	vertical-align:middle;
	padding:0 15px 5px 5px;
}

/* --- フォームエリア --- */
form.contact {
width: 630px; /* フォームエリアの幅 */
margin:50px auto;
}
form.contact p {
margin-left:10px;
margin-bottom:10px;
}
/* --- テーブル --- */
form.contact table {
width: 100%; /* テーブルの幅 */
}
/* --- 見出しセル（th） --- */
form.contact th {
width: 40%; /* 見出しセルの幅 */
padding: 13px 8px; /* 見出しセルのパディング（上下、左右） */
text-align: left;
line-height: 130%;
}
/* --- 見出しセル内の補足テキスト --- */
form.contact td span.supplement {
font-size:0.8rem;
color:#666;
}
/* --- データセル（td） --- */
form.contact td {
padding: 13px 5px; /* データセルのパディング（上下、左右） */
}
/* --- フォーム部品 --- */
form.contact input,
form.contact select,
form.contact textarea {
margin-bottom: 2px; /* フォーム部品の下マージン */
border-radius: 3px;
border:#BBB 1px solid;
}
/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company, #section, #name, #email,#email2 {
width: 200px; /* フォーム部品の幅 */
}
#address {
width: 320px; /* フォーム部品の幅 */
}

/* --- （短めのテキスト入力欄） --- */
#tel, #fax{
width: 120px; /* フォーム部品の幅 */
}

#zip1, #zip2{
width: 40px; /* フォーム部品の幅 */
}
/* --- （複数行のテキスト入力欄） --- */
#message {
width: 350px; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
}

/* --- ボタン --- */
form.contact p.button {
margin: 20px 0 0; /* ボタンのマージン（上、左右、下） */
text-align: center;
}

/* --- 全角半角指定入力 --- */
.byte1 {
ime-mode:inactive;; /* 半角モード */
}
.byte2 {
ime-mode:active;; /* 全角モード */
}
/* --- 入力フォームの余白 --- */
input,textarea {
padding: 0px 5px;
}
/* --- 入力フォーム高さ指定 --- */
input {height:20px}



/* footer */
.copyright p {
	margin:10px;
	text-align:center;
	color:#666;
	font-size:14px}
.copyright img{
	vertical-align:middle;
	padding-left:10px;
	}


/* グリッド */
body	{display: grid;
	grid-template-columns:
		[left] minmax(20px, 1fr) [main] minmax(auto, 1000px) [main-end] minmax(20px, 1fr) [right];
	grid-template-rows:
		[head] auto [head] auto [main1] auto [main2] auto [main3] auto [main4] auto [foot] auto [bottom]}

.site	{grid-column-start: main;
	grid-row-start: head}

button	{grid-column-start: main;
	grid-row-start: head;
	justify-self: end;
	align-self: center}

.menu	{grid-column-start: main;
	grid-row-start: head;
	justify-self: end;
	align-self: center}

.main1	{grid-column-start: main;
	grid-row-start: main1;
	justify-self: start;
	margin-bottom: 40px}

.main2	{grid-column-start: main;
	grid-row-start: main2;
	justify-self: start;
	margin-bottom: 40px}

.main3	{grid-column-start: main;
	grid-row-start: main3;
	justify-self: start;
	margin-bottom: 40px}

.main4	{grid-column-start: main;
	grid-row-start: main4;
	justify-self: start;
	margin-bottom: 40px}

.copyright	{grid-column-start: main;
	grid-row-start: foot;
	margin: 10px 0}

.footbar {grid-column-start: left;
	grid-column-end: right;
	grid-row-start: foot;
	border-top:solid 2px #dddddd;
	z-index:-1;
}


/* ########### 1179px以下 ########### */
@media (max-width: 1000px) {

.site img {
	width:340px;
	height:auto;
}

}


/* ########### 767px以下 ########### */
@media (max-width: 767px) {

button	{display: block}
.site img {
	width:260px;
	height:auto;
}
.title img{
	width:35px;
	height:auto}

.menu	{grid-row-start: head 2;
	justify-self: stretch;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out}

.menu ul {flex-direction: column}
.main3 ul{margin-left:0}
.copyright img {
	width:25px;
	height:auto}

}


/* ########### 575px以下 ########### */
@media (max-width: 575px) {

section .left {
	width:100%;
}
section .right {
	width:100%;
}
section .right-02 {
	width:100%;
}

/* フォームエリア */
form.contact {
	width: 96%; /* フォームエリアの幅 */
}
#form {
	width:100%;
	table-layout:fixed;
}
#form th, #form td {
	text-align: left;
	width: 100%;
	display: block;
	padding: 6px 3px;
	border-top: none;
}
#message {
width: 300px; /* フォーム部品の幅 */
}
#address {
width: 300px; /* フォーム部品の幅 */
}
p.btn input { width: 10em; }

span.br {display:block}

h2.sp-px11 {font-size:11px}

}