@charset "UTF-8";


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


/******************************************************
header
******************************************************/

.header{
	width: 100%;
	z-index: 500;
}
@media screen and (min-width: 768px) {
	.header{
		position: fixed;
		top: 0;
		left: 0;
	}
}
@media screen and (max-width: 767px) {
	.header{
		position: relative;
	}
}

.header .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--COL-White);
}
.logo_site{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.logo_site .copy{
    font-family: var(--FNT-serif);
    color: var(--COL-DarkGray);
    line-height: 1;
}
.logo_site .label{
	display: block;
	font-size: 0%;
	line-height: 0%;
	text-indent: 100%;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	background: url("../../img/common/logo_koyama.svg") 0 0 no-repeat;
	background-size: contain;
}

@media screen and (min-width: 768px) {

	.header .inner{
		gap: 64rem;
		height: 104rem;
		padding: 0 2.5%;
		box-shadow: 0px 8px 16px 0px rgba(var(--Black-rgb), 0);
		transition: 0.3s ease-out;
		transition-property: height, box-shadow;
	}
	.logo_site{
		gap: 10rem;
		transition: 0.3s ease-out;
		transition-property: gap, padding;
	}
	.logo_site .copy{
		font-size: 13rem;
		transition: font-size 0.3s ease-out;
	}
	.logo_site .label{
		width: 225rem;
		height: 25rem;
		background-size: auto 25rem;
		transition: 0.3s ease-out;
		transition-property: height, background-size, opacity;
	}

	/* home */
	/*.b-home .header .inner .logo_site{
		opacity: 0;
	}*/

    /* header_fix */
	.header.header_fix .inner{
		height: 80rem;
		box-shadow: 0px 4px 12px 0px rgba(var(--COL-Black-rgb), 0.1);
	}
	.header.header_fix .inner .logo_site{
		gap: 8rem;
		padding-top: 0;
		opacity: 1;
	}
	.header.header_fix .inner .logo_site .copy{
		font-size: 12rem;
	}
	.header.header_fix .inner .logo_site .label{ 
		height: 23rem;
		background-size: auto 23rem;
	}

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

	.header .inner{
		height: 60rem;
		padding: 0 180rem 0 4%;
	}

	.logo_site{
		gap: 5rem;
	}
	.logo_site .copy{
		font-size: 9rem;
		letter-spacing: 0.05em;
	}
	.logo_site .label{
		width: 156rem;
		height: 17rem;
		background-size: contain;
	}

}

/* header_nav */

@media screen and (min-width: 768px) {

	.header .inner .nav{
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
	}
	.header .inner .nav .global_nav{
		display: flex;
		align-items: center;
		gap: 64rem;
	}

	.nav .global_nav .gnav_list{
		display: flex;
		gap: 64rem;
	}
	.nav .global_nav .gnav_list li > a{
		display: flex;
		align-items: center;
		height: 56rem;
	}
	.nav .global_nav .gnav_list li > a .label{
		position: relative;
		display: block;
		padding: 0;
        font-family: var(--FNT-serif);
		font-size: 17rem;
		z-index: 10;
	}
	.nav .global_nav .gnav_list li > a .label::before{
		position: absolute;
		top: 150%;
		left: 0;
		display: block;
		width: 100%;
		height: 1rem;
		content: "";
		background: var(--COL-DarkGray);
		transform: scale(0, 1);
		transform-origin: right top;
		transition-property: transform;
		transition-duration: .3s;
		z-index: -1;
	}
	.nav .global_nav .gnav_list li > a:hover .label::before{
		transform: scale(1, 1);
		transform-origin: left top;
	}
	.nav .global_nav .gnav_list li > a.current .label::before{
		transform: scale(1, 1);
		transform-origin: left top;
	}
	.header .inner .nav .global_nav .gnav_list li.gnav_item_home{
		display: none;
	}

	.header .inner .btns{
		display: none;
	}

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

	.header .inner .nav{
		position:fixed;
		top: 0;
		right: -100vw;
		width: 100vw;
		height: auto;
        /*height: 100vh;*/
		background: var(--COL-White);
		overflow: hidden;
		z-index:400;
		transition: all 0.3s;

		.global_nav{
			position: relative;
			overflow-y: auto;
			width: 100%;
			height: 100%;
			/*display: flex;
			flex-direction: column;
			align-items: center;
			gap: 24rem;*/
			padding: 64rem 40rem;
			.gnav_list{
				> li {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					gap: 0;
					padding: 8rem 0;
					border-bottom: 1px solid var(--COL-Gray);
					> a{
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 8rem;
						min-width: 12em;
						padding: 8rem 16rem;
						&::after{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28rem;
							height: 28rem;
							content: "";
							border-radius: 999rem;
							/*border: solid 1rem var(--COL-Black);*/
							background: var(--COL-White) url("../../img/common/arrow.svg") 50% 50% no-repeat;
							background-size: 70% auto;
						}
						.label{
							font-size: 16rem;
							font-family: var(--FNT-serif);
							text-transform: uppercase;
						}
					}
				}
			}
		}

	}
	.header .inner .nav.active{
		right: 0;
	}
	.header .inner .btn_ec{
		display: none;
	}
	.header .inner .btns{
		position: fixed;
		top: 0;
		/*right: 56rem;*/
        right: 0;
        padding-left: 4rem;
        padding-right: 4rem;
        display: flex;
		background-color: var(--COL-White);
		z-index: 600;
		> .btn_icn{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
            /*width: 48rem;*/
            width: 56rem;
            height: 60rem;
            > svg{
                width: 20rem;
                height: 20rem;

            }
        }
    }

}

/* btn_menu */

@media screen and (min-width: 768px) {
	.btn_menu,
	.bg_menu{
		display: none;
	}
}
@media screen and (max-width: 767px) {
	/*
	.btn_menu{
		position: fixed;
		top: 0;
		right: 0;
		width: 56rem;
		height: 60rem;
		background-color: var(--COL-White);
		z-index: 600;
		> a{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4rem;
			width: 100%;
			height: 100%;
			padding-right: 8rem;
			position: relative;
			transition: .35s ease-out;
			&::before,
			&::after{
				display: block;
				content: "";
				width: 18rem;
				height: 2rem;
				background-color: var(--COL-Text);
				transition: .35s ease-in-out;
			}
			> span{
				display: block;
				width: 18rem;
				height: 2rem;
				font-size: 0%;
				line-height: 0%;
				text-indent: 100%;
				letter-spacing: 0;
				white-space: nowrap;
				overflow: hidden;
				background-color: var(--COL-Text);
				transition: .35s ease-in-out;
			}
		}
	}
	.btn_menu.active{
			gap: 0;
		> a{
			&::before{
				transform: translateY(6rem) rotate(135deg);
			}
			&::after{
				transform: translateY(-6rem) rotate(-135deg);
			}
			> span{
				opacity: 0;
			}
		}
	}*/
    .btn_menu{
        display: none;
    }
}


/* ハンバーガーメニュー開いているとき背景固定、グレー表示 */

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

	body.fixed{
		position: fixed;
		width: 100%;
		height: 100%;
	}
	.bg_menu{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
      	background-color: rgba(var(--COL-Black-rgb), 0.5);
        backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		z-index: -1;
		transition: all 0.5s;
		cursor: pointer;
	}
	.btn_menu.active + .bg_menu{
		opacity: 1;
		visibility: visible;
	}

}



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


/******************************************************
.contents
******************************************************/


@media screen and (min-width: 768px) {

	.contents_header{
		width: 100%;
		padding: 64rem 0;
	}

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

	.contents_header{
		padding: 32rem 0;
	}

}

/*.contents.contents_contact{
	background: rgba(var(--COL-Camel-rgb), 0.05);
}*/
.contents.contents_contact{
	background: var(--BG-DarkBrown);
	background-size: 100% auto;
}
.contents.contents_contact .contents_header{
	color: var(--COL-White);
}
.contents.contents_contact .section_contact{
	padding-top: 0;
}
.contents.contents_contact .section_contact .col_wht{
	color: var(--COL-White);
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.contents.contents_contact .section_contact{
		padding-left: 8rem;
		padding-right: 8rem;
	}
	.contents.contents_contact .section_contact .col_wht{
		padding-left: 16rem;
		padding-right: 16rem;
	}
}


/******************************************************
section
******************************************************/

.section_label{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section_label > .label_en{
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
}
.section_label > .label_en::first-letter{
	font-size: 1.2em;
}
.section_label > .label{
	line-height: 1;
	font-family: var(--FNT-serif);
}

@media screen and (min-width: 768px) {

	.section_label{
		gap: 8rem;
	}
	.section_label > .label_en{
		font-size: 60rem;
	}
	.section_label > .label{
		font-size: 18rem;
	}

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

	.section_label{
		gap: 4rem;
	}
	.section_label > .label_en{
		font-size: 36rem;
	}
	.section_label > .label{
		font-size: 12rem;
	}

}

/******************************************************
home
******************************************************/

.contents_header_home{
	position: relative;
	width: 100%;
}
.contents_header_home::before{
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: "";
	background: var(--BG-DarkBrown);
	background-size: 100% auto;
	opacity: 0.94;
	z-index: 1;
}
.contents_header_home::after{
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	content: "";
	background: 50% 50% no-repeat;
	background-size: cover;
	z-index: 2;
}
.contents_header_home .main_copy{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
	color: var(--COL-White);
	font-family: var(--FNT-serif);
	line-height: 1.75;
	z-index: 3;
}
.contents_header_home .main_copy > .copy01{
	letter-spacing: 0.2em;
}
.contents_header_home .main_copy > .copy02{
	letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {

	.contents_header_home{
		height: 600rem;
	}
	.contents_header_home::before{
		width: 83%;
		height: calc(100% - 40rem);
	}
	.contents_header_home::after{
		width: 78%;
		height: calc(100% - 40rem);
		background-image: url(../../img/home/ph_main_pc.jpg);
	}
	.contents_header_home .main_copy{
		gap: 16rem;
		width: 80%;
		min-width: 1160rem;
		margin: 0 auto;
		padding-top: 40rem;
	}
	.contents_header_home .main_copy > .copy01{
		font-size: 48rem;
	}
	.contents_header_home .main_copy > .copy02{
		font-size: 20rem;
	}

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

	.contents_header_home{
		height: 425rem;
	}
	.contents_header_home::before{
		width: 359rem;
		height: 359rem;
	}
	.contents_header_home::after{
		top: 18rem;
		width: 321rem;
		height: 359rem;
		background-image: url(../../img/home/ph_main_sp.jpg);
	}
	.contents_header_home .main_copy{
		justify-content: flex-end;
		gap: 16rem;
		padding: 0 0 36rem 32rem;
	}
	.contents_header_home .main_copy > .copy01{
		font-size: 32rem;
	}
	.contents_header_home .main_copy > .copy02{
		font-size: 15rem;
	}

}

.section_home_brands{
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--BG-LightBrown);
	background-size: 100% auto;
}
.section_home_brands .list_brands{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 768px) {

	.section_home_brands{
		gap: 40rem;
		padding: 80rem 0 104rem;
	}
	.section_home_brands .list_brands{
		gap: 64rem;
	}
	.section_home_brands .list_brands > li{
		width: 480rem;
	}

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

	.section_home_brands{
		gap: 40rem;
		padding: 64rem 0;
	}
	.section_home_brands .list_brands{
		flex-direction: column;
		gap: 32rem;
		padding: 0 24rem;
	}

}

.section_home_company{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: rgba(var(--COL-Camel-rgb), 0.05);
}
.section_home_company > section{
	display: flex;
}
.section_home_company > section .section_body{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5em;
	background: var(--COL-White);
	box-shadow: 1px 1px 50px 0 rgba(var(--COL-Black-rgb), 0.05);
}

.list_info > dl{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top: 16rem;
	padding-bottom: 16rem;
    border-bottom: solid 1px var(--COL-Gray);
}
.section_home_access .list_info > dl{
	padding-top: 12rem;
	padding-bottom: 12rem;
}
.list_info > dl > dt{
	text-align: left;
	color: var(--COL-DarkGray);
}
.list_info > dl > dd{
    padding-left: 1em;
	text-align: left;
}





@media screen and (min-width: 768px) {

	.section_home_company{
		gap: 80rem;
	}
	.section_home_company > section{
		position: relative;
		justify-content: space-between;
		align-items: flex-start;
		gap: 80rem;
		width: 100%;
		max-width: 1200rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: calc((100vw - 1200rem)/ 2);
		padding-right: calc((100vw - 1200rem)/ 2);
		box-sizing: content-box;
	}
	.section_home_company > section.section_home_overview{
		padding-top: 120rem;
	}
	.section_home_company > section.section_home_access{
		flex-direction: row-reverse;
		padding-bottom: 120rem;
	}
	.section_home_company > section.section_home_overview::before{
		position: absolute;
		left: 0;
		bottom: -108rem;
		display: block;
		width: 50%;
		height: 560rem;
		content: "";
		background: url(../../img/home/img_company01_pc.jpg) 50% 50% no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.section_home_company > section.section_home_access::before{
		position: absolute;
		right: 0;
		bottom: 0;
		display: block;
		width: 75%;
		height: 320rem;
		content: "";
		background: url(../../img/home/img_company02_pc.jpg) 50% 50% no-repeat;
		background-size: cover;
		z-index: 1;
	}

	.section_home_company > section .section_label{
		align-items: flex-start;
	}
	.section_home_company > section .section_body{
		position: relative;
		flex: 1 0 0;
		padding: 80rem;
		z-index: 10;
	}

	.list_info > dl{
		padding-left: 8rem;
		padding-right: 8rem;
	}
	.list_info > dl > dt{
		width: 10em;
	}
	.list_info > dl > dd{
		width: calc(100% - 10em);
	}



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

	.section_home_company{
		gap: 40rem;
		padding: 64rem 0;
	}
	.section_home_company > section{
		flex-direction: column;
		align-items: stretch;
		gap: 40rem;
		padding: 0 16rem;
	}
	.section_home_company > section.section_home_overview{
		padding-bottom: 250rem;
		background: url(../../img/home/img_company_sp.jpg) 0 100% no-repeat;
		background-size: 100% auto;
	}
	.section_home_company > section .section_body{
		padding: 40rem 24rem;
	}
	.section_home_company > section.section_home_access .section_body{
		padding: 8rem 8rem 40rem;
	}
	.section_home_company > section.section_home_access .section_body .list_info{
		padding: 0 16rem;
	}

	.list_info > dl{
	}
	.list_info > dl > dt{
		width: 6em;
		line-height: 1.3;
	}
	.list_info > dl > dd{
		width: calc(100% - 6em);
		line-height: 1.3;
	}


}


.section_home_contact{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section_home_contact .section_body{
}
@media screen and (min-width: 768px) {

	.section_home_contact{
		gap: 40rem;
		padding: 80rem 0 104rem;
	}
	.section_home_contact .section_body{
	}

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

	.section_home_contact{
		gap: 40rem;
		padding: 64rem 0;
	}
	.section_home_contact .section_body{
	}

}


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

/******************************************************
仮アップ用
******************************************************/

.contents_header_home2 .main_copy,
.section_home_company2 > section{
	height: 0px;
	font-size: 0%;
	line-height: 0%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

@media screen and (min-width: 768px) {

	.contents_header_home2{
		width: 100%;
		height: 600rem;
		background: url(../../img/home/main_visual_pc.jpg) 50% 0 no-repeat;
		background-size: auto 100%;
	}
	.section_home_company2{
		width: 100%;
		height: 1820rem;
		background: url(../../img/home/section_company_pc.jpg) 50% 0 no-repeat;
		background-size: auto 100%;
	}

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

	.contents_header_home2{
		width: 100%;
		height: 425rem;
		background: url(../../img/home/main_visual_sp.jpg) 50% 0 no-repeat;
		background-size: cover;
	}
	.section_home_company2{
		width: 100%;
		height: 1843rem;
		background: url(../../img/home/section_company_sp.jpg) 50% 0 no-repeat;
		background-size: cover;
	}

}

.section_home_contact2{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section_home_contact2 .section_body{
}
@media screen and (min-width: 768px) {

	.section_home_contact2{
		gap: 40rem;
		padding: 80rem 0 104rem;
	}
	.section_home_contact2 .section_body{
	}

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

	.section_home_contact2{
		gap: 40rem;
		padding: 64rem 0;
	}
	.section_home_contact2 .section_body{
	}

}


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