@charset "utf-8";
/* CSS Document */


a:link{ color:#0099CC; text-decoration:none; }
a:visited{ color:#0099CC; text-decoration:none;}
a:active{ color:#695CBD; text-decoration:none; }
a:hover{ color:#695CBD; text-decoration:none; }

a:hover{text-decoration: none;
	filter:alpha(opacity=50) !important;
    -moz-opacity: 0.5 !important;
    opacity: 0.5 !important;}

body {
	margin: 0;
	padding: 0;
	color:#333;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:14px;
line-height:1.4;

}
.m10{margin-bottom:10px;}
.m20{margin-bottom:20px;}
.m40{margin-bottom:40px;}
/* PC表示（992px以上）のスタイル */



.navbar-nav {
  width: 100%;
}
.navbar {
 background: linear-gradient(to bottom, #f1f1f1, #dcdcdc);
  border: 1px solid #dcdcdc; /* 外側の線 */
  border-radius: 3px;
  box-shadow: 0 2px 4px #cccccc, /* 外側の影 */
              inset 0 0 0 1px #eeeeee; /* 内側の白い線 */
  padding: 0;
}

.navcont {
    position: relative; /* 疑似要素の基準点を設定 */
}

.navcont::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 35px;
    background: linear-gradient(to bottom, #EEF8FF, #DAECFF);
	border-bottom:1px solid #eeeeee;
	border-top:1px solid #eeeeee;
    z-index: -1; /* navの背面に配置 */
}

.navbar {
    position: relative;
    z-index: 10; /* 他の要素より手前に表示 */
}


.custom-overflow {
	border-top:3px solid #477366;
  overflow: visible;
}
li {
    list-style: none; 

}

.custom-nav-item {
    position: relative;
    border-left: 1px solid #dcdcdc;
    padding: 0 15px;
    margin: 0;
}

.custom-nav-item:first-child {
    border-left: none;
}

.custom-nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #eeeeee;
    z-index: 1;
}

.custom-nav-item:first-child::before {
    display: none;
}

.custom-nav-item .nav-link {
    padding: 15px; /* 上下の余白のみ設定 */
    color: #333;
}


.custom-nav-item.first {
    border-left: none;
}

/* モバイル表示（991px以下）のスタイル */
@media (max-width: 991px) {
    .navbar {
        background: none;
        border: none;
        box-shadow: none;
           display: flex;
        justify-content: space-between;
        align-items: center;
    }
	
    .navbar-toggler {
        margin: 10px; 
		
        align-self: center;
    }

   .custom-nav-item {
        border-left: none !important;
        border-bottom: 1px solid #dcdcdc;
        margin: 0; /* モバイル表示ではマージンを削除 */
    }

    .custom-nav-item .nav-link {
        padding: 10px 0; /* モバイル表示の上下余白のみ設定 */
    }


 .custom-nav-item::before {
        display: none;
    }

    .custom-nav-item:last-child {
        border-bottom: none;
    }
	
	
	.navcont::after {
		display: none; 
	}
.navbar {
    border-bottom: 1px solid #cccccc;
}
}



.logo {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
	margin:20px 0;
}
.navbar-brand,
.navbar-brand h1
 {
    color: #333333 !important;
}
.navbar-brand p{
    color: #9e9e9e !important;
}
.navbar-brand:visited,
.navbar-brand:visited h1{
    color: #333333 !important;
}
.navbar-brand:visited p {
    color: #9e9e9e !important;
}
.logo-image {
  margin-right: 10px; /* ロゴとタイトルの間に余白 */
  height: 40px; /* ロゴの高さ */
}
@media (max-width: 991px) {
.logo1{display:none;}
	.smno{display:none;}
	
	.site-title{font-size:1rem !important;}
	.site-subtitle {font-size:0.5rem !important;}
}

.site-title {
  font-size: 1.4rem;
	font-weight:400;
  margin: 0; /* h1タグのデフォルトマージンを削除 */
}
.site-subtitle {
	display:block;
  color: #9e9e9e;
  margin: 0;
  font-size: 0.6rem; 
}

@media (min-width: 992px) {
	.pcno{display:none;}
}

.link-list {
    display: flex;
    justify-content: flex-end; /* 右寄せに調整 */
    gap: 15px; 
}

.arrow-link {
    display: flex; 
    align-items: center;
    text-decoration: none;
    color: #477366 !important;
    position: relative;
	margin:10px 0 10px 30px;
}

.arrow-link::before {
    content: '';
    position: absolute;
    left: 0; /* リンクの左端に配置 */
    top: 40%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #477366;
    border-right: 2px solid #477366;
    border-bottom: none;
    border-left: none;
}

.arrow-link span {
    margin-left: 10px; /* 矢印との隙間 */
}



/* ボタンの基本スタイル */
.button-container {
    gap: 15px; 
	justify-content: flex-end;
}

.custom-button {
    display: flex;
    align-items: center;
	font-size:0.9rem;
    justify-content: center;
    text-align: left;
    text-decoration: none;
    color: #ffffff !important;
    background-color: #75ab31;
    border: 1px solid #A2D462;
    padding: 10px 55px 10px 15px;
    height: 100%;
    white-space: nowrap;
    position: relative;
    border-radius: 3px 0 0 3px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

.custom-button::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: none;
    border-left: none;
}

.button-text {
    margin-left: 10px; /* 矢印との隙間 */
}
/* 矢印ボタンの形状を維持 */
.arrow-right {
    border-radius: 3px 0 0 3px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}


.slider-wrapper {
    margin-top: 30px;
}
#slider {
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    aspect-ratio: 972 / 296; /* この行は削除しません */
}

#slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* height: 100%; この行は削除 */
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#slider li {
    flex-shrink: 0;
    width: 100%;
    /* height: 100%; この行は削除 */
}

#slider li a, #slider li img {
    display: block;
    width: 100%;
    height: auto; /* 高さを自動調整 */
    object-fit: cover; /* 画像の縦横比を維持して、コンテナに合わせて切り取ります */
}
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(71, 115, 102, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.mainw{margin:30px auto;}


.midsub{
	color: #38408b;
    padding: 15px 0;
    margin-bottom: 10px;
    font-size: 1rem;
    border-bottom: 1px dotted #666666;
}

.image-container {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    height: 100%; /* 親要素(row)の高さを引き継ぐ */
}

.image-container img {
    width: 100%;
    height: auto;
}


@media (max-width: 1199px) {.insta_pc{display:none !important;}}
@media (min-width: 1200px) {.insta_sp{display:none !important;}}


/* オーバーレイ（背景のスクリーン）のスタイル */
/* オーバーレイ（背景のスクリーン）のスタイル */
#modal-banner-overlay {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
    z-index: 9999; /* 他のコンテンツより前面に表示 */
    backdrop-filter: blur(5px);
}

/* バナーコンテンツのスタイル */
#modal-banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    width: 400px;
    background-color: #fff4df;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    box-sizing: border-box;
    animation: fadeInScale 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* 閉じるボタンのスタイル */
#modal-banner-close {
    position: fixed; /* ブラウザの右上（ビューポート）に固定 */
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #ccc;
    border-radius: 50%;
    color: #555;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.2s;
}

#modal-banner-close:hover {
    background-color: #fff;
}

/* アニメーションの定義 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 画面幅が小さい場合の調整 */
@media (max-width: 500px) {
    #modal-banner-content {
        width: 90%;
        padding: 15px;
    }
}


 .scroll-wp {
            max-height: 200px;
            overflow-y: auto;
            
        }
.scroll-container {
	margin-bottom:30px;
   border-radius: 10px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
            background-color: #fff;
	padding:15px 15px 15px 15px;
}
.scroll-container table {
    width: calc(100% - 15px); /* スクロールバーの幅分を引く */
}
.tbl {font-size:0.8rem;
            width: 100%;
            margin-bottom: 90px;
            border-collapse: collapse; 
        }
        .tbl th {
            vertical-align: top;
            border-bottom: 1px dotted #CBCBCB;
            padding: 5px;
			width:52px;
            text-align: left;
        }
        .tbl td {
            vertical-align: top;
            border-bottom: 1px dotted #CBCBCB;
            padding: 5px;
        }
       
        .scroll-container table {
            margin-bottom: 0; /* Bootstrapの影響を打ち消す */
        }

        /* レスポンシブ対応 */
        @media screen and (max-width: 767px) {
            .tbl {
                width: 100%;
            }
        }
        @media screen and (max-width: 640px) {
            .last td:last-child {
                width: 100%;
            }
            .tbl th,
            .tbl td {
                display: block;
                width: 100%;
            }
            .tbl th {
                border: none;
                font-weight: bold;
                padding-bottom: 0;
				margin-bottom:10px;
            }
            .tbl td {
                padding-top: 0;
            }
        }


.b_new{color:#ffffff;
padding:2px 2px 0 2px;
background: #F77A42;
display:inline-block;
	font-weight:700;
	margin-left:5px;
	font-size:0.6rem;}


/* フッターのグリッド設定 */
.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 垂直方向の中央揃え */
}

.footer-col {
    width: 50%;
}

/* ボタンのコンテナスタイル */
.button-container2 {
    display: flex;
    justify-content: flex-start; /* 左寄せに調整 */
    gap: 15px;
}

/* 矢印リンクのコンテナスタイル */
.link-list2 {
    display: flex;
    justify-content: flex-end; /* 右寄せに調整 */
    gap: 15px;
}

/* カスタムボタンのスタイル (既存のスタイルを再利用) */
.custom-button2 {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    justify-content: center;
    text-align: left;
    text-decoration: none;
    color: #ffffff !important;
    background-color: #75ab31;
    border: 1px solid #A2D462;
    padding: 10px 55px 10px 15px;
    height: 100%;
    white-space: nowrap;
    position: relative;
    border-radius: 3px 0 0 3px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

.custom-button2::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: none;
    border-left: none;
}

/* 矢印リンクのスタイル (既存のスタイルを再利用) */
.arrow-link2 {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #477366 !important;
    position: relative;
}

.arrow-link2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 40%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #477366;
    border-right: 2px solid #477366;
    border-bottom: none;
    border-left: none;
}

.arrow-link2 span {
    margin-left: 10px;
}


/* PC表示（992px以上）のスタイル */
.ftr-nav-wrap {
    background: linear-gradient(to bottom, #f1f1f1, #dcdcdc);
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    box-shadow: 0 2px 4px #cccccc, inset 0 0 0 1px #eeeeee;
    padding: 0;
    margin-top: 20px;
}

.ftr-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 均等な間隔ではなく中央寄せに */
    list-style: none;
    padding: 0;
    margin: 0;
}

.ftr-nav-item {
    flex: 1; /* この行を追加：各要素が均等な幅を占める */
    position: relative;
    border-left: 1px solid #dcdcdc;
    padding: 0;
    margin: 0;
}

.ftr-nav-item:first-child {
    border-left: none;
}

.ftr-nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #eeeeee;
    z-index: 1;
}

.ftr-nav-item:first-child::before {
    display: none;
}

.ftr-nav-link {
    display: block; /* Flexboxを使わず、シンプルにブロック要素にする */
    padding: 15px;
    color: #333333 !important;
    text-decoration: none;
    white-space: nowrap;
    text-align: center; /* 中央寄せ */
}

/* モバイル表示（991px以下）で非表示 */
@media (max-width: 991px) {
    .ftr-nav-wrap {
        display: none;
    }
}
.footer-row { display: none;
    }
.copy{
	margin:20px auto;
	text-align: center;
}


.foot_bac{background: linear-gradient(to bottom, #f1f1f1, #dcdcdc);
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    box-shadow: 0 2px 4px #cccccc, inset 0 0 0 1px #eeeeee;
    padding: 0;
    margin-top: 20px;}
.footw{padding:20px;


}
.access{margin:20px 0;}

.goaccess{
	background:#75ab31;
	padding:10px 40px;
	color:#ffffff !important;
	border-radius: 100px;
}


.goaccess:hover{background:#B3ED69;}



.gohow{
	background:#75ab31;
	padding:10px 40px;
	color:#ffffff !important;
	border-radius: 100px;
	display:block;
	margin-top:10px;
}


@media (max-width: 991px) {
    .gohow{
	background:#ffffff !important;
	padding:0px;
	color:#4C731B !important;

}
}