@charset "utf-8";
/* CSS Document */
/**
* Google Fonts
*  - Noto Sans JP
*  - Kiwi Maru
*/
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&family=Noto+Sans+JP:wght@100..900&display=swap');
/* ===============================
	reset & setting
 =============================== */
:root {
  --C-black: #231815;
  --C-Dblue: #003461;
  --C-DDblue: #2c6e9a;
  --C-lightblue: #00c1c7;
  --C-gray: #d5d5d6;
  --F-fm: "Kiwi Maru", serif;
  --F-ns: 'Noto Sans JP', sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow: auto;
}
body {
  min-width: 100%;
  background-color: var(--C-lightblue);
  color: var(--C-black);
  font-size: 28px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%;
}

a,a:hover {
  text-decoration: none;
  transition: 0.4s;
  color: var(--C-black);
}
a:hover {opacity: 0.8;}
input {background: none; border: none;}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{outline: none;}
select::-ms-expand{display: none;}
*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
li{list-style-type:none;}
img { max-width: 100%; height: auto; vertical-align: bottom;}
@media screen and (min-width: 767px) {
	a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	}
}

/* ===============================
	layout
 =============================== */
main {
  position: relative;
}

#search_fixed,
#nav_fixed {
  position: fixed;
  top: 50%;
  width: calc((100% - 750px) / 2);
  transform: translateY(-50%);
  z-index: 5;
}
#search_fixed {
  left: 0;
  text-align: center;
}
#search_fixed dt {
  padding: 0 9%;
}
@media screen and (max-width: 1140px) {
  #search_fixed {
    display: none;
  }
}

#nav_fixed {
  right: 0;
  display: flex;
  justify-content: center;
}
#nav_fixed .nav_list {
  padding: 0 9%;
  font-size: 22px;
  letter-spacing: 0.05em;
  counter-reset: num;
}
#nav_fixed .nav_list li {
  display: block;
  margin: 0 0 1.5em;
  counter-increment: num;
}

#nav_fixed .nav_list li a {
  color: #fff;
  font-family: var(--F-fm);
  font-weight: 600;
}
#nav_fixed .nav_list li a:hover {
  border-bottom: 1px dashed var(--C-Dblue);
}
#nav_fixed .nav_list li a::before {
  content: counter(num, decimal-leading-zero);
  margin-right: 0.5em;
  color: var(--C-Dblue);
}
@media screen and (max-width: 1300px) {
  #nav_fixed .nav_list {
    font-size: 1.5vw;
  }
  #nav_fixed .nav_list li {
    margin: 0 0 2vw;
  }
}
@media screen and (max-width: 1140px) {
  #nav_fixed {
    width: 100%;
    height: 0;
    top: 0;
    right: 0;
    left: 0;
    transform: none;
    z-index: 99;
  }
  #nav_fixed.active {
    height: 100vh;

  }
  #nav_fixed .nav_list {
    /* min-width: 74.1vw; */
    opacity: 0;
    pointer-events: none;
    margin-top: -15%;
    font-size: 6vw;
  }
  #nav_fixed.active .nav_list {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-transition: 0.8s;
    transition: 0.8s;

  }
  #nav_fixed .nav_list li {
    margin: 0 0 4vw;
  }
  .overlay {
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--C-lightblue);
  }
  #nav_fixed.active .overlay {
    position: fixed;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  #nav_fixed .nav_list li a {
    transition: none;
  }
}


.wrap {
	width: 100%;
  max-width: 750px;
  position: relative;
  margin: 0 auto;
  background: #fff;
}
@media screen and (max-width: 750px) {
  #cta_fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 22.133vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: url('../imgs/common/cta_bg.webp') no-repeat center bottom;
    background-size: cover;
    z-index: 999;
  }
  #cta_fixed img {
    width: 48.533vw;
    margin-bottom: 2vw;
  }
}
/* ===============================
	mv
 =============================== */
#mv {
  position: relative;
}
#mv .logo {
  position: absolute;
  top: 35px;
  right: 32px;
}
#mv .logo img {
  display: block;
  vertical-align: baseline;
}
@media screen and (max-width: 918px) {
  #mv .logo {
    position: absolute;
    top: 4.533vw;
    right: inherit;
    left: 5.066vw;
  }
  #mv .logo img {
    width: 13.066vw;
  }
}

/* ===============================
	present
 =============================== */
.present {
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.4));
  position: absolute;
  top: 12.8%;
  right: 3.5%;
  z-index: 3;
}
@media screen and (max-width: 750px) {
  .present img {
    width: 34.133vw;
  }
}
/* ===============================
	hamburger
 =============================== */
.hamburger {
  z-index: 999; /* 常に前面 */
  position: relative;
  width: 6.933vw;
  height: 6.933vw;
  cursor: pointer;
  position: fixed;
  top: 2%;
  right: 2%;
  border-radius: 100vw;
  display: none;
  background: #EFEFEF;
}
@media screen and (max-width: 1140px) {
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.hamburger span {
  display: block;
  width: 3.2vw;
  height: 3.2vw !important;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  height: 3px;
  background: url('../imgs/common/menu.svg') no-repeat center;
  background-size: cover;
}


/*close*/
nav.active .hamburger span {
  background: url('../imgs/common/close.svg') no-repeat center;
}

/* ----------------------------------------
	footer
----------------------------------------- */
footer {
  padding: 0 0 50px;
  text-align: left;
  line-height: 1.2;
	position: relative;
}
footer .wrap {
  padding: 0 7.5%;
}
.annotation {
  margin: 0 0 55px;
  padding: 0;
}
.annotation li {
  font-size: 16px;
  margin-bottom: 6px;
}
.annotation li:last-child {
  margin-bottom: 0;
  font-size: 12px;
}
.annotation li span {
  color: #72c4b1;
}
.pp {
  display: block;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  margin-bottom: 20px;
}
.pp a {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
}
.pp a::after {
  content: '';
  display: block;
  width: 17px;
  height: 15px;
  background: url('../imgs/common/icon_link.svg') no-repeat center;
  background-size: cover;
}
.copyright {
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.18em;
}
@media screen and (max-width: 750px) {
  footer {
    padding-bottom: 23vw;
  }
  .annotation {
    margin: 0 0 7.333vw;
  }
  .annotation li {
    font-size: 2.4vw;
    margin-bottom: 0.8vw;
  }
  .annotation li:last-child {
    font-size: 1.866vw;
  }
  .pp {
    font-size: 1.866vw;
    margin-bottom: 2.666vw;
  }
  .pp a::after {
    width: 2.266vw;
    height: 2vw;
  }
  .copyright {
    font-size: 1.866vw;
  }
}

/* ===============================
	utility
 =============================== */
/* 表示・非表示切り替え */
.spNone {/* PCの際に表示 */ display: block;}
.pcNone {/* スマホの際に非表示 */ display: none;}
@media screen and (max-width: 767px) {
  .spNone {/* スマホの際に非表示 */ display: none;}
  .pcNone {/* PCの際に表示 */ display: block;}
}

/* 揃え位置 */
.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}

.posiR {position: relative;}
.over {
	display: flex;
	justify-content: center;
  overflow: visible;
}
.absol {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.disFlex {display: flex; flex-wrap: wrap; justify-content: space-between;}

/* 汎用マージン（デバイス対応） */
.mt-0    { margin-top: 0 !important; }
.mt-8    { margin-top: 8px !important; }
.mt-16   { margin-top: 16px !important; }
.mt-24   { margin-top: 24px !important; }
.mt-32   { margin-top: 32px !important; }
.mt-40   { margin-top: 40px !important; }
.mt-48   { margin-top: 48px !important; }
.mt-64   { margin-top: 64px !important; }

.mb-0    { margin-bottom: 0 !important; }
.mb-8    { margin-bottom: 8px !important; }
.mb-16   { margin-bottom: 16px !important; }
.mb-24   { margin-bottom: 24px !important; }
.mb-32   { margin-bottom: 32px !important; }
.mb-40   { margin-bottom: 40px !important; }
.mb-48   { margin-bottom: 48px !important; }
.mb-64   { margin-bottom: 64px !important; }


@media screen and (max-width: 767px) {
  .mt-8    { margin-top: 2vw !important; }
  .mt-16   { margin-top: 4vw !important; }
  .mt-24   { margin-top: 6vw !important; }
  .mt-32   { margin-top: 8vw !important; }
  .mt-40   { margin-top: 10vw !important; }
  .mt-48   { margin-top: 12vw !important; }
  .mt-64   { margin-top: 16vw !important; }

  .mb-8    { margin-bottom: 2vw !important; }
  .mb-16   { margin-bottom: 4vw !important; }
  .mb-24   { margin-bottom: 6vw !important; }
  .mb-32   { margin-bottom: 8vw !important; }
  .mb-40   { margin-bottom: 10vw !important; }
  .mb-48   { margin-bottom: 12vw !important; }
  .mb-64   { margin-bottom: 16vw !important; }
}

/* 非表示 */
.hide {
  display: none !important;
}

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

/* メディアクエリサンプル */
/* ===============================
	device setting
 =============================== */
@media screen and (min-width: 1281px) {
  /*画面幅が1281px以上（PC専用スタイル）*/
}
@media screen and (max-width: 1280px) {
  /*画面幅が1280px以下（タブレット・スマホ共通スタイル）*/
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  /*画面幅が768px～1280px（タブレット専用スタイル）*/
}
@media screen and (max-width: 767px) {
  /*画面幅が767px以下（スマートフォン専用スタイル）*/
}
@media screen and (max-width: 414px) {
  /*画面幅が414px以下（スマートフォン縦向き専用スタイル）*/
}

/* 印刷用スタイル */
/* ===============================
	print setting
 =============================== */
@media print {
	.printNl {
		page-break-before: always;
	}
}