@charset "utf-8";
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}
:root {
  --color1 : #329bec;
  --font_color1 : #333;
}
ol,
ul {
  list-style-type: none;
}
a:hover {
  cursor: pointer;
}
img {
  vertical-align: bottom;
  width: 100%;
}
html {
  font-family: "Noto Sans JP", sans-serif;
  color: #141414;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  user-select: none;
}
.inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
/*  */
#header .top .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .top p {
  font-size: 13px;
}
#header .top ul {
  display: flex;
  gap: 1px;
}
#header .top ul a {
  font-size: 13px;
  padding: 10px 20px;
  display: block;
  background: #ddd;
}
#header .bottom {
  border-top: 1px solid #eee;
}
#header a.logo {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-size: 28px;
  display: flex;
  align-items: center;
}
#header a.logo span {
  font-size: 12px;
  margin: 0 0 0 10px;
  position: relative;
  top: 2px;
}
#header .bottom .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .bottom ul {
  display: flex;
}
#header .bottom ul a {
  display: block;
  padding: 30px 15px;
}
/*  */
#mv {
  background: var(--color1);
  height: 400px;
  background: url(../img/mv.jpg) center center/cover no-repeat;
  text-shadow: 1px 1px 3px rgba(0,0,0,.3);
}
#mv h1 br {
  display: none;
}
#mv h1 {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}
#mv h1 span {
  font-size: 48px;
  display: block;
}
#mv p {
  color: #fff;
  font-weight: 900;
  margin: 1em 0 0;
  font-size: 20px;
}
/*  */
section {
  border-top: 1px solid #e2e2e2;
  padding: 100px 0;
}
section header {
  margin: 0 0 80px;
}
section header h1 {
  font-size: 32px;
  font-weight: 700;
}
section header h1::after {
  content: attr(data-en);
  display: block;
  color: var(--color1);
  font-size: 24px;
  margin: 0 0 0 5px;
}
/*  */
#point ul {
  display: grid;
  gap: 80px;
}
#point li {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 80px;
  align-items: center;
  counter-increment: n;
}
#point li:nth-of-type(2n) .img {
  order: 2;
}
#point .img img {
  width: 100%;
}
#point .content h2 {
  font-size: 24px;
  font-weight: 700;
}
#point .content h2::before {
  content: '0'counter(n)'.';
  color: var(--color1);
  font-weight: 900;
  display: block;
}
#point .content p {
  margin: 1em 0 0;
  color: var(--font_color1);
}
/*  */
#msg .body {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 80px;
}
#msg h2 {
  font-weight: 900;
  font-size: 24px;
}
#msg p {
  margin: 1em 0 0;
}
#msg .right {
  position: relative;
  overflow: hidden;
}
#msg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 100%;
  min-height: 100%;
}
/*  */
#system table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#system th,
#system td {
  border: 1px solid #e6e6e6;
  border-left: 2px solid #ddd;
  border-right: 2px solid #ddd;
  padding: 20px;
}
#system td {
  font-size: 14px;
}
#system thead {
  font-weight: 900;
  text-align: center;
}
#system thead tr th:nth-of-type(1) {
  border: none;
}
#system thead tr:nth-of-type(2) {
  color: #fff;
}
#system thead tr:nth-of-type(2) th {
  padding: 10px 0;
}
#system thead tr:nth-of-type(2) th:nth-of-type(2) {
  background: rgba(49, 155, 236, .4);
}
#system thead tr:nth-of-type(2) th:nth-of-type(3) {
  background: rgba(49, 155, 236, .7);
}
#system thead tr:nth-of-type(2) th:nth-of-type(4) {
  background: rgba(49, 155, 236, 1);
}
#system thead tr:nth-of-type(2) span {
  font-size: 200%;
  margin: 0 3px 0 0;
}
/* #system td ul {
  list-style-type: disc;
  margin: 0 0 0 1em;
} */
 #system tbody tr:not(:nth-of-type(1),:nth-of-type(2)) {
  counter-increment: no;
 }
 #system tbody tr:not(:nth-of-type(1)) th::before {
  content: '例'counter(no)'：';
 }
 #system tbody td.title {
  text-align: center;
  font-size: 20px;
  /* font-weight: 900; */
 }
 #system tbody tr:nth-of-type(2n) {
  background: #fafafa;
 }
 #system td li {
  position: relative;
  padding: 0 0 0 1em;
 }
 #system td li::before {
  content: '';
  display: block;
  background: #329bec;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  position: absolute;
  top: 11px;
  left: 4px;
 }
 /*  */
 #flow .inner {
  max-width: 900px;
 }
 #flow ol {
  display: grid;
  gap: 40px;
 }
 #flow li {
  border: 1px solid #e6e6e6;
  padding: 40px;
  counter-increment: no;
  position: relative;
 }
 #flow li:not(:last-of-type):after {
  content: '';
  display: block;
  width: 20px;
  height: 41px;
  background: #329bec;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,0);
 }
 #flow h2 {
  color: #329bec;
  font-weight: 900;
  font-size: 24px;
  margin: 0 0 .5em;
  text-align: center;
 }
 #flow h2::before {
  content: counter(no)'. ';
 }
 #flow p:not(:nth-of-type(1)) {
  margin: 1em 0 0;
 }
 /*  */
 #voice {
  display: none;
 }
 #voice .body > ul {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 80px;
 }
 #voice .body > ul > li {
  background: #f7f7f7;
  padding: 40px;
  position: relative;
 }
 #voice .body > ul > li::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #f7f7f7 transparent transparent transparent;
  border-width: 50px 50px 0px 0px;
  position: absolute;
  top: 100%;
  left: 80px;
 }
 #voice h2 {
  font-size: 24px;
 }
 #voice p {
  margin: 1em 0 0;
 }
 #voice ul.data {
  display: flex;
  flex-direction: row-reverse;
 }
 #voice ul.data li {
  margin: 1em 0 0 .5em;
  position: relative;
 }
 /*  */
 #info table {
  width: 100%;
  border-collapse: collapse;
 }
 #info th,
 #info td {
  border: 2px solid #e6e6e6;
  padding: 20px;
 }
 #info th {
  width: 33%;
 }
 #info span.small {
  display: block;
  margin: .5em 0 0;
  color: #777;
  font-size: 13px;
 }
 /*  */
 #faq h2 {
  font-size: 24px;
  font-weight: 900;
  margin: 3em 0 1em;
 }
 #faq h2:first-of-type {
  margin-top: 0;
 }
 #faq dl {
  display: grid;
  gap: 50px;
 }
 #faq dl div {
  display: grid;
  gap: 20px;
 }
 #faq dt {
  font-weight: 700;
  display: flex;
  gap: 10px;
 }
 #faq dt::before {
  content: 'Q';
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: #329bec;
  color: #fff;
  font-weight: 900;
  display: grid;
  place-content: center;
 }
 #faq dd {
  background: #f7f7f7;
  color: #777;
  padding: 30px;
  font-size: 14px;
 }
 /*  */
 #acs ul {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 80px;
 }
 #acs h2 {
  font-weight: 900;
  font-size: 32px;
 }
 #acs img {
  margin: 20px 0 0;
 }
 #acs h3 {
  font-weight: 900;
  font-size: 24px;
  margin: 1em 0 0;
  border-top: 1px solid #e6e6e6;
  padding: 1em 0 0;
 }
 #acs h3:nth-of-type(1) {
  padding: none;
  border: none;
 }
 #acs p {
  margin: 0 0 0 1em;
 }
 #acs address p:nth-of-type(2) {
  margin: 1em 0 0 1em;
 }
 /*  */
 #free .inner {
  max-width: 580px;
 }
 #free h2 {
  font-weight: 900;
  font-size: 24px;
  margin: 2em 0 .5em;
 }
 #free p {
  margin: 1em 0 0;
 }
 #free p:last-of-type {
  margin: 3em 0 0;
 }
 #free a {
  display: block;
  background: #329bec;
  max-width: 300px;
  color: #fff;
  font-weight: 700;
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
  margin: 0 auto;
 }
 /*  */
 #footer {
  border-top: 5px solid #e6e6e6;
  padding: 100px 0;
 }
 #footer nav ul {
  display: flex;
 }
 #footer nav li {
  margin: 0 1em 0 0;
 }
 #footer nav a:hover {
  text-decoration: underline;
 }
 #footer address {
  margin: 40px 0 0;
 }
 #footer address h1 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-size: 24px;
 }
 #footer address h2 {
  font-weight: 900;
 }
 #footer address ul {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 80px;
  margin: 20px 0 0;
 }
 #footer small {
  font-size: 10px;
  color: #999;
  display: block;
  margin: 40px 0 0;
 }
 /*  */
 @media screen and (max-width:768px) {
  #header .top .inner {
    display: block;
  }
  #header .top p {
    text-align: center;
    padding: 20px 0;
  }
  #header .top ul {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    text-align: center;
    background: #fff;
    z-index: 100;
  }
  #header .top ul a {
    padding: 20px 0;
  }
  #header a.logo {
    padding: 20px;
    font-size: 24px;
    flex-direction: column;
    align-items: center;
  }
  #header .bottom .inner {
    display: block;
    padding: 0;
  }
  #header .bottom ul {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    text-align: center;
    background: #e2e2e2;
    gap: 1px;
    border-top: 1px solid #e2e2e2;
  }
  #header .bottom ul a {
    background: #fff;
    padding: 15px 0;
    font-size: 12px;
  }
  /*  */
  #mv h1 {
    font-size: 20px;
  }
  #mv h1 br {
    display: block;
  }
  #mv h1 span {
    font-size: 48px;
    line-height: 1.3;
  }
  #mv p {
    font-size: 16px;
    margin: 2em 0 0;
    line-height: 2;
  }
  /*  */
  #point li {
    display: block;
  }
  #point .content {
    margin: 20px 0 0;
  }
  /*  */
  #msg .body {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 80px;

    grid-template-columns: repeat(1,1fr);
    gap: 40px;
  }
  #msg .left {

    order: 2;
  }
  #msg h2 {
    font-weight: 900;
    font-size: 24px;
  }
  #msg p {
    margin: 1em 0 0;
  }
  #msg .right {
    position: relative;
    overflow: hidden;

    height: 300px;
    /* order: 1; */
  }
  #msg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
  }
  /*  */
  #system .inner {
    padding: 0 0 0 20px;
  }
  #system .body {
    overflow-x: auto;
  }
  #system table {
    width: 1000px;
  }
  /*  */
  #acs ul {
    grid-template-columns: repeat(1,1fr);
  }
  #acs h2 {
    font-size: 24px;
  }
  #acs h3 {
    font-size: 20px;
  }
  /*  */
  #footer nav ul {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background: #e2e2e2;
    gap: 1px;
    text-align: center;
    border: 1px solid #e2e2e2;
  }
  #footer nav li {
    margin: 0;
  }
  #footer nav a {
    display: block;
    background: #fff;
    padding: 15px 0;
    font-size: 14px;
  }
  #footer address ul {
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
  }
 }