@charset "UTF-8";
/* CSS Document */
/* 
font-size: calc(A + B * (100vw - C)/D);
A・・・最小文字サイズ
B・・・最大文字サイズ – 最小文字サイズ
C・・・最小画面幅
D・・・最大画面幅 – 最小画面幅
最大画面 1260px 最小画面 360px 
font-size: calc(18px + 12px *(100vw - 360)/900)
*/
@import url("variables.css");
/*======================================

	0.common

=======================================*/
html {
  scroll-padding-top: var(--header-height-pc);
}

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: var(--header-height-sp);
  }
}
body.noScroll {
  overflow: hidden;
}

.notoSerif {
  font-family: "Noto Serif JP", serif;
}

#container {
  width: 100%;
}

.displayNone {
  display: none;
}

.disable_sp {
  display: block;
}

.disable_pc {
  display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.chu {
  font-size: 12px !important;
  color: #4c4c4c !important;
}

.mainColorWhite {
  color: #fff;
}

.mainColorBlue {
  color: #00489d;
}

.mainColorLightGray {
  color: #224d9b;
}

.mainColorLightBlue {
  color: #339de0;
}

.mainColorMagenta {
  color: #b8276f;
}

.mainColorGray333 {
  color: #333;
}

/*======================================

	0.common

=======================================*/
p {
  letter-spacing: 0.01em;
  color: var(--normal-color);
}

a {
  opacity: 1;
  transition: all var(--transition-timing);
}

a:hover {
  opacity: .75;
  transition: all var(--transition-timing);
}


.w1000 {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1109px) {
  .w1000 {
    width: 92%;
  }
}

.w1110 {
  width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1109px) {
  .w1110 {
    width: 92%;
  }
}

.w920 {
  width: 920px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 919px) {
  .w920 {
    width: 92%;
  }
}
.wp_entry_cont_wrap a img {
  opacity: 1;
  transition: all 0.4s;
}

.wp_entry_cont_wrap a img:hover {
  opacity: 0.75;
  transition: all 0.4s;
}

.slick-dots li.slick-active button:before {
  color: var(--skyblue-color) !important;
}

.slick-dots li button:hover:before {
  color: var(--skyblue-color) !important;
}


.ul_yellow {
      background: linear-gradient(#0000 70%, var(--yellow-color) 0, var(--yellow-color) 0);
      padding: 0 0.25em;
}

/*****

Btn

****/
/** btn_wrap **/

/** btn_wrap **/
.btn_wrap {
  text-align: center;
}
.btn_wrap a {
  display: inline-block;
  position: relative;
  padding: 12px 15px;
  box-sizing: border-box;
  border: 1px solid var(--blue-color);
  text-decoration: none;
  overflow: hidden;
}
.btn_wrap a .txtWrap {
  position: relative;
  z-index: 2;
}
.btn_wrap a .arr {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  margin-right: 6px;
  top: 4.5px;
}
.btn_wrap a .arr:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--blue-color);
  border-radius: 50%;
}
.btn_wrap a .arr:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--blue-color);
  border-right: 1px solid var(--blue-color);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -4px;
}
.btn_wrap a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue-color);
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 1;
  transition: all var(--transition-timing);
}
.btn_wrap a:hover:before {
  left: 0;
  transition: all var(--transition-timing);
}
.btn_wrap a:hover {
  color: #fff;
  transition: all var(--transition-timing);
  text-decoration: none;
}
.btn_wrap a:hover .arr:before {
  border: 1px solid #fff;
  transition: all var(--transition-timing);
}
.btn_wrap a:hover .arr:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: all var(--transition-timing);
}

.btn_wrap a:hover .txtWrap .txt {
  color: #fff;
  text-decoration: none;
  transition: all var(--transition-timing);
}


/** 追随メニュー **/
/** totop **/
/*======================================

	0.head

=======================================*/
/** sp header **/
/** sp float button bottom **/


/** pc header **/

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height-pc);
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 767px) {
  header {
   height: var(--header-height-sp);
  }
}

header .cont {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 20px;
}

header .cont .logoWrap {
  height: 90%;
}

header .cont .logoWrap img {
  max-height: 100%;
  vertical-align: bottom;
  position: relative;
  top: -5px;
}


header .cont .contactMenuWrap {
  height: 100%;
}

header .cont .contactMenuWrap ul {
  width: 400px;
  height: 100%;
  display: flex;
  align-items: center; 
  justify-content: center;
  margin-bottom: 0;
  gap: 1px;
}

@media screen and (max-width: 767px) {
  header .cont .contactMenuWrap ul {
   width: 240px;
  }
}

@media screen and (max-width: 499px) {
  header .cont .contactMenuWrap ul {
   width: 180px;
  }
}

header .cont .contactMenuWrap ul li {
  width: 80px;
  height: 100%;
  display: flex;
  align-items: center; 
  justify-content: center;
}

@media screen and (max-width: 499px) {
  header .cont .contactMenuWrap ul li {
   padding: 12px;
   box-sizing: border-box;
  }
}


header .cont .contactMenuWrap ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; 
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

header .cont .contactMenuWrap ul li:nth-child(1) {
  width: 240px;
  background: #00489d;
}

@media screen and (max-width: 767px) {
  header .cont .contactMenuWrap ul li:nth-child(1) {
   width: 80px;
  }
}

header .cont .contactMenuWrap ul li:nth-child(1) .text {
  color: #fff;
  font-weight: bold;
  font-size: 1.075rem;
}

@media screen and (max-width: 767px) {
  header .cont .contactMenuWrap ul li:nth-child(1) .text {
   display: none;
  }
}

header .cont .contactMenuWrap ul li:nth-child(2) {
  background: #3fc1e0;
}

header .cont .contactMenuWrap ul li:nth-child(3) {
  background: #06c755;
}



/*======================================

	0.foot

=======================================*/
footer {
  border-top: 1px solid #e5ebef;
  padding: 45px 0;
  text-align: center;
}

@media screen and (max-width: 767px) {
  footer {
   
  }
}

footer address {
  font-size: 0.6875rem;
  color: #999999;
  font-style: normal;
  font-weight: normal;
}

/*======================================

	1.main_section

=======================================*/
#container {
  /* height: 90px; */
  padding-top: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 999px) {
  #container {
    /* height: 82px; */
  }
}
@media screen and (max-width: 767px) {
  #container {
    /* height: 62px; */
  }
}
@media screen and (max-width: 449px) {
  #container {
    /* height: 50px; */
  }
}

/** common **/

section.unit_wrap {
  margin-bottom: 55px
}

section.unit_wrap .titleH2Wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px 20px;
  box-sizing: border-box;
  background:  var(--lightblue-color);
  margin-bottom: 25px;

}

section.unit_wrap .titleH2Wrap.whiteVer {
  background: none;
}

section.unit_wrap .titleH2Wrap h2 {
  color: var(--normal-color);
  position: relative;
  font-size: 2.125rem;
}


@media screen and (max-width: 767px) {
  section.unit_wrap .titleH2Wrap h2 {
    font-size: 1.75rem;
  }
}

section.unit_wrap .titleH2Wrap.whiteVer h2 {
  color: #fff;
}

section.unit_wrap .titleH2Wrap h2:after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: var(--normal-color);
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

section.unit_wrap .titleH2Wrap.whiteVer h2:after {
  background: #fff;
}