/* カスタム CSS をここに入力してください */

/*横並びメニュー　トップ*/
#nav {
  list-style: none;
  overflow: hidden;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #FFF;
  float: left;
}

#nav li a {
  text-decoration: none;
  color: #666666;
  }

/*ウィジェットバナー*/
.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding: 0;
  /*文字の装飾*/
  color: white;/*文字を白に*/
     }

.example img {
  width: 100%;
  }

/*ヘッダーバナー*/
.example1 {
  position: relative;
  }

.example1 p {
  position: absolute;
  top: 65%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  background-color: rgba(255,255,255,0.7);
  padding: 0px 20px;
  }

.example1 img {
  width: 100%;
  }

/*画像を大きく表示*/
#contentswrap {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translatex(-50%);
	margin: 0 auto;
	max-width: 800px;
}

img {
	display: block;
	margin: 0 auto;
}	

/*ボタン*/
#btn1 {
    display: inline-block;
    padding: 0.3em 0.5em;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #ffffff;
    border-radius: 3px;
    transition: .4s;
}

#btn1:hover {
    background: #ffffff;
    color: white;
   opacity:0.6;
}




/*グーグルフォント*/

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');



/* パソコンで見たときは"pc"のidがついたコンテンツが表示される */
#pc {
	display: block !important;
}

#sp {
	display: none !important;
}

/* スマートフォンで見たときは"sp"のidがついたコンテンツが表示される */
@media only screen and (max-width: 750px) {
	#pc {
		display: none !important;
	}
	
	#sp {
		display: block !important;
	}
}


/*ボタン1　グラデーション*/
#square_btn1{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #FFF;
    background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
    background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
    font-size: 12px;
}

#square_btn1:hover{
    background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 70%);
    background-image: linear-gradient(#6795fd 0%, #67ceff 70%);
}

/*ボタン2 フラット*/
#square_btn2 {
    position: relative;
    display: inline-block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFF;
    background: #07093D;
    font-size: 12px;
  }

#square_btn2:hover {
    background: #1ec7bb;
}


/*ボタン３　シンプル 黒文字*/
#square_btn3 {
    display: inline-block;
    padding: 0.3em 2em;
    text-decoration: none;
    color: #666666;
    border: solid 1px #666666;
    font-size: 12px;
}

#square_btn3:hover {
    background: #666666;
    color: white;
}

/*ボタン４　シンプル 白文字*/
#square_btn4 {
    display: inline-block;
    padding: 0.3em 2em;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #ffffff;
    font-size: 12px;
}

#square_btn4:hover {
    background: #ffffff;
    color: white;
}

/*画像の上に文字　中央*/
#image-text {
  position: relative;
    }

#image-text p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color:#ffffff;
  /*文字の装飾は省略*/
  }

#image-text img {
  width: 100vw;
  }

/*固定ページのタイトルを非表示*/
#content .page-title,
#content .entry-title
{display:none}

/*画像の上に文字*/
#example {
  position: relative;
  }

#example p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  font-size: 24px;
  color:#ffffff;
 
  

  
  }

#example img {
  width: 100%;
  }

/*背景グラデーション*/
/*gradation-overray6*/
#box-grd8 {
background: -moz-linear-gradient(65deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2018/12/grape-senset-1.jpg);
background: -webkit-linear-gradient(65deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2018/12/grape-senset-1.jpg);
background: linear-gradient(25deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2018/12/grape-senset-1.jpg);
background-size:cover;

/*以下グラデーションとは関係のない部分*/
padding: 10px;
color: #FFF;
font-size: 16px; 
  line-height: 5px
}

#box-grd8 p {
    margin: 0; 
    padding: 0;
}


/*画像と文字*/
#row-4 {
	position: relative;
	background: url(https://winebooks.jp/wp-content/uploads/2018/12/DSC_0005.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: 70%;
	padding: 50px 0;
	opacity: .8;
	height :480px;
	margin: 0 -20%;
	padding: 0 20%;
}

@media screen and (max-width: 767px) {
	#row-4 {
		background: url(https://winebooks.jp/wp-content/uploads/2018/12/DSC_0005.jpg) no-repeat;
		background-size: contain;
		width: 140%;
		height: 500px;
		margin: 0 -20%;
		padding: 0 20%;
		opacity: 1;
	}
}

#row-4-in {
	position: absolute;
	color: #ffffff;
	top: 50%;
	left: 60%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 30px;
	line-height: 180%;
	background: rgba(27,28,128,0.7);
	background-position: right;
}

@media screen and (max-width: 767px) {
	#row-4-in {
		position: absolute;
		color: #ffffff;
		top: 80%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		margin: 0;
		padding: 10px;
		line-height: 180%;
		background: rgba(27,28,128,0.4);
		background-position: center;
		font-size: 90%;
		width: 75%;
	}
}

/*アイフレーム*/
.iframe-content {
   position: relative;
 width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

/*ヘッダー画像のパディング*/
header .inner {
	padding: 0.2em 0em 0em 0em !important;
}

/*ヘッダー*/
h1.site-title,
div.site-title { margin: 0 1.38888em  !important;}

.fixed .site-title {
		min-height: 50px !important;
		margin: 0 .3409em;
	}

@media screen and (min-width: 767px) {
h1.site-title,
	div.site-title {
    margin: 0 ;
		font-size: 44px;
		width: auto;
		position: left;
    left:50%;
    margin-left: -150px !important;
   
	}
}

/*h1の大きさ*/
#content .entry-title {
    font-size: 16px !important;
    font-weight: normal;
    margin: 0 .83333em .83333em;
  line-height: normal;}


/*横並びメニュー　カテゴリ*/
#nav2 {
  list-style: none;
  overflow: hidden;
}
 
#nav2 li {
  width: 70px;
  text-align: center;
  background-color: #ffffff;
  float: left;
}
 
#nav2 li a {
  text-decoration: none;
  color: #333333;
  }


/*画像の上に文字*/
#box-grd14 {
background: -moz-linear-gradient(65deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2019/06/DSC_2223.jpg);
background: -webkit-linear-gradient(65deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2019/06/DSC_2223.jpg);
background: linear-gradient(25deg, rgba(102,102,102, 0.6), rgba(0,0,0, 0.4)),url(https://winebooks.jp/wp-content/uploads/2019/06/DSC_2223.jpg);
background-size:cover;

/*以下グラデーションとは関係のない部分*/
padding: 20px;
color: #FFF;
}

#box-grd14 p {
    margin: 0; 
    padding: 0;
}


/*amazon pay*/
@media only screen and (min-width: 768px) {
        .widget-area {
                display: block;
        }
}

/*TABLE PRESS*/
div.myScrollBox {
  overflow: scroll;
  white-space: nowrap;
}

/*YOUTUBE レスポンシブ*/
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*youtube*/
.yt{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.yt iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*その１ 交差線でかこむ*/
#box1{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
#box1:before, #box1:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
#box1:before {left: 10px;}
#box1:after {right: 10px;}
#box1 p {
    margin: 0; 
    padding: 0;
}

/*その２　吹き出し*/
#box2 {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 20px 20px;
	min-width: 120px;
 	max-width: 100%;
 	color: #ffffff;
	font-size: 16px;
	background: #031634;
}

#box2:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #031634;
  
 
}

#box2 p {
	margin: 0;
	padding: 0;
}

/*BOX3*/

#box3{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
#box3 p {
    margin: 0; 
    padding: 0;
}

/*tableのスクロール*/
table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}