@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
/* topBox */
#main .topBox {
	position: relative;
	height: 144rem;
}
#main .topBox img {
	width: 100%;
}
#main .topBox .box01 {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #616465;
    position: absolute;
    left: 0;
    top: 0;
	opacity: 1;
	transition: all ease 0.5s;
}
#main .topBox .box01.hide {
	opacity: 0;
}
#main .topBox .box01 li {
    height: 6.8rem;
	opacity: 0;
}
#main .topBox .box01 li.show {
	opacity: 1;
}
#main .topBox .box01 li img {
    width: auto;
    height: 100%;
}
#main .topBox .box02 {
    width: 75rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../img/index/main_bg01.webp) no-repeat left top / 100% 100%;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.5s;
}
#main .topBox .box02.show {
	opacity: 1;
	visibility: visible;
}
#main .topBox .box02 .img01 {
	width: 15.1rem;
	position: absolute;
	top: 5.7rem;
    left: 6.7rem;
	opacity: 0;
}
#main .topBox .box02 .img01.on {
	animation: zoomin ease 0.5s forwards;
}
#main .topBox .box02 .img02 {
	width: 75rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 1.4rem;
}
#main .topBox .box02 .img02 > span {
	opacity: 0;
	transition: all ease 0.5s;
	display: block;
}
#main .topBox .box02 .img02 > span:nth-of-type(2) {
	transition-delay: 0.5s;
}
#main .topBox .box02 .img02 > span.on {
	opacity: 1;
}
#main .topBox .box02 .img02 > span.mask {
	mask-image: url("../img/index/textimg03.webp");
	mask-position: left top;
	mask-size: 100% auto;
	mask-repeat: no-repeat;
}
#main .topBox .box02 .img02 > span.lightShow::before {
	animation: reflection02 1s ease-in-out 1;
}

@-webkit-keyframes reflection02 {
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0.4;
	}
	5% {
		-webkit-transform: scale(4) rotate(45deg);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}
@keyframes reflection02 {
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0.4;
	}
	5% {
		-webkit-transform: scale(4) rotate(45deg);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}
#main .topBox .box03 {
	position: relative;
    width: 75rem;
	height: 100%;
	background: url("../img/index/main_bg02.webp") no-repeat left top / 100% 100%;
	opacity: 0;
	visibility: hidden;
	transition: all ease 0.5s;
}
#main .topBox .box03 .posTxt {
    position: absolute;
    right: 2.8rem;
    bottom: -3.2rem;
    font-size: 1.8rem;
    color: #fff;
	opacity: 0;
}
#main .topBox .box03 .posTxt.on {
	animation: fadein ease 0.3s both;
}
#main .topBox .box03.show {
	opacity: 1;
	visibility: visible;
}
#main .topBox .box03 .imgBox {
    position: absolute;
    left: 0;
    bottom: 5.4rem;
}
#main .topBox .box03 .img01 {
    margin-left: 3.8rem;
    width: 48.7rem;
}
#main .topBox .box03 .img02 {
    margin: 2.5rem 0 2rem 3.8rem;
    height: 11.1rem;
}
#main .topBox .box03 .img02 img {
    width: auto;
    height: 100%;
}
#main .topBox .box03 .img03 {
    margin: 0 0 4.4rem 3.8rem;
    width: 44.6rem;
}
#main .topBox .box03 .imgBox > div img.only {
	opacity: 0;
}
#main .topBox .box03 .imgBox > div img.only.on {
	animation: zoomin ease 0.5s forwards;
}
#main .topBox .box03 .imgList {
    gap: 1.5rem 1.4rem;
}
#main .topBox .box03 .imgList li {
    width: 21.8rem;
	opacity: 0;
}
#main .topBox .box03 .imgList li.on {
	animation: zoomin ease 0.5s forwards;
}
#main .topBox .box03 .imgList li img {
    width: 100%;
}
/* divBox01 */
#main .divBox01 {
	margin: 4.8rem 0 5.5rem;
}
#main .divBox01 img {
	width: 100%;
}
/* sec01 */
#main .sec01 {
	margin-bottom: 7rem;
	padding: 8.7rem 0 11.6rem;
	background: url(../img/index/bg01.webp) repeat-y left top / 75rem auto;
}
#main .sec01 img {
	width: 100%;
}
#main .sec01 .title {
	margin-bottom: 1.6rem;
}
#main .sec01 .imgBox .photoBox {
	position: relative;
}
#main .sec01 .imgBox .ttl {
	position: absolute;
	width: 47.1rem;
    left: 3.1rem;
    top: 13.3rem;
}
#main .sec01 .imgBox .ttl span {
	display: block;
}
#main .sec01 .imgBox .ttl .jp {
	position: relative;
    
}
#main .sec01 .imgBox .ttl .jp::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #323232;
    transform-origin: left center;
	opacity: 0;
}
#main .sec01 .imgBox .ttl .jp.on::before {
	animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#main .sec01 .imgBox .ttl .jp img {
	position: relative;
}
#main .sec01 .imgBox .en {
    width: fit-content;
	height: 2.8rem;
	position: absolute;
	top: -2.6rem;
	left: 0;
}
#main .sec01 .imgBox .en img {
	width: auto;
	height: 100%;
}
#main .sec01 .textBox {
	margin: -5.3rem 4.5rem 0;
	padding: 10.4rem 0 6rem 4.4rem;
	border-left: 0.2rem solid #fff;
	border-bottom: 0.2rem solid #fff;
}
#main .sec01 .textBox p {
	font-size: 3rem;
	line-height: 2.066;
	color: #FFF;
	font-feature-settings: "palt";
	letter-spacing: 0.1rem;
    text-align: justify;
}
#main .sec01 .info01 {
	margin-top: 5.5rem;
}
#main .sec01 .info01 .ttl {
	top: 4.5rem;
}
#main .sec01 .info01 .textBox {
	margin-top: -7.8rem;
}
#main .sec01 .info02 {
	margin-top: 12.5rem;
}
#main .sec01 .info02 .ttl {
	top: 6rem;
}
/* sec02 */
#main .sec02 .img01 {
	margin-bottom: 3.7rem;
    display: flex;
    justify-content: center;
}
#main .sec02 .img01 img {
	width: 90%;
}
#main .sec02 img {
	width: 100%;
}
#main .sec02 .infoBox {
	position: relative;
}
#main .sec02 .word {
	width: 29.6rem;
	position: absolute;
	left: 13.5rem;
	top: 57.6rem;
}
#main .sec02 .txt01 {
	left: 33.7rem;
	top: 50%;
	transform: translateY(-41%);
}
#main .sec02 .txt01 img {
	animation-delay: 0.3s;
}
#main .sec02 .txt02 {
	top: auto;
	bottom: 52.5rem;
	left: 13.5rem;
}
#main .sec02 .txt02 img {
	animation-delay: 0.6s;
}
@keyframes bg {
    0% {
      opacity: 0;
      transform: scaleX(0) translateX(-5%);
    }
    30% {
      transform: scaleX(1) translateX(0);
    }
    100% {
      transform: scaleX(1) translateX(0);
    }
    30%, 100% {
      opacity: 1;
    }
  }
/*sec03*/
#main .sec03 {
    margin-bottom: 10.6rem
}
#main .sec03 .inf01 img {
    width: 100%;
}
#main .sec03 .info01 {
    margin: -7rem auto 6.3rem;
    width: 66.2rem
}
#main .sec03 .info02 {
    padding-bottom: 14rem;
    background: url("../img/index/bg02.webp") no-repeat center top / 75rem 99.1rem;
    position: relative;
    z-index: 1;
}
#main .sec03 .info02 .ttl {
    margin: 0 auto 3.6rem;
    width: 48.1rem;
}
#main .sec03 .info02 .ttl img {
    margin-top: -0.7rem
}
#main .sec03 .info02 .inner {
    margin: 0 auto;
    width: 59.2rem;
    position: relative;
}
#main .sec03 .info02 .pos {
    position: absolute;
    width: 58.8rem;
    top: 17rem;
    left: 50%;
	transform: translateX(-50%);
}
#main .sec03 .info02 .pos img + img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    transform: scaleY(0);
	transform-origin: center bottom;
	transition: all ease 0.3s;
}
#main .sec03 .info02 .pos.on img:nth-of-type(3) {
	transition-delay: 0.3s;
}
#main .sec03 .info02 .pos.on img:nth-of-type(5) {
	transition-delay: 0.3s;
}
#main .sec03 .info02 .pos.on img + img {
    transform: scaleY(1);
}
#main .sec03 .info03 {
    padding-top: 3.1rem;
    margin-top: -10.2rem;
    background: url("../img/index/bg04.webp") no-repeat center top / 75rem auto;
}
#main .sec03 .info03 .ttl {
    margin: 0 auto 4.5rem;
    width: 60.9rem;
    position: relative;
    z-index: 2;
}
/*sec04*/
#main .sec04 {
    margin-bottom: 3.3rem;
}
#main .sec04 .innerBox {
    position: relative;
}
#main .sec04 .pos {
    height: 11.9rem;
    position: absolute;
    left: 0;
    top: 7rem;
}
#main .sec04 .pos img {
    height: 100%;
}
#main .sec04 .pos01 {
    top: 20.4rem;
	animation-delay: 0.3s;
}
#main .sec04 .pos02 {
    width: 59.9rem;
    top: auto;
    bottom: 40.2rem;
    left: 50%;
    transform: translateX(-50.3%);
}
#main .sec04 .pos03 {
    width: 39rem;
    top: auto;
    height: 18.2rem;
    bottom: 14.3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
#main .sec04 .pos03 img {
    width: 19.5rem;
	opacity: 0;
}
#main .sec04 .pos03.on img {
	animation: zoomin ease 0.5s forwards;
}
#main .sec04 .pos03.on img:nth-of-type(2) {
	animation-delay: 0.3s;
}
/*sec05*/
#main .sec05 {
    margin-bottom: 10.8rem;
}
#main .sec05 .title {
    position: relative;
}
#main .sec05 .title .jp {
    position: absolute;
    width: max-content;
    top: 24.3rem;
    left: 50%;
    transform: translateX(-50%);
    height: 10.3rem
}
#main .sec05 .title .jp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#main .sec05 .ttl01 {
    margin-bottom: 2.5rem
}
#main .sec05 .ttl02 {
    margin: 6.1rem 0 3.8rem
}
#main .sec05 .title01 {
    margin-top: 12rem
}
#main .sec05 .title02 {
    margin-top: 10.4rem
}
#main .sec05 .ttl03 {
    margin-bottom: 3.5rem
}
#main .sec05 .ttl04 {
  margin: 6.5rem 0 4.9rem;
}
#main .sec05 .innerBox .img01 {
    margin-top: 6.7rem
}
#main .sec05 .innerBox {
    padding-top: 6.2rem;
    background: linear-gradient(to bottom,#D1E2E8 38%,#fff);
}
#main .sec05 .innerBox.box01 {
    padding-top: 4.9rem;
}
#main .sec05 .innerBox.box02 {
    padding-top: 4.5rem;
    background: linear-gradient(to bottom,#D1E2E8,#fff 59%);
}
#main .sec05 .ttl05 {
    margin: 6.2rem 0 4.2rem;
}
#main .sec05 .ttl06 {
    margin-bottom: 5.7rem;
}
#main .sec05 .innerBox .img03 {
    margin-top: 9.2rem
}
#main .sec05 .title03 {
    margin-top: 10.8rem;
}
#main .sec05 .innerBox .img04 {
    margin-bottom: 4.1rem
}
#main .sec05 .innerBox .img05 {
    position: relative;
}
#main .sec05 .innerBox .pos01 {
    width: 76.7rem;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
#main .sec05 .innerBox .pos02 {
    width: 63.2rem;
    position: absolute;
    top: 49.2rem;
    left: 50%;
    transform: translateX(-50%);
}
/* sec06 */
#main .sec06 {
    margin-bottom: 2rem;
}
#main .sec06 .pos {
    position: absolute;
    width: 4.8rem;
    top: 9rem;
    right: 12.3rem;
    display: block;
}
#main .sec06 .topImg .pos01 {
    width: 6.1rem;
    right: 23.5rem;
    top: 25.4rem;
}
#main .sec06 .pos02 {
    width: 49.3rem;
    top: auto;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-51%);
}
#main .sec06 .topImg .js-spanize {
	font-style: normal;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	writing-mode: tb-rl;
	direction: ltr;
	-webkit-writing-mode: vertical-rl;
	letter-spacing: -0.05em;
	white-space: nowrap;
	display: block;
}
#main .sec06 .topImg .js-spanize em {
	font-style: normal;
	display: inline;
	opacity: 0;
	width: 100%;
}
#main .sec06 .topImg .js-spanize.on em {
	opacity: 1;
}
#main .sec06 .topImg {
    margin-bottom: 9.9rem;
    position: relative;
}
#main .sec06 .topImg img {
    width: 100%;
}
#main .sec06 .imgList li {
    text-align: center;
	opacity: 0;
}
#main .sec06 .imgList.on li {
	animation: fadeinup ease 0.5s both;
}
#main .sec06 .imgList li:nth-of-type(2) {
	animation-delay: 0.3s;
}
#main .sec06 .imgList li:nth-of-type(3) {
	animation-delay: 0.6s;
}
#main .sec06 .title {
    margin-bottom: 4.5rem;
}
#main .sec06 .imgList li img {
    width: auto;
    height: 15.6rem;
}
#main .sec06 .imgList li + li {
    margin-top: 0.9rem;
}
/* sec07 */
#main .sec07 {
    padding-bottom: 10.8rem;
    background: #F6F7F5;
}
#main .sec07 img {
    width: 100%;
}
#main .sec07 .topImg {
    margin-bottom: 12.4rem;
}
#main .sec07 .title {
    margin-bottom: 1.7rem;
}
#main .sec07 .info {
    margin-bottom: 2.1rem;
}
#main .sec07 .info01 {
    margin-bottom: 0.6rem;
}
/*　sec08 */
#main .sec08 {
    margin-bottom: 4.6rem;
}
#main .sec08 .bg01 {
    padding: 7.1rem 0 9.5rem;
    background: url(../img/index/sec08_bg01.webp) repeat-y center top / 75rem;
}
#main .sec08 .head {
    margin: 0 auto 5.2rem;
    width: 64.6rem;
}
#main .sec08 .title {
    margin-bottom: 5.5rem;
}
#main .sec08 .head img {
    width: 100%;
}
#main .sec08 .ttl {
    margin: 0 7rem 1.6rem 8rem;
    font-size: 4rem;
    line-height: 1.55;
    letter-spacing: 0.2rem;
    overflow-x: hidden;
}
#main .sec08 .ttl span {
    padding-right: 1.1rem;
    position: relative;
}
#main .sec08 .ttl span::after {
    content: "";
    width: 75rem;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    position: absolute;
    background-color: #323232
}
#main .sec08 .info01 {
    margin-bottom: 3.7rem;
}
#main .sec08 .info02 {
    margin-bottom: 4rem;
}
#main .sec08 .info03 {
    margin-bottom: 2.7rem;
}
#main .sec08 .info04 {
    margin-bottom: 13rem;
}
#main .sec08 .ttl02 {
    margin-bottom: 0.6rem;
}
#main .sec08 .ttl03 {
    margin-bottom: 2.3rem;
}
#main .sec08 .bg02 {
    padding: 7.3rem 0 7.5rem;
    background: url(../img/index/sec08_bg02.webp) no-repeat center top / 75rem;
}
#main .sec08 .bg03 {
    padding: 7.3rem 0 8rem;
    background: url(../img/index/sec08_bg03.webp) no-repeat center top / 75rem;
}
/* sec09 */
#main .sec09 {

}
#main .sec09 .topImg {
    margin-bottom: 9.4rem;
    position: relative;
}
#main .sec09 .topImg .pos {
    width: 11.1rem;
    position: absolute;
    left: 6.6rem;
    top: 15.1rem;
}
#main .sec09 .topImg .pos02 {
    top: 7.7rem;
    left: 20.2rem;
	animation-delay: 0.3s;
}
#main .sec09 .infoBox {
    position: relative;
}
#main .sec09 .infoBox img {
    width: 100%;
}
#main .sec09 .infoBox .pos {
    width: 28.7rem;
    position: absolute;
    height: 21.3rem;
    top: 4.7rem;
    right: 2rem;
}
#main .sec09 .infoBox .pos::after {
    content: "";
    width: 28.7rem;
    height: 21.3rem;
    position: absolute;
    top: 0.9rem;
    left: 0.5rem;
    background: url(../img/index/sec09_img07_bg.webp) no-repeat left top / 100%;
    mix-blend-mode: multiply;
    z-index: 1;
}
#main .sec09 .infoBox .pos img {
    position: relative;
    z-index: 2;
    height: 100%;
    object-fit: contain;

}
#main .sec09 .infoBox .pos01 {
    top: 37.2%;
    right: auto;
    left: 1rem;
	animation-delay: 0.3s;
}
#main .sec09 .infoBox .pos01::after {
    left: 0.7rem;
    background: url(../img/index/sec09_img06_bg.webp) no-repeat left top / 100%;
    mix-blend-mode: multiply;
}
#main .sec09 .infoBox .pos02 {
    top: auto;
    bottom: 14.8rem;
	animation-delay: 0.6s;
}
#main .sec09 .txtBox {
    margin-top: -4.2rem;
    padding-top: 8rem;
    min-height: 47.8rem;
    background: url(../img/index/sec09_bg.webp) no-repeat center top / 75rem;
}
#main .sec09 .txtBox .img {
    margin: 0 auto;
    padding-left: 1.8rem;
    width: 65rem;
}
#main .sec09 .txtBox img {
    width: 100%;
}
/* faq */
#main .faq {
    margin: 9.5rem 3.8rem 0;
    padding: 6.6rem 3.5rem 0;
}
#main .faq .title {
    margin-bottom: 5.2rem;
    text-align: center;
}
#main .faq .title img {
    width: 21.4rem;
}
#main .faq {
    border: 0.5rem solid #BDBEBF;
}
#main .faq .faqDl {
    padding-bottom: 5rem;
    border-bottom: 0.5rem solid #BDBEBF;
}
#main .faq .faqDl + .faqDl {
    margin-top: 5.5rem;
}
#main .faq .faqDl:last-of-type {
    border: none;
}
#main .faq dt {
    padding: 0.5rem 5rem 0.6rem;
    font-weight: bold;
    font-size: 3.4rem;
    color : #005F7D;
    background: url(../img/index/faq_question.webp) no-repeat left top 0.4rem / 4.2rem;
    font-feature-settings: "palt";
    position: relative;
    cursor: pointer;
}
#main .faq dt::before,
#main .faq dt::after {
    content: "";
    position: absolute;
    width: 3.4rem;
    height: 0.2rem;
    background: #005F7D;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#main .faq dt::after {
    transform: translateY(-50%) rotate(90deg);
}
#main .faq dt.on::after {
    display: none;
}
#main .faq dd {
    display: none;
}
#main .faq dd p {
    font-size: 3rem;
    line-height: 2.066;
    font-feature-settings: "palt";
}
#main .faq dd .tips {
    position: absolute;
    bottom: -3.7rem;
    right: 0.5rem;
    font-size: 1.8rem;
    line-height: 1.666;
}
#main .faq dd sup {
    font-size: 60%;
}
#main .faq dd div {
    padding: 1.6rem 0 0;
    position: relative;
    text-align: justify;
}
/* display */
#main .display {
    margin: 6.3rem 5rem 11.5rem;
    font-size: 2.4rem;
    line-height: 1.916;
    font-feature-settings: "palt";
    text-align: justify;
}
#main .display .title {
    margin-bottom: 1.7rem;
    font-size: 2.8rem;
}
#main .display .ttl {
    font-weight: normal;
}
#main .display p + .ttl {
    margin-top: 4.8rem;
}