html {}

body {
    color: rgb(20, 20, 20);
    font-family: sans-serif !important;
}

.logo {
    text-align: center;
    margin-top: calc(5vw + env(safe-area-inset-top));
}

.logo img {
    max-width: 65%;
    height: auto;
}

.topcontainer {
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 1em 10%;
    background: #fff;
    border-radius: .2em;
    flex-grow: 1000;
    margin-bottom: 4vh;
    font-size: 0.94rem;
    line-height: 1.7;
}

.topcontainer .info {
    color: #007306;
}

.h100 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.topcontainer h1 {
    font-size: 1.64rem;
    font-weight: normal;
}

.selector,
.textbox {
    box-sizing: border-box;
    background: #FFFFF0;
    border: solid 2px #000;
    color: rgb(20, 20, 20);
    width: 100%;
    position: relative;
}

.textbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    padding: .5em;
    overflow-wrap: break-word;
    text-align: left;
}

.textbox_outer {
    flex-grow: 100;
    width: 90%;
    position: relative;
}


/*スクロールバー全体*/

.textbox::-webkit-scrollbar {
    width: 10px;
}


/*スクロールバーの軌道*/

.textbox::-webkit-scrollbar-track {
    border-radius: 0;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}


/*スクロールバーの動く部分*/

.textbox::-webkit-scrollbar-thumb {
    background-color: #00A224;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.arwselector {
    border-radius: 1.5vw;
    width: 100%;
    box-sizing: border-box;
    border: solid 2px #000;
    color: rgb(20, 20, 20);
    width: 100%;
    position: relative;
    background: #FFFFF0 url(../images/arwub.png) no-repeat right center / 6vw;
}

.arwselector.active {
    box-shadow: inset .1em .1em gold;
}

.selector::before {
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    background: #00A224 url(../images/icon_btm.png) no-repeat center center / contain;
    border-left: solid 2px #000;
    height: 100%;
    width: 11%;
}

.selector ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.selector ul li {
    padding: 1em 1em;
}

.selector li div {
    font-size: 1.64rem;
    font-weight: bold;
}

.selector li span {}

input.textinput,
textarea.textinput {
    box-sizing: border-box;
    background: #FFFFF0;
    border: solid 2px #000;
    color: rgb(20, 20, 20);
    width: 100%;
    position: relative;
    font-size: 1.64rem;
    padding: .7em .3em;
    border-radius: 1.5vw;
}

input.textinput:focus,
textarea.textinput:focus {
    box-shadow: inset .1em .1em gold;
}

input.textinput::placeholder,
textarea.textinput::placeholder {
    color: #B0B0A4;
    background: url(../images/icon_pencil.png) no-repeat .2em center / 1em;
    padding-left: 1.2em;
}

textarea.textinput::placeholder {
    background: url(../images/icon_pencil.png) no-repeat .2em .1em/ 1em;
}

input.textinput::placeholder::before {}

.bn_primary {
    border: solid 2px #000;
    box-sizing: border-box;
    margin-top: .5em;
    width: 100%;
    display: inline-block;
    background: #00A224;
    color: #fff;
    font-size: 1.3em;
    text-align: center;
    padding: .6em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.bn_secondary {
    border: solid 2px #D1D1D1;
    box-sizing: border-box;
    border-radius: .3em;
    margin-top: .5em;
    width: 100%;
    display: inline-block;
    background: #fff;
    color: #008B1F;
    font-size: 1.3em;
    text-align: center;
    padding: .6em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.bn_secondary .icon {
    color: #000000;
    margin-right: .3em;
}

.bn_disabled {
    border: solid 2px rgb(179, 179, 179);
    box-sizing: border-box;
    margin-top: .5em;
    width: 100%;
    display: inline-block;
    background: #d6d6d6;
    color: #fff;
    font-size: 1.3em;
    text-align: center;
    padding: .6em 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    transform: translateY(0.5em);
    opacity: 0;
}

.crossfade-enter-active,
.crossfade-leave-active {
    transition: opacity 0.5s ease;
}

.crossfade-enter-from,
.crossfade-leave-to {
    opacity: 0;
    position: absolute;
}

.fadeZoom-enter-active,
.fadeZoom-leave-active {
    transition: opacity 0.5s ease, transform 1s ease;
    transform: scale(1);
}

.fadeZoom-enter-from,
.fadeZoom-leave-to {
    opacity: 0;
    transform: scale(0.95);
}

.fadeMin-enter-active,
.fadeMin-leave-active {
    transition: opacity 3s, transform 4s ease, margin-bottom 3s ease, padding-top 3s, padding-bottom 3s ease, max-height 3s ease, height 3s ease;
    transform: scale(1);
    opacity: 1;
    max-height: 100vh;
    overflow: hidden !important;
}

.fadeMin-enter-from,
.fadeMin-leave-to {
    box-sizing: border-box !important;
    opacity: 0;
    transform: scale(0.01) rotate(-35deg);
    max-height: 0vh;
    /**/
    overflow: hidden;
    margin-bottom: 0!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    ;
}

@keyframes simplebound {
    0% {
        transform: translateY(1vw);
    }
    100% {
        transform: translateY(-1vw);
    }
}

.moveicon {
    animation: 3s shake infinite alternate;
}

@keyframes fadeout {
    0% {
        opacity: 0;
        transform: translateY(-2em);
    }
    30% {
        opacity: 1;
        transform: translateY(0em);
    }
    90% {
        opacity: 1;
        transform: translateY(0em);
    }
    100% {
        opacity: 0;
        transform: translateY(0em);
    }
}

.fadeout {
    animation: 4s ease 0s 1 fadeout forwards;
}

@keyframes shake {
    0% {
        transform: skewX(-6deg);
    }
    5% {
        transform: skewX(6deg);
    }
    10% {
        transform: skewX(-6deg);
    }
    15% {
        transform: skewX(6deg);
    }
    20% {
        transform: skewX(0deg);
    }
    100% {
        transform: skewX(0deg);
    }
}

.simplebound {
    animation: simplebound .5s ease infinite alternate;
}

@keyframes fadebounce {
    0% {
        opacity: 1;
    }
    5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadebounce {
    animation: fadebounce .5s ease infinite;
}


/*フォント*/

.bound i {
    font-style: normal;
    transform: translateY(-1em);
    display: inline-block;
    animation-delay: -10s;
}


/*アニメーション指定
  文字数に合わせてleftや開始時間（2つ目のs）を設定する*/

.bound i:nth-child(1) {
    animation: bound-anim 3s 0.0s infinite;
}

.bound i:nth-child(2) {
    animation: bound-anim 3s 0.1s infinite;
}

.bound i:nth-child(3) {
    animation: bound-anim 3s 0.2s infinite;
}

.bound i:nth-child(4) {
    animation: bound-anim 3s 0.3s infinite;
}

.bound i:nth-child(5) {
    animation: bound-anim 3s 0.4s infinite;
}

.bound i:nth-child(6) {
    animation: bound-anim 3s 0.5s infinite;
}

.bound i:nth-child(7) {
    animation: bound-anim 3s 0.6s infinite;
}


/*アニメーションキーフレーム
  小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/

@keyframes bound-anim {
    0%,
    100% {
        transform: translateY(0em);
    }
    5% {
        transform: translateY(-0.3em);
    }
    10% {
        transform: translateY(0em);
    }
}

@keyframes bound-anim2 {
    0%,
    100% {
        transform: translateY(0em);
    }
    7% {
        transform: translateY(-0.14em);
    }
    14% {
        transform: translateY(0em);
    }
    21% {
        transform: translateY(-0.14em);
    }
    28% {
        transform: translateY(0em);
    }
}

.activebound {
    animation: bound-anim2 1.5s 0.0s infinite;
}

.target {
    clip-path: url("../static/illust_icon/105466.svg");
    object-fit: cover;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

.iconcolor.red {
    background: #E72C2C !important;
}

.iconcolor.pink {
    background: #FF6387 !important;
}

.iconcolor.blue {
    background: #5594E7 !important;
}

.iconcolor.green {
    background: #29A236 !important;
}

.iconcolor.ygreen {
    background: #87FF52 !important;
}

.iconcolor.blown {
    background: #A65F2B !important;
}

.iconcolor.red img,
.iconcolor.pink img,
.iconcolor.blue img,
.iconcolor.green img,
.iconcolor.blown img {
    filter: invert(1) brightness(200%);
}

.home .page-content {
    padding-top: 0 !important;
}

.walkthrough .page-content {
    padding-top: 0 !important;
}

.rightmenu {}

.rightmenu .icon {
    margin-right: .1em;
}

.ios-translucent-modals .actions-button,
.ios-translucent-modals .actions-label {
    background-color: rgba(var(--f7-actions-bg-color-rgb), 1);
}

.fullimageview {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.705);
    z-index: 9999;
}

.fullimageview img {
    width: 100vw;
    height: 100vw;
    object-fit: cover;
}

.fullimageview .vue-zoomer {
    width: 100%;
    height: 100%;
}

.fullimageview .closebn {
    color: #fff;
    font-size: 2.5rem;
    position: absolute;
    top: 1em;
    right: .3em;
    z-index: 10;
}


/*iphoneXなど縦長用*/

@media screen and (max-aspect-ratio: 9/19) {
    .bn_primary,
    .bn_secondary,
    .bn_disabled {
        padding: 1.5em 0;
    }
}

html,
body,
#calenderApp,
#calenderApp>div {
    height: 100%;
}

.groupnamearea {
    margin: 2vw 5% 0 5%;
    margin-top: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.groupnamesub {
    margin: 0 5% 3vw 5%;
    text-align: center;
}

.groupnamearea .groupicon {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.groupnamearea .groupicon img {
    width: 17vw;
}

.groupnamearea .groupname {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.groupnamearea .groupname span {
    font-size: 2.35em;
    text-align-last: justify;
    padding: 0 .5em;
    min-width: 48%;
    white-space: nowrap;
}

.diary_right .groupnamearea .groupname {
    display: block;
}

.diary_right .groupnamearea {
    margin: 2vw 0;
}

.diary_right .groupnamearea .groupname span {
    font-size: 1.5em;
}

.topcontainer {
    margin: 1em 5%;
    margin-top: 0;
    background: none;
    padding-top: 0;
}

.topcontainer h2 {
    font-weight: normal;
    font-size: 0.94rem;
}

.bn1 {
    width: 90%;
}

.calendermonth {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-bottom: .3em;
}

.calendermonth button {
    white-space: nowrap;
    padding: 0 .5em;
    width: auto;
    color: rgb(124, 124, 124);
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

button.bn_secondary {
    cursor: pointer;
}

button.bn_secondary.bn_disabled {
    cursor: auto;
}

.calendermonth button i {
    color: rgb(124, 124, 124);
    font-size: .8em;
}

.calendermonth button:last-of-type i {
    margin-left: .3em;
    margin-right: 0;
}

.calendermonth button.bn_disabled {
    opacity: .2;
    background: none;
}

.calendermonth .currentmonthname {
    font-size: 2.35rem;
    flex-grow: 10;
    width: 100%;
    color: #0063B9;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}

.calendermonth .currentmonthname span {
    font-size: .5em;
    margin-right: .1em;
}

.calendarbox {
    width: 100%;
    flex-grow: 100;
    display: flex;
    flex-direction: column;
}

.calendarbox .calheader {}

.calendarbox ul.calheader {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.calendarbox ul.calheader li {
    width: 100%;
}

.calendarbox .callendar {
    flex-grow: 100;
}

.calendarbox ul.callendar {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: solid 2px #E0F2DC;
}

.calendarbox ul.callendar li {
    width: 14.28%;
    border-bottom: solid 2px #E0F2DC;
    border-right: solid 2px #E0F2DC;
    font-size: 0.7rem;
    position: relative;
    box-sizing: border-box;
}

.calendarbox ul.callendar li span.image {
    background: rgb(255, 255, 255);
    width: 9vw;
    height: 9vw;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    position: absolute;
    transform: rotate(-16deg);
    cursor: pointer;
}

.calendarbox ul.callendar li i {
    width: 9vw;
    height: 9vw;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    position: absolute;
}

.calendarbox ul.callendar li u {
    text-decoration: none;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 77, 58, 0.781);
    border-radius: 1em;
    color: #fff;
    width: 2em;
    height: 2em;
    position: absolute;
    right: 5%;
    bottom: 5%;
    z-index: 100;
}

.calendarbox ul.callendar li span.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calendarbox ul.callendar li:nth-child(7n) {
    border-right: none;
}

.sec_upper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 100;
    background: #fff;
    padding-top: 1em;
}

.sec_bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 5vw;
}

.bns {
    width: 100%;
    background: #00A224;
    border: solid 2px #000000;
}

.bns ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 3vw 0;
}

.bns ul li {
    width: 100%;
    border-right: solid 2px #000000;
}

.bns ul li p {
    margin: 0;
}

.bns ul li span {
    color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.17rem;
    cursor: pointer;
}

.bns ul li:last-child {
    border-right: none;
}


/* ipad等の幅広用 */

@media screen and (min-aspect-ratio: 139/199) {
    .calendarbox ul.callendar li span.image {
        width: 7vw;
        height: 7vw;
        top: 3.5vw;
    }
}


/*iphoneXなど縦長用*/

@media screen and (max-aspect-ratio: 9/19) {
    .calendarbox ul.callendar li span.image {
        width: 11vw;
        height: 11vw;
        top: 7vw;
    }
    .calendarbox ul.callendar li u {
        bottom: 15%;
    }
}

.calendarbox ul.callendar li span.image {
    width: 70px;
    height: 70px;
    top: 28px;
}

.goback {
    display: flex;
    padding: 1em;
    cursor: pointer;
    align-items: center;
}

.diariescontainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.empty {
    background: rgb(223, 223, 223);
    flex-grow: 100;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
}

.bns {
    list-style: none;
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgb(211, 212, 122);
    padding: .3em;
    border-radius: .3em 0 0 0;
}

.bns ul {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.bns li {
    padding: .6em 1.3em;
    border-right: solid 1px rgb(34, 34, 34);
    cursor: pointer;
}

.bns li:active {
    background: rgb(157, 158, 88);
}

.bns li:last-child {
    border-right: none;
}

.diaries_scroll_outer {
    position: relative;
    flex-grow: 100;
    width: 100%;
}

.diaries_scroll {
    /*
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;*/
}

.diaries {
    flex-grow: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(241, 241, 241);
    padding-top: 5vw;
}

.diaries .diary_one {
    background: #fff;
    border: solid 2px #ccc;
    padding: 20px;
    width: 90%;
    border-radius: 2vw;
    margin-bottom: 5vw;
    overflow: hidden;
}

.diaries .image {}

.diaries .date {
    font-size: 1.25rem;
    padding: 0 0 .4em 0;
    width: 80%;
}

.diaries .date span {
    color: rgb(127 127 220);
}

.diaries .weathers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.diaries .weather {
    font-size: 1.3em;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: rgb(124, 124, 124);
}

.diaries .weather i {
    font-size: 1.64rem;
    margin-right: .2em;
}

.diaries .public {
    margin-top: 1em;
    margin-left: 1em;
    font-size: 1.3em;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color: rgb(124, 124, 124);
}

.diaries .public i {
    font-size: 1.3rem;
    margin-right: .2em;
}

.diaries .sentent {
    font-size: 1.17rem;
    padding: .4em 0 0 0;
    white-space: pre-wrap;
    line-height: 1.8;
}

.diaries .sentent span {
    border-bottom: solid 1px #ccc;
}


/* デモCSSスタイルの一部 */

.diaries .diary_one {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    background: #fff;
    color: #000;
}

.diaries .diary_left {}

.diaries .diary_right {
    margin-left: 3vw;
    width: 100%;
}

.diaries .diary_one_outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.diaries .diary_one {
    box-sizing: border-box;
    background: #fff;
    position: relative;
}

.diaries {
    margin: 0;
}

.groupnamearea {
    margin: 2vw 5%;
    margin-top: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.groupnamearea .groupicon {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.groupnamearea .groupicon img {
    width: 4em;
}

.topcontainer {
    margin: 1em 5%;
    margin-top: 0;
    background: none;
    padding-top: 0;
}

.diariescontainer h2 {
    font-weight: normal;
    font-size: 1.17rem;
}

.diariescontainer span.image {
    display: block;
    width: 250px;
    height: 250px;
    background: #ccc;
}

.diariescontainer span.image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.sec_upper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 100;
    background: #fff;
    padding-top: 1em;
    overflow: hidden;
}

.sec_bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 5vw;
}

@media screen and (max-width: 665px) {
    .calendarbox ul.callendar li {
        height: 18vw;
    }
    .calendarbox ul.callendar li span.image {
        width: 9vw;
        height: 9vw;
        top: 2em;
    }
    .diaries .diary_one {
        padding: 5vw;
    }
    .diariescontainer span.image {
        width: 25vw;
        height: 25vw;
    }
}

#page-top {
    display: none !important;
}

#header nav.popmenu {
    z-index: 101;
}