@charset 'utf-8';

/* ==========================================================================

	製品紹介

   ========================================================================== */

/*--------------------------------
	基本レイアウト
--------------------------------*/


/* メイン画像 */

.product .product_photo img {
    width: 100%;
}

/* 作品・作家紹介 */

.product .introduction {
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 100px auto 0;
}

.product .introduction > div.product_detail {
    width:65%;
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
}

.product .introduction > div.product_detail > div + div {
    margin-top: 60px;
}

.product .introduction > div.product_detail div h2 {
    display: block;
    font-size: 2.6rem;
    text-align: left;
    margin: 0 auto;
}

.product .introduction > div.product_detail div h2 em {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    text-align: left;
    margin: 0 auto 5px;
}

.product .introduction > div.product_detail div .spec {
    margin: 10px auto 0;
    font-size: 1.3rem;
    color: #444;
    font-family: "myriad-pro", sans-serif;
}

.product .introduction > div.product_detail div .text {
    margin: 20px auto 0;
    font-size: 1.5rem;
}

.product .introduction > div.product_creator {
    width:20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
}

.product .introduction > div.product_creator img {
    width: 100%;
}

.product .introduction > div.product_creator strong {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: normal;
    margin: 1em auto 0;
}


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

    /* 作品・作家紹介 */

    .product .introduction {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 3em auto 0;
    }

    .product .introduction > div.product_detail {
        width:100% !important;
        margin:0 0 5em 0;
    }

    .product .introduction > div.product_creator {
        width:100% !important;
        margin:0;
    }
    
    .product .introduction > div.product_detail div h2 {
        font-size: 2.4rem;
    }
    
    .product .introduction > div.product_creator img {
        width: 50%;
        margin: 0 auto;
    }

    .product .introduction > div.product_creator strong {
        font-size: 1.4rem;
    }
    
    

}