@charset "utf-8";
@import "html5reset-1.6.1.css";
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
body {
font-family: 'Noto Serif JP',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
color: #000;
font-size: 16px;
height: 100%;
letter-spacing: 0.1em;
}
html{
height: 100%;
}
#wrapper{
width: 100%;
height:100%;
min-height: 100%;
}
a{
text-decoration: none;
display: block;
}
@media (min-width: 1024px) {
a{
transition: 0.5s;
}
}
@media (min-width: 768px) {
br.sp{
display:none;
}
body {
min-width: 1024px;
}
}
@media (max-width: 767px) {
br.pc{
display:none;
}
}
/*---------------------- Loading ------------------------*/
#loading {
width: 100%;
height: 100%;
background: rgba(255,255,255,1.0);
position: fixed;
top: 0;
left: 0;
z-index: 999999;
}
#loading img.loadingLogo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width:200px;
height:auto;
}
#loading #loadingBar {
position: absolute;
top: 50%;
margin-top:60px;
left: 50%;
margin-left: -100px;
width:200px;
text-align: center;
height: 2px;
background-color: #CCCCCC;
}
#loading #loadingBar span {
display: block;
width: 0px;
height: 2px;
background: #000;
}
@media (max-width: 767px){
#loading img.loadingLogo {
width:140px;
height:auto;
margin-top: -80px;
margin-left: -70px;
}
#loading #loadingBar {
margin-left: -70px;
width:140px;
margin-top:35px;
}
}
/*---------------------- Global Navi Button ------------------------*/
#gNaviBtn {
display: block;
top: 0;
right:0;
width: 50px;
height: 50px;
z-index: 102;
text-align: center;
position: fixed;
transition: all 0.5s ease-in-out 0.0s;
}
#gNaviBtn.active {
background-color:transparent;
}
#gNaviBtn span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 2px #FFF;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 10px;
letter-spacing: normal;
}
#gNaviBtn span:nth-child(1) {
top: 14px;
}
#gNaviBtn span:nth-child(2) {
top: 24px;
}
#gNaviBtn span:nth-child(3) {
top: 34px;
}
#gNaviBtn.active span {
border-bottom: solid 2px #000;
}
/* 最初のspanをマイナス45度に */
#gNaviBtn.active span:nth-child(1) {
top: 24px;
left: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
#gNaviBtn.active span:nth-child(2),
#gNaviBtn.active span:nth-child(3) {
top: 24px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
@media (min-width: 1366px) {
#gNaviBtn {
top: 20px;
right:20px;
}
}
@media (max-width: 1365px) and (min-width: 768px) {
#gNaviBtn {
top: calc(3vw - 25px);
right:calc(3vw - 25px);
}
}
@media (max-width: 767px) {
#gNaviBtn span {
border-bottom: solid 2px #000;
}
}
/*---------------------- Global Navi Menu ------------------------*/
#gNaviMenu {
width: 250px;
height: 100%;
background-color: rgba(255,255,255,0.95);
transition: all 0.5s ease-in-out 0.0s;
position: fixed;
z-index: 101;
top: 0;
right: -250px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
padding:50px;
text-align: center;
}
#gNaviMenu.active {
box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
right: 0px;
}
#gNaviMenu ul.mainMenu li a {
text-decoration: none;
color:#000;
display: block;
border-top:1px solid #999;
padding:17px 0 18px;
}
#gNaviMenu ul.mainMenu li:last-child a {
border-bottom:1px solid #999;
}
#gNaviMenu ul.mainMenu li.eng{
font-family: 'Lora', serif;
}
@media (min-width: 768px) {
#gNaviMenu {
width: 300px;
right: -300px;
}
#gNaviMenu .logo img{
width:200px;
height:auto;
margin: 0 0 30px;
}
}
@media (max-width: 767px) {
#gNaviMenu {
padding:20px 20px;
}
#gNaviMenu .logo img{
width:150px;
height:auto;
margin: 0 0 20px;
}
}
@media (min-width: 1025px) {
#gNaviMenu ul.mainMenu li a:hover {
color:#999;
}
}
/*---------------------- Home Button ------------------------*/
@media (min-width: 768px) {
#header .homeBtn{
position: fixed;
left:1%;
top:20px;
width:4%;
z-index: 100;
}
#header .homeBtn img{
width:100%;
height:auto;
}
}
@media (max-width: 767px) {
#header .homeBtn{
background-color: rgba(255,255,255,0.5);
height:50px;
position: fixed;
left:0;
top:0;
width:100%;
text-align:left;
padding:8px 10px 0;
box-sizing: border-box;
z-index: 100;
}
#header .homeBtn img{
height:35px;
width:auto;
}
}
/*---------------------- Link Banner ------------------------*/
#bottomContents.black{
background-color: rgba(0,0,0,0.3);
}
#bottomContents.black .linkBanner{
padding:0;
}
#bottomContents .linkBanner li{
list-style-type: none;
text-align:center;
}
#bottomContents .linkBanner li a{
font-size:0.8em;
color:#FFF;
}
#bottomContents .linkBanner li img{
max-width: 100%;
display: block;
border:1px solid #CCC;
margin:0 auto 15px;
background-color: #FFF;
}
@media (min-width: 1025px) {
#bottomContents .linkBanner li a:hover{
transition: 0.5s;
}
#bottomContents .linkBanner li a:hover img{
background-color: #f0f0f0;
transition: 0.5s;
}
}
@media (min-width: 768px) {
#bottomContents.black{
padding:50px 0 40px;
}
#bottomContents .linkBanner{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding:0 0 4%;
}
#bottomContents .linkBanner li{
margin:0 20px;
}
}
@media (max-width: 767px) {
#bottomContents.black{
padding:40px 0 1px;
}
#bottomContents .linkBanner{
padding:50px 20px 20px;
text-align: center;
}
#bottomContents .linkBanner li{
margin-bottom:30px;
}
#bottomContents .linkBanner li a{
color:#FFF;
}
#bottomContents .linkBanner li img{
margin:0 auto 10px;
}
}
/*---------------------- Footer ------------------------*/
#footer{
text-align:center;
padding:50px 0 30px;
background-color: #333;
}
#footer .link li{
list-style-type: none;
border-right:1px solid #FFF;
padding: 5px 15px;
font-size:0.9em;
}
#footer .link li.eng{
font-family: 'Lora', serif;
font-size: 1em;
}
#footer .link li:last-child{
border-right:none;
}
#footer .link a{
color:#FFF;
}
@media (min-width: 1025px) {
#footer .link a:hover{
text-decoration: underline;
}
}
#footer .fukuskeLogo{
margin:0 0 35px;
}
#footer .sns{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin:0 0 35px;
}
#footer .sns li{
list-style-type: none;
margin:0 15px;
}
#footer .sns a{
background-color: #FFFFFF;
height:60px;
width:60px;
border-radius:50%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#footer .sns a img{
heigt:auto;
}
@media (min-width: 1025px) {
#footer .sns a:hover{
background-color: #c8c8c8;
}
}
#footer .sns a img{
display: block;
}
#footer p.copy{
font-size:0.7em;
color:#FFF;
font-family: 'Lora', serif;
letter-spacing: 0.05em;
}
@media (min-width: 768px) {
#footer .link{
margin-bottom:20px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin:0 0 35px;
}
}
@media (max-width: 767px) {
#footer{
padding:25px 0;
}
#footer .link{
margin:0 0 25px;
}
#footer .link li {
margin: 0 0 10px;
border-right:none;
}
#footer .fukuskeLogo{
margin:0 0 30px;
}
#footer .sns{
margin:0 0 30px;
}
}
/*---------------------- clearfix ------------------------*/
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 display: inline-block;
}
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
}