@font-face {
    font-family: "ZeroGothic";
    src: url(zen.woff2) format("woff2"); 
}
/* background */
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}


.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #72da9a;
    overflow: hidden;
    z-index: -2;
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 11s linear infinite;
}


.background li:nth-child(0) {
    left: 55%;
    width: 125px;
    height: 125px;
    bottom: -125px;
    animation-delay: 1s;
}
.background li:nth-child(1) {
    left: 48%;
    width: 153px;
    height: 153px;
    bottom: -153px;
    animation-delay: 4s;
}
.background li:nth-child(2) {
    left: 50%;
    width: 140px;
    height: 140px;
    bottom: -140px;
    animation-delay: 3s;
}
.background li:nth-child(3) {
    left: 9%;
    width: 127px;
    height: 127px;
    bottom: -127px;
    animation-delay: 14s;
}
.background li:nth-child(4) {
    left: 67%;
    width: 140px;
    height: 140px;
    bottom: -140px;
    animation-delay: 5s;
}
.background li:nth-child(5) {
    left: 6%;
    width: 102px;
    height: 102px;
    bottom: -102px;
    animation-delay: 20s;
}
.background li:nth-child(6) {
    left: 16%;
    width: 121px;
    height: 121px;
    bottom: -121px;
    animation-delay: 3s;
}
.background li:nth-child(7) {
    left: 29%;
    width: 123px;
    height: 123px;
    bottom: -123px;
    animation-delay: 11s;
}
.background li:nth-child(8) {
    left: 77%;
    width: 157px;
    height: 157px;
    bottom: -157px;
    animation-delay: 1s;
}
.background li:nth-child(9) {
    left: 55%;
    width: 137px;
    height: 137px;
    bottom: -137px;
    animation-delay: 34s;
}
.background li:nth-child(10) {
    left: 13%;
    width: 149px;
    height: 149px;
    bottom: -149px;
    animation-delay: 10s;
}
.background li:nth-child(11) {
    left: 24%;
    width: 140px;
    height: 140px;
    bottom: -140px;
    animation-delay: 7s;
}
.background li:nth-child(12) {
    left: 79%;
    width: 145px;
    height: 145px;
    bottom: -145px;
    animation-delay: 30s;
}
.background li:nth-child(13) {
    left: 76%;
    width: 147px;
    height: 147px;
    bottom: -147px;
    animation-delay: 1s;
}


html {
    font-size: 100%; /* 16px */
}

body{
    color: #24292e;
    font-family: "M PLUS 1p";
}

a {
    text-decoration: none;
}

p {
    font-size: 1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
}

img{
    max-width: 100%;
}

li{
    list-style: none;
    font-size: 1.1rem;
}

.wrapper {
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem; 
    padding: 0 4% ;
    padding:2em; /* ボックス内側余白 */
    position:relative; /* 配置(ここを基準に) */
    border: 2px solid #cb92d3;
}
.wrapper:after{
    background-color:#f3cad6;
    content: '';
    position: absolute;/*配置（ここを動かす）*/
    top: 9px;/*上から7pxずらす*/
    left: 9px;/*左から7pxずらす*/
    width: 100%;
    height: 100%;
    opacity: 0.6;
        z-index: -1;
}

.site-title {
    line-height: 1px;
    font-weight: 600;
    font-size: 2.4rem; 
    font-family: 'Monoton', serif;
}

.site-title a {
    color:#404546;
}

.sec-title {
    font-size: 2.3rem;
    margin-bottom: 65px;
    padding: 0 20px;
    font-family: 'ZeroGothic', sans-serif;
    color:#242424;
    background: #72da9a;
    position:absolute;	/* 配置(ここを動かす) */
    top: -30px; /*上から（-5px）移動*/
    left: 400px; 
}

/* h2-heading */
.heading {
    position: relative;
    margin: 100px 0 200px;
    font-size: 3rem;
    font-family: 'ZeroGothic', sans-serif;
    text-align: center;
}

.heading-point {
    display:  block;
    font-size:  1.1rem;
    margin-top:  15px;  
    position:  relative;
    width: 140px;
    margin: 10px auto 0;
    background-color:  #72da9a;
}

.heading-point:before {
    content: '';
    height:  1px;
    background-color: #000;
    position: absolute;
    top:0;             
    bottom: 0;         
    margin: auto;      
    z-index: -1;
    width: 200px;
    left: -30px;       
}

/* header */
#header {
    max-width: 960px;
    display: flex; /* 親要素に対してflexを当てると子要素が横並びになる */
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 4%;
    height: 170px;
}

#header ul {
    display: flex;
    padding: 10px 0;
    align-items: center;
}

#header ul li {
    font-size: 0.9rem;
    margin-left: 30px;
}

#header ul li a {
    color: #24292a;
    transition: all 0.3s;
}

#header ul li a:hover{
    opacity: 0.5;
}

#header li img.icon{
    width: 30px;
}

/* main */
#main{
    margin-bottom: 80px;
}

/* flex-box */
.flex-box{
    display:flex;
    justify-content: space-between;
}

#plant .flex-box {
    flex-direction: row-reverse;
} 

/* flex-item */
.flex-item-text p{
    font-size: 1.1rem;
}


.flex-item-pic{
    text-align: center;
    width: 100%;
    height: 100%;
}
.flex-item-pic img{
    max-width: 100%;
    max-height: 100%;
}

/* 携帯用 */
@media screen and (max-width: 680px){
    p {
        font-size: 1rem;
    }

    .site-title {
        margin-top: 20px;
    }

    /* header */
    #header {
        flex-direction: column;
        height: auto;
        line-height: 40px;
        margin-top: 20px;
    }

    #header li {
        font-size: 0.8rem;
        margin-left: 20px;
        margin-top: 10px;
    }

    #header li img.icon {
        width: 20px;
        margin-top: 15px;
    }

    .flex-box{
        display: flex;
        flex-direction: column-reverse;
    }

    #plant .flex-box{
        flex-direction: column-reverse;
    }
    .flex-item-pic {
        margin: 3px 0 30px;
        text-align: center;
    }

    #curry .flex-item-pic,#camp .flex-item-pic {
        margin-left: 0px;
    }
    .flex-item-text{
        margin: 0 auto;
    }
    .heading {
        position: relative;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 1.5rem;
        text-align: center;
    }
    .wrapper {
        margin: 0 30px 130px 30px;
    }

    .sec-title {
        position:absolute;	
        top: -28px; 
        left: 100px; 
        font-size: 1.8rem;
        padding: 2px 5px;
    }
}