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


/*
  font-family: "Cormorant Garamond", serif;
  font-weight: <weight>;
  light:300, regular:400, medium:500, semibold:600, bold:700

  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  regular:400, medium:500, semibold:600, bold:700, extrabold:800

  font-family: "Noto Sans JP", sans-serif;
  font-weight: <weight>;
  thin:100, extralight:200, light:300, regular:400, medium:500, semibold:600, bold:700, extrabold:800, black900
*/


:root {
  
  --color-bw-text: #C8956C;
  --color-base-text: #1B3A4B;
  --m-l: 150px;
  --m-ml: 100px;
  --m-m: 70px;
  --m-ms: 60px;
  --m-s: 30px;
}
@media (width < 768px) {
  :root {
    --m-l: 50px;
    --m-ml: 40px;
    --m-m: 30px;
    --m-ms: 30px;
    --m-s: 20px;
  }
}



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


body{ background-color: #fff;}
body, p{
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.7;
  text-align: left; color: var(--color-base-text);
}
select, input, textarea, button, table, th, td, dl, dt, dd{
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.7;
}
@media (width < 1200px) {
  body, p, select, input, textarea, button, table, th, td, dl, dt, dd{
    font-size: 18px; line-height: 1.6;
  }
}
@media (width < 768px) {
  body, p, select, input, textarea, button, table, th, td, dl, dt, dd{
    font-size: 18px; line-height: 1.6;
  }
}

a{ color: inherit; text-decoration: none;}

a.color_line_grad{ background: linear-gradient(to right, #258529, #60a863);}
a.color_btn_grad{ background: linear-gradient(to right, #C8956C, #8E7058);}
a.color_line_grad:hover{ background: linear-gradient(to right, #20a824, #5ecf62);}
a.color_btn_grad:hover{ background: linear-gradient(to right, #e7a066, #b3825a);}
.color_basetext_grad{ background: linear-gradient(to right, #1B3A4B, #4089B1);}
.color_bw_text{ color: var(--color-bw-text);}
.color_base_text{ color: var(--color-base-text);}

.back_bw-text{ color: var(--color-bw-text);}
.back_base-text{ color: var(--color-base-text);}

.break{ display: inline-block; font-style: normal;}
.mlrauto{ margin-left: auto; margin-right: auto;}

.text_center{ text-align: center;}
ul.liston{ margin-left: 1.6em; list-style: disc;}
ol.liston{ margin-left: 2.2em; list-style: decimal;}

br.sponly{ display: none;}
@media (width < 768px) {
  br.sponly{ display: inline;}
}

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


.pagetop { position: fixed; bottom: 40px; right: 2px; z-index:999;
  opacity: 0; visibility: hidden; transition: all 0.4s ease; pointer-events: none;}
.pagetop.active { opacity: 1; visibility: visible; pointer-events: auto;}
.pagetop a { display: block; text-align: center; background-color: rgba(255,255,255,0.47); color: #000; text-decoration: none; font-size:20px; line-height:20px; padding: 10px 2px 10px 2px;}
.pagetop a em{ display: block; font-size: 10px; line-height: 10px; padding-top: 5px; white-space: nowrap; font-style: normal;}
@media (width < 768px) {
  .pagetop { bottom: 66px;}
  .pagetop a { display: block; font-size:18px; line-height:18px; padding-top: 4px;  }
  .pagetop a em{ font-size: 9px; line-height: 9px;}
}

/*
.pagetop { position: fixed; top: 0; right: 0; display: block; z-index: 999; 
  opacity: 0; visibility: hidden; transition: all 0.4s ease; pointer-events: none;}
.pagetop.active { opacity: 1; visibility: visible; pointer-events: auto;}
.pagetop a {  display: block; text-decoration: none; color: #4089B1; font-size: 20px; line-height:20px; 
  padding: 10px 2px 10px 2px;}
.pagetop a em{ display: block; font-size: 10px; line-height: 10px; padding-top: 5px; white-space: nowrap; }
@media (width < 768px) {
  .pagetop a { display: block; font-size:18px; line-height:18px; padding-top: 4px;  }
  .pagetop a em{ font-size: 9px; line-height: 9px;}
}
*/