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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/***　フォント　***/

:root{
	--font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	--font-en: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif{
	font-family: var(--font-jp);
}
.font_en{
	font-family: var(--font-en);
}

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

*:focus {outline:none;}
html{font-size:100%;}
body{-webkit-text-size-adjust: 100%;}

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 3px 10px rgba(0,0,0,0.1);
}

.linkStyle{
	font-family: var(--font-en);
}

/***　loading　***/

#loading{
	z-index: 5;
	top: 0;
	left: 0;
}
#loading .loading_logo.active{
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.2);
	filter: blur(5px)
}

/** modal **/

.modal .modal_bt{
    cursor: pointer;
}
.modal .modal_box{
    top: 0;
    left: 0;
    z-index: 10000;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}
.modal .modal_box.active{
    opacity: 1;
    pointer-events: auto;
}
.modal .modal_box::-webkit-scrollbar{
    display:none;
}
.modal .modal_box .modal_bg{
    top: 0;
    left: 0;
}
.modal .modal_box .modal_close{
    cursor: pointer;
    top: 10px;
    right: 10px;
}

/***　fade　***/

.fadein .fade_box{
	opacity: 0;
	filter: blur(3px);
	transform: translateY(10px);
	transition-duration: 1s;
	transition-property: opacity, filter, transform;
}
.fadein .fade_box.active{
	opacity: 1;
	filter: none;
	transform: none;
}

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

#header{
	z-index: 3;
}
#header .header_item{
	height: 100px;
}

#nav_bt{
	z-index: 2;
	cursor: pointer;
}
#nav_bt .nav_bar{
	height: 1px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: background-color 0.3s;
}
#nav_bt.active .nav_bar{
	background-color: transparent;
}
#nav_bt .nav_bar::before, #nav_bt .nav_bar::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--black);
	left: 0;
	right: 0;
	margin: auto;
	transition: 0.3s;
	transition-property: transform top bottom;
}
#nav_bt .nav_bar::before{
	bottom: 8px;
}
#nav_bt .nav_bar::after{
	top: 8px;
}
#nav_bt .nav_name{
	left: 0;
	bottom: -10px;
}
#nav_bt.active .nav_bar::before{
	bottom: 0;
	transform: rotate(45deg);
}
#nav_bt.active .nav_bar::after{
	top: 0;
	transform: rotate(-45deg);
}

#header_nav li:not(:last-of-type){
	background-image: linear-gradient(to bottom, var(--color4), var(--color4));
	background-repeat: no-repeat;
	background-size: 1px 20px;
	background-position: right center;
}

#header_nav2{
	top: 0;
	left: 0;
	z-index: 1;
}
#header_nav2 .nav_arrow{
	right: 10px;
	top: calc(10px + 1em);
	transform: translateY(-50%);
}
#header_nav2 .nav_arrow::before, #header_nav2 .nav_arrow::after{
	position: absolute;
	content: "";
	width: 15px;
	height: 1px;
	background-color: var(--color1);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#header_nav2 .nav_arrow::after{
	transition: transform 0.3s;
	transform: rotate(90deg);
}
#header_nav2 .nav_arrow.active::after{
	transform: none;
}
#header_nav2 .nav_cate > a i{
	top: calc(10px + 0.5em);
	left: 10px;
}
#header_nav2 .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

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

.footer_right .page_top.posi_fix{
	right: 20px;
	bottom: -60px;
	z-index: 1;
	background-color: rgba(255,255,255,0.8);
}
.footer_right .page_top.posi_fix.active{
	bottom: 20px;
}
.footer_right .page_top:hover{
	transform: translateY(-5px);
}
#footer_nav .nav_cate > a i{
	top: 0.5em;
	left: 10px;
}
#footer_nav .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

#copyright{
	background-color: rgba(255,255,255,0.1);
}

/***　index　***/

#main_img{
	height: 700px;
}
#main_img .catch{
	width: calc(100% - 100px);
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	z-index: 2;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5))
}
#main_img .slide3{
	background-position: 60% 50%;
}
#main_img .swiper{
	z-index: auto;
}
#main_img .swiper-pagination{
	width: auto;
	left: auto;
	right: 50px;
	bottom: 50px;
	z-index: 2;
}
.swiper-pagination-bullet, .swiper-pagination-bullet-active{
	width: 20px!important;
	height: 20px!important;
	background: none!important;
	opacity: 1!important;
	position: relative;
	transition: none;
	cursor: pointer;
}
.swiper-pagination-bullet::before{
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #fff;
	transition: 0.3s;
	background-position: badkground-color, width, height;
	border-radius: 50%;
}
.swiper-pagination-bullet-active::before{
	border: solid 1px #fff;
	background-color: transparent;
	width: 12px;
	height: 12px;
}

#top_contact{
	margin-top: -45px;
	z-index: 2;
}

.more_arrow::before, .more_arrow::after{
	position: absolute;
	content: "";
	background-color: #fff;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.3s;
}
.more_arrow::before{
	width: calc(100% - 10px);
	right: 5px;
	height: 1px;
}
.more_arrow::after{
	width: 7px;
	height: 7px;
	right: 0;
	border-radius: 10px;
}
.more:hover .more_arrow::before{
	width: calc(100% - 20px);
}
.more:hover .more_arrow::after{
	transform: scale(4);
	opacity: 0.2;
}

.con_title{
	background-image: linear-gradient(to right, var(--color1), var(--color3));
	background-repeat: no-repeat;
	background-size: 100px 1px;
	background-position: bottom center;
}

.cate_wrap{
	counter-reset: number 0;
}
.cate_wrap .cate_no{
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 50px 1px;
	background-position: right center;
	padding-right: 70px;
}
.cate_wrap .cate_no::after{
	counter-increment: number 1;
	content: counter(number);
}

#top_service .top_service_wrap{
	background-image: linear-gradient(to right, var(--color2), var(--color2));
	background-repeat: no-repeat;
	background-size: 100% calc(100% - 60px);
	background-position: top 30px left 0;
}
#top_service .cate:nth-of-type(2) .cate_bg{
	background-position: 50% 30%
}
#top_service .cate a:hover .cate_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.6;
	filter: blur(2px);
}

#top_link h3{
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 30px 1px;
	background-position: bottom;
}
#top_link a:hover .linke_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.4;
	filter: blur(2px);
}
#top_link a:hover .more_arrow::before{
	width: calc(100% - 20px);
}
#top_link a:hover .more_arrow::after{
	transform: scale(4);
	opacity: 0.2;
}

#top_sustainability .sus_title{
	background-image: linear-gradient(to right, var(--color1), var(--color3)), linear-gradient(to right, var(--color4), var(--color4));
	background-repeat: no-repeat;
	background-size: 11em 1px, 100% 1px;
	background-position: top left;
}
#top_sustainability .cate_item{
	width: calc(100% - 40px);
	box-sizing: border-box;
	margin-top: -50px;
	background-image: linear-gradient(to right, var(--color1), var(--color1));
	background-repeat: no-repeat;
	background-size: 5px calc(100% - 60px);
	background-position: top 30px left 0;
	min-height: calc(60px + 3em);
}
#top_sustainability .cate a:hover img{
	transform: translate(-50%, -50%) scale(1.05);
}
#top_sustainability .top_cate_title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#top_sustainability .cate_item i{
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

#top_contact2{
	margin-bottom: -50px;
}
#top_contact2 h2{
	padding-right: 70px;
}
#top_contact2 h2::before, #top_contact2 h2::after{
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	margin: auto;
}
#top_contact2 h2::before{
	width: 40px;
	height: 40px;
	border: solid 1px;
	border-radius: 50%;
	right: 0;
}
#top_contact2 h2::after{
	width: 10px;
	height: 10px;
	border-top: solid 2px;
	border-right: solid 2px;
	right: 17px;
	transform: rotate(45deg);
}
#top_contact2 a:hover .contact_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.4;
	filter: blur(2px);
}

/***　page_title, cate_title, table　***/

#page_title{
	transition: background-color 2s ease;
	padding-top: 70px;
}
#page_title::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	bottom: -1px;
	left: 0;
	z-index: 1;
}
#page_title.active{
	background-color: var(--color2);
}
#page_title.active .page_bg{
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 0.5;
	transition-property: opacity, transform;
	transition-duration: 1s, 2s;
	transition-timing-function: ease, cubic-bezier(0,.5,.2,1);
}
#page_title .page_wrap{
	background-color: rgba(255,255,255,0.8);
	background-image: linear-gradient(to right, var(--color1), var(--color3));
	background-size: 0 5px;
	background-position: bottom center;
	background-repeat: no-repeat;
	transition: background-size 2s cubic-bezier(0,.5,.2,1);
	z-index: 1;
}
#page_title.active .page_wrap{
	background-size: 100px 5px;
}

.box_wrap{
	counter-reset: number 0
}

.cate_title.border_grad{
	background-image: linear-gradient(to bottom, var(--color3), var(--color1));
	background-repeat: no-repeat;
	background-size: 5px 100%;
	background-position: left top;
}
.cate_box .box_no::after{
	counter-increment: number 1;
	content: counter(number);
}

.flex_stretch{
	justify-content: flex-start;
}

.table_box{
	border-collapse: collapse;
}

/***　page02　***/

#page02 .cate:not(:first-of-type){
	background-image: linear-gradient(to right, var(--color1), var(--color3)), linear-gradient(to right, var(--color4), var(--color4));
	background-size: 100px 1px, 100% 1px;
	background-position: top center;
	background-repeat: no-repeat;
}
#page02 .cate_box:nth-child(odd){
	flex-direction: row-reverse
}
#page02 .cate_box:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

/***　page03　***/

#page03 .cate_img1{
	height: 300px;
}
#page03 .faq_box .box_title1{
	cursor: pointer;
}
#page03 .faq_box .box_title1::before, #page03 .faq_box .box_txt1::before{
	position: absolute;
	font-size: 20px;
	font-family: var(--font-en);
	left: 17px;
	line-height: 1;
	font-weight: normal;
}
#page03 .faq_box .box_title1::before{
	content: "Q";
	color: var(--color1);
	top: 22px;
}
#page03 .faq_box .box_txt1::before{
	content: "A";
	opacity: 0.6;
	top: 24px;
}
#page03 .faq_box .arrow{
	width: 15px;
	height: 15px;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
}
#page03 .faq_box .box_title1 .arrow::before, #page03 .faq_box .box_title1 .arrow::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--color1);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: transform 0.3s
}
#page03 .faq_box .box_title1 .arrow::after{
	transform: rotate(90deg);
}
#page03 .faq_box .box_title1.active .arrow::after{
	transform: rotate(0);
}

/***　page04　***/

#page04 .cate_img1{
	height: 300px;
}
#page04 .box_no{
	top: 0.5em;
	left: 0;
	padding-left: 10px;
	border-left: solid 1px;
}

/***　page05　***/

#page05 .info_map iframe{
	display: block;
	width: 100%;
	height: 400px;
}

/***　page07　***/

#page07 .tel_title{
	background-image: linear-gradient(to right, var(--color1), var(--color1));
	background-size: 100px 1px;
	background-position: bottom center;
	background-repeat: no-repeat;
}

/***　page08　***/

#page08 .nav_cate > a i{
	top: calc(10px + 0.5em);
	left: 10px;
}
#page08 .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

/***　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 .header_item{
	height: 70px;
}
#nav_bt{
	right: 10px;
}
#main_img{
	height: 80vh;
}
#top_sustainability .cate_item{
	margin-top: -20px;
	background-size: 5px calc(100% - 40px);
	background-position: top 20px left 0;
	min-height: calc(40px + 3em);
}
#page_title{
	padding-top: 50px;
}
#page03 .cate_img1{
	height: 50vw;
}
#page04 .cate_img1{
	height: 50vw;
}
	
#pager li:not(.prev):not(.next){
	display: none;
}

.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){
#main_img::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 70%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
	z-index: 2;
}
#main_img .catch{
	left: 20px;
	top: auto;
	bottom: 100px;
	transform: none;
}
#main_img .swiper-pagination {
    right: 20px;
}
#top_sustainability .cate_item{
	min-height: inherit;
}
#top_contact2 h2{
	padding-right: 50px;
}

#header_nav2{
	overflow-y: scroll;
}

.table_wrap{
	overflow-x: scroll;
}
.table_wrap .table_box{
	width: 700px!important;
}

#page03 .scroll_txt, #page04 .scroll_txt{
	top: 30px;
}
#page06 .scroll_txt{
	top: 10px;
}
.footer_right .page_top.posi_fix{
	right: 10px;
	bottom: -50px;
}
.footer_right .page_top.posi_fix.active{
	bottom: 10px;
}

.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;
}
}