/* タブ幅の統一 */
:root {
    -moz-tab-size: 4;
    tab-size: 4;
}
/* すべて border-box に */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 既定の外側余白をリセット */
* {
    margin: 0;
}
/* ページ全体の高さ基準 */
html, body {
    height: 100%;
}
/* ベースのタイポグラフィ */
body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* リストの余白と装飾（必要なら後で再指定） */
ol, ul, menu {
    list-style: none;
    padding: 0;
}
/* 画像/メディアはコンテナ幅に合わせて縮小・ブロック化 */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}
/* テーブルの余白/線の扱いを素直に */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* 区切り線は1pxの上線のみ（色は継承） */
hr {
    height: 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
}
/* 引用符の自動挿入を無効化（必要に応じて後で装飾） */
blockquote, q {
    quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
    content: '';
}
/* 上付き/下付きのベースライン調整 */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
/* 略語の下線を点線に */
abbr[title] {
    text-decoration: underline dotted;
}
/* フォーム要素はフォントを継承＆余白をリセット */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}
button {
    cursor: pointer;
}
textarea {
    resize: vertical;
}
/* 隠し要素 */
[hidden] {
    display: none !important;
}

/* ユーザーが動きの少ない表示を希望した場合の最適化 */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
}
/* =========================
   Design Tokens / Base
========================= */
:root {
--bg:#fff;
--ink:#111;
--muted:#444;
--line:#e6e6e6;
--max:1200px;
--heading-XL:3.8rem;
--heading-L:3.4rem;
--heading-M:2.8rem;
--heading-S:2.0rem;
--text-L:2.8rem;
--text-M:1.6rem;
--text-S:1.4rem;
--text-XS:1.2rem;
--text-XXS:1.0rem;
}
* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
    font-size: var(--text-M);
    line-height: 1.6;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
.wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding: 0 20px;
}
.pt-sans-regular {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
}
.pt-sans-bold {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
}

/*--------------------------------------
五十嵐追記
---------------------------------------*/

.sp_block {
	display:none;
}
.pc_block {
	display:block;
}
@media screen and (max-width:768px) {
.sp_block {
	display:block;
}
.pc_block {
	display:none;
}
}
.aboutbox {
    position: relative;
    padding: 0 1em;
    margin-bottom: 2em;
    font-size: var(--text-S);
    font-weight: 500;
}
.aboutbox:before,.aboutbox:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.aboutbox:before{
    border-left: solid 1px #999999;
    border-top: solid 1px #999999;
    left: 0;
}
.aboutbox:after{
    border-right: solid 1px #999999;
    border-bottom: solid 1px #999999;
    bottom:0;
    right: 0;
}
.aboutbox p {
margin: 0;
    padding: 0.6em 0 0.5em;
	text-align: center;
}


/*--------------------------------------
  Header Parts
---------------------------------------*/

#header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.10);
    top: 0;
    position: sticky;
    z-index: 9998;
}
#header .l-inner-wrapper {
    display: flex;
    min-width: none;
    height: 90px;
    padding: 0;
    justify-content: space-between;
}
#header h1.header-logo {
    width: 200px;
    margin: 0 auto !important;
    padding: 0;
    font-size: 0;
}
#header h1.header-logo img {
    width: 100%;
}
.l-inner-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
    align-items: center;
    overflow: hidden;
}

@media screen and (max-width: 1366px) {
#header .l-inner-wrapper {
    height: 72px;
}
}
/*--------------------------------------
  Footer Parts
---------------------------------------*/

#footer {
    color: #ffffff;
    padding: 60px 0 30px 0;
    background: #4e4b4a;
}
#footer a {
    color: #ffffff;
    text-decoration: none;
}
#footer .footer-sns {
    margin: 0 0 54px 0;
}
#footer .footer-sns h1 {
    font-size: var(--heading-S);
    font-weight: normal;
    font-family: 'PT Sans Narrow', 'Noto Serif JP', serif;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 12px 0;
}
#footer .footer-sns ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 30px;
}
#footer .footer-sns ul li {
    width: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer .footer-sns ul li img {
    width: 100%;
}
#footer .footer-bnr {
    margin: 0 0 54px 0;
}
#footer .footer-bnr ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 15px;
}
#footer .footer-bnr ul li {
    width: 90%;
    max-width: 378px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer .footer-bnr ul li img {
    width: 100%;
}
#footer .footer-nav {
    margin: 0 0 54px 0;
}
#footer .footer-nav ul {
    display: flex;
    align-items: center;   /* 垂直中央 */
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;             /* スペースは gap で管理 */
    margin: 0;
    padding: 0;
}
#footer .footer-nav ul li {
    /* flex アイテムにして内容を縦中央に */
    display: flex;
    align-items: center;
    list-style: none;
    font-size: var(--text-XXS);   /* 旧: var(--text-XXS) 相当 */
    line-height: 1;            /* バーの高さ(1em)と揃えやすく */
    margin: 0;
    padding: 0;
}
/* 2つ目以降の手前にセパレーターを描く */
#footer .footer-nav ul li + li {
    position: relative;
    padding-left: 22px;        /* 区切り線とテキストの間隔 */
}
#footer .footer-nav ul li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直ど真ん中 */
    width: 1px;
    height: 1em;               /* 文字サイズに追従 */
    background: #ffffff;
    opacity: 0.9;
}
/* 既存の after 区切り線は無効化（衝突回避） */
#footer .footer-nav ul li:after {
    content: none;
}
#footer .copyright {
    font-size: var(--text-XXS);
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    margin: 0;
}

/*--------------------------------------
　Responsive (Break Point 1)
---------------------------------------*/
@media screen and (max-width:1366px) {
#header .l-inner-wrapper {
    height: 72px;
min-width:var(--max);
}
}

/*--------------------------------------
　Responsive (Break Point 2)
---------------------------------------*/
@media screen and (max-width:768px) {
/* 2カラムで左詰め、縦横のギャップは行方向のみ */
#footer .footer-nav ul {
    justify-content: flex-start;
    gap: 22px 0;
}
/* 各項目を2カラム&中央寄せ（flex対応版） */
#footer .footer-nav ul li {
    flex: 0 0 50%;
    justify-content: center;  /* 横中央 */
    text-align: center;       /* 複数行テキスト用に念のため */
}
/* SPでは区切り線・そのための左余白を消す */
#footer .footer-nav ul li + li {
    padding-left: 0;
}
#footer .footer-nav ul li + li::before {
    display: none;
}
#header .l-inner-wrapper {
    padding-left: 0;
min-width:100%;
}
#header h1.header-logo {
    margin-left: 24px;
}
#header h1.header-logo {
    width: 150px;
}
}
/* =========================
   HERO
========================= */
.hero__visual {
    width: 100%;
    aspect-ratio: 1/1;
    background: #d6d6d6 url('/img/usr/freepage/cz_hg2025/mv_01.jpg') center/cover no-repeat;
}
.hero__inner {
    padding: 11% 0 0;
}
.hero__sub {
    font-size: var(--text-M);
    color: #fff;
    letter-spacing: .24em;
    text-align: center;
}
.hidden-cities {
    display: block;
    font-size: 4.0rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.hidden-cities span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: reveal 1.0s ease forwards;
}
.hidden-cities span:nth-child(5) {
    animation-delay: 0s;
}
.hidden-cities span:nth-child(12) {
    animation-delay: .05s;
}
.hidden-cities span:nth-child(2) {
    animation-delay: .1s;
}
.hidden-cities span:nth-child(9) {
    animation-delay: .15s;
}
.hidden-cities span:nth-child(14) {
    animation-delay: .2s;
}
.hidden-cities span:nth-child(1) {
    animation-delay: .25s;
}
.hidden-cities span:nth-child(7) {
    animation-delay: .3s;
}
.hidden-cities span:nth-child(16) {
    animation-delay: .35s;
}
.hidden-cities span:nth-child(4) {
    animation-delay: .4s;
}
.hidden-cities span:nth-child(11) {
    animation-delay: .45s;
}
.hidden-cities span:nth-child(8) {
    animation-delay: .5s;
}
.hidden-cities span:nth-child(17) {
    animation-delay: .55s;
}
.hidden-cities span:nth-child(3) {
    animation-delay: .6s;
}
.hidden-cities span:nth-child(15) {
    animation-delay: .65s;
}
.hidden-cities span:nth-child(6) {
    animation-delay: .7s;
}
.hidden-cities span:nth-child(13) {
    animation-delay: .75s;
}
.hidden-cities span:nth-child(10) {
    animation-delay: .8s;
}
@keyframes reveal {
0% {
opacity:0;
transform:translateY(100%);
}
100% {
opacity:1;
transform:translateY(0);
}
}
.lead {
    margin-top: 40px;
}
.lead h2 {
    font-size: var(--heading-M);
    margin-bottom: 12px;
	text-align: center;
}
.lead p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-M);
	width: 90%;
    margin: 0 auto;
}
.lead .yoyaku {
    border: 1px solid #999999;
	padding:15px 0;
	width:14em;
	margin: 0 auto 20px;
	text-align: center;
}

/* =========================
   PRODUCT
========================= */
.wrapper {
    background: #FFF;
}
main {
    min-width: 100%;
}
.section {
    width: 90%;
    margin: 0 auto;
    padding: 60px 0;
    border-bottom: 1px solid var(--line);
}
.grid {
    display: grid;
    gap: 24px;
    align-items: center;
}
.grid--2 {
    grid-template-columns: 1fr;
}
.product__media {
    overflow: hidden;
}
.product__media img {
    width: 100%;
    height: auto;
}
.product__media span {
    display: inline-block;
    font-size: var(--text-XS);
    line-height: 120%;
    margin-top: 16px;
}
.h3 {
    font-size: var(--heading-M);
    line-height: 100%;
    margin: 0 0 12px;
}
.h3 small {
    font-size: var(--text-S);
    line-height: 100%;
    padding-top: 12px;
    color: #222;
    display: inline-block;
}
.product__body ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
.product__body li {
    font-size: var(--text-S);
    color: #555;
}
.price {
    font-size: var(--heading-M);
    font-weight: 700;
    margin-bottom: 24px;
}
.price small {
    font-size: var(--text-XS);
    font-weight: 700;
}
.desc {
    font-size: var(--text-S);
    color: var(--muted);
}
.cta {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 32px;
    padding: 16px;
    border: 1px solid #444;
    background: #fff;
    color: #444;
    text-decoration: none;
    font-size: var(--text-M);
    transition: .3s ease;
}
.cta:hover {
    background: #444;
    color: #fff;
}
.chip {
    display: inline-block;
    background: #444;
    color: #fff;
    font-size: var(--text-XS);
    letter-spacing: .08em;
    padding: 2px 8px;
    margin-bottom: 8px;
}
/* =========================
   ABOUT（統合）
   - HTMLは共通。SPは縦積み、PCはオーバーレイ。
========================= */
.about {
    margin-top: 40px;
    width: 100%;
}
.about h3 {
    font-size: clamp(24px, 2.4vw, 38px);
    margin: 0 0 10px;
    text-align: center;
}
.about p.excerpt {
    width: 90%;
    margin: 0 auto 40px;
    font-size: var(--text-S);
    color: var(--muted);
    text-align: center;
}
/* カード：SPは縦積み（画像→テキスト） */
.about-card {
    width: 100%;
    position: relative;
}
.about-card + .about-card {
    margin-top: 0px;
}
.about-card__media img {
    width: 100%;
    height: auto;
    display: block;
}
.about-card__content {
    padding: 8%;
}
.about01 {
    background: #CDC0B1;
}
.about02 {
    background: #CEDFF0;
}
.about-card__content h4 {
    font-size: var(--text-M);
    line-height: 1.7;
    margin: 0 0 12px;
}
.about-card__content p {
    font-size: var(--text-S);
    margin: 0;
    color: var(--muted);
}
.about .btn-outline {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #444;
    background: rgba(255,255,255,0);
    color: #333;
    font-size: var(--text-S);
    text-decoration: none;
    transition: .3s ease;
}
.about .btn-outline:hover {
    border-color: #fff;
    background: #fff;
}
/* =========================
   Motion / Swiper（共通）
========================= */
.product__media .swiper {
    width: 100%;
}
.product__media .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.product__media .swiper-button-prev, .product__media .swiper-button-next {
    color: #AAA;
}
.product__media .swiper-pagination-bullet-active {
    background: #111;
}
.product__media .product__swiper {
--swiper-navigation-color:#AAA;
--swiper-navigation-size:18px;
}
.wow {
    visibility: hidden;
}
@keyframes slideInSoftFromRight {
from {
opacity:0;
transform:translateX(40px);
}
to {
opacity:1;
transform:translateX(0);
}
}
@keyframes slideInSoftFromLeft {
from {
opacity:0;
transform:translateX(-40px);
}
to {
opacity:1;
transform:translateX(0);
}
}
.animate__slideInSoftFromRight {
    animation-name: slideInSoftFromRight;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.animate__slideInSoftFromLeft {
    animation-name: slideInSoftFromLeft;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.grid.grid--2 {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
.wow {
    visibility: visible!important;
}
.animate__animated {
    animation: none!important;
}
}

/* =========================
   PC（769px）
   - 1440px固定幅要件
   - aboutはオーバーレイ
========================= */
@media (min-width: 769px) {
.hero__visual {
    min-width: var(--max);
    aspect-ratio: 16/9;
    background: #d6d6d6 url('/img/usr/freepage/cz_hg2025/mv_01.jpg') center/cover no-repeat;
}
.hero__sub {
    font-size: 2.4rem;
}
.hidden-cities {
    font-size: 7.2rem;
}
.lead {
    margin-top: 80px;
}
.lead h2 {
    font-size: var(--heading-XL);
}
.lead p {
    font-size: var(--text-M);
	text-align: center;
}
main {
    min-width: var(--max);
}
.section {
    width: auto;
    padding: 80px 0;
}
.grid--2 {
    grid-template-columns: 600px 540px;
    gap: 60px;
}
/* 偶数で左右反転（DOMはいじらない） */
.section:nth-of-type(even) .grid--2 {
    grid-template-columns: 540px 600px;
}
.section:nth-of-type(even) .product__body {
    grid-column: 1;
    grid-row: 1;
}
.section:nth-of-type(even) .product__media {
    grid-column: 2;
    grid-row: 1;
}
.cta {
    width: 60%;
}
/* ABOUT：画像を背景的に見せつつテキストはオーバーレイ */
.about {
    margin-top: 60px;
}
.about p.excerpt {
    margin-bottom: 60px;
    width: auto;
}
.about-card {
    height: 540px;
}
.about-card__media {
    position: absolute;
    inset: 0;
}
.about-card__media picture, .about-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-card__content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 540px;
    padding: 0;
}
/* 配置（左右） */
.about-card--text-right .about-card__content {
    right: 8%;
    text-align: left;
}
.about-card--text-left .about-card__content {
    left: 8%;
    text-align: left;
}
.about-card__content h4 {
    font-size: var(--heading-S);
    line-height: 1.4;
}
.about .btn-outline {
    width: auto;
    font-size: var(--text-M);
}
.about01 {
    background: none;
}
.about02 {
    background: none;
}
}