@charset "UTF-8";
/** cmn_layout.css **/
/* Reseting
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
vertical-align: baseline;
}
/* Typography
---------------------------------------------------------- */
html {
font-size: 62.5%;
}
body {
height: 100%;
font-size: 1.6rem; /*1rem = 10px*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
color: #222;
}
html, body {
width: 100%;
/*overflow-x: hidden;*/
overflow-x: visible !important;
box-sizing: border-box;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
a {
cursor: pointer;
text-decoration: none;
}
a,
a:visited {
color: inherit;
}

/* Layout
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Elements
---------------------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}
caption, th {
text-align: left;
}
ol, ul {
list-style: none;
}
img {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
vertical-align: bottom;
border-style: none;
}
input, textarea {
margin: 0;
padding: 0;
font-size: 100%;
}

a:focus {
outline: none;
}
table {
width: 100%;
}
/* font
---------------------------------------------------------- */
.tpMin {
font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.tpGot {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
/* Clearfix
---------------------------------------------------------- */
.clearfix {
*zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}

/* Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { background-color: #fff;}

.sp_none { display: none;}
.pc_none { display: inherit;}

@media screen and (min-width: 569px) {
.sp_none { display: inherit;}
.pc_none { display: none;}
}

.layout-box01 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.layout-box02 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}
.layout-box03 {
  max-width: 900px;
  margin: 0 auto;
}
/* wrapper
---------------------------------------------------------- */
.wrapper {
  width: 100%;
  background: #fff;
  background-image: linear-gradient(360deg, rgba(255, 250, 187, 1) 10%, rgba(255, 239, 145, 0) 80%);
}
.container {
  max-width: 1000px;
  text-align: left;
  background-color: #fff;
}
/* header
---------------------------------------------------------- */
.header {
  position: relative;
  background: #fff;
  z-index: 1;
}
.header-inner {
  padding: 0;
  z-index: 100;
}
.header-title {
  width: 100%;
  /*max-width: 420px; */
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.header-time {
  position: absolute;
  width: 30%;
  height: auto;
  top: 90px;
  right: 10px;
  z-index: 10;
}
@media screen and (min-width: 480px) {
.header-time {
  top: 120px;
  right: 10px;
}
}
@media screen and (min-width: 569px) {
.wrapper {
  -webkit-transform:: translate3d(0, 0, 0);
  -moz-transform:: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}
.container {
  position: inherit;
  margin: 0 auto;
  padding: 0;
}
.header-inner {
  width: 100%;
  margin: 0 auto;
  padding: 15px 0;
}
.header-title { }
.header-time {
  width: 188px;
  top: 30px;
  right: 10px;
}
}
@media screen and (min-width: 769px) {
.header-inner {
  padding: 0;
}
.header-time {
  width: 188px;
  top: 30px;
  right: -30px;
}
}
/* slider
---------------------------------------------------------- */
#slider {
  width: 100%;
  height: auto;
  padding: 8px 0;
  /*background-color: #000;*/
}
#slider img {
  display: none;
}
#slider img:first-child {
  display: block;
}
.indicators {
  display: none;
}
@media screen and (min-width: 569px) {
#slider {
  max-width: 870px;
  margin: 0px auto;
  padding: 10px 0;
}
}
/* snsNav
---------------------------------------------------------- */
.snsnav {
  margin: 20px auto;
}
.snsnav-list {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.snsnav-item {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 1%;
  background-size: contain;
}
.snsnav-item a {
  display: block;
  width: 40px;
  height: 40px;
}
.snsnav-item._mail { background-image: url(../images/ico_mail_on.svg);}
.snsnav-item._twitter { background-image: url(../images/ico_x_on.svg);}
.snsnav-item._tiktok { background-image: url(../images/ico_tiktok_on.svg);}
.snsnav-item._mail:hover { background-image: url(../images/ico_mail_off.svg);}
.snsnav-item._twitter:hover { background-image: url(../images/ico_x_off.svg);}
.snsnav-item._tiktok:hover { background-image: url(../images/ico_tiktok_off.svg);}

@media screen and (min-width: 569px) {
.snsnav {
  margin: 30px auto;
}
.snsnav-item {
  width: 50px;
  height: 50px;
  margin: 0 1%;
}
.snsnav-item a {
  width: 50px;
  height: 50px;
}
}
/* contents
---------------------------------------------------------- */
.contents {
  width: 100%;
  margin: 30px auto;
  padding: 0 20px;
  text-align: center;
}
/* corner cast */
.corner,
.cast {
  margin: 20px auto;
  border-bottom: solid 1px #000;
}
.corner-tit-inner,
.cast-tit-inner {
  border-bottom: solid 3px #000;
}
.corner-tit,
.cast-tit {
  display: table;
  margin: 0 0 -3px 0;
  font-size: 1.8rem;
  color: #000;
  letter-spacing: 3px;
  text-align: left;
  font-weight: bold;
}
.tb_line {
  border-radius: 3px;
  /* border-left: 1px solid #000; */
  /* border-right: 1px solid #000; */
}
.tb_line::before,
.tb_line::after {
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  background: -webkit-gradient(linear, left top, right bottom, from(#000), to(#00));
  background: -moz-linear-gradient(left, #000, #000);
  background: linear-gradient(left, #000, #000);
}
@media screen and (min-width: 569px) {
.contents {
  margin: 10px auto;
  padding: 0 30px;
}
.corner,
.cast {
  margin: 30px auto;
}
.corner-tit,
.cast-tit {
  font-size: 2rem;
}
}
@media screen and (min-width: 769px) {
.contents {
  margin: 15px auto;
  padding: 0 80px;
}
}
/* corner-list */
.corner-list {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.corner-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  font-size: 1.4rem;
  line-height: 1.5;
  border-bottom: dotted 1px #000;
}
.corner-item:last-child {
  border-bottom: none;
}
.corner-item a:hover {
  color: #000;
  text-decoration: none;
}
.corner-logo {
  width: 90%;
  margin: 0 auto 20px auto;
}
.corner-txt {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 569px) {
.corner-list {
  padding: 20px 0;
}
.corner-item {
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 1.4rem;
}
.corner-item:last-child {
  border-bottom: none;
}
.corner-logo {
  width: 30%;
  margin: 0;
}
.corner-txt {
  width: 65%;
  font-size: 1.5rem;
}
}
/* cast */
.cast-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 20px 0;
}
.cast-item {
  display: block;
  width: 90%;
  margin: 15px auto;
}
.cast-img img {
  border: solid 1px #000;
  border-radius: 5px;
}
.cast-name {
  margin: 6px 0;
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  font-weight: bold;
  color: #000;
  text-align: center;
}
.cast-profile {
  width: 100%;
  margin-bottom: 8px;
  font-size: 1.4rem;
  line-height: 1.6;
}
.cast-link {
  width: 100%;
  margin: 5px 0 5px 10px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.2;
  white-space: nowrap;
}
.cast-link:before {
  content: '■';
  margin: 0 .3em 0 -1em;
  color: #000;
  font-size: 1rem;
}
@media screen and (min-width: 569px) {
.cast-list {
  justify-content: center;
  max-width: 900px;
  margin: 10px auto;
  padding: 30px 0;
}
.cast-item {
  width: 47%;
  margin: 0 auto;
}
.cast-name {
  margin: 8px 0;
  font-size: 2.5rem;
}
.cast-profile {
  margin-bottom: 8px;
  font-size: 1.4rem;
}
.cast-link {
  margin: 6px 0 6px 10px;
  font-size: 1.3rem;
}
}

/* annerbox
---------------------------------------------------------- */
.bannerbox { }
.bannerbox-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px auto 20px auto;
  padding: 0 20px;
  text-align: center;
}
.bannerbox-item {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 0;
}
@media screen and (min-width: 569px) {
.bannerbox-list {
  justify-content: space-between;
  margin: 40px auto;
  padding: 0 30px;
}
.bannerbox-item {
  width: 32%;
  margin: 0;
}
}
@media screen and (min-width: 769px) {
.bannerbox-list {
  margin: 50px auto;
  padding: 0 80px;
}
}
/* footer
---------------------------------------------------------- */
.footer {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.sbs-logo {
  width: 62px;
  height: auto;
  margin: 15px auto;
}
.footer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-item {
  margin: 5px 0;
  padding: 0 5px;
  font-size: 1.2rem;
  line-height: 1.4;
}
.footer-copyright {
  width: 100%;
  padding: 10px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: #666;
}
/* page-top */
.page-top {
  width: 50px;
  height: 50px;
  margin: 10px auto;
}
.page-top a {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  border: 1px solid #000;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.page-top a:hover,
.page-top a:hover .arrow:before {
  border-color: #ccc;
}
.page-top a .arrow {
  overflow: hidden;
  height: 25px;
}
.page-top a .arrow:before {
  content: '';
  height: 20px;
  width: 20px;
  display: block;
  border: 2px solid #000;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 39%;
  left: 28%;
}
@media screen and (min-width: 569px) {
.footer {
  width: 100%;
}
.sbs-logo {
  width: 80px;
  margin: 15px auto;
}
.footer-item {
  margin: 5px 0;
  padding: 0 8px;
  font-size: 1.3rem;
  border-right: solid 1px #ccc;
}
.footer-item:last-child {
  border-right: none;
}
.footer-copyright {
  padding: 10px;
  font-size: 1.2rem;
}
}
/* facebook
---------------------------------------------------------- */
.facebook {
  width: 100%;
  margin: 30px auto;
  text-align: center;
}

.timeline {                /*20230112 shibayama*/
  max-width: 100%;
  border: 1px solid #333;
  padding: 10px;
}
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media screen and (min-width: 569px) {
.facebook-inner {
  margin: 50px auto;
}
.timeline {                /*20230112 shibayama*/
  max-width: 50%;
  margin:10px auto;
}
}


/*--追加 ライフ一覧--*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 通常時は3列 */
  grid-template-rows: repeat(2, auto); /* 通常時は2行 */
  gap: 20px; /* グリッド間の間隔 */
  }

.grid-item {
  border: 1px solid #ccc; /* 枠線 */
  padding: 10px;
  height: 100%;
  }

.grid-item img {
  max-width: 100%; /* 画像がアイテムの幅を超えないようにする */
  height: auto;
}

.image-wrapper {
  width: 100%; /* .grid-item の幅いっぱいに広げる */
  height: 15rem; /* 画像を揃えたい高さの固定値 */
  overflow: hidden; /* コンテナからはみ出た画像を隠す */
  position: relative; /* imgを中央配置するための基準点 */
  margin-bottom: 10px; /* 画像とタイトルとの間隔 */
  display: flex; /* これもFlexboxにして、中のimgを中央に配置する */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
}

.image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}


/* 必要に応じて、タイトルとカテゴリのスタイルを追加 */
.grid-item h3 {
  margin-top: 10px;
  font-size: 1.4rem;
  text-align: left; /* タイトルを左寄せ */
}

.grid-item p {
  font-size: 1.2rem;
  text-align: right; /* タイトルを右寄せ */
}


.more-button-container {
  text-align: center; /* ボタンを中央に配置 */
  margin-top: 20px; /* 上のコンテンツとの間隔 */
  margin-bottom: 20px; /* 下のコンテンツとの間隔（必要に応じて） */
}

.more-button {
  display: inline-block; /* ボタンをインラインブロック要素にする */
  padding: 5px 20px; /* パディング（余白） */
  text-decoration: none; /* 下線を削除 */
  color: #333;
  font-weight:bold;
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* グラデーションの指定 */
  border: 1px #999 solid; /* 枠線 */
  border-radius: 5px; /* 角を丸くする */
  font-size: 1.4rem;
  cursor: pointer; /* カーソルをポインターにする */
  transition: background 0.3s ease; /* ホバー時のアニメーションを滑らかにする */
}

.more-button:hover {
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* ホバー時のグラデーションを少し暗くする */
}


/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
.grid-container {
  grid-template-columns: repeat(2, 1fr); /* 2列にする */
  grid-template-rows: auto; /* 行数はコンテンツに合わせて自動調整 */
　}
}

/* YouTube埋め込み */

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 のアスペクト比 (高さ / 幅 = 9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  margin-top:30px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.btn,
a.btn,
button.btn {
  margin:10px auto;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #552211;
  background-color: #ffcc00;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #552211;
  background: #ffcc00;
}