@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み 
→ 2023/02/21 DLしてCSSフォルダに保管した。間違えて削除した時はDLして保存すること。
リセットCSSとは、
ブラウザがWebページを表示する際に使うスタイルを打ち消し、
ブラウザによる見え方の差をなくしてくれるのがリセットCSSです。
---------------------------------------------------------------------------*/
@import url("css/sanitize.css");
<!--@import url("https://unpkg.com/sanitize.css");-->



body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}


/*-- 縦方向に伸びる誘導線－後続するコンテンツへの誘導 --*/
.scrollDown {
	display: block;
	position: absolute;

	width: 0.15vw;
	height: 20vh;
	background-image: linear-gradient(
    	-180deg,
    	transparent,
   		rgb(0, 0, 0) 50%,
    	transparent 50%,
    	transparent
  	);
  	background-repeat: no-repeat;
  	background-size: 100% 200%;
  	animation-name: scroll-down;
  	animation-duration: 5s;
  	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /*-- easeOutQuintのイージング --*/
  	animation-delay: 0.7s;
  	animation-iteration-count: infinite;
  	animation-fill-mode: backwards;
}

.scrollDown::after {
    content: "Scroll Down";
    display: inline-block;
    position: absolute;
    left: 13px; /*-- 調整が必要な場合は左の位置を調整してください --*/
    top: 50%;
    transform: translateY(-50%) rotate(90deg); /*-- 文字を回転して線と平行にする --*/
    transform-origin: left center; /*-- 回転の基準点を左端に設定 --*/
    color: rgb(0, 0, 0); /*-- 線と同じ色に設定 --*/
    font-size: 16px; /*-- 適切なフォントサイズに調整してください --*/
    white-space: nowrap; /*-- 文字が折り返されないように --*/
}
  

@keyframes scroll-down {
  0% {
    background-position: 0 100%;
  }

  50% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -100%;
  }
}

#selection {
    position: absolute;
    top: 0px;
    z-index: 1;
    /*-- 装飾のためのCSS --*/
    width: 100%;
    height: 50px !important;
    /*--background-color: transparent;--*/
    
    background: linear-gradient(to bottom, rgba(242, 242, 242, 0.9) 0%, rgba(242, 242, 242, 0.1) 100%); /*-- 0は透明度を表し、0が完全に透明、1が完全に不透明です。 --*/

    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}

/*-- JSで高さを設定 --*/
#wrapper{
    position: relative;
    max-width: 1500px;
    /*border: solid 3px #2610a3;*/
    height: 66vh;   /*-- JSで高さを設定しているが、それが働かないとき、この高さに調製 --*/
    overflow: hidden;
}

/*全体のエリア設定*/
.ms-section {
    position: absolute;
    color: #555;
    margin: 0;
    padding: 0;
    align-items: center;
    /*padding: 10px 30px 50px 60px;*/
    /*border: solid 3px #3c10a3;*/
    max-width: 750px;
    /*height: 50vh !important;  /*-- なぜかこの部分のが反映されない！！！ --*/
    /*height: auto !important;   /*-- 適切な高さに調製 ⇒ JSで高さ調整 --*/
    z-index: -5;
}
 

.category{
    position: absolute;
    top: 50px;
    color: #ffffff;
    width: 100%;
}

#selection h1 {
    font-size: 1.8rem;
    color: #504d4d;
}

h2 {
    font-size: 1.3rem;
    margin: 0 0 20px 0;
    text-align: center;
}

.category p {
    width: 83%;
    margin: 0 auto;
    font-size: 15px;
}

.category h2{
    width: 83%;
    margin: 0 auto;
    font-size: 28px;
    text-align: left;
    padding: 0;
}


.category img {
    padding-right: 8%;
    float: right; /*-- 画像を右寄せにする --*/
}

.category .crude{
    /*position: absolute;
    right: -10px;
    top: 210px;*/
    z-index: -1;
    width: 55%;
    margin-top: -13px; /* 画像を上に移動 */
}

.category .pet{
    /*position: absolute;
    right: -10px;
    top: 240px;*/
    z-index: -1;
    width: 65%;
    margin-top: -13px; /* 画像を上に10ピクセル移動 */
}

.category .bee{
    /*position: absolute;
    right: -10px;
    top: 240px;*/
    z-index: -1;
    width: 90%;
}

.category .men{
    /*position: absolute;
    right: -10px;
    top: 220px;*/
    z-index: -1;
    width: 90%;
}

.ms-section a {
color: #00245d;
}



/*-- 右にある丸ナビゲーション色 --*/
#multiscroll-nav span {
background: transparent !important;
border-color: #00245d !important;
}

/*-- 右にある丸のナビゲーション現在地色 --*/
#multiscroll-nav li .active span {
background: #666 !important;
}

/*右上のナビゲーション*/
#menu li {
display: inline-block;
margin-top: 13px;
}

#menu li a {
text-decoration: none;
color: #0f0f0f;
padding: 2px 10px;
display: block;
border-radius: 10px;
}


#menu li.active a {
    color: #00245d;
    text-shadow: 0 0 5px rgba(0, 36, 93, 0.8); /* 水平方向、垂直方向、ぼかしのサイズ、色 */
}

  
#menu li a:hover {
    color: #525861;
}

/*-- 左エリア画像設定（左の背景画像は表紙だけに設定） --*/
/*-- トップ画像設定 --*/
#left0 {
    background: url("../images/business/bg-left.jpg") no-repeat center;
    background-size: cover;
}




/*-- トップ画像設定 --*/
.category .mobile {
    display: none;
}

/*-- 右エリア画像設定（右は全て背景画像のみ設置） --*/
#right0 {
    background: url("../images/business/bg-right.jpg") no-repeat center;
    background-size: cover; /*-- 画像を要素全体に広げる --*/
    /*background-position: center center; /* 画像を要素の中央に配置 */
    
    background-position: 60% 120%; /*-- 水平方向（X軸）と垂直方向（Y軸）の位置 --*/

}

#right1 {
    background: url("../images/business/crude.jpg") no-repeat center;
    background-size: cover; /*-- 画像を要素全体に広げる --*/
    /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
    background-position: 50% 100%;
}

#right2 {
    background: url("../images/business/petro.jpg") no-repeat center;
    background-size: cover; /*-- 画像を要素全体に広げる --*/
    background-position: center center; /*-- 画像を要素の中央に配置 --*/
    /*background-position: 60% 70%;*/
}

#right3 {
    background: url("../images/business/beeswax.jpg") no-repeat center;
    background-size: cover; /*-- 画像を要素全体に広げる --*/
    background-position: center center; /*-- 画像を要素の中央に配置 --*/
    /*background-position: 60% 70%;*/
}

#right4 {
    background: url("../images/business/men.jpg") no-repeat center;
    background-size: cover; /*-- 画像を要素全体に広げる --*/
    background-position: center center; /*-- 画像を要素の中央に配置 --*/
    /*background-position: 60% 80%;*/
}



.ms-right .ms-section {
    position: relative;
    color: #666;
}

/*-- .scrollDown の場所を指定 --*/
.ms-right span {
    position: absolute;
    right: 60px;
    bottom: 350px;
}



/*＝＝＝＝＝＝＝＝＝＝＝320px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 320px以下のスマートフォン向けのスタイル */
@media screen and (max-width: 320px) {
    .scrollDown {
        display: none;
    }

    #selection {
        /*装飾のためのCSS*/
        width: 100vw;
        height: 40px !important;
        /*background-color: transparent;*/
    
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #selection h1{
        font-size: 18px;
        color: #0f0f0f;
    }

   /*-- 右上ナビゲーションと右エリア非表示 --*/
   #menu{
    display: none;
    }

    .ms-section {
        max-width: 50vw;
        padding: 0;
    }
     
    .category{
        position: absolute;
        top: 50px;
        left: 2vw;
        padding: 0;
        line-height: 2.0vh;
        width: 92%;
    }

    .category p {
        width: 92%;
        margin: 0 auto;
        font-size: 2.8vw;
    }
    
    .category h2{
        width: 92%;
        font-size: 3.5vw;
        margin-bottom: 1vh;
        text-align: left;
        padding: 0;
    }


    .category .crude{
        width: 100% !important;
        margin-top: 0;
    }

    .category .pet{
        width: 80% !important;
        margin-top: 0;
    }

    .category .bee{
        margin-top: 5px;
    } 

    .category .men{
        width: 100% !important;
        margin-top: 5px;
    }



    /*左エリアトップ画像設定*/
    #left0 {
        background: url("../images/business/bg-left-portrait.jpg") no-repeat center;
        background-size: cover;
    }

    /*右エリア画像設定*/
    #right0 {
        background: url("../images/business/bg-right-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 120%;
    }
    
    #right1 {
        background: url("../images/business/crude-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 100%;
    }

    #right2 {
        background: url("../images/business/petro-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 100%;
    }

    #right3 {
        background: url("../images/business/beeswax-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 80%;
    }

    #right4 {
        background: url("../images/business/men-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
       /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 80%;
    }

    .category .desk {
        display: none;
    }

    .category .mobile {
        display: inline-block;
    }
   
}

/*＝＝＝＝＝＝＝＝＝＝＝430px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 321pxから430pxのスマートフォン向けのスタイル */
@media screen and (min-width: 321px) and (max-width: 430px) {
    .scrollDown {
        display: none;
    }

    #selection {
        /*装飾のためのCSS*/
        width: 100vw;
        height: 40px !important;
        /*background-color: transparent;*/
    
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #selection h1{
        font-size: 18px;
        color: #0f0f0f;
    }

   /*-- 右上ナビゲーションと右エリア非表示 --*/
   #menu{
    display: none;
    }

    .ms-section {
        max-width: 50vw;
        padding: 0;
    }
     
    .category{
        position: absolute;
        top: 50px;
        left: 2vw;
        padding: 0;
        line-height: 2.2vh;
        width: 92%;
    }

    .category p {
        width: 92%;
        margin: 0 auto;
        font-size: 2.8vw;
    }
    
    .category h2{
        width: 92%;
        font-size: 3.5vw;
        margin-bottom: 1vh;
        text-align: left;
        padding: 0;
    }


    .category .crude{
        width: 100% !important;
        margin-top: 0;
    }

    .category .pet{
        width: 80% !important;
        margin-top: 0;
    }

    .category .bee{
        margin-top: 5px;
    } 

    .category .men{
        width: 100% !important;
        margin-top: 5px;
    }



    /*左エリアトップ画像設定*/
    #left0 {
        background: url("../images/business/bg-left-portrait.jpg") no-repeat center;
        background-size: cover;
    }

    /*右エリア画像設定*/
    #right0 {
        background: url("../images/business/bg-right-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 120%;
    }
    
    #right1 {
        background: url("../images/business/crude-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 100%;
    }

    #right2 {
        background: url("../images/business/petro-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 100%;
    }

    #right3 {
        background: url("../images/business/beeswax-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 80%;
    }

    #right4 {
        background: url("../images/business/men-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
       /*background-position: center center; /*-- 画像を要素の中央に配置 --*/
        background-position: 60% 80%;
    }

    .category .desk {
        display: none;
    }

    .category .mobile {
        display: inline-block;
    }
   
}



/*---------------------------------------------------------------------------
タブレット端末の横向きだけの追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
    /* タブレット（ランドスケープモード）に適用するスタイルを記述 */
    
    footer{
        height: 0 !important;
        display: none;
    }

    #selection {
        width: 100%;
        height: 40px !important;
        font-size: 12px;
    }

    #selection h1{
    
        font-size: 20px;

    }

    .category p {
        width: 85%;
        margin: 0 auto;
        font-size: 12px;
        line-height: 3vh;
    }
    
    .category h2{
        width: 85%;
        margin: 0 auto;
        font-size: 20px;
        text-align: left;
        padding: 0;
    }
    
        
    .category .crude{
        width: 75%;
        margin-top: 10px;
    }

    .category .pet{
        width: 85%;
        margin-top: 10px;
    }

    .category .bee{
        width: 95%;
        margin-top: 20px;
    }

    .category .men{
        width: 100%;
        margin-top: 20px;
    }
    

    /*-- 左エリア表紙画像設定 --*/
    #left0 {
        background: url("../images/business/bg-left-landscape.jpg") no-repeat center;
        background-size: cover;
        background-position: 60% 0;
    }

    /*-- 右エリア表紙画像設定 --*/
    #right0 {
        background: url("../images/business/bg-right-landscape.jpg") no-repeat center;
        background-size: cover;
        background-position: 60% 0;
    }

    /*-- トップ画像設定 --*/
    .category .mobile {
        display: none;
    }

    /*-- 右エリア画像設定 --*/
    #right1 {
        background: url("../images/business/crude-landscape.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
    }

    #right2 {
        background: url("../images/business/petro-landscape.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
    }

    #right3 {
        background: url("../images/business/beeswax-landscape.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
    }

    #right4 {
        background: url("../images/business/men-landscape.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
    }



    .ms-right .ms-section {
        position: relative;
        color: #666;
    }

    /*-- .scrollDown の場所を指定 --*/
    .ms-right span {
        position: absolute;
        right: 60px;
        bottom: 250px;
    }

    .scrollDown::after {
        content: "Swipe";
        display: inline-block;
        position: absolute;
        left: 20px; /*-- 調整が必要な場合は左の位置を調整してください --*/
        top: 65%;
        transform: translateY(-50%) rotate(90deg); /*-- 文字を回転して線と平行にする --*/
        transform-origin: left center; /*-- 回転の基準点を左端に設定 --*/
        color: rgb(0, 0, 0); /*-- 線と同じ色に設定 --*/
        font-size: 16px; /*-- 適切なフォントサイズに調整してください --*/
        white-space: nowrap; /*-- 文字が折り返されないように --*/
    }

}

/*---------------------------------------------------------------------------
タブレット端末の縦置きを検知するメディアクエリ 
---------------------------------------------------------------------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

    /*-- 左エリア表紙画像設定 --*/
    #left0 {
        background: url("../images/business/bg-left-portrait.jpg") no-repeat center;
        background-size: cover;
        background-position: 60% 10%;
    }

    /*-- 右エリア表紙画像設定 --*/
    #right0 {
        background: url("../images/business/bg-right-portrait.jpg") no-repeat center;
        background-size: cover;
        background-position: 80% 30%;
    }


    .category .crude{
        width: 100%;
        margin-top: 20px;
    }

    .category .pet{
        width: 90%;
        margin-top: 20px;
    }

    .category .bee{
        display: none;
    }

    .category .mobile{
        display: block;
        margin-top: 20px;
        width: 90%;
    } 

    .category .men{
        width: 100%;
        margin-top: 20px;
    }

    /*-- 右エリア画像設定 --*/
    #right1 {
        background: url("../images/business/crude-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: 60% 30%;
    }

    #right3 {
        background: url("../images/business/beeswax-portrait.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: 60% 35%;
    }

    /* 縦置きのスタイルを適用するためのCSSルールを記述 */
}



/*---------------------------------------------------------------------------
その他の追加指定
---------------------------------------------------------------------------*/
@media screen and (width: 1280px) and (height: 1024px) {

    /* 横幅が1280ピクセル、縦幅が1024ピクセルのディスプレイに適用されるスタイル */

}

/* フルHD以外のディスプレイの例、かつマウスポインティングデバイスの場合にスタイルを適用するメディアクエリ */
@media screen and (max-width: 1367px) and (pointer: fine) {

    .scrollDown {
        display: block;
        position: absolute;
        
        top: 45vh;
        width: 0.15vw;
        height: 20vh;
   
    }
    
    .scrollDown::after {
        content: "Scroll Down";
        display: inline-block;
        position: absolute;
        left: 13px; /*-- 調整が必要な場合は左の位置を調整してください --*/
        top: 25%;   /*-- 調整が必要な場合は左の位置を調整してください --*/
      }
      
    #selection h1{
    
        font-size: 18px;

    }

    .category h2{
        width: 85%;
        margin: 0 auto;
        font-size: 20px;
        text-align: left;
        padding: 0;
    }
    
    .category p {
        width: 85%;
        margin: 0 auto;
        font-size: 14px;
        line-height: 2.8vh;
    }

    /*-- 左エリア表紙画像設定 --*/
    #left0 {
        background: url("../images/business/bg-left-landscape.jpg") no-repeat center;
        background-size: cover;
        background-position: 60% 0;
    }

    /*-- 右エリア表紙画像設定 --*/
    #right0 {
        background: url("../images/business/bg-right-landscape.jpg") no-repeat center;
        background-size: cover;
        background-position: 60% 40%;
    }
    

    /*-- 右エリア画像設定 --*/
    #right1 {
        background: url("../images/business/crude-landscape.jpg") no-repeat center;
        background-size: cover; /*-- 画像を要素全体に広げる --*/
        background-position: 80% 30%;
    }


    .category .crude{
        width: 50%;
        margin-top: 10px;
    }

    .category .pet{
        width: 60%;
        margin-top: 10px;
    }

    .category .bee{
        display: block;
        margin-top: 20px;
        width: 85%;
    }

    .category .mobile{
        display: none;
    } 

    .category .men{
        width: 90%;
        margin-top: 10px;
    }









    /* 1280px未満の解像度かつタッチスクリーンのデバイスに適用されるスタイル */

}

/* フルHD以外のディスプレイかつ細かいポインティングデバイス（タッチスクリーン）の場合にスタイルを適用するメディアクエリ */
@media screen and (max-width: 1919px) and (pointer: coarse) {


    /* 1919px未満の解像度かつタッチスクリーンのデバイスに適用されるスタイル */

}

/* フルHDのディスプレイかつ細かいポインティングデバイス（タッチスクリーン）の場合にスタイルを適用するメディアクエリ */
@media screen and (min-width: 1920px) and (pointer: coarse) {



    /* 1920px以上の解像度かつ通常のポインティングデバイス（マウスなど）のデバイスに適用されるスタイル */

}

/* フルHDのディスプレイかつ通常のポインティングデバイスの場合にスタイルを適用するメディアクエリ */
@media screen and (min-width: 1920px)  {





    /* 1921px以上の解像度かつ通常のポインティングデバイス（マウスなど）のデバイスに適用されるスタイル */

}