@charset "UTF-8";

/* ───────────────────────────────────────────────────────────── fade CSS */
.fade{
	overflow: hidden;
}
.fade div{
	transition: .8s;
}

.fade-up{
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
}
.up{
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}


/* ───────────────────────────────────────────────────────────── totop CSS */
#pageTopSect {
    text-align: center;
    padding: 20px 0 42px;
    background: white;
}
#pageTopSect .back_top {
    display: block;
    margin: 0 auto;
    width: 66px;
    height: 56px;
    position: relative;
}
#pageTopSect .back_top:hover .icon_back_top {
    top: 10px;
}
#pageTopSect .back_top:hover .text_back_top {
    top: 47px;
}
#pageTopSect .back_top .icon_back_top {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 66px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../../img/btn_pagetop_arrow.png);
    background-size: 36px 20px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#pageTopSect .back_top .text_back_top {
    position: absolute;
    top: 43px;
    left: 0;
    width: 66px;
    text-align: center;
    font-size: 11px;
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: normal;
    color: #666;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#pageTopSect a:hover, #pageTopSect a:active {
    text-decoration: underline;
}

#pageTopSect a:active, #pageTopSect a:hover {
    outline: 0;
}


/* ───────────────────────────────────────────────────────────── swiper CSS */
.swiper-container {
	width: 100%;
	height: 550px;
	position: relative;
}
.swiper-slide {
	padding-top: 165px;
	text-align: center;
	color: #fff;
	font-size: 30px;
}
.slide-tit {
	position: absolute;
	width: 100%;
  top: 52%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
  padding: 0 30px;
  z-index: 10;
}
.swiper-container h1 , .swiper-container h2 {
	text-align: center;
}

		@media screen and (max-width: 1680px) {
			.swiper-slide {
				padding-top: 155px;
			}
			}

		@media screen and (max-width: 980px) {
			.swiper-container {
				height: 500px;
			}
			.slide-tit {
				top: 58%;
			}
			.swiper-slide img {
		    height: 345px;
			}
			}

		@media screen and (max-width: 640px) {
			.slide-tit {
				top: 57%;
			}
			}


/* ───────────────────────────────────────────────────────────── banner CSS */
#banner {
    padding: 8em 0 9em 0;
    background-image: url(../../img/main.jpg);
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    height: 550px;
}

		@media screen and (max-width: 1280px){

			#banner, #col2 {
				padding: 11em 0 6em 0;
			}
			#information {
				padding: 5em 0;
			}
			#banner h1, #col2 h1 {
				font-size: 2em;
			}
		}
		@media screen and (max-width: 980px){
			#banner, #col2 {
				background-attachment: scroll;
				padding: 5em 0 3em 0;
   			height: 430px;
			}
			#banner h1 {
				font-size: 2.0em;
			}
			#banner h2 {
    		font-size: 26px;
			}
		}
		@media screen and (max-width: 736px) {
			#banner h1 {
					font-size: 1.3em;
			}
			#banner h2 {
    		font-size: 1.3em;
    		line-height: 2.2;
			}
			#banner, #col2 {
		    padding: 4em 0 3em 0;
			}
		}
		@media screen and (max-width: 480px) {
			#banner h1 {
				font-size: 1.3em;
			}
			#banner h2 {
    		font-size: 1.1em;
			}
			#information {
				padding: 4em 0;
			}
		}



/* ───────────────────────────────────────────────────────────── navi CSS */
nav ul li a {
  display: block;
  padding: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
  transition: all 2s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}


/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #830006;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  100% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}

/* 2023-03-07 added */
.slide-tit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 158px;
}
.slide-tit h1,
.slide-tit h2 {
  line-height: 1.4;
}
.slide-tit h1 {
  margin-bottom: 23px;
}
.slide-tit h2:last-child {
  margin-bottom: 0;
}