@charset "UTF-8";

@font-face {
  font-display: swap;
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/m-plus-rounded-1c-v22-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/zen-maru-gothic-v19-japanese-500.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/zen-maru-gothic-v19-japanese-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/zen-maru-gothic-v19-japanese-900.woff2') format('woff2'); 
}

#shirakobato {
    font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","BIZ UDRounded", "HG丸ｺﾞｼｯｸM-PRO",sans-serif;
}

.shirakobato_top_inner,
.info_txt {
    font-family:"GenJyuuGothic";
}

body, h1, h2, h3, h4, p, ul, ol, figure, img,hr {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

.sp-br {
    display: none;
}

@media only screen and (max-width: 768px) {
    .sp-br {
        display: inline;
    }
}

#shirakobato {
    width: 70%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    #shirakobato {
        width: 100%;
    }
}

.thought_ttl_m,
.thought_ttl_b,
figcaption,
.shirakobato_change_name {
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}


.shirakobato_top,
.info_txt,
.park_detail_btn {
    font-size: clamp(13px, 1.9vw, 30px);
    font-weight: 600;
    color: #323232;
}

.info_txt_spe_hukidashi .fukidashi_white,
.thought_txt,
.change_name_list  {
    font-size: clamp(12px, 1.9vw, 23px);
    font-weight: 600;
    color: #323232;
}

.thought_ttl_m {
    font-size: clamp(13px, 2.3vw, 25px);
    font-weight: 600;
    color: #323232;
}

/* .thought_txt {
    font-size: clamp(13px, 2.9vw, 30px);
    font-weight: 700;
    color: #323232;
} */

.change_name_ttl p {
    font-size: clamp(11px, 2vw, 28px);
    font-weight: 600;
}

._txt_big {
    font-size: clamp(15px, 3.2vw, 38px);
    font-weight: 700;
}

.thought_ttl_b {
    font-size: clamp(20px, 3.5vw, 38px);
    font-weight: 700;
}

figcaption {
    font-size: clamp(8px, 2.5vw, 20px);
    font-weight: 600;
    text-align: center;
    margin-top: 1em;
}

.foot_txt {
    font-size: clamp(15px, 3.4vw, 35px);
    font-weight: 600;
    color: #0f66a6;
    white-space: nowrap;
}

._txt_mor_gray {
    color: #464646;
}

.shirakobato_top_inner,
.shirakobato_info_inner,
.shirakobato_thought_inner,
.shirakobato_facility_inner,
.shirakobato_change_name_inner,
.shitakobato_foot_inner {
    width: 80%;
    margin: 0 auto;
    padding-top: clamp(20px, 2.3vw, 65px);
    padding-bottom: clamp(20px, 2.3vw, 65px);
}

.shirakobato_top_inner {
    padding-bottom: clamp(50px, 4.8vw, 120px);
}

@media only screen and (max-width: 1350px) {
    .shirakobato_top_inner {
        width: 85%;
    }
}

@media only screen and (max-width: 1024px) {
    .shirakobato_top_inner,
    .shirakobato_info_inner,
    .shirakobato_thought_inner,
    .shirakobato_facility_inner,
    .shirakobato_change_name_inner,
    .shitakobato_foot_inner {
        width: 90%;
    }
}


/* shirakobato_fv */
.shirakobato_fv {
    text-align: center;
}

.tpp_back_img {
    padding-top: 100px;
}

@media only screen and (max-width: 768px) {
    .tpp_back_img {
        padding-top: 170px;
}

}
@media only screen and (max-width: 767px) {
    .tpp_back_img {
        padding-top: 55px;
}
}

.tpp_back_img img {
    width: 100vw;
    object-fit: contain;
}

.shirakobato_top {
    background-image: url(../images/shirakobato_top_back_dots.jpg);
    position: relative;
}

.fv_top_ttl {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5em;
    border-radius: 35px;
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: -12%;
}

@media only screen and (max-width: 768px) {
    .fv_top_ttl {
    margin-top: -12%;
}
}

@media only screen and (max-width: 500px) {
    .fv_top_ttl {
    padding: 2em;
    margin-top: -18%;
}
}

.fv_txt_left {
    text-align: left;
    font-size: clamp(11px, 2.1vw, 27px);
    padding: 10% 0;
}

.top_chara_img {
    position: absolute;
    bottom: 20px;
    right: 0;
    z-index: 0;
}

.color-bar-gradient {
    border: none; 
    height: 20px; 
    background: linear-gradient(to right, 
    #e9545d 0%,  #e9545d 20%,
    #413992 20%, #413992 40%,
    #37a0da 40%, #37a0da 60%,
    #a9cd36 60%, #a9cd36 80%,
    #f7b515 80%, #f7b515 100%
    );
    position: relative;
    z-index: 1;
    clear: both;
}


/* shirakobato_info */
.shirakobato_info {
    background-color: #fafad2;
    text-align: center;
    z-index: 1;
}

.info_ttl._top {
    padding: 2em 0 1em 0;
    width: 60%;
    margin: 0 auto;
}

.info_txt_spe {
    display: flex;
    margin: 4em auto;
    text-align: left;
    align-items: center;
}

.info_txt_spe p {
    flex: 1;
}

.info_txt_spe_hukidashi {
    display: flex;
    align-items: center;
    position: relative;
    padding: 8px;
    border-radius: 15px;
    background-color: #ffd264;
    color: #323232;
}

.info_txt_spe_hukidashi._left {
    margin-left: 2em;
    flex: 3;
}

.info_txt_spe_hukidashi._right {
    margin-right: 2em;
    flex: 2;
}

.info_txt_spe_hukidashi::before {
    position: absolute;
    width: 30px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffd264;
    content: '';
}

.info_txt_spe_hukidashi._left::before {
    left: -25px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.info_txt_spe_hukidashi._right::before {
    right: -25px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.fukidashi_white {
    background-color: #fff;
    border-radius: 10px;
    padding: .8em;
}


/* shirakobato_thought */
.shirakobato_thought_inner {
    padding-bottom: 0;
}

.shirakobato_thought {
    padding: 2em 0;
}

.thought_ttl_b {
    margin-bottom: .5em;
}

figure {
    padding-bottom: clamp(70px, 6vw, 120px);
}

.thought_txt {
    text-align: left;
    margin-bottom: 2em;
    line-height: 1.6em;
}

.thought_img {
    text-align: right;
    position: relative;
    top: -3em;
    width: 20%;
    float: right;
    margin-top: 2em;
}

.txt_float_box {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

._txt_orange {
    color: #e86415;
}

._txt_green {
    color: #4aa940;
}

.figcaption {
    font-size: clamp(8px, 4vw, 32px);
}

@media only screen and (max-width: 425px) {
    .thought_img {
    width: 25%;
}
}

/* shirakobato_facility */
.shirakobato_facility {
    background-color: #fffae6;
    text-align: center;
}

.shirakobato_facility_inner p {
    width: 85%;
    margin: 1.5em auto;
}

.facility_chara_img img {
    width: 25%;
    margin: 1em auto;
}

.facility_txt_sub img {
    width: 85%;
}

.facility_txt_sub._min_txt img {
    width: 65%;
    margin-bottom: .5em;
}

.facility_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 8em;
    column-gap: 4em;
    align-items: end;
    margin-top: 7em;
}

.facility_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin-bottom: 2em;
}

.facility_list_txt {
    display: block;
    margin-bottom: auto;
}

@media only screen and (max-width: 1024px) {
    .facility_list {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 425px) {
    .shirakobato_facility_inner p {
        margin: .8em auto;
    }

    .facility_list {
        column-gap: 2em;
        row-gap: 6em;
    }
}

/* shirakobato_change_name */
.shirakobato_change_name {
    background-color: #fffae6;
    text-align: center;
}

.change_name_ttl img {
    margin: 1em 0;
}

.change_name_list {
    padding: 0;
    text-align: left;
}

.change_name_list li {
    display: flex;
    align-items: baseline;
    margin: .5em;
}

.old_name {
    display: flex;
    align-items: center; 
    flex: 1;
    white-space: nowrap;
}

.old_name::after {
    content: "";
    flex: 1;
    height: 0; 
    border-top: 3px dotted #000;
    margin: 0 10px;
}

@media only screen and (max-width: 1024px) {
    .change_name_list li {
        margin: 1em;
    }

    .new_name {
        flex: 1;
    }
}



/* shitakobato_foot */
.shitakobato_foot {
    background-color: #fff;
}

.foot_end_txt {
    display: flex;
    gap: 3em;
    align-items: center;
    text-align: left;
    width: 85%;
    margin: 0 auto;
    padding-left: 2em;
    padding-bottom: 2em;
}

.foot_img {
    margin: 1.5em 0;
    flex: 1;
}

.foot_txt {
    margin: 1.5em 0;
    flex: 1.5;
}

.park_detail_btn {
    background-color: #4aa940;
    color: #fff;
    padding: 1em 2em;
    border-radius: 80px;
    box-shadow: 4px 4px #98c025;
    display: inline-block;
    align-items: center;
    letter-spacing: .1em;
    margin-top: 1em;
    margin-bottom: 2em;
}

.park_detail_btn img {
    margin-left: 1em;
    width: 12%;
}

.foot_ttl img {
    width: 60%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .foot_end_txt {
        gap: 1em;
    }
}

@media only screen and (max-width: 570px) {
    .foot_end_txt {
        width: 80%;
    }
}