@import url("reset.css");
body{
	font-family: "Noto Sans JP", sans-serif;
}
.ddba{
	position: absolute;
	left: 40px;
    top: 30px;
    font-size: 14px;
	text-align: justify;
    text-align-last: justify;
    line-height: 1.2;
}

.fixed-contact {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    display: flex;
    align-items: center; /* 文字とアイコンの上下中央を揃える */
    gap: 12px;           /* 文字とアイコンの間の距離 */
    border-radius: 10px;
    background: #c9caca;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s ease;
}
.fixed-contact:hover{
	opacity: 0.8;
}
.contact-icon {
    width: 20px;  /* アイコンのサイズを調整 */
    height: auto;
    display: block;
}
.fixed-bottom-right {
    position: fixed;
    bottom: 50px; /* 下からの距離 */
    right: 30px;  /* 右からの距離 */
    z-index: 100;
    
    /* 動きの演出を入れるなら */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-icon {
    width: 16px;  /* サイズは適宜調整してください */
    height: auto;
    display: block;
    cursor: pointer;
}

/* ホバーした時に少し浮き上がらせる演出 */
.fixed-bottom-right:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}
#top-main{
	width: 100vw;
	height: 100vh;
	display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    overflow: hidden;
}
#top-main .logos{
	display: flex;
	flex-direction: column;
align-items: center;
gap:16px;
transform: translateY(20px);
}
#top-main .logo{
width: 220px;
}
#top-main .aerial{
width: 540px;
}
#top-main .sub{
width: 415px;
}
.logos p {
    margin-top: 120px; /* ここで「離れ具合」を自由に調整 */
    font-size: 16px;
    letter-spacing: 0.1em;
}
.mask-wrap {
    overflow: hidden; /* 枠からはみ出た画像を表示しない */
}
.mask-wrap img ,.mask-wrap p{
    display: block;
    transform: translateY(105%); /* 最初は枠の下に隠す */
    animation: maskUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* 1枚目：即座に開始 */
.logos .mask-wrap:nth-child(1) img { animation-delay: 0.1s; }

/* 2枚目：0.3秒遅らせる */
.logos .mask-wrap:nth-child(2) img { animation-delay: 0.4s; }

/* 3枚目：さらに0.3秒遅らせる */
.logos .mask-wrap:nth-child(3) img { animation-delay: 0.7s; }

/* テキスト：最後にスッと出す */
.logos .mask-wrap:nth-child(4) p { 
    animation-delay: 1.2s; 
    opacity: 1; /* Pタグは最初から見えていても良いなら調整 */
}
@keyframes maskUp {
    0% {
        transform: translateY(105%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
body {
    overflow-x: hidden;
}
.scene {
    position: relative;
    width: 100%;
    height: 100vh; /* 最初は画面ぴったり */
    overflow: hidden;
}

.bg-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
}

.bg-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}

/* 白地の初期状態 */
.white-panel {
    position: absolute;
    top: 0; width: 42%; height: 100vh;
    background: #fff;
    z-index: 2;
}
.white-panel.left { left: -42%; }   /* 左の外に待機 */
.white-panel.right { right: -42%; } /* 右の外に待機 */

/* テキストの初期状態 */
.scroll-text-wrapper {
    position: absolute;
    top: 0; width: 42%;
    z-index: 10;
    /* 大事：最初は画面の下に隠しておく */
    transform: translateY(100vh); 
}
.scroll-text-wrapper.left { left: 0; }
.scroll-text-wrapper.right { right: 0; }

.text-content { padding: 60px 40px 60px 100px; }

.text-content h2{
font-weight: 500;
font-size: 26px;
margin-bottom: 30px;
}
.text-content h3,.flow-contents h3,.faq h3{
	font-size: 20px;
	margin-top: 80px;
	margin-bottom: 20px;
}
.text-content p{
	line-height: 2;
	margin-bottom: 50px;
	font-weight: 300;

}
.text-content h3 ,.drone-text h3,.flow-contents h3,.faq h3{
    display: flex;
    align-items: center; /* アイコンと文字の垂直中央揃え */
    gap: 0.5em;          /* アイコンと文字の間隔 */
}

.text-content h3::before,.drone-text h3::before,.flow-contents h3::before ,.faq h3::before{
    content: "";
    display: inline-block;
    width: 13px;  /* 文字の大きさに合わせる */
    height: 13px;
    /* ここにSVGのコードを記述（下記はカメラアイコンの例） */
    background-image: url("../image/dot_orange.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.text-content h3 + p{
	margin-left: 20px;
}
#scene-right .text-content{
	padding:60px 100px 60px 40px;
}
#scene-right .text-content h3 {
display: block;
}
#scene-right .text-content h3::before{
	background-image: none;
}
.drone-text{
	width: 100%;
	max-width: 1100px;
	margin:100px auto;
}
.drone-text h3{
	font-size: 22px;
	margin-bottom: 40px;
}
.drone-text h4{
font-size: 20px;
margin:  0 0 20px 26px;
color: #2f2725;
}
.drone-text p{
	font-weight: 300;
	margin:  0 0 40px 26px;
	line-height: 1.6;
	color: #2f2725;
}
.drone-text ul{
margin:  40px 0 0px 26px;
font-size: 18px;
}
.drone-text li{
	margin-bottom: 20px;
}
.full-bg .scroll-text-wrapper.center {
    width: 100%;       /* 全幅で使う */
    left: 0;
}

.full-bg .text-content {
    max-width: 1100px;  /* 読みやすい幅に制限 */
    margin: 0 auto;
    color: #fff;       /* 写真の上なので白文字が映える */
    
}

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    z-index: 1;
}
#scene-3 .text-content{
	padding: 60px 0;
}
#scene-3 h3{
margin-bottom: 40px;
}
#scene-3 h4{
margin: 0 0 20px 22px;
    font-size: 18px;
}
#scene-3 p{
	margin: 0 0 40px 22px;
}
#scene-3 ul{
	margin: 0 0 10px 22px;
	font-size: 18px;
}
#scene-3 ul li{
	margin: 0px 0 20px;
}
#scene-3 ul li:last-child{
	margin-bottom: 0;
}
#scene-3 ul.dot-list{
list-style: disc;
    margin: 0 0 30px 44px;
    font-weight: 300;
}
#scene-3 ul.dot-list li{

}
#scene-3 hr{
	margin: 100px 0;
    border: none;
    border-bottom: solid #fff 1px;
}
#flow {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sticky-wrapper {
    width: 100%;
    height: 100vh;
}

.flow-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../image/bg_text.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: right center;
    z-index: 1;
}
.flow-panel {
    position: absolute;
    top: 0;
    /* 初期位置：画面の左端の外 */
    left: -100%; 
    /* 幅はデザインに合わせて（例：上の1100の左端から画面中央までなら550px） */
    width: 550px; 
    height: 100%;
    
    z-index: 2;
}
.flow-contents{
	width: 1100px;
	height: 100%;
	margin: 0 auto;
	padding: 150px 0 0 0;
}
.flow-contents ul{
list-style: decimal;
    margin: 40px 0 0 40px;
    font-size: 18px;
}
.flow-contents ul li{
	margin: 0 0 40px 0;
}
.faq-wrapper {
   position: absolute;
    top: 100%;
    /* FAQの左端を上のコンテンツの1100ラインに合わせる */
    left: calc(50% - 550px);
    width: 1100px;
    z-index: 3;
}

.faq {
    width: 50%; /* flow-panelと同じ幅に合わせる場合 */
    padding: 100px 0 ;
}
.faq dl{
font-size: 18px;
margin: 40px 0 100px 22px;
}
.faq dt{
color: #231815;
margin: 0 0 18px 0;
}
.faq dd{
color: #898989;
margin: 0 0 30px 0;
    line-height: 1.6;
}
.faq dt, .faq dd {
    display: flex; /* 横並びにする */
    align-items: flex-start; /* 上揃え */
 
}

/* ラベル（Q. や A.）の幅を固定する */
.faq dt::before {
    content: "Q.";
    flex-shrink: 0; /* 幅を縮ませない */
    width: 1.5em;   /* ここで幅を固定。デザインに合わせて調整 */
    
}

.faq dd::before {
    content: "A.";
    flex-shrink: 0;
    width: 1.5em;   /* dt::before と同じ幅に設定 */
    
}
footer{
	color: #fff;
	background-color: #000;
	width: 100%;
	height: 100vh;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
    z-index: 10;
}
footer h2{
	font-size: 24px;
	margin-bottom: 46px;
}
footer h3{
	font-size: 18px;
	margin-bottom: 30px;
}
footer p{
	font-weight: 300;
	line-height: 1.6;
}
.footer-menu{
	display: flex;
	gap:50px;
}
.footer-name{
	margin: 50px 0 40px;
}
.footer-name em{
font-size: 14px;
}
.copyright{
	font-size: 10px;
}
footer a{
	color: #fff;
}
footer .fixed-contact{
	position: static;
    background: #555;
    margin: 50px 0;
}
.fixed-contact.is-hidden {
    opacity: 0;
    pointer-events: none;
}