@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
/* ロゴ */
.icon-logo{
position:relative;
}
.icon-logo .icon-logo_1{
color:#949697;
}
.icon-logo .icon-logo_2{
position:absolute;
top:0;
left:0;
color:#f29600;
}
.areaInner{
width:90%;
max-width:1300px;
margin:0 auto;
position:relative;
}
@media screen and (min-aspect-ratio: 16/10) and (max-width:1440px){
.areaInner{
max-width:980px;
}
}
.areaInner.w980{
max-width:980px;
}
.areaBase{
margin:0 auto 120px;
overflow:hidden;
}
@media screen and (max-width:767px){
.areaBase{
margin:0 auto 50px;
}
}
/* areaTtl */
.areaTtl{
margin-bottom:60px;
font-size:286%;
text-align:center;
line-height:1;
font-weight:600;
}
@media screen and (max-width:767px){
.areaTtl{
font-size:15pt;
margin-bottom:30px;
}
}
.areaTtl.left{
text-align:left;
}
.pageTtl{
padding:70px 0;
text-align:center;
background:#f8fafa;
position:relative;
}
@media screen and (max-width:767px){
.pageTtl{
padding:30px 0 10px;
}
}
.pageTtl.productTtl{
background:none;
}
.pageTtl .dosis{
font-size:358%;
font-weight:600;
line-height:1;
margin-bottom:50px;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.pageTtl .dosis{
font-size:15pt;
margin-bottom:15px;
}
}
.pageTtl.productTtl{
max-width:980px;
margin:0 auto;
}
.pageTtl.productTtl .dosis{
font-family:"游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
margin-bottom:30px;
font-size:321%;
line-height: 1.3;
}
@media screen and (max-width:767px){
.pageTtl.productTtl .dosis{
margin-bottom:15px;
font-size:15px;
}
}
.pageTtl .jp{
font-size:178.5%;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.pageTtl .jp{
font-size:9pt;
}
}
.pageTtl.productTtl .jp{
font-size:114%;
letter-spacing:0.1em;
}
.pageTtl:after{
content:"";
position:absolute;
bottom:-195px;
left:0;
width:100%;
height:195px;
background:#f8fafa;
display:block;
}
@media screen and (max-width:767px){
.pageTtl:after{
bottom:-100px;
height:100px;
}
}
.post .pageTtl:after{
display:none;
}
/* .btn */
.btn a{
margin:40px auto 0;
width:90%;
max-width:295px;
height:75px;
line-height:75px;
font-size:86%;
display:block;
text-align:center;
letter-spacing:0.25em;
overflow:visible;
}
@media screen and (max-width:767px){
.btn a{
max-width:350px;
height:55px;
line-height:55px;
font-size:9pt;
}
}
.btn a .inner{
display:block;
width:100%;
height:100%;
background:#f97c38;
border:1px solid #f97c38;
position:relative;
z-index:10;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.btn a:hover .inner{
background:#fff;
}
.btn.black .inner{
background:#333;
border:1px solid #333;
}
.btn.black a:hover .inner{
background:#fff;
}
.btn a .icon{
width:13px;
height:13px;
font-size:13px;
display:inline-block;
position:relative;
vertical-align:middle;
margin-right:20px;
margin-top:-1px;
}
.btn a .icon .icon-link{
position:absolute;
left:0;
top:0;
}
.btn a .btnIconInner{
position:absolute;
left:0;
width:3px;
height:3px;
display:block;
background:#fff;
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
.btn a:hover .btnIconInner{
left:2px;
background:#f97c38;
}
.btn a .btnIconInner.top{
top:0;
}
.btn a:hover .btnIconInner.top{
top:2px;
}
.btn a .btnIconInner.middle{
top:5px;
}
.btn a .btnIconInner.bottom{
bottom:0;
}
.btn a:hover .btnIconInner.bottom{
bottom:2px;
}
.btn a .btnIconInner:before{
position:absolute;
left:5px;
width:3px;
height:3px;
display:block;
background:#fff;
content:" ";
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
.btn a:hover .btnIconInner:before{
left:3px;
background:#f97c38;
}
.btn a .btnIconInner:after{
position:absolute;
left:10px;
width:3px;
height:3px;
display:block;
background:#fff;
content:" ";
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
.btn a:hover .btnIconInner:after{
left:6px;
background:#f97c38;
}
/*---------------------------------------*/
/* breadcrumbs */
/*---------------------------------------*/
.breadcrumbs{
width:100%;
height:28px;
line-height:28px;
background:#333;
color:#fff;
position:relative;
overflow:hidden;
font-size:74%;
}
@media screen and (max-width:767px){
.breadcrumbs{
width:90%;
font-size:7pt;
height:auto;
line-height:1.4;
color:#333;
background:#a9a9a9;
padding:10px 5% 7px;
}
}
.breadcrumbs .bg{
position:absolute;
top:0;
left:0;
width:6%;
height:100%;
background:#a9a9a9;
}
@media screen and (max-width:767px){
.breadcrumbs .bg{
display:none;
}
}
.breadcrumbs li{
float:left;
list-style:none;
background:#a9a9a9;
}
@media screen and (max-width:767px){
.breadcrumbs li{
border-right:none;
transform: skewX(0);
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
}
}
.breadcrumbs li:nth-last-child(2){
padding-right:8px;
}
.breadcrumbs li:last-child{
transform: skewX(30deg);
-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
padding:0 13px;
background: #333;
margin-left:-8px;
}
@media screen and (max-width:767px){
.breadcrumbs li:last-child{
background:none;
transform: skewX(0);
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
padding:0;
background:none;
}
}
.breadcrumbs li a{
display:inline-block;
transform: skewX(30deg);
-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
padding: 0 8px;
background:#a9a9a9;
}
@media screen and (max-width:767px){
.breadcrumbs li a{
background:none;
border-right:none;
padding:0;
transform: skewX(0);
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
}
.breadcrumbs li a:after{
content:"｜";
}
}
.breadcrumbs li.subCate a{
border-right:1px solid #a9a9a9;
padding:0;
}
@media screen and (max-width:767px){
.breadcrumbs li.subCate a{
border-right:none;
}
}
.breadcrumbs li.subCate a:first-child{
padding-left:8px;
}
.breadcrumbs li.subCate a:nth-last-child(2){
padding-right:8px;
}
@media screen and (max-width:767px){
.breadcrumbs li.subCate a:first-child,
.breadcrumbs li.subCate a:nth-last-child(2){
padding:0;
}
.breadcrumbs li.subCate a:after{
content:"";
}
.breadcrumbs li.subCate a:nth-last-child(2):after{
content:"｜";
}
}
.breadcrumbs li.subCate a:before{
content:"・";
}
.breadcrumbs li.subCate a:first-child:before{
content:"";
}
.breadcrumbs li:first-child a{
margin-left:3vw;
}
@media screen and (max-width:767px){
.breadcrumbs li:first-child a{
margin-left:0;
}
}
.breadcrumbs li span{
display:inline-block;
letter-spacing: 0.1em;
transform: skewX(-30deg);
-moz-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
}
@media screen and (max-width:767px){
.breadcrumbs li span{
padding:0;
transform: skewX(0);
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
}
}
.breadcrumbs li span.icon-breadcrumb{
transform: skewX(0);
-moz-transform: skewX(0);
-webkit-transform: skewX(0);
color:#1a1a1a;
}
@media screen and (max-width:767px){
.breadcrumbs li span.icon-breadcrumb{
display:none;
}
}

.breadcrumbs li:nth-last-child(2) span.icon-breadcrumb{
display:none;
}
/*---------------------------------------*/
/* キービジュアル */
/*---------------------------------------*/
.keyVisualOuter{
position:relative;
z-index: 10;
}
@media screen and (max-width:980px){
.keyVisualOuter{
padding-top:70%;
}
#topMessage .keyVisualOuter{
padding-top:90%;
}
}
.keyVisual{
width:100%;
height:750px;
position:relative;
color:#fff;
}
#topMessage .keyVisual{
height:930px;
color:#000;
}
@media screen and (max-width:980px){
#topMessage .keyVisual,
.keyVisual{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
}
#topMessage .keyVisual{
background:url(../images/page/key-topmessage.jpg) center center no-repeat;
background-size:cover;
}
@media screen and (max-width:980px){
#topMessage .keyVisual{
background:url(../images/page/key-topmessage-s.jpg) top center no-repeat;
background-size:cover;
}
}
#philosophy .keyVisual{
background:url(../images/page/key-philosophy.jpg) center center no-repeat;
background-size:cover;
}
#companyplofile .keyVisual{
background:url(../images/page/key-companyplofile.jpg) center center no-repeat;
background-size:cover;
}
#group .keyVisual{
background:url(../images/page/key-group.jpg) center center no-repeat;
background-size:cover;
}
.keyVisual .txt{
position:absolute;
top:50%;
left:2%;
width:45%;
text-align:center;
margin-top:-136px;
}
@media screen and (max-width:980px){
.keyVisual .txt{
width:50%;
margin-top:-100px;
}
}
@media screen and (max-width:767px){
.keyVisual .txt{
margin-top:-54px;
}
}
#topMessage .keyVisual .txt{
margin-top:-106px;
}
@media screen and (max-width:980px){
#topMessage .keyVisual .txt{
margin-top:-158px;
}
}
@media screen and (max-width:767px){
#topMessage .keyVisual .txt{
margin-top:-90px;
}
}
.keyVisual .txt .ttl{
font-size:386%;
letter-spacing:0.15em;
margin-bottom:40px;
line-height: 1.2;
}
@media screen and (max-width:980px){
.keyVisual .txt .ttl{
font-size:286%;
margin-bottom:30px;
}
}
@media screen and (max-width:767px){
.keyVisual .txt .ttl{
font-size:16pt;
margin-bottom:5px;
}
}
.keyVisual .txt .note{
margin-bottom:40px;
font-size:178.5%;
}
@media screen and (max-width:980px){
.keyVisual .txt .note{
font-size:128.5%;
}
}
@media screen and (max-width:767px){
.keyVisual .txt .note{
font-size:9pt;
margin-bottom:10px;
}
}
.keyVisual .txt .ceo{
margin-bottom:20px;
}
@media screen and (max-width:767px){
.keyVisual .txt .ceo{
margin-bottom:10px;
font-size:8pt;
}
}
.keyVisual .txt .signature img{
width:148px;
height:auto;
}
@media screen and (max-width:767px){
.keyVisual .txt .signature img{
width:90px;
height:auto;
}
}
/*---------------------------------------*/
/* #topmessage */
/*---------------------------------------*/
.topmessageContent .ttl{
margin-bottom:60px;
text-align:center;
}
@media screen and (max-width:767px){
.topmessageContent .ttl{
margin-bottom:30px;
}
}
.topmessageContent .ttl .sub{
color:#f97c38;
font-weight:600;
font-size:128.5%;
letter-spacing:0.1em;
line-height:1;
margin-bottom:5px;
}
@media screen and (max-width:767px){
.topmessageContent .ttl .sub{
font-size:11pt;
}
}
.topmessageContent .ttl .num{
color:#f97c38;
font-weight:600;
font-size:357%;
letter-spacing:0.1em;
line-height:1;
margin-bottom:30px;
}
@media screen and (max-width:767px){
.topmessageContent .ttl .num{
font-size:15pt;
margin-bottom:10px;
}
}
.topmessageContent .ttl .jp{
font-size:250%;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.topmessageContent .ttl .jp{
font-size:13pt;
}
}
.topmessageInner{
position:relative;
}
.topmessageInner .img{
position:absolute;
top:0;
left:0;
width:49%;
height:100%;
}
@media screen and (max-width:767px){
.topmessageInner .img{
position:relative;
height:250px;
width:90%;
margin:0 auto 20px;
}
}
.topmessageInner .txtArea{
margin-left:55%;
}
@media screen and (max-width:767px){
.topmessageInner .txtArea{
margin-left:0;
}
}
.topmessageInner .txtArea .note{
padding-bottom:30px;
font-size:114%;
color:#85888b;
}
@media screen and (max-width:767px){
.topmessageInner .txtArea .note{
font-size:9pt;
padding-bottom:20px;
}
}
.topmessageImgContent .img{
width:100%;
height:546px;
}
@media screen and (max-width:767px){
.topmessageImgContent .img{
height:200px;
}
}
.topmessageInner .slideIn.img01{
background:url(../images/page/img-topmessage_01.jpg?211129) center center !important;
background-size:cover !important;
}
@media screen and (max-width:980px){
.topmessageInner .slideIn.img01{
background:url(../images/page/img-topmessage_01.jpg?211129) center right !important;
background-size:cover !important;
}
}
@media screen and (max-width:767px){
.topmessageInner .slideIn.img01{
background:url(../images/page/img-topmessage_01.jpg?211129) center center !important;
background-size:cover !important;
}
}
.topmessageInner .slideIn.img02{
background:url(../images/page/img-topmessage_02.jpg) center center !important;
background-size:cover !important;
}
.topmessageImgContent .img03{
background:url(../images/page/img-topmessage_03.jpg?211129) center center !important;
background-size:cover !important;
}
.topmessageInner .slideIn.img04{
background:url(../images/page/img-topmessage_04.jpg?221101) center center !important;
background-size:cover !important;
}
.topmessageImgContent .img05{
background:url(../images/page/img-topmessage_05.jpg) center center !important;
background-size:cover !important;
}
.topmessageInner .slideIn.img06{
background:url(../images/page/img-topmessage_06.jpg) center center !important;
background-size:cover !important;
}
.topmessageImgContent .img07{
background:url(../images/page/img-topmessage_07.jpg) center center !important;
background-size:cover !important;
}
/*---------------------------------------*/
/* philosophy */
/*---------------------------------------*/
.philosophyContent{
position:relative;
}
.philosophyContent .bg{
background:#f8fafa;
position:absolute;
top:50px;
right:0;
width:70%;
height:100%;
}
@media screen and (max-width:767px){
.philosophyContent .bg{
top:15px;
}
}
.philosophyContent .ttl{
font-size:357%;
font-weight:600;
letter-spacing:0.1em;
margin-left:-5%;
}
@media screen and (max-width:1185px){
.philosophyContent .ttl{
margin-left:0;
}
}
@media screen and (max-width:767px){
.philosophyContent .ttl{
font-size:13pt;
}
}
.philosophyContent .jp{
font-size:32%;
display:block;
font-weight:normal;
letter-spacing: normal;
}
@media screen and (max-width:767px){
.philosophyContent .jp{
font-size:9pt;
}
}
.philosophyContent .blockLeft{
margin-left:-5%;
padding-bottom:100px;
}
@media screen and (max-width:1185px){
.philosophyContent .blockLeft{
margin-left:0;
}
}
@media screen and (max-width:767px){
.philosophyContent .blockLeft{
padding-bottom:20px;
}
}
.philosophyContent .img{
width:338px;
margin-top:60px;
}
@media screen and (max-width:980px){
.philosophyContent .img{
width:300px;
}
}
@media screen and (max-width:767px){
.philosophyContent .img{
width:100%;
margin-top:20px;
}
}
.philosophyContent .img img{
width:100%;
height:auto;
}
.philosophyContent .txtArea{
width:60%;
padding-bottom: 100px;
}
@media screen and (max-width:980px){
.philosophyContent .txtArea{
width:50%;
}
}
@media screen and (max-width:767px){
.philosophyContent .txtArea{
width:100%;
padding-bottom:15px;
}
}
.philosophyContent .txtArea .subTtl{
font-weight:bold;
color:#f97c38;
font-size:171%;
margin-bottom:10px;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.philosophyContent .txtArea .subTtl{
font-size:11pt;
}
}
.philosophyContent .txtArea .enTtl{
margin-bottom:40px;
font-weight:600;
font-size:143%;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.philosophyContent .txtArea .enTtl{
font-size:9pt;
margin-bottom:20px;
}
}
.philosophyContent .txtArea .note{
padding-bottom:30px;
}
@media screen and (max-width:767px){
.philosophyContent .txtArea .note{
padding-bottom:20px;
}
}
/*---------------------------------------*/
/* companyplofile */
/*---------------------------------------*/
.companyplofileTop{
max-width:750px;
}
/* 画像動き */
#companyplofile .img-outer{
overflow:hidden;
height:245px;
}
#companyplofile .img-outer{
width:100%;
height:auto;
margin:0 auto 60px;
}
@media screen and (max-width:767px){
#companyplofile .img-outer{
margin:0 auto 30px;
}
}
#companyplofile .img-outer img{
width:100%;
height:auto;
}
#companyplofile .img-outer .palla-img{
position:relative;
left:0;
width:100%;
height:200%;
transform:matrix(1, 0, 0, 1, 0, 0);
background:url(../images/page/img-densetsu.jpg) center center no-repeat;
background-size:cover;
top:-100%;
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:980px){
#companyplofile .img-outer .palla-img{
display:none;
}
}
.companyplofileContent .ttl{
font-size:357%;
font-weight:600;
letter-spacing:0.1em;
margin-bottom:60px;
text-align:center;
}
@media screen and (max-width:767px){
.companyplofileContent .ttl{
font-size:13pt;
margin-bottom:30px;
}
}
.companyplofileContent .ttl .jp{
font-size:32%;
display:block;
font-weight:normal;
letter-spacing: normal;
}
@media screen and (max-width:767px){
.companyplofileContent .ttl .jp{
font-size:9pt;
}
}
.executive ul li{
min-height:260px;
position:relative;
margin-bottom:125px;
}
@media screen and (max-width:767px){
.executive ul li{
margin-bottom:35px;
}
}
.executive ul li .img{
position:absolute;
top:0;
left:60px;
width:370px;
}
@media screen and (max-width:980px){
.executive ul li .img{
left:0;
width:320px;
margin-bottom:20px;
}
}
@media screen and (max-width:767px){
.executive ul li .img{
width:100%;
position:relative;
}
}
.executive ul li .img img{
width:100%;
height:auto;
}
.executive ul li .txtArea{
margin-left:490px;
}
@media screen and (max-width:980px){
.executive ul li .txtArea{
margin-left:360px;
}
}
@media screen and (max-width:767px){
.executive ul li .txtArea{
margin-left:0;
}
}
.executive ul li .txtArea .name{
margin-bottom:20px;
}
.executive ul li .txtArea .name .jp{
font-size:171%;
margin-right:15px;
display:inline-block;
font-weight:bold;
}
@media screen and (max-width:767px){
.executive ul li .txtArea .name .jp{
font-size:15pt;
}
}
.executive ul li .txtArea .name .en{
font-weight:600;
font-size:121%;
display:inline-block;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.executive ul li .txtArea .name .en{
font-size:11pt;
}
}
.companyplofileContent .info{
margin-bottom:130px;
}
@media screen and (max-width:767px){
.companyplofileContent .info{
margin-bottom:50px;
}
}
.companyplofileContent .info dt{
width:18%;
padding:20px 1%;
font-size:114%;
border-top:1px solid #333;
}
@media screen and (max-width:767px){
.companyplofileContent .info dt{
width:94%;
padding:10px 3% 5px;
font-size:9pt;
}
}
.companyplofileContent .info dd{
width:75%;
padding:20px 1%;
border-top:1px solid #bcbcbc;
color:#333;
}
@media screen and (max-width:767px){
.companyplofileContent .info dd{
width:94%;
padding:5px 3% 10px;
font-size:9pt;
}
}
.companyplofileContent .access li{
min-height:193px;
position:relative;
margin-bottom:80px;
}
@media screen and (max-width:767px){
.companyplofileContent .access li{
margin-bottom:35px;
}
}
.companyplofileContent .access li .img{
position:absolute;
top:0;
left:60px;
width:290px;
}
@media screen and (max-width:980px){
.companyplofileContent .access li .img{
left:0;
margin-bottom:20px;
}
}
@media screen and (max-width:767px){
.companyplofileContent .access li .img{
width:100%;
position:relative;
}
}
.companyplofileContent .access li .img img{
width:100%;
height:auto;
}
.companyplofileContent .access li .txtArea{
margin-left:415px;
}
@media screen and (max-width:980px){
.companyplofileContent .access li .txtArea{
margin-left:355px;
}
}
@media screen and (max-width:767px){
.companyplofileContent .access li .txtArea{
margin-left:0;
}
}
.companyplofileContent .access li .txtArea .btn a{
margin-left:0;
}
@media screen and (max-width:767px){
.companyplofileContent .access li .txtArea .btn a{
margin-left:auto;
}
}
/*---------------------------------------*/
/* group */
/*---------------------------------------*/
.groupContent{
position:relative;
}
.groupContent .img{
position:absolute;
top:0;
left:0;
width:244px;
}
@media screen and (max-width:767px){
.groupContent .img{
position:relative;
margin-bottom:20px;
width:100%;
max-width:244px;
}
}
.groupContent .img img{
width:100%;
height:auto;
}
.groupContent  .txtArea{
margin-left:385px;
}
@media screen and (max-width:980px){
.groupContent  .txtArea{
margin-left:285px;
}
}
@media screen and (max-width:767px){
.groupContent  .txtArea{
margin-left:0;
}
}
.groupContent  .txtArea .ttl{
font-size:171%;
font-weight:bold;
margin-bottom:15px;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.groupContent  .txtArea .ttl{
font-size:13pt;
margin-bottom:10px;
}
}
.groupContent  .txtArea .note{
margin-bottom:40px;
color:#333333;
}
@media screen and (max-width:767px){
.groupContent  .txtArea .note{
margin-bottom:20px;
}
}
.groupContent  .txtArea .link{
font-size:86%;
letter-spacing:0.2em;
}
@media screen and (max-width:767px){
.groupContent  .txtArea .link{
font-size:8pt;
}
}
.groupContent  .txtArea .link .icon-link{
margin-right:15px;
}
/*---------------------------------------*/
/* photo */
/*---------------------------------------*/
.photoContent{
position:relative;
padding-top:50px;
max-width:1050px;
overflow:visible;
}
@media screen and (max-width:767px){
.photoContent{
padding-top:20px;
}
}
.photoContent .img img{
width:100%;
height:auto;
}
.photoContent .gallery{
position:absolute;
top:0;
left:5%;
background:#fff;
font-size:128.5%;
text-align:center;
color:#f97c38;
font-weight:600;
padding:10px 25px;
letter-spacing:0.15em
}
@media screen and (max-width:767px){
.photoContent .gallery{
padding:5px 15px;
font-size:9pt;
}
}
.photoContent .gallery .num{
font-size:277%;
display:block;
line-height:1;
}
@media screen and (max-width:767px){
.photoContent .gallery .num{
font-size:13pt;
}
}
.photoContent .note{
width:80%;
padding:35px 5% 10px;
margin:-25px auto 0;
background:rgba(255,255,255,0.9);
position:relative;
}
@media screen and (max-width:767px){
.photoContent .note{
padding:20px 5% 5px;
margin:-10px auto 0;
}
}
/* ムービー */
#photo .play-button {
border-radius: 50%;
display: inline-block;
height: 90px;
position:absolute;
top:50%;
left:50%;
text-align: center;
width: 90px;
margin:-45px 0 0 -45px;
background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
transition: background 0.2s ease 0s;
}
@media screen and (max-width:767px){
#photo .play-button {
height: 40px;
width: 40px;
margin:-20px 0 0 -20px;
}
}
#photo .play-button::after {
border-radius: 50%;
box-sizing: content-box;
content: "";
height: 100%;
pointer-events: none;
position:absolute;
width: 100%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
left: 0;
opacity:0;
top: 0;
transform: scale(0.93);
z-index: -1;
}
#photo .play-button:hover {
background: rgba(255, 255, 255, 0.05) none repeat scroll 0 0;
color: #f97c38;
transform: scale(0.93);
}
#photo .play-button:hover::after {
animation: 1.3s ease-out 75ms normal none 1 running sonarEffect;
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #f97c38, 0 0 0 10px rgba(255, 255, 255, 0.5);
opacity: 0.5;
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #f97c38, 0 0 0 10px rgba(255, 255, 255, 0.5);
opacity: 0;
transform: scale(1.5);
}
}
.play-button .icon-play{
position:absolute;
top:0;
left:0;
font-size:90px;
color:#f97c38;
}
@media screen and (max-width:767px){
.play-button .icon-play{
font-size:40px;
}
}
/*---------------------------------------*/
/* category共通 */
/*---------------------------------------*/
/* カテゴリーエリア */
.cateArea{
padding:60px 0 45px;
background:#e5ecec;
width:100%;
text-align:center;
overflow:visible;
}
@media screen and (max-width:767px){
.cateArea{
padding:35px 0 20px;
}
}
.cateArea.bottom{
background:none;
border-top:1px solid #bcbcbc;
border-bottom:1px solid #bcbcbc;
padding:35px 0 25px;
text-align:left;
}
@media screen and (max-width:767px){
.cateArea.bottom{
padding:25px 0 15px;
}
}
.cateArea.bottom .ttl{
font-size:128.5%;
line-height:1;
margin-bottom:25px;
}
@media screen and (max-width:767px){
.cateArea.bottom .ttl{
font-size:11pt;
margin-bottom:15px;
}
}
.cateArea .categoryList{
margin-bottom:10px;
}
.cateArea .categoryList li.cat-item{
line-height: 1.4;
display: inline-block;
position: relative;
margin-bottom: 10px;
}
@media screen and (max-width:767px){
.cateArea .categoryList li.cat-item{
display:inline-block;
width:48%;
margin:0 1%;
float:left;
text-align:center;
line-height:30px;
height:30px;
border-bottom:1px solid #fff;
}
.cateArea.bottom .categoryList li.cat-item{
border-bottom:1px solid #eaeaea;
}
}
.cateArea .categoryList li.cat-item:after{
content:"|";
}
@media screen and (max-width:767px){
.cateArea .categoryList li.cat-item:after{
content:"";
}
}
.cateArea.bottom .categoryList li.cat-item:after{
content:"";
}
.cateArea .categoryList li.cat-item:last-child:after{
content:"";
}
.cateArea .categoryList li.cat-item  a{
display:inline-block;
padding:0 10px;
}
@media screen and (max-width:767px){
.cateArea .categoryList li.cat-item  a{
padding:0;
}
}
.cateArea.bottom .categoryList li.cat-item  a{
padding:0 40px 0 0;
}
@media screen and (max-width:767px){
.cateArea.bottom .categoryList li.cat-item  a{
padding:0;
}
}
.cateArea .categoryList.archiveList li.cat-item span{
padding:0 10px;
}
@media screen and (max-width:767px){
.cateArea .categoryList.archiveList li.cat-item span{
padding:0;
}
}
.cateArea .categoryList ul.children{
position: absolute;
top: 1em;
margin-top: 5px;
left: 50%;
width: 130px;
margin-left: -105px;
background: #fff;
padding: 20px 30px;
text-align: left;
z-index: 999;
font-size: 86%;
}
.cateArea.bottom .categoryList ul.children{
background:#e5ecec;
}
@media screen and (max-width:767px){
.cateArea .categoryList ul.children{
width:94%;
margin-left:0;
left:0;
top:30px;
padding:5px 3%;
}
}
.cateArea .categoryList ul.children li{
margin-bottom: 10px;
display:block;
}
@media screen and (max-width:767px){
.cateArea .categoryList ul.children li{
width:100%;
border:none;
height:20px;
line-height:20px;
text-align: left;
}
}
.cateArea .categoryList ul.children li a{
display:block;
padding:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.cateArea.bottom .categoryList ul.children li a{
padding:0;
}
.cateArea .categoryList ul.children li:after{
content:"";
}
/* カテゴリータイトル */
.cateTtl{
text-align:center;
font-weight:bold;
font-size:171%;
margin:60px 0;
}
@media screen and (max-width:767px){
.cateTtl{
font-size:11pt;
margin:20px 0;
}
}
/* ページャー */
.pager{
border-bottom: 1px solid #bcbcbc;
border-top: 1px solid #bcbcbc;
height: 98px;
line-height: 98px;
margin-top:90px;
position: relative;
text-align: center;
z-index:120;
}
@media screen and (max-width: 767px) {
.pager{
height: 50px;
line-height: 50px;
margin-top:50px;
}
}
.pager a {
border-bottom: 1px solid #fff;
padding: 0 0 5px;
margin:0 10px;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 767px) {
.pager a {
font-size:9pt;
}
}
.pager .current {
border-bottom: 1px solid #000;
padding: 0 0 5px;
margin:0 10px;
}
@media screen and (max-width: 767px) {
.pager .current {
font-size:9pt;
}
}
.pager .nextpostslink{
padding-right:10px;
position: absolute;
top:0;
right:0;
font-size:93%;
}
.pager .previouspostslink{
padding-left:10px;
position: absolute;
top:0;
left:0;
font-size:93%;
}
@media screen and (max-width: 767px) {
.pager .nextpostslink,
.pager .previouspostslink{
font-size:8pt;
padding:0;
}
}
.pager .previouspostslink .icon-arrow{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pager .icon-arrow{
width:65px;
height:65px;
text-align:center;
line-height:65px;
display:inline-block;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.pager .icon-arrow{
width:30px;
height:30px;
line-height:30px;
}
}
/* サイドあり */
.post .mainArea{
width:63%;
}
@media screen and (max-width:980px){
.post .mainArea{
width:100%;
}
.post .mainArea .areaInner{
width:100%;
}
}
.post .mainArea .date{
margin-bottom:15px;
}
.post .mainArea .date .cate{
font-size:93%;
margin-right:20px;
color:#85888b;
}
@media screen and (max-width:767px){
.post .mainArea .date .cate{
margin-right:10px;
font-size:9pt;
}
}
.post .mainArea .date .cate .cateIn:nth-last-child(2):before{
content:"｜";
}
.post .mainArea .date .cate .cateIn:nth-child(2):before{
content:"";
}
.post .mainArea .date .cate .cateIn:first-child,
.post .mainArea .date .cate .cateIn:last-child{
display:none;
}
.post .mainArea .date .abel{
font-size:86%;
color:#85888b;
letter-spacing:0.15em;
}
@media screen and (max-width:767px){
.post .mainArea .date .abel{
font-size:9pt;
}
}
.post .mainArea .postTtl{
font-size:186%;
margin-bottom:40px;
}
@media screen and (max-width:767px){
.post .mainArea .postTtl{
font-size:11pt;
margin-bottom:20px;
}
}
.post .mainArea .note p{
margin-bottom:15px;
}
.post .mainArea .note img{
margin-bottom:5px;
}
@media screen and (max-width:767px){
.post .mainArea .note p{
margin-bottom:10px;
}
}
.post .mainArea .note img{
max-width:100%;
height:auto;
}
.post .mainArea iframe{
max-width:100%;
}
.post .mainArea .line{
width:100%;
height:1px;
background:#bcbcbc;
margin:30px 0;
}
@media screen and (max-width:767px){
.post .mainArea .line{
margin:15px 0;
}
}
.post .mainArea .sns{
line-height: 1;
}
.post .mainArea .sns .hatena-link{
line-height:0.8;
display:inline-block;
}
.post .mainArea .sns .fb-like{
line-height:0.8;
margin: 0 10px;
}
.post .subArea{
width:25%;
}
@media screen and (max-width:980px){
.post .subArea{
width:100%;
max-width:inherit;
}
}
.post .subArea .ttl{
font-size:171%;
font-weight:600;
margin-bottom:15px;
text-align:center;
}
@media screen and (max-width:767px){
.post .subArea .ttl{
font-size:13pt;
}
}
.post .subArea ul.category li{
margin-bottom:8px;
font-size:93%;
padding-left:12px;
position:relative;
}
@media screen and (max-width:767px){
.post .subArea ul.category li{
font-size:9pt;
}
}
.post .subArea ul.category li:after{
position:absolute;
top:11px;
left:0;
width:8px;
height:1px;
background:#333;
content:"";
display:block;
}
.post .subArea ul.category li .children{
display:block !important;
margin-top:8px;
}
/* アーカイブ */
.post .subArea ul.category li .children.archive-links{
margin:5px 0 16px;
}
.post .subArea ul.category li .children.archive-links li{
display:inline;
float:left;
width:33.33%;
padding:0;
margin-bottom:3px;
}
.post .subArea ul.category li .children.archive-links li:after{
display:none;
}

/*---------------------------------------*/
/* news */
/*---------------------------------------*/
#news .newsList li{
margin-bottom:30px;
line-height:1.2;
position:relative;
min-height:25px;
}
@media screen and (max-width:767px){
#news .newsList li{
line-height:1.4;
}
}
#news .newsList li .info{
display:inline-block;
position:absolute;
top:0;
left:0;
line-height:24px;
}
@media screen and (max-width:767px){
#news .newsList li .info{
position:relative;
line-height:18px;
}
}
#news .newsList li .date{
font-size:93%;
display:inline-block;
vertical-align:middle;
letter-spacing: 0.1em;
width:115px;
}
@media screen and (max-width:980px){
#news .newsList li .date{
width:85px;
}
}
@media screen and (max-width:767px){
#news .newsList li .date{
font-size:9pt;
}
}
#news .newsList li .cate{
display:inline-block;
vertical-align:middle;
height:24px;
line-height:24px;
font-size:86%;
background:#e5ecec;
padding:0 10px;
border-radius:6px;
color:#333;
}
@media all and (-ms-high-contrast:none) {
#news .newsList li .cate{
line-height:29px;
}
}
@media screen and (max-width:767px){
#news .newsList li .cate{
height:18px;
line-height:18px;
font-size:9pt;
}
}
#news .newsList li a{
margin-left:265px;
display:inline-block;
margin-top:4px;
}
@media screen and (max-width:980px){
#news .newsList li a{
margin-left:230px;
}
}
@media screen and (max-width:767px){
#news .newsList li a{
margin-left:0;
margin-top:10px;
display:block;
}
}
/* news投稿 */
#news .newsContent .postTtl{
font-size:171%;
font-weight:bold;
margin-bottom:40px;
color:#f97c38;
}
@media screen and (max-width:767px){
#news .newsContent .postTtl{
font-size:11pt;
margin-bottom:20px;
}
}
#news .newsContent .date{
margin-bottom:40px;
}
@media screen and (max-width:767px){
#news .newsContent .date{
margin-bottom:20px;
}
}
#news .newsContent .date .abel{
font-size:93%;
display:inline-block;
margin-right:20px;
vertical-align:middle;
letter-spacing: 0.1em;
}
@media screen and (max-width:767px){
#news .newsContent .date .abel{
font-size:9pt;
}
}
#news .newsContent .date .cate{
display:inline-block;
vertical-align:middle;
height:24px;
line-height:24px;
font-size:86%;
background:#e5ecec;
padding:0 10px;
border-radius:6px;
color:#333;
}
@media all and (-ms-high-contrast:none) {
#news .newsContent .date .cate{
line-height:29px;
}
}
@media screen and (max-width:767px){
#news .newsContent .date .cate{
height:18px;
line-height:18px;
font-size:9pt;
}
}
#news .newsContent .date a{
margin-left:265px;
display:inline-block;
margin-top:4px;
}
@media screen and (max-width:980px){
#news .newsContent .date a{
margin-left:230px;
}
}
@media screen and (max-width:767px){
#news .newsContent .date a{
margin-left:0;
margin-top:10px;
display:block;
}
}
#news .newsContent .note{
font-size:114%;
color:#85888b;
}
@media screen and (max-width:767px){
#news .newsContent .note{
font-size:9pt;
}
}
#news .newsContent .note p,
#news .newsContent .note .img{
margin-bottom:30px;
}
@media screen and (max-width:767px){
#news .newsContent .note p,
#news .newsContent .note .img{
margin-bottom:15px;
}
}
#news .newsContent .note img{
max-width:100%;
height:auto;
}
#news .newsContent .note a{
font-size:81.25%;
}
@media screen and (max-width:767px){
#news .newsContent .note a{
font-size:9pt;
}
}
#news .post-contactArea{
border-top:1px solid #bcbcbc;
padding-top: 60px;
}
@media screen and (max-width:767px){
#news .post-contactArea{
padding-top: 30px;
}
}
#news .post-contactArea .blockLeft{
width:60%;
}
#news .post-contactArea .blockRight{
width:40%;
}
@media screen and (max-width:767px){
#news .post-contactArea .blockLeft,
#news .post-contactArea .blockRight{
width:100%;
}
}
#news .post-contactArea .ttl{
font-size:143%;
font-weight:bold;
margin-bottom:35px;
}
@media screen and (max-width:767px){
#news .post-contactArea .ttl{
font-size:11pt;
}
}
#news .post-contactArea .note{
font-size:114%;
color:#85888b;
}
@media screen and (max-width:767px){
#news .post-contactArea .note{
font-size:9pt;
}
}
/*---------------------------------------*/
/* lab */
/*---------------------------------------*/
#lab .labList li{
width:30.5%;
margin-right:4.25%;
display:inline;
float:left;
margin-bottom:100px;
}
@media screen and (max-width:767px){
#lab .labList li{
width:100%;
margin-right:0;
margin-bottom:50px;
}
}
#lab .labList li:nth-child(3n){
margin-right:0;
}
#lab .labList li a{
display:block;
}
#lab .labList li .img{
display:block;
margin-bottom: 10px;
padding-top: 69.897%;
position: relative;
overflow: hidden;
}
#lab .labList li img{
width:100%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#lab .labList li a:hover img{
-moz-transform: scale(1.04,1.04)  translate(-48%,-48%);
-webkit-transform:scale(1.04,1.04)  translate(-48%,-48%);
-o-transform:scale(1.04,1.04)  translate(-48%,-48%);
-ms-transform:scale(1.04,1.04)  translate(-48%,-48%);
transform:scale(1.04,1.04)  translate(-48%,-48%);
}
#lab .labList li .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#lab .labList li a:hover .img .cover{
opacity:1;
}
#lab .labList li .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:128.5%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
#lab .labList li .img .cover .more{
font-size:11pt;
}
}
#lab .labList li .ttl{
margin-bottom:30px;
line-height:1.4;
display:block;
color:#1a1a1a;
font-weight:bold;
}
@media screen and (max-width:767px){
#lab .labList li .ttl{
margin-bottom:10px;
font-size:10pt;
}
}
#lab .labList li .info{
margin-bottom:30px;
line-height:1.4;
display:block;
font-size:86%;
color:#85888b;
height:3.6em;
}
@media screen and (max-width:767px){
#lab .labList li .info{
margin-bottom:10px;
font-size:9pt;
}
}
#lab .labList li .date{
display:block;
}
#lab .labList li .date .cate{
font-size:93%;
margin-right:20px;
color:#85888b;
}
@media screen and (max-width:767px){
#lab .labList li .date .cate{
margin-right:10px;
font-size:9pt;
}
}
#lab .labList li .date .cate .cateIn:nth-last-child(2):before{
content:"｜";
}
#lab .labList li .date .cate .cateIn:nth-child(2):before{
content:"";
}
#lab .labList li .date .cate .cateIn:first-child,
#lab .labList li .date .cate .cateIn:last-child{
display:none;
}
#lab .labList li .date .abel{
font-size:86%;
color:#85888b;
letter-spacing:0.15em;
}
@media screen and (max-width:767px){
#lab .labList li .date .abel{
font-size:9pt;
}
}
/*---------------------------------------*/
/* blog */
/*---------------------------------------*/
#blog .blogList li{
width:30.5%;
margin-right:4.25%;
display:inline;
float:left;
margin-bottom:100px;
}
#blog .blogList.pickUp li{
width:48%;
margin-right:4%;
}
@media screen and (max-width:767px){
#blog .blogList li,
#blog .blogList.pickUp li{
width:100%;
margin-right:0;
margin-bottom:50px;
}
}
#blog .blogList li:nth-child(3n){
margin-right:0;
}
#blog .blogList.pickUp li:nth-child(2n){
margin-right:0;
}

#blog .blogList li a{
display:block;
}
#blog .blogList li .img{
display:block;
margin-bottom: 10px;
padding-top: 69.897%;
position: relative;
overflow: hidden;
}
#blog .blogList li .img img{
width:100%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#blog .blogList li a:hover .img img{
-moz-transform: scale(1.04,1.04)  translate(-48%,-48%);
-webkit-transform:scale(1.04,1.04)  translate(-48%,-48%);
-o-transform:scale(1.04,1.04)  translate(-48%,-48%);
-ms-transform:scale(1.04,1.04)  translate(-48%,-48%);
transform:scale(1.04,1.04)  translate(-48%,-48%);
}
#blog .blogList li .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#blog .blogList li a:hover .img .cover{
opacity:1;
}
#blog .blogList li .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:128.5%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
#blog .blogList li .img .cover .more{
font-size:11pt;
}
}
#blog .blogList li .date{
display:block;
width:90%;
margin:0 auto;
}
#blog .blogList li .date .cate{
padding-left:24px;
position:relative;
color:#85888b;
font-size:86%;
margin-right:20px;
}
@media screen and (max-width:767px){
#blog .blogList li .date .cate{
font-size:9pt;
}
}
#blog .blogList li .date .cate:after{
position:absolute;
top:6px;
left:0;
width:8px;
height:1px;
background:#85888b;
content:"";
display:block;
}
#blog .blogList li .date .cate .cateIn:nth-last-child(2):before{
content:"｜";
}
#blog .blogList li .date .cate .cateIn:nth-child(2):before{
content:"";
}
#blog .blogList li .date .cate .cateIn:first-child,
#blog .labList li .date .cate .cateIn:last-child{
display:none;
}
#blog .blogList li .date .abel{
font-size:93%;
letter-spacing:0.15em;
color:#85888b;
}
@media screen and (max-width:767px){
#blog .blogList li .date .abel{
font-size:9pt;
}
}
#blog .blogList li .ttl{
font-size:143%;
margin-bottom:20px;
display:block;
width:90%;
margin:0 auto 15px;
}
@media screen and (max-width:767px){
#blog .blogList li .ttl{
font-size:10pt;
}
}
#blog .blogList li .note{
color:#85888b;
display:block;
width:90%;
margin:0 auto;
height:5.4em;
}
/* blogNew */
#blog .blogNew li{
margin-bottom:30px;
}
#blog .blogNew li:not(:first-child){
position:relative;
min-height:58px;
}
#blog .blogNew li:not(:first-child) .img{
position:absolute;
top:0;
left:0;
width:86px;
height: 60px;
padding: 0;
}
#blog .blogNew li:not(:first-child) .date,
#blog .blogNew li:not(:first-child) .ttl{
margin-left:100px;
}
#blog .blogNew li .img{
display:block;
padding-top: 69.897%;
position: relative;
overflow: hidden;
}
#blog .blogNew li .img img{
width:100%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#blog .blogNew li a:hover .img img{
-moz-transform: scale(1.04,1.04)  translate(-48%,-48%);
-webkit-transform:scale(1.04,1.04)  translate(-48%,-48%);
-o-transform:scale(1.04,1.04)  translate(-48%,-48%);
-ms-transform:scale(1.04,1.04)  translate(-48%,-48%);
transform:scale(1.04,1.04)  translate(-48%,-48%);
}
#blog .blogNew li  .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#blog .blogNew li  a:hover .img .cover{
opacity:1;
}
#blog .blogNew li  .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
font-size:86%;
}
@media screen and (max-width:767px){
#blog .blogNew li  .img .cover .more{
font-size:11pt;
}
}
#blog .blogNew li .date{
display:block;
}
#blog .blogNew li .date .cate{
padding-left:14px;
position:relative;
color:#85888b;
font-size:86%;
margin-right:20px;
}
@media screen and (max-width:767px){
#blog .blogNew li .date .cate{
font-size:9pt;
}
}
#blog .blogNew li .date .cate .cateIn:nth-last-child(2):before{
content:"｜";
}
#blog .blogNew li .date .cate .cateIn:nth-child(2):before{
content:"";
}
#blog .blogNew li .date .cate .cateIn:first-child,
#blog .blogNew li .date .cate .cateIn:last-child{
display:none;
}
#blog .blogNew li .date .cate:after{
position:absolute;
top:6px;
left:0;
width:8px;
height:1px;
background:#85888b;
content:"";
display:block;
}
#blog .blogNew li .date .abel{
font-size:93%;
letter-spacing:0.15em;
color:#85888b;
}
@media screen and (max-width:767px){
#blog .blogNew li .date .abel{
font-size:9pt;
}
}
#blog .blogNew li .ttl{
display:block;
font-size:100%;
text-align:left;
font-weight:normal;
line-height:1.4;
height:2.8em;
}
@media screen and (max-width:767px){
#blog .blogNew li .ttl{
font-size:10pt;
}
}
/* blogSideレスポンシブ */
@media screen and (max-width:980px){
#blog .blogSideLeft{
float:left;
width:48%;
}
#blog .blogSideRight{
float:right;
width:48%;
}
}
@media screen and (max-width:767px){
#blog .blogSideLeft,
#blog .blogSideRight{
float:none;
width:100%;
}
}
/*---------------------------------------*/
/* gallery */
/*---------------------------------------*/
#gallery .galleryList li{
width:30.5%;
margin-right:4.25%;
display:inline;
float:left;
margin-bottom:100px;
}
@media screen and (max-width:767px){
#gallery .galleryList li{
width:100%;
margin-right:0;
margin-bottom:50px;
}
}
#gallery .galleryList li:nth-child(3n){
margin-right:0;
}
#gallery .galleryList li a{
display:block;
}
#gallery .galleryList li .img{
display:block;
margin-bottom:10px;
padding-top: 69.897%;
position: relative;
overflow: hidden;
}
#gallery .galleryList li img{
width:100%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#gallery .galleryList li a:hover img{
-moz-transform: scale(1.04,1.04) translate(-48%,-48%);
-webkit-transform:scale(1.04,1.04) translate(-48%,-48%);
-o-transform:scale(1.04,1.04) translate(-48%,-48%);
-ms-transform:scale(1.04,1.04) translate(-48%,-48%);
transform:scale(1.04,1.04) translate(-48%,-48%);
}
#gallery .galleryList li .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#gallery .galleryList li a:hover .img .cover{
opacity:1;
}
#gallery .galleryList li .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:128.5%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
#gallery .galleryList li .img .cover .more{
font-size:11pt;
}
}
#gallery .galleryList li .ttl{
line-height:1.4;
display:block;
color:#1a1a1a;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
@media screen and (max-width:767px){
#gallery .galleryList li .ttl{
margin-bottom:10px;
font-size:10pt;
}
}
/* gallery投稿 */
#gallery .galleryContent .img{
width:100%;
}
#gallery .galleryContent .img img{
max-width:100%;
height:auto;
display:block;
margin:0 auto;
}
#gallery .cateTtl .name{
display:block;
font-size:58%;
font-weight:normal;
}
@media screen and (max-width:767px){
#gallery .cateTtl .name{
font-size:9pt;
}
}
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
#contact .contactTop{
background:#fff;
padding:60px 0;
}
@media screen and (max-width:767px){
#contact .contactTop{
padding:35px 0 0;
}
}
#contact .contactTop .ttl{
font-size:128.5%;
font-weight:bold;
margin-bottom:20px;
}
@media screen and (max-width:767px){
#contact .contactTop .ttl{
font-size:11pt;
margin-bottom:10px;
}
}
#contact .contactTop .note{
margin-bottom:15px;
}
@media screen and (max-width:767px){
#contact .contactTop .note{
margin-bottom:10px;
}
}
#contact .contactTop .link a .txt{
border-bottom:1px solid #1a1a1a;
font-size:114%;
display:inline-block;
padding-bottom:5px;
margin-right:10px;
position:relative;
}
@media screen and (max-width:767px){
#contact .contactTop .link a .txt{
font-size:9pt;
}
}
#contact .contactTop .link a .txt:after{
position:absolute;
bottom:-1px;
left:0;
width:0%;
height:1px;
background:#f97c38;
content:"";
display:block;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#contact .contactTop .link a:hover .txt:after{
width:100%;
}
/*---------------------------------------*/
/* form */
/*---------------------------------------*/
@media screen and (max-width:767px){
.form .areaInner{
width:100%;
}
}
.form table.form{
width:100%;
}
@media screen and (max-width:980px){
.form table.form{
font-size:88%;
}
}
@media screen and (max-width:767px){
.form table.form{
font-size:9pt;
}
}
.form table.form tr.none{
border:none;
}
.form table.form th{
padding:30px 3% 30px 0;
width:33%;
font-size:114%;
}
@media screen and (max-width:767px){
.form table.form th{
padding:20px 3% 0;
width:94%;
font-size:9pt;
display:block;
}
}
.form table.form td{
padding:30px 0;
font-size:114%;
}
@media screen and (max-width:767px){
.form table.form td{
padding:10px 3% 20px;
display:block;
width:94%;
font-size:9pt;
}
}
.form table.form th .check{
color:#f97c38;
}
.form table.form td .blockLeft,
.form table.form td .blockRight{
display:inline-block;
width:47.5%;
}
@media screen and (max-width:767px){
.form table.form td .blockLeft,
.form table.form td .blockRight{
display:inline-block;
width:100%;
}
.form table.form td .blockLeft{
margin-bottom:5px;
}
}
.form .txt-l,.form .txt-s,.form .txt-area {
border:1px solid #bcbcbc;
border-radius: 0;
font-size: 100%;
height: 60px;
padding-left: 4%;
width: 95%;
-webkit-appearance: none;
cursor:pointer;
vertical-align:middle;
color:#333;
}
@media screen and (max-width: 767px) {
.form .txt-l,.form .txt-s,.form .txt-area {
height: 40px;
}
}
.form .txt-s {
padding-left: 2%;
width: 18%;
}
@media screen and (max-width: 767px) {
.form .txt-s {
padding-left: 4%;
width: 80%;
}
}
.form .txt-area {
height: 200px;
padding-bottom: 10px;
padding-top: 10px;
}
@media screen and (max-width: 767px) {
.form .txt-area {
height: 70px;
}
}
.form input[type="radio"]{
vertical-align:middle;
}
.form input:focus, .form textarea:focus, .form select:focus {
border: 1px solid #e2e2e2;
}
.form div.wpcf7-validation-errors {
border: 2px solid #e2e2e2 !important;
}
.form div.wpcf7-mail-sent-ok {
border: 2px solid #e2e2e2;
}
.form div.wpcf7-response-output {
margin-left: 30px !important;
margin-right: 30px !important;
margin-top: 0 !important;
text-align: center;
}
.form span.wpcf7-list-item {
padding-right: 15px;
}
.form .hasCustomSelect {
width: 100%;
}
.form .customSelect{
background: url(../images/page/contact-select.gif) no-repeat right center;
background-size: 60px 60px;height:60px;
line-height:60px;
padding: 0 2%;
width: 95%;
border:1px solid #bcbcbc;
color:#333;
}
@media screen and (max-width: 767px) {
.form .customSelect {
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
line-height:40px;
}
}
.form .blockLeft .customSelect,
.form .blockRight .customSelect{
padding: 0 4%;
width: 92%;
}
.form .wpcf7-list-item-label{
margin-left:10px;
}
.form .radio .wpcf7-list-item{
display:block;
margin-bottom:5px;
}
.form span.notes {
color: #a7a7a7;
font-size: 96%;
font-weight: normal;
}
@media screen and (max-width: 767px) {
.form span.notes {
display: block;
font-size: 9pt;
}
}
.form .agree{
text-align:center;
margin-bottom:30px;
font-size:114%;
}
@media screen and (max-width:767px){
.form .agree{
margin-bottom:10px;
font-size:9pt;
}
}
.acceptance{
margin-right:5px;
}
.form .privacyLink{
text-align:center;
margin-bottom:60px;
font-size:107%;
}
@media screen and (max-width:767px){
.form .privacyLink{
margin-bottom:30px;
font-size:9pt;
}
}
.btnSubmit input{
-webkit-appearance: none;
width:90%;
margin:0 auto;
max-width:395px;
height:75px;
line-height:73px;
color:#fff;
text-align:center;
display:block;
font-size:114%;
background:#f97c38;
border:1px solid #f97c38;
font-weight:bold;
position:relative;
z-index:120;
border-radius:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width:767px){
.btnSubmit input{
height:60px;
line-height:60px;
font-size:9pt;
}
}
.btnSubmit input:hover{
background:none;
color:#f97c38;
}
.wpcf7-recaptcha{
width: 304px;
margin: 0 auto 30px;
}
.recaptcha .wpcf7-form-control-wrap .wpcf7-not-valid-tip{
text-align: center;
}
/*---------------------------------------*/
/* privacy */
/*---------------------------------------*/
#privacy .translation{
    margin-bottom: 50px;
    text-align: center;
    position: relative;
    z-index: 10;
}
@media screen and (max-width: 767px){
#privacy .translation{
    margin-bottom: 20px;
    }
}
#privacy .privacyContent{
background: #fff;
}
#privacy .privacyTop{
    padding: 80px 0 50px;
min-height: inherit;
}
@media screen and (max-width: 767px){
#privacy .privacyTop{
    padding: 50px 0 30px;
}
}
#privacy .privacyTop .ttl{
font-size:128.5%;
font-weight:bold;
margin-bottom:20px;
}
@media screen and (max-width:767px){
#privacy .privacyTop .ttl{
font-size:11pt;
margin-bottom:10px;
}
}
#privacy .privacyContent .ttl{
font-size:171%;
font-weight:bold;
color:#f97c38;
margin-bottom:30px;
letter-spacing: 0.1em;
}
@media screen and (max-width:767px){
#privacy .privacyContent .ttl{
font-size:11pt;
margin-bottom:10px;
}
}
#privacy .privacyContent .listNum{
margin-left: 2em;
}
#privacy .privacyContent .list_num{
margin-left: -2em;
display: inline-block;
width: 2em;
}
#privacy .privacyContent .listEn{
margin-left: 1.8em;
}
#privacy .privacyContent .list_en{
margin-left: -1.8em;
display: inline-block;
width: 1.8em;
}
/*---------------------------------------*/
/* Prroduct */
/*---------------------------------------*/
/* 一覧 */
.productList li{
display:inline;
float:left;
width:31%;
margin-right:3.5%;
line-height:1.4;
margin-bottom:60px;
}
@media screen and (max-width:767px){
.productList li{
width:100%;
}
}
.productList li:nth-child(3n){
margin-right:0;
}
.productList li a,
.productList li span{
display:block;
}
.productList li .img{
position:relative;
}
.productList li img{
width:100%;
height:auto;
}
.productList li .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
color:#fff;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.productList li a:hover .img .cover{
opacity:1;
}
.productList li .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:128.5%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
.productList li .img .cover .more{
font-size:11pt;
}
}
.productList li .ttl{
font-size:143%;
font-weight:bold;
margin:15px 0;
}
.productList li .jp{
font-size:86%;
color:#4d4d4d;
margin-bottom:25px;
}
.productList li .selling{
font-size:78.5%;
color:#4d4d4d;
margin-bottom:5px;
}
.productList li .note{
font-size:71%;
color:#bcbcbc;
}
/* 詳細ページ */
#product .infomationTtl{
font-size:114%;
margin-bottom:15px;
}
@media screen and (max-width:767px){
#product .infomationTtl{
font-size:11pt;
}
}
#product .infoTable{
width:100%;
font-size:93%;
margin-bottom: 100px;
}
@media screen and (max-width:767px){
#product .infoTable{
margin-bottom:50px;
border-top:1px solid #333;
font-size:9pt;
}
}
#product .infoTable th{
width:18%;
padding:25px 2%;
border-bottom:1px solid #333;
}
#product .infoTable .game th{
height:30px;
line-height:30px;
}
@media screen and (max-width:767px){
#product .infoTable th{
width:98%;
display:block;
padding:10px 2% 5px;
border-bottom:1px dashed #bcbcbc;
}
#product .infoTable .game th{
height:auto;
line-height:inherit;
}
}
#product .infoTable th.line{
height:0;
padding:0 2%;
}
@media screen and (max-width:767px){
#product .infoTable th.line{
	display:none;
}
}
#product .infoTable td{
width:69%;
padding:25px 3%;
border-bottom:1px solid #333;
}
@media screen and (max-width:767px){
#product .infoTable td{
width:98%;
display:block;
padding:5px 2% 10px;
}
}
#product .infoTable td.line{
height:0;
padding:0 3%;
}
@media screen and (max-width:767px){
#product .infoTable td.line{
	display:none;
}
}
#product .infoTable td.blank{
width:3%;
border:none;
padding:25px 0;
}
#product .infoTable td.line.blank{
padding:0;
}
@media screen and (max-width:767px){
#product .infoTable td.blank,
#product .infoTable td.line.blank{
display:none;
}
}
#product .infoTable td span{
display:block;
}
#product .infoTable td span.name2{
margin-top:15px;
}
@media screen and (max-width:767px){
#product .infoTable td span.name2{
margin-top:10px;
}
}
#product .infoTable td span.note{
font-size:85%;
margin-bottom:15px;
}
@media screen and (max-width:767px){
#product .infoTable td span.note{
font-size:8pt;
margin-bottom:10px;
}
}
#product .infoTable td span.icon-box{
display:inline-block;
margin-left:10px;
font-size:77%;
color:#fff;
height: 16px;
line-height: 15px;
background:#f97c38;
padding:0 8px;
}
@media screen and (max-width:767px){
#product .infoTable td span.icon-box{
font-size:8pt;
}
}
#product .infoTable td img{
height:30px;
width:auto;
margin-right:15px;
}
@media screen and (max-width:767px){
#product .infoTable td img{
margin-right:10px;
}
#product .infoTable td .blockRight{
display:block;
float:none;
margin-top:10px;
}
}
#product #nav-below{
text-align:center;
}
#product #nav-below ul .nav-previous,
#product #nav-below ul .nav-next{
display:inline-block;
width:34%;
font-size:143%;
font-weight:bold;
position:relative;
}
@media screen and (max-width:980px){
#product #nav-below ul .nav-previous,
#product #nav-below ul .nav-next{
font-size:114%;
}
}
@media screen and (max-width:767px){
#product #nav-below ul .nav-previous,
#product #nav-below ul .nav-next{
font-size:9pt;
width:44%;
}
}
#product #nav-below ul .nav-next{
text-align:left;
padding-left:6%;
}
#product #nav-below ul .nav-previous{
text-align:right;
padding-right:6%;
}
@media screen and (max-width:767px){
#product #nav-below ul .nav-next{
padding-left:4%;
}
#product #nav-below ul .nav-previous{
padding-right:4%;
}
}
#product #nav-below ul .nav-previous a,
#product #nav-below ul .nav-next a{
display:inline-block;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
height:28px;
line-height:28px;
width:94%;
}
@media screen and (max-width:767px){
#product #nav-below ul .nav-previous a,
#product #nav-below ul .nav-next a{
height:15px;
line-height:15px;
}
}
#product #nav-below ul .nav-previous .icon-arrow,
#product #nav-below ul .nav-next .icon-arrow{
font-size:28px;
position:absolute;
top:0;
display:inline-block;
}
#product #nav-below ul .nav-next .icon-arrow{
left:0;
}
#product #nav-below ul .nav-previous .icon-arrow{
right:0;
}
@media screen and (max-width:767px){
#product #nav-below ul .nav-previous .icon-arrow,
#product #nav-below ul .nav-next .icon-arrow{
font-size:15px;
height:15px;
}
}
#product #nav-below ul .nav-next .icon-arrow{
-webkit-transform: translateY(0) rotate(180deg);
transform: translateY(0) rotate(180deg);
}
#product  .nav-list{
display:inline-block;
width: 15%;
vertical-align: middle;
}
@media screen and (max-width:767px){
#product #nav-below ul .nav-list{
display:none;
}
#product  .nav-list{
width: 100%;
text-align:center;
margin-top:30px;
}
}
#product  .nav-list .btnIcon{
display:inline-block;
width:30px;
height:30px;
position:relative;
}
#product  .nav-list .btnIconInner{
position:absolute;
left:0;
width:8px;
height:8px;
display:block;
background:#333;
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
#product  .nav-list a:hover .btnIconInner{
left:3px;
}
#product  .nav-list a .btnIconInner.top{
top:0;
}
#product  .nav-list a:hover .btnIconInner.top{
top:3px;
}
#product  .nav-list a .btnIconInner.middle{
top:11px;
}
#product  .nav-list a .btnIconInner.bottom{
bottom:0;
}
#product  .nav-list a:hover .btnIconInner.bottom{
bottom:3px;
}
#product  .nav-list a .btnIconInner:before{
position:absolute;
left:11px;
width:8px;
height:8px;
display:block;
background:#333;
content:" ";
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
#product  .nav-list a:hover .btnIconInner:before{
left:8px;
}
#product  .nav-list a .btnIconInner:after{
position:absolute;
left:22px;
width:8px;
height:8px;
display:block;
background:#333;
content:" ";
-webkit-transition: all 0.2s ease 0.1s;
-moz-transition: all 0.2s ease 0.1s;
-o-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
}
#product  .nav-list a:hover .btnIconInner:after{
left:16px;
}
#product  .nav-list .name{
display:block;
letter-spacing:0.2em;
font-size:86%;
}
/*---------------------------------------*/
/* basePage */
/*---------------------------------------*/
#basePage .basePageTop{
background:#fff;
padding:50px 0;
}
@media screen and (max-width:767px){
#basePage .basePageTop{
padding:30px 0 0;
}
}
#basePage .basePageTop .ttl{
font-size:128.5%;
font-weight:bold;
margin-bottom:20px;
}
@media screen and (max-width:767px){
#basePage .basePageTop .ttl{
font-size:11pt;
margin-bottom:10px;
}
}
#basePage .basePageTop .note{
margin-bottom:15px;
}
@media screen and (max-width:767px){
#basePage .basePageTop .note{
margin-bottom:10px;
}
}