@charset "UTF-8";

span.a         {cursor:pointer;color:#00f;font-weight:300;text-decoration:underline;font-size:small}
.TextareaInput {resize: none;overflow: hidden;height:100%}


.cssModalLoading   {position:fixed;display:none ;margin:0px;padding:0px;top:42%;left:49%;z-index:999;background-color:rgba(255,255,255,0  );width:120px;height:120px;transform: translate(-50%, -50%);overflow:hidden;
    background-image: url("/Images/Loading_120.svg");background-position:center;background-repeat:no-repeat;
    animation: framecssModalLoading 0.8s linear infinite;transform-origin: center center;
}
@keyframes framecssModalLoading {0%   { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

.cssOnLoading                      { width:48px;height:48px;text-align:center;animation: framecssOnLoading 0.8s linear infinite;transform-origin: center center;}
@keyframes framecssOnLoading {0%   { transform: rotate(0deg); }100% { transform: rotate(360deg); }}



/* Global navigation
------------------------------ */



@media screen and (max-width: 767px) {
    .component-global-navigation {
        height:47px;
        background: rgba(255, 255, 255,1)
    }
}
/*------------------------------ */

    .component-local-navigation ul li .navigation-button.iscurrent > span {
        color: #fff; /* Alternate for IE */
        color: var(--colorSchemeBright);
        background-color: #000; /* Alternate for IE */
        background-color: var(--colorSchemeBase);
        font-weight: bold;
    }
.component-profile .profile-headline {
    color: #000; /* Alternate for IE */
    color: var(--colorSchemeBase);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.component-profile .profile-userimage figure canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-login .signup-box {
    width: 600px;
    padding: 50px;
    background-color: #fff; /* Alternate for IE */
    background-color: var(--colorSchemeBright);
    border-width: 1px;
    border-style: solid;
    border-color: #ccc; /* Alternate for IE */
    border-color: var(--colorSchemeGray);
    border-radius: 10px;
}

@media screen and (max-width: 767px) {
    .page-login {
        background-color: #fff; /* Alternate for IE */
        background-color: var(--colorSchemeBright);
    }
    .page-login main {
        height: auto;
        padding: 0;
    }
    .page-login .signup-box {
        width: 100%;
        max-width: 400px;
        padding: 50px 30px 20px;
        background-color: transparent;
        border: none;
    }
}


/*---------------------------------------*/
.config-message .message-error {
    color: #666; /* Alternate for IE */
    color: var(--colorSchemeAttention);
    font-weight: bold;
}
modal-content .message-error {
    color: #666; /* Alternate for IE */
    color: var(--colorSchemeAttention);
    font-weight: bold;
}
/*---------------------------------------*/

.input-count .message-error {
    color: #666; /* Alternate for IE */
    color: var(--colorSchemeAttention);
    font-weight: bold;
}




/*---------------------------------*/
.modal-loading{
    display:none;
    position:fixed;
    z-index:999;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0);
}
.modal-loading2
{
    position:relative;
    width:100%;
    height:100%;
}
.loading-image{
   position: absolute;
   width: 48px;
   height: 48px;
   left: 50%;
   top: 50%; 
   margin-top: -48px;
   margin-left: -48px;
}


/*---------------------------------*/
div.component-thanksall{
    padding:20px 10px 0px 20px;
    text-align:right;

}

button.thanks {
    position: relative;
    display: inline-block;
    padding:0px 10px 0px 30px;
    border: 1px solid #cc0000;
    border: 1px solid var(--colorSchemeAttention);
    color:#666666;
    border-radius: 100vh;
    overflow: visible;
    color: #cc0000;
    color: var(--colorSchemeAttention);
    cursor: pointer;
    background-color:#fff; /* Alternate for IE */
    background-color:var(--colorSchemeBright);
}
button.thanks svg{
    position: absolute;
    display:inline-block;
    width:14px;
    height:14px;
    top:  5px;
    left:10px;
    transition: transform .15s;
}
button.thanks svg.thanksAt{
    z-index:2;
    fill: var(--colorSchemeAttention);
}
button.thanks svg.thanksBack{
    z-index:1;
    fill: var(--colorSchemeGray) !important;
}


button.thanks.thanks-sent {
    color:#cccccc;
    color: var(--colorSchemeGray);
    cursor: default;
    animation: keyframesThanksClick 1.5s;
    animation-fill-mode:forwards;
}

button.thanks.thanks-alreadysent {
    color:#cccccc;
    color: var(--colorSchemeGray);
    cursor: default;
    border-color:rgba(255,255,255,0);
}

.thanks.thanks-sent svg.thanks-sent-svg{
    fill: var(--colorSchemeAttention);
    animation: keyframesThankssent 1.5s linear;
    animation-fill-mode:forwards;
}


@keyframes keyframesThanksClick {
  0%   { padding-right: 30px; }
  40%  { padding-right: 6px; }
  50%  { padding-left: 30px; }
  100% { padding-left: 30px;color:#cccccc;border-color:rgba(147,147,147,0);background-color:rgba(255,255,255,0); }
}
@keyframes keyframesFavoClick {
  0%   { top:12px; }
  10%  { top: 0px; }
  20%  { top: 5px; }
  30%  { top: 0px; }
  40%  { top: 2px; }
  50%  { top: 0px; }
  100% { padding-top: 0px;color:#cccccc;border-color:rgba(147,147,147,0);background-color:rgba(255,255,255,0); }
}
@keyframes keyframesThankssent {
    0% {transform:rotate( 10deg);top:   3px;left: 10px; }
    2% {transform:rotate( 10deg);top:  13px;left: 10px; }
   10% {transform:rotate(-20deg);top:   0px;left: 50px; }  
   20% {transform:rotate( 10deg);top: -40px;left:120px;opacity: 1; }
   50% {transform:rotate( 60deg);top:-200px;left:250px;opacity: 0; }
  100% {transform:rotate( 60deg);top:   0px;left:  0px;opacity: 0; }
}



@keyframes keyframesFavossent {
    0% {transform:rotateY(  0deg);top:  -5px;  }
   10% {transform:rotateY(180deg);top:  -10px; }
   20% {transform:rotateY(360deg);}  
   30% {transform:rotateY(540deg);top:   0px;opacity: 0.5; }
   50% {transform:rotateY(720deg);top:-40px;left:10px;opacity: 0; }
   80% {opacity: 0; }
  100% {opacity: 1; fill:var(--colorSchemeGray); }
}


.IconShake1{
/*  animation:3s linear infinite keyflameIconShake1;*/
}
.IconShake2{
/*  animation:3s linear infinite keyflameIconShake2;*/
}
.IconShake3{
/*  animation:3s linear infinite keyflameIconShake3;*/
}
.IconShake4{
/*  animation:3s linear infinite keyflameIconShake4;
	transform-origin:center bottom*/
}
@keyframes keyflameIconShake1{
    0%{ transform:rotate( 0deg);}
   40%{ transform:rotate(10deg); }
   90%{ transform:rotate(-2.5deg); }
  100%{ transform:rotate( 0deg); }
}
@keyframes keyflameIconShake2{
   0%{ transform:rotate(0);}
  30%{ transform:rotate( 0deg); }
  50%{ transform:rotate( 40deg); }
  90%{ transform:rotate( 40deg); }
  92%{ transform:rotate(-30deg); }
  94%{ transform:rotate( 5deg); }
  96%{ transform:rotate(-3deg); }
  98%{ transform:rotate( 5deg); }
 100%{ transform:rotate(  0deg); }
}
@keyframes keyflameIconShake3{
   0%{ transform:rotate(0);}
  30%{ transform:rotate(  0deg); }
  60%{ transform:rotate( 40deg); }
  80%{ transform:rotate( 40deg); }
  90%{ transform:rotate(720deg); }
 100%{ transform:rotate(720deg); }
}

@keyframes keyflameIconShake4 {
	 0%  {transform: scale(1, 0.95) skew( 0deg) rotate(0deg);}
	25%  {transform: scale(1, 1.01) skew( 0deg) rotate(-10deg);}
	50%  {transform: scale(1, 0.95) skew( 0deg) rotate( 0deg);}
	75%  {transform: scale(1, 1.01) skew( 0deg) rotate(10deg);}
	100% {transform: scale(1, 0.95) skew( 0deg) rotate(0deg);}
}
/*---------------------------------*/
/*Guide CSSs*/
.modal-guidance {
    position:absolute;
    display:none;
    width: 560px;
    margin:0px 20px 0px 0px;
    padding:10px 10px;
    background-color: #fff; /* Alternate for IE */
    background-color: var(--colorSchemeBright);
    border-radius: 10px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);

    z-index: 1002;
    background-color:#fff;
    /*background-color:#ebfaec;*/
    border:1px solid #008000;
}

.modal-guidance .guidance-content
{
    display:flex
}

.modal-guidance .guidance-content .guidance-icon
{
    width:80px;
    height:80px;
}
.modal-guidance .guidance-content .guidance-icon img
{
    border:3px solid #fff;
    border-radius:50%;
    width:100%;
    height:100%;
}
.modal-guidance .guidance-content .guidance-message
{
    flex:1;
    padding:10px 0px 0px 10px;
    max-height:300px;
    overflow:hidden;
    border:0px solid #00f;
}
.modal-guidance .guidance-button
{
    display:none;
    margin-top:10px;
    border:0px solid #00f;
}
.modal-guidance .guidance-close
{
    position:absolute;
    top:-10px;
    right:-10px;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
}
.modal-guidance .guidance-close img
{
    width:100%;
    height:100%;
}
@media screen and (max-width: 767px) {

    .modal-guidance {
        width: 100%;
        padding: 10px 10px;
    }
    .modal-guidance .guidance-content
    {
        display:block;
    }
    .modal-guidance .guidance-content .guidance-icon
    {
        width: 50px;
        height: 50px;
    }

    .modal-guidance .guidance-close
    {
        top:0px;
        right:0px;
        width:30px;
        height:30px;
    }
}

@media screen and (max-width: 374px) {
    .modal-guidance .guidance-content .guidance-icon
    {
        width: 45px;
        height: 45px;
    }
}

.GuidanceBack {
    position:absolute;
    display:none;
    top:0;
    height:0;
    width:100%;
    height:100%;
    z-index:1000;
}
.GuidanceShadow {
    position:absolute;
    display:none;
    z-index:1001;

    border-radius:10px;
    background-color:rgba(255,255,255,0);
    box-shadow:0 0 0 3000px rgba(144,144,144,0.5);
}
.GuidanceShadow.spot.GuideShadowClickable{cursor:pointer;}
.GuidanceShadow.spot{animation: keyframesBlink 1000ms infinite;}

@keyframes keyframesBlink{ 
  0%   { border:3px solid rgba(255,241,0, 0);}
  100% { border:3px solid rgba(255,241,0, 1);}
}



/* Loader
---------------------------------------
最低heightは、120px;
*/

.loder-parent {
	position: relative;
	display:block;
	width:100%;
	height:100%;
	border:0px solid #cccccc;
}
.loder-parent>.loader-message{
	position: absolute;
	top: calc(50% + 32px);
	left: calc(50% - 50px);
    /*width:150px;*/
    color:#4d4d4d;
}
.loder-parent>.loader1 {
	position: absolute;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	width: 64px;
	height: 64px;
	border:1px solid #fff;
	border-radius: 50%;
	perspective: 800px;
	background-image: radial-gradient(circle farthest-corner at center, #018D5E 0%, #fff  50%);
}

.loder-parent>.loader1>.loader1-inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.loder-parent>.loader1>.loader1-inner.one {
  left: 0%;
  top: 0%;
  animation: animation-loader1-inner1 1s linear infinite;
  border-bottom: 3px solid #018D5E;
}

.loder-parent>.loader1>.loader1-inner.two {
  right: 0%;
  top: 0%;
  animation: animation-loader1-inner2 1s linear infinite;
  border-right: 3px solid #018D5E;
}

.loder-parent>.loader1>.loader1-inner.three {
  right: 0%;
  bottom: 0%;
  animation: animation-loader1-inner3 1s linear infinite;
  border-top: 3px solid #018D5E;
}

@keyframes animation-loader1-inner1 {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes animation-loader1-inner2 {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes animation-loader1-inner3 {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}