@charset "UTF-8";
/*========================================
ふんわり名人
=========================================*/
/*レスポンシブ*/
/*縦書き*/
/* 共通
-----------------------------------------*/
html { font-size: 62.5%; scroll-behavior: smooth; }

body { background: #fff; font-size: 1.6rem; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: 0.1em; }

img { max-width: 100%; }

a { color: #e60012; transition: 0.5s; }
a:hover { color: #e60012; }
a img { transition: 0.5s; }

.js-effect-fade { transform: translate(0, 40px); transition: all 0.8s; opacity: 0; }
.js-effect-fade.is-effect-scroll { opacity: 1; transform: translate(0, 0); }

/* header
-----------------------------------------*/
/* main
-----------------------------------------*/
.l-wrap { overflow: hidden; }

.l-nav { margin: auto; padding: 0; display: flex; justify-content: space-around; background: #ffa827; align-items: center; text-align: center; }
@media screen and (min-width: 768px) { .l-nav { justify-content: center; } }
.l-nav a { padding: 34px 4px; display: block; text-align: center; font-size: 1.4rem; color: #fff; transform: rotate(0.03deg); }
@media screen and (min-width: 768px) { .l-nav a { padding-left: 16px; padding-right: 16px; font-size: 1.6rem; } }
.l-nav a::after { content: ""; margin: auto; display: block; width: 8px; height: 8px; border-right: solid 2px #fff; border-bottom: solid 2px #fff; transform: rotate(45deg); transition: 0.5s; }
.l-nav a:hover { text-decoration: none; color: #e01f24; }
.l-nav a:hover::after { border-color: #e01f24; }

/* footer
-----------------------------------------*/
.l-footer { padding: 32px 15px; background: #fff4dd; text-align: center; position: relative; z-index: 1; }
.l-footer img { margin-bottom: 12px; }
.l-footer small { display: block; font-size: 1.2rem; }

/* component
-----------------------------------------*/
/* p-funwari
-----------------------------------------*/
/*main visual*/
.p-funwari-mainvisual { margin: 0; padding: 20px 20px 200px; background: url(/funwari/img/mainvisual_bg.jpg) no-repeat right bottom; background-size: 600px 300px; }
@media screen and (min-width: 768px) { .p-funwari-mainvisual { padding: 20px; background-position: center center; background-size: cover; height: calc(100vh - 100px); } }

.p-funwari-mainvisual__inner { margin: auto; padding: 0; display: flex; justify-content: center; align-items: center; max-width: 1200px; height: 100%; position: relative; }
.p-funwari-mainvisual__inner h1 { margin: 0; max-height: 100%; text-align: center; }
.p-funwari-mainvisual__inner h1 img { max-height: calc(100vh - 140px); }

.p-funwari-mainvisual__logo { width: 80px; position: absolute; top: 0; right: 0; }
@media screen and (min-width: 768px) { .p-funwari-mainvisual__logo { right: auto; left: 0; } }

/*TVCM*/
.p-funwari-movie { padding-top: 80px; background: url(/funwari/img/movie_bg.jpg) no-repeat center center; background-size: cover; }
.p-funwari-movie h2 { margin-bottom: 1em; padding: 0; font-size: 4rem; text-align: center; line-height: 1.4; letter-spacing: 0.1em; color: #ec7f16; }
@media screen and (min-width: 768px) { .p-funwari-movie h2 { font-size: 4.8rem; } }
.p-funwari-movie iframe[src*="youtube.com"] { margin: 0 auto 10px; padding: 0; display: block; width: 100%; max-width: 670px; height: 52.1vw; position: relative; overflow: hidden; }
@media screen and (min-width: 768px) { .p-funwari-movie iframe[src*="youtube.com"] { height: 299px; } }

.p-funwari-movie-list { padding: 0; list-style: none; text-align: center; }
@media screen and (min-width: 768px) { .p-funwari-movie-list { display: flex; flex-wrap: wrap; justify-content: space-between; } }
.p-funwari-movie-list li { margin-bottom: 80px; text-align: center; position: relative; z-index: 2; }
@media screen and (min-width: 768px) { .p-funwari-movie-list li { width: 48%; } }
.p-funwari-movie-list li img { margin: 0 0 10px; cursor: pointer; }
.p-funwari-movie-list li p { transform: rotate(0.03deg); }

/*ふんわり名人について*/
@keyframes uneune { 0% { border-radius: 60% 50% 80% 50% / 60% 70% 60% 80%; }
  20% { border-radius: 70% 60% 60% 70% / 70% 80% 50% 90%; }
  40% { border-radius: 60% 40% 70% 60% / 60% 60% 60% 80%; }
  60% { border-radius: 80% 60% 60% 70% / 70% 50% 80% 70%; }
  80% { border-radius: 60% 40% 70% 60% / 50% 60% 70% 60%; }
  100% { border-radius: 60% 50% 80% 50% / 60% 70% 60% 80%; } }
.p-funwari-about { margin: 0; padding: 60px 0 200px; background-image: url(/funwari/img/about_bg.jpg), url(/funwari/img/about_bg.jpg); background-repeat: no-repeat, no-repeat; background-position: 98% bottom, center top; background-size: 760px 760px, cover; position: relative; }
@media screen and (min-width: 768px) { .p-funwari-about { background-image: url(/funwari/img/about_bg.jpg); background-position: center bottom; background-size: cover; } }
.p-funwari-about::before { content: ""; display: block; width: 50%; max-width: 385px; height: 364px; background: url(/funwari/img/about_deco.png) no-repeat left center; background-size: contain; position: absolute; top: -220px; right: 50%; z-index: 1; }
@media screen and (min-width: 768px) { .p-funwari-about::before { width: 25%; right: 80%; } }

.p-funwari-about-card { margin: 0 auto 80px; max-width: 1200px; position: relative; z-index: 1; }
.p-funwari-about-card::before { content: ""; display: block; width: 160%; height: 72%; background: #ec7f16; position: absolute; bottom: 0; left: -30%; z-index: -1; animation: uneune 10s linear infinite; /* 10秒アニメーションをループ */ }
@media screen and (min-width: 768px) { .p-funwari-about-card::before { width: 60%; height: 100%; left: 0; } }
.p-funwari-about-card__inner { padding: 60px 10px; position: relative; }
@media screen and (min-width: 768px) { .p-funwari-about-card__inner { padding: 140px 120px; } }
.p-funwari-about-card figure { margin-top: -20vw; text-align: center; }
@media screen and (min-width: 768px) { .p-funwari-about-card figure { margin-top: 0; max-width: 520px; position: absolute; bottom: 30px; } }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(odd) { margin-bottom: -40px; } }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(odd) figure { right: 0; } }
.p-funwari-about-card:nth-child(even) { margin-bottom: -40px; }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(even) { margin-bottom: -240px; margin-right: -100px; z-index: 2; } }
.p-funwari-about-card:nth-child(even)::before { height: 108%; background-color: #ffa827; }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(even)::before { width: 56%; height: 100%; left: auto; right: 0; } }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(even) .p-funwari-about-card__inner { padding-left: 56%; } }
@media screen and (min-width: 768px) { .p-funwari-about-card:nth-child(even) figure { left: 20%; bottom: 0; } }
.p-funwari-about-card h3 { margin-bottom: 1em; display: block; font-size: 1.4rem; font-weight: bold; color: #fff; line-height: 1.4; }
@media screen and (min-width: 768px) { .p-funwari-about-card h3 { font-size: 2.0rem; } }
.p-funwari-about-card h3 em { font-size: 3.2rem; font-style: normal; }
@media screen and (min-width: 768px) { .p-funwari-about-card h3 em { font-size: 4.8rem; } }
.p-funwari-about-card p { font-size: 1.4rem; line-height: 2.2; letter-spacing: 1px; color: #fff; transform: rotate(0.03deg); }
@media screen and (min-width: 768px) { .p-funwari-about-card p { font-size: 1.6rem; } }

/*商品紹介*/
.p-funwari-product { padding-bottom: 80px; background: url(/funwari/img/product_bg.jpg) repeat center center; background-size: 1000px 1370px; position: relative; z-index: 2; }
.p-funwari-product::before { content: ""; display: block; width: 50%; max-width: 687px; height: 491px; background: url(/funwari/img/product_deco_inaho.png) no-repeat right center; background-size: contain; position: absolute; top: -240px; right: 54%; z-index: 1; }
@media screen and (min-width: 768px) { .p-funwari-product::before { width: 40%; top: -200px; right: 64%; } }
.p-funwari-product::after { content: ""; display: block; width: 50%; max-width: 430px; height: 365px; background: url(/funwari/img/product_deco_kome.png) no-repeat right bottom; background-size: contain; position: absolute; bottom: -40px; left: 50%; z-index: 1; }
@media screen and (min-width: 768px) { .p-funwari-product::after { width: 25%; left: 80%; } }
.p-funwari-product h2 { margin-bottom: 80px; padding-top: 40px; font-size: 4rem; text-align: center; line-height: 1.4; letter-spacing: 0.1em; font-weight: bold; color: #ec7f16; }
@media screen and (min-width: 768px) { .p-funwari-product h2 { padding-top: 0; } }
.p-funwari-product h2::before { content: ""; margin: auto; display: block; width: 120vw; height: 24vw; background: #fff; border-radius: 100%; position: absolute; top: -48px; left: -10vw; right: 0; z-index: -1; }
@media screen and (min-width: 768px) { .p-funwari-product h2::before { top: -120px; } }

.p-funwari-product-list { padding: 0; list-style: none; display: flex; flex-wrap: wrap; position: relative; z-index: 2; }
.p-funwari-product-list li { margin-bottom: 80px; width: 50%; text-align: center; position: relative; }
@media screen and (min-width: 768px) { .p-funwari-product-list li { width: 25%; } }
.p-funwari-product-list li a { display: block; position: relative; color: #000; }
.p-funwari-product-list li a:hover { color: #000; text-decoration: none; }
.p-funwari-product-list li i { max-width: 90px; position: absolute; top: -45px; right: -10px; z-index: 1; }
@media screen and (min-width: 768px) { .p-funwari-product-list li i { max-width: 100px; top: -24px; } }

.p-funwari-product-list__img { margin-bottom: 20px; width: 64%; max-width: 120px; filter: drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.3)); }
@media screen and (min-width: 768px) { .p-funwari-product-list__img { max-width: 180px; } }
a:hover .p-funwari-product-list__img { filter: drop-shadow(12px 12px 24px rgba(0, 0, 0, 0.2)); transform: scale(1.1); }

.p-funwari-product-list__name { font-weight: bold; transform: rotate(0.03deg); }

.p-funwari-product-list__btn-detail { padding: 2px 10px; border: solid 1px #f18200; border-radius: 16px; line-height: 1; font-size: 1rem; font-family: sans-serif; color: #f18200; transform: rotate(0.03deg); }
@media screen and (min-width: 768px) { .p-funwari-product-list__btn-detail { font-size: 1.2rem; } }
.p-funwari-product-list__btn-detail::before { content: ""; margin: -2px 4px 0 0; display: inline-block; width: 6px; height: 6px; border-top: solid 1px #f18200; border-right: solid 1px #f18200; vertical-align: middle; transform: rotate(45deg); }

.p-funwari-product__btn-shop { margin: auto; padding: 12px; display: block; width: 100%; max-width: 640px; background: #ffa827; border-radius: 32px; font-size: 1.6rem; color: #fff; transition: 0.5s; filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25)); position: relative; z-index: 4; }
@media screen and (min-width: 768px) { .p-funwari-product__btn-shop { font-size: 2.4rem; } }
.p-funwari-product__btn-shop:hover { color: #fff; transform: scale(1.05); filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.15)); }
.p-funwari-product__btn-shop::before { content: ""; margin: -8px 8px 0 0; display: inline-block; width: 24px; height: 24px; background: url(/funwari/img/product_ico_cart.png) no-repeat 0 0; background-size: 24px 24px; vertical-align: middle; }
@media screen and (min-width: 768px) { .p-funwari-product__btn-shop::before { width: 32px; height: 32px; background-size: 32px 32px; } }