/* ------------------------------------------------- */
/* --- 全体部分 --- */

html { scroll-behavior: smooth;  }

/* --- 判例・会議録名の表示 --- */
.verify-name {
    position          : fixed ;
    z-index           : +20 ;
    top               : 7vmin ;
    left              : 2vmin ;
    background-color  : rgba(40, 110, 155, 0.7) ;
    color             : rgba(255, 255, 255,1) ;
    font-size         : 2.5vmin ;
    line-height       : normal ;
    font-weight       : 550 ;
    letter-spacing    : 0.1em ;
    padding           : 0.5vmin 2.5vmin 0.4vmin 2.5vmin ;
    border-radius     : 1vmin ;
    filter            : drop-shadow( 1px 1px 2px rgba(0,0,0,0.2)) ;
    animation         : verify-name 2.0s linear;
    animation-fill-mode : both ;
    animation-delay     : 3s;
    
  }
  
/* ゆっくり表示 */
  @keyframes verify-name {
    0%    { opacity: 0 ; }
    100%  { opacity: 1 ; }
  }

/* 印刷時に非表示 */
  @media print {
    .verify-name{display:none;}
  }

/* --- SVGの設定 --- */
#map {
    display: block;
    width: 100% ;
    height: auto;
    background-color:rgb(180, 215, 220);
    svg {
      display: block;
      position: relative ;
      z-index: 0 ;
      width: 100% ;
      height: 100% ;
    }
  }
/* --- SVGのはじめ部分 --- */
.map-top {
    width       :100%;
    height      : 7.5vmin;
    background-color:rgb(180, 215, 220);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5) inset;
}
/* --- SVGのおわり部分 --- */
.map-bottom {
    width       :100%;
    height      : 7.5vmin;
    background-color:rgb(180, 215, 220);
    box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.3) inset;
}
/* --- 台紙の陰影 --- */
.paper-shadow {
    filter    : drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
  }

/* ------------------------------------------------- */
/* --- 小論文・まとめ etc... --- */

/* --- 見出し回り --- */
.notes-taitle-container {
    position                : relative ;
    width                   : calc(66vw - 5vw) ;
    padding                 : 1vw 2.5vw;
    text-align              : center;
    border-top              : 0.25vmin solid rgb(30,30,30);
    border-bottom           : 0.25vmin solid rgb(30,30,30);
    margin                  : 2vmin auto 5vmin auto ;
    font-size               : 2.8vw ;
    color                   : rgb(30,30,30);
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-weight             : 600 ;
}
/* --- 文書名（小論文の記載） --- */
.thesis {
    font-size               : 1vw ;
    color                   : rgb(120,120,120);
    line-height             : nomal ;
    font-family             : "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight             : 600 ;
    letter-spacing          : 0.3rem;
}
/* --- 判例・会議録名 --- */
.notes-sub-taitle {
    font-size               : 2vw ;
    color                   : rgb(30,30,30);
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-weight             : 600 ;
    letter-spacing          : 0.1rem ;
}
/* --- 音声バーの領域 --- */
.audio-space {
    margin: 2vmin 0px 0px 75vw;
}
/* --- 本文 --- */
.notes-container {
    position                : relative ;
    width                   : 66vw ;
    text-align              : justify ;
    margin                  : 0vmin auto 10vmin auto ;
    font-size               : 1.8vw ;
    color                   : rgb(30,30,30);
    line-height             : 3.6vw ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
/* --- ❶～❻の色文字指定 --- */
.pink {color: rgb(255,80,150);}
/* --- 会議録検証のTOP --- */
.verify-start-container {
    position                : relative ;
    width                   : calc(86vw - 8vw) ;
    padding                 : 4vw;
    text-align              : center;
    background-color        : rgb(200, 235, 240);
    box-shadow              : 0px 2px 3px 2px rgba(0,0,0,0.3) inset;
    margin                  : 10vmin auto 5vmin auto ;
    font-size               : 3.8vw ;
    color                   : rgb(30,30,30);
    line-height             : normal ;
    font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-weight             : 600 ;
}

/* ------------------------------------------------- */
/* --- 共通の部品 --- */
/* ------------------------------------------------- */

.yubi  {width:3vw;height:3vw;}
.x-put {width:2vw;height:1.4vw;}


/* ------------------------------------------------- */
/* --- 共通の動き --- */
/* ------------------------------------------------- */


/* ------------------------------------------------- */
/* --- SVGの指 --- */

/* SVGのリンク：右 1 */
.click-R1 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-R1 3.0s linear infinite ;
}
.click-R1:hover { opacity : 0.6 ;}

/* SVGのリンク：右 2 */
.click-R2 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-R2 3.0s linear infinite ;
}
.click-R2:hover { opacity : 0.6 ; }

/* SVGのリンク：右 3 */
.click-R3 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-R3 3.0s linear infinite ;
}
.click-R3:hover { opacity : 0.6 ; }

/* SVGのリンク：右 4 */
.click-R4 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-R4 3.0s linear infinite ;
}
.click-R4:hover { opacity : 0.6 ; }

/* SVGのリンク：右 5 */
.click-R5 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-R5 3.0s linear infinite ;
}
.click-R5:hover { opacity : 0.6 ; }

/*  SVGのリンク：左 1 */
.click-L1 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-L1 3.0s linear infinite ;
}
.click-L1:hover { opacity : 0.6 ;}

/* SVGのリンク：左 2 */
.click-L2 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-L2 3.0s linear infinite ;
}
.click-L2:hover { opacity : 0.6 ; }

/* SVGのリンク：左 3 */
.click-L3 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-L3 3.0s linear infinite ;
}
.click-L3:hover { opacity : 0.6 ; }

/* SVGのリンク：左 4 */
.click-L4 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-L4 3.0s linear infinite ;
}
.click-L4:hover { opacity : 0.6 ; }

/* SVGのリンク：左 5 */
.click-L5 {
  cursor    : pointer ;
  filter    : drop-shadow( 1px 1px 3px rgba(0,0,0,0.3)) ;
  animation : tsun2-L5 3.0s linear infinite ;
}
.click-L5:hover { opacity : 0.6 ; }

/* ------------------------------------------------- */
/* --- 共通のアニメーション --- */
/* ------------------------------------------------- */

/* 右にツンツン 1 */
@keyframes  tsun2-R1 {
  0%    { transform:translate(0px , 0px) ;}
  5%    { transform:translate(0.5vw , 0px) ;}
  10%   { transform:translate(0px , 0px) ;}
  15%   { transform:translate(0.5vw , 0px) ;}
  20%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 右にツンツン 2 */
@keyframes  tsun2-R2 {
  0%    { transform:translate(0px , 0px) ;}
  20%   { transform:translate(0px , 0px) ;}
  25%   { transform:translate(0.5vw , 0px) ;}
  30%   { transform:translate(0px , 0px) ;}
  35%   { transform:translate(0.5vw , 0px) ;}
  40%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 右にツンツン 3 */
@keyframes  tsun2-R3 {
  0%    { transform:translate(0px , 0px) ;}
  40%   { transform:translate(0px , 0px) ;}
  45%   { transform:translate(0.5vw , 0px) ;}
  50%   { transform:translate(0px , 0px) ;}
  55%   { transform:translate(0.5vw , 0px) ;}
  60%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 右にツンツン 4 */
@keyframes  tsun2-R4 {
  0%    { transform:translate(0px , 0px) ;}
  60%   { transform:translate(0px , 0px) ;}
  65%   { transform:translate(0.5vw , 0px) ;}
  70%   { transform:translate(0px , 0px) ;}
  75%   { transform:translate(0.5vw , 0px) ;}
  80%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 右にツンツン 5 */
@keyframes  tsun2-R5 {
  0%    { transform:translate(0px , 0px) ;}
  80%   { transform:translate(0px , 0px) ;}
  85%   { transform:translate(0.5vw , 0px) ;}
  90%   { transform:translate(0px , 0px) ;}
  95%   { transform:translate(0.5vw , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 左にツンツン 1 */
@keyframes  tsun2-L1 {
  0%    { transform:translate(0px , 0px) ;}
  5%    { transform:translate(-0.5vw , 0px) ;}
  10%   { transform:translate(0px , 0px) ;}
  15%   { transform:translate(-0.5vw , 0px) ;}
  20%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 左にツンツン 2 */
@keyframes  tsun2-L2 {
  0%    { transform:translate(0px , 0px) ;}
  20%    { transform:translate(0px , 0px) ;}
  25%   { transform:translate(-0.5vw , 0px) ;}
  30%   { transform:translate(0px , 0px) ;}
  35%   { transform:translate(-0.5vw , 0px) ;}
  40%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 左にツンツン 3 */
@keyframes  tsun2-L3 {
  0%    { transform:translate(0px , 0px) ;}
  40%    { transform:translate(0px , 0px) ;}
  45%   { transform:translate(-0.5vw , 0px) ;}
  50%   { transform:translate(0px , 0px) ;}
  55%   { transform:translate(-0.5vw , 0px) ;}
  60%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 左にツンツン 4 */
@keyframes  tsun2-L4 {
  0%    { transform:translate(0px , 0px) ;}
  60%    { transform:translate(0px , 0px) ;}
  65%   { transform:translate(-0.5vw , 0px) ;}
  70%   { transform:translate(0px , 0px) ;}
  75%   { transform:translate(-0.5vw , 0px) ;}
  80%   { transform:translate(0px , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}
/* 左にツンツン 5 */
@keyframes  tsun2-L5 {
  0%    { transform:translate(0px , 0px) ;}
  80%    { transform:translate(0px , 0px) ;}
  85%   { transform:translate(-0.5vw , 0px) ;}
  90%   { transform:translate(0px , 0px) ;}
  95%   { transform:translate(-0.5vw , 0px) ;}
  100%  { transform:translate(0px , 0px) ;}
}

/* popが上へ拡大 */
@keyframes  pop-up {
	0%   { transform: translate(-50%, 0%) scale(1.0 , 0.1) ; opacity: 0 ;}
	50%  { transform: translate(-50%, 0%) scale(1.0 , 0.1) ; opacity: 0 ;}
  100% { transform: translate(-50%, -50%) scale(1.0 , 1.0) ; opacity: 1 ;}
}

/* popが下へ拡大 */
@keyframes  pop-down {
	0%   { transform: translate(-50%, -100%) scale(1.0 , 0.1) ; opacity: 0 ;}
	50%  { transform: translate(-50%, -100%) scale(1.0 , 0.1) ; opacity: 0 ;}
  100% { transform: translate(-50%, -50%) scale(1.0 , 1.0) ; opacity: 1 ;}
}



/* ズームイン */
@keyframes  zoom-in {
	0%   { transform: translate(-50%, -50%) scale(0.1 , 0.1) ; opacity: 0 ;}
	50%  { transform: translate(-50%, -50%) scale(0.3 , 0.3) ; opacity: 0 ;}
  90% { transform: translate(-50%, -50%) scale(1.05 , 1.05) ; opacity: 1 ;}
  100% { transform: translate(-50%, -50%) scale(1.0 , 1.0) ; opacity: 1 ;}
}

/* ディゾルブ */
@keyframes  delay {
	0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* マーカーを引く */
@keyframes  marker {
	0%   { transform:scaleX(0); }
  100% { transform:scaleX(1); }
}