/* ==========================
FV
========================== */

.fv{
    width:100%;
	background:#fffef8;
	padding:30px 0;
}

.fv-inner{
    max-width:none;
    margin:0 auto;
}

/* 共通 */
.fv img{
    display:block;
    height:auto;
    margin:0 auto;
}

/* PC */

.fv-pc{
    display:block;
}

.fv-pc img{
    width:auto;
    max-width:100%;
}

.fv-sp{
    display:none;
}


/* SP */

@media screen and (max-width:767px){
    .fv{
        padding:0;
        background : #fff;
    }

    .fv-inner{
        width:100%;
    }

    .fv-pc{
        display:none;
    }

    .fv-sp{
        display:block;
    }

    .fv-sp img{
        width:100%;
        height:auto;
    }

}
/* ==========================
ABOUT
========================== */

.about{
padding:100px 20px;
}

.about-inner{
max-width:1280px;
margin:0 auto;
}

.about-heading{
text-align:center;
margin-bottom:60px;
}

.about-sub{
font-size:14px;
letter-spacing:0.2em;
color:#999;
margin-bottom:10px;
}

.about-title{
font-family:'Zen Old Mincho', serif;
    font-size:36px;
    font-weight:400;
    letter-spacing:0.08em;
    line-height:1.6;
}
.about-content{
display:flex;
align-items:center;
gap:80px;
}

.about-image{
width:40%;
}

.about-image img{
width:100%;
display:block;
}

.about-text{
width:60%;
}

.about-text p{
line-height:2;
margin-bottom:25px;
}

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

@media screen and (max-width:767px){
.about{
    padding:40px 20px 60px 20px;
}

.about-heading{
    margin-bottom:30px;
}

.about-title{
    font-size:24px;
}

.about-content{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.about-image{
    width:100%;
    order:1;
}

.about-text{
    width:100%;
    order:2;
}
}

/* ==========================
サンプルサイト
========================== */

.sample{
    padding:100px 20px;
    background:#fffef8;
}

.sample-inner{
    max-width:1480px;
    margin:0 auto;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-sub{
font-family:'Zen Old Mincho', serif;
    font-size:18px;
    color:#d8a3a3;
    letter-spacing:0.08em;
    margin-bottom:8px;
}

.section-title{
font-family:'Zen Old Mincho', serif;
    font-size:42px;
    font-weight:400;
    color:#4b4038;
    letter-spacing:0.08em;
    line-height:1.5;
    margin-bottom:20px;
}

.section-lead{
    line-height:2;
    color:#555;
}

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

.sample-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.sample-card a{
    display:block;
    color:inherit;
    text-decoration:none;
}

.sample-img{
    padding:15px 15px 0;
}

.sample-img img{
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
}

.sample-body{
    padding:28px 26px 30px;
}

.sample-type{
    display:inline-block;
    padding:5px 16px;
    margin-bottom:16px;
    border-radius:999px;
    background:#d8a3a3;
    color:#fff;
    font-size:13px;
}

.sample-body h3{
font-family:'Zen Old Mincho', serif;
    font-size:24px;
    font-weight:400;
    color:#4b4038;
    margin-bottom:14px;
}

.sample-body p{
    font-size:14px;
    line-height:1.8;
    color:#666;
    margin-bottom:22px;
}

.sample-body span{
    font-size:12px;
    letter-spacing:0.12em;
    color:#d8a3a3;
}

.sample-card--coming{
    opacity:0.75;
}

/* SP */

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

    .sample{
        padding:70px 20px;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .section-title{
        font-size:30px;
    }

    .section-lead{
        text-align:left;
    }

    .sample-list{
        grid-template-columns:1fr;
        gap:28px;
    }

    .sample-body{
        padding:24px 22px 28px;
    }

}

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

.point{
    padding:100px 20px;
    background:#fff;
}

.point-inner{
    max-width:1480px;
    margin:auto;
}

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

@media screen and (max-width:1366px){
.point-inner{
    max-width:880px;
    margin:auto;
}
    .point-list{
        grid-template-columns:repeat(2,1fr);
    }

}

.point-box{
    background:#fffef8;
    border:1px solid #ece5df;
    border-radius:20px;
    padding:50px 35px;
    text-align:center;
    transition:.3s;
}

.point-box:hover{
    transform:translateY(-5px);
}

.point-icon{
    margin-bottom:25px;
    text-align:center;
}

.point-icon .material-symbols-outlined{
    font-size:60px;
    color:#9fb88f;
}

.point-box h3{
font-family:'Zen Old Mincho', serif;
    font-size:24px;
    font-weight:400;
    color:#4b4038;
    line-height:1.5;
    margin-bottom:20px;
}

.point-box p{
    line-height:1.6;
    color:#666;
    font-size:15px;
    text-align : left;
}

.industry-btn{
    margin-top:0px;
    padding:7px 24px;
    border:none;
    border-radius:999px;
    background:#555151;
    color:#fff;
    font-size:13px;
    cursor:pointer;
}

.industry-list{
    display:none;
    margin-top:20px;
}

.industry-list.active{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.industry-list span{
    display:inline-block;
    padding:4px 14px;
    background:#e7ecf7;
    border-radius:999px;
    font-size:13px;
    color:#666;
}

/* SP */

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

    .point{
        padding:70px 20px;
    }

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

    .point-box{
        padding:40px 25px;
    }

    .point-box h3{
        font-size:22px;
    }

}

/* ==========================
PLAN
========================== */

.plan{
    padding:100px 20px;
    background:#fffef8;
}

.plan-inner{
    max-width:1280px;
    margin:auto;
}

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

.plan-card{
    position:relative;
    background:#fff;
    border:1px solid #eadfd8;
    border-radius:22px;
    padding:46px 34px 36px;
    box-shadow:0 12px 35px rgba(0,0,0,0.05);
}

.plan-limit{
    display:inline-block;
    padding:6px 18px;
    margin-bottom:24px;
    border-radius:999px;
    background:#d8a3a3;
    color:#fff;
    font-size:13px;
    letter-spacing:0.08em;
}

.plan-card h3{
font-family:'Zen Old Mincho', serif;
    font-size:28px;
    font-weight:400;
    color:#4b4038;
    margin-bottom:24px;
}

.plan-price{
    margin-bottom:26px;
}

.plan-price .normal{
    display:block;
    color:#999;
    font-size:15px;
    text-decoration:line-through;
    margin-bottom:8px;
}

.plan-price .special{
    display:block;
    font-size:38px;
    font-weight:600;
    color:#c77f82;
    line-height:1.2;
}

.plan-card p{
    line-height:1.9;
    color:#666;
    margin-bottom:24px;
}

.plan-card ul{
    list-style:none;
    padding:0;
    margin:0 0 30px;
}

.plan-card li{
    position:relative;
    padding-left:1.4em;
    margin-bottom:10px;
    color:#555;
    line-height:1.7;
}

.plan-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.75em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#d8a3a3;
}

.plan-btns{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.plan-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    border-radius:999px;
    padding:14px 18px;
    font-size:15px;
    transition:.3s;
}

.plan-btn.main{
    background:#c77f82;
    color:#fff;
}

.plan-btn.sub{
    border:1px solid #c77f82;
    color:#c77f82;
    background:#fff;
}

.plan-btn:hover{
    opacity:.8;
}

/* SP */

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

    .plan{
        padding:70px 20px;
    }

    .plan-list{
        grid-template-columns:1fr;
        gap:26px;
    }

    .plan-card{
        padding:38px 24px 30px;
    }

    .plan-card h3{
        font-size:25px;
    }

    .plan-price .special{
        font-size:34px;
    }

}

/* ==========================
OPTION
========================== */

.option{
    padding:100px 20px;
    background:#fff;
}

.option-inner{
    max-width:780px;
    margin:auto;
}

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

.option-item{
    position:relative;
    padding-left:20px;
    line-height:1.8;
    color:#555;
}

.option-item::before{
    content:"●";
    position:absolute;
    left:0;
    top:0;
    color:#d8a3a3;
    font-size:12px;
}

.option-note{
    margin-top:30px;
    text-align:center;
    line-height:1.9;
    color:#666;
}

/* SP */

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

    .option{
        padding:70px 20px;
    }

    .option-list{
        grid-template-columns:1fr;
        gap:6px;
    }

    .option-note{
        text-align:left;
    }

}

/* ==========================
FLOW
========================== */

.flow{
    padding:100px 20px;
    background:#fffef8;
}

.flow-inner{
    max-width:1080px;
    margin:auto;
}

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

.flow-item{
    position:relative;
    background:#fff;
    border:1px solid #eadfd8;
    border-radius:20px;
    padding:34px 20px 30px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,0.04);
}

.flow-num{
    width:52px;
    height:52px;
    margin:0 auto 22px;
    border-radius:50%;
    background:#d8a3a3;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
font-family:'Zen Old Mincho', serif;
    font-size:18px;
    letter-spacing:0.04em;
}

.flow-text h3{
font-family:'Zen Old Mincho', serif;
    font-size:20px;
    font-weight:400;
    color:#4b4038;
    line-height:1.6;
    margin-bottom:14px;
}

.flow-text p{
    font-size:14px;
    line-height:1.8;
    color:#666;
    text-align:left;
}

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

    .flow-list{
        grid-template-columns:repeat(3,1fr);
        gap:24px;
    }

}

/* SP */

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

    .flow{
        padding:70px 20px;
    }

    .flow-list{
        display:block;
    }

    .flow-item{
        display:flex;
        align-items:flex-start;
        gap:18px;
        text-align:left;
        padding:24px 20px;
        margin-bottom:16px;
    }

    .flow-num{
        flex:0 0 48px;
        width:48px;
        height:48px;
        margin:0;
        font-size:16px;
    }

    .flow-text h3{
        font-size:19px;
        margin-bottom:8px;
    }

    .flow-text p{
        font-size:14px;
    }

}

/* ==========================
FAQ
========================== */

.faq{
    padding:100px 20px;
    background:#fff;
}

.faq-inner{
    max-width:980px;
    margin:auto;
}

.faq-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{
    background:#faf8f5;
    border:1px solid #eadfd8;
    border-radius:20px;
    padding:28px 32px;
}

.faq-q,
.faq-a{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.faq-q{
    margin-bottom:18px;
}

.faq-q span,
.faq-a span{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
font-family:'Zen Old Mincho', serif;
    font-size:18px;
}

.faq-q span{
    background:#d8a3a3;
    color:#fff;
}

.faq-a span{
    background:#fff;
    color:#d8a3a3;
    border:1px solid #d8a3a3;
}

.faq-q h3{
font-family:'Zen Old Mincho', serif;
    font-size:20px;
    font-weight:400;
    color:#4b4038;
    line-height:1.7;
}

.faq-a p{
    line-height:1.9;
    color:#666;
}

/* SP */

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

    .faq{
        padding:70px 20px;
    }

    .faq-item{
        padding:24px 20px;
        border-radius:16px;
    }

    .faq-q,
    .faq-a{
        gap:12px;
    }

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

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

}

/* =========================
オリジナル制作案内
========================= */

.original {
    padding: 100px 0;
    background: #fdf9f5;
}

.original-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.original-box {
	max-width: 880px;
	margin: 0 auto;
    padding: 50px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.original-box p {
    font-size: 15px;
    line-height: 2.2;
    color: #666;
    margin-bottom: 20px;
    text-align : left;
}
.original-box p:last-child {
    margin-bottom: 0;
}

.original-btn-area {
    margin-top: 35px;
    text-align: center;
}

.original-btn {
    display: inline-block;
    min-width: 280px;
    padding: 18px 40px;
    background: #d7a678;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    transition: 0.3s;
}

.original-btn:hover {
    opacity: 0.85;
    color: #fff;
}

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

    .original {
        padding: 70px 0;
    }

    .original-box {
        padding: 30px 24px;
    }

    .original-box p {
        font-size: 14px;
        line-height: 2;
        text-align: left;
    }

}
/* =========================
CONTACT
========================= */

.contact {
    padding: 100px 0;
    background: #fff;
}

.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-box {
    background: #fdf6f5;
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}

.contact-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.contact-text {
    width: 50%;
}

.contact-en {
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 10px;
}

.contact-text h2 {
font-family:'Zen Old Mincho', serif;
    font-size: 32px;
    line-height: 1.5;
    color: #555;
    font-weight: 500;
    margin-bottom: 40px;
}

.contact-text p {
    font-size: 15px;
    line-height: 2;
    color: #333;
}

.contact-image {
    width: 50%;
}

.contact-image img {
    width: 100%;
    display: block;
}

.contact-form {
    margin: 0;
}


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

@media screen and (max-width:767px){
.contact-en {
    text-align : center;
}
.contact {
    padding: 40px 0;
}

.contact-box {
    padding: 20px;
}

.contact-content{
    display:block;
}

.contact-text{
    width:100%;
}

.contact-text h2 {
    font-size:21px;
    line-height:1.5;
    margin-bottom:20px;
    text-align : center;
}

.contact-image{
    width:100%;
    margin-top:20px;
}

.contact-image img{
    width:100%;
}

}

/* =========================
FORM
========================= */

.contact-form{
    margin-top:0px;
}

.form-item{
    margin-bottom:28px;
}

.form-item > label:first-child{
    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:#555;
}

.required{
    display:inline-block;
    margin-left:8px;
    padding:3px 8px;
    background:#d97b7b;
    color:#fff;
    font-size:11px;
    border-radius:20px;
}

.optional{
    display:inline-block;
    margin-left:8px;
    padding:3px 8px;
    background:#aaa;
    color:#fff;
    font-size:11px;
    border-radius:20px;
}

.contact-form input[type="text"],
.contact-form textarea{
    width:100%;
    padding:16px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    box-sizing:border-box;
    font-size:15px;
}

.contact-form textarea{
    min-height:220px;
    resize:vertical;
}

.radio-item{
    display:block;
    margin-bottom:12px;
    font-size:15px;
    color:#555;
    font-weight:400;
}

.radio-item input{
    margin-right:8px;
}

.form-submit{
    margin-top:50px;
    text-align:center;
}

.form-submit input[type="submit"]{
    width:100%;
    max-width:420px;
    padding:18px;
    border:none;
    border-radius:999px;
    background:#c7a38b;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.form-submit input[type="submit"]:hover{
    opacity:.85;
}

.form-note{
    margin:0 0 10px;
    font-size:13px;
    line-height:1.8;
    color:#888;
}

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

    .contact-form{
        margin-top:40px;
    }

    .contact-form input[type="text"],
    .contact-form textarea{
        font-size:16px;
    }

}