html {

}

body {
  width: 100%;
  margin: 0 auto;

}


body {
  -webkit-text-size-adjust: 100%;
}

@font-face {
   font-family: Arvo;
   src: url('./font/Arvo-Regular.ttf') format("truetype");
}


#wrapper {
  overflow:hidden;
}


.base {
  margin: 0 auto;
  max-width: 1280px;
}



/* タイトル&コンテンツ タイトル&コンテンツ タイトル&コンテンツ */

/* ワイドPC--- */
  @media (min-width: 768px) {

    .boxSPmenu {    display: none;
        }

    .boxHITO {
                width: 85%;
                max-width: 1000px;
                position: fixed;
                bottom: 10%;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                      }

      .boxHITO img {
              width: 60%;
              max-width: 500px;
              margin: 0 auto;
              }

      .boxHITO a:hover img {
              opacity: 0.6;
              transition: 0.5s;
              }
.boxMENU {
        width: 100%;
        height: 70px;
        position: fixed;
        padding-top: 30px;

        z-index: 100;

              }


.boxTC {
    width: 93%;
    height: 80px;
    max-width: 1190px;
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      margin: auto;
      }

      .boxTC > div {
        display: table-cell;
      }

.boxTC:after {
        content:'';
        display: block;
        clear: both; }
.boxMD {float: left;
        width: 25%;
        height: 43px;
        position: relative;

      }
.boxAB {float: left;
        width: 14%;
        height: 43px;
        position: relative;
      }
.boxAC {float: left;
        width: 14%;
        height: 43px;
        position: relative;
      }
.boxME {float: left;
        width: 14%;
        height: 43px;
        position: relative;
      }
.boxMI {float: left;
        width: 14%;
        height: 43px;
        position: relative;
        }
.boxCO {float: left;
        width: 14%;
        height: 43px;
        position: relative;
        }
.boxFb {float: left;
                width: 5%;
                height: 43px;
                position: relative;
                }

.boxMD img {
  width: 90%;
  max-width: 190px;
  display: block;
  margin-bottom: 0;
}


.boxAB img {
  width: 88%;
  max-width: 125px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.boxAC img {
  width: 88%;
  max-width: 125px;
  display: block;
  position: absolute;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.boxME img {
  width: 88%;
  max-width: 125px;
  display: block;
  position: absolute;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.boxMI img {
  width: 88%;
  max-width: 125px;
  display: block;
  position: absolute;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.boxCO img {
  width: 88%;
  max-width: 125px;
  display: block;
  position: absolute;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.boxFb img {
  width: 65%;
  max-width: 44px;
  display: block;
  position: absolute;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


  }
/* ---ワイドPC */



/* スマホ横--- */
@media (max-width: 768px) {
    @media (min-width: 450px) {

      .boxMENU {    display: none;
      }

      .boxMD {
              width: 100%;
              height: 75px;
              position: fixed;

    z-index: 2;
            }




    .boxMD img {
                width: 100%;
                max-width: 180px;
                margin-top: 25px;
               margin-left: 30px;
                      }

      .boxHITO {
                  width: 85%;
                  max-width: 1000px;
                  position: fixed;
                  bottom: 7%;
                  left: 0;
                  right: 0;
                  margin: 0 auto;
                  text-align: center;
                        }

        .boxHITO img {
                width: 60%;
                max-width: 500px;
                margin: 0 auto;
                }

        .boxHITO a:hover img {
                opacity: 0.6;
                transition: 0.5s;
                }



                  /*============
                  nav
                  =============*/
                  nav {
                    display: block;
                    position: fixed;
                    top: 75px;
                    left: -300px;
                    bottom: 0;
                    width: 300px;
                    background: black;
                    overflow-x: hidden;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    transition: all .5s;
                    z-index: 3;
                    opacity: 0;
                  }
                  .open nav {
                    left: 0;
                    opacity: 0.8;
                  }
                  nav .inner {
                    padding: 25px;
                  }
                  nav .inner ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                  }
                  nav .inner ul li {
                    position: relative;
                    margin: 0;
                    border-bottom: 1px solid #333;
                  }
                  nav .inner ul li a {
                    display: block;
                    color: white;
                    font-size: 12px;
                    padding: 1em;
                    text-decoration: none;
                    transition-duration: 0.2s;
                    letter-spacing: 0.15em
                  }
                  nav .inner ul li a:hover {
                    background: #002B3B;
                  }
                  @media screen and (max-width: 767px) {
                    nav {
                      left: -220px;
                      width: 220px;
                    }
                  }
                  /*============
                  .toggle_btn
                  =============*/
                  .toggle_btn {
                    display: block;
                    position: fixed;
                    top: 30px;
                    right: 30px;
                    width: 30px;
                    height: 30px;
                    transition: all .5s;
                    cursor: pointer;
                    z-index: 3;
                  }
                  .toggle_btn span {
                    display: block;
                    position: absolute;
                    left: 0;
                    width: 30px;
                    height: 2px;
                    background-color: white;
                    border-radius: 4px;
                    transition: all .5s;
                  }
                  .toggle_btn span:nth-child(1) {
                    top: 4px;
                  }
                  .toggle_btn span:nth-child(2) {
                    top: 14px;
                  }
                  .toggle_btn span:nth-child(3) {
                    bottom: 4px;
                  }
                  .open .toggle_btn span {
                    background-color: #fff;
                  }
                  .open .toggle_btn span:nth-child(1) {
                    -webkit-transform: translateY(10px) rotate(-315deg);
                    transform: translateY(10px) rotate(-315deg);
                  }
                  .open .toggle_btn span:nth-child(2) {
                    opacity: 0;
                  }
                  .open .toggle_btn span:nth-child(3) {
                    -webkit-transform: translateY(-10px) rotate(315deg);
                    transform: translateY(-10px) rotate(315deg);
                  }
                  /*============
                  #mask
                =============*/
                  #mask {
                    display: none;
                    transition: all .5s;
                  }
                  .open #mask {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #000;
                    opacity: 0.3;
                    z-index: 2;
                    cursor: pointer;
                  }
                  /*============
                  main
                  =============*/
                  main {
                    padding: 50px;
                  }
                  main h1 {
                    font-family: 'Open Sans', sans-serif;
                    font-weight: 400;
                    text-align: center;
                  }
                  /*============
                  body
                  =============*/
                  body {
                    font-family: 'Open Sans', sans-serif;
                    font-weight: 400;
                  }




      }
}
/* ---スマホ横*/




/* スマホ縦-- */
@media (max-width: 450px) {

  .boxMENU {    display: none;
  }


  .boxMD {
          width: 100%;
          height: 85px;
          position: fixed;

z-index: 2;
        }




.boxMD img {
            width: 100%;
            max-width: 180px;
            margin-top: 25px;
           margin-left: 20px;
                  }


  .boxHITO {
              width: 100%;
              max-width: 1000px;
              position: fixed;
              bottom: 35px;
              left: 0;
              right: 0;
              margin: 0 auto;
              text-align: center;
                    }

    .boxHITO img {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            }

    .boxHITO a:hover img {
            opacity: 0.6;
            transition: 0.5s;
            }






            /*============
            nav
            =============*/
            nav {
              display: block;
              position: fixed;
              top: 85px;
              left: -300px;
              bottom: 0;
              width: 300px;
              background: black;
              overflow-x: hidden;
              overflow-y: auto;
              -webkit-overflow-scrolling: touch;
              transition: all .5s;
              z-index: 3;
              opacity: 0;
            }
            .open nav {
              left: 0;
              opacity: 0.8;
            }
            nav .inner {
              padding: 25px;
            }
            nav .inner ul {
              list-style: none;
              margin: 0;
              padding: 0;
            }
            nav .inner ul li {
              position: relative;
              margin: 0;
              border-bottom: 1px solid #333;
            }
            nav .inner ul li a {
              display: block;
              color: white;
              font-size: 12px;
              padding: 1em;
              text-decoration: none;
              transition-duration: 0.2s;
              letter-spacing: 0.15em
            }
            nav .inner ul li a:hover {
              background: #002B3B;
            }
            @media screen and (max-width: 767px) {
              nav {
                left: -220px;
                width: 220px;
              }
            }
            /*============
            .toggle_btn
            =============*/
            .toggle_btn {
              display: block;
              position: fixed;
              top: 30px;
              right: 30px;
              width: 30px;
              height: 30px;
              transition: all .5s;
              cursor: pointer;
              z-index: 3;
            }
            .toggle_btn span {
              display: block;
              position: absolute;
              left: 0;
              width: 30px;
              height: 2px;
              background-color: white;
              border-radius: 4px;
              transition: all .5s;
            }
            .toggle_btn span:nth-child(1) {
              top: 4px;
            }
            .toggle_btn span:nth-child(2) {
              top: 14px;
            }
            .toggle_btn span:nth-child(3) {
              bottom: 4px;
            }
            .open .toggle_btn span {
              background-color: #fff;
            }
            .open .toggle_btn span:nth-child(1) {
              -webkit-transform: translateY(10px) rotate(-315deg);
              transform: translateY(10px) rotate(-315deg);
            }
            .open .toggle_btn span:nth-child(2) {
              opacity: 0;
            }
            .open .toggle_btn span:nth-child(3) {
              -webkit-transform: translateY(-10px) rotate(315deg);
              transform: translateY(-10px) rotate(315deg);
            }
            /*============
            #mask
            =============*/
            #mask {
              display: none;
              transition: all .5s;
            }
            .open #mask {
              display: block;
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #000;
              opacity: 0.3;
              z-index: 2;
              cursor: pointer;
            }
            /*============
            main
            =============*/
            main {
              padding: 50px;
            }
            main h1 {
              font-family: 'Open Sans', sans-serif;
              font-weight: 400;
              text-align: center;
            }
            /*============
            body
            =============*/
            body {
              font-family: 'Open Sans', sans-serif;
              font-weight: 400;
            }









  }
/* ---スマホ縦 */










































/* ワイドPC */
@media (min-width: 768px) {




}
/* ワイドPC */


/* スマホ横--- */
@media (max-width: 768px) {
    @media (min-width: 450px) {


}
}
/* ---スマホ横*/



/* スモール */
  @media (max-width: 450px) {




}
/* スモール */






/* コピーライト */

.CP {
  width: 50%;
  position: fixed;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: red;
  }



.CP > div {
  display: table-cell;
}


h1{
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 30px;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 12px;
  font-family: Helvetica;
  line-height: 1.6;
  letter-spacing: 0.1em;
}


.CPR {
  width: 50%;
  position: fixed;
  bottom: 9px;
  left: 0;
  right: 0;
  margin: auto;
  }



.CPR > div {
  display: table-cell;
}


.CPR p {
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 9px;
  font-family: Helvetica;
  line-height: 1.6;
  letter-spacing: 0.1em;
}