@charset "UTF-8";
/*------------------------------------------------------------------

BASE

--------------------------------------------------------------------*/
/*Easing*/
/*Screen*/
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?dxh4t4");
  src: url("../fonts/icomoon.eot?dxh4t4#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?dxh4t4") format("truetype"), url("../fonts/icomoon.woff?dxh4t4") format("woff"), url("../fonts/icomoon.svg?dxh4t4#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"],
[class*=" icon-"],
*:before,
*:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html, body, div, article, section, span, p, ul, ol, li, table, tr, td, th, hr, h1, h2, h3, h4, h5, h6, a, em, strong, b, img, input, textarea, svg, button, fieldset, figure, header, footer, label {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  font-size: 100%;
  vertical-align: baseline;
  list-style-type: none;
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
  line-height: 1em;
  border-collapse: collapse;
  -webkit-tap-highlight-color: transparent; }

*:before,
*:after {
  box-sizing: border-box; }

html {
  font-size: 16px;
  overflow-x: hidden;
  width: 100%; }
  html.standalone_mode {
    height: 100vh; }

body {
  color: #556185;
  background-color: #faf3e4;
  font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
  font-weight: 400;
  position: relative;
  word-break: normal;
  word-wrap: break-word;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  transition: background-color 1s ease 0s; }
  body.dark {
    background-color: #000; }

html, body {
  zoom: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none; }

.serif {
  font-family: serif; }

.sans-serif {
  font-family: -apple-system, "BlinkMacSystemFont", sans-serif; }

.mono {
  font-family: "Courier", "Osaka－等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace; }

input[type=text],
input[type=url],
input[type=tel],
input[type=email],
input[type=radio],
input[type=checkbox],
input[type=submit],
input[type=search],
input[type=date],
select,
textarea {
  -webkit-appearance: none;
  outline: none;
  font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
  color: #556185; }

input[type=submit]:hover {
  cursor: pointer; }

strong, b,
h1, h2, h3, h4, h5, h6 {
  font-weight: 600; }

a {
  color: #556185;
  outline: none;
  text-decoration: none;
  -webkit-touch-callout: none; }

@media screen and (min-width: 813px) {
  a[href^="tel:"] {
    pointer-events: none; } }
p {
  margin: 0;
  padding: 0 0 1.5em;
  line-height: 2.25em;
  line-break: strict; }
  p:last-child {
    padding-bottom: 0; }

img {
  display: inline-block;
  outline: none;
  -moz-user-select: none;
  /* These user-select properties are inheritable, used to prevent text selection */
  -webkit-user-select: none;
  -ms-user-select: none;
  /* From IE10 only */
  user-select: none;
  /* Not valid CSS yet, as of July 2012 */
  -webkit-user-drag: none;
  /* Prevents dragging of images/divs etc */
  user-drag: none; }

.clear {
  width: 100%;
  font-size: 0px;
  height: 1px;
  overflow: hidden;
  clear: both;
  float: none;
  margin: 0 0 -1px 0;
  display: block; }

.clear_after:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 0 -1px 0;
  clear: both;
  float: none; }

.l,
.alignleft {
  float: left; }

.r,
.alignright {
  float: right; }

.c,
.aligncenter {
  text-align: center;
  margin-left: auto;
  margin-right: auto; }

.has-text-align-left {
  text-align: left; }

.has-text-align-center {
  text-align: center; }

.has-text-align-right {
  text-align: right; }

.tsume_lr {
  margin: 0 -0.1em; }

.none {
  display: none; }

.hidden {
  visibility: hidden; }

.nopc {
  display: none;
  visibility: hidden; }
  @media screen and (max-width: 812px) {
    .nopc {
      display: inherit;
      visibility: visible; } }

@media screen and (max-width: 812px) {
  .nosp {
    display: none;
    visibility: hidden; } }

.sp320 {
  display: none;
  visibility: hidden; }
  @media screen and (max-width: 320px) {
    .sp320 {
      display: inherit;
      visibility: visible; } }

/*------------------------------------------------------------------

ANIMATION

--------------------------------------------------------------------*/
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn2 {
  0% {
    opacity: 0.75;
    box-shadow: 0px 12px 5px 1px rgba(51, 36, 28, 0.15); }
  100% {
    opacity: 1;
    box-shadow: 0px 1px 4px 0px rgba(51, 36, 28, 0.075); } }
/*------------------------------------------------------------------

ヘッダ

--------------------------------------------------------------------*/
#statusbar_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: env(safe-area-inset-top);
  background: #333344;
  z-index: 11; }

header {
  padding: 16px 0 16px;
  z-index: 10;
  position: fixed;
  top: env(safe-area-inset-top);
  box-shadow: 0px 1px 4px 1px rgba(51, 36, 28, 0.04);
  left: 0;
  background: #FFF;
  width: 100%;
  text-align: center; }
  header:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 0 -1px 0;
    clear: both;
    float: none; }

#back {
  height: 100%;
  width: 3rem;
  padding: 1rem 0.5rem 0.5rem calc(0.3rem + 24px + 4px);
  position: absolute;
  bottom: 0;
  left: 0;
  display: none; }
  #back:after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-top: 2px solid #556185;
    border-left: 2px solid #556185;
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 1rem;
    margin: -7px 0 0 0; }
  #back.opened {
    display: block;
    /*&:after{
       opacity: 1;
    }*/ }

#h_today {
  font-size: 0.8725rem;
  line-height: 1em;
  font-weight: 700;
  margin: 0;
  display: inline-block;
  padding: 3px; }

#btn_toolmenu,
#btn_editmenu {
  position: absolute;
  left: 12px;
  top: 50%;
  font-size: 1rem;
  line-height: 1em;
  padding: 0;
  margin: -15px 0 0 0;
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  overflow: hidden;
  z-index: 20; }
  #btn_toolmenu:before,
  #btn_editmenu:before {
    content: "\e902";
    font-size: 1.875rem; }

#btn_editmenu {
  left: auto;
  right: 10px; }
  #btn_editmenu:before {
    content: "\e905"; }

/*------------------------------------------------------------------

カテゴリリスト

--------------------------------------------------------------------*/
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  transform-origin: center center; }
  #container.opened #list_block {
    left: -100vw; }
  #container.opened #article_wrapper {
    left: 0;
    height: auto; }

#container,
header {
  transition: filter 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }
  #container.blured,
  header.blured {
    filter: blur(3px); }

#list_block {
  width: 100vw;
  padding: calc(66px + env(safe-area-inset-top)) 0 128px 0;
  transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  position: relative;
  top: 0;
  left: 0; }

#list_wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative; }
  #list_wrapper li {
    display: block;
    position: relative;
    width: calc(100% - 24px);
    background-color: #FFF;
    margin: 0 0 14px 12px;
    border-radius: 9px;
    box-shadow: 0px 1px 4px 0px rgba(51, 36, 28, 0.02);
    transition: opacity 0.6s ease 0s, box-shadow 0.3s ease 0s, background-color 0.3s ease 0s;
    overflow: hidden; }
  #list_wrapper.sortable li {
    background-color: #FFF;
    opacity: 0.75;
    box-shadow: 0px 2px 4px 0px rgba(51, 36, 28, 0.2); }
    #list_wrapper.sortable li.ui-sortable-helper {
      box-shadow: 0px 8px 5px 0px rgba(51, 36, 28, 0.2); }
    #list_wrapper.sortable li:active, #list_wrapper.sortable li:focus, #list_wrapper.sortable li:hover {
      background-color: #FFF; }
  #list_wrapper .category_link {
    display: block;
    width: 100%;
    padding: 26px 18px 27px 15px;
    font-size: 1.3125rem;
    line-height: 1em;
    position: relative; }
    #list_wrapper .category_link:before {
      content: "\e904";
      font-size: 2rem;
      line-height: 0;
      position: relative;
      background: linear-gradient(135deg, #c9d1e6 0%, #868ea6 100%) no-repeat 50% 50%/100% 100%;
      margin: 0 6px 0 0;
      top: 0.375rem;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: opacity 0.3s ease 0s; }
    #list_wrapper .category_link:after {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      border-right: 1px solid #556185;
      border-top: 1px solid #556185;
      position: absolute;
      top: 50%;
      right: 18px;
      margin: -6px 0 0 0;
      transform: rotate(45deg); }

.folder_group {
  display: none;
  visibility: hidden; }
  .folder_group.selected {
    display: block;
    visibility: visible; }

.btn_edit {
  width: 68px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(250deg, #03CEC3 0%, #5BF161 100%) no-repeat 50% 50%/100% 100%;
  z-index: -1;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }
  .btn_edit:after {
    content: "\e905";
    color: #FFF;
    font-size: 2rem;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.5em; }

.sortable .btn_edit {
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  z-index: auto;
  opacity: 1; }

.support_text {
  display: block;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.875rem; }
  .support_text p {
    background: #f2ebdd;
    color: #bfb9ad;
    display: inline-block;
    border-radius: 14px;
    line-height: 1.4em;
    padding: 4px 10px;
    margin: 0 0 10px 0; }

/*------------------------------------------------------------------

記念日リスト

--------------------------------------------------------------------*/
#article_wrapper {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: calc(66px + env(safe-area-inset-top)) 0 128px 0;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 100vw;
  transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }

article {
  position: relative;
  width: calc(100% - 24px);
  padding: 17px 18px 21px 18px;
  background-color: #FFF;
  margin: 0 auto 14px;
  border-radius: 9px;
  box-shadow: 0px 1px 4px 0px rgba(51, 36, 28, 0.02);
  transition: opacity 0.6s ease 0s, box-shadow 0.3s ease 0s;
  overflow: hidden; }
  article h3 {
    line-height: 1.4em;
    font-size: 1.3125rem;
    letter-spacing: 0.025em;
    font-weight: 400;
    color: #556185;
    float: left;
    width: calc(100% - 7rem);
    padding: 0; }
  article h4 {
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    color: #556185;
    float: right;
    width: 7rem;
    text-align: right; }
    article h4 .date_num {
      font-size: 1.3125rem;
      line-height: 1.4em;
      color: #556185;
      font-weight: 400; }

.folder_group.sortable article {
  box-shadow: 0px 2px 4px 0px rgba(51, 36, 28, 0.2);
  opacity: 0.75; }
  .folder_group.sortable article h4,
  .folder_group.sortable article .calced {
    display: none; }
  .folder_group.sortable article.ui-sortable-helper {
    box-shadow: 0px 8px 5px 0px rgba(51, 36, 28, 0.2); }

.cnt_sub {
  display: flex;
  width: 100%;
  clear: both;
  float: none;
  margin: 0;
  justify-content: space-between;
  color: #aab0c2;
  padding: 2px 0 0;
  position: relative; }
  .cnt_sub p {
    padding: 0;
    font-size: 0.875rem;
    line-height: 1em; }
    .cnt_sub p:nth-child(2) {
      text-align: right; }
  .cnt_sub .youbi {
    display: inline-block;
    background-color: #b9becd;
    line-height: 1em;
    padding: 2px;
    color: #FFF;
    transform: scale(0.7, 0.7);
    transform-origin: center center;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 0 -2px -2px;
    position: relative;
    vertical-align: bottom; }

#day_plus {
  display: block;
  width: 58px;
  height: 58px;
  background: linear-gradient(60deg, #FFCA70 0%, #FFA5C1 100%) no-repeat 50% 50%/100% 100%;
  border-radius: 50% 50%;
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom));
  right: 15px;
  transform-origin: center center;
  transition: transform 0.1s ease 0s;
  z-index: 10; }
  #day_plus:active {
    transform: scale(0.9, 0.9); }
  #day_plus:before, #day_plus:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%; }
  #day_plus:before {
    width: 20px;
    height: 0;
    border-top: 1px solid #FFF;
    margin: 0 0 0 -10px; }
  #day_plus:after {
    width: 0;
    height: 20px;
    border-left: 1px solid #FFF;
    margin: -10px 0 0 0; }

.aniv_is_today {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgba(254, 85, 133, 0.8);
  border-radius: 50% 50%;
  top: 5px;
  left: 5px; }

/*------------------------------------------------------------------

INPUT

--------------------------------------------------------------------*/
#modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 29;
  background-color: rgba(255, 255, 255, 0);
  display: none;
  opacity: 0; }
  #modal_bg.opened {
    display: block; }

.input_area {
  width: 100%;
  background-color: #FFF;
  border-radius: 12px;
  margin: 0;
  position: fixed;
  bottom: -380px;
  left: 0;
  box-shadow: 0px 3px 12px 3px rgba(51, 36, 28, 0.1);
  text-align: center;
  font-size: 0;
  line-height: 0;
  padding: 30px 30px calc(45px + env(safe-area-inset-bottom));
  transition: all 0.2s ease-in 0s;
  z-index: 30; }
  .input_area #new_folder {
    bottom: -280px; }
  .input_area.opened {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.5, 1.115) 0s;
    bottom: -50px; }
  .input_area input[type="text"] {
    font-size: 1.25rem;
    line-height: 1em;
    padding: 8px 0px;
    width: 100%;
    margin: 0 auto 20px;
    border-bottom: 1px dotted #888;
    border-radius: 0;
    position: relative;
    z-index: 39;
    /*&:focus{
        z-index: 31;
    }*/ }
  .input_area input[type="date"] {
    font-size: 1.25rem;
    line-height: 1em;
    padding: 8px 0;
    height: calc(1.25em + 16px);
    width: 100%;
    position: relative;
    background: transparent;
    margin: 0 auto; }
  .input_area input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0; }
  .input_area .safari_bugfix {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
  .input_area input[type="text"]:focus + .safari_bugfix {
    z-index: 38; }

.date_select {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 auto 20px;
  z-index: 32;
  border-bottom: 1px dotted #888;
  border-radius: 0; }
  .date_select:before {
    background: url(../images/icon_calender.svg) no-repeat center center/contain;
    content: "";
    position: absolute;
    top: 0px;
    right: 8px;
    height: 100%;
    width: 36px;
    display: block; }

.edit_mode .date_select .blocker {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 500; }
.edit_mode input[type="date"],
.edit_mode .date_select:before {
  opacity: 0.35; }

input[type="date"]::-webkit-inner-spin-button {
  -webkit-appearance: none; }

input[type="date"]::-webkit-clear-button {
  -webkit-appearance: none; }

.btn_wrapper {
  position: relative;
  margin: 8px auto 41px;
  height: calc(1.25rem + 36px); }

.input_ok {
  display: block;
  width: 160px;
  margin: 0 -80px 0 0;
  font-size: 1.25rem;
  padding: 18px;
  line-height: 1em;
  border-radius: 29px;
  text-align: center;
  font-weight: 600;
  color: #FFF;
  position: absolute;
  right: 50%;
  top: 0;
  background: linear-gradient(60deg, #FFCA70 0%, #FFA5C1 100%) no-repeat 50% 50%/100% 100%;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s; }

.btn_delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  background: #FBF9F9;
  left: 0;
  top: 50%;
  font-size: 0;
  margin: -16px 0 0 -4px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  display: none; }
  .btn_delete:after {
    content: "\e908";
    display: block;
    font-size: 2rem;
    color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1rem 0 0 -1rem; }

.edit_mode .btn_delete {
  display: block; }

.delete_confirm .input_ok {
  font-size: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  right: 0;
  top: 50%;
  margin: -16px -4px 0 0; }
  .delete_confirm .input_ok:after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
    transform: rotate(-45deg);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -3px; }
.delete_confirm .btn_delete {
  width: 160px;
  margin: 0 0 0 -80px;
  border-radius: 29px;
  padding: 18px;
  height: calc(1.25rem + 36px);
  background: red;
  left: 50%;
  top: 0; }
  .delete_confirm .btn_delete:after {
    color: #FFF; }

#file_inout {
  font-size: 1rem;
  line-height: 1em; }
  #file_inout h3,
  #file_inout p {
    font-size: 1rem;
    padding-bottom: 1.75em;
    line-height: 1.3em; }
    #file_inout h3:last-child,
    #file_inout p:last-child {
      font-size: 0.75rem;
      padding: 1em 0 2em; }

.menu_inner {
  padding-bottom: 0px; }

#uploader {
  display: none; }

#btn_download,
#btn_upload {
  position: relative; }
  #btn_download:before,
  #btn_upload:before {
    content: "\e903";
    font-size: 1.75rem;
    line-height: 0;
    position: relative;
    top: 0.3125rem; }

#btn_download:before {
  content: "\e901"; }