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

/*----------------------------------
    全体要素
----------------------------------*/


.header_area {
    padding-top: 0;
    width: 750px;
}
.leon5_contents {
    margin: 50px 0 20px 0;
}

@media(max-width:580px){
div#mp_ta_header {
    padding: 20px !important;
}    
}

.leon5_txcontainer{
    margin-left: auto;
    margin-right: auto;
	width: 650px;
	max-width: 85%;
}

@media (max-width: 768px) {
.leon5_txcontainer {
        /* スマホの幅: 85% を設定 */
        width: 85%;
        /* 中央配置はPCと同じく維持されます */
        /* margin-left: auto; */
        /* margin-right: auto; */
 }
}

.fv_area img {
    display: block;
    width: 710px;
    margin-bottom: 10px;
}

.leon5_tx01{
    text-align: center;
    font-size: 1.8rem;
	font-family: "Arial Nova", Arial, sans-serif;
	font-weight: 700;
	transform   : scale(1, 0.8);   /* 変形 横,縦 */
    line-height: 1.2;
    letter-spacing: 0.1em;
    padding-bottom: 50px;
	color: #000;
}

.leon5_tx02{
    text-align: center;
    font-size: 1.25rem;
	font-weight: 600;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 2.5em;
    padding-bottom: 5px;
	color: #000;
	width: 88%;
	margin: 0 auto;
}

.leon5_tx03{
    text-align: center;
    font-size: 1.2rem;
	font-family: 'Ebrima', sans-serif;
    padding-bottom: 5px;
	color: #000;
	margin: 0 auto;
	text-decoration: none;
}

.leon5_tx04{
    text-align: center;
    font-size: 1.4rem;
	font-weight: 600;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.5em;
    padding: 40px 0 20px 0;
	color: #000;
	margin: 0 auto;
}

.leon5_tx05{
    text-align: center;
    font-size: 1.1rem;
	font-weight: 600;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 2em;
    padding: 10px 0;
	color: #000;
	margin: 0 auto;
}

.leon5_tx06{
    text-align: center;
    font-size: 1.1rem;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    padding-bottom: 5px;
	color: #000;
	margin: 0 auto;
	text-decoration: none;
}

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

.leon5_tx07{
    font-size: 0.9rem;
    line-height: 2em;
    letter-spacing: 0.1em;
	margin: 0 auto;
    padding-bottom: 5px;
	color: #000;
	width: 80%;
}

.left_tx{
	text-align: left !important;
	padding-left: 60px;
}

.leon5_img01{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
    margin: 0 auto;
	max-width: 100%;
}
.leon5_img01 img{
	width: 50%;
}


/* ========================================================== */
/* スマホテキスト
/* ========================================================== */
@media (max-width: 768px) {
.leon5_tx02 { 
	font-size: 0.9rem; 
	line-height: 1.8;
	width: 100%;}
.leon5_tx04 { 
	font-size: 1.1rem; 
	line-height: 1.6; } 
.leon5_tx05 { 
	font-size: 0.9rem; 
	line-height: 1.7; }
	
.leon5_tx07 { 
	font-size: 0.9rem; 
	line-height: 1.7;
	padding-top: 15px;
}
  .leon5_contents {
      margin: 30px 0 5px 0; /* セクション全体の上下マージンを削減 (50px/20pxから) */
  }
  .leon5_tx04 { 
      padding: 20px 0 10px 0 !important; /* タイトル下のパディングを削減 (40px/20pxから) */
  }

}



.left_tx{
	text-align: center;
	padding-left: 0;
}


#leon5_bd {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	position: relative;
	margin-bottom: 50px;
}

.swiper {
	width: 100%;
	max-width: 1000px; /* 必要に応じて調整 */
}

.swiper-wrapper {
	align-items: center;
}

.swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: auto;
}

.swiper-slide picture {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; /* ←これを追加！ */
}

.swiper-slide img {
	width: 100%;
	height: auto;
	object-fit: contain; /* 切れずに全体を収める */
	display: block;
	max-width: 100%;
}

.swiper-button-next {
	right: 30px;
	color: #000000 !important;
}

.swiper-button-prev {
	left: 30px;
	color: #000000 !important;
}

/* ========================================================== */
/* Vのアンカーリンク（白い正方形と文字のスタイル） */
/* ========================================================== */
.arrow-link-wrapper {
    /* Vの基準は .slide-item-wrapper になったので、これで画像の上に固定 */
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 20; 
    text-decoration: none;
    
    /* 白い正方形の背景 */
    background-color: #FFFFFF;
    width: 25px;
    height: 25px;
	border-radius: 3px;
	border: #B9B9B9 1px solid;
    
    /* Vの文字を中央に寄せる */
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-text {
    color: #000000;
    font-size: 24px;
    font-weight: 0; 
    font-family: 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', sans-serif;
    display: inline-block;
    transform: scaleY(0.6);
}

@font-face {
  font-family: "Arial Nova";
  src: url("fonts/ArialNova-Bold.woff2") format("woff2");
  font-weight: 700;
}


.leon5-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
}

/*----------------------------------
    【NEW】2カラム表示（横に2つ並べる）用の追加スタイル
----------------------------------*/
.leon5_2column {
    display: flex;
    justify-content: space-between;
    width: 100%;
	max-width: 1000px; /* 任意、全体最大幅 */
    margin: 0 auto;
    flex-wrap: wrap; /* 2列表示にするために折り返しを許可 */
    gap: 10px;
}

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

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

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

/*----------------------------------
    スマホカラム
----------------------------------*/
@media (max-width:768px) {
  
  /* 1. 各商品アイテムを横並びに戻す */
  .leon5_2item {
    display: flex !important;
    flex-direction: row !important;   /* 左右並び */
    align-items: flex-start;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 15px; /* アイテム間の隙間 */
  }

  /* 2. 画像のコンテナのスタイル設定（新しいコンテナは不要だが、imgを包むaタグを間接的に利用） */
  .leon5_2item > a,
  .leon5_2item > img { /* <img>が直下にある場合も考慮 */
    /* 💡 画像エリアに40%を割り当て */
    flex: 0 0 40% !important; 
    max-width: 40% !important; 
    height: auto;
    /* 画像そのものは親要素の幅100%になるため、imgタグ単体でさらに調整 */
  }

  /* 3. 画像(img)そのもののスタイル */
  .leon5_2item img {
    width: 100% !important; /* 親（aタグまたはdiv）の40%を埋める */
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }
  
  /* 4. テキストの幅を60%に設定 */
  .leon5_2item .leon5_tx07 {
    /* 💡 テキストエリアに残り60%を割り当て */
    flex: 1 1 60% !important;       
    max-width: 60% !important;
    margin: 0 !important;
    padding-left: 10px !important;  /* 画像との間隔 */
    word-break: break-word;
    text-align: left !important;
  }
}


/*----------------------------------
   アンカーリンク
----------------------------------*/


/*----------------------------------
  ガリポリ
----------------------------------*/

.gallicon {
    display: flex;
    width: 90%;
	margin: 0 0 0 auto;
	padding-top: 50px;
}

.gallilogo {
    width: 30%;
    flex-shrink: 0; 
	
}

.gallitx {
    width: 70%;
    padding-left: 20px;
	text-align: left;
}
.gallitx a:hover{
	text-decoration: underline;
}

.gallilogo img {
    max-width: 80%;
	width: 80%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    
    .gallicon {
        flex-direction: column;
		margin: 0 auto;
    }

    .gallilogo {
        width: 100%;
        margin-bottom: 15px; 
    }
    .gallilogo img {
        width: 60%;
		margin: 0 auto;
    }

    .gallitx {
        width: 100%;
        padding-left: 0; 
    }
}