@charset "utf-8";
@import url("_template.css");

.list {
	margin-left: 40px;
}

.list ol, .list ul{
	margin-left: 20px;
}

#notice-index a{
	font-weight: bold;
	/*text-decoration: underline;*/
}

#notice-index a:hover{
		opacity: 0.7;
}
/* ==========================================================================
  一覧へ戻るボタン
   ========================================================================== */
.backList{
	width: 100%;
	max-width: 367px;
	margin: 0 auto;
}

.backList a img{
  transition: transform 0.15s ease, filter 0.15s ease;
}

.backList a img:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* ==========================================================================
色
   ========================================================================== */
.color_red{
	color: #ff0000;
}

.color_blue{
	color: #0044FF
}


/* ==========================================================================
イメージ
   ========================================================================== */
.image{
	border: 1px solid #ffab2b;
}
/* ==========================================================================
  お知らせファストビュー
   ========================================================================== */
.notice-fv {
  width: 100%;
  aspect-ratio: 1000 / 350;
  max-height: 714px;
  min-height: 300px;
  background-image: url('../images/notice/notice-pc-bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
}

.notice-fv-container{
	height: 100%;
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
}

.notice-fv .pc { display: block; }
.notice-fv .sp { display: none; }
.notice-fv img {
  width: 100%;
  height: auto;
  display: block;
}

.notice-fv-logo {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 23%;
  max-width: 230px;
}


#notice-index .inner{
	margin-top: -12%;
	padding-bottom: 5%
}

/* ② 「お知らせ」タイトル画像（中央下部） */
.notice-fv-title {
  /* 1000px中の322pxのサイズ設定 */
  width: 32.2%;
  max-width: 322px;
}

@media (max-width: 768px) {
	#notice-index{
		padding: 0 10px;
	}
	
  .notice-fv {
    aspect-ratio: 750 / 690;
    max-height: 690px;
    min-height: auto;
    background-image: url('../images/notice/notice-sp-bg.png');
  }


  .notice-fv-logo {
    top: 8%;
    width: 45%;
    max-width: none;
  }

  .notice-fv-title {
    bottom: 8%;
    width: 55%;
    max-width: none;
  }
}


/* ==========================================================================
   他ページ共通用
   ========================================================================== */

.news-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin-bottom: 40px;
	padding-top: 2vw;
}

.news-tabs li {
  flex: 1;
  max-width: 150px;
}

.news-tabs a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: #ffcc33;
  color: #462a25;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: bold;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 0 #dbab1c;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s;
	line-height: 1.2;
}

/* マウスホバー時 */
.news-tabs a:hover {
  background-color: #ffe066;
}

.news-tabs li.is-active a {
  background-color: #46302b;
  color: #ffffff;
  box-shadow: 0 4px 0 #2b1c19;
}

.news-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(24px, 2.8vw, 32px);
  color: #462a25;
  margin-bottom: 0.8vw;
}

.news-heading .icon-star {
  width: clamp(28px, 3.2vw, 36px);
  height: auto;
}

.news-list {
  list-style: none;
  border-top: 1px solid #c0ae7e;
  margin-bottom: 5vw;
}

.news-item{
  border-bottom: 1px solid #c0ae7e;
  transition: background-color 0.2s;
	
	padding: 15px 10px;
}

.news-item:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 28px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 13px;
	margin-right: 5px;
}

.badge-maintenance { background-color: #2ca849; }
.badge-info        { background-color: #3ca9eb; }
.badge-event       { background-color: #f7931e; }
.badge-mall        { background-color: #ec1c24; }
.badge-campaign    { background-color: #fbb03b; }
.badge-update      { background-color: #92278f; }

.news-date {
  font-size: 15px;
  color: #462a25;
  font-weight: bold;

}

.news-meta {
    margin-bottom: 8px;
  }

.badge-new {
  font-size: 14px;
  font-weight: bold;
  color: #ff0000;
  margin-right: 10px;
	
}

.news-txt{
	  display: flex;
	justify-content: flex-start;
	padding-top: 0.5vw;
}

.news-title {
  font-size: clamp(16px, 1.6vw, 18px);
  color: #462a25;
  font-weight: 500;
	
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  background-color: #ffffff;
  width: fit-content;
  margin-inline: auto;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #dbcfb7;
}

.pagination a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-size: 14px;
  font-weight: bold;
  color: #462a25;
  border-right: 1px solid #dbcfb7;
  transition: background-color 0.2s;
}

.pagination a:last-child {
  border-right: none;
}

.pagination a:hover {
  background-color: #f7ebd3;
}

.pagination a.is-active {
  background-color: #46302b;
  color: #ffffff;
}

@media (max-width: 768px) {
  .news-section {
    padding-block: 40px;
  }
	
  .news-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .news-tabs li {
    flex: none;
    width: calc(33.333% - 6px);
    width: calc(50% - 4px);
  }

  .news-tabs a {
    height: 44px;
    border-radius: 8px;
    font-size: 13px;
  }

  .news-heading {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .news-item{
    flex-direction: column;
    align-items: flex-start;
  }

  .badge {
    width: 85px;
    height: 22px;
    font-size: 11px;
  }

  .news-date, .badge-new {
    font-size: clamp(14px, 1.4vw, 16px);
    margin-right: 8px;
  }

  .news-title {
    font-size: 14px;
    white-space: normal;
    line-height: 1.5;
  }

  .pagination a {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}



/* ==========================================================================
   お知らせ中身
   ========================================================================== */

.notice-detail{
    width: 100%;
    max-width: 1000px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(70, 42, 37);
    border-radius:30px;
    height: auto;
    padding: 4vw 3vw;
	word-break: break-all;
}


@media (max-width: 768px) {
	
  .notice-detail {
	  padding: 10vw 4vw;
    border-radius: 20px;
  }
}
/*-- hr --*/

hr.style1{
	border-top: 1px solid #c0ae7e;
}

hr.style2 {
	border-top: 3px double #c0ae7e;
}

hr.style3 {
	border-top: 1px dashed #c0ae7e;
}

hr.style4 {
	border-top: 2px dotted #c0ae7e;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #c0ae7e;
}

hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #c0ae7e;
}


/*-- ul ol --*/
ul.komejirusi{
	list-style: none;
}

ul.komejirusi li{
	position: relative;
  padding-left: 1.5em;
}

ul.komejirusi li::before{
	content: '\0203B';
  position: absolute;
  left: 0;
}

ul.circle{
	list-style-type: circle;
}

ol.square{
	list-style-type: square;
}

ol.decimal{
	list-style-type: decimal;
}

ol.lower-latin{
	list-style-type: lower-latin;
}

ol.upper-roman {
	list-style-type: upper-roman;
}

#news-h-std{
	padding: 2% 0;
}
.path{
	font-size: clamp(14px, 1.0vw, 16px);
}

.path a{
	color: #ff9c00;
}


/* === 見出し種類 ===*/
.notice-title{
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: bold;
	padding-bottom: 2%;
}

.news-title1 {
  font-size: clamp(20px, 30vw, 28px);
  color: #fff;
  background-color: #462a25;
  min-height: 55px;
	height: 100%;
  position: relative;
  margin: 3% 0;
  border-bottom: solid 1px #0c1f48;
	padding: 0.8% 0.8% 0 68px;
}

.news-title1::before{
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  background: url("../images/notice/notice-title1.png") 0 0 no-repeat;
  width: 61px;
  min-height: 53px;
	height: 100%;
}

.news-title2 span {
   background: url("../images/notice/notice-title2.png") 0 0 no-repeat;
	font-size: clamp(20px, 2.4vw, 26px);
	min-height: 50px;
	height: auto;
	margin-bottom: 0.8%;
  padding-left: 55px;
  position: relative;
  display: flex;
  align-items: center;
}

.news-title2{
 	border-bottom: 1px solid #462a25;
	margin: 3% 0;
}


.news-title3 {
  background: url("../images/notice/notice-title3.png") 0 0 no-repeat;
	min-height: 45px;
	height: auto;
	margin: 3% 0;
  padding-left: 50px;
  font-size: clamp(18px, 2.0vw, 24px);
  position: relative;
  display: flex;
  align-items: center;
}

.news-title4 {
	background: url("../images/notice/notice-title4.png") 0 0 no-repeat;
	min-height: 34px;
	height: auto;
	margin: 3% 0;
  padding-left: 42px;
	font-size: clamp(16px, 1.8vw, 22px);
  position: relative;
  display: flex;
  align-items: center;
}

/* === 本文 ===*/
.notice-detail p{
	font-size: clamp(14px, 1.4vw, 16px);
}

.list-margin{
	margin: 20px;
}

/* === 目次 ===*/
.toc {
    margin-bottom: 30px;
    border-radius: 3px;
    background-color: #fff;
	border: 1px solid #462a25;
	max-width: 357px;
}

.toc div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #462a25;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.toc ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.toc > ol {
    padding: 1em 1em 1em 3em;
}

.toc ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc li {
    padding: 5px 0;
    font-weight: 600;
}

.toc ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc a {
    color: #462a25;
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
}

/* === デーブル ===*/
table { 
      margin-bottom: 2%;
      width: 100%;
	border-collapse: collapse;
  border-spacing: 0;
	font-size: clamp(14px, 1.4vw, 16px);
	
}

.table-width {
      width: 56%;
      float: left;
}

table img {
    width: 100%;
}

th {
	border: 1px solid #462a25;
}

td {
  border: 1px solid #462a25;
  padding: 2%;
}

.textCenter {
	text-align: center;
}


/*基本*/
.notice-detail table .td-style01 {
  background-color: #ffff47;
	font-weight: bold;
}
/*アイテム名*/
.notice-detail table .td-style02 {
  background-color: #ff9c00;
  font-weight: bold;
	width: 25%;
}

/* === 折り畳みアコーディオン ===*/
.accordion{
  margin: 2rem 0;
}

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1rem 2rem;
    border-left: 5px solid #462a25;
    background-color: #ffff47;
    font-weight: 600;
    cursor: pointer;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #462a25;
    border-right: 3px solid #462a25;
    content: '';
    transition: transform .3s;
}

.accordion[open] summary::after {
    transform: rotate(225deg);
}

.accordion div {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1rem 2rem 2rem 2rem;
    transition: transform .5s, opacity .5s;
}

.accordion[open] div {
    transform: none;
    opacity: 1;
}

/* === 引用ボックス1 ===*/
.box-01 {
    position: relative;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #462a25;
	margin: 4% 0;
}

.box-01 > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 1.4em;
    border-radius: 25px;
    background-color: #462a25;
    color: #fff;
    font-size: .9em;
}

.box-01 > div::before {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #462a25;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.box-01 p {
    margin: 0;
}

/* === 注意 ===*/
.caution {
    max-width: 100%;
    margin: 4% 0;
    border: 2px solid #ff0000;
    border-radius: 5px;
    color: #ff0000;
}

.caution div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #ff0000;
    font-weight: 600;
    vertical-align: top;
}

.caution div::before {
    width: 22px;
    height: 22px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23ff0000'%3E%3C/path%3E%3C/svg%3E");
}

.caution p, .caution ul {
    margin: 0;
    padding: 0 1.5em 1em;
}

/*注意詳細*/
.caution ul.komejirusi ol li{
	padding-left: 0;
	margin-left: 3%;
}

.caution ul.komejirusi ol li::before{
	 content: none;
}


/* === 引用ボックス2 ===*/
.box-02 {
    max-width: 100%;
    border: 2px solid #462a25;
    border-radius: 5px;
    color: #462a25;
	    margin: 3% 0;
}

.box-02 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #462a25;
    font-weight: 600;
    vertical-align: top;
}

.box-02 div::before {
    width: 15px;
    height: 7.5px;
    border-bottom: 3px solid #462a25;
    border-left: 3px solid #462a25;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

.box-02 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

/* === 引用ボックス3 ===*/
.box-03{
	border: 1px solid #ff9c00;
	text-align: center;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: bold;
	padding: 3%;
}

/* === 引用ボックス4 ===*/
.box-04 {
    max-width: 100%;
    border: 2px solid #462a25;
    border-radius: 5px;
    color: #462a25;
	    margin: 3% 0;
}

.box-04 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #462a25;
    font-weight: 600;
    vertical-align: top;
}

.box-04 div::before {
    width: 28px;
    height: 28px;
   background-image: url('data:image/svg+xml;base64,PHN2ZyAKIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogd2lkdGg9IjI4cHgiIGhlaWdodD0iMjhweCI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgIGZpbGw9InJnYig3MCwgNDIsIDM3KSIKIGQ9Ik0yNi45OTMsNS41NjAgTDEzLjg3OCwtMC4wMDIgTC0wLjAwMCw1Ljg4NCBMLTAuMDAwLDEyLjQ2NyBMMS4xMDcsMTIuOTM3IEwxLjEwNywyMi4xODQgTDEzLjYzNCwyNy40OTcgTDI2LjM5MywyMi4wODYgTDI2LjM5MywxMi44MjggTDI3LjUwMCwxMi4zNTkgTDI3LjUwMCw1Ljc3NiBMMjYuOTkzLDUuNTYwIFpNMTIuOTE4LDI1LjM4NCBMMi43NzAsMjEuMDgwIEwyLjc3MCwxMy4yMTcgTDEyLjkxOCwxNy41MjEgTDEyLjkxOCwyNS4zODQgWk0xMi45MTgsMTYuMTY0IEwyLjc3MCwxMS44NTkgTDIuNzcwLDExLjgzMyBMMS42NjMsMTEuMzYzIEwxLjY2Myw3Ljc0NCBMMTIuOTE4LDEyLjUxOCBMMTIuOTE4LDE2LjE2NCBaTTEzLjU0MSwxMS40MjYgTDIuMzcxLDYuNjg4IEwxMy44NzgsMS44MDcgTDI1LjA0OCw2LjU0NSBMMTMuNTQxLDExLjQyNiBaTTI0LjczMCwyMC45ODIgTDE0LjE2NSwyNS40NjIgTDE0LjE2NSwxNy41MjEgTDI0LjczMCwxMy4wMzkgTDI0LjczMCwyMC45ODIgWk0yNS44MzcsMTEuMjEzIEwxNC4xNjUsMTYuMTY0IEwxNC4xNjUsMTIuNTE4IEwyNS44MzcsNy41NjggTDI1LjgzNywxMS4yMTMgWiIvPgo8L3N2Zz4=');
    content: '';
}

.box-04 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

/* === 埋め込み動画 ===*/
#yt-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 600px; /* 最大の横幅 */
}
#yt-content {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
#yt-content iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
}