@charset "utf-8";

:root {
  --cs-textcolor: #000000;
  --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: #F7931E;
  --cs-yellow: #f4d668;
  --cs-green: #00983F;
  --cs-green-light: #b6c0a8;	
  --cs-brown: #534741;
  --cs-brown-light: #d8d2c2;	
  --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: #17813B;
  --cs-color02: #657598; /* blue-darkの薄くした色 */
  --cs-color03: #F6F2E9;
  --cs-color04: #fff;
  --cs-color05: #fff;
  --cs-color06: #fff;
  --cs-color07: #fff;
  --cs-color08: #fff;
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01: 149,157,112,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  --cs-basefont: apple-system, BlinkMacSystem, Helvetica Neue, Hiragino Kaku Gothic ProN, Hiragino Sans, Arial, Meiryo, sans-serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor:  rgba(255,255,255,0.7); /* ヘッダー背景色 */
  --header-textcolor: #000;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: rgba(255,255,255,1); /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #f2f2f2; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: rgba(0,0,0,0.2); /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: rgba(0,0,0,1);             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: #F7931E;    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #000;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #fff;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: rgba(0,0,0,0.9);       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #fff;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #ccc;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor:  rgba(77, 77, 77, 1);             /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #f2f2f2;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #fff;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(0,0,0,0); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #fff;               /* フッター背景色 */
  --footer-textcolor: #000;              /* フッターテキスト色 */
  --copyright-bgcolor: #000;             /* コピーライト背景色 */
  --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(0,0,0,1);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: rgba(0,0,0,0.7);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: #333;           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #fff;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

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

★★ ヘッダ固定の時のアンカー位置調整したい場合 ★★
common.jsを修正します。
PCの場合：150行目の　 headerHeight = headerHeight + 50; //ヘッダの高さ
　　　　　　　　　　　　　　　　　　　　　　　　　　↑ この数値を50から変更してください。

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


/* reset.css変更
===================================================== */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, /*code,*/
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
/*    font-size:105%; */
}

/* header-b-01.css変更
===================================================== */
/* メニューの文字が大きくなったのでその対応 */
	@media print, screen and (min-width: 768px) {
  	/* l-header */
    .l-header {
      min-height: 110px;
      }
    }



/* footer.css変更
===================================================== */

/* copyright文字数が多いのでその対応 */

    @media (max-width: 767px) {
      .l-copyright {
        height: 70px;
        font-size: 11px;
        line-height: 1.2;
        }
    }

/* copyrightハイパーリンクの文字色変更 */
	.l-copyright a {
		color: #fff;
		}

/* ページトップの文字が大きくなったのでその対応
    @media print, screen and (min-width: 768px) {
      .l-fnav a {
        font-size: 6.0rem;
        height: auto;
        width: auto;
        }
    }
    @media (max-width: 767px) {
      .l-fnav a {
        font-size: 2.0rem;
        height: 60px;
        width: 60px;
        line-height: 60px;
        }
    } */


/* 文字が大きくなったのでその対応
    @media print, screen and (min-width: 861px) {
		 .l-faddress {
				-webkit-flex-wrap: nowrap;
				flex-wrap:  nowrap;
				}
    }
      @media screen and (min-width:768px) and (max-width:1060px){
        .l-faddress > *:first-child { 
          width: auto;
          margin-bottom: 0px;
          text-align: center;
          }
        .l-faddress > *:last-child {
          }
      }
    @media (max-width: 767px) {
      .l-faddress {
        padding: 30px 3%;
        }
      
      .l-faddress > * {
        border-bottom: #999 solid 2px;
        padding: 3% 0;
        width: 100%;
        text-align: center;
        }
      .l-faddress > *:first-child {
        }
        .l-faddress > *:first-child img {
          max-width: 200px;
          width: 80%;
          }
      .l-faddress > *:last-child {
        border-bottom: none;
        }
    }
 */

/* ロゴが小さくなったのでその対応（footerのアドレスのブレイクポイント変更） */
      @media screen and (min-width:768px) and (max-width:860px){
      
      .l-faddress > * {
        border-bottom: #999 solid 2px;
        padding: 3% 0;
        width: 100%;
        text-align: center;
        border-right: none;
        }
      .l-faddress > *:first-child {
				width: 100%;
        }
        .l-faddress > *:first-child img {
          max-width: 200px;
          width: 80%;
          }
      .l-faddress > *:last-child {
        border-bottom: none;
        }
      }





/* 白背景を透過させたボックス
===================================================== */
.white-box{
        background:rgba(255,255,255,0.8);
	padding:30px;
}

/* 白背景を透過させたボックス濃いめ */
 @media print, screen and (min-width: 768px) {
        .white-box1-res		{ 
			background:rgba(255,255,255,1);
			padding: 50px; }
}
      @media (max-width: 767px) {
        .white-box1-res		{ 
			background:rgba(255,255,255,1);
			padding: 20px; }
}


/* 右サイドボタンをスマホ時に下に出さない＆丸ボタンに影響させない
===================================================== */
  .l-sidenav2 {
    position: fixed;
    z-index: 9500;
    }
	@media print, screen and (min-width: 768px) {
    .l-sidenav2 {
      top: 200px;
      right: -2px;
      writing-mode: vertical-lr;
      letter-spacing: -0.2em;
      }
    [class*="l-sidenav2-bn__"] a {
      padding: 10px 9px 10px 8px;
      display: inline-block;
      letter-spacing: 0.1em;
      }
    [class*="l-sidenav2-bn__"] a:not(:first-child) {
      margin-top: 15px;
      }
	}
	@media (max-width: 767px) {
    .l-sidenav2 {
      display:none;
      }
	}
 
/* ビデオのレスポンシブ 
===================================================== */
.mv-wrap {
      padding-top: 56.25%;
      width: 100%;
      position: relative;
      @media (width >= 1200px) {
        padding-top: 50%;
      }
      
 video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        object-fit: fill;
      }
    }


/* スマホ時のロゴ高さ調整
===================================================== */
	@media (max-width: 767px) {
		.l-header h1 img {
			height: 50px;
			}
	}



/* utility.css関連追加
===================================================== */
	@media (max-width: 767px) {
  	.fz-30-sp { font-size: 3.0rem; }
	}


/* テーブルにパーセンテージ指定
===================================================== */
.w-25per {
      width: 100%;
      }
.w-30per {
      width: 100%;
      }
.w-40per {
      width: 100%;
      }
@media print, screen and (min-width: 768px) {
.w-25per {
      width: 25%;
      }
.w-30per {
      width: 30%;
      }
.w-40per {
      width: 40%;
      }	
}