@charset "utf-8";
/* CSS Document */

body,a,p{
	/*background-image:url(../images/wp1.jpg);
	background-position:top;
	background-repeat:no-repeat;
	background-size:100%;
	background-attachment:fixed;*/
	font-size: 14px;
	font-family: "Century Gothic","Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
	}

li{list-style: none;}

li.about{background-color: rgba(125,167,217,0.95);}/*#ade0a6*/
li.color{background-color: rgba(173,224,166,0.95);}/*#ade0a6*/
li.red{background-color: rgba(250,146,195,0.95);}
li.white{background-color: rgba(157,157,157,0.95);}
li.other{background-color: rgba(137,212,164,0.95);}
li.contact{background-color: rgba(213,112,255,0.95);}
li.shop{background-color: rgba(234,245,67,0.95);}
img{width: 100%;}

h2{font-weight: bold;}





.viewer {
    margin: 0 auto;
    width: 100%;
    height: 300px;
    text-align: left;
    overflow: hidden;
}
 
.viewer ul {
    width: 100%;
    height: 300px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer ul li {
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    display: none;
    position: absolute;
}

.topic_text a{
    border-bottom:1px solid #ddd; 
}



@media screen and (min-width: 641px) {
/*画面サイズ641からのCSS*/

.content{
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#header{
	width: 100%;
	background-color: #fff;
}

.logo{width: 300px;padding: 10px 5px 10px 20px;;display: inline-block;}

.sns{
	display: inline-block;
    float: right;
    overflow: hidden;
    padding: 5px;
    text-align: center;
}

.sns li{display: inline-block;}
.sns li.nadsad{padding-right: 10px;width: 133px;}
.sns li.twitter{padding-right: 10px;width: 50px;}
.sns li.youtube{padding-right: 10px;width: 50px;}
/*menu*/
.menu{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 0px;
    z-index: 5;

}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}


.menu li{
    display: inline-block;
    text-align: center;
    width: 14.28%;
}



.menu li a{
	font-weight: bold;
	display: block;
	padding: 20px 0px;
	color: #fff;
}


.menu li a:hover{
	background-color: rgba(250,250,250,0.4);
	color: #757575;
	display: block;
	padding: 20px 0px;
}

#top-head{display: none;}

/*main_img*/

#main_img_wap{
	/*background-image: url("../image/wp1.jpg");
	background-repeat: no-repeat;
    background-size: cover;
    height: 600px;*/
    width: 100%;
}




/* ---------------------------------------- */
/* ---------------- スライダー ---------------- */
/* ---------------------------------------- */


.slider_wap{}
/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
  left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}
/*スライド画像の横幅可変*/
img {
    max-width: 100%;
  height: auto;
}











/* --------------------------------------- */
/* ---------------- topic ---------------- */
/* --------------------------------------- */
#topic{
	width: 100%;
    text-align: center;
}

.topic_text{margin: 0 auto;padding-bottom: 17px;}
.topic_text li{
    padding-bottom: 10px;
}

.topic_text dt,dd{display: inline-block;}
.topic_text dt{font-weight: bold;margin-right: 10px;}


.topic_text hr{
    border:none;
    border-top: 3px dotted #ddd;
    margin: 0 auto;
    padding: 6px;
    width: 80%;
    text-align: center;
}



/* --------------------------------------- */
/* ---------------- about ---------------- */
/* --------------------------------------- */


#about{
	/*background-color: #DCEDC2;*/
	padding: 10px 0px;
	text-align: center;
}

.about_img{
	margin: 0 auto;
    padding: 10px;
    width: 200px;
}

.about_title p{
	display: block;
	font-size: 30px;
}

.about_text{
	margin:20px;
	overflow: hidden;
}


#topic,#about,#artwork_color,#artwork_red,#artwork_white,#flyer,#cd,#other_works,#contact{
    width: 90%;
    margin: 0 auto;
    /*margin-top:-60px;
    padding-top:60px;*/
}




.title{overflow: hidden;border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd;
    margin-bottom: 35px;}



.title p{
	width: 100%;
	padding: 10px;
	font-size: 35px;
}

/*.main_content_wap{
    padding: 20px 0px;
    width: 95%;
    margin: 0 auto;
    background-color;
    overflow: hidden; 
    text-align: center;
}*/

.main_content_wap{
    width: 100%;
    margin: 0 auto 40px;   /*中央寄せ*/
    position: relative;
}


.main_content{
	/*display: inline-block;
    max-width: 22%;
    padding: 6px;*/
    width:150px;
    margin:5px;
    padding:10px;
    float:left;
    color:#fff;
    display:inline;
    border: 7px solid #424242;
    }

.main_content:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.main_content img{
	width: 100%;
}









/* ---------------------------------------- */
/* ---------------- footer ---------------- */
/* ---------------------------------------- */
#footer_wap { 
    width: 100%;
    background-color: #77c3a6;
}

.footer_text p{
	padding: 20px;
	color: #fff;
	text-align:center;
}




/* ----------------------------------------- */
/* ---------------- contact ---------------- */
/* ----------------------------------------- */


#formWrap{padding: 80px 0px;}


#contact p.text{
    padding-bottom: 20px;
}

.contact_form_wap{
    margin: 0 auto;
    padding-bottom: 40px;
    width: 90%;
}

input,textarea{
    padding: 5px;
    border-radius: 5px;
border: 1px solid #ccc;}



table.formTable{
    margin: 0 auto 20px;
    border-collapse:collapse;
}
table.formTable td,table.formTable th{
    border:1px solid #ccc;
     padding:10px;}

table.formTable th{
    max-width: 120px;
    min-width: 120px;
    font-weight:normal;
    background:#efefef;
    vertical-align: middle;
}

table.formTable td{
    width: 490px;
    font-weight:normal;
}

div.send{
    padding: 70px 0px;
}





}










@media screen and (max-width: 640px) {
/*画面サイズ640までのCSS*/



#header{
  height: 58px;
	width: 100%;
	overflow: hidden;
}
#header .logo{display: none;}

.logo_sp{
  max-width: 200px;
  width: 56%;
  margin: 0 auto;
  padding-top: 16px;
}





/*----------------------------------------------*/
/*---------------------menu---------------------*/
/*----------------------------------------------*/



.menu{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.menu li{
    float: left;
    text-align: center;
    width: 33.3%;
}


.menu li a{
	font-weight: bold;
	display: block;
	padding: 8px 0px;
	color: #fff;
}


/*.menu li a:hover{
	background-color: rgba(250,250,250,0.4);
	color: #757575;
	display: block;
	padding: 8px 0px;
}*/


#main_img_wap{display: none;}
#main_img_wap_sp{overflow: hidden;}








/* ------------------------------------------ */
/* ---------------- ハンバーガー ---------------- */
/* ------------------------------------------ */


/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}


 #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        z-index: 1;
        top: 0;
        position: fixed;
        margin-top: 0;
        border-bottom: 1px solid #ddd;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
/*    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }*/
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        /*background: #333;*/
        width: 100%;
        text-align: center;
        padding: 0px;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        border-bottom: 2px solid #999;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
        width: 50%;
        float: left;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        font-weight: bold;
        padding: 13px 0;
    }
    #nav-toggle {
        display: block;
    }

    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
    /*スマホ ハンバーガーメニューここまで*/









/* ---------------------------------------- */
/* ---------------- スライダー ---------------- */
/* ---------------------------------------- */




/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
  left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}
/*スライド画像の横幅可変*/
img {
    max-width: 100%;
  height: auto;
}


/* --------------------------------------- */
/* ---------------- topic ---------------- */
/* --------------------------------------- */
#topic{
    width: 100%;
    text-align: center;
}

.topic_text{margin: 0 auto; 
    padding: 5px 15px 6px;
    text-align: left;}

.topic_text li{padding-bottom: 10px;}


.topic_text dt{
    display: block;
    font-weight: bold;
    margin-right: 10px;}

.topic_text dd{
    display: block;
}

.topic_text hr{
    border:none;
    border-top: 3px dotted #ddd;
    margin: 0;
    padding: 6px;}


/*---------------------------------------------*/
/*--------------------about--------------------*/
/*---------------------------------------------*/


#about{
	/*background-color: #DCEDC2;*/
	padding: 10px 0px;
	text-align: center;
}

.about_img{
	width: 30%;
	margin: 0 auto;
}

.about_title p{
	display: block;
	font-size: 30px;
}

.about_text{
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

.sns{display: none;}



/*#about,#artwork_color,#artwork_red,#artwork_white,#other,#contact{
    margin-top:-60px;
    padding-top:60px;
}
*/

.main_content_wap{
	margin: 0 auto 20px;
	background-color;
	overflow: hidden; 
	text-align: center;
}

.main_content{
	max-width: 45%;
	padding: 1%;
	display: inline-block;
}


.main_content img{
	width: 100%;
}


.title{overflow: hidden;border-top:1px solid #ddd; 
    border-bottom:1px solid #ddd;
    margin: 0 auto 35px;
    width: 95%;}



.title p{
    width: 100%;
    padding: 10px;
    font-size: 35px;
}


.main_content_wap{
    width: 100%;
    margin: 0 auto 40px;   /*中央寄せ*/
    position: relative;
}


.main_content{
width:90px;
margin:5px;
padding:5px;
float:left;
background-color: #fff;
color:#fff;
display:inline;
z-index: 0;
border: 5px solid #424242;
}




/* ---------------------------------------- */
/* ---------------- footer ---------------- */
/* ---------------------------------------- */
#footer_wap { 
    width: 100%;
    background-color: #77c3a6;
}

.footer_text p{
	padding: 5px;
	color: #fff;
	text-align:center;
}





/* ----------------------------------------- */
/* ---------------- contact ---------------- */
/* ----------------------------------------- */


#formWrap{padding: 80px 0px;}


#contact{
}

.contact_form_wap{
    margin: 0 auto;
    padding-bottom: 40px;
    width: 90%;
}

input,textarea{
    padding: 5px;
    border-radius: 5px;
border: 1px solid #ccc;}



table.formTable{
    margin: 0 auto 20px;
    border-collapse:collapse;
}
table.formTable td,table.formTable th{
    border:1px solid #ccc;
     padding:10px;}

table.formTable th{
/*    max-width: 120px;
    min-width: 120px;*/
    display: block;
    font-weight:normal;
    background:#efefef;
    vertical-align: middle;
}

table.formTable td{
/*    width: 490px;*/
display: block;
    font-weight:normal;
}

div.send{
    padding: 70px 0px;
}







}