/* form extre
-------------------------------------------------- */
:root {
    --base-white:#fff;
    --base-gray:#ccc;
    --main-color: #ffcf00;
    --color-inputbox: #fffce6;
    --color-required: #eb5b5b;
    --color-errorArea: #ffeeee;
    --color-errorLink: #D83030;
    --color-inputdone: #eee;
    --color-line:#eee;
    --color-box-line:#ccc;
    --color-yomiuri: #5456B8;
    --color-edit-btn:#888;
    --color-commit-btn:#ec7d1c;
    --color-seminar-accent:#eb5b5b;
}

html, body, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, caption, th, tt, td, img, form img, hr, table, tr, th, td, div, label, a, input, select{
    font-size: 16px;
    line-height: 1.5;
    font-family: Noto Sans JP, sans-serif;
}

.pconly{display: block !important;}
.sponly{display: none !important;}

.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.mb25{margin-bottom: 25px !important;}
.mb80{margin-bottom: 80px !important;}
.width10 {width: 10%;}
.width20 {width: 20%;}
.width30 {width: 30%;}

input::placeholder{color:var(--base-gray);}

.err{
    background-color: var(--color-errorArea) !important;
}
.error_msg_list a:link,
.error_msg_list a:visited{
    color: var(--color-errorLink);
    text-decoration: underline;
}
.error_msg_list a:hover{
    text-decoration: none;
}

.accent{
    color: var(--color-seminar-accent);
}

/* step */
#step {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 30px 25px 25px;
    border-radius: 0 0 40px 40px;
    background: var(--base-white);
    counter-reset: step;
    position: relative;
}
#step li {
    text-align: center;
    position: relative;
}
#step li .circle {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--base-white);
    color: #333;
    border: 2px solid var(--base-gray);
    line-height: 36px;
    font-weight: bold;
    z-index: 1;
    position: relative;
}
#step li.active .circle {
    background: var(--main-color);
    color: var(--base-white);
    border-color: var(--main-color);
}

#step li .label {
    margin-top: 10px;
    font-weight: normal;
    color: #000;
}
#step li.active .label {
    color: var(--main-color);
    font-weight: bold;
}
#step li .line {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--base-gray);
    transform: translateX(0%);
    z-index: 0;
    overflow: hidden;
}
#step li .line .fill {
    height: 100%;
    width: 0%;
    background: var(--main-color);
    transition: width 0.5s ease;
}
#step #character {
    visibility: hidden;
    position: absolute;
    top: -6px;
    left: 50%;
    width: 38px;
    transform: translateX(-50%);
    transition: left 1s ease;
    z-index: 10;
}
#step #character img {
    width: 100%;
    height: 100%;
}
@keyframes jump {
  0%   { transform: translateX(-50%) translateY(0); }
  30%  { transform: translateX(-50%) translateY(-20px); }
  60%  { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(0); }
}
#step #character.jump {
  animation: jump 0.6s ease;
}

/* rt1 */
body > main > form > div > p.input_checkbox {
    border-radius: 0;
}

h2.title{
    margin-bottom: 1.5rem;
    padding-top: 10px;
}
.regist_form_wrapper .sub_title {
    margin-bottom: 1rem;
}

.form_header {
    max-width: 100%;
    padding: 30px 50px;
    background: var(--main-color);
    margin:0 0 30px;
}
.form_header img{
    width: 200px;
}
.form_header__step{
    display: none;
}
.regist_form h1.category {
    padding: 20px;
    line-height: 1;
    background-color: transparent;
    color: #333;
    font-size: 1.875rem;
}
.regist_form h1.category::before {
    content: "";
}
.regist_form_wrapper .text {
    margin: 0 0 50px 0;
}

.regist_form_wrapper a:hover{
    text-decoration: none;
    opacity: 0.75;
}

.regist_form_wrapper .form_input.bgcolor {
    background-color: var(--color-inputbox);
}

.regist_form_wrapper .form_label_necessary {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    padding: 4px 8px;
    font-weight: normal;
    background-color: var(--color-required);
    border-radius: 0;
}

.regist_form_wrapper .sub_title span {
    font-size: 0.74rem;
}


.regist_form_wrapper .form_flex {
    display: flex;
    align-items: center;
}
.regist_form_wrapper .form_input {
    border: 1px solid var(--color-box-line);
    border-radius: 0px;
    height: auto;
    padding: 10px;
    width: 100%;
}
.regist_form_wrapper .form_flex .sub_sub_title{
    width: 50px;
}

.regist_form_wrapper dl {
    border-bottom: 1px solid var(--color-line);
    padding: 10px 0;
    margin-bottom: 10px;
}

.regist_form_wrapper .tel_first,.regist_form_wrapper .tel_middle,.regist_form_wrapper .tel_last {
    width: 15%;
}

.regist_form_wrapper .input_box.done {
    padding: 15px;
    line-height: 1;
    background: var(--color-inputdone);
}

.regist_form_wrapper .tab {
    background-color: var(--base-white);
    color:#aaa;
    border: 1px solid var(--color-box-line);
    cursor: pointer;
}
.regist_form_wrapper .tab.is-active {
    background-color: var(--main-color);
    font-weight: 700;
}

.regist_form_wrapper input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 20px 100px;
    color: var(--base-white);
    background: var(--color-commit-btn);
    border-radius: 100svh;
    border: none;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.regist_form_wrapper input[type="submit"]:disabled {
    background: #e7e7e7;
    cursor: default;
}
.regist_form_wrapper input[type="submit"]:not(:disabled):hover {
  opacity: 0.7;
}

.regist_form_wrapper .form_radio.bunri{
    display: inline-flex;
    border: 1px solid var(--color-box-line);
    border-radius: 0;
}
.regist_form_wrapper .error_msg {
    padding: 40px;
    background: var(--color-errorArea);
}
.regist_form_wrapper .mgtb-commit-btn {
    margin: 60px 0 80px;
}

/* rt3 */
.regist_form .category.yomi {
    padding: 10px 20px;
}
.regist_form_wrapper table.address-list{
    background: var(--base-white);
    padding: 20px;
    border-collapse: separate;
    border-spacing: 8px;
}
.regist_form_wrapper table.address-list td{
    padding: 8px 10px;
    border-bottom: 1px solid #bbb;
}
.regist_form_wrapper table.address-list td:first-child{
    white-space: nowrap;
    border-bottom: 1px solid var(--color-yomiuri);
    color: var(--color-yomiuri);
}
.input_checkbox:has(> input[type='checkbox']:disabled) {
    margin-bottom: 10px;
}
input[type='checkbox']:disabled + label{
    cursor: default;
}
input[type='checkbox']:disabled + label::before {
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
}
input[type='checkbox']:disabled + label::after {
    background: #eee;
}

/* rt4 */
#mainfrm .regist_form_wrapper h2{
    font-size: 1.25rem;
    padding: 10px;
    border-bottom: 1px solid #333;
}
.regist_form_wrapper .dl_block{
    margin-bottom: 40px;    
}
.regist_form_wrapper dl.colon {
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.regist_form_wrapper dl.colon dt {
    font-weight: bold;
}
.regist_form_wrapper dl.colon > dd:first-of-type,
.regist_form_wrapper dl.colon > dd:not(:first-of-type)  {
	padding-left: 20px;
}
.regist_form_wrapper dl.colon > dd {
    background: var(--color-inputdone);
    padding: 10px 20px;
    width: 100%;
}
.regist_form_wrapper .s_btn {
    display: inline-block;
    width: auto;
    padding: 20px 100px;
    color: var(--base-white);
    background: var(--color-edit-btn);
    border-radius: 100svh;
    border: none;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
#mainfrm .regist_form_wrapper .btn_flex {
    margin: 60px 0 80px;
    cursor: pointer;
}
.regist_form_wrapper .s_btn:hover,#mainfrm .regist_form_wrapper .btn_flex button:hover{
    opacity: 0.75;
}

/* rt5 */
p.bun-image{
    text-align: center;
    margin-bottom: 50px;
}
p.bun-image img {
    width: 100px;
    filter: grayscale(100%) brightness(0.99) contrast(100%);
    opacity: 0.7;
}
p.bun-image img.appear {
    animation: appear 1.1s linear 0s 1;
    filter: none;
    opacity: 1;
}
@keyframes appear {
    0%   { transform: scale(0.9, 1.2) translate(0%, -50%); }
    10%  { transform: scale(0.9, 1.2) translate(0%, -7.5%); }
    20%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
    30%  { transform: scale(0.95, 1.05) translate(0%, -5%); }
    40%  { transform: scale(0.975, 1.1) translate(0%, -15%); }
    50%  { transform: scale(0.975, 1.1) translate(0%, -5%); }
    60%  { transform: scale(1.05, 0.95) translate(0%, 2.5%); }
    70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
section{
    padding: 80px;
}
section h2{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}
section h2 span{
    color: var(--color-seminar-accent);
}
section .inner{
    max-width: 920px;
    margin: 0 auto;
}
section .cache{
    margin-bottom: 80px;
}

section#seminar{
    background-color: #eee;
    background-image: url(../img/pic_human.webp), url(../img/bg_seminar.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: top right, bottom left;
    background-size: 50%, 100%;
}
section#seminar ul{
    margin-bottom: 80px;
}
section#seminar ul li{
    position: relative;
    display: flex;
    padding: 20px 20px 40px;
    max-width: 90%;
    margin: 20px auto 0;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1));
    transition: 0.8s;
    border-left: 3px solid var(--color-seminar-accent);
    overflow: hidden;
}
section#seminar ul li:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.8s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
section#seminar ul li:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: var(--color-seminar-accent);
    border-radius: 50%;
    display: block;
    transition: all 0.8s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
section#seminar ul li:hover{
    filter: none;
}
section#seminar ul li:hover:before {
    top: -35%;
    background-color: var(--color-seminar-accent);
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
section#seminar ul li:hover:after {
    top: -45%;
    background-color: var(--color-seminar-accent);
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

section#seminar ul li div.lContents{
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
    min-width: 160px;
}
section#seminar ul li div.lContents span{
    white-space: nowrap;
    font-weight: bold;
    transition: 0.8s;
    font-family: "Oswald", sans-serif;
}
section#seminar ul li:hover div.lContents span,
section#seminar ul li:hover div.lContents span:nth-last-of-type(1),
section#seminar ul li:hover div.lContents span:nth-last-of-type(2),
section#seminar ul li:hover div.lContents span:nth-last-of-type(3),
section#seminar ul li:hover div.rContents .place,
section#seminar ul li:hover div.rContents .title{
    color: var(--base-white);
}
section#seminar ul li div.lContents span:nth-last-of-type(1),
section#seminar ul li div.lContents span:nth-last-of-type(3){
    color: #bbb;
}
section#seminar ul li div.lContents span:nth-last-of-type(2){
    padding: 10px 0;
    font-size: 1.4rem;
}
section#seminar ul li div.lContents span:nth-last-of-type(2) span{
    font-size: 0.75rem;
    color: #333;
    padding-left: 1px;
    font-family: Noto Sans JP, sans-serif;
}
section#seminar ul li div.rContents .place{
    color: var(--color-seminar-accent);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: 0.8s;
}
section#seminar ul li div.rContents .title{
    font-weight: bold;
    font-size: 1.2rem;
    transition: 0.8s;
}
section#seminar ul li .category{
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 6px;
}
section#seminar ul li .category div{
    font-size: 0.75rem;
    padding: 10px;
    background: #eee;
    line-height: 1;
}
section#seminar ul li:hover .category div{
    color:#333;
}
section#seminar .btn{
    text-align: center;
}
section#seminar .btn a{
    background: var(--base-white);
    line-height: 1;
    padding: 15px 40px;
    font-size: 0.875rem;
    border-radius: 100svh;
    transition: 0.8s;
    font-weight: 500;
    position: relative;
}
section#seminar .btn a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid var(--color-seminar-accent);
    border-right: 2px solid var(--color-seminar-accent);
    transform: rotate(45deg);
    box-sizing: border-box;
    transition: 0.8s;
}
section#seminar .btn a:hover{
    background: #333;
    color:#fff;
}
section#seminar .btn a:hover::after {
    border-color: #fff;
}

section#brand{
    background: #fff url(../img/bg_brand.webp) no-repeat;
    background-position: bottom right;
    background-size: 35%;
}
section#brand .brandContents{
    text-align: center;
    margin-bottom: 80px;
}
section#brand .brandContents img{
    width: 100%;
    max-width: 580px;
}
section#recomend{
    background: #faf6d8 url(../img/bg_recomend.webp) no-repeat;
    background-position: bottom left;
    background-size: 100%;
}
section#recomend ul{
    margin-bottom: 80px;
}
section#recomend li{
    padding: 40px;
    background: rgba(255,255,255,0.9);
    margin-bottom: 20px;
    cursor: pointer;
}
section#recomend li:last-child{
    margin-bottom: 0;
}
section#recomend li:hover{
    opacity: 0.6;
}
section#recomend dl{
    display: flex;
    gap: 20px;
    margin: 0 auto;
}
section#recomend dl dt img{
    max-width: 350px;
}
section#recomend dl dd h4{
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
section#recomend dl dd p{
    color:#555;
}

.fade-item {
  opacity: 0;
  transform: translateY(100px) scale(0.8);
  filter: blur(12px);
  transition: all 0.7s cubic-bezier(0.6, 0, 0.4, 1);
}
.fade-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.submit-btn{
    text-align: center;
}
.submit-btn a{
    padding: 20px 100px;
    color: var(--base-white);
    background: var(--color-commit-btn);
    border-radius: 100svh;
    border: none;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
}
.submit-btn a:hover{
    opacity: 0.7;
}

/*ŠÛ–îˆó*/
.circle-fill-right {
    display: inline-block;
    vertical-align: middle;
    color: var(--main-color);
    line-height: 1;
    position: relative;
    width: 0.8em;
    height: 0.8em;
    border: 0.075em solid currentColor;
    background: currentColor;
    border-radius: 50%;
    box-sizing: content-box;
    margin-right: 8px;
}
.circle-fill-right::before {
    content: '';
    color: var(--base-white);
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.18em 0.31177em;
    border-left-color: currentColor;
    border-right: 0;
    transform: translateX(15%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* sp */
@media screen and (max-width: 768px) {

    .pconly{display: none !important;}
    .sponly{display: block !important;}

    .width10,.width20,.width30,.width50 {width: 100% !important;}
    .mb80{margin-bottom: 40px !important;}

    .form_header {
        padding: 20px;
        margin: 0 0 20px;
    }
    .form_header img {
        width: 160px;
    }

    .regist_form .category {
        font-size: 1.5rem;
    }
    .regist_form_wrapper .error_msg {
        padding: 20px;
    }
    .regist_form_wrapper .tel_first,.regist_form_wrapper .tel_middle,.regist_form_wrapper .tel_last {
        width: 30%;
    }
    .regist_form_wrapper input[type="submit"] {
        padding: 20px 70px;
        font-size: 1.175rem;
    }
    .regist_form_wrapper input[type="submit"].long-name{
        padding: 20px 40px;
    }

    /* rt2 */
    .regist_form .category.yomi {
        font-size: 1.1rem;
    }
    .regist_form_wrapper table.address-list{
        padding: 10px;
        width: 100%;
    }
    .regist_form_wrapper table.address-list tr,.regist_form_wrapper table.address-list td {
        display: block;
        width: 100%;
    }
    .regist_form_wrapper table.address-list tr {
        margin-bottom: 10px;
    }
    .regist_form_wrapper table.address-list td {
        padding: 5px 0;
        border: none;
    }

    /* rt4 */
    #mainfrm .regist_form_wrapper h2 {
        font-size: 1.1875rem;
        padding: 10px 0;
    }
    #mainfrm .regist_form_wrapper dl.colon.not_tb {
        display: block;
    }
    #mainfrm .regist_form_wrapper .btn_flex {
        display:block;
        margin: 40px 0;
        text-align: center;
        font-size: 1.175rem;
    }
    #mainfrm .regist_form_wrapper .s_btn {
        padding: 20px 70px;
    }
    #mainfrm .regist_form_wrapper .btn_r {
        text-align: center;
    }
    #mainfrm .regist_form_wrapper .btn_flex #correct02 {
        margin-bottom: 20px;
    }

    /* rt5 */
    p.bun-image img {
        width: 20%
    }
    section {
        padding: 20px;
    }
    section h2 {
        font-size: 1.5rem;
    }
    section .cache {
        margin-bottom: 40px;
    }
    section#seminar {
        background-color: #eee;
        background-image: url(../img/bg_seminar_sp.webp), url(../img/bg_seminar.webp);
        background-repeat: no-repeat, repeat;
        background-position: 100px top, bottom left;
        background-size: 100%, cover;
    }
    section#seminar ul li {
        display: block;
        max-width: 100%;
        padding: 20px;
    }
    section#seminar ul li div.lContents {
        display: block;
        min-width: auto;
    }
    section#seminar ul li div.lContents span:nth-last-of-type(2) {
        padding: 0 5px;
    }
    section#seminar ul li div.rContents .place {
        margin-bottom: 0px;
        margin-top: 10px;
        font-size: 0.875rem;
        font-weight: 700;
    }
    section#seminar ul li div.rContents .title {
        margin-bottom: 15px;
    }
    section#seminar ul li .category {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: flex-end;
    }
    section#seminar ul {
        margin-bottom: 40px;
    }
    section#brand {
        background: #fff url(../img/bg_brand.webp) no-repeat;
        background-position: bottom right;
        background-size: 80%;
    }
    section#brand .brandContents {
        margin-bottom: 40px;
    }
    section#recomend {
        background: #faf6d8 url(../img/bg_recomend.webp) repeat;
    }
    section#recomend li {
        padding: 20px;
    }
    section#recomend dl {
        display: block;
    }
    section#recomend dl dt img {
        max-width: 100%;
        width: 100%;
    }
    section#recomend ul {
        margin-bottom: 40px;
    }
    section#seminar .btn a {
        line-height: 1.5;
        padding: 15px 60px;
        margin-bottom: 20px;
    }    
    
    .submit-btn a {
        padding: 20px 60px;
        font-size: 1.175rem;
        margin-bottom: 20px;
    }

}