/*

    Template Author : pixelhint.com
    Author Email    : contact@pixelhint.com
    Template Name   : Magnetic
    
    
    *****************************************
    
    
    - Fonts
    - General CSS
    - Header
    - Home/portfolio 
    - Inner page 
    - Map/Contact page  
    - Tooltip 
    - Responsive code
  
    
*/





/*  General CSS*/
body{
    background: #fff;
font-family: "Zen Maru Gothic", sans-serif;
       /* font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro";*/
}

.wrapper{
    width: 92.72727272727273%;
    margin: 0 auto;
}

header ul.social li a,
.main .work a .caption,
header nav ul li a{
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}

h1, h2, h3, h4, h5 ,h6{
    color: #444;
    letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.4em; margin: 1em 0; font-weight: 500; }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h3, h4,
h5, h6          { font-weight: bolder }

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}

p {line-height: 150%; color: #444; font-size: 100%;}





/*  Header  */
@media (min-width:1000px){
    header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        min-height: 100%;
        padding: 0 0 0 50px;
        background: #ffffff; 
        float: left;
        overflow: hidden;
        z-index: 9999;
    }

    header .logo{
        margin-top: 50px;
    }

    header nav ul{
        display: block;
        overflow: hidden;
        margin-top: 50px;
        list-style: none;
    }

    header nav ul li{
        display: block;
        margin-bottom: 30px;
    }

    header nav ul li a{
        color: #454545;
        font-size: 14px;
        text-decoration: none;
        letter-spacing: 1px;
    }

    header nav ul li a:hover,
    header nav ul li a.selected{
        color: #7da9bc; font-weight: 600;
    }

    header .footer{
        position: absolute;
        bottom: 50px;
    }

    header ul.social{
        list-style: none;
        margin-bottom: 5px;
    }

    header ul.social li{
        display: block;
        float: left;
        position: relative;
        margin: 0 15px 15px 0;
    }


    header ul.social li a{
        display: block;
        width: 30px;
        height: 30px;
        background: url('../img/sm.png') no-repeat;
        background-position: 0 0;
    }


    header ul.social li a:hover{
        background: url('../img/sm_hover.png') no-repeat;
    }



    header ul.social li a.fb,
    header ul.social li a.fb:hover{
        background-position: 0 0;
    }


    header ul.social li a.google,
    header ul.social li a.google:hover{
        background-position: -31px 0;
    }

    header ul.social li a.behance,
    header ul.social li a.behance:hover{
        background-position: -62px 0;
    }

    header ul.social li a.twitter,
    header ul.social li a.twitter:hover{
        background-position: -93px 0;
    }

    header ul.social li a.dribble,
    header ul.social li a.dribble:hover{
        background-position: -124px 0;
    }

    header ul.social li a.rss,
    header ul.social li a.rss:hover{
        background-position: -155px 0;
    }

    header .rights p{
        color: #454545;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 18px;
    }

    header .rights a{
        font-weight: bold;
        text-decoration: none;
    }
    #menu_icon,
    .close_menu{
        display: none;
    }

}

#menu_icon,
.close_menu{
    float: right;
    margin-right: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url('../img/men_icons.png') no-repeat;
}

#menu_icon{    
    background-position: 0 0;
}
.close_menu{
    background-position: -41px 0!important;
}






/*  Main  */
.main{
    width: 100%;
    height: 100%;
    padding-left: 300px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    background: #f6f6f6;
    clear: both;
}







/*  Home/portfolio  */
.main .work{
    display: block;
    width: 33.33333333333333%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}

.main .work .media{
    width: 100%;
    vertical-align: middle;
}

.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    background: #ffffff;
    opacity: 0;
}


.main .work a:hover .caption{
    opacity: 1;
}


.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}

.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #454545;
    font-size: 16px;
    letter-spacing: .5px;
    border-bottom: 1px solid #bfbbbb;
    border-top: 1px solid #bfbbbb;
}







/*  Inner Page  */
.top.hard{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../hardcase/heardTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.note{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../notecase/noteTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.bag{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../bag/bagTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.mug{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../mug/mugTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.etc{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../etc/etcTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.trainer{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../trainer/trainerTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.tshirt{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../tshirt/tshirtTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.tshirtN{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../tshirtN/tshirtNTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}

.top.tshirtS{ width: 100%; height: 350px; overflow: hidden; display: block; position: relative; background: url('../tshirtS/tshirtSTOP.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: 50% 50%;}



.work_nav{
    display: block;
    width: 100%;
}

.work_nav .btn{
    float: right;
}

.work_nav ul{
    list-style: none;
}

.work_nav ul li{
    display: block;
    float: left;
    margin: 0 0 1px 1px;
    position: relative;
}

.work_nav a{
    display: block;
    width: 40px;
    height: 40px;
    background: url('../img/p_navigation.png') no-repeat;
    background-position: 0 0;
}

.work_nav a.previous{
    background-position: 0 0;
}

.work_nav a.grid{
    background-position: -41px 0;
}

.work_nav a.next{
    background-position: -82px 0;
}

.top .title{
    display: block;
    width: 100%;color: #4b4848;
    font-size: 26px;
    font-weight: bold;
    background: rgba(255, 255, 255, .7);
    padding: 20px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 0!important;
    overflow: hidden;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

}

.content_header{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 50%;
    margin-left: -46.36363636363637%;
}

.content{
    color: #4b4848;
    font-size: 15px;
    line-height: 22px;
    padding: 30px 30px 1px 30px;
    background: #fff;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.content p{
    color: #444444;

    font-size: 15px;
    line-height: 24px;
    margin-bottom: 30px;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
    color: #444;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 30px;

}







/*  Contact page map  */
#map .map_adresse{
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1px;
}

#map .map_address,
#map .map_tel{
    padding: 5px;
}

#map .map_address .address,
#map .map_tel .tel{
    font-weight: bolder;
}







/*  Tooltip  */
.tooltip{
    display: block;
    padding: 7px 10px;
    background: #454545;
    color: #fff;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;

}

.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #454545 transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}


/****************************************/
/* 追加分
/****************************************/

small{font-size: 80%;}
.feature {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
margin: 1em 0;
background: #fff;}

.feature:last-child {
	margin-bottom: 2em;
}

.feature.left {
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}

.feature.right {
	-moz-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.feature .image {
	width: 50%;
}

.feature .image img {
max-width: 100%;
	}

.feature .review {
	padding: 1em 1.5em 0em 1.5em;
	width: 52%;
}      
            

.BTreview{border: 1px solid #ddd; padding: 1%; margin: 5% 0 2% 0; font-size: 80%; color: #555; display: inline-table;}


.slider{
  width:100%;
  margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}


.slider .slick-next{
    right:20px!important;
}
.slider .slick-prev{
    left:20px!important;
}
.slider .slick-arrow:before{
    font-size: 60px!important;
    color:#ddd;!important;
}





/****** ページNOここから **********************/

#pageno{ width:100%;padding: 20px  0;}
.paging {/*overflow: auto;*/ text-align:center }
.paging p {text-align:center;margin-bottom: 2%; }
.paging ul {margin: 0; padding: 0; list-style-type: none; text-align:center; }
.paging ul li {display: inline-block; margin: 0 2px;}
/* number */
.paging ul li #no {margin: 0; padding: 0; display: inline; list-style-type: none; text-decoration:none;}
.paging ul li no a {margin: 0 4px!important; padding: 10% 15%; display: block; float: left; width: 30px; height: auto; line-height: 25px; color: #7da9bc; background-color: #eee; font-size: 14px; font-weight: bold; text-align: center; }
.paging ul li no a:visited {margin: 0 4px!important; padding: 10% 15%; display: block; float: left; width: 30px;  height: auto;  line-height: 25px; color: #7da9bc; background-color: #eee; font-size: 14px; font-weight: bold; text-align: center;}
.paging ul li no a:hover {margin: 0 4px!important; padding: 10% 15%; display: block; float: left; width: 30px; height: auto; line-height: 25px; color: #fff!important; background-color: #31b5e2; font-size: 14px; font-weight: bold; text-align: center;}

/* now */
.paging ul li now{margin: 0 4px!important; padding: 10% 15%; display: block; float: left; width: 30px; height: auto; line-height: 25px; color: #fff; background-color: #7da9bc; font-size:14px; font-weight: bold; text-align:center;}
.paging ul li now a {color: #fff; text-decoration:none; font-weight: bold; }


.pagenumber{    margin: 0 auto 2% auto;
    padding: 2% 3%;
    /* display: block; */
    /* float: left; */
    width: 15px;
    /* height: auto; */
    /* line-height: 25px; */
    color: #fff;
    background-color: #7da9bc;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    /* position: relative;*/
    }

/****** ページNOここまで **********************/




/*---------- SHOPヘ飛ぶボタン ----------*/

a.shop {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 230px;
	margin: 1% auto 2% auto;
	padding: 1% ;
	font-weight: bold;
	border-radius: 0.3rem;
	border: 2px dashed #7da9bc;
	color: #27acd9;
	box-shadow: 5px 5px 0 #7da9bc;
	transition: 0.3s ease-in-out;
    line-height: 140%; font-size: 18px;
}
a.shop:hover {
	box-shadow: 0 0 0;
	transform: translate(5px, 5px);
	color: #7da9bc;
}



/****************************************/
/* 追加分ここまで
/****************************************/



@media screen and (max-width: 780px) {
			.feature.left, .feature.right {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}
.feature .image {width: 100%;}
.feature .image img {width: 100%;}
.feature .review {padding: 0 0 2em 0;width: 90%;}

}



/*  Responsive code  */
@media (max-width:1100px){

    header{
        display: block;
        width: 100%;
        min-height: 100px;
        padding: 0;
        position: relative;
    }
    header .logo{
        margin: 20px 0 20px 10px;
        display: inline-block;
    }
    header .footer{
        display: none;
    }
    header #menu_icon,
    header .close_menu{
        float: right;
        margin: 30px 30px 0 0;
    }
    header nav ul{
        list-style: none;
        display: none;
        margin-top: 35px;
        position: relative;
    }
    header nav ul li a{
        display: block;
        width: 100%;
        padding: 30px 0;
        text-align: center;
        color: #454545;
        font-size: 14px;
        text-decoration: none;
        border-top: 1px solid #f7f5f5;
        background: #fff;
    }

    

    #menu_icon,
    .close_menu,
    .show_menu{
        display: block;
    }
    .show_menu{
        display: block;
    }

    .main .work{
        width: 50%;
        border-bottom: 2px solid #fff;
    }
    .main{
        width: 100%;
        position: relative;
        padding-left: 0;
    }
    #map{
        margin: 0!important;
    }
}

@media (max-width:550px){
     /*.main .work{
        width: 100%;*/
h2 { font-size: 1.3em; margin: 1em 0; font-weight: 500; }

    }
}