﻿

.auto-style7 {
	text-align: center;
}

body {
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
	text-align: center;
	color: #333;
	/* font-family: Meiryo, Arial, Helvetica, sans-serif; */ /* MacOSでArialがあたるとメニューの英語表示が上にズレるのでコメントアウト */
	font-family: "Hiragino Sans",
	"Hiragino Kaku Gothic ProN",
	sans-serif;
	font-size: 1em;
}
/* メインコンテンツ */
#page_content {
	margin: auto 0px;
}
#page_content h1 a,　#page_content h1 a:hover {
	color: #3FA7C9;
	text-decoration: none;
}
#page_content_box {
	text-align: center;
	margin: 0 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#page_content_box h2{
	text-align: center;
}
#page_content_box h2 a{
	text-decoration: underline;
}
#page_content_box h2:first-child{
	margin-top: 0px;
	margin-bottom: 20px;
	padding-top: 50px;
}
#page_content_box h2:not(:first-child){
	margin-top: 66px;
	margin-bottom: 20px;
}
/* メインコンテンツ、サイドバー */
#page_content, #sidebar {
	background-color: #FFF;
}

/* サイドバー */
.aside {
	text-align: left;
	margin: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.aside ul,
ul.list {
	list-style-type: none;
	margin: 0px 0px 1em 0px;
	padding: 0px;
	border-top: dotted 1px;
}

.aside ul li,
ul.list li {
	margin: 0px;
	/* border-bottom: dotted 1px; */
}
.menu_link{
	padding: .5em 0px;
}
.border {
	 height: 0;
	 margin: 0;
	 padding: 0;
	 border: 0;
	border-top: dotted 1px;
}
.aside li a,
.list a {
	display: block;
}

.aside ol,
ul.rel {
	margin: 0px 0px 10px 2em;
	padding: 0px;
}

.aside ol li,
ul.rel li {
	margin: 0px;
	padding: 5px 0px 5px 0px;
}

/* ヘッダー画像の外枠 */
.header_img {
	margin-bottom: 10px;
	background-color: #FFF;
}
.padding_header_img{
	padding: 10px;
}

/* okada.gjfの調整 */
.padding_staff_img {
	padding: 0px 10px; /* 画像サイズの調整 */
	margin: 16px 0px;  /* 上下の余白 */
}
.staff_img_adjust {
	max-width: 192px; /* ほかのスタッフの画像の幅に合わせる */
	margin: auto;
}

/* フッター */
#footer {
	background-color: #FFF;
	clear: both;
	padding: 10px 10px 5px 10px;
	margin-top: auto;
	text-align: center;
}

/* Heading と Heading のリンク */
h1,h1 a:link,h1 a:visited {
	margin-top: 0px;
	padding: 0px;
	line-height: 1.1em;
	clear: both;
	color: #FF3399;
}
h2, h3, h4, h5, h6, h2 a, h3 a {
	padding: 0px;
	line-height: 1.1em;
	clear: both;
	color: #68acc8;
}
h1 a:hover, h2 a:hover,h3 a:hover{
	text-decoration:underline!important
}

/* リンク */
a:link {
	color: #06c;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: #FF0000;
}


/* トップに戻るリンク */
.right {
	text-align: right;
}

/* ヘッダー画像とメインコンテンツのマージン */
.wrapper{
	margin-bottom: 10px;
}


/*  ----------------------------------------

	Responsive design styles

-------------------------------------------*/

/* ヘッダー画像のサイズ調整 */
@media only screen{
	img {max-width: 100%;height: auto;}
}

/* タブレット、スマホ、低解像度PC想定 <= 1023px */
@media only screen and (max-width:1023px) {

	/* ハンバーガーアイコンの位置、背景設定 */
	.btn_bg {
		height: 50px;
		width: 50px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2;
		background-color: #ddeeee;
	}

	/* ハンバーガーアイコン */
	.menu_btn {
		height: 50px;
		width: 50px;
		position: absolute;
		top: 0;
		left: 0;
		transition: .3s;
	}

	/* ハンバーガーアイコンの線 */
	.menu_btn div {
		height: 2px;
		width: 60%;
		background: #FFF;
		position: absolute;
		top: 50%;
		left: 20%;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
		transition: .3s;
	}

	/* ハンバーガーアイコン 上の線 */
	.top {
		transform: translateY(-10px);
	}

	/* ハンバーガーアイコン 下の線 */
	.bottom {
		transform: translateY(10px);
	}

	/* ハンバーガーアイコンクリック時*/
	.menu_btn.open {
		transform: rotate(180deg);
	}

	/* ハンバーガーアイコンクリック時 中央の線*/
	.menu_btn.open .middle {
		opacity: 0;
	}

	/* ハンバーガーアイコンクリック時 上の線*/
	.menu_btn.open .top {
		transform: rotate(45deg);
	}

	/* ハンバーガーアイコンクリック時 下の線*/
	.menu_btn.open .bottom {
		transform: rotate(-45deg);
	}

	/* トグルメニュー */
	.menu {
		position: fixed;
		width: 100%;
		transform: translateY(-100%); /* 上に100%動かして隠す */
		z-index: 1;
		transition: .3s;
		visibility: hidden;
		background-color: #fff;

		/* トグルメニューが画面の高さを超えたとき、スクロール可能にする */
		max-height: 100vh;
		overflow: auto;
	}

	/* トグルメニュー 起動時 */
	.menu.open {
		visibility: visible;
		transform: translateY(0px);
	}

	/* トグルメニュー ul要素 */
	.inner_menu {
		padding: 0;
	}

	/* トグルメニュー li要素 */
	.menu_items {
		list-style: none;

	}

	/* トグルメニュー リンク ホバー時 */
	.inner_menu li a {
		display: block;
		height: 100%;
		padding: 8px 0px 8px 0px;
	}
	.inner_menu li a:hover {
		background-color: rgb(247, 248, 250); /* マウスがあたったら若干暗くする */
	}

	/* 本文のマスク設定 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #333;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
	}

	/* マスクをかけてメニューを強調 */
	.mask.open {
		opacity: .5;
		visibility: visible;
	}

}

/* PC想定 >= 1024px */
@media only screen and (min-width:1024px) {

	/* アンカーリンクが固定ヘッダに被らないようにする */
	.anchor_link_offset {
		margin-top:-50px;
		padding-top: 50px;
	}
	/* ヘッダー画像 */
	.header_img {
		margin: 60px auto 10px auto;
	}

	/* ハンバーガーアイコンは出さない */
	.btn_bg {
		display: none;
	}

	/* PC想定デザインでは本文のマスクはしない */
	.mask {
		opacity: 0;
		visibility: hidden;
	}

	/* 固定ヘッダー */
	.menu {
		width: 100%;
		height: 50px;
		box-sizing: border-box;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		transform: translateY(0px);
		background-color: #fde8e9;
	}

	/* h3 メニュー */
	.menu h3 {
		margin: 0 20px 0 20px;
	}

	/* 固定ヘッダー ul要素 */
	.inner_menu {
		display: inline-flex;
		padding: 0;
	}
_::-webkit-full-page-media,
_:future,
:root .safari_eng {
	margin-top: .2em;
}
	/* 固定ヘッダー li要素 */
	.menu_items {
		zoom: 1;
		/* text-align: center; */
		vertical-align: middle;
		list-style: none;
		margin-left: 20px;
		margin-right: 20px;
	}

	.wrapper, .header_img {
		width: 984px;
	}

	.wrapper {
		display: inline-block;
		*display: inline;
		*zoom: 1;
		margin-bottom: 10px;
	}

	/* メインコンテンツ */
	#page_content {
		margin: auto 0px;
		width: 650px;
		float: right;
	}

	/* サイドバー */
	#sidebar {
		float: left;
		width: 320px;
		margin: auto 0px 10px 0px;
	}
	.aside {
		padding-top: -10px;
		margin-top: 0;
		margin-bottom: 0
	}

	/* 角丸 */
	#page_content, #sidebar,#header, .round {
		-webkit-border-radius: 7px; /* Safari,Google Chrome用 */
		-moz-border-radius: 7px; /* Firefox用 */
		border-radius: 7px;
	}
}

@media only screen and (min-width: 1124px) {

	/* ヘッダー画像 */
	.wrapper,.header_img {
		width: 1084px;
	}

	/* メインコンテンツ */
	#page_content {
		width: 750px;
	}
}

	.video-container {
	  position: relative;
	  width: 100%;
	  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
	  height: 0;
	  overflow: hidden;
	  /*max-width: 100%;*/
	  margin: 0 auto; /* 中央寄せ */
}

	.video-container iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  border: 0;
}

@media screen and (min-width: 1024px) {
  .video-container {
    width: 560px;            /* 固定幅 */
    height: 315px;           /* 固定高 */
    padding: 0;              /* padding-bottom を無効化 */
  }

  .video-container iframe {
    position: static;        /* 通常のブロック表示に戻す */
    width: 560px;
    height: 315px;
  }
}