@charset "utf-8";

:root {
  --cs-textcolor: #000;
  --cs-textcolor-a: #0d6efd;
  --cs-textcolor-hover: #6610f2;
  --cs-bordercolor: #ccc; /* ボーダーのデフォルト色 */
  --cs-blue: #0066CC;
  --cs-blue-light: #4682B4;
  --cs-blue-dark: #233B6C;
  --cs-navy: #000033;
  --cs-purple: #7e67a2;
  --cs-pink: #FF6699;
  --cs-pink-light: #e6c2bf;	
  --cs-red: #b92125;
  --cs-red-light: #ffe3e5;
  --cs-red-dark: #440000;
  --cs-orange: #ff840a;  /* サブ */
  --cs-yellow: #FFF57F;  /* サブ */
  --cs-green: #5992A3;  /* メイン　2025年5月にメインカラーがgrenn→blueに変更されたがそのままこの名前で使用する */
  --cs-green-light: #b6c0a8;	
  --cs-brown: #534741;
  --cs-brown-light: #ede8e2;	/* サブ */
  --cs-brown-dark: #403134;
  --cs-black: #000;
  --cs-white: #fff;
  --cs-gray: rgba(153, 153, 153, 1);
  --cs-gray-light: rgba(230, 230, 230, 1);
  --cs-gray-dark: rgba(77, 77, 77, 1);
  --cs-color01: #277187;	/* サブ（くすんだ青）2025年5月に変更 */
  --cs-color02: #fff;
  --cs-color03: #fff;
  --cs-color04: #fff;
  --cs-color05: #fff;
  --cs-color06: #fff;
  --cs-color07: #fff;
  --cs-color08: #fff;
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01:89,146,163,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  --cs-basefont: "游ゴシック Medium",YuGothic-M, YuGothic,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor: rgba(89,146,163,1); /* ヘッダー背景色 */
  --header-textcolor: #fff;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: transparent; /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0.3); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0.3); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #f2f2f2; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: rgba(0,0,0,0.2); /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: #fff;             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: #FFF57F;    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #fff;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #fff;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: rgba(89,146,163,0.9);       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #fff;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #fff;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor: #cddee3;        /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #ffffff;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #FFF57F;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(255,255,255,0.2); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #fff;               /* フッター背景色 */
  --footer-textcolor: #666;              /* フッターテキスト色 */
  --copyright-bgcolor: #5992A3;             /* コピーライト背景色 */
  --copyright-textcolor: #fff;              /* フッターテキスト色 */
  --slick-dots: #595757;                /* スリックスライダードットの色 */
  --slick-active: #000;                 /* スリックスライダードットのアクティブ色 */
  --sns-bgcolor: #fff;               /* SNS丸ボタンの背景色 */
  --sns-iconcolor: #333;             /* SNS丸ボタンのアイコン色（ロールオーバも同じ色） */
  --sns-bordercolor: #fff;           /* SNS丸ボタンのボーダー色 */
  --sns-bordercolor-hover: #333;     /* SNS丸ボタンのロールオーバ時のボーダー色 */
  --fnav-iconcolor-pc: rgba(89,146,163,1);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: rgba(89,146,163,0.7);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: rgba(89,146,163,1);           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #fff;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0.4);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

/*///////////////////////////////////////////////////////////////////////////////////////// */

  /* footer SNS　4つの対応 */
    @media (max-width: 767px) {
      .l-sns > a {
        margin: 0 5px;
        }
    }

  /* タイトルのフォント */
	.font-noto,
	.font-noto__green,
	.font-noto__white {
    font-family: 'Noto Sans JP', sans-serif;
		}
	@media print, screen and (min-width: 768px) {
    .font-noto__white {
      color: #fff;
      -webkit-text-stroke-color: #5992A3;
  /*    text-shadow:
        0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70,0 0 5px #959d70;*/
      }
    .font-noto__green {
      color: #5992A3;
      -webkit-text-stroke-color: #fff;
      }
  	.font-noto__green,
    .font-noto__white {
      letter-spacing: 8px;
      font-size: 6.8rem;
      -webkit-text-stroke-width: 1px;
      }
  }
  @media (max-width: 767px) {
    .font-noto__white {
      letter-spacing: 3px;
      font-size: 2.4rem;
      color: #5992A3;
      }
    .font-noto__green {
      letter-spacing: 3px;
      font-size: 2.4rem;
      color: #fff;
      }
  }



  /* トップページのヘッダーのテキスト色（スクロール前） */
	@media print, screen and (min-width: 768px) {
  .l-home__transparent .l-headerbase .l-gnav {
    text-shadow:
      3px 3px 10px rgba(0, 0, 0, 0.3),
      -3px 3px 10px rgba(0, 0, 0, 0.3),
      3px -3px 10px rgba(0, 0, 0, 0.3),
      -3px -3px 10px rgba(0, 0, 0, 0.3),
      0px 3px 10px rgba(0, 0, 0, 0.3),
      -3px 0px 10px rgba(0, 0, 0, 0.3),
      0px -3px 10px rgba(0, 0, 0, 0.3),
      -3px 0px 10px rgba(0, 0, 0, 0.3);
    }
      .l-home__transparent .l-headerbase.l-header-transform .l-gnav {
        text-shadow:
          3px 3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          -3px 3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          3px -3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          -3px -3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          0px 3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          -3px 0px 10px rgba(var(--cs-shadowcolor01) 0.3),
          0px -3px 10px rgba(var(--cs-shadowcolor01) 0.3),
          -3px 0px 10px rgba(var(--cs-shadowcolor01) 0.3);
        }
  }



  /* スマホトップページのヘッダーの色 */
	@media (max-width: 767px) {
    .l-headerbase {
      height: 50px;
      background-color: var(--header-bgcolor);
      }
    .l-home__transparent .l-headerbase {
      height: 50px;
      position: absolute;
      background-color: var(--header-bgcolor);
      box-shadow: 0px 1px 3px var(--headermenu-bgcolor-shadow);
      -webkit-box-shadow: 0px 1px 3px var(--headermenu-bgcolor-shadow);
      -moz-box-shadow: 0px 1px 3px var(--headermenu-bgcolor-shadow);  
      }
  }




  /* 翻訳ツール */
  .gtranslate {
    display: inline-block;
    padding: 0 10px!important;
    text-shadow: none;
    position: absolute;
    }
  .gtranslate .gt_container--hich1m .gt_switcher a img {
    vertical-align: text-bottom;
    }

	@media print, screen and (min-width: 910px) {
    .gtranslate {
      top: 15px;
      right: 30px;
      width: 160px;
      }
    .l-gnav-over {
      margin-right: 180px;  
      }
  }
  @media (max-width: 909px) {
    .gtranslate {
      right: 0px;
      bottom: -30px;
      }
    .l-gnav-over {
      margin-bottom: -5px;  
      }
  }
  @media print, screen and (min-width: 768px) {
    .l-hnav-bn__1 a {
      padding-top: 3px;
      padding-bottom: 3px;
      }
	}
	@media (max-width: 767px) {
	}




/* ******** ご利用方法ページ ******** */

  /* 冒頭の文章 */
	.p-yoyaku {
    display: block;
    font-weight: bold;
    }
	.p-yoyaku span {
    background: linear-gradient(transparent 68%, #FFF57F 68%);
    display: inline;
    }
  @media print, screen and (min-width: 768px) {
    .p-yoyaku {
      font-size: 2.8rem;
      }
	}
	@media (max-width: 767px) {
    .p-yoyaku {
      font-size: 1.8rem;
      }
	}



/* ******** キャンピングカーページ ******** */

  .p-cartitle {
    position: relative;
    padding: 0.3em 3em 0.5em;
    border-top: solid 4px var(--cs-green);
    border-bottom: solid 4px var(--cs-green);
    }
  .p-cartitle:before, .p-cartitle:after {
    content: '';
    position: absolute;
    top: -10px;
    width: 4px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: var(--cs-green);
    }
  .p-cartitle:before {
    left: 7px;
    }
  .p-cartitle:after {
    right: 7px;
    }
  .p-cartitle-text {
    font-size: 3.6rem;
    font-weight: bold;
    color: var(--cs-color01);
    text-shadow: 6px 3px 3px var(--cs-yellow);
    padding-right: 20px;
    }
	@media (max-width: 767px) {
    .p-cartitle {
      padding: 0.3em 2em 0.5em;
      }
    .p-cartitle-text {
      font-size: 2.2rem;
      font-weight: bold;
      color: var(--cs-color01);
      text-shadow: 6px 3px 3px var(--cs-yellow);
      padding-right: 20px;
      }
	}





/* ******** 手荷物一時お預りページ ******** */

  /* 冒頭の文章 */
	.p-baggage {
    display: block;
    font-weight: bold;
    }
	.p-baggage span {
    background: linear-gradient(transparent 68%, #FFB56C 68%);
    display: inline;
    }
  @media print, screen and (min-width: 768px) {
    .p-baggage {
      font-size: 2.0rem;
      }
    .p-baggage span {
      font-size: 2.8rem;
      }
	}
	@media (max-width: 767px) {
    .p-baggage span {
      font-size: 1.6rem;
      }
	}