@charset "utf-8";
/*===============================more,content===============================*/
/* 開閉システム */
.link_btn.more{
	font-size: 1.3rem;
	border-bottom: solid 5px rgba(0,0,0,0.3);
	background-image: -o-linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
	background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
	color: #fff;
	/* text-shadow: 0.5px 0.5px 4px #494949; */
}
.more:hover{
	cursor: pointer;
	/* border-bottom: solid 2px rgba(0,0,0,0.5); */
	border-bottom: 0;
}
.content{
	display: none;
}
/* リンクボタン */
.link_btn {
  height: auto;
  display: block;
  text-decoration: none!important;
  text-align: center;
  font-size: 1rem;
  background: linear-gradient(135deg, #FFE870, #FFF59D);
  color: #444 !important;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.8em 1.6em;
  border-radius: 50px;
  /* box-shadow: 0 4px 10px rgba(255, 228, 0, 0.4); */
  transition: all 0.25s ease;
  text-align: center;
}

/* .lottery .link_btn.more{
	color: #fff;
} */

.link_btn:hover {
  transform: translateY(-3px);
  /* background: linear-gradient(135deg, #FFF59D, #FFFDE7); */
  /* box-shadow: 0 6px 15px rgba(255, 235, 59, 0.5); */
}

.link_btn:active {
  transform: translateY(0);
  /* box-shadow: 0 3px 8px rgba(255, 228, 0, 0.3); */
}


.pdf{
	position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.pdf::before{
	content: "";
  display: inline-block;  
  background-image: url('../images/pdf.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.5em;
  height: 1.5em;
}


/* カラム */
.cf+.cf{
	margin-top: 2rem;
}
/* 各企画の背景色 */
.cf .bg_Yellow{
	background-color: #fffecd;
	/* border: 4px solid #ffdc00; */
}

.cf .bg_Pink{
	background-color: rgba(239,175,222,0.1);
	border: #ffdfe9 solid 1px;
}
.cf .bg_orenge{
	border: solid 1px #f7d1af;
    background-color: #fff5ec;
}

.cf .bg_Green {
    background-color: #effbf1;
    border: 1px solid #d2efd7;
}
.cf .bg_purple {
		/* border: solid 4px #7c75e5; */
		background-color: #f0effb69;
}
.cf .bg_beige {
	/* border: solid 4px #a79f94; */
    background-color: #fdfcfa;
}

/* カラム */
.cf.column-1{
	padding: 1rem;
	/* padding-top: 0; */
}
.cf.colom-2 {
    border: none;
    background: initial;
}

/* イベント */
.bl_eventItem {
    padding: 1rem 1.25rem 2rem 1.25rem;
    border-radius: 30px;
    line-height: 1.75;
}

.bl_eventItem + .bl_eventItem{
	margin-top: 2rem;
}

h3 {
   background: linear-gradient(to bottom, #00B4E6, #005A99);
  color: #fff;
  font-size: 1.5rem;
  padding: 15px 5px 15px 15px;
}
.cf.challenge h4{
	font-size: 1.48rem;
}

.contentflex {
    display: flex;
    flex-wrap: wrap;
}

.colom-2 {
    width: 48%;
}

.cf+.cf {
    margin-left: .5rem;
	margin-top: 0;
}

[class*="col"] {
    margin-left: 0;
}
.colom-2 img {
    display: block;
    margin: 0 auto;
    width: 300px;
    height: auto;
}

.colom-2 .full-size-image{
	width: 100%;
	height: auto;
}

.cf.shinachan.colom-2 {
    margin-top: 0.5rem;
}


.free_title {
display: block;
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
    background-color: #0099CC;
    /* border-radius: 50px; */
    text-align: center;
    margin-bottom: 1rem;
    padding: .5rem 0;
}

span.event-time {
    font-size: 1rem;
    background-color: #0099CC;
    color: #fff;
    padding: .25rem 1rem;
    border-radius: 50vh;
    display: block;
    /* vertical-align: middle; */
    line-height: 1;
    margin-bottom: .25rem;
}

h4.ta-c {
    margin: 0;
	padding: 0;
}
h4.ta-c {
    margin-top: 0.5rem;
	font-size: 1.5rem;
	color: #0099CC;
}
p.onepeace{margin: 0;}

p.onepeace{
font-weight: bold;
text-align: center;
}
p.onepeace{
    border-bottom: solid 3px #cce4ff;
    position: relative;
    line-height: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
	color: #33487f;
}


h4 {
    border-bottom:none;
}





.flex_container {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.img_wrapper {
    flex-basis: 50%;
}

.text-wrapper {
    flex-basis: 50%;
}
.anpanman,.chest{
	border: solid 3px #ffc107;
    border-radius: 50px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #ffffea;
}

.precure,.magic {
    border: solid 3px #f27190;
    border-radius: 50px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fbe5eb5e;
}

.yosimoto {
    border: solid 3px #7c75e5;
    border-radius: 50px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #f0effb69;
}

.brassband {
    border: solid 3px #ff7600;
    border-radius: 50px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff5ec;
}

h4.ta-c {
    margin-top: 0.5rem;
    font-size: 1.42rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
}

h4.ta-c > p{
	margin: 0;
}

  
p.onepeace:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #5472cd;
	bottom: -3px;
	width: 20%;
  }

  .cf.colom-2 {
    border-right: 1px dotted #33487f;
    padding: 1rem;
    padding-top: 0;
}

.cf.colom-2:last-of-type{
	border-right: none;
}

.credit{
	font-size: .7rem; text-align:end;display: block;

}

.img_box.img_box01 {
    width: 200px;
    height: 200px;
    background-color: #ededed;
    background-image: url(../images/2025/aiba.png);
    background-size:cover;
	border-radius: 10px;
}
.img_box_flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
	padding: 0 1rem 1rem 1rem;
}

.highlight{
	text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}
.txt-mini{
	font-size: .85rem;
	font-weight: normal;
	margin: .25rem 0;
}

.mini {
	display: none;
}
.center{
	text-align: center;
}

.txt-bold{
	font-weight: bold;
}

@media only screen and (max-width: 640px){
.row-content .cf.challenge h4 {
    font-size: 0.9em;
}

.colom-2 {
    /* width: 48%; */
    width: 100%;
}


.cf.university{
	background-color: rgba(255,241,0,0.1);
	padding: 1rem;
	border-radius: 30px;
	border: 4px solid #53aca2;
}
.cf.shinachan{
	background-color: #ffffea;
	padding: 1rem;
	border-radius: 30px;
	border: 4px solid #ffd700;
}
.cf.rori{
	background-color: rgba(255,145,77,0.1);
	padding: 1rem;
	border-radius: 30px;
	/* border: 4px solid #2a4198; */
	border: 4px solid #ff914d;
}
h4{
	font-size: 1.5rem;
}

.red_box{
	padding: 0 0.5rem;
	background-color: red;
	color: #fff;
	margin-left: 1rem;
	font-size: 1rem;
	vertical-align: middle;
}

/* 観覧無料 */
.free_title{
	background-color: #7fb4eb;
	display: block;
	font-weight: bold;
	font-size: 1.2rem;
    letter-spacing: 4.5px;
	border-radius: 20px;
	color: #fff;
	padding: 1rem;
	line-height: 1.3;
    margin: 1rem 0;
}

.redtxt{
	display: block;
	line-height: 1.3;
}
.cf.colom-2 {
    border-right:none;
}
.anpanman{
	padding-bottom: 1rem;
}
.anpanman img{
	width: initial!important;
    height: initial!important;	
}

.colom-2 img {
width: 100%;
height: auto;
}
h4.ta-c {
    font-size: 1.2rem;
}
.flex_container {
    flex-direction: column;
}
.omoide .qr {
	display: block;
    margin: 0 auto;
}
.img_box_flex {
    row-gap: .5rem;
    flex-direction: column;
}

}




/* 20250926追記 */
/* =================================================================
企画内容（観覧無料） のスタイル
=====================================================================*/
/* イベント詳細セクション全体 */
.event-detail-section {
    max-width: 700px; /* 見やすい幅に設定 */
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* 角を少し丸く */
    background-color: #ffffff;
    font-family: 'Yu Gothic', 'Meiryo', sans-serif;
    line-height: 1.7;
    color: #333;
}


.event-detail-heading span {
    font-size: 0.7em;
    color: #6c757d;
    font-weight: normal;
    margin-left: 8px;
}

/* 時間情報などの強調テキスト */
.event-detail-bold-text {
      font-weight: bold;
    padding:15px;
    margin-top: 15px;
    margin-bottom: 15px;
    /* border: 1px dashed #dbe8ed; */
    line-height: 2;
    background-color: #f2fbff;
}

/* その他の本文段落 */
.event-detail-body-text {
    padding: 5px 0;
    margin-top: 20px;
    border-top: 1px dotted #ccc; /* 上に点線 */
}


/* 写真の注意書き */
.note {
	font-size: 0.9em;
	margin: 0.5em 0;
	text-align: right;
}

.event-img{
	width: 350px;
	height: auto;
}

.event-img > .full-size-image{
	width: 100%;
    height: 237px;
    object-fit: cover;
    object-position: 0 -43px;
}

/* タイムスケジュール */
.time_schedule{
	border-top: solid 1px #9191917a;
	padding-top: .75rem;
}
.cm img{
	max-width: 40%;
}

/* 古着でワクチン */
/* ベースとなるバナー全体 */
.furu-vax-banner {
    /* 背景色（画像から淡い緑色と推定） */
    background-color: #e0f2f1; 
    padding: 15px;
    /* 角丸 */
    border-radius: 10px; 
    /* 必要に応じて最大幅を設定 */
    /* max-width: 650px;  */
    margin: 0 auto;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

/* バナーの内部コンテナ */
.banner-content {
    background-color: white;
    padding: 15px;
    /* 内側のコンテンツの角丸 */
    border-radius: 8px; 
    border: 2px solid #b2dfdb; /* 薄い枠線 */
    position: relative;
    /* メインコンテンツエリアの背景色（画像の上部の帯の色を再現） */
    background: linear-gradient(to bottom, #80cbc4 0%, #80cbc4 100px, white 100px, white 100%);
}

/* ヘッダーセクション（ロゴとタイトル、詳細バルーンを含む） */
.header-section {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    z-index: 1; /* バルーンより下にならないように */
    background-color: #80cbc4; /* 緑色の帯の背景 */
    padding: 10px 15px;
    margin: -15px -15px 0 -15px; /* 親要素のパディングを相殺 */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* ロゴと「oniビジョン」テキストのコンテナ */
.logo-text {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

/* SHOP CHANNEL ロゴ風テキスト */
.shop-channel {
    background-color: white;
    color: #4db6ac;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #4db6ac;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* oniビジョン x ショップチャンネル */
.oni-vision {
    font-size: 12px;
    color: white;
    margin-top: 3px;
}

/* タイトル部分 */
.title-section {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
}

/* SDGs企画タグ */
.sdgs-tag {
    font-size: 16px;
    color: white;
    font-weight: normal;
    margin-right: 5px;
}

/* メインタイトル「古着deワクチン」 */
.main-title {
    font-size: 2rem;
    font-weight: bold;
    color: #004d40; /* 濃い緑色 */
    line-height: 1.2;
    text-shadow: 1px 1px 0 #ffffff; /* 白い縁取り風 */
}

/* 詳細はこちらバルーン */
.detail-balloon {
    position: absolute;
    top: -15px; 
    right: 10px;
    background-color: #ec407a; /* ピンク色 */
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 50%; /* 正円に近い形状 */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* 吹き出しのしっぽ（CSSで三角形を作る） */
    clip-path: polygon(
        50% 0%, 100% 0%, 100% 75%, 75% 100%, 50% 75%, 0% 75%, 0% 0%
    );
    /* 画像の形状に近づけるため、clip-pathではなく疑似要素で作成した方が良いが、簡単のためこの例ではpolygonを使用 */
}

/* QRコードの枠 */
.qr-code-box {
    position: absolute;
    top: 130px; /* 位置を調整 */
    right: 30px;
    width: 80px;
    height: 80px;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    background-color: white;
}

/* キャッチフレーズ */
.catchphrase {
    background-color: #fce4ec; /* 薄いピンクの背景 */
    color: #c2185b; /* 濃いピンクの文字 */
    font-size: 14px;
    font-weight: bold;
    padding: 8px 15px;
    margin: 15px 0;
    border-radius: 5px;
    text-align: center;
}

.catchphrase strong {
    font-size: 18px;
}

/* 説明文 */
.description {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* 注意書き */
.note {
    font-size: 12px;
    color: #555;
    margin-top: 10px;
    padding-right: 120px; /* QRコードのスペースを確保 */
}

.tag-txt{
	font-size: 1.1rem;
    vertical-align: middle;
    margin-right: .5rem;
    font-weight: bold;
}

.catchphrase .pdf{
	display: block;
	margin: 0 auto;
}

@media only screen and (max-width: 640px){
	.header-section {
    flex-direction: column;
}
.logo-text {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}


}