@charset "Shift_JIS";





/* =============================================

  header‘S‘Ì

============================================= */



#AreaHeader {

    padding-left: 120px;

    background: var(--blue);

    background: linear-gradient(-75deg, rgba(0,88,117,1) 0%, rgba(1,63,117,1) 100%);

    min-height: 100px;

}



.header-layout {

  padding: 21px 0;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  min-height: 100px;

}





      /* -------------------------------------------

        header‘S‘Ì > SP

      --------------------------------------------- */

      @media (min-width:0px) {



        #AreaHeader {

          padding-left: 90px;

          padding-right: 15px;

        }



        .sitename {

          max-width: 380px;

        }



        .accmenu {

          display: none;

        }



      }

      /* -------------------------------------------

        header‘S‘Ì > TABLET

      ---------------------------------------------- */

      @media (min-width:768px) {



        #AreaHeader {

          padding-left: 120px;

          padding-right: 2em;

        }



        .sitename {

          max-width: none;

        }



      }



      /* -------------------------------------------

        header‘S‘Ì > PC

      ---------------------------------------------- */

      @media (min-width:1024px) {



        #AreaHeader {

          padding-right: 5%;

        }



        .accmenu {

          margin-left: 20px;

          display: block;

        }



      }





/* =============================================

  hamburger

============================================= */



.hamburger {

    cursor: pointer;

    position: fixed;

    background-color: var(--white);

    border-radius: 40px;

    box-shadow: 0px 0px 4px #00000033;

    display: flex;

    justify-content: flex-end;

    flex-direction: column;

    align-items: center;

    z-index: 4;

}



.hamburger-line {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.hamburger p {

    letter-spacing: 0.7px;

    color: var(--black);

}



.hamburger span {

    border-radius: 1.5px;

    background-color: var(--black);

    position: absolute;

    transition: 0.5s ease-in-out;

}



.hamburger span:nth-child(2) {

    top: calc(39% - 1.5px);

}



.hamburger.active span:nth-child(1) {

    transform: rotate(-45deg);

}



.hamburger.active span:nth-child(2),

.hamburger.active span:nth-child(3) {

    transform: rotate(45deg);

}



#navi {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    background-color: #2f2f2f;

    transform: translateX(-100%);

    height: 100%;

    z-index: 3;

}



#navi .navi-layout {

  padding-bottom: 30px;

  overflow-y: auto;

  height: 100%;

}



#navi ul li a {

    display: block;

    font-size: 1em;

    color: var(--white);

    border-bottom: var(--lightgray) dotted 1px;

}



#navi ul li.darkbeige img,

#navi ul li.white img {

    margin-left: 6px;

    vertical-align: middle;

}



#navi ul li a:hover {

    transform: translate(1px, 1px);

    -webkit-transform: translate(1px, 1px);

}



#navi.active {

    display: block;

    transform: translateX(0%);

    transition: 0.6s;

    box-shadow: 4px 0px 4px #00000033;

}



#navi .header-banner {

  margin-top: 10px;

  border: none;

}



#navi .header-banner a {

  border: 1px solid var(--white);

  position: relative;

}



#navi .header-banner a::before {

  position: absolute;

  content: "";

  background-color: var(--white);

  clip-path: polygon(0 0, 100% 50%, 0 100%);

  width: 8px;

  height: 10px;

  right: 10px;

  top: 0;

  bottom: 0;

  margin: auto;

}



#navi .header-member {

  margin-bottom: 20px;

}



#navi .header-member a {

  background-color: var(--green);

  background-image: url(../image/icon-door.png);

  background-repeat: no-repeat;

}



#navi .header-kyosai a {

  background-color: var(--pink);

  background-image: url(../image/icon-handshake.png);

  background-repeat: no-repeat;

}

  

  

      /* -------------------------------------------

          hamburger > SP

      --------------------------------------------- */

    @media (min-width:0px) {

  

      #navi {

        padding-top: 100px;

      }

  

      #navi ul li {

        margin: 0 10px 5px;

      }

  

      .hamburger {

        width: 60px;

        height: 60px;

        top: 20px;

        left: 12px;

      }



      .hamburger p {

        padding-bottom: 12px;

        font-size: 9px;

        line-height: 9px;

      }

  

      .hamburger span {

        width: 18px;

        height: 2px;

        left: calc(50% - 9px);

      }

  

      .hamburger span:nth-child(1) {

        top: calc(39% - 1px - 7px);

      }

  

      .hamburger span:nth-child(3) {

        top: calc(39% - 1px + 7px);

      }

  

      .hamburger.active span:nth-child(1) {

        width: 25px;

        top: calc(39% - 1px);

        left: calc(50% - 12.5px);

      }

  

      .hamburger.active span:nth-child(2),

      .hamburger.active span:nth-child(3) {

        width: 25px;

        top: calc(39% - 1px);

        left: calc(50% - 12.5px);

      }



      #navi ul li a {

        padding: 7px 10px;

      }



      #navi .header-banner a {

        padding: 10px 25px 10px 43px;

      }



      #navi .header-member a {

        background-position: center left 11px;

        background-size: 19px 23px;

      }

      

      #navi .header-kyosai a {

        background-position: center left 10px;

        background-size: 23px 21px;

      }



      .navi-accmenu {

        display: block;

        margin: 0 20px;

      }



      #navi .navi-sizecolor-box {

        display: block;

        background: none;

        clip-path: none;

        filter: none;

        position: unset;

      }



      #navi .navi-accmenu li {

        margin: 0 5px 5px 0;

      }



      #navi .textsize a {

        padding: 3px 10px;

        color: var(--black);

      }

  

    }

      /* -------------------------------------------

          hamburger > TABLET

      ---------------------------------------------- */

    @media (min-width:768px) {

  

      #navi {

        padding-top: 120px;

      }

  

      #navi ul li {

        margin: 0 20px 5px;

      }



  

      .hamburger {

        width: 75px;

        height: 75px;

        top: 22.5px;

        left: 22.5px;

      }



      .hamburger p {

        padding-bottom: 15px;

        font-size: 11px;

        line-height: 11px;

      }

  

      .hamburger span {

        width: 25px;

        height: 3px;

        left: calc(50% - 12.5px);

      }

  

      .hamburger span:nth-child(1) {

        top: calc(39% - 1.5px - 10px);

      }

  

      .hamburger span:nth-child(3) {

        top: calc(39% - 1.5px + 10px);

      }

  

      .hamburger.active span:nth-child(1) {

        width: 30px;

        top: calc(39% - 4px);

        left: calc(50% - 15px);

      }

  

      .hamburger.active span:nth-child(2),

      .hamburger.active span:nth-child(3) {

        width: 30px;

        top: calc(39% - 4px);

        left: calc(50% - 15px);

      }



      #navi ul li a {

        padding: 8px 10px;

        font-weight: bold;

      }



      #navi .header-banner a {

        padding: 15px 25px 15px 55px;

        background-position: center left 14px;

        background-size: auto;

      }

  

    }

      /* -------------------------------------------

          hamburger > PC

      ---------------------------------------------- */

      @media (min-width:1024px) {



        .navi-accmenu {

          display: none;

        }



      }







/* =============================================

  •¶ŽšƒTƒCƒYE”wŒiF‚̕ύX

============================================= */



.sizecolor {

  margin-bottom: 10px;

  position: relative;

}



.sizecolor-btn {

  text-align: right;

}



.sizecolor-btn a {

  padding-left: 30px;

  font-size: 0.8em;

  color: var(--white);

  display: inline-block;

  background-image: url(../image/icon-sizecolor.png);

  background-repeat: no-repeat;

  background-position: left center;

}



.sizecolor-btn a:hover {

	transform: translate(1px, 1px);

    -webkit-transform: translate(1px, 1px);

}



.sizecolor-box {

  margin: 0 0 10px 0;

  padding: 20px 10px 5px 10px;

  display: none;/*‚Í‚¶‚ß‚Í”ñ•\Ž¦*/

  background-color: var(--white);

  clip-path: polygon(0 8%, 48% 8%, 50% 0, 52% 8%, 100% 8%, 100% 100%, 0 100%);

  filter: drop-shadow(0px 0px 4px #00000033);

  position: absolute;

  right: 0;

  z-index: 1;

}



/* -----------------------------------------------

  •¶ŽšƒTƒCƒY

-------------------------------------------------- */



.textsize {

  margin-right: -5px;

  display: flex;

  flex-direction: row;

  justify-content: center;

}



.textsize li{

  margin-bottom: 5px;

  margin-right: 5px;

  min-width: 90px;

  text-align: center;

  border: 1px solid var(--blue); 

}



.textsize li a{

  background-color: #ffffe0;

  font-size: 0.9em;

}



/* -----------------------------------------------

  ”wŒiF

-------------------------------------------------- */



.bgcolor {

  margin-right: -5px;

  display: flex;

  flex-direction: row;

  justify-content: center;

}



.bgcolor button {

  margin-bottom: 5px;

  margin-right: 5px;

  min-width: 50px;

  font-size: 0.9em;

  text-align: center;

  border: 1px solid var(--blue);

  cursor: pointer;

}



#bg1 {

  background-color: #fff;

  color: #000;

}

#bg2 {

  background-color: #0000ff;

  color: #fff;

}

#bg3 {

  background-color: #ffff00;

  color: #000;

}

#bg4 {

  background-color: #000000;

  color: #fff;

}



/* =============================================

  ƒTƒCƒg“àŒŸõ

============================================= */



.searchBox {

  position: relative;

}



.searchBox > input {

  font-size: 0.9em;

  vertical-align: middle;

  background: var(--white);

}

.searchBox > input[type="search"] {

  padding: 5px 40px 5px 10px;

  width: 100%;

  border-radius: 0;

}

.searchBox > input[type="submit"] {

  position: absolute;

  content: "";

  background-image: url(../image/icon-search.png);

  background-repeat: no-repeat;

  background-position: center;

  width: 20px;

  height: 19px;

  right: 10px;

  top: 0;

  bottom: 0;

  margin: auto;

}



      /* -------------------------------------------

          ƒTƒCƒg“àŒŸõ > PC

      ---------------------------------------------- */

      @media (min-width:1024px) {



        .searchBox > input[type="search"] {

          max-width: 230px;

        }

  

      }