@charset "UTF-8";
/* CSS Document */
html {
font-size:62.5%;/*10px*/
color:#000;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
body{
background: #f8f5f7;
font-size:1.6rem;
line-height:2rem;
color:#3a3441;
}
ul, li {
list-style-type:none;
}
h1, h2, h3, h4, h5, p, div, ul, ol, dl, li,dt,dd,img {
margin:0;
padding:0;
font-size:100%;
}
/*差替*/
.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:#d817a3;
text-decoration:underline;
font-weight:bold;
padding:0 2px;
}
a:visited{
color:#d817a3;
}
a:hover{
color:#8b48a7;
text-decoration:none;
}
a:active{
color:#06eaee;
}
h1{
height:0;
color:#fff;
text-indent:-9999px;
}
/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
/****main************/
body{	
}
.conbox {
width:100%;
margin:0 auto;
padding:0;
clear:both;
}
img {
max-width:100%;
}
.spNo{
display:none;
}
.innerBox{
clear:both;
}
/****header****/
header{
background:#12b2c9;
}
header .conbox {
padding:10px 0;
text-align:right;
}
header ul{
width:80%;
margin:0 auto;
padding:0 ;
display: flex;
flex-wrap: wrap;
}
header ul li {
margin:0 auto ;
float:left;
width:24%;
}
header ul li a{
display:block;
background:#9177b9;
padding:5px;
border-radius:5px;
opacity:1;
}
header ul li a:hover{
background:#f86cc9;
text-decoration:none;
opacity:1.0;
}
header ul li a:active{
background:#f86cc9;
}
header ul li img{
width:100%;
magin:0 auto;
text-align:center;
vertical-align: middle;
}
header ul li.now a{
background:#f86cc9;
opacity:1.0;
}
/****footer****/
footer{
width:100%;
position:relative;
color:#fff;
text-align:center;
font-size:1.2rem;
clear: both;
background: #12b2c9;
}
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:32px;
}
footer .platform {
width:96%;
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 180px;
}
}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
body{	
}
.pcNo{
display: none;
}
#wrapper{
width:100%/*1280px*/;
margin:0 auto;
position: relative;
}
#wrap_conts{
}
.WrapBox{
width:1280px;
margin:0 auto;
}
.conbox {
width:1136px;
margin:0 auto;
padding:0;
clear:both;
}
.innerBox{
clear:both;
}
/****header****/
header{
background:#12b2c9;
border-bottom: solid 1px #fff;
}
header .conbox {
/*width:540px;*/
padding:10px 0;
}
header ul{
width:540px;
margin:0 auto;
padding:0 ;
display: flex;
flex-wrap: wrap;
}
header ul li {
margin:0 auto ;
float:left;
width:108px;
text-align:center;}
header ul li a{
display:block;
background:#9177b9;
padding:5px;
border-radius:5px;
opacity:1;
}
header ul li a:hover{
background:#f86cc9;
text-decoration:none;
opacity:1.0;
}
header ul li a:active{
background:#f86cc9;
}
header ul li img{
width:90%;
magin:0 auto;
vertical-align: middle;
}
header ul li.now a{
background:#f86cc9;
opacity:1.0;
}
/***footer****/
footer{
width:100%;
position:relative;
color:#fff;
text-align:center;
font-size:15px;
clear: both;
background: #12b2c9;
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:40px;
margin-bottom:10px;
}
footer .platform {
width:1080px;
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:1080px;
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 180px;
}
}