@charset "UTF-8";

/* CSS Document */
.container {
  animation-name: Areadisshome;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  opacity: 0%;
}

@keyframes Areadisshome {
  from {
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}

/*-------------------------
コンテンツタイトル
-------------------------*/
.inner .conttl {
  position: relative;
  display: block;
  margin: 0 auto 2em auto;
  padding: 0 0 .5em 0;
  width: 7em;
  color: #0C5ECD;
  text-align: center;
  font-size: 2.265em;
  line-height: 1.2;
  font-family: 'Outfit', serif;
  font-weight: 400;
  letter-spacing: .1em;
}

.inner .conttl::first-letter {
  color: #1A9CEC;
}

.inner .conttl::after {
  content: '';
  display: block;
  position: absolute;
  margin: auto;
  width: .4em;
  height: .4em;
  bottom: -.19em;
  right: 0;
  left: 0;
  background: #1EADEF;
  transform: rotate(45deg) skew(25deg, 25deg);
}

.inner .conttl:before {
  content: '';
  position: absolute;
  width: 0%;
  background: #1EADEF;
  height: 1px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  animation-name: ConttlLine;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes ConttlLine {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/*タイトル補足文*/
.inner .supple {
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: .1em;
  color: #0C5ECD
}

.inner .conttl+div,
.inner .conttl+form {
  animation-name: Areadiss;
  animation-duration: .7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0%;
}

@keyframes Areadiss {
  from {
    margin-top: 0;
    opacity: 0%;
  }

  to {
    margin-top: 0;
    opacity: 100%;
  }
}

/*-------------------------
テキスト
-------------------------*/
.container .inner p {
  letter-spacing: .07em;
}

/*-------------------------
リスト
-------------------------*/
.flexlist,
.flexlist_c {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

.flexlist {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  /* Safari etc. */
  -ms-align-items: stretch;
  align-items: stretch;
}

.flexlist_c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

ol.dot li {
  text-align: left;
}

ol.dot li {
  padding-left: 1em;
}

ol.dot>li:before {
  content: "・";
  margin-left: -1em;
}

/*-------------------------
ボタン
-------------------------*/
a.btn,
button.btn {
  display: block;
  position: relative;
  padding: 1em 1.5em;
  margin: 2em auto 0;
  background: -webkit-linear-gradient(left #1A9CEC, #0C5ECD);
  background: -moz-linear-gradient(left #1A9CEC, #0C5ECD);
  background: linear-gradient(to right, #1A9CEC, #0C5ECD);
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.75em;
  line-height: 1.1;
  letter-spacing: .05em;
  border-radius: 100vh;
}

a.btn::before,
button.btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  margin: auto;
  width: .7em;
  height: .7em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><path fill="%23FFFFFF" d="M9.86,6.13l-6-6a.54.54,0,0,0-.75,0,.53.53,0,0,0,0,.75l5.6,5.6-5.6,5.6a.53.53,0,0,0,0,.75.54.54,0,0,0,.75,0l6-6A.51.51,0,0,0,9.86,6.13Z" /></svg>') center right / contain no-repeat;
  transition: .3s;
}

a.btn.back::before,
button.btn.back::before {
  right: auto;
  left: 1em;
  transform: scale(-1, 1);
}

.link_tw {
  background: url("../img/tw_w.png") center / 58% auto no-repeat #1DA1F2;
  border-radius: 100vh;
  border: 1px solid #1DA1F2
}

.link_sns-x {
  background: url("../img/sns-x_w.png") center / 50% auto no-repeat #000000;
  border-radius: 100vh;
  border: 1px solid #000000
}

/*-------------------------
ページャー
-------------------------*/
.pagerlist {
  margin: 3em auto 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  gap: 0 1.25em;
}

.pagerlist > * {
  position: relative;
  font-size: 1.5em;
  letter-spacing: .1em;
}


.pagerlist .tohome {
  width: 2.25em;
  height: 2.25em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.218 21.578"><path fill="%230C5ECD" d="M11.11,0,0,7.938V21.578H8.749V14.29h4.721v7.288h8.749V7.938Z" /></svg>') center / auto .7em no-repeat;
}

.pagerlist .tohome::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #1EADEF;
  transform: rotate(45deg);
}

.pagerlist .toback {
  padding-left: 1.1em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%231EADEF" d="m23.38,32c-.31,0-.63-.12-.87-.36l-14.77-14.77c-.48-.48-.48-1.26,0-1.74L22.51.36c.48-.48,1.26-.48,1.74,0s.48,1.26,0,1.74l-13.9,13.9,13.9,13.9c.48.48.48,1.26,0,1.74-.24.24-.56.36-.87.36Z" /></svg>') center left .2em / auto .7em no-repeat;
}

.pagerlist span.toback {
  color:#999;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23999999" d="m23.38,32c-.31,0-.63-.12-.87-.36l-14.77-14.77c-.48-.48-.48-1.26,0-1.74L22.51.36c.48-.48,1.26-.48,1.74,0s.48,1.26,0,1.74l-13.9,13.9,13.9,13.9c.48.48.48,1.26,0,1.74-.24.24-.56.36-.87.36Z" /></svg>') center left .2em / auto .7em no-repeat;
}

.pagerlist .tonext {
  padding-right: 1.1em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%231EADEF" d="m8.73,31.72c.31,0,.63-.12.87-.36l14.77-14.77c.48-.48.48-1.26,0-1.74L9.6.08c-.48-.48-1.26-.48-1.74,0s-.48,1.26,0,1.74l13.9,13.9-13.9,13.9c-.48.48-.48,1.26,0,1.74.24.24.56.36.87.36Z" /></svg>') center right .2em / auto .7em no-repeat;
}
.pagerlist span.tonext {
  color:#999;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23999999" d="m8.73,31.72c.31,0,.63-.12.87-.36l14.77-14.77c.48-.48.48-1.26,0-1.74L9.6.08c-.48-.48-1.26-.48-1.74,0s-.48,1.26,0,1.74l13.9,13.9-13.9,13.9c-.48.48-.48,1.26,0,1.74.24.24.56.36.87.36Z" /></svg>') center right .2em / auto .7em no-repeat;
}

/*-------------------------
背景
-------------------------*/
[class^="bg_"] {
  z-index: 0;
  position: absolute;
  margin: auto;
}

/*-------------------------
liver
-------------------------*/
.liver .bg_w,
.liver .bg_b {
  width: 120%;
  height: 32em;
  top: 22em;
  left: -10%;
  transform-origin: center center;
}

.liver .bg_w {
  background: #fff;
  transform: rotate(2deg);
}

.liver .bg_b {
  background: #92DAF8;
  transform: rotate(-2deg);
}

.liver .image_area {
  overflow: hidden;
  border-radius: 100vh;
  box-shadow: 0px 3px 6px 1px rgba(30, 173, 239, .5);
  -webkit-box-shadow: 0px 3px 6px 1px rgba(30, 173, 239, .5);
  -moz-box-shadow: 0px 3px 6px 1px rgba(30, 173, 239, .5);
  transition: .3s;
}

.liver .image_area img {
  width: 100%;
  height: auto;
  border-radius: 100vh;
  border: .5em solid #fff;
  transition: .3s;
}

.liver .lname {
  display: block;
  position: relative;
  float: right;
  margin-right: .25em;
  padding: .8em;
  background: #fff;
  width: 9em;
  text-align: center;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.1;
  transform: rotate(5deg);
  transform-origin: right bottom;
  box-shadow: 0px 1px 4px 1px rgba(30, 173, 239, .5);
  -webkit-box-shadow: 0px 1px 4px 1pxx rgba(30, 173, 239, .5);
  -moz-box-shadow: 0px 1px 4px 1px rgba(30, 173, 239, .5);
  transition: .3s;
}

.liver .lname::first-letter {
  color: #1A9CEC;
}

.liver .lname::before {
  content: "";
  position: absolute;
  width: .7em;
  height: .7em;
  top: 0;
  bottom: 0;
  left: -.35em;
  margin: auto;
  background: -webkit-linear-gradient(135deg, #1EADEF, #0C5ECD);
  background: -moz-linear-gradient(135deg, #1EADEF, #0C5ECD);
  background: linear-gradient(135deg, #1EADEF, #0C5ECD);
  transform: rotate(135deg) skew(25deg, 25deg);
  transition: .3s;
}

/*hover*/
.liver a:hover img {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

.liver a:hover .image_area {
  box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 1);
}

.liver a:hover .image_area img {
  filter: brightness(110%);
}

.liver a:hover .lname {
  color: #1A9CEC;
  box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 1);
}

.liver a:hover .lname::before {
  left: -.1em;
}

/*-------------------------
news
-------------------------*/
.news .newslist a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1.8rem 0;
  border-bottom: 1px solid #919FA5
}

.news .newslist a>* {
  display: inline-block;
  position: relative;
  overflow: hidden;
  letter-spacing: .05em;
}

.news .newslist a .date {
  font-size: 1.5em;
  font-family: 'Outfit', serif;
  font-weight: 300;
  width: 13rem;
}

.news .newslist a .newsttl {
  font-size: 1.25em;
  color: #111;
  width: calc(100% - 13rem);
}

/*+++++++++++++++++++++++++++
mediaクエリ【PC】
+++++++++++++++++++++++++++*/
@media (min-width: 641px) {

  /*-------------------------
	ボタン
	-------------------------*/
  a.btn,
  button.btn {
    max-width: 13em;
  }

  a.btn:hover,
  button.btn:hover {
    background: #fff;
    color: #0C5ECD;
    box-shadow: 0 0 0 1px rgba(12, 94, 205, 1) inset;
    -moz-box-shadow: 0 0 0 1px rgba(12, 94, 205, 1) inset;
    -webkit-box-shadow: 0 0 0 1px rgba(12, 94, 205, 1) inset;
  }

  a.btn:hover::before,
  button.btn:hover::before {
    right: .8em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><path fill="%230C5ECD" d="M9.86,6.13l-6-6a.54.54,0,0,0-.75,0,.53.53,0,0,0,0,.75l5.6,5.6-5.6,5.6a.53.53,0,0,0,0,.75.54.54,0,0,0,.75,0l6-6A.51.51,0,0,0,9.86,6.13Z" /></svg>') center right / contain no-repeat;
  }

  a.btn.back:hover::before,
  button.btn.back:hover::before {
    right: auto;
    left: .8em;
  }

  /*-------------------------
	ページャー
	-------------------------*/
  .pagerlist .tohome:hover {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22.218 21.578"><path fill="%231A9CEC" d="M11.11,0,0,7.938V21.578H8.749V14.29h4.721v7.288h8.749V7.938Z" /></svg>') center / auto .7em no-repeat;
  }

  .pagerlist a.toback:hover {
    color: #1A9CEC;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%231EADEF" d="m23.38,32c-.31,0-.63-.12-.87-.36l-14.77-14.77c-.48-.48-.48-1.26,0-1.74L22.51.36c.48-.48,1.26-.48,1.74,0s.48,1.26,0,1.74l-13.9,13.9,13.9,13.9c.48.48.48,1.26,0,1.74-.24.24-.56.36-.87.36Z" /></svg>') center left / auto .7em no-repeat;
  }

  .pagerlist a.tonext:hover {
    color: #1A9CEC;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%231EADEF" d="m8.73,31.72c.31,0,.63-.12.87-.36l14.77-14.77c.48-.48.48-1.26,0-1.74L9.6.08c-.48-.48-1.26-.48-1.74,0s-.48,1.26,0,1.74l13.9,13.9-13.9,13.9c-.48.48-.48,1.26,0,1.74.24.24.56.36.87.36Z" /></svg>') center right / auto .7em no-repeat;
  }

  .link_tw:hover {
    background: url("../img/tw_b.png") center / 58% auto no-repeat #fff;
  }

  .link_sns-x:hover {
    background: url("../img/sns-x_b.png") center / 50% auto no-repeat #fff;
  }
}

/*+++++++++++++++++++++++++++
mediaクエリ【スマホ】
+++++++++++++++++++++++++++*/
@media screen and (max-width: 640px) {

  /*-------------------------
	ボタン
	-------------------------*/
  a.btn,
  button.btn {
    width: 75%;
  }

  .link_tw:active {
    background: url("../img/tw_b.png") center / 58% auto no-repeat #fff;
  }

  .link_sns-x:active {
    background: url("../img/sns-x_b.png") center / 50% auto no-repeat #fff;
  }

  /*-------------------------
	liver
	-------------------------*/
  .liver .bg_w,
  .liver .bg_b {
    top: 18em;
  }

  .liver .bg_w {
    transform: rotate(3deg);
  }

  .liver .bg_b {
    transform: rotate(-3deg);
  }

  /*-------------------------
	news
	-------------------------*/
  .news .newslist a {
    padding: 1.5rem 0;
  }

  .news .newslist a .date {
    margin-bottom: .1em;
    width: 100%;
  }

  .news .newslist a .newsttl {
    width: 100%;
  }
}