@charset "utf-8";
/* CSS Document */

/*------------------------
ローディング
------------------------*/
#loading{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #eeeeee;
/*background-color: #f0faff;*/
overflow: hidden;
z-index: 99999;
}
#loading::before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url(../images/loading.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100px auto;
}
.first.animate #loading{
animation: loadingEndFirst 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.animate #loading{
animation: loadingEnd 500ms linear forwards;
}

@keyframes loadingEndFirst{
0%{
bottom: 0;
visibility: visible;
opacity: 1;
}
99%{
visibility: visible;
opacity: 1;
}
100%{
bottom: 100%;
visibility: hidden;
opacity: 0;
z-index: -1;
}
}
@keyframes loadingEnd{
0%{
visibility: visible;
opacity: 1;
}
100%{
visibility: hidden;
opacity: 0;
z-index: -1;
}
}
/*------------------------
／ローディング
------------------------*/





#stickyContainer{
overflow: clip;
}





/*------------------------
ヘッダー
------------------------*/
header{
display: flex;
justify-content: space-between;
align-items: center;
/*position: sticky;*/
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
transition: background 500ms linear, backdrop-filter 500ms linear;
z-index: 100;
}
header.sticky{
background-color: rgba(255,255,255,0.85);
backdrop-filter: blur(10px);
}
#headerWrap{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: calc(100% - 140px);
height: 110px;
padding: 0 0 0 30px;
z-index: 1;
}
#headerLogo{
display: flex;
align-items: center;
max-width: 240px;
height: 100%;
}
#headerLogo a{
display: flex;
align-items: center;
}
nav.pc{
height: 100%;
}
nav.pc ul{
display: flex;
height: 100%;
}
nav.pc ul li{
height: 100%;
}
nav.pc ul li a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
padding: 0 35px;
color: #111111;
font-size: 0.875rem;
text-decoration: none;
letter-spacing: 0.1em;
text-indent: 0.1em;
transition: color 200ms linear;
}
nav.pc ul li a:hover{
color: #999999;
}
nav.pc ul li a::before{
content: '';
display: block;
width: 4px;
height: 4px;
position: absolute;
left: 50%;
bottom: 30px;
transform: translate(-50%, 50%);
background-color: #005175;
border-radius: 50%;
opacity: 0;
transition: opacity 100ms linear;
}
nav.pc ul li a:hover::before{
opacity: 1;
}
nav.pc ul li.current a::before{
width: 10px;
height: 10px;
opacity: 1;
}
#menuBtn{
position: relative;
width: 140px;
height: 110px;
z-index: 3;
}
#menuBtn a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
text-decoration: none;
overflow: hidden;
cursor: pointer;
text-indent: 100vw;
}
#menuBtn a::before{
content: '';
display: block;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, -5px);
width: 50px;
height: 1px;
background-color: #111111;
transition: transform 300ms linear;
}
#menuBtn a::after{
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 5px);
width: 50px;
height: 1px;
background-color: #111111;
transition: transform 300ms linear;
}
#menuBtn.show a::before{
transform: translate(-50%, 1px) rotate(15deg);
}
#menuBtn.show a::after{
transform: translate(-50%, 0) rotate(-15deg);
}
#menuWrap{
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #ffffff;
visibility: hidden;
opacity: 0;
z-index: -1;
transition: opacity 200ms linear;
animation: menuClose 200ms linear forwards;
}
#menuWrap.show{
/*visibility: visible;
opacity: 1;
z-index: 2;*/
animation: menuShow 200ms linear forwards;
}
#menuWrap::before{
content: '';
display: block;
width: 30%;
height: 100%;
background-image: url(../images/menu_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
nav.sp{
width: 70%;
padding: calc(5vh + 110px) 8% 8%;
}
#menuWrap.show nav.sp ul li{
opacity: 0;
animation: menuListShow 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 200ms;
}
#menuWrap.show nav.sp ul li:nth-child(2){
animation-delay: 250ms;
}
#menuWrap.show nav.sp ul li:nth-child(3){
animation-delay: 300ms;
}
#menuWrap.show nav.sp ul li:nth-child(4){
animation-delay: 350ms;
}
#menuWrap.show nav.sp ul li:nth-child(5){
animation-delay: 400ms;
}
nav.sp ul li a{
display: block;
color: #111111;
font-size: 1.125rem;
text-decoration: none;
letter-spacing: 0.1em;
text-indent: 0.1em;
text-align: right;
padding: 0.6em 0;
position: relative;
transition: color 200ms linear;
}
nav.sp ul li a:hover{
color: #999999;
}
nav.sp ul li a::before{
content: '';
display: block;
width: 4px;
height: 4px;
position: absolute;
right: -30px;
top: 50%;
transform: translate(-50%, -50%);
background-color: #005175;
border-radius: 50%;
opacity: 0;
transition: opacity 100ms linear;
}
nav.sp ul li a:hover::before{
opacity: 1;
}
nav.sp ul li.current a::before{
width: 10px;
height: 10px;
opacity: 1;
}

header.home{
align-items: flex-start;
}
header.home #headerWrap{
height: 230px;
padding-left: 60px;
align-items: flex-start;
transition: height 500ms cubic-bezier(0.22, 1, 0.36, 1), padding 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
header.home #headerLogo{
max-width: 300px;
transition: max-width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
header.home #headerLogo a{
transform: translateY(50%);
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
header.home nav.pc{
height: 110px;
}
header.home.sticky{
}
header.home.sticky #headerWrap{
height: 110px;
padding-left: 30px;
}
header.home.sticky #headerLogo{
max-width: 240px;
}
header.home.sticky #headerLogo a{
transform: none;
}

@keyframes menuShow{
0%{
visibility: hidden;
opacity: 0;
z-index: -1;
}
100%{
visibility: visible;
opacity: 1;
z-index: 2;
}
}
@keyframes menuClose{
0%{
visibility: visible;
opacity: 1;
z-index: 2;
}
99%{
visibility: visible;
z-index: 2;
}
100%{
visibility: hidden;
opacity: 0;
z-index: -1;
}
}
@keyframes menuListShow{
0%{
opacity: 0;
transform: translateY(-20px);
}
100%{
opacity: 1;
transform: none;
}
}





@media screen and (max-width: 999px){
#headerWrap{
width: calc(100% - 100px);
height: 90px;
padding: 0 0 0 20px;
}
nav.pc{
display: none;
}
#menuBtn{
width: 100px;
height: 90px;
}
#menuWrap{
display: block;
padding-top: 90px;
padding-bottom: 50%;
}
#menuWrap::before{
width: 100%;
height: auto;
position: absolute;
left: 0;
bottom:0;
padding-top: 50%;
background-image: url(../images/menu_bg_sp.jpg);
}
nav.sp{
width: auto;
height: 100%;
padding: 0 10% 10%;
overflow-y: scroll;
}
nav.sp ul li a::before{
right: -20px;
}

header.home{
}
header.home #headerWrap{
height: 180px;
padding-left: 20px;
}
header.home #headerLogo{
max-width: 300px;
}
header.home nav.pc{
height: 90px;
}
header.home.sticky{
}
header.home.sticky #headerWrap{
height: 90px;
padding-left: 20px;
}
header.home.sticky #headerLogo{
max-width: 240px;
}
}/*999*/
/*------------------------
／ヘッダー
------------------------*/





/*------------------------
フッター
------------------------*/
footer{
position: relative;
padding: 12.5% 0 0;
background-color: #ffffff;
z-index: 99;
}
#footerContact{
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 6%;
}
#footerContact p{
width: 100%;
max-width: 800px;
}
#footerContact p a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 1px solid #005175;
text-decoration: none;
font-size: 1.25rem;
padding: 5% 55px 5% 10px;
transition: background 200ms linear;
}
#footerContact p a:hover{
/*background-color: #eefcff;*/
background-color: #eeeeee;
}
#footerContact p a::before{
content: '';
display: block;
width: 30px;
height: 30px;
background-image: url(../images/icon_contact.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-right: 15px;
}
#footerContact p a::after{
content: '';
display: block;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
background-image: url(../images/arrow_blue.png);
background-repeat: repeat-x;
background-position: left center;
background-size: 100% auto;
transition: background 300ms cubic-bezier(0.45, 0, 0.55, 1);
}
#footerContact p a:hover::after{
background-position: left 20px center;
}
#footerBox{
position: relative;
background-color: #f6f6f6;
z-index: 1;
}
#footerFlowTxt{
overflow: hidden;
position: absolute;
top: -0.2vw;
left: 0;
right: 0;
z-index: -1;
}
#footerFlowTxt figure{
width: 440vw;
display: flex;
white-space: nowrap;
animation: txtFlow 50s linear infinite;
}
#footerFlowTxt figure span{
display: block;
width: 220vw;
padding: 0 10vw;
}
#footerContent{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 16vw 5% 4%;
}
#footerLogo{
max-width: 240px;
}
#footerAddress .txt{
font-size: 0.75rem;
margin-top: 0.5em;
}
#footerAddress .txt a{
text-decoration: none;
}
#copy{
font-weight: 300;
font-size: 0.6875rem;
text-align: right;
}
#pagetop{
position: absolute;
bottom: calc(100% - 80px);
right: 6%;
}
#pagetop a{
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
font-size: 0.6875rem;
font-weight: 500;
line-height: 100%;
color: #111111;
text-decoration: none;
letter-spacing: 0.2em;
width: 40px;
height: 125px;
padding: 0 10px 5px 0;
transition: height 300ms cubic-bezier(0.45, 0, 0.55, 1), color 200ms linear;
}
#pagetop a:hover{
color: #999999;
height: 135px;
}
#pagetop a::before{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
width: 1px;
background-color: #111111;
}
#pagetop a::after{
content: '';
display: block;
position: absolute;
top: 0;
left: 10px;
width: 1px;
height: 30px;
background-color: #111111;
transform-origin: left top;
transform: rotate(-45deg);
}
#pagetop a span{
writing-mode: vertical-rl;
display: block;
}

@keyframes txtFlow{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-50%);
}
}





@media screen and (max-width: 999px){
footer{
padding: 20% 0 0;
}
#footerContact{
padding-bottom: 70px;
padding-left: 20px;
padding-right: 20px;
}
#footerContact p a{
font-size: min(5.5vw, 1.25rem);
padding: 10% 55px 10% 10px;
}
#footerContact p a:hover{
background-color: #f6f6f6;
}
#footerContact p a::after{
right: 5%;
}
#footerFlowTxt figure{
width: 600vw;
}
#footerFlowTxt figure span{
width: 300vw;
}
#footerContent{
display: block;
padding: 100px 20px 10%;
}
#copy{
margin-top: 50px;
}
#pagetop{
position: absolute;
right: 20px;
}
#pagetop a{
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
font-size: 0.6875rem;
line-height: 100%;
color: #111111;
text-decoration: none;
letter-spacing: 0.2em;
width: 40px;
height: 125px;
padding: 0 10px 5px 0;
transition: height 300ms cubic-bezier(0.45, 0, 0.55, 1), color 200ms linear;
}
#pagetop a:hover{
color: #999999;
height: 135px;
}
#pagetop a::before{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
width: 1px;
background-color: #111111;
}
#pagetop a::after{
content: '';
display: block;
position: absolute;
top: 0;
left: 10px;
width: 1px;
height: 30px;
background-color: #111111;
transform-origin: left top;
transform: rotate(-45deg);
}
#pagetop a span{
writing-mode: vertical-rl;
display: block;
}
}/*999*/
/*------------------------
／フッター
------------------------*/



.area{
padding-top: 110px;
}
#homeArea.area{
padding-top: 230px;
}

@media screen and (max-width: 999px){
.area{
padding-top: 90px;
}
#homeArea.area{
padding-top: 180px;
}
}/*999*/





.arrow a{
display: flex;
align-items: center;
position: relative;
color: #111111;
text-decoration: none;
font-size: 0.875rem;
transition: color 200ms linear;
line-height: 1.4;
}
.arrow a:hover{
color: #999999;
}
.arrow a::before{
content: '';
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #005175;
margin-right: 15px;
transition: background 200ms linear;
}
.arrow a:hover::before{
/*background-color: #eefcff;*/
background-color: #eeeeee;
}
.arrow a::after{
content: '';
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
background-image: url(../images/arrow_blue.png);
background-repeat: repeat-x;
background-position: left center;
background-size: 100% auto;
transition: background 300ms cubic-bezier(0.45, 0, 0.55, 1);
}
.arrow a:hover::after{
background-position: left 20px center;
}





#pageTitle{
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
height: 35vw;
padding: 0 20px 4%;
}
#pageTitle h1{
position: relative;
width: 100%;
max-width: 1000px;
color: #ffffff;
z-index: 2;
}
#pageTitle h1 span{
display: block;
font-size: 4.5rem;
line-height: 1.2;
font-weight: 200;
letter-spacing: 0.075em;
}
#pageTitle h1 small{
display: block;
font-size: 0.875rem;
letter-spacing: 0.15em;
}
#pageTitle figure{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
#pageTitle figure::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,81,117,0.40);
mix-blend-mode: multiply;
z-index: 2;
}
#pageTitle figure img{
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}



@media screen and (max-width: 999px){
#pageTitle{
height: 50vw;
padding: 0 25px 4%;
}
#pageTitle h1 span{
display: block;
font-size: 3rem;
}
#pageTitle h1 small{
font-size: 0.75rem;
}
}/*999*/





#pagination ul#pageNum{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: -30px 0 0 -30px;
}
#pagination ul#pageNum li{
width: 40px;
margin: 30px 0 0 30px;
}
#pagination ul#pageNum li a{
display: flex;
justify-content: center;
align-items: center;
color: #111111;
height: 40px;
text-decoration: none;
text-align: center;
border-radius: 50%;
transition: color 200ms linear;
}
#pagination ul#pageNum li a:hover{
color: #999999;
}
#pagination ul#pageNum li a.current{
background-color: #005175;
color: #ffffff;
}

@media screen and (max-width: 999px){
#pagination ul#pageNum{
margin: -10px 0 0 -10px;
}
#pagination ul#pageNum li{
margin: 10px 0 0 10px;
}
}/*999*/





#mainContent{
position: relative;
background-color: #ffffff;
z-index: 10;
}





.privacyPolicy{
font-size: 0.75rem;
letter-spacing: 0.03em;
}
.privacyPolicy h2{
font-size: 0.875rem;
}
.privacyPolicy .lead{
margin-top: 2em;
}
.privacyPolicyBox{
margin-top: 2em;
}
.privacyPolicy h3{
font-size: 0.8125rem;
margin-bottom: 0.5em;
}
.privacyPolicy h4{
margin-top: 0.5em;
}
.privacyPolicyBox dl dt{
counter-increment: policy;
}
.privacyPolicyBox dl dd+dt{
margin-top: 1em;
}
.privacyPolicyBox dl dt::before{
display: inline-block;
content: counter(policy, decimal)".";
margin: 0 10px 0 0;
}
.privacyPolicyBox dl dd ul li{
margin-left: 20px;
list-style: disc;
}
.privacyPolicyBox p+p{
margin-top: 0.5em;
}





#notFoundWrap{
display: flex;
justify-content: center;
position: relative;
padding: 10% 0 0;
}
#notFoundContent{
display: flex;
flex-direction: column;
max-width: 1000px;
margin: 0 auto;
}
#notFoundContent h2{
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.15em;
}
#notFoundContent p{
font-size: 0.875rem;
line-height: 2.85;
margin-top: 3em;
letter-spacing: 0.1em;
}

@media screen and (max-width: 999px){
#notFoundWrap{
padding: 15% 20px 0;
}
}/*999*/