/* CSS Document */

section h1 {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: normal;
    color: #008dc4;
}

/* mainImg
--------------------------------------------------------*/
#mainImg {
    width: 100%;
    height: auto;
    background: url(../image/mainImg-bg.png) left top repeat-x;
    margin-bottom: 68px;
    position: relative;
    border-bottom: #d8d7d7 solid 1px;
}

#mainImg .inner {
    width: 1054px;
}

#carouselMain div {
    width: 1054px;
    height: 424px;
}

#carouselMain img {
    width: 1054px;
    height: 424px;
}

#mainImg #pagerMain {
    text-align: center;
    width: 100%;
    height: auto;
    padding-top: 2px;
    margin: 0;
    position: absolute;
    bottom: -32px;
    left: 0;
}

#mainImg #pagerMain a.selected span {
    background: #2f8cc1;
}

#mainImg #pagerMain a {
    display: inline-block;
    padding: 0 7px;
}

#mainImg #pagerMain span {
    border-radius: 10px;
    background: #e9e8e8;
    text-indent: -100px;
    line-height: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    overflow: hidden;
}

/* 前と次
-----------------*/
#mainImg #prev,
#mainImg #next {
    background: url(../image/mainImg-arrow.png) no-repeat;
    text-indent: -999px;
    display: block;
    overflow: hidden;
    width: 39px;
    height: 73px;
    position: absolute;
    top: 180px;
}

#mainImg #prev {
    background-position: left top;
    left: 0px;
}

#mainImg #prev:hover {
}

#mainImg #next {
    background-position: left bottom;
    right: 0px;
}

#mainImg #next:hover {
}

/* リンク */
#mainImg a img {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

#mainImg a:hover img {
    opacity: 0.8;
    position: relative;
    filter: alpha(opacity=80); /* ie lt 8 */
    -ms-filter: "alpha(opacity=80)"; /* ie 8 */
    zoom: 1;
}

/* swiper
-----------------*/
#mainImg .swiper-slide img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.swiper-pagination {
    width: 100%;
    padding: 14px 0;
}

.swiper-pagination-bullet {
    background-color: #e9e8e8;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 7px;
    outline: none;
}

.swiper-pagination-bullet-active {
    background-color: #2f8cc1;
}

.swiper-button-next,
.swiper-button-prev {
    background: url(../image/mainImg-arrow.png) no-repeat;
    width: 39px;
    height: 73px;
    outline: none;
    margin-top: -36px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-button-next {
    right: 0;
    background-position: left bottom;
}

.swiper-button-prev {
    left: 0;
    background-position: left top;
}

/* new-product
--------------------------------------------------------*/
section.new-product {
}

/* 残りはcarousel.cssへ */

/* swiper */
.new-product .lensBox {
    margin: 0;
}

/* product
--------------------------------------------------------*/
section.product {
}

/* リスト
-----------------------*/
section.product ul {
    overflow: hidden;
    width: 100%;
    text-align: center;
    /* 追加 */
    display: flex;
    justify-content: space-between;
}

section.product li,
section.product li a {
    /* width: 292px;
    height: 249px; */
    display: block;
    overflow: hidden;
    position: relative;
}

section.product li {
    display: inline-block;
    /* margin: 0 18px; */
    /* 追加 */
    margin: 0;
    width: 23.5%;
}

section.product li img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

section.product li:first-child {
}

section.product li:nth-child(2) {
    animation-delay: 0.08s;
}

section.product li:nth-child(3) {
    animation-delay: 0.16s;
}

section.product span {
    width: 120px;
    height: 40px;
    overflow: hidden;
    display: block;
    background-image: linear-gradient(to right bottom, rgba(53, 101, 161, .5), rgba(51, 139, 189, 50));
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* topics
--------------------------------------------------------*/

/* topicsとlinkのサイズ */
.topics,
.link {
    width: 45.8%;
}

.topics.box-base-L {
    height: 312px;
    margin-bottom: 80px;
}

.link.box-base-L {
    height: 324px;
    margin-bottom: 80px;
}

.topics {
    float: left;
}

.box-base-L .bg {
    background: #fff;
    padding: 18px 22px 16px;
}

.topics h1 {
    margin-top: 10px;
    margin-bottom: 20px;
}

.topics dl {
}

.topics dd {
    margin-bottom: 16px;
    padding: 1px 0 10px;
    background: url(../image/topics-border.png) left bottom repeat-x;
}

.topics dt {
    float: left;
    width: 65px;
    margin-bottom: 16px;
    text-align: center;
    display: block;
    overflow: hidden;
    background: #008dc4;
    color: #fff;
    margin-right: 12px;
}

.topics dd {
}


p.list {
    position: absolute;
    right: 44px;
    top: 48px;
}

p.list a {
    background: url(../image/icon-tri.png) no-repeat left center;
    padding-left: 12px;
}

/* link
--------------------------------------------------------*/
.link {
    float: right;
}

.link.box-base-L {
    padding: 14px;
}

.link ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.link li {
    flex: 0 0 31.5%;
    margin: 6px 0;
}

.link a {
    background: #fff;
    padding: 15px;
    line-height: 2;
    display: block;
    -webkit-box-shadow: 2px 2px 5px 0px #b9b9b9; /* Safari, Chrome用 */
    box-shadow: 2px 2px 5px 0px #b9b9b9; /* CSS3草案 */
    position: relative;
    font-size: 14px;
    color: #009ed4;
}
@media screen and (max-width: 767px) {

    .link li {
        flex: 0 0 49.5%;
        margin: 6px 0;
    }
}

/* 早見表
--------------------------------------------------------*/
#top .flex-box .chart {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    #top .flex-box {
        flex-direction: column;
    }
}

.chart .box-base-L {
    width: 45%;
}

@media screen and (max-width: 767px) {
    .chart {
        width: 100%;
    }
}

.chart a {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .chart a {
        width: 100%;
        height: auto;
    }
}

.chart a img {
    width: 100%;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

@media screen and (max-width: 767px) {
    .chart a img {
        width: 100%;
        height: auto;
    }
}

.chart a:hover img.scale {
    transform: scale(1.05);
}

.chart .link-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    padding: 6px;
    box-sizing: border-box;
    background: #3075b6;
    bottom: 10px;
    right: 10px;
}

@media screen and (max-width: 767px) {
    .chart .link-icon {
        width: 24px;
        height: 24px;
    }
}

.chart .link-icon img {
    width: 100%;
    height: auto;
}

/*
section.chart{
width: 48.5%;
}

@media screen and (max-width:767px){
section.chart{
width: 100%;
}
}

section.chart .box-base-L{
width: 100%;
height: auto;
display: block;
box-sizing: border-box;
text-align: center;
}

section.chart .chart-inner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

@media screen and (min-width:768px){
section.chart .chart-inner .unit{
width: 48.5%;
}
section.chart .chart-inner .unit:nth-child(-n+2){
width: 48.5%;
margin-bottom: 18px;
}
}

@media screen and (max-width:767px){
section.chart .chart-inner .unit{
width: 100%;
margin-bottom: 20px;
}
section.chart .chart-inner .unit:last-child{
margin-bottom: 0;
}
}

section.chart .chart-inner .unit a{
padding: 30px 0 29px;
display: block;
font-size: 14px;
font-weight: bold;
color: #2f75b6;
background: #fff;
transition: .2s;
position: relative;
}

section.chart .chart-inner .unit a:hover{
opacity: .7;
}

@media screen and (max-width:767px){
section.chart .box-base-L img{
width: 100%;
height: auto;
}
}

section.chart .link-icon{
position: absolute;
width: 13px;
height: 13px;
padding: 1px 3px 5px;
background: #3075b6;
top: 5px;
right: 5px;
}

@media screen and (max-width:767px){
section.chart .link-icon{
width: 16px;
height: 16px;
padding: 3px;
}
}

section.chart .link-icon img{
width: 100%;
height: auto;
}
*/

/*中国のみ*/
/*
@media screen and (max-width: 767px){
section.chart h1 img{
height: 38px;
}
}
section.chart .chart-inner .unit_02 a{
font-size: 13px;
text-align: left;
padding: 23px 10px 22px;
}
section.chart .chart-inner .unit_02 .link-icon{
padding: 3px;
}
@media screen and (max-width: 767px){
section.chart .chart-inner .unit_02 a{
font-size: 14px;
text-align: center;
padding: 22px 0;
}
}
*/
/*中国のみ end*/

/* 展示会映像
--------------------------------------------------------*/
section.movie {
    width: 48.5%;
}

@media screen and (max-width: 767px) {
    section.movie {
        width: 100%;
    }
}

section.movie a {
    display: block;
    width: 445px;
    height: 178px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    section.movie a {
        width: 100%;
        height: auto;
    }
}

section.movie a img {
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

@media screen and (max-width: 767px) {
    section.movie a img {
        width: 100%;
        height: auto;
    }
}

section.movie a:hover img.scale {
    transform: scale(1.05);
}

section.movie .link-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    padding: 6px;
    box-sizing: border-box;
    background: #3075b6;
    bottom: 10px;
    right: 10px;
}

section.movie .link-icon img {
    width: 100%;
    height: auto;
}