@charset "UTF-8";
/*リセットcss開始*/

/*-----------------------------
color
-----------------------------*/
/* 
【サイトカラーの変数】
ここの色を変更すると全体の色を変更できます(^)o(^)bたぶん
使用例) color: var(--black-color);
*/
:root {
	--white-color: #ffffff;
	--black-color: #4E4E4E;
	--gray-color: #FCEACD;
	--color1: #455883;
	--color2: #24252C;
	--color3: #EF7B7B;
}

@font-face {
	font-family: 'marche-font';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/matahari-marche/marche-font.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	image-rendering: -webkit-optimize-contrast;
}

*::before, *::after {
  display: inline-block
}

html {
	font-size: 62.5%;
	overflow-wrap: break-word;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	background-image: url("../images/matahari-marche04/bg.jpg") !important;
	font-family: 'Noto Sans JP', sans-serif;
	background: var(--color1);
	color: var(--gray-color);
}

header{
	display: none;
}
h1 {
	position: relative;
}
h1 img {
  position: relative;
	z-index: 5;
}
h1 span.logo_version {
  position: absolute;
  right: 0;
  top: 360px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background: var(--color1);
  border-radius: 100px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
	z-index: 3;
}
h1 em {
  font-size: 5rem;
	font-style: normal;
    font-family: "marche-font";
}
h3 {
    font-size: 35px !important;
    font-weight: bold;
    border-bottom: 5px solid #7f5050;
    margin-bottom: 30px;
	text-align: center;
	font-family: "marche-font";
	letter-spacing: 5px;
}
.container2 h3 {
    font-size: 45px;
    font-weight: bold;
    border-bottom: none;
    text-align: center;
    position: relative;
    font-family: "marche-font";
    letter-spacing: 5px;
    width: 50%;
    margin: 0 auto 30px auto;
}
h4 {
    font-size: 25px !important;
    font-weight: bold;
    margin-bottom: 30px;
	text-align: center;
}
#said_bar {
	display: none;
}

.curve {
  width: 100%;
  height: 150px;
	margin-top: 100px;
  background: var(--color1);
  -webkit-mask: radial-gradient(120% 400% at 50% 210%, transparent 49.8%, #002 50%);
          mask: radial-gradient(120% 400% at 50% 210%, transparent 49.8%, #002 50%);
	transform: rotate(180deg);
}

#contents #cafe h2 {
	color: #983924 !important;
	padding-top: 20px;
	position: relative;
    z-index: 10;
}
#contents #cafe b {
    font-size: 80px;
	font-weight: normal;
}
#contents #cafe .deco-text{
	position: relative;
	color: var(--color1);
}

#contents #cafe .deco-text::before, #contents #cafe .deco-text::after {
	top: -480px !important;
    z-index: 1;
	
}
#contents #cafe .deco-text::before {
    content: url(../images/matahari-marche04/img_deco-left.png) !important;
}
#contents #cafe .deco-text::after {
    content: url(../images/matahari-marche04/img_deco-right.png) !important;
}
.deco-text {
	position: relative;
	text-align: center;
	min-height: 0 !important;
	color: #983924 !important;
	margin-bottom: 20px !important;
}
.deco-text img {
	position: absolute;
    top: -40px;
    left: 135px;
    width: 130px;
}
.deco-text p.day {
	display: inline-block;
    font-size: 40px;
    padding: 10px 110px 0 40px;
    line-height: 70px;
	font-family: "marche-font";
	letter-spacing: 5px;
}
.deco-text span {
	background: #c82d36;
    color: #fff;
    padding: 5px 14px;
    border-radius: 30px;
    margin-bottom: 5px;
    position: absolute;
    top: 15px;
    right: 300px;
    font-size: 35px;
}
.deco-text p.time {
	display: inline-block;
    font-size: 40px;
    padding: 0px 40px;
    color: #ffff;
    font-family: "marche-font";
    letter-spacing: 5px;
    background: var(--color1);
    border-radius: 50px;
}
.deco-text p.in {
	    font-size: 18px;
    color: var(--color1);
    margin-top: 10px;
    letter-spacing: 3px;
}

.pick-up {
	margin-bottom: -150px;
}
.pick-up ul {
	display: flex;
}
.pick-up ul li {
	position: relative;
	top: 20px;
}
.pick-up ul li:first-child {
	top: -50px;
}
.pick-up ul li:last-child {
	top: -50px;
}
.pick-up ul li div {
	position: absolute;
	width: 55%;
	bottom: 0;
    left: -20px;
}
.pick-up ul li:first-child div {
	position: absolute;
	top: -50px;
	bottom: auto;
	left: -25px;
}
.pick-up ul li:last-child div {
	position: absolute;
	top: -50px;
	right: 10px;
	bottom: auto;
	left: auto;
}
.pick-up ul li img {
	width: 90%;
    margin: 0 auto;
}

.container2 {
	position: relative;
    background: var(--color1);
    top: -1px;
}
.container2-inner {
}
.o_col2 .main_conts {
	width: 100% !important;
}
.booth {
	font-size: 20px;
    text-align: center;
	position: relative;
    padding-top: 50px;
}
.booth img {
    width: 100%;
	margin: 0 auto;
}
.booth ul {
	display: inline-flex;
	width: 1000px;
	margin-top: 30px;
}
.booth ul li {
	text-align: left;
    width: 50%;
	margin-right: 0%;
}
.booth ul li:first-child{
	text-align: left;
    width: 50%;
	margin-right: 1%;
}
.booth ul li p {
	font-size: 18px;
    margin-bottom: 10px;
}

.map {
    padding: 100px 0;
    width: 1000px;
    margin: 0 auto;
}
.map ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.map ul li {
	margin: 10px;
	text-align: center;
}
.map ul li img {
	width: 500px !important;
    height: 312px !important;
	
}
.map ul li iframe {
	width: 500px !important;
    height: 312px !important;
}

.sponsor {
  padding: 100px 0 0;
	background-image: url("../images/matahari-marche04/bg.jpg") !important;
  margin: 0 auto;
	color: var(--color1);
}
.sponsor img.title {
  margin: 0 auto;
}
.sponsor h3 {
    color: #983924;
		margin-top: 50px;
}
.sponsor h4 {
    color: #C76132;
}
.sponsor .top-sponsor ul {
	margin-bottom: 100px;
	text-align: center;
    color: #C76132;
	width: 1200px;
    margin: 0 auto;
}
.sponsor .top-sponsor ul li {
	position: relative;
	font-size: 16px;
    width: 500px;
	height: 235px;
    text-align: left;
    display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
}
.sponsor .top-sponsor ul li img {
}
.sponsor ul li a.insta img {
	position: absolute;
	width: 50px;
    height: 50px;
	bottom: 10px;
    left: 10px;
}
.sponsor .top-sponsor ul li h5 {
	font-size: 17px;
	color: #983924 !important;
}
.sponsor .top-sponsor ul li div {
	margin: 15px;
	font-size: 17px;
}
.sponsor .top-sponsor img {
	object-fit: cover;
    width: 235px;
    height: 235px;
}
.sponsor .sub-sponsor ul {
	text-align: center;
}
.sponsor .sub-sponsor ul li {
	font-size: 12px;
    width: 150px;
    text-align: center;
    display: inline-block;
	color: #C76132;
}
.sponsor .sub-sponsor img {
    object-fit: cover;
}

.sts,
.ts,
.ss,
.spo  {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 40px;
}
.sts_column,
.ststs_columns,
.ss_columns,
.ts_columns,
.spo_columns {
  flex: 1 1 45%;
  max-width: 500px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.ts_columns {
  max-width: 350px;
}
.spo_columns {
  width: 200px; /* 画像枠のサイズ */
  height: 200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.sts_column img,
.ststs_columns img,
.ss_columns img,
.ts_columns img,
.spo_columns img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}
.spo_columns img {
  width: 100%;
  height: 120px;
  object-fit: contain;   /* ←トリミングせず全体表示 */
  object-position: center;
  background: #fff;
  border-radius: 8px;
}
.sts_column p a,
.ststs_columns p a,
.ss_columns p a,
.ts_columns p a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	margin: 0 5px;
	background: var(--color1);
	border-radius: 10px;
	margin-top: 20px;
	padding: 10px 0;
}
.spo_columns a  {
	color: var(--color1);
}
.spo_columns h4  {
	font-size: 16px !important;
	margin: 0;
}

.sts_column p a:hover,
.ststs_columns p a:hover,
.ss_columns p a:hover,
.ts_columns p a:hover,
.spo_columns a:hover  {
  text-decoration: underline;
}

.organizer {
	padding-bottom: 100px;
}
.organizer img.title {
	margin: 0 auto;
  margin-bottom: 50px;
}
.organizer-list {
	text-align: center;
}
.organizer-list .ol_columns {
	display: inline-block;
}

.sp_guest {
  text-align: center;
  margin: 80px auto;
  max-width: 1000px;
}
.sp_guest .title {
  margin-bottom: 20px;
}
.guest_intro {
  background: url("../images/matahari-marche04/sp_guest/waku.png") center center / cover no-repeat;
  padding: 100px 20px;
  border-radius: 0; /* 枠画像をそのまま活かすため */
  margin-bottom: 10px;
  text-align: center;
	background-size: 100%;
}
.guest_intro h2 {
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-family: "marche-font";
}
.guest_summary {
}

.guest_profiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.guest_card {
  width: 49%;
}
.guest_card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.guest_card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gray-color);
  padding-bottom: 5px;
	text-align: left;
	margin: 15px 0;
	width: 85%;
}
.guest_card p {
	text-align: left;
}

.artist_card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  background: #1e3764;
  width: 100%;
  margin-top: 40px;
}
.artist_card img {
  width: 250px;
  object-fit: cover;
}
.artist_text {
  text-align: left;
  flex: 1;
}
.artist_text h3 {
  margin-bottom: 8px;
  font-weight: bold;
	margin: 10px 0;
}
.artist_text p {
}



.stage_section {
  background: #1e3764;
  padding: 60px 20px;
  text-align: center;
  max-width: 1000px;
  margin: 80px auto;
}
.stage_section .title {
	width: 50%;
	margin-bottom: 50px;
}

.stage_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.stage_card {
  background: #29497c;
  width: 48%;
  display: flex;
  align-items: flex-start;
  text-align: left;
  padding: 15px;
  gap: 15px;
}

.stage_card img {
  width: 35%;
  min-width: 140px;
  height: auto;
  object-fit: cover;
}

.stage_text {
  flex: 1;
}

.stage_text h3 {
  font-size: 15px !important;
  margin-bottom: 8px;
	font-family: normal;
	width: 100%;
	text-align: left;
}

.stage_text h3 span {
	font-size: 2.8rem;
	font-weight: bold;
	display: block;
	font-family: "marche-font";
	letter-spacing: -8px;
}
.stage_text h3 span[lang="ja"] {
	letter-spacing: -6px;
}

.stage_text p {
  font-size: 1.5rem;
  color: #e6ecf5;
}


.zoom-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.zoom-wrapper img {
  width: 100%;
  height: auto;
  cursor: grab;
  transition: transform 0.3s ease;
}
.zoomable {
  width: 100%;
  height: auto;
  cursor: grab;
  transition: transform 0.3s ease;
  touch-action: none; /* スマホのジェスチャー制御 */
}

.zoomable:active {
  cursor: grabbing;
}
.zoom-info {
  text-align: center;
}


.countdown-container {
  text-align: center;
  margin: 50px auto;
  font-family: "marche-font";
	padding-bottom: 50px;
}
.countdown-container h3 {
	background: #29497c;
	margin-bottom: 0;
}
.countdown {
  display: flex;
  justify-content: center;
  font-size: 2rem;
  color: #AD3253;
  font-weight: bold;
	width: 1000px;
  background: #fff;
}
.countdown div {
  min-width: 80px;
}
.countdown span {
  display: block;
  font-size: 5rem;
  font-weight: 700;
  color: #AD3253;
}
.countdown small {
  font-size: 3rem;
  color: #333;
}

.map_info {
	background: #18305c;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
	font-size: 20px;
}




/* スマホ対応 */
@media (max-width: 600px) {
  .countdown {
    gap: 10px;
    font-size: 1.2rem;
		width: 100%;
  }
  .countdown div {
    padding: 10px 15px;
  }
	
	.countdown-container {
		padding-bottom: 0px;
	}
}



/* --- モバイル --- */
@media screen and (max-width: 768px) {
	.stage_section .title {
    width: 100%;
	}
  .stage_card {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .stage_card img {
    width: 50% !important;
    height: auto;
  }

  .stage_text {
    text-align: left;
    margin-top: 10px;
  }

  .stage_text h3 {
    text-align: center;
  }
}




@media screen and (max-width: 768px) {
  .sts {
    flex-direction: column;
    align-items: center;
  }
  .sts_column,
  .ststs_columns,
  .ss_columns {
    flex: 1 1 100%;
    max-width: 96%;
  }
  .spo_columns {
    flex: 1 1 100%;
    max-width: 47%;
		height: auto;
  }
	.sts, .ts, .ss, .spo{
    gap: 10px;
	}
	.organizer-list .ol_columns {
    width: 48%;
	}
	.guest_intro {
		padding: 40px 20px;
    background-size: auto;
	}
	.guest_intro h2 {
    font-size: 2.6rem;
	}
	.guest_profiles {
    flex-direction: column;
    gap: 30px;
		margin-bottom: 30px;
  }
  .guest_card {
    width: 90%;
    margin: 0 auto;
  }
	.artist_card {
    flex-direction: column;
    text-align: center;
		width: 100%;
    padding: 0 20px 20px;
  }
  .artist_card img {
    width: 50% !important;
    max-width: 300px;
  }
  .artist_text {
    text-align: center;
  }
	
	.ts_columns {
		flex: 1 1 100%;
	}
}


@media (max-width: 559px) {
	h1 span.logo_version {
    position: absolute;
    right: 0;
    top: 140px;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    font-size: 1rem;
	}
	h1 em {
    font-size: 3rem;
	}
	.curve {
		margin-top: -50px;
		-webkit-mask: radial-gradient(120% 150% at 50% 100%, transparent 49.8%, #002 50%);
						mask: radial-gradient(120% 150% at 50% 100%, transparent 49.8%, #002 50%);
	}
	#contents #cafe .container, #contents #company .container, #contents #contact .container, #contents #shop .container {
		padding: 0 5px;
	}
	#contents #cafe h2 {
		font-size: 45px;
	}
	#contents #cafe b {
		font-size: 50px !important;
	}
	#contents #cafe .deco-text {
		font-size: 15px !important;
		padding: 0 0px;
	}
	.deco-text p.day {
		padding: 10px 30px 0 5px;
	}
	.deco-text p.time{
		font-size: 30px !important;
	}
	.deco-text img {
		position: absolute;
		top: -20px;
		left: 0px;
		width: 80px;
	}
	.deco-text span {
		background: #c82d36;
		color: #fff;
		padding: 2px 6px;
		border-radius: 100px;
		margin-bottom: 5px;
		position: absolute;
		top: 23px;
		right: 30px;
		font-size: 25px;
	}
	.pick-up {
		margin-top: -50px;
		margin-bottom: 0px;
	}
	.pick-up ul {
		display: block;
	}
	.pick-up ul li:first-child {
		top: 50px;
	}
	.pick-up ul li:last-child {
		top: 0px;
	}
	h3 {
		font-size: 25px !important;
		border-bottom: 2px solid #7f5050;
	}
	.container2 h3 {
		width: 90% !important;
	}
	.container2 h3::before {
		width: 100%;
		top: 40px;
	}
	.booth ul li:first-child{
		width: 100%;
	}
	.booth {
		font-size: 18px;
		text-align: left;
	}
	.booth img {
		width: 100%;
		margin: 0 auto;
	}
	.booth ul {
		display: block;
		width: 100%;
		margin-top: 30px;
		padding: 0 15px;
	}
	.booth ul li {
		text-align: left;
		width: 100%;
	}
	.booth-img01 {
		display: none;
	}
	.map{
		width: 95%;
		padding: 50px 0;
		margin: 0 auto;
	}
	.map_info {
		font-size: 16px;
	}
	.map ul {
	    display: block;
	}
	.map ul li img {
		width: 100%;
		height: 250px !important;
	}
	.map ul li iframe {
		width: 100% !important;
		height: 250px !important;
	}
	.sponsor {
		padding: 50px 0 0;
	}
	.sponsor .top-sponsor ul {
		width: 100%;
	}
	.sponsor .top-sponsor ul li {
		position: relative;
		font-size: 16px;
		width: 100%;
		height: 380px;
		text-align: center;
		display: block;
		margin-bottom: 50px;
	}
	.sponsor ul li a.insta img {
		bottom: 155px;
		left: 85px;
	}
	.sponsor .top-sponsor img {
		margin: 0 auto;
	}
	.top-sponsor ul li h5 {
		font-size: 22px !important;
		color: #983924 !important;
	}
	.sponsor .sub-sponsor ul {
		width: 100%;
		text-align: center;
		display: inline-flex;
	}
	.sponsor .sub-sponsor ul li {
		font-size: 15px !important;
		width: 100% !important;
		padding: 30px;
	}
	iframe{
		width: 99%;
		margin-left: 1%;
	}
	.deco-text p.in{
		font-size: 14px;
	}
	
}