/*
Theme Name: Hibiki Child
Template: twentynineteen
*/

/***********************/
/* Typography */
html {
  font-size: 14px;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
  margin: 0;
}
@media screen and (min-width: 768px){
  html,
  body{
    font-size: 18px;
  }
}
:where(button:not(.btn-spmenu)),
input,
select,
optgroup,
textarea {
  font-family: inherit;
  color: #111;
  font-weight: 400;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}
/* Content */

h1:not(.site-title):before,
h2:before {
	content: none;
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}

.nav-links{
  font-size: 0.8rem;
}
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.site-header {
  padding: 0.7em;
	box-shadow:0px 2px 12px -9px #636363;
	box-sizing: border-box;
	margin: 0 0 10px 0;
}

.site-header .inner{
  display: flex;
  justify-content: space-between;
	align-items: center;
}

.site-header .inner .logo img{
	height: 30px;
	width: auto;
}

.site-header .inner .menu a{
  font-size: 0.8em;
  padding: 0.5em 0 0.5em 1.5em;
	margin: 0 0 0 1em;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em 1em;
}

/* .site-header .inner .menu .logout span{
	display: none;
} */

.site-header .inner .menu .dashboard{
	background-image: url('./inc/img/icon-home.png');
}

.site-header .inner .menu .camera{
	background-image: url('./inc/img/icon-camera.png');
}

.site-header .inner .menu .admin{
	background-image: url('./inc/img/icon-setting.png');
}

.site-header .inner .menu .contact{
	background-image: url('./inc/img/icon-mail.png');
}

.site-header .inner .menu .search{
	background-image: url('./inc/img/icon-search.png');
}

.site-header .inner .menu .logout{
	background-image: url('./inc/img/icon-logout.png');
}

@media only screen and (min-width: 768px) {
  .site-header.featured-image {
    min-height: 100vh;
    margin-bottom: 3rem;
  }

	.site-header .inner .menu .logout span{
		display: inline;
	}

	.site-header .inner .logo img{
		height: 40px;
		width: auto;
	}
}
@media only screen and (min-width: 768px) {
  .entry-title,
  .not-found .page-title,
  .error-404 .page-title,
  .has-larger-font-size,
  h2 {
    font-size: 1.6em;
  }
}


.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
  max-width: calc(100% - (2 * 1rem));
  color: #fff;
  padding-left: 0;
  margin-left: 1rem;
}

.site-logo img{
  width: auto;
  height: 35px;
  vertical-align: bottom;
}

.btn-spmenu-wrap{
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 100%;
  background: #CA1358;
  width: 36px;
  height: 36px;
  z-index: 101;
}

.btn-spmenu{
  width: 20px;
  height: 12px;
  margin: 12px auto 12px auto;
}

.btn-spmenu .line{
  background: #fff;
  display: block;
  width: 100%;
  height: 2px;
  transition: 0.2s ease-in-out;
}

/* .btn-spmenu .line.top{
  transform-origin: right center;
}

.btn-spmenu .line.bottom{
  transform-origin: left center;
} */

.btn-spmenu .line.mid{
  margin: 3px auto 3px auto;
}

.btn-spmenu.active .mid{
  opacity: 0;
}

.btn-spmenu.active .top{
  transform: translateY(5px) rotate(45deg);
}

.btn-spmenu.active .bottom{
  transform: translateY(-5px) rotate(-45deg);
}

@media only screen and (min-width: 768px) {
  .featured-image .site-title {
    display: inline-block;
  }

  .btn-spmenu-wrap{
    display: none;
  }

}
/***********************/


/* footer contact button */
.contact-btn{
  display: none;
}

/* contact form */
.contact .contact-table{
	table-layout: fixed;
}

.contact .text{
	margin: 0 0 15px 0;
}

.post-191 .entry-title,
.post-161 .entry-title {
  position: relative;
  padding: 0 0.5em 0.3em 0.2em;
  margin: 0px 0px 0px 0px;
  box-sizing: border-box;
  text-align: center;
  color: #2c6e9e;
}

.contact .contact-table tr{
  margin:0px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.contact .contact-table tr:nth-of-type(1) {
  padding: 10px 0px 10px 0px;
  border-top: 1px solid #eee;
}


.contact .contact-table th,
.contact .contact-table td{
  display: inline-block;
  border: 0px;
}

.contact .contact-table th{
  width:200px;
  vertical-align: top;
  padding-left:10px;
  box-sizing: border-box;
  text-align: left;
}

.contact .contact-table td{
  width:calc(100% - 210px);
  padding-top:0.4em;
  box-sizing: border-box;
}

.contact .contact-table td input,
.contact .contact-table td textarea{
  width:100%;
}

.notice{
	color:#e23524;
	font-size:13px;
	padding:0px 0px 0px 10px;
}

.formBtn{
	text-align: center;
	margin:20px 0px 0em 0px;
}

.formBtn input{
	width: 100%;
  text-align: center;
  color: #fff;
  display: inline-block;
}

.formBtn input[type="submit"]{
	background-color:#26ae01;
	border-radius: 3px;
}

.formBtn input[type="submit"]:hover{
	opacity: 0.8;
}

.formBtn input[type="reset"]{
	background-color:#ccc;
	color:#fff;
	padding:1em 2em;
	font-size:0.875rem;
	text-shadow: none;
	border:none;
	border-radius:2px;
	line-height: 1;
	cursor: pointer;
}

.formBtn input[type="reset"]:hover{
	opacity: 0.8;
}


@media screen and (min-width:48em){

	/* contact form */
	.contact{
		max-width: 800px;
		width: 100%;
		margin: 0 auto 0 auto;
	}

	.contact .contact-table{
		table-layout: fixed;
	}

  .formBtn input{
		width:150px;
		margin:0px 2em 0px 2em;
	}

  .contact-btn{
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: block;
    width: 120px;
    height: 120px;
  }

  .contact-btn:hover{
    opacity: 0.8;
  }

  .contact-btn:link,
  .contact-btn:visited,
  .contact-btn:active{
    color: #fff;
  }

  .contact-btn span{
    display: block;
  }

	.entry-content .wpcf7-response-output{
		width: 100%;
		max-width: 800px;
		margin: 0 auto 0 auto;
	}

}

.page-id-24 .entry-header {
  text-align: center;
}

.page-id-24 .wpcf7 {
  max-width: 100%;
}
.page-id-24 .wpcf7 tr p {
  margin: 0;
}

.entry .entry-content .no-margin{
  margin: 0 0 0 0;
}
.entry .entry-title:before {
  content: none;
}

.site-footer{
	line-height: 0;
}

.copyright{
	text-align: center;
	background-color: #3B88C3;
	height: 25px;
}

.copyright a{
	display: inline-block;
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	height: 25px;
	line-height: 25px;
}

.align-center .entry-title{
	text-align: center;
}

.wp-activate-container{
	width: 90%;
	margin: 0 auto;
}

.wp-activate-container .account{
	margin: 1.5rem 0 1.5rem 0;
}

.wp-activate-container .account span{
	display: block;
	color: #4a4a4a;
	font-size: 0.8em;
}

.wp-activate-container .account .email{
	margin-top: 0.8rem;
}

.wp-activate-container .account .btn-login{
	display: inline-block;
	padding: 0.3rem 1rem 0.3rem 1rem;
	margin: 1rem 0 0 0;
	background-color: #3B88C3;
	color: #fff;
	box-sizing: border-box;
	border-radius: 3px;
}

.wp-activate-container .account .btn-login:hover{
	opacity: 0.8;;
}

.wp-activate-container .bg-gray{
	border-radius: 10px;
	margin: 2rem 0 0 0;
	padding: 1.2rem;
	box-sizing: border-box;
	background-color: #f0f0f0;
}

.wp-activate-container .bg-gray strong{
	display: block;
	margin: 0 0 0.5rem 0;
}

.wp-activate-container .bg-gray p{
	font-size: 0.8rem;
}

@media screen and (min-width: 48em){
	.wp-activate-container{
		max-width: 800px;
	}

}

/* matsui */

/* ==============================================================

=基本フォントスタイル

============================================================== */


/* FAQ専用フォント */
.f-raleway{
  font-family: 'Raleway', sans-serif;
}
.page-id-145 .site-header,
.live-header .site-header{
  margin-bottom: 0;
}

.page-id-145 .site-header .inner,
.live-header .site-header .inner {
  display: flex;
  justify-content:flex-start!important;
  align-items: center;
}
.page-id-145 .site-header .inner div:last-child,
.live-header .site-header .inner div:last-child{
  margin-left: auto!important;
}

.site-header .inner div.headmess{
  font-size: 0.8em;
  box-sizing: border-box;
  padding-left: 2em;
}
.page-id-145 .entry-header,
.live-header .entry-header{
  display: none;
}
.page-id-145 .slick-topmove-box,
.live-header .slick-topmove-box{
  margin-top: 0;
}

.page-id-145 h1.entry-title,
.live-header h1.entry-title{
  text-align: center;
  font-family: 'Zen Maru Gothic', serif;
}

.live-camera-head{
  display: inline-block;
  padding: 0.5em 1em!important;
  text-align: center;
  text-decoration: none!important;
  color: #ffffff!important;
  background-color: #4288bb;
  border-radius: 10px;
  font-size: 1.2em!important;
}
.live-camera-head::before{
  content: '';
  display: inline-block;
  width: 2em;
  height: 1em;
  background-image: url("image/camera-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.2em;
  margin-top:-0.2em;
}
.live-camera-head:hover{
  background-color: #2c6e9e;
}

.live-h2{
  font-family: 'Zen Maru Gothic', serif;
  font-size: 1.6em;
  line-height: 1.5;
}

.am-logo-block{
  margin: 0!important;
  position: relative;
}
.am-logo-block .metaslider-183,
.am-logo-block .metaslider-155{
  position: absolute;
  display: block;
  top:50%;
  left: 50%;
  width: 70%;
  max-width: 600px;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.slick-topmove{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.slick__bg {
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: bottom;
  animation: slkzoomUp 10s linear 0s 1 normal both;
  transform: scale(1);
}
.live-camera-link{
  display: block;
  width: 100%;
  height: 100%;
}

/* scrollボタン */
.scroll-btm{
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("image/scroll.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@keyframes slkzoomUp { /* ズームアップで1.15倍させる指定 */
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes slkzoomLeft {
  0% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media screen and (min-width: 782px){
  .slick__bg {
    height: 500px;
  }
}
@media screen and (min-width: 992px){
  .slick__bg {
    height: calc(100vh - 70px);
  }
}

.slick__bg.slick__bg02{
  background-position: bottom center;
}

.slick__bg {
  background-size: cover;
  background-position: center;
  height: 600px; /* 必要に応じて変更 */
  width: 100%;
}

.slick__bg01 {
  background-image:url("image/slide-image4.jpg");
}
.slick__bg02 {
  background-image:url("image/slide-image3.jpg");
}
.slick__bg03 {
  background-image:url("image/slide2-image3.jpg");
}
.slick__bg04 {
  background-image:url("image/slide2-image3.jpg");
}

.page-id-145 .slick__bg01,
.page-id-239 .slick__bg01 {
  background-image:url("image/slide-image4.jpg");
}
.page-id-145 .slick__bg02,
.page-id-239 .slick__bg02 {
  background-image:url("image/slide-image3.jpg");
}
.page-id-145 .slick__bg03,
.page-id-239 .slick__bg03 {
  background-image:url("image/slide2-image3.jpg");
}
.page-id-145 .slick__bg04,
.page-id-239 .slick__bg04 {
  background-image:url("image/slide2-image3.jpg");
}

.chimei-logo-box{
  position: relative;
}
.chimei-logo-text{
  color: #ffffff;
  font-size: 100px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
.chimei-logo-text{
  width: 70%;
  max-width: 600px;
}
.chimei-logo-text img{
  width: 100%;
  height: auto;
}

.page-id-145 .slick-topmove-box,
.live-header .slick-topmove-box{
  margin-bottom: 0;
}

/* ライブカメラ・あさみなみライブの使い方 */
.page .entry .entry-content > .live-camera-box,
.entry .entry-content > .live-h2,
.entry .entry-content > .how-to-mess,
.entry .entry-content > .how-to-mess > *,
.entry .entry-content > .how-to-mess > .wp-block-group__inner-container > *,
#live-camera , #map,
.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > .live-camera-clm {
	max-width: none;
}

@media only screen and (min-width: 768px) {
  .entry .entry-content > *,
  .entry .entry-summary > * {
    margin: 32px 0;
  }
  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    margin: 0 auto;
  }
  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > .wp-block-columns {
    margin-bottom: 1.75em;
  }
  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
    margin-left: 0;
  }
}

.live-camera-box{
  background-color: rgba(59, 136, 195, 0.2);
  padding: 20px;
}
.live-camera-box h2#live-camera{
  text-align: center;
  font-size: 1.6em;
  margin: 1rem 0;
  line-height: 1.5;
}
.live-camera-box h3{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2em;
  margin: 1rem 0;
}

.live-header .live-camera-box{
  margin-top: 0;
  background-color: rgba(59, 136, 195, 0);
  padding: 0;
}

.live-header .live-camera-box .wp-block-group__inner-container{

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(59, 136, 195, 0.2);
  padding: 20px 30px 50px 30px;
  box-sizing: border-box;
}

.live-header .live-camera-box .live-camera-clm{
  max-width: 1400px;
  margin: 0 auto;
}

.live-camera-box .wp-block-image{
  margin: 0;
}
.live-camera-date{
  text-align: center;
  font-size: 90%;
  padding: 15px 10px;
  background-color: #ffffff;
  margin-top: 0;
  margin-bottom: 0;
}
.live-camera-link{
  margin-top: 0;
  margin-bottom: 0;
}
.live-camera-link a{
  text-decoration: none!important;
  display: block;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(59, 136, 195, 1);
  color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
}

.how-to-mess{
  padding: 20px;
  border: solid 2px #3b88c3;
  border-radius: 15px;
}
.how-to-mess h3{
  color: rgba(59, 136, 195, 1);
  font-family: 'Zen Maru Gothic', serif;
  font-size: 1.2em;
}
.how-to-mess p{
  margin-top: 0;
  margin-bottom: 0;
}
.how-to-mess.sp{
  display: none;
}

@media screen and (min-width: 782px){
  .live-camera-box{
    padding: 40px;
  }
  .how-to-mess{
    padding: 40px;
  }
}
@media screen and (min-width: 992px){
  .live-camera-box{
    padding: 50px;
  }
  .how-to-mess{
    padding: 40px;
  }
}

.contact-form-link{
  margin: 20px auto!important;
}


.box-parent {
  width:100%;
  height:auto;
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;/*折り返し指定*/
  justify-content:space-between;/*子要素を均等に配置して余白を設ける*/
}
.box-parent::after{
  content:"";
  display: block;
  width:32%;
}
.box-child {
  width:32%;height:auto;
  display:flex;/*装飾用*/
  flex-direction:column;/*装飾用*/
  padding-bottom:30px;/*装飾用*/
}
.box-child:nth-of-type(n+4) {
  margin-top:10px;/*子要素を折り返した垂直方向の上部の余白指定*/
}
.box-child h3 {
  width:100%;
  height:auto;
  min-height:80px;/*装飾用*/
  padding:0 20px;box-sizing:border-box;/*装飾用*/
  display:flex;
  justify-content:center;
  align-items:center;/*装飾用*/
}
.box-img {
  width:100%;height:auto;
  position:relative;
}
.box-img::after {/*画像のアスペクト比固定で高さを可変にする設定*/
  display:block;
  content:'';
  width:100%;height:0;
  padding-top:66.6%;
}
.box-img img {
  display:block;
  width:100%;height:100%;/*画像のアスペクト比固定で高さを可変にする設定*/
  object-fit:cover;
  position:absolute;
  top:0;left:0;bottom:0;right:0;
}


@media screen and (max-width: 1360px) {
  .box-parent {
    width:90%;
    max-width:initial;
  }
}
@media screen and (max-width: 1280px) {
  .box-child {
    width:49%;
  }
  .box-child:nth-of-type(n+3) {
    margin-top:30px;
  }
}
@media screen and (max-width: 680px) {
  .box-child {
    width:100%;
  }
  .box-child:nth-of-type(n+2) {
    margin-top:30px;
  }
  .site-header .inner div.headmess{
    display: none;
  }
  .how-to-mess.sp{
    display: block;
    margin: 20px;
  }
}

/* お問い合わせ */
.messbox{
  border: solid 1px #cccccc;
  padding: 1em;
  margin-bottom: 1em;
}
.messbox p{
  margin: 0!important;
}

.custom-wpcf7c-confirmed textarea{
  background-color: #eeeeee!important;
  border-color: #cccccc!important;
}

.custom-wpcf7c-confirmed .wpcf7c-conf{
  background-color: #eeeeee!important;
  border-color: #cccccc!important;
}
.wpcf7-form.init .wpcf7c-conf{
  background-color: #ffffff!important;
}

.wpcf7-response-output{
  margin: 30px auto!important;
}

.wpcf7-spinner{
  display: block!important;
  margin: 0 auto!important;
}

.formBtn input{
  margin-left: 10px;
  margin-right: 10px;
}
.custom-wpcf7c-confirmed .formBtn input.wpcf7c-conf{
  display: none;
}

@media screen and (max-width: 680px) {
  table.contact-table tr{
    display: flex;
    flex-wrap: wrap;
  }
  table.contact-table tr td,
  table.contact-table tr th{
    width: 100%!important;
    box-sizing: border-box!important;
  }
}
.top-slider {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.top-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.15); /* ← 初期状態を少し拡大 */
  transform-origin: center center; /* ← 拡大中心を固定 */
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  will-change: opacity, transform;
}

.top-slider .slide.active {
  opacity: 1;
  animation: zoomIn 5s linear forwards;
}

.top-slider .slide.final {
  opacity: 1 !important;
  animation: none;
  transform: scale(1.15); /* ← 最後は少し拡大のまま停止 */
}

@keyframes zoomIn {
  0% { transform: scale(1.05); }
  100% { transform: scale(1.15); }
}


.slider-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  opacity: 0;
  animation: fadeInLogo 2s ease forwards;
  animation-delay: 1.75s;
}

@keyframes fadeInLogo {
  0% { opacity: 0; transform: translate(-50%, -45%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* PC用 */
.slider-logo img {
  max-width: 600px;
  width: 100%;
  height: auto;
  opacity: 0.95;
}

/* 📱 スマホ対応 */
@media screen and (max-width: 768px) {
  .slider-logo img {
    max-width: 90vw;  /* 画面幅の80%に調整 */
    max-width: none;   /* ← 600px制限を解除 */
  }

  .slider-logo {
    top: 48%;          /* 少しだけ中央寄せ */
  }
}

/* さらに小さいスマホ（480px以下） */
@media screen and (max-width: 480px) {
  .slider-logo img {
    width: 92vw;       /* ← もう少し広く（ギリギリまで） */
  }

  .slider-logo {
    top: 46%;          /* やや上に調整 */
  }
}

.footer-banner-area {
  width: 100%;
  background-color: #f3f3f3;
  padding: 40px 0;
}

.footer-banner-container {
  display: flex;
  justify-content: flex-start; /* 中央揃え */
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px; /* 最大幅を1200pxに固定 */
  margin: 0 auto; /* 画面中央に配置 */
  padding: 0 20px;
}

.footer-banner-item {
  flex: 1 1 calc(33.333% - 20px);
  max-width: 380px; /* 3枚が1200px以内で収まるよう調整 */
}

.footer-banner-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .footer-banner-container {
    justify-content: center;
  }
  .footer-banner-item {
    flex: 1 1 100%;
    max-width: 600px;
  }
}