@charset "utf-8";
/**
*** 共有
*******************************************/
body {
    padding: 0;
    margin: auto;
    font-size: 14pt;
    box-sizing: border-box;
}
footer {
/*    position: fixed;*/
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #121435;
    color: whitesmoke;
    }
header {
    background-color: #121435;
    color: whitesmoke;
    height: 100px;

}
header h1 {
    padding: 0;
    margin: 0;
}
#nav ul li a, #nav ul li a:hover, #nav ul li a:visited {
    color: #000;
}
#copy-write {
    text-align: center;
    font-size: smaller;
}

main div {
    padding: 15%;
    text-align: center;
}

main div img {
    width: 50%;
}

/*** 共有 End ***/

/* 幅が 399px 以下であれば */
@media (max-width:399px) {
    /* Menu
    *********************************************/
    
    /* ハンバーガーメニュー設定
    *  ボタン外側※レイアウトによってpositionや形状は適宜変更してください
    */
    .navbtn{
        position: absolute;/*ボタン内側の基点となるためrelativeを指定*/
        top: 0;
        right: 10px;
        /*position: relative;/*ボタン内側の基点となるためrelativeを指定*/
        background:#666;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;
        margin: 1.3em 0.5em;
        z-index: 9999;
    }
    
    /*ボタン内側*/
    .navbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
      }
    
    .navbtn span:nth-of-type(1),
    .navbtn span:nth-of-type(3) {
        height: 2px;
        background: #fff;
        width: 62%;
        left: 10px;
     }
    
    .navbtn span:nth-of-type(1) {
      top:13px; 
    }
    
    .navbtn span:nth-of-type(2) {
      top:19px;
      left:11px;
      font-size:0.6rem;
      text-transform: uppercase;
      color: #fff;
    }
    
    .navbtn span:nth-of-type(3) {
      top:36px;
    }
    
    /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
    .navbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .navbtn.active span:nth-of-type(2) {
      opacity: 0;
    }
    
    .navbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    /*========= レイアウトのためのCSS ===============*/
    #nav.navactive {
        position: absolute;
        top: 97px;
        left: 0px;
        display: inline-block;
        background-color: rgba(255,255,255, 0.9);
        width:  100%;
        height: 100%;
        text-align: center;
        z-index: 999;
        /*padding-top: 30px;*/
    }
    #nav.navactive ul{
        padding: 0;
        border-bottom: solid 1px #ccc;
    }
    #nav.navactive ul li{
        margin-top: 30px;
        border-bottom: solid 1px #ccc;
    }
    #nav {
        display: none;
    }
        #site-map {
            display: flex;
            flex-direction:column-reverse;
            align-items: center;
        }
        header h1 {
            padding: 20px -20px 20px 20px;
        }
        #logo {
            width: 260px;
        }
        /*** Menu End ***/
    
    
}
/* 幅が 399px 以下であれば end */

/* 幅が 399px以上 768px以下であれば */
@media (min-width:400px) and (max-width:767px) {
    /*
    * Menu
    *********************************************/
    
    /* ハンバーガーメニュー設定
    *  ボタン外側※レイアウトによってpositionや形状は適宜変更してください
    */
    .navbtn{
        position: absolute;/*ボタン内側の基点となるためrelativeを指定*/
        top: 0;
        right: 10px;
        /*position: relative;/*ボタン内側の基点となるためrelativeを指定*/
        background:#666;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;
        margin: 1.3em 0.5em;
        z-index: 9999;
    }
    
    /*ボタン内側*/
    .navbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
      }
    
    .navbtn span:nth-of-type(1),
    .navbtn span:nth-of-type(3) {
        height: 2px;
        background: #fff;
        width: 62%;
        left: 10px;
     }
    
    .navbtn span:nth-of-type(1) {
      top:13px; 
    }
    
    .navbtn span:nth-of-type(2) {
      top:19px;
      left:11px;
      font-size:0.6rem;
      text-transform: uppercase;
      color: #fff;
    }
    
    .navbtn span:nth-of-type(3) {
      top:36px;
    }
    
    /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
    .navbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .navbtn.active span:nth-of-type(2) {
      opacity: 0;
    }
    
    .navbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    /*========= レイアウトのためのCSS ===============*/
    #nav.navactive {
        position: absolute;
        top: 97px;
        left: 0px;
        display: inline-block;
        background-color: rgba(255,255,255, 0.9);
        width:  100%;
        height: 100%;
        text-align: center;
        z-index: 999;
        /*padding-top: 30px;*/
    }
    #nav.navactive ul{
        padding: 0;
        border-bottom: solid 1px #ccc;
    }
    #nav.navactive ul li{
        margin-top: 30px;
        border-bottom: solid 1px #ccc;
    }
    
    #nav.navactive ul li a{
        color: black;
    }
    #nav {
        display: none;
    }
        #site-map {
            display: flex;
            flex-direction:column-reverse;
            align-items: center;
        }
        header h1 {
            padding: 20px -20px 20px 20px;
        }
        #logo {
            width: 260px;
        }
        /*** Menu End ***/
    
    
}
/* 幅が 768px 以上 767px以下であれば end */
@media (min-width:768px) {
    header {
        display: flex;
        /*justify-content: space-between;
        background-color: #fff;*/
        border-bottom: solid 1px #ccc;
    }
    header h1 {
        margin-left: 1.2em;
        margin-top: 10px;
    }
    header h1.firstname {
        font-size: xx-large;
    }
    #logo {
        width: 460px;
    }
    .navbtn {
        display: none;
    }
    #nav {
        margin: 0 0 0 auto;
    }
    #nav ul {
        padding: 24px 14px 14px 4px;
        display: flex;
        /*justify-content: space-around;/*space-between*/
    }
    #nav ul li{
        display: block;
        padding: 10px 15px;
    }
    #site-map {
        display: flex;
        justify-content: space-around;
        color: #fff;
    }
    #nav ul li a, #nav ul li a:hover, #nav ul li a:visited {
        color: whitesmoke;
        text-decoration: none;
    }
    a, a:hover, a:visited {
        color: whitesmoke;
        text-decoration: none;
    }
    
}
/* 幅が 768px以上であれば end */