/* 住所 */
.xhm-address {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-address div {
    -webkit-box-align: center;
    /-ms-flex-align: center;
    align-items: center;
}

.xhm-address input {
    width: 100%;
    height: 40px;
    margin: 10px 0;
    padding: 0 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.xhm-address-select-box {
    position: relative;
}

.xhm-address-select-box:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    border-radius: 5px;
    /*   width: 14px; */
    padding: 14px;
    top: 55%;
    right: 0;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

.xhm-address-select-box select {
    display: block;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: transparent;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-address-select-box select::-ms-expand {
    display: none;
}

.xhm input[type="number"]::-webkit-inner-spin-button,
.xhm input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}/* 注釈 */
.xhm-annotation {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}/* 添付 */
.xhm-attaching-file {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-radio p {
    margin: 10px 0 0 0;
}

.size {
    font-size: 12px;
}

.xhm-attaching-file button,
.xhm-attaching-file .button-attaching-file {
    display: block;
    width: 100%;
    max-width: 160px;
    outline: none;
    padding: 0.6rem 0.5rem;
    text-decoration: none;
    color: #333;
    border: solid 1px #333;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.xhm-attaching-file button:hover,
.xhm-attaching-file .button-attaching-file:hover {
    opacity: 0.7;
}/* 生年月日 */
.xhm-birthday {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-birthday-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: 0 0 15px 0;
}

.xhm-birthday-select select {
    width: 100%;
    padding: 10px;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-birthday-select select::-ms-expand {
    display: none;
}

.xhm-birthday-select label {
    margin: 0 0 0 10px;
}

.xhm-birthday-select:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    top: 60%;
    right: 35px;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}/* 郵便番号検索ボタン */
.xhm-btn-post-search {
    display: block;
    min-width: 120px;
    height: 40px;
    line-height: 1;
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    background: #00b0f0;
    border: solid 1px #0070c0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.xhm-btn-post-search:hover {
    opacity: 0.9;
}/* 戻るボタン */
.xhm-btn-prev {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-btn-prev button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    outline: none;
    padding: 1rem 0.5em;
    text-decoration: none;
    font-size: 1rem;
    color: #7f7f7f;
    background: #f2f2f2;
    border: solid 1px #bfbfbf;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.xhm-btn-prev button:hover {
    opacity: 0.9;
}/* サブミットボタン */
.xhm-btn-submit {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-btn-submit button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    outline: none;
    padding: 1rem 0.5em;
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    background: #00b0f0;
    border: solid 1px #0070c0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.xhm-btn-submit button:hover {
    opacity: 0.9;
}/* カレンダー */
.xhm-calendar {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-calendar-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.xhm-calendar-select {
    position: relative;
}

.xhm-calendar-select input {
    min-width: 180px;
    padding: 12px;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-calendar-select div.xhm-select {
    margin: 0 0 0 15px;
}

.xhm-calendar-select div.xhm-select select {
    min-width: 120px;
    margin: 0;
    padding: 10px;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-calendar-select div.xhm-select select::-ms-expand {
    display: none;
}

.xhm-calendar-select div.xhm-select:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    top: 60%;
    right: 10px;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* カレンダーボタン */
.xhm-calendar-select .animated-placeholder {

}

.xhm-calendar-select .animated-placeholder img.xhm-datepicker {
    display: inline-block;
    width: 34px;
    height: auto;
    margin: 0 0 0 5px;
    vertical-align: middle;
    cursor: pointer;
}

/* 削除ボタン */
.xhm-calendar-select .cancel-button {

}

.xhm-calendar-select .cancel-button img.xhm-cancel-icon {

}

@media screen and (max-width: 767px) {
    .xhm-calendar-select {
        display: -webkit-box;
        display: -ms-flexbox;
        display: block;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .xhm-calendar-select input {
        width: calc(100% - 71px);
        padding: 12px;
        border: solid 1px #bfbfbf;
        border-radius: 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .xhm-calendar-select div.xhm-select {
        width: 100%;
        margin: 15px 15px 0 0;
    }

    .xhm-calendar-select div.xhm-select select {
        margin: 0;
        padding: 10px;
        border: solid 1px #bfbfbf;
        border-radius: 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}/* チェックボックス */
.xhm-checkbox {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-checkbox p {
    margin: 10px 0 0 0;
}

.xhm-checkbox [type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
  width:100px;
}

.xhm-checkbox [type="checkbox"] + .xhm-checkbox-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*width: -webkit-fit-content;*/
    /*width: -moz-fit-content;*/
    /*width: fit-content;*/
    margin: 10px 0;
}

.xhm-checkbox [type="checkbox"] + .xhm-checkbox-label:before {
    content: "　　";
    background: #f4f4f4;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 17px;
  min-width: 17px;
    height: 17px;
    vertical-align: top;
    position: relative;
    margin: 0 5px 0 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.xhm-checkbox [type="checkbox"]:checked + .xhm-checkbox-label:before {
    background-color: #3197ee;
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.xhm-checkbox [type="checkbox"]:focus + .checkbox-label:before {
    outline: none;
    border-color: #3197ee;
}

.xhm-checkbox [type="checkbox"]:disabled + .checkbox-label:before {
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.xhm-checkbox [type="checkbox"] + .checkbox-label:empty:before {
    margin-right: 0;
}

.xhm-checkbox.xhm-checkbox-break .xhm-grid {
    display: block;
}

.xhm-checkbox.xhm-checkbox-break .xhm-grid p {
    margin: 10px 0 0 15px;
}

.xhm-checkbox.xhm-checkbox-break ul {
    margin: 10px 0 0 15px;
    padding: 0;
    list-style: none;
}

.xhm-checkbox.xhm-checkbox-break ul li {
    margin: 0 0 10px 0;
}

.xhm-checkbox.xhm-checkbox-no-break [type="checkbox"] + .xhm-checkbox-label {
    margin: 10px 0 0 15px;
}.xhm-file-download {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-file-download .dl-file-wrap {
    list-style: none; /* デフォルトのアイコンを消す */
    margin: 0; /* デフォルト指定上書き */
    padding: 0; /* デフォルト指定上書き */
}

.xhm-file-download .dl-file:before {
    content: ""; /* 空の要素作成 */
    width: 32px; /* 幅指定 */
    height: 32px; /* 高さ指定 */
    display: inline-block; /* インラインブロックにする */
    position: relative; /* アイコンの位置を調整 */
    margin-right: 5px; /* 余白指定 */
    background-image: url(/form/img/dl_file.png); /* アイコン指定 */
    background-size: contain; /* アイコンの大きさ指定 */
    background-repeat: no-repeat; /* アイコンをリピートしないようにする */
    vertical-align: top; /* アイコンの位置を調整 */
}

.xhm-file-download .dl-file {
    padding: 10px; /* 余白指定 */
    margin-bottom: 5px; /* 要素と要素の間指定 */
    font-size: 20px; /* 文字サイズ指定 */
}

.xhm-file-download .dl-file a {
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

.xhm-file-download .dl-file a:hover {
    color: #00b0f0;
}/* 見出し１ */
.xhm-heading-main {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-heading-main h1 {
    width: calc(100% - 15px);
    padding: 10px 0 10px 15px;
    font-size: 20px;
    font-weight: bold;
    line-height: 2;
    color: black;
    background-color: #f2f2f2;
}/* 見出し２ */
.xhm-heading-sub {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-heading-sub h2 {
    padding: 0.25em 0.5em;
    font-size: 16px;
    color: black;
    background: transparent;
    border-left: solid 4px #00b0f0;
}/* ラジオボタンとチェックボックスのラベル */
.xhm-label {
    font-weight: bold;
}/* メールアドレステキストフィールド */
.xhm-mail-address {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-mail-address input {
    width: 100%;
    margin-top: 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 767px) {
    .xhm-mail-address {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .xhm-mail-address input {
        margin-top: 0;
    }
}.xhm-message-complete {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #fff;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
}

.xhm-message-complete p {
    /*  margin: 20px 20px 20px 20px; */
}/* エラーメッセージ */
.xhm-message-error {
    position: relative;
    display: inline-block;
    border-radius: 6px;
    margin: 0 0 0.8rem 0;
    padding: 7px 14px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 16px;
    background-color: red;
}

.xhm-message-error + input,
.xhm-message-error + select,
.xhm-message-error + textarea {
    border: 1px solid red;
    background-color: #ffdaf2;
}

.xhm-message-error:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 15%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid red;
}/* お名前テキストフィールド */
.xhm-name {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-name input {
    width: 100%;
    margin-top: 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 767px) {
    .xhm-name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .xhm-name input {
        margin-top: 0;
    }
}

/* 2024/12/18アップデート対応 */
.xhm-name .xhm-name-combine .xhm-grid--gutters {
    margin-left: 0;
}
.xhm-name .xhm-name-combine .xhm-grid-cell {
    padding-left: 0;
}/* 次へボタン */
.xhm-btn-next {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-btn-next button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    outline: none;
    padding: 1rem 0.5em;
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    background: #00b0f0;
    border: solid 1px #0070c0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.xhm-btn-next button:hover {
    opacity: 0.9;
}

/* 戻るボタン */
.xhm-btn-back {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-btn-back button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    outline: none;
    padding: 1rem 0.5em;
    text-decoration: none;
    font-size: 1rem;
    color: #7f7f7f;
    background: #f2f2f2;
    border: solid 1px #bfbfbf;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.xhm-btn-back button:hover {
    opacity: 0.9;
}.tribeck_title { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; display: flex; align-items: center; }
.tribeck_title::before { display:inline; content:""; border-top: 1px solid #999; -webkit-box-flex: 1; flex-grow: 1;  margin-right: .5em; }
.tribeck_title::after { display:inline; content:""; border-top: 1px solid #999; -webkit-box-flex: 1; flex-grow: 1; margin-left: .5em;  }


@media all and (min-width: 769px) {
.tribeck_fLarge { 
        font-size: 11.5px;
        font-size: 1.15rem;
        line-height: 1; }
  * { font-size:10px; font-size:1rem; }
}

@media only screen and (max-width: 768px) {
  .tribeck_fLarge { 
    	font-size: 9.875px;
        font-size: 0.9875rem; }
    * { font-size:9.5px; font-size:0.95rem; }
}/* パラメータ */
.xhm-parameter {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-parameter input {
    width: 100%;
    margin-top: 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 767px) {
    .xhm-parameter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .xhm-parameter input {
        margin-top: 0;
    }
}/* お知らせ許諾 */
.xhm-permission {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-permission p {
    margin: 10px 0 0 0;
}

.xhm-permission [type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

.xhm-permission [type="radio"] + .xhm-permission-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 10px 0;
}

.xhm-permission [type="radio"] + .xhm-permission-label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: top;
    position: relative;
    margin: 0 5px 0 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.xhm-permission [type="radio"]:checked + .xhm-permission-label:before {
    background-color: #3197ee;
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.xhm-permission [type="radio"]:focus + .radio-label:before {
    outline: none;
    border-color: #3197ee;
}

.xhm-permission [type="radio"]:disabled + .radio-label:before {
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.xhm-permission [type="radio"] + .radio-label:empty:before {
    margin-right: 0;
}

.xhm-permission.xhm-permission-break .xhm-grid {
    display: block;
}

.xhm-permission.xhm-permission-break .xhm-grid p {
    margin: 10px 0 0 15px;
}

.xhm-permission.xhm-permission-break ul {
    margin: 10px 0 0 15px;
    padding: 0;
    list-style: none;
}

.xhm-permission.xhm-permission-break ul li {
    margin: 0 0 10px 0;
}

.xhm-permission.xhm-permission-no-break [type="radio"] + .xhm-permission-label {
    margin: 10px 0 0 15px;
}/* 都道府県セレクトボックス */
.xhm-prefectures {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-prefectures-box {
    position: relative;
}

.xhm-prefectures-box:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    border-radius: 5px;
    /*   width: 14px; */
    padding: 14px;
    top: 55%;
    right: 0;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

.xhm-prefectures select {
    display: block;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: transparent;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-prefectures select::-ms-expand {
    display: none;
}/* ラジオボタン */
.xhm-radio {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-radio p {
    margin: 10px 0 0 0;
}

.xhm-radio [type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

.xhm-radio [type="radio"] + .xhm-radio-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
   /* width: -webkit-fit-content;*/
    /*width: -moz-fit-content;*/
    /*width: fit-content;*/
    margin: 10px 0;
}

.xhm-radio [type="radio"] + .xhm-radio-label:before {
    content: "　";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 17px;
  min-width: 17px;
    height: 17px;
    vertical-align: top;
    position: relative;
    margin: 0 5px 0 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.xhm-radio [type="radio"]:checked + .xhm-radio-label:before {
    background-color: #3197ee;
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.xhm-radio [type="radio"]:focus + .radio-label:before {
    outline: none;
    border-color: #3197ee;
}

.xhm-radio [type="radio"]:disabled + .radio-label:before {
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.xhm-radio [type="radio"] + .radio-label:empty:before {
    margin-right: 0;
}

.xhm-radio.xhm-radio-break .xhm-grid {
    display: block;
}

.xhm-radio.xhm-radio-break .xhm-grid p {
    margin: 10px 0 0 15px;
}

.xhm-radio.xhm-radio-break ul {
    margin: 10px 0 0 15px;
    padding: 0;
    list-style: none;
}

.xhm-radio.xhm-radio-break ul li {
    margin: 0 0 10px 0;
}

.xhm-radio.xhm-radio-no-break [type="radio"] + .xhm-radio-label {
    margin: 10px 0 0 15px;
}/* 必須アイコン */
.xhm-required {
    display: inline-block;
    margin: 0 0 0 7px;
    padding: 0 10px;
    border-radius: 2.5em;
    background-color: red;
    color: white;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

/* 任意アイコン */
.xhm-optional {
    display: inline-block;
    margin: 0 0 0 7px;
    padding: 0 10px;
    border-radius: 2.5em;
    background-color: #4489e8;
    color: white;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}/* セレクトボックス */
.xhm-select {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-select-box {
    position: relative;
}

.xhm-select-box:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    border-radius: 5px;
    /*   width: 14px; */
    padding: 14px;
    top: 55%;
    right: 0;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

.xhm-select select {
    display: block;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: transparent;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.xhm-select select::-ms-expand {
    display: none;
}/* 区切り線 */
.xhm-separator {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-separator hr {
    height: 1px;
    background-color: #d2d2d2;
    border: none;
}/* 性別ラジオボタン */
.xhm-sex {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-sex p {
    margin: 10px 0 0 0;
}

.xhm-sex [type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

.xhm-sex [type="radio"] + .xhm-sex-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 10px 0;
}

.xhm-sex [type="radio"] + .xhm-sex-label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: top;
    position: relative;
    margin: 0 5px 0 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.xhm-sex [type="radio"]:checked + .xhm-sex-label:before {
    background-color: #3197ee;
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.xhm-sex [type="radio"]:focus + .sex-label:before {
    outline: none;
    border-color: #3197ee;
}

.xhm-sex [type="radio"]:disabled + .sex-label:before {
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.xhm-sex [type="radio"] + .sex-label:empty:before {
    margin-right: 0;
}

.xhm-sex.xhm-sex-break .xhm-grid {
    display: block;
}

.xhm-sex.xhm-sex-break .xhm-grid p {
    margin: 10px 0 0 15px;
}

.xhm-sex.xhm-sex-break ul {
    margin: 10px 0 0 15px;
    padding: 0;
    list-style: none;
}

.xhm-sex.xhm-sex-break ul li {
    margin: 0 0 10px 0;
}

.xhm-sex.xhm-sex-no-break [type="radio"] + .xhm-sex-label {
    margin: 10px 0 0 15px;
}.xhm-spacer-20 {
    height: 20px;
    vertical-align: top;
}/* ステップ */
.xhm-step nav {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.xhm-step ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid #bdbdbd;
    list-style: none;
    overflow: hidden;
    background-color: #bdbdbd;
}

.xhm-step li {
    position: relative;
    width: calc(100% / 3);
    font-size: 16px;
    text-align: center;
    margin: 0 1px;
    padding: 12px 0;
    background-color: #f2f2f2;
}

.xhm-step li:last-child {
    border-right: 1px solid #bdbdbd;
}

.xhm-step li:last-child:after {
    right: 0;
}

.xhm-step li:before, .xhm-step li:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid;
    right: -1em;
}

.xhm-step li:before {
    border-left-color: #ccc;
    right: -1.1em;
    z-index: 1;
}

.xhm-step li:after {
    z-index: 2;
    border-left-color: #f2f2f2;
}

.xhm-step .current {
    color: #fff;
    background-color: #00b0f0;
}

.xhm-step .current:after {
    border-left: 17px solid #00b0f0;
}

.xhm-step.step-2 li {
    width: calc(100% / 2);
}* {
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
}

.preview-area-card .card-body {
    transition: z-index 0ms 5.28455ms;
    color: #000;
    background: #fff;
}

section {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

input[type="text"],
input[type="number"],
textarea,
button,
select {
    font-size: 14px;
    -webkit-appearance: none;
}

.preview-area .card-body input,
.preview-area .card-body textarea,
.preview-area .card-body button,
.preview-area .card-body select {
    font-size: 14px;
    -webkit-appearance: none;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

@media screen and (min-width: 560px) {
    .container {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    .container {
        width: 1024px;
    }
}

@media screen and (max-width: 767px) {
    [class^="xhm-"] input,
    [class^="xhm-"] textarea,
    [class^="xhm-"] select {
        font-size: 16px;
    }
}

.xhm-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.xhm-grid-cell {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

@media screen and (max-width: 767px) {
    .xhm-grid-clear {
        display: block;
    }
}

.xhm-grid-clear:after {
    content: "";
    display: block;
    margin: 0 0 10px 0;
}

.xhm-grid--gutters {
    margin-left: -1em;
}

.xhm-grid--gutters .xhm-grid-cell {
    padding-left: 1em;
}

.xhm-grid--right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.xhm-grid--center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.xhm-grid--top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.xhm-grid--bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.xhm-grid--center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.xhm-grid-cell--top {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.xhm-grid-cell--bottom {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.xhm-grid-cell--center {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.xhm-grid-grow--4 {
    -webkit-box-flex: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;
}

.xhm-grid--cols-2 > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    margin: 0 0 1rem 0;
}

.xhm-grid--cols-3 > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

.xhm-grid--cols-4 > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

.xhm-grid--cols-6 > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1em);
    flex: 0 0 calc(50% - 1em);
}

.xhm-grid--cols-12 > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.3333% - 1em);
    flex: 0 0 calc(33.3333% - 1em);
}

.xhm-grid--holly-grail .aside,
.xhm-grid--holly-grail .main {
    -webkit-box-flex: 1;
    -ms-flex: 1 100%;
    flex: 1 100%;
}

.xhm-grid--1of2 > .xhm-grid-cell,
.xhm-grid--1of4 > .xhm-grid-cell:first-of-type,
.xhm-grid--1of3 > .xhm-grid-cell:first-of-type {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

.xhm-grid--1of6 > .xhm-grid-cell:first-of-type {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

.xhm-grid--fit > .xhm-grid-cell {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.xhm-grid--full > .xhm-grid-cell {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

@media (min-width: 30em) {
    .xhm-grid--cols-4 > .xhm-grid-cell {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 1em);
        flex: 0 0 calc(50% - 1em);
    }

    .xhm-grid--cols-6 > .xhm-grid-cell {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.3333% - 1em);
        flex: 0 0 calc(33.3333% - 1em);
    }

    .xhm-grid--cols-12 > .xhm-grid-cell {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(16.6666% - 1em);
        flex: 0 0 calc(16.6666% - 1em);
    }

    .xhm-grid--holly-grail .aside {
        -webkit-box-flex: 1;
        -ms-flex: 1 calc(25% - 1em);
        flex: 1 calc(25% - 1em);
    }

    .xhm-grid--1of2 > .xhm-grid-cell {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .xhm-grid--1of6 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    }

    .xhm-grid--1of4 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .xhm-grid--1of4-reverse > .xhm-grid-cell:last-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 72%;
        flex: 0 0 72%;
    }

    .xhm-grid--1of3 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }
}

@media (min-width: 48em) {
    .xhm-grid--cols-2 > .xhm-grid-cell,
    .xhm-grid--cols-3 > .xhm-grid-cell,
    .xhm-grid--cols-4 > .xhm-grid-cell,
    .xhm-grid--cols-6 > .xhm-grid-cell,
    .xhm-grid--cols-12 > .xhm-grid-cell {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .xhm-grid--holly-grail .main {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }

    .xhm-grid--holly-grail .aside {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .xhm-grid--holly-grail .aside-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .xhm-grid--holly-grail .main {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .xhm-grid--holly-grail .aside-2 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    .xhm-grid--1of2 > .xhm-grid-cell {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .xhm-grid--1of6 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666%;
        flex: 0 0 16.6666%;
    }

    .xhm-grid--1of4 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }

    .xhm-grid--1of3 > .xhm-grid-cell:first-of-type {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    }
}

.xhm-mt-1 {
    margin-top: 1px;
}

.xhm-mr-1 {
    margin-right: 1px;
}

.xhm-mb-1 {
    margin-bottom: 1px;
}

.xhm-ml-1 {
    margin-left: 1px;
}

.xhm-mt-2 {
    margin-top: 2px;
}

.xhm-mr-2 {
    margin-right: 2px;
}

.xhm-mb-2 {
    margin-bottom: 2px;
}

.xhm-ml-2 {
    margin-left: 2px;
}

.xhm-mt-3 {
    margin-top: 3px;
}

.xhm-mr-3 {
    margin-right: 3px;
}

.xhm-mb-3 {
    margin-bottom: 3px;
}

.xhm-ml-3 {
    margin-left: 3px;
}

.xhm-mt-4 {
    margin-top: 4px;
}

.xhm-mr-4 {
    margin-right: 4px;
}

.xhm-mb-4 {
    margin-bottom: 4px;
}

.xhm-ml-4 {
    margin-left: 4px;
}

.xhm-mt-5 {
    margin-top: 5px;
}

.xhm-mr-5 {
    margin-right: 5px;
}

.xhm-mb-5 {
    margin-bottom: 5px;
}

.xhm-ml-5 {
    margin-left: 5px;
}

.xhm-mt-6 {
    margin-top: 6px;
}

.xhm-mr-6 {
    margin-right: 6px;
}

.xhm-mb-6 {
    margin-bottom: 6px;
}

.xhm-ml-6 {
    margin-left: 6px;
}

.xhm-mt-7 {
    margin-top: 7px;
}

.xhm-mr-7 {
    margin-right: 7px;
}

.xhm-mb-7 {
    margin-bottom: 7px;
}

.xhm-ml-7 {
    margin-left: 7px;
}

.xhm-mt-8 {
    margin-top: 8px;
}

.xhm-mr-8 {
    margin-right: 8px;
}

.xhm-mb-8 {
    margin-bottom: 8px;
}

.xhm-ml-8 {
    margin-left: 8px;
}

.xhm-mt-9 {
    margin-top: 9px;
}

.xhm-mr-9 {
    margin-right: 9px;
}

.xhm-mb-9 {
    margin-bottom: 9px;
}

.xhm-ml-9 {
    margin-left: 9px;
}

.xhm-mt-10 {
    margin-top: 10px;
}

.xhm-mr-10 {
    margin-right: 10px;
}

.xhm-mb-10 {
    margin-bottom: 10px;
}

.xhm-ml-10 {
    margin-left: 10px;
}

.xhm-mt-11 {
    margin-top: 11px;
}

.xhm-mr-11 {
    margin-right: 11px;
}

.xhm-mb-11 {
    margin-bottom: 11px;
}

.xhm-ml-11 {
    margin-left: 11px;
}

.xhm-mt-12 {
    margin-top: 12px;
}

.xhm-mr-12 {
    margin-right: 12px;
}

.xhm-mb-12 {
    margin-bottom: 12px;
}

.xhm-ml-12 {
    margin-left: 12px;
}

.xhm-mt-13 {
    margin-top: 13px;
}

.xhm-mr-13 {
    margin-right: 13px;
}

.xhm-mb-13 {
    margin-bottom: 13px;
}

.xhm-ml-13 {
    margin-left: 13px;
}

.xhm-mt-14 {
    margin-top: 14px;
}

.xhm-mr-14 {
    margin-right: 14px;
}

.xhm-mb-14 {
    margin-bottom: 14px;
}

.xhm-ml-14 {
    margin-left: 14px;
}

.xhm-mt-15 {
    margin-top: 15px;
}

.xhm-mr-15 {
    margin-right: 15px;
}

.xhm-mb-15 {
    margin-bottom: 15px;
}

.xhm-ml-15 {
    margin-left: 15px;
}

.xhm-mt-16 {
    margin-top: 16px;
}

.xhm-mr-16 {
    margin-right: 16px;
}

.xhm-mb-16 {
    margin-bottom: 16px;
}

.xhm-ml-16 {
    margin-left: 16px;
}

.xhm-mt-17 {
    margin-top: 17px;
}

.xhm-mr-17 {
    margin-right: 17px;
}

.xhm-mb-17 {
    margin-bottom: 17px;
}

.xhm-ml-17 {
    margin-left: 17px;
}

.xhm-mt-18 {
    margin-top: 18px;
}

.xhm-mr-18 {
    margin-right: 18px;
}

.xhm-mb-18 {
    margin-bottom: 18px;
}

.xhm-ml-18 {
    margin-left: 18px;
}

.xhm-mt-19 {
    margin-top: 19px;
}

.xhm-mr-19 {
    margin-right: 19px;
}

.xhm-mb-19 {
    margin-bottom: 19px;
}

.xhm-ml-19 {
    margin-left: 19px;
}

.xhm-mt-20 {
    margin-top: 20px;
}

.xhm-mr-20 {
    margin-right: 20px;
}

.xhm-mb-20 {
    margin-bottom: 20px;
}

.xhm-ml-20 {
    margin-left: 20px;
}

.xhm-pt-1 {
    padding-top: 1px;
}

.xhm-pr-1 {
    padding-right: 1px;
}

.xhm-pb-1 {
    padding-bottom: 1px;
}

.xhm-pl-1 {
    padding-left: 1px;
}

.xhm-pt-2 {
    padding-top: 2px;
}

.xhm-pr-2 {
    padding-right: 2px;
}

.xhm-pb-2 {
    padding-bottom: 2px;
}

.xhm-pl-2 {
    padding-left: 2px;
}

.xhm-pt-3 {
    padding-top: 3px;
}

.xhm-pr-3 {
    padding-right: 3px;
}

.xhm-pb-3 {
    padding-bottom: 3px;
}

.xhm-pl-3 {
    padding-left: 3px;
}

.xhm-pt-4 {
    padding-top: 4px;
}

.xhm-pr-4 {
    padding-right: 4px;
}

.xhm-pb-4 {
    padding-bottom: 4px;
}

.xhm-pl-4 {
    padding-left: 4px;
}

.xhm-pt-5 {
    padding-top: 5px;
}

.xhm-pr-5 {
    padding-right: 5px;
}

.xhm-pb-5 {
    padding-bottom: 5px;
}

.xhm-pl-5 {
    padding-left: 5px;
}

.xhm-pt-6 {
    padding-top: 6px;
}

.xhm-pr-6 {
    padding-right: 6px;
}

.xhm-pb-6 {
    padding-bottom: 6px;
}

.xhm-pl-6 {
    padding-left: 6px;
}

.xhm-pt-7 {
    padding-top: 7px;
}

.xhm-pr-7 {
    padding-right: 7px;
}

.xhm-pb-7 {
    padding-bottom: 7px;
}

.xhm-pl-7 {
    padding-left: 7px;
}

.xhm-pt-8 {
    padding-top: 8px;
}

.xhm-pr-8 {
    padding-right: 8px;
}

.xhm-pb-8 {
    padding-bottom: 8px;
}

.xhm-pl-8 {
    padding-left: 8px;
}

.xhm-pt-9 {
    padding-top: 9px;
}

.xhm-pr-9 {
    padding-right: 9px;
}

.xhm-pb-9 {
    padding-bottom: 9px;
}

.xhm-pl-9 {
    padding-left: 9px;
}

.xhm-pt-10 {
    padding-top: 10px;
}

.xhm-pr-10 {
    padding-right: 10px;
}

.xhm-pb-10 {
    padding-bottom: 10px;
}

.xhm-pl-10 {
    padding-left: 10px;
}

.xhm-pt-11 {
    padding-top: 11px;
}

.xhm-pr-11 {
    padding-right: 11px;
}

.xhm-pb-11 {
    padding-bottom: 11px;
}

.xhm-pl-11 {
    padding-left: 11px;
}

.xhm-pt-12 {
    padding-top: 12px;
}

.xhm-pr-12 {
    padding-right: 12px;
}

.xhm-pb-12 {
    padding-bottom: 12px;
}

.xhm-pl-12 {
    padding-left: 12px;
}

.xhm-pt-13 {
    padding-top: 13px;
}

.xhm-pr-13 {
    padding-right: 13px;
}

.xhm-pb-13 {
    padding-bottom: 13px;
}

.xhm-pl-13 {
    padding-left: 13px;
}

.xhm-pt-14 {
    padding-top: 14px;
}

.xhm-pr-14 {
    padding-right: 14px;
}

.xhm-pb-14 {
    padding-bottom: 14px;
}

.xhm-pl-14 {
    padding-left: 14px;
}

.xhm-pt-15 {
    padding-top: 15px;
}

.xhm-pr-15 {
    padding-right: 15px;
}

.xhm-pb-15 {
    padding-bottom: 15px;
}

.xhm-pl-15 {
    padding-left: 15px;
}

.xhm-pt-16 {
    padding-top: 16px;
}

.xhm-pr-16 {
    padding-right: 16px;
}

.xhm-pb-16 {
    padding-bottom: 16px;
}

.xhm-pl-16 {
    padding-left: 16px;
}

.xhm-pt-17 {
    padding-top: 17px;
}

.xhm-pr-17 {
    padding-right: 17px;
}

.xhm-pb-17 {
    padding-bottom: 17px;
}

.xhm-pl-17 {
    padding-left: 17px;
}

.xhm-pt-18 {
    padding-top: 18px;
}

.xhm-pr-18 {
    padding-right: 18px;
}

.xhm-pb-18 {
    padding-bottom: 18px;
}

.xhm-pl-18 {
    padding-left: 18px;
}

.xhm-pt-19 {
    padding-top: 19px;
}

.xhm-pr-19 {
    padding-right: 19px;
}

.xhm-pb-19 {
    padding-bottom: 19px;
}

.xhm-pl-19 {
    padding-left: 19px;
}

.xhm-pt-20 {
    padding-top: 20px;
}

.xhm-pr-20 {
    padding-right: 20px;
}

.xhm-pb-20 {
    padding-bottom: 20px;
}

.xhm-pl-20 {
    padding-left: 20px;
}.xhm-system-error {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
    border: 1px solid #f00;
    border-radius: 6px;
    background-color: #ffdaf2;
    overflow: hidden;
}

.xhm-system-error p {
    margin: 20px 20px 20px 20px;
}/* 規約表示 */
.xhm-terms {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-terms p {
    margin: 10px 0 0 0;
}

.xhm-terms [type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

.xhm-terms [type="checkbox"] + .xhm-terms-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 10px 0;
}

.xhm-terms [type="checkbox"] + .xhm-terms-label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: top;
    position: relative;
    margin: 0 5px 0 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
  	min-width : 17px ;
}

.xhm-terms [type="checkbox"]:checked + .xhm-terms-label:before {
    background-color: #3197ee;
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.xhm-terms [type="checkbox"]:focus + .checkbox-label:before {
    outline: none;
    border-color: #3197ee;
}

.xhm-terms [type="checkbox"]:disabled + .checkbox-label:before {
    -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.xhm-terms [type="checkbox"] + .checkbox-label:empty:before {
    margin-right: 0;
}

.xhm-terms.xhm-terms-no-break [type="checkbox"] + .xhm-terms-label {
    margin: 10px 0 0 15px;
}/* テキストエリア */
.xhm-text-area {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-text-area textarea {
    width: 100%;
    resize: none;
    outline: none;
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 767px) {
    .xhm-text-area textarea {
        margin-top: 0;
    }
}

.xhm-text-area p {
    margin-top: 0;
    padding: 0;
}

@media screen and (min-width: 767px) {
    .xhm-text-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}/* テキストフィールド */
.xhm-text-field {
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-text-field input {
    width: 100%;
    margin-top: 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 767px) {
    .xhm-text-field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .xhm-text-field input {
        margin-top: 0;
    }
}/* テキスト */
.xhm-text {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-text p {
    margin-top: 5px;
    margin-bottom: 5px;
    /*font-size: 16px;*/
    font-weight: normal;
    line-height: 1.8;
    color: black;
}/* タイトル */
.xhm-title {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    /*font-size: 18px;*/
    font-weight: bold;
    line-height: 1.8;
    color: black;
}

@media screen and (min-width: 767px) {
    .xhm-title {
        margin: 0;
    }
}/* 年月 */
.xhm-year-and-month {
    margin-top: 20px;
    margin-bottom: 30px;
}

.xhm-year-and-month-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: 0 0 15px 0;
}

.xhm-year-and-month-select select {
    width: 100%;
    padding: 10px;
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media screen and (min-width: 768px) {
    .xhm-year-and-month-select select {
        min-width: 140px;
    }
}

.xhm-year-and-month-select select::-ms-expand {
    display: none;
}

.xhm-year-and-month-select label {
    margin: 0 0 0 10px;
}

.xhm-year-and-month-select:after {
    content: url(/form/img/arrow_down.png);
    position: absolute;
    top: 60%;
    right: 40px;
    color: #8c8c8c;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}