@charset "utf-8";


/********************************/
/* COMMON************************/
/********************************/

body{
    /*font-family:"Yu Gothic";*/
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    line-height:1.25;
    margin:0 auto;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}

:root{
    --main:#51ACD2;
    --sub:#005FA8;
    --white:#ffffff;
    --gray:#c0c0c0;
    --black:#333;
    color:var(--black);
    scroll-behavior:smooth;
    scroll-padding-top:1em;
}

/********************************/
/* PC ***************************/
/********************************/

/* flex */
.flex{display:flex}
.between{justify-content:space-between}
.around{justify-content:space-around}
.even{justify-content:space-evenly}
.flex_wrap{flex-wrap:wrap}
.flex_direction_column{flex-direction:column}
.flex-grow-0{flex-grow:0}
.flex-grow-1{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.flex-shrink-1{flex-shrink:1}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-wrap-reverse{flex-wrap:wrap-reverse}
.justify_center{justify-content:center}
.align_center{align-items:center}

/* grid */
.grid{display:grid;grid-template-columns:100%;}
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }
.grid-5{ grid-template-columns:repeat(5,1fr) }
.grid-6{ grid-template-columns:repeat(6,1fr) }
.gap-0{gap:0}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:1rem}
.gap-4{gap:1.5rem}
.gap-5{gap:3rem}
.gap-6{gap:4rem}
.gap-7{gap:5rem}
.gap-8{gap:6rem}

/* header */

.header {
    padding-top: 4rem;
}

.header h1 {
    text-align: center;
    margin: 0;
}

.header h1 img {max-width: 320px;}

/* main */

.main {grid-template-rows: auto 1fr;}

.content__inner {
    max-width: 800px;
    margin: 0 auto;
}


/* step */

.step{
    background: var(--sub);
    padding: 2em 0;
}

.step__wrap {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.step__item {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 20%;
    color: var(--main);
    font-size:12px;
}

.step__item:before {
    display: block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 auto 0.6em;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: var(--main);
    z-index: 2;
    position: relative;
}

.step__item:after {
    position: absolute;
    z-index: 0;
    left: -50%;
    top: 0.5em;
    width: 100%;
    height: 2px;
    content:'';
    background: var(--main);
}
.step__item:nth-child(1):after{
    content:none;
}
.step__item.active{
    color: white;
}
.step__item.active:before,
.step__item.active:after{
    background-color: white;
}


/* content */

.content__text {
    background: whitesmoke;
    color: dimgray;
    font-size: 14px;
    padding: 1em;
    text-align: center;
}


/* form */
.form {
    justify-items: center;
}

.form__item {
    max-width: 420px;
    width: 100%;
}
.form__header {
    font-weight: bold;
    color: var(--sub);
    font-size: 1.2em;
}
.form__item label {
    font-size: 14px;
    color: dimgray;
}

.form__item input,
.form__item select{
    border: 1px solid lightgray;
    padding: 0.8em;
    border-radius: 0.4em;
    width: 100%;
}

.form__item input:disabled,
.form__item select:disabled{
    background: #e5e5e5;
    color: #000000;
    -webkit-text-fill-color: #000000;
    opacity: 1;
}
.form__confirm {}

.form__confirm .form__item input:disabled,.form__confirm .form__item select:disabled {
    border: unset;
    background: #eaf6ff;
    color: #898989;
}

.button {
    padding: 1em 2em;
    border-radius: 0.4em;
    width: fit-content;
}

.button__submit {
    background: var(--sub);
    color: var(--white);
}

.button__cancel {
    background: var(--gray);
    color: var(--white);
}

/* footer */
.footer {
    background: var(--sub);
    color: var(--white);
    padding: 4rem 0;
}

.footer__text {
    font-size: 14px;
}

.footer__copy {
    text-align: center;
}


/********************************/
/* SP ***************************/
/********************************/

@media (max-width:768px){

/* grid */

.gap-0{gap:0}
.gap-1{gap:1vw}
.gap-2{gap:2vw}
.gap-3{gap:3vw}
.gap-4{gap:4vw}
.gap-5{gap:5vw}
.gap-6{gap:6vw}
.gap-7{gap:7vw}
.gap-8{gap:8vw}

/* header */

.header {padding-top: 6vw;}

.header h1 {
}

.header h1 img {
    max-width: 180px;
}

/* main */

.main {}

.content__inner {margin: 0 1em;}


/* step */

.step{padding: 2vw 0;}

.step__wrap {
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    counter-reset: stepno;
}

.step__item {text-align: left;display: flex;align-items: center;justify-content: left;width: fit-content;height: fit-content;font-size: 11px;counter-increment: stepno;}

.step__item:before {
    margin: 0;
    content: counter(stepno)".";
    display: unset;
    width: unset;
    height: unset;
    text-align: unset;
    border-radius: unset;
    z-index: unset;
    position: unset;
    background: unset;
    margin-right: .2em;
}

.step__item:after {content: none;}
.step__item:nth-child(1):after{
}
.step__item.active{
}
.step__item.active:before,
.step__item.active:after{background: unset;}


/* content */

.content__text {font-size: 12px;text-align: left;line-height: 1.5;}

.content__text p {
    display: contents;
}


/* form */
.form {
    justify-items: center;
}

.form__item {
}

.form__item label {
}

.form__item input {
}

.button {
}

.button__submit {
}

.button__cancel {
}

/* footer */
.footer {padding: 1rem 0;}

.footer__text {font-size: 12px;}

.footer__copy {
}
    
}