/* index.css - トップページ用のスタイル
 * 説明: このファイルには、トップページのナビ、スライド、スクロール、内容に関するスタイルを記載。
 * 作成者: EWP望月智代
 * 作成日: 2023-11-06
 * 依存関係: index.php
 * バージョン: 1.0
 */

#fujitopimage{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin-bottom:150px;
}
.fuji-consept{
 position:absolute;
 top:28%;
 left:22%;
 width: 94px;
 height: auto;
 opacity: 0;
 transition: opacity 0.5s ease-in-out; /* 透明度の変化に0.5秒かける */
}
.fuji-consept img{
 width:100%;
}
#background-slider {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* 背景に配置 */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}
#background-slider .slide:nth-child(1) {
    background-image: url('https://fuji-japan.jp/images/picture01.jpg');
}
#background-slider .slide:nth-child(2) {
    background-image: url('https://fuji-japan.jp/images/picture02.jpg');
}
#background-slider .slide:nth-child(3) {
    background-image: url('https://fuji-japan.jp/images/picture03.jpg');
}
#background-slider .slide:nth-child(4) {
    background-image: url('https://fuji-japan.jp/images/picture04.jpg');
}
#background-slider .slide:nth-child(5) {
    background-image: url('https://fuji-japan.jp/images/picture05.jpg');
}


@media screen and (max-width: 1024px) {
.fuji-consept{
 position:absolute;
 top:28%;
 left:22%;
 width: 130px;
 height: auto;
}
    #background-slider .slide:nth-child(1) {
        background-image: url('https://fuji-japan.jp/images/picture01_sp.jpg'); /* スマホ用画像 */
    }
    #background-slider .slide:nth-child(2) {
        background-image: url('https://fuji-japan.jp/images/picture02_sp.jpg'); /* スマホ用画像 */
    }
    #background-slider .slide:nth-child(3) {
        background-image: url('https://fuji-japan.jp/images/picture03_sp.jpg'); /* スマホ用画像 */
    }
    #background-slider .slide:nth-child(4) {
        background-image: url('https://fuji-japan.jp/images/picture04_sp.jpg'); /* スマホ用画像 */
    }
    #background-slider .slide:nth-child(5) {
        background-image: url('https://fuji-japan.jp/images/picture05_sp.jpg'); /* スマホ用画像 */
    }
}
@media screen and (max-width: 520px) {
#fujitopimage{
    margin-bottom:75px;
}
.fuji-consept{
 position:absolute;
 top:30%;
 left:22%;
 width: 70px;
 height: auto;
}
}
/*--------------------------------------------------------------
Index
--------------------------------------------------------------*/
header{
 width:100%;
}


.indexsection{
 width:1366px;
 margin:0 auto;
 clear:both;
 content:"";
 display:table;
}
@media screen and (max-width: 1365px) {
.indexsection{
 width:100%;
}
}
/*--------------------------------------------------------------
message
--------------------------------------------------------------*/
.message{
 width:1160px;
 margin:0 auto;
 display: flex;
 align-items: flex-start;
}
.message-box01{
 width: 490px;
 padding-top:20px;
 text-align:left;
 order: 1;
}
.message-box02{
 width: 35px;
 padding-right:43px;
 order: 2;
}
.hokusetsu{
 display:none;
}
.message-box02 img{
 display:block;
 width:26px;
 height:auto;
}
.message-box03{
 width: 516px;
 order: 3;
 margin-right:75px;
}
.message-box01 p{
 font-size:1.29em;
 padding:0;
 margin: 0 0 40px 0;
}
@media screen and (min-width: 520px) and (max-width:1159px) {
.message-box03{
 width: 516px;
 margin:0 auto;
}
.message-box03 img{
 width: 100%;
}
}

@media screen and (max-width: 1159px) {
.message{
 width:100%;
 margin:0 auto;
 flex-direction: column-reverse;
}
.message-box01{
 width: 100%;
 padding-top:20px;
 text-align:center;
  order: 2;
}
.message-box02{
 width: 100%;
 font-size:1.714em;
 writing-mode: horizontal-tb;
 padding-right:0;
 order: 3;
}
.hokusetsu{
 display:block;
}
.message-box02 img{
 display:none;
}
.message-box03{
 order: 1;
}
}
@media screen and (max-width: 520px) {
.message{
 margin-bottom:0;
}
.message-box01{
 margin-bottom:40px;
}
.message-box01 p{
 font-size:1em;
 padding:0;margin: 0;
}
.message-box02{
 font-size:1.071em;
}
.message-box03{
 width: 100%;
}
.message-box03 img{
 width: 90%;
 margin:0 auto;
}
}
/*--------------------------------------------------------------
spirit /動画リンク
--------------------------------------------------------------*/
.spirit{
 width:908px;
 margin:150px auto 100px auto;
}
.spiritimg{
 width: 908px;
 margin:0 auto;
}
.spiritimg img{
 width:100%;
 margin:0 auto 40px auto;
}
.pum-content .cinqfvideo {
    position: relative;
    width: 60%; /* or your desired width */
    padding-top: 33.75%; /* for a 16:9 aspect ratio, this should be width * 9 / 16 */
    margin: 0 auto; /* to center the video in the popup */
    overflow: hidden; /* to prevent excess space */
    height: 0; /* height is set by the padding-top */
}
.pum-content .cinqfvideo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#btcinqf {
    display: block;
    width: 300px;
    height:60px;
    margin:0 auto;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    font-family: 'Klee One', cursive;
    font-weight:600;
    background-color:#909090;
    transition: background-color 0.3s;
    font-size:1.500em;
    position: relative;
	display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; 
    border: none; /* ボーダー削除 */
    outline: none; /* アウトライン削除 */
}
#btcinqf:hover {
    background-color: #666;
    cursor: pointer;
}
.sus-arrow-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 31px; /* 画像のサイズは調整してください */
    height: 27px;
}
@media screen and (min-width: 521px) and (max-width:994px) {
.spirit{
 width:100%;
 margin:150px auto 100px auto;
}
.spiritimg{
 width:80%;
  margin:0 auto 40px auto;
}
.spiritimg img{
 width:100%;
 margin:0 auto;
}
}
@media screen and (max-width: 520px) {
.spirit{
 margin-top: 130px;
 margin-bottom:75px;
}
.spirit{
 width:100%;
}
.spiritimg{
 width:90%;
 margin:0 auto;
}
.spiritimg img{
 width:100%;
}
#btcinqf {
    display: block;
    width: 240px;
    height:48px;
    margin:0 auto;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    font-family: 'Klee One', cursive;
    font-weight:600;
    background-color:#909090;
    transition: background-color 0.3s;
    font-size:1em;
    position: relative;
	display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; 
    border: none; /* ボーダー削除 */
    outline: none; /* アウトライン削除 */
}
.sus-arrow-icon {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* 画像のサイズは調整してください */
    height: 11px;
}
}

/*--------------------------------------------------------------
sasutainable
--------------------------------------------------------------*/
.sasutainable{
	background-image: url('https://fuji-japan.jp/images/index03.jpg');
    background-size: cover;
    background-position: center center;
    width:100%;
    height:645px;
    padding-top:75px;
    margin-bottom:0;
}
h3.indexsustainable{
 font-size:1.500em;
 color:#fff;
 margin:0 0 340px 0;
}
.sasutainable p{
 font-size:1.286em;
 margin:0 0 45px 0;padding:0;
}
.btsustainable{
    width: 300px;
    height: 60px;
    margin:0 auto 55px auto;
}
.details-buttonVit {
    display: block;
    width: 100%;
    height:60px;
    background-color: white;
    border-radius: 5px;
    color: #505050; /* テキストの色 */
    letter-spacing: 2px;
    text-align: center;
    transition: background-color 0.3s;
    opacity: 0.8;
    font-size:1.143em;
    position: relative;
	display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; 
}

.details-buttonVit:hover {
    background-color: #C0C0C0;
    opacity: 0.8;
}
@media screen and (max-width: 520px) {
.sasutainable{
	background-image: url('https://fuji-japan.jp/images/index03-sp.jpg');
    height:auto;
    margin-bottom:0;
}
h3.indexsustainable{
 margin:0 0 200px 0;
}
.sasutainable p{
 font-size:1em;
 margin:0 0 35px 0;
}
.btsustainable{
 width: 240px;
 height: 48px;
 padding-top:0px;
 margin:0 auto 75px auto;
}
.details-buttonVit {
 height:48px;
 font-size:0.857em;
}
}

/*--------------------------------------------------------------
商品紹介
--------------------------------------------------------------*/
.proTop{
 padding-top: 100px;
}
.product{
 width:1366px;
 margin:0 auto 90px auto;
 text-align:left;
 display: flex;
}
.product-text{
 width: 365px;
}
.product-images{
 width: 740px;
 height: 300px;
 overflow: hidden;  /* 拡大時にはみ出した部分を非表示にする */
 position: relative; /* img要素の位置を制御するための基準とする */
}
.product-images img{
    width: 100%;  /* 画像をコンテナの幅にフィットさせる */
    height: auto;
    transition: transform 0.3s ease-in-out;  /* 拡大アニメーションの効果 */
    display: block;  /* ブロックレベル要素として表示することで、余分なマージンを削除 */
}

.product-images img:hover{
    transform: scale(1.1);  /* 110%に拡大 */
    opacity: 0.3;          /* 透明度30% */
}
.image-left .product-images {
  order: -1;
  margin-right:45px;
  padding-left:0;
}
.original{
 padding-left:215px;
}
.odmoem{
 width:580px;
}
.indexproducttxt{
 width:100%;
 position: relative;
 padding: 10px 0 0 50px;
}
.indexproducttxt::before{
 content: '';
  position: absolute;
  top: 0;
  left: 30px; /* ラインの位置を調整 */
  height: 100%; /* 要素の高さに合わせる */
  width: 1px;
  background-color: #969696; /* ラインの色を指定 */
}
.h3sz25{
 font-size:2.357em;
 margin:0 0 15px 0;padding:0;
 line-height:1;
}
.txtjpproduct{
 font-size:1.143em;
 margin:0 0 25px 0;padding:0;
 line-height:1;
}
.btOriginal{
    display: block;
    width: 178px;
    height: 40px;
    margin-top:47px;
}
.btOriginal .details-button {
    display: flex;
    width: 78%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid #969696;
    border-radius: 5px;
    color: #505050; /* テキストの色 */
    letter-spacing: 2px;
    transition: background-color 0.3s;
    position: relative;
    padding-right: 11%;
    padding-left: 11%;
    justify-content: center;
    align-items: center;
}
.btOriginal .details-button:hover {
    background-color: #C0C0C0;
    border: 1px solid #C0C0C0;
}

.arrow-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 31px; /* 画像のサイズは調整してください */
    height: 27px;
}

@media screen and (min-width: 740px) and (max-width: 1365px) {
.product{
 width:100%;
 margin:0 auto 90px auto;
 text-align:left;
 flex-direction: column-reverse;
}
.image-left .product-images {
  order: 0;
  margin-right:auto;
  margin-left:auto;
}
.original{
 padding-left:0;
}
.product-text{
 width: 580px;
 text-align:center;
 margin:0 auto;
}
.product-images{
 width: 740px;
 height: 300px;
 margin:0 auto 50px auto;
}
.indexproducttxt{
 width:100%;
 padding: 0;
}
.indexproducttxt::before{
left: 0px;
 content: none; /* 縦ラインを消す */
}
.txtjpproduct{
 font-size:1.143em;
 margin:0 0 25px 0;
 line-height:1;
 border-top:1px solid #969696;
 padding:25px 0;
}
.btOriginal{
    margin: 45px auto 0 auto;
}
}
@media screen and (max-width: 739px){
.product{
 width:100%;
 margin:0 auto 75px auto;
 text-align:left;
 flex-direction: column-reverse;
}
.image-left .product-images {
  order: 0;
  margin-right:auto;
  margin-left:auto;
}
.original{
 padding-left:0;
}
.h3sz25{
 font-size:1.214em;
 margin:0 0 15px 0;padding:0;
 line-height:1;
}

.product-text{
 width: 90%;
 text-align:center;
 margin:0 auto;
}
.product-images{
 width: 100%;
 height: auto;
 margin:0 auto 25px auto;
}
.indexproducttxt{
 width:100%;
 padding: 0;
}
.indexproducttxt::before{
left: 0px;
 content: none; /* 縦ラインを消す */
}
.txtjpproduct{
 font-size:1em;
 margin:0;
 line-height:1.5;
 border-top:1px solid #969696;
 padding:13px 0 25px 0;
}
.btOriginal{
    margin: 26px auto 0 auto;
}
.btOriginal .details-button{
 width:80%;
}
}
@media screen and (max-width: 520px){
.proTop{
 padding-top: 100px;
}
}

/*--------------------------------------------------------------
ニュース　（アコーディオン）
--------------------------------------------------------------*/
.indexnews{
 width:100%;
 background-color:#dcdcdc;
 padding-top:100px;
 margin-bottom:100px;
}
.accordion {
    width: 870px;
    margin:0 auto 100px auto;
    border-bottom: 1px solid #969696;
    text-align:left;
}

.accordion-item {
	width:100%;
    border-top: 1px solid #969696;
    overflow: hidden; /* 画像を含む要素のoverflowをhiddenにする */
    clear:both;
 	content:"";
 	display:table;
}

.accordion-header {
	width:825px;
    padding: 10px 30px 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
}

.accordion-date {
 	width:160px;
 	text-align:right;
 	margin-right:50px;
}
.accordion-title{
	width:580px;
	font-size:1.143em;
}
.accordion-img {
    width: 33px;
    height: 34px;
    display:block;
    transition: transform 0.3s; /* 反転時のアニメーションを追加 */
}

/* 開いたときに画像を反転させるスタイル */
.accordion-item.opened .accordion-img {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: 10px 34px 35px 225px;
    width:580px;
}
.new-label {
    display: inline-block;
    margin-right: 10px;
    color: #00A3A7;
    text-align:left;
}
.arrow-small img{
 display: inline-block;
 width: 6px;
 height:11px;
 padding: 0 0 5px 5px;
}
@media screen and (max-width: 890px){
.indexnews{
 padding-top:100px;
 margin-top: 75px;
 margin-bottom:75px;
}
.accordion {
    width: 90%;
    margin:0 auto 100px auto;
}
.accordion-header {
	width:95%;
    padding: 10px 17px 10px 0;
    margin:0 auto;
    cursor: pointer;
    align-items: flex-start;
}
.accordion-date {
 	min-width:80px;
 	width:20%;
 	font-size: 0.571em;
  	margin-right:0;
  	text-align:left;
}
.accordion-title{
	width:70%;
	font-size:1em;
	line-height:1.4;
}
.accordion-content {
    display: none;
    padding: 10px 0 35px 0;
    margin:0 auto;
    width:90%;
}
.new-label {
    display: block;
    margin-right: 0;
    color: #00A3A7;
}
.arrow-small img{
 display: inline-block;
 width: 4px;
 height:8px;
 padding: 0 0 4px 5px;
}
}
/*--------------------------------------------------------------
ロワジールエゼ
--------------------------------------------------------------*/
.indexOnline{
 width:100%;
 margin:0 auto 100px auto;
}
.shoplist-caption{
 clear:both;
 width:95%;
 padding:0 0 0 5%;
 margin-top:10px;
 text-align:left;
 font-size: 0.857em;
}

.itemList{
 width:1126px;
 margin:0 auto;
 position: relative;
}
.thumbnail-container {
    overflow-x: hidden; 
    position: relative;
    width: 1020px; /* 4つのサムネイルの幅（255 * 4）*/
    margin: 0 auto;
    white-space: nowrap; /* これを追加して、サムネイルが次の行に折り返さないようにします */
}


.thumbnail-box {
    display: inline-block;
    vertical-align: top;
    width: 240px; /* サムネイルの幅とマージンの合計 */
    margin-right: 10px;
}

.thumbnail {
    cursor: pointer;
}

/* 矢印のスタイルを追加 */
.arrow {
    width: 53px;
    height: 50px;
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    cursor: pointer;
}

.arrow.left {
    left: 0;
    background: url('https://fuji-japan.jp/images/bt-left.png') no-repeat center;
}

.arrow.right {
    right: 0;
    background: url('https://fuji-japan.jp/images/bt-right.png') no-repeat center;
}


/* ビューポートが1034px～768pxのとき */
@media screen and (min-width: 768px) and (max-width: 1125px) {
.itemList{
 width:768px;
 margin:0 auto;
 position: relative;
}
.thumbnail-container {
 width: 690px; /* 3つのサムネイルの幅（255 * 3）*/
}
.thumbnail-box {
    width: 220px;
    margin-right: 10px;
}
.arrow {
    width: 39px;
}
}

/* ビューポートが767px以下のとき */
@media screen and (max-width: 767px) {
.itemList{
 width:90%;
 margin:0 auto;
 position: relative;
}
.thumbnail-container {
    width: 240px; /* 1つのサムネイルの幅 */
    overflow-x: hidden; 
    position: relative;
    margin: 0 auto;
    white-space: nowrap;
}

}/*--------------------------------------------------------------
会社情報　フッター前
--------------------------------------------------------------*/
.indexCompany{
 width:100%;
 background-color:#dcdcdc;
 padding-top:100px;
}
.companybox{
 width: 1024px;
 margin:0 auto 50px auto;
}
.companybox:after{
 clear:both;
 content:"";
 display:table;
}

.threecolum{
 width:327px;
 float:left;
 margin-right:21px;
 text-align:left;
}
.last{
 margin:0;
}

h3.sz18{
 font-size:1.286em;
 margin:0;
 padding:0;
}

.ht165{
 height:165px;
 position:relative;
}

.btMap{
 position:absolute;
 right:0;
 bottom:10px;
 width: 47px;
 color:#fff;
 font-size:0.857em;
 text-align:center;
 background-color:#505050;
 line-height:1.1;
}
.btMap a{ color:#fff;display:block;}
.btcompany{
 width:300px;
 height:60px;
 margin:0 auto 100px auto;
}

.btcompany .details-button {
    display: block;
    width:260px;
    height:60px;
    background-color: #C0C0C0;
    border-radius: 5px;
    color: #505050; /* テキストの色 */
    font-size:1.143em;
    letter-spacing: 2px;
    position: relative;
   	display: flex;
    padding-right: 20px; /* 矢印アイコンのスペースのための右パディング */
    padding-left: 20px; /* 矢印アイコンのスペースのための右パディング */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;
    border:none;
}

.btcompany .details-button:hover {
    background-color: #737373;
    color: #fff;
}
@media screen and (min-width: 521px) and (max-width: 1023px){
.companybox{
 width: 100%;
 margin:0 auto 60px auto;
}
.threecolum{
 float:none;
 margin:0 auto 75px auto;
 text-align:left;
}
.ht165{
 height:auto;
 margin-bottom:16px;
}
.companyphoto{
 margin-top:20px;
}
.last{
 margin-bottom:0;
}
}
@media screen and (max-width: 520px){
.indexCompany{
 padding-top:75px;
}
span.sz18{
 font-size:1.286em;
}
.companybox{
 width: 100%;
 margin:0 auto 60px auto;
}
.threecolum{
 width:100%;
 margin:0 auto 75px auto;
}
.last{
 margin-bottom:0;
}
.ht165{
 width:90%;
 height:auto;
 margin:0 auto 16px auto;
}
.companyphoto{
 width:90%;
 margin:20px auto 0 auto;
}
#mapFukuoka,
#mapOsaka{
 width:100%;
 height:300px;
}
.responsive-map {
        width: 100%;
        height: 300px;
}
.btcompany{
 width: 240px;
 height: 48px;
 padding-top:0px;
 margin:0 auto 60px auto;
}
.btcompany .details-button {
 height:48px;
 font-size:0.857em;
    display: block;
    width:240px;
    background-color: #C0C0C0;
    border-radius: 5px;
    color: #505050; /* テキストの色 */
    letter-spacing: 2px;
    position: relative;
   	display: flex;
    padding-right: 0;
    padding-left: 0;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;
}
}
/*----------------------------
トップページの時
----------------------------*/
#home-page .global-menu {
    position: fixed; /* 固定位置にする */
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* 白の透明度90% */
    box-shadow: none; /* 影を付ける */
    transition: opacity 0.3s; /* ふわっと表示させるためのアニメーション */
    z-index:1001;
    height:102px;
}
#home-page .menu-container{
	width:1160px;
	margin:0 auto;
	padding-top:45px;
}
#home-page .header_logo{
 width: 230px;
 float:left;
}
#home-page .header_logo a.fuji-txt {
    display: block; /* ブロックレベル要素に変更 */
    width: 184px;
    height: 33px;
    background-image: url('https://fuji-japan.jp/images/logo-white.png');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
#home-page .header_logo a.fuji-txt:hover{
    opacity: 0.7;
}
#home-page .fuji-txt {
    text-indent: -9999px; /* テキストを画面外に移動 */
    display: block; /* ブロックレベル要素として扱う */
    overflow: hidden; /* はみ出た内容を非表示にする */
}

#home-page #menu{
 padding-top:14px;
}

#home-page #menu {
    width: 925px;
    margin: 0;
    font-size: 0.857em;
    float:left;
}
#home-page #menu li,
#home-page #menu li.houjin {
    float: left;
    width: 90px;
    line-height: 1.5;
    text-align: center;
    position: relative;
    color:white;
}
#home-page #menu li.houjin {
    width: 130px;
    margin-right:10px;
    display:block;
}
#home-page #menu li.sss {
    width: 70px;
    padding:0 0 30px 0;
}
#home-page #menu li a{
	color:#fff;
    transition: opacity 0.3s; /* 透明度の変化にアニメーションをつける */
    opacity: 1; /* 初期状態の透明度は1（不透明） */
}
#home-page #menu li a:hover{
    opacity: 0.5;
    display:block;
}

#home-page #menu li.becchu {
	width: 157px;
	height:27px;
    background-image: url('https://fuji-japan.jp/images/bt-becchu-hv.png'); /* 背景画像を設定 */
    background-position: center top;
    background-size: 157px 27px;
    background-repeat: no-repeat;
	position: relative;
	bottom:5px;
}

#home-page #menu li.online {
	width: 147px;
	height:27px;
    background-image: url('https://fuji-japan.jp/images/bt-online-hv.png'); /* 背景画像を設定 */
    background-position: center top;
    background-size: 147px 27px;
    background-repeat: no-repeat;
	position: relative;
	bottom:5px;
	margin-left: 5px;
}
#home-page #menu li.becchu:hover,
#home-page #menu li.online:hover{
     opacity: 0.7;
}
#home-page #menu li.becchu .indextopnav-link a,
#home-page #menu li.online .indextopnav-link a {
    color: transparent; /* テキストを透明に設定 */
    display: block; /* ブロックレベル要素にする */
	width: 100%;
	height:100%;
}
#home-page #menu li.navlanguage{
 width: 55px;
 margin-left: 20px;
 padding:0;
 text-align:left;
 color: white;
}
#home-page #menu li.navlanguage a {
    display: inline-block;
    transition: opacity 0.3s; /* 透明度の変化にアニメーションをつける */
    opacity: 1; /* 初期状態の透明度は1（不透明） */
    text-decoration: none; /* テキストの下線を消す */
    margin-right: 5px; /* リンク間の余白 */
    color: white;
}

#home-page #menu li.navlanguage:hover a{
    opacity: 0.5;
}

#home-page #menu li.navlanguage a:hover{
    opacity: 1;
}
#home-page .scroll-button {
    position: absolute;
    left: 12%;
    top: 80%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 14px;
    height:146px;
    cursor: pointer;
    background-image:url('https://fuji-japan.jp/images/scroll.png');
    background-position: top center;
    background-size: 14px 146px;
    background-repeat: no-repeat;
}
#home-page #menu .pulldown{
     padding:0;
     width:70px;
}
#home-page #menu .dropdown-product,
#home-page #menu .dropdown-company {
    display: none;
    position: absolute;
    background-color: #fff;
    opacity:0.9;
    z-index: 1;
    padding:20px;
    border-radius: 5px;
    top: 35px;
    left:-9px;
    border:1px solid #d6d6d6;
}

#home-page #menu .dropdown-product li,
#home-page #menu .dropdown-company li{
    display: block;
    width: 140px;
    text-align:left;
    line-height: 1.7;
}
#home-page #menu .dropdown-product li a,
#home-page #menu .dropdown-company li a{
    color: #505050;
}


/* マウスオーバー時にプルダウンメニューを表示 */
#home-page #menu li:hover > .dropdown-product,
#home-page #menu li:hover > .dropdown-company {
    display: block;
}


@media screen and (max-width: 1159px) {
#home-page .global-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparen;
    box-shadow: none;
    transition: opacity 0.3s;
    z-index:1001;
    height:auto;
}
#home-page .menu-container{
  padding-top:0;
  display:block;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 50px;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
  position:relative;
  background-color: transparent;
}
#home-page .header_logo-out{
 display:block;
 width: 184px;
 float:none;
 position:absolute;
 top:8px;
 left:24px;
}

#home-page .header_logo-out a.fuji-txt {
    display: block; /* ブロックレベル要素に変更 */
    width: 184px;
    height: 33px;
    background-image: url('https://fuji-japan.jp/images/logo-white.png');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}


#home-page #overlay-button {
  position: absolute;
  right: 1.357em;
  top: 1.286em;
  padding: 8px 4px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
  text-align: initial;
}
#home-page #overlay-button span {
  height: 2px;
  width: 25px;
  border-radius: 2px;
  background-color: #505050;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#home-page #overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#home-page #overlay-button span:after {
  top: 10px;
}
#home-page #overlay-button span:before, #home-page #overlay-button span:after {
  height: 2px;
  width: 25px;
  border-radius: 2px;
  background-color: #505050;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
/* チェックボックスが未チェックの時（メニューが閉じているとき）にロゴを表示 */
#home-page #overlay-input:not(:checked) ~ p.fuji {
    display: block;
}

/* ハンバーガーメニューが開いている時の背景画像変更 */
#home-page input[type=checkbox]:checked ~ #overlay .header_logo a.fuji-txt {
     background-image: url('https://fuji-japan.jp/images/logo-bk.png');
}
#home-page input[type=checkbox]:checked ~ #overlay {
  visibility: visible; 
}

#home-page input[type=checkbox]:checked ~ #overlay-button:hover span, #home-page input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
#home-page input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);

}
#home-page input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ハンバーガーメニューアイコンの初期色を白に設定 */
#home-page #overlay-button span, #home-page #overlay-button span:before, #home-page #overlay-button span:after {
  background: #fff;
}

/* ホバー時のハンバーガーメニューアイコンの色を変更しない */
#home-page #overlay-button:hover span, #home-page #overlay-button:hover span:before, #home-page #overlay-button:hover span:after {
  background: #fff;
}

/* チェックボックスがチェックされた時のハンバーガーメニューアイコンの色を#505050に設定 */
#home-page input[type=checkbox]:checked ~ #overlay-button span:before, 
#home-page input[type=checkbox]:checked ~ #overlay-button span:after {
  background: #505050;
}

#home-page #overlay .header_logo{
 width: 184px;
 float:none;
 position:absolute;
 top:8px;
 left:24px;
}
#home-page #overlay .header_logo a.fuji-txt {
 width:184px;
 height:33px;
 background-image: url('https://fuji-japan.jp/images/logo-bk.png');
 background-position: top center;
 background-size: cover;
 background-repeat: no-repeat;
 display:block;
}
#home-page #overlay ul#menu {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;  /* centerから変更 */
  flex-direction: column;
  text-align: left;
  font-family: 'Klee One', cursive;
  font-weight: 600;
  font-size:1.214em;
  color: white;
  height: 100vh;
  width:80%;
  padding-left: 0;
  position:absolute;
  top:13%;
  left:20%;
  float:none;
}
#home-page #overlay ul#menu li {
  padding-bottom: 15px;
    float: none;
    width: 100%;
    line-height: 1.7;
    text-align: left;
}

#home-page #overlay ul#menu li.sss{
    width: 100%;
}
#home-page #overlay ul#menu li.houjin{
 float: none;
 width: 60%;
 line-height: 1.7;
 text-align: left;
 border-top:1px solid #505050;
 background-image:url('https://fuji-japan.jp/images/icon-ft-mail.png');
 background-position: 5px center;
 background-repeat: no-repeat;
 background-size: 18px 14px;
 padding-top:25px;
 padding-bottom: 28px;
 padding-left:32px;
}
#home-page #overlay ul#menu li a {
    color: #505050;
    text-decoration: none;
    position: relative; 
}

#home-page #menu li.navlanguage{
 color: #505050;
}
#home-page #overlay ul#menu .dropdown-product {
    display: display;
    position: static;
    padding: 5px 0 0 17px;
    border-radius: 0;
    background-color:transparent;
    border:none;
}
#home-page #overlay ul#menu .dropdown-product li {
    width: 100%;
    line-height:1.2;
    font-size: 0.714em;
    padding-bottom: 10px;
}
#home-page #overlay ul#menu .dropdown-product li.nobottom{
 padding-bottom:0;
}
#home-page #overlay ul#menu .dropdown li {
    width: 100%;
    line-height:1.2;
    padding-bottom: 10px;
}
#home-page #overlay ul#menu .dropdown-company{
 display:none;
}
}