.catalogNav {
    margin-bottom: 50px;
}
.catalogNav li {
    float: left;
    width: calc(100% / 3);
    display: flex;
}
.catalogNav li.now {
    color: #fff;
} 
.catalogNav li .text {
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #ebedef;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 5px 0 0 5px;
}
.catalogNav li:last-child .text {
    border-radius: 5px;
}
.catalogNav li .arrow {
    width: 0;
    height: 0;
    border: 30px solid;
    border-color: transparent;
    border-left-color: #ebedef;
    margin-right: -20px;
}
.catalogNav li.now .text {
    background-color: #2454A5;
}
.catalogNav li.now .arrow {
    border-left-color: #2454A5;
}
.catalogErrMsg {
    background-color: #f2dede;
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 5px;
}
.catalogErrMsg ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 40px;
}
.catalogErrMsg li {
    color: #b94a48;
}
.catalogSample {
    background-color: #f6fbfd;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 15px 30px;
}
.catalogSample .intro {
    float: left;
    margin-bottom: 10px;
}
.catalogSample .intro .title {
    font-size: 160%;
    font-weight: bold;
    margin-bottom: 5px;
    padding-top: 10px;
}
.catalogSample .intro .title > span {
    background-color: #fff57f;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
    margin-right: 15px;
}
.catalogSample .intro .title > span > span {
    font-size: 62%;
}
.catalogSample .intro .sub_1 {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
    font-size: 120%;
    margin-bottom: 5px;
}
.catalogSample .intro .sub_2 {
    font-size: 120%;
}
.catalogSample .intro .sub_2 > span {
    background-color: #2454A5;
    color: #fff;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    margin-right: 12px;
}
.catalogSample .img {
    float: right;
    position: relative;
    padding-left: 30px;
}
.catalogSample .img img {
    border: 1px solid #9b9b9b;
    height: 200px;
}
.catalogSample .img img:first-child {
    position: absolute;
    top: 30px;
    left: 0;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
}
.catalogField {
    border-top: 1px solid #ccc;
    width: 100%;
    margin-bottom: 50px;
}
.catalogField > tbody > tr {
    border-bottom: 1px solid #ccc;
}
.catalogField > tbody > tr > th {
    width: 320px;
    padding: 30px;
    padding-right: 60px;
    background-color: #ebedef;
    position: relative;
}
.catalogField > tbody > tr > th span {
    color: #fff;
    background-color: #d0021b;
    font-weight: normal;
    font-size: 86%;
    padding: 2px 8px;
    position: absolute;
    right: 20px;
}
.catalogField > tbody > tr > td {
    padding: 30px;
}
.catalogFieldTxt {
    margin-bottom: 20px;
}
.catalogFieldTxt a {
    border-bottom: 1px solid #000;
}
.catalogList {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px dotted #ccc;
    border-left: 1px dotted #ccc;
}
.catalogList li {
    width: calc(100% / 3);
    border-bottom: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
    display: flex;
    flex-direction: column;
}
.catalogList li label {
    cursor: pointer;
    padding: 10px;
    background-color: #fffef0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.catalogList li label.selected {
    background-color: #f6fbfd;
}
.catalogPhoto {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}
.catalogCheck {
    appearance: auto;
    margin-right: 5px;
}
.catalogPhoto .catalogCheck {
    display: none;
}
.catalogPhoto img {
    height: 150px;
    border: 1px solid #9b9b9b;
}
.catalogSummary {
    display: block;
    flex-grow: 1;
    margin-bottom: 30px;
}
.catalogSummary span:first-child {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}
.catalogSummary span:last-child {
    display: block;
    font-size: 93%;
}
.catalogSelectBtn {
    display: block;
    text-align: center;
    background-color: #fff;
    border: 1px solid #76b0e6;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #0075c1;
    font-weight: bold;
    position: relative;
}
.catalogSelectBtn span:first-child {
    display: block;
    width: 14px;
    height: 10px;
    border-left: 2px solid #0075c1;
    border-bottom: 2px solid #0075c1;
    transform: rotate(-45deg);
    position: absolute;
    left: 20px;
    top: 13px;
}
.catalogList li label.selected .catalogSelectBtn {
    background-color: #0075c1;
    color: #fff;
}
.catalogList li label.selected .catalogSelectBtn span:first-child {
    border-color: #fff;
}
.catalogList li label.selected .catalogSelectBtn span:last-child {
    font-size: 0;
}
.catalogList li label.selected .catalogSelectBtn span:last-child::before {
    font-size: 15px;
    content: '選択中';
}
.catalogChoices {
    display: flex;
    flex-wrap: wrap;
}
.catalogChoices li {
    padding-right: 15px;
    padding-bottom: 5px;
}
.catalogChoices li label {
    cursor: pointer;
}
.catalogSeparator {
    float: left;
    margin-right: 20px;
}
.catalogItem {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fffef0;
}
.catalogItem::placeholder {
    color: #ccc;
}
.catalogItem.name {
    width: 140px;
}
.catalogItem.zipCode {
    width: 80px;
}
.catalogRadio {
    appearance: auto;
    margin-right: 5px;
}
.catalogAddress {
    width: 100%;
}
.catalogAddress th {
    padding-right: 60px;
    vertical-align: middle;
    font-weight: normal;
    width: 210px;
    padding-bottom: 5px;
    position: relative;
}
.catalogAddress th span {
    color: #fff;
    background-color: #d0021b;
    font-weight: normal;
    font-size: 86%;
    padding: 2px 8px;
    position: absolute;
    right: 10px;
}
.catalogAddress td {
    padding-bottom: 5px;
}
.catalogSelect {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fffef0;
    position: relative;
    appearance: auto;
}
.catalogItem.address {
    width: 100%;
}
.catalogItem.mail {
    width: 100%;
}
.catalogFieldAttention {
    font-weight: bold;
    margin-top: 5px;
    color: #6f6262;
    font-size: 86%;
}
.catalogFieldAttention span {
    color: #d0021b;
}
.catalogLand {
    display: none;
}
.catalogLandArea {
    display: table;
}
.catalogLandArea div {
    display: table-cell;
}
.catalogLandArea div:first-child {
    width: 70px;
}
.catalogLandArea div:nth-child(2) {
    width: 20px;
    text-align: center;
    vertical-align: bottom;
}
.catalogLandArea div:nth-child(3) {
    width: 40px;
}
.catalogLandArea div:last-child {
    padding-left: 20px;
    vertical-align: bottom;
}
.catalogLandArea .catalogChoices li {
    padding-bottom: 0;
}
.catalogLandArea div .catalogItem {
    width: 100%;
    text-align: right;
}
.catalogBtn {
    display: flex;
    justify-content: center;
}
.catalogBtn button {
    height: 60px;
    border-radius: 30px;
    background-color: #2454A5;
    color: #fff;
    width: 200px;
    text-align: center;
}
.catalogBtn button.prev {
    background-color: #ebedef;
    color: #000;
}
.catalogBtn form {
    margin-right: 20px;
}
.catalogBtn form:last-child {
    margin-right: 0;
}
.catalogTxt {
    margin-bottom: 40px;
}
.catalogTxt.last {
    margin-bottom: 50px;
}
.catalogSSLDescription {
    padding-top: 90px;
    font-size: 93%;
}
.catalogSSLDescription > p {
    margin-bottom: 15px;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
}
.catalogSSLDescription div {
    background-color: #f5f5f5;
    color: #666;
    padding: 30px;
}
.catalogSSLDescription div p {
    line-height: 2;
}
.catalogSSLDescription div a {
    color: #0073BB;
    text-decoration: underline;
}
.catalogContact {
    display: inline-block;
    font-size: 93%;
    background-color: #E7F7FD;
    padding: 20px;
    line-height: 2;
    margin-bottom: 50px;
}
.catalogLinkBtn {
    display: block;
    line-height: 60px;
    border-radius: 30px;
    background-color: #2454A5;
    color: #fff;
    width: 200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.catalogLinkBtn.toTop {
    line-height: 30px;
    width: auto;
    max-width: 300px;
}

@media (any-hover: hover) {

    /* スマホではhoverの反応が1回分遅れるので、スマホ以外のみ有効化 */
    .catalogList li label:hover {
        background-color: #f6fbfd;
    }
    .catalogList li label:hover .catalogSelectBtn {
        background-color: #0075c1;
        color: #fff;
    }
    .catalogList li label:hover .catalogSelectBtn span:first-child {
        border-color: #fff;
    }
    .catalogFieldTxt a:hover {
        opacity: 0.6;
    }
    .catalogBtn button:hover {
        opacity: 0.7;
    }
    .catalogLinkBtn:hover {
        opacity: 0.7;
    }
}

@media screen and (max-width: 1160px) {
    .catalogField > tbody > tr > th {
        width: 28%;
    }
    .catalogList li {
        width: 50%;
    }
    .catalogSample .img img {
        height: 150px;
    }
    .catalogSample .img img:first-child {
        top: 22px;
    }
}

@media screen and (max-width: 930px) {
    .catalogSample .img img {
        height: 200px;
    }
    .catalogSample .img img:first-child {
        top: 30px;
    }
    .catalogSample .img img:last-child {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .catalogNav li {
        display: block;
        float: none;
        width: 100%;
    }
    .catalogNav li .text {
        border-radius: 5px;
    }
    .catalogNav li .arrow {
        margin-left: auto;
        margin-right: auto;
        border-left-color: transparent;
        border-top-color: #ebedef;
        margin-bottom: -10px;
        border-width: 15px;
    }
    .catalogNav li.now .arrow {
        border-left-color: transparent;
        border-top-color: #2454A5;
    }
    .catalogSample .img img {
        height: 150px;
    }
    .catalogSample .img img:first-child {
        top: 22px;
    }
    .catalogField > tbody > tr > th {
        display: block;
        width: 100%;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 10px;
        background-color: transparent;
    }
    .catalogField > tbody > tr > td {
        display: block;
        width: 100%;
        padding-top: 10px;
    }
    .catalogList li {
        width: 100%;
    }
    .catalogList li label {
        display: block;
    }
    .catalogPhoto {
        float: left;
    }
    .catalogPhoto img {
        width: 105px;
        height: auto;
    }
    .catalogSummary {
        float: right;
        width: calc(100% - 125px);
    }
    .catalogSelectBtn {
        float: right;
        width: 200px;
    }
    .catalogList li label.selected .catalogSelectBtn span:last-child::before {
        font-size: 16px;
    }
    .catalogAddress th {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-left: 10px;
        border-top: 1px dotted #ccc;
    }
    .catalogAddress td {
        display: block;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 500px) {
    .catalogSample .intro {
        width: 100%;
    }
    .catalogSample .intro .title,
    .catalogSample .intro .sub_1,
    .catalogSample .intro .sub_2 {
        display: none;
    }
    .catalogPhoto {
        float: none;
    }
    .catalogPhoto img {
        width: auto;
        height: 150px;
    }
    .catalogSummary {
        float: none;
        width: auto;
    }
    .catalogSelectBtn {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .catalogSeparator {
        float: none;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .catalogSeparator .catalogItem {
        width: 100%;
    }
    .catalogChoices li {
        width: 100%;
    }
    .catalogLandArea .catalogChoices li {
        width: auto;
    }
}