#wrap{
          width: 80%;
          margin: 0 auto;
    }
   @media screen and (min-width: 800px) {
        main{
          height:100%;
          margin:auto auto;
        }
        .f-table{
          clear:both;
          margin:20px auto ;
          border-collapse:collapse;
        }
        .f-table th,td{
          border:1px solid #333333;
          padding:5px;
        }
        .f-table th{
          width:40%;
          background-color:#95dace;
          color:white;
        }
        .f-table td{width:100%;}
        #submit{text-align:right;}
        .Form-Item-Label{
          font-size:20px;
          font-family:sans-serif;
        }
        .parent{
        position: relative;
        height: 100px;
        }
        .btn{
        color:white;
        font-size:30px;
        display: inline-block;
        position:absolute;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
        text-decoration: none;
        background: skyblue;
        width: 200px;
        height: 80px;
        line-height: 80px;
        border-radius: 5px;
        text-align: center;
        overflow: hidden;
        font-weight: bold;
        text-shadow: 1px 1px 1px gray;
        box-shadow: 0 1px 1px whitesmoke;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
      tn:active{
        /*ボタンを押したとき*/
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.2);/*影を小さく*/
        border-bottom: none;
      }
      .Form-Item-Textarea{
        display: inline-block;
        width: 100%;
        height:150px;
        font-size:20px;
        padding: 0.5em;
        border: 1px solid #999;
        box-sizing: border-box;
        margin: 0.5em 0;
      }
      .Form-Item-Input{
        display:inline-block;
        width:90%;
        height:30px;
        font-size:20px;
      }
      .kahi{
        width:100px;
      }
      .r-label{
        font-size:20px;
      }
      #radio-button label {
        padding: 3 20 0 35px;	/* ラベルの位置 */
        font-size: 30px;
        line-height: 35px;		/* ボタンのサイズに合わせる */
        display: inline-block;
        cursor:	pointer;
        position: relative;
      }
      
      #radio-button input[type="radio"] {
        display: none;
      }
      #radio-button input[type="radio"]:checked + label:after {
        content: '';
        width:23px;		/* マークの横幅 */
        height: 23px;		/* マークの縦幅 */
        position: absolute;
        top: 7px;
        left: 7px;
        background-color: #fff;
        border-radius: 50%;
      }
      #buin{
        text-align:right;
      }
      select[name="inquiry"]{
        width:120px;
        height:30px;
      
      }
      .honbun{
        text-align: center;
      }
      .new{
        margin-top: 2em;
      }
      .btn-square-so-pop {
        position: relative;
        display: inline-block;
        padding: 0.25em 0.5em;
        text-decoration: none;
        color: #FFF;
        background: #fd9535;/*色*/
        border-radius: 4px;/*角の丸み*/
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 2px #d27d00;/*線色*/
      }
      
      .btn-square-so-pop:active {
        /*押したとき*/
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
      }
      
      .so-btn{
        position: relative;
        display: inline-block;
        margin-top:20px;
        padding: 20px 130px;
        text-decoration: none;
        color: #FFF;
        font-size:100%;
        background: #6497d3fb;/*色*/
        border-radius: 4px;/*角の丸み*/
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 2px #3072d4;/*線色*/
      }
      
      .so-btn:active {
        /*押したとき*/
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
      }
      
      /* モーダルウィンドウ */
      .modal-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 50%);
            padding: 40px 20px;
            overflow: auto;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
            box-sizing: border-box;
            z-index: 999999;
          }
      
          .modal-container.active {
            opacity: 1;
            visibility: visible;
          }
      
          .modal-body {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            max-width: 700px;
            width: 90%;
          }
      
          .modal-content {
            background: #fff;
            text-align: left;
            padding: 30px;
            overflow: auto;
            max-height: 700px;
          }
          .d-flex {
            display: flex;
            flex-wrap: wrap;
          }
      
          .space-around {
            justify-content: space-around;
          }    
      
          .form-table tr:nth-child(odd) {
            background-color: #f7f7f7;
          }
      
          .form-table tr th,
          .form-table tr td {
            padding: 30px;
            vertical-align: middle;
          }
      
          .form-table {
            table-layout: fixed;
            width: 100%;
          }
      
          .form-table tr th {
            width: 30%;
            text-align: left;
      
          }

          .new{
            margin-top: 2em;
          }
          .btn-square-so-pop {
          position: relative;
          display: inline-block;
          padding: 0.25em 0.5em;
          text-decoration: none;
          color: #FFF;
          background: #23b266;/*色*/
          border-radius: 4px;/*角の丸み*/
          box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
          font-weight: bold;
          border: solid 2px #038e2a;/*線色*/
        }

        h1 {
            font-size: 32px;
            color: black;
            text-align: center;
          }
        
          .settei{
        font-size:14px;
        }
        .table{
          clear:both;
          width: 50%;
          margin:10px auto 20px ;
          border-collapse:collapse;
        }
        .table th,td{
          border:1px solid #333333;
          text-align: center;
          padding:5px;
        }
        ul li{
          margin-bottom: 20px;
        }
      }
      
      @media screen and (max-width: 799px) {
      
        .f-table{
          width:100%;
          clear:both;
          margin-top:10px;
          margin-bottom:10px;
          border-collapse:collapse;
        }
        .f-table th,td{
          border:1px solid #333333;
          padding:5px;
        }
        .f-table th{
          width:40%;
          background-color:#95dace;
          color:white;
        }
        .f-table td{width:100%;}
        #submit{text-align:right;}
        .Form-Item-Label{
          font-size:40%;
          font-family:sans-serif;
        }
        .parent{
        position: relative;
        height: 100px;
        }
        .btn{
        color:white;
        font-size:25px;
        display: inline-block;
        position:absolute;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
        text-decoration: none;
        background: skyblue;
        width: 150px;
        height: 60px;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
        overflow: hidden;
        font-weight: bold;
        text-shadow: 1px 1px 1px gray;
        box-shadow: 0 1px 1px whitesmoke;
        top: 40%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
      tn:active{
        /*ボタンを押したとき*/
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.2);/*影を小さく*/
        border-bottom: none;
      }
      .Form-Item-Textarea{
        line-height: 1.3;
        width: 100%;
        height:calc(1.3 * 5);
        font-size:8px;
        padding: 5px;
        border: 1px solid #999;
        box-sizing: border-box;
        margin: 5px 0;
      }
      .Form-Item-Input{
        display:inline-block;
        width:90%;
        height:15px;
        font-size:10px;
      }
      .kahi{
        width:100px;
      }
      .r-label{
        font-size:14px;
      }
      .radiobutton label {
        padding: 3 20 0 35px;	/* ラベルの位置 */
        font-size: 10px;
        line-height: 28px;		/* ボタンのサイズに合わせる */
        display: inline-block;
        cursor:	pointer;
        position: relative;
      }
      .radiobutton label:before {
        content: '';
        width: 14px;		/* ボタンの横幅 */
        height: 14px;		/* ボタンの縦幅 */
        position: absolute;
        top: 0;
        left: 0;
        background-color:#eaedf2;
        border-radius: 50%;
          border: 1px solid #ddd;
      }
      .radiobutton input[type="radio"] {
        display: none;
      }
      .radiobutton input[type="radio"]:checked + label:after {
        content: '';
        width:10px;		/* マークの横幅 */
        height: 10px;		/* マークの縦幅 */
        position: absolute;
        top: 7px;
        left: 7px;
        background-color: #fff;
        border-radius: 50%;
      }
      #buin{
        text-align:right;
      }
      select[name="inquiry"]{
        width:60px;
      }
      .btn-square-so-pop {
        position: relative;
        display: inline-block;
        padding: 0.25em 0.5em;
        text-decoration: none;
        color: #FFF;
        background: #fd9535;/*色*/
        border-radius: 4px;/*角の丸み*/
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 2px #d27d00;/*線色*/
      }
      
      .btn-square-so-pop:active {
        /*押したとき*/
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
      }
      
      .so-btn{
        position: relative;
        display: inline-block;
        margin-top:20px;
        padding: 15px 50px;
        text-decoration: none;
        color: #FFF;
        font-size:20px;
        background: #6497d3fb;/*色*/
        border-radius: 4px;/*角の丸み*/
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 2px #3072d4;/*線色*/
      }
      
      .so-btn:active {
        /*押したとき*/
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
      }
      
      /* モーダルウィンドウ */
      .modal-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 50%);
            padding: 40px 20px;
            overflow: auto;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
            box-sizing: border-box;
            z-index: 999999;
          }
      
          .modal-container.active {
            opacity: 1;
            visibility: visible;
          }
      
          .modal-body {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            max-width: 700px;
            width: 90%;
          }
      
          .modal-content {
            background: #fff;
            text-align: left;
            padding: 30px;
            overflow: auto;
            max-height: 700px;
          }
          .d-flex {
            display: flex;
            flex-wrap: wrap;
          }
      
          .space-around {
            justify-content: space-around;
          }    
      
          .form-table tr:nth-child(odd) {
            background-color: #f7f7f7;
          }
      
          .form-table tr th,
          .form-table tr td {
            padding: 10px;
            vertical-align: middle;
            font-size:9px;
          }
      
          .form-table {
            table-layout: fixed;
      
          }
      
          .form-table tr th {
            width: 35%;
            text-align: left;
      
          }
      
          .form-table tr td {
            width: 80%;
          }
      
      
          .form-table tr th label {
            font-weight: bold;
          }
          .honbun{
            font-size:10px;
            text-align: center;
          }

          .btn-square-so-pop {
          position: relative;
          display: inline-block;
          padding: 0.25em 0.5em;
          text-decoration: none;
          color: #FFF;
          background: #23b266;/*色*/
          border-radius: 4px;/*角の丸み*/
          box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
          font-weight: bold;
          border: solid 2px #038e2a;/*線色*/
        }
        
        h1 {
            font-size: 18px;
            color: black;
            text-align: center;
            }
            .settei{
        font-size:6px;
      }
      .table{
          width:100%;
          clear:both;
          margin-top:10px;
          margin-bottom:10px;
          border-collapse:collapse;
        }
        .table th,td{
          border:1px solid #333333;
          padding:5px;
        }
        ul li{
          margin-bottom: 10px;
      }@media screen and (max-width: 480px) {
    .pagetop {
        position: fixed;
        bottom: 50px;
        right: 20px;

    }

    img.a {
        opacity: 0.8;
        width: 50%;
        height: 50%;
    }

    #page-top a {
        /*aタグの形状*/
        display: block;
        width: 70px;
        height: 70px;
        margin-right: 5%;
        color: #333;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 0.6rem;
        /*背景画像の指定*/
        background: url("images/page_top.png") no-repeat center;
        background-size: contain;
        opacity: 0.9;
    }

    #page-top.floatAnime a {
        width: 70px;
        height: 70px;
        margin-right: 5%;
        /*背景画像の指定*/
        background: url("images/pagetop_1.png") no-repeat center;
        background-size: contain;
        /*アニメーションの指定*/
        animation: floatAnime 2s linear infinite;
        opacity: 0;
    }
}
@media screen and (min-width:481px) and (max-width:1084px) {
    .pagetop {
        position: fixed;
        bottom: 50px;
        right: 2%;

    }

    img.a {
        opacity: 0.8;
        width: 70%;
        height: 70%;

    }
    #page-top a {
        /*aタグの形状*/
        display: block;
        width: 100px;
        height: 100px;
        margin-right: 5%;
        color: #333;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 0.6rem;
        /*背景画像の指定*/
        background: url("images/page_top.png") no-repeat center;
        background-size: contain;

    }

    #page-top.floatAnime a {
        width: 100px;
        height: 130px;
        margin-right: 5%;
        /*背景画像の指定*/
        background: url("images/pagetop_1.png") no-repeat center;
        background-size: contain;
        /*アニメーションの指定*/
        animation: floatAnime 2s linear infinite;
        opacity: 0;
    }
}
@media screen and (min-width: 1085px) {
    .pagetop {
        position: fixed;
        bottom: 50px;
        right: 20px;

    }

    img.a {
        opacity: 0.8;
        width: 100%;
        height: 100%;
    }
    #page-top a {
        /*aタグの形状*/
        display: block;
        width: 100px;
        height: 100px;
        margin-right: 5%;
        color: #333;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 0.6rem;
        /*背景画像の指定*/
        background: url("images/page_top.png") no-repeat center;
        background-size: contain;

    }

    #page-top.floatAnime a {
        width: 100px;
        height: 130px;
        margin-right: 5%;
        /*背景画像の指定*/
        background: url("images/pagetop_1.png") no-repeat center;
        background-size: contain;
        /*アニメーションの指定*/
        animation: floatAnime 2s linear infinite;
        opacity: 0;
    }
}
#page-top {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/
#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(150px);
    }
}

/*画像の切り替えと動き*/


@keyframes floatAnime {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    25% {
        transform: translateX(-6px);
        opacity: 1;
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(6px);
        opacity: 1;
    }
}

/*Page Topと書かれたテキストの位置*/
#page-top span {
    position: absolute;
    bottom: -20px;
    right: 20px;
    color: #666;
}

      }