@charset "UTF-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
body{font-size:16px;}

.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-medium {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.shippori-mincho-semibold {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.shippori-mincho-bold {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.shippori-mincho-extrabold {
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
}

.rel{position:relative;}
.abs{position:absolute;}

.floatingKashiwa{
	animation-name:banner-open;
	animation-duration:1s;
	animation-timing-function:ease;
}

@keyframes banner-open {
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

.floatingKashiwa img{width:100%;max-width:100%;height:auto;vertical-align:bottom;}

.floatingKashiwa a,.floatingKashiwa a:hover,.floatingKashiwa a:visited{color:#000;text-decoration:none;}
.floatingKashiwa a:hover .inner{opacity:0.7;}
.floatingKashiwa .closeBtn{
	background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22close_btn%22%20data-name%3D%22close_btn%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2042.58%2042.58%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fff%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23222%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%3E%0A%20%20%20%20%3Crect%20class%3D%22st1%22%20x%3D%22.51%22%20y%3D%22.51%22%20width%3D%2241.57%22%20height%3D%2241.57%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M42.58%2C42.58H0V0h42.58v42.58ZM1.01%2C41.57h40.56V1.01H1.01v40.56Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2233.59%2011.69%2031.45%209.54%2021.01%2019.99%2010.56%209.54%208.42%2011.69%2018.86%2022.13%208.42%2032.57%2010.56%2034.72%2021.01%2024.28%2031.45%2034.72%2033.59%2032.57%2023.15%2022.13%2033.59%2011.69%22%2F%3E%0A%3C%2Fsvg%3E');
	background-position:center center;
	background-repeat:repeat;
}

.floatingKashiwa{position:fixed;z-index:9900;}
.floatingKashiwa .closeBtn{z-index:10000;cursor:pointer;}
.floatingKashiwa .inner{
	background-color:#fff;
	box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.73);
	transition: opacity 0.5s ease-out;
}

.floatingKashiwa .openImg{z-index:9930;width:35.46vmin;}
.floatingKashiwa .openImg img{filter: drop-shadow(1.8px 1.8px 4.5px #000);}
.floatingKashiwa .detail{display:inline-block;background:#000;color:#fff;}
.floatingKashiwa .texts p.readcopy{line-height:1.9;}
.floatingKashiwa .texts h3.mainMessage{line-height:1.375;}
.floatingKashiwa .detail{line-height:1;}

.floatingKashiwa .closeBtn{top:-1.8vmin;left:-1.8vmin;}
.floatingKashiwa{bottom:calc(calc(100vh - 70vmin) / 2);left:7.4vmin;}


.floatingKashiwa .openImg{top:-3vmin;right:-15.466vmin;}
.floatingKashiwa .closeBtn{width:5.33vw;height:5.33vw;}
.floatingKashiwa .inner{width:60.8vw;padding:2.4vmin 1.6vmin;}
.floatingKashiwa .texts p.readcopy{font-size:1.0rem;}
.floatingKashiwa .texts h3.mainMessage{font-size:1.25rem;}
.floatingKashiwa .detail{font-size:0.7rem;padding:1.33vmin 1.86vmin;bottom:1.06vmin;right:1.33vmin;border-radius:5.33vmin;}
.floatingKashiwa p.opennews{font-size:1.0rem}
	
@media screen and (min-width:480px) {
	@media screen and (orientation: landscape) {
	.floatingKashiwa{bottom:2.2vh;}
	}
.floatingKashiwa .closeBtn{width:1.2vw;height:1.2vw;}
.floatingKashiwa .inner{
	width:60.8vmin;
	padding:2.4vmin 1.6vmin;
	}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
.floatingKashiwa .openImg{width:35.46vmin;}
.floatingKashiwa .inner{
	width:60.8vmin;
	padding:2.4vmin 1.6vmin;
	}
.floatingKashiwa .closeBtn{width:6vw;height:6vw;}
.floatingKashiwa .texts p.readcopy{font-size:1.125rem;}
.floatingKashiwa .texts h3.mainMessage{font-size:1.75rem;}
.floatingKashiwa .detail{font-size:1rem;padding:1.25vmin 1rem;bottom:1.06vmin;right:1vmin;border-radius:5.33vmin;}
@media screen and (orientation: landscape) {
	.floatingKashiwa .closeBtn{width:5.33vh;height:5.33vh;}
	.floatingKashiwa .texts p.readcopy{font-size:0.9rem;}
	.floatingKashiwa .texts h3.mainMessage{font-size:1.15rem;}
	.floatingKashiwa .detail{font-size:0.7rem;padding:1.33vmin 1.86vmin;bottom:1.06vmin;right:1.33vmin;border-radius:5.33vmin;}
	.floatingKashiwa p.opennews{font-size:0.9rem}
	}
}

@media screen and (min-width:1024px) {
.floatingKashiwa .openImg{width:258px;}
.floatingKashiwa .closeBtn{top:-14px;left:-17px;}
.floatingKashiwa{bottom:70px;left:75px;}
.floatingKashiwa .openImg{top:-24px;right:-110px;}
.floatingKashiwa .closeBtn{width:45px;height:45px;}
.floatingKashiwa .inner{width:448px;padding:16px 13px;}
.floatingKashiwa .texts p.readcopy{font-size:17px;}
.floatingKashiwa .texts h3.mainMessage{font-size:24px;}
.floatingKashiwa .detail{font-size:16px;padding:9px 12px;bottom:7px;right:12px;border-radius:20px;}
.floatingKashiwa p.opennews{font-size:16px}
}

.floatingKashiwa p.opennews {
  display: flex;
  align-items: center;   /* 文字色やフォントは適宜変更してください */
  color: #333;
  margin: 0px 0 3px; /* 上下の余白 */
}

.floatingKashiwa p.opennews::before,
.floatingKashiwa p.opennews::after {
  content: ""; /* 擬似要素に必須 */
  display: block;
  /* 線の高さ（1px）と色を指定 */
  height: 1px;
  background-color: #333; /* 線の色 */
  /* テキストとの間に少し隙間を空ける */
  margin: 0 5px;
}

.floatingKashiwa p.opennews::before {
  /* 前に20pxの線 */
  width: 20px;
}

.floatingKashiwa p.opennews::after {
  /* 後ろには長く、残りのスペースを全て埋める */
  flex-grow: 1; 
}