@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/*==========================================================
 *  全体  
 *=========================================================*/
/* Vueのちらつき防止 */
[v-cloak] {
  display: none;
}

/* メニューとコンテンツ間の高さを小さく */
.content {
  margin-top: 2px;
}

/*------------------------------------------------
 *  tableの「スクロールできます」を非表示  
 *-----------------------------------------------*/
.scroll-hint-icon-wrap {
  display: none;
}

/*------------------------------------------------
 *  シェアボタン  
 *-----------------------------------------------*/
/* 凸凹   [作者: 北]　からコピー */

.share-menu-content .sns-buttons {
	background: var(--color-bg);
}


.sns-share-buttons a {
	box-shadow: 6px 6px 12px var(--color-shadow-dark), -6px -6px 12px var(--color-shadow-light);
	border: solid 3px var(--color-bg);
}


.sns-share-message {
	text-shadow: 1px 1px 0 var(--color-shadow-light);
}

.sns-share-buttons a, .share-menu-content .sns-buttons {
	border-radius: 10%;
}

/*SNSシェア*/
.sns-share-buttons a {
  margin: 6px;
  width: calc(100% / 9 - 12px)!important;
  height: 3em!important;
  flex-direction: column;
}
.sns-share-buttons a .button-caption {
  margin-left: 0px!important;
  font-size: 0.5em!important;
}


.sns-share-buttons, .sns-buttons {
  margin-bottom: 8px;
}

.sns-share-buttons a:hover {
  transition: all .3s ease-in-out;
  box-shadow: none;
}

.sns-share-buttons a:active {
  box-shadow: inset 1px 1px 3px var(--color-shadow-dark), inset -3px -3px 6px var(--color-shadow-light);
}

.sns-share-buttons {
  justify-content: center;
}


@media screen and (max-width: 834px) {
  .sns-share-buttons a {
    width: calc(100% / 3 - 12px)!important;
  }
}


/*------------------------------------------------
 *  ヘッダー  
 *-----------------------------------------------*/
/* ヘッダー画像：トップページ以外 */
:not(.home) .header {
  background-image:url(images/header-image1600.jpg);
  width: 100%;
  background-position: center;
}


 /* ヘッダー画像：トップページのみ */
.home .header {
  background-image:url(images/home-header-image1600.jpg);
  width: 100%;
  background-position: bottom;
}


/*------------------------------------------------
 *  フッター  
 *-----------------------------------------------*/
#footer-in {
  background-color: #1b75bb;
  color: white;
}



/*------------------------------------------------
 *  ナビメニュー  
 *-----------------------------------------------*/
#navi {
  /*background-color: linear-gradient(#84d1ff, #b2e4fb);*/
  background-image: url(images/kumo.png);
}
/* #0dabe7, #acd5ec */
#navi-in {
  background: no-repeat url(images/sun.png) ;
  background-position: right;
}




 ul#menu-head-menu li {
  background-image: url(images/navi-menu-bg02.png);
}

ul#menu-head-menu li a {
  background-size: cover;
  transition: background-color 0.3s; /* 変化を滑らかにするためのトランジション */
  text-shadow: #0765B3 1px 1px 2px; /* #02abbc */

}

ul#menu-head-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.3);   /* 半透明の白色背景 */
  color: #0235b2;
  text-shadow: white 1px 1px 2px; /* #02abbc */

}




/*------------------------------------------------
 *  サイドバー  
 *-----------------------------------------------*/
h3.widget-sidebar-title {
  background-color: #00a8d7;
  text-align: center;
}

ul#menu-show-data-1 li,
ul#menu-show-kansui-1 li {
  background-image: url(images/menu-bg01.png);
  /*text-align: center;*/
  margin-bottom: 5px;
}

ul#menu-show-data-1 li a, 
ul#menu-show-kansui-1 li a{
  color: white;
  font-size: 1.2em;
  text-align:justify;
  text-align-last:justify;
  padding: 0 2.2em;
  background-size: cover;
  transition: background-color 0.3s; /* 変化を滑らかにするためのトランジション */
  text-shadow: #0765B3 1px 1px 2px; /* #02abbc */
}


ul#menu-show-data-1 li:nth-child(1) {
  background-position: calc(250px * 0) 0px;
}

ul#menu-show-data-1 li:nth-child(2) {
  background-position: calc(250px * 1) 0px;
}

ul#menu-show-data-1 li:nth-child(3) {
  background-position: calc(250px * 2) 0px;
}

ul#menu-show-data-1 li:nth-child(4) {
  background-position: calc(250px * 3) 0px;
}

ul#menu-show-data-1 li:nth-child(5) {
  background-position: calc(250px * 4) 0px;
}

ul#menu-show-data-1 li:nth-child(6) {
  background-position: calc(250px * 0 + 10px) 0px;
}

ul#menu-show-data-1 li:nth-child(7) {
  background-position: calc(250px * 1 + 10px) 0px;
}

ul#menu-show-kansui-1 li:nth-child(1) {
  background-position: calc(100px) 0px;
}



ul#menu-show-data-1 li a:hover,
ul#menu-show-kansui-1 li a:hover {
  background-color: rgba(255, 255, 255, 0.5);   /* 半透明の白色背景 */
  width: 100%;
  color: #555;
  
}










/*==========================================================
 *  トップページ  の設定
 *=========================================================*/
/* タイトルと日付を非表示
 * （※cocoonではhomeでもタイトルが表示されるのでその対応）
 */
 .home h1.entry-title, 
 .home .date-tags,
 .display-none {
   display: none;
 }



/* 稼働状況、降水量のタイトル */
 .home h6.home-status-title {
  margin-bottom: 0px;
  padding-bottom: 0px;
  padding-left: 1.2em;
  background: url(images/icon.png) no-repeat;
  background-position-y: center;
}

/* 稼働状況、降水量のボックス */
.home .home-status-box {
  margin-bottom: 0px;
}


/* 稼働状況の注意書き */
.home p.home-note, .home .home-updatetime {
  font-size: 0.8em;
  margin: unset;
}


/* 稼働状況・雨量を表示する表の設定 */
.home th {
  background-color: #bce4ec;
}

.home tr:nth-child(odd) {       /* 奇数行 */
    background-color: white;
}

.home tr:nth-child(even) {          /* 偶数行 */
    background-color: #fefce1;
}

.home table, .home th, .home td {
  border: 1px solid #787878;
}

.home tr:first-child td {
  border-top: 3px double #787878; /* 上部に二重線を追加 */
}


/* 風向・風速情報 */
/* 風向表示 */
.wind-vane {
  position: relative;
  width: 100%;
  height: 100%;
  display : inline-block;
  padding: 0;
}

.wind-vane div {
  display: block;
}

.x_wind-vane-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}






.wind-vane-direction {
  position: absolute;

  width: 10%;       /* 64/640 = 0.1 (10%) */
  height: 35.9375%; /* 230/640 = 0.359375 (35.9375%) */
  top: 14.0625%;    /*  90/640 = 0.140625 (14.0625%) */
  left: 45%;        /* 288/640 = 0.45 (45%) */
  /*transform-origin: calc(50% + 17.5%) calc(50% + 121.875%); /* 回転の中心点を設定 */
  transform-origin: center bottom; /* 回転の中心点を設定 */

  /*
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  */
  /*transform: rotate({$windInfo['dir-deg']}deg); */
}

.wind-vane-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*color: white;*/
  text-align: center;
}

div.wind-vane-text {
    line-height: 1.2em;                        /* 1行の高さ */
}

.wind-vane-text-direction {
  font-size: 1.2em;
}
.wind-vane-text-power {
  font-size: 1em;
}

/* 風力表示 */
#wind-power table, #wind-power td {
  border: 1px solid #333;
  font-size: 1.125em;
}


.wind-power-label {
    height: 2.5em;
}

.label-text {
    background-color: #bce4ec;
}

.wind-power-data {
    height: 2.5em;
}

.wind-power-dir {
    width: 40%;
    padding-right: 1em;
    text-align: right;
}

.wind-power-power {
    width: 60%;
    text-align: right;
    padding-right: 2em;
}

#wind-power .scrollable-table {
  margin-bottom: 0px;
}



/*==========================================================
 *  お問い合わせページ  の設定
 *=========================================================*/
/* 幅を調整する */
.formBox input,
.formBox select {
	width: auto;
}



/* 問い合わせフォームのデザイン（観音マリーナを参考）
/* [ formBox ] */
.formBox dl {
	border-top: 1px solid #d1d1d1;
	line-height: 1.2;
}
.formBox dt {
	/*position: relative;*/
	margin-top: 30px;
	padding: 0 1em 0 1.5em;
	font-weight: normal;

  background: url(images/icon.png) no-repeat;
  background-position-y: center;

}

.formBox dt p {
  margin-bottom: 0px;
}


.formBox dd {
	margin: 10px 0 30px;
	padding: 0 1em 30px 2em;
	/*border-bottom: 1px solid #d1d1d1;*/
}

.formBox dd:empty {
	display: none;
}

.formBox span[role="alert"] {
	margin: 5px 0;
	font-size: 1.4rem;
}

.formBox dd ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.formBox dd li {
	margin-top: 10px;
}

.formBox dd p {
	margin: 10px 0 0;
}

.formBox dd .note {
	padding-left: 1em;
	text-indent: -1em;
}

/* 送信ボタンを中央に調整（wpcf7-spinnerを下に移動） */
div.wpcf7 .wpcf7-spinner {
  display: block;
}

@media screen and (max-width: 768px) { /* [ Mobile ] */

	.formBox .width100 {
		width: 100%;
	}

	.no-resize {
		border: 3px solid red;
		width: auto;
	}


	.formBox dt {
		margin-top: 20px;
	}
	.formBox dd {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	.formBox span[role="alert"] {
		font-size: 1.2rem;
	}
} /* */


/* 送信ボタン（が「中」にならないのでここで設定） */
.formBox .btn-mm {
	width: 126px;
}

.formBox input, .formBox textarea {
	border-radius: 5px;
}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}