@charset "UTF-8";

/* about */


#ttlTxt.visible {
    opacity: 1;
}


#aboutBg #pageHeader{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}


#aboutBg{
	position: relative;
	width: 100%;
}

#pageHeader.about h1{
	color: rgba(255,255,255,.1);
}

.page-id-7 .pageHeaderIn .ttlWrap .subTtl{
	color: rgba(255,255,255,.1);
}

#aboutTop{
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100); /* 実際のビューポート高さ */
	padding: 0;
	position: relative;
	margin-bottom: 390px;
}

#aboutTop .container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

#aboutTop .containerIn{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0% , -50%);
	height: auto;
	z-index: 100;
}

#aboutTop .containerIn .txtWrap{
	width: 440px;
	margin: 0 auto;
	position: relative;
}

.lang_en #aboutTop .containerIn .txtWrap{
	width: 90%;
	max-width: 880px;
}


@keyframes fadeInAndMove {
    0% {
        opacity: 0;
        left: 50%;
        transform: translate(-50% , 0);
    }
    50% {
        opacity: 1;
        left: 50%;
        transform: translate(-50% , 0);
    }
    100% {
        opacity: 1;
        left: 0;
        transform: translate(0 , 0);
    }
}


.fade-in {
  opacity: 0; /* 初期状態では透明に設定 */
  animation: fadeIn 3s ease-in-out forwards; /* アニメーション設定 */
}

#bgG{
	background: #F2F0EF;
	position: relative;
	z-index: 100;
}


.fixTxt {
    opacity: 0;
    transition: opacity 1s ease-in-out;   

}


.fixTxt.fadeIn {
    opacity: 1;
}


#scroll{
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
}



#aboutBg .video-top{
	position: fixed;
	width: 100%;
	height: 100vh;
}

#aboutMessage{
	padding-top: 154px;
	padding-bottom: 120px;
}

#aboutMessage .container .containerIn{
	width: 100%;
	max-width: 1038px;
	margin: 0 auto;
}


.aboutMessageIn{
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 80px;
	
}

.aboutMessageIn .img{
	width: 100%;
	max-width: 345px;
	float: left;
}

.aboutMessageIn .img{
	padding-top: 50px;
	position: relative;
	z-index: -1;
}

.aboutMessageIn .img img{
	padding-left: 20px;
	margin-bottom: 5px;
}


.aboutMessageIn .txtWrap{
	width: 100%;
	max-width: calc(100% - 385px);
	float: right;
}




.aboutMessageIn .txtWrap .txt{
	margin-bottom: 40px;
}


.aboutMessageIn .profile{
	background: rgba(14,23,55,.6);
	color: #fff;
	padding: 20px;
}


.aboutMessageIn .profile dd{
	display: block;
}




#company h3{
	display: inline-block;
	font-weight: bold;
	background: #FFF;
	padding: 0 50px;
	margin-bottom: 60px;
	font-size: 20px;
}

#company .companyIn{
	overflow: hidden;
}

#company .table{
	width: calc(50% - 20px);
	float: left;
}

#company .map{
	width: calc(50% - 20px);
	float: right;
}


#company table{
	width: 100%;
	position: relative;
	color: #0E1737;
}

#company table:before{
	content: "";
	width: 100%;
	height: 3px;
	background: url(../images/line.png);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}


#company tr{
	position: relative;
}

#company tr:after{
	content: "";
	width: 100%;
	height: 3px;
	background: url(../images/line.png);
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
}


#company th{
	width: 100%;
	width: 130px;
	text-align: left;
	padding: 20px 0;
}


#company td{
	padding: 20px 0;
}

#company .map iframe{
	width: 100%;
	height: 400px;
}

.aboutMessageIn .pcNone{
	display: none;
}

.aboutMessageIn .tabNone{
		display: block;
}

.video-background {
    position: fixed; /* 動画を固定位置に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* 動画をコンテンツの背景に配置 */
    background-image: url(../images/about/star.webp);
    background-position: top center;
    background-repeat: no-repeat;
}

.video-top video,
.video-background video{
    width: 100%; /* 動画をコンテナの幅に合わせる */
    height: 100%; /* 動画をコンテナの高さに合わせる */
    object-fit: cover; /* 動画をコンテナにフィットさせる */
}

.video-fade-out {
    opacity: 1;
    transition: opacity 2s ease-out; /* 2秒かけてフェードアウト */
}
.video-fade-out.ended {
    opacity: 0;
}


#scrolling-content{
	width: 90%;
	max-width: 1240px;
	margin: 0 auto;
	color: #FFF;
	position: relative;
	z-index: 2;
}

#aboutContents{
	overflow: visible;
	margin-top: 0;
}

.aboutContentsIn{
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.video-earth{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	height: 100%;
}

.earthIn{
	position: sticky;
	top: 300px;
	right: 0px;
	width: 100%;
	max-width: 700px;
}

.video-earth .earthIn video{
	width: 100%;
	height: auto;
}


#scrolling-content{
	padding: 200px 0;
}



.aboutContentsSec#mission,
.aboutContentsSec#vision{
	margin-bottom: 250px;
}
@media screen and (max-width: 1024px) {
	.aboutContentsSec#mission,
	.aboutContentsSec#vision{
		margin-bottom: 200px;
	}
}
@media screen and (max-width: 767px) {
	.aboutContentsSec#mission,
	.aboutContentsSec#vision{
		margin-bottom: 130px;
	}
}

.aboutContentsSecIn{
	margin-bottom: 150px;
	padding-left: 20px;
}





/* ローディング　*/

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    border: 3px solid #0E1737; /* 背景色 */
    border-top: 3px solid #A08B50; /* スピナーの色 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fade-out {
    opacity: 0;
    transition: opacity 2s ease;
}


.ending {
    animation: fadeOut 2s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.vaM{
	vertical-align: middle !important;
}


/* lang en */

#fadeInTxt{
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    height: auto;
    z-index: 100;
}

#fadeInTxt .fadeInTxtWrap{
	width: 90%;
	max-width: 856px;
	margin: 0 auto;
}