@charset "utf-8";
/*
smallview css
*/

/* Default
---------------------------------------- */
input,
button,
select,
textarea {
  -webkit-appearance: none;
}
input[type="radio"]{
  -webkit-appearance: radio;
}


/* 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{
width: auto;
/* box-sizing: border-box; */
margin: 0 auto;
/* padding: 0; */
}
side{

}
footer{
padding: 60px 24px 0;
}

main .contents{
padding: 90px 24px 0;
/*
margin: 0;
*/
}
/* section */
main section {
width: auto;
margin-bottom: 45px;
/*
box-sizing: border-box;
margin: 0 auto 60px;
padding: 0;
*/
}


/* ---------------------------------------- */
/* Header 
------------------------------------------- */
header .headbar{
height: 48px;
background: #FFF;
-webkit-transition: height 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: height 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: height 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
overflow: hidden;
}
header .headbar:hover{
}
header .headbar h2{
width: 100%;
top: 11px;
left: 0;
text-align: center;
/*
position: absolute;
top: 20px;
left: 30px;
*/
}
header .headbar h2 img{
width: 60px;
height: auto;
}

header .headbar .gnav{
opacity: 0;
pointer-events: none;
/*
position: absolute;
top: 25px;
right: 30px;
*/
}
header .headbar .gnav ul{
/* margin: 0; */
}
header .headbar .gnav ul li{
opacity: 0;
/*
display: inline-block;
margin: 0 0 0 16px;
color: #333;
text-transform: uppercase;
*/
}
header .headbar .gnav ul li a{
/*
color: #333;
text-decoration: none;
*/
}
header .headbar .gnav ul li a:hover{
/*
color: #FF7864;
opacity: 0.7;
*/
}
header .headbar .gnav ul li.sociallink{
margin-left: 0;
}
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{
opacity: 1;
pointer-events: auto;
transform: translateY(0)
}
header .headbar .gnav ul li.sociallink:hover .items{
}
header .headbar .gnav ul li.sociallink .items li{
}
header .headbar .gnav ul li.sociallink .items li a{
pointer-events: none;
}

header .headbar .gnav ul li.sociallink .items li:first-child a{
background: url(../img/icn_fb@2x.png) no-repeat 100% 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(2) a{
background: url(../img/icn_tw@2x.png) no-repeat 100% 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(3) a{
background: url(../img/icn_ig@2x.png) no-repeat 100% 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(4) a{
background: url(../img/icn_yt@2x.png) no-repeat 100% 50%;
background-size: 16px auto;
}
header .headbar .gnav ul li.sociallink .items li:nth-child(5) a{
background: url(../img/icn_ll@2x.png) no-repeat 100% 50%;
background-size: 16px auto;
}


/* 
Menu btn */
header .menu-trigger{
position: fixed;
right: 0;
top: 0;
}
header .menu-trigger a{
box-sizing: border-box;
display: block;
width: 48px;
height: 48px;
padding: 15px 0 0 10px;
}
header .menu-trigger a .trigger-inner span{
display: block;
width: 24px;
height: 2px;
margin-bottom: 6px;
background: #333;
opacity: 0.9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header .menu-trigger a .trigger-inner span.bar01{
-webkit-transform-origin:left top 0;
transform-origin:left top 0;
}
header .menu-trigger a .trigger-inner span.bar04{
-webkit-transform-origin:left bottom 0;
transform-origin:left bottom 0;
}

/*
Menu Active */
.menu-active header .headbar{
height: 100vh;
background: #fafafa;
}
.menu-active header .gnav{
display: block;
top: 70px;
width: 100%;
right: inherit;
opacity: 1;
pointer-events: auto;
}
.menu-active header .gnav ul {
width: auto;
margin-left: 40px;
}
.menu-active header .gnav ul li{
display: block;
margin-left: 0;
font-size: 27px;
opacity: 1;
}
.menu-active header .headbar .gnav ul li.sociallink{
background: no-repeat;
padding-top: 15px;
padding-left: 1px;
/*
position: relative;
padding: 0 14px 0 0;
background: url(../img/arw_gnav_down@2x.png) no-repeat right center;
background-size: 11px 7px;
*/
}
.menu-active header .headbar .gnav ul li.sociallink:before{
display: none;
}
.menu-active header .headbar .gnav ul li.sociallink span.label{
display: none;
}
.menu-active header .headbar .gnav ul li.sociallink .items{
  position: static;
  display: block;
  padding: 0;
  width: auto;
  background: no-repeat;
}
.menu-active header .headbar .gnav ul li.sociallink .items li{
  width: 152px;
  margin: 0;
}
.menu-active header .headbar .gnav ul li.sociallink .items li a {
  margin: 0;
  padding: 0;
/*   background-position: 100% 50%; */
  pointer-events: auto;
  font-size: 18px;
}

/* ---------------------------------------- */
/* Main 
------------------------------------------- */
/* Common
--------------------- */

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

main section img{
/*   max-width: 100%; */
/*   height: auto; */
}
/* 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; */
}

  @media screen and (max-width: 540px) {
  
    main section img.alignright,
    main section img.alignleft{
      float: none;
      display: block;
      margin: 7px auto;
    }
    main section img.alignright + br,
    main section img.alignleft + br{
      display: none;
    }
  }



/* 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: auto;
height: auto;
margin: 0 auto 45px;

/*
width: 940px;
height: 95px;
margin: 0 auto;
*/
}
main .contents-top .directory-ttl{
font-size: 36px;
/*
margin-bottom: 0;
color: #111;

line-height: 1;
*/
}
main .contents-top .directory-ttl a{
/*
color: #111;
text-decoration: none;
*/
}
main .contents-top .directory-ttl span{
font-size: 13px;
/*
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: 18px;
/* line-height: 1; */
}
main .contents-top .tax-ttl span{
/* display: inline-block; */
/* color: #555; */
/* vertical-align: middle; */
}



/* Topics List 
--------------------- */
main .topics-list{
margin: 0 0 30px;
justify-content: space-between;
/*
display: flex;
flex-wrap: wrap;

line-height: 1.6;
*/
}
main .topics-list li{
width: calc( (100vw - 68px) / 2);
margin-right: 0;
margin-bottom: 15px;
/*
width: 300px;
margin-bottom: 24px;
font-size: 13px;
*/
}
main .topics-list li a{
/*
display: block;
color: #333;
text-decoration: none;
*/
}
main .topics-list li .item-image{
/*
margin-bottom: 7px;
overflow: hidden;
*/
}
main .topics-list li .item-image img{
width: 100%;
}
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: normal;
*/
}
/* 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: 21px;
/* border-top: 1px solid #D8D8D8; */
}
main .current-post h4{
margin-bottom: 15px;
font-size: 14px;
}
main .current-post h4 span{
/* text-transform: uppercase; */
font-size: 15px;
}
main .current-post ul{
display: block;
margin: 0;
/* flex-wrap: wrap; */
}
main .current-post ul li{
/* clear: both; */
width: auto;
margin: 0 0 0;
overflow: hidden;
}
main .current-post ul li:first-child{
margin-top: 0;
}
main .current-post ul li:nth-child(2){
margin-top: 0;
}
main .current-post ul li:nth-child(2n){
margin-left: 0;
}
main .current-post a{
display: block;
color: #333;
text-decoration: none;
font-size: 13px;
line-height: 1.4;
}
main .current-post .item-image{
/* float: left; */
width: 120px;
margin-bottom: 10px;
margin-right: 0;
}
main .current-post .item-image img{
width: 110px;
height: auto;
}
main .current-post p{

}
main .current-post p .date{
color: #777;
font-size: 11px;
}


/* 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; */
font-size: 14px;
padding-top: 3px;
padding-left: 16px;
padding-right: 16px;
}
main .pagination .page-numbers.next{
/* float: right; */
}


/* Single Pagination
--------------------- */
main .single-pagenation{
/*
margin-bottom: 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: 30px;
width: 30px;
/* margin-right: 5px; */
/* border: 1px solid #DDD; */
/* background: #DDD; */
/* -webkit-border-radius: 10px; */
/* -moz-border-radius: 10px; */
/* border-radius: 10px; */
}
main .single-pagenation a .single-number{
/* margin-right: 0; */
/* background: #FFF; */
}



/* sns-share-btns
--------------------- */
main .sns-share-btns{
margin: 0 auto 36px;
}
main .sns-share-btns ul{
/* display: flex; */
width: 100%;
margin: 0 auto;
justify-content: space-between;
}
main .sns-share-btns ul li{
width: calc( (100% - 20px) / 3 );
/* 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 0 3px 0;
color: #FFF;
text-decoration: none;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
main .sns-share-btns ul li a img{
margin-right: 0;
}
main .sns-share-btns ul li a .subtxt{
display: none;
}
main .sns-share-btns ul li.fb a{
padding-left: 0;
/* background: #39599B; */
}
main .sns-share-btns ul li.fb a img{
/* width: auto; */
/* height: 22px; */
}
main .sns-share-btns ul li.tw a{
padding-top: 6px;
padding-left: 0;
}
main .sns-share-btns ul li.tw a img{
/* width: 22px; */
/* height: auto; */
}
main .sns-share-btns ul li.ln a{
padding-left: 0;
}
main .sns-share-btns ul li.ln a img{
/* width: auto; */
/* height: 22px; */
}



/* Post Nav
--------------------- */
main .post-nav{
margin-bottom: 0;
font-size: 15px;
/*
margin-bottom: 30px;
text-align: center;
overflow: hidden;
*/
}
main .post-nav a{
/*
display: block;
color: #333;
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: none;
width: auto;
min-height: 0;
/*
display: block;
width: 300px;
line-height: 1.5;
text-align: left;
*/
}
main .post-nav .pn-prev a,
main .post-nav .pn-next a{
padding: 14px 0;
border-top: 1px solid #D8D8D8;
}
main .post-nav .pn-next{
float: none;
text-align: left;
}
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{
margin-bottom: 10px;
/*
display: inline-block;
width: 120px;
margin: 0 auto;
font-size: 13px;
text-transform: uppercase;
*/
}
main .post-nav .pn-index .icn{
margin-bottom: 2px;
/*
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; */
font-size: 13px;
}
main .post-nav .cap-text .icn{
width: 16px;
height: 16px;
margin-right: 5px;
/*
display: inline-block;
position: relative;
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{
float: left;
top: 2px;
margin-right: 5px;
margin-left: 0;
/* transform: rotate(135deg); */
}
main .post-nav .cap-text .icn span.bar1,
main .post-nav .cap-text .icn span.bar2{
top: 5px;
left: 5px;
width: 5px;
height: 1px;

/*
position: absolute;
top: 11px;
left: 11px;
display: block;
height: 1px;
background: #888;
*/
}
main .post-nav .cap-text .icn span.bar2{
top: 5px;
left: 5px;
width: 1px;
height: 5px;

/*
top: 11px;
left: 11px;
width: 1px;
height: 10px;
*/
}
main .post-nav .cap-text .inner{
/*
position: relative;
top: 1px;
*/
}


/* Utility List 
--------------------- */
main .utility-list{
}


/* Info Box
--------------------- */
main .info-box{
padding: 18px 21px;
font-size: 13px;
/*
margin-bottom: 24px;
padding: 21px 28px;
border: 2px 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: #333;
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: none;
margin-bottom: 8px;
/*
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;
*/
margin: 0;
}
main .taglist ul li{
/* margin-bottom: 9px; */
}
main .taglist ul li a{
min-width: 84px;
margin-right: 8px;
padding: 3px 12px;
/* border: 1px solid #FFF; */
/* color: #333; */
/* background: #F1F1F1; */
/* text-align: center; */
/* text-decoration: none; */
font-size: 12px;
/*
display: block;
min-width: 84px;
margin-right: 9px;
padding: 3px 12px;
border: 1px solid #FFF;
color: #333;
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;
*/
color: #555;
line-height: 1.6;
font-size: 12px;
}




/* ---------------------------------------- */
/* Dir: Post Single 
------------------------------------------- */
main .post{
font-size: 15px;
}
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: 21px;
/* line-height: 1.4; */
}
main .post .ttl-box .post-date{
/* margin-bottom: 0; */
font-size: 13px;
}
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; */
}
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{
padding-bottom: 24px;
/* position: relative; */
/* min-height: 265px; */
}
footer .footer-inner h4{
margin-bottom: 60px;
/* display: inline-block; */
}
footer .footer-inner h4 img{
width: 90px;
height: auto;
}
footer .footer-inner a{
/* color: #333; */
/* text-decoration: none; */
}
footer .footer-inner a:hover{
/* color: #FF7864; */
}

footer .footer-inner .fnav{
display: flex;
position: static;
margin-bottom: 40px;
/* top: 0; */
/* left: 240px; */
}
footer .footer-inner .fnav ul{
width: calc( (100vw - 72px) / 2 );
margin-bottom: 0;
/* width: 240px; */
}
footer .footer-inner .fnav ul li{
margin-bottom: 4px;
}
footer .footer-inner .fnav ul li a{
/*
color: #333;
text-decoration: none;
*/
}
/*
footer .footer-inner .fnav ul li a:hover{
color: #FF7864;
}
*/
footer .footer-inner .fnav ul.primary{
margin-right: 24px;
}
footer .footer-inner .fnav ul.primary li a{
/* color: #888; */
}
footer .footer-inner .fnav ul.primary li:first-child a{
/* color: #333; */
}
footer .footer-inner .fnav ul.primary li a:hover{
/* color: #FF7864; */
}

footer .footer-inner .fnav-others{
position: static;
margin-bottom: 70px;
/* left: 240px; */
/* bottom: 25px; */
/* font-size: 12px; */
}
footer .footer-inner .fnav-others ul{
display: flex;
margin: 0 0 0 -24px;
flex-wrap: wrap;
}
footer .footer-inner .fnav-others ul li{
width: calc( (100vw - 72px) / 2 );
margin: 0 0 5px 24px;
}
footer .footer-inner .fnav-others ul li:first-child{
}
footer .footer-inner .cr{
position: static;
/* margin: 0; */
/* bottom: 25px; */
/* left: 0; */
/* font-size: 12px; */
}
footer .footer-inner .by-thinkr{
/* position: absolute; *0
/* margin: 0; */
/* bottom: 29px; */
/* right: 0; */
/* font-size: 11px; */
/* line-height: 2; */
/* text-align: right; */
}
footer .footer-inner .by-thinkr img{
width: 90px;
height: auto;
}

footer .footer-inner .social-link{
position: absolute;
top: 10px;
right: 0;
width: calc( (100vw - 72px) / 2 );
font-size: 12px;
}
footer .footer-inner .social-link ul{
width: 120px;
flex-wrap: wrap;
}
footer .footer-inner .social-link li{
margin-left: 0;
margin-right: 18px;
width: 21px;
height: 21px;
}

footer .footer-inner .social-link li a{
display: block;
width: 21px;
height: 21px;
/*
background: url(../img/icn_fb@2x.png) no-repeat 0 0;
background-size: 24px auto;
*/
}
footer .footer-inner .social-link li a img{
width: 21px;
height: auto;
vertical-align: middle;
}


/* ---------------------------------------- */
/* Page: Home 
------------------------------------------- */
.home header{
opacity: 1;
pointer-events: auto;
}
.home.nav-fixed header{
}
.home header h2{
}
.home header h2 img{
}

.home .contents{
padding: 48px 0 0;
}
/*
COMMON */
.hero{
min-height: inherit;
height: 430px;
/*
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: 28px;
}
.home-section .secttl{
margin-bottom: 15px;
font-size: 26px;
/*
margin-bottom: 20px;
text-align: center;
*/
}

/*
HERO */
.hero .hero-inner{
/*
display: table;
position: relative;
width: 100%;
height: 100%;
*/
}
.hero h1{
opacity: 0;
/*
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{
width: 60%;
max-width: 364px;
min-width: 180px;
height: auto;
/*
-webkit-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
*/
}
.noscroll .hero .hero-copy img{
/*
opacity: 0;
transform: translateY(5px)
*/
}


/*
TOPICS */
.home-section.home-topics{
/* position: relative; */
  padding-left: 5px;
  padding-right: 5px;
}
main .home-section.home-topics .topics-list li {
  width: calc( (100vw - 15px) / 2);
  margin-bottom: 9px;
}
main .home-section.home-topics .topics-list .item-body{
  padding-left: 5px;
  padding-right: 5px;
}

.home-section.home-topics .morelinks{
position: static;
justify-content: center;
align-items: center;  
/*
top: 82px;
right: 0;
*/
/*
display: flex;
position: absolute;
top: 82px;
right: 0;
margin: 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: #333;
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{
margin-bottom: 0;
/*
width: 100%;
background: #FAFAFA;
*/
}
.home-section .project-outline{
width: auto;
margin: 0 20px 10px;
}
.home-section .project-outline h4{
width: 100px;
margin-right: 20px;
margin-bottom: 0;
/*
text-align: center;
*/
}
.home-section .project-outline div{
font-size: 14px;
line-height: 1.5; 
/*
width: 482px;
font-size: 15px;
*/
}

/* project-list */
.home-section .project-list{
}
.home-section .project-list .project-item{
height: 260px;
/*
position: relative;
color: #FFF;
overflow: hidden;
-webkit-transition: height 0.4s 0.1s ease-out;
-moz-transition: height 0.4s 0.1s ease-out;
transition: height 0.4s 0.1s ease-out;
*/
-webkit-transition: height 0.4s ease-out;
-moz-transition: height 0.4s ease-out;
transition: height 0.4s ease-out;
}
.home-section .project-list .project-item .project-item-image{
opacity: 0;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
min-width: inherit;
height: auto;
min-height: inherit;
-webkit-transition: opacity 0.3s 0.1s ease-out;
-moz-transition: opacity 0.3s 0.1s ease-out;
transition: opacity 0.3s 0.1s 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.8);
opacity: 0;
*/
}
.home-section .project-list .project-item .item-content{
width: auto;
height: 100%;
/*
position: relative;
width: 940px;
height: 100%;
margin: 0 auto;
*/
}
.home-section .project-list .project-item .col-item{
width: 100%;
height: 260px;
/*
position: absolute;
right: 0;
display: table;
-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: bottom;
padding-left: 30px;
padding-bottom: 30px;
padding-right: 30px;
}
.home-section .project-list .project-item .col-item h2{
font-size: 27px;
margin-bottom: 3px;
/*
margin-bottom: 16px;
line-height: 1;
*/
}
.home-section .project-list .project-item .col-item h2+p{
font-size: 12px;
margin-bottom: 8px;
line-height: 1.4;
/* 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{
width: 116px;
height: 30px;
font-size: 13px;
padding: 2px 6px 2px 12px;
/*
display: block;
position: relative;
width: 160px;
height: 38px;
padding: 6px 10px 4px 20px;
padding: 4px 8px 2px 18px;
color: #333;
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;
*/
}

.home-section .project-list .project-item .col-item .btn-project a .icn-box{
top: 8px; right: 12px;
/*
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: auto;
padding: 50px 30px;
/*
width: 780px;
margin: 0 auto;
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{
font-size: 16px;
/*
margin-bottom: 18px;
line-height: 1.5;
font-weight: 600;
*/
}
.home-section .project-list .project-item .col-detail .detail-cont{
font-size: 13px;
/*
margin-bottom: 12px;
*/
}
.home-section .project-list .project-item .col-detail .detail-cont .col{
width: auto
/*
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: none;
margin-left: 0;
margin-bottom: 10px;
text-align: center;
}
.home-section .project-list .project-item .col-detail .detail-cont .col:first-child h3{
width: 210px;
height: 100px;
margin: 0 auto 10px;
/*
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;
*/
width: auto;
height: auto;
}
.home-section .project-list .project-item .col-detail .photoarea ul li{
float: none;
margin-right: 0;
margin-bottom: 15px;
/*
float: left;
margin-right: 20px;
margin-bottom: 0;
*/
}
.home-section .project-list .project-item .col-detail .photoarea ul li img{
width: 100%;
}
/* 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: 100%;
    height: 150px;
/*
  width: 780px;
  overflow: visible;
*/
  }
  .home-section .project-list .project-item .col-detail .photoarea.-slider ul li{
    float: left;
    margin-right: 20px;
    margin-bottom: 0;
  }
  .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{
width: 116px;
height: 30px;
/* margin: 0 auto; */
padding: 2px 13px 0;
font-size: 13px;
/*
display: block;
position: relative;
width: 120px;
height: 38px;
margin: 0 auto;
padding: 1px 20px 0;
border: 2px solid #FFF;
color: #333;
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;
*/
}
.home-section .project-list .project-item .col-detail .btn-detail-close a .icn-box{
top: 9px; right: 12px;
/*
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: 920px; */
height: auto;
background: #000 !important;
-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{
opacity: 1;
transform: scale(1.2)
}
.home-section .project-list .project-item.-opened .project-item-bg{
/* opacity: 1; */
}
.home-section .project-list .project-item.-opened .col-item{
transform: translateX(-10px);
}
.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: url(../img/home/bg_prj_pluginstudio.jpg) no-repeat center top;
background-size: cover;
}

.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{
left: 0;
top: 40px;
width: 100%;
text-align: center;
/*
position: absolute;
left: 20px;
top: 170px;
*/
}
.home-section .project-list .project-item.-audition .logo-sbga img{
width: 200px;
height: auto;
}

.home-section .project-list .project-item.-production{
background: url(../img/home/bg_prj_25dpro.jpg) no-repeat center top;
background-color: #bad2fe !important;
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 !important;
}
.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{
left: 0;
top: 35px;
width: 100%;
text-align: center;
/*
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 .logo-yellow img{
width: 200px;
height: auto;
}
.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: auto;
margin: 0 20px 0;
padding-top: 15px;
font-size: 15px;
}

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

}
.page-contact article .form-note{
float: none;
width: auto;
}
.page-contact article .form-cont{
float: none;
width: auto;
}
.page-contact article .form-cont input,
.page-contact article .form-cont textarea{
font-size: 16px;
}
.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 input{
/* width: 15px !important; */
}
.page-contact article .form-cont .wpcf7-list-item .wpcf7-list-item-label{
width: calc( 100% - 15px );
}
.page-contact article .form-cont .wpcf7-submit{
/*
box-sizing: border-box;
width: 100%;
margin-bottom: 20px;
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 Dir Recruit 
------------------------------------------- */
.page-recruit main {
}
.page-recruit main .lead-txt{
/* margin-bottom: 35px; */
/* text-align: center; */
}
.page-recruit main .recruit-link{
width: auto;
margin: 0 10px;
}
.page-recruit main .recruit-link li{
font-size: 18px;
margin-bottom: 25px;
/* text-align: center; */
/* line-height: 1.6; */
}
.page-recruit main .recruit-link li a{
/* display: block; */
padding: 30px 0;
/* border: 2px solid #DDDDDD; */
/* color: #333; */
/* background: url(../img/arw_gray_r.png) no-repeat 96% 50%; */
background-size: auto 20px;
/* 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; */
}