@charset "utf-8";
/* CSS Document */

/* 1. 全体共通：スマホのデフォルトスタイルをリセット */
.item_name, .comment_tx1, .comment_tx3 {
    -webkit-text-size-adjust: 100%; /* iPhoneでの文字サイズ自動調整を防止 */
}

/* 共通余白 */
.underm_70 {
    margin-bottom: 70px;
}
.underm_50 {
    margin-bottom: 50px;
}

.setup-item {
    display: flex;
	flex-direction: row;
    gap: 10px;
	align-items: flex-start;
	width: 100%; 
    margin: 0 auto;
	align-items: center;
}

.setup-itembox{
	box-sizing: border-box;
	width: 50%;
	margin-right: 10px;
	text-align: left;
	position: relative;
}

.setup-h1{
    text-align: left;
    font-size: 26px;
	font-family: "Arial Nova", Arial, sans-serif;
	font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    padding-top: 5px;
	color: #000;
}

/* テキストスタイル */
.comment_tx1 {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
    color: #000;
}
.comment_tx2 {
    text-align: center;
    font-size: 14px;
    line-height: 1.5em;
}
.comment_tx3 {
    text-align: center;
    font-size: 30px;
    font-family: "Arial Nova", Arial, sans-serif;
    font-weight: 700;
    transform: scale(1, 0.9);
    line-height: 1.2;
    letter-spacing: 0em;
    padding-bottom: 5px;
    color: #000;
}

/* Swiperコンテナ */
.lp_bd {
    width: 85%;
	max-width: none;
    margin: 0 auto 70px;
    position: relative;
    padding-bottom: 50px !important;
    z-index: 2; 
    clear: both;
}
.swiper {
    width: 100%;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    display: block;
}

/* 矢印ボタン */
.swiper-button-next, 
.swiper-button-prev {
    background: rgba(0, 0, 0, 0.5)!important;
    color: #ffffff !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.swiper-button-next::after, 
.swiper-button-prev::after {
	color: #fff !important;
    font-size: 18px;
    font-weight: bold;
}
.swiper-pagination {
    bottom: 5px !important;
	left: 0;
	width: 100%;
	z-index: 3; /* 明示的に前へ */
	position: absolute;
	bottom: 10px;
}
.swiper-pagination-bullet-active {
    background: #000;
}

/* 商品紹介画像（コンテンツ） */
.contents_01 {
    width: 100%;
    margin: 0 auto 70px;
    position: relative;
}

/* 商品リスト全体 */
.item_list {
    width: 100%;
    margin: 0 auto 70px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 商品1行分 */
.item_img {
    display: flex;
    align-items: flex-start; /* 上端揃えを確定 */
    text-decoration: none;
    color: #000;
    margin-bottom: 5px;
}

/* 商品画像ボックス */
.item_img_box {
    width: 35%;
    max-width: 200px;
    line-height: 0; /* 画像下の微細な隙間を排除 */
}
.item_img_box img {
    width: 100%;
    display: block;
}

/* 商品テキストエリア */
.item_info {
    width: 65%;
    padding-left: 10px;
    /* フォントの行間による「上の余白」を相殺して画像と揃える */
    margin-top: 0; 
}
.item_name {
    font-size: 14px;
    line-height: 1.6em;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: left;
}

.contents_02 {
    margin: 20px 0 70px 0;
}
.left_tx{
	text-align: left !important;
	padding-left: 0px;
	widows: 100%;
	margin: 5px 0;
}
.center_tx{
	text-align: center !important;
	padding-left: 0px;
	widows: 100%;
	margin: 5px 0;
}
.lp_1column {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* 中央寄せ */
  width: 100%;
  max-width: 1000px;      /* 全体の最大幅 */
  margin: 0 auto;
  gap: 50px;              /* アイテム同士の上下の余白 */
}

.lp_1column .lp_1item {
  width: 90%;             /* スマホ等で左右に少し余白を持たせる */
  max-width: 600px;       /* PCで画像が巨大化するのを防ぐ数値（お好みで調整） */
  text-align: center;
}

.lp_1column .lp_1item img {
  width: 85%;            /* 親要素（600px）に対して100% */
  height: auto;
  display: block;
  margin: 0 auto 15px;    /* 画像下のテキストとの隙間 */
}

.lp_2column {
    display: flex;
    justify-content: space-between;
    width: 100%;
	max-width: 1000px; /* 任意、全体最大幅 */
    margin: 0 auto;
    flex-wrap: wrap; /* 2列表示にするために折り返しを許可 */
    gap: 10px;
}

.lp_2column .lp_2item {
    /* PCの2列表示 */
    width: calc(50% - 5px); /* gap: 10pxが1箇所あるので、これを考慮した幅 */
    text-align: center;
}

/* ★★★ 画像サイズを4列表示の幅に制限して中央に配置 ★★★ */
.lp_2column .lp_2item img {
    /* 4列表示の幅に合わせて最大幅を制限（約23%） */
    max-width: 100%; /* 例として最大幅を設定 */
    width: 90%; /* 元のCSSの100%は継承させない */
    height: auto;
    display: block; 
    margin: 0 auto;
}

/* 4列表示のときの画像や、その他の共通の画像スタイル */
.lp_2item img:not(.lp_2column .lp_2item img) {
    width: 100%; /* 親要素（アイテム）の幅いっぱいに表示 */
    height: auto;
    display: block;
}

.item-link-all {
    background-color: #242424; /* 背景：薄いグレー（お好みで #eee などに変更可） */
    color: #fff;               /* 文字色：濃いグレー */
    padding: 10px;             /* 上下左右の余白 */
    width: 100%;               /* 横幅いっぱい */
    max-width: 1000px;         /* 親要素に合わせる場合は削除してもOK */
    margin: 30px auto;         /* 上下に余白を持たせつつ中央寄せ */
    text-align: center;        /* テキストをセンター表示 */
    box-sizing: border-box;    /* paddingを含めてwidth100%にする設定 */
    
    /* リンクとして使いやすくするための装飾（任意） */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    cursor: pointer;           /* マウスを乗せた時に指アイコンにする */
    display: block;            /* 1行まるごとクリック可能にする */
    transition: opacity 0.3s;  /* ホバー時のふわっとした動き */
}

/* マウスを乗せた時に少し薄くする（リンクっぽさの演出） */
.item-link-all:hover {
    opacity: 0.7;
}

/* PC用メディアクエリ（768px以上） */
@media screen and (min-width: 768px) {
    #lp_bd, 
    .contents_01 {
        width: 100%;
		max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .item_list {
        max-width: 600px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* リスト全体を中央へ */
    }
    
    .item_img {
        width: 100%;
        max-width: 500px; /* 1商品行の幅を制限 */
    }

    .swiper-button-next, 
    .swiper-button-prev {
        width: 44px;
        height: 44px;
    }
	
}

/* スマホ用の設定（画面幅が767px以下の場合） */
@media screen and (max-width: 767px) {
  .contents_01 {
    max-width: 85%;
  }
  .content-item {
    width: 100%;
  }
.setup-item{
	flex-direction: column; /* 要素を縦に並べる（縦積み） */
}
.setup-itembox{
	width: 90%; /* 幅を画面いっぱいに上書き */
	text-align: center;
}
.setup-itembox img{
	width: 100%; /* 幅を画面いっぱいに上書き */
}
.setup-h1 {
	text-align: center;
    font-size: 20px;
	font-family: "Arial Nova", Arial, sans-serif;
	font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    padding-top: 5px;
	color: #000;
}
}