@charset "UTF-8";
/* =========================
   Reset
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
	min-height: 100dvh;
    color:#333;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/* =========================
   Opening
========================= */
/* Opening */

#opening{
    position:fixed;
    inset:0;
    background:#fff;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;
}

.opening-logo{
    opacity:0;
}

.opening-logo img{
    width:200px;
    height:auto;
    display:block;
}

/* コンテンツは最初見せない */

main{
    opacity:0;
	visibility:hidden;
}	
/* =========================
   Video Background
========================= */

.video-bg{
    position:fixed;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

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

/* =========================
   Overlay
========================= */

.video-overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.0);
    z-index:-1;
}

/* =========================
   Hero
========================= */

.hero{
    height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero h1{
    font-size:clamp(40px,8vw,120px);
    letter-spacing:.1em;
}

.hero p{
    margin-top:20px;
    font-size:18px;
}
/* =========================
   Header
========================= */

#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:40px 50px;
}

.header-logo img{
    width:180px;
    height:auto;
    display:block;
}

.gnav-pc ul{
	font-weight: 700;
    list-style:none;
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
}

.gnav-pc a{
    color:#333;
    text-decoration:none;
    font-size:14px;
    letter-spacing:.2em;
    transition:.3s;
}

.gnav-sp{
	display: none;
}

a:hover{
    opacity:.6;
}

/* =========================
   Scroll
========================= */
.top-hero__scroll{
    position:fixed;
    right:50px;
    bottom:50px;
    z-index:100;

    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:5px;
}

.top-hero__scroll-text{
    writing-mode:vertical-rl;

    color:#000;
    font-size:14px;
    letter-spacing:.1em;
    line-height:1;
}

.top-hero__scroll-line{
    position:relative;
    width:1px;
    height:160px;
    background:rgba(51,51,51,.3);
    overflow:hidden;
}

.top-hero__scroll-line::after{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:1px;
    height:50px;

    background:#ffa300;

    animation:scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine{
    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(160px);
    }
}

/* ==========================================
   Logo Animation
========================================== */

body{
	background-color: #eee;
}

.logo-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important; /* 背景透過を強制 */
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.logo-img {
  /* ベースサイズを着地目標の「画面幅の40%」にする */
  width: 40vw !important; 
  height: auto !important;
  opacity: 0; /* 最初は非表示 */
  z-index: 9999;
  
  /* 中央基準で拡大縮小させる */
  transform-origin: center center !important;
  
  /* 他のCSSによるマックス幅制限を解除 */
  max-width: none !important; 
}

@media (max-width: 767px) {
	.logo-img {
		width: 50vw !important; 
	}
}

/* =========================
   Content
========================= */

#service,#about,#contact{
    overflow:hidden;
}

.content{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px 40px;
}

.inner{
    /*background:rgba(255,255,255,.08);*/
    /*backdrop-filter:blur(10px);*/
    padding:80px;
    border-radius:20px;
}

h2{
    font-size:60px;
    margin-bottom:100px;
}

h3{
    font-size: 2rem;
}

.inner p{
    line-height:2;
}

.top-hero__scroll{
    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.top-hero__scroll.is-hidden{
    opacity:0;
    visibility:hidden;
}
.img-box{
	width: 48%;		
}
.text-box{
	width: 48%;
	padding: 0 50px;
}
section{
	padding-top: 200px;
}

footer{
	padding-top: 100px;		
}

iframe#map{
  filter: grayscale(1);
}	

/* =========================
   Button
========================= */
.button{
    display:flex;
    flex-direction:column;
    gap:10px;

    text-decoration:none;
}

.button-text{
    color:#333;
    font-size:14px;
    letter-spacing:.1em;
    line-height:1;
}

.button-line{
    position:relative;
    width:160px;
    height:1px;
    background:rgba(51,51,51,.3);
    overflow:hidden;
}

.button-line::after{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:50px;
    height:1px;

    background:#ffa300;

    animation:scrollLineX 2s ease-in-out infinite;
}

@keyframes scrollLineX{
    from{
        transform:translateX(-50px);
    }

    to{
        transform:translateX(160px);
    }
}
/* =========================
Responsive 767px以下 スマホ
========================= */
@media (max-width: 767px) {
	
	#header{
		padding:20px 20px;
	}

	.gnav-sp-toggle{
	    height: 20px;
	    position: fixed;
	    right: 20px;
	    top: 17px;
	    width: 60px;
	    z-index: 3000;
	    display: block;
	}
	
	.gnav-sp-toggle-bar{
	    background: #333;
	    display: block;
	    height: 1px;
	    position: absolute;
	    transition:transform .3s;
	    width: 100%;
	}
	.gnav-sp-toggle-bar-first{
	    top: 9px;
	}
	.gnav-sp-toggle-bar-second{
	    bottom: 0;
	}
	.gnav-sp-toggle-bar-first.active{
	    top: 8px;
	    transform: rotate(25deg);
	}
	.gnav-sp-toggle-bar-second.active{
	    bottom: 10px;
	    transform: rotate(155deg);
	}
	
	.gnav-sp{
		text-align: center;
		background: rgba(255,255,255,.8);
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 2000;
	}

	.gnav-sp.active{
	    display: block;
	}

	.gnav-sp-wrap{
		align-items:center;
		display: flex;
		height: 100%;
		justify-content: center;
		position: absolute;
		width: 100%;
	}

	.gnav-sp-menu{
		text-align: center;
	}

	.gnav-sp-menu li{
	    margin: 40px 0;
	}

	.gnav-sp-menu li a{
		color: #333;
	    font-size: 2em;
	    font-weight: bold;
	    padding: 40px;
		text-decoration: none;
	    transition: .5s;
	}


	
	.top-hero__scroll{
	    right:10px;
	    bottom:0;
	}

	section{
		padding-top: 100px;
	}

	h2{
	    font-size:50px;
	}

	.img-box{
		width: 100%;
		margin-bottom: 50px;	
	}

	.text-box{
		width: 80%;
		padding: 0;
		margin: 0 auto;
	}

}