@charset "utf-8";
/* CSS Document */

/***　font　***/

@import url('https://fonts.googleapis.com/css2?family=Jost&family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@600&display=swap');

body, .font_sans-serif{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_jo, #page03 .cate_box::before, #page05 .box_title1::before, #page06 .box_title1::before, .linkStyle{
	font-family: 'Jost', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_shi{
	font-family: 'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

/*** スクロールバー ***/

html{
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
html::-webkit-scrollbar {display:none;}

.progress-container{
	width: 3px;
	right: 0;
	top: 0;
	z-index: 10
}

/***　全ページ　***/

*:focus {outline:none;}
html, body{font-size: 14px;}
body{-webkit-text-size-adjust: 100%;}
#wrap{
	transition: opacity 0.5s;
}
#wrap.fadeout{
	opacity: 0;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#page-top a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
#page-top a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
textarea{overflow: auto}

.shadow-h{
	box-shadow: 0 10px 30px rgba(0,0,0,0.1)
}

/*** loader ***/

#loader{
	top: 0;
	left: 0;
	z-index: 3
}
#loader .loader_txt p, #main_img .main_txt p{
	transform: skewX(-20deg)
}
#loader .loader_txt span{
	display: inline-block;
	opacity: 0;
	transform: translateX(20px);
	filter: blur(5px);
	transition: 1s;
	transition-property: opacity, transform, filter
}
#loader .loader_txt span.active{
	opacity: 1;
	transform: none;
	filter: none
}
#loader .load_box{
	width: calc(25% + 1px);
	top: 0;
	bottom: 0;
	transition: top 1s cubic-bezier(.82,.02,.17,1)
}
#loader .load_box.active{
	top: 100%;
}
#loader .load_box1{left: 0}
#loader .load_box2{left: 25%}
#loader .load_box3{left: 50%}
#loader .load_box4{left: 75%}

#loader .load_bg img{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#loader.trans .load_bg img.bg1{
	animation: anime1 1s ease, anime2 2s ease;
}
#loader.trans .load_bg img.bg2{
	animation: anime1 3s ease, anime2 4s ease;
}
@keyframes anime1{
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes anime2{
	0% {
		filter: none;
		transform: none
	}
	100% {
		filter: blur(10px);
		transform: scale(2)
	}
}

/*** fade ***/

.fadein .fade_box{
	opacity: 0;
	filter: blur(5px);
	transition-duration: 1s;
	transition-property: opacity, transform, filter;
	transition-timing-function: ease, cubic-bezier(.13,.79,.48,1), ease
}
.fadein .fade_box.fade_top{
	transform: translateY(-20px)
}
.fadein .fade_box.fade_bottom{
	transform: translateY(20px)
}
.fadein .fade_box.fade_left{
	transform: translateX(-20px)
}
.fadein .fade_box.fade_right{
	transform: translateX(20px)
}
.fadein .fade_box.active{
	opacity: 1;
	filter: none;
	transform: none!important
}

/***　ヘッダー　***/

#header{
	top: 0;
	left: 0;
	z-index: 2;
	height: 80px;
	transition: height 0.5s
}
#header.active{
	height: 70px
}

#pc_nav li a span::before{
	position: absolute;
	content: "";
	width: 0;
	height: 2px;
	left: 0;
	bottom: 0;
	background-color: #00662c;
	transition: width 0.3s cubic-bezier(.82,.02,.17,1)
}
#pc_nav li a:hover span::before{
	width: 100%
}

#menu_bt{
	width: 60px;
	height: 60px;
	z-index: 1
}
#menu_bt .close_txt{
	pointer-events: none;
	transform: rotate(90deg);
	transform-origin: left;
	top: 50px;
	left: 50%;
}
#menu_bt.active .close_txt{
	top: 60px;
	opacity: 1
}
#menu_bt span{
	width: 30px;
	height: 1px;
	transition-timing-function: cubic-bezier(0,.43,.1,1);
	transition-property: width, top, transform, background-color;
}
#menu_bt span.top{
	top: calc(50% - 4px)
}
#menu_bt span.bottom{
	top: calc(50% + 4px)
}
#menu_bt.active span{
	background-color: #fff!important;
	top: 50%
}
#menu_bt.active span.top{
	transform: translate(-50%, -50%) rotate(45deg)
}
#menu_bt.active span.bottom{
	transform: translate(-50%, -50%) rotate(-45deg)
}

#menu_nav{
	top: 0;
	left: 0;
	pointer-events: none;
	transform: scale(0.95);
	transition-property: opacity, transform;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#menu_nav > div{
	overflow-y: auto
}
#menu_nav.active{
	pointer-events: auto;
	opacity: 1;
	transform: none
}
#menu_nav .main_page_link li{
	transform: translateX(-20px);
	opacity: 0;
	filter: blur(5px);
	transition: 0.5s;
	transition-property: transform, opacity, filter
}
#menu_nav .main_page_link li.active{
	transform: none;
	opacity: 1;
	filter: none
}

/***　フッター　***/

footer .footer_right{
	padding-right: 120px
}

#contact_bt{
	right: 20px;
	bottom: 20px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.9);
	transition: 0.3s;
	transition-property: opacity, transform;
	z-index: 1
}
#contact_bt.active{
	opacity: 1;
	transform: none;
	pointer-events: auto
}
#contact_bt a{
	width: 120px;
	height: 120px;
}
#contact_bt a:hover{
	transform: scale(1.1)
}
#contact_bt a img{
	left: 0;
	right: 0;
	top: -50px;
	pointer-events: none;
}

#page_top{
    transform: rotate(-45deg);
    right: -63px;
    top: -75px;
}
#page_top a{
	width: 170px
}
#page_top a::before, #page_top a::after{
	position: absolute;
	content: "";
	background-color: currentColor
}
#page_top a::before{
	width: 10px;
	height: 1px;
	right: 20px;
	top: 9px
}
#page_top a::after{
	width: 1px;
	height: 100px;
	transform: rotate(45deg);
	transform-origin: top right;
	right: 20px;
	top: 10px
}

/***　index　***/

h2, h3, h4, h5, h6{
	line-height: 1.5
}

#main_img .main_txt{
	z-index: 1
}
#main_img .main_txt{
	background-image: url(../img/bg_img5.png);
	background-repeat: repeat-x;
	background-size: 1200px;
	background-position-x: 0;
	background-position-y: 65%;
	animation: anime3 30s linear infinite;
}
@keyframes anime3{
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -1200px;
	}
}
@keyframes anime4{
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -800px;
	}
}

#top_contents .con1_img{
	height: 800px;
}
#top_contents .con1_img::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/bg_img1.png), linear-gradient(to bottom, rgba(255,255,255,0), #fff);
	background-repeat: no-repeat;
	background-size: 100%, 100% 40%;
	background-position: top left, bottom left
}
#top_contents .con_title1{
	top: 100px;
	left: 5%
}
#top_contents .con_title2{
    top: 0;
    left: 20px;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    font-size: 120px;
}
#top_contents .con_item{
	left: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), #fff);
}
#top_contents .con_title3::before{
	position: absolute;
	content: "";
	width: 80px;
	height: 1px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-color: currentColor
}
#top_contents .check_box .check_no{
	top: -2px;
	left: 0
}

#top_link a .link_img{
	transition-property: opacity, transform;
	transition-duration: 0.5s, 1s;
	transition-timing-function: ease, cubic-bezier(.13,.79,.48,1)
}
#top_link a:hover .link_img{
	opacity: 0.4;
	transform: translate(-50%, -50%) scale(1.1)
}
#top_link .link_item::before{
	position: absolute;
	content: "";
	width: 50px;
	height: 1px;
	background-color: currentColor;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
}

#top_con3 .con3_title_wrap::before{
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: currentColor
}

#top_news .news_title3{
	top: -50px;
	left: 50px;
    font-size: 120px;
	z-index: -1
}
#top_news .news_title_wrap{
	align-content: space-between
}

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

.more a::before{
	position: absolute;
	content: "";
	width: 0;
	height: 3px;
	left: 0;
	right: 0;
	bottom: -2px;
	margin: auto;
	transition: 0.3s;
	background-color: #ba9319
}
.more a:hover::before{
	width: 100%
}

#top_info .contact_box a{
	align-content: center;
}
#top_info .contact_box a .contact_img{
	transition-property: opacity, transform;
	transition-duration: 0.5s, 1s;
	transition-timing-function: ease, cubic-bezier(.13,.79,.48,1)
}
#top_info .contact_box a:hover .contact_img{
	opacity: 0.4;
	transform: translate(-50%, -50%) scale(1.1)
}
#top_info .contact_title1::before{
	position: absolute;
	content: "";
	width: 50px;
	height: 1px;
	background-color: currentColor;
	left: 0;
	right: 0;
	top: 0;
	margin: auto
}
#top_info .info_title_wrap::before{
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	left: 0;
	right: 0;
	bottom: -1px;
	background-color: #00662c;
	margin: auto
}

/***　page_title cate_title pager cate_list　***/

#page_title .page_title_wrap{
    background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0));
}
#page_title .first_txt::before, #page_title .first_txt::after{
	position: absolute;
	content: "";
	width: 1px;
	height: 200px;
	left: 0;
	right: 0;
	margin: auto;
	background-color: currentColor;
}
#page_title .first_txt::before{
	bottom: -220px;

}
#page_title .first_txt::after{
	top: -220px;
}

.pager li{
	padding: 0 10px;
}
.pager li a{
	display: block;
	padding: 15px 20px;
	background-color: #00662c;
	color: #fff;
	transition: 0.3s;
}
.pager li a:hover{
	background-color: #ba9319;
}
.pager li.page-selection a{
	background-color: #e6e6e6!important;
	color: #333!important;
}

.cate_title::before{
	position: absolute;
	content: "";
	width: 100px;
	height: 5px;
	left: 0;
	right: 0;
	bottom: -5px;
	margin: auto;
	background-color: #00662c;
}

/***　page02　***/

#page02 .box_item{
	cursor: pointer;
}
.modal_box{
	top: 0;
	left: 0;
	pointer-events: none;
	transform: scale(0.95);
	transition-property: opacity, transform;
	z-index: 3;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.modal_box > div{
	overflow-y: auto
}
.modal_box.active{
	pointer-events: auto;
	opacity: 1;
	transform: none
}
.modal_box .close{
	top: 30px;
	right: 30px;
	cursor: pointer
}

/***　page03　***/

#page03 .cate{
	counter-reset: number1 0;
}
#page03 .cate_box{
	border-left-color: #ba9319;
}
#page03 .cate_box::before{
	counter-increment: number1 1;
	content: "0" counter(number1);
	position: absolute;
	display: block;
	font-size: 30px;
	padding: 10px;
	line-height: 1;
	background-color: #fff;
	top: -25px;
	left: -20px;
	color: #ba9319;
}

/***　page05　***/

#page05 .cate{
	counter-reset: number2 0;
}
#page05 .cate_box:last-of-type{
	border-bottom: none;
	margin-bottom: 0;
}
#page05 .box_title1{
	z-index: 1;
}
#page05 .box_title1::before{
	counter-increment: number2 1;
	content: "0" counter(number2);
	display: block;
	margin-bottom: 20px;
	color: #ba9319;
	font-size: 20px;
	line-height: 1;
	z-index: -1;
	font-weight: normal;
	letter-spacing: 2px;
}
#page05 .box_title1::after{
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	left: 50px;
	top: 8px;
	background-color: #ba9319;
}

/***　page06　***/

#page06 .cate{
	counter-reset: number2 0;
}
#page06 .cate_box:last-of-type{
	border-bottom: none;
	margin-bottom: 0;
}
#page06 .box_title1{
	z-index: 1;
}
#page06 .box_title1::before{
	counter-increment: number2 1;
	content: "0" counter(number2);
	display: block;
	margin-bottom: 20px;
	color: #ba9319;
	font-size: 20px;
	line-height: 1;
	z-index: -1;
	font-weight: normal;
	letter-spacing: 2px;
}
#page06 .box_title1::after{
	position: absolute;
	content: "";
	width: 100px;
	height: 1px;
	left: 50px;
	top: 8px;
	background-color: #ba9319;
}

/***　page07　***/

#page07 #map iframe{
	width: 100%!important;
	height: 400px;
	display: block;
}

/***　page08　***/

#page08 input[type="text"]:focus, #page08 textarea:focus{
	border-color: #00662c;
	background-color: transparent;
}

/***　page10　***/

#page10 .more a::before{
	right: auto;
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
#header{
	height: 60px!important;
}

#main_img .main_txt{
	background-size: 800px;
	animation: anime4 20s linear infinite;
}

#top_contents .con_title1 {
    top: 20px;
    left: 50px;
}
#top_contents .con_title2{
    left: -12px;
    font-size: 80px;
}
#top_contents .con_item{
	width: calc(100% - 50px)!important;
	margin-top: -100px;
	margin-left: auto
}
#top_contents .con1_img {
    height: 70vw;
}
#top_news .news_title3 {
    top: -30px;
    left: 0;
    font-size: 100px;
}

#contact_bt a:hover{
	transform: none
}
	
.pager li:not(.prev):not(.next){
	display: none;
}

footer .footer_right{
	padding-right: 0
}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
#logo{
	max-width: 250px
}

#top_contents .con_title1 {
    top: -10px;
    left: 20px;
}
#top_contents .con_title2 {
    left: -10px;
    font-size: 60px;
    top: -50px;
}
#top_contents .con_item{
	width: calc(100% - 30px)!important;
	margin-top: -50px;
}
#top_news .news_title3 {
    top: -20px;
    font-size: 80px;
}

#contact_bt{
	width: 100%;
	right: 0;
	bottom: 0;
	transform: translateY(10px);
}
#contact_bt a{
	width: 100%;
	height: 50px;
	border-radius: 0
}
#contact_bt a img{
	left: auto;
	right: 10px;
}
.modal_box .close{
	top: 20px;
	right: 10px;
}
#page_title .page_title_wrap{
    background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}