@charset "UTF-8";

/*-------------------------------------------
 Reset
-------------------------------------------*/
*, *::before, *::after {
	box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}
img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
a {
	text-decoration: none;
	color: inherit;
}
button, input, select, textarea {
	font: inherit;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
}
button {
	cursor: pointer;
}



/*-------------------------------------------
 Font
-------------------------------------------*/
@font-face {
	font-family: "Poppins";
	src: url('font/Poppins-Regular.ttf') format("truetype");
    font-weight: normal;
}
@font-face {
	font-family: "HelveticaNeue";
	src: url('font/HelveticaNeueLTProMd.otf') format("opentype");
    font-weight: normal;
}

:root {
    --font-gothic: "Yu Gothic", "Yu Gothic UI", "YuGothic", "游ゴシック体", "Hiragino Sans", "Meiryo", sans-serif;
    --font-mincho: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", serif;
}



/*-------------------------------------------
 Animation まとめ
-------------------------------------------*/
/* テキストloop */
@keyframes h_loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@-webkit-keyframes h_loop {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); }
}
.h_loop {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    display: flex;
}
.h_loop_inner {
    display: flex;
    flex-shrink: 0;
}
.h_loop_inner.is-animated {
    animation: h_loop 50s linear infinite;
    -webkit-animation: h_loop 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}
.h_loop_inner img {
    height: 50px;
    width: auto;
    display: block;
}
@media screen and (max-width: 767px) {
	.h_loop img {
		height: 30px;
	}
}

/* フェードイン Base */
.fadein {
    opacity: 0;
}
.fadein.show {
    animation: fadeIn 1.4s forwards;
    animation-delay: calc(0.4s + var(--delay, 0) * 0.1s);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Grid画像を1枚ずつフェードイン */
.grid-animation {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.grid-animation.is-show {
    opacity: 1;
    transform: translateY(0);
}



/*-------------------------------------------
 Base
-------------------------------------------*/
html {
	scroll-behavior: smooth;
}
div, section {
    scroll-margin-top: 20px;
}
body {
    font-family: var(--font-gothic);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    background: #ebebeb;
}

a:hover {
    opacity: 0.7;
}

.pc_only {display: block;}
.sp_only {display: none;}
.pc_br {display: block;}
@media only screen and (max-width: 1140px) {
	.tab_br {display: block;}
}
@media only screen and (max-width: 767px) {
	.pc_only {display: none;}
	.sp_only {display: block;}
	.pc_br {display: inline;}
	.sp_br {display: block;}
}



/*-------------------------------------------
 Header
-------------------------------------------*/
header .logo {
    max-width: 370px;
    width: 34%;
    margin: 50px 0 150px 70px;
}
header h1 {
    max-width: 720px;
    width: 70%;
    margin: 0 auto 70px auto;
}
@media only screen and (max-width: 767px) {
    header .logo {
        width: 64%;
        margin: 20px auto 70px 20px;
    }
    header h1 {
        width: 67%;
        margin: 0 auto 52px auto;
    }
}



/*-------------------------------------------
 Main
-------------------------------------------*/
/* ========= リード文 ========= */
.lead p {
    text-align: center;
    line-height: 2.2;
    font-size: 17px;
    margin: 90px auto 100px auto;
}
@media only screen and (max-width: 960px) {
    .lead p {
        font-size: 1.7vw;
    }
}
@media only screen and (max-width: 767px) {
    .lead p {
        font-size: 3vw;
        margin: 50px auto 70px auto;
    }
}

/* ========= ギャラリー一覧 ========= */
.item-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-width: 1490px;
    width: 96%;
    margin: auto;
}
.item-grid .item img:hover {
    opacity: 0.7;
}
.item img {
    width: 100%;
    display: block;
    cursor: pointer;
}
@media only screen and (max-width: 1100px) {
    .item-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media only screen and (max-width: 767px) {
    .item-grid {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        margin-bottom: 70px;
    }
}

/* ========= モーダル ========= */
.modal {
    position: fixed;
    z-index: 90;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal-content { /* 中央配置 */
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ratio-box { /* 比率固定 */
    position: relative;
    aspect-ratio: 2 / 3;
    width: min(90vw, 90vh * 2 / 3);
    max-width: 1000px;
    max-height: 90vh;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    border: 1px solid #aaa;
}
/* 商品切替フェード */
.modal-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    padding: 8% 8% 5% 8%;
    display: flex;
    flex-direction: column;
}
.modal-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
/* モーダル内テキスト */
.modal-content .text_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
}
.modal-content .text_area p strong {
    font-weight: bold;
    border-bottom: 1px solid #666;
}
.modal-content .text_area a.item_link img {
    display: inline-block;
    height: 0.9em;
    width: auto;
    margin: 0.45em 0 0 0.2em;
}
_::-webkit-full-page-media, _:future, :root .modal-content .text_area a.item_link img {
    margin: 0.35em 0 0 0.2em;
}
@media only screen and (max-width: 767px) {
    .modal-content .text_area p {
        font-size: 12px;
        line-height: 1.6;
    }
}
/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 26px;
    height: 26px;
    z-index: 20;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/modal_close.svg) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
}
@media only screen and (max-width: 767px) {
    .modal-close {
        top: 10px;
        right: 10px;
        width: 15px;
        height: 15px;
    }
}
/* 外側矢印（商品切替） */
.modal-prev,
.modal-next {
    position: absolute;
    top: 41.5%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    z-index: 10;
    text-indent: -9999px;
    overflow: hidden;
    background-size: 100%;
    cursor: pointer;
}
.modal-prev {
    left: 0;
    background: url(../images/modal_arrow_l.svg) no-repeat center center;
}
.modal-next {
    right: 0;
    background: url(../images/modal_arrow_r.svg) no-repeat center center;
}
@media only screen and (max-width: 767px) {
    .modal-prev,
    .modal-next {
        top: 41.4%;
        width: 28px;
        height: 28px;
    }
}
/* Swiper */
.swiper,
.swiper-wrapper,
.swiper-slide {
    width: 100%;
}
.swiper {
    padding-bottom: 40px;
}
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.swiper-button-next,
.swiper-button-prev {
    top: calc(50% - 20px);
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    overflow: hidden;
    background-size: 100%;
}
.swiper-button-prev {
    background: url(../images/swiper_arrow_l.svg) no-repeat center center;
    left: 16px;
}
.swiper-button-next {
    background: url(../images/swiper_arrow_r.svg) no-repeat center center;
    right: 16px;
}
.swiper-pagination {
    bottom: 0;
}
.swiper-pagination-bullet {
    border: 1px solid #000;
    background: #fff;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: #000;
}
@media only screen and (max-width: 767px) {
.swiper {
    padding-bottom: 30px;
}
    .swiper-button-next,
    .swiper-button-prev {
        top: calc(50% - 8px);
        width: 16px;
        height: 16px;
    }
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
}

/* ========= ⚫︎PC⚫︎ 縦書きテキスト「PerFumum-煙を通して」 ========= */
.perfumum_text_pc {
    font-family: var(--font-mincho);
    line-height: 2;
    font-size: 20px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 120px auto 180px auto;
    height: 27em;
}
.perfumum_text_pc p {
    margin: 0 40px;
}
.perfumum_text_pc p.note {
    font-size: 70%;
}
@media only screen and (max-width: 960px) {
    .perfumum_text_pc {
        font-size: 1.9vw;
    }
    .perfumum_text_pc p {
        margin: 0 36px;
    }
}

/* ========= ⚫︎SP⚫︎ 縦書きテキスト「PerFumum-煙を通して」 ========= */
.perfumum_text_sp {
    position: relative;
}
.perfumum_text_sp h1 {
    font-family: "HelveticaNeue", sans-serif;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    padding-bottom: 4px;
    margin: 70px 0 40px 0;
    border-bottom: 1px solid #666;
}
.perfumum_text_sp h1 span {
    display: block;
    font-size: 10px;
    margin-top: 20px;
}
.perfumum_text_sp img {
    display: block;
    width: 78%;
    margin: 0 auto;
}
/* Modal */
.image-overlay {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 2%;
    width: 96%;
    padding: 10% 1%;
    background: #fff;
    border: 1px solid #666;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.image-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.image-overlay-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 15px;
    height: 15px;
    border: none;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/modal_close.svg) no-repeat center center;
    background-size: 100%;
}
.image-overlay p {
    font-family: var(--font-mincho);
    font-size: 3.2vw;
    line-height: 1.9;
    text-align: center;
    margin: 2em 0;
}
.image-overlay p.note {
    font-size: 58%;
}

/* ========= CONTENTS ========= */
.contents {
    max-width: 1490px;
    margin: 180px auto 100px auto;
}
@media only screen and (max-width: 1550px) {
    .contents {
        max-width: 1240px;
        width: 90%;
    }
}
@media only screen and (max-width: 767px) {
    .contents {
        width: 100%;
        margin: 70px auto 50px auto;
    }
}
.contents h1 {
	font-family: "HelveticaNeue", sans-serif;
    font-size: 46px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin-bottom: 90px;
    position: relative;
}
.contents h1 span {
    position: absolute;
    font-size: 12px;
    top: 38%;
    right: 0;
}
.contents ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 50px;
}
.contents li {
    width: calc(50% - 25px);
    border-top: 1px solid #000;
    padding: 16px 0;
}
.contents li:nth-child(7),
.contents li:nth-child(8) {
    border-bottom: 1px solid #000;
}
.contents li a {
    display: block;
}
.contents article {
    display: flex;
}
.contents article .text_area {
    flex: 1;
    position: relative;
}
.contents article .text_area .num {
    line-height: 1;
}
.contents article .text_area h2 {
    margin: 30px 0 8px 35px;
    line-height: 1.1;
    font-size: 23px;
    font-weight: 600;
}
_::-webkit-full-page-media, _:future, :root .contents article .text_area h2 {
    font-size: 21px;
}
.contents article .text_area .date {
    margin: 0 0 10px 35px;
    font-size: 22px;
    line-height: 1.1;
}
.contents article .text_area .date small {
    font-size: 60%;
}
.contents article .text_area .place {
    margin: 0 0 8px 35px;
    font-size: 16px;
    line-height: 1.1;
}
.contents article .more {
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 1;
}
.contents article .more::before {
    content: '';
    display: inline-block;
    width: 120px;
    height: 1.1em;
    background: url(../images/more_arrow.svg) no-repeat center right 10px;
    background-size: 100%;
    margin-bottom: -2px;
}
.contents article .photo {
    max-width: 360px;
    width: 50%;
    margin-left: 28px;
}
@media only screen and (max-width: 1550px) {
    .contents h1 {
        max-width: 720px;
        margin: 0 auto 90px auto;
    }
    .contents ul {
        flex-direction: column;
        gap: 0 0;
    }
    .contents li {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }
    .contents li:nth-child(7) {
        border-bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
    .contents h1 {
        font-size: 30px;
        margin-bottom: 4px;
    }
    .contents h1 span {
        display: block;
        position: relative;
        font-size: 10px;
        top: auto;
        right: auto;
        margin-top: 20px;
    }
    .contents li {
        padding: 4% 12% 8% 12%;
    }
    .contents article {
        flex-direction: column;
    }
    .contents article .text_area .num {
        font-size: 14px;
    }
    .contents article .text_area h2 {
        margin: 10% 0 3% 11%;
        font-size: 22px;
    }
    .contents article .text_area .date {
        margin: 0 0 3% 11%;
        font-size: 19px;
    }
    .contents article .text_area .place {
        margin: 0 0 3% 11%;
        font-size: 13px;
    }
    .contents article .more {
        position: relative;
        margin: 0 0 0 auto;
    }
    .contents article .photo {
        max-width: 100%;
        width: 100%;
        margin: 10px 0 20px 0;
    }
}



/*-------------------------------------------
 Footer
-------------------------------------------*/
.footer_contents {
    padding: 90px 0 60px 0;
    width: 100%;
    font-family: "Poppins", "Yu Gothic Medium", "Yu Gothic", YuGothic, "メイリオ", sans-serif;
    text-align: center;
    color: #000;
}
.footer_contents h1 {
    max-width: 224px;
    width: 24%;
    margin: 0 auto;
}
.footer_contents .link_area {
    max-width: 490px;
    width: 80%;
    margin: 0 auto 50px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.footer_contents .sns {
    width: 36%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer_contents .sns_icon {
    width: 45%;
}
.footer_contents h2 {
    width: 100%;
    font-size: 12px;
    margin-top: 2px;
    font-weight: 300;
}
.footer_contents .remo {
    width: 57%;
}
.footer_contents .copyright {
    font-size: 10px;
    font-weight: 100;
}
@media only screen and (max-width: 767px) {
    .footer_contents {
        max-width: 500px;
        margin: 0 auto;
        padding: 28% 0 8% 0;
    }
    .footer_contents h1 {
        width: 60%;
    }
    .footer_contents .link_area {
        margin: 0 auto 14% auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer_contents .sns {
        width: 45%;
    }
    .footer_contents .sns_icon {
        width: 45%;
    }
    .footer_contents h2 {
        font-size: 10px;
    }
    .footer_contents .remo {
        width: 80%;
        margin: 8% auto 0 auto;
    }
    .footer_contents .copyright {
        font-size: 11px;
    }
}



/*-------------------------------------------
 Hamburger Menu
-------------------------------------------*/
#toggle {
	cursor: pointer;
	display: block;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 101;
    width: 30px;
    height: 30px;
}
.trigger,
.trigger span {
	display: inline-block;
    transition: all .4s;
}
.trigger {
	position: relative;
	width: 30px;
	height: 13px;
}
.trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #666;
	border-radius: 4px;
}
.trigger span:nth-of-type(1) {
	top: 0;
}
.trigger span:nth-of-type(2) {
	top: 6px;
}
.trigger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #666;
    transition: all .4s;
}
.trigger span:nth-of-type(3) {
	bottom: 0;
}
.trigger.active span:nth-of-type(1) {
    transform: translateY(8px) scale(0);
}
.trigger.active span:nth-of-type(2) {
    transform: rotate(-45deg);
}
.trigger.active span:nth-of-type(2)::after {
    transform: rotate(90deg);
}
.trigger.active span:nth-of-type(3) {
    transform: translateY(-8px) scale(0);
}
.hide {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}
.animation {
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
}

/* menu中身 */
.toggleWrap {
	background: rgba(255, 255, 255, 1.0);
	width: 100%;
	height: 100lvh;
	top: 0;
	padding: 0;
	position: fixed;
    inset: 0;
	z-index: 100;
	overflow: scroll;
}
.toggleWrap .inner {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.toggleWrap nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.toggleWrap nav ul li a {
    display: block;
    font-size: clamp(18px, 7vw, 30px);
    line-height: 1.1;
    padding: 18px 40px;
}
.toggleWrap nav ul li a .num {
    display: inline-block;
    font-size: 50%;
    vertical-align: top;
    margin: 4px 16px 0 0;
}
.toggleWrap .footer_contents {
    margin: auto auto 0 auto;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.toggleWrap .footer_contents .link_area {
    margin: 0 auto 20px auto;
}