@charset "utf-8";
/*---------------------------------
footer
---------------------------------*/
img{
width: 100%;
height: auto;
}
ul,li{
list-style: none;
margin: 0;
}
/*フッター*/
#footer{
padding: 100px 0 50px;
text-align: center;
background: #fff;
position: relative;
font-family: 'DM Sans', sans-serif;
font-size: 0.5rem;
letter-spacing: 0.1em;
}
#footer .footer-logo{
font-weight: bold;
letter-spacing: 0.3em;
margin: 0 0 50px 0;
color: #555;
}
#footer small{
color:#555;
}
.con_footer {
max-width: 1024px;
margin: 0 auto;
text-align: left;
}
.con_footer .box_main .footer_nav_inner {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.con_footer .box_main .footer_nav_inner > ul {
max-width: 300px;
display: flex;
align-content: space-around;
flex-wrap: wrap;
justify-content: space-between;
}
.con_footer .box_main .footer_nav_inner > ul li:nth-child(1) {
width: 30%;
}
.con_footer .box_main .footer_nav_inner > ul li:nth-child(n+2) {
width: 8%;
}
.con_footer .box_main .footer_nav_inner > ul li a:hover {
opacity: 0.5 ;
}
.con_footer .footer_nav .footer_nav_inner {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.con_footer .footer_nav .footer_nav_inner > ul {
max-width: 810px;
display: flex;
align-content: space-around;
flex-wrap: wrap;
justify-content: center;
}
.con_footer .footer_nav .footer_nav_inner > ul li:nth-child(odd) {
border-right: none;
}
.con_footer .footer_nav .footer_nav_inner > ul li a {
font-size: 12px;
padding: 0 10px;
border-right: 1px solid #555;
text-decoration: none;
color: #555;
}
.con_footer .footer_nav .footer_nav_inner > ul li:first-child a {
padding-left: 0;
}
.con_footer .footer_nav .footer_nav_inner > ul li:last-child a {
padding-right: 0;
border-right: 0;
}
.con_footer .footer_nav .footer_nav_inner .support {
margin: 0 auto;
padding: 0;
}
.con_footer .footer_nav .footer_nav_inner .support > ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
width: 100%;
}
.con_footer .footer_nav .footer_nav_inner .support > ul li:first-child {
width: 45px;
margin-right: 20px;
}
.con_footer .footer_nav .footer_nav_inner .support > ul li:last-child {
width: 60px;
}
.con_footer .footer_nav .footer_nav_inner .support > ul li a {
display: block;
}
.copyright {
width: 100%;
padding: 7px 0;
text-align: center;
}
.copyright p {
color: #555;
line-height: 1;
margin: 0;
padding: 0;
}
@media screen and (min-width:768px) and ( max-width:1100px) {
.con_footer {
padding: 0 5%;
}
.con_footer .box_main .footer_nav_inner {
display:initial;
}
.con_footer .box_main .footer_nav_inner > ul {
margin: 2% auto 0;
}
.con_footer .footer_nav .footer_nav_inner {
display:initial;
}
.con_footer .footer_nav .footer_nav_inner > ul {
margin: 2% auto 0;
}
.con_footer .footer_nav .footer_nav_inner .support > ul {
justify-content: center;
}
}
@media only screen and (max-width: 768px) {
.con_footer .box_main {margin: 10px 0;}
.con_footer .box_main .footer_nav_inner > ul {
max-width: 810px;
display: flex;
align-content: space-around;
flex-wrap: wrap;
justify-content: center;
}
.con_footer .box_main .footer_nav_inner > ul li:nth-child(n+2) {
width: 11%;
}
.con_footer .box_main .footer_nav_inner ul li {
padding: 0 10px;
}
.con_footer .box_main .footer_nav_inner > ul li {
margin-bottom: 5px;
line-height: 1.6em;
}
.con_footer .footer_nav .footer_nav_inner > ul li a {
font-size: 0.8rem;
border-right: 0;
}
.con_footer .footer_nav .footer_nav_inner .support > ul {
margin-bottom: 0;
}
.con_footer .footer_nav .footer_nav_inner .support {
margin: 10px auto;
padding: 0;
}
}

/*---------------------------------
ローディング
---------------------------------*/
/*ローディング*/
#loader-bg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background:#999; /*　グレーの背景　*/
z-index: 99999;
}
#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
text-align: center;
color: #fff;
z-index: 999999;
}
/* splash */
#splash {
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999999;
text-align:center;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash-logo{
font-size: 1.8rem;
letter-spacing: 0.3em;
color: #e8c861;
}
@media screen and (max-width:768px) {
#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
text-align: center;
color: #fff;
z-index: 999999;
}
/* splash */
#splash {
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999999;
text-align:center;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash-logo{
font-size: 1.2rem;
letter-spacing: 0.2em;
}
}

.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1.5s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
}
@keyframes bgextendAnimeBase{
from {opacity:0;}
to {opacity:1;}
}
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #e8c861;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}