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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

:root {
	/*サイズ・配置・形状*/
	--border-radius-s: 2px;
	--border-radius-reg: 8px;
	/*文字サイズ*/
	--font-size-01: .8125em;/*1.3rem*/
	--font-size-02: .875em;/*1.4rem*/
	--font-size-03: .9375em;/*1.5rem*/
	--font-size-reg: 1.6rem;
	--font-size-04: 1.125em;/*1.8rem*/
	--font-size-05: 1.34em;/*2rem*/
	--font-size-06: 1.5625em;/*2.5rem*/
	--font-size-07: 1.875em;/*3rem*/
	--font-size-08: 2.1875em;/*3.5rem*/
	@media (max-width: 767px) {
		--font-size-01: .8em;/*1.2rem*/
		--font-size-02: .867em;/*1.3rem*/
		--font-size-03: .934em;/*1.4rem*/
		--font-size-reg: 1.5rem;
		--font-size-04: 1.14em;/*1.7rem*/
		--font-size-05: 1.34em;/*2rem*/
		--font-size-06: 1.6em;/*2.4rem*/
		--font-size-07: 1.94em;/*2.9rem*/
		--font-size-08: 2.27em;/*3.4rem*/
	}
	/*色*/
  --color-font-reg: #111;
  --color-logo: #1b6dc1;
  --color-toto: #193289;
  --color-gr-01: #20b743;
	--color-lbl-01: #cde3fb;
	--color-lbl-02: #f7ffff;
	--color-gy-01: #dadada;
	--color-gy-02: #aaa;
	/*フィルター*/
	--filter-font-reg: brightness(0) saturate(100%) invert(18%) sepia(12%) saturate(7%) hue-rotate(72deg) brightness(97%) contrast(95%);
	--filter-toto: brightness(0) saturate(100%) invert(15%) sepia(75%) saturate(2614%) hue-rotate(221deg) brightness(86%) contrast(97%);
	--filter-logo: brightness(0) saturate(100%) invert(26%) sepia(83%) saturate(1550%) hue-rotate(199deg) brightness(96%) contrast(92%);; 
}





/*共通 *****************************************************************/
* { box-sizing: border-box; margin: 0; padding: 0; }
img { width: 100%; }
a { color: inherit; text-decoration: none; }
ul,li { list-style: none; }

html { font-size: 62.5%;/* scroll-behavior: smooth;*/ }
body {
	width: 100%; min-width: 360px; background: var(--color-lbl-02); font-family: "Lato", "Zen Kaku Gothic New", sans-serif; font-size: var(--font-size-reg); line-height: 1.6; color: var(--color-font-reg); }
main { min-height: 80vh; }
h1,h2,h3 { font-weight: bold; }
h2 {
	margin-top: 16px; margin-bottom: 24px; font-size: var(--font-size-06); letter-spacing: .2em; position: relative; }
h2 .en {
	font-size: var(--font-size-reg); letter-spacing: .2em; color: var(--color-gy-01); position: absolute; bottom: 102%; left: 0; }
h3 { font-size: var(--font-size-reg); }

/*共通class*/
.flex { display: flex; }
.cont-wrap { width: 85%; min-width: 640px; margin: 0 auto; padding-top: 88px; }
.cont-wrap.narrow { width: 70%; }

.text-sml { font-size: var(--font-size-01); }
.text-mark { display: inline-block; padding-left: 1.2em; position: relative; }
.text-mark::before { content: "・"; position: absolute; left: 0; top: 0; }
.text-mark.caution::before { content: "※"; }

.text-link { color: var(--color-logo); text-decoration: underline; }
.newtab-link::after,
.arw-link::after {
	content: ""; display: inline-block; width: .7em; height: .7em; padding-left: .7em;
	background-position: top center; background-size: contain; background-repeat: no-repeat; }
.arw-link::after {
	background-image: url("../images/icon-arrow.svg"); filter: var(--filter-font-reg); }
.newtab-link::after { background-image: url("../images/icon_new-window.svg"); filter: var(--filter-logo); }

.button a {
	display: block; width: 100%; padding: 1.2em 32px 1.2em 16px; border-radius: var(--border-radius-s); background: var(--color-gr-01); text-align: center; font-weight: bold; line-height: 1; color: #fff; position: relative; }
.button a::after {
	content: ""; display: block; width: 5%; min-width: 8px; max-width: 12px; height: 100%; background: url("../images/icon-arrow.svg") center / contain no-repeat; position: absolute; top: 50%; right: 5%; translate: 0 -50%; }
.button.oval a { border-radius: 999px; }
.button.newtab a::after { background-image: url("../images/icon_new-window.svg"); }

.bg-box { position: relative; }
.bg-img {
	width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -5; }
.bg-img.contain { background-size: contain; }
.bg-img.wave {
	background-image: url("../images/wave.svg"); background-color: var(--color-toto); }

/*トップページ以外のMV（h1とパンくず）設定*/
.underpage #mv .cont-wrap {
	justify-content: space-between; align-items: center; padding: 64px 0; }
.underpage h1 {
	font-size: var(--font-size-08); line-height: 1; letter-spacing: .1em; color: #fff; }
.underpage h1 .text-sml { font-size: var(--font-size-reg); }
.underpage .breadcrumb {
	justify-content: flex-end; align-items: center; gap: 0 12px; color: #fff; }
.underpage .breadcrumb-item { font-size: var(--font-size-01); }
.underpage .breadcrumb-item::after {
	content: ">"; display: inline-block; padding-left: 12px; }
.underpage .breadcrumb-item:last-child::after { content: none; }


@media (max-width: 767px) {
	.cont-wrap { min-width: 320px; max-width: 640px; }
	.cont-wrap.narrow { width: 86%; }
	.bg-img.wave { background-size: 888px; background-position: center 85%;  }
}
@media (max-width: 600px) {
	.cont-wrap { padding-top: 104px; }
	.underpage #mv .cont-wrap {
		flex-direction: column; align-items: baseline; padding: 16px 0; }
	.underpage h1 { order: 2; }
	.underpage .breadcrumb { order: 1; width: 100%; margin-bottom: 40px; }
}
@media (max-width: 520px) {
	.cont-wrap { max-width: 384px; }
	.cont-wrap.narrow { width: 90%; }
	.underpage #mv .cont-wrap { max-width: none; }
}


/*ローディング画面 --------------------*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #000000cc;
	z-index: 999999999;
}
.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}


/*ふわっと表示 --------------------*/
.fuwa { opacity: 0; }
.fuwa.inview {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


/*レスポンシブ時の非表示設定 --------------------*/
.display-none,
.min961-none,
.min768-none,
.min521-none,
.min429-none { display: none; }

@media (max-width: 960px) {
	.min961-none { display: block; }
}
@media (max-width: 767px) {
	.min768-none { display: block; }
}
@media (max-width: 520px) {
	.min521-none { display: block; }
}
@media (max-width: 428px) {
	.min429-none { display: block; }
}





/*ヘッダー *****************************************************************/
#header {
	background: #fff; box-shadow: 0 2px 8px #00000033; position: sticky; top: 0; z-index: 999; transition: .8s; }
#header.hide { transform: translateY(-100%); }

/*ロゴ・社名・バーガー --------------------*/
.head-top { justify-content: space-between; padding: 0 1%; }
.head-top .name-box { align-items: center; gap: 0 4px; width: calc(100% - 224px); }
/*ロゴ -----*/
.head-top .logo { width: 64px; height: 64px; margin-top: 4px; }
.head-top .logo .bg-img { background-image: url("../images/logo.svg"); }
/*社名 -----*/
.head-top .company-name {
	margin-right: 8px; font-weight: bold; font-size: var(--font-size-04); color: var(--color-logo); }
.head-top .company-name .text-sml {	padding-left: .25em; }
.head-top .title { align-items: center; width: calc(100% - 64px); line-height: 1.3; }
.head-top .title .aff { font-size: var(--font-size-02); }
/*バーガー -----*/
.toggle-menu { display: none; }


/*Gナビ、問い合わせボタン --------------------*/
.head-bottom { padding: 0 1.5% 4px; }
.head-bottom .gnav { justify-content: center; }
.head-bottom .gnav-item {
	width: 13%; min-width: 112px; border-right: 1px solid var(--color-gy-02); font-weight: bold; }
.head-bottom .gnav-item:first-child { border-left: 1px solid var(--color-gy-02); }
.head-bottom .gnav-item a {
	display: block; margin: 0 4px; padding: 4px; font-size: var(--font-size-02); white-space: nowrap; text-align: center; transition: .3s; }
.head-bottom .button { position: absolute; top: 8px; right: 1.5%; }
.head-bottom .button a {
	width: 232px; padding-left: 8px; padding-right: 24px; font-size: var(--font-size-02); }

@media (hover: hover) {
	.head-bottom .gnav-item a:hover {
		border-radius: var(--border-radius-s); background: var(--color-lbl-01); color: var(--color-toto); }
}

@media (min-width: 961px) {
	.head-top .company-name { font-size: var(--font-size-05); }
	.head-top .company-name .text-sml { font-size: var(--font-size-reg); }
}
@media (max-width: 834px) and (min-width: 767px) {
	.head-top .title .aff .display-none { display: block; }
}
@media (max-width: 767px) {
	.toggle-menu {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px 0; width: 48px; height: 48px; position: absolute; top: 8px; right: 1%; cursor: pointer; transition: transform 0.3s; }
	.toggle-menu span {
		display: inline-block; width: 30%; height: 2px; background: var(--color-logo); margin-bottom: 4px; transition: all 0.3s; }
	.toggle-menu.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg); }
	.toggle-menu.active span:nth-child(2) { opacity: 0; }
	.toggle-menu.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg); }
	
	.head-top {
		background: #fff; position: relative; z-index: 9999; }
	.head-top .name-box { width: calc(100% - 48px); }
	.head-top .title .aff .min961-none { display: none; }
	.head-bottom {
		 width: 0; height: 100svh; padding: 120px 0 0; background: #000000ee; position: absolute; top: 0; right: 0; z-index: 999; transition: ease .8s; }
	.head-bottom.active { width: 100%; max-width: 392px; }
	.head-bottom .gnav { display: none; justify-content: flex-start; }
	.head-bottom.active .gnav { display: flex; flex-direction: column; height: 100%;  }
	.head-bottom .gnav-item {
		width: 100%; padding: 1.5svh 0; border-right: none; color: #fff; }
	.head-bottom .gnav-item:first-child { border-left: none; }
	.head-bottom .gnav-item a {
		margin: 0 24px; padding-left: 10%; text-align: left; font-size: var(--font-size-reg); }
	.head-bottom .button {
		width: 87%; margin-top: 3svh; padding-left: 13%; position: relative; }
	.head-bottom .button a { width: 280px; font-size: var(--font-size-reg); }
}

@media (max-width: 600px) {
	.head-top { padding-bottom: 8px; }
	.head-top .name-box { align-items: flex-start; }
	.head-top .title { flex-wrap: wrap; margin-top: 12px; }
	.head-top .aff { width: 100%; margin-top: 2px; padding-left: .25em; }
	.head-bottom { padding-top: 144px; padding-bottom: 64px; }
}





/*フッター *****************************************************************/

/*CVRエリア --------------------*/
.foot-top .cont-wrap {
	justify-content: space-between; width: 85%; max-width: 1000px; padding: 64px 0; }
/*キャッチコピー -----*/
.foot-top .catch-copy {
	width: calc(98% - 336px); font-size: clamp(2.5rem, 1vw + 1.5rem, 3.5rem); font-weight: bold; line-height: 2.5; white-space: nowrap; color: #fff; }
/*ボタンエリア -----*/
.foot-top .btn-list { width: 336px; color: #fff; }
.foot-top .btn-list .title {
	width: 96px; padding-top: 8px; font-size: var(--font-size-03); font-weight: bold; }
.foot-top .btn-list .btn { width: calc(100% - 96px); }
.foot-top .btn-list .button a { padding-left: 16px; text-align: left; }
/*お問い合わせボタン*/
.foot-top .link-contact { margin-bottom: 48px; }
.foot-top .link-contact .telno { margin-top: 8px; line-height: 1.3; }
.foot-top .link-contact .telno a {
	pointer-events: none; font-size: var(--font-size-06); font-weight: bold; }
.foot-top .link-contact .telno .text-sml { white-space: nowrap; }
/*修理相談ボタン*/
.foot-top .link-broken .button a { padding-top: 1em; padding-bottom: .9em; }
.foot-top .link-broken .text-sml {
	display: block; margin-top: 6px; font-weight: normal; }

@media (max-width: 960px) {
	@media (min-width: 768px) {
		.foot-top .catch-copy .display-none { display: block; }
	}
}
@media (max-width: 767px) {
	.foot-top .cont-wrap { flex-wrap: wrap; padding: 48px 0; }
	.foot-top .catch-copy,
	.foot-top .btn-list { width: 100%; }
	.foot-top .catch-copy {
		margin-bottom: 72px; font-size: clamp(2.3rem, 1.7vw + 1.5rem, 2.8rem); }
	
	@media (min-width: 521px) {
		.foot-top .contact-area { display: flex; align-items: flex-start; gap: 0 4%; }
		.foot-top .contact-area .btn-list { flex-wrap: wrap; width: 48%; }
		.foot-top .btn-list .title,
		.foot-top .btn-list .btn { width: 100%; }
		.foot-top .btn-list .title { padding-top: 0; margin-bottom: 4px; }
		.foot-top .btn-list .title br { display: none; }
		.foot-top .link-contact { margin-bottom: 0; }
		.foot-top .link-contact .button a {
			padding-top: 1.55em; padding-bottom: 1.55em; }
	}
}
@media (max-width: 520px) {
	.foot-top .cont-wrap { justify-content: center; padding-bottom: 64px; }
	.foot-top .catch-copy { max-width: 336px; margin-bottom: 48px; line-height: 2; }
	.foot-top .catch-copy .display-none { display: block; }
	.foot-top .link-contact { margin-bottom: 24px; }
}





/*社名・ナビゲーションのエリア --------------------*/
.foot-bottom { background: #fff; }
.foot-bottom .cont-wrap { padding: 40px 0 16px; }
.foot-bottom .inner { justify-content: space-between; }

/*社名などのエリア -----*/
.foot-bottom .name-box .left-area { line-height: 1.3; }
.foot-bottom .name-box .name {
	margin-bottom: 8px; font-weight: bold; font-size: var(--font-size-05); color: var(--color-logo); }
.foot-bottom .name-box .name span {
	padding-left: .25em; font-size: var(--font-size-reg); }
/*TOTOリンク*/
.foot-bottom .toto-link { gap: 0 2%; margin-top: 24px; }
.foot-bottom .toto-link .link-item { height: 48px; }
.foot-bottom .toto-link img { width: auto; height: 100%; }
.foot-bottom .toto-link .mainte { border: 1px solid var(--color-toto); }
.foot-bottom .toto-link .mainte a {
	display: flex; align-items: center; justify-content: center; min-width: 184px; height: 100%; padding: 0; background: #fff; text-align: left; line-height: 1.2; font-size: var(--font-size-01); color: var(--color-toto); white-space: nowrap; }
.foot-bottom .toto-link .mainte a::after { content: none; }
/*ロゴマーク*/
.foot-bottom .name-box .logo { width: 104px; height: 104px; }
.foot-bottom .name-box .logo .bg-img {
	margin-top: -16px; background-image: url("../images/logo.svg"); z-index: 1; }

/*ナビゲーションとSAFEのエリア -----*/
.foot-bottom .nav-box { align-items: flex-end; margin-top: 40px; }
/*ナビゲーション*/
.foot-bottom .nav {
	gap: 0 5%; width: calc(99% - 320px); font-size: var(--font-size-03); }
.foot-bottom .nav-item { font-weight: bold; line-height: 1; }
/*SAFEリンク*/
.foot-bottom .link-safe { width: 320px; }
.foot-bottom .link-safe a { display: flex; align-items: center; gap: 0 16px; }
.foot-bottom .link-safe .image { height: 48px; }
.foot-bottom .link-safe .image img { width: auto; height: 100%; }
.foot-bottom .link-safe .text-sml {
	padding: 8px 4%; background: var(--color-lbl-01); border-radius: var(--border-radius-s); text-align: justify; line-height: 1.3; position: relative; }
.foot-bottom .link-safe .text-sml::before {
	content: ""; display: block; border: 12px solid transparent; border-right-color:  var(--color-lbl-01); position: absolute; right: 99%; top: 50%; translate: 0 -50%; }

@media (max-width: 834px) {
	.foot-bottom .nav { width: calc(98% - 96px); }
	.foot-bottom .link-safe { width: 96px; }
	.foot-bottom .link-safe .text-sml { display: none; }
}
@media (max-width: 767px) {
	.foot-bottom .cont-wrap { padding-top: 16px; }
	.foot-bottom .name-box { flex-wrap: wrap; }
	.foot-bottom .left-area { order: 2; width: 100%; }
	.foot-bottom .name-box .logo { order: 1; width: 100%; height: 80px; }
	.foot-bottom .name-box .logo .bg-img {
		margin-top: 0; background-position: right; }
}
@media (max-width: 520px) {
	.foot-bottom .toto-link .link-item { width: 49%; height: auto; }
	.foot-bottom .toto-link .mainte a { min-width: auto; }
	.foot-bottom .toto-link img { display: block; width: 100%; height: auto; }
	.foot-bottom .nav-box { margin-top: 16px; }
	.foot-bottom .nav { display: none; }
	.foot-bottom .link-safe .image { height: 56px; }
	
}


/*コピーライトと社会貢献活動のエリア --------------------*/
#footer .foot-copy { background: var(--color-gy-01); }
.foot-copy .cont-wrap { justify-content: space-between; }
.foot-copy .cont-wrap.top-box { padding: 24px 0 40px; }

/*社会貢献活動と住所など -----*/
.foot-copy .address-area { font-size: var(--font-size-03); }
.foot-copy .sca-area .text-sml { margin-bottom: 4px; }
.foot-copy .sca-link { justify-content: flex-end; gap: 0 2%; }
.foot-copy .sca-link .link-item {
	height: 48px; border: 1px solid var(--color-gy-02); }
.foot-copy .sca-link .link-item a {
	display: flex; align-items: center; justify-content: center; min-width: 184px; height: 100%; padding: 4px 0; white-space: nowrap; }
.foot-copy .sca-link .musubie a { background: #fff; }
.foot-copy .sca-link .musubie img { width: auto; height: 100%; }
.foot-copy .sca-link .sekijuji a {
	background: #e60012; text-align: left; font-size: var(--font-size-01); }
.foot-copy .sca-link .sekijuji a::after { content: none; }

/*コピーライトと個人情報保護方針 -----*/
.foot-copy .cont-wrap.bottom-box { padding: 0 0 8px; }

@media (max-width: 960px) {
	.foot-copy .address-area { display: none; }
	.foot-copy .sca-link { justify-content: flex-start; }
}
@media (max-width: 520px) {
	#footer .foot-copy { background: none; }
	.foot-copy .sca-link .link-item { width: 49%; height: auto; }
	.foot-copy .sca-link .link-item a { min-width: auto; }
	.foot-copy .sca-link .musubie img { width: 80%; height: auto; }
	.foot-copy .cont-wrap.bottom-box {
		flex-wrap: wrap; width: 100%; max-width: none; padding: 0; }
	.foot-copy .policy { margin-bottom: 4px; padding-left: 3%; }
	.foot-copy .copyright {
		width: 100%; padding: 4px 3% 12px; background: var(--color-gy-01); }
}