@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:1000px;
  --base-font:15px;
}

a{
	color:rgba(0,0,0,1);
	border:none;
	text-decoration: none;
	outline : none;
}
a:visited{
  	color:rgba(0,0,0,1);
	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;
}

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

/* ------ スマートフォン幅表示 480PXをブレークポイントにする -------- */

@media only screen and (max-width: 480px) {
	
    /* 画面全体の設定 */
	html{
		font-size:calc(100vw*(var(--base-font)/var(--display-width))); /* フォントサイズ（remの基準）を設定、画面幅から相対で計算 */
		outline: none;  /* 輪郭線なし（子要素伝搬） */
		height: 100%; /* ひとまず縦幅定義 */
		border:none; /* ボーダー線なし（子要素伝搬) */
	}
	
	/* ヘッダーフッターを除いたコンテンツ本体 */
	#main{
		width:100vw; /* 画面の横幅一杯にコンテンツを表示 */
		margin-top:calc(100vw*(90/var(--display-width))); /* 固定ヘッダに対するコンテンツ部の初期位置 */
	}
	

    /* ロゴを表示する部分 リキッド */
	header .header-bar{
		height:calc(100vw*(90/var(--display-width))); /*高さ（画面幅相対で計算）*/
		width:100vw; /*画面幅一杯で表示*/
	}
	
    
    /* ロゴ画像 リキッド */
	header .header-bar img{
		float:left; /* 右寄せ（回り込み注意） */
		overflow: hidden; /*はみ出して表示させない*/
		width:calc(100vw*(220/var(--display-width))); /* 画面幅に合わせて縮小 */
		margin-left:calc(100vw*(30/var(--display-width))); /* 左マージンも画面幅に合わせて変化 */
		margin-top:calc(100vw*(28/var(--display-width)));
	}

	/* メインビジュアル */
	header .body img#main-image{
		width:100vw; /*画面幅に合わせて縮小 */
	}

	section.start{
		width:90vw;
	}
	
	#main section.start dl{
		margin:0.2rem;
		font-size:0.8rem;
		display:inline-block;
		width:90vw;
	}

	
	section.start dl{
		width:100%;
		height:calc(100vw*(178/var(--display-width)));
		padding:1.0rem 0.6rem;
		border:solid 0.8vw #000000;
	}
	
	section.start dl dt{
		display:inline-block;
		float:left;
		margin-bottom:0.7rem;
	}
	
	section.start dl dd{
		margin-left:0.1rem;
		display:inline-block;
		float:left;
		text-align:left;
		margin-bottom:0.7rem;
	}

	#main section h2{
		text-align:left;
		font-size:1.25rem;
	}
	
	#main section h2 span:first-of-type{
		font-size: 1.2rem;
		text-align:left;
	}

	
	#main section h2 span:nth-of-type(2){
		display:block;
		padding-left:1.5rem;
		width:100%;
		font-size: 1.2rem;
		text-align:left;
	}
	
	section.categories{
		margin-top:2rem;
		text-align:center;
		padding-bottom:3rem;
	}

	#main section.categories div.content-body{
		padding:2.3rem 2rem 2.3rem 3.2rem;
	}
	#main section.categories:nth-of-type(even)  {
		background-color:#FFFFFF;
	}

	#main section.categories:nth-of-type(odd) {
		background-color:#E5E5E5;
	}
	section.categories ul li{
		display:inline-block;
		font-weight: 300;
		font-style: normal;
		font-size:0.9rem;

		float:left;
		text-align:center;
	}
	section.categories ul li h3{
		margin-top:0.8rem;

		color:#222749;
		font-weight: 900;
		font-size:0.9rem;
	
		vertical-align:middle;
	}

	hr{
		margin-bottom:1.8rem;
    	height: 0.16rem;
    	background-color:#000;
    	width: 100%;
	}

	section.categories ul li h4 {
		font-weight: 900;
		font-size:1.0rem;
		margin-bottom:0.2rem;
	}
	
	section.categories ul li h5{
		width:100%;
		text-align:center;
		font-size:3vw;
		font-weight:500;
	}


	section.categories ul li .image {
		width:calc(100vw*(455/var(--display-width)));
	}

	section.categories ul li .comment {
		width:calc(100vw*(455/var(--display-width)));
	}

	section.categories ul li .image img{
		width:95%;
	}

	section.categories ul li {
		margin-top:4rem;
	}
	section.categories ul li:first-of-type {
		margin-top:0;
	}

	
	section.categories ul li .lead{
		height:calc(100vw*(390/var(--display-width)));
		border:solid 0.25rem;
		border-radius:0.85rem;
		margin:1.9rem 0.5rem 1.5rem 0.5rem;
		padding:0.6rem 0.7rem;
	}
	
	section.categories ul li .recommend{
		height:calc(100vw*(390/var(--display-width)));
		margin:1rem 1.3rem 0 1.3rem;
	}
	section.categories ul li p {
		display:inline-block;
		margin-left:0.6rem;
		margin-top:0.3rem;
		text-align:left;
	}

	section.categories ul li span{
		display:inline-block;
		width:15rem;
		height:3.6rem;
		padding:1.5rem 3rem;
		vertical-align:middle;
		text-align:center;
		font-family: a-otf-ryumin-pr6n, serif;
		font-weight: 400;
		font-size:0.75rem;
	}
	
	section.categories ul li .purchase-button{
		position: relative;
		display:inline-block;
		height:2.4rem;
		width:10.0rem;
		left: calc(50% - 44vw);
		vertical-align:middle;
		margin-top:1.6rem;
		background-color:#222749;
	}

	section.categories ul li .purchase-button::after{
		content:"";
		position: absolute;
		left:10.0rem;
	 	border-top: 1.25rem solid transparent;
		border-bottom: 1.24rem solid transparent;
		border-left: 2.1rem solid #222749;
	}
	
	section.categories ul li .purchase-button > a{
		display:inline-block;
		height:100%;
		line-height:2.4rem;
		vertical-align:middle;
		font-size:1.1rem;
		color:#FFFFFF;
	}


	section.categories .category-button a {
		display:inline-block;
		border:solid 3px;
		
		margin-top:2.5rem;
		
		width:20rem;
		height:2.8rem;
		line-height:2.8rem;
		
		vertical-align:middle;
		font-size:1.0rem;
	}

	/* フッター部 */
	footer {
		width:100%;
		height:75px;
	
		margin-top:100px;
	
		font-size: 1.0rem;
		background-color: #FFFFFF;
	}
	
	footer span {
		display:inline-block;
		width:100%;
		line-height:calc(100vw*(75/var(--display-width)));
		vertical-align:middle;
		font-size: 0.8rem;
		text-align: center;
		background-color: #FFFFF;
	}
}

/* ------ パソコン幅表示 -------- */
@media only screen and (min-width: 481px) {
	html {
		font-size:var(--base-font);
		outline: none;
		height: 100%;
		border:none;
	}

	#main{
		width:1000px;
	}
	
	header .body {
		width:100%;
	}

	
	header .header-bar{
		height:80px;
		width:1000px;
	}
	
	header .header-bar img{
		width:250px;
		float:left;
		overflow: hidden;
		margin-left:32px;
		margin-top:23px;
	}

	header img#main-image{
		width:1000px;
		margin:0;
	}
	
	hr{
		margin-top:-0.8rem;
		margin-bottom:5.5rem;
    	height: 0.2rem;
    	background-color:#000;
    	width: 100%;
	}
	
	#main section.start dl{
		margin:3.8rem;
		display:inline-block;
		width:80%;
	}

	section.start{
		width:80%;
	}
	
	
	section.start dl{
		width:100%;
		height:120px;
		padding:2.1rem 1.3rem;
		border:solid 3px #000000;
	}
	
	section.start dl dt{
		display:inline-block;
		float:left;
		margin-bottom:1.6rem;
	}
	
	section.start dl dd{
		margin-left:2rem;
		display:inline-block;
		float:left;
		margin-bottom:1.6rem;
	}

	#main section h2{
		display:block;
		text-align:left;
		margin-bottom:0.90rem;
		font-size:0;
	}
	
	#main section h2 span:first-of-type{
		font-size: 2.0rem;
		text-align:left;
	}

	
	#main section h2 span:nth-of-type(2){
		display:block;
		width:100%;
		font-size: 2.0rem;
		text-align:center;
	}

	#main section h2 span:nth-of-type(2) br {
		display: none;
	}

	section.categories{
		margin-top:2rem;
		text-align:center;
		padding-bottom:3rem;
	}
	#main section.categories div.content-body{
		padding:2.3rem 2rem 2.3rem 3.2rem;
	}
	#main section.categories:nth-of-type(even) {
		background-color:#FFFFFF;
	}
	#main section.categories:nth-of-type(odd) {
		background-color:#E5E5E5;
	}
	

	section.categories ul li{
		display:inline-block;
		font-weight: 300;
		font-style: normal;
		font-size:0.9rem;

		float:left;
		text-align:center;
	}

	section.categories ul li h3{
		margin-top:0.8rem;

		color:#222749;
		font-weight: 900;
		font-size:1.6rem;
	
		vertical-align:middle;
	}

	section.categories ul li h4 {
		font-weight: 900;
		font-size:1.55rem;
	}
	

	section.categories ul li h5{
		margin-left:-1rem;
		text-align:center;
		font-size:1.25rem;
		font-weight:500;
	}


	section.categories ul li .img {
	}


	section.categories ul li .image {
		width:445px;
	}

	section.categories ul li .comment {
		width:445px;
	}

	
	section.categories ul li .image img{
		width:95%;
	}

	section.categories ul li {
		margin-top:9rem;
	}
	section.categories ul li:first-of-type {
		margin-top:0;
	}

	section.categories ul li:nth-of-type(odd) .image {
		float:right;
	}
	section.categories ul li:nth-of-type(odd) .comment {
		float:left;
	}

	section.categories ul li:nth-of-type(even) .image {
		float:left;
	}
	section.categories ul li:nth-of-type(even) .comment {
		float:right;
	}
	

	section.categories ul li .lead{
		width:390px;
		border:solid 0.25rem;
		border-radius:0.85rem;
		margin:1.9rem 0.5rem 1.5rem 0.5rem;
		padding:0.6rem 0.7rem;
	}
	
	section.categories ul li .recommend{
		width:390px;
		margin:1rem 1.3rem 0 1.3rem;
	}
	section.categories ul li p {
		display:inline-block;
		font-family: a-otf-ud-shin-go-pr6n, sans-serif;
		margin-left:0.6rem;
		margin-top:0.3rem;
		text-align:left;
	}


	section.categories ul li:nth-of-type(odd) .purchase-button{
		position: relative;
		display:inline-block;
		height:2.69rem;
		width:12.0rem;
		left: calc(50% - (18.0rem));
		vertical-align:middle;
		margin-top:1.6rem;
		background-color:#222749;
	}
	
	section.categories ul li:nth-of-type(2) .purchase-button{
		position: relative;
		display:inline-block;
		height:2.69rem;
		width:12.0rem;
		left: calc(50% - (16.4rem));
		vertical-align:middle;
		margin-top:1.6rem;
		background-color:#222749;
	}

	section.categories ul li:nth-of-type(odd) .purchase-button::after{
		content:"";
		position: absolute;
		left:12.0rem;;
	 	border-top: 1.36rem solid transparent;
		border-bottom: 1.35rem solid transparent;
		border-left: 2.4rem solid #222749;
	}
	
	section.categories ul li:nth-of-type(2) .purchase-button::before{
		content:"";
		position: absolute;
		right:12.0rem;
	 	border-top: 1.36rem solid transparent;
		border-bottom: 1.35rem solid transparent;
		border-right: 2.4rem solid #222749;
	}

	section.categories ul li .purchase-button > a{
		display:inline-block;
		height:100%;
		line-height:2.69rem;
		vertical-align:middle;
		font-size:1.4rem;
		color:#FFFFFF;
	}

	section.categories .category-button a {
		display:inline-block;
		border:solid 3px;
		
		margin-top:5.5rem;
		
		width:34rem;
		height:3.2rem;
		line-height:3.2rem;
		
		vertical-align:middle;
		font-size:1.8rem;
	}

	/* フッター部 */
	footer {
		width:100%;
		height:75px;
	
		margin-top:100px;;
	
		font-size: 1.0rem;
		background-color: #FFFFFF;
	}
	
	footer span {
		display:inline-block;
		width:100%;
		line-height:75px;
		vertical-align:middle;
		font-size: 1rem;
		text-align: center;
		background-color: #FFFFF;
	}

}


/* PC・スマホ共通CSS */
header .header-bar{
	background-color:#FFFFFF;
}

section.start dl dt:last-of-type{
	margin-bottom:0;
}
	
section.start dl dd:last-of-type{
	margin-bottom:0;
}

section.start dl dd span{
	color:#D10000;
	font-weight:600;
}



section.start .comming-soon{
	color:#A0A0A0;
	font-weight:400;
}


ul#menu li{
	background-color:#000000;
}


ul#menu li:first-child{
	border-left:none;
}


#main section{
	text-align:center;
}



section.start h1 {
	font-size:3rem;
}

section.categories ul li {
    position: relative;
}

section.categories ul li h3{
	color:#222749;
	text-align:left;
}

section.categories ul li h4{
	text-align:left;
	color:#222749;
}

section.start{
	display:block;
	width:100%;
	text-align:center;
}


section.categories ul li .lead{
	display-inline:block;
	text-align:left;
	color:#222749;
}

section.categories ul li .recommend{
	display-inline:block;
	text-align:left;
}




/*
section.categories ul li span{
	text-align:center;
}
*/



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

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

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







/* モーダルダイアログ用の定義（未使用） */
#_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;
}