@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons&display=swap');

/*
.noto-serif-jp {
  font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal;}
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal;}
.roboto-condensed {
  font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal;}
.material-icon::before {
  font-family: "Material Icons"; content: "\e8dc";}
*/



:root {
  --color-bk:   #000;    
  --color-back: #EEE; /* back */
  --color-gy1:  #3B3B3B;
  --color-gy2:  #7D7D7D;
  --m-l: 150px;
  --m-m: 100px;
  --m-ms: 75px;
  --m-s:  50px;
  --m-ss: 30px;
  --m-sss:15px;
  --fontsize-l3: 3.8rem;
  --fontsize-l2: 3.0rem;
  --fontsize-l:  2.4rem;
  --fontsize-m:  1.8rem;
  --fontsize-s:  1.6rem;
  --fontsize-s2: 1.4rem;
  --fontsize-s3: 1.2rem;
}
@media screen and (max-width: 799px) {
  :root {
    --m-l:  80px;
    --m-m:  50px;
    --m-ms: 38px;
    --m-s:  25px;
    --m-ss: 15px;
    --m-sss: 8px;
  --fontsize-l3: 2.4rem;
  --fontsize-l2: 2.0rem;
  --fontsize-l:  1.7rem;
  --fontsize-m:  1.4rem;
  --fontsize-s:  1.2rem;
  --fontsize-s2: 1.1rem;
  --fontsize-s3: 1.0rem;
  }
}



html { overflow-y: scroll; font-size: 62.5%; width: 100%; height: 100%;}
html { scroll-behavior: smooth;}/* スムーズスクロール */
/* スムーズスクロールずれ調整(上部に固定をなくす) */
:target{ scroll-margin-top: 30px;}
/*@media screen and (max-width:720px) {:target{ scroll-margin-top: 120px;}}
@media screen and (max-width:420px) {:target{ scroll-margin-top: 100px;}}*/
/* //スムーズスクロールずれ調整 */


body{
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: var(--fontsize-m); line-height: 1.8;
  text-align: left; color: #000; letter-spacing: 0.5px; background: #EEE; height: 100%;
}
select, input, textarea, button, table, th, td, dl, dt, dd{
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: var(--fontsize-m); line-height: 1.8;
  text-align: left; color: #000; letter-spacing: 0.5px; background: transparent;
}
@media screen and (max-width: 799px) {
  body, select, input, textarea, button, table, th, td, dl, dt, dd{ line-height: 1.6;}
}


.font-roboto-condensed-600 { font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal;}
.font-noto-serif-jp-700 { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.font-noto-sans-jp { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal;}
.font-black{ font-weight: 900;}
.font-bold{ font-weight: 600;}
.font-regular{ font-weight: 300;}
.font-small{ font-size: 90%;}
.font-size-l{ font-size: var(--fontsize-l);}
.font-size-m{ font-size: var(--fontsize-m);}
.font-size-s{ font-size: var(--fontsize-s);}
.font-size-s2{ font-size: var(--fontsize-s2);}

a{ color: inherit;}

.color-bu1{ color: var(--color-bu1);}
.color-bu2{ color: var(--color-bu2);} 
.color-gr1{ color: var(--color-gr1);}
.color-gr2{ color: var(--color-gr2);} 

.keikoupen{ background:linear-gradient(transparent 60%, #FFDD00 60%);}

.ml-auto{ margin-left: auto;}
.mr-auto{ margin-left: auto; margin-right: auto;}
.mlr-auto{ margin-right: auto;}
.mt-l{ margin-top: var(--m-l);}
.mt-m{ margin-top: var(--m-m);}
.mt-s{ margin-top: var(--m-s);}
.mt-ss{ margin-top: var(--m-ss);}
.mt-sss{ margin-top: var(--m-sss);}
.mb-l{ margin-bottom: var(--m-l);}
.mb-m{ margin-bottom: var(--m-m);}
.mb-s{ margin-bottom: var(--m-s);}
.mb-ss{ margin-bottom: var(--m-ss);}
.mb-sss{ margin-bottom: var(--m-sss);}
.mlr-auto{ margin-left: auto; margin-right: auto;}
.pt-l{ padding-top: var(--m-l);}
.pt-m{ padding-top: var(--m-m);}
.pt-s{ padding-top: var(--m-s);}
.pt-ss{ padding-top: var(--m-ss);}
.pt-sss{ padding-top: var(--m-sss);}
.pb-l{ padding-bottom: var(--m-l);}
.pb-m{ padding-bottom: var(--m-m);}
.pb-s{ padding-bottom: var(--m-s);}
.pb-ss{ padding-bottom: var(--m-ss);}
.pb-sss{ padding-bottom: var(--m-sss);}

span.break{ display: inline-block;}
.urlwrap{ word-break: break-all;}

.text-center{ text-align: center;}
.text-left{ text-align: left;}
.text-right{ text-align: right;}
.text-justify{ text-align: justify;}
ul.liston{ margin-left: 1.2em; list-style: disc;}
b,strong{ font-weight: 600;}

.sponly{ display: none;}
@media screen and (max-width: 799px) {
  .sponly{ display: block;}
}

.cf::after { content: ""; display: block; clear: both;}

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

.pagetop { display: none; position: fixed;	bottom: 20px;	right: 20px;	z-index:99;}
.pagetop a { display: block; text-align: center; /*background-color: rgba(255,255,255,0.5)*/; 
  border: 1px solid rgba(0,0,0,0.05); color: #000; text-decoration: none; font-size: var(--fontsize-l); line-height:20px; padding: 8px 8px 8px 8px; transition: 0.5s all;}
.pagetop a:hover{ background-color: rgba(0,0,0,0.1);}
.pagetop a em{ display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 10px; line-height: 10px;
  font-style: normal; letter-spacing: 0; padding-top: 3px; white-space: nowrap; }
@media screen and (max-width: 799px) {
  .pagetop a { display: block; line-height:18px; padding-top: 4px;  }
  .pagetop a em{ font-size: 9px; line-height: 9px;}
}