@charset "utf-8";

/* ============================================================
   🎨 parts.css - ページパーツのスタイル定義
   ============================================================
   このファイルは、サイト全体で使用される主要なパーツ
   （ナビゲーション、ボタン、アニメーション、スクロール効果など）
   のスタイルを定義しています。
   
   📋 セクション構成：
   1. テキストレンダリング最適化
   2. コンテナ・ヘッダー・メインエリアのレイアウト
   3. ローディング画面（スプラッシュ）
   4. 画面遷移アニメーション
   5. SVG アニメーション
   6. モバイルメニュー（円形背景の拡大）
   7. ボタン（× メニュー化）
   8. スクロール促進表示（縦線アニメーション）
   9. ボタン内矢印アニメーション
   10. ページトップボタン
   11. 画像スライダー（Slick）
   12. フェードイン・ぼかし・枠線アニメーション
   13. SVG アニメーション
   
   💡 注：疑似要素（::before, ::after）の多くは、
      デザイン最適化のため非表示に設定されています
============================================================ */

/* テキストレンダリング最適化 */

h1, h2, h3, h4, h5, h6, p, a, span {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* スマートフォン向けの基本設定 */
@media screen and (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    a, button, input, select, textarea {
        -webkit-user-select: none;
        user-select: none;
    }

    body {
        overflow-x: hidden;
    }

    /* タッチ操作が容易なサイズ（最小48x48px推奨） */
    button, a, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* 必要な初期表示画面のレイアウトCSS */
/* ========== ページコンテナ・ヘッダーのレイアウト ========== */
/* コンテナ：ページ全体の親要素 */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 230px;
    height: 100vh;
    background: #fdfdfd;
    padding: 150px 0 0 0;
}

#content-area {
    width: 100%;
    padding: 0 0 0 230px;
}

@media screen and (max-width: 990px) {
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0;
        z-index: 10;
        background: #fdfdfd;
    }
    
    #content-area {
        padding: 0;
    }
}

/*==================================================
機能編 4-1-5　ロゴアウトラインアニメーション
===================================*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background:#17184b;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:100px;
}

/*==================================================
　機能編 4-2-3 背景色が伸びる（右から左）
===================================*/


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color:#17184b;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:0.3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定 - 削除（初期化画面のためopacity: 0は不要）*/

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定（スプラッシュ）*/
#mask path {
	stroke: #fff;/*線の色*/
}

/*共通のSVGパスアニメーション設定*/
#mask path,
.svganimeblock svg path {
	fill-opacity: 0;/*最初は透過0で見えない状態*/
	transition: fill-opacity .12s;/*カラーがつく際のアニメーション0.12秒で変化*/
	fill: none;/*塗りがない状態*/
	will-change: fill-opacity;/*パフォーマンス最適化*/
}

/*アニメーション後に.doneというクラス名が付与された時の指定*/
#mask.done path {
	fill: #fff;/*塗りの色*/
	fill-opacity: 1;/*透過1で見える状態*/
	stroke: none;/*線の色なし*/
}

.svganimeblock svg.done path {
	fill: #efefef;/*塗りの色*/
	fill-opacity: 1;/*透過1で見える状態*/
	stroke: none;/*線の色なし*/
}


/*==================================================
 機能編 5-1-17 クリックしたら円形背景が拡大（下から）
===================================*/
/*========= ナビゲーションのためのCSS ===============*/

@media screen and (max-width:990px) {
/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
    height: 100vh;
    overflow: auto;
    background: #17184b;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
    z-index: 9997;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #17184b;
    /*丸のスタート位置と形状*/
    transform: scale(0);/*scaleをはじめは0に*/
    bottom: -50px;
    left: calc(50% - 50px);/*50%から円の半径を引いた値*/
    transition: all .2s;/*0.2秒かけてアニメーション*/
    will-change: transform;/*パフォーマンス最適化*/
}

.circle-bg.circleactive{
    transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 9999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    top: 0;
    left: 0;
}

#g-nav.panelactive #g-nav-list{
    display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
    opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: relative;
    z-index: 9999;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    text-align: center;
    display: block;
    padding: 80px 20px 20px 20px;
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity: 1;
    display: block;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
    animation-name: gnaviAnime;
    animation-duration: 0.3s;
    animation-delay: .05s;/*0.05 秒遅らせて出現*/
    animation-fill-mode: forwards;
    opacity: 1;
    will-change: opacity, transform;/*パフォーマンス最適化*/
}

}

@keyframes gnaviAnime{
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/*========= ボタンのためのCSS ===============*/

.openbtn{
    display: none;
}

@media screen and (max-width:990px) {
    /*==================================================
    　機能編 5-2-5 MENUが×に
    ===================================*/

    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn{
        display: block;
        position: fixed;
        z-index: 10000;
        cursor: pointer;
        top: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        border: 1px solid #17184b;
        background: #fff;
    }

    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
    }

    .openbtn span:nth-of-type(1),
    .openbtn span:nth-of-type(3) {
        height: 1px;
        background: #17184b;
        width: 62%;
        left: 10px;
    }

    .openbtn span:nth-of-type(1) {
        top: 13px;	
    }

    .openbtn span:nth-of-type(2) {
        top: 19px;
        left: 9px;
        font-size: 0.5rem;
        text-transform: uppercase;
        color: #17184b;
        font-weight: bold;
    }

    .openbtn span:nth-of-type(3) {
        top: 41px;
    }

    /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
    .openbtn.active span:nth-of-type(1) {
        top: 22px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3){
        top: 34px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}

/*==================================================
 機能編 9-1-1　縦線が動いてスクロールを促す
===================================*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 36vh;
    /*全体の高さ*/
    height: 100px;
}

/* 線の描写 */
.scrolldown1::after{
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 100px;
    background: #000;
    /* 装飾の縦線を非表示にする（疑似要素自体を消す） */
    display: none;
}

@media screen and (max-width: 768px) {
    .scrolldown1 {
        height: 70px;
    }

    .scrolldown1::after {
        height: 70px;
    }
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:100px;
		opacity: 1;
	}
	100%{
		height:0;
		top:150px;
		opacity: 0;
	}
}

/*==================================================
 機能編 7-1-47	矢印が右に移動して背景がつく 
===================================*/

.btnarrow5{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	border: 1px solid #555;
    padding: 8px 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
    font-size: 0.9rem;
}

.btnarrow5:hover{
	background:#333;
	color:#fff;
}

/*矢印と下線の形状*/
.btnarrow5::before{
	content:"";
    /*絶対配置で下線の位置を決める*/
	position: absolute;
	top:50%;
	right:-26px;
    /*下線の形状*/
	width:40px;
	height:1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .1s linear;
	will-change: right;/*パフォーマンス最適化*/
}

.btnarrow5::after{
	content:"";
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top: 20%;
    right: -21px;
    /*矢印の形状*/
	width:1px;
	height:12px;
	background:#333;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .1s linear;
	will-change: right;/*パフォーマンス最適化*/
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
	right:-30px;
}

.btnarrow5:hover::after{
	right:-25px;
}

/*===========================================================*/
/* 機能編 8-1-6　ページの指定の高さを超えたら出現し、フッター手前で止まる*/
/*===========================================================*/

/*リンクの形状*/
#page-top a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: #6C6C6C;
    border: 1px solid #6C6C6C;
    transition: all 0.3s;
    font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
    #page-top a {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

@media screen and (min-width:769px) {
    #page-top a:hover{
        background: #777;
    }
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
	cursor: pointer;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.3s forwards;
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.3s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*===========================================================*/
/* 機能編 6-1-2 フェードイン・アウトさせて全画面で見せる*/
/*===========================================================*/

.slider {
    position: relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 90vh;/*スライダー全体の縦幅を90vhにする*/
    min-height: 400px;
    width: 100%;
    overflow: hidden;
}

/*　背景画像設定　*/

.slider-item01 {
    background: url(../images/main_01.png);
}

.slider-item02 {
    background: url(../images/main_02.jpg);
}

.slider-item03 {
    background: url(../images/pict_01.png);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 90vh;/*各スライダー全体の縦幅を90vhにする*/
    min-height: 400px;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

@media screen and (max-width: 768px) {
    .slider {
        height: 50vh;
        min-height: 280px;
        width: 100%;
    }

    .slider-item {
        height: 50vh;
        min-height: 280px;
        width: 100%;
        display: block !important;
    }
    
    .slider .slick-slide {
        display: block !important;
        width: 100% !important;
        height: auto;
    }
    
    .slider .slick-list,
    .slider .slick-track {
        display: block;
    }
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 20px;
    width: 20px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 2.5%;
    transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
    .slick-prev, 
    .slick-next {
        height: 15px;
        width: 15px;
        border-top: 1.5px solid #fff;
        border-right: 1.5px solid #fff;
    }
}

/*ドットナビゲーションの設定*/

.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: -50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;/*ドットボタンのサイズ*/
    height: 8px;/*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #fff;/*ドットボタンの色*/
    cursor: pointer;
    border: none;
    padding: 0;
}

.slick-dots .slick-active button{
    background: #333;/*ドットボタンの現在地表示の色*/
}

@media screen and (max-width: 768px) {
    .slick-dots {
        margin: -30px 0 0 0;
    }

    .slick-dots button {
        width: 6px;
        height: 6px;
    }

    .slick-dots li {
        margin: 0 4px;
    }
}

/*==================================================
 印象編 4 最低限おぼえておきたい動き
===================================*/

/* 4-6 じわっ（ぼかしから出現） */
.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}


/*4-8 スーッ（枠線が伸びて出現）*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content: '';
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content: '';
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}

/* ------------------------------------------------------------------ */
/* Ensure decorative pseudo-elements are hidden (fallback)            */
/* ------------------------------------------------------------------ */
.lineTrigger::before,
.lineTrigger::after,
.line2::before,
.line2::after,
.btnarrow5::before,
.btnarrow5::after,
.scrolldown1::after{
    display: none !important;
    content: none !important;
}

/*==================================================
印象編 9-4-1　SVG アニメーション
===================================*/

.svganimeblock svg{
	width:100%;/*SVGのサイズ*/
}

/* ------------------------------------------------------------------ */
/* Faster reveal for news (おしらせ) and general scroll-triggered elements */
/* ------------------------------------------------------------------ */
/* 短時間化して表示を速める（既存ルールを上書き） */
.blur {
    animation-duration: 0.6s !important;
    animation-timing-function: ease-out !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: opacity, transform;
}

.lineTrigger.lineanime {
    animation-duration: 0.6s !important;
    animation-timing-function: ease-out !important;
}

/* 特に #news セクションの表示を素早くするための補助ルール */
#news.blurTrigger, #news.lineTrigger {
    opacity: 1 !important;
    transform: none !important;
}