@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: #ffffff;
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: 50px auto;
}
.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{
display: flex;
flex-direction: column;
overflow: clip;
background-color: #ffffff;
min-height: 100vh;
}
#content{
position: relative;
background-color: #ffffff;
z-index: 1;
}

@media screen and (max-width: 999px){
#stickyContainer{
}
}/*999*/





/*------------------------
ヘッダー
------------------------*/
header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100px;
position: sticky;
top: 0;
left: 0;
background-color: #ffffff;
z-index: 100;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.30);
box-shadow: 0px 0px 2px rgba(0,0,0,0.30);
}
#headerLogo{
height: 100%;
padding: 0 0 0 20px;
}
#headerLogo a{
display: flex;
align-items: center;
height: 100%;
color: #5a5a5a;
line-height: 1.3;
text-decoration: none;
font-size: 0.875rem;
}
#headerLogo img{
max-width: 200px;
}
#headerLogo span{
display: block;
margin: 0 0 0 20px;
}
#headerBtn{
display: flex;
align-items: center;
height: 100%;
}
#headerEntry{
position: relative;
width: 160px;
height: 100%;
}
#headerEntry p{
height: 100%;
}
#headerEntry p a{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #ffffff;
background-color: #e8a630;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background 200ms ease;
}
#headerEntry p a:hover{
background-color: #efc13e;
}
#headerEntry ul{
position: absolute;
top: 100%;
left: 0;
right: 0;
transform: translateY(-20px);
opacity: 0;
visibility: hidden;
transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1), visibility 300ms cubic-bezier(0.25, 1, 0.5, 1), transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.30);
box-shadow: 0 0 2px rgba(0,0,0,0.30);
}
#headerEntry:hover ul{
transform: none;
opacity: 1;
visibility: visible;
}
#headerEntry ul li+li{
border-top: 1px solid #ffffff;
}
#headerEntry ul li a{
display: block;
color: #ffffff;
border: 1px solid #339f8f;
background-color: #339f8f;
text-decoration: none;
text-align: center;
padding: 10px;
transition: color 200ms ease, background 200ms ease;
}
#headerEntry ul li a:hover{
color: #339f8f;
background-color: #ffffff;
}
#menuBtn{
width: 100px;
height: 100%;
}
#menuBtn a{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
color: #ffffff;
background-color: #008773;
text-decoration: none;
text-align: center;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-indent: 0.05em;
cursor: pointer;
padding: 40px 0 0;
transition: background 200ms ease;
}
#menuBtn a:hover{
background-color: #00ab96;
}
#menuBtn a::before{
content: '';
display: block;
width: 40px;
height: 9px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -22px);
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
animation: menuBtnAnim03 200ms linear forwards;
}
#menuBtn a::after{
content: '';
display: block;
width: 40px;
height: 9px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -11px);
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
animation: menuBtnAnim04 200ms linear forwards;
}
#menuBtn.show a::before{
animation: menuBtnAnim01 200ms linear forwards;
}
#menuBtn.show a::after{
animation: menuBtnAnim02 200ms linear forwards;
}
#menuWrap{
position: absolute;
top: 100%;
right: 0;
left: 0;
height: calc(100vh - 100px);
background-color: rgba(0,0,0,0.50);
opacity: 0;
visibility: hidden;
z-index: -1;
overflow: hidden;
animation: menuWrapClose 200ms linear forwards;
}
#menuWrap.show{
animation: menuWrapShow 200ms linear forwards;
}
#menuContent{
position: absolute;
top: 0;
right: 0;
width: 100%;
max-width: 400px;
max-height: 100%;
overflow-y: scroll;
background-color: #339f8f;
padding: 20px 30px;
opacity: 0;
animation: menuClose 200ms linear forwards;
}
#menuWrap.show #menuContent{
animation: menuShow 500ms 200ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#menuContent>ul>li{
padding: 10px 0 15px;
}
#menuContent>ul>li+li{
border-top: 1px solid #ffffff;
}
#menuContent>ul>li a{
transition: color 200ms ease;
}
#menuContent>ul>li a:hover{
color: #efc13e;
}
#menuContent>ul>li>a{
display: block;
color: #ffffff;
text-decoration: none;
font-size: 1.25rem;
line-height: 1.5;
padding: 10px 0;
}
#menuContent>ul>li>ul>li>a{
display: block;
position: relative;
color: #ffffff;
text-decoration: none;
font-size: 0.875rem;
line-height: 1.5;
padding: 5px 0 5px 20px;
}
#menuContent>ul>li>ul>li>a::before{
content: '';
display: block;
width: 14px;
height: 14px;
position: absolute;
top: calc(0.75em + 5px);
left: 0;
transform: translateY(-50%);
background-color: #008773;
border-radius: 50%;
}
#menuContent>ul>li>ul>li>a::after{
content: '';
display: block;
width: 14px;
height: 14px;
position: absolute;
top: calc(0.75em + 5px);
left: 0;
transform: translateY(-50%);
background-color: #ffffff;
mask-image: url(../images/arrow01.svg);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 50% auto;
}

@media screen and (max-width: 999px){
header{
height: 60px;
}
#headerLogo{
max-width: calc(100% - 70px);
padding: 0 0 0 10px;
}
#headerLogo a{
font-size: min(2.7vw, 10px);
}
#headerLogo img{
max-width: 140px;
}
#headerLogo span{
margin: 0 0 0 15px;
}
#headerEntry{
display: none;
}
#menuBtn{
width: 60px;
}
#menuBtn a{
font-size: 10px;
padding: 24px 0 0;
}
#menuBtn a::before{
width: 30px;
height: 5px;
transform: translate(-50%, -16px);
animation: menuBtnAnimSp03 200ms linear forwards;
}
#menuBtn a::after{
width: 30px;
height: 5px;
transform: translate(-50%, -9px);
animation: menuBtnAnimSp04 200ms linear forwards;
}
#menuBtn.show a::before{
animation: menuBtnAnimSp01 200ms linear forwards;
}
#menuBtn.show a::after{
animation: menuBtnAnimSp02 200ms linear forwards;
}
#menuWrap{
height: calc(100vh - 60px);
}
#menuContent{
width: 70%;
padding: 10px 20px;
}
#menuContent>ul>li{
padding: 10px 0 15px;
}
#menuContent>ul>li>a{
font-size: 1rem;
}
#menuContent>ul>li>ul>li>a{
font-size: 0.75rem;
}
}/*999*/

@keyframes menuBtnAnim01{
0%{
height: 9px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px);
}
100%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px) rotate(-25deg);
}
}
@keyframes menuBtnAnim02{
0%{
height: 9px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px);
}
100%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px) rotate(25deg);
}
}
@keyframes menuBtnAnim03{
0%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px) rotate(-25deg);
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px);
}
100%{
height: 9px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
transform: translate(-50%, -22px);
}
}
@keyframes menuBtnAnim04{
0%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px) rotate(25deg);
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -11px);
}
100%{
height: 9px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
transform: translate(-50%, -11px);
}
}
@keyframes menuBtnAnimSp01{
0%{
height: 5px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px);
}
100%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px) rotate(-25deg);
}
}
@keyframes menuBtnAnimSp02{
0%{
height: 5px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px);
}
100%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px) rotate(25deg);
}
}
@keyframes menuBtnAnimSp03{
0%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px) rotate(-25deg);
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px);
}
100%{
height: 5px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
transform: translate(-50%, -16px);
}
}
@keyframes menuBtnAnimSp04{
0%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px) rotate(25deg);
}
50%{
height: 2px;
border-top: none;
border-bottom: none;
background-color: #ffffff;
transform: translate(-50%, -9px);
}
100%{
height: 5px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: transparent;
transform: translate(-50%, -9px);
}
}
@keyframes menuWrapShow{
0%{
visibility: hidden;
opacity: 0;
}
100%{
visibility: visible;
opacity: 1;
}
}
@keyframes menuWrapClose{
0%{
visibility: visible;
opacity: 1;
}
99%{
visibility: visible;
}
100%{
visibility: hidden;
opacity: 0;
}
}
@keyframes menuShow{
0%{
opacity: 0;
transform: translateX(100%);
}
100%{
opacity: 1;
transform: none;
}
}
@keyframes menuClose{
0%{
opacity: 1;
transform: none;
}
99%{
opacity: 0;
transform: none;
}
100%{
opacity: 0;
transform: translateX(100%);
}
}
/*------------------------
／ヘッダー
------------------------*/



/*------------------------
フッター
------------------------*/
footer{
position: relative;
margin: auto 0 0;
background-color: #ffffff;
border-top: 1px solid #cdcdcd;
z-index: 99;
}
#footerContent{
padding: 60px 10px;
}
#footerContent p{
text-align: center;
font-size: 1.5rem;
line-height: 1.5;
}
#footerContent p small{
display: block;
font-size: 60%;
margin-top: 0.3em;
}
/*#pagetop{
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: 30px;
}*/
#pagetop{
width: 40px;
height: 40px;
position: fixed;
right: 20px;
bottom: 20px;
animation: pagetopClose 300ms linear forwards;
}
#pagetop.show{
animation: pagetopShow 300ms linear forwards;
}
#pagetop.fix{
position: absolute;
top: -20px;
bottom: auto;
}
#pagetop a{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #0080c3;
border-radius: 5px;
transition: background 200ms ease;
}
#pagetop a:hover{
background-color: #00a6d5;
}
#pagetop a img{
max-width: 18px;
}
#copy{
color: #ffffff;
font-size: 0.875rem;
text-align: center;
padding: 20px 10px;
background-color: #008773;
}

@media screen and (max-width: 999px){
#footerContent{
padding: 30px 10px;
}
#footerContent p{
font-size: 1rem;
}
#footerContent p small{
font-size: 75%;
}
#pagetop{
right: 10px;
}
#copy{
font-size: 0.75rem;
padding: 10px;
}
}/*999*/

@keyframes pagetopShow{
0%{
visibility: hidden;
opacity: 0;
z-index: -1;
}
100%{
visibility: visible;
opacity: 1;
z-index: 1;
}
}
@keyframes pagetopClose{
0%{
visibility: visible;
opacity: 1;
z-index: 1;
}
99%{
visibility: visible;
opacity: 0;
z-index: 1;
}
100%{
visibility: hidden;
opacity: 0;
z-index: -1;
}
}
/*------------------------
／フッター
------------------------*/





#pageTitle{
position: relative;
padding: calc(25% - 60px) 0 0;
}
#pageTitle figure{
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 25% 0 0;
overflow: hidden;
z-index: 1;
}
#pageTitle figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#pageTitle .title{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: 2;
}
#pageTitle .title::before{
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50%;
background-color: #ffffff;
z-index: 1;
}
#pageTitle h1{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
min-width: 360px;
height: 120px;
font-size: 2.25rem;
line-height: 1.5;
font-weight: 400;
color: #ffffff;
background-color: #008773;
border-bottom-right-radius: 100em;
border-top-right-radius: 100em;
padding: 0 40px 0 40px;
z-index: 2;
}
#pageTitle h1 small{
display: block;
font-size: 45%;
}

@media screen and (max-width: 999px){
#pageTitle{
padding: calc(25% - 35px) 0 0;
}
#pageTitle .title{
padding: 0 20px 0 0;
}
#pageTitle h1{
min-width: auto;
height: 70px;
font-size: 1.3125rem;
padding: 0 40px 0 20px;
}
#pageTitle h1 small{
font-size: 60%;
}
}/*999*/





.btn{
position: relative;
z-index: 1;
}
.btn a{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.125rem;
text-align: center;
line-height: 1.5;
color: #008773;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #008773;
border-radius: 100em;
padding: 10px 20px;
transition: color 200ms ease, background 200ms ease;
}
.btn a:hover{
color: #ffffff;
background-color: #008773;
}
.btn a::after{
content: '';
display: block;
width: 20px;
height: 20px;
mask-image: url(../images/arrow02.svg);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
background-color: #008773;
margin: 0 0 0 10px;
transition: background 200ms ease;
}
.btn a:hover::after{
background-color: #ffffff;
}

@media screen and (max-width: 999px){
.btn a{
font-size: 0.875rem;
padding: 10px 20px;
}
.btn a::after{
width: 16px;
height: 16px;
}
}/*999*/





.pageContent{
background-image: url(../images/content_bg.svg);
background-repeat: repeat-y;
background-position: center 6vw;
background-size: 100% auto;
}
.pageContent>div:first-child{
padding-top: 6% !important;
}

@media screen and (max-width: 999px){
.pageContent>div:first-child{
padding-top: 12% !important;
}
}/*999*/





.heading01{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.heading01 h2,
.heading01 h3{
min-width: 280px;
color: #008773;
font-size: 1.5rem;
line-height: 1.5;
border: 2px solid #008773;
border-radius: 10px;
background-color: #ffffff;
padding: 25px 30px;
}
.heading01 small{
display: block;
font-size: 50%;
}

@media screen and (max-width: 999px){
.heading01 h2,
.heading01 h3{
min-width: 220px;
font-size: 1.125rem;
padding: 20px;
}
.heading01 small{
font-size: 60%;
}
}/*999*/





#notfoundContent{
padding: 0 0 8%;
}
#notfoundMain{
display: flex;
flex-direction: column;
align-items: center;
padding: 8% 0 0;
}
#notfoundMain p.lead{
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
}
#notfoundMain p.btn{
width: 100%;
max-width: 260px;
margin: 40px 0 0;
}

@media screen and (max-width: 999px){
#notfoundContent{
padding: 0 0 15%;
}
#notfoundMain{
padding: 15% 20px 0;
}
#notfoundMain p.lead{
font-size: 1rem;
text-align: left;
}
#notfoundMain p.btn{
max-width: 200px;
margin: 30px 0 0;
}
}/*999*/





@keyframes commonShow01{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes commonShow02{
0%{
transform: translateY(50px);
}
100%{
transform: none;
}
}
@keyframes listShow{
0%{
transform: scale(0);
}
100%{
transform: none;
}
}