.imgarea2.caption {
    text-align: center;
    margin: 2rem auto;
    line-height: 1.3;
}
.imgarea2.caption div {
    width: 594px;
    height: 295px;
    margin: 0 auto 0.5rem;
    overflow: hidden;
    border: solid 1px #eee;
}
.imgarea2.caption div img {
    display: block;
    min-width: 600px;
}


.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.pr {
    border: solid 2px #000;
    border-radius: 2rem;
    background: #65ddd729;
    padding: 3rem;
}

.prtitle {
    text-align: center;
    font-size: xx-large;
    font-family: serif;
    color: #0ba39b;
    font-weight: bold;
    border-bottom: solid;
}
	
/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/

@media screen and (max-width: 599px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/

.br-sp {
    display: none;
}

.imgarea2.caption div {
    width: 300px;
    height: 150px;
}
.imgarea2.caption div img {
    min-width: 302px;
}


}



/* TOPアコーディオンボタンを非表示 */
.btn-accordion{
  display: none !important;
}

/* パネル（btn-accordionの直後）を常に表示 */
.btn-accordion + .accordion-item{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* 次に：画像を「箱幅に追従」＋「勝手な位置/変形/浮動を無効化」 */
.imgarea2.caption img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  /* はみ出し原因になりやすい指定を強制リセット */
  position: static !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}


/* 動画サイズ調整 */
/* 16:9でレスポンシブ。親要素の幅に収まる */
.youtube-embed{
  width: 100%;
  max-width: 1240px;   /* 必要なければ削除OK */
  margin: 0 auto;      /* 中央寄せ */
}

.youtube-embed iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* modern browsers */
  height: auto;
  border: 0;
  max-width: 100%;
}





/* PR枠本体（既存を少し整理＋バッジ分だけ上を広めに） */
.pr{
  position: relative;
  overflow: hidden;

  border: solid 2px #000;
  border-radius: 2rem;
  background: rgba(101, 221, 215, 0.16);

  padding: 3rem;
  padding-top: 4.2rem; /* 左上バッジと被りにくくする */
}

/* 左上の三角PR（回転した正方形をはみ出させ、見える部分を三角に） */
.pr::before{
  content: "PR";
  position: absolute;
  top: 0;
  left: 0;

  width: 120px;
  height: 120px;

  background: url("img/l-parts01_bg.jpg");
  border: 2px solid #fff;

  transform: translate(-60px, -60px) rotate(-45deg);
  transform-origin: center;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding-bottom: 14px; /* 文字の位置調整 */
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;

  z-index: 1;
}

/* 見出し（既存のprtitleを整形：下線の太さ・余白など） */
.prtitle{
  text-align: center;
  font-size: clamp(1.4rem, 2vw + 1rem, 2.2rem);
  font-family: serif;
  color: #0ba39b;
  font-weight: 700;

  border-bottom: solid 2px currentColor;
  padding-bottom: 0.8rem;
  margin: 0 0 1.6rem;
}

/* スマホ微調整 */
@media (max-width: 600px){
  .pr{
    padding: 1.6rem;
    padding-top: 3.4rem;
    border-radius: 1.4rem;
  }
  .pr::before{
    width: 88px;
    height: 88px;
    transform: translate(-48px, -48px) rotate(-45deg);
    padding-bottom: 5px;
    font-size: 15px;
  }
}



/* PC：三角領域を広げる（=回転させている正方形を大きくする） */
@media (min-width: 601px){
  .pr{
    padding-top: 5.0rem; /* バッジが大きくなる分、上余白も少し増やす */
  }
  .pr::before{
    width: 160px;   /* ←ここを大きくすると三角が広がる */
    height: 160px;  /* ←ここを大きくすると三角が広がる */
    transform: translate(-80px, -80px) rotate(-45deg); /* width/2, height/2に合わせる */
    padding-bottom: 12px; /* 文字の位置（好みで微調整） */
    font-size: 30px;      /* 文字サイズ（好みで） */
  }
}

/* PCでは改行しない */
.br-sp { display: none; }

/* SP（例：768px以下）だけ改行する */
@media (max-width: 768px) {
  .br-sp { display: inline; }
}