@charset "utf-8";

/* フォントファイル（.ttf）を読み込む */
@font-face {
  font-family: 'ほのか丸ゴシック';
  src: url('fonts/font_1_honokamarugo_1.1.ttf') format('truetype');
}

/*=================================
全体的なスタイル
==================================*/
*{
    box-shadow: none;
    text-shadow: none;
}

.ui-page {
    background-color: #91d2ef;
    font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
    
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    text-shadow: none;
    font-weight: normal;
}

input {
    -webkit-appearance: none;
    border-radius: 0;
}

h2 {
    font-size: 130%;
}

.header{
    position: relative;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: #22bfe5;
    color: #e3e3e3;
    border: none;
    z-index: 10;
}

.header h1 {
    text-align: center;
    text-shadow: none;
    font-size: 120%;
    height: 100%;
    line-height: 44px;
}

.min {
    font-size: 40%;
}

.home_btn {
    position: absolute;
    text-decoration: none;
    text-align: center;
    top: 0;
    left: 0;
    display: inline-block;
    width: 50px;
    height: 100%;
    line-height: 44px;
    padding: 0;
    margin: 0;
    border: none;
}

.header a:visited, .header a:link {
    color: #e3e3e3;
    text-shadow: none;
}

.header a:hover {
    color: #0b90f2;
}

.ui-popup-hidden { top: -99999px; left: -9999px; visibility: visible; }


/*=================================
エラーページ
==================================*/
#warning {
    background-color: #ffbebe;
}

#warning .ui-content{
    color: #ff00a7;
    text-align: center;
}

#warning h2 {
    position: relative;
    //background-color: black;
    margin-bottom: 20px;
}

#warning h2 i {
    color: yellow;
    position: relative;
    font-size: 150%;
    width: 40px;
    text-align: center;
    top: 5px;
}


#warning .header{
    background-color: #ff3636;
}

#warning #warnmes {
    display: inline-block;
}

#warning #warnmes a{
    display: block;
    margin: 20px;
}

/*=================================
index
==================================*/
#index {
    background-color: #22bfe5;
}

#svg {
    position: relative;
    margin: 0 auto;
    margin-bottom: 35%;
    display: block;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}

#svg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    
    z-index: 0;
}

#login_btn {
    background-color: #009dff;
    width: 140px;
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center;
    
    color: aliceblue;
    
    border: solid 2px;
    border-radius: 50px;
    box-sizing: border-box;
}

#login_btn:hover {
    background-color: #4be3ff;
}

#login_btn a {
    display: block;
    color: aliceblue;
    font-size: 150%;
    border-radius: 50px;
    padding: 4px;
}

#signin_btn {
    display: block;
    width: 90px;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    border: solid 2px;
    //border-radius: 50px;
    box-sizing: border-box;
    color: aliceblue;
    background-color: #7638eb;
}

#signin_btn a {
    display: block;
    
    padding: 3px;
    color: aliceblue;
    line-height: 130%
}

#login,#signin {
    padding: 5px 10px;
    background: aliceblue;
}

#signin h4 {
    text-align: center;
    font-size: 95%;
    color: red;
    
}

#signin h4+p {
    font-size: 90%;
}

#login h3,#signin h3 {
    text-align: center;
}

#index_menu p {
    display: block;
    position: absolute;
    bottom: 10%;
    font-size: 110%;
}

#mind_info {
    left: 10%;
}

#app_info {
    right: 15%;
}

/*=================================
top
==================================*/
#home .ui-content {
    padding: 0;
    margin: 0;
    
    width: 100%;
    height: 90%;
}

#topinfo {
    margin: 10px 5px;
    padding: 5px;
}

#topinfo p {
    position: relative;
    font-size: 110%;
    text-align: center;
    margin: 0;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.81);
}

#image {
    position: absolute;
    right: 25vw;
    width: 15vw;
    height: 8vh;
    margin-top: 5px;
}

#image p {
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.81);
}

#image p#image1 {
    position: absolute;
    right: 0px;
    width: 10vw;
    height: 2vh;
    padding: 0;
}

#image p#image2 {
    position: absolute;
    right: 0px;
    top: 4vh;
    width: 5vw;
    height: 1vh;
    padding: 0;
}

.char {
    position: relative;
    top: 8vh;
    right: -70%;
    width: 25vw;
    height: 25vw;
}

.char img {
    width: 100%;
    height: 100%;
}


.char {
    background: none;
        -webkit-animation: spin 10.5s linear infinite;
        -moz-animation: spin 10.5s linear infinite;
        -ms-animation: spin 10.5s linear infinite;
        -o-animation: spin 10.5s linear infinite;
        animation: spin 1.0s linear;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(360deg);}
	100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(360deg);}
	100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(360deg);}
	100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(360deg);}
	100% {-o-transform: rotate(0deg);}
}
@keyframes spin {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}


.logout_btn {
    position: absolute;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    background-color: #0b90f2;
    top: 0;
    left: 0;
    display: inline-block;
    width: 60px;
    height: 100%;
    padding-top: 4px;
    margin: 0;
    border: none;
}

.logout_btn:hover {
    background-color: #c2e5ff;
}

.config_btn {
    position: absolute;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    top: 0;
    right: 0;
    display: inline-block;
    width: 60px;
    height: 100%;
    line-height: 44px;
    margin: 0;
    border: none;
    font-size: 140%;
}

.logout_btn .rotation180 {
    /* 回転 : cos sin -sin cos : Y軸下向きが正 */
    -moz-transform:matrix(-1, 0, 0, -1, 0, 0);
    -webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
    -o-transform:matrix(-1, 0, 0, -1, 0, 0);
    transform:matrix(-1, 0, 0, -1, 0, 0);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    
    position: relative;
    left: -2px;
}

#logout {
}

#logout h3 {
    
}

#logout p {
    text-align: center
}

#logout p a {
    
}

#logout p a:first-child {
    margin-right: 20%;
}

#logout p a:nth-of-type(2) {
    
}

/*----------ボタン-------------*/
#strmenus {
    position: absolute;
    margin: 0;
    margin-top:150px;
    padding: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 35vh;
    text-align: center;
}

#strmenus .strbtn {
    position: relative;
    
    width: 80%;
    height: 10vh;
    line-height: 10vh;
    
    margin-left: 10%;
    margin-top: 4%;
    padding: 0;
    
    box-sizing: border-box;
}

#strmenus .strbtn img {
    position: relative;
    width: 20px;
    top: 2px;
}

#subbtns {
    width: 80%;
    position:relative;
    margin: 5% auto;
    letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}

#strmenus .subbtn{
    position: absolute;
    display: inline-block;
    letter-spacing: normal; /* 文字間を通常に戻す */
    margin: 0;
    padding: 0;
    width: 48%;
    height: 10vh;
    line-height: 10vh;
    box-sizing: border-box;
}

#sub1 {
    left: 0;
}

#sub2 {
    right: 0;
    -webkit-appearance: none;
    border-radius: 0;
}

#sub3 {
    right: 0;
}

/*=================================
評定
==================================*/
#afemo,#bfemo {
    position: relative;
}

#afemo .ui-content ,#bfemo .ui-content {
    margin: 0 auto;
    max-width: 800px;
}

#afemo .ui-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
}

#sl_scale {
    position: absolute;
    display: block;
    width: 70%;
    height: 40px;
    top: -20px;
    right: 5px;
}

#afemo #sl_scale {
    top: 0px;
    right: 12px
}

#sl_scale_min ,#sl_scale_max {
    position: absolute;
    font-size: 16px
}

#sl_scale_min {
    width: 130px;
}

#sl_scale_max {
    width: 100px;
    text-align: right;
    right: -2px;
}

@media all and (max-width: 430px) {
    #sl_scale {
        width: 78%;
        margin-top: 40px;
        //background-color: red;
    }
    
    #sl_scale  span {
        font-size: 95%;
    }
    
    #afemo #sl_scale {
        margin-top: 20px;
    }
    
}

@media all and (min-width: 431px) and (max-width: 447px) {
    #sl_scale {
        width: 83%;
        margin-top: 40px;
        //background-color: red;
    }
    
    #afemo #sl_scale {
        margin-top: 20px;
    }
}

@media all and (min-width: 448px) and (max-width: 700px) {
    #sl_scale {
        width: 66%;
        //background-color: blue;
    }
    
}

/*------スライダー------*/
.ui-slider {
    
}

.ui-slider-input {
    box-shadow: none;
}

.ui-slider-track {
    box-shadow: none;
}

.ui-slider-bg {
    
}

.ui-slider-handle {
    border-radius: 50%;
    box-shadow: none;
}

.ui-slider-popup {
    position: relative;
    padding: 0;
    height: 1.2em;
    width: 1.2em;
    z-index: 100;
}

/*=================================
瞑想
==================================*/
#start {
    
}

#start h2 {
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2px;
    border-radius: 5px;
    box-sizing: border-box;
}

#start h2:first-child {
    margin-top: 15px;
    border: solid 2px green;
    
    background-color: #f5ff00;
}

#start h2:nth-of-type(2) {
    margin-top: 20px;
    border: solid 2px rgb(0, 162, 68);
    color: aliceblue;
    background-color: #ff8900;
}

#start h2 img{
    position: relative;
    width: 25px;
    height: 25px;
    
    top: 4px;
    margin-right: 3px;
}

.videoPlayer+a {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    box-sizing: border-box;
}

.videoPlayer video {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}


/*=================================
出来事
==================================*/
#event .ui-content{
    padding: 0;
    margin: 0;
}

#event form {
    position: relative;
    padding: 0;
}

#event_lec textarea {
    position: relative;
    top: 0;
    
    margin: 0;
    padding: 5px;
    width: 100%;
    height: 5em;
    
    -webkit-appearance: none;
    border-radius: 0;
    
}

#lec_btn {
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    right: 5px;
    bottom: 8px;
    border-radius: 50%;
    
    background-color: #3b6ee2;
    color: aliceblue;
    border: none;
}

#lec_btn i {
    position: absolute;
    width: 35px;
    height: 35px;
    
    top: 0;
    left: 0;
    line-height: 35px;
}

#event h2 {
    margin-left: 1%;
}



/* スピンボタン（上下ボタン）を非表示 */
#event input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* 無入力時の 年/月/日 を / / にする */
#event input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
#event input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
#event input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  display: none;
}

/* /の色を変える */
#event input[type=date]::-webkit-datetime-edit-text {
    //color: #fff;
    display: none;
}

/* clearボタンの非表示 */
#event input[type=date]::-webkit-clear-button {
  -webkit-appearance: none;
}

/* カレンダーのインジケータ（▼）を非表示 */
#event input[type=date]::-webkit-calendar-picker-indicator {
  //color: transparent;
  position: relative;
}

/* fontAwesomeのカレンダーアイコンをインジケータにする */
#event input[type=date]::-webkit-calendar-picker-indicator:before {
  color: #666;
  font-family: FontAwesome;
  /*content: "\f073";*/ /* fa-calendar */
  content: "\f133"; /* fa-calendar-o */
  position: relative;
  //left: -5px; /* ここら辺はいい感じの塩梅で */
  //top: -5px;  /* ここも */
}

/*期間検索*/
#event_range {
    position: relative;
    display: block;
    width: 96%;
    margin: 2%;
    padding: 0;
    box-sizing: border-box;
}

#event_range form {
    
}

#event_range>form>span {
    position: relative;
    margin: 0;
    padding: 0;
    
    width: 110px;
    height: 44px;
    
    position: absolute;
    bottom: 0;
    left: 0;
}

#event_range span:nth-of-type(2) {
    left: 24px;
}

#event_range span span{
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    padding-top: 12px;
    padding-left: 33px;
    
    box-sizing: border-box;
}

#endday + span {
    left: 0;
}

#event_range input {
    position: absolute;
    background-color: #ffffff;
    
    width: 110px;
    height: 44px;
    margin: 0;
    padding: 0;
    top: 0px;
    border: none;
    
    line-height: 100px;
}

#event #strday {
    left: 0px;
}

#event #endday {
    left: 0px;
}

#event_range p {
    position: absolute;
    display: inline-block;
    margin: 0;
    padding: 0;
    
    height: 44px;
    width: 20px;
    line-height: 44px;
    
    top: 0;
}

#event_range button {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    left: 260px;
    box-sizing: border-box;
}

.eventlist h4{
    font-size: 110%;
    margin: 0;
    padding-left: 5px;
    border-bottom: 2px solid #b4b4b4;
    background-color: #b4b4b4;
    color: #0a0034;
    font-weight: 600;
    border-radius: 3px 3px 0 0;
}

.eventlist li{
    border: 2px solid #b4b4b4;
    background-color: floralwhite;
    border-radius: 5px;
    margin-bottom: 10px;
    list-style: none;
    font-size: 13px;
    margin: 2%;
}

.eventlist li p{
    margin: 5px;
    padding-left: 5px;
}
/*日曜の場合*/
li.sunday{
    border-color: #fa5757;
}

.sunday h4{
    background-color: #fa5757;
    border-bottom-color: #fa5757;
}
/*土曜の場合*/
li.saturday{
    border-color: #3ee7fd;
}

.saturday h4{
    background-color: #3ee7fd;
    border-bottom-color: #3ee7fd;
}

#impression{
    font-size: 16px;
}

#impression label:hover{
    color: orangered;
}

/*=================================
グラフ
==================================*/
#graph {
    padding: 0;
}

#graphcontain {
    padding: 0;
    margin: 2%;
}

#g_period{
    position: relative;
    display: inline-block;
    font-size: 0;
    margin-bottom: 5px;
}

#week_btn, #month_btn {
    background-color: #e6edf4;
    //color: #ffffff;
    
    font-size: 16px;
    font-weight: 500;
    border: none;
    margin: 0;
    padding: 10px 20px;
}


#week_btn {
    border-radius: 5px 0 0 5px;
}

#month_btn {
    border-radius: 0 5px 5px 0;
}

#g_period button:disabled {
    background-color: rgb(51, 136, 204);
    color: #f7f7f7;
    opacity: 1;
}



#graph button {
    
}

#graph .period_data {
    position: absolute;
    display: inline-block;
    font-size: 100%;
    font-weight: 600;
    color: #191272;
    height: 40px;
    line-height: 40px;
    margin-left: 5%;
}

#graph #g_selectmon {
    display: inline-block;
    margin-left: 1%;
    margin-bottom: 3px;
}

#graph #g_selectmon label {
    display: inline-block;
    font-size: 20px;
    line-height: 20px;
}

#graph #selmonarea {
    display: inline-block;
    width: 140px;
    height: 34px;
    border: none;
}

#graph #selmonbtn {
    //position: absolute;
    display: inline-block;
    width: 50px;
    height: 34px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    box-sizing: border-box;
}

#graphbtn {
    width: 100%;
}

#graphbtn a{
    padding: 13px 1.2%;
    margin: 0 0 5px 0;
    box-shadow: none;
}

#nonedata {
    display: block;
    position: absolute;
    top: 300px;
    width: 98%;
    text-align: center;
}

#record_event {
    height: 30vh;
    overflow-y: scroll;
    background-color: azure;
}

#graph_container {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    left: 0;
    box-sizing: border-box;
}

#graph_container div {
    max-width: 100%;
    overflow-x: scroll;
}

#graph_container div svg{
    max-width: 100%;
}

/*=================================
設定
==================================*/
#config .ui-content{
    
}

#config h2{
    margin-top: 10px;
}

#config h2+div{
    margin: 2px 3% 0 3%;
}

#config #passup>form>div>div {
    display: inline-block;
    padding: 3px;
}

#config label+div {
    margin: 0 3%;
    max-width: 200px;
}

#config button {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 37px;
    padding: 0;
    margin: 5px 0;
    top: 1px;
    left: 3%;
}




/*--------------PC(画面サイズが768px以上)のスタイル-----------------*/
@media all and (min-width: 768px) {
        
    /*=================================
    index
    ==================================*/
    #index {
        
    }

    #svg {
        margin-top: 5%;
        margin-bottom: 5%;

        max-width: 300px;
        max-height: 300px;

    }

    #index_menu p {
        display: block;
        position: absolute;
        bottom: 10%;
        font-size: 140%;
    }

    #mind_info {
        left: 35%;
    }

    #app_info {
        right: 35%;

    }

    /*=================================
    top
    ==================================*/
    #home .ui-content {
        
    }

    #topinfo {
        
    }

    #topinfo p {
        
    }

    #image {
        position: re;
        right: 25vw;
        width: 15vw;
        height: 8vh;

        margin-top: 5px;
    }

    #image p {
        margin: 0;
        padding: 0;
        //border: solid 2px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.81);
    }

    #image p#image1 {
        position: absolute;
        right: 0px;
        width: 10vw;
        height: 2vh;
        padding: 0;
    }

    #image p#image2 {
        position: absolute;
        right: 0px;
        top: 4vh;
        width: 5vw;
        height: 1vh;
        padding: 0;
    }

    .imppopup{


    }

    .char {
        position: relative;
        top: 8vh;
        right: -70%;
        width: 25vw;
        height: 25vw;
        max-width: 300px;
        max-height: 300px;
    }

    .char img {
        width: 100%;
        height: 100%;
    }

    /*----------ボタン-------------*/
    #strmenus {
        position: absolute;
        height: 400px;
        padding: 0;
    }

    #strmenus .strbtn{
        display: inline-block;
        position: absolute;
        width: 28%;
        height: 300px;
        line-height: 300px;
        
        margin: 0;
        
        left: 20%;
    }

    #subbtns {
        display: inline-block;
        width: 28%;
        position:absolute;
        margin: 0;
        padding: 0;
        top: 0;
    }

    #strmenus .subbtn{
        position: relative;
        display: block;
        width: 100%;
        height: 145px;
        
        line-height: 150px;
    }

    #sub1 {
        
    }

    #sub2 {
        top: 10px;
    }


    /*=================================
    瞑想
    ==================================*/
    #start .ui-content {
        max-width: 800px;
        margin: 0 auto;
    }
    
    audio {

    }

    .player {
        position: relative;
        border: solid 3px;
        padding: 10px;

        text-align: center;
    }

    #player_btns {
        
    }

    #player_btns a {
        margin: 10px;
    }

    .player span {
        color: aliceblue;
    }

    #now_time {
        position: absolute;
        left: 20px;
    }

    #last_time {
        position: absolute;
        right: 20px;
    }

    #mute_btn {
        margin-right: 20px;
        font-size: 180%;
    }

    #play_btn {
        font-size: 230%;
    }

    #pause_btn {
        font-size: 230%;
    }

    #reset_btn {
        margin-left: 20px;
        font-size: 180%;
    }

    #barBd {
        height: 20px;
        background-color: #a7bde5;
        border-radius: 50px;
        overflow: hidden;
    }

    #bar {
        width: 0;
        height: 100%;
        background: blue;
    }

    .videoPlayer {

    }

    .videoPlayer video {
    }


    /*=================================
    出来事
    ==================================*/
    #event .ui-content{
        max-width: 800px;
        padding: 0;
        margin: 0 auto;
    }

    #event form {
        position: relative;
        padding: 0;
    }


    #event_lec textarea {
        position: relative;
        top: 0;
        margin: 0;
        padding: 5px;
        width: 100%;
        height: 5em;
        -webkit-appearance: none;
        border-radius: 0;

    }

    #lec_btn {
        position: absolute;
        display: block;
        width: 35px;
        height: 35px;
        right: 5px;
        bottom: 8px;
        border-radius: 50%;
        background-color: #3b6ee2;
        color: aliceblue;
        border: none;
    }

    #lec_btn i {
        position: absolute;
        width: 35px;
        height: 35px;
        top: 0;
        left: 0;
        line-height: 35px;
    }

    /*期間検索*/
    #event_range {
        position: relative;
        display: block;
        width: 96%;
        margin: 2%;
        padding: 0;
        box-sizing: border-box;


    }

    #event_range form {
        
    }

    #event_range>form>span {
        position: relative;
        margin: 0;
        padding: 0;

        width: 110px;
        height: 44px;

        position: absolute;
        bottom: 0;
        left: 0;

    }

    #event_range span:nth-of-type(2) {
        left: 24px;
    }

    #event_range span span{
        position: absolute;
        margin: 0;
        padding: 0;
        bottom: 0;

        width: 100%;
        height: 44px;
        padding-top: 12px;
        padding-left: 33px;

        box-sizing: border-box;
    }

    #endday + span {
        left: 0;
    }

    #event_range input {
        position: absolute;
        background-color: #ffffff;
        width: 110px;
        height: 44px;
        margin: 0;
        padding: 0;
        top: 0px;
        border: none;

        line-height: 100px;
    }

    #event #strday {
        left: 0px;
    }

    #event #endday {
        left: 0px;
    }

    #event_range p {
        position: absolute;
        display: inline-block;
        margin: 0;
        padding: 0;
        height: 44px;
        width: 20px;
        line-height: 44px;
        top: 0;
    }

    #event_range button {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 4px;
        left: 260px;
        box-sizing: border-box;
    }

    



    #impression{
        font-size: 16px;
    }

    #impression label:hover{
        color: orangered;
    }

    
    
    /*=================================
    設定
    ==================================*/
    #config .ui-content{
        max-width: 800px;
        margin: 0 auto;
    }
    
}