@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: bottom;
    list-style-type: none;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* ← これが重要 */
}

main {
    flex: 1;
    /* ← mainが空でも高さを埋める */
}

body {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #111111;
}


a {
    text-decoration: none;
    color: #111111;
}

/*-------------------　スライドショー　-------------------*/
#slideshow {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 667px;
    /* 好きな高さに調整 */
    overflow: hidden;
    margin: 0 auto;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.catchphrase {
    position: absolute;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    text-align: center;
    pointer-events: none;
    /* クリックイベントを邪魔しない */
}

.main-visual h1 span {
    opacity: 0;
    display: inline-block;
    animation: fadeInUp 0.6s ease forwards;
    color: #ffffff;
}

.main-visual h1 span:nth-child(1) {
    animation-delay: 0s;
}

.main-visual h1 span:nth-child(2) {
    animation-delay: 0.1s;
}

.main-visual h1 span:nth-child(3) {
    animation-delay: 0.2s;
}

.main-visual h1 span:nth-child(4) {
    animation-delay: 0.3s;
}

.main-visual h1 span:nth-child(5) {
    animation-delay: 0.4s;
}

.main-visual h1 span:nth-child(6) {
    animation-delay: 0.5s;
}

.main-visual h1 span:nth-child(7) {
    animation-delay: 0.6s;
}

.main-visual h1 span:nth-child(8) {
    animation-delay: 0.7s;
}

.main-visual h1 span:nth-child(9) {
    animation-delay: 0.8s;
}

.main-visual h1 span:nth-child(10) {
    animation-delay: 0.9s;
}

.main-visual h1 span:nth-child(11) {
    animation-delay: 1.0s;
}

.main-visual h1 span:nth-child(12) {
    animation-delay: 1.1s;
}

/* 以下も順番に増やしていく */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*-------------------　スライドショーのドット　-------------------*/
#dots {
    text-align: center;
    margin-top: 10px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #bbb;
    border-radius: 50%;
}

.dot.active {
    background-color: #333;
    /* アクティブなドットは濃く */
}

/*-------------------　ナビゲーション　-------------------*/

nav {
    position: fixed;
    top: 24px;
    width: 100%;
    z-index: 10;
}

nav ul {
    display: none;
    list-style: none;
    position: absolute;
    /* 追加：絶対位置にする */
    top: 32px;
    /* ハンバーガーの位置に合わせる */
    right: 80px;
    /* ハンバーガーのすぐ左に出したい場合は調整する */
    padding: 10px 20px;
}

li a {
    padding: 8px;
    font-size: 16px;
    color: #111111;
    display: block;
    text-align: center;
    text-decoration: none;
}

.hamburger {
    position: absolute;
    top: 32px;
    right: 32px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
}

.hamburger span {
    /*2本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #111111;
    width: 100%;
    z-index: 10;
}

.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}

.hamburger span:nth-of-type(2) {
    /*下の線の位置*/
    top: 20px;
}

.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-33deg);
}

.hamburger.open span:nth-of-type(2) {
    /*openのとき、下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(33deg);
}

/*-------------------　テキストが下から上がってくる　-------------------*/

.fadein {
    opacity: 0;
    transform: translateY(30px);
    /* 30px下にズラす */
    transition: all 0.6s ease;
    /* なめらかに動かす */
}

.fadein.show {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻す */
}

/*-------------------左から右へ線が伸びるアクション-------------------*/

.link-underline {
    position: relative;
    display: inline-block;
    color: #333;
    text-decoration: none;
    /* デフォルトの下線を消す */
    overflow: hidden;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    /* 線の太さ */
    background-color: #333;
    /* 線の色 */
    transition: width 0.4s ease;
    /* にゅっと伸びる動き */
}

.link-underline:hover::after {
    width: 100%;
    /* ホバーしたら全体に伸びる */
}

/*-------------------hoverしたときに画像が拡大する-------------------*/

.img-hover-zoom {
    display: inline-block;
    overflow: hidden;
    /* はみ出しを隠す */
}

.img-hover-zoom img {
    transition: transform 0.4s ease;
    /* 拡大をなめらかに */
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
    /* 5%だけ拡大 */
    filter: brightness(80%);
    /* 明るさを80%にする（暗くなる） */
}

/*-------------------上に戻るボタン-------------------*/
#toTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    /* 背景色：白 */
    color: #696969;
    /* 矢印の色：黒 */
    font-size: 24px;
    border: 1px solid #696969;
    /* 黒い線を追加！ */
    border-radius: 50%;
    /* 丸くする */
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* ホバー時のスタイル（オプション） */
#toTop:hover {
    background-color: #f0f0f0;
    /* ホバーでちょっとだけグレーにする */
}

/*-------------------スクロールを促すアクション-------------------*/

.scroll-indicator {
    position: static;
    bottom: 35px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    margin: 25px auto 0;
}

.scroll-line {
    width: 1px;
    height: 30px;
    /* 最終的な高さ */
    background-color: black;
    transform: scaleY(0);
    /* 初期状態：高さゼロ */
    transform-origin: top;
    /* 上から拡大 */
    animation: scrollLineDown 1.5s ease-out infinite;
    margin: 0 auto;
}

@keyframes scrollLineDown {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 0;
    }
}

.scroll-text {
    margin-top: 8px;
    font-size: 12px;
    color: #333;
    letter-spacing: 2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    /* 縦書きにする！ */
    text-orientation: mixed;
    /* 文字の向きを自然に */
    font-size: 14px;
    letter-spacing: 2px;
    /* 縦書きだと字間が詰まるのでちょっと空けるとキレイ */
    color: #333;
    /* 色も自由に！ */
}

@keyframes moveLine {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/*-------------------　top　-------------------*/

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10000;
}


main {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.heading {
    display: flex;
    align-items: center;
    margin: 80px 0 40px 50px;
}

.heading h2 {
    font-size: 36px;
    margin: 0 20px 0 0;
}

.heading span {
    font-size: 14px;
}

.content {
    display: flex;
}

.content p {
    width: 400px;
    height: 250px;
    margin: 0 0 15px;
}

.left-content {
    width: 400px;
    height: 310px;
    margin: 0 auto 70px 50px;
}

.right-content {
    width: 400px;
    height: 310px;
    margin: 0 50px 70px auto;
}

.left-text {
    width: 110px;
    height: 16px;
    padding: 0 10px 0 0;
    margin: 0;
    font-size: 14px;
    border-right: solid 1px #333;
}

.right-text {
    width: 110px;
    height: 16px;
    padding: 0 0 0 10px;
    margin: 0;
    font-size: 14px;
}

.content-name {
    font-size: 20px;
}

.profile-text {
    width: 100%;
    max-width: 1000px;
    height: 100px;
    margin: 0 0 0 50px;
}

/*-------------------　フッター　-------------------*/

#copyright {
    width: 465px;
    height: 17px;
    margin: 50px auto;
    text-align: center;
}

/*-------------------　ennichinoasobibako　-------------------*/

.in-charge {
    display: flex;
    flex-direction: column;
}

.in-charge dd {
    padding: 0 0 0 100px;
}

.information-design {
    display: flex;
    flex-direction: column;
}

.information-design dd {
    padding: 0 0 0 100px;
}

.color-c30d23 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    background: #C30D23;
    color: #ffffff;
    text-align: center;
}

.color-f8b800 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #F8B800;
    text-align: center;
}

.color-f29600 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    background: #F29600;
    color: #ffffff;
    padding: auto;
    text-align: center;
}

.color-004267 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #004267;
    text-align: center;
}

.wrapper {
    width: 100%;
  max-width: 1000px;
  margin: 50px auto 0;
  padding: 0 20px;
}


.materials_ennichi {
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0;
}

.materials_ennichi p {
    text-align: center;
}

.materials_ennichi img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}


/*-------------------　cafe site　-------------------*/

.top-area {
    display: flex;
    justify-content: space-between;
}

.project {
    margin: 50px 0 0;
}

.project-title {
    font-size: 14px;
}

.project-name {
    font-size: 24px;
}

.top-items {
    margin: 50px 0 0;
}

.header-img {
    margin: 20px 0 0 0;
}

.overview {
    display: flex;
    align-items: center;
    margin: 80px 0 40px;
}

.overview h2 {
    font-size: 36px;
    margin: 0 20px 0 0;
}

.overview span {
    font-size: 14px;
}

.information {
    display: flex;
}

.item {
    width: 35px;
    height: 20px;
    margin: 0 20px 0 0;
}

.container {
    padding: 50px 0;
    display: flex;
    border-top: solid 1px #333;
}

.container dt {
    width: 120px;
    height: 30px;
}

.container dd {
    padding: 0 0 0 100px;
}

.last-container {
    padding: 50px 0;
    display: flex;
    border-top: solid 1px #333;
    border-bottom: solid 1px #333;
}

.last-container dt {
    width: 120px;
    height: 30px;
}

.last-container dd {
    padding: 0 0 0 100px;
}

.design {
    display: flex;
    flex-flow: column;
}

#design-text {
    margin: 0 0 20px;
}

.color {
    display: flex;
}

.color-f2f1ed {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    background: #f2f1ed;
    text-align: center;
}

.color-65745a {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #65745a;
    text-align: center;
}

.color-ffffff {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    background: #ffffff;
    padding: auto;
    text-align: center;
}

.color-000000 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #000000;
    text-align: center;
}

.materials {
    width: 100%;
    height: auto;
    margin: 100px auto 0;
    text-align: center;
}

.production-time {
    display: flex;
}

.kinds {
    width: 145px;
    height: 23px;
    margin: 0 20px 0 0;
}

.link-cafe-site {
    width: 200px;
    height: 40px;
    border: solid 1px #000000;
    text-align: center;
    padding: 5px 0;
    margin: 50px auto;
}

/*-------------------　web-marketing　-------------------*/

.task {
    display: flex;
    flex-direction: column;
}

#task-text {
    margin: 0 0 20px 0;
}

.task ul {
    padding: 0 0 0 100px;
}

.presentation p {
    width: 800px;
    height: 450px;
    margin: 0 auto;
}

.pdf-download {
    width: 300px;
    height: 50px;
    text-align: center;
    padding: 10px 0;
    margin: 50px auto;
    border: solid 1px #000000;
}

/*-------------------　was-banner　-------------------*/

.color-050104 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #050104;
    text-align: center;
}

.color-ffff00 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    background: #ffff00;
    text-align: center;
}

.banner-materials {
    width: 800px;
    height: 700px;
    margin: 100px auto 0;
}

.banner-materials img {
    width: 100%;
    height: auto;
    display: block;
}

.size {
    display: flex;
}

.size-item {
    width: 110px;
    height: 23px;
    margin: 0 10px 0 0;
}

/*-------------------　apartment-banner　-------------------*/

.color-111111 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #111111;
    text-align: center;
}

.color-004ca0 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #004CA0;
    text-align: center;
}

/*-------------------　sale-banner　-------------------*/

.color-fe5b91 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #fe5b91;
    text-align: center;
}

.color-aee0ff {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #aee0ff;
    text-align: center;
}

.color-3b8cc0 {
    width: 150px;
    height: 50px;
    padding: 15px 0;
    color: #ffffff;
    background: #3b8cc0;
    text-align: center;
}

/*-------------------　profile-photo　-------------------*/

.unity {
    display: flex;
}

.photo-text {
    width: 65px;
    height: 25px;
    margin: 0 30px 0 0;
}

.caution {
    width: 500px;
    height: 50px;
    margin: 50px auto 0;
}

.photo-materials {
    width: 1000px;
    height: 2200px;
    margin: 100px auto;
}

.photo-materials img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像下の余白防止 */
    max-width: 100%;
    /* 念のため */
}

/*-------------------　gallery　-------------------*/

.gallery-main {
    width: 100%;
    height: auto;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#overlay img {
    max-width: 90%;
    max-height: 90%;
}

.clickable-image {
    width: 240px;
    height: 160px;
    object-fit: cover;
    /* 画像を切り取っていい感じにフィットさせる */
    cursor: pointer;
    /* ポインターにするとクリックできる感が出る */
}

#close-btn {
    position: absolute;
    top: 30px;
    right: 150px;
    font-size: 48px;
    color: white;
    cursor: pointer;
    z-index: 1001;
    /* 画像より上にくるようにする */
}

.gallery {
    display: flex;
    align-items: center;
    margin: 80px 0 40px;
}

.gallery h2 {
    font-size: 36px;
    margin: 0 30px 0 80px;
}

.img-area {
    width: 100%;
    height: auto;
    margin: 0 80px;
    display: flex;
    flex-direction: column;
}

.line-1 {
    display: flex;
}

.line-2 {
    display: flex;
}

.line-3 {
    display: flex;
}

.line-4 {
    display: flex;
}

.line-5 {
    display: flex;
}

.line-6 {
    display: flex;
}

.line-7 {
    display: flex;
}

.left {
    margin: 0 60px 60px 0;
}

.center {
    margin: 0 60px 60px 0;
}

/*--------------- スマホ対応 ---------------*/
@media screen and (max-width: 768px) {

    /* レイアウト全体の調整 */
    main {
        padding: 0 16px;
    }

    footer {
        padding-bottom: 10px;
    }

    /* 見出しまわり */
    .heading {
        flex-direction: column;
        align-items: flex-start;
        margin: 40px 0 20px 0;
    }

    .heading h2 {
        font-size: 28px;
        margin: 0 0 10px 0;
    }

    .heading span {
        font-size: 12px;
    }

    /* コンテンツの2カラムを1カラムに */
    .content {
        flex-direction: column;
        align-items: center;
    }

    .left-content,
    .right-content {
        width: 100%;
        height: auto;
        margin: 0 0 40px 0;
    }

    .content p {
        width: 100%;
        height: auto;
    }

    .content p img,
    .img-hover-zoom img {
        width: 100%;
        height: auto;
    }

    .subheading {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }

    /* ハンバーガーとメニュー */
    nav ul {
        position: absolute;
        top: 60px;
        /* ハンバーガーの下に表示されるように */
        right: 16px;
        /* ハンバーガーのすぐ左になるように調整 */
        display: none;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px 16px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* 最初は非表示 */
    nav ul {
        display: none;
    }

    /* 開いたときに表示 */
    nav ul.open {
        display: block;
    }

    nav ul li a {
        font-size: 16px;
        padding: 10px 0;
        text-align: right;
    }

    .hamburger {
        position: absolute;
        top: 32px;
        right: 32px;
        width: 40px;
        height: 40px;
        z-index: 10;
        background: rgba(255, 255, 255, 0.7);
        /* 半透明の白 */
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        /* 線の間隔を整える */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #111;
        transition: all 0.3s;
    }

    .hamburger span:nth-of-type(1) {
        top: 12px;
        /* 円の中心より上 */
    }

    .hamburger span:nth-of-type(2) {
        top: 24px;
        /* 円の中心より下 */
    }

    nav {
        top: 0;
        background: #fff;
        padding: 10px 0;
    }

    /* キャッチコピーの位置・サイズ調整 */
    .catchphrase {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        white-space: nowrap;
        /* ←これを追加 */
    }

    /* スライドショーの高さを比率で維持 */
    #slideshow {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    /* 上に戻るボタンのサイズ調整 */
    #toTop {
        bottom: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    /* プロフィールテキストの余白調整 */
    .profile-text {
        margin: 0;
        padding: 0 16px;
        font-size: 14px;
    }

    /* コピーライト調整 */
    #copyright {
        width: 100%;
        text-align: center;
        margin: 30px 0;
    }

    .subheading {
        display: flex;
        justify-content: center;
        align-items: center;
        /*gap: 8px;*/
        /* ← 任意：間隔 */
        padding: 0;
        margin: 8px 0;
    }

    .left-text {
        width: auto;
        padding: 0 10px 0 0;
        font-size: 14px;
    }

    .right-text {
        width: auto;
        padding: 0 0 0 10px;
        font-size: 14px;
    }

    .content-name {
        display: block;
        text-align: center;
        margin-top: 8px;
        /* お好みで余白調整 */
    }
}

/*---------- cafe site ----------*/

@media screen and (max-width: 768px) {

    /*改行無効*/
    br {
        display: none;
    }

    .overview {
        flex-direction: column;
        /* ← 縦並び */
        justify-content: center;
        /* 中央揃え */
        align-items: center;
        /* 左右中央に */
        text-align: center;
        /* テキスト中央寄せ */
        margin: 40px 0;
        /* 上下余白 */
    }

    .overview h2 {
        font-size: 28px;
        /* スマホ用サイズに調整（任意） */
        margin-bottom: 8px;
    }

    .overview span {
        font-size: 14px;
        /* 任意のサイズ */
    }

    .top-area {
        flex-direction: column;
        gap: 20px;
    }

    .project,
    .top-items {
        margin: 0;
    }

    .header-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .container,
    .last-container {
        flex-direction: column;
        padding: 30px 0;
    }

    .container dd,
    .last-container dd {
        padding: 0;
    }

    .container dt,
    .last-container dt {
        margin-bottom: 8px;
    }

    .color {
        flex-wrap: wrap;
        gap: 10px;
    }

    .color div {
        width: 100%;
    }

    .link-cafe-site {
        width: 100%;
        max-width: 300px;
    }

    .materials {
        width: 100%;
        height: auto;
        padding: 0 16px;
        /* ← 任意：余白が欲しい場合 */
    }

    .materials img {
        width: 100%;
        height: auto;
        display: block;
    }

    .container {
        flex-direction: column;
        padding: 30px 0;
    }

    .container dt {
        width: fit-content;
        /* または幅指定を削除 */
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 12px;
    }

    .container dd {
        padding: 0;
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .last-container dt {
        width: fit-content;
        /* または幅指定を削除 */
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 12px;
    }

    .last-container dd {
        padding: 0;
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
        /* ← 追加！ */
    }

    .production-time {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        /* ← 任意：項目間の余白 */
        margin-bottom: 12px;
        /* ← 任意：下に余白が欲しければ */
    }

    .production-time .kinds {
        text-align: center;
    }
}

/*---------- webmarketing ----------*/
@media screen and (max-width: 768px) {
    .top-area {
        align-items: center;
        text-align: center;
        padding-top: 80px;
    }

    .project-name {
        margin-top: 5px;
        /* 任意の値で調整 */
    }

    .presentation p {
        width: 100%;
        max-width: 800px;
        height: auto;
    }

    .presentation p img {
        width: 100%;
        height: auto;
        display: block;
    }

    .pdf-download {
        width: 100%;
        max-width: 300px;
    }

    .task ul {
        padding: 0 16px;
    }
}

/*---------- was-banner ----------*/
@media screen and (max-width: 768px) {

    /* 固定幅を100%に */
    .banner-materials,
    .photo-materials {
        width: 100%;
        height: auto;
        margin: 40px auto;
    }

    .size {
        justify-content: center;
        gap: 20px;
        /* 適度に間隔を確保 */
    }

    .size-item,
    .size>div {
        margin: 0 25px;
        /* 左右25pxずつ中央寄せ */
    }

    /* サイズブロック */
    .size-item {
        width: auto;
        /* 幅を内容に合わせる */
        display: inline-block;
        /* インライン要素のように横幅を内容に合わせる */
        margin-bottom: 8px;
    }

    .size-item span {
        text-align: left;
        display: block;
        /* 必要に応じて */
    }

    /* スクロールテキストは横書きに */
    .scroll-text {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        letter-spacing: normal;
        font-size: 12px;
    }

    /* 固定高さはautoに */
    .banner-materials,
    .photo-materials,
    .container dd,
    .last-container dd {
        height: auto;
    }

    /* .containerや.last-containerの余白調整 */
    .container dd,
    .last-container dd {
        margin-bottom: 16px;
    }

    .design {
        text-align: center;
    }

    .size-wrapper {
        display: flex;
        gap: 1px;
        flex-wrap: wrap;
        align-items: center;
    }

    .size-item,
    .size-desc {
        flex: 1 1 auto;
        /* 横並びで幅を分ける */
        min-width: 0;
        /* はみ出し防止 */
    }

    .size-item {
        margin: 0;
        /* 横マージンはgapで調整 */
        height: auto;
        /* 高さ自動 */
    }

    .size-desc {
        /* 必要なら文字サイズや余白調整 */
        font-size: 14px;
    }
}

/*---------- profile-photo ----------*/
@media screen and (max-width: 768px) {

    /* caution幅調整 */
    .caution {
        width: 100%;
        max-width: 300px;
        margin: 50px auto 0;
        padding: 0 10px 20px;
        text-align: center;
        font-size: 14px;
    }

    /* unityは縦並びに */
    .unity {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    /* photo-textの幅を小さく */
    .photo-text {
        width: 100%;
        margin: 0 0 4px 0;
        font-size: 14px;
        text-align: center;
    }
}

/*---------- gallery ----------*/
@media screen and (max-width: 768px) {
    .img-area {
        width: 100%;
        margin: 0 auto;
    }

    /* 各lineを縦並びに */
    .line-1,
    .line-2,
    .line-3,
    .line-4,
    .line-5,
    .line-6,
    .line-7 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    /* 各画像の枠の左右マージンをなくして中央寄せ */
    .left,
    .center,
    .right {
        margin: 0 0 15px 0;
        /* 下にだけ余白 */
        width: 90%;
        /* 画面に収まるように少し余裕を持たせる */
    }

    .left img,
    .center img,
    .right img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .gallery {
        flex-direction: column;
        /* 縦並びに */
        align-items: center;
        /* 中央揃え */
        text-align: center;
        margin: 40px auto 20px;
    }

    /* ギャラリーの見出し調整 */
    .gallery h2 {
        font-size: 24px;
        text-align: center;
        margin: 0 auto 20px;
    }

    .gallery p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 30px;
    }

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    main {
        min-height: 100vh;
        padding-bottom: 80px;
        /* フッターがかぶらないように余白 */
    }

    #copyright {
        width: 100%;
        text-align: center;
        margin: 30px auto;
        padding-bottom: 30px;
    }
}