@charset "utf-8";

html {
    scroll-behavior: smooth;/*スクロールがスムーズになる*/
}
	
	*{
	margin: 0;
	padding:0;
    list-style-type: none;
    box-sizing: border-box;
	color: #171414;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	}
	
	img{
	   max-width: 100%;
	   height:auto;
	   vertical-align:bottom;/*画像の下の余白を出さないため*/
	   image-rendering: -webkit-optimize-contrast;/*クロムは画像を縮小したらぼやけるからそれを防ぐ*/
	   }

	a{
		color: #fff;
		text-decoration: none;
	}

	a:hover{
		opacity: 0.8;
	}

	body{
	 	background-color: #fff;
	 	opacity: 0;/*ブラウザ起動時のフェードインの為*/
	 	transition: 1.5s;
	 	
	}

	header{
	 	background-color:#fff;
	}
	
	.icon1 i{ 
		font-size: 20px;
		color: #fff;
		padding: 10px;
	}

	.icon2 i{ /*×のときのスタイル、jsでhtmlの中身を変更*/
		font-size: 21px;
		color: #fff;
		padding: 9.5px 12px;
	}

	.btn_menu{
	 	background-color: #171414;
	 	position: fixed;
	 	z-index: 10;
	 	top:5px;
	 	right: 5px;
	 	border-radius: 5px;
	 }

	 .btn_menu:hover{
	 		opacity: 0.8;
	 }

	


	.top_back{
		width: 100%;
		height: 100vh;
		min-height: 600px;
		background-image: url(img/top_back.png);
		background-size: 60%;
		padding:5px;
		background-origin:content-box ;/*表示位置決めれる初期値はpadding-box*/
		background-position: 0 center;
		/*犬のロゴレイアウトのため*/
		display: flex;
		justify-content: flex-end;
		align-items: center;

		transition: 1s;/*ロゴをブラウザ起動時に上にスライドjsでtranslateY0にしている*/
		transform: translateY(10px);
		
		/***********************/
	}

	h1{
		width:clamp(50px, 7vw, 6vw);/*clamp(最小値,可変値,最大値)*/
		margin-right: 3vw;
	}


	nav{
		position: fixed;
		z-index: -1;
		opacity: 0;
		top:0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: auto;/*画面縦を縮めてはみ出てもスクロール出す*/
		transition: 0.5s;
	}

	nav ul{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: rgba(0,0,0,0.8);
		width: 100%;
		height: 100vh;
		min-height: 600px;/*画面縦を縮めても全部が見えるように*/
		transition: 0.5s;
		opacity: 0;
	}

	nav ul li{
		color: #fff;
		background-color:#171414;
		width: 170px;
		line-height: 2.5;
		margin-bottom: 30px;
		border:3px solid #fff;
		border-radius: clamp(25px, 1.5vw, 50px);/*clamp(最小値,可変値,最大値)*/
		font-weight: 500;
		transition: 0.3s;
	}

	nav ul li:hover{
		transform:scale(1.03,1);
		}
	
 	nav ul a{
 		transition: .3s;
 		display: block;
 		background-color: ;
 		padding: 7px 12px 8px 12px;
 		
 	}
	nav ul a:hover{
		opacity: 1;
	}

	nav ul a::before, nav ul a::after{
		content: "";
		display: inline-block;
		width: clamp(10px, 0.5vw, 20px);/*clamp(最小値,可変値,最大値)*/
		height: clamp(6px, 0.3vw, 12px);/*clamp(最小値,可変値,最大値)*/
		vertical-align: middle;
		margin-right: 10px;
		background-color: #fff;
		transition: .5s;
	}
	nav ul a::after{
		margin-right: 0;
		margin-left: 8px;
		transition: .5s;
	}

	nav ul a:hover::before, nav ul a:hover::after{
		content: "";
		display: inline-block;
		width: clamp(10px, 0.5vw, 20px);/*clamp(最小値,可変値,最大値)*/
		height: clamp(6px, 0.3vw, 12px);/*clamp(最小値,可変値,最大値)*/
		vertical-align: middle;
		margin-right: 10px;
		background-color: red;
	}

	nav ul a:hover::after{
		margin-right: 0;
		margin-left: 8px;
	}



	/*トップにスクロールして戻るボタン*/
	#scroll_up i{
		font-size: 40px;
		color: #171414;
		border:solid 2px #fff;
		border-radius: 20px;
		background-color: #fff;
	}
	
	.scroll_up {
		position: fixed;
		z-index: 10;
		bottom: 5px;
		right: 5px;
		opacity: 0;
		transition: 0.5s;
	}
	
	#scroll_up.scroll_up_show{/*jsでスクロール位置によってこのクラスを付与して表示する*/
		opacity: 1;
	}

/*************************************************************************/
	main{
		background-color:#fff ;
		width: 1080px;
		margin:0 auto;

	}


	h2{
		background-color: #171414;
		display: inline-block;
		color: #fff;
		font-size: 18px;
		border-radius: 10px;
		padding:5px 15px;
		padding-bottom: 9px;
		margin-top: 200px;
		margin-bottom: 100px;
	}

	h2::before, h2::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 6px;
		vertical-align: middle;
		margin-right: 10px;
		background-color: #fff;
	}
	h2::after{
		margin-right: 0;
		margin-left: 8px;
	}

	
	.about{
		text-align: center;
		background-color: ;
	}
	.about h2{
		margin-bottom: 20px;
	}
	.about p{
			width: 50%;
			text-align: justify;
			margin: 0 auto;
			background-color: ;
	}


/************************************************************************/


	.web_part{
		text-align: center;
		background-color: ;
		padding-left:10px;
		padding-right: 10px;
	}
	.web_part .btn{
		width: 40px;
		background-color: #171414;
		line-height: 40px;
		font-size: 25px;
		border-radius: 20px;
		color: #fff;
		margin-bottom: 10px;
		cursor: pointer;
		font-weight: 700;
	}

	.web_part .btn:hover{
		opacity: 0.8;
	}
	.web_part .btn2, .web_part .btn3{
		margin-top:45px;
		}


	.ss_flex{
		display: flex;
		justify-content: space-between;
		background-color:;
		

	}

	.pc_ss_1 img, .pc_ss_2 img, .pc_ss_3 img{
		object-fit:contain;
		width: 728px;
		height: 546px;
		
		}

	.sf_ss_1 img, .sf_ss_2 img, .sf_ss_3 img{
		object-fit:contain;
		width: 323px;
		height: 546px;
		
	}

	.setumei span{
		font-size: 18px;
		font-weight: 500;
	}

	.setumei{
		text-align: justify;
		/*最初は見えない状態jsで値を変更して見えるようにする*/
		transition: .3s;
		height: 0;
		opacity: 0;
		transform: translate(45px,-50px);
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 5px;
		background-color: ;
	}




/************************************************************************/


	.logo_part{
		text-align: center;/*h2をcenterにしている、inline-blockにしているから直接は効かないから*/
		background-color: ;
	}

	.logo_flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo_flex_2{
		margin-top:120px;
	}
	.logo_1{
		flex:1;
		background-image: url(img/logo2.png);
		background-size: contain;
		background-position: center;
		height: 100px;/*heightで大きさを変えている*/
		margin-right: 5px;
		
		/*object-fit:cover;
		width: 270px;
		height: 118px;*/
		background-color: ;
		
	}

	.logo_2{
		flex:1;
		background-image: url(img/logo1.png);
		background-size: contain;
		background-position: center;
		height: 120px;
		background-color: ;
		margin-right: 5px;
	}

	.logo_3{
		flex:1;
		background-image: url(img/rogo-part3-b_03.png);
		background-size: contain;
		background-position: center;
		height: 120px;
		background-color: ;
		
	}
	.logo_4{
		flex:1;
		background-image: url(img/logo.png);
		background-size: contain;
		background-position: center;
		height: 70px;
		background-color:;
		margin-right: 5px;
		
	}

	.logo_5{
		flex:1;
		background-image: url(img/REVEAL_logo_2.png);
		background-size: contain;
		background-position: center ;
		height: 70px;
		background-color: ;
		margin-right: 5px;
	}

	.logo_6{
		flex:1;
		background-image: url(img/logo_cafe_b_03.png);
		background-size: contain;
		background-position: center;
		height: 60px;
		background-color: ;
		margin-right: 5px;
	}

/***********************************************************************/
	.gengo_sikaku_part{
		margin-bottom: 200px;
		background-color: ;
	}
	.gengo_sikaku_part h2{
		margin-bottom: 10px;
	}

	.gengo_sikaku_flex{
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.gengo, .ginou, .sikaku{
		width:140px;
		background-color: ;
	}
	
	.gengo ul{
		text-align: left;
		}

	.ginou ul{
		text-align: left;
	
	}
	.sikaku ul{
		
	}


	footer{
		width:100%;
		padding-top:100px;
		padding-bottom: 100px;
		background-color: #171414;
		text-align: center;
	}

	footer p{
		font-size: 14px;
		color:#fff;
		font-weight: 300;
	}

/*タブレット用***********************************************************/
@media (max-width: 1080px){
	main{
		width: 100%;
	}

	.about p{
		width: 70%;
	}
		
	.ss_flex{
		width: 100%;
	}

	.pc_ss_1 img, .pc_ss_2 img, .pc_ss_3 img{
		width: 100%;
		height: 100%;
	}

	.sf_ss_1 img, .sf_ss_2 img, .sf_ss_3 img{
		width:94%;
		height: 100%;
	}
	
	.setumei{
		width: 85%;
	}

	.logo_part{
		width: 90%;
		margin:0 auto;
	}

	footer{
		width:100%;
	}

	footer p{
		width:90%;
		background-color: ;
		margin: 0 auto;
	}
}
/*スマホ用******************************************************************/
@media (max-width: 480px){
	.top_back{
		background-size: 100%;
		padding:4px;
		background-position: 50% 70%;
		justify-content: center;
		align-items: stretch;
		background-color: ;
	}


	h1{
		margin-top:clamp(24vh, 30vh, 25vw);/*clamp(最小値,可変値,最大値)*/
		
	}

	nav ul li{
		margin-bottom: 40px;
	}

	.about h2{
		margin-top: 50px;
	}
	.web_part h2{
		margin-bottom: 50px;
	}

	.web_part .btn2, .web_part .btn3{
			margin-top: 75px;
		}

	.logo_part{
		width: 90%;
		background-color: ;
		margin:0 auto;
	}

	.logo_flex{
		display: block;
	}

	.logo_flex_2{
	margin-top:0;
	}

	.logo_1, .logo_2, .logo_3, .logo_4, .logo_5, .logo_6{
		margin-bottom: 80px;
	}


	.gengo_sikaku_part{
		background-color: ;
		width: 100%;

	}

	.gengo_sikaku_part h2{
		margin-top: 50px;
	}

	.gengo_sikaku_flex{
		display: block;
		background-color: ;

	}

	.gengo, .ginou, .sikaku{
		margin:0 auto;
	}
}

/*FHD以上******************************************************************/
@media (min-width: 1920px){
	.wrap{
		width:100%;
		margin: 0 auto;
		background-color: ;

	}
	.top_back{
		min-height: 1440px;/*画面の縦が狭い場合に対応,WQHD,1440p,2560×1440*/
	}

	h2{
		font-size: 1vw;
		margin-top: 10vw;
		margin-bottom: 5vw;
	}

	.icon1 i{
		font-size: 1.8vw;
		padding:0.5vw;
	}

	.icon2 i{
		font-size: 1.8vw;
		padding:0.5vw 0.7vw;
	}

	#scroll_up i{
	font-size:2.5vw;
	border-radius: 1.25vw;
	}

	nav ul li{
		
		width: 10vw;
		margin-bottom: 2vw;
	}

	nav ul li a{
		font-size: 1vw;
	}

	main{
		width: 73%;

		}

	.about p{
		width: 50%;
		background-color: ;
		font-size: 1vw;
	}
	.about h2{
		margin-bottom: 2vw;
	}

	.web_part .btn{
		font-size: 1.5vw;
		width: 80px;
		line-height: 80px;
		border-radius: 40px;
	}

	.web_part .btn2, .web_part .btn3{
		margin-top:5vw;
		}

	.setumei{
		width: 85%;
		font-size: 1vw;
	}
	.setumei span{
		font-size: 1.1vw;
	}

	.ss_flex{
		width: 100%;
		justify-content: center;
	}

	.pc_ss_1 img, .pc_ss_2 img, .pc_ss_3 img{
		width: 100%;
		height: 100%;
	}

	.sf_ss_1 img, .sf_ss_2 img, .sf_ss_3 img{
		width:94%;
		height: 100%;
	}

	.logo_part{
		width: 90%;
		margin:0 auto;
	}

	.logo_1{
		height: 5vw;
	}
	.logo_2{
		height: 6.5vw;
	}
	.logo_3{
		height: 7vw;
	}
	.logo_4{
		height: 4.5vw;
	}
	.logo_5{
		height: 4.2vw;
	}
	.logo_6{
		height: 4vw;
	}


	.gengo_sikaku_part li{
		font-size: 1vw;
	}
	
	.gengo ul{
		text-align: center;
		}

	.ginou ul{
		text-align: center;
	}

	.gengo, .ginou, .sikaku{
		width: 30%;
		background-color: ;	
	}

	footer{
		width:100%;
		padding-top:5vw;
		padding-bottom: 5vw;
		}
	
	footer p{
		width:100%;
		background-color: ;
		margin: 0 auto;
		font-size: 0.8vw;
		}


}