@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (max-width: 899px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 1300px) {}

/*----------------------------------------------------------
   normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
----------------------------------------------------------*/
/* Document */
html{line-height:1.15;-webkit-text-size-adjust:100%}
/* Sections */
body{margin:0}
main{display:block}
/* Grouping content */
hr{box-sizing:content-box;height:0}
pre{font-family:monospace,monospace;font-size:1em}
/* Text-level semantics */
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
/* Embedded content */
img{border-style:none}
/* Forms */
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button; appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:0.35em 0.75em 0.625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield; appearance:textfield; outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* Interactive */
details{display:block}
summary{display:list-item}
/* Misc */
template{display:none}
[hidden]{display:none}

/* reset
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, p, table, th, td, time { margin: 0; padding: 0; font-size: inherit;}
h1, h2, h3, h4, h5, h6, em, b { font-weight: inherit;}
em, b, i { font-style: inherit;}
li { list-style: none;}
figure { margin: 0;}
img { vertical-align: top; width: 100%; height: auto; background-color: rgba(255, 255, 255, .01);}
table { border-collapse: collapse; border-spacing: 0;}
input, select, textarea { font-size: max(1.8rem, 18px); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: transparent;}
input:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder { color: transparent;}
input:focus::placeholder, textarea:focus::placeholder { color: transparent;}
button { margin: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: 0 0 0 0 transparent; cursor: pointer;}

/*----------------------------------------------------------
   custom
----------------------------------------------------------*/
:root {
  --w_max: 1260;
  --w_full: 1300;
  --w_tb: 768;
  --w_sp: 375;
  --c_white: #fff;
  --c_black: #555;
  --c_gray: #dcdddd;
  --c_primary: #0055a7;
  --c_second: #228000;
  --c_text: #444;
  --c_link: #007943;
  --c_link_hover: #005a30;
}

/*----------------------------------------------------------
   base
----------------------------------------------------------*/
html {
  position: relative;
  height: 100dvh;
  font-size: min(2.6667vw, 62.5%);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Droid Sans", "Yu Gothic", YuGothic, "\30E1\30A4\30EA\30AA", Meiryo, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN", "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  text-align: center;
  position: relative;
  min-height: 100dvh;
  background-color: var(--c_white);
  color: var(--c_text);
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  outline: none;
  opacity: 1;
  transition: all .3s;
  backface-visibility: hidden;
}
a::after,
a::before {
  transition: all .3s;
  backface-visibility: hidden;
}
a img {
  vertical-align: top;
  background-color: rgba(255, 255, 255, .01);
}

.skip { position: absolute; left: -9999px;}
.hide { display: none;}
.left { float: left;}
.right { float: right;}
.clear { clear: both;}
.cf::after { clear: both; content: ""; display: block;}
.txtr { text-align: right;}
.txtc { text-align: center;}
.ib { display: inline-block;}
.wb { word-break: keep-all; overflow-wrap: break-word; line-break: normal;}
.em { color: var(--c_em);}

.sp01 { margin-top: .5em;}
.sp02 { margin-top: 1em;}
.sp03 { margin-top: 1.5em;}
.sp04 { margin-top: 2em;}
.sp05 { margin-top: 2.5em;}

.sp { display: block;}
.pc { display: none;}
.noscript-text { padding: 1em;}

/* common */
section { position: relative; display: block;}
section::after { clear: both; content: ""; display: block;}
section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
.inner, .header-inner {
  text-align: left;
  position: relative;
  margin-inline: auto;
}
.inner {
  max-width: calc(var(--w_max) * 1px);
  padding-inline: 1.8rem;
}
.inner * { box-sizing: border-box;}

@media screen and (min-width: 768px) {
  html { font-size: clamp(50%, 50% + ((1vw - 7.68px) * 0.3759), 62.5%);} /* 768px => 1300px | 8px => 10px */
  body { font-size: 2.0rem;}
  .sp { display: none;}
  .pc { display: block;}
}
@media screen and (min-width: 900px) {
  .inner {
    padding-inline: 20px;
  }
}

/* module
----------------------------------------------------------*/
/* grid */
.grid {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .grid {
    flex-direction: row;
    justify-content: space-between;
  }
  .grid-rev {
    flex-direction: row-reverse;
  }
}

/* link__btn */
.link__btn {
  text-align: center;
  position: relative;
  display: block;
  padding-block: 2.0rem;
  background-color: var(--c_link);
  color: var(--c_white);
  font-size: 1.8rem;
}
.link__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: -.6rem;
  border: 0px;
  border-top: solid 1px var(--c_white);
  border-right: solid 1px var(--c_white);
  transform: rotate(45deg);
}
@media (any-hover: hover) {
  .link__btn:hover {
    background-color: var(--c_link_hover);
  }
}
@media screen and (min-width: 900px) {
  .link__btn::after {
    right: 3.2rem;
  }
}
@media screen and (max-width: 425px) {
  .link__btn {
    font-size: 1.6rem;
  }
}

/*----------------------------------------------------------
   layout
----------------------------------------------------------*/
/* header
----------------------------------------------------------*/
#l-header .inner {
	padding-inline: min(calc(10 / var(--w_sp) * 100vw), 2.0rem);
}
.header__logo {
	position: relative;
	width: fit-content;
	margin-block: 1.4rem;
}
.header__logo a {
	display: block;
}
.header__logo img {
	width: 11.7rem;
	height: auto;
}
@media screen and (min-width: 768px) {
  .header__logo {
    margin-block: 2.0rem;
  }
  .header__logo img {
    width: 156px;
  }
}

/* #l-main
----------------------------------------------------------*/
#l-main {
  padding-bottom: 4.8rem;
}
@media screen and (min-width: 768px) {
  #l-main {
    padding-bottom: 9.6rem;
  }
}

/* #intro */
#intro {
  margin-block: 4.8rem 10.8rem;
}
#intro .grid {
  justify-content: space-around;
  align-items: center;
  gap: 2.4rem;
}
.intro__content {
  display: flex;
  flex-direction: column;
}
.intro__title {
  padding-bottom: 1.0rem;
  font-size: 3.2rem;
  line-height: 1.5;
}
.intro__title em {
  color: var(--c_primary);
  font-size: calc(48 / 38 * 1em);
  font-weight: 700;
}
.intro__image {
  width: min(70%, 32.8rem);
}
@media screen and (min-width: 768px) {
  #intro {
    margin-block: 6.8rem 12.8rem;
  }
  .intro__title {
    font-size: 3.8rem;
  }
  .intro__text {
    align-self: flex-end;
    width: min(calc(500 / var(--w_tb) * 100vw), 74.0rem);
  }
  .intro__image {
    width: 32.8rem;
    margin-top: -.4rem;
  }
}
@media screen and (min-width: 1200px) {
  #intro .grid {
    gap: .2rem;
  }
  .intro__title {
    padding-right: 1em;
  }
  .intro__text {
    padding-right: .15em;
  }
}

/* .point */
.point .inner {
  padding-block: 5.8rem 2.4rem;
}
.point .grid {
  gap: 2.0rem;
}
.point .grid>div {
  width: 100%;
}
.point .grid+.grid {
  margin-top: 4.0rem;
}
.point__title {
  position: absolute;
  top: -3.6rem;
  display: flex;
  align-items: center;
  width: calc(100% - 3.6rem);
  height: 7.6rem;
  padding: 0 1.8rem;
  border-radius: .8rem;
  color: var(--c_white);
  font-size: 1.5rem;
  line-height: 1.5;
}
.point__title em {
  position: relative;
  display: inline-block;
  padding-right: 2.0rem;
  font-size: 2.5rem;
}
.point__title em::after {
	content: "";
  position: absolute;
  top:  calc(50% - .5em + 2px);
  right: 1.0rem;
	width: 1px;
	height: 1em;
  background-color: var(--c_white);
}
.point__text {
  align-self: center;
}
.point-text__wrap {
  width: fit-content;
  margin-inline: auto;
}
.point-text__wrap p {
  color: var(--c_black);
}
.point-text__wrap p+p {
  margin-top: 1.2em;
}
@media screen and (min-width: 768px) {
  .point .inner {
    padding-block: 10.8rem calc(30 / 768 * 100vw);
  }
  .point .grid>div {
    width: 50%;
  }
  .point .grid+.grid {
    margin-top: 6.0rem;
  }
  .point__title {
    top: -3.2rem;
    width: fit-content;
    height: 11.6rem;
    padding: 0 4.8rem;
    font-size: 2.8rem;
    line-height: 1;
  }
  .point__title em {
    padding-right: 3.3rem;
    font-size: 4.0rem;
  }
  .point__title em::after {
    right: 1.6rem;
  }
  .point-text__wrap {
    padding-top: .8rem;
  }
}
@media screen and (min-width: 1300px) {
  .point .inner {
    padding-bottom: min(calc(132 / 1440 * 100vw), 13.2rem);
  }
}

/* .point#knead */
#knead {
  background-color: #ecf8ff;
}
#knead .point__title {
  background-color: var(--c_primary);
}
@media screen and (min-width: 900px) {
  #knead .point-text__wrap {
    padding-right: 2em;
  }
}
/* .point#coating */
#coating {
  margin-top: 9.6rem;
  background-color: #f1fced;
}
#coating .point__title {
  background-color: var(--c_second);
}
@media screen and (min-width: 768px) {
  #coating .point-text__wrap {
    padding-right: 1em;
  }
}

/* .note__area */
.note__area {
  margin-top: 2.8rem;
}
.note__area .note__wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: solid 1px var(--c_black);
  background-color: var(--c_gray);
}
.note__area .note__wrap>dt {
  width: fit-content;
  padding-inline: 1.0rem;
  font-size: 1.6rem;
  white-space: nowrap;
}
.note__area .note__wrap>dd {
  flex-grow: 2;
  padding: .7rem 1.3rem;
  border-left: solid 1px var(--c_black);
  background-color: var(--c_white);
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .note__area {
    margin-top: 4.8rem;
  }
  .note__area .note__wrap>dt {
    padding-inline: 1.6rem;
    font-size: 2.4rem;
  }
  .note__area .note__wrap>dd {
    padding: .7rem 2.0rem;
    font-size: 2.0rem;
    line-height: 1.4;
  }
  .note__area .note__content>dt,
  .note__area .note__content>dd {
    display: inline-block;
  }
  .note__area .note__content>dd {
    margin-left: 1.4rem;
  }
}

/* #airlight */
#airlight {
  margin-top: 4.8rem;
}
#airlight .inner {
  width: fit-content;
}
.airlight__block {
  width: fit-content;
  margin-inline: auto;
  padding: 2.4rem 2.0rem 2.0rem;
  border-radius: 1.0rem;
  border: solid 3px #0068b6;
}
.airlight__title {
  max-width: 38.0rem;
  margin-inline: auto;
  padding-bottom: 1.9rem;
  color: #0068b6;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.5;
}
.airlight__block li {
  max-width: 40.0rem;
}
.airlight__block .grid {
  align-items: center;
  gap: 2.0rem;
}
.airlight__link {
  margin: 4.8rem auto 0;
}
.airlight__link .grid {
  gap: 2.4rem;
}
.airlight__link li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .airlight__block {
    padding: 2.8rem 4.5rem 2.9rem;
    border-radius: 1.6rem;
  }
  .airlight__title {
    text-align: center;
    max-width: fit-content;
    padding-bottom: 2.3rem;
    font-size: 2.4rem;
  }
  .airlight__block .grid {
    gap: 4.8rem;
  }
  .airlight__link {
    width: fit-content;
    margin: 9.6rem auto 0;
  }
  .airlight__link li {
    width: min(calc(480 / var(--w_max) * 100vw), 48.0rem);
  }
}

/* footer
----------------------------------------------------------*/
#l-footer {
  padding: 3.2rem 2.4rem;
  background: #222;
  color: #fff;
}
.footer_inner {
  text-align: left;
  max-width: 920px;
  margin: 0 auto;
}
.footer_contact {
  padding: 32px 24px;
  background: #444;
}
.footer_contact_info {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 32px;
}
.footer_contact_info_item_data {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 700;
}
.footer_contact_info_item_data.footer_contact_info_item_data__num {
  margin-top: 7px;
  font-size: 1.6rem;
  line-height: 1;
}
.footer_contact_info_item_note {
  width: 100%;
  margin-top: 13px;
}
.footer_contact_info_item_note_text {
  font-size: 1rem;
}
.footer_contact_info_reception_data {
  font-size: 1.2rem;
  line-height: 1.9;
}
.footer_contact_info_reception_data__title::after {
  display: inline-block;
  content: "：";
}
.footer_contact_toMailform {
  padding-top: 32px;
  border-top: solid 1px #787878;
}
.footer_contact_toMailform_link {
  text-align: center;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 9px 6.0rem;
  border: solid 1px #fff;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 500;
  transition: opacity 0.3s;
}
.footer_contact_toMailform_link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background-image: url(../images/arrow-next.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.footer_contact_toMailform_link:hover {
  opacity: 0.6;
}
.footer_copy {
  text-align: center;
  margin-top: 30px;
}
.footer_copy_text {
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2.8;
}

@media screen and (min-width: 768px) {
  footer {
    padding: min(2.21429vw, 31px) min(2.85714vw, 40px) min(2.85714vw, 40px);
  }
  .footer_contact {
    padding: 48px 40px;
  }
  .footer_contact_info {
    gap: 25px;
  }
  .footer_contact_info_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 29px 32px;
  }
  .footer_contact_info_item_data {
    font-size: 1.8rem;
    line-height: 1.1;
  }
  .footer_contact_info_item_data.footer_contact_info_item_data__num {
    margin-top: 0;
    font-size: 2.2rem;
  }
  .footer_contact_info_item_note_text {
    font-size: 1.4rem;
    line-height: 1.4;
  }
  .footer_contact_info_reception {
    display: flex;
  }
  .footer_contact_info_reception_data {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .footer_contact_toMailform_link {
    width: 400px;
    padding: 21px;
  }
  .footer_contact_toMailform_link::after {
    right: 24px;
  }
  .footer_copy {
    margin-top: 54px;
  }
  .footer_copy_text {
    font-size: 1.2rem;
    line-height: 2.3;
  }
}