/* =========================================================
		common
========================================================= */
html{overflow-x: hidden; box-sizing: border-box;  scroll-behavior: smooth;
scroll-padding-top: 70px;}
body {font-family: "Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif; color: #2d2d2d; line-height: 1.8; margin: 0; padding: 0; letter-spacing: 1px; overflow-x: hidden; font-size: clamp(0.9rem, 0.95rem + 0.4vw, 1rem); background: #eef7f3;font-weight: 500; color: #333;}
.pc-none{ display:none;}

@font-face {
  font-family: 'nikumaru';
  src: url("../font/07NikumaruFont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  }


a {transition: .3s; color: #2d2d2d;}
a:hover{opacity: 0.7;}
.wrapper{
  padding:  70px 0;
  width: 94%;
  max-width: 900px;
  margin: 0 auto;
}

.anc{
  margin-top: -50px;
  padding-top: 50px;
}

:root {
  --spot1:#e14f63;
  --spot2:#d98234;
  --spot3:#dea71b;
  --spot4:#56b473;
  --spot5:#2d7a5d;
  --spot1_bg:#f9eef5;
  --spot2_bg:#f9f4ee;
  --spot3_bg:#f9f8ee;
  --spot4_bg:#f5f9ee;
  --spot5_bg:#deefe6;
  --spot_bg:#e9f4f8;
  --kanko_bg:#dfe8f2;
  --main-color:#0076a9;
  --yellow_color:#f7e041;
  --sky_color:#32adc6;
  --brown_color:#a98667;
  --font-14: 0.875rem;
  --font-18: 1.125rem;
  --font-20: 1.25rem;
  --font-22:1.375rem;
  --font-26:1.625rem;
  --font-30: 2rem;
  --font-36: 2.25rem;
}

picture,img{
  vertical-align: bottom;
}

img{
  pointer-events: none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
 }


.ttl_area{
  font-family: 'nikumaru', sans-serif;
  font-weight: 400;
  font-synthesis: none;
  text-align: center;
  margin-bottom: 2%;
}

.ttl_sub{ font-size: var(--font-26); position: relative; display: inline-block; }
.ttl_sub2{ font-size: var(--font-22); }
.ttl_mini{ font-size: var(--font-36); line-height: 1.2; }

.ttl_sub::before{
  content: "";
  position: absolute;
  display: inline-block;
  width: 40%;
  height: 2px;
  left: -50%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-color: var(--main-color);
}

.ttl_sub::after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 40%;
  height: 2px;
  right: -50%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-color: var(--main-color);
}
.ttl_main{ font-size: 46px; letter-spacing: .2rem; line-height: 1.2;}
.ttl_main span{ font-size: 120%; letter-spacing:-.2rem;}
.main_desc{font-size: var(--font-18);}


.more_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 200px);
    min-height: 36px;
    margin-inline: auto;
    padding: 7px 42px 7px 38px;
    border-radius: 999px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-top: 3%;
    font-size: var(--font-20);
}

.more_btn::after {
    content: "";
    position: absolute;
    right: 28px;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}


.header {
	z-index: 100;
	background: #fff;
  position: fixed;
  width: 100%;
  top: 0;
}

.header_inner {
  width: 95%;
	max-width: 1200px;
	min-height: 70px;
	margin: 0 auto;
	padding: 5px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-sizing: border-box;
}

.header_logo {
	display: block;
	flex-shrink: 0;
	width: 100px;
}


.header_list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.header_list a {
	display: block;
	font-size: var(--font-14);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}


.header_list .header_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 5px 26px 5px 20px;
	border-radius: 100px;
	background: var(--main-color);
	color: #fff;
	font-weight: 600;
}

.header_btn span { font-size: 20px;line-height: 1;}
.header_menu { display: none;}




/* footer */

.footer{ background: #eef7f3;}
.footer .wrapper{ padding-bottom: 3%;}
.footer_logo{ width: 15%; margin: 0 auto 20px;}
.footer_nav_list{ display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;}
.contact{ text-align: center; width: 70%; margin: 30px auto;}
.contact_ttl { background: var(--sky_color); color: #fff; display: inline-block; padding: 3px 30px;}
.contact_content{ background: #fff; padding: 25px 50px 10px; margin-top: -20px;}
.copyright{ font-size: 10px; text-align: center; margin-top: 2%;}
#page-top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 1%;
  bottom: 1%;
  background: var(--sky_color);
  opacity: 0.6;
  border-radius: 50%;
}
#page-top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f102";
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -20px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


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

  html{scroll-padding-top: 65px;}
  .wrapper{ padding: 50px 0;}
	.header_inner { min-height: 64px; padding: 8px 0; gap: 15px; }
	.header_logo { width: 70px;}
	.header_menu {
		position: relative;
		display: block;
		flex-shrink: 0;
		width: 34px;
		height: 34px;
		padding: 0;
		border: none;
		border-radius: 2px;
		background: #0083ae;
		cursor: pointer;
	}

	.header_menu span {
		position: absolute;
		left: 6px;
		width: 22px;
		height: 2px;
		background: #fff;
		transition: transform 0.3s, opacity 0.3s;
	}

	.header_menu span:nth-child(1) { top: 8px; }
	.header_menu span:nth-child(2) { top: 16px;}
	.header_menu span:nth-child(3) { top: 24px;}
	.header_menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg);}
	.header_menu[aria-expanded="true"] span:nth-child(2) { opacity: 0;}
	.header_menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg);}
	.header_nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
    height: 100vh;
		overflow-y: auto;
		background: #fff;
		box-shadow: 0 8px 12px rgb(0 0 0 / 8%);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition:
			opacity 0.3s,
			transform 0.3s,
			visibility 0.3s;
	}

	.header.is-open .header_nav { visibility: visible; opacity: 1; pointer-events: auto; }
	.header_list { flex-direction: column; align-items: stretch; gap: 0; padding: 10% 24px 24px;}
	.header_list > li > a { padding: 18px 0; text-align: center;}
	.header_list .header_btn { margin-top: 12px;}
  .ttl_sub{ font-size: 1rem;}
  .ttl_sub::before{ width: 50px; left: -60px;}
  .ttl_sub::after{ width: 50px; right: -60px; }
  .ttl_main{ font-size: 24px; line-height: 1.3; }
  .main_desc{ font-size: 15px;}
  .ttl_sub2{ font-size: var(--font-18);}
  .ttl_mini{ font-size: 21px;}
  .desc{font-size: var(--font-14);}
  .more_btn{ padding: 3px 14px 3px 12px; font-size: 1rem; margin-top: 4%;}
  .footer_logo{ width: 30%; max-width: 100px;}
  .footer_nav_list{ flex-direction: column; gap: 5px;}
  .contact{ width: 100%;}
  .contact_ttl,.contact_content{ font-size: var(--font-14);}
  .contact_content{ padding: 25px 4px 10px;}
  .sp-none{display: none!important;}

  .sample_card_img{margin-bottom: 20px;}
}

@media screen and (max-width: 700px) {
  .pc-none{ display:block;}
}