@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");
@import url("main.css");

/*カスタム
---------------------------------------------------------------------------*/
:root {

	--primary-color: rgb(22, 164, 68);			
	--primary-inverse-color: #fff;	

	--secondary-color: #30363d;			
	--secondary-inverse-color: #fff;	
	--accent-color: #c43311;			
	--accent-inverse-color: #fff;	

	--content-space: 4rem;
	--s-font-:'中ゴシックBBB JIS2004';
	--fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1"Font Awesome 6 Free";
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1"Font Awesome 6 Brands";
}

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: clamp(14px, 2.5vw, 16px);
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 17px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

body {
	margin: 0;padding:0;
font-family:""M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;";
	-webkit-text-size-adjust: none;
	background: #fff;	
	color: #1b1a1a;		
	overflow-x: hidden;
	
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
table {border-collapse:collapse;}
p {margin: 0;}
/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
video {max-width: 100%;}

iframe {width: 100%;}

input {font-size: 1rem;}

/*section*/
section {
	padding: 4% 5%;
   margin: 20px 0;

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

section {
		padding: 20px;

  
}}
/* PCでのみ表示（スマホでは非表示） */
.pc {
  display: block;          /* 通常時は表示 */
}

/* スマホでのみ表示（PCでは非表示） */
.sp {
  display: none;           /* 通常時は非表示 */
}

/* スマホサイズ（768px未満）の設定 */
@media (max-width: 767px) {
  .pc {
    display: none;        /* スマホサイズでは非表示 */
  }
  
  .sp {
    display: block;       /* スマホサイズでは表示 */
  }
}

/*リンクテキスト全般の設定
------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}

/*大枠
-------------------------------------------*/
#container {
	position: relative;
	animation: opa1 1s 1s both;	/*1秒待機し、1秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0 auto;
}

header a { text-decoration:none; color:inherit; }
#logo a { display:block; max-width:250px; }

/* ========================
   ヘッダー
======================== */
#header {
  position: fixed;
  top:0; left:0;
  width:100%;
  height:80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px;
  background: #fff;
  z-index:9999;
}

#logo { width: 215px; 
	margin-left: 3%;
}
/* ========================
   PCナビ
======================== */

#gnavi {
  display:flex;
  align-items: center;
  gap:15px;
  list-style:none;
   margin-right: 104px; /* Contactボタンの分だけ余白 */
}

  #gnavi li.contact a {
  display: block;
  width: 110px;
  height: 80px;
  background-color: green;
  color: white;
  text-align: center;
  line-height: 60px;
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;

}
/* PCナビ ホバーライン */
#gnavi li a {
  position: relative;
  text-decoration: none;
  color: #000;
  padding: 10px 15px;
  font-size: 16px;
  font-family: sans-serif;
}
@media screen and (min-width: 768px) {
 /* 下線用の疑似要素 */
#gnavi li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* テキストの下に配置 */
  width: 100%;
  height: 2px;
  background: green;
  transform: scaleX(0);
  transform-origin: right; /* 右から伸びる */
  transition: transform 0.3s ease;
}

/* hover時に左からラインが伸びる */
#gnavi li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Contactボタンには適用しない */
#gnavi li.contact a::after {
  display: none;
}
}
/* ========================
   言語切り替え用のスタイル
======================== */

#gnavi li.lang-switcher .lang-border {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  color: #888;

}

/* リンク自体の色 */
#gnavi li.lang-switcher a {
  color: #888 !important;
  text-decoration: none;
}

/* 現在表示中の言語 */
#gnavi li.lang-switcher .active-lang {
  font-weight: bold;
  color: #333 !important; /* アクティブな方は少し濃く */

}

/* スラッシュの色 */
#gnavi li.lang-switcher .lang-border {
  color: #ccc; 
}
/* 言語切り替えの文字サイズを強制的に統一 */
#lang-jp, 
#lang-tw, 
#lang-jp a, 
#lang-tw a {
  font-size: 12px !important; /* ここでサイズを調整 */
  text-decoration: none;
  display: inline-block;
}

/* 「 / 」の記号自体のサイズも合わせる場合 */
.lang-border {
  font-size: 12px !important;
}

/* 太字になって大きく見えるのを防ぐ（お好みで） */
.active-lang {
  font-weight: bold; /* もし太字もやめたい場合は normal に変更 */
}
/* ========================
   スマホ用調整（更新版）
======================== */
@media screen and (max-width: 768px) {
  #gnavi li.lang-switcher {
    justify-content: center;
    border-bottom: 1px dashed #2e7d32;
    padding: 15px 0;
  }
  
  /* スマホでも枠のデザインを維持 */
  #gnavi li.lang-switcher .lang-border {
    font-size: 14px; /* スマホでは少しだけ大きくすると見やすいです（お好みで12pxのままでもOK） */
    padding: 4px 12px;
  }
}

@media screen and (max-width: 768px) {
  #gnavi li.lang-switcher {
    justify-content: center; /* スマホでは中央揃え */
    border-bottom: 1px dashed #2e7d32; /* 他のメニューと合わせる */
    padding: 15px 0;
    font-size: 16px; /* スマホでは押しやすく少し大きく */
  }
  
  /* PCナビで設定されていたマージンのリセット */
  #gnavi {
    margin-right: 0 !important; 
  }
}

/* ========================
   ハンバーガー（スマホ）
   PCでは隠し、スマホ（768px以下）で表示する
======================== */
#menubar_hdr {
  display: none; /* 基本は非表示 */
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background-color: green;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10000;
}

#menubar_hdr span {
  display:block;
  position:absolute;
  height: 1px;
  width: 50%;
  background:white;
  transition:0.3s;
}

#menubar_hdr span:nth-child(1) { top:19px; }
#menubar_hdr span:nth-child(2) { top: 31px; transform:translateY(-50%); }
#menubar_hdr span:nth-child(3) { bottom:16px; }

/* ========================
   スマホメニュー
======================== */
@media screen and (max-width:768px){
  #menubar_hdr {
    display: flex; /* スマホサイズのみ表示 */
    gap: 5px;
  }
  #header {height: 60px;}
  #logo { width: 200px; margin-left: 0; }
  
  #gnavi { 
    display:none; 
    flex-direction:column;
    position:absolute;
    top:60px;
    left:0px;
    width:100%;
    background:#fff;
    z-index:9998;
    padding: 5%;
    margin-right: 0 !important;
    align-items: stretch;
  }
  #gnavi li{
    width: 100%;
    list-style: none;
    border-bottom:1px dashed #2e7d32;
    text-align: center;
    line-height: 3;
  }
  #gnavi.active { display:flex; }
  
  #gnavi li.contact a { 
    position:static; 
    width:100%; text-align:center;
    height:auto; line-height:normal; 
    margin:0; padding: 4% 0;
  }
}
/* ========================
   ハンバーガー開閉アニメ
======================== */
#menubar_hdr.open span:nth-child(1) {
  transform: rotate(45deg); top:50%; background:white;
}
#menubar_hdr.open span:nth-child(2) { opacity:0; }
#menubar_hdr.open span:nth-child(3) {
  transform: rotate(-45deg); bottom:auto; top:50%; background:white;
}
#menubar_hdr.open { background:red; }

/*　footerコンタクト下部
---------------------------------------------------------------------------*/
/* ========================
   連絡 コンタクト
======================== */
.contact-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #e0f1d3;
margin: 0;
}
.contact-box {
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
}
.contact-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
font-size: 3rem;
}
.contact-desc {
font-size: 1.4rem;
}
.btn-contact {
border: 2px solid transparent;
background: #F15A22;
color: #fff;
padding: 22px 90px;
border-radius: 6px;
font-weight: bold;
text-decoration: none;
transition: 0.2s;
font-size: 24px;
}
.btn-contact:hover {
background: #fff;
color: #3db46a;
border-color: #3db46a;
}
@media (max-width: 720px) {
.contact-box {
flex-direction: column;
text-align: center;
margin-bottom: 20px;
}
  .btn-contact {
    padding:22px 75px

}}

/* ========================
  footer Access
======================== */

#footer{
   margin:0;
    background:rgb(22, 164, 68);		
    color:#222;
    line-height:1.6;
    display:flex;
    justify-content:center;
    padding:60px 20px;

}

/* ========================
  footer bana
======================== */

.banner-row {
    display: flex;
    gap:20px;
    justify-content: center;
    flex-wrap: wrap; /* スマホで縦並びに対応 */
  }

  .banner {
    flex: 3; /* PCは横3列 */
    min-width: 200px; /* 画面が小さくなりすぎるのを防ぐ */
    text-align: center;
  }

  .banner img {
    width: 100%;
    height: 120px; /* 高さ固定 */
    object-fit: cover;
    display: block;
  }

  .banner .caption {
    padding: 10px;
    font-size: 14px;
  }
    .caption a  {
  text-decoration: none;
    }
 .caption a:hover {
  text-decoration: underline;
    }
  /* スマホ用 */
  @media (max-width: 600px) {
    .banner {
      flex: 1 1 100%; /* 縦並び */
      margin-bottom: 12px;
    }
    .banner img { height: 120px; }
    .banner-row {
    gap:6px;
  }
  .banner .caption {
    font-size: 16px;
  }

}

  /* ========================
   menu SNS
======================== */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

.footer-sab{
  background: #1a803b; /* 背景を緑 */
  padding: 20px;
  color: #fff;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-logo {
  background: #fff;
  padding: 0.2%;
}
.footer-logo img {
  max-height: 40px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* メニュー */
.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
}

.footer-menu li {
  position: relative;
  padding: 0 10px;
}

.footer-menu li:not(:last-child)::after {
  content: "|"; /* 区切り線 */
  position: absolute;
  right: -5px;
  color: #fff;
}

.footer-menu a {
  text-decoration: none;
  color: #fff; /* 白文字 */
  font-weight: bold;
  font-size: 14px;
}
.footer-menu a:hover {
  text-decoration: underline;
 }

/* プライバシー・サイトポリシー */
.footer-links {
  margin: 10px 0;
}

.footer-links a {
  margin-right: 15px;
  color: #fff; /* 白文字 */
  font-size: 13px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
 }

/* SNSアイコン */
.footer-sns a {
  margin-right: 10px;
  font-size: 18px;
  color: #fff; /* 白アイコン */
}

/* SP時 */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-menu {
    display: none; /* メニュー非表示 */
  }

  .footer-right {
    align-items: center;
  }

  .footer-links {
    margin: 15px 0;
  }

  .footer-sns a {
    margin: 0 8px;
  }
}

/* コピーライトエリア */
.copy-area {
  background: #f0f0f0; /* 薄グレー */
  text-align: center;
  padding: 10px 0;
}

.copy-area p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}