@charset "utf-8";
@import url("reset.css");

html{
	scroll-behavior: smooth;
}
body{
	background:#ededed;
	font-family: "Helvetica Neue",
		    Arial,
		    "Hiragino Kaku Gothic ProN",
		    "Hiragino Sans",
		    Meiryo,
		    sans-serif;
	color:#111;
	letter-spacing: 0.08rem;
	line-height:1.9rem;
	font-feature-settings: “palt”;
}
a{
	color:#111;
}
a:hover{
	opacity:70%;
}
a::active{
	opacity:70%;
}


/*///////////////////////////// PC用  ///////////////////////////////////////////*/


@media (max-width: 12450px) { /* PC用 */

	/***** 共通 *****/
	#container{
		background:#fff;
		width:1200px;
		margin:0 auto;
		padding:40px 0 0;
		height: 100%;
	}

	/*****  ヘッダー  *****/
	header{ 
		width:1020px;
		height:125px;
		margin:0 auto;
		positon:relative;
	}
	h1.logo{
		position: relative;
		top: 0px;
		left: 0px;
	}
	nav ul{
		position: relative;
		right: 5px;
		bottom: 10px;
	}
	nav ul li{ /* ナビゲション */
		display:inline;
		padding:0 10px;
		border-right:1px #ccc solid;
		font-size:0.87rem;
	}
	nav ul li:last-child{
		border:none;
		padding:0 0 0 10px;
	}
	nav{
		text-align:right;
	}
	

	/*****  コンテンツエリア *****/
	section{
		width:1020px;
		margin:0 auto;
		clert:both;
	}
	#contents{
		margin:60px auto 130px;
		background:url(../images/common/diagonal_line.jpg) no-repeat top center;
	}
	h2{
		padding:20px 0 5px;
		font-size:32px;
		text-align:center;
		color:#111;
	}
	.sub_title{
		font-size:16px;
		text-align:center;
		color:#111;
	}
	.text_column{
		width:820px;
		margin:30px auto 0;
		line-height:160%;
		color:#111;
	}
	h2,h3{
		clear:both;
		text-align:center;
		font-size:24px;
		font-weight:normal;
		margin-bottom:0px;
	}
	h3,.sub_title{
		margin-bottom:30px;
	}
	.link_button a {
		border: 2px solid #333333;
		background: #fff;
		border-radius: 9999px;
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
		max-width: 250px;
		padding: 15px 25px;
		color: #333333;
		line-height: 1.8;
		text-decoration: none;
		transition: 0.3s ease-in-out;
	}
	.link_button a:hover {
		background: #333333;
		color: #FFF;
	}
	.link_button a:after {
		content: '';
		width: 6px;
		height: 6px;
		border-top: 3px solid #333333;
		border-right: 3px solid #333333;
		transform: rotate(45deg) translateY(-50%);
		position: absolute;
		top: 50%;
		right: 25px;
		border-radius: 1.5px;
		transition: 0.3s ease-in-out;
	}
	.link_button a:hover:after {
		border-color: #FFF;
	}


	/*****  運営店舗  *****/
	.shop-list .grid_list{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	  margin-bottom:30px;
	}
	.shop-list dl{
		width:300px;
	}
	.shop-list dl img{
		border:1px #ccc solid;
	}
	.shop-list dt{
		background:#000;
		font-size:0;
		line-height:0;
	}
	.shop-list dd{
		text-align:center;
		margin:0.8rem auto 3rem;
	}
	.shop-list dl a{
		transition: 0.3s ease-in-out;
	}
	.shop-list dl a:after{
		transition: 0.3s ease-in-out;
	}


	/*****  おすすめ動画  *****/
	
	.movies .grid_list{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	  margin-bottom:30px;
	}
	.movies ul{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	}
	.movies ul li{
		width:500px;
	}
	.movies ul li img,
	.movies ul li iframe{
		width:100%;
		margin-bottom:40px;
	}



	/*****  特集  *****/
	.special ul{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	}
	.special ul li{
		width:500px;
	}
	.special ul li img{
		width:100%;
		margin-bottom:45px;
	}



	/*****  ソーシャルメディア  *****/
	.sns_list ul{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	}
	.sns_list li{
		width:300px;
		background:#000;
		font-size:0;
		line-height:0;
	}
	.sns_list li img{
		border:1px #ccc solid;
		width:100%;
	}
	.sns_list li a{
		transition: 0.3s ease-in-out;
	}
	.sns_list li a:after{
		transition: 0.3s ease-in-out;
	}



	/*****  取り扱いブランド  *****/
	
	table.brand_table{
		margin-bottom:60px;
	}	
	table.brand_table td{
		border:1px #c8cacc solid;
		padding:0;
		background:#000;
		font-size:0;
		line-height:0;
	}
	table.brand_table td a{
		transition: 0.3s ease-in-out;
	}
	table.brand_table td a:after{
		transition: 0.3s ease-in-out;
	}
	.brand_list table.pc{
		display:block;
	}
	.brand_list table.sp{
		display:none;
	}



	/*****  会社概要  *****/
	.campany_table{
		width:820px;
		border-collapse:separate;
		border-spacing:20px;
		margin:0 auto;
	}
	.campany_table td,
	.campany_table th {
		border-bottom:1px #c8cacc solid;
		padding: 0 0 1rem 1rem;
		text-align:left;
		line-height:160%;
		font-weight:normal;
		color:#222;
	}
	.campany_table th {
		width:20%;
	}


	/***** フッター *****/
	footer{
		background:#000;
		color:#fff;
		height:auto;
		width:100%;
	}
	#footer-container {
		width:820px;
		margin:0px auto;
		padding:20px;
		height:21px;
	}
	#footer-container  > *{
		float:left;
	}
	#footer-container img{
		width:131px;
		margin-right:20px;
	}
	#footer-container h4{
		line-height:180%;
	}
	#footer-container small{
		font-size:0.8rem;
		text-align:right;
		float:right;
	}
	#footer-container .clear{
		clear: both;
	}


}



/*///////////////////////////// スマホ用  ///////////////////////////////////////////*/


@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	
	

	/***** 共通 *****/
	#container{
		background:#fff;
		width:100%;
		height:100%;
	}

	/*****  ヘッダー  *****/
	header{ 
		width:100%;
		margin:1rem auto;
		text-align:center;
	}
	nav ul{
		width:100%;
		text-align:center;
		margin:1rem auto;
	}
	nav ul li{ /* ナビゲション */
		display:inline;
		padding:0 10px;
		border-right:1px #ccc solid;
		font-size:0.87rem;
	}
	nav ul li:last-child{
		border:none;
		padding:0 0 0 10px;
	}
	
	#main_img{
		margin:1rem auto 0;
		width:100%;
	}

	/*****  コンテンツエリア *****/
	section{
		width:90%;
		margin:0 auto;
		clert:both;
	}
	#contents{
		margin:3rem auto 6rem;
		background:url(../images/common/diagonal_line.jpg) no-repeat top center;
	}
	h2{
		padding:20px 0 5px;
		font-size:32px;
		text-align:center;
		color:#111;
	}
	.sub_title{
		font-size:16px;
		text-align:center;
		color:#111;
	}
	.text_column{
		width:100%;
		margin:30px auto 0;
		line-height:160%;
		color:#111;
	}
	h2,h3{
		clear:both;
		text-align:center;
		font-size:24px;
		font-weight:normal;
		margin-bottom:0px;
	}
	h3,.sub_title{
		margin-bottom:30px;
	}
	


	/*****  運営店舗  *****/
	.grid_list{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	  margin-bottom:2rem;
	}
	.shop-list dl{
		width:48%;
	}
	.shop-list dl img{
		border:1px #ccc solid;
		width:100%;
	}
	.shop-list dt{
		background:#000;
		font-size:0;
		line-height:0;
	}
	.shop-list dd{
		text-align:center;
		margin:0.8rem auto 2rem;
	}
	.shop-list dl a{
		transition: 0.3s ease-in-out;
	}
	.shop-list dl a:after{
		transition: 0.3s ease-in-out;
	}


	/*****  おすすめ動画  *****/
	.movies ul{
		width:100%;
		height:auto;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		row-gap: 2rem;
	}
	movies .grid_list li{
		width:95%;
		 border: none;
		 margin: 0px;
		 aspect-ratio: 16 / 9;
		 overflow: hidden;
	}
	.movies .grid_list li iframe {
		width: 100%;
 		height: 100%;
	}
	.movies ul li img,
	.movies ul li iframe{
		width:100%;
	}
	.movies ul li iframe{
	
	}



	/*****  特集  *****/
	.special ul{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	}
	.special ul li{
		width:95%;
	}
	.special ul li img{
		width:100%;
		margin-bottom:1rem;
	}



	/*****  ソーシャルメディア  *****/
	.sns_list ul{
	  width:100%;
	  height:auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	}
	.sns_list li{
		width:30%;
		background:#000;
		font-size:0;
		line-height:0;
	}
	.sns_list li img{
		border:1px #ccc solid;
		width:100%;
	}
	.sns_list li a{
		transition: 0.3s ease-in-out;
	}
	.sns_list li a:after{
		transition: 0.3s ease-in-out;
	}



	/*****  取り扱いブランド  *****/
	table.brand_table{
		margin-bottom:60px;
		width:90%;
	}	
	table.brand_table td{
		border:1px #c8cacc solid;
		padding:0;
		background:#000;
		font-size:0;
		line-height:0;
	}
	table.brand_table td a{
		transition: 0.3s ease-in-out;
	}
	table.brand_table td a:after{
		transition: 0.3s ease-in-out;
	}
	.brand_list table.pc{
		display:none;
	}
	.brand_list table.sp{
		display:block;
		width:95%;
		margin:0 auto 3rem;
	}
	.brand_list table.sp img{
		width:100%;
	}



	/*****  会社概要  *****/
	.campany_table{
		width:100%;
		border-collapse:separate;
		border-spacing:0.5rem;
		margin:0 auto;
	}
	.campany_table td,
	.campany_table th {
		border-bottom:1px #c8cacc solid;
		padding: 0 0 0.5rem 0.5rem;
		text-align:left;
		line-height:160%;
		font-weight:normal;
		color:#222;
	}
	.campany_table th {
		width:35%;
	}


	/***** フッター *****/
	footer{
		background:#000;
		color:#fff;
		width:100%;
		padding:1rem 0 1rem 0;
		text-align:center;
	}
	#footer-container {
		width:95%;
		margin:0px auto;
		padding:0px 0px 2rem 0px;
	}
	#footer-container img{
		width:20%;
		margin-left:2.5rem;
	}
	#footer-container h4{
		line-height:180%;
	}
	#footer-container small{
		width:100%;
		font-size:0.8rem;
		text-align:center;
		display:block;
	}
	#footer-container .clear{
		display:block;
	}

}





/*///////////////////////////// タブレット用  ///////////////////////////////////////////*/


@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}