.text-shadow-strong {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
  }

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:3px;
	height: 60px;
	background:#fff;
}




/* 白背景テーブル用 */
  .white-table {
    background-color: #ffffff;
    border-collapse: collapse; /* ボーダーを確実に表示 */
    width: 100%;
  }

  .white-table thead th {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #dee2e6;
    font-size: 0.9rem; /* 小さめにしてスマホ対応 */
  }

  .white-table tbody td {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #dee2e6;
    font-size: 0.85rem; /* 小さめにしてスマホ対応 */
  }

  /* スマホ用に文字やパディング調整 */
  @media (max-width: 576px) {
    .white-table thead th,
    .white-table tbody td {
      font-size: 0.75rem;
      padding: 0.3rem;
    }
  }

  /* テーブル横スクロール用 */
  .table-responsive-custom {
    overflow-x: auto;
  }

/* テーブル全体を白背景に */
  table.table {
    background-color: #ffffff !important;
  }

  /* striped の背景も白に */
  table.table.table-striped tbody tr:nth-of-type(odd),
  table.table.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
  }

  /* ヘッダーも白背景に */
  table.table thead th {
    background-color: #ffffff !important;
  }

  /* optional: テキスト色やボーダーを調整 */
  table.table th,
  table.table td {
    color: #000;
    border-color: #dee2e6;
  }

.bg-grid {
  background-color: #fff;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1.5px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1.5px);
  background-size: 30px 30px; /* 格子の大きさ */
}

.bg-navy {
  background-color: #0068b7;
}

.text-navy {
  color: #0068b7;
}

.text-green {
  color: #0068b7;
}

.text-yellow {
  color: #ffe100;
}

.bg-yellow {
  background-color: #ffe100;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 15px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 5);
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 手前に表示 */
  margin-top:15px; 
}

h3 {
    font-size: 31px;
     line-height: 1.5em;
}


@media screen and (max-width: 768px) {


h3 {
    font-size: 22px;
     line-height: 1.5em;
}
}




h5 {
    font-size: 22px;
     line-height: 1.3em;
    
}


@media screen and (max-width: 768px) {


h5 {
    font-size: 17px;
    line-height: 1.3dem;
    font-weight:bold;
}
}


h5-2 {
    font-size: 32px;
     line-height: 1.5em;
    
}


@media screen and (max-width: 768px) {


h5-2 {
    font-size: 18px;
     line-height: 1.3dem;
    font-weight:bold;
}
}


h5-3 {
    font-size: 22px;
     line-height: 1.3em;
    
}

@media screen and (max-width: 768px) {


h5-3 {
    font-size: 20px;
     line-height: 1.3dem;
   
}
}



@media screen and (max-width: 768px) {


.mb-vex {
    margin-bottom: 0.5rem !important;
}
}

/*p {
    font-size: 16px;
    line-height: 1.8em;
   
}*/

p {
    display: block;
    margin-block-start: 1em;
    font-size: 16px;
    line-height: 2;
    font-weight: 400;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*

@media screen and (max-width: 768px) {


p {
    font-size: 14px;
    line-height: 1.7em;
   
}
}*/


.fadeUpTrigger{
opacity: 0;
}


.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.mb-5 {
  margin-bottom: 4rem !important;
}

@media screen and (max-width: 768px) {


.mb-5 {
   margin-bottom: 2rem !important;
   
}
}


/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}




a.btn--red.btn--cubic-2 {
  border-bottom: 5px solid #02025d;
}

a.btn--red.btn--cubic-2:hover {
  margin-top: 3px;
  border-bottom: 2px solid #02025d;
}



/*主な共通部分は省略*/

a.btn--red.btn--cubic {
  border-bottom: 5px solid #9f000c;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #9f000c;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}


.btn-2{
        background-color: #ffe100;
    
}


@media (min-width: 1200px){
h1 {
    color: #0068b7;
    text-align: center;
    margin: 0 0 25px;
 
    font-size: 35px;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    font-family: "Gothic";
}
}

@media (min-width: 992px){
section h1 {
   color: #0068b7;
    font-size: 40px;
    font-size: 4rem;
    padding-bottom: 30px;
    }
}

@media (min-width: 768px){
section h1 {
  color: #0068b7;
    font-size: 30px;
    font-size: 3rem;
    padding-bottom: 25px;
    margin: 0 0 45px;
}
}

/*通常h1*/
h1 {
   color: #0068b7;
   letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center;
  position: relative;
 line-height: 1.5em;
font-family: biz-udpgothic, sans-serif;
}
h1::after {
  content: '';
  width: 70px;
  height: 2.5px;
  display: inline-block;
  background-color: #0068b7;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 35px)
}


section h1 {
    text-align: center;
    margin: 0 0 25px;
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    /* padding-bottom: 20px; */
}

.pixel {
    /*font-family: PixelMplus10-Regular; */
    color: #0068b7;
     letter-spacing: 0.12em;
    line-height: 1;
}




@media (min-width: 992px){
section h1 {
   color: #0068b7;
    font-size: 40px;
    font-size: 4rem;
    padding-bottom: 30px;
    }
}

@media (min-width: 768px){
section h1 {
  color: #0068b7;
    font-size: 30px;
    font-size: 3rem;
    padding-bottom: 25px;
    margin: 0 0 45px;
}
}

@media (max-width: 768px){
.mb-h{
    margin-bottom: 2.7rem !important;

}
}


h1 {
   color: #0068b7;
   letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center;
  position: relative;
font-family: biz-udpgothic, sans-serif;
}

h1::after {
  content: '';
  width: 70px;
  height: 2.5px;
  display: inline-block;
  background-color: #0068b7;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 35px)
}


@media screen and (max-width: 600px){
h1 {
    font-size: 22px;
    line-height: 1.5em;
}
}

section h1 {
    text-align: center;
    margin: 0 0 25px;
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    /* padding-bottom: 20px; */
}

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


a {
    color: #ffe100;
    text-decoration: underline;
}



.main-r {
    background: #0068b7;
}


.triangle {
    width: 20%;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 60px 110px 0 110px;
    border-color: #fff transparent transparent transparent;
}

.mgb20 {
    margin-bottom: 20px!important;
}

.mgb20 {
    margin-bottom: 20px!important;
}

.pdt30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}



h2 {
    letter-spacing: 0.10em;
    font-family: biz-udpgothic, sans-serif;
}

@media (min-width: 1200px){
section h2 {
    margin: 0.5em 0 1.5em;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.6;
}
}

@media (min-width: 992px){
section h2 {
    margin: 0.5em 0 1.5em;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.6;
}
}

h2 {
    letter-spacing: 0.10em;
    font-family: biz-udpgothic, sans-serif;
}



@media screen and (max-width: 600px){
h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}}


@media screen and (max-width: 768px){
.px-6 {
   padding-right: 3rem !important;
   padding-left: 3rem !important;
}
    }




/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
}

.sort-btn li{
	background: #ffe100;
list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
    color: #000;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/	
    background:#ffce05;
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  z-index: 1;
list-style:none;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}


/*

@media (min-width: 768px){
.container-md, .container-sm, .container {
    max-width: 720px;
    padding: 45px 30px;
}
}

@media (min-width: 992px){
.container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
    padding: 60px 30px;
}
}

@media (min-width: 576px){
.container-sm, .container {
    max-width: 540px;
    padding: 45px 30px;
}
}

@media (min-width: 550px){
.container-sm, .container {
    max-width: 540px;
    padding: 45px 30px;
}
}*/

p-table{
    font-size: 16px;
}

@media screen and (max-width: 1000px) {


p-table{
    font-size: 10px;
    line-height: 1.7em;
}
}

.base {
    background-image: url(../img/base.png);
    background-size:300px;
    
}

@media (max-width: 500px){
.base {
background-image: url(../img/base_.png);
}
}


.deco_btn img{
transition-duration: 0.3s ;/*動きにかける時間*/
transition-timing-function: ease;/*開始と終わりの動きをなめらかに*/
/*box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);/*画像に影をつける*/
}

.deco_btn img:hover{
transform: translateY(-4px);/*カーソルオンで上方向に2pxあがる*/
}

.deco_btn img:active{
transform: translateY(3px);/*クリックで下方向に1pxさがる*/
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: 0px;
  bottom: 0px;

}


.kasaneru9 img.imagup:hover{
z-index: 4;
  position: absolute;
  top:91.2%;
  left: 50%;
 transform: translate(-50%,-54%);
}

.kasaneru9 img.imagup:active{
z-index: 4;
  position: absolute;
  top:91.2%;
  left: 50%;
 transform: translate(-50%,-43%);
}


.kasaneru9 {
  position: relative;
  width: 2034px;
  height: 1500px;
  margin: 2rem auto;
  background: url("../img/top-sm.jpg") no-repeat center center/cover;
}
.kasaneru9 img.imagup {
  z-index: 4;
  position: absolute;
  top:91.4%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
/*.overlay-ga::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("ドット画像のURL") repeat 0 0 / 30%;
}*/
@media screen and (max-width: 768px){
  .kasaneru9{
    width: 100%;
    height: 0;
    padding-top: 140%;
  } 
.kasaneru9 img{
  width: 56.5%;
}
}/*SP END*/