@charset "utf-8";

@import "foundation/_setting.scss";
//==========================================================================
//products.scss
//==========================================================================
.index {
    padding-bottom: 100px;
    @include smMax {
        padding-bottom: sm_vw(220);
    }
    &__inner {
        background-color: #fff;
        padding: 40px 80px;
        @include smMax {
            padding: sm_vw(40);
            margin: 0 auto;
            width: sm_vw(670);
        }
    }
    &__list {
        li {
            display: flex;
            padding: 20px 0 20px 20px;
            border-bottom: 1px solid $colorBorder;
            &:last-child {
                border-bottom: none;
            }
            @include smMax {
                padding: sm_vw(40) 0 sm_vw(30);
                display: block;
            }
            .ttl {
                display: flex;
            }
            .date {
                width: 95px;
                font-size: 16px;
                font-weight: 400;
                font-family: $font-en01;
                @include smMax {
                    font-size: sm_vw(30);
                    width: sm_vw(170);
                }
            }
            .cat {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                height: 22px;
                font-size: 12px;
                font-weight: 400;
                color: #fff;
                border-radius: 11px;
                padding-bottom: 2px;
                @include smMax {
                    font-size: sm_vw(21);
                    width: sm_vw(130);
                    padding-bottom: 0;
                }
                &.media {
                    background-color: $colorPurple;
                }
                &.info {
                    background-color: $colorRed02;
                }
                &.event {
                    background-color: $colorOrange;
                }
                &.family {
                    background-color: $colorBlue;
                }
                &.business {
                    background-color: $colorGray;
                }
            }
            .txt {
                display: block;
                flex: 1;
                margin-left: 20px;
                font-size: 15px;
                font-weight: 400;
                @include smMax {
                    margin: sm_vw(10) 0 0;
                    font-size: sm_vw(28);
                }
                a {
                    display: block;
                    .ico {
                        padding-right: 70px;
                        @include smMax {
                            padding-right: sm_vw(90);
                        }
                        &.is-arrow {
                            position: relative;
                            display: block;
                            &::before {
                                content: "";
                                position: absolute;
                                bottom: calc(50% + 2px);
                                right: 10px;
                                width: 33px;
                                height: 10px;
                                transform: translate(0,50%);
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                                background-position: 0 0;
                                backface-visibility: hidden;
                                @include transition;
                                @include smMax {
                                    width: sm_vw(45);
                                    height: sm_vw(14);
                                    right: 0;
                                    bottom: calc(50% + 0.267vw);
                                }
                            }
                        }
                        &.is-arrow {
                            &::before {
                                background-image: url("../images/ico_arrow02_gr.png");
                                @include smMax {
                                    background-image: url("../images/ico_arrow02.png");
                                }
                            }
                        }
                    }
                    @include hover {
                        color: $colorBlue;
                        .ico {
                            &.is-arrow {
                                &::before {
                                    transform: translate(10px,50%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &__btn {
        margin: 60px auto 0;
        width: 490px;
        @include smMax {
            margin-top: sm_vw(60);
            width: sm_vw(670);
        }
    }
}

.detail {
    padding-bottom: 100px;
    @include smMax {
        padding-bottom: sm_vw(220);
    }
    .p-page-header__ttl {
        padding-top: 0;
    }
    &__inner {
        background-color: #fff;
        padding: 60px 80px;
        @include smMax {
            padding: sm_vw(60) sm_vw(40);
            margin: 0 auto;
            width: sm_vw(670);
        }
        .image {
            margin: 0 auto 30px;
            width: 100%;
            @include smMax {
                margin: 0 auto sm_vw(40);
                width: 100%;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
        h3 {
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.9;
            @include smMax {
                margin-bottom: sm_vw(50);
                font-size: sm_vw(28);
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
        h4 {
            position: relative;
            font-size: 16px;
            font-weight: 400;
            padding-left: 11px;
            @include smMax {
                padding-left: sm_vw(24);
            }
            &::before {
                content: "";
                position: absolute;
                top: 0.3em;
                left: 0;
                width: 4px;
                height: 18px;
                background: linear-gradient(180deg, #014099 0%, #014099 50%, #073473 50%, #073473 100%);
                @include smMax {
                    width: sm_vw(6);
                    height: sm_vw(32);
                }
            }
        }
        p {
            margin-bottom: 30px;
            font-size: 16px;
            line-height: 1.9;
            @include smMax {
                margin-bottom: sm_vw(50);
                font-size: sm_vw(28);
            }
            &:last-child {
                margin-bottom: 0;
            }
            a {
                color: $colorBlue;
                @include hover {
                    text-decoration: underline;
                }
            }
        }
        ul {
            margin-bottom: 30px;
            @include smMax {
                margin-bottom: sm_vw(50);
            }
            &:last-child {
                margin-bottom: 0;
            }
            li {
                position: relative;
                margin-bottom: 30px;
                font-size: 16px;
                padding-left: 1em;
                @include smMax {
                    font-size: sm_vw(28);
                }
                &:last-child {
                    margin-bottom: 0;
                }
                &::before {
                    content: "・";
                    position: absolute;
                    left: 0;
                }
            }
        }
    }
}