@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/


body	{margin: 0;
	max-width:1300px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	background-image:url(http://workshop-mizue.com/wp-content/themes/mytheme/bg2.jpg);
	background-size:contain;       /* 画像のサイズを指定    */
	background-repeat:repeat-y;
	background-position: center;
  background-attachment: fixed;　 /* 画像を固定  */
	}

.container	{max-width: 650px;
	margin-left: auto;
	margin-right: auto
	}	

/* 記事*/
article	{margin-bottom: 40px;}


/* 固定ページのタイトルを非表示 */
article h1 
{ display: none; }


/*
article h1	{margin: 0;
	font-size: 25px;
	font-weight: normal;
	color: #999999}

article h1 a	{color: #000000;
	text-decoration: none}
 */

/* 記事の付加情報 */
.postinfo	{margin-top: 15px;
	font-size: 14px}

.postinfo a	{color: #000000;
	text-decoration: none}

.postinfo .postcat	{margin-left: 20px}

.postinfo .postcom	{margin-left: 20px}

.postinfo i	{color: #888888}


/* 前後の記事へのリンク
.pagenav a	{padding: 5px 10px;
	border: solid 1px #cccccc;
	border-radius: 10px;
	color: #666666;
	font-size: 12px;
	text-decoration: none}

.pagenav .old a	{float: left}

.pagenav .new a	{float: right}

.pagenav	{overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px}
 */

/* ヘッダー */
header	{margin-bottom: 0px}

header a	{
	text-decoration: none}

.siteinfo	{overflow: hidden;
	padding-top: 14px;
	padding-bottom: 14px
}

/*.siteinfo h1	{  使わないので「header.php」から「h1」を削除しました
	text-indent:100%;		  文字を非表示 
	white-space:nowrap;		  文字を非表示 
	overflow:hidden;		  文字を非表示 
}
*/
.siteinfo p	{
	margin:0;
	margin-left:40px;
	font-size: 14px}

/* ヘッダー画像 */


header img	{width: 100%;
	height: auto;
	margin:0px
	}

/*メニュー1 ナビゲーションメニュー */

.menu1 nav {
   height: 30px;
	background-color:#66cccc;
	margin-bottom:5px;
	padding-right:50px;
}

.menu1 nav ul	{list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	overflow:hidden;
	} 

.menu1 nav li	{float: right;
	margin-right:10px;
	margin-left:10px}

.menu1 nav li a	{display: block;
	padding-top: 6px;
	padding-bottom: 0px;
	border-bottom: solid 2px transparent}

.menu1 nav li a:hover	{border-bottom-color: #ff66ff}　/* マウスオーバーで下線の色を表示*/
 
.menu1 nav::after {
    content: "";
    display: table;
    clear: both;
}

.menu1 nav li.current-menu-item a /* 表示中のページの色を指定*/
	{border-bottom-color: #009999}


/* 以下、ドロップダウン 
 
.menu1 li.menu-item-has-children {
	display:block;
    position: relative;
}
 
.menu1 li.menu-item-has-children li{
	float:left}

.menu1 li.menu-item-has-children ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 1px;
    width: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
*/ 
/* プルダウンメニューの高さ
.menu1 li.menu-item-has-children:hover ul {
    visibility: visible;
    opacity: 1;
    top: 5px;
		height:105px;		
	width:80px;
	background-color: #66cccc;
	font-size:12px
}
*/ 
/* 下矢印 
.menu1 li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
*/


/* パンくず */
.crumbs {

	padding-left:50px;
	margin-bottom:20px;
	
}

/* フッター */

footer	{margin-top: 40px;
}

/* フッター画像 */
.footer_container{display:inline-block;/* インラインブロック要素にする */
	max-width:1300px;
	margin-left: auto;
	margin-right: auto;
}

.footer_container img	{
	display: block;/*画像の下の余白を消す*/
	width: 100%;
	height: auto;
	margin:0px
	padding:0px
	}

.footer_container p{
	text-align:center;/* 親要素に記述することでインライン要素を右揃えにしたり中央揃えにしたりできるプロパティ */
	height:30px;
	background-color:#66cccc;
	color:#000000;
	margin:0px;
	padding:0px
	}


/* 本文中の画像 */
article img	{border: none;
	max-width: 100%;
	height: auto}

.aligncenter	{display: block;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto}

.alignright	{float: right;
	margin-bottom: 30px;
	margin-left: 30px}

.alignleft	{float: left;
	margin-bottom: 30px;
	margin-right: 30px}

.wp-caption	{max-width: 100%}

.wp-caption-text	{margin: 0;
	color: #666666;
	font-size: 10px;
	text-align: center}

/*ウィジェット見出し */
.blogmenu1 h2{
	font-size:16px}

.categorymenu h2{
	font-size:16px}

.categorymenu h1{
	display:none
}

/* トップページ　お知らせ（ウィジェット1） */

.blogmenu1{
	border: 1px solid #f0b8bf;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 10px;	/* 内側の余白 */
	position: relative;
	margin-top:15px;
}
.blogmenu1:before{
	background-color: rgba(255,255,255,0.7);  /* 文字部分背景色・透過度 */
	border-radius: 5px;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 5px;
	z-index: -1;
}
.blogmenu1:after{
	background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 5px, #fcf0f1 0, #fcf0f1 10px); /* ストライプの色 */
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -2;
}


.blogmenu1 ul	{margin: 0;
	padding: 0;
	list-style: none;
	font-size:12px}

.blogmenu1 .widget li a	{display: list-item;
	padding: 5px 5px;
	color: #666666;
	font-size: 12px}

.blogmenu1 .widget li a:hover{
	color:#ff66ff
}

/* トップページ  */
.topcontainer{
	margin-top:0px
}

.topcontainer .top-info{
	border: 2px dotted #EAA8BF;	/* 線の太さ・種類・色 */
	margin: 30px 15px;	/* 外側の余白 上下・左右 */
	padding: 15px 20px;	/* 内側の余白 上下・左右 */
	position: relative;
	font-size:13px;
	line-height: 1.5
}
.topcontainer .top-info:before{
	content: '＊';
	color: #fff;	/* 左上の花の色 */
	font-size: 50px;	/* 左上の花のサイズ */
	font-weight: bold; 
	position: absolute;
	top: -38px;
	left: -25px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg); 
	-o-transform: rotate(20deg);
	text-shadow:  0 0 8px #eaa8bf, 0 0 6px #eaa8bf, 0 0 4px #eaa8bf, 0 0 2px #eaa8bf, 0 0 0.5px #eaa8bf;	/* 左上の花の縁取りの色 */
}
.topcontainer .top-info:after{
	content: '*';
	color: #fff;	/* 右下の花の色 */
	font-size: 50px;	/* 右下の花のサイズ */
	font-weight: bold; 
	position: absolute;
	bottom: -45px;
	right: -15px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg); 
	-o-transform: rotate(20deg);
	text-shadow:  0 0 8px #eaa8bf, 0 0 6px #eaa8bf, 0 0 4px #eaa8bf, 0 0 2px #eaa8bf, 0 0 0.5px #eaa8bf;	/* 右下の花の縁取りの色 */
}

/* トップページ　カレンダー（ウィジェット） */
.home .contents .calendaer{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	margin: 15px 10px; /* 外側の余白 上下・左右 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.home .contents .calendaer:before{
	background-color: #fff;
	content: 'イベント情報';
	padding: 2px 10px; /* タイトルの余白 上下・左右 */
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
.home .contents .calendaer:after{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* トップページ＆アイテム　（ウィジェット2） */
.container {
	list-style:none
}
.topitem{
	background-color: #F6D4D8;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
	list-style:none
}
.topitem:before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.topitem:after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	content: 'ハンドメイドITEM';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}

.home .contents h2{
	font-size:16px
}

.home .container li{
	list-style:none
}

.home .container  ul	{margin: 0;
	padding: 0;
	
	}

.home .container .widget li a	{display: list-item;
	padding: 5px 5px;
	color: #666666;
	font-size: 12px}

.home .container .widget li a:hover{
	color:#ff66ff
}
/* ブログsingle.php */

.blog-single-container{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.blog-single-container:after{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.blog-single-container h2{
	font-size:18px
}



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

.balloon1 p {
  margin: 0;
  padding: 0;
}

/* お問い合わせフォーム */
.wpcf7 input,
.wpcf7 textarea	{width: 100%;
	padding: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.wpcf7 input[type="submit"]
	{width: 150px;
	padding: 10px;
	border-radius:10px;
	border: none;
	box-shadow: 0 3px 0 #ddd;
	background-color: #66cccc;
	-webkit-appearance: none;
	cursor: pointer}

.wpcf7 input[type="submit"]:hover
	{background-color: #98dd6c}

.btn_send {
    text-align: left;
}

/* メディアクエリの設定 */
@media (min-width: 768px) {


/* ２段組 トップページ用*/
.home .topcontainer {max-width: 1000px;
	overflow:hidden;

	}

.home .contents .calendaer {width: 45%;
	float: left}

.blogmenu1	{width: 35%;
	float: right;
}
	

/* ２段組 BLOG	*/
.blog-cate-container	{max-width: 1000px;
	overflow:hidden;
	}	
	

.blog-cate-container .blog-cate-right {width:35%;
	float: right}

.blog-cate-container .blog-cate	{width: 50%;
	float: left}
	
	
	/* ２段組 ITEMカテゴリー index.php	*/
.item-cate-container	{max-width: 1000px;
	overflow:hidden;
	}	
	

.item-cate-container .item-list-content-right {width:35%;
	float: right}

.item-cate-container .item-list-content	{width: 60%;
	float: left}
	
}/* ２段組設定　終了	*/


/* コメント投稿フォーム */
#respond p	{margin-top: 0;
	margin-bottom: 20px;
	font-size: 12px}

#respond label	{font-size: 14px}

#respond input,
#respond textarea	{width: 100%;
	padding: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

#respond input[type="submit"]
	{width: 150px;
	padding: 10px;
		border: none;
		border-radius:10px;
	background-color: #66cccc;
	-webkit-appearance: none;
	cursor: pointer/* 指の形状でカーソルを表示 */
}

#respond input[type="submit"]:hover
	{background-color: #98dd6c}

/* コメント */
#comments footer	{background: none;
	margin: 0;
	color: #000000;
	font-size: 12px}

#comments footer a	{color: #000000}

#comments footer div	{display: inline}

#comments ul	{list-style: none;
	margin: 0;
	padding: 0}

#comments article	{border: dotted 1px #aaaaaa;
	margin-bottom: 10px;
	padding: 10px 20px 20px 20px}

#comments .comment-content	{margin-left: 30px}

/* ブログコメントsingle.php */
.blog-comment{
	margin:30px;
	text-align:left;

}

/* ITEMカテ・個別ページ　PCのみメニュー表示（モバイル非表示） */

.PhoneOnly{
  display:none;
}

/* ITEMカテゴリーページ　新作アイテム */

.container .newitem{
	margin-top:15px;
	border: 1px solid #ef858c;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 45px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
}
.container .newitem:before{
	background-color: #ef858c;	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: '新作アイテム情報♡';
	height: 25px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.container .newitem:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #ef858c transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}

.container .newitem li{
	font-size:13px;
	padding-top:10px
}
	
/* ブログカテゴリーページ左　最新投稿 */	
/* ブログカテゴリーページ右 */
.blog-cate-container .blogmenu1 .cat-item-10/*  カテゴリーから『ブログ』を非表示 */
{display:none;}


.blog-cate-container .blogmenu1{
	margin-top:0px;
	margin-bottom:20px
	
}
/* ブログカテゴリーページ左吹き出し見出し */
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 0 0 1em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
color:#ffffff;
  background: #ef858c;
  border-radius: 15px;
}

.blog-cate{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 0px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}


/* ブログカテゴリーページ左　最新投稿 */	
.inf-contact {
	font-size:14px;
	border: 10px solid #fcf0f1;	/* 内側の線の太さ・種類・色 */
	margin: 0 10px 10px 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
}
.inf-contact:before {
	border: 1px solid #f5d5da;	/* 外側の線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: -10px;
	right: -10px;
	z-index: -1;
}

/* ITEMカテゴリーページindex.php*/	


.search{
	margin-left:15px;
	font-size:12px;/* 検索 */
	width:90%
}
.item-list-content2{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.item-list-content2:after{
	background: none;
	border: 1px solid #f3cbd0;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.item-list-content h3{
	font-size:15px
}


.item-list-content-right{
	font-size:12px;
	margin:15 0 0 0;
	padding:0;
	width:70%;
}

/* アイテムカテゴリー見出しindex.php */
.item-bar {
  text-shadow: 0 0 5px white;
  border-left: solid 7px #ef858c;
 background: -webkit-repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 3px,#fcf0f1 3px, #fcf0f1 7px);
  background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 3px,#fcf0f1 3px, #fcf0f1 7px);
}

.item-bar h3{
	padding-left:10px
}

.flex{
    display: flex;
    justify-content: space-between;
}

.flex-txt{
	margin-bottom:20px
}

.flex-txt h4{
		display:block;
		margin-right:10px;
		width: 180px;
		font-size:13px;
		}
.flex-txt p{
		font-size:10px;
		}

.flex-img img{
	width:60%;
	margin-top:20px;
	margin-left:15px
}

/* アイテム作品個別ページ画像スライドsingle-item-cate2.php */
/*ラジオボタンを非表示にする*/
#product1-1,#product1-2,#product1-3,#product1-4,#product1-5{
   display: none;
}
.product-container .product-imgbox{
  max-width: 600px;
  min-height: 400px;
  position: relative;
}
.product-container .product-imgbox img{
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    transition: .4s;
}
.product-container ul{
    max-width: 800px;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.product-container li{
    width: 30%;
list-style-type:none;
}
.product-container li label{
    display:block;
}
.product-container li img{
    width: 100%;
    height:auto;
	cursor:pointer; /*オンマウス時にカーソルを指の形に*/
}

/*最初と1指定*/
#product1-1:checked ~ .product-imgbox img:nth-child(1){
  opacity: 1;
}
/*2の指定*/
#product1-2:checked ~ .product-imgbox img:nth-child(2){
  opacity: 1;
}
/*3の指定*/
#product1-3:checked ~ .product-imgbox img:nth-child(3){
  opacity: 1;
}
/*4の指定*/
#product1-4:checked ~ .product-imgbox img:nth-child(4){
  opacity: 1;
}
/*5の指定*/
#product1-5:checked ~ .product-imgbox img:nth-child(5){
  opacity: 1;
}
/*--実際の表示 重なっていることが分かりやすいようにopacityは0.2にしてあります--*/


/* アイテム作品個別ページ詳細タブsingle-item-cate2.php */
/*ラジオボタンを非表示にする*/
.tab-btn{
display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}

.tab-area{
width:100%;
margin: 0 auto;
}

.tab-list-wrap{
font-size:13px;
padding:0; /*デフォルトの値をクリア*/
margin: 0; /*デフォルトの値をクリア*/
list-style-type:none; /*デフォルトの値をクリア*/
display:flex; /*ボタンを横並びに*/
/*justify-content:space-between; ボタンを横幅いっぱいに配置*/
}
 
.tab-list{
display:block;
width: 60px;
padding: 8px 0;
text-align:center;
background: #ffc6e2;
box-sizing:border-box; /*borderの値を横幅に含める*/
cursor:pointer; /*オンマウス時にカーソルを指の形に*/
}
 
#tab-btn1:checked ~ .tab-list-wrap #tab-list1,
#tab-btn2:checked ~ .tab-list-wrap #tab-list2,
#tab-btn3:checked ~ .tab-list-wrap #tab-list3,
#tab-btn4:checked ~ .tab-list-wrap #tab-list4{
background:#ffe5f2; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
}
.tab-content{
padding:10px;
	background:#ffe5f2;
display:none; /*初期状態を非表示に*/
}
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4{
display: block;/*対応するボタンにチェックが入ったときに表示*/
}

.tab-content-wrap{
	font-size:12px
}