@charset "utf-8";
/*
/	1. Base Style
/ 2. Common Style  
/
*/

/*
/ ---------------
/	1. Base Style
/ ---------------
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
box-sizing: border-box;
}
body, th, td{
/* text-rendering:optimizeLegibility; */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color: #222;
background: #FFF;
line-height: 1.8;
letter-spacing: 0.03em;
-webkit-text-size-adjust: 100%;
font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", Helvetica, Arial, Meiryo, "メイリオ", sans-serif;
font-weight: 300;
font-size: 14px;
}
h1,h2,h3 {
margin:0 0 1.2em;
}
h4,h5,h6 {
margin:0 0 15px;
}
h1,h2,h3,h4,h5,h6,strong {
font-weight: 600; 
}
fieldset, table, pre, ul, ol, dl {
margin-bottom: 1.5em;
}
dl dt {
margin-bottom: 1em;
font-weight: bold;
}
p, ul li, ol li, dl dd {
margin-bottom: 1em;
}
th {
font-weight: bold;
text-align: left;
padding: .7em;
}
td {
padding: .5em;
}
optgroup {
font-weight:normal;
}
abbr, acronym {
border-bottom: 1px dotted #000;
cursor: help;
}
em {
font-style:italic;
}
del {
text-decoration: line-through;
}
blockquote {
margin: 1em;
}
/* Form (for Safari Lion placeholder) */
input:focus::-webkit-input-placeholder, isindex:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
color: transparent;
}


/* Fonts
---------------------------------------- */
.wf-reg{
font-family: "proxima-nova", YakuHanJP, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
font-weight: 400;
}
.wf-mid{
font-family: "proxima-nova", YakuHanJP, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
font-weight: 500;
}
.wf-bold{
font-family: "proxima-nova", YakuHanJP, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Arial, sans-serif;
font-weight: 700;
}


/* LINK
---------------------------------------- */
a:link {
color: #FF7864;
text-decoration: underline;
}
a:visited {
color: #FF7864;
text-decoration: underline;
}
a:hover {
color: #FF7864;
text-decoration: none;
}
a:active {
color: #FF7864;
text-decoration: none;
}


/* Utility
---------------------------------------- */
.clear{
clear: both;
}

/* paragraph align */
.align-r{
clear: both;
text-align: right;
}
.align-c{
clear: both;
text-align: center;
}

/* img float left */
img.img-l{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
/* img float right */
img.img-r{
float: right;
margin-left: 20px;
margin-bottom: 20px;
}

/* important color */
em{
color: #F53636;
}
.important{
color: #F53636;
}

/* note */
.note{
color: #666;
font-size: 12px;
margin-bottom: 10px;
}



/*
/ ---------------
/	2. Common Style
/ ---------------
*/

/* Layout
---------------------------------------- */
body.noscroll {
overflow: hidden;
}
#wrapper{
overflow: hidden;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
main{

}
side{

}
footer{
padding: 90px 30px 0;
}

main .contents{
padding-top: 145px;
margin: 0;
}
/* section */
main section {
width: 940px;
box-sizing: border-box;
margin: 0 auto 60px;
padding: 0;
}


/* ---------------------------------------- */
/* Header 
------------------------------------------- */
header .headbar{
/* height: 76px; */
background: rgba(255,255,255,0.3);
}
header .headbar:hover{
/* background: rgba(255,255,255,0.8); */
}
header .headbar h2{
position: absolute;
top: 20px;
left: 30px;
}
header .headbar h2 a{
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
header .headbar h2 a:hover{
opacity: 0.6;
}

header .headbar .gnav{
position: absolute;
top: 25px;
right: 30px;
}
header .headbar .gnav ul{
margin: 0;
}
header .headbar .gnav ul li{
display: inline-block;
margin: 0 0 0 16px;
color: #222;
text-transform: uppercase;
}
header .headbar .gnav ul li a{
color: #222;
text-decoration: none;
}
header .headbar .gnav ul li a:hover{
color: #FF7864;
/* opacity: 0.7; */
}
header .headbar .gnav ul li.sociallink{
position: relative;
margin-left: 18px;
padding: 0 15px 0 0;
background: url(../img/arw_gnav_down@2x.png) no-repeat right center;
background-size: 11px 7px;
}
header .headbar .gnav ul li.sociallink:hover{
color: #FF7864 !important;
/* opacity: 0.7; */
}
header .headbar .gnav ul li.sociallink:before{
content: "";
position: absolute;
left: -12px;
top: 6px;
width: 1px;
height: 11px;
background: #333;
opacity: 0.4;
}
header .headbar .gnav ul li.sociallink .items{
/* display: none; */
position: absolute;
top: 25px;
left: -2px;
width: 100%;
margin: 0;
padding: 5px 0;
/* border: 1px solid #DDD; */
background: rgba(255,255,255,0.8);
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-transition: opacity 0.4s ease-out, transform 0.3s ease-out;
-moz-transition: opacity 0.4s ease-out, transform 0.3s ease-out;
transition: opacity 0.4s ease-out, transform 0.3s ease-out;
}
header .headbar .gnav ul li.sociallink:hover .items{
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
header .headbar .gnav ul li.sociallink .items li{
display: block;
margin: 0;
}
header .headbar .gnav ul li.sociallink .items li a{
display: block;
margin: 0;
padding: 0 10px;
font-size: 13px;
}
header .headbar .gnav ul li.sociallink .items li a:hover{
opacity: 0.8;
}
header .headbar .gnav ul li.sociallink .items li:first-child a{
background: url(../img/icn_fb_w16.png) no-repeat 114px 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(2) a{
background: url(../img/icn_tw_w16.png) no-repeat 114px 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(3) a{
background: url(../img/icn_ig_w16.png) no-repeat 114px 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(4) a{
background: url(../img/icn_yt_w16.png) no-repeat 114px 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(5) a{
background: url(../img/icn_ll_w16.png) no-repeat 114px 50%;
background-size: 16px auto;
}



/* ---------------------------------------- */
/* Main 
------------------------------------------- */
/* Common
--------------------- */
main section img{
  max-width: 100%;
  height: auto;
}

/* Heading */
main .l-heading{
margin-bottom: 1.3em;
font-size: 20px;
line-height: 1.4;
}
main .m-heading{
margin-bottom: 1.3em;
padding-top: 10px;
font-size: 18px;
line-height: 1.4;
}
main .s-heading{
margin-bottom: 1.2em;
padding-top: 10px;
font-size: 15px;
line-height: 1.4;
}


/* img wordpress デフォルトクラス */
main section img.alignright{
  float: right;
  margin: 5px 0 20px 20px;
}
main section img.alignleft{
  float: left;
  margin: 5px 20px 20px 0;
}
main section img.aligncenter{
  display: block;
  margin: 5px auto;
}

/* you tube */
main section .youtube-wrap{
  position: relative;
  width: 100%;
  max-width: 1016px;
  padding-top: 56.25%;
  margin: 0px auto 20px;
}
main section .youtube-wrap iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* etc.. */
main .post-edit-link{
display: inline-block !important;
margin-bottom: 20px;
padding: 3px 20px;
color: #FFF !important;
background: #FF7864;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
main .post-edit-link:hover{
opacity: 0.6;
}


/* Contents-top
--------------------- */
main .contents-top{
width: 940px;
height: 95px;
margin: 0 auto;
}
main .contents-top .directory-ttl{
margin-bottom: 0;
color: #111;
font-size: 48px;
line-height: 1;
}
main .contents-top .directory-ttl a{
color: #111;
text-decoration: none;
}
main .contents-top .directory-ttl span{
display: inline-block;
color: #444;
vertical-align: middle;
font-size: 14px;
}

main .contents-top .tax-ttl{
margin-bottom: 0;
padding-top: 3px;
color: #111;
font-size: 24px;
line-height: 1.3;
}
main .contents-top .tax-ttl a{
color: #111;
text-decoration: none;
}
main .contents-top .tax-ttl span{
/* display: inline-block; */
padding-left: 2px;
color: #888;
/* vertical-align: middle; */
}



/* Topics List 
--------------------- */
main .topics-list{
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
line-height: 1.6;
}
main .topics-list li{
width: 300px;
margin-right: 20px;
margin-bottom: 24px;
font-size: 13px;
}
main .topics-list li:nth-child(3n){
margin-right: 0;
}
main .topics-list li a{
display: block;
color: #222;
text-decoration: none;
}
main .topics-list li .item-image{
margin-bottom: 7px;
overflow: hidden;
}
main .topics-list li .item-image img{
-webkit-transition: transform 0.2s ease-out;
-moz-transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
main .topics-list li .item-body{
}
main .topics-list li .cat{
display: inline-block;
margin-bottom: 2px;
text-transform: uppercase;
}
main .topics-list li .date{
display: inline;
float: right;
margin: 0;
color: #888;
}
  /* archive */
  .archive main .topics-list li .date{
  display: inline-block;
  float: none;
  margin: 0 0 2px;
  }
main .topics-list li h4{
margin: 0;
line-height: 1.4;
font-size: 14px;
font-weight: 400;
}
/* hover */
main .topics-list li a:hover .item-image img{
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
transform: scale(1.02);
}
main .topics-list li a:hover .cat,
main .topics-list li a:hover h4{
color: #777;
}


/* Current Post
--------------------- */
main .current-post{
margin-bottom: 0;
padding-top: 26px;
border-top: 1px solid #D8D8D8;
}
main .current-post h4{

}
main .current-post h4 span{
text-transform: uppercase;
font-size: 17px;
}
main .current-post ul{
display: flex;
margin: 0;
flex-wrap: wrap;
}
main .current-post ul li{
width: 460px;
margin: 20px 0 0;
font-weight: 400;
}
main .current-post ul li:first-child,
main .current-post ul li:nth-child(2){
margin-top: 0;
}
main .current-post ul li:nth-child(2n){
margin-left: 20px;
}
main .current-post a{
display: block;
color: #222;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
main .current-post .item-image{
float: left;
width: 140px;
margin-right: 10px;
overflow: hidden;
}
main .current-post .item-image img{
width: 140px;
height: auto;
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
main .current-post p{
position: relative;
top: -3px;
}
main .current-post p .date{
color: #666;
font-size: 13px;
}
main .current-post a:hover p{ /* hover */
opacity: 0.6;
}
main .current-post a:hover .item-image img{
-webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
transform: scale(1.04);
}



/* Pagination 
--------------------- */
main .pagination{
font-size: 15px;
text-align: center;
}
main .pagination a{
text-decoration: none;
}
main .pagination .page-numbers{
display: inline-block;
width: 32px;
height: 32px;
padding-top: 2px;
color: #888;
border: 1px solid #AAA;
text-align: center;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
main .pagination .page-numbers.current,
main .pagination .page-numbers:hover{
color: #FF7864;
border: 1px solid #FF7864;
}
main .pagination .page-numbers.prev,
main .pagination .page-numbers.next{
float: left;
width: auto;
padding-left: 20px;
padding-right: 20px;
}
main .pagination .page-numbers.next{
float: right;
}


/* Single Pagination
--------------------- */
main .single-pagenation{
margin: 20px 0 30px;
text-align: center;
}
main .single-pagenation a{
display: inline-block;
height: 100%;
margin-right: 5px;
color: #888;
}
main .single-pagenation a:hover .single-number{
color: #FF7864;
border: 1px solid #FF7864;
}
main .single-pagenation .single-number{
display: inline-block;
height: 32px;
width: 32px;
margin-right: 5px;
/* border: 1px solid #DDD; */
/* background: #DDD; */
color: #FF7870;
border: 1px solid #ffeeee;
background: #ffeeee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
main .single-pagenation a .single-number{
margin-right: 0;
border: 1px solid #DDD;
color: #888;
background: #FFF;
}


/* sns-share-btns
--------------------- */
main .sns-share-btns{
margin: 0 auto 50px;
}
main .sns-share-btns ul{
display: flex;
width: 536px;
margin: 0 auto;
justify-content: space-between;
}
main .sns-share-btns ul li{
width: 172px;
height: 40px;
margin: 0;
font-size: 13px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
main .sns-share-btns ul li a{
display: block;
height: 100%;
padding: 8px 10px 3px 15px;
color: #FFF;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
main .sns-share-btns ul li a:hover{
opacity: 0.6;
}
main .sns-share-btns ul li a img{
margin-right: 10px;
}
main .sns-share-btns ul li.fb a{
padding-left: 18px;
background: #39599B;
}
main .sns-share-btns ul li.fb a img{
width: auto;
height: 22px;
}
main .sns-share-btns ul li.tw a{
padding-left: 18px;
background: #45ACDF;
}
main .sns-share-btns ul li.tw a img{
width: 22px;
height: auto;
}
main .sns-share-btns ul li.ln a{
padding-left: 25px;
background: #01BA02;
}
main .sns-share-btns ul li.ln a img{
width: auto;
height: 22px;
}


/* Post Nav
--------------------- */
main .post-nav{
margin-bottom: 30px;
text-align: center;
font-size: 14px;
font-weight: 400;
overflow: hidden;
}
main .post-nav a{
display: block;
color: #222;
text-decoration: none;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
main .post-nav a:hover{
color: #FF7864;
opacity: 0.5;
}
main .post-nav .pn-prev,
main .post-nav .pn-next{
float: left;
display: block;
width: 300px;
min-height: 20px;
line-height: 1.5;
text-align: left;
}
main .post-nav .pn-next{
float: right;
text-align: right;
}
main .post-nav .pn-next .icn{
display: inline-block;
position: relative;
width: 32px;
height: 32px;
margin-right: 10px;
padding-top: 2px;
color: #888;
border: 1px solid #AAA;
vertical-align: middle;
text-align: center;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
transform: rotate(-45deg);
}

main .post-nav .pn-index{
display: inline-block;
width: 120px;
margin: 0 auto;
font-size: 13px;
text-transform: uppercase;
}
main .post-nav .pn-index .icn{
display: block;
width: 32px;
height: 32px;
margin: 0 auto 4px;
padding-top: 10px;
color: #888;
border: 1px solid #AAA;
text-align: center;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
main .post-nav .pn-index .icn span{
display: block;
margin: 0 0 2px 8px;
width: 14px;
height: 1px;
background: #888;
}

main .post-nav .cap-text{
margin: 0 0 4px;
}
main .post-nav .cap-text .icn{
display: inline-block;
position: relative;
width: 32px;
height: 32px;
margin-right: 10px;
padding-top: 2px;
color: #888;
border: 1px solid #AAA;
vertical-align: middle;
text-align: center;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
transform: rotate(-45deg);
}
main .post-nav .pn-next .cap-text .icn{
margin-right: 0;
margin-left: 10px;
transform: rotate(135deg);
}
main .post-nav .cap-text .icn span.bar1,
main .post-nav .cap-text .icn span.bar2{
position: absolute;
top: 11px;
left: 11px;
display: block;
width: 10px;
height: 1px;
background: #888;
}
main .post-nav .cap-text .icn span.bar2{
top: 11px;
left: 11px;
width: 1px;
height: 10px;
}
main .post-nav .cap-text .inner{
position: relative;
top: 1px;
}


/* Utility List 
--------------------- */
main .utility-list{
/*
display: flex;
margin-bottom: 24px;
*/
}


/* Info Box
--------------------- */
main .info-box{
margin-bottom: 24px;
padding: 21px 28px;
border: 3px solid #DDDDDD;
overflow: hidden;
border-radius: 8px;
}
/* Info Box
-Secondary */
main .info-box.-secondary{
border: none;
background: #F6F6F6;
}


/* Btn Link 
--------------------- */
main .btn-link{
display: inline-block;
min-width: 220px;
margin: 0 15px 0 0;
padding: 7px 5px;
border: 1px solid #AAAAAA;
color: #222;
border-radius: 5px;
text-align: center;
text-decoration: none;
}
main .btn-link:hover{
border: 1px solid #FF7864;
color: #FF7864;
}

/* Tag Link 
--------------------- */
main .taglist{
margin-bottom: 12px;
}
main .taglist h5{
float: left;
margin-bottom: 0;
padding-top: 3px;
color: #666;
font-size: 13px;
font-weight: bold;
}
main .taglist ul{
display: flex;
flex-wrap: wrap;
margin: 0 0 0 70px;
}
main .taglist ul li{
margin-bottom: 9px;
}
main .taglist ul li a{
display: block;
min-width: 84px;
margin-right: 9px;
padding: 3px 12px;
border: 1px solid #FFF;
color: #222;
background: #F1F1F1;
text-align: center;
text-decoration: none;
font-size: 13px;
border-radius: 100px;
}
main .taglist ul li a:hover{
border: 1px solid #FF7864;
color: #FF7864;
background: #FFF;
}

/* Note Credit */
main .note-credit{
margin-bottom: 24px;
font-size: 13px;
}


/* ---------------------------------------- */
/* Dir: Post Single 
------------------------------------------- */
main .post{
font-size: 16px;
}
main .post .ttl-box{
margin-bottom: 15px;
position: relative;
}
main .post .ttl-box .ttl-box-btm{
display: flex;
-webkit-justify-content: space-between;
justify-content:         space-between;
line-height: 1.4;
}
main .post .ttl-box .post-title{
margin-bottom: 10px;
font-size: 24px;
line-height: 1.4;
}
main .post .ttl-box .post-date{
margin-bottom: 0;
font-size: 14px;
}
main .post .ttl-box .post-btn-reaction{
margin-bottom: 0;
}
main .post .ttl-box .post-btn-reaction li{
display: inline-block;
margin-bottom: 0;
vertical-align: top;
}
main .post .ttl-box .post-btn-reaction li.tw{
margin-right: 6px;
/* padding-top: 1px; */
}
main .post .ttl-box .post-btn-reaction li .fb-like.fb_iframe_widget > span{
vertical-align: top !important;
}

main .post .post-body p{
margin-bottom: 1.2em;
}



/* ---------------------------------------- */
/* Footer 
------------------------------------------- */
footer .footer-inner{
position: relative;
min-height: 275px;
}
footer .footer-inner h4{
display: inline-block;
}
footer .footer-inner h4 a{
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
footer .footer-inner h4 a:hover{
opacity: 0.6;
}


footer .footer-inner a{
color: #222;
text-decoration: none;
}
footer .footer-inner a:hover{
color: #FF7864;
}

footer .footer-inner .fnav{
display: flex;
position: absolute;
top: 0;
left: 240px;
}
footer .footer-inner .fnav ul{
width: 240px;
}
footer .footer-inner .fnav ul li{
margin-bottom: 2px;
}
footer .footer-inner .fnav ul li a{
/*
color: #222;
text-decoration: none;
*/
}
/*
footer .footer-inner .fnav ul li a:hover{
color: #FF7864;
}
*/
footer .footer-inner .fnav ul.primary li a{
color: #888;
}
footer .footer-inner .fnav ul.primary li:first-child a{
color: #222;
}
footer .footer-inner .fnav ul.primary li a:hover{
color: #FF7864;
}

footer .footer-inner .fnav-others{
position: absolute;
left: 240px;
bottom: 25px;
font-size: 12px;
}
footer .footer-inner .fnav-others ul{
display: flex;
margin: 0;
}
footer .footer-inner .fnav-others ul li{
margin: 0 24px 0 0;
}
footer .footer-inner .cr{
position: absolute;
margin: 0;
bottom: 25px;
left: 0;
font-size: 12px;
}
footer .footer-inner .by-thinkr{
position: absolute;
margin: 0;
bottom: 29px;
right: 0;
font-size: 11px;
line-height: 2;
text-align: right;
}

footer .footer-inner .social-link{
position: absolute;
top: 0px;
right: 0;
font-size: 12px;
}
footer .footer-inner .social-link ul{
display: flex;
/* flex-direction: row-reverse; */

}
footer .footer-inner .social-link li{
margin-left: 15px;
width: 24px;
height: 24px;
}
footer .footer-inner .social-link li a{
width: 24px;
height: 24px;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
footer .footer-inner .social-link li a:hover{
opacity: 0.6;
}
footer .footer-inner .social-link li a img{
width: 24px;
height: auto;
}


/* ---------------------------------------- */
/* Page: Home 
------------------------------------------- */
.home header{
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.home.nav-fixed header{
opacity: 1;
pointer-events: auto;
}
.home .contents{
padding-top: 0;
}
/*
COMMON */
.hero{
position: relative;
width: 100%;
min-height: 650px;
height: 650px;
height: 50.8vw;
background: #000 url(../img/hero.jpg) no-repeat center center;
background-size: cover;
}
.home-section{
padding-top: 50px;
}
.home-section .secttl{
margin-bottom: 20px;
font-size: 52px;
text-align: center;
}

/*
HERO */
.hero .hero-inner{
display: table;
position: relative;
width: 100%;
height: 100%;
}
.hero h1{
position: absolute;
top: 35px;
width: 100%;
text-align: center;
}
.hero .hero-copy{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.hero .hero-copy img{
-webkit-transition: opacity 0.4s ease-out, transform 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out, transform 0.4s ease-out;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.noscroll .hero .hero-copy img{
opacity: 0;
transform: translateY(4px)
}


/*
TOPICS */
.home-section.home-topics{
position: relative;
}
.home-section.home-topics .morelinks{
display: flex;
position: absolute;
top: 82px;
right: 0;
margin: 0;
}
.home-section.home-topics .morelinks li {
margin-bottom: 0;
}
.home-section.home-topics .morelinks li a{
display: inline-block;
min-width: 100px;
height: 28px;
margin: 0 10px 0 0;
padding: 1px 12px 0;
border: 1px solid #AAAAAA;
color: #222;
border-radius: 15px;
font-size: 13px;
text-align: center;
text-decoration: none;
}
.home-section.home-topics .morelinks li a:hover{
border: 1px solid #FF7864;
color: #FF7864;
}

/*
project */
.home-section.home-project{
width: 100%;
margin-bottom: 0;
background: #FAFAFA;
}
.home-section .project-outline{
display: flex;
width: 782px;
margin: 0 auto 20px;
font-weight: 400;
}
.home-section .project-outline h4{
width: 300px;
text-align: center;
}
.home-section .project-outline div{
width: 482px;
font-size: 15px;
}

/* project-list */
.home-section .project-list{

}
.home-section .project-list .project-item{
position: relative;
height: 480px;
color: #FFF;
background: #000;
overflow: hidden;
-webkit-transition: height 0.3s 0.1s ease-out;
-moz-transition: height 0.3s 0.1s ease-out;
transition: height 0.3s 0.1s ease-out;
}
.home-section .project-list .project-item .project-item-image{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-width: 950px;
height: auto;
min-height: 480px;
-webkit-transition: filter 0.3s ease-out, transform 0.5s ease-out;
-moz-transition: filter 0.3s ease-out, transform 0.5s ease-out;
transition: filter 0.3s ease-out, transform 0.5s ease-out;
}
.home-section .project-list .project-item .project-item-bg{
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
opacity: 0;
-webkit-transition: opacity 0.5s 0.4s ease-out;
-moz-transition: opacity 0.5s 0.4s ease-out;
transition: opacity 0.5s 0.4s ease-out;
}

.home-section .project-list .project-item .item-content{
position: relative;
width: 940px;
height: 100%;
margin: 0 auto;
}
.home-section .project-list .project-item .col-item{
position: absolute;
right: 0;
display: table;
width: 380px;
height: 480px;
/* height: 100%; */
-webkit-transition: opacity 0.4s ease-out, transform 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out, transform 0.4s ease-out;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.home-section .project-list .project-item .col-item .item-inner{
display: table-cell;
vertical-align: middle;
}
.home-section .project-list .project-item .col-item h2{
margin-bottom: 16px;
font-size: 48px;
line-height: 1;
}
.home-section .project-list .project-item .col-item h2+p{
margin-bottom: 24px;
}
.home-section .project-list .project-item .col-item .btn-project{
margin: 0;
}
.home-section .project-list .project-item .col-item .btn-project a{
display: block;
position: relative;
width: 160px;
height: 38px;
padding: 6px 10px 4px 20px;
padding: 4px 8px 2px 18px;
color: #222;
background: #FFF;
border: 2px solid #FFF;
text-decoration: none;
font-size: 16px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: border 0.3s ease-out, color 0.3s ease-out;
-moz-transition: border 0.3s ease-out, color 0.3s ease-out;
transition: border 0.3s ease-out, color 0.3s ease-out;
}
.home-section .project-list .project-item .col-item .btn-project a:hover{
color: #FF7864;
border: 2px solid #FF7864;
/* padding: 4px 8px 2px 18px; */
}

.home-section .project-list .project-item .col-item .btn-project a .icn-box{
display: block;
position: absolute;
top: 12px; right: 20px;
width: 10px;
height: 10px;
}
.home-section .project-list .project-item .col-item .btn-project a .icn-box span{
display: block;
position: absolute;
background: #444;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
}
.home-section .project-list .project-item .col-item .btn-project a:hover .icn-box span{
background: #FF7864;
}
/* .icn-box.-plus */
.home-section .project-list .project-item .col-item .btn-project a .icn-box.-plus span.bar1{
top: 4px;
width: 10px;
height: 2px;
}
.home-section .project-list .project-item .col-item .btn-project a .icn-box.-plus span.bar2{
left: 4px;
width: 2px;
height: 10px;
}
/* .icn-box.-arw */
.home-section .project-list .project-item .col-item .btn-project a .icn-box.-arw{
transform: rotate(135deg)
}
.home-section .project-list .project-item .col-item .btn-project a .icn-box.-arw span.bar1{
width: 8px;
height: 2px;
}
.home-section .project-list .project-item .col-item .btn-project a .icn-box.-arw span.bar2{
width: 2px;
height: 8px;
}


/* Col Detail */
.home-section .project-list .project-item .col-detail{
width: 780px;
margin: 0 auto;
padding: 100px 0;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.home-section .project-list .project-item .col-detail .detail-ttl{
margin-bottom: 18px;
line-height: 1.5;
font-weight: 600;
font-size: 19px;
}
.home-section .project-list .project-item .col-detail .detail-cont{
margin-bottom: 12px;
font-size: 15px;
}
.home-section .project-list .project-item .col-detail .detail-cont .col{
width: 380px;
line-height: 1.7;
}
.home-section .project-list .project-item .col-detail .detail-cont .col a{
color: #FFF;
}
.home-section .project-list .project-item .col-detail .detail-cont .col:first-child{
float: right;
margin-left: 20px;
text-align: center;
}
.home-section .project-list .project-item .col-detail .detail-cont .col:first-child h3{
display: table;
width: 100%;
height: 140px;
}
.home-section .project-list .project-item .col-detail .detail-cont .col:first-child h3 a{
display: table-cell;
vertical-align: middle;
}
.home-section .project-list .project-item .col-detail .photoarea{
margin-bottom: 35px;
overflow: hidden;
}
.home-section .project-list .project-item .col-detail .photoarea ul{
width: 800px;
height: 253px;
margin: 0;
overflow: hidden;
}
.home-section .project-list .project-item .col-detail .photoarea ul li{
float: left;
margin-right: 20px;
margin-bottom: 0;
}
/* Slider */
  .home-section .project-list .project-item .col-detail .photoarea.-slider{
  overflow: visible;
  }
  .home-section .project-list .project-item .col-detail .photoarea.-slider ul{
  width: 780px;
  overflow: visible;
  }
  .home-section .project-list .project-item .col-detail .photoarea.-slider .slick-list{
  overflow: visible;
  }
  .home-section .project-list .project-item .col-detail .photoarea.-slider .slick-arrow{
  z-index: 10;  
  }

.home-section .project-list .project-item .col-detail .btn-detail-close{
margin: 0;
}
.home-section .project-list .project-item .col-detail .btn-detail-close a{
display: block;
position: relative;
width: 120px;
height: 38px;
margin: 0 auto;
padding: 1px 20px 0;
border: 2px solid #FFF;
color: #222;
background: #FFF;
text-decoration: none;
font-size: 18px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: border 0.3s ease-out, color 0.3s ease-out;
-moz-transition: border 0.3s ease-out, color 0.3s ease-out;
transition: border 0.3s ease-out, color 0.3s ease-out;
}
.home-section .project-list .project-item .col-detail .btn-detail-close a:hover{
color: #FF7864;
border: 2px solid #FF7864;
/* padding: 4px 8px 2px 18px; */
}
.home-section .project-list .project-item .col-detail .btn-detail-close a .icn-box{
display: block;
position: absolute;
top: 12px; right: 20px;
width: 10px;
height: 10px;
transform: rotate(45deg)
}
.home-section .project-list .project-item .col-detail .btn-detail-close a .icn-box span{
display: block;
position: absolute;
background: #444;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
}
.home-section .project-list .project-item .col-detail .btn-detail-close a:hover .icn-box span{
background: #FF7864;
}
.home-section .project-list .project-item .col-detail .btn-detail-close a .icn-box span.bar1{
left: 4px;
width: 2px;
height: 10px;
}
.home-section .project-list .project-item .col-detail .btn-detail-close a .icn-box span.bar2{
top: 4px;
width: 10px;
height: 2px;
}

/* Project-item Opened default */
.home-section .project-list .project-item.-opened{
height: 900px;
-webkit-transition: height 0.5s 0.1s ease-out;
-moz-transition: height 0.5s 0.1s ease-out;
transition: height 0.5s 0.1s ease-out;
}
.home-section .project-list .project-item.-opened .project-item-image{
filter: blur(9px);
transform: scale(1.1)
}
.home-section .project-list .project-item.-opened .project-item-bg{
opacity: 0.8;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.home-section .project-list .project-item.-opened .col-item{
opacity: 0;
pointer-events: none;
transform: translateX(20px);
}
.home-section .project-list .project-item.-opened .col-detail{
opacity: 1;
pointer-events: visible;
-webkit-transition: opacity 0.3s 0.4s ease-in;
-moz-transition: opacity 0.3s 0.4s ease-in;
transition: opacity 0.3s 0.4s ease-in;
}

/* projectごとのスタイル  */
.home-section .project-list .project-item.-pluginstudio{
/* background: #000 url(../img/home/bg_prj_pluginstudio.jpg) no-repeat center top; */
background-size: cover;
}
.home-section .project-list .project-item.-pluginstudio .project-item-bg{
/* background: #000 url(../img/home/bg_prj_pluginstudio.jpg) no-repeat center top; */
/* background: #000; */
/* background-size: cover; */
}
.home-section .project-list .project-item.-pluginstudio .project-item-bg::before{
/*
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  background: #000 url(../img/home/bg_prj_pluginstudio.jpg) no-repeat center top;
  filter: blur(9px);
  opacity: 1;
  transform: scale(1.1)
*/
}


.home-section .project-list .project-item.-audition{
background: url(../img/home/bg_prj_audition.jpg) no-repeat center top;
background-size: cover;
}
.home-section .project-list .project-item.-audition .logo-sbga{
position: absolute;
left: 20px;
top: 170px;
}

.home-section .project-list .project-item.-production{
/* background: url(../img/home/bg_prj_25dpro.jpg) no-repeat center top; */
background-size: cover;
}

.home-section .project-list .project-item.-live{
/* background: url(../img/home/bg_prj_25dlive.jpg) no-repeat center top; */
background-size: cover;
}

.home-section .project-list .project-item.-gdc{
background: url(../img/home/bg_prj_gdc.png) no-repeat center top;
background-size: cover;
}
.home-section .project-list .project-item.-gdc h2{
letter-spacing: -0.02em;
}

.home-section .project-list .project-item.-yellow{
color: #111;
background: #FFFF00;
}
.home-section .project-list .project-item.-yellow .project-item-bg{
background: rgba(255,255,255,0)
}
.home-section .project-list .project-item.-yellow .col-detail .detail-cont .col a{
color: #000;
}
.home-section .project-list .project-item.-yellow .logo-yellow{
position: absolute;
left: 20px;
top: 170px;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.home-section .project-list .project-item.-yellow.-opened .logo-yellow{
opacity: 0;
}


/* ---------------------------------------- */
/* Page Dir Common 
------------------------------------------- */
.page main section{
margin-bottom: 0;
}

/* ---------------------------------------- */
/* Page Dir About 
------------------------------------------- */
.page-about main .about-inner{
width: 780px;
margin: 0 auto 0;
padding-top: 15px;
font-size: 16px;
}


/* ---------------------------------------- */
/* Page Dir Recruit 
------------------------------------------- */
.page-recruit main {
}
.page-recruit main .lead-txt{
margin-bottom: 35px;
text-align: center;
}
.page-recruit main .recruit-link{
width: 620px;
margin: 0 auto;
}
.page-recruit main .recruit-link li{
font-size: 20px;
margin-bottom: 30px;
text-align: center;
line-height: 1.6;
}
.page-recruit main .recruit-link li a{
display: block;
padding: 35px 0;
border: 2px solid #DDDDDD;
color: #222;
background: url(../img/arw_gray_r.png) no-repeat 96% 50%;
text-decoration: none;
border-radius: 4px;
}
.page-recruit main .recruit-link li a:hover{
border: 2px solid #FF7864;
}
.page-recruit main .recruit-link li a.cs{
pointer-events: none;
background-image: none;
}


/* ---------------------------------------- */
/* Page: Contact 
------------------------------------------- */
.page-contact article {

}
.page-contact article .form-note{
float: left;
width: 378px;
}
.page-contact article .form-cont{
float: right;
width: 540px;
}
.page-contact article .form-cont input[type="text"],
.page-contact article .form-cont input[type="email"],
.page-contact article .form-cont textarea{
box-sizing: border-box;
display: block;
margin: 5px 0 10px;
width: 100%;
padding: 8px 7px;
border: 2px solid #DDDDDD;
border-radius: 4px;
}
.page-contact article .form-cont textarea{
margin-bottom: 30px;
}
.page-contact article .form-cont .wpcf7-list-item{ /* check box */
margin: 0 0 2px 0;
line-height: 1.5;
}
.page-contact article .form-cont .wpcf7-list-item label{
display: flex;
}
.page-contact article .form-cont .wpcf7-list-item input{
/* float: left; */
margin-top: 4px;
margin-right: 7px;
}
.page-contact article .form-cont .wpcf7-list-item .wpcf7-list-item-label{
/* margin-left: 6px; */
}
.page-contact article .form-cont .wpcf7-submit,
.page-contact article .form-cont .btn-submit{
box-sizing: border-box;
width: 100%;
margin-bottom: 0;
padding: 10px 20px;
border: none;
color: #FFF !important;
background: #FF7864;
font-weight: bold;
font-size: 16px;
text-decoration: none;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.page-contact article .form-cont div.wpcf7-validation-errors{
margin: 0;
padding: 10px 15px;
border: 2px solid #FF7864;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.page-contact article .form-cont div.wpcf7-mail-sent-ok{
margin: 0;
padding: 10px 15px;
border: 2px solid #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}