/* =========================================
   英字フォント
========================================= */

.barlow-condensed-regular {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-condensed-medium {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-condensed-semibold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-condensed-bold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 74px;
  padding-bottom: 32px;
  color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 0rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  /*height: 32rem;*/
height:auto;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* 追加した分
-------------------------------------------------- */

/* 1. 矢印アイコンのサイズを大きくする（デフォルトは 2rem） */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 4rem;  /* お好みのサイズに変更してください（例: 50px や 5rem など） */
  height: 4rem;
}

/* 2. 矢印を画面の端に寄せる */
.carousel-control-prev {
  justify-content: flex-start; /* 左端に寄せる */
  padding-left: 2%; /* 画面端にピッタリくっつきすぎないよう、少しだけ余白を入れる */
}

.carousel-control-next {
  justify-content: flex-end; /* 右端に寄せる */
  padding-right: 2%; 
}

/* sector のpadding */
/* 基本の余白（PCサイズ） */
.sector_padding {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

/* 画面幅が768px以下（スマホ・タブレットサイズ）のときの余白 */
@media (max-width: 768px) {
  .sector_padding {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
/* sector のpadding2 */
/* 基本の余白（PCサイズ） */
.sector_padding2 {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

/* 画面幅が768px以下（スマホ・タブレットサイズ）のときの余白 */
@media (max-width: 768px) {
  .sector_padding2 {
    padding-top: 7rem;
    padding-bottom: 4rem;
  }
}
/* sector のpadding3 */
/* 基本の余白（PCサイズ） */
.sector_padding3 {
  padding-top: 0rem;
  padding-bottom: 10rem;
}

/* 画面幅が768px以下（スマホ・タブレットサイズ）のときの余白 */
@media (max-width: 768px) {
  .sector_padding3 {
    padding-top: 0rem;
    padding-bottom: 7rem;
  }
}
/* ボタンの基本スタイル */
a.slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* gap: 10px; ← これは削除します */
  
  position: relative; 
  overflow: hidden;   
  
  /* 💡 アイコンが被らないように右側の余白(padding)を広げ、最小幅(min-width)を設定すると綺麗です */
  padding: 15px 50px 15px 30px; 
  min-width: 250px; /* ボタンの幅をお好みで調整してください */
  
  border-radius: 50px;
  
  font-size: 16px;
  font-weight: bold;
  color: #333 !important;
  text-decoration: none !important;
  background: #fff;     
  border: 2px solid #333;
  cursor: pointer;
  z-index: 1;
  transition: color 0.4s ease; 
}

/* 💡 追加: アイコンを右端に固定する */
a.slide-btn i {
  position: absolute;
  right: 20px; /* 右端からの距離（お好みで調整） */
  font-size: 1.2em; /* アイコンの大きさを少し調整 */
}

/* 横からスライドしてくる背景色 */
a.slide-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;        
  width: 100%;
  height: 100%;
  background: #333;     
  z-index: -1;        
  transition: left 0.4s ease; 
}

/* マウスオン（ホバー）時の動き */
a.slide-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
}

a.slide-btn:hover::before {
  left: 0;            
}


.btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle.btn{
	background-color: #f99;
color:#fff;
border: 2px solid #000;
}

.btn2:hover, .btn2:focus, .btn2:active, .btn2.active, .open .dropdown-toggle.btn2{
	background-color: #eee;
border: 2px solid #999;
}


.btn {
	display: inline-block;
	padding: 15px 30px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 2px solid #000;
	border-radius: 50px;
	background-color: #f30;
color: #fff;
}

.btn2 {
	display: inline-block;
	padding: 15px 20px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 2px solid #999;
	border-radius: 50px;
	background-color: #fff;
color: #999;
}



/* =========================================
   PC表示（992px以上）のヘッダー調整
========================================= */
@media (min-width: 992px) {
  
  /* メニューの上下余白を増やしてヘッダーの高さを確保 */
  .navbar-nav .nav-link {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* 💡 追加: 「お問い合わせ」以外のaタグに左右padding 16pxを設定 */
  .navbar-nav .nav-item:not(.contact-menu) .nav-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* 💡 追加: アイコンとテキストを綺麗に横並びにする設定 */
    display: flex;
    align-items: center;
    gap: 4px; /* 文字とアイコンの隙間 */
  }

  /* 💡 追加: 「お問い合わせ」以外のliタグに右の縦線を設定 */
  .navbar-nav .nav-item:not(.contact-menu) {
    border-right: solid 1px #ccc;
  }

  /* 💡 追加: 最初の項目（ホーム）に左の縦線を設定 */
  .navbar-nav .nav-item:first-child {
    border-left: solid 1px #ccc;
  }

  /* -------------------------------------
     お問い合わせ（.contact-menu）のスタイル 
  -------------------------------------- */
  .contact-menu {
    background-color: #f60; /* 背景色オレンジ */
    margin: 0 0 0 24px;     /* 💡 変更: 上0、右0、下0、左24px */
    display: flex;          
    align-items: center;    /* 文字を縦の中央に配置 */
  }
  
  /* お問い合わせ内のテキストスタイル */
  .contact-menu .nav-link {
    color: #fff !important; /* 文字色を白に */
    font-weight: bold;
    padding-left: 30px !important;  /* ボタン内の左余白 */
    padding-right: 30px !important; /* ボタン内の右余白 */
display: flex;
    align-items: center;
  }

  /* -------------------------------------
     💡 追加: ホバー時のスライドアニメーション
  -------------------------------------- */
  
  /* ▼ アイコンの色変化（スライドせず色だけ変わる） */
  .navbar-nav .nav-item:not(.contact-menu) .nav-link i {
    transition: color 0.3s ease;
    color: rgba(0, 0, 0, 0.65);
  }
  .navbar-nav .nav-item:not(.contact-menu) .nav-link:hover i {
    color: #c90; /* ホバー時のアイコン色 */
  }

  /* ▼ スライドさせるテキスト部分のラッパー */
  .slide-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: transparent !important; /* 元の文字は透明にして場所だけ確保 */
    white-space: nowrap;
  }

  /* ▼ 通常時に表示するテキスト */
  .slide-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: rgba(0, 0, 0, 0.65); /* 通常色 */
    transition: top 0.3s ease;
  }
  
  /* アクティブ時の色 */
  .nav-link.active .slide-text::before {
    color: rgba(0, 0, 0, 0.9);
  }

  /* ▼ ホバー時に上から降りてくるテキスト */
  .slide-text::after {
    content: attr(data-text);
    position: absolute;
    top: -100%; /* 最初は上に隠しておく */
    left: 0;
    width: 100%;
    color: #ff9900; /* スライドしてくる色（#f60） */
    transition: top 0.3s ease;
  }

  /* ▼ マウスオン（ホバー）時の動き実行 */
  .nav-link:hover .slide-text::before {
    top: 100%; /* 通常の文字は下へ逃げる */
  }
  .nav-link:hover .slide-text::after {
    top: 0; /* 新しい文字が上から定位置に降りてくる */
  }

/* -------------------------------------
     追加: お問い合わせボタン用のアニメーション色設定
  -------------------------------------- */
  /* 通常時の文字色 */
  .contact-menu .slide-text::before {
    color: #fff; 
  }
  
  /* 上からスライドしてくる文字色 */
  .contact-menu .slide-text::after {
    color: #fff; /* 💡 動きだけ見せるため白にしています（#993300等にも変更可） */
  }

}

/* =========================================
   スマホ表示（ハンバーガーメニュー内）の調整
========================================= */
@media (max-width: 991px) {
  
  /* ▼ 既存の記述 */
  .contact-menu {
    background-color: #fa0;
    margin: 10px 0;
    text-align: center;
    border-radius: 5px; 
  }
  .contact-menu .nav-link {
    color: #fff !important;
    font-weight: bold;
    padding: 12px 0 !important;
  }

  /* ▼ 💡 ここから追加: お問い合わせ以外のメニューのホバー設定 */
  .navbar-nav .nav-item:not(.contact-menu) .nav-link {
    transition: background-color 0.3s ease; /* 背景色がフワッと変わる設定 */
  }
  
  .navbar-nav .nav-item:not(.contact-menu) .nav-link:hover {
    background-color: #feb; /* スマホでマウスオンした時の背景色 */
    border-radius: 5px;     /* 背景に色がついた時に角を丸くしてボタン風にする */
    color: #333 !important; /* 背景色が明るいので、文字色を濃く保つ */
  }
}

/* =========================================
   PC・スマホ共通の設定（ファイルの末尾などに追記）
========================================= */
.contact-menu {
  transition: background-color 0.3s ease; /* 背景色がフワッと変わる設定 */
}

.contact-menu:hover {
  background-color: #fc0 !important; /* マウスオン時の背景色 */
}



/* 枠付きテキスト（タグ）のスタイル */
.item-tag {
  background-color: #3b71ca;       /* 背景色：白 */
  color: #fff;               /* テキストの色：青系（お好みで調整してください） */
  border: 1px solid #3b71ca;    /* 枠線の色と太さ */
  padding: 3px 12px;            /* 枠内の上下(4px)・左右(12px)の余白 */
  font-size: 14px;              /* 文字サイズ（お好みで調整してください） */
  line-height: 1.5;             /* 行間 */
border-radius:4px;
}



/* ==========================================================================
   個別セクション設定（画像パスと背景色の登録）
   ========================================================================== */

/* 1つ目のセクション（今回ご提示いただいた部分） */
.bg-type-1 {
  background-color: #ff9966; /* 元々の背景色をここで指定 */
  background-image: url('../../images/title_motive.svg'); /* お使いのSVGパスに変更してください */
}

/* 2つ目のセクション */
.bg-type-2 {
  background-color: #ffffff; /* 各セクションのテーマ色 */
  background-image: url('../../images/title_advantage.svg');
}

/* 3つ目のセクション */
.bg-type-3 {
  background-color: #ff9966;
  background-image: url('../../images/title_ourofferings.svg');
}

.bg-type-3b {
  background-color: #ffffff;
  background-image: url('../../images/title_ourofferingsB.svg');
}

/* 4つ目のセクション */
.bg-type-4 {
  background-color: #ffffff;
  background-image: url('../../images/title_global.svg');
}
.bg-type-4b {
  background-color: #ffffff;
  background-image: url('../../images/title_globalB.svg');
}


/* 5つ目のセクション */
.bg-type-5 {
  background-color: #eeeeee;
  background-image: url('../../images/title_infomation.svg');
}
.bg-type-5b {
  background-color: #ffffff;
  background-image: url('../../images/title_infomationB.svg');
}

/* 6つ目のセクション */
.bg-type-6 {
  background-color: #cccccc;
  background-image: url('../../images/title_contact.svg');
}

.bg-type-6c {
  background-color: #cccccc;
  /* 手前：タイトル用SVG、奥：背景写真 */
  background-image: url('../../images/title_contact.svg'), url('../../images/backmage01.webp');
  
  /* 位置：SVGは中央上部、写真は中央配置 */
  background-position: left top, center center;
  
  /* リピート指定：どちらも繰り返さない */
  background-repeat: no-repeat, no-repeat;
  
  /* サイズ指定：SVGは元のサイズ(auto)、写真はセクション全体(cover) */
  background-size: 100% auto, cover;
}

.bg-type-6b {
  background-color: #ffffff;
  background-image: url('../../images/title_contactB.svg');
}

/* 7つ目のセクション */
.bg-type-7 {
  background-color: #ffffff;
  background-image: url('../../images/title_company.svg');
}

/* 8つ目のセクション */
.bg-type-8 {
  background-color: #ffffff;
  background-image: url('../../images/title_privacy.svg');
}
/* 9つ目のセクション */
.bg-type-9 {
  background-color: #ffffff;
  background-image: url('../../images/title_access.svg');
}

/* 💡 今後7つ目、8つ目とセクションを増やしたい場合は、
   以下のように「.bg-type-7」を下に追記していくだけで自動的に同じルールが適用されます */
/*
.bg-type-7 {
  background-color: #xxxxxx;
  background-image: url('images/bg_pattern07.svg');
}
*/

/* ==========================================================================
   全セクション共通：背景画像（SVG）のレスポンシブ制御
   ========================================================================== */
.bg-svg-section {
  /* 共通ルール：繰り返しなし・左上スタート */
  background-repeat: no-repeat;
  background-position: left top;
  
  /* 【1200px未満】画面幅に合わせて画像を横幅100%に縮小（縦横比を維持） */
  background-size: 100% auto;
}

/* 【1200px以上】画面幅が広がっても、背景画像のサイズを最大1200pxで固定 */
@media (min-width: 1200px) {
  .bg-svg-section {
    background-size: 1200px auto;
  }
}

@media (min-width: 1200px) {
  .bg-svg-sectionB {
    background-size: 1200px auto,cover;
  }
}




/* =========================================
   お知らせエリアのスタイル
========================================= */

/* お知らせ項目にマウスオンした時に背景をうっすら暗くする */
.news-item {
  transition: background-color 0.3s ease;
}
.news-item:hover {
  background-color: rgba(0, 0, 0, 0.05); 
}

/* 複数のお知らせが並んだ場合、項目と項目の間に薄い線を引く */
.news-item + .news-item {
  border-top: 1px solid #dee2e6; 
}

/* 「過去のお知らせ一覧」ホバー時に下線を出す */
.news-archive-link {
  transition: opacity 0.3s ease;
}
.news-archive-link:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}


/* =========================================
お問い合わせ
========================================= */

/* チェックボックスの強調スタイル */
#agree_sales {
  cursor: pointer;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #ff9966; /* ブランドカラー等 */
  margin-right: 8px;
  vertical-align: middle;
}

/* チェック時の枠線・背景色（お好みで調整） */
#agree_sales:checked {
  background-color: #ff9966;
  border-color: #ff9966;
}