@charset "UTF-8";
/* CSS Document */
body{
background:url(../img/BG.png)repeat;
}
p.pic,
p.txt{
margin:0 auto 20px;
text-align:center;
}
p.pic img{
border:4px solid #fff;
box-sizing: border-box;

}
header .conbox,
header .innerBox,
#navMenu .conbox,
#navMenu .innerBox,
footer .conbox,
footer .innerBox{
border-radius: none;
border:none;
background: none;
margin:0 auto;
}
p.btn{
margin:10px 0;
}
p.btn a{
font-size:18px;
background: #d817a3;
line-height: 200%;
border:3px solid  #8b48a7;
text-decoration: none;
padding:10px 50px 10px 20px;
border-radius:10px;
color:#fff;
position: relative;
}
p.btn a:hover{
background:#8b48a7;
border:3px solid  #fff;
filter: drop-shadow(0 0 6px #cd5cd0);
color:#fff;
}
p.btn a::after{
content: '';
border: 0;
border-top: solid 4px #fff;
border-right: solid 4px #fff;
display: inline-block;
width: 8px;
height: 8px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%) rotate(45deg);
}
/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
/*----------navMenu----------*/
/*チェックボックス*/
.nav-unshown {
display:none;
}
/*menuアイコン*/
#nav-open {
display: inline-block;
width: 40px;
height: 30px;
vertical-align: middle;
padding:15px 10px;
margin:0 auto;
}
#nav-open span,
#nav-open span:before,
#nav-open span:after {
position: absolute;
height: 3px;
width: 40px;
background: #FFF;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -12px;
}
#nav-open span:after {
bottom: -24px;
}
/*closeBG*/
#nav-close {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#000;
opacity: 0;
transition: .5s ease-in-out;
}
/*content*/
#nav-content {
overflow: auto;
position: fixed;
top: 10px;
left: 0;
z-index: 999999;/**/
width:100%;/**/
height:auto;
transition:.5s ease-in-out;/**/
-webkit-transform: translateY(-120%);
transform: translateY(-120%);/**/
}
/**/
#nav-input:checked ~ #nav-close {
display: block;/**/
opacity: 0.7;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
/**/
#navMenu{
margin:0 auto;
background:#000;
text-align: center;
border-bottom:6px solid #CF1818;
border-image: linear-gradient(to right, #ffa0a1, #f8a0ff ,#a0a8ff, #a0fffe, #a2ffa0,#fffaa0,#ffa0a1) 1;
}
#navMenu nav ul{
width:100%;
margin:0 auto;
}
#navMenu nav ul li{
margin:0;
padding:0;
text-align:center;
border-bottom:6px solid;
background: #000;
border-image: linear-gradient(to right, #ffa0a1, #f8a0ff ,#a0a8ff, #a0fffe, #a2ffa0,#fffaa0,#ffa0a1) 1;

}
#navMenu nav ul li img{
width:auto;
margin: 0;
opacity: 0;
}
#navMenu nav ul li a:link{
display: block;
padding:0;
margin:0;
}
#navMenu nav ul li:hover{
width:100%;
margin:0;
padding:0;
cursor: pointer;
}
#navMenu nav ul li.nav01 a{background:url(../img/nav/navTxt01.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav02 a{background:url(../img/nav/navTxt02.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav03 a{background:url(../img/nav/navTxt03.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav04 a{background:url(../img/nav/navTxt04.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav05 a{background:url(../img/nav/navTxt05.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav06 a{background:url(../img/nav/navTxt06.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav07 a{background:url(../img/nav/navTxt07.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav08 a{background:url(../img/nav/navTxt_08.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav09 a{background:url(../img/nav/navTxt09.png) no-repeat center center;background-size: contain;}

#navMenu nav ul li.nav01 a:hover{background:url(../img/nav/navTxt01_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav02 a:hover{background:url(../img/nav/navTxt02_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav03 a:hover{background:url(../img/nav/navTxt03_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav04 a:hover{background:url(../img/nav/navTxt04_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav05 a:hover{background:url(../img/nav/navTxt05_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav06 a:hover{background:url(../img/nav/navTxt06_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav07 a:hover{background:url(../img/nav/navTxt07_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav08 a:hover{background:url(../img/nav/navTxt_08_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav09 a:hover{background:url(../img/nav/navTxt09_on.png) no-repeat center center;background-size: contain;}
/**/
.conbox{
width:98%;
background:rgba(77,76,85,0.3);
border: 6px solid #000;
margin:10px auto 30px;
box-sizing: border-box;
}
.innerBox{
width:100%;
border: 6px solid #fff;
box-sizing: border-box;
padding-bottom:30px;
}
h2{
width:100%;
text-align: center;
vertical-align: middle;
background: #000;/*#f4db00/*16c69*/;
margin:0 auto;
padding:5px 0 0;
}
h2 img{
width:80%;
}
h3{
width:100%;
text-align: center;
background:url(../img/h3BG.png)no-repeat center top;
background-size:contain;
margin:10px auto 20px;
}
h4{
width:80%;
text-align: center;
background:url(../img/h4BG.png)no-repeat center top;
background-size:contain;
margin:20px auto;
}
p.pic,
p.txt{
width:90%;
}
/*pagaNav*/
nav.pageNav{
width:100%;
margin:0 auto 20px;
background:rgba(77,76,85,0.3);	
}
nav.pageNav ul{
width:90%;
margin:0 auto;
padding:16px 0;
display: flex;
flex-wrap: wrap;
}
nav.pageNav li{
height:24px;
margin:0 auto;
padding:14px 0;
float:left;
text-align:center;
vertical-align: middle;
}
nav.pageNav li a:hover{
filter:drop-shadow(0 0 5px #cd5cd0);
cursor: pointer;
}
nav.pageNav li.now{
background:url(../img/pageNavBG.png) no-repeat center center;
background-size:56px;
}
nav.pageNav li:hover,
nav.pageNav li.now:hover{
background:url(../img/pageNavBG_on.png) no-repeat center center;
background-size:56px;
}
nav.pageNav li img{
height:24px;
}
/****backTop************/
#backtop {
width:100%;
position:fixed;
bottom:0;
text-align:center;
text-indent:-99999px;
z-index:2000;
}
#backtop .conbox{
width:100%;
height:240px;
text-align:center;
margin:20px auto 10px;
padding:80px 0 0 0;
border:none;
background:none;
}
#backtop a{
width:100%;
height:160px;
display:block;
background:url(../img/btnBacktoTop.png) center bottom no-repeat;
background-size:160px;
}
#backtop a:hover{
background:url(../img/btnBacktoTop_on.png) center bottom no-repeat;
background-size:160px;
}

}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
/*----navMenu----------*/
#navMenu{
margin:0 auto;
}
#navMenu .conbox{
width:1396px;/*1268px;*/
height:68px;
margin:20px auto 0;
}
#navMenu #nav-input{
display:none;
}
#navMenu nav{
margin:0 auto 20px;
padding:0;
height:60px;
border-bottom:8px solid #CF1818;
border-image: linear-gradient(to right, #ffa0a1, #f8a0ff ,#a0a8ff, #a0fffe, #a2ffa0,#fffaa0,#ffa0a1) 1;
}
#navMenu nav ul li{
height:60px;
margin:0;
padding:0;
float: left;
}
#navMenu nav ul li img{
margin:0;
padding:0;
}
#navMenu nav ul li a:link{
margin:0;
padding:0;
}

#navMenu nav ul li img:hover{
opacity: 0;
}
#navMenu nav ul li.nav01:hover{background:url(../img/nav/nav01_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav02:hover{background:url(../img/nav/nav02_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav03:hover{background:url(../img/nav/nav03_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav04:hover{background:url(../img/nav/nav04_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav05:hover{background:url(../img/nav/nav05_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav06:hover{background:url(../img/nav/nav06_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav07:hover{background:url(../img/nav/nav07_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav08:hover{background:url(../img/nav/nav_08_on.png) no-repeat center center;background-size: contain;}
#navMenu nav ul li.nav09:hover{background:url(../img/nav/nav09_on.png) no-repeat center center;background-size: contain;}

.conbox{
width:1396px;
background:rgba(77,76,85,0.3);
border: 6px solid #000;
border-radius:0 0 20px 20px;
margin:0 auto 30px;
box-sizing: border-box;
border-top:none;
}
.innerBox{
width:100%;
border: 6px solid #fff;
border-radius: 0 0 16px 16px;
box-sizing: border-box;
padding-bottom:30px;
border-top:none;

}
h2{
width:100%;
text-align: center;
vertical-align: middle;
background:#000;/*#716c69;*/
margin:0 auto;
padding:10px 0 0;
}
h2 img {
height:80px;
}
h3{
width:840px;
text-align: center;
vertical-align: middle;
background:url(../img/h3BG.png)no-repeat center top;
background-size:840px;
margin:20px auto;
}
h4{
width:640px;
text-align: center;
background:url(../img/h4BG.png)no-repeat center top;
background-size: 640px;
margin:20px auto;
}
/*pagaNav*/
nav.pageNav{
width:100%;
margin:0 auto 20px;
background:rgba(77,76,85,0.3);	
}
nav.pageNav ul{
width:1050px;
margin:0 auto;
padding:12px 0;
display: flex;
flex-wrap: wrap;
}
nav.pageNav li{
height:32px;
margin:0 auto;
padding:16px 0;
float:left;
text-align:center;
vertical-align: middle;
}
nav.pageNav li a:hover{
filter:drop-shadow(0 0 5px #cd5cd0);
cursor: pointer;
}
nav.pageNav li.now{
background:url(../img/pageNavBG.png) no-repeat center center;
background-size:60px;
}
nav.pageNav li:hover,
nav.pageNav li.now:hover{
background:url(../img/pageNavBG_on.png) no-repeat center center;
background-size:60px;
}
nav.pageNav li img{
height:32px;
}
/****backTop************/
#backtop {
width:100%;
position:fixed;
bottom:0;
text-align:center;
text-indent:-99999px;
z-index:2000;
}
#backtop .conbox{
width:100%;
height:240px;
text-align:center;
margin:20px auto 10px;
padding:80px 0 0 0;
border:none;
background:none;
}
#backtop a{
width:100%;
height:160px;
display:block;
background:url(../img/btnBacktoTop.png) center bottom no-repeat;
background-size:160px;
}
#backtop a:hover{
background:url(../img/btnBacktoTop_on.png) center bottom no-repeat;
background-size:160px;}
}