/* ********************************** TOP／トピックスのスワイパーの設定 ********************************** */
.home #top {
    width: 100% ;
    position: relative;
}

/* サイドバーを除いたメインコンテンツ幅 */
.home .container {
    padding-top: 80px;
}

/* ここからスワイパーの設定 */
#top-slider-wrapper .topics_swiper {
    /* swiper親要素の設定 */
    overflow: hidden;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

#top-slider-wrapper .swiper-slide img {
    width: 100%;
    object-fit: cover; /* 画像がスライドの領域に収まるように調整 */
}

.topics-swiper-pagination {
    position: absolute;
    bottom: -30px !important;
    z-index: 0;
}

.topics-swiper-button-prev,
.topics-swiper-button-next {
    position: absolute;
    top: 50%;
    width: 90px;
    height: 60px;
    z-index: 1;
    cursor: pointer;
    background: url(../images/systems/icon/simple_arrow_icon_white.svg) no-repeat right 25px top 16px;
    background-color: #BFBFBF;
    transform: rotate(90deg);
    background-size: 40px;
    transition: 0.3s; /* マウスカーソルを外すとき */
}

.topics-swiper-button-next{
    transform: rotate(-90deg);
}

.topics-swiper-button-prev {
    left: -16px;
}

.topics-swiper-button-next {
    right: -16px;
}

.topics-swiper-button-prev:hover,
.topics-swiper-button-next:hover{
    background-color: var(--maincolor);
}

.topics-swiper-pagination .swiper-pagination-bullet{
    width: 1em;
    height: 1em;
    background-color: var(--maincolor);
    margin-right: 0.6em !important;
}

.topics-swiper-pagination .swiper-pagination-bullet-active{
    transform: scale(1.3);
}




.home .flont_tokucyan_top,
.flont_News_ttl_wrapper{
    display: none;
}










/* ********************************** ここからお知らせ欄 ********************************** */

.home #section1{
    padding-top: 5em;
    position: relative;
}


/* ここからスワイパーの設定 */

.home #section1 .news_box {
    /* swiper親要素の設定 */
    overflow: hidden;
    position: relative;
}

.news-swiper-pagination {
    position: absolute;
    z-index: 0;
}

.news-swiper-button-prev,
.news-swiper-button-next {
    position: absolute;
    top: 29%;
    z-index: 1;
    cursor: pointer;
    background: url(../images/systems/icon/news_btn.png) no-repeat;
    background-size: contain;
    width: 2em;
}

.news-swiper-button-next{
    transform: scale(-1, 1);
}

.news-swiper-button-prev:hover,
.news-swiper-button-next:hover{
    background: url(../images/systems/icon/news_btn_hover.png) no-repeat;
    background-size: contain;
    width: 2em;
}


.home .tokucyan_news{
    position: relative;
    width: 100%;
    display: block;
    padding-bottom: 1em;
    border-bottom: 6px solid var(--maincolor);
    margin-bottom: 2em;
}

.home .tokucyan_news .illustrat_box{
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 75px;
}

.home #section1 .third_title{
    padding-left: 5em;
}

.home #section1 .news_bg{
    width: 100px;
    position: absolute;
    left: -130px;
    top: 115px;
}

.home .news_thumbnail img{
    border: 4px solid rgb(255, 255, 255, .0);
}


.home .news-swiper-scrollbar{
    width: 100%;
    height: 1em;
    background-color: var(--maincolor);
    left: unset;
    transform: rotate(180deg);
    bottom: unset;
    border-radius: unset;
    z-index: -1;
}

.home .swiper-scrollbar-drag{
    border-radius: unset;
    background-color: #CCC124;
}




/* ********************************** ここから新商品欄 ********************************** */
.home #section2{
    width: 100%;
    padding-top: 6.5em;
    text-align: center;
    background: url(../images/systems/other/section2_bg.svg) no-repeat top left / 900px;
}

.home #section2 .main_title{
border-bottom: 7px solid #E45D6D;
}

.home #section2 .main_title::before{
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 50%;
border-bottom: 7px solid #FFE61F;
}






/* ********************************** カテゴリーボタンと連携した投稿記事の表示 ********************************** */

/* カテゴリーボタンを押すと、カテゴリーを絞り込んだ投稿を表示する */
/* ボタンのデザイン */
.front_category-buttons_wrapper {
    align-items: center;
    width: 75%;
    margin: 0 auto;
}
  
.front_category-buttons_wrapper .front_category-buttons_box {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
  
.front_category-buttons_wrapper .front_category-buttons {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 小要素をスナップさせる */
    scroll-behavior: smooth; /* スムーズなスクロール */
    white-space: nowrap;
    width: 100%; 
    border-left: 2px solid var(--assortcolor);
    border-right: 2px solid var(--assortcolor);

}
  
  
.front_category-buttons_wrapper .front_category-buttons button {
    scroll-snap-align: start; /* 小要素のスナップ位置を指定 */
    display: inline-block;
    width: fit-content;
    padding: 1em 5em;
    background-color: white;
    border: 2px solid var(--assortcolor);
    margin-right: 2px; /* Set margin between buttons */
    color: black;
}
  
.front_category-buttons_wrapper  .front_category-buttons button:hover,
.front_category-buttons_wrapper  .front_category-buttons button.active {
    background-color: var(--maincolor);
    border: 2px solid var(--maincolor);
    color: white;
}
  
.front_category-buttons_wrapper > .front_category-buttons li:fast-of-type button:fast-child {
    margin-left: 0;
    border-left: unset;
}
  
.front_category-buttons_wrapper > .front_category-buttons li:last-of-type button:last-child {
    margin-right: 0;
    border-right: unset;
}


  
#scroll-left-front,
#scroll-right-front{
    background-color: unset;
    border: unset;
    position: absolute; /* これより下記は親要素の上下中央に揃える */
    top: 30%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 1.5em;
}
  
.front_category-buttons_wrapper #scroll-left-front{
    left: -3em;
    transform: rotate(90deg);
}
  
.front_category-buttons_wrapper #scroll-right-front{
    right: -3em;
    transform: rotate(270deg);
}
  
  
/* ボタンが無効化された状態のスタイル */
.front_category-buttons_wrapper  #scroll-left-front:disabled,
.front_category-buttons_wrapper  #scroll-right-front:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
  
/* ボタンが無効化された状態のスタイル */
.front_category-buttons_wrapper  #scroll-left-front:disabled img,
.front_category-buttons_wrapper  #scroll-right-front:disabled img {
    filter: invert(95%) sepia(67%) saturate(0%) hue-rotate(164deg) brightness(90%) contrast(91%);
}
  
/* ボタンが有効な状態のスタイル */
.front_category-buttons_wrapper  #scroll-left-front img,
.front_category-buttons_wrapper  #scroll-right-front img {
    filter: invert(61%) sepia(82%) saturate(4203%) hue-rotate(12deg) brightness(100%) contrast(101%);
}
  
/* ホバー時のスタイル */
.front_category-buttons_wrapper  #scroll-left-front img:hover,
.front_category-buttons_wrapper  #scroll-right-front img:hover {
    filter: invert(61%) sepia(82%) saturate(4203%) hue-rotate(12deg) brightness(100%) contrast(101%);
}
  
/* 有効な状態でホバー時のスタイル */
.front_category-buttons_wrapper > #scroll-left-front:not(:disabled) img:hover,
.front_category-buttons_wrapper > #scroll-right-front:not(:disabled) img:hover {
    filter: invert(61%) sepia(82%) saturate(4203%) hue-rotate(12deg) brightness(100%) contrast(101%);
    cursor: pointer;
}
  
  
  


/* ********************************** スワイパーの設定　********************************** */

.front_category_post_wrapper{
    width: 100%;
    margin: 2.5em auto 0 auto;
    position: relative;
}

.front_item_swiper{
    /* これがないと2段にできない！！ */
    height: 490px;

    /* レスポンシブ崩れ対応のため、最大幅を設定 */
    max-width: 1200px;
}

.front_item_swiper .swiper-slide .post-thumbnail img{
    width: 100%;
    height: 230px !important; /* レスポンシブ崩れ対応のため、画像の高さを固定 */
    object-fit: cover; /* 画像を親要素に収め、縦横比を保ちながら全体を覆う */
}

.front_category_post_wrapper .front_item_swiper-button-prev{
    left: 0;
}

.front_category_post_wrapper .front_item_swiper-button-next{
    right: 0;
}

.front_category_post_wrapper .front_item_swiper-button-prev,
.front_category_post_wrapper .front_item_swiper-button-next{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    padding: 1em; /* 余白を設けるためのパディング */
    box-sizing: content-box; /* ボックスサイジングの設定 */
}

/* スワイパーのナビゲーション（矢印）を差し替え */
.front_category_post_wrapper .front_item_swiper-button-next {
    content: url('../images/systems/icon/simple_arrow_icon_white.svg');
    transform: rotate( -90deg );
    background-color: rgba(0, 0, 0, 0.5);

}

.front_category_post_wrapper .front_item_swiper-button-prev {
    content: url('../images/systems/icon/simple_arrow_icon_white.svg');
    transform: rotate( 90deg );
    background-color: rgba(0, 0, 0, 0.5);
}

/* ホバー時のスタイル */
.front_category_post_wrapper .front_item_swiper-button-prev:hover,
.front_category_post_wrapper .front_item_swiper-button-next:hover {
    background-color: var(--maincolor);
}

.front_category_post_wrapper .btn_text{
    display: none;
}


/* ********************************** ホバー時の内容　********************************** */
.items_overlay_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    color: white;
    display: flex;
    flex-direction: column; /* 垂直方向に配置 */
    justify-content: space-between; /* 上下に要素を配置 */
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0.3s ease;
}

.swiper-slide:hover .items_overlay_text {
    opacity: 1; /* ホバー時に表示 */
}

.hover_text_box_wrapper {
    padding: 2em;
    flex: 1;
    position: relative;
}

.hover_text_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 要素の中心を親要素の中心に合わせる */
    width: 100%;
    height: 100%;
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦方向に要素を配置 */
    justify-content: center; /* 縦方向の中央に配置 */
    align-items: center; /* 横方向の中央に配置 */
    text-align: center; /* テキストを中央揃え */
    padding: 2em; /* 内側の余白を設定 */
    box-sizing: border-box; /* パディングを含む */
}

.items_overlay_text .post_title {
    width: 100%;
}

.items_overlay_text .read_title {
    font-weight: 500;
    line-height: 1.4em;
}

.items_overlay_text .read_text {
    line-height: 1.5em; /* 行間を設定 */
    white-space: normal; /* テキストの折り返しを許可 */
    text-align: left;
    margin-top: 1em;
}

.items_overlay_text .text_link_btn {
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    padding: 0.5em;
    box-sizing: border-box; /* パディングを含む */
    text-align: center; /* テキストを中央揃え */
    margin-top: auto; /* フレックスアイテムの下部に押し込む */
}

.items_overlay_text .text_link_btn img {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -3px;
}




/* ********************************** ここからカテゴリ欄 ********************************** */
#section3{
    width: 100%;
    padding-top: 4.5em;
    text-align: center;
}

#section3 .main_title{
    padding-bottom: unset;
    border-bottom: unset;
    display: flex;
    align-items: center;
    max-width: unset;
}

#section3 .main_title::before,
#section3 .main_title::after{
    border-top: 4px solid var(--maincolor);
    content: "";
    flex-grow: 1;
}


#section3 .main_title::before{
    margin-right: 0.8em;
}

#section3 .main_title::after{
    margin-left: 0.8em;
}


.home #section3 .list_title{
    padding-bottom: 3em;
}


.home #section3 .category_box{
    width: 100%;
    background-color: var(--notecolor);
}


.home .genre_wrapper{
	width: 80%;
    max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
    border-top: #DEDEDE 1px solid;
    border-bottom: #DEDEDE 1px solid;
    margin: 0 auto;
}






.home .genre_wrapper li {
    width: calc(100% / 3);
    height: 300px;
    background-size: cover;
    position: relative;
    overflow: hidden; /* コンテンツがはみ出さないように */
}

.home #section3 .category_name {
    position: absolute;
    left: 1em;
    top: 1em;
    padding: 0.4em 2em;
    border: 3px solid var(--maincolor);
    background-color: white;
    z-index: 2; /* オーバーレイの上に表示するためにz-indexを指定 */
}

.home .genre_wrapper li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; /* relativeを指定 */
    z-index: 1; /* オーバーレイの下に表示 */
}

.home .hobby_toy {
    background: url(../images/systems/category/hobby_toy.jpg) no-repeat center;
}

.home .party_goods {
    background: url(../images/systems/category/party_goods.jpg) no-repeat center;
}

.home .sundry {
    background: url(../images/systems/category/sundry.jpg) no-repeat center;
}

.home .gadget {
    background: url(../images/systems/category/gadget.jpg) no-repeat center;
}

.home .sport {
    background: url(../images/systems/category/sport.jpg) no-repeat center;
}

.home .other {
    background: url(../images/systems/category/other.jpg) no-repeat center;
}

/* オーバーレイの設定 */
.home .genre_wrapper li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* グレーのオーバーレイ */
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 0.5s ease; /* なめらかに変化 */
    z-index: 0; /* リンクの下に表示 */
}

.home .genre_wrapper li:hover::before {
    opacity: 1; /* ホバー時にオーバーレイを表示 */
}

/* GIF画像の設定 */
.home .genre_wrapper li::after {
    content: '';
    position: absolute;
    bottom: -50px; /* 初期状態で画面の下に配置 */
    left: 50%; /* 中央に配置 */
    width: 226px; /* GIFの幅 */
    height: 180px; /* GIFの高さ */
    background: url(../images/systems/illust/more.gif) no-repeat center; /* GIFのパスを指定 */
    background-size: contain; /* 画像が枠内に収まるようにする */
    opacity: 0; /* 初期状態は透明 */
    transform: translate(-50%, 0); /* 中央に配置するために移動 */
    transition: opacity 0.5s ease, bottom 0.5s ease; /* なめらかに変化 */
    z-index: 1; /* オーバーレイの上に表示 */
    pointer-events: none; /* クリックイベントを無効化 */
}

.home .genre_wrapper li:hover::after {
    opacity: 1; /* ホバー時にGIFを表示 */
    bottom: 0px; /* ホバー時に下から出てくる */
}

.home .hobby_toy:hover,
.home .party_goods:hover,
.home .sundry:hover,
.home .gadget:hover,
.home .sport:hover,
.home .other:hover {
    transform: scale(0.9, 0.9);
    transition: 0.5s;
}

.home .hobby_toy:hover .category_name,
.home .party_goods:hover .category_name,
.home .sundry:hover .category_name,
.home .gadget:hover .category_name,
.home .sport:hover .category_name,
.home .other:hover  .category_name{
    background-color: var(--maincolor);
    color: white;
    border: 3px solid white;
    background-color: #E18000;
}

.home .hobby_toy:hover .category_name::after,
.home .party_goods:hover .category_name::after,
.home .sundry:hover .category_name::after,
.home .gadget:hover .category_name::after,
.home .sport:hover .category_name::after,
.home .other:hover  .category_name::after{
    content: "を見る";
    color: white;
}


.home .category_list_content li a {
    border-bottom: 2px solid transparent;
    color: black;
    display: inline-block; /* 最初から inline-block に設定しておく */
    transition: color 0.3s, border-bottom 0.3s; /* スムーズなアニメーション効果 */
}



















/* ********************************** セクション4(用途) ********************************** */

#section4{
    padding: 3.5em 0 17em 0;
    background: url(../images/systems/other/section4_bg.svg) no-repeat bottom center / 85%;
    border-bottom: 6px solid var(--maincolor);
    background-position: center calc(100% + 15px); /* ボトムを -50px に調整 */
}

#section4 .seen_category_contents {
    margin: 4.5em auto 1em auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列のグリッドを作成 */
    gap: 3em; /* グリッド間のマージンを設定 */
}

.seen_category_contents > li {
    display: block;
    height: 250px;
    border: 3px solid var(--assortcolor);
    position: relative;
}

/* 最後のliの余白スペースを埋めるための要素 */
.seen_category_contents::after {
    content: "";
    grid-column: span 3; /* 3列にわたって配置 */
}

#section4 .front_search_title{
    display: none;
}




/* ********************************** セクション5(トピックス) ********************************** */
#section5 {
    width: 100%;
    padding-top: 6em;
    border-bottom: 6px solid var(--maincolor);
    padding-bottom: 1em;
}

.home #section5 .main_title{
    border-bottom: 7px solid #00A89C;
}

.home #section5 .main_title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 50%;
    border-bottom: 7px solid #0080C9;
}

.home .series_flex_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
    gap: 3em; /* グリッド間のマージンを設定 */
}

/* 最後のliの余白スペースを埋めるための要素 */
.home .series_flex_container::after {
    content: "";
    grid-column: span 2; /* 2列にわたって配置 */
}

.home .series_flex_container li {
    width: 100%;
}

.home .series_flex_item .contents_box a {
    display: flex;
    align-items: center;
}

.home .series_flex_item .contents_box .thumbnail_box {
    width: 50%;
    min-width: 213px;
    margin-right: 1em;
}

.home .series_flex_item .contents_box img {
    width: 100%;
    height: auto;
    border: 3px solid var(--maincolor);
}

.home .series_txt_box{
    line-height: 1.2em;
}


.home .series_txt_box .ruby {
    margin: 0.5em 0 0.5em 0;
    font-weight: bold;
}


.home .series_txt_box .series_more_btn{
    display: inline-block;
    color: white;
    background-color: var(--maincolor);
    padding: 0.25em 1em;
    border-radius: 999px;
    margin-top: 1em;
}










/* ********************************** セクション6(SNS) ********************************** */
#section6 {
    width: 100%;
    padding-top: 6em;
    border-bottom: 6px solid var(--maincolor);
    overflow: hidden;
}

#section6 .list_title{
    padding-bottom: 3em;
}

#section6 .list_title img {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.home #section6 .main_title{
    border-bottom: 7px solid #B88ABB;
    max-width: 180px;
    padding-bottom: 0.7em;
}




.home #section6 #sb_instagram .sb_instagram_header .sbi_header_text,
.home #section6 .sb_instagram_header .sbi_header_text{
    display: none;
}




.home #section6 .sns_list{
    text-align: center;
    margin: 6em auto 2em auto;
}

.home #section6 .sns_list ul{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.home #section6 .sns_list ul li{
    width: 2.7em;
    margin-right: 1.5em;
}

.home #section6 .sns_list ul li:last-of-type{
    margin-right: unset;
    width: 4em;
}

/* SNSのアイコン_通常時のsvgの色設定 */
.home #section6 .sns_list .twitter_icon,
.home #section6 .sns_list .instagram_icon,
.home #section6 .sns_list .tiktok_icon,
.home #section6 .sns_list .facebook_icon,
.home #section6 .sns_list .youTube_icon{
    filter: invert(46%) sepia(0%) saturate(2257%) hue-rotate(317deg) brightness(93%) contrast(78%);
}
  
/* SNSのアイコン_ホバー時にsvgを色変更 */
.home #section6 .sns_list .twitter_icon:hover,
.home #section6 .sns_list .instagram_icon:hover,
.home #section6 .sns_list .tiktok_icon:hover,
.home #section6 .sns_list .facebook_icon:hover,
.home #section6 .sns_list .youTube_icon:hover{
    filter: invert(0%) sepia(98%) saturate(7492%) hue-rotate(138deg) brightness(102%) contrast(98%);
}

.home #section6 .tag_list_box {
    padding: 2em 0;
    text-align: center;
    position: relative;
    background-color: var(--notecolor);
}

.home #section6 .tag_list_box .comment::before,
.home #section6 .tag_list_box .comment::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(../images/systems/other/annotation.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.home #section6 .tag_list_box .comment::after {
    transform: scale(-1, 1);
}











.home #section6 .tag_list {
    white-space: nowrap;
    margin-top: 1.5em;
    position: relative;
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth;  /* スムーズスクロール */
}

/* Webkit系ブラウザでスクロールバーを隠す */
.home #section6 .tag_list::-webkit-scrollbar {
    display: none;
}

.home #section6 .tag-scroll-container {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    width: max-content; /* 内容に合わせた幅 */
}

.home #section6 .tag-scroll-container li {
    display: inline-block;
    margin-right: 1em;
}

.home #section6 .tag-scroll-container li:first-of-type{
    margin-left: 9em;
}

.home #section6 .tag-scroll-container li a {
    display: inline-block;
    padding: 1em 2em;
    border: 4px solid white;
    border-radius: 999px;
    background-color: white;
    color: black;
    text-decoration: none;
}

.home #section6 .tag-scroll-container li a:hover {
    background-color: var(--maincolor);
    color: white;
}

.home #section6 .tag-scroll-container li a::before {
    content: "#";
    font-size: 1.2em;
    margin-right: 0.2em;
}


















.home #section6 .tokucyan_sns{
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 190px;
}


/* トクちゃんをスライドインさせる */
.tokucyan_fadein {
    opacity: 0;
    transform: translate(0, 100px);
    transition: opacity 1s, transform 1s;
}

.tokucyan_fadein.active {
    opacity: 1;
    transform: translate(0, 0);
    animation: tokucyan_sway 1s ease-in-out; /* アニメーションの時間を調整 */
}


/* 合うライドインアニメーションにブルブルなアニメーションを追加 */
@keyframes tokucyan_sway {
    0% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-10px); }
    60% { transform: translateX(10px); }
    70% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    90% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}










/* ********************************** セクション7(お問い合わせ) ********************************** */
.home #section7 {
    padding-top: 5.5em;
}

.home #section7 .main_title{
    border-bottom: 7px solid #0000B1;
    padding-bottom: 0.6em;
}

.home #section7 .main_title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 50%;
    border-bottom: 7px solid #7EC8EE;
}

.home #section7 .list_title {
    padding-bottom: 4em;
}






/* ここからタブ機能を使った表示切り替え */
.home #section7 .tab_btn_wrapper{
    position: relative;
}

.home #section7 .tab_btn_wrapper {
    width: 100%;
    position: relative;
}

.home #section7 .tab_btn_wrapper::before,
.home #section7 .tab_btn_wrapper::after{
    content: "";
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    top: 50%;
    left: 0;
    background: url(../images/systems/other/contact_border_decoration.svg);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.home #section7 .tab_btn_wrapper::after{
    left: unset;
    right: -1em;
}

.home #section7 .tab_btn_box::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* 要素の幅に合わせて調整 */
    height: 7px; /* 要素の高さに合わせて調整 */
    background: var(--assortcolor); /* ボーダーの色 */
    transform: translate(-50%, -50%);
    z-index: -1;
}

.home #section7 .tab-menu-btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
    border: 7px solid var(--assortcolor);
    width: 500px;
    margin: 0 auto 1.5em auto;
    text-align: center;
    border-radius: 999px;
    overflow: hidden;
    background-color: white;
}


.home #section7 .tab-item {
    width: 100%;
    padding: 0.8em;
    cursor: pointer;
}

.home #section7 .tab-item.active,
.home #section7 .tab-item:hover {
    background-color: black;
    color: white;
    border-radius: 999px;
}

.home #section7 .tab-pane {
    display: none;
}

.home #section7 .tab-pane.active {
    display: block;
}


.home #section7 .tab_inner1,
.home #section7 .tab_inner2{
    display: grid;
    grid-template-columns: 450px 1fr; /* 左の列は200px、右の列は残りのスペースを占める */
    gap: 5em;
    line-height: 1.4em;
}

.home #section7 .tab_inner2{
    grid-template-columns: 1fr 450px; /* tab_inner2と反転 */
}

.home #section7 .tab_inner1 .text,
.home #section7 .tab_inner2 .text{
    margin-bottom: 1em;
    font-weight: 500;
}

.home #section7 .tab_inner1 .application_icon_box,
.home #section7 .tab_inner2 .application_icon_box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    margin-bottom: 1.5em;
    align-items: stretch; /* アイテムの高さを一番高い要素に合わせて揃える */
}

.home #section7 .tab_inner1 .application_icon_box a,
.home #section7 .tab_inner2 .application_icon_box a{
    width: 100%;
    color: white;
    background-color: #37BAEC;
    display: block;
    text-align: center;
    height: 100%;
    padding: 1.5em;
    border-radius: 1em;
    transition: background-color 0.2s, color 0.3s; /* ホバー時の変化に1秒かける */
}

.home #section7 .tab_inner2 .application_icon_box a{
    background-color: #EFA5C5;
}

.home #section7 .tab_inner1 .application_icon_box a:hover{
    background-color: var(--pointcolor);
}

.home #section7 .tab_inner2 .application_icon_box a:hover{
    background-color: var(--maincolor);
}


.home #section7 .tab_inner1 .application_icon_box a img,
.home #section7 .tab_inner2 .application_icon_box a img{
    width: auto;
    margin: 0 auto 1em auto;
    height: 4em;
    display: block;
}

.home #section7 .application_icon_shop{
    height: 3em;
}

.home #section7 .application_icon_product{
    height: 3em;
}




.home #section7 .tab_inner1 .application_list_box li,
.home #section7 .tab_inner2 .application_list_box li{
    position: relative;
    margin-bottom: 1.2em;
}

.home #section7 .tab_inner1 .application_list_box li a,
.home #section7 .tab_inner2 .application_list_box li a{
    display: block;
    padding: 1.2em;
    border: 2px solid #7EC8EE;
    border-radius: 0.75em;
}

.home #section7 .tab_inner1 .application_list_box li a:hover{
    background-color: var(--pointcolor);
    border: 2px solid var(--pointcolor);
    color: white;
}

.home #section7 .tab_inner2 .application_list_box li a{
    border: 2px solid #EFA5C5;
}


.home #section7 .tab_inner2 .application_list_box li a:hover{
    background-color: var(--maincolor);
    border: 2px solid var(--maincolor);
    color: white;
}

.home #section7 .tab_inner1 .application_list_box .dot_arrow,
.home #section7 .tab_inner2 .application_list_box .dot_arrow{
    position: absolute;
    right: 0;
    top: 50%;
    right: 0.5em;
    transform: translate(-50%, -50%);
    width: 1.5em;
    height: 1.5em;
    filter: invert(68%) sepia(72%) saturate(284%) hue-rotate(167deg) brightness(96%) contrast(94%);
}

.home #section7 .tab_inner2 .application_list_box .dot_arrow{
    filter: invert(94%) sepia(93%) saturate(4968%) hue-rotate(281deg) brightness(98%) contrast(92%);
}

.home #section7 .tab_inner1 .application_list_box:hover .dot_arrow,
.home #section7 .tab_inner2 .application_list_box:hover .dot_arrow{
    filter: invert(100%) sepia(0%) saturate(7480%) hue-rotate(72deg) brightness(104%) contrast(101%);
}


/* ここからマスクの設定 */
.home #section7 .mask_wrapper {
    position: relative; /* 相対位置に設定 */
    width: 100%; /* 必要に応じて調整 */
    height: 550px; /* 必要に応じて調整 */
    overflow: hidden; /* 子要素が親要素の外に出ないように設定 */
}

.home #section7 .mask-container1,
.home #section7 .mask-container2 {
    position: absolute; /* 絶対位置に設定 */
    top: 0;
    left: 0;
    width: 100%; /* 必要に応じて調整 */
    height: 100%; /* 必要に応じて調整 */
    -webkit-mask-image: url('../images/systems/other/contact_image_mask.png'); /* マスク画像を指定 */
    mask-image: url('../images/systems/other/contact_image_mask.png'); /* マスク画像を指定 */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.home #section7 .mask-container1 img,
.home #section7 .mask-container2 img {
    width: 300%; /* 画像をコンテナの2倍の幅に設定 */
    /* height: 100%; */
    /* object-fit: cover; */
    position: absolute; /* 絶対位置に設定 */
    top: 0;
    left: 0;
    animation: CompanySlide 10s linear forwards; /* アニメーションを設定 */
}

@keyframes CompanySlide {
    0% {
        transform: translateX(-50%); /* 画像を左から初期位置に配置 */
    }
    100% {
        transform: translateX(0); /* 画像を右端までスライドさせる */
    }
}





.home #section7 .orange_border{
    margin-top: 4em;
}




/* ********************************** セクション8(会社情報) ********************************** */

.home #section8{
    padding-top: 1em;
    text-align: center;
    background: url(../images/systems/icon/hac_logo_bg.svg) no-repeat;
    background-position: top 160px center;
    background-size: 690px;
}

.box_title{
    border: 7px solid var(--assortcolor);
    padding: 1em 5em;
    display: inline-block;
    margin: 0 auto 3em auto;
}

.company_text_wrapper{
    display: flex;
    align-items: flex-start; /* 孫要素を頭揃えにする */
    margin-bottom: 1em;
}

.company_text_wrapper li{
    box-sizing: border-box; /* パディングやボーダーを含めたサイズ調整 */
}


.company_text_wrapper > li:nth-child(1){
    flex: 1; /* 余ったスペースをすべて取る */
    max-width: 600px;
}

.company_text_wrapper > li:nth-child(2){
    width: 720px; /* 固定幅 */
    margin-left: 2em;
}


/* ここからマスク処理 */
.home #section8 .mask_wrapper {
    position: relative; /* 相対位置に設定 */
    width: 100%; /* 必要に応じて調整 */
    height: 550px; /* 必要に応じて調整 */
    overflow: hidden; /* 子要素が親要素の外に出ないように設定 */
}

.home #section8 .mask-container3 {
    position: absolute; /* 絶対位置に設定 */
    top: 0;
    left: 0;
    width: 100%;
    height: inherit;
    border-top-right-radius: 7em;
    border-bottom-right-radius: 7em;
    overflow: hidden;
    transition: background-color 2s; /* 背景色の変更にアニメーションを追加 */
    margin-right: 2em;
}

.home #section8 .mask-container3 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 必要に応じて調整 */
    height: 100%; /* 画像をコンテナ全体に合わせる */
    display: none; /* 初期状態で非表示 */
    object-fit: cover;
}

.home #section8 .list_title{
    margin: unset;
    text-align: left;
}

.home #section8 .list_title .text_box{
    text-align: center;
    max-width: 500px;
    margin: 2.5em 0;
}


.home #section8 .sub_ttl_boarder {
    padding-bottom: 1em;
    border-bottom: 7px solid #DE0012;
    margin-bottom: 1em;
    width: 10em;
    margin: 1em auto 2em auto;
    position: relative;
}

.home #section8 .sub_ttl_boarder::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 50%;
    border-bottom: 7px solid var(--maincolor);
}

.home #section8 .company_message{
    line-height: 2em;
}








.home #section8 .company_icon_box{
    display: flex;
    align-items: stretch; /* アイテムの高さを一番高い要素に合わせて揃える */
    line-height: 1.4em;
    margin-top: 1.5em;
    max-width: 500px;
}


.home #section8 .company_icon_box a{
    width: 130px;
    color: white;
    background-color: black;
    display: block;
    text-align: center;
    height: 100%;
    padding: 1em;
    border-radius: 1em;
    transition: background-color 0.2s, color 0.3s; /* ホバー時の変化に1秒かける */
}
.home #section8 .company_icon_box a:hover{
    background-color: var(--maincolor);
    color: white;
}

.home #section8 .company_icon_box a img{
    width: auto;
    margin: 0 auto 1em auto;
    height: 3em;
    display: block;
}

.home #section8 .company_icon_movie{
    height: 2em;
}

.home #section8 .company_icon_box li{
    position: relative;
    margin-bottom: 1.2em;
    width: 100%;
}


/* モーダル画面のスタイル */
.company_modal {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(225, 128, 0, 0.9); /* 背景のオーバーレイ */
}

/* モーダルのコンテンツのスタイル */
.company_modal-content {
    position: fixed; /* 固定位置に変更 */
    margin: auto;
    width: 80%;
    max-height: 80%;
    border: 12px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    
    /* Flexboxを使って上下左右中央に配置 */
    display: flex; 
    flex-direction: column;
    justify-content: center; /* 上下中央に配置 */
    align-items: center; /* 左右中央に配置 */
    
    top: 50%; /* 上から50%の位置 */
    left: 50%; /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* 中心に移動 */
    height: auto; /* 高さを自動調整 */
    overflow: hidden;
}


/* 閉じるボタンのスタイル */
.company_modal_close {
    position: absolute;
    position: -webkit-absolute;
    top: 5px;
    right: 5px;
    background: white;
    cursor: pointer;
    border: 4px solid var(--maincolor);
    padding: 0.7em;
    text-align: center;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.company_modal_close:hover{
    background-color: var(--maincolor);
    border: 4px solid var(--accentcolor);
}

.company_modal_close:hover .search_icon{
    filter: invert(100%) sepia(100%) saturate(11%) hue-rotate(209deg) brightness(104%) contrast(101%);
}


.company_modal_close .search_icon {
    width: 40px;
    height: 40px;
    filter: invert(61%) sepia(82%) saturate(4203%) hue-rotate(12deg) brightness(100%) contrast(101%);
}

/* ページのスクロールを無効にするクラス */
body.company_modal-open {
    overflow: hidden;
}







/* 会社概要の動画ファイルのスタイル */
.company_modal #companyVideoContainer{
    background-color: white;
    width: 100%;
}

.company_modal video {
    width: 100%;        /* 親要素に幅を合わせる */
    height: 100%;       /* 親要素に高さを合わせる */
    object-fit: cover;  /* 親要素内に引き伸ばす（アスペクト比を保ちながら） */
    background-color: white;
}