@charset 'UTF-8';

body {
  background: url('../img/bg_header_sub.png') repeat-x top white;
}

.content {
  padding: 0 50px 15px;
  margin: 0 auto;
  width: 800px;
  background: url('../img/bg_h2.jpg') no-repeat left top;
}
  .content h2 {
    padding-bottom: 20px;
    height: 180px;
    width: 880px;
    font-size: 140%;
    line-height: 180px;
    color: white;
    letter-spacing: 0.1em;
  }

#page_cake {
  background: url('../img/bg_h2_cake.jpg') no-repeat left top;
}
  #page_cake h2 {
    padding-top: 180px;
    height: 170px;
    text-indent: -9999px;
  }
  .cake_catches {
    margin: 0 30px 10px 0;
  }
    .cake_catches h3 {
      margin-bottom: 5px;
      padding-left: 40px;
      border-bottom: 3px dotted #eeee66;
      background: url('../img/bg_h3_imo.png') no-repeat left top;
      font-size: 160%;
      line-height: 28px;
      color: #995511;
    }
    .cake_catches p {
      margin: 0 0 0 50px;
      font-size: 110%;
      line-height: 1.5;
    }
    .cake_catches strong {
      padding: 0 0.1em;
      font-size: 125%;
      color: #bf0000;
    }
  .cake_shop {
    margin: 20px 0;
  }
    .cake_shop h3 {
      margin-bottom: 3px;
      color: #cc5500;
      font-size: 140%;
      text-align: center;
    }
    .cake_shop p {
      font-size: 85%;
      text-align: center;
    }
    .cake_shop img {
      display: block;
      margin: 0 auto 2px;
    }
  #cake_price {
    padding-bottom: 10px;
  }
    #cake_price h3 {
      margin: 0 80px 5px;
      background: #664433;
      color: white;
      text-align: center;
      font-size: 120%;
      line-height: 2;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -webkit-border-radius: 4px;
    }
    #cake_price p.attention {
      text-align: center;
      font-size: 90%;
      color: #886666;
    }
  #price_table {
    margin: 0 auto 2px;
  }
    #price_table th,
    #price_table td {
      padding: 5px 15px;
      border: 1px solid #998888;
      font-size: 110%;
    }
    #price_table thead th {
      padding: 3px 0 1px;
      background: #fcf6e6;
    }
      #price_table thead th span {
        font-size: 80%;
      }
    #price_table tbody th {
      text-align: left;
    }
    #price_table td {
      text-align: right;
    }
  #cake_knowledge {
    padding: 15px 80px 10px;
  }
    #cake_knowledge h3 {
      margin-bottom: 10px;
      border-bottom: 1px solid #ccaa99;
      font-size: 140%;
    }
    #cake_knowledge .img {
      float: right;
    }
    #cake_knowledge p {
      margin-bottom: 5px;
      line-height: 1.5;
    }
  #cake_howto {
    overflow: hidden;
    padding: 15px 80px 10px;
  }
    #cake_howto h3 {
      margin-bottom: 10px;
      border-bottom: 1px solid #ccaa99;
      font-size: 140%;
    }
    #cake_howto .img {
      float: right;
    }
    #cake_howto li {
      margin-bottom: 5px;
      font-size: 110%;
      line-height: 1.5;
    }

#page_menu {
}
  .topics {
    float: left;
    padding: 0 15px 10px 0;
    width: 385px;
    overflow: hidden;
  }
    .topics h3 {
      margin-bottom: 10px;
      border-bottom: 1px solid #ddcccc;
      font-size: 120%;
    }
    .topics p {
      line-height: 1.5;
    }
    .topics img {
      float: right;
      display: block;
      padding: 0 0 10px 10px;
    }

#page_coffee {
}
  #page_coffee p {
    margin-bottom: 10px;
    line-height: 1.4;
  }
  #img_coffee {
    float: right;
  }

#page_recruit {
}
  #page_recruit p {
    line-height: 1.5;
  }
#recruit_headline {
  margin-bottom: 5px;
  font-size: 125%;
  color: #ee6666;
}

#googlemap {
  margin: 15px auto;
  width: 800px;
}

#page_penguin {
}
  #page_penguin p {
    line-height: 1.8;
  }
  #page_penguin ul {
    padding: 10px 0 10px 15px;
    overflow: hidden;
  }
  #page_penguin li {
    display: block;
    float: left;
    padding-right: 5px;
  }
  #about_penguin {
    padding: 10px 100px;
    border: 1px solid #dddddd;
    background: #eeeeee;
  }
    #about_penguin h3 {
      padding-bottom: 1px;
      margin-bottom: 8px;
      border-bottom: 1px dotted #999999;
      font-size: 115%;
    }
    #about_penguin p {
      line-height: 1.4;
    }

#about_table {
  width: 800px;
}
  #about_table th,
  #about_table td {
    padding: 5px 15px;
    border: 1px solid #bbaa99;
  }
  #about_table th {
    background: #f9f6e6;
    text-align: left;
  }
  #about_table td {
  }
  #about_table table td {
    text-align: right;
  }
  #about_table * {
    line-height: 1.4;
  }

#business_table {
  margin: 15px 50px 0;
}
  #business_table th,
  #business_table td {
    padding: 5px 15px;
    border: 1px solid #bbaa99;
  }
  #business_table th {
    background: #f9f6e6;
    text-align: left;
  }
  #business_table td {
  }
  #business_table table td {
    text-align: right;
  }
  #business_table * {
    line-height: 1.4;
  }

.media_list {
  margin: 0 0 10px 0;
  padding: 5px 0 10px 0;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}
  .media_list img {
    display: block;
    float: right;
  }
  .media_list h3 {
    margin-bottom: 5px;
    font-size: 120%;
    font-weight: bold;
  }
  .media_list p {
    padding: 0 0 0 10px;
    line-height: 1.4;
  }

#page_privacy {
}
  #page_privacy div {
  }
  #page_privacy h3 {
    margin: 0 0 15px;
    padding: 0 0 3px 5px;
    border-bottom: 1px solid #cccccc;
  }
  #page_privacy p {
    margin: 0 30px 15px;
    font-size: 90%;
    line-height: 1.6;
  }
  #page_privacy ul {
    margin: 0 30px 15px;
    padding: 10px 20px;
    background: #eeeeee;
    border: 1px solid #dddddd;
  }
  #page_privacy li {
    line-height: 2;
    font-size: 90%;
  }

/* pork */
#page_pork {
  background: url('../img/bg_h2_pork.jpg') no-repeat left top;
}
#page_pork h2 {
    height: 290px;
    text-indent: -9999px;
}
.pork_catches {
	margin: 0 30px 10px 0;
	clear: both;
	overflow: hidden;
}
.pork_catches h3 {
	margin-bottom: 10px;
	padding-left: 51px;
	border-bottom: 3px double #75570F;
	background: url('../img/bg_h3_buta.png') no-repeat left -1px;
	font-size: 160%;
	line-height: 28px;
	color: #874300;
}
.pork_catches p {
	margin: 0 0 0 51px;
	font-size: 110%;
	line-height: 1.7;
	letter-spacing: 1pt;
}
.pork_catches strong {
	padding: 0 0.1em;
	font-size: 125%;
	color: #bf0000;
}

.floatRight {
	float: right;
	width: 204px;
	margin-left: 30px!important;
}

#pork_price {
    padding-bottom: 30px;
	margin: 0 80px 5px;
	clear: both;
	overflow: hidden;
}

#pork_price h3 {
	margin-bottom: 25px;
	background: #664433;
	color: white;
	text-align: center;
	font-size: 120%;
	line-height: 2;
	letter-spacing: 1pt;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#pork_price dt {
	background-color: #FFF97C;
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	margin-right: 220px;
	padding: 10px;
}

#pork_price dd {
	font-size: 170%;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	padding: 15px 0 0 20px;
	color: #FF2C00;
}

#pork_price dd em {
	font-size: 200%;
	color: #FF2C00;
	padding-right: 5px;
	
}

.pork_knowledge {
	padding: 15px 80px 20px;
	overflow: hidden;
}

.pork_knowledge h3 {
	margin-bottom: 10px;
	padding-bottom: 1px;
	border-bottom: 1px solid #ccaa99;
	font-size: 140%;
}
.pork_knowledge .img {
	float: right;
	padding-left: 15px;
}
.pork_knowledge p {
	font-size: 110%;
	line-height: 1.7;
	letter-spacing: 1pt;
	margin-bottom: 5px;
}

#product-table {
  margin: 10px 0;
}
#product-table td {
  padding: 0 10px 15px;
  vertical-align: top;
}
#product-table .title {
  display: block;
  padding: 4px 0;
  line-height: 1.3;
}
#product-table .price {
  display: block;
  color: #cc6666;
  text-align: right;
}


@media only screen and (max-width: 580px) {
  body {
    background: none;
  }
  .content {
    width: auto;
    padding: 0 0 15px;
    background: none;
  }
    .content h2 {
      padding-left: 5%;
      margin-bottom: 10px;
      width: 95%;
      height: 60px;
      line-height: 60px;
      overflow: hidden;
      background: url('../img/bg_h2.jpg') no-repeat left top;
      background-size: 100%;
    }
  #page_menu {
  }
    #page_menu .topics {
      padding: 5px 10px;
      width: auto;
    }
    #page_menu .topics img {
      width: 82px;
    }
  #page_coffee {
  }
    #page_coffee p {
      padding: 0 10px;
    }
    #page_coffee p img {
      width: 82px;
    }
  #page_about {
  }
    #page_about img {
      width: 100%;
    }
    #about_table {
      width: 100%;
    }
    #about_table th,
    #about_table td {
      padding: 2px;
      font-size: 90%;
    }

  #page_penguin p {
    padding: 5px 10px;
  }
  #page_penguin ul {
    text-align: center;
  }
  #page_penguin li {
    display: inline-block;
    margin: 0 0 5px;
    float: none;
  }
  .penguin_photos {
  }
  .penguin_photos img {
    width: 95px;
  }
  #about_penguin {
    padding: 10px;
  }

  #page_recruit h3,
  #page_recruit p {
    padding: 0 10px;
  }

  #business_table {
    margin: 0;
  }
  #business_table th,
  #business_table td {
    padding: 4px 6px;
    font-size: 90%;
  }

  #googlemap {
    margin: 0;
    width: 100%;
  }
  #googlemap iframe {
    width: 100%;
    height: 400px;
  }

  #page_cake {
    background-size: 100%;
    padding-top: 0;
  }
  #page_cake h2 {
    height: 10px;
    padding-top: 100px;
    background: none;
  }
  .cake_shop h3 {
    font-size: 120%;
  }
  .cake_shop img {
    width: 150px;
  }
  .cake_catches {
    margin: 0 10px 10px 10px;
  }
    .cake_catches h3 {
      padding-left: 23px;
      background-size: 20px;
      font-size: 130%;
      line-height: 1.4;
    }
    .cake_catches p {
      margin: 0 0 0 20px;
      font-size: 100%;
    }
  #price_table {
    margin: 5px auto;
  }
  #price_table th,
  #price_table td {
  	padding: 5px 10px;
  }
  #cake_knowledge,
  #cake_howto {
    padding: 15px 10px 10px;
  }
  #cake_knowledge p,
  #cake_howto li {
    font-size: 100%;
  }
  #cake_knowledge img,
  #cake_howto img {
    width: 125px;
  }
  #product-table td {
    padding: 3px 2px 6px;
    font-size: 80%;
  }
  #product-table img {
    width: 75px;
  }
}

#page_xmas {
  width: 900px;
  background: none;
}

.tel-area {
  padding: 12px 0;
  background: #cc0000;
  font-weight: bold;
  font-size: 150%;
  text-align: center;
}
.tel-area .pre-tel {
  color: white;
}
.tel-area .tel {
  font-size: 120%;
  color: white;
}
.after-att {
  margin: 10px 0;
}
.after-att p {
  margin: 5px 0;
}