@charset "utf-8";

/* Google font and Icon */
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wdth,wght@75..100,100..900&family=Material+Symbols+Outlined&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wdth,wght@75..100,100..900&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-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
・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-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;  */

/* Google Material Symbol Outlined の個別設定
　・HTMLへ入れる場合
     <span class="material-symbols-outlined">lock</span>
　・CSSで入れる場合
     font-family: 'Material Symbols Outlined';
     content: "\e897";  */

.material-symbols-outlined{ font-size: 90%; vertical-align: middle;}


:root {
  --color-main: #00408F;
  --color-mainlight: #006CFF;
  --color-accent: #F6A902;
  --color-back: #FFFDF8;
  --box-width: 90%;
  --box-max-width-l: 1920px;
  --box-max-width-m: 1400px;
  --box-max-width-s: 1200px;
  --sp-l: 160px;
  --sp-lm: 120px;
  --sp-m: 80px;
  --sp-ms: 50px;
  --sp-s: 20px;
  --sp-ss: 10px;
}
@media screen and (max-width: 767px) {
  :root {
    --sp-l: 80px;
    --sp-lm: 60px;
    --sp-m: 40px;
    --sp-ms: 22px;
    --sp-s: 10px;
    --sp-ss: 5px;
  }
}


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

body{
	font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-optical-sizing: auto; font-style: normal; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: #000; background-color: var(--color-back); }
select, input, textarea, button, table{
	font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; 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: 1.4rem; line-height: 1.5; }
  select, input, textarea, button, table{
    font-size: 1.4rem; line-height: 1.5; }
}

a{ text-decoration:none;}
a:link{ color: var(--color-main);}
a:visited{ color: var(--color-main);}
a:hover{ color: var(--color-mainlight);}
a:active{ color: var(--color-mainlight);}
a:active, a:focus{ outline:none;}

small{ font-size: 1.1rem; }
.fs_l{ font-size: 4.2rem; line-height: 1.4;}
.fs_lm{ font-size: 3.0rem; line-height: 1.4;}
.fs_m{ font-size: 2.4rem; line-height: 1.8;}
.fs_ms{ font-size: 1.8rem; line-height: 1.8;}
.fs_s{ font-size: 1.3rem; line-height: 1.4;}
.fs_ss{ font-size: 1.1rem; line-height: 1.4;}
@media screen and (max-width: 767px) {
  .fs_l{ font-size: 2.4rem; line-height: 1.4;}
  .fs_lm{ font-size: 2.0rem; line-height: 1.4;}
  .fs_m{ font-size: 1.6rem; line-height: 1.8;}
  .fs_ms{ font-size: 1.4rem; line-height: 1.8;}
  .fs_s{ font-size: 1.2rem; line-height: 1.4;}
}

.pt_1{ padding-top: 1px;}
.pt_lm{ padding-top: var(--sp-lm);}
.pt_m{ padding-top: var(--sp-m);}
.pt_ms{ padding-top: var(--sp-ms);}
.pt_s{ padding-top: var(--sp-s);}
.pb_m{ padding-bottom: var(--sp-m);}
.pb_ms{ padding-bottom: var(--sp-ms);}
.pb_s{ padding-bottom: var(--sp-s);}
.mt_lm{ margin-top: var(--sp-lm);}
.mt_m{ margin-top: var(--sp-m);}
.mt_ms{ margin-top: var(--sp-ms);}
.mt_s{ margin-top: var(--sp-s);}
.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;}
.font_serif{ font-family: "Noto Serif JP", serif; font-weight: 800;}
.break{ display: inline-block;}
.color-accent{ color: var(--color-accent);}

.sponly1{ display: none;}
@media screen and (max-width: 520px) {
  .sponly1{ display: inline;}
}


/*------------------------------------------------------------
  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; }
}