@charset "UTF-8";

.main-contents {
    padding-bottom: 0;
    overflow: hidden;
}

.section-wrap {
    padding: 0 0 64px;
}

.section-wrap img {
    filter: saturate(100%);
}

/*================================================================
# アンカー
================================================================ */
.section-anchor {
    margin: 40px 0;
}

.section-anchor .anchor ul {
    border-bottom: 1px solid var(--gray);
    display: flex;
    flex-wrap: wrap;
}

.section-anchor .anchor ul li:first-child {
    width: 100%;
}

.section-anchor .anchor ul li {
    width: 50%;
    border-top: 1px solid var(--gray);
}

.section-anchor .anchor-link {
    padding: 16px;
    background: linear-gradient(var(--gold) 0 0) bottom / var(--d, 20%) 2px no-repeat;
    display: block;
    font-family: var(--mincho);
    font-size: 16px;
    text-align: center;
    transition: 0.5s;
}

/*================================================================
# section-wrap
================================================================ */
.section-wrap .section {
    margin-top: 64px;
}

.section-wrap .wrap {
    position: relative;
}

.section-wrap div:nth-child(odd) .wrap::before {
    width: calc(50vw + 50% - 80px);
    height: 100%;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section01_bg.png) no-repeat right top;
    position: absolute;
    content: "";
    top: 0;
    right: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-wrap div:nth-child(even) .wrap::before {
    width: calc(50vw + 50% - 80px);
    height: 100%;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section02_bg.png) no-repeat left top;
    position: absolute;
    content: "";
    top: 0;
    right: auto;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-wrap .inner {
    padding: 40px 0;
}

.section-wrap .title-wrap {
    text-align: center;
}

.section-wrap .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.15em;
}

.section-wrap .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.1em;
}

.section-wrap .card-item {
    margin: 64px 0 0;
}

.section-wrap .card .card-item.wide {
    margin: 64px calc(50% - 50vw) 0;
}

.section-wrap .card .card-item.wide .card-img img {
    height: 400px;
    object-fit: cover;
}

.section-wrap .container {
    margin: 64px 0 0;
}

.section-wrap .container .left .card-item {
    margin: 64px calc(50% - 50vw) 0;
}

.section-wrap .container .left .card-item .card-img img {
    height: 400px;
    object-fit: cover;
}

.section-wrap .container02 {
    margin: 64px 0 0;
}

.section-wrap .container02 .left,
.section-wrap .container02 .left .card-item,
.section-wrap .container02 .right,
.section-wrap .container02 .right .card-item {
    margin: 64px calc(50% - 50vw) 0;
}

.section-wrap .container02 .card-item .card-img img {
    height: 400px;
    object-fit: cover;
}

.section-wrap .card-name {
    margin: 16px auto 0 0;
    font-size: 20px;
    line-height: 1.618;
}

.section-wrap .card-description {
    margin: 8px 0 24px;
    line-height: 1.618;
    color: var(--gray);
}

.section-wrap .card-info {
    margin: 8px 0 0;
    line-height: 1.618;
}

.section-wrap .card-info dl {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
}

.section-wrap .card-info dt {
    width: 100%;
    margin: 8px 8px 0 0;
    font-weight: 700;
}

.section-wrap .card-info dd {
    width: 100%;
    margin: 4px 0 0;
}

.section-wrap .container .left .card-item .card-name,
.section-wrap .container .left .card-item .card-info {
    padding: 0 24px;
}

.section-wrap .container02 .left .card-name,
.section-wrap .container02 .left .card-info,
.section-wrap .container02 .right .card-name,
.section-wrap .container02 .right .card-info {
    padding: 0 24px;
}

.section-wrap .card .card-item.wide .card-name,
.section-wrap .card .card-item.wide .card-description,
.section-wrap .card .card-item.wide .card-info {
    padding: 0 24px;
}