@charset "UTF-8";

/* fluid container */
.fluid-container {
    overflow: hidden;
}
@media only screen and (min-width:769px) {
    .fluid-container .fluid-section {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* panel (transparent) */
.lyt-panel-a.trans-panel {
    padding: 0 !important;
}
.lyt-panel-a.trans-panel .panels {
    background: transparent;
}
.lyt-panel-a.trans-panel .panel-content .panel-content-hdg {
    margin-bottom: 16px;
}
.lyt-panel-a.trans-panel .panel-content .moreinfo {
    margin-top: 32px !important;
}
@media only screen and (min-width:1281px) {
    .lyt-panel-a.trans-panel .panel-content {
        padding: 24px 24px 24px 0;
    }
    .lyt-panel-a.trans-panel .panel-visual + .panel-content {
        padding: 24px 0 24px 24px;
    }
    .lyt-panel-a.trans-panel .panel-content .panel-content-hdg {
        font-size: 3.2rem;
    }
}

/* hero */
.hero-area-c.article-hero .content {
    max-width: 780px;
    display: -webkit-block;
    display: -ms-block;
    display: block;
}
.hero-area-c.article-hero .content-inner {
    max-width: 780px;
    padding-bottom:30px;
}
.hero-area-c.article-hero .label-txt {
    display: inline-block;
    padding:4px 7px 2px;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
    background-color: #b22b31;
}
.hero-area-c.article-hero .label-txt + .main-txt {
    margin-top: 16px;
}
.hero-area-c.article-hero .content-inner .main-txt {
    margin-bottom:10px;
}

@media only screen and (max-width:767px) {
    .hero-area-c.article-hero {
        color: #000000;
    }
    .hero-area-c.article-hero .label-txt {
        font-size: 1.4rem;
        color: #ffffff;
    }
    .hero-area-c.article-hero .content-inner {
        background: inherit;
    }
    .hero-area-c.article-hero .content-inner .main-txt,
    .hero-area-c.article-hero .content-inner .main-txt>* {
        font-size: 2.4rem;
    }
    .hero-area-c.article-hero .content-inner .sub-txt,
    .hero-area-c.article-hero .content-inner .sub-txt>* {
        font-size: 1.6rem;
    }
}
@media only screen and (min-width: 1281px) {
    .hero-area-c.article-hero,
    .hero-area-c.article-hero .content{
        min-height: auto;
    }
    .hero-area-c.article-hero .visual {
        position: static;
        top: auto;
        left: auto;
        min-height: 220px;
    }
    .b-content-variable.hero-area-c.article-hero .visual {
        left: auto;
        width: 100%;
    }
    .hero-area-c.article-hero .visual>img {
        position: static;
    }
    .hero-area-c.article-hero .content {
        padding-top: 24px;
    }
    .hero-area-c.article-hero .label-txt {
        font-size: 1.3rem;
    }
}
@media only screen and (min-width: 768px) {
    .hero-area-c.article-hero .content-inner .main-txt,
    .hero-area-c.article-hero .content-inner .main-txt > * {
        font-size: 3.6rem;
        line-height: 1.4;
    }
    .hero-area-c.article-hero .content-inner .sub-txt,
    .hero-area-c.article-hero .content-inner .sub-txt > * {
        font-size: 2.4rem;
        line-height: 1.2;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
    .hero-area-c.article-hero {
        max-height: inherit;
    }
    .hero-area-c.article-hero .content-inner {
    padding: 0 0 30px;
    }
    .hero-area-c.article-hero .visual {
        position: static;
    }
    .hero-area-c.article-hero .visual>img {
        position: static;
    }
    .hero-area-c.article-hero .visual> img {
        height: 100%;
    }
    .hero-area-c.article-hero,
    .hero-area-c.article-hero .content,
    .hero-area-c.article-hero .visual {
        height: auto;
        min-height: inherit;
        left: 0;
    }
    .hero-area-c.article-hero .content {
        padding-top: 1.5vw;
    }
    .hero-area-c.article-hero .label-txt {
        font-size: 1.4rem;
    }
}
@media only screen and (max-width: 767px) {
    .hero-area-c.article-hero:not(.b-hero-area-sp-reverse) .content {
        padding-top: calc(132vw*100/320);
    }
    .hero-area-c.article-hero .visual,
    .hero-area-c.article-hero .visual > img {
        height: calc(132vw*100/380);
    }
}


/* article section */
.section.article-section .section-inner {
    max-width: 780px;
    font-size: 1.8rem;
    line-height: 1.8;
}

/* article list */
.lyt-col-a.article-list {
    margin-top: 20px;
}
.lyt-col-a.article-list .list-ttl {
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 2px solid #eee;
}
.lyt-col-a.article-list > * {
    padding-bottom: 38px;
}
.lyt-col-a.article-list .stay > a {
    padding-left: 30px;
    color: #a30b1a;
    pointer-events: none;
}
.article-list .list-link-a > li > a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 0 30px;
    position: relative;
}
.article-list .list-link-a>li>a::before {
    margin: 12px 14px 0 -23px;
    position: absolute;
    left:30px;
}
.article-list-vol {
    min-width: 4em;
    display: inline-block;
}

.lyt-col-a.article-list .stay > a::before {
    content: none;
}
.list-link-a.article-top a {
    font-size: 1.8rem;
    font-weight: bold;
}

@media only screen and (max-width: 767px) {
    .lyt-col-a.article-list > * {
        margin-bottom: 16px;
        padding-bottom: 0;
    }
    .lyt-col-a.article-list + .list-link-a.article-top {
        margin-top: 32px;
    }
}

/* pickup list */
.list-link-a.pickup-list > li {
    margin-bottom: 0;
    padding: 6px 0 6px 6px;
    border-bottom: 2px solid #fff;
}
@media only screen and (min-width: 768px) {
    .list-link-a.diff-col2.pickup-list > li {
        width: calc(50% - 34px);
        margin-left: 34px;
    }
    .list-link-a.diff-col2.pickup-list > li:nth-child(-n+2) {
        border-top: 2px solid #fff;
    }
}
@media only screen and (max-width: 767px) {
    .list-link-a.pickup-list > li:first-child {
        border-top: 2px solid #fff;
    }
}

/* figure */
.article-figure {
    display: table;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.article-figure img {
    width: 100%;
}
.article-figure .caption {
    display: table-caption;
    caption-side: bottom;
}
.article-figure .caption > span {
    display: block;
}

/* category top */
.category-hero.hero-area-b {
    max-height: initial;
    max-height: none;
    display: block;
}
.category-hero.hero-area-b .visual > img {
    max-width: initial;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}
.category-hero.hero-area-b .content {
    max-width: initial;
    max-width: none;
    padding-top: 50px;
}
.category-hero.hero-area-b::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}
.category-hero.hero-area-b .content-inner {
    padding-left: 20px;
    padding-right: 20px;
}
.category-hero-hdg::before {
    content: "";
    display: block;
    margin: 0 auto 20px;
}
.category-hero-hdg-5g::before {
    width: 120px;
    height: 68px;
    background: url(https://www.fujitsu.com/downloads/JP/solutions/industry/contents/trends/images/trends_common_icon_02.png) left top no-repeat;
    background-size: 100% auto;
}
.category-hero-hdg-blockchain::before {
    width: 98px;
    height: 98px;
    background: url(https://www.fujitsu.com/downloads/JP/solutions/industry/contents/trends/images/trends_common_icon_03.png) left top no-repeat;
    background-size: 100% auto;
}
.category-hero-hdg-cashless::before {
    width: 57px;
    height: 93px;
    background: url(https://www.fujitsu.com/downloads/JP/solutions/industry/contents/trends/images/trends_common_icon_04.png) left top no-repeat;
    background-size: 100% auto;
}
.category-hero-hdg-maas::before {
    width: 110px;
    height: 93px;
    background: url(https://www.fujitsu.com/downloads/JP/solutions/industry/contents/trends/images/trends_common_icon_05.png) left top no-repeat;
    background-size: 100% auto;
}
.category-hero.hero-area-b .content .main-txt {
    margin-bottom: 20px;
    text-align: center;
}
.category-hero.hero-area-b .content .main-txt > * {
    background: none;
    color: #fff;
}
.category-hero.hero-area-b .category-hero-hdg-5g {
    font-size: 5rem;
}
.category-hero.hero-area-b .content .sub-txt {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.category-hero.hero-area-b .content .sub-txt > * {
    display: block;
    padding: 0;
    background: none;
    line-height: 1.8;
    color: #fff;
}
.category-hero-panel {
    max-width: 800px;
    margin: 48px auto 60px;
    padding: 35px 45px 60px;
    background: #fff;
    position: relative;
    z-index: 1;
}
/* index list */
.index-list-hdg-a {
    margin-bottom: 20px;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.4;
}
.index-list-hdg-b {
    margin-bottom: 14px;
    font-size: 1.8rem;
    text-align: center;
    color: #6a6a6a;
    line-height: 1.4;
}
.index-list.list-link-a {
    padding-left: 0;
}
.index-list.list-link-a > li:first-child {
    border-top: 1px solid #e3e3e3;
}
.index-list.list-link-a > li {
    margin: 0;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #e3e3e3;
}
.index-list.list-link-a > li > a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 20px 0 0;
    position: relative;
}
.index-list.list-link-a > li > a::before {
    position: absolute;
    right: 10px;
    top: 50%;
    margin: 0;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}
.index-list-vol {
    min-width: 4em;
}
.index-list-title {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
@media only screen and (max-width:1000px) {
    .category-hero-panel {
        max-width: 90%;
    }
}
@media only screen and (max-width:767px) {
    .category-hero.hero-area-b .category-hero-lead {
        position: relative;
        padding-bottom: 35px;
    }
    .category-hero.hero-area-b .visual {
        position: absolute;
        max-height: initial;
        max-height: none;
        height: 100%;
        top: 0;
        left: 0;
    }
    .category-hero.hero-area-b .visual > img {
        min-width: 100%;
        height: 100%;
        top: initial;
        top: auto;
        bottom: 0;
    }
    .category-hero.hero-area-b .content {
        padding-top: 40px;
    }
    .category-hero.hero-area-b .content .content-inner {
        background: none;
        padding: 0 12px;
    }
    .category-hero.hero-area-b .category-hero-hdg {
        font-size: 2.6rem;
    }
    .category-hero.hero-area-b .category-hero-hdg-5g,
    .category-hero.hero-area-b .category-hero-hdg-maas {
        font-size: 3.8rem;
    }
    .category-hero.hero-area-b .content .sub-txt > * {
        text-align: left;
    }
    .category-hero-panel {
        max-width: 100%;
        margin: 0;
        padding: 36px 12px;
    }
}

/* heading w/icon */
.hdg-icon::before {
    content: "";
    display: block;
    margin: 0 auto 40px;
}
.hdg-icon-trend::before {
    width: 114px;
    height: 82px;
    background: url(https://www.fujitsu.com/downloads/JP/solutions/industry/contents/trends/images/trends_common_icon_01.png) left top no-repeat;
    background-size: 100% auto;
}

/* trend menu */
.trend-menu {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: -16px;
    margin-bottom: -16px;
}
.trend-menu-col {
    width: calc(25% - 16px);
    margin-left: 16px;
    margin-bottom: 16px;
    padding: 26px 20px 70px;
    position: relative;
    background: #fff;
}
.trend-menu-link-more {
    position: absolute;
    bottom: 20px;
    right: 24px;
    text-align: right;
}
.list-link-a.trend-menu-list,
.list-link-a.trend-menu-list .list-link-a {
    padding-left: 0;
}
.trend-menu-childlist {
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid #c6c6c0;
}
.list-link-a.trend-menu-list > li > a {
    display: block;
}
@media only screen and (max-width:1000px) {
    .trend-menu-col {
        width: calc(50% - 16px);
    }
}
@media only screen and (max-width:767px) {
    .trend-menu {
        margin-left: 0;
    }
    .trend-menu-col {
        width: 100%;
        margin-left: 0;
        padding: 12px 15px 11px;
    }
    .trend-menu-childlist {
        display: none;
    }
}