.swiper-container {
    width: 600px;
    height: 300px;
}
.font-bold{
    font-weight: bold;
}
.header-right{
    overflow: hidden;
    float:right;
    width: 540px;
    margin-top: 10px;
}
.header-right div{
    float:left;
}
.header-left{
    float:left;
}
.header{
    overflow: hidden;
    padding: 15px 0;
}
.header-btn-white{
    font-weight: bold;
    background: #fff;
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    display: inline-block;
    border-radius: 25px;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
}
.header-btn-black{
    font-weight: bold;
    background: #000;
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    display: inline-block;
    border-radius: 25px;
    color: #fff;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
}
.main-logo{
    max-width:160px;
    cursor: pointer;
}
.sns-img{
    width: 14%;
    text-align: center;
    cursor: pointer;
}
.top{
    width: 1300px;
    margin: 0 auto;
    background: linear-gradient(90deg, #faf7fa 23%, #ffc434 23%);
    padding-top: 80px;
}
.line{
    height: 3px;
    width: 86px;
    background: #000;
    margin: 35px 0;
}
.download_btn{
    cursor: pointer;
}
.sub-text{
    font-size: 18px;
}
.sub-text p:first-child{
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 20px;
}
.mukkebi-char{
    max-width: 630px;
    bottom: 314px;
    left: 575px;
    position: relative;
}
.phone-img{
    position: absolute;
    right: 10px;
    bottom: 486px;
    z-index: 999;
    max-width: 377px
}
.phone-back{
    position: absolute;
    right: 0;
    bottom: 550px;
    z-index: 200;
}
.content-one-wrap{
    padding-top: 90px;
    position: relative;
    background: #fff;
    z-index:300;
}
.content-one-text p:last-child{
    font-size: 19px;
    margin: 30px 0 90px 0;
}
.content-four-text p:last-child{
    font-size: 19px;
    margin: 30px 0 90px 0;
}
.content-four-text p:nth-child(4){
    font-size: 19px;
    margin: 30px 0 40px 0;
}
.content-four-tab ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.content-four-tab ul li {
    list-style: none;
    width: calc((100% / 5) - 15px);
    display: inline-block;
    padding: 12px 6px;
}
.content-four-tab ul li img {
    width: 100%;
}
.content-four-linear {
    padding-top: 30px;
}
.content-four-map {
    width: 40%;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.content-four-map .mapDefault {
    opacity: 1;
    width: 100%;
}

.content-four-map .mapDefault.off {
    opacity: 0.2;
}

.content-four-map .mapHide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
}
.content-four-map .mapHide.on {
    animation: fadeIn2 1s;
    opacity: 1;

}
.content-four-list {
    width: calc(60% - 10px);
    display: inline-block;
    vertical-align: top;
}


.content-four-list ul {
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    border-right: 0;
	padding-left :0;
    margin: 0;
    padding: 0;
}
.content-four-list ul li {
    text-align: center;
    float: left;
	list-style:none;

}

.content-four-list ul li a {
    display: block;
    font-size: 14px;
	color: black;
    padding: 9px 12px;
    border-right: solid 1px #ccc;
    box-sizing: border-box;
	text-decoration-line:none;
}

.content-four-list ul li.on {
    background: #ffc434;
}

.content-four-list ul li.on a {
    color: #fff;
}

.content-four-div table tr td {
    border: 0px solid black;
    border-bottom: 1px solid gray;
    padding: 20px 8px 40px 8px;
    vertical-align: top;
}

.content-four-div table tr td div.box {
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 20px;
} 
.content-four-div table tr td img {
    width: 100%; height: 100%;
    object-fit: cover !important;
}

.content-four-div table tr td p:nth-child(1) {
    font-size: 20px;
    font-weight: bold;

    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1em;
  max-height: 1em;
}

.content-four-div table tr td div:nth-child(2) {
    font-size: 16px;
    color: gray;
    margin-top: 14px;


    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5em;
  max-height: 3em;
}

.content-four-div table tr td p:nth-child(3) {
    font-size: 16px;
    color: gray;
    margin-top: 20px;
}
.content-four-div table tr td p:nth-child(3) span {
    font-size: 16px;
    color: black;
    font-weight: bold;
}

.content-img-text-wrap{
    margin-top: 20px;
}
.content-img-text-wrap p{
    font-size: 15px;
}
.content-img-main-text{
    font-size: 20px !important;
    font-weight: bold;

}
.content-two-wrap{
    background: url("../../image/web/210324/images/contents02/contents_02bg.png");
    height: 790px;
    overflow: hidden;
    position: relative;
    background: #faf7fa;
}
.content-two{
    width: 1300px;
    margin:0 auto;
    position: relative;
}
.content-two-text{
    margin-top:40px;
    font-size: 20px;
    line-height: 35px;
}
.bg-logo{
    width: 1287px;
    height: auto;
    top: 85%;
    right: 0;
    position: absolute;
    opacity: 0.5;
}
.content-one-img{
overflow: hidden;
}
.content-one-img img{
width: 100%;
}
.content-one-img > div{
float:left;
width: 31%;
margin-right: 2%;
}
.content-one-img > div:first-child{
margin-left: 10px;
}
.content-one-img > div:last-child{
margin-right: 10px;
}
.content-two-main-text{
position: relative;
margin: 0 auto;
top: 238px;
}
.content-two-main-text p:last-child{
font-size: 22px;
    margin-top: 45px;
}
.content-two-navbar-wrap{
width: 40%;
margin-top: 236px;
}
.content-two-img{
width: 419px;
position: absolute;
left: 550px;
top: -102px;
z-index: 400;
}
.content-three-wrap{
background: #fff;
z-index: 999;
padding-bottom: 50px;
position: relative;
}
.content-three{
width: 85%;
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
padding-top: 250px;
}
.content-three-left{
width: 52%;
float: left;
}
.content-three-right{
width: 48%;
float: right;
}
.content-three-text-wrap{
padding-left: 21%;
}
.content-three-img{
text-align: center;
}
.content-three-img img{
width: 65%;
z-index:999;
position: relative;
}
.content-three-img-squre{
right: 24%;
z-index: 800 !important;
bottom: 182px;
width: 45% !important;
}
.content-three-img-circle{
left: 71%;
z-index: 800 !important;
bottom: 59px;
width: 20% !important;
}
.content-three-sub-text{
font-size: 18px;
margin: 30px 0 40px 0;
}
.content-three-textimg{
width: 80%;
}
.content-three-textimg2{
width: 75%;
}
.display-m{
display:none;
}
.display-pc{
display:block;
}
.inner-img{
display:none;
}

.content-four-wrap{
    padding-top: 90px;
    position: relative;
    background: #fff;
    z-index:300;
}
@-webkit-keyframes fadeIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes fadeIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}

@-webkit-keyframes fadeIn2 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn2 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.ani_visible{
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.rock{
-webkit-animation: none;
animation: none;
}
.content-three-backImg{
    width: 113%;
    bottom: 271px;
    right: 20%;
    z-index: 500;
    opacity: 0.1;
    position: relative;
}
.content-two-head{
    position:relative;
    width:100%;
    left: 200px;
}
.content-two-head-img{
    position: absolute;
}
.content-two-head-back{
    background: #ffc434;
    height: 400px;
    width: 100%;
    top: 61px;
    position: absolute;
    left: 308px;
}
@media screen and (min-width: 770px){
.content-four-tab ul li:nth-child(1) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_00.png'); }
.content-four-tab ul li:nth-child(2) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_01.png'); }
.content-four-tab ul li:nth-child(3) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_02.png'); }
.content-four-tab ul li:nth-child(4) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_03.png'); }
.content-four-tab ul li:nth-child(5) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_04.png'); }
.content-four-tab ul li:nth-child(6) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_05.png'); }
.content-four-tab ul li:nth-child(7) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_06.png'); }
.content-four-tab ul li:nth-child(8) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_07.png'); }
.content-four-tab ul li:nth-child(9) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_08.png'); }
.content-four-tab ul li:nth-child(10) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_09.png'); }
.content-four-tab ul li:nth-child(11) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_10.png'); }
.content-four-tab ul li:nth-child(12) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_11.png'); }
.content-four-tab ul li:nth-child(13) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_12.png'); }
.content-four-tab ul li:nth-child(14) img:hover { content: url('../../image/web/210324/images/contents04/logo_on_13.png'); }

.content-two-navbar{
margin: 0px;
overflow: hidden;
border-bottom: 2px solid black;
    height: 73px;
}
.content-two-navbar li{
list-style: none;
float: left;
font-size: 20px;
padding: 20px;
cursor: pointer;
}
.content-two-navbar li.on{
list-style: none;
float: left;
font-size: 20px;
font-weight: bold;
padding: 20px;
border-bottom: 5px solid #000;
transition: all 0.3s;
}
.change-img-wrap{
background: #fff;
overflow: hidden;
position: absolute;
width: 324px;
height: 650px;
left: 610px;
top: -68px;
}
.change-img-wrap img{
position: absolute;
width: 407px;
z-index: 400;
right: -29px;
top: -33px;
}
.header{
width: 1300px;
margin: 0 auto;
}
.top-wrap{
background: linear-gradient(90deg, #faf7fa 50%, #ffc434 50%);
height: 784px;
margin-bottom: -82px;
overflow-x: auto;
overflow-y: hidden;
    touch-action: none;
}
.download-btn-wrap{
margin-top: 31px;
}
.content-one{
max-width: 1300px;
margin:0 auto;
padding-bottom: 100px;
}
.content-four{
max-width: 1300px;
margin:0 auto;
padding-bottom: 100px;
}
.bottom-wrap{
background: url("../../image/web/210324/images/infogram/bottom_bg.png");
overflow: hidden;
padding: 70px 0;
}
.bottom{
width: 1300px;
margin: 0 auto;
}
.bottom-top{
overflow: hidden;
width: 1350px;
}
.bottom-top-content{
float: left;
}
.bottom-btn-white{
font-weight: bold;
background: #fff;
border: 1px solid black;
padding: 10px;
width: 100px;
display: inline-block;
border-radius: 25px;
text-align: center;
/* margin-left: 20px; */
cursor: pointer;
}
.bottom-btn-black{
font-weight: bold;
background: #000;
border: 1px solid black;
padding: 10px;
width: 100px;
display: inline-block;
border-radius: 25px;
color: #fff;
text-align: center;
margin-left: 20px;
cursor: pointer;
}
.bottom-text{
width: 60%;
padding: 30px 0 30px 0;
font-size: 22px;
}
.bottom-line{
height: 2px;
background: #000;
margin-bottom: 20px;
width: 1280px;
}
.bottom-bottom{
font-size: 16px;
line-height: 28px;
}
}
@media screen and (max-width: 769px){
.navbar-img{
overflow: hidden;
}
.ham-menu{
display: none;
width: 100%;
background: #fff;
}
.ham-menu ul{
margin:0;
}
.ham-menu li{
list-style: none;
padding: 15px 30px;
font-size: 15px;
cursor: pointer;
}
.ham-menu li:hover{
list-style: none;
padding: 15px 30px;
font-size: 15px;
background: #f8f8f8;
cursor: pointer;
}
.change-img-wrap{
overflow: hidden;
width: 292px;
height: 500px;
position: relative;
margin: 0 auto;
}
.phone-innder-img{
max-width: 287px;
z-index: 700;
position: absolute;
right: -3%;
margin: 0 auto;
}
.phone-box{
max-width: 305px;
z-index: 888;
text-align: center;
position: absolute;
right: -2%;
}
.phone-box-inner-img-wrap{
position: relative;
width: 249px;
height: 100%;
background: #fff;
overflow: hidden;
left: 33px;
top: 14px;
}
.header-wrap{
display: none;
}
.header{
display:none;
}
.top-m{
width:90%;
margin: 0 auto 0px auto;
    padding-top:40%;
}
.top-wrap{
background: url("../../image/web/210324/images/m_top.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
min-height: 100vh;
}
.main-text-img{
width: 100%;
right: 1%;
position: relative;
}
.main-text{
font-size: 43px;
font-weight: bold;
line-height: 55px;
}
.sub-text-m{
font-size: 3.5vw;
font-weight: bold;
}
.download-btn-wrap{
text-align: center;
margin-top: 31px;
}
.download_btn{
position: fixed;
width: 51%;
bottom: 10%;
right: 24%;
    z-index: 9999;
}
.content-one{
width: 90%;
margin:0 auto;
padding-bottom: 100px;
}
.content-four{
width: 90%;
margin:0 auto;
padding-bottom: 100px;
}
.content-one-img > div{
float: left;
width: 100%;
padding: 1%;
}
.content-one-text p{
font-size: 30px;
font-weight: bold;
line-height: 37px;
text-align: center;
}
.content-one-text p:last-child{
font-size: 15px;
margin: 25px 0;
line-height: 21px;
}
.content-four-text p{
font-size: 30px;
font-weight: bold;
line-height: 37px;
text-align: center;
}
.content-four-text p:last-child{
font-size: 15px;
margin: 25px 0;
line-height: 21px;
}
.content-four-text p:nth-child(4){
font-size: 15px;
margin: 25px 0;
line-height: 21px;
}
.content-four-tab ul li {
    list-style: none;
    width: calc(50% - 8px);
    display: inline-block;
    padding: 6px 3px;
}
.content-four-tab ul li img {
    width: 100%;
}
.content-four-map {
    width: 0;
    display: none;
}
.content-four-list {
    width: 100%;
}

.content-four-div table tr td div.box {
    width: 100px;
    height: 100px;
} 


.content-four-div table tr td p:nth-child(2) {
    max-width: 200px;
}

.content-one-img{
overflow: hidden;
text-align: center;
}
.content-one-img img{
width: 85%;
}
.content-img-text-wrap{
margin: 25px 0 40px 0;
}
.content-one-list-m{
margin: 0;
display: flex;
border-bottom:3px solid #000;
height: 100%;
}
.content-one-list-m li{
list-style: none;
font-size: 18px;
width: 33%;
padding: 10px;
cursor:pointer;
}
.content-one-list-m li.on{
list-style: none;
font-size: 18px;
font-weight: bold;
width: 33%;
padding: 10px;
border-bottom: 5px solid #000;
cursor:pointer;
}
.content-one-list-text{
margin: 30px 0;
font-size: 17px;
transition: all 0.3s;
    height: 38px;
}
.content-two-text{
font-size: 17px;
margin-top: 35px;
}
.content-two-wrap-m{
background: linear-gradient(0, #ffc434 30%, #ffffff 30%);
}
.content-two-m{
width: 90%;
margin: 0 auto;
text-align: center;
height: 553px;
overflow: hidden;
position: relative;
}
.content-two2-m{
width: 90%;
margin: 30px auto 0 auto;
text-align: center;
}
.content-two-navbar{
margin: 0;
display: flex;
border-bottom:3px solid #000;
height: 100%;
margin: 0 0 30px 0;
}
.content-two-navbar li{
list-style: none;
font-size: 16px;
width: 33%;
padding: 10px;
cursor:pointer;
}
.content-two-navbar li.on{
list-style: none;
font-weight: bold;
font-size: 16px;
width: 33%;
padding: 10px;
border-bottom:5px solid #000;
}
.content-two2-m-text{
font-size: 16px;
    height:30px;
}
.content-two-maintext{
font-size: 33px;
font-weight: bold;
line-height: 41px;
}
.content-two-subtext{
font-size: 18px;
margin: 25px 0;
}
.content-three-main-text{
font-size: 29px;
}
.content-three-sub-text{
font-size: 17px;
}
.content-three-wrap-m{
position: relative;
margin: 70px 0;
}
.content-three-m{
width: 90%;
margin: 0 auto;
text-align: center;
}
.content-three-maintext-m{
font-size: 30px;
font-weight: bold;
}
.content-three-subtext-m{
margin-top: 20px;
font-size: 16px;
margin-bottom: 30px;
}
.display-m{
display: block;
}
.display-pc{
display:none;
}
.bottom-wrap{
background: url("../../image/web/210324/images/infogram/bottom_bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
padding: 40px 0 80px 0 ;
}
.bottom{
width:85%;
margin:0 auto;
}
.bottom-img-wrap{
overflow: hidden;
}
.bottom-top-content-m-right img{
width: 20%;
cursor: pointer;
}
.bottom-top-content-m-left{
float: left;
}
.bottom-top-content-m-right{
float: right;
width: 135px;
margin-top: 20px;
text-align: right;
}
.bottom-top-content-m-right img:last-child{
margin-right: 0px;
}
.bottom-line{
height: 2px;
background: #000;
margin: 20px 0;
}
.bottom-text{
margin-top: 30px;
font-size: 3vw;
}
.bottom-bottom div{
font-size: 15px;
margin-top: 20px;
line-height: 23px;
}
.mobile-navbar{
transition: all 0.3s;
position: fixed;
z-index: 9999;
}
.mobile-navbar-left{
float: left;
margin: 13px 0 10px 10px;
}
.mobile-navbar-right{
float: right;
width:10%;
margin: 10px 15px 10px 10px;
max-width: 81px;
cursor:pointer;
}
.main-text-img-m{
width: 28%;
}
.content-one-list-img{
position: relative;
}
.content-one-list-img img{
position: absolute;
top: 0;
left: 8%;
}
.content-one-list-img img:first-child{
position: relative;
top:0 !important;
left:0 !important;;
}
.download-btn-fix{
    position: fixed;
    bottom:0;
    left:0;
    background: #ffc434;
    width: 100%;
    z-index: 9999;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    cursor:pointer;
    opacity: 0;
}
}
.content-one-img > div:first-child{
    margin-left: 0px;
}
@media screen and (max-width: 1299px) {
    .header{
    width: 100%;
    margin: 0 auto;
    }
    .mleft{
        overflow: hidden !important;
        padding: 0 70px 40px 70px !important;;
        width: 100% !important;;
    }
}