/*共通設定*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Cormorant Garamond","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    scroll-behavior: smooth;
}

.writing_mode_vertical{
    writing-mode: vertical-rl;
}

@keyframes slide-in {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes slide-in-065 {
from {
    transform: translateX(-100%) scaleX(0.65);
    opacity: 0;
}
to {
    transform: translateX(0%) scaleX(0.65);
    opacity: 1;
}
}

@keyframes slide-in-op01 {
    from {
        transform: translateX(-30%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 0.1;
    }
}

@keyframes slide-in-x060per {
    from {
        transform: translateX(-30%) scalex(0.6);
        opacity: 0;
    }
    to {
        transform: translateX(0%) scalex(0.6);
        opacity: 0.1;
    }
}

@keyframes slide-in-y060per {
    from {
        transform: translateY(-30%) scaley(0.6);
        opacity: 0;
    }
    to {
        transform: translateY(0%) scaley(0.6);
        opacity: 0.1;
    }
}

@keyframes slide-in-x080per {
    from {
        transform: translateX(-30%) scalex(0.8);
        opacity: 0;
    }
    to {
        transform: translateX(0%) scalex(0.8);
        opacity: 0.1;
    }
}

@keyframes slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes slide-in-top_1 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top_2{
    from {
        transform: translateY(-200%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top_3{
    from {
        transform: translateY(-300%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top_4{
    from {
        transform: translateY(-400%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top_5{
    from {
        transform: translateY(-500%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom_1 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* スクロール対応スライドイン */
.script-slide-in {
    opacity: 0;
    transform: translateX(-100%);
}

/* 発火時にアニメーション */
.script-slide-in.active {
    animation: slide-in 0.8s ease forwards;
}

h3.trigger-slide-in.active::after {
    transform: translateX(0);
    opacity: 1;
}

a{
    text-decoration: none;
    font-family: "Bebas Neue","Zen Old Mincho", serif; 
    font-size: 20px;
}

h2{
    
    position: relative;
    color: #ffffff;
    z-index: 2;
}

h2.under_mark::after{
    content: " ";
    position: absolute;
    left: -25vw;
    bottom: 4.8rem;
    display: block;
    background: #000000;
    width: 100%;
    height: 5rem;
    z-index: -1;
}

h2.under_mark_short::after{
    content: " ";
    position: absolute;
    left: -50vw;
    bottom: 4.8rem;
    display: block;
    background: #000000;
    width: 100%;
    height: 5rem;
    z-index: -1;
    animation: slide-in 1s cubic-bezier(.06, .92, .07, .97) forwards;

}
.under_line {
    position: relative;
}
.under_line::after{
    content: " ";
    position: absolute;
    left: 0vw;
    bottom: 1rem;
    height: 2px;
    width: 50%;
    background: #cd202f;
    z-index: 1;
    
    
}


h3 + div {
    margin-left: 2rem;
    
}

.drop_white{
    text-shadow: 0px 0px 20px #fff;
}

.links{
    text-align: right;
}

.links a{
    width: 200px;
    font-size: 2rem;
}

dt,dd {
    text-decoration: none;
    font-family: "Bebas Neue", "Zen Old Mincho", serif;
    font-size: 20px;
}

/* script */

/* デフォルトのフェードイン */
.fade-in {
    opacity: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* フェード方向設定（より滑らかに大きく移動） */
.fade-in[data-fade="down"] { transform: translateY(50px); }  /* 下から */
.fade-in[data-fade="up"] { transform: translateY(-50px); }   /* 上から */
.fade-in[data-fade="left"] { transform: translateX(-50px); } /* 左から */
.fade-in[data-fade="right"] { transform: translateX(50px); } /* 右から */

/* フェードイン時のスタイル（元の位置に戻す） */
.fade-in.visible {
    opacity: 1;
    transform: translate(0, 0);
}

 /*{
    border: #000000 1px solid;
}*/

.bebas-neue-regular {
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal;
  }

.m-plus-1p-bold {
    font-family: "M PLUS 1p", serif;
    font-weight: 500;
    font-style: normal;
}

.zen-old-mincho-medium {
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    font-style: normal;
  }

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

/*line height*/

.line_height_1{
    line-height: 1.5;
}
.line_height_2{
    line-height: 2;
}

/* 色 */

/* 黒 */
.black{color: #000000;}

.black_reverse{
    color: #ffffff;
    background: #000000;
}

span.black_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #000000;
}

.black_reverse_op08{
    color: #ffffff;
    background: #000000dd;
}

/* 白 */
.white{
    color: #ffffff;
}

.white_reverse{
    color: #000;
    background: #ffffff;
}

span.white_shadow{
    color: #000000;
    text-shadow: 0px 0px 40px #ffffff;
}

/* 赤 */
.red{
    color: #cd202f;
}

.red_reverse{
    color: #fff;
    background: #cd202f;
}

span.inversion_red{
    display: inline-block;
    padding: 0.2rem 4rem 0.1rem 4rem;
    color: #fff;
    background-color: #cd202f;
    text-shadow: none;
}

span.red_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #ff1d25;
}

/* ディープレッド */
.deep_red{
    color: #832022;
}
.deep_red_reverse{
    color: #fff;
    background: #832022;
}
span.deep_red_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #832022;
}



/* 青 */
.blue{
    color: #2191CC;
}

.blue_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #00a2ff;
}

.blue_reverse{
    color: #fff;
    background: #2191CC;
}

span.yellow{
    color: #fdb414;
}

/* 黄色 */
.yellow_reverse{
    color: #fff;
    background: #fdb414;
}

span.yellow_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #fdb414;
}

/* 紫 */
.purple{
    color: #9b59b6;
}

.purple_reverse{
    color: #fff;
    background: #9b59b6;
}

.dark_purple{
    color: #533384;
}
.dark_purple_reverse{
    color: #fff;
    background: #533384;
}
span.dark_purple_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #533384;
}

span.purple_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #9b59b6;
}

/* 紫：京紫 */
.kyo_purple{
    color: #772F6D;
}
.kyo_purple_reverse{
    color: #fff;
    background: #772F6D;
}
span.kyo_purple_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #772F6D;
}


/* 紺色 */
.navy{
    color: #2c3e50;
}

.navy_reverse{
    color: #fff;
    background: #2c3e50;
}

span.navy_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #2c3e50;
}

/* ダークグリーン */
.dark_green{
    color: #697b3a;
}

.dark_green_reverse{
    color: #fff;
    background: #697b3a;
}
/* ディープグリーン */

.deep_green{
    color: #495330;
}

.dark_green_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #697b3a;
}

.deep_green_reverse{
    color: #fff;
    background: #495330;
}

span.dark_green_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #697b3a;
}

/* レンジャーグリーン */
.ranger_green{
    color: #4a5a49;
}

.renger_green_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #4a5a49;
}

.renger_green_reverse{
    color: #fff;
    background: #4a5a49;
}

.indigo{
    color: #4f59f0;
}

.indigo_reverse{
    color: #fff;
    background: #4f59f0;
}

span.indigo_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #4f59f0;
}

.pink{
    color: #cc6abb;
}

.pink_reverse{
    color: #fff;
    background: #cc6abb;
}

span.pink_shadow{
    color: #ffffff;
    text-shadow: 0px 0px 40px #cc6abb;
}

.longer{
    transform: scaleX(0.8)  translateX(-12%);
    
}

/* width */
.w-140{width: 140%;}
.w-120{width: 120%;}
.w-100{width: 100%;}
.w-90{width: 90%;}
.w-80{width: 80%;}
.w-70{width: 70%;}
.w-60{width: 60%;}
.w-50{width: 50%;}

/* height */
.h-140{height: 140%;}
.h-120{height: 120%;}
.h-100{height: 100%;}
.h-90{height: 90%;}
.h-80{height: 80%;}
.h-70{height: 70%;}
.h-60{height: 60%;}
.h-50{height: 50%;}

.h-3em{height: 3em;}
.h-4em{height: 4em;}
.h-5em{height: 5em;}
.h-6em{height: 6em;}
.h-7em{height: 7em;}
.h-8em{height: 8em;}
.h-9em{height: 9em;}
.h-10em{height: 10em;}

/* sp-height */
.sp-h-3em{height: unset;}
.sp-h-4em{height: unset;}
.sp-h-5em{height: unset;}
.sp-h-6em{height: unset;}
.sp-h-7em{height: unset;}
.sp-h-8em{height: unset;}
.sp-h-9em{height: unset;}
.sp-h-10em{height:  unset;}

@media screen and (max-width: 480px) {
    .sp-h-3em{height: 3em;}
    .sp-h-4em{height: 4em;}
    .sp-h-5em{height: 5em;}
    .sp-h-6em{height: 6em;}
    .sp-h-7em{height: 7em;}
    .sp-h-8em{height: 8em;}
    .sp-h-9em{height: 9em;}
    .sp-h-10em{height: 10em;}

}
/* padding */


/* letter-spacing */
.space-200{letter-spacing: -2rem;}
.space-150{letter-spacing: -1.5rem;}
.space-100{letter-spacing: -1rem;}
.space-080{letter-spacing: -0.8rem;}
.space-050{letter-spacing: -0.5rem;}
.space-030{letter-spacing: -0.3rem;}

/* フォントサイズ */
.font-smallest{font-size: 0.6em;}
.font-small{font-size: 0.8em;}
.font-medium{font-size: 1em;}
.font-large{font-size: 1.2em;}
.font-larger{font-size: 1.5em;}

/* line-height */
.line-height-050{line-height: 0.5;}
.line-height-060{line-height: 0.6;}
.line-height-075{line-height: 0.75;}
.line-height-080{line-height: 0.8;}
.line-height-100{line-height: 1;}
.line-height-150{line-height: 1.5;}
.line-height-200{line-height: 2;}

/* テキストのインデント */
.text-indent-0 {text-indent: 0;}
.text-indent-1em {text-indent: 1em;} /* 1emのインデント */
.text-indent-2em {text-indent: 2em;} /* 2emのインデント */
.text-indent-3em {text-indent: 3em;} /* 3emのインデント */

/* ぶら下がりインデント Hanging indent */
.hanging-indent {
    text-indent: -1em; /* インデントの幅 */
    padding-left: 1em; /* テキストの左側のパディング */
}

/* absolute-left */
.left-0 {left: 0;}
.left-05 {left: 5rem;}
.left-06 {left: 6rem;}
.left-08 {left: 8rem;}
.left-10 {left: 10rem;}
.left-20 {left: 20rem;}

/* absolute-right */

/* absolute-bottom */
.bottom-0 {bottom: 0vh;}
.bottom-01 {bottom: 1vh;}
.bottom-02 {bottom: 2vh;}
.bottom-03 {bottom: 3vh;}
.bottom-04 {bottom: 4vh;}
.bottom-05 {bottom: 5vh;}
.bottom-06 {bottom: 6vh;}
.bottom-08 {bottom: 8vh;}

/* 応急メディアクエリ */
.pc_display{
    content-visibility: auto;
}

.mobile_display{
    content-visibility: hidden;
}
@media screen and (max-width: 1080px) {
    .pc_display{
        content-visibility: hidden;
    }
    .mobile_display{
        content-visibility: auto;
    }
}

/*border-top*/
.border-top {
    border-top: 1px solid #fff;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* ヘッダー */
h1{
    width: 96px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #ffffff90;
    color: #000000;
    padding: 2px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header_inner {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.header_logo img {
    width: auto;
    height: auto;
}

/* ナビゲーション */
/*
nav {
    justify-content: space-between;
    max-width: 1366px;
    margin: 0 auto;
}
*/

nav ul {
    display: flex;
    justify-content: space-between;
    max-width: 1366px;
    margin: 0 auto;
    /*padding: 20px 20px;*/
    gap: 0rem;
    color: #000000;
    /*mix-blend-mode: difference;*/
}

nav ul li a{
    color: #000000;
    font-size: 1.5rem;
    font-weight: normal;
    font-family: /*"Zen Old Mincho"*/"Bebas Neue","Hiragino Sans",Meiryo,sans-serif;
    text-decoration: none;
    padding: 34px 30px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* ロゴ */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "Bebas Neue","Zen Old Mincho", serif;
}

/* メニュー */
.menu {
    display: flex;
    list-style: none;
}


/* index */
.top_hero {
    position: relative;
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/hero_view_0.jpg') center/cover no-repeat;
}

.blur_overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 15%;
    pointer-events: none;
    z-index: 2;
}

/* 格子状のオーバーレイ */
/* 無効化中 */
.lattice_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      /*repeating-linear-gradient(
        90deg,
        rgba(70, 70, 70, 0.028),
        rgba(70, 70, 70, 0.028) 26px,
        transparent 1px,
        transparent 28px
      ),*/
      /*repeating-linear-gradient(
        0deg,
        rgba(70, 70, 70, 0.028),
        rgba(70, 70, 70, 0.028) 26px,
        transparent 1px,
        transparent 28px
      ),*/
        /* 右半分で透明になるグラデーションマスク */
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.7) 0%,  /* 左端（グリッドが見える） */
            rgba(0, 0, 0, 0.4) 40%, /* 40%地点でグリッドがまだ見える */
            rgba(0, 0, 0, 0.0) 50%, /* 40%地点でグリッドがまだ見える */
            rgba(0, 0, 0, 0) 100%   /* 100%（右端）で完全透明 */
        );
    pointer-events: none;
    z-index: 3;
}


/* ぼかしオーバーレイ */
/* イキ */
.blur_overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 15%;
    pointer-events: none;
    z-index: 4;
}

/* 上端のぼかし */
.top_blur {
    top: 0;
    background: linear-gradient(to bottom, #e0f4ff4a, transparent);
}

/* 下端のぼかし */
.bottom_blur {
    bottom: 0;
    background: linear-gradient(to top, #93d7ff88, transparent);
}

/* ヒーロータイトル */
.top_hero_title {
    position: absolute;
    top: 5vw; /* 画面上からの距離 */
    left: 0vw; /* 画面左からの距離 */
    width: 100%;
    font-family: "Bebas Neue","Hiragino Sans",Meiryo,sans-serif;
    font-size: 9rem; /* 必要に応じてフォントサイズを調整 */
    font-weight: 300;
    color: #fff; /* テキスト色を白に設定 */
    margin: 0;
    transform: scaleX(0.9) translateX(0.1rem);
    letter-spacing: 0.1rem;
    z-index: 5;
}

.top_hero_title::after {
    content: '';
    display: block;
    width: 50%;
    height: 0.2rem;
    background-color: #fff;
    margin-top: 0.5rem;
}

.top_hero_theme {
    position: absolute;
    bottom: 10vh; /* 画面下からの距離 */
    right: 5vw; /* 画面左からの距離 */
    font-size: 4rem; /* 必要に応じてフォントサイズを調整 */
    color: #ffffff; /* テキスト色を白に設定 */
    writing-mode: vertical-rl;
    line-height: 1.5; /* 行間を調整 */
    padding-left: 2em;
    text-indent: -3em;
    text-shadow: 0px 0px 16px #000000;
    z-index: 5;
}

.top_hero_theme span.dash{
    letter-spacing: -0.5rem;
    font-size: 3rem;
    
}
  

.top_hero_theme span.small_theme{
    font-size: 3rem;
    
}

.top_hero_theme span.red{
    color: #ff1d25;
    
}

.top_hero_contact{
    position: absolute;
    bottom: 12vh;
    left: 13vw;
    font-size: 2.6rem;
    letter-spacing: 0.1rem;
    text-indent: 0.1rem;
    color: #fff;
    background-color: #cd202f;
    padding: 8px 90px 5px 90px; 
    z-index: 5;
}

/* メイン 汎用 */
div.main{
    margin: 0 auto;
    max-width: 100%;
    /* padding-bottom: 9rem; */
    
}

.container{
    margin: 0 0 2rem 0;
}

div.main div.container .container_discription{
    margin: 0 auto;
    max-width: 1366px;
}

div h2{
    font-size: 2.5rem;
    font-weight: 200;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    padding-top: 6rem;
    padding-bottom: 6rem;
    letter-spacing: 0.1rem;
    /*text-shadow: 0px 0px 20px #fff;*/
}

.top_header{
    margin-top: 4rem;
}

div.main h3{
    padding: 0rem 0rem 2rem 0rem;
    font-size: 2rem;
    font-weight: 200;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    text-wrap: unset;
    
}

div.main ul{
    padding: 0rem 0rem 2rem 4rem;
    font-size: 1.4rem;
    font-weight: 200;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    text-wrap: unset;

}

div.main ul ol{
    padding-left: 3rem;
    text-indent: -3rem;
}


/*gloval p*/
div.main p{
    font-size: 1.4rem;
    font-weight: 300;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    padding-bottom: 8rem;
    line-height: 4rem;

}


div.main div.first_discription{
    height: 100vh;
    background: url(../img/firsr_discription.jpg) right center / 80% no-repeat;
}

div.main div.first_discription div div.first_discription_main{
    padding-top: 4rem;
}

div.main div.container p{
    padding-bottom: 2rem;

}

div.main div.container p.list_name{
    padding-top:3rem; 
    padding-bottom: 2rem;
    line-height: 1;
}
div.main div.container p.bottom_5rem{
    padding-top:1rem; 
    padding-bottom: 6rem;
}


div.main div p.pick_up{
    padding-top: 12rem;
    font-size: 3rem;
}

/* join */
/* ヒーロー全体 */


.absolute_relative{
    position: relative;
    background-color: #ffffff;
}

.join_us_hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
  
  /* 上位レイヤー：theme message*/
.join_us_theme {
    position: absolute;
    top: -8vw;
    left: -12vw;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slide-in 1.6s cubic-bezier(.06, .92, .07, .97) forwards;
    rotate: -13deg;
}

.join_us_theme_mobile{
    display: none;
}

.join_us_theme_mobile .join_us_theme_mobile_text{
    font-size: 1rem;
}


.join_us_message{
    position: relative;
    display: flex;
    justify-content: left;
    align-items: end; 
    width: 25%;
    height: 100%;
    padding-bottom: 1rem;
    z-index: 1;
    background-color: #cd202f;

}

div p.join_us_message_text {
    padding: 0 0 5rem 6rem;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 400;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    line-height: 4rem;
    color: #fff;
    text-shadow: none;
}
  

  /* 中段レイヤー：comment */
  .join_us_comment {
    position: absolute;
    top: -18vw;
    right: -35vw;
    width: 100vw;
    height: 100vw;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center; 
    animation: slide-in 1.8s cubic-bezier(.06, .92, .07, .97) forwards;
  }
  
  .join_us_comment img {
    width: 22%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
  }

  .join_us_comment_img_mobile{
    display: none;
}

  /* 下位レイヤー：main */
  .join_us_main {
    position: absolute;
    inset: 0;
    /*top: -20vw;*/
    /*left: -2vw;*/
    /*width: 100vw;*/
    /*height: 100vw;*/
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    animation: slide-in 1.0s cubic-bezier(.06, .92, .07, .97) forwards;
  }
  
  .join_us_main img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
  }

  /* 旧版
  .join_us_main img {
    width: 90%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
  }*/

  .join_us_terms{
    padding-bottom: 2rem;

  }

  .join_us_terms>h3{
    padding-bottom: 2rem;
  }



/* story */
div.main_text p{
    font-size: 1.5rem;
    font-weight: 300;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    padding-bottom: 4rem;
    line-height: 3rem;
}


/* character */
/* -character list*/

.details-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 4rem;
}

.details {
    position: relative;
    width: 20%;
    height: 360px;
    transition: width 0.5s;
    overflow: hidden;
}

.details_25per {
    position: relative;
    width: 25%;
    height: 360px;
    transition: width 0.5s;
    overflow: hidden;
}

.details_33per {
    position: relative;
    width: 33.33%;
    height: 360px;
    transition: width 0.5s;
    overflow: hidden;
}

.details_50per {
    position: relative;
    width: 50%;
    height: 360px;
    transition: width 0.5s;
    overflow: hidden;
}

.details_100per {
    position: relative;
    width: 100%;
    height: 360px;
    transition: width 0.5s;
    overflow: hidden;
}

.details:hover {
    /* width: 880px; */
    width: 100%;
}

.details_25per:hover {
    width: 880px;
}

.details_33per:hover {
    width: 880px;
}

.details_50per:hover {
    width: 880px;
}

.details_100per:hover {
    width: 100%;
}
.details[open] .details-summary::before {
    display: none;
}

.details_33per[open] .details-summary::before {
    display: none;
}

.details-summary {
    display: block;
    background-color: rgba(0, 0, 0, 0.0);
    position: absolute;
    color: #fff;
    font-size: 18px;
    height: 100%;
    width: 100%;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}

.details-summary::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}

.details-summary:hover::before {
    display: none;
}

.details-summary img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details-summary::-webkit-details-marker {
    display: none;
}

.details-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 6rem;
    background-color: #ffffff00;
    width: 800px;
    height: 400px;
    z-index: 1;
}

.details-content .details-name{
    position: absolute;
    top: 0px;
    left: 15%;
    /*transform: translate(0%, 0%);*/
    font-size: 6rem;
}

.details-content .details-name_single{
    position: absolute;
    top: 10%;
    left: -33%;
    font-size: 6rem;
}


.details-content .details-name_longer{
    position: absolute;
    top: 0px;
    left: 8%;
    letter-spacing: -0.5rem;
    transform: scaleX( 0.8);
    font-size: 6rem;
}

/* character Individual */
/*hidden*/
.character_header1{
    display: none;
}

/* 全体レイアウト */
.wrapper_character {
    position: relative;
    overflow: hidden;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(to bottom, #ffffff, #e5f0f3);
    color: #000000;
    font-family: 'Zen Old Mincho', serif;
}

.wrapper_character_bg-active {
    position: relative;
    overflow: hidden;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    padding: 0px;
    background: linear-gradient(to bottom, #ffffff, #e5f0f3);
    color: #000000;
    font-family: 'Zen Old Mincho', serif;
}

/* メインコンテンツ */
.main_character {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 40px;
    justify-content: space-between;
}

.left_upper {
    position: absolute;
    top: 10%; /* 上側に配置 */
    left: 5%;
}

.left_upper_bg-active {
    position: absolute;
    top: 0%; /* 上側に配置 */
    left: 0%;
}

.left_lower{
    max-width: 50%;
    position: absolute;
    bottom: 2%; /* 下側に配置 */
    left: 5%;
}

.right_upper {
    position: absolute;
    top: 15%; /* 下側に配置 */
    right: 5%;
}

.right_lower {
    max-width: 42%;
    position: absolute;
    bottom: 2%; /* 下側に配置 */
    right: 5%;
    /*height: 40vh;*/
    /*border: #000 solid 1px;*/
    background-color: #ffffff05;
    animation: slide-in-right 1.2s cubic-bezier(.06, .92, .07, .97);
}

/* キャラクター背景画像 */
.character_background {
    width: 100vw; /* 親要素の幅を指定 */
    height: 100vh;
}

.character_background_image {
    max-inline-size: none; /* reset.css の影響を打ち消す */
    width: 100vw; /* 画像全体のサイズを指定 */
    height: auto;
    position: absolute;
    scale: 1.0;
    left: 0; /* 左端を基準に */
    top: 0;
    z-index: 0;
    
}

/* キャラクター画像 */
.character_image {
    width: 45vw; /* 親要素の幅を指定 */
    height: 100vh;
    /*filter: drop-shadow(-40px 0px 0px #4d4c4c52);*/
    /*overflow: hidden; /* はみ出した部分を非表示 */
    position: relative; /* 画像の絶対配置の基準 */
    animation: dropShadowMove 3.2s cubic-bezier(.06, .92, .07, .97) forwards;
}

@keyframes dropShadowMove {
    0% {
      filter: drop-shadow(0px 0px 0px #4d4c4c52);
      opacity: 0;
    }
    100% {
      filter: drop-shadow(-80px 0px 0px #4d4c4c52);
      opacity: 1;
    }
  }

.character_image img {
    max-inline-size: none; /* reset.css の影響を打ち消す */
    width: 100vw; /* 画像全体のサイズを指定 */
    height: auto;
    position: absolute;
    scale: 1.8;
    left: 0; /* 左端を基準に */
    top: 0;
    translate: -20% 15%; /* 必要に応じて調整 */
    z-index: 1;
}


/* キャラクター名 */

.character_section{
    width: 100vw;
    position: absolute;
    z-index: 0;
    color: #000;
    opacity: 0.1;
    font-size: 180px;
    font-family:"Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 20px;

    font-weight: bold;

    top: -10vh;
    left: -10vw;

    animation: slide-in-op01 3s cubic-bezier(.06, .92, .07, .97);
}

.character_section_longer{
    width: 150vw;
    position: absolute;
    z-index: 0;
    color: #000;
    opacity: 0.1;
    font-size: 180px;
    font-family:"Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: normal;
    letter-spacing: 0;
    margin-bottom: 20px;
    transform: scalex(0.6);
    font-weight: bold;

    top: -10vh;
    left: -36.5vw;

    animation: slide-in-x060per 3s cubic-bezier(.06, .92, .07, .97);
}

.character_name_role{
    position: relative;
    width: 65vw;
}

.character_name {
    position: absolute;
    bottom: 5vh;    
    margin-bottom: 20px;
    padding: 0;;
    font-size: 8rem;
    font-weight: lighter;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    text-wrap: unset;
    z-index: 2;
    animation: slide-in 2.0s cubic-bezier(.06, .92, .07, .97);
}

.character_name_9 {
    position: absolute;
    left:-17.5vw;
    bottom: 5vh;
    width: 100vw;    
    margin-bottom: 20px;
    padding: 0;;
    font-size: 8rem;
    font-weight: lighter;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    letter-spacing: -1rem;
    text-wrap: unset;
    z-index: 2;
    transform: scaleX(0.65);
    animation: slide-in-065 2.0s cubic-bezier(.06, .92, .07, .97);
}


.character_name_ruby{
    position: absolute;
    z-index: 1;
    color: #ffffff24;
    mix-blend-mode: difference;
    font-size: 9rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;

    bottom: 4rem;
    left: 4rem;
    animation: slide-in 0.8s cubic-bezier(0,.62,.08,.99);
}


.character_author{
    position: absolute;
    left: 0;
    z-index: 2;
    color: #000;
    font-size: 1.6rem;
    font-family:"Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    
    bottom: 40vh;
    animation: slide-in 1.8s cubic-bezier(0,.62,.08,.99);
}

.character_role{
    position: absolute;
    bottom: 25vh;
    z-index: 2;
    font-size: 3.75rem;
    font-family:"Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #000;

    animation: slide-in 1.8s cubic-bezier(0,.62,.08,.99);
}

/* bg */

.character_name_bg .svg-bg-4 {
    position: absolute;
    bottom: 5vh;
    left: -15vw;
    /* アニメーションのスタイル */
    animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
}

.character_name_bg .svg-bg-5 {
    position: absolute;
    bottom: 5vh;
    left: -10vw;
    /* アニメーションのスタイル */
    animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
}

.character_name_bg .svg-bg-6 {
    position: absolute;
    bottom: 5vh;
    left: -7vw;
    /* アニメーションのスタイル */
    animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
}

.character_name_bg .svg-bg-8 {
    position: absolute;
    bottom: 5vh;
    left: -5.5vw;
    /* アニメーションのスタイル */
    animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
}

.character_role_bg .svg-bg {
    position: absolute;
    bottom: 26.5vh;
    left: -18vw;
    /* アニメーションのスタイル */
    animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
}

/* scriptでオンオフするもの、退避 */

.character_skill, .character_gear, .character_perk, .character_weapon {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    box-sizing: border-box;
    
}

/* キャラクター台詞 縦書き自由配置*/
.character_lines {
    position: absolute;
    top: -45vh;
    left: 12vw;
    font-size: 1.6rem;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: #000;
    padding-bottom: 40px;



    rotate: 10deg;
    z-index: 1;
}

.character_lines p{
    padding: 1rem;
    writing-mode: vertical-rl; 

    font-feature-settings: initial;
}


.character_lines_space{
    display: inline-block;
}

/* キャラクター台詞 横書き自由配置*/

.character_lines_horizontal {
    position: absolute;
    top: -20vh;
    left: 0vw;
    font-size: 1.4rem;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: #000;
    padding-bottom: 40px;
    z-index: 1;
}

.character_lines_horizontal p{
    padding: 1rem;
    writing-mode: horizontal-tb; 

    font-feature-settings: initial;
}

/* キャラクター台詞 bukup
.character_lines {
    font-size: 1.4rem;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: #000;
    padding-bottom: 40px;
}*/

/* キャラクター紹介 */

.character_discription {
    position: relative;
    z-index: 2;
}

.character_discription_header{
    color: #000;
    border-bottom: #000 solid 1px;
    padding: 1rem 1rem 0.8rem 2rem;
    font-family: 'Bebas Neue', sans-serif; 
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.2rem;
}

.character_discription_main{
    padding: 2rem 1rem;
    background: #ffffff66;
}

.character_discription_main_opacity-070{
    padding: 2rem 1rem;
    background: #ffffffb3;
}

.character_discription_main_null{
    padding: 2rem 1rem;
    background: #ffffff66;
    width: 40vw;
    height: 40vh;

}

.character_discription_main p,
.character_discription_main_null p
 {
    font-size: 1rem;
    line-height: 1.5rem;
    max-width: 95%;
    margin: 1.5rem auto;

}
/* character設定メニュー */
.character_menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 1.5rem;
    margin: 0;
    padding: 0 5px 20px 20px;

    border-radius: 8px;
    letter-spacing: 0.2rem;

    z-index: 3;
    position: relative;
}

.character_menu li {
    cursor: pointer;
}
.character_menu li.active {
    color: white;
    text-decoration: underline;
}
.character_menu li::after {
    position: absolute;
    display: block;
    right: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #00000081;
    margin-top: 2px;
    transform: scale(0, 1);
    transform-origin: right;
    transition: transform 0.25s;
}
.character_menu li:hover::after {
    transform: scale(1, 1);
}
.character_menu li:first-child {
    animation: slide-in-top_1 0.4s ease-out;
}
.character_menu li:nth-child(2) {
    animation: slide-in-top_2 0.6s ease-out;
}
.character_menu li:nth-child(3) {
    animation: slide-in-top_3 0.8s ease-out;
}
.character_menu li:nth-child(4) {
    animation: slide-in-top_4 1.0s ease-out;
}

.character_menu li:nth-child(5) {
    animation: slide-in-top_5 1.2s ease-out;
}


/* スキルや戦闘レベルの表 */
dl {
    /*display: grid;*/
    /*grid-template-columns: 1fr 2fr;*/
    /*gap: 10px;*/
    /*max-width: 70%;*/
    margin: 0px 0px 20px 40px;
}

dl.gear_list,
dl.level_score
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    /*max-width: 70%;*/
    
}

dt{
    text-align: left;
}

/* 装備一覧 */
dl dt {
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 0.75rem 0rem 0.2rem 0rem;
}

/* modal dd */
dd {
    /*background: rgba(255, 255, 255, 0.1);*/
    padding: 0.25rem 2rem;
    text-align: left;
}

dl.character_skill_data dd{
    text-align: left;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .character_description p {
        font-size: 16px;
    }
    dl {
        grid-template-columns: 1fr;
    }
}

/* モーダル */



.modal_content_section {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal_content {
    display: flex;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 1.2rem;
}

.modal_content div {
    margin: 0 auto;
    flex: 1;
}



.modal img {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.modal img:hover {
    opacity: 1;
}

.modal_overlay,
.modal_close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1001;
}

.modal_close {
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #fff;
    position: absolute;
}

.modal.fade-in {
    display: flex;
    opacity: 1;
}

.modal.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal_left{
    display: block;
    position: absolute;
    transform: translate(0%, -50%);
    width: 78%;
    height: auto;

    /* 上下左右にフェードアウトを適用 */
    -webkit-mask-image: 
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 85%, rgba(0,0,0,0)),
      linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0));

      mask-image: 
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 85%, rgba(0,0,0,0)),
      linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0));

    /* マスクを合成 */
    -webkit-mask-composite: intersect;
    mask-composite: intersect;
}


.modal_right{
    display: block;
    position: absolute;
    transform: translateY(0%);
    width: 40vw;
    min-width: 30%;
    height: auto;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2); /* ぼかしを広げる */
    filter: drop-shadow(0px 0px 20px #000);
    z-index: 1002;
}


#modal_title{
    padding:  2rem 0 2rem 0;
}


.character_parsonality_grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0em 1em;
}

.character_parsonality_grid  dt {
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.character_parsonality_grid  dd {
  margin: 0;
  padding: 0;
  font-size: 1rem;

}

/* レイアウト00 */


.modal_layoutleftytop_left {
    top: 56%;
    left: 15%;
}

.modal_layoutleftytop_right {
    top: 10%;
    left: 10%;
}

.modal_layout00_left {
    top: 56%;
    left: 0%;
}
.modal_layout00_right {
    top: 10%;
    right: 10%;
}

/* レイアウト01 */
.modal_layout01_left {
    top: 56%;
    left: 2%;
}
.modal_layout01_right {
    top: 24%;
    right: 12.5%;
}

/* レイアウト02 */
.modal_layout02_left {
    top: 56%;
    right: 10%;
}
.modal_layout02_right {
    top: 22%;
    right: 55%;
}

/* レイアウト03 */
.modal_layout03_left {
    top: 56%;
    left: 2%;
}
.modal_layout03_right {
    top: 15%;
    right: 12.5%;
}

/* レイアウト04 画像のみ */
.modal_layout04_left {
    top: 56%;
    right: 12%;
}
.modal_layout04_right {
    top: 80%;
    right: 0%;
}

/* レイアウト05 画像やや右、文字箱左中央からやや下 */
.modal_layout05_left {
    top: 56%;
    right: 10%;
}
.modal_layout05_right {
    top: 36%;
    right: 55%;
}

/* レイアウト06 文字箱右下 */
.modal_layout06_left {
    top: 56%;
    right: 10%;
  }

.modal_layout06_right {
    top: 55%;
    right: 5.5%;
}

/* レイアウト07 画像やや右、文字箱左（30vw） */
.modal_layout07_left {
    top: 56%;
    right: 10%;
}
.modal_layout07_right {
    top: 20%;
    right: 60%;
    width: 20vw;
}

/* レイアウト08 画像やや右、文字箱左下 */
.modal_layout08_left {
    top: 56%;
    right: 10%;
}
.modal_layout08_right {
    top: 55%;
    right: 55%;
}

/* レイアウト09 画像つよく右、文字箱つよく左（30vw） */
.modal_layout09_left {
    top: 56%;
    right: 2%;
}
.modal_layout09_right {
    top: 20%;
    right: 68%;
    width: 20vw;
}

.modal_layoutnovel_left {
    top: 56%;
    left: 0%;
}
.modal_layoutnovel_right {
    top: 10%;
    right: 15%;
}


.modal_text p{
    font-size: 1.2rem;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: #fff;
    padding-bottom: 1em;
}

.modal_novel{
    height: 75%;
}

.modal_novel h3{
    font-size: 1.4rem;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    line-height: 4;
}

.modal_novel p{
    font-size: 1rem;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
    font-weight: 400;
    line-height: 2;
    letter-spacing:0.1rem;
    color: #fff;
    padding-bottom: 1em;
}


.modal_credit {
    text-align: right;
    font-size: 0.8rem;
}

/* tips */
/* -tips list*/

nav.sidebar {
    width: 250px;
    height: 100vh;
    background: #f8f8f8;
    padding: 130px 20px 20px 20px;
    position: fixed;
    overflow-y: auto;
}
.sidebar ul {
    list-style: none;
    padding: 0;
    flex-direction: column;
}
.sidebar ul li {
    margin-bottom: 10px;
}
.sidebar ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 0;
}

.term {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    background-size: cover;
    background-position: center;
    color: #333;
    scroll-margin-top: 130px;
}


.term h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
}

.content {
    margin-left: 270px;
    padding: 100px 20px 20px 20px;
    width: calc(100% - 270px);
}

/* footer */

footer {
    background-color: #000000;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
    font-size: 1.2rem;
    font-family: "Zen Old Mincho","Hiragino Sans",Meiryo,sans-serif;
}

/* 連番 背景*/
.background_1{
    background: url('../img/background_001.webp') right/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_2{
    background: url('../img/background_002.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_3{
    background: url('../img/hero_view_2.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}

.background_4{
    background: url('../img/hero_view_3.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_5{
    background: url('../img/hero_view_4.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_6{
    background: url('../img/hero_view_5.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}

.background_7{
    background: url('../img/hero_view_6.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_8{
    background: url('../img/hero_view_7.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_9{
    background: url('../img/hero_view_8.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}
.background_10{
    background: url('../img/hero_view_9.webp') center/cover no-repeat; /* 必要に応じて背景画像を設定 */
}

/* mobile用空白 */
.spacer-mobile {
    display: none;
}

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

    html, body {
        font-size: 14px;
    }

    a {
    text-decoration: none;
    font-family: "Bebas Neue", "Zen Old Mincho", serif;
    font-size: 14px;
    }

    .links{
        text-align: center;
    }

    .links a {
    font-size: calc(120vw / 19.2);
    }

    span.inversion_red {
        display: inline-block;
        padding: 1.2rem 4rem 1.1rem 4rem;
    }

    /* header */
    h1 {
        width: 46px;
    }

    /* global */
    nav ul li a {
        font-size: 1.0rem;
        padding: 16px 8px;
    }

    /*hero */
    .top_hero {
        height: 100vh;
        background: url(../img/hero_view_0.jpg) center / cover no-repeat;
    }

    .top_hero_contact {
        position: absolute;
        bottom: 2vh;
        left: 5vw;
        font-size: 2.6rem;
        letter-spacing: 0.1rem;
        text-indent: 0.1rem;
        color: #fff;
        background-color: #cd202f;
        padding: 8px 90px 5px 90px;
        z-index: 5;
    }

    .top_hero_theme {
        bottom: 24vh;
     }

    div h2 {
        font-size: clamp(16.8px, calc(1.2px + 4vw), 17.5px);
        padding: 4rem 1rem;
        letter-spacing: 0;
        text-wrap: unset;
    }

    div.main {
        padding-bottom: 1rem;
    }

    .wrapper_character{
        overflow-y:visible
    }

    .top_header {
        margin-top: 4rem;
    }

    h2.under_mark::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 3rem;
        display: block;
        background: #000000;
        width: 100%;
        height: 3.8rem;
        z-index: -1;
    }


    h2.under_mark_short::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 3rem;
        display: block;
        background: #000000;
        width: 100%;
        height: 3.8rem;
        z-index: -1;
    }

    .under_line::after {
        width: 100%;
    }

    div.main p {
        font-size: 1.2rem;
        padding: 0 2rem;
        line-height: 2rem;
    }

    div.main div.first_discription {
        height: auto;
        background: url(../img/firsr_discription.jpg) no-repeat;
        background-size: 150%;
        background-position: 75% 100%;
    }

    /* absolute-left */
    .left-0 {left: 0;}
    .left-05 {left: -1rem;}
    .left-06 {left: -1rem;}
    .left-08 {left: -1rem;}
    .left-10 {left: -1rem;}
    .left-20 {left: -1rem;}
    
    /* join us*/

    .join_us_hero {
        height: 85vh;
    }
    .join_us_message {
        width: 33.3%;
    }

    .join_us_main {
        position: absolute;
        top: 15vh;
        left: -130vw;
        width: 275vw;
        height: 100%;
        z-index: 1;
    }
    .join_us_theme {
        display: none;
    }

    .join_us_theme_mobile{
        display: flex;
        position: absolute;
        top: calc( 68vw / 3.75);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        writing-mode: vertical-lr;
        color: #fff;
    }
    .join_us_comment {
        display: none;
    }
    .join_us_comment img {
        width: 50%;
    }

    .join_us_theme_mobile .join_us_theme_mobile_text{
        font-size: 2.8rem;
    }

    div p.join_us_message_text {
        padding-bottom: 1rem;
    }

    div.main h3 {
        padding: 0rem 2rem 2rem;
        font-size: 1.6rem;
    }

    div.main ul {
        padding: 0rem 2rem 2rem 2rem;
        font-size: 1.2rem;
    }

    div.main ul ol{
        padding-left: 2.5rem;
        text-indent: -2.5rem;
    }
    

    /* background_1 */
    .background_1{
        background: url('../img/background_001.webp') no-repeat; /* 必要に応じて背景画像を設定 */
        background-size: cover;
        background-position: 82.5%;
    }
    .background_2{
        background: url('../img/background_002.webp')  no-repeat; /* 必要に応じて背景画像を設定 */
        background-size: cover;
        background-position: 82.5%;
    }

    /* character */

    .details-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 0rem;
        overflow: hidden;
    }

    .details {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details_25per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }


    .details_33per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }


    .details_50per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details:hover {
        width: 120%;
        height: 30vh;
    }

    .details_25per:hover {
        width: 120%;
        height: 30vh;
    }

    .details_33per:hover {
        width: 120%;
        height: 30vh;
    }

    .details_50per:hover {
        width: 120%;
        height: 30vh;
    }

    div.main div.container p.list_name {
        padding-top: 3rem;
        padding-bottom: 2rem;
        line-height: 1;
        font-size: 5rem;
    }

    .details-content .details-name_longer {
        left: 25%;
    }

    .details-summary img {
        object-position: 0% 25%;
    }

    .details-content {
        top: 90%;
        left: 30%;
    }
    .details-content .details-name{
        left: 30%;
        text-shadow: #ffffff 0px 0px 10px;
    }

    /* character Individual */

    .main_character {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0px;
        justify-content: center;
    }
    .right_upper {
        top: 10%;
        left: 0%;
    }
    .character_image {
        bottom: 0vh;
        right: -16vw;
        scale: 2.8;
        width: 45vw;
        height: 0vh;
        
    }

    .character_image img {
        position: absolute;

        left: 0;
        top: 0;
        translate: -20% 15%;
        z-index: 1;
    }

    @keyframes dropShadowMove {
        0% {
          filter: drop-shadow(0px 0px 0px #4d4c4c52);
          opacity: 0;
        }
        100% {
          filter: drop-shadow(-25px 0px 0px #4d4c4c52);
          opacity: 1;
        }
      }

    .character_section {
        position: absolute;
        top: -12vh;
        left: 5vw;
        width: 100vw;
        letter-spacing: 0px;
        font-weight: bold;
        
        writing-mode: vertical-rl;
        font-size: 8rem;

        height: 100vh;
    }

    .character_section_longer {
        top: -12vh;
        left: 5vw;
        width: 100vw;
        writing-mode: vertical-rl;
        font-size: 8rem;
        height: 100vh;
        transform: scale(1,1);
        animation: slide-in-op01 3s cubic-bezier(.06, .92, .07, .97);
        white-space: nowrap;
        overflow: hidden;
        }


    .character_name_role {
        position: relative;
        width: 95vw;
        height: calc( 833.75vh / 6.67 );
    }

    .character_name_ruby {
        writing-mode: sideways-rl;
        bottom: 5rem;
        left: 0rem;
        font-size: 8rem;
    }

    .character_role_bg .svg-bg {
        bottom: 2.5vh;
        left: 15vw;
    }

    .character_name {
        bottom: -1vh;
        writing-mode: vertical-rl;
        padding: 0;
        font-size: 5rem;
        text-wrap: unset;
        animation: slide-in-bottom_1 2.0s cubic-bezier(.06, .92, .07, .97);
    }

    

    .character_name_9 {
        left: 0;
        font-size: 4rem;
        writing-mode: vertical-lr;
        transform: scaleX(1);
    }

    @keyframes slide-in-065 {
        from {
            transform: translateX(-100%) scaleX(1);
            opacity: 0;
        }
        to {
            transform: translateX(0%) scaleX(1);
            opacity: 1;
        }
    }

    .character_name_bg .svg-bg-4 {
        position: absolute;
        bottom: 8vh;
        left: -18.5rem;
        width: 41rem;
        height: 8rem;
        rotate: -90deg;
        animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
        max-inline-size: unset;
    }

    .character_name_bg .svg-bg-5 {
        position: absolute;
        bottom: 8vh;
        left: -18.5rem;
        width: 41rem;
        height: 8rem;
        rotate: -90deg;
        animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
        max-inline-size: unset;
    }

    .character_name_bg .svg-bg-8 {
        position: absolute;
        bottom: 25vh;
        left: -87.5vw;
        width: 55rem;
        height: 8rem;
        rotate: -90deg;
        animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
        max-inline-size: unset;
    }

    .character_role {
        bottom: 0vh;
        right: 0vw;
        font-size: 2.5rem;
    }
    .right_lower{
        position: static;
        max-width: 100%;
        animation: unset;
    }

    .spacer-mobile {
        height: 100vh;
        display: block;
      }

    .character_lines {
        position: sticky;
        rotate: unset;
        z-index: 2;
    }

    .character_lines_horizontal {
        position: sticky;
        rotate: unset;
        z-index: 2;
    }
    .character_lines p {
        padding: 1rem;
        writing-mode: horizontal-tb;
        font-feature-settings: initial;
    }

    .character_lines_space{
        display: none;
    }
    
    .character_discription_main_null {
        width: 95vw;
    }

    .character_author {
        left: unset;
        right: 3vw;
        bottom: -1vh;
        font-size: 1rem;
        background-color: #ffffff25;
        padding: 0 0.5rem;
    }

    /* modal */


    .modal_content {
        display: flex;
        padding: 20px;
        border-radius: 10px;
        color: #fff;
        font-size: 1.2rem;
        max-height: 100vh;
        overflow-y: scroll;
    }

    .modal_left{
        width: 100%;
    }

    .modal_right{
        padding: 1rem 1rem;
        width: 100%;
    }

    .modal_layoutleftytop_left {
        top: calc(160vw / 3.75);
        left: 0;
    }
    .modal_layoutleftytop_right {
        left: 0;
        top: 30vh;
        bottom: 0;
        position: relative;
    }
    .modal_layout00_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout00_right {
        right: 0;
        top: 30vh;
        bottom: 0;
        position: relative;
    }

    .modal_layout01_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout01_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;
    }

    .modal_layout02_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout02_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;
    }

    .modal_layout03_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout03_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;
    }

    /* レイアウト06 文字箱右下 */
    .modal_layout06_left {
        top: calc(160vw / 3.75);
        right: 0;
    }

    .modal_layout06_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;

    }

    /* レイアウト07 画像やや右、文字箱左（30vw） */
    .modal_layout07_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout07_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;

    }

    /* レイアウト08 画像やや右、文字箱左下 */
    .modal_layout08_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout08_right {
        right: 0;
        top: unset;
        bottom: 0;
        min-height: 60vh;
    }

    /* レイアウト09 画像つよく右、文字箱つよく左（30vw） */
    .modal_layout09_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout09_right {
        right: 0;
        top: 30vh;
        bottom: 0;
        position: relative;
    }



    /*画像オンリー*/
    .modal_layout04_left {
        top: calc(160vw / 3.75);
        right: 0;
    }

    .modal_layout05_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout05_right {
        right: 0;
        top: unset;
        bottom: 0;
    }

    .modal_layoutnovel_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layoutnovel_right {
        top: 10%;
        right: 15%;
    }

    .modal_novel {
    height: 60%;
}

    .modal_text p {
        font-size: 1rem;
        line-height: 1.5;
        padding-bottom: 1rem;
    }

    /* tips */

    nav.sidebar {
        width: 35vw;
    }

    .sidebar ul li {
        margin-bottom: 15px;
    }
    .sidebar ul li a {
        font-size: 0.85rem;
    }

    .term {
        padding: 30px 0px;
    }

    .content {
        margin-left: 35vw;
        padding: 100px 20px 20px 20px;
        width: calc(100% - 35vw);
    }

    h3 + div {
        margin-left: 1rem;
    }
    dl dt {
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0.75rem 0rem 0.2rem 0rem;
    }

    dd {
    /* background: rgba(255, 255, 255, 0.1); */
    padding: 0.25rem 2rem;
    text-align: left;
    }

    dt,dd {
    text-decoration: none;
    font-family: "Bebas Neue", "Zen Old Mincho", serif;
    font-size: 1rem;
    }

}

/* タブレット用 */
@media (max-width: 1280px) and (min-width: 481px) {
    html, body {
        font-size: 16px;
    }

    /* line-height */
    .line-height-050{line-height: 0.33;}
    .line-height-060{line-height: 0.4;}
    .line-height-075{line-height: 0.5;}
    .line-height-080{line-height: 0.53;}
    .line-height-100{line-height: 0.66;}
    .line-height-150{line-height: 1;}
    .line-height-200{line-height: 1.33;}

    nav ul li a{
        padding: 34px 26px;
    }

    .top_hero {
        height: 100vh;
        background: url(../img/hero_view_0.jpg) center / cover no-repeat;
    }

    .top_hero_contact {
        position: absolute;
        bottom: 12vh;
        left: 5vw;
        font-size: 2.6rem;
        letter-spacing: 0.1rem;
        text-indent: 0.1rem;
        color: #fff;
        background-color: #cd202f;
        padding: 8px 90px 5px 90px;
        z-index: 5;
    }

    .top_hero_theme {
        bottom: 8vh;
    }

    div h2 {
        padding-left: 2rem;
        text-wrap: unset;
        font-size: 2rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    div.main {
        padding-bottom: 5rem;
    }

    div.main p {
        font-size: 1.4rem;
        padding: 0 2rem;
        line-height: 3rem;
    }

    div.main div.first_discription {
        height: auto;
        background: url(../img/firsr_discription.jpg) no-repeat;
        background-size: 65%;
        background-position: 75% 100%;
    }

    div.main div.container p.bottom_5rem {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }


    h2.under_mark::after {
        width: 100%;
        left: 0;
        height: 4.5rem;
        bottom: 1.8rem;
        
    }
    h2.under_mark_short::after {
        width: 100%;
        left: 0;
        bottom: 1.65rem;
    }

    div.main h3 {
        padding: 0rem 2rem 2rem;
        font-size: 1.6rem;
    }

    .top_header {
        margin-top: 8rem;
    }

    /* background_1 */
    .background_1{
        background: url('../img/background_001.webp') no-repeat; /* 必要に応じて背景画像を設定 */
        background-size: cover;
        background-position: 82.5%;
    }

}

/* join us  media query */

/* タブレット縦表示用 */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .join_us_main {
        position: absolute;
        right: 0;
        width: 1560px;/*スライドイン時、イラストの見切れ防止のため*/
        height: 100%;
        z-index: 1;
    }

    .join_us_main img{
        width: 100%;
        transform: translateX(-35%);
    }

    .join_us_theme {
        display: none;
    }

    .join_us_theme_mobile{
        display: flex;
        position: absolute;
        top: 10rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        writing-mode: vertical-lr;
        color: #fff;
    }

    .join_us_theme_mobile .join_us_theme_mobile_text{
        font-size: 4rem;
    }

    .join_us_comment {
        position: absolute;
        top: unset;
        bottom: 0vh;
        right: 0vw;

        width: 100vw;
        height: auto;
        z-index: 1;

        animation: slide-in 1.8s cubic-bezier(.06, .92, .07, .97) forwards;
    }

    .join_us_comment img {
        width: 100%;
    }

    .join_us_comment_img{
        display: none;
    }

    .join_us_comment_img_mobile{
        display: block;
        width: 100%;
        height: auto;
    }


    
    /* absolute-left 名前用*/
    .left-0 {left: 0;}
    .left-05 {left: 3.4375rem;}
    .left-06 {left: 4.125rem;}
    .left-08 {left: 5.5rem;}
    .left-10 {left: 6.875rem;}
    .left-20 {left: 13.75rem;}

    /* character */

    .character_name_bg .svg-bg-5 {
        position: absolute;
        bottom: 5vh;
        left: -5vw;
        /* アニメーションのスタイル */
        animation: slide-in 1.2s cubic-bezier(.06, .92, .07, .97);
    }
    .wrapper_character {
        overflow-y: visible;
    }
    .details-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 0rem;
        overflow: hidden;
    }

    .details {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details_25per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details_33per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details_50per {
        position: relative;
        width: 100%;
        height: 14vh;
        transition: width 0.5s;
        overflow: hidden;
    }

    .details:hover {
        width: 120%;
        height: 20vh;
    }
    .details_25per:hover {
        width: 120%;
        height: 20vh;
    }

    .details_33per:hover {
        width: 120%;
        height: 20vh;
    }

    .details_50per:hover {
        width: 120%;
        height: 20vh;
    }




    div.main div.container p.list_name {
        padding-top: 2rem;
        padding-bottom: 2rem;
        line-height: 1;
        font-size: 5rem;
    }

    .details-summary img {
        object-position: 0% 25%;
    }

    .details-content {
        top: 90%;
        left: 30%;
    }

    .character_name_role {
        position: relative;
        width: 65vw;
    }

    .character_role{
        font-size: 2.75rem;
        bottom: 15vh;
    }


    .character_name{
        font-size: 6rem;
        width: 120%;
    }

    .character_name_ruby {
        font-size: 6.5rem;
        width: 120%;
    }

    .character_name_9 {
        font-size: 5rem;
    }

    .character_role_bg .svg-bg {
        bottom: 16.5vh;
        left: -10vw;
    }

    
    .character_author {
        bottom: 25vh;
    }

    .character_image {
        bottom: 0vh;
        right: -16vw;
        scale: 2.8;
        width: 45vw;
        height: 0vh;
        
    }

    .character_image img {
        position: absolute;

        left: 0;
        top: 0;
        translate: -20% 15%;
        z-index: 1;
    }

    .right_upper {
        top: 10%;
        left: 0%;
    }

    .character_section {
        position: absolute;
        top: -12vh;
        left: 0vw;
        width: 100vw;
        height: 100vh;
        letter-spacing: 0px;
        font-weight: bold;
        
        writing-mode: vertical-rl;
        font-size: 8rem;
    }

    .character_section_longer {
        top: -12vh;
        left: 0vw;
        width: 100vw;
        height: 100vh;
        writing-mode: vertical-rl;
        font-size: 8rem;
        transform: scale(1,1);
        animation: slide-in-op01 3s cubic-bezier(.06, .92, .07, .97);
        white-space: nowrap;
        overflow: hidden;
    }

    @keyframes dropShadowMove {
        0% {
            filter: drop-shadow(0px 0px 0px #4d4c4c52);
            opacity: 0;
        }
        100% {
            filter: drop-shadow(-25px 0px 0px #4d4c4c52);
            opacity: 1;
        }
        }

    .right_lower{
        position: static;
        max-width: 100%;
        animation: unset;
    }

    .spacer-mobile {
        height: 100vh;
        display: block;
        }

    .character_lines {
        position: sticky;
        rotate: unset;
        z-index: 2;
    }

    .character_lines_horizontal {
        position: sticky;
        rotate: unset;
        z-index: 2;
    }
    .character_lines p {
        padding: 1rem;
        writing-mode: horizontal-tb;
        font-feature-settings: initial;
    }

    .character_lines_space{
        display: none;
    }
    .character_discription_main_null {
        width: 85vw;
    }

    /* modal */

    .modal_content {
        display: flex;
        padding: 20px;
        border-radius: 10px;
        color: #fff;
        font-size: 1.2rem;
        max-height: 100vh;
        overflow-y: scroll;
    }

    .modal_left{
        width: 100%;
    }

    .modal_right{
        padding: 1rem 1rem;
        width: 100%;
    }
    .modal_layoutleftytop_left {
        top: calc(160vw / 3.75);
        left: 0;
    }
    .modal_layoutleftytop_right {
        left: 0;
        top: 30vh;
        bottom: 0;
        position: relative;
    }
    .modal_layout00_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout00_right {
        right: 0;
        top: 30vh;
        position: relative;
    }
    .modal_layout01_left {
        top: 32vh;
        right: 0;
        left: 0;
    }
    .modal_layout01_right {
        right: 0;
        top: 50vh;
    }

    .modal_layout02_left {
        top: 32vh;
        right: 0;
        left: 0;
    }
    .modal_layout02_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    .modal_layout03_left {
        top: 32vh;
        right: 0;
        left: 0;
    }
    .modal_layout03_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    .modal_layout04_left {
        top: 32%;
        right: 0;
    }

    .modal_layout04_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    .modal_layout05_left {
        top: 32vh;
        right: 0;
    }
    .modal_layout05_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

        /* レイアウト06 文字箱右下 */
    .modal_layout06_left {
        top: calc(160vw / 3.75);
        right: 0;
    }

    .modal_layout06_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    /* レイアウト07 画像やや右、文字箱左（30vw） */
    .modal_layout07_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout07_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    .modal_layout08_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout08_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }
    /* レイアウト09 画像つよく右、文字箱つよく左（30vw） */
    .modal_layout09_left {
        top: calc(160vw / 3.75);
        right: 0;
    }
    .modal_layout09_right {
        right: 0;
        top: unset;
        bottom: 0;
        height: 50vh;
    }

    .modal_text p {
        font-size: 1rem;
        line-height: 1.5;
        padding-bottom: 1rem;
    }

}

/* 横長想定 */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {

    .join_us_main{
        top: 0vw;
        left: 10vw;
    }

    .join_us_main img{
        width: 100%;
    }


    .details[open] .details-summary::before {
        display: none;
    }
    
    .details_33per[open] .details-summary::before {
        display: none;
    }

    .character_role{
        font-size: 3.25rem;
    }
    .character_name{
        font-size: 7rem;
    }

    .line-height-060 {
        line-height: 0.2;
    }

    .font-smallest
    {
        font-size: 0.4em;
    }


    .character_lines {
    position: absolute;
    top: -10vh;
    left: 0vw;
    font-size: 1rem;
    font-family: "Zen Old Mincho", 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: #000;
    padding-bottom: 40px;
    z-index: 1;
    rotate: unset;
    }

    .character_lines p{
    padding: 1rem;
    writing-mode: horizontal-tb; 

    font-feature-settings: initial;
    }
    .character_name_ruby {
        position: absolute;
        z-index: 1;
        color: #ffffff24;
        mix-blend-mode: difference;
        font-size: 5rem;
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 2px;
        bottom: 4rem;
        left: 4rem;
        animation: slide-in 0.8s cubic-bezier(0,.62,.08,.99);
    }
}

/* 小説用 */
.tcy {
  text-combine-upright: all;
}

.keisen{
    letter-spacing: 0rem;
}

/* キャラクター一覧、新レイアウトテスト */

.container_discription_liquid {
    margin: 0 auto;
}


.detalis-wrap-fullscreen {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    overflow-x: auto;
}

.detalis-wrap-fullscreen .details{
    flex: 0 0 auto;
    width: 250px;
    height: 100%;
    transition: width 0.5s;
    overflow: hidden;
}