@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}
*, *::before, *::after {
    box-sizing: border-box;
    outline: none;
}
body {
    font-size: 18px;
    font-family: "Noto Sans", sans-serif;
    line-height: normal;
    -webkit-text-size-adjust: 100%;
}

.eos section { 
    width: 100%; margin: 0 auto; font-family: "Noto Sans", sans-serif;
}
.eos img {
    width: 100%;
    height: auto;
}
.eos section h1 {

}
.eos section h2 {
    margin-bottom: .25rem;
    font-size: 32px; 
    font-weight: 900; 
    line-height: 150%; 
    letter-spacing: 5px;
    color: #c8161e;
}
.eos section h3 {
    margin-bottom: .25rem;
    font-size: 18px; 
    font-weight: 900; 
    line-height: 150%;    
}
.eos h2, .eos h3, .eos p {
    margin: 0;
    padding: 0;
}
.eos section p {
    margin-bottom: .25rem;
    font-size: 18px; 
    line-height: 150%;
}
.eos ol, .eos ul, .eos li {
    margin: 0; padding: 0;
}
.eos li {
    list-style: none;
}
.eos figcaption {
    
}
.eos a { 
    text-decoration: none;
}
.eos a:hover {
    
}
dl, dd, dt {
    margin: 0;
    padding: 0;
}
dd, dt {
    width: 100%;
}

.font-red { color: #c8161e;}

/* cover */
.cover { width: 100%; height: auto; position: relative; background: #F7F7F7 url(images/cover.png) no-repeat; background-size: 45%; background-position: 98% center;}
.cover h1 { display: none;}
.cover h2 { margin-bottom: 2.5rem; font-size: 3.3rem;}
.cover p { margin-bottom: 1rem;}
.cover .logo { width: 100%; height: 60px; padding: 16px 0 0 16px; z-index: 999;}
.cover .logo a { display: inline-block; height: 24px;}
.cover .logo img { width: auto; height: 24px;}
.cover .cover-wrapper { width: 90%; height: auto; margin: 0 auto; padding: 3rem 0; display: flex; flex-direction: row; justify-content: start;}
.cover article { width: 55%; height: auto; }
.cover article .content-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.cover article .content-wrapper a { color: #000000; text-decoration: underline;}

.cover article .tab-list { width: 100%; height: auto; margin: 0 auto; display: flex; flex-wrap: wrap;}
.cover article .tab-list a { margin: 1% 1%; padding: 2% 2.5% 2.5%; display: block; text-decoration: none; background: #ffffff; color: #000000; border-radius: 15px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);}
.cover article .tab-list a:hover { background: #333333; color: #ffffff; transition: all .3s ease-in;}
.cover article .tab-list:nth-of-type(1) { margin-top: 3rem;}

/* software */
.software { width: 100%; height: auto; position: relative;}
.software .main-wrapper { width: 80%; margin: 4% auto;}
.software .main-wrapper h2 { text-align: center;}
.software .item { width: 100%; height: auto; margin-bottom: 10rem;}
.item .download-software { margin: 2rem auto; display: flex; flex-direction: column;}
.item .download-software img { max-width: 10%; width: 100%;}
.item .download-list { width: 100%; height: auto; margin: 2.5% auto ; padding: 2.5%; border: #eeeeee solid 1px; display: flex; flex-direction: row; justify-content: space-between;}
.item .download-list .content { width: 70%; line-height: 1.7rem;}
.item .download-list .content a { color: #000000; text-decoration: underline;}
.item .download-list .content ol li { margin-left: 1.5rem; list-style: decimal;}
.item .download-list .link { display: flex; flex-direction: row; justify-content: center; align-items: center;}
.link.download { text-align: center; vertical-align: middle;}
.link.download a { width: 120px; height: 120px; display: block; background: #ECECEC; border-radius: 50%; }
.link.download a:hover { background: #333333; color: #ffffff; transition: all .3s ease-in;}
.link.download img { width: 20%; margin-top: 35%;}
.link.download a:hover img { filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(226deg) brightness(104%) contrast(101%);}

/* footer */
footer { width: 100%; height: auto; padding: 10px 0; background: #333333; text-align: center; font-size: 12px; color: #ffffff;}


@media screen and (max-width:1366px) {
    .cover .photo { padding-right: 0;}
    .cover .photo img { height: 90%;}
}

@media screen and (max-width:1280px) {
    .cover h2 { font-size: 2.6rem;}
}

@media screen and (max-width:1200px) {
    .cover .photo img { height: 80%;}
}

@media screen and (max-width:1024px) {
    .cover h2 { font-size: 2.4rem;}
    .cover .photo img { height: 75%;}
    .cover { padding-bottom: 35vw; background-size: 70%; background-position: center 105%;}
    .cover .cover-wrapper { width: 90%; display: flex; flex-direction: column; justify-content: center;}
    .cover article { width: 100%; text-align: center;}
    .cover article .JP p { text-align: left !important;}
    .cover .photo { width: 100%; max-height: 300px; height: auto; margin: 0 auto; text-align: center;}
    .cover .photo img { width: 50%;}
    .cover article .tab-list { justify-content: center;}
}

@media screen and (max-width:960px) {
    

}

@media screen and (max-width:768px) {
    .item .download-software img { max-width: 20%;}
    .item .download-list { margin: 2.5% auto ; padding: 5%; display: flex; flex-direction: column; justify-content: center;}
    .item .download-list .content { width: 100%;}
    .item .download-list .link { margin: 1rem auto 0;}
    .link.download a { width: 80px; height: 80px;}


}

@media screen and (max-width:576px) {
    .item .download-software img { max-width: 30%;}
}

@media screen and (max-width:480px) {
    .cover h2 { font-size: 2rem;}
    .item .download-software img { max-width: 30%;}
}