@import url("cssreset.css");
@import url("base.css");
@import url("header.css");
@import url("form.css");

/* contents */

/* steps */
section#steps {
    width: 100%;
    background-color: #eae9ef;
    margin-bottom: 55px;
}
section#steps ul {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}
section#steps ul li {
    display: flex;
    align-items: center;
    width: 33.333%;
    text-align: left;
    line-height: 1.4;
    font-size: 1.2em;
}
section#steps ul li span {
    font-size: 0.8em;
}
section#steps ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5em 1em;
    color: #ffffff;
    text-decoration: none;
    transition: .3s all ease;
}
section#steps ul li a:hover {
    opacity: 1;
}
section#steps ul li:nth-child(1) a {background-color: #111167;}
section#steps ul li:nth-child(2) a {background-color: #7577a8;}
section#steps ul li:nth-child(3) a {background-color: #a6a5c4;}
section#steps ul li:nth-child(1) a:hover {color: #aaaaaa;}
section#steps ul li:nth-child(2) a:hover {color: #000000;}
section#steps ul li:nth-child(3) a:hover {color: #333333;}



/* main contents */
section#main {
    display: flex;
    justify-content: space-between;
    width: 96%;
    max-width: 1050px;
    margin: 0 auto 60px;
}

section#main .block-left {
    width: 18rem;
    text-align: left;
}
section#main .block-center {
    width: calc(100% - 34rem);
    padding: 0 2%;
    text-align: center;
}
section#main .block-right {
    width: 16rem;
    padding: 0 1em 8%;
    text-align: left;
    border-left: 1px solid #aaaaaa;
}

section#main h2 {
    margin-bottom: 1em;
    font-size: 1.4em;
    font-weight: bold;
}
section#main h2.step1 {color:#111167;}
section#main h2.step2 {color:#7577a8;}
section#main h2.step3 {color:#a6a5c4;}

section#main .block-left h3 {
    margin-bottom: 0.5em;
    font-size: 1.6em;
    font-weight: bold;
}

section#main .block-center h3 {
    margin-bottom: 0.5em;
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
}
section#main .block-center h4 {
    text-align: left;
    font-size: 1.3em;
    font-weight: bold;
}
section#main .block-center p {
    text-align: left;
}
section#main .block-center p.detail {
    margin-bottom: 0.5em;
}

section#main .block-right h4 {
    font-size: 1.3em;
    font-weight: bold;
}
section#main .block-right h5 {
    font-weight: normal;
}
section#main .block-right p.value {
    font-size: 1.2em;
    font-weight: bold;
}
section#main .block-right p.total {
    margin-bottom: 2em;
    font-weight: bold;
}
section#main .block-right p.total strong {
    font-size: 1.8em;
}

section#main .note {
    display: block;
    line-height: 1.4;
    font-size: 0.8em;
}
section#main .block-left .note {
    padding-left: 1em;
    text-indent: -1em;
}
section#main .block-right .note {
    text-align: right;
}

section#main dl.input-size {
    margin-bottom: 1em;
}
section#main dl.input-size div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}
section#main dl.input-size dt {
    width: 2.5em;
}
section#main dl.input-size dd {
    display: flex;
    align-items: center;
    width: calc(100% - 2.5em);
}
section#main dl.input-size dd input {
    width: calc(100% - 2em);
    text-align: right;
}

section#main .block-right p.quantity {
    margin-bottom: 1em;
}
section#main .block-right p.quantity input {
    width: calc(100% - 4em);
    text-align: right;
}

section#main ul.select {
    margin-bottom: 1.5em;
}
section#main ul.select li {
    margin-bottom: 0.5em;
}

section#main ul.radio {
    padding: 1em 0;
}
section#main ul.radio li {
    margin-bottom: 0.5em;
    font-size: 1.2em;
}




/* - 1200px */
/*-----------------------------------------------------------*/
@media only screen and (max-width:1200px) {




}
/* - 1200px end */


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



}
/* - 768px end */


/* - 750px */
/*-----------------------------------------------------------*/
@media only screen and (max-width:750px) {


section#steps ul {
    display: block;
}
section#steps ul li {
    display: block;
    position: relative;
    width: 100%;
}
section#steps ul li:nth-child(1) a:hover,
section#steps ul li:nth-child(2) a:hover,
section#steps ul li:nth-child(3) a:hover {color: #ffffff;}

section#steps ul li:after {
    position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    width: 0.5em;
    height: 0.5em;
    margin: auto;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    content:"";
}


section#main {
    display: block;
    justify-content: space-between;
    width: 96%;
    max-width: 1050px;
    margin: 0 auto 60px;
}

section#main .block-left {
    width: 100%;
    padding: 0 4% 4%;
}
section#main .block-center {
    width: 100%;
    padding: 0 4% 8%;
}
section#main .block-right {
    width: 100%;
    padding: 1em 1em 0;
    border-top: 1px solid #aaaaaa;
    border-left: 0;
}



}
/* - 750px end */


/* - 430px */
/*-----------------------------------------------------------*/
@media only screen and (max-width:430px) {




}
/* - 430px end */