body{
      color:black;
      font-size:15px;	
      background-color: #000000;            /* 背景色 */
    }

    body::before{
      content:"";
      background-image: url("./img/イラスト33.png"); /* 画像 */
      position:fixed;
      width:100%;
      height:100vh;
      background-size: cover;               /* 全画面 */      
      background-position: center center;   /* 縦横中央 */
      z-index:-1;
    }

    .background_kami::before{
      content:"";
      background-image: url("./data/壁紙20230601.png"); /* 画像 */
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100vh;
      background-size: cover;               /* 全画面 */      
      background-position: center center;   /* 縦横中央 */
      z-index:-1;
    }

    .background_mark::before{
      content:"";
      background-image: url("./img/UNREALマーク.png"); /* 画像 */
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100vh;
      background-size: cover;               /* 全画面 */      
      background-position: center center;   /* 縦横中央 */
      z-index:-1;
    }
    .position{
      position: relative; /* この中の好きな位置にposition:absoluteで配置できる */
    }
 
    .haikei{
    /*background:rgba(225,225,225,0.9);*/
    background:linear-gradient(90deg, #3f3f3fd2 0%, #696969d2 50%, #3f3f3fd2 100%);
    padding:5%;
    margin:3%;
    border-radius: 20px;
		color:#ffffff;
    }

    .haikei2{ /* topページ */
      background:linear-gradient(90deg, #5c5c5c7e 0%, #2222227e 30%,#2222227e 30%, #ffffff7e 30%, #2b2b2bd2 100%);
      padding:5%;
      margin:3%;
      border-radius: 20px;
      }

      .haikei3{ /* 既存の背景1に代わって */
        background:linear-gradient(90deg, #3d3d3d 0%,#222222c0 40%, #222222c0 70%,#181818ce 100%);
        padding:5%;
        margin:3%;
        border-radius: 20px;
        color:#ffffff;
        }

    .haikei_setting{
      background:rgba(20, 20, 20, 0.63);
      padding:5%;
      margin:3%;
      border-radius: 20px;
      color:#ffffff;
    }

    .haikei_setting hr{
      color:rgb(122, 122, 122);
      border: solid 1px;
    }

    .title_back{
      background:linear-gradient(90deg, #16161600 0%, #757575bb 35%,  #757575bb 65%,  #16161600 100%);
      padding:5%;
      margin:3%;
      border-radius: 20px;
      color:#ffffff;
    }

    .title_back2{
      color:black;
      background:linear-gradient(90deg, #00000000 0%, #000000 50%,  #00000000 100%);
      border-radius:0px;
      padding:5%;
      margin:3%;
    }

    .title_back3{
      background:linear-gradient(90deg, #00000000 0%, #000000 50%,  #00000000 100%);
      border-radius:0px;
      padding:0.5%;
      margin-left:20%;
      margin-right:20%;
    }

	    button{
       /*display:inline-block;*/
       justify-content:right;
       background:black;
       padding:10px 30px;
	     border-radius:10px;
       text-align:center;
       color:white;
	     font-size:150%;
	     font-family:Meiryo;
	     font-weight:bold;
       margin:1px;
       margin-bottom:5px;
       border:0px solid;
       cursor:pointer;
       box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);
    }

	button:hover{
	    background-color: red;
      color:white;
    }
		
			 select{  /*プルダウンの設定*/
	     /*ブラウザのスタイルをリセット*/
	     -webkit-appearance: none;
	     appearance: none; 

  	  /* display:inline-block;*/
      justify-content:left;
       background:black;
       padding:10px 10px;
	     border-radius:10px;
       text-align:center;
       color:white;
	     font-size:145%;
	     font-family:Meiryo;
	     font-weight:bold;
       margin:1px;
       border:0px solid;
       cursor:pointer;
      box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);
    }
		
	 select:hover{
	    background-color: red;
      color:white;
   }

/*ブラウザのスタイルをリセット(IE用) */
  select::-ms-expand {
      display: none;
  }
		
      /*プルダウンアイコンの要素を反映する範囲。絶対配置で調整していく*/
   .down_i{
	     position: relative;  /*疑似要素を絶対配置で調整するため、基準の位置を設定*/
			 width: auto;
       height: auto;
			 display:inline-block;
	 }
	 
  .down_i::after {   /*プルダウンアイコンの設定*/
	     content: "";
			 position: absolute;
	     top: -2px;
       right: -5px;
       width:20px;
       height:10px;
	     background-image: url(./プルダウンアイコン.png);
	   	 background-size: 40%;
       background-position: center center;
       background-repeat: no-repeat;  /*背景画像の繰り返し-NO*/
       padding:25px 20px;

	}

    .center{text-align: center}

    .inline p,form,a,img{
      display: inline-block;
    }
		
	   p{
     font-family:Meiryo;
     font-weight:500;
    }
		
		/*100，200，300，400，500，600，700，800，900 の９段階で，数値が大きくなるほど太くなります。 400 が "normal"，700 が "bold" に対応します。*/
		
	object{
  width:70%;
	height:50%;
  }

  .box{  /*並べる用の枠範囲の設定*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

    .right_box{  /*背景付き右ボックス*/
      justify-content:right;
      text-align:center;
      background:rgba(250,250,250,0.5);
      padding:2%;
      border-radius: 20px;
      width:550px;
      box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
    }
  
    .left_box{  /*背景付き左ボックス*/
      justify-content:left;
      text-align:center;
      padding:5%;
      border-radius: 20px;
      flex-grow:1; /*横並びのレイアウトで、「固定値＋可変」にしたいとき付ける*/
      box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	  background:#000000d5;
	  color:white;
    }
  
    .left_nobox{ /*背景なし左ボックス*/
      justify-content:left;
      text-align:center;
      margin: auto;
    }
  
    .right_nobox{ /*背景なし右ボックス*/
      justify-content:right;
      text-align:center;
      margin: auto;
    }

  .center_box{  /*背景付き中央ボックス*/
    justify-content:center;
    text-align:center;
    padding:5%;
    border-radius: 20px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
    width:100%;
		background:#000000d5;
		color:white;
  }
  

  .center_box img{
    box-sizing: border-box; /*サムネの飛び出し対策*/
    max-width: 100%;/*サムネの飛び出し対策*/
    height: auto;/*サムネの飛び出し対策*/
  }

  .center_box P{
    box-sizing: border-box; /*サムネの飛び出し対策*/
    max-width: 100%;/*サムネの飛び出し対策*/
  }

  .textin_box{ /*テキストボックス左よせのために親要素にflex-startが必用*/
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }

  a{
    color:crimson;
  }

  .text_left{
    text-align:left
    }
	
	.url_color a {
		color:#ffffff;
	}

  .text_futi_white{
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
  0px 1px 0 #FFF,  0-1px 0 #FFF,
  -1px 0 0 #FFF, 1px 0 0 #FFF;
  }


  .text_futi_black{
    text-shadow:1px 1px 0 #000000, -1px -1px 0 #000000,
    -1px 1px 0 #000000, 1px -1px 0 rgb(0, 0, 0),
    0px 1px 0 #000000,  0-1px 0 rgb(0, 0, 0),
    -1px 0 0 #000000, 1px 0 0 rgb(0, 0, 0);
    }

    .footer {
      position: fixed; /* ヘッダーを固定する */
      bottom: 0;/* 下部から配置の基準位置を決める */
      left: 5%; /* 左から配置の基準位置を決める */
      width: 90%; /* ヘッダーの横幅を指定する */
      height: 100px; /* ヘッダーの高さを指定する */
      padding: 10px; /* ヘッダーの余白を指定する(上下左右) */
      text-align:right;
      }


      .back_img{
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-size:auto;
        margin-left:-5.5%;
        margin-right:-5.5%;
        /*https://programmercollege.jp/column/4258/*/
      }
		/*──────────────────────────────────────
		hr{
		color:black;
		border:1px solid;
		}
		
└→透明度
100%	99%	98%	97%	96%	95%	94%	93%	92%	91%
FF	FC	FA	F7	F5	F2	F0	ED	EB	E8
90%	89%	88%	87%	86%	85%	84%	83%	82%	81%
E6	E3	E0	DE	DB	D9	D6	D4	D1	CF
80%	79%	78%	77%	76%	75%	74%	73%	72%	71%
CC	C9	C7	C4	C2	BF	BD	BA	B8	B5
70%	69%	68%	67%	66%	65%	64%	63%	62%	61%
B3	B0	AD	AB	A8	A6	A3	A1	9E	9C
60%	59%	58%	57%	56%	55%	54%	53%	52%	51%
99	96	94	91	8F	8C	8A	87	85	82
50%	49%	48%	47%	46%	45%	44%	43%	42%	41%
80	7D	7A	78	75	73	70	6E	6B	69
40%	39%	38%	37%	36%	35%	34%	33%	32%	31%
66	63	61	5E	5C	59	57	54	52	4F
30%	29%	28%	27%	26%	25%	24%	23%	22%	21%
4D	4A	47	45	42	40	3D	3B	38	36
20%	19%	18%	17%	16%	15%	14%	13%	12%	11%
33	30	2E	2B	29	26	24	21	1F	1C
10%	9%	8%	7%	6%	5%	4%	3%	2%	1%
1A	17	14	12	0F	0D	0A	08	05	03
0%									
00					
		──────────────────────────────────────*/