@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
/*
スマホ：320−480
タブレット：480−768
pc：それ以上
*/
html {
	height:100%;
	background-color:#FFF;
}
body {
	height:100%;
	font-family:"メイリオ",Meiryo,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"ＭＳ Ｐゴシック","MS PGothic";
	width:100%;
	margin:0 auto;
	color:#666;
}
body > #container {
	height:auto;
}
a {
	text-decoration:none;
}
img {
	border:none;
}
#container {
	min-height:100%;
	height:100%;
	margin:0 auto;
	padding:0 20px;
}

/*テキストスタイル*/
.midashi1 {
	overflow:hidden;
	border:1px solid #B5B5B5;
	margin:15px 0 15px 15px;
	padding:5px;
}
.midashi2 {
	border:1px solid #B5B5B5;
}

h2,h3 {
	font-family: 'Libre Baskerville', serif;
	letter-spacing:0.2em;
}
h2.pagetitle {
	color:#878684;
	text-align:center;
	border-left:1px solid #B5B5B5;
	border-right:1px solid #B5B5B5;
	padding:10px 0;
	margin:0 10px;
}
h3 {
	border-bottom:1px solid #B5B5B5;
	padding:10px 0;
	margin:0 0 15px 15px;
	text-indent:15px;
}

/*ヘッダースタイル*/
#header {
	margin:10px;
	overflow:hidden;
}

#navigation {
	overflow:hidden;
	margin:15px 0 5px;
	font-family: 'Libre Baskerville', serif;
}
ul.link {
	overflow:hidden;
	margin-bottom:15px;
}
ul.link>li {
	display:inline-block;
	overflow:hidden;
	min-height: 44px;
	margin-right:30px;
	margin-bottom:8px;
	line-height: 44px;
    vertical-align: top !important;
}
ul.link>li.tokitty {
	display:inline-block;
	overflow:hidden;
	min-height: 44px;
	margin-right:25px;
	margin-bottom:8px;
	line-height: 44px;
    vertical-align: top !important;
}
ul.link>li>a {
	color:#878684;
	padding-left:1em;
}
ul.link>li>a:hover {
	color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
.demo01 {
        padding-left: 15px;
}
.demo01 a {
    width: 161px;
    height: 44px;
    /* background: url("../img/bt_kitty.png") no-repeat; */
    display: block;
    /* text-indent: -9999px; */
    text-indent: 1em;
}
 
.demo01 a:hover {
    color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
body#artisantop ul li#onpage a {
	color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
body#workstop ul li#onpage a {
	color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
body#wantedtop ul li#onpage a {
	color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
body#top ul li#onpage a {
	color:#b59c15;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
ul.link>li>p {
	font-size:70%;
	padding-left:18px;
	margin-bottom:0;
}

#contents {
	float: left;
    margin: 0;
}

#contents_main {
	overflow:hidden;
	background-color:#FFF;
}

.box {
	overflow:hidden;
	padding:15px 0 15px 15px;
	background-image:url(img/bg_box.jpg);
	background-position:left -200px;
	margin-bottom:20px;
	height:auto;
}


#contents_tab {
	float:right;
	height: auto;
}
/*PAGE TOP*/
ul.link2 {
	overflow:hidden;
	margin-top:25px;
}
ul.link2>li {
	display:block;
	overflow:hidden;
	float:right;
	margin-right:30px;
	margin-bottom:8px;
	font-family: 'Libre Baskerville', serif;
	font-size:90%;
}
ul.link2>li>a {
	color:#878684;
	padding-left:1.2em;
	background-image:url(img/bg_pagetop.png);
	background-position:left;
	background-repeat:no-repeat;
}
ul.link2>li>a:hover {
	color:#b59c15;
}

/*TOPに戻る用*/
#contents_footer {
	clear:both;
	height:30px;
	text-align:right;
	padding-right:60px;
}
ul.link3 {
	overflow:hidden;
	margin-bottom:15px;
}
ul.link3>li {
	display:block;
	overflow:hidden;
	float:right;
	margin-right:10px;
	margin-bottom:8px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing:0.2em;
}
ul.link3>li>a {
	color:#878684;
	padding-left:1.2em;
	background-image:url(img/bg_navi.png);
	background-position:left;
	background-repeat:no-repeat;
}
ul.link3>li>a:hover {
	color:#b59c15;
}
ul.link3>li.president {
	padding-right:95px;
}
/* Mobile */
@media (max-width: 320px) {
ul.link>li {
	width: 100%;
	}
ul.link3>li.president {
	padding-right:0;
	
}

}

/*フッターースタイル*/
#footer {
	text-align:center;
	font-size:70%;
	color:#999;
	padding:30px 20px;
	font-family: 'Libre Baskerville', serif;
}

/*スマホ*/
@media screen and (min-width: 320px) {
#sp_logo {
	width:100%;
	text-align:center;
}
#sp_logo img {
	max-width:100%;
}
#contents {
	width:100%;
}
#contents_tab {
	display:none;
}
.midashi1 {
	width:80%;
}
h3 {
	width:80%;
}
ul.artist {
	margin:0 auto;
}
}

/*タブレット*/
@media all and (min-width:480px) {
	#sp_logo {
		display:none;
	}
	.midashi1 {
		width:92%;
	}
	h3 {
	width:93%;
	}

	#container {
		width:980px;
		overflow:hidden;
	}
	#contents {
	    	width: 85%;
	}
	#contents_tab {
		display:block;
		width: 15%;
	}
}


/*PC
all:1080px
contents_tab:80px
margin:15px
main:565px;
*/

@media all and (min-width:768px) {
	#sp_logo {
		display:none;
	}
	#container {
		width:1080px;
		overflow:hidden;
	}
	#contents {
	    	width: 94%;
	}
	#contents_tab {
		width:6%;
		display:block;
	}
}
@media screen and (max-width:479px) {
ul.link>li {
	margin-right:5px;
	margin-bottom:0;
}
ul.link>li.tokitty {
	margin-right:5px;
	margin-bottom:0;
}
}

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .modal{
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        width: 100%;
        z-index:999;
      }
      .modal__bg{
        background: rgba(255, 252, 219, 0.3);
        height: 100vh;
        position: absolute;
        width: 100%;
      }
      .modal__content{
        background: #fff;
        left: 50%;
        padding: 40px 30px 20px 30px;
        position: absolute;
        top: 18%;
        transform: translate(-50%,-50%);
        border: 1px solid #e2e2e2;
        width:800px;
      }
      .modal li {
        display: inline;
        width:50%;
        margin:10px;
      }
      .closebtn{
        text-align:center;
		  padding: 15px 0 0;
      }
		.js-modal-close {
			color: #ccc;
		}
      .btn-animation-02 {
    display: inline-block;
    /* width: 50%; */
    text-align: center;

    border: 2px solid #b1b1b1;
    font-size: 16px;
    color: #999;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 4px;
    position: relative;
    margin: 0 10px;
    }
		._v1 {
			background-color: #FDB0B1;
		}
		._v2 {
			background-color: #FFC86E;
		}
		._v3 {
			background-color: #79C8FD;
		}
      
      .btn-animation-02 span {
        position: relative;
        z-index: 1;
      }
      
      .btn-animation-02::before,
      .btn-animation-02::after {
        content: "";
        display: block;
        background-color: #FFF;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        transition: .2s;
      }
      .btn-animation-02::before {
        left: 0;
      }
      .btn-animation-02::after {
        right: 0;
      }
      
      .btn-animation-02:hover:before,
      .btn-animation-02:hover:after {
        width: 0;
        background-color: #FFF;
      }
      
      .btn-animation-02:hover {
        color: #FFF;
      }
	@media screen and (max-width: 834px){
		.modal__content {
    padding: 5%;
    width: 90%;
	    top: 32%;
		}
		.btn-animation-02 {
    width: 80%;
			margin: 10px 20px;
		}
}