@charset "UTF-8";/* CSS変数の宣言 */
/* テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
@media (min-width : 768px){
  .for-pc { display:inline !important; }
  .for-sp { display:none !important;}}

@media (max-width : 767.99px){
  .for-pc { display:none !important; }
  .for-sp { display: inline !important;}
}

/*wide1280を解除*/
.container-open {
width:100%;
max-width:100%;
}

/*==== スライド ====*/
/* タイトルとスライドを分けるflex */
.slide-container{
width:100%;
padding: 0;
display:flex;
flex-wrap:nowrap;
justify-content: space-between;
}

.splide {
width:65%;
}

/*アーカイブ名タイトル*/
.kobecollege-title{
position: relative;
width: 35%;
margin:0;
padding:0;
z-index: 9999;
}

/*ロゴの位置*/
.kobecollege-title .logo {
position: absolute;
width:55px;
top:30%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
/*filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.6));*/
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
z-index: 999;
}

.kobecollege-title .logo img {
width:100%;
object-fit:contain;
}

.kobecollege-title h2{
position:absolute;
width:95%;
height:55%;
top: 67%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: 0 auto;
color: var(--accentColor);
text-align: center;
line-height: 1.5;
font-weight: normal;
z-index: 997;
}

.kobecollege-title h2 span#jpn {
font-size: clamp(1.2rem, 0.6019rem + 1.2476vw, 1.6rem);
}

.kobecollege-title h2 span#eng {
font-size: clamp(0.9rem, 0.1524rem + 1.5595vw, 1.4rem);
letter-spacing:0.1rem;
}

.h2-base {
position:absolute;
width:100%;
min-width:30rem;
height:100%;
top:0;
left:0;
background:rgba(255, 255, 255, 1.0);
margin: 0 auto;
padding: 0;
padding: 15px;
z-index:888;
}

.h2-base::before {
content: "";
display: block;
height: 100%;
min-height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 4px double #baa775;
z-index:889;
}

@media (max-width: 1024px) {
  .h2-base {
    min-width:15rem;
    height:100%;
    padding: 5px;
  }
  .br-sp::before {
    content: "\A";
    white-space: pre;
  }
  .kobecollege-title h2 span#jpn {
    font-size:1.6rem;
    line-height:1.0;
  }
}

@media screen and (max-width: 767px) {
  .splide {
    width:100%;
  }
  .slide-container{
    display:block;
  }
  .kobecollege-title{
    position: relative;
    display:none;
  }
  .h2-base{
    width:90%;
    min-width: unset;
    height: 50%;
    top: 20%;
    left: 0;
    right:0;
    background:rgba(255, 255, 255, 1.0);
    padding:0.5%;
  }
  .kobecollege-title .logo {
    position: absolute;
    width:55px;
    top:30%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    /*filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.6));*/
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
    z-index: 999;
  }
  .kobecollege-title .logo {/*ロゴの位置*/
    width:40px;
    top: 35%;
    padding-left:0;
  }
  .logo img {
    width:100%;
    height:auto;
    left: 0;
    right: 0;
    margin: auto;
    margin-left:0;
  }
  .kobecollege-title h2 span {
    position: absolute;
    margin: auto;
    font-size:1.5em;
  }
  .kobecollege-title h2 span#jpn {
    top: 32px;
    top:15px;
    left: 0;
    right: 0;
    margin: auto;
    font-size:1.3rem;
  }
  .kobecollege-title h2 span#eng {
    top: 52px;
    top:40px;
    left: 0;
    right: 0;
    margin: auto;
    font-size:1.0rem;
  }
}

/*スライドの資料名テキスト調整*/
.slide-title{
padding: .5rem 1rem;
z-index: 999;
}

/*再生停止インジケータ非表示を解消*/
@media (max-width:999px) {
  .splide__arrows > button.splide__toggle{
    padding:0;
    z-index:9999;
  }
}

/*intro*/
.container#intro{
/*background:#fff;*/
margin-top: 0;
padding:.5rem;
max-width: 100%;
margin-bottom:6rem;
background:#f7f7f7;
}

#intro > .intro-container {
width:100%;
max-width:1280px;
margin:0 auto;
}

#intro > .intro-container > .intro-txt{
color:var(--accentColor);
}

@media (max-width:575px) {
  #intro > .intro-container{
    padding: 0.5rem !important;
}
}

/*CONTENTS見出し*/
[class^="list-design"] h3{
position:relative;
margin:0 auto;
padding:0;
margin-top:4rem;
margin-bottom: 2.5rem;
}

[class^="list-design"] h3::before {
position:absolute;
top:-64px;
top:-4rem;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
content:"";
font-size:3rem;
color:rgba(178, 163, 20, .3);
font-style:italic;
display: inline-block;
}

#cont1 h3::before {content:"Kobe College"}
#cont2 h3::before {content:"Campus Tour"}
#cont3 h3::before {content:"Category"}
#pickup h3::before {content:"Highlights"}

[class^="list-design"] h3::after {
position:absolute;
content:" 　　";
top:-8px;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
width:250px;
background-image:url(../images/clover-border3.png);
background-repeat:no-repeat;
background-size:contain;
}

@media screen and (max-width: 767px) {
  [class^="list-design"] h3{
    margin-bottom: 1.5rem;
  }
  [class^="list-design"] h3::before {
    position:absolute;
    top:-5rem;
    line-height:1.0;
  }
}

/*====神戸女学院を知る====*/
/* list-design--flexの追記 中央揃え */
[class^="list-design"] > .contents-wrap{
justify-content:space-between;
align-items:stretch;
}

[class^="list-design1"]#cont1 .item p{
position: absolute;
top: 90%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
/*  display: grid;*/
width:90%;
height:90%;
padding:1rem .5rem;
font-size: 1.25rem;
line-height: 1.5;
/*background: rgba(255,255,255,0.6);*/
background: rgba(255,255,255,0.8);
color:var(--accentColor);
mask: radial-gradient(20px at 40px 40px, transparent 98%, black) -40px -40px;
}

[class^="list-design1"]#cont1 .item p > span.br{
font-size: 1.0rem;
padding:0;
border-top:solid 1px var(--accentColor);
}

 /* 4列 */
[class^="list-design1"]#cont1.column4 .item{
overflow: hidden;
/*width: calc(100% / 4 - 1rem );*/
width: calc(100% / 4 - 3rem );
height:100%;
border:none;
margin: 1.5rem;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
}

/*list-design 列数固定解除*/
@media (max-width:900px) {
  [class^="list-design1"]#cont1.column4 .item{
      width: calc(100% / 3 - 4rem );
    }
}

@media screen and (max-width: 767px) {
  [class^="list-design1"]#cont1.column4 .item{
    overflow: hidden;
    width: calc(100% / 2 - 3rem );
    margin:1rem auto;
  }
}

@media (max-width:575px) {
  /* list-deign1 */
  .list-design1 .contents-wrap {
    display:block;
    margin:0 auto !important;
    padding:0 0.5rem;
  }
  [class^="list-design1"]#cont1.column4 .item{
    width: 80%;
    aspect-ratio: 3 / 2;
    margin-top: 0;
  }
}

/*====神戸女学院キャンパス　バーチャルツアー====*/
.list-design3.column1 .item{
border:solid 1px #ccc;
box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
}

.list-design3.column1 .item > div{
width:100%;
height: 100%;
aspect-ratio: 2 / 1 ;
overflow: hidden;
min-height:250px;
}

/* h4-英語表記部分 */
.e-title {
  font-size: 0.8em;
  padding-left: 1.2em;
}

/* list-design3 レスポンシブを1024pxに変更*/
/* 1列 itemをgridのまま縦並び
@media (min-width: 768px) and (max-width: 1024px) {*/
@media (max-width: 1024px) {
  .list-design3.column1 > .contents-wrap {
    display: block;
    width:70%;
    margin:1rem auto;
  }
  .list-design3.column1 .item{
    overflow: hidden;
    display: grid;
    grid-template:"img" max-content
           "ttl" max-content
            "intro" max-content
            "link" max-content
            /1fr;
    background-color: #ffffff;
    margin-bottom:2rem;
  }
  .list-design3.column1 .item > div{
    grid-area: auto;
    width:100%;
    grid-area: img;
    aspect-ratio: 2 / 1 ;
    overflow: hidden;
  }
  .list-design3.column1 .item > div img{
    transition: transform .6s ease;
    width: 100%;
    max-width:1024px;
    object-fit: cover;
    overflow: hidden;
  }
  .list-design3 .item img:hover{
    /*transform: scale(1.07);*/
    transform: none;
  }
  .multiple-link a.arrow{
    grid-area: link;
  }
}

@media only screen and (max-width: 767px) {
  .list-design3.column1 > .contents-wrap {
    display: block;
    width:90%;
    margin:1rem auto;
  }
}

@media (max-width: 999px) {
  .list-design1.outer-center .item {
    margin:1rem auto;
    /*  aspect-ratio: 16 / 9 ;*/
  }
}

/*ボタンサイズを調整*/
@media (min-width: 1024px) {
  .column1.multiple-link a.arrow{
    width:auto;
    /*max-width:90%;*/
    max-width:50%;
    margin-left:1rem;
  }
}

@media (max-width: 1023.99px) {
  .column1.multiple-link a.arrow{
    max-width:70%;
    margin-left:1rem;
  }
}

@media (max-width: 575px) {
  .column1.multiple-link a.arrow{
    max-width:90%;
    margin-left:1rem;
  }
}

/*====資料種別から探す====*/
/*ボタン*/
.list-design5 a{
/*  font-size: 1.2rem;*/
font-size: 1.25rem;
color: #ffffff;
line-height: 1.5;
background: var(--accentColor);
}

.list-design5 a > span.br{
font-size: 1.0rem;
padding:0;
border-top:solid 1px #fff;
}

/*list-design 列数固定解除*/
@media (max-width:900px) {
  [class^="list-design1"].column4 .item,
  [class^="list-design1"].column5#pickup .item{
      width: calc(100% / 2 - 4rem );
    }
}

@media screen and (max-width: 767px) {
  [class^="list-design1"].column4 .item/*, [class^="list-design1"].column5#pickup .item*/{
    overflow: hidden;
    width: calc(100% - 3rem );
  }
  [class^="list-design"] > .contents-wrap li {/*中央揃え*/
     margin:0 auto;
    }
}

/*====ランダムピックアップ====*/
#pickup {
width: 100%;
max-width: 1280px;
margin: 2rem auto;
display: block;
}

#image-container {
width: 100%;
display: flex;
flex-wrap: wrap;
aspect-ratio: unset;
margin:0 auto;
width:100%;
border:none;
aspect-ratio: unset;
border:none;
}

#image-container a {
text-align: center;
text-decoration: none;
display: block;
width: calc(100% / 5 - 1rem);
margin: 0 auto;
padding: 0 1px;
position: relative;
/*  background: #000;*/
background: #f0f0f0;
}

#image-container img {
/*width: 180px;
 height: 180px;*/
width:100%;
height:100%;
min-width:100%;
max-height:180px;
object-fit: cover;
object-position:top;
/*display: block;*/
margin: 0 auto;
aspect-ratio: 3 / 2;/*2026.2.26追記*/
transition: opacity 0.3s ease;/*2026.2.26追記*/
display:block;/*統合　2026.3.6*/
background: #f0f0f0 !important;
}

/*[class^="list-design1"]#pickup .item:hover img{*/
#image-container:hover img {/*記述変更　2026.3.6*/
/* transform: scale(1.1); */
 transform: scale(1.0);
}

#image-container p {
/*  font-size: 14px;*/
color: #fff;
/*background: rgb(51, 51, 51, 0.9);*/
background: rgba(var(--accentColorRGB), 0.7);
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: -webkit-box;/* 以下-最大行数を2行に設定 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 2;
-webkit-line-clamp: 2;
height: calc(1.5em * 2);
margin-bottom:0;
max-height:4rem;
min-height: 3rem;
padding:.5%;
font-size: 1.0rem;
 /* line-height: 1.5;*/
line-height: 1.0;
}

@media (max-width:999px) {
[class^="list-design1"]#pickup.column5 .item{
/*  overflow: hidden; */
/*width: calc(100% / 5 - 1rem );*/
margin: 1rem auto;
width: 100%;
max-width:100%;
height:100%;
/*	height:stretch;*/
max-height:stretch;
flex-wrap: wrap;
/*  width:100%;*/
height:100%;
padding:1rem;
}
#image-container a {
width: calc(100% / 3 - 1rem);
min-width: calc(100% / 3 - 2rem);
max-height:unset;
height:unset;
aspect-ratio: 3 / 2;
margin-bottom:1rem;
 /* max-width: 180px;*/
}
}

@media (max-width:767px) {
  #image-container {
    height:stretch;
    max-height:stretch;
    padding:0 2rem;
    width:90%;
    margin:0 auto;
  }
  #image-container a {
    width: calc(100% / 2 - 1rem);
    min-width: calc(100% / 2 - 2rem);
    aspect-ratio: 3 / 2;
    max-width:180px;
    height:stretch;
    margin:1rem auto;
  }
  #image-container img {
    height:auto;
    max-height:100%;
  }
}

/*====お知らせ・外部リンク====*/
.container h3 {
position: relative;
text-align: center;
background:#fff;
display: flex;
align-items: center;
width:50%;
margin:0 auto;
}

.container h3::before, .container h3::after {
content:"";
background: var(--accentColor);
height: 1px;
flex-grow: 1;
}

.container h3::before {
margin-right:1em;
}

.container h3::after {
margin-left:1em;
}

/*list-design 列数固定解除*/
@media (max-width:999px) {
  .container h3 {
    width:80%;
    top: 50%;
    left: 0;
    right:0;
    margin: auto;
  }
}

@media (max-width: 767px) {
  .container h3 {
    width:90%;
  }
}

section.container > ul {
margin-top:2em;
}

/*footer*/
footer {
background:var(--accentColor);
color:#fff;
}

nav#footer-links ul li a {
color:#fff;
}