@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



html {
	scroll-behavior: smooth;
}
body {
	font-family: "Oswald","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h2 {
	font-size: 36px;
	margin: 0 0 20px;
	font-weight: 700;
}
h2 .english {
	font-size: 18px;
	font-weight: 400;
	display: block;
	line-height: 1;
}
h3 {
	font-size: 24px;
	font-weight: 700;
}

a {
	transition: opacity 0.5s;
}
a:hover {
	opacity: 0.6;
}

.sp {
	display: none;
	@media screen and (max-width: 760px) { 
		display: inline-block;
	}
}

body {
	position: relative;
}
header {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	color: #fff;
	transition: background 0.2s;
	background: transparent;
}
header.black {
	color: #000;
	background: rgba(255, 255, 255, 0.6);
}
header.scroll {
	mix-blend-mode: difference;
}

.hd_wrap {
	width: 100%;
	padding: 10px 30px;
	display: flex;
	justify-content: space-between;
}
.hd_wrap h1{
	height: 40px;
}
.hd_wrap h1 img{
	height: 40px;
	width: auto;
	vertical-align: top;
}
.hd_wrap ul {
	list-style: none;
    display: flex;
    align-items: center;
}
.hd_wrap ul li {
	display: inline-block;
	margin: 0 0 0 25px;
	font-size: 16px;
}
.hd_wrap ul li a {
}
.kv {
	width: 100%;
	height: calc(100vh - 160px);
	background-size: cover;
	position: relative;
	z-index: 0;
}
.kv:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: calc(100vh - 160px);
	background: url(../img/dots.png) repeat left center;
	z-index: 2;
}

.kv .movie__video {
	position: relative;
	object-fit: cover;
	height: calc(100vh - 160px);
	width: 100%;
	left: 0; 
  	top: 0;
	z-index: 1;
}
.kv p {
	font-size: 5vw;
    position: absolute;
    left: 11vw;
    top: 11vw;
	color: #000;
	z-index: 4;
	line-height: 1.4;
	font-weight: 700;
}


.kv p span {
      position: relative;
      display: inline-block;
      color: #000;
    }

.kv p span::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: #fff;
      z-index: -1;
      transition: all 0.5s;
      animation: slide-bg 1s forwards;
    }

    @keyframes slide-bg {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }

.kv p.small {
    font-size: 1.5vw;
    top: 28vw;
	font-weight: 400;
	z-index: 4;
	color: #fff;
}
.slide {
	margin: 10px 0 20px;
	width: 100%;
	z-index: 3;
}
.slide ul {}
.slide ul li.swiper-slide {
	width: 320px;
	height: 150px;
}
.slide ul li img {
	width: 100%;
	height: auto;
}
.contact {
	width: 100%;
	padding: 30px 0;
	text-align: center;
	background: #fff;
	z-index: 3;
	position: relative;
}

.contact h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	margin: 0 0 10px;
}
.contact p {
	font-size: 18px;
}
.contact ul {
	list-style: none;
	display: flex;	
	justify-content: center;
	margin: 10px 0 0;
}
.contact ul li a {
	display: block;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	padding: 10px 60px;
	line-height: 1;
	border-radius: 10px;
	filter: drop-shadow(0 0 0.2rem #666);
}
.contact ul li.tel {
	margin: 0 10px 0 0;
}
.contact ul li.tel a {
	background: #F21414;
}
.contact ul li.line a{
	background: #299A31;
}
.contact ul li a {}
.contact small {
	font-size: 12px;
}
.fade-in-slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.8s ease-out;
}

.fade-in-slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.sec01 {
	padding: 110px 0 60px;
	background: #fff;
	z-index: 3;
	position: relative;
	overflow: hidden;
}
.sec01:before {
	content: "";
	background: #a4cbf4;
	width: 700px;
    height: 700px;
    position: absolute;
    z-index: 4;
    display: block;
    transform: rotate(70deg);
    bottom: 115px;
    right: 0;
}

.sec01 .wrap {
	background: url(../img/sec01_img.png) no-repeat right top;
	background-size: auto 100%;
	width: 960px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}
.sec01 .wrap_title {
	width: 100%;
}
.sec01 .wrap_text p.big {
	font-size: 26px;
	margin: 0 0 20px;
}
.sec01 .wrap_text .name {
	font-size: 20px;
	margin: 20px 0 0;
}
.sec02 {
    position: relative;
	z-index: 3;
    padding: 100px 0;
    background: 
	 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path transform="scale(1, -1) translate(0, -320)" d="M0,224L80,197.3C160,171,320,117,480,122.7C640,128,800,192,960,202.7C1120,213,1280,171,1360,149.3L1440,128L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" fill="rgba(255, 255, 255, 1)"></path></svg>') top center no-repeat,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M0,224L80,197.3C160,171,320,117,480,122.7C640,128,800,192,960,202.7C1120,213,1280,171,1360,149.3L1440,128L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" fill="white"></path></svg>') bottom center no-repeat,
        linear-gradient(225deg, #daecff 25%, #fff 25%, #fff 50%, #daecff 50%, #daecff 75%, #fff 75%);
    background-size: 100% 100px, 100% 100px, 40px 40px;

}
.sec02.fadeup {}
.sec02 .sec02_list {
	list-style: none;
	width: 960px;
	margin: 40px auto 0;
}
.sec02 .sec02_list li {
	display: flex;
	margin: 40px 0 0;
	background: #fff;
	border-radius: 20px;
}
.sec02 .sec02_list li.box_rv {
	flex-direction: row-reverse;
}
.sec02 .sec02_list li .img {
	width: 40%;
}
.sec02 .sec02_list li .img img {}
.sec02 .sec02_list li .txt {
	width: 60%;
	padding: 20px;
}
.sec02 .sec02_list li .txt h3 {
	margin: 0 0 20px;
}
.sec02 .sec02_list li .txt p {}

.sec03 {
	padding: 60px 0 110px;
	background: #fff;
	z-index: 3;
	position: relative;
}
.sec03 h2 {
	text-align: center;
}
.sec03 .sec03_list {
	list-style: none;
	width: 960px;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between;
}
.sec03 .sec03_list li {
	width: calc((100% - 200px) / 3);
}
.sec03 .sec03_list li .img {
	text-align: center;
}
.sec03 .sec03_list li .img img {
	width: 200px;
	height: auto;
}
.sec03 .sec03_list li .txt {}
.sec03 .sec03_list li .txt h3 {
	text-align: center;
	margin: 20px 0 0;
}
.sec03 .sec03_list li .txt p.date {
	margin: 0 0 20px;
	font-size: 14px;
	color: #999;
	text-align: center;
}
.sec04 {
    padding: 100px 0;
	z-index: 3;
	position: relative;
    background: 
	 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path transform="scale(1, -1) translate(0, -320)" d="M0,224L80,197.3C160,171,320,117,480,122.7C640,128,800,192,960,202.7C1120,213,1280,171,1360,149.3L1440,128L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" fill="white"></path></svg>') top center no-repeat,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M0,224L80,197.3C160,171,320,117,480,122.7C640,128,800,192,960,202.7C1120,213,1280,171,1360,149.3L1440,128L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" fill="white"></path></svg>') bottom center no-repeat,
        linear-gradient(225deg, #daecff 25%, #fff 25%, #fff 50%, #daecff 50%, #daecff 75%, #fff 75%);
    background-size: 100% 100px, 100% 100px, 40px 40px;
}
.sec04 h2 {
	text-align: center;
}
.sec04 dl {
	width: 960px;
	margin: 40px auto 0;
}
.sec04 dl dt {
	text-align: center;
}
.sec04 dl dt iframe {
	width: 100%;
}
.sec04 dl dd {}
.sec04 dl dd h3 {
	margin: 40px 0 0;
}
.sec04 dl dd p {}
footer {
	width: 100%;
	text-align: center;
	background: #728fae;
	color: #fff;
	padding: 20px 0;
}
footer ul {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0 0 10px;
}
footer ul li {
	margin: 0 10px;
	font-size: 14px;
}
footer ul li a {}
footer p {
	font-size: 12px;
}

.totop {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9;
	background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 30px;
	filter: drop-shadow(0 0 0.2rem #666);
	text-align: center;
	padding: 5px 0;
	opacity: 0;
    transition: opacity 0.2s;
}
.totop.active {
	opacity: 1;
}
.totop img {
	width: 50%;
	height: auto;
	vertical-align: top;
}
.totop span {
	display: block;
	line-height: 1;
	font-size: 12px;

}

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

	body {
		font-size: 14px;
	}

	h2 {
		font-size: 20px;
	}
	h2 .english {
		font-size: 14px;
	}
	h3 {
		font-size: 18px;
	}
	header {}
	.hd_wrap {}
	.hd_wrap h1 {}
	header #menuBtnCheck {
			display: none;
	}

	header .menuBtn {
		font-size: 0;
		display: block;
		position: fixed;
		display: flex;		
		justify-content: center;
		align-items: center;
		z-index: 99999;
		width: 60px;
		height: 60px;
		top: 0;
		right: 0;
	}
	header .menuBtn span,
	header .menuBtn span:before,
	header .menuBtn span:after {
		content: "";
		width: 35px;
		height: 3px;
		border-radius: 3px;
		background-color: #000;
		display: block;
		position: absolute;
		transition: all 0.5s;
	}
	header .menuBtn span:before {
		bottom: 10px;
	}
	header .menuBtn span:after {
		top: 10px;
	}

	header #menuBtnCheck:checked ~ .menuBtn span {
		background-color: rgba(0, 0, 0, 0)
	}
	header #menuBtnCheck:checked ~ .menuBtn span:before {
		bottom: 0;
		transform: rotate(45deg);
	}
	header #menuBtnCheck:checked ~ .menuBtn span:after {
		top: 0;
		transform: rotate(-45deg);
	}

	.hd_wrap ul {
		position: fixed;
		right: -100%;
		top: 0;
		color: #000;
		background: rgba(255, 255, 255, 0.8);
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		padding: 20px;
		opacity: 0;
		transition: all 0.3s;
		border-bottom: 1px solid #333;
	}

	header #menuBtnCheck:checked ~ ul {
		opacity: 1;
		right: 0;
	}
	.hd_wrap ul li {
		width: 100%;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
		margin: 0;
	}
	.hd_wrap ul li a {}
	.kv {
		height: calc(70vh - 160px);
	}
	.kv .movie__video,
	.kv:before {
		height: calc(70vh - 160px);
	}
	.kv p {
		font-size: 36px;
		top: 100px;
		left: 30px;
	}
	.kv p span {}
	.kv p.small {
		font-size: 18px;
		top: 216px;
	}
	.slide {}
	.slide ul {}
	.slide ul li {}
	.slide ul li img {}
	.contact {
		padding: 20px 10px;
	}
	.contact h2 {
		font-size: 22px;
	}
	.contact p {
		font-size: 12px;
	}
	.contact ul {
		display: flex;
		flex-direction: column;
	}
	.contact ul li {
		margin: 0;
	}
	.contact ul li.tel {
		margin: 0 0 20px;
	}
	.contact ul li a {}
	.contact small {}
	.sec01 {
		padding: 60px 20px 20px;
	}
	.sec01 .wrap {
		width: 100%;
		background-size: 100% auto;
		padding: 66vw 0 0;
	}
	.sec01 .wrap_text p.big {
		font-size: 20px;
	}
	.sec02 {
		padding: 100px 0 60px;
		background size: 100% 60px, 100% 60px, 20px 20px;
	}
	.sec02.fadeup {}
	.sec02 .sec02_list {
		width: 100%;
		margin: 0;
		padding: 0 20px;
	}
	.sec02 .sec02_list li {
		flex-direction: column;
	}
	.sec02 .sec02_list li .img {
		width: 100%;
	}
	.sec02 .sec02_list li .img img {}
	.sec02 .sec02_list li .txt {
		width: 100%;
		padding: 10px 10px 40px;
	}
	.sec02 .sec02_list li .txt h3 {
		margin: 0 0 10px;
	}
	.sec02 .sec02_list li .txt p {}
	.sec02 .sec02_list li.box_rv {
		flex-direction: column;
	}
	.sec03 {
		padding: 60px 0 0;
	}
	.sec03 h2 {}
	.sec03 h2 .english {}
	.sec03 .sec03_list {
		width: 100%;
		flex-direction: column;
		padding: 0 10px;
	}
	.sec03 .sec03_list li {
		width: 100%;
		display: flex;
		margin: 0 0 20px;
	}
	.sec03 .sec03_list li .img {
		width: 100px;
	}
	.sec03 .sec03_list li .img img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	.sec03 .sec03_list li .txt {
		width: calc(100% - 100px);
		padding: 0 0 0 10px;
		margin: 0 0 20px;
	}
	.sec03 .sec03_list li .txt h3 {
		margin: 0;
		text-align: left;
	}
	.sec03 .sec03_list li .txt p.date {
		text-align: left;
		margin: 0 0 10px;
	}
	.sec03 .sec03_list li.box_rv {}
	.sec04 {
		padding: 80px 0;
		background size: 100% 80px, 100% 80px, 30px 30px;
	}
	.sec04 h2 {}
	.sec04 h2 .english {}
	.sec04 dl {
		width: 100%;
		padding: 0 10px;
		margin: 0;
	}
	.sec04 dl dt {}
	.sec04 dl dt img {}
	.sec04 dl dd {}
	.sec04 dl dd h3 {
		margin: 20px 0 10px;
	}
	.sec04 dl dd p {}
	footer {
		padding: 20px 0 10px;
	}
	footer ul {}
	footer ul li {
		font-size: 14px;
	}
	footer ul li a {}
}