@charset "utf-8";

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

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

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

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

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

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

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

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

.webC026 {
    height:300px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
    position:relative;
    /*overflow:hidden;*/
}

.webC027 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px;
    position:relative;
    clear:both;
    /*overflow:hidden;*/
}

.webC028 {
    height:250px;
    width:1000px;
    border:1px solid #999999;
    padding:0px;
    margin:30px 0px 500px;
    position:relative;
}


/*-------------------------------------------------------------------------------------*/
/*---------------個別CSS---------------------------------------------------------------*/

/*-------------------019ダイアログ（アラート）------------------*/

.diaa001 {
    height:50px;
    width:150px;
    border-radius:50px;
    border:solid 1px #bf2f80;
    padding:0px;
    margin:50px 0px 0px 300px;
    background-color:#ff7fa0;
    box-shadow:0px 4px 3px #c953c5;
}
.diaa001:hover {
    border:solid 1px #ff85ca;
}
.diaa001 > p {
    font-size:22px;
    color:#ffffff;
    text-shadow:0px 2px 2px #dc2cad;
    padding:0px;
    margin:5px 0px 0px 50px;
}

/*---------------020ダイアログ（コンファーム）-------------------------------*/

.diac001 {
    height:50px;
    width:150px;
    border-radius:50px;
    border:solid 1px #4e7897;
    padding:0px;
    margin:50px 0px 0px 300px;
    background-color:#5e98f7;
    box-shadow:0px 4px 3px #4e78cc;
}
.diac001:hover {
    border:solid 1px #77ccff;
}
.diac001 > p {
    font-size:22px;
    color:#ffffff;
    text-shadow:0px 2px 2px #3e78c7;
    padding:0px;
    margin:7px 0px 0px 30px;
}

/*--------------021ダイアログ（プロンプト）----------------------*/
.webC021 p {
    font-size:18px;
}
.diap002 {
    height:30px;
    width:600px;
    padding:0px;
    margin:0px 0px 0px 200px;

}
.diap003 {
    height:50px;
    width:150px;
    border-radius:50px;
    border:solid 1px #eba191;
    padding:0px;
    margin:30px 0px 20px 350px;
    background-color:fbd1b2;
}
.diap003:hover {
    border:solid 1px #fbd891;
}

.diap003 > p {
    color:#3e1a88;
    padding:0px;
    margin:10px 0px 0px 20px;
}
.diap004 {
    height:100px;
    width:500px;
    padding:0px;
    margin:10px 0px 0px 200px;
    background-color:#f9f9f6;
    display:none;
}
.diap004 > p {
    text-align:center;
    padding:0px;
    margin:20px 50px 20px 0px; 
}
.diap004 span {
    font-size:24px;
    font-weight:bold;
    color:#723615;
}


/*----------------０２２モーダルウィンドウ-----------------------*/
.mod001 {
    height:100px;
    width:400px;
    padding:0px;
    margin:50px 0px 0px 300px;
    background-color:#eef9f9;
}
.mod002 {
    height:40px;
    width:160px;
    border-radius:40px;
    border:solid 2px #cc6622;
    padding:0px;
    margin:30px 0px 0px 30px;
    background-color:#ff986a;
    box-shadow:0px 3px 3px #da6411;
    float:left;
}
.mod002:hover {
    box-shadow:0px 3px 3px #9a3401;
}
.mod002 > p {
    font-size:20px;
    font-weight:500;
    color:#744242;
    padding:0px;
    margin:3px 0px 0px 20px;
}
.mod003 {
    height:40px;
    width:160px;
    border-radius:40px;
    border:solid 2px #63a4d6;
    padding:0px;
    margin:30px 0px 0px 20px;
    background-color:#93d4f6;
    box-shadow:0px 3px 3px #56aadc;
    float:left;
}
.mod003:hover {
    box-shadow:0px 3px 3px #26689c;
}
.mod003 > p {
    font-size:20px;
    font-weight:500;
    color:#466868;
    padding:0px;
    margin:3px 0px 0px 10px;
}

.mod004 {
    height:450px;
    width:400px;
    border-radius:20px;
    padding:0px;
    margin:0px 0px 0px 0px;
    background-color:#ffddee;
    overflow:hidden;
    position:fixed;
    top:150px;
    left:calc((100vw - 400px)/2);
    z-index:9;
    display:none;
    opacity:100%;
    /*transition-property:all;
    transition-timing-function:ease-out;
    transition-duration:0.1s;*/
}

.mod005 {
    font-size:26px;
    font-weight:bold;
    height:30px;
    width:200px;
    padding:0px;
    margin:25px 0px 35px 120px;
    display:block;
}
.mod006 label {
    font-size:18px;
    padding:0px;
    margin:0px 0px 0px 80px;
}
.mod006 input {
    font-size:24px;
    padding:0px;
    margin:0px 0px 0px 80px;
}
.mod006 p {
    font-size:16px;
    height:100px;
    width:350px;
    padding:0px;
    margin:0px 20px 0px 70px;
    display:block;
}

.mod801 {
    font-size:20px;
    height:40px;
    width:120px;
    border-radius:40px;
    border:solid 2px #cc6622;
    padding:0px;
    margin:30px 0px 0px 60px;
    background-color:#ffa84a;
    box-shadow:0px 3px 3px #ca6411;
}
.mod802 {
    font-size:20px;
    height:40px;
    width:120px;
    border-radius:40px;
    border:solid 2px #60b6b6;
    padding:0px;
    margin:30px 0px 0px 30px;
    background-color:#90e6e6;
    box-shadow:0px 3px 3px #50bcbc;
}

.mod101 {
    height:2px;
    width:100vw;
    padding:0px;
    margin:calc(50vw - 52vw);
    background-color:#221144;
    opacity:0%;
    position:fixed;
    display:none;
    z-index:6;
    transition-property:all;
    transition-timing-function:ease-in;
    transition-duration:0.3s;
}


/*------------------------------------------------------------------------------*/
/*-------------------023ポップアップ(下から)--------------------------------------*/
.popu001 {
    height:100px;
    width:300px;
    padding:0px;
    margin:50px 0px 0px 300px;
    background-image:linear-gradient(180deg,#f6f7d4,#f8b895);
    position:relative;
    z-index:1;
}
.popu001 > p {
    font-size:56px;
    font-weight:bold;
    color:#ffffff;
    text-shadow:-2px -3px 3px #566663;
    transform:rotate(195deg);
    position:absolute;
    top:-30px;
    left:200px;
}
.popu001 > p:hover {
    top:-32px;
    text-shadow:-2px -3px 3px #363643;
}
.popu002 {
    height:15px;
    width:22px;
    border-radius:20px;
    border:solid 2px #c8dadf;
    padding:0px;
    margin:0px;
    background-color:#e8faff;
    box-shadow:0px 2px 2px #99aacc;
    position:absolute;
    top:800px;
    left:350px;
    display:none;
    opacity:0%;
    z-index:3;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.25s;
}
.popu002 p {
    font-size:16px;
    padding:0px;
    margin:20px 0px 5px 25px;
}

.popu003 {
    font-size:16px;
    height:30px;
    width:100px;
    border-radius:10px;
    border:solid 2px #a8caff;
    padding:0px;
    margin:10px 0px 0px 20px;
    background-color:#c8eaff;
    box-shadow:0px 2px 2px #aabbcc;
}
.popu004 {
    font-size:16px;
    height:30px;
    width:180px;
    border-radius:10px;
    border:solid 2px #a8caff;
    padding:0px;
    margin:10px 0px 0px 20px;
    background-color:#c8eaff;
    box-shadow:0px 2px 2px #aabbcc;
}
.popu003:hover {
    background-color:#b8caff;
    border:solid 2px #889aff;
    box-shadow:0px 2px 2px #8a9bac;
}
.popu004:hover {
    background-color:#b8caff;
    border:solid 2px #889aff;
    box-shadow:0px 2px 2px #8a9bac;
}

/*-------------------------------------------------------------------*/
/*------------------------024ポップアップ(中心から)--------------------*/

.popc001 {
    height:100px;
    width:300px;
    padding:0px;
    margin:50px 0px 0px 300px;
    background-image:linear-gradient(180deg,#dffcd2,#85e2be);
    position:relative;
    z-index:1;
}
.popc001 > p {
    font-size:56px;
    font-weight:bold;
    color:#ffffff;
    text-shadow:-2px -3px 3px #565673;
    transform:rotate(195deg);
    position:absolute;
    top:-30px;
    left:200px;
}
.popc001 > p:hover {
    top:-32px;
    text-shadow:-2px -3px 3px #362643;
}

.popc002 {
    height:150px;
    width:260px;
    border-radius:20px;
    border:solid 2px #b4df9d;
    padding:0px;
    margin:0px;
    background-color:#e4ffbd;
    box-shadow:0px 2px 2px #99acca;
    position:absolute;
    top:60px;
    left:330px;
    display:none;
    opacity:0%;
    z-index:6;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.2s;
}
.popc002 p {
    font-size:16px;
    padding:0px;
    margin:20px 0px 5px 25px;
}
.popc003 {
    font-size:16px;
    height:30px;
    width:160px;
    border-radius:10px;
    border:solid 2px #a8c989;
    padding:0px;
    margin:10px 0px 0px 20px;
    background-color:#c8e999;
    box-shadow:0px 2px 2px #9abbcc;
}
.popc004 {
    font-size:16px;
    height:30px;
    width:180px;
    border-radius:10px;
    border:solid 2px #a8c989;
    padding:0px;
    margin:10px 0px 0px 20px;
    background-color:#c8e999;
    box-shadow:0px 2px 2px #9abbcc;
}
.popc003:hover {
    background-color:#e8f9a3;
    border:solid 2px #88a989;
    box-shadow:0px 2px 2px #9acbca;
}
.popc004:hover {
    background-color:#e8f9a3;
    border:solid 2px #88a989;
    box-shadow:0px 2px 2px #9acbca;
}
.popc005 {
    height:15px;
    width:26px;
    border-radius:20px;
    border:solid 2px #b4df9d;
    padding:0px;
    margin:0px;
    background-color:#e4ffbd;
    box-shadow:0px 2px 2px #99acca;
    position:absolute;
    top:40px;
    left:310px;
    display:none;
    opacity:0%;
    z-index:3;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.2s;
}


/*--------------------------------------------------------------------*/
/*---------------------025ハンバーガーメニュー--------------------------*/

.ham001 {
    height:173px;
    width:298px;
    border:solid 1px #888888;
    padding:0px;
    margin:0px 0px 0px 300px;
}
.ham002 {
    height:75px;
    width:300px;
    padding:0px;
    margin:0px;
    position:relative;
}
.ham002 > p {
    font-size:22px;
    font-weight:bold;
    font-style:italic;
    color:465087;
    height:65px;
    width:228px;
    padding:0px;
    margin:10px 0px 0px 10px;
    float:left;
}
.ham002 > img {
    height:50px;
    width:50px;
    border:none;
    padding:0px;
    margin:15px 10px 0px 0px;
    float:right;
}

.ham003 {
    height:98px;
    width:300px;
    padding:0px;
    margin:0px;
    background-image:url(../images_webc001/check_003002.png);
}



.ham101 {
    /*height:530px;*/
    width:300px;
    border-radius:10px;
    padding:0px 10px 40px 0px;
    margin:0px;
    background-color:#f5e3ca;
    z-index:6;
    position:absolute;
    top:75px;
    left:300px;
    opacity:0%;
    display:none;
    z-index:6;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.2s;
}
.ham101 li {
    font-size:18px;
    font-weight:600;
    color:#323244;
    padding:2px 0px 2px 0px;
    margin:0px 0px 5px 15px;
    list-style-type:none;
}
.ham101 li:hover {
    background-color:#fff9dd;
}
.ham101 > ul >li {
    font-size:22px;
    font-weight:bold;
    text-shadow:0px 1px 0px #aaaaaa;
    border-bottom:solid 2px #765696;
    padding:5px;
    margin:20px 0px 0px 20px;
}
.ham101 >ul {
    padding:0px;
    margin:0px;
}
.ham101 > ul > li > ul {
    padding:0px;
    margin:5px 0px 0px 22px;
}
.ham101 > ul > li > span {
    font-weight:bold;
    text-shadow:-1px 0px 0px #9d99a9;
    display:block;
    transform:rotate(90deg) scale(1.0,1.75);
    float:right;
}
.ham101 > ul >li >ul >li {
    color:#424254;
    text-shadow:0px 1px 1px #bbbbdc;
    border-bottom:solid 1px #8989c9;
}
.ham101 > ul >li >ul >li:hover {
    background-color:#dffcfc;
}
.ham133 {
    padding:0px;
    margin:0px;
    background-color:#fcfcf6;
    display:none;
}
.ham143 {
    padding:0px;
    margin:0px;
    background-color:#fcfcf6;
    display:none;
}
.ham153 {
    padding:0px;
    margin:0px;
    background-color:#fcfcf6;
    display:none;
}
.ham101 > ul > li:first-child {
    border-bottom:solid 4px #561467;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:0px 0px 0px 0px;
    margin:0px -10px 0px 0px;
    background-color:#ffffff;
    overflow:hidden;
}
.ham101 > ul > li:first-child:hover {
    background-color:#e6fcff;
}
.ham161 p {
    font-size:40px;
    font-weight:bold;
    text-shadow:0px 3px 2px #28368b;
    color:#28368b;
    padding:0px;
    margin:0px 25px 0px 0px;
    float:right;
}
.ham201 {                           /*黒バック*/
    height:2px;
    width:100vw;
    padding:0px;
    margin:calc(50vw-52vw);
    background-color:#100022;
    opacity:0%;
    position:absolute;
    z-index:3;
    display:none;
    transition-property:all;
    transition-timing-function:ease-in;
    transition-duration:0.2s;
}


/*------------------------------------------------------------*/
/*-------------------026拡大表示(モーダル)----------------------*/
.zoom001 {
    font-size:14px;
    line-height:28px;
    height:150px;
    width:230px;
    border-radius:20px;
    padding:10px 30px;
    margin:-10px 0px 50px 50px;
    background-color:#e0eaf9;
    float:left;
    overflow:hidden;
    display:block;
    z-index:9;
}
.zoom002 {
    height:75px;
    width:500px;
    border-radius:10px;
    border:solid 2px #b8bae0;
    padding:0px;
    margin:-20px 0px 0px 50px;
    position:relative;
    /*top:50px;
    left:450px;*/
    background-color:#e0eaf9;
    float:left;
    overflow:hidden;
    display:none;
    z-index:6;
}
.zoom011 {
    font-size:14px;
    line-height:28px;
    height:100px;
    width:230px;
    position:absolute;
    top:60px;
    left:150px;
    transform:scale(2.0);
}
.zoom003 {
    height:95px;
    width:500px;
    border-radius:10px;
    border:solid 2px #b8bae0;
    padding:0px;
    margin:-10px 0px 0px 70px;
    position:relative;
    /*top:50px;
    left:450px;*/
    background-color:#e0eaf9;
    float:left;
    overflow:hidden;
    display:none;
    z-index:6;
}
.zoom012 {
    font-size:14px;
    line-height:28px;
    height:100px;
    width:230px;
    position:absolute;
    top:20px;
    left:150px;
    transform:scale(2.0);
}
.zoom004 {
    height:200px;
    width:600px;
    border-radius:10px;
    border:solid 2px #b8bae0;
    padding:0px;
    margin:15px 0px 0px 20px;
    position:relative;
    /*top:50px;
    left:450px;*/
    background-color:#e0eaf9;
    float:left;
    overflow:hidden;
    display:none;
    z-index:6;
}
.zoom013 {
    font-size:14px;
    line-height:28px;
    height:100px;
    width:230px;
    position:absolute;
    top:-90px;
    left:160px;
    transform:scale(2.0);
}
.zoom014 {
    height:2px;
    width:100vw;
    padding:0px;
    margin:calc(50vw - 52vw);
    background-color:#110022;
    position:absolute;
    opacity:0%;
    display:none;
    z-index:3;
}


/*------------------------------------------------------------------------*/
/*------------------027ダイアログ------------------------------------------*/
.dia001 {
    height:96px;
    width:500px;
    padding:0px;
    margin:50px 0px 0px 200px;
    background-color:#ffaacc;
    background-image:url(../images_webc001/icon_001001.png);
    background-size:48px;
    z-index:3;
    overflow:hidden;
}
.dia001 p {
    font-size:16px;
    color:#888888;
    padding:0px;
    margin:35px 0px 0px 180px;
    text-shadow:0px 1px 1px #9a9aaa;
}
.dia002 {
    height:300px;
    width:300px;
    border-radius:10px;
    border-top:solid 10px #aabbdc;
    padding:0px;
    margin:0px;
    background-color:#ddeeff;
    position:absolute;
    top:0px;
    left:300px;
    display:none;
    z-index:12
}
.dia002 > p {
    font-size:18px;
    line-height:30px;
    height:110px;
    width:245px;
    padding:0px;
    margin:20px 25px 10px 30px;
    /*background-color:#e9f9ff;*/
}
.dia003 {
    font-size:18px;
    color:#ffffff;
    height:30px;
    width:200px;
    border-radius:30px;
    border:solid 2px #199934;
    padding:0px;
    margin:30px 0px 0px 50px;
    background-color:#39b954;
    box-shadow:0px 2px 2px #69c994
}
.dia004 {
    font-size:18px;
    color:#ffffff;
    height:30px;
    width:200px;
    border-radius:30px;
    border:solid 2px #3c42b4;
    padding:0px;
    margin:30px 0px 0px 50px;
    background-color:#5c62d4;
    box-shadow:0px 2px 2px #7c82e9
}
.dia003:hover {
    background-color:#39c954;
    border:solid 2px #39b954;
    box-shadow:0px 0px 3px #105914;
}
.dia004:hover {
    background-color:#7362f4;
    border:solid 2px #7362f4;
    box-shadow:0px 0px 3px #2c1294;
}
.dia005 {
    height:2px;
    width:100vw;
    padding:0px;
    margin:calc(50vw - 52vw);
    background-color:#110022;
    opacity:0%;
    display:block;
    z-index:10;
    position:absolute;
    top:20px;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.2s;
}


/*--------------------------------------------------------------------*/
/*---------------028お知らせ-------------------------------------------*/
.osi001 {
    height:150px;
    width:400px;
    border:solid 1px #999999;
    padding:0px;
    margin:20px 0px 0px 200px;
}
.osi011 {
    list-style-position:inside;
    padding:0px;
    margin:10px 0px 0px 30px;
}
.osi011:first-child {
    margin:20px 0px 0px 30px;
}

.osi201 {
    height:2px;
    width:100vw;
    padding:0px;
    margin:calc(50vw-52vw);
    background-color:#110022;
    position:absolute;
    top:0px;
    opacity:0%;
    display:none;
    z-index:6;
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:0.2s;
}
.osi301 {
    height:250px;
    width:400px;
    border-radius:10px;
    padding:0px;
    margin:0px;
    background-color:#f6f9ff;
    position:absolute;
    top:100px;
    left:200px;
    z-index:9;
    display:none;
}
.osi301 button {
    height:30px;
    width:100px;
    border-radius:6px;
    border:solid 2px #cccccc;
    padding:0px;
    margin:60px 0px 0px 160px;
    background-color:#eeeeee;
    box-shadow:0px 3px 2px #dedeee;
}
.osi301 button:hover {
    background-color:#f6f9f9;
    border:solid 2px #8a8a8a;
    box-shadow:0px 3px 2px #cecede;
}
.osi301 > p {
    white-space:pre-wrap;                   /*javascriptで「\n」で改行してくれないとき*/
    height:100px;
    width:400px;
    padding:0px;
    margin:30px 40px 0px 80px; 
}