/* 全体 */
html {
  color: #3e3e3e;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 2;
}
.wrapper {
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
/* width control */
.header {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
/* #main-image{
    max-width: 1280px;
    margin: 0 auto;
} */
.container .container-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 3rem 4rem 3rem;
}
@media screen and (max-width: 724px) {
  /* 320pxまでの幅の場合に適応される */
  .container .container-inner {
    padding: 3rem 1rem 3rem;
      }
  }
/* parts */
img {
  width: 100%;
}
/* header */
.header-upper {
  padding: 1.6rem 1.0rem 3rem;
}
.link-note {
  display: block;
  width: 96px;
  margin-right: auto;
}
.header h1 {
  max-width: 278px;
  margin: 0 auto;
}
/* navigation */
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s;
}
.overlay.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.menu-trigger {
  display: flex;
  align-items: center;
  width: 156px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 5px;
  right: -1.4rem;
  z-index: 100;
  transition: transform 0.5s;
}
.menu-trigger .menu-text{
  font-size: 1.6rem;
  margin-right: 0.4rem;
}
.menu-trigger .menu-icon{
  width: 36px;
  height: 28px;
  transform: translateX(0);
}
.menu-trigger.active {
  /* transform: translateX(-250px); */
}
.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
}
.menu-trigger.active{
  color: #FFF;
}
.menu-trigger.active span {
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}

nav {
  width: 250px;
  height: 100%;
  padding-top: 150px;
  background-color: rgb(76, 96, 202, 0.96);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(250px);
  transition: all 0.5s;
}
nav.open {
  transform: translateZ(0);
}
nav li {
  color: #fff;
  text-align: left;
  padding: 0.2rem 0 0 2rem;
}
nav li.page-link a:before{
  font-family: "Font Awesome 5 Free";
  content: "\f249";
  margin-right: 0.2rem;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
nav li.anchor-link a:before{
  font-family: "Font Awesome 5 Free";
  content: "・";
  margin-right: 0.2rem;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.g-nav ul li {
  font-size: 0.9rem;
}
.g-nav ul li a {
  display: block;
  margin: 0 0.4rem;
  text-decoration: none;
  color: #FFF;
}
/* container sub-title */
.sub-title {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 3rem;
}
.sub-title:after {
  position: absolute;
  bottom: 14px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #4c60ca;
}
/* 想い */
#message {
  background: #f9fcfc;
}
.main-message {
  font-size: 1.6rem;
}
/* copy */
#copy .container-inner {
  padding-bottom: 0;
}
/* security */
#security {
  background: #eff6f7;
}
#security .container-inner {
  padding-bottom: 0;
}
.security-list {
  list-style: none;
}
.security-list li {
  margin-bottom: 2rem;
}
.security-list span.list-title {
  font-weight: bold;
  font-size: 1.1rem;
}
/* Contact */
#contact {
  background: #4c60ca;
}
#contact h2.sub-title {
  color: #fff;
}
.sub-title:after {
  background: #b1b8da;
}

/* Message Bottom */
#message .container {
  position: relative;
  background: #2c3e50;
  height: 50vh;
}

#message .wave {
  position: relative;
  height: 50px;
  width: 100%;
  background: #f9fcfc;
  bottom: 0;
}

#message .wave::before,
.wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

#message .wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
#message .wave::after {
  width: 55%;
  height: 100%;
  background-color: #f9fcfc;
  left: -1.5%;
  top: 40%;
}
/* security upper */
#security .wave-upper {
  position: relative;
  background: #fff;
  height: 5vh;
}

#security .wave-upper::after {
  content: "";
  border-top-left-radius: 40% 30%;
  border-top-right-radius: 40% 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #eff6f7;
  height: 13%;
}
/* security bottom */
#security .container {
  position: relative;
  background: #eff6f7;
  height: 50vh;
}

#security .wave-bottom {
  position: relative;
  height: 125px;
  width: 100%;
  background: #eff6f7;
  bottom: 0;
}

#security .wave-bottom::before,
.wave-bottom::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

#security .wave-bottom::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
#security .wave-bottom::after {
  width: 55%;
  height: 100%;
  background-color: #eff6f7;
  left: -1.5%;
  top: 40%;
}
/* ======================================================== */
/* 各ページコンテンツ */
/* ======================================================== */
/* 共通 */
#page-content .container-inner{
  max-width: 980px;
}
/* 個人情報 */
.privacy-contact{
  margin-top: 4rem;
  text-align: right;
}
/* FAQ */
dt{
  /*border-top: 1px solid #CCC;*/
  font-weight: bold;
}
dd{
  margin-bottom: 3rem;
}
dd > p{
  background: #fafafa;
  padding: 1rem 0.5rem;
  color: #000;
}
dl{
  border-bottom: 1px solid #CCC;
}
/* news */
.news-title {
  margin-bottom: 0px;
}
.news-date {
  margin-top: 0px;
  text-align: right;
  font-weight:normal;
  font-size: 0.95em;
}
.news-head {
  opacity: 1;
}
.news-head.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  display: none;
}

.news-body {
  opacity: 1;
}
.news-body.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  display: none;
}
.list-btn {
  margin-top: 20px;
  text-align: center;
}
.list-btn.is-btn-hidden{
  display:none;
}
.list-btn button {
  background-color: #4c60ca;
  color:#fff;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  height: 32px;
  line-height: 32px;
  width: 120px;
}


/* デザインB（タブレット） */
@media screen and (min-width: 600px) {
  /* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
  /* header */
  .header-upper {
    display: flex;
    justify-content: space-between;
    align-items: unset;
  }
  .header h1 {
    margin: 0;
  }
  .link-note {
    display: block;
    width: 96px;
    margin-left: auto;
    margin-right: 0;
}
  #company .container-content {
    display: flex;
    justify-content: space-around;
  }
  #company .container-content > div {
    width: 48%;
  }
}
/* デザインC(PC) */
@media screen and (min-width: 1025px) {
  /* PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述 */
}