/*
 * 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 {
	color:#12090a; font-size: 90%; line-height: 160%;
	background-image: url("../img/back_bk2.png"); background-attachment: fixed;
	margin: 0px auto; text-align: center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
nav  {
	background-color: #161414; width: 960px; height: 155px;
	margin: 0px auto; box-shadow: 0 0 10px #000; text-align: center;
}
header  { clear: both; width: 960px; margin: 0px auto; text-align:center; }
main    { clear: both; width: 960px; margin: 0px auto; padding: 0px; text-align: center; }
section { clear: both; width: 950px; margin: 0px; padding: 0px 5px 15px; text-align: left; }
footer  { clear: both; margin: 0px auto; }

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

section h2 {
	color: #000; background-image: url("../img/back_gr2.png");
	margin: 10px 9px 0px ; padding: 8px 10px;
	font-size: 23px; text-align: left; border-radius: 7px;
}
section h3 {
	margin: 0px 9px 15px; padding-top: 10px;
	font-size: 18px; border-bottom: #d34930 4px double;
}
section img { margin: 0px; }

/* ---- id ---- */
#contents, #wrapper { clear: both; margin: 0px auto; padding: 0px; text-align: center; }
#contents { background-color: #fff; width: 960px; margin-top: 0px; box-shadow: 0 0 10px #000; }
#header_content { padding: 0px; width: 960px; height: 715px; }
#nav       { display: flex; }
#nav_left   { padding: 3px 0px 0px 5px; }
#nav_right  { padding: 5px 0px 0px 5px; }
#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; }
#topics, #story, #product, #present { padding-top: 15px; }

/* ---- class ---- */
.closing  { color: #d34930; font-size: 125%; text-decoration: underline; }
.contents { clear: both; width: 940px; margin: 0px 3px; padding: 0; }
.contents_body { clear: both; width: 900px; margin: 0; padding: 10px 20px; text-align: left; }

.nav      { clear: both; margin: 15px 0px 0px; text-align: center; }
.nav ul   { display: flex; height: 22px; }
.nav li   { display: inline-block; height: 22px; list-style: none; }
.nav li a { display: block; height: 22px; }
.nav1, .nav3 { width: 110px; }
.nav2, .nav4 { width: 170px; }
.nav5        { width: 220px; }

.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; width: 853px; height: 564px; margin: 0px auto;
	position:relative; 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: #04bd78; }
.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 10px; }
.product3 ol li:before { content:none; }

/* ---- link ---- */
a:link,a:visited {color: #d34930;}
a:hover,a:active {color: #64ce91; text-decoration: none;}

#topics a:link, #topics a:visited {color: #eb2408;}
#topics a:hover, #topics a:active {color: #e7122f; text-decoration: none;}


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

.green {color: #059944;}




.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: #64ce91; color: #161414; line-height: 50px;
	width: 60px; height: 50px;
	text-decoration: none; text-align: center; transition: all 0.15s;
}
.move-page-top:hover { opacity: 0.85 ; }

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