@charset "UTF-8";

#raindays { background: url(../../raindays/img/bg.jpg); font-feature-settings: "palt"; letter-spacing: 0.08em; }
#raindays.prv #container { background: none;  }
#contents { width: 100%; }

.view_sp { display: none; }

#breadcrumbs { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); margin: 0; text-shadow: 0 0 5px #000; letter-spacing: 0.1em; }
#breadcrumbs li + li::before { content: '>'; font-size: 12px; color: #fff; }
#breadcrumbs li span { display: inline; padding: 0; }
#breadcrumbs a { font-size: 13px; color: #fff; }


.serif {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", serif;
}

/* tit_col */
.tit_col { position: relative; }
.tit_col h2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 3vw; }
.tit_col h2 img { width: min(738px, 46.125%); height: auto; }
.tit_col .photo img { width: 100%; height: auto; object-fit: cover; }


/* point */
.point { padding-bottom: 80px; }
.point:not(#sec01) { padding-top: 140px; background: url(../../raindays/img/sec_bg.webp) no-repeat center top/1600px; }
.point .inner { max-width: 1100px; width: 90%; margin: 0 auto; }
.point .main_photo { overflow: hidden; position: relative; }
.point .main_photo img { border-radius: 20px; }
.point .main_photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #fcfcfc 0%, #fcfcfc 2%, transparent 20%, transparent 100%); }
.point .txt_col { display: flex; align-items: flex-start; gap: 30px; }
.point .txt_col .num { background: url(../../raindays/img/point_tit_bg.webp) no-repeat center/contain; color: #fff; width: clamp(140px, 16%, 180px); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; margin-top: -50px; position: relative; z-index: 1; }
.point .txt_col .num span { font-size: 60px; line-height: 1; padding-top: 23%; }
.point .txt_col .txt .stit { font-size: 35px; color: #044478; line-height: 1.4; letter-spacing: 0.15em; font-weight: bold; }
.point .txt_col .txt .stit span { display: inline; font-size: 50px; border-bottom: 3px solid #ffdc0d; padding-bottom: 5px; line-height: 1.5; }
.point .txt_col .txt01 { font-size: 24px; margin-top: 20px; font-weight: bold; line-height: 1.6; color: #412319; }
.point .txt_col .txt01 span { color: #f75d1e; }
.point .txt_col .txt02 { font-size: 16px; margin-top: 10px;  }
.point .gallery { display: flex; gap: 25px; margin-top: 50px;}
.point .gallery .item { border-radius: 10px; overflow: hidden; flex-grow: 1; }

.point .gallery:not(:has(> div:nth-child(3)))  { gap: 4.5%; }
.point .gallery:not(:has(> div:nth-child(3)))  .item { max-width: 500px;}

.btn_grad { position: relative; display: block; width: min(100%, 500px); margin: 80px auto 0; padding: 30px 0; border-radius: 45px; box-sizing: border-box; font-size: 25px; text-align: center; color: #fff; background: #FD644F; background: linear-gradient(0deg, rgba(1, 91, 171, 1) 0%, rgba(3, 153, 220, 1) 100%); transition: opacity .5s;
}
.btn_grad::after { position: absolute; top: calc(50% - 12px); right: 70px; content: ''; display: block; width: min(12%, 60px); height: 12px; border-right: 1.5px solid; border-bottom: 1px solid; transform: skew(68deg); transition: right 0.25s linear, border-color 0.25s linear;}
.btn_grad:hover { opacity: .7; }


@media screen and (max-width: 768px) {
    .point .txt_col { flex-direction: column; align-items: center; gap: 15px; }

    .btn_grad {max-width: 90%; padding: 20px 0; font-size: 20px;}
}

@media screen and (max-width: 600px) {
    .view_sp { display: block; }
    .view_pc { display: none!important;}

    /* tit_col */
    .tit_col { position: relative; background: url(../../raindays/img/main_tit_bgimg_sp.png) no-repeat center top/100%; }
    .tit_col h2 { position: static; margin: 0; padding: 10vw 0 5vw; }
    .tit_col h2 img { width: 80%;margin-left: 4.5%; }
    .tit_col .photo { display: flex; position: relative; }
    .tit_col .photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #fcfcfc 0%, #fcfcfc 3%, transparent 25%, transparent 100%) }
    .tit_col .photo div { flex: 1; }

    .point { padding-bottom: 10vw; }
    .point:not(#sec01) { padding-top: 15vw; background-size: 190%; }
    .point .main_photo img { border-radius: 10px; }
    .point .txt_col { }
    .point .txt_col .num { width: 22vw; margin-top: -7vw; }
    .point .txt_col .num span { font-size: 7vw; }
    .point .txt_col .txt .stit { font-size: 20px; text-align: center; }
    .point .txt_col .txt .stit span { font-size: 26px; border-bottom: 2px solid #ffdc0d; }
    .point .txt_col .txt01 { font-size: 16px; margin-top: 15px; text-align: center; }
    .point .txt_col .txt02 { font-size: 14px; margin-top: 5px; text-align: center; }
    .point .gallery { gap: 2%; margin-top: 30px;}
    .point .gallery .item { border-radius: 5px; }

    .point .gallery:not(:has(> div:nth-child(3)))  { gap: 4%; }
    .point .gallery:not(:has(> div:nth-child(3)))  .item { max-width: 48%;}

    .btn_grad { margin-top: 20px; }
}