@charset "utf-8";

/* ============================================================================================== */
/* 全体共通のスタイル（モバイルファースト） */
/* ============================================================================================== */
.spbr {
    display: block;
}

.pcbr {
    display: none;
}

.bold {
	font-weight: 400;
}

.txt-only {
    width: calc(100% - 50px);
}

.child .large-title.cultural {
    text-align: center;
}

.outline {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.contents-inner {
    text-align: left;
}

.intro-txt {
    margin-bottom: 20px;
}

.cultural-maintxt {
    text-align: center;
    /*font-size: 2.0rem;*/
    font-size: 1.8rem;
    line-height: 1.8;
}

/* ------------------------------------------ */
/* cultural-bnr セクション */
/* ------------------------------------------ */
.cultural-bnr {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    
    /* 背景色と画像は擬似要素に移動するため、ここでは背景色のみ */
    background-color: rgba(91, 176, 22, 1);
}

.cultural-bnr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../../asset/images/region/cultural/bnr-bg.jpg');
    background-repeat: no-repeat;
    background-size: 250%;
    background-position: 20% 10%;
    mix-blend-mode: multiply;
    opacity: 0.5;
    transform: scale(1);
    transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.cultural-bnr:hover::before {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.cultural-bnr a {
    position: relative;
    z-index: 2; /* 擬似要素より手前に配置 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%; /* 親要素の高さに合わせる */
    padding: 20px 30px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: transparent; 
    color: #fff;
    text-align: left;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.05); 
    aspect-ratio: 16 / 9;
}

.cultural-bnr .bnr-text {
    width: calc(100% - 50px);
}

.cultural-bnr .bnr-text h3 {
    font-size :2.8rem;
    font-weight :500;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 10px;
}

.cultural-bnr .bnr-text h3 .sub {
    display: block;
    font-size :1.5rem;
    padding-right: 20px;
    margin-bottom: 10px;
}

.cultural-bnr .bnr-text p {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.8;
}

.cultural-bnr .svg-arrow {
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 50%;
}

/* ------------------------------------------ */
/* cultural-intro セクション */
/* ------------------------------------------ */

.intro-contents {
    margin-bottom: 30px;
}

.cultural-intro .door-item .text small {
    display: block;
    font-size: 1.1rem;
}

.cultural-intro .door-item .text h3 {
    font-size: 1.8rem;
}

.cultural-intro .door-item .text p {
    font-size: 1.2rem;
}

.cultural-intro .door-item a {
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #5bb016 !important;
    background-color: rgba(91,176,22,.15);
}

.cultural-intro .door-item a:hover {
    background-color: transparent !important;
}

.cultural-intro .door-item .svg-arrow {
    fill: rgb(26 26 26);
}

.cultural-intro .chart-member {
	display: block;

}

.chart-member .img-wrap,
.chart-member .txt-wrap {
	width: 100%;
}

.chart-member .img-wrap {
	margin-bottom: 20px;
}

.chart-member .txt-wrap {
	border: 0.5px solid rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	padding: 20px;
}

.chart-member .txt-wrap .bold {
	font-weight: 400;
}

.chart-member .member-list {
	margin-top: 10px;
}

.chart-member .member-item {
	margin-bottom: 10px;
}

.chart-member .member-item p {
	font-size: 1.3rem;
}

.chart-member .member-item p span::before {
    content: "";
    margin-right: 1rem;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100px;
}

.geidai::before {
    background-color: #9db014;
}

.university::before {
    background-color: #5bb016;
}

.municipality::before {
    background-color: #17b7b0;
}

.museum::before {
    background-color: #17af75;
}


/* ------------------------------------------ */
/* cultural-keyword セクション */
/* ------------------------------------------ */
.cultural-keyword .keyword-inner {
    border: 0.5px solid rgba(0,0,0,0.3);
    border-radius: 5px;
    padding: 20px;
}

.cultural-keyword .keyword-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 20px;
}



/* ------------------------------------------ */
/* cultural-news セクション */
/* ------------------------------------------ */
.cultural-news .more-detail {
    text-align: center;
}

.cultural-news .article-gategory {
    display: inline-block;
    border-bottom: 1px solid #5fb81a;
    font-size: 1.1rem;
    margin-bottom: 8px;
    line-height: 1.3;
    padding-bottom: 4px;
}

.cultural-news .article-title {
    font-weight: 400;
}

/* ------------------------------------------ */
/* material-list セクション */
/* ------------------------------------------ */
.material-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.material-item a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
}

.material-item a:hover {
    background-color: rgb(91, 176, 22, 0.15);
}

.material-item a:hover .material-img {
    filter: brightness(1.05);
}

.material-item .material-img {
    max-width: 80px;
    margin : 0 auto;
    transition: filter .3s ease;
}

.material-item .material-txt {
    width: calc(100% - 50px);
}

.material-item .material-txt h5 {
    font-weight: 400;
    font-size: 1.4rem;
}

.material-item .material-txt p {
    font-size: 1.3rem;
}

/* ------------------------------------------ */
/* logo セクション */
/* ------------------------------------------ */

.bunka-logo {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
}

.bunka-logo figure {
    width: 100px;
}

.bunka-logo p {
    align-content: center;
}

/* ------------------------------------------ */
/* slider セクション */
/* ------------------------------------------ */
.slider {
    position: relative;
    overflow: hidden;
    height: 250px;
}
  
.slider .sliderWrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
}
  
.slider__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin-top: 0;
    animation: imgLoop 80s linear infinite 1s both;
}
  
.slider__item {
    position: relative;
    height: 250px;
    margin-right: 10px;
    list-style: none;
    padding: 0;
    width: auto;
}
  
.slider__item:before {
    content: none;
}

.slider__item img {
    border-radius: 5px;
    height: 100%;
    width: auto;
    object-fit: cover;
}


@media (min-width: 80em) {

    .slider {
      height: 490px;
    }
  
    .slider .sliderWrap {
      height: 490px;
    }
  
    .slider__list {
      -webkit-animation: imgLoop 160s linear infinite 1s both;
              animation: imgLoop 160s linear infinite 1s both;
    }
    
    .slider__item {
      margin-right: 15px;
      width: auto;
      height: 490px;
    }

    .slider__item img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }
  
}

@-webkit-keyframes imgLoop {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes imgLoop {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}


/* ============================================================================================== */
/* lightcase セクション */
/* ============================================================================================== */
#lightcase-overlay {
    background-color: rgba(255,255,255,.95) !important;
}

#lightcase-case {
    font-family: 'Noto Sans JP', sans-serif; 
    box-sizing: border-box;
    box-shadow: 0 0px 50px rgba(0, 0, 0, 0.05); 
    text-shadow: none;
}

.lightcase-inlineWrap {
    padding: 45px;
}

.lightcase-inlineWrap .modal-inner .svg-question {
    display: block;
    margin: 0 auto;
    padding-bottom: 5px;
}

.lightcase-inlineWrap .modal-inner h5 {
    font-size: 2.4rem;
    margin-bottom: 20px;
    text-align: center;
}

.lightcase-inlineWrap .modal-inner p {
    margin-bottom: 10px;
}

.lightcase-inlineWrap .modal-inner h5,
.lightcase-inlineWrap .modal-inner p {
    font-family: 'Noto Sans JP', sans-serif !important;
    color: rgba(0,0,0,.8) !important;
    font-weight: 300 !important;
    text-shadow: none;
}

.lightcase-open {
    overflow: hidden;
}

.lightcase-icon-close {
    color: #5bb016 !important;
}

#lightcase-info #lightcase-title,
.lightcase-icon-next::before,
#lightcase-sequenceInfo {
    display: none !important;
}

a[class*='lightcase-icon-']:hover {
    opacity: .5 !important;
}

a[data-rel="lightcase"] {
    cursor: pointer;
}

a[data-rel="lightcase"]:focus {
    outline: none;
}

html[data-lc-type=inline] #lightcase-content .lightcase-contentInner,
html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner,
html[data-lc-type=error] #lightcase-content .lightcase-contentInner {
    padding: 30px !important;
}

/* ============================================================================================== */
/* メディアクエリ (画面幅が広がる順) */
/* ============================================================================================== */

/* Tablet (541px) */
@media screen and (min-width: 541px) {

    .spbr {
        display: none;
    }

    .cultural-maintxt {
        /*font-size: 2.3rem;*/
        font-size: 2.0rem;
    }

}

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

    .pcbr {
        display: block;
    }

    .cultural-maintxt {
        /*font-size: 2.8rem;*/
        font-size: 2.4rem;
        margin-bottom: 30px;
    }

    .cultural-bnr {
        margin-bottom: 45px;
    }

    .cultural-bnr a {
        aspect-ratio: 8 / 3;
    }

    .cultural-bnr .bnr-text {
        width: 100%;
    }

    .cultural-bnr .bnr-text h3 {
        font-size: 3.6rem;
    }

    .cultural-bnr .bnr-text h3 .sub {
        font-size: 1.8rem;
    }

    .cultural-bnr .bnr-text p {
        font-size: 1.5rem;
    }

    .door-list.harf .door-item small {
        display: inline-block;
        font-size: 1.5rem;
        padding-right: 10px;
    }

    .door-list.harf .door-item .text h3 {
        font-size: 1.6em;
    }

    .cultural-intro .chart-member {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 4rem;
	}

	.chart-member .img-wrap,
	.chart-member .txt-wrap {
		width: 50%;
	}

	.chart-member .img-wrap {
		margin-bottom: 0;
	}

    .cultural-news .more-detail {
        text-align: right;
    }

}

/* Desktop (960px) */
@media screen and (min-width: 960px) {
	
    .txt-only {
        padding-bottom: 60px;
    }

     .cultural-maintxt {
        /*font-size: 3.2rem;*/
        font-size: 3.0rem;
    }

    .cultural-bnr {
        margin-bottom: 60px;
    }

    .cultural-bnr::before {
        background-size: 150%;
        background-position: 0% 10%;
    }

    .cultural-bnr a {
        aspect-ratio: 4 / 1;
    }

    .cultural-bnr .bnr-text h3 {
        font-size: 4rem;
    }

    .cultural-bnr .bnr-text h3 .sub {
        display: inline-block;
        font-size: 2rem;
        margin-bottom: 0;
    }

    .cultural-bnr .bnr-text p {
        font-size: 1.6rem;
    }

    .cultural-bnr .svg-arrow {
        width: 30px;
        height: 30px;
        padding: 20px;
    }

    .door-list.harf .door-item .text h3 {
        font-size: 2.8rem;
    }

    .door-list .door-item h3 .en {
        font-size: 1.3rem;
    }

    .door-list.harf .door-item .text p {
        font-size: 1.4rem;
    }

    .cultural-keyword .keyword-inner {
        padding: 30px 20px;
    }

    .cultural-keyword .keyword-list {
        gap: 30px;
    }


    .cultural-news .article-item:nth-child(4) {
        display: none;
    }

    .cultural-news .article-item {
        width: calc(33.33% - 10px);
    }

    .cultural-news .article-gategory {
        font-size: 1.2rem;
    }

    .cultural-news .article-title {
        font-size: 1.5rem;
    }

    .material-list {
        margin-top: 40px;
        text-align: left;
    }

    .material-item a {
        gap: 20px;
        padding: 20px 20px;
    }

    .material-item .material-img {
        width: 10%;
        margin :0;
    }

    .material-item .material-txt {
        width: calc(90% - 60px);
    }

    .material-item .material-txt h5 {
        font-size: 1.6rem;
    }

    .material-item .material-txt p {
        font-size: 1.4rem;
    }

    .slider {
        margin-bottom: 60px;
    }

    html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner {
        padding: 0px !important;
    }

    html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
        padding: 40px !important;
    }

}

/* ------------------------------------------ */
/* Desktop (1100px) */
/* ------------------------------------------ */
@media screen and (min-width: 1100px) {

    .cultural-bnr {
        margin-bottom: 80px;
    }

}