/* Reset & Base Styles */
	
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

body{font-family: "Shippori Mincho", serif;line-height: 1.9;
    letter-spacing: 0.25rem;}
/* ヘッダー */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 40px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴ部分 */
.headlg {
    display: block;
    text-decoration: none;
}

.headlg h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.headlg img {
    max-width: 260px;
    height: auto;
    vertical-align: middle;
}
/* ナビゲーション */
.g-nav {
    margin-left: auto;
}

.g-nav .list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.g-nav .item {
    margin: 0 0 0 40px;
}

.g-nav .item a {
    text-decoration: none;
    color: #333;
    font-family: "Shippori Mincho", serif;
    font-size: 15px;
    letter-spacing: 0.1rem;
    transition: color 0.3s;
}

.g-nav .item a:hover {
    color: #888;
}

/* mv */
.mv {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.mv picture {
    width: 100%;
    height: 100%;
    display: block;
}

.mv img.imgmax {
    width: 100%;
    height: 97%;
    object-fit: cover;
    display: block;
    animation: scaleOut 1.2s ease-out forwards;
    transform-origin: center center;
}

/* アバウト全体 */
.about {
    padding: 160px 60px;
    background-color: #fff;
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

/* テキストエリア */
.about-text {
    flex: 1;
    color: #333;
    font-size: 16px;
    text-align: right;
}

.message {
    margin: 15px 0;
}

.signature {
    margin-top: 3em;
    text-align: right;
}

.title {
    font-size: 16px;
    margin: 10px 0;
}

.brand {
    font-family: "Times New Roman", serif;
    font-size: 16px;
    margin-bottom: 0.1em;
}

.name {
    font-size: 22px;
    font-weight: 500;
}

/* 画像エリア */
.about-image {
    flex: 1;
    display: flex;
}

.about-image img {
    width: 400px;
    height: 400px;
    object-fit: cover;
}

/* サービスセクションのスタイル */
.services-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px;
    background-image: url("https://yukiyamashita1969.com/wp-content/uploads/2024/10/japanese-paper.jpg");
    background-size: cover;
    background-position: center;
}


/* 画像コンテナ */
.image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 50px;
}

.image-container img {
    width: 500px;
    height: 600px;
    object-fit: cover;
}

/* サービスコンテンツ */
.services-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 70px;
}

.service-item {
    position: relative;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ccc;
}

.service-item:last-child {
    border-bottom: none;
}

.service-item h3 {
    font-size: 1.5rem;
    margin: 0.8rem 0;
}

.subtitle {
    font-size: 0.8rem;
    color: #888;
    margin-left: 10px;
}

.service-item p {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 0.5rem;
    color: #333;
}

/* 矢印 */
.arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
}

/* ギャラリーセクション */
.gallery-section {
    padding: 40px 20px;
    text-align: center;
}

.gallery-title {
    font-size: 2rem;
    margin: 40px;
    letter-spacing: 0.1em;
}

/* ギャラリーグリッド */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.gallery-item img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

/* VIEW ALL ボタン */
.view-all {
    margin-top: 30px;
}

.view-all-button {
    padding: 10px 30px;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #333;
    display: inline-block;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.view-all-button:hover {
    background-color: #333;
    color: #fff;
}

/* FLOWセクション */
.flow-section {
    padding: 60px 40px;
    text-align: center;
}

.flow-title {
    font-size: 2rem;
    margin: 40px;
    letter-spacing: 0.1em;
}

/* 各ステップ */
.flow-step {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    padding: 40px;
    margin: 30px auto;
    max-width: 900px;
    position: relative;
}

.step-number {
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    width: 80px;
    text-align: center;
}

.step-content {
    flex: 1;
    padding-left: 20px;
    text-align: left;
}

.step-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* ボタン */
.buttons {
    margin-top: 10px;
}

.buttons button {
    background-color: white;
    border: 1px solid #333;
    padding: 5px 10px;
    margin-right: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.buttons button:hover {
    background-color: #333;
    color: white;
}

/* QAセクション */
.qa-section {
    padding: 60px 40px;
    text-align: center;
}

.qa-title {
    font-size: 2rem;
    letter-spacing: 0.1em;
}

/* よくある質問 ボタン */
.qa-detail {
    margin: 0 60px;
}

.qa-detail-button {
    padding: 20px 40px;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #333;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 60px;
}

.qa-detail-button:hover {
    background-color: #333;
    color: #fff;
}


/* フッターセクションの基本設定 */
.footer-section {
    background: url('https://yukiyamashita1969.com//wp-content/themes/yukiyamashita/assets/img/common/footer_background.jpg') no-repeat center center; /* 背景画像を設定 */
    background-size: cover;
    color: #fff;
    text-align: center;
}
.footer-content {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
}
/* ロゴのスタイル */
.footer-logo {
    margin-bottom: 20px;
    margin-top: 80px;
}

.footer-logo img {
    max-width: 250px;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
}

/* ナビゲーションのスタイル */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li {
    margin: 10px 0;
    font-size: 12px;
}

.footer-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    letter-spacing: 0.1em;
}

/* お問い合わせボタンのスタイル */
.contact-link a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #fff;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    margin-top: 20px;
    letter-spacing: 0.1em;
    transition: background-color 0.3s, color 0.3s;
}

.contact-link a:hover {
    background-color: #fff;
    color: #000;
}

.contact-link {
    padding: 66px;
    font-size: 12px;
}
.contact-link a {
    padding: 20px 100px;
}
/* コピーライトのスタイル */
.footbox {
    margin-top: 40px;
    font-size: 11px;
    color: #ffffff;
    padding: 20px;
}

/* Utilities */
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    font-weight: normal;
}

/* Media Queries */
@media (max-width: 768px) {
    nav.footer-nav {
        margin: 50px auto 0;
    }
    .header {
        padding: 15px 20px;
        display: inline;
        align-items: center;
    }

    /* Logo */
    .headlg img {
        width: 150px;
    }

    /* Navigation */
    .g-nav .list {
        align-items: center;
    }

    .g-nav .item {
        margin: 8px;
        align-items: center;
    }

    .g-nav .item a {
        font-size: 14px;
    }

    /* フッター */
    .footer-nav ul {
        text-align: center;
    }

    .footer-nav li {
        margin-bottom: 5px;
    }

    .footer-logo {
        font-size: 1rem;
        margin-top: 20px;
    }

    .about-content {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .about-text {
        height: auto;
        writing-mode: horizontal-tb;
        margin-left: 0;
    }

    .message {
        margin-left: 0;
        margin-bottom: 1.5em;
        text-align: center;
    }

    .signature {
        margin-left: 0;
        text-align: center;
    }

    .about-image {
        max-width: 100%;
    }

    .services-section {
        flex-direction: column;
        padding: 40px 20px;
    }

    .image-container {
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .image-container img {
        width: 100%;
        height: auto;
    }

    .services-content {
        padding: 0;
    }

    .service-item {
        padding-bottom: 1rem;
        border-bottom: 1px solid #ccc;
    }

    .service-item h3 {
        font-size: 1.2rem;
    }

    .subtitle {
        font-size: 0.7rem;
    }

    .service-item p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .arrow {
        font-size: 1.2rem;
    }

    /* よくある質問セクション */
    .qa-detail {
        margin: 0 20px;
    }

    .qa-detail-button {
        padding: 15px 30px;
        margin: 40px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }

    .contact-button {
        width: 100%;
        max-width: 300px;
    }
}

.main-visual {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.main-visual .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.main-visual .slide.active {
    opacity: 1;
}


/* スライドショーのアクティブスライド */
.slide.active {
    opacity: 1;
}

/* タイトル画像の設定 */
.title-image {
    position: absolute;
    top: 20%; /* タイトル画像の位置調整 */
    left: 10%;
    width: auto;
    height: auto;
    max-width: 200px;
    z-index: 10; /* スライドショーの上に表示させる */
}
/* モバイル向けスタイル */
@media (max-width: 768px) {
    .main-visual, .slideshow, .slide {
        height: 480px; /* スマホ用の高さ */
    }
}

/* コンテナ全体の設定 */
.container {
    display: flex;
}

/* 左側スライドショーの設定 */
.left-slideshow {
    position: relative;
    width: 750px;
    height: 480px; /* 高さは適宜調整 */
    overflow: hidden;
}

.left-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 8s ease-in-out;
    transform: scale(1);
}

.left-slideshow .slide.active {
    opacity: 1;
    transform: scale(1.05);
}

/* 右側コンテンツの設定 */
.content {
    padding-left: 20px; /* スライドショーからの間隔 */
    /* 他のスタイル */
}

.content_wrapper {
    max-width: 980px; /* 最大幅を980pxに設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に少し余白を追加 */
    box-sizing: border-box;
}

/* ナビゲーションメニューの基本設定 */
.g-nav {
    position: relative;
}

/* メニューリスト（PC表示用） */
.list {
    display: flex; /* PCでは表示する */
    gap: 20px;
}

.item a {
    text-decoration: none;
    color: #333;
}

/* ハンバーガーメニューボタンのスタイル */
.hamburger {
    display: none !important; /* デスクトップでは非表示 */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    right: -10px;
    top: -20px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 1px;
    background-color: #333;
}

/* モバイル表示のスタイル */
@media (max-width: 768px) {
    /* content_wrapperのレスポンシブ設定 */
    .content_wrapper {
        max-width: 100%; /* 画面幅いっぱいに広げる */
        padding: 0 15px; /* スマホでの左右の余白 */
    }
    .title-image {
        top: 10%;
        left: 10%;
        max-width: 100px;
    }
    /* ハンバーガーボタンを表示 */
    .hamburger {
        display: flex !important;
    }

    /* メニューリスト（モバイル用） */
    .list {
        display: none !important; /* モバイルではデフォルトで非表示 */
        position: absolute;
        top: 50px;
        right: 0;
        background-color: #fff;
        width: 200px;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* メニュー表示時 */
    .list.show {
        display: flex !important; /* "show" クラスが追加されたときのみ表示 */
    }
}