@charset "utf-8";
main {
  margin-top: 3rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  padding: 0;
  max-width: 1000px;
}
@media (max-width:566px) {
  main {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
  }
}
.blue_line {
  border: 1px solid var(--main_color);
}
.red_line {
  border: 1px solid #E4007E;
}
.green_line {
  border: 1px solid var(--ichiro_color);
}
.bee_line {
  border: 1px solid #A46500;
}
.bee_color {
  color: #A46500;
}
.blue_back {
  background-color: var(--main_color);
}
.red_back {
  background-color: #E4007E;
}
.green_back {
  background-color: var(--ichiro_color);
}

.column2, 
.column3,
.column4{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
  padding: 0;
  max-width: 100%;
}
.column2 > div, 
.column3 > div,
.column4 > div{
  flex: 1;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s ease;
  height: 240px;
}
.column4 > div{
    border-bottom: 8px solid var(--main_color);
}
.column2 > div {
  height: 165px;
  position: relative;
}
.column4 > div {
    height: auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}
@media (max-width:566px) {
	.column4 > div {
    	margin-bottom: 1rem;
	}
}
.column2 > div:hover, 
.column3 > div:hover,
.column4 > div:hover{
  transform: translateY(-5px);
}
.column4 > div:hover{
    background-color: var(--main_color);
    color: #FFFFFF;
}
.column2 h2, .column3 h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  font-feature-settings: "palt";
  text-align: center;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  color: #333;
}
.column2 h2 {
  font-size: 1.6rem;
}
.column2 h2 p, .column3 h2 p {
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  font-variant: normal;
  font-style: normal;
}

.column3 img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    z-index: 100;
    position: relative;
    margin-top: -5px;
	width: 140px;
  	height: auto;
}

.column2 #bee_sub_title {
    width: 100%;
    z-index: 50;
    position: absolute;
    bottom: 0;
    left: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 1rem;
    background-color: #A46500;
    padding-top: 0.62rem;
    padding-left: 1rem;
    padding-bottom: 0.62rem;
    margin: 0;
    color: #FFFFFF;
    text-align: center;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.column2 #kamimani {
    width: 100%;
    z-index: 50;
    position: absolute;
    bottom: 0;
    left: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 0.9rem;
    background-color: #348032;
    padding-top: 0.7rem;
    padding-left: 1rem;
    padding-bottom: 0.7rem;
    margin: 0;
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.column2 #img_style1 {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: block;
}
.column2 #img_style2 {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%; /* 左端を中央に設定 */
  transform: translateX(-50%); /* 自身の幅の半分だけ左に移動して正確な中央に */
  z-index: 100;
  display: block;
}
.column3 h3 {
  font-size: 1.3rem;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  padding: 0.7rem 0;
  width: 100%;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
@media (max-width:870px) {
  .column3 h2 {
    font-size: 1rem;
  }
  .column3 h2 p {
    font-size: .8rem;
  }
  .column3 h3 {
    font-size: 1rem;
  }
}
.column2 a,
.column3 a,
.column4 a{
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.column4 a{
    text-align: center;	
}
/* モバイルで縦並び */
@media (max-width: 700px) {
  .column2, 
	.column3{
    flex-direction: column;
    width: 94%;
    margin-right: auto;
    margin-left: auto;
  }
  .column2 > div, .column3 > div {
    margin-bottom: 3rem;
  }
  .column4 {
    width: 94%;
    flex-wrap: wrap;
    justify-content: center; /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
  }

  .column4 > div {
    flex: 0 0 calc(50% - 0.5rem); /* 2カラム分割＋gap対応 */
    max-width: calc(50% - 0.5rem);
    box-sizing: border-box;
  }
	
  .column3 img {
    display: block;
    margin-top: 0rem;
    margin-bottom: 2.9rem;
  }
  .column3 h2 {
    font-size: 1.5rem;
  }
  .column3 h3 {
    font-size: 1.5rem;
  }
  .column2 > div {
    position: static;
    min-height: auto; /* 必要に応じて調整 */
  }
  .column2 h2 {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  .column2 #bee_sub_title {
    margin-top: 6rem;
    position: static;
  }
  .column2 #kamimani {
    margin-top: 2.5rem;
    position: static;
    padding-left: 3rem;
  }
}
@media (max-width: 566px) {
	.column1,
  	.column2, 
	.column3,
	.column4{
    	width: 100%;
  	}
  .column2 h2 {
    display: block;
    font-size: 1.5rem;
  }
  .column2 > div {
    min-height: 150px;
    position: relative;
  }
  .column2 #bee_sub_title {
    position: absolute;
    bottom: 0;
  }
  .column2 #kamimani {
    position: absolute;
    bottom: 0;
    padding-left: 0.8rem;
  }
}



.column1{
    border-bottom: 8px solid var(--main_color);
	transition: transform 0.3s ease;
	margin-bottom: 15px;
}
.column1 a{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: .8rem;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: .8rem;
    margin: 0;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.column1:hover {
  transform: translateY(-5px);
}
.column1 a h2{
    margin: 0;
    padding: 0;
    font-size: 3.5rem;
    font-variant: normal;
    font-style: normal;
    color: var(--main_color);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.column1 a div p{
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: normal;
    font-variant: normal;
    font-style: normal;
    color: #333;
    line-height: 1.2;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.column1 a div span{
    padding: 0;
    margin: 0;
    font-size: 2.1rem;
    color: var(--king_color);
    font-weight: bold;
    font-variant: normal;
    font-style: normal;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
@media (max-width: 850px) {
	.column1 a div img{
		width: 85%;
		height: auto;
		display: block;
	}
	.column1 a h2{
		font-size: 2.2rem;
	}
	.column1 a div p{
		font-size: .9rem;
	}
	.column1 a div span{
		font-size: 1.2rem;
	}
	
}
@media (max-width: 700px) {
	.column1{
		width: 94%;
		margin-right: auto;
		margin-left: auto;
	}
	.column1 a{
    	flex-direction: column;	
		gap: 0rem;
	}
	.column1 a div{
    text-align: center;
	}
	.column1 a div img{
    width: 100%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
	}
	.column1 a h2{
		font-size:3rem;
	}
	
}
@media (max-width: 566px) {
	.column1{
    width: 100%;
    margin-bottom: 3rem;
  }
	.column1 a h2{
		font-size:2rem;
	}
}


/* =====================================
   Safari対応 お知らせタブ（CSSのみ）
   初期ロード時の余白完全防止版
   ===================================== */

.info-tab-wrap{
    max-width: 1000px;
    margin-top: 3rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:3rem;
    font-family: "Hiragino Sans","Meiryo",sans-serif;
}

/* ラジオは非表示（labelクリックで切替） */
.info-tab-wrap input[type="radio"]{ display:none; }

/* タブボタン */
.tab-buttons{
  display:flex;
  max-width:1000px;
  margin:0 auto;
}
.tab-btn{
  flex:1;
  text-align:center;
  padding:.7rem 1rem;
  cursor:pointer;
  background:#f0f0f0;
  border:1px solid #ccc;
  transition:background .3s;
  font-weight:bold;
  font-size:1.1rem;
  user-select:none;
}

/* アクティブタブ強調 */
#tab1:checked ~ .tab-buttons label[for="tab1"],
#tab2:checked ~ .tab-buttons label[for="tab2"]{
  background:#E4007E;
  color:#fff;
  border-color:#E4007E;
}

/* ===========================
   パネル表示制御（衝突耐性高）
   =========================== */

/* 初期：全パネル非表示（他CSS上書き対策で !important 使用） */
.info-panes .info-pane{
  display:none !important;         /* まず物理的に隠す */
  max-height:0 !important;         /* 念のため高さ0でも隠す */
  overflow:hidden !important;
  opacity:0;
  visibility:hidden;
  padding:0;
  margin:0;
  border:0;
  background:#fff;
}

/* 表示中：ブロック化＋高さ制限＋スクロール（PC/タブレットは350px） */
#tab1:checked ~ .info-panes #content1,
#tab2:checked ~ .info-panes #content2{
  display:block !important;
  max-height:350px !important;
  overflow:auto !important;
  opacity:1;
  visibility:visible;
  padding:1rem;
  border:1px solid #ddd;
}

/* ===========================
   リスト体裁（左寄せを強制）
   =========================== */

/* 左寄せを徹底（外部CSS対策） */
.info-panes .info-pane ul,
.info-panes .info-pane li,
.info-panes .info-pane li span,
.info-panes .info-pane li a{
  text-align:left !important;
}

.info-panes .info-pane ul{
  list-style:none;
  padding:0;
  margin:0;
}

.info-panes .info-pane li{
  display:flex;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:.6rem;
  padding:.5rem 0;
  border-bottom:1px dashed #ccc;
  font-size:1rem;
  color:#333;
  line-height:1.6;
  word-break:break-word;
  overflow-wrap:anywhere;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

.info-panes .info-pane li span{
  flex:0 0 7rem;
  white-space:nowrap;
  color:#444;
  font-weight:normal;
}

.info-panes .info-pane li a{
  flex:1;
  display:block;                  /* 行頭からの折返しを安定させる */
  text-decoration:none;
  color:#333;
  white-space:normal;             /* 余計なnowrapを打ち消し */
  word-break:break-word;
  overflow-wrap:anywhere;
}

.info-panes .info-pane li a:hover{
  color:#E4007E;
  text-decoration:underline;
}

/* ▶マーク */
.info-panes .info-pane li a::before{
  content:"\25B8";
  margin-right:.2em;
  color:#E4007E;
}

/* ===========================
   スマホ調整（≤700px=450px）
   =========================== */
@media (max-width:700px){
  /* 高さ制限を450pxに拡張 */
  #tab1:checked ~ .info-panes #content1,
  #tab2:checked ~ .info-panes #content2{
    max-height:450px !important;
  }

  .info-panes .info-pane li{
    flex-direction:column;
    gap:.1rem;
  }
  .info-panes .info-pane li span{
    flex:none;
    width:auto;
  }
  .info-panes .info-pane li a::before{
    content:"";
    margin-right:0;
  }

  .info-tab-wrap{ margin-bottom:5rem; }
  .tab-buttons{ width:94%; margin:0 auto; }
  .info-panes{ width:94%; margin:0 auto; }
  .tab-btn{ width:100%; border-bottom:none; }
  .tab-btn:not(:last-child){ border-bottom:1px solid #ccc; }
}

@media (max-width:566px){
  .tab-buttons,
  .info-panes{ width:100%; }
	#content2{
    margin-top: 0px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
	}
}