@charset "utf-8";
/*
Theme Name: TOMIURA MARINE BOAT
Description: とみうらマリンボートのテンプレート
Version: 1.0
Author: Centaurus Graphics
Author URI: https://tomiura-marineboat.com
*/

/*basic*/

html {
font-family: "source-han-sans-japanese","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; 
font-size : 14px;
font-style: normal;
line-height : 1.5;
color:#000;
letter-spacing:0.1em;
}

*{margin:0;padding:0}
ul, ol { list-style : none}
img { vertical-align : middle}

a {
color:#22488f;
text-decoration:none;
outline: none;
font-weight: bold;
}
a:hover {
opacity: 0.5;
}
a:focus{
outline: none;	
}
h2{
font-family:"keifont",system-ui;
	src:url("../font/keifont.ttf") format('truetype');
	font-size:32px !important;
    letter-spacing:0.05em;
    line-height:1.5em;
    color:#22488f;
	font-weight: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root h2 {
        font-weight: 800;
    }
}

h3{
font-family:"keifont",system-ui;
	src:url("../font/keifont.ttf") format('truetype');
	font-size:24px !important;
    letter-spacing:0.05em;
    line-height:1.5em;
    color:#22488f;
	font-weight: normal;
}



@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root h3 {
        font-weight: 800;
    }
}




.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */


/*class*/
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.tal{text-align:left !important;}
.fl{float:left;}
.fr{float:right;}
.mb0{margin-bottom:0px !important;}
.mb8{margin-bottom:8px !important;}
.mb16{margin-bottom:16px !important;}
.mb1em{margin-bottom:1em !important;}
.mb20{margin-bottom:20px !important;}
.mb24{margin-bottom:24px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb80{margin-bottom:80px !important;}
.mr20{margin-right:20px !important;}
.ml0{margin-left:0px !important;}
.ml1em{margin-left:1em !important;}
.pb30{padding-bottom:30px !important;}
.mt5{margin-top:15px !important;}

/*base fontsize:12px*/
.size9{font-size:0.75em !important;}
.size10{font-size:0.833em !important;}
.size12{font-size:1em !important;}
.size14{font-size:1.167em !important;}
.size16{font-size:1.333em !important;}
.size18{font-size:1.5em !important;}
.size21{font-size:1.75em !important;}
.size24{font-size:2em !important;}
.size30{font-size:2.5em !important;}
.size40{font-size:3.333em !important;}
.size48{font-size:4em !important;}
.ls0{letter-spacing:0em !important;}
.bold{
	font-weight: bold;
}




.c_red{color: #ff0000 !important;}
.color_lightgray{color:#ccc;}
.color_gray{color:#999;}



header{
	position: relative;
}

.header_top{
	background-image: url("../images/bg_slidearea_top.png");
	background-position: center top;
	background-repeat: repeat-x;
	height: 80px;
	position: relative;
	z-index: 30;
}

.slide_area{
	margin-top: -80px;
	position: relative;
	z-index: 10;
}


.slide_area_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.slide_area_logo{
    width:536px;
}

.slide_area_logo img{
max-width: 100%;
height: auto;
}


.header_bottom{
	margin-top: -80px;
	background-image: url("../images/bg_slidearea_bottom.png");
	background-position: center top;
	background-repeat: repeat-x;
	height: 80px;
	position: relative;
	z-index: 40;
}

.home_content{
	padding-top: 80px;
}


.introduction_area{
	background-image: url("../images/bg_introduction_area.png");
	background-position: center;
	background-repeat: no-repeat;
	height: 222px;
	margin-bottom: 80px;
}

.introduction{
    text-align:center;
    font-family:"keifont",system-ui;
	src:url("../font/keifont.ttf") format('truetype');
	font-size:24px !important;
    letter-spacing:0.05em;
    line-height:1.5em;
    color:#22488f;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .introduction {
        font-weight: 800;
    }
}

.about_area{
	background-image: url("../images/bg_about_area.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}


.boat_area{
	background-image: url("../images/bg_boat_area.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}

.boat_area h3{
	margin-bottom: 20px;
}


.text_image_left{
    float:left;
    margin-right:40px;
    width:470px;
}

.text_image_left img{
    margin-bottom:0 !important;
}

.text_image_right{
    width:470px;
    text-align:left;
    float:right;
}


.option_area{
	background-image: url("../images/bg_option_area.png");
	background-position: center top;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}

/*price*/

.price_area{
    color:#302e2f;
    width:740px;
    margin:0 auto 40px auto;
}

section table { 
width: 100%; 
  border-collapse: separate;
  border-spacing: 6px;
}
section th, section td  { padding: 16px; border: 1px solid #dcd1bc; font-weight:bold; }
section th  { background: #dcd1bc; }
.demo01 th  { width: 40%; text-align: left; }
.demo01 td  { width: 40%; text-align: center; }



.caution_area{
	background-image: url("../images/bg_caution_area.png");
	background-position: center top;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}



.calendar_area{
	background-image: url("../images/bg_calendar_area.png");
	background-position: center top;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}


.access_area{
	background-image: url("../images/bg_access_area.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	margin-bottom: 80px;
}

.sns_area_top{
	background-image:url("../images/bg_sns_top.png");
	background-position: center top;
	background-repeat:repeat-x;
	padding: 40px 0 0 0;
}

.sns_area{
	color: #fff;
	background-image:url("../images/bg_sns_area.png");
	background-repeat:repeat;
	padding: 0;
}

.sns_area_bottom{
	background-image:url("../images/bg_sns_bottom.png");
	background-position: center bottom;
	background-repeat:repeat-x;
	padding: 0 0 40px 0;
	margin-bottom: 80px;
}



.box980{
    max-width:980px;
    margin:0 auto;
}






.google-maps {
position: relative;
padding-bottom: 20%; // これが縦横比
height: 0;
overflow: hidden;
margin-bottom:100px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}



.kinkyu{
	font-size: 18px;
	font-weight: bold;
	color: #ff0000;
	border: medium solid #ff0000;
	padding: 16px;
	text-align: left;
	margin: 0 auto 48px auto;
	
	
}


#tel_area {
    position: fixed;
    bottom: 50%;
    right: 20px;
	width: 189px;
	height: 67px;
	
}
#tel_area a {
	background-image: url("../images/btn_tel.png");
	background-repeat: no-repeat;
	display: block;
	width: 189px;
	height: 67px;
}

#tel_area a:hover {
	display: block;
	width: 189px;
	height: 67px;
	background-image: url("../images/btn_tel_over.png");
	background-repeat: no-repeat;
}


img .paypay {
   vertical-align: middle;
}




/*footer*/



.footer_top{
	background-image: url("../images/bg_footer_top.png");
	background-position: center top;
	background-repeat: repeat-x;
	text-align: center;
	padding-top: 38px;
	height: 148px;
}

.footer_area{
    margin:0 auto;
	text-align: center;
	background-color: #22488f;
	color: #fff;
	padding: 40px 0 40px 0;
    }

.footer_logo{
	margin-bottom: 24px;
}

.footer_guidance{
	font-family:"keifont",system-ui;
	src:url("../font/keifont.ttf") format('truetype');
	font-size:24px !important;
    letter-spacing:0.05em;
    color:#fff;
	margin-bottom: 0px;
}

.footer_regulations{
	font-size:12px !important;
    letter-spacing:0.05em;
    color:#fff;
}

.footer_regulations a{
	font-weight: normal;
	color: #fff;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .footer_guidance {
        font-weight: 700;
    }
}

.footer_tel{
	font-family:"keifont",system-ui;
	src:url("../font/keifont.ttf") format('truetype');
	font-size:72px !important;
    letter-spacing:0.05em;
    color:#fff;
	line-height: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .footer_tel {
        font-weight: 800;
    }
}

.footer_tel a {
color:#fff;
text-decoration:none;
outline: none;
}
.footer_tel a:hover {
opacity: 0.5;
}
.footer_tel a:focus{
outline: none;	
}

.footer_tel_time{
	margin-bottom: 16px;
	font-weight: bold;
}


.footer_address{
	margin-bottom: 40px;

}

.footer_address_copyright{
    font-size:12px;
    text-align:center;
}






/* 1000px- */
@media screen and (max-width : 1000px) {
    

h2{
	font-size: 24px !important;
}
	
	h3{
		font-size: 20px !important;
	}
	
.header_top{
	background-position: bottom;
	height: 40px;
}

.slide_area{
	margin-top: -40px;
}



.header_bottom{
	margin-top: -80px;
	height: 40px;
}

.home_content{
	padding-top: 40px;
}
    

.home_content{
	padding: 40px 20px 0 20px;
}
	
.kinkyu{
	font-size: 16px;
	}
	
.introduction_area{
	height: auto;
	margin-bottom: 40px;
}
	
	
 .introduction{
	 font-size: 20px !important;
   }
	
	
	.icon_area img{
		width: 80px;
	}
    

   
    
.slide_area_logo{
    width:320px;
}


.text_image_left{
    float:none;
    margin:0 auto 20px auto!important;
}



.text_image_right{
    float:none;
	margin:0 auto 0 auto!important;
}
	
	
/*price*/
.price_area{
    width:100%;
}


.google-maps {
position: relative;
padding-bottom: 40%; // これが縦横比
height: 0;
overflow: hidden;
margin-bottom:50px;
}
   
 
	
.access_area{
	margin-bottom: 0px;
}
 
 
.sns_area{
	padding: 20px 20px 0 20px;
	margin-bottom: 40px;
}

	
.sns_area_top{
	display: none;
}


.sns_area_bottom{
	display: none;
}


	
.footer_top{
	background-image: url("../images/bg_footer_top_s.png");
	background-position: center top;
	background-repeat: repeat-x;
	text-align: center;
	padding-top: 30px;
	height: 89px;
}
	
	.footer_top img{
		width: 106px;
	}
	
	
.footer_area{
	padding: 20px 0 20px 0;
    }

.footer_logo{
	margin-bottom: 24px;
}
	
	.footer_logo img{
		width: 400px;
	}

.footer_guidance{
	font-size:20px !important;
}

.footer_tel{
	font-size:56px !important;
}

.footer_address{
	margin-bottom: 20px;

}
	
	
	
.facebook_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.fb-page,
.fb-page span,
.facebook_wrap iframe{
  width: 100% !important;
}


	

}


/*640px-*/
@media screen and (max-width : 640px) {

 .logo_area{
    margin-top:20px;
    margin-bottom:20px;
}


    
   .slide_area_logo{
    width:160px;
}
	
	.icon_area img{
		width: 64px;
	}
    
	
.text_image_left{
    width: 100% !important;
}


.text_image_right{
   width: 100% !important;
}
	
	
.demo01 { margin: 0 -10px; }
.demo01 th,
.demo01 td{
    width: 100%;
    display: block;
    border-top: none;
    text-align:center;
    padding:8px;
    }
.demo01 tr:first-child th { border-top: 1px solid #ddd; }
	
#tel_area {
    position: fixed;
    bottom: 0;
	right: 0;
	width: 100%;
	height: 48px;
	
}
#tel_area a {
	background-color: #22488f;
	display: block;
	width: 100%;
	height: 48px;
	background-image: url("../images/btn_tel_w.png");
	background-repeat: no-repeat;
	background-position: center;
}

#tel_area a:hover {
	display: block;
	width: 100%;
	height: 48px;
	background-image: url("../images/btn_tel_w_over.png");
	background-repeat: no-repeat;
	background-position: center;
}
	

  
.footer_top{
	background-image: url("../images/bg_footer_top_ss.png");
	background-position: center top;
	background-repeat: repeat-x;
	text-align: center;
	padding-top: 20px;
	height: 56px;
}
	
	.footer_top img{
		width: 68px;
	}

.footer_area{
	padding: 16px 0 64px 0;
    }

.footer_logo{
	margin-bottom: 24px;
}
	
	.footer_logo img{
		width: 320px;
	}

.footer_guidance{
	font-size:16px !important;
}

.footer_tel{
	font-size:40px !important;
}

.footer_address{
	margin-bottom: 20px;

}
 



}