@charset "utf-8";
/* ----------------------------------------------------------------------------------------
* Author        : FUJITA KANKO
* File          : Common CSS file
* ---------------------------------------------------------------------------------------- */

/* INDEX
------------------------------------------

01. Reset

02. Html format

03. Short codes

04. Common

05. Header

06. Footer

07. Fix nav

08. Main

09. Form

10. Notice & Modal

11. Iframe

12. Web view
------------------------------------------ */

/* ----------------------------------------------------------------------------------------
                     01. Reset
 -------------------------------------------------------------------------------------- */
/*html,
body {
  height: 100%;
}

html {
  overflow-y: scroll;
  font-size: 62.5%;
}

body {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.4rem;/*14px
    line-height: 1.5;
    color: #333;
    /*mobile用文字サイズ調整
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust:100%;
    text-size-adjust:100%;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1.2rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    color: inherit;
    line-height: 1;
}

a, p {
	margin: 0;
}

ul,
li {
	margin: 0;
	padding: 0;
}

ol,
ul {
    list-style: none;
}

img {
	display: block;
}

form {
    margin: 0;
}
*/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

* {
    border:0;
    margin:0;
    outline:0;
    padding:0;
    background:none;
    font:inherit;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    text-decoration:none;
    vertical-align:baseline;
}

::before,
::after {
    box-sizing:border-box;
}

html {font-size:62.5%;/*10px*/}

body {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size:1.4rem;/*14px*/
    line-height:1.5;
    position:relative;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1.2rem;
    }
}

article, aside, dialog, figure, footer, header, main, nav, section {display:block;}
audio, canvas, video {display:inline-block;}

br,
hr {display:block;}

ol,
ul {list-style:none;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}

input,
select {vertical-align:middle;}

img {display:block;}
/* ----------------------------------------------------------------------------------------
                     02. Html format
 -------------------------------------------------------------------------------------- */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: #1c50a1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: opacity .3s ease 0s;
    transition: opacity .3s ease 0s;
    outline: none;
}

a[disabled] {
    pointer-events: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

/* ----------------------------------------------------------------------------------------
                     03. Short codes
 -------------------------------------------------------------------------------------- */
.m-xs{margin:12px;}.m-s{margin:24px;}.m-m{margin:48px;}.m-l{margin:60px;}.m-xl{margin:72px;}
.mt-xs{margin-top:12px;}.mt-s{margin-top:24px;}.mt-m{margin-top:48px;}.mt-l{margin-top:60px;}.mt-xl {margin-top:72px;}
.mr-xs{margin-right:12px;}.mr-s{margin-right:24px;}.mr-m{margin-right:48px;}.mr-l{margin-right: 60px;}.mr-xl{margin-right:72px;}
.mb-xs{margin-bottom:12px;}.mb-s{margin-bottom:24px;}.mb-m{margin-bottom:48px;}.mb-l{margin-bottom:60px;}.mb-xl{margin-bottom:72px;}
.ml-xs{margin-left:12px;}.ml-s{margin-left:24px;}.ml-m{margin-left:48px;}.ml-l{margin-left: 60px;}.ml-xl{margin-left:72px;}
/*padding*/
.p-xs{padding:12px;}.p-s{padding:24px;}.p-m{padding:48px;}.p-l{padding:60px;}.p-xl{padding:72px;}
.pt-xs{padding-top:12px;}.pt-s{padding-top:24px;}.pt-m{padding-top:48px;}.pt-l{padding-top: 60px;}.pt-xl{padding-top:72px;}
.pr-xs{padding-right:12px}.pr-s{padding-right:24px}.pr-m{padding-right:48px}.pr-l{padding-right: 60px;}.pr-xl{padding-right:72px;}
.pb-xs{padding-bottom:12px;}.pb-s{padding-bottom:24px;}.pb-m{padding-bottom:48px;}.pb-l{padding-bottom:60px;}.pb-xl{padding-bottom:72px;}
.pl-xs{padding-left:12px;}.pl-s{padding-left:24px;}.pl-m{padding-left:48px;}.pl-l{padding-left: 60px;}.pl-xl{padding-left:72px;}

@media screen and (max-width: 768px) {
    .m-xs{margin:8px;}.m-s{margin:12px;}.m-m{margin:24px;}.m-l{margin:30px;}.m-xl{margin:36px;}
    .mt-xs{margin-top:8px;}.mt-s{margin-top:12px;}.mt-m{margin-top:24px;}.mt-l{margin-top:30px;} .mt-xl{margin-top:36px;}
    .mr-xs{margin-right:8px;}.mr-s{margin-right:12px;}.mr-m{margin-right:24px;}.mr-l{margin-right: 30px;}.mr-xl{margin-right:36px;}
    .mb-xs{margin-bottom:8px;}.mb-s{margin-bottom:12px;}.mb-m{margin-bottom:24px;}.mb-l{margin-bottom:30px;}.mb-xl{margin-bottom:36px;}
    .ml-xs{margin-left:8px;}.ml-s{margin-left:12px;}.ml-m{margin-left:24px;}.ml-l{margin-left:30px;}.ml-xl{margin-left:36px;}
    /*padding*/
    .p-xs{padding:8px;}.p-s{padding:12px;}.p-m{padding:24px;}.p-l{padding:30px;}.p-xl{padding:36px;}
    .pt-xs{padding-top:8px;}.pt-s{padding-top:12px;}.pt-m{padding-top:24px;}.pt-l{padding-top:30px;}.pt-xl{padding-top:36px;}
    .pr-xs{padding-right:8px;}.pr-s{padding-right:12px;}.pr-m{padding-right:24px;}.pr-l{padding-right:30px;}.pr-xl{padding-right:36px;}
    .pb-xs{padding-bottom:8px;}.pb-s{padding-bottom:12px;}.pb-m{padding-bottom:24px;}.pb-l{padding-bottom:30px;}.pb-xl{padding-bottom:36px;}
    .pl-xs{padding-left:8px;}.pl-s{padding-left:12px;}.pl-m{padding-left:24px;}.pl-l{padding-left:30px;}.pl-xl{padding-left:36px;}
}

.no-gatter {
	padding-left: 0;
	padding-right: 0;
}

.underline {
    text-decoration: underline;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.bold {
	font-weight: 600;
}

.font-min {
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  font-feature-settings: "palt";
}

@media screen and (max-width: 768px){
  .tab-none {
    display: none!important;
  }
}

@media screen and (max-width: 559px) {
  .sp-none {
    display: none!important;
  }
}

.clearfix {
    display: block;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

/* ----------------------------------------------------------------------------------------
                        04. Common
* --------------------------------------------------------------------------------------- */
/*change20230202:100vh→100svh*/
body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    position: relative;
    color: #011940;
    background-color: #f1f1f1;
}

/*Android Crome対策0613*/
body:has(iframe#frame) {
    overflow: hidden;
}

.btn {
    padding: 8px 0;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 5px;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  opacity: 0.8;
}

.btn:focus {
  outline: 0;
}

.btn.btn-normal,
.btn.btn-secondary,
.btn.btn-primary {
  width: 300px;
}

@media screen and (max-width: 768px) {
    .btn.btn-normal,
    .btn.btn-secondary,
	.btn.btn-primary {
      width: 100%;
    }
}

.btn.btn-normal {
  color: #fff;
  background-color: #011940;
}

.btn.btn-secondary {
  color: #011940;
  background-color: #fff;
  border: 1px solid #011940;
}

.btn.btn-primary {
	color: #fff;
	background-color: #A29356;
}

.btn a,
.btn button {/*add20200519*/
  width: 100%;
  display: block;
  color: #fff;
  text-decoration: none;
}

a.btn {
    text-decoration: none;
}

.btn[disabled] {
    pointer-events: none;
    background-color: #999999;
}

.btn-area {
    display: flex;
    justify-content: center;
	column-gap: 24px;/*add20230216*/
    margin-top: 24px;
    text-align: center;
}

@media screen and (max-width: 768px) {
  .btn-area {
      flex-direction: column;
	  row-gap: 12px;/*add20230216*/
  }
}

/*
body:not(.home) section li {
  padding-left: 8px;
  margin-bottom: 6px;
}

body:not(.home) section li:before {
  content: '●';
}

body:not(.home) section li:last-child {
  margin-bottom: 0;
}
*/

body[data-status="hidden"] {
  visibility: hidden;
}

body:not([data-status])  [data-error] {
  display: none;
}

.arrow-link {
    display: inline-block;
    font-size: 1.2rem;
    background: url(../images/arrow-forward.png) no-repeat center right;
    padding-right: 12px;
}

/*シーン別表示非表示*/
body.normal .item-scene-normal,
body.normal-edit .item-scene-normal-edit,
body.fgmc .item-scene-fgmc,
body.other .item-scene-other,
body.local .item-scene-local,
body.local-edit .item-scene-local-edit,
body.update .item-scene-update,
body.non-member .item-scene-non-member,
body:not(.non-member) .item-scene-member {
    display: block;
}

body:not(.normal) .item-scene-normal,
body:not(.normal-edit) .item-scene-normal-edit,
body:not(.fgmc) .item-scene-fgmc,
body:not(.other) .item-scene-other,
body:not(.local) .item-scene-local,
body:not(.local-edit) .item-scene-local-edit,
body:not(.update) .item-scene-update,
body:not(.non-member) .item-scene-non-member,
body.non-member .item-scene-member {
    display: none;
}

/* -------------------------------------------------------------------------------------- *
                        05. Header
* --------------------------------------------------------------------------------------- */
.header {
    width: 100%;
    position: relative;
    height: 96px;
    display: flex;
    justify-content: space-between;
	align-items: center;
    background: #fff;
}

@media screen and (max-width: 768px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        height: 60px;
		z-index: 20;
    }
}

.header-l {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .header-l {
        margin: auto;
    }
}

.header-back {
    display: none;
    /*position: absolute;
    top: calc((48px / 2) - 9px);
    left: 12px;*/
}

.header-back img {
	width: 19px;
	height: 13px;
}

.header-logo {
    max-width: 222px;
    width: 100%;
    margin: 0 24px;
}

@media screen and (max-width: 768px) {
    .header-logo {
        display: none;
    }
}

.header-tit {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-tit {
        display: block;
        font-size: 1.4rem;
    }
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin-left: 24px;
}

.main-nav a {
    font-weight: bold;
    color: #011940;
}

.header-r {}

/*ログアウト・ログインボタン*/
.logout,
.login {
	display: none;
}

body:not(.non-member) .logout,
body.non-member .login {
	display: block;
	position: absolute;
    top: calc((95px / 2) - 12px);
    right: 24px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    body:not(.non-member) .logout,
	body.non-member .login {
		top: calc((60px / 2) - 15px);
		right: 12px;
		z-index: 20;
    }
}

.logout-icon,
.login-icon {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.logout-icon,
	.login-icon {
		flex-direction: column;
	}
}

.logout img {
	width: 16.5px;
	height: 12px;
	margin-right: 4px;
}

.login img {
	width: 20px;
	height: 12px;
	margin-right: 4px;
}

@media screen and (max-width: 768px) {
	.logout img,
	.login img {
		margin-right: 0;
	}
}

.logout span,
.login span {
	font-size: 1.4rem;
	letter-spacing: -1px;
	color: #011940;
}

@media screen and (max-width: 768px) {
	.logout span,
	.login span {
		margin-top: 3px;
	    font-size: 1.1rem;
	}
}

/* ----------------------------------------------------------------------------------------
                        06. Footer
* --------------------------------------------------------------------------------------- */
.footer {
    padding: 24px 0;
    text-align: center;
    background-color: #011940;
}

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

.footer small {
    color: #fff;
    font-size: 1.1rem;
}

/* ----------------------------------------------------------------------------------------
                        07. Fix nav
* --------------------------------------------------------------------------------------- */
.fix-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	z-index: 100;
    background: #163A74;
}

@media screen and (max-width: 768px) {
    .fix-nav {
        display: block;
    }
}

.fix-nav ul {
    display: flex;
    justify-content: space-between;
}

.fix-nav li {
    flex-grow: 1;
}

.fix-nav li a {
    position: relative;
    display: block;
    height: 64px;
    font-size: 10px;
    /*-webkit-transform: scale(0.9);*/
    /*-webkit-transform-origin:0 0;*/
    letter-spacing: -1px;
    text-align: center;
    color: #fff;
}

.fix-nav li.current a {
    color: #fff;
}

.fix-nav li:first-child a::before {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 31px;
    height: 27px;
    background-image: url(../images/icon-house.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.fix-nav li:nth-of-type(2) a::before {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 32px;
    height: 21px;
    background-image: url(../images/icon-coupon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.fix-nav li:nth-of-type(3) a::before {
    content: '';
    position: absolute;
    bottom: 29px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 30px;
    height: 25.5px;
    background-image: url(../images/icon-stamp.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.fix-nav li:nth-of-type(4) a::before {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 27px;
    height: 30px;
    background-image: url(../images/icon-calendar.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* .fix-nav li:nth-of-type(4) a::before {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 25px;
    height: 30px;
    background-image: url(../images/icon-clock.png);
    background-size: contain;
    background-repeat: no-repeat;
} */

.fix-nav li:last-child a::before {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 22px;
    height: 28px;
    background-image: url(../images/icon-user.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.fix-nav li:first-child a::after,
.fix-nav li:nth-of-type(2) a::after,
.fix-nav li:nth-of-type(3) a::after,
.fix-nav li:nth-of-type(4) a::after,
.fix-nav li:last-child a::after {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.fix-nav li:first-child a::after {
    content: 'TOP';
}

.fix-nav li:nth-of-type(2) a::after {
    content: 'クーポン一覧';
}

.fix-nav li:nth-of-type(3) a::after {
    content: 'スタンプカード';
}

.fix-nav li:nth-of-type(4) a::after {
    content: 'ご宿泊予約確認';
}

/* .fix-nav li:nth-of-type(4) a::after {
    content: 'ご宿泊履歴';
} */

.fix-nav li:last-child a::after {
    content: 'お客様情報';
}

/* ----------------------------------------------------------------------------------------
                        08. Main
* --------------------------------------------------------------------------------------- */
main {
    min-height: calc(100vh - 165px);
    min-height: calc(100svh - 165px);
}

@media screen and (max-width: 768px) {/*旧iOSスクロールバグ対策のため追加*/
    main {
        overflow-y: scroll;
        height: 100vh;
        height: 100svh;
        /*padding-bottom: 96px;*/
    }
}

.wrap-l {
    width: 1012px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1012px){
    .wrap-l {
        width: 96%;
    }
}

.wrap-s {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px){
    .wrap-l,
    .wrap-s {
        padding-top: 84px;
        padding-bottom: 96px;
    }

    .wrap-s {
        width: 96%;
    }
}

.wrap-l p,
.wrap-s p {
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    .wrap-l p,
    .wrap-s p {
        font-size: 1.4rem;
    }
}

.heading {
    padding: 12px 24px;
    font-size: 1.8rem;
	line-height: 1;
    font-weight: bold;
    background-color: #fff;
    border-top: 3px solid #011940;
}

@media screen and (max-width: 768px) {
    .heading {
        padding: 8px 12px;
		font-size: 1.6rem;
    }
}

.pc-tit {
    padding: 6px 0 6px 12px;
    margin-bottom: 24px;
    border-left: 8px solid #011940;
}

@media screen and (max-width: 768px) {
  .pc-tit {
    display: none;
  }
}

.pc-tit p {
  font-size: 2.8rem;
  font-weight: bold;
}

p.em-txt {
    font-size: 2rem;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    p.em-txt {
        font-size: 1.8rem;
    }
}

span.red-txt,
p.red-txt {
    color: #CC0001;
}

.container-blue {
    background-color: #EAF3FD;
}

@media screen and (max-width: 768px) {
	.container-blue {
	    padding: 12px 12px 36px;
	}
}

.container-red {
    background-color: #FBE5E8;
}

.container-white {
	background-color: #fff;
}

/* ----------------------------------------------------------------------------------------
                        09. Form
* --------------------------------------------------------------------------------------- */
.form-table {
    width: 100%;
    table-layout: fixed;/*IEテーブルバグ対策*/
}

tbody {
    width: 100%;
    max-width: 100%;
}

.form-table tr {
    width: 100%;
    display: flex;
}

.form-table th {
    display: block;
    line-height: 1;
    font-weight: normal;
}

.form-table td {
    width: 100%;
    display: block;
    font-size: 1.2rem;
}

.form-table td[colspan] {
    /*display: flex;
    flex-wrap: wrap;
    align-items: center;*/
}

.form-table td:nth-child(2) {
    margin-left: 12px;
}

.form-table td label {
    display: inline-block;
    width: 100%;
    font-size: 1.2rem;
    font-weight: bold;
}

.form-table td label .marker {
    padding: 0 4px;
    margin-left: 4px;
    color: #fff;
    background-color: #CC0001;
    font-size: 0.8rem;
}

.form-table td div {
  width: 100%;
  max-width: 100%;
}

p.supple-txt,
span.supple-txt {
    display: block;
    margin-top: 8px;
    max-height: 100%;
    font-size: 1.1rem;
}

.form-table td [data-unit-error] {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    color: #CC0001;
}

.form-table td ul {
  display: flex;
}

.form-control {
    width: 100%;
    height: auto;
    outline: 0 !important;
    padding: 6px 12px;
    vertical-align: top;
    background-color: #fff;
    border: 1px solid #BABABB;
    line-height: 22px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;
}

.form-control:disabled[readonly] {
    background-color: #E5E5E5;
}

.form-table input:focus,
.form-table textarea:focus {
    color: #495057;
    border-color: #80bdff;
    outline:0; box-shadow: 0 0 0.2rem rgba(0,123,255,.25)
}

select.form-control  {
    margin-right: 8px;
    background-image: url(../images/arrow-down.png);
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.form-table select.year {
    width: 20%;
    vertical-align: middle;
    margin-right: 4px;
}

@media screen and (max-width: 768px) {
	.form-table select.year {
		width: calc(100% / 3);
	}
}

.form-table select.month,
.form-table select.day {
    margin-left: 20px;
    margin-right: 4px;
    width: 20%;
}

@media screen and (max-width: 768px) {
    .form-table select.month,
    .form-table select.day {
        margin-left: 12px;
    }
}

/*ラジオボタンデザイン*/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

[type="radio"]:checked + span,
[type="radio"]:not(:checked) + span {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1.2rem;
    font-weight: normal;
    -webkit-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[type="radio"]+span::before,
[type="radio"]+span::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    transition: .28s ease;
}

[type="radio"]:checked + span::before,
[type="radio"]:not(:checked) + span::before,
[type="radio"]:checked + span::after,
[type="radio"]:not(:checked) + span::after {
    border-radius: 50%;
}

[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
    border: 2px solid #BABABB;
    background-color: #fff;
}

[type="radio"]:not(:checked)+span:after {
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after {
    border: 2px solid #1c50a1;
    background-color: #fff;
}

[type="radio"]:checked +span:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    background-color: #1c50a1;
}

::placeholder {
    color: #b3b3b3;
}

.error-sign {
    padding: 8px 0;
    text-align: center;
    border: 1px solid #CC0001;
    color: #CC0001;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #F6DFDF;
}

.error-required,
.error-email,
.error-email-check,
.error-phone,
.error-password,
.error-password-check {
    color: #CC0001;
}

.form-control.error {
    color: #CC0001;
    border: 1px solid #CC0001;
}

select option {/*エラー時の文字色対策*/
    color: #000;
}

.required-marker {
    margin-left: 4px;
    padding: 1px 3px;
    font-size: 0.5rem;
    color: #fff;
    background-color: #F36171;
}

.already {
    padding: 6px 12px;
    vertical-align: top;
    font-size: 1.2rem;
    background-color: #E5E5E5;
    border: 1px solid #999999;
}

[data-length="0"] {
    display: none;
}

/* ----------------------------------------------------------------------------------------
                        10. Notice & Modal
* --------------------------------------------------------------------------------------- */
.notice {
    margin-top: 24px;
    padding: 12px;
    background-color: #F0DEDC;
    border: 1px solid #E9D7D7;
}

.notice h3 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: bold;
}

.notice p {
    font-size: 0.875rem;
}

.modal {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    height: 100svh;
    top: 0;
    left: 0;
    z-index: 200;
}

.modal.error {
	display: block;
}

.modal-bg {
    position: absolute;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background: rgba(0,0,0,0.8);
}

.modal-inner{
    position: absolute;
    max-width: 600px;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #EAF3FD;
    overflow-y: auto;
    max-height: 90%;
}

@media screen and (max-width: 559px) {/*add20200520*/
    .modal-inner{
        width: 92%;
    }
}

.modal.error .modal-inner {
	text-align: center;
	background-color: #f6dfdf;
}

.modal.error .modal-inner img {
	width: 82px;
	height: 72px;
	margin: auto;
}

/*webview時*/
body.app .modal.error .btn.btn-secondary {
    display: none;
}

.btn-close {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 12px;
    top: 8px;
}

@media screen and (max-width: 559px) {
    .btn-close {
        right: 8px;
        top: 4px;
        margin-top: 0;
    }
}

.btn-close span {
    width: 32px;
    height: 1px;
    display: block;
    background-color: #707070;
}

.btn-close span:first-child {
    margin-top: 14px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn-close span:last-child {
    width: 32px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #707070;
}

.modal-inner .heading {
	padding: 12px 34px 12px 24px;
}

@media screen and (max-width: 768px) {
	.modal-inner .heading {
		padding: 8px 34px 8px 12px;
	}
}

.modal-inner h3 {
    margin-bottom: 24px;
    font-size: 1.5rem;
    font-weight: bold;
}

.modal-inner .btn-area {
    display: flex;
    justify-content: space-between;
}

.modal-inner .btn-area a:only-child,
.modal-inner .btn-area form:only-child {
    margin: 0 auto;
}

/*add20230202:btn-areaに不要margin発生のためコメントアウト
@media screen and (max-width: 768px) {
	.modal-inner .btn-area a:only-child,
	.modal-inner .btn-area form:only-child {
        margin: inherit;
	}
}*/

/*
.modal-inner .btn.btn-normal,
.modal-inner .btn.btn-primary,
.modal-inner .btn.btn-secondary {
    width: 100%;
}
*/
.modal-txt {
    padding: 24px;
    border-radius: 5px;
    background-color: #fff;
}

@media screen and (max-width: 559px) {
    .modal-txt {
        padding: 12px;
    }
}

.modal-txt p {
    margin-bottom: 24px;
}

.modal-txt ol > li {
    margin-bottom: 12px;
}

.modal-txt ul li {
    list-style: disc;
}

#modalLogout p {
	text-align: center;
	font-size: 1.6rem;
}

#modalLogout .btn-area {}

@media screen and (max-width: 768px) {
	#modalLogout .btn-area {
		flex-direction: row;
	}
}

#modalLogout .btn-area .btn {
	width: 48%;
}

/* ----------------------------------------------------------------------------------------
                        11. Iframe
* --------------------------------------------------------------------------------------- */
.making.loading {
    position:               fixed;
    z-index:                2147483647;
    top:                    0;
    left:                   0;
    width:                  100vw;
    height:                 100vh;
    height:                 100svh;
    /*background-image:       url(../images/loader.gif);*/
    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-position:    center center;
}

.making.loading:not([data-mode="on"]) {
    display: none;
}

iframe#frame {
    position:           fixed;
    /*vv 2021年12月28日, tetsuya.yamane, firefox vv*/
    z-index:            3;
    /*z-index:            2;*/
    /*^^ 2021年12月28日, tetsuya.yamane, firefox ^^*/
    top:                0;
    left:               0;
    width:              100vw;
    height:             100%;
    border:             none;
    background-color:   #F1F1F1;
    /*Android Cromeスクロールレンダリング対策0612*/
    height: 100dvh;
    transform: translateZ(0); /* リペイントを強制 */
}

/*vv 2021年12月28日, tetsuya.yamane, firefox vv*/
iframe#frame + iframe#frame {
    z-index:            2;
}
/*^^ 2021年12月28日, tetsuya.yamane, firefox ^^*/

/*vv 2021年12月28日, tetsuya.yamane, firefox vv*/
iframe#frame + iframe#frame,
/*^^ 2021年12月28日, tetsuya.yamane, firefox ^^*/
.invisible {
    display: none;
}

/* ----------------------------------------------------------------------------------------
                        12. Web view
* --------------------------------------------------------------------------------------- */
body.app .header {
    display: none;
}

body.app .fix-nav {
    display: none;
}

.sub-header {
    display: none;
}

@media screen and (max-width: 768px) {
    body.app .sub-header {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 44px;
        background-color: #fff;
        z-index: 5;
    }

    body.app.iphone .sub-header {
        /*top: 117px;*/
    }

    body.app.android .sub-header {
        /*top: 84px;*/
    }
}

body.app .sub-header::after {
    content: '';
    display: block;
    width: 40px;
    height: 0;
}

.sub-header form {
    margin-left: 10px;
}

.sub-header img {
    width: 30px;
    height: 30px;
}

.sub-header p {
    font-weight: bold;
}

body.app.iphone .wrap-l,
body.app.iphone .wrap-s {
    /*padding-top: 141px;/*appheader117px + margin24px*/

    padding-top: 24px;
}

body.app.android .wrap-l,
body.app.android .wrap-s {
    /*padding-top: 108px;/*appheader84px + margin24px*/

    padding-top: 24px;
}

body.app.iphone .sub-header + .wrap-l,
body.app.iphone .sub-header + .wrap-s {
    /*padding-top: 185px;/*appheader117px + subheader44px + margin24px*/

    padding-top: 68px;/*subheader44px + margin24px*/
}

body.app.android .sub-header + .wrap-l,
body.app.android .sub-header + .wrap-s {
    /*padding-top: 152px;/*appheader84px + subheader44px + margin24px*/

    padding-top: 68px;
}