@charset "UTF-8";
/* かるしお
------------------------------ */
#karushio {
  position: relative;
  background: url(../images/karushio-detailBg.png) center top;
  color: #512e1d;
  font-size: 15px; }
  #karushio:after {
    clear: both;
    display: block;
    content: ''; }
  #karushio .section {
    margin: 0;
    padding: 0 0 40px;
    background: url(../images/karushio-bg.png) center top; }
  #karushio #karushioNav {
    float: left;
    width: 215px; }
  #karushio #title {
    width: 720px;
    padding: 30px 0 0 240px;
    margin: 0 auto; }
    #karushio #title h1 {
      padding-left: 30px;
      -webkit-animation: fadeIn 1s ease 0.5s;
      -webkit-animation-fill-mode: backwards;
      -moz-animation: fadeIn 1s ease 0.5s;
      -moz-animation-fill-mode: backwards;
      -ms-animation: fadeIn 1s ease 0.5s;
      -ms-animation-fill-mode: backwards;
      animation: fadeIn 1s ease 0.5s;
      animation-fill-mode: backwards; }
  #karushio .lineup.topline {
    text-align: center;
    width: 590px;
    margin: 0 auto;
    padding-top: 30px; }
    #karushio .lineup.topline li {
      width: 180px;
      float: none;
      display: inline-block;
      -webkit-animation: fadeIn 1.5s ease 1.5s;
      -webkit-animation-fill-mode: backwards;
      -moz-animation: fadeIn 1.5s ease 1.5s;
      -moz-animation-fill-mode: backwards;
      -ms-animation: fadeIn 1.5s ease 1.5s;
      -ms-animation-fill-mode: backwards;
      animation: fadeIn 1.5s ease 1.5s;
      animation-fill-mode: backwards; }
      #karushio .lineup.topline li:first-child {
        padding-bottom: 10px; }
  #karushio .lineup.bottom {
    margin-top: 20px;
    margin-left: 20px; }
    #karushio .lineup.bottom li {
      width: 90px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      -webkit-animation: fadeIn 1.5s ease 2.5s;
      -webkit-animation-fill-mode: backwards;
      -moz-animation: fadeIn 1.5s ease 2.5s;
      -moz-animation-fill-mode: backwards;
      -ms-animation: fadeIn 1.5s ease 2.5s;
      -ms-animation-fill-mode: backwards;
      animation: fadeIn 1.5s ease 2.5s;
      animation-fill-mode: backwards; }
      #karushio .lineup.bottom li:first-child {
        width: 60px; }
      #karushio .lineup.bottom li:nth-child(2) {
        width: 60px; }
      #karushio .lineup.bottom li:last-child {
        margin-left: 10px;
        margin: -12px 0 0 10px; }
  #karushio .lineup:after {
    clear: both;
    display: block;
    content: ''; }
  #karushio .lineup li {
    float: left;
    width: 230px;
    transition: all 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    /*
    			&:nth-child(1){
    				-webkit-animation: fadeIn 1.5s ease 1.5s;
    				-webkit-animation-fill-mode: backwards;
    				-moz-animation: fadeIn 1.5s ease 1.5s;
    				-moz-animation-fill-mode: backwards;
    				-ms-animation: fadeIn 1.5s ease 1.5s;
    				-ms-animation-fill-mode: backwards;
    				animation: fadeIn 1.5s ease 1.5s;
    				animation-fill-mode: backwards;
    			}
    			&:nth-child(2){
    				-webkit-animation: fadeIn 1.5s ease 2.5s;
    				-webkit-animation-fill-mode: backwards;
    				-moz-animation: fadeIn 1.5s ease 2.5s;
    				-moz-animation-fill-mode: backwards;
    				-ms-animation: fadeIn 1.5s ease 2.5s;
    				-ms-animation-fill-mode: backwards;
    				animation: fadeIn 1.5s ease 2.5s;
    				animation-fill-mode: backwards;
    			}
    			&:nth-child(3){
    				-webkit-animation: fadeIn 1.5s ease 3.5s;
    				-webkit-animation-fill-mode: backwards;
    				-moz-animation: fadeIn 1.5s ease 3.5s;
    				-moz-animation-fill-mode: backwards;
    				-ms-animation: fadeIn 1.5s ease 3.5s;
    				-ms-animation-fill-mode: backwards;
    				animation: fadeIn 1.5s ease 3.5s;
    				animation-fill-mode: backwards;
    			}
    			&:nth-child(4){
    				-webkit-animation: fadeIn 1.5s ease 3.5s;
    				-webkit-animation-fill-mode: backwards;
    				-moz-animation: fadeIn 1.5s ease 3.5s;
    				-moz-animation-fill-mode: backwards;
    				-ms-animation: fadeIn 1.5s ease 3.5s;
    				-ms-animation-fill-mode: backwards;
    				animation: fadeIn 1.5s ease 3.5s;
    				animation-fill-mode: backwards;
    			}*/ }
    #karushio .lineup li.noProduct {
      -webkit-animation: fadeIn 1.5s ease 3.5s;
      -webkit-animation-fill-mode: backwards;
      -moz-animation: fadeIn 1.5s ease 3.5s;
      -moz-animation-fill-mode: backwards;
      -ms-animation: fadeIn 1.5s ease 3.5s;
      -ms-animation-fill-mode: backwards;
      animation: fadeIn 1.5s ease 3.5s;
      animation-fill-mode: backwards; }
      #karushio .lineup li.noProduct:hover {
        transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0); }
    #karushio .lineup li:hover {
      transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      -moz-transform: rotate(15deg);
      -webkit-transform: rotate(15deg); }
  #karushio #reducedSalt:after {
    clear: both;
    display: block;
    content: ''; }
  #karushio #reducedSalt dt {
    float: left; }
  #karushio #reducedSalt dd {
    float: left;
    margin: 0 0 0 40px; }
  #karushio .sectionDetail {
    position: relative;
    padding: 40px 0 35px; }
    #karushio .sectionDetail:before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 10px;
      background: url(../images/karushio-shadow.png) repeat-x;
      content: ''; }
  #karushio #detail {
    width: 720px;
    padding: 0 0 0 240px;
    margin: 0 auto; }
    #karushio #detail li {
      position: relative;
      margin: 30px 0 0;
      padding: 30px 0 0;
      background: url(../images/karushio-separator.png) no-repeat center top; }
      #karushio #detail li:first-child {
        background: none; }
    #karushio #detail dl {
      display: table;
      width: 580px; }
      #karushio #detail dl dt, #karushio #detail dl dd {
        display: table-cell;
        vertical-align: middle; }
      #karushio #detail dl dt {
        width: 130px; }
      #karushio #detail dl.second {
        margin: 0 0 0 66px; }
  #karushio #info {
    width: 720px;
    padding: 40px 0 0 240px;
    margin: 0 auto; }
    #karushio #info .syokuji {
      width: 620px;
      margin: 20px 0 0 40px;
      padding: 15px;
      background: white; }
  #karushio .sectionInfo {
    position: relative;
    padding: 0 0 50px;
    background: url(../images/karushio-infoBg.png); }
    #karushio .sectionInfo:before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 10px;
      background: url(../images/karushio-shadow.png) repeat-x;
      content: ''; }
  #karushio #ABOUT {
    height: 281px;
    padding: 0 84px 0 60px;
    background: url(../images/karushio-infoBg1.png) no-repeat;
    font-size: 16px; }
    #karushio #ABOUT dl {
      padding: 60px 0 0; }
    #karushio #ABOUT dt {
      float: right;
      width: 134px; }
    #karushio #ABOUT dd {
      float: left;
      width: 410px; }
  #karushio #NCVC {
    height: 290px;
    background: url(../images/karushio-infoBg2.png) no-repeat; }
    #karushio #NCVC dd {
      padding: 40px 20px 10px !important; }
      #karushio #NCVC dd:after {
        clear: both;
        display: block;
        content: ''; }
    #karushio #NCVC .text {
      float: left;
      width: 410px; }
    #karushio #NCVC .photo {
      float: right;
      width: 156px; }
    #karushio #NCVC .logo {
      margin: 10px 0 0; }
  #karushio #NINTEI {
    height: 230px;
    background: url(../images/karushio-infoBg3.png) no-repeat; }
  #karushio #NCVC, #karushio #NINTEI {
    padding: 0 60px 0 40px; }
    #karushio #NCVC dt, #karushio #NINTEI dt {
      margin: 0 0 -30px;
      padding: 20px 0 0;
      text-align: center; }
    #karushio #NCVC dd, #karushio #NINTEI dd {
      padding: 40px 20px 30px;
      border: 2px dotted #b28850; }
  #karushio #aside {
    float: left;
    width: 215px;
    margin: 0 0 0 -230px;
    padding: 10px 0 0; }
    #karushio #aside .top {
      margin: 0 0 40px; }
    #karushio #aside .ncvc {
      margin: 40px 0 0; }
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.5); }
  to {
    opacity: 1;
    -webkit-transform: scale(1); } }
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
    -moz-transform: scale(0.5); }
  to {
    opacity: 1;
    -moz-transform: scale(1); } }
@-ms-keyframes fadeIn {
  from {
    opacity: 0;
    -ms-transform: scale(0.5); }
  to {
    opacity: 1;
    -ms-transform: scale(1); } }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5); }
  to {
    opacity: 1;
    transform: scale(1); } }