@charset "utf-8";
/* CSS Document */
/*===共通部分==============
====================================================================*/
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --yellow: #F5E500;
    --dark: #1a2a2a;
    --teal: #1a4040;
    --cream: #FAF6EE;
    --gray: #888;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'DM Sans', sans-serif;
    --font-serif: 'Playfair Display', serif;
  }

  html { scroll-behavior: smooth; }
body {
	font-family: var(--font-jp);
	background:url("../img/bg.jpg");
	color: var(--dark);
	overflow-x: hidden;
	font-weight: 400;
	font-size: clamp(16px,2vw,18px);
	-webkit-font-smoothing: antialiased;/*アンチエイリアスを滑らかに*/
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.7;
}
p{
	letter-spacing: 0.1em;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 600;
	line-height: 1.4;
}

/* 見出しサイズ — clamp(最小, 流動, 最大) でSP〜PCを自動調整 */
h1 { font-size: clamp(28px, 5.5vw, 72px); }
h2 { font-size: clamp(22px, 4vw,  52px); }
h3 { font-size: clamp(18px, 3vw,  36px); }
h4 { font-size: clamp(16px, 2.5vw, 28px); }
h5 { font-size: clamp(14px, 2vw,  22px); }
h6 { font-size: clamp(13px, 1.8vw, 18px); }
a{
	text-decoration: none;
	color: #333;
	transition: .4s;
}
ul,ol{
	list-style: none;
	padding: 0;
}
main{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

section {
	padding: clamp(60px,8vw,100px) 0 ;
	position: relative;
	z-index: 1;
}
table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;/*隙間なし*/
}

/*改行　-------*/
@media (min-width: 451px){
	br.only450{
		display: none;
	}
}

@media (max-width: 450px){
	br.not450{
		display: none;
	}
}

span.ib{
	display: inline-block!important;
}

/*PC・SP表示-----------------------*/
.sp{
	display: none;
}
.pc{
	display: block;
}

@media (max-width: 767px) {
	.sp{
		display: block;
	}
	.pc{
		display: none;
	}
}

/*幅・高さ調整-------*/
.inner{
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}
.inner.wide{
	max-width: 1400px;
}
.inner.max{
	max-width: none;
}
.inner.w960{
	max-width: 960px;
}
/*高さ*/

.mg100{
	margin-bottom: 100px !important;
}
.mg80{
	margin-bottom: 80px !important;
}
.mg60{
	margin-bottom: 60px !important;
}
.mg50{
	margin-bottom: 50px !important;
}
.mg40{
	margin-bottom: 40px !important;
}
.mg30{
	margin-bottom: 30px !important;
}
.mg20{
	margin-bottom: 20px !important;
}
.mg10{
	margin-bottom: 10px !important;
}
.mg0{
	margin-bottom: 0 !important;
}

.pmg5 p{
	margin-bottom: 5px;
}
.pmg p{
	margin-bottom: 10px;
}
.pmg15 p{
	margin-bottom: 15px;
}
.pmg20 p{
	margin-bottom: 20px;
}
.pmg5 p:last-child,
.pmg p:last-child,
.pmg15 p:last-child,
.pmg20 p:last-child{
	margin-bottom: 0;
}

.t_center{
	text-align: center;
}
.t_left{
	text-align: left;
}
/* 画像　-------------------------- */
img{
	width: 100%;
	height: auto;
}
.obj-in{
	width: 100%;
	height: 100%;
	object-fit: contain
}
.obj-cov{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
.img_4-3{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.img_16-9{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*flexbox------------------------*/
.flexbox{
	display: flex;
	flex-wrap: wrap;
}
.f_jsb{
	justify-content: space-between;
}
.f_cent{
	justify-content: center;
}
.fac{
	align-items: center;
}

.comn2{
	width: 48%;
}
.comn3{
	width: calc( 100% / 3 - 20px);
}
.comn4{
	width: 35%;
}
.comn5{
	width: 62%;
}

.f_center{
	align-items: center;
}
@media (max-width: 767px){
	.flexbox{
		flex-direction: column;
	}
	.flexbox.rever{
		flex-direction: column-reverse;
	}
	.comn2, .comn3, .comn4, .comn5 {
		width: 100%;
		margin-bottom: 30px
	}
}



/* =========================
      Header
========================== */
    header{
	  position:fixed;
	  top:0;
	  left:0;
	  right:0;
	  z-index:100;
	  padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 40px);
	  box-sizing:border-box;
}

    .header-inner{
      display:flex;
      align-items:center;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:16px;
      color:#003d3b;
      font-weight:700;
      font-size:48px;
      line-height:1;
	  height: 45px;
	  width:fit-content;	
  	  position:relative;
		margin-right: auto;
    }
	.logo img{
		display:block;  
		height: 45px;
		width: auto;
		object-fit: contain;
	}

    .logo-box{
      width:48px;
      height:48px;
      background:#003d3b;
    }

    /* =========================
      Menu Circle
    ========================== */
    .menu-btn{
      width:140px;
      height:140px;
      background:#003d3b;
      border-radius:50%;
      position:fixed;
      top:-40px;
      right:-40px;
      z-index:120;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.5s;
    }

    .menu-inner{
      margin-top:24px;
      margin-left:-20px;
      color:white;
      text-align:center;
    }

    .menu-lines{
      width:40px;
      margin:0 auto 10px;
    }

    .menu-lines span{
      display:block;
      width:100%;
      height:2px;
      background:white;
      margin:8px 0;
      transition:.4s;
    }

    .menu-text{
      font-size:14px;
      letter-spacing:.08em;
    }

    .menu-open .menu-lines span:nth-child(1){
      transform:translateY(10px) rotate(45deg);
    }

    .menu-open .menu-lines span:nth-child(2){
      opacity:0;
    }

    .menu-open .menu-lines span:nth-child(3){
      transform:translateY(-10px) rotate(-45deg);
    }

	@media(max-width:768px){
		.menu-btn{ width:110px; height:110px; }
		.menu-lines {width: 40px; margin: 15px auto 10px; }
		.menu-lines span{ width:80%; margin:5px 0; }	
		.menu-open .menu-lines span:nth-child(3) {transform: translateY(-5px) rotate(-45deg);}		
    }
	@media(max-width:600px){
		.logo{ max-width: 280px;}	
	.logo img{
		display:block;  
		height: 100%;
		width: 100%;
		object-fit: contain;
	}
		
	}

/*- nav--------------------------------------*/
/* =========================
   Navigation — Plan C
   PC: 左ナビ＋右画像ストライプ
   820px以下: 左カラムのみ
========================== */

nav {
  position: fixed;
  inset: 0;
  background: #003d3b;
  z-index: 110;
  clip-path: circle(0 at top right);
  transition: 1s cubic-bezier(.77, 0, .175, 1);
  overflow: hidden;
}

nav.active {
  clip-path: circle(150% at top right);
}

/* ----- 全体グリッド ----- */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* ----- 左カラム ----- */
.nav-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 48px 40px 64px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}

/* ブランド名 */
.nav-brand {
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .28);
  text-transform: uppercase;
}

/* ナビリスト */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.nav-list li {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}

.nav-list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  text-decoration: none;
  color: rgba(255, 255, 255, .85);
  transition: color .25s, padding-left .25s;
}

.nav-list a:hover {
  color: #95d5b2;
  padding-left: 8px;
}

/* アニメーション: 下から上に */
.nav-list a {
  transform: translateY(100%);
  opacity: 0;
  transition: transform .5s, opacity .4s, color .25s, padding-left .25s;
}

nav.active .nav-list li:nth-child(1) a { transform: translateY(0); opacity: 1; transition-delay: .1s; }
nav.active .nav-list li:nth-child(2) a { transform: translateY(0); opacity: 1; transition-delay: .16s; }
nav.active .nav-list li:nth-child(3) a { transform: translateY(0); opacity: 1; transition-delay: .22s; }
nav.active .nav-list li:nth-child(4) a { transform: translateY(0); opacity: 1; transition-delay: .28s; }
nav.active .nav-list li:nth-child(5) a { transform: translateY(0); opacity: 1; transition-delay: .34s; }
nav.active .nav-list li:nth-child(6) a { transform: translateY(0); opacity: 1; transition-delay: .40s; }

.nav-num {
  font-size: 10px;
  color: rgba(255, 255, 255, .28);
  letter-spacing: .1em;
  min-width: 22px;
  font-family: 'Montserrat', sans-serif;
}

.nav-jp {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .08em;
  font-family: 'Noto Serif JP', serif;
}

.nav-en {
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .3);
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
}

/* ----- お問い合わせ（独立） ----- */
.nav-contact {
  display: flex;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);

  /* アニメーション */
  transform: translateY(20px);
  opacity: 0;
  transition: transform .5s .45s, opacity .4s .45s;
}

nav.active .nav-contact {
  transform: translateY(0);
  opacity: 1;
}

.nav-contact-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(149, 213, 178, .10);
  border: 1px solid rgba(149, 213, 178, .22);
  color: #95d5b2;
  font-size: 13px;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .25s;
}

.nav-contact-btn:hover {
  background: rgba(149, 213, 178, .22);
  color: #95d5b2;
}

.nav-contact-btn i {
  font-size: 15px;
}

/* ----- 右カラム: ホバーストライプ（PC専用） ----- */
.nav-right {
  display: flex;
  flex-direction: column;
}

.nav-stripe {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px 24px;
  text-decoration: none;
  transition: flex .4s cubic-bezier(.4, 0, .2, 1);
}

.nav-stripe + .nav-stripe {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.nav-stripe:hover {
  flex: 2.2;
}

/* 背景画像 */
.nav-stripe-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}

.nav-stripe:hover .nav-stripe-bg {
  transform: scale(1.05);
}

/* 暗幕オーバーレイ */
.nav-stripe-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 40, 35, .75) 0%, rgba(0, 40, 35, .25) 60%, transparent 100%);
  transition: background .4s;
}

.nav-stripe:hover .nav-stripe-overlay {
  background: linear-gradient(to top, rgba(0, 40, 35, .6) 0%, rgba(0, 40, 35, .15) 60%, transparent 100%);
}

/* テキスト */
.nav-stripe-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-stripe-jp {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .9);
  font-family: 'Noto Serif JP', serif;
  transition: color .25s;
}

.nav-stripe:hover .nav-stripe-jp {
  color: #fff;
}

.nav-stripe-en {
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .4);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  transition: color .25s;
}

.nav-stripe:hover .nav-stripe-en {
  color: #95d5b2;
}

/* 矢印 */
.nav-stripe-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 20px;
  color: rgba(255, 255, 255, .2);
  transition: color .25s, right .25s;
}

.nav-stripe:hover .nav-stripe-arrow {
  color: #95d5b2;
  right: 16px;
}

/* 開いたとき アニメーション */
.nav-stripe {
  opacity: 0;
  transform: translateX(20px);
  transition:
    flex .4s cubic-bezier(.4, 0, .2, 1),
    opacity .5s,
    transform .5s;
}

nav.active .nav-stripe:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: .18s; }
nav.active .nav-stripe:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: .26s; }
nav.active .nav-stripe:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: .34s; }
nav.active .nav-stripe:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: .42s; }

/* =========================
   820px以下: 左カラムのみ
========================== */
@media (max-width: 820px) {

  .nav-inner {
    grid-template-columns: 1fr;
  }

  .nav-right {
    display: none;
  }

  .nav-left {
    padding: 72px 24px 28px;
    border-right: none;
  }

  .nav-brand {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .nav-jp {
    font-size: 16px;
  }

  .nav-list a {
    padding: 10px 0;
  }

  /* コンタクトは横並びのまま */
  .nav-contact {
    flex-direction: row;
    gap: 8px;
    padding-top: 16px;
  }

  .nav-contact-btn {
    justify-content: center;
    padding: 10px 12px;
    font-size: 12px;
  }

}
@media (max-width: 420px) {
	.nav-contact {
        flex-direction: column;
	}
}
@media (max-height: 600px) {
    .nav-left {
        padding: 40px 20px 20px;
        border-right: none;
    }	
    .nav-jp {
        font-size: 14px;
    }	
}


/* =================================
   CTA
================================= */

.cta-section{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
}

.cta-bg{
  position: absolute;
  inset: 0;
}

.cta-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-overlay{
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.82),
      rgba(12,20,16,.72)
    );
}

.cta-wrap{
  position: relative;
  z-index: 2;
}


/* =================================
   Heading
================================= */

.cta-heading{
  max-width: 760px;
  margin-bottom: 70px;
}

.cta-label{
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #95d5b2;
  margin-bottom: 18px;
}

.cta-title{
  font-size: clamp(24px, 4vw, 50px);
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  margin-bottom: 30px;
}

.cta-text{
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 2;
}


/* =================================
   Grid
================================= */

.cta-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}


/* =================================
   Box
================================= */

.cta-box{
  border-radius: 32px;
  padding: 42px;

  backdrop-filter: blur(12px);
}

.contact-box{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.line-box{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.cta-box-label{
  color: #95d5b2;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cta-box-title{
  color: #fff;
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 20px;
}

.cta-box-text{
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 2;
  margin-bottom: 36px;
}


/* =================================
   Main Contact Button
================================= */

.cta-main-btn{
  display: flex;
  align-items: center;
  gap: 18px;

  width: 100%;
  min-height: 100px;

  padding: 24px 28px;
  margin-bottom: 18px;

  border-radius: 24px;

  background: rgba(0,0,0,.22);

  text-decoration: none;

  transition: .35s;
}

.cta-main-btn:hover{
  transform: translateY(-4px);
  background: rgba(0,0,0,.32);
}

.cta-main-btn .icon{
  width: 62px;
  height: 62px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #2d6a4f;

  color: #fff;
  font-size: 22px;

  flex-shrink: 0;
}

.cta-main-btn .text{
  display: flex;
  flex-direction: column;
}

.cta-main-btn small{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-bottom: 6px;
}

.cta-main-btn strong{
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}


/* =================================
   LINE Service
================================= */

.line-service-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.line-service-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  min-height: 90px;
  padding: 22px 24px;

  border-radius: 22px;

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

  text-decoration: none;

  transition: .35s;
}

.line-service-item:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.1);
}

.service-name{
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.service-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #95d5b2;
  font-size: 13px;
  font-weight: 500;

  white-space: nowrap;
}

.service-link i{
  font-size: 20px;
}


/* =================================
   Responsive
================================= */

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

  .cta-section{
    padding: 100px 0;
  }

  .cta-grid{
    grid-template-columns: 1fr;
  }

}

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

  .cta-text{
    font-size: 14px;
  }

  .cta-box{
    padding: 28px 22px;
    border-radius: 24px;
  }

  .cta-box-title{
    font-size: 28px;
  }

  .cta-main-btn{
    padding: 20px;
  }

  .cta-main-btn strong{
    font-size: 18px;
  }

  .line-service-item{
    flex-direction: column;
    align-items: flex-start;
  }

}

/* =================================
   FOOTER
================================= */

.footer{
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      #18211d 0%,
      #121916 100%
    );

  color: #fff;

  padding-top: 110px;
}


/* =================================
   TOP
================================= */

.footer-top{
  display: flex;
  justify-content: space-between;
  gap: 100px;

  padding-bottom: 80px;
}


/* =================================
   LEFT
================================= */

.footer-company-area{
  max-width: 420px;
}

.footer-logo{
  display: inline-block;
  margin-bottom: 32px;
}

.footer-logo img{
  width: 320px;
}

.footer-message{
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 2;

  margin-bottom: 40px;
}

.footer-info{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-info p{
  color: rgba(255,255,255,.5);
  font-size: 14px;
  line-height: 2;
}

.footer-info a{
  color: rgba(255,255,255,.72);
  text-decoration: none;

  transition: .3s;
}

.footer-info a:hover{
  color: #95d5b2;
}


/* =================================
   RIGHT
================================= */

.footer-nav-area{
  display: flex;
  gap: 80px;
}

.footer-nav-group{
  min-width: 220px;
}

.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav li{
  list-style: none;
}

.footer-nav a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.8;

  transition: .3s;
}

.footer-nav a:hover{
  color: #95d5b2;
}


/* =================================
   LINE
================================= */

.footer-line-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-line-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-width: 240px;

  padding: 14px 18px;

  border-radius: 16px;

  background: rgba(149,213,178,.05);

  text-decoration: none;

  transition: .35s;
}

.footer-line-item:hover{
  background: rgba(149,213,178,.1);
  transform: translateY(-2px);
}

.footer-line-item span{
  color: #fff;
  font-size: 13px;
}

.footer-line-item i{
  color: #95d5b2;
  font-size: 18px;
}


/* =================================
   BOTTOM
================================= */

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.06);

  padding: 26px 0;
}

.footer-copy{
  color: rgba(255,255,255,.35);
  font-size: 12px;
  letter-spacing: .08em;
}


/* =================================
   Responsive
================================= */

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

  .footer-top{
    flex-direction: column;
    gap: 70px;
  }

  .footer-nav-area{
    flex-wrap: wrap;
    gap: 50px;
  }

}

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

  .footer{
    padding-top: 80px;
  }

  .footer-logo img{
    width: 200px;
  }

  .footer-message{
    font-size: 14px;
  }

  .footer-nav-area{
    flex-direction: column;
    gap: 42px;
  }

  .footer-nav-group{
    min-width: initial;
  }

  .footer-line-item{
    min-width: initial;
  }

}

/* =========================
   sp-cta
========================== */
.sp-cta{
display:none;
}
@media (max-width:580px){

.sp-cta{
display:flex;
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:100;
}

.sp-cta a{
flex:1;
text-align:center;
padding:16px;
color:#fff;
font-weight:bold;
text-decoration:none;
}

.sp-cta-tel{
background:#2d6a4f;
}

.sp-cta-mail{
background:#003d3b;
}

body{
padding-bottom:60px;
}

}
@media (max-width: 400px) {
    .sp-cta a {
        padding: 8px 16px;
    }
	body{
		padding-bottom:34px;
	}
}