@charset "utf-8";
/*
Theme Name: ton_cms_22
Theme URI: http://www.total-office-net.com
Description: トータルオフィスネット
Author: TotalOfficeNet
*/

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
　共通設定
　およびスマートフォン向けレイアウト
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
p {
	color: #666;
}
a {
	color: #FF7600;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ul, ol {
	margin: 1em;
	padding-left: 1.5em;
}
ul {
	list-style: circle;
}
ol {
	list-style: decimal;
}
li {
	line-height: 1.5em;
}
.cboth {
	clear: both;
}
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%;
}
.entry-content img {
	margin: 5px;
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto;
}
embed,
iframe,
object,
video {
	max-width: 100%;
}
blockquote {
	padding: 1em;
	margin-bottom: 1em;
	background-color: #C4F66F;
}
textarea {
	width: 100%;
	max-width: 400px;
}
th, td, table.tablepress th, table.tablepress td {
	line-height: 1.5em;
	padding:4px 2px 2px 4px;
	border:1px solid #619A00;
}
td.fancy_title {
	border: none;
}
table {
	padding:0px;
	border-collapse:collapse;
	width: 100%;
}
table.tablepress tr.odd td {
	background-color:#C4F66F;
}
th {
	padding:4px 2px 2px 4px;
	background-color:#619A00;
	border:1px solid #619A00;
	border-bottom: 1px solid #FFF;
	text-align:center;
	font-weight: normal;
	color:#ffe100;
}
th.last-bottom {
	border-bottom: 1px solid #619A00;
}
.entry-content {
	max-width: 100% !important;
	padding: 0 5px;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	margin: 0 auto;
	display: block;
}
div.detail-link {
	float:right;
	margin: 3px 0;
}
div.detail-link a {
	display: block;
	padding: 3px 5px;
	background-color: #ff9840;
	color: white;
}
div.detail-link a:hover {
	background-color: #009944;
	text-decoration: none;
}
.price-red {
	color: red;
}

/*=====================================================
 Instagramフォローボタン
=====================================================*/
#top-sns, #top-sns-2 {
	text-align: center;
	margin-bottom: 10px;
}
#ins-btn, #tw-btn {
	margin: 5px;
}
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 28px;/*高さ*/
  width: 119px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
/*  font-size: 25px;文字のサイズ*/
  line-height: 28px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 20px;/*アイコンサイズ*/
  position: relative;
  top: 3px;/*アイコン位置の微調整*/
  padding-right: 5px;
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.3em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #00bcd4;
    font-size: 1.2em;
    transition: .4s;
  }

.square_btn:hover {
    background: #1ec7bb;
    text-decoration: none;
}


/*=====================================================
 body
=====================================================*/
body {
	width: 100%;
	font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", "Arial", sans-serif, Georgia, "Bitstream Charter", serif;
	font-size: 13px;
	color: #000;
}

/*=====================================================
 header
=====================================================*/
header {
	padding-top: 2px;
	text-align: center;
}

/*==========================================
 nav
===========================================*/
nav {
	margin: 5px 0;
	overflow: hidden;
}
nav ul {
	margin: 0;
	padding: 0;
}
nav ul li {
	float: left;
	width: 50%;
	border-bottom: 1px solid #ff9840;
	line-height: 2em;
	text-align: center;
}
nav ul li a {
	color: #666;
	font-weight: bold;
}
nav ul li a:hover {
	background-color: #FF7600;
	color: #FFFFFF;
	text-decoration: none;
}
nav ul li:nth-child(odd) {
	width: 49%;
	margin-left: 1px;
	border-right: 1px solid #ff9840;
}
nav ul li:nth-child(1), nav ul li:nth-child(2){
	border-top: 1px solid #ff9840;
}
nav ul li a{
	display: block;
	width: 100%;
}
nav ul#menu-menu li.current-menu-item {
	background-color: #619a00;
}
nav ul#menu-menu li.current-menu-item a {
	color: #ffe100;
}


/*==========================================
 コンテンツエリアのスタイル
===========================================*/
div#stage {
	overflow: hidden;
}
div#contents, div#sidebar {
	padding: 5px 0 10px;
}
div.breadcrumb {
	margin: 10px;
}
div#contents section {
	margin-bottom: 5px;
	overflow: hidden;
}
.content-inner {
	padding: 5px;
	overflow: hidden;
}
div#free-space {
	margin: 5px;
}
div#contents p, div#sidebar p {
	margin: 0 0 1em 0;
	line-height: 1.4em;
}
body.page-id-18 div#contents div.entry-content p {
	margin: 0 0 0.5em 0;
	line-height: 1.1em;
}
div#contents p.top-comment {
	font-size: 15px;
}
div.entry-info {
	padding: 3px;
	text-align: right;
	margin-bottom: 1em;
}
.entry-content p, .entry-content li {
	font-size: 14px;
}
div.content-image img {
	width: 50%;
	padding: 0 5px 0 0;
	float: left;
}
section#blog-space ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
section#blog-space li {
	padding: 5px 5px 3px 15px;
	background: url(images/wine-icon.gif) 0 center no-repeat;
	border-bottom: 1px dotted #666;
}
section#aboutus-space #top-info {
	width: 48%;
	padding-right: 1%;
	float: left;
}
section#aboutus-space th, section#side-aboutus th {
	width: 30%;
	line-height: 1.8em;
	text-align: right;
}
section#aboutus-space td {
	width: 75%;
	vertical-align: middle;
}
.page-id-14 table.aboutus tr:last-child td, section#aboutus-space tr:last-child td {
	border: none;;
}
section#aboutus-space div#top-map {
	width: 50%;
	float: right;
}
table.tablepress th.column-1, table.tablepress th.column-2 {
	border-right:1px solid #FFF;
}
table.tablepress thead th {
	background-color: #619A00
}
table.portrait td {
	text-align: center;
	border: none;
}
.page-id-12 #contents table td {
	border: none;
	vertical-align: middle;
}
.page-id-12 #contents table td.table-date {
	min-width: 180px;
}
.page-id-12 #contents table td.table-date, .page-id-12 #contents table td.table-contents {
	border-bottom: 1px dotted #666;
}

.page-id-20 .entry-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-id-20 .entry-content ul ul {
	list-style: circle;
	padding-left: 1.5em;
}

.nav-previous, nav-next{
	padding: 3px;
}
.sns {
	clear: both;
}

/*==========================================
 ワイン一覧
===========================================*/
div#wine-list {
	text-align: center;
}
div#wine-list article {
	float: left;
	width: 48%;
	padding: 0 2px 10px;
}
div#wine-list article:nth-of-type(odd) {
	clear: both;
}
div#wine-list p {
	margin: 0;
}
div#wine-list p.wine-title {
	color: #FF7600;
	font-weight:bold;
}

/*==========================================
 hタグ
===========================================*/
div#contents h1, div#contents h2, div#contents h3, div#contents h4 {
	clear: both;
	margin-bottom: 5px;
	padding: 5px;
	font-weight: normal;
}
div#contents h1 {
	padding-left: 18px;
	background: #FF7600 url(images/h1-title.png) repeat-y;
	border: 1px solid #666;
	font-size: 15px;
	color: #FFF;
}
div#contents h2 {
	border-left: 10px solid #FF7600;
	border-bottom: 1px solid #FF7600;
	font-size: 15px;
	color: #FF7600;
}
div#contents h2.top-h2 {
	padding-left: 18px;
	background: #FF7600 url(images/h1-title.png) repeat-y;
	border: 1px solid #666;
	font-size: 15px;
	color: #FFF;
}
div#contents h3 {
	margin: 0 0 5px 0;
	padding: 0 0 0 30px;
	background: url(images/contents_h3.gif) 0 0 no-repeat;
	color: #FF7600;
	font-size: 14px;
	line-height: 25px;
}
div#contents h4 {
	border-left: 5px solid #FF7600;
	color: #FF7600;
}

/*==========================================
 サイドバーのスタイル
===========================================*/
div#sidebar h2 {
	margin-bottom: 5px;
	padding: 5px;
	border: 1px solid #ff9840;
	border-right: 5px solid #ff9840;
	border-left: 5px solid #ff9840;
	color: #ff9840;
	font-size: 1.3em;
	font-weight: normal;
}
div#sidebar img {
	max-width: 100%;
	height: auto;
}
section#latest-blog, section#blog-category, section#side-tag {
	margin-bottom: 5px;
	overflow: hidden;
}
section#side-banner {
	text-align: center;
}
section#side-aboutus {
	overflow: hidden;
}
section#side-tag a {
	padding: 2px;
}
div#sidebar p {
	padding: 3px;
}
div#qr-rss {
	text-align: center;
}
div#qr-rss p {
	padding: 0;
}
div#rss {
	padding: 0 0 0 16px;
	background: url(images/rss.png) 0 center no-repeat;
}
input#search-box {
	width: 75%
}
input#search-button {
	width: 20%
}

/*==========================================
 カレンダー部分のデザイン
===========================================*/
section#side-calendar table	{
	margin: 0 0 0 1px;
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
section#side-calendar caption {
	color: #FF7600;
}
section#side-calendar th, section#side-calendar td {
	padding: 5px 0;
	border: solid 1px #FFB473;
}
section#side-calendar caption {
	padding: 3px 0;
}
section#side-calendar tfoot td {
	border: none;
}
section#side-calendar tfoot td#prev	{
	text-align: left;
}
section#side-calendar tfoot td#next	{
	text-align: right;
}


/*==========================================
 ページトップへのスタイル
===========================================*/
a#pagetopBtn {
	width: 40px;
	height: 22px;
	padding: 3px;
	background-color: #ff9840;
	position: fixed;
	bottom: 10px;
	right: 1px;
	color: white;
	font-size: 0.8em;
	text-align: center;
	border: 1px solid #FFF;
}
a:hover#pagetopBtn {
	background-color: #009944;
	text-decoration: none;
}

/*==========================================
 フッターのスタイル
===========================================*/
footer {
	border-top: 4px solid #ff9840;
	clear: both;
	padding: 5px;
	text-align: center;
}
footer div {
	margin: 10px;
}
footer div#footer-tag {
	padding-bottom: 5px;
	overflow: hidden;
}
div#footer-tag a {
	display: block;
	float: left;
	margin: 2px;
	padding: 3px 5px;
	background-color: #ff9840;
	font-size: 12px !important;
	color: white;
}
div#footer-tag a:hover {
	background-color: #009944;
	text-decoration: none;
}
footer small {
	font-size: 0.6em;
}

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
　メディアクエリによる切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media only screen and (min-width: 615px) {
nav ul {
	margin: 0;
	padding: 0;
}
nav ul#menu-menu li {
	float:left;
	width:15%;
	margin: 0;
	border: none;
	border-left: 1px solid #ff9840;
}
nav ul#menu-menu li:last-child {
	border-right: 1px solid #ff9840;
}
nav ul#menu-menu a {
	display: block;
	height:2em;
	line-height: 2em;
	font-size: 13px;
	font-weight: normal;
}
nav ul#menu-menu li#menu-item-24 {
	width:10%;
}
section#top-1, section#top-3, section#top-5, section#blog-space, div#free-space {
	clear: both;
	width: 49%;
	float: left;
}
section#top-2, section#top-4, section#top-6, section#aboutus-space, div#sns-space {
	width: 49%;
	float: left;
	margin-left: 1%;
}
div#wine-list article {
	width: 24%;
}
div#wine-list article:nth-of-type(odd) {
	clear: none;
}
div#wine-list article:nth-of-type(4n+1) {
	clear: both;
}
}

@media only screen and (min-width: 745px) {
div#logo{
	float: left;
}
div#banner{
	float: right;
	margin-top: 5px;
}
div#contents {
	width: 74%;
	padding: 0 5px;
	float: right;
}
body.home div#contents {
	width: 100%;
	float: none;
}
div#sidebar {
	width: 23%;
	padding-right: 5px;
	float: left;
}
div#qr-rss {
	clear: both;
	width: 100%;
}
input#search-box {
	width: 65%
}
input#search-button {
	width: 29%
}
}

@media only screen and (min-width: 900px) {
div#stage, div#footer-tag {
	width: 900px;
	margin: 0 auto;
}
header {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}
}