/*
Theme Name: with-theme
Theme URI: https://with-corp.com
Author: ウィズ株式会社
Author URI: https://with-corp.com
Description: 固定ページ中心のシンプルテーマ with MEGAメニュー
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: with-corp.com
*/

/* ===============================================
     BASIC SETTING
=============================================== */
body {
    font-family: 
    "IBM Plex Sans JP", 
    "M PLUS Rounded 1c",
    "Noto Sans JP", 
    /* "M PLUS Rounded 1c", */
    "Cairo", 
    "Klee One",
    "Zen Kurenaido", 
    "Rock Salt", 
    "Helvetica Neue",
    "Arial",
    sans-serif;
    /* font-size: 1rem;          /* 基本16px */
    font-size: 15px;
    line-height: 1.8;         /* 読みやすさ重視 */
    color: #212529;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    padding-top: 70px;
 /*  
  font-size: clamp(14px, 1.2vw, 17px);

    line-height: 1.8;          
    color: #212529;             
    margin: 0;
    padding: 0;
    */
}
    @media (max-width: 991.98px) {
        body{padding-top: 60px;}
}
/* LINK DEF. */
a {text-decoration: none;}
a:hover {text-decoration: none;}
/* NARROW CONTENTS WIDTH */
/* @media (max-width: 992px) {
  .custom-container960 {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
*/
@media (min-width: 992px) {
  .custom-container960 {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  .custom-container768 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* SM 以上 
@media (min-width: 576px) {
  .custom-container960 {
    max-width: 540px;
  }
}

/* MD 以上 
@media (min-width: 768px) {
  .custom-container960 {
    max-width: 720px;
  }
}

/* LG 以上（既存） 
@media (min-width: 992px) {
  .custom-container960 {
    max-width: 960px;
  }
}
/* MENU HEIGHT 
main{padding-top:70px;}
@media (max-width: 991.98px) {
    main{padding-top:60px;}
}
/* =====================================
     GOOGLE FONT SETTING DEF.
===================================== */
.noto-sans-jp-100 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.noto-sans-jp-200 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.noto-sans-jp-regular {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.noto-sans-jp-400 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.noto-sans-jp-500 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.noto-sans-jp-600 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.noto-sans-jp-700 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.noto-sans-jp-800 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.noto-sans-jp-900 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
/* M PLUS Rounded 1c */
.m-plus-rounded-1c-thin {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.m-plus-rounded-1c-light {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.m-plus-rounded-1c-black {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}
/* Klee One */
.klee-one-regular {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}

.klee-one-semibold {
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
}
/* Zen Kurenaido */
.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}
.cairo-regular {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
.cairo-semibold {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
.cairo-bold {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* ===============================================
     HEADER RELATED
=============================================== */
/* =====================================
     GLOBAL MENU DEF.
===================================== */
/* ANIMATION HEADER */
/*------------------*/
#global-header {
  position: fixed;
  top: 0; /* 最初から表示される */
  left: 0;
  width: 100%;
  z-index: 999;
  transition: top 0.4s ease;
  background: #000; /* 任意の背景色 */
}

/* 非表示時 */
#global-header:not(.show) {
  top: -100px;
}
/*
#global-header {
  transition: transform 0.4s ease, opacity 0.3s ease;
}
#global-header.hide {
  transform: translateY(-100%);
  opacity: 0;
}
#global-header.show {
  transform: translateY(0);
  opacity: 1;
}
/* MAIN MENU -REMOVE ARROW-　*/
.dropdown-toggle::after {display: none !important;}
/*0517 .outlined-shape {filter: drop-shadow(-1px 0 white) drop-shadow(1px 0 white) drop-shadow(0 -1px white) drop-shadow(0 1px white);} */
/* 2 LINES */
.nav-ttl{font-size: 0.6em;font-weight:bold;letter-spacing: .04em;text-align: center;}
.nav-ttl::before{display: block;font-weight: bold;font-size: 1.6em;line-height: 1.5;/*letter-spacing: .02em;*/content: attr(data-eng);/*font-family: "roboto-ast";*/}
/* GLOBAL MEGA MENU */
/* OUTLINE */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 86%;
    left: 0;
    width: 100vw; /* FULL WIDE : SCREEN */
    padding: 10px 0;
    background-color: /* #f8f9fa */#ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* MEGA MENU WIDTH SETTING UNDER 992px */
@media (max-width: 991.98px) {
    .dropdown-menu {
        position: static; /* KEEP WITHIN : PARENT */
        width: auto;
        max-width: 100%; /* NOT EXCEED : SCREEN */
        overflow-x: hidden; /* NON SCROLL */
        padding: 0;
    }
}
/* MEGA MENU RELATION */
.navbar-nav .nav-item {position: static;}
/* MEGA DROPDOWN MENU SETTING */
.dropdown-menu .row {margin: 0;}
.dropdown-menu .col {}
.dropdown-item{padding: 1.0rem;border-radius: 0.5rem; text-decoration: none;width: 100%;
    white-space: normal !important; /* ALLOW LINE BREAKS */
    word-wrap: break-word; /* FOR LONG WORDS */
    overflow-wrap: break-word; /* FOR LEGACY BRAWZER */
}
/* .dropdown-item:hover{background-color: #F4F4F4;color:#4CAF50; } */
/* COMPANY LOGO height */
.navbar-brand img{height:46px;}
@media (max-width: 991.98px) {
    .navbar-brand img {height:36px;}
}

/* ADDING */
/* ================================
   PCのみ：hoverでドロップダウン表示
================================ */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .navbar .dropdown .dropdown-menu {
    transition: all 0.3s ease;
  }
}

/* ================================
   スマホ用：hover無効、クリックで表示
================================ */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    display: none; /* 最初は非表示 */
  }
  .navbar .dropdown-menu.show {
    display: block; /* JSで .show 付与時に表示 */
  }
}


.multi-line-ellipsis {
    display: -webkit-box !important; /* FOR Bootstrap */
    -webkit-line-clamp: 2; /* UP TO 2LINES */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 5em;
    line-height: 1.5em;
}
.dropdown-jttl{font-size: 0.9em;font-weight: bold;color:#4CAF50; }
.navbar-toggler {
    border: 3px solid #fff;  /* 枠線を3pxの白に */
    border-radius: 6px;      /* 角を丸くする */
    padding: 0.25rem 0.5rem; /* ボタン内の余白調整 */
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.nav-body{background-color: /* #002048 */ #000000;}
/* GLOBAL MAIN MENU */
.nav-item { color: #ffffff/*#4169E1*/; }
.nav-item a { color: #ffffff/*#4169E1*/; }
.nav-item a:link { color: #ffffff/*#4169E1*/; }
.nav-item a:hover { color: #ff8d00; }
.nav-item a:focus,
.nav-item a:active { color:#ffffff/*#4169E1*/ !important; } 
/* BOX SHADOW */
.box-shadow-bottom {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}
/* HEADER TITLE */
.general-header {
  position: relative;
  width: 100%;
  /* min-height: 300px;*/
    height: 200px !important;
}
.general-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* 背景の暗めオーバーレイ */
  z-index: 1;
}
.general-header .general-header-content {
  position: relative;
  z-index: 2;
}
/* INFO HEADER TITLE */
.info-header {
  position: relative;
  width: 100%;
  min-height: 150px;
}
.info-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* 背景の暗めオーバーレイ */
  z-index: 1;
}
.info-header .info-header-content {
  position: relative;
  z-index: 2;
}
/* =====================================
     BG / HEADER TITLE IMAGE
===================================== */
/* HEADER TITLE WO TOP PAGE */
/*--------------------------*/
.header-base-ttl{
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
         height: 300px;
    }
.information-base-ttl{
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
         height: 150px;
    }
.branding-ttl {background-image: url('./assets/images/bg/branding.webp');}
.company-ttl {background-image: url('./assets/images/bg/company.webp');}
.consulting-ttl {background-image: url('./assets/images/bg/consulting.webp');}
.privacy-ttl {background-image: url('./assets/images/bg/security.webp');}
.mktg-service-ttl {background-image: url('./assets/images/bg/marketing-services.webp');}
.contacts-ttl {background-image: url('./assets/images/bg/message.webp');}
.mktg-support-ttl {background-image: url('./assets/images/bg/mktg-support.webp');}
.information-ttl {background-image: url('./assets/images/bg/information.webp');}
.network-ttl {background-image: url('./assets/images/bg/network.webp');}
/* PAGE MESSAGE BG */
/*-----------------*/
.bg-base {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.bg-top-mess{
    background-image: url('assets/images/bg/gray-wave.webp');
}
/* PANKUZU LIST BACKGROUND */
/*------------------------*/
.pankuzu{
    background-color:#eeeeee;border-bottom:1px solid #dddddd;
}
/* ===============================================
     FOOTER RELATED
=============================================== */
footer {
  font-size: 0.9rem; /* 0.9 全体の文字を少し小さく（標準1remの90%） */
  color: #fff; /* 例：白文字（背景が濃色の場合） */
  background-color: #000000; 
  padding: 2em 0;
}
footer h5 {
    display: inline-block;
  font-size: 1.0rem; /* 通常のh5（1.25rem程度）より少し小さく */
  /* margin-bottom: 0.75em; */
    padding-bottom: 0.25em;
    margin-bottom: 0.5em;
    border-bottom: 2px dotted #ff8d00;
}
footer p,
footer li,
footer a {
  font-size: 0.9rem; /* 0.9 全体に統一感を持たせる */
  line-height: 1.6;
    color: #fff;
}
footer a:hover {
    color: #ff8d00;
    text-decoration: none;
}
footer ul {
  list-style: none; /* 行頭マーカーを消す */
  padding-left: 0;  /* 左の余白もなくす */
  margin: 0;        /* 必要に応じて上下の余白も調整 */
}
footer ul li {
  /* padding-left: 1em;     /* 左に少し余白を入れる */
  margin-bottom: 0.5em; /* 行間の調整（任意） */
}
footer .nav.flex-column li {
    margin-bottom: 0.5rem;
}

/* INFO CONTENTS */
/*---------------*/
.single h1 {
    margin-top: 3rem; /* 上余白 */
    margin-bottom: 2rem; /* 下余白 */
}
.single h5{
    font-size: 16px;
}
.single p{
    font-size: 14px;
    line-height: 1.8;
}
/* ===============================================
     TEXT RELATED
=============================================== */
/* =====================================
     TEXT COLOR DEFINITION
===================================== */
.wskyblue{color:#4c9cff;}
.wblue{color:#387ccc;}
.worange{color:#ff8d00;}
.wnavy{color:#002048;}
.wbluegray{color:#f5f8fa;}
.wgray{color:#949593;}
/* =====================================
     TEXT SIZE DEFINITION
===================================== */
h1{margin:0;padding:0;}
.top-mess{font-size:2.8em;color:#ff5722;}
.wfs-1{font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);}
.wfs-2{font-size: clamp(19px, 2vw, 26px);}
.wfs-3{font-size: clamp(18px, 2vw, 24px);}
.wfs-4{font-size: clamp(16px, 1.5vw, 20px);}
.wfs-5{font-size: clamp(14px, 1.8vw, 18px);}
.wfs-6{font-size: clamp(12px, 1.5vw, 16px);}
/* =====================================
     TEXT DECORATION
===================================== */
/* WORD BREAK */
/*------------*/
.no-break {
  white-space: nowrap;
}
/* JAPANESE KAKKO */
/*----------------*/
.brackets-text {position: relative;padding:1em 2em;display: inline-block;font-size: 1em;}
.brackets-text:before, .brackets-text:after { content:'';width: 20px;height: 30px;  position: absolute;display: inline-block;}
.brackets-text:before {border-left: solid 5px #ff8d00;border-top: solid 5px #ff8d00;top:0;left: 0;}
.brackets-text:after {border-right: solid 5px #ff8d00;border-bottom: solid 5px #ff8d00;bottom:0;right: 0;}
/* 2 LINES BOTH SIDE */
.BothSideDoubleLines {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}
.BothSideDoubleLines:before,
.BothSideDoubleLines:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 20px;
  height: 8px;
  content: '';
  border-top: solid 3px #387ccc;
  border-bottom: solid 3px #387ccc;
}
.BothSideDoubleLines:before {
  left: 0;
}
.BothSideDoubleLines:after {
  right: 0;
}
/* 3 DOTS UNDER TEXT */
/*-------------------*/
.dot-ttl {
  font-weight: bold;
  padding-bottom: 0.7em;
  text-align: center;
  position: relative;
}
.dot-ttl::after {
  content: '';
  position: absolute;
  border-bottom: 10px dotted /*#4c9ac0*/#ff8d00;
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
/* DIRECTION SIGN UNDER TEXT */
/*---------------------------*/
.under_direction_ttl {
  position: relative;
  /* padding: 1.5rem 2rem; */
    padding: 1rem 0;
  border-bottom: 2px solid #D0D5D9;
}
.under_direction_ttl:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #D0D5D9 transparent transparent transparent;
}
.under_direction_ttl:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}
/* 2 COLORS LINE UNDER THE TEXT */
/*------------------------------*/
.UnderLine2Colors {
	position: relative;
	text-align: center;
	border-bottom: 4px solid #949593; /* ← 線の太さを3pxに変更 */
	padding-bottom: 10px;              /* ← 下線と文字の間隔を3px増やす（5px → 8px） */
}
.UnderLine2Colors::after {
	content: '';
	position: absolute;
	bottom: -4px;                    /* ← 線が太くなったので位置も少し下げる */
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 4px;                     /* ← 下の線を3pxに変更 */
	background-color: #387ccc;
}
/* DOTTED LINE UNDER TEXT -OVERVIEW- */
.dotted-underline-blue {
  display: block;         /* 文字幅に合わせる */
  border-bottom: 1px dotted #4c9cff;/* 太さ・種類・色 */
    margin-right: 3px;
  padding-bottom: 2px;           /* 下線と文字の間隔 */
}
.dotted-underline-gray {
  display: block;         /* 文字幅に合わせる */
  border-bottom: 1px dotted #949593;/* 太さ・種類・色 */
    margin-right: 3px;
  padding-bottom: 2px;           /* 下線と文字の間隔 */
}
/* ENG-JPN COMBI TEXT */
/*--------------------*/
.ej-ttl {
	/* font-size: clamp(14px, 2vw, 24px); */
    line-height: 1.8;
}
.ej-ttl::before {
	content: attr(data-en);
	display: block;
	color: #387ccc;
	font-size: 0.8em;
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    /*padding-top: 10px;*/
}
.ej-ttl::after {
	content: '';
	display: block;
	/* width: 4rem;*/
    width: 100%;
	height: 2px;
	background-color: #387ccc;
}
/* ===============================================
     CONTENTS
=============================================== */
/* CONTENTS IMAGE'S HEIGHT */
/*-------------------------*/
.sol-img-height{}
@media (max-width: 768px) {
  .sol-img-height{
    height: 80px;
      object-fit: cover;
  }
}
/* ===============================================
     CONTACT US AREA
=============================================== */

/* =====================================
     CONTACTS
===================================== */
/* -----------------------------
   フォームコンテナ
----------------------------- */
.contact-container {
  max-width: 700px;
  margin: 50px auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 12px;
}

/* ラベル全体 */
.contact-container label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5em;
}

/* テキスト入力・メール・テキストエリア */
.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container textarea {
  width: 100%;
  padding: 0.8em;
  margin-bottom: 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 入力エラー時 */
.contact-container input.invalid,
.contact-container textarea.invalid {
  border-color: #e74c3c;
  background-color: #fff6f6;
}

/* エラーメッセージ */
.contact-container .error-msg {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: -0.5em;
  margin-bottom: 0.8em;
  display: block;
}

/* 送信成功メッセージ */
.contact-container .success {
  color: #009900;
  background: #e0f7fa;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
  animation: fadeIn 1s ease-in-out;
}

/* 送信失敗メッセージ */
.contact-container .error {
  color: #ff3333;
  background: #fff0f0;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* -----------------------------
   チェックボックス（横並び・必須）
----------------------------- */
.contact-container .privacy-consent {
  display: flex;
  align-items: center;   /* 縦中央揃え */
  flex-wrap: nowrap;     /* 横並び固定 */
  margin-bottom: 1rem;
}

/* チェックボックス */
.contact-container .privacy-consent input[type="checkbox"] {
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
}
/* -- START -- */
/* チェックボックスのサイズと配置 */
.privacy-consent .privacy-check[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

/* テキスト部分 */
.privacy-consent span {
  font-size: 14px;
  line-height: 1.6;
}

/* リンク調整 */
.privacy-consent a {
  text-decoration: none;
}
/* --- END -- */
/* チェックボックス文字 */
.contact-container .privacy-consent {
  font-size: 1rem;
  line-height: 1.2;
}

/* 横に置くリンク */
.contact-container .privacy-consent a {
  margin-left: 0.5rem;
  white-space: nowrap;   /* 改行防止 */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  color: #007bff;
}

/* -----------------------------
   送信ボタン
----------------------------- */
.contact-container .btn {
  padding: 0.8em 2em;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.contact-container .btn-primary {
  background-color: #007bff;
  color: #fff;
}

.contact-container .btn-primary:hover {
  background-color: #0056b3;
}

/* -----------------------------
   モバイル対応
----------------------------- */
@media (max-width: 767px) {
  .contact-container {
    padding: 1.5em;
  }

  .contact-container .privacy-consent {
    flex-wrap: wrap;
  }

  .contact-container .privacy-consent a {
    margin-left: 0.25rem;
  }
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/*
.contact-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 12px;
}
.contact-container label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5em;
}
.contact-container input,
.contact-container textarea {
  width: 100%;
  padding: 0.8em;
  margin-bottom: 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.contact-container input.invalid,
.contact-container textarea.invalid {
  border-color: #e74c3c;
  background-color: #fff6f6;
}
.error-msg {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: -0.5em;
  margin-bottom: 0.8em;
  display: block;
}
.success {
  color: #009900;
  background: #e0f7fa;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
  animation: fadeIn 1s ease-in-out;
}
.error {
  color: #ff3333;
  background: #fff0f0;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
input.invalid,
textarea.invalid {
  border-color: #e74c3c;
  background-color: #fff6f6;
}
.error-msg {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: -0.5em;
  margin-bottom: 0.8em;
  display: block;
}
*/
/*
.contact-container {
  max-width: 700px;
  margin: 50px auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 12px;
}

.contact-container label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5em;
}

.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container textarea {
  width: 100%;
  padding: 0.8em;
  margin-bottom: 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contact-container input.invalid,
.contact-container textarea.invalid {
  border-color: #e74c3c;
  background-color: #fff6f6;
}

.contact-container .error-msg {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: -0.5em;
  margin-bottom: 0.8em;
  display: block;
}

.contact-container .success {
  color: #009900;
  background: #e0f7fa;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
  animation: fadeIn 1s ease-in-out;
}

.contact-container .error {
  color: #ff3333;
  background: #fff0f0;
  padding: 1em;
  border-radius: 8px;
  margin-top: 20px;
}
*/
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}



/* ===============================================
     CONTENTS
=============================================== */
/* =====================================
     BUTTON
===================================== */
/* TOP LINK BUTTON */
/*-----------------*/
.btn-white a {
	position: relative;
	color: #ffffff;
	text-decoration: none;
    /* */
    display: inline-block;
}
.btn-white a:hover {
	color: #b99b00;
}
.btn-white a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ceb849;
	transform: scaleX(0);
	transition: transform 0.3s;
}
.btn-white a:hover::after {
	transform: scaleX(1);
}
.btn-white-outer{
    width:300px;padding-top:20px;padding-bottom:10px;box-shadow: 0 0 5px rgba(255,255,255,0.5);margin:0 auto;
}
.btn-white-outer:hover{
    box-shadow: 0 0 5px rgba(185, 155, 0,1.0);
}
/* STANDARD LINK BUTTON */
/*----------------------*/
.button a {
    background: /*#f8f9fa*/#ffffff;
    border: 1px solid /*#002048*/#b99b00;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    /*font-size:0.8em;*/
    max-width: 280px;
    padding: 8px 20px;
    /*font-family: "m-plus-rounded-1c-medium";*/
    text-decoration: none;
    color: /*#002048*/#b99b00;
    /*line-height: 1.8;*/
    transition: 0.3s ease-in-out;
    /*font-weight: 500;*/
}
.button a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button a:hover {
  background: /*#002048*/#b99b00;
  color: /*#4c9cff*/#ffffff;
}
.button a:hover:after {
  right: 1.4rem;
}
/* LINK BUTTON INFO DET. */
/*-------------*/
/* .button-det a {
    background: #ffffff;
    border: 1px solid #002048;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    max-width: 120px;
    padding: 8px 8px 10px 4px;
    text-decoration: none;
    color: #002048;
    transition: 0.3s ease-in-out;
}
.button-det a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button-det a:hover {
  background: #002048;
  color: #ffffff;
}
.button-det a:hover:after {
  right: 1.4rem;
}
/* GO TO TOP BUTTON */
/*------------------*/
.btn-top {
  display: block; /* JSでフェード制御 */
  opacity: 0;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff; /* 白地 */
  color: #6c757d;      /* グレー矢印 */
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* シャドウ */
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-top:hover {
  /*background: #0d6efd; /* Bootstrap青 */
  /* color: #fff;          /* 文字色反転 */
  transform: translateY(-5px);
}
/* =====================================
     CARD DEFINITION
===================================== */
/*DROPDOWN MENU CARD*/
/*------------------*/
.dropdown-card {
  overflow: hidden;
  border-radius: 0.375rem; /* Bootstrap標準 */
}
.card.dropdown-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease; 
}
.dropdown-card .row {
  display: flex;         /* ← 同じ高さに揃える */
  flex-wrap: nowrap;
}
.dropdown-card img.img-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ← 高さをカードに合わせ、幅はトリム */
  object-position: center;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.dropdown-card .card-title {
  font-size:15px;
    padding-top: 5px;
}
.dropdown-card .card-text {
  font-size:12px;
    padding-top:5px;
    /*padding-bottom: 5px;*/
}
@media (max-width: 991.98px) {
  .dropdown-card .card-title {
    padding-top: 0;
  }
  .dropdown-card .card-text {
    padding-top: 0;
      
          display: -webkit-box !important; /* FOR Bootstrap */
    -webkit-line-clamp: 2; /* UP TO 2LINES */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/*
.card-link {
  display: block;
  padding: 0;
  margin: 0;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

.card-link:hover {
  /*background-color: #f8f9fa; /* 任意でカード内だけ色を変える */
   /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */
}
/**/


/*.row .col-md-4 .card {
    display: flex;.dropdown-card .row {
  display: flex;         
  flex-wrap: nowrap;
}


    flex-direction: column;
}
/*
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
*/
/*
.card-body {
    display: flex;
    flex-direction: column;
}
.card .button {
    margin-top: auto;
}
.card-date {
    font-size: 0.8rem;
    color: #387ccc;
    text-align: left;
    margin-bottom: 0.5rem;
}
*/
/* CATEGORY CARD */
/*---------------*/
.card-category .card-info-img{
        height: 40px !important;
        object-fit: cover;
}
/*
@media (max-width: 991.98px) {
    .card-category .card-info-img {
        height: 30px !important;
        object-fit: cover;
    }
}
*/
.card-category .card-title{
    font-size: 15px;
}
.card-category .card:hover{
    /* box-shadow: 0 0 5px rgba(255,255,255,0.5); */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}
/*
.card.h-100 {
    display: flex;
    flex-direction: column;
}
.category-top-image {
    height: 100px;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.card-category-body.d-flex {
    display: flex;
    padding: 1rem;
}
.post-thumbnail img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}
.post-content {
    display: flex;
    flex-direction: column;
}
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-footer {
    margin-top: auto;
}

/* ---- ADD ----- 20251122 -- */
/* TOP PAGE CARD */
/*---------------*/
.card-ver .card{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-ver img{
    object-fit: cover;
    height: 60px;
}
/* @media (max-width: 768px) {
  .card-ver img{
    height: 50px;
  }
}
*/
.card-ver .card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
}
.card-ver .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* ボディ部分を伸縮可能にする */
}
.card-ver .card-body .button {
  margin-top: auto; /* 下端にボタンを固定 */
}
/* ---- ADD END ----- 20251122 -- */

/* DROPDOWN MENU CARD */
/*--------------------*/

/* 20251123 change UCHIDA
.dropdown-item .card{
    display: flex;
    flex-direction: column;
}
.dropdown-item .card-body{

    flex: 1 1 auto;
}
.dropdown-item .card-title{
    margin-bottom: 0.5rem; 
    color: #4c9cff;
    font-size: 1.0rem; 
}
.dropdown-item .card-text{
    margin-bottom: 0.5rem; 
        font-size: 0.8rem; 

}
.dropdown-item .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* SWITH PC/SP */
/*-------------*/
/* スマホでは非表示 */
@media (max-width: 991.98px) {
  .pc-only {
    display: none;
  }
}

/* =====================================
     FADE DEFINITION
===================================== */
/* FADE INSCROLL */
/*---------------*/
.fadein-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.fadein-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}
/* --> DELAY TIME */
.fadein-on-scroll.delay1 {
  transition-delay: 0.1s;
}
.fadein-on-scroll.delay2 {
  transition-delay: 0.8s;
}
/* TOP PAGE FADE IN */
/*------------------*/
.fadein {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 3.0s ease forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --> DELAY TIME */
.fadein.delay1 {
  animation-delay: 1.2s;
}
.fadein.delay2 {
  animation-delay: 2.4s;
}
.top-text {
  text-align: center;
  color: #ffffff;
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.5);
/*  text-shadow:
    0 0 8px rgba(0,0,0,0.6),
    0 0 2px rgba(0,0,0,0.8);*/
  position: relative;
  z-index: 2;
}

/* CARD カテゴリ別ヘッダー */
.news-ttl {
  background: url('./assets/images/bg/news-bg.webp') center/cover no-repeat;
}
.product-ttl {
  background: url('./assets/images/bg/product-bg.webp') center/cover no-repeat;
}
.event-ttl {
  background: url('./assets/images/bg/event-bg.webp') center/cover no-repeat;
}
.blog-ttl {
  background: url('./assets/images/bg/blog-bg.webp') center/cover no-repeat;
}


/* リスト 
/*
.dashed-list.custom-marker {
  border: 1px dashed #cfcfcf;
  padding: 1rem 1.2rem;
  margin: 0;
  list-style: none; /* デフォルトのマーカーを消す 
  border-radius: 6px;
}
*/
/* li を左からスペース確保して配置 
.dashed-list.custom-marker li {
  position: relative;
  padding-left: 2.2rem;  /* マーカー分の余白を確保 
  margin-bottom: .75rem;
  line-height: 1.6;
}

/* カスタムマーカー（円＋色＋微アニメ等） 
.dashed-list.custom-marker li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;               /* テキストの行間に合わせて調整 
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #007bff;       /* マーカー色 
  box-shadow: 0 0 0 3px rgba(0,123,255,0.08);
}

/* 折り返し行が左揃えになるように（不要なら削除） 
.dashed-list.custom-marker li {
  text-indent: 0;
}
*/

/* MEGA MENU / ETC FONT SETTING 
.dp-menu{font-size:1.0rem;}
/* .dp-menu h5{font-size:1.0em;}
.dp-menu p{font-size:0.8em;}
.dp-menu .ttl {
	position: relative;
	font-size: clamp(0.8em, 2vw, 1.1em);
	text-align: center;
	border-bottom: 2px solid #949593;
    line-height: 1.8;
}
.dp-menu .ttl::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 2px;
	background-color: #387ccc;
}
*/
/* UL LI NO-GAP 
ul.no-gap {
  margin: 0;      /* ul全体の上下余白を消す 
  padding: 0;     /* ulの左インデントを消す 
  list-style: none; /* 項目マークも消す場合 
}

ul.no-gap li {
  margin: 0;      /* liの上下余白を消す 
  padding: 0;     /* 必要に応じて内側余白もリセット 
}
*/


/*  */

.btn-white a {
	position: relative;
	color: #ffffff;
	text-decoration: none;
    /* */
    display: inline-block;
}
.btn-white a:hover {
	color: #b99b00;
}
.btn-white a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ceb849;
	transform: scaleX(0);
	transition: transform 0.3s;
}
.btn-white a:hover::after {
	transform: scaleX(1);
}
.btn-white-outer{
    width:300px;padding-top:20px;padding-bottom:10px;box-shadow: 0 0 5px rgba(255,255,255,0.5);margin:0 auto;
}