@charset "UTF-8";
html, body {
  font-size: 13px;
  line-height: 1.8; }

a {
  text-decoration: none;
  color: #333; }

footer {
  text-align: center;
  padding: 16px 0;
  font-family: Arial, Helvetica, "sans-serif";
  background: #fff; }
  footer h2 {
    padding: 16px 0; }
  footer img {
    max-width: 114px;
    margin: 0 auto; }
  footer p {
    margin: 0 0 20px 0;
    font-size: 12px; }

img {
  vertical-align: middle; }

.pc {
  display: none; }

.sp {
  display: block; }

.fade-out {
  opacity: 1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s; }

.fade-in {
  opacity: 0; }

.slider {
  clear: both;
  margin-bottom: 0%; }
  .slider div {
    padding: 0 0 0 0; }
    .slider div img {
      width: 100%;
      margin: 0 0%; }

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  max-height: 100%;
  z-index: -1; }

.x-scroll {
  width: 200%;
  overflow: hidden; }

.x-scroll_inner {
  display: flex;
  animation: 15s linear infinite xScroll; }

@keyframes xScroll {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); }
  /* .x-scroll_block 1つ分の幅だけ動かす */ }
.x-scroll_block {
  display: flex;
  width: 200%; }

.x-scroll_item {
  width: 100%; }

.x-scrolltxt {
  width: 200%;
  overflow: hidden; }

.x-scrolltxt_inner {
  display: flex;
  animation: 15s linear infinite xScrolltxt; }

@keyframes xScrolltxt {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); }
  /* .x-scroll_block 1つ分の幅だけ動かす */ }
.x-scrolltxt_block {
  display: flex;
  width: 200%; }

.x-scrolltxt_item {
  width: 70%; }

.x-scrollpht {
  width: 280%;
  overflow: hidden; }

.x-scrollpht_inner {
  display: flex;
  animation: 10s linear infinite xScrollpht; }

@keyframes xScrollpht {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-50%); }
  /* .x-scroll_block 1つ分の幅だけ動かす */ }
.x-scrollpht_block {
  display: flex;
  width: 400%; }

.x-scrollpht_item {
  width: 100%; }

.x-scrollpht2 {
  width: 400%;
  overflow: hidden; }

.x-scrollpht2_inner {
  display: flex;
  animation: 20s linear infinite xScrollpht2; }

@keyframes xScrollpht2 {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-75%); }
  /* .x-scroll_block 1つ分の幅だけ動かす */ }
.x-scrollpht2_block {
  display: flex;
  width: 300%; }

.x-scrollpht2_item {
  width: 100%; }

header {
  width: 100%; }
  header .pht {
    position: relative; }
    header .pht h1 {
      position: absolute;
      top: 46%;
      text-align: center; }
      header .pht h1 img {
        width: 50%;
        margin: 0 auto; }
  header .subttl {
    position: absolute;
    top: -5%;
    text-align: center; }
    header .subttl img {
      width: 90%;
      margin: 0 auto; }
  header dl {
    padding-top: 8%;
    text-align: center;
    margin: 0 5% 10% 5%; }
    header dl dt {
      margin-bottom: 5%; }
  header ul {
    display: flex;
    width: 84%;
    margin: 0 auto 15% auto; }
    header ul li {
      margin: 0 2%; }
      header ul li a {
        display: block;
        line-height: 0;
        border-radius: 50px;
        border: 2px solid #000000;
        padding: 10% 15%; }
    header ul li:nth-child(1) a {
      background: #ffffc6; }
    header ul li:nth-child(2) a {
      background: #e1fff8; }

main h3 {
  text-align: center;
  margin-bottom: 2%; }
  main h3 img {
    width: 60%;
    margin: 0 auto; }
main .topArea {
  position: relative; }
  main .topArea .ttlArea {
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0; }
    main .topArea .ttlArea dt {
      position: absolute;
      width: 100%;
      top: 20%;
      text-align: center; }
      main .topArea .ttlArea dt img {
        width: 50%;
        margin: 0 auto; }
    main .topArea .ttlArea dd.en {
      position: absolute;
      top: 3%;
      right: 3%;
      width: 2%; }
    main .topArea .ttlArea dd.jp {
      position: absolute;
      top: -5%;
      left: 10%;
      width: 6%; }
main .sdArea {
  position: relative;
  background: #ffffc6;
  z-index: 100;
  padding: 3% 0 5% 0; }
  main .sdArea h4 {
    text-align: center; }
    main .sdArea h4 img {
      width: 36%;
      padding: 1% 0;
      margin: 0 auto; }
  main .sdArea .pickup {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 20%;
    z-index: 2; }
  main .sdArea .pht {
    border: 2px solid #000;
    margin: 0 16%; }
    main .sdArea .pht .slick-slide img {
      display: inline-block; }
main .tdArea {
  position: relative;
  background: #ffffc6;
  z-index: 100;
  padding-bottom: 5%; }
  main .tdArea h4 {
    text-align: center; }
    main .tdArea h4 img {
      width: 36%;
      padding: 1% 0;
      margin: 0 auto; }
  main .tdArea .pht div div div div {
    width: 95%; }
main .txtArea p {
  padding: 5% 8% 8% 8%; }
main .txtArea .linkArea {
  letter-spacing: 2px;
  margin: 0 8% 12% 8%;
  overflow: hidden; }
  main .txtArea .linkArea dl {
    padding: 10px 0;
    clear: both; }
  main .txtArea .linkArea dt {
    float: left;
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 3px;
    line-height: 1.5;
    width: 60%; }
    main .txtArea .linkArea dt b {
      font-weight: 600; }
    main .txtArea .linkArea dt span {
      font-weight: 400;
      font-size: 13px; }
    main .txtArea .linkArea dt img {
      width: 100%; }
  main .txtArea .linkArea dd {
    float: right;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 11px;
    margin-bottom: 6px;
    padding-top: 20px;
    text-align: center;
    width: 32%; }
    main .txtArea .linkArea dd a {
      background: #cfd8d3;
      color: #000;
      padding: 0 15px;
      font-size: 13px;
      font-family: 'Oswald', sans-serif;
      font-weight: 300;
      display: block;
      line-height: 1;
      text-align: center; }
    main .txtArea .linkArea dd span {
      letter-spacing: 0; }
main #section1 {
  padding-top: 10%; }
  main #section1 .topArea .ttlArea dt {
    top: 20%; }
main #section2 {
  padding-top: 10%; }
  main #section2 .topArea .ttlArea dt {
    top: 40%; }
  main #section2 .topArea .ttlArea dd.jp {
    top: 20%;
    z-index: 1000; }
  main #section2 .tdArea {
    padding-top: 3%; }
    main #section2 .tdArea .pht {
      margin-left: -15%; }
main #section3 {
  padding-top: 10%; }
  main #section3 .topArea .ttlArea dt {
    top: 40%; }
  main #section3 .topArea .ttlArea dd.jp {
    top: 60%;
    left: 85%;
    z-index: 1000; }
  main #section3 .tdArea {
    padding-top: 3%;
    background: none; }
    main #section3 .tdArea .pht {
      width: 80%; }
main #section4 {
  padding-top: 10%; }
  main #section4 .topArea .ttlArea dt {
    top: 40%; }
main #section5 {
  padding-top: 10%; }
  main #section5 .topArea .ttlArea dt {
    top: 20%; }
  main #section5 .topArea .ttlArea dd.jp {
    top: -3%; }
main #section6 {
  padding-top: 10%; }
  main #section6 .topArea .ttlArea dd.jp {
    top: -3%; }
main #section7 {
  padding-top: 10%;
  background: linear-gradient(to bottom, #fff, #fff 5%, #e1fff8 5%, #e1fff8 68%, #fff 68%, #fff); }
  main #section7 .topArea .pht {
    margin-left: -15%; }
    main #section7 .topArea .pht div div div div {
      margin-right: 5%; }
  main #section7 .topArea .ttlArea dt {
    top: 40%; }
  main #section7 .topArea .ttlArea dd.jp {
    top: -3%; }
main #section8 {
  padding-top: 10%; }
  main #section8 .topArea {
    background: #e1fff8;
    padding: 10% 0 20% 0; }
    main #section8 .topArea .pht {
      border: 2px solid #000;
      margin: 0 8%; }
    main #section8 .topArea .pickup {
      position: absolute;
      top: 80%;
      left: 16%;
      width: 20%;
      z-index: 2; }
    main #section8 .topArea .slick-slide img {
      display: inline-block; }
    main #section8 .topArea .ttlArea dt {
      top: 35%; }
    main #section8 .topArea .ttlArea dd.jp {
      top: -5%; }
main #section9 {
  padding-top: 10%;
  padding-top: 3%; }
  main #section9 .topArea .ttlArea dt {
    top: 40%; }
  main #section9 .topArea .ttlArea dd.jp {
    top: 20%;
    z-index: 1000; }
  main #section9 .sdArea {
    padding-top: 3%;
    background: #e1fff8; }
    main #section9 .sdArea .pickup {
      top: 70%; }
    main #section9 .sdArea .pht {
      margin: 0 18%; }
  main #section9 .txtArea {
    background: #e1fff8; }
  main #section9 .fdpht {
    background: #e1fff8; }
    main #section9 .fdpht img {
      width: 85%; }
main #section10 {
  padding-top: 10%; }
  main #section10 .topArea {
    margin-bottom: 8%; }
    main #section10 .topArea .ttlArea dt {
      top: 40%; }
    main #section10 .topArea .ttlArea dd.jp {
      top: -3%; }
  main #section10 .sdArea {
    padding-top: 3%;
    background: #fff; }
    main #section10 .sdArea .pht {
      margin: 0 12%; }
main #btwn {
  background: #e1fff8;
  padding: 5% 0;
  margin-bottom: 15%;
  overflow: hidden; }