@charset "utf-8";

/*========================================               TOP  ================*/
.top{display: flex;width:100%;text-align: center;}

/*=============================================================================
　 .top_left,.top_right　
==============================================================================*/
.top_left,.top_right{margin-top: 60px;width:25%;height:100vh;}
    .top_1,.top_3{height: 48%;} /* 画像の高さ */
    .top_2,.top_4{height: 52%;} /* 画像の高さ */

/*=============================================================================
　  .top_center　
==============================================================================*/
.top_center{position: relative;top: 60px;width:50%;height:100vh;z-index:-1;}

/*========= タイピングのためのCSS ===============*/
p{text-align: center;
	margin: 20px 0;font-size: 1.5rem;
	letter-spacing: .5em;word-break : break-all;}

.TextTyping {text-align: center;}
.TextTyping span {display: none;}

/*文字列後ろの線の設定*/
.TextTyping::after {content: "|";animation: typinganime .8s ease infinite;}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}
/*======  雪ふらし ※雪の画像は index_yuki.js で指定===========*/
#yuki-js{position:fixed;/*描画固定*/width: 100%;height: 100%;}

/*=============================================================================
　  .top_center_group
==============================================================================*/
    .top_center_group{/*配置は毎月変わるので htmlの中で上書き指定 */
            position: absolute;transform: translate(-50%,-50%);
            width: 350px;top:45%;left:50%;}
    /*========= タイピング  B ===============*/
    .top_center_group  h2{/*文字「2025JYULIYAN.com～」 */
            font-family: 'Oswald', sans-serif;color:tan;/*色は htmlで上書き */
            font-size: 40px;position: absolute;padding:20px;
            top:0px;left:50%;margin-left:10px;/*タイプ文字の配置*/
            transform: translate(-50%,-50%);
            letter-spacing: 0.1em;line-height: 1.2;text-align: left;
            width:310px;opacity: 90%;}
    .TextTyping span{display: none;}
    .TextTyping::after {
            content: "|";
            animation: typinganime .8s ease infinite;
            font-weight: normal;
            padding: 0 0 0 0px;}
            @keyframes typinganime{
              	from{opacity:0}
                to{opacity:1}
              }
    /*========= タイピング  下のアイコン　===============*/
    .hamon img{border-radius: 50%;width:70px;height: 70px;margin-top: 20px;}/*.hamonと同じ大きさにする*/
    /*.imgにぼかし影を付ける　左位置/上位置/左右の大きさ/上下の大きさ/ rgba(色/色/色/透過)*/
    .hamon img{box-shadow:0px 0px 30px 30px rgba(256,256,256,0%);}/*色と透過は はhtml内で上書き*/

    /*========= 波紋を付ける　===============*/
    .hamon{top:100px;/*配置する位置　htmlの中で上書き指定*/
           position: relative;/*波紋の基点とするためrelativeを指定*/
           display:inline-block;
           /*background:#333;*//*地色入れる場合*/
           width:70px;height:70px;/*画像と同じ大きさにする*/
           border-radius: 50%;
           outline: none;transition: all .3s;}
    /*波形を2つ設定*/
    .hamon::after,.hamon::before {
           content: '';
           position: absolute;left: -24%;top: 4%;
           /*波形の形状*/
           border: 1px solid tan;/*線の色*/
           width: 150%;height: 150%;border-radius: 50%;
           opacity: 1;/*はじめは不透明*/
           animation:1s circleanime linear infinite;}

    /*波形の2つ目は0.5秒遅らせてアニメーション*/
    .hamon::before {animation-delay:.5s;}
    /*波形のアニメーション*/
    @keyframes circleanime{
    	0%{
    	  transform: scale(0.68);
    	}
    	100%{
    		transform: scale(1.2);
    		opacity: 0;
    	}
    }

/*=============================================================================
    　  レスポンシブ
==============================================================================*/

@media screen and (max-width:700px)/* _______________________ max-width:700px*/
{
.top_left,.top_right{display: none;}
.top_center{top: 60px;width:100%;height:100vh;}
    .top_center_group{top:40%;left:50%;width: 300px;}/*配置はhtmlで上書き */
    .top_center_group  h2{font-size: 30px;width:250px;
                          margin-top: 0px;margin-left:15px;}
    .top_center_group img{width: 70px;margin-top: 20px;}
}

@media screen and (max-width:450px)/* _______________________ max-width:450px*/
{
.top_center{top: 60px;width:100%;height:100vh;}
      .top_center_group{top:40%;left:50%;width: 300px;}/*配置はhtmlで上書き */
      .top_center_group img{width: 70px;margin-top: 20px;}
      .top_center_group  h2{/*文字「2025JYULIYAN.com～」 */
          font-size: 30px;padding:20px;
          letter-spacing: 0.1em;line-height: 1.2;text-align: left;
          width:250px;}
      /*========= タイピング  下のアイコン　===============*/
      .hamon img{width:50px;height: 50px;margin-top: 15px;}/*.hamonと同じ大きさにする*/
      /*========= 波紋を付ける　===============*/
      .hamon{top:80px;width:50px;height:50px;}/*配置する位置 はhtml内で上書き*/
      .hamon::after,.hamon::before {width: 150%;height: 150%;}
}

@media screen and (max-width:321px)/* _______________________ max-width:321px*/
{
.top_center_group  h2{font-size: 25px;width:210px;
  　　　　　　　　　　　margin-left: -10px;padding:20px;}
}