#iChocoInfo {
    text-align : center;
  }

  #iChocoTitle {
    font-size : 26px;
    font-weight : bold;
    margin-top : 20px;
    color : #671c0b;
    text-shadow: 0px 0px 1px black;
  }
@media screen and (max-width:500px) { 
  #iChocoTitle {
    font-size : 5vw;
  }
}

  #iChocoBrand {
    color : gray;
    line-height: 0.7;
    font-size : 14px;
  }
  #iPics {
    position:relative;
    min-height : 300px;
    height:50vw;
    max-height:350px;
  }
@media screen and (max-width:500px) { 
  #iPics {
    min-height : 240px;
    max-height:290px;
  }
}
  #iPics img {
    position:relative;
    max-height : 330px;
    z-index: 1;
    margin-top : 15px;
  }
  #iPics img.cRatio1 {
    height : calc(50vw - 20px);
  }
  #iPics img.cRatio2 {
    max-width : 85%;
  }
@media screen and (max-width:500px) { 
  #iPics img.cRatio1 {
    min-height: 220px;
    max-height: 270px;
  }
}
@media screen and (min-width:600px) { 
/*
  #iPics img {
    max-width : 85%;
  }
*/
}
  #iPics img:nth-child(n+2) {
    position:relative;
    display:none;
  }

  .cPicsFrame {
    position: absolute;
    background-color: #291406;
    z-index: 0;
    top: 0;
  }
  #iPicsFrame1 {
    height: 80%;
    width: 30%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    left: 0;
    margin-left: -10px;
  }
  #iPicsFrame2 {
    height: 95%;
    width: 45%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    left: 20%;
    margin-left: -10px;
  }
  #iPicsFrame3 {
    height: 90%;
    width: 35%;    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    left: 50%;
    margin-left: -10px;
  }
  #iPicsFrame4 {
    height: 80%;
    width: calc(20% + 20px);    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    left: 80%;
    margin-left: -10px;
  }
  
  #iOtherPics {
    text-align:center;
    margin: 10px 0px;
  }
  #iOtherPics img {
    max-width : 70px;
    max-height: 70px;
    margin  : 0px 2px;
  }
  #iComments {
    margin-top : 10px;
    margin-bottom : 20px;
  }
  .cPrevNextLink {
    margin-bottom : 8px;
  }
  .cIntroPrev {
    line-height: 2;
    border-left: 1px dashed;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    padding: 4px;
    background-color: white;
  }
  .cIntroNext {
    line-height: 2;
    border-right: 1px dashed;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 4px;
    background-color: white;
  }
      
  #iOtherPicBack {
    z-index:1;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
  }
  #iOtherPicWindow {
    position:absolute;
    width: 80%;
    height: 80%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
  }


  #iChocoIntroHistory {
    margin : 10px;
  }
  #iFilterTag {
    text-align:right;
  }
  .cFocusButton {
    background-color: lightblue;
    color: black;
  }
  .cUnFocusButton {
    color : gray;
  }
  .cFilterButton {
    padding : 2px;
  }
  #iHistoryTitle {
    text-align : center;
    font-weight: bold;
  }
  #iHistories {
    display : flex;
    justify-content: center;
    flex-wrap : wrap;
  }
  .cHistoryOne {
    display : flex;
    flex-basis: 45%;
    margin : 10px;
    border:3px double;
  }

@media screen and (max-width:700px) { 
  .cHistoryOne {
    flex-basis: 90%;
  }
}
  .cHistoryInfo {
    margin-right : 5px;
    margin-left : 5px;
    width : calc(100% - 72px);
  }
  .cThumnail{
    position : relative;
    top:-5px;
    left:-10px;
    width:72px;
    height:72px;
    border:1px solid gray;
  }
  .cVol {
    text-align : right;
    font-size : 13px;
    font-weight : bold;
  }
  .cTitle {
    text-align : center;
    font-size : 16px;
    font-weight : bold;
    color : #671c0b;
    text-shadow: 0px 0px 1px black;
  }
@media screen and (max-width:400px) { 
  .cTitle {
    font-size : 3.8vw;
    
  }
}
@media screen and (min-width:700px) and (max-width:800px) { 
  .cTitle {
    font-size : 2vw;
    
  }
}

  .cBrand {
    text-align : right;
    color : gray;
  }
  #iHistoryMore {
    text-align: center;
    margin: 10px auto;
    border: 1px solid;
    padding: 10px;
    max-width: 80%;
    cursor : pointer;
    display:none;
  }