@charset "Shift_JIS";

/* CSS Document */

#mainContainer {
    width: 100%;
    max-width: 890px;
    margin: 0 auto;
}

.mainimg-box {
    width: 100%;
    position: relative;
}

.fuwafuwa {
    position: absolute;
    opacity: 0.8;
    width: 16%;
    top: 1%;
    left: 83%;
    z-index: 2
}

.message {
    width: 60%;
    max-width: 450px;
    position: absolute;
    top: 10%;
    z-index: 3
}

.mainimg {
    max-width: 890px;
    width: 87%;
    margin-left: 13%;
}

.temairazu {
    width: 100%;
    background-color: #fff7f8;
    padding: 15px 0;
    margin-top: 35px;
    margin-bottom: 90px;
    position: relative
}

.sub-title {
    position: absolute;
    width: 100%;
    max-width: 270px;
    top: -20%;
}

.temairazu figure,
.temairazu figure img {
    width: 100%;
}

.temairazu .flex-set+p {
    text-indent: 2em
}

.effect {
    position: absolute;
    width: 100%;
    max-width: 411px;
    top: 49%;
}

.midashi-box {
    width: 100% !important;
}

.tema-text {
    width: 100%;
    max-width: 370px;
    padding: 10px
}

.tema-text:last-child {
    position: relative
}

.temairazu>.flex-set {
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 20px;
    align-items: center;
    -webkit-align-items: center;
}

.temairazu h2 {
    font-size: 1.6em;
    margin-bottom: 1em;
}

.tema-mainimg {
    width: 100%;
    max-width: 445px;
}

.tema-mainimg:last-child {
    max-width: 372px;
}

.tema-subimg img {
    max-width: 312px;
    margin: 15px auto 0;
    display: block;
}

.midashi-box img {
    width: 100%
}

.detail-box {
    width: 100%;
    position: relative
}

.detail-box {
    padding: 5% 0 10%
}

.detail img {
    width: 100%
}

.spec-box {
    width: 100%;
}

.fuwafuwa3,
.fuwafuwa3 img {
    width: 100%;
}

.fuwafuwa3 {
    position: absolute;
    top: 0
}

.spec {
    width: 100%;
    margin: 0;
    padding: 13px;
    z-index:1
}

.spec-header {
    padding-bottom: 9%;
    position: relative
}

.spec dd {
    margin: 0;
    padding: 0
}

.spec-img img {
    width: 100%;
}

.spec-title {
    border-bottom: solid #0071bc 2px;
    padding: 0.1em 0 !important;
    font-size: 1.3em
}


.spec-detail {
    font-size: 0.8em
}

.spec-flex {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
}

.flex-set {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.temairazu figure,
.temairazu figure img {
    width: 100%;
}

.sub-title {
    position: absolute;
    max-width: 280px;
    top: -19%;
}

#contents {
    width: 100% !important;
}

@media screen and ( max-width:479px) {
    #mainContainer {
        width: 98%
    }
    .midashi-box {
        display: block !important
    }
    .spec-flex {
        display: block;
        text-align: left
    }
    .spec {
        width: 98%;
        max-width: 100%;
        margin: 15px auto;
        padding: 0
    }
    .temairazu .midashi-box {
        width: 30% !important;
    }
    .flex-set {
        display: block
    }
    .tema-mainimg,
    .tema-text,
    .tema-mainimg:last-child {
        max-width: 100%;
        margin: 5% 0
    }
    .temairazu .flex-set+p {
        text-indent: 0;
        text-align: center
    }
    .sub-title {
        top:-6%;
        width: 30% !important;
    }
}


/*/////////////// �lj� /////////////////*/
.temairazu {
	background-color: rgba(255,247,248,0.00);
	margin-top: -50px;
	margin-bottom: 20px
}

.spec-flex {
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:flex;
	flex-wrap: wrap;
	padding: 0;
	justify-content: space-between;		
}

.spec {
	padding: 0;
}

.spec-header {
    padding-bottom: 6%;
}

.spec-box h2 {
	font-size: 1.8em;
	font-weight: bold;
	width: 100%;
	display: block;
	margin-bottom: 0;
}

.spec-box h3 {
	font-size: 1.4em;
	font-weight: bold;
	width: 100%;
	display: block;
	margin-bottom: 10px;
}

.border-bottom-0 {
	border-bottom: 0;
}

.text-center {
	text-align: center;
}


/*//// �����h�A ////*/
.block-1 .spec {
	width: 100%;
}

.block-1 .w-door .spec {
	width: 30%;
}


/*//// �N���[�[�b�g ////*/
.block-2 .spec {
	width: 100%;
}

.block-2 .spec img {
	width: 100%;
}

/*//// �t���[�����O ////*/
.block-3 .spec {
	width: 100%;
}

.block-3 .w-color {
	justify-content: space-between;
}

.block-3 .f-box {
	width: 100%;
	margin-bottom: 20px;
}

.block-3 .f-box:last-child {
	margin-bottom: 0;
}

.block-3 .w-spec {
	width: 100% !important;
}

.block-3 .f-text-box {
	justify-content: space-between;
}

.block-3 .f-text-box h4 {
	width: 40%;
	font-size: 1.2em;
	background-color: #80414a;
	color: #fff;
	padding: 1em;
	border-radius: 10px;
	text-align: center;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block-3 .f-text-box h4:nth-last-child(-n+2) {
	margin-bottom: 0;
}

.block-3 .w-spec .spec-flex {
	justify-content: space-between;
}

.block-3 .w-spec .f-box {
	width: 47%;
}

.block-3 .w-spec .f-box p {
	font-size: 1.2em;
}

.door-color .f-box  {
    max-width: 30%;
}
.door-color .f-box img {
    width: 100%;
}

.door-color .f-box:last-child {
    flex: 0 0 100%;
    margin: 0 auto 0 5%;
}


@media (min-width: 480px) {
	.temairazu {
		margin-top: -35px;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 576px) {
	.spec-header {
		padding-bottom: 7%;
	}

	.spec-box h2 {
		margin-bottom: 15px;
	}
    .door-color .f-box  {
        max-width: 100px;
    }
}


@media (min-width: 768px) {	
	.temairazu {
		margin-top: -100px;
		margin-bottom: 80px !important;
	}
	
	.spec-header {
		padding-bottom: 7%;
	}

	.spec-box h2 {
		font-size: 2em;
		margin-bottom: 15px;
	}

	.spec-box h3 {
		font-size: 1.5em;
		margin-bottom: 10px;
	}


	/*//// �����h�A ////*/
	.block-1 .spec {
		width: 31.5%;
	}
	.block-1 .w-door {
		padding-left: 20%;
		padding-right: 20%;
	}
	
	.block-1 .w-door .spec {
		width: 30%;
	}
	
	/*//// �N���[�[�b�g ////*/
	.block-2 .spec {
		width: auto;
	}
	
	.block-2 .spec img {
		width: auto;
		height: 320px;
	}

	/*//// �t���[�����O ////*/
	.block-3 .spec {
		width: 47.5%;
	}

	.block-3 .w-color {
		justify-content: space-between;
	}

	.block-3 .f-box {
		width: 47.5%;
		margin-bottom: 15px;
	}

	.block-3 .f-text-box h4 {
		width: 20%;
		font-size: 1.2em;
		margin-bottom: 0;
	}

	.block-3 .w-spec .f-box {
		width: 18%;
	}

	.block-3 .w-spec .f-box p {
		font-size: 1.2em;
	}
    .door-color .f-box:last-child {
        flex: 0 0 100%;
        margin: 0;
    }
}

@media (min-width: 992px) {
	.block-1 .w-door {
		padding-left: 25%;
		padding-right: 25%;
	}
	
	/*//// �N���[�[�b�g ////*/	
	.block-2 .spec img {
		height: 400px;
	}	

}