/* 横スクロール */

.horizontal_scroll {

  overflow-x: scroll;

  -webkit-overflow-scrolling: touch;

  padding: 0 0 30px 8px;

  display: -ms-flexbox;

  display: flex; }



/* 画面幅が768px以上の場合、横スクロールを解除 */

@media screen and (min-width: auto) {

  .horizontal_scroll {

    overflow-x: inherit;

    padding: 0 8px 6px; } }



.horizontal_scroll > li {

  width: 100%;

  min-width: 230px; }



@media screen and (min-width: auto) {

  .horizontal_scroll > li {

    min-width: inherit; } }



.horizontal_scroll > li:not(:last-child) {

  margin-right: 5px; }



.horizontal_scroll > li:last-child {

  padding-right: 5px; }



@media screen and (min-width: auto) {

  .horizontal_scroll > li:last-child {

    padding-right: 0; } }



.horizontal_scroll img {

  vertical-align: bottom; }





/* タイトル */

.slider_ttl {

  color: #333;

  text-align: center; /* テキストを中央揃えに変更 */

  width: 100%;

  /* heightプロパティを削除し、line-heightのみで高さを調整 */

  line-height: 40px;

  /* paddingを具体的な値に設定し、継承による不意の影響を避ける */

  padding: 0px; /* 上下のpaddingは0に、必要に応じて左右のpaddingを調整 */

  margin: 0 0 20px 0;

  background-color: #e5e5e5;

  text-indent: 8px; /* 必要に応じて調整 */

  font-size: 16px;

  font-weight: 700;

  box-sizing: border-box;

  /* vertical-alignを追加して、テキストの垂直位置を微調整 */

  vertical-align: middle;

}







/* デザイン */

asc1 {

  background: #ccecff;

  display: block;

  width: 140px;

  height: 140px;

  position: relative; }

  asc1::after {

    content: "画像";

    color: #8dd4ff;

    font-size: 30px;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

        align-items: center;

    -ms-flex-pack: center;

        justify-content: center; }





/*以下、アコーディオンプログラム*/





.panel {

  border: 1px solid #767676;

  border-left: none;

  border-right:none;

  background-color: #FFFFFF;

  padding: 20px 20px;

  display: none;

}

.box {

  background-color: #FFB1B2;

  display: block;

  display: inline-block;

  width: 100%;

  border: 1px solid #767676;

}

.{

  display: block;

  flex-grow: 1;

  width: 100%;

  padding: 25px;

  background-color: #FFFFFF;

  outline: none;

  border: none;

  cursor: pointer;

  text-align: left;

}

.:hover {

  background-color: #99D7D8;

}

.fas {

  float: right;

}





table{

  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

	

	

}



table tr{

  border-bottom: solid 1px #001B3D;

  cursor: pointer;

	

}



table tr:hover{

  background-color: #d4f0fd;

}



table th,table td{

  text-align: center;

  width: 25%;

  padding: 4px 0;  

  vertical-align: middle;

  width: 100px;



}



table td.icon{

  background-size: 35px;

  background-position: left 5px center;

  background-repeat: no-repeat;

  padding-left: 30px;

	  background-color: #d4f0fd;

}



table td.icon.bird{

  background-image: url("")

}



table td.icon.whale{

  background-image: url("")

}



table td.icon.crab{

  background-image: url("")

}







/*アコーディオンプログラム*/















/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer1 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #B8E4FF;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer1 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton1 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton1:hover {

    background-color: #0056b3;

}



#closeButton1 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}

/*ここまでスケジュールプログラム*/









/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer2 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #F2FAFF;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer2 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton2 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton2:hover {

    background-color: #0056b3;

}



#closeButton2 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/

















/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer3 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #F2FAFF;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer3 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton3 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton3:hover {

    background-color: #0056b3;

}



#closeButton3 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/

















/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer4 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #F2FAFF;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer4 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton4 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton4:hover {

    background-color: #0056b3;

}



#closeButton4 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/















/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer5 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #FFE1EC;

    padding: 20px;

    border: 1px solid #BFBFBF;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer5 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton5 {

    cursor: pointer;

    background-color: #FF699C;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton5:hover {

    background-color: #F36060;

}



#closeButton5 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/









/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer6 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #a7e2aa;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1000;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer6 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton6 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton6:hover {

    background-color: #0056b3;

}



#closeButton6 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/











/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer7 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #a7e2aa;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1000;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer7 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton7 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton7:hover {

    background-color: #0056b3;

}



#closeButton7 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/















/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

    display: none;

}



/* 浮き出すスタイル */

#infoContainer8 {

    width:100%;

    position: absolute;

    top: 42%;

    left: 50%;

	line-height: 1.2;

    transform: translate(-50%, -50%);

    background-color: #a7e2aa;

    padding: 20px;

    border: 1px solid #ccc;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	z-index: 1000;

}



/* 表のスタイル 1*/

/* styles.css */

table {

    width: 100%;

    border-collapse: collapse;

    border-spacing: 0;

    margin-top: 20px;

}



th, td {

    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #000000;

}



th {

    background-color: #f2f2f2;

    font-weight: bold;

}



tr:hover {

    background-color: #f5f5f5;

}



#infoContainer8 {

    display: none;

}



.hidden {

    display: none;

}



#showInfoButton8 {

    cursor: pointer;

    background-color: #333333;

    color: #fff;

    border: none;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 5px;

}



#showInfoButton8:hover {

    background-color: #0056b3;

}



#closeButton8 {

    cursor: pointer;

    float: right;

    font-weight: bold;

    font-size: 18px;

}



/*ここまでスケジュールプログラム*/















/* アニメーション文字 */

.title1 {

  overflow: hidden;

  transform: translate(-100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

  color: #aa8f7b;

  font-family: 'Josefin Sans', sans-serif;

}



.title1 span {

  display: block;

  transform: translate(100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

}



.title1.-visible,

.title1.-visible span {

  transform: translate(0, 0);

}



.sentence {

  overflow: hidden;

  transform: translate(-100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

  font-family: "Yu Gothic Medium";

  font-size: 16px;

  text-align: center;

}



.sentence span {

  display: block;

  transform: translate(100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

}



.sentence.-visible,

.sentence.-visible span {

  transform: translate(0, 0);

}







/* 飛び出す画像 */





 /* 1つ目の画像のスタイル */

#hiddenImage {

    position: fixed;

    left: -200px; /* 画像を右端に隠す */

    top: 90%;

    transform: translateY(-50%);

    transition: left 0.3s ease-in-out; /* 右からのアニメーション */

    z-index: 500; /* 画像を最上層に表示 */

}



/* 2つ目の画像のスタイル */

#hiddenImage1 {

    position: fixed;

    left: -200px; /* 画像を右端に隠す */

    top: 90%;

    transform: translateY(-50%);

    transition: left 0.3s ease-in-out; /* 右からのアニメーション */

    z-index: 500; /* 画像を最上層に表示 */

}



/* 3つ目の画像のスタイル */

#hiddenImage2 {

    position: fixed;

    left: -400px; /* 画像を右端に隠す */

    top: 90%;

    transform: translateY(-50%);

    transition: left 0.3s ease-in-out; /* 右からのアニメーション */

    z-index: 1500; /* 画像を最上層に表示 */

}



/* 動画再生*/

 /* 動画コンテナのスタイル */

        .video-container {

            width: auto; /* コンテナの幅を調整 */

            height: 200px; /* コンテナの高さを調整 */

            overflow: hidden; /* コンテナ内のオーバーフローを隠す */

			        position: fixed;

        bottom: 20px; /* 画面下端からの距離を調整 */

        right: 20px; /* 画面右端からの距離を調整 */

        z-index: 9999; /* 他の要素よりも上に表示 */



        }



        /* 動画のスタイル */

        video {

            width: 100%; /* 動画の幅を100%に設定 */

            height: 100%; /* 動画の高さを100%に設定 */

            object-fit: cover; /* 動画のアスペクト比を保持しつつコンテナに合わせる */

        }











/* 画像表示スライド*/





.container1 {

    position: relative;

}



.image {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.5s;

}



.show-image {

    opacity: 1;

}



@keyframes shake {

    0%, 100% {

        transform: translate(-50%, -50%) translateX(0);

    }

    25%, 75% {

        transform: translate(-50%, -50%) translateX(10px);

    }

}





/* 画像モーダル表示*/



 

.vlist {

    list-style-type: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-wrap: wrap;

}



.vlist li {

    margin: 10px;

    text-align: center;

}



.vlist li a {

    text-decoration: none;

}



.modal {

    display: none;

    position: fixed;

    z-index: 9999; /* モーダルウィンドウを前面に表示 */

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(29,29,29,0.59);

    overflow: auto;

}



.modal-content {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}



.modal-image {

    max-width: 100%;

    max-height: 100%;

    z-index: -50;

    animation: floatAnimation 2s infinite alternate; /* アニメーションの適用 */

    transition: transform 0.2s ease-in-out; /* トランジションを追加 */

}



.modal-image.clicked {

    transform: translateX(-5px) rotate(-5deg); /* クリック時のアニメーション */

}



@keyframes floatAnimation {

    0% {

        transform: translateY(0); /* 初期位置 */

    }

    50% {

        transform: translateY(-10px); /* 上に10px移動 */

    }

    100% {

        transform: translateY(0); /* 初期位置に戻る */

    }

}





/* キャプションの文字色を白に設定 */

#caption {

    color: white;

}















/* 背景画像アニメーション */







/* 丸い要素のスタイル */

.circle {

    width: 40px; /* 丸の幅 */

    height: 40px; /* 丸の高さ */

    background-color: rgba(186,226,255,0.73); /* 丸の色 */

    border-radius: 50%;

    position: absolute;

    animation: fade-in 2s ease, fade-out 2s ease, float-up 5s ease-in-out infinite, move 20s linear infinite;

    opacity: 0; /* 最初は非表示 */

}



@keyframes fade-in {

    to {

        opacity: 1;

    }

}



@keyframes fade-out {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}



@keyframes float-up {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px); /* もっとふわっと持ち上がるように調整 */

        opacity: 0.7;

    }

    100% {

        transform: translateY(0);

    }

}



@keyframes move {

    from {

        transform: translate(0, 100%);

    }

    to {

        transform: translate(0, -100%);

    }

}





/* 垂直スクロールバーのデザイン */

::-webkit-scrollbar {

  width: 20px; /* スクロールバーの幅を設定 */

}



::-webkit-scrollbar-thumb {

  background-color: #70A7FC; /* スクロールバーのつまみ部分の背景色を設定 */

  border-radius: 6px; /* つまみ部分の角を丸くする */

}



/* 水平スクロールバーのデザイン */

::-webkit-scrollbar-track {

  background-color: #CAE7FF; /* スクロールバーのトラック部分の背景色を設定 */

}



::-webkit-scrollbar-thumb:hover {

  background-color: #364B7E; /* ホバー時のつまみ部分の背景色を設定 */

  border-radius: 8px; /* つまみ部分の角を丸くする */

}





/*画像がふわっとでるスタイル*/



/* 画像の基本スタイル */

.image-style {

    width: 345px; /* 画像の幅 */

    height: auto; /* 高さは自動調整 */

    margin: 10px; /* 画像の外側の余白 */

    border: 0px solid black; /* 枠線 */

    display: block;

    margin-left: auto;

    margin-right: auto;

    animation: swayUpDown 2s infinite; /* 上下にゆらゆらするアニメーションを適用 */

}



/* フェードイン効果 */

.fade-in {



    animation-duration: 2.5s;

    animation-fill-mode: forwards;

}



/* 上下にゆらゆらするアニメーションの定義 */

@keyframes swayUpDown {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px); /* 上に10px移動 */

    }

}



/* 受験の流れアコーディオン */

.expandableButton {

  background-color: #FF4F00; /* gray */

  border: none;

  color: white;

  padding: 15px 32px;

  text-decoration: none;

  display: inline-block;

  width: 350px;

  font-size: 16px;

  margin: 2px auto;

  cursor: pointer;

}



.expandableContent {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease-out;

  background-color: #f1f1f1;

  width: 100%;

}



/* ボタンの親要素（<dd>）を中央に配置 */

.customDD {

  text-align: center;

  width: 100%;

  margin: 1;

}



/* 展開されたコンテンツ内のテキストを左寄せにする */

.expandableContent p {

  text-align: left;

  width: 100%;

}





/* アクセスのアコーディオン */

.expandableButtonAC {

  background-color: #747474; /* gray */

  border: none;

  color: white;

  padding: 15px 32px;

  text-decoration: none;

  display: block; /* ボタンをブロック要素として扱う */

  width: 330px; /* Button width */

  font-size: 14px;

  margin: 0 auto; /* 中央配置のためのmargin */

  cursor: pointer;

  border-bottom: 2px solid black; /* 下線を追加 */

	  justify-content: center;

  align-items: center;

  text-align: center;

}



.expandableContentAC {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease-out; /* Animation */

  background-color: #f1f1f1;

  width: 330px; /* 幅を指定 */

  margin: 0 auto; /* 中央配置のためのmargin */

  text-align: center; /* 中央揃え */

}



/* ボタンの親要素（<dd>）を中央に配置 */

dd5 {



  justify-content: center;

  align-items: center;

  text-align: center;

	 margin: 0 auto;

	

}



/* ボタンの親要素（<p>）を中央に配置 */

pd5 {

  text-align: center;

  width: 330px; /* Button width */

  margin: 0 auto; /* 中央配置のためのmargin */

	  justify-content: center;

  align-items: center;

  text-align: center;

}







/* オフィスアワーボタン ホバー*/

.officeHourButton {

    background-color: #1e56a3;

    color: white !important; /* 強制的に文字色を白に設定 */

    padding: 6px 10px;

    border: none;

    border-radius: 5px;

    font-size: 18px;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    width: 95%;

    text-align: center;

    transition: all 1s;

    display: block;

    text-decoration: none;

    margin: 10px auto;

    animation: floatAnimation 5s ease-in-out infinite; /* アニメーションの追加 */

}



.officeHourButton:hover {

    background-color: #FF3700;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}



@keyframes floatAnimation {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}











/* ピンク色ホバーボタン */

.officeHourButtonpink {

    background-color: #FF567B;

    color: white !important; /* 強制的に文字色を白に設定 */

    padding: 6px 10px;

    border: none;

    border-radius: 5px;

    font-size: 18px;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    width: 95%;

    text-align: center;

    transition: all 1s;

    display: block;

    text-decoration: none;

    margin: 10px auto;

    animation: floatAnimation 5s ease-in-out infinite; /* アニメーションの追加 */

}



.officeHourButtonpink:hover {

    background-color: #FF3700;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}

@keyframes floatAnimation {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}







/* 黒色ホバーボタン */

.officeHourButtonblack {

    background-color: #000000;

    color: white !important; /* 強制的に文字色を白に設定 */

    padding: 6px 10px;

    border: none;

    border-radius: 5px;

    font-size: 18px;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    width: 95%;

    text-align: center;

    transition: all 1s;

    display: block;

    text-decoration: none;

    margin: 10px auto;

    animation: floatAnimation 5s ease-in-out infinite; /* アニメーションの追加 */

}



.officeHourButtonblack:hover {

    background-color: #FF3700;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}

@keyframes floatAnimation {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}















/* フェードエフェクト */

.fadein1 {

  opacity : 0;

  transform : translate(0, 100px);

  transition : all 1s;

}

 

.fadein1.active{

  opacity : 1;

  transform : translate(0, 0);

}





/* バックグラウンドカラー */

.backgroundOC{

  background-color: #FFFFFF;

}



.backgroundEX{

  background-color: #D0EBDC;

}



.backgroundAC{

  background-color: #FFFFFF;

}



.backgroundEX2{

  background-color: #FFF8E4;

}



.backgroundOH{

  background-color: #FFFFFF;

}





  .mapcenter {

    display: block;

    margin-left: auto;

    margin-right: auto;

  }







/* ページ下部ボタン1 */



.pagetbutton1 {

  transition: .5s ease;

  display: none;

  position: fixed;

  left: 50%;

  bottom: 20px;

  transform: translateX(-50%);

  width: 36px;

  height: 50px;

  z-index: 9999;

}



.pagetbutton1 a {

  position: relative;

  display: block;

  width: 100%;

}



.pagetbutton1 a img {

  width: 100%;

}



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

  .pagetbutton1 {

    /* スマートフォン用スタイルを適用する */

    display: none;

  }

}



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

  .pagetbutton1 {

    /* PC用スタイルを適用する */

    display: flex;

    margin-left: auto;

    margin-right: auto;

  }

}



/* ページ下部ボタン2 */



.pagetbutton2 {

  transition: .5s ease;

  display: none;

  position: fixed;

  left: 50%;

  bottom: 70px;

  transform: translateX(10%);

  width: 100px;

  height: 0px;

  z-index: 9999;

}



.pagetbutton2 a {

  position: relative;

  display: block;

  width: 100%;

}



.pagetbutton2 a img {

  width: 100%;

}



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

  .pagetbutton2 {

    /* スマートフォン用スタイルを適用する */

    display: none;

  }

}



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

  .pagetbutton2 {

    /* PC用スタイルを適用する */

    display: flex;

    margin-left: auto;

    margin-right: auto;

    left: calc(50% + 20px); /* ボタン1の右側に配置 */

  }

}





 /* アイコン */

.icon-container1 {

  width: 300px;

  margin: 0 auto; /* コンテナを中央揃えにする */

  display: flex;

  justify-content: space-between;

  align-items: center; /* アイコンを縦方向の中央に配置 */

}



.icon {

  width: calc(360px / 7); /* コンテナの横幅を5で割る */

  height: auto; /* アスペクト比を保持 */

}



 /* インスタラベル */



        .label-insta {

            display: inline; /* inline-block から inline に変更 */

            background-color: #f09433; /* ラベルの背景色 */

            background-image: linear-gradient(315deg, #f09433 0%, #e6683c 30%, #dc2743 60%, #cc2366 100%); /* グラデーション */

            color: white; /* テキストの色 */

            padding: 2px 7px; /* 内側の余白（上/下, 左/右） */

            border-radius: 10px; /* 角の丸み */

            font-size: 0.8em; /* フォントサイズ */

            font-weight: bold; /* フォントの太さ */

            margin-left: 4px; /* 左側の外側の余白 */

            text-decoration: none; /* テキスト装飾を無効にする */

        }



	

 .image-container {

  display: flex;

  flex-wrap: wrap; /* 複数行に対応 */

  justify-content: center; /* 中央揃え */

  max-width: auto; /* 画像2つ分の幅 + 余白 */

}



.image-container img {

  width: 180px;

  max-width: 100%; /* 画面に合わせて自動縮小 */

  height: auto; /* 画像の縦横比を維持しつつ縮小 */

  margin-right: 5px; /* 画像間の余白 */

  margin-bottom: 2px; /* 下の行との余白 */

}



.image-container a {

  display: inline-block; /* aタグの幅を画像に合わせる */

}



figure {

  text-align: center; /* 図全体を中央揃えにする */

  margin: 0; /* マージンをリセット */

}



figcaption {

  display: block; /* figcaptionをブロック要素として表示 */

  margin-top: 5px; /* 画像との余白を調整 */

  margin-bottom: 15px; /* 下の余白を増やす */

  font-size: 14px; /* フォントサイズを調整 */

  color: #333; /* テキストカラーを調整 */

}



.video-thumbnail {

  width: 180px; /* 横幅を300pxに設定 */

  height: auto; /* アスペクト比を維持 */

  aspect-ratio: 16 / 9; /* 16:9のアスペクト比を指定 */

  cursor: pointer;

  object-fit: cover; /* 動画が枠内にきれいに収まる */

  border-radius: 5px; /* 必要なら角を丸める */

}