@charset "utf-8";
@import "common.css";
.ef-pagetitle-wrap h1 > span{
    line-height: 1.5;
    display: flex;
    justify-content: center;
    gap: 0 1em;
    flex-wrap: wrap;
}
body:not(.webentrybody) .pagetitle{
	width: 100%;
	padding-top: clamp(40px,7.6923vw,40px);
	padding-bottom: clamp(40px,7.6923vw,40px);
	padding-left: 20px;
	padding-right: 20px;
	margin:0 auto;
	text-align: center;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}
body:not(.webentrybody) .pagetitle::before,
body:not(.webentrybody) .pagetitle::after,
body:not(.webentrybody) .pagetitle-wrap:before{
    content: none;
}

.efbody .container main{
    overflow-x: initial;
}
.efbody{
	padding-bottom: 140px;
}
.efbody .pagetitle-wrap{
	padding-top: 0;
}
.defbtn{
    display: inline-block;
    padding: 0.5em 2em;
    margin-right: 1em;
    font-size: 14px!important;
    border: 1px solid #afafaf;
    background: #f2f2f2;
    border-radius: 3px;
    transition: all .25s;
    cursor: pointer;
}
.defbtn:hover{
    background:#7a7a7a;
    border: 1px solid #7a7a7a;
    color: #fff;
}
/* 
   会社側の入力画面 
*/
.cominput section{
    width: 90%;
    margin-inline: auto;
    border: 1px solid var(--maincolor);
}
.cominput.list section{
    max-width: initial;
}
.cominput .width85{
    width: 100%;
    padding: 2em 2em 4em;
}
.cominput-nav{
    border-bottom: 1px solid var(--maincolor);
    position: sticky;
    top: -1px;
    background: #fff;
    z-index: 2;
    display: flex;
    align-items: center;
}
.cominput-nav button{
    margin-left: auto;
    height: 40px;
    padding-inline: 20px;
    border-radius: 10px;
    display: grid;
    place-content: center;
    color: #fff;
    background-color: var(--maindark);
    border: 2px solid var(--maindark);
    margin-right: 10px;
    cursor: pointer;
    transition: all .25s;
}
.cominput-nav button:hover{
    background-color:var(--mainlight);
    color: var(--maindark);
}
.cominput-navbtn{
    display: inline-block;
    padding: 1em 2em;
    border-right: 1px solid var(--maincolor);
    color: var(--maincolor);
    transition: all .25s;
}
span.cominput-navbtn{
    background-color: var(--maincolor);
    color: #fff;
}
a.cominput-navbtn:hover{
    background-color: var(--maincolor);
    color: #fff;
}
.cominput-mail .ef_inner-kakunin,
.cominput-mail form{
    display: flex;
    flex-wrap: wrap;
    gap: 10%;
}
.cominput-mail .ef_kakunin,
.cominput-mail .ef_koumoku{
    width: 45%;
}
.cominput-mail .borderred,
.cominput-mail .bordergreen,
.cominput-mail .ef_kakunin:has(.ef-checkbox),
.cominput-mail .ef_koumoku:has(.ef-checkbox),
.cominput-mail .ef_koumoku:has(input[type="file"]){
    width: 100%;
}
.cominput-mail .bordergreen{
    padding-top: 1.5em;
    border-top: 5px double var(--maincolor);
}
/* 
	form関連CSSここから
*/
form.ef_inner{
    overflow-x: clip;
}
.ef_koumoku{
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #ececec;
}
.ef-ninni::before{
	content: "任意";
	display: inline-block;
	padding: 2px 8px;
	background: #7a7a7a;
	color: #fff;
	border-radius: 2px;
	font-size: clamp(10.5px, 2.0192vw, 13px);
	position: relative;
	margin: 0 15px;
}
.ef-hissu::before{
	content: "必須";
	display: inline-block;
	padding: 2px 8px;
	background: var(--costred);
	color: #fff;
	border-radius: 2px;
	font-size: clamp(10.5px, 2.0192vw, 13px);
	position: relative;
	margin: 0 15px;
}
.ef-radio {
    display: flex;
    flex-wrap: wrap;
    gap: .7em 2em;
    border: none;
}

.ef-radio label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.ef-radio label::before,
.ef-radio label::after {
    border-radius: 50%;
    content: '';
}

.ef-radio label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #dee5eb;
    box-sizing: border-box;
}

.ef-radio label::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #dee5eb;
}

.ef-radio label:has(:checked)::after {
    background-color: #2589d0;
    animation: anim-ef-radio .3s linear;
}

@keyframes anim-ef-radio {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #2589d033;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.ef-radio input {
    display: none;
}
.ef-selectbox {
    position: relative;
}

.ef-selectbox::before,
.ef-selectbox::after {
    position: absolute;
    right: 15px;
    width: 9px;
    height: 6px;
    background-color: #535353;
    content: '';
    pointer-events: none;
}

.ef-selectbox::before {
    top: calc(50% - 9px);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ef-selectbox::after {
    bottom: calc(50% - 9px);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.ef-selectbox select {
    width: 100%;
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}
.ef-textbox-label,
.ef-textbox {
    color: #333;
}

.ef-textbox-label {
    display: block;
    margin-bottom: 7px;
    font-size: 1em;
}
.ef_koumoku *:not(.ef-textbox-label){
    font-size: 15px;
}
.ef-selectbox + label{
	display:block;
}
input[type="date"]{
	padding:5px;
	border: 1px solid #d0d0d0;
    width: 200px;
    background:#f7f7f7;
    position: relative;
}
input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
	opacity: 0;
}
.ef-textbox {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 1em;
    line-height: 1.5;
    margin-top: 7px;
}
.ef-textbox.minnum{
	width: 6em;
}
.ef-textbox.yearnum{
	width: 5em;
    font-size: 14px;
}
.ef-textbox.daynum{
	width: 3.75em;
    font-size: 14px;
}
.ef-textbox.middlenum{
	max-width: 16em;
}
.ef-radio + label input{
    margin-top: 10px;
}
.ef-radio + label + .ef-radio{
    margin-top: 10px;
}
.ef-textbox::placeholder {
    color: #999;
}
.ef-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}
.ef-checkbox label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.ef-checkbox label::before,
.ef-checkbox label:has(:checked)::after {
    content: '';
}

.ef-checkbox label::before {
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background-color: #e6edf3;
}

.ef-checkbox label:has(:checked)::before {
    background-color: #2589d0;
}

.ef-checkbox label:has(:checked)::after {
    position: absolute;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.ef-checkbox input {
    display: none;
}
@media(max-width:768px){
    .ef-checkbox {
        flex-direction: column;
    }
	.ef-checkbox label {
		background:#f7f7f7;
		padding:8.5px 5px;
		border-radius:3px;
		border:1px solid #d2d2d2;
	}
	.ef-checkbox label::before {
	    border:1px solid #d2d2d2;
	    background-color: #fff;
	}
	.ef-checkbox label:has(:checked)::after {
	    top: 13px;
	    left: 11px;
	}
}
p.tyuui{
    font-size: 0.95em;
    color: var(--costred);
    margin-bottom: 1em;
}
.imagePreview{
    margin-top:20px;
}
.imagePreview img{
    border: 1px solid #cccccc;
}
#ef-privacy-p{
    width: 95%;
    margin-inline: auto;
    margin-block: 1em 1.5em;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#ef-privacy-p + p{
    color: var(--costred);
    margin-bottom: 1em;
}
#ef-privacy-p + p + label{
    display: block;
    width: fit-content;
}
#pdfLink{
    margin-top: 1em;
}
#pdfLink a{
    text-decoration: underline;
}
.ef-hozon-kakunin{
    width: 100%;
    height: 100px;
    background: #fff;
    border-top: 1px solid #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    z-index: 2;
}
.ef-hozon-kakunin button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(50% - 1em);
    max-width: 250px;
    padding: .9em 1em;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 3px var(--maindark);
    background-color: var(--maindark);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.ef-hozon-kakunin-inner{
    position: initial;
    background: initial;
    height: initial;
    box-shadow: initial;
    margin-block: 2em;
}
.borderred{
    border-bottom: 3px double var(--costred);
}
.costred{
    color: var(--costred);
}
/* 
	form関連CSSここまで
*/
/* 
	確認画面ここから
*/
.ef_kakunin{
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #ececec;
}
.ef_kakunin-ttl {
    font-weight: 500;
    display: block;
    color: var(--maincolor);
    margin-bottom: 0.25em;
}
.ef_kakunin > span:not(.ef_kakunin-ttl){
    font-size: 15px;
}
.bordergreen{
    border-bottom: 5px double var(--maincolor);
}
.kanryou{
    text-align: center;
    font-weight: 400;
    margin-bottom: 2em;
}
.mb1em{
    margin-bottom: 1em;
}
.mb2em{
    margin-bottom: 2em;
}
.w35{
    margin-inline: auto;
    max-width: 35em;
}
/* 
	確認画面ここまで
*/
/*
    申込一覧画面
*/
.grid-container {
    display: grid;
    gap: 1px 0;
    background: #aaaaaa;
    grid-template-columns: repeat(7, auto);
    border: 1px solid #e2e2e2;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}  
.grid-item {
    font-size: 15px;
    background: #f1f1f1;
    padding: 8px 4px;
    display: grid;
    place-content: center;
}
.headcontent{
    background: var(--maindark);
    color: #fff;
}
.bodycontent{
    background: #f1f1f1;
}
.process{
    gap: 5px;
}
.bodycontent:not(.process){
    border-right: 1px solid #e2e2e2;
}
.headcontent:not(.processhead){
    border-right: 1px solid #6d999d;
}
.status span{
    display: block;
    text-align: center;
}
.status-date{
    font-size: 13px;
    color: #7a7a7a;
}
.process button,
.process a {
    appearance: none;
    background-color: var(--mainlight);
    border: 0.125em solid var(--maindark);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--maindark);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    min-height: 1.75em;
    min-width: 5em;
    outline: none;
    padding: 0.25em 1em;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
}
.process button:not(:last-child) {
	margin-bottom: 5px;
}
.process button:disabled,
.process a:disabled{
    pointer-events: none;
}
   
.process button:hover,
.process a:hover {
    color: #fff;
    background-color: var(--maindark);
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}
   
.process button:active,
.process a:active {
    box-shadow: none;
    background-color: var(--maincolor);
    transform: translateY(0);
}
.status-text:not(.status-complete) {
    color: #cf4e4e;
}
.status:not(:has(.status-complete)){
    background: #f1e4e4;
}
.search{
    display: flex;
    width: 100%;
    margin-block: 2em 4em;
    align-items: center;
    justify-content: center;
    gap: 2em 3em;
    flex-wrap: wrap;
    font-size: 15px;
}
.search > form > div{
    display: flex;
    align-items: center;
    gap: 2em;
}
.search > form > div > div{
    display: flex;
    flex-direction: column;
}
.search > form > div > div input{
    width: auto;
}
.searchbtn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    height: fit-content;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    color: var(--maincolor);
    background: transparent;
    cursor: pointer;
    transition: ease-out 0.25s;
    border: 2px solid var(--maincolor);
    border-radius: 10px;
    box-shadow: inset 0 0 0 0 var(--maincolor);
}
  
.searchbtn:hover {
    color: white;
    box-shadow: inset 0 -100px 0 0 var(--maindark);
    border: 2px solid var(--maindark);
}
  
.searchbtn:active {
    transform: scale(0.95);
}
.pager  ul.pagination {
  text-align: center;
  margin: 40px auto;
  padding: 0;
}
.pager .pagination li {
  display: inline-block;
  margin: 0 2px;
  padding: 0;
  background:var(--maindark);
  width: 50px;
  height: 50px;
  text-align: center;
}
.pager .pagination li.linked {
  cursor: pointer;
}
.pager .pagination li span{
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
}
.pager .pagination li.active,
.pager .pagination li.linked:hover{
  background: #ccf;
}
.pager .pagination li.active span,
.pager .pagination li.linked:hover span{
  color: #000;
}


/*
    申込詳細ページ
*/
.cominput-detail .ef_inner-kakunin{
    margin-bottom: 60px;
}
.cominput-detail .ef_inner-kakunin,
.cominput-detail form{
    display: flex;
    flex-wrap: wrap;
    gap: 10%;
}
.cominput-detail .ef_kakunin,
.cominput-detail .ef_koumoku{
    width: 45%;
}
.cominput-detail .bordergreen,
.cominput-detail .ef_kakunin:has(.ef-checkbox),
.cominput-detail .ef_koumoku:has(.ef-checkbox),
.cominput-detail .ef_koumoku:has(input[type="file"]){
    width: 100%;
}
.cominput-detail .bordergreen{
    padding-top: 1.5em;
    border-top: 5px double var(--maincolor);
}
/*
    システムトップページ
*/
.app-top .section_wrap{
    min-height: 200px;
}
.btn2 {
    transition: all .2s;
}
.btn2:active {
    transform: scale(0.95);
}
/*
    ログイン
*/
#webentry-login{
    margin-bottom: 3em;
}
#webentry-login label{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2em;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
#webentry-login label span{
    flex-shrink: 0;
}
#webentry-login label input{
    max-width: 20em;
}
@media(max-width:320px){
    .ef-hozon-kakunin{
        height: auto;
        flex-wrap: wrap;
        gap: 0.5em;
        padding-block: 15px;
    }
    .ef-hozon-kakunin button{
        width: 100%;
        padding: .6em 1em;
        border: none;
    }
}

/***********************/
.list table{
    width: 100%;
    background: #aaaaaa;
    border: 1px solid #e2e2e2;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}
.list tbody,
.list thead{ }
.list tr{ }
.list th,
.list td{
    font-size: 15px;
    padding: 8px 4px;
}
.list tbody tr:not(:last-child){
	border-bottom: 2px solid #e2e2e2;
}
.list tbody tr:nth-child(even) td{
	background:#f8f8f8;
}



/* 独自ダイアログ */
#floating_dialog {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 50000;
	overscroll-behavior: contain;
	overflow: hidden;
}
#floating_dialog form {
	width: 35%;
	padding: 2rem;
	background: #fff;
	border-radius: 0.5rem;
}




/* その他共通 */
.left {
	text-align: left !important;
}
.center {
	text-align: center !important;
}
.right {
	text-align: right !important;
}

.imeon {
	ime-mode: active;
}
.imeoff {
	ime-mode: inactive;
}
.imenone {
	ime-mode: disabled;
}

.attn {
	font-size: 0.8em !important;
	color: var(--textred);
}

.wid_2em {
	width: 2rem !important;
}
.wid_3em {
	width: 3rem !important;
}
.wid_4em {
	width: 4rem !important;
}
.wid_5em {
	width: 5rem !important;
}
.wid_6em {
	width: 6rem !important;
}
.wid_7em {
	width: 7rem !important;
}
.wid_8em {
	width: 8rem !important;
}
.wid_9em {
	width: 9rem !important;
}
.wid_10em {
	width: 10rem !important;
}
.wid_12em {
	width: 12rem !important;
}
.wid_15em {
	width: 15rem !important;
}
.wid_20em {
	width: 20rem !important;
}
.wid_25em {
	width: 25rem !important;
}
.wid_30em {
	width: 30rem !important;
}
.wid_40em {
	width: 40rem !important;
}
.wid_50em {
	width: 50rem !important;
}
.wid_half {
	width: 50% !important;
}
.wid_33per {
	width: 33% !important;
}
.wid_max {
	width: 100% !important;
}

.hit_5em {
	height: 5rem !important;
}
.hit_10em {
	height: 10rem !important;
}
.hit_15em {
	height: 15rem !important;
}
.hit_20em {
	height: 20rem !important;
}