@charset "utf-8";
/*--------------------------------------------------------------------------
   サイト：MIWACS株式会社 CSS「stylen.css」
----------------------------------------------------------------------------
■制作者：miwacs2050@gmail.com
■最終更新日：(2014-02-15)
■スタイル階層
    |
    |--import.css
        |
        |--base.css
        |--index.css
        |--stylen.css(*)
------------------------------------*/

/*********************************************
/*
/* Intersection
/*
/********************************************/

/****************************************
body
****************************************/
body {
  /*background: #fff;*/
}
img {
  max-width: 100%;
  height: auto;
}

.main {
  margin-bottom: 20px;
  background: #fff !important;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 0px;
    margin-bottom: 10px;
}

address{
	color:#FFF;
}


/*********************************************
/*
/* Header
/*
/********************************************/

/****************************************
.header
****************************************/
.header {
  border-top: 6px solid #900;
  background: #fff;
}


/****************************************
.site-logo
****************************************/
.site-logo {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0;
}


/*********************************************
/*
/* Navigation
/*
/********************************************/

/****************************************
.breadcrumb
****************************************/
.breadcrumb {
  padding: 0;
  background: none;
}

.breadcrumb li+li:before {
  content: '≫';
}


/****************************************
.navbar
****************************************/
.navbar {
  min-height: auto;
  margin-bottom: 0px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .navbar .container {
    width: 100%;
  }
}

.nav-toggle {
  text-align: right;
}

.navbar-toggle {
  margin: 20px 0 0 0;
  background-image: -webkit-linear-gradient(top,#900 0,#900 100%);
  background-image:      -o-linear-gradient(top,#900 0,#900 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#900),to(#900));
  background-image:         linear-gradient(to bottom,#900 0,#900 100%);
}

.navbar-toggle .icon-bar {
  background-color: #FFF;
}

.navbar-inverse {
  border: none;
  border-top: 2px solid #FFF;
  -webkit-border-radius: 0;
          border-radius: 0;
  background-color: #900;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border: none;
}

.navbar-collapse {
  box-shadow: none;
}

@media screen and (min-width: 768px) {
  .navbar-collapse {
    margin-top: 0;
  }
}

.navbar-nav {
  float: none;
  margin: 0;
}

.navbar-nav li {
  width: 100%;
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
    color: #333;
  }
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
  color: #333;
  background-color: #FFF;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
  color: #FFF;
  background-color: #900;
}

@media screen and (min-width: 768px) {
  .navbar-nav li {
    width: 100%;
  }
  .navbar-nav>li {
    width: calc(100% /8);
    text-align: center;
  }
  .navbar-nav li:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .navbar-inverse .navbar-nav>li>a {
    padding: 15px 0;
    color: #FFF;
  }
}


/****************************************
.sub-nav
****************************************/
.sub-nav,
.navbar-form {
  display: none;
}

.sub-nav a {
  color: #66737f;
}

.sub-nav li:before {
  padding-right: 5px;
  content: '≫';
  color: #FFF;
}

@media screen and (min-width: 768px) {
  .sub-nav {
    display: block;
    padding-top: 30px;
    text-align: right;
  }
  .navbar-form {
    display: block;
    padding: 0;
    text-align: right;
  }
}

.input-group {
  width: 280px;
}

@media screen and (min-width: 768px) {
  .navbar-form .input-group .input-group-btn {
    width: 1%;
  }
}


/*********************************************
/*
/* key-visual
/*
/********************************************/

/****************************************
.jumbotron
****************************************/
.jumbotron {
  margin: 0;
  padding: 0;
}


/****************************************
.key-visual
****************************************/
.key-visual {
  margin: 0 0 5px 0;
}

.carousel-control i {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: inline-block;
  margin-top: -10px;
  color: #bababa;
}

.carousel-control .fa-angle-left {
  left: 50%;
  margin-left: -10px;
}

.carousel-control .fa-angle-right {
  right: 50%;
  margin-right: -10px;
}

@media screen and (min-width: 768px) {
  .carousel-control i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .carousel-control .fa-angle-left {
    margin-left: -15px;
  }
  .carousel-control .fa-angle-right {
    margin-right: -15px;
  }
}

.carousel-indicators {
  display: none;
}

.carousel-inner>.item>a>img {
  width: 100%;
}


/****************************************
.page-visual
****************************************/
.page-visual {
  background-color: #fff;
  margin-bottom: 20px;
}

.pagevisual-title {
  margin: 0;
  font-size: 20px;
  padding: 12px 20px;
  height: 40px;
  color: #333;
background-color: #FFF;
  /*background-image: url(../img/bg-title.jpg);*/
  background-repeat: no-repeat;
  background-position: right top;
  -webkit-background-size: 50%;
       -o-background-size: 50%;
          background-size: 50%;
}

@media screen and (min-width: 768px) {
  .pagevisual-title {
    font-size: 20px;
    padding: 10px 0 0 10px;
    height: 40px;
    color: #333;
    background-position: right top;
    -webkit-background-size: auto;
         -o-background-size: auto;
            background-size: auto;
  }
}


/*********************************************
/*
/* MainContent-index
/*
/********************************************/

/****************************************
.feature
****************************************/
.feature-block {
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .feature-block {
    margin-bottom: 0;
    text-align: center;
  }
}

.feature-block a {
  display: table;
}

@media screen and (min-width: 768px) {
  .feature-block a {
    display: block;
  }
}

.feature-block a:hover {
  text-decoration: none;
}

.feature-block a p,
.feature-block a h3 {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .feature-block a p,
  .feature-block a h3 {
    display: block;
    float: left;
  }
}

.feature-block a p {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) {
  .feature-block a p {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
}

.feature-block a p img {
  border: 4px solid #ececec;
}

.feature-block a:hover p img {
  opacity: 0.5;
}

.feature-block a h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  color: #666;
}

@media screen and (min-width: 480px) {
  .feature-block a h3 {
    font-size: 20px;
    margin-top: 0;
    padding: 10px 15px 0;
  }
}

.feature-block a:hover h3 {
  color: #bbb;
}

.feature-block a h3 span {
  font-size: 14px;
  display: block;
}

.featureblock-title {
  padding-left: 0;
}


/****************************************
.home-subtitle
****************************************/
.home-subtitle {
  font-size: 25px;
  padding-left: 10px;
  border-left: 4px solid #337ec4;
}

.home-subtitle span {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

@media screen and (min-width: 768px) {
  .home-subtitle {
    font-size: 40px;
  }
  .home-subtitle span {
    display: inline;
    margin-left: 20px;
  }
}


/****************************************
.nav-tabs
****************************************/
.nav-tabs li {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

@media screen and (min-width: 768px) {
  .nav-tabs li {
    width: 190px;
    height: 52px;
    margin: 0 4px 0 0;
  }
}

.nav-tabs>li>a {
  font-size: 16px;
  margin: 0;
  padding: 14px 15px;
  text-align: center;
  -webkit-border-radius: 0;
          border-radius: 0;
  background: #FFF;
  color:#333;
}

@media screen and (min-width: 768px) {
  .nav-tabs>li>a {
    -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
  }
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
  color: #fff;
  background: #900;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #FFF;
}


/****************************************
.tab-content
****************************************/
.tab-content {
  padding: 20px;
  border: 2px solid #e8e8e8;
  background: #fff;
  margin-bottom:5px;
}

.tab-pane {
  margin-bottom: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}

.tab-pane li {
  overflow: hidden;
}

.tab-pane li+li {
  margin-top: 12px;
}

.tab-pane div {
  float: left;
}

.tab-pane .article-title {
  font-size: 14px;
  line-height: 1.4;
  float: left;
  display: block;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .tab-pane .article-title {
    float: none;
    padding-left: 154px;
  }
}

.tab-pane .date {
  width: 80px;
  margin-right: 10px;
}

.tab-pane .label {
  display: inline-block;
  width: 60px;
  margin-right: 10px;
  padding: 0.3em 0 0.4em;
  text-align: center;
  color: #fff;
}


.label-product {
  background: #393;
}

.label-news {
  background: #C00;
}

.label-topics {
  background: #099;
}

.label-seminer {
  background: #F60;
}

.label-voice {
  background: #F66;
}


.label-media {
  background: #930;
}


/*********************************************
/*
/* MainContent
/*
/********************************************/

/****************************************
.mainblock
****************************************/
.mainblock {
  padding: 25px 0;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.inner-block p {
	font-size:110%;
  padding: 0px;
}



@media screen and (min-width: 768px) {
  .inner-block li {
    padding: 0 3px;
  }
}


/****************************************
.article-nav
****************************************/
.article-nav ul {
  padding: 15px;
  list-style: none;
}

.article-nav li {
  display: inline-block;
}

.article-nav .prev {
  float: left;
}

.article-nav .next {
  float: right;
}

.article-nav li a {
  font-size: 14px;
  line-height: 26px;
  display: inline-block;
  width: 86px;
  height: 26px;
  text-align: left;
  border: 1px solid #ddd;
  -webkit-border-radius: 13px;
          border-radius: 13px;
}

.article-nav li a:hover {
  text-decoration: none;
  background: #CCC;
}

.article-nav+.inner-block {
  border-top: 1px solid #eaeaea;
}


/****************************************
.title
****************************************/
.maintitle {
  margin-top: 0px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    padding: 12px 20px 12px 16px;
    color: #333;
    border-top: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    border-left: 10px solid #F69;
}



.subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    position: relative;
    padding: 12px 30px;
    color: #333;
    border-top: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    border-left: 10px solid #900;
    margin-top: 0px;
    clear: both;
}

.blocktitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  padding: 8px 10px;
  color: #333;
  border-bottom: 2px solid #eaeaea;
}

.boxtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  line-height: 1.2;
  padding: 8px 0;
}


/****************************************
.table
****************************************/
.tablebox {
  padding: 25px 15px;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.table>tbody>tr>th {
  border-top: none;
  border-bottom: 2px solid #ddd;
}

.table>tbody>tr>th:first-child,
.table>tbody>tr>td:first-child {
  padding: 8px 8px 8px 15px;
}


/****************************************
.thumb-box
****************************************/
.thumb-box {
  padding: 0;
  list-style: none;
}

.thumb-box li {
  padding: 0 15px 10px;
}

@media screen and (min-width: 768px) {
  .thumb-box li {
    padding: 0 15px;
  }
}

.thumb-box li a {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 4px;
  color: #333;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.thumb-box li a:hover {
  text-decoration: none;
  border: 1px solid #333;
}

.thumb-box li a img {
  width: 100%;
  height: auto;
}

.thumb-box h3,
.thumb-box p {
  padding: 0 15px;
}

.thumb-box button {
  float: right;
  margin: 0 15px 15px 0;
}


/****************************************
.thumb-block
****************************************/
.thumb-block {
  list-style: none;
}

.thumb-block li {
  margin-bottom: 10px;
  padding: 4px 4px 15px;
  color: #333;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

@media screen and (min-width: 768px) {
  .thumb-block li {
    padding: 4px;
  }
}

.thumb-block li div {
  position: relative;
  overflow: hidden;
}

.thumb-block li:last-child {
  margin-bottom: 20px;
}

.thumb-block li>div:first-child {
  padding-right: 0;
  padding-left: 0;
}

.thumb-block li>div:first-child img {
  width: 100%;
  height: auto;
}

.thumb-block button {
  float: right;
}


/*********************************************
/*
/* SideContent
/*
/********************************************/

/****************************************
.banner
****************************************/
.aside {
  margin: 10px auto 0;
}

.aside .banner {
  text-align: left;
}

.aside p,
.aside .fb-page {
  text-align: left;
}

.aside p a:hover {
  opacity: 0.6;
}

@media screen and (min-width: 992px) {
  .aside {
    margin: 0 auto;
  }
  .aside p img {
    width: 100%;
    height: auto;
  }
}


/****************************************
.cat-nav
****************************************/
.cat-nav {
  margin-bottom: 10px;
  padding-top:10px;
}

.cat-nav .cat-title {
  font-size: 16px;
  line-height: 20px;
  height: auto;
  margin: 0;
  padding:10px;
  color: #fff;
  background: #900;
}

.cat-nav ul {
  padding: 0;
  list-style: none;
  border-top: 1px solid #eaeaea;
}

.cat-nav li {
  height: auto;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  padding:10px;
}

.cat-nav li a {
  font-size: 16px;
  line-height: 20px;
  display: block;
  padding:5px;
  color: #333;
}

.cat-nav li a::before {
  position: absolute;
  right: 15px;
}


/*********************************************
/*
/* Footer
/*
/********************************************/

/****************************************
.btn-pagetop
****************************************/
.btn-pagetop {
  border-bottom: 5px solid #CCC;
  background: #fbfbfb;
}

.btn-pagetop .container {
  text-align: right;
}

.btn-pagetop .container a {
  display: inline-block;
  width: 50px;
  height: 25px;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
  background: #900;
}

.btn-pagetop .container a:hover {
  text-decoration: none;
  background: #c1d5e8;
}

.btn-pagetop .container a i {
  padding-top: 5px;
}


/****************************************
.footer
****************************************/
.footer {
  background: #900;
}

.footer .container {
  padding: 10px 0 100px 0;
}

.footer-nav {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 34px;
  margin: 0;
  color: #900;
}

@media screen and (min-width: 768px) {
  .footer-nav>div {
    float: left;
    max-width: 50%;
  }
}

@media screen and (min-width: 992px) {
  .footer-nav>div {
    max-width: 25%;
    text-align: left;
  }
}

.footernav-title {
  font-size: 16px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #FFF;
  color:#FFF;
}

.footernav-title .glyphicon-chevron-down:before {
  margin-right: 10px;
}

@media screen and (min-width: 768px) {
  .footernav-title .glyphicon-chevron-down:before {
    display: none;
  }
}

.list-group {
  margin-bottom: 0;
  color: #FFF;
}

.list-group a {
  font-size: 14px;
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #FFF;
}

.list-group a:hover {
  text-decoration: none;
  background-color:#900;
  color: #FFF;
}

.footer-logo {
  margin-top: 20px;
}

.footer-icon .container {
  list-style-type: none;
}

.footer-icon p,
.footer-icon ul {
  width: 100%;
  text-align: center;
}

.footer-icon li {
  display: inline-block;
  float: none;
}

.footer-icon li a:hover {
  opacity: 0.6;
}

.footer-icon li img {
  width: 40px;
  height: auto;
  border: 2px solid #bedaff;
}

.sns-icon {
  float: left;
}

.copyright {
  text-align: center;
  color: #FFF;
}



/*===============================================
  横幅480pxまで（固定表示）
===============================================*/
/*@media screen and (max-width: 480px){*/
	
body{  
margin: 0;  
padding: 0;  
}  
* html body{  
    overflow: hidden;  
}   
 
div#footerArea {  
    position: fixed !important;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: auto;  
    background-color: #900;  
	padding-top:5px;   
	padding-bottom:5px; 
	border-top: 1px solid #CCC ;
} 

* html div#contentsArea{  
    height: 100%; 
    overflow: auto;
} 

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.index-content a:hover {
  color: black;
  text-decoration: none;
}

.index-content {
  margin-bottom: 20px;
  padding: 20px 0px 20px 0px;
}

.index-content .card {
  margin-bottom: 20px;
}

.index-content .row {
  margin-top: 20px;
}

.index-content a {
  color: black;
}

.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index-content .card h4 {
  margin: 13px;
}

.index-content .card p {
	font-size: 12px;
  margin: 20px;
  opacity: 0.8;
}

.index-content .blue-button {
  width: 100px;
  -webkit-transition: background-color 1s, color 1s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color 1s, color 1s;
  min-height: 20px;
  background-color: #002E5B;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: lighter;
  margin: 0px 20px 15px 20px;
  padding: 5px 0px;
  display: inline-block;
}
.table-1{border-collapse:collapse;width:100%;margin:0px 0px 10px 0px;font-size:small;}
.table-1 th{padding:5px;background:#f5ffdb;border:1px solid #84A6EF;text-align:center;font-weight:normal;}
.table-1 td{padding:5px;background:#fbffef;border:1px solid #7B9AE7;}
/*}*/



/* =========================================================
  Modern override for stylen.css (Bootstrap3)
  既存CSSの後に読み込む（上書き専用）
========================================================= */

:root{
  --brand: #900;
  --text: #1f2937;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f5f5f5;
  --border: #e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --shadow2: 0 14px 32px rgba(0,0,0,.10);
  --radius: 14px;
}

/* ---- Base readability ---- */
html { -webkit-text-size-adjust: 100%; }
body{
  color: var(--text);
  line-height: 1.75;
  letter-spacing: .02em;
}

.main{ margin-bottom: 24px; } /* 20px→少し余白増 */

a{ color: #0b57d0; }
a:hover{ opacity: .9; text-decoration: none; }

/* 見出しのメリハリ */
h1,h2,h3{ line-height: 1.35; }
h2{ font-size: 26px; margin-bottom: 14px; }
h3{ font-size: 21px; margin-bottom: 12px; }
@media (min-width: 768px){
  h2{ font-size: 30px; }
  h3{ font-size: 23px; }
}

/* ---- Header / Nav: “赤を活かしつつ軽く” ---- */
.header{
  background: #fff;
  border-top: 6px solid var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.navbar-inverse{
  background: var(--brand);
  border-top: 0; /* 既存の白ラインを無くしたい場合 */
}

/* hover反転（白背景＋黒文字）が強いので、白文字維持で上品に */
.navbar-inverse .navbar-nav>li>a{
  color: rgba(255,255,255,.95);
  font-weight: 600;
  letter-spacing: .02em;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus{
  color: #fff;
  background: rgba(255,255,255,.14);
}

/* トグルボタンを今風に（角丸＋押しやすい） */
.navbar-toggle{
  margin: 14px 0 0 0; /* 20px→少し上げてズレを減らす */
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
}

/* ---- Cardized layout (mainblock / tablebox / tab-content / page-visual) ---- */
.mainblock,
.tablebox,
.tab-content,
.page-visual{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* mainblockの余白を“今の密度”に */
.mainblock{
  padding: 18px 0;   /* 25px→少し詰めてスッキリ */
}
@media (min-width: 768px){
  .mainblock{
    padding: 22px 0;
  }
}

/* テキスト */
.inner-block p{
  font-size: 16px;   /* 110%だと環境差出るので固定寄りに */
  color: var(--text);
}

/* ---- Titles (maintitle / subtitle) を今風に ---- */
.maintitle,
.subtitle{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

/* 左アクセントは活かす */
.maintitle{
  border-left: 10px solid #F69;
}
.subtitle{
  border-left: 10px solid var(--brand);
  padding: 14px 18px; /* 12px 30px→余白を自然に */
  margin-bottom: 16px;
}

/* ---- Tabs: 角丸とアクティブ感 ---- */
.nav-tabs>li>a{
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: #fff;
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus{
  background: var(--brand);
  border-color: var(--brand);
}

/* tab-contentの枠を薄くしてカード感 */
.tab-content{
  border: 1px solid var(--border);
}

/* ---- Thumbs: hoverで“今っぽい浮き” ---- */
.thumb-box li a,
.thumb-block li{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.thumb-box li a:hover,
.thumb-block li:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(0,0,0,.18);
}

/* ---- Table: 行間・罫線を薄く ---- */
.table>tbody>tr>th,
.table>tbody>tr>td{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.table>tbody>tr>th{
  background: #fafafa;
  border-bottom: 1px solid var(--border); /* 2px→薄く */
  font-weight: 700;
}

/* ---- Buttons: 角丸統一（Bootstrap3 btnにも効く） ---- */
.btn,
button,
input[type="submit"]{
  border-radius: 12px !important;
}
.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover,
.btn-primary:focus{
  background: #7a0000;
  border-color: #7a0000;
}

/* ---- Footer: 可読性UP ---- */
.footer{
  background: var(--brand);
}
.list-group a{
  color: rgba(255,255,255,.92);
}
.list-group a:hover{
  background: rgba(255,255,255,.12);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}
/* Gナビ（Bootstrap3 navbar）の下に余白 */
.navbar{
  margin-bottom: 14px;
}

/* 見出しの角丸を少しだけとがらせる */
.maintitle,
.subtitle {
  border-radius: 6px;
}

.boxtitle,
.blocktitle {
  border-radius: 4px;
}
.cat-title {
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
/* =========================================================
  Sidebar modernize
========================================================= */

/* サイドバー全体の間隔 */
.aside{
  margin-top: 14px; /* 10px→少し余白 */
}

/* サイドバー内のブロック（カテゴリ・バナーなど）をカード化 */

.aside .banner,
.aside .fb-page{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden; /* 角丸を中身にも効かせる */
  margin-top: -14px;
  margin-bottom: 14px;
}

/* カテゴリ見出し（赤帯）を今風に */
.cat-nav .cat-title{
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px 14px;      /* 10px→少しだけ厚み */
  border-radius: 8px;      /* 赤帯自体も角丸 */
  margin: 12px 12px 10px;  /* 外側カードの中で"内側チップ"にする */
}

/* リスト全体：枠線ゴリゴリをやめてスッキリ */
.cat-nav ul{
  border-top: 0;
  margin: 0;
  padding: 0 0 8px;
}

/* 各項目：ボーダーより "余白＋ホバー" で見せる */
.cat-nav li{
  border: 0;
  padding: 0;
}

/* リンク：押しやすい高さ＋ホバーで今風 */
.cat-nav li a{
  position: relative; /* ::before を活かすなら必須 */
  display: block;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  border-radius: 10px;
  margin: 6px 12px;        /* カード内で余白を作る */
  transition: background .15s ease, transform .15s ease;
}

/* 右矢印（もし使うなら） */
.cat-nav li a::before{
  content: "?";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.35);
}

/* ホバー：ほんのり浮かせる */
.cat-nav li a:hover{
  background: rgba(144,0,0,.06); /* ブランド赤を薄く */
  transform: translateY(-1px);
  text-decoration: none;
}

/* アクティブ表示（該当ページで class="current" とかある場合用） */
.cat-nav li.current a,
.cat-nav li.active a{
  background: rgba(144,0,0,.10);
  font-weight: 700;
}

/* バナー画像：カード角丸に合わせて馴染ませる */
.aside p img,
.aside .banner img{
  border-radius: 10px;
}

/* サイドバー内リンクのタッチ領域を確保（スマホ） */
@media (max-width: 767px){
  .cat-nav li a{
    padding: 14px 14px;
    margin: 6px 10px;
  }
}

/* =========================================================
   Gナビ直下 見出し＋パンくずデザイン調整
========================================================= */

/* 見出しカード（page-visual）全体 */
.gnav-under{
  margin-top: 16px; /* ナビのすぐ下に余白 */
  margin-bottom: 10px;
}

.page-visual{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  padding: 8px 0;
}

/* 見出しテキスト */
.pagevisual-title{
  font-size: 24px;
  font-weight: 700;
  padding: 14px 18px;
  margin: 0;
  color: #333;
}

/* パンくず全体 */
.gnav-under-breadcrumb{
  margin-top: -8px;  /* 見出しカードと近づける微調整 */
  margin-bottom: 16px;
}

/* パンくずデザイン今風 */
.breadcrumb{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}

.breadcrumb>li+li:before {
  content: "?"; /* 今っぽい矢印 */
  color: #aaa;
}
/* =========================================================
   ページタイトル＋パンくず：スタンダードで締まる版
========================================================= */

/* タイトル帯：カード感をやめて"帯"に */
.page-visual{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;         /* 角丸は控えめ */
  box-shadow: none;           /* 影を消して"標準感" */
  padding: 0;                 /* 内側余白はタイトル側へ */
  margin-top: 14px;
  margin-bottom: 8px;
  position: relative;
}

/* ブランドの細いライン（かっこよさ出る） */
.page-visual:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #900;           /* ブランド赤 */
  opacity: .9;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* タイトル文字：太め・余白で勝負 */
.pagevisual-title{
  margin: 0;
  padding: 16px 18px 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #111827;
  background: transparent;
}

@media (min-width: 768px){
  .pagevisual-title{
    font-size: 26px;
    padding: 18px 22px 16px;
  }
}

/* パンくず：カードをやめて"薄いバー"に */
.breadcrumb{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 2px;
  margin: 0 0 14px;
  color: #6b7280;
  font-size: 12px;
}

/* パンくずの区切り：今風の矢印 */
.breadcrumb>li+li:before{
  content: "?";
  color: #9ca3af;
  padding: 0 8px;
}

/* パンくずリンク：控えめに */
.breadcrumb a{
  color: #2563eb;
  text-decoration: none;
}
.breadcrumb a:hover{
  text-decoration: underline;
}

/* タイトルとパンくずの間隔を"気持ち良く" */
.page-visual + .breadcrumb-wrap{
  margin-top: 6px;
}
/* Gナビの下を一段締める */
.navbar{
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0; /* 余白はタイトル側に任せる */
}

/* =========================================
  タイトル帯：固定高さの呪いを解除して標準的に
========================================= */

/* page-visual本体 */
.page-visual{
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 0;
  margin-top: 14px;
  margin-bottom: 8px;

  /* 擬似要素ラインをやめて、標準の下線に */
  border-bottom: 3px solid #900;
}

/* もし以前の :after を残しているなら無効化 */
.page-visual:after{
  content: none !important;
}

/* タイトル：height固定を解除（ここが最重要） */
.pagevisual-title{
  height: auto !important;     /* 元CSSの height:40px を殺す */
  line-height: 1.35;
  margin: 0;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #111827;
  background: transparent;
}

/* PCで少し大きく */
@media (min-width: 768px){
  .pagevisual-title{
    font-size: 26px;
    padding: 18px 22px;
  }
}
.breadcrumb{
  margin: 6px 0 14px;
  padding: 6px 0;
  font-size: 12px;
  color: #6b7280;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.breadcrumb>li+li:before{
  content: "?";
  color: #9ca3af;
  padding: 0 8px;
}
/* タイトル帯：標準ヘッダー感 */
.page-visual.gnav-under{
  margin-bottom: 8px;
}

.page-visual{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: none;
  padding: 0;
  border-bottom: 3px solid #900;
}

/* 元CSSの固定heightを殺す */
.pagevisual-title{
  height: auto !important;
  margin: 0;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #111827;
}

/* パンくず：薄く控えめ */
.gnav-under-breadcrumb{ margin-bottom: 14px; }

.breadcrumb{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 2px;
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.breadcrumb>li+li:before{
  content: "?";
  color: #9ca3af;
  padding: 0 8px;
}

/* GNav下の余白をゼロにする */
#globalNavi .navbar {
    margin-bottom: 0 !important;
}

/* タイトルエリア（page-visual）の上マージンを消す */
.page-visual.gnav-under {
    margin-top: 0 !important;
}

/* パンくずリスト（breadcrumb-wrap）の上マージンも調整が必要な場合 */
.gnav-under-breadcrumb {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
  /* 1. ロゴ周りの上下余白を最小化 */
  .site-logo {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .site-logo img {
    max-height: 40px; /* ロゴの高さを少し抑えて画面を広く確保 */
    width: auto;
  }

  /* 2. メニューボタン（三本線）の位置をロゴに合わせる */
  .navbar-toggle {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding: 8px 10px !important;
  }

  /* 3. 中身が空の場合でも表示されてしまうタイトルエリアを調整 */
  .page-visual.gnav-under {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom-width: 2px !important; /* 赤いラインを細く */
  }

  /* 4. タイトル文字の上下パディングを詰める */
  .pagevisual-title {
    padding: 10px 15px !important; /* 16pxから短縮 */
    font-size: 18px !important;    /* 文字を少し小さくして圧迫感を軽減 */
    height: auto !important;
  }

  /* 5. パンくずリストの上余白も詰める */
  .gnav-under-breadcrumb {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 767px) {
  /* 1. ヘッダー全体の高さを抑える */
  .header .container {
    padding-bottom: 0 !important;
  }

  /* 2. ロゴ下のマージンをゼロにして、位置を調整 */
  .site-logo {
    margin-top: 8px !important;   /* 上を少し空けてバランス調整 */
    margin-bottom: 0 !important;  /* 下のマージンを完全に消去 */
  }

  /* 3. メニューボタンがヘッダーを押し広げないように調整 */
  .navbar-toggle {
    margin-top: 8px !important;   /* ロゴの高さと揃える */
    margin-bottom: 8px !important;
    padding: 6px 10px !important; /* ボタン自体も少しスリムに */
  }

  /* 4. もしロゴの下にまだ隙間がある場合、ロゴ画像自体の高さを制限 */
  .site-logo img {
    max-height: 80px;
    width: auto;
  }
}

/* スマホ時のヘッダー・ロゴ周りの余白を徹底除去 */
@media (max-width: 767px) {
  /* ヘッダー全体の高さを詰める */
  header.header {
    border-top: 4px solid #900 !important; /* 赤ラインを少し細く */
    box-shadow: none !important;
  }
  
  header.header .container {
    padding-bottom: 0 !important;
  }

  /* ロゴ部分の上下マージンを強制排除 */
  .site-logo {
    margin: 4px 0 0 0 !important; /* 上に少しだけ余裕を持たせ、下は0 */
    line-height: 1 !important;
  }

  /* メニューボタンがロゴ行を押し広げないように調整 */
  .navbar-toggle {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding: 6px 10px !important;
  }

  /* ★重要：ロゴとタイトルの間の隙間（page-visualの上の余白）を消す */
  .page-visual.gnav-under {
    margin-top: 0 !important;
    border-radius: 0 !important; /* 隙間を完全になくすために角丸を解除 */
  }
}


.cat-nav li a::before{
  content: "\203A";   /* ? */
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.35);
}


.breadcrumb>li+li:before{
  content: "\203A";   /* ? */
  color: #9ca3af;     /* 既存の色指定を残すならそのまま */
  padding: 0 8px;
}


/* =========================================================
   ヘッダー・ナビ固定のレスポンシブ最適化
   PC：ナビのみ固定で画面を広く / スマホ：全体固定を維持
========================================================= */

/* --- 1. 全体共通の固定解除と余白リセット --- */
/* (一旦これまでの設定をリセットし、以下のメディアクエリで再定義します) */
.header {
    position: static !important;
}
body {
    padding-top: 0 !important;
}

/* --- 2. パソコン版 (768px以上): ナビバー(赤色部分)のみを固定 --- */
@media (min-width: 768px) {
    /* 重要：headerタグの「親要素としての高さ制限」を解除し、
       中のナビゲーションがページ全体に対して sticky（固定）されるようにします。
    */
    header.header {
        display: contents !important;
    }

    /* headerの装飾（背景白と赤ライン）を、ロゴ部分のコンテナに継承させて再現します */
    header.header > .container:first-child {
        display: block;
        width: 100%;
        max-width: none; /* 全幅に広げる */
        background: #fff;
        border-top: 6px solid #900;
        margin-bottom: 0;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    /* ロゴとサブナビの中央寄せを維持 */
    header.header > .container:first-child > .row {
        max-width: 1170px; /* Bootstrapの標準コンテナ幅 */
        margin: 0 auto;
        padding: 0 15px;
    }

    #globalNavi {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* ページ内リンクの着地位置調整 */
    html {
        scroll-padding-top: 60px; 
    }
}

/* --- 3. スマホ・タブレット版 (767px以下): これまでの全体固定を維持 --- */
@media (max-width: 767px) {
    .header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* スマホはロゴ＋ナビの高さを考慮して、コンテンツが潜り込まないよう余白を作成 */
    body {
        /* ヘッダーの高さに合わせて数値を微調整してください */
        padding-top: 140px !important; 
    }

    html {
        scroll-padding-top: 150px;
    }

    /* スマホメニュー展開時の背景色を維持 */
    #globalNavi .navbar-collapse.in {
        background-color: #900 !important;
    }
}

.boss-comment {
  margin: 30px 0;
}

.boss-photo {
  margin-bottom: 15px;
}

.boss-photo img {
  max-width: 260px;
}

.boss-text p {
  margin: 0;
  padding: 18px 20px;
  background: #eee;
  border-radius: 12px;
  line-height: 1.9;
  font-size: 16px;
  position: relative;
}

/* いったん三角は消す */
.boss-text p:before {
  display: none;
}

@media (max-width: 991px) {
  .boss-text p {
    padding: 15px;
    font-size: 15px;
    line-height: 1.8;
  }
}

@media (min-width: 992px) {
  .boss-photo {
    padding-right: 24px;
  }

  .boss-text {
    padding-left: 8px;
  }

  .boss-text p {
    margin-left: 0;
  }
}


.boss-comment {
  margin: 30px 0;
}

.boss-photo {
  margin-bottom: 15px;
}

.boss-photo img {
  max-width: 220px;
}

.boss-text p {
  margin: 0;
  padding: 18px 20px;
  background: #f7f7f7;
  border-radius: 12px;
  line-height: 1.9;
  font-size: 16px;
  position: relative;
}

.boss-text p:before {
  display: none;
}

@media (min-width: 992px) {
  .boss-photo {
    padding-right: 20px;
  }

  .boss-text {
    padding-left: 20px;
  }
}

@media (max-width: 991px) {
  .boss-text p {
    padding: 15px;
    font-size: 15px;
    line-height: 1.8;
  }
}

.main {
  background: #fff !important;
}



/* =========================================================
   Centered Card Mega Menu (イメージ画像スタイル)
========================================================= */

@media (min-width: 768px) {
  /* 1. メニューを中央寄せの「浮いたカード」にする */
  .navbar-nav > li.dropdown {
    position: relative; /* 親を基準にする */
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 中央に寄せる */
    width: 780px;                /* メニューの横幅（好みで調整可） */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    padding: 20px;
    margin-top: 10px;
    display: flex !important;    /* 横並びにする */
    flex-wrap: wrap;
    gap: 20px;
    z-index: 1000;
  }

  /* 2. 各カラム（地域やカテゴリ）の箱 */
  .dropdown-menu > li.menu-column {
    flex: 1;                     /* 均等に並べる */
    min-width: 200px;
    list-style: none;
  }

  /* 3. 見出し（青い帯部分）のスタイル */
  .dropdown-menu .menu-title {
    display: block;
    background: #6dcce3;         /* イメージ画像に近い水色 */
    color: #fff;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
  }

  /* 4. メニュー内リンクの調整 */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    color: #333 !important;
    padding: 8px 10px !important;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
  }

  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    background: #f7f7f7 !important;
    color: var(--brand) !important;
    padding-left: 15px !important; /* 少し右に動く */
  }
}

/* =========================================================
   Mobile Optimization (スマホ時の背景変化)
========================================================= */

@media (max-width: 767px) {
  /* スマホメニューが開いた時、メニュー領域の背景色を変える */
  .navbar-inverse .navbar-collapse {
    background-color: #900; /* 基本の赤 */
  }

  /* ドロップダウンが開いている時の中身を少し暗くして段差をつける */
  .navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.15) !important; 
    padding: 10px 0;
  }

  /* スマホ時の見出し（青い帯） */
  .dropdown-menu .menu-title {
    color: #6dcce3; /* スマホでは帯ではなく文字色で強調 */
    padding: 10px 20px;
    font-weight: bold;
    font-size: 15px;
    border-left: 4px solid #6dcce3;
    margin: 10px 0 5px 15px;
  }
}

/* ロゴ画像の設定例 */
.header-logo img {
  max-width: 100%; /* 親要素からはみ出さない */
  width: 180px;    /* 適切な表示サイズ（任意） */
  height: auto;    /* これで縦横比を固定 */
  display: block;
}

/* メニューリストの設定例 */
.menu-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 白の20%透過線 */
}

/* 最後の項目の線は消す場合 */
.menu-list li:last-child {
  border-bottom: none;
}

/* メニュー内のリンク（タップ範囲を広げる） */
.menu-list li a {
  display: block;
  padding: 15px 20px; /* 上下左右に余裕を持たせる */
  color: #fff;
  text-decoration: none;
}

/* タップした瞬間に色が変わるようにするとさらに親切 */
.menu-list li a:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.menu-list li a::before {
  content: '>';
  margin-right: 10px;
  font-weight: bold;
  font-size: 0.8em;
}

/* PC向けのスタイル（例：画面幅1024px以上） */
@media screen and (min-width: 1024px) {
  
  /* ドロップダウンのリスト（ulタグなど） */
  .dropdown-menu {
    display: grid;                   /* グリッドレイアウトを有効化 */
    grid-template-columns: repeat(3, 1fr); /* 3等分で3列並べる */
    width: 600px;                    /* 3列並べるために横幅を広げる（任意） */
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  /* メニュー項目（liタグなど） */
  .dropdown-menu li {
    border-bottom: 1px solid #eee;   /* 区切り線 */
    list-style: none;
  }

  /* リンクの調整 */
  .dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    text-align: left;
    white-space: nowrap;             /* 文字の折り返しを防ぐ */
  }
}

/* 1. 初期状態では非表示にする */
.dropdown-menu {
  display: none; 
  position: absolute;
  top: 100%;
  left: 0;
}

/* 2. マウスが乗った「そのli」の中にあるメニューだけを表示する */
/* 「li:hover」の直後にある「> .dropdown-menu」がポイントです */
.nav-item:hover > .dropdown-menu {
  display: grid; /* 前回の回答の3列指定など */
}


/* =========================================================
   修正版：中央寄せカード型メガメニュー
========================================================= */

@media (min-width: 768px) {
  /* 親要素のリミットを外す */
  .navbar-nav {
    position: static !important;
  }
  
  .navbar-nav > li.dropdown {
    position: static !important; 
  }

  /* ドロップダウンメニュー本体 */
  .navbar-inverse .navbar-nav .open .dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* 中央寄せ */
    width: 850px !important;                /* 横幅を広めに確保 */
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    padding: 25px !important;
    margin-top: 10px !important;
    
    /* 横並びにする設定 */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    z-index: 1000 !important;
  }

  /* --- 重要：1列になる原因をリセット --- */
  .navbar-inverse .navbar-nav .dropdown-menu > li {
    width: calc(33.333% - 14px) !important; /* 3列にする（隙間分を引く） */
    float: none !important;
    margin-bottom: 0 !important;
  }

  /* 見出し（青い帯） */
  .dropdown-menu .menu-title {
    display: block !important;
    background: #6dcce3 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 10px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }

  /* 中のリスト（ul）の余白リセット */
  .dropdown-menu .menu-column ul {
    padding: 0 !important;
    list-style: none !important;
  }

  /* リンクのスタイル */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    color: #333 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    background: #f7f7f7 !important;
    color: #900 !important; /* ブランドの赤 */
    padding-left: 18px !important;
    text-decoration: none !important;
  }
}

/* スマホ時の調整 */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .dropdown-menu > li {
    width: 100% !important; /* スマホは1列 */
  }
}

/* =========================================================
   PC用：メニューホバー時の付箋風アクセント線
========================================================= */

@media (min-width: 768px) {
  /* 1. リンクの基本設定（擬似要素を配置するために相対位置に） */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    position: relative !important;
    transition: all 0.2s ease !important; /* 動きを滑らかに */
    padding-left: 15px !important;       /* 通常時の左余白 */
  }

  /* 2. ホバーした時のスタイル */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    background-color: #f5f5f5 !important; /* ほんのりグレーの背景 */
    color: #900 !important;               /* 文字をブランドの赤に */
    padding-left: 28px !important;       /* 線が出る分、文字を右に押し出す */
  }

  /* 3. 付箋のような左側の縦線（擬似要素） */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;               /* 左端から少し内側に配置 */
    top: 20% !important;                  /* 上下の位置調整（中心付近） */
    height: 60% !important;               /* 線の長さ（文字の高さに合わせる） */
    width: 4px !important;                /* 線の太さ */
    background-color: #900 !important;    /* 線の色（ブランドカラー） */
    border-radius: 2px !important;        /* 角を少し丸めて付箋っぽく */
  }
}

/* =========================================================
   スマホ専用：究極の操作性アップデート
========================================================= */

@media (max-width: 767px) {
  /* 1. メニュー全体の背景を透過させて「浮遊感」を出す */
  .navbar-inverse .navbar-collapse {
    background-color: rgba(144, 0, 0, 0.98) !important; /* ブランドの赤を少し透過 */
    border: none;
    padding-top: 10px;
  }

  /* 2. サブメニュー（ドロップダウン）を2カラムのグリッドにする */
  .navbar-inverse .navbar-nav .open .dropdown-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* 2列に並べる */
    gap: 8px;
    padding: 15px !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* 親メニューと色味を変える */
    margin: 10px !important;
    border-radius: 12px;
  }

  /* 3. メニュー項目のボタン化 */
  .navbar-inverse .navbar-nav .dropdown-menu > li {
    width: 100% !important;
    border: none !important;
  }

  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 14px 10px !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  /* 見出し（青い帯）を2列ぶち抜きで表示 */
  .dropdown-menu .menu-title {
    grid-column: span 2; /* 2列分使う */
    background: #6dcce3 !important;
    margin: 10px 0 5px 0 !important;
    border-left: none !important;
    border-radius: 6px;
  }

  /* 4. タップした瞬間のフィードバック（反応を良く見せる） */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:active {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(0.96); /* 押した感が出るように少し縮む */
  }

  /* 5. コンバージョン用の固定ボトムバー (任意で追加) */
  /* HTML側に <div class="mobile-cv-bar">...</div> がある場合 */
  .mobile-cv-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    z-index: 9999;
  }
}

/* =========================================================
   スマホ：長い文字へのはみ出し対策
========================================================= */

@media (max-width: 767px) {
  
  /* 1. ボタンの高さを「固定」から「可変」に変更し、文字を少し小さくする */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    height: auto !important;          /* 高さを中身に合わせる */
    min-height: 50px !important;      /* 最低限の高さは維持 */
    font-size: 13px !important;       /* 14px → 13px に微調整 */
    line-height: 1.3 !important;      /* 行間を詰めて2行になっても綺麗に見せる */
    padding: 10px 8px !important;     /* 左右の余白を少し削って表示領域を稼ぐ */
    word-break: break-all !important; /* 枠内で強制的に折り返す */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. 【おすすめ】特に長い項目だけを「1列（全幅）」に強制する設定 */
  /* 特定の長い文字が含まれるボタンや、特定の順番のボタンを横いっぱいにしたい場合 */
  
  /* 例：一番上の項目（アウトレットセール）や2番目（キャンペーン）が長い場合 */
  .navbar-inverse .navbar-nav .dropdown-menu > li:nth-child(n+1):nth-child(-n+2) {
    grid-column: span 2 !important; 
  }
  
  /* もしくは、文字数に関わらず「奇数で終わって1つ余る」のを防ぐため、
     一番最後だけ1列にするのもアリです */
  /* .navbar-inverse .navbar-nav .dropdown-menu > li:last-child {
    grid-column: span 2 !important;
  } */

}

/* =========================================================
   スマホヘッダー：ロゴ歪み修正 ＆ メニュー巨大化
========================================================= */

@media (max-width: 767px) {
  /* --- ロゴの歪み解消 --- */
  .site-logo {
    display: flex;
    align-items: center; /* 垂直中央 */
    margin: 0 !important;
    padding: 10px 0 10px 15px !important; /* 余白を調整 */
    height: 70px; /* ヘッダーの高さを固定して安定させる */
  }

  .site-logo a {
    display: block;
    line-height: 1;
  }

  .site-logo img {
    width: auto !important;     /* 横幅を自動に（比率維持） */
    max-width: 100% !important; /* 枠からはみ出さない */
    height: 50px !important;    /* 高さを基準に固定すると歪まない */
    object-fit: contain;        /* 枠内での収まりを最適化 */
  }

  /* --- ハンバーガーメニューを大きく --- */
  .navbar-toggle {
    display: block !important;
    width: 54px !important;   /* ボタン自体を大きく */
    height: 48px !important;
    padding: 10px !important;
    margin-top: 11px !important; /* ロゴの高さ(70px)に合わせて中央寄せ */
    margin-right: 15px !important;
    background-color: #900 !important; /* 背景色をしっかり出す */
    border: none !important;
    border-radius: 8px !important;
  }

  /* 三本線のサイズアップ */
  .navbar-toggle .icon-bar {
    width: 30px !important;  /* 線の横幅 */
    height: 4px !important;  /* 線の太さ */
    margin-bottom: 5px !important; /* 線同士の間隔 */
    border-radius: 2px !important;
  }
  
  .navbar-toggle .icon-bar:last-child {
    margin-bottom: 0 !important;
  }

  /* ロゴとボタンの親要素を中央揃えに */
  .header-flex-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
  }
}

/* =========================================================
   スマホ：ボタンを「濃い背景」にして文字を際立たせる
========================================================= */

@media (max-width: 767px) {
  
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    /* 1. 半透明の白をやめ、背景をグッと深い赤（または黒に近い赤）に変更 */
    background: #5a0000 !important; /* ブランドの赤より一段深い、暗めの赤 */
    
    /* 2. 文字の視認性を最大化 */
    color: #ffffff !important;
    font-weight: 700 !important;      /* 文字を太くしてクッキリさせる */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文字に薄い影をつけて浮き立たせる */

    /* 3. 枠線の調整（少しだけ明るくしてボタンの境界を出す） */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    /* 余白や配置の維持 */
    height: auto !important;
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
  }

  /* タップした時に少し明るくして「押した感」を出す */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:active {
    background: #800000 !important; /* 押した瞬間は少しだけ明るい赤に */
    transform: scale(0.98);
  }

}

/* =========================================================
   スマホ：メニューの土台を「白の半透明」に変更
========================================================= */

@media (max-width: 767px) {

  .navbar-inverse .navbar-nav .open .dropdown-menu {
    /* --- 土台を白の半透明（20%〜30%程度）に変更 --- */
    /* 50%だとピンクっぽくなりすぎる場合があるため、まずは25%程度がおすすめです */
    background-color: rgba(255, 255, 255, 0.15) !important; 
    
    /* 境界線も白の半透明にして、プレートの輪郭を優しく出します */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;

    /* レイアウト設定は維持 */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px !important;
    margin: 12px !important;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 軽い影をつけると浮き上がって見えます */
  }

}

/* =========================================================
   スマホ：ハンバーガーボタン内の線を完全センター揃えにする
========================================================= */

@media (max-width: 767px) {
  
  .navbar-toggle {
    /* 1. フレックスボックスを有効にして、中身を中央に寄せる */
    display: flex !important;
    flex-direction: column !important; /* 線を縦に並べる */
    justify-content: center !important;  /* 上下の中央 */
    align-items: center !important;      /* 左右の中央 */
    
    /* 2. サイズ設定（前回からの維持） */
    width: 54px !important;
    height: 48px !important;
    
    /* 重要：パディングがあると中央からずれるので 0 に設定 */
    padding: 0 !important; 
    
    margin-top: 11px !important;
    margin-right: 15px !important;
    background-color: #900 !important;
    border: none !important;
    border-radius: 8px !important;
    float: right !important; /* 右寄せを維持 */
  }

  /* 三本線のスタイル */
  .navbar-toggle .icon-bar {
    display: block !important;
    width: 30px !important;
    height: 4px !important;
    background-color: #fff !important;
    border-radius: 2px !important;
    
    /* 3. 線の間の間隔調整 */
    margin: 0 0 5px 0 !important; /* 下にだけ5px空ける */
    float: none !important;      /* Bootstrapの干渉を防ぐ */
  }

  /* 4. 最後の線だけは下のマージンを消す（これで完全に中央になります） */
  .navbar-toggle .icon-bar:last-child {
    margin-bottom: 0 !important;
  }

}

/* =========================================================
   点火演出：ホバー・タップ時に火が灯るような効果
========================================================= */

/* PCのホバー時と、スマホのタップ中（active）に適用 */
.navbar-inverse .navbar-nav .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .dropdown-menu > li > a:active {
    /* 1. 背景を「火」を感じさせる明るいオレンジ〜赤のグラデーションに */
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%) !important;
    
    /* 2. 周囲にパッと火が灯ったような黄色い光を出す */
    /* 複数の影を重ねることで、中心は明るく、外側はふんわり光らせます */
    box-shadow: 0 0 8px #fff, 
                0 0 15px #ffcc00, 
                0 0 25px #ff8c00 !important;

    /* 3. 文字そのものも熱を帯びたように光らせる */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;

    /* 4. 少しだけ上に浮き上がらせて、操作感を強調 */
    transform: translateY(-1px) scale(1.02) !important;
    
    /* 5. 境界線を火の光で飛ばす */
    border-color: #ffcc00 !important;
    
    z-index: 10;
    transition: all 0.2s ease-out !important; /* 点火は素早く、消える時はゆっくり */
}

/* 通常時からの変化を滑らかにするための追加（既存のaタグに追加） */
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
    transition: all 0.4s ease !important;
}

/* =========================================================
   PC：ホバー時に白抜き太字 ＆ 点火演出の強化
========================================================= */

@media (min-width: 768px) {
  
  /* ホバーした瞬間のボタン本体 */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    /* 1. 白抜き ＆ 太字にする */
    color: #ffffff !important;
    font-weight: 700 !important;
    
    /* 2. 点火グラデーション */
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%) !important;
    
    /* 3. 周囲への光の広がり（火の粉のようなグロー効果） */
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4), 
                0 0 20px rgba(255, 204, 0, 0.3) !important;

    /* 4. 文字自体も少し光らせてクッキリさせる */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;

    /* 少し浮き上がらせる */
    transform: translateY(-1px) scale(1.01) !important;
    border-radius: 6px !important;
    z-index: 10;
  }

  /* 5. 左側の付箋線を「熱を帯びた芯」のように変化させる */
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover::before {
    background-color: #fff !important; /* 白く光る芯に */
    box-shadow: 0 0 8px #fff, 0 0 12px #ffcc00 !important; /* 線自体も発光 */
    height: 70% !important; /* 点火時は少し線が伸びる演出 */
    top: 15% !important;
    transition: all 0.2s ease !important;
  }

}


/* =========================================================
   PCグローバルナビ：文字の背後に灯がともる「点火」演出
========================================================= */

@media (min-width: 768px) {
  /* 通常のホバー時、およびメニューが開いている（.open）時の親項目 */
  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-inverse .navbar-nav > li > a:focus,
  .navbar-inverse .navbar-nav > .open > a,
  .navbar-inverse .navbar-nav > .open > a:hover,
  .navbar-inverse .navbar-nav > .open > a:focus {
    /* 1. 背景を今の赤よりもさらに深い「濃い赤」に変更 */
    background-color: #4a0000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;

    /* 2. 点火演出：文字の背後から光が漏れるようなグロー効果 */
    /* 白 → 黄 → 橙 の順に光を重ねて、バーナーが点火した瞬間を表現 */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
                 0 0 15px #ffcc00,
                 0 0 25px #ff4500 !important;

    /* 3. ボタンの内側にも熱を帯びたような光を纏わせる */
    box-shadow: inset 0 0 12px rgba(255, 69, 0, 0.5) !important;

    /* 4. 動きをより滑らかに（点火した感覚を出す） */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* 変化をスムーズにするための基本設定（transitionの追加） */
  .navbar-inverse .navbar-nav > li > a {
    transition: all 0.4s ease;
  }
}

/* =========================================================
   スマホ：メインナビ（YouTube等）をタップした時の点火演出
========================================================= */

@media (max-width: 767px) {
  /* メニュー項目をタップした瞬間（:active）と、開いている状態 */
  .navbar-inverse .navbar-nav > li > a:active,
  .navbar-inverse .navbar-nav > li > a:focus,
  .navbar-inverse .navbar-nav > .open > a {
    /* 1. 背景を一段と深い「重厚な赤」に沈める */
    background-color: #4a0000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;

    /* 2. 文字の背後から「火」が灯るようなグロー効果 */
    /* タップした指の下で光が漏れるように演出します */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
                 0 0 18px #ffcc00,
                 0 0 28px #ff4500 !important;

    /* 3. ボタン全体が熱を帯びたような輝き（内側の光） */
    box-shadow: inset 0 0 15px rgba(255, 69, 0, 0.6) !important;

    /* 4. タップ時の反応を良くするため、わずかに縮める（押した感） */
    transform: scale(0.98) !important;
    
    transition: all 0.1s ease-out !important; /* 点火は一瞬で */
  }

  /* 変化を滑らかにするための基本設定 */
  .navbar-inverse .navbar-nav > li > a {
    transition: background-color 0.3s ease, text-shadow 0.3s ease;
  }
}


/* =========================================================
   スマホ：メインナビ（YouTube等）をタップした時の点火演出
========================================================= */

@media (max-width: 767px) {
  /* メニュー項目をタップした瞬間（:active）と、開いている状態 */
  .navbar-inverse .navbar-nav > li > a:active,
  .navbar-inverse .navbar-nav > li > a:focus,
  .navbar-inverse .navbar-nav > .open > a {
    /* 1. 背景を一段と深い「重厚な赤」に沈める */
    background-color: #4a0000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;

    /* 2. 文字の背後から「火」が灯るようなグロー効果 */
    /* タップした指の下で光が漏れるように演出します */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
                 0 0 18px #ffcc00,
                 0 0 28px #ff4500 !important;

    /* 3. ボタン全体が熱を帯びたような輝き（内側の光） */
    box-shadow: inset 0 0 15px rgba(255, 69, 0, 0.6) !important;

    /* 4. タップ時の反応を良くするため、わずかに縮める（押した感） */
    transform: scale(0.98) !important;
    
    transition: all 0.1s ease-out !important; /* 点火は一瞬で */
  }

  /* 変化を滑らかにするための基本設定 */
  .navbar-inverse .navbar-nav > li > a {
    transition: background-color 0.3s ease, text-shadow 0.3s ease;
  }
}

/* =========================================================
   中火モード：心地よい炎のゆらぎ（スタンダード調整）
========================================================= */

@keyframes fire-flicker-standard {
  0%, 100% {
    /* 通常：安定した火 */
    box-shadow: 0 0 10px #fff, 0 0 20px #ffcc00, 0 0 30px #ff4500 !important;
    text-shadow: 0 0 8px #fff, 0 0 15px #ffcc00 !important;
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.0);
  }
  50% {
    /* ゆらぎ：少しだけ火が強まる（ここをマイルドに） */
    box-shadow: 0 0 15px #fff, 0 0 30px #ffeb3b, 0 0 45px #ff8c00 !important;
    text-shadow: 0 0 10px #fff, 0 0 20px #ffeb3b !important;
    transform: translateY(-1.5px) scale(1.035); /* 膨らみすぎない */
    filter: brightness(1.15); /* 眩しすぎない明るさ */
  }
}

/* --- PC版：ホバー時に適用 --- */
@media (min-width: 768px) {
  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-inverse .navbar-nav > .open > a,
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    
    /* アニメーション：1.2秒かけてゆったりと明滅 */
    animation: fire-flicker-standard 1.2s infinite ease-in-out !important;
    
    z-index: 100;
  }
}

/* --- スマホ版：タップ中に適用 --- */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav > li > a:active,
  .navbar-inverse .navbar-nav .dropdown-menu > li > a:active {
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%) !important;
    color: #ffffff !important;
    
    /* スマホも少し落ち着いた周期に変更 */
    animation: fire-flicker-standard 0.8s infinite ease-in-out !important;
  }
}