@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");



/*----- トップページ 設定 ----------------------------------------------------*/


/*----- スライダー 設定 ----------------------------------------------------*/

div#sliderWrap{ position:relative; width:100%; height:100%; float:left; }

.sliderArea {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.sliderArea {
		height: auto;  /*スマホは高さ固定しない*/ 
	}
}

.top-swiper {
	width: 100%;
	height: 100%;
}

.top-swiper .swiper-slide {
	width: 100%;
	height: 100%;
	display: flex; /* 追加 */
}

.top-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像を必ず拡大して余白なし */
	object-position: center center;
	flex-shrink: 0; /* 追加：flexで縮まない */
}

.slideCatch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10; /* スライダーより上に表示する */
	text-align: center; /* 画像以外にもテキスト入れる場合に中央揃え */
}


/*スクロールアニメーション*/
.scroll-indicator { position: absolute; left: 32px; bottom: 32px; display: flex; flex-direction: row; align-items: flex-end; z-index:999; }
.scroll-bar-wrap { position: relative; width: 1px; height: 100px; display: flex; flex-direction: column; align-items: center; }
.scroll-bar { 
  position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #fff; 
  transform: scaleY(0); transform-origin: top; 
  animation: scroll-bar-grow 2s cubic-bezier(0.33, 1, 0.68, 1) infinite; 
  opacity: 0.8; 
}
@keyframes scroll-bar-grow {
  0%   { transform: scaleY(0); opacity: 0.0; }
  10%  { opacity: 1; }
  75%  { transform: scaleY(1); opacity: 1; }   /* ここで伸びきる */
  90%  { transform: scaleY(1); opacity: 1; }   /* ここまでstop */
  100% { transform: scaleY(0); opacity: 0.0; } /* ここで消える */
}
.scroll-dot { position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transform: translateX(-50%); }
.scroll-text { color: #fff; font-size:1.8em; letter-spacing: 0.1em; font-family: serif; margin-left: 18px; writing-mode: vertical-rl; transform: rotate(180deg); }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    .scroll-text { font-size:1em; margin-left: 18px; }
    
    .slideCatch { width:70%; }
    
}



/*----- 各セクション 設定 ----------------------------------------------------*/

section.sectionWrap{ position:relative; width:100%; padding:30px 0; float:left; }
.sectionWrap2{ background:#f3f7ff; }
.sectionWrap3{ background:url('../../img/index/section_contact_bg.jpg') no-repeat; background-size:cover; background-position:top center;}

div.sectionArea{ width:1200px; margin:0 auto; }

h2.sectionTit{ width:100%; padding:30px 0; text-align:center; line-height:1.2em; float:left; }
h2.sectionTit2{ width:100%; padding:30px 0; text-align:left; line-height:1.2em; float:left; }
h2.sectionTit strong,
h2.sectionTit2 strong{ font-size:2em; font-weight:bold; }
h2.sectionTit small,
h2.sectionTit2 small{ font-size:1em; font-weight:normal; letter-spacing:0.2em; line-height:0em; }

.icon {
    margin-right: 10px;
    font-size: 1em;
    vertical-align: middle;
}


/*detailsボタン*/
.detail_btn {
  width:100%;
  padding:30px 0 0;
  text-align: right; /* ★ここが左寄せとの違い！ */
  overflow:hidden;
  float:left;
}

.detail_btn a {
  display: inline-block;
  position: relative;
  font-size: 1.2em;
  letter-spacing: 0.2em;
  color: #131c2e;
  text-decoration: none;
  border-bottom: 1px solid #131c2e;
  padding: 0 30px 5px 0;
}

.detail_btn a::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -4px;
  width: 0; /* ← 初期は幅ゼロ */
  height: 1px;
  background-color: #131c2e;
  transform: rotate(45deg);
  transform-origin: left center;
  transition: width 0.4s ease;
}

.detail_btn a:hover::after {
  width: 15px; /* ← ホバー時に表示される長さ */
}


/*スクロールアニメーション*/
/* ▼ フェードアップ初期状態 */
.fadeUp {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ▼ 表示状態（JSで .show が付く） */
.fadeUp.show {
	opacity: 1;
	transform: translateY(0);
}

/* セクション内の fadeUp に順番ディレイを自動で付与 */
.sectionArea .fadeUp:nth-of-type(1) { transition-delay: 0s; }
.sectionArea .fadeUp:nth-of-type(2) { transition-delay: 0.2s; }
.sectionArea .fadeUp:nth-of-type(3) { transition-delay: 0.4s; }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sectionArea{ width:96%; }
    
    h2.sectionTit{ padding:10px 0; text-align:center; line-height:1.2em; float:left; }
    h2.sectionTit2{ padding:10px 0; text-align:left; line-height:1.2em; float:left; }
    h2.sectionTit strong,
    h2.sectionTit2 strong{ font-size:1em; }
    h2.sectionTit small,
    h2.sectionTit2 small{ font-size:0.6em; }
    
}

/*----- sideWrap 設定 ----------------------------------------------------*/

div.sideWrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  background: rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  box-sizing: border-box;
  z-index:99;
}

/* チケット販売リンク（縦書き） */
.sideWrap a,
.sideWrap h2{
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 0.2em;
  padding-top: 20px;
}

/* h2タイトルも縦書きに */
.side_title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-top: auto; /* チケット販売とSNSの間に配置 */
  margin-bottom: auto;
}

/* SNSエリア */
.side_sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.side_sns img {
  width: 28px;
  height: 28px;
  display: block;
  transition: opacity 0.3s ease;
}

.side_sns img:hover {
  opacity: 0.7;
}


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sideWrap { display:none; }
    
}

/*----- お知らせ 設定 ----------------------------------------------------*/

div.newsListArea{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 0; width:90%; padding:0 5%; float:left; }
div.newsListArea::after{ content:""; width:32%; }

div.newsListBox{ width:32%; }
.newsListBox a{ text-decoration:none; }
.newsListBox a:hover{ text-decoration:underline; }
/* サムネイル全体の表示枠設定：元画像（フライヤー）に合わせて縦長1 / 1.414比率 */
.newsListBox_thumbnail {
	width: 100%;
	aspect-ratio: 1 / 1.414; /* フライヤー比率（A5縦） */
	overflow: hidden;
}

.newsListBox_thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* はみ出す部分を拡大してカバー */
	display: block;
}
.newsListBox_title {
	width: 100%;
	font-size: 1.2em;
	font-weight: normal;
	display: -webkit-box;           /* 多段表示用のレイアウト */
	-webkit-line-clamp: 1;          /* 2行で切る */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.newsListBox_date { display: flex; justify-content: flex-end; align-items: center; width: 100%; }
.newsListBox_date::before { content: ""; flex: 1; border-top: 1px solid #131c2e; margin-right:70px; }
.newsListBox_date time { font-weight: bold; font-size: 1em; white-space: nowrap; }

.newsListBox a:hover .newsListBox_title{ text-decoration:underline; }
.newsListBox a:hover .newsListBox_thumbnail{ opacity:0.9; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.newsListBox{ width:48%; }
    
    .newsListBox_date::before { margin-right:30px; }
    
}

/*----- 事業内容 設定 ----------------------------------------------------*/

div.serviceListArea{ display:flex; flex-wrap:wrap; gap:10px; width:100%; padding:0; float:left; }
div.serviceListBox{ width:24%; padding:10px 1%; text-align:center; box-sizing:border-box; border:1px solid #131c2e; }
div.serviceListBox_dummy{ background:url("../../img/ourservice/servicelistbox_dummy.png") #131c2e no-repeat; background-position:center center; background-size:60%; }
.serviceListBox_icon{ width:30%; padding:20px 35%; float:left; }
.serviceListBox_title{ width:90%; height:30px; padding:15px 5%; font-size:0.9em; font-weight:normal; border-bottom:1px solid #131c2e; float:left; }
.serviceListBox_text{ width:100%; padding:20px 0 0; font-size:0.8em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.serviceListBox{ width:48%; }
    div.serviceListBox_dummy{ display:none; }
    
    div.servicesDetailArea{ gap:50px 0; width:100%; padding:40px 0; }
    
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:480px){
    
    div.serviceListBox{ width:100%; }
    .serviceListBox_title{ height:auto; }
    .serviceListBox_title{ font-size:1em; }
    
}


/*----- 実績紹介 設定 ----------------------------------------------------*/

#case .sectionArea{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}
div.caseListWrap,
div.caseListArea{
  width:100%!important;
  height:auto;
  padding-top:25px;
  left:0;
  top:0;
  position:relative;
  z-index:0;
  float:left;
}
.case-swiper .swiper-wrapper.is-single-slide {
  justify-content: center;
}


/* 実績紹介スライダーの画像比率固定（A5縦） */
.case-swiper .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1 / 1.414; /* これを追加！A5比率 */
  overflow: hidden; /* はみ出しカット */
}

.case-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせて拡大表示＆トリミング */
  display: block;
}

div.caseWrap{ width:1200px; margin:0 auto; }

.case-swiper .swiper-slide a {
  display: block;
  overflow: hidden;
}

.case-swiper .swiper-slide a img {
  transition: opacity 0.3s ease; /* opacityだけ */
}

.case-swiper .swiper-slide a:hover img {
  opacity: 0.7; /* ホバー時にちょい透過 */
}






/*ボタン部分の制御*/
.custom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  position: absolute;
  top: -50px;
  right: 20%;
  transform: translateX(-50%);
  z-index: 99999;
  position: absolute;
}

.custom-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  transition: background 0.3s, box-shadow 0.3s;
}

.custom-nav button:hover {
  background-color: #f0f0f0;
  box-shadow: 0 0 0 2px #333;
}

.custom-nav button span {
  color: #333;
  font-weight: bold;
}

.custom-line {
  width: 80px;
  height: 1px;
  background-color: #333;
  opacity: 0.4;
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.caseListWrap,
    div.caseListArea{
        height:auto;
        padding-top:25px;
        left:0;
        top:0;
        position:relative;
        z-index:0;
        float:left;
        width:100%!important;
    }

    .custom-nav {
        margin-top: 30px;
        right:0;
    }
    
    div.caseWrap{ width:96%; }
    
}

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

        div.caseListWrap,
        div.caseListArea{
            height:auto;
        }
    
}
    
/*----- リンク 設定 ----------------------------------------------------*/

div.LinkListArea{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 0; width:100%; padding:0 0 30px; float:left; }

div.LinkListBox{ width:13%; text-align:center; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 

    div.LinkListBox{ width:30%; }
    
}


/*----- Contact 設定 ----------------------------------------------------*/

div.contactBtnArea{ display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; padding:20px 5%; float:left; }

div.cotactBtnBox{ width:46%; padding:15px 0; border:1px solid #131c2e; background-color:#f3f7ff; text-align:center; }
.cotactBtnBox h3{ width:100%; padding-bottom:15px; font-size:2em; font-weight:normal; float:left; }
.cotactBtnBox p{ width:100%; padding-bottom:20px; float:left; }
.cotactBtnBox_tel{ width:100%; font-size:2em; font-weight:bold; float:left; }
.cotactBtnBox_mail{ width:100%; text-align:center; float:left; }
.cotactBtnBox_mail a{ display:inline-block; padding:10px; border:1px solid #131c2e; text-decoration:none; font-size:1.6em; font-weight:bold; }
.cotactBtnBox_mail a:hover{ text-decoration:underline; }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.cotactBtnBox{ width:100%; margin:20px 0; }
    .cotactBtnBox h3{ font-size:1.2em; }
    .cotactBtnBox_tel{ font-size:1em; font-weight:bold; float:left; }
    .cotactBtnBox_mail a{ font-size:1em; }
    
}



/*----- 画面ローディング 設定 ----------------------------------------------------*/
#loadingScreen {
  position: fixed;
  z-index: 9999999;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: #101111; /* お好みで調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2s cubic-bezier(0.33, 1, 0.68, 1);
}
.loading-inner {
  text-align: center;
}
.loading_logo img {
  max-width: 240px;
  width: 40vw;
  height: auto;
  filter: drop-shadow(0 2px 16px #0008);
  opacity: 0;
  animation: logoStrobe 1.6s cubic-bezier(0.7,0,0.3,1) 0.1s forwards;
}
@keyframes logoStrobe {
  0%   { opacity: 0; filter: brightness(0.6) drop-shadow(0 2px 8px #0004);}
  7%   { opacity: 1; filter: brightness(2.2) drop-shadow(0 2px 28px #fff);}
  13%  { opacity: 0.1; filter: brightness(0.5) drop-shadow(0 2px 8px #0004);}
  17%  { opacity: 1; filter: brightness(2.2) drop-shadow(0 2px 28px #fff);}
  23%  { opacity: 0.1; filter: brightness(0.5) drop-shadow(0 2px 8px #0004);}
  27%  { opacity: 1; filter: brightness(2.2) drop-shadow(0 2px 28px #fff);}
  33%  { opacity: 0.2; filter: brightness(0.6) drop-shadow(0 2px 10px #0004);}
  38%  { opacity: 1; filter: brightness(2.2) drop-shadow(0 2px 28px #fff);}
  45%  { opacity: 0.2; filter: brightness(0.6) drop-shadow(0 2px 10px #0004);}
  50%  { opacity: 1; filter: brightness(1.5) drop-shadow(0 2px 20px #fff8);}
  65%  { opacity: 1; filter: brightness(1) drop-shadow(0 2px 16px #0008);}
  100% { opacity: 1; filter: brightness(1) drop-shadow(0 2px 16px #0008);}
}

#loadingScreen.hide {
  opacity: 0;
  pointer-events: none;
}

/* ローディング画面ロゴをスマホ中央に確実に揃える */
@media screen and (max-width: 600px) {
  #loadingScreen .h_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    padding-left: 0 !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  #loadingScreen .h_logo img {
    max-width: 80vw;
    width: 80vw;
    margin: 0 auto;
    display: block;
  }
}