@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&family=Noto+Sans+JP:wght@400..700&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css');

/* ----------------------------------------------------------------------------------------------------
*  main layout
* --------------------------------------------------------------------------------------------------*/
:root {
  --vw: 1vw;
}

/*--- font ---*/
.note {
	font-size: 80%;}

/*--- layout ---*/
ul[class] {
	list-style: none;}
ul.note-list {
	clear:both;}
ul.note-list li {
	font-size: 80%;
	list-style:none;
	text-indent: -1em;
	padding-left: 1em;
	margin: 0;
	text-align: left;
}
ul.note-list li a {
	color: inherit;
	text-decoration: underline;}
ul.note-list li a:hover {text-decoration:none;}
.note-list-m li {
	text-indent: -1em;
	margin-left: 1em;}
.ta-left {
	text-align: left !important;}
.ta-center {
	text-align: center !important;}
.ta-right {
	text-align: right !important;}
.content-main img,
.content-main svg {
	max-width: 100%;
	height: auto;
  vertical-align: bottom;
}
.is-nav-active .content-main {
	overflow: inherit;
}
.is-nav-active .content-main::before,
.is-nav-active .content-main::after,
.is-nav-active .top-nav {
  position: fixed;
}
.is-nav-end .content-main::before,
.is-nav-end .content-main::after,
.is-nav-end .top-nav {
  top: auto;
  bottom: 0;
}
.content-main{
  font-size: 28px;
  font-size: min(100vw*28/750, 700px*28/750);
  font-size: min(var(--vw)*100*28/750, 550px*28/750);
	background: #81cde3;
	font-family: "Zen Maru Gothic", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	overflow: hidden;
	position: relative;
}
.content-main::before {
	content: "";
	position: absolute;
	background: url("../images/bg01.png") 100% 50% no-repeat;
  background-size: contain;
	z-index: 0;
	top: 0;
	right: 50%;
	width: 701px;
	height: 100%;
	height: 100vh;
	pointer-events: none;
  transform: translateX(-350px);
  transform: translateX(-250px);
}
.content-main::after {
	content: "";
	position: absolute;
	background: url("../images/bg02.png") 0% 50% no-repeat;
  background-size: contain;
	z-index: 0;
	top: 0;
	left: 50%;
	width: 701px;
	height: 100%;
	height: 100vh;
	pointer-events: none;
  transform: translateX(250px);
}
.sec-finish-outer:not(.is-finish-end) {
  position: relative;
  height: calc(2em*1280/28);
  margin: 0 0 calc(1em*209/28);
  box-sizing: border-box;
  display: block;
  z-index: 5;
}
.sec-finish {
  height: calc(1em*1280/28);
  position: sticky;
  top: 0;
	background: url("../images/done_bg01.png") 50% 0% no-repeat;
  background-size: contain;
  display: block;
  padding: calc(1em*493/28) 0 0;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.sec-finish::before {
  content: "";
  width: calc(1em*597/28);
  height: calc(1em*256/28);
  position: absolute;
  top: calc(1em*198/28);
  left: calc(1em*70/28);
	background: url("../images/done_im02.png") 0% 0% no-repeat;
  background-size: contain;
  display: block;
  opacity: 0;
}
.sec-finish.is-done::before {
  animation: .6s anime-finish2 1s ease-in-out forwards;
}
.sec-finish .-ttl {
  width: calc(1em*331/28);
  opacity: 0;
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(1em*26/28);
  transform: translateX(-50%);
}
.sec-finish.is-done .-ttl {
  animation: .6s anime-finish .1s linear forwards;
}
@keyframes anime-finish {
	0% {transform: translateX(-50%) scale(4);opacity: 0}
	1% {opacity: 1}
	40%  {transform: translateX(-50%) scale(.8);}
	70% {transform: translateX(-50%) scale(1.5);}
	100%  {transform: translateX(-50%) scale(1);opacity: 1}
}
@keyframes anime-finish2 {
	0% {transform: translateX(-10%);opacity: 0}
	100%  {transform: translateX(0%);opacity: 1}
}
#finish-present {
  height: calc(1em*357/28);
  display: none;
  margin: 0 0 calc(1em*58/28);
  padding: 0 calc(1em*75/28) calc(1em*85/28);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
#finish-present::after {
  content: "";
  width: 100%;
  height: calc(1em*187/28);
	background: url("../images/done_bg02.png") 50% 100% no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: calc(1em*171/28);
  z-index: 0;
}
#finish-present .-img {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.noScroll {
  overflow: hidden;
  overflow-y: clip;
}
#finish-present .-img::before {
  background-color: rgba(255,255,255,.8);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  z-index: 3;
}
.is-done-start.sec-finish #finish-present .-img::before {
  animation: .8s anime-kiran 3s linear;
}
@keyframes anime-kiran {
  0% {
    transform: scale(2) rotate(25deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(25deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(25deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(25deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}
#finish-present .-img::after {
  content: "";
  width: 100%;
  height: 100%;
	background: url("../images/done_im01_b.png") 50% 100% no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: inset(0 100% 100% 0);
clip-path: inset(0 100% 100% 0);
clip-path: inset(100% 0 0 0);
  -webkit-transition: .5s all 0.6s ease-in;
transition: 1.4s all 1.3s steps(11, end);
}
.is-done-start.sec-finish #finish-present .-img::after {
  webkit-clip-path: inset(0);
clip-path: inset(0);
}
.sec-gauge-outer {
  position: relative;
  width: calc(1em*718/28);
  height: calc(1em*214/28);
  display: block;
  margin: 0 auto 0;
  bottom: 0;
}
.sec-gauge {
	background: url("../images/gauge_bg01.png") 50% 0% no-repeat;
  background-size: contain;
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  display: block;
  width: calc(1em*718/28);
  height: calc(1em*214/28);
  transform: translateX(-50%) translateY(100%);
  transition: transform .2s cubic-bezier(0.12, 0, 0.39, 0);
  text-align: center;
}
.sec-gauge.is-gauge-start {
  position: fixed;
  transform: translateX(-50%);
}
.sec-gauge.is-gauge-hide {
  transform: translateX(-50%) translateY(100%);
}
.sec-gauge.is-gauge-end {
  position: absolute;
  transform: translateX(-50%);
}
.sec-gauge .-txt {
  font-size: calc(1em*65/28);
  margin-bottom: calc(1em*27/65);
}
.sec-gauge .-txt img {
  width: auto;
  height: 1em;
}
#gauge {
	background: url("../images/gauge_bg02.png") 0% 50% no-repeat;
  background-size: auto 100%;
  border: 1px solid #fff;
  width: calc(1em*616/28);
  height: calc(1em*50/28);
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.is-gauge-end #gauge {
  animation: .4s anime-gauge 0s alternate infinite;
}
@-webkit-keyframes anime-gauge {
	0% { box-shadow: 0 0 0 #faea18;}
	100% { box-shadow: 0 0 1.5em #faea18;}
}
#gauge > span {
  width: 0%;
  height: 100%;
  position: absolute;
  display: block;
  left: 0;
  top: 0;
	background: url("../images/gauge_bg03.png") 0% 50% no-repeat;
  background-size: auto 100%;
}


/* ckeck-point */
.ckeck-point__trigger {
  position: relative;
  margin: calc(1em*60/28) calc(1em*-88/28) 0 calc(1em*-38/28);
}
.ckeck-point__pin {
  min-width: 100%;
  position: absolute;
  position: sticky;
  top: 0;
}
.ckeck-point__clip {
position: relative;
    overflow: hidden;
}
.ckeck-point__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  transition: transform 0.2s ease-out;
}
.ckeck-point__list .c-card-point {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20rem;
}
.ckeck-point {
  min-width: calc(1em*750/28);
  height: 100vh;
  height: calc(1em*1104/28);
	background: url("../images/bg07.png") no-repeat 55% 0 / contain;
  padding: calc(1em*90/28) calc(1em*140/28) 0 calc(1em*90/28);
  box-sizing: border-box;
}
.ckeck-point:nth-child(2n) {
	background-image: url("../images/bg07_b.png");
}
.ckeck-point .-img.img-border01 {
  margin: -1.4% -1% -2.8%;
}
.ckeck-point .-img {
  position: relative;
}
.ckeck-point .-img figcaption {
  font-size: calc(1em*21/28);
  color: #02a102;
  position: absolute;
  left: 1.2em;
  bottom: 1.1em;
  line-height: calc(1em*28/21);
  text-align: left;
  letter-spacing: -0.1em;
}

/* ----------------------------------------------------------------------------------------------------
*  scrollAnime
* --------------------------------------------------------------------------------------------------*/
.scrollTrigger.fadeIn {
	opacity: 0;
}
.scrollTrigger.fadeIn.is-active {
	animation: fadeIn .5s cubic-bezier(.23,1,.32,1) .2s forwards;
}
.scrollTrigger.clipPin {
  transform-origin: top center;
  transform: rotate(-5deg) translate(0%, 50%) scale(1.2);
  opacity: 0;
}
.scrollTrigger.clipPin .-icon-pin {
  opacity: 0;
  transition: 0.1s opacity 0.4s linear, 0.3s transform 0.4s linear;
  transform: translate(-10%, -10%);
}
.scrollTrigger.clipPin.is-active {
	animation: clipPin 0.4s cubic-bezier(.23,1,.32,1) forwards;
}
.scrollTrigger.clipPin.is-active .-icon-pin {
  opacity: 1;
  transform: translate(0%, 0%);
}
@keyframes fadeIn {
	0% {transform: translateY(10%); opacity: 0;}
	50% {transform: translateY(-2%); }
	100% {transform: translateY(0%); opacity: 1;}
}
@keyframes clipPin {
	0% {transform: rotate(-5deg) translate(0%, 50%) scale(1.2);opacity: 0}
	100% {transform: rotate(0deg) translate(0, 0) scale(1);opacity: 1}
}

/* ----------------------------------------------------------------------------------------------------
*  content-body
* --------------------------------------------------------------------------------------------------*/
.content-body {
  max-width: 700px;
  max-width: 550px;
	position: relative;
  margin: 0 auto;
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
}
.content-bg {
	background: url("../images/content_bg01.png") 0 0 / 133% auto;
	position: absolute;
	z-index: -1;
	top: 0;
  width: 100%;
	max-width: 700px;
  max-width: 550px;
	height: 100%;
	height: 100vh;
  display: block;
  transition: background 0.7s ease-out;
	pointer-events: none;
}
.is-nav-active .content-bg {
	position: fixed;
}
.is-nav-end .content-bg {
  top: auto;
	bottom: 0;
  background-position: 100% 0;
}

/* ----------------------------------------------------------------------------------------------------
*  top-nav
* --------------------------------------------------------------------------------------------------*/
.top-nav {
  margin: 0;
  padding: 0 0 min(calc(100vh*300/1050), 300px);
  overflow: scroll;
  -ms-overflow-style: none;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-height: 100vh;
  transition: top 0.3s;
  box-sizing: border-box;
  transform: translateX(min(calc(100vw*422/700),422px));
  transform: translateX(min(calc(100vw*422/550),calc(550px*422/700)));
}
.top-nav::-webkit-scrollbar{
  display: none;
}
.top-nav .top-nav-list {
  font-size: min(100vh*19/700, 19px);
	display: flex;
	justify-content: center;
  flex-direction: column;
	flex-wrap: wrap;
   width: min(100vh*224/700, 224px);
}
.top-nav .top-nav-list li {
  margin-top: min(100vh*43/700, 43px)
}
.top-nav .top-nav-list li a {
	border-radius: calc(1em*8/19);
	width: calc(1em*220/19);
	height: calc(1em*70/19);
  background: #ffffff;
	display: flex;
	justify-content: center;
  align-items: center;
  position: relative;
  pointer-events: none;
  line-height: 1;
}
.top-nav .top-nav-list li a::after {
  content: "";
  border-radius: calc(1em*11/19);
  width: calc(100% + 1em*4/19);
  height: calc(100% + 1em*5/19);
  background: #d3d5d4;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.top-nav .top-nav-list li img {
	width: auto;
	height: 1em;
}
.top-nav .top-nav-list .ico-number {
  font-size: calc(1em*27/19);
  position: absolute;
  left: 0;
  bottom: 100%;
  display: inline-block;
}
.top-nav .top-nav-list .ico-txt {
  display: inline-block;
}
.top-nav .top-nav-list li.is-sec-active a {
  background: #fdf6ae;
}
.top-nav .top-nav-list li.is-sec-active a::after {
  background: #d1ce91;
}

@media screen and (max-width: 1130px){
	.top-nav {
		top: -100%;
    display: none
	}
}
@media screen and (max-height: 500px){
	.top-nav {
		top: -100%;
    display: none
	}
}

/* ----------------------------------------------------------------------------------------------------
*  sec common
* --------------------------------------------------------------------------------------------------*/
.sec {
  padding-top: calc(1em*40/28);
  position: relative;
}
.sec::before {
	content: "";
	background: 50% 0% / 100% no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
  left: 0;
  z-index: -1;
}
.-sec-even .sec-bg {
  margin: 0 auto 0 calc(1em*80/28);
}
.-sec-even .sec-ti01 {
  text-align: right;
}
.-sec-even .sec-ti01 h2 {
  margin: 0 calc(1em* 30 / 28) 0 calc(1em* 70 / 28);
}
.-sec-even .ckeck-point__trigger {
  margin-left: calc(1em*-88/28);
  margin-right: calc(1em*-38/28);
}
.-sec-even .ckeck-point__list {
  padding-left: calc(1em* 50 / 28);
}
.sec-bg {
  width: calc(1em*624/28);
  border: calc(1em*8/28) solid transparent;
  border-radius: 2.4em;
  margin: 0 auto 0 calc(1em*30/28);
  padding: calc(1em*24/28) 0 0;
  text-align: center;
  position: relative;
  box-sizing: content-box;
}
.sec-bg > .txt {
  position: relative;
  z-index: 2;
}
.sec#point03 .sec-bg {
  background: #fdfaeb;
  border-color: #014190;
  box-shadow: 0 calc(1em*10/28) calc(1em*20/28) calc(1em*30/28) rgba(32,96,145,0.30);
}
.sec#point01 .sec-bg2::before,
.sec#point02 .sec-bg2::before,
.sec#point04 .sec-bg2::before {
  content: "";
  width: 100%;
  position: absolute;
  z-index: -2;
  display: block;
  box-sizing: border-box;
  left: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.sec-bg2::after {
  content: "";
  border-radius: 2.4em;
  box-shadow: 0 calc(1em*10/28) calc(1em*20/28) calc(1em*30/28) rgba(32,96,145,0.30);
  position: absolute;
  z-index: -1;
  display: block;
  box-sizing: content-box;
}
.sec#point01 .sec-bg2::after,
.sec#point02 .sec-bg2::after,
.sec#point04 .sec-bg2::after {
  width: calc(100% + 1em*16/28);
  width: calc(1em*624/28);
	background: #fdfaeb;
  border: calc(1em*8/28) solid #014190;
 /* top: calc(1em*-8/28);*/
  left: calc(1em*30/28);
  bottom: calc(1em*-8/28);
}
.sec#point01 .sec-bg2::after {
  border-color: #d7083b;
  height: calc(1em*2060/28);
}
.sec#point01 .sec-bg2::before {
  height: calc(1em*1321/28);
	background-image: url("../images/bg_line01.png");
  bottom: calc(1em* 770 / 28);
}
.sec#point01 .txt01 {
  padding-left: .5em;
}
.sec#point01 .ckeck-point__pin {
  padding-bottom: calc(1em* 5 / 28);
}
.sec#point02 {
  padding-top: calc(1em* 49 / 28);
}
.sec#point02::before {
	background-image: url("../images/bg_line02.png");
  top: calc(1em* -330 / 28);
}
.sec#point02 .sec-bg2::before {
  height: calc(1em*715/28);
	background-image: url("../images/bg_line02_b.png");
  bottom: calc(1em* 366 / 28);
}
.sec#point02 .sec-bg2::after {
  height: calc(1em*3540/28);
  left: calc(1em*80/28);
}
.sec#point02 .sec-ti01 .-icon {
  font-size: calc(1em*210/38);
}
.sec#point02 .txt01 {
  padding-left: .3em;
}
.sec#point02 .ckeck-point__trigger {
  margin-top: calc(1em* 5 / 28);
}
.sec#point02 .ckeck-point__pin {
  padding-bottom: calc(1em* 52 / 28);
}
.sec#point02 .ckeck-point {
  height: calc(1em*1095/28);
	background-image: url("../images/bg07b.png");
}
.sec#point02 .ckeck-point:nth-child(2n) {
	background-image: url("../images/bg07b_b.png");
}
.sec#point02 .-caption {
  border-radius: .3em;
  width: calc(1em*490/28);
  background: #f8f0a0;
  color: #000;
  margin: calc(1em*55/28) auto calc(1em*45/28) calc(1em*41/28);
  padding: .85em 1.3em .85em 1.5em;
  text-align: left;
  line-height: calc(1em*50/28);
  box-sizing: border-box;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}
.sec#point02 ._pp_im01::before {
	content: "";
	background: url("../images/point02_bg01.png") 50% 50% / auto 100% no-repeat;
	position: absolute;
	width: calc(1em*172/28);
	height: calc(1em*231/28);
  right: calc(1em* -38 / 28);
  top: calc(1em* 305 / 28);
  z-index: 3;
}
.sec#point02 ._pp_im02 .-caption {
  width: calc(1em*428/28);
  margin: calc(1em*10/28) auto calc(1em*78/28) calc(1em*55/28);
  margin-top: .7em;
  padding: .85em 1.2em .85em 1.4em;
}
.sec#point02 ._pp_im02 .-caption::before {
	content: "";
	background: url("../images/point02_bg02.png") 50% 50% / contain no-repeat;
	position: absolute;
	width: calc(1em*115/28);
	height: calc(1em*150/28);
  right: calc(1em* -125 / 28);
  bottom: calc(1em* -80 / 28);
  z-index: 3;
}
.sec#point03::before {
	background-image: url("../images/bg_line03.png");
  top: calc(1em* -290 / 28);
}
.sec#point03 .sec-ti01 .-icon {
  font-size: calc(1em*216/38);
}
.sec#point03 .-caption {
  font-size: calc(1em*26/28);
  line-height: calc(1em*46/26);
  width: calc(1em*460/26);
  color: #000000;
  border-image: url(../images/txt06.png) 100 fill / 4em / 0px repeat;
  margin: calc(1em*-16/26) auto calc(1em*80/26) calc(1em*128/26);
  padding: 1em 1.3em 1.2em 1.5em;
  box-sizing: border-box;
  text-align: left;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}
.sec#point03 ._pp_im01 {
      margin-top: 0%;
}
.sec#point03 ._pp_im02 {
      margin-top: -1%;
      margin-bottom: calc(1em*40/28);
}
.sec#point03 ._pp_im02 .-caption {
  width: calc(1em*470/26);
  margin: calc(1em*25/26) auto 0 calc(1em*40/26);
}
.sec#point03 ._pp_im03 {
      margin-bottom: calc(1em*130/28);
}
.sec#point03 ._pp_im03 > img {
  position: relative;
  z-index: 2;
}
.sec#point03 ._pp_im03 .-caption {
  width: calc(1em*500/26);
  margin: calc(1em*-10/26) auto 0 calc(1em*62/26);
}
.sec#point03 ._pp_im04 .-caption {
  width: calc(1em*500/26);
  margin: calc(1em*20/26) auto calc(1em*60/26) calc(1em*60/26);
}
.sec#point03 ._pp_txt04 {
  position: relative;
}
.sec#point03 ._pp_txt04::before {
	content: "";
	background: url("../images/point03_bg01.png") 50% 50% / contain no-repeat;
	position: absolute;
	width: calc(1em*558/28);
	height: calc(1em*118/28);
  left: calc(1em* 0 / 28);
  top: calc(1em* -73 / 28);
  z-index: -1;
}
.sec#point04::before {
	background-image: url("../images/bg_line04.png");
  top: calc(1em* -350 / 28);
}
.sec#point04 .sec-bg2::before {
  height: calc(1em*715/28);
	background-image: url("../images/bg_line04_b.png");
  bottom: calc(1em* 168 / 28);
}
.sec#point04 .sec-ti01 .-icon {
  font-size: calc(1em*220/38);
}
.sec#point04 .txt01 {
  padding-left: .5em;
}
.sec#point04 .ckeck-point {
  height: calc(1em*1095/28);
	background-image: url("../images/bg07c.png");
}
.sec#point04 .ckeck-point:nth-child(2n) {
	background-image: url("../images/bg07c_b.png");
}
.sec#point04 .sec-bg2::after {
  height: calc(1em*1550/28);
  left: calc(1em*80/28);
}
.sec#point04 .ckeck-point__trigger {
  margin-top: calc(1em* 52 / 28);
}
.sec#point04 .ckeck-point__pin {
  padding-bottom: calc(1em* 40 / 28);
}
.sec-ti01 {
  font-size: calc(1em*38/28);
	position: relative;
	z-index: 2;
  margin-bottom: calc(1em*-44/38);
}
.sec-ti01 img,
.sec-ti01 svg {
  height: 1em;
}
.sec-ti01 .-icon {
  font-size: calc(1em*204/38);
  overflow: visible;
}
.sec-ti01 h2 {
  height: calc(1em*106/38);
	background: url("../images/bg04.png") no-repeat 50% 50% / contain;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 calc(1em* 70 / 28) 0 calc(1em* 30 / 28);
}
.sec .sec-ti01.is-active ._-tx01,
.sec .sec-ti01.is-active h2 {
	animation: .2s titleIn .2s ease-in forwards;
}
.sec .sec-ti01.is-active h2 {
  animation-delay: .7s;
}
.sec .sec-ti01 ._-tx01,
.sec .sec-ti01 h2,
.sec .sec-ti01 ._-number02,
.sec .sec-ti01 ._-number01 {
  opacity: 0;
}
.sec .sec-ti01.is-active ._-tx01 {
  transform-origin: 20% center;
}
.sec .sec-ti01 ._-number02,
.sec .sec-ti01 ._-number01 {
  transform-origin: center bottom;
}
.sec .sec-ti01.is-active ._-number02,
.sec .sec-ti01.is-active ._-number01 {
  animation: .4s icon-number .3s linear forwards;
}
@keyframes icon-number {
	0% {transform: translate(0, -50%);opacity: 0}
	1% {opacity: 1}
	30%  {transform: translate(0, 0%) scale(1);}
	50%  {transform: translate(0, 0%) scale(1,.5);}
	75% {transform: translate(0, -2%) scale(1,1.2);}
	100%  {transform: translate(0, 0%) scale(1);opacity: 1}
}
.sec .sec-ti01.is-active ._-number01 {
  animation-delay: .4s;
}
.sec-ti02 {
  height: 5.5em;
  color: #000000;
  font-size: calc(1em*30/28);
  display: flex;
  align-items: center;
  text-align: left;
	background: url("../images/bg06.png") no-repeat 50% 100% / contain;
  margin-bottom: calc(1em*25/30);
  line-height: 1.46;
}
body:lang(ja) .sec-ti02 > span {
  margin-right: -1em;
}
.sec-ti02 .-icon {
  font-size: calc(1em*61/30);
  min-width: 1em;
  width: 1em;
  height: 1em;
  display: block;
	background: url("../images/icon_check01.png") no-repeat 50% 50% / contain;
  margin: 0 .3em 0 .08em;
  position: relative;
}
.sec-ti02 .-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
	background: url("../images/icon_check01_b.png") no-repeat 50% 50% / contain;
  position: absolute;
  -webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
.-is-icon-check .sec-ti02 .-icon::before {
  webkit-clip-path: inset(0);
clip-path: inset(0);
  -webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
}
.sec-ti02 > span {
  width: calc(100% - 1em);
}
.sec .txt01 {
  width: calc(1em*550/28);
  color: #003b89;
	background: url("../images/bg05.png") repeat-y 50% 100% / 93% auto;
  margin: calc(1em*49/28) auto;
  padding: 0 0 .1em;
  box-sizing: border-box;
  line-height: calc(1em*54/28);
}
.sec .em01 {
  color: #d7083b;
  font-style: normal;
}
.sec .txt02 {
  margin: 1.2em .5em;
  text-align: left;
}
.sec .txt02 p {
  font-size: calc(1em*26/28);
  line-height: 1.76;
  margin-left: .2em;
}
.sec .txt02.-lineh01 p {
  line-height: 1.56;
}
.sec .txt02 .-link {
  font-size: calc(1em*22/28);
  line-height: 1.36;
}
.sec .txt02 .-link a {
  color: initial;
}
.sec .txt02 .-link li {
  padding-left: calc(1em*32/22);
  position: relative;
}
.sec .txt02 p + .-link li:first-of-type {
  margin-top: 1em;
}
.sec .txt02 .-link li + li {
  margin-top: 1.4em;
}
.sec .txt02 .-link li:before {
  content: "";
  width: calc(1em*24/22);
  height: calc(1em*24/22);
	background: url("../images/icon_star01.png") no-repeat 50% 50% / contain;
  display: inline-block;
  position: absolute;
  left: 0;
  top: .2em;
}
.sec .txt03 {
  width: calc(1em*435/28);
  position: relative;
  margin: calc(1em*-18/28) auto calc(1em*-30/28) calc(1em*66/28);
}
.sec .txt03 .-icon-pin {
  width: calc(1em*60/28);
  height: calc(1em*70/28);
  left: 35%;
  top: 1%;
}
.sec .txt04 {
  margin: calc(1em*-5/28) calc(1em*35/28) 0 calc(1em*30/28);
}
.sec .txt05 {
  font-size: calc(1em*26/28);
  line-height: calc(1em*46/26);
  width: calc(1em*530/26);
  color: #023b89;
  border-image: url(../images/txt05.png) 100 fill / 4em / 0px repeat;
  margin: calc(1em*20/26) auto 0 calc(1em*136/26);
  padding: .9em 1.5em 1.2em 1.5em;
  box-sizing: border-box;
  text-align: left;
  letter-spacing: 0.02em;
  position: relative;
}
.sec .im01 {
  margin: 0 10%;
}
.sec .im02 {
  margin: -2% 0 0;
  position: relative;
}
.sec .img-slider {
      margin-bottom: -3.5%;
}
.scroll-infinity__wrap {
  margin: 0 calc(1em* -88 / 28) 0 calc(1em* -38 / 28);
  padding: calc(1em* 60 / 28) 0 calc(1em* 66 / 28) 0;
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  width: calc(1em*2020/28);
  height: calc(1em*556/28);
  display: flex;
  list-style: none;
  padding: 0;
  position: relative;
}
.scroll-infinity__list--left {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
  animation: infinity-scroll-left 40s infinite linear 0.1s both;
}
.scroll-infinity__item img {
  filter:drop-shadow(0 1em .4em rgba(0,0,0,.15));
}
.scroll-infinity__item.-slide01 {
  width: calc(1em*297/28);
  margin-left: calc(1em*15/28);
}
.scroll-infinity__item.-slide02 {
  width: calc(1em*244/28);
  margin-top: calc(1em*224/28);
  margin-left: calc(1em*-42/28);
  position: relative;
}
.scroll-infinity__item.-slide02 .-item {
  position: absolute;
  width: calc(1em*153/28);
  top: calc(1em*-168/28);
  left: calc(1em*60/28);
  filter: none;
}
.scroll-infinity__item.-slide03 {
  width: calc(1em*345/28);
  margin-top: calc(1em*18/28);
}
.scroll-infinity__item.-slide04 {
  width: calc(1em*355/28);
  margin-top: calc(1em*288/28);
  margin-left: calc(1em*-290/28);
  position: relative;
}
.scroll-infinity__item.-slide05 {
  width: calc(1em*272/28);
  margin-top: calc(1em*36/28);
  margin-left: calc(1em*-31/28);
  position: relative;
  z-index: 0;
}
.scroll-infinity__item.-slide05 .-item {
  position: absolute;
  width: calc(1em*154/28);
  top: calc(1em*320/28);
  left: calc(1em*214/28);
}
.scroll-infinity__item.-slide06 {
  width: calc(1em*483/28);
  margin-top: calc(1em*21/28);
  margin-left: calc(1em*32/28);
}
.scroll-infinity__item.-slide07 {
  width: calc(1em*319/28);
  margin-top: calc(1em*316/28);
  margin-left: calc(1em*-392/28);
}
.scroll-infinity__item.-slide08 {
  width: calc(1em*361/28);
  margin-top: calc(1em*257/28);
  margin-left: calc(1em*30/28);
}
.scroll-infinity__item.-slide09 {
  width: calc(1em*263/28);
  margin-top: calc(1em*40/28);
  margin-left: calc(1em*-288/28);
  margin-right: calc(1em*50/28);
}
@keyframes infinity-scroll-left {
  from {
    -webkit-transform: translate3d(0%, 0px, 0px);
    transform: translate3d(0%, 0px, 0px);
  }
  to {
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
  }
}
@keyframes titleIn {
	0% {transform: scale(0.9);}
	50% {transform: scale(1.1);opacity: 1}
	100% {transform: scale(1);opacity: 1}
}

.img {
	margin: 0;
	position: relative;
	z-index: 5;
	display: inline-block;
}
.img > img {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	z-index: 5;
}


/* ----------------------------------------------------------------------------------------------------
*  content-footer
* --------------------------------------------------------------------------------------------------*/
.content-footer {
  background: #0080cc;
  color: #fff;
  margin-top: calc(100%*325/750);
  padding: calc(1em*65/28) 0 calc(1em*150/28);
  position: relative;
}
.content-footer .txt-att {
  font-size: 24px;
  font-size: calc(1em*24/28);
  text-align: right;
  padding: 0 .2em;
}


/* ----------------------------------------------------------------------------------------------------
*  pageTop
* --------------------------------------------------------------------------------------------------*/
.pageTop {
	position: absolute;
	top: 0;
	right: calc(100%*5/750);
	z-index: 9998;
  transform: translateY(calc(100%*-274/343));
}
.pageTop a {
	background: url("../images/btn_pagetop.png") no-repeat 50% 50% / contain;
	width: calc(1em*177/28);
	height: calc(1em*343/28);
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	position: relative;
	display: block;
}
.pageTop::after {
  content: "";
	background: url("../images/btn_pagetop_bg.png") no-repeat 50% 100% / contain;
	width: 100%;
  height: 100%;
	overflow: hidden;
	position: absolute;
	display: block;
  z-index: -1;
  left: 0;
  top: 0;
  transform-origin: center bottom;
}
.pageTop a {
  animation: anime-pagetop1 .5s alternate infinite;
}
.pageTop::after {
  animation: anime-pagetop2 .5s alternate infinite;
}
@-webkit-keyframes anime-pagetop1 {
	0% { transform: translateY(0%);}
	100% { transform: translateY(-5%);}
}
@-webkit-keyframes anime-pagetop2 {
	0% { transform: scale(1);}
	100% { transform: scale(.8);}
}
@media screen and (max-width: 1179px){
	.pageTop.is-active {
		opacity: 0;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  sec-mv
* --------------------------------------------------------------------------------------------------*/
.sec-mv {
	position: relative;
}
.sec-mv .content-title .-ttl {
	position: absolute;
  top: calc(1em*160/28);
  left: 0;
}
.sec-mv .content-title .-logo {
	position: absolute;
  width: calc(1em*116/28);
  top: calc(1em*22/28);
  left: calc(1em*28/28);
}
/* ----------------------------------------------------------------------------------------------------
*  sec-lead
* --------------------------------------------------------------------------------------------------*/
.sec-lead {
  position: relative;
  margin: 0 0 calc(1em*35/28);
  overflow: hidden;
}
.sec-lead .-text {
  margin: calc(1em*48/28) 0 0;
}
.-icon-pin {
  width: calc(1em*94/28);
  height: calc(1em*118/28);
  background: url("../images/bg_pin01.png") no-repeat 0 0 / contain;
  display: block;
  position: absolute;
  left: 37.5%;
  top: -5%;
}

/* ----------------------------------------------------------------------------------------------------
*  sec-comment
* --------------------------------------------------------------------------------------------------*/
.sec-comment1 {
  position: relative;
  margin: calc(1em*47/28) 0 calc(1em*125/28);
  overflow: hidden;
}
.sec-comment1 .-icon.-icon-pin {
  width: calc(1em*71/28);
  height: calc(1em*73/28);
  background-image: url("../images/bg_pin02.png");
  left: 54.5%;
  top: 39.9%;
  z-index: 2;
}
.sec-comment1 .-img {
  position: relative;
  z-index: 0;
}
.sec-comment1 .-text {
  width: calc(1em*615/28);
  margin: 0 0 calc(1em*-85/28);
  position: relative;
  z-index: 1;
}
.sec-comment2 {
  position: relative;
  overflow: hidden;
}
.sec-comment2 .-text {
  width: calc(1em*710/28);
  margin: calc(1em*-28/28) auto 0 calc(1em*30/28);
  position: relative;
}
.sec-comment2 .-text .-icon.-icon-pin {
  width: calc(1em*88/28);
  height: calc(1em*111/28);
  left: 42.5%;
  top: 1.5%;
}


body:lang(en) .content-main {
  font-family: "Noto Sans", sans-serif;
}
body:lang(en) .top-nav .top-nav-list li .ico-txt img {
    height: calc(1em*20/19);
  transform: translateY(10%);
}
body:lang(en) .sec .txt01 {
  padding-left: 1.3em !important;
  padding-right: 1.3em;
}
body:lang(en) .sec-ti01 img {
  height: calc(1em*39/38);
}
body:lang(en) .sec#point02 .-caption {
  letter-spacing: normal;
}
body:lang(en) .sec#point02 .sec-bg2::after {
  height: calc(1em*3690/28);
}
body:lang(en) .sec#point03 .-caption {
  letter-spacing: normal;
  padding-left: 1.3em;
}

/*繁体字*/
body:lang(zh-tw) .content-main {
  font-family: "Noto Sans TC", sans-serif;
}
body:lang(zh-tw) .top-nav .top-nav-list li .ico-txt img {
    height: calc(1em*20/19);
}
body:lang(zh-tw) .sec .txt01 {
  padding-left: 1.3em !important;
  padding-right: 1.3em;
}
body:lang(zh-tw) .sec-ti01 img {
  height: calc(1em*41/38);
}
body:lang(zh-tw) .sec#point02 .sec-bg2::after {
  height: calc(1em*3225/28);
}
body:lang(zh-tw) .sec#point04 .sec-bg2::after {
    height: calc(1em* 1485 / 28);
}
/*簡体字*/
body:lang(zh-cn) .content-main {
  font-family: "Noto Sans SC", sans-serif;
}
body:lang(zh-cn) .sec .txt01 {
  padding-left: 1.3em !important;
  padding-right: 1.3em;
}
body:lang(zh-cn) .sec-ti01 img {
  height: calc(1em*41/38);
}
body:lang(zh-cn) .sec#point02 .sec-bg2::after {
  height: calc(1em*3280/28);
}
body:lang(zh-cn) .sec#point04 .sec-bg2::after {
    height: calc(1em* 1485 / 28);
}
/*韓国語*/
body:lang(ko) .content-main {
  font-family: "Noto Sans KR", sans-serif;
}
body:lang(ko) .sec .txt01 {
  padding-left: 1em !important;
  padding-right: 1em;
}
body:lang(ko) .sec#point01 .sec-bg2::after {
  height: calc(1em*2110/28);
}
body:lang(ko) .sec#point02 .sec-bg2::after {
  height: calc(1em*3540/28);
}