@charset "UTF-8";
:root{
	--body : #000;
	--link : #000;
	--title : #000;
	--main : #000;
	--base : #000;
	--mainBold : #000;
	--sub : #000;
	--white : #000;
}
/*--------------------------------------------
MV
---------------------------------------------*/
#mv h1{
	margin-left : auto;
	margin-right : auto;
}
#mv h1 a{
	display : block;
}
#mv p{
	margin-left : auto;
	margin-right : auto;
}
@media(max-width:1199px){
	#mv{
		height : calc( 750 * 100vw / 750 );
		background : url("../images/home/mv/mv_sp.jpg") left top / 100% auto no-repeat;
		padding-top : calc( 40 * 100vw / 750 );
	}
	#mv h1{
		width : calc( 225 * 100% / 750 );
	}
	#mv p{
		margin-top : calc( 46 * 100vw / 750 );
		width : calc( 166 * 100% / 750 );
	}
}
@media(min-width: 1200px){
	#mv{
		height : calc( 794.4 * 100vw / 1200 );
		background : url("../images/home/mv/mv.jpg") left top / 100% auto no-repeat;
		padding-top : calc( 143.5 * 100vw / 1200 );
	}
	#mv h1{
		width : calc( 200 * 100% / 1200 );
	}
	#mv h1 img{
		width : 100%;
	}
	#mv p{
		margin-top : calc( 41 * 100vw / 1200 );
		width : calc( 126 * 100% / 1200 );
	}
	#mv p img{
		width : 100%;
	}
}
/*--------------------------------------------
COMMON
---------------------------------------------*/
.title{
	text-align : center;
	width : 97px;
	margin-left : auto;
	margin-right : auto;
}
@media(max-width:1199px){
	.title{
		width : calc( 97.3 * 100% / 750 );
	}
}
@media(min-width: 1200px){
	.title img{
		width : 100%;
	}
}
.btn{
	margin-left : auto;
	margin-right : auto;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	text-align : center;
}
@media(max-width:1199px){
	.btn{
		width : calc( 360 * 100% / 750 );
		height : calc( 80 * 100vw / 750 );
		border : solid 1px #000;
		border-radius : calc( 10 * 100vw / 750 );
		font-size : calc( 30 * 100vw / 750 );
	}
}
@media(min-width: 1200px){
	.btn{
		width : 360px;
		height : 80px;
		border : solid 1px #000;
		border-radius : 10px;
		font-size : 30px;
	}
}
/*--------------------------------------------
LEDE
---------------------------------------------*/
#lede h2{
	-webkit-writing-mode : vertical-rl;
	    -ms-writing-mode : tb-rl;
	        writing-mode : vertical-rl;
}
#lede p{
	-webkit-writing-mode : vertical-rl;
	    -ms-writing-mode : tb-rl;
	        writing-mode : vertical-rl;
}
#lede .box{
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : reverse;
	-ms-flex-direction : row-reverse;
	    flex-direction : row-reverse;
	white-space : nowrap;
}
@media(max-width:1199px){
	#lede .wrap{
		padding-top : calc( 83 * 100vw / 750 );
		padding-bottom : calc( 214 * 100vw / 750 );
	}
	#lede h2{
		font-size : calc( 72 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
		width : calc( 72 * 100vw / 750 );
	}
	#lede .box{
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		margin-top : calc( 118 * 100vw / 750 );
		-webkit-box-align : start;
		-ms-flex-align : start;
		align-items : flex-start;
	}
	#lede p{
		white-space : nowrap;
		font-size : calc( 24 * 100vw / 750 );
		line-height : calc( 44 * 100vw / 750 );
	}
	#lede p + p{
		margin-right : 1em;
	}
}
@media(min-width: 1200px){
	#lede .wrap{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-orient : horizontal;
		-webkit-box-direction : reverse;
		-ms-flex-direction : row-reverse;
		    flex-direction : row-reverse;
		padding-top : 75px;
		padding-bottom : 132px;
		padding-left : 277px;
		padding-right : 306px;
	}
	#lede h2{
		font-size : 72px;
		margin-left : 84px;
	}
	#lede p{
		line-height : 1.5;
		font-size : 20px;
	}
	#lede p + p{
		margin-right : 1em;
	}
}
/*--------------------------------------------
PRODUCTS
---------------------------------------------*/
#products .img{
	text-align : center;
}
#products h3{
	text-align : center;
	letter-spacing : .2em;
}
#products .text{
	line-height : 1.5;
}
#products .img{
	display : block;
}
@media(max-width:1199px){
	#products .wrap{
		padding-bottom : calc( 120 * 100vw / 750 );
	}
	#products ul{
		padding-left : calc( 75 * 100% / 750 );
		padding-right : calc( 75 * 100% / 750 );
		margin-top : calc( 77 * 100vw / 750 );
	}
	#products li + li{
		margin-top : calc( ( 89 - 9 ) * 100vw / 750 );;
	}
	#products .img{
		width : calc( 165 * 100% / 600 );
		margin-left : auto;
		margin-right : auto;
	}
	#products h3{
		margin-top : calc( 42 * 100vw / 750 );
		font-size : calc( 40 * 100vw / 750 );
	}
	#products .text{
		font-size : calc( 24 * 100vw / 750 );
		text-align : justify;
		margin-top : calc( ( 20 - 9 ) * 100vw / 750 );
	}
	#products .btn{
		margin-top : calc( ( 111 - 9 ) * 100vw / 750 );
	}
}
@media(min-width: 1200px){
	#products .wrap{
		padding-bottom : 58px;
	}
	#products ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
		-ms-flex-wrap : wrap;
		    flex-wrap : wrap;
		width : 1000px;
		margin-left : auto;
		margin-right : auto;
		margin-top : -198px;
	}
	#products li{
		width : 400px;
	}
	#products h3{
		margin-top : 56px;
		font-size : 36px;
	}
	#products .text{
		font-size : 20px;
		text-align : justify;
		margin-top : calc( 24px - 5px );
	}
	#products .btn{
		margin-top : calc( 92px - 5px );
	}
	#products li{
		pointer-events : none;
	}
	#products li a{
		pointer-events : all;
	}
	#products li:hover a{
		opacity : .7;
	}
}


#sns-links {
  margin-top: 30px;
  text-align: left;
}

#sns-links .sns-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 25px;
}

#sns-links .sns-buttons li a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-size: 9px;
  text-align: center;
}

#sns-links .sns-buttons li img {
  display: block;
  margin: 0 auto 4px;
}

@media screen and (max-width: 1199px) {
  #sns-links .sns-buttons {
    flex-direction: row; /* 横並びのまま */
    flex-wrap: wrap;     /* 幅が足りない時は折り返す */
    gap: 12px;           /* 間隔を少し詰める */
  }

  #sns-links .sns-buttons li img {
    width: 36px; /* 少し小さめに調整 */
    height: 36px;
  }

  #sns-links .sns-buttons li a {
    font-size: 11px; /* テキスト小さめ */
  }
}