@charset "utf-8";

@media (max-width: 768px) {
  .sp {
    display: inline; /* スマホでは表示 */
  }
	.pc {
    display: none; /* PCでは表示 */
  }
}

@media (min-width: 769px) {
  .sp {
    display: none; /* PCでは非表示 */
  }
	.pc {
    display: inline; /* スマホでは非表示 */
  }
}
/* ヘッダー全体 ****************************************************/
header{

}
.header-pc ,.overlay_head{
  display: flex;
  align-items: center;
  width: 100%;
  height: 130px;
  position: relative;
  z-index: 99;
  padding:0 400px 0 0;
  box-sizing: border-box;
}

/* 左ロゴ */
.header-logo {
  position: fixed;
  max-width: 310px;
  flex-shrink: 0;
}
.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */
.header-pc ,.overlay_head{
  height: 84px;
 }
.header-logo {
  max-width: 200px;
}	
.header-pc ul{
	display: none !important;
}	
	
}
@media (min-width: 768px) and (max-width: 1700px) {
  /* タブレット用のスタイル */

.header-logo {
  position: fixed;
  max-width: 280px;
  top:0;
  flex-shrink: 0;
}
.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}
}

/* ナビゲーション */
.header-pc > ul.main-navi {
  display: flex;
  justify-content: center;
  gap: 1.7em; /* メニュー間の余白を統一 */
  align-items: center;
  list-style: none;
  margin: 0 20px;
  padding: 25px 0 0 370px;
  min-width: 0;
  height: 100%;
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.9em;
  font-weight: 900;
}



/* 各ナビ項目 */
.header-pc ul.main-navi li {
  flex: 1;
  text-align: center;
  display: block;
}
.header-pc ul.main-navi li a {
  display: block;
  height: 100%;
  line-height: 130px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.header-pc ul.main-navi li:hover a {
  color: #00a4b0; /* ホバーまたはアクティブ時 */
}

/* 右のスティッキーエリア */
.navi-sticky {
  position: fixed;
  top: 35px;         
  right: 50px;       
  display: flex;
  align-items: center;
  gap: 1.5em;
  max-width: 350px;
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.5em;
  font-weight: 800;
  z-index: 1000;     /* ヘッダーより上に表示 */
}

/* 中の各要素（Recruitボタンとハンバーガー） */
.navi-sticky div {
  white-space: nowrap;
}
/* Recruit ボタン */
.navi-sticky .recruit a {
  color: #fff;
  background-color: #00a4b0;
  border-radius: 40px;
  padding: .5em 1.5em;
  transition: opacity 0.5s;
}
.navi-sticky .recruit a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 26px;
  background: url("../image/ico_recruit.png") no-repeat;
  background-size: contain;
  margin-left: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
}

/* ハンバーガーアイコン */
.hamburger {
  width: 80px;  /* 幅を調整 */
  height: 80px;  /* 高さを調整 */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* アイコンを垂直中央に配置 */
  align-items: center;
  cursor: pointer;
  background-color: #00a4b0;  /* 背景色 */
  border-radius: 50%;  /* 円形にする */
  padding: 5px;  /* 内側の余白 */
}

.hamburger span {
  display: block;
  width: 40px;  /* 幅を調整 */
  height: 5px;  /* 太さを調整 */
  background-color: #fff;  /* 白色 */
  border-radius: 2px;  /* 丸みをつける */
  margin: 2.5px 0;  /* 上下に5pxの間隔を作る */
}
/* ハンバーガーアイコンをクリックした時に動くアニメーション */
.hamburger.active span {
  background-color: #fff;  /* アクティブ時に線が白になる */
}
/* 閉じるボタン */
.close-btn {
  width: 80px;  /* 幅を調整 */
  height: 80px;  /* 高さを調整 */
  display: flex;
  justify-content: center;  /* アイコンを水平方向に中央に配置 */
  align-items: center;  /* アイコンを垂直方向に中央に配置 */
  cursor: pointer;
  background-color: #fff;  /* 背景色 */
  border-radius: 50%;  /* 円形にする */
  padding: 0 0 .1em 0;  /* 内側の余白は不要 */
  color: #00a4b0;
  font-size: 2.5em;  /* アイコンのサイズ */
  font-weight: 500;
  line-height: 1;  /* 行の高さを調整 */
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */
.navi-sticky {
  top: 10px;         
  right: 10px;       
 }
/* ハンバーガーアイコン */
.hamburger {
  width: 65px;  /* 幅を調整 */
  height: 65px;  /* 高さを調整 */
  padding: 3px;  /* 内側の余白 */
}
/* 閉じるボタン */
.close-btn {
  width: 65px;  /* 幅を調整 */
  height: 65px;  /* 高さを調整 */
  font-size: 2em;  /* アイコンのサイズ */
}
}
@media (min-width: 1460px) and (max-width: 1700px) {
  /* タブレット用のスタイル */
.header-pc > ul.main-navi {
  font-size: 1.6em;
  padding: 25px 0 0 34%;

}	
.header-pc > ul.main-navi {
  gap: 6%; /* メニュー間の余白を統一 */
}
/* 右のスティッキーエリア */
.navi-sticky {
  right: 2%;       
}
}
@media (min-width: 768px) and (max-width: 1460px) {
.header-pc > ul.main-navi {
   display: none;
}
	
}
/* メニューオーバーレイ */
.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #00a4b0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transform: translateY(30px); /* ← transition用のtransform */
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.menu-overlay.active {
  opacity: 1;
  transform: translateY(0); /* ← 表示時にふわっと出る */
  pointer-events: auto;
}



/* メニューオーバーレイの中 */
/* ロゴ */
.menu-overlay .overlay_logo{
	position: absolute;
	height: 130px;
	top:0;
	left:0;
	display: flex;
	gap:1em;
}
.menu-overlay .overlay_logo .header-logo {
  max-width: 310px;
  flex-shrink: 0;
}
.menu-overlay .overlay_logo .header-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.menu-overlay .introduction {
  padding-left: 330px;
  font-size: 1.2em;
	font-weight: 400;
  height: 130px;
  display: flex;          /* 子要素の配置を制御できるように */
  align-items: flex-end;  /* 下揃え */
}
/* Recruit ボタン */
.menu-overlay .navi-sticky .recruit a {
  color: #00a4b0;
  background-color: #fff;
  
}
.menu-overlay .navi-sticky .recruit a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 26px;
  background: url("../image/ico_recruit_o.png") no-repeat;
  background-size: contain;
  margin-left: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
}

.hamburger-menu {
	width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 垂直方向の揃え位置 */
  gap: 2em; /* 各列の間隔 */
  padding: 180px 7em 0;
}

.hamburger-menu .image_area,
.hamburger-menu .navi_area,
.hamburger-menu .access_area {
  flex: 1; 
}
.hamburger-menu .image_area{
	text-align: center;
	position: relative;
    min-height: calc(100vh - 180px);
}
.hamburger-menu .image_area .shapes{
	width:100%;
	margin: 2em auto 0;
}
.hamburger-menu .image_area .shapes img{
	width:100%;
	max-width: 535px;
	height: auto;
}
.hamburger-menu .image_area .pure{
	width:90%;
	position: absolute;
	right:0;
	bottom:0;
	line-height: 0;
}
.hamburger-menu .image_area .pure img{
	width:100%;
	max-width: 360px;
	height: auto;
}
.hamburger-menu .navi_area .contact_area_sp ,.access_area_sp{
  display: none;	
}
.hamburger-menu .navi_area ul {
font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.8em;
  font-weight: 900;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hamburger-menu .navi_area li {
  margin-bottom: 1.3em;
  text-align: left;
	padding-left: 4em;
}
.hamburger-menu .navi_area li a {
  color: #fff;
  text-decoration: none; /* aタグには下線をつけない */
  display: inline-block;
  text-align: left;
}
.hamburger-menu .navi_area li a:hover,
.hamburger-menu .navi_area li.active a {
  /* 擬似要素の幅・色を調整 */
	color:#ffe100;
}
.hamburger-menu .navi_area li a:hover .sabmenu,
.hamburger-menu .navi_area li.active a .sabmenu {
  /* 擬似要素の幅・色を調整 */
	color:#ffe100;
}
  
.hamburger-menu .navi_area ul .sabmenu {
  display: block;
  font-size: 0.5em;
  font-weight: 300;
  position: relative;
  padding-bottom: 5px;
  margin-top: -.7em;    

}



/* menu-overlay内のキャラクター */
@keyframes rotateZoomUp {
  0% {
    opacity: 0;
    transform: translateY(150px) rotate(-45deg) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) rotate(10deg) scale(1.1);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.slide-up {
  animation: rotateZoomUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* menu-overlay内のキャラクター ここまで */

.access_area {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 180px);
}
.access_area .access-text{
  margin-top: auto; /* ← これで一番下に寄る！ */
}
.access_area .access-text h3{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.8em;
  font-weight: 900;
  list-style: none;
  padding: 0;
  margin: 0;	
} 
.access_area .access-text h3 .sabmenu {
  display: block;
  font-size: 0.5em;
  font-weight: 300;
  position: relative;
  margin-bottom: 1.8em;
  margin-top: -.7em;    
}
.access_area .access-text p{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.5em;
  font-weight: 900;
  padding: 0;
  margin: 0;
  line-height: 1.6em;
}
.access_area .access-text p a{
	color:#fff;
}
.access_area .access-text p:last-of-type{
	margin-bottom: 2.5em;
}
.access_area .access-text p span{
	padding-left:1em;
}
.access_area .access-text .add{
	font-size: .8em;
}
.access_area .access-text .button{
	margin: 1em auto 4em;
}
.access_area .access-text .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: .8em;
  font-weight: 800;
  background-color: #fff;
  color:#00a4b0;
  border-radius: 40px;
  padding: .3em 1em;
  transition: opacity 0.5s;
}
.access_area .access-text .button a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  background: url("../image/ico_menu.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
.access_area .access-text .button a:hover{
  background-color: #000;
  color: #fff;
}
.access_area .access-text .button a:hover::after {
  background-image: url("../image/ico_footer_o.png");
}
@media (min-width: 1400px) and (max-width: 1700px) {
/* メニューオーバーレイの中 */
.hamburger-menu {
  gap: 1em; /* 各列の間隔 */
  padding: 180px 4em 0;
}
.access_area .access-text p{
	font-size: 1.3em;
}	
	
}
@media (min-width: 1000px) and (max-width: 1400px) {
.hamburger-menu {
  gap: .7em; /* 各列の間隔 */
  padding: 180px .7em 0;
}
.access_area .access-text p{
	font-size: 1em;
}
}

@media (max-width: 999px) {
	/* スマホ用のスタイル */
/* メニューオーバーレイの中 */
/* ロゴ */
.menu-overlay .overlay_logo{
	height: 84px;
}
.menu-overlay .overlay_logo .header-logo {
  max-width: 200px;
  flex-shrink: 0;
}

/* Recruit ボタン */
.menu-overlay .navi-sticky .recruit{
	display:none;
}
/* introduction */
.menu-overlay .introduction{
	display:none;
}	
/* 3カラムの左右 */	
  .hamburger-menu .image_area,
  .hamburger-menu .access_area {
    display: none !important;
  }	
.hamburger-menu {
  display: block;
  height: auto;
  width: 100%; /* 幅を100%に設定 */
  padding: 0;
}
.hamburger-menu .navi_area ul {
  display: flex !important;
  flex-wrap: wrap;
  width: 90% !important;
  padding: 2em 1em 0 !important;
  height: auto !important;
  margin: 0 auto;
   font-size: 1.2em;
  border-bottom:4px solid #fff;
}

.hamburger-menu .navi_area ul li {
  width: 50% !important; /* 各アイテムが50%の幅を持ち、2列に並ぶ */
  padding: .5em; 
  box-sizing: border-box; /* パディングを含めて幅を調整 */
  padding-left: 0;
   margin-bottom: 0;
}
.hamburger-menu .navi_area ul li:nth-child(2n){
  padding-left:.2em;
	}
/* 下線を擬似要素で作る */
.sabmenu::after {
  height: 3px;
}
.hamburger-menu .navi_area .contact_area_sp ,.hamburger-menu .navi_area .access_area_sp{
  display: block;
}
.hamburger-menu .navi_area .contact_area_sp{
   border-bottom:4px solid #fff;
   width: 90%;
   padding: 0 1em;
   margin: 0 auto;
	display: flex;
}	
.contact_area_sp h3{
	flex: 1;
	font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.1em;
  font-weight: 900;
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact_area_sp h3 .sabmenu {
  display: block;
  font-size: 0.6em;
  font-weight: 300;
  position: relative;
  margin-bottom: 1.8em;
  margin-top: -.7em;    
}
.contact_area_sp .icon-area_sp{
	flex: 2;
	display: flex;
	gap:1em;
}
.contact_area_sp .icon-area_sp div{
	padding-top: 2em;
	flex: 1;
}
.contact_area_sp .icon-area_sp div a {
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: .6em;
}

.contact_area_sp .icon-area_sp div a img {
   filter: brightness(0) invert(1); /* 黒→白の反転 */
  transition: filter 0.3s ease;
}
.hamburger-menu .navi_area .access_area_sp{
   width: 90%;
   padding: 1em;
   margin: 0 auto;
}
.hamburger-menu .navi_area .access_area_sp{
   width: 90%;
   padding: 0 1em;
   margin: 0 auto;
}
.access_area_sp h3{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.1em;
  font-weight: 900;
  list-style: none;
  padding: 0;
  margin: 0;
}
.access_area_sp h3 .sabmenu {
  display: block;
  font-size: 0.6em;
  font-weight: 300;
  position: relative;
  margin-bottom: .8em;
  margin-top: -.7em;    
}
.access_area_sp .add{
	font-size: .6em;
}
.access_area_sp .button{
	margin: 1em 0;
	text-align: right;
}

.access_area_sp .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: .8em;
  font-weight: 800;
  background-color: #fff;
  color:#00a4b0;
  border-radius: 40px;
  padding: .3em 1em;
  transition: opacity 0.5s;
}
.hamburger-menu .navi_area ul li.button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: .8em;
  font-weight: 800;
  background-color: #fff;
  color:#00a4b0;
  border-radius: 40px;
  padding: 0 1em;
  transition: opacity 0.5s;
}
.access_area_sp .button a::after ,.hamburger-menu .navi_area ul li.button a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  background: url("../image/ico_menu.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
.access_area_sp .button a:hover ,.hamburger-menu .navi_area ul li.button a:hover{
  background-color: #000;
  color: #fff;
}
.access_area_sp .button a:hover::after ,.hamburger-menu .navi_area ul li.button a:hover::after {
  background-image: url("../image/ico_footer_o.png");
}
}



/* フッター全体 ****************************************************/
footer {
  background-image: url("../image/footer_bg.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  padding:4em 0 2em;
}
footer .container {
   display: flex;
	gap:3em;
}
footer .container .left{
  flex: 2;
  text-align: center;
  color:#00a4b0;
  padding-top:3.5em;
  padding-right: 4em;
}
footer .container .right{
	flex: 3;
	position: relative;

}
footer .left h2{
	padding-top:.5em;
	font-size: 1.2em;
}
footer .left h3{
	font-size: .8em;
}
footer .right .contact-area {
  background-image: url("../image/f_contact-bg.png");
  background-repeat: no-repeat;
  background-size: auto; /*元サイズ表示 */
  background-position: left center; 
  width:100%;
  max-width: 563px;
  text-align: center;
  padding:2em 5em;
	position: relative;
	z-index: 10;
}
footer .right .contact-area h4{
  font-family: "M PLUS Rounded 1c", serif;
	font-weight: 900;
	font-size: 1.5em;
}
footer .right .contact-area .icon-area{
	display: flex;
	gap:3em;
	color:#00a4b0;
}
footer .right .contact-area .icon-area div{
	flex: 1;
	display: block;
}

footer .right .contact-area .icon-area a {
  display: block;
  text-align: center;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size:.8em;
}


footer .right .contact-area .icon-area a img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

footer .right .contact-area .icon-area a:hover {
  color: #00a4b0;
}

footer .right .contact-area .icon-area a:hover img {
  filter: grayscale(0%);
}

footer .right .pure{
	position: absolute;
	top:3.3em;
	left:-76px;
	z-index: 1;
}
footer .right .access-text{
	font-size:.75em;
}
footer .right .button{
	margin: 1em auto;
}
footer .right .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1em;
  font-weight: 800;
  background-color: #fff;
  color:#000;
  border-radius: 40px;
  border:3px solid #000;
  padding: .3em 1em;
  transition: opacity 0.5s;
}
footer .right .button a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  background: url("../image/ico_footer.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
footer .right .button a:hover{
  background-color: #00a4b0;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ccc; /* 外側に黒枠 */
}
footer .right .button a:hover::after {
  background-image: url("../image/ico_footer_o.png");
}
footer .right .button02{
	margin: 1.5em 0 2em 1em;
}
footer .right .button02 a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1em;
  font-weight: 800;
  background-color: #000;
  color:#fff;
  border-radius: 40px;
  padding: .3em 1em;
  transition: opacity 0.5s;
}
footer .right .button02 a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  background: url("../image/ico_footer_o.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
footer .right .button02 a:hover{
  background-color: #00a4b0;
  color: #fff;
}

/* フッターナビゲーション */
footer ul {
　width:100%;
	max-width: 560px;
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly; 
  align-items: center;
  list-style: none;
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1em;
  font-weight: 900;
}

footer ul li {
  text-align: center;
　padding:0 .5em;
}
footer ul li a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

footer ul li:hover a{
  color: #00a4b0; /* ホバー時 */
}
footer .copy{
	font-size: .7em;
	margin-left: 1.5em;
}
/* ページトップ */
.scroll-top {
  position: absolute;
  top: 7em;
  right: -9em;
  cursor: pointer;
}

.scroll-top img {
  width: 157px;
  height: 151px;
}

@media (min-width: 769px) and (max-width: 1500px) {
footer .container .left img{
	width:100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
}	
}

@media (max-width: 768px) {
	/* スマホ用のスタイル */

footer {
  background-image: url("../image/footer_bg_sp.png");
  background-position: center bottom;
  background-size: 100% auto;
  padding:2em 0 1em;
}	
footer .container {
   flex-direction: column;
	gap:3em;
}
footer .container .left{
  width: 100%;
  padding-top:0;
  padding-right: 0;
}
footer .container .left img{
	width:70%;
	margin: 0 auto;
}
footer .left h2{
	padding-top:0;
	font-size: 1em;
}
footer .left h3{
	font-size: .7em;
}
footer .container .right{
  width: 100%;
  position: relative;
  line-height: 1.4em;
}
footer .right .contact-area {
  background-size: 100%; 
  background-position: center top; 
  width:90%;
  margin: 0 auto 2em;
  text-align: center;
  padding:.5em 1em ;
}
footer .right .contact-area h4{
	font-size: 1em;
}
footer .right .contact-area .icon-area{
	gap:2em;
	color:#00a4b0;
}

footer .right .contact-area .icon-area a {
  font-size: .7em;
}
 footer .right .contact-area .icon-area img {
    width: 30% !important;
    height: auto;
    display: block;
    margin: 0 auto;
  }
footer .right .pure{
	top:-2em;
	left:1.3em;
}
footer .right .pure img{
	width:50%;
	height: auto;
}
footer .right .access-text{
	font-size:.6em;
}
footer .right .button{
	margin: .5em auto .7em;
}
footer .right .button a{
  font-size: .7em;
  border:2px solid #000;
  padding: .2em 1em;
  transition: opacity 0.5s;
}

footer .right .button02{
	margin: 1em 0 2em 1em;
}
footer .right .button02 a{
  font-size: .9em;
  padding: .1em 1em;
}


/* フッターナビ */
footer ul {
  width:80%;
  margin: 0 auto;
  font-size: .7em;
  font-weight: 900;
  justify-content: space-between;
}
footer ul li {
  text-align: center;
　padding:0;
}

footer .copy{
	font-size: .5em;
	text-align: center;
	margin-left:auto;
}	
/* ページトップ スマホは非表示 */	
.scroll-top {
    display: none !important;
  }
	
}