@charset "utf-8";
/* ----------------------------------------------------------------------------------------
* Author        : FJK Staff Appli
* File          : Common CSS file
* ---------------------------------------------------------------------------------------- */

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

01. Reset

02. Short codes

03. Common

04. Header css

05. Footer css

06. Contents css

07. Form style css

08. Notice & Modal css

09. Other

------------------------------------------ */

/* ----------------------------------------------------------------------------------------
                     01. Reset
 -------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    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;
}

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

body {
    font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "MS Ｐゴシック", "MS PGothic", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    font-size:1.6rem;/*16px*/
    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.4rem;
    }
}

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;}

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

img {
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
    font-style: italic;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: #000;
    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;
    -webkit-appearance: none;
    appearance: none;
}

/* ----------------------------------------------------------------------------------------
                   02. Short codes
-------------------------------------------------------------------------------------- */
:root {
    --space-basis: 12px;
}

.m-xs{margin:var(--space-basis);}.m-s{margin:calc(var(--space-basis)*2);}.m-m{margin:calc(var(--space-basis)*4);}.m-l{margin:calc(var(--space-basis)*5);}.m-xl{margin:calc(var(--space-basis)*6);}
.mt-xs{margin-top:var(--space-basis);}.mt-s{margin-top:calc(var(--space-basis)*2);}.mt-m{margin-top:calc(var(--space-basis)*4);}.mt-l{margin-top:calc(var(--space-basis)*5);}.mt-xl {margin-top:calc(var(--space-basis)*6);}
.mr-xs{margin-right:var(--space-basis);}.mr-s{margin-right:calc(var(--space-basis)*2);}.mr-m{margin-right:calc(var(--space-basis)*4);}.mr-l{margin-right: calc(var(--space-basis)*5);}.mr-xl{margin-right:calc(var(--space-basis)*6);}
.mb-xs{margin-bottom:var(--space-basis);}.mb-s{margin-bottom:calc(var(--space-basis)*2);}.mb-m{margin-bottom:calc(var(--space-basis)*4);}.mb-l{margin-bottom:calc(var(--space-basis)*5);}.mb-xl{margin-bottom:calc(var(--space-basis)*6);}
.ml-xs{margin-left:var(--space-basis);}.ml-s{margin-left:calc(var(--space-basis)*2);}.ml-m{margin-left:calc(var(--space-basis)*4);}.ml-l{margin-left: calc(var(--space-basis)*5);}.ml-xl{margin-left:calc(var(--space-basis)*6);}
/*padding*/
.p-xs{padding:var(--space-basis);}.p-s{padding:calc(var(--space-basis)*2);}.p-m{padding:calc(var(--space-basis)*4);}.p-l{padding:calc(var(--space-basis)*5);}.p-xl{padding:calc(var(--space-basis)*6);}
.pt-xs{padding-top:var(--space-basis);}.pt-s{padding-top:calc(var(--space-basis)*2);}.pt-m{padding-top:calc(var(--space-basis)*4);}.pt-l{padding-top:calc(var(--space-basis)*5);}.pt-xl{padding-top:calc(var(--space-basis)*6);}
.pr-xs{padding-right:var(--space-basis);}.pr-s{padding-right:calc(var(--space-basis)*2);}.pr-m{padding-right:calc(var(--space-basis)*4)}.pr-l{padding-right: calc(var(--space-basis)*5);}.pr-xl{padding-right:calc(var(--space-basis)*6);}
.pb-xs{padding-bottom:var(--space-basis);}.pb-s{padding-bottom:calc(var(--space-basis)*2);}.pb-m{padding-bottom:calc(var(--space-basis)*4);}.pb-l{padding-bottom:calc(var(--space-basis)*5);}.pb-xl{padding-bottom:calc(var(--space-basis)*6);}
.pl-xs{padding-left:var(--space-basis);}.pl-s{padding-left:calc(var(--space-basis)*2);}.pl-m{padding-left:calc(var(--space-basis)*4);}.pl-l{padding-left:calc(var(--space-basis)*5);}.pl-xl{padding-left:calc(var(--space-basis)*6);}

@media screen and (max-width: 768px) {
  .m-xs{margin:calc(var(--space-basis)*0.667);}.m-s{margin:var(--space-basis);}.m-m{margin:calc(var(--space-basis)*2);}.m-l{margin:calc(var(--space-basis)*2.5);}.m-xl{margin:calc(var(--space-basis)*3);}
  .mt-xs{margin-top:calc(var(--space-basis)*0.667);}.mt-s{margin-top:var(--space-basis);}.mt-m{margin-top:calc(var(--space-basis)*2);}.mt-l{margin-top:calc(var(--space-basis)*2.5);} .mt-xl{margin-top:calc(var(--space-basis)*3);}
  .mr-xs{margin-right:calc(var(--space-basis)*0.667);}.mr-s{margin-right:var(--space-basis);}.mr-m{margin-right:calc(var(--space-basis)*2);}.mr-l{margin-right: calc(var(--space-basis)*2.5);}.mr-xl{margin-right:calc(var(--space-basis)*3);}
  .mb-xs{margin-bottom:calc(var(--space-basis)*0.667);}.mb-s{margin-bottom:var(--space-basis);}.mb-m{margin-bottom:calc(var(--space-basis)*2);}.mb-l{margin-bottom:calc(var(--space-basis)*2.5);}.mb-xl{margin-bottom:calc(var(--space-basis)*3);}
  .ml-xs{margin-left:calc(var(--space-basis)*0.667);}.ml-s{margin-left:var(--space-basis);}.ml-m{margin-left:calc(var(--space-basis)*2);}.ml-l{margin-left:calc(var(--space-basis)*2.5);}.ml-xl{margin-left:calc(var(--space-basis)*3);}
  /*padding*/
  .p-xs{padding:calc(var(--space-basis)*0.667);}.p-s{padding:var(--space-basis);}.p-m{padding:calc(var(--space-basis)*2);}.p-l{padding:calc(var(--space-basis)*2.5);}.p-xl{padding:calc(var(--space-basis)*3);}
  .pt-xs{padding-top:calc(var(--space-basis)*0.667);}.pt-s{padding-top:var(--space-basis);}.pt-m{padding-top:calc(var(--space-basis)*2);}.pt-l{padding-top:calc(var(--space-basis)*2.5);}.pt-xl{padding-top:calc(var(--space-basis)*3);}
  .pr-xs{padding-right:calc(var(--space-basis)*0.667);}.pr-s{padding-right:var(--space-basis);}.pr-m{padding-right:calc(var(--space-basis)*2);}.pr-l{padding-right:calc(var(--space-basis)*2.5);}.pr-xl{padding-right:calc(var(--space-basis)*3);}
  .pb-xs{padding-bottom:calc(var(--space-basis)*0.667);}.pb-s{padding-bottom:var(--space-basis);}.pb-m{padding-bottom:calc(var(--space-basis)*2);}.pb-l{padding-bottom:calc(var(--space-basis)*2.5);}.pb-xl{padding-bottom:calc(var(--space-basis)*3);}
  .pl-xs{padding-left:calc(var(--space-basis)*0.667);}.pl-s{padding-left:var(--space-basis);}.pl-m{padding-left:calc(var(--space-basis)*2);}.pl-l{padding-left:calc(var(--space-basis)*2.5);}.pl-xl{padding-left:calc(var(--space-basis)*3);}
}

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

.underline {
    text-decoration: underline;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.bold {
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.list-disc {
    display: grid;
    grid-template-columns: auto;
    row-gap: 8px;
}

.list-disc li::before {
    position: relative;
    content: '';
    display: inline-block;
    top: -2px;
    left: 0;
    width: 12px;
    height: 12px;
    margin-right: 12px;
    border-radius: 100%;
    background: var(--main-color);
}

.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;
}

/* ----------------------------------------------------------------------------------------
                        03. Common css
* --------------------------------------------------------------------------------------- */
:root {
    /*color*/
    --blue: #1E51A2;
    --white: #fff;
    --blue-breeze: #618BEF;
    --blue-white: #F3F6FF;
    --black: #000;
    --gray: #666;
    --gray-pearl: #ccc;
    --gray-light: #EFEFEF;
    /*style*/
    --main-color: var(--blue);
    --base-color: var(--white);
    --accent-color: var(--blue-breeze);
    --sub-color-1: var(--blue-white);
    --sub-color-2: var(--gray-pearl);
    --sub-color-3: var(--gray-light);
    --text-color-1: var(--black);
    --text-color-2: var(--gray);
}

html {height: 100%;}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    color: var(--text-color-1);
    background-image: url('../images/common/bg.png');
    background-repeat: repeat;
    /*background: linear-gradient(0deg, rgba(97,139,239,1) 0%, rgba(30,81,162,1) 80%);*/
    /*background-color: var(--main-color);*/
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(97,139,239,1) 0%, rgba(30,81,162,1) 80%);
    mix-blend-mode: darken;
    z-index: -1;
}

a:focus,
a:hover {
    text-decoration: none;
}

.wrap > * a:hover {
    color: var(--accent-color);
}

.btn {
    display: inline-block;
    width: 100%;
    border-radius: 50px;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    -webkit-appearance: none; 
    appearance: none;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
    filter: brightness(0.7)  contrast(1.6);
}

.btn:focus {
    outline: 0;
}

/*.btn.btn-normal,
.btn.btn-primary,
.btn.btn-secondary {
    min-width: 310px;
}

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

.btn.btn-back {
    width: 120px;
}*/

.btn.btn-normal {
    color: var(--base-color);
    background-color: var(--main-color);
}

.btn.btn-primary {
    color: var(--base-color);
    background-color: var(--accent-color);
}

.btn.btn-secondary {
    color: var(--main-color);
    border: 1px solid var(--main-color);
    background-color: var(--sub-color-1);
}

.btn.btn-back {
    color: var(--text-color-2);
    background-color: var(--sub-color-2);
}

.btn a,
.btn button {
    width: 100%;
    display: block;
    color: var(--base-color);
    text-decoration: none;
}

a.btn,
a.btn:hover {
    color: var(--base-color);
    text-decoration: none;
}

.btn-area {
    /*display: flex;*/
    display: grid;
    column-gap: 24px;
    justify-content: center;
    align-items: center;
    margin: 48px auto 24px;
}

@media screen and (max-width: 768px) {
    .btn-area {
        column-gap: 24px;
    }
}

.btn-area.type1 {
    max-width: 599px;
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
    .btn-area.type1 {
        max-width: 100%;
    }
}

.btn-area.type2 {
    grid-template-columns: 1fr 1fr;
}

.btn-area.type3 {
    grid-template-columns: 1fr 2fr;
    
}

.btn-area.type1 .btn-back {
    max-width: 196px;
    margin: 0 auto;
}

.btn-area:only-child .btn-normal {
    width: 100%;
}

.btn-area .btn {
    padding: 18px;
}

/*.prevention_btn {追加依頼 ->250417 不要につき
    opacity: 0.3;
}*/

.font-min {
    font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

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

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

@media screen and (max-width: 599px) {
    .br-sp {
        display: none;
    }
}

.events-none {
    pointer-events: none;
}

/* -------------------------------------------------------------------------------------- *
                        04. Header area css
* --------------------------------------------------------------------------------------- */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
}

.header h1 {
    padding: 15px 0;
    color: var(--base-color);
    font-size: 1.2rem;
    font-weight: bold;
}

/* ----------------------------------------------------------------------------------------
                        06. Contents area css
* --------------------------------------------------------------------------------------- */
main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wrapper {
    height: 100%;
    padding: 24px 0;
    border-radius: 30px 30px 0 0;
    background-color: var(--base-color);
}

.container {
    width: 92%;
    margin-right: auto;
    margin-left: auto;
}

/*
.w-max {
    width: 92%;
}

.w-599 {
    width: 599px;
}

@media screen and (max-width: 768px)  {
    .w-599 {
        width: 92%;
    }
}
*/

.heading {
    margin-bottom: 12px;
    font-size: 2.4rem;
    font-weight: bold;
}

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

/* ----------------------------------------------------------------------------------------
                        07. Form style css
* --------------------------------------------------------------------------------------- */
.form-table {
    width: 100%;
}

fieldset {
    width: 100%;
    margin-bottom: 24px;
    min-inline-size: auto;
}

.form-table tbody {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%;
    max-width: 100%;
}

.form-table tr {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 4px;
}

.form-table th {
    text-align: left;
}

fieldset label,
.form-table th label {
    display: block;
    font-weight: bold;
}

fieldset span {
    display: block;
}

.form-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

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

.supple-txt {
    margin-top: 4px;
    max-height: 100%;
    color: #707070;
}

.form-table td span {
    display: block;
    width: 100%;
}

.form-control {
    width: 100%;
    height: auto;
    padding: 16px 12px;
    border-radius: 10px;
    border: 1px solid var(--sub-color-2);
    color: #666;
    background-color: var(--base-color);
    line-height: 19px;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

@media screen and (max-width: 768px) {
    .form-control {
        padding: 14px 12px;
    }
}

.form-control:focus {
    border:1px solid var(--accent-color);
    background: var(--sub-color-1);
}

.form-control:read-only {
    border: 1px solid var(--sub-color-2);
    background-color: var(--sub-color-3);
}

.select-list {
    width: 100%;
}

.select-list li {
    position: relative;
    display: flex;
    align-items: center;
}

.select-list li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--text-color-2);
}

.form-radio-area {
    display: flex;
    column-gap: 24px;
}

.form-radio-area input {
    display: none;
}

.form-radio-area input + span {
    display: inline-block;
	position: relative;
	margin-left: 10px;
	padding: 10px 0 10px 18px;
	border-radius: 2px;
	color: var(--main-color);
	cursor: pointer;
}

.form-radio-area input + span::before {
	position: absolute;
	top: 50%;
	left: -10px;
	width: 19px;
	height: 19px;
	content: "";
	margin-top: -10px;
	border: 1px solid var(--sub-color-1);
    background-color: var(--base-color);
}

.form-radio-area input:checked + span::before {
	border: 1px solid var(--main-color);
}

.form-radio-area input:checked + span::after {
	position: absolute;
	content: "";
	top: 50%;
    left: -6px;
    width: 11px;
    height: 11px;
    margin-top: -6px;
	background-color: var(--main-color);
}

.form-radio-area input + span::before,
.form-radio-area input:checked + span::after {
	border-radius: 50%;
}

input[type=checkbox] {
    display: none;
}

fieldset .item-checkbox {
    display: inline-block;
	position: relative;
    width: auto;
    padding: 4px 28px;
    cursor: pointer;
    font-weight: normal;
}

.item-checkbox::before {
	position: absolute;
    content: '';
    top: 50%;
    left: 5px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: #fff;
    border: 1px solid var(--text-color-2);
}

.item-checkbox::after {
	position: absolute;
    content: '';
    top: 50%;
    left: 10px;
    width: 5px;
    height: 10px;
    margin-top: -6px;
    border-right: 3px solid var(--main-color);
    border-bottom: 3px solid var(--main-color);
    opacity: 0;
    transform: rotate(45deg);
}

input[type=checkbox]:checked + .item-checkbox::after {
    opacity: 1;
}

::placeholder {
    color: #a3a3a3;
}

.error-sign {
    /* display: none; 240522kfmod 松浦さん承認済み修正 エラーメッセージを表示させるための処理*/
    margin-bottom: 24px;
    padding: 12px;
    border-radius: 15px;
    color: var(--base-color);
    background-color: #FF7A7A;
    text-align: left;
}

.error-sign.none {
    display: none;
}

.error-sign.block {
    display: block;
}

.error-sign-inner {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 8px;
    align-items: center;
}

.error-sign span {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
}

.error-sign img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.8px;
    height: 15px;
}

.error-required,
.error-email,
.error-phone,
.error-password,
[data-unit-error],
.error-txt {
    color: #FF0000;
}

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

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

/* ----------------------------------------------------------------------------------------
                        08. Notice & Modal area css
* --------------------------------------------------------------------------------------- */
.notice {
    margin-bottom: 24px;
    padding: 12px;
    border-radius: 15px;
    color: var(--base-color);
    background-color: #F5B811;
    text-align: left;
}

.notice-inner {
    display: flex;
    align-items: center;
}

.notice-inner span {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
}

.notice-inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 15px;
}

/*staff_app_modal.css補完*/
@media  screen and (max-width: 599px) {
    main .modal {
        padding: 0;
    }
}
.modal .modal-container {
    width: 599px;
}

@media screen and (max-width: 768px) {
    .modal .modal-container {
        width: 92%;
    }
}

.modal .modal-content {
    border-radius: 0 0 15px 15px;
}

.modal-heading {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    border-radius: 15px 15px 0 0;
    color: var(--base-color);
    background-color: var(--main-color);
    
}

.modal-heading h3 {
    font-weight: bold;
}

.modal-heading .btn-close {
    display: block;
    position: relative;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.btn-close::before, .btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 28px;
    border-radius: 3px;
    background-color: var(--base-color);
}

.btn-close::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.btn-close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

/* ----------------------------------------------------------------------------------------
                     09. Other
 -------------------------------------------------------------------------------------- */
/*userAgent*/
body.app .header,
body.app .main-heading,
body.app .footer {
    display: none;
}

body.app main {
    margin-top: 48px;
}

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

iframe.making {
    width: calc(100vw - 24px);
    height: 50vh;
}

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