@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    max-width: 800px;
    min-width: 800px;
    margin: 0 auto;
    color: #333;
    font-size: 1rem;
    font-family: "Noto Sans Japaneze" ,"游ゴシック", "ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif;
    background-color: #CCC;
}

a {
    color: #229;
    text-decoration: none;
    text-decoration-skip-ink: none;
}

a:active {
    color: rgb(153, 34, 117);
}

a:visited {
    color: rgb(153, 34, 117);
}


li {
    list-style: none;
}

/*
ここからログインページ
*/


.example {
    font-size: 1rem;
    font-family: "Noto Sans Japaneze" ,"游ゴシック", "ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    color: #333;
    line-height: 1.5rem;
    background-color: #f3f3f3;
        
    width: 240px;
    height: 200px;
    
    border-radius: 5px;   
    border: 2px solid #777;
}

.example .wrapper{
    margin: 1% auto 1% auto;
    width: 90%;
}

.example input#password {
    width: 100%;
    border: 2px solid #777;
    border-radius: 5px;
    background-color: #EEE;
}


.example input#submit {
    display: block;
    width: 90%;
    margin: 5% auto;

    font-size:1rem;
    font-weight:bold;

    text-align:center;
    padding:8px 0 10px;
    color:#DDD;
    background-color:#49a9d4;
    border-radius: 5px;
}

.example input#submit:hover {
    opacity: 0.7;
}

.example h2 {
    font-size: 1.2rem;
}


.example #button{
    display: block;
    width: 90%;
    margin: 5% auto;

    font-size:1rem;
    font-weight:bold;

    text-align:center;
    padding:8px 0 10px;
    color:#DDD;
    background-color:#666;
    border-radius: 5px;
}

.example #button:hover{
    opacity: 0.7;
}


/*
ここからダウンロードページ
*/

/*
コンテンツ全体を中央に
*/

body >.wrapper {
    margin: 0 auto;
    background-color: #EEE;

    min-height: 100vh;
    position: relative;
    padding-bottom: 70px;
    box-sizing: border-box;

}

/*
ここから
サイトタイトルのデザイン
*/

header h1 {
    font-size: 2.5rem;
    line-height: 180%;
    text-align: center;
    background-color: #f3f3f3;
}

/*
ここから
セクションタイトルデザイン
*/

h2.sectiontitle {
    color: #DDD;
    font-size: 1.65rem;
    line-height: 180%;
    padding-left: 1%;
    margin-bottom: 2%;
    background-color: #666;
    border-radius: 3px;
    border-bottom: 1px solid #777;
}

/*
セクション内要素のデザイン
*/

header, main {
    margin-bottom: 1%;
}

section .wrapper .wrapper {
    margin: 1% 1% 3% 1%;
}

/*
ダウンロードセクション
*/

section#download table {
    border-radius: 5px;
    padding-bottom: 5%;
    width: 100%;
    line-height: 150%;
    background-color: #f3f3f3;
}

section#download td {
    border-bottom: 2px solid #999;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

section#download td a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

section#download td span#ver {
    padding-left: 0.5rem;
    font-size: 0.75rem;
}


section div.new {
    margin-left: 25px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: bold;
}

section div.new span:nth-child(1) {
    animation: 1.2s ease-in infinite anim;
    animation-delay: 0s;
}

section div.new span:nth-child(2) {
    animation: 1.2s ease-in infinite anim;
    animation-delay: 0.2s;
}

section div.new span:nth-child(3) {
    animation: 1.2s ease-in infinite anim;
    animation-delay: 0.4s;
}


section div.new span:nth-child(4) {
    animation: 1.2s ease-in infinite anim;
    animation-delay: 0.6s;
}


@keyframes anim {
    0%{color: red;}
    5%{transform: translateY(-20%);}
    35%{transform: translateY(0);}
    50%{color: #229;}
    100%{color: #229;}
}

/*
連携ソフト更新セクション
*/

section#renkei table {
    border-radius: 5px;
    padding-bottom: 5%;
    width: 100%;
    line-height: 150%;
    background-color: #f3f3f3;
}

section#renkei td {
    border-bottom: 2px solid #999;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

section#renkei td a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

section#renkei td span#ver {
    padding-left: 0.5rem;
    font-size: 0.75rem;
}

#renkeiD {
    margin-top: 2%;
}

#renkeiD p {
    line-height: 150%;
    margin-left: 25px;
}


/*
PC買い替え時の対応セクション
*/

#newpc .wrapper a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

#newpc ul {
    background-color: #f3f3f3;
    border-radius: 5px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 1%;
}

#newpc ul li {
    list-style-type: square;
    font-weight: 600;
    line-height: 150%;
    padding: 0.2em 0;
    margin-left: 0.5rem;
}

#newpc h3#caution {
    color: #922;
    font-size: 1.1rem;
    line-height: 150%;
}

#newpc p {
    line-height: 150%;
}

#newpc span {
    font-weight: 600;
}


#newpc table {
    border-radius: 5px;
    padding-bottom: 5%;
    width: 100%;
    line-height: 150%;
    background-color: #f3f3f3;
}

#newpc td {
    border-bottom: 2px solid #999;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

#newpc td a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}




/*
ダウンロード説明セクション
*/


#description .wrapper .wrapper {
    padding-left: 1%; 
}

#description a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}


/*
RC.Netセットアップセクション
*/

section#RCNetSetup >div {
    margin-top: 15%;
}

section#RCNetSetup table {
    border-radius: 5px;
    padding-bottom: 5%;
    width: 100%;
    line-height: 150%;
    background-color: #f3f3f3;
}

section#RCNetSetup td {
    border-bottom: 2px solid #999;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

section#RCNetSetup td a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

section#RCNetSetup td span#ver {
    padding-left: 0.5rem;
    font-size: 0.75rem;
}

#RCNetSetupD {
    margin-top: 4%;
}

#RCNetSetupD ul {
    background-color: #f3f3f3;
    border-radius: 5px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 1%;
}

#RCNetSetupD ul li {
    list-style-type: square;
    font-weight: 600;
    line-height: 150%;
    padding: 0.2em 0;
    margin-left: 0.5rem;
}

#RCNetSetupD p {
    line-height: 150%;
    margin-left: 25px;
}

#RCNetSetupD span {
    font-weight: 600;
}

/*
余白調整
*/


div#blank {
    position: relative;
    padding-bottom: 15%;
}


/*
トップリンク
*/

#topBT{
    width: 100%;
    position: absolute;
    bottom: 12%;
    text-align: center;
}

#top{
    font-size: 1.2rem;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}


/*
フッターのデザイン
*/

footer {
    color: #CCC;
    padding: 3% 0 3% 0;
    text-align: center;
    background-color: #666;
    border-radius: 3px;
    border: 1px solid #777;

    width: 100%;
    position: absolute;
    bottom: 0;
}

a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 1280px) {
    h1 {
        margin-bottom: 0.5%;
    }
}


/*
確認用
*/


/*
div.wrapper {
    border: 1px solid red;
}

td {
    border: 1px solid blue;
}
*/