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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;700&display=swap');

:root {
  --C_red: #e60012;
  --C_gray: #efefef;
}

/* ===============================
	header
 =============================== */
#header {
  padding: 54px 0 15px;
  background: #fff;
  width: 100%;
  z-index: 999;
  display: block;
  transition: 1s;
	position: fixed;
	top: 0;
}
.header__inner {
  max-width: 1100px;
  position: relative;
}
.header__logo a {
  width: 330px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo h1 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.header_contact {
  right: 0;
  width: 168px;
}
.header_contact a {
  border: var(--C_red) solid 1px;
  border-radius: 5px;
  display: block;
  text-align: center;
  padding: 5px;
}
.header_contact a p {
  color: var(--C_red);
  font-size: 11px;
  font-weight: 600;
}
.header_contact a img {
  right: 4%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.header__nav {
  width: calc(100% - 330px - 5%);
  position: absolute;
  right: 0;
  bottom: 0;
  padding-bottom: 5px;
}
.header__nav ul {
  display: flex;
  justify-content: space-between;
}
.header__nav li {

}
.header__nav li:first-of-type {
  padding-left: 0;
}
.header__nav li:last-of-type {
  padding-right: 0;
}
.header__nav li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.header__nav li a:hover {
  color: var(--C_red);
}
@media  (max-width: 1180px) and (min-width: 768px) {
  .header__inner {
    padding-left: 4%;
    padding-right: 4%;
  }
}
@media screen and (max-width: 767px) {
  #header {
    padding: 10px;
    padding-right: 0;
  }
  .header__logo a {
    justify-content: left;
  }
  .header__logo img {
    height: 50px;
    width: auto;
  }
  .header__logo h1 {
    margin-left: 10px;
  }
  .header_contact {
    display: none;
  }
  .header__nav li:last-of-type {
    display: contents;
  }
  .header__nav .header_contact {
    display: block;
  }
  .header__nav .header_contact a {
    position: relative;
  }
  .header__nav .header_contact a p {
    font-size: 16px;
    position: relative;
  }
  /* ハンバーガーメニュー */
  .header__nav {
    display: none;
    position: fixed;
    right: -100vw;
    top: 0;
    width: 80%;
    height: 100vh;
    padding-top: 80px;
    background: #fff;
    transition: all .8s;
    z-index: 998;
    overflow-y: auto;
    box-shadow: 0 0 30px rgb(0 0 0 / 30%);
    opacity: 0.9;
    transition: all .8s;
  }
  .header__nav ul {
    display: block;
    width: 70%;
    margin: auto;
  }
  .header__nav li {
    margin-bottom: 40px;
    width: 100%;
    text-align: left;
  }
  .header__nav li a {
    font-size: 16px;
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 2px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 999;
    background: #fff;
    opacity: 0.8;
  }
  .hamburger span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 1px;
    background: #000;
    transition: all .8s;
  } 
  .hamburger span:first-of-type {
    top: 10px;
  } 
  .hamburger span:nth-of-type(2) {
    top: 20px;
  }
  .hamburger span:last-of-type {
    top: 30px;
  }
  .header__bg-black {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .8s;
    cursor: pointer;
  }

  /* ハンバーガーメニュー開いた時 */
  .nav-open .header__nav {
    display: block;
    right: 0;
    transition: all .8s;
  }
  .nav-open .header__bg-black {
    opacity: 0.2;
    visibility: visible;
  }
  .nav-open .hamburger span:first-of-type {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger span:nth-of-type(2) {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger span:last-of-type {
    transform: rotate(-45deg);
    top: 20px;
  }
}
#breadcrumb {
  display: flex;
  margin-top: 10px;
}
#breadcrumb li {
  margin-right: 10px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#breadcrumb li::after {
  content: '＞';
  margin-left: 10px;
}
#breadcrumb li:last-of-type{
  overflow: hidden;
}
#breadcrumb li:last-of-type::after {
  content: none;
}
#breadcrumb li::after,
#breadcrumb li span {
  font-size: clamp(10px,12 / 704 * 100vw,12px);
}
#breadcrumb li:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#breadcrumb li:last-child span,
#breadcrumb li:last-child time {
  color: var(--C_red);
}
#breadcrumb li time {
  margin-right: 10px;
}
@media screen and (max-width: 1099px) {
  #breadcrumb {
    margin-left: 17.714%;
  }
}
@media screen and (max-width: 767px) {
  #breadcrumb {
    margin-left: 0;
  }
}
/* スクロールでリサイズ */
#header.resize {
  padding-top: 10px;
}

/* ===============================
	footer
 =============================== */
#footer {
  background: #fff;
}
#footer a {
  color: #fff;
}
.footer__inner {
  max-width: calc(1100px + 8%);
  position: relative;
  padding: 20px 0 30px;
  overflow: visible;
}
.bg_gray .footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
}
.bg_gray ul {
  display: flex;
  justify-content: flex-end;
}
.bg_gray li {
  padding: 0 10px;
}
.bg_gray li:last-of-type {
  padding-right: 0;
}
.bg_gray a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.bg_black nav ul {
  display: flex;
}
.bg_black nav li a {
  font-size: 14px;
  margin-right: 20px;
}
.bg_black nav li:last-of-type a {
  margin-right: 0;
}
.footer__copylight {
  font-size: 12px;
  color: #B3B3B3;
  margin-top: 10px;
}
.bg_black p {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding-right: 10px;
}

@media  (max-width: 1480px) and (min-width: 768px) {
  .footer__inner {
    padding-left: 4%;
    padding-right: 4%;
  }
}
@media screen and (max-width: 767px) {
  #footer {
    text-align: center;
  }
  .footer__inner {
    padding: 40px 6% 26px;
  }
  #footer .display__flex {
    display: block;
  }
  .bg_gray {
    display: none;
  }
  .footer__copylight {
    margin-top: 20px;
  }
  .bg_black .footer__inner {
    flex-wrap: wrap-reverse;
  }
  .bg_black .footer__inner > div {
    width: 100%;
  }
  .bg_black .footer__inner > div:last-of-type .disFlex {
    justify-content: space-between;
    width: 100%;
  }
  .bg_black nav {
    margin-top: 40px;
  }
  .bg_black nav ul {
    justify-content: center;
  }
  .bg_black p {
    font-size: 14px;
    text-align: left;
  }
}

/* ===============================
	site utility
 =============================== */
body *{font-family: 'Noto Sans JP', serif;}
body {padding-top: 139px;}
a {transition: 0.4s;}
a:hover {transition: 0.4s; opacity: 0.7;}
@media screen and (max-width: 767px) {
	body {padding-top: 75px;}
}
/* 最大width幅 */
.w364,.w538,.w704,.w742,.w810,.w914,.w1030,.w1094,.w1100,.w1100_p,.w1124,.w1140,.w1154,.w1222,.w1550,.w1736 {max-width: 100%;}
.w364 {width: calc(364px + 4%);}
.w538 {width: calc(538px + 4%);}
.w704 {width: 704px;}
.w742 {width: calc(742px + 4%);}
.w810 {width: calc(810px + 4%);}
.w914 {width: 914px;}
.w1030 {width: 1030px;}
.w1094 {width: calc(1094px + 4%);}
.w1100 {width: 1100px;}
.w1100_p {width: calc(1100px + 4%)}
.w1124 {width: calc(1124px + 4%);}
.w1140 {width: 1140px;}
.w1154 {width: 1154px;}
.w1222 {width: 1222px;}
.w1222 {width: calc(1728px + 4%);}
.w1550 {width: 1550px;}
.w1736 {width: 1736px;}

/* テキストの大きさ */
.font_Xs { font-size: 12px; line-height: 24px; letter-spacing: 1px;}
.font_S { font-size: 16px; line-height: 32px; letter-spacing: 2px;}
.font_R { font-size: 15px; line-height: 34px; letter-spacing: 3px;}
.font_M { font-size: 22px; line-height: 31px; letter-spacing: 4px;}

/* テキストの太さ */
.fontW_R { /* Regular */ font-weight: 400;}
.fontW_M { /* Midium */ font-weight: 500;}
.fontW_Sb { /* Semi-Bold */ font-weight: 600;}

/* ボタン */
.btn_more {
  width: 283px;
  max-width: 100%;
  background: var(--C_red);
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.52em;
  position: relative;
  outline: none;
  overflow: hidden;
}
.btn {
  position: relative;
  outline: none;
  overflow: hidden;
}
.btn_more::before,
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(230,0,18,0) 0%, rgba(242,101,81,.3) 100%);
  transform: skewX(-25deg);
}
.btn_more:hover::before,
.btn:hover::before {
  animation: shine 0.7s;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* リスト装飾の種類 */
.list-style {
  display: flex;
  margin-bottom: 14px;
}
.list-style::before {
  display: block;
  padding-right: 10px;
}
.list-style--square::before {
  content: '■';
}
@media screen and (max-width: 767px) {
  .list-style {
    margin-bottom: 0;
  }
  .list-style::before {
    padding-right: 6px;
  }
}

/* 背景 */
.bg_dot {
  background-image: url(../img/common/bg_dot.jpg);
}
@media screen and (max-width: 767px) {
  .bg_dot {
    background-size: 4%;
  }
}
.bg_gray {
  background: #1a1a1a;
}
.bg_black {
  background: #000;
}

/* ===============================
	page
 =============================== */
/* 共通タイトル部分 */
#mv {
  position: relative;
  height: clamp(120px,300 / 1222 * 100vw,300px);
  max-height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mv .wrap {
  text-align: center;
}
#mv .wrap > img {
  height: auto;
}

@media screen and (min-width: 768px) {
  #mv .emergency {
    bottom: clamp(-52px,-52 / 1222 * 100vw,26px);
  }
}

/* ===============================
	emergency
 =============================== */
.emergency {
  width: 17.714%;
  max-width: 218px;
  height: auto;
  position: absolute;
  bottom: 30px;
  margin-left: -2.5%;
}
.emergency img {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1920px) {
  .emergency {
    margin-left: 0.5%;
  }
}
@media screen and (max-width: 767px) {
  .emergency {
    position: fixed;
    width: 34%;
    right: 4%;
    bottom: 1.5%;
    z-index: +1;
  }
}

/* ===============================
	news
 =============================== */
#section__news {
  margin-top: clamp(65px,130 / 1100 * 100vw,130px);
}
#section__news .wrap {
  display: flex;
  margin-bottom: clamp(25px,50 / 1100 * 100vw,50px);
}
#section__news h2 {
  width: 22.54545454545455%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#section__news ul {
  width: calc(100% - 22.54545454545455%);
}
#section__news li {
  border-bottom: #000 1px solid;
  margin-top: clamp(14px,28 / 1100 * 100vw,28px);
  padding-bottom: clamp(8px,16 / 1100 * 100vw,16px);
}
#section__news li a {
  display: flex;
  align-items: center;
}
#section__news time {
  font-size: 16px;
  margin-right: clamp(10px,20 / 1100 * 100vw,20px);/*clamp(20px,40 / 1100 * 100vw,40px);*/
}
#section__news span {
  font-size: 11px;
  font-weight: 500;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 94px;
  display: block;
  text-align: center;
  padding: 1px;
  height: fit-content;
  margin-right: clamp(36px,72 / 1100 * 100vw,72px);/*clamp(7px,14 / 1100 * 100vw,14px);*/
  position: relative;
}
#section__news strong {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
.category_01 {
  color: var(--C_red);
  background: #fff;
  border-color: var(--C_red);
}
.energy {
  color: #fff;
  background: #ff7a00;
  border-color: #ff7a00;
}
.reform {
  color: #fff;
  background: #cc8a2c;
  border-color: #cc8a2c;
}
.coin_laundry {
  color: #fff;
  background: #00a8a2;
  border-color: #00a8a2;
}
.aquaclara {
  color: #fff;
  background: #00a8ff;
  border-color: #00a8ff;
}
#section__news .new span::after {
	content: 'NEW';
	color: var(--C_red);
	font-size: clamp(12px,15 / 1154 * 100vw,15px);
	font-weight: 500;
	line-height: 1;
	position: absolute;
	right: clamp(-56px,-56 / 1154 * 100vw,-40px);
	bottom: 0;
}
@media  (max-width: 1100px) and (min-width: 768px) {
  #section__news .wrap {
    padding: 0 4%;
  }
}
@media screen and (max-width: 767px) {
  #section__news {
    margin-top: 80px;
  }
  #section__news .wrap {
    display: block;
  }
  #section__news h2 {
    width: 100%;
    margin-bottom: 40px;
  }
  #section__news ul {
    width: 100%;
  }
  #section__news li:first-of-type {
    border-top: #000 1px solid;
    padding-top: 28px;
  }
  #section__news li a {
    display: block;
  }
  #section__news time {
    margin-right: 20px;
  }
  #section__news span {
    margin-right: 0;
    display: inline-block;
  }
  #section__news strong {
    display: block;
    margin-top: 10px;
  }
}