@charset "UTF-8";
/* CSS Document */
html {
font-size: 62.5%; /*10px*/
color: #603813;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
scroll-behavior: smooth;
}
body {
font-size: 1.6rem;
line-height: 2.4rem;
background: linear-gradient(180deg, #41ddcf,  #089ddc) fixed;
}
#wrapper {
background: url(../img/repeatBG.png) ;
}
#wrap_conts {
background: #44dbe2;
border:8px solid #fff;
border-top:0;
border-bottom:0;
}
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 {
background: #feac35;
line-height: 200%;
border: 3px solid #fff;
text-decoration: none;
padding: 10px 20px;
color: #fff;
position: relative;
border-radius: 30px;
}
p.btn a:hover {
background: #ff64c5;
border: 3px solid #603813;
color: #fff;
cursor: pointer;
}
p.cau {
color: #FF0004;
}
/****header****/
header {
background: #4978db;
}
header .conbox {
padding: 10px 0;
text-align: right;
}
header ul li a {
display: block;
background: #ff64c5;
padding: 10px;
border-radius: 10px;
}
header ul li a:hover {
background: #feac35;
text-decoration: none;
opacity: 0.9;
}
header ul li a:active {
background: #feac35;
}
header ul li img {
width: 100%;
magin: 0 auto;
text-align: center;
vertical-align: middle;
}
header ul li.now a {
background: #feac35;
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: 10px auto;
}
h4 {
background: url(../img/h4BG.png) no-repeat center center;
background-size: contain;
margin: 10px auto;
}
footer .notice img {
height:16px;
}
/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
body{
background: linear-gradient(180deg, #41ddcf,  #089ddc) fixed;
}
#wrap_conts {
border:none;
}
#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,h3,h4 {
width:100%;
position: relative;
}
.conbox {
width: 100%;
margin: 0 auto;
padding: 0;
clear: both;
}
.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: #4978db;
}
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;
}
footer .platform {
width: 90%;
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 .link {
border-top: 1px solid #fff;
padding-top: 20px;
}
footer .link img {
height: 60px;
}
footer .copyright {
padding: 10px 0 160px;
}
/****backTop************/
#backtop {
width: 100%;
position: fixed;
bottom: 0;
text-align: center;
text-indent: -99999px;
z-index: 2000;
}
#backtop .conbox {
width: 150px;
height: 150px;
padding: 0;
margin:0 auto;
text-align: center;
border: none;
}
#backtop a {
display: block;
	padding-top:100%;
background: url(../img/btnBacktoTop.png) center center no-repeat;
background-size:150px;
}
#backtop a:hover {
background: url(../img/btnBacktoTop_on.png) center center no-repeat;
background-size: 150px;
}
}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
#wrap_conts {
width: 960px;
margin: 0 auto;
}
/****header****/
header ul {
width: /*640px*/480px;
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{
width:800px;
height: 90px;
margin:0 auto;
}
h2 span {
display: block;
height: 90px;
margin: 0 auto;
}
h2 span img {
height: 80px;
}
h3 {
width:800px;
height: 72px;
margin: 0 auto 10px;
}
h4 {
width:800px;
height:60px;
margin: 0 auto 10px;
}
.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: #4978db;
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 {
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: 900px;
margin: 0 auto 30px;
text-align: left;
}
footer .link {
border-top: 1px solid #fff;
padding-top: 20px;
}
footer .link img{
height:60px;
}	
footer .copyright {
padding: 10px 0 120px;
}
/****backTop************/
#backtop {
width: 150px;
height: 150px;
position: fixed;
bottom: 80px;
right:80px;
text-align: right;
text-indent: -99999px;
z-index: 2000;
}
#backtop .conbox {
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto 0;
padding: 0;
border: none;
background: none;
}
#backtop a {
width: 150px;
height: 150px;
display: block;
background: url(../img/btnBacktoTop.png) center center no-repeat;
background-size: 150px;
}
#backtop a:hover {
background: url(../img/btnBacktoTop_on.png) center center no-repeat;
background-size: 150px;

}
}