@charset"utf-8";

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}

/* テキストがあるバージョン */
.title {
  font-size: 32px;
  color: #fff;
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.item2 {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item2:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

nav{
border-bottom: 1px solid #ccc; background-color:#8b4513;
}
nav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
nav ul li{
display: table-cell;
min-width: 50px;
border-right: 1px solid #FFFFFF;
}
nav ul li:first-child{
border-left: 1px solid #FFFFFF;
}
nav ul li a{
display: block;
width: 100%;
padding: 10px 0;
background-color:#8b4513;
text-decoration: none;
color: #FFFFFF;
}
nav ul li a:hover{
background-color:#692927;
border-bottom: 5px solid #FFFFFF;
}
nav ul li.current{
font-weight: bold;
}
nav ul li.current a{
border-bottom: 5px solid #FFFFFF;
color: #FFFFFF;
}

.borderline{height: 80px; background-color:#692927; color:#f5deb3; line-height:0; margin:0; padding:0; }
.borderline01{height: 20px; background-color:#692927; line-height:0; margin:0; padding:0; }
.borderline02{height: 50px; background-color:#692927; color:#f5deb3; line-height:0; margin:0; padding:0; font-family: "Yu Mincho";}
.borderline04{height: 10px; background-color:#f5deb3; line-height:0; margin:0; padding:0; }
.borderline05{height: 40px; background-color:#B77055; color:#f5deb3; line-height:0; margin:0; padding:0; font-family: "Yu Mincho";}
.main-inner{background-color:#deb887; color:#692927;}
.main01{background-color:#f5deb3; color:#692927;}
.main02{background-color:#FEECE0; width: 95%; height: auto; font-family: "Yu Mincho"; font-size:110%;}
.main02 li{text-align: left;}
.main03{background-color:#deb887; color:#692927;}
.main04{background-color:#B77055; color:#692927;}
.main05{background-color:#B77055; width: 95%; height:800px; position: relative;}
.main06{width: 65%; height: auto; text-align: left; background-color:#FEECE0; color:#800000; position: absolute; right: 0; bottom: 0;}
.main07{background-color:#B77055; width: 95%; height:800px; position: static;}
.main08{background-color:#f5fffa; width: 85%; height: auto;}
.main09{background-color:#f5fffa; width: 35%; height: auto;}
.ul01{list-style: none;}
.ul02{list-style: none;  column-count: 2;}
.ul03{list-style: none; column-count: 3;}
.bgimg01{height: 800px; width: 95%; background-image: url("service.jpg"); font-family: "Yu Mincho"; background-size: contain; background-repeat: no-repeat; color:white;}
table.cnbc{
  border-collapse:collapse;
  font-size: 140%;
}
 
table.cnbc th{
  border:1px solid #8b4513;
  background:brown;
  color:white;
}
 
table.cnbc td{
  border:1px solid #8b4513;
}

#news ul{ 
margin: 0; 
padding: 0; 
list-style: none; 
width: 100%;
}
#news li{ 
display: inline; 
padding: 0; 
margin: 0; 
width: 80%; 
}
#news li a{
display: block; 
border-top: 1px solid #9F99A3;
border-left: 1px solid #9F99A3;
border-right: 1px solid #9F99A3;
background-color: #f5deb3;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 80%; 
margin: 0px;
text-align: left;
font-family: "Yu Mincho";
font-size:120%;
}
#news li a:hover{
border-top: 1px solid #8593A9;
border-left: 1px solid #8593A9;
border-right: 1px solid #8593A9;
background-color: #8b4513;
}
#news #shita li a{
display: block; 
border-left: 1px solid #9F99A3;
border-right: 1px solid #9F99A3;
border-bottom: 1px solid #9F99A3;
background-color: #f5deb3;
padding:padding: 3px 10px;
text-decoration: none;
color: #333;
width: 80%;  
margin: 0px;
text-align: left;
font-size: 14px;
}
#news #shita li a:hover{
border-left: 1px solid #8593A9;
border-right: 1px solid #8593A9;
border-bottom: 1px solid #8593A9;
background-color: #8b4513;
}

.footer03{height: 190px; background-color:#692927; color: #ffffff; align: center; line-height:0; margin:0; padding:0; }
.top-banner{
	display: flex;
	flex-wrap:wrap;
list-style: none;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}
.footer04{height: 40px; background-color:#692927; color: #ffffff; align: center; line-height:0; margin:0; padding:0; }

.flex{
    display: flex;
}
.flex div{
    background: #8b4513; color: #ffffff;
}
.right{
    width: calc(50%);
}
.left{
    width: calc(50%);
    padding: 10px 50px;

    /*コレ追加*/
    box-sizing: border-box;
}