<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";




.h_a_company { margin:0px 0 0 2.5%; }


@media screen and (max-width:600px) {
    #header { width:100%; text-align:left; position:relative; z-index:60; overflow:visible;  }
    #header .h_a_company { width:50%; position:absolute; top:10px; }
    #header .h_a_company img { width:100%; }
}
@media screen and (min-width:768px) {
    #header{ width:100%; height:100px; position:fixed; left:0; top:0; padding:0; text-align:left; z-index:9999; }
    #header .h_a_company { width:265px; margin:25px 0 0 30px; display:block; }
   
}


span.btnarrow { display:none;}



.photo-container {width:100%; overflow: hidden;position: relative; margin:0 auto 0 auto;z-index:-4; }
@media screen and (min-width:600px) {
    .photo-container { margin-top:-50px; }
}

.photo-container img {
    width: 100%;
    height: 55vw;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 55%);
    filter: grayscale(100%);
    overflow:hidden;
  }

@media screen and (min-width:319px) {
    .photo-container h1 { position:absolute; z-index:10; left:0; top:15vw; transform:rotate(-8.4deg); display:flex; align-items:center;}
} 
@media screen and (min-width:375px) {
    .photo-container h1 { top:17vw; }
}
@media screen and (min-width:414px) {
    .photo-container h1 { top:18vw; }
}
.photo-container h1 em { font-size:8vw; font-style:normal; font-family:"Nanum Myeongjo", serif; font-weight:600; letter-spacing:-0.1em;}
.photo-container h1 span { font-size:16px; line-height:40px; font-weight:normal; display:inline-block; margin-left:10px; }


.photo-container .st_sptitle { font-size:40px; position:absolute; top:18.5vw; left:0; transform:rotate(-8.9deg); display:block; }
h1.inline_sp { font-size:22px; display:block; margin:0 0 20px 0; text-align:center; }
@media screen and (min-width:768px) {
    .photo-container .st_sptitle { display:none; }
    h1.inline_sp  { display:none; }
}

.header_wrap { width:100%; height:60vw; margin-bottom:50px; background:#313131; position:relative; z-index:15; /*overflow:hidden;*/ }
@media screen and (min-width:768px) {
    .header_wrap { height:40vw; overflow:hidden;}
    .photo-container {width:100%; height: 400px; overflow: hidden;position: relative;margin:0 auto;z-index:-4; }
    .photo-container img { width:100%; height:120%; object-fit:cover; clip-path:polygon(0 0, 100% 0%, 100% 25%, 0 55%); filter: grayscale(100%);}
} 

@media screen and (min-width:1200px) {
    .header_wrap { height:40vw; margin-bottom:0; }
    .photo-container { height:45vw; }
}


/* .div_h1*/
@media screen and (min-width:414px) {
    .div_h1 { width:100%; }
}
@media screen and (min-width:768px) {
    .div_h1 { margin-top:-70px; }/*ここは触らない*/
}


/*ページトップの英字*/
@media screen and (min-width:600px) { 
    .photo-container h1 { top:14vw; }
    .photo-container h1 span { font-size:20px; margin-left:20px; }
}

@media screen and (min-width:768px) { 
    .photo-container h1 {top:17.5vw;transform:rotate(-7.5deg); display:flex; align-items:center;}
    .photo-container h1 em { font-size:8vw; }
    .photo-container h1 span { font-size:20px; margin-left:20px; }
    .photo-container img { height:100%; }
}



/*img_top*/
.img_top { width:100%; height:auto; position:absolute;  bottom:0; left:50%; transform:translateX(-50%);   z-index:-5; display:block; filter: grayscale(100%); /* モノクロにする */}

@media screen and (min-width:700px) {
.img_top { width:70%; overflow:hidden;  }
}





/*三角*/
.header_wrap .img_top_sankaku  { display:none; }
@media screen and (min-width:1200px) {
    .header_wrap .img_top_sankaku { width:400px; position:absolute; right:0; bottom:0; z-index:-1; display:block; }
    }





#g-nav {
    transform: translateX(100%);
    transition: 0.5s ease-in-out;
}

#g-nav.panelactive{
    width:100%;
    position:fixed;
    z-index:25;
	top: 0;
    height: 100vh;
    background:#343434;
    overflow-y: scroll;
    transform: translateX(0);
}
@media screen and (min-width:768px) {
#g-nav.panelactive{
    width:100%;
    position:fixed;
    z-index:999;
	top: 0;
    height: 100vh;
    background:#343434;
    overflow-y: scroll;
    transform: translateX(0);
}
}

#g-nav ul li.li_entry a .div_entry.menu { width:80%; height:55px; background: #EBFF00;display: block;transform: skewX(-10deg); text-align:center; margin-bottom:50px; }
#g-nav ul li.li_entry { width:100%; height:auto; text-align:center; border-bottom:none; color:#000;}
#g-nav ul li.li_entry a .div_entry.menu { color:#000;}
#g-nav ul li.li_entry a .div_entry.menu img {opacity: 1;transition: opacity 0.3s ease, transform 0.3s ease; /* トランジションを追加 */ margin-left:0px; right:10%; }
#g-nav ul li.li_entry a:hover .div_entry.menu img {  opacity: 0.7;transform: translateX(50px); /* ホバー時に移動 */}
@media screen and (min-width:768px) {
    #g-nav ul li.li_entry a .div_entry.menu { width:50%; }
    #g-nav ul li.li_entry a .div_entry.menu img  { right:20; }
}


/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:10;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #343434;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

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

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

#g-nav.panelactive #g-nav-list{
     display: flex; /*クラスが付与されたら出現*/
     height:100%; 
    justify-content:center;
    flex-direction:column;
    padding-top:50px; 
    overflow-y: scroll;
   
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position:relative;
    z-index: 999;
    top:0;
}
#g-nav ul { width:100%; height:100%; margin-top:18px; }
#g-nav ul li  { padding:20px 5%; border-bottom:1px solid #ccc; }
#g-nav ul li a strong { width:auto; display:inline; font-size:40px; color:#fff; font-family: "din-2014-narrow", sans-serif;font-weight: 700;font-style: normal; margin-right:20px; }





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

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{ list-style:none; position:relative; }
#g-nav li a{ width:100%; font-size:14px; color: #fff;text-decoration: none; text-transform: uppercase;letter-spacing: 0.1em;display:flex;align-items: center;flex-wrap:wrap; }
#g-nav li a img { position:absolute; right:5%; top:40%; }
.a_entry { width:100%; height:auto; padding:10px 0; background:#FF5800; color:#fff;text-align:center; margin-top:30px; }
.a_entry .entry_wrap { width:200px; margin:0 auto;  display:flex; align-items: center; }

@media screen and (min-width:768px) {
    #g-nav.panelactive #g-nav-list{ height:auto; flex-direction:row; top: 50%; transform: translate(0,-50%); }
    #g-nav ul { width:100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin:0; left:auto; transform: translate(0,0); }
    #g-nav ul li { width:100%; text-align:left; display: block; margin:0; }
    #g-nav ul li a strong { width:auto; font-size:70px; line-height:1.2; display:block; transition: all 0.35s; }
    #g-nav li a { flex-direction:column; align-items:flex-start; justify-content:left; font-size:16px; margin-bottom:0; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.35s; }
    #g-nav-list ul li a:hover strong { color:#EBFF00; transition: all 0.35s;}
    #g-nav-list ul li a:hover { color:#EBFF00; transition: all 0.35s}
    #g-nav-list ul li a.a_entry { width:430px; height:auto; padding:10px 0; text-align:center; background:#FF5800; margin-top:50px; white-space: nowrap; transition: all 0.35s; }
    #g-nav-list ul li a.a_entry .entry_wrap { width:205px; color:#fff; display:flex; margin:0 auto; padding:0; align-items: center; transition: all 0.35s;}
    #g-nav-list ul li a.a_entry .entry_wrap strong { width:auto; color:#fff; margin:0 10px 0 0; font-size:48px; line-height:1.2em; transition: all 0.35s;}
    #g-nav-list ul li a.a_entry:hover { background:#EBFF00; transition: all 0.35s; }
    #g-nav-list ul li a.a_entry:hover .entry_wrap strong { color:#00124E; transition: all 0.35s; }
    #g-nav-list ul li a.a_entry:hover .entry_wrap span { color:#00124E; transition: all 0.35s; }
    #g-nav.panelactive ul li .a_member { width:100%; display:block; margin-bottom:5px; padding:0; }
    #g-nav.panelactive ul li .a_member small { width:auto; display:inline; margin-right:10px; }
    #g-nav.panelactive ul li .a_member img { margin-right:10px;}

    /*矢印が右に移動する*/
    #g-nav-list ul li span.btnarrow{width:80px;position: relative; right:0; display: inline-block;padding: 0 20px;color: #fff;text-decoration: none;outline: none;margin-bottom:10px;transition: all 0.35s }
    /*矢印と下線の形状*/
    #g-nav-list ul li span.btnarrow::before{content: '';position: absolute;bottom:-8px;left:15%; width: 85%; height: 1px; background:#fff; transition: all 0.35s;}
    #g-nav-list ul li span.btnarrow::after{content: '';position: absolute;bottom:-3px;right:0;width: 15px;height:1px;background:#fff;transform: rotate(35deg);transition: all 0.35s;}
    /*hoverした際の移動*/
    #g-nav-list ul li a:hover span.btnarrow::before{left:20%;background:#1e6eae; transition: all 0.35s;}
    #g-nav-list ul li a:hover span.btnarrow::after{ right:-5%;background:#1e6eae; transition: all 0.35s;}
    #g-nav-list ul li a:hover span.btnarrow{color: #1e6eae;right:-50px; transition: all 0.35s;}
}   



/*========= ボタン===============*/
.openbtn{ width:50px;height:50px; position:fixed; top:0; right:0;  background:#000; text-align:center; z-index:99999;}
.openbtn span{ width:50%; display: inline-block;transition: all .4s; position: absolute; left:25%; height:1px; }
.openbtn span:nth-of-type(1) {top:15px;	background:#fff;}
.openbtn span:nth-of-type(2) {top:25px; background:#fff;}
.openbtn span:nth-of-type(3) {top:35px; background:#fff;}
.openbtn.active span:nth-of-type(1) { width:50%; top:15px; left:25%;transform: translateY(6px) rotate(-45deg); background:#fff;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){ width:50%; top:25px; left:25%; transform: translateY(-6px) rotate(45deg); background:#fff;}

@media screen and (min-width:600px) {
    .openbtn{ width:73px;height:73px; z-index:99999;  }
    .openbtn span:nth-of-type(1) {top:30px;	}
    .openbtn span:nth-of-type(2) {top:38px;}
    .openbtn span:nth-of-type(3) {top:46px;}
    .openbtn.active span:nth-of-type(1) { width:50%; top:35px; left:20px;transform: translateY(6px) rotate(-45deg); background:#fff;}
    .openbtn.active span:nth-of-type(2) {opacity: 0;}
    .openbtn.active span:nth-of-type(3){ width:50%; top:45px; left:20px; transform: translateY(-6px) rotate(45deg); background:#fff;}

}






</pre></body></html>