@charset "UTF-8";

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

.wrap {
    font-size: 16px;
    font-family: "Zen Old Mincho", serif;
    font-weight: 600;
    font-style: normal;
    font-feature-settings: "palt" 1;
    letter-spacing: .02em;
    overflow: hidden;
    text-align: center;
    color: #2e2e2e;
}

.wrap * {
    margin: 0;
    padding: 0;
}

.wrap ul,
.wrap ol {
    list-style: none;
}

.wrap img {
    max-width: 100%;
}

.sp {
    display: block;
}

/* =========================================
    　　　　　　　　背景
============================================*/

.wrap_2 {
    background: 
    url(/sp/shoen/images/bg_1.png) repeat-y top center / 100%,
    url(/sp/shoen/images/bg_2.png) repeat-y top center / 100%,
    #f2f1ec;
}

/* =========================================
    　　　　　　メインビジュアル 
============================================*/

.wrap h1 {
    background: url(/sp/shoen/images/main.jpg) no-repeat center center / 100%;
    aspect-ratio: 1920 / 1080;
}

/* =========================================
    　　　　　　番組概要
============================================*/

.intro {
    padding: 10% 7%;
}

.intro ul li {
    font-size: clamp(16px, 4vw, 22px);
}

.intro ul li:not(:last-of-type) {
    margin-bottom: .7em;
}

.intro ul li span {
    font-size: clamp(18px, 4vw, 26px);
    color: #e72c62;
}

.intro div p {
    width: 50%;
    max-width: 350px;
    margin: 8% auto 5% auto;
}

.intro div p img {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.1));
}

.intro div dl dt {
    color: #fff;
    background-image: linear-gradient(90deg, rgba(238, 154, 178, 0), rgba(238, 154, 178, 0.7) 25%, rgba(238, 154, 178, 1) 50%, rgba(238, 154, 178, 0.7) 75%, rgba(238, 154, 178, 0));
    width: 70%;
    max-width: 300px;
    margin: 0 auto;
    font-size: clamp(18px, 4vw, 26px);
}

.intro div dl dd {
    margin-top: 4%;
    font-size: clamp(12px, 3vw, 16px);
}

.intro div dl dd span {
    font-size: clamp(18px, 4vw, 26px);
}

/* =========================================
    　　　　　　放送内容
============================================*/

.contents {
    max-width: 550px;
    margin: 0 auto 15% auto;
    padding: 0 7%;
}

.contents div:not(:last-of-type) {
    margin-bottom: 15%;
}

.contents div h2 {
    color: #fff;
    font-size: clamp(22px, 4vw, 30px);
    padding-bottom: .1em;
}

.contents div:nth-of-type(odd) h2 {
    text-align: left;
    padding-left: .5em;
    background-image: linear-gradient(90deg, rgba(238, 154, 178, 1), rgba(238, 154, 178, 0));
}

.contents div:nth-of-type(even) h2 {
    text-align: right;
    padding-right: .5em;
    background-image: linear-gradient(-90deg, rgba(238, 154, 178, 1), rgba(238, 154, 178, 0));
}

.contents div dl {
    margin: 8% auto 0 auto;
    text-align: center;
}

.contents div dl dt img {
    width: 40%;
}

.contents .contents_2 dl dt img {
    width: 70%;
}

.contents .contents_3 dl dt img {
    width: 30%;
}

.contents div dl dd {
    font-size: clamp(12px, 3vw, 16px);
}

.contents div ul {
    margin: 4% auto 6% auto;
}

.contents div ul li {
    font-size: clamp(16px, 4vw, 20px);
}

.contents div ul li span {
    font-size: clamp(20px, 4vw, 26px);
}

.contents div ul li h3 {
    color: #e72c62;
    font-size: clamp(20px, 4vw, 26px);
}

.contents div a img {
    filter: drop-shadow(3px 3px 5px rgba(6, 6, 6, 0.3));
}

/* =========================================
    　　　　　　イベント告知
============================================*/

.event {
    padding: 15% 7%;
    background-image: 
    linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.4) 75%),
    linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.4) 75%);
    background-position: 0 0, 20px 20px; 
    background-size: 40px 40px;
    background-color:#f1cdd4;
    position: relative;
    z-index: 1;
}

.event::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(360deg, rgba(241, 205, 212, 0), rgba(241, 205, 212, 0.64) 10%, rgba(241, 205, 212, 1) 50%, rgba(241, 205, 212, 0.64) 90%, rgba(241, 205, 212, 0));    background-position: center;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}

.event div {
    background-color: #fff;
    border-radius: 5px;
    padding: 10% 5%;
    font-size: clamp(16px, 4vw, 20px);
    max-width: 550px;
    box-sizing: border-box;
    margin: 0 auto;
}

.event div dl dt {
    font-size: clamp(20px, 4vw, 26px);
    color: #e72c62;
    margin-top: 3%;
}

.event div dl dd {
    margin: 3% auto;
}

.event div dl dd span {
    color: #e72c62;
    font-size: clamp(18px, 4vw, 22px);
}

.event div ul li a {
    color:#3d938f;
}

/* =========================================
    　　　　　　　スライドイン
============================================*/

.slideIn {
	opacity: 0;
	transform: translateY(70px);
	transition: 1s;
}

/* =========================================
    　　　　　　topボタン
============================================*/

#page-top {
    position: fixed;
    bottom: 3%;
    right: 1.5%;
    width: 60px;
    aspect-ratio: 120 / 121;
    background: url(/sp/shoen/images/top_btn.png) no-repeat center / 100%;
    z-index: 100;
}

@media screen and (min-width: 768px) {

    .wrap {
        letter-spacing: .05em;
        margin: 0 auto;
    }

    .sp {
        display: none;
    }

    /* =========================================
    　　　　　　番組概要
    ============================================*/

    .intro {
        padding: 10% 5% 20% 5%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .intro ul li {
        font-size: clamp(22px, 4vw, 30px);
    }

    .intro ul li span {
        font-size: clamp(26px, 4vw, 35px);
    }

    .intro ul li:not(:last-of-type) {
        margin-bottom: 1em;
    }

    .intro div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 8%;
    }

    .intro div p {
        width: fit-content;
        margin: 0;
        max-width: none;
    }

    .intro div dl {
        width: 40%;
    }

    .intro div dl dt {
        width: 100%;
        max-width: none;
        font-size: clamp(26px, 4vw, 35px);
    }

    .intro div dl dd {
        margin-top: 7%;
        font-size: clamp(18px, 4vw, 20px);
    }

    .intro div dl dd span {
        font-size: clamp(22px, 4vw, 30px);
    }

    /* =========================================
        　　　　　　放送内容
    ============================================*/

    .contents {
        max-width: 1000px;
        margin: 0 auto 15% auto;
        padding: 0 5%;
    }

    .contents div h2 {
        font-size: clamp(26px, 4vw, 50px);
    }

    .contents div {
        position: relative;
    }

    .contents div:not(:last-of-type) {
        margin-bottom: 30%;
    }

    .contents div dl {
        position: absolute;
        text-align: right;
    }

    .contents div:nth-of-type(odd) dl {
        right: 0;
    }

    .contents div:nth-of-type(even) dl {
        left: 0;
    }

    .contents div dl dt img,
    .contents .contents_2 dl dt img,
    .contents .contents_3 dl dt img {
        width: auto;
        max-width: 100%;
    }

    .contents div dl dd {
        font-size: clamp(13px, 1vw, 16px);
    }

    .contents div:nth-of-type(odd) ul {
        margin: 12% 0;
        padding: 0 1%;
        box-sizing: border-box;
    }

    .contents div:nth-of-type(even) ul {
        margin: 12% 0 12% auto;
        padding: 0 1%;
        box-sizing: border-box;
    }

    .contents div ul li {
        font-size: clamp(20px, 2vw, 26px);
    }

    .contents div ul li span {
        font-size: clamp(26px, 3.5vw, 40px);
    }

    .contents div ul li h3 {
        font-size: clamp(26px, 4vw, 40px);
        margin-top: .2em;
    }

    .contents div a:hover {
        transition-duration: .1s;
    }

    .contents div a:hover {
        opacity: .7;
    }

    /* -----#1----- */
    
    .wrap_2 .contents .contents_1 {
        margin-bottom: 23%;
    }

    .wrap_2 .contents .contents_1 dl {
        width: 25%;
        top: -10rem;
    }

    .contents .contents_1 ul {
        width: calc( 100% - 25% );
    }

    /* -----#2----- */

    .wrap_2 .contents .contents_2 dl {
        width: 45%;
        top: -8rem;
    }

    .contents .contents_2 ul {
        width: calc( 100% - 45% );
    }

    /* -----#3----- */

    .wrap_2 .contents .contents_3 dl {
        width: 23%;
        top: -13rem;
    }

    .contents .contents_3 ul {
        width: calc( 100% - 23% );
    }

    /* -----#4----- */

    .wrap_2 .contents .contents_4 dl {
        width: 30%;
        top: -10rem;
    }

    .contents .contents_4 ul {
        width: calc( 100% - 35% );
    }

    /* -----#5----- */

    .wrap_2 .contents .contents_5 dl {
        width: 28%;
        top: -10rem;
    }

    .contents .contents_5 ul {
        width: calc( 100% - 30% );
    }

    /* =========================================
        　　　　　　イベント告知
    ============================================*/

    .event {
        padding: 15% 5%;
        background-position: 0 0, 50px 50px;
        background-size: 100px 100px;
    }

    .event::before {
        background-image: linear-gradient(360deg, rgba(241, 205, 212, 0), rgba(241, 205, 212, 0.73) 10%, rgba(241, 205, 212, 1) 50%, rgba(241, 205, 212, 0.73) 90%, rgba(241, 205, 212, 0));
    }

    .event div {
        padding: 6% 5%;
        font-size: clamp(22px, 4vw, 26px);
        max-width: 1000px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .event div dl dt {
        font-size: clamp(26px, 4vw, 35px);
        margin-top: 4%;
    }

    .event div dl dd {
        margin: 3% auto;
    }

    .event div dl dd span {
        font-size: clamp(24px, 4vw, 28px);
    }

    .event div ul li a {
        transition-duration: .2s;
    }

    .event div ul li a:hover {
        opacity: .7;
    }

    /* =========================================
    　　　　　  　topボタン
    ============================================*/

    #page-top {
        width: 100px;
        transition-duration: .2s;
    }

    #page-top:hover {
        opacity: .7;
    }

}

@media screen and (min-width: 1080px) {
    .intro {
        padding: 7% 5% 13% 5%;
    }

    .contents {
        margin: 0 auto 10% auto;
    }

    .contents div:not(:last-of-type) {
        margin-bottom: 25%;
    }

    .wrap_2 .contents .contents_1 {
        margin-bottom: 20%;
    }

    .contents div dl dt img,
    .contents .contents_2 dl dt img,
    .contents .contents_3 dl dt img {
        width: auto;
        max-width: 100%;
    }

    .wrap_2 .contents .contents_1 dl,
    .wrap_2 .contents .contents_2 dl,
    .wrap_2 .contents .contents_3 dl,
    .wrap_2 .contents .contents_4 dl,
    .wrap_2 .contents .contents_5 dl {
        width: auto;
    }

    .contents div:nth-of-type(odd) ul {
        margin: 10% 0;
        padding: 0 1%;
        box-sizing: border-box;
    }

    .contents div:nth-of-type(even) ul {
        margin: 10% 0 10% auto;
        padding: 0 1%;
        box-sizing: border-box;
    }
    
    /* -----#1----- */
    .wrap_2 .contents .contents_1 {
        margin-bottom: 22%;
    }

    .contents .contents_1 ul {
        width: calc( 100% - 216px );
    }

    /* -----#2----- */
    .contents .contents_2 ul {
        width: calc( 100% - 347px );
    }

    .contents .contents_3 ul {
        width: calc( 100% - 192px );
    }

    /* -----#4----- */
    .contents .contents_4 ul {
        width: calc( 100% - 280px );
    }

    /* -----#5----- */
    .contents .contents_5 ul {
        width: calc( 100% - 248px );
    }

    .event {
        padding: 10% 5%;
    }

}