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

.hover-shit {
    pointer-events: none;
}

/******************************************************************************

* COMMON ELEMENT

*******************************************************************************/

.sec:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.alphaImg {
    text-decoration: none;
}
/* category color */
.cat-people .category, .cat-people .category a {
    color: #0096B6;
}
.cat-fashion .category, .cat-fashion .category a {
    color: #FF2600;
}
.cat-things .category, .cat-things .category a {
    color: #859F3F;
}
.cat-stylebook .category, .cat-stylebook .category a {
    color: #DF5E06;
}

.cat-brown .category, .cat-brown .category a {
    color: #220204;
}






.sec-ttl {
    color: #222;
    text-align: center;
    margin-bottom: 10px;
    padding-top: 0px;
}
.sec-ttl h2 {
    font-size: 11px;
    font-size: 1.0rem;
    font-family: "Brandon Grot W01 Bold";
    font-weight: normal;
    letter-spacing: 0.08em;
    line-height: 1.5;
}
.sec-ttl h2 a {
    color: #222;
    text-decoration: none;
    display: inline-block;
    position: relative;
}
.sec-ttl h2 > a:after {
    z-index: 1;
    border-top: 1px solid #333;
    position: absolute;
    width: 100%;
    content: "";
    bottom: 7px;
    left: 0;
    -webkit-transform: scaleX(0.0);
    transform: scaleX(0.0);
    -webkit-transition: 0.50s cubic-bezier(0.74, 0, 0.32, 1);
    transition: 0.50s cubic-bezier(0.74, 0, 0.32, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.sec-ttl h2 > a.active:after, .sec-ttl h2 > a:hover:after {
    display: block !important;
    -webkit-transform: scaleX(1.0);
    transform: scaleX(1.0);
}
.sec-ttl p {
    font-size: 8px;
    font-size: 1.0rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, "游ゴシック", "游ゴシック体", YuGothic,　"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
}
.articles .post {
    position: relative;
        top: 0px;
    padding: 0;/*　30px →　0*/
}
.articles .post a { 
/*text-decoration:none;*/
}
.articles .post .inner {
    /* background: #1a2b77; */
    /* border: 1px solid #E7E7E7;*/
    width: 100%;
    /* height: 350px; */
    padding: 5% 0;
}
.articles .post .thumb-box {
    width: 100%;/*  100%;*/
    margin: 12px auto;
    position: relative;
    font-family: "游明朝","Meiryo",'Noto Sans Japanese', serif;
}
.articles .post .thumb-box img {
    width: 100%;
    height: auto;
}


.txt-number{
	position: absolute;
	top: 15%;
	left: 30px;
	right: 30px;
	font-size: 1.9em;
	line-height: 1.2;
	color: #fff;
	z-index: 10;
	text-align: center;
	font-weight: 500;
	/*text-shadow: 2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff;*/
}

.txt-number:after{
	position: absolute;
    content: '';
    width: 50%;
    height: 1px;
    left: 0;
    right: 0;
    margin: 15px auto 5px;
    /* margin: 18px 0 0 -5px; */
    display: block;
    background: #fff;
}




.colorBrown{
	color: #A34723;

}

.colorBlue1{
	color: #3594D2;

}

.colorGreen{
	color: #2E8E39;

}

.colorRed{
	color: #D61342;

}

.colorPink{
	color: #D31380;
}

.colorBlue2{
	color: #003893;
}

.colorblack{
	color: #000000;
}


.txt-en{
	position: absolute;
	top: 45%;
	left: 30px;
	right: 30px;
	font-size: 1.5em;
	line-height: 1.2;
	color: #fff;
	z-index: 10;
	font-weight: 400;
	text-align: center;
	margin: 0 10%;
}
.colorblack{
	color: #000000;
}

.txt-comment{
	position: absolute;
	top: 65%;
	left: 30px;
	right: 30px;
	font-size: 1.2em;
	line-height: 1.2;
	color: #fff;
	z-index: 10;
	font-weight: 400;
	margin: 0 10%;
	text-align: center;
}




.thumb-box a {
    width: 100%;
    overflow: hidden;
    display: block;
}
.thumb-box a img {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: 0.50s ease;
    transition: 0.50s ease;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 0;
}
.thumb-box a:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.articles .post .text-box {
    /*padding: 20px 0;*/
	padding: 25px;
    position: relative;
}
.articles .post .text-box .meta {
    font-size: 10px;
    font-size: 1.0rem;
    font-family: "Brandon Grot W01 Bold";
    font-weight: normal;
    margin-bottom: 8px;
    line-height: 1.2;
}
.articles .post .text-box .ttl {
    font-size: 10px;
    font-size: 1.0rem;
    min-height: 1.2em;
    line-height: 1.4;
    font-weight: bold;
    overflow: hidden;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.articles .post .text-box .tag:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.articles .post .text-box .tag li {
	font-size:10px;
	font-size:1.0rem;
	line-height:1.2;
	letter-spacing:-0.1em;;
	display: inline-block;
	padding-right:2px;
	padding-bottom:2px;
}
.articles .post .text-box .tag li a {
	display:block;
	padding:3px;
	border: solid 1px #CCC;
}
.articles .post .text-box .tag li a:hover {
	text-decoration: none;
	border: solid 1px #333;
}
.articles .post .text-box .readmore {
    font-size: 12px;
    font-size: 1.2rem;
    font-family: "BrandonGrotW01-MediumIt";
    font-weight: normal;
}
.articles .post .text-box .readmore a {
    text-decoration: underline;
}


.post {
    position: relative;
    top: 10px;
    -webkit-transition: all 0.4s ease-out 0.2s;
    transition: all 0.4s ease-out 0.2s;
    opacity: 0;
}

.thumb-box .overlay {
 width: 100%;
    height: 100%;
    font-size: 11px;
    font-size: 1.1rem;
    font-family: "Brandon Grot W01 Bold";
    font-weight: normal;
    color: #FFF;
    letter-spacing: 0.08em;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.50);
    opacity: 0.0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

/*
.thumb-box .overlay {
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-size: 1.1rem;
    font-family: "Brandon Grot W01 Bold";
    font-weight: normal;
    color: #FFF;
    letter-spacing: 0.08em;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.50);
    opacity: 0.0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
*/


.cat-people .thumb-box .overlay {
    background-color: rgba(0,150,182,0.80);
}
.cat-fashion .thumb-box .overlay {
    background-color: rgba(255,38,0,0.80);
}
.cat-things .thumb-box .overlay {
    background-color: rgba(133,159,63,0.80);
}

.cat-brown .thumb-box .overlay {
    background-color: rgba(12,2,4,0.80);　/*background-color　rgba(34,2,4,0.70);*/
}



.thumb-box a:hover .overlay {
    opacity: 1.0;
}
.thumb-box .overlay span {
	width: 120px;
    height: 36px;
    line-height: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -14px;
    color: #fff;
}
/*
.thumb-box .overlay:before, 
.thumb-box .overlay:after {
    z-index: 1;
    border-top: 1px solid #fff;
    position: absolute;
    width: 180px;
    content: "";
    top: 70%;
    left: 60%;
    margin-left: -20px;
    margin-top: -18px;
    -webkit-transform: scaleX(0.0);
    transform: scaleX(0.0);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.thumb-box .overlay:before {
    margin-top: -18px;
}
.thumb-box .overlay:after {
    margin-top: 18px;
}
.thumb-box a:hover .overlay:before, .thumb-box a:hover .overlay:after {
    display: block !important;
    -webkit-transform: scaleX(1.0);
    transform: scaleX(1.0);
}
*/

.thumb-box .overlay span:after {
 position: absolute;
 top: 50%;
 right: -10px;
 display: block;
 content: '';
 width: 5px;
 height: 5px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 margin-top: -3px;
 margin-right: 5px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 opacity: 0.0;
 -webkit-transition: all 0.2s ease-out 0.25s;
 transition: all 0.2s ease-out 0.25s;
 color: #fff;
}


.thumb-box a:hover .overlay span:after {
    margin-right: 0px;
    opacity: 1.0;
}
.viewmore {
    font-size: 13px;
    font-size: 1.3rem;
    font-family: "Brandon Grot W01 Bold";
    font-weight: normal;
    text-align: center; /*margin-top: 20px;*/
    margin-top: 0px;
    letter-spacing: 0.08em;
    width: 240px;
    margin-right: auto;
    margin-left: auto;
    line-height: 50px;
}
.viewmore a {
    width: 100%;
    background: transparent;
    display: block;
    text-decoration: none;
    border: solid 1px #CCC;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
}
.viewmore a:hover {
    color: #FFF;
    background: #191919;
}


/******************************************************************************

* HOME

*******************************************************************************/
/* .sec-things */
#sec-things {
    width: 100%;
   /*   padding-top: 50px;*/
    padding-bottom: 50px; /*background: #F7F7F4;
    background: #FFFAEE;*/
    background: #fff;
}

/* .sec-thingsa */
#sec-thingsa {
    width: 48%;
 /*  padding-top: 50px;*/
    padding-bottom: 50px; /*background: #F7F7F4;
    background: #FFFAEE;*/
    background: #fff;
    float:left;
}
/*@media screen and (max-width:768px) {*/


@media (max-width: 812px) {


	.txt-en{
		position: absolute;
		top: 25%;
		left: 10px;
		right: 10px;
		line-height: 1.3;
	}
}




@media (max-width: 768px) {

	.thumb-box .overlay span {
	    width: 180px;
	    left: 50%;
	    margin-left: 10px;
	    margin-top: -18px;
	    font-size: 1rem;
	    line-height: 2.5rem;
	    color: #fff;
	    /* background: #fff; */
	}
}


@media (max-width: 400px) {

.thumb-box .overlay span {
    width: 170px;
    left: 40%;
    margin-left: 10px;
    margin-top: -18px;
    font-size: 1rem;
    line-height: 2.5rem;
    color: #fff;
    /* background: #fff; */
}

/*
@media (max-width: 1019px) {
    #sec-things {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #sec-stylebook {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .sec-ttl {
        margin-bottom: 35px;
    }
    .viewmore {
        margin-top: 0px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    #sec-things {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .sec-ttl {
        margin-bottom: 30px;
    }
    .sec-ttl h2 {
        font-size: 24px;
        font-size: 2.4rem;
    }
    .articles .post .text-box {
        height: auto!important;
        padding: 15px ;
        position: relative;
    }
}
 */