@charset "utf-8";

@media screen and (max-width: 736px) {
    *{
        margin: 0;
        padding: 0;
    }
    .pc{display: none;}
    body{
        font-family:  YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    }
    
    img{
        display: block;
        width: 76%;
    padding-left: 12%;
        
    }
    
    .amazon{
        width: 80%;
        margin: 0 auto;
        height: 40px;
      
    }
    .rakuten{
        width: 80%;
        margin: 0 auto;
        height: 70px;
      
    }
    .icon{
        width: 30%;
        margin: 0 auto;
        height: 40px;
      
    }
    
    a{
        text-decoration: none;
        color: #89cce6;
    }
    p{
        text-decoration: none;
        font-size: 0.8rem;
        color: #333;
    }
    li{
        list-style-type: none;
        font-size: 0.7em;
        text-align: center;
    }
    header{
        width: 100%;
        height: 50px;
        background-color: #fff;
        position: fixed;
        top:0;
        left: 0;
        z-index: 999; 
    }
    #logo{
      width: 30%;
  margin: 5px;
  float: left;

  }

  #logo img{
    display: block;
    width: 74%;
    height: auto;
    margin-left: 113%;
  
      }
    main section{
        margin: 20px 10px;
      }
    #nav-toggle{
      width: 30px;
      height: 20px;
      position: fixed;
      top: 15px;
      right: 35px;
      z-index: 1000;
    
    }
    #global-nav{
        background-color: rgba(249, 249, 249, 0.9);
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 990;
        /*visibility: hidden;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #89cce6;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        transform: translateY(-215vh);
        transition: 0.8s;
    }
    #global-nav a{
        display: block;
        padding: 10px 0;
    }


   .open #global-nav{
        transform: translateY(0);

    }

    #nav-toggle div{
        position: relative;
        width: 100%;
        height: 100%;
    }
    #nav-toggle span{
        display:block;
        width: 100%;
        height: 3px;
        background-color: #89cce6;
        position: absolute;
        left: 0;
        transition: all .6s ease;
    }
    #nav-toggle span:nth-child(1){
    top: 0;
    
    }
    #nav-toggle span:nth-child(2){
        top: 10px;
        }
    #nav-toggle span:nth-child(3){
        top: 20px;
        }
    
    .open #nav-toggle span:nth-last-child(1){
        transform: rotate(45deg);
        top: 10px;
    }
    .open #nav-toggle span:nth-last-child(2){
        opacity: 0;
    }
    .open #nav-toggle span:nth-last-child(3){
        transform: rotate(-45deg);
        top: 10px;
    } 
#nav li{
    margin-left: 10px;
    font-weight: bold;
}  
    #allitem h1{
      text-align: center;
        font-size: 1.8em;
        line-height: 170%;
        color: #89cce6;
        letter-spacing: 0.8em;
        margin-bottom: 100px;
        margin-top: 100px;
       
  
    }
     
    #cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .card {
      width: 200px;
      height: 230px;
      border: 1px solid lightgray;
    }
    
    .card:nth-child(2) {
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .card:nth-child(4) {
      margin-right: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    
    .picture img {
      width: 80%;
      height: 120px;
    }

  

    .description {
      width: 100%;
      height: 145px;
      box-sizing: border-box;
    }
    
    .description p {
      font-size: 13px;
      color: dimgray;
    
    }

    .card span.option1 {
      color: #FFF;
    background: coral;
    width: auto;
    position: static;
    transform: none;
    display: inline-block;
    font-size: 13px;
    margin-left: -139px;
    padding: 2px 10px;
    right: 0px;
    top: 0px;
    transform: rotate(0deg) translate(147px,17px);
    }

   
#back{
  margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    color: #89cce6;
    font-size: 14px;
    line-height: 170%;
    letter-spacing: 0.8em;
    margin-top: 100px;
    font-weight: bold;
} 

    .button_ta {
      border-radius: 50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background: #5ea8cb;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }
    .button_bl {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background: black;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }
  
    .button_lg {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background: lightgray;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }
    .button_or {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background:  orange;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
  
    }

    .button_gr {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background:  green;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }

    .button_nv {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background:  navy;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }
    .button_wh {
      border-radius:50%;
      border: 1px solid #666;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background:  #FFF;
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }

    .button_pb {
      border-radius:50%;
      display: flex;
      flex-wrap: wrap;
      width: 0rem;
      padding: 0.8rem;
      background:  linear-gradient(to right, #9cbcdc 30%, #f8d8e4 70%);
      float: left;
      margin-left: 5px;
      margin-top: 0px;
    }





































    #footercolor li{
      text-align: start;
      color: #fff;
      width: 98%;
      margin: 0;}
    
    #footerlogo1{
    float: right;
    
    }
    #footerlogo1 img{
      width: 20px;
      height: auto;
      padding-top: 4px;
      }
    
    #footerlogo2{
    float: right;
    
    }
    
    
    footer{
    background-color: #cee7f1;
    color: #fff;
    text-align: center;
    padding: 25px;
    margin-top: 100px;
    }
    
    }