/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 21 2026 | 08:10:16 */
/*トップページのメイン*/
.top_cont {
		position:relative;
	width:100vw;
height:50vw;
	margin-top:60px;
		background-image:url("https://heiwakaikan.com/wp/wp-content/uploads/2022/02/top_main_pc.jpg");
	background-size:100vw 50vw;
}
.top_image {
width:100vw;
height:50vw;
	position:relative;
	overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
@media only screen and (max-width: 750px) {
	.top_cont {
		height:143vw;
		background-image:url("https://heiwakaikan.com/wp/wp-content/uploads/2022/02/top_main_sp.jpg");
		background-size:100vw 143vw;
			margin-top:60px;
	}
.top-image{
height:143vw;
}
}
/*トップページのアロー*/
.arrowWrap {
}
.arrow {
  width: 15px;
  margin: 0 auto;
  -webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
  animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
}
.arrow span {
  position: relative;
  display: block;
  left: 50%;
	top:48vw;
}
.arrow span:before {
  content: '';
  width: 15px;
  height: 15px;
  border: 0;
  border-top: solid 2px #000000;
  border-right: solid 2px #000000;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
@keyframes arrow {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%, -8px, 0);
    transform: translate3d(-50%, -8px, 0);
  }
}
@media only screen and (max-width: 750px) {
	.arrow span {
		top:135vw;
	}
}
/*湯気*/
.steam-01-1 {
	position:absolute;
	display:block;
	left:10%;
	top:15vw;
	  -webkit-animation: steam-move-01-1 10s infinite linear;
  animation: steam-move-01-1 10s infinite linear;
}
.steam-01-2 {
	position:absolute;
	display:block;
	left:3%;
	top:0;
	  -webkit-animation: steam-move-01-2 10s infinite linear;
  animation: steam-move-01-2 10s infinite linear;
}
.steam-02-1 {
	position:absolute;
	display:block;
	right:10%;
	top:0;
		  -webkit-animation: steam-move-02-1 5s infinite linear;
  animation: steam-move-02-1 5s infinite linear;
}
.steam-02-2 {
	position:absolute;
	display:block;
	right:1%;
	top:15vw;
		  -webkit-animation: steam-move-02-2 7s infinite linear;
  animation: steam-move-02-2 7s infinite linear;
}
.steam-02-1 img,.steam-01-1 img {
	height:50vw;
	width:auto;
}
/*湯気のアニメーション*/
@keyframes steam-move-01-1 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }
  6% {
    opacity: 0.15;
  }
  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 0.75;
  }
  66% {
    transform: scale(1, 1.5) rotateY(4deg);
	  opacity:0.25;
  }
  100% {
    filter: blur(18px);
    transform: scale(1.5, 2) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}
@keyframes steam-move-01-2 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }
  20% {
    opacity: 0;
    bottom: -1300px;
  }
   50% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 0.75;
  }
  75% {
    transform: scale(1, 1.5) rotateY(4deg);
	  opacity:0.25;
  }
  100% {
    filter: blur(18px);
    transform: scale(1.5, 2) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}
@keyframes steam-move-02-1 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }
  6% {
    opacity: 0.15;
  }
  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 1;
  }
  66% {
    transform: scale(1, 1.7) rotateY(4deg);
	  opacity:0.15;
  }
  100% {
    filter: blur(18px);
    transform: scale(1.5, 2) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}
@keyframes steam-move-02-2 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }
  6% {
    opacity: 0.15;
  }
  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 1;
  }
  66% {
    transform: scale(1, 1.5) rotateY(4deg);
	  opacity:0.15;
  }
  100% {
    filter: blur(18px);
    transform: scale(1.5, 2) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}
@media only screen and (max-width: 750px) {
.steam-02-1 img {
	height:143vw;
	width:auto;
}
}
/*トップの文字*/
.top-butaman img {
position:absolute;
top:70px;
right:30vw;
margin:0 auto;
width:35vw;
height:auto;
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}
@media only screen and (max-width: 750px) {
.top-butaman img {
top:40px;
right:17vw;
width:65vw;
}
}


/***ニュース***/
.news-flex {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
.news-cont,.news-slider {
	width:48%;
	height:auto;
}
.news-cont h3 {
	width:100%;
	border-bottom:1px solid #14813B;
	color:#000000;
}
.news-cont-news {
	width:100%;
}
.news-cont-news ul {
	padding-left:0;
}
.news-cont-news ul li {
	list-style:none;
	border-bottom:1px dotted #14813B;
	padding-bottom:15px;
	margin-bottom:15px;
	color:#14813B;
	margin-left:0;
}
.news-cont-news ul li a {
	color:#000000!important;
}
.news-old {
	text-align:right;
}
@media only screen and (max-width: 750px) {
	.news-flex {
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.news-cont,.news-slider {
	width:100%;
	height:auto;
	margin-bottom:30px;
}
	.news-cont-news ul li {
	flex-direction:column-reverse;
	justify-content:flex-end;
	align-items:flex-start;
}
	.news-cont-news ul li a {
	width:100%;
}
}

/*トップページのコンテンツ*/
.top-cont {
background-image :url("https://heiwakaikan.com/wp/wp-content/uploads/2022/02/bg_honkan.png"), url("https://heiwakaikan.com/wp/wp-content/uploads/2022/02/bg_naha.png"), url("https://heiwakaikan.com/wp/wp-content/uploads/2022/02/pattern.jpg");
background-repeat:no-repeat, no-repeat, repeat;
background-size:50%, 50%, 10%;
background-position:left top, right bottom, center;
background-attachment:fixed, fixed, local;
padding-bottom:50px;
}
.top-cont h2 {
text-align :center;
padding-top:70px;
	font-size:35px!important;
	color:#000000;
	margin-bottom:30px;
}
.top-cont-read {
margin-top:50px;
}
.top-cont-read p {
margin:0 auto;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
text-align:justify;
text-justify:inter-ideograph;
line-height:2em;
	font-size:17px!important;
	margin-bottom:50px;
}
.top-cont-sub {
display:flex;
justify-content:space-around;
-webkit-justify-content:space-around;
-ms-justify-content:space-around;
padding-bottom:150px;
}
.top-cont-sub img {
width:32%;
height:auto;
margin:0 !important;
}
.top-cont2 {
display:flex;
justify-content:space-between;
-webkit-justify-content:space-between;
-ms-justify-content:space-between;
align-items:center;
-webkit-align-items:center;
-ms-align-items:center;
padding-bottom:50px;
}
.top-cont2-2 {
display:flex;
flex-direction:row-reverse;
-webkit-flex-direction:row-reverse;
-ms-flex-direction:row-reverse;
justify-content:space-between;
-webkit-justify-content:space-between;
-ms-justify-content:space-between;
align-items:center;
-webkit-align-items:center;
-ms-align-items:center;
}
.top-cont2-cont {
width:50%;
}
.top-cont2-cont h3 {
	border-bottom:1px solid #14813B;
	padding-bottom:10px;
	font-weight:700!important;
font-size:30px!important;
	color:#000000;
}
.top-cont2-cont p {
margin-bottom:20px;
	line-height:1.7em!important;
font-size:17px!important;
}
.top-cont2-cont2 {
width:45%;
}
.top-cont2 img, .top-cont2-2 img {
width:100%;
height:auto;
}
/***SP用***/
@media only screen and (max-width: 750px) {
.top-cont {
padding-bottom:20px;
}
.top-cont h2 {
text-align :left;
}
.top-cont-read p {
writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
-webkit-writing-mode:horizontal-tb;
	line-height:1.7em;
}
.top-cont-sub {
	flex-direction :column;
	align-items:center;
padding-bottom:100px;
}
	.top-cont-sub img {
width:90%;
		margin-bottom:20px!important;
	}
.top-cont2, .top-cont2-2  {
flex-direction:column;
-webkit-flex-direction:column;
-ms-flex-direction:column;
padding-bottom:50px;
}
.top-cont2-cont, .top-cont2-cont2  {
width:100%;
}
.top-cont2 img, .top-cont2-2 img {
padding-top :30px;
}
}

/*トップページのバナー*/
.foot-bnr {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
.foot-bnr a {
	width:23%;
	height:auto;
}
@media only screen and (max-width: 750px) {
	.foot-bnr {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.foot-bnr a {
	width:95%;
	height:auto;
	margin-bottom:10px;
}
}