@charset "utf-8";
/* CSS Document */

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 16px;
  color: #3F3F3F;
  background-color:#FFFFFF;
  margin: 0;
}

h1,h2,h3,h4,header,p.footer_title{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight:bold;
  letter-spacing:2px;
}

.clear{
  clear:both;
}
.clearfix {
  min-height: 1px;
}
.clearfix:after {
  clear: both;
  content: "."; 
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0;
}
* html .clearfix {
  height: 1px;
}


/***** 色変更する場合 
メインカラー　#00aaea
サブカラー　　#b6d5e3
その他使用色　#EBB400　#005bab　#CCEEFA


***以下がカラー指定箇所です***

ヘッダー上部　#00aaea
ヘッダーインフォメーション　部分　#00aaea
h2ボーダー　濃い部分 #00aaea　薄い部分　#b6d5e3
h3背景色　#b6d5e3
h4文字色　#EBB400
挨拶見出し　#005bab
フッター背景色　#CCEEFA

*****/

.header_belt_upper {
  background-color: #00aaea;
}

.header_belt_upper h1{
  padding: 8px 4px;
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: #fff;
}

.header_belt_bottom {
  background-color: #00aaea;
  font-size: 24px;
  text-align: center;
  color: #fff;
}

.header img.header_logo{
  max-width:1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.wrapper a:link,
.wrapper a:visited{
  color: #333;
}
.wrapper a:hover,
.wrapper a:active{
  text-decoration: none;
}

.main h2{
  position: relative;
  padding-bottom: 5px;
  border-bottom: 6px solid #b6d5e3;
  margin: 0 0 20px;
}

.main h2::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  z-index: 2;
  content: '';
  width: 15%;
  height: 6px;
  background-color: #00aaea;
}

.main h3{
  padding:10px 20px;
  background-color: #b6d5e3;
  font-size:20px;
}

.main h4{
	color:#EBB400;
	margin-bottom:5px;
  margin-top: 0;
	font-size:16px;
}

.half_box{
	width:45%;
	padding:20px;
	background-color:#fff;
	border: solid 2px #b6d5e3;
}

.top_intro p{
  font-size: 28px;
  font-weight: bold;
  color: #005bab;
  text-align: center;
  margin: 0;
}

.top_greeting {
  margin: 25px 0;
}

.footer{
  background-color: #CCEEFA;
}

.footer p{
  text-align: center;
}

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

.footer table th,
.footer table td{
  text-align: center;
  border: 1px solid #ccc;
  padding:10px;
}

.footer table td.td_title{
	background:#fff;
	font-weight:bold;
}

.footer table th{
  background-color: #00aaea;
  color: #fff;
  padding: 5px;
}

.footer table td {
  background-color: #fff;
}

.copyrights {
  background-color: #00aaea;
  padding: 8px 4px;
  font-size: 90%;
  text-align: center;
  color: #fff;
}

.iframe_wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.iframe_wrapper iframe,
.iframe_wrapper object,
.iframe_wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.top_service table{
  width: 100%;
}

.top_service table th,
.top_service table td{
  text-align: center;
  border: 1px solid #b6d5e3;
}

.top_service table th{
  background-color: #72C24B;
  color: #fff;
  padding: 5px;
}

ul{
	list-style: none;
	padding:0;
	margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
	font-size:95%;
}

li:before {
    content: "• ";
    color: #b6d5e3;
}

ul.top_service_list li{

	margin:5px;
	padding:8px 20px;
}

p.footer_title{
	font-size:135%;
}

/* ******************************************************************** */
/* スマホのみ */
/* ******************************************************************** */

@media screen and (max-width: 767px){

body {
	font-size:14px;
}

.main img {
	display: block;
	float: none;
	margin: 0 auto;
	width: 200px;
}

.header_belt_bottom{
	font-size:90%;
	padding:15px 0;
}

.top_intro p{
  font-size: 110%;
  font-weight: bold;
  color: #005bab;
  text-align: center;
}
  
.footer table th,
.footer table td{
	font-size:85%;
}

.half_box{
	width:100%;
	padding:10px;
	margin-bottom:10px;
  box-sizing: border-box;
}
  
  .footer_flex{
    display: block;
  }
  
  .footer_address{
    width: 100%;
  }
  
  .footer_map{
    width: 100%;
    margin-bottom: 15px;
  }
  
  .footer_map iframe{
    width:100%;
    height: 40vh;
  }

}



/* ******************************************************************** */
/* スマホとタブレット */
/* ******************************************************************** */

@media screen and (max-width: 1023px){
  .header_belt_upper{
    margin-bottom: 40px;
  }
  .header_belt_bottom{
    margin-top: 40px;
  }
  .header img{
    width: 90%;
    height: auto;
  }

  .wrapper{
    padding: 20px 15px;
  }

  .main{
    padding: 0 ;
  }

  .paragraph{
    padding: 0 10px;
  }
  .left{
	float: left;
	margin: 0 20px 10px 0;
  }	

}



/* ******************************************************************** */
/* タブレットのみ */
/* ******************************************************************** */

@media screen and (min-width : 768px) and (max-width: 1023px) {
  
  .half_box{
    padding: 15px;
    width: 44%;
  }


}


/* ******************************************************************** */
/* タブレットとPC */
/* ******************************************************************** */

@media print, screen and (min-width:768px){
  .header_belt_bottom {
    font-size: 32px;
    padding: 20px 0;
  }
  
  .pc_none{
	  display:none!important;
	  }
  .top_intro {
    margin-top: 20px;
  }
  
.flex_around_all{
	-js-display: flex;
	display: flex;
	justify-content: space-around;
}
  
.footer_flex{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    width: 100%;
  }
  
  .footer_address{
    width: 35%;
  }

  .footer_map {
    width: 60%;
  }
	
}


/* ******************************************************************** */
/* PC */
/* ******************************************************************** */

@media print, screen and (min-width : 1024px){
  .header_belt_upper{
    margin-bottom: 50px;
  }
  .header_belt_bottom{
    margin-top: 50px;
  }
  .wrapper{
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
  }
  .main{
    width: 100%;
  }
  
}