@charset "utf-8";

/* ************************************************
*	トップページ：目的別の導線ボタン
* ************************************************ */

.top-guide *, .sp-cta *, .sdb001 .mz001 a, .mobmenu-right-panel *{ box-sizing:border-box;}

.top-guide{ max-width:1600px; margin:0 auto; padding:6px;}
.top-guide ul{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0; padding:0;}
.top-guide li{ list-style:none;}
.top-guide a{
	position:relative; display:flex; align-items:center; height:100%; min-height:76px;
	padding:0.8em 2.6em 0.8em 1.2em; border-radius:4px;
	background-color:#005ead; color:#fff;
	font-size:16px; line-height:1.5; letter-spacing:0.04em;
}
.top-guide a::after{
	content:""; position:absolute; top:50%; right:1.2em; width:8px; height:8px;
	border-top:2px solid #fff; border-right:2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
}
.top-guide a:hover{ opacity:1; background-color:#004785; color:#fff;}
.top-guide small{ display:block; margin-top:0.1em; font-size:13px; font-weight:normal; opacity:0.9;}
.top-guide .is-recruit a{ background-color:#d9530d;}
.top-guide .is-recruit a:hover{ background-color:#b8450a;}
.top-guide .is-line a{ background-color:#06c755;}
.top-guide .is-line a:hover{ background-color:#05a647;}

@media only screen and (max-width: 1000px) {
	.top-guide{ display:none;}
}


/* ************************************************
*	サイドバー（セクション内ナビ）
* ************************************************ */

.W25_100{ width:24%;}
.W75_100{ width:74%;}
.sdb001{ padding-right:2em;}

.sdb001 .mz001{ border-top:solid 1px #000;}
.sdb001 .mz001 > div > a > div{ border-bottom:solid 1px #000; text-align:center; padding:1em 0; background-color:#fff;}
.sdb001 .mz001 > div > a > div:hover{ background-color:#0399ff; color:#fff;}
.sdb-sp-label{ display:none;}

@media only screen and (max-width: 800px) {
	.W25_100, .W75_100{ width:100%;}
	.sdb001{ padding:0 1em;}
	.sdb001 .soreigai{ padding-top:1.2em !important;}
	.sdb001 .mz001{ border-top:none;}
	.sdb001 .mz001 > div{ margin:0 -3px; font-size:0; letter-spacing:0;}
	.sdb001 .mz001 > div > a{ display:inline-block; width:50%; padding:3px; vertical-align:top;}
	.sdb001 .mz001 > div > a > div{
		display:flex; align-items:center; justify-content:center; min-height:52px;
		padding:0.4em 0.6em; border:1px solid #005ead; border-radius:4px;
		color:#005ead; font-size:13px; font-weight:bold; line-height:1.4; letter-spacing:0.02em;
	}
	.sdb001 .mz001 > div > a > div:hover{ background-color:#e8f1fa; color:#005ead;}
	.sdb001 .mz001 img{ display:none;}
	.sdb-sp-label{ display:inline;}
	.sdb001 .gp011{ display:none;}
}


/* ************************************************
*	スマホ：ヘッダー（Mobile Menu プラグイン）と下部の問い合わせボタン
* ************************************************ */

.sp-cta{ display:none;}

@media only screen and (max-width: 1000px) {
	html{ scroll-padding-top:76px;}
	body[class*="mob-menu-"]{ padding-top:68px;}
	#footer{ padding-bottom:calc(64px + env(safe-area-inset-bottom));}

	.mob-menu-header-holder{ background-color:#fff !important; box-shadow:0 1px 4px rgba(0,0,0,0.15); transition:transform 0.3s ease !important;}
	/* 下スクロールで隠し、上スクロールで出す（js/mobile-menu.js） */
	.mob-menu-header-holder.is-hidden{ transform:translateY(calc(-100% - 8px));}

	/* 左に法人名、中央にマーク。ロゴのテキストはプラグイン設定の「尾道海技学院」 */
	.mob-menu-header-holder .mob-menu-logo-holder{ position:absolute; top:0; left:0; right:0; height:68px; margin:0 !important;}
	.mob-menu-header-holder .mob-menu-logo-holder .headertext span{
		position:absolute !important; top:0; left:12px; display:flex; align-items:center; height:68px;
		color:#005ead; font-family:inherit !important; font-size:12px !important; font-weight:bold !important;
		line-height:1.3 !important; letter-spacing:0.02em !important; white-space:nowrap;
	}
	.mob-menu-header-holder .mob-menu-logo-holder .headertext span::before{ content:"(一財)";}
	.mob-menu-header-holder .mob-menu-logo-holder .headertext::after{
		content:""; position:absolute; top:50%; left:50%; width:50px; height:50px; transform:translate(-50%, -50%);
		background:url(https://marine-techno.or.jp/wp02/wp-content/uploads/fbrfg/apple-touch-icon.png) center / contain no-repeat;
	}
	.mob-menu-header-holder .mobmenur-container{ top:0 !important; right:0; z-index:2; height:68px; margin:0 !important;}
	.mob-menu-header-holder .mobmenur-container a{ display:flex; align-items:center; justify-content:center; width:60px; height:68px;}
	.mob-menu-header-holder .mobmenur-container i{ float:none; width:auto; height:auto; margin:0; color:#005ead; font-size:28px !important; line-height:1 !important;}

	.sp-cta{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
		padding-bottom:env(safe-area-inset-bottom);
		background-color:#005ead; box-shadow:0 -1px 4px rgba(0,0,0,0.2);
	}
	.sp-cta a{
		flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
		height:64px; border-left:1px solid rgba(255,255,255,0.25);
		color:#fff; font-size:12px; font-weight:bold; line-height:1.2; letter-spacing:0;
	}
	.sp-cta a:first-child{ border-left:none;}
	.sp-cta a:hover{ opacity:1; color:#fff;}
	.sp-cta svg{ width:24px; height:24px; fill:currentColor;}
	.sp-cta .is-line{ background-color:#06c755;}
}


/* ************************************************
*	reCAPTCHA バッジ
* ************************************************ */

.grecaptcha-badge{ visibility:hidden !important;}


/* ************************************************
*	スマホ：メニューパネル（Mobile Menu プラグインの右パネル）
*	プラグインの動的CSSがIDセレクタと!importantを使うため、こちらも!importantで上書きする
* ************************************************ */

@media only screen and (max-width: 1000px) {
	.show-nav-right .sp-cta{ z-index:300001;}

	.mobmenu-right-panel{ width:min(86vw, 360px) !important; background-color:#fff !important; box-shadow:-4px 0 16px rgba(0,0,0,0.15);}
	.mobmenu-right-panel .mob-menu-right-bg-holder{ display:none;}
	.mobmenu-right-panel .mobmenu-content{ height:100%; margin-top:0; padding:0 0 calc(96px + env(safe-area-inset-bottom));}
	.mobmenu-right-panel .mobmenu-right-bt{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; z-index:3;}
	.mobmenu-right-panel .mob-cancel-button{ padding:0 !important; color:#333 !important; font-size:24px !important; line-height:1 !important;}

	.spm-head{
		position:sticky; top:0; z-index:2; display:flex; align-items:center; height:56px; padding:0 20px;
		border-bottom:2px solid #005ead; background-color:#fff;
		color:#005ead; font-size:14px; font-weight:bold; letter-spacing:0.2em;
	}

	.mobmenu-content #mobmenuright{ margin:0; padding:0;}
	.mobmenu-content #mobmenuright li{ margin:0 !important; padding:0 !important; border-bottom:1px solid #e3e8ee; background:none !important;}
	.mobmenu-content #mobmenuright li a{
		position:relative; display:flex !important; align-items:center; min-height:56px;
		padding:12px 52px 12px 20px !important; background:none !important;
		color:#1a1a1a !important; font-family:inherit !important; font-size:16px !important; font-weight:bold !important;
		line-height:1.45 !important; letter-spacing:0.04em !important;
	}
	.mobmenu-content #mobmenuright li a:hover{ opacity:1;}

	/* 開閉アイコン（行全体のタップで開閉） */
	.mobmenu-content #mobmenuright .mob-expand-submenu{
		position:absolute !important; top:0; right:0; bottom:0; width:52px; float:none;
		display:flex; align-items:center; justify-content:center; pointer-events:none;
	}
	.mobmenu-content #mobmenuright .mob-expand-submenu i{ display:none !important;}
	.mobmenu-content #mobmenuright .mob-expand-submenu::before{
		content:""; width:9px; height:9px; border-right:2px solid #005ead; border-bottom:2px solid #005ead;
		transform:translateY(-25%) rotate(45deg); transition:transform 0.2s;
	}
	.mobmenu-content #mobmenuright li.is-open > a > .mob-expand-submenu::before{ transform:translateY(25%) rotate(-135deg);}
	.mobmenu-content #mobmenuright li.is-open > a{ background-color:#eef4fa !important; color:#005ead !important;}

	/* 子ページへのリンク */
	.mobmenu-content #mobmenuright li:not(.menu-item-has-children) > a::after{
		content:""; position:absolute; top:50%; right:22px; width:7px; height:7px;
		border-top:2px solid #a9bccf; border-right:2px solid #a9bccf; transform:translateY(-50%) rotate(45deg);
	}

	.mobmenu-content #mobmenuright .sub-menu{ margin:0 !important; padding:0 !important; background-color:#f7f9fb !important; border-top:1px solid #e3e8ee;}
	.mobmenu-content #mobmenuright .sub-menu li{ border-bottom:1px solid #e9edf1;}
	.mobmenu-content #mobmenuright .sub-menu li:last-child{ border-bottom:none;}
	.mobmenu-content #mobmenuright .sub-menu li a{
		min-height:50px; padding:10px 48px 10px 40px !important;
		color:#333 !important; font-size:15px !important; font-weight:normal !important;
	}
	.mobmenu-content #mobmenuright .sub-menu li.menu-item-has-children > a{ font-weight:bold !important;}
	.mobmenu-content #mobmenuright .sub-menu .sub-menu li a{ padding-left:60px !important; font-size:14px !important;}
	.mobmenu-content #mobmenuright .spm-overview > a{ color:#005ead !important; font-weight:bold !important;}

	/* 表示中のページ */
	.mobmenu-content #mobmenuright li.current-menu-item > a{ color:#005ead !important; font-weight:bold !important; box-shadow:inset 4px 0 0 #005ead;}
	.spm-social{ display:flex; justify-content:center; gap:20px; padding:24px 20px;}
	.spm-social a{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; color:#fff !important;}
	.spm-social svg{ width:26px; height:26px;}
	.spm-social .is-facebook{ background-color:#1877f2;}
	.spm-social .is-instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);}
	.spm-social .is-youtube{ background-color:#ff0000;}
	.spm-social .is-youtube svg{ width:28px; height:28px;}
}