@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #ffc133; ;
    --back-color: #d47c10;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
/*    display:block;*/
    color: var(--link-color);
    text-decoration-line: underline;
}
a:hover { 
    color: var(--linkhover-color);
}
a img {
    margin-bottom: 1rem;
}
a img:hover {
	opacity: 0.8;
}
.blueback {
	background-color: #6a5acd;
	color: var(--white-color);
	padding: 1rem;
}
.underline {
	border-bottom: 3px solid var(--back-color);
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}
.midashi {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 2px black;
}
/*ヘッダー
-------------------------------------*/
.head {
	display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;
}

.head h1 { 
    padding: 1rem 0;
}
.telbox {
	margin-left: auto;
	font-size: 3.0rem;
	padding: 1rem 0 0 0;
}
.menu {
	background-color: var(--back-color);
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin-bottom: 0;
}
nav li {
    flex: 1 0 auto;
	margin-bottom: 0;
}
nav li a {
    text-decoration: none;
    text-align: center;
	color: var(--white-color);
}
nav a:hover {
    background-color: var(--linkhover-color);   
	color: var(--white-color);
}
nav a {
    padding: 2rem 1rem;
	display: block;
}
/*メイン画像
-------------------------------------*/
.hero-section {
  position: relative; /* 必要に応じて、後で背景などを重ねる場合の基準点 */
  width: 100%;
  overflow: hidden;
  
  /* ★ここが変更点：flexboxを使って子要素を横並びにする */
  display: flex; 
  flex-direction: row; /* 横並び（デフォルトだが明示） */
  align-items: center; /* 子要素を垂直方向の中央に揃える（任意） */
  min-height: 60vh; /* セクション全体の最低高さを設定（画像高さに合わせる） */
}

/* ★変更点：テキストを配置する左側のエリア */
.hero-content-left {
  width: 50%; /* 左半分を使用 */
  padding: 40px 5%; /* 左右の余白 */
  box-sizing: border-box; /* paddingを含めた幅計算 */
  
  /* 必要であれば、ここに背景色などを指定できます */
  /* background-color: #f8f8f8; */
}


/* 画像を配置する右側のエリア */
.hero-image-right {
  width: 50%; /* 右半分を使用 */
  height: 60vh; /* 親要素の高さに合わせるか、固定高さを指定 */
  overflow: hidden; /* 画像がはみ出したら隠す */
  display: flex; /* 画像を垂直方向の中央に揃えるため */
  justify-content: center;
  align-items: center;
}

/* 画像の設定 */
.hero-image {
  width: 100%;       /* 親要素の幅いっぱいに */
  height: 100%;      /* 親要素の高さいっぱいに */
  object-fit: cover; /* 枠に合わせて画像をトリミング */
  object-position: center center; /* 画像の中心を基準に表示 */
  display: block;
}

/* --- キャッチコピーのスタイル --- */
/* .hero-text は .hero-content-left の中の要素になる */
.hero-text {
  /* position: absolute; に関する記述は全て削除 */
  /* top, left, transform も削除 */

  color: #333;
  background-color: transparent; /* 背景は基本透明に */
  padding: 0; /* 親要素で余白を指定するのでここでは0 */
  box-shadow: none;
  max-width: 100%; /* 親要素の幅に収まるように */
}

.hero-text h1 {
  margin: 0 0 15px 0;
  font-size: 2.5rem;
  line-height: 1.4;
  font-weight: bold; /* デフォルトの太字 */
  color: #333; /* デフォルトの色 */
  text-shadow: none; /* 影はデフォルトでなし */
  border-left: none; /* 左の線はデフォルトでなし */
  padding-left: 0;
}

.hero-text p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: normal; /* デフォルトの太さ */
  color: #666; /* デフォルトの色 */
  text-shadow: none; /* 影はデフォルトでなし */
}


/* --- PC表示のインパクト強化（画面幅769px以上） --- */
@media (min-width: 769px) {
  .hero-section {
    min-height: 70vh; /* PCではもう少し高さを出す */
  }

  .hero-content-left {
    padding: 60px 8%; /* PCでは左右の余白をさらに広く */
  }

  .hero-image-right {
    height: 70vh; /* PCでは画像も高さを出す */
  }

  .hero-text h1 {
    font-size: 3.5rem; /* PC向けに大きく */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    
  }

  .hero-text p {
    font-size: 1.5rem;
    color: #666;
  }
}


/* --- スマホ向けレスポンシブ調整 (768px以下) --- */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column; /* スマホでは縦並びにする */
    min-height: auto; /* スマホでは高さ制限を解除 */
  }

  .hero-content-left,
  .hero-image-right {
    width: 100%; /* スマホでは両方とも幅いっぱい */
    height: auto; /* スマホでは高さも自動調整 */
  }
  
  .hero-content-left {
    order: 2; /* テキストを画像の下に表示する場合 */
    padding: 30px 5%;
    text-align: center; /* 中央寄せ */
  }

  .hero-image-right {
    order: 1; /* 画像を上に表示する場合 */
    height: 40vh; /* スマホでの画像高さを調整 */
  }

  .hero-image {
    height: 100%; /* 親の高さに合わせる */
  }

  .hero-text h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .hero-text p {
    font-size: 1.1rem;
  }
}

/*note記事表示
-------------------------------------*/
#rss-content {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 20px 0;
}

.note-article {
    width: 100%;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.note-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.note-article-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.note-article-content {
    padding: 15px;
}

.note-article-title {
    font-size: 1.1em; /* タイトルを少し小さくする */
    margin-bottom: 10px;
}

.note-article-title a {
    text-decoration: none;
    color: #333;
}

.note-article-title a:hover {
    color: #007bff;
}

.note-article-description {
    color: #555;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    display: inline-block;
    padding: 8px 15px;
    background-color: #5a98bb; /* READ MOREボタンの背景色を変更 */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: #42718e;
}

/* 記事が3つ以下の場合の調整 */
#rss-content .note-article:nth-child(1),
#rss-content .note-article:nth-child(2),
#rss-content .note-article:nth-child(3) {
    display: block;
}

/* 4つ目以降の記事を非表示にする */
#rss-content .note-article:nth-child(n+4) {
    display: none;
}

/* スマートフォン向けのレスポンシブ対応 */
@media (max-width: 768px) {
    .note-article {
        /* スマートフォンでも縦に並べる */
    }
}

@media (max-width: 480px) {
    .note-article {
        /* スマートフォンでも縦に並べる */
    }
}

/*お問い合わせフォーム
-------------------------------------*/
.iframe-container {
  position: relative;
  width: 100%;
  padding-top: 106.25%; /* 684 / 640 * 100% */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media screen and (min-width: 769px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.head {
	flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.telbox {
	margin-left: 0;
	text-align: center;
}
.head #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
    }
nav ul {
	flex-direction: column;
}

nav li {
	padding-top: 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
/* スマホ時は文字を小さくする */
.mainimg .text {
    /* スマホ用のスタイル */
    font-size: 1rem; /* 文字サイズを小さくする */
    padding: 10px; /* パディングを追加 */
}
.mainimg .text h1{
  font-size: 2rem
}
}


/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 5rem 0;
}
h2 {
    background-color: var(--back-color);
	color: var(--white-color);
	padding: 1rem;
}
h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: var(--back-color);/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px var(--back-color);/*左線*/
}

/*新着情報
-------------------------------------*/
.news li {
    list-style-type: none;
	border-bottom: 1px solid var(--border-color);
	padding: 0.5rem 0;
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color);
    padding: 5rem 0;
	color: var(--white-color);
}
footer h5 {
    border-bottom: 2px solid var(--white-color);
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--white-color);
}
.copyright a {
    color: var(--base-color);
    text-decoration: none;
	display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: var(--back-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: var(--back-color);
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}
/* フロートボタンのスタイル
-----------------------------------*/
.floating-button {
  /* 画面への固定位置設定 */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;

  /* デザイン */
  display: flex; /* Flexboxを有効にし、画像とテキストを横並びにする */
  align-items: center; /* 要素を垂直方向の中央に揃える */
  background-color: #D47C10;
  color: #ffffff;
  padding: 12px 25px; /* パディングを少し調整 */
  
  /* 角丸を浅く修正 (例: 浅い丸みのある角) */
  border-radius: 8px; 
  
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.button-icon {
  width: 45px; /* 画像のサイズを指定 */
  height: 40px; 
  margin-left: 8px; /* 画像とテキストの間にスペースを空ける */
  /* 必要に応じて、画像の色やフィルタを設定 */
  /* filter: invert(100%); /* 例: 白色のアイコン画像を使う場合 */
}

.floating-button:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
  transform: translateY(-3px);
}

/* スマートフォンでの表示調整（変更なし） */
@media (max-width: 600px) {
  .floating-button {
    bottom: 20px;
    right: 20px;
    padding: 12px 25px;
    font-size: 14px;
  }
}