@charset "utf-8";



/* 共通 */

body {

  background: #edf3f9;

}



.cap_W {

  color: #fff;

}



.cap_ShB {

  text-shadow: 2px 0 2px #000, -2px 0 2px #000, 0 2px 2px #000, 0 -2px 2px #000;

}



.cap_ShW {

  text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff;

}



/* flex */

.flex {

  display: flex;

}



/* inner */

.inner_1000 {

  max-width: 1000px;

  width: 90%;

  margin: 0 auto;

}



.inner_1200 {

  max-width: 1200px;

  width: 90%;

  margin: 0 auto;

}



/* header */

header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  padding: 0 30px;

  background-color: #015e9e;

  box-sizing: border-box;

  z-index: 20;

}



.scroll {

  background: #015e9e;

}



header .head_Inner {

  justify-content: space-between;

  align-items: center;

}



.site_Ttl {

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  gap: 20px;

}



.site_Ttl h1 {

  max-width: 300px;

  width: 100%;

  font-size: 0;

}



.site_Ttl p {

  color: #fff;

  font-size: min(2.8vw, 14px);

  letter-spacing: 0.05em;

}



.head_menu {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: initial;

}



/* 20250527追加 */

.head_nav a,

.head_nav p {

  color: #fff;

}



.head_nav>li:not(:last-child)::after {

  background-color: #fff;

}



.head_menu a[class^='h_btn'] {

  display: block;

  position: relative;

  width: 100px;

  height: 70px;

  border-left: 1px solid #fff;

  text-align: center;

}



.head_menu a[class^='h_btn']>div {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  text-align: center;

  transform: translate(-50%, -50%);

}



.head_menu a[class^='h_btn'] i {

  display: block;

  width: 1.8em;

  height: 1.8em;

  margin: 0 auto 8px;

}



.head_menu a[class^='h_btn'] p {

  color: #fff;

  font-size: min(2.5vw, 13px);

  font-weight: 500;

}



.head_menu .h_btn01 {

  background-color: #015e9e;

  border-right: 1px solid #fff;

}







#menu_Btn {

  position: relative;

  width: 60px;

  height: 40px;

  margin-left: 30px;

  border-radius: 0 50px 50px 0;

  overflow: hidden;

  transition: .4s;

  cursor: pointer;

}



#menu_Btn span {

  display: block;

  position: absolute;

  width: 100%;

  height: 4px;

  background-color: #ffffff;

  transition: .4s;

}



#menu_Btn span:nth-child(1) {

  top: 0;

  left: 0;

  animation: btn-bar01 .75s forwards;

}



#menu_Btn span:nth-child(2) {

  top: 18px;

  left: 20px;

}



#menu_Btn span:nth-child(3) {

  top: 36px;

  left: 0;

  animation: btn-bar03 .75s forwards

}







@keyframes btn-bar01 {

  0% {

    transform: translateY(20px) rotate(45deg);

  }



  50% {

    transform: translateY(20px) rotate(0);

  }



  100% {

    transform: translateY(0) rotate(0);

  }

}



@keyframes btn-bar03 {

  0% {

    transform: translateY(-20px) rotate(-45deg);

  }



  50% {

    transform: translateY(-20px) rotate(0);

  }



  100% {

    transform: translateY(0) rotate(0);

  }

}



#menu_Btn.active {

  border-radius: 0;

}



#menu_Btn.active span {

  width: 85%;

}



#menu_Btn.active span:nth-child(1) {

  top: -2px;

  animation: active-btn-bar01 .75s forwards;

}



#menu_Btn.active span:nth-child(2) {

  transform: translateX(100%);

  opacity: 0;

}



#menu_Btn.active span:nth-child(3) {

  top: 38px;

  animation: active-btn-bar03 .75s forwards;

}



@keyframes active-btn-bar01 {

  0% {

    transform: translateY(0) rotate(0);

  }



  50% {

    transform: translateY(20px) rotate(0);

  }



  100% {

    transform: translateY(20px) rotate(45deg);

  }

}



@keyframes active-btn-bar03 {

  0% {

    transform: translateY(0) rotate(0);

  }



  50% {

    transform: translateY(-20px) rotate(0);

  }



  100% {

    transform: translateY(-20px) rotate(-45deg);

  }

}



/* gnav */

#gnav_Area {

  position: fixed;

  top: 0;

  right: -40vw;

  width: 40vw;

  height: 100vh;

  background-color: rgba(255, 255, 255, .8);

  overflow-y: scroll;

  transition: .6s;

  z-index: 15;

}



#gnav_Area.active {

  right: 0;

  transition: .6s;

}



#gnav_Area>nav {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 90%;

  height: 80vh;

  transform: translate(-50%, -50%);

  overflow-y: scroll;

}



#gnav_Area .nav_List {

  flex-wrap: wrap;

  gap: 20px;

}



#gnav_Area .nav_List>li {

  width: calc((100% - 20px) / 2);

  text-align: center;

}



#gnav_Area .nav_List a {

  display: block;

  padding: 20px 10px;

  color: #036eb8;

  border-bottom: 1px dotted #036eb8;

  box-sizing: border-box;

}



#gnav_Area .nav_List p {

  font-size: min(3.5vw, 16px);

  font-weight: 600;

}



#gnav_Area .b_form_Link {

  display: block;

  padding: 20px 10px;

  color: #fff;

  box-sizing: border-box;

  background-color: #036eb8;

  margin: 20px auto 0;

  text-align: center;

  font-size: min(3.5vw, 16px);

  font-weight: 600;

}



.pull_down ul>li {

  background: rgba(255, 255, 255, .8);

}



.pull_down ul>li a {

  color: #015e9e;

}





/* footer */

footer.blue-bg {

  color: #fff;

  background: #0d67ad;

  padding: 50px 0 20px 0;

}



.contact-box {

  text-align: center;

}



.contact-box h4 {

  display: inline-block;

  padding: 0 0 5px;

  color: #231815;

  border-bottom: 2px solid #231815;

  font-weight: 600;

  letter-spacing: .2em;

}



.contact-small {

  font-size: 16px;

  line-height: 1.7;

  margin-top: 20px;

}



.contact-txt {

  font-size: 20px;

  letter-spacing: 1px;

  margin-top: 20px;

}



.contact-tel {

  display: inline-block;

  font-size: 42px;

  text-align: center;

  margin: 10px auto;

}



.small {

  letter-spacing: 0.6px;

}



.icon-tel {

  display: inline-block;

  width: 44px;

  margin-right: 5px;

}



.contact-mail {

  display: inline-block;

  font-size: 16px;

  border-top: 1px solid #231815;

  padding-top: 20px;

  margin-top: 20px;

}



footer.blue-bg .contact-mail {

  border-top: 1px solid #fff;

}



.icon-mail {

  display: inline-block;

  width: 25px;

  margin-right: 5px;

}



.contact-box.blue-bg .contact-mail {

  border-top: 1px solid #fff;

}



/* パンクズ */

#bread_List {

  justify-content: flex-start;

  font-size: 12px;

  gap: 5px;

  max-width: 1200px;

  width: 90%;

  margin: 0 auto;

  padding: 10px;

  box-sizing: border-box;

}



#bread_List>li {

  display: flex;

  align-items: center;

  gap: 5px;

}



#bread_List>li::after {

  display: block;

  content: '';

  width: 0.5em;

  height: 0.5em;

  border-top: 1px solid #000;

  border-right: 1px solid #000;

  transform: rotate(45deg);

}



#bread_List>li:last-child::after {

  content: none;

}



#bread_List>li a {

  text-decoration: underline;

}



/* 下層共通 */

.baibai-pagettl {

  background-image: url(../img/page-ttl.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  padding: 10% 0;

  margin-top: 70px;

  position: relative;

}



.baibai-pagettl .ttl {

  color: #015e9e;

  text-align: left;

  position: absolute;

  top: 50%;

  left: 10%;

  transform: translateY(-50%);

}



.baibai-pagettl .ttl h2 {

  font-size: 60px;

  font-weight: 600;

  text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff;

  margin-bottom: 15px;

}



.baibai-pagettl .ttl p {

  font-size: 26px;

  font-weight: 600;

  line-height: 1.5;

  text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff;

}



.box-ttl {

  font-size: 30px;

  font-weight: 600;

  color: #0d67ad;

  text-align: center;

  margin-bottom: 40px;

}



@media only screen and (max-width: 900px) {



  /* パンクズ */

  #bread_List {

    display: none;

  }



  /* header */

  header {

    padding: 10px 10px 10px 0;

  }



  .head_menu a[class^='h_btn'] {

    display: none;

  }



  .site_Ttl {

    gap: 10px;

    width: 100%;

    padding-left: 10px;

    box-sizing: border-box;

  }



  .site_Ttl h1 {

    max-width: 200px;

    width: 55vw;

    left: initial;

    transform: initial;

  }



  #menu_Btn {

    width: 40px;

    height: 25px;

  }



  #menu_Btn span {

    height: 3px;

  }



  #menu_Btn span:nth-child(1) {

    top: 0;

  }



  #menu_Btn span:nth-child(2) {

    top: 11px;

    left: 10px;

  }



  #menu_Btn span:nth-child(3) {

    top: 22px;

  }



  #menu_Btn.active span {

    width: 75%;

  }



  #menu_Btn.active span:nth-child(1) {

    top: -9px;

  }



  #menu_Btn.active span:nth-child(3) {

    top: 31px;

  }



  /* gnav */

  #gnav_Area {

    right: -100%;

    width: 100%;

  }



  #gnav_Area .nav_List {

    flex-direction: column;

    gap: 0;

  }



  #gnav_Area .nav_List>li {

    width: 100%;

  }



  .head_nav.pc {

    display: none;

  }



  .head_nav.sp {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

  }



  .head_nav>li {

    width: calc((100% - 10px) / 2);

  }



  .head_nav>li:not(:last-child)::after {

    content: none;

  }



  .head_nav a {

    padding: 20px;

    color: #fff;

    background-color: #231815;

    text-align: center;

  }



  /* footer */

  .contact-txt {

    font-size: 14px;

    margin-top: 20px;

  }



  .contact-tel {

    font-size: 32px;

  }



  .icon-tel {

    width: 32px;

    vertical-align: text-bottom;

  }



  .icon-tel img {

    width: 32px;

    margin-top: -4px;

  }



  .contact-tel {

    font-size: 28px;

    margin: 15px auto;

  }



  .contact-small {

    font-size: 14px;

    line-height: 1.5;

  }



  .contact-mail {

    width: 90%;

    font-size: 16px;

    padding-top: 15px;

    margin-top: 15px;

  }



  .icon-mail {

    width: 24px;

  }



  .contact-box.blue-bg {

    padding: 50px 0 30px 0;

    margin-top: 50px;

  }



  .box-ttl {

    font-size: 22px;

    margin-bottom: 20px;

  }



  .baibai-pagettl {

    padding: 20% 0;

    margin-top: 67px;

  }



  .baibai-pagettl .ttl {

    left: 5%;

  }



  .baibai-pagettl .ttl h2 {

    font-size: 32px;

    margin-bottom: 10px;

  }



  .baibai-pagettl .ttl p {

    font-size: 16px;

  }





}