@charset "utf-8";
/* Copyright 2020 FSFIELD All Rights Reserved. */

@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */

	/* common.css上書き
	---------------------------------------------- */
	#wrap_top{
		background: none;
		width: calc(100% - 300px);
		padding: 5px 40px 0 0;
		color: #FFF;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}
	
	/* グローバルナビアクティブ
	---------------------------------------------- */

	/* メインビジュアル
	---------------------------------------------- */
	.main{
		display: flex;
		min-height: 800px;
		height: 100vh;
	}
	
	.main_l{
		width: 260px;
		text-align: center;
		padding: 60px 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.main_logo a{
		display: inline-block;
		width: 163px;
	}
	
	.main_logo a img{width: 100%;}
	
	.scroll{
		writing-mode: vertical-rl;
		font-size: 1.6rem;
		margin: 0 auto;
	}
	
	.scroll p{
		display: inline-block;
		font-family: 'Barlow Condensed';
		line-height: 1;
		position: relative;
		padding-bottom: 92px;
	}
	
	.scroll p::after{
		content: "";
		display: block;
		background: #AAAAAA;
		width: 1px;
		height: 80px;
		position: absolute;
		top: 50px;
		left: 6px;
	}
	
	.main_r{
		background: url("../img/home/pc/img_main01.jpg") no-repeat 0 0;
		background-size: cover;
		width: calc(100% - 260px);
		position: relative;
	}
	
	.nav_main{
		width: 775px;
		padding: 0 40px;
		position: absolute;
		top: 25px;
		right: 0;
	}
	
	.nav_main ul{
		display: flex;
		justify-content: space-between;
	}
	
	.nav_main ul li a{
		height: 80px;
		color: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.nav_main ul li a::before{
		content: "";
		display: block;
		position: absolute;
		bottom: 24px;
		left: 0;
		right: 0;
		margin: auto;
		background: #FFF;
		height: 3px;
		transition: transform .3s;
		transform: scaleX(0);
	}
	
	.nav_main ul li.g01 a::before{width: 42px;}
	.nav_main ul li.g02 a::before{width: 86px;}
	.nav_main ul li.g03 a::before{width: 148px;}
	.nav_main ul li.g04 a::before,
	.nav_main ul li.g05 a::before,
	.nav_main ul li.g06 a::before{width: 58px;}
	.nav_main ul li.g07 a::before{width: 86px;}
	
	.nav_main ul li a:hover::before{transform: scaleX(1);}
	
	.txt_main{
		position: absolute;
		left: 50%;
		bottom: 260px;
		color: #FFF;
		margin-left: -630px;
	}
	
	.txt_main p:nth-child(1){
		font-size: 5.6rem;
		font-weight: bold;
		letter-spacing: 0.3em;
	}
	
	.txt_main p:nth-child(2){
		font-size: 3.2rem;
		font-family: 'Barlow Condensed';
	}
	
	/*--News--*/
	.main_news{
		background: #FFF;
		width: 700px;
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
	}
	
	.main_news h2{
		background: #042357;
		color: #FFF;
		font-family: 'Barlow Condensed';
		font-size: 1.8rem;
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.main_news_inner01{
		background: #FFF;
		padding: 20px 30px 0;
		width: 500px;
		border-bottom: 1px solid #DDDDDD;
	}
	
	.main_news_inner01 a{
		display: block;
		color: #444;
		transition: color .2s;
	}
	
	.main_news_inner01 a:hover{color: #888;}
	
	.main_news_inner01 a time{
		display: block;
		color: #888888;
		font-size: 1.4rem;
		font-family: 'Barlow Condensed';
	}
	
	.main_news_inner02{
		width: 100px;
		min-height: 120px;
		border-left: 1px solid #DDDDDD;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #DDDDDD;
	}
	
	/* 取扱商品紹介
	---------------------------------------------- */
	.sec_commodity{
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: flex-end;
		padding: 160px 0 140px;
	}
	
	.sec_commodity .image{
		background: url("../img/home/img_commodity01.jpg") no-repeat center;
		background-size: cover;
		width: 62.5%;
		min-width: 739px;
		height: 600px;
		transition-timing-function: cubic-bezier(.075,.82,.165,1);
		transition-duration: 1s;
		transition-delay: 0s;
		overflow: hidden;
		position: relative;
		transform: translate3d(-100%,0,0);
		transform-origin: left;
	}
	
	.sec_commodity .image.anim01{transform: translate3d(0,0,0);}
	
	.sec_commodity .image::after{
		content: "";
		display: block;
		background: linear-gradient(90deg, #03035B, #00AEE4);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		transition-timing-function: cubic-bezier(.075,.82,.165,1);
		transition-duration: 1.2s;
		transition-delay: .6s;
		transform: scaleX(1);
		transform-origin: right;
	}
	
	.sec_commodity .image.anim01::after{transform: scale(0,1);}
	
	.commodity{
		width: 37.5%;
		padding: 0 5%;
		opacity: 0;
		transform: translate(0, 60px);
		transition: .8s;
	}
	
	.commodity.anim02{
		opacity: 1;
		transform: translate(0, 0);
	}
	
	.commodity .lead{
		line-height: 2.4;
		margin-bottom: 65px;
	}
	
	/* ホームナビ
	---------------------------------------------- */
	.wrap_nav_home{
		padding: 140px 0;
		position: relative;
	}
	
	.wrap_nav_home::before{
		content: "";
		width: 100%;
		height: 360px;
		background: url("../img/pc/bg01.jpg") no-repeat center;
		background-attachment: fixed;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.nav_home{
		width: 1080px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	
	.nav_home_inner{
		width: 340px;
		border: 1px solid #BFCAD7;
		opacity: 0;
		transition: 0s;
		transition-delay:0s;
		transform: translateY(50px);
	}
	
	.nav_home_inner.anim03{
		opacity: 1;
		transition: .8s;
		transform:translateY(0);
	}
	
	.nav_home_inner:nth-child(1).anim03{transition-delay:0.5s;}
	.nav_home_inner:nth-child(2).anim03{transition-delay:1.0s;}
	.nav_home_inner:nth-child(3).anim03{transition-delay:1.5s;}
	
	.nav_home_inner a{
		background: #FFF;
		display: block;
		color: #444;
	}
	
	.nav_home_inner img{
		width: 100%;
		transition: opacity .3s;
	}
	
	.nav_home_inner a:hover img{opacity: 0.7;}
	
	.n_inner{display: flex;}
	
	.n_inner .inner01,
	.n_inner .inner02{
		display: flex;
		justify-content: center;
		flex-direction: column;
		min-height: 100px;
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	
	.n_inner .inner01{
		border-right: 1px solid #BFCAD7;
		width: 240px;
		padding: 0 30px;
	}
	
	.n_inner .inner01 p:nth-of-type(1){
		color: #444;
		font-weight: bold;
	}
	
	.nav_home_inner a:hover .n_inner .inner01 p:nth-of-type(1){color: #014581;}
	
	.n_inner .inner01 p:nth-of-type(2){
		font-family: 'Barlow Condensed';
		color: #CCCCCC;
	}
	
	.n_inner .inner02{
		width: 100px;
		align-items: center;
	}
	

}/*--@media--*/


@media only screen and (min-width:768px) and (max-width:1637px){ /* 表示領域が768px以上1637px以下の場合に適用するスタイル */

	/* メインビジュアル
	---------------------------------------------- */
	.txt_main{
		left: 50px;
		margin-left: 0;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	/* メインビジュアル
	---------------------------------------------- */
	.main{
		display: flex;
		min-height: 500px;
		height: 100vh;
	}
	
	.main_l{
		width: 75px;
		height: calc(100vh - 122px);
		text-align: center;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.main_logo a{
		display: inline-block;
		width: 65px;
	}
	
	.main_logo a img{width: 100%;}
	
	.scroll{
		writing-mode: vertical-rl;
		font-size: 1.6rem;
		margin: 0 auto;
	}
	
	.scroll p{
		display: inline-block;
		font-family: 'Barlow Condensed';
		line-height: 1;
		position: relative;
		padding-bottom: 92px;
	}
	
	.scroll p::after{
		content: "";
		display: block;
		background: #AAAAAA;
		width: 1px;
		height: 80px;
		position: absolute;
		top: 50px;
		left: 6px;
	}
	
	.main_r{
		background: url("../img/home/sp/img_main01.jpg") no-repeat 0 0;
		background-size: cover;
		width: calc(100% - 75px);
		position: relative;
	}
	
	.main_r .nav_main{display: none;}
	
	.txt_main{
		position: absolute;
		left: 35px;
		top: 300px;
		color: #FFF;
	}
	
	.txt_main p:nth-child(1){
		font-size: 2.2rem;
		font-weight: bold;
		letter-spacing: 0.3em;
	}
	
	.txt_main p:nth-child(2){
		font-size: 1.6rem;
		font-family: 'Barlow Condensed';
	}
	
	/*--News--*/
	.main_news{
		background: #FFF;
		width: calc(100% + 75px);
		position: absolute;
		left: -75px;
		bottom: 0;
		display: flex;
	}
	
	.main_news h2{
		background: #042357;
		color: #FFF;
		font-family: 'Barlow Condensed';
		font-size: 1.8rem;
		width: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.main_news_inner01{
		padding: 18px 15px 0;
		width: calc(100% - 135px);
		border-bottom: 1px solid #DDDDDD;
	}
	
	.main_news_inner01 a{
		display: block;
		color: #444;
	}
	
	.main_news_inner01 a time{
		display: block;
		color: #888888;
		font-size: 1.2rem;
		font-family: 'Barlow Condensed';
	}
	
	.main_news_inner01 a h3{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.main_news_inner02{
		width: 60px;
		min-height: 73px;
		border-left: 1px solid #DDDDDD;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #DDDDDD;
	}
	
	/* 取扱商品紹介
	---------------------------------------------- */
	.sec_commodity{
		display: flex;
		flex-direction: column-reverse;
		padding: 70px 0;
	}
	
	.sec_commodity .image{
		background: url("../img/home/img_commodity01.jpg") no-repeat center;
		background-size: cover;
		width: calc(100% - 15px);
		padding-top: 50%;
		transition-timing-function: cubic-bezier(.075,.82,.165,1);
		transition-duration: 1s;
		transition-delay: 0s;
		overflow: hidden;
		position: relative;
		transform: translate3d(-100%,0,0);
		transform-origin: left;
	}
	
	.sec_commodity .image.anim01{transform: translate3d(0,0,0);}
	
	.sec_commodity .image::after{
		content: "";
		display: block;
		background: linear-gradient(90deg, #03035B, #00AEE4);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		transition-timing-function: cubic-bezier(.075,.82,.165,1);
		transition-duration: 1.2s;
		transition-delay: .6s;
		transform: scaleX(1);
		transform-origin: right;
	}
	
	.sec_commodity .image.anim01::after{transform: scale(0,1);}
	
	.commodity{
		padding: 35px 15px 0;
		opacity: 0;
		transform: translate(0, 60px);
		transition: .8s;
	}
	
	.commodity.anim02{
		opacity: 1;
		transform: translate(0, 0);
	}
	
	.commodity .lead{
		line-height: 2.4;
		margin-bottom: 30px;
	}
	
	/* ホームナビ
	---------------------------------------------- */
	.wrap_nav_home{
		padding: 70px 40px;
		position: relative;
		background: url("../img/sp/bg01.jpg") no-repeat center;
		background-size: cover;
	}
	
	.nav_home_inner{
		border: 1px solid #BFCAD7;
		max-width: 400px;
		margin: 0 auto 30px;
		opacity: 0;
		transition: 0s;
		transition-delay:0s;
		transform: translateY(50px);
	}
	
	.nav_home_inner:last-of-type{margin-bottom: 0;}
	
	.nav_home_inner.anim03{
		opacity: 1;
		transition: .8s;
		transform: translateY(0);
	}
	
	.nav_home_inner a{
		background: #FFF;
		display: block;
		color: #444;
	}
	
	.nav_home_inner img{width: 100%;}
	
	.n_inner{display: flex;}
	
	.n_inner .inner01,
	.n_inner .inner02{
		display: flex;
		justify-content: center;
		flex-direction: column;
		min-height: 75px;
	}
	
	.n_inner .inner01{
		border-right: 1px solid #BFCAD7;
		width: calc(100% - 60px);
		padding-left: 20px;
	}
	
	.n_inner .inner01 p:nth-of-type(1){
		color: #444;
		font-weight: bold;
		font-size: 1.7rem;
		letter-spacing: 0.1em;
	}
	
	.n_inner .inner01 p:nth-of-type(2){
		font-family: 'Barlow Condensed';
		color: #CCCCCC;
	}
	
	.n_inner .inner02{
		width: 60px;
		align-items: center;
	}
	

}/*--@media--*/


@media only screen and (max-width:360px){ /* 表示領域が360px以下の場合に適用するスタイル */
	
	/* メインビジュアル
	---------------------------------------------- */
	.txt_main{left: 20px;}
	
	.txt_main p:nth-child(1){font-size: 1.7rem;}
	
	/* ホームナビ
	---------------------------------------------- */
	.n_inner .inner01{padding-left: 10px;}
	
	.n_inner .inner01 p:nth-of-type(1){font-size: 1.4rem;}


}/*--@media--*/