@charset "utf-8";
*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}
body{
  letter-spacing: .1em;
  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: 80%;
  height: 115px;
  padding: 1em 0;
  margin: 0 auto;
  text-align: center;
}

.header_contents h1 {
  font-size: 22px;
}

.header_nav_lists {
  display: flex;
}

.header_nav_lists li {
  margin: 0 40px 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: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
  z-index: 100;
  color: #fff;
  font-size: 200%;
-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;
width: 95%;
}
.top-image{
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
.top-image img {
  display: block;
  width: 100%;
  overflow-x: hidden;
  object-fit: cover;
  
}

/********************基本配置***********************/
main{
   margin: 0;
   padding: 0 0 0em 0;
   overflow: hidden;
}
main a{
}
h2{
  font-size: 180%;
  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 img{
  width: 100%;
}
.box li{
  
  padding: .3em 0
}
.reverse{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse
}
.box-inner{
  width: 100%;
  margin:2em auto;
  padding: 1em .2em 0 .2em;
}
.box-inner-about{
  margin:0em auto;
  padding: 1em 1em 1em 1em;
}
.box-inner-cafe{
  margin:2em auto;
  padding: 3em 0em 3em 0em;
}

.box-inner-left,.box-inner-right{
  padding: 0 1em 2em 1em;
  margin: 1em 0 0 0;
}
.box-inner-left p{
  line-height: 1.8em;
}
.yokohaba-title{
  background: #0D6E38;
  text-align: center;
  color: #fff;
  font-size: 160%;
  padding: .5em 0;
}
.top-service{
  display: flex;
  width:100%;
  margin: 0 auto;
  justify-content: space-around;
  padding: 1em 0;
  flex-wrap: wrap;
}
.top-service3{
  margin: .2em;
  width: 47%;
}
.top-service-title{
  background: #0D6E38;
  text-align: center;
  padding: 1em 0;
  color: #fff;
}
.top-service-title i{
  margin: 0 0 0 .5em;
}
/********************トップページお知らせ***********************/
.bg1{
  background: #F5F1E4;
  padding: 1em;
  
}
.bg2{
  border-top: 6px solid #0D6E38;
}
.bg2 p{
  text-align: center;
  font-size: 130%;
  padding: 0em 0 0 0 ;
}
.top-title{
  font-size: 200%;
  text-align: center;
  color: #0D6E38;
  margin: 0 0 1em 0;
}
#newsWrap{
  padding: .5em;
  background: #fff;
}
ul#newsList li{
  padding: 2em 1em;
  border-bottom: 1px dotted #eee;
  transition: .4s;
  line-height: 1.6em;
}
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;
  font-size: 80%;
}
.title{
  display: block;

}
span.newMark{
  background: #b40b0b;
  color: #fff;
  padding: .2em .5em;
  margin: 0 1em 0 0;
}

.btm-contact{
  display: flex;
width: 80%;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
padding: 2em 0 3em 0;
justify-content: space-between;
align-items: center;
}

.btm-contact-top-about{
  width: 90%;
  margin: 1em auto;
  height: 100px;
  
}
a.btn2{
  background: #0D6E38;
  border: 2px solid #0D6E38;
  outline:2px solid #0D6E38;
  outline-offset: 3px;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  font-size: 120%;
  text-decoration: none;
  display: block;
}

.btn-contact{
}
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%;
  text-decoration: none;
  display: block;
  width: 100%;
  margin: 1em auto;
}
a.btn:hover{
  background: #fff;
  border: 2px solid #0D6E38;
  outline:2px solid #0D6E38;
  outline-offset: 3px;
  color: #0D6E38;
  text-decoration: none;
}
.btn-tel{
  margin: 0 auto;
  display: block;
}
/********************ページヘッダー********************/
.page-header,.page-header2{
  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: 170%;
text-align: center;
font-weight: 600;
background: rgb(0, 0,0 ,.7);
padding: .3em 2em;
width: 90%;
}
.page-header img{
  width: 100vw;
  height: 260px;
  object-fit: cover;
}
.page-header2 img{
  width: 100vw;
  object-fit: cover;
}
.page-header-title2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
}
.page-header-title2 img{
  width: 100%;
}
/********************パンくず********************/
.pankuzu{
  background: #0D6E38;
}
.pankuzu-inner{
  width: 90%;
  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: 200%;
}
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{
  font-size: 100%;
}
table.table1{
  width: 90%;
  margin: 2em auto 3em auto;
}
.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: 90%;
  margin: 2em auto 3em auto;
border: 1px solid #ccc;
  padding: 1em;
  text-align: center;
}
.table5 td,.table5 th{
  padding: 1em;
}
.table5 th{
  width: 55%;
}
.boen-p{
  width: 90%;
  margin: 4em auto;
}
table.table2,table.table4{
  margin: 2em auto;
  width: 95%;
}
.table4 span{
  display: none;
}
table.table3{
  width: 95%;
  margin: 2em auto 3em auto;
  font-size: 100%;
  text-align: center;
  border: 1px solid #eee;
  background: #fff;
}
table.scroll{
  overflow: auto;　　　　/*tableをスクロールさせる*/
  white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
  }
table.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
   height: 5px;
  }
table.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
   background: #F1F1F1;
  }
table.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
   background: #BCBCBC;
  }

.table2 td,.table3,.table4 td{
  padding: 1em 0;
  border-bottom: 1px solid #eee;
  line-height: 1.8em;
}
.boseki-left{
  width: 50%;
  padding: 1em!important;
  text-align: right;
}
.boseki-title{
  color: #0D6E38;
  font-size: 120%;
}
.boseki-title3{
  font-size: 120%;
  font-weight: 800;
  margin: 2em 0 0 0;
  text-align: right;
  line-height: 1em;
}
.table3 thead th{
  background: #0D6E38;
  color: #fff;
}
.table3 td,.table3 th{
  display: block;
  width: 100%;
}
.table3 th{
  background:#eee;
  font-size: 110%;
  text-align: center;
  padding: .5em;
  border-bottom: 1px solid #AAA;
  
}
.table3 td{
  padding: 1em;
}

.table3 a{
  text-decoration: underline;
}

.table3 img{
  width: unset;
}
.table4 th{
  padding: 1em;
  border-bottom: 1px solid #eee;
  line-height: 1.8em;
}
.boen-slide{
  padding: 1em;
  text-align: center;
}
.about-title{
  margin: 0 auto!important;
  padding: 0  !important;
  width: 100%;
}
.about-title h2{
  margin: .5em 0 0 0!important;
  padding: 0 0 0 1em!important;
}


.flex-about{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.table-resp th{
  //white-space: normal!important;
}
.about-pic{
  margin: .5em;
  width: 45%;
}
.about-pic p{
  font-size: 80%;
  text-align: right;
}

.table4{
  
}
.flex-center{
  display: flex; 
  justify-content:center;
 align-items: center;
 flex-wrap: wrap;
}
.contact{
  text-align: center;
  width: 100%;
}
/********************新着詳細********************/
.detail{
  background: #fff;
  padding: 4em 1em 2em 1em;
}
.detail h2{
  border-bottom: 2px solid #0D6E38;
}
#detail{
  width: 100%;
  padding: 1em ;
}
.detailUpfile{
  width: 100%;
  padding: 0 0 2em 0;
  
}
.detailUpfile img{
  width: 100%;
}
.detailText{
  line-height: 1.6em;
  padding: 0 0 2em 0;
}
.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;
}


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

.header_nav_lists li {
  margin: 0 40px 0 0;
}

.nav_link {
  font-size: 16px;
}
.header_nav{
	display: none;
}
/********************タブ1***********************/
        /*タブ切り替え全体のスタイル*/
.tabs {
    margin-top: 50px;
    background-color: #fff;
    margin: 2em auto 0 auto;
}

/*タブのスタイル*/
.tab_item {
    width: calc(100%/2);
    border-bottom: 3px solid #0D6E38;
    background-color: #d9d9d9;
    font-size: 120%;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    padding: .6em 0;
}
.tab_item2 {
    width: calc(100%/3);
    border-bottom: 3px solid #0D6E38;
    border-right:1px solid #333;
    background-color: #fff;
    line-height: 50px;
    font-size: 140%;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    padding: .3em 0;
}

.tab_item:hover,.tabitem2:hover {
    opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tab01:checked~#tab01_content,
#tab02:checked~#tab02_content,
#tab03:checked~#tab03_content {
    display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked+.tab_item,.tabs input:checked+.tab_item2 {
    background-color: #0D6E38;
    color: #fff;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] ,input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item,.tabs input:checked + .tab_item2 {
  background-color: #0D6E38;
  color: #fff;
}


/********************格子背景***********************/

.lattice {
  background-image:
  repeating-linear-gradient(
    90deg,
    #EFEFEF ,
    #EFEFEF 1px,
    transparent 1px,
    transparent 15px
  ),
  repeating-linear-gradient(
    0deg,
   #EFEFEF ,
    #EFEFEF 1px,
    #fff 1px,
    #fff 15px
  );

}


/********************のぼり・のれんページ***********************/
.nobori
{
  padding: 0 0 4em 0;
}
.nobori-title{
  font-weight: 800;
  font-size: 140%;
  margin: 0 0 2em 0;
}

.nobori ul li{
  padding: .3em 0;
}
.nobori-box1{
  margin: 0 auto 3em auto;
  width: fit-content;
}
.nobori-title2{
  width: 80%;
  margin: 1em auto;
  text-align: center;
  font-size: 140%;
  font-weight: 800;
  color: red;
  border: 3px dotted #333;
  background: #fff;
  padding: .4em ;
}
.noren-table{
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #444;
  border-collapse: collapse;
}
.noren-table th{
  font-weight: bold;
  padding: .8em 1em;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.noren-table td{
  padding: .8em 1em;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.noren-table tr:last-child{
  border-bottom: 1px solid #444;

}
/********************名刺・チラシ・メニューページ***********************/
.menu  img{
  width: 100%;
}
.box-inner-menu p{
  text-align: center;  
}

  .scroll {
    overflow-x: auto;
  }
  .scroll .noren-table {
    min-width: 640px;
    margin: 0 10px 50px;
  }
  .tbl-r07 td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }


/********************footer********************/
footer{
  background: #0D6E38;
  color: #fff;
}

.ft-inner{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 1em 0 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;
  flex-wrap: wrap;
  padding: 0 0 1em 0;
}
.ft-inner dl dd{
  padding: .5em;
}
.ft-inner dl a{
  font-size: 14px;
}
.ft-btm{
  text-align: center;
  background: #000;
  color: #fff;
  padding: .4em 0;
}
.sp-menu{
  display: none;
}
.bottom-menu{
  display: none;
}
/********************コンタクトページ********************/


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

}





/* SP用メニュー */
.sp-menu {
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  height: 60px;
  background-color: #0D6E38;
  color: #fff;
}

.sp-menu__item {
  width: calc(100%/4);  /* メニュー数に応じて変更 */
  height: 100%;
  text-align: center;
}

.sp-menu__check {
  display: none;
}

.sp-menu__item--open {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.sp-menu__item--close {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  transition: .3s ease-in-out;
}

.sp-menu__icon {
  text-align: center;
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}
a.ft-mobile-title{
	font-size: 16px;
	font-weight: bold;
	background: #fff;
	color: #0D6E38!important;
	text-align: center;
	border-radius: 3px;
	padding: 1em 1em;
	width: 100%;
	margin: .5em 0 .5em 0 ;
	display: block;
}
.sp-menu__icon-txt {
  display: block;
  color: #fff;
  }
.sp-menu__contents--close {
  display: block;
  margin: 10px 0;
  font-size: 30px;
}

.sp-menu__contents-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateX(-100%);
  width: 80vw;
  height: 100vh;
  background-color: rgba(13,110,56,.7);;
  transition: .3s ease-in-out;
}
.sp-menu__contents-menu li{
	padding: .5em 2em;
	text-align: left;
}
.sp-menu__contents-menu li a{
	color: #fff;
	display: block;
}
.sp-menu__contents-menu li:last-child{
	border: none;
}
#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
  
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}
.megamenu-mobile ul li{
	padding: .5em 0 .5em 1em;
}
.sp-menu__contents-search{
  position: fixed;
  top: 40%;
  right: 5%;
  left: 5%;
  z-index: 10000;
  transform: translateY(1500%);  /* 画面からギリギリ飛ぶ範囲に設定 */
  width: 90vw;
  transition: .3s ease-in-out;
}
#sp-menu__item-search:checked ~ .sp-menu__contents-search {
  transform: translateY(0%);
}
#sp-menu__item-search:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-menu2{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  transform: translateX(100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu2:checked ~ .sp-menu__contents-menu2 {
  transform: translateX(0%);
}
#sp-menu__item-menu2:checked ~ .sp-menu__item--close {
  display: block;
}
/********************その他********************/
.ta-c{
  text-align: center;
}
.ta-r{
  text-align: right;
}
.mt-0{
  margin-top: 0!important;
}
.mt-1{
  margin-top: 1em;
}
.mt-2{
  margin-top: 2em;
}
.mt-3{
  margin-top: 3em;
}

.mb-0{
  margin-top: 0!important;
}
.mb-1{
  margin-bottom: 1em;
}
.mb-2{
  margin-bottom: 2em;
}
.mb-3{
  margin-bottom: 3em;
}
.pt-0{
  padding-top: 0!important;
}
.pt-1{
  padding-top: 1em;
}
.pt-2{
  padding-top: 2em;
}
.pt-3{
  padding-top:3em;
}