@charset "UTF-8";
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; }

/* Document */
/* ============================================ */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Remove gray overlay on links for iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ }

/* Sections */
/* ============================================ */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/* Vertical rhythm */
/* ============================================ */
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; }

/* Headings */
/* ============================================ */
h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }

/* Lists (enumeration) */
/* ============================================ */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Lists (definition) */
/* ============================================ */
dt { font-weight: bold; }

dd { margin-left: 0; }

/* Grouping content */
/* ============================================ */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border-top-width: 1px; margin: 0; clear: both; color: inherit; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

address { font-style: inherit; }

/* Text-level semantics */
/* ============================================ */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; text-decoration: none; color: inherit; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content */
/* ============================================ */
/** Prevent vertical alignment issues. */
img, embed, object, iframe { vertical-align: bottom; }

/* Forms */
/* ============================================ */
/** Reset form fields to make them styleable */
button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; outline: 0; border-radius: 0; text-align: inherit; }

/** Reset radio and checkbox appearance to preserve their look in iOS. */
[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }

[type="radio"] { -webkit-appearance: radio; appearance: radio; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; -webkit-appearance: none; appearance: none; }

button[disabled], [type="button"][disabled], [type="reset"][disabled], [type="submit"][disabled] { cursor: default; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Remove arrow in IE10 & IE11 */
select::-ms-expand { display: none; }

/** Remove padding */
option { padding: 0; }

/** Reset to invisible */
fieldset { margin: 0; padding: 0; min-width: 0; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the outline style in Safari. */
[type="search"] { outline-offset: -2px; /* 1 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/** Clickable labels */
label[for] { cursor: pointer; }

/* Interactive */
/* ============================================ */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Remove outline for editable content. */
[contenteditable] { outline: none; }

/* Table */
/* ============================================ */
table { border-collapse: collapse; border-spacing: 0; }

caption { text-align: left; }

td, th { vertical-align: top; padding: 0; }

th { text-align: left; font-weight: bold; }

/* Misc */
/* ============================================ */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

html { overflow-x: hidden; }

body { font-size: 16px; line-height: 1.5; letter-spacing: 0.05em; width: 100vw; overflow-x: hidden; font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif; }

img { max-width: 100%; }

p { line-height: 1.8; letter-spacing: 0.08em; }

.load-hidden { visibility: hidden; }

.mb-1 { margin-bottom: 10px; }

.mb-2 { margin-bottom: 20px; }

.mb-3 { margin-bottom: 30px; }

.mb-4 { margin-bottom: 40px; }

.mb-5 { margin-bottom: 50px; }

.mx-auto { margin-left: auto; margin-right: auto; }

.d-flex { display: flex; }

.d-block { display: block; }

@media only screen and (min-width: 769px) { .d-pc-none { display: none; } }

@media only screen and (max-width: 768px) { .d-sp-none { display: none; }
  .flex-sp-column { flex-direction: column; } }

.flex-wrap { flex-wrap: wrap; }

.space-between { justify-content: space-between; }

.space-evenly { justify-content: space-evenly; }

.align-center { align-items: center; }

.position-absolute { position: absolute; }

.position-relative { position: relative; }

.text-center { text-align: center; }

h4 { font-size: 1.3em; }

figcaption { font-size: 0.9em; }

.color-main { color: #3b8f9b; }

.color-white { color: #fff; }

@media only screen and (min-width: 769px) { .container { max-width: 750px; margin-left: auto; margin-right: auto; } }

@media only screen and (max-width: 768px) { .container { padding: 0 20px; } }

.btn { padding: 10px 15px; border-radius: 4px; display: inline-block; overflow: hidden; position: relative; }

@media only screen and (max-width: 768px) { .btn { width: 80%; margin-bottom: 10px; } }

.btn:before { content: ""; background-color: #ffffff30; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 0.2s ease-in; }

.btn:after { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1px solid #fff; border-top: 1px solid #fff; transform: rotate(45deg); margin: 8px 0; float: right; }

.btn:hover:before { transform: translateX(0); }

.btn-main { background-color: #3b8f9b; color: #fff; box-shadow: 0 3px 0 #2d6d76; }

.btn-accent { background-color: #ff9751; color: #fff; box-shadow: 0 3px 0 #ff791e; }

header { background-repeat: no-repeat; background-position: center top; position: relative; overflow: hidden; }

@media only screen and (min-width: 769px) { header { background-image: url("../img/pc/main-img.jpg"); background-size: 1324px; height: 724px; } }

@media only screen and (max-width: 768px) { header { background-image: url("../img/smp/main-img.jpg"); background-size: cover; padding-top: 110%; } }

@media only screen and (max-width: 768px) { header .header-logo { display: inline-block; width: 26%; background: #fff; padding: 15px; text-align: center; left: 0; right: 0; top: 0; margin: auto; position: absolute; box-shadow: 0 0 10px #00000020; } }

@media only screen and (min-width: 769px) { header .item-1, header .item-2, header .item-3, header .item-4 { left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
  header .item-1 { transform: rotate(110deg) translate(-50px, 590px); width: 180px; }
  header .item-2 { transform: rotate(330deg) translate(580px, -40px); width: 525px; }
  header .item-3 { transform: rotate(330deg) translate(-610px, -200px); width: 260px; }
  header .item-4 { transform: translate(10px, -220px); width: 100px; } }

@media only screen and (max-width: 768px) { header .item-1 { display: none; }
  header .item-2 { transform: rotate(393deg) scale(-1, 1); width: 70%; top: -5%; left: -35%; }
  header .item-3 { transform: rotate(-45deg); width: 26%; bottom: 20%; right: -15%; }
  header .item-4 { transform: scale(-1, 1); width: 14%; top: 25%; left: 2%; }
  header .item-5 { top: -10%; right: -35%; width: 60%; transform: scale(-1, 1); } }

#newme, #step, #qa, #contact { margin: 80px 0; }

#media, #powder, #product { padding: 80px 0; }

#media { position: relative; overflow: hidden; margin-top: -60px; z-index: 1; }

#media > .item-1, #media > .item-2 { z-index: -1; }

@media only screen and (min-width: 769px) { #media > .item-1 { width: 420px; left: -210px; top: 0; }
  #media > .item-2 { width: 420px; right: -210px; top: 200px; }
  #media > .item-3 { width: 560px; right: -330px; top: 0; } }

@media only screen and (max-width: 768px) { #media > .item-1, #media > .item-2 { width: 60%; }
  #media > .item-1 { top: 0; left: -20%; }
  #media > .item-2 { bottom: 0; right: -20%; }
  #media > .item-3 { width: 60%; right: -40%; top: 0; } }

#media h1 { margin-bottom: -30px; }

#media .media-box { background-color: #fffedc; border: 1px solid #333; position: relative; z-index: -1; box-shadow: inset 0px 0px 0px 10px #fff; }

@media only screen and (min-width: 769px) { #media .media-box { padding: 50px; } }

@media only screen and (max-width: 768px) { #media .media-box { padding: 30px; margin: 0 10px; } }

#media .media-box:before { content: ""; width: 550px; height: 4px; display: block; background: #fff; position: absolute; top: -2px; left: 0; right: 0; margin: auto; }

@media only screen and (min-width: 769px) { #media .media-box .item-1 { width: 100px; left: -60px; top: -20px; }
  #media .media-box .item-2 { width: 150px; transform: rotate(220deg); bottom: 20px; right: -60px; } }

@media only screen and (max-width: 768px) { #media .media-box .item-1 { width: 15%; left: 0; top: -12%; }
  #media .media-box .item-2 { width: 180px; max-width: 35%; bottom: -10%; right: -10%; transform: rotate(-145deg); } }

#nayami { background-color: #f7f7f7; padding-bottom: 100px; box-shadow: inset 0 -6px 10px #0000000d; }

@media only screen and (max-width: 768px) { #nayami { padding-top: 40px; } }

@media only screen and (min-width: 769px) { #nayami .item-1 { right: -210px; } }

@media only screen and (max-width: 768px) { #nayami .item-1 { right: 0; width: 180px; bottom: -60px; } }

#senjo { background-image: url("../img/pc/senjo-img.jpg"); background-size: 100%; background-repeat: no-repeat; overflow: hidden; }

@media only screen and (min-width: 769px) { #senjo { padding-bottom: 100px; background-position: top center; } }

@media only screen and (max-width: 768px) { #senjo { background-position: top 60px center; } }

#senjo h1 { padding: 100px 0 40px; }

@media only screen and (min-width: 769px) { #senjo .item-1 { left: -70%; top: 0; width: 570px; }
  #senjo .item-2 { width: 290px; right: 0px; top: 390px; }
  #senjo .item-3 { width: 300px; transform: rotate(45deg); left: -55%; bottom: 50px; } }

@media only screen and (max-width: 768px) { #senjo .item-1 { width: 230px; left: -120px; top: 35%; }
  #senjo .item-2 { width: 130px; right: -30px; top: 40%; }
  #senjo .item-3 { display: none; } }

#tuyomi h1 { background: linear-gradient(330deg, #42a0ad 50%, #3b8f9b 50%); padding: 30px; }

#tuyomi .tuyomi-box { position: relative; }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box { margin: 80px auto; } }

@media only screen and (max-width: 768px) { #tuyomi .tuyomi-box { margin: 40px auto; } }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box .text { width: 60%; } }

@media only screen and (max-width: 768px) { #tuyomi .tuyomi-box .text h2 { text-align: center; } }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box-1 { padding-bottom: 340px; } }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box-1 .img { right: -50px; top: 120px; position: absolute; } }

#tuyomi .tuyomi-box-2 .text { float: right; }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box-2 .img-1 { left: -100px; top: 0px; position: absolute; } }

@media only screen and (max-width: 768px) { #tuyomi .tuyomi-box-2 .img-1 { display: none; } }

@media only screen and (min-width: 769px) { #tuyomi .tuyomi-box-3 .img { right: -250px; top: 120px; position: absolute; } }

.kodawari-line { position: relative; }

@media only screen and (min-width: 769px) { .kodawari-line { padding-bottom: 110px; } }

@media only screen and (max-width: 768px) { .kodawari-line { padding-bottom: 70px; } }

.kodawari-line:before, .kodawari-line:after { content: ""; display: block; width: 50%; position: absolute; bottom: 0; }

.kodawari-line:before { right: 50%; }

@media only screen and (min-width: 769px) { .kodawari-line:before { border-bottom: 220px solid #333; border-right: 1000px solid transparent; } }

@media only screen and (max-width: 768px) { .kodawari-line:before { border-bottom: 130px solid #333; border-right: 400px solid transparent; } }

.kodawari-line:after { left: 50%; }

@media only screen and (min-width: 769px) { .kodawari-line:after { border-bottom: 220px solid #333; border-left: 1000px solid transparent; } }

@media only screen and (max-width: 768px) { .kodawari-line:after { border-bottom: 130px solid #333; border-left: 400px solid transparent; } }

@media only screen and (max-width: 768px) { .kodawari-line > img { width: 80%; margin: 0 auto; } }

#kodawari { background-color: #333333; position: relative; padding: 50px 0; }

@media only screen and (min-width: 769px) { #kodawari { padding-bottom: 200px; } }

@media only screen and (max-width: 768px) { #kodawari h1 { width: 80%; margin-left: auto; margin-right: auto; } }

#kodawari p { color: #ffffff; margin-right: auto; margin-left: auto; }

@media only screen and (min-width: 769px) { #kodawari p { width: 65%; } }

@media only screen and (max-width: 768px) { #kodawari .container { z-index: 1; } }

@media only screen and (min-width: 769px) { #kodawari .img-1 { right: -200px; top: -240px; } }

@media only screen and (max-width: 768px) { #kodawari .img-1 { top: 0; right: 0; width: 140px; z-index: -1; opacity: .6; } }

@media only screen and (min-width: 769px) { #kodawari .img-2 { right: -300px; bottom: -150px; } }

@media only screen and (max-width: 768px) { #kodawari .img-2 { position: static; margin-top: 20px; } }

@media only screen and (min-width: 769px) { #kodawari .img-3 { left: -200px; top: 0px; } }

@media only screen and (max-width: 768px) { #kodawari .img-3 { left: 0; top: 170px; width: 150px; z-index: -1; opacity: .6; } }

@media only screen and (max-width: 768px) { #newme h1 { width: 80%; margin-right: auto; margin-left: auto; } }

#newme p { margin-right: auto; margin-left: auto; text-align: center; }

@media only screen and (min-width: 769px) { #newme p { width: 65%; } }

@media only screen and (min-width: 769px) { #newme .img-1 { left: -310px; top: -240px; } }

@media only screen and (max-width: 768px) { #newme .img-1 { width: 230px; left: -50px; top: -230px; z-index: -1; } }

@media only screen and (min-width: 769px) { #newme .img-2 { right: -320px; bottom: 0; } }

@media only screen and (max-width: 768px) { #newme .img-2 { display: none; } }

#newme .item-1 { transform: rotate(45deg); }

@media only screen and (min-width: 769px) { #newme .item-1 { right: 0; top: -230px; } }

@media only screen and (max-width: 768px) { #newme .item-1 { width: 70px; right: 30px; top: -200px; } }

#newme .item-2 { transform: rotate(45deg); }

@media only screen and (min-width: 769px) { #newme .item-2 { left: -110px; bottom: -120px; } }

@media only screen and (max-width: 768px) { #newme .item-2 { bottom: -95px; width: 90px; right: 30px; } }

#seisansya { background: linear-gradient(180deg, transparent 50px, #fffedc 50px); padding-bottom: 80px; position: relative; overflow: hidden; }

#seisansya .img-1 { right: -45%; top: -240px; width: 500px; }

#seisansya .img-2 { transform: rotate(45deg); left: -30%; top: 810px; width: 113px; }

#seisansya .img-3 { right: -70%; bottom: 770px; width: 600px; }

@media only screen and (max-width: 768px) { #seisansya .img-1, #seisansya .img-2, #seisansya .img-3 { display: none; } }

@media only screen and (min-width: 769px) { #seisansya h1 { background: linear-gradient(90deg, #3b8f9b 90%, transparent 90%); padding: 60px; } }

@media only screen and (max-width: 768px) { #seisansya h1 { background: #3b8f9b; padding: 40px 20px; } }

#seisansya figure { flex-basis: 250px; }

#seisansya .hinsitu { background-color: #fff; border: 5px solid #fff; box-shadow: inset 0 0 0 1px #3b8f9b; }

@media only screen and (min-width: 769px) { #seisansya .hinsitu { padding: 40px; } }

@media only screen and (max-width: 768px) { #seisansya .hinsitu { padding: 20px; } }

@media only screen and (max-width: 768px) { #seisansya .befoaf figure { text-align: center; }
  #seisansya .befoaf figure img { width: 60%; margin-bottom: 10px; }
  #seisansya .befoaf figcaption { text-align: left; }
  #seisansya .befoaf > img { transform: rotate(90deg); } }

#powder { background-color: #3b8f9b; }

@media only screen and (max-width: 768px) { #powder h1 { width: 80%; margin-left: auto; margin-right: auto; } }

#step h1 { padding: 10px 20px; background-color: #fffda9; }

#step h2 { flex-basis: 100%; }

#step .box { border: 4px solid #fffda9; }

@media only screen and (min-width: 769px) { #step .box { padding: 50px; } }

@media only screen and (max-width: 768px) { #step .box { padding: 20px; } }

#step .box .stepboxs { display: flex; }

@media only screen and (min-width: 769px) { #step .box .stepboxs { flex-wrap: wrap; } }

@media only screen and (max-width: 768px) { #step .box .stepboxs .text br { display: none; } }

@media only screen and (min-width: 769px) { #step .box .use .useboxs { width: 30%; } }

@media only screen and (max-width: 768px) { #step .box .use .useboxs:not(:last-child) { margin-bottom: 30px; } }

#step .box .use .useboxs figure { height: 128px; display: flex; flex-flow: column; align-items: center; justify-content: space-between; }

#qa dl { margin-bottom: 30px; }

#qa dl dt, #qa dl dd { display: flex; }

#qa dl dt { border: 2px solid #3b8f9b; align-items: center; margin-bottom: 20px; }

#qa dl dt:before { content: "Q"; background: #3b8f9b; color: #fff; padding: 10px 20px; display: inline-block; font-size: 1.3em; margin-right: 10px; }

#qa dl dd { align-items: top; }

#qa dl dd:before { content: "A"; color: #3b8f9b; padding: 0 20px; display: inline-block; font-size: 1.3em; margin-right: 10px; }

#product { background-color: #fffedc; }

#product .price { font-weight: bold; }

@media only screen and (max-width: 768px) { #product .product-1 img, #product .product-2 img, #product .product-3 img { max-height: 200px; width: auto; } }

@media only screen and (min-width: 769px) { #product .product-1 img { padding: 24px 0; } }

@media only screen and (max-width: 768px) { #product .product-3 .d-flex { flex-wrap: wrap; }
  #product .product-3 .d-flex div { width: 50%; } }

@media only screen and (min-width: 769px) { #contact iframe { height: 840px; } }

@media only screen and (max-width: 768px) { #contact iframe { height: 1060px; } }

footer { text-align: center; position: relative; }

footer .item-1 { width: 400px; left: -500px; top: -120px; }

footer .item-2 { transform: rotate(45deg); }

@media only screen and (min-width: 769px) { footer .item-2 { width: 120px; left: 0; top: -40px; } }

@media only screen and (max-width: 768px) { footer .item-2 { width: 70px; left: 0; top: -75px; } }

footer .item-3 { transform: rotate(45deg); }

@media only screen and (min-width: 769px) { footer .item-3 { width: 80px; right: 70px; top: 30px; } }

@media only screen and (max-width: 768px) { footer .item-3 { width: 50px; right: 20px; top: -75px; } }

footer .item-4 { width: 200px; transform: rotate(220deg); top: -120px; right: -220px; }

@media only screen and (max-width: 768px) { footer .item-1, footer .item-4 { display: none; } }

footer > .box { padding: 30px 0; background-color: #fffedc; }

footer > .box .company { color: #3b8047; }

footer > .box p:not(.company) { line-height: 1.5; }

footer > .copyright { padding: 10px; background-color: #3b8f9b; color: #fff; font-size: 0.9em; }