@charset "UTF-8";

/* ブラウザのディフォルトレイアウトリセット */
* {
	margin: 0;
	padding: 0;
	border: none;
	font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

img{
	border-image-width:0;
}


/* サイトの基本レイアウトと書体の定義 */
body {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 700;
	font-style: normal;
	font-weight: 300;
	font-style: normal;
	text-align:center;
}

/* ベースのCSS変数 */
:root {
  --display-width:1920px;
  --base-font:20px;
}

a{
	color:#ffffff;
	border:none;
	text-decoration: none;
	outline : none;
}
a:visited{
  	color:#fffeee;
	border:none;
	text-decoration: none;
}
a:active{
	text-color:rgba(0,0,0,1.00);
	border:none;
	text-decoration: none;
}

a:focus{
	text-color:rgba(0,0,0,1.00);
	border:none;
	text-decoration: none;
}
a:hover{
	color:rgba(126,126,126,1.00);
	border:none;
	text-decoration: none;
}

#page {
	display:inline-block;
	text-align:center;
	max-width: 100%;
}

header#top {
	display:inline-block;
	margin:0 auto;
	text-align:center;
}




/* ------ パソコン幅表示 -------- */
	html {
		font-size:var(--base-font);
		outline: none;
		height: 100%;
		border:none;
	}

	/*#main{
		width:1980px;
	}*/
	
	/*ヘッダー*/
	header{
		padding-bottom: 6vw;
		background-color: #000000;
		margin-bottom: 8vw;
	}
	
	header .header-bar{
		height:5vw;
		width:100%;
		background-color:#000000;
	}
	
	header .header-bar img{
		width:18vw;
		float:left;
		overflow: hidden;
		margin-left:32px;
		margin-top:1.2vw;
	}
	
	header .body {
		width:100%;
	}


	header img#main-image{
		width:100%;
		margin:0;
	}
	
	/*メニュー*/
	body #menu-box{
		display: flex;
		height: 40vw;
		margin-bottom: 8vw;
	}
	
	body .menu{
		background-color: #000000;
		height: 15vw;
		flex: 1 1 auto;
		align-self: center;
		display: flex;
		justify-content: center;
	}
	
	body .menu p{
		color: #FFFFFF;
		align-self: center;
	}
	
	body .menu-list{
		background-color: #000000;
		height: 100%;
		color: #ffffff;
		flex: 1 1 auto;
	}
	
	body .menu-item{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 25%;
	}
	
	body .menu-item li{
		list-style-type: decimal;
		text-align: left;
	}
	
	/* アイテムレイアウト */
	section{
		margin-bottom: 15vw;
	}
	
	h1{
		font-size: 3rem;
		text-align: left;
		padding-left: 0.3rem;
	}
	
	.item-art{
		display: flex;
		width: 100%;
		color: #ffffff;
		margin-bottom: 2vw;
	}
	
	.item-1{
		flex: 1 1 auto;
		background-color: #000000;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.item-2{
		flex: 1 1 auto;
	}
	
	.item-2 img{
		width: 100%;
		height: 100%;
	}
	
	.item-list{
		display: flex;
	}
	
	.item-parts{
		flex: 1 1 auto;
		width: 25vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	
	.item-parts img{
		width: 100%;
		height: 100%;
	}
	
	/*アイテムテキスト*/
	h2{
		font-size: 1.7rem;
		text-align: left;
		text-decoration: underline;
		text-decoration-color: #AEAEAE;
		margin-bottom: 2vw;
	}
	
	.item-text{
		padding-left: 2rem;
		padding-right: 2rem;
		margin-bottom: 2rem;
	}
	
	.item-text p{
		font-size: 1.2rem;
		text-align: left;
	}
	
	/*スペック表*/
	table{
        border:solid 2px #ccc;
        border-collapse:collapse;
        width:95%;
		margin: 0 auto 6vw auto;
    }
        
	th{
		border:solid 2px #ccc;
        text-align:center;
		line-height: 2rem;
		width: 30%;
	}
	
    td{
        border:solid 2px #ccc;
        text-align:center;
		line-height: 2rem;
    }

	
	/*ボタン*/
	.button{
		display: flex;
		justify-content: space-around;
	}
	
	.category-button a{
		background-color: #000000;
		display: flex;
		justify-content: space-around;
		padding: 0.5rem 2rem;
		width: 15rem;
	}

	.category-button>a:hover{
		opacity: 0.7;
	}
	
	/* フッター部 */
	footer {
		width:100%;
		height:3rem;
		background-color: #000000;
	}
	
	footer span {
		display:inline-block;
		width:100%;
		line-height:3rem;
		vertical-align:middle;
		text-align: center;
		font-size: 0.7rem;
		color: #ffffff;
	}

	/* ページトップボタン */
	.pagetop {
		position: fixed;
		z-index: 99997;
		right: 0.8rem;
		bottom: 0.7rem;
	}

	/* ページトップボタン */
	.pagetop>a>img {
		display:inline-block;
		z-index: 99997;
		width: 2.5rem;
	}

	/* ページトップボタン */
	.pagetop>a>img:hover{
		opacity: 0.5 ;
	}


/* ------ 900PXをブレークポイントにする -------- */
@media only screen and (max-width: 900px){
	html {
		font-size:15px;
	}
	
	table{
        width:90%;
    }
}

/* ------ スマートフォン幅表示 480PXをブレークポイントにする -------- */
@media only screen and (max-width: 640px){
	
	html {
		font-size:12px;
	}
	
	header{
		padding-bottom: 15vw;
		margin-bottom: 12vw;
	}
	
	header .header-bar{
		height:15vw;
		width:100%;
	}
	
	header .header-bar img{
		width:30vw;
		margin-left:5vw;
		margin-top:5vw;
	}
	
	/*メニュー*/
	body #menu-box{
		flex-direction: column;
		height: 55vh;
		margin-bottom: 15vw;
	}
	
	body .menu{
		align-self: flex-start;
		width: 60vw;
	}
	
	body .menu p{
		line-height: 2rem;
		
	}
	
	/* アイテムレイアウト */
	section{
		margin-bottom: 25vw;
	}
	
	h1{
		font-size: 2.3rem;
	}
	
	.item-art{
		flex-direction: column-reverse;
		margin-bottom: 10vw;
	}
	
	
	/*アイテムテキスト*/
	h2{
		font-size: 1.5rem;
		margin-bottom: 2vw;
	}
	
	.item-text{
		padding-left: 1rem;
		padding-right: 1rem;
		margin-bottom: 10vw;
	}
	
	.item-text p{
		font-size: 1.3rem;
		text-align: left;
	}
	
	/*ボタン*/
	.button{
		flex-direction: column;
		align-items: center;
	}
	
	.category-button{
		margin-bottom: 1rem;
	}
	
	.category-button a{
		display: flex;
		justify-content: space-around;
		padding: 0.5rem 2rem;
		width: 70vw;
	}
	
	/* ページトップボタン */
	.pagetop>a>img {
		width: 4rem;
	}
}
	









/* モーダルダイアログ用の定義（未使用） */
#_modal_dialog {
display: none;
position: absolute;
z-index: 99999;
left: 6vw;
top: 12vh;
width:85vw;
height:100vw;
overflow: hidden;
background-color: rgba(256,256,256,1.00);
}


#_modal_content {
overflow: hidden;
width:85vw;
height:100vw;

}

#_close_btn{
float:right;
width: 3.5vw;
height: 3.5vw;
margin-top:2.5vw;
margin-right:2.5vw;
}

#_modal_background {
display: none;
position:fixed;
margin:0;
height:0;
z-index: 99998;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.6);
}


/* フォグの定義 */
#half_mask{
position:fixed;
margin:0;
z-index: 9999;
bottom: 0;
width:100%;
height: 11vw;
overflow: hidden;
background: linear-gradient(to bottom,rgba(256,256,256,0),rgba(256,256,256,0.6) 20%,rgba(256,256,256,1.0)); 
}


/*------------------------
クリアフィックスの定義 
------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	clear: both;
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
}

.skip-link {
	display:none;
}