@charset "utf-8";

.loadingLogo {
    width: 100px !important;
    height: 78px !important;
}


/* keyVisual
--------------------------------------------------------------------- */
#keyVisual {
    position: relative;
    overflow: hidden;
}
#keyVisual #kvNavDot {
    display: none;
    position: absolute;
    left: 0;
    bottom: 37px;
    width: 100%;
    text-align: center;
    z-index: 10;
}
#keyVisual.dotNav #kvNavDot {
    display: block;
}

#keyVisual.dotNav #kvNaviArea {
    display: none;
}

#keyVisual #kvNavDot li {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 7px;
}
#keyVisual #kvNavDot li a {
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #969696;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual #kvNavDot li a:hover,
#keyVisual #kvNavDot li.act a {
    background-color: #fff;
}
#keyVisual .bgImg.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
}
#keyVisual .bgImg {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    -webkit-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    -moz-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    -o-transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    transition: -webkit-filter,-moz-filter,filter 0.4s ease-out;
    pointer-events: none;
}
#keyVisual .bgImg li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

#keyVisual .bgBtn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

#keyVisual .bgImg li:nth-child(1),
#keyVisual .bgImgBlur li:nth-child(1) {
    z-index: 9;
}
#keyVisual .bgImg li:nth-child(2),
#keyVisual .bgImgBlur li:nth-child(2) {
    display: none;
    z-index: 8;
}
#keyVisual .bgImg li:nth-child(3),
#keyVisual .bgImgBlur li:nth-child(3) {
    display: none;
    z-index: 7;
}
#keyVisual .bgImg li:nth-child(4),
#keyVisual .bgImgBlur li:nth-child(4) {
    display: none;
    z-index: 6;
}
#keyVisual .bgImg li:nth-child(5),
#keyVisual .bgImgBlur li:nth-child(5) {
    display: none;
    z-index: 5;
}
#keyVisual .bgImg li:nth-child(6),
#keyVisual .bgImgBlur li:nth-child(6) {
    display: none;
    z-index: 4;
}
#keyVisual .bgImg li:nth-child(7),
#keyVisual .bgImgBlur li:nth-child(7) {
    display: none;
    z-index: 3;
}
#keyVisual .bgImg li:nth-child(8),
#keyVisual .bgImgBlur li:nth-child(8) {
    display: none;
    z-index: 2;
}

#keyVisual .bgImgBlur {
    position: absolute;
    top: 25.3216%;
    right: 60px;
    width: 348px;
    height: 439px;
    overflow: hidden;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 10;
}
#keyVisual .bgImgBlur li {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	filter: blur(10px);
	filter: url(../images/filters.xml#blur_saturate);
}

#keyVisual .dummy img {
    width: 100%;
    height: auto;
    pointer-events: none;
}

#keyVisual > .txt {
    box-sizing: border-box;
    z-index: 10;
    color: #fff;
    padding: 0 60px;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#keyVisual > .txt > ul {
    min-width: 1136px;
    max-width: 1320px;
    position: relative;
    margin: 0 auto;
}

#keyVisual > .txt.on-mouse {
    opacity: 1;
    margin-top: 0px;

    -webkit-transition: all 0.7s linear;
    -moz-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}
#keyVisual > .txt .kvTtl {letter-spacing: 5px;
    font-family:'DIN Next W06 Regular';
    display: block;
    font-size: 46px;
    letter-spacing: 0.08em;
    line-height: 1.15;
    margin-bottom: 18px;
}
#keyVisual > .txt .kvTtl .ja {letter-spacing: 5px;
    font-family:'AxisStd-Light';
    font-size: 50px;
}
#keyVisual > .txt .kvTtl .light {letter-spacing: 5px;
    font-family:'DIN Next W06 Ultra Light';
    font-weight: 600;
}
#keyVisual > .txt .kvSubTtl {
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    letter-spacing: 0.08em;
    font-size: 14px;
    line-height: 2.0;
    display: block;
}
#keyVisual > .txt .kvSubTtl .feature-title,
#keyVisual > .txt .kvTtl .feature-title {
    font-size: 16px;
    line-height: 2.0;
    letter-spacing: 0.08em;
    font-family: 'AxisStd-Light';
}
/*
#keyVisual > .txt .kvTtl .feature-title {
    line-height: 1.15;
}

#keyVisual > .txt .kvTtl .feature-title {
    letter-spacing: 0.15em;
}
*/

#keyVisual.dotNav > .txt ul li.li-txt-wrap .light{
    font-family:'DIN Next W06 Light';
    font-weight: normal;
    font-size: 46px;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 24px;
    margin-top: -6px;
}
#keyVisual.dotNav > .txt ul li.li-txt-wrap .feature-title{
    font-size: 16px;
    line-height: 2.0;
    letter-spacing: 0.08em;
    font-weight: 500;
    font-family: "Hiragino Sans W5","ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    margin-bottom: 22px;
    margin-top: -8px;
}
#keyVisual.dotNav > .txt ul li.li-txt-wrap .kvSubTtl{
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    letter-spacing: 0.08em;
    font-size: 14px;
    line-height: 2.0;
    display: block;
    margin-top: -7px;
}

#keyVisual > .txt ul li {
    position: absolute;
    right: 0px;
    bottom: 228px;
    margin-right: 25%;
    font-size: 14px;
    pointer-events: none;
    background: rgba(0,0,0,0.5);
    padding: 30px 30px 30px 30px;
    width: 525px;
    height: 248px;
    box-sizing: border-box;
}
#keyVisual.dotNav > .txt ul li {
    margin-right: 0;
}
#keyVisual > .txt ul a {
    font-family:'AxisStd-Regular';
    display: inline-block;
    color: #444;
    border: 1px solid #fff;
    margin-top: 46px;
    padding: 0 35px 0 19px;
    background: #fff url(../common/images/ico_arrow02.png) 95% center no-repeat;
    height: 48px;
    line-height: 48px;
    min-width: 240px;
    text-align: center;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
    pointer-events: all;
    position: relative;
    z-index: 10;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: -50px;
}
#keyVisual > .txt ul a:before {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
    z-index: 0;
    opacity: 0;
    background: url(../common/images/ico_arrow01.png) 95% center no-repeat;
}
#keyVisual > .txt ul a:after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
    z-index: -1;
    background: #444 ;
}
#keyVisual > .txt ul a:hover {
    color: #fff;
}
#keyVisual > .txt ul a:hover:before {
    opacity: 1;
}
#keyVisual > .txt ul a:hover:after {
    left:0;
}

@media screen and (max-width: 1830px) { #keyVisual > .txt ul li { margin-right: 27%; } }
@media screen and (max-width: 1630px) { #keyVisual > .txt ul li { margin-right: 31%; } }
@media screen and (max-width: 1530px) { #keyVisual > .txt ul li { margin-right: 34%; } }
@media screen and (max-width: 1430px) { #keyVisual > .txt ul li { margin-right: 36%; } }
@media screen and (max-width: 1330px) { #keyVisual > .txt ul li { margin-right: 37%; } }
@media screen and (max-width: 1230px) { #keyVisual > .txt ul li { margin-right: 38%; } }

#keyVisual > .txt > ul > li:nth-child(n+2) {
    display: none;
}
#keyVisual > .txt > ul > li .en {
    font-family:'DIN Next W06 Regular';
    font-size: 16px;
    letter-spacing: 0.2em;
}

#keyVisual #kvNavi {
    position: absolute;
    top: 25.3216%;
    right: 60px;
    width: 348px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 10;
}

#keyVisual #kvNavi > div {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    background: url(../common/images/bg_white_a20.png);
}
#keyVisual .pagerOn #kvNavi > div {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

#keyVisual .pagerOn #kvNavi > div {
    position: absolute;
    top: 0;
    width: 348px;
    height: 439px;
}

#keyVisual #btnNext,
#keyVisual #btnPrev {
    display: none;
}
#keyVisual .pagerOn #btnNext,
#keyVisual .pagerOn #btnPrev {
    display: block;
    width: 348px;
    height: 24px;
    position: absolute;
    z-index: 10;
    background: url(../common/images/bg_white_a20.png);
}
#keyVisual .pagerOn #btnNext a,
#keyVisual .pagerOn #btnPrev a {
    display: block;
    height: 24px;
    text-align: center;
    line-height: 16px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual .pagerOn #btnNext a:hover,
#keyVisual .pagerOn #btnPrev a:hover {
    background-color: rgba(255,255,255,0.3);
}

#keyVisual .pagerOn #btnPrev {
    top: -24px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
#keyVisual .pagerOn #btnNext {
    top: 439px;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.5);
}
#keyVisual .pagerOn .bgImgBlur {
    top: 27.18707940780619%;
    height: 487px;
    margin-top: -24px;
}
#keyVisual .line3 .bgImgBlur {
    height: 377px;
}
#keyVisual .line2 .bgImgBlur {
    height: 267px;
}
#keyVisual .line1 .bgImgBlur {
    height: 157px;
}
#keyVisual .pagerOn #kvNavi {
    top: 27.18707940780619%;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

#keyVisual .pagerOn #kvNavi ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 348px;
}
/*#keyVisual:after {
    content: url("../common/images/dummy.gif") ;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}*/
#keyVisual #kvNavi li {
    position: relative;
    height: 110px;
    padding: 38px 0 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#keyVisual #kvNavi li:last-child {
    border: none;
}

#keyVisual #kvNavi li.act:after,
#keyVisual #kvNavi li:hover:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 34px;
    width: 3px;
    height: 34px;
    background-color: #fff;
}

#keyVisual #kvNavi li:hover,
#keyVisual #kvNavi li.act {
    background-color: rgba(255,255,255,0.3);
}

#keyVisual #kvNavi li .thum img {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 122px;
    height: 69px;
}

#keyVisual #kvNavi li .txt {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}


#content {
    max-width: 100%;
}
#content .inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
}
#content .btnType01 {
    font-family:'DIN Next W06 Regular';
    font-size: 16px;
    letter-spacing: 0.15em;
}


#content h2 {
    margin-bottom: 24px;
}
#content h2 .txtEn {
    font-family:'DIN Next W06 Regular';
    float: left;
    font-size: 34px;
    letter-spacing: 0.15em;
    font-weight: normal;
    line-height: 28px;
}
#content h2 .txtJp {
    font-family:'AxisStd-Regular';
    display: block;
    float: left;
    font-size: 14px;
    height: 24px;
    margin-top: 2px;
    border-left: 1px solid #555;
    padding-left: 19px;
    margin-left: 20px;
    line-height: 24px;
    letter-spacing: 0.15em;
}


/* SERVICE
--------------------------------------------------------------------- */

#service {
    position: relative;
    padding: 80px 60px;
}


#service .keywords .secLeft,
#service .keywords .secRight {
    margin: 50px 0;
}

#service .keywords .secLeft {
    float: left;
    position: relative;
    width: 299px;
    height: 68px;
    border-radius: 4px;
    margin-right: -314px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #555;
    color: #fff;
    padding: 12px 0 0 75px;
    box-sizing: border-box;
}
#service .keywords .secLeft:after {
    content: url("../images/bg_service_keywords.png");
    display: block;
    position: absolute;
    right: -15px;
    top: 26px;
    width: 16px;
    height: 16px;
}
#service .keywords .secLeft > p {
    line-height: 43px;
}
#service .keywords .secLeft > p > span {
    font-family:'DIN Next W06 Light';
    display: block;
    font-size: 11px;
    color: #999;
    padding-top: 4px;
    letter-spacing: 0.02em;
    display: none;
}

#service .keywords .secLeft .icoRss {
    position: absolute;
    left: 10px;
    top: 10px;
}

#service .keywords .secRight {
    font-family:'AxisStd-Regular';
    float: right;
    width: 100%;
}
#service .keywords .secRight > div {
    margin-left: 314px;
}

#service .keywords .secRight > div > div {
    float: left;
    position: relative;
    width: 24.77477477477477%;
    height: 68px;
    line-height: 68px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-align: center;
    margin-left: 0.2252252252252252%;
    background: #fff url(../images/ico_service_arrow.png) 96% center no-repeat;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#service .keywords .secRight > div > div .icoNew {
    display: none;
    position: absolute;
    left: 10px;
    top: -15px;
    width: 30px;
    height: auto;
    line-height: 1.5;
}
#service .keywords .secRight > div > div:hover {
    background: #ccc url(../images/ico_service_arrow_on.png) 96% center no-repeat;
}

#service .keywords .secRight > div > div > div {
    position: relative;
    height: 68px;
    overflow: hidden;
}
#service .keywords .secRight > div > div ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
#service .keywords .secRight > div > div ul a {
    display: block;
    height: 68px;
}

#service #category > div {
    float: left;
}

#service #category > div a {
    display: block;
    padding: 40px 0 30px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-align: center;
}
#service #category > div a .img {
    display: block;
    text-align: center;
    margin-bottom: 30px;
}
#service #category > div a .img img {
    width: 63.54515050167224%;
    height: auto;
}

#service #category > div a .category {
    font-family:'DIN Next W06 Regular';
    display: block;
    font-size: 22px;
    letter-spacing: 0.15em;
}
#service #category > div a .category > span {
    font-family:'AxisStd-Regular';
    display: block;
    background: url(../common/images/bg_btm-solid.png) center bottom no-repeat;
    font-size: 12px;
    padding: 5px 0 23px;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}
#service #category > div a .txt {
    display: block;
    font-size: 14px;
    line-height: 2;
    padding: 0 11.03678929765886%;
}

#service #category > div a:hover .category > span {
    background: url(../common/images/bg_btm-solid_on.png) center bottom no-repeat;
}

#service #category > div a {
    background-color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#service #category > div a:hover {
    background-color: #222;
    color: #fff;
}

#service #category > div:nth-child(1) {
    width: 24.91666666666667%;
}
#service #category > div:nth-child(2),
#service #category > div:nth-child(3) {
    width: 24.83333333333333%;
    margin-left: 0.1666666666666667%;
}
#service #category > div:nth-child(4) {
    width: 24.91666666666667%;
    margin-left: 0.1666666666666667%;
}


/* WORKS
--------------------------------------------------------------------- */

#works {
    position: relative;
    padding: 80px 60px;
    background-color: #fff;
}

#works .worksList {
    padding: 50px 0 0 ;
}
#works .worksList > div {
    position: relative;
    float: left;
    width: 24.875%;
    margin: 0 0.125% 2px 0;
    mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5;
    mask-box-size:100% 100%;
    -webkit-mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5 ;
    -webkit-mask-box-size:100% 100%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: hidden;

}

#works .worksList > div > img {
    width: 100%;
    height: auto;
}

#works .worksList > div a {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#works .worksList > div a .over {
    display: none;
}

#works .worksList > div a .squareSolidX {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 82%;
    height: 82%;
    margin: 8.75%;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    z-index: 5;
    box-sizing: border-box;
}
#works .worksList > div a .squareSolidY {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 82%;
    height: 82%;
    margin: 8.75%;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    z-index: 5;
    box-sizing: border-box;
}

#works .worksList > div a > .over {
    position: absolute;
    left: 0;
    top: 0;
    display: table;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 10;
}
#works .worksList > div a > .over > span {
    display: table-cell;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0em;
}

#works .worksList > div a > .over > span .ttl {
    display: block;
    font-size: 20px;
    padding: 0 14.75% 0;
    margin-bottom: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#works .worksList > div a > .over > span .lead {
    display: block;
    font-size: 12px;
    line-height: 2;
    padding: 12px 14.75% 0;
    background: url(../common/images/bg_btm-solid_on.png) center top no-repeat;
}

#works .worksList > div svg {
    width: 100%;
    height: 100%;
}

#works .btn {
    margin-top: 43px;
    text-align: center;
}



/* VISUAL SHIFT
--------------------------------------------------------------------- */

#visualShift {
    position: relative;
    padding: 80px 60px;
}

#visualShift .visualShiftList {
    padding: 50px 0 0 ;
}
#visualShift .visualShiftList > div {
    position: relative;
    float: left;
    width: 33.25%;
    margin: 0 0 20px 0;
    mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5;
    mask-box-size:100% 100%;
    -webkit-mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5 ;
    -webkit-mask-box-size:100% 100%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: hidden;
}
#visualShift .visualShiftList > div:nth-child(2),
#visualShift .visualShiftList > div:nth-child(5) {
    margin: 0 0.125% 20px;
}

#visualShift .visualShiftList .dummy {
    width: 100%;
    height: auto;
}

#visualShift .visualShiftList > div a {
    display: block;
}

#visualShift .visualShiftList .thum {
    position: relative;
    display: block;
    overflow: hidden;
}
#visualShift .visualShiftList .thum > span {
    display: block;
    position: absolute;
    right: 21px;
    bottom: 15px;
    color: #fff;
    z-index: 2;
    min-width: 93px;
}

#visualShift .visualShiftList .thum > span > span {
    font-family:'DINNextW01-CondensedUlt';
    font-size: 55px;
    text-align: center;
    display: block;
    line-height: 63px;
}
#visualShift .visualShiftList .thum > span > span .num {
    font-family:'DIN Next W06 Ultra Ligh1366524';
    letter-spacing: -0.05em;
}
#visualShift .visualShiftList .thum > span > span .num img {
    vertical-align: baseline;
    margin-top: 1px;
}
#visualShift .visualShiftList .thum > span > span .num > img:nth-child(1) {
    margin-left: 6px;
}
#visualShift .visualShiftList .thum > span > span .num > img:nth-child(2),
#visualShift .visualShiftList .thum > span > span .num > img:nth-child(3),
#visualShift .visualShiftList .thum > span > span .num > img:nth-child(4) {
    margin-left: 10px;
}
#visualShift .visualShiftList .thum > span .category {
    font-family:'DIN Next W06 Light';
    display: block;
    margin: 0 auto;
    padding: 5px 0 0;
    font-size: 14px;
    border-top: 1px solid #fff;
    text-align: center;
    letter-spacing: 0.15em;
    line-height: 1.5;
}

#visualShift .visualShiftList svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#visualShift .visualShiftList .txt {
    display: block;
    background-color: #fff;
    height: 175px;
    padding: 20px 32px 32px;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#visualShift .visualShiftList a:hover .txt {
    background-color: #222;
    color: #fff;
}

#visualShift .visualShiftList .txt .lead {
    font-family:'AxisStd-Regular';
    font-size: 18px;
    line-height: 1.8;
}
#visualShift .visualShiftList .txt .date {
    font-family:'DIN Next W06 Light';
    position: absolute;
    right: 30px;
    bottom: 24px;
    display: block;
    font-size: 13px;
    text-align: right;
}


/* PICKUP SPACES
--------------------------------------------------------------------- */
#pickup {
    position: relative;
    padding: 80px 60px 60px;
    color: #fff;
    min-height: 867px;
    box-sizing: border-box;
}
#pickup h2 .txtJp {
    border-left: 1px solid #fff;
}
#pickup .ttl {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

#pickup p .btnType01 {
    position: absolute;
    top: 20px;
    right: 0;
    z-index: 10;
}

#pickup .dummy img {
    width: 100%;
    height: auto;
}

#pickup .bgImg {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}
#pickup .bgImg li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}
#pickup .bgImg li:nth-child(1) {
    background: url(../images/bg_pickup03.jpg) center top no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    z-index: 2;
}
#pickup .bgImg li:nth-child(2) {
    background: url(../images/Top_PickUp_1320x743.jpg) center top no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    z-index: 1;
}

#pickup #slideArea {
    position: absolute;
    right: 0;
    top: 118px;
    width: 430px;
    min-height: 485px;
    padding: 70px 40px 30px;
    background: url(../common/images/bg_white_a80.png);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align: center;
    color: #444;
    box-sizing: border-box;
    z-index: 10;
}

.bx-viewport {
    padding-bottom: 80px;
}

#pickup .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: 10px;
    width: 100%;
}


#pickup #slideArea .ttlLow {
    font-family:'DIN Next W06 Regular';
    font-size: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    background: url(../common/images/bg_btm-solid.png) center bottom no-repeat;
    letter-spacing: 0.15em;
}
#pickup #slideArea .ttlLow span {
    font-family:'AxisStd-Regular';
    display: block;
    font-size: 12px;
    letter-spacing: 0;
}

#pickup #slideArea .description {
    padding: 0 30px 20px;
    line-height: 2;
}
#pickup #slideArea .detail {
    display: block;
    font-size: 12px;
    margin-bottom: 45px;
}
#pickup #slideArea .detail > span {
    line-height: 2;
    display: block;
}
#pickup #slideArea .btnMore a {
    font-family:'DIN Next W06 Regular';
    display: inline-block;
    font-size: 16px;
    height: 26px;
    line-height: 27px;
    padding-left: 43px;
    letter-spacing: 0.15em;
    background: url(../images/ico_pickup_more.png) 0 0 no-repeat;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
#pickup #slideArea .btnMore:hover a {
    filter: alpha(opacity=70);
    -moz-opacity:0.70;
    opacity:0.70;
}

#pickup .btnType01 {
    border: 1px solid #fff;
}
#pickup .btnType01 span {
    display: block;
    background: url(../common/images/ico_arrow01.png) 95% center no-repeat;
    color: #fff;
}
#pickup .btnType01:hover {
    background-color: #fff;
}
#pickup .btnType01:hover span {
    color: #555;
    background: url(../common/images/ico_arrow02.png) 95% center no-repeat;
}


/* NEWS
--------------------------------------------------------------------- */
#news {
    box-sizing: border-box;
    position: relative;
    padding: 80px 60px;
}

#news * {
    box-sizing: border-box;
}

#news .news-list {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#news .news-list a:hover {
    opacity: 0.7 !important;
    transition: opacity 0.3s;
}
#news .news-list .item {
    display: flex;
    align-items: flex-start;
    width: 46.742424%;
    margin-bottom: 30px;
}
#news .news-list .item .thumb {
    position: relative;
    width: 23.824959%;
}
#news .news-list .item .thumb::before {
    content: '';
    display: block;
    padding-top: 81.652174%;
}
#news .news-list .item .thumb .img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#news .news-list .item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    border-radius: 4px;
}
#news .news-list .item .info {
    width: 70.82658%;
    padding-top: 18px;
    padding-left: 20px;
}
#news .news-list .item .info .head {
    display: flex;
    align-items: flex-start;
}
#news .news-list .item .info .head .date {
    width: 87px;
    font-size: 12px;
    font-family:'DIN Next W06 Regular';
    color: #555555;
    line-height: 2;
    letter-spacing: 0.1em;
}
#news .news-list .item .info .head .label-area {
    width: calc(100% - 87px);
}
#news .news-list .item .info .head .label {
    margin-right: 10px;
    display: inline-block;
    background-color: #000;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 2px;
    min-width: 100px;
    text-align: center;
    letter-spacing: 0.2em;
}
#news .news-list .item .info .ttl {
    margin-top: 14px;
    font-size: 14px;
    font-family: "HiraKakuProN",sans-serif;
    font-family: "Hiragino Sans W5",sans-serif;
    font-weight: 500;
    color: #555555;
    line-height: 1.429;
    letter-spacing: 0.14em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#news .btn {
    margin-top: 22px;
    text-align: center;
}



/* news old */
#content #news .btnType01 {
    top: 0;
}

#news .newsList {
    padding: 31px 0 0 ;
}
#news .newsList > div {
    position: relative;
    float: left;
    width: 24.90625%;
    margin: 0 0 20px 0.125%;
    mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5;
    mask-box-size:100% 100%;
    -webkit-mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5 ;
    -webkit-mask-box-size:100% 100%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: hidden;
}
#news .newsList > div:first-child {
    margin: 0 0 20px 0;
}

#news .newsList .dummy {
    width: 100%;
    height: auto;
}

#news .newsList > div a {
    display: block;
}
#news .newsList .thum {
    position: relative;
    display: block;
    overflow: hidden;
}
#news .newsList a .overZoomModern img {
    height: auto;
}
#news .newsList svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#news .newsList .badgeNews {
    float: right;
    display: block;
    width: 84px;
    height: 19px;
    font-size: 10px;
    text-align: center;
    line-height: 19px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #999;
    color: #fff;
    margin-left: 3px;
}
#news .newsList .badgeRelease {
    float: right;
    display: block;
    width: 84px;
    height: 19px;
    font-size: 10px;
    text-align: center;
    line-height: 19px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #576e85;
    color: #fff;
    margin-left: 3px;
}
#news .newsList .badgeEvent {
    float: right;
    display: block;
    width: 84px;
    height: 19px;
    font-size: 10px;
    text-align: center;
    line-height: 19px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #738c6e;
    color: #fff;
    margin-left: 3px;
}

#news .newsList .txt {
    display: block;
    background-color: #fff;
    height: 158px;
    padding: 20px 6% 32px; /* 20px 32px 32px*/
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#news .newsList a:hover .txt {
    background-color: #222;
    color: #fff;
}
#news .newsList a .txt .lead {
    clear: both;
    font-family:'AxisStd-Regular';
    font-size: 16px;
    line-height: 1.8;
}

#news .newsList .txt .date {
    font-family:'DIN Next W06 Light';
    display: block;
    font-size: 13px;
    margin-bottom: 7px;
}


/* VISUAL SHIFT
--------------------------------------------------------------------- */
#content #visualshift .btn {
    text-align: center;
    padding: 50px 0 0;
}
#content #visualshift .btnType01 {
    font-family: 'DIN Next W06 Regular';
    position: static;
    font-size: 16px;
    letter-spacing: 0.15em;
    line-height: 46px;
}
#content #visualshift .btnType01:hover {
    color: #fff;
}

#content #visualshift .btnType01 span {
    padding-right: 35px;
    padding-left: 14px;
    background: url(../images/ico_vs_blank.png) right 4px no-repeat;
}
#content #visualshift .btnType01:hover span {
    background: url(../images/ico_vs_blank_on.png) right 4px no-repeat;
}


#visualshift {
    position: relative;
    padding: 80px 60px;
}

#visualshift h2 .txtEn {
    line-height: 0;
    vertical-align: bottom;
}
#visualshift h2 .txtJp {
    margin-top: 0;
}
#visualshift .lead {
    margin-bottom: 47px;
}

#visualshift .articleList > div {
	font-family:"ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    width: 24.90625%;
    box-sizing: border-box;
    float: left;
    margin: 0 0 0 0.125%;
    mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5;
    mask-box-size:100% 100%;
    -webkit-mask-box-image:url("../common/images/mask_radius_4444.png") 5 5 5 5 ;
    -webkit-mask-box-size:100% 100%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    overflow: hidden;
}
#visualshift .articleList > div:first-child  {
    margin: 0;
}

#visualshift .articleList > div .thum {
    position: relative;
    display: block;
    overflow: hidden;
}

#visualshift .articleList > div a {
    display: block;
    height: 100%;
    background-color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
#visualshift .articleList > div a:hover {
    color: #fff;
    background-color: #222222;
}
#visualshift .articleList .dummy {
    width: 100%;
    height: auto;
}
#visualshift .articleList svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#visualshift .articleList > div .txt {
    position: relative;
    height: 230px;
    padding: 24px 26px 0;
    box-sizing: border-box;
    background: url(../images/ico_vs_blank.png) right bottom no-repeat;
}
#visualshift .articleList > div a:hover .txt {
    background: url(../images/ico_vs_blank_on.png) right bottom no-repeat;
}
#visualshift .articleList > div .txt .head {
    position: relative;
    margin-bottom: 12px;
    line-height: 0;
}
#visualshift .articleList > div .txt .head .category {
    display: inline-block;
    line-height: 10px;
    box-sizing: border-box;
}
#visualshift .articleList > div .txt .head .category img {
    height: 10px;
    vertical-align: bottom;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all  0.4s ease;
}
#visualshift .articleList > div a:hover .txt .head .category img {
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}
#visualshift .articleList > div .txt .head .category:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 10px;
	filter: alpha(opacity=0);
	-moz-opacity:0.00;
	opacity:0.00;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all  0.4s ease;
}
#visualshift .articleList > div a:hover .txt .head .category:after {
	filter: alpha(opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
}
#visualshift .articleList > div.column .txt .head .category:after {
    width: 67px;
   background: url(../images/txt_column_white.png) 0 0 no-repeat;
    background-size: 67px 10px;
    -moz-background-size: 67px 10px;
    -webkit-background-size: 67px 10px;
    -o-background-size: 67px 10px;
    -ms-background-size: 67px 10px;
}
#visualshift .articleList > div.event .txt .head .category:after {
    width: 50px;
   background: url(../images/txt_event_white.png) 0 0 no-repeat;
    background-size: 50px 10px;
    -moz-background-size: 50px 10px;
    -webkit-background-size: 50px 10px;
    -o-background-size: 50px 10px;
    -ms-background-size: 50px 10px;
}
#visualshift .articleList > div.study .txt .head .category:after {
    width: 52px;
   background: url(../images/txt_study_white.png) 0 0 no-repeat;
    background-size: 52px 10px;
    -moz-background-size: 52px 10px;
    -webkit-background-size: 52px 10px;
    -o-background-size: 52px 10px;
    -ms-background-size: 52px 10px;
}
#visualshift .articleList > div.think .txt .head .category:after {
    width: 48px;
   background: url(../images/txt_think_white.png) 0 0 no-repeat;
    background-size: 48px 10px;
    -moz-background-size: 48px 10px;
    -webkit-background-size: 48px 10px;
    -o-background-size: 48px 10px;
    -ms-background-size: 48px 10px;
}

#visualshift .articleList > div .txt .head .date {
    display: inline-block;
    font-size: 12px;
    height: 10px;
    line-height: 10px;
    -webkit-transition: border-left 0.4s ease;
    -moz-transition: border-left 0.4s ease;
    -o-transition: border-left 0.4s ease;
    transition: border-left  0.4s ease;
}
#visualshift .articleList > div .txt .ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}
#visualshift .articleList > div .txt .lead {
    font-size: 14px;
    line-height:1.5;
}

/* information
--------------------------------------------------------------------- */
#amana-info {
    font-size: 14px;
    max-width: 1600px;
    min-width: 1136px;
    margin: 30px auto 0px;
    letter-spacing: 0.05em;
    background-color: #fff;
    padding: 10px 60px;
    font-family: 'AxisStd-Lightqtrle','AxisStd-Light' ;
    margin-bottom: 30px;
    line-height: 2;
}

#amana-info a {
}

/* statement
--------------------------------------------------------------------- */
#statement {
    box-sizing: border-box;
    padding: 73px 60px 81px;
    background: #fff;
}
#statement * {
    box-sizing: border-box;
}
#statement .inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    padding-top: 241px;
}
#statement .bg {
    position: absolute;
    width: 914px;
    top: 0;
    right: -20px;
}
#statement .bg-img {
    width: 100%;
    height: auto;
}
#statement .text {
    position: relative;
    width: 690px;
    height: 380px;
    background: #fff;
    padding: 16px 50px 0 58px;
}
#statement .text .ttl {
    font-size: 44px;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    font-weight: 600;
    color: rgb(85, 85, 85);
    line-height: 1.591;
    letter-spacing: 0.1em;
}
#statement .text .desc {
    margin-top: 13px;
    font-size: 16px;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    font-weight: 600;
    color: rgb(85, 85, 85);
    line-height: 2;
    letter-spacing: 0.12em;
}
#statement .text .btn {
    margin-top: 37px;
    position: relative;
}
#statement .keyword-area {
    padding: 30px 60px;
    display: flex;
    align-items: center;
    margin-top: 80px;
    width: 100%;
    min-height: 80px;
    border-radius: 4px;
    background-color: #000;
    color: #fff;
}
#statement .keyword-area .ttl {
    font-size: 24px;
    font-family:'DIN Next W06 Regular',sans-serif;
    line-height: 1.002;
    letter-spacing: 0.135em;
    border-right: solid 1px #fff;
    padding-right: 20px;
    white-space: nowrap;
}
#statement .keyword-area .keywords {
    padding-left: 13px;
    font-size: 16px;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    line-height: 2;
    letter-spacing: 0.12em;
    /*
    white-space: nowrap;
    */
    overflow: hidden;
}
#statement .keyword-area .keywords a {
    display: inline-block;
    position: relative;
    line-height: 1.6;
    margin: 3.2px 0;
    padding: 0 5px 0 6px;
    color: #fff;
}
#statement .keyword-area .keywords a > span {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 0px;
    height: 100%;
    background-color: #fff;
    color: #000;
    overflow: hidden;
    transition: width 0.2s;
}
#statement .keyword-area .keywords a:hover > span {
    left: 0;
    right: auto;
    width: 100%;
}
#statement .keyword-area .keywords a > span::after {
    content: attr(data-keyword);
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5px 0 6px;
    box-sizing: border-box;
    white-space: nowrap;
}
#statement .keyword-area .keywords a:hover > span::after {
    left: 0;
    right: auto;
}


/* insights
--------------------------------------------------------------------- */
#insights {
    box-sizing: border-box;
    position: relative;
    padding: 76px 60px 80px;
}
#insights * {
    box-sizing: border-box;
}
#insights h2 .txtEn img {
    position: relative;
    top: -2px;
}
#insights .articles {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#insights .articles a:hover {
    opacity: 0.7 !important;
    transition: opacity 0.3s;
}
#insights .articles .item {
    display: block;
    position: relative;
    padding: 0 21px 0;
    width: 48.48484848%;
    margin-bottom: 30px;
}
#insights .articles .item::before {
    content: '';
    display: block;
    padding-top: 51.170569%;
}
#insights .articles .item .thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#insights .articles .item .thumb::before {
    content: '';
    display: block;
    padding-top: 66.5625%;
}
#insights .articles .item .thumb .img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#insights .articles .item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
#insights .articles .item .info {
    max-width: 598px;
    margin: 0 auto;
    position: relative;
    background: #f2f2f2;
    padding: 10px 19px 15px 19px;
}
#insights .articles .item .label {
    display: inline-block;
    background-color: #000;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 2px;
    min-width: 100px;
    text-align: center;
    letter-spacing: 0.2em;
}
#insights .articles .item .ttl {
    margin-top: 13px;
    font-size: 18px;
    font-family: "Hiragino Sans W5",sans-serif;
    font-weight: 500;
    color: #555555;
    line-height: 1.444;
    letter-spacing: 0.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#insights .articles .item .desc {
    margin-top: 9px;
    font-size: 14px;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    color: #555555;
    line-height: 1.714;
    letter-spacing: 0.12em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#insights .articles .item .foot {
    display: flex;
    margin-top: 9px;
}
#insights .articles .item .date {
    width: 101px;
    font-size: 12px;
    font-family:'DIN Next W06 Regular',sans-serif;
    color: #555555;
    line-height: 2;
    letter-spacing: 0.1em;
}
#insights .articles .item .tags {
    width: calc(100% - 100px);
    font-size: 10px;
    font-family: "ヒラギノ角ゴ Pro W3",hirakakupro-w3,"メイリオ","meiryo","ＭＳ Ｐゴシック","ms pgothic";
    color: #555555;
    line-height: 2.4;
    letter-spacing: 0.1em;
}
#insights .articles .item .tags span {
    display: inline-block;
    margin-right: 6px;
}
#insights .articles .item:nth-child(n + 3) {
    width: 32.32323232%;
}
#insights .articles .item:nth-child(n + 3)::before {
    padding-top: 52.253395%;
}
#insights .articles .item:nth-child(n + 3) .info {
    padding: 13px 8px 25px 9px;
}
#insights .articles .item:nth-child(n + 3) .ttl {
    margin-top: 11px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.16em;
}
#insights .articles .item:nth-child(n + 3) .desc {
    display: none;
}
#insights .articles .item:nth-child(n + 3) .foot {
    margin-top: 14px;
}
#insights .articles .item:nth-child(n + 3) .date {
    width: 87px;
}
#insights .articles .item:nth-child(n + 3) .tags {
    width: calc(100% - 87px);
}
#insights .btn {
    margin-top: 15px;
    text-align: center;
}