@charset "UTF-8";
/* CSS Document */
html {
font-size: 62.5%; /*10px*/
color: #000;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
scroll-behavior: smooth;
}
body {
font-size: 1.6rem;
line-height: 2rem;
background: #000;
}
ul, li {
list-style-type: none;
}
h1, h2, h3, p, div, ul, ol, dl, li {
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: #4574db;
line-height: 200%;
border: 3px solid #fff;
text-decoration: none;
padding: 10px 30px 10px 40px;
color: #fff;
position: relative;
}
p.btn a:hover {
background: #ff74db;
border: 3px solid #fff;
filter: drop-shadow(0 0 6px #ff74db);
color: #fff;
cursor: pointer;
}
p.btn a::after {
content: '';
border: 0;
border-top: solid 4px #fff;
border-right: solid 4px #fff;
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(45deg);
}
span.cau{
color:#FF0004;
}
header .conbox h1{
height:80px;
text-align: center;
}
header .conbox h1 img{
width:200px;

}
/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
/****main************/
/****header****/
header {
background: #4574db;
border-bottom: solid 1px #fff;
}
header .conbox {
padding: 10px 0;
text-align: right;
}
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;
}
header ul li a {
display: block;
background: #e49ebd;
padding: 10px;
border-radius: 4px;
opacity: 0.8;
}
header ul li a:hover {
background: #f8c675;
text-decoration: none;
opacity: 0.9;
}
header ul li a:active {
background: #cc4580;
}
header ul li img {
width: 100%;
magin: 0 auto;
text-align: center;
vertical-align: middle;
}
header ul li.now a {
background: #cc4580;
opacity: 1.0;
}
/****main*****/
body {
background: #000;
}
.conbox {
width: 100%;
margin: 0 auto;
padding: 0;
clear: both;
}
img {
max-width: 100%;
}
.spNo {
display: none;
}
.innerBox {
width: 100%;
clear: both;
padding: 10px 0;
}
#contentsALL .conbox:nth-child(even) {
background: url(../img/contentsBG.png) repeat center bottom;
background-size: 20px;
background-color: #ffd6ff;
}
#contentsALL .conbox:nth-child(odd) {
background: url(../img/contentsBG.png) repeat center bottom;
background-size: 20px;
background-color: #c4c3ed;
}
h2 {
background-size: contain;
margin: 0 auto;
margin-bottom: 20px;
border-top:10px solid #000;
}
h2 span {
width:100%;
background: url(../img/h2BG.png) no-repeat center top;
display: block;
background-size: contain;
margin: 0 auto;
}
h2 img{
width: 100%;
margin: 0;
padding: 0;
}
h3 {
width: 90%;
border-top: 6px double #4574db;
border-bottom: 6px double #4574db;
margin: 0 auto 20px;
text-align: center;
}

h3 img {
width: 90%;
margin: 0 auto;
padding: 0;
}
h4 {
width:90%;
margin:0 auto;
background: #4574db;
}
h4 img {
width: 100%;
margin: 0;
padding:0;
}
.mVbox{
width:90%;
margin:0 auto;
}	
.movie-wrap {
width:100%;
margin: 0 auto;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/****contsALL****/
#contentsALL p.pic {
width: 80%;
margin: 0 auto 10px;
}
#contentsALL p.txt {
width: 90%;
margin: 0 auto;
}
#contentsALL #contents01 p.pic {
width: 90%;
}
#contentsALL #contents03 p.pic {
width: 96%;
margin: 10px auto 10px;
}
/****footer****/
footer {
width: 100%;
position: relative;
color: #fff;
text-align: center;
font-size: 1.2rem;
clear: both;
background: #4574db;
}
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: 54px;
}
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: left;
}
footer .notice img {
height: 15px;
}
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: 11.25% 0 0 0;
display: block;
background: url(../img/btnBacktoTop.png) center center no-repeat;
background-size: contain;
}
#backtop a:hover {
opacity: 0.7;
}
}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
/****header****/
header {
background: #4574db;
}
header .conbox {
padding: 10px 0;
}
header ul {
width: 720px;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
}
header ul li {
margin: 0 auto;
float: left;
width: 120px;
text-align: center;
}
header ul li a {
display: block;
background: #e49ebd;
padding: 5px 10px;
border-radius: 4px;
opacity: 0.8;
}
header ul li a:hover {
background: #f8c675;
text-decoration: none;
opacity: 0.9;
}
header ul li a:active {
background: #cc4580;
}
header ul li img {
width: 80%;
magin: 0 auto;
text-align: center;
vertical-align: middle;
}
header ul li.now a {
background: #cc4580;
opacity: 1.0;
}
/****main*****/
body {}
.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: 840px;
padding: 20px 0;
margin: 0 auto 20px;
}
/****contsALL****/
#contentsALL .conbox:nth-child(even) {
background: url(../img/contentsBG.png) repeat center bottom;
background-size: 20px;
background-color: #ffd6ff;
}
#contentsALL .conbox:nth-child(odd) {
background: url(../img/contentsBG.png) repeat center bottom;
background-size: 20px;
background-color: #c4c3ed;
}
h2 {
background-size: contain;
margin: 0 auto;
margin-bottom: 20px;
border-top:10px solid #000;
}
h2 span {
background: url(../img/h2BG.png) no-repeat center top;
display: block;
width: 800px;
background-size: contain;
margin: 0 auto;
}
h2 img {
width: 100%;
margin: 0;
padding: 0;
}
h3 {
width: 840px;
margin: 0 auto 10px;
border-top: 6px double #4574db;
border-bottom: 6px double #4574db;
}
h3 img ,h4 img {
width: 80%;
margin: 0;
padding: 0;
}
h4 {
width: 840px;
margin:0 auto 20px;
background: #4574db;
}
.movie-wrap {
width: 840px;
margin: 0 auto;
position: relative;
padding-bottom: 56.25%;
height:0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/***footer****/
footer {
width: 100%;
position: relative;
color: #fff;
text-align: center;
font-size: 15px;
clear: both;
background: #4574db;
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: 64px;
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: left;
}
footer .notice img {
height: 15px;
}
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 top no-repeat;
background-size: 800px;
}
#backtop a:hover {
opacity: 0.7;
}
}