@charset "utf-8";
/* CSS Document */
body{
font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
font-size : 16px;
line-height : 190%;
margin : 0;
background-color : #eee;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}
.font115{
	font-size : 115%;
}
.font125{
	font-size : 125%;
}
.font135{
	font-size : 135%;
	line-height : 200%;
}
.font145{
	font-size : 145%;
	line-height : 200%;
}
.font_red{
	color : #c70808;
}
.font_white{
	color : #ffffff;
}
.font_blue{
	color : #0b4db4;
}
.marker_yellow{
	background-color : #ffff00;
}
.space_s{
	height : 10px;
}
.space_m{
	height : 20px;
}
.space_l{
	height : 40px;
}
.kaitou_click{
border: 1px solid #761f1f; color: #761f1f; border-radius: 5px;
padding : 0 5px;
margin-left : 5px;
font-size : 90%;
}
.kaitou_click:hover{
border: 1px solid #ffffff; color: #ffffff; border-radius: 5px;
}
.syousai_click{
border: 1px solid #0932a9; color: #0932a9; border-radius: 5px;
padding : 0 5px;
margin-left : 5px;
font-size : 90%;
}

.white_box{
	background-color : #ffffff;
	width : 100%;
	padding : 20px 0px;
}
.blue_box1{
	background-color : #01b6ef;
	width : 100%;
	padding : 0px 0px;
}
.blue_box2{
	background-color : #53acee;
	width : 100%;
	padding : 0px 0px;
	margin-top : -10px;
}
.blue_box3{
	background-color : #bae0fc;
	width : 100%;
	padding : 0px 0px;
}

.kaitou{
	width : 90%;
	background-color : #ffffff;
	border : 3px double #c7aa85;
	padding : 15px;
	margin : 0 auto;
}
.kaitou_title{
	font-size : 110%;
	color : #ffffff;
	border : 1px dotted #856f2b;
	padding : 7px;
	margin-bottom : 15px;
	background-color : #856f2b;
}
.image_area {
width: 200px;
display: block;
vertical-align: bottom;
}
.image_area2 {
width: 280px;
display: block;
vertical-align: bottom;
}
.image_area3 {
width: 160px;
display: block;
vertical-align: bottom;
}
.image_area4 {
width: 120px;
display: block;
vertical-align: bottom;
}
@media only screen and (min-width: 737px){
.image_right {
float: right;
margin: 0 0 21px 25px;
}
.image_left {
float: left;
margin: 0 25px 30px 0;
}
}
@media only screen and (max-width: 736px){
.image_right {
float: none;
margin: 25px auto;
}
.image_left {
float: none;
margin: 25px auto;
}
}
/*** レスポンシブテーブルデザイン ***/
.price{
  width:100%;
  border: 1px solid #bba560;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}
 
.price th{
  padding: 12px 12px 5px;
  border-top: solid 1px #ffffff;
  width: 70%;
  overflow: hidden;
  color: #000000;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
  background-color: #ffffff;
  vertical-align: middle;
}
 
.price td{
padding: 5px 10px;
text-align: center;
vertical-align: top;
color: #000000;
background-color: #ffffff;
border-top: dotted 0px #bd6e3f;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
vertical-align: middle;
}
 
@media (max-width: 640px){
.price{
  border: 1px solid #bba560;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}
.price th{
  width:93%;
  display:block;
  margin: 0 auto;
  border:none;
  border-radius: 3px;
	padding : 8px 15px;
}
.price td{
  display: list-item;
  width: 93%;
	padding : 8px 15px;
  border-top: none !important;
	background-color : #ffffff;
}
	ol{
		margin-left : -10px;
	}
}/* end */
.houhou_box{
	width : 96%;
	padding : 15px;
	margin : 10px auto;
	border : 1px dotted #555151;
	font-size : 90%;
	line-height : 170%;
	background-color : #ffffff;
}

#open01{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -320px;
    width: 640px;
    height: auto;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
}
.modal_window p{
	padding : 15px;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000;
}
 
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
    line-height: 160%;
    text-align: left;
}
 
 
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
 
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}

.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;
}
a.contact_btn {
	display: block;
	position: relative;
	width: 240px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size : 120%;
	background: #e3511d;
	border:1px solid #fff;
	overflow: hidden;
}
a.contact_btn:after {
	content:"";
	position: absolute;
	top: -100%;
	left: -100%;
	height: 100%;
	width: 270px;
	background : #fff;
	opacity: 0.2;
	transition: .4s;
}
a.contact_btn:hover:after {
	top: 0;
	left: 0;
}

/*コロナ対策用表示*/

a.contacttel_btn {
	display: block;
	position: relative;
	width: 240px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size : 120%;
	background: #ff7070;
	border:1px solid #fff;
	overflow: hidden;
}
a.contacttel_btn:after {
	content:"";
	position: absolute;
	top: -100%;
	left: -100%;
	height: 100%;
	width: 270px;
	background : #fff;
	opacity: 0.2;
	transition: .4s;
}
a.contacttel_btn:hover:after {
	top: 0;
	left: 0;
}

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width:641px){
	.footer_area{
		display: none;
}	
}

/*スマホ～641pxの幅サイズまで*/
@media screen and (max-width:640px){
	#footer{
		margin-bottom : 48px;
	}
.footer_area {
    position: fixed;
    bottom: -10px;
    left: 0;
    width: 100%;
	z-index: 10000;
}
.footer_area .footer_area_inner {
    position: relative;
    width: 100%;
    margin: 0px auto;
	padding-top : 3px;
}
.footer_area .footer_area_inner .footer_area_inner_btn {
    width: 100%;
    padding: 0;
    margin : 0 auto;
}
	.footer_area1{
		float : left;
		width : 50%;
	}
	.footer_area2{
		float : left;
		width : 50%;
	}
}