@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

* {	box-sizing: border-box; }
body {
	font-family: 'Noto Sans JP',Arial, Helvetica, sans-serif;
	margin:0;
	padding: 0;
	width: 100%;
	font-size: 16px;
	/* display: flex;
	flex-direction: column;
	min-height: 100vh; */
}
.pc { display: block; }
.sp { display: none; }
header {
	width: 100%;
	margin-bottom: 35px;
	/* background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 134, 94, 0.5)),url(../img/MV.jpg); */
	background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.133)),url(../img/MV.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
	box-shadow: 0px 6px 9px -4px rgba(0, 0, 0, 0.4);
	position: relative;

	.container {
		width: 100%;
		max-width: 1200px;
		margin: auto;
		display: flex;
		padding: 10px;
		
	}
}
.logo img {
		width: 100px;
		margin: 10px 0 0 40px;
		z-index: 3;
		position: relative;
	}
.logo a:hover {
	/* opacity: 0.7; */
	/* transition: 0.3s; */
}
main {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	display: flex;
	/* justify-content: space-between; */
}
nav {
	width: 23%;
	min-width: 240px;
	display: block;
	/* background: silver; */
	
	ul {
		list-style: none;
		line-height: 2;
		padding: 0;
		margin: 0;
		font-size: 1.1rem;
		border: solid #ff962d 6px;
		font-weight: bold;
		
		div {
			background: #ff962d;
			text-align: center;
			color: #fff;
			padding: 2px 0 3px;
			font-size: 1.2rem;
		}

		li {
			/* border-bottom: 1px solid rgb(0, 0, 0); */
			/* background: #ff962d; */
			text-align: center;
			
			a {
				color: #000000;
				display: block;
				padding: 5px 5px 5px 15px;
				/* border-radius: 100vh; */
				/* border: solid 1px #ff962d; */
				padding: 6px 2px;
				transition : 0.3s;
				width: 90%;
				border-bottom: 1px silver solid;
				margin: auto;
				text-decoration: none;
			}
			a.active {
				/* background: #ff962d; */
				color: #ff962d;
				
			}
			a:hover {
				color: #ff962d;
				transition : 0.5s;
			}
		}
	}
	li:last-child a {
		border-bottom: none;
	}
}
.main_contens {
	width: 74%;
	padding: 0 10px;
	margin-left: 50px;
	a {
		color: rgb(20, 118, 255);
	}
	a:hover {
		opacity: .7;
		transition: 0.3s;
	}
	li {
		margin-left: 22px;
	}
}
.site_title {
	position: absolute;
	top: 50%;
	left: 50%;
 	transform: translate(-50%, -50%);
	width: 720px;
	font-family: serif, sans-serif;
	text-align: center;
	background: linear-gradient(90deg, transparent, #ffffffa3 17%, #ffffff 40% 60%, #ffffffc2 83%, transparent);

	/* border: #ff962d solid 2px; */
	padding-bottom: 15px;
	padding-top: 10px;
}
h1 {
	margin: 0 0 10px;
	font-size: 2.9rem;
	z-index: 2;
	span {
		font-size: 0.7em;
	}
}
.sub_title {
	font-size: 1.5rem;
	font-weight: bold;
	display: block;
	span {
		/* background: linear-gradient(transparent 50%, #ffffff78 50%);
		padding: 0 10px; */
	}
}

h2 {
	margin: 0 0 10px;
	font-size: 2rem;
	color: #ffffff;
	/* border-left: 6px #ff962d solid; */
	padding: 2px 0 5px 15px;
	background-image: linear-gradient(90deg, #ff8500, #ffc28080 65%, transparent);
}
h3 {
	margin: 0 0 10px;
	span { font-weight: normal; }
}
h4 {
	margin: 10px 0;
	border-left: 7px rgb(248, 133, 19) solid;
	padding: 6px 8px;
	background: #f5f5f5;
}
h5 {
	margin: 0;
	font-size: 1rem;
}
p { margin: 0; }
section {
	margin: 40px 0;
	.container {
		padding-left: 20px;
	}
}
ol {
	margin: 0;
	padding-left: 10px;
}
.poster {
	margin-top: 30px;

	a {
		position: relative;
	}
	a:hover {
		opacity: 0.7;
		transition: 0.3s;
	}

	img {
		border: 1px solid silver;
		max-width: 220px;
	}
	p {
		position: absolute;
		bottom: 15px;
		left: 0;
		right: 0;
		width: 90px;
		text-align: center;
		background: #000000cd;
		color: #ffffff;
		border-radius: 100vh;
		border: 2px solid #000000;
		padding: 0 0 1px;
		letter-spacing: 1px;
		margin: auto;
		/* font-weight: bold; */
		/* font-size: 1.2rem; */
	}
}
section.message {
	display: flex;
	.message_area {
		width: 75%;
		height: 100%;
		padding: 30px 20px 40px;
		background: rgb(242, 242, 242);
		border-radius: 10px;
	}
	.professor_photo {
		width: 25%;
		text-align: center;
		margin-left: 10px;
	}
	div {
		margin-bottom: 20px;

	}
	img {
		width:  140px;
	}
}

.venue {
	display: flex;
	gap: 20px;
}
.venue_text {
	width: 63%;
}
.venue_photo {
	width: 37%;
	img.castle {
		width: 100%;
	}
	img.map {
		width: 168px;
	}
}

.hakone_spot {
	display: flex;
	text-align: center;
	width: 100%;
	div {
		width: 50%;
	}
	div img {
		height: 185px;
	}
}
a.abstract_btn {
	display: block;
	width: 295px;
	padding: 15px 0;
	text-align: center;
	/* font-weight: bold; */
	background: #ff6449;
	margin: 0 auto 30px;
	color: #fff;
	text-decoration: none;
	border-radius: 12px;
	/* border-bottom: 6px solid #ad0000; */
	border: 1px solid #000;
	position: relative;
}
a.abstract_btn::after {
	content: 'arrow_forward_ios'; /* ← アイコン名 */
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 17px;
	right: 6px;
}

a.abstract_btn_min {
	display: block;
	color: #fff;
	background: #ff6449;
	padding: 1px 22px 0 16px;
	height: 32px;
	border-radius: 7px;
	/* height: 1.5em; */
	margin-left: 7px;
	text-decoration: none;
	border: 1px solid #000;
	position: relative;
}
a.abstract_btn_min::after {
	content: 'arrow_forward_ios'; /* ← アイコン名 */
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 4px;
	right: 2px;
}

.flex {
	display: flex;
	/* align-items: center; */
}
.orange {
	color: #ff962d;
}
.red {
	color: #EC0000;
}
.green {
	color: #078900;
}
.bold {
	font-weight: bold;
}

.indent1 {
	text-indent: -1em;
	padding-left: 1em;
}

.pd-left10 { padding-left: 10px; }
.pd-left15 { padding-left: 15px; }
.pd-left20 { padding-left: 20px; }
.pd-left25 { padding-left: 25px; }
.pd-left30 { padding-left: 30px; }

.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }

footer {
	border-top: 1px silver solid;
	background: #f5f5f5;
	text-align: center;
	padding:25px 5px;
	font-size: 0.8rem;
	/* color: #fff; */
	margin-top: 40px;
}

/* --- ★★★スマホの設定★★★ --- */
@media screen and (max-width:959px) {
.pc { display: none; }
.sp { display: block; }
header {
	height: 150px;
}
.logo img {
		width: 50px;
		margin: 0 0 0 30px;
	}

h1 {
	font-size: 1.6rem;
}
.site_title {
	width: 100%;
	background: linear-gradient(90deg, transparent, #ffffffa3 30%, #ffffff 42% 58%, #ffffffc2 70%, transparent);
}
.sub_title {
	font-size: 1.2rem;
}
h2 {
	font-size: 1.3rem;
}
h3 {
	font-size: 1.1rem;
}
section {
	margin:30px 0 40px;
	.container {
	padding-left: 0;
}
}
.poster { 
	img { width: 200px; }
}
.main_contens {
	width: 100%;
	margin-left: 0;
}
section.message {
	display: block;
	.message_area {
		width: 100%;
		height: 100%;
	}
	.professor_photo {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}
}
.professor_photo div:last-child {
		margin-left: 10px;
	}
.venue {
	display: block;
	.venue_text {
		width: 100%;
		margin-bottom: 15px;
	}
	.venue_photo {
		width: 100%;
	}
}

.hakone_spot {
	display: block;
	/* text-align: left; */
	div {
		width: 100%;
		margin-bottom: 25px;
	}
	div img {
		height: auto;
		width: auto;
		max-width: 355px;
	}
}
footer {
	font-size: 0.55rem;
}
footer img {
	height: 40px;
}
nav {
	display: none;
    position: fixed;
    top: 0;
    width: 100%;
	max-width: 1250px;
    z-index: 10;
	background: #fff;
	ul {
		div { padding: 3px 0 5px; }
	}
}

ul {
    /*最初はナビゲーションボタンは非表示*/
    display: block;
    list-style:none;
}
li a{
    padding: 8px;
    font-size: 16px;
    color: #464646;
    display: block;
    /* text-align: center; */
    text-decoration: none;
}
.hamburger {
    position: absolute;
    top: 12px;
    right:20px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
}
.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #333;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-45deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(45deg);
}
}

/* --- ★★★ヘッダー部分小さい画面サイズの調整★★★ --- */
@media screen and (max-width:530px) {
	h1 {
		font-size: 1.1rem;
	}
	.sub_title {
	font-size: 0.9rem;
}
.hamburger {
    right:10px;
}
.logo img {
		width: 40px;
		margin: 0;
	}
}

@media screen and (max-width:390px) {
		h1 {
		font-size: 1rem;
	}
	.sub_title {
	font-size: 0.8rem;
}
}