@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&display=swap');
.gift-body{
font-family:"Noto Sans JP", sans-serif;
transform: rotateZ(0.00deg);
}
.mv .block-pic {
padding: 0;
margin: 0;
}
.wrapper {
height: 550px;
}
.wrapper img {
width: 95%;
}
.message-container {
height: auto;
}
.fade-in-text {
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease-out, transform 1s ease-out;
transition-delay: calc(var(--delay) * 0.5s);
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 3.2rem;
color: #304778;
margin: 0em;
/* display: flex; */
margin-left: 25%;
}
.fade-in-text.visible {
opacity: 1;
transform: translateY(0);
}
.gift-message-bg {
background-image: url(/sites/default/files/2025-09/IGI_25S4_pickup_giftmessage_b_bg.png); /* 背景画像指定 */
background-size: cover;
background-attachment: fixed;
background-position: center center;
padding: 10px 0 40px;
height: 100%;
}
.gift-message-bg .block-pic {
padding: 0;
margin: 0;
}
.gift-heading {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: .14em;
line-height: 2.0;
font-size: 4.2rem;
color: #ffffff;
margin: 0em;
/* display: flex; */
text-align: center;
}
.wrapping-container {
height: auto;
}
.fade-in-text02 {
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease-out, transform 1s ease-out;
transition-delay: calc(var(--delay) * 0.5s);
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 3.6rem;
color: #304778;
margin: 0em;
/* display: flex; */
text-align: center;
}
.fade-in-text02.visible {
opacity: 1;
transform: translateY(0);
}
.gift-wrapping-bg {
background-image: url(/sites/default/files/2025-09/IGI_25S4_pickup_giftwrapping_b_bg.png); /* 背景画像指定 */
background-size: cover;
background-attachment: fixed;
background-position: center center;
padding: 40px 0 40px;
height: 100%;
}
.gift-wrapping-bg .block-pic {
padding: 0;
margin: 0;
}
.wrapping-cap-container {
transform: translateY(-18rem);
}
.title-hand {
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 4.0rem;
color: #925e9a;
margin: 0em;
/* display: flex; */
text-align: center;
}
.aroma-wrapper {
display: flex; /* 横並び */
align-items: center; /* 垂直中央 */
justify-content: center;
gap: 20px; /* 画像と文字の間隔 */
padding: 10px 20px; /* 周囲の余白 */
}
.aroma-image img {
display: block;
width: 120px; /* 画像の大きさ調整 */
height: auto;
}
.aroma-text-wrap {
display:flex;
flex-flow: column;
}
.aroma-text-b {
font-size: 2.8rem;
font-weight: 500;
color: #434343;
letter-spacing: .06em;
line-height: 1.7;
text-align: center;
}
.aroma-text-s {
font-size: 2.4rem;
font-weight: 400;
color: #434343;
letter-spacing: .10em;
line-height: 1.7;
text-align: center;
}
.aroma-text-cap {
font-size: 2.0rem;
font-weight: 400;
color: #888888;
text-align: center;
}
.item-box01{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #925e9a;
border-bottom: solid 4px #925e9a;
width: 60%;
}
.item-box01 p {
margin: 0;
padding: 0 0 0 10px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box01 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.product-bg01 {
text-align: center;
letter-spacing: .12em;
font-weight: bold;
font-size: 2.7rem;
color: #ffffff;
border-radius: 10vh;
background-color: #925e9a;
display: block;
margin: auto;
width: 60%;
padding: 2px 10px;
}
.product-bg01-s {
text-align: center;
letter-spacing: .12em;
font-weight: bold;
font-size: 2.7rem;
color: #925e9a;
border: solid 1px #925e9a;
border-radius: 10vh;
background-color: #ffffff;
display: block;
margin: 5px auto;
width: 40%;
padding: 2px 10px;
}
.product-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px;
}
.product-wrapper .block-paragraph .text-container {
margin: 0;
padding: 0;
}
.product-wrapper-s {
display:flex;
flex-flow: column;
align-items: center;
}
.product-wrapper-s img {
width: 100px;
height: auto;
}
.product-image01 img {
display: block;
width: 180px;
height: auto;
}
.product-image02 img {
display: block;
width: 160px;
height: auto;
}
.item-box02{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #925e9a;
border-bottom: solid 4px #925e9a;
width: 60%;
}
.item-box02 p {
margin: 0;
padding: 0 0 0 10px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box02 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.title-body {
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 4.0rem;
color: #145741;
margin: 0em;
/* display: flex; */
text-align: center;
}
.item-box03{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #145741;
border-bottom: solid 4px #145741;
width: 60%;
}
.item-box03 p {
margin: 0;
padding: 0 0 0 10px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box03 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.title-hair {
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 4.0rem;
color: #bc3834;
margin: 0em;
/* display: flex; */
text-align: center;
}
.title-hair-s {
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 3.6rem;
color: #a9905d;
margin: 0em;
/* display: flex; */
text-align: center;
}
.item-box04{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #bc3834;
border-bottom: solid 4px #bc3834;
width: 60%;
}
.item-box04 p {
margin: 0;
padding: 0 0 0 10px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box04 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.item-box05{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #bc3834;
border-bottom: solid 4px #bc3834;
width: 60%;
}
.item-box05 p {
margin: 0;
padding: 0 0 0 10px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box05 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.product-bg02-s {
text-align: center;
letter-spacing: .12em;
font-weight: bold;
font-size: 2.7rem;
color: #bd3834;
/* border: solid 1px #bd3834; */
/* border-radius: 10vh; */
/* background-color: #bd3834; */
display: block;
/* margin: 5px auto; */
/* width: 60%; */
/* padding: 2px 10px; */
}
.aroma-wrapper-s {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0px 10px;
border: solid 0.5px #985c51;
margin: 0 20px;
}
.aroma-wrapper-ss {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0px 10px;
border: solid 0.5px #985c51;
margin: 0 20px;
}
.title-fragrance {
font-family: "Kaisei Decol", system-ui;
font-weight: 400;
font-style: normal;
letter-spacing: .12em;
line-height: 2.0;
font-size: 4.0rem;
color: #b39a66;
margin: 0em;
/* display: flex; */
text-align: center;
}
.item-box06{
padding: 8px 20px;
margin: 2em auto;
background: #efeadf;
border-top: solid 4px #b39a66;
border-bottom: solid 4px #b39a66;
width: 60%;
}
.item-box06 p {
margin: 0;
padding: 0 0 0 5px;
color: #434343;
font-size: 3.8rem;
font-weight: 600;
}
.item-box06 span {
margin: 0;
padding: 0;
color: #434343;
font-size: 2.8rem;
font-weight: 400;
}
.product-bg03-s {
text-align: center;
letter-spacing: .12em;
font-weight: bold;
font-size: 2.7rem;
color: #b39a66;
border: solid 1px #b39a66;
border-radius: 10vh;
background-color: #ffffff;
display: block;
margin: 5px auto;
width: 40%;
padding: 2px 10px;
}
.fregrance-text-b {
font-size: 3.0rem;
font-weight: 500;
color: #b39a66;
letter-spacing: .10em;
line-height: 1.7;
text-align: center;
}
LIMITED GIFT BAG
ホリデーシーズンを彩る
限定ギフトバッグの
フリーラッピング
HAND CARE
忙しい手肌へ
心地よく香るハンドケア
10月18日（土）発売
レモンとフローラルを感じる
イノセントフローラルの香り
イラストはイメージです。
イラストはイメージです。
BODY CARE
乾きやすい季節だから
やさしく包みこむ
うるおいボディケア
フレッシュなオレンジに
ピールのような苦みを加えた ビターオレンジの香り
イラストはイメージです。
ピールのような苦みを加えた ビターオレンジの香り
イラストはイメージです。
HAIR CARE
〜おうちでも外出先でも〜
うるおいと香りを纏う
洗い流さないヘアトリートメント
みずみずしく清らかな
クリアフローラルの香り
イラストはイメージです。
イラストはイメージです。
〜一年の締めくくりは美髪で〜
うるおいと輝きを宿す
インバスのヘアケアセット
みずみずしく清らかな
クリアフローラルの香り
イラストはイメージです。
イラストはイメージです。
みずみずしく華やかな
ホワイトフローラルの香り
イラストはイメージです。
イラストはイメージです。
FRAGRANCE
気分や印象までチェンジ
新しい個性の演出にも
001
華やかで透明感のある
フレッシュフローラル
002
明るく爽やかさのある
アクアティックシトラス
003
軽やかで清潔感のある
シアーグリーン
004
凛とした個性と刺激を感じる
スパイシーフローラル
005
優雅で落着きのある
ウッディシプレ
イラストはイメージです。
{
"background_img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_pc.png",
"font_color": "#ffffff",
"font_weight": 700,
"left": {
"title": "",
"text": "",
"title_img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_title_pc.png",
"title_img_alt": "Heartful iO Holidays"
},
"right": [
{
"text": "限定ギフトバッグ",
"name": "LIMITED GIFT BAG",
"img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_icon-1.png",
"href": "#limited"
},
{
"text": "ハンドケア",
"name": "HAND CARE",
"img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_icon-2.png",
"href": "#handcare"
},
{
"text": "ボディケア",
"name": "BODY CARE",
"img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_icon-3.png",
"href": "#bodycare"
},
{
"text": "ヘアケア",
"name": "HAIR CARE",
"img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_icon-4.png",
"href": "#haircare"
},
{
"text": "フレグランス",
"name": "FRAGRANCE",
"img": "/sites/default/files/2025-09/IGI_25S4_pickup_bg_icon-5.png",
"href": "#fragrance"
}
],
"banner": {
"img": "",
"alt": "",
"link": ""
}
}
毛穴つるん洗顔
シトラス香る泡でうっとり、素肌すっきり
:root {
--px-content-width: 393;
}
.common-footer-block-area[data-v-4dc9cd29] {
margin: 0;
padding: 12rem 0 0 0;
}
@media (max-width: 767px) and (max-width: 750px) {
.common-footer-block-area[data-v-4dc9cd29] {
margin: 0;
padding: calc((120 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw) 0;
}
}
.dev-add-fixed-bg-img-wrapper {
position: fixed;
width: 100%;
height: 100dvh;
left: 0;
top: 0;
z-index: -1;
background: #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.dev-add-fixed-left,
.dev-add-fixed-right {
position: fixed;
pointer-events: none;
top: 80px;
width: calc(50vw - (var(--px-content-width) / 2) * 1px);
height: calc(100vh - 80px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media (max-width: 1150px) {
display: none;
}
}
.dev-add-fixed-left {
left: 0;
}
.dev-add-fixed-text-area {
max-width: 418px;
width: 80%;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: auto;
}
.dev-add-fixed-title {
display: none;
font-family: var(--font-family--en);
font-size: 32px;
font-weight: 300;
line-height: 1.2;
color: #434343;
letter-spacing: 0.07em;
text-align: center;
}
.dev-add-fixed-text {
display: none;
font-family: var(--font-family--en);
font-size: 16px;
font-weight: 300;
line-height: 1.6;
color: #434343;
letter-spacing: 0.07em;
text-align: center;
}
.dev-add-fixed-title-img {
display: none;
width: 100%;
img {
display: none;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
}
.dev-add-fixed-right {
right: 0;
}
.dev-add-fixed-product-list {
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.dev-add-fixed-product-link {
display: flex;
align-items: center;
gap: 10px;
transition: all 0.15s ease-out;
}
.dev-add-fixed-product-link:hover {
text-decoration: none;
opacity: 0.8;
}
.dev-add-fixed-product-link:focus {
text-decoration: none;
}
.dev-add-fixed-product-link:link {
color: #00000000;
}
.dev-add-fixed-product-img-area {
width: 60px;
height: 60px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.dev-add-fixed-product-box {
display: flex;
flex-direction: column;
gap: 6px;
}
.dev-add-fixed-product-subtitle {
font-family: var(--font-family--en);
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #343434;
letter-spacing: 0.07em;
}
.dev-add-fixed-product-subtitle.--none {
display: block;
visibility: hidden;
height: 12px;
}
.dev-add-fixed-product-name {
font-family: var(--font-family--en);
font-size: 18px;
font-weight: 300;
line-height: 1.4;
color: #343434;
letter-spacing: 0.07em;
}
.dev-add-fixed-product-name.--ex {
display: inline-flex;
align-items: center;
gap: 10px;
}
.dev-add-fixed-product-name.--ex span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
}
.dev-add-fixed-banner {
margin-top: 50px;
width: 350px;
pointer-events: auto;
}
.dev-add-fixed-banner-link {
width: 100%;
transition: all 0.15s ease-out;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.dev-add-fixed-banner-link:hover {
text-decoration: none;
opacity: 0.8;
}
.dev-add-fixed-banner-sp {
@media (min-width: 1151px) {
display: none;
}
@media (max-width: 1150px) {
position: fixed;
z-index: 5;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
max-width: 350px;
width: calc(100% - 20px);
aspect-ratio: 350 / 80;
margin: 0 auto;
}
@media (max-width: 750px) {
bottom: calc(((120 / var(--vw-base-width)) * 100vw) + 10px);
}
}
.dev-add-fixed-banner-sp-link {
width: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.dev-add-fixed-banner-sp-close {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
}
.dev-add-fixed-banner-sp-close-box {
width: 6px;
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2px;
}
.dev-add-fixed-banner-sp-close-line {
width: 100%;
height: 1px;
background: #A09288;
}
.dev-add-fixed-banner-sp-close-line:first-child {
rotate: 45deg;
}
.dev-add-fixed-banner-sp-close-line:last-child {
position: absolute;
width: 6px;
rotate: -45deg;
}
/* 初期表示抑止: iframe 生成まで元要素を非表示にする */
@media (min-width: 768px) {
#block-ignis-content > :not(.js-no-iframe) { display: none !important; };
}
@media (min-width: 768px) {
html:not(.--iframe-ready) #block-ignis-content
html:not(.--iframe-ready) .common-footer-block-area,
html:not(.--iframe-ready) common-footer-block-area,
html:not(.--iframe-ready) #common-aside-shop,
html:not(.--iframe-ready) .common-aside-instagram,
html:not(.--iframe-ready) .common-aside-flow-line,
html:not(.--iframe-ready) .common-footer { display: none !important; }
}