@charset "utf-8";

/* ------------------ media ------------------ */
.pc_only {
}
.mobile_only {
  display:none;
}
/* ------------------ tags ------------------ */
html {
  font-size: 16px;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background-attachment:fixed;
  background-position:left top;
  background-repeat:repeat-y;
  color:#2c2e2f;
//  background-color:#fcfcfc;
  font-size: 16px;
}
pre {
  padding:0;
  font-size:16px;
  background-color:transparent;
  border:none;
  border-radius:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
  padding:0;
}
th {
  font-weight:normal;
}
select {
  outline: none!important;
  max-width:100%;
}
input {
  outline: none!important;
}
label {
  outline: none!important;
  font-weight:normal;
}
i {
  font-family:Meiryo;
  display:inline-block;
  -webkit-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);
}
.btn {
  outline: none!important;
}
/* ------------------ gradation ------------------ */
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeIn0-50 {
  0% {opacity: 0}
  100% {opacity: 0.5}
}
@-webkit-keyframes fadeIn0-50 {
  0% {opacity: 0}
  100% {opacity: 0.5}
}
@keyframes fadeIn0-80 {
  0% {opacity: 0}
  100% {opacity: 0.8}
}
@-webkit-keyframes fadeIn0-80 {
  0% {opacity: 0}
  100% {opacity: 0.8}
}
@keyframes fadeOut {
  0% {opacity: 1}
  100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1}
  100% {opacity: 0}
}
@keyframes fadeOut100-30 {
  0% {opacity: 1}
  100% {opacity: 0.3}
}
@-webkit-keyframes fadeOut100-30 {
  0% {opacity: 1}
  100% {opacity: 0.3}
}
/* ------------------ generic class ------------------ */
.fxxl {
  font-size:1.4rem;
}
.fxl {
  font-size:1.3rem;
}
.fl {
  font-size:1.2rem;
}
.fml {
  font-size:1.1rem;
}
.fm {
  font-size:1rem;
}
.fms {
  font-size:0.91rem;
}
.fs {
  font-size:0.83rem;
}
.fxs {
  font-size:0.77rem;
}
.fb {
  font-weight:bold;
}
.cred {
  color:red;
}
.cgray {
  color:#444;
}
.clgray {
  color:#888;
}
.cnavy {
  color:#00008b;
}
.on_bg {
  color:#fff;
}
.link_radio {
}
.link_radio input {
  display: none;
}
.link_radio label {
  border:solid 1px #adadad;
  background-color:#fff;
  padding:3px 15px 0 15px;
  height:38px;
  text-align:center;
  vertical-align:bottom;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
.link_radio label:hover {
  background-color: #e6e6e6;
}
.link_radio input[type="radio"]:checked + label {
  color: #fff;
  background-color: #4ca7d8;
  border-color: #0082c8;
}
.link_radio input[type="radio"]:checked + label:hover {
  background-color:#0082c8;
}
.none {
  display:none;
}
.left {
  float:left;
}
.right {
  float:right;
}
.clear {
  clear:both;
}
.hidden {
  display:none;
}
.button {
  border:solid 1px #666;
  background-color:#eee;
  padding:0 10px;
  height:36px;
  line-height:36px;
  text-align:center;
  vertical-align:middle;
  overflow:hidden;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow: 1px 1px 1px 1px rgba(255,255,255,0.7) inset;
  -moz-box-shadow: 1px 1px 1px 1px rgba(255,255,255,0.7) inset;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(255,255,255,0.7) inset;
  box-shadow: -1px -1px 1px 0px rgba(0,0,0,0.3) inset;
  -moz-box-shadow: -1px -1px 1px 0px rgba(0,0,0,0.3) inset;
  -webkit-box-shadow: -1px -1px 1px 0px rgba(0,0,0,0.3) inset;
}
.button:hover {
  color:#000;
  background-color:#ddd;
}
.flat-button {
  color:#fff;
  border:solid 1px #888;
  background-color:#aaa;
  padding:0 20px;
  height:40px;
  line-height:40px;
  text-align:center;
  vertical-align:middle;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
.flat-button:hover {
  opacity: .75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha(opacity=75)";
  -khtml-opacity: .75;
  -moz-opacity: .75;
}
.button.blue,.flat-button.blue {
  border:solid 1px #137499;
  background-color:#2ea2cc;
}
.button.red,.flat-button.red {
  border:solid 1px #ff1a2a;
  background-color:#ff707a;
}
.button.orange,.flat-button.orange {
  border:solid 1px #ff5625;
  background-color:#ff744d;
}
.button.green,.flat-button.green {
  border:solid 1px #1ca722;
  background-color:#56b953;
}
.button.green,.flat-button.silver {
  border:solid 1px #adadad;
  background-color:#fff;
  color:#333;
}
/* ------------------ bootstrap ------------------ */


/* ------------------ original fonts (font icons) ------------------ */
@font-face {
  font-family: 'Diary Icons';
  src: url('/static/service/font/icons/diary-icons.ttf') format('truetype');
}

.diary-icons { // .glyphiconと同じにしている
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Diary Icons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.diary-icons.diary-icon-diary:before{
  content:"\E050";
}
.diary-icons.diary-icon-jogging:before{
  content:"\E052";
}

/* ------------------ loading full ------------------ */
.loadming_full_mode {
  z-index:1000;
  position: absolute;
}
.loadming_full_background {
  z-index:1000;
  width:100%;
  height:100vh;
  background-color:#fff;
  position:fixed;
//  position: absolute;
  opacity: 0.7;
  top:     0;
  left:    0;
}
.loadming_full_background.fadeIn0-80 {
  animation: fadeIn0-80 0.3s ease 0s 1 normal;
  -webkit-animation: fadeIn0-80 0.3s ease 0s 1 normal;
}
.loadming_full_background.fadeOut100-30 {
  animation: fadeOut100-30 1s ease 0s 1 normal;
  -webkit-animation: fadeOut100-30 1s ease 0s 1 normal;
}
.loadming_full_background.fadeOut {
  animation: fadeOut 1s ease 0s 1 normal;
  -webkit-animation: fadeOut 1s ease 0s 1 normal;
}
.loading_box {
  z-index: 200;
  width: 56px;
  height: 56px;
  margin: calc(100vh / 2) auto 0 auto:
  overflow: hidden;
  position: fixed;
  top     : calc((100vh - 56px) / 2);
  left    : calc((100% - 56px) / 2);
  background-color: #transpaernt;
}
.loading_img {
  width:56px;
  height:56px;
}
.loading_img.fadeIn0-80 {
  animation: fadeIn0-80 1s ease 0s 1 normal;
  -webkit-animation: fadeIn0-80 1s ease 0s 1 normal;
}
.loading_img.fadeOut {
  animation: fadeOut 1s ease 0s 1 normal;
  -webkit-animation: fadeOut 1s ease 0s 1 normal;
}

/* ---------------------------------------------
 * for mobile
 * --------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 720px) {

  /* ------------------ media ------------------ */
  .pc_only {
    display:none;
  }
  .mobile_only {
    display:block;
  }

  /* ------------------ loading full ------------------ */
  .loadming_full_background {
    z-index:300;
  }
  .loading_box {
    left:calc((100vw - 80px) / 2);
    z-index:300;
  }
}