@charset "utf-8";
/* CSS Document */

/*---------header--------*/
.site-title{
    width: 150px;
    line-height: 1px;/*h1タグの上下の余白を消してロゴ画像の高さと揃うように*/
    
}
.site-title a{
    display: block;/*aタグのリンク範囲を親要素サイズに拡大*/
}

#header{
    display: flex;/*ロゴとグローバルナビゲーションを横並び*/
    justify-content: space-between;/*両端に配置*/
    align-items: center;/*高さを中央揃え*/
    padding: 20px 2% 10px;
    background-color: #ffffff;
    max-width: 1920px;
    font-size: 1.2rem;
    width: 100%;
    z-index: 2;
    position: sticky;/*headerの固定化*/
    top: 0;/*headerの固定化*/
}
#header ul{
    display: flex;/*ナビゲーションメニューを横並びに*/
    padding: 10px 0;
}
#header li{
    margin-left: 50px;/*ナビの文字の間隔*/
}
#header li a{
    color: #898989;/*ナビの文字の色*/
    display: block;
}
#header li a:hover{/*メニューボタンにカーソルを合わせた時の動作*/
    opacity: 0.7;
    transition: 0.3s
}
#header img{
    width: 100%;
}
/*レスポンシブ時のための設定*/
.phone-nav{
    display: none;
}
.pc-nav{
    padding-left: 45%;
}

/*---------footer------------*/

#footer{
    background-color: #92D050;
    color: #fff;
    padding-top: 20px;
    max-width: 100%;
    text-align: center;
}
#footer img{
    width: 20%;
}
#footer .menu{
    display: flex;
    justify-content: center;
    margin: 30px 0 40px 0
}
#footer .menu li{
	border-right: solid 1px #fff;/*menu li右に線を追加する*/
	font-size: 1.2rem;
	padding: 0 20px;
}
#footer .menu li:last-child{
	border-right: none;
}
#footer .menu li:first-child{
    padding-left: 0;
} 
#footer .menu li a{
	color: #fff;
}
#footer .copyright{
	font-size: 0.75rem;
	text-align: center;
}
#footer a{
    color: #fff;
    display: block;/*スマホのレスポンシブの時に横並びにならないように*/
}
#footer .copyright{
    padding-bottom: 5px;
}

@media screen and (max-width: 1646px) {
    .pc-nav{
        padding-left:30%; 
    }
}
@media screen and (max-width: 1176px) {
    .pc-nav{
        padding-left:20%; 
    }
}


@media screen and (max-width: 1024px) {
    /*header*/
    #header{
        font-size: 1.2rem;
    }
    
    #header li{
        margin: 0 auto;
        margin-bottom: 5%;
        /*↓liにクリックの範囲を持たせる*/
        display: block;
        text-align: center;/*blockで端に寄るため中央揃え*/
    }
    #header li:last-child{
        margin-bottom: 0;
    }
    #header img{
        width: 90%;
    }
    #header li a:hover{/*メニューボタンにカーソルを合わせた時の動作*/
        border-bottom: none;
    }
    
    .pc-nav{/*パソコンのヘッダーを消す*/
        display: none;
    }
    /*humbargermenuの設定*/
    /*-----destyle.css-----*/
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    ::before , ::after {
        box-sizing: inherit;
    }
    button {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        vertical-align: middle;
        text-align: inherit;
        font: inherit;
        -webkit-appearance: none;
        appearance: none;
    }
    /*-----destyle.css-----*/

    .phone-nav{
        display: block;/*レスポンシブ時にメニューを表示させる*/
    }

    .menu-humbarger {/*メニューエリアのcss*/
      /*メニューの位置マイナス指定で画面外に*/
      position: fixed;
      right: -100%;
      width: 100%;
      height: 26vh;
      margin-left: auto;
      /* メニューを縦に */
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      /*opacity: 0.7;
      color: #efefef;*/
      transition: .5s;
      top: 5vh;
      border-radius: 0 0 20px 20px;
    }

    .menu-list {/*リストの中身のcss*/
      width: 80%;
      /*height: 100%;*/
      margin-bottom: 5%;
      /* メニューテキスト位置をリスト内中心に */
      display: flex;
      justify-content: center;
      /*align-items: center;*/
      border-bottom: solid 1px;
    }

    .btn {
      /* ボタンの配置位置  */
      position: fixed;
      top: 18px;
      right: 18px;
      /* ボタンの大きさ  */
      width: 45px;
      height: 45px;
      /* 最前面に */
      z-index: 10;
      background-color: #ffffff; /* わかりやすいように */
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
        display: block;
        position: relative;  /* バーガー線の位置基準として設定 */
        width: 100%;  /* 線の長さと高さ */
        height: 4px;
        background-color: #898989;  /* バーガー線の色 */
        transition: .2s;
        border-radius: 10px;
    }

    /****** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #898989;
      transition: .5s;
      border-radius: 10px;
    }
    .btn-line::before {
      /* 上の線の位置 */
      transform: translateY(-16px);
    }
    .btn-line::after {
      /* 下の線の位置 */
      transform: translateY(16px);
    }
    .menu-humbarger.open {
      right: 0;/*非表示メニューを表示させる　-70％ → 0 */
    }

    /***** メニューオープン時 *****/
    .btn-line.open {
        background-color: transparent;  	/* 真ん中の線を透明に */
    }
    .btn-line.open::before ,
    .btn-line.open::after {
        content: "";
        background-color: #898989;  /* 上下の線の色を変える */
        transition: .5s;
    }
    .btn-line.open::before {
        transform: rotate(45deg);  /* 上の線を傾ける */
    }
    .btn-line.open::after {
        transform: rotate(-45deg);  /* 下の線を傾ける */
    }
    
    /*humbargermenuの設定*/
    
    
    /*footer*/
    #footer .menu li{
        font-size: 1rem;
    }
    #footer img{
        width: 25%;
    }
}

@media screen and (max-width: 599px) {
    #header{
        font-size: 1rem;
    }
    .menu-humbarger{
        height: 24vh;
        top: 7vh;
    }
    /*#header li{
        margin-left: 0;
    }*/
    .menu-list{
        width: 80%;
    }
    
    
    
    /*footer*/
    #footer img{
        width: 40%;
        margin-bottom: 1%;
    }
    #footer .menu{
        display: none;
    }
    
}