@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.otf) format('opentype');
}

.mincho {
	font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}



.gloval__nav{
/*display: none!important;*/
}
body {
	margin: 0;
	color: #353535;
	background-color: #F1F1EF;
	overflow-x: hidden;
}

.hide_pc { display: none; }
.hide_sp { display: block; }
.hide_pc_inline { display: none; }
.hide_sp_inline { display: inline; }

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

a {
	text-decoration: none;
}

h1, h2 {
}

h1 {
	font-size: 3.0rem;
}

h1.hold{
    border-radius: 50px;
    padding: 10px;
    font-size: 2.4rem;
}


h3 {
	margin: 10px 0 5px;
	font-size: 1.0rem;
}

main {
	width: 1200px;
	margin: 0 auto;
}


.flex {
	display: flex!important;
}
.bold {
	font-weight: 700;
}
.center {
	text-align: center;
}
.img-box img {
	width: 100%;
}



/* header */
header {
	padding-top: 0;
	position: relative;
}
nav.hide_sp {
	background-color: #F1F1EF;
}

.l_header ul {
	width: 1200px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}
.l_header ul li {
	text-align: center;
	flex-grow: 1;
	position: relative;
}
.l_header ul li + li::before {
	content: "";
	width: 1px;
	height: 2.0rem;
	margin: auto;
	background-color: #9C9C9A;
	opacity: 0.4;
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}

.l_header a, .l_footer a {
	padding: 15px 30px;
	color: #9C9C9A;
	/*font-weight: 600;*/
	display: block;
	transition-property: all;
	transition: 0.2s linear;
}

.l_header a {
	color: #353535;
}

.l_header a span {
	font-size: 2.0rem;
	display: block;
}

.l_header a:hover,
.l_footer a:hover {
	color: #353535;
}

.l_footer {
	padding: 20px;
	text-align: center;
	font-weight: 600;
	background-color: #F1F1EF;
	position: relative;
}

.l_footer ul {
	margin: 0 auto 15px;
	text-align: left;
	display: inline-block;
}

.l_footer, .l_footer a {
	color: #9C9C9A;
}

.copyright {
	text-align: center;
	font-size: 0.7rem;
	color:#eee;
}



.kv {
	width: calc(100% - 100px);
	height: 336px;
	margin: 0 auto;
	padding: 50px;
	/*background-color: #71C4CF;*/
	/*background-image: url(../img/souryousai/kv_hanabi2023.jpg);
	background-position: center;*/
	justify-content: space-between;
}

/*.message {
	font-size: 1.4rem;
	line-height: 2.4;
	letter-spacing: 0.3rem;
	display: inline-block;
}*/
.message {
	color: #353535;
	font-size: 1.8rem;
	/*font-family: 'Noto Sans Japanese';*/
	font-feature-settings: "palt" 1;
	font-weight: bold;
	line-height: 2;
	letter-spacing: 0.3rem;
	display: inline-block;
}

.slicksss,
.slicksss li,
.slick-slide img {
	height: 47.7vw;
	max-height: 600px;
	min-height: 350px;
}
.slick-slide img {
	width: 100%;
	object-fit: cover;
}

.schedule {
	margin-bottom:20px;
	padding-bottom: 30px;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
}


.logo {
	width: 15%;
	min-width: 180px;
	max-width: 200px;
}
.logo img {
	width: 100%;
	display: block;
}

.kv_cr {
	width: 1200px;
	height: auto;
	margin: 10px auto;
	padding-right: 30px;
	text-align: right;
	font-size: 0.8rem;
	color: ccc;
}

#oval {
	min-width: 1000px;
	margin-top: -56px;
}
#oval2 {
	min-width: 1000px;
	margin-bottom: -60px;
	transform: scale(1, -1);
}

.about {
	margin: 40px 0 100px;
	text-align: center;
}

.date {
	margin: 80px auto 60px;
	font-size: 2.0rem;
	text-align: center;
	letter-spacing: 0.3rem;
}
.date span {
	font-size: 1.5rem;
}

.ig_button {
	margin: 0 auto 100px;
	text-align: center;
}

.ig_button p {
	margin-bottom: 10px;
	font-size: 0.9rem;
}

.ig_button a {
	display: inline-block;
	text-align: center;/*中央揃え*/
	color: #2e6ca5;/*文字色*/
	font-size: 20px;/*文字サイズ*/
	text-decoration: none;/*下線消す*/
}

.ig_button a span {/*アイコンの背景*/
	position: relative;/*相対配置*/
	display: inline-block;
	width: 50px;/*幅*/
	height: 50px;/*高さ*/
	background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
	overflow: hidden;/*はみ出た部分を隠す*/
	border-radius: 13px;/*角丸に*/
}

.ig_button a span:before{/*グラデーションを重ねるため*/
	content: '';
	position: absolute;/*絶対配置*/
	top: 23px;/*ずらす*/
	left: -18px;/*ずらす*/
	width: 60px;/*グラデーションカバーの幅*/
	height: 60px;/*グラデーションカバーの高さ*/
	background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
	background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.ig_button a span .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}



.map {
	padding-bottom: 70px;
	text-align: center;
	/*background-color: #72c4cf;*/
	background-image: url(../img/souryousai/bg_suisai.jpg);
	background-size: cover;
	display: none;
}

.map a {
	margin-top: -100px;
	text-align: center;
	display: inline-block;
}


/* background-image blur blue  */
.bbb::after {
	content: "";
	width: 80px;
	height: 5px;
	margin: 10px auto;
	/*background-image: url(../img/souryousai/bg_suisai.jpg);*/
	background-color: #9C9C9A;
	background-size: cover;
	display: block;
}



/* news */
.news .title {
	margin-bottom: 40px;
}

.news_box  {
	padding: 50px;
	background-color: #72c4cf;
	border-top-left-radius: 120px;
	border-bottom-right-radius: 120px;
}


.news_release {
	width: 700px;
	margin: 25px auto;
	padding: 0 25px;
	color: #fff;
	border-left: 7px solid #fff;
}

.news_release a {
	color: #fff;
}

.release_day {
	font-size: 0.9rem;
}

.release_title {
	font-weight: 600;
}



/* button */
/*.link_button {
	width: 280px;
	margin: 0 auto;
	padding: 8px 0;
	color: #72c4cf;
	font-size: 1.0rem;
	font-weight: 600;
	text-align: center;
	border-radius: 50px;
	border: 4px solid #72c4cf;
	display: inline-block;
	position: relative;
	transition: all 200ms;
}
.link_button::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 20px;
    width: 12px;
    height: 12px;
    border-top: 4px solid #72c4cf;
    border-right: 4px solid #72c4cf;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.link_button:hover {
	color: #fff;
	background-color: #72c4cf;
}
.link_button:hover:after {
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
}*/
.link_button {
	width: 280px;
	height: 3.0rem;
	color: #ffffff;
	text-align: center;
	font-weight: 600;
	line-height: 3.0rem;
	background-color: #353535;
	/*border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;*/
	display: inline-block;
	position: relative;
	transition: background-color 300ms ease-out;
}

.link_button span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.link_button:hover span {
  transform: translate3d(-1rem, 0, 0);
}

.link_button svg {
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
	stroke-width: 5;
	stroke-color: transparent;
}

.link_button:hover svg {
  opacity: 1;
  right: -3rem;
}


/* title */
.title {
	margin: 120px auto 80px;
	/*font-size: 3.0rem;*/
	font-size: 2.0rem;
	letter-spacing: 0.3rem;
	font-weight: 600;
}





/*contents*/
.content .message {
	font-size: 1.2rem;
}

.contents01,
.contents02,
.contents03,
.contents04,
.contents05,
.contents06,
.contents07,
.other-contents,
.past-events {
	margin: 100px 0;
}

.content h2 {
	/*width: 40%;*/
	margin: 0 auto 20px;
	/*padding: 20px 70px;*/
	color: #353535;
	/*background-color: #353535;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;*/
}

/*.content h2::before {
	content: "";
	width: 75px;
	height: 75px;
	margin-right: -29px;
	vertical-align: middle;
	background-image: url(../img/souryousai/bg_suisai.jpg);
	border-radius: 50%;
	display: inline-block;
}*/

.content: .img-box {
	width: 47%;
}

.content .info {
	width: 46%;
	margin: 0;
}

.content .flex {
	justify-content: space-between;
}

.content .info {
	padding: 30px 15px 0 50px;
	text-align: left;
	border-left: 7px solid #9C9C9A;
}

.content .info:nth-child(2n) {
	padding: 30px 50px 0 15px;
	text-align: right;
	border-left: 0;
	border-right: 7px solid #9C9C9A;
}

.content h3 {
	margin: 10px auto 20px;
	font-size: 1.2rem;
	font-weight: 600;
}

.content ul.flex {
	justify-content: space-between;
}
.content ul.flex li {
	width: 32.5%;
}

.content ul.flex li img {
	width: 100%;
	display: block;
}

/*.content .img-box img {
	border-top-left-radius: 120px;
	border-bottom-right-radius: 120px;
}*/

.content .contents_txt {
	margin-bottom: 10px;
}

.sampleimg {
	width: 100%;
	height: 360px;
	object-fit: cover;
}



.container {
  position: relative;
  width: 100%;
  font-size: 0.8rem;
  text-align: left;
}
.container label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 100px; /*グラデーションで隠す高さ*/
	cursor: pointer;
	text-align: center;
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.container input:checked + label {
	background: inherit; 
}
.container label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 200px;
	content: '注意事項を表示';
	transform: translate(-50%, 0);
	color: #81d8d0;
	border:  1px solid #81d8d0;
	border-radius: 20px;
	background-color: #fff;
}
.container input {
  display: none;
}
.container .text-wrapper {
	overflow: hidden;
	height: 100px;
	transition: all 0.5s;
}
.container input:checked + label {
  display: none ;
}
.container input:checked ~ .text-wrapper {
	height: auto;
	padding-bottom: 60px;
	transition: all 0.5s;
}




.sns_share{
	margin: 20px 10px;
	text-align:right;
}

.share {
	position: relative;
	display: inline-block;
	padding: 0 30px;
	font-size: 0.8rem;
}
.share:before{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 23px;
	height: 1px;
	background-color: black;
	-webkit-transform: rotate(-120deg);
	transform: rotate(-120deg);
}
.share:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 23px;
	height: 1px;
	background-color: black;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.share:before {
	left:0;
}
.share:after {
	right: 0;
}






.covid19 {
	width: 900px;
	margin: 0 auto;
}
.covid19 .title {
	font-size: 1.8rem;
}



.sponsorship a {
	width: 400px;
	margin: 0 auto;
}
.sponsorship p {
	margin: 0;
	width: 100%;
}

ul.release li {
	width: 30%;
	margin: 0 1.5% 40px;
}

ul.release li h3 {
	padding: 10px 30px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

ul.release li a {
	color: #000;
}

ul.release li img {
	width: 100%;
}



/* タグネーム　*/
p.tag {
padding: 0 10px;
height: 1.4rem;
margin: 10 0;
color: #ffffff;
text-align: center;
font-weight: 600;
line-height: 1.5rem;
background-color: #427eff;
display: inline-block;
position: relative;
}


/* PC〜タブレット表示時：基本は400px固定、画面が狭くなったら自動で縮む設定 */
@media screen and (min-width: 769px) {
	.content .img-box {
	  width: 400px !important;
	  max-width: 100% !important;
	}
	.content .img-box img {
	  width: 100% !important;
	  height: auto !important;
	}
	.content .info {
	  flex: 1 !important;
	  width: auto !important;
	  min-width: 0 !important; /* flex内の要素が溢れるのを防ぐおまじない */
	}
  }


/* ==========================================================================
   「みんなで創りました！」（other-contents）背景帯スタイル（PC用）
   ========================================================================== */
.other-contents {
  /* シックなコンクリートグレーを背景に指定（全体の#F1F1EFより一段暗いグレーです） */
  background-color: #B0C4DE !important; 
  
  /* 既存の1200px幅の制限を打ち破り、画面の左右いっぱいに背景を広げる */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  /* 左右に広げた背景の内側（上下）に余白を作る */
  padding: 100px 0 !important;
  margin: 0 !important;
}

/* 背景は広げつつ、中のコンテンツ（見出しとブロック）は1200px幅にカチッと揃える */
.other-contents .title,
.other-contents .flex {
  width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



/* ==========================================================================
   PAST EVENTS セクション（PC用横並び・アニメーションなし）
   ========================================================================== */
.past-events {
  margin: 120px 0 !important;
}

/* 横幅を既存サイトの基準値である1200pxに綺麗に揃える */
.past-events-inner {
  width: 1200px;
  margin: 0 auto;
}

/* 3つのカードを等間隔で横並びにする */
.past-events .event-list {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 各カードの横幅を31%（3列）に指定 */
.past-events .event-item {
  width: 31% !important;
  margin: 0 !important;
}

/* カード全体のリンク指定 */
.past-events .event-card {
  display: block;
  text-decoration: none;
  color: #353535 !important;
}

/* 画像を囲むマスク（アスペクト比を16:10の横長に固定） */
.past-events .event-img {
  width: 100%;
  aspect-ratio: 16 / 10; 
  overflow: hidden;
  background-color: #e5e5e5;
  border-radius: 4px; /* スタイリッシュに見せる極細の角丸 */
}

/* 画像がエリアいっぱいに広がるように設定 */
.past-events .event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カードテキスト（日付・見出し・説明） */
.past-events .event-meta {
  padding: 20px 0 0;
  text-align: left;
}

/* 日付 */
.past-events .event-date {
  display: block;
  font-size: 0.85rem;
  color: #9C9C9A;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* タイトル */
/*.past-events .event-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
  color: #353535 !important;
}/*

/* 説明文 */
.past-events .event-desc {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: #777775 !important;
  margin: 0 !important;
}




@media screen and (max-width: 768px) {
	.hide_pc { display: block!important; }
	.hide_sp { display: none!important; }
	.hide_pc_inline { display: inline!important; }
	.hide_sp_inline { display: none!important; }


  /* ==========================================================================
     「みんなで創りました！」（other-contents）スマホ表示用調整（768px以下）
     ========================================================================== */
  .other-contents {
    /* スマホでは100vwの特殊な引き伸ばしを完全に解除し、安全な設定にリセットします */
    width: 100% !important; 
    left: auto !important;
    transform: none !important;
    
    /* 上下の余白（背景帯の高さ）をスマホ用にスリム化 */
    padding: 60px 0 !important;
    margin: 0 !important;
  }

  /* 見出しと4つのブロック（コンテンツ全体）が画面からはみ出すのを防ぐ */
  .other-contents .title,
  .other-contents .flex {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    
    /* 左右に20pxのクッションを作り、文字がスマホの画面端に張り付くのを防ぎます */
    padding: 0 20px !important; 
    box-sizing: border-box !important;
  }


/* ==========================================================================
     PAST EVENTS セクション（スマホ用調整：768px以下・アニメーションなし）
     ========================================================================== */
  .past-events {
    margin: 80px 0 !important;
  }

  .past-events-inner {
    width: 100% !important;
    padding: 0 24px !important; /* スマホ画面の左右に余白を作る */
    box-sizing: border-box;
  }

  /* スマホでは横並びを解除して縦1列にする */
  .past-events .event-list {
    flex-direction: column !important;
  }

  .past-events .event-item {
    width: 100% !important;
    margin-bottom: 40px !important; /* カード同士の縦の隙間 */
  }

  .past-events .event-item:last-child {
    margin-bottom: 0 !important;
  }

  .past-events .event-img {
    aspect-ratio: 16 / 9; /* スマホでは見やすい16:9比率に調整 */
  }


	

	body {
		margin: 0;
	}

	main {
		width: 94%;
		padding-bottom: 60px;
	}

	h1.hold {
		font-size: 2.0rem;
	}

	h2 {
		font-size: 1.2rem;
	}

	h2.message {
		width: 80%;
		padding: 0;
		font-size: 1.0rem;
	}

	h3 {
		font-size: 0.9rem;
	}

	.kv {
		width: calc(100% - 60px);
		height: auto;
		padding: 30px;
		flex-direction: column-reverse;
	}

	/*.kv img {
		width: 70%;
	}*/

	.logo {
		width: 43%;
		min-width: unset;
		max-width: unset;
		margin: 40px auto;
	}

	.message {
		font-size: 0.8rem;
		letter-spacing: 0.09rem;
	}

	.date {
		font-size: 1.6rem;
	}
	.date span {
		font-size: 0.9rem;
	}

	.schedule {
		font-size: 1.0rem;
	}


	.title {
		margin: 60px auto 20px;
		font-size: 1.5rem;
	}

	.l_header ul {
		width: 100%;
		margin: 7% 0;
		flex-direction: column;
	}

	.l_header a {
		padding: 15px;
	}


	.l_footer {
		margin-top: 20px;
		font-size: 0.7rem;
		letter-spacing: 0.1rem;
		position: relative;
	}

	.l_footer a {
		padding: 5px 10px;
		font-size: 0.7rem;
	}


	.ig_button {
		margin: 0 auto 100px;
	}

	.map {
		padding-bottom: 30px;
	}
	.map a {
		margin-top: -50px;
	}
	.map a img { width: 90%; }

	.news .title { margin-bottom: 30px; }

	.news_box {
		padding: 15px 30px;
		border-top-left-radius: 60px;
		border-bottom-right-radius: 60px;
	}

	.news_release {
		width: calc(100% - 15px);
		margin: 15px auto;
		padding: 0 0 0 15px;
	}

	.news .release_title {
		margin-bottom: 0;
		padding: 0;
		font-size: 1.0rem;
	}
	.news .release_title span {
		font-size: 0.8rem;
	}

	.news .sl_first .store, .list li {
		width: 48%;
		margin: 0 1% 28px;
	}

	.news ul.release li {
		width: 100%;
	}

	.news ul.release li h3 {
		margin-top: 0;
		padding: 5px 16px;
	}

	ul.release li {
		width: 48%;
		margin: 0 1% 10px;
	}

	ul.release li .date {
		font-size: 13px;
	}

	ul.release li .info {
		font-size: 0.8rem;
	}

	.content .flex {
		flex-direction: column;
	}

	.contents01, .contents02, .contents03, .contents04, .contents06, .contents07, .other-contents, .past-events{
		margin: 30px 0;
	}

	.content .info {
		width: calc(100% - 27px);
		margin: 0 0 20px;
		padding: 10px 0 0 20px;
		text-align: left;
		border-right: 0;
	}

	.content h2 {
		margin: 0 auto 15px;
	}

	.content .contents_txt {
		margin-bottom: 15px;
		font-size: 0.9rem;
	}

	.content .img-box {
		width: 100%;
		margin-bottom: 15px;
	}

	.content .info:nth-child(2n) {
		padding: 10px 20px 0 0;
	}

	.link_button { width: 100%; }

	.sampleimg {
		height: 230px;
	}

	.sns_share {
		margin: 0px 10px -45px;
	}

	.covid19 {
		width: 100%;
		margin: 0 auto 30px;
	}

	.covid19 .title {
		font-size: 1.2rem;
	}



	header .logo {
		width: 30%;
		margin: 40px auto;
	}

	#nav-drawer {
	  position: relative;
	}

	#nav-drawer #logo {
		margin-top: 50px;
	}

	#nav-drawer li {
		width: 100%;
		text-align: center;
		border-bottom: 0.5px solid #ccc;
	}

	/*#nav-drawer a {
		color: #fff;
	}*/

	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
	  width: 30px;
	  height: 22px;
		vertical-align: middle;
		position: fixed;
		top: 20px;
	  left: 20px;
	  z-index: 9999;
	}

	/*ハンバーガーの形をCSSで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #555;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒箇所*/
	#nav-close {
	  display: none;
	  position: fixed;
	  z-index: 99;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*メニューの中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;
	  width: 80%;
	  max-width: 330px;/*最大幅（お好みで調整を）*/
	  height: 100%;
	  background: #F1F1EF;
	  transition: .3s ease-in-out;
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);
	}

	/*チェックがついたら表示させる*/
	#nav-input:checked ~ #nav-close {
	  display: block;
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

	.header-logo-menu{
		display: flex;
		display: -moz-flex;
		display: -o-flex;
		display: -webkit-flex;
		display: -ms-flex;
		flex-direction: row;
		-moz-flex-direction: row;
		-o-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
	}

}