@charset "UTF-8";
/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
/*body,*/
.p-unione {
	/*
  	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
  */
	/* to preserve line-height and selector appearance */
	/*to enable resizing for IE*/
	/*because legend doesn't inherit in IE */
	/* YUI CSS Detection Stamp */
}
.p-unione * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.p-unione div,
.p-unione dl,
.p-unione dt,
.p-unione dd,
.p-unione ul,
.p-unione ol,
.p-unione li,
.p-unione h1,
.p-unione h2,
.p-unione h3,
.p-unione h4,
.p-unione h5,
.p-unione h6,
.p-unione pre,
.p-unione code,
.p-unione form,
.p-unione fieldset,
.p-unione legend,
.p-unione input,
.p-unione textarea,
.p-unione p,
.p-unione blockquote,
.p-unione th,
.p-unione td {
	margin: 0;
	padding: 0;
}
.p-unione table {
	border-collapse: collapse;
	border-spacing: 0;
}
.p-unione fieldset,
.p-unione img {
	border: 0;
}
.p-unione address,
.p-unione caption,
.p-unione cite,
.p-unione code,
.p-unione dfn,
.p-unione em,
.p-unione strong,
.p-unione th,
.p-unione var {
	font-style: normal;
	font-weight: normal;
}
.p-unione ol,
.p-unione ul {
	list-style: none;
}
.p-unione caption,
.p-unione th {
	text-align: left;
}
.p-unione h1,
.p-unione h2,
.p-unione h3,
.p-unione h4,
.p-unione h5,
.p-unione h6 {
	font-size: 100%;
	font-weight: normal;
}
.p-unione q:before,
.p-unione q:after {
	content: '';
}
.p-unione abbr,
.p-unione acronym {
	border: 0;
	font-variant: normal;
}
.p-unione sup {
	vertical-align: super;
}
.p-unione sub {
	vertical-align: sub;
}
.p-unione input,
.p-unione textarea,
.p-unione select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
.p-unione input,
.p-unione textarea,
.p-unione select {
	*font-size: 100%;
}
.p-unione legend {
	color: #000;
}
.p-unione main {
	display: block;
}
.p-unione a:hover {
	opacity: 1;
}
.p-unione #yui3-css-stamp.cssreset {
	display: none;
}
.p-unione #wrapper img {
	vertical-align: bottom;
}

@media only screen and (min-width: 769px) {
	.spshow {
		display: none !important;
	}
}
@media only screen and (max-width: 768px) {
	.pcshow {
		display: none !important;
	}
	img {
		width: 100%;
	}
}
.bg_mask_theme_pattern,
.p-unione .p-unione_information__js-info--button::before,
.p-unione .p-unione_information__js-info--button::before {
	background: url('../common/images/theme_pattern.jpg')
		no-repeat center/cover;
	-webkit-mask-image: url('../common/images/theme_pattern.jpg');
	mask-image: url('../common/images/theme_pattern.jpg');
}

.p-unione {
	scroll-behavior: unset;
}
.p-unione * {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 100%;
	letter-spacing: initial;
}
.p-unione a {
	-webkit-transition: initial;
	transition: initial;
}
.p-unione a::focus {
	outline: none;
}
@media only screen and (min-width: 769px) {
	.p-unione a:hover {
		opacity: initial;
	}
}
.p-unione img {
	width: 100%;
}
.p-unione picture img {
	width: 100%;
	height: auto;
}
.p-unione .anim.on {
	opacity: 1;
	-webkit-transition:
		opacity 1s ease-out 0.3s,
		-webkit-transform 1s ease-out 0.3s;
	transition:
		opacity 1s ease-out 0.3s,
		-webkit-transform 1s ease-out 0.3s;
	transition:
		transform 1s ease-out 0.3s,
		opacity 1s ease-out 0.3s;
	transition:
		transform 1s ease-out 0.3s,
		opacity 1s ease-out 0.3s,
		-webkit-transform 1s ease-out 0.3s;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-unione .anim {
	will-change: transform, opacity;
	opacity: 0;
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
}
.p-unione .anim-fade.on {
	opacity: 1;
	-webkit-transition: opacity 1s ease-out 0.5s;
	transition: opacity 1s ease-out 0.5s;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-unione .anim-fade {
	will-change: opacity;
	opacity: 0;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_breadcrumbs {
		max-width: 1920px;
		margin: 0 auto;
		padding: 20px 40px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_breadcrumbs {
		padding: 3.6vw 5.3333333333vw 1.8vw;
		overflow-x: scroll;
	}
}
.p-unione .p-unione_breadcrumbs.bg-white {
	background-color: #fff;
}
.p-unione .p-unione_breadcrumbs ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_breadcrumbs ul {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 5px 10px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_breadcrumbs ul {
		gap: 1.3333333333vw 2.1333333333vw;
		word-break: keep-all;
	}
}
.p-unione .p-unione_breadcrumbs ul li {
	font-family:
		'ヒラギノ角ゴ W5 JIS2004',
		Hiragino Kaku Gothic W5 JIS2004,
		'Hiragino Kaku Gothic StdN',
		'游ゴシック',
		'Yu Gothic',
		'游ゴシック体',
		'YuGothic',
		'メイリオ',
		'meiryo',
		'Meiryo UI',
		'ＭＳ Ｐゴシック',
		'MS P Gothic',
		sans-serif;
	font-weight: 500;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_breadcrumbs ul li {
		font-size: 14px;
		line-height: 1.6;
		gap: 10px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_breadcrumbs ul li {
		font-size: 3.2vw;
		line-height: 1.2;
		gap: 2.1333333333vw;
	}
}
.p-unione .p-unione_breadcrumbs ul li + li:before {
	content: '';
	display: block;
	background: url('/common/images/ico_arrow_breadcrumbs.svg') no-repeat
		center/contain;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_breadcrumbs ul li + li:before {
		width: 7px;
		height: 9px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_breadcrumbs ul li + li:before {
		width: 1.3333333333vw;
		height: 1.8666666667vw;
	}
}

:root {
	--headerH: 0;
	--navH: 0;
}

body,
html {
	overflow-x: initial;
}

footer {
	overflow-x: hidden;
}

@property --percentage {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false;
}
.flex_center,
.p-unione .p-unione_form__txt .txt_box .btn_txt,
.p-unione .p-unione_form__txt .txt_box .btn_inner,
.p-unione .p-unione_form__txt .txt_box,
.p-unione .p-unione_information__js-info--button,
.p-unione .p-unione_mv .btn_txt,
.p-unione .p-unione_mv .btn_inner,
.p-unione .loading {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.inset_center {
	inset: 0;
	margin: auto;
}

.bg_mask_theme_pattern,
.p-unione .p-unione_information__js-info--button::before,
.bg_mask_theme_pattern02,
.txt_mask_theme_pattern,
.p-unione .p-unione_information__js-info--button span,
.p-unione .p-unione_information__inner h3 {
	background: url('../common/images/theme_pattern.jpg')
		no-repeat center/cover;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.txt_mask_theme_pattern02,
.p-unione {
	background: #fbfffa;
	width: 100%;
}
@media only screen and (min-width: 769px) {
	.p-unione {
	}
}
.p-unione video.eNone {
	pointer-events: none;
}
.p-unione .loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	color: #fff;
	font-size: 20px;
	opacity: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: background-color;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	z-index: 10001;
	-webkit-animation: load-bgc 3.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	animation: load-bgc 3.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	background-color: #3a4451;
}
@-webkit-keyframes load-bgc {
	0% {
		background-color: #3a4451;
	}
	100% {
		background-color: #3a4451;
	}
}
@keyframes load-bgc {
	0% {
		background-color: #3a4451;
	}
	100% {
		background-color: #3a4451;
	}
}
.p-unione .loading::before {
	content: '';
	display: inline;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	z-index: 1;
}
@media only screen and (min-width: 769px) {
	.p-unione .loading::before {
		border-radius: 10px;
		-webkit-backdrop-filter: blur(100px);
		backdrop-filter: blur(100px);
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .loading::before {
		border-radius: 2.1333333333vw;
		-webkit-backdrop-filter: blur(40px);
		backdrop-filter: blur(40px);
	}
}
.p-unione .loading .loading-svg {
	opacity: 0;
	-webkit-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
	will-change: opacity; /* 描画を最適化 */
	z-index: 1;
}
.p-unione .loading .loading-svg.fade-in {
	opacity: 1;
}
.p-unione .loading .loading-svg svg {
	position: absolute;
	display: block;
	inset: 0;
	margin: auto;
	z-index: 1;
}
@media only screen and (min-width: 769px) {
	.p-unione .loading .loading-svg svg {
		width: 430px;
		height: 61px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .loading .loading-svg svg {
		width: 57.3333333333vw;
		height: 8vw;
	}
}
@media only screen and (min-width: 1921px) {
	.p-unione .loading .loading-svg svg {
		width: 22.3958333333vw;
		height: 3.1770833333vw;
	}
}
.p-unione .loading .loading-svg svg .circle {
	width: 40px;
	height: 40px;
	-webkit-transform-origin: 20px 20px;
	transform-origin: 20px 20px;
	-webkit-animation: spin 5s linear infinite;
	animation: spin 5s linear infinite;
}
@media only screen and (min-width: 769px) {
	.p-unione .loading {
		background-size: 3896px 4646px;
		padding: 30px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .loading {
		background-size: 192.9333333333vw 236.5333333333vw;
		padding: 6vw 5.3333333333vw;
	}
}
@media (min-width: 3800px) {
	.p-unione .loading {
		background-size: cover;
	}
}
.p-unione .loading .bar {
	width: 300px;
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.2);
	margin: auto;
	position: relative;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	z-index: 1;
	bottom: -60px;
}
.p-unione .loading .bar:before {
	content: ' ';
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
	width: 100px;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	-webkit-animation: load 2s infinite;
	animation: load 2s infinite;
}
@-webkit-keyframes load {
	0% {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	100% {
		-webkit-transform: translateX(300px);
		transform: translateX(300px);
	}
}
@keyframes load {
	0% {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	100% {
		-webkit-transform: translateX(300px);
		transform: translateX(300px);
	}
}
@-webkit-keyframes spin {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}
@keyframes spin {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}
.p-unione .p-unione_mv {
	background: #fff;
	position: relative;
}
.p-unione .p-unione_mv .video-container {
	position: relative;
	width: 100%;
	height: calc(100dvh - var(--headerH));
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	text-align: center;
}
.p-unione .p-unione_mv .video-container::after {
	position: absolute;
	content: '';
	display: block;
	background: #fff;
	-webkit-mask: url('../common/images/logo.svg') no-repeat
		center/contain;
	mask: url('../common/images/logo.svg') no-repeat
		center/contain;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .video-container::after {
		width: 211px;
		height: 30px;
		left: 40px;
		top: 37px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_mv .video-container::after {
		width: 37.7333333333vw;
		height: 5.3333333333vw;
		left: 5.3333333333vw;
		top: 5.3333333333vw;
	}
}
@media only screen and (min-width: 1921px) {
	.p-unione .p-unione_mv .video-container::after {
		width: 10.9895833333vw;
		height: 1.5625vw;
	}
}
.p-unione .p-unione_mv video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.p-unione .p-unione_mv .btn {
	position: absolute;
	background: transparent;
	border: 1px solid #fff;
	text-decoration: none;
	opacity: 1;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .btn {
		min-width: 324px;
		height: 67px;
		border-radius: 32.5px;
		bottom: 55px;
		right: 50px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_mv .btn {
		min-width: 43.2vw;
		height: 8.9333333333vw;
		border-radius: 4.3333333333vw;
		bottom: 7.3333333333vw;
		right: 6.6666666667vw;
	}
}
.p-unione .p-unione_mv .btn_inner {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	position: relative;
	position: relative;
	-webkit-transition: background 0.3s;
	transition: background 0.3s;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .btn_inner {
		border-radius: 32.5px;
		-webkit-backdrop-filter: blur(8.75px);
		backdrop-filter: blur(8.75px);
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_mv .btn_inner {
		border-radius: 4.3333333333vw;
		-webkit-backdrop-filter: blur(1.1666666667vw);
		backdrop-filter: blur(1.1666666667vw);
	}
}
.p-unione .p-unione_mv .btn_txt {
	font-family:
		'ヒラギノ角ゴ W7 JIS2004',
		Hiragino Kaku Gothic W7 JIS2004,
		'Hiragino Kaku Gothic StdN',
		'游ゴシック',
		'Yu Gothic',
		'游ゴシック体',
		'YuGothic',
		'メイリオ',
		'meiryo',
		'Meiryo UI',
		'ＭＳ Ｐゴシック',
		'MS P Gothic',
		sans-serif;
	font-weight: 700;
	color: #fff;
	background: transparent no-repeat center/cover;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .btn_txt {
		gap: 12px;
		font-size: 21px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_mv .btn_txt {
		gap: 1.6vw;
		font-size: 2.6666666667vw;
	}
}
.p-unione .p-unione_mv .btn_txt::before {
	content: '';
	display: block;
	background: #fff;
	-webkit-mask: url(../common/images/ico_mov_play.svg)
		no-repeat center/contain;
	mask: url(../common/images/ico_mov_play.svg) no-repeat
		center/contain;
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .btn_txt::before {
		width: 13px;
		height: 16px;
	}
}
@media only screen and (max-width: 768px) {
	.p-unione .p-unione_mv .btn_txt::before {
		width: 1.7333333333vw;
		height: 2.1333333333vw;
	}
}
@media only screen and (min-width: 769px) {
	.p-unione .p-unione_mv .btn:hover .btn_inner {
		background: rgba(0, 0, 0, 0.05);
	}
}
.p-unione .p-unione #team {
	scroll-margin-top: 0;
}