@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    display: flex;
    width: 96%;
    padding: 2%;
    background-color: #20604F;
    z-index: 1;
}
/* 荒井養蜂場 */
header div {
    width: 5%;
}

header img {
    width: 100%;
}

h1 {
    width: 15%;
    text-align: center;
    color: beige;
    font-family: "Sawarabi Gothic", sans-serif;
    font-weight: 400;
    font-size: 2.4vw;
}
/* ナビ */
nav {
    width: 60%;
    margin-left: auto;
}
nav ul {
    display: flex;
    list-style-type: none;      
}
nav ul li {
    width: 14%;
}
nav ul li:nth-of-type(2) {
    margin-left: 2%;
    margin-right: 2%;
}

nav ul li:nth-of-type(4) {
    margin-left: 2%;
}

nav ul li:nth-of-type(5) {
    margin-left: 8%;
    margin-right: 2%
}

nav ul li a {
    display: block;
    line-height: 3;
    text-decoration: none;
    text-align: center;
    color: beige;
    background-color: #91B493; 
    font-size: 1.1vw;  
    transition: 1s;
}

nav ul li a:hover {
    color: #F6C555;
    background-color: whitesmoke;
    transition: 1s;
}

/* meinスタート */
main {
    padding-top: 2%;
    background-color: wheat;
}

/* section1 上部 */
.section1 {
    width: 90%;
    height: 70%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    padding: 3%;
    background-image: url(../images/nanohana2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 3vw;
    color: #4D5139;
}

.box1 {
    width: 24vw;
    height: 24vw;
    margin-top: 10%;
    margin-left: auto;
    margin-right: 10%;
    border-radius: 12vw;
    background-color: rgba(245, 245, 245, 0.7);
}

h2 {
    padding-top: 10%;
    text-align: center; 
    font-size: 2.1vw;
    font-weight: 500;  
}

.box1 p {
    margin-top: 5%;
    padding: 3%; 
    white-space: pre-wrap;
    text-align: center;
    line-height: 1.7vw;
    text-indent: 1em;
    font-size: 1.2vw;   
}

/*section2 中央(ボックス３つ) */
.section2 {
    display: flex;
    width: 90%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    color: #4D5139;
}

.section2 div {
    width: 30%;
    margin: 2%;  
    padding: 2%;
    border: 5px solid #20604F;
    border-radius: 2vw;
    background-color: #F6C555; 
}

.section2 h3 {
    margin-bottom: 3%;
    text-align: center;
    font-size: 1.8vw;
    transition: 1em;
}

.section2 h3 a {
    line-height: 3vw;
    text-decoration: none;
    color: #20604F;
}

.section2 h3 a:hover {
    color: whitesmoke;
}



.section2 img {
    width: 100%;
    border-radius: 2vw;
    vertical-align: bottom;
}

.section2 p {
    text-indent: 1em;
    line-height: 1.6;
    font-size: 1.3vw;
}

/* section3(イラスト２つ) */
.section3 {
    display: flex;
    width: 80%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto; 
}

.section3 div {
    width: 40%;
    margin-top: 3%;
}

.section3 div img {
    width: 100%;
    vertical-align: bottom;  
}

.illust1 {
    margin-left: 10%;
    margin-right: auto;
}

.illust2 {
    margin-left: auto;
}

/* home 終了 */

footer {  
    background-color: #91B493;
}
/* 左側のグループ */
.content {
    display: flex;
    padding-top: 3%;
}

.footer1 {
    display: flex;
    width: 27%;
    margin-left: 8%;
}

.logobox {
    width: 27%;  
}

.logobox img {
    width: 100%;
    margin-top: 15%;
    vertical-align: bottom;
}

.addressbox {
    width: 73%;
    font-size: 1.1vw;
    color: #4D5139;   
}

.addressbox h2 {
    margin-left: 3%;
    text-align: justify;
}

.addressbox address {
    margin-left: 3%;
}

/* 右のグループ */
.footer2 {
    width: 45%;
    margin-right: 5%;
    margin-left: auto;  
}

footer ul li {   
    font-size: 1.3vw;
    color:  #4D5139;   
}

footer ul li a {
     text-decoration: none;
     line-height: 2vw;
     color:  #4D5139;
     transition: 1em;
}

footer ul li a:hover {
    transition: 1em;
    color: whitesmoke;
}

.last1 {
    display: flex;
    list-style-type: none;     
}

.last1 li {
    width: 20%;
    margin-top: 4%;
    margin-right: 15%; 
    text-align: center;    
}
.last2 {
    display: flex;
     list-style-type: none;      
}
.last2 li {
    width: 35%;
    margin-top: 3%;   
    margin-right: 15%; 
    text-align: center;   
}

/* アイコン３つ */
.footer3 {
    display: flex;
    width: 15vw;
    margin-left: 15%;  
     
}

.footer3 i:nth-of-type(1) {
    font-size: 2.5vw;
}

.footer3 i:nth-of-type(2) {
    margin-left: 2vw;
    margin-right: 2vw;
    font-size: 2.2vw;
    color: chartreuse;
}

.footer3 i:nth-of-type(3) {
    font-size: 2.2vw;
    color: blue;
}

.copy {   
    margin-top: 1%;
    padding: 1%;
    text-align: center;
    color: #4D5139; 
    background-color: #F6C555;
}