@charset "UTF-8";
/* ====================================================================================

    ---  注意！！  コメントの中にコメントはダメ  動きがおかしくなる  ----

   setting

==================================================================================== */
* {
   box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; 
    /*
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #e6e6e6;
    background-color: #0099FF;
    */
    
    letter-spacing : 0.2em;
}

header {

    padding: 0 2% 10px;
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    height: 100px;
    
    /*
    position: fixed;
    top: 0;

    position: sticky;
    top: 0;
    z-index: 999;
    */
}

a { 
    text-decoration: none; /* メニューのプロパティ設定 */
    color: black ;
}

/* ヘッダー文字設定 */
p.Header-Font {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.5rem);
    text-align: left;
    font-weight:bold;

}


/* 要素全体右寄せ  文字列左寄席 */
h1.Position-R {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 0.8rem);
    text-align: left;
    font-weight:normal;
    max-width: 350px;
    width: auto;
    margin-right: 0;
    margin: 0 0 0 auto;
}
h1.Position-R a {
     text-decoration: underline;
     /*color: #008080;*/
     color: #3cb371;
     position: relative;/*相対位置*/
     padding-top: 1.2em;
     padding-left: 1.2em;/*アイコン分のスペース*/
     line-height: 1.4;/*行高*/
     margin: 0 auto;
}

h2.anchor{
    display: block;
    padding-top: 80px;
    margin-top: -80px;
}


.sampleImg {
    position: absolute; /* 親要素のポジション設定 */
    top: 0 ;
    left: 0 ;
}

.sampleImg img { 
    max-width: 90% ; /* ロゴ設定 */
    heigth: auto;
}

nav {
    margin: 0 0 0 auto;
}

ul {
    list-style: none; /* 黒点削除 */
    margin: 0;
    display: flex;
}

li.pc-nav-m {
    margin: 20px 0 0 15px;
    font-size: 15px;
    text-align: center;
    letter-spacing: -0.03em; /* メニューの文字間隔 */
    padding: 15px; /* メニュー毎の間隔 */
}

li.sp-nav-m {
    margin: 0 0 0 15px;
    font-size: 15px;
    text-align: center;
}



.pc-nav a:hover{
    color: #1e90ff;  /* マウスオーバーで文字色変更 */
}

.sp-nav {
     display: none ; /* メニューは表示せず、ボタンへ変更 */
}

.sp-nav a:hover{
    color: #1e90ff;  /* マウスオーバーで文字色変更 */
}

.sp-nav a{
    color: #ffffff ; /* マウスオーバーで文字色変更 */
}



/* ----- スマホ用表示設定 -----*/
@media screen and (max-width:640px) {

   .pc-disabled {
      display: none; /* 改行コード削除<br> */
   }
   

}

/*1100px以下で有効*/
@media screen and (max-width: 1100px) {

   .pc-nav {
      display: none; /* PC用のメニュー非表示 */
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      /* スマホメニューの背景透明度 */
      background: rgba(0, 0, 0, .7);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   
   /* ハンバーガーのボタン設定 */
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      margin: 0 0 0 auto;
      cursor: pointer;
/*    
      background-color: red; 
*/
      
   }

   #hamburger span {
      position: absolute;
      display: block;
      width: 100%;
      height: 3px;
      background-color: #000000;
      transform: translateY(-50%);

   }

   #hamburger::before {
      content: ' ' ;
      display: block;
      position: absolute;
      top: 8px;
      width: 100%;
      height: 3px;
      background-color: #000000;
   }

   #hamburger::after {
      content: 'MENU';
      font-size: 0.5rem;
      display: block;
      position: absolute;
      top: 17px;
      width: 100%;
      height: 3px;
      background-color: #000000;
      text-transform: uppercase;
      line-height: 3; /* メニューバーの棒とMENUの間隔調整 */

   }

   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }

   .sp-nav li {
      margin: 0;
      padding: 0;
   }

   .sp-nav li span {
      font-size: 15px;
      color: #ffffff;
   }

   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }

   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
      cursor: pointer;
   }

   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #ffffff;
      transform: rotate( 45deg );
   }

   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #ffffff;
      transform: rotate( -45deg );
   }

   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }

   .main-visual {
      padding: 0 4%;
   }

   h2 {
      line-height: 1.6;
      text-align: center;
   }

}



/* ----- 背景用の動画 ----- */
#bg-video{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background-size: cover;

}



/* ----- フッター制御 ----- */

.footer1 {
    color: #808080;
    background: #0099FF;
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.footer1 a {
    color: #ffffff;
    text-decoration: none;
}
.footer1 a:hover {
    color:  #ffff00;
}
.footer1 .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer1 .menu li {
    margin: 0;
    padding: 0 20px;
    border-right: 1px #808080 solid;
}
.footer1 .menu li:last-child {
    border: none;
}
.footer1 .copyright {
    color: #000000;
    margin: 0;
    padding: 20px 0 0 0;
}

@media screen and (max-width: 1400px) {
    .footer1 .menu {
         justify-content: flex-start;
         font-size: 15px;
         white-space: nowrap;
         line-height: 2;
    }

    .footer1 .menu li {
         width: 50%;
         box-sizing: border-box;
         border: none;
    }
    
    .footer1 .menu li:nth-child(odd) {
         border-right: 1px #808080 solid;
    }

}

@media screen and (max-width: 1100px) {
    .footer1 .menu {
         justify-content: flex-start;
         font-size: 13px;
         white-space: nowrap;
         line-height: 2;
    }
}

@media screen and (max-width: 500px) {
    .footer1 .menu {
         justify-content: flex-start;
         font-size: 8.5px;
         white-space: nowrap;
    }
    p.Header-Font {
       font-size: calc(0.2vw + 1.2rem);

    }

}