/*テーマカラーの定義（CSS変数）
ここのカラーコードを変更するだけで、テンプレートのテーマカラーが変わります。
---------------------------------------------------------------------------*/
:root {
/*	--main:#bdccd4;　　　
	--の後にアルファベットで好きに名前を設定。：で区切り#bdccd4で色を指定して；で閉じる
*/
    --main:#bdccd4;
	--sub:#a9bdc7;
}
/*写真の制限
保存が勝手に保存できないようにするプログラム
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.img{
	/* PCの右クリック禁止 */
    pointer-events: none;
	/* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

/*全体の高さ指定*/
html,body {
	height: 100%;
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

/*文字の設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
body {
	font-family:Komachi-MM, "Kaimin Sora Medium", "ヒラギノ角ゴ Pro W3",'M PLUS Rounded 1c',"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #777;		/*文字色*/
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:9000;
	background:#eee;
	text-align:center;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:200px;
}

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 9999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
	/*降りてくる背景色の設定*/
    background:  linear-gradient(0deg, rgba(199, 137, 3, 1), rgba(231, 195, 126, 1) 39%, rgba(243, 231, 206, 1));
	/*降りてくる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}
/*画面移動アニメ時間間隔*/
@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/*画面移動アニメ時間間隔*/

/*========= 画面遷移のためのCSS 2 ===============*/

/*画面遷移アニメーション*/
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg2{
    display: block;
    content: "";
    position:fixed;
	z-index: 900;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    /*降りてくる背景色の設定*/
    background:  linear-gradient(0deg, rgba(199, 137, 3, 1), rgba(231, 195, 126, 1) 39%, rgba(243, 231, 206, 1));
	/*降りてくる背景色の設定*/
	animation-name:PageAnime2;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}
/*画面移動アニメ時間間隔*/
@keyframes PageAnime2{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/*画面移動アニメ時間間隔*/
/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*パソコン版ナビゲーションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#pc-nav{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;
	width: 250px;
	height: 100%;
	background:#fff;
}

/*ロゴ*/
#pc-logo{
	display: block;
	padding: 100px 40px 100px 40px ;
}

#pc-logo img{
	width: 170px;
}
/*ロゴ*/

#pc-nav{
	display: none;
}

#pc-nav nav ul{
	position: relative;
}

#pc-nav nav ul li:first-child{
	border-top: solid 1px var(--sub);
}

/*index専用*/
#pc-nav-main{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;
	width: 250px;
	height: 100%;
	background:#fff;
}


#pc-nav-main{
	display: none;
}

.goldline{
	display: block;
	position: absolute;
	top: 0;
	left: 250px;
	width: 10px;
	height: 100%;
	background-image: linear-gradient(0deg, rgba(199, 137, 3, 1), rgba(231, 195, 126, 1) 30%, rgba(243, 231, 206, 1) 50%, rgba(231, 195, 126, 1) 70%, rgba(199, 137, 3, 1));
}


#pc-nav-main nav ul{
	position: relative;
}

#pc-nav-main nav ul li:first-child{
	border-top: solid 1px var(--sub);
}
/*ドロップダウンメニュー*/

#drop1{
	position: relative;
}

#drop1 .dropdown{
    display: block;
    width: 150px;
    position: absolute;
	z-index: 5;
	top: 38.5px;
	left: 260px;
	opacity: 0;
}

#drop1:hover .dropdown{
	display: block;
	position: absolute;
	top: 38.5px;
	left: 250px;
	opacity: 1;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#drop1:hover .dropdown li{
	border-top: none;
}

.dropdown li a{
	text-decoration: none;
	color: #000;
	padding: 12.5px;
	display: block;
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
	background-color:#C7A265;
	border-bottom: solid 1px #fff;
}

.dropdown li:last-child a{
	border-bottom: none;
}

.dropdown li a:hover{
	background-color: #C88C28;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
/*ナビゲーションホバーアニメ*/
.borderanime{
	font-family: "BIZ UDPMincho", serif;
	position: relative;
	text-decoration: none;
	display: inline-block;
	width: 225px;
	padding: 30px 0;
	padding-left: 25px;
	font-size: 20px;
	letter-spacing: 2px;
	color: #000;
	border-bottom: solid 1px var(--sub);
}
.borderanime:hover{
	background-color: #F5EBD0;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.borderanime span{
	font-size: 18px;
}

.borderanime::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #fff;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;  /*変形の時間*/
}

.borderanime:hover::after {
	transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
	transform-origin: left top; /*左から右に向かう*/
}

@media screen and (min-width:1200px) {
	#pc-nav{
		display: none;/*画面移動がある場合JAVAで表記*/
	}
	
	#pc-nav-main{
		display: block;
	}
}


/*パソコン版ナビゲーションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*携帯版 ヘッダーゲーションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
header{
	background-color: #fff;
	width: 100%;
	height: 60px;
	position: fixed;
	display: block;
	z-index: 1200;
	top: 0;
	left: 0;
}

@media screen and (min-width:1200px) {
	header{
		background-color:#fff;
		width: 100%;
		height: 60px;
		position: fixed;
		display: none;
	}
}

header #sp-logo img{
	position:absolute;
	top: 50%;
	left: 15px;
	transform: translate(0 ,-50%);
	-webkit-transform: translate(0 ,-50%);
    -ms-transform: translate(0 ,-50%);
	height: 25px;
	z-index: 9999;
}

/*ナビゲーション*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 1000;
    /*ナビのスタート位置と形状*/
	top:-120%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#FFFEFC;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
	top: 60px;
	width: 100%;
}


#g-nav ul  li{
	position: relative;
	list-style: none;
	width: 100%;
}

#g-nav ul  li a{
	color: #000;
	font-family: "BIZ UDPMincho", serif;
	text-decoration: none;
	padding:25px 0;
	display: block;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1rem;
	padding-left: 25px;
	border-bottom: solid 1px var(--sub);
	background: rgba(255,255,255,0.1);
}


#g-nav ul  li i{
	font-size: 1.4rem;
	color: #E5D4A6;
	position: absolute;
	right: 25px;
}

#g-nav ul  li:hover a{
	background-color: var(--main);
	border-bottom: solid 1px #fff;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#g-nav ul  li:hover i{
	right: 15px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#g-nav ul  li:first-child a{
	border-top: solid 1px var(--sub);
}

.goldline2{
	position: absolute;
	bottom: -6px;
	width: 100%;
	height: 6px;
	background: linear-gradient(90deg, rgba(199, 137, 3, 1), rgba(231, 195, 126, 1) 30%, rgba(243, 231, 206, 1) 50%, rgba(231, 195, 126, 1) 70%, rgba(199, 137, 3, 1));
}

/*ハンバーガーメニュー*/
.openbtn{
	position: absolute;
	cursor: pointer;
    width: 45px;
    height:45px;
	top: 50%;
	left: calc(100% - 55px);
	transform: translate(0 ,-50%);
	-webkit-transform: translate(0 ,-50%);
    -ms-transform: translate(0 ,-50%);
	z-index: 9998;
	background: linear-gradient(45deg, rgba(195, 194, 201, 1), rgba(89, 105, 123, 1) 50%, rgba(161, 162, 172, 1) 50%, rgba(217, 217, 221, 1));
}

.openbtn .openbtn-area{
    transition: all .4s;
}

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50% ,-50%);
	-webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
    height: 2px;
	background: #fff;
  	width: 45%;
  }

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

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

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

.openbtn.active span:nth-of-type(1) {
    top: 15px;
    left: 12.5px;
    transform: translateY(6px) rotate(-135deg);
    width: 45%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 27.5px;
    left: 12.5px;
    transform: translateY(-6px) rotate(135deg);
    width: 45%;
}

@media screen and (min-width:1200px) {
	.openbtn{
		display: none;
	}
}

/*ハンバーガーメニュー*/



/*携帯版 ヘッダーゲーションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*メイン boxーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

main{
	width: calc(100% - 0px);
	margin-left: 0px;
	height: auto;
}

@media screen and (min-width:1200px) {
	main{
		width: calc(100% - 250px);
		margin-left: 250px;
		height: auto;
	}
}

#top-main{
	width: 100vw;
	height: 100vh;
	margin-left: 0;
	background: url("../images/back.jpg");
	background-size: cover;
}

#topnav{
	padding-top: 50px;
}

.navtop-logo{
	display: block;
	width: 60%;
	margin: 0 auto;
	padding-bottom: 60px;
	text-align: center;
}

.top-navimg{
	width: 100%;
}

.topnav-p{
	color: #fff;
	margin-top: 20px;
	letter-spacing: 1px;
	font-family: "ヒラギノ角ゴ Pro W3";
	font-weight: bold;
	line-height: 1.4rem;
}

#top-nav-flex{
	display: flex;
	flex-wrap: wrap;
	padding: 50px 25px;
	align-items: center;
	justify-content: center;
	gap: 25px 0;
}

.top-nav-btn{
	display: block;
	text-decoration: none;
	width: 60%;
	align-items: center;
	justify-content: center;
	text-align: center;
}


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

	#topnav{
		padding-top: 10vh;
	}

	.navtop-logo{
		display: block;
		width: 30%;
		margin: 0 auto;
		padding-bottom: 0px;
		text-align: center;
	}

	.top-navimg{
		width: 100%;
	}

	#top-nav-flex{
		display: flex;
		flex-wrap: wrap;
		padding: 50px 50px;
		align-items: flex-start;
		justify-content: center;
		gap: 0 50px;
	}

	.top-nav-btn{
		width: 35%;
	}
}

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

	#topnav{
		padding-top: 15vh;
	}

	.navtop-logo{
		display: block;
		width: 350px;
		margin: 0 auto;
		padding-bottom: 0px;
		text-align: center;
	}

	.top-navimg{
		width: 100%;
	}

	.topnav-p{
		color: #fff;
		font-size: 1.4rem;
		margin-top: 25px;
		letter-spacing: 1px;
		font-family: "ヒラギノ角ゴ Pro W3";
		font-weight: bold;
		line-height: 1.4rem;
	}
	
	.topnav-p br{
		display: none;
	}

	#top-nav-flex{
		display: flex;
		flex-wrap: wrap;
		padding: 70px 10vw;
		align-items: flex-start;
		justify-content: center;
		gap: 0 70px;
	}

	.top-nav-btn{
		display: block;
		text-decoration: none;
		width: 30%;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.top-nav-btn:hover .top-navimg{
		transform: scale(1.05);
		transition: 0.3s;
	}
}
/*メイン boxーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*スライドショー背景*/

#mainimg{
	position: relative;
	width:100%;
	height: 50vh;
	z-index: 6;
	margin-top: 66px;
}
.vegas-timer {
    display: none !important;
}

#catch-type{
	width: 80%;
	position: absolute;
	bottom: 10%;
	right: 0;
}
.slide-mini{
	width: 100%;
	padding: 10vw 0 5vw 0 ;
	position: relative;
	display: flex;
	background: #fff;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 0 ;
}

#mainimg2{
	width: 80%;
	height: 110px;
}

#logo-type{
	text-align: center;
	width: 35%;
	padding-top: 5vw;
}

/*スライドショー背景*/

/*NeuerFlussについて*/
#about-nf{
	position: relative;
	padding: 50px 25px;
 	background: linear-gradient(180deg, rgba(189, 204, 212, 1) 50%, rgba(169, 189, 199, 1) 50%);
	text-align: center;
}

#logo-type2{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.title{
	display: inline-block;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	padding: 0 15px;
}

.title h1{
	font-family: "BIZ UDPMincho", serif;
	font-size: 4vw;
	color: #000;
	text-align: center;
	letter-spacing: 1px;
	
}

.title h1 span{
	display: block;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 231, 145, 1) 30% 50%, rgba(176, 145, 0, 1) 50%, rgba(237, 195, 0, 1) 70%, rgba(240, 231, 148, 1));
	margin-top: 6px;
}

.title-sub{
	color: #fff;
	font-size: 7vw;
	font-family: "Alata", sans-serif;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.nf-p{
	position: relative;
	display: block;
	margin: 10px 0;
	z-index: 2;
}

.nf-p span{
	display: inline-block;
	background: #fff;
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3";
	padding: 6px 10px;
	font-size:4vw;
	letter-spacing: 1px;
}

#nf-p{
	margin-top: 25px;
}
.jikan{
	display: none;
}


@media screen and (min-width:700px) {
	.slide-flex{	
		display: flex;
		flex-wrap: wrap;
	}

	#mainimg{
		position: relative;
		width:100%;
		height: 50vh;
	}

	.slide-mini{
		width: 30%;
		padding:30px 0;
	}
	#catch-type{
		width: 70%;
		position: absolute;
		bottom: 10%;
		right: 0;
	}
	#mainimg2{
		width: 60%;
		height: 80%;
	}

	#logo-type{
		text-align: center;
		width: 60%;
		margin: 0 0%;
		padding-top: 10px;
	}

	/*スライドショー背景*/

	/*NeuerFlussについて*/
	#about-nf{
		width:calc(70% - 50px);
		padding: 70px 25px;
		background: linear-gradient(180deg, rgba(189, 204, 212, 1) 50%, rgba(169, 189, 199, 1) 50%);
	}

	.title{
		padding: 0 20px;
	}

	.title h1{
		font-size: 18px;
	}

	.title-sub{
		color: #fff;
		font-size: 30px;
		margin-bottom: 25px;
	}

	.nf-p span{
		display: inline-block;
		background: #fff;
		color: #000;
		font-family: "ヒラギノ角ゴ Pro W3";
		padding: 6px 10px;
		font-size: 18px;
		letter-spacing: 1px;
	}
	.nf-p{
		margin: 15px 0;
		z-index: 2;
	}

}


@media screen and (min-width:1200px) {
	.slide-flex{	
		display: flex;
		flex-wrap: wrap;
	}

	#mainimg{
		position: relative;
		width:70%;
		height: 100vh;
		margin-top: 0px;
	}

	.slide-mini{
		width: 30%;
		padding:100px 0;
	}
	#mainimg2{
		width: 60%;
		height: 80%;
	}

	#logo-type{
		text-align: center;
		width: 60%;
		margin: 0 0%;
		padding-top: 10px;
	}

	/*スライドショー背景*/

	/*NeuerFlussについて*/
	#about-nf{
		width:calc(100% - 20vw);
		padding: 70px 10vw;
		background: linear-gradient(90deg, rgba(189, 204, 212, 1) 50%, rgba(169, 189, 199, 1) 50%);
	}

	.title{
		padding: 0 25px;
	}

	.title h1{
		font-size: 24px;
	}

	.title-sub{
		color: #fff;
		font-size: 45px;
		margin-bottom: 50px;
	}

	.nf-p span{
		display: inline-block;
		background: #fff;
		color: #000;
		font-family: "ヒラギノ角ゴ Pro W3";
		padding: 10px 15px;
		font-size: 24px;
		letter-spacing: 2px;
	}
	
	.nf-p{
		margin: 20px 0;
		z-index: 2;
	}
	
	#nf-p{
		margin-top: 45px;
	}
	
	.jikan{
		width: calc(100% - 70px);
		display: block;
		border: solid 1px #000;
		margin: 0 auto;
		margin-top: 25px;
		text-align: center;
		color: #000;
		padding: 10px;
	}
	.jikan-p{
		padding-bottom: 10px;
		border-bottom: solid 1px #000;
		margin-bottom: 10px;
		font-family: "ヒラギノ角ゴ Pro W3";
		letter-spacing: 2px;
	}


}

/*事業内容*/

#jigyou-naiyou{
	width: calc(100% - 50px);
	padding:50px 25px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(235, 244, 245, 1));
}

.title-center{
	width: 100%;
	text-align: center;
}

.title-sub2{
	color: #bdccd4;
}

.jigyou-list{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

.jigyou-icon-box{
	width: 50%;
	text-align: center;
}
#jigyou-icon-box-sp{
	width: 50%;
	margin: 25px 50px 0px 50px;
}

.jigyou-icon-box h5{
	color: #000;
	margin-top: 10px;
	font-size: 3.5vw;
	line-height: 1.2rem;
	letter-spacing: 1px;
}

.bs-icon{
	width: 60%;
}

@media screen and (min-width:700px) {
	#jigyou-naiyou{
		width: calc(100% - 100px);
		padding:70px 50px;
	}
	.jigyou-list{
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}

	.jigyou-icon-box{
		width: 30%;
		text-align: center;
	}
	#jigyou-icon-box-sp{
		width: 30%;
		margin: 0;
	}

	.jigyou-icon-box h5{
		color: #000;
		margin-top: 10px;
		line-height: 1.2rem;
		letter-spacing: 1px;
		font-size: 16px;
	}
}

@media screen and (min-width:1200px) {
	#jigyou-naiyou{
		width: calc(100% - 20vw);
		padding:70px 10vw;
	}
	.jigyou-list{
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}

	.jigyou-icon-box{
		width: 25%;
		padding: 50px 0;
		text-align: center;
	}
	#jigyou-icon-box-sp{
		width: 25%;
		margin: 0;
	}

	.jigyou-icon-box h5{
		color: #000;
		margin-top: 10px;
		line-height: 1.6rem;
		letter-spacing: 2px;
		font-size: 18px;
	}
}


/*事業内容*/

.loop-box{
	position: relative;
	overflow: hidden;
	width: 100%;
}

#loop-back{
	position: absolute;
	top: 0;
	left: 0;
	height: 220px;
	text-align: center;
}


/*写真ループスライド=====================================================*/

.img-swiper{
  position: relative;
  top: 0 ;
  margin-top: 30px;
  overflow: hidden;
  display: flex;
  width:100%;
  align-items: center;
  height: auto;
  padding-bottom: 25px;
  z-index: 3;
}

.img-swiper-wrapper {
  display: flex;
  -webkit-animation: img-swiper-slide 80s  infinite linear ;
  animation: img-swiper-slide 80s infinite linear ;
}

@-webkit-keyframes img-swiper-slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes img-swiper-slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.img-swiper-wrapper2 {
  display: flex;
  -webkit-animation: img-swiper-slide2 80s -40s infinite linear ;
  animation: img-swiper-slide2 80s -40s infinite linear ;
}

@-webkit-keyframes  img-swiper-slide2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes img-swiper-slide2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.img-swiper-slide{
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	margin-right: 20px;
	border-radius: 3px;
}

/*商品写真 各写真設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.loop1{
	background-image: url("../images/loop/1.jpg");
	width: 180px;
	height: 120px;
	margin-top: 40px;
}

.loop2{
	background-image: url("../images/loop/2.jpg");
	width: 80px;
	height: 120px;
}

.loop3{
	background-image: url("../images/loop/3.jpg");
	width: 180px;
	height: 120px;
	margin-top: 40px;
}

.loop4{
	background-image: url("../images/loop/4.jpg");
	width: 80px;
	height: 120px;
}

.loop5{
	background-image: url("../images/loop/5.jpg");
	width: 180px;
	height: 120px;
	margin-top: 40px;
}

.loop6{
	background-image: url("../images/loop/6.jpg");
	width: 80px;
	height: 120px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

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

	#loop-back{
		width: 100%;
		height: auto;
	}
	.img-swiper{
	  position: relative;
	  top: 0 ;
	  margin-top: 30px;
	  width:100%;
	  align-items: center;
	  height: auto;
	  padding-bottom: 30px;
	  z-index: 3;
	}

}


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

	#loop-back{
		width: 100%;
	}
	
	.img-swiper{
	  position: relative;
	  top: 0 ;
	  margin-top: 50px;
	  width:100%;
	  align-items: center;
	  height: auto;
	  padding-bottom: 50px;
	  z-index: 3;
	}
	.img-swiper-slide{
		position: relative;
		flex-shrink: 0;
		overflow: hidden;
		background-size: cover;
		background-position: center center;
		margin-right: 70px;
		border-radius: 3px;
	}

	.loop1{
		width: 280px;
		height: 220px;
		margin-top: 60px;
	}

	.loop2{
		background-image: url("../images/loop/2.jpg");
		width: 160px;
		height: 220px;
	}

	.loop3{
		background-image: url("../images/loop/3.jpg");
		width: 280px;
		height: 220px;
		margin-top: 60px;
	}

	.loop4{
		background-image: url("../images/loop/4.jpg");
		width: 160px;
		height: 220px;
	}

	.loop5{
		background-image: url("../images/loop/5.jpg");
		width: 280px;
		height: 220px;
		margin-top: 60px;
	}

	.loop6{
		background-image: url("../images/loop/6.jpg");
		width: 160px;
		height: 220px;
	}

}

/*写真ループスライド*/

/*会社概要*/

#company-box{
	position: relative;
	padding: 50px 25px;
	background: #fff;
}

.company-box{
	position: relative;
	padding: 25px;
	margin: 0 auto;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(235, 244, 245, 1));
	border-right: solid 1px #000;
	border-left: solid 1px #000;
	z-index: 3;
}

.company-back{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: url("../images/back2.jpg");
	background-size: cover;
}

.company-list{
	padding: 10px;
	border-bottom: solid 1px var(--sub);
	color: #000;
}

.c-list-tag{
	font-family: "ヒラギノ角ゴ Pro W3";
	background: #DEECF1;
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 10px;
	color: #000;
	font-size: 3vw;
	mix-blend-mode: multiply;
}

.c-list-item{
	font-family: "ヒラギノ角ゴ Pro W3";
	color: #000;
	font-size: 3.5vw;
	line-height: 1.3rem;
}

@media screen and (min-width:700px) {
	#company-box{
		position: relative;
		padding: 70px 50px;
		background: #fff;
	}
	.company-box{
		position: relative;
		padding: 50px;
	}

	.company-back{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: url("../images/back2.jpg");
		background-size: cover;
	}

	.company-list{
		position: relative;
		display: flex;
		padding: 15px;
		border-bottom: none;
		color: #000;
	}

	.c-list-tag{
		display: flex;
		width: calc(3rem + 100px);
		align-items: center; /* 垂直中心 */
  		justify-content: space-between;
		background: transparent;
		padding: 0px 0px;
		margin-bottom: 0px;
		color: #000;
		font-size: 0.9rem;
		line-height: 1.3rem;
		mix-blend-mode: multiply;
	}
	 .c-list-tag:after {
	  border-top: 1px solid;
	  content: "";
	  width: 50px; /* 線の長さ */
	}
	.c-list-tag:after {
	  margin:0 25px; /* 文字の右隣 */
	}

	.c-list-item{
		font-size: 1rem;
		color: #000;
		line-height: 1.3rem;
	}
}

@media screen and (min-width:1200px) {
	#company-box{
		position: relative;
		padding: 70px 10vw;
	}
	.company-box{
		position: relative;
		padding:50px 100px;
	}

	.company-back{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: url("../images/back2.jpg");
		background-size: cover;
	}

	.company-list{
		position: relative;
		display: flex;
		padding: 15px;
		border-bottom: none;
		color: #000;
	}

	.c-list-tag{
		display: flex;
		width: calc(3rem + 100px);
		align-items: center; /* 垂直中心 */
  		justify-content: space-between;
		background: transparent;
		padding: 0px 0px;
		margin-bottom: 0px;
		color: #000;
		font-size: 1rem;
		line-height: 1.3rem;
		mix-blend-mode: multiply;
	}
	 .c-list-tag:after {
	  border-top: 1px solid;
	  content: "";
	  width: 50px; /* 線の長さ */
	}
	.c-list-tag:after {
	  margin:0 25px; /* 文字の右隣 */
	}

	.c-list-item{
		font-size: 1rem;
		color: #000;
		line-height: 1.3rem;
	}
}

/*会社概要*/


/*フッター*/
#footer{
	background: url("../images/back.jpg");
	padding: 25px;
	width: calc(100% - 50px);
}

.footer-logo{
	width: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.f-flex-sp{
	display: flex;
	border-top: solid 1px #fff;
	margin-top: 10px;
	padding-top: 25px;
	justify-content: space-between;
}

.f-access{
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3";
	font-size: 3.5vw;
	letter-spacing: 1px;
	line-height: 1.3rem;
	margin-bottom: 25px;
}

.f-nav{
	margin-top: 10px;
}

.f-a{
	text-decoration: none;
	display: flex;
	background: rgba(255,255,255,0.2);
	justify-content: space-between;
	margin: 10px 0 ;
}

.f-a-gold{
	width: 5px;
	background: linear-gradient(0deg, rgba(199, 137, 3, 1), rgba(231, 195, 126, 1) 30%, rgba(243, 231, 206, 1) 50%, rgba(231, 195, 126, 1) 70%, rgba(199, 137, 3, 1));
}

.f-flex-pc{
	width: 50vw;
}

.f-a-p{
	width: calc(100% - 24px);
	font-family: "ヒラギノ角ゴ Pro W3";
	text-align: left;
	padding:7px 12px;
	color: #fff;
	letter-spacing: 2px;
	font-size: 3.5vw;
}

.f-nav-card-box{
	width: calc(100% - 53vw);
}

.f-nav-card{
	position: relative;
	display: block;
	width: 100%;
	height: 120px;
	overflow: hidden;
	object-fit: cover;
	border-radius: 5px;
	margin-bottom: 15px;
}

.f-nav-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.f-nav-card span{
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 3vw;
	padding: 10px;
	text-decoration: none;
}

.f-contact-btn{
	display: block;
	background: #fff;
	color: #000;
	text-decoration: none;
	text-align: center;
	padding: 15px;
}

.copyright{
	color: #fff;
	margin-top: 20px;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3";
	font-size: 3vw;
}

.privacy{
	display: block;
	text-align: center;
	color: #C0C0C0;
	margin-top: 10px;
	font-family: "ヒラギノ角ゴ Pro W3";
	font-size: 3vw;
}

@media screen and (min-width:700px) {
	#footer{
		background: url("../images/back.jpg");
		padding: 70px 50px 50px 50px;
		width: calc(100% - 100px);
	}

	.footer-logo{
		width: 230px;
	}

	.f-flex-sp{
		margin-top: 15px;
		padding-top: 25px;
		justify-content: space-between;
	}

	.f-access{
		font-size: 1rem;
		letter-spacing: 1px;
		line-height: 1.3rem;
		margin-bottom: 25px;
	}

	.f-nav{
		margin-top: 10px;
	}

	.f-a{
		display: flex;
		background: rgba(255,255,255,0.2);
		justify-content: space-between;
		margin: 13px 0 ;
	}

	.f-flex-pc{
		width: 50vw;
	}
	.f-a-p{
		padding:10px 12px;
		color: #fff;
		letter-spacing: 2px;
		font-size: 1rem;
	}

	.f-nav-card-box{
		width: calc(100% - 53vw);
	}

	.f-nav-card{
		position: relative;
		display: block;
		width: 100%;
		height: 150px;
		overflow: hidden;
		object-fit: cover;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	.f-nav-img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.f-nav-card span{
		font-size: 1rem;
		padding: 10px;
		text-decoration: none;
	}

	.f-nav-card:hover .f-nav-img{
		transform: translate(1.1);
		transition: 0.3s;
	}

	.f-contact-btn{
		font-size: 1.2rem;
		padding: 15px;
	}

	.copyright{
		margin-top: 20px;
		font-size: 0.9rem;
	}

	.privacy{
		margin-top: 20px;
		font-size:0.9rem;
	}
}
/*フッター*/



@media screen and (min-width:1200px) {
	#footer{
		background: url("../images/back.jpg");
		padding: 70px 100px;
		width: calc(100% - 200px);
	}

	.footer-logo{
		width: 300px;
	}

	.f-flex-sp{
		width: 100%;
		display: flex;
		margin-top: 25px;
		padding-top: 30px;
		justify-content: space-between;
	}
	
	.f-flex-pc{
		display: flex;
		width: 60%;
		justify-content: space-between;
	}

	.f-access{
		width: 50%;
		font-size: 1.2rem;
		letter-spacing: 1px;
		line-height: 1.5rem;
		margin-bottom: 25px;
	}

	.f-nav{
		width: 50%;
		margin-top: 0px;
	}

	.f-a{
		display: flex;
		justify-content: space-between;
		margin: 0 0 15px 0 ;
	}
	.f-a-p{
		padding:10px 12px;
		color: #fff;
		letter-spacing: 2px;
		font-size: 1.1rem;
	}
	
	.f-a:hover .f-a-p{
		padding:10px 20px;
		transition: 0.3s;
	}
	
	.f-a:hover{
		background: rgba(255,224,88,0.2);
		transition: 0.3s;
	}

	.f-nav-card-box{
		display: flex;
		justify-content: space-between;
		width: 35%;
		padding-left: 5%;
	}

	.f-nav-card{
		position: relative;
		display: block;
		width: 45%;
		height: 250px;
		overflow: hidden;
		object-fit: cover;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	.f-nav-img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.f-nav-card-box .f-nav-card:hover .f-nav-img{
		transform: scale(1.1);
		mix-blend-mode: luminosity;
		transition: 0.3s;
	}


	.f-nav-card span{
		width: 100%;
		font-size: 1rem;
		padding: 10px;
		text-decoration: none;
	}
	
	.pc-gentei-box{
		width: 35%;
		margin-left: 65%;
	}

	.f-contact-btn{
		display: block;
		width: calc(100% - 30px);
		font-size: 1.2rem;
		padding: 15px;
		margin-top: 15px;
	}
	
	.f-contact-btn:hover{
		opacity: 0.5;
		transition: 0.3s;
	}

	.copyright{
		text-align: left;
		margin-top: 20px;
		font-size: 1rem;
	}

	.privacy{
		text-align: left;
		margin-top: 20px;
		font-size:1rem;
	}
	
	.privacy:hover{
		color: #fff;
		transition: 0.3s;
	}
}
/*フッター*/