@charset "utf-8";


/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');



/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");



/*テーマカラーの定義（CSS変数）
ここのカラーコードを変更するだけで、テンプレートのテーマカラーが変わります。
---------------------------------------------------------------------------*/
:root {
    --main:#08c5e2;
	--sub:#eeef20;
	--sub2:#fff;
	--sub3:#a8dadc;
	--sub4:#d6d000;
}


/*写真の制限ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.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;
}

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

.main-back{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
}

/*2分割スライドショー設定-----------------------*/

#slide-show{
	width: 100%;
	height: 100vh;
}

#slide-show2{
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: -1;
}

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

#mainimg2{
	width: 100%;
	height: 50vh;
}


@media screen and (min-width:1200px) {
	#slide-show{
		display: flex;
		width: 100%;
		height: 100vh;
	}
	
	#slide-show2{
		position: fixed;
		display: flex;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}

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

	#mainimg2{
		width: 50%;
		height: 100vh;
	}
}
/*2分割スライドショー設定-----------------------*/	

/*ロゴ・キャッチコピー*/

#main-logo img{
	position: fixed;
	display: block;
	background: #fff;
	top: 0;
	z-index: 2;
	padding: 10px;
	height: 75px;
	border-bottom-right-radius: 25px;
}



.catch-copy{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% ,-50%);
	-webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
	width: 40%;
	max-width: 500px;
}


@media screen and (min-width:700px) {
	.catch-copy{
		width: 30%;
		max-width: 500px;
	}
}

@media screen and (min-width:1200px) {
	.catch-copy{
		width: 18%;
		max-width: 500px;
	}
	
	#main-logo img{
		position: fixed;
		display: block;
		background: #fff;
		z-index: 2;
		padding: 10px 20px 10px 10px;
		height: 120px;
		border-bottom-right-radius: 25px;
	}
}

/*ロゴ・キャッチコピー*/

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--main);
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}


/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
	top:0px;
	right: 0px;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 70px;
    height:70px;
	background-color: #fff;
	border-bottom-left-radius: 100%;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 30px;
    height: 3px;
    border-radius: 2px;
	background-color: #6b705c;
  	width: 40%;
  }

.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: 18px;
    left: 30px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

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

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

/*========= ナビゲーションのためのCSS ===============*/

/*スクロールアニメ=====================================*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:180px;
	left:50%;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}


@media screen and (min-height:800px) {
	.scrolldown2{
		bottom:250px;
	}
}


/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

@media screen and (min-width:700px) {
	.scrolldown2{
		/*描画位置※位置は適宜調整してください*/
		position:absolute;
		bottom:200px;
		left:calc(50% - 1.5px);
	}
	/*Scrollテキストの描写*/
	.scrolldown2 span{
		/*描画位置*/
		position: absolute;
		left:10px;
		bottom:18px;
		/*テキストの形状*/
		color: #eee;
		font-size: 0.9rem;
		letter-spacing: 0.05em;
		/*縦書き設定*/
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	.scrolldown2:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom:0;
		left:-6px;
		/*丸の形状*/
		width:15px;
		height:15px;
		border-radius: 50%;
		background:#eee;
		/*丸の動き1.6秒かけて透過し、永遠にループ*/
		animation:
			circlemove 1.6s ease-in-out infinite,
			cirlemovehide 1.6s ease-out infinite;
	}

	/*下からの距離が変化して丸の全体が上から下に動く*/
	@keyframes circlemove{
		 0%{bottom:75px;}
		 100%{bottom:-5px;}
	 }

	/* 線の描写 */
	.scrolldown2:after{
		content:"";
		/*描画位置*/
		position: absolute;
		bottom:0;
		left:0;
		/*線の形状*/
		width:3px;
		height: 80px;
		background:#eee;
	}
}

/*スクロールアニメ=====================================*/









/*メイン＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

main{
	position: relative;
	top: 100vh;
}

#catch-copy-box{
	position: relative;
	background-color: #fff;
	width: calc(100% - 40px);
	margin: 0 auto ;
	z-index: 1;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
}

#catch-copy-box h2{
	padding: 20px 20px;
	font-size: 1.4rem;
	font-family: "Shippori Mincho B1", serif;
    font-weight: bold;
    font-style: normal;
	line-height: 2rem;
	color: #0728aa;
	text-align: center;
}

#catch-copy-naiyou{
	padding: 25px;
	background-color: var(--main);
}

.catch-p{
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3";
	text-align: justify;
	line-height: 1.5rem;
	font-size: 1rem;
}

@media screen and (min-width:700px) {
	#catch-copy-box{
		width: calc(100% - 100px);
	}

	#catch-copy-box h2{
		padding: 30px;
		font-size: 1.6rem;
	}

	#catch-copy-naiyou{
		padding: 25px 50px;
		background-color: var(--main);
	}
	.catch-p{
		text-align: center;
		line-height: 1.8rem;
	}

	.tb-none-br{
		display: none;
	}
}


@media screen and (min-width:1200px) {
	#catch-copy-box{
		width: 80%;
	}

	#catch-copy-box h2{
		font-size: 1.8rem;
		letter-spacing: 0.1rem;
	}

	#catch-copy-naiyou{
		padding: 50px 0px;
		background-color: var(--main);
	}

	.catch-p{
		width: 80%;
		text-align: center;
		font-size: 1.3rem;
		margin: 0 auto;
		line-height: 2rem;
	}

	.tb-none-br{
		display: none;
	}
}

/*お知らせbox=======================================*/

#news-box{
	background: #F3F0E9;
	padding: 25px 0;
}	

@media screen and (min-width:1200px) {
	#news-box{
		padding: 50px 0;
	}	
}


/*テキストアニメーション=*/

/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--sub2);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/*テキストアニメーション=*/

/*セクションタイトル　共通*/
.section-title{
	display: inline-block;
	color: var(--sub2);
	font-size: 3rem;
	letter-spacing: 0.25rem;
	font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: normal;
	margin-bottom: 15px;
}

.section-title .luvi{
	display: inline-block;
	padding-bottom: 10px;
	font-family: "Shippori Mincho B1", serif;
	font-size: 1.2rem;
	letter-spacing: 0.5rem;
	padding-left: 25px;
}

.section-title-flex{
	padding-bottom: 20px;
}

@media screen and (min-width:1200px) {
	/*セクションタイトル　共通*/
	.section-title{
		color: var(--sub2);
		font-size: 5rem;
		letter-spacing: 0.25rem;
		font-family: "Libre Caslon Text", serif;
		font-weight: 400;
		font-style: normal;
		margin-bottom: 15px;
		line-height: 2rem;
	}

	.section-title .luvi{
		display: inline-block;
		padding-bottom: 10px;
		font-family: "Shippori Mincho B1", serif;
		font-size: 1.5rem;
		letter-spacing: 0.5rem;
		padding-left: 25px;
		line-height: 4rem;
	}
	
	.section-title-flex{
		display: flex;
		padding-bottom: 0;
	}

}

.btn{
	display: block;
	border-radius: 5px;
	border: solid 1px #fff;
	width: calc(100% - 40px);
	margin: 0 auto;
	margin-top: 15px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	font-size: 1.2rem;
	font-family: "Libre Caslon Text", serif;
}

.btn i{
	display: inline-block;
	padding-left: 15px;
}

.btn:hover{
	color:var(--main);
	background-color: rgba(255,255,255,0.7);
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

@media screen and (min-width:700px) {
	.btn{
		display: block;
		border-radius: 5px;
		border: solid 1px #fff;
		width: calc(100% - 100px);
		margin: 0 auto;
		margin-top: 15px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		padding: 10px;
		font-size: 1.2rem;
		font-family: "Libre Caslon Text", serif;
	}

}


@media screen and (min-width:1200px) {
	.btn{
		display: block;
		border-radius: 5px;
		border: solid 1px #fff;
		width: calc(100% - 40px);
		margin-top: 15px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		padding: 10px;
		font-size: 1.2rem;
		font-family: "Libre Caslon Text", serif;
		margin-right: 40px;
	}

}

.btn2{
	border: solid 1px var(--sub3);
	color: var(--sub3);
	mix-blend-mode: multiply;
}

.btn2:hover{
	color:#fff;
	background: var(--sub3);
	mix-blend-mode: normal;
}

/*コンセプト
====================================================================================*/
#concept-box{
	background-color:#fff;
	padding:50px 20px;
}

.concept-img{
	position: relative;
	width: 100%;
	height: 200px;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-image: url("../images/concept1_1.jpg");
	border-radius: 5px;
}

.concept-tag{
	position: absolute;
	bottom: -3px;
	right: 0;
	color: #fff;
	font-family: "Libre Caslon Text", serif;
	font-size: 1.2rem;
	letter-spacing: 0.1rem;
}

.concept-naiyou{
	padding-top: 25px;
}

.concept-naiyou-flex{
	display: flex;
	margin-top: 15px;
}

.concept-naiyou-flex i{
	font-size: 1.3rem;
	color: var(--sub);
	padding-top: 1px;
	line-height: 2rem;
	padding-right: 5px;
}


.concept-naiyou-inflex h4{
	font-size: 1.4rem;
	font-family: "Shippori Mincho B1", serif;
	display: flex;
	font-weight: bold;
	line-height: 2rem;
	margin-bottom: 10px;
}

.concept-p{
	font-family: "ヒラギノ角ゴ Pro W3";
	line-height: 1.5rem;
	color: #6c584c;
	text-align: justify;
}

.concept-p br{
	display: none;
}

@media screen and (min-width:700px) {
	
	#concept-box{
		background-color:#fff;
		padding: 50px;
	}
	
	.concept-box-flex{
		display: flex;
	}
	
	.concept-img{
		position: relative;
		width: 35%;
		height: 200px;
		order: 2;
	}
	
	.concept-tag{
		position: absolute;
		bottom: -5px;
		right: 0;
		color: #fff;
		font-family: "Libre Caslon Text", serif;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
	}

	.concept-naiyou{
		width: 65%;
		margin: auto 0;
		padding-top: 0;
	}
	.concept-naiyou-flex{
		display: flex;
		margin-top: 0px;
	}
	.concept-naiyou-inflex{
		padding-right: 50px;
	}
	
	.concept-naiyou-inflex h4{
		font-size: 1.6rem;
		font-family: "Shippori Mincho B1", serif;
		display: flex;
		font-weight: bold;
		line-height: 2rem;
		margin-bottom: 20px;
	}
}


@media screen and (min-width:1200px) {
	.concept-box-flex{
		display: flex;
		width: 85%;
		margin: 50px auto;
	}
	
	.concept-tag{
		position: absolute;
		bottom: -5px;
		right: 0;
		color: #fff;
		font-family: "Libre Caslon Text", serif;
		font-size: 2.3rem;
		letter-spacing: 0.1rem;
	}
	
	.concept-img{
		position: relative;
		width: 35%;
		height: 250px;
		order: 2;
	}
	
	.concept-naiyou{
		width: 65%;
	}
	
	.concept-naiyou-inflex h4 {
		font-size: 2rem;
		font-family: "Shippori Mincho B1", serif;
		display: flex;
		font-weight: bold;
		line-height: 2.5rem;
		margin-bottom: 20px;
		letter-spacing: 0.2rem;
	}
	
	.concept-naiyou-flex i{
		font-size: 1.6rem;
		color: var(--sub);
		padding-top: 1px;
		line-height: 2.5rem;
		padding-right: 5px;
	}
	.concept-naiyou-inflex{
		padding-right: 100px;
	}
	.concept-p br{
		display: block;
	}
	.concept-p{
		line-height: 1.8rem;
		font-size: 1.2rem;
	}
	
}

#concept-img-box{
	display: flex;
}

.concept-img-2{
	width: 70%;
	height: 180px;
	background-position: center;
	background-size: cover;
	background-image: url("../images/concept1_2.jpg");
}

.concept-img-3{
	width: 30%;
	background-position: center;
	background-size: cover;
	background-image: url("../images/concept1_3.jpg");
}

@media screen and (min-width:700px) {
	.concept-img-2{
		height: 280px;
	}
}

@media screen and (min-width:1200px) {
	.concept-img-2{
		height: 450px;
	}
}



/*コンセプト2
====================================================================================*/
#concept-box2{
	background-color:#fff;
	padding:50px 20px;
}


@media screen and (min-width:700px) {
	
	#concept-box2{
		background-color:#fff;
		padding: 50px;
	}
}


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

}

#concept-img-box2{
	display: flex;
}

.concept-img-4{
	width: 30%;
	background-position: center;
	background-size: cover;
	background-image: url("../images/concept2_2.jpg");
}

.concept-img-5{
	width: 70%;
	height: 180px;
	background-position: center;
	background-size: cover;
	background-image: url("../images/concept2_3.jpg");
}

@media screen and (min-width:700px) {
	.concept-img-5{
		height: 280px;
	}
}

@media screen and (min-width:1200px) {
	.concept-img-5{
		height: 450px;
	}
}

#concept-img2{
	background-image: url("../images/concept2_1.jpg");
}



/*アイテムボックス
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#item-box{
	background-color: var(--sub3);
	padding: 20px 0;
}

@media screen and (min-width:1200px) {
	
	#item-box{
		padding: 50px 0;
	}
}

#item-box2{
	background-color: #F3F0E9;
	padding:0 0  20px 0;
}

@media screen and (min-width:1200px) {
	
	#item-box2{
		padding:0 0  50px 0;
	}
}

#item-box3{
	background-color: #d3d0cb;
	padding:0 0  20px 0;
}

@media screen and (min-width:1200px) {
	
	#item-box3{
		padding:0 0 0px 0;
	}
}


/*会社案内
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#company{
	padding: 20px 0 0 0 ;
	background-color: #fff;
}

#greeting-box{
	font-family: "Zen Old Mincho", serif;
	position: relative;
	font-weight: 500;
	text-align: justify;
	padding: 20px;
	padding-top: 15px;
	line-height: 1.6rem;
}

#name-sign{
	display: block;
	width: 50%;
	margin-left: 50%;
	margin-top: 15px;
}

.company-sub-title{
	display: flex;
	padding:0 20px;
	padding-top: 20px;
	align-items: center;
}

.company-sub-title i{
	color: var(--main);
	padding-right: 10px;
	font-size: 1.3rem;
}


.company-sub-title h5{
	font-size: 1.2rem;
	font-family: "Shippori Mincho B1", serif;
	font-weight: bold;
}

@media screen and (min-width:700px){
	
	#greeting-box{
		text-align: justify;
		padding: 50px;
		padding-top: 15px;
	}
	.company-sub-title{
		padding:0 50px;
		padding-top: 20px;
	}
	#name-sign{
		width: 30%;
		margin-left: 70%;
	}
}

@media screen and (min-width:1200px){
	
	#greeting-box{
		text-align: justify;
		padding: 50px;
		padding-top: 15px;
		margin-left: 300px;
		font-size: 1.1rem;
		line-height: 1.8rem;
	}
	
	.company-sub-title{
		margin-left: 300px;
		padding-top: 30px;
	}
	.company-sub-title i{
		font-size: 1.6rem;
	}

	.company-sub-title h5{
		font-size: 1.4rem;
	}
	
	#name-sign{
		width: 20%;
		margin-left: 80%;
	}
}







.section-title2{
	color: var(--sub4);
}

/*左から右*/
.section-title2 .bgLRextend::before{
    background-color: var(--sub4);/*伸びる背景色の設定*/
}

#company-list-box{
	padding: 20px;
	padding-bottom: 40px;
}

.company-list{
	display: flex;
	font-size: 1rem;
	font-family: "Shippori Mincho B1", serif;
	margin-bottom: 20px;
}

.company-list:last-child{
	margin-bottom: 0px;
}

.company-list-koumoku{
	display: flex;
	width: 40%;
	border-left: solid 3px var(--sub);
	padding-left: 10px;
	line-height: 1.2rem;
	align-items: center;
	justify-content: space-between;
}

.company-list-koumoku:after{
	content:"";
	height:1px;
	background-color:var(--main);
	width: 45px;
	margin-left: 10px;
}

.company-list-naiyou{
	width: 60%;
	padding-left: 20px;
	line-height: 1.3rem;
	text-align: justify;
}

#google-map{
	position: relative;
	height: 450px;
	background-color: #f0f2f3;
	text-align: center;
}

#google-map p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% ,-50%);
	-webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
	line-height: 1.3rem;
}


@media screen and (min-width:700px) {
	#company{
		padding: 20px 0 30px 0;
	}
	
	.company-info-flex{
		display: flex;
	}
	#company-list-box{
		padding:25px 50px;
		width: 60%;
		margin: auto 0;
	}
	#google-map{
		position: relative;
		height: auto;
		width: 40%;
		background-color: #f0f2f3;
		text-align: center;
	}
	.company-list-koumoku:after{
		width: 30px;
	}

}

@media screen and (min-width:1200px) {
	#company{
		padding: 50px 0;
		background-color: #fff;
	}
	.company-info-flex{
		display: flex;
		width: calc(100% - 350px);
		position: relative;
		left: 350px;
	}
	#company-list-box{
		padding:25px 0;
		width: 50%;
		margin: auto 0;
	}
	#google-map{
		position: relative;
		height: auto;
		width: 50%;
		background-color: #f0f2f3;
		text-align: center;
	}
	
	.company-list-koumoku:after{
		content:"";
		height:1px;
		background-color:var(--main);
		width: 100px;
		margin-left: 10px;
	}
}

@media screen and (max-width:400px) {
	.company-list-koumoku{
		display: flex;
		width: 40%;
		border-left: solid 3px var(--sub);
		padding-left: 10px;
		font-size: 0.9rem;
		line-height: 1.2rem;
		align-items: center;
		justify-content: space-between;
	}

	.company-list-koumoku:after{
		content:"";
		height:1px;
		background-color:var(--main);
		width: 35px;
		margin-left: 10px;
	}

	.company-list-naiyou{
		width: 60%;
		padding-left: 20px;
		font-size: 0.9rem;
		line-height: 1.2rem;
		text-align: justify;
	}
}


#contact{
	background: rgba(32,30,7,0.9);
}


@media screen and (min-width:1200px) {
	#contact{
		padding-top: 50px;
		background: linear-gradient(90deg, rgba(19, 25, 6, 0.95) 64%, rgba(0, 0, 0, 0.45));
	}
}

/*フッター =============================================*/
#footer{
	 background: #2DAFCC;
}

@media screen and (min-width:1200px) {
	#footer{
		display: flex;
		align-items: center;
	}
}


.footer-eigyou{
	display: flex;
	align-items: center;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3";
	margin-bottom: 10px;
}

.footer-eigyou-tag{
	width: 90px;
	text-align: center;
	color: var(--main);
	background: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	margin-right: 15px;
	font-size: 0.9rem;
}

.footer-access{
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3";
	line-height: 1.5rem;
}

#footer-flex-item1{
	display: block;
	position: relative;
	width: 170px;
}

#footer-logo{
	position: absolute;
	top: 0;
	left: 0;
}	


.contents-tag{
	background: #fff;
	color: var(--main);
	font-size: 0.9rem;
	border: solid 1px rgba(255,255,255,0.6);
	border-radius: 20px;
	padding: 5px 10px;
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	letter-spacing: 0.1rem;
	margin-bottom: 20px;
	text-align: center;
}

#footer-copy{
	color: #fff;
	font-family: "Shippori Mincho B1", serif;
	font-size: 3rem;
	line-height: 4rem;
}

#footer-flex-item2{
	padding: 20px;
}

#copyright{
	padding-bottom: 30px;
	color:rgba(0,0,0,0.5);
	font-family: "M PLUS 1p", sans-serif;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 700;
	mix-blend-mode: overlay;
}

.follow{
	color: rgba(255,255,255,0.6);
	font-size: 1rem;
	border: solid 1px rgba(255,255,255,0.6);
	border-radius: 20px;
	padding: 10px;
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	letter-spacing: 0.1rem;
}

.icon{
	display: block;
	color: rgba(255,255,255,0.5);
	font-size: 1.5rem;
	margin-right: 10px;
}

.icon:hover{
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

.sns-flex{
	width: 100%;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;	
}

.sns-box{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1em;
}

.sns-box:before {
	border-top: 1px solid rgba(255,255,255,0.5);
	content: "";
	width: 7rem; /* 線の長さ */
	margin-right: 1em;
}


#footer-nav{
	position: relative;
	width: calc(100% - 170px);
	display: inline-block;
	padding: 20px;
	padding-bottom: 20px;
	left: 170px;
	margin: 0 auto;
}

.footer-nav ul li a{
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding-bottom: 15px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0rem;
}

.footer-nav ul li a:hover{
	color: var(--sub);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}


.footer-nav ul li a:before {
	border-top: 1px solid rgba(255,255,255,0.5);
	content: "";
	width: 1rem; /* 線の長さ */
	margin-right: 1em;
}

#footer-company-name{
	color: #fff;
	font-size: 1.5rem;
	font-family: "M PLUS 1p", sans-serif;
	letter-spacing: 0.05rem;
	border-bottom: solid 1px #fff;
	padding-bottom: 10px;
	margin-bottom: 30px;
}


#footer-tel{
	display: block;
	background: rgba(0,0,0,0.2);
	text-decoration: none;
	color: #fff;
	font-size: 1.5rem;
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	margin-top: 10px;
}

#footer-tel:hover{
	background: rgba(0,0,0,0.5);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

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

	.footer-nav ul li a{
		padding-bottom: 20px;
		font-size: 1.1rem;
		letter-spacing: 0.1rem;
	}

	.footer-nav ul li a:before {
		border-top: 1px solid rgba(255,255,255,0.5);
		content: "";
		width: 2rem; /* 線の長さ */
		margin-right: 1em;
	}	
}

@media screen and (min-width:700px) {
	
	#footer-nav{
		position: relative;
		width: calc(100% - 170px);
		display: inline-block;
		padding: 50px;
		padding-bottom: 0px;
		left: 170px;
		margin: 0 auto;
	}
	
	.footer-nav ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	
	.footer-nav ul li{
		width: 30%;
	}

	.footer-nav ul li a{
		padding-bottom: 20px;
		font-size: 1.1rem;
		letter-spacing: 0.1rem;
	}

	.footer-nav ul li a:before {
		border-top: 1px solid rgba(255,255,255,0.5);
		content: "";
		width: 1rem; /* 線の長さ */
		margin-right: 1em;
	}	
		
	#footer-flex-item2{
		padding:50px;
	}

}

@media screen and (min-width:1200px) {
	#footer-logo{
		position: relative;
		height: 350px;
	}
	
	#footer-flex-item1{
		display: block;
		position: relative;
		width: 350px;
	}

	.footer-nav ul {
		display: block;
		flex-wrap: none;
		align-items: center;
		justify-content: space-between;
	}
		
	.footer-nav ul li{
		width: auto;
	}
	
	.footer-nav ul li a{
		padding-bottom: 20px;
		font-size: 1rem;
		letter-spacing: 0rem;
	}

	#footer-inner-flex{
		display: flex;
		align-items: center;
	}
	#footer-flex-item2{
		margin-left: 50px;
		padding: 0;
	}
	
	#footer-nav{
		position: relative;
		width: 200px;
		margin-right: 0;
		padding: 0px;
		padding-bottom: 0px;
		left: auto;
		margin-left: 50px;
		margin-top: 0;
	}

	#copyright{
		position: absolute;
		bottom: 50px;
		right: 50px;
		padding-bottom: 0px;
		color:rgba(0,0,0,0.5);
		font-family: "M PLUS 1p", sans-serif;
		text-align: center;
		font-size: 1rem;
		font-weight: 700;
		mix-blend-mode: overlay;
	}
}

/*OPEN NAV=============================================*/

#open-logo img{
	display: block;
	background: #fff;
	z-index: 2;
	padding: 10px;
	height: 75px;
	border-bottom-right-radius: 25px;
}

@media screen and (min-width:1200px) {
	
	#open-logo img{
		display: block;
		background: #fff;
		z-index: 2;
		padding: 10px 20px 10px 10px;
		height: 120px;
		border-bottom-right-radius: 25px;
	}
}


#open-nav{
	position: relative;
	display: block;
	padding-bottom: 0px;
	margin: 0 auto;
}

.open-nav2{
	display: block;
	position: relative;
}

.open-nav2 ul{
	position: relative;
}

.open-nav2 ul li a{
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 25px 30px;
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.2rem;
	letter-spacing: 0.1rem;
}

.open-nav2 ul li:nth-child(2n) a{
	background: rgba(0,0,0,0.1);
}

.open-nav2 ul li a:before {
	border-top: 2px solid rgba(255,255,255,1);
	content: "";
	width: 1rem; /* 線の長さ */
	margin-right: 1em;
}

.open-nav2 ul li a:hover::before{
	border-top: 2px solid var(--sub4);
	width: 2rem; /* 線の長さ */
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

.open-item2{
	padding: 0 30px;
	margin-top: 30px;
}


#open-tel{
	display: block;
	background: rgba(255,255,255,1);
	text-decoration: none;
	border: solid 1px #fff;
	color: var(--main);
	font-size: 1.5rem;
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	margin-top: 10px;
}

#open-tel:hover{
	background: rgba(255,255,255,0);
	color:#fff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

#open-tel2{
	display: block;
	background: rgba(255,255,255,1);
	text-decoration: none;
	border: solid 1px #fff;
	color: #d1ac00;
	font-size: 1.3rem;
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	margin-top: 10px;
}

#open-tel2:hover{
	background: rgba(255,255,255,0);
	color:#fff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

@media screen and (min-width:700px) {
	#open-logo{
		width: 25%;
	}
}


@media screen and (min-width:1200px) {
	#open-pc-flex{
		display: flex;
	}
	
	#open-pc-flex-item{
		width: 55%;
	}
	#open-flex-img{
		width: 45%;
		background-size: cover;
		background-position: center;
		background-image: url("../images/1.jpg");
		height: 100vh;
	}
	.open-item2{
		width: 50%;
		padding: 0 30px;
		margin-top: 50px;
	}

}

#jigyou-flex{
	display: flex;
	justify-content: space-between;
	margin: 20px;
	flex-wrap: wrap;
	gap:20px 0;
}

.jigyou-item{
	position: relative;
	width: 47.5%;
	aspect-ratio: 1 / 1;
	border-radius: 5px;
}

.jigyou-item h6{
	display: block;
	width: 100%;
	background: #F3F0E9;
	position: absolute;
	bottom: 0;
	text-align: center;
	padding: 10px;
	font-family: "ヒラギノ角ゴ Pro W3";
}

.jigyou-img{
	width: 100%;
	height: calc(100% - 25px);
	background-size: cover;
	background-position: center;
	background-image: url("../images/jigyou1.jpg");
}

@media screen and (min-width:700px){
	#jigyou-flex{
		margin: 20px 50px 50px 50px;
		gap:0px 0;
	}
	
	.jigyou-item{
		width: 22.5%;
	}
}


@media screen and (min-width:1200px){
	#jigyou-flex{
		margin: 20px 50px 50px 350px;
	}
}



.jigyou-img1{
	background-image: url("../images/jigyou1.jpg");
}
.jigyou-img2{
	background-image: url("../images/jigyou2.jpg");
}
.jigyou-img3{
	background-image: url("../images/jigyou3.jpg");
}
.jigyou-img4{
	background-image: url("../images/jigyou4.jpg");
}







/*別ページ設定*/
.page-title{
	background-color: #fff;
	display: inline-block;
	padding: 10px;
	font-size: 1.3rem;
	letter-spacing: 0.25rem;
	font-family: "Libre Caslon Text", serif;
	border-left: solid 10px var(--sub);
	text-align: center;
}


.page-luvi{
	display: inline-block;
	padding-bottom: 5px;
	font-family: "Shippori Mincho B1", serif;
	font-size: 0.7rem;
	letter-spacing: 0.5rem;
	line-height: 0.9rem;
}

.page-caption-box{
	margin-bottom: 20px;
}

.page-caption-flex{
	display: flex;
}

.page-caption-flex i{
	margin:0 5px;
}

.page-caption{
	background: rgba(0,0,0,0.5);
	color: #fff;
	padding: 10px  20px;
	font-family: "ヒラギノ角ゴ Pro W3";
	font-size: 0.8rem;
}

@media screen and (min-width:1200px) {
	/*セクションタイトル　共通*/
	
	.page-caption-box{
		margin-bottom: 50px;
		display: flex;
		align-items: flex-start;
	}
	
	.page-caption-flex{
		display: flex;
	}

	.page-caption-flex i{
		margin:0 10px;
	}

	.page-caption{
		width: 100%;
		background: rgba(0,0,0,0.5);
		color: #fff;
		padding: 10px  20px;
		font-family: "ヒラギノ角ゴ Pro W3";
		font-size: 1rem;
	}
	
	
	.page-caption2{
		margin-top: 0px;
	}
	
	.page-title{
		background-color: #fff;
		display: inline-block;
		padding: 10px;
		font-size: 2rem;
		letter-spacing: 0.25rem;
		font-family: "Libre Caslon Text", serif;
		border-left: solid 10px var(--sub);
	}


	.page-luvi{
		display: inline-block;
		padding-bottom: 10px;
		font-family: "Shippori Mincho B1", serif;
		font-size: 0.9rem;
		letter-spacing: 0.5rem;
		line-height: 1.2rem;
	}
}



.section-title3{
	color: var(--sub3);
}

/*左から右*/
.section-title3 .bgLRextend::before{
    background-color: var(--sub3);/*伸びる背景色の設定*/
}


/*インスタBOx*/

#insta-box{
	position: relative;
	padding: 20px 0 40px 0;
	background: #F3F0E9;
}

@media screen and (min-width:700px) {
	#insta-box{
		padding:25 0  50px 0;
	}
}

#insta-flow{
	background: #F3F0E9;
	width: 100%;
	z-index: 2;

}

.insta-p{
	padding: 0 20px;
	font-family: "ヒラギノ角ゴ Pro W3";
	color: #6c584c;
}

@media screen and (min-width:700px) {
	.insta-p{
		padding: 0 50px;
		font-family: "ヒラギノ角ゴ Pro W3";
		color: #6c584c;
	}
}

@media screen and (min-width:1200px) {
	.instabtn{
		margin: 0 auto;
	}
	.insta-p{
		width: 41%;
		font-size: 1.1rem;
		padding: 0px 0 0 50px ;
		font-family: "ヒラギノ角ゴ Pro W3";
		color: #6c584c;
	}
	.insta-flex{
		margin-left: 300px;
		margin-top: 20px;
		align-items: center;
		display: flex;
		margin-right: 50px;
	}
}