@charset "utf-8";
/* Common */
.container{max-width: 1200px; width: calc(100% - 40px); margin: 0 auto;}
.txt-blue{color: #0075C2; font-weight: 600;}
.txt-link{color: #0075C2; text-decoration: underline; text-underline-offset: 0.25em;}
.txt-link:hover{text-decoration: none;}
.txt-red { color: #ff5b59; font-weight: 600;}

.anchor{position: relative;}
.anchor > div{position: absolute; top: -90px;}


@media screen and (max-width: 768px){
    .anchor > div{top: -70px;}
}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 90px; z-index: 100; padding: 15px 35px 15px 20px; display: flex; justify-content: space-between; align-items: center; transition: .3s;}
.header h1.logo{width: 108px; line-height: 1;}
.header.is-scroll{background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);}

.btn-menu{width: 42px; height: 21px; z-index: 120; cursor: pointer; position: relative; display: none;}
.btn-menu span{width: 100%; height: 1px; background: #0075C2; display: block; position: absolute; left: 0; transition: .4s;}
.btn-menu span:nth-of-type(1){top: 0;}
.btn-menu span:nth-of-type(2){top: 10px;}
.btn-menu span:nth-of-type(3){top: 20px;}

.header.is-open .btn-menu span:nth-of-type(1){top: 10px; transform: rotate(45deg);}
.header.is-open .btn-menu span:nth-of-type(2){opacity: 0;}
.header.is-open .btn-menu span:nth-of-type(3){top: 10px; transform: rotate(-45deg);}

@media screen and (max-width: 768px){
    .header{padding: 10px 20px; height: 70px;}
    .header.is-open{background: #fff;}
    
    .header h1.logo{width: 90px;}
    
    .btn-menu{display: block;}
}

.menu{font-weight: 600; font-size: 1.8rem;}
.menu-list a{transition: .3s;}
.menu-list a:hover{color: #0075C2;}

.menu-btn a{width: 180px; height: 40px; color: #fff; border-radius: 40px; background: #0075C2; display: flex; justify-content: center; align-items: center; padding: 0 0 2px; border: 1px solid #0075C2; transition: .3s;}
.menu-btn a::after{content: ""; width: 0; height: 0; display: block; margin: 0 0 0 0.5em; position: relative; top: 2px;
border-top: 5px solid transparent; border-left: 8px solid #fff; border-bottom: 5px solid transparent;}
.menu-btn a:hover{background: #fff; color: #0075C2;}
.menu-btn a:hover::after{border-top: 5px solid transparent; border-left: 8px solid #0075C2; border-bottom: 5px solid transparent;}

.menu-btnTop{display: none !important;}
.menu-btnTop a{width: 180px; height: 40px; color: #fff; border-radius: 40px; background: #0075C2; display: flex; justify-content: center; align-items: center; padding: 0 0 2px; border: 1px solid #0075C2; transition: .3s;}
.menu-btnTop a::before{content: ""; width: 0; height: 0; display: block; margin: 0 0.5em 0 0; position: relative; top: 2px;
border-top: 5px solid transparent; border-right: 8px solid #fff; border-bottom: 5px solid transparent;}
.menu-btnTop a:hover{background: #fff; color: #0075C2;}
.menu-btnTop a:hover::before{border-top: 5px solid transparent; border-right: 8px solid #0075C2; border-bottom: 5px solid transparent;}

.lowerpage .menu-btn{display: none !important;}
.lowerpage .menu-btnTop{display: block !important;}

@media screen and (min-width: 769px){
    .menu{display: flex; align-items: center;}
    .menu-list{display: flex; padding: 0 7px 0 0;}
    .menu-list li{margin: 0 40px 0 0;}
}

@media screen and (max-width: 768px){    
    .menu{display: block; position: fixed; top: 70px; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 100; text-align: center;
    opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; transition: .3s;}    
    .header.is-open .menu{opacity: 1; visibility: visible; pointer-events: auto;}
    
    .menu-list{padding: 50px 20px;}
    .menu-list li:not(:last-of-type){margin: 0 0 25px;}
    .menu-list li{transform: translateY(20px); opacity: 0; transition: .3s ease;}
    .menu-list li:nth-of-type(1){transition-delay: .3s;}
    .menu-list li:nth-of-type(2){transition-delay: .5s;}
    .header.is-open .menu-list li{transform: translateY(0); opacity: 1;}
    
    .menu-btn{transform: translateY(20px); opacity: 0; transition: .3s ease .7s;}
    .menu-btn a{margin: 0 auto;}
    
    .menu-btnTop{transform: translateY(20px); opacity: 0; transition: .3s ease .7s;}
    .menu-btnTop a{margin: 0 auto;}
    
    .header.is-open .menu-btn{transform: translateY(0); opacity: 1;}
    .header.is-open .menu-btnTop{transform: translateY(0); opacity: 1;}
}

/* Main */
@media screen and (min-width: 769px){
    .homepage .main{padding: 0 0 140px;}
    .lowerpage .main{padding: 180px 0 140px;}
}

@media screen and (max-width: 768px){
    .homepage .main{padding: 0 0 80px;}
	.lowerpage .main{padding: 120px 0 80px;}
}

/* Title */
.m-title{color: #0075C2; text-align: center; font-family: "Noto Sans JP", sans-serif; font-size: 4.8rem; font-weight: 700; line-height: 1.3; margin: 0 0 1em;}
.m-title::after{content: ""; width: 2.916em; height: 0.25em; border-radius: 4px; background: linear-gradient(to right,#008CD6 0%, #008CD6 50%, #0075C2 50.1%, #0075C2 100%); display: block; margin: 0.5em auto 0; transform: scaleX(0); transform-origin: center; transition: .5s ease .3s;}
.m-title.is-view::after{transform: scaleX(1);}

.m-title2{background: #D8ECF8; color: #0075C2; font-size: 3rem; font-weight: 600; line-height: 1.2; padding: 13px 0; margin: 0 0 30px; text-align: center;}
.m-title3{color: #0075C2; font-size: 3rem; font-weight: 600; line-height: 1.2; margin: 0 0 20px;}
.m-title4{color: #0075C2; font-size: 2.4rem; font-weight: 600; line-height: 1.5; margin: 0 0 10px;}

@media screen and (max-width: 768px){
    .m-title{font-size: 3.6rem;}        
    .m-title2{font-size: 2.5rem;}
    .m-title3{font-size: 2.5rem;}
    .m-title4{font-size: 2rem;}
}

/* Desc */
@media screen and (min-width: 769px){
    .m-desc{margin: 0 0 50px;}
    .m-desc.is-center{text-align: center;}
}

@media screen and (max-width: 768px){
    .m-desc{margin: 0 0 30px;}
}

/* Footer */
.footer{padding: 30px 20px;}
.footer-wrap{display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0 30px;}

.footer-logo{margin: 0 30px 0 0;}
.footer-info{font-size: 1.7rem; line-height: 1.5; font-weight: 600;}
.footer-info a:hover{text-decoration: underline; text-underline-offset: 0.25em;}

.footer-link{display: flex; justify-content: center; width: 100%; margin: 0 0 30px;}
.footer-link li:not(:last-of-type){margin: 0 50px 0 0;}
.footer-link a{font-size: 1.2rem; text-decoration: underline; text-underline-offset: 0.25em;}
.footer-link a::after{content: ""; width: 0; height: 0; margin: 0 0 0 7px; display: inline-block; border-top: 5px solid transparent; border-left: 6px solid #000; border-bottom: 5px solid transparent; position: relative; top: 1px;}
.footer-link a:hover{text-decoration: none;}

.copyright{text-align: center; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .footer-wrap{flex-wrap: wrap; justify-content: center;}
	.footer-logo{width: 100%; margin: 0 0 20px; text-align: center;}
    .footer-info{font-size: 1.5rem;}
}

@media screen and (max-width: 480px){
    .footer{padding: 30px 20px 100px;}
    .footer-wrap{margin: 0 0 20px;}
    .footer-link{margin: 0 0 20px;}
    .footer-link a{font-size: 1rem;}
    .footer-link li:not(:last-of-type){margin: 0 20px 0 0;}
    
    .copyright{font-size: 1rem;}
}

/* Pagetop */
#pagetop{position: fixed; bottom: 20px; right: 20px; width: 98px; line-height: 1; cursor: pointer; z-index: 90;
opacity: 0; visibility: hidden; pointer-events: none; transition: .3s;}
#pagetop-img{width: 85px; margin: 8px auto 0; display: block;}

#pagetop-txt{position: relative;}
#pagetop-txt p{position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.6rem; line-height: 1.25em; font-weight: 700; font-family: "Zen Maru Gothic", sans-serif; color: #644632; text-align: center; display: flex; justify-content: center; align-items: center; padding-bottom: 10%; transition: .3s;}

#pagetop.is-show{opacity: 1; visibility: visible; pointer-events: auto;}

@keyframes pagetopAnime {
    0%{transform: rotate(-10deg);}
    50%{transform: rotate(10deg);}
    100%{transform: rotate(-10deg);}
}

@media screen and (min-width: 769px){
    #pagetop:hover #pagetop-img{animation: pagetopAnime .4s linear infinite;}
    #pagetop:hover #pagetop-txt p{color: #ff5b59;}
}

@media screen and (max-width: 768px){
	#pagetop{bottom: 10px; right: 10px; width: 68px;}
    #pagetop-img{width: 58px; margin: 5px auto 0;}
    #pagetop-txt p{font-size: 1.2rem;}
}

/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: 1.2s ease;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(50px); transition: 1s ease;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}
    
    .delay01{transition-delay: 0.1s;}
    .delay02{transition-delay: 0.2s;}
    .delay03{transition-delay: 0.3s;}
    .delay04{transition-delay: 0.4s;}
    .delay05{transition-delay: 0.5s;}
}