﻿/* --------------------------------------------------------------------------------
  Parts
-------------------------------------------------------------------------------- */
	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.is-reverse {
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	.is-center {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.is-end {
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}

	.imgWrap {
		position: relative;
	}
	.imgWrap img {
		width: 100%;
	}
	
	.imgWrap .caption {
		position: absolute;
		padding: 5px;
	}
	
	.caption--inLeft {
		bottom: 0;
		left: 0;
		text-align: left;
	}
	
	.caption--inUpLeft {
		top: 0;
		left: 0;
		text-align: left;
	}
	.caption--outLeft {
		top: 100%;
		left: 0;
		text-align: left;
	}

	.caption--inRight {
		bottom: 0;
		right: 0;
		text-align: right;
	}
	.caption--inUpRight {
		top: 0;
		right: 0;
		text-align: right;
	}
	.caption--outRight {
		top: 100%;
		right: 0;
		text-align: right;
	}

	.caption-white-shadow {
		color: #fff;
		text-shadow: 0px 0px 6px #000, 0px 0px 6px #000, 0px 0px 6px #000;
	}

	.color-white { color: #fff;}
	.color-black { color: #000;}


	.btn__details a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;

		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 49.6rem;
		height: 5.8rem;
		margin-left: auto;
		margin-right: auto;
		background: rgba(34, 18, 147, 1);
		font-size: 20px;
		font-weight: 500;
		color: #fff;
		text-align: center;
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}


	.btn__other a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;

		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 49.5rem;
		height: 9rem;
		margin-left: auto;
		margin-right: auto;
		background: rgba(0, 0, 0, 1);
		font-size: 28px;
		letter-spacing: .12em;
		font-weight: 500;
		color: #fff;
		text-align: center;
		-webkit-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}
@media screen and (min-width: 768px){
	.btn__details a:hover {
		background: rgba(230, 0, 39, 1);
	}

	.btn__other a:hover {
		background: rgba(230, 0, 39, 1);
	}
}
@media screen and (max-width: 767px){
	.btn__details a {
		width: 80%;
		height: 5.2rem;
		font-size: 16px;
	}

	.btn__other a {
		width: 80%;
		height: 6.8rem;
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------------
  lowMv
-------------------------------------------------------------------------------- */
	.lowMv {
		position: relative;
	}
	.lowMv .lowMv__title {
		position: absolute;
		bottom: -8rem;
		left: 0;
		width: calc(50% + 192px);
		height: 15.8rem;
		background: rgba(34, 18, 147, 1);
		z-index: 1;
	}
	.lowMv .lowMv__title h2 {
		position: absolute;
		top: 50%;
		right: 0;
		width: 704px;
		margin-top: -5px;
		font-size: 4.6rem;
		font-weight: 900;
		line-height: 1;
		color: #fff;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	}
	.lowMv .lowMv__title h2 span {
		display: inline-block;
	}
	.lowMv .lowMv__title h2 .sub__eng {
		display: none;
		margin-bottom: 8px;
		font-size: 10px;
		line-height: 1;
		color: #ccc;
	}
	.lowMv .lowMv__visual {
		overflow: hidden;
		width: calc(50% + 512px);
		max-height: 422px;
		margin-left: auto;
		margin-right: 0;
	}
	.lowMv .lowMv__visual::after {
		content: "";
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background: #fff;
		transition: .6s ease-in;
	}
	.lowMv .lowMv__visual.aos-animate::after {
		width: 0;
	}
	.lowMv .lowMv__visual img {
		width: 100%;
	}
@media screen and (max-width: 1239px){
	.lowMv .lowMv__title {
		width: calc(912/1440*100%);
	}
	.lowMv .lowMv__title h2 {
		left: calc(208/912*100%);
		right: auto;
		width: auto;
		margin-top: -2px;
	}
	.lowMv .lowMv__visual {
		width: calc(1231/1440*100%);
	}
}

@media screen and (max-width: 1087px){
	.lowMv .lowMv__title h2 {
		font-size: 3.8rem;
	}
}

@media screen and (max-width: 767px){
	.lowMv .lowMv__title {
		position: absolute;
		bottom: -4.3rem;
		left: 0;
		width: calc(710/750*100%);
		height: 86px;
	}
	.lowMv .lowMv__title h2 .sub__eng {
		display: block;
	}
	.lowMv .lowMv__title h2 {
		left: calc(40/710*100%);
		right: auto;
		width: auto;

		font-size: 32px;
	}
	.lowMv .lowMv__visual {
		width: calc(710/750*100%);
		max-height: 422px;
	}
}

/* --------------------------------------------------------------------------------
  lowHeading
-------------------------------------------------------------------------------- */
	.lowHeading {
		font-size: 4.4rem;
		font-weight: 700;
		letter-spacing: .11em;
		line-height: 1.432;
	}

	.lowsubHeading {
		font-size: 3.4rem;
		font-weight: 500;
		letter-spacing: .11em;
		line-height: 1.852;
	}

	.lowsubHeading.line span {
		display: inline-block;
		padding-left: 78px;
	}
	.lowsubHeading.line span em {
		font-style: normal;
	}
	.lowsubHeading.line span em.pc {
		display: inline-block !important;
	}
	.lowsubHeading.line span em.sp {
		display: none !important;
	}
	.lowsubHeading.line span::before {
		content: "";
		position: absolute;
		top: 30px;
		left: 0;
		width: 60px;
		height: 2px;
		background: #221293;
	}

@media screen and (max-width: 1087px){
	.lowHeading {
		font-size: 3.6rem;
	}
}

@media screen and (max-width: 767px){
	.lowHeading {
		font-size: 31px;
	}

	.lowsubHeading {
		font-size: 24px;
	}
	.lowsubHeading.line span {
		padding-left: 28px;
	}
	.lowsubHeading.line span::before {
		top: 20px;
		width: 20px;
	}

	.lowsubHeading.line span em.pc {
		display: none !important;
	}
	.lowsubHeading.line span em.sp {
		display: inline-block !important;
	}

	.ls__SP {
		letter-spacing: .02em !important;
	}
}
  .lowHeading::before,
	.lowHeading::after,
  .lowsubHeading::before,
	.lowsubHeading::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
	}
  .lowHeading::before {
    margin-top: calc((1 - 1.432) * 0.5em);
	}
  .lowHeading::after {
    margin-bottom: calc((1 - 1.432) * 0.5em);
	}
  .lowsubHeading::before {
    margin-top: calc((1 - 1.852) * 0.5em);
	}
  .lowsubHeading::after {
    margin-bottom: calc((1 - 1.852) * 0.5em);
	}


	.lowTxt {
		font-size: 20px;
		letter-spacing: .11em;
		line-height: 1.8;
	}
@media screen and (max-width: 767px){
	.lowTxt {
		font-size: 15px;
	}
}
  .lowTxt::before,
	.lowTxt::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
	}
  .lowTxt::before {
    margin-top: calc((1 - 1.8) * 0.5em);
	}
  .lowTxt::after {
    margin-bottom: calc((1 - 1.8) * 0.5em);
	}

/* --------------------------------------------------------------------------------
  Photo
-------------------------------------------------------------------------------- */
	.section--Photo__left {
	}
	.section--Photo__left .imgWrap {
		width: calc(50% + 512px);
		margin-left: 0;
		margin-right: auto;
	}
	.section--Photo__left .imgWrap::after {
		content: "";
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: auto;
		background: #fff;
		transition: .6s ease-in;
	}
	.section--Photo__left .imgWrap.aos-animate::after {
		width: 0;
	}
@media screen and (max-width: 1239px){
	.section--Photo__left .imgWrap {
		width: auto;
		padding-right: 3.491755577%;
	}
}
@media screen and (max-width: 767px){
	.section--Photo__left .imgWrap {
		padding-right: calc(40/750*100vw);
	}
}

	.section--Photo__right {
		position: relative;
		padding-bottom: 8.7rem;
	}
	.section--Photo__right::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(50% + 424px);
		height: 30rem;
		background: rgba(34, 18, 147, 1);
	}
	.section--Photo__right .imgWrap {
		width: calc(50% + 512px);
		margin-left: auto;
		margin-right: 0;
	}
	.section--Photo__right .imgWrap img {
		opacity: 0;
	}
	.section--Photo__right .imgWrap::after {
		content: "";
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 0;
		height: auto;
		transition: .6s ease-in;
	}

	.section--Photo__right .imgWrap.aos-animate::after {
		width: 100%;
	}
@media screen and (max-width: 1239px){
	.section--Photo__right {
		padding-bottom: 4.4rem;
	}
	.section--Photo__right .imgWrap {
		width: auto;
		margin-left: 3.491755577%;
	}
	.section--Photo__right::before {
		top: 92px;
		right: 3.491755577%;
		width: auto;
		height: auto;
	}
}
@media screen and (max-width: 767px){
	.section--Photo__right {
		padding-bottom: 4.4rem;
	}
	.section--Photo__right .imgWrap {
		margin-left: calc(40/750*100vw);
	}
	.section--Photo__right::before {
		right: calc(40/750*100vw);
	}
}

	.section--twoPhoto__right {
		position: relative;
		margin-top: 8rem;
		padding-bottom: 8.7rem;
	}
	.section--twoPhoto__right::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(50% + 424px);
		height: 30rem;
		background: rgba(34, 18, 147, 1);
	}

	.section--twoPhoto__right .flex > div {
		width: calc(572/1232*100%);
	}

	.section--twoPhoto__right .flex {
		width: calc(50% + 512px);
		margin-left: 0;
		margin-right: auto;
	}
	.section--twoPhoto__right .imgWrap::after {
		content: "";
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		height: auto;
/*
		background: #fff;
*/
		transition: .6s ease-in;
	}
	.section--twoPhoto__right .imgWrap img {
		width: 100%;
		opacity: 0;
	}
	.section--twoPhoto__right .imgWrap.aos-animate::after {
		width: 100%;
	}
@media screen and (max-width: 1239px){
	.section--twoPhoto__right {
		padding-bottom: 4.4rem;
	}
	.section--twoPhoto__right .flex {
		width: auto;
	}
	.section--twoPhoto__right::before {
		top: 92px;
		right: 6.99%;
		width: auto;
		height: auto;
	}
}
@media screen and (max-width: 767px){
	.section--twoPhoto__right {
		margin-top: 4rem;
		padding-bottom: 4.4rem;
	}
	.section--twoPhoto__right .flex {
	}
	.section--twoPhoto__right::before {
		right: calc(92/750*100vw);
	}
}


	.section--boxImage {
		position: relative;
		margin-top: 8rem;
		padding-bottom: 8.7rem;
	}
	.section--boxImage .Kakoi {
		position: relative;
		padding: 5.9rem 5.5rem;/* bottom 3.7rem */
		border: solid 1px #ddd;
		background: #fff;
	}
	.section--boxImage .Kakoi.pb8 {
		padding: 5.9rem 5.5rem 8rem;
	}
/*
	.section--boxImage .Kakoi::after {
		content: "";
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: auto;
		background: #fff;
		transition: .6s ease-in;
	}
	.section--boxImage .Kakoi.aos-animate::after {
		width: 0;
	}
*/
	.section--boxImage::before {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(50% + 424px);
		height: 30rem;
		background: rgba(34, 18, 147, 1);
	}
	.box__lable {
		display: block;
		padding: 18px 10px 21px;
		background: rgba(34, 18, 147, 1);
		font-size: 2.4rem;
		font-weight: 900;
		line-height: 1;
		color: #fff;
		text-align: center;
	}
	.box__lable + .imgWrap {
		margin-top: 4.4rem;
	}
@media screen and (max-width: 1239px){
	.section--boxImage {
		margin-top: 4rem;
		padding-bottom: 4.4rem;
	}
	.section--boxImage::before {
		left: calc(80/750*100vw);
		width: auto;
	}
}
@media screen and (max-width: 767px){
	.section--boxImage {
		padding-bottom: 4.4rem;
	}
	.section--boxImage .Kakoi {
		padding: 3rem 2rem 2rem;
	}
	.section--boxImage .Kakoi.pb8 {
		padding: 3rem 2rem 4rem;
	}
	.section--boxImage::before {
		left: calc(80/750*100vw);
		height: 12.4rem;
	}

	.box__lable {
		padding: 1.5rem 1rem;
		font-size: 18px;
		line-height: 1.4;
	}
	.box__lable + .imgWrap {
		margin-top: 2.2rem;
	}
}

	.section--Photo {
		position: relative;
		overflow: hidden;
		padding-top: 8rem;
		padding-bottom: 8.7rem;
	}
	.section--Photo:before {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(50% + 424px);
		height: 30rem;
		background: rgba(34, 18, 147, 1);
	}
	.section--Photo .image {
		width: 1328px;
		left: calc(50% - 512px);
	}
	.section--Photo .image li {
		width: calc(384/1440*100vw);
		height: calc(368/1440*100vw);
		max-height: 368px;
		max-width: 384px;
	}

	.section--Photo .image li .mask-wrap {
		width: 0%;
		height: 100%;
		left: 0;
		transition: .4s ease-in;
		overflow: hidden;
		position: absolute;
	}
	.section--Photo .image li .mask-wrap.aos-animate {
		width: 100%;
	}
	.section--Photo .image li .mask-wrap .mask {
		width: calc(384/1440*100vw);
		height: calc(465/1440*100vw);
		max-height: 465px;
		max-width: 384px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.section--Photo .image li:nth-child(2) {
		transition-delay: .3s;
	}
	
	.section--Photo .image li:nth-child(3) {
		transition-delay: .6s;
	}
@media screen and (max-width: 1439px) {
	.section--Photo .image {
		width: calc(1328/1440*100%);
	}
}
@media screen and (max-width: 1087px) {
	.section--Photo {
		padding-top: 4rem;
		padding-bottom: 4.5rem;
	}
	.section--Photo:before {
		width: calc(1144/1440*100%);
		height: 20rem;
	}
	.section--Photo .image {
		left: 3.2rem;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.section--Photo:before {
		width: calc(565/750*100%);
		height: 14.2rem;
	}
	.section--Photo .image {
		left: calc(40/750*100%);
	}
	.section--Photo .image li {
		width: calc(352/750*100vw);
		height: calc(345/750*100vw);
		max-height: 345px;
		max-width: 352px;
	}
	.section--Photo .image li:first-child {
		margin-right: calc(13/750*100%);
	}
	.section--Photo .image li .mask-wrap .mask {
		width: calc(352/750*100vw);
		height: calc(345/750*100vw);
		max-height: 345px;
		max-width: 352px;
	}
}

	.section--logo {
		padding-top: 20rem;
	}

	.section--logo .flex {
		justify-content: center;
	}
	.section--logo .flex .clm2__item--logo {
		padding: 0 3.4rem;
	}
	.section--logo .flex .clm2__item--logo + .clm2__item--logo {
		margin-top: .5rem;
	}
@media screen and (max-width: 767px){
	.section--logo {
		padding-top: 10rem;
	}

	.section--logo .flex .clm2__item--logo {
		width: 100%;
		max-width: 247px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		text-align: center;
	}
	.section--logo .flex .clm2__item--logo + .clm2__item--logo {
		margin-top: 6rem;
	}
}

