@charset "UTF-8";

/*================================================
 * CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 * 一般・共通設定
 ================================================*/
body {
    font-size:14px;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height:1.6;
}

#contents {
    width:980px;
    margin:0 auto;
}

a {
    color:#043771;
}
a:hover {
    color:#144d8d;
}

h1 {
    font-size:28px;
}

h2 {
    margin-top:50px;
    margin-bottom:0.5em;
    font-size:24px;
    color:#333;
    text-align:center;
}

h3 {
    margin-bottom:0.25em;
    font-size:18px;
}

h4 {
    padding: 0.75rem 0.75rem;
    font-size:16px;
    color: #fff;
    background-color: #555;
    margin-bottom: -0.25rem;
}

h5 {
    margin-bottom:0.25em;
    padding-left:25px;
    font-size:16px;
    background:url('../images/bg_arrow_black.png') 0 0 no-repeat;
}

h6 {
    margin-bottom:0.25em;
    padding-left:5px;
    font-size:16px;
    text-align:center;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

img {
    vertical-align:bottom;
}

em {
    font-weight:bold;
}

strong {
    font-weight:bold;
    color:#ff0000;
}

blockquote {
    margin-bottom:1em;
    padding:1em;
    border:1px dotted #ddd;
    border-left:5px solid #ddd;
}

ul,ol,dl {
    margin:0 0 1em 0;
}

li {
    margin-left:2em;
}

dt {
    margin-bottom:0.5em;
    border-bottom:1px dotted #ddd;
}
dd {
    margin-bottom:1em;
}

table {
    width:100%;
    margin-bottom:1em;
    border-collapse:collapse;
    border:1px solid #ddd;
}
th {
    padding:10px;
    text-align:center;
    vertical-align:middle;
    border:1px solid #ddd;
    background:#f1f1f1;
}
td {
    padding:10px;
    text-align:left;
    border:1px solid #ddd;
}

/*================================================
 * 汎用クラス
 ================================================*/
.imgC { clear:both; overflow:hidden; margin-top:30px; margin-bottom:30px; text-align:center; }
.imgC img { border-radius:5px; margin-bottom:0.5em; }

.imgL { clear:both; overflow:hidden; margin-bottom:50px; }
.imgL img { float:left; margin:0 1em 0.5em 0; border-radius:5px; }

.imgR { clear:both; overflow:hidden; margin-bottom:50px; }
.imgR img { float:right; margin:0 0 1em 0.5em; border-radius:5px; }

.twoCol { overflow:hidden; margin-bottom:50px; }
.twoColInner { overflow:hidden; margin-right:-2%; }
.twoColInner div { width:48%; float:left; margin-right:2%; }
.twoColInner div:nth-child(2n+1) { clear:both; }
.twoColInner img { width:100%; margin-bottom:0.5em; border-radius:5px; }

.threeCol { overflow:hidden; margin-bottom:50px; }
.threeColInner { overflow:hidden; margin-right:-3%; }
.threeColInner div { width:31%; float:left; margin-right:2%; }
.threeColInner div:nth-child(3n+1) { clear:both; }
.threeColInner img { width:100%; margin-bottom:0.5em; border-radius:5px; }

.btn02 a { display:block; padding:1%; color:#1b1b1b; text-decoration:none; border-radius:5px; border:1px solid #1b1b1b; background:#fff; transition:all 0.2s ease 0s; }
.btn02 a:hover { color:#fff; background:#1b1b1b; transition:all 0.2s ease 0s; }


/*================================================
 * ヘッダー
 ================================================*/
header {
    width:100%;
    height:400px;
    position:relative;
}
header h1 {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:200px;
    height:200px;
    z-index:20;
}

/*================================================
 * メイン
 ================================================*/
main {
    width:100%;
}

section {
    margin-bottom:10%;
}

/*================================================
 * フッター
 ================================================*/
footer {
    clear:both;
    padding:2% 0;
    font-size:11px;
    text-align:center;
}

/*================================================
 * ページトップへの戻り
 ================================================*/
.totop {
    position:fixed;
    bottom:15px;
    right:15px;
}
.totop a {
    display:block;
    text-decoration:none;
}
.totop img {
    background:#000;
}
.totop img:hover {
    background:#333;
}
/*================================================
 * グローバルナビゲーション (共通設定)
 ================================================*/
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0; /* 上下の余白 */
    opacity: 0.8;
    z-index: 100;
    box-sizing: border-box;
}

nav ul {
    position: relative;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
}

nav li {
    position: relative;
    left: -50%;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 20px; /* メニュー項目の左右の余白 */
    line-height: 25px; /* ★高さを統一するための重要な指定 */
}

nav li a,
nav li a:link,  /* 未訪問リンクの色を指定 */
nav li a:visited { /* 訪問済みリンクの色を指定 */
    text-decoration: none;
    font-size: 14px;
}
/*================================================
 * セクションタイトルの追随
 ================================================*/
.sticky-title {
    position: -webkit-sticky; /* Safari用の記述 */
    position: sticky;
    top: 45px; /* 上部に固定されるナビゲーションバーの高さに合わせて調整 */
    z-index: 10;
    
    background-color: rgba(85, 85, 85, 0.8); 
    color: #fff; /* 文字色を白に指定 */
    
    padding-top: 10px;
    padding-bottom: 10px;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/*================================================
 * スライドショー
 ================================================*/
.slide { overflow: hidden; position: relative; width: 100%; height: 100%; }
.slideInner { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; }
.slideInner li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; padding:0; background-color:#fff; background-position: center center; background-repeat:no-repeat; background-size: cover; list-style: none; }

/*================================================
 * 人面魚のアニメーション
 ================================================*/
.animation {
	position: absolute;
	width: 250px;
	height: auto;
	top: 60%;
	z-index: 10;
	animation: move-and-flip 30s linear infinite;
}
.animation img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	transition: all 0.5s ease-in-out;
}
.animation img.is-fading {
	opacity: 0.90;
	filter: blur(2px);
	transform: scale(0.95);
}
@keyframes move-and-flip {
	0% { left: -250px; transform: scaleX(-1) translateY(0); }
	25% { transform: scaleX(-1) translateY(-80px); }
	49% { left: 100%; transform: scaleX(-1) translateY(0); }
	50% { left: 100%; transform: scaleX(1) translateY(0); }
	75% { transform: scaleX(1) translateY(40px); }
	99% { left: -250px; transform: scaleX(1) translateY(0); }
	100% { left: -250px; transform: scaleX(-1) translateY(0); }
}

/*================================================
 * レスポンシブ
 ================================================*/
@media screen and (max-width:979px) {
    #contents {
        box-sizing:border-box;
        width:100%;
        padding:0 10px;
    }
}
@media screen and (max-width:767px) {
    h2 { margin-top:30px; }
    .imgC { margin-bottom:30px; }
    .imgC img { max-width:100%; }
    .imgL { margin-bottom:30px; }
    .imgL img { float:none; max-width:100%; margin-right:0; }
    .imgR { margin-bottom:30px; }
    .imgR img { float:none; max-width:100%; margin-left:0; }
    .twoCol { margin-right:0; margin-bottom:30px; }
    .twoColInner { margin-right:0; }
    .twoColInner div { float:none; width:100%; }
    .threeCol { margin-bottom:30px; }
    .threeColInner { margin-right:0; }
    .threeColInner div { float:none; width:100%; }
}
/*================================================
 * 注釈・警告用のスタイル (共通)
 ================================================*/

/* 注意を促すテキスト（赤色） */
.attention {
    color: #ff0000; /* 赤色 */
    font-size: smaller;
}

/* 補足的な注釈（灰色） */
.note {
    color: #777777;
    font-size: smaller;
}

/* 警告（赤色・太字） */
.warning {
    color: #F00000; /* より強い赤色 */
    font-weight: bold;
    }

/*================================================
 * 横並びレイアウト用クラス
 ================================================*/
.flex-container {
    display: flex;
    align-items: center; /* 要素の縦方向の位置を中央に揃える */
    flex-wrap: wrap;     /* 画面幅が足りない場合に折り返す */
    gap: 10px;           /* 要素間の隙間を10pxあける */
}