/* カスタム CSS をここに入力してください */
.site-header{
    height: 100px;
  　background-color: transparent;
}
.ddt{
  position: relative;
}

/*--------------------------------------------------------------
見出し
--------------------------------------------------------------*/
.marker_yellow_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: 700;
}

.midasi-8 {
     font-size: 10px;
}

.midasi-h2 {
     position: relative;
     font-size: 18px;
     padding:0.5em 0.5em 0.5em 1.4em;
     background-color: #74994b;
     border-radius: 5px;
}
 
.midasi-h2::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:25px;
     background-color:white;
}

.siro-midori {
    background-color: #74994b;
    padding:2px 10px;
    font-weight: 700;
    margin-top:5px;
  }

.midori-pl {
    background-color: #74994b;
    font-size: 12px;
    padding:2px 15px;
    color: #fff;
    margin-right:15px;
  }

.midori-pl2 {
    background-color: #74994b;
    font-size: 8px;
    padding:2px 5px;
    color: #fff;
    margin-right:10px;
  }

.midori-top {
    position: absolute;
    top:-70px;
  left:0;
  }
/*--------------------------------------------------------------
ヘッダーメニュー
--------------------------------------------------------------*/

.mainnav {
  background: url(https://royal-inc.jp/wp-content/uploads/2018/11/kimidori.png) repeat;
  background-size: cover;
 z-index: 2000;
}

#mainnav {
  padding: 10px 20% 10px 20%;
  text-align: center;
  }

.gabyou1 {
    position: absolute;
    top:0px;
    left:45%;
  }
/*--------------------------------------------------------------
写真
--------------------------------------------------------------*/
.posuto-pl {
  	-webkit-filter: grayscale(0%);
	filter: none;
}
.posuto-pl:hover {
  	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,#grayscale");
	filter: grayscale(100%);
}

/*--------------------------------------------------------------
カラム
--------------------------------------------------------------*/
ul.cp_list {
	position: relative;
	padding: 0.5em;
  background-color: #e2e2e2;
	border: solid 1px #74994b;
	list-style-type: none;
}
ul.cp_list li {
	padding: 0.5em 0 0.5em 1.4em;
	line-height: 1.5;
	border-bottom: 1px dashed #74994b;
}
ul.cp_list li::before {
	position: absolute;
	content: "
ul.cp_list {
position: relative;
padding: 0.5em;
border: solid 1px #74994b;
list-style-type: none;
}
ul.cp_list li {
padding: 0.5em 0 0.5em 1.4em;
line-height: 1.5;
border-bottom: 1px dashed #74994b;
}
ul.cp_list li::before {
position: absolute;
content: "\002713";
color: #AB47BC;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
	color: #74994b;
	font-weight: bold;
	left : 0.5em;
}
ul.cp_list li:last-of-type {
	border-bottom: none;
}
.menyu-10 {
     width:9%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }
.menyu-90 {
     width:89%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }

.menyu-60 {
     width:59%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }
.menyu-40 {
     width:39%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }

.menyu-50 {
     width:49%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }

.menyu-30 {
     width:29%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }
.menyu-70 {
     width:69%;
     padding:1%;
     margin-right: 1%;
     float:left;
     box-sizing :border-box;
  }
.clear {
    clear:both;　/*floatの解除、ここがポイント*/
}

@media screen and (max-width:767px){
  .menyu {
   border-bottom: 1px solid #ccc;
  width: 100%;
  text-align: left;
    bottom: 0;
    left: 0;
    right: 0;
　　margin:auto;
}
  }
/*--------------------------------------------------------------
フッター
--------------------------------------------------------------*/
  .footer-widgets {
   padding:30px;
   font-size: 14px;
}
.siro-huta9 {
     background-color: #fff;
     color: #333;
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border: solid 1px #ccc;
  }
/*--------------------------------------------------------------
ボタン
--------------------------------------------------------------*/
a.cp_btn {
	display: block;
	position: relative;
	width: 180px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border:1px solid #8BC34A;
	background: #74994b;
	overflow: hidden;
	z-index: 1 !important;
}
a.cp_btn:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
}
a.cp_btn:hover {
	color: #da3c41;
}
a.cp_btn:hover:after {
	height: 250%;
	opacity: 1;
}
a.cp_btn:active:after {
	height: 350%;
	opacity: 1;
}


.square_btn {
    position: relative;
    display: inline-block;
    border-left: solid 3px #009e96;
  border-bottom: solid 1px #009e96;
    padding: 5px 15px;
    width:100%;
  font-size: 14px;
    text-decoration: none;
    color: #FFF;
    background: #e2e3e2;
    transition: .4s;
  }

.square_btn:hover {
    background: #1ec7bb;
}

/*--------------------------------------------------------------
ブログ
--------------------------------------------------------------*/
.new {
position: absolute;
top:0px;
left:0px;
}

.new-arrivals{
	background: #f9575b;
  color: #fff;
width: 150px;
text-align: center;
font-size: 12px;
float:left;
margin: 0px 10px;
box-sizing :border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.news{
	background: #0b6bb5;
  color: #fff;
width: 150px;
text-align: center;
font-size: 12px;
float:left;
margin: 0px 10px;
box-sizing :border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.blogs{
	background: #1bd124;
  color: #fff;
width: 150px;
text-align: center;
font-size: 12px;
float:left;
margin: 0px 10px;
box-sizing :border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.pp-post5 {
  padding: -10px 10px;
  border-bottom: dashed 1px #ccc;
    }
.pp-post5:hover  {
  background-color: #f7f7f7;
    }

.pp-post-meta5 {
font-size: 12px;
     float:left;
  margin: 0px 10px;
     box-sizing :border-box;
}
.pp-post-meta5 {
font-size: 12px;
}

.pp-post-title5 {
  border-bottom: none;
  font-size: 16px;
  }
.pp-post-title5 a{
  color: #333;
  }


@media screen and (max-width:1200px){
   .maintitle2 {
		position: absolute;
		display: inline-block;
		font-size: 4vw;
		line-height: 67px;
		font-weight: 700;
		top: 35%; 
   left: 50%;
	transform: translate(-50%, -50%);
		padding-bottom: 10px;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
	}
@media screen and (max-width:725px){
  .pp-categori99 {
background-color: #333;
color: #fff;
width: 150px;
text-align: center;
font-size: 12px;
     float:none;
  margin: 0px 10px;
     box-sizing :border-box;
  }

   .maintitle2 {
		position: absolute;
		display: inline-block;
		font-size: 4vw;
		line-height: 67px;
		font-weight: 700;
		top: 33%; 
   left: 50%;
	transform: translate(-50%, -50%);
		padding-bottom: 10px;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
  .pp-post-meta5 {
font-size: 12px;
     float: none;
  margin: 0px 10px;
     box-sizing :border-box;
}
  .menyu-50 {
     width:100%;
     padding:1%;
     margin-right: 0%;
     float:left;
     box-sizing :border-box;
  }

.menyu-30 {
     width:100%;
     padding:1%;
     margin-right: 0%;
     float:left;
     box-sizing :border-box;
  }
.menyu-70 {
     width:100%;
     padding:1%;
     margin-right: 0%;
     float:left;
     box-sizing :border-box;
  }
  }

/*--------------------------------------------------------------
お問い合わせ
--------------------------------------------------------------*/

.sukurou {
  overflow: scroll;   /* スクロール表示 */ 
  width: 100%;
  height: 150px;
  background-color: #fff;
  border: 1px solid #333;
}
.sukurou {
  padding: 5px;
  margin-top: 30px;
  }

.otoi9 {
	border: 1px solid #ccc;
   background-color: #fff;
  width: 100%;
  height: autopx;
  text-align: left;
    bottom: 0;
    left: 0;
    right: 0;
　　margin:auto;
}

.otoi8 {
  padding-left: 45%;
  padding-top: 30px;
  text-align: left;
    bottom: 0;
    left: 0;
    right: 0;
　　margin:auto;
}
.otoi10 {
  background-color: #ff0000;
  color: #fff;
  padding: 5px;
  font-size: 12px;
}
.form-width { max-width: 100%;}

.yokoyoko {width: 30%;}
.yokoyoko2 {width: 70%;}

@media screen and (max-width: 768px) {
    .table-sp,
    .table-sp tbody,
    .table-sp thead,
    .table-sp tr,
    .table-sp td,
    .table-sp th {display:block;}
 
    .table-sp th {width:auto;}
  .yokoyoko {width: 100%;}
.yokoyoko2 {width: 100%;}
}