/* ==================================================
MULTI WAFFLE
================================================== */

.mwf-container{
    width:840px;
    margin:0 auto;
}

.mwf-leadText{
    width:800px;
    margin:0 auto 70px;
    font-size:16px;
    line-height:2;
    color:#333;
}


/* --------------------
Hero
-------------------- */

.mwf-hero{
    padding:40px 0 80px;
}

.mwf-hero__image img{
    width:100%;
    display:block;
}

.mwf-hero__inner{
    width:1200px;
    margin:0 auto;
}

/* --------------------
Common
-------------------- */

.mwf-sectionLead{
    font-size:32px;
    font-weight:700;
    margin-bottom:30px;
    letter-spacing:.08em;
}

.mwf-sectionTitle{
    font-size:24px;
    font-weight:700;
    margin-bottom:50px;
    padding-bottom:15px;
    border-bottom:1px solid #999;
}

.mwf-text{
    font-size:16px;
    line-height:2;
    color:#333;
}

.mwf-btn{
    width:260px;
    height:56px;
    background:#000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
}

.mwf-buttonWrap{
    display:flex;
    justify-content:center;
    margin-top:50px;
}

/* --------------------
Intro
-------------------- */

.mwf-intro{
    padding-bottom:120px;
}

.mwf-intro__gallery{
    display:flex;
    gap:20px;
    margin-top:50px;
}

.mwf-intro__galleryItem{
    flex:1;
}

.mwf-intro__galleryItem img{
    width:100%;
    display:block;
}

/* --------------------
Feature
-------------------- */

.mwf-feature{
    background:#e0e0e0;
    padding:120px 0;
}

.mwf-featureGrid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
}

.mwf-feature__top{
    display:flex;
    justify-content:space-between;
    margin-bottom:60px;
}

.mwf-feature__bottom{
    display:flex;
    justify-content:space-between;
}

.mwf-feature__top .mwf-featureItem{
    width:340px;
}

.mwf-feature__bottom .mwf-featureItem{
    width:220px;
}

/* --------------------
Colors
-------------------- */

.mwf-colors{
    padding:120px 0;
}

.mwf-wideImage{
    margin-bottom:80px;
}

.mwf-wideImage img{
    width:100%;
    display:block;
    margin-bottom:30px;
}

/* --------------------
Product
-------------------- */

.mwf-productGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:60px;
}

.mwf-product img{
    width:100%;
    display:block;
}

/* --------------------
Styles
-------------------- */

.mwf-styles{
    padding-bottom:120px;
}

/* --------------------
Styling
-------------------- */

.mwf-styling{
    padding-bottom:120px;
}

.mwf-visumo{
    min-height:800px;
}

/* --------------------
Brand
-------------------- */

.mwf-brand{
    padding-bottom:120px;
}

.mwf-brand__logo{
    text-align:center;
    margin:60px 0;
}

.mwf-brand__logo img{
    max-width:400px;
}



/* ==================================================
SP / Tablet
================================================== */
@media only screen and (max-width: 768px) {

    /* --------------------
    Base
    -------------------- */

    .freepage-contents {
        width: 100%;
        padding-bottom: 60px;
        overflow-x: hidden;
    }

    .mwf-container {
        width: auto;
        max-width: none;
        margin: 0 20px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* --------------------
    Hero
    -------------------- */

    .mwf-hero {
        padding: 0;
        margin-bottom: 45px;
    }

    .mwf-hero__inner {
        width: 100%;
        margin: 0;
    }

    .mwf-hero__image {
        width: 100%;
    }

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

    /* --------------------
    Common Typography
    -------------------- */

    .mwf-sectionLead {
        margin: 0 0 20px;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .mwf-sectionTitle {
        margin: 0 0 30px;
        padding-bottom: 8px;
        font-size: 16px;
        line-height: 1.5;
        border-bottom: 1px solid #888;
    }

    .mwf-text,
    .mwf-leadText {
        width: auto;
        margin-right: 0;
        margin-left: 0;
        font-size: 13px;
        line-height: 1.9;
        letter-spacing: 0.03em;
    }

    /* --------------------
    Intro
    -------------------- */

    .mwf-intro {
        padding-bottom: 70px;
    }

    .mwf-intro__gallery {
        display: block;
        margin-top: 30px;
    }

    .mwf-intro__galleryItem {
        width: 100%;
    }

    .mwf-intro__galleryItem img {
        display: block;
        width: 100%;
    }

    /* --------------------
    Button
    -------------------- */

    .mwf-buttonWrap {
        margin-top: 30px;
    }

    .mwf-btn {
        width: 210px;
        height: 46px;
        margin: 0 auto;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    /* ==================================================
    5つの特徴
    ================================================== */

    .mwf-feature {
        padding: 45px 0 60px;
        background: #ddd;
    }

    .mwf-feature .mwf-container {
        margin: 0 22px;
    }

    .mwf-feature .mwf-sectionTitle {
        margin-bottom: 25px;
    }

    /* --------------------
    特徴1・2
    -------------------- */

    .mwf-feature__top {
        display: block;
        margin-bottom: 40px;
    }

    .mwf-feature__top .mwf-featureItem {
        position: relative;
        width: 100%;
        margin-bottom: 38px;
    }

    .mwf-feature__top .mwf-featureItem:last-child {
        margin-bottom: 0;
    }

    .mwf-featureItem__image {
        width: 100%;
        margin-bottom: 10px;
    }

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

    .mwf-feature__top .mwf-featureItem h3 {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
    }

    .mwf-feature__top .mwf-featureItem p {
        margin: 0;
        font-size: 11px;
        line-height: 1.7;
        letter-spacing: 0.02em;
    }

    /* --------------------
    特徴3・4・5
    -------------------- */

    .mwf-feature__bottom {
        display: block;
    }

    .mwf-feature__bottom .mwf-featureItem {
        position: relative;
        display: grid;
        grid-template-columns: 110px 1fr;
        grid-template-areas:
            "icon title"
            "icon text";
        column-gap: 20px;
        width: 100%;
        min-height: 100px;
        margin-bottom: 32px;
        padding-left: 18px;
        box-sizing: border-box;
    }

    .mwf-feature__bottom .mwf-featureItem:last-child {
        margin-bottom: 0;
    }

    .mwf-featureItem__icon {
        grid-area: icon;
        align-self: center;
        width: 110px;
        margin: 0;
    }

    .mwf-featureItem__icon img {
        display: block;
        width: 100%;
        max-width:110px;
        height: auto;
    }

    .mwf-feature__bottom .mwf-featureItem h3 {
        grid-area: title;
        align-self: end;
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        align-items:flex-start;
    }

    .mwf-feature__bottom .mwf-featureItem p {
        grid-area: text;
        align-self: start;
        margin: 0;
        font-size: 11px;
        line-height: 1.7;
        letter-spacing: 0.02em;
    }

    /* ==================================================
    New Colors / New Styles
    ================================================== */

    .mwf-colors {
        padding: 65px 0 0;
    }

    .mwf-wideImage {
        width: 100%;
        margin-bottom: 22px;
    }

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

    .mwf-leadText {
        margin-top: 0;
        margin-bottom: 55px;
    }

    .mwf-leadText b {
        display: inline-block;
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.6;
    }

    /*
    現在のHTMLでは商品画像もmwf-wideImageなので、
    見出し直後の画像の余白を調整
    */

    .mwf-sectionTitle + .mwf-container,
    .mwf-sectionTitle + .mwf-wideImage {
        margin-top: 0;
    }

    /* --------------------
    Styling
    -------------------- */

    .mwf-styling {
        padding: 70px 0;
    }

    .mwf-visumo {
        min-height: 0;
    }

    /* --------------------
    Caravan
    -------------------- */

    .mwf-brand {
        padding: 30px 0 70px;
    }

    .mwf-brand__logo {
        margin: 35px auto;
        text-align: center;
    }

    .mwf-brand__logo img {
        width: 70%;
        max-width: 280px;
        height: auto;
    }
}