/* ========================================
固定ページ本文
======================================== */

.front-content{
    display:block;
    clear:both;
    width:100%;
    margin:0;
    padding:0;
}

/* ========================================
スマホ
======================================== */

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

    .fv-pc{
        display:none;
    }

    .fv-sp{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        min-height:550px;
        background:#c5d4de;
        color:#555;
        font-size:24px;
        font-weight:700;
    }

}

/* ========================================
特徴
======================================== */

.section-feature{
    padding:70px 20px;
    background:linear-gradient(
    to bottom,
    #fbfaf8 0%,
    #f6f2ec 100%
);
}

.section-feature .section-in{
    width:100%;
    max-width:1080px;
    margin:0 auto;
}

.feature-list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.feature-item{
    min-width:0;
}

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

/* ========================================
スマホ
======================================== */

@media (max-width:768px){
.section-feature{
    padding:80px 20px;
    background:linear-gradient(
    to bottom,
    #fbfaf8 0%,
    #f6f2ec 100%
);
}
    .section-feature{
        padding:40px 15px;
    }

    .feature-list{
        grid-template-columns:repeat(2, 1fr);
        gap:3px;
        margin-top : -20px;
    }

}
/* ========================================
メッセージ
======================================== */

.section-message{
    padding:80px 20px;
    background:#fff;
}

.section-message .section-in{
    max-width:1080px;
    margin:0 auto;
}

.message-text{
    margin:0 0 50px 0;
    text-align:center;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;
    font-size:26px;
    font-weight:500;
    line-height:1.9;
    letter-spacing:.04em;
    color:#3a3328;
}

/* ========================================
スマホ
======================================== */

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

    .section-message{
        padding:55px 20px 30px 20px;
    }
    .message-text{
        font-size:18px;
        line-height:1.9;
        letter-spacing:.02em;
    }

}

/* ========================================
制作ギャラリー
======================================== */

.section-gallery{
    padding:70px 20px;
    background : #fff;
}

.section-gallery .section-in{
    max-width:70%;
    margin:0 auto;
}
.top-gallery-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
	margin-bottom : 40px;
}

.top-gallery-item{
    display:block;
    text-decoration:none;
    color:#333;
    overflow:hidden;
    transition:.3s;
}

.top-gallery-item:hover{
    transform:translateY(-5px);
}

.top-gallery-image{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.top-gallery-image img{
    width:100%;
    height:auto;
    display:block;
}
.top-gallery-content{
    padding:20px;
    text-align : center;
}

.gallery-production{
    font-size : 14px;
}

.gallery-industry{
    display:inline-block;
    padding:4px 12px;
    background:#b9965a;
    color:#fff;
    font-size:13px;
    border-radius:30px;
    margin-bottom:10px;
}

.top-gallery-content h3{
    font-size:22px;
    margin-bottom:12px;
}
/* ノートPC */
@media (max-width: 1440px){

    .section-gallery .section-in{
        max-width:85%;
    }

}

@media (max-width:1024px){

    .section-gallery .section-in{
        max-width:92%;
    }

}

@media(max-width:768px){
.top-gallery-list{

    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom : 40px;

}

.top-gallery-content{

    text-align:center;

}

.gallery-industry{

    display:inline-block;
    padding:2px 12px;
    background:#b9965a;
    color:#fff;
    font-size:12px;
    border-radius:30px;
    margin-bottom:3px;

}

.gallery-production{

    font-size:13px;
    line-height:1.5;
    margin:0;

}

}

/* ========================================
セクションタイトル
======================================== */

.section-title{
    position:relative;
    text-align:center;
    margin:0 0 80px;
    height:45px;
}

.section-title .title-en{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-family:"Times New Roman", serif;
    font-size:96px;
    font-weight:400;
    letter-spacing:.08em;
	line-height:1;
    color:rgba(184,166,123,.18);
    white-space:nowrap;
}

.concept-sub-ttl{
    position:relative;
    top:-25px;
    font-size:15px;
    font-weight:600;
    line-height:2;
    color:#6b5b43;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}

.section-title h2{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0;
    width:100%;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:36px;
    font-weight:600;
    line-height:1;
    letter-spacing:.12em;
    color:#6b5b43;
    white-space:nowrap;
}

/* ギャラリー */

.gallery-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.gallery-item{
    aspect-ratio:16/9;
    background:#efe6d3;
    border:1px solid #d7c39a;
    overflow:hidden;
}
.gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* ========================================
スマホ
======================================== */

@media (max-width:899px){
    .section-title{
        height:70px;
        margin:0 0 35px;
    }
.concept-sub-ttl{
    position:relative;
    top:-8px;
    font-size:15px;
    font-weight:600;
    line-height:2;
    color:#6b5b43;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
    .section-title .title-en{
        font-size:60px;
    }
    .section-title h2{
        font-size:24px;
    }
    .section-gallery .section-in{
        max-width:100%;
        margin:0 auto;
    }
    .gallery-list{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
.section-gallery{
    padding:50px 20px;
    background : #fff;
}
}

.gallery-btn{
    text-align:center;
    margin-top:20px;
}
.gallery-btn a{
    display:inline-block;
    padding:18px 60px;
    background:#b79a67;
    border:1px solid #b79a67;
    color:#fff;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:17px;
    text-decoration:none;
    transition:.3s;
    width : 360px;
}
.gallery-btn a:hover{
    background:#fff;
    color:#b79a67;
}
@media (max-width:899px){
    .gallery-btn{
        margin-top:20px;
    }
    .gallery-btn a{
        display:block;
        max-width:320px;
        margin:0 auto;
        padding:16px 20px;
        font-size:15px;
    }
}

/* ========================================
他社との違い
======================================== */
.section-difference{
    padding:70px 20px;
    background:#fff;
}
.difference-in{
    max-width:1480px;
    margin:0 auto;
}
.difference-title{
    position:relative;
    height:120px;
    margin:0 0 70px;
    text-align:center;
}
.difference-title span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:"Times New Roman",serif;
    font-size:110px;
    font-weight:400;
    line-height:1;
    letter-spacing:.08em;
    color:rgba(184,166,123,.12);
    white-space:nowrap;
}
.difference-title h2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    margin:0;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-size:36px;
    font-weight:600;
    line-height:1;
    letter-spacing:.08em;
    color:#6b5b43;
    white-space:nowrap;
}
.difference-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:430px;
    gap:40px;
    margin-bottom:40px;
}
.difference-row:last-child{
    margin-bottom:0;
}
.difference-image{
    display:flex;
    align-items:center;
    justify-content:center;
}
.difference-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:70px;
}
.difference-head{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    padding:14px 34px;
    margin-bottom:22px;
    background:#b79a67;
    opacity:0;
    transform:translateY(25px);
}
.difference-head.is-show{
    animation:differenceFade .8s ease forwards;
}
.difference-head h3{
    margin:0;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-size:28px;
    font-weight:600;
    line-height:1;
    color:#fff;
}
.difference-sub{
    margin:0 0 20px;
    font-size:28px;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-weight:700;
    line-height:1.5;
    color:#7b6545;
}
.difference-text{
    margin:0;
    font-size:16px;
    line-height:2;
    color:#444;
}
@keyframes differenceFade{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@media (max-width:899px){
    .section-difference{
        padding:40px 15px;
    }
    .difference-title{
        height:75px;
        margin-bottom:40px;
    }
    .difference-title span{
        font-size:70px;
    }
    .difference-title h2{
        font-size:36px;
    }
    .difference-row{
        display:flex;
        flex-direction:column;
        min-height:0;
        gap:0;
    }
    .difference-image{
        order:1;
        min-height:240px;
    }
    .difference-content{
        order:2;
        min-height : auto;
        padding:20px 0;
    }
    .difference-head{
        padding:12px;
        margin-bottom:18px;
    }
    .difference-head h3{
        font-size:18px;
    }
    .difference-sub{
        margin:0 0 16px;
        font-size:22px;
    }
    .difference-text{
        font-size:16px;
        line-height:1.9;
    }
}

/* ========================================
料金案内
======================================== */
.section-price{
    padding:70px 20px;
background:#ffffff;
}

.price-in{
    max-width:1100px;
    margin:0 auto;
}

.section-price .section-title{
    margin-bottom:60px;
}

.price-lead{
    margin:0 auto 50px;
    text-align:left;
    max-width : auto;
}

.price-lead p{
    margin:0 0 8px;
    font-size:16px;
    line-height:1.9;
    color:#444;
}

.price-lead p:last-child{
    margin-bottom:0;
}

.price-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px;
}

.price-card{
    padding:50px 30px;
    background:#fff;
    border:1px solid #d7c39a;
    text-align:center;
}

.price-card h3{
    margin:0 0 5px;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-size:26px;
    font-weight:600;
    line-height:1.5;
    color:#6b5b43;
}

.price-kind{
    font-size:15px;
    font-weight:600;
    color:#6b5b43;
}

.price-value{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
    margin:0;
    color:#6b5b43;
}

.price-value strong{
    font-family:"Times New Roman",serif;
    font-size:48px;
    font-weight:400;
    line-height:1;
}

.price-value span{
    font-size:18px;
    line-height:1.2;
}

.price-tax{
    margin:15px 0 0;
    font-size:14px;
    color:#777;
}

.price-point{
    margin:25px auto 0px;
    padding:0;
    list-style:none;
    text-align:left;
    width : 80%;    
}

.price-point li{
    position:relative;
    padding-left:22px;
    margin-bottom:10px;
    line-height:1.7;
}

.price-point li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#8b6b3f;
    font-weight:700;
}

/* 無料診断 */

.price-diagnosis{
    margin:40px auto 30px;
    padding:40px 30px;
    background:#fff;
    border:1px solid #d8c6a0;
    text-align:center;
}

.price-diagnosis h3{
    margin:0;
    font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-size:26px;
    font-weight:600;
    line-height:1.5;
    color:#6b5b43;
}

.price-diagnosis p{
    margin:20px auto 35px;
    max-width:760px;
    font-size:16px;
    line-height:1.9;
    color:#444;
    text-align : left;
}

/* ← ボタンは料金ボタンと完全統一 */

.price-btn,
.price-diagnosis-btn{
    margin-top:50px;
    text-align:center;
}

.price-btn a,
.price-diagnosis a{
    display:inline-block;
    padding:18px 60px;
    background:#b79a67;
    border:1px solid #b79a67;
    color:#fff;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:17px;
    text-decoration:none;
    transition:.3s;
}

.price-btn a:hover,
.price-diagnosis a:hover{
    background:#fff;
    color:#b79a67;
}

.price-note{
    margin:30px 0 0;
    text-align:center;
    font-size:14px;
    line-height:1.8;
    color:#666;
}
.price-average{
    margin:20px 0;
    font-size:13px;
    color:#888;
    line-height:1.6;
}
.price-about{
    margin:10px 0;
    font-size:15px;
    color:#888;
    line-height:1.6;
    font-weight : 600;
}

@media (max-width:899px){

    .section-price{
        padding:40px 15px;
    }

    .section-price .section-title{
        margin-bottom:50px;
    }

    .price-lead{
        margin-bottom:40px;
        text-align:left;
    }

    .price-lead p{
        font-size:15px;
    }

    .price-list{
        grid-template-columns:1fr;
        gap:30px;
    }

    .price-card{
        padding:40px 20px;
    }

    .price-card h3,
    .price-diagnosis h3{
        font-size:22px;
    }

    .price-value strong{
        font-size:40px;
    }

    .price-value span{
        font-size:16px;
    }

    .price-diagnosis{
        padding:30px 20px;
    }

    .price-diagnosis p{
        margin:20px 0 30px;
        font-size:15px;
    }

    .price-note{
        margin-top:25px;
        text-align:left;
        font-size:13px;
    }

    .price-btn,
    .price-diagnosis-btn{
        margin-top:50px;
    }

    .price-btn a,
    .price-diagnosis a{
        display:block;
        max-width:320px;
        margin:0 auto;
        padding:16px 20px;
        font-size:15px;
    }

}

/* ========================================
制作の流れ
======================================== */

.section-flow{
    padding:70px 20px;
    background:#fdfcfb;
}

.section-flow .section-in{
    margin:0 auto;
}

.flow-list{
    width : 1080px;
    margin : 0 auto;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.flow-item{
    display:flex;
    align-items:flex-start;
    gap:30px;
    padding:35px;
    background:#fff;
    border:1px solid #d7c39a;
}

.flow-no{
    flex:0 0 80px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:80px;
    height:80px;
    background:#b79a67;
    color:#fff;
    font-family:"Times New Roman",serif;
    font-size:34px;
    line-height:1;
}

.flow-content{
    flex:1;
}

.flow-content h3{
    margin:0 0 15px;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:26px;
    font-weight:600;
    color:#6b5b43;
    line-height:1.5;
}

.flow-content p{
    margin:0;
    font-size:16px;
    line-height:2;
    color:#444;
}

/* ========================================
スマホ
======================================== */

@media (max-width:899px){

    .section-flow{
        padding:40px 15px;
    }


    .flow-list{
        width:100%;
        gap:20px;
    }


    .flow-item{
        flex-direction:column;
        gap:18px;
        padding:25px 20px;
    }

    .flow-no{
        width:40px;
        height:40px;
        flex:0 0 40px;
        font-size:20px;
    }

    .flow-content h3{
        margin:0 0 10px;
        font-size:21px;
        line-height:1.5;
    }

    .flow-content p{
        font-size:15px;
        line-height:1.9;
        text-align:left;
    }

}

/* ========================================
よくある質問
======================================== */

.section-faq{
    padding:70px 20px;
    background:#ffffff;
}

.section-faq .section-in{
    margin:0 auto;
}

.faq-list{
    width:1080px;
    max-width:100%;
    margin:0 auto;
}

.faq-item{
    margin-bottom:20px;
    border:1px solid #d7c39a;
    background:#fff;
}

.faq-q,
.faq-a{
    display:flex;
    gap:20px;
    padding:25px 30px;
}

.faq-q{
    border-bottom:1px solid #eee;
}

.faq-q span,
.faq-a span{
    flex:0 0 45px;
    width:45px;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-family:"Times New Roman",serif;
    font-size:22px;
    color:#fff;
}

.faq-q span{
    background:#b79a67;
}

.faq-a span{
    background:#8f8f8f;
}

.faq-q h3{
    margin:0;
    font-size:22px;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    color:#6b5b43;
    line-height:1.6;
}

.faq-a p{
    margin:0;
    font-size:16px;
    line-height:1.9;
    color:#444;
    text-align:left;
}

@media (max-width:899px){
.section-faq{
    padding:50px 20px;
    background:#ffffff;
}
    .faq-list{
        width:100%;
    }

    .faq-q,
    .faq-a{
        gap:15px;
        padding:18px;
    }

    .faq-q span,
    .faq-a span{
        width:36px;
        height:36px;
        flex:0 0 36px;
        font-size:18px;
    }

    .faq-q h3{
        font-size:18px;
    }

    .faq-a p{
        font-size:15px;
    }

}

/* ========================================
会社案内
======================================== */

.section-company{
    padding:70px 20px;
    background:#fcfbf8;
}

.company-box{
    width:1080px;
    max-width:100%;
    margin:0 auto;
}

.company-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.company-table tr{
    border-bottom:1px solid #e5e5e5;
}

.company-table th{
    width:220px;
    padding:22px 30px;
    background:#f7f5ef;
    font-size:16px;
    font-weight:700;
    text-align:left;
    color:#444;
    vertical-align:top;
}

.company-table td{
    padding:22px 30px;
    font-size:16px;
    line-height:2;
    color:#555;
}

@media (max-width:899px){

.section-company{
    padding:40px 15px;
}

.company-box{
    width:100%;
}

.company-table,
.company-table tbody,
.company-table tr,
.company-table th,
.company-table td{
    display:block;
    width:100%;
}

.company-table tr{
    margin-bottom:18px;
    border:1px solid #e5e5e5;
}

.company-table th{
    padding:14px 18px;
    border-bottom:1px solid #e5e5e5;
}

.company-table td{
    padding:18px;
    line-height:1.8;
}

}

/* ========================================
お問い合わせ
======================================== */
.kmi-contact-section{
    padding:70px 20px;
    background:#f7f4ee;
}
.kmi-contact-lead{
    max-width:760px;
    margin:0 auto 50px;
    text-align:center;
    font-size:18px;
    line-height:1.9;
    color:#555;
}
.kmi-contact-links{
    display:flex;
    width:1080px;
    max-width:100%;
    margin:0 auto;
    gap:24px;
}
.kmi-contact-link{
    display:flex;
    flex:1;
    align-items:center;
    gap:22px;
    padding:32px 28px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    text-decoration:none;
    color:#444;
    transition:.3s;
}
.kmi-contact-link:hover{
    border-color:#b9965a;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transform:translateY(-4px);
}
.kmi-contact-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    width:64px;
    height:64px;
    flex-shrink:0;
    color:#b9965a;
    font-size:38px;
}
.kmi-contact-content{
    flex:1;
}
.kmi-contact-content strong{
    display:block;
    margin:0 0 8px;
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;
    font-size:23px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.05em;
    color:#8b6b3f;
}
.kmi-contact-content small{
    display:block;
    font-size:15px;
    line-height:1.8;
    color:#666;
}
.kmi-contact-chatwork{
    margin-top:35px;
    text-align:center;
    font-size:15px;
    line-height:1.8;
    color:#666;
}
@media(max-width:899px){
    .kmi-contact-section{
        padding:40px 15px;
    }
    .kmi-contact-lead{
        margin-bottom:30px;
        text-align:left;
        font-size:15px;
        line-height:1.8;
    }
    .kmi-contact-links{
        flex-direction:column;
        gap:14px;
        width:100%;
    }
    .kmi-contact-link{
        gap:16px;
        padding:20px;
        border-radius:8px;
    }
    .kmi-contact-icon{
        display:flex;
        justify-content:center;
        align-items:center;
        width:42px;
        height:42px;
        border:1px solid #b9965a;
        border-radius:50%;
        background:#fff;
        color:#b9965a;
        font-size:17px;
    }
    .kmi-contact-icon i{
        font-size:17px;
        line-height:1;
        color:#b9965a;
    }
    .kmi-contact-content strong{
        margin-bottom:4px;
        font-size:18px;
        line-height:1.4;
    }
    .kmi-contact-content small{
        font-size:13px;
        line-height:1.6;
    }
    .kmi-contact-chatwork{
        margin-top:25px;
        text-align:left;
        font-size:14px;
    }
}

/*========================================
お客様の声
========================================*/

.section-voice{
    padding:70px 20px;
    background:#f8f5ef;
}

.voice-in{
    max-width:1100px;
    margin:0 auto;
}

.voice-text{
    max-width:700px;
    margin:25px auto 60px;
    text-align:center;
    font-size:16px;
    line-height:2;
    color:#666;
}

.voice-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.voice-card{
    background:#fff;
    border-radius:12px;
    padding:35px 30px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    text-align:center;
}

.voice-profile{
    width:90px;
    height:90px;
    margin:0 auto 20px;
}

.voice-profile img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
}

.voice-star{
    margin-bottom:20px;
    color:#b9965a;
    font-size:20px;
    letter-spacing:.12em;
}

.voice-card p{
    margin:0;
    text-align:left;
    font-size:15px;
    line-height:2;
    color:#555;
}

.voice-name{
    margin-top:25px;
    padding-top:18px;
    border-top:1px solid #ececec;
    text-align:right;
    font-size:14px;
    font-weight:600;
    color:#b9965a;
}

/*==========================
Tablet
==========================*/

@media (max-width:1024px){

    .voice-list{
        grid-template-columns:repeat(2,1fr);
    }

}

/*==========================
SP
==========================*/

@media (max-width:768px){

    .section-voice{
        padding:70px 20px;
    }

    .voice-text{
        margin:20px auto 40px;
        font-size:15px;
        line-height:1.9;
		text-align : left;
    }

    .voice-list{
        grid-template-columns:1fr;
        gap:20px;
    }

    .voice-card{
        padding:25px 20px;
    }

    .voice-profile{
        width:80px;
        height:80px;
        margin-bottom:15px;
    }

.voice-star{
    margin:15px 0;
    color:#b9965a;
    font-size:18px;
    letter-spacing:.08em;
    line-height:1;
}

    .voice-card p{
        font-size:14px;
        line-height:1.9;
    }

    .voice-name{
        margin-top:20px;
        padding-top:15px;
    }

}