@charset "UTF-8";

html {
	padding:0;
	margin: 0;
}
body {
	padding:0;
	margin: 80px 0 38.4px;
}

* {
    box-sizing: border-box;
    line-height: 1.45;
    roboto condensed,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Osaka,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif
}
a {
    text-decoration: none;
}
p {
	font-size:1em;
	font-Weight:400;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}

/**** header  ****/
#header {
	display:block;
	background:url('../img/header.jpg') center center no-repeat;
	background-size:100% auto;
	margin:
}
#header-inner {
    position: relative;
    min-height: 600px;
    background: #0005;
}


#sub-menu {
	padding:25px 0 60px;
	text-align:center;
}
.nav-item {
	display:inline-block;
	padding:3px 9px;
}
.nav-item a {
    color: #FFF;
    font-size: 16px;
    line-height: 1;
}
.nav-item a:hover {
    text-decoration: underline;
}
.s-font-body>p {
    display: none;
}

#header-text {
	position: absolute;
	width: 100%;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #FFF;
}
#header-text h1 {
	padding: 0;
	margin: 13px 0 6px;
	font-size: 54px;
	font-weight: 400;
}
#header-text p {
    font-size:26px;
    padding: 0;
    margin: 0 0 0;
}
#header-text a {
	background: transparent;
	border: 2px solid #fff;
	border-radius: 4px;
	padding: 6px 20px 8px;
	line-height: 1;
	color: #fff;
    font-weight: 700;
}
#header-text a:hover {
    background: hsla(0,0%,100%,.1);
}

#header-inner>table {
	border-spacing: 0;
	position: absolute;
	left:0;
	bottom: 0;
	width: 100%;
}
#header-inner>table td {
	height: 24px;
	background: #FFF;
	border-bottom: 5px solid #FFF;
}
#header-inner>table td.c {
    width: 48px;
	clip-path: polygon(
		0 0,
		50% 100%,
		100% 0,
		100% 100%,
		0 100%);
}

/* 追従メニュー */
#fixed-menu {
	position: fixed;
	top: -200px;
	left: 0;
	width: 100%;
	background:#FFF;
	box-shadow:0 1px 1px rgba(0,0,0,.25);
	opacity: 0;
	transition: all .75s ease-in-out;;
	z-index: 100;
	transform: scale(1.1, 1.1);
}
#fixed-menu.open {
	opacity: 1;
	top: 77px;
	transform: scale(1, 1);
}
#fixed-menu-inner {
	padding: 9px 0 8px;
}
#fixed-menu-inner:after {
	content: "\a";
	display: block;
	clear: both;
}
#fixed-menu #fixed-menu-logo {
	position: absolute;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	left: 50%;
	max-width: 14%;
}
#fixed-menu #fixed-menu-logo img {
	width: 100%;
}
#fixed-menu .nav-items {
	width: 41%;
}
#fixed-menu .nav-items:nth-child(2) {
	float:left;
	text-align:right;
}
#fixed-menu .nav-items:nth-child(3) {
	float:right;
	text-align:left;
}
#fixed-menu .nav-items .nav-item a {
	color: #555;
}

@media screen and (max-width:1150px){
	#fixed-menu-inner {
		text-align: center;
	}
	#fixed-menu #fixed-menu-logo {
		position: inherit;
		transform: translateX(0) translateY(0);
		width: 100%;
		max-width: 100%;
	}
	#fixed-menu #fixed-menu-logo img {
		width: auto;
		height: 40px;
	}
	#fixed-menu .nav-items {
		display: inline;
		width: auto;
	}
	#fixed-menu .nav-items:nth-child(2),
	#fixed-menu .nav-items:nth-child(3) {
		float: none;
	}
}
@media only screen and (min-width: 1000px) and (max-width: 1349px) {
	#sub-menu {
		
	}
	#header-text {
		max-width: 934px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (min-width: 876px) and (max-width: 999px){
	#sub-menu {
		
	}
	#header-text {
		max-width: 808px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (min-width: 801px) and (max-width: 875px){
	#sub-menu {
		
	}
	#header-text {
		max-width: 638px;
		margin-left: auto;
		margin-right: auto;
	}
	.nav-item {
		display:inline-block;
		padding:0px 9px;
	}
}
@media only screen and (max-width: 800px) {
	#sub-menu {
		display:none;
	}
	#fixed-menu {
		top: -100vh;
		height: 100vh;
		overflow-y: scroll;
		opacity: 1;
		transform: scale(1, 1);
		transition: all 0.4s ease-in-out;
	}
	#sp-menu-button.open+#fixed-menu {
		top: 0;
	}
	#fixed-menu #fixed-menu-inner {
		padding: 40px 0 0;
	}
	#fixed-menu #fixed-menu-logo {
		display: none;
	}
	#fixed-menu .nav-items {
		display: block;
	}
	#fixed-menu .nav-item{
		display: block;
		border-bottom: 1px solid #eee;
		text-align:left;
		margin: 0 24px;
	}
	#fixed-menu .nav-item {
		padding:15px 30px;
	}
	#fixed-menu .nav-item a.NowPosition {
		font-Weight: 700;
	}
	#fixed-menu .nav-item span{
		display: block;
		line-height: 16px;
	}
	
	#header {
		position: relative;
		aspect-ratio: 16/9;
		width: 100%;
	}
	#header-inner {
		position: absolute;
		width: 100%;
		height: 100%;
		min-height: 100%;
		top: 0;
		left: 0;
	}
	#header-text {
		padding-top: 0;
		margin-bottom: 0;
		width: 440px;
		margin-left: auto;
		margin-right: auto;
	}
	#header-text h1 {
		margin: 0px 0 15px;
		font-size: 33px;
		line-height: 1.2;
	}
	#header-text p {
		font-size: 22px;
		padding: 0;
		margin: 15px 0 30px;
	}
	#header-text a {
		font-size: 20px;
		display:block;
		padding: 15px 20px 13px;
	}
	
}
/****  メイン  ****/
#main img {
	max-width: 100%;
	height: auto;
}
#main session:nth-child(2n) {
	background:#eaecf0;
}
#main>session {
	display: block;
	padding: 80px 0;
	background-position: center center;
	background-size: initial;
	background-repeat: no-repeat;
	background-size: cover;
}
#main>session>* {
	max-width: 988px;
	position: relative;
	margin: 0 auto;
}
#main h2 {
	text-align: center;
	font-size: 36px;
	line-height: 1em;
	margin-bottom: 50px;
	margin-top: 10px;
}
#main h2 p {
	text-align: center;
	font-size:20px;
	margin-bottom: 0;
}
#main .item {
	margin-bottom: 35px;
}
#main .item:after {
    content: "\a";
    display: block;
    clear: both;
}
#main .item .item-details>* {
    margin: 0;
    padding: 0 10px 0.5em;
}
#main .item .item-image {
	float:right;
	max-width: 186px;
}
#main .big-image .item .item-image {
	max-width: 330px;
}
#main .reverse-size .item .item-image {
	max-width: 639px;
}

#main .item:nth-child(2n) .item-image {
	float:left;
}
iframe.player{
	display: block;
	aspect-ratio: 4/3;
	object-fit: contain;
	width: 100%;
	height: 100%;
	border: none;
}
#main .item .item-details {
	margin-right: 210px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 3px;
	background: #fff;
	box-shadow: none;
	padding: 22px 26px;
	color: #be4488;
	font-size: 16px;
}
#main .big-image .item .item-details {
	margin-right: 330px;
}
#main .reverse-size .item .item-details {
	margin-right: 669px;
}
#main .item:nth-child(2n) .item-details {
	margin-right: 0;
	margin-left: 210px;
}
#main .big-image .item:nth-child(2n) .item-details {
	margin-right: 0;
	margin-left: 360px;
}
#main .reverse-size .item:nth-child(2n) .item-details {
	margin-right: 0;
	margin-left: 669px;
}
#main .item .item-details h3 {
	font-size: 24px;
	font-Weight:400;
	color: #000;
}
#main .item .item-details .data-sheet {
	margin-top:0.7em;
	text-align:center;
}
#main .item .item-details .data-sheet a {
    display: inline-block;
    font-size: 16px;
    padding: 12px 18px;
    color: #fff;
    background: #be4488;
    border: 2px solid #be4488;
    border-radius:4px;
    font-weight:700;
}
@media only screen and (min-width: 1000px) and (max-width: 1349px) {
	#main>session>* {
		max-width: 814px;
	}
	#main .item .item-image {
		width: 154px;
	}
	#main .item .item-details {
		margin-right: 180px;
	}
	#main .item:nth-child(2n) .item-details {
		margin-left: 180px;
	}
	#main .big-image .item .item-image {
		width: 274px;
	}
	#main .big-image .item .item-details {
		margin-right: 300px;
	}
	#main .big-image .item:nth-child(2n) .item-details {
		margin-left: 300px;
	}
	#main>session.reverse-size>* {
		max-width: 638px;
	}
	#main .reverse-size .item .item-image {
		width: 634px;
		max-width: 634px;
	}
	#main .reverse-size .item .item-details {
		margin-right: 660px;
	}
	#main .reverse-size .item:nth-child(2n) .item-details {
		margin-left: 660px;
	}
}
@media only screen and (min-width: 876px) and (max-width: 999px) {
	#main>session>* {
		max-width: 710px;
	}
	#main .item .item-image {
		width: 132px;
	}
	#main .item .item-details {
		margin-right: 160px;
	}
	#main .item:nth-child(2n) .item-details {
		margin-left: 160px;
	}
	#main>session.big-image>* {
		max-width: 704px;
	}
	#main .big-image .item .item-image {
		width: 236px;
	}
	#main .big-image .item .item-details {
		margin-right: 260px;
	}
	#main .big-image .item:nth-child(2n) .item-details {
		margin-left: 260px;
	}
	#main>session.reverse-size>* {
		max-width: 808px;
	}
	#main .reverse-size .item .item-image {
		width: 548px;
		max-width: 548px;
	}
	#main .reverse-size .item .item-details {
		margin-right: 570px;
	}
	#main .reverse-size .item:nth-child(2n) .item-details {
		margin-left: 570px;
	}
}
@media only screen and (min-width: 801px) and (max-width: 875px) {
	#main>session>* {
		max-width: 556px;
	}
	#main .item .item-image {
		width: 105px;
	}
	#main .item .item-details {
		margin-right: 123px;
		padding: 17px 13px;
	}
	#main .item:nth-child(2n) .item-details {
		margin-left: 123px;
	}
	#main>session.big-image>* {
		max-width: 558px;
	}
	#main .big-image .item .item-image {
		width: 187px;
	}
	#main .big-image .item .item-details {
		margin-right: 206px;
	}
	#main .big-image .item:nth-child(2n) .item-details {
		margin-left: 206px;
	}
	#main>session.reverse-size>* {
		max-width: 638px;
	}
	#main .reverse-size .item .item-image {
		width: 433px;
		max-width: 433px;
	}
	#main .reverse-size .item .item-details {
		margin-right: 450px;
	}
	#main .reverse-size .item:nth-child(2n) .item-details {
		margin-left: 450px
	}
}
@media only screen and (max-width: 800px) {
	#main>session {
		padding: 36px 0;
	}
	#main>session>*,
	#main h2,
	#main .item .item-image, 
	#main .item:nth-child(2n) .item-image ,
	#main .item .item-details,
	#main .item:nth-child(2n) .item-details,
	#main .big-image .item .item-details,
	#main .big-image .item:nth-child(2n) .item-details,
	#main .side-3 div.item,
	#main .side-3 div.item:nth-child(3n+1),
	#main .side-3 div.item:nth-child(3n+2),
	#main .side-3 div.item:last-child,
	#main .reverse-size div.item:nth-child(2n) .item-details ,
	#main .side-4 div.item ,
	#main .side-4 div.item:nth-child(4n+2) ,
	#main .side-4 div.item:nth-child(4n+1) ,
	#main .side-4 div.item:nth-child(4n+6):nth-last-child(1) {
		float: none;
		width: 440px;
		height: auto;
		max-width: 100%;
		min-height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	#main h2 {
		margin-bottom: 32px;
	}
	#main .item .item-details {
		padding: 22px 10px;
	}
	#main .item .item-details>* {
		padding: 0 10px 0.2em;
	}
	#main .item .item-details .data-sheet a {
		display:block;
		font-size: 20px;
	}
}
/** 横並び **/
#main>session.side-3>* {
    max-width: 1122px;
}
#main>session.side-4>* {
    max-width: 1152px;
}
#main .side-3:after ,
#main .side-4:after {
	content: "\a";
	display: block;
	clear: both;
}
#main .side-3 .item {
	float: left;
	width: 30%;
	margin-right: 3%;
}
#main .side-4 .item {
	float: left;
	width: 22%;
	margin-right: 4%;
}
#main .side-3 .item:nth-child(3n+2) {
	clear: both;
}
#main .side-3 .item:last-child {
	margin-right: 0;
}
#main .side-3 .item:nth-child(3n+5):nth-last-child(2) {
	margin-left: 17%;
}
#main .side-4 .item:nth-child(4n+2) {
	clear: both;
}
#main .side-4 .item:nth-child(4n+1) {
	margin-right: 0;
}
#main .side-4 .item:nth-child(4n+6):nth-last-child(1) {
	margin-left: 39%;
}
#main .side-3 .item .item-image,
#main .side-3 .item:nth-child(2n) .item-image,
#main .side-4 .item .item-image,
#main .side-4 .item:nth-child(2n) .item-image {
	position: relative;
	float: none;
	max-width: 100%;
	width: 100%;
}
#main .side-3 .item .item-image img ,
#main .side-4 .item .item-image img {
	width: 100%;
	position: absolute;
	top: 50%;	left:0;
	transform: translateY(-50%)
}
#main .side-3 .item .item-details,
#main .side-3 .item:nth-child(2n) .item-details ,
#main .side-4 .item .item-details,
#main .side-4 .item:nth-child(2n) .item-details {
	margin-right: 0;
	margin-left: 0;
}
#main .side-3 .item .item-details.c ,
#main .side-4 .item .item-details.c {
	padding:22px 0;
}
#main .side-3 .item .item-details.c p ,
#main .side-4 .item .item-details.c p ,
#main .side-3 .item-details h3 ,
#main .side-4 .item-details h3 {
	text-align:center;
}
#main .side-3 .item-image.c ,
#main .side-4 .item-image.c {
    position: relative;
    margin-bottom:15px;
}
#main .side-3 .item-image.c img ,
#main .side-4 .item-image.c img {
	position:absolute;
	width: 100%;
	top: 50%;
	left:0;
	transform: translateY(-50%)
}
@media only screen and (min-width: 1000px) and (max-width: 1349px) {
	#main>session.side-3>* {
		max-width: 934px;
	}
	#main>session.side-4>* {
		max-width: 960px;
	}
}
@media only screen and (min-width: 876px) and (max-width: 999px) {
	#main>session.side-3>* ,
	#main>session.side-4>* {
		max-width: 808px;
	}
}
@media only screen and (min-width: 801px) and (max-width: 875px) {
	#main>session.side-3>* ,
	#main>session.side-4>* {
		max-width: 638px;
	}
	#main .side-4 .item {
		width: 22.9%;
		margin-right: 2.7%;
	}
}
@media only screen and (max-width: 800px) {
	#main .side-3 .item .item-image img ,
	#main .side-4 .item .item-image img {
		position: relative;
		top: 0;
		transform: translateY(0)
	}
}



/****  個別  ****/
#Se16 {background-color:rgb(28,140,182);}
#Se16 * {text-align:center;color:#FFF;}
#Se16 h3 {font-size:24px;}
@media only screen and (min-width: 1000px) and (max-width: 1349px) {
	#main>session>* {
		max-width: 960px;
	}
}
@media only screen and (min-width: 876px) and (max-width: 999px) {
	#main>session>* {
		max-width: 832px;
	}
}
@media only screen and (min-width: 728px) and (max-width: 875px) {
	#main>session#Se16>div {
		max-width: 656px;
	}
}
#main>#Se17 {
	background:
		linear-gradient( to right, #0003, #0003),
		url(../data/se17/photo-1565118531796-763e5082d113.jpg) bottom center;
	background-color: green;
}
#main>session#Se17>* {
	color:#FFF;
	max-width: 1122px;
}
#main>session#Se17>div {
	max-width: 978px;
}
#main>session#Se17>div>div {
	max-width: 814px;
	margin: 0 auto;
}
#main>session#Se17>div h3 {
	font-size: 24px;
}
#main>session#Se17>div p {
	font-size: 20px;
	margin-top: 0;
}
@media only screen and (min-width: 876px) and (max-width: 999px) {
	#main>session#Se17>div {
		max-width: 808px;
	}
	#main>session#Se17>div>div {
		max-width: 704px;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 801px) and (max-width: 875px) {
	#main>session#Se17>div {
		max-width: 100%;
	}
	#main>session#Se17>div>div {
		max-width: 100%;
	}
}
@media only screen and (max-width: 800px) {
	#main>session#Se17>div {
		max-width: 100%;
		width: 100%;
		padding-left: 35px;
		padding-right: 35px;
	}
	#main>session#Se17>div>h2 ,
	#main>session#Se17>div>div {
		width: 100%;
	}
}