@keyframes slideInYmainarea {
  0% {
    transform: translateY(150px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
@keyframes underlineX {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
@keyframes slideInXmarker {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  60% {
    transform: scaleX(1) translateX(0);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: "Noto sans jp", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  box-sizing: border-box;
}
body h1, body h2, body h3, body h4, body h5, body p, body ul, body li, body dl, body dt, body dd {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: normal;
  color: #404042;
}
body img {
  max-width: 100%;
  width: 100%;
  line-height: 0;
}
body a {
  color: #404042;
  text-decoration: none;
  transition: 0.2s;
}
body a:hover {
  opacity: 0.6;
  text-decoration: none;
}
body .font-maru {
  line-height: 1.4;
  font-family: "Kiwi Maru", serif, sans-serif;
}
body .pcnone {
  display: none;
}
@media screen and (max-width: 768px) {
  body .pcnone {
    display: block;
  }
}
body .spnone {
  display: block;
}
@media screen and (max-width: 768px) {
  body .spnone {
    display: none !important;
  }
}
body .mbnone {
  display: block;
}
@media screen and (max-width: 425px) {
  body .mbnone {
    display: none !important;
  }
}

/*------------------------------------
	main contents
------------------------------------*/
#lifelog {
  /* fadein default */
  /* midashi */
  /*------------------------------------
  	contents_top
  ------------------------------------*/
  /* eyecatch */
  /*------------------------------------
  	contents_mid
  ------------------------------------*/
  /*------------------------------------
  	contents_foot
  ------------------------------------*/
  /* slide */
}
#lifelog .contents_top {
  position: relative;
  padding-top: 3em;
  background-color: #faece0;
}
#lifelog .contents_top:after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 95px;
  vertical-align: middle;
  background-image: url("../img/obi01_pc.png");
  background-repeat: repeat-x;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 768px) {
  #lifelog .contents_top:after {
    background-image: url("../img/obi01_sp.png");
  }
}
#lifelog .contents_mid {
  position: relative;
  background-color: #fef49a;
}
#lifelog .contents_mid:after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 95px;
  vertical-align: middle;
  background-image: url("../img/obi02.png");
  background-repeat: repeat-x;
  background-size: contain;
  background-position: center;
}
#lifelog .contents_foot {
  width: min(89vw, 800px);
  margin: 0 auto;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  #lifelog .contents_foot {
    width: min(90vw, 730px);
  }
}
#lifelog .fadein {
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
  will-change: opacity, visibility;
}
#lifelog .active {
  opacity: 1 !important;
  visibility: visible !important;
}
#lifelog .outline {
  -webkit-text-stroke: 1.8px #404042;
  text-shadow: 1px #404042;
  paint-order: stroke;
}
#lifelog h1 {
  position: absolute;
  top: 30px;
  right: 1%;
  font-size: min(2.8vw, 24px);
  font-weight: 500;
  letter-spacing: min(0.3vw, 4px);
  animation: slideInYmainarea 1s cubic-bezier(0.25, 1, 1, 1) forwards;
}
#lifelog h1 .lead {
  position: relative;
  padding-bottom: 5px;
  width: min(37vw, 330px);
  letter-spacing: 1px;
  line-height: 0;
}
#lifelog h1 .lead span {
  position: absolute;
  top: 18%;
  left: 58px;
  z-index: 9;
  font-size: min(1.5vw, 14px);
  font-weight: 300;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  #lifelog h1 {
    position: unset;
    font-size: min(6vw, 30px);
    text-align: center;
    letter-spacing: min(0.2vw, 6px);
  }
  #lifelog h1 .lead {
    margin: auto;
    padding-bottom: 3px;
    width: min(78vw, 380px);
    letter-spacing: 0;
    line-height: 0;
  }
  #lifelog h1 .lead span {
    top: 18%;
    left: 11vw;
    font-size: min(3.7vw, 16px);
    line-height: 1.3;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog h1 .lead span {
    left: 14vw;
  }
}
#lifelog h2, #lifelog h4 {
  position: relative;
  margin: 0 auto;
  font-size: min(2.8vw, 28px);
  font-weight: 500;
  text-align: center;
  letter-spacing: 6px;
}
#lifelog h2 .outline, #lifelog h4 .outline {
  font-size: min(3.2vw, 35px);
  padding-right: 2px;
  letter-spacing: 4px;
}
@media screen and (max-width: 768px) {
  #lifelog h2, #lifelog h4 {
    font-size: min(5.8vw, 28px);
    line-height: 1.8;
    letter-spacing: 4px;
  }
  #lifelog h2 .outline, #lifelog h4 .outline {
    font-size: min(6.5vw, 35px);
    letter-spacing: 3.5px;
  }
}
#lifelog h2 p, #lifelog h4 p {
  position: relative;
}
#lifelog h2 p:before, #lifelog h2 p:after, #lifelog h4 p:before, #lifelog h4 p:after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 768px) {
  #lifelog h2 p:before, #lifelog h2 p:after, #lifelog h4 p:before, #lifelog h4 p:after {
    width: min(6vw, 25px);
    height: min(6vw, 25px);
  }
}
#lifelog h2 p:before, #lifelog h4 p:before {
  padding-right: 10px;
  background-image: url("../img/slash_left.svg");
}
#lifelog h2 p:after, #lifelog h4 p:after {
  padding-left: 0;
  background-image: url("../img/slash_right.svg");
}
#lifelog h2 {
  position: relative;
  display: table;
  margin-top: 2em;
  margin-left: min(7.9vw, 100px);
}
@media screen and (max-width: 768px) {
  #lifelog h2 {
    margin: 1em auto;
  }
}
#lifelog h2 p {
  font-size: min(2.8vw, 24px);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #lifelog h2 p {
    font-size: min(4.5vw, 22px);
    letter-spacing: min(0.8vw, 6px);
  }
}
#lifelog h2 .outline {
  color: #fef8ad;
}
#lifelog h2.underline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: min(100vw, 1100px);
  height: 7px;
  background-image: url("../img/line_wavy_white.png");
  background-repeat: repeat-x;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #lifelog h2.underline:after {
    bottom: 32%;
    width: 100%;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog h2.underline:after {
    height: 4px;
  }
}
#lifelog h3 {
  display: table;
  margin: 0 auto;
  padding: 2.5em 0 1.5em;
  font-size: min(2.8vw, 26px);
  color: #607f9d;
  text-align: center;
  letter-spacing: 6px;
}
@media screen and (max-width: 768px) {
  #lifelog h3 {
    padding: 1.8em 0 1.5em;
    font-size: min(5vw, 24px);
  }
}
#lifelog h3 span {
  display: block;
  padding: 0 1em 3px;
}
#lifelog h3:before, #lifelog h3:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background-image: url("../img/line_wavy_blue.png");
  background-repeat: repeat-x;
  background-size: contain;
}
#lifelog h4 {
  padding-bottom: 2em;
}
#lifelog h4 p {
  font-size: min(2.8vw, 26px);
  font-weight: 500;
}
#lifelog h4 .outline {
  color: #facbcb;
}
#lifelog h4 span.font-maru {
  letter-spacing: 3px;
}
#lifelog h4 .lead {
  display: block;
  padding-top: 5px;
  font-size: min(1.6vw, 16px);
  font-weight: 300;
  letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
  #lifelog h4 {
    font-size: min(5.8vw, 28px);
    line-height: 1.4;
  }
  #lifelog h4 .lead {
    padding-top: 10px;
    font-size: min(3.7vw, 18px);
  }
}
#lifelog .mainwrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: 2s;
}
#lifelog .mainwrap .mainarea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  /* navigation */
}
@media screen and (max-width: 768px) {
  #lifelog .mainwrap .mainarea {
    display: block;
  }
}
#lifelog .mainwrap .mainarea .mainimg {
  width: min(78vw, 890px);
}
@media screen and (max-width: 768px) {
  #lifelog .mainwrap .mainarea .mainimg {
    width: min(95vw, 720px);
    padding: 2.5% 0 0 3.3%;
  }
}
#lifelog .mainwrap .mainarea .subtxt {
  align-self: flex-start;
  width: min(1.2vw, 12px);
  padding: 0 1%;
}
#lifelog .mainwrap .mainarea header {
  align-self: flex-end;
  padding: 0 1% 0 2%;
}
#lifelog .mainwrap .mainarea header nav {
  animation: slideInYmainarea 1s cubic-bezier(0.25, 1, 1, 1) forwards;
}
#lifelog .mainwrap .mainarea header nav a {
  color: #bb6e6c !important;
}
#lifelog .mainwrap .mainarea header nav ul li {
  margin-bottom: 5px;
  display: table;
  font-size: min(1.6vw, 16px);
  letter-spacing: 3px;
}
#lifelog .mainwrap .mainarea header nav ul li:first-child img {
  width: 22px;
}
#lifelog .mainwrap .mainarea header nav ul li:not(:first-child) a:hover {
  opacity: 1;
}
#lifelog .mainwrap .mainarea header nav ul li:not(:first-child):after {
  content: "";
  display: block;
  height: 0.5px;
  background-color: transparent;
  transition: 0.2s;
}
#lifelog .mainwrap .mainarea header nav ul li:not(:first-child):hover:after {
  background-color: #bb6e6c;
  animation: underlineX 0.2s cubic-bezier(0.1, 1, 1, 1) forwards;
}
#lifelog .mainwrap .mainarea header nav ul li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #lifelog .mainwrap .mainarea header .menubar {
    position: fixed;
    top: 0.8em;
    right: 1.2em;
    width: 30px;
    padding: 0 5px 5px;
    cursor: pointer;
    z-index: 999;
    overflow: hidden;
  }
  #lifelog .mainwrap .mainarea header .menubar span {
    display: block;
    height: 3px;
    margin: 2px 0;
    border-bottom: solid 3px #bb6e6c;
  }
  #lifelog .mainwrap .mainarea header nav {
    position: fixed;
    top: 5px;
    right: 0;
    width: min(50vw, 200px);
    height: 50vh;
    padding: 3em 0 0 2em;
    background-color: #fff;
    border-radius: 0 0 0 40px;
    z-index: 9999;
    animation: none;
    transition: 1.8s;
    transform: translateX(1000px);
  }
  #lifelog .mainwrap .mainarea header nav.open_action {
    transition: 0.8s;
    transform: translateX(0);
  }
  #lifelog .mainwrap .mainarea header nav .menubar_close {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 25px;
    height: 25px;
    cursor: pointer;
  }
  #lifelog .mainwrap .mainarea header nav .menubar_close span {
    position: absolute;
    top: 4px;
    display: block;
    width: 20px;
    height: 3px;
    border-bottom: solid 3px #bb6e6c;
  }
  #lifelog .mainwrap .mainarea header nav .menubar_close span:nth-child(1) {
    transform: rotate(45deg);
    margin-left: 3px;
    right: 0;
  }
  #lifelog .mainwrap .mainarea header nav .menubar_close span:nth-child(2) {
    transform: rotate(-45deg);
    margin-bottom: -5px;
    right: 2px;
  }
  #lifelog .mainwrap .mainarea header nav ul li {
    margin-bottom: 5px;
    display: table;
    font-size: 16px;
    letter-spacing: 3px;
  }
  #lifelog .mainwrap .mainarea header nav ul li:first-child img {
    width: 22px;
  }
  #lifelog .mainwrap .mainarea header nav ul li:not(:first-child) a:hover {
    opacity: 1;
  }
  #lifelog .mainwrap .mainarea header nav ul li:not(:first-child):after {
    content: "";
    display: block;
    height: 0.5px;
    background-color: transparent;
    transition: 0.2s;
  }
  #lifelog .mainwrap .mainarea header nav ul li:not(:first-child):hover:after {
    background-color: #bb6e6c;
    animation: underlineX 0.2s cubic-bezier(0.1, 1, 1, 1) forwards;
  }
  #lifelog .mainwrap .mainarea header nav ul li:last-child {
    margin-bottom: 0;
  }
}
#lifelog #about {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#lifelog #about .imagecolumn {
  position: relative;
  height: min(95vw, 860px);
  margin-top: 3em;
}
#lifelog #about .imagecolumn .spnone img {
  position: absolute;
}
#lifelog #about .imagecolumn .spnone img:nth-child(1) {
  width: min(25vw, 216px);
  top: 0;
  right: 72%;
}
#lifelog #about .imagecolumn .spnone img:nth-child(2) {
  width: min(42vw, 450px);
  top: 5%;
  right: 39%;
}
#lifelog #about .imagecolumn .spnone img:nth-child(3) {
  width: min(21vw, 193px);
  bottom: 68%;
  right: 2%;
}
#lifelog #about .imagecolumn .spnone img:nth-child(4) {
  width: min(35vw, 348px);
  top: 41%;
  right: 62%;
}
#lifelog #about .imagecolumn .spnone img:nth-child(5) {
  width: min(32vw, 300px);
  top: 37%;
  left: 53%;
}
@media screen and (max-width: 768px) {
  #lifelog #about .imagecolumn {
    height: min(340vw, 2100px);
    margin-top: 2em;
  }
  #lifelog #about .imagecolumn .pcnone img {
    position: absolute;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(1) {
    width: min(90vw, 580px);
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(2) {
    width: min(18vw, 120px);
    bottom: 60.5%;
    right: 6%;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(3) {
    width: min(77vw, 525px);
    bottom: 42%;
    right: 20%;
    z-index: 99;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(4) {
    width: min(45vw, 290px);
    top: 47%;
    right: 4%;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(5) {
    width: min(45vw, 300px);
    left: 3%;
    bottom: 22%;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(6) {
    width: min(71vw, 500px);
    left: 19.5%;
    bottom: 8%;
    z-index: 99;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog #about .imagecolumn .pcnone img:nth-child(5) {
    bottom: 24%;
  }
  #lifelog #about .imagecolumn .pcnone img:nth-child(6) {
    bottom: 11%;
  }
}
#lifelog #about .imagecolumn img[data-delay="1"] {
  transition-delay: 0.1s;
}
#lifelog #about .imagecolumn img[data-delay="2"] {
  transition-delay: 0.6s;
}
#lifelog #about .imagecolumn img[data-delay="3"] {
  transition-delay: 0.8s;
}
#lifelog #about .imagecolumn img[data-delay="4"] {
  transition-delay: 0.6s;
}
#lifelog #about .imagecolumn img[data-delay="5"] {
  transition-delay: 1.4s;
}
@media screen and (max-width: 768px) {
  #lifelog #about .imagecolumn img {
    transition-delay: 0.2s;
  }
  #lifelog #about .imagecolumn img[data-delay="2"] {
    transition-delay: 0.5s;
  }
  #lifelog #about .imagecolumn img[data-delay="3"] {
    transition-delay: 0.8s;
  }
  #lifelog #about .imagecolumn img[data-delay="4"] {
    transition-delay: 0.1s;
  }
  #lifelog #about .imagecolumn img[data-delay="5"] {
    transition-delay: 1.2s;
  }
  #lifelog #about .imagecolumn img[data-delay="6"] {
    transition-delay: 1.6s;
  }
}
#lifelog #about .imagecolumn h3 {
  display: unset;
  position: absolute;
  top: 10%;
  right: 10%;
  margin: 0;
  padding: 0;
  font-size: min(1.6vw, 16px);
  font-weight: 300;
  color: #404042;
  text-align: left;
  letter-spacing: 2px;
  line-height: 1.6;
}
#lifelog #about .imagecolumn h3:before, #lifelog #about .imagecolumn h3:after {
  content: none;
}
#lifelog #about .imagecolumn h3 span {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0.2% 13px 0.2% 15px;
  background-color: #fff;
  transform-origin: left;
  transform: scaleX(0) translateX(-5%);
}
#lifelog #about .imagecolumn h3.active {
  transition-delay: 1s;
}
#lifelog #about .imagecolumn h3.active span {
  animation: slideInXmarker 0.9s cubic-bezier(0.1, 0.1, 0.1, 1) forwards;
  animation-delay: 1s;
}
@media screen and (max-width: 768px) {
  #lifelog #about .imagecolumn h3 {
    top: 25.5%;
    left: 2%;
    right: auto;
    font-size: min(3.75vw, 18px);
    letter-spacing: min(0.1vw, 2px);
  }
  #lifelog #about .imagecolumn h3 span {
    padding: 0.4% 6px;
  }
  #lifelog #about .imagecolumn h3.active {
    transition-delay: 0s;
  }
  #lifelog #about .imagecolumn h3.active span {
    animation: slideInXmarker 0.6s cubic-bezier(0.1, 0.1, 0.1, 1) forwards;
    animation-delay: 0s;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog #about .imagecolumn h3 {
    letter-spacing: 0;
  }
}
#lifelog .weekly, #lifelog .monthly {
  max-width: min(97vw, 950px);
  margin: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly, #lifelog .monthly {
    max-width: min(99vw, 760px);
  }
}
#lifelog .weekly h5, #lifelog .monthly h5 {
  position: absolute;
  top: 3%;
  left: 8vw;
  padding: 0 1em 5px;
  color: #fff;
  font-size: min(2.2vw, 22px);
  font-weight: 400;
  letter-spacing: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly h5, #lifelog .monthly h5 {
    left: 3vw;
    padding: 1px 1em 5px;
    font-size: min(3.5vw, 18px);
    letter-spacing: 2px;
    font-weight: 300;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .weekly h5, #lifelog .monthly h5 {
    top: 1.5%;
    padding: 2px 1em 5px;
  }
}
#lifelog .weekly .button, #lifelog .monthly .button {
  position: absolute;
  width: min(6vw, 60px);
  top: 2%;
  right: 7vw;
  z-index: 99;
  transition-delay: 1.2s;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .button, #lifelog .monthly .button {
    width: min(8vw, 45px);
    right: 4vw;
  }
}
#lifelog .weekly .wrap, #lifelog .monthly .wrap {
  position: relative;
  width: 100%;
  height: min(67vw, 601px);
  z-index: 9;
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .wrap, #lifelog .monthly .wrap {
    height: 72vw;
  }
}
#lifelog .weekly .wrap .comment01, #lifelog .weekly .wrap .comment02, #lifelog .weekly .wrap .comment03, #lifelog .weekly .wrap .comment04, #lifelog .weekly .wrap .comment05, #lifelog .monthly .wrap .comment01, #lifelog .monthly .wrap .comment02, #lifelog .monthly .wrap .comment03, #lifelog .monthly .wrap .comment04, #lifelog .monthly .wrap .comment05 {
  position: absolute;
}
#lifelog .weekly .wrap .comment01 img, #lifelog .weekly .wrap .comment02 img, #lifelog .weekly .wrap .comment03 img, #lifelog .weekly .wrap .comment04 img, #lifelog .weekly .wrap .comment05 img, #lifelog .monthly .wrap .comment01 img, #lifelog .monthly .wrap .comment02 img, #lifelog .monthly .wrap .comment03 img, #lifelog .monthly .wrap .comment04 img, #lifelog .monthly .wrap .comment05 img {
  position: relative;
  z-index: 99;
}
#lifelog .weekly .wrap .comment01 p, #lifelog .weekly .wrap .comment02 p, #lifelog .weekly .wrap .comment03 p, #lifelog .weekly .wrap .comment04 p, #lifelog .weekly .wrap .comment05 p, #lifelog .monthly .wrap .comment01 p, #lifelog .monthly .wrap .comment02 p, #lifelog .monthly .wrap .comment03 p, #lifelog .monthly .wrap .comment04 p, #lifelog .monthly .wrap .comment05 p {
  position: absolute;
  top: 9%;
  font-size: min(1.5vw, 14px);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: 1px;
  z-index: 999;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .wrap .comment01 p, #lifelog .weekly .wrap .comment02 p, #lifelog .weekly .wrap .comment03 p, #lifelog .weekly .wrap .comment04 p, #lifelog .weekly .wrap .comment05 p, #lifelog .monthly .wrap .comment01 p, #lifelog .monthly .wrap .comment02 p, #lifelog .monthly .wrap .comment03 p, #lifelog .monthly .wrap .comment04 p, #lifelog .monthly .wrap .comment05 p {
    font-size: min(2.2vw, 13px);
    letter-spacing: 0;
    line-height: 1.3;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .weekly .wrap .comment01 p, #lifelog .weekly .wrap .comment02 p, #lifelog .weekly .wrap .comment03 p, #lifelog .weekly .wrap .comment04 p, #lifelog .weekly .wrap .comment05 p, #lifelog .monthly .wrap .comment01 p, #lifelog .monthly .wrap .comment02 p, #lifelog .monthly .wrap .comment03 p, #lifelog .monthly .wrap .comment04 p, #lifelog .monthly .wrap .comment05 p {
    line-height: 1.2;
  }
}
#lifelog .weekly .mainimg, #lifelog .monthly .mainimg {
  width: min(89vw, 800px);
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(67vw, 601px);
  transition-delay: 0.4s;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .mainimg, #lifelog .monthly .mainimg {
    width: min(90vw, 730px);
  }
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .mainimg, #lifelog .monthly .mainimg {
    width: min(96vw, 730px) !important;
    height: 72vw;
  }
}
#lifelog .weekly {
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  #lifelog .weekly {
    margin-bottom: 2em;
  }
}
#lifelog .weekly h5 {
  background-image: url("../img/spec_week02.svg");
}
#lifelog .weekly .wrap .comment01 {
  top: 18%;
  left: 0;
}
#lifelog .weekly .wrap .comment01 p {
  left: 37%;
}
#lifelog .weekly .wrap .comment01 img {
  width: min(21vw, 190px);
}
#lifelog .weekly .wrap .comment02 {
  top: 2%;
  left: 38%;
  margin: auto;
}
#lifelog .weekly .wrap .comment02 p {
  left: 35%;
}
#lifelog .weekly .wrap .comment02 img {
  width: min(25vw, 235px);
}
#lifelog .weekly .wrap .comment03 {
  top: 13%;
  right: 0;
}
#lifelog .weekly .wrap .comment03 p {
  left: 27%;
}
#lifelog .weekly .wrap .comment03 img {
  width: min(32vw, 290px);
}
#lifelog .weekly .wrap .comment04 {
  bottom: 16%;
  left: 5%;
}
#lifelog .weekly .wrap .comment04 p {
  top: 7% !important;
  left: 29%;
}
#lifelog .weekly .wrap .comment04 img {
  width: min(33vw, 300px);
}
#lifelog .weekly .wrap .comment05 {
  bottom: 34%;
  right: 3%;
}
#lifelog .weekly .wrap .comment05 p {
  left: 37%;
}
#lifelog .weekly .wrap .comment05 img {
  width: min(23vw, 215px);
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .wrap .comment01 p {
    left: 9.5vw;
  }
  #lifelog .weekly .wrap .comment01 img {
    width: min(27vw, 175px);
  }
  #lifelog .weekly .wrap .comment02 {
    left: 36%;
  }
  #lifelog .weekly .wrap .comment02 p {
    left: 32%;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .weekly .wrap .comment02 p {
    top: 12% !important;
  }
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .wrap .comment02 img {
    width: min(32.5vw, 220px);
  }
  #lifelog .weekly .wrap .comment03 {
    top: 17%;
  }
  #lifelog .weekly .wrap .comment03 p {
    top: 1.5vw !important;
    left: 9vw;
  }
  #lifelog .weekly .wrap .comment03 img {
    width: min(39.5vw, 280px);
  }
  #lifelog .weekly .wrap .comment04 {
    bottom: 15%;
    left: 0;
  }
  #lifelog .weekly .wrap .comment04 p {
    top: 1.6vw !important;
    left: 11.5vw;
  }
  #lifelog .weekly .wrap .comment04 img {
    width: min(43vw, 280px);
  }
  #lifelog .weekly .wrap .comment05 {
    bottom: 33%;
    right: 0;
  }
  #lifelog .weekly .wrap .comment05 p {
    left: 36%;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .weekly .wrap .comment05 p {
    left: 34%;
  }
}
@media screen and (max-width: 768px) {
  #lifelog .weekly .wrap .comment05 img {
    width: min(28vw, 200px);
  }
}
#lifelog .monthly h5 {
  background-image: url("../img/spec_month02.svg");
}
#lifelog .monthly .wrap .comment01 {
  top: 18%;
  left: 0;
}
#lifelog .monthly .wrap .comment01 p {
  top: 8% !important;
  left: 36%;
}
#lifelog .monthly .wrap .comment01 img {
  width: min(26vw, 230px);
}
#lifelog .monthly .wrap .comment02 {
  top: 2%;
  left: 42%;
  margin: auto;
}
#lifelog .monthly .wrap .comment02 p {
  left: 35%;
}
#lifelog .monthly .wrap .comment02 img {
  width: min(25vw, 230px);
}
#lifelog .monthly .wrap .comment03 {
  top: 20%;
  right: 0;
}
#lifelog .monthly .wrap .comment03 p {
  top: 56% !important;
  left: 38%;
}
#lifelog .monthly .wrap .comment03 img {
  width: min(24vw, 217px);
}
#lifelog .monthly .wrap .comment04 {
  bottom: 14%;
  right: 3%;
}
#lifelog .monthly .wrap .comment04 p {
  top: 45% !important;
  left: 33%;
}
#lifelog .monthly .wrap .comment04 img {
  width: min(27vw, 250px);
}
@media screen and (max-width: 768px) {
  #lifelog .monthly .wrap .comment01 {
    top: 18%;
    left: 0;
  }
  #lifelog .monthly .wrap .comment01 p {
    top: 9% !important;
    left: 36%;
  }
  #lifelog .monthly .wrap .comment01 img {
    width: min(34vw, 220px);
  }
  #lifelog .monthly .wrap .comment02 {
    top: 2%;
    left: 42%;
    margin: auto;
  }
  #lifelog .monthly .wrap .comment02 p {
    top: 14% !important;
    left: 35%;
  }
  #lifelog .monthly .wrap .comment02 img {
    width: min(35vw, 220px);
  }
  #lifelog .monthly .wrap .comment03 {
    top: 20%;
    right: 0;
  }
  #lifelog .monthly .wrap .comment03 p {
    top: 56% !important;
    left: 38%;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .monthly .wrap .comment03 p {
    top: 8.8vw !important;
  }
}
@media screen and (max-width: 768px) {
  #lifelog .monthly .wrap .comment03 img {
    width: min(31vw, 207px);
  }
  #lifelog .monthly .wrap .comment04 {
    bottom: 11%;
    right: 3%;
  }
  #lifelog .monthly .wrap .comment04 p {
    top: 48% !important;
    left: 33%;
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .monthly .wrap .comment04 {
    bottom: 5.5vw;
  }
  #lifelog .monthly .wrap .comment04 p {
    top: 8vw !important;
  }
}
@media screen and (max-width: 768px) {
  #lifelog .monthly .wrap .comment04 img {
    width: min(37vw, 240px);
  }
}
#lifelog .otherdata {
  padding-top: 3em;
}
#lifelog .otherdata h4 {
  width: min(89vw, 800px);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata h4 {
    width: min(90vw, 730px);
  }
}
#lifelog .otherdata h4 img {
  width: min(100vw, 95px);
}
#lifelog .otherdata h4.underline:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  width: min(73vw, 680px);
  height: 7px;
  margin: 0 auto;
  background-image: url("../img/line_wavy_white.png");
  background-repeat: repeat-x;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata h4 {
    width: min(97vw, 530px);
    flex-direction: column;
    align-items: normal;
  }
  #lifelog .otherdata h4 p {
    font-size: min(4.7vw, 28px);
    letter-spacing: min(0.1vw, 4px);
  }
  #lifelog .otherdata h4 p .outline {
    font-size: min(6.3vw, 35px);
    letter-spacing: min(0.1vw, 3.5px);
  }
  #lifelog .otherdata h4 img {
    width: min(22vw, 90px);
    padding-left: 2%;
  }
  #lifelog .otherdata h4.underline:after {
    width: min(95vw, 530px);
  }
}
@media screen and (max-width: 768px) and (max-width: 425px) {
  #lifelog .otherdata h4.underline:after {
    height: 5.5px;
  }
}
#lifelog .otherdata .pagelineup {
  width: min(89vw, 800px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 2em;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .pagelineup {
    width: min(90vw, 730px);
  }
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .pagelineup {
    width: min(80vw, 650px);
    flex-direction: column;
    align-items: center;
  }
}
#lifelog .otherdata .pagelineup > div {
  position: relative;
  width: 49%;
  padding-bottom: 1%;
  text-align: center;
  letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .pagelineup > div {
    width: 100%;
  }
}
#lifelog .otherdata .pagelineup > div dt p {
  padding: 0.5em 0;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .pagelineup > div dt p {
    font-size: min(4.3vw, 16px);
    letter-spacing: min(0.1vw, 1px);
  }
}
#lifelog .otherdata .pagelineup > div:nth-child(1) {
  transition-delay: 0.2s;
}
#lifelog .otherdata .pagelineup > div:nth-child(1) dt p {
  background-color: #f6e1b4;
}
#lifelog .otherdata .pagelineup > div:nth-child(2) {
  transition-delay: 0.6s;
}
#lifelog .otherdata .pagelineup > div:nth-child(2) dt p {
  background-color: #c2d4e7;
}
#lifelog .otherdata .pagelineup > div:nth-child(3) {
  transition-delay: 0.8s;
}
#lifelog .otherdata .pagelineup > div:nth-child(3) dt p {
  background-color: #f1d3d8;
}
#lifelog .otherdata .pagelineup > div:nth-child(4) {
  transition-delay: 1.1s;
}
#lifelog .otherdata .pagelineup > div:nth-child(4) dt p {
  background-color: #f6e1b4;
}
#lifelog .otherdata .pagelineup > div dd {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  width: 85%;
  margin: 0 auto;
  padding: 0.3em 0;
  font-size: min(1.9vw, 16px);
  font-weight: 300;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  box-shadow: 2px 2px 2px rgba(64, 64, 66, 0.15), 3px 4px 15px rgba(64, 64, 66, 0.25);
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .pagelineup > div dd {
    font-size: min(3.7vw, 14px);
  }
}
#lifelog .otherdata .diarydetail {
  width: min(89vw, 800px);
  margin: 0 auto;
  padding: 2em 0 12em;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .diarydetail {
    width: min(90vw, 730px);
  }
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .diarydetail {
    padding: 2em 0 9em;
  }
}
#lifelog .otherdata .diarydetail > div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: solid 1px #404042;
}
#lifelog .otherdata .diarydetail > div:nth-child(4) {
  border-bottom: none !important;
}
#lifelog .otherdata .diarydetail > div dt {
  width: 30%;
  padding: 1em 0;
  text-align: center;
  align-self: stretch;
  align-content: center;
  font-size: min(1.6vw, 16px);
  font-weight: 300;
  background-color: #dfdfe8;
  border-right: solid 1px #404042;
}
#lifelog .otherdata .diarydetail > div dd {
  width: 70%;
  padding: 1em 2em;
  align-self: stretch;
  align-content: center;
  font-size: min(1.6vw, 16px);
  font-weight: 300;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  #lifelog .otherdata .diarydetail > div {
    flex-direction: column;
  }
  #lifelog .otherdata .diarydetail > div dt, #lifelog .otherdata .diarydetail > div dd {
    width: auto;
    padding: 1em 5px;
    font-size: min(3.7vw, 14px);
    text-align: center;
    word-break: keep-all;
  }
  #lifelog .otherdata .diarydetail > div dt {
    border-right: none;
    border-bottom: solid 1px #404042;
  }
}
#lifelog .floatbox {
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
  will-change: opacity, visibility;
  position: fixed;
  display: block;
  top: 2px;
  left: 2px;
  width: min(23vw, 228px);
  height: min(32vw, 280px);
  margin: 0 auto;
  padding-top: min(5vw, 49px);
  padding-left: min(2.2vw, 21px);
  padding-right: 0;
  padding-bottom: 0;
  background-image: url("../img/lls_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 99999;
  text-align: center;
}
#lifelog .floatbox p {
  position: relative;
  display: block;
}
#lifelog .floatbox p.top {
  padding-bottom: 5%;
  font-size: min(1.3vw, 12px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
#lifelog .floatbox p.mid {
  font-size: min(1.9vw, 18px);
  font-weight: 500;
  z-index: 99;
}
#lifelog .floatbox p.fot {
  margin-top: -5.5%;
  padding-left: 8px;
}
#lifelog .floatbox p.fot.outline {
  font-size: min(3.5vw, 32px);
  color: #fef8ad;
  font-weight: 500;
  letter-spacing: -2px;
}
#lifelog .floatbox p.fot.outline span:nth-child(1) {
  margin: 0 3px 0 0;
}
#lifelog .floatbox p.fot.outline span:nth-child(2) {
  margin: 0 -4px 0;
}
#lifelog .floatbox img {
  width: min(19vw, 200px);
  margin-top: -15%;
  margin-left: 2px;
  z-index: 9;
}
#lifelog .slidebox {
  width: min(89vw, 800px);
  margin: 0 auto;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox {
    width: min(90vw, 730px);
  }
}
#lifelog .slidebox p {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
  font-size: min(2vw, 20px);
  letter-spacing: 3px;
}
#lifelog .slidebox p img {
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox p {
    font-size: min(4.4vw, 16px);
  }
  #lifelog .slidebox p img {
    width: min(12vw, 60px);
    margin-right: 15px;
  }
}
#lifelog .slidebox:nth-child(2) p img {
  width: min(7.8vw, 67px);
}
#lifelog .slidebox:nth-child(3) p img {
  width: min(9vw, 80px);
}
#lifelog .slidebox:nth-child(4) p img {
  width: min(9.5vw, 80px);
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox:nth-child(2) p img {
    width: min(9vw, 52px);
  }
  #lifelog .slidebox:nth-child(3) p img {
    width: min(11vw, 62px);
  }
  #lifelog .slidebox:nth-child(4) p img {
    width: min(11.5vw, 62px);
  }
}
#lifelog .slidebox .slick {
  position: relative;
}
#lifelog .slidebox .slick .arrow_prev, #lifelog .slidebox .slick .arrow_next {
  position: absolute;
  width: 40px;
  height: 100%;
  top: 0;
  z-index: 9;
  background-image: url(../img/pagenation_wh.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox .slick .arrow_prev, #lifelog .slidebox .slick .arrow_next {
    width: 20px;
  }
}
#lifelog .slidebox .slick .arrow_prev {
  left: 0;
  transform: scale(-1, 1);
}
#lifelog .slidebox .slick .arrow_next {
  right: 0;
}
#lifelog .slidebox .slick:after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  right: -3%;
  width: min(1.2vw, 12px);
  height: 300px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox .slick:after {
    content: none;
  }
}
#lifelog .slidebox .slick.hobby:after {
  background-image: url(../img/howto_01_txt.svg);
}
#lifelog .slidebox .slick.favorite:after {
  background-image: url(../img/howto_02_txt.svg);
}
#lifelog .slidebox .slick.condition:after {
  background-image: url(../img/howto_03_txt.svg);
}
#lifelog .slidebox .subcontents {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
}
#lifelog .slidebox .subcontents .hobby_thumbnail, #lifelog .slidebox .subcontents .favorite_thumbnail, #lifelog .slidebox .subcontents .condition_thumbnail {
  width: min(50vw, 450px);
}
#lifelog .slidebox .subcontents .hobby_thumbnail .slick-slide, #lifelog .slidebox .subcontents .favorite_thumbnail .slick-slide, #lifelog .slidebox .subcontents .condition_thumbnail .slick-slide {
  padding-right: 5px;
}
#lifelog .slidebox .subcontents .comment {
  padding-bottom: 0;
  font-size: min(1.5vw, 14px);
  font-weight: 300;
  text-align: right;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox .subcontents {
    justify-content: center;
  }
  #lifelog .slidebox .subcontents .comment {
    font-size: min(3.7vw, 14px);
    text-align: center;
  }
}
#lifelog .slidebox h4 {
  padding-bottom: 2.5em;
  font-size: 16px;
  letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox h4 {
    font-size: min(3.6vw, 16px);
  }
}
#lifelog .slidebox .wrap {
  position: relative;
}
#lifelog .slidebox .wrap .arrow_prev, #lifelog .slidebox .wrap .arrow_next {
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  z-index: 9;
  background-image: url(../img/pagenation_bk.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox .wrap .arrow_prev, #lifelog .slidebox .wrap .arrow_next {
    width: 10px;
  }
}
#lifelog .slidebox .wrap .arrow_prev {
  left: 10px;
  transform: scale(-1, 1);
}
#lifelog .slidebox .wrap .arrow_next {
  right: 10px;
}
#lifelog .slidebox .wrap .slick_lineup {
  width: 88%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #lifelog .slidebox .wrap .slick_lineup {
    width: 100%;
  }
}
#lifelog footer {
  margin: 6em auto;
  padding: 0 3em;
}
@media screen and (max-width: 768px) {
  #lifelog footer {
    padding: 0 1em;
  }
}/*# sourceMappingURL=style.css.map */