@charset "utf-8";

/********************************/
/* ヘッダー要素 */
/********************************/

/*● スマホ用*/
@media screen and (max-width: 1023px) {
    
    /*--- ページの一番上にある色のついたエリア ---*/
    .head_border{
        width:100%;
        margin: 0px;
        padding: 0px;
        height: 10px;
        background-color: #89ba28;
    }

    /*--- 画像の所まで ---*/
    .header{
        width:100%;
        margin: 0px auto;
        margin-top: 0px;	/* 上のマージン */
    }

    .header img {
        width:100%;
        height: auto;
    }
}

/*◎ PC用*/
@media screen and (min-width: 1024px) {
    
    /*--- ページの一番上にある色のついたエリア ---*/
    .head_border{
        width: auto;
        margin: 0px;
        padding: 0px;
        height: 10px;
        background-color: #89ba28;
    }

    /*--- 画像の所まで ---*/
    .header{
        width: 1050px;
        margin: 0px auto;
        margin-top: 0px;	/* 上のマージン */
    }
}

.header a{ text-decoration: none; }
.header a:link { color: #000000; }
.header a:visited { color: #000000; }
.header a:active { color: #000000; }
.header a:hover { opacity: 0.6; filter: brightness(110%); }

/*--- ヘッダの中のヘッダ ---*/
/*● スマホ用*/
@media screen and (max-width: 1023px) {
    .head_flame{
        display: block;
        padding: 0px;
        list-style: none;
        width: fit-content;
    }
    
    .head_flame li{
        padding: 0px;
        margin: 0px auto;    
        text-align: right;
        line-height: 1.2em;
    }

    .head_left{
        width: auto;
    }
    
    .head_left p{
        text-align: left;
        font-size: 1rem;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .head_right{
        width: auto;
        vertical-align: bottom;
    }
    
    .head_right p{
        text-align: right; 
    }
}

/*◎ PC用*/
@media screen and (min-width: 1024px) {
    .head_flame{
        display: flex;
        padding: 0;
        list-style: none;
        width: 1050px;
    }
    
    .head_flame li{
        padding: 0px;
        margin: 0px auto;    
        text-align: right;
        line-height: 1.2em;
    }

    .head_left{
        width: auto;
    }
    
    .head_left p{
        text-align: left;
        font-size: 12px;
    }
    
    .head_right{
        width: auto;
        vertical-align: bottom;
    }
    
    .head_right p{
        padding-top: 20px;
        text-align: right; 
    }
}
	
/*--- メニュー要素 ---*/
.head_menu{
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    list-style: none;
    justify-content: space-between;
}

/*メニュー:スマホでは非表示*/
@media screen and (max-width: 1023px) {
    .head_menu{display:none}
}

.head_menu li{
    width:100%;
    padding: 10px;
    border-right:1px solid #000000;
    font-size: 22px;
}

/*--- ハンバーガーメニュー(スマホのみ) ---*/
@media screen and (max-width: 1023px) {

    /*　ハンバーガーボタン　*/
    .hamburger {
        display : block;
        position: fixed;
        z-index : 3;
        right : 13px;
        top   : 12px;
        width : 42px;
        height: 42px;
        cursor: pointer;
        text-align: center;
        background-color:#89ba28;
    }

    .hamburger span {
        display : block;
        position: absolute;
        width   : 30px;
        height  : 2px ;
        left    : 6px;
        background : #fff;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition   : 0.3s ease-in-out;
        transition        : 0.3s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 10px;
    }

    .hamburger span:nth-child(2) {
        top: 20px;
    }

    .hamburger span:nth-child(3) {
        top: 30px;
    }

    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        top : 16px;
        left: 6px;
        background :#fff;
        -webkit-transform: rotate(-45deg);
        -moz-transform   : rotate(-45deg);
        transform        : rotate(-45deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 16px;
        background :#fff;
        -webkit-transform: rotate(45deg);
        -moz-transform   : rotate(45deg);
        transform        : rotate(45deg);
    }

    /* メニューの中身 */
    nav.globalMenuSp {
        position: fixed;
        z-index : 2;
        top  : 0;
        left : 0;
        color: #fff;
        background: #89ba28;
        text-align: center;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .6s ease, visibility .6s ease;
    }

    nav.globalMenuSp ul {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        color: #fff;
    }

    nav.globalMenuSp ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        transition: .4s all;
    }

    nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
    }

    nav.globalMenuSp ul li:hover{
        background :#d6e9b1; /*ロールオーバーの背景色*/
    }

    nav.globalMenuSp ul li a {
        display: block;
        color: #272727;
        padding: 1em 0;
        text-decoration :none;
        font-size: 1.5em;
        font-weight:bold;
    }
    
    nav.globalMenuSp ul li a:link {color: #272727;}
    nav.globalMenuSp ul li a:visited {color: #272727;}
    nav.globalMenuSp ul li a:active {color: #272727;}

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
        opacity: 100;
        visibility: visible;
    }
}

@media screen and (min-width: 1024px) {
    .hamburger{display:none}
    .globalMenuSp{display:none}
}