@charset "utf-8";/* ←これは文字コード */


/*基本設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 画面に隙間ができないようにするおまじない----------------- */
html, body { 
  margin: 0px;
  padding: 0px;
 }

/* サイト全体に係わる設定----------------- */
body {
    font-family: "yosugara ver12", serif; /* フォントの指定 */
    font-size: 1em; /* フォントサイズの指定 */
    line-height:1.8em; /* 行間の指定 */
    background-color: #e3e3e3; /* 背景色の指定 */
    background-image: url(../back.png); /* 外側背景に表示させている画像 */
}

a{
    text-decoration: none; /* リンクの文字に下線を表示させない */
    color: #ffffff; /* リンクの文字には白色 */
}



/*コンテンツ内の細々した設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 中央のコンテンツ表示部分の設定 ----------------------------*/
#container{ 
    background-color: #EDE9E5; /* 背景色 */
    margin: 0 auto; /* 上下の空きなし、左右中央に表示せよ */
    
    width: 100%; /* 横幅は画面いっぱいまで広げてくれ */
    max-width :430px; /* ただし、横幅の最大は430ピクセルな */
    text-align: center; /* この中にあるものは中央揃えで配置してくれ */
    background-image: url(../back2.png); /* 背景に表示させている画像 */
}
/* 画面上部のキービジュアル部分------------------------- */
#keyvisual{ 
    width: 100%; /* 横幅は左右いっぱい */
    height: 100vh; /* 縦幅はデバイスにあわせて縦いっぱい */
    background-image: url(images/shitazi3.jpg); /* 画面上部に表示させている画像 */
    background-repeat: no-repeat; /* 背景画像は1回だけ表示 */
    background-size:cover; /* 縦横比キープしていっぱいに表示ね */
    background-position: center; /* 画像は中心から表示してね */
}

/* 画面上部のキービジュアル内に表示されてるテキスト------------------------- */
#top_txtarea{
    position: absolute; /* この要素は絶対位置で配置 */
    top: 70%; /* このエリアの上から70％の位置に配置な！ */
    text-align: left;
}

.top_txt{
    padding: 3px 10px 5px 10px; /* このエリア内に上3px、右10px、下5px、左10pxの隙間もたせて */
    font-weight: lighter; /* フォントは細くしてね */
    letter-spacing: 0.1em; /* 字間をすこーし空けてください */
    background-color: #000000; /* paddingで空けた部分も含めた背景色は黒ね */
    color: #ffffff; /* 文字は白でよろしく */
}

.top_title{
     font-size: 1.1em; /* フォントサイズ指定 */
}
.top_name{
    font-size: 0.8em;
}


/* 名前表記のテキスト------------------------- */
#profile_name{
    margin: 0 auto; /* 上限は隙間なく、左右は中央に配置 */
    margin-bottom: 5px; /* このブロックは下に5ピクセル空ける */
    font-size: 1.5em; /* 文字サイズ */
    font-weight: normal; /* 文字の太さ */
    letter-spacing: 0.2em; /* 字間すこーし空ける */
}

/* 名前英語表記のテキスト------------------------- */
#profile_name_en{
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 0.7em;
    font-weight: normal;
    font-family: "Cinzel", serif;
}

/* 本文テキスト------------------------- */
#maintxt{
    width: 80%;
    margin: 0 auto;
    text-align:left;
    margin-bottom: 60px;
}

/* Backボタン------------------------- */
.button {
    background: #1d1e2e;
    border-radius: 9999px; /* 長円形にするおまじない */
    margin: 0 auto;
    width: 150px;
    padding: 3px 10px; /* このエリア内に上下3px、左右10pxの隙間もたせて */
    margin-bottom: 60px;
    border: solid 3px #676a8a; /* まわりにうっすら縁をつけよう */
}








/* class1 の画像をキービジュアルの上に重ねる */
#keyvisual {
    position: relative; /* この中に重ねる要素を配置できるようにする */
    width: 100%;
    height: 100vh;
    background-image: url(images/shitazi3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }


  
  /* class1 の配置 */
  .class1 {
    position: absolute; /* 背景の上に重ねるために絶対配置 */
    top: 30%;           /* 上からの位置を調整（中央付近） */
    left: 50%;          /* 左右中央 */
    transform: translate(-50%, -50%); /* 中央に正確に配置 */
    z-index: 10;        /* 背景より前面に */
  }


  #keyvisual {
    position: relative; /* 重ね合わせの基準になる */
    width: 100%;
    height: 100vh;
    background-image: url(images/shitazi3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  /* class1: 猿の画像 */
  .class1 {
    position: absolute;
    top: 25.9%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* 背景より前、テキストより下 */
    width: 70%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }
  
  /* class2〜8: テキストをさらに上に重ねる */
  .class2, .class3, .class4, .class5, .class6, .class7, .class8, .class9, .class10, .class11 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    z-index: 20; /* 猿画像より上 */
    font-family: "HanziPen SC", serif;
  }

   /* class12: memoの上に重ねる */
   .class12{
    position:absolute;
    transform: translateX(-50%);
    color: black;
    z-index: 100;/* memoより上 */
       }


     /* class13: memoの上に重ねる */
   .class13{
    position:absolute;
    transform: translateX(-50%);
    color: black;
    z-index: 100;/* memoより上 */
       }


        /* class14: memoの上に重ねる */
   .class14{
    position:absolute;
    transform: translateX(-50%);
    color: black;
    text-align: left;
    z-index: 100;/* memoより上 */
       }


         /* class15: memoの上に重ねる */
   .class15{
    position:absolute;
    transform: translateX(-50%);
    color: black;
    text-align: left;
    z-index: 100;/* memoより上 */
       }

            /* class16: memoの上に重ねる */
   .class16{
    position:absolute;
    transform: translateX(-50%);
    color: black;
    text-align: left;
    z-index: 100;/* memoより上 */
       }

       .class17{
        position:absolute;
        transform: translateX(-50%);
        color: black;
        text-align: left;
        z-index: 100;/* memoより上 */
           }

           .class18{
            position:absolute;
            transform: translateX(-50%);
            color: black;
            text-align: left;
            z-index: 150;/* memoより上 */
               }

               .class19{
                position:absolute;
                transform: translateX(-50%);
                color: black;
                text-align: left;
                z-index: 150;/* memoより上 */
                   }

                   .class20{
                    position:absolute;
                    transform: translateX(-50%);
                    color: black;
                    text-align: left;
                    z-index: 100;/* memoより上 */
                       }

                       .class21{
                        position:absolute;
                        transform: translateX(-50%);
                        color: black;
                        text-align: left;
                        z-index: 100;/* memoより上 */
                           }

                           .class22{
                            position:absolute;
                            transform: translateX(-50%);
                            color: black;
                            text-align: left;
                            z-index: 100;/* memoより上 */
                               }

                   .user1{
                    position:absolute;
                    transform: translateX(-50%);
                    color: rgb(61, 91, 91);
                    text-align: left;
                    z-index: 100;/* memoより上 */
                       }

                       .user2{
                        position:absolute;
                        transform: translateX(-50%);
                        color: rgb(61, 91, 91);
                        text-align: left;
                        z-index: 100;/* memoより上 */
                           }

                           .user3{
                            position:absolute;
                            transform: translateX(-50%);
                            color: rgb(61, 91, 91);
                            text-align: left;
                            z-index: 100;/* memoより上 */
                               }

  
  /* それぞれ縦位置を調整 */
  .class2 { top: 13%; font-size: 1.0em; font-weight: bold; }
  .class3 { top: 50%; left: 40%; font-size: 1.0em; font-weight: bold; }
  .class4 { top: 52.5%; left: 35.7%; font-size: 1em; opacity: 0.9; }
  .class5 { top: 52.7%; left: 77%; font-size: 1em;  font-weight: bold; width: 33%;}
  .class5 p{margin: 0;}
  .class6 { top: 58.5%; left: 24.8%; font-size: 12.8px;  font-weight: bold; width: 100%;}
  .class7 { top: 60.5%; left: 45.8%; font-size: 12.8px;  font-weight: bold; width: 100%;}
  .class9 { top: 64.2%; left: 31%; font-size: 12.8px;  font-weight: bold; width: 100%;}
  .class10 { top: 64.2%; left: 25%; font-size: 12.8px;  font-weight: bold; width: 100%;}
  .class11 { top: 64.2%; left: 60.5%; font-size: 12.8px;  font-weight: bold; width: 20%;}
  .class12 { top: 73.5%; left: 29%; font-size: 13px;  font-weight: bold; }
  .class13 { top: 97%; left: 30%; font-size: 13px;  font-weight: bold; }
  .class14 { top: 120.5%; left: 30%; font-size: 13px;  font-weight: bold; }
  .class15 { top: 78%; left: 38.5%; font-size: 18px;  font-weight: bold; width:30%}
  .class16 { top: 101.8%; left: 38.5%; font-size: 18px;  font-weight: bold; width:30%}
  .class17 { top: 124.8%; left: 38.5%; font-size: 18px;  font-weight: bold; width:30%}
  .class18 { top: 78%; left: 77%; font-size: 15px;  font-weight: bold; }
  .class19 { top: 80%; left: 74.5%; font-size: 15px;  font-weight: bold; }
  .class20 { top: 126%; left: 77%; font-size: 14px;  font-weight: bold; }
  .class21 { top: 128%; left: 72%; font-size: 14px;  font-weight: bold; }
  .class22 { top: 102%; left: 73.4%; font-size: 14px;  font-weight: bold; }
  .user1 { top: 75%; left: 73%; font-size: 14px;  font-weight: bold; }
  .user2 { top: 99%; left: 73%; font-size: 14px;  font-weight: bold; }
  .user3 { top: 122.3%; left: 73%; font-size: 14px;  font-weight: bold; }
  
  

 /* yazi: 矢印の画像 */
 .yazi {

    position: absolute;
    top: 6.9%;
    left: 11.5%;
    transform: translate(-50%, -50%);
    z-index: 10; /* 背景より前、テキストより下 */
    width: 8%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }


  /* yazi: 点の画像 */
 .ten {
    position: absolute;
    top: 6.9%;
    right: 5%;
    transform: translate(-50%, -50%);
    z-index: 10; /* 背景より前、テキストより下 */
    width: 8%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }

    /* icon: アイコンの画像 */
 .icon {
    position: absolute;
    top: 55%;
    right: 72%;
    transform: translate(-50%, -50%);
    z-index: 10; /* 背景より前、テキストより下 */
    width: 15%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }

     /* memo: メモの画像 */
 .memo {
    position: absolute;
    top: 84.5%;
    right: -40%;
    transform: translate(-50%, -50%);
    z-index: 20; /* 背景より前、テキストより下 */
    width: 90%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }

  .memo2 {
    position: absolute;
    top: 108%;
    right: -40%;
    transform: translate(-50%, -50%);
    z-index: 20; /* 背景より前、テキストより下 */
    width: 90%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }

  .memo3 {
    position: absolute;
    top: 131.5%;
    right: -40%;
    transform: translate(-50%, -50%);
    z-index: 20; /* 背景より前、テキストより下 */
    width: 90%; /* ←★ここでスケール調整！小さくしたいなら数値を下げる */
    height: auto;
  }

  .postit {
    position: absolute;
    right: 60%;
    z-index: 60; /* 背景より前、テキストより下 */
  }

  .postit2 {
    position: absolute;
    right: 60%;
    z-index: 60; /* 背景より前、テキストより下 */
  }

  .postit3 {
    position: absolute;
    right: 60%;
    z-index: 60; /* 背景より前、テキストより下 */
  }

  .kao1 {
    position: absolute;
    right: 53%;
    z-index: 60; /* 背景より前、テキストより下 */
    width: 25%;
    top: 89%;
  }


  .footer {
    position: fixed;         /* 画面下に固定 */
    bottom: 0;               /* 下端ぴったりに配置 */
    left: 0;                 
    width: 100%;             /* 横幅いっぱい */
    height: 65px;            /* 高さ（自由に変更OK） */
    background-color: #ffffff; /* 背景色（白） */
    border-top: 1px solid #ccc; /* 上の線 */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 少し浮いた感じの影 */
    z-index: 120;            /* 他より前に出す */
  }
  
/* ツイートボタン（右下に浮かせる） */
.pen {
    position: fixed;
    bottom: 80px; /* フッターより少し上に浮かせる */
    right: 15px;  /* 右端からの距離 */
    width: 56px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
    cursor: pointer; /* ホバーでクリック感 */
  }

  .kensaku {
    position: fixed;
    bottom: 16px; /* フッターより少し上に浮かせる */
    left: 107px;  /* 右端からの距離 */
    width: 27px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
  }

  .kaku {
    position: fixed;
    bottom: 18px; /* フッターより少し上に浮かせる */
    left: 177px;  /* 右端からの距離 */
    width: 32px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
  }

  .home {
    position: fixed;
    bottom: -4px; /* フッターより少し上に浮かせる */
    left: 12px;  /* 右端からの距離 */
    width: 75px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
  }

  .mail {
    position: fixed;
    bottom: -6.8px; /* フッターより少し上に浮かせる */
    right: 85px;  /* 右端からの距離 */
    width: 82px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
  }

  .setting {
    position: fixed;
    bottom: 10px; /* フッターより少し上に浮かせる */
    right: 30px;  /* 右端からの距離 */
    width: 48px;  /* サイズ調整OK */
    z-index: 130; /* フッターより前に表示 */
  }