@charset "utf-8";

*,::before,::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
:root {
  counter-reset: num;

  /* colors 見本*/
  --black: #000;
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #eb0000;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --orange-light: #f68d2e;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-300: #ccc;
  --gray-dark: #343a40;
  --primary: #00587c;
  --blue-800: #00587c;
  --secondary: #007cad;
  --tertiary: var(--secondary);
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #eb0000;
  --light: #f8f9fa;
  --dark: #343a40;
  --link-color: #007cad;
  --hero-strong-color: #89d1e1;
  --card-text-color: var(--secondary);
  --link-hover-color: var(--secondary);
  --background-color: var(--white);
  --overlay-background-color: #eee;
  --highlight-background-color: #ccc;

  --text-h2-underline-color: #3c46501e;
  --blue-light-color: #90bfdc;
  --blue-deep-color: #044764;
  --tab-content-color: var(--blue-light-color);
  --tab-default-color: var(--blue-deep-color);
  --transparent-grey-color: #3c465080;
  --transparent-grey-color-2: #3c4650b2;
  --transparent-grey-light-color: #3c46501f;
  --transparent-blue-light-color: #f0f5f7ff;
  --transparent-white-color: #ffffff1e;
  --off-white: #ffffff80;
  --muted-text: #ffffffb3;
  --light-grey: #3c46507f;
  --light-black: #3c4650;
  --steel-blue: #6d757c;
  --link-sky-color: #0092cc;
  --oral-care-blue: #009cbd;
  --safety-mobility-yellow: #d9ab41;
  --health-beauty-orange: #f87c56;
  --living-environment-green: #00a499;
  --muted-text-block-color: #abb8c3;
  --link-blue-color: #003d56;
  --dark-cyan-color: #003449;
  --primary-08-transparency: #00587ccc;

  /* colors 使用*/
  --white: #fff;
  --background-color: var(--white);
  --text-color: #5F4D3A;
  --con-back-color: #5F4D3A;
  --con-light-color: #F8F2ED;
  --light-grey:#898686;
  --con-mediumlight-color:#A6947F;
  --link-back-color: var(--con-back-color);


  /* fonts */
  --min-font-family:"Shippori Mincho","Yu Mincho","游 明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; 
  --body-font-family:"Noto Sans JP","YuGothic","Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
  --heading-font-family: var(--body-font-family);
  --fixed-font-family:"Shippori Mincho","Yu Mincho","游 明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; 

  /* body sizes */
  --body-font-size-22: 22px;
  --body-font-size-20:clamp(18px, 17.091px + 0.242vw, 20px);
  --body-font-size-18:clamp(16px, 15.091px + 0.242vw, 18px);
  --body-font-size-16:clamp(14px, 15.091px + 0.242vw, 18px);
  --body-font-size-14:clamp(13px, 12.545px + 0.121vw, 14px);
  --body-font-size-12:clamp(12px, 12.000px + 0vw, 12px);

  /* Heading Variables */
  --h1-font-size:clamp(25px, 19.231px + 1.538vw, 50px);
  --h2-font-size:clamp(23px, 19.818px + 0.848vw, 30px);
  --h3-font-size:clamp(20px, 18.182px + 0.485vw, 24px);
  --h4-font-size:clamp(18px, 17.091px + 0.242vw, 20px);
  /* Font Weight */
  --font-weight-small: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;

  /* Font Style */
  --font-style-normal: normal;

  /* nav height */
  --nav-top-height: 0px;
  --nav-middle-height: 60px;
  --nav-bottom-height: 52px;
  --nav-total-height: calc(
    var(--nav-top-height) + var(--nav-middle-height) + var(--nav-bottom-height)
  );
  /* width */
  --max-width-1200: 1200px;
  /* transition */
  --transition-all-typeA : all 0.5s;
  --transition-all-typeB : all 1.5s;

  /*transform*/
  --transform-50-Y:translateY(-50%);
  --transform-50-X:translateX(-50%);
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: transparent; 
}
body {
  font-family: var(--body-font-family);
  font-style: normal;
  font-size: var(--body-font-size-16);
  color:var(--text-color);;
  background:var(--background-color) ;
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 250px;
  line-height: 1.5em;
  letter-spacing: 0.07em;
}
main {
  min-height: 300px;
  margin-bottom: 180px;
}
h2,h3,h4 {
  font-family: var(--body-font-family); 
  font-style: normal;
  font-weight: 300;
}
.shippori-mincho {
  font-family: var(--min-font-family); 
  font-style: normal;
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl{
  margin: 0;
  padding: 0;
  list-style-type:none;
  text-align: justify;
}
h1, h2, h3, h4, h5, h6{
  line-height: 1.3em;
}
p,dl,ul,ol{
  line-height: 1.7em;
}
dt,dd {
  margin-left: 0;
}
p,ul,ol{
  margin-bottom:clamp(20px, 21.761px + -0.469vw, 15px);
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
  display:block;
}
section p:last-child,article p:last-child,dd:last-of-type,li:last-of-type {
  margin-bottom:0;
}
table,blockquote,address,pre,iframe,form,figure,dl {
  margin: 0;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s;
  font-weight: 400;
}
a:not([class]):hover,
.opa:hover {
  opacity: .5;
}
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}
td,th {
  vertical-align: middle;
  padding: 0;
  font-weight: normal;
}
/*
table th:last-child, table td:last-child {
border-right: none;
}
table tr:last-child th, table tr:last-child  td {
border-bottom: none;
}
*/
img,video {
  max-width: 100%;
  height: auto;
}
.d_b {
  display: block!important;
}
/*  fade  */
.fadein {
  opacity: 0;
  transition: all 1.5s!important;
}
.fadein.is-show {
  opacity: 1;
}
.on1366, .on1280, .on1024, .on768, .on480, .on375 {
  display: none !important;
}
@media (min-width:1367px) {
  .off1366 {
    display: none;
  }
  .on1366 {
    display: block;
  }
}
@media (max-width:1280px) {
  .off1280 {
    display: none !important;
  }
  .on1280 {
    display: block !important;
  }
}
@media (max-width:1024px) {
  .off1024 {
    display: none;
  }
  .on1024 {
    display: block;
  }
}
@media (max-width:768px) {
  .off768 {
    display: none;
  }
  .on768 {
    display: block;
  }
}
@media (max-width:480px) {
  .off480 {
    display: none;
  }
  .on480 {
    display: block;
  }
}


@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
  main {
    margin-bottom: 90px;
  }
  .dn_mob {
    display: none!important;
  }

  .fadein_up_early,.fadein_up,.fadein_up_slow{
    opacity: 0;
    transition: all 1.5s!important;
  }
  .fadein_up.is-show,.fadein_up_early.is-show,.fadein_up_slow.is-show {
    opacity: 1;
  }

  .flex_pc {
    display: block;
  }
  .flex_pc figure {
    width: 90%;
    display: block;
    margin: 0 auto 1rem;
  }
}
@media (min-width: 768px) {
  body {
    font-size: 15px;
  }
  .dn_pc {
    display: none!important;
  }
  .fadein_up_early {
    opacity: 0;
    transform: translate(0, 20%);
    transition: all 0.5s!important;
  }
  .fadein_up,.fadein_up_pc {
    opacity: 0;
    transform: translate(0, 30%);
    transition: all 1s!important;
  }
  .fadein_up_slow {
    opacity: 0;
    transform: translate(0, 40%);
    transition: all 1.5s!important;
  }
  .fadein_up.is-show,.fadein_up_early.is-show,.fadein_up_slow.is-show,.fadein_up_pc.is-show {
    transform: translate(0, 0);
    opacity: 1;
  }
  .flex_pc {
display: flex;
flex-wrap: wrap;
  }
}