@charset "utf-8";

/* ==========================================================================
style.css
【HA】脱臭炭

設計方針：SPファースト 1ソースレスポンシブ
記述は min-width の一方向のみ。メディアクエリ外＝SP、内＝各幅の差分のみ

ブレイクポイント
768px以下              SPレイアウト
769px以上              PCレイアウト（ナビはハンバーガーのまま）
900px以上              micro / tappuri / graph / history の2カラム
                       ※4セクションは900px必要なため769pxではみ出す
1120px以上             グローバルナビを横並びに（1行に収まる最小幅は1118px）

カンプ：750 × 6731px ／ コーディング基準幅 375px（カンプ値 ÷2）

命名規則：BEM（区切りはアンダースコアのみ）
状態クラス：is_open / is_active / is_visible / is_fixed / is_closing
========================================================================== */


/* ==========================================================================


01. base


========================================================================== */
html {
font-size: 62.5%;
}
body {
font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', meiryo, sans-serif;
color: #fff;
background-color: #000;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
a {
color: inherit;
transition: opacity 0.3s ease;
}
html.is_fixed {
overflow: hidden;
}

@media (hover: hover) {
a:hover{opacity: 0.7;}
}

br.pc{display: none;}
br.sp{display: inline;}
 
@media screen and (min-width: 769px) {
br.pc{display: inline;}
br.sp{display: none;}
}



.frame {
position: relative;
z-index: 0;
padding: 20px 16px;
color: #333;
background-color: #846316;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}
.frame::before {
position: absolute;
inset: 0.5px;
content: "";
background-image: linear-gradient(to right, #fff57f 0%, #edc740 50%, #db9900 100%);
clip-path: polygon(19.8px 0, calc(100% - 19.8px) 0, 100% 19.8px, 100% calc(100% - 19.8px), calc(100% - 19.8px) 100%, 19.8px 100%, 0 calc(100% - 19.8px), 0 19.8px);

}
.frame::after {
position: absolute;
inset: 3.5px;
content: "";
background-color: #fff;
clip-path: polygon(18.5px 0, calc(100% - 18.5px) 0, 100% 18.5px, 100% calc(100% - 18.5px), calc(100% - 18.5px) 100%, 18.5px 100%, 0 calc(100% - 18.5px), 0 18.5px);
}
.frame > * {
position: relative;
z-index: 1;
}


.js_fade_up,
.js_fade_down {
opacity: 0;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}
.js_fade_up {
transform: translateY(30px);
}
.js_fade_down {
transform: translateY(-30px);
}
.js_fade_up.is_active,
.js_fade_down.is_active {
opacity: 1;
transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
.js_grow,
.js_fade_up,
.js_fade_down {
opacity: 1;
transform: none;
transition: none;
}
}


/* ==========================================================================


02.メニュー


========================================================================== */
header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 60px;
background-color: #000;
}
header > section {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding-right: 13px;
padding-left: 18px;
}
header h1 {
width: 65px;
line-height: 0;
}
header h1 img {
width: 100%;
height: auto;
}
header button {
position: relative;
z-index: 110;
flex-shrink: 0;
width: 41px;
height: 41px;
background-image: url("../img/common/navi_btn.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
header button.is_open {
background-image: url("../img/common/cross_g.webp");
background-size: 30px 30px;
}
header ul {
position: fixed;
inset: 60px 0 0;
z-index: 90;
visibility: hidden;
padding-inline: 14px;
overflow-y: auto;
overscroll-behavior: contain;
background-color: #000;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
header ul.is_open {
visibility: visible;
opacity: 1;
}
header li {
border-top: 1px solid #545454;
}
header li:last-child {
border-bottom: 1px solid #545454;
}
header li a {
position: relative;
display: flex;
align-items: center;
min-height: 70px;
padding-right: 14px;
padding-left: 29px;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: #fff;
}
header li:last-child a {
padding-right: 34px;
}
header li:last-child a::after {
position: absolute;
top: 50%;
right: 13px;
width: 24px;
height: 24px;
content: "";
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M5.5 3H13v7.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
transform: translateY(-50%);
}
:target {
scroll-margin-top: 60px;
}
.txt_area:target {
scroll-margin-top: 75px;
}

/* ==========================================================================


main


========================================================================== */
main {
background-color: #efefef;
background-image: url("../img/top/contents_bg01.webp");
background-repeat: repeat-y;
background-position: top center;
background-size: 100% auto;
}

/* ==========================================================================


下層ページ


========================================================================== */
.page_lower main {
min-height: calc(100vh - 60px);
padding-top: 60px;
}

/* ==========================================================================


lineup_visual / lineup_nav（製品ラインナップ）


========================================================================== */
.lineup_visual img {
width: 100%;
height: auto;
}
.lineup_nav ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 371px;
padding: 15px 10px 10px;
margin-inline: auto;
gap: 5px;
}
.lineup_nav img {
width: 100%;
height: auto;
}

/* ==========================================================================


item（製品詳細）


========================================================================== */
.item {
padding: 40px 15px;
color: #fff;
background-color: #000;
}
.item:nth-of-type(even) {
background-image: linear-gradient(to right, #000, #2e2624 50%, #000);
}
.item img {
display: block;
width: 100%;
height: auto;
}
.item h2 {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.item h2::before,
.item h2::after {
display: block;
width: 130px;
height: 2px;
margin-inline: auto;
content: "";
background-image: linear-gradient(to right, #fff57f, #edc740 50%, #db9900);
}
.item h2::before {
margin-bottom: 5px;
}
.item h2::after {
margin-top: 5px;
}
.item h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.item h3 + figure {
margin-top: 7px;
}
.item_block {
margin-top: 35px;
}
.item p {
margin-top: 5px;
font-size: 14px;
line-height: 1.8;
text-align: center;
}
.item_list {
display: grid;
grid-template-columns: repeat(auto-fit, 162px);
justify-content: center;
margin-top: 40px;
column-gap: 20px;
}
.item_list figure {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.item_list:has(> li + li) figure {
grid-template-rows: 100px auto;
}
.item_wide .item_list:has(> li + li) figure {
grid-template-rows: 195px auto;
}
.item_list figure img {
zoom: 0.28;
align-self: end;
width: auto;
max-width: none;
}
.item_list figcaption {
margin-top: 5px;
font-size: 12px;
line-height: 1.5;
text-align: center;
white-space: nowrap;
}
.item_list button {
display: block;
width: 100%;
margin-top: 10px;
aspect-ratio: 637 / 161;
background-image: url("../img/lineup/shop_btn_off.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.item_list button[aria-expanded="true"] {
background-image: url("../img/lineup/shop_btn_on.webp");
}
.shop_list {
height: 0;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.item_list a {
display: block;
}
.item_shop > a {
margin-top: 10px;
}
.car_icon {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 10px;
gap: 15px;
}
.back_top {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 185px;
height: 40px;
margin: 45px auto 0;
font-size: 14px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
.back_top::before {
position: absolute;
left: 10px;
width: 0;
height: 0;
content: "";
border-top: 6px solid transparent;
border-right: 9px solid #fff;
border-bottom: 6px solid transparent;
}

/* ==========================================================================


image_area


========================================================================== */
.image_area {
background-color: #000;
padding-top: 60px;
}
.image_area img {
width: 100%;
height: auto;
}
.image_area_inner {
padding-bottom: 20px;
background-image: url("../img/top/main_image02_bg.webp");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}
.image_area .btn {
width: 251px;
margin: -20px auto 0;
}
.image_area .btn a {
transition: filter 0.3s ease;
}

@media (hover: hover) {
.image_area .btn a:hover {
opacity: 1;
filter: brightness(1.15);
}
}

.image_area .area02 {
width: 200px;
margin: 16px auto 0;
}
.image_area .txt_area {
margin-top: 32px;
font-size: 14px;
font-weight: 700;
line-height: 2;
text-align: center;
}
.image_area .txt_area sup {
font-family: meiryo, sans-serif;
font-size: 8px;
}
 
/* ==========================================================================


micro


========================================================================== */
.micro {
padding: 10px 15px 45px;
background-color: #000;
}
.micro img {
width: 100%;
height: auto;
}
.micro_title {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
gap: 10px;
font-size: 17px;
font-weight: 700;
line-height: 1.6;
color: #000;
}
.micro_title::before,
.micro_title::after {
flex-shrink: 0;
width: 3px;
height: 35px;
content: "";
background-color: #000;
}
.micro_title::before {
transform: rotate(-34deg);
}
.micro_title::after {
transform: rotate(34deg);
}
.micro_title span {
position: relative;
top: -5px;
}
.micro_bubble {
width: 65%;
margin-inline: auto;
}
.micro_powder {
width: 43%;
margin: 5px auto 0;
}
.micro_powder + .micro_title {
margin-top: 20px;
}
/* ==========================================================================


scroll animation


========================================================================== */
.js_grow {
opacity: 0;
transform: scale(0.15);
transform-origin: center bottom;
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.js_grow.is_active {
opacity: 1;
transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
.js_grow {
opacity: 1;
transform: none;
transition: none;
}
}

/* ==========================================================================


history_intro


========================================================================== */
.history_intro {
position: relative;
width: 100%;
aspect-ratio: 375 / 751;
overflow: hidden;
color: #231815;
}
.history_intro::before,
.history_intro::after {
position: absolute;
aspect-ratio: 1;
content: "";
background-repeat: no-repeat;
background-size: 100% 100%;
}
.history_intro::before {
top: calc(100% * 86 / 751);
left: calc(100% * 124 / 375);
width: calc(100% * 282 / 375);
background-image: url("../img/top/text_area_bg01.webp");
}
.history_intro::after {
top: calc(100% * 304 / 751);
left: calc(100% * -21 / 375);
width: calc(100% * 203 / 375);
background-image: url("../img/top/text_area_bg02.webp");
}
.history_intro_text01,
.history_intro_text02,
.history_intro_text03 {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
font-size: calc(100vw * 14 / 375);
font-weight: 700;
line-height: 2.143;
text-align: center;
text-shadow: 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff;
}
.history_intro_text01 {
top: calc(100% * 36 / 751);
}
.history_intro_text02 {
top: calc(100% * 391 / 751);
}
.history_intro_text03 {
top: calc(100% * 655 / 751);
}
.history_intro figure {
position: absolute;
top: calc(100% * 540 / 751);
left: calc(100% * 138 / 375);
z-index: 1;
width: calc(100% * 99 / 375);
}
.history_intro img {
width: 100%;
height: auto;
}

/* ==========================================================================
lineup
========================================================================== */
.lineup {
padding: 20px 0 35px;
color: #000;
}
.lineup img {
display: block;
zoom: 0.2525;
}
.lineup > ul > li > figure img {
zoom: 1;
width: 100%;
height: auto;
}
.lineup figure {
display: flex;
flex-direction: column;
align-items: center;
}
.lineup h2 {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
font-size: 25px;
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.lineup h2::before,
.lineup h2::after {
flex-shrink: 0;
width: 2px;
height: 65px;
content: "";
background-color: #000;
}
.lineup h2::before {
transform: rotate(-29deg);
}
.lineup h2::after {
transform: rotate(29deg);
}
.lineup > ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-inline: 20px;
margin-top: 10px;
column-gap: 30px;
row-gap: 45px;
}
.lineup_full {
grid-column: 1 / -1;
}
.lineup_full > figure {
max-width: calc((100% - 30px) / 2);
margin-inline: auto;
}
.lineup li ul {
display: grid;
justify-content: center;
margin-top: 20px;
row-gap: 20px;
}
.lineup_full ul {
grid-template-columns: repeat(2, 140px);
}
.lineup li li figure {
justify-content: flex-end;
height: 100%;
}
.lineup > a {
display: flex;
justify-content: center;
margin-top: 45px;
}
.lineup figcaption {
margin-top: 5px;
font-size: 12px;
line-height: 1.25;
text-align: center;
}
/* ==========================================================================


tappuri


========================================================================== */
.tappuri,
.graph,
.methyl,
.history{
color: #fff;
background-image: linear-gradient(to right, #000, #2e2624 50%, #000);
}
.tappuri {
padding: 20px 0 15px;
}
.tappuri img {
zoom: 0.2525;
}
.tappuri h2 {
display: flex;
justify-content: center;
}
.tappuri figure {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 35px;
margin-top: 25px;
}
.tappuri p {
font-size: 14px;
font-weight: 700;
line-height: 2;
text-align: center;
}
.tappuri figure + p {
margin-top: 15px;
}
.tappuri sup {
font-size: 10px;
line-height: 0;
}
.tappuri strong {
font-size: 16px;
line-height: 1.75;
color: #fcee21;
}
.tappuri small {
font-size: 10px;
font-weight: 400;
}

/* ==========================================================================


graph


========================================================================== */
.graph {
padding: 15px 0 30px;
}
.graph img {
zoom: 0.2525;
}
.graph figure {
display: flex;
justify-content: center;
}
.graph figure + figure {
margin-top: 15px;
}

/* ==========================================================================


methyl


========================================================================== */
.methyl {
padding: 30px 0 45px;
}
.methyl img {
zoom: 0.2525;
}
.methyl h2 {
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.methyl strong {
font-size: 18px;
color: #e6b422;
}
.methyl p {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
line-height: 2;
text-align: center;
}
.methyl figure {
display: flex;
justify-content: center;
margin-top: 5px;
}

/* ==========================================================================


history


========================================================================== */
.history {
padding: 70px 0 35px;
}
.history img {
zoom: 0.2525;
}
.history figure {
display: flex;
justify-content: center;
}
.history figure:has(figcaption) {
flex-direction: column;
align-items: center;
}
.history figcaption {
padding-inline: 15px;
margin-top: 10px;
text-align: center;
}
.history small {
font-size: 10px;
font-weight: 400;
line-height: 1.5;
}
.history figure + h2 {
margin-top: 40px;
}
.history h2 {
font-size: 18px;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.history p {
margin-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 2;
text-align: center;
}
.history p + figure {
margin-top: 20px;
}


/* ==========================================================================


hr（金グラデーションの区切り線）


========================================================================== */
hr {
height: 5px;
margin: 0;
border: none;
background-image: linear-gradient(to right, #fff57f, #edc740 50%, #db9900);
}

/* ==========================================================================


faq


========================================================================== */
.faq {
padding: 20px 15px 30px;
color: #000;
}
.faq h2 {
font-size: 32px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.faq details {
border-bottom: 1px solid #333;
}
.faq details:first-of-type {
margin-top: 25px;
border-top: 1px solid #333;
}
.faq details:last-of-type {
border-bottom: 1px solid #333;
}
.faq details strong{
display:block;
}
.faq summary {
position: relative;
padding: 5px 40px 10px 0;
font-size: 14px;
font-weight: 700;
line-height: 1.34;
list-style: none;
cursor: pointer;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary span {
display: block;
}
.faq summary::before {
position: absolute;
top: 50%;
right: 0;
width: 30px;
height: 30px;
content: "";
background-color: #666;
border-radius: 50%;
transform: translateY(-50%);
}
.faq summary::after {
position: absolute;
top: 50%;
right: 5px;
width: 20px;
height: 14px;
content: "";
background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
background-repeat: no-repeat;
background-position: center;
background-size: 14px 2px, 2px 14px;
transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(-50%);
}
.faq details[open] summary::after {
background-size: 14px 2px, 0 0;
}
.faq details.is_closing summary::after {
background-size: 14px 2px, 2px 14px;
}
.faq summary + div {
margin-inline: 10px;
padding: 5px 15px 35px;
font-size: 14px;
line-height: 2;
text-align: justify;
border-top: 1px dashed #333;
}
.faq summary + div > * + * {
margin-top: 15px;
}
.faq figure {
margin-top: 15px;
}
.faq figcaption {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
text-align: center;
}
.faq img {
display: block;
zoom: 0.2525;
margin-inline: auto;
}
.faq figcaption + img {
margin-top: 5px;
}
.faq > a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 210px;
height: 45px;
margin: 30px auto 0;
font-size: 16px;
font-weight: 700;
color: #fff;
background-color: #666;
border-radius: 10px;
box-shadow: -2px 2px 0 #000;
}
.faq > a img {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
}

/* ==========================================================================
cm
========================================================================== */
.cm {
padding: 10px 10px 35px;
background-color: #000;
background-image: url("../img/top/cm_bg.webp");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}
.cm h2 {
display: flex;
justify-content: center;
}
.cm img {
zoom: 0.2525;
}
.cm .frame {
margin-top: -5px;
padding: 15px;
}
.cm .frame::after {
background-color: #000;
}
.cm iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}


/* ==========================================================================
footer
========================================================================== */
.footer {
position: relative;
width: 100%;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-feature-settings: normal;
line-height: 1.5;
letter-spacing: 0.05em;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: auto;
background-color: #f2f2f2;
}
.footer_inner {
width: 100%;
padding: 8vw 0 14vw;
}
.footer_left {
width: 180px;
margin-inline: auto;
}
.footer_logo a {
display: block;
}
.footer_logo img {
width: 100%;
height: auto;
}
.footer_copyright {
position: absolute;
left: 50%;
bottom: 20px;
font-size: 10px;
letter-spacing: 0.05em;
color: #808080;
text-align: center;
transform: translateX(-50%);
}
.footer_list {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-inline: 5%;
margin-top: 20px;
row-gap: 15px;
}
.footer_list_item {
display: inline-block;
font-size: 12px;
letter-spacing: 0.05em;
}
.footer_list_item:not(:first-child) {
margin-left: 10px;
}
.footer_list_item a {
font-size: 12px;
color: #808080;
}
.footer_list_item a[target="_blank"]::after {
display: inline-block;
width: 13px;
height: 13px;
margin-left: 5px;
content: "";
background-image: url("../img/common/icon_target.svg");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

@media (hover: hover) {
.footer_list_item a:hover {
opacity: 1;
text-decoration: underline;
}
}

/* ==========================================================================
follow_nav（追従ナビ）
========================================================================== */
.follow_nav {
position: fixed;
right: 13px;
bottom: 35px;
z-index: 80;
display: grid;
gap: 4px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.follow_nav:has(li + li) {
transform: translateY(45px);
}
.follow_nav.is_visible {
transform: none;
}
.follow_nav img {
width: 41px;
height: 41px;
}
.follow_nav li {
visibility: hidden;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.follow_nav li:first-child:not(:last-child),
.follow_nav.is_visible li {
visibility: visible;
opacity: 1;
}


/* ==========================================================================
modal（オンラインショップ）
========================================================================== */
.modal {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: 15px;
margin: 0;
overflow: auto;
overscroll-behavior: contain;
background-color: transparent;
border: none;
opacity: 0;
transition: opacity 0.4s ease, display 0.4s ease allow-discrete, overlay 0.4s ease allow-discrete;
}
.modal[open] {
display: flex;
opacity: 1;
}
@starting-style {
.modal[open] {
opacity: 0;
}
}
.modal::backdrop {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.4s ease, display 0.4s ease allow-discrete, overlay 0.4s ease allow-discrete;
}
.modal[open]::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}
@starting-style {
.modal[open]::backdrop {
background-color: rgba(0, 0, 0, 0);
}
}
.modal_inner {
width: 345px;
max-width: 100%;
margin: auto;
}
.modal:focus {
outline: none;
}
.modal_close {
display: block;
width: 30px;
margin: 0 5px 10px auto;
}
.modal_close img {
display: block;
width: 100%;
height: auto;
}
.modal_body {
padding: 25px 15px 40px;
background-color: #fff;
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.modal_body h2 {
display: flex;
justify-content: center;
}
.modal_body h2 img {
display: block;
width: 315px;
height: auto;
}
.modal_shop {
display: grid;
grid-template-columns: 240px;
justify-content: center;
margin-top: 35px;
gap: 15px;
}
.modal_shop img {
display: block;
width: 100%;
height: auto;
}

@media (prefers-reduced-motion: reduce) {
.modal,
.modal::backdrop {
transition: none;
}
}


/* ==========================================================================


PC（769px以上）


========================================================================== */
@media screen and (min-width: 769px) {
main {
background-image: url("../img/top/contents_bg01_pc.webp");
background-repeat: repeat;
background-position: top left;
background-size: 2880px auto;
}
:target {
scroll-margin-top: 90px;
}
.txt_area:target {
scroll-margin-top: 90px;
}
header {
height: 90px;
}
header > section {
padding-right: 40px;
padding-left: 40px;
}
header h1 {
width: 105px;
}
header ul {
inset: 90px 0 0;
}
.page_lower main {
min-height: calc(100vh - 90px);
padding-top: 90px;
}
.lineup_nav ul {
max-width: 630px;
padding: 15px 0 10px;
gap: 10px;
}
.image_area {
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 90px;
margin-inline: auto;
}
.image_area_inner {
display: contents;
}
.image_area .visual {
grid-area: 1 / 1;
}
.image_area .area02 {
grid-area: 1 / 2;
width: auto;
margin: 0;
}
.image_area .btn {
z-index: 1;
grid-area: 1 / 1 / 2 / -1;
align-self: end;
justify-self: center;
width: 361px;
margin: 0 0 -40px;
}
hr {
height: 10px;
}
.image_area .txt_area {
grid-column: 1 / -1;
margin-top: 110px;
font-size: 22px;
line-height: 2;
}
.image_area .txt_area sup {
font-size: 10px;
}
.micro {
padding: 30px 15px 0;
}
.history_intro {
max-width: 1440px;
aspect-ratio: 1440 / 1032;
margin-inline: auto;
overflow: visible;
}
.history_intro::before {
top: calc(100% * 51 / 1032);
left: calc(100% * 674 / 1440);
width: calc(100% * 464 / 1440);
}
.history_intro::after {
top: calc(100% * 430 / 1032);
left: calc(100% * 303 / 1440);
width: calc(100% * 318 / 1440);
}
.history_intro_text01,
.history_intro_text02,
.history_intro_text03 {
font-size: min(calc(100vw * 18 / 1440), 18px);
font-weight: 700;
line-height: 3;
letter-spacing: 1px;
-webkit-text-stroke: 0.3px currentColor;
text-align: left;
text-shadow: 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff;
}
.history_intro_text01 {
top: calc(100% * 162 / 1032);
left: calc(100% * 269 / 1440);
width: auto;
}
.history_intro_text02 {
top: calc(100% * 556 / 1032);
left: calc(100% * 541 / 1440);
width: auto;
}
.history_intro_text03 {
top: calc(100% * 919 / 1032);
left: 0;
width: 100%;
text-align: center;
}
.history_intro figure {
top: calc(100% * 765 / 1032);
left: calc(100% * 636 / 1440);
width: calc(100% * 166 / 1440);
}
.lineup {
padding: 80px 0 100px;
}
.lineup img {
zoom: 0.4;
}
.lineup > ul > li > figure img {
width: 302px;
}
.lineup h2 {
gap: 20px;
font-size: 32px;
}
.lineup > ul {
max-width: 940px;
margin-top: 20px;
margin-inline: auto;
column-gap: 0;
row-gap: 100px;
}
.lineup_full > figure {
max-width: none;
}
.lineup li ul {
display: flex;
justify-content: center;
column-gap: 45px;
margin-top: 35px;
}
.lineup_bottom {
display: flex;
flex-direction: column;
}
.lineup_bottom > ul {
flex-grow: 1;
align-items: flex-end;
}
.lineup_bottom li figure {
height: auto;
}
.lineup figcaption {
font-size: 16px;
}
.lineup > a {
margin-top: 50px;
}
.lineup > a img {
zoom: 0.375;
}
.methyl {
padding: 0px 0 95px;
}
.methyl h2 {
font-size: 22px;
}
.methyl strong {
font-size: 28px;
}
.methyl p {
margin-top: 15px;
font-size: 18px;
line-height: 2.2;
}
.methyl img {
zoom: 0.37;
}
.methyl figure {
margin-top: 15px;
}
.cm {
padding: 55px 0 120px;
background-image: url("../img/top/cm_bg_sp.webp");
background-size: cover;
}
.cm img {
zoom: 0.4;
}
.cm .frame {
max-width: 690px;
padding: 25px;
margin-top: -10px;
margin-inline: auto;
}
.faq {
max-width: 940px;
padding: 75px 20px 100px;
margin-inline: auto;
}
.faq h2 {
font-size: 32px;
}
.faq details:first-of-type {
margin-top: 0;
}
.faq summary {
padding: 20px 65px 20px 30px;
font-size: 18px;
}
.faq summary span {
display: inline;
}
.faq summary::before {
right: 25px;
width: 40px;
height: 40px;
}
.faq summary::after {
right: 33px;
width: 24px;
height: 24px;
background-size: 24px 4px, 4px 24px;
}
.faq details[open] summary::after {
background-size: 24px 4px, 0 0;
}
.faq details.is_closing summary::after {
background-size: 24px 4px, 4px 24px;
}
.faq summary + div {
margin-inline: 25px;
padding: 20px 5px 25px;
font-size: 18px;
line-height: 2.2;
}
.faq summary + div > * + * {
margin-top: 0;
}
.faq summary + div > figure {
margin-top: 20px;
}
.faq figcaption {
font-size: 16px;
font-weight: 400;
}
.faq img {
zoom: 0.3;
}
.faq > a {
margin-top: 50px;
}
.footer {
position: static;
}
.footer_inner {
display: flex;
align-items: center;
justify-content: space-between;
width: min(1100px, 95%);
padding: 56px 0;
margin-inline: auto;
}
.footer_left {
flex-shrink: 0;
margin: 3px 20px 0 0;
}
.footer_copyright {
position: static;
margin-top: 7px;
font-size: 12px;
transform: none;
}
.footer_list {
justify-content: flex-start;
padding-inline: 0;
margin-top: 0;
column-gap: 20px;
row-gap: 10px;
}
.footer_list_item {
display: flex;
align-items: center;
justify-content: space-around;
font-size: 16px;
}
.footer_list_item:not(:first-child) {
margin-left: 0;
}
.footer_list_item a {
font-size: 16px;
}
.footer_list_item a[target="_blank"]::after {
width: 16px;
height: 16px;
}
.follow_nav {
right: 20px;
bottom: 60px;
grid-auto-flow: column;
}
.follow_nav:has(li + li) {
transform: translateX(64px);
}
.follow_nav img {
width: 60px;
height: 60px;
}
.modal_inner {
width: 900px;
}
.modal_close {
width: 40px;
margin: 0 20px 20px auto;
}
.modal_body {
padding: 50px 0;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}
.modal_body h2 img {
width: 415px;
}
.modal_shop {
grid-template-columns: repeat(2, 240px);
margin-top: 40px;
}
}


/* ==========================================================================


PC（900px以上）
micro / tappuri / graph / history の4セクションは
2カラムに900px必要なため、この幅から切り替える


========================================================================== */
@media screen and (min-width: 900px) {
.micro {
padding: 30px 0 80px;
}
.micro .frame {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1000px;
padding: 50px 50px 40px;
margin-inline: auto;
}
.micro_title {
grid-area: 1 / 1;
font-size: 20px;
}
.micro_title::before,
.micro_title::after {
height: 40px;
}
.micro_powder + .micro_title {
grid-area: 1 / 2;
margin-top: 0;
}
.micro_bubble {
grid-area: 2 / 1;
justify-self: start;
width: 371px;
margin: 20px 0 0 40px;
}
.micro_powder {
display: none;
}
.micro_absorb {
grid-area: 2 / 2;
justify-self: center;
width: 437px;
margin-top: 25px;
}
.tappuri {
display: grid;
grid-template-columns: 370px 490px;
justify-content: center;
column-gap: 40px;
padding: 70px 0 20px;
}
.tappuri img {
zoom: 0.5;
}
.tappuri figure > img {
display: none;
}
.tappuri h2 {
grid-column: 1 / -1;
margin-bottom: 70px;
}
.tappuri figure {
grid-area: 2 / 1 / 4 / 2;
align-self: start;
margin-top: 35px;
}
.tappuri p {
grid-column: 2;
font-size: 18px;
line-height: 2.2;
text-align: left;
}
.tappuri figure + p {
margin-top: 5px;
}
.tappuri strong {
font-size: 18px;
line-height: inherit;
}
.tappuri small {
font-size: 12px;
}
.tappuri sup {
font-size: 12px;
}
.graph {
display: grid;
grid-template-columns: repeat(2, 441px);
justify-content: center;
column-gap: 18px;
padding: 45px 0 70px;
}
.graph img {
zoom: 0.5;
}
.graph figure + figure {
margin-top: 0;
}
.history {
display: grid;
grid-template-columns: 440px 425px;
justify-content: center;
column-gap: 35px;
padding: 76px 0 100px;
}
.history figure {
grid-column: 1 / -1;
}
.history img {
zoom: 0.371;
}
.history small {
font-size: 12px;
}
.history figure + h2 {
grid-column: 1 / -1;
margin-top: 60px;
font-size: 32px;
}
.history p {
grid-column: 1;
grid-row: 3;
margin-top: 5px;
font-size: 18px;
line-height: 2.2;
text-align: left;
}
.history p + figure {
grid-column: 2;
grid-row: 3;
align-self: center;
margin-top: 0;
}
.history p + figure img {
zoom: 0.309;
}
.item {
display: grid;
grid-template-columns: repeat(2, 415px);
justify-content: center;
padding: 65px 0;
column-gap: 70px;
}
.item h2 {
grid-column: 1 / -1;
font-size: 36px;
}
.item h2::before,
.item h2::after {
width: 195px;
height: 3px;
}
.item h2::before {
margin-bottom: 10px;
}
.item h2::after {
margin-top: 10px;
}
.item h3 {
font-size: 22px;
}
.item h3 + figure {
margin-top: 10px;
}
.item p {
margin-top: 15px;
font-size: 16px;
line-height: 1.55;
}
.item_shop {
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 5px;
}
.shop_list {
grid-column: 1 / -1;
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
height: auto;
overflow: visible;
gap: 5px;
}
.item_block {
margin-top: 25px;
}
.item_block:nth-of-type(3) {
grid-column: 1 / -1;
margin-top: 50px;
}
.item_block:nth-of-type(3) figure {
max-width: 415px;
margin-inline: auto;
}
.item_list {
grid-column: 1 / -1;
grid-template-columns: 1fr;
padding: 45px 0;
margin-top: 40px;
column-gap: 0;
row-gap: 60px;
background-color: rgba(255, 255, 255, 0.2);
}
.item_list > li {
display: grid;
grid-template-columns: 280px 325px;
align-items: center;
justify-content: center;
column-gap: 5px;
}
.item_list figure {
margin-right: 40px;
}
.item_list:has(> li + li) figure {
grid-template-rows: 145px auto;
}
.item_wide .item_list:has(> li + li) figure {
grid-template-rows: auto auto;
}
.item_list figure img {
zoom: 0.41;
}
.item_wide .item_list figure img {
zoom: 0.28;
}
.item_list figcaption {
font-size: 14px;
}
.item_list button {
display: none;
}
.item_shop > a {
margin-top: 15px;
}
.item_wide {
grid-template-columns: 900px;
}
.item_wide .item_block + .item_block {
margin-top: 45px;
}
.item_wide .item_block figure {
max-width: 415px;
margin-inline: auto;
}
.car_icon {
grid-template-columns: repeat(4, 198px);
justify-content: center;
margin-top: 15px;
gap: 20px;
}
.back_top {
width: 310px;
height: 65px;
margin-top: 150px;
font-size: 24px;
border-width: 2px;
border-radius: 15px;
}
.back_top::before {
left: 15px;
border-top: 9px solid transparent;
border-right: 14px solid #fff;
border-bottom: 9px solid transparent;
}
}


/* ==========================================================================


PC（1120px以上）
グローバルナビが1行に収まる幅。これ未満はハンバーガーメニュー


========================================================================== */
@media screen and (min-width: 1120px) {
header button {
display: none;
}
header ul {
position: relative;
inset: auto;
top: 5px;
display: flex;
align-items: center;
column-gap: 15px;
visibility: visible;
padding-inline: 0;
overflow: visible;
background-color: transparent;
opacity: 1;
}
header li {
display: flex;
align-items: center;
column-gap: 15px;
border-top: none;
}
header li:last-child {
border-bottom: none;
}
header li + li::before {
width: 1px;
height: 20px;
content: "";
background-color: #fff;
}
header li a {
min-height: 0;
padding-right: 0;
padding-left: 0;
font-size: 16px;
}
header li:last-child a {
padding-right: 0;
}
header li:last-child a::after {
position: static;
width: 20px;
height: 20px;
transform: none;
}
header li a::before {
position: absolute;
right: 0;
bottom: -5px;
left: 0;
height: 1px;
content: "";
background-color: #fff;
transition: transform 0.3s ease;
transform: scaleX(0);
}
header li a:hover {
opacity: 1;
}
header li a:hover::before {
transform: scaleX(1);
}
}