@charset "utf-8";
/* ========================================================================================

name: design.css

description: page layout settings

update: 2020.07.10

======================================================================================== */

/* fonts
-------------------------------------------------- */

@import ;
@import ;
/* 全体共通
-------------------------------------------------- */

html {
    font-family: "noto sans jp", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", helvetica, arial, sans-serif;
    height: 100%;
    font-size: 625%;
    line-height: 2rem;
}

body {
    color: #000;
    text-align: center;
    height: 100%;
    font-size: 1.4rem!important;
    line-height: 1.7!important;
    overflow-x: hidden;
    background-color: #ffffff;
}

a {
    color: #333333;
    overflow: hidden;
    outline: none;
    text-decoration: none;
    transition: all ease-out 0.15s;
}

a:hover {
    text-decoration: none;
    transition: all ease-out 0.15s;
}

a:hover img {
    opacity: 0.8;
    transition: all ease-out 0.25s;
}

.link_txt a {
    color: #cc0000;
    overflow: hidden;
    outline: none;
    text-decoration: underline;
}

.link_txt a:hover {
    color: #cc0000;
    text-decoration: none;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.clearfix {
    _height: 1px;
    min-height: 1px;
    *zoom: 1;
}

* html .clearfix {
    height: 1%;
    display: inline-block;
}

.rollover:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/* utility */

.valiable_image,
.valiable_image img {
    width: 100%;
    height: auto;
}

/* ie8以下でレイアウトが大崩れしないように */

header,
footer,
article,
section,
aside {
    display: block;
    overflow-x: hidden;
}

.font-oswald {
    font-family: 'oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.font-montserrat {
    font-family: 'montserrat', sans-serif;
    font-weight: 700;
}

.pc_only {
    display: block !important;
}

.sp_only {
    display: none !important;
}

.pc_only_inline {
    display: inline-block !important;
}

.sp_only_inline {
    display: none !important;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 3000;
}

.loader .loader-inner {
    position: absolute;
    width: 100px;
    height: 30px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.ball-pulse-sync>div,
.ball-pulse>div,
.ball-scale-random>div,
.ball-scale>div {
    background-color: #fba9b5;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    .pc_only {
        display: none !important;
    }
    .sp_only {
        display: block !important;
    }
    .pc_only_inline {
        display: none !important;
    }
    .sp_only_inline {
        display: inline-block !important;
    }
}

/* ページ表示のフェード効果
-------------------------------------------------- */

.fadeseminar,
.fadeproductleft,
.fadeproductright,
.fadeproductthird {
    opacity: 0;
}

.ready .fadeseminar {
    transform: translatey(40px);
    transition: all 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.inviewplay .fadeseminar-end {
    opacity: 1;
    transform: translatey(0px);
}

.ready .fadeproductleft {
    transform: translatey(80px);
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

.inviewplay .fadeproductleft-end {
    opacity: 1;
    transform: translatey(0px);
}

.ready .fadeproductright {
    transform: translatey(80px);
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}

.inviewplay .fadeproductright-end {
    opacity: 1;
    transform: translatey(0px);
}

.ready .fadeproductthird {
    transform: translatey(80px);
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s, -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s;
}

.inviewplay .fadeproductthird-end {
    opacity: 1;
    transform: translatey(0px);
}

@media screen and (max-width: 767px) {
    .ready .fadeproductleft {
        transform: translatey(40px);
        transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .inviewplay .fadeproductleft-end {
        opacity: 1;
        transform: translatey(0px);
    }
    .ready .fadeproductright {
        transform: translatey(40px);
        transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .inviewplay .fadeproductright-end {
        opacity: 1;
        transform: translatey(0px);
    }
    .ready .fadeproductthird {
        transform: translatey(80px);
        transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .inviewplay .fadeproductthird-end {
        opacity: 1;
        transform: translatey(0px);
    }
}

/* ========================================================================================

 smartphone
 
======================================================================================== */

@media screen and (max-width: 767px) {
    html {
        height: 100%;
        font-size: 625%;
        line-height: 2rem;
    }
    body {
        -webkit-text-size-adjust: 100%;
        font-size: .13em;
        line-height: 1.60em;
        height: 100%;
        position: relative;
    }
}

/* header
-------------------------------------------------- */

header {
    border-top: 4px #00559d solid;
}

header .inner {
    width: auto;
    max-width: 1000px;
    margin: auto;
    position: relative;
    box-sizing: border-box;
    height: 82px;
}

header .inner h1 {
    position: absolute;
    left: 0;
    top: 13px;
}

header .inner .headernavi {
    position: absolute;
    right: 0;
    top: 13px;
}

.headernavi li {
    display: inline-block;
    margin-left: 15px;
}

.headernavi li.language {
    margin-top: 12px;
}

.headernavi li.language a {
    color: #00296f;
    padding: 0 10px 0 0;
}

.headernavi li.language a:hover {
    /*background-color: #00296f;*/
    opacity: 0.8;
}

.headernavi li.language a i {}

.headernavi li.contact a {
    display: block;
    color: #ffffff;
    background-color: #00559d;
    border-radius: 4px;
    padding: 16px 35px 18px;
    font-size: .16rem;
    font-weight: 500;
    line-height: 1.2em;
    transition: all ease-out 0.25s;
}

.headernavi li.contact a:hover {
    /*background-color: #00296f;*/
    opacity: 0.8;
}

.headernavi li.contact a i {
    display: inline-block;
    margin-right: 5px;
    font-size: 9px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    header .inner h1 {
        left: 20px;
        top: 13px;
    }
    header .inner .headernavi {
        right: 20px;
        top: 13px;
    }
}

@media screen and (max-width: 767px) {
    header {
        border-top: 2px #00559d solid;
    }
    header .inner {
        position: relative;
        box-sizing: border-box;
        height: 43px;
    }
    header .inner h1 {
        position: absolute;
        left: 10px;
        top: 7px;
    }
    header .inner h1 img {
        width: 190px;
        height: auto;
    }
    header .inner .headernavi {
        position: absolute;
        right: 0;
        top: 0;
    }
    .headernavi li {
        display: inline-block;
    }
    .headernavi li.contact a {
        box-sizing: border-box;
        display: block;
        color: #ffffff;
        background-color: #00559d;
        border-radius: 0;
        width: 45px;
        height: 43px;
        padding: 10px 0 0;
        font-size: .16rem;
        font-weight: 500;
        line-height: 1.2em;
    }
    .headernavi li.contact a i {
        margin-right: 0;
        font-size: 9px;
    }
    .headernavi li.contact a span {
        display: none;
    }
}



/* common
-------------------------------------------------- */

.secshowroomcontents {
    padding: 40px 0 150px;
}

.secshowroomcontents>.inner {
    box-sizing: border-box;
    width: auto;
    max-width: 1000px;
    margin: auto;
    text-align: left;
}

.secshowroomcontents>.inner h2 {
    font-family: 'roboto', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #00559d;
    text-align: center;
    line-height: 1.33em;
}

.text-content-lead {
    margin-top: 40px;
    text-align: center;
}

.button {
    text-align: center;
    margin-top: 80px;
}

.button a {
    display: block;
    box-sizing: border-box;
    width: 520px;
    margin: auto;
    padding: 28px 10px 28px 30px;
    font-size: .20rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #ffffff;
    background-color: #00559d;
    border-radius: 4px;
}

.button a i {
    font-size: .24rem;
    float: right;
}

.button a:hover {
    opacity: 0.8;
    transition: all ease-out 0.25s;
}

.buttonfloatcontact {
    position: fixed;
    width: 82px;
    height: auto;
    right: 70px;
    bottom: 345px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .secshowroomcontents {
        padding: 50px 20px 80px;
    }
}

@media screen and (max-width: 767px) {
    .secshowroomcontents {
        padding: 40px 20px 50px;
    }
    .secshowroomcontents>.inner {}
    .secshowroomcontents>.inner h2 {
        font-family: 'roboto', sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #00559d;
        text-align: center;
        line-height: 1.33em;
    }
    .text-content-lead {
        margin-top: 20px;
    }
    .button {
        text-align: center;
        margin-top: 30px;
    }
    .button a {
        display: block;
        box-sizing: border-box;
        width: auto;
        margin: auto;
        padding: 15px 5px 15px 30px;
        font-size: .15rem;
        font-weight: 500;
        line-height: 1.5em;
        color: #ffffff;
        background-color: #00559d;
        border-radius: 4px;
    }
    .button a i {
        font-size: .18rem;
        float: right;
    }
    .buttonfloatcontact {
        position: fixed;
        width: 60px;
        height: auto;
        right: 10px;
        bottom: 200px;
    }
}

/* showroom 202211
-------------------------------------------------- */

.secshowroombooth {
    text-align: center;
    height: 700px;
    background:  no-repeat center center;
    background-size: cover;
}

.secshowroombooth .inner {
    position: relative;
    max-width: 1000px;
    height: 700px;
    margin: auto;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.bannerquestionary {
    position: absolute;
    left: 40px;
    top: 20px;
    width: 260px;
    background:  no-repeat center center;
    background-size: cover;
    padding: 10px;
}

.boothbanner {
    display: grid;
    grid-column-gap: 5%;
    grid-row-gap: 8%;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 70px;
}

.bannerlarge {
    background:  no-repeat center center;
    background-size: cover;
    padding: 3.5%;
}

.bannersmall {
    background:  no-repeat center center;
    background-size: cover;
    padding: 7.5%;
}

.bannerlarge_1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.bannerlarge_2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

.bannersmall_1 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.bannersmall_2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.bannersmall_3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.bannersmall_4 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

@media screen and (max-width: 767px) {
    .secshowroombooth {
        text-align: center;
        height: 460px;
        background:  no-repeat center center;
        background-size: cover;
    }
    .secshowroombooth .inner {
        position: relative;
        max-width: 1000px;
        height: 460px;
        margin: auto;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
    }
    .bannerquestionary {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 140px;
        background:  no-repeat center center;
        background-size: cover;
        padding: 6px;
    }
    .boothbanner {
        display: grid;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
    .bannerlarge {
        background:  no-repeat center center;
        background-size: cover;
        padding: 3%;
    }
    .bannersmall {
        background:  no-repeat center center;
        background-size: cover;
        padding: 3%;
    }
}

/* showroom
-------------------------------------------------- */

.js-has-modal>span:hover {
    cursor: pointer;
}

.secshowroombooth {
    text-align: center;
    /*
	background: no-repeat center top;
	background: no-repeat center top ,  repeat-x left top;
	background: no-repeat center top ,  repeat-x left top;
	background: no-repeat center top ,  repeat-x left top;
	background: no-repeat center top ,  repeat-x left top;
	background: no-repeat center top ,  repeat-x left top;
	*/
}

/*飛行船無し*/

/*
 .secshowroombooth .inner {
	position: relative;
	width: auto;
	height:620px;
	margin:auto;
}
*/

/* 飛行船有り */

/*.secshowroombooth .inner {
	position: relative;
	width: auto;*/

/*height:480px;*/

/*height:560px;
	margin:auto;
}*/

/* swiper booth */

/*飛行船無し*/

.swiper-booth202011 {
    position: absolute;
    width: 100%;
    width: 1400px;
    top: 57px;
    left: 50%;
    margin-left: -700px;
}

/* 飛行船有り */

/*.swiper-booth202011 {
	position:absolute;
	width:100%;
	width:1400px;
	left:50%;
	margin-left:-700px;
}*/

/*飛行船無し*/

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    z-index: 10;
    cursor: pointer;
    transition: all cubic-bezier(.17, .67, .62, .98) 0.2s;
}

/*飛行船有り*/

/*.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 68px;
    width: 68px;
    height: 98px;
    margin-top: 0;
    z-index: 10;
    cursor: pointer;
	transition:all cubic-bezier(.17,.67,.62,.98) 0.2s;
}*/

@keyframes swiper-button-animation {
    0% {
        transform: scale(1.1, 1.1)
    }
    100% {
        transform: scale(1.0, 1.0)
    }
}

@keyframes btn-prev-animation {
    0% {
        transform: translatey(0px);
    }
    100% {
        transform: translatey(10px);
    }
}

.spnavigation {
    /*display:none;*/
    max-width: 1000px;
    margin: auto;
    margin-top: 40px;
}

.spnavigation li {
    box-sizing: border-box;
    width: 25%;
    float: left;
    text-align: center;
    padding: 0 8px;
}

.spnavigation li.anchorchat {
    display: none;
}

.spnavigation li a {
    display: block;
    position: relative;
    border: 2px #06559d solid;
    font-size: .20rem;
    font-weight: 700;
    line-height: 1.3em;
    padding: 15px 5px 5px;
}

.spnavigation li a:hover {
    color: #ffffff;
    background-color: #06559d;
}

.spnavigation li a i {
    display: block;
    color: #06559d;
}

.spnavigation li a:hover i {
    color: #ffffff;
}

.secintro h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    color: #00559d;
    margin-top: 20px;
}

.secintro h2 .txtmedium {
    font-size: 80%;
}

.secintro .showroomlead {
    margin-top: 20px;
    font-size: 20px;
    line-height: 1.8;
}

.mainmessage {
    width: auto;
    margin: auto;
    position: relative;
    padding: 40px 0 0;
}

.bannercampaign {
    z-index: 10000;
    background-color: transparent;
    /*background-color:#2f3755;*/
    ;
    transition: all ease-out 0.2s;
    margin-top: 60px;
}

.bannercampaign.posifixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #ffffff;
    /*background-color:#2f3755;*/
    transition: all ease-out 0.2s;
}

.bannercampaign>div {
    width: auto;
    max-width: 1000px;
    margin: auto;
}

.bannercampaign a {
    display: block;
}

.bannercampaign.posifixed a:hover img {
    opacity: 1;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

@media screen and (max-width: 767px) {
    .spnavigation {
        width: auto;
        padding: 0 20px;
        margin-top: 10px;
        display: block;
    }
    .spnavigation ul {
        width: auto;
        margin: 0 -3px;
    }
    .spnavigation li {
        box-sizing: border-box;
        width: 50%;
        padding: 0 3px;
        float: left;
        margin-top: 6px;
    }
    .spnavigation li.anchorchat {
        display: block;
    }
    .spnavigation li a {
        display: block;
        font-size: .105rem;
        line-height: 1.6;
        color: #ffffff;
        background-color: #00559d;
        padding: 7px 5px 6px 20px;
    }
    .spnavigation li a i {
        font-size: .12rem;
        color: #ffffff;
        float: right;
    }
    .secintro h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5em;
        color: #00559d;
        margin: 0 15px 0;
    }
    .secintro .showroomlead {
        margin: 15px 20px 0;
        text-align: left;
        font-size: 18px;
        line-height: 1.67em;
    }
    .bannercampaign {
        margin-top: 30px;
    }
}

#floatingbnr {
  position: fixed;
  right: 0;
  bottom: 330px;
  width: 230px;
  z-index: 1;
  display: none;
}
#floatingbnr img {
  display: block;
  height: 200px;
  width: auto;
}
#floatingbnr p {
  display: none;
  line-height: 1;
}
#floatingbnr ul li {
  position: relative;
  float: left;
  line-height: 1;
  background-color: #00559d;
}
#floatingbnr ul li:last-of-type:hover img {
  opacity: 0.7;
}
#floatingbnr ul li span {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: #333;
  height: 30px;
  font-size: 2.2rem;
  width: 30px;
  padding: 2px 4px;
  line-height: 30px;
  cursor: pointer;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #floatingbnr ul li span  {/*ie11*/
  padding: 5px 4px 0;
  }
}
#floatingbnr ul li span:hover {
  color: #333;
  background-color: #cacaca;
}
#floatingbnr ul li span:last-of-type img {
  width: 9px;
  margin: 6px 5px;
  transform: rotatey(180deg);
  height: auto;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #floatingbnr ul li span:last-of-type img {/*ie11*/
  margin: 3px 6px;
  }
}


/* news
-------------------------------------------------- */

.secnewsarea {
    padding: 120px 0 90px;
}

.secnewsarea>.inner {
    text-align: center;
    border: 1px #00559d solid;
}

.secnewsarea>.inner h2 {
    display: inline-block;
    background-color: #ffffff;
    margin-top: -60px;
    padding: 0 30px;
}

.secnewsarea ul {
    text-align: left;
    padding: 5px 70px 40px;
}

.secnewsarea ul li {
    text-align: left;
    margin-top: 12px;
}

.secnewsarea ul li span {
    display: inline-block;
}

.secnewsarea .newsdate {
    margin-right: 15px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .secnewsarea {
        padding: 100px 20px 90px;
    }
}

@media screen and (max-width: 767px) {
    .secnewsarea {
        padding: 60px 20px 40px;
    }
    .secnewsarea>.inner {
        text-align: center;
        border: 1px #00559d solid;
    }
    .secnewsarea>.inner h2 {
        display: inline-block;
        background-color: #ffffff;
        margin-top: -20px;
        padding: 0 15px;
        vertical-align: text-top;
    }
    .secnewsarea ul {
        text-align: left;
        padding: 0 15px 15px;
    }
    .secnewsarea ul li {
        text-align: left;
        margin-top: 5px;
    }
    .secnewsarea ul li li {
        margin-top: 10px;
    }
    .secnewsarea ul li span {
        display: inline-block;
    }
    .secnewsarea .newsdate {}
}

/* web seminar
-------------------------------------------------- */

.secwebseminar {
    background-color: #efefef;
}

.lstwebseminar {
    padding-top: 20px;
}

.lstwebseminar>li {
    background-color: #ffffff;
    padding: 28px 60px 30px 30px;
    margin-top: 40px;
}

.lstwebseminar h3 {
    font-size: .20rem;
    font-weight: 500;
    line-height: 2em;
}

.lstwebseminar h3>span {
    display: block;
}

.txtseminardate {
    font-size: .15rem;
    color: #00559d;
    line-height: 1.5em;
}

.seminarend {
    color: #e50012;
}

.seminarcontentarea {
    margin-top: 18px;
}

.seminarphoto {
    width: 250px;
    float: left;
    padding-top: 5px;
}

.seminardetail {
    width: auto;
    margin: 0 0 0 300px;
}

.seminardetail p p {
    margin-top: 10px;
}

.seminarinstructor {
    font-weight: 500;
}

.lstwebseminar .button {
    text-align: left;
    margin-top: 20px;
}

.lstwebseminar .button a {
    display: block;
    box-sizing: border-box;
    width: 250px;
    margin: 0;
    padding: 15px 5px 15px 15px;
    font-size: .16rem;
    font-weight: 500;
    line-height: 1.5em;
    text-align: center;
    color: #ffffff;
    background-color: #00559d;
    border-radius: 4px;
}

.lstwebseminar .button.btncontact a {
    background-color: #444;
}

.lstwebseminar .button.btncontact a:hover {
    opacity: 0.8;
}

.lstwebseminar .button a i {
    font-size: .24rem;
    float: right;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .lstwebseminar>li {
        background-color: #ffffff;
        padding: 28px 30px 30px 30px;
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .secwebseminar {
        background-color: #efefef;
    }
    .lstwebseminar {
        padding-top: 0;
    }
    .lstwebseminar>li {
        background-color: #ffffff;
        padding: 18px 15px 20px 15px;
        margin-top: 20px;
    }
    .lstwebseminar h3 {
        font-size: .14rem;
        font-weight: 500;
        line-height: 1.5em;
    }
    .lstwebseminar h3>span {
        display: block;
    }
    .txtseminardate {
        font-size: .105rem;
        color: #00559d;
        line-height: 1.5em;
    }
    .txtseminarname {
        margin-top: 5px;
    }
    .seminarend {
        color: #e50012;
    }
    .seminarcontentarea {
        margin-top: 7px;
    }
    .seminarphoto {
        width: auto;
        float: none;
        padding-top: 5px;
    }
    .seminardetail {
        width: auto;
        margin: 15px 0 0;
    }
    .seminardetail p p {
        margin-top: 10px;
    }
    .seminarinstructor {
        font-weight: 500;
    }
    .lstwebseminar .button {
        text-align: left;
        margin-top: 15px;
    }
    .lstwebseminar .button a {
        display: block;
        box-sizing: border-box;
        width: auto;
        margin: 0;
        padding: 12px 5px 12px 15px;
        font-size: .13rem;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
        color: #ffffff;
        background-color: #00559d;
        border-radius: 4px;
    }
    .lstwebseminar .button.btncontact a {
        background-color: #252525;
    }
    .lstwebseminar .button a i {
        font-size: .18rem;
        float: right;
    }
}

/* products
-------------------------------------------------- */

.secproducts {
    padding-top: 70px;
    background:  no-repeat center top;
    background-size: cover;
}

.secleadtext {
    text-align: center;
    margin-top: 20px;
}

.lstproducts {
    width: auto;
    margin: 0 -26px;
    padding-top: 10px;
}

.lstproducts>li {
    width: 50%;
    float: left;
    margin-top: 60px;
}

.lstproducts>li>div {
    padding: 0 26px;
}

.lstproducts>li>div:hover {
    cursor: pointer;
}

.lstproducts>li dl {
    position: relative;
    background-color: #ffffff;
    margin: -40px 40px 0;
    padding: 20px 25px;
    transition: all ease-out 0.25s;
}

.lstproducts>li>div img {
    transition: all ease-out 0.25s;
}

.lstproducts>li>div:hover img {
    opacity: 0.80;
}

.lstproducts>li>div>div {
    position: relative;
}

.lstproducts>li>div .iconabrand {
    position: absolute;
    left: 8.44%;
    top: 11.39%;
    width: 78px;
    height: auto;
}

.lstproducts>li>div .iconphoenix {
    position: absolute;
    left: 8.44%;
    top: 11.39%;
    width: 78px;
    height: auto;
}

.lstproducts>li dl dt {
    color: #00559d;
    font-size: .19rem;
    font-weight: 700;
    line-height: 1.5em;
}

.lstproducts>li dl dt .iconnew {
    display: inline-block;
    color: #ffffff;
    background-color: #e50012;
    font-size: .13rem;
    font-weight: 400;
    line-height: 1em;
    margin-top: 6px;
    padding: 3px 5px;
    vertical-align: text-top;
}

.lstproducts>li dl dd {
    margin-top: 5px;
}

.txtproductmore {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .lstproducts {
        margin: 0 -12px;
        padding-top: 10px;
    }
    .lstproducts>li {
        width: 50%;
        float: left;
        margin-top: 30px;
    }
    .lstproducts>li>div {
        padding: 0 12px;
    }
    .txtproductmore {
        display: block;
        color: #00559d;
        text-decoration: underline;
        margin-top: 5px;
    }
}

@media screen and (max-width: 767px) {
    .secproducts {
        padding-top: 30px;
        background:  no-repeat center top;
        background-size: cover;
    }
    .secleadtext {
        text-align: left;
        margin-top: 10px;
    }
    .lstproducts {
        width: auto;
        margin: 0;
        padding-top: 0;
    }
    .lstproducts>li {
        width: 100%;
        float: left;
        margin-top: 30px;
    }
    .lstproducts>li>div {
        padding: 0;
    }
    .lstproducts>li dl {
        position: relative;
        background-color: #ffffff;
        margin: -40px 22px 0;
        padding: 12px 15px;
    }
    .lstproducts>li dl dt {
        color: #00559d;
        font-size: .15rem;
        font-weight: 700;
        line-height: 1.5em;
    }
    .lstproducts>li dl dt .iconnew {
        display: inline-block;
        color: #ffffff;
        background-color: #e50012;
        font-size: .10rem;
        font-weight: 400;
        line-height: 1em;
        margin-top: 4px;
        padding: 2px 4px;
        vertical-align: text-top;
    }
    .lstproducts>li dl dd {
        margin-top: 5px;
    }
    .txtproductmore {
        display: block;
        color: #00559d;
        text-decoration: underline;
        margin-top: 5px;
    }
}

/* pickup
-------------------------------------------------- */

.secpickup {
    background-color: #efefef;
    background-size: 100% auto;
}

.lstpickup {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3.5%;
    grid-gap: 50px 30px;
    margin-top: 40px;
}

.lstpickup li {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.lstpickup .pct-youtube {
    position: relative;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.lstpickup .pct-youtube .icon-video {
    pointer-events: none;
    position: absolute;
    color: #ffffff;
    font-size: 48px;
    line-height: 1em;
    width: 48px;
    height: 48px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.lstpickup .pct-youtube .icon-video i::before {
    text-shadow: 1px 1px 2px #000000;
}

.lstpickup dl {
    padding: 8%;
    flex-grow: 1;
}

.lstpickup dt {
    text-align: center;
}

.lstpickup dt img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.lstpickup dd {
    margin-top: 8%;
}

.lstpickup .download {
    border-top: 1px #dddddd solid;
    text-align: center;
}

.lstpickup .download a {
    display: block;
    padding: 4%;
    color: #00559d;
}

.lstpickup .download a:hover {
    background-color: #00559d;
    color: #ffffff;
}

.lstpickup .download a i {
    width: 18px;
    display: inline-block;
    margin-left: 3px;
    padding-bottom: 3px;
    border-bottom: 1px #00559d solid;
}

.lstpickup .download a:hover i {
    border-bottom: 1px #ffffff solid;
}

.box-shapeit {
    background-color: #ffffff;
    padding: 5px;
    margin-top: 13%;
}

.box-shapeit .inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

.box-shapeit h3 {
    font-size: .32rem;
    font-weight: 600;
    line-height: 1.33em;
    border-bottom: 1px #000000 solid;
    padding-bottom: 25px;
}

.box-shapeit p {
    margin-top: 10%;
}

.box-shapeit .inner>div {
    padding: 15%;
}

.box-shapeit .inner .picture {
    background-color: #efefef;
    text-align: center;
}

.box-shapeit .inner .picture img {
    box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.box-shapeit .button-list {
    margin-top: 12%;
}

.box-shapeit .button {
    text-align: left;
    margin-top: 10px;
}

.box-shapeit .button a {
    display: inline-block;
    width: auto;
    font-size: .16rem;
    padding: 13px 10px 13px 30px
}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

@media screen and (max-width: 767px) {
    .secpickup {}
    .lstpickup {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
        margin-top: 20px;
    }
    .box-shapeit .inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 5px;
    }
    .box-shapeit h3 {
        font-size: .20rem;
        line-height: 1.33em;
        padding-bottom: 10px;
    }
    .box-shapeit .inner>div {
        padding: 20px;
    }
    .box-shapeit .inner .picture img {
        max-width: 160px;
        height: auto;
        margin: auto;
    }
    .box-shapeit p {
        margin-top: 20px;
    }
    .box-shapeit .button-list {
        margin-top: 25px;
    }
    .box-shapeit .button {
        text-align: left;
        margin-top: 5px;
    }
    .box-shapeit .button a {
        display: block;
        width: auto;
        font-size: .13rem;
        padding: 13px 10px 13px 30px;
        text-align: center;
    }
}

/* new product
-------------------------------------------------- */

.lstnewproduct {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px 30px;
    margin-top: 40px;
}

.lstnewproduct>li {
    border: 1px #dddddd solid;
    display: flex;
    flex-direction: column;
    position: relative;
}

.lstnewproduct>li.iconnew::after {
    content: "new";
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #000000;
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    font-size: 12px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 5px;
}

.lstnewproduct>li figure {
    padding: 9px;
    position: relative;
}

.lstnewproduct>li figure .iconabrand {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 50px;
}

.lstnewproduct>li figure .iconphoenix {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 50px;
}

.lstnewproduct>li dl {
    padding: 5px 19px 19px;
    flex-grow: 1;
}

.lstnewproduct>li dt {
    font-size: 0.18rem;
    font-weight: 600;
    border-bottom: 1px #000000 solid;
    padding-bottom: 8px;
}

.lstnewproduct>li dd {
    margin-top: 10px;
}

.lstnewproduct>li .lstbutton {
    display: flex;
    width: 100%;
    border-top: 1px #dddddd solid;
}

.lstnewproduct>li .lstbutton li {
    box-sizing: border-box;
    padding: 9px;
    border-left: 1px #dddddd solid;
}

.lstnewproduct>li .lstbutton li:first-child {
    border: none;
}

.lstnewproduct>li .lstbutton li a {
    display: block;
    text-align: center;
}

.lstnewproduct>li .lstbutton li.detail {
    flex-grow: 1;
}

.lstnewproduct>li .lstbutton li.detail a {
    color: #ffffff;
    background-color: #00559d;
    border-radius: 4px;
    padding: 4px;
}

.lstnewproduct>li .lstbutton li.detail a:hover {
    opacity: 0.8;
    transition: all ease-out 0.25s;
}

.lstnewproduct>li .lstbutton li.video {
    flex-shrink: 0;
    width: 50px;
    font-size: 31px;
}

.lstnewproduct>li .lstbutton li.video a {
    color: #00559d;
}

.lstnewproduct>li .lstbutton li.video a:hover {
    opacity: 0.8;
    transition: all ease-out 0.25s;
}

.lstnewproduct>li .lstbutton li.paper {
    flex-shrink: 0;
    width: 50px;
    padding: 12px 13px 9px;
}

.lstnewproduct>li .lstbutton li.no-contents a {
    opacity: 0.2;
    pointer-events: none;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .lstnewproduct {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .lstnewproduct {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        margin-top: 20px;
    }
    .lstnewproduct>li {
        border: 1px #dddddd solid;
    }
    .lstnewproduct>li figure {
        padding: 9px;
        text-align: center;
    }
    .lstnewproduct>li dl {
        padding: 5px 19px 19px;
    }
    .lstnewproduct>li dt {
        font-size: 0.18rem;
        font-weight: 600;
        border-bottom: 1px #000000 solid;
        padding-bottom: 5px;
    }
    .lstnewproduct>li dd {
        margin-top: 10px;
    }
    .lstnewproduct>li .lstbutton {
        display: flex;
        width: 100%;
        border-top: 1px #dddddd solid;
    }
    .lstnewproduct>li .lstbutton li {
        box-sizing: border-box;
        padding: 9px;
        border-left: 1px #dddddd solid;
    }
    .lstnewproduct>li .lstbutton li:first-child {
        border: none;
    }
    .lstnewproduct>li .lstbutton li a {
        display: block;
        text-align: center;
    }
    .lstnewproduct>li .lstbutton li.detail {
        flex-grow: 1;
    }
    .lstnewproduct>li .lstbutton li.detail a {
        color: #ffffff;
        background-color: #00559d;
        border-radius: 4px;
        padding: 4px;
    }
    .lstnewproduct>li .lstbutton li.detail a:hover {
        opacity: 0.8;
        transition: all ease-out 0.25s;
    }
    .lstnewproduct>li .lstbutton li.video {
        flex-shrink: 0;
        width: 50px;
        font-size: 31px;
    }
    .lstnewproduct>li .lstbutton li.video a {
        color: #00559d;
    }
    .lstnewproduct>li .lstbutton li.video a:hover {
        opacity: 0.8;
        transition: all ease-out 0.25s;
    }
    .lstnewproduct>li .lstbutton li.paper {
        flex-shrink: 0;
        width: 50px;
        padding: 12px 13px 9px;
    }
}

/* other
-------------------------------------------------- */

.secshowroomcontents.secsurvey {
    padding: 80px 0 80px;
}

.secshowroomcontents.secsurvey>.inner {
    max-width: 880px;
}

.secshowroomcontents.secsurvey>.inner h2 {
    font-family: "noto sans jp", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", helvetica, arial, sans-serif;
    font-size: .32rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    line-height: 1.5em;
}

.serveytext {
    margin-top: 40px;
    line-height: 2em;
}

.serveytext strong {
    color: #e50012;
    font-weight: 700;
}

.serveyterm {
    margin-top: 30px;
    text-align: center;
    font-size: .18rem;
    font-weight: 700;
    line-height: 1.5em;
}

.secsurvey .button {
    margin-top: 60px;
}

.secrecommend {
    padding: 50px 0 50px;
    background-color: #121f40;
}

.secshowroomcontents.secrecommend>.inner h2 {
    font-size: .35rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.5em;
}

.lstrecommendbanner {
    font-size: 0;
    text-align: center;
    width: auto;
    margin: 35px -17px 0;
}

.lstrecommendbanner>li {
    box-sizing: border-box;
    width: 33.33333%;
    padding: 0 17px;
    display: inline-block;
    font-size: .15rem;
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
    .secshowroomcontents.secsurvey {
        padding: 80px 20px 80px;
    }
    .secrecommend {
        padding: 50px 20px 50px;
        background-color: #121f40;
    }
}

@media screen and (max-width: 767px) {
    .secshowroomcontents.secsurvey {
        padding: 40px 20px 30px;
    }
    .secshowroomcontents.secsurvey>.inner {
        max-width: 880px;
    }
    .secshowroomcontents.secsurvey>.inner h2 {
        font-size: .20rem;
        font-weight: 700;
        color: #000000;
        text-align: center;
        line-height: 1.5em;
    }
    .serveytext {
        margin-top: 15px;
        line-height: 1.6em;
    }
    .serveytext strong {
        color: #e50012;
        font-weight: 700;
    }
    .serveyterm {
        margin-top: 15px;
        text-align: left;
        font-size: .125rem;
        font-weight: 700;
        line-height: 1.5em;
    }
    .secsurvey .button {
        margin-top: 30px;
    }
    .secrecommend {
        padding: 20px 20px 20px;
        background-color: #121f40;
    }
    .secshowroomcontents.secrecommend>.inner h2 {
        font-size: .175rem;
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        line-height: 1.5em;
    }
    .lstrecommendbanner {
        font-size: 0;
        text-align: center;
        width: auto;
        margin: 0 -10px 0;
    }
    .lstrecommendbanner>li {
        box-sizing: border-box;
        width: 50%;
        padding: 0 10px;
        margin-top: 15px;
        display: inline-block;
        font-size: .15rem;
    }
}

/* modal window
-------------------------------------------------- */

#modalwindow {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -100;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s linear;
}

#modalwindow:hover {
    cursor: pointer;
}

body.js-modal-open #modalwindow {
    z-index: 99999;
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

#modalwindow>.inner {
    display: table;
    width: 100%;
    height: 100%;
}

#modalwindow>.inner>section {
    display: none;
    vertical-align: middle;
}

#modalwindow>.inner>section.active {
    display: table-cell;
}

#modalwindow>.inner>section>.inner {
    box-sizing: border-box;
    width: auto;
    max-width: 1000px;
    margin: auto;
    padding: 25px 50px 50px;
    text-align: left;
    background-color: #ffffff;
    position: relative;
}

#modalwindow>.inner>section>.inner:hover {
    cursor: default;
}

#modalwindow>.inner>section>.inner .btnmodalclose {
    position: absolute;
    width: 28px;
    height: 28px;
    right: 0;
    top: -32px;
}

#modalwindow .btnmodalclose2 {
    display: none;
}

#modalwindow>.inner>section>.inner .btnmodalclose:hover {
    cursor: pointer;
}

#modalwindow>.inner>section>.inner .btnmodalclose span {
    position: relative;
    display: block;
    width: 31px;
    height: 1px;
    background-color: #ffffff;
}

#modalwindow>.inner>section>.inner .btnmodalclose span:nth-child(1) {
    transform: rotate(-45deg);
}

#modalwindow>.inner>section>.inner .btnmodalclose span:nth-child(2) {
    transform: rotate(45deg);
}

#modalwindow section h2 {
    font-size: .30rem;
    font-weight: 700;
    line-height: 1.5em;
    border-left: 5px #00559d solid;
    padding: 0 0 0 18px;
}

#modalwindow section.abrand h2 {
    border-left: 5px #e50012 solid;
}

#modalwindow section h2 .iconnew {
    display: inline-block;
    color: #ffffff;
    background-color: #e50012;
    font-size: .18rem;
    font-weight: 400;
    line-height: 1em;
    margin-top: 12px;
    padding: 3px 5px;
    vertical-align: text-top;
}

#modalwindow section .modalcontent {
    margin-top: 20px;
}

.modalleftside {
    width: 37.78%;
    float: left;
}

.modalleftside .mediacontainer .mediacontainer {
    margin-top: 10px;
}

.mediacontainer,
.mediacontainer a {
    position: relative;
    display: block;
}

.mediacontainer.youtube {
    position: relative;
    padding-bottom: 56.25%;
    /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
}

.mediacontainer.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mediacontainer a .iconvideoplay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 53px;
    height: 53px;
}

.modalrightside {
    width: 56.67%;
    float: right;
}

#modalwindow .btnproducts {
    width: auto;
    margin: 12px -6px 0;
}

#modalwindow .btnproducts li {
    width: 50%;
    float: left;
    margin-top: 12px;
}

#modalwindow .btnproducts li>div {
    padding: 0 6px;
}

#modalwindow .btnproducts li>div a {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 13px 5px 13px 15px;
    font-size: .15rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #ffffff;
    background-color: #00559d;
    border-radius: 4px;
}

#modalwindow .btnproducts li>div a:hover {
    opacity: 0.8;
}

#modalwindow .btnproducts li>div a i {
    font-size: .20rem;
    float: right;
}

#modalwindow .button.btnmodalseminar,
#modalwindow .button.btnmodalcampaign {
    text-align: left;
    margin-top: 30px;
}

#modalwindow .button.btnmodalseminar a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 13px 5px 13px 15px;
    font-size: .15rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #00296f;
    background-color: #eef2fb;
    border: 1px #ccd1dd solid;
    border-radius: 0;
    text-align: center;
}

#modalwindow .button.btnmodalcampaign a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 13px 5px 13px 15px;
    font-size: .15rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #ffffff;
    background-color: #e50012;
    border: 1px #ccd1dd solid;
    border-radius: 0;
    text-align: center;
}

#modalwindow .button.btnmodalseminar.btnend a,
#modalwindow .button.btnmodalcampaign.btnend a {
    color: #ffffff;
    background-color: #252525;
}

#modalwindow .button.btnmodalseminar a:hover,
#modalwindow .button.btnmodalcampaign a:hover {
    border: 1px #00559d solid;
}

#modalwindow .button.btnmodalseminar a i,
#modalwindow .button.btnmodalcampaign a i {
    font-size: .20rem;
    float: right;
}

#modalwindow .btnicon.btnother {
    width: auto;
    margin: 12px -6px 0;
}

#modalwindow .btnproducts .btnicon.btnother {
    margin-top: 30px;
}

#modalwindow .btnicon.btnother li {
    width: 33.3333%;
    float: left;
}

#modalwindow .btnicon.btnother li>div {
    padding: 0 6px;
}

#modalwindow .btnicon.btnother li>div a {
    box-sizing: border-box;
    display: block;
    color: #00296f;
    font-size: .14rem;
    font-weight: 700;
    line-height: 1.33em;
    text-align: center;
    background-color: #eef2fb;
    border: 1px #ccd1dd solid;
    padding: 10px 0 7px;
    height: auto;
    min-height: 120px;
}

#modalwindow .btnicon.btnother li>div a:hover {
    border: 1px #00559d solid;
}

#modalwindow .btnicon.btnother span {
    display: block;
}

#modalwindow .btnicon.btnother li:nth-child(1) span.name {
    margin-top: 7px;
}

#modalwindow .btnicon.btnproducts span.note {
    font-size: .12rem;
    font-weight: 500;
    line-height: 1.33em;
    margin-top: 3px;
}

.lstabrandmedia li {
    width: 50%;
    float: left;
    position: relative;
}

.mediacontainer .iconabrand,
.lstabrandmedia li .iconabrand {
    position: absolute;
    left: 8.44%;
    top: 11.39%;
    width: 78px;
    height: auto;
}

.mediacontainer .iconphoenix,
.lstabrandmedia li .iconphoenix {
    position: absolute;
    left: 8.44%;
    top: 11.39%;
    width: 78px;
    height: auto;
}

.mediacontainer .iconabrand {
    width: 60px;
}

.mediacontainer .iconphoenix {
    width: 60px;
}

.buttonabrand {
    width: auto;
    margin: 30px -15px 0;
}

.buttonabrand li {
    width: 33.3333%;
    float: left;
}

.buttonabrand li a {
    display: block;
}

.buttonabrand li>div {
    padding: 0 15px;
}

.buttonabrand li>div>a {
    height: 122px;
}

.buttonabrand li.buttonchat>div a {
    box-sizing: border-box;
    display: block;
    position: relative;
    color: #00296f;
    font-size: .17rem;
    font-weight: 700;
    background-color: #eef2fb;
    border: 1px #ccd1dd solid;
}

.buttonabrand li.buttonchat>div a span {
    display: block;
}

.buttonabrand li.buttonchat>div a div.icon {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -30px;
    width: 30%;
}

.buttonabrand li.buttonchat>div a p {
    position: absolute;
    top: 50%;
    padding: 0 0 0 45%;
    margin-top: -1.7em;
}

.buttonabrand li.buttonchat>div a span.note {
    font-size: .13rem;
    font-weight: 400;
}

.buttonabrand li.buttonchat>div a i {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 26px;
    margin: auto;
    font-size: .20rem;
}

.buttonabrand li.buttonother p p {
    margin-top: 12px;
}

.buttonabrand li.buttonother a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px 5px 16px 15px;
    font-size: .15rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #00296f;
    background-color: #eef2fb;
    border: 1px #ccd1dd solid;
    border-radius: 0;
    text-align: left;
}

.buttonabrand li.buttonother .campaign a {
    color: #ffffff;
    background-color: #e50012;
}

.buttonabrand li.buttonother a span {
    display: inline-block;
    font-size: 70%;
    line-height: 1.5em;
    vertical-align: middle;
    margin-left: 5px;
}

.buttonabrand li.buttonother a i {
    float: right;
    font-size: .20rem;
}

.buttonabrand li.buttonchat a:hover,
.buttonabrand li.buttonother a:hover {
    border: 1px #00559d solid;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #modalwindow {
        padding: 0 25px;
    }
    #modalwindow>.inner>section>.inner {
        padding: 25px 25px 50px;
    }
    #modalwindow .btnproducts li>div a {
        padding: 15px 2px 13px 10px;
        font-size: .115rem;
        font-weight: 500;
        line-height: 1.5em;
    }
    .buttonabrand {
        margin: 30px -5px 0;
    }
    .buttonabrand li>div {
        padding: 0 5px;
    }
    .buttonabrand li>div>a {
        height: 94px;
    }
    .buttonabrand li.buttonother p p {
        margin-top: 10px;
    }
    .buttonabrand li.buttonother a {
        padding: 9px 5px 9px 15px;
    }
}

@media screen and (max-width: 767px) {
    #modalwindow {
        box-sizing: border-box;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 0 20px;
        z-index: -100;
        background: rgba(0, 0, 0, 0.8);
        opacity: 0;
        transition: all 0.3s linear;
    }
    body.js-modal-open #modalwindow {
        z-index: 99999;
        transition: all 0.5s;
        opacity: 1;
    }
    #modalwindow>.inner {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-top: 40px;
        padding-bottom: 50px;
        overflow: scroll;
    }
    #modalwindow>.inner>section {
        display: none;
        vertical-align: middle;
        height: 100%;
        overflow: visible;
    }
    #modalwindow>.inner>section.active {
        display: table-cell;
    }
    #modalwindow>.inner>section>.inner {
        box-sizing: border-box;
        width: auto;
        max-width: inherit;
        margin: auto;
        padding: 15px 15px 15px;
        text-align: left;
        background-color: #ffffff;
        position: relative;
    }
    #modalwindow>.inner>section>.inner:hover {
        cursor: default;
    }
    #modalwindow>.inner>section>.inner .btnmodalclose {
        position: absolute;
        width: 25px;
        height: 25px;
        right: 0;
        top: -22px;
    }
    #modalwindow>.inner>section>.inner .btnmodalclose:hover {
        cursor: pointer;
    }
    #modalwindow>.inner>section>.inner .btnmodalclose span {
        position: relative;
        display: block;
        width: 25px;
        height: 1px;
        background-color: #ffffff;
    }
    #modalwindow .btnmodalclose2 {
        display: block;
        text-align: center;
        margin-top: 15px;
    }
    #modalwindow .btnmodalclose2>span {
        box-sizing: border-box;
        display: block;
        width: 115px;
        padding: 4px;
        margin: auto;
        border: 1px #999999 solid;
    }
    #modalwindow>.inner>section>.inner .btnmodalclose span:nth-child(1) {
        transform: rotate(-45deg);
    }
    #modalwindow>.inner>section>.inner .btnmodalclose span:nth-child(2) {
        transform: rotate(45deg);
    }
    #modalwindow section h2 {
        font-size: .15rem;
        font-weight: 700;
        line-height: 1.5em;
        border-left: 3px #00559d solid;
        padding: 0 0 0 10px;
    }
    #modalwindow section.abrand h2 {
        border-left: 5px #e50012 solid;
    }
    #modalwindow section h2 .iconnew {
        display: inline-block;
        color: #ffffff;
        background-color: #e50012;
        font-size: .10rem;
        font-weight: 400;
        line-height: 1em;
        margin-top: 4px;
        padding: 3px 5px;
        vertical-align: text-top;
    }
    #modalwindow section .modalcontent {
        margin-top: 15px;
    }
    .modalleftside {
        width: auto;
        float: none;
    }
    .modalrightside {
        width: auto;
        float: none;
        margin-top: 15px;
    }
    #modalwindow .btnproducts {
        width: auto;
        margin: 15px 0 0;
    }
    #modalwindow .btnproducts li {
        width: auto;
        float: none;
        margin-top: 7px;
    }
    #modalwindow .btnproducts li>div {
        padding: 0;
    }
    #modalwindow .btnproducts li>div a {
        display: block;
        box-sizing: border-box;
        width: auto;
        margin: 0;
        padding: 10px 5px 10px 15px;
        font-size: .13rem;
        font-weight: 500;
        line-height: 1.5em;
        color: #ffffff;
        background-color: #00559d;
        border-radius: 4px;
    }
    #modalwindow .btnproducts li>div a i {
        font-size: .16rem;
        float: right;
    }
    #modalwindow .button.btnmodalseminar {
        text-align: left;
        margin-top: 20px;
    }
    #modalwindow .button.btnmodalseminar a {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 10px 5px 10px 15px;
        font-size: .13rem;
        font-weight: 500;
        line-height: 1.5em;
        color: #00296f;
        background-color: #eef2fb;
        border: 1px #ccd1dd solid;
        border-radius: 0;
        text-align: left;
    }
    #modalwindow .button.btnmodalseminar a i {
        font-size: .20rem;
        float: right;
    }
    #modalwindow .btnicon.btnother {
        width: auto;
        margin: 8px -4px 0;
    }
    #modalwindow .btnicon.btnother li {
        width: 33.3333%;
        float: left;
    }
    #modalwindow .btnicon.btnother li>div {
        padding: 0 4px;
    }
    #modalwindow .btnicon.btnother li>div a {
        box-sizing: border-box;
        display: block;
        color: #00296f;
        font-size: .10rem;
        font-weight: 700;
        line-height: 1.33em;
        text-align: center;
        background-color: #eef2fb;
        border: 1px #ccd1dd solid;
        padding: 10px 0 7px;
        height: auto;
        min-height: 80px;
    }
    #modalwindow .btnicon.btnother span.note {
        font-weight: 400;
        line-height: 1.33em;
    }
    #modalwindow .btnicon.btnother li img {
        width: 38px;
        height: auto;
    }
    #modalwindow .btnicon.btnother span {
        display: block;
    }
    #modalwindow .btnicon.btnproducts li:nth-child(1) span.name {
        margin-top: 5px;
    }
    #modalwindow .btnicon.btnproducts span.note {
        font-size: .9rem;
        font-weight: 400;
        line-height: 1.33em;
        margin-top: 3px;
    }
    #modalwindow .btnproducts .btnicon.btnother {
        margin-top: 20px;
    }
    .lstabrandmedia li {
        width: 100%;
        float: none;
    }
    .buttonabrand {
        width: auto;
        margin: 10px -5px 0;
    }
    .buttonabrand li {
        width: 50%;
        float: left;
    }
    .buttonabrand li a {
        display: block;
    }
    .buttonabrand li>div {
        padding: 0 5px;
    }
    .buttonabrand li>div>a {
        height: auto;
        min-height: 65px;
    }
    .buttonabrand li.buttonchat>div a {
        box-sizing: border-box;
        display: block;
        position: relative;
        color: #00296f;
        font-size: .13rem;
        font-weight: 700;
        line-height: 1.25em;
        background-color: #eef2fb;
        border: 1px #ccd1dd solid;
    }
    .buttonabrand li.buttonchat>div a span {
        display: block;
    }
    .buttonabrand li.buttonchat>div a div.icon {
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -12%;
        width: 25%;
    }
    .buttonabrand li.buttonchat>div a p {
        position: absolute;
        top: 50%;
        padding: 0 0 0 35%;
        margin-top: -1.25em;
    }
    .buttonabrand li.buttonchat>div a span.note {
        font-size: .08rem;
        font-weight: 400;
    }
    .buttonabrand li.buttonchat>div a i {
        display: none;
        /*
		position:absolute;
		right:5px;
		top:0;
		bottom:0;
		height:26px;
		margin:auto;
		font-size: .20rem;
		*/
    }
    .buttonabrand li.buttonother {
        width: 100%;
    }
    .buttonabrand li.buttonother p,
    .buttonabrand li.buttonother p p {
        margin-top: 10px;
    }
    .buttonabrand li.buttonother a {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 10px 5px 10px 15px;
        font-size: .13rem;
        font-weight: 500;
        line-height: 1.5em;
        color: #00296f;
        background-color: #eef2fb;
        border: 1px #ccd1dd solid;
        border-radius: 0;
        text-align: left;
    }
    .buttonabrand li.buttonother a span {
        display: inline-block;
        font-size: 80%;
        line-height: 1.5em;
        vertical-align: middle;
        margin-left: 5px;
    }
    .buttonabrand li.buttonother a i {
        float: right;
        font-size: .16rem;
    }
}

@media screen and (max-width: 320px) {
    .buttonabrand li>div>a {
        height: auto;
        min-height: 53px;
    }
}

.remodal {
    padding: 0;
    background: #000;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.remodal-overlay {
    z-index: 1000999;
    background: rgba(0, 85, 157, 0.9);
}

.remodal-wrapper {
    z-index: 1001000;
}

/* animation */

.btnbooth-1 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-1 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1s;
}

.btnbooth-2 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-2 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.3s;
}

.btnbooth-3 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-3 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.6s;
}

.btnbooth-4 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-4 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.9s;
}

.btnbooth-5 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-5 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 2.2s;
}

.btnbooth-atap {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-atap {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1s;
}

.btnbooth-athreadmill {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-athreadmill {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.3s;
}

.btnbooth-adrill {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-adrill {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.6s;
}

.btnbooth-aendmill {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnbooth-aendmill {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.9s;
}

.btnsignage-1 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnsignage-1 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1s;
}

.btnsignage-2 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnsignage-2 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.3s;
}

.btnsignage-3 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnsignage-3 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.6s;
}

.btnsignage-4 {
    opacity: 0;
    transform: translatey(10px);
}

.swiper-slide-active .btnsignage-4 {
    opacity: 1;
    transform: translatey(0px);
    transition: opacity 0.52s ease, transform 1s ease-out;
    transition-delay: 1.9s;
}

/* contact form
-------------------------------------------------- */

.formarea {
    margin-top: 40px;
}

.formarea form {
    box-sizing: border-box;
    border: 1px #ededed solid;
    width: 100% !important;
    padding: 8%;
    font-size: 15px !important;
}

form.mktoform .mktolabel {
    width: 180px !important;
    padding-top: 15px;
}

form.mktoform #lblfirstname,
form.mktoform #lblkanafirstname {
    padding-left: 30px;
}

form.mktoform #lblemailclubmember,
form.mktoform #lblprivacypolicy,
form.mktoform #lblprivacypolicy02 {
    width: 300px !important;
}

form.mktoform .mktofield {
    margin-top: 5px;
}

form.mktoform input,
form.mktoform select {
    border: none;
    background-color: #efefef;
    border-radius: 4px;
    padding: 15px !important;
    font-size: 15px !important;
}

form.mktoform .mktoradiolist,
form.mktoform .mktocheckboxlist {
    padding-top: 10px;
}

form.mktoform .mktoformrow {}

form.mktoform .mktohtmltext {
    width: 100% !important;
}

form.mktoform .mktohtmltext h4 {
    float: left;
    width: 100% !important;
    color: #00559d;
    font-size: 0.15rem;
    font-weight: normal;
    border-top: 1px solid #efefef;
    padding: 10px 0 10px;
    margin: 30px 0 0;
    background-color: #fff;
    box-sizing: border-box;
}

form.mktoform .mktohtmltext span {
    display: inline-block;
    padding: 10px 0 0;
}

form.mktoform .mktobuttonrow .mktobuttonwrap {
    margin: 0 !important;
}

form.mktoform .mktobuttonrow {
    width: 100%;
    text-align: center;
    clear: both;
    margin: 40px auto 30px;
}

form.mktoform .mktobuttonrow .mktobuttonwrap .mktobutton {
    width: 30%;
    border: none;
    color: #fff;
    padding: 15px;
    background: #00559d url(/uploads/image/p_images/arrow_white.svg) no-repeat 90% center;
    background-size: 9px;
    box-shadow: none;
    font-size: 0.16rem;
    font-weight: 500;
    border-radius: 4px;
}

form.mktoform .mktobuttonrow .mktobuttonwrap .mktobutton:hover {
    background-color: #00296f;
    box-shadow: none;
}

form.mktoform input[type=text],
form.mktoform input[type=url],
form.mktoform input[type=email],
form.mktoform input[type=tel],
form.mktoform input[type=number],
form.mktoform input[type=date],
form.mktoform textarea {
    display: inline-block;
    font-size: 1.6rem;
    margin: 15px 0 15px 0;
}

@media screen and (max-width: 767px) {
    .formarea {
        margin-top: 20px;
    }
    .formarea form {
        box-sizing: border-box;
        border: 1px #ededed solid;
        width: 100% !important;
        padding: 20px;
        font-size: 13px !important;
    }
    form.mktoform input[type=radio],
    form.mktoform input[type=checkbox] {
        padding: 0 !important;
    }
    form.mktoform .mktolabel {
        width: auto !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    form.mktoform #lblfirstname,
    form.mktoform #lblkanafirstname {
        padding-left: 0;
    }
    form.mktoform #lblemailclubmember,
    form.mktoform #lblprivacypolicy,
    form.mktoform #lblprivacypolicy02 {
        width: auto !important;
    }
    form.mktoform input[type=text],
    form.mktoform input[type=url],
    form.mktoform input[type=email],
    form.mktoform input[type=tel],
    form.mktoform input[type=number],
    form.mktoform input[type=date],
    form.mktoform textarea {
        display: inline-block;
        font-size: 1.6rem;
        margin: 0;
    }
    form.mktoform .mktoradiolist label {
        padding-top: 5px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .formarea form {
        padding: 20px;
    }
    form.mktoform input[type=radio],
    form.mktoform input[type=checkbox] {
        padding: 0 !important;
    }
    form.mktoform .mktoradiolist label {
        padding-top: 5px;
    }
}