@charset "utf-8";

/*---------CSS Document (3) ---------*/

.webC029 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC030 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC031 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC032 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC033 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC034 {
    height:300px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
    background-color:#000000;
}

.webC035 {
    height:400px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC036 {
    height:480px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC037 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC038 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC039 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC040 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC041 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC042 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}

.webC043 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
}




/*--------------０２９ローディングアイコン-------------------*/
.ld001 {
    display:flex;
    flex-flow:row  nowrap;
}
.ld001 > div {
    height:150px;
    width:250px;
}

.ld111 {
    height:80px;
    width:80px;
    border:solid 20px #9f9f9f;
    border-top:solid 20px rgba(103,103,203,0.5);
    border-radius:50%;
    padding:0px;
    margin:25px 0px 0px 50px;
    animation:loading 1.6s linear infinite;
}
@keyframes loading {
        0% { transform:rotate(0deg); }
        100% { transform:rotate(360deg); }
}

.ld211 {
    height:80px;
    width:80px;
    border:solid 15px #bbbbbb;
    border-top:solid 15px rgba(103,233,103,0.5);
    border-radius:50%;
    padding:0px;
    margin:30px 0px 0px 50px;
    animation:loading 1.3s linear infinite;
}
@keyframes loading {
        0% { transform:rotate(0deg); }
        100% { transform:rotate(360deg); }
}

.ld311 {
    height:80px;
    width:80px;
    border:solid 10px #dddddd;
    border-top:solid 10px rgba(223,133,133,0.5);
    border-radius:50%;
    padding:0px;
    margin:35px 0px 0px 50px;
    animation:loading 0.9s linear infinite;
}



/*--------------030　プログレスバー------------------------*/
.pr001 {
    height:150px;
    width:500px;
    padding:0px;
    margin:25px 0px 0px 100px;
    background-color:#222222;
    overflow:hidden;
}
.pr101 {
    height:30px;
    width:300px;
    border-radius:5px;
    padding:0px;
    margin:60px 0px 0px 100px;
    background-color:#555555;
    overflow:hidden;
}

@keyframes prog {
    0% { margin-left:-80px;}
    25% { margin-left:-40px;}
    40% { margin-left:100px;}
    60% { margin-left:160px;}
    75% { margin-left:260px;}
    100% { margin-left:310px}
}
.pr102 {
    height:30px;
    width:72px;
    border-left:solid 4px #cc9979;
    border-right:solid 4px #f3f3aa;
    padding:0px;
    margin:0px 0px 0px -80px;
    margin-left:-80px;
    background-image:linear-gradient(270deg,#eeee99,#dddd66);
    /*background-color:#dddd66;*/
    animation: prog 1.5s /*ease-in-out*/linear infinite ;
}


/*---------------031 フェードアウト-------------------*/
.fdo001 {
    height:50px;
    width:150px;
    border:solid 2px #cc7979;
    border-radius:10px;
    padding:0px;
    margin:50px 0px 0px 200px;
    background-color:#eeccdc;
    overflow:hidden;
}

.fdo001 > p {
    font-size:20px;
    font-weight:bold;
    color:#cc7986;
    padding:0px;
    margin:8px 0px 0px 30px;
    text-shadow:0px 4px 3px #b399c3;
    transition-property:all;
    transition-duration:0.8s;
    transition-timing-function:ease-in;
}
.fdo001 > p:hover {
    font-size:150px;
    color:#eeccdc;
    padding:0px;
    margin:-140px 0px 0px -280px;
    text-shadow:none;
}


/*------------------032ズーム＆フェードアウト-----------------------*/
.zf001 {
    height:150px;
    width:600px;
    border:solid 2px #f0f0f0;
    border-radius:10px;
    padding:0px;
    margin:10px 0px 0px 200px;
    overflow:hidden;
    position:relative;
    z-index:3;
    animation-name:none;
    animation-duration:8s;
    animation-iteration-count:1;
}
@keyframes zfa001 {
    0%{background-color:#ffffff;}
    35%{background-color:#13268a;}
    /*50%{background-color:#3346aa;}*/
    65%{background-color:#13268a;}
    100%{backgrond-color:#ffffff;}
}

.zf002 {
    height:30px;
    width:400px;
    font-size:24px;
    font-weight:bold;
    margin:50px 0px 0px 100px;
    color:#edfddf;
    position:absolute;
    display:block;
    z-index:6;
    opacity:0%;
    animation-name:none;
    animation-duration:8s;
    animation-iteration-count:1;
}
@keyframes zfa002 {
    0%{opacity:0%;}
    40%{opacity:100%;font-size:24px;margin:50px 0px 0px 100px;width:400px;height:30px;}
    47%{color:#edfddf;}
    48%{color:#afdfff;}
    50%{color:#edfddf;}
    /*50%{opacity:100%;font-size:24px;margin:50px 0px 0px 120px;width:360px;height:30px;}*/
    65%{opacity:100%;font-size:24px;margin:50px 0px 0px 100px;width:400px;height:30px;}
    100%{opacity:0%;font-size:64px;margin:15px 0px 0px -160px;width:1200px;height:200px;z-index:6;}
}


/*------------------033 点滅 ------------------------------------*/
.ten001 {
    height:120px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 200px;
    background-color:#eeeeee;
    float:left;
}
.ten001 > div {
    height:60px;
    width:60px;
    border-radius:50%;
    padding:0px;
    margin:30px 0px 0px 80px;
    display:block;
    float:left;
}
.ten101 {
    background-color:#ff9999;
    animation-name:tena001;
    animation-duration:0.5s;
    animation-iteration-count:infinite;
}
.ten102 {
    background-color:#eedd99;
    animation-name:tena001;
    animation-duration:0.7s;
    animation-iteration-count:infinite;
}
.ten103 {
    background-color:#3989ef;
    animation-name:tena001;
    animation-duration:0.9s;
    animation-iteration-count:infinite;
}

@keyframes tena001 {
    0% {opasity:100%;}
    50%{opacity:100%;}
    51%{opacity:0%;}
    100%{opacity:0%;}
}

.ten111 {
    background-color:#ff9999;
    animation-name:tena001;
    animation-duration:1s;
    animation-iteration-count:infinite;
}
.ten112 {
    background-color:#eedd99;
    animation-name:tena001;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
}
.ten113 {
    background-color:#3989ef;
    animation-name:tena001;
    animation-duration:1.8s;
    animation-iteration-count:infinite;
}

.ten121 {
    background-color:#ff9999;
    animation-name:tena001;
    animation-duration:0.25s;
    animation-iteration-count:infinite;
}
.ten122 {
    background-color:#eedd99;
    animation-name:tena001;
    animation-duration:0.35s;
    animation-iteration-count:infinite;
}
.ten123 {
    background-color:#3989ef;
    animation-name:tena001;
    animation-duration:0.45s;
    animation-iteration-count:infinite;
}

.ten211 {
    height:140px;
    width:100px;
    padding:0px;
    margin:-10px 0px 0px 100px;
    display:block;
    float:left;
}
.ten211 > P {
    font-size:20px;
    font-weight:bold;
    height:40px;
    width:60px;
    border-radius:10px;
    padding:0px;
    margin:10px 0px 0px 10px;
    background-color:#c6c8dd;
    display:block;
}
.ten211 > P:hover {
    background-color:#fede99;
}


/*---------- 034スプリングボード -----------------*/
.webC034 > h2 {
    color:#ffffff;
}

.spr001 {
    height:200px;
    width:600px;
    padding:0px;
    margin:0px 0px 0px 200px;
    background-color:#222222;
    display:flex;
    flex-flow:row wrap;
}
.spr001 > div {
    height:100px;
    width:200px;
    padding:0px;
    margin:0px;
}
.spr001 > div > p{
    font-size:16px;
    font-weight:bold;
    /*text-decoration:underline;*/
    height:20px;
    width:200px;
    padding:0px;
    margin:0px;
    text-align:center;
    color:#f0f0f3;

}
.spr001 > div > img {
    height:60px;
    width:60px;
    padding:0px;
    margin:10px 0px 5px 70px; 
}
.spr001 > div > img:hover{
    background-color:#444455;
}


/*-------------------- 035 ステップバー -----------------------------*/
.stb001 {
    height:100px;
    width:800px;
    padding:0px;
    margin:0px 0px 0px 100px;
    background-color:#8899ee;
    position:relative;
    overflow:hidden;
}
.stb002 {
    height:10px;
    width:300px;
    padding:0px;
    margin:0px;
    background-color:#eeeeee;
    position:absolute;
    top:45px;
    left:100px;
    z-index:3;
}
.stb003 {
    height:10px;
    width:300px;
    padding:0px;
    margin:0px;
    background-color:#eeeeee;
    position:absolute;
    top:45px;
    left:400px;
    z-index:3;
}
.stb101 {
    height:38px;
    width:38px;
    border-radius:50%;
    border:solid 1px #8899ee;
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    position:absolute;
    top:30px;
    left:80px;
    z-index:6;
}
.stb111 {
    height:38px;
    width:38px;
    border-radius:50%;
    border:solid 1px #8899ee;
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    position:absolute;
    top:30px;
    left:380px;
    z-index:6;
}
.stb121 {
    height:38px;
    width:38px;
    border-radius:50%;
    border:solid 1px #8899ee;
    padding:0px;
    margin:0px;
    background-color:#ffffff;
    position:absolute;
    top:30px;
    left:680px;
    z-index:6;
}
.stb001 > div > p {
    font-size:24px;
    font-weight:bold;
    text-align:center;
    line-height:20px;
    height:24px;
    width:36px;
    padding:0px;
    margin:8px 0px 0px 2px;
}
.stb001 > div > p:nth-child(2) {
    font-size:20px;
    margin:7px 0px 0px 2px;
}


p.stb103, p.stb113, p.stb123 {
    display:none;

}
.stb102, .stb112, .stb122 {
    display:block;
}

.stb011, .stb021, .stb031, .stb051 {
    height:170px;
    width:600px;
    padding:0px;
    margin:20px 0px 0px 200px;
    background-color:#aabbee;
    overflow:hidden;
    position:relative;
}
.stb021, .stb031, .stb051 {
    display:none;
}
.stb041 > p {
    font-size:16px;
    height:20px;
    width:540px;
    padding:0px;
    margin:20px 0px 0px 30px;
}
.stb041 > input {
    font-size:22px;
    padding:0px;
    margin:30px 0px 0px 150px;
}
.stb041 > button {
    color:#ffffff;
    font-size:20px;
    height:34px;
    width:120px;
    border:none;
    border-top:solid 1px #75cb55;
    border-bottom:solid 1px #135533;
    border-radius:10px;
    padding:0px;
    margin:10px 0px 0px 220px;
    background-color:#339944;
}
.stb012 {
    font-size:18px;
    font-weight:600;
    color:#cf0000;
    position:absolute;
    top:22px;
    left:30px;
    display:none;
}
.stb022 {
    font-size:18px;
    font-weight:600;
    color:#cf0000;
    position:absolute;
    top:22px;
    left:30px;
    display:none;
}
.stb032 {
    font-size:18px;
    font-weight:600;
    color:#cf0000;
    position:absolute;
    top:22px;
    left:30px;
    display:none;
}
.stb051 > button {
    margin:70px 0px 0px 220px;

}


/*---------------------------------------------------------------*/
/*--------------------- 036 ステップインジゲーター ----------------*/
.sti003 {
    height:120px;
    width:1000px;
}
.sti001 {
    height:120px;
    width:150px;
    padding:0px;
    margin:0px 0px 0px 200px;
    float:left;
    position:relative;
}
.sti101 {
    height:120px;
    width:600px;
    padding:0px;
    margin:0px 0px 0px 0px;
    float:left;
}
.sti002 {
    height:70px;
    width:70px;
    border:solid 10px #ccccdc;
    border-top:solid 10px #ffaac9;
    border-radius:50%;
    padding:0px;
    margin:0px;
    transform:rotate(45deg);
    position:relative;
}
.sti001 > p {
    font-size:40px;
    font-weight:600;
    color:#ccccdc;
    height:30px;
    width:30px;
    padding:0px;
    margin:0px;
    position:absolute;
    z-index:6;
}
p.sti011 {
    color:#f09ac9;
    top:6px;
    left:20px;
    display:block;
}
p.sti012 {
    color:#f09ac9;
    top:6px;
    left:20px;
    display:none;
}
p.sti013 {
    color:#f09ac9;
    top:6px;
    left:20px;
    display:none;
}
p.sti014 {
    color:#f09ac9;
    top:6px;
    left:20px;
    display:none;
}
p.sti021 {
    font-size:40px;
    font-weight:550;
    top:18px;
    left:43px;
    transform:rotate(10deg);
    display:block;
}
p.sti031 {
    font-size:30px;
    font-weight:500;
    top:30px;
    left:54px;
    display:block;
}


.sti101 > h3 {
    font-size:130%;
    height:24px;
    width:400px;
    padding:0px;
    margin:25px 0px 30px 0px;
}

.sti201 {
    height:250px;
    width:600px;
    border-radius:10px;
    padding:0px;
    margin:0px 0px 0px 170px;
    background-color:#c9ecff;
    overflow:hidden;
    display:block;
}
.sti201 > h4 {
    font-size:120%;
    height:24px;
    width:200px;
    padding:0px;
    margin:15px 0px 0px 60px;
}
.sti201 > p {
    height:48px;
    width:550px;
    padding:0px;
    margin:15px 0px 0px 60px;
    display:block;
}
.sti201 > p > span {
    font-size:14px;
}
.sti202 {
    height:25px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti202 > P {
    color:#f63949;
    font-weight:750;
    text-decoration:underline;
    height:25px;
    width:500px;
    padding:0px;
    margin:0px;
    display:none;
}
.sti201 > input {
    font-size:22px;
    height:30px;
    width:300px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti201 > button {
    color:#ffffff;
    text-align:center;
    font-size:22px;
    font-weight:550;
    text-shadow:0px 2px 2px #668686;
    height:40px;
    width:150px;
    border:1px solid #135533;
    border-radius:10px;
    padding:0px;
    margin:30px 0px 0px 160px;
    background-color:#75cb55;
}

.sti301 {
    height:250px;
    width:600px;
    border-radius:10px;
    padding:0px;
    margin:0px 0px 0px 170px;
    background-color:#c9ecff;
    overflow:hidden;
    display:none;
}
.sti301 > h4 {
    font-size:120%;
    height:24px;
    width:200px;
    padding:0px;
    margin:15px 0px 0px 60px;
}
.sti301 > p {
    height:48px;
    width:550px;
    padding:0px;
    margin:15px 0px 0px 60px;
    display:block;
}
.sti301 > p > span {
    font-size:14px;
}
.sti302 {
    height:25px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti302 > P {
    color:#f63949;
    font-weight:750;
    text-decoration:underline;
    height:25px;
    width:500px;
    padding:0px;
    margin:0px;
    display:none;
}
.sti301 > input {
    font-size:22px;
    height:30px;
    width:300px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti301 > button {
    color:#ffffff;
    text-align:center;
    font-size:22px;
    font-weight:550;
    text-shadow:0px 2px 2px #668686;
    height:40px;
    width:150px;
    border:1px solid #135533;
    border-radius:10px;
    padding:0px;
    margin:30px 0px 0px 160px;
    background-color:#75cb55;
}

.sti401 {
    height:250px;
    width:600px;
    border-radius:10px;
    padding:0px;
    margin:0px 0px 0px 170px;
    background-color:#c9ecff;
    overflow:hidden;
    display:none;
}
.sti401 > h4 {
    font-size:120%;
    height:24px;
    width:200px;
    padding:0px;
    margin:15px 0px 0px 60px;
}
.sti401 > p {
    height:48px;
    width:550px;
    padding:0px;
    margin:15px 0px 0px 60px;
    display:block;
}
.sti401 > p > span {
    font-size:14px;
}
.sti402 {
    height:25px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti402 > P {
    color:#f63949;
    font-weight:750;
    text-decoration:underline;
    height:25px;
    width:500px;
    padding:0px;
    margin:0px;
    display:none;
}
.sti401 > input {
    font-size:22px;
    height:30px;
    width:300px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti401 > button {
    color:#ffffff;
    text-align:center;
    font-size:22px;
    font-weight:550;
    text-shadow:0px 2px 2px #668686;
    height:40px;
    width:150px;
    border:1px solid #135533;
    border-radius:10px;
    padding:0px;
    margin:30px 0px 0px 160px;
    background-color:#75cb55;
}

.sti501 {
    height:250px;
    width:600px;
    border-radius:10px;
    padding:0px;
    margin:0px 0px 0px 170px;
    background-color:#c9ecff;
    overflow:hidden;
    display:none;
}
.sti501 > h4 {
    font-size:120%;
    height:24px;
    width:200px;
    padding:0px;
    margin:15px 0px 0px 60px;
}
.sti501 > p {
    height:48px;
    width:550px;
    padding:0px;
    margin:15px 0px 0px 60px;
    display:block;
}
/*
.sti501 > p > span {
    font-size:14px;
}
*/
.sti502 {
    height:25px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti502 > P {
    color:#f63949;
    font-weight:750;
    text-decoration:underline;
    height:25px;
    width:500px;
    padding:0px;
    margin:0px;
    display:none;
}
.sti501 > input {
    font-size:22px;
    height:30px;
    width:300px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti501 > button {
    color:#ffffff;
    text-align:center;
    font-size:22px;
    font-weight:550;
    text-shadow:0px 2px 2px #668686;
    height:40px;
    width:150px;
    border:1px solid #135533;
    border-radius:10px;
    padding:0px;
    margin:30px 0px 0px 160px;
    background-color:#75cb55;
}


.sti601 {
    height:250px;
    width:600px;
    border-radius:10px;
    padding:0px;
    margin:0px 0px 0px 170px;
    background-color:#c9ecff;
    overflow:hidden;
    display:none;
}
.sti601 > h4 {
    font-size:120%;
    height:24px;
    width:500px;
    padding:0px;
    margin:30px 0px 0px 60px;
}
.sti602 {
    height:25px;
    width:500px;
    padding:0px;
    margin:0px 0px 0px 60px;
}
.sti601 > button {
    color:#ffffff;
    text-align:center;
    font-size:22px;
    font-weight:550;
    text-shadow:0px 2px 2px #668686;
    height:40px;
    width:150px;
    border:1px solid #135533;
    border-radius:10px;
    padding:0px;
    margin:60px 0px 0px 160px;
    background-color:#359bd5;
}