@charset "utf-8";
.box4 {
	grid-template-rows: auto;
}
.box4 h3 {
    border-left: solid 36px #ee87b4;
}
.box4 img {
    max-width: 960px;
}
.con1 {
	grid-column: 1 / 7;
}
.con2 {
	grid-column: 1 / 7;
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: solid 1px #d4d4d4;
    padding-bottom: 1.5rem;
    width: 100%;
}
.btn a {
    display: block;
    color: white;
    border-radius: 9px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    margin: 0 .5rem 1rem;
    padding: 2rem;
}
.btn .blue { background-color: #3fa9f5;}
.btn .green { background-color: #7ac943;}
.btn .orange { background-color: #fbb03b;}
.btn .red { background-color: #ed1c24;}
.btn .large { width: 100%; font-size: 14pt;}
.btn .small {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    font-size: 14pt;
    line-height: 1.5rem;
}
.btn .small a { width: 50%;
    display:inline-block;
}

.howto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.howto .text {
    display: block;
    width: 100%;
    max-width: 560px;
    text-align: left;
    margin: 0 1rem 1rem;
}
.howto h4 {
    font-size: 1.6rem;
    line-height: 2rem;
    color: orange;
    margin: 0 auto .3rem;
    padding: 0;
}
.howto p {
    font-size: 1rem;
    line-height: 1.6rem;
    margin: 0;
    padding: 0;
}
.howto img {
    max-width: 360px;
    margin: 0;
}

.sale {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #d4d4d4;
    padding-bottom: 2rem;
}
.sale .text {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 1rem 1rem;
}
.sale h4 {
    font-size: 1.6rem;
    line-height: 2rem;
    color: orange;
    margin: 0 auto .3rem;
    padding: 0;
}
.sale p {
    font-size: 1.4rem;
    line-height: 2rem;
    margin: 0;
    padding: 0;
}
.sale p span {
    color: red;
}
.sale img {
    max-width: 930px;
    margin: 0;
}

.order .step {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #d4d4d4;
    padding-bottom: 1.5rem;
    margin: 1.5rem auto 0;
}
.order .step img {
    width: 100%;
    max-width: 360px;
    margin: 0 1.6rem;
}
.order .step .text {
    display: block;
    text-align: left;
    width: 100%;
    max-width: 540px;
    margin: 1rem auto 0;
}
.order .step .text h4 {
    font-size: 1.3rem;
    line-height: 2rem;
    font-weight: bold;
    color: #00a99d;
    margin: 0;
}
.order .step .text p {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #333333;
    margin: 0;
}
.order .step .text a { color: red;}
.order .step .text span {
    display: block;
    font-size: 1rem;
}
.order .step .text .red { color: red;}
.order .step .text .blue { color: #0071bc;}

.expla .pc { display: block;}
.expla .sp { display: none;}

.cotion {
    display: block;
    width: 98%;
    text-align: left;
    border: solid 2px black;
}
.cotion h4 {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    color: black;
    background-color: yellow;
    border-bottom: solid 2px black;
    margin: 0;
    padding: 1rem;
}
.cotion p {
    font-size: 1rem;
    line-height: 1.8rem;
    margin: 0;
    padding: 1rem;
}
.cotion ul { padding: 0 1rem 0 2rem;}
.cotion ul li { padding: .2rem 0 .2rem 0;}
.cotion ul li a { color: firebrick;}

.select {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.select .text {
    text-align: left;
    margin: 0 1rem 1rem;
}
.select h4 {
    font-size: 1.3rem;
    line-height: 2rem;
    color: #3fa9f5;
    margin: 0 auto;
    padding: 0;
}
.select p {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #333333;
    margin: 0;
    padding: 0;
}
.select p a { color: red;}
.select img {
    width: 100%;
    max-width: 400px;
    margin: 0;
}

.body-list .body-item {
    display: inline-block;
    border: dashed 1px #cccccc;
    border-radius: 9px;
    width: 200px;
    margin: .3rem;
    padding: 1rem .5rem .5rem;
}
.body-list .body-item h5 {
    font-size: 1.2rem;
    margin: 0;
}
.body-list .body-item img {
    max-width: 180px;
    margin: .5rem auto;
}
.body-list .body-item a {
    display: block;
    font-size: .9rem;
    color: white;
    background-color: firebrick;
 
    border-radius: 9px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    margin: 0 .3rem .5rem;
    padding: 1rem 1rem;
}

.print h4 {
    font-size: 1.6rem;
    color: firebrick;
    text-align: left;
    margin: 0 1rem 1rem;
}
.print-style {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: left;
    border: solid 2px;
    border-radius: 6px;
    margin: 0 auto 1rem;
    padding: 1rem 1.5rem;
    max-width: 890px;
}
.print-style img {
    display: block;
    max-width: 180px;
    margin: 1rem auto;
}
.print-style .text {
    display: block;
    max-width: 630px;
}
.print-style .text h5 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin: 0 auto .5rem;
}
.print-style ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 1.5rem;
    color: #333333;
}
.print-style .text ul li { line-height: 1.6rem;}
.print-style .text ul li span { color: red;}

.silk { background-color: #e8f5fd; border-color: #2e3192;}
.full01 { background-color: #e7f3e4; border-color: #009245;}
.full02 { background-color: #fef4f8; border-color: #FD0076;}

.silk h5 { color: #2e3192;}
.full01 h5 { color: #009245;}
.full02 h5 { color: #FD0076;}

.con3 {
    grid-column: 1 / 7;
}



@media screen and (max-width: 1080px) {	
	.box4 {
		grid-template-rows: auto auto;
	}
	.con2 {
		width: 96%;
		max-width: 900px;
		margin: 0 auto;
	}
    .sale p {
        font-size: 1.4rem;
        line-height: 2rem;
        margin: 0;
        padding: 0;
    }
    .howto img { max-width: 540px;}
    .order .step .text { text-align: center; max-width: 600px;}
    .order .step img { max-width: 540px;}
    .select img { max-width: 540px;}
    .con3 {
        width: 96%;
		margin: 0 auto;
    }
}

@media screen and (max-width: 760px) {
    .expla .pc { display: none;}
    .expla .sp { display: block;}
	.btn .small{
		flex-wrap: wrap;
	}
	.btn .small a { 
		width: 100%;

	}
}