@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
.mv {
position: relative;
object-fit: cover;
width: 100vw;
/* background-repeat: no-repeat; */
}
.mv img {
width: 100%;
}
.movie-bg {
background: linear-gradient(180deg, #FFFFFF 0%, #CDEDF2 100%);
}
.bg-wrap {
overflow: hidden;
}
.bg-content01 {
background: linear-gradient(180deg, #FFFFFF 0%, #CDEDF2 100%);
border-bottom-left-radius: 100vw 300px;
border-bottom-right-radius: 100vw 300px;
margin-left: -100px;
margin-right: -100px;
padding-left: 100px;
padding-right: 100px;
}
.contents_inner {
width: 100%;
max-width: calc(880px + 7rem);
height: 100%;
margin: 0 auto;
padding: 80px 10px 120px;
text-align: center;
}
.product-bg-shampack {
background-color: #FFEEEB40;
}
.product-bg-fixer {
background-color: #F9F0D840;
}
.product-bg-mist {
background-color: #FFECD840;
}
.product-bg-wax {
background-color: #DDF2F640;
}
.wrapper {
display: flex;
justify-content: center;
/* height: 100vh; */
text-align: center;
overflow: hidden;
}
.product-box01 {
background-color: #FFEEEB;
padding: 20px 0 0;
border-top-left-radius: 100vw 800px;
border-top-right-radius: 100vw 800px;
/* margin-left: -100px; */
/* margin-right: -100px; */
padding-left: 40px;
padding-right: 40px;
width: 1150px;
/* max-width: calc(1150px + 7rem); */
/* overflow: hidden; */
padding-bottom: 40px;
}
.product-box02 {
background-color: #E9F3D9;
padding: 20px 0 0;
/* border-top-left-radius: 100vw 800px; */
/* border-top-right-radius: 100vw 800px; */
/* margin-left: -100px; */
/* margin-right: -100px; */
padding-left: 40px;
padding-right: 40px;
width: 1150px;
/* max-width: calc(1150px + 7rem); */
/* overflow: hidden; */
border-bottom-left-radius: 100vw 800px;
border-bottom-right-radius: 100vw 800px;
padding-bottom: 40px;
padding-top: 40px;
}
.product-box03 {
background-color: #F9F0D8;
padding: 20px 0 0;
border-top-left-radius: 100vw 800px;
border-top-right-radius: 100vw 800px;
/* margin-left: -100px; */
/* margin-right: -100px; */
padding-left: 40px;
padding-right: 40px;
width: 1150px;
/* max-width: calc(1150px + 7rem); */
/* overflow: hidden; */
padding-bottom: 40px;
border-bottom-left-radius: 100vw 800px;
border-bottom-right-radius: 100vw 800px;
}
.product-box04 {
background-color: #FFECD8;
padding: 20px 0 0;
border-top-left-radius: 100vw 800px;
border-top-right-radius: 100vw 800px;
/* margin-left: -100px; */
/* margin-right: -100px; */
padding-left: 40px;
padding-right: 40px;
width: 1150px;
/* max-width: calc(1150px + 7rem); */
/* overflow: hidden; */
padding-bottom: 40px;
border-bottom-left-radius: 100vw 800px;
border-bottom-right-radius: 100vw 800px;
}
.product-box05 {
background-color: #DDF2F6;
padding: 20px 0 0;
border-top-left-radius: 100vw 800px;
border-top-right-radius: 100vw 800px;
/* margin-left: -100px; */
/* margin-right: -100px; */
padding-left: 40px;
padding-right: 40px;
width: 1150px;
/* max-width: calc(1150px + 7rem); */
/* overflow: hidden; */
padding-bottom: 40px;
border-bottom-left-radius: 100vw 800px;
border-bottom-right-radius: 100vw 800px;
}
.wrapper-img {
width: 10%;
}
.float-container {
position: relative;
}
.flower-bg {
position: absolute;
top: -80px;
left: 0;
animation: float 1.5s infinite alternate ease-in-out;
width: 100%;
}
.flower-bg-c {
position: absolute;
top: 0px;
left: 0;
animation: float 1.5s infinite alternate ease-in-out;
width: 100%;
}
.flower-bg-01{
animation-delay: 0.9s;
z-index: 2;
}
.flower-bg-01 img{
width: 100%;
}
.flower-bg-02{
animation-delay: 1.8s;
z-index: 1;
}
.flower-bg-02 img{
width: 100%;
}
.content-start01 {
margin: 8% 0 0;
}
.content-start02{
margin: 12% 0 0;
}
.content-start03{
margin: 10% 0 0;
}
@keyframes float {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 10px);
}
}
@media (max-width: 1024px){
.product-box01 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.product-box02 {
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 40px;
}
.product-box03 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
.product-box04 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
.product-box05 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
}
@media (max-width: 767px){
.mv {
position: relative;
object-fit: cover;
width: 100vw;
/* background-repeat: no-repeat; */
}
.contents_inner {
width: auto;
padding: 80px 10px 100px;
}
.product-box01 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
.product-box02 {
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 40px;
}
.product-box03 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
.product-box04 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
.product-box05 {
border-top-left-radius: 100vw 400px;
border-top-right-radius: 100vw 400px;
margin-left: -100px;
margin-right: -100px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
border-bottom-left-radius: 100vw 400px;
border-bottom-right-radius: 100vw 400px;
}
.wrapper-img {
width: 15%;
}
.product-bg-shampack {
background-color: transparent;
}
.product-bg-fixer{
background-color: transparent;
}
.product-bg-mist{
background-color: transparent;
}
.product-bg-wax{
background-color: transparent;
}
.flower-bg {
position: relative;
top: -100px;
display: block;
animation: float 1.5s infinite alternate ease-in-out;
z-index: 1;
}
.flower-bg-01{
animation-delay: 0.9s;
}
.flower-bg-01 img{
width: 100%;
}
.flower-bg-02{
animation-delay: 1.2s;
}
.flower-bg-02 img{
width: 100%;
}
.flower-bg-c {
position: relative;
display: block;
animation: float 1.5s infinite alternate ease-in-out;
}
.content-start01 {
margin: -40px 0 0;
}
.content-start02 {
margin: 0;
}
.content-start03 {
margin: -60px 0 0;
}
@keyframes float {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 15px);
}
}
}
.text-box01 {
position: relative;
text-align: center;
}
.text-box01 p{
position: absolute;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: 2.6rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.6em;
top:30%;
left: 50%;
transform: translate(-50%,-50%);
}
.text-box01 img{
max-width: calc(450px + 7rem);
}
.circle {
text-align: center;
}
.circle-s {
text-align: center;
display: flex;
}
.circle-b01 {
text-align: center;
position: relative;
display: inline-block;
width: 260px;
height: 260px;
border-radius: 0%;
background-image: url( /sites/default/files/2025-06/25s3_point_bg_01.png);
background-size: 260px;
margin: 0px;
}
.circle-b01 p {
text-align:center;
letter-spacing: .14em;
line-height: 40px;
font-weight: 600;
font-size:2.0rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.circle-b01 span {
text-align:center;
letter-spacing: .14em;
font-weight: 400;
font-size:1.6rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.circle-b02 {
text-align: center;
position: relative;
display: inline-block;
width: 260px;
height: 260px;
border-radius: 0%;
background-image: url( /sites/default/files/2025-06/25s3_point_bg_02.png);
background-size: 260px;
margin: 0px;
top: -40px;
}
.circle-b02 p {
text-align:center;
letter-spacing: .14em;
line-height: 40px;
font-weight: 600;
font-size:2.0rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.circle-b02 span {
text-align:center;
letter-spacing: .14em;
font-weight: 400;
font-size:1.6rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.circle-b03 {
text-align: center;
position: relative;
display: inline-block;
width: 260px;
height: 260px;
border-radius: 0%;
background-image: url( /sites/default/files/2025-06/25s3_point_bg_03.png);
background-size: 260px;
margin: 0px;
top: -40px;
}
.circle-b03 p {
text-align:center;
letter-spacing: .14em;
line-height: 40px;
font-weight: 600;
font-size:2.0rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.circle-b03 span {
text-align:center;
letter-spacing: .14em;
font-weight: 400;
font-size:1.6rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :260px;
}
.catch01 {
text-align:center;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: 2.6rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.6em;
margin: 20px auto 40px;
}
.contents-point {
display: flex;
justify-content: space-around;
}
.contents-point-pc {
display: flex;
/*justify-content: center;*/
gap: 1em;
max-width: calc(1600px + 7rem);
}
.point-box01 {
margin: 0;
height: auto;
padding: 25px 20px;
background-color: var(--merino);
aspect-ratio: 0;
width: calc(360px + 7rem);
display: flex;
flex-direction: column;
position: relative;
}
.point-box01 img {
height: auto;
left: -20%;
object-fit: cover;
position: absolute;
top: -40px;
width: 40%;
z-index: 2;
}
.point-box02 {
margin: 0;
height: auto;
padding: 25px 20px;
background-color: var(--merino);
aspect-ratio: 0;
width: calc(360px + 7rem);
display: flex;
flex-direction: column;
position: relative;
}
.point-box02 img {
height: auto;
left: 80%;
object-fit: cover;
position: absolute;
bottom: -40px;
width: 40%;
z-index: 2;
}
.point-box01-content {
align-items: center;
display: flex;
flex-direction: column;
/* justify-content: center;*/
flex-grow: 1;
}
.point-text-heading {
color: var(--neptune);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-m);
font-weight: 600;
letter-spacing: .14em;
line-height: 28px;
text-align: center;
padding: 0px 0px 20px;
}
.point-text {
padding: 1rem 1rem;
margin-bottom: 0.2rem;
border-bottom: 1px solid #6c3d21;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: 16px;
font-weight: 400;
letter-spacing: .14em;
line-height: 28px;
text-align: center;
padding: 1rem 1rem;
}
.point-text-s {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-weight: 400;
letter-spacing: .14em;
line-height: 28px;
text-align: center;
padding: 1rem 1rem;
}
.text-box02 {
position: relative;
text-align: center;
margin: 60px 0 0;
}
.text-box02 p{
position: absolute;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: 2.6rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.6em;
top:30%;
left: 50%;
transform: translate(-50%,-50%);
}
.text-box02 img{
max-width: calc(450px + 7rem);
}
.en-catch01 {
color: var(--irish-coffee);
font-family: var(--font-family-lato);
font-size: 8.0rem;
font-style: italic;
font-weight: 700;
letter-spacing: 6.00px;
line-height: normal;
text-align: center;
}
.scroll-container {
height: 90px;
}
.scroll {
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.scroll::after {
content: "";
display: inline-block;
bottom: 0;
left: 0;
width: 1px;
height: 80px;
background: var(--irish-coffee);
}
.scroll::before {
content: "";
position: absolute;
display: inline-block;
bottom: 0;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--irish-coffee);
animation: circlemove 3s ease-in-out infinite,
cirlehide 3s ease-out infinite;
}
@keyframes circlemove {
0% {
bottom: 85px;
}
100% {
bottom: 0px;
}
}
@keyframes cirlehide {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
80% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
.choice-flex {
display: flex;
justify-content: space-around;
}
.choice {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: calc(1080px + 7rem);
}
.choice-box {
margin: 0;
height: auto;
padding: 20px 20px;
aspect-ratio: 1;
width: calc(100% / 4);
display: flex;
flex-direction: column;
}
.box01 {
background-color: #ffeeeb;
}
.box02 {
background-color: #f9efd8;
}
.box03 {
background-color: #ffebd8;
}
.box04 {
background-color: #ddf2f6;
}
.choice-content {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.choice-text {
text-align: center;
letter-spacing: .14em;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
line-height: normal;
font-weight: 600;
font-size: var(--font-size-m);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.btn a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
padding: 0 20px;
position: relative;
text-decoration: none;
transition: all 0.4s ease;
gap: 5px;
}
.btn01 a {
background-color: var(--white);
border-radius: 12px;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xxxs);
font-style: normal;
font-weight: 500;
}
.btn01 a::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
right: 20px;
border-left: solid 1px #6c3d21;
border-bottom: solid 1px #6c3d21;
transform: rotate(-45deg);
}
.element {
margin: 60px 0 0;
}
@media (max-width: 1024px){
.point-box01 {
width: calc(100% / 2);
}
.contents-point {
overflow-x: hidden;
padding: 40px 0;
}
.choice-box {
width: calc(100% / 2);
}
}
@media (max-width: 767px){
.text-box01 p {
font-size: 3.6rem;
line-height: 1.6em;
top:30%;
left: 15%;
transform: translate(-0%,-50%);
}
.text-box01 img {
width: 90%;
}
.circle-b01 {
width: 185px;
height: 185px;
margin: 0px;
background-size: 185px;
}
.circle-b01 p{
font-size:3.0rem;
line-height: 30px;
width: 185px;
}
.circle-b01 span{
font-size:2.6rem;
width: 185px;
}
.circle-b02 {
width: 185px;
height: 185px;
margin: 0px;
background-size: 185px;
top: -25px;
}
.circle-b02 p{
font-size:3.0rem;
line-height: 30px;
width: 185px;
}
.circle-b02 span{
font-size:2.6rem;
letter-spacing: .10em;
width: 185px;
}
.circle-b03 {
width: 185px;
height: 185px;
margin: 0px;
background-size: 185px;
top: -25px;
}
.circle-b03 p{
font-size:3.0rem;
line-height: 30px;
width: 185px;
}
.circle-b03 span{
font-size:2.6rem;
width: 185px;
}
.catch01 {
font-size: 3.6rem;
line-height: 1.6em;
margin:20px auto 0px;
}
.contents-point-sp {
display: flex;
flex-direction: column;
gap: 2em;
flex-grow: 1;
overflow-x: hidden;
padding: 60px 0;
}
.point-box01 {
margin: auto;
height: auto;
padding: 25px 20px;
background-color: var(--merino);
aspect-ratio: auto;
width: 90%;
flex-grow: 1;
}
.point-box01 img {
height: auto;
left: 75%;
top: -60px;
width: 40%;
}
.point-box02 {
margin: auto;
height: auto;
padding: 25px 20px;
background-color: var(--merino);
aspect-ratio: auto;
width: 90%;
flex-grow: 1;
}
.point-box02 img {
height: auto;
left: -15%;
top: 120px;
width: 40%;
}
.point-text-heading {
line-height: 28px;
text-align: center;
}
.point-text {
font-size: 16px;
line-height: 28px;
}
.point-text-s {
font-size: var(--font-size-xs);
line-height: 20px;
}
.text-box02 {
margin: 20px auto 0px;
}
.text-box02 p {
font-size: 3.6rem;
line-height: 1.6em;
top:30%;
left: 15%;
transform: translate(-0%,-50%);
}
.text-box02 img {
width: 90%;
}
.en-catch01 {
font-size: 9.0rem;
}
.choice {
width: 100%;
}
.choice-box {
padding: 20px 10px;
width: calc(100% / 2);
}
.btn a {
width: 100px;
}
.btn01 a::after {
width: 8px;
height: 8px;
}
.element {
margin: 40px 0 0;
}
}
.product-title {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xxl);
font-style: normal;
font-weight: 600;
margin: 20px 0 0;
letter-spacing: .14em;
line-height: 1.6em;
}
.en-product-title {
font-family: var(--font-family-lato);
font-size: 36px;
font-weight: 700;
height: 20px;
letter-spacing: .14em;
text-align: center;
}
.en-product-title-p {
font-family: var(--font-family-lato);
font-size: 36px;
font-weight: 700;
height: 20px;
letter-spacing: .14em;
text-align: center;
margin-bottom: 80px;
}
.shampoo {
color: var(--illusion);
}
.hairpack {
color: var(--sheen-green);
}
.hairpack-silky {
color: #93b98d;
}
.hairpack-repair {
color: var(--fern);
}
.hairpack-light {
color: #D0A399;
}
.fixer {
color: var(--buttercup);
}
.mist {
color: var(--raw-sienna);
}
.wax {
color: var(--neptune);
}
.horizontal-line {
display: inline-block;
text-align: center;
width: 30%;
height: 1px;
background-color: #6c3d21;
margin: 60px 0 10px;
}
.product-shampack-point {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-m);
font-style: normal;
font-weight: 500;
letter-spacing: .14em;
line-height: normal;
text-align: center;
}
.block-point {
display: flex;
frex-direction: row;
justify-content: center;
align-items: center;
max-width: calc(420px + 7rem);
margin: 4rem auto;
}
.block-point .item {
width: calc((99.9% - (2.5rem * (4 - 1))) / 4);
flex: 1;
}
.circle-s01-s {
text-align: center;
position: relative;
display: flex;
width: 180px;
height: 180px;
border-radius: 0%;
background-image: url(/sites/default/files/2025-06/25s3_point_bg_01.png);
background-size: 180px;
margin: 0px 10px;
}
.circle-s01-s p {
text-align: center;
letter-spacing: .14em;
line-height: 30px;
font-weight: 600;
font-size: 1.4rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 180px;
}
.circle-s01-ss {
text-align: center;
position: relative;
display: flex;
width: 180px;
height: 180px;
border-radius: 0%;
background-image: url(/sites/default/files/2025-06/25s3_point_bg_01.png);
background-size: 180px;
margin: 0px 10px;
}
.circle-s01-ss p {
text-align: center;
letter-spacing: .14em;
line-height: 30px;
font-weight: 600;
font-size: 1.4rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 180px;
}
.circle-s02-ss {
text-align: center;
position: relative;
display: flex;
width: 180px;
height: 180px;
border-radius: 0%;
background-image: url(/sites/default/files/2025-06/25s3_point_bg_02.png);
background-size: 180px;
margin: 0px 10px;
}
.circle-s02-ss p {
text-align: center;
letter-spacing: .14em;
line-height: 30px;
font-weight: 600;
font-size: 1.4rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 180px;
}
.circle-s02-ss span {
letter-spacing: .10em;
line-height: 10px;
font-weight: 400;
font-size: 1.0rem;
}
.circle-s03-ss {
text-align: center;
position: relative;
display: flex;
width: 180px;
height: 180px;
border-radius: 0%;
background-image: url(/sites/default/files/2025-06/25s3_point_bg_03.png);
background-size: 180px;
margin: 0px 10px;
}
.circle-s03-ss p {
text-align: center;
letter-spacing: .14em;
line-height: 30px;
font-weight: 600;
font-size: 1.4rem;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 180px;
}
.catch-product {
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-l);
font-weight: 700;
letter-spacing: .14em;
line-height: 32px;
text-align: center;
}
.catch-product-s {
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-m);
font-weight: 700;
color: var(--irish-coffee);
letter-spacing: .14em;
line-height: 32px;
text-align: center;
}
.product-text-box {
position: relative;
text-align: center;
}
.product-text-box01-img {
max-width: calc(280px + 7rem);
}
.product-text-box span {
position: absolute;
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 500;
letter-spacing: .12em;
line-height: 1.6em;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.product-text-box02 {
position: relative;
text-align: center;
}
.product-text-box02 span {
position: absolute;
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 500;
letter-spacing: .12em;
line-height: 1.6em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.product-name p {
color: var(--cape-cod);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-s);
font-style: normal;
font-weight: 700;
letter-spacing: .14em;
line-height: 28px;
}
.product-name span {
font-weight: 400;
}
.product-spec{
color: var(--cape-cod);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 400;
letter-spacing: .14em;
line-height: 28px;
}
.block-point-p {
display: flex;
frex-direction: row;
justify-content: center;
align-items: center;
max-width: calc(480px + 7rem);
margin: 4rem auto;
}
.block-point-p .item {
width: calc((99.9% - (2.5rem * (4 - 1))) / 4);
flex: 1;
}
.blur {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(251, 210, 225, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur02 {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(208, 219, 190, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur03 {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(182, 226, 181, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur04 {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(230, 202, 196, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur05 {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(255, 213, 106, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur06 {
position: relative; z-index: 0;
padding: 30px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(243, 170, 129, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur07 {
position: relative; z-index: 0;
padding: 30px 20px;
margin: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(164, 217, 230, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.blur-f {
position: relative; z-index: 0;
padding: 10px;
margin: 0px 10px;
align-items: center;
display: flex;
justify-content: center;
gap: 10px;
&::after{
content: "";
position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(255, 255, 255, 1);
border-radius: 84px;
filter: blur(0.5em);
}
}
.ellipse-text {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 400;
letter-spacing: .12em;
line-height: 24px;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ellipse-text-s {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 400;
letter-spacing: .10em;
line-height: 24px;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ellipse-text-f {
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 400;
letter-spacing: .12em;
line-height: 24px;
text-align: center;
}
.aroma-img {
width: 30%;
}
.btn-p a {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 180px;
padding: 0 20px;
position: relative;
text-decoration: none;
transition: all 0.4s ease;
gap: 5px;
}
.btn02 a {
background-color: #6c3d21;
border-radius: 12px;
color: var(--white);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xxxs);
font-style: normal;
font-weight: 500;
margin: 20px 0 20px;
}
.new {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 200px;
padding: 0 20px;
background-color: #ffffff;
letter-spacing: .14em;
border: solid 1px #79B1BE;
color: var(--irish-coffee);
font-family: var(--font-family-noto_sans_jp);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 600;
margin-bottom: 40px;
}
.styling {
display: flex;
flex-direction: row; /* 横並びを維持 */
flex-wrap: nowrap; /* 折り返さない */
align-items: center;
justify-content: center;
gap: 40px;
padding: 20px 20px;
max-width: 1000px;
margin: 0 auto;
}
.image-area img {
max-width: 300px;
height: auto;
border-radius: 12px;
}
.text-area {
width: 280px;
text-align: center;
}
.wax-marker {
opacity: 0;
transform: translateY(40px);
transition: opacity 2s ease, transform 2s ease;
background: #ffffff;
padding: 1rem;
border-radius: 8px;
}
.wax-marker.is-active {
opacity: 1;
transform: translateY(0);
background-position: 0% .5em;
}
.wax-marker h4,
.wax-marker p {
padding: 0 20px;
letter-spacing: .12em;
line-height: 1.6em;
font-family: var(--font-family-noto_sans_jp);
font-style: normal;
font-weight: 500;
font-size: var(--font-size-xs);
color: var(--neptune);
margin: 0 0 0.5rem;
}
@media (max-width: 1024px){
}
@media (max-width: 767px){
.horizontal-line {
width: 40%;
}
.block-point {
width: 60%;
}
.block-point .item {
width: calc((99.9% - (3.125vw * (2 - 1))) / 2);
}
.circle-s01-s {
width: 120px;
height: 120px;
margin-left: 20px;
background-size: 120px;
margin: 0px 5px;
}
.circle-s01-s p {
font-size: 2.6rem;
line-height: 20px;
width: 120px;
}
.circle-s01-ss {
width: 120px;
height: 120px;
background-size: 120px;
margin: 0px 5px;
}
.circle-s01-ss p {
font-size: 2.6rem;
line-height: 20px;
width: 120px;
}
.circle-s02-ss {
width: 120px;
height: 120px;
background-size: 120px;
margin: 0px 5px;
}
.circle-s02-ss p {
font-size: 2.6rem;
line-height: 20px;
width: 120px;
}
.circle-s02-ss span {
font-size: 2.0rem;
line-height: 20px;
}
.circle-s03-ss {
width: 120px;
height: 120px;
background-size: 120px;
margin: 0px 5px;
}
.circle-s03-ss p {
font-size: 2.6rem;
line-height: 20px;
width: 120px;
}
.circle-s01 {
width: 120px;
height: 120px;
background-size: 120px;
margin: 0px 5px;
}
.circle-s01 p {
font-size: 2.6rem;
line-height: 20px;
width: 120px;
}
.product-text-box01-img {
width: 50%;
}
.block-point-p {
width: 80%;
}
.block-point-p .item {
width: calc((99.9% - (3.125vw * (2 - 1))) / 2);
}
.blur {
padding: 30px 5px;
margin: 10px;
}
.blur02 {
padding: 30px 5px;
margin: 10px;
}
.blur03 {
padding: 30px 5px;
margin: 10px;
}
.blur04 {
padding: 30px 5px;
margin: 10px;
}
.blur05 {
padding: 30px 5px;
margin: 10px;
}
.blur06 {
padding: 30px 5px;
margin: 10px;
}
.blur07 {
padding: 30px 5px;
margin: 10px;
}
.blur-f {
padding: 10px 5px;
margin: 0 10px;
}
.ellipse-text-s {
letter-spacing: .02em;
}
.aroma-img {
width: 30%;
}
.new {
width: 180px;
}
.styling {
flex-direction: row; /* ← 横並びを維持 */
gap: 10px;
}
.image-area img {
max-width: 50vw;
}
.text-area {
max-width: 50vw;
}
}
:root {
--black: #000000;
--buttercup: #eeb21a;
--cape-cod: #434343;
--fern: #66be63;
--fringy-flower: #b6e2b5;
--goldenrod: #ffd56a;
--hit-pink: #f3aa81;
--illusion: #f2a1c0;
--irish-coffee: #6c3d21;
--merino: #f6eee7;
--neptune: #79b1be;
--pig-pink: #fbd2e1;
--raw-sienna: #c87241;
--regent-st-blue: #a4d9e6;
--sheen-green: #88c802;
--white: #ffffff;
--white-2: #ffffffcc;
--font-size-l: 22px;
--font-size-m: 20px;
--font-size-s: 17px;
--font-size-xxl: 28px;
--font-size-xl: 24px;
--font-size-xs: 14px;
--font-size-xxs: 13px;
--font-size-xxxs: 12px;
--font-family-lato: "Lato", Helvetica;
--font-family-noto_sans_jp: "Noto Sans JP", Helvetica;
}
@media (max-width: 767px){
:root {
--font-size-l: 20px;
--font-size-m: 18px;
--font-size-s: 15px;
--font-size-xxl: 22px;
--font-size-xl: 22px;
--font-size-xs: 12px;
--font-size-xxs: 11px;
--font-size-xxxs: 12px;
--font-family-lato: "Lato", Helvetica;
--font-family-noto_sans_jp: "Noto Sans JP", Helvetica;
}
}
}
夏髪のためにいいことって？
うるおいケア
＆
ダメージ補修
が鉄則
紫外線が強い夏は
髪にも
UVカット成分配合の
アイテムを
湿度が高い夏は
スタイリングの
キープ
が大切
“夏髪のためにいいこと” を
イグニス イオのヘアケアではじめよう。
うれしいトリートメント効果
髪1本1本までうるおう 髪の内部までダメージ補修
心地よい爽やかな香り
リリーやヴァイオレット、リーフィーを基調とした フローラルノート
うれしいトリートメント効果
髪1本1本までうるおう 髪の内部までダメージ補修
心地よい爽やかな香り
リリーやヴァイオレット、リーフィーを基調とした フローラルノート
あなたの快適な夏髪のために
Let’s choice!
なりたい質感へ。
シャンプー＆ヘアパック
Shampoo
どんな髪質にも
うるおいケア
＆
ダメージ補修
よごれとニオイをWクレンジング。
うるおしながら洗う
ノンシリコンシャンプー
よごれとニオイをWクレンジング。
うるおしながら洗うノンシリコンシャンプー
パサつき、広がり、ベタつき、うねりにも
髪と頭皮にうるおいを
与えながら洗う
与えながら洗う
髪の内部まで補修して
やわらかに
やわらかに
みずみずしく清らかなクリアフローラルの香り
Hair Pack
なりたい仕上がりで選べる
うるおいケア
＆
ダメージ補修
仕上がりでも香りでも選べる3タイプ
指通りのよい
“サラサラするん” な仕上がり
指通りのよい
“サラサラするん” な仕上がり
傷んだ
キューティクルを補修
キューティクルを補修
毛先まで1本1本を
なめらかに
なめらかに
みずみずしくさわやかなハーバルフローラルの香り
パサつきや広がりを抑えた
“しっとりうるツヤ”な仕上がり
パサつきや広がりを抑えた
“しっとりうるツヤ”な仕上がり
パサつきや広がりを
抑える
抑える
濃密なうるおいで
毛先までしっとり
毛先までしっとり
みずみずしく華やかなホワイトフローラルの香り
しなやかにまとまる
“ふんわり軽やか” な仕上がり
しなやかにまとまる
“ふんわり軽やか” な仕上がり
ごわつきを
ケア
ケア
うるおいを与えて
しなやかに
しなやかに
みずみずしくフレッシュなフルーティフローラルの香り
洗い流さないトリートメントで
キューティクルケア
Treatment Fixer
うるおいケア
＆
ダメージ補修
ごわつく髪も１本１本をコーティングして
“つるんとまとまる” 髪へ
ごわつく髪も１本１本をコーティングして
“つるんとまとまる” 髪へ
スタイリングの仕上げにも
キューティクル表面を
保護してつるんとなめらか
保護してつるんとなめらか
枝毛・切れ毛を補修して
まとまりやすく
まとまりやすく
みずみずしく清らかなクリアフローラルの香り
ヘアミストでパサつきケア
Treatment Mist
うるおいケア
＆
ダメージ補修
UVカット
成分配合
※
オイルinの2層ミストで
“うるおってさらツヤ”な髪へ
オイルinの2層ミストで
“うるおってさらツヤ”な髪へ
日中のこまめな重ねづけにも
ダメージ補修して
さらさらに
さらさらに
オイルin＆うるおいケアで
つややかに
つややかに
みずみずしく清らかなクリアフローラルの香り
軽やかなスタイリングを
キープするヘアワックス
Hair Wax
うるおいケア
＆
ダメージ補修
UVカット
成分配合
※
スタイリング
長持ち
ダメージを補修しながら
ニュアンスのある髪へ
ダメージを補修しながら
ニュアンスのある髪へ
スタイリングしながら
うるおいケアも
うるおいケアも
軽やかなニュアンスを自由自在
スタイリング長持ち
スタイリング長持ち
みずみずしく清らかなクリアフローラルの香り
さまざまなスタイルに
動きのある
ニュアンスヘアに
毛先の
ニュアンスづけに
スタイリングが
崩れた時にも
