@charset "UTF-8";

img{
        vertical-align: top;
}

#m-9zhero{
        background: url("../images/m9zhero.jpg");
	background-size: cover;
        background-position: center;
	background-blend-mode: screen;
        width: 100%;
        aspect-ratio:25/14;
        position: relative;
}
#m-9z{
        background: url("../images/m-9z_bg.jpg");
        object-fit: cover;
	background-size: cover;
        background-position: center;
        background-color: rgba(230,230,230,0.70);
	background-blend-mode: screen;
}
#m-9z p{
        color:#606060;
}
.m-9zconcept{
    display: flex;
        gap: 0 2%;
}
.m-9zconcept .grow{
        flex:3;
}
.m-9zconcept .grow2{
        flex:2;
}

.m-9zlineup{
        display: flex;
        margin: 1rem 0;
        gap: 2%;
}
.m-9zlineup .grow{
        flex:3
}
.m-9zlineup .grow2{
        flex:1
}
.m-9zlineup .pointlist img{
        padding: 1rem;
}

/*セクション共通項目*/
.page-title{
	font-size: 2rem;
	color: #6A463F;
	font-weight: 450;
	text-align: center;
        line-height: 5rem;
        margin-bottom: 1.5rem;
}

/* フッター */
/*footer{
	width: 100%;
	background-color: #E1C3AE;
	text-align: center;
	padding: 3% 10% 0;
}
footer a:hover{
	color:#fff;
}
footer img{
	width: 30vw;
	max-width: 200px;
	min-width: 150px;
	margin-bottom: 0.5rem;
}
.footer-box {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 2%;
}
.footer-box  li {
	 padding: 0 1.5%;
}*/

/*タブレット縦、スマホ横等スマホ版デザイン、539～960px用*/
@media (max-width:960px){
html {
	font-size: 80%;
}
.m-9zlineup .pointlist img{
        padding: 0.35rem;
}   
        
}
/*スマホ縦用スマホ版デザイン、320～539px以下用
-------------------------------------*/
@media (max-width:539px){
html {
	font-size: 65%;
}
.m-9zconcept{
    display: block;
}
.m-9zlineup{
        display: block;
        margin: 1rem 0;
        gap: 2%;
}
.m-9zlineup .pointlist{
        display: flex;       
        }
}