@charset "UTF-8";
/* CSS Document */
html {
font-size: 62.5%; /*10px*/
color: #fff;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
body {
font-size: 1.6rem;
line-height: 2.4rem;
background: #000;
background: linear-gradient(180deg, #c6d9d6, #6a89a3, #5f6f99, #7b2265) fixed;
}
#wrapper {
background: url(../img/repeat.png);
}
#wrap_conts {
background: #000;
filter:drop-shadow(0 0 2px #000);
}
ul, li {
list-style-type: none;
}
h1, h2, h3, h4, p, div, ul, ol, dl, li, dt , dd {
margin: 0;
padding: 0;
}
/*差替*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
img {
max-width: 100%;
}
a {
cursor: pointer;
}
a:link {
color: #01b2ae;
text-decoration: none;
font-weight: bold;
padding: 0 2px;
}
a:visited {
color: #01b2ae;
}
a:hover {
color: #f39800;
text-decoration: underline;
}
a:active {
color: #f39800;
}
/*調整*/
p.btn {
width: 100%;
margin: 10px 0 20px;
}
p.btn a {
font-size: 18px;
background: #fff;
line-height: 200%;
border: 1px solid #fff;
text-decoration: none;
padding: 10px 30px;
color: #000;
position: relative;
border-radius: 30px;
}
p.btn a:hover {
background: #ff74db;
border: 1px solid #333;
filter: drop-shadow(0 0 6px #ff74db);
color: #fff;
cursor: pointer;
}
/*
p.btn a::after {
content: '';
border: 0;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
display: inline-block;
width: 12px;
height: 12px;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%) rotate(45deg);
}*/
p.cau {
width:60%;
display: block;
padding:10px 20px;
color:#fff;
background: #FF0004;
border-radius: 20px;
}
/****header****/
header {
background: #701919;
border-bottom: solid 1px #fff;
}
header .conbox {
padding: 10px 0;
text-align: right;
}
header ul li a {
display: block;
background: #6a14d1;
padding: 10px;
border-radius: 4px;
opacity: 0.8;
}
header ul li a:hover {
background: #c82090;
text-decoration: none;
opacity: 0.9;
}
header ul li a:active {
background: #c82090;
}
header ul li img {
width: 100%;
magin: 0 auto;
text-align: center;
vertical-align: middle;
}
header ul li.now a {
background: #c82090;
opacity: 1.0;
}
h2 {
background: url(../img/h2BG.png) no-repeat center center;
background-size: contain;
padding: 0;
}
h3 {
background: url(../img/h3BG.png) no-repeat center center;
background-size: contain;
margin: 20px auto;
}
h2 img, h3 img, h4 img{
max-width: 100%;
}
/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
body{
background:#701919;
}
#wrap_conts {
width: 100%;
margin: 0 auto;
}
header ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
}
header ul li {
margin: 0 auto;
float: left;
width: 18%;
text-align: center;
}
/****main*****/
h2 {
height: 72px;
}
h2 span {
display: block;
width: auto;
margin: 0 auto;
text-align: center;
}
h2 span img {
height: 48px;
margin: 12px 0;
}
.conbox {
width: 100%;
margin: 0 auto;
padding: 0;
clear: both;
}
img {
max-width: 100%;
}
.spNo {
display: none;
}
.innerBox {
width: 100%;
clear: both;
padding-bottom: 20px;
}
/****footer****/
footer {
width: 100%;
position: relative;
color: #fff;
text-align: center;
font-size: 1.2rem;
clear: both;
background: #701919;
}
footer .conbox {
width: 100%;
padding: 0;
}
footer .conbox .innerBox {
width: 100%;
margin: 0 auto;
position: relative;
display: inline-block;
padding: 0;
}
footer .platform li img {
height: 80px;
}
footer .platform {
width: 100%;
margin: 20px auto;
padding: 0;
display: flex;
flex-wrap: wrap;
}
footer .platform li {
margin: 0 auto;
float: left;
text-align: center;
}
footer .notice {
width: 90%;
margin: 0 auto 30px;
text-align: center;
}
footer .link {
border-top: 1px solid #fff;
padding-top: 20px;
}
footer .link img {
width: 240px;
}
footer .copyright {
padding: 10px 0 120px;
}
/****backTop************/
#backtop {
width: 100%;
position: fixed;
bottom: 0;
text-align: center;
text-indent: -99999px;
z-index: 2000;
background: #000;
}
#backtop .conbox {
width: 100%;
height: auto;
padding: 0;
text-align: center;
border: none;
background: none;
}
#backtop a {
width: 100%;
padding: 15% 0 0 0;
display: block;
background: url(../img/btnBacktoTop.png) center center no-repeat;
background-size:60%;
}
#backtop a:hover {
opacity: 0.7;
}
}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
#wrap_conts {
width: 960px;
margin: 0 auto;
}
/****header****/
header ul {
width: /*640px*/320px;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
}
header ul li {
margin: 0 auto;
float: left;
width: 100px;
text-align: center;
}
/****main*****/
h2 {
padding: 10px 0;
height: 96px;
}
h2 span {
display: block;
height: 64px;
margin: 16px auto;
}
h2 span img {
height: 64px;
}
h3 {
height: 84px;
line-height: 84px;
margin: 0 auto 20px;
}
.pcNo {
display: none;
}
#wrapper {
width: 100%;
margin: 0 auto;
position: relative;
}
.conbox {
margin: 0 auto;
padding: 0;
clear: both;
text-align: center;
}
.innerBox {
clear: both;
width: 960px;
margin: 0 auto 20px;
}
/***footer****/
footer {
width: 100%;
position: relative;
color: #fff;
text-align: center;
font-size: 15px;
clear: both;
background: #701919;
line-height: 150%;
}
footer .conbox {
width: 100%;
padding: 0;
}
footer .conbox .innerBox {
width: 100%;
margin: 0 auto;
position: relative;
display: inline-block;
padding: 0;
}
footer .platform li img {
height: 80px;
margin-bottom: 10px;
}
footer .platform {
width: 800px;
margin: 40px auto 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
footer .platform li {
margin: 0 auto;
float: left;
text-align: center;
}
footer .notice {
width: 800px;
margin: 0 auto 30px;
text-align: center;
}
footer .link {
border-top: 1px solid #fff;
padding-top: 20px;
}
footer .link img {
width: 240px;
}
footer .copyright {
padding: 10px 0 120px;
}
/****backTop************/
#backtop {
width: 100%;
height: 90px;
position: fixed;
bottom: 0;
text-align: right;
text-indent: -99999px;
z-index: 2000;
background: #000;
}
#backtop .conbox {
width: 800px;
height: 90px;
text-align: center;
margin: 0 auto 0;
padding: 0;
border: none;
background: none;
}
#backtop a {
width: 100%;
height: 90px;
display: block;
background: url(../img/btnBacktoTop.png) center center no-repeat;
background-size: 320px;
}
#backtop a:hover {
background: url(../img/btnBacktoTop_on.png) center center no-repeat;
background-size: 320px;
}
}