/* body ################# */
body { 
	background: #000000;
	margin: 0;
	padding: 0;
	color: #FFF;
	font-size: 13px;
}

/* ヘッダーエリア################# */
#header_area {
	position:relative;
}
#header_area img {
	width: 100%;
	vertical-align:top; /* img下に出来る隙間対策 */
}

/* アイコンエリア################# */
#icon_area {
	position:absolute;
	bottom: 10px;
	left: 25px;
}
#icon_area img {
	width:36px;
	height:36px;
	border-radius: 50% 10%;
}
#icon_area a:hover {
    /* border: 3px solid #000; */
    outline: 3px solid #fff;
    outline-offset: -1px;
}

/* メニュー################# */
#menu_area { 
	text-align: center;
	background-color: #222;
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 0px; /* 上端から0pxのところで固定 */
	border-bottom: 1px solid #555;
    z-index:1;
}

.menu_button {
	display: inline-block;
}

.menu_button a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.7em 2em;
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	background-color: #222;
	/* border-radius: 50vh; */
	color: #bbb;
	text-decoration: none;
}

.menu_button a:hover {
	color: #bbb;
	text-decoration: none;
	background-color: #444;
}

/* メインエリア################# */
#main_area {
	display:flex;
}

/* ランキングエリア################# */
#ranking_area {
	display:inline-block;
	background-color:#111;
	width:200px;
	padding-left: 10px;
}


/* ランキングタイトル################# */
#ranking_title {
	width:80%;
	color: #C0C0C0;/*文字色*/
	background: #333333;/*背景色*/
	position: relative;
	margin: 1.0em 1.0em 1.2em 0.0em;
	padding: 0.6em 0em 0.6em 1.6em;
	border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
	font-weight: bold;
}
#ranking_title:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #333333;
	width: 0;
	height: 0;
}

/* ランキングテーブル################# */
#ranking_table {
	table-layout: fixed;
	width:100%;
}

/* ランキングボタン################# */
.ranking_button {
	display: inline-block;
}
.ranking_button a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 0.7em 1em;
	font-size: 11px;
	font-weight: 700;
	background-color: #222;
	/* border-radius: 50vh; */
	color: #bbb;
	text-decoration: none;
}
.ranking_button a:hover {
	color: #333333;
	text-decoration: none;
	background-color: #a0c4d3;
}


.ranking_item {
	border: 2px solid #333;
	pointer-events: none; /* 子のa:hoverと連動させるため */
}

.ranking_item * {
	vertical-align:top;
}
.ranking_item a {
	color: #bbb;
	text-decoration: none;
	pointer-events: auto; /* 親のa:hoverと連動させるため */
}
.ranking_item a:hover {
	color: #FFF;
	text-decoration: underline;
}

.ranking_item:hover {
	color: #FFF;
	text-decoration: underline;
	background-color:#333;
}

.ranking_selected {
  outline: 1px solid #999;
  outline-offset: -1px;
}


.ranking_item_img {
    width:190px;
}

/* 中央エリア################# */
#central_area {
	width:calc(100% - 550px); /* 200+300+10+10x2+10x2 */
	/* height:100px; */
	display:inline-block;
	background-color:#222;
	padding:10px;
}
#central_area h2 {
  position: relative;
  background: #555;
  box-shadow: 0px 0px 0px 5px #555;
  border: dashed 2px #666;
  padding: 0.2em 0.5em;
  color: #fff;
}
#central_area h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #222 #222 #888;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/* 中央記事################# */
.central_content_article {
	border: 1px solid #555;
	padding: 1em;
}
.central_content_article img {
	padding:1em;
    max-width: 90%;
}
#before_progress {
    /* position: absolute;
    top:195px;
    left:0px; */
}
#profile_area {

}
#profile_area .central_content_article a {
    color:ccc;
}
#profile_area .central_content_article a:hover {
    opacity: 0.8;
    text-decoration: none;
}
#profile_area img {
    width:36px;
}
.profile_sns_link a {
    color: #ccc;
    text-decoration: none;
}
.profile_sns_link a:hover {
    color: #777;
    opacity: 0.8;
    text-decoration: none;
}
.profile_sns_link img {
    vertical-align: middle;
    padding-right: 3px;
}
#support_area img {
    width:36px;
}

#inquiry_area img {
    width:36px;
}

/* 右側プロダクトエリア################# */
#product_area {
	width:300px;
	/* height:100px; */
	display:inline-block;
	background-color:#111;
	padding:10px;
}
#product_area h2 {
	font-weight: bold;
	font-size:18px;
}

.product {
	pointer-events: none; /* 子のa:hoverと連動させるため */
}

.product:hover {
	background-color:#333;
	opacity: 0.8;
}

.product img {
	width:100%;
}

.product a {
	color: #bbb;
	text-decoration: none;
	pointer-events: auto; /* 親のa:hoverと連動させるため */
}
.product a:hover {
	color: #FFF;
	text-decoration: underline;
}

.product_introduction_img {
    width:100%;
    max-width: 560px;
}

.central_area_bottom_margin {
    /* margin-bottom: 52px; */
}
.central_area_interval {
    width:100%;
    height: 52px;
}

.right_area_bottom_margin {
    margin-bottom: 3em;
}

.progress_img {
    width:200px;
}

/* フッターエリア################# */
#footer_area {
	position:absolute;
	width:100%;
	height:30px;
	background-color:#222;
	padding-top:1em;
	border-top: 1px solid #555;

}

/* コピーライト################# */
#copyright {
	font-size:11px;
	text-align: center;
}

/* 年齢認証ダイアログエリア################# */
#age_dialog {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #000;
	width:100%;
	height:100%;
    margin: 0 auto;
    text-align: center;
}
#age_dialog_box {
    margin-top: 200px;
    display: inline-block;
    text-align: center;
    background-color: #111;
	width:600px;
    height:300px;
}
#age_dialog_box a {
    margin: 0 auto;
    padding: 1em 4em;
    color: #C8C3BC;
    font-size: 18px;
    font-weight: 700;
    background-color: #35393B;
    border-radius: 50vh;
    text-align: center;
    text-decoration: none;
}

#age_dialog_box a:hover {
    text-decoration: none;
    background-color: #666666;
}

#age_dialog_box h4 {
    margin-bottom: 60px;
}

.age_dialog_interval {
    display: inline-block;
    width:50px;
}

#age_dialog_yes a {
    background-color: #55595B;
}

.hidden {
    display: none !important; 
}

/* ハンバーガーエリア################# */
#hamburger_area {
    display: none;
    z-index: 2;
}
#hamburger_area img {
    width:48px;
    border-radius: 25%;
}
/* media screen################# */
@media screen and (max-width: 480px) {
    /* SPアイコンエリア################# */
    #icon_area {
        display: none; 
    }
    /* SPメニューエリア################# */
    #menu_area {
        display: none; 
    }
    /* SPハンバーガーエリア################# */
    #hamburger_area {
        display: block;
        position: fixed;
        top:10px;
        right:10px;
    }
    /* SPランキングエリア################# */
    #ranking_area {
        background-color: #222;
        width:100%;
    }
    .ranking_item_img {
        width:100%;
    }
    /* SP右側製品エリア################# */
    #product_area {
        display: none;
    }
    #central_area {
        width:90%;
    }
    .central_content_article img {
        padding:1em;
        width: 90%;
    }
    #sp_menu_area {
        display: block;
        position: fixed;
        top:60px;
        right:10px;
        z-index: 1;
        background-color: #444;
        border: solid 1px #888;
    }
    #sp_menu_area a {
        display:block;
        padding: 0.7em 2em;
        width: 150px;
        font-size: 18px;
        font-weight: 700;
        background-color: #222;
        color: #bbb;
        text-decoration: none;
    }
    #sp_menu_area a:hover {
        color: #bbb;
        text-decoration: none;
        background-color: #444;
    }
    .sp_menu_button {
        width: 100%;
        height: 50px;
    }
    .ranking_button a {
        padding: 1.4em 2em;
    }
    #age_dialog_box {
        width:100%;
    }
    #age_dialog_box h4 {
        padding:1em;
    }
    #age_dialog_box a {
        display: block;
        margin-left:3em;
        margin-right:3em;
    }
}