@charset "UTF-8";

/* general */
* {margin: 0;padding: 0;}
body {color: #666;background: #fff;font-family: Meiryo,Verdana,Arial,sans-serif;font-size: 14px;}
a {color: #666;text-decoration: none;}
a:hover {color: #8fabbe;text-decoration: none;}
#content {margin: 0 auto;padding: 142px 0 34px;width: 700px;line-height: 150%;}
.center {text-align: center;}
.right {text-align: right;}
.float-left {float: left;}
.float-right {float: right;}
.title {color: #8fabbe;font-weight: bold;}

/* image */
.photo-center {margin: 0 auto;display: block;}
.outline {padding: 6px;border: solid 1px #a9a9a9;position: relative;}
.shadow {box-shadow: 8px 8px 5px -5px rgba(0, 0, 0, 0.2);}
.outline4print {border: solid 1px #a9a9a9;}

/* header */
#header {position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: auto;background-color: #fff;opacity: 0.95;}
#logo {margin: 0 auto 1em;padding: 8px 0 3px;text-align: center;}

#menu {padding: 0 0 5px;}
#menu a {padding: 5px 18px 5px;border-left: solid 1px #ccc;}
#menu a:nth-last-child(1) {border-right: solid 1px #ccc;}
#menu a:link, #menu a:visited {color: #666;text-decoration: none;}
#menu a:hover, #menu a.active {color: #d25a81;text-decoration: none;}

#sub-menu {margin: 5px 0 5px;padding: 5px 18px 5px;color: #999;text-align: center;}
#sub-menu a {margin-right: 1em;}
#sub-menu a:link, #sub-menu a:visited {color: #999;text-decoration: none;}
#sub-menu a:hover, #sub-menu a.active {border-bottom: solid 1px #d25a81;}

/* diary */
#diary-content {margin: 0 0 34px;}
#diary-content a:link, #diary-content a:visited {color: #d25a81;text-decoration: none;}
#diary-content a:hover {color: #d25a81;text-decoration: underline;}
#diary-title {margin-top: 5px;margin-bottom: 20px;padding-left: 5px;border-bottom: dashed 1px #d25a81;border-left: solid 5px #d25a81;line-height: 150%;}
#diary-nav a {padding: 5px 18px 5px;display: inline-block;}
#diary-nav a:nth-last-child(1) {border-left: solid 1px #ccc;}

#diary-content ul.restaurant-list {margin: 20px 0;float: left;list-style-type: none;color: #666;}
#diary-content ul.restaurant-list .table-left {padding: 0 40px 0 0;display: table-cell;vertical-align: top}
#diary-content ul.restaurant-list .table-right {display: table-cell;vertical-align: top}
#diary-content ul.restaurant-list .line {padding: 15px 0 0;border-bottom: dotted 2px #ccc;}

#diary-content .line {border-bottom: dashed 1px #8fabbe;}
#diary-content li {margin: 0;list-style-type: square;list-style-position: inside;color: #8fabbe;}
#diary-content li span {color: #666;}

/* photos */
#gallery {padding: 142px 0 34px;}
#gallery ul li {margin: 0 0 22px;color: #fff;text-align: center;}

/* tips */
#tips-content {margin: 0 0 34px;line-height: 150%;}
#tips-content .index {margin-bottom: 3px;line-height: 150%;color: #8fabbe;font-weight: bold;}
#tips-content ul.contents li {padding: 0 0 0 25px;list-style-type: none;}
#tips-content ul.contents li:before {content: '\0BB';margin-right: 10px;color: #aaa;}
#tips-content .title {padding-bottom: 5px;border-bottom: dashed 1px #ddd;color: #8fabbe;font-weight: bold;}
.tips {padding: 0 25% 0;}
.horizontally {position: relative;left: 50%;float: left;}
.horizontally ul li {padding: 0 20px 0 0;position: relative;left: -50%;float: left;list-style-type: none;}

/* archive */
#archive {margin: 0;padding: 0;}
.categories-wrap {padding: 10px 0 20px 25px;width: 670px;overflow-x: hidden;overflow-y: hidden;}
.categories-posts {margin: 0;padding: 0;height: 210px;width: 686px;padding-right: 17px;overflow-y: scroll;}
ul.categories-posts li {padding: 0;width: 670px;list-style: none;}
ul.categories-posts li:before {content: '\0BB';margin-right: 10px;color: #aaa;}

/* info */
ul.info-more {padding-right: 15px;list-style: none;text-align: right;}
ul.info-more li a.info-arrow {position: relative;}
ul.info-more li a.info-arrow:before {content: '\0BB';margin-right: 10px;color: #d25a81;}
ul.info-more li a:link, #menu a:visited {color: #666;text-decoration: none;}
ul.info-more li a:hover, #menu a.active {color: #d25a81;text-decoration: none;}

#magazine {padding: 0 2% 0;text-align: center;}
ul.magazine-list li {margin: 20px 2% 30px;float: left;width: 132px;height: 160px;line-height: 100%;list-style-type: none;color: #666;font-size: 11px;}

ol.question {padding: 0 15% 0;}
ol.question li {padding-bottom: 10px;list-style-type: decimal;}
ul.answer li {padding-top: 1em;list-style-type: none;list-style-position: inside;color: #666;border-top: dotted 2px #8fabbe;}

/* restaurants */
#restaurant {padding: 0 0 0 10%;}
#restaurant ul.restaurant-list li {margin: 20px 2% 30px;float: left;list-style-type: none;color: #666;}
#restaurant ul.restaurant-list .table-left {display: table-cell;width: 320px;vertical-align: top}
#restaurant ul.restaurant-list .table-right {display: table-cell;vertical-align: top}
#restaurant .line {border-bottom: dashed 1px #ccc;width: 550px;}
.restaurant-rating {color: #d25a81;}

.page-numbers a {padding: 4px 12px 4px;border: solid 1px #ddd;}
.page-numbers a:link, .page-numbers a:visited {color: #666;text-decoration: none;}
.page-numbers a:hover, .page-numbers a.active {color: #666;text-decoration: none;background-color: #eee;}

ul.restaurant-list li a:link, #menu a:visited {color: #666;text-decoration: none;}
ul.restaurant-list li a:hover, #menu a.active {color: #d25a81;text-decoration: none;}

/* recipes */
#recipe {margin: 0 0 34px;text-align: center;}
#recipe-content {margin: 0 0 34px}
#recipe-content a:link, #recipe-content a:visited {color: #68c0ca;text-decoration: none;}
#recipe-content a:hover {color: #68c0ca;text-decoration: underline;}
#recipe-content ol li {padding-bottom: 10px;}
.recipe-left {float: left;width: 25%;}
.recipe-right {float: right;width: 70%;}
.recipe-title {color: #68c0ca;font-weight: bold;font-size: 13px;}
.recipe-info {margin: 5px 0;padding: 0 8px;border-left: solid 1px #ccc;display: block;float: left;width: 110px;color: #666;}
.recipe-tip {color: #68c0ca;}
ul.recipe-list li {margin: 20px 2% 65px;float: left;width: 132px;height: 160px;line-height: 150%;list-style-type: none;color: #666;}

/* movies */
#movie {margin: 0 0 34px;}
#movie a:link, .movie-title a:visited {color: #749bea;text-decoration: none;}
#movie a:hover {color: #b8caee;text-decoration: none;}
#movie-index {padding: 8px 0;border-bottom: dotted 1px #ccc;line-height:150%;color: #36c;background-color: #fff;font-weight:bold;font-size: 14px;text-align: center;}
#movie-index a {padding: 0 2px;}
#movie-index a:link, #movie-index a:visited {color: #36c;text-decoration: none;}
#movie-index a:hover {color: #36c;background-color: #f5f5f5;text-decoration: none;}
#movie .rating {color: #749bea;}
.movie-line {border-top: dotted 2px #7da9cc;}

/* miscellaneous */
.inside-box01 {margin: 0em 2em;padding: 2em 1em;border: solid 1px #ccc;line-height: 150%;} /* general citations */
.inside-box02 {margin: 0em 2em;padding: 2em 1em;line-height: 150%;background-color: #f7f7f7;} /* mainly tech-related */
.inside-box03 {margin: 0em 2em;padding: 1em 0 1em 1em;border: dashed 2px #ccc;line-height: 150%;} /* recipe in diary */
ol.number li {margin: 0em 2em;}
ul.disc li {margin: 0em 2em;list-style-type: disc;}
.cited-line {padding: 3px;border-bottom: solid 1px #ddd;}
.comment {color: #999;font-size: 11px;}

/* footer */
#footer {position: relative;bottom: 0;width: 100%;color: #999;font-size: 10px;text-align:center;}
#rss {margin-left: 3px;}

@media only screen and (min-width:769px) and (max-width:1080px) {
  * {margin: 0;padding: 0;}
  body {width: 100% !important;font-size: 100% !important;}
  #header {width: 100% !important;height: auto !important;}
  #logo {margin: 0 !important;padding: 10px 0 10px !important;text-align: center !important;}
  #menu a {padding: 8px 0 !important;width: 25%;border-left: solid 1px #ccc;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;float: left;text-align: center;}
  #menu a:nth-last-child(1) {border-right: solid 1px #ccc;}
  #sub-menu {padding: 2em 0 0 0;}
  #content {width: 98% !important;}
  img, video, object {max-width: 95% !important;height: auto !important;}
  iframe, object, embed {max-width: 95%;height: auto}
  #diary-content ul.restaurant-list .table-left {display: table-cell;width: 50%;vertical-align: top}
  #diary-content ul.restaurant-list .table-right {display: table-cell;width: 50%;vertical-align: top}
  #magazine {font-size: 100%;}
  ul.magazine-list li {font-size: 12px;}
  ol.question {padding: 0 10% 0;}
  #restaurant ul.restaurant-list .table-left {display: table-cell;width: 50%;vertical-align: top}
  #restaurant ul.restaurant-list .table-right {display: table-cell;width: 50%;vertical-align: top}
  ul.recipe-list li {margin: 20px 2% 20% !important;}
  .recipe-left {padding: 0 0 1em 0;width: 100%;text-align: center;}
  .recipe-right {width: 100%;}
  .recipe-title {font-size: 100%;}
  #movie {margin: 20% 0 0 0;}
  #movie-index {font-size: 100%;}
}

@media only screen and (max-width:767px) {
  * {margin: 0;padding: 0;}
  body {width: 100% !important;font-size: 100% !important;}
  #header {width: 100% !important;height: auto !important;}
  #logo {margin: 0 !important;padding: 10px 0 10px !important;text-align: center !important;}
  #menu a {padding: 8px 0 !important;width: 25%;border-left: solid 1px #ccc;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;float: left;text-align: center;}
  #menu a:nth-last-child(1) {border-right: solid 1px #ccc;}
  #sub-menu {padding: 2em 0 0 0;}
  #content {width: 98% !important;}
  img, video, object {max-width: 95% !important;height: auto !important;}
  iframe, object, embed {max-width: 95%;height: auto}
  #diary-content ul.restaurant-list .table-left {display: table-cell;width: 50%;vertical-align: top}
  #diary-content ul.restaurant-list .table-right {display: table-cell;width: 50%;vertical-align: top}
  #tips-content {width: 98% !important;}
  .tips {padding: 0 5% 0 !important;}
  .categories-wrap {width: 98% !important;}
  .categories-posts {width: 100% !important;}
  ul.categories-posts li {width: 98% !important;}
  #magazine {font-size: 100%;}
  ul.magazine-list li {font-size: 12px;}
  ol.question {padding: 0 10% 0;}
  #restaurant ul.restaurant-list .table-left {display: table-cell;width: 50%;vertical-align: top}
  #restaurant ul.restaurant-list .table-right {display: table-cell;width: 50%;vertical-align: top}
  ul.recipe-list li {margin: 20px 2% 20% !important;}
  .recipe-left {padding: 0 0 1em 0;width: 100%;text-align: center;}
  .recipe-right {width: 100%;}
  .recipe-title {font-size: 100%;}
  #movie {margin: 20% 0 0 0;}
  #movie-index {font-size: 100%;}
}
@media print{
  #header {position: relative !important;}
  #content {padding: 35px 0 34px !important;}
}