@charset "utf-8";

/*************************************
              共通・構造
*************************************/

#wrap {
  overflow: hidden;
}



/*************************************
              ヘッダー
*************************************/

/*************************************
            メインコンテンツ
*************************************/

#main {
  width: 100%;
  margin-top: 100px;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.container2 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/*************************************
            メインビジュアル
*************************************/

#mainvisual {
  width: 100%;
  position: relative;
  text-align: left;
}

#mainvisual p img {
  max-width: 100%;
  width: 100%;
}

#mainvisual h1 {
	position: absolute;
	top:0.3em;
	left: 1em;
	font-size: 3em;
	font-weight: 400;
	color: #265788;
	line-height: 1.2
}
#mainvisual .sub-image {
	position: absolute;
	top:170px;
	left: 50px;
	width: 45%;
}
#mainvisual .sub-image p {
	padding-right: 5px;
	font-size: 0.8em;
}
#mainvisual .sub-image div {
	display:flex;
}

/*************************************
            本体
*************************************/
.information {
	background-color: #FFFFFF;
	text-align: center;
	margin: 40px auto 30px;
	width: 85%;
}
.information .icon img{
	margin-top: -50px;
	width: 80px;
	z-index: 100;
	position: relative;
}
.information .comment {
	text-align: left;
	padding: 1em 3em 2em;
	font-size: 1.1em;
}

.list {
	text-align: center;
	margin: 0 auto 30px;
	width: 85%;
	background-color: #F0F3F8;
}
.list-item {
	display: flex;
	padding: 2em 1em;
	align-items: center;
}
.list-item:nth-child(even) {
	background-color:#fff;
}
.list-item .item1{
	width: 50%;
	padding-left: 30px;
}
.list-item .item2{
	width: 50%;
	text-align: left;
}
.list-item .index{
	font-size:1.2em;
	font-weight: 600;
}
.list-item .index2{
	font-size:1.7em;
}
.list-item .note{
	font-size:0.8em;
}
.list-item .remote-img img{
	width: 70%;
	padding-top: 10px;
}
.list-item .link a{
	text-decoration: underline;
}
.list-item .tel {
	background: url('../images/tel.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .fax {
	background: url('../images/fax.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .mail {
	background: url('../images/mail.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .form {
	background: url('../images/form.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .chatbot {
	background: url('../images/chatbot.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .remote {
	background: url('../images/remote.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .website {
	background: url('../images/website.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .movie {
	background: url('../images/movie.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .qa {
	background: url('../images/qa.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}
.list-item .password {
	background: url('../images/password.png');
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: 15px 30%;
}



/*************************************
            パンくずリスト
*************************************/
.breadcrumb {
  list-style: none; /* リストの点（・）を消す */
  margin: 0;
  padding: 0;
  display: flex; /* 横並びにする */
}

.breadcrumb li {
  margin-right: 5px; /* 項目間の間隔を調整 */
}

.breadcrumb a {
  text-decoration: none; /* リンクの下線を消す */
  color: #007bff; /* リンクの色を設定 */
}

.breadcrumb a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

.breadcrumb li.current {
  color: #6c757d; /* 現在のページの色を設定 */
}

.breadcrumb li + li::before {
  content: ">"; /* 区切り文字（>）を表示 */
  margin-right: 5px;
  color: #6c757d;
}



/*************************************
            ナビゲーションバー
*************************************/

/*
.tab-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #0066cc;
    justify-content: center;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    text-align: center;
    font-size: 1rem;
    flex: 1;
    background-color: #0066cc;
    border-right: 1px solid #005bb5;
    transition: background-color 0.3s;
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background-color: #005bb5;
}

.tab.active {
    background-color: #004999;
    font-weight: bold;
}

.tab-menu {
    border-bottom: 3px solid #004999;
}
*/



/*************************************
    ナビゲーションバー
*************************************/
.tab-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #0066cc;
    justify-content: center;
    position: relative; /* サブメニューの基準位置とするために追加 */
    height: 100px; /* ナビゲーションバーの高さを100pxに設定 */
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    text-align: center;
    font-size: 1rem;
    flex: 1;
    background-color: #0066cc;
    border-right: 10px solid #fff; /* タブ間の縦線 */
    transition: background-color 0.3s;
    position: relative; /* サブメニューの基準位置とするために追加 */
    height: 100px; /* 各タブの高さを100pxに設定 */
    display: flex; /* 縦方向の中央揃えのため */
    align-items: center; /* 縦方向の中央揃えのため */
    justify-content: center; /* 横方向の中央揃えのため */
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background-color: #005bb5;
}

.tab.active {
    background-color: #004999;
    /* font-weight: bold;  ← 太字処理を削除 */
}

.tab-menu {
    border-bottom: 3px solid #004999;
}

/* サブメニュー */
.submenu {
    display: none; /* 最初は非表示 */
    position: absolute; /* 絶対配置 */
    top: 100%; /* 親要素の下に表示 */
    left: 0;
    background-color: #005bb5; /* 青色 */
    border: none; /* 枠線なし */
    list-style: none; /* リストの点を取り除く */
    margin: 0;
    padding: 0;
    z-index: 1; /* 他の要素より手前に表示 */
    min-width: 100%; /* 親要素の幅に合わせて調整 */
    transform: translateY(1px); /* 枠がナビゲーションバーに被るため少し下にずらす */
}

.submenu li, .submenu li a {
    display: block; /* リンクをブロック要素にする */
    padding: 10px;
    text-decoration: none; /* リンクの下線を消す */
    color: white; /* 白色に変更 */
    white-space: nowrap; /* 文字が折り返されないようにする */
    height: 50px; /* サブメニューの高さを100pxに設定 */
    display: flex; /* 縦方向の中央揃えのため */
    align-items: center; /* 縦方向の中央揃えのため */
    justify-content: center; /* 横方向の中央揃えのため */
}

.tab:hover .submenu {
    display: block; /* マウスホバーで表示 */
}

.submenu li:hover {
    background-color: #004999; /* マウスホバーで背景色を変える */
}



/*************************************
            タブコンテンツ
*************************************/
.tab-content {
	display: none;
	margin: 0 auto 30px;
}

.tab-content.active {
	display: block;
}

.tab-content h2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

.tab-content ul {
	font-size: 1rem;
}



/*************************************
            フッター
*************************************/
footer {
  display: block;
  margin-top: 300px; /* 300px の空白領域を作る */
  padding: 40px 20px;
  background-color: #6C8DB0;
}

p.footer1  {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  color: #ffffff;
}





/*************************************
            動画ギャラリー
*************************************/
.video-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 各動画間のスペース */
    justify-content: space-between;
}

.video-item {
    flex: 0 1 calc(50% - 1rem); /* 横幅を2分割に設定 */
    box-sizing: border-box;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.video-item h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

video {
    width: 100%;  /* 横幅いっぱいに表示 */
    height: auto; /* 縦横比を保持 */
    border: 1px solid #ccc;
    border-radius: 5px;
}