@charset "UTF-8";
/*!
 * File Name: lp-mvv.css 
 */


.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}

	.mvv-inn-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
		white-space: nowrap;
		color: #67bbde;
/*
		background: #ccc;
		*/
	}
	
	.mvv-inn-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
		white-space: nowrap;
		line-height: 1.9;
		margin: -1.1rem 0 0 0;
/*
		background: #ccc;
		*/
	}


.logo {
	width: 249px;
	/*
	padding: 5px 0;
	*/
}

main p {
	text-align: justify;
	text-align-last: left;
}

.sp-only {
	display: none;
}

.c-section > .title > .jp {
	width: fit-content;
}

	.c-section > .title > .jp:after {
		content: "";
		width: 40px;
		height: 3px;
		background-color: #001a43;
		position: absolute;
		right: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}




.c-section > .title > .en {
	font-weight: bold;
	word-wrap: break-word;
}

/* 冒頭文
--------------------------------------*/
.opening_sentence {
	width: fit-content;
	display: table;
	margin: 4rem auto;
}


.opening_sentence p {
	/*
	text-align: center;
	*/
}

/* MVV
--------------------------------------*/
.mvv-inn-area {
	display: flex;
	flex-wrap: wrap;
	padding: 2rem;
}

.mvv-inn-area img {
	width: inherit !important;
	height: auto;
	display: block;
}



.inn-text-big {
	line-height: 1.5 !important;
}

.opening_sentence p {
	opacity: 0.1
}


/*
.logo-inn-area {
	display: flex;
	flex-wrap: wrap;
}
*/


	.logo-inn-area h3 {
		width: 100%;
		margin: 0 auto 2rem auto;
		text-align: center;
		font-size: 2rem;
		font-weight: bold;
		padding: 1rem;
		/*
		display: table;
		border-bottom: 3px solid #a9a738;
		background: #96eaf3;
		*/
}
		
		
	.logo-inn-area-logos {
		margin: 0 auto 4rem;
	}

	.logo-inn-area-read {
		margin: 0 auto 4rem;
	}

	.logo-inn-area-logos img {
		display: block
	}

.logo1 {
	margin-bottom: 3.5rem;
}

	.story-area p {
        margin-bottom: 2.0rem;
	}
	
	.logo-inn-area-read p {
		margin-bottom: 3.0rem;
	}


	.story-area p:last-of-type, .logo-inn-area-read p:last-of-type {
		margin-bottom: 0;
}





@media  print {
	.mvv-inn-area {
		justify-content: space-between;
		margin: 0 auto 10vh auto;
        width: 99%;
	}

	.mvv-inn-area .mvv-inn-title {
		font-size: 3.5rem;
		width: 30%;
		text-align: right;
		}


	.mvv-inn-title-eng {
		font-size: 5.5rem;
		font-weight: bold;
	}


	.mvv-inn-area .mvv-inn-text {
		width: 65%;
	}

	/*-- 五箇条の文字サイズ --*/
	.inn-text-normal {
		font-size: 4.5rem;
	}


	/*-- 文字を特に大きくしたい箇所 --*/
	.inn-text-big {
		font-size: 6rem;
	}
}



@media screen and (min-width:750px) {
	.mvv-inn-area {
		justify-content: space-between;
		margin: 0 0 15vh auto;
        width: 90%;
	}

	.mvv-inn-area .mvv-inn-title {
		font-size: 3vmin;
		width: 30%;
		text-align: right;
		}

		.mvv-inn-title-eng {
			font-size: 5vmin;
			font-weight: bold;
		}

	
	.mvv-inn-area .mvv-inn-text {
		width: 65%;
	}

	/*-- 五箇条の文字サイズ --*/
	.inn-text-normal {
		font-size: 4vmin;
	}
	
	
	/*-- 文字を特に大きくしたい箇所 --*/
	.inn-text-big {
		font-size: 5.5vmin;
	}
}



@media screen and (min-width:750px), print {



	.c-section > .title {
		margin:100px auto !important;
		width: fit-content;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.title_mini {
		font-size: 40px;
	}

	.c-section > .title > .jp {
		padding-right: 60px;
	}

	
	.c-section > .title > .en {
		width: 100%;
	}

	.opening_sentence {
	    max-width: 70%;
	}

	.opening_sentence p {
		font-size: 18px;
		margin-bottom: 3.5rem;
	}



	.story-area {
		column-count: 3;
		column-gap: 4rem;
	}
	.story-area p {
		break-inside:avoid;
		font-size: 20px;
		margin-bottom: 3rem;
	}
	
	
	.logo-inn-area {
		display: flex;
		flex-wrap: wrap;
		padding: 2rem;
		justify-content: space-between;
		align-items: center;
	}

	.logo-inn-area-logos {
		width: 40%;
	}

	.logo-inn-area-read {
		width: 50%;
	}
/*	
	.logo-inn-area-logos {
		width: 70%;
	}

	.logo-inn-area-read {
				width: 70%;
	}
*/

	
	.logo1 {
		max-width: 250px;
		height: auto;
		margin: 0 auto 4rem auto;
	}	

	.logo3 {
		max-width: 180px;
		height: auto;
		margin: 0 auto 3rem auto;
	}	

	
	.logo-inn-area-read p {
		font-size: 18px;
	}


}


@media screen and (max-width:750px) {

	.c-section > .title {
		margin:50px auto !important;
	}

	.title_mini {
		font-size: 20px;
	}
	
	.c-section > .title > .jp {
		padding-right: 40px;
	}

	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}


	.c-section > .title > .jp:after {
		width: 30px;
	}


	.opening_sentence p {
		margin-bottom: 2.0rem;
	}

	.mvv-inn-area {
		margin-bottom: 5vh;
	}

	.mvv-inn-area .mvv-inn-title {
		width: 100%;
		margin-bottom: 2rem;
		        font-size: 5vmin;
		}

	/*-- mvv-inn-title 英語部分 --*/
		.mvv-inn-title-eng {
			font-size: 8vmin;
			font-weight: bold;
		}

	
	.mvv-inn-area .mvv-inn-text {
		width: 100%;
		font-size: 4.5vmin;
	}
	
	.logo1, .logo3 {
		width: 70%;
		height: auto;
		margin: 0 auto 4rem auto;
	}	

	
}



/*==================================================
フェード
===================================*/

.lz_a {
  opacity: 0.1;
  transition: all .5s ease;
}

.lz_a.show {
  opacity: 1;
  transform: none;
}

.lz_a--lr {
  transform: translate(-100px, 0);
}

.lz_a--rl {
  transform: translate(100px, 0);
}

.lz_a--up {
  transform: translate(0, 100px);
}

.lz_a--down {
  transform: translate(0, -100px);
}

.lz_a--scaleUp {
  transform: scale(.5);
}

.lz_a--scaleDown {
  transform: scale(1.5);
}

.lz_a--rotateL {
  transform: rotate(180deg);
}

.lz_a--rotateR {
  transform: rotate(-180deg);
}



