@charset "utf-8";
*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}
body{
  letter-spacing: .1em;
  overflow-x: hidden;
  border-top: 10px solid #0D6E38;
}
a{
  text-decoration: none;
  transition: .3s;
}
a:hover{
  text-decoration: underline;
}
img{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}
p{
  text-align: justify;
  line-height: 1.6em;
}
#wrapper{
  width: 1200px ;
  margin: 0 auto;
}
/* Normal header style */
.header_bg {
  width: 100%;
  height: 115px;
}

.header_contents {
  max-width: 1200px;
  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 40px;
}

.header_nav_lists {
  display: flex;
}

.header_nav_lists li a{
	position: relative;
	color: #000;
	padding: 0 1.2em;
}
.header_nav_lists li a::after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 10px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;

}
.header_nav_lists li a:hover{
	text-decoration: none;

}

.header_nav_lists li a:hover::after{
visibility: visible;
bottom: 0px;
opacity: 1;
}
a.nav_link {
  font-size: 14px;
  color: #fff;
  display: block;
  
}

/* 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: 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{
}
.top-image img {
  display: block;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

}

/********************基本配置***********************/
main{
   margin: 0;
   overflow: hidden;
}
h2{
  font-size: 180%;
  color: #0D6E38;
  margin-bottom: 1em;
  line-height: 1.4em;
}

.box{
  padding: 0 0 4em 0;
}
.flex{
  display: flex; 
  justify-content: space-between;
}
.nobori-box{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 3em auto;
}
.flex-nobori{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.nobori-box .flex-center div{
  width: 45%;
}
.flex-center{
  display: flex; 
  justify-content:center;
 align-items: center;
 flex-direction: row
}

.box-inner{
  margin:2em auto;
  padding: 3em 1em 3em 1em;
  max-width: 1000px;
}
.box-inner-about{
  margin:0em auto;
  padding:0em 1em 3em 1em!important;
  max-width: 1000px;
}
.box-inner-menu{
  padding: 1em 1em 0em 1em!important;
  width: 33%;
  text-align: center;
}
.box-inner-cafe{
  margin:2em auto;
  padding: 3em 0em 3em 0em;
  max-width: 1000px;
}
.box-inner-left,.box-inner-right,.box-inner-center{
  padding: 0 2em 0em 2em;
}
.box-inner-left p{
  line-height: 1.8em;
}
.yokohaba-title{
  background: #0D6E38;
  text-align: center;
  color: #fff;
  font-size: 150%;
  padding: .2em 0;
}
.top-service{
  display: flex;
  width: 95%;
  margin: 0 auto;
  justify-content: space-around;
  max-width: 1000px;
  padding: 4em 0;
}
.top-service div{
  margin: .2em auto;

}
.top-service3 img{
  width: 100%;
}
.top-service-title{
  background: #BBBE33;
  text-align: center;
  padding: .5em 0;
  color: #fff;
}
.top-service-title i{
  margin: 0 0 0 2em;
}
.contact{
  text-align: center;
  width: 100%;
}
iframe table td{
  padding: 1em!important;
}
.box-inner iframe{
  width: 100%!important;
}
/********************トップページお知らせ***********************/
.bg1{
  background: #F5F1E4;
  padding: 2em;
  
}
.bg2{
background: #F5F5EB;
}
.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: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2em 0 3em 0;
  justify-content: space-between;
  align-items: center;
}
a.btn{
  background: #FFB800;
  border: 2px solid #FFB800;
  color: #fff;
  text-align: center;
  padding: .4em 3em;
  font-size: 120%;
  border-radius: 15px;
  margin: 1em 0 0 0 ;
}
a.btn:hover{
  background: #fff;
  border: 2px solid #FFB800;
  color: #FFB800;
  text-decoration: none;
}
.btn-contact p{
  margin: .4em 0;
  padding: 0;
}
/********************ページヘッダー********************/
.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: 250%;
text-align: center;
font-weight: 600;
background: rgb(0, 0,0 ,.7);
padding: .3em 2em;
}
.page-header img{
  width: 100%;
  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-header2 img{

}
/********************パンくず********************/
.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: 70%;
margin: 2em auto;
}
.small{
  font-size: 80%;
  margin: 0 0 0 2em;
}
table thead th{
  text-align: center;
}
table.table1{
  width: 70%;
  margin: 2em auto 3em auto;
  font-size: 120%;
}

.table1 th{
  font-weight: 800;
border-bottom: 1px solid #eee;
  padding: 1em;
  width: 200px;
  
}
.table1 td{
  padding: 1em;
  border-bottom: 1px solid #eee;
}
.table5{
  width: 60%;
  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;
}
.boen-slide{
  display: none;
}
/* 矢印その２ */
.arrow-box{
  display: flex;
  align-content: center;
  margin: 3em 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;
}

/********************タブ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: 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_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;
}





/* テキストの指定 */
.arrow02 span {
    color: #0D6E38;
    }

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


table.table2,table.table4{
  width: 80%;
  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;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
}
.table3 th{
  text-align: center;
  
}
.table3 a{
  text-decoration: underline;
}
.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 thead th{
  background: #eee;
  border-bottom: 1px solid #ddd;
  text-align: center;
  
}
.table3 th,.table4 th{
  padding: 2em;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
.table3 td{
  width: 70%;
  padding: 2em;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;

}
.flex-about{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

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

.table4 th{
  border-right: none!important;
  width: 25%;
}
.about-title{
  margin: 0 auto!important;
  padding: 0 !important;
  width: 81%;
  max-width: 900px;
  text-align: left;
}
.btm-contact-top-about{
  display: none;
}
/********************新着詳細********************/
.detail{
  background: #fff;
  padding: 6em 3em 10em 3em;
}
.detail h2{
  border-bottom: 2px solid #0D6E38;
}
#detail{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 2em ;
}
.detailUpfile{
  width: 30%;
}
.detailUpfile img{
  width: 200px;
}
.detailText{
  line-height: 1.6em;
  padding: 0 0 3em 0;
}
.detailText div{  
}
.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;
}
/********************のぼり・のれんページ***********************/
.nobori
{
  padding: 0 0 4em 0;
}
.nobori-title{
  font-weight: 800;
  font-size: 140%;
  margin: 0 0 2em 0;
}

.nobori ul li{
  padding: .5em 0;
  line-height: 1.4em;
}
.nobori-box1{
  margin: 0 auto 3em auto;
  width: fit-content;
}
.nobori-title2{
  width: 50%;
  margin: 1em auto;
  text-align: center;
  font-size: 160%;
  font-weight: 800;
  color: red;
  border: 3px dotted #333;
  background: #fff;
  padding: .4em ;
}
.noren-table{
  width: 60%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #444;
  border-collapse: separate;
}
.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;  
}





/********************footer********************/
footer{
  background: #0D6E38;
  color: #fff;
}
.ft-inner{
  width: 70%;
  margin: 0 auto;
  text-align: center;
  padding: 4em 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: 30%; // これが縦横比
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: 10%; // これが縦横比
height: 0;
overflow: hidden;

}
/********************その他********************/
.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;
}