@charset "utf-8";
*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}
body{
  font-family: 'Noto Serif JP',serif,"Avenir Next", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  overflow-x: hidden;
  border-top: 10px solid #0D6E38;
  font-size: 14px;
  
}
a{
  transition: .4s;
}
a:hover{
  text-decoration: underline;
}
img{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}
p{
  text-align: justify;
  line-height: 1.6em;
}
/* Normal header style */
.header_bg {
  width: 100%;
  height: 115px;
}

.header_contents {
  width: 95%;
  height: 115px;
  padding: 1em 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_contents h1 {
  font-size: 22px;
  margin: 0 0 0 10px;
}
.header_contents p{
  display: none;
}
.header_nav_lists {
  display: flex;
}

.header_nav_lists li {
  margin: 0 30px 0 0;
}
.header_nav_lists li a{
  color: #333;
}

.nav_link {
  font-size: 14px;
  color: #fff;
}

/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu_line {
  background: #fafafa;
  border-radius: 5px;
  width: 100%;
  height: 5px;
  margin: 4px 0;
}


/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}

/********************トップページ画像***********************/
.top-image-box{
  position: relative;
}
.top-image-text{
  text-align: center;
position: absolute;
top: 50%;
left: 35%;
transform: translate(-27%, -50%);
-webkit-transform: translate(-27%, -50%);
-ms-transform: translate(-27%, -50%);
  z-index: 100;
  color: #fff;
  font-size: 300%;
-moz-text-shadow: 1px 7px 5px rgba(0, 0, 0, 0.73);
-webkit-text-shadow: 1px 7px 5px rgba(0, 0, 0, 0.73);
-ms-text-shadow: 1px 7px 5px rgba(0, 0, 0, 0.73);
text-shadow: 1px 7px 5px rgba(0, 0, 0, 0.73);  font-weight: bold;
}
.top-image{
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
.top-image img {
  display: block;
  width: 100%;
  height: auto;
  overflow-x: hidden;
}

/********************基本配置***********************/
main{
   background: url(../images/bg.gif);
   margin: 0;
   padding: 0 0 4em 0;
   overflow: hidden;
}
h2{
  font-size: 200%;
  color: #0D6E38;
  margin-bottom: 1em;
  line-height: 1.4em;
}
.mincho{
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  
}
.box{
}
.flex{
  display: flex; 
  justify-content: space-between;
}
.box-inner{
  width: 90%;
  margin:2em auto;
  padding: 1em 1em 0 1em;
  max-width: 1000px;
}
.box-inner-left,.box-inner-right{
  padding: 0 2em 2em 2em;
}
.box-inner-left p{
  line-height: 1.8em;
}
.box-inner-left{
  width: 60%;
}
.box-inner-left img,.box-inner-right img{
  width: 100%;
}
.box-inner-right{
  width: 40%;
}
.about-title{
  margin: 0 auto!important;
  padding: 0 0em !important;
  width: 80%;
}

.yokohaba-title{
  background: #0D6E38;
  text-align: center;
  color: #fff;
  font-size: 180%;
  padding: 1em 0;
}
.top-service{
  display: flex;
  width: 95%;
  margin: 0 auto;
  justify-content: space-around;
  max-width: 1023px;
  padding: 4em 0;
}
.top-service div{
  width: 250px!important;
}
.top-service3 img{
  width: 100%;
}

.top-service-title{
  background: #0D6E38;
  text-align: center;
  padding: 1em 0;
  color: #fff;
}
.top-service-title i{
  margin: 0 0 0 2em;
}
/********************トップページお知らせ***********************/
.bg1{
  background: #F5F1E4;
  padding: 1em;
  
}
.bg2{
  border-top: 6px solid #0D6E38;
}
.bg2 p{
  text-align: center;
  font-size: 130%;
  padding: 2em 0 0 0 ;
}

.top-title{
  font-size: 200%;
  text-align: center;
  color: #0D6E38;
  margin: 0 0 1em 0;
}
#newsWrap{
  padding: 2em;
  background: #fff;
}
ul#newsList li{
  padding: 2em 1em;
  border-bottom: 1px dotted #eee;
  transition: .4s;
}
ul#newsList li a:hover{
  text-decoration: underline;
}
span.catName{
  background: #0D6E38;
  color: #fff;
  padding: .2em 1em;
  border-radius: 5px;
  margin: 0 1em 0 0;
  
}
span.newMark{
  background: #b40b0b;
  color: #fff;
  padding: .2em .5em;
  margin: 0 1em 0 0;
}

.btm-contact{
  display: flex;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 3em 0;
  justify-content: space-between;
  align-items: center;
}
a.btn{
  background: #0D6E38;
  border: 2px solid #0D6E38;
  outline:2px solid #0D6E38;
  outline-offset: 3px;
  color: #fff;
  text-align: center;
  padding: 1em 1em;
  font-size: 120%;
}
a.btn:hover{
  background: #fff;
  border: 2px solid #0D6E38;
  outline:2px solid #0D6E38;
  outline-offset: 3px;
  color: #0D6E38;
  text-decoration: none;
}
.btm-contact-top-about{
  display: none;
}
/********************ページヘッダー********************/
.page-header{
  position: relative;
}
.page-header-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
font-size: 250%;
text-align: center;
font-weight: 600;
text-shadow: 5px 5px 5px #000000  
}
.page-header img{
  width: 100vw;
  height: 400px;
  object-fit: cover;
}

/********************パンくず********************/
.pankuzu{
  background: #0D6E38;
}
.pankuzu-inner{
  width: 80%;
  margin: 0 auto;
  padding: .6em 0;
  color: #fff;
  
}
/********************ページ********************/
.page-catch{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 2em 0 0em 0;
  font-size: 300%;
}
h3.page-title{
  color: #0D6E38;
  font-size: 180%;
  text-align: center;
  border-bottom: 2px solid #0D6E38;
  padding: 0 0 .3em 0;
}
h4{  
  color: #0D6E38;
  padding: .5em 1em;
  font-size: 140%;
  font-weight: bold;
  border: 1px solid #0D6E38;
  text-align: center;
width: 90%;
margin: 2em auto;
}
.small{
  font-size: 80%;
  margin: 0 0 0 2em;
}
table.table1{
  width: 70%;
  margin: 2em auto 3em auto;
  font-size: 120%;
}
.table1 th{
  font-weight: 800;
border-bottom: 1px solid #eee;
  padding: 1em;
  
}
.table1 td{
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.table5{
  width: 70%;
  margin: 2em auto 3em auto;
  font-size: 120%;
border: 1px solid #ccc;
  padding: 1em;
}
.table5 td,.table5 th{
  padding: 1em;
}
.table5 th{
  width: 55%;
}
.boen-p{
  width: 80%;
  margin: 4em auto;
}
/* 矢印その２ */
.arrow-box{
  display: flex;
  align-content: center;
  margin: 2em auto;
  width: 90%;
}
.arrow02 {
    padding: 1em 2em; /* 要素の上の余白調整 */
    width: 25%; /* 四角形の幅 */
    background: #fff;
    border: 2px solid #0D6E38;
    position: relative;
    margin-right: 40px;
    text-align: center;
}
.arrow02:after {
    border-left: 15px solid #909090; /* 右向きの三角形を作るため左のボーダーに色を付ける */
    border-top: 15px solid transparent; /* 上のボーダーを透過に指定 */
    border-bottom: 15px solid transparent; /* 下のボーダーを透過に指定 */
    content: "";
    position: absolute;
    right: -30px;
    top: 17px;
}
/* テキストの指定 */
.arrow02 span {
    color: #0D6E38;
    }

.arrow-last:after{
  display: none;
}

table.table2,table.table4{
  margin: 2em auto;
}

table.table3{
  width: 90%;
  margin: 2em auto 3em auto;
  font-size: 120%;
  text-align: center;
  border: 1px solid #eee;
  background: #fff;
}
.table2 td,.table3,.table4 td{
  padding: 2em;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.boseki-left{
  text-align: right;
}
.boseki-title{
  color: #0D6E38;
  font-size: 180%;
}
.boseki-title3{
  font-size: 130%;
  font-weight: 800;
  margin: 2em 0 0 0;
}
.table3 th,.table4 th{
  width: 20%;
  padding: 1em;
  border-bottom: 1px solid #eee;  
  line-height: 1.8em;
}
.table3 td{
  width: 40%;
  padding: 1em;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
.table3 a{
  text-decoration: underline;
}
.boen-slide{
  display: none;
}
.flex-about{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about-pic{
  margin: .5em;
}
.about-pic p{
  font-size: 80%;
  text-align: right;
}

.table4{
  
}
.contact{
  text-align: center;
  width: 90%;
  height: auto;
}
/********************新着詳細********************/
.detail{
  background: #fff;
  padding: 6em 1em 10em 1em;
}
.detail h2{
  border-bottom: 2px solid #0D6E38;
}
#detail{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 1em ;
}
.detailUpfile{
  width: 40%;
  padding: 0 0 3em 0;
  
}
.detailUpfile img{
  width: 200px;
}
.detailText{
  line-height: 1.6em;
  padding: 0 0 3em 0;
  
}
.detailText a{
  text-decoration: underline;
}

.backORcloseBtn{
  text-align: center;
  width: 50%;
  margin: 100px auto;
}
.backORcloseBtn a{
  display: block;
  background: #fff;
  color: #0D6E38;
  transition: .4s;
  padding: .5em ;
  border-radius: 5px;
  border: 1px solid #0D6E38;
  
}
.backORcloseBtn a:hover{
background: #0D6E38;
color: #fff;
}
.ichiran {
  text-align: right;
  margin: 1em 1em;
}
/********************moodal モーダル********************/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}


/********************footer********************/
footer{
  background: #0D6E38;
  color: #fff;
}
.ft-inner{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 3em 0;
}
.ft-inner p{
  text-align: center;
  padding: 2em 0 0 0;
}
.ft-inner dl{
  display: flex;
  align-items: center;
  text-align: center; 
  justify-content: center;
}
.ft-inner dl dd{
  padding: 1em;
}
.ft-btm{
  text-align: center;
  background: #000;
  color: #fff;
  padding: .4em 0;
}
.sp-menu{
  display: none;
}
.bottom-menu{
  display: none;
}
/********************googlemap********************/
.map{
}
.google-maps {
position: relative;
padding-bottom: 40%; // これが縦横比
height: 0;
overflow: hidden;

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

}
/********************その他********************/
.ta-c{
  text-align: center;
}