/*
 * BOKU tp ALICE to SEKAI no OWARI STYLE-SHEET for PC 
 * Copyright(c) 2015 Cosmic Ray,Inc. All Rights Reserved.
 * http://www.cosmicray.co.jp/
 */

/* ---- general ---- */
*    { margin: 0; padding: 0; border: 0; }
html { scroll-behavior: smooth; }
body {
	background-image: url("../img/back.png"); color:#111112; font-size: 90%; line-height: 160%;
	margin: 0px auto; text-align: center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
header  { clear: both; margin: 0px auto 25px; width: 960px; }
main    { clear: both; /* margin: 0px auto;*/margin: 20px 0px 15px; padding: 0px; text-align: center; background-color: #fff; }
section { clear: both; margin: 0px; padding: 0px 5px 15px; width: 960px; text-align: left; }
footer  { margin: 0px auto; }

/* ---- skeleton---- */
footer p { font-size: 85%; padding: 10px 0px 20px; }
main p   { padding: 5px 0px 15px; }

section h2 {
	background-image: url("../img/cap_bg00.png"); background-repeat: repeat-y; text-align: left;
	margin: 3px 9px 5px; padding: 3px 0px 0px 3px; }
section h3 { text-align: center; padding-top: 10px; font-size: 15px; }
section h4 { text-align: left; margin-bottom: 8px; }

section img {margin: 0px;}

/* ---- id ---- */
#contents, #wrapper { clear: both; margin: 0px auto; padding: 0px auto; text-align: center; }
#contents { background-color: #fff; width: 970px; margin-top: 51px; box-shadow: 0 0 10px #000; }

#chara, #news, #story, #product, #present { padding-top: 55px; }
#fixed { position: fixed; top: 0; width: 100%; z-index: 1000; }
#header_content { padding: 15px 0px 0px; width: 960px; height: 540px; }
#news li    { margin-left: 15px; padding-bottom: 9px; list-style-image: url("../img/mrk_li02.png"); }
#product li { margin-left: 25px; }
#sns        { display: block; margin: 30px auto; text-align: center; position:relative; }
#sns li     { margin: 2px 0px; padding: 3px 10px; list-style-type: none; }

/* ---- class ---- */
.chara_left  { float: left; width: 165px; height: 165px; margin: 0px; padding: 0px; }
.chara_right { float: left; width: 730px; margin: 0; padding: 3px; }
.chara1 h4 { color: #267ca9; }
.chara2 h4 { color: #f75d99; }
.chara3 h4 { color: #60ee2c; }
.chara4 h4 { color: #ffcb03; }
.closing { font-size: 125%; text-decoration: underline; }
.contents      { float: left; width:956px; padding: 0; margin: 0px 3px; }
.contents_head {
	clear: both; background-image: url("../img/frm_top.png"); background-repeat: no-repeat;
	margin: 0px; padding: 0px; width:956px; height: 35px; text-align: center; }
.contents_body {
	clear: both; background-image: url("../img/frm_mid.png"); background-repeat: repeat-y;
	margin: 0px; padding: 10px 20px; width:920px; text-align: left; }
.contents_foot {
	clear: both; background-image: url("../img/frm_btm.png"); background-repeat: no-repeat;
	margin: 0px; padding: 0px; width:956px; height: 35px; }

.nav {
	clear: both; display: block; background-color: #fff; box-shadow: 0 0 10px #666;
	margin: 0px; padding: 0px ; text-align: center; }
.nav ul { margin: 0px; padding: 0px; height: 52px; }
.nav li {
	float: left; position: relative; display: inline; height: 50px;
	margin: 0px; padding: 0px; list-style: none; border: #fff solid 1px; }

.nav1, .nav3, .nav6 { width: 110px; }
.nav2               { width: 235px; }
.nav4, .nav5        { width: 190px; }

.product_left  { float: left; width: 254px; height: 510px; margin: 0px; padding: 0px; }
.product_right { float: left; width: 658px; margin: 0px; padding: 3px; }
.product1 li   { list-style-image: url("../img/mrk_li04.png"); }
.product2 li   { list-style-image: url("../img/mrk_li05.png"); }
.product3 li   { list-style-image: url("../img/mrk_li03.png"); }
.product4 li   { list-style-image: url("../img/mrk_li01.png"); }
.product3 ol   { display: flex; flex-wrap: wrap; gap: 0px 10px; }
.product3 ol li { list-style-image: none; list-style: decimal; }
.pv {
	display: block; margin: 0px auto; width: 853px; height: 564px; position:relative;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.80); }
.right { clear: both; font-size: 80%; text-align: right; margin: 0px; }
.small {font-size: 85%;}
.sns    { display: flex; gap: 0px 20px;  justify-content: center; }
.sns li {display: inline-block; width: 50px; height: 58px; border-radius: 7px;}
.sns_fb { background-color: #4267b2; }
.sns_hb { background-color: #00a4de; }
.sns_ln { background-color: #00b833; }
.sns_tw { background-color: #020202; }

/* ---- link ---- */
a:link,a:visited { color: #e73679; }
a:hover,a:active { color: #f65a95; text-decoration: none; }

.nav li a { display: block; margin: 0px; padding: 0px; height: 50px; }
.nav1 a:hover,.nav2 a:hover,.nav3 a:hover,.nav4 a:hover,.nav5 a:hover,.nav6 a:hover {
	background-repeat: no-repeat; background-position: 50% 0%; }
.nav1 a:hover  { background-image: url("../img/nav_bg01.png"); }
.nav2 a:hover  { background-image: url("../img/nav_bg02.png"); }
.nav3 a:hover  { background-image: url("../img/nav_bg03.png"); }
.nav4 a:hover  { background-image: url("../img/nav_bg04.png"); }
.nav5 a:hover  { background-image: url("../img/nav_bg05.png"); }
.nav6 a:hover  { background-image: url("../img/nav_bg06.png"); }
.right a:hover { position: relative; top: 1px; left: 1px; }

#sns a  { display: block; width: 50px; height: 50px; padding:15px 0px; font-weight: bold; color: #fff; text-decoration: none;
	font-family: sans-serif; font-size: 20px; }