/* ページ全体に適用される基本的なスタイル（レイアウト、色、フォント、メインのデザインなど）*/
/* 左ロゴ右メニュー */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-nav {
    margin-left: auto; /* メニューを中央寄せ、もしくは右寄せ */
}
@media only screen and (max-width: 768px) {
    .navbar-collapse {
        justify-content: flex-end; /* スマホ用の右寄せ */
    }
}
.navbar, .navbar-light, .navbar-dark {
    background-color: #F3F3F3 !important; /* 好きな色に変更、強制適用 */
    color: #FFFFFF !important;
}

/* ヘッダー固定 */
.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* 他のコンテンツよりも上に表示 */
}
body {
    padding-top: 60px; /* ヘッダーの高さ分だけコンテンツを下にずらす */
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}

.carousel {
    margin-bottom: 20px; /* スライダーの下に余白を追加 */
}
.container {
    padding-top: 20px; /* コンテンツの上部に余白を追加 */
}

h1.text-center {
    margin-top: 60px; /* ご挨拶の上に60pxの余白を追加 */
    margin-bottom: 60px; /* ご挨拶の下に60pxの余白を追加 */
}

h2.text-center {
    margin-bottom: 40px; /* 下に40pxの余白を追加 */
}

.container .row {
    margin-top: 60px; /* ご挨拶の段落の上に60pxの余白を追加 */
    margin-bottom: 60px; /* ご挨拶の段落の下に60pxの余白を追加 */
}

@media only screen and (max-width: 768px) {
    h1.text-center {
        margin-top: 20px; /* スマホ用：ご挨拶の上に20pxの余白 */
        margin-bottom: 20px; /* スマホ用：ご挨拶の下に20pxの余白 */
    }
    h2.text-center {
        margin-top: 20px; /* スマホ用：上に20pxの余白 */
        margin-bottom: 20px; /* スマホ用：下に20pxの余白 */
    }
    .container .row {
        margin-top: 20px; /* スマホ用：段落の上に20pxの余白 */
        margin-bottom: 20px; /* スマホ用：段落の下に20pxの余白 */
    }
}

/* パディング */

.padding-top-1{
	margin: ショートハンドを設定;
    padding-top: 1em;
}

.padding-top-2{
	margin: ショートハンドを設定;
    padding-top: 2em;
}

.padding-top-3{
	margin: ショートハンドを設定;
    padding-top: 3em;
}

.padding-bottom-1{
    padding-bottom: 1em;

}

.padding-bottom-1{
    padding-bottom: 1em;

}

.padding-bottom-2{
    padding-bottom: 2em;

}

.padding-bottom-3{
    padding-bottom: 3em;

}


/*　コンテナカラー　*/
.container-color-gra01 {
    display: flex;
    flex-direction: column; /* 垂直方向に配置 */
    align-items: center; /* 垂直方向の中央揃え */
    background: linear-gradient(to right, #f1602a,#f78f1f, #f1602a); /* 左から右へのグラデーション */
}

/*　画像を中央に配置　*/
.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*　テーブル　*/
.two-column-table {
    width: 100%;
    border-collapse: collapse;
}

.two-column-table td {
    border-bottom: 1px solid #9E9E9E; /* 下線のみ */
    padding: 10px;
    vertical-align: top; /* テキストの上部を揃える */
}

.two-column-table .left-column {
    width: 30%; /* 左列の幅を設定 */
    text-align: left;
}

.two-column-table .right-column {
    width: 70%; /* 右列の幅を設定 */
    text-align: left;
}


/*　テーブル　*/
.eight-column-table {
    width: 100%;
    border-collapse: collapse;
}

.eight-column-table th, .eight-column-table td {
    border: 1px solid #ddd; /* 縦線と横線を追加 */
    padding: 10px;
}

.eight-column-table th {
    background-color: #f2f2f2; /* 見出し行の背景色 */
    color: #333; /* 見出し行のテキスト色 */
}

.eight-column-table td {
    vertical-align: top;
}

/*******************************
* バッジの色
********************************/
/* 必須マーク */
.must {
	background: #FF1A00;
}

/* 任意マーク */
.free {
	background: #999;
}

.must,
.free {
	color: #FFF;
	border-radius: 3px;
	font-size: 11px;
	margin-right: 10px;
	padding: 5px 5px;
	letter-spacing: 0.2em;
}
.ani {
}