@charset "utf-8";

/*
Theme Name: Energy Democracy
Description: energy democracy theme
Author: haru
Version: 2.0
*/

/* ---------------ALL--------------- */
html, body, main, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, hr,
a, img,
dl, dt, dd, ol, ul, li,
strong, sup, i, small, sub, address, time, blockquote,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
header, footer, nav, section, article, aside,
figure, figcaption, canvas, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline}

article, aside, figure, figcaption,
footer, header, nav, section {
    display: block}

html {
    overflow-y: scroll;
    height: 100%;
    min-height: 100%}

body {
    height: 100%;
    min-height: 100%}

ul, ol, li {
    list-style: none}

input, textarea, button {
    margin: 0;
    padding: 0;
    font-size: 100%}

input[type="submit"],
input[type="button"],
button {
    cursor: pointer}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none}

table{
    border-collapse: collapse;
    border-spacing: 0}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom}

a {
    color: #222}

a:hover {
    transition: color 0.1s linear 0, background-color 0.2s linear 0}

body {
    margin: 0;
    font-family: 'Helvetica',sans-serif;
    line-height: 1.6;
    font-size: 15px;
    color: #222}

@media (max-width: 320px) {
    body {
        font-size: 14px}
}

/* ---------------COLOR--------------- */
.color-background {
    background-color: #f2f2f2}

.color-theme {
    background-color: darkcyan}

/* ---------------MARGIN--------------- */
header,
footer,
.container,
.container-1column {
    padding-left: 10px;
    padding-right: 10px}

.container-1column {
    padding-top: 40px;
    padding-bottom: 40px}

.contents {
    padding-top: 20px;
    padding-bottom: 20px}

.sub {
    padding: 20px 10px}

/* ---------------LAYOUT--------------- */
.container-1column {
    max-width: 747px;
    margin-left: auto;
    margin-right: auto}

.contents,
.sub {
    box-sizing: border-box}


@media (min-width: 1040px) {
    header,
    footer,
    .container {
        width: 1000px;
        margin-left: auto;
        margin-right: auto}
}

@media (min-width: 768px) and (max-width: 1039px) {
    header,
    footer,
    .container {
        width: 747px;
        margin-left: auto;
        margin-right: auto}
}

@media (min-width: 1040px) {
    .container-wrp:after {
        content: "";
        display: block;
        clear: both}

    .contents {
        float: left;
        width: 70%;
        padding-right: 50px}

    .sub {
        float: right;
        width: 30%;
        border-radius: 10px;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
        background-color: #efefef;
        margin-bottom: 20px}
}

/* ---------------GAIYOU--------------- */
/* -----MEDIUM----- */
.gaiyou a {
    display: block;
    padding: 20px 0;
    border-bottom: dotted 2px #ddd;
    text-decoration: none}

.contents .gaiyou:last-child a {
    border-bottom: none}

.gaiyou a:hover {
    color: #888}

.gaiyou a:after {
    content: "";
    display: block;
    clear: both}

.gaiyou img {
    float: left;
    width: 200px}

.gaiyou .text {
    float: none;
    width: auto;
    margin-left: 230px}

.gaiyou h1 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    line-height: 1.2}

.gaiyou h2 {
    font-size: 16px;
    color: #ffc400;
    line-height: 1.2}

@media (max-width: 599px) {
    .gaiyou a {
        padding: 10px 0}

    .gaiyou img {
        width: 100px}

    .gaiyou .text {
        margin-left: 110px}

    .gaiyou h1 {
        font-size: 16px;
        margin-bottom: 0}

    .gaiyou h2 {
        font-size: 14px}

    .gaiyou p {
        visibility: hidden;
        height: 0}
    
    .gaiyou .kiji-date {
        margin-bottom: 0}
}

/* -----LARGE----- */
.gaiyou-large a {
    display: block;
    padding: 20px 0;
    border-bottom: dotted 2px #ddd;
    text-decoration: none}

.gaiyou-large:first-child a {
    padding-top: 0}

.gaiyou-large a:hover {
    color: #888}

.gaiyou-large h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #666;
    line-height: 1.2}

.gaiyou-large h2 {
    font-size: 18px;
    color: #ffc400;
    line-height: 1.2}

.gaiyou-large .thumb {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: 50% 50%}

@media (max-width: 599px) {
    .gaiyou-large a {
        padding: 10px 0}

    .gaiyou-large h1 {
        font-size: 18px;
        margin-bottom: 0}

    .gaiyou-large h2 {
        font-size: 14px}
    
    .gaiyou-large .thumb {
        height: 200px}
}

/* -----SMALL----- */
.gaiyou-small a {
    display: block;
    padding: 10px 20px;
    border: dotted 2px #ddd;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 20px;
    background-color: #fff}

.gaiyou-small a:after {
    content: "";
    display: block;
    clear: both}

.gaiyou-small .thumb {
    float: right;
    width: 80px;
    height: 80px;
    opacity: 0.8}

.gaiyou-small .text {
    float: none;
    width: auto;
    margin-right: 100px}

.gaiyou-small h1 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    line-height: 1.2}

.gaiyou-small a[href]:hover {
    color: #888}

@media (max-width: 599px) {
    .gaiyou-small a {
        padding: 10px}

    .gaiyou-small .thumb {
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 70px;
        height: 70px;
        margin-bottom: 10px}

    .gaiyou-small .text {
        margin-right: 0}

    .gaiyou-small h1 {
        font-size: 16px}
}

/* -----PAGINATION----- */
.pagination {
    margin: 40px 0 30px;
    text-align: center}

.pagination ul {
    display: inline-block}

.pagination li a,
.pagination li > span {
    display: block;
    margin: 0 5px;
    padding: 6px 8px;
    border: solid 1px darkcyan;
    color: darkcyan;
    font-size: 14px;
    text-decoration: none}

.pagination li > span {
    color: darkcyan;
    background-color: #ddd}

.pagination li a:hover {
    color: #fff;
    background-color: darkcyan}

.pagination ul:after {
    content: "";
    display: block;
    clear: both}

.pagination li {
    float: left;
    width: auto}

.pagination li .dots {
    padding: 6px 2px;
    border-color: transparent;
    background-color: transparent}

@media (max-width: 599px) {
    .pagination li a,
    .pagination li > span {
        margin: 0;
        padding: 6px 7px;
        border-left: none;
        font-size: 12px}

    .pagination li:first-child a,
    .pagination li:first-child > span {
        border-left: solid 1px darkcyan}

    .pagination li .dots {
        border-right-color: darkcyan}
}

/* ---------------CATEGORY/TAG--------------- */
/* TITLE */
.contents > h1 {
    font-size: 34px;
    line-height: 1.2;
    color: darkcyan}

@media (max-width: 599px) {
    .contents > h1 {
        font-size: 24px;
        font-weight: bold}

    .archive .kiji-bread li:last-child {
        text-indent: 0}
}

/* ---------------KIJI:BREAD--------------- */
.kiji-bread:after {
    content: "";
    display: block;
    clear: both}


.kiji-bread li {
    float: left;
    width: auto}

.kiji-bread li:after {
    content: '\003e';
    margin-left: 2px;
    margin-right: 2px;
    color: #ccc}

.kiji-bread li:last-child:after {
    content: none}

.kiji-bread li a {
    display: inline-block;
    padding: 10px 5px;
    font-size: 12px;
    text-decoration: none;
    color: #ccc}

.kiji-bread li a[href]:hover {
    text-decoration: underline}

.kiji-bread i {
    font-size: 14px}

.kiji-bread span {
    display: inline-block;
    text-indent: -9999px}

@media (max-width: 599px) {
    .kiji-bread li:last-child {
        text-indent: -9999px}
}

/* ---------------KIJI:HEAD--------------- */
/* TITLE */
.kiji-head h1 {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 1.2;
    color: #444}

/* CAPTION */
.kiji-head h2 {
    margin-bottom: 10px;
    padding-left: 8px;
    font-size: 22px;
    line-height: 1.4;
    color: #ffc400;
    border-left: solid 11px #ffc400}

/* SUMMARY */
.kiji-head p {
    font-size: 16px;
    color: #666}

/* CATCH */
.kiji-head .catch {
    margin-top: 30px;
    margin-bottom: 10px}

@media (max-width: 599px) {
    .kiji-head h1 {
        font-size: 24px}

    .kiji-head h2 {
        font-size: 16px;
        padding-left: 6px;
        border-left: solid 8px #ffc400}

    .kiji-head p {
        font-size: 15px}
}

/* ---------------KIJI:FIELD--------------- */
.kiji-field {
    display: inline-block;
    padding: 15px;
    border: solid 1px #ddd;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    word-wrap:break-all}

/* DATE */
.kiji-date {
    color: #666;
    font-size: 12px}

/* CAT */
.kiji-cat ul:after {
    content: "";
    display: block;
    clear: both}

.kiji-cat ul li {
    float: left;
    width: auto;
    margin-right: 10px;
    list-style: none}

.kiji-cat li a {
    color: darkcyan}

/* INFO */
.kiji-info a {
    color: darkcyan}

.kiji-info:after {
    content: "";
    display: block;
    clear: both}

/* ---------------KIJI--------------- */
.kiji:after {
    content: "";
    display: block;
    clear: both}

.kiji p {
    margin-bottom: 20px}

.kiji h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    color: #222;
    font-size: 26px;
    clear: both}

.kiji h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: dotted 1px darkcyan;
    color: darkcyan;
    font-size: 18px;
    clear: both}

.kiji h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: solid 10px darkcyan; 
    color: #666;
    background-color: #fff;
    font-size: 16px;
    clear: both}

.kiji h5 {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
    clear: both}

.kiji h5:before {
    position: absolute;
    left: 0px;
    top: 3px;
    content: '\f14a';
    color: darkcyan;
    font-family: 'FontAwesome';
    font-size: 14px;
    line-height: 1}

.kiji ul {
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px}

.kiji ol {
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px}

.kiji ul li {
    list-style: circle inside;
    text-indent:-1em;
    padding-left: 1em}

.kiji ol li {
    list-style: decimal inside;
    text-indent:-1em;
    padding-left: 1em}

.kiji strong {
    font-weight: bold}

.kiji i {
    font-style: italic}

.kiji a {
    color: darkcyan}

.kiji blockquote {
    position: relative;
    margin: 30px auto;
    padding: 20px 40px 1px 50px;
    max-width: 460px;
    color: #666;
    font-size: 16px;
    line-height: 1.6}

.kiji blockquote:before {
    position: absolute;
    left: 10px;
    top: 10px;
    content: '\f10d';
    color: darkcyan;
    font-size: 20px;
    font-family: 'FontAwesome';
    line-height: 1}

.kiji blockquote:after {
    position: absolute;
    right: 10px;
    bottom: 10px;
    content: '\f10e';
    color: darkcyan;
    font-size: 20px;
    font-family: 'FontAwesome';
    line-height: 1}

@media (max-width: 599px) {
    .kiji h2 {
        font-size: 16px}

    .kiji h3 {
        font-size: 14px}

    .kiji ul {
        margin-left: 10px;
        margin-right: 10px}

    .kiji ol {
        margin-left: 10px;
        margin-right: 10px}
}

p.wp-caption-text {
    margin: 5px 0;
    text-align: left;
    color: #666;
    font-size: 12px}

p.wp-caption-text a {
    color: #666}

.alignnone {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px}

.aligncenter {
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto}

@media (max-width: 599px) {
    .alignleft, .alignright {
        display: block;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto}
}

@media (min-width: 600px) {
    .alignleft {
        float: left;
        margin-top: 10px;
        margin-bottom: 20px;
        margin-right: 30px}

    .alignright {
        float: right;
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 30px}
}

a img {
    border: none}

img, .wp-caption {
    max-width: 100%;
    height: auto}

iframe {
    max-width: 100%}

.ytvideo {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 30px}

.ytvideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}

.wp-video {
    margin-top: 30px;
    margin-bottom: 30px}

/* -----KIJI:TAG----- */
.kiji-tag {
    margin-bottom: 40px}

.kiji-tag ul:after {
    content: "";
    display: block;
    clear: both}

.kiji-tag ul li {
    float: left;
    width: auto;
    list-style: none}

.kiji-tag a {
    display: block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 6px 10px;
    color: #00cccc;
    font-size: 12px;
    text-decoration: none;
    border: dotted 2px #00cccc;
    border-radius: 13px}

.kiji-tag a:hover {
    color: #fff;
    background-color: rgba(0, 204, 204, 0.4)}

/* ---------------KIJI:SHARE--------------- */
p.share-this {
    text-align: center;
    color: #666;
    font-size: 12px}

.kiji-share {
    text-align: center;
    display: flex;
    justify-content: center}

.kiji-share li {
    flex: 0 0 100px;
    list-style: none}

.kiji-share li a {
    display: block;
    padding: 10px 0;
    font-size: 12px;
    text-decoration: none}

.share-tw {
    color: #fff;
    background-color: #55acee}

.share-fb {
    color: #fff;
    background-color: #3b5998}

.share-gp {
    color: #fff;
    background-color: #dd4b39}

.kiji-share li a:hover {
    background-color: #eee}

.share-tw:hover {
    color: #55acee}

.share-fb:hover {
    color: #3b5998}

.share-gp:hover {
    color: #dd4b39}

/* ---------------ASIDE--------------- */
.mymenu {
    margin-bottom: 20px}

.mymenu h2 {
    text-align: center;
    color: #666;
    font-size: 18px;
    background-color: #eee;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd}

.mymenu li a {
    display: block;
    padding: 10px 5px;
    color: #222;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4}

.mymenu li a:hover {
    background-color: #ddd}

/* -----MENU:LATEST // & VIDEOS:MENU----- */
.mymenu-latest li a {
    border-bottom: dotted 1px #ddd}

.mymenu-latest li:last-child a {
    border-bottom: none}

.mymenu-latest li a:hover {
    color: #666}

.mymenu-latest li a:after {
    content: "";
    display: block;
    clear: both}

.mymenu-latest .thumb {
    float: left;
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: 50% 50%}

.mymenu-latest li .text {
    float: none;
    width: auto;
    margin-left: 75px}

.mymenu-latest li span {
    display: block;
    color: #00cccc;
    text-decoration: underline}

/* -----MENU:PICKUP EVENTS----- */
.mymenu-pickup-events li a {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0}

.mymenu-pickup-events li a:hover {
    opacity: 0.8}

.mymenu-pickup-events li .thumb {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: 50% 50%}

.mymenu-pickup-events li .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    color: #fff;
    background-color: rgba(255, 20, 147, 0.8);
    box-sizing: border-box}

/* -----MENU:EVENTMENU:WJ----- */
.eventmenu {
    color: #666}

.eventmenu .eo-widget-cal-wrap {
    padding: 10px 20px;
    border-bottom: solid 1px #ddd}

.eventmenu table {
    width: 100%;
    text-align: center}

.eventmenu tbody a {
    color: deeppink;
    text-decoration: none}

.eventmenu tfoot a {
    line-height: 2;
    color: #666;
    text-decoration: none}

.eventorganiser-event-meta strong {
    color: #666}

/* EVENTMENU:LAYOUT */
@media (min-width: 600px) and (max-width: 1039px) {
    .sub-wrp {
        display: flex}

    .mymenu-wrp {
        flex: 0 0 50%}

    .eventmenu .eo-widget-cal-wrap {
        border-bottom: none}
}

/* -----MENU:PICKUP CASES----- */
.mymenu-pickup-cases li a {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0}

.mymenu-pickup-cases li a:hover {
    opacity: 0.8}

.mymenu-pickup-cases li .thumb {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: 50% 50%}

.mymenu-pickup-cases li .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    color: #ddd;
    background-color: rgba(0, 204, 204, 0.8);
    box-sizing: border-box}

@media (min-width: 600px) and (max-width: 1039px) {
    .mymenu-pickup-cases ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between}

    .mymenu-pickup-cases li {
        flex: 0 0 49%}
}

/* -----MENU:SUBMENU:WJ----- */
/* SEARCH */
.search-field {
    width: 100%;
    height: 44px;
    padding: 5px;
    border: solid 1px #ddd;
    border-radius: 0;
    background-image: none;
    font-family: inherit;
    font-size: 14px;
    -webkit-appearance: none;
    box-sizing: border-box}

.screen-reader-text,
.search-submit {
    display: block;
    visibility: hidden;
    height: 0}

/* TAGCLOUD */
.tagcloud a {
    display: inline-block;
    padding: 4px;
    line-height: 1.2;
    color: #666;
    text-decoration: none}

.tagcloud a:hover {
    text-decoration: underline}

/*
.tagcloud a {
    font-size: 13px !important}
*/

/* -----MENU:RELATED----- */
.mymenu-related ul {
        flex-direction: column}

.mymenu-related li {
        flex: 1}

.mymenu-related li a {
    padding: 20px}

.mymenu-related li a:hover {
    color: darkcyan;
    background-color: #eee}

.mymenu-related .thumb {
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: 50% 50%;
    border: solid 4px #ddd;
    border-radius: 46px;
    transition: border 0.2s linear 0}

.mymenu-related .thumb:hover {
    border: solid 4px darkcyan}

.mymenu-related .text {
    margin-top: 5px;
    text-align: center}

@media (min-width: 600px) and (max-width: 1039px) {
    .mymenu-related ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap}

    .mymenu-related li {
        flex: 1 1 50%}
}

/* ---------------MAP:INFO--------------- */
.wpgmp_map_container {
    margin-top: 20px}

.post_body a {
    text-decoration: none}

.wpgm-title {
    font-size: 16px;
    color: #666}

.wpgm-caption {
    font-size: 14px;
    color: #00cccc}

.wpgm-summary {
    font-size: 12px;
    color: #666}

@media (min-width: 600px) {
    .post_body a:after {
        content: "";
        display: block;
        clear: both}

    .wpgm-thumb {
        float: left;
        width: 80px;
        height: 80px}

    .wpgm-thumb img {
        width: 100%;
        height: auto}

    .wpgm-text {
        float: none;
        width: auto;
        margin-left: 90px}
}

@media (max-width: 599px) {
    .wpgm-none {
        display: none}

    .wpgm-thumb {
        margin-left: auto;
        margin-right: auto}

    .wpgm-thumb img {
        width: 140px;
        height: auto;
        margin-top: 10px;
        margin-bottom: 10px}
}

/* ---------------MAP:CONTENTS--------------- */
.wpgmp_pagination {
    box-sizing: border-box}

.wpgmp_locations:after {
    content: "";
    display: block;
    clear: both}

.locations-thumb {
    float: right;
    width: 120px}

.locations-thumb img {
    width: 100%;
    height: auto}

.locations-gaiyou {
    float: none;
    width: auto;
    margin-right: 140px}

.locations-title {
    font-size: 20px;
    line-height: 1.2}

.locations-gaiyou p {
    color: #222}

.locations-gaiyou span {
    font-size: 12px;
    color: #666}

#locations-tag {
    font-size: 14px;
    color: #00cccc}

@media (max-width: 599px) {
    .locations-thumb {
        width: 50px}

    .locations-gaiyou {
        margin-right: 60px}

    .locations-title {
        font-size: 16px}
}

/* ---------------FRONTPAGE--------------- */
/* SECTION:HEROIMG */
.heroimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 470px;
    text-align: center;
    background-size: cover;
    background-position: center}

.heroimg h1 {
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.1;
    font-size: 10vw;
    font-weight: bold;
    color: #fff}

.heroimg .logo {
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    margin: 40px auto 10px auto}

.heroimg a {
    padding: 10px 20px;
    font-size: 30px;
    font-weight: bold;
    color: #20d7c2;
    border: solid 6px #20d7c2;
    text-decoration: none;
    border-radius: 14px;
    background-color: rgba(32, 215, 194, 0.2)}

.heroimg a:hover {
    background-color: rgba(32, 215, 194, 0.4)}

@media (min-width: 768px) {
    .heroimg h1 {
        font-size: 68px}

    .heroimg p {
        font-size: 26px}
}

/* SECTION:SUBJECT */
.subject {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 10px}

.subject h2 {
    font-size: 30px;
    color: #ffc400}

.subject p {
    font-size: 16px;
    color: #ffc400}

/* SECTION:ELEMENT */
.element {
    text-align: center;
    padding: 30px}

.element .catch {
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px}

.element h2 {
    font-size: 16px;
    margin-bottom: 10px}

.element p {
    font-size: 13px;
    color: #666}

@media (min-width: 1040px) {
    .container-wrp-principals {
        display: flex}

    .element {
        flex: 1}
}

@media (min-width: 768px) and (max-width: 1039px) {
    .element .catch {
        width: 100px;
        height: 100px}

    .element h2 {
        font-size: 20px}

    .element p {
        font-size: 15px}
}

/* SECTION:FRONTMENU-ONE:WJ */
.container-wrp-frontmenuone {
    padding-top: 30px;
    padding-bottom: 30px}

.frontmenu-one {
    padding: 10px 30px}

.frontmenu-one h2 {
    font-size: 48px;
    line-height: 1.2;
    color: darkcyan}

.frontmenu-one p {
    line-height: 1.8;
    color: darkcyan}

.frontmenu-one li a {
    display: block;
    padding: 10px 5px;
    color: darkcyan;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4}

.frontmenu-one li a:hover {
    color: #fff;
    background-color: darkcyan}

@media (min-width: 748px) {
    .container-wrp-frontmenuone {
        display: flex}

    .frontmenu-one {
        flex: 1;
        padding: 30px}

    .frontmenu-one h2 {
        text-align: right}
}

@media (max-width: 599px) {
    .frontmenu-one {
        padding: 10px}

    .frontmenu-one h2 {
        font-size: 32px}
}

/* FOOTER:IMG */
.foot-img {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: bottom}

/* SECTION:FRONTMENU-TWO:WJ */
.container-wrp-frontmenutwo {
    padding-bottom: 30px}

.frontmenu-two {
    color: #eee;
    padding: 10px 30px}

.frontmenu-two h2 {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 20px}

.frontmenu-two p {
    line-height: 1.8}

@media (min-width: 748px) {
    .container-wrp-frontmenutwo {
        display: flex}

    .frontmenu-two {
        flex: 1;
        padding: 30px}
}

@media (max-width: 747px) {
    .frontmenu-two {
        padding: 10px}

    .frontmenu-two h2 {
        font-size: 28px}
}

/* CONTACT:FORM */
.wpcf7 {
    -webkit-appearance: none;
    border: none;
    color: #eee}

.wpcf7 input,
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #fff;
    opacity: 0.4}

.wpcf7 input[type="submit"] {
    width: 200px;
    height: 40px;
    background-color: #fff}

.wpcf7 input[type="submit"]:hover {
    opacity: 1}

/* ---------------HEADER--------------- */
.header-color-theme {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(0, 139, 139, 0.96);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1)}

.head-fixed {
    position: fixed}

.head-no-fixed {
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1)}

.headB a {
    display: block;
    padding: 10px 15px;
    color: #eee;
    font-size: 14px;
    text-decoration: none}

.headB a:hover {
    background-color: #f2f2f2;
    color: darkcyan}

.headA a {
    display: inline-block;
    padding: 10px;
    color: #eee;
    font-size: 14px;
    text-decoration: none}

.headA span {
    margin-left: 2px}

.headA a:hover {
    background-color: #f2f2f2;
    color: darkcyan}

@media (min-width: 768px) {
    .head-inner {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between}
    
    .headB ul {
        display: flex}

    .headB ul .sub-menu {
        flex-direction: column}

    .headB li {
        position: relative}

    .headB ul .sub-menu {
        position: absolute;
        display: none;
        border: solid 1px darkcyan;
        border-top: none;
        background-color: rgba(0, 139, 139, 0.96);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
        box-sizing: border-box;
        line-height: 1.4;
        z-index: 200}

    .headB ul .sub-menu a {
        width: 140px}

    .headB ul li:hover > .sub-menu {
        display: block}
}

@media (max-width: 767px) {
    .headB ul .sub-menu {
        padding-left: 20px}

    .headB ul .sub-menu li {
        border-left: solid 3px #ddd}
}

/* HEADB:TOGGLE */
@media (max-width: 767px) {
    .head-inner-small {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between}

    .headA ul {
        display: flex}
    
    .headC ul {
        display: flex}

    .headC {
        color: #eee;
        margin-left: 15px;
        border: none;
        outline: none;
        background: none;
        font-size: 28px}

    .headC:hover {
        opacity: 0.3}

    .headB {
        display: none}
    }

@media (min-width: 768px) {
    .headC {
        display: none}

    .headB {
        display: block !important}
}

/* ---------------FOOTER--------------- */
footer p {
    color: #eee;
    font-size: 11px;
    padding: 20px 0;
    text-align: left}