@charset "utf-8";
#sub-column{
  display: none; /* サイド非表示 */
}

#main-column{
  width: 1000px; /* メイン幅1000px */
  margin: 0 auto;
}

/* CSS */
.m_wrap{
  width: 1000px;
  margin: 0 auto;
}
.container-flex {
  display: flex; /* 親要素をFlexコンテナにする */
}

.container-flex2 {
  display: flex; /* 親要素をFlexコンテナにする */
  margin-top: 50px;
}

.item-flex {
  flex: 1 0 50%;
  box-sizing: border-box;
  padding: 10px;
}

.item-flex img{
	width: 100%;
	height: auto;
}
.item-flex2 {
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  width: 30%;
  height: 300px;
}
.item-flex3 {
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  width: 70%;
  height: 300px;
  justify-content: flex-start;
  align-items: flex-end; 
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  color: #898989;
}
.container1, .container2, .container3, .container4, .container5, .container6, .container7, .container8, .container9, .container10{
  margin: 120px 0;
}

.container2, .container3, .container4, .container5, .container6, .container7, .container8, .container9, .container10 h4{
  text-align: left;
}

.contents-title{
  font-family: "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 22px;
  color: #898989;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 30px 0;
}
.contents-title_b{
  font-family: "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 24px;
  color: #898989;
  letter-spacing: 0.4em;
  text-align: center;
  margin: 30px 0 50px 0;
}

.item-contents{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  padding-top: 10px;
  text-align: left;
  line-height: 1.8em;
}
.item-contents2{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  color: #898989;
  font-weight: 500;
  margin: 10px 0;
  text-align: left;
  line-height: 1.4em;
}
.click_view{
  text-align: center;
  margin: 20px 0;
  width: 100%;
}
.click_view p{
  background-color: #808080; /* グレー */
  font-family: Ebrima, sans-serif;
  padding: 15px 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  width: 100%;
  margin: 0 auto;
}
.click_view a{
  text-decoration: none;
  color: #ffffff !important;
}
.click_view2{
  text-align: center;
  margin: 20px 0;
  width: 100%;
}
.click_view2 p{
  border: #808080 1px solid;
  box-sizing: border-box;
  font-family: Ebrima, sans-serif;
  padding: 15px 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  width: 100%;
  margin: 0 auto;
}
.click_view2 a{
  text-decoration: none;
}
.youtube-container_m {
  width: 80%;
  max-width: 1000px;
  margin: 150px auto;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.item-caption{
  font-size: 12px;
  margin: 20px 0;
}
.item-caption__name {
  position: relative; /* 擬似要素の基準位置 */
  padding-left: 20px; /* 線分のスペースを確保 */
}

/* 1本目の線 */
.item-caption__name::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #333;
  position: absolute;
  left: 5px; /* 親要素の左端から5px右に移動 */
  top: 0;
}

/* 2本目の線 */
.item-caption__name::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #333;
  position: absolute;
  left: 10px; /* 親要素の左端から10px右に移動 */
  top: 0;
}
.item-caption__name span{
  color: #898989;
}
.center_text{
  text-align: center;
}

.product-list-page #itemList_wrap {
  display: none; /* 商品一覧を非表示にする */
}

/* スマホ用（最大幅768px以下） */
@media screen and (max-width: 768px) {
  .m_wrap,
  #main-column {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .container-flex,
  .container-flex2 {
    flex-direction: column; /* 縦並び */
  }

  .item-flex,
  .item-flex2,
  .item-flex3 {
    width: 100% !important; /* 横幅を全体に */
    height: auto !important; /* 高さは自動 */
    padding: 10px 0; /* 上下余白 */
  }
  .container1, .container2, .container3, .container4, .container5, .container6, .container7, .container8, .container9, .container10 img {
    width: 100% !important; /* 98% → 100% に矯正 */
    height: auto !important;
    display: block;         /* インライン要素の余白を消す */
    margin: 0 auto;         /* 中央揃え */
  }

  .contents-title,
  .contents-title_b {
    font-size: 18px; /* モバイル向けに文字少し小さめ */
  }

  .item-contents {
    font-size: 13px;
    line-height: 1.8em;
  }

  .item-contents2 {
    font-size: 11px;
  }
  html, body {
    overflow-x: hidden; /* 横スクロール禁止 */
  }

  #main-column,
  .m_wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  .item-flex2,
  .item-flex3 {
    width: 100% !important;
  }

  iframe {
    max-width: 100%;
  }
  .click_view p,
  .click_view2 p {
    width: 100% !important; /* ボタンもはみ出さないように */
    box-sizing: border-box;
  }
html {
  scroll-padding-top: -200px; /* ヘッダーの高さに合わせて調整 */
}
}