@charset "UTF-8";
/* ---------------------------------------------------------------------------
Fonts
----------------------------------------------------------------------------- */
@font-face {
font-family: 'wbf';
src: url('../CSS/font/roboto-light.woff2') format('woff2'),
url('../css/font/roboto-light.woff') format('woff');
font-weight: normal;
font-style: normal;
font-variant-ligatures:none;
}
/* ---------------------------------------------------------------------------
Background
----------------------------------------------------------------------------- */
body { background:url(../images/bg.jpg) repeat; }
/* ---------------------------------------------------------------------------
page-top
----------------------------------------------------------------------------- */
div.page_top { width:40px; height:40px; margin:0 0 0 0; padding:0 0 0 0; position:fixed; bottom:50px; right:100px; overflow:hidden; z-index:90; }
div.page_top img { width:100%; height:100%; }
/* ------------------------------------------------------
page-top Media Query
-------------------------------------------------------- */
@media screen and (min-width:300px) and (max-width:1100px) {
div.page_top { width:40px; height:40px; margin:0 0 0 0; padding:0 0 0 0; position:fixed; bottom:20px; right:5%; overflow:hidden; z-index:90; }
}
/* --------------------------------------------------------------------------
Loading
---------------------------------------------------------------------------- */
div.loading { width:100%; height:100%; margin:0; padding:0; position: fixed; top:0; left:0; z-index:99; }
div.loading p.loadmes { width:100%; margin:0; padding:0; color:#000000; font-size: 120%; font-family: bonv; text-align: center;}
/* --------------------------------------------------------------------------
BreadCrumb
---------------------------------------------------------------------------- */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:10px; right:10px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:5px 10px 5px 10px; font-size: 100%; color:#ffffff; background-color: #81c2f7; border-radius: 10px; }
/* --------------------------------------------------------------------------
Color
---------------------------------------------------------------------------- */
.bg_white { background-color: #ffffff; }
.bg_blue { background-color: #5E96FF; }
.bg_pink { background-color: #FF5FF4; }
.bg_orange { background-color: #FF8015; }
.bg_green { background-color: #42D6A5; }
.bg_black { background-color: #000000; }
.bg_red { background-color: #FF423A; }
.bg_parple { background-color: #CC36BB; }
.bg_redpar { background-color: #CC2182; }
.bg_gray { background-color: #A9A9A1; }
.b_white { background-color: #ffffff; }
.b_black { background-color: #000000; }
.b_blue { background-color: #5687E5; }
.b_green { background-color: #59DBAA; }
.b_pink { background-color: #FF92F4; }
.b_brown { background-color: #8D6A45; }
.b_gray { background-color: #7A7F77; }
.white { background-color: rgba(255,255,255,0.9); }
.black { background-color: rgba(0,0,0,0.8); }
.blue { background-color: rgba(93,217,244,0.8); }
.greem { background-color: rgba(122,219,199,0.8); }
.brown { background-color: rgba(169,146,105,0.8); }
/* --------------------------------------------------------------------------
Fixed
---------------------------------------------------------------------------- */
.myfixed { width:100%; height:100%; margin:0; padding:0; position: fixed; top:0; left:0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling:touch; }
.mycent { width:100%; margin:0; padding:0; overflow: hidden; text-align: center; }
.mybtn { width:150px; margin:20px auto 0 auto; padding:10px 0 10px 0; text-align: center; color:#ffffff; cursor: pointer; }
.z99 { z-index: 99; }
.z98 { z-index: 98; }
.z97 { z-index: 97; }
.p_max { width:100%; margin:0; padding:0; text-align: center; }
.p_80 { width:100%; max-width:300px; margin:0 auto 0 auto; padding:0; text-align: center; }
.ub_solid{ border-style: solid; border-color: #000000; border-width: 0 0 1px 0; }
.damy { width:100%; height:70px; margin:0; padding:0; }
.hide { display: none; }
.load-box { width:100%; margin:0; padding:0; overflow: hidden; position: fixed; bottom:50px; left:0; }
.load-str { width:100%; margin:0; padding:0; font-size: 100%; text-align: center; color:#808680;}
/* --------------------------------------------------------------------------
Loading
---------------------------------------------------------------------------- */
/* -----丸３個が順番にバウンス-----
--------------------------------*/
.spinner { margin: 300px auto 0; width: 80px; text-align: center; }
.spinner > div { width: 18px; height: 18px; border-radius: 100%; display: inline-block;}
.spinner > div { -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0);} 40% { -webkit-transform: scale(1.0); transform: scale(1.0); }}
/* -----四角の折り紙のような------
-------------------------------- */
.sk-cube-grid { width: 40px; height: 40px; margin: 300px auto; }
.sk-cube-grid .sk-cube { width: 33%; height: 33%; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
.sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }}
@keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }
/* -----一般的な丸クルクル-------
--------------------------------- */
.sk-circle { margin: 300px auto; width: 50px; height: 50px; position: relative; }
.sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 20%; height: 20%; background-color: #63C4B4; border-radius: 100%;}
.sk-circle .sk-child:before { -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;}
.sk-circle .sk-circle2 { -webkit-transform: rotate(30deg);-ms-transform: rotate(30deg); transform: rotate(30deg); }
.sk-circle .sk-circle3 { -webkit-transform: rotate(60deg);-ms-transform: rotate(60deg); transform: rotate(60deg); }
.sk-circle .sk-circle4 { -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg); transform: rotate(90deg); }
.sk-circle .sk-circle5 { -webkit-transform: rotate(120deg);-ms-transform: rotate(120deg); transform: rotate(120deg); }
.sk-circle .sk-circle6 { -webkit-transform: rotate(150deg);-ms-transform: rotate(150deg); transform: rotate(150deg); }
.sk-circle .sk-circle7 { -webkit-transform: rotate(180deg);-ms-transform: rotate(180deg); transform: rotate(180deg); }
.sk-circle .sk-circle8 { -webkit-transform: rotate(210deg);-ms-transform: rotate(210deg); transform: rotate(210deg); }
.sk-circle .sk-circle9 { -webkit-transform: rotate(240deg);-ms-transform: rotate(240deg); transform: rotate(240deg); }
.sk-circle .sk-circle10 { -webkit-transform: rotate(270deg);-ms-transform: rotate(270deg); transform: rotate(270deg); }
.sk-circle .sk-circle11 { -webkit-transform: rotate(300deg);-ms-transform: rotate(300deg); transform: rotate(300deg); }
.sk-circle .sk-circle12 { -webkit-transform: rotate(330deg);-ms-transform: rotate(330deg); transform: rotate(330deg); }
.sk-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
.sk-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.sk-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.sk-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.sk-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.sk-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.sk-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1);}}
@keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }
/* --------四角パタパタ------------------
--------------------------------------- */
.sk-folding-cube { margin: 300px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);}
.sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #3B7AC4; }
.sk-folding-cube .sk-cube:before { -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; }
.sk-folding-cube .sk-cube:before { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg);}
.sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg);}
.sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg);}
.sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
@-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }
@keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}
/* -----バーウェーブ------
-------------------------- */
.bar_wave { margin: 300px auto; width: 60px; height: 40px; text-align: center; font-size: 10px; }
.bar_wave > div { height: 100%; width: 6px; display: inline-block; -ms-animation: sk-stretchdelay 1.2s infinite ease-in-out; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.bar_wave .rects2 { -ms-animation-delay: -1.1s; -webkit-animation-delay: -1.1s; animation-delay: -1.1s;}
.bar_wave .rects3 { -ms-animation-delay: -1.0s; -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
.bar_wave .rects4 { -ms-animation-delay: -0.9s; -webkit-animation-delay: -0.9s; animation-delay: -0.9s;}
.bar_wave .rects5 { -ms-animation-delay: -0.8s; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}
@-o-keyframes sk-stretchdelay { 0%, 40%, 100% { -o-transform: scaleY(0.4); } 20% { -o-transform: scaleY(1.0); }}
@-moz-keyframes sk-stretchdelay { 0%, 40%, 100% { -moz-transform: scaleY(0.4); } 20% { -moz-transform: scaleY(1.0); }}
@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); }}
@keyframes sk-stretchdelay { 0%, 40%, 100% { -ms-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform: scaleY(0.4);} 20% { -ms-transform: scaleY(1.0); transform: scaleY(1.0); -webkit-transform: scaleY(1.0);}}
/* -----四角--裏返り（winっぽい）------
------------------------------------ */
.spinner_sc { width: 40px; height: 40px; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; }¥
@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }}
@keyframes sk-rotateplane {
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
/* -----丸--水滴のようにドロップ------
------------------------------------ */
.spinner_dr { width: 60px; height: 60px; position: relative; margin: 300px auto; }
.double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
@-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }}
@keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0);}}
/* -----丸--あとから付いてくる------
------------------------------------ */
.loader { color: #3B7AC4; font-size: 90px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 300px auto; position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load6 1.7s infinite ease; animation: load6 1.7s infinite ease; }
@-webkit-keyframes load6 {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
5%,95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
10%,59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }}
@keyframes load6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
5%,95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
10%,59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}}
select { -webkit-appearance: button; appearance: button;}
div.popback { width:100%; height:100%; margin:0; padding:0; text-align: center; position: fixed; top:0; left:0; z-index: 99; background-color: rgba(0,0,0,0.5); display: none; }
div.popback div.popin { width:90%; margin:50px auto 0 auto; padding:40px 0 40px 0; max-width: 600px; background-color: #ffffff;}
div.popback div.popin p.ptitle { width:60%; margin:0 auto 40px auto; padding:0 0 10px 0; border-style: solid; border-color:#000000; border-width: 0 0 1px 0; color:#000000; font-size: 200%; }
div.popback div.popin p.pmesssage { width:90%; margin:0 auto 0 auto; padding:20px 0 30px 0; font-size: 130%; }
div.popback div.popin p.pline1 { width:50%; margin:30px auto 0 auto; padding:0 0 5px 0; border-style: solid; border-color: #000000; border-width: 0 0 1px 0; font-size: 120%;}
div.popback div.popin p.pline2 { width:90%; margin:30px auto 0 auto; padding:0 0 5px 0; border-style: solid; border-color: #000000; border-width: 0 0 1px 0; }
div.popback div.popin p.pline3 { width:90%; margin:30px auto 0 auto; padding:0 0 5px 0; border-style: solid; border-color: #000000; border-width: 0 0 1px 0; text-align: left; color: #FF0B16 !important; font-size: 120%;}
div.popback div.popin p.pline4 { width:90%; height:auto; max-height: 250px; margin:30px auto 0 auto; padding:0 0 5px 0; border-style: solid; border-color: #000000; border-width: 0 0 1px 0; text-align: left; font-size: 100%; overflow-x:hidden; overflow-y:auto; line-height: 1;}
div.popback div.popin p.pline5 { width:70%; margin:30px 10% 0 20%; padding:0 0 5px 0; text-align: left; }
div.popback div.popin p.pline6 { width:90%; margin:30px auto 0 auto; padding:0 0 5px 0; border-style: solid; border-color: #000000; border-width: 0 0 1px 0; text-align: left; color: #000000 !important; font-size: 120%;}
div.popback div.popin div.listbox { width:100%; margin:0 auto 0 auto; padding:0; height:auto; max-height: 500px; overflow-x: hidden; overflow-y:auto; text-align: left; }
div.popback div.popin div.listbox p.listobj { width:90%; margin:0 auto 0 auto; padding:5px 0 5px 0; white-space: nowrap; font-size: 100%; color:#000000; border-width: 0 0 1px 0; border-style: solid; border-color:#93928E; cursor: pointer; }
div.popback div.popin div.listbox p.listobj:hover { width:90%; margin:0 auto 0 auto; padding:5px 0 5px 0; white-space: nowrap; font-size: 100%; color:#000000; border-width: 0 0 1px 0; border-style: solid; border-color:#93928E; cursor: pointer; background-color: #9BE2FF; }
div.popback div.popin div.bcent { width:100%; margin:0; padding:0; overflow: hidden; }
div.popback div.popin div.bcent p.pbtn1 { width:30%; margin:10px 5% 0 15%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn2 { width:30%; margin:10px 15% 0 5%; padding:10px 0 10px 0; border:solid 2px #FF6E06; color:#FF6E06; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn3 { width:30%; margin:10px 35% 0 35%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn4 { width:30%; margin:10px 15% 0 5%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn5 { width:30%; margin:10px 5% 0 15%; padding:10px 0 10px 0; border:solid 2px #FF6E06; color:#FF6E06; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn6 { width:30%; margin:10px 35% 0 35%; padding:10px 0 10px 0; border:solid 2px #FF58F2; color:#FF58F2; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn1:hover { width:30%; margin:10px 5% 0 15%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#ffffff; background-color: #2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn2:hover { width:30%; margin:10px 15% 0 5%; padding:10px 0 10px 0; border:solid 2px #FF6E06; color:#ffffff; background-color: #FF6E06; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn3:hover { width:30%; margin:10px 35% 0 35%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#ffffff; background-color: #2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn4:hover { width:30%; margin:10px 15% 0 5%; padding:10px 0 10px 0; border:solid 2px #2F98C0; color:#ffffff; background-color: #2F98C0; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn5:hover { width:30%; margin:10px 5% 0 15%; padding:10px 0 10px 0; border:solid 2px #FF2C29; color:#ffffff; background-color: #FF2C29; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent p.pbtn6:hover { width:30%; margin:10px 35% 0 35%; padding:10px 0 10px 0; border:solid 2px #FF58F2; color:#ffffff; background-color: #FF58F2; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent input.b-type { width:50%; margin:0 25% 0 25%; padding:10px 0 10px 0; font-size: 120%; border:none ; background-color: #D8DBDB; }
div.popback div.popin div.bcent label { width:20%; margin:0 0 0 10%; padding:10px 0 10px 0; float:left; font-size: 120%; color:#A1A3A3; text-align:right; }
div.popback div.popin div.bcent input.c-type { width:48%; margin:0 15% 0 5%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000;}
div.popback div.popin div.bcent select.a-type { width:38%; margin:0 25% 0 3%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin div.bcent select.a-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin div.bcent input.g-type { width:8%; margin:0 55% 0 5%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000;}
div.popback div.popin p.pline1 select.e-type { width:30%; margin:0 1% 0 9%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin p.pline1 select.e-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin p.pline1 select.er-type { width:30%; margin:0 1% 0 1%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin p.pline1 select.er-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin p.pline1 select.f-type { width:30%; margin:0 9% 0 1%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin p.pline1 select.f-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin p.pline1 select.g-type { width:50%; margin:0 2px 0 5%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin p.pline1 select.g-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin p.pline1 select.i-type { width:90%; margin:0 0 0 5%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
div.popback div.popin p.pline1 select.i-type { background-image:url(../images/sys-img/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}
div.popback div.popin p.pline1 input.h-type { width:50%; margin:0 2px 0 5%; padding:10px 0 10px 2%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000;}
div.popback div.popin div.bcent textarea.d-type { width:58%; height:100px; margin:0 5% 0 5%; padding:10px 1% 10px 1%; font-size: 120%; border:none ; background-color: #D8DBDB; color:#000000;}
div.popback div.popin div.bcent input.subtype { width:30%; margin:10px 15% 0 5%; padding:13px 0 12px 0; border:solid 2px #FF6E06; color:#FF6E06; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent input.subtype { background-color:#ffffff; background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); -webkit-appearance:none; border-radius: 0;}
div.popback div.popin div.bcent input.subtype:hover { width:30%; margin:10px 15% 0 5%; padding:13px 0 12px 0; border:solid 2px #FF6E06; color:#ffffff; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent input.subtype:hover { background-color:#FF6E06; background:-webkit-gradient(linear, left top, left bottom, from(#FF6E06), to(#FF6E06)); -webkit-appearance:none; border-radius: 0;}
div.popback div.popin div.bcent input.logtype { width:30%; margin:50px 35% 0 35%; padding:13px 0 12px 0; border:solid 2px #FF6E06; color:#FF6E06; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent input.logtype { background-color:#ffffff; background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); -webkit-appearance:none; border-radius: 0;}
div.popback div.popin div.bcent input.logtype:hover { width:30%; margin:50px 35% 0 35%; padding:13px 0 12px 0; border:solid 2px #FF6E06; color:#ffffff; font-size: 120%; float:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
div.popback div.popin div.bcent input.logtype:hover { background-color:#FF6E06; background:-webkit-gradient(linear, left top, left bottom, from(#FF6E06), to(#FF6E06)); -webkit-appearance:none; border-radius: 0;}
div.popback div.popin div.bcent div.opbox { width:95%; margin:0 0 0 5%; padding:0; overflow: hidden; }
div.popback div.popin div.bcent div.opbox p.opt { width:33%; margin:0; padding:0; float:left; text-align: left; }
div.popback div.popin div.bcent div.opbox p.opt span.ng { color:#A1A59A; }
div.popback div.popin p.yoyaku { width:80%; margin:5px auto 0 auto; padding:5px 0 5px 0; text-align: left; background-color: #50A1D5; color:#ffffff; cursor: pointer; }
div.popback div.popin p.yoyaku:hover { width:80%; margin:5px auto 0 auto; padding:5px 0 5px 0; text-align: left; background-color: #FF8923; color:#ffffff; cursor: pointer; }
input.pin { width:80%; max-width: 300px; margin:0 auto 0 auto; padding:10px 0 10px 0; background-color: #999696; color:#ffffff; text-align: center; font-size:120%; border:none; letter-spacing: 3px; }
input.pingo { width:100px; margin:10px auto 0 auto; padding:10px 0 10px 0; color:#ffffff; text-align: center; font-size: 110%; border:none; -webkit-appearance:none; }
input.pingo { background-color:#407DFF; background:-webkit-gradient(linear, left top, left bottom, from(#407DFF), to(#407DFF)); cursor: pointer; }
p.er { width:80%; margin:0 auto -20px auto; padding:5px 0 5px 0; background-color: #FF211E; color:#ffffff; font-size: 90%; }
span.ngdel { display: inline-block; margin:0; padding:2px 8px 2px 8px; background-color: #3481FF; color:#ffffff; font-size: 90%; border-style: solid; border-color:#ffffff; border-width: 0 0 1px 0; cursor: pointer; }
/* ----------------------------------------------------------------------------
Check Box
---------------------------------------------------------------------------- */
input.checkshop { display: none; }
input.checkshop:checked + label.checkshop:before { opacity: 1; }
label.checkshop { box-sizing: border-box; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; }
label.checkshop { margin: 10px 20px 8px 0; padding: 12px 12px 12px 42px; vertical-align: middle; cursor: pointer; }
label.checkshop { position: relative; display: inline-block; border-radius: 0; background-color: #FAD5FF; }
label.checkshop:hover { background-color: #e2edd7; }
label.checkshop:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 15px; }
label.checkshop:after { display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #bbb; border-radius: 0; content: ''; }
label.checkshop:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 21px; display: block;}
label.checkshop:before { content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
label.checkshop:before { margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #53b300; border-bottom: 3px solid #53b300; }
label.checkshop:hover:after { border-color: #53b300; }
/* ------------------------------------------------------
300 - 350 （iphone 4）
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:350px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 200px auto 0; }
div.popback div.popin p.pline6 { font-size: 100%; }
/* breadcrumb */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:5px; right:5px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:2px 5px 2px 5px; font-size: 90%; color:#ffffff; background-color: #81c2f7; border-radius: 5px; letter-spacing: 0.5px; }
/* ------------------------------------------------------
300 - 350 （iphone 5）
-------------------------------------------------------- */
@media screen and (max-width : 350px) and (max-height : 568px) {
}
}
/* ------------------------------------------------------
350 - 400 ( android）（iphone6-375）
-------------------------------------------------------- */
@media screen and (min-width: 351px ) and (max-width:400px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 250px auto 0; }
div.popback div.popin p.pline6 { font-size: 100%; }
/* breadcrumb */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:5px; right:5px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:2px 5px 2px 5px; font-size: 90%; color:#ffffff; background-color: #81c2f7; border-radius: 5px; letter-spacing: 0.5px; }
}
/* ------------------------------------------------------
400 - 450（iphone6plus 414）
-------------------------------------------------------- */
@media screen and (min-width: 401px) and (max-width:450px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 250px auto 0; }
/* breadcrumb */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:5px; right:5px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:2px 5px 2px 5px; font-size: 90%; color:#ffffff; background-color: #81c2f7; border-radius: 5px; letter-spacing: 0.5px; }
}
/* ------------------------------------------------------
450 - 500（iphone4 横）
-------------------------------------------------------- */
@media screen and (min-width: 451px) and (max-width:500px) {
/* breadcrumb */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:5px; right:5px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:2px 5px 2px 5px; font-size: 90%; color:#ffffff; background-color: #81c2f7; border-radius: 5px; letter-spacing: 0.5px; }
/* ------------------------------------------------------
450 - 500（pc）
-------------------------------------------------------- */
@media screen and (max-width : 500px) and (min-height : 480px) {
}
}
/* ------------------------------------------------------
500 - 550 （ xperia z ultra）
-------------------------------------------------------- */
@media screen and (min-width: 501px) and (max-width:550px){
/* breadcrumb */
div.breadcrumb { width:100%; margin:0; padding:0; position: absolute; top:5px; right:5px; text-align: right;}
div.breadcrumb span.bread { margin:0; padding:2px 5px 2px 5px; font-size: 90%; color:#ffffff; background-color: #81c2f7; border-radius: 5px; letter-spacing: 0.5px; }
}
/* ------------------------------------------------------
550 - 600（iphone5 横）
-------------------------------------------------------- */
@media screen and (min-width: 551px) and (max-width:600px){
/* ------------------------------------------------------
550 - 600（pc）
-------------------------------------------------------- */
@media screen and (max-width : 600px) and (min-height : 350px) {
}
}
/* ------------------------------------------------------
600 - 650（android 横）
-------------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width:650px){
/* ------------------------------------------------------
600 - 650（pc）
-------------------------------------------------------- */
@media screen and (max-width: 650px) and (min-height:420px){
}
}
/* ------------------------------------------------------
650 - 700（iphone6横=667）
-------------------------------------------------------- */
@media screen and (min-width: 651px) and (max-width:700px){
/* ------------------------------------------------------
650 - 700（pc）
-------------------------------------------------------- */
@media screen and (max-width: 700px) and (min-height:450px){
}
}
/* ------------------------------------------------------
700 - 750（iphone6plus横=736）
-------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width:750px){
/* ------------------------------------------------------
700 - 750（pc）
-------------------------------------------------------- */
@media screen and (max-width: 750px) and (min-height:450px){
}
}
/* ------------------------------------------------------
750 - 800（ ipad ）
-------------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width:800px){
}
/* ------------------------------------------------------
800 - 850
-------------------------------------------------------- */
@media screen and (min-width: 801px) and (max-width:850px) {
}
/* ------------------------------------------------------
850 - 900
-------------------------------------------------------- */
@media screen and (min-width: 851px) and (max-width:900px) {
}
/* ------------------------------------------------------
900 - 1000 （xperia z ultra 横）
-------------------------------------------------------- */
@media screen and (min-width: 901px) and (max-width:1000px) {
/* ------------------------------------------------------
900 - 1000（pc）
-------------------------------------------------------- */
@media screen and (max-width : 1000px) and (min-height : 600px) {
}
}
/* ------------------------------------------------------
1000 - 1100（ipad 横）
-------------------------------------------------------- */
@media screen and (min-width: 1001px) and (max-width:1100px){
/* ------------------------------------------------------
1000 - 1100（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1100px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1100 - 1200
-------------------------------------------------------- */
@media screen and (min-width: 1101px) and (max-width:1200px){
/* ------------------------------------------------------
1100 - 1200（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1200px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1200 - 1300
-------------------------------------------------------- */
@media screen and (min-width: 1201px)and (max-width:1300px) {
/* ------------------------------------------------------
1200 - 1300（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1300px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1300 - 1400
-------------------------------------------------------- */
@media screen and (min-width: 1301px) and (max-width:1400px) {
/* ------------------------------------------------------
1300 - 1400（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1400px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1400 - 1500
-------------------------------------------------------- */
@media screen and (min-width: 1401px) and (max-width:1500px) {
/* ------------------------------------------------------
1400 - 1500（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1500px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1500 - 1600
-------------------------------------------------------- */
@media screen and (min-width: 1501px) and (max-width:1600px) {
/* ------------------------------------------------------
1500 - 1600（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1600px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1600 - 1700
-------------------------------------------------------- */
@media screen and (min-width: 1601px) and (max-width:1700px) {
/* ------------------------------------------------------
1600 - 1700（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1700px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1700 - 1800
-------------------------------------------------------- */
@media screen and (min-width: 1701px)and (max-width:1800px) {
/* ------------------------------------------------------
1700 - 1800（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1800px) and (max-height : 700px) {
}
}
/* ------------------------------------------------------
1800 -
-------------------------------------------------------- */
@media screen and (min-width: 1801px) {
/* ------------------------------------------------------
1800 - 1900（ height 600まで）
-------------------------------------------------------- */
@media screen and (max-width : 1900px) and (max-height : 700px) {
}
}