@charset "Utf-8";


/* ------------------------------
 Layout
------------------------------ */

.wrap,.wrap_pc{margin: 0 auto}


.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}

.fade.active {
	opacity: 1;
	transform: translateY(0px);
}



@media screen and (max-width: 667px) {
	.wrap{width: 90%;
		margin: 0 auto}
	
	#contents{
	margin: 0 auto;
	padding: 50px 0 0;}
		
	br.brpc{display: none}
}	


@media screen and (min-width: 668px){
	
	.wrap,
	.wrap_pc{
		width: 90%;
		max-width: 1000px;
	}

/* 	#contents{padding: 80px 0 0;} */
	br.brsp{display: none}
	
	#contents{
	margin: 0 auto;
	padding: 50px 0 0;}
}



/* ------------------------------
 #header
------------------------------ */


#header {
	position: fixed;
	width: 100%;
	background: rgb(255,255,255);
	z-index: 1000;
	color: #222
	}

#gnav a{text-decoration: none;display: block;}




/* ------------------------------
 #opengnav 格納メニュー
------------------------------ */

/*========= ボタンCSS ===============*/

.openbtn,
.openbtn span {
display: inline-block;
transition: all 0.3s;
}

#opengnav-wrap{
	height: 50px;
}

.openbtn{
width: 50px;
height: 50px;
position: relative;
z-index: 1000;
background: #00A64D
}

.openbtn:after{
  display: block;
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  line-height: 0;
  color: #222;
  text-align: center
}
	
/*×に変化*/	
.openbtn span{
position: absolute;
left: 0;
right: 0;
width: 32px;
height: 2px;
background-color: #fff;
margin: 0 auto
  }

.openbtn span:nth-of-type(1) {top: 12px;}

.openbtn span:nth-of-type(2) {top: 22px;}

.openbtn span:nth-of-type(3) {top: 32px;}


.openbtn.active span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
top:13px;
background-color: #eee;
}

.openbtn.active span:nth-of-type(2) {
transform: translateY(10px) rotate(45deg);
top:13px;
background-color: #eee;
}

.openbtn.active span:nth-of-type(3){
	display: none
}




/*========= ナビゲーションCSS ===============*/


#opengnav{
position:fixed;
top:0;
right: -100%;
width:100%;
height: 100vh;
background:rgba(33, 38, 43, 0.95);
transition: all 0.6s;
opacity: 0;
}



#opengnav.panelactive{
    right: 0;
    opacity: 1
}


/*ナビの数が増えた場合縦スクロール*/
#opengnav.panelactive #navscloll{
    position: fixed;
    z-index: 999; 
    height: 100vh;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}



/*ナビゲーション*/

#navscloll{
	position: relative;
	z-index: 999;
}

.side{
	padding: 3em 10%
}

.side ul li{
	padding: .5em;
	position: relative;
}

.side ul li a{
	color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-family: 'pm12';
	display: block;
}


.side li a:before {
	content: "";
	width: 10px;
	height: 15px;
	display: inline-block;
	padding: 0 15px 0 0;
}
.side li.current a:before,
.side li a:hover:before {
	background: url(../img/dot_arrow.svg) no-repeat left center;
	background-size: contain;
}
.side li a:hover {
	color: #66f0e8;
}

.side ul.nav_main{
	border-bottom: solid 1px #666;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em
}

.side ul.nav_main li{
		margin-bottom: .5em;
	}

.side ul.nav_main li span{
	font-size: 24px;
}




@media print, screen and (min-width: 768px) {
	#opengnav{width:30%;}
	#opengnav.panelactive #navscloll{width:30%;}
	.side{padding: 3em 6%}
	
	.side ul.nav_main li{
		font-size: 1em;
		margin-bottom: 1em;
		position:relative
	}
	
	.side ul.nav_main li span{font-size: 26px;padding-right: .5em}
	
	
	.side ul.nav_main li:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0;
	border-bottom: solid 1px #fff;
	transition: 0.3s;
	}
	
	.side ul.nav_main li:hover:before {
		width: 10%;
		border-bottom: solid 1px rgba(255, 255, 255, 0.6);
	}
	
	

}	



	
@media screen and (max-width: 1024px) {
	#gnav{display: none}
	#header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		transition: .3s;
	}
	
	#logo{
		padding:0 0 0 12px;
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		align-items: center;
		position: relative;
		height: 50px;
		width: calc(100% - 70px);
	}
		
	#logo img{
		height: 24px;
		width: auto}
			
		
}


@media screen and (min-width: 668px) and (max-width: 768px) {
	#logo{padding:0 0 0 20px;height: 70px;}
	
	#logo img{
		height: 30px;
		width: auto}
}	

	

@media print, screen and (min-width: 1025px) {
	
	#header{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		align-items: center;
		align-content: center;
		height: 50px;
		top: 0;
		left: 0;
		z-index: 200;
		width: 100%;
		transition: .3s;
	}
	
	#logo{padding-left: 30px;}
	
	#logo img{height: 40px;
		width: auto;}
	
	#header_nav{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	#gnav{
		display: flex;
		flex-wrap:wrap;
		align-items: center;
		height:100%;
	}
	
	#gnav > ul {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	
	#gnav a{text-align: center;}
	
	#gnav > ul > li{
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	font-size:.875rem;
	font-weight: bold;
	letter-spacing: 1px
	}
		
	
	#gnav > ul > li > a{
		display: flex;
		align-items: center;
		align-content: center;
		padding: .5em 1em;
		height: 50px;
		text-align: center;
		letter-spacing: .1em;
		color: #333;
		position: relative;
	}
	
	
	#gnav > ul > li > a:hover{
		color: #0083BB
	}
	
	#gnav > ul > li.contact a{
		background: #0083BB;
		color: #fff;
		display: flex;
		align-items: center
	}
	
	#gnav > ul > li.contact a::after{
		content: "";
		display: inline-block;
		background: url(../img/mail.svg) no-repeat center center;
		width: 18px;
		height: 16px;
		-moz-background-size:contain;background-size:contain;
		padding-left: 6px
	}
}	




/* ------------------------------
 swiper
 ------------------------------ */
.swiper{
	overflow: hidden;
	position: relative
}

.swiper-wrapper{
	transition-timing-function: linear;
}

.swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}


.banner{
	margin: 0 0 0 5%
}


@media screen and (max-width: 667px) {
	.relatedswiper,
	.relatedswiper1{margin-left: 5%}
}


.swiper-slide{ 
	aspect-ratio:4 / 3 ;
	height: auto!important; }

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #000}


.swiper-button-next:after,
.swiper-button-prev:after {font-size: 18px !important;}

@media screen and (max-width: 667px) {
	.swiper-button-next:after,
	.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 13px !important;
    }
}	

@media print, screen and (min-width: 668px) {}	

@media print, screen and (min-width: 1000px) {}	






/* ------------------------------
 ページコンテンツ共通スタイル
------------------------------ */

.page_header{
	padding:5%;
	display: flex;
	align-items: center;
	margin:0 auto;
	color: #fff;
	background: url(../img/title_bg.jpg) no-repeat center center;
	background-size: cover;
	min-height: 300px;
	margin-bottom: 5em;
}

/*.pxbtn,.pxbox{
	background: #000;
	padding: 6px;
	width:-moz-fit-content;
	width:fit-content;
	margin: 0 auto
}

.pxbtn > *{
	font-size:20px;
	font-family:'pm12';
	position: relative;
	border: solid 4px #fff;
	padding: 6px 1em;
	color: #fff;
	display: block;
	text-align: center;
	line-height: 1.5em
	}

.pxbtn > *::before{
	display: inline-block;
	content: "";
	background: url(../img/dot_arrow.svg) no-repeat left center;
	-moz-background-size:contain;background-size:contain;
	height: 15px;
	width: 10px;
	padding: 0 15px 0 0
}	

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

@media print, screen and (min-width: 768px) {
	.pxbtn > *{padding: 6px 2em;}
}	

*/



/*　外側BOX */
.pxbtn,
.pxbox,
.btn_green {
  position: relative;
  background: #000;
  color: #fff;
  font-weight: bold;
  padding: 1.1em 2em;
  border: none;
  image-rendering: pixelated;
  letter-spacing: 2px;
  z-index: 1;
	width:-moz-fit-content;
	width:fit-content;
	margin: 0 auto;
  clip-path: polygon(
	0 5px, 3px 3px, 3px 3px 5px 0,
	calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px,
	100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px),
	calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px),
	0 calc(100% - 5px)
  );
  transition: transform 0.1s ease, background 0.1s ease;
}

/*内側白線の角のために必要*/
.pxbtn::before,
.pxbox::before,
.btn_green::before{
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: #000;
  z-index: -3;
  clip-path: polygon(
	0 10px, 10px 10px, 10px 0,
	calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px,
	100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
	calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px),
	0 calc(100% - 10px)
  );
}

.pxbtn::after,
.pxbox::after,
.btn_green::after{
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #000;
  z-index: -2;
  clip-path: polygon(
	0 7px, 7px 7px, 7px 0,
	calc(100% - 7px) 0, calc(100% - 7px) 7px, 100% 7px,
	100% calc(100% - 7px), calc(100% - 7px) calc(100% - 7px),
	calc(100% - 7px) 100%, 7px 100%, 7px calc(100% - 7px),
	0 calc(100% - 7px)
  );
}

.inner-border {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: transparent;
  border: 4px solid #fff;
  z-index: -1;
  clip-path: polygon(
	0 4px, 4px 4px, 4px 0,
	calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
	100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
	calc(100% - 4px) 100%, 5px 100%, 4px calc(100% - 4px),
	0 calc(100% - 4px)
  );
}

.pxbtn .pixel-content * {
	font-size:1.1em;
	font-family:'pm12';
	color: #fff;
	letter-spacing: .3em;
}

.pxbtn .pixel-content > ::before{
	display: inline-block;
	content: "";
	background: url(../img/dot_arrow.svg) no-repeat left center;
	-moz-background-size:contain;background-size:contain;
	height: 15px;
	width: 10px;
	padding: 0 15px 0 0
}	




@media screen and (max-width: 460px) {
	.pxbtn .pixel-content span{
		display: block;
		font-size: .8em
	}
}	



/*  緑のボタン */

.btn_green,
.btn_green:before,
.btn_green:after{background: #318540!important;}



.btn_green .pixel-content > *{
	font-size: 16px!important;
}


.pxbtn_link:hover{
	cursor: pointer;
	top: 5px;
	background: #0083BB!important;
}
.pxbtn_link:hover:before,
.pxbtn_link:hover:after{
	background: #0083BB!important;
}







/* フッター上のグラデーションライン */
#contents{
	border-bottom: 6px solid;
	border-image: linear-gradient(90deg,rgba(0, 166, 77, 1) 0%, rgba(73, 104, 226, 1) 100%);
    border-image-slice: 1;
	padding-bottom: 10em;
}




/* ************************************************ 
*	.bread_crumb
* ************************************************ */

#bread{padding: 5%;}

#bread a{text-decoration: none;color: #444}

ul.bread_crumb{}
	
ul.bread_crumb li{
	display: inline;
	font-size: .9em
}

ul.bread_crumb li + li:before {
	margin: 0 .6em;
	font-size: 1.1em;
	color: #999;
	font-family: icomoon;
	content: "\e977";
}

@media screen and (max-width: 667px) {	
	#bread{}
	ul.bread_crumb li{font-size: .8em}
}	

@media print, screen and (min-width: 668px) {
	#bread{padding: 2% 5%}
}

/* ************************************************ 
*	prevnext
* ************************************************ */

.pagenav li {
	margin:0 0 .6em;
}

.pagenav li a{
	display: block;
	text-decoration: none;
	position: relative;
	-webkit-transition: all .3s;
	transition: all .3s;
}

	.pagenav li.prev{text-align: left;}

.pagenav li.prev a{}


.pagenav li.prev a:before{
		font-family: icomoon;
		content: "\e976";
		padding-right: .5em}
	
.pagenav li.next{text-align: right;}

.pagenav li.next a:after{
	font-family: icomoon;
	content: "\e974";
	padding-left: .5em}



.pagenav{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.pagenav li{
	width: 48%;
	text-align: center
}
	


.pageback {display: block;
	margin: 0 auto;
	background: #007fa8;
	color: #fff;
	padding: .6em 1em;
	text-align: center;
	max-width: 400px;
}

.pageback:before{
	font-family: icomoon;
	content: "\e973";
	padding-right: 5px
}





/* ************************************************ 
*	Pager
* ************************************************ */

#pager{overflow: hidden;
    position: relative;}
    
    
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0 3em;
    position: relative;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px 6px;
    padding: 8px;
    color: #98A6B5;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    position: relative;
    border-bottom: solid 3px #FFF
}



/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ *
.pagination a:hover,
.pagination .current  {
    border-bottom: solid 3px #000
}*/

.pagination .current,
.page_before,
.page_next{color: #0083BB!important}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}



/* ------------------------------
 footer
------------------------------ */

#footer{
	margin: 0 auto;
	text-align: center;
	position: relative;
}


#footer .add{
	margin-bottom: 100px
}

.add dl{
	text-align: left;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	display: flex;
	align-items: center
}

.add dl dt{font-weight: bold;
	background: #007DC7;
	background: linear-gradient(142deg,rgba(0, 125, 199, 1) 0%, rgba(5, 170, 61, 1) 100%);
	border-radius: 5px;
	position: relative;
	color: #fff;
	font-size: 1.1em;
	padding: 5px .6em
}

.add dl dd{padding: 0 0 0 1em;font-size: 1.1em;}

.cr{
	padding: 1.2em;
	font-size: 10px;
	letter-spacing: .1em;
	width: 100%;
	color: rgba(255, 255, 255, 0.8);
	background: #000000
}


@media screen and (max-width: 666px) {
	#footer .add{
		display: flex;
		flex-direction: column;
	}
	.add dl{margin:1em 0 0}
	.add dl dt{
	}
	
	.add dl dd{
		padding: 0 0 0 1em
	}
}	

@media print, screen and (min-width: 667px) {
	#footer .add{
		display: flex;
		justify-content: space-around;
		margin-bottom: 150px
	}
	
	.add dl{
	}
	
	.add dd{
	}
}	

@media print, screen and (min-width: 1024px) {}	



/*  トップへ戻るボタン */
#page_top{
	position: fixed;
	right: 5%;
	bottom: 10%;
	z-index: 100
}

#page_top a{
	display: block
}

#page_top a::before{
	content: " ";
	display: block;
	background: url("../img/backtop.svg") no-repeat left top / contain;
	width: 90px;
	height: 90px;
}


@media print, screen and (min-width: 768px) {
	#page_top a::before{
		width: 130px;
		height: 130px;}
}	

@media print, screen and (min-width: 1024px) {}	



/*  フッター　コンタクトボタン */

.ft_contact{
	margin: 250px auto 0;
	position: relative;
	width: 100%;
	max-width: 600px;
}
.ft_contact:before,
.ft_contact:after{
	content: '';
	display: block;
	background: url("../img/hanabi.svg")no-repeat center / contain;
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 0;
	z-index: -1;
	animation: hanabi 1s steps(3) infinite;
}

.ft_contact:before{
	left: 0;
}
.ft_contact:after{
	right: 0;
}

@media  (min-width: 0px) and (max-width: 767px) {
	.ft_contact:after{display: none}
}

.clear_chara:before{
	content: '';
	background: url("../img/contact_character.svg")no-repeat center / contain;
	width: 100%;
	height: 150px;
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	animation: movetate 1s steps(2) infinite;
}

.ft_contact .pxbtn{
	width: 100%!important;
	padding: 1.8em 0;
}

.ft_contact .pxbtn a{font-size: 1.3em;}

@keyframes hanabi {
  from {
    transform: scale(.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes movetate {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}


/* ------------------------------
 .cta
------------------------------ */

.cta{
	text-align: center;
	margin: 0 auto;
	padding: 6%
}


.cta_logo{}

.cta p{
	margin: 1.5em 1em;
	font-size: 1.1em;
	color: #888200
}

ul.cta_contact{width: 90%;margin: 0 auto}

ul.cta_contact li{
	letter-spacing: .1em;
	text-align: center
}

ul.cta_contact li.tel{
	font-size: 1.6em
}
ul.cta_contact li.tel span{font-size: 1.3em}

ul.cta_contact li.form a{
	display: block;
	position: relative;
	padding: .6em 2em;
	text-decoration: none;
	background: #00614d;
	color: #fff;
	font-weight: bold;
	font-size: 1.1em
}

ul.cta_contact li a:hover{
	background: #fff;
	border: solid 1px #00614d;
	color: #22272c
}


@media  (min-width: 0px) and (max-width: 767px) {
	ul.cta_contact li.tel{margin-bottom: 1em}
}	
@media  (min-width: 768px) {
	.cta{padding: 5%}
	.cta h3{font-size: 28px}
	
	
	.cta p br{display: none}
	
	ul.cta_contact{
		display: flex;
		justify-content: center;
		margin: 0 auto;
		max-width: 800px;
		align-items: center
	}
	
	ul.cta_contact li{margin: 0 1em}
	ul.cta_contact li.tel{font-size: 25px}
	ul.cta_contact li.form a{min-width: 200px;}
}


@media print, screen and (min-width: 1024px) {
	.cta h3{font-size: 35px}
	.cta p{font-size: 1.3em}
	ul.cta_contact li.tel{font-size: 30px}
	ul.cta_contact li.form a{min-width: 280px;}
}	






/* ------------------------------
 Youtube
------------------------------ */	

.video-container {
   position: relative;
     padding-bottom: 56.25%;
     height: 0;}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------
 searchform
------------------------------ */

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}



.quick_search input{
  margin:0;
  border-radius:0;
}


.searchform{
  width: 100%;
  margin:auto;
}
.searchform__field{
  width:calc(100% - 48px);
  height:48px;
  padding:0.5em .6em;
  border:1px solid #ddd;
  font-size:1em;
}

.searchform__btn{
  width:48px;
  height:48px;
  background-color:#D39B19;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.searchform__btn::after{
	font-family: icomoon;
	content: "\e902";
	color:#fff;
}

.searchform__btn:hover{
	background-color:#b2810f;
}


.searchsubmit:hover {
opacity: .6;
}
input[type="text"]:focus,
input[type="submit"]:focus {
  outline: 0;
  border-color: #eee;
}


/* ------------------------------
 お知らせ　（一覧表示）
------------------------------ */

.news_link{
	border-bottom: solid 1px #ccc;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
}
.news_link h3{
	width: 100%;
	margin: .5em 0;
}

@media print, screen and (min-width: 768px) {
	.news_link h3{width: auto;}
	.news_link .date{margin-right:2em;}
}

.new{
	background: #F70006;
	color: #fff;
	display: inline-block;
	padding: .1em .5em;
	margin: 0 .5em;
	font-size: 14px;
	line-height: 1;
	animation:blink 1s ease-in-out infinite alternate;
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}