/*
Theme Name: oratte
*/

/****************************************
	   General Setting 
*****************************************/
*{margin:0;padding:0;}body {font-size:15px;text-align:center;font-family:"Avenir Next", "Montserrat", sans-serif
,"YuGothic", "游ゴシック体", "Yu Gothic", "游ゴシック",'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;margin: 0px;padding: 0px;background: #FFF ;color:#000; letter-spacing:1px;}
h1, h2, h3, h4, h5, h6, div, p, pre, ul, ol, dl, dt, dd, address, form, blockquote{font-size:1em;padding: 0;line-height: 1.9;text-align: left;display: block;margin: 0px;}table {line-height: 1.6;font-size:1em;margin : 0;empty-cells: show;}hr,.areaAnchor,.anchor { display : none; }img {border: none;vertical-align: bottom;}li { list-style: none; }acronym,abbr{cursor:help;}option{ padding-right:10px; }*+html option{padding-right:0;}* html option{padding-right:0;}
div, dl{zoom:1;}div:after, dl:after{content: ".";display: block;visibility: hidden;height: 0.1px;font-size: 0.1em;line-height: 0;clear: both;}* html div, * html dl{display:inline-table;/*\*/display:block;/**/}
#wpadminbar div:after{clear:none;}#wpadminbar ul:after{clear:none;}
html{scroll-behavior: smooth; scroll-padding-top:500px;}


a:link{color: #000;text-decoration:none;}
a:visited{color: #888;}
a:hover{color: #604C3F;text-decoration:none; transition-duration: 0.5s; opacity: 0.8;}
a:active{color: #FF6666;}
a:hover img { opacity:0.5; }
a:hover img {transition-duration: 0.3s;}
a div { transition-duration: 0.3s;}
a div:hover { opacity: 0.7;}
body { padding-top: 100px;}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


.left { float:left; }
.right { float:right; }
.hlf { width:48%; }
.center{ text-align:center;}
a.line{text-decoration:underline;}
.single a{text-decoration:underline;}

p {color:#3e3a39;}
h2 { font-size:130%; color:#000; margin:0px 0 0px; }
h2 span{ display:block; font-size: 85%; padding-bottom: 10px;}
h2.big{font-size:170%;}

img { width:100%; height:auto; }
.wrap { width:94%; max-width:1100px; margin:0px auto; }
.sp { display:none; }
.mt40{margin-top: 40px;}
.mt70 { margin-top:70px;}
.mb70 { margin-bottom:70px;}
.pd70 { padding:70px 0px; }

.bread { margin-bottom: 30px; }

@media screen and (max-width: 680px) {
  body { padding-top: 0; max-width: 100%;}
	h2 { font-size: 24px;}
	.sp { display:block; }
	.pc { display:none; }
	.hlf { width:90%; margin:0px auto; }
	.left { float:none; margin-bottom: 20px;}
	.right { float:none; }
	h2 { font-size:110%;}
	h2.big{font-size:150%!important;}
}


pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
}


.drop-shadow {
    -webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,.4));
        filter: drop-shadow(0px 0px 5px rgba(0,0,0,.4));
}


/****************************************
	   all
*****************************************/
.red{ color: #E00003;}
.blue{color:#54B9D0;}
.hl_b{line-height: 2.5;}
.bold{ font-weight:bold;}

.bg01{ background:#FAFAFA; padding: 70px 0;}
.btn_list01{
  display: flex;
  flex-direction: row;
  justify-content: center;
	flex-wrap: wrap;
}
.btn_list01 > *{
	padding: 11px;
	width: 23%;}
.btn_list01::after{
  content:"";
  display: block;
}

@media screen and (max-width: 680px) {
	.btn_list01{display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
	.btn_list01 > *{width:43%;}
}




/****************************************
	   index.php
*****************************************/
.main_01{ margin: 80px 0;}
.main_01 p{ width:80%; margin-top: 40px;}
@media screen and (max-width: 680px) {
	.main_01 p{ width:100%; margin-top: 20px;}
}

/***infomation***/
.eye{ margin-bottom:10px;}
.eye p{ text-align: center; font-size: 80%; font-weight: bold; color: #fff;}
.info > .btn_list01 > *{ padding: 20px 11px;}
/*スラッグ名ごとに色分け*/
.kankyo{ background: #D7C100; width: 100%;}
.news{ background:#B4B4B4;}
.kessan{ background:#555555;}
.kouza{ background:#4A4292;}
.solar{ background:#00B20F;}
.sinki{ background:#00ADB9;}
.sisatsu{ background:#FF7426;}
.space{ background:#FFD800;}
.consul{ background: #B200AB;}
.event{ background: #00B42F;}
.facebook { background: #3B5998;}
.blog { background: #d52222;}


/****************************************
	   page.php
*****************************************/
#contents{ margin-bottom: 70px;}
.inner h3{ margin-top:-100px; padding-top:100px;}
#page_ttl{ background: url("img/pagebg.jpg") no-repeat center; background-size: cover; padding: 150px 0;}
#page_ttl h2{ text-align: center; color: #fff; font-size: 170%; font-weight: normal;}
.page_post{ margin: 80px 0;}
#page_wrap {margin:60px auto;}

#page_wrap h3{font-size:150%; color:#54B9D0; margin-bottom: 30px; }
#page_wrap h4{font-size:120%;}

.page_list{ float: left; width: 30%;}
.inner{ float: right; width: 70%;}
.bd{ border-bottom:1px solid #FAFAFA; margin: 70px 0;}
.dec li{list-style-type: decimal; margin-left: 20px; margin-bottom: 10px;}

@media screen and (max-width: 680px) {
#page_wrap {margin:30px auto 60px;}
#page_ttl{background: url("img/pagebg.jpg") no-repeat; background-size:100% auto; padding: 30px 0 30px;}
.page_list{ float: none; width: 100%;}
.inner{ float:none; width: 100%;}
}

/*side　ページ内リンク*/
.page_list{margin-bottom: 40px;}
.page_list p{ margin-bottom:20px;}
.page_list a{ margin-bottom:10px;
color: #54B9D0;text-decoration: underline!important;}
.page_list a:hover{color: #54B9D0!important;}
.content{
  padding-top: 80px;
}
#link01 {
   margin-top:-80px;
  padding-top:80px;
}

#she h3{ font-size: 180%; margin-top: 30px; line-height: 1.4;}
#she h3 span{font-size:60%; color:#000!important;}
.she_img img{ width: 31%;height: auto;}
#she .w80{width:80%;}
#she .w10{width:10%;}
#she .w10 p{ font-size:80%;}
#she .tolk h4{font-size: 140%; margin-bottom: 20px;}
#she .tolk h5{margin-top: 40px;font-size:120%;}
.tolk_q{ margin: 30px 0 10px; font-weight: bold;}
.f80{font-size: 80%;}
@media screen and (max-width: 680px) {
	.she_img img{ width:80%; text-align: center; margin-bottom: 10px;}
	#she .w80{width:100%;}
#she .w10{width:30%; text-align:center; margin-top: 10px; }
}

/*table*/
.table01{ border-top:1px solid #EEEEEF; width:100%;}
.table01 th{ border-bottom:1px solid #EEEEEF; padding:10px 20px; text-align:left; background:#F7F7F7; width: 25%; font-weight: normal;}
.table01 td{ border-bottom:1px solid #EEEEEF; padding:10px 20px;border-left:1px solid #EEEEEF; width: 75%;}

.table02{ border-top:1px solid #EEEEEF; width:100%;}
.table02 th{ border-bottom:1px solid #EEEEEF; padding:10px 0; text-align:left; width: 20%; font-weight: normal;}
.table02 td{ border-bottom:1px solid #EEEEEF; padding:10px 20px;border-left:1px solid #EEEEEF; width: 80%;}

@media screen and (max-width: 680px) {
	.table01,
	.table02{ border-top:none; width:100%;}
	.table01 td,
	.table01 th,
	.table02 td,
	.table02 th{border-bottom: none;border-top:1px solid #EEEEEF;
    display: block;
    width: 95%;padding:10px;}
	.table01 td,
	.table02 td{border-left:none;}
	.table02 th{padding:10px 10px 0 10px;}
	.table02 td{border-top:none;}
	.t_last{border-bottom:1px solid #EEEEEF;}
}


/****************************************
	   page-contact.php
*****************************************/
.contact input { width:100%; height:2em;}
.contact select { width:100%; height:2em;}
.contact table { width: 100%; border-spacing: 10px;}
.contact th { font-weight:normal; font-size:0.9em; width: 30%; box-sizing: border-box;}
.contact td { width: 68%; box-sizing: border-box;}
.contact textarea { width:100%; height:4em; }
.contact input { background: #eee; border: none;}
.contact input[type="submit"] { width:100px; margin:30px auto; display: block;}
.contact input[type="submit"] { padding:10px 0; background:#488a7f; color:#FFF; border-radius:5px; height:auto; }
.contact button[type="submit"] { width:100px; margin:30px auto; display: block;}
.contact button[type="submit"] { padding:10px 0; background:#488a7f; color:#FFF; border-radius:5px; height:auto; }
.contact span label input { display: inline-block; width: auto; vertical-align: middle; margin-right: 0;}
.contact td span label span { font-size: 12px;}

@media screen and (max-width: 680px) {
	.contact th, .contact td {
		display: block;
		width: 100%;
		float: none;
	}
	.contact td span { display: block; margin-left: 0 !important;}
	.contact td span label span { display: inline;}
}

/*.sent { display:none; }*/





/****************************************
	   single.php
*****************************************/
.single{}
.post { width:94%; max-width:600px; margin:0 auto 50px; }
.post img { margin:30px 0px; }
.single .cat{ padding: 5px; font-size: 80%; color: #fff;}
.single .bd{ border-bottom:1px solid #FAFAFA; margin:0px 0 50px;}
@media screen and (min-width:600px) {
.post-thm { margin:50px 0px 30px; }
.case-img { width:48%; }
}
.single_thm {
	max-width: 600px;
	margin:60px auto 30px;
}
.normal_thm {
	max-width: 400px;
	margin:60px auto 30px;
}
main#single_wrap {
	margin:0px auto 60px;
	width: 90%;
	max-width: 600px;
}
main#single_wrap .gallery {
	margin-top: 20px;
}
main#single_wrap .gallery dl {
	width: 33%;
	margin-top: 0;
}
main#single_wrap .gallery img {
	border:none;
}
main#single_wrap h2 {
	font-size: 20px;
	color: #604C3F;
	margin:0 0 20px;
}
main#single_wrap h3 {
	font-size: 18px;
	color: #604C3F;
	border-bottom: solid 1px #604C3F;
	margin:30px 0 10px;
}
main#single_wrap h4 {
	font-size: 18px;
	color: #604C3F;
	border-left: solid 10px #604C3F;
	padding-left: 10px;
	margin:30px 0 10px;
}

.pagination{}
.pagination{ text-align: center; margin: 30px auto 0;}
.page-numbers{text-align: center; margin: 0 auto;}
.pagination li {
	display: inline;
	border: solid 1px #ccc;
	padding: 3px 10px;
	background:#604C3F;
	margin-right: 2px;
}
.pagination li a {
	color: #FFF;
}


/****************************************
	   btn.php
*****************************************/
.more {margin-top:30px;
	display: block;
	position: relative;
	width: 180px;
}
.more a {
  padding:7px 40px 7px 25px;border-radius: 30px;
  width: 120px;
  background:#54B9D0;
  display: inline-block;
  color: #fff;
  transition-duration: 0.5s;
}
.more a::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -4px;
}


.btn {
	display: block;
	position: relative;
	width: 200px;
}
.btn a {
  padding:7px 30px 7px 20px;border-radius: 30px;
  width: 160px;
  display: inline-block;
  color: #fff;
  transition-duration: 0.5s;
}
.btn a::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -4px;
}
.pink a{background:#FF0075;}
.green a{background: #12B600;}

#pal .more {
	width: 180px;
}
#pal .more a {
  width: 150px;
}
#pal .more a::after {
    right: 0px;
}

.youtube {margin:50px 0;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


@media screen and (max-width:680px) {
  .btn a {
  	margin: 0 auto;
  }
}




/****************************************
	   header.php
*****************************************/
header {
	position: fixed;
	width: 100%;
	height: 100px;
	top: 0;
	text-align: left;
	background: #fff;
	z-index: 9980;padding-bottom:0px; 
}
#logo {
	width:280px;
	height:auto;
	position: absolute;
	top:32px;
	left: 90px;
}
.hamburger { display:none; }
#navi { padding:0px; display: inline-block; margin-top:30px;text-align:left; margin-right: 50px;}
#navi ul li { font-size:14px; display:block; padding:0px; margin-right: 30px; float:left; border:none; font-weight: bold;}
#navi ul li span{ display: block; text-align: center; margin-bottom: 5px;}
#navi ul li img{ text-align: center; height: 20px; width: auto; vertical-align: top;}
#navi ul li img.mini{ text-align: center; height: 15px; width: auto;}
#navi ul a { display:block; padding:10px 0px; }
#menu-wrap { z-index:9981;text-align: right;}
#navi a { text-decoration:none; color:#000; font-size:1em; }
#navi a:link { text-decoration:none; color:#000; }
#navi a:visited { text-decoration:none; color:#000; }
#navi a:hover { text-decoration:none; color:#999;}


@media screen and (max-width: 1080px) {
  .show {
    margin-left: 0px !important;
  }
  #navi ul li { float: none;}
  .hamburger {
    display: block;
    top:0;
	left: 20px;
    position:fixed;
    width:40px;
    padding:0px 5px 0px;
    margin-top:23px;
    z-index: 9999;
    cursor: pointer;
    padding-bottom: 10px;
  }
  #navi {
    top:0;
    left:0;
    margin-left: -200px;
    margin-top: 0;
    transition-duration: 1s;
    width: 200px;
    background: rgba(255,255,255,0.9);
    position: fixed;
    padding: 80px 0 30px 25px;
    margin-right: none;
    box-sizing: border-box;
    z-index: 9990;
	height: 100%;
  }
	#navi li a{ text-align: center!important;}
  .hamburger li { height:10px; }
  .hamburger p { margin-top:5px; text-align:center; }
  .hm1, .hm2, .hm3 { border-bottom:3px solid #000; }
}
@media screen and (max-width: 680px) {
  .hamburger {
    margin-top:10px;
  }
	#navi li a{ text-align: center!important;}
  #contact-btn {
    top:auto;
    bottom: 20px;
    right: 0px;
  }
  #logo,#logo_splush {
    position: static;
    width: 200px;
    margin:15px auto 5px;
    display: block;
  }
  header {
    position: static;
    height: auto;
  }

}


/****************************************
	   footer.php
*****************************************/

.ftr_1{position: relative;}
.foot_ms{position: absolute;background: #54B9D0;
	top: 100%; left: 50%; width: 65%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
   padding: 30px 10px;}
.foot_ms h2,.foot_ms p{color: #fff; margin-bottom: 20px;}
.foot_ms .btn{ text-align: center; margin:0 auto;}

.ftr_2{ margin:180px auto 30px;}
.ftr_2 h2{ width:250px; margin: 0 auto 30px;}
.ftr_2 p{ text-align:center; margin-bottom: 30px;}
.sns img{ width: 25px; padding: 0 5px;}
.bnr img{ width: 296px; padding:10px;}

@media screen and (max-width: 680px) {
	.foot_ms{width: 80%;top:70%;}
}

#ftr_li { text-align: center; margin: o auto;
}
#ftr_li ul {
  display: inline-block;
  vertical-align: top;
  margin-left: 30px;
  margin-top: 30px;
}
#ftr_li ul li {
  list-style: disc;
  list-style-position: inside;
  font-size: 12px;
}
#ftr_li ul li:first-child {
  list-style: none;
  font-weight: bold;
  font-size: 14px;
}
#credit {
}

@media screen and (max-width: 680px) {
  #ftr_li {
    float: none;
    width: 100%;
  }
  #ftr_li ul {
    width: 45%;
    margin-left: 5%;
    float: left;
  }
  #ftr_li ul:nth-of-type(2n+1) {
    clear: both;
  }
	.sns img{ width: 40px; padding: 0 10px;}
}

.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt40{margin-top:40px;}




/* ここから下がボタンのCSS　*/
.btn-type01{
width: 100%;
max-width:500px;
padding: 10px 10px;
display: inline-block;
text-align: center;
letter-spacing: 0.1em;
color: #fff;
background-color:#E1840F;
border-radius:5px;
}
a.btn-type01{color: #fff!important;}

@media screen and (max-width: 680px) {
.btn-type01{max-width:320px;}
}


/* 2021.09.12 add Basic Google Maps Placemarks */
#bgmp_map-canvas {
  width: 100% !important;
}

#bgmp_map-canvas img {
  margin: 0 4px 0 0;
}


.map-pin-list ul {
  margin: 10px 0 15px;
}

.map-pin-list ul li {
  display: inline-block;
  padding-left: 1.2em;
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left center;
  margin-left: 10px;
  margin-right: 10px;
}

.map-pin-list ul li.energy {
  background-image: url('img/map-pin-energy.png');
}

.map-pin-list ul li.recycling {
  background-image: url('img/map-pin-recycling.png');
}

.map-pin-list ul li.education {
  background-image: url('img/map-pin-education.png');
}

.map-pin-list ul li.agriculture {
  background-image: url('img/map-pin-agriculture.png');
}

.map-pin-list ul li.waterside {
  background-image: url('img/map-pin-waterside.png');
}

.map-pin-list ul li.ecosystem {
  background-image: url('img/map-pin-ecosystem.png');
}

.map-pin-list ul li.medicalcare {
  background-image: url('img/map-pin-medicalcare.png');
}

.map-pin-list ul li.sightseeing {
  background-image: url('img/map-pin-sightseeing.png');
}

.map-pin-list ul li.townplanning {
  background-image: url('img/map-pin-townplanning.png');
}

.map-pin-list ul li.traffic {
  background-image: url('img/map-pin-traffic.png');
}

.map-pin-list ul li.sports {
  background-image: url('img/map-pin-sports.png');
}

.map-pin-list ul li.media {
  background-image: url('img/map-pin-media.png');
}

.map-pin-list ul li.manufacturing {
  background-image: url('img/map-pin-manufacturing.png');
}

.map-pin-list ul li.economy {
  background-image: url('img/map-pin-economy.png');
}

.map-pin-list ul li.finance {
  background-image: url('img/map-pin-finance.png');
}