/*
 * Matthew teacher 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: #12090a;
	background-attachment: fixed; background-repeat: repeat-x;
	margin: 0px auto; padding: 0px;
	font-size: 90%; line-height: 160%; text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
header, main, section, footer { clear: both; }
header, main, section { width: 960px; }
header, main, footer  { margin: 0px auto; }

main    { padding: 0px; text-align: center; }
section { margin: 0px; padding: 0px 5px 15px; text-align: left; }

/* ---- skeleton---- */
footer p { font-size: 85%; padding: 10px 0px 20px; }
main p   { padding: 5px 0px 15px; }
section h2 {
	background-image: url("../img/back_h2.png"); color: #35860d;
	background-repeat: no-repeat; margin: 0px 0px 10px; padding: 8px 20px;
	font-size: 23px; text-align: left; }
section h3 {
	margin: 0px 9px 15px; padding-top: 10px;
	font-size: 18px; border-bottom: #f0496f 4px double; }
section img { margin: 0px; }

/* ---- id ---- */
#contents { display: block; margin: 0px auto; text-align: center;
	background-color: transparent; width: 960px; }
#header_content { padding: 10px 0px 0px; width: 960px; height: 930px; }
#nav {
	background-image: url("../img/back_nav00.png"); background-repeat: no-repeat;
	height: 316px; padding: 0px; }
#nav img  { padding: 0; margin: 0; }
#nav_left {
	float: left; display: block; width: 440px; height: 200px;
	margin: 0; padding: 60px 0px 0px; }
#nav_right {
	float: left; display: block; width: 510px; height: 170px;
	margin: 0; padding: 71px 0px 0px; }
#product li { margin-left: 15px; }
#product, #present { padding-top: 15px;}
#sns        { display: block; margin: 30px auto; text-align: center; position:relative; }
#sns li     { margin: 2px 0px; padding: 3px 10px; list-style-type: none; }

/* ---- class ---- */
.closing { font-size: 125%; text-decoration: underline; color: #d34930; }
.green   {color: #059944;}
.lity-hide { width: 880px; }

.contents { clear: both; width: 920px; padding: 0px 0px 15px; margin: 0px 3px; }
.contents_head, .contents_headr, .contents_foot {
	background-image: url("../img/back_con00.png"); background-repeat: no-repeat;
	clear: both; width: 960px; height: 35px;
	margin: 0; padding: 0; text-align: left; }
.contents_headr {
	background-image: url("../img/back_con03.png"); height: 35px; }
.contents_foot  {
	background-image: url("../img/back_con02.png"); height: 36px; }
.contents_body  {
	clear: both; width: 960px;
	background-image: url("../img/back_con01.png"); background-repeat: repeat-y;
	margin: 0; padding: 0px 20px 10px; text-align: left; }

.nav { clear: both; margin: 15px 0px 0px; padding: 0; text-align: left; }
.nav ul { margin: 0; padding: 0; height: 37px; }
.nav li {
	float: left; position: relative; display: inline; height: 37px;
	margin: 0px; padding: 0px;
	list-style: none; }
.navr ul { margin: 0; padding: 0; height: 54px; }
.navr li {
	float: left; position: relative; display: inline; height: 54px;
	margin: 0px; padding: 0px;
	list-style: none; }
.nav li a  { display: block; height: 37px; margin: 0; padding: 0; }
.navr li a { display: block; height: 37px; margin: 0; padding: 0; }
.nav1, .nav3, .nav14 { width: 105px; }
.nav2, .nav4         { width: 170px; }
.nav5, .nav15        { width: 200px; }
.nav6                { width: 300px; }
.nav11               { width: 270px; }
.nav12               { width: 110px; }
.nav13               { width: 230px; }

.page-top   { margin: 0; padding: 0; display: none; }
.page-top p { margin: 0; padding: 0; position: fixed; right: 16px; bottom: 16px; }
.move-page-top {
	display: block; background-image: url("../img/back_top.png"); color: #fff;
	width: 60px; height: 50px; line-height: 50px; text-decoration: none;
	text-align: center;
	transition: all 0.15s; }
.move-page-top:hover { opacity: 0.85 ; }

.product_left  { float: left; width: 260px; margin: 0; padding: 0; }
.product_right { float: left; width: 630px; margin: 0; padding: 3px; }
.product_right ul { list-style-type: none; }

.pv {
	display: block; margin: 0px auto; text-align: center; position:relative;
	background-color: #000; width: 853px; height: 480px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.80); }
.small { font-size: 85%; color: #444; }

.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; }

.topics li { margin-left: 0px; padding: 5px 0px; list-style: none; border-bottom: #039a62 2px dotted; }
.topics li:before { content:"▶ "; color: #7cd900; }
.product2 li:before { content:"▶ "; color: #04bd78; }
.product3 li:before { content:"▶ "; color: #78bd04; }
.product4 li:before { content:"▶ "; color: #de9101; }
.product3 ol { display: flex; flex-wrap: wrap; gap: 0px 20px; }
.product3 ol li:before { content: none; }

/* ---- link ---- */
a:link,a:visited { color: #f0496f; }
a:hover,a:active { color: #b41338; }

#topics a:link, #topics a:visited { color: #f0496f; }
#topics a:hover, #topics a:active { color: #ed5d1e; }

.page-top a:link,.page-top a:visited { color: #161414; text-decoration: none; }
.page-top a:hover,.page-top a:active { color: #fff; text-decoration: none; }

#sns .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; }