@charset "UTF-8";
@media screen and (max-width: 640px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
}
.sp {
display: none !important;
}
html { font-size: 62.5%; }
body { font-family: "Noto Sans JP", sans-serif; font-size: 1.5rem; font-weight: 400; color: #525454; line-height: 2; letter-spacing: 0.025em; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
a { color: #525454; text-decoration: none; }
section:not(:first-child) { margin-top: 100px; }
.inner { max-width: 1100px; padding: 0 30px; margin: 0 auto; }
.bnr { max-width: 100%; margin: 80px auto 0; position: relative; }
.bnr p { position: absolute; bottom: 50px; right: 160px; }
.bnr p a { display: block; width: 400px; border-radius: 12px; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.015em; line-height: 1; text-align: center; padding: 20px 0; background-color: #FFF47B; -webkit-filter: drop-shadow(4px 4px 6px rgba(51, 51, 51, 0.2)); filter: drop-shadow(4px 4px 6px rgba(51, 51, 51, 0.2)); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; }
.bnr p a:hover { letter-spacing: .25em; }
.bnr p a:hover::after { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform: translateX(25px); transform: translateX(25px); }
.bnr p a::after { content: ""; width: 50px; height: 8px; background: url(https://mizunomori.itembox.design/item/fresca/arrow.png) center center no-repeat; background-size: contain; position: absolute; top: 42%; right: 40px; }
h2 { font-size: 2.6rem; font-weight: 500; text-align: center; letter-spacing: 0.05em; line-height: 1.7; margin-bottom: 40px; }
h2 span { display: block; font-family: "Jost", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0; }
h2 .headline { display: inline-block; width: 50px; height: 50px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 2.6rem; vertical-align: 2px; background: url(https://mizunomori.itembox.design/item/fresca/droplet-01.svg) no-repeat; background-size: contain; margin-right: 5px; }
header .inner { max-width: 100%; padding: 15px 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
header .inner h1 { width: 180px; padding-top: 2px; }
header .inner p { font-size: 1.3rem; font-weight: 500; }
#mainvisual { position: relative; }
#mainvisual .copy { width: 420px; height: auto; position: absolute; top: 30%; left: 18%; }
#about .wrap { position: relative; }
#about .wrap .txt-wrap { width: 65%; position: absolute; top: 10px; left: 0; z-index: 1; }
#about .wrap .txt-wrap h3 { font-size: 2.4rem; color: #6C99A7; font-weight: 500; line-height: 1.6; letter-spacing: 0.05em; margin-bottom: 20px; }
#about .wrap .txt-wrap ul { margin-top: 40px; width: 70%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#about .wrap .txt-wrap ul li { width: 70px; height: 70px; color: #fff; font-size: 1.3rem; font-weight: 500; background: url(https://mizunomori.itembox.design/item/fresca/droplet-02.svg) no-repeat; background-size: contain; padding-top: 18px; text-align: center; }
#about .wrap .photo-wrap { width: 48%; height: auto; margin-left: auto; }
#reason { background: url(https://mizunomori.itembox.design/item/fresca/reason-img01.jpg) no-repeat center top; background-size: contain; background-color: #F1F1F0; padding: 80px 0; }
#reason p { text-align: center; }
#reason ul { margin: 100px 0 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#reason ul li { list-style:none;width: 47%; margin-bottom: 70px; padding: 25px; background-color: rgba(255, 255, 255, 0.6); border-top: 1px solid #6C99A7; border-bottom: 1px solid #6C99A7; -webkit-filter: drop-shadow(0 0 10px rgba(82, 82, 84, 0.2)); filter: drop-shadow(0 0 10px rgba(82, 82, 84, 0.2)); }
#reason ul li:nth-child(odd) { margin-right: 6%; }
#reason ul li h3 { font-size: 2rem; font-weight: 500; color: #6C99A7; letter-spacing: 0.025em; margin-bottom: 5px; position: relative; }
#reason ul li h3 span { display: block; font-family: "Jost", sans-serif; font-size: 2rem; font-weight: 500; line-height: 1; color: #fff; width: 50px; height: 50px; background: url(https://mizunomori.itembox.design/item/fresca/droplet-02.svg) no-repeat; background-size: contain; padding-top: 12px; text-align: center; position: absolute; top: -45px; left: -40px; }
#reason ul li p { text-align: left; line-height: 1.6; }
#reason .point { max-width: 980px; margin: 0 auto 100px; }
#reason .point .ttl { font-size: 2.4rem; color: #6C99A7; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#reason .point .ttl::before, #reason .point .ttl::after { content: ''; height: 1px; background-color: #6C99A7; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
#reason .point .ttl::before { margin-right: 15px; }
#reason .point .ttl::after { margin-left: 15px; }
#reason .wrap { position: relative; }
#reason .ico { width: 80px; height: auto; position: absolute; top: 25px; left: -60px; }
#reason .ico:nth-of-type(2) { top: 90px; }
#reason .check { max-width: 980px; padding: 50px 40px 40px; background-color: #fff; border: 1px solid #525454; margin: 0 auto; position: relative; }
#reason .check .ico { width: 120px; height: auto; position: absolute; top: -40px; left: -60px; }
#reason .check .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; }
#reason .check .wrap .txt-wrap { width: 52%; margin-right: 3%; }
#reason .check .wrap .txt-wrap p { text-align: justify; }
#reason .check .wrap .txt-wrap .ttl { font-size: 2.4rem; font-weight: 500; color: #525454; margin-bottom: 10px; }
#reason .check .wrap .txt-wrap .ttl span { color: #6C99A7; }
#reason .check .wrap .txt-wrap .txt { font-size: 1.8rem; font-weight: 500; line-height: 1.6; margin-bottom: 10px; }
#reason .check .wrap .photo-wrap { width: 45%; }
#one-rank-up p { text-align: center; }
#one-rank-up ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#one-rank-up ul li { list-style:none;width: calc((100% - 100px) /3); }
#one-rank-up ul li img { border: 6px solid #fff; -webkit-filter: drop-shadow(4px 4px 6px rgba(51, 51, 51, 0.2)); filter: drop-shadow(4px 4px 6px rgba(51, 51, 51, 0.2)); }
#one-rank-up ul li .caption { font-size: 1.6rem; font-weight: 500; color: #6C99A7; text-align: center; margin-top: 5px; }
#one-rank-up .first { margin-bottom: 70px; }
#one-rank-up .first li:nth-child(1) { -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
#one-rank-up .first li:nth-child(2) { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
#one-rank-up .first li:nth-child(3) { -webkit-transform: rotate(9deg); transform: rotate(9deg); }
#one-rank-up .second { margin: 100px 0 80px; }
#one-rank-up .second li:nth-child(1) { -webkit-transform: rotate(6deg); transform: rotate(6deg); -webkit-transform-origin: right top; transform-origin: right top; }
#one-rank-up .second li:nth-child(2) { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); -webkit-transform-origin: center top; transform-origin: center top; }
#one-rank-up .second li:nth-child(3) { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); -webkit-transform-origin: left top; transform-origin: left top; }
#one-rank-up .check { max-width: 980px; padding: 50px 40px 40px; background-color: #fff; border: 1px solid #525454; margin: 0 auto; position: relative; }
#one-rank-up .check .ico { width: 120px; height: auto; position: absolute; top: -40px; left: -60px; }
#one-rank-up .check .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; }
#one-rank-up .check .wrap .txt-wrap { width: 55%; margin-right: 3%; }
#one-rank-up .check .wrap .txt-wrap p { text-align: justify; }
#one-rank-up .check .wrap .txt-wrap .ttl { font-size: 2.4rem; font-weight: 500; color: #525454; letter-spacing: 0.05em; margin-bottom: 10px; }
#one-rank-up .check .wrap .txt-wrap .ttl span { color: #6C99A7; }
#one-rank-up .check .wrap .photo-wrap { width: 42%; }
#voice { padding: 80px 0; background-color: #F1F1F0; }
#voice ul li { list-style:none;padding: 25px; padding-left: 50px; background-color: #fff; position: relative; -webkit-filter: drop-shadow(0 0 10px rgba(82, 82, 84, 0.2)); filter: drop-shadow(0 0 10px rgba(82, 82, 84, 0.2)); margin-bottom: 40px; }
#voice ul li::after { content: ""; width: 20px; height: 20px; background: url(https://mizunomori.itembox.design/item/fresca/triangle.svg) center center no-repeat; background-size: contain; position: absolute; top: 0; left: 0; }
#voice ul h3 { font-size: 2rem; font-weight: 500; color: #6C99A7; letter-spacing: 0.025em; margin-bottom: 5px; }
#voice ul h3 span { font-size: 1.3rem; }
#voice ul p { line-height: 1.6; }
#faq .inner { padding-top: 60px; }
#faq .inner ul li { padding: 30px; padding-left: 70px; border-bottom: 1px solid #e1e2e3;list-style:none;}
#faq .inner ul li h3 { font-size: 2rem; font-weight: 500; color: #6C99A7; letter-spacing: 0.025em; margin-bottom: 5px; position: relative; }
#faq .inner ul li h3 span { display: block; font-family: "Jost", sans-serif; font-size: 2rem; font-weight: 500; line-height: 1; color: #fff; width: 50px; height: 50px; background: url(https://mizunomori.itembox.design/item/fresca/droplet-02.svg) no-repeat; background-size: contain; padding-top: 12px; text-align: center; position: absolute; top: -3px; left: -70px; }
#faq .inner ul p { line-height: 1.6; }
#product { padding: 80px 0 40px; background-color: #F1F1F0; }
#product .wrap img { max-width: 980px; margin: 0 auto; }
#support .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 980px; padding: 40px; background-color: #fff; border: 1px solid #525454; margin: 0 auto; }
#support .wrap .photo-wrap { width: 25%; margin-right: 5%; }
#support .wrap .txt-wrap { width: 70%; }
#support .wrap .txt-wrap h3 { font-size: 2.4rem; font-weight: 500; color: #6C99A7; letter-spacing: 0.05em; margin-bottom: 5px; }
#support .wrap .txt-wrap h3 span { color: #6C99A7; }
#support .wrap .txt-wrap p { text-align: justify; line-height: 1.6; margin-bottom: 20px; }
#support .wrap .txt-wrap .txt a { display: block; font-size: 2rem; font-weight: 500; text-decoration: underline; }
#support .wrap .txt-wrap .caption { font-size: 1.3rem; margin-bottom: 0; }
footer h2{text-align:left;}

@media screen and (max-width: 640px) {
body { font-size: 1.3rem; line-height: 1.8; letter-spacing: 0.015em; } 
section:not(:first-child) { margin-top: 40px; } 
.inner { padding: 0 20px; } 
.bnr { margin-top: 40px; width: 100%; padding: 30px 15px; background-color: #fff; border: 1px solid #6C99A7; } 
.bnr p { position: static; } 
.bnr p a { width: 100%; margin-top: 30px; font-size: 1.5rem; padding: 15px 0; } 
.bnr p a:hover { letter-spacing: 0.025em; } 
.bnr p a:hover::after { -webkit-transform: translateX(0); transform: translateX(0); } 
.bnr p a::after { top: 40%; right: 16px; } 
h2 { font-size: 2.2rem; line-height: 1.5; letter-spacing: 0.025em; margin-bottom: 20px; } 
h2 span { font-size: 1.1rem; } 
h2 .headline { width: 40px; height: 40px; font-size: 2.2rem; padding-top: 2px; } 
header .inner { padding: 10px 20px; } 
header .inner h1 { width: 140px; } 
header .inner p { font-size: 1rem; line-height: 1.4; } 
#mainvisual .copy { width: 184px; top: 23%; left: 5%; } 
#about .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 
#about .wrap .txt-wrap { width: 100%; position: static; } 
#about .wrap .txt-wrap h3 { font-size: 1.8rem; letter-spacing: 0.025em; margin-bottom: 10px; } 
#about .wrap .txt-wrap ul { margin-top: 30px; width: 90%; } 
#about .wrap .txt-wrap ul li { width: 50px; height: 50px; font-size: 1rem; padding-top: 15px; } 
#about .wrap .photo-wrap { width: 100%; margin-left: 0; margin-top: 20px; } 
#reason { background: url(https://mizunomori.itembox.design/item/fresca/reason-img01-sp.jpg) no-repeat center top; background-size: contain; background-color: #F1F1F0; padding: 40px 0; } 
#reason ul { display: block; margin-top: 80px; } 
#reason ul li { width: 100%; margin-bottom: 40px; padding: 20px 15px; } 
#reason ul li:nth-child(odd) { margin-right: 0; } 
#reason ul li h3 { font-size: 1.6rem; } 
#reason ul li h3 span { width: 36px; height: 36px; padding-top: 9px; top: -35px; left: -20px; font-size: 1.8rem; } 
#reason .point { margin-bottom: 60px; } 
#reason .point .ttl { font-size: 1.8rem; letter-spacing: 0.025em; margin-bottom: 10px; } 
#reason .wrap { overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 20px; padding-left: 40px; } 
#reason .wrap .list { width: 800px; max-width: 800px; } 
#reason .ico { width: 60px; left: -4px; } 
#reason .ico:nth-of-type(2) { top: 75px; } 
#reason .wrap::-webkit-scrollbar { height: 4px; } 
#reason .wrap::-webkit-scrollbar-track { background: #fff; } 
#reason .wrap::-webkit-scrollbar-thumb { background-color: #525454; border: none; } 
#reason .wrap::-webkit-scrollbar-thumb:hover { background-color: #e1e2e3; } 
#reason .check { max-width: 100%; padding: 20px; padding-top: 40px; } 
#reason .check .ico { width: 80px; top: -35px; left: -18px; } 
#reason .check .wrap { display: block; padding: 0; margin-left: 0; } 
#reason .check .wrap .txt-wrap { width: 100%; margin-right: 0; margin-bottom: 20px; } 
#reason .check .wrap .txt-wrap .ttl { font-size: 1.8rem; } 
#reason .check .wrap .txt-wrap .txt { font-size: 1.6rem; line-height: 1.4; margin-bottom: 5px; } 
#reason .check .wrap .photo-wrap { width: 100%; } 
#one-rank-up ul li { width: calc((100% - 30px) /3); } 
#one-rank-up ul li img { border: 3px solid #fff; } 
#one-rank-up ul li .caption { font-size: 1rem; line-height: 1.3; } 
#one-rank-up .first { margin-bottom: 30px; } 
#one-rank-up .second { margin: 40px 0 60px; } 
#one-rank-up .check { max-width: 100%; padding: 20px; padding-top: 40px; } 
#one-rank-up .check .ico { width: 80px; top: -35px; left: -18px; } 
#one-rank-up .check .wrap { display: block; } 
#one-rank-up .check .wrap .txt-wrap { width: 100%; margin-right: 0; margin-bottom: 20px; } 
#one-rank-up .check .wrap .txt-wrap .ttl { font-size: 1.8rem; margin-bottom: 5px; } 
#one-rank-up .check .wrap .photo-wrap { width: 100%; } 
#voice { padding: 40px 0; } 
#voice ul li { padding: 20px 15px 15px 20px; margin-bottom: 30px; } 
#voice ul h3 { font-size: 1.6rem; line-height: 1.6; letter-spacing: 0; margin-bottom: 10px; } 
#faq .inner { padding-top: 40px; } 
#faq .inner ul li { padding: 20px 0 15px 45px; } 
#faq .inner ul li h3 { font-size: 1.6rem; line-height: 1.6; letter-spacing: 0; margin-bottom: 10px; } 
#faq .inner ul li h3 span { width: 36px; height: 36px; padding-top: 9px; top: -5px; left: -45px; font-size: 1.8rem; } 
#product { padding: 40px 0; } 
#product .wrap { overflow-x: scroll; -webkit-overflow-scrolling: touch; } 
#product .wrap img { width: 800px; max-width: 800px; } 
#product .wrap::-webkit-scrollbar { height: 4px; } 
#product .wrap::-webkit-scrollbar-track { background: #fff; } 
#product .wrap::-webkit-scrollbar-thumb { background-color: #525454; border: none; } 
#product .wrap::-webkit-scrollbar-thumb:hover { background-color: #e1e2e3; } 
#support .wrap { display: block; padding: 20px; } 
#support .wrap .photo-wrap { width: 70%; margin: 0 auto 15px; } 
#support .wrap .txt-wrap { width: 100%; } 
#support .wrap .txt-wrap h3 { font-size: 1.8rem; } 
#support .wrap .txt-wrap .txt a { font-size: 1.6rem; } 
#support .wrap .txt-wrap .caption { font-size: 1rem; } 
/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@media screen and (max-width: 640px) { .scroll { font-family: "Jost", sans-serif; font-size: 1.2rem; font-weight: 500; text-align: right !important; margin-bottom: 5px; position: relative; }
  .scroll::after { content: ""; width: 50px; height: 6px; background: url(https://mizunomori.itembox.design/item/fresca/arrow.png) center center no-repeat; background-size: contain; position: absolute; top: 29%; right: 55px; -webkit-animation: slide 1.2s infinite; animation: slide 1.2s infinite; } }
@-webkit-keyframes slide { 0% { -webkit-transform: translateX(0); transform: translateX(0);
    opacity: 1; }
  40% { opacity: 1; }
  100% { -webkit-transform: translateX(20px); transform: translateX(20px);
    opacity: 0; } }
@keyframes slide { 0% { -webkit-transform: translateX(0); transform: translateX(0);
    opacity: 1; }
  40% { opacity: 1; }
  100% { -webkit-transform: translateX(20px); transform: translateX(20px);
    opacity: 0; } }
.mask, .copy { opacity: 0; }
.fadeLeft01 { -webkit-animation-name: fadeLeftAnime01; animation-name: fadeLeftAnime01; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; }
@-webkit-keyframes fadeLeftAnime01 { 0% { opacity: 1;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px); }
  100% { opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes fadeLeftAnime01 { 0% { opacity: 1;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px); }
  100% { opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
.mask { position: absolute; top: 0; left: 0; background-color: #fff; width: 100%; height: 100%; z-index: 2; }
.fadeLeft02 { -webkit-animation-name: fadeLeftAnime02; animation-name: fadeLeftAnime02; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-delay: .5s; animation-delay: .5s; opacity: 0; }
@media screen and (max-width: 640px) { .fadeLeft02 { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } }
@-webkit-keyframes fadeLeftAnime02 { 0% { opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes fadeLeftAnime02 { 0% { opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
/*# sourceMappingURL=styles.css.map */