@charset "utf-8";
/* PC */
@media (min-width: 1200px) {
    section {
        width: 100%;
        height: 100%;
        min-width: 1200px;
        position: relative;
    }

    section p.tit {
        font-size: 55px;
        color: #313131;
        font-weight: 100;
        line-height: 1.3em;
    }

    section p.tit span {
        display: block;
        font-size: var(--f18);
        padding-bottom: 20px;
    }

    section p.sub-01 {
        font-size: var(--f28);
        font-weight: 200;
        line-height: 1.5em;
    }

    section p.sub-02 {
        font-size: var(--f17);
        font-weight: 200;
        line-height: 1.7em;
    }

    /*-------------  Section-01 -------------*/
    .section-01 {
        position: relative;
        height: 1080px;
    }

    .section-01 video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*-------------  Section-02 -------------*/
    .section-02 {
        position: relative;
        height: 1700px;
        background-color: #F9F5F3;
    }

    .section-02 .main-con {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        padding: 117px 0;
    }

    .section-02 .main-con p.tit {
        padding-bottom: 65px;
    }

    .section-02 .main-con img.img01 {
        width: 100%;
        height: 659px;
        object-fit: cover;
        margin: 0 auto;
    }

    .section-02 .main-con .con-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 48px 0;
    }

    .section-02 .main-con .con-box div {
        width: 36%;
        height: 100%;
    }

    .section-02 .main-con .con-box .sub-01 {
        padding-bottom: 32px;
    }

    .section-02 .main-con .con-box div img.img01 {
        width: 100%;
        height: 481px;
        object-fit: cover;
    }

    .section-02 .main-con a {
        display: flex;
        align-items: flex-start;
        color: #909090;
        font-size: var(--f20);
        font-weight: 300;
        margin-top: 125px;
    }

    .section-02 .main-con a:hover {
        font-weight: 500;
        letter-spacing: 1px;
        transition: 0.3s all ease-in-out;
    }

    .section-02 .main-con a img {
        display: inline-block;
        padding-left: 8px;
    }

    /*-------------  Section-03 -------------*/
    .section-03 {
        position: relative;
        height: auto;
    }

    .section-03 .main-con {
        width: 80%;
        margin: 0 auto;
        padding-top: 75px;
    }

    .section-03 .main-con p.tit {
        padding-bottom: 53px;
    }

    .section-03 .main-con .con-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 72px;
    }

    .section-03 .main-con .con-box .sub-01 {
        width: 36%;
    }

    .section-03 img.mo {
        display: none;
    }

    .section-03 img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        overflow: hidden;
    }

    /*-------------  Section-04 -------------*/
    .section-04 {
        position: relative;
        height: 1018px;
        background-color: #F9F5F3;
        padding-top: 108px;
    }

    .section-04 .notice-box {
        position: relative;
        width: 80%;
        height: 544px;
        background-color: #fff;
        padding: 43px 105px;
        margin: 0 auto 108px;
    }

    .section-04 .notice-slide {
        width: 100%;
        height: auto;
        padding-top: 44px;
        overflow: hidden;
    }

    .section-04 .notice-slide .notice {
        width: 100%;
        height: auto;
    }

    .section-04 .notice-slide .notice .swiper-wrapper {
        width: 100%;
        display: flex;
    }

    .section-04 .notice-slide .notice .swiper-slide {
        position: relative;
        width: 29% !important;
        height: 183px;
    }

    .section-04 .notice-slide .notice .swiper-slide::after {
        position: absolute;
        content: '';
        width: 1px;
        height: 80%;
        background-color: #ddd;
        right: -46px;
        transform: translateY(-50%);
        top: 50%;
    }

    .section-04 .notice-slide .notice .swiper-slide a {
        display: block;
    }

    .section-04 .notice-slide .notice .swiper-slide ul {
        color: #313131;
        font-weight: 100;
        display: flex;
    }

    .section-04 .notice-slide .notice .swiper-slide ul li {
        width: 80%;
    }

    .section-04 .notice-slide .notice .swiper-slide ul li.num {
        width: 20%;
        font-size: 40px;
    }

    .section-04 .notice-slide .notice .swiper-slide p.tit {
        font-size: 32px;
        margin-bottom: 31px;
    }

    .section-04 .notice-slide .notice .swiper-slide p.txt {
        font-size: var(--f17);
        line-height: 30px;
        margin-bottom: 32px;
    }

    .section-04 .notice-slide .notice .swiper-slide p.date {
        /*text-align: right;*/
    }

    .section-04 .button-box {
        width: 96%;
        height: 36px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        bottom: 180px;
        left: 50%;
        transform: translateX(-50%);
    }

    .section-04 .swiper-button-prev {
        width: 27px;
        height: 36px;
        background: url("../images/main/sec04_btn_prev.png") no-repeat center center !important;
        background-size: 100%;
        cursor: pointer !important;
    }

    .section-04 .swiper-button-next {
        width: 27px;
        height: 36px;
        background: url("../images/main/sec04_btn_next.png") no-repeat center center !important;
        background-size: 100%;
        cursor: pointer !important;
    }

    .section-04 .swiper-navigation-icon {
        display: none !important;
    }

    .section-04 .swiper-pagination {
        width: 85px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        padding-top: 50px;
    }

    .section-04 .swiper-pagination .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        border: 1px solid #000 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }

    .section-04 .swiper-pagination .swiper-pagination-bullet-active {
        width: 31px !important;
        height: 12px !important;
        background-color: #253023 !important;
        border-radius: 10px !important;
    }

    .section-04 .reser-box {
        width: 100%;
        height: 260px;
        padding: 81px 160px;
        background: url("../images/main/sec04_img_01.jpg") center center no-repeat;
        background-size: cover;
    }

    .section-04 .reser-box p {
        font-weight: 300;
        font-size: var(--f36);
        text-transform: uppercase;
        color: #999999;
    }

    .section-04 .reser-box span {
        display: block;
        margin-top: 20px;
        color: #d6d6d6;
        font-size: var(--f20);
    }

    /*-------------  Section-05 -------------*/
    .section-05 {
        position: relative;
        height: 624px;
    }

    .section-05 .address-box {
        position: absolute;
        width: 540px;
        height: auto;
        padding: 50px 40px;
        background: #FFFFFFCC;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
    }

    .section-05 .address-box p {
        font-size: var(--f36);
        text-transform: uppercase;
        color: #999;
        font-weight: 300;
        padding-bottom: 30px;
    }

    .section-05 .address-box ul {
        width: auto;
    }

    .section-05 .address-box ul li {
        color: #212121;
    }

    .section-05 .address-box ul li:nth-child(1) {
        font-size: var(--f24);
        font-weight: 700;
        padding-bottom: 14px;
    }

    .section-05 .address-box ul li:nth-child(2) {
        font-size: var(--f16);
        font-weight: 400;
        padding-bottom: 14px;
        line-height: 1.5em;
    }

    .section-05 .address-box ul li:nth-child(3) {
        font-size: var(--f20);
        font-weight: 400;
        padding-bottom: 14px;
    }

    .section-05 .address-box ul li:nth-child(4) {
        font-size: var(--f16);
        font-weight: 400;
        text-decoration: underline;
    }
}

/* Tablets ~ Mobile */
@media (min-width: 200px) and (max-width: 1199px) {
    section {
        width: 100%;
        height: 100%;
        position: relative;
    }

    section p.tit {
        font-size: 1.88em;
        color: #313131;
        font-weight: 100;
        line-height: 1.3em;
    }

    section p.tit span {
        display: block;
        font-size: var(--f18);
        font-weight: 400;
        padding-bottom: 10px;
    }

    section p.sub-01 {
        font-size: var(--f18);
        font-weight: 200;
        line-height: 1.5em;
    }

    section p.sub-02 {
        font-size: var(--f16);
        font-weight: 200;
        line-height: 1.7em;
    }

    /*-------------  Section-01 -------------*/
    .section-01 {
        position: relative;
        height: 667px;
    }

    .section-01 video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*-------------  Section-02 -------------*/
    .section-02 {
        position: relative;
        height: 2010px;
        background-color: #F9F5F3;
        padding-bottom: 60px;
    }

    .section-02 .main-con {
        width: 100%;
        height: 100%;
        padding-top: 52px;
    }

    .section-02 .main-con p.tit {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
    }

    .section-02 .main-con img.img01 {
        width: 100%;
        height: 667px;
        object-fit: cover;
        margin: 0 auto;
    }

    .section-02 .main-con .con-box {
        width: 100%;
        overflow: hidden;
        padding: 48px 0;
    }

    .section-02 .main-con .con-box div {
        width: 90%;
        margin: 0 auto;
    }

    .section-02 .main-con .con-box .sub-01 {
        padding-bottom: 32px;
    }

    .section-02 .main-con .con-box .sub-01 b {
        font-size: var(--f28);
        line-height: 1.5em;
    }

    .section-02 .main-con .con-box div img.img01 {
        width: 100%;
        height: 481px;
        object-fit: cover;
    }

    .section-02 .main-con .con-box img.img02 {
       height: 481px;
    }

    .section-02 .main-con a {
        display: flex;
        align-items: flex-start;
        color: #909090;
        font-size: var(--f20);
        font-weight: 300;
        margin: 44px 0;
    }

    .section-02 .main-con a:hover {
        font-weight: 500;
        letter-spacing: 1px;
        transition: 0.3s all ease-in-out;
    }

    .section-02 .main-con a img {
        display: inline-block;
        padding-left: 8px;
    }

    /*-------------  Section-03 -------------*/
    .section-03 {
        position: relative;
        height: auto;
    }

    .section-03 .main-con {
        width: 90%;
        margin: 0 auto;
        padding-top: 42px;
    }

    .section-03 .main-con p.tit {
        padding-bottom: 28px;
    }

    .section-03 .main-con .con-box {
        padding-bottom: 28px;
    }

    .section-03 .main-con .con-box .sub-01 {
        width: 100%;
        padding-bottom: 29px;
    }

    .section-03 img.pc {
        display: none;
    }

    .section-03 img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        overflow: hidden;
    }

    /*-------------  Section-04 -------------*/
    .section-04 {
        position: relative;
        height: 662px;
        background-color: #F9F5F3;
        padding: 55px 0 86px;
    }

    .section-04 .notice-box {
        position: relative;
        width: 90%;
        height: 300px;
        background-color: #fff;
        padding: 31px 28px;
        margin: 0 auto 86px
    }

    .section-04 .notice-slide {
        width: 100%;
        height: auto;
        padding-top: 40px;
        overflow: hidden;
    }

    .section-04 .notice-slide .notice {
        width: 100%;
        height: auto;
    }

    .section-04 .notice-slide .notice .swiper-wrapper {
        width: 100%;
        display: flex;
    }

    .section-04 .notice-slide .notice .swiper-slide {
        position: relative;
        width: 100% !important;
    }

    .section-04 .notice-slide .notice .swiper-slide::after {
        position: absolute;
        content: '';
        width: 1px;
        height: 80%;
        background-color: #ddd;
        right: -46px;
        transform: translateY(-50%);
        top: 50%;
    }

    .section-04 .notice-slide .notice .swiper-slide a {
        display: block;
    }

    .section-04 .notice-slide .notice .swiper-slide ul {
        color: #313131;
        font-weight: 100;
        display: flex;
    }

    .section-04 .notice-slide .notice .swiper-slide ul li {
        width: 100%;
    }

    .section-04 .notice-slide .notice .swiper-slide ul li.num {
        width: 20%;
        font-size: var(--f24);
    }

    .section-04 .notice-slide .notice .swiper-slide p.tit {
        font-size: var(--f20);
        margin-bottom: 31px;
    }

    /*.section-04 .notice-slide .notice .swiper-slide p.txt {*/
    /*    font-size: var(--f17);*/
    /*    line-height: 30px;*/
    /*    margin-bottom: 32px;*/
    /*}*/

    .section-04 .notice-slide .notice .swiper-slide p.date {
        font-size: var(--f15);
    }

    .section-04 .button-box {
        width: 96%;
        height: 25px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        bottom: 58px;
        left: 50%;
        transform: translateX(-50%);
    }

    .section-04 .swiper-button-prev {
        width: 27px;
        height: 32px;
        background: url("../images/main/sec04_btn_prev.png") no-repeat center center / 75% !important;
        cursor: pointer !important;
    }

    .section-04 .swiper-button-next {
        width: 27px;
        height: 32px;
        background: url("../images/main/sec04_btn_next.png") no-repeat center center / 75% !important;
        cursor: pointer !important;
    }

    .section-04 .swiper-navigation-icon {
        display: none !important;
    }

    .section-04 .swiper-pagination {
        width: 85px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        padding-top: 50px;
    }

    .section-04 .swiper-pagination .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        border: 1px solid #000 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }

    .section-04 .swiper-pagination .swiper-pagination-bullet-active {
        width: 31px !important;
        height: 12px !important;
        background-color: #253023 !important;
        border-radius: 10px !important;
    }

    .section-04 .reser-box {
        width: 100%;
        height: 257px;
        padding: 60px 26px;
        background: url("../images/main/sec04_img_01.jpg") right center no-repeat;
        background-size: cover;
    }

    .section-04 .reser-box p {
        font-weight: 300;
        font-size: var(--f26);
        text-transform: uppercase;
        color: #999999;
    }

    .section-04 .reser-box span {
        display: block;
        margin-top: 20px;
        color: #d6d6d6;
        font-size: var(--f16);
        line-height: 1.5em;
    }

    /*-------------  Section-05 -------------*/
    .section-05 {
        position: relative;
        height: 572px;
    }

    .section-05 .address-box {
        position: absolute;
        width: 90%;
        height: auto;
        padding: 32px 26px;
        background: #FFFFFFCC;
        bottom: 28px;
        transform: translate(50%);
        right: 50%;
    }

    .section-05 .address-box p {
        font-size: var(--f30);
        text-transform: uppercase;
        color: #999;
        font-weight: 300;
        padding-bottom: 30px;
    }

    .section-05 .address-box ul {
        width: auto;
    }

    .section-05 .address-box ul li {
        color: #212121;
    }

    .section-05 .address-box ul li:nth-child(1) {
        font-size: var(--f20);
        font-weight: 700;
        padding-bottom: 10px;
    }

    .section-05 .address-box ul li:nth-child(2) {
        font-size: var(--f16);
        font-weight: 400;
        padding-bottom: 20px;
        line-height: 1.5em;
    }

    .section-05 .address-box ul li:nth-child(3) {
        font-size: var(--f16);
        font-weight: 400;
        padding-bottom: 20px;
    }

    .section-05 .address-box ul li:nth-child(4) {
        font-size: var(--f14);
        font-weight: 400;
        text-decoration: underline;
    }
}