@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #000;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 10px;
	padding-left: 10px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #06F;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ロールオーバーで半透明 */
a:link img {
	transition: 0.3s;
}
a:hover img {
	opacity: 0.7;
}

/* ~~ コンテナ ~~ */
#container {
	width: 100%;
	background: #FFF;
}
#container ul {
	margin-left: 2em;
}

/* ~~ ヘッダー ~~ */
#header {
	width: 100%;
}
#head_text, #head_navi {
	width: 930px;
	margin: auto;
}
#head_text h1 {
	font-size: medium;
	margin: 5px 0;
	background-color: #FFF;
	color: #000;
}
#head_main {
	width: 100%;
	height: auto;
	background-color: #09F;
	text-align: center;
	margin: 0;
	padding: 0;
	clear: both;
}
#head_main p {
	margin: 0;
	padding: 0;
}

/* ヘッダーナビ */
#head_navi {
	width: 100%;
	margin: auto;
	background-color: #CFF;
}
#head_navi ul {
	list-style-type: none;
	overflow: hidden;
	width: 1100px;
	margin: 0 auto;
}
#head_navi li {
	display: block;
	float: left;
	border-left: 1px solid #09F;
}
#head_navi li:last-child {
	border-right: 1px solid #09F;
}
#head_navi li a {
	display: block;
	padding: 0.5em;
	color: #03C;
	text-decoration: none;
}
#head_navi li a:hover {
	background-color: #09F;
	color: #FFF;
	font-weight: bold;
}

/* ヘッダーSNSアイコン */
#head_sns {
	clear: both;
	width: 840px;
	height: 100px;
	padding: 1em 0;
	margin: auto;
}
#head_sns p {
	float: left;
}

/* ~~ コンテンツ ~~ */
#content {
	width: 920px;
	padding: 10px 0;
	margin: auto;
}
#content_box {
	margin-bottom: 2em;
	clear: both;
}
#content_box p {
	margin-bottom: 0.5em;
	line-height: 180%;
}

/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}

/* ~~ フッター ~~ */
#footer {
	padding: 10px 0;
	background: #09F;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}

#footer_area {
	background-color: #333;
	color: #FFF;
}
#footer_wrap {
	width: 920px;
	height: auto;
	overflow: hidden;
	margin: auto;
}
#footer_area a {
	color: #9FF;
}
#footer_wrap #footer_l,
#footer_wrap #footer_r {
	float: left;
	width: 50%;
}
#footer_wrap #footer_l {
	margin-bottom: 1em;
}
#footer_tel {
	text-align: center;
	margin: 1em auto;
}
#footer_wrap #footer_l ul li {
	list-style-type: none;
	text-indent: -1.5em;
}

#footer_wrap h2 {
	background-color: #333;
	line-height: 120%;
	margin: 0.5em 0 0;
}
#footer_wrap h3 {
	color: #FFF;
}
#footer_wrap #tel a {
	color: #FF6;
	font-size: 36px;
	font-weight: bold;
	line-height: 120%;
}


/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* メールフォーム */
table#mailform {
	border: 3px double #999;
}
table#mailform th, table#mailform td {
	border: 1px solid #999;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 5px;
}
table#mailform th {
	width: 30%;
}
table#mailform td input[type="text"],
table#mailform td input[type="email"] {
	width: 100%;
}


/* 下部リンク非表示 */
#sub_navi {
	display: none;
}

/* トップへ戻る */
#pagetop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
}

/* パンくず */
#breadcrumb {
	margin: auto auto 0.5em;
}

/* ページ送りナビ部分 */
nav.pagination-container {
	width: 100%;
	margin: 0 0 1em;
}
nav.pagination-container ul.pagination {
	list-style-type: none;
	overflow: hidden;
}
nav.pagination-container li,
nav.pagination-container li a {
	display: block;
	float: left;
	margin: 0 1em;
	padding: 0;
	text-indent: -1em
}


/* 見出し */
h1, h2, h4, h5, h6 {
	background-color: #C00;
	color: #FFF;
	margin-bottom: 0.5em;
	line-height: 150%;
}
h3 {
	color: #03C;
	margin-bottom: 0.5em;
	line-height: 150%;
}

.center {
	text-align: center;
}
.red {
	color: #F00;
}
.blue {
	color: #03C;
}
.ore {
	color: #F60;
}
.fnt_s {
	font-size: small;
}
.fnt_m {
	font-size: medium;
}
.fnt_l {
	font-size: large;
}
.fnt_24px {
	font-size: 24px;
}
.fnt_30px {
	font-size: 30px;
}
.fnt_36px {
	font-size: 36px;
}
.fnt_42px {
	font-size: 42px;
}
.fnt_48px {
	font-size: 48px;
}
.txt_r {
	text-align: right;
}

/*---赤文字背景黄色------------*/
.yell_back {
	font-size: medium;
	font-weight: bold;
	color: #F00;
	background-color: #FF0;
	padding: 3px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.yellow_back01 {
	font-size: medium;
	background-color: #FF3;
	padding: 3px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.yell_back_xl {
	font-size: x-large;
	font-weight: bold;
	color: #F00;
	background-color: #FF0;
	padding: 3px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.yell_back_xxl {
	font-size: xx-large;
	font-weight: bold;
	color: #F00;
	background-color: #FF0;
	padding: 3px;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.yellow-box {
	background-color: #FFFFB5;
	padding: 10px;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0.5em;
	margin-left: 0em;
	border: 1px double #FF3333;
}

/*赤角丸ボックス*/
.red_radius {
	background: #ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: 2px solid #ff0000;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	overflow: hidden;
}



/* PCでは表示しない */
.pc_none {
	display: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* 会社概要テーブル */
.c_table th,
.c_table td {
	border: #999 solid 1px;
	padding: 10px;
}
.c_table th {
	width: 20%;
}

/* 料金テーブル */
.k_table th,
.k_table td {
	border-top: #999 solid 1px;
	border-bottom: #999 solid 1px;
	padding: 10px;
}
.k_table th {
	text-align: left;
}
.k_table td {
	text-align: right;
}
/* 料金テーブル 見出し中央寄せ */
.k_table .k_table_h1 {
	text-align: center;
}

/* 施工例テーブル */
.ex_table {
	background-color: #FCC;
}
.ex_table th,
.ex_table td {
	padding: 10px;
}
.ex_table th {
	text-align: left;
	font-weight: normal;
}

/* 施工例一覧テーブル */
dl.l_table {
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: #999 solid 1px;
	clear: both;
	margin-bottom: 1em;
	overflow: hidden;
}
.l_table dt,
.l_table dd {
	padding: 10px;
	float: left;
}
.l_table dt img {
	width: 100px;
}
.l_table dd {
	width: 80%;
}

/*じもと券用横並びbox */
#jimoto_box{
	display:flex;
	align-items: center;
	}
	
	#jimoto_box .box01{
	width:50%;
	}
#jimoto_box .box02{
	width:45%;
	}
	.fnt24{
		font-size:24px;
	font-weight:bold;}
.red_box {
	border: 2px double #CC0000;
	margin: 1%;
	padding: 1%;
}



/* スマホ表示 */
@media screen and ( max-width:768px ) {
	body {
		font-size: small;
	}

	/* フッターに重ならないようにする余白 */
	#footer_area {
		padding-bottom: 180px;
	}

	/* 全体を最大表示 */
	#content {
		width: 100%;
	}

	/* ヘッダー */
	#head_text {
		display: none;
	}
	#head_main {
		height: auto;
		background-color: transparent;
	}

	/* ヘッダーナビ */
	#head_navi ul {
		width: 100%;
		height: auto;
		overflow: hidden;
		border: none;
	}
	#head_navi ul li {
		width: 100%;
	}
	#head_navi ul li a {
		padding: 0;
		line-height: 250%;
	}
	#head_navi ul li a:link,
	#head_navi ul li a:visited,
	#head_navi ul li a:hover {
		background-color: #CFF;
		background-image: none;
		border-right-width: 0;
		border-bottom: solid #FFF 1px;
		font-size: medium;
		text-align: left;
		text-indent: 1em;
		font-weight: bold;
	}

	/* ヘッダーSNSアイコン */
	#head_sns {
		/*width: 100%;
		height: auto;*/
		display: none;
	}
	/*#head_sns p {
		float: none;
	}*/

	/* 画像表示最大化 */
	#header img, #content img,
	#content_box .tel-link a img {
		width: 100%;
		height: auto;
	}
	#content a img {
		width: 70%;
	}

	/* メールフォームのテーブル */
	table#mailform th {
		width: 50%;
	}
	table#mailform th {
		width: 150px;
		font-size: small;
	}
	table#mailform td {
		width: auto;
	}
	table#mailform td textarea {
		width: 100%;
		max-width: 150px;
		resize: vertical;
	}

	/* フッター　画面最前・固定 */
	#footer {
		width: 100%;
		font-size: small;
		position: fixed;
		float: right;
		left: 0;
		bottom: 0;
		z-index: 0;
	}

	#footer_area,
	#footer_wrap {
		width: 100%;
		margin: 0;
	}
	#footer_wrap #footer_l,
	#footer_wrap #footer_r {
		float: none;
		width: 100%;
	}
	/*#footer_wrap #footer_r {
		display: none;
	}*/
	#footer_tel {
		text-align: left;
	}

	/* フッターにサブナビ表示
		電話、メールフォーム、LINE、トップへ */
	#sub_navi {
		display: block;	/* 可視化 */
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: auto;
	}
	#sub_navi p {
		padding: 0;
		margin: 0;
		text-align: center;
	}
	#sub_navi img {
		width: 20%;
		height: auto;
	}
	#pagetop {	/* PC版を無理やり消してます */
		width: 0;
		height: 0;
		z-index: -5;
	}

	/* PCでは表示しない（スマホでは表示する） */
	.pc_none {
		display: block;
	}

	.sp_none {
		display: none;
	}




/*アコーディオン*/

.head_navi {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.head_navi a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
.head_navi label {
	display: block;
	position: relative;
	padding: 1em 1.5em;
	line-height: 1;
	color: #ffffff;
	background: #1b2538;
	cursor: pointer;
	font-weight: bold;
	font-size: medium;
}
.head_navi label::before {
	position: absolute;
	content: '▼';
	color: #ffffff;
	left: 0.5em;
	top: 35%;
}
.head_navi input {
	display: none;
}
.head_navi ul {
	margin: 0;
	padding: 0;
	background: #f4f4f4;
	list-style: none;
}
.head_navi li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}
/*リストが増えたらULごとに追加してください*/
#head_navi_bar:checked ~ #navi1 li {
	max-height: 46px;
	opacity: 1;
}



/*じもと券用横並びbox */
#jimoto_box{
	display:flex;
	align-items: center;
	}
	
	#jimoto_box .box01{
	width:60%;
	}
#jimoto_box .box02{
	width:40%;
	}


.red_box {
	border: 2px double #CC0000;
	margin: 1%;
	padding: 1%;
}

.fnt24{
	font-size:medium;
	font-weight:bold;}

}

@media (min-width: 751px) {
	/* 電話番号テキストリンクをPCで表示しない */
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}






.shake {
  animation: shake 0.5s infinite alternate;
}

@keyframes shake {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-10px);
  }
}