main {
    width: 960px;
    margin: auto;
    background-color: white;
    font-size: 10px;

}
main * {
    box-sizing: border-box;
}
.p0 {
    display: flex;
}
.p1 {
    width: 67.5%;
    padding: 0.5em;
    color: white;
    margin: 0.5em 0;
    border-radius: 10px;
}
.p1 > a {
    width: 100%;
}
.p1 > a > img {
    width: 100%;
}
.p1 > img {
    width: 100%;
}


.p2 {
    width: 32.5%;
    padding: 1em 1em;
}
.p2 > a {
    width: 100%;
}
.p2 > a > img {
    width: 100%;
}
.p2 > img {
    width: 100%;
}

.pp1 {
    background-image: url(https://www.shopping-charm.jp/UserArea/archives/docs/wood_a_plants/img/bg-slash01.gif);
    margin-bottom: 2em;
    padding: 1em;
}

.pp2 {
    background: #ff9a24;
    font-size: 1.5em;
    padding: 0.5em;
    border-radius: 10px;
    display: -webkit-inline-box;
}
.pp3 {
    color: #cc1d39;
    font-size: 1.4em;
    font-weight: bold;
}
.pp4 {
    color: #386332;
    font-size: 1.4em;
    font-weight: bold;
    border-bottom: 1px dashed #386332;
}

.d1 {
    text-align: right;
}

.all_link {
    margin: 20px 0 40px;
}
.all_link a {
    display: block;
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border: 2px solid #dcffa5;
    border-radius: 10px;
    background-color: #9dd14c;
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
    background-image: linear-gradient(top bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .3);
}
.all_link a .title {
    display: block;
    padding: 20px 0;
    width: 100%;
    height: 100%;
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, rgba(0, 0, 0, 0) 75%);
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, rgba(0, 0, 0, 0) 75%);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, rgba(0, 0, 0, 0) 75%);
    background-size: 10px 10px;
}
.title {
    font-size: 1.5em;
}

.all_link a:visited {
    color: #ffffff;
}

.all_link a:link {
    color: #ffffff;
}


.m1 {
    border: solid 1px #78b344;
    padding: 2em;
    margin: 0 0 2em 0;
}


@media screen and (max-device-width: 769px){
    main {
        width: 100%;
    }
    .pp1 {
        margin: 1%;
    }

}

@media screen and (max-device-width: 767px){
    main {
        width: 100%;
    }
    .p0 {
        display: block;
    }
    .pp1 {
        font-size:1.5em;
        padding: 2%;
        margin: 3%;
    }
    .pp2 {
        font-size:1.7em;
        line-height: 1.5;
    }
    .pp3 {
        font-size:2em;
    }
    .pp4 {
        font-size:2em;
    }
    .d1 {
        width: 100%;
        text-align: center;
    }


}

@media screen and (max-device-width: 700px){
    .p1 {
        width: 100%;
    }
    .p2 {
        width: 100%;
        padding: 1em;

    }
    .pp3 {
        font-size:1.5em;
    }
    .pp4 {
        font-size:1.5em;
    }
    .title {
        font-size: 1em;
    }

}


section {
    margin: 0 0 1%;
    padding: 0 1%;
}
section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 2%;
}

article a:link {
    color: #5a5656;
    text-decoration: none;
}
article a:visited {
    color: #a5a5a5;
}

article a:hover {
    color: #a04a4a;
}
.mainImg {
    display: block;
    width: 100%;
    margin-bottom: 2em;
}
.mainImg img {
    width: 100%;
}
.mainImg2 {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.mainImg2 img {
    width: 100%;
}
.mainImg3 {
    display: block;
    width: 100%;
}
.mainImg3 img {
    width: 100%;
}





@media screen and (max-device-width: 767px){
    section {
        margin: 0 0 1%;
        padding: 2%;
    }
    .mainImg {
        width: 100%;
    }
    .mainImg2 {
        width: 100%;
    }
    .mainImg3 {
        width: 100%;
        padding: 1em;
    }
}


article h1 {
    color: #2d6b51;
    font-size: 3rem;
    padding: 0.25em 0.25em;
    background: transparent;
    margin: 0.3em 0;
    border-bottom: #2d6b51 1px dashed;
}

article h2 {
    font-size: 3em;
    margin-bottom: 0.5em;
    padding: 0.25em 0 0.25em 0.25em;
    color: #ec225e;
    margin-top: 1em;
}

article h3 {
    font-size: 2em;
    margin-bottom: 0.5em;
    padding: 0.25em;
    color: #ec225e;
    margin-top: 1em;
    display: -webkit-inline-box;
    display: inline-block;
    border-radius: 10px;
}

p {
    font-size: 1.5em;
    color: #5a5656;
    padding: 1em 0;
}
.m {
    display: -webkit-box;
    display: -webkit-inline-box;
    display: flex;
    vertical-align: middle;
    align-items: center;
}


@media screen and (max-device-width: 769px){
    article h2 {
        margin: 1%;
    }
    article h3 {
        margin-left: 1%;
    }
}




@media screen and (max-device-width: 767px){
    article h2 {
        font-size: 2.4em;
        letter-spacing: 0rem;
        margin: 1% 1% 5% 1%;
    }
    article h3 {
        padding: 1%;
        margin: 1em 2% 1% 2%;
    }

    p {
        font-size: 1.5em;
        margin: 0.5em 0;
        padding: 0.5em;
    }
    .c {
        padding: 2% 5%;
        margin: 0.5em;
    }
    .m {
        display: block;
    }

}

.List > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.List > ul > li {
    width: 100%;
    margin: 0 0 1.25% 0;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.List > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.List > ul > li > a:hover {
    opacity: 0.6;
}

.List > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.List > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}


.List2 > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.List2 > ul > li {
    width: 48.5%;
    margin: 0 0 1.25% 0;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: block;
}
.List2 > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
}
.List2 > ul > li > a:hover {
    opacity: 0.6;
}

.List2 > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.List2 > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
}



.List3 > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.List3 > ul > li {
    width: 32.5%;
    margin: 0 0 1.25% 0;
    padding: 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: block;
}
.List3 > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.List3 > ul > li > a:hover {
    opacity: 0.6;
}

.List3 > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.List3 > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
}

.List4 > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.List4 > ul > li {
    width: 24.5%;
    margin: 0 0 1.25% 0;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: block;
}
.List4 > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.List4 > ul > li > a:hover {
    opacity: 0.6;
}

.List4 > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.List4 > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
}

section.itemList {
    margin: 20px 0;
}

.itemList > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.itemList > ul > li {
    width: 48.5%;
    margin: 0 0 1.25% 0;
    padding: 5px;

}
.itemList > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.itemList > ul > li > a:hover {
    opacity: 0.6;
}

.itemList > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.itemList > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
}

.itemList2 > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.itemList2 > ul > li {
    width: 48.5%;
    margin: 0 0 1.25% 0;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: block;
}
.itemList2 > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.itemList2 > ul > li > a:hover {
    opacity: 0.6;
}

.itemList2 > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.itemList2 > ul > li > img {
    display: block;
    width: 100%;
    height: auto;
}

section.itemList3 {
    margin: 20px 0;
}

.itemList3 > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
}
.itemList3 > ul > li {
    width: 32.5%;
    margin: 0 0 1.25% 0;
    padding: 5px;
    display: flex;
    align-items: center;

}
.itemList3 > ul > li > a {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.3s;
    font-size: 1.5em;
}
.itemList3 > ul > li > a:hover {
    opacity: 0.6;
}

.itemList3 > ul > li > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.itemList3 > ul > li > img {
    width: 50px;
    height: 50px;
}

.lii {
    display: -webkit-box;
    display: -webkit-inline-box;
    display: flex;
}

@media screen and (max-device-width: 767px){
    .List > ul {
        padding: 0;
    }
    .List > ul > li{
        width: 100%;
        margin: 0 0 1% 0;
        padding: 0;
        display: block;

    }
    .List2 > ul {
        padding: 0;
    }
    .List2 > ul > li{
        width: 100%;
        margin: 0 0 1% 0;
        display: block;
    }
    .List3 > ul {
        padding: 0;
    }
    .List3 > ul > li{
        width: 100%;
        margin: 0 0 5% 0;
    }
    .List4 > ul > li{
        margin: 1em 5%;
    }
    .List4 > ul > li{
        width: 48.5%;
        margin: 0 0 1% 0;
    }
    section.itemList {
        margin: 0;
    }
    .itemList > ul {
        padding: 0;
    }
    .itemList > ul > li{
        width: 48.5%;
        margin: 0 0 1% 0;
    }
    section.itemList2 {
        margin: 0;
    }
    .itemList2 > ul > li{
        width: 48.5%;
        margin: 0 0 1% 0;
    }
    section.itemList3 {
        margin: 0;
    }
    .itemList3 > ul > li{
        width: 32.5%;
        margin: 0 0 1% 0;
    }
    section > p {
        padding: 0 0 1%;
    }
    section ul {
        padding: 0;
    }
    section ul li {
        margin: 2% 0 0;
    }

}



table {
    margin: auto;
    font-size: 1.5em;
    line-height: 2;
    margin-bottom: 2em;
}
td {
    border: 1px solid #254177;
    padding: 1%;
    text-align: center;
    vertical-align: middle;
}

@media screen and (max-device-width: 767px){
.scroll{
overflow: auto;
white-space: nowrap;
}
td {
    padding: 0.5em;

}

}