@charset "utf-8";

/* GOOGLE FONTSをDOWNLOADして使用する場合　woff2へ変換（woffコンバータ使用） */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-VariableFont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}
/* 
・weight
    100:thin 200:ExtraLight 300:Light 400:Regular 500:Medium 600:SemiBold 700:Bold 800:ExtraBold 900:Black 
・Noto Sans JP | Valiable | Weight: Full axis:100-900
    font-family: "Noto Sans JP", sans-serif; font-weight: 400;
・Roboto | Valiable | Style: One value:Roman | Weight: Full axis:100-900
  | Width: Full axis: 75:condenced, 87.5:semiCondenced, 100:normal
    font-family: "Roboto", sans-serif; font-weight: 700; font-variation-settings: "wdth" 100;
*/

/* フォントの定義 */
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/assets/fonts/MaterialSymbolsOutlined-VariableFont.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 700;/* 対応する太さの範囲を指定 */
  font-display: swap;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  font-feature-settings: 'liga';/* 合字（アイコン名を表示に変換）を有効化 */
  -webkit-font-smoothing: antialiased;
  font-variation-settings:/* 初期値を設定（FILL 0:線、wght 400:標準） */
    'FILL' 0,
    'wght' 400,/* 太さ：大きさも線分だけ変わる 100 700 */
    'GRAD' 0,/* 太さ：外枠サイズは変えない -25 200 hover等に使用 */
    'opsz' 24;/* デザイン変更　簡略20 48詳細 */
}
.ms-fill { font-variation-settings: 'FILL' 1;}/* 塗りつぶし状態にする */
.ms-ol { font-variation-settings: 'FILL' 0;}/* 標準：アウトライン状態にする */
.ms-thin { font-variation-settings: 'wght' 100;}/* 太さ */
.ms-extralight { font-variation-settings: 'wght' 400;}
.ms-light { font-variation-settings: 'wght' 400;}
.ms-regular { font-variation-settings: 'wght' 400;}/* 標準太さ */
.ms-medium { font-variation-settings: 'wght' 400;}
.ms-semibold { font-variation-settings: 'wght' 400;}
.ms-bold { font-variation-settings: 'wght' 700;}
/*
Google Material Icon の個別設定
・HTMLへ入れる場合
   <span class="material-symbols-outlined">account_circle</span>
・CSSで入れる場合
  icon-arrow::before { font-family: 'Material Symbols Outlined'; content: "\e5e1"; 
    display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto;
    line-height: 1; text-transform: none; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;}
*/

/* 標準カラー
  navy: #1C2D6A; rgba(28,45,106,1.00)
  navylight: #6880D7; rgba(104,128,215,1.00)
  orange: #EF5C00; rgba(239,92,0,1.00)
  backgray: #F3F3F3; rgba(243,243,243,1.00)
  gray: #D9D9D9; rgba(217,217,217,1.00)
  backbluegray: #E2ECF5;
*/
:root {
  --sp-l: 150px;
  --sp-m: 100px;
  --sp-ms: 50px;
  --sp-s: 16px;
}
@media screen and (max-width: 767px) {
  :root {
    --sp-l: 50px;
    --sp-m: 30px;
    --sp-ms: 20px;
    --sp-s: 10px;
  }
}


html { overflow-y: scroll; font-size: 62.5%; scroll-behavior: smooth;}

body{ font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-optical-sizing: auto; font-style: normal; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: #000; background-color: #fff;}
select, input, textarea, button, table{ font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-optical-sizing: auto; font-style: normal; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: #000;}
@media screen and (max-width: 767px) {
  body{ font-size: 14px; line-height: 1.6;}
  select, input, textarea, button, table{ font-size: 1.4rem; line-height: 1.6;}
}

a{ text-decoration:none;}
a:link{ color: #EF5C00;}
a:visited{ color: #EF5C00;}
a:hover{ color: rgba(239,92,0,0.80);}
a:active{ color: rgba(239,92,0,0.80);}
a:active, a:focus{ outline:none;}

small{ font-size: 1.2rem; }

.w1920{ max-width: 1920px;}
.w1400{ max-width: 1400px;}
.w1200{ max-width: 1200px;}
.w1000{ max-width: 1000px;}
.w800{ max-width: 800px;}
.w90p{ width: 90%;}
.w80p{ width: 80%;}

.back_gray{ background-color: #F3F3F3; padding-top: 1px;}
.bold{ font-weight: 700}
.semibold{ font-weight: 600}
.light{ font-size: 300;}

.pt_1{ padding-top: 1px;}
.pt_l{ padding-top: var(--sp-l);}
.pt_m{ padding-top: var(--sp-m);}
.pt_ms{ padding-top: var(--sp-ms);}
.pt_s{ padding-top: var(--sp-s);}
.pb_l{ padding-bottom: var(--sp-l);}
.pb_m{ padding-bottom: var(--sp-m);}
.pb_ms{ padding-bottom: var(--sp-ms);}
.pb_s{ padding-bottom: var(--sp-s);}
.mt_l{ margin-top: var(--sp-l);}
.mt_m{ margin-top: var(--sp-m);}
.mt_ms{ margin-top: var(--sp-ms);}
.mt_s{ margin-top: var(--sp-s);}
.mb_l{ margin-bottom: var(--sp-l);}
.mb_m{ margin-bottom: var(--sp-m);}
.mb_ms{ margin-bottom: var(--sp-ms);}
.mb_s{ margin-bottom: var(--sp-s);}
.mlr_auto{ margin-left: auto; margin-right: auto;}
.text-center{ text-align: center;}
.text-right{ text-align: right;}
.break{ display: inline-block;}
.eng{ font-family: "Roboto", sans-serif; font-weight: 400; font-variation-settings: "wdth" 75;}


/*------------------------------------------------------------
  Pagetop
------------------------------------------------------------ */

.pagetop { display: none; position: fixed;	bottom: 40px;	right: 2px;	z-index:99;}
.pagetop a { display: block;	/*width: 80px; height: 62px;*/ text-align: center; background-color: rgba(255,255,255,0.47); 
  border: 1px solid gba(0,0,0,0.53); color: #000; text-decoration: none; font-size:20px; line-height:20px; padding: 10px 2px 10px 2px;}
.pagetop a em{ display: block; font-family: Arial, Helvetica, "sans-serif"; font-size: 10px; line-height: 10px;
  font-style: normal; letter-spacing: 0; padding-top: 5px; white-space: nowrap; }
@media screen and (max-width: 640px) {
  .pagetop a { display: block; /*width: 80px;*/ font-size:18px; line-height:18px; padding-top: 4px;  }
  .pagetop a em{ font-size: 9px; line-height: 9px;}
}


/* ----------------------------------------------------------
   MT Pagebute pagelist
---------------------------------------------------------- */

.pagenationnav{ position:relative; margin: 60px auto 0 auto; width: 90%; display: flex; justify-content: center; column-gap: 5px;}
.pagenationnav a{ font-size: 15px; line-height: 1.2; padding: 8px 10px; border: 1px solid #ccc; border-radius: 25px; transition: all 0.6s;}
.pagenationnav a:hover{ border: 1px solid #555;}
@media screen and (max-width: 640px) {
  .pagenationnav{ margin: 30px auto 0 auto; column-gap: 3px;}
  .pagenationnav a{ font-size: 13px; line-height: 1.2; padding: 5px 5px;}
}

.pagenate{ position:relative; overflow:hidden; margin-top: 60px;}
.pagenate ul{ position:relative; display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.pagenate li{ list-style:none; font-size: 13px; margin: 3px; }
.pagenate li a{ display:block; padding:6px 12px; background-color: var(--color-main); text-decoration:none; color: #fff; border: 1px solid var(--color-main); border-radius: 3px; text-align: center;}
.pagenate li a:hover{	background-color: rgba(27,117,188,1.00); border: 1px solid rgba(27,117,188,1.00); }
.pagenate li span.current_page{ display:block;	padding:6px 12px;	color: var(--color-main); border: 1px solid var(--color-main); border-radius: 3px; text-align: center;}
.pagenate li a span.material-icons{ margin: 0; font-size: 13px; letter-spacing: 0;}
@media screen and (max-width: 640px) {
  .pagenate{ margin: 30px auto 0 auto; }
}