@charset "utf-8";
/* ******************************************************************
 *	File name		: obog.css
 *	Summary			: css style
 * ******************************************************************
 */

/* 940 */

:root {
	--bg-color:#04447C;
	--sub-color:#FEDC4C;
}

/* ----------------------------------------------------------------------
   base
---------------------------------------------------------------------- */

#main_contents{
	padding:0px;
}
#gogb_title{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	height:60px;
	margin-bottom:0px;
	text-align:center;
	background:var(--bg-color);
	}
	#gogb_title h2{
		width:100px;
		margin:0 auto;
}
#container{
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:15px 20px;
}
#container #obog_menu{
	width:180px;
}
#container #obog_contents{
	width:calc(100% - 200px);
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#container #obog_menu{
		width:100%;
	}
	#container #obog_contents{
		width:100%;
	}
}

/* ----------------------------------------------------------------------
   obog_menu
---------------------------------------------------------------------- */

#obog_menu ul{
	list-style:none;
}
#obog_menu ul li{
	margin-bottom:15px;
	}
	#obog_menu ul li a{
		display:block;
		position:relative;
		width:100%;
		height:auto;
		padding:15px;
		font-size:1.1rem;
		text-align:center;
		text-decoration:none;
		background:var(--bg-color);
		color:#FFF;
		transition:.5s;
	}
	#obog_menu ul li a span{
		display:block;
		font-size:0.87rem;
	}
	#obog_menu ul li a:hover{
		text-decoration:none;
		opacity:0.7;
	}
	#obog_menu ul li a::after{
		content:" ";
		position:absolute;
		bottom:3px;
		right:3px;
		border:7px solid transparent;
		border-bottom:7px solid var(--sub-color);
		border-right:7px solid var(--sub-color);
}

/* ----------------------------------------------------------------------
   obog_contents
---------------------------------------------------------------------- */

#obog_contents{}

section{
	position:relative;
	left:0px;
	width:100%;
	margin-bottom:50px;
}
section h3{
	margin-bottom:7px !important;
	font-weight:900 !important;
	font-size:1.4rem;
	color:var(--bg-color);
}
section p{
	position:relative;
	margin-bottom:0px !important;
	font-size:0.8rem !important;
}
section figure{
	margin-bottom:20px;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	section{
		margin-top:0px;
		padding:0px;
	}
	section h3{
		font-size:1.2rem !important;
	}
}

/* ----------------------------------------------------------------------
   #obog_main
---------------------------------------------------------------------- */

#obog_main{
	position:relative;
	margin-bottom:20px;
	padding-bottom:20px;
}
#obog_prof{
	position:absolute;
	bottom:10px;
	right: auto ;
	left:60px;
	width:300px;
	padding:15px 18px 12px;
	background:rgba(254,220,76,0.85);
	border:1px solid #999;
	}
	#obog_prof p{
		font-size:0.87rem;
		line-height:1.35;
	}
	#obog_prof p#obog_name{
		margin-bottom:5px;
		font-weight:700;
		font-size:1.4rem !important;
	}
	#obog_prof p#obog_name span{
		font-weight:700;
		font-size:0.95rem;
}
#obog_prof_r{
	position:absolute;
	bottom:0px;
	right:20px;
	left:auto;
	width:320px;
	padding:15px 18px 12px;
	background:rgba(254,220,76,0.9);
	border:1px solid #999;
	}
	#obog_prof_r p{
		font-size:0.87rem;
		line-height:1.35;
	}
	#obog_prof_r p#obog_name{
		margin-bottom:5px;
		font-weight:700;
		font-size:1.4rem !important;
	}
	#obog_prof_r p#obog_name span{
		font-weight:700;
		font-size:0.95rem;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#obog_main{
		padding-bottom:0px;
	}
	#obog_prof{
		position:relative;
		bottom:0px;
		right:auto;
		left:0px;
		width:100%;
		padding:15px 15px 15px;
	}
	#obog_prof_r{
		position:relative;
		bottom:0px;
		right:auto;
		left:0px;
		width:100%;
		padding:15px 15px 15px;
	}
}

/* ----------------------------------------------------------------------
   lr_box
---------------------------------------------------------------------- */

.lr_box{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:30px;
	text-align:center;
}
.lr_box div{
	flex:1;
	text-align:left;
}

.lr_box.photo_left{
	flex-direction:row-reverse;
}
.lr_box.photo_right{
}
/* --- responsive --- */
@media screen and (max-width:640px){
	.lr_box{
		display:block;
		gap:0px;
	}
	.lr_box figure{
		margin:20px auto 20px;
	}
}

/* ----------------------------------------------------------------------
   term_info
---------------------------------------------------------------------- */

#term_info,
#kit_info{
	margin-bottom:30px;
}
#term_info div,
#kit_info div{
	padding:17px 17px 1px;
	border-radius:6px;
}

#term_info dl dt,
#kit_info dl dt{
	position:relative;
	margin-bottom:5px;
	padding-left:18px;
	font-weight:bold;
	}
	#term_info dl dt::before,
	#kit_info dl dt::before{
		content:" ";
		position:absolute;
		top:5px;
		left:0px;
		width:12px;
		height:12px;
		background:#FFF;
		border-radius:50%;
}
#term_info dl dd,
#kit_info dl dd{
	margin-bottom:17px;
	font-size:0.87rem;
}

/* term_info */
#term_info{
}
#term_info h3{
	color:#BBA236;
}
#term_info div{
	background:#FEF7D4;
}
#term_info dl dt::before{
	background:#BBA236;
}

/* kit_info */
#kit_info{
}
#kit_info h3{
	color:var(--bg-color);
}
#kit_info div{
	background:#E0E0EA;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#term_info dl dt,
	#kit_info dl dt{
		position:relative;
		margin-bottom:5px;
		padding-left:18px;
		font-weight:bold;
	}
	#term_info dl dd,
	#kit_info dl dd{
		font-size:0.8rem;
	}
}


/* ----------------------------------------------------------------------
   kskm
---------------------------------------------------------------------- */

#kskm{
	padding:20px;
}
#kskm > div{
	padding:30px;
	border:10px solid #E0E0EA
}
#kskm > div p{
	margin-bottom:20px;
	font-weight:600 !important;
	text-align:center;
	color:var(--bg-color);
	}
	#kskm > div p strong{
		font-weight:700 !important;
		font-size:1.3rem;
		color:var(--bg-color);
}
#kskm #kskm_link{
	display:flex;
	justify-content:space-between;
	gap:30px;
}
#kskm #kskm_link a:hover{
	transition:.5s;
	opacity:0.7;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#kskm > div{
		padding:20px;
	}
	#kskm > div p{
		text-align:left;
	}
	#kskm > div p strong{
		font-size:1.1rem;
	}
	#kskm > div p br{
		display:none;
	}
	#kskm #kskm_link{
		gap:10px;
	}
}


/* ----------------------------------------------------------------------
   obog_02 (敷村さん) additions
   ハローの見出しはHTMLオーバーレイ、3枚並び写真、図版プレースホルダ
---------------------------------------------------------------------- */

/* 現在表示中のOBを示す */
#obog_menu ul li a.current{
	background:#022C53;
	cursor:default;
}
#obog_menu ul li a.current:hover{
	opacity:1;
}

.ob02 #obog_main > figure{
	margin-bottom:0;
}
.ob02 .obog_hero_title{
	position:absolute;
	top:22px;
	right:0;
	max-width:64%;
	margin:0;
	padding:14px 22px;
	background:#EF8600;
	color:#FFF;
	font-weight:900 !important;
	font-size:1.3rem !important;
	line-height:1.5;
}

/* 3枚横並び */
.ob02 .photo3{
	display:flex;
	gap:14px;
	margin-bottom:20px;
}
.ob02 .photo3 figure{
	flex:1;
	margin:0;
}
.ob02 .photo3 img{
	display:block;
	width:100%;
	height:auto;
}

/* lr_box 内の写真幅を揃える */
.ob02 .lr_box figure img{
	width:100%;
	max-width:330px;
	height:auto;
}

/* 図版プレースホルダ（素材差し替え用） */
.ob02 .ph_box{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:150px;
	margin:10px 0 20px;
	padding:16px;
	text-align:center;
	background:#F5F6F8;
	border:2px dashed #B9C1CB;
	border-radius:4px;
	color:#8A94A0;
	font-size:0.8rem;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	.ob02 .obog_hero_title{
		position:relative;
		top:0;
		max-width:100%;
		font-size:1.1rem !important;
	}
}
@media screen and (max-width:640px){
	.ob02 .photo3{
		display:block;
	}
	.ob02 .photo3 figure{
		margin-bottom:14px;
	}
}








/* ----------------------------------------------------------------------
   obog_03 (田和さん) additions
---------------------------------------------------------------------- */
@media screen and (min-width:768px){
	.ob03 #obog_prof{
		left:400px;
		width:330px;
	}
}

/* 3枚横並び */
.ob03 .photo3{
	display:flex;
	gap:14px;
	margin-top:35px;
	margin-bottom:35px;
}
.ob03 .photo3 figure{
	flex:1;
	margin:0;
}
.ob03 .photo3 img{
	display:block;
	width:100%;
	height:auto;
}

/* lr_box 内の写真幅を揃える */
.ob03 .lr_box figure img{
	width:100%;
	max-width:330px;
	height:auto;
}

/* セクション1: アイコンイラスト（デザインに合わせて縮小、中央寄せ） */
.ob03 .fig_icons{
	margin:35px auto 40px;
}
@media screen and (min-width:768px){
	.ob03 .fig_icons{
		max-width:480px;
	}
}

/* 機械工学×女性エンジニア: 写真を左フロートしテキストを回り込ませる */
.ob03 .photo06_fig{
	max-width:280px;
	margin-bottom:15px;
}
@media screen and (max-width:767px){
	.ob03 .photo06_fig{
		max-width:100%;
	}
}

/* --- responsive --- */
@media screen and (max-width:640px){
	.ob03 .photo3{
		display:block;
	}
	.ob03 .photo3 figure{
		margin-bottom:14px;
	}
}