@charset "UTF-8";

* {

	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.clearfix:after {

	content: "";
	display: block;
	clear: both;
	
}

img {
	
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: none;
	
}

li {

	list-style: none;
	
}

a {

	color: #333;
	text-decoration: none;

}

::-moz-selection {
	
	color: #fff;
	background: #172141;
	
}

::selection {
	
	color: #fff;
	background: #172141;
	
}

html {

	min-width: 320px;
	font-size: 62.5%;
	overflow-x: hidden;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	
}

body {

	min-width: 320px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	color: #333;
	letter-spacing: 0.08em;
	-webkit-text-size-adjust: 100%;
	background: #DCD6D3;
	overflow-x: hidden;

}

main {
	
	display: block;

}

header {

	position: absolute;
	top:  0;
	left: 0;
	z-index: 3;
	padding-top:  3rem;
	padding-left: 2.7rem;

}

header h1 {
	
	width: 8.9rem;
	line-height: 1;

}

.main_navi {

	position: absolute;
	top:  10rem;
	left: 0;
	z-index: 3;
	width: 93.8rem;
	padding-left: 10.2rem;
	background: #172240;

}

.main_navi ul li {

	display: inline-block;

}

.main_navi ul li a {

	display: block;
	font-size: 1.4rem;
	margin: 0 1.2rem;
	padding: 1.2rem;
	color: #f3e9e3;
	letter-spacing: 0.69em;

}

@media (any-hover: hover) {

	.main_navi ul li a:hover {
		
		color: #000;
		background: #fff;
		
		color: #fff;
		background: #707684;
	
	}

}

.video {
	
	position: relative;
	z-index: 2;
	width: 100%;
	box-shadow: 0 1rem 1rem rgba(0,0,0, 0.4);

}

#greeting {

	position: relative;

}

#greeting .bg {

	float: right;
	width:  96%;
	height: 92.9rem;
	background-image: url('../img/digital.webp');
	background-size: cover;
	background-position: center center;
	transform: translateY(-1rem);

}

#greeting .txt {
	
	opacity: 0;
	position: absolute;
	top:  6.8rem;
	left: 3.2rem;
	z-index: 4;
	width:  75rem;
	height: 90.2rem;
	padding-right: 3rem;
	padding-top: 8rem;
	color: #f3e9e3;
	background: #172240;
	-webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  transform: translateX(6rem);

}

#greeting .txt.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#greeting .txt h2 {
	
	margin-left: 9rem;
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.65em;

}

#greeting .txt h2 span {

	display: inline-block;
	margin-top: 34.6rem;

}

#greeting .txt p {
	
	margin-top: 2.3rem;
	margin-left: 4rem;
	font-size: 1.6rem;
	line-height: 2.5;
	letter-spacing: 0.65em;

}

#greeting p.en {
	
	margin-left: 4.2rem;
	letter-spacing: 0.67em;

}

#greeting .txt p:last-child {

	margin-left: 0;

}

#news {

	padding-top: 13rem;

}

#news .inner {

	width: 87%;
	padding: 3rem;
	padding-right: 0;
	padding-bottom: 5rem;
	color: #010101;
	border: 0.2rem solid #010101;

}

#news .inner h2 {
	
	margin-bottom: 0.5em;
	font-size: 5rem;
	letter-spacing: 0.2em;
	border-bottom: 0.2rem solid #010101;

}

#news .inner ul li {
	
	margin-bottom: 1.5em;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.14em;

}

#news .inner ul li .txt:before {
	
	display: inline-block;
	margin-right: 0.5em;
	content: "\02192";

}

#news .inner ul li a {

	border-bottom: 0.2rem solid #010101;

}

#digital {
	
	padding-top: 22.6rem;
	
	padding-top: 13rem;

}

#digital .inner {

	width: 116rem;

}

#digital h2 {
	
	opacity: 0;
	position: relative;
	margin-bottom: 5.8rem;
	text-align: right;
	font-size: 2.4rem;
	line-height: 1.6;
	color: #010101;
	letter-spacing: 0.65em;
	transform: translateX(6rem);

}

#digital h2.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#digital h2:after {

	position: absolute;
	right:  0;
	bottom: -0.3rem;
	content: "";
	width: 102%;
	height: 0.2rem;
	background: #010101;

}

#digital h2 .block {
	
	display: inline-block;
	margin-right: 0.35em;
	padding: 0 0.2em;
	line-height: 1.5;
	color: #DCD6D3;
	background: #010101;
	letter-spacing: 0;

}

#digital h2 .en {

	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.55em;

}

#digital h2 .last {

	letter-spacing: 0;

}

#digital .bnr {
	
	opacity: 0;
	position: relative;
	display: block;
	height: 6.2rem;
	margin-bottom: 5rem;
  color: #fff;
	background: #172240;
	transform: translateX(6rem);
	transition: all 0.06s linear;

}

#digital .bnr.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

@media (any-hover: hover) {

	#digital .bnr:hover {
		
		color: #fff;
		background: #707684;
	
	}

}

#digital .bnr .ja {

	position: absolute;
	top:   1.1rem;
	right: 1rem;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.65em;

}

#digital .bnr .en {

	position: absolute;
	top:  3.0rem;
	left: 3.0rem;
	font-family: din-2014, sans-serif;
	font-style: normal;
  font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.45em;

}

#digital .list {
	
	position: relative;
	margin-top: 15rem;
	padding-top:    4.5rem;
	padding-bottom: 2.9rem;
	background: #938880;

}

#digital .list:after {

	position: absolute;
	top:  0;
	left: 0;
	z-index: -1;
	content: "";
	width:  100%;
	height: 100%;
	background: #938880;

}

#digital .list ul {
	
	opacity: 0;
	width: 100rem;
	margin: 0 auto;
	transform: translateX(6rem);

}

#digital .list ul.active {

	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s;

}

#digital .list ul li {
	
	float: left;
	width: 50%;
	margin-bottom: 0.7rem;
	padding-left: 5.8rem;
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.53em;

}

#digital .list ul li:nth-child(even) {

	padding-left: 6.4rem;

}

#digital .list ul li:before {
	
	display: inline-block;
	content: "";
	width:  0.8em;
	height: 0.8em;
	margin-right: 0.7em;
	background: #fff;
	transform: translateY(0.1rem);

}

#digital .list .bg_rect {

	position: absolute;
	top:   0;
	right: 0;
	z-index: 2;
	width:  44.2rem;
	height: 100%;
	background-image: url('../img/rect.webp');
	background-size: cover;
	background-position: center center;

}

#digital .list .bg_back {

	position: absolute;
	top:   0;
	right: 0;
	z-index: 1;
	width:  44.2rem;
	height: 100%;
	background: #DCD6D3;

}

footer {
	
	padding-top:    3.2rem;
	padding-bottom: 1.8rem;
	color: #fefefe;
	background: #172240;
}

footer a {

	color: #fefefe;
	transition: all 0.2s linear;

}

@media (any-hover: hover) {

	footer a:hover {
		
		color: #777;
	
	}
	
	footer .top_btn:hover {
	
		color: #fefefe;
	
	}

}

footer .map {
	
	display: block;
	height: 21.2rem;
	margin-bottom: 8.2rem;
	background-image: url('../img/map.webp');
	background-size: cover;
	background-position: center center;

}

footer .top_btn {
	
	display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 10.9rem;
	text-align: center;
	font-size: 3rem;
	font-weight: 900;
	line-height: 2.2;
	color: #fefefe;
	letter-spacing: 0.2em;
	transform: translateX(0.3rem);

}

footer .top_btn img {
	
	display: block;
	width: 4.7rem;
	transform: translateX(0.3em);

}

footer .logo {
	
	width: 16rem;
	margin: 0 auto;
	transform: translateX(-0.3rem);

}

footer .logo img {

	width: 100%;

}

footer .ja {
	
	text-align: center;
	font-family: toppan-bunkyu-midashi-go-std, sans-serif;
	font-style: normal;
  font-weight: 900;
	font-size: 4.8rem;
	line-height: 1;
	letter-spacing: 0.47em;
	transform: translateX(1rem);

}

footer .en {
	
	margin-top: 1rem;
	margin-bottom: 8.6rem;
	text-align: center;
	font-family: din-2014, sans-serif;
	font-style: normal;
  font-weight: 400;
	font-size: 3rem;
	letter-spacing: 0.18em;

}

footer .info {
	
	margin-left: 31.8rem;
	margin-bottom: 14.2rem;

}

footer .info p {
	
	margin-bottom: 2rem;
	font-size: 2rem;
	letter-spacing: 0.15em;

}

footer .info p.line2 {

	transform: translateX(-0.2em);

}

footer .info p.line3 {

	margin-bottom: 1.2rem;
	white-space: nowrap;

}

footer .info p.line4 {

	display: inline-block;

}

footer .copy {
	
	display: block;
	width: 100%;
	text-align: center;
	font-size: 2.4rem;
	letter-spacing: 0.175em;
	
}

footer .consul_navi1 {
	
	margin-bottom: 2.5rem;
	text-align: center;
	transform: translateX(1rem);

}

footer .consul_navi1 ul li {

	display: inline-block;
	margin: 0 3rem;
	font-size: 2.4rem;
	letter-spacing: 0.45em;

}

footer .consul_navi2 {
	
	margin-bottom: 4.7rem;
	text-align: center;
	transform: translateX(1rem);

}

footer .consul_navi2 ul li {

	display: inline-block;
	margin: 0 4.6rem;
	font-size: 2.4rem;
	letter-spacing: 0.45em;

}

/* トグル */
.menu {

	display: none;

}

/* スマホ改行 */
.sp_break {

	display: none;

}


@media only screen and (max-width: 1820px) {

	html {
		
		font-size: 59.25%;
		
	}

}


/* MacBook Pro16 */
@media only screen and (max-width: 1728px) {

	html {
		
		font-size: 56.25%;
		
	}

}


@media only screen and (max-width: 1670px) {

	html {
		
		font-size: 54.375%;
		
	}

}


@media only screen and (max-width: 1620px) {

	html {
		
		font-size: 52.75%;
		
	}

}


@media only screen and (max-width: 1570px) {

	html {
		
		font-size: 51.125%;
		
	}

}


/* MacBook Pro14 */
@media only screen and (max-width: 1512px) {

	html {
		
		font-size: 49.25%;
		
	}

}


@media only screen and (max-width: 1440px) {

	html {
		
		font-size: 46.875%;
		
	}

}


@media only screen and (max-width: 1400px) {

	html {
		
		font-size: 45.562%;
		
	}

}


/* 中サイズ */
@media only screen and (max-width: 1366px) {

	html {
		
		font-size: 44.4375%;
		
	}

}


@media only screen and (max-width: 1320px) {

	html {
		
		font-size: 43%;
		
	}

}


/* MacBook Air */
@media only screen and (max-width: 1280px) {

	html {
		
		font-size: 41.6875%;
		
	}
	
	#greeting .txt {
	
		width: 82rem;

	}
	
	.main_navi {

		width: 100rem;

	}

}

@media only screen and (max-width: 1240px) {

	html {
		
		font-size: 40.375%;
		
	}

}


@media only screen and (max-width: 1200px) {

	html {
		
		font-size: 39.0625%;
		
	}

}


/* iPad Pro11の横 */
@media only screen and (max-width: 1194px) {

	html {
		
		font-size: 38.875%;
		
	}

}


/* iPad 5th Airの横 */
@media only screen and (max-width: 1180px) {

	html {
		
		font-size: 38.4375%;
		
	}

}


/* iPad 6th Miniの横 */
@media only screen and (max-width: 1133px) {

	html {
		
		font-size: 36.875%;
		
	}

}


@media only screen and (max-width: 1100px) {

	html {
		
		font-size: 35.8125%;
		
	}

}


/* iPad 9thの横 */
@media only screen and (max-width: 1080px) {

	html {
		
		font-size: 35.8125%;
		
	}

}


/* iPadPro */
@media only screen and (max-width: 1024px) {

	html {
		
		font-size: 33.3125%;
		
	}
	
	header h1 {
	
		width: 10rem;

	}
		
	.main_navi {

		width: 100rem;
		top: 12rem;

	}
	
}


@media only screen and (max-width: 950px) {

	html {
		
		font-size: 30.937%;
		
	}
		
	header {

		top:  0;
		left: 0;
		z-index: 3;
		padding-top:  4rem;
		padding-left: 3rem;

	}

	header h1 {
		
		width: 20rem;

	}

	.main_navi {
		
		position: fixed;
		top:  0;
		left: 0;
		z-index: 10;
		width:  100%;
		height: 100%;
		padding-left: 0;
		display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  transform: scaleY(0);
	  transform-origin: top;
	  transition: transform 0.4s;

	}
	
	.main_navi.active {
	
	  transform: scaleY(1);
	
	}
	
	.main_navi ul li {
		
		opacity: 0;
		display: block;
		position: relative;
		margin-bottom: 3rem;
		transform: translateX(-20%);
	
	}
	
	.main_navi.active ul li {
	
		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s 0.5s;
	
	}
	
	.main_navi.active ul li:nth-child(2) { transition-delay: 0.6s; }
	.main_navi.active ul li:nth-child(3) { transition-delay: 0.7s; }
	.main_navi.active ul li:nth-child(4) { transition-delay: 0.8s; }
	.main_navi.active ul li:nth-child(5) { transition-delay: 0.9s; }
	
	.main_navi ul li:last-child {
	
		margin-bottom: 0;
	
	}

	.main_navi ul li a {

		font-size: 10rem;
		margin: 0;
		padding: 0;
		letter-spacing: 0.1em;

	}
	
	.main_navi ul li a:hover {
	
		color: #F3E9E3;
		background: #172240;
	
	}
	
	.main_navi ul li a:before {
	
		content: "";
		display: inline-block;
		width:  0.3em;
		height: 0.3em;
		margin-right: 0.5em;
		background: #f3e9e3;
		transform: translateY(-0.24em);
	
	}

	.video {
		
		z-index: 2;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.4);

	}

	#greeting .bg {

		float: right;
		width:  100%;
		height: 110rem;
		background-image: url('../img/digital.webp');
		transform: translateY(-1rem);

	}

	#greeting .txt {
		
		opacity: 0;
		top:  80rem;
		left: 0;
		z-index: 4;
		width:  90%;
		height: 160rem;
		padding-right: 6rem;
		padding-top: 10rem;
		-webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	  transform: translateX(6rem);

	}

	#greeting .txt.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#greeting .txt h2 {
		
		margin-left: 9rem;
		font-size: 5rem;
		letter-spacing: 0.65em;

	}

	#greeting .txt h2 span {

		margin-top: 56rem;

	}

	#greeting .txt p {
		
		margin-top: 2.3rem;
		margin-left: 6rem;
		font-size: 3.2rem;
		line-height: 2.5;
		letter-spacing: 0.65em;

	}

	#greeting p.en {
		
		margin-left: 4.2rem;
		letter-spacing: 0.67em;

	}
	
	#news {

		padding-top: 154rem;

	}

	#news .inner {

		width: 100%;
		padding: 4rem;
		padding-right: 0;
		padding-bottom: 8rem;
		border: 0.4rem solid #010101;

	}

	#news .inner h2 {
		
		margin-bottom: 0.5em;
		font-size: 11rem;
		letter-spacing: 0.2em;
		border-bottom: 0.2rem solid #010101;

	}

	#news .inner ul li {
		
		margin-bottom: 1.5em;
		padding-right: 4rem;
		font-size: 4rem;
		line-height: 1.8;
		letter-spacing: 0.14em;

	}

	#news .inner ul li .txt:before {
		
		margin-right: 0.5em;

	}

	#news .inner ul li a {

		border-bottom: 0.2rem solid #010101;

	}

	#digital {
		
		padding-top: 154rem;
		padding-top: 26rem;

	}

	#digital .inner {

		width: 94%;

	}

	#digital h2 {
		
		opacity: 0;
		margin-bottom: 10rem;
		font-size: 6rem;
		line-height: 1.8;
		letter-spacing: 0.65em;
		transform: translateX(6rem);

	}

	#digital h2.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital h2:after {

		right:  0;
		bottom: -0.8rem;
		width: 102%;
		height: 0.4rem;

	}

	#digital h2 .block {
		
		margin-right: 0.35em;
		padding: 0 0.2em;
		line-height: 1.5;

	}

	#digital h2 .en {

		font-size: 4rem;
		letter-spacing: 0.55em;

	}

	#digital .bnr {
		
		opacity: 0;
		height: 16rem;
		margin-bottom: 8rem;
		transform: translateX(6rem);
		transition: all 0.06s linear;

	}

	#digital .bnr.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital .bnr .ja {

		top:   3.4rem;
		right: 2rem;
		font-size: 5rem;
		letter-spacing: 0.5em;

	}

	#digital .bnr .en {

		top:  8.4rem;
		left: 4.0rem;
		font-size: 3rem;
		letter-spacing: 0.4em;

	}

	#digital .list {
		
		margin-top: 32rem;
		padding-top:    8rem;
		padding-bottom: 6rem;
		background: #938880;

	}

	#digital .list:after {

		top:  0;
		left: 0;
		z-index: -1;
		width:  100%;
		height: 100%;
		background: #938880;

	}

	#digital .list ul {
		
		opacity: 0;
		width: auto;
		margin: 0;
		padding-left: 5%;
		transform: translateX(6rem);

	}

	#digital .list ul.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital .list ul li {
		
		float: none;
		width: 100%;
		margin-bottom: 1.8rem;
		padding-left: 0;
		font-size: 5rem;
		letter-spacing: 0.4em;

	}

	#digital .list ul li:nth-child(even) {

		padding-left: 0;

	}

	#digital .list ul li:before {
		
		width:  0.8em;
		height: 0.8em;
		margin-right: 0.7em;
		transform: translateY(0.1rem);

	}

	#digital .list .bg_rect {

		top:   0;
		right: 0;
		z-index: 2;
		width:  66.3rem;
		height: 39.6rem;
		background-image: url('../img/rect.webp');

	}

	#digital .list .bg_back {

		top:   0;
		right: 0;
		z-index: 1;
		width:  66.3rem;
		height: 39.6rem;
		background: #DCD6D3;

	}

	footer {
		
		padding-top:    6rem;
		padding-bottom: 6rem;
		
	}

	footer .map {
		
		height: 40rem;
		margin-bottom: 15rem;
		background-image: url('../img/map.webp');

	}

	footer .top_btn {
		
	  margin-bottom: 14rem;
		font-size: 6rem;
		line-height: 2.2;
		letter-spacing: 0.2em;
		transform: translateX(0.3rem);

	}

	footer .top_btn img {
		
		width: 8rem;
		transform: translateX(0.45em);

	}

	footer .logo {
		
		width: 24rem;
		transform: translateX(0);

	}

	footer .ja {
		
		font-size: 6.8rem;
		letter-spacing: 0.3em;
		transform: translateX(0);

	}

	footer .en {
		
		margin-top: 2rem;
		margin-bottom: 26rem;
		font-size: 4.8rem;
		letter-spacing: 0.2em;

	}

	footer .info {
		
		text-align: center;
		margin-left: 0;
		margin-bottom: 14rem;

	}

	footer .info p {
		
		margin-bottom: 3rem;
		font-size: 4.6rem;
		letter-spacing: 0.15em;

	}

	footer .info p.line2 {

		transform: translateX(-0.2em);

	}

	footer .info p.line3 {

		margin-bottom: 3rem;

	}

	footer .copy {
		
		font-size: 4rem;
		letter-spacing: 0.15em;
		
	}

	footer .consul_navi1 {
		
	  width: -moz-fit-content;
  	width: fit-content;
  	margin: 0 auto;
		margin-bottom: 12rem;
		text-align: left;
		transform: translateX(0);

	}

	footer .consul_navi1 ul li {
		
		display: block;
		margin: 0;
		margin-bottom: 1rem;
		font-size: 5rem;
		letter-spacing: 0.35em;

	}

	footer .consul_navi2 {
		
		width: 60%;
		margin: 0 auto;
		margin-bottom: 9rem;
		text-align: left;
		transform: translateX(5%);

	}

	footer .consul_navi2 ul li {
		
		display: block;
		float: left;
		width: 50%;
		margin: 0;
		margin-bottom: 2rem;
		font-size: 5rem;
		letter-spacing: 0.35em;

	}
	
	/* トグル */
	#menu {
		
		opacity: 0;
  	visibility: hidden;
		display: block;
	  position: fixed;
	  top:    3rem;
	  right:  2%;
	  z-index: 10000;
	  width:  12rem;
	  height: 12rem;
	  background: #172240;
	  cursor: pointer;
	  transition: all 0.1s;
		
	}
	
	#menu.fade-in {
	
		opacity: 1;
  	visibility: visible;
	
	}
	
	.menu__line {
		
		position: absolute;
	  display: block;
	  width:  60%;
	  height: 2px;
	  background: #fff;
	  transition: all 0.3s;
	  
	}
	
	.menu__line--top {
		
		top:  25%;
		left: 20%;
	
	}
	
	.menu__line--center {
		
	  top:   47%;
	  right: 20%;
	  
	}
	
	.menu__line--bottom {
		
	  bottom: 25%;
	  left:   20%;
	  
	}
	
	#menu.active .menu__line--top {
	
	  top: 50%;
	  transform: rotate(45deg);
	  
	}
	
	#menu.active .menu__line--center {
		
	  transform: scaleX(0);
	  
	}
	
	#menu.active  .menu__line--bottom {
	
	  bottom: 46%;
	  transform: rotate(135deg);
	  
	}

}


/* iPhone14 ProMaxの横 */
@media only screen and (max-width: 932px) {

	html {
		
		font-size: 30.937%;
		
	}
	
}


/* XRの横 */
@media only screen and (max-width: 896px) {

	html {
		
		font-size: 29.2%;
		
	}
	
}


/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {

	html {
		
		font-size: 27.8125%;
		
	}

}


/* iPhone14 Proの横 */
@media only screen and (max-width: 852px) {

	html {
		
		font-size: 27.75%;
		
	}

}


/* iPhone14の横*/
@media only screen and (max-width: 844px) {

	html {
		
		font-size: 27.5%;
		
	}

}



/* iPad Pro11 */
@media only screen and (max-width: 834px) {

	html {
		
		font-size: 27.125%;
		
	}

}


/* iPad Air */
@media only screen and (max-width: 820px) {

	html {
		
		font-size: 26.687%;
		
	}

}


/* iPhone13 miniの横 */
@media only screen and (max-width: 812px) {

	html {
		
		font-size: 26.437%;
		
	}

}


/* iPad 9th */
@media only screen and (max-width: 810px) {

	html {
		
		
		
	}

}


/* iPad */
@media only screen and (max-width: 768px) {

	html {
		
		font-size: 25%;
		
	}

}


/* iPad 6th Mini */
@media only screen and (max-width: 744px) {

	html {
		
		font-size: 24.25%;
		
	}

}


/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {

	html {
		
		font-size: 23.937%;
		
	}

}


/* iPhone8の横 */
@media only screen and (max-width: 667px) {

	html {
		
		font-size: 21.687%;
		
	}

}


/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	html {
		
		font-size: 18.5%;
		
	}

}


/* AndLoidL */
@media only screen and (max-width: 480px) {

	html {
		
		font-size: 15.625%;
		
	}
	
	header {

		padding-top:  6rem;
		padding-left: 2%;

	}

	header h1 {
		
		width: 30rem;

	}

	.main_navi ul li {
		
		opacity: 0;
		display: block;
		margin-bottom: 3rem;
		transform: translateX(-20%);
	
	}
	
	.main_navi.active ul li {
	
		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s 0.5s;
	
	}

	.main_navi ul li a {

		font-size: 15rem;
		letter-spacing: 0.1em;

	}

	.video {
		
		z-index: 2;
		box-shadow: 0 1rem 1rem rgba(0,0,0, 0.4);

	}

	#greeting .bg {

		height: 165rem;
		background-image: url('../img/digital.webp');
		background-position: top left 35%;
		transform: translateY(-3rem);

	}

	#greeting .txt {
		
		opacity: 0;
		top:  110rem;
		left: 0;
		width:  91%;
		height: 246rem;
		padding-right: 8rem;
		padding-top: 12rem;
	  transform: translateX(6rem);
	  white-space: nowrap;

	}

	#greeting .txt.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#greeting .txt h2 {
		
		margin-left: 10rem;
		font-size: 8rem;
		letter-spacing: 0.65em;

	}

	#greeting .txt h2 span {

		margin-top: 92rem;

	}

	#greeting .txt p {
		
		margin-top: 5rem;
		margin-left: 5rem;
		font-size: 5.4rem;
		line-height: 1.95;
		letter-spacing: 0.42em;

	}

	#greeting p.en {
		
		margin-left: 5rem;
		letter-spacing: 0.6em;

	}
	
	#news {

		padding-top: 216rem;

	}

	#news .inner {

		width: 100%;
		padding: 4rem;
		padding-right: 0;
		padding-bottom: 8rem;
		border: 1px solid #010101;

	}

	#news .inner h2 {
		
		margin-bottom: 0.5em;
		font-size: 13rem;
		letter-spacing: 0.2em;
		border-bottom: 1px solid #010101;

	}

	#news .inner ul li {
		
		margin-bottom: 1.5em;
		padding-right: 2rem;
		font-size: 5.4rem;
		line-height: 1.8;
		letter-spacing: 0.06em;

	}

	#news .inner ul li .txt:before {
		
		margin-right: 0.5em;

	}

	#news .inner ul li a {

		border-bottom: 1px solid #010101;

	}

	#digital {
		
		padding-top: 216rem;
		padding-top: 34rem;

	}

	#digital .inner {

		width: 94%;

	}

	#digital h2 {
		
		opacity: 0;
		margin-bottom: 13rem;
		font-size: 8.2rem;
		line-height: 1.8;
		letter-spacing: 0.65em;
		transform: translateX(6rem);

	}

	#digital h2.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital h2:after {

		right:  0;
		bottom: -0.8rem;
		width: 102%;
		height: 0.4rem;

	}

	#digital h2 .block {
		
		margin-right: 0.35em;
		padding: 0 0.2em;
		line-height: 1.5;

	}

	#digital h2 .en {

		font-size: 5.6rem;
		letter-spacing: 0.55em;

	}

	#digital .bnr {
		
		opacity: 0;
		height: 20rem;
		margin-bottom: 8rem;
		transform: translateX(6rem);
		transition: all 0.06s linear;

	}

	#digital .bnr.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital .bnr .ja {

		top:   4.4rem;
		right: 2rem;
		font-size: 6rem;
		letter-spacing: 0.4em;

	}

	#digital .bnr .en {

		top:  9.4rem;
		left: 4.0rem;
		font-size: 4.8rem;
		letter-spacing: 0.2em;

	}

	#digital .list {
		
		margin-top: 44rem;
		padding-top:    10rem;
		padding-bottom: 8rem;

	}

	#digital .list:after {

		top:  0;
		left: 0;
		width:  100%;
		height: 100%;

	}

	#digital .list ul {
		
		opacity: 0;
		width: auto;
		padding-left: 5%;
		transform: translateX(6rem);

	}

	#digital .list ul.active {

		opacity: 1;
		transform: translateX(0);
		transition: all 0.4s;

	}

	#digital .list ul li {
		
		margin-bottom: 2.2rem;
		font-size: 6.8rem;
		letter-spacing: 0.3em;

	}

	#digital .list .bg_rect {

		top:   0;
		right: 0;
		z-index: 2;
		width:  66.3rem;
		height: 39.6rem;
		background-image: url('../img/rect.webp');

	}

	#digital .list .bg_back {

		top:   0;
		right: 0;
		z-index: 1;
		width:  66.3rem;
		height: 39.6rem;

	}

	footer {
		
		padding-top:    8rem;
		padding-bottom: 8rem;
		
	}

	footer .map {
		
		height: 50rem;
		margin-bottom: 18rem;
		background-image: url('../img/map.webp');

	}

	footer .top_btn {
		
	  margin-bottom: 15rem;
		font-size: 8rem;
		line-height: 2.2;
		letter-spacing: 0.2em;
		transform: translateX(0.3rem);

	}

	footer .top_btn img {
		
		width: 10rem;
		transform: translateX(0.45em);

	}

	footer .logo {
		
		width: 34rem;

	}

	footer .ja {
		
		font-size: 7.8rem;
		letter-spacing: 0.14em;

	}

	footer .en {
		
		margin-top: 3.6rem;
		margin-bottom: 34rem;
		font-size: 5.4rem;
		letter-spacing: 0.2em;

	}

	footer .info {
		
		margin-bottom: 18rem;

	}

	footer .info p {
		
		margin-bottom: 3.4rem;
		font-size: 5.8rem;
		letter-spacing: 0.08em;

	}

	footer .info p.line2 {

		transform: translateX(0);

	}

	footer .info p.line3 {

		margin-bottom: 3.4rem;

	}

	footer .copy {
		
		font-size: 4.8rem;
		letter-spacing: 0.1em;
		
	}

	footer .consul_navi1 {
		
		margin-bottom: 18rem;

	}

	footer .consul_navi1 ul li {
		
		margin-bottom: 2rem;
		font-size: 6.8rem;
		letter-spacing: 0.35em;

	}

	footer .consul_navi2 {
		
		width: 60%;
		margin-bottom: 12rem;
		transform: translateX(5%);

	}

	footer .consul_navi2 ul li {
		
		float: left;
		width: 50%;
		margin-bottom: 3rem;
		font-size: 6.8rem;
		letter-spacing: 0.35em;

	}
	
	/* トグル */
	#menu {
		
	  top:    4rem;
	  right:  2%;
	  width:  24rem;
	  height: 24rem;
		
	}
	
	.menu__line {
		
		position: absolute;
	  display: block;
	  width:  60%;
	  height: 2px;
	  background: #fff;
	  transition: all 0.3s;
	  
	}
	
	.menu__line--top {
		
		top:  25%;
		left: 20%;
	
	}
	
	.menu__line--center {
		
	  top:   47%;
	  right: 20%;
	  
	}
	
	.menu__line--bottom {
		
	  bottom: 25%;
	  left:   20%;
	  
	}
	
	#menu.active .menu__line--top {
	
	  top: 50%;
	  transform: rotate(45deg);
	  
	}
	
	#menu.active .menu__line--center {
		
	  transform: scaleX(0);
	  
	}
	
	#menu.active  .menu__line--bottom {
	
	  bottom: 46%;
	  transform: rotate(135deg);
	  
	}

}


/* Iphone13 Pro Max */
@media only screen and (max-width: 430px) {

	html {
		
		font-size: 14%;
		
	}

}


/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {

	html {
		
		
		
	}

}


/* iPhonePlus */
@media only screen and (max-width: 414px) {

	html {
		
		font-size: 13.5%;
		
	}

}


/* iPhone14 Pro */
@media only screen and (max-width: 393px) {

	html {
		
		font-size: 12.812%;
		
	}

}


/* iPhone12 Pro */
@media only screen and (max-width: 390px) {

	html {
		
		font-size: 12.687%;
		
	}

}


/* iPhone8 */
@media only screen and (max-width: 375px) {

	html {
		
		font-size: 12.187%;
		
	}

}


/* Galaxy */
@media only screen and (max-width: 360px) {

	html {
		
		font-size: 11.75%;
		
	}

}


/* iPhone5 */
@media only screen and (max-width: 320px) {

	html {
		
		font-size: 10.437%;
		
	}

}