
/* 入力画面 */
#form tr {min-height: 100px;}
.label.label-warning.ss_notnull::before {
    content: '*'!important;
}

@media only screen and (min-width: 769px){
    #form .ss_form table th {
        width: 250px;
        line-height: 1.5;
        padding: 0 40px 0 0;
    }
}

body,input,textarea{
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", sans-serif;
}
@media only screen and (min-width: 769px){
    #form form table:nth-of-type(1) tr.Name td input[type="text"]{
     width: 60%!important;
    }
    #form form table:nth-of-type(1) tr.Name .ss_leftComment{
        padding-right: 5px;
        width: 30%;
    }
            #form form table:nth-of-type(1) tr:nth-child(2) td .ss_input {
        display: inline-block;
        width: auto!important;
        max-width: 100%;
    }
    #form input[type="text"], input[type="email"], textarea {
        width: auto!important;
        max-width: 100%;
        height: 40px;
        font-size: 1.6rem;
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #bbb;
    }
    @-moz-document url-prefix() {
        #form input[type="text"], input[type="email"], textarea {
            width: auto!important;
            max-width: 100%;
            height: 40px;
            font-size: 1.6rem;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #bbb;
        }
    }
}

@media screen and (max-width: 767px){
    #form form table:nth-of-type(1) tr:not(.Name) td input[type="text"] {
     width: 100%!important;
   }
   #form .Name input{
       width: 70%!important;
   }
   #form .Name .ss_leftComment{
       padding-right: 5px;
       width: 30%;
   }
}
.en-required_tag::before{
    content: '*';
    color: #FF0000;
}
.ss_upComment{
    margin-bottom: 10px;
    word-break: break-all
}
.ss_bottomComment{
    word-break: break-all
}


/* 確認画面 */
#confirm .Name div.ss_input:nth-child(2) {
    padding-left: 5px;
}
#confirm table td{
    float: left;
    width: 100%;
}
#confirm table td .ss_input{
    float: left;
}

@media only screen and (min-width: 769px){
    tr{
        display: flex;
    }
}

@media only screen and (max-width: 770px){
    #confirm ::-webkit-full-page-media, _:future, :root tr {
        display: grid;
    }
}

@media all and (-ms-high-contrast: none) {

    #form .ss_form table td,#confirm .ss_form table td{
        width: auto !important;
    }
    #form .ss_form table th,#confirm .ss_form table th{
        width: auto !important;
    }
  }

#confirm table td{
    word-break: break-all;
}
/* エラー文 */
.alert-danger h4, .alert-error h4 {
	color: #b94a48;
}
.alert-error h4 {
    color: #b94a48;
    background-color: #f2dede;
    margin: 0;
    font-size: 17.5px;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    text-rendering: optimizelegibility;
}
.alert {
	margin-bottom: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding-top: 8px;
	padding-right: 14px;
	padding-bottom: 8px;
	padding-left: 14px;
	line-height: 150%;
}
.alert, .alert h4 {
	color: #c09853;
}
.alert h4 {
	margin: 0;
}
.alert .close {
	position: relative;
	top: -2px;
	right: -21px;
	line-height: 20px;
}
.alert-success {
	color: #468847;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
.alert-success h4 {
	color: #468847;
}
.alert-danger, .alert-error {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
    margin: 0 auto;
    width: 760px;
}
.alert-danger h4, .alert-error h4 {
	color: #b94a48;
}
.alert-info {
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;
}
.alert-info h4 {
	color: #3a87ad;
}
.alert-block {
	padding-top: 14px;
	padding-bottom: 14px;
}
.alert-block > p, .alert-block > ul {
	margin-bottom: 0;
}
.alert-block p + p {
	margin-top: 5px;
}
@media screen and (max-width: 767px){
    .alert-danger, .alert-error {
      margin: 0 auto 3rem;
      width: 90%;
    }
}
