@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

body {

	font-family: 'Noto Sans JP', sans-serif;

}

a {

	text-decoration: none; 

}

.main_container{


	margin : 0 ; 
	padding : 0 ;
}


.header_container{
/*	background-color : #00aaaa;
*/
	background-color : #333333;

	height : calc(var(--vh, 1vh) * 9);
	max-height : calc(var(--vh, 1vh) * 9);
	min-height:calc(var(--vh, 1vh) * 9); 


	
	width:calc(var(--vh, 1vh) * 58.7);/*レスポンシブ対応の場合はココを書き換える*/	
	margin: 0 auto;
/*
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
*/
}

.body_container{
/*	background-color : #aa00aa;
*/
	background-color : #333333;
	
	height :calc(var(--vh, 1vh) * 78);
	max-height :calc(var(--vh, 1vh) * 78);
	
	width: calc(var(--vw, 1vw) * 100);
	
	padding :0px 0px 0px 0px ;
}


.footer_container{
/*	background-color : #aaaa00;
*/
	background-color : #333333;

	height : calc(var(--vw, 1vw) * 38.3);
	max-height : calc(var(--vh, 1vh) * 22);
/*	min-height : calc(var(--vh, 1vh) * 18);*/

	width:calc(var(--vh, 1vh) * 58.7);/*レスポンシブ対応の場合はココを書き換える*/	

	max-width:calc(var(--vw, 1vw) * 100);/*レスポンシブ対応の場合はココを書き換える*/	
	margin: 0 auto;



}

.footer_menu_bottom_3{
	width : 100% ;

	height : 100%;
	
display: flex;
    /*コレ*/align-items: flex-end;

	
	
	margin :0px 0px ;
	padding :0px 0px ;
	font-size:0;
	
}


.footer_menu_bottom_4{
	margin :0px 0px ;
	padding :0px 0px ; 

	font-size:0;
	

}






.h_container{
	
	height : 100% ;
	
/*	background-color : #00aa00;
*/
	background-color : #333333;


}


.swiper-container {
}

        
.v_container{
	width: 100%;
	height: 100%;
	position:relative;
	overflow:hidden;

}


.a_swiper-slide {
	
}


.a_swiper-slide img{
	width:100%;
	height:100%;
	object-fit: contain;
	object-position:center center;
}


.a_swiper-button-next {
	top: auto;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}



.a_swiper-button-prev {
	top: 40px;
	bottom: auto;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}



.b_swiper-slide img{
	width:100%;
	height:100%;
	object-fit:scale-down;
	object-position:center center;
}


.b_swiper-button-next {
	color : #FFFFFF
}


.b_swiper-button-prev {
	color : #FFFFFF
}



.horizontal_container{
	width:calc(var(--vh, 1vh) * 58.7);/*レスポンシブ対応の場合はココを書き換える*/
	
	max-width:calc(var(--vw, 1vw) * 100);/*レスポンシブ対応の場合はココを書き換える*/	


	
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

}


.horizontal_container_header{ /*レスポンシブ対応の場合はココを書き換える*/
	width:100%;  
	
/*	background-color:#ffffff;
*/
/*	background-color : #222222;
*/	

	text-align:center;
	color : white;
	
}

.horizontal_container_body{ /*レスポンシブ対応の場合はココを書き換える*/

	height:100%;


}

.horizontal_container_footer{ /*レスポンシブ対応の場合はココを書き換える*/
	width:100%;
	position: absolute;
	bottom : 0px;
/*	background-color:#ffffff;
*/
/*	background-color : #222222;
*/
	text-align:center ;
	color : white;
}





/*スライダー用のコンテナー(基本的には横スライダーのコンテナと同じ内容を書く)*/
.slide_container{

	width:calc(var(--vh, 1vh) *  58.7);/*レスポンシブ対応の場合はココを書き換える*/
	max-width:calc(var(--vw, 1vw) * 100);/*レスポンシブ対応の場合はココを書き換える*/	

	
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;


}

.slide_container_header{

	width:100%;  
	
/*	background-color:#ffffff;
*/
	

	text-align:center;
	color : white;


}

/*コンテナ 中身*/
.slide_container_body{
	height:100%;
	
	margin : 10px ;
}

.slide_container_footer{
	width:100%;
	position: absolute;
	bottom : 0px;
/*	background-color:#ffffff;
*/

	text-align:center ;
	color : white;


}





.c_container{
	
/*	background-color:#aaffaa; 
*/

	max-height: calc(var(--vh, 1vh) * 56 );/*基本は50～60vh(60vhが最大)、上下に対しての中央位置の設定に関わるのでレスポンシブの際に変更が必要？*/
	position: absolute;
	top:  calc(var(--vh, 1vh) * 12 );
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	
	overflow:hidden;
	
}
		
		
		
.c_swiper-button-next {
	color : #FFFFFF;
}


.c_swiper-button-prev {
	color : #FFFFFF;
}


.c_swiper{
	height :calc(var(--vh, 1vh) * 56 );
	
}


.c_swiper-slide img{
	width:100%;
	height:auto;
	max-height:45vh;
	object-fit:scale-down;
	object-position:center center;

}
        
        
.c_swipe_slide_inner1{

	margin:10px 0px 10px 0px ;
    padding:clamp(2px , 0.7vh , 4px);
/*    min-height:45vh;
    max-height:45vh;
*/

/*	background-image: url('./img6/metal_5.jpg');*/
/*	background-color: #101b19;*/

	background-image: url('./img7/bg_6.png');
	background-size:100% 100%;
}


.c_swipe_slide_inner2{

/*	padding:5px 5px 5px 5px ;*/
     padding:clamp(2px , 0.7vh , 4px);
   
/*    min-height:40vh;
    max-height:40vh;
*/
/*	background-image: url('./img6/metal_4.jpg');*/

/*	background-color : #f2f4eb ;*/

/*	background-color: #101b19;*/

	background-size:100% 100%;
}


.c_swipe_slide_inner_image{

	max-height:30vh;
	
}


.c_swipe_slide_inner_text{

	margin:0px 0px 0px 0px ;/*レスポンシブ対応の際はココの数値を書き換える*/
	
	text-align:center;
	
/*	font-size:clamp(0.5em, 1vh, 1em); /*レスポンシブ対応の際はココの数値を書き換える*/
/*	font-size: calc(var(--vh, 1vh) * 2.1 ); /*レスポンシブ対応の際はココの数値を書き換える*/
/*	line-height:calc(var(--vh, 1vh) * 4.2 ) ;*/

/*	color : #373636 ;*/
/*	color : white ;*/
/*	color : #fff9e6 ;*/

/*	color : #fff9e6*/
/*	color : #ddd4cc*/
	color : #f2f4eb


}


/*横スワイプ　タイトル部分*/
.c_swipe_slide_inner_text1{
	margin:0px 3px 0px 3px;
	
	font-family: "UDモトヤ明朝", "MOTOYA明朝", "モトヤ明朝", "YuMincho", serif;
	
/*	font-size: calc(var(--vh, 1vh) * 3.3 ); /*レスポンシブ対応の際はココの数値を書き換える*/

/*	font-size:clamp( 1.5rem ,calc(var(--vw, 1vw) * 5.2) , calc(var(--vh, 1vh) * 2.8 )) ;*/
	font-size:clamp( 1.2rem ,calc(var(--vw, 1vw) * 4.2) , calc(var(--vh, 1vh) * 2.4 )) ;

/*	line-height:calc(var(--vh, 1vh) * 4.2 ) ;*/
	line-height:calc(var(--vh, 1vh) * 3.2 ) ;
	
	font-weight: bold;
	
}

/*横スワイプ　詳細部分*/
.c_swipe_slide_inner_text2{
	margin:15px 0px 15px 0px;
	
	font-family: "Tazugane Info StdN", "Tazugane Gothic Info StdN", sans-serif;
	
/*	font-size: calc(var(--vh, 1vh) * 1.4 ); /*レスポンシブ対応の際はココの数値を書き換える*/
/*	font-size:clamp( 0.5rem , calc(var(--vh, 1vh) * 1.65 ) , 0.58rem);*/

/*	font-size:clamp( 0.5rem ,calc(var(--vw, 1vw) * 2.8) , calc(var(--vh, 1vh) * 1.65 )) ;*/
	font-size:clamp( 0.4rem ,calc(var(--vw, 1vw) * 2.4) , calc(var(--vh, 1vh) * 1.32 )) ;
	
/*	line-height:calc(var(--vh, 1vh) * 2.4 ) ;*/
	line-height:calc(var(--vh, 1vh) * 2.0 ) ;
	
}



.c_swiper{
	.swiper-slide{
		transform: scale(0.8);
		transition: transform 1s;

	}
}
.c_swiper{

	.swiper-slide-active{
		transform: scale(1);
	}
}

.swiper-pagination-bullet{
	
	
/*	width: 10px;*/
/*	height: 10px;*/

	width: calc(var(--vh, 1vh) * 1.2);
	height: calc(var(--vh, 1vh) * 1.2);


	background-color : white ;

}

/*表示画像幅は画像サイズに引っ張られる*/




/*クロスブラウザ対応*/
/* Safari */
/*_::-webkit-full-page-media, _:future, :root .body_container {
	height : 76vh;
	max-height : 76vh;
}


_::-webkit-full-page-media, _:future, :root .footer_container {
	height : calc(100vw * 0.28);
	max-height : 18vh ;
	min-height:18vh ;

	max-width:calc(100vh * 0.43);
}


_::-webkit-full-page-media, _:future, :root .horizontal_container {
	max-width:calc(100vh * 0.43);
	
}


_::-webkit-full-page-media, _:future, :root .slide_container {
	max-width:calc(100vh * 0.43);
	
}

*/