@charset "utf-8";
/*---------- 
01.共通
02.ヘッダー
03.フッター
----------*/
/*---------- 
01.共通
----------*/
html {
scroll-behavior: smooth;
scroll-padding-top: 90.29px; 
}
body{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 18px;
position: relative;
line-height: 1.94;
color: #000000;
}
.red{
  color: #cf2e2e;
}
.barlow{
  font-family: "Barlow", sans-serif;
}
.raleway{
font-family: "Raleway", sans-serif;
}
.wrapper{
max-width: 1280px;
width: 89%;
margin: 0 auto;
}
.flex-box{
display: flex;
}
.hidden{
  display: none;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.align-center{
  align-items: center;
}
.text-center{
  text-align: center;
}
.main-div{
padding-top: 90px;
padding-bottom: 50px;
}
.block-box{
  display: block;
}
.vertical-text{
  writing-mode: vertical-rl;
}
.horizontal-text {
  writing-mode: horizontal-tb;
}
.mb0{
  margin-bottom: 0;
}
.business-box{
  background: #005C92;
  padding: 27px 0;
}
.row-reverse{
  flex-direction: row-reverse;
}
.business-box a{
color: #fff;
position: relative;
}
.business-box a::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: block;
  width: 47px;
  height: 47px;
  background: center/contain no-repeat url(../../img/common/arrow-round.png);
  transition: 0.4s;
}
.business-box a:hover::after{
transform: translateY(-50%) scale(1.15);
}
.business-box .title{
  font-size: 20px;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-right: 25px;
}
.business-box .flex-box2{
  font-size: 16px;
  gap: 30px;
}
.business-box .flex-box2 p{
  font-weight: 700;
}
.business-box .flex-box2 span{
  font-size: 12px;
}
.business-box .flex-box2 span.not-block{
  display: inline-block;
}
.business-box .border{
  width: 1px;
  height: 72px;
  background: #fff;
}
.pc{
  display: block;
}
.sp{
  display: none;
}
.btn-box{
width: 193px;
}
.btn-box a{
display: flex;
padding: 9px 29px;
background: #005C92;
border-radius: 173px;
color: #fff;
position: relative;
}
.btn-box a::after{
content: "";
display: inline-block;
width: 17.84px;
height: 6.87px;
background: center/contain no-repeat url(../../img/common/arrow-white.png);
position: absolute;
right: 29px;
top: 50%;
transform: translateY(-50%);
transition: 0.4s;
}
.btn-box a:hover::after{
right: 20px;
}
.breadcrumb{
display: flex;
list-style-type: none;
flex-wrap: wrap;
font-size: 14px;
position: relative;
z-index: 10;
}
.breadcrumb li a{
  position: relative;
  display: flex;
  align-items: center;
  color: #0f4d7dcc;
}
.breadcrumb li a::after{
  content: ">";
  display: inline-block;
  font-size: 14px;
  padding: 0 10px;
}
#contact-area{
background: #005C92;
padding: 61px 0;
color: #fff;
position: relative;
overflow: hidden;
border-radius: 50px 50px 0 0;
margin-top: -295px;
}
.common-base + #contact-area{
margin-top: -50px;
}
#contact-area h2{
  text-align: center;
  margin-bottom: 27.8px;
  font-weight: 700;
  
}
#contact-area .raleway{
  display: block;
  font-size: 20px;
line-height: 24px;
margin-bottom: 6.9px;
}
#contact-area .jp{
  display: block;
  font-size: 35px;
  line-height: 51px;
}
#contact-area .tel-box{
  max-width: fit-content;
  margin: 0 auto 32px;
}
#contact-area .tel-box p:first-of-type{
font-size: 25px;
line-height: 36px;
}
#contact-area .tel-box p:last-of-type{
font-size:50px;
line-height: 67px;
letter-spacing: 0.12em;
}
#contact-area .tel-box p:last-of-type a{
  color: #fff;
}
#contact-area .tel-box img{
width: 32.56px;
margin-right: 23.7px;
animation:shake-x .8s ease-in-out infinite;
}
@keyframes shake-x{
  0%{transform:rotate(0)}
  10%{transform:rotate(-10deg)}
  30%{transform:rotate(10deg)}
  50%{transform:rotate(-10deg)}
  70%{transform:rotate(10deg)}
  to{transform:rotate(0)}}
#contact-area .calendar-btn{
  width: 222px;
  margin: 0 auto 12.9px;
}
#contact-area .calendar-btn a{
  align-items: center;
  background: #FFFFFF;
  color: #005C92;
  justify-content: center;
  border-radius: 117px;
  border:1px solid #707070;
  padding: 5px 0;
}
#contact-area .calendar-btn img{
  margin-right: 7.3px;
}
#contact-area .calendar-btn + span{
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
#contact-area .calendar-btn + span img{
  margin-right: 4px;
animation:shake-y .8s ease-in-out infinite;
}
@keyframes shake-y{
  0%{transform:translateY(0)}
  50%{transform:translateY(5px)}
  to{transform:rotate(0)}}
#contact-area .deco{
position: absolute;
}
#contact-area .deco1{
width: 15.38%;
left: 17.6%;
transform: rotate(337deg);
top: -20px;
}
#contact-area .deco2{
  width: 28%;
  right: 8.6%;
  bottom: 0;
}
#map-area{
  width: 100%;
  height: 569px;
}
#map-area iframe{
  width: 100%;
  height: 100%;
}
.cnt-title{
background: #fff0e0;
position: relative;
}
.cnt-title::after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 34px;
  position: absolute;
  bottom: -34px;
  background: center/contain repeat-x url(../../img/common/deco-title-wave.png);
z-index: 10;
}
.cnt-title .wrapper:first-child{
padding: 111px 0 0;
position: relative;
}
.cnt-title h1,.cnt-title .title{
  font-size: 48px;
  line-height: 1.6;
  text-align: center;
  font-weight: 700;
  position: relative;
  z-index: 10;
  padding: 40px 0 0;
  white-space: nowrap;
  letter-spacing: 0.1em;
z-index: 10;
}
.cnt-title h1::before,.cnt-title .title::before,.cnt-title h1::after,.cnt-title .title::after{
content: "";
display: inline-block;
width: 221px;
height: 77px;
background: center/contain no-repeat url(../../img/common/deco-crowd1.png);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: -1;
animation: floatCloud 8s ease-in-out infinite alternate;
}
/* ふわふわ動かすアニメーション */
@keyframes floatCloud {
  0% {
transform: translateY(-50%);
  }
  25% {
transform: translateY(-60%);
  }
  50% {
transform: translateY(-50%);
  }
  75% {
transform: translateY(-60%);
  }
  100% {
transform: translateY(-50%);
  }
}
.cnt-title h1::before,.cnt-title .title::before{
  left: 26.9%;
}
.cnt-title h1::after,.cnt-title .title::after{
  right: 26.9%;
}
.cnt-title .deco-title1{
  width: 49%;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 134px;
}
@keyframes float {
  0%, 100% {
transform: translateY(0);
  }
  50% {
transform: translateY(-15px);
  }
}
.news-box a:hover{
transition: 0.4s;
opacity: 1;
transform: scale(1.01);
}
.navigation{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}
.navigation .prev,.navigation .next{
  color: transparent;
  position: relative;
}
.navigation .prev::after{
content: "<";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 45px;
line-height: 45px;
color: #005C92;
border: 1px solid #005C92;
border-radius: 50%;
text-align: center;
}
.navigation .next::after{
content: ">";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 45px;
height: 45px;
left: 50%;
transform: translateX(-50%);
line-height: 45px;
color: #005C92;
border: 1px solid #005C92;
border-radius: 50%;
text-align: center;
}
ul.page-numbers{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: center;
}
.page-numbers li .page-numbers {
display: inline-flex;
padding: 0 5px;
line-height: 45px;
text-align: center;
width: 45px;
height: 45px;
font-size: 20px;
justify-content: center;
list-style-type: none;
}
.navigation .current{
background: #005C92;
color: #fff;
border-radius: 50%;
}
.cmn-btn{
  width: 280px;
  margin: 0 auto;
}
.cmn-btn a{
text-align: center;
color: #fff;
font-weight: 500;
padding: 15px 0;
display: block;
background: #6c8e34;
position: relative;
}
.cmn-btn a::after{
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#map {
position: relative;
width: 100%;
height: 262px;
}

#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.swiper {
width: 100%;
height: auto;
}
.swiper-pagination-bullet-active{
  background: #fff !important;
}
.swiper-button-next, .swiper-button-prev{
  color: #fff !important;
}
/*---------- 
02.ヘッダー
----------*/
header {
position: fixed;
width: 100%;
top: 0;
background: #fff;
z-index: 100;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

header .wrapper{
max-width: 1920px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
header .logo{
  align-items: center;
  margin-left: 19px;
}
header .logo .icon-chara{
width: 71px;
}
header .logo .icon-logo{
width: 239px;
margin-left: -15px;
}
header nav{
align-items: center;
}
header nav ul{
list-style-type: none;
gap: 30px;
margin-right: 20px;
}
header nav ul a:hover{
  opacity: 0.7;
}
header nav .cnt-btn{
display: flex;
position: relative;
}
header .access-btn{
  margin-right: 13px;
}
header .calendar-btn{
  margin-right: 31px;
}
header .access-btn a, header .calendar-btn a{
  align-items: center;
  gap: 6px;
  padding: 6.2px 29.4px;
  border-radius: 170px;
  white-space: nowrap;
  width: 160px;
  justify-content: center;
}
header .access-btn img,header .calendar-btn img{
  transition: 0.4s;
}
header .access-btn:hover img,header .calendar-btn:hover img{
  transform: scale(1.1);
}
header .access-btn a{
  background: #ECFAFF;
  border:1px solid #1AAEE5;
}
header .calendar-btn a{
  background: #FFFBD8;
  border:1px solid #E9AF10;
  
}
header .tel-btn a{
background: #005C92;
padding: 16px 29px;
align-items: center;
color: #fff;
}
header .tel-btn p:first-of-type{
font-size: 15px;
line-height: 21px;
}
header .tel-btn p:last-of-type{
font-size:28px;
line-height: 37px;
letter-spacing: 0.12em;
}
header .tel-btn img{
  width: 18px;
  margin-right: 13px;
  animation:shake-x .8s ease-in-out infinite;
}
header .menu-btn{
  display: none;
}
header .icon-tel{
  display: block;
}
header .icon-tel-black{
  display: none;
}
/*---------- 
03.フッター
----------*/
footer{
  padding: 34.7px 0 0;
}
footer .wrapper.flex-box{
  padding-bottom: 25px;
  justify-content: space-between;
  position: relative;
}
footer .border{
  display: block;
  width: 1px;
  height: 224px;
  background: #CCCCCC;
}
footer .border1{
margin: 0 3.9% 0 2.4%;
}
footer .border2{
margin: 0 1.14% 0 3.9%;
}
footer .cnt-left img{
margin-left: -24px;
margin-bottom: 2.3px;
}
footer .cnt-left p{
font-size: 16px;
}
footer .cnt-middle{
max-width: 477px;
}
footer .cnt-middle ul{
list-style-type: none;
font-size: 16px;
flex-wrap: wrap;
column-gap: 32px;
row-gap: 16px;
margin-bottom: 40px;
}
footer .cnt-middle li{
position: relative;
}
footer .cnt-middle li::before{
content: "";
display: inline-block;
width: 5.3px;
height: 10.61px;
margin-right: 8px;
background: center/contain no-repeat url('../../img/common/arrow-light-blue.png');
}
footer .cnt-right{
font-size: 12px;
position: relative;
}
footer .cnt-right span{
position: absolute;
right: 0;
bottom: 27px;
}
footer .footer-bottom{
  text-align: right;
  background: rgba(0, 92, 146, 0.1);
  font-size: 12px;
  padding: 25px 0 35px;
}
footer .footer-bottom span{
  display: block;
}
footer .btn-box{
  width: 270px;
}
footer .btn-box a{
  padding: 12px 29px;
}
@media screen and (max-width: 1325px){
  header nav ul {
gap: 10px;
}
}
@media screen and (max-width: 1440px){
/*---------- 
02.ヘッダー 1440px
----------*/
header .menu-btn{
display: block;
width: 60px;
height: 60px;
position: relative;
background: #005C92;
appearance: none;
border: none;
padding: 10px;
cursor: pointer;
}
header .menu-btn span{
  display: block;
width: 31px;
height: 10px;
  background: center/contain no-repeat url(../../img/common/menu-bg.png);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.4s;
}
header .menu-btn span:first-of-type{
  top: 13px;
}
header .menu-btn span:nth-of-type(2){
top: 25px;
}
header .menu-btn span:nth-of-type(3){
top: 37px;
}
header nav.flex-box{
  position: fixed;
  transform: translateX(100%);
  transition: 0.4s;
top: 60px;
  height: calc(100vh - 60px);
  width: 100%;
  flex-direction: column;
}
header .menu-btn.open span:nth-of-type(1),header .menu-btn.open span:nth-of-type(3){
top: 25px;
}
header .menu-btn.open + nav.flex-box{
  transform: translateX(0%);
  transition: 0.4s;
}
header nav{
padding: 60px 0;
background: linear-gradient(#fff,#fff5eb);
overflow-y: auto;
}
header nav ul.flex-box{
  text-align: center;
  flex-direction: column;
  margin-right: 0;
  margin-bottom: 50px;
  font-size: 18px;
  gap: 40px;
letter-spacing: 0.1em;
width: 100%;
justify-content: center;
z-index: 10;
}
header nav li a{
width: 100%;
position: relative;
display: block;
}
header .access-btn{
  margin: 0 auto 20px;
}
header .calendar-btn{
  margin: 0 auto 40px;
}
header .access-btn a, header .calendar-btn a {
width: 280px;
position: relative;
z-index: 10;
}
header .tel-btn{
position: relative;
z-index: 10;
}
header .tel-btn a {
background: transparent;
padding: 0;
color: #000;
margin: 0 auto;
justify-content: center;

}
header .icon-tel{
  display: none;
}
header .icon-tel-black{
  display: block;
}
header .logo .icon-chara{
  width: 50px;
}
header .logo .icon-logo {
width: 160px;
display: block;
margin-left: -8px;
}
header .menu-bg{
  height: 300px;
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  object-fit: cover;
  object-position: top;
}
}
@media screen and (max-width: 1280px){
/*---------- 
01.共通
----------*/
.business-box a {
justify-content: center;
}
.business-box .title {
font-size: 18px;
margin-right: 15px;
}
.business-box .flex-box2 {
font-size: 14px;
flex-direction: column;
gap:15px;
}
.business-box .border {
width: 100%;
height: 1px;
}
}
@media screen and (max-width: 1080px){
  /*---------- 
01.共通 1080px
----------*/
.cnt-title h1::before, .cnt-title .title::before {
left: 15%;
}
.cnt-title h1::after, .cnt-title .title::after {
right: 15%;
}
/*---------- 
03.フッター 1080px
----------*/
footer .wrapper {
flex-direction: column;
}
footer .border {
display: none;
}
footer .cnt-left{
  margin-bottom: 20px;
}
footer .cnt-left img {
margin: 0 auto;
}
footer .cnt-left p {
text-align: center;
}
footer .cnt-middle{
  max-width: initial;
}
footer .cnt-middle ul{
  gap: 13px;
  justify-content: center;
}
footer .cnt-right {
width: 19%;
right: 5%;
position: absolute;
max-width: 150px;
font-size: 10px;
}
footer .cnt-right span {
white-space: nowrap;
bottom: -10px;
}
footer .btn-box{
  margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
/*---------- 
01.共通 768px
----------*/
html {
scroll-padding-top: 60px; 
}
body{
  font-size: 16px;
}
.pc{
  display: none;
}
.sp{
  display: block;
}
.business-box a {
flex-direction: column;
}
.business-box .title {
margin: 0 0 15px 0;
}
.business-box a::after {
top: 0;
transform: none;
right: 0;
width: 35px;
height: 35px;
}
.business-box .flex-box2 span{
  display: block;
}
#map-area {
height: 300px;
}
#contact-area {
  margin-top: -50px;
padding: 35px 0;
}
#contact-area .raleway {
font-size: 18px;
line-height: 1;
margin-bottom: 0;
}
#contact-area .jp {
font-size: 28px;
line-height: 1.6;
}
#contact-area .tel-box p:first-of-type {
font-size: 18px;
line-height: 1.6;
}
#contact-area .tel-box p:last-of-type {
font-size: 34px;
line-height: 1.5;
}
#contact-area .tel-box {
margin: 0 auto 20px;
}
#contact-area .tel-box img {
width: 20px;
margin-right: 10px;
height: auto;
}
#contact-area .deco1{
  width: 30%;
}
#contact-area .deco2 {
width: 48%;
right: -12%;
bottom: 0;
}
.cnt-title .wrapper:first-child{
padding: 80px 0 15px;
}
.cnt-title h1,.cnt-title .title {
font-size: 28px;
letter-spacing: 0.07em;
}
.cnt-title .deco-title1{
width: 35%;
top: -6px;
}
.cnt-title h1::before, .cnt-title .title::before{
  left: 0;
  width: 40%;
}
.cnt-title h1::after, .cnt-title .title::after {
right: 0;
width: 40%;
}
/*---------- 
02.ヘッダー
----------*/
header .wrapper{
max-width: 1150px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .menu-btn.open + nav.flex-box{
padding: 70px 0 50px;
}
header nav li a{
padding: 10px 0;
font-size: 18px;
}
header nav .cnt-btn{
  flex-direction: column;
}
header nav ul.flex-box{
  gap: 5px;
}
header nav li {
width: 100%;
}
header .menu-bg{
  height: 100px;
}
.cnt-title::after {

height: 25px;
bottom: -25px;
}
/*---------- 
03.フッター
----------*/
footer .cnt-right {
width: 17%;
right: 0;
bottom: 22%;
max-width: 56px;
    }
}