@charset "utf-8";


/* =================================================

値を1つ指定した場合：	指定した値が[上下左右]のマージンになります。
値を2つ指定した場合：	記述した順に[上下][左右]のマージンになります。
値を3つ指定した場合：	記述した順に[上][左右][下]のマージンになります。
値を4つ指定した場合：	記述した順に[上][右][下][左]のマージンになります。


Dream2=Dグレ
Dream3=十二国記
Dream4=戦国無双
Dream5=マクロスF
Dream6=鋼
Dream7=サイバー
Dream8=マクロス7
Dream9=薄桜鬼
================================================= */


/* =================================================
共通指定
================================================= */

/*全要素指定*/

/*明朝体フォント(Noto Serif JP)*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/*数字フォント(Oswald)*/
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

* {
	margin:0;
	padding:0;
}




html{height:100%;

     /*スクロールバー指定*/
     scrollbar-base-color:#ffffff; 
     scrollbar-highlight-color:#ffffff; 
     scrollbar-arrow-color:#c0c0c0;   
     scrollbar-shadow-color:#c0c0c0;
     scrollbar-darkshadow-color:#c0c0c0;
     overflow-y: scroll;/*縦方向はスクロール可*/
     overflow-x: hidden;/*横方向はスクロール不可*/
}



/*body{line-height:1.5;}*/

body{
     background:#ffffff;
     color:#000000;
     line-height: 1.5;
     }


a:link{color:#808080; text-decoration:none;}/*訪問前の文字色*/
a:visited{color:#808080; text-decoration:none;}/*訪問済みの文字色*/
a:active{color:#808080; text-decoration:none;}/*アクティブ中の文字色*/
a:hover{position:relative; left:2px; top:2px;}/*マウスが触れた時の文字色*/




/*bodyの背景画像スタイル（ボツ案）*/

.bg_img{
background-image:url(image/flower17.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
margin-left:3em;margin-right:3em;
}



/*トップページ用テーブル*/

.toppage {
    text-align: center;                    /*ブロック内テキストの中央寄せ（全体）*/
    margin:0px auto;                       /*ブロック外側の空白。中央配置の呪文(上下は0pxに)*/
	box-sizing:border-box;                 /*paddingとborderを幅と高さに含める*/
	background-image:url(image/flower17.jpg);
    background-repeat:no-repeat;
    background-position:left top;
}

/*center内の子要素p（txt）の指定（説明文のみ左寄せ）*/

.toppage .txt {
	text-align:left;
	font-size:1em;
	display: inline-block;                  /*改行なしに横に並べる（text-align左寄せの為）*/
	
	
}

.toppage .sub {
	text-align:center;
	font-size:0.9em;
	display: inline-block;                  /*改行なしに横に並べる（text-align左寄せの為）*/
	
	
}





/*基本ブロック*/

#basebox{
	margin:0px auto;                        /*ブロック外側の空白。中央配置(上下は0pxに)*/
	box-sizing:border-box;                  /*paddingとborderを幅と高さに含める*/
	/*background:rgba(255,255,255,0.7);     透過処理*/

}



main{
	display:block;                          /*ブロックごと改行（IE対策）*/
	width:90%;
	margin:auto;
}


/* =================================================
ヘッダー
================================================= */


header{
    width: 100%;
    margin-left:0;
    margin-right:5px;
   
    /*background-color: #c0c0c0;*/
    background-image:url(image/flower17.jpg);
    background-repeat:no-repeat;
    background-position:left top;
    border: 1px solid;/*ヘッダー囲み線*/
    }




/* =================================================
メニューバー
================================================= */



nav.menu ul li a{
     font-family: 'Times New Roman'; /*フォントをいい感じに*/
}



nav.menu ul li a:link{
	color:#808080; /*訪問前の文字色*/
}

nav.menu ul li a:visited{
	color:#808080; /*訪問済みの文字色*/
}

nav.menu ul li a:hover {
	color:#808080; /*マウスが触れた時の文字色*/
	/*border-bottom:2px solid #6666cc;下線がつきます*/
}

nav.menu ul li a:active {
	color:#808080; /*アクティブ中の文字色*/
}





/*dreamページでのメニューバー(ul要素のスタイル)ボツ*/    
    
#dreampage{
    list-style: none;/*リストマークを表示しない*/
    margin: 0;
    padding: 0 ;
    /*background-color: #fffacd;*/
}





/* =================================================
日記用アコーディオン
================================================= */






.ac-menu:last-child {
  margin-bottom: 60px; /* 最後の要素の下にだけ余白 */
}


/* チェックボックスを非表示にする */
.ac-menu input {
  display: none;
}


/*タイトル*/
.ac-menu label {
  width: 600px;
  max-width: 100%;
  
  color:#000000;
  font-size: 110%;                        /* 文字サイズ */
  line-height: 2;                         /* 行間 */
  font-weight: 700;                       /* 文字を太く */
  background: #99ccff;
  padding: 5px;                           /* 内側の余白（全方位）*/
  margin: 10px 0;                         /*外側の余白（上下が10px、左右が0指定）*/
  cursor: pointer;                        /*カーソルが指になる*/
  position: relative;                     /*ボタンの為に必要*/
  display: block;                         /*要素を改行して縦に*/
  border-radius: 4px;                     /* 角を丸く */
  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 4px;	    /* Firefox用 */
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
  border: 1px solid #ccccff;                     /*囲み線*/
}

/*▼アイコンの場所設定*/
/*label内の要素の最後に入れる*/
.ac-menu label:after {
  position: absolute;                      /*親要素を起点とする*/
  right: 15px;                             /* 右からの距離 */
  top: 50%;                                /* 上下中央配置 */
  -webkit-transform : translateY(-50%);    /*googleブラウザ用の指定*/
  transform : translateY(-50%);            /*Y軸(縦方向)に配置設定*/
  content: "\25BC";                        /* アイコン */
}

/*チェックになった時のlabel内の要素の最後*/
/*~は間接セレクタ。チェックになったinputの次にあるlabelの要素の最後*/
.ac-menu input:checked ~ label::after {
  content: "\25B2";                        /* クリック後のアイコン */
}


/*ac-menu内のdiv*/
.ac-menu div {
  height: 0;
  overflow: hidden;                        /*はみ出たら表示しない*/
  opacity: 0;                              /*不可視*/
  transition: 0.3s;                        /* 開閉スピード */
}

/*チェックになったinputの次にあるdiv*/
.ac-menu input:checked ~ div {
  height: auto;
  opacity: 1;                              /* 可視化 */
  padding: 5px;                           /* 中身の枠内の余白（全方位） */
  background: #ccffff;                     /* 中身の背景色 */
}


/*本文*/
.ac-menu-inside {
  width: 600px;
  max-width: 100%;
  color: #333;                             /* 中身の文字色 */
  font-size: 100%;                         /* 中身の文字サイズ */
  line-height: 2;                          /* 行間 */
  border-radius: 4px;                      /* 角を丸く */

  
}



/* =================================================
名前変換のアコーディオン
================================================= */


/* チェックボックスを非表示にする */
.namechange input.menu1 {
  display: none;
}


/*タイトル*/
.namechange label.menu2 {
  width: 430px;
  
  color:#000000;
  font-size: 110%;                        /* 文字サイズ */
  line-height: 2;                         /* 行間 */
  font-weight: 600;                       /* 文字を太く */
  background: #cccccc;
  padding: 5px;                           /* 内側の余白（全方位）*/
  margin: 5px 0;                         /*外側の余白（上下が5px、左右が0指定）*/
  cursor: pointer;                        /*カーソルが指になる*/
  position: relative;                     /*ボタンの為に必要*/
  display: block;                         /*要素を改行して縦に*/
  border-radius: 4px;                     /* 角を丸く */
  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 4px;	    /* Firefox用 */
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
  border: 1px solid #666666;                     /*囲み線*/
}

/*▼アイコンの場所設定*/
/*label内の要素の最後に入れる*/
.namechange label.menu2:after {
  position: absolute;                      /*親要素を起点とする*/
  right: 20px;                             /* 左からの距離 */
  top: 50%;                                /* 上下中央配置 */
  -webkit-transform : translateY(-50%);    /*googleブラウザ用の指定*/
  transform : translateY(-50%);            /*Y軸(縦方向)に配置設定*/
  content: "\25BC";                        /* アイコン */
}

/*チェックになった時のlabel内の要素の最後*/
/*~は間接セレクタ。チェックになったinputの次にあるlabelの要素の最後*/
.namechange input.menu1:checked ~ label.menu2::after {
  content: "\25B2";                        /* クリック後のアイコン */
}


/*namechange内のdiv*/
.namechange div.namechange-body {
  height: 0;
  overflow: hidden;                        /*はみ出たら表示しない*/
  opacity: 0;                              /*不可視*/
  transition: 0.3s;                        /* 開閉スピード */
}

/*チェックになったinputの次にあるdiv*/
.namechange input:checked ~ div {
          height: auto;
          opacity: 1;                              /* 可視化 */
          padding: 5px;                           /* 中身の枠内の余白（全方位） */
          /*background: #cccccc;*/                     /* 中身の背景色 */
          /*border: 1px solid #0066cc;*/                     /*囲み線*/
          }


/*名前変換の本文*/
.namechange-body {
           width: 430px;
           color: #333;                             /* 中身の文字色 */
           line-height: 2;                          /* 行間 */
           border-radius: 4px;                      /* 角を丸く */

  
           }


/* =================================================
名前変換フォーム（未使用）
================================================= */


form.changeform{
           width:400px;
           background: #eeeeee;
           text-align:center;
           box-shadow: 2px 2px 4px gray;
           border-radius: 10px;         	/* 角を丸くする */
           -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	       -moz-border-radius: 10px;	    /* Firefox用 */
           font-size:15px;/*15px以下はスマホなどでズームしてしまいます*/
           }
                
                
form.changeform input{
           width:150px;  
           margin:10px 0px;                /*外側の余白（上下が10px、左右が0px）*/
	       padding:7px;                    /*内側の余白（全方位）*/
	       border-radius: 10px;         	/* 角を丸くする */	
	       -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	       -moz-border-radius: 10px;	    /* Firefox用 */ 
	       box-sizing: border-box;         /*paddingとborderを幅と高さに含める*/
	       }

form.changeform input[type="button"]{
           width:80px;
           background-color:#bbbbbb;
           color: #ffffff;
           margin:10px 0px;                /*外側の余白（上下が10px、左右が0px）*/
	       padding:5px;
	       text-align: center;
           }

form.changeform input[type="button"]:hover{
           background-color:#bbbbbb;
	       cursor: pointer;
           }

#submitbutton{
           text-align: center;
           }






/* =================================================
Pと見出し
================================================= */


p {
    font-size: 1.1em;
    line-height: 1.5em;
  }

p.normal{
    font-size: 1em;
    line-height: 1.5em;
  }


/*メニューバー用サイト名デザイン（ヘッダー内）*/

h1{
	text-align:right;
	color:#c0c0c0;
	font-family:"Noto Serif JP","游明朝","ＭＳ Ｐ明朝","細明朝体","Hiragino Mincho ProN",serif;
    text-shadow: 1px 1px 2px black;                   /*影*/
    font-weight: bold;                                /*太さ*/
    font-size: 4em;
    padding: 30px 10px;                               /*上方向の空白、右方向の空白*/
}



/*メインページの見出し*/

h2{
	padding: 1px 0px;                                 /*上下、左右*/
	margin-bottom:20px;                               /*下側の余白*/
	font-size: 140%;
	letter-spacing: 0.2em;/*字間*/
	border-bottom:2px solid #262626;                  /*下線*/
	font-family: 'Times New Roman';
}

/*見出しのアイコン*/

img.headicon{  
    width: 35px;    /* 横幅 */
    height: 35px;  /* 高さ*/
    }


/*夢の設定ページ（蛍光ライン）*/

h3{
	padding: 2px 0px;
	font-size: 120%;
	letter-spacing: 0.3em;
	background: linear-gradient(transparent 70%, #ffccff 70%);
	width:80%;
    max-width:300px;
}

/*dreamページの見出し（連載、完結済み分類バー）*/

h4{
width:80%;
    padding: 4px 10px;        /*上・下のpadding:4px、左・右のpadding:10px*/
    background-color: #cccccc;
    font-size:1.3em;
}


h5.cyber{font-size: 1.1em;color: #006600;
         border-bottom: 2px solid #006600;  /*線*/
	      width: 90%;
	      max-width: 450px;
	      margin-left:0px;
	      margin-bottom: 5px;}



h6.conan{font-size: 1.1em;
         font-family: 'Century',serif; 
         color: #cc9900;
         padding-left: 0;
         padding-right:0;
         
         border-bottom: 2px solid;  /*線*/
         display: inline-block;/*文字数に合わせた長さにする*/
         
         border-image: linear-gradient(to right, #cc0033 0%,#990033 50%, #000000 100%);/*下線にグラデーション*/
         border-image-slice: 1;/*グラデに必要な数値*/
    
	      /*width: 95%;*/
	      /*max-width: 600px;*/
	      margin-left:0px;
	      margin-bottom: 5px;}
 



/* =================================================
いろいろ
================================================= */




/*右側にスペース（レイアウト用）*/

.rightspace{
    margin-right : 10px;
}




/*改行されて文字が途切れないように要素の指定*/
span.katamari {
   display: inline-block;
}








/* =================================================
スマホ
================================================= */


@media screen and (min-width:0px) and (max-width:559px){


     body{
         -webkit-text-size-adjust: 100%;
	  	 font-size: 13px;
         height: 100%;
         width:100%;
	}




	img {
		height: auto;
		width: auto;
		max-width:100%;
	}



     /*トップページ用テーブル*/

     .toppage {

	     width:98%;
	     padding:5px;                           /*ブロック内の空白*/
         background-size: auto 250px;           /*背景画像の大きさ（横自動、縦指定）*/     
     }

     /*基本ブロック*/
      #basebox{
         width:98%;
	     padding:5px;                            /*ブロック内の空白*/
      }



      header{
         width:98%;
         padding: 5px 5px 5px;
         background-size: auto 400px;           /*背景画像の大きさ（横自動、縦指定）*/

      }
      
p {
    font-size: 1em;
    line-height: 1.5em;
  }

p.normal{
    font-size: 0.9em;
    line-height: 1.5em;
  }


    
    
/* =================================================
メニューバー（スマホ版）
================================================= */



      nav.menu{
          padding:2px 2px;                    /*上下、左右*/
	      box-sizing:border-box;             /*paddingとborderを幅と高さに含める*/
	      margin-bottom:10px;                 /*メニューバー下の余白*/
	      /*background-color: #c0c0c0;実験用*/
	      border-bottom:2px dashed #6666cc;/*下線がつきます*/
          }

      nav.menu ul{ 
          list-style: none;                  /*リストマークを表示しない*/
          /*padding: 0;*/
          /*background-color: #fffacd;実験用*/
   
      
	      display: table;/*table要素とする指定（親）*/
	      table-layout:fixed; /* ←等幅ボタン */
	      margin: 0 auto;
	      width: 90%; /* ←%で指定 両サイドに5%ずつの余白 */
	      text-align: center; 
          }
    
    

      nav.menu ul li{
      
          /*background-color: #ffc0cb;実験用*/
          /*font-size: 1.6em;*/
          font-weight: bold;
      
          /* margin: 0 5% 0 0;*/                    /*上、右、下、左（右からの距離）*/
          /* padding:5px 2px 2px 2px;*/            /*上、右、下、左*/
     
     
     	  display: table-cell;/*tableのtdと同じ要素*/
	      vertical-align: middle;/*縦方向の配置*/
	      font-size: 16px;
          }







      /*メニューバー用サイト名デザイン*/

      h1{
         font-size: 3em;
      }



      /*見出しのアイコン*/


      img.headicon{  
          width: 25px;                   /* 横幅 */
          height: 25px;                  /* 高さ*/
      }


      /*dreamページの見出し*/

      h4{
          width:95%;
          padding: 3px 10px;        /*上・下のpadding:3px、左・右のpadding:10px*/
          font-size:1.1em;
      }



/* =================================================
名前変換フォーム（スマホ版）（未使用）
================================================= */


      /*名前変換アコーディオン（タイトル）*/
      .namechange label.menu2 {
           width: 90%;
           max-width: 370px;
           }
             
      /*名前変換アコーディオン（本体）*/
      .namechange-body {
           width: 90%;
           max-width: 370px;
           }  
  

      form.changeform{
           width:95%;
           max-width:350px;
           font-size:1em;
           }
                
                
      form.changeform input{
           width:45%;  
           max-width:120px;
           margin:5px 0px;                /*外側の余白（上下が8px、左右が0px）*/
	       padding:7px;                    /*内側の余白（全方位）*/
	       }

      form.changeform input[type="button"]{
           width:20%;
           max-width:60px;
           margin:8px 0px;                /*外側の余白（上下が8px、左右が0px）*/
	       padding:5px;
	       text-align: center;
           }




}/*←スマホ指定ここまで*/





/* =================================================
タブレット端末
================================================= */

@media screen and (min-width:560px) and (max-width:1024px){
 
      body{
           font-size: 12px;
           height: 100%;
     }
     
     /*トップページ用テーブル*/

     .toppage {

	     width:90%;
	     padding:15px;                           /*ブロック内の空白*/
         background-size: auto 300px;           /*背景画像の大きさ（横自動、縦指定）*/     
     }
     

     /*基本ブロック*/
       #basebox{
            	width:90%;
	            padding:15px;                            /*ブロック内の空白*/
     }


       header{
               padding: 15px 10px 15px;
               background-size: auto 400px;           /*背景画像の大きさ（横自動、縦指定）*/
       }
       
       


/* =================================================
メニューバー（タブレット版）
================================================= */


       nav.menu{
	          box-sizing:border-box;             /*paddingとborderを幅と高さに含める*/
	          margin-bottom:10px;                 /*メニューバー下の余白*/
	          /*background-color: #c0c0c0;実験用*/
	          border-bottom:2px dashed #6666cc;/*下線がつきます*/
	
	          padding:2px 2px;                         /*上下、左右（タブレット指定）*/
       }

       nav.menu ul{ 
              list-style: none;                  /*リストマークを表示しない*/
              margin: 0;
              padding: 0;
              /*background-color: #fffacd;実験用*/
    
              text-align:center;                      /*メニューブロックを中央寄せ（タブレット指定）*/
        }
    
    

       nav.menu ul li{
              display:inline-block;           /*横並び*/
              /*background-color: #ffc0cb;実験用*/
      
      
              /*↓ここからタブレット指定*/
              font-size: 1.7em;
              font-weight: bold;
      
              margin: 0 5% 0 0;                      /*上、右、下、左。（右からの距離）*/
              padding:5px 2px 2px 2px;               /*上、右、下、左*/
     
        }


    




     
      /*メニューバー用サイト名デザイン*/

      h1{
            font-size: 3em;
       }
     
     
     
      /*見出しのアイコン*/


      img.headicon{  
            width: 30px;    /* 横幅 */
            height: 30px;   /* 高さ*/
      }


/*dreamページの見出し*/

      h4{
            width:90%;
            padding: 3px 10px;        /*上・下のpadding:3px、左・右のpadding:10px*/
            font-size:1.3em;
      }


       h6.conan{
             font-size: 1.2em;
             }


/* =================================================
名前変換フォーム（タブレット版）（未使用）
================================================= */


      /*名前変換アコーディオン（タイトル）*/
      .namechange label.menu2 {
           width: 370px;
           }
             
      /*名前変換アコーディオン（本体）*/
      .namechange-body {
           width: 370px;
           }  
  

       form.changeform{
           width:350px;
           font-size:1.1em;/*15px以下はスマホなどでズームしてしまいます*/
           }
                
                
       form.changeform input{
           width:120px;  
           margin:10px 0px;                /*外側の余白（上下が10px、左右が0px）*/  
	       }

       form.changeform input[type="button"]{
           width:60px;       
           margin:8px 0px;                /*外側の余白（上下が8px、左右が0px）*/
	       padding:5px;
           }



                 
}/*←タブレット指定ここまで*/




/* =================================================
パソコン
================================================= */


@media screen and (min-width:1025px){

       body{
            font-size: 13px;
       }
       
       
       /*トップページ用テーブル*/

       .toppage {
	             width:70%;
	             padding:0px;                           /*ブロック内の空白*/
                 background-size: auto 400px;           /*背景画像の大きさ（横自動、縦指定）*/
       }

       /*基本ブロック*/
       #basebox{
	         width:70%;
	         padding:0px;                            /*ブロック内の空白*/

       }


       header{
             padding: 30px 10px 30px;
       }


       h5.cyber{
             font-size: 1.2em;
             }
             
       h6.conan{
             font-size: 1.3em;
             }
 

/* =================================================
メニューバー（パソコン版）
================================================= */

       nav.menu{
	        box-sizing:border-box;             /*paddingとborderを幅と高さに含める*/
         	margin-bottom:10px;                 /*メニューバー下の余白*/
	        /*background-color: #c0c0c0;実験用*/
	        border-bottom:2px dashed #6666cc;/*下線がつきます*/
	
	
         	padding:2px 10px;                  /*上下、左右（PC指定）*/

       }

       nav.menu ul{ 
            list-style: none;                  /*リストマークを表示しない*/
            margin: 0;
            padding: 0;
            /*background-color: #fffacd;実験用*/
   
            text-align:right;                  /*メニューブロックを右寄せ（PC指定）*/
       }
    
    

       nav.menu ul li{
            display:inline-block;           /*横並び*/
            /*background-color: #ffc0cb;実験用*/
      
      
           /*↓ここからPC指定*/
      
           font-size: 1.9em;
           margin: 0 0 0 30px;            /*上、右、下、左。左からの距離（リスト同士の距離なので、一番左は適応外）*/
           padding:5px 5px;               /*上下、左右*/
     
       }








}





/* =================================================
スマホサイズで作用する改行
================================================= */

/* br.sp_brはタブレット以上のサイズでは非表示にする（スマホだけ改行） */

@media screen and (min-width: 560px) {
  .sp_br{
    display: none;
  }

}


/*タブレット以下のサイズでは非表示（タブレット、パソコンで改行）*/
@media screen and (max-width: 559px) {
  .br_tabletpc{
    display: none;
  }

}



/*パソコン以上のサイズでは非表示（スマホ、タブレットで改行）*/

@media screen and (min-width:1025px){ 
     .br_smartablet{
          display: none;
           }
}


/*パソコン以下のサイズでは非表示（パソコンだけ改行）*/

@media screen and (max-width:1024px){ 
     .br_pc{
          display: none;
           }
}





/* =================================================
名前変換フォーム（PHP）
================================================= */



form.changeName{}
form.changeName fieldset{	           
           width:400px;
           background: #eeeeee;
           text-align:center;
           box-shadow: 2px 2px 4px gray;
           border-radius: 10px;         	/* 角を丸くする */
           -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	       -moz-border-radius: 10px;	    /* Firefox用 */
	       }


/*グループラベル（名前変換の文字列）を見えなくする*/
form.changeName legend{ display: none; }

form.changeName p{ display: none; }

form.changeName ul{	margin: 0; padding: 0; border: none;
	box-sizing: border-box;
}


form.changeName li{ margin:0; padding: 0;  list-style:none; border: none; background: none;
	font-weight: normal; font-style: normal; box-sizing: border-box;}

/*入力フォーム*/
form.changeName input,
form.changeName select{
           width:150px;  
           margin:5px 0px;                /*外側の余白（上下が5px、左右が0px）*/
	       padding:5px;                    /*内側の余白（全方位）*/
	       border-radius: 10px;         	/* 角を丸くする */	
	       -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	       -moz-border-radius: 10px;	    /* Firefox用 */ 
	       box-sizing: border-box;         /*paddingとborderを幅と高さに含める*/
	       }

/*ボタン*/
form.changeName .process input{ 
           vartical-align: middle; 
           cursor: pointer; 
           width:70px;
           background-color:#bbbbbb;
           color: #ffffff;
           margin:5px 5px;                /*外側の余白（上下が5px、左右5px）*/
	       padding:5px;}

/* 縦並び */
form.changeName ul{ display:flex; flex-wrap:wrap; flex-direction:column;
	justify-content:space-between; /* 変換フォーム左寄せ【flex-start】 / 中央【center】 / 右寄せ【flex-end】/等間隔【space-between】 */ }
form.changeName li{ margin:.2em 0; 
	display:flex; /* 入力フォームを項目名の横幅分を除いて幅いっぱいにするなら */
}
form.changeName li label{ min-width: 5em; /* 項目名の幅をそろえるなら */
	padding-right:.5em;padding-left:.5em;padding-top:5px;padding-bottom:5px;
	display:inline-block; /* 項目名を消す場合は【display:none;】 */
    vartical-align: middle; 
}
form.changeName li input[type="text"],
form.changeName li select{ /*flex-grow:1;  入力フォームを幅いっぱいにするなら */ }

form.changeName ul.process{ margin-top: .32em; flex-direction:row; /* 登録削除横並び */
	justify-content:center; /* 登録削除左寄せ【flex-start】 / 中央【center】 / 右寄せ【flex-end】 */
}

/* 表示の順番を変える。orderの数値を並べたい順に */
form.changeName ul:not([class]) li:nth-of-type(1) { order: 1; }
form.changeName ul:not([class]) li:nth-of-type(2) { order: 2; }
form.changeName ul:not([class]) li:nth-of-type(3) { order: 3; }
form.changeName ul:not([class]) li:nth-of-type(4) { order: 4; }
form.changeName ul:not([class]) li:nth-of-type(5) { order: 5; }




/*スマホ*/
@media screen and (min-width:0px) and (max-width:559px){

form.changeName fieldset{
          width:95%;
          max-width:350px;
          font-size:1em;
 }




/*入力フォーム*/
form.changeName input,
form.changeName select{
           width:45%;  
           max-width:120px;      
           margin:3px 0px;                /*外側の余白（上下が5px、左右が0px）*/
	       padding:3px;                    /*内側の余白（全方位）*/
	       }
	       
/*ボタン*/                
form.changeName .process input{ 
           width:50px;
           margin:5px 3px;                /*外側の余白（上下が5px、左右5px）*/
	       padding:3px;}
	       


}


/*タブレット*/
@media screen and (min-width:560px) and (max-width:1024px){


form.changeName fieldset{
           width:350px;
 }
 


/*入力フォーム*/
form.changeName input,
form.changeName select{
           width:120px;     
           margin:5px 0px;                /*外側の余白（上下が5px、左右が0px）*/
	       padding:5px;                    /*内側の余白（全方位）*/
	       }
	       
/*ボタン*/             
form.changeName .process input{ 
           width:60px;  
           margin:5px 3px;                /*外側の余白（上下が5px、左右5px）*/
	       padding:4px;
	       }
	       
	
}