/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   background-color: #143A95; /* バーの背景色(青) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
   width: auto;           /* メニュー項目の横幅(125px) */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position: relative;    /* ★サブメニュー表示の基準位置にする */
　 padding: 10px;  	  /* ★サブメニュー内側の余白(ゼロ) */
}
ul.ddmenu a {
heighe: 100%;           /* 高さ
   background-color: #143A95; /* メニュー項目の背景色(紺) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-size: 15px;  　　　   /* 文字サイズ指定 */
   font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Geneva, Arial, sans-serif;
   display: block;            /* ★項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #143A95; /* メニュー項目の背景色(紺) */
   color: #89ACC9;            /* メニュー項目にマウスが載ったときの文字色（水色) */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
   display: block;      /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
   margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
   display: none;       /* ★標準では非表示にする */
   position: absolute;  /* ★絶対配置にする */
   background-color: #143A95; /* メニュー項目の背景色(紺) */
}

/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.ddmenu ul li {
   width: 135px;               /* サブメニュー1項目の横幅(135px) */
   border-top: 1px solid white; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li a {
   line-height: 35px;     /* サブメニュー1項目の高さ(35px) */
   text-align: left;      /* 文字列の配置(左寄せ) */
   padding-left: 5px;     /* 文字列前方の余白(5px) */
   font-weight: normal;   /* 太字にはしない */
}
ul.ddmenu ul li a:hover {
   background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}





@charset "UTF-8";

/*初期設定
----------------------------------------------------*/
.nohover {
	pointer-events: none;
}

a img {
	transition: .5s;
}


/*min-width 480px→min-width 768pxの順で読み込む*/


body {
	font-size: 16px;
	line-height: 1.8;
	color: #333;
	font-family: "メイリオ", Meiryo, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳＰゴシック", Geneva, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}



.img_wrap {
	border: 1px solid #ddd;
	width: 300px;
	height: 226px;
	margin: 0 auto;
	overflow: hidden;
}

.img_wrap img {
	width: 100%;
	cursor: pointer;
	transition-duration: 0.3s;
}

.img_wrap:hover img {
	opacity: 0.6;
	transition-duration: 0.3s;

}

ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clear {
	clear: both;
}

.ie8 img {
	width: auto;
}

/*clearfix*/
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/*layout
----------------------------------------------------*/
.wrapper {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.topwrapper {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.centerwrapper {
	width: 98%;
	margin: 0 auto;
}

header {
	padding: 0;
	width: 100%;
}

header h1 {
	display: block;
	margin: 15px auto;
	text-align: center;
	line-height: 30px;
}


.menuwrapper {
	width: 100%;
	margin: 0;
	overflow: visible;
	clear: both;
}

.slwrapper {
	margin: 0 0 15px 0;
	padding-bottom: 30px;

	text-align: center;
}

.sl {
	max-width: 100%;
	display: block;
	margin: 0 auto;
	margin: 0 0 25px 0;
	padding-bottom: 15px;
	text-align: center;
}

.menu>li {
	position: relative;
	/* サブメニューを絶対配置するために親を relative に */
}


/* menu ------------------*/
nav {
	font-family: "小塚ゴシック", Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳＰゴシック", Geneva, Arial, sans-serif;
	font-size: 15px;
	line-height: 30px;
	font-weight: normal;
	text-align: center;
	clear: both;
}

#menu {
	display: none;
}

nav ul {
	margin: 0;
	padding: 0;
	table-layout: fixed;
}

#menu li {
	width: 100%;
	list-style-type: none;
}

#menu li a {
	display: block;
	margin: 0;
	padding: 10px 0 10px;
	/*background: #eee;     */
	/*tani*/
	color: #000;
	text-align: center;
	text-decoration: none;
	border-bottom: solid 1px #999;
}

#menu li a:hover {
	background: #ccc;
}

#toggle {
	display: block;
	position: relative;
	width: 100%;
	background: #72B952;
}

#toggle a {
	display: block;
	position: relative;
	margin: 0;
	padding: 12px 0 13px;
	border-bottom: 1px solid #026829;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

#toggle:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
}

#toggle a:before,
#toggle a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 4px;
	background: #00a73f;
}

#toggle a:before {
	margin-top: -6px;
}

#toggle a:after {
	margin-top: 2px;
}


.white {
	color: #FFF;
}

.red14b {
	color: #FF6500;
	font-size: 14px;
	font-weight: bold;
}



.px10 {
	font-size: 10px;
	line-height: 14px;
	font-weight: normal;
}

.px12 {
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}

.px16 {
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
}

.bold {
	font-weight: 800;
}

.mleft20 {
	margin-left: 20px;
}

.arrlink {
	color: #333;
	text-decoration: none;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	background-image: url(../img/arr_gr.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
	display: block;
	background-position: 2px;
	margin-bottom: 5px;
	clear: both;
}

a.arrlink:hover {
	color: #269F40;
	text-decoration: underline;
}

.title {
	text-align: center;
	font-family: "小塚ゴシック", Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳＰゴシック", Geneva, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.1em;
	font-weight: 200;
	letter-spacing: 0.1em;
	margin: 30px auto;
}

.title span {
	display: block;
	font-size: 11px;
}

.gotop {
	display: block;
	text-align: center;
	margin: 10px auto -30px auto;
}

.block50 {
	margin-top: 30px;
}

.block33 {
	max-width: 300px;
	margin: 30px auto;
}

.block33.wk {
	border: solid 1px #CCC;
}

.top-banner a {
	display: block;
	max-width: 480px;
	margin: 0 auto 15px;
}

#footer {
	display: block;
	background: #000;
	margin-top: 50px;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #FFF;
	font-size: 11px;
	width: auto;
}

.footmenu {
	display: block;
	margin: 0 auto 30px;
	font-size: 13px;
}

.footmenu a {
	color: #FFF;
	text-decoration: none;
	margin-right: 20px;
	padding-left: 14px;
	background: url(../img-top/arr.png) left center no-repeat;
}

.footmenu a:hover {
	color: #999;
}

/*tani*/
.dropdown>a::after {
	/* 閉じている時 */
	content: "＋";
	position: absolute;
	right: 30px;
	font: size 2.5rem;
	font-weight: bold;
	color:#333;
}

/*tani*/
.dropdown>a.active::after {
	/* 開いている時 */
	content: "－";
}


/* top ------------------*/



.pcimg {
	display: none;
}



/*-------------------------NEWS--------------------------*/

#news-cont li {
	display: block;
	width: 100%;
	margin: 10px 0 20px;
	font-size: 13px;
	line-height: 20px;
	color: #666;
	text-align: center;
}

#news-cont li .date {
	font-size: 10px;
}

#news-cont li .blogimg {
	display: block;
	width: 100%;
	height: 230px;
	overflow: hidden;
	border: solid 1px #ccc;
	text-align: center;
	margin-bottom: 10px;
}

iframe.ossm {
	width: 100%;
	height: 1300px;
}


.feed li {
	display: block;
	text-align: left;
	margin-bottom: 15px;
	clear: both;
}

.feed li span {
	display: block;
	float: left;
}

.feeddate {
	width: 90px;
	margin-right: 10px;
}

.feedtit {
	width: 70%;
}

.feed li a {
	color: #333;
	text-decoration: none;
}

iframe.rss {
	width: 100%;
	height: 170px;
}


.form-table th,
.form-table td {
	display: block;
	width: 98%;
	padding: 1%;
}

.form-table tr {
	border-bottom: solid 1px #999;
}

.form-table input.text100,
.form-table textarea {
	width: 80%;
}


.sozai {
	width: 100%;
	position: relative;
}

.sozai li {
	width: 80%;
	max-width: 393px;
	margin: 0 auto 40px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", "メイリオ", Meiryo, serif;
	letter-spacing: .1em;
	font-size: 14px;
	line-height: 1.8em;
	-webkit-text-size-adjust: 100%;
}

.sozai li img {
	display: block;
}

.lineup-l img {
	display: block;
	margin: 0 auto;
	max-width: 150px;
}

.lineup-r,
.nomikata {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman", "メイリオ", Meiryo, serif;
	letter-spacing: .1em;
	font-size: 14px;
	line-height: 1.6em;
}

.nomikata-p {
	margin-top: 20px;
	text-align: center;
}

.lineup-r .px18,
.nomikata .px18 {
	font-size: 18px;
}

.lineup-r .px19,
.nomikata .px18 {
	font-size: 18px;
	width: 280px;
}



.snslink {
	text-align: center;
	margin-bottom: 30px;
}

.snslink a {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 7px;
}

.snslink a.fb {
	background: url("../img/ico-fb.png") no-repeat;
	background-size: contain;
}

.snslink a.twitter {
	background: url("../img/icon_xwhite.png") no-repeat;
	background-size: contain;
}

.snslink a.insta {
	background: url("../img/ico-insta.png") no-repeat;
	background-size: contain;
}

/*---------------ここまでは各画面サイズに共通の設定となる-----*/


/* min-width: 480px
=============================================================*/
@media only screen and (min-width: 480px) {

	header h1 {
		display: block;
		float: left;
		width: 260px;
		margin: 20px auto;
	}

	header h1 img {
		float: left;
	}

	.sl {
		max-width: 100%;
		display: block;
		margin: 0 auto;
		margin: 0 0 30px 0;
		padding-bottom: 60px;


		text-align: center;
	}

	.menuwrapper {
		display: block;
		width: auto;
		float: right;
		text-align: right;
		margin: 0;
		clear: none;
	}

	/* menu ------------------*/
	nav {
		margin: 0 auto;
	}

	#menu {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	nav ul {
		margin: 0;
		display: table;
		background: #000;
	}

	#menu li {
		/*width: 25%; */
		float: left;
		margin: 0;
		padding: 0;
	}

	#menu li a {
		padding: 10px 10px;
		color: #FFF;
		/*background:#000;  */
		/*tani*/
		text-align: center;
		text-decoration: none;
		display: block;
		white-space: nowrap;
		border: dotted 1px #FFF;
	}

	#toggle {
		display: none;
	}

	.centerwrapper {
		max-width: 960px;
		margin: 0 auto;
	}

/*tani　下のtopまで追加した*/


	/* ボタン（＋ / －）のデザイン tani*/
	.dropdown>li>.dropdown-toggle {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		cursor: pointer;
		font-weight: bold;
		display: none;
	}

	.dropdown>a::after {
		/* 閉じている時 */
		content: none;


	/* top ------------------*/



}

/* /min-width 480pxはここまで */



/* min-width: 768px
=============================================================*/
@media only screen and (min-width: 768px) {


	.wrapper {
		margin-bottom: 20px;
	}

	.left,
	.left2 {
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
		width: auto;
	}

	.left50 {
		float: left;
		width: 50%;
	}

	.right,
	.right2 {
		float: right;
		width: auto;
	}

	img.img30 {
		width: 30%;
	}

	.pcimg {
		display: block;
	}

	.centerwrapper {
		max-width: 1000px;
		margin: 0 auto;
	}

	.menuwrapper {
		display: block;
		width: auto;
		float: right;
		text-align: right;
		margin: 0;
		clear: none;
	}

	/* menu ------------------*/
	nav {
		margin: 0 auto;
		max-width: 800px;
	}

	#menu {
		width: auto;
		max-width: 800px;
		margin: 0 auto;
		padding: 0;
	}

	#menu>li {
		/*tani*/
		width: auto;
		float: left;
		margin: 15px 0;
		padding: 0;
		color: black
	}

	#menu>li>a {
		/*tani  >を追加*/
		padding: 10px 15px 5px;
		color: #000;
		/*background:#FFF;*/
		/*    tani */
		text-align: center;
		text-decoration: none;
		display: block;
		white-space: nowrap;
	}

	#menu li a:hover {
		/*tani >を追加*/
		background: none;
		color: #004DA0;
		border-bottom: solid 2px #000;

	}

	#toggle {
		display: none;
	}

	/*tani----＞下のNEWSまで追加*/
	.dropdown {
		position: relative;

	}

	.submenu {
		list-style: none;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 100%;
		/*submenuの上端を親要素dropdownの下橋にぴったりくっつける*/
		left: 0;
		background: rgb(60, 179, 113);
		display: none;
		/* 初期状態では非表示 */
		/*width: 200px;*/
		min-height: auto;
		color: white;

	}

	.submenu li {
		display: block;
		background: rgb(60, 179, 113);
		margin: 0;
	}

	.submenu li a {
		display: block;
		padding: 0;
		background: rgb(60, 179, 113);
		text-decoration: none;
		color: white;
	}

	/* ホバー時にサブメニューを表示 */
	.dropdown:hover .submenu {
		display: block;
	}





	/* top ------------------*/

	/*-------------------------NEWS--------------------------*/

	#news-cont li {
		display: block;
		float: left;
		width: 230px;
		margin: 10px 9px 20px;
		font-size: 13px;
		line-height: 20px;
		color: #666;
		text-align: center;
	}

	#news-cont li:last-child {}

	#news-cont li .date {
		font-size: 10px;
	}

	#news-cont li .blogimg {
		display: block;
		width: 230px;
		height: 230px;
		overflow: hidden;
		border: solid 1px #ccc;
		text-align: center;
		margin-bottom: 10px;
	}

	#news-cont li .blogimg img {
		width: auto;
		min-height: 230px;
	}

	iframe.ossm {
		width: 100%;
		height: 350px;
	}


	.block50 {
		width: 480px;
		margin: 30px 10px;
		float: left;
	}

	.block33 {
		width: 30%;
		margin: 30px 1.5%;
		float: left;
	}

	.top-banner a {
		display: block;
		width: 480px;
		margin: 30px 10px;
		float: left;
	}

	.footmenu {
		float: left;
	}

	.snslink {
		text-align: center;
		margin-bottom: 30px;
		float: right;
	}



	iframe.rss {
		width: 480px;
		height: 170px;
	}



	/* staff ------------------*/
	.staff li {
		width: 32%;
		margin-right: 2%;
		height: 400px;
		float: left;
	}

	.staff li:nth-child(3n) {
		margin-right: 0;
	}


	.form-table th {
		display: block;
		width: 30%;
		float: left;
	}

	.form-table td {
		width: auto;
		float: left;
		clear: right;
	}

	.form-table input,
	.form-table textarea {
		max-width: 100%;
	}


	.sozai li {
		width: 42%;
		margin: 0 4% 40px;
		float: left;
	}

	.sozai li.center {
		float: none;
		margin: 0 auto 40px;
	}

	.lineup-l img {
		display: block;
		margin: 0 auto;
		max-width: 220px;
	}

	.lineup-l {
		width: 35%;
		float: left;
	}

	.lineup-r {
		width: 65%;
		float: left;
	}

	.nomikata {
		float: left;
		width: 60%;
	}

	.nomikata-p {
		width: 40%;
		float: right;
		margin-top: 0;
	}

	.nomikata .px18 {
		font-size: 24px;
	}


}

/* /768 */

.overlay {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 1;
	display: none;
}

.btn_area {
	width: 86%;
	height: auto;
	position: absolute;
	top: 25%;
	left: 50%;
	margin-left: -45%;
	padding: 4% 2%;
	background-color: #fff;
	z-index: 2;
	text-align: center;
}

@media only screen and (min-width: 768px) {
	.btn_area {
		width: 600px;
		margin-left: -300px;
	}
}

.btn_area p {
	text-align: center;
	color: #007832;
	font-size: 18px;
}

.btn_area button {
	display: block;
	margin: 30px auto 10px;
	width: 80%;
	height: 60px;
	font-size: 18px;
	background: #007232;
	color: #FFF;
	cursor: pointer;
}

.btn_area button.no {
	background: #666;
}


* {
	float: none;
	position: static;
}

img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width:480px) {

	/*画面幅が480pxまでの時*/
	#contents #l_contents {
		width: auto;
		float: none;
	}

	#contents #r_contents {
		width: auto;
		float: none;
	}
}

@media screen and (min-width:781px) {

	/*画面幅が781px以上の時*/
	#contents #l_contents {
		width: auto;
		float: none;
	}

	#contents #r_contents {
		width: auto;
		float: none;
	}
}



.alpha a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.footer06 {
	color: #808080;
	background: #e5e5e5;
	padding: 30px;
}

.footer06 a {
	color: #808080;
	text-decoration: none;
}

.footer06 li a:hover {
	text-decoration: underline;
}

.footer06 .wrap {
	width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer06 .wrap h3 {
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px #c4c4c4 solid;
}

.footer06 .wrap p {
	margin: 0;
	padding: 0 0 20px 0;
}

.footer06 .wrap .box {
	width: 30%;
}

.footer06 .wrap .box ul {
	margin: 0;
	padding: 0 0 20px 0;
	list-style: none;
}

.footer06 .wrap .copyright {
	width: 100%;
	padding: 20px 0 0 0;
}

@media only screen and (max-width: 599px) {
	.footer06 .wrap {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.footer06 .wrap h3 {
		border: none;
	}

	.footer06 .wrap .box {
		width: 100%;
	}

	.footer06 .wrap .box ul {
		border-top: 1px #c4c4c4 solid;
	}

	.footer06 .wrap .box ul li a {
		display: block;
		padding: 5px 15px;
		border-bottom: 1px #c4c4c4 solid;
	}

	.box1 {
		float: left;
	}


	/* 全体調整CSS */
	.hamburger-demo-menubox * {
		font-size: 16px;
	}

	.hamburger-demo-menubox li {
		font-size: 14px;
	}

	/* header */
	.demobox-header {
		background: #ddd;
		/* ヘッダーの色 */
		height: 64px;
	}

	/* ヘッダーを最前列に表示 */
	.demobox-header-frontwrap {
		position: relative;
		/* ！header-wrapにrelativeがポイント！ */
		z-index: 9999;
		padding: 1em;
		background: #ddd;
		/* 必ず色を付ける（ヘッダーと同色） */
		height: 100%;
	}

	.demobox-sitename {
		font-weight: 700;
		font-size: 18px;
	}

	/* hamburgerここから */
	/* input非表示 */
	.input-hidden {
		display: none;
	}

	/* label */
	.hamburger-demo-switch {
		width: 4em;
		height: 4em;
	}

	/* メニューリスト */
	.hamburger-demo-menulist {
		margin-right: 5%;
		padding-left: 5% !important;
		/* !important不要な場合あり */
		list-style: none;
	}

	/* プルダウンメニュー */
	/* プルダウンスイッチ */
	.hamburger-demo-switch9 {
		position: absolute;
		background: #eee;
		/* プルダウンスイッチの背景色 */
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 50%);
		border-radius: 50%;
		z-index: -1;
		cursor: pointer;
	}

	/* スイッチの矢印マーク */
	.hamburger-demo-switch9:before {
		content: "";
		position: absolute;
		width: .8em;
		height: .8em;
		border: 1.5px solid;
		border-color: transparent #333 #333 transparent;
		/* 矢印マークの色（#333のみ変更） */
		top: 50%;
		left: 50%;
		transform: translate(-50%, 50%) rotate(45deg);
	}

	#hamburger-demo9:checked~.hamburger-menuwrap-pulldown .hamburger-demo-switch9:before {
		transform: translate(-50%, 100%) rotate(225deg);
	}

	/* メニューリストのデザイン */
	.hamburger-menuwrap-pulldown {
		position: absolute;
		background: #eee;
		/* メニューエリアの背景色 */
		width: 100%;
		left: 0;
		bottom: calc(100% - 4em);
		padding-top: 1em;
		transition: .3s;
		z-index: 9980;
	}

	.hamburger-menulist-pulldown {
		text-align: center;
		font-weight: 700;
		margin-bottom: 0;
		padding-bottom: 2em !important;
		/* !important不要な場合あり */
		padding-top: 2em !important;
		/* !important不要な場合あり */
	}

	.hamburger-menulist-pulldown li {
		margin-bottom: .5em;
	}

	.hamburger-menulist-pulldown a {
		text-decoration: none;
		color: #333;
		/* メニューリストの文字色 */
	}

	/* メニューリストのアニメーション（上から） */
	#hamburger-demo9:checked~.hamburger-menuwrap-pulldown {
		transform: translate(0, 100%);
	}

	/* PCではハンバーガーメニューを表示しない */
	@media (min-width: 992px) {
		.hamburger-demo-menubox {
			display: none;
		}
	}


	.dl-menu.dl-animate-out-1 {
		animation: MenuAnimOut1 0.4s linear forwards;
	}

	@keyframes MenuAnimOut1 {
		50% {
			transform: translateZ(-250px) rotateY(30deg);
		}

		75% {
			transform: translateZ(-372.5px) rotateY(15deg);
			opacity: .5;
		}

		100% {
			transform: translateZ(-500px) rotateY(0deg);
			opacity: 0;
		}
	}

	.dl-menu.dl-animate-in-1 {
		animation: MenuAnimIn1 0.3s linear forwards;
	}

	@keyframes MenuAnimIn1 {
		0% {
			transform: translateZ(-500px) rotateY(0deg);
			opacity: 0;
		}

		20% {
			transform: translateZ(-250px) rotateY(30deg);
			opacity: 0.5;
		}

		100% {
			transform: translateZ(0px) rotateY(0deg);
			opacity: 1;
		}
	}

	.youtube-responsive {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}

	.youtube-responsive iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	}
}