@charset "UTF-8";
/* CSS Document */
/*----------------------------------------------------------
ホームcss
----------------------------------------------------------*/


/* 共通
-----------------------------*/
html{
    margin: 0;
    background: #999;
}
body{
    background: #FFF;
}
body *{
    margin: 0;
	box-sizing: border-box;
	font-size: 15px;
	/*background: hsla(0,0%,0%,0.05);*/
}
p{
    margin: 0;
    padding: 0;
    line-height: 1.8;
}
img{
    width: 100%;
}


/* ヘッダー
-----------------------------*/
header{
    margin: 0;
    padding: 1em 4%;
    background: #FBEEED;
}
header h1{
    margin: 0;
}
@media screen and (min-width: 768px){
    header h1{
        margin: 0 auto;
        max-width: 768px;
    }
}


/* メイン
-----------------------------*/
main{
    background-image: linear-gradient(#fbeeed, #f5dcd6);
    padding: 0 4% 2em;
}


div.box1{
    background: url("images/bg.png") no-repeat left top;
    background-size: 100% auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
@media screen and (min-width: 768px){
    div.box1{
        margin: 0 auto;
        max-width: 1100px;
        position: relative;
    }
}
div.box1 > img.kome{
    width: 48%;
    height: 48%;
    margin: -0.5em 0 0 2%;
}
div.box1 > img.day{
    width: 25%;
    height: 25%;
    margin: -1em 0 0;
}
div.box1 > img.milk{
    width: 44%;
    height: 44%;
    margin: 0 0 0 -1em;
}
div.box1 > img.yasai{
    width: 49%;
    height: 49%;
    margin: -2em 1% 0 0;
}
div.box1 > img.gyu{
    width: 42%;
    height: 42%;
}
div.box1 > img.ringo{
    width: 50%;
    height: 50%;
    margin: -2.5em -1em 0 0;
}
@media screen and (min-width: 768px){
    div.box1 > img{
        position: absolute;
    }
    div.box1 > img.kome{
        width: 29%;
        height: auto;
        left: 6%;
        top: 0;
    }
    div.box1 > img.day{
        width: 16%;
        height: auto;
        right: 0;
        top: 0;
    }
    div.box1 > img.milk{
        width: 24%;
        height: auto;
        left: -2%;
        top: 31%;
    }
    div.box1 > img.yasai{
        width: 29%;
        height: auto;
        right: -3%;
        top: 32%;
    }
    div.box1 > img.gyu{
        width: 26%;
        height: auto;
        left: 4%;
        bottom: 0;
    }
    div.box1 > img.ringo{
        width: 27%;
        height: auto;
        right: 2%;
        bottom: 2%;
    }
}
div.box1 h2{
    text-align: center;
}
div.box1 h2 img.kimura{
    width: 70%;
    margin: -5em 0 0;
}
@media screen and (min-width: 768px){
    div.box1 h2 img.kimura{
        width: 50%;
        margin: -1em 0 0;
    }
}


div.box2{
    background: #FFF;
    padding: 0.2em 5%;
    border-radius: 1.5em;
}
div.box2 h3{
    padding: 0.4em 0;
}
div.box2 h3 img{
    padding: 0.2em 0;
}
@media screen and (min-width: 768px){
    div.box2{
        padding: 1em 4%;
        border-radius: 2em;
    }
    div.box2 h3 img{
        width: 50%;
    }
}
div.box2 h4,
div.box3 h4{
    text-align: center;
    border-bottom: 1px solid #999;
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin: 2em 0 .6em;
    padding: 0 0 0.2em;
}
div.box2 a.btn{
    display: block;
    margin: 1em 0 3em;
    padding: 1em 0.5em;
    background: #39A09A;
    background: #B87FAE;
    text-align: center;
    color: #FFF;
    text-decoration: none;
}
div.box2 img.qr{
    display: none;
}
@media screen and (min-width: 768px){
    div.box2,
    div.box3{
        margin: 0 auto;
        max-width: 768px;
    }
    div.box2 img.qr{
        display: inline;
        width: 20%;
        margin: 0 4% 0 0;
    }
    div.box2 img.step{
        width: 76%;
    }
}
div.box3 p a.btn{
    display: block;
    margin: 1em 0 3em;
    padding: 1em 0.5em;
    background: #B87FAE;
    background: #39A09A;
    text-align: center;
    color: #FFF;
    text-decoration: none;
}


/* フッター
-----------------------------*/
footer{
    margin: 0;
    padding: 2em 1em 0;
    text-align: center;
}
address{
    font-style: normal;
}
address h5{
    margin: 0;
    font-size: 1.4em;
}
address p span{
    font-size: .8em;
}
address p.copyright{
    padding: 1em 0 2em;
    font-size: .5em;
}
@media screen and (min-width: 768px){
    address h5 br{
        display: none;
    }
}








/*
.aaa{
	background: hsla(0,0%,0%,0.10);
	background: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
}
.aaa div{
	margin: 0;
	padding: 0;
	width: 50%;
}
@media screen and (min-width: 1200px),print{
	.aaa div{
		padding: 0;
	}
}
@media screen and (max-width: 1199px){
	.aaa div{
		padding: 0;
	}
}
*/