/* 🎨 CSS: デザインと位置の調整 */
        
        /* スライダーコンテナのスペース確保 */
        .swiper {
            width: 90%; 
max-width: 800px;
            height: auto;
            margin: 50px auto;
            /* ページネーションがコンテナの下に完全に収まるようにパディングを追加 */
            padding-bottom: 60px; 
        }

        /* スライド内の画像のスタイル */
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ページネーションの位置調整 */
        .swiper-pagination {
            /* bottomの値を調整し、画像のすぐ下に配置 */
            bottom: 5px !important; 
            
            /* 色のカスタマイズ */
            --swiper-pagination-color: #333;
            --swiper-pagination-bullet-inactive-color: #ccc;
        }

        /* 矢印ナビゲーションの表示と色の調整 */
        .swiper-button-next,
        .swiper-button-prev {
            /* 矢印の色を画像の上で見やすい色（黒）に変更 */
            color: #000 !important; 
            /* 画像より手前に表示されるように z-index を上げる */
            z-index: 10 !important; 
        }

/*
body {
  font-family: 'Noto Sans JP', sans-serif;
}
*/

@media screen and (min-width:751px) { 
#feature_articles .section-block .btm_btn_box{
margin:0px 0 0;
padding:40px 0 60px;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block .btm_btn_box{
margin:0px 0 0;
padding:40px 0 30px;
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block .btm_btn_box .btn{
margin:60px 0 0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block .btm_btn_box .btn{
margin:40px 0 0;
padding:0;
}
}

#feature_articles .section-block .btn a{
display:block;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width:80%;
height:70px;
font-size:146.5%;
font-weight:bold;
line-height:70px;
text-align:center;
text-decoration:none;
margin:0 auto;
}

@media screen and (max-width:750px) { 
#feature_articles .uaMain .cmn_unit_80{
margin:60px 0 0;
}
}

/* ======================================================= */
/* 751px以上 (PC向け): 縦並び、左寄せ & 上下中央寄せ */
/* ======================================================= */
@media screen and (min-width:751px) { 
  /* contents_img_title の背景画像スタイル */
  #feature_articles .uaMain .contents_img_title{
    background:url(/unitedathle/img/main_img_bk.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    min-width:1000px;
    width:100%;
    height:368px;
    margin:0;
    padding:0;
  }
  
  #feature_articles .contents_title_inner{
    display:flex;
    flex-direction: column; /* 縦並びを維持 */
    align-items:flex-start; /* 左右左寄せを維持 */
    justify-content:center; /* 👈 修正: 上下中央寄せ */
    width:900px;
    height:368px;
    margin:0 auto;
    padding:0;
  }

  /* h1-logo スタイル */
  .h1-logo {
    width: 360px; 
    height: 62px;  
    background: url('/unitedathle/img/ua_logo.png') no-repeat center center; 
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    margin: 0; 
  }
  
  /* p要素のスタイル */
  #feature_articles .contents_title_inner p {
    height:auto;
    font-size:116%;
    line-height:1.7;
    color:#333;
    margin:10px 0 0;
    padding:0;
    text-align: left; 
  }
}

/* ======================================================= */
/* 750px以下 (スマホ向け): 縦並び、中央寄せ & 背景画像設定 */
/* ======================================================= */
@media screen and (max-width:750px) { 
  /* contents_img_title の背景画像スタイル */
  #feature_articles .uaMain .contents_img_title{
    background:url(/unitedathle/img/main_img_bk.jpg);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size: 300% auto;
    width:100%;
    height:70vw; 
    margin:0;
    padding:0;
  }

  #feature_articles .contents_title_inner{
    display:flex;
    flex-direction: column; /* 縦並び */
    align-items:center; /* 左右中央寄せ */
    justify-content:center; /* 上下中央寄せ */
    width:100%;
    height:70vw; 
    margin:0 auto;
    padding:0;
  }

  /* h1-logo スタイル */
  .h1-logo {
/* 画面幅全体を使う設定 */
    width: 80%;
    max-width: 360px;
    /* 高さを0にし、padding-topで比率を決定する */
    height: 0;
    padding-top: 17.22%; /* ★重要: (62/360)*100% で比率を保持 */
    
    /* 背景画像を要素いっぱいに表示し、要素サイズに合わせて調整 */
    background: url('/unitedathle/img/ua_logo.png') no-repeat center center; 
    background-size: contain; /* ★重要: 画像全体が表示されるように調整 */
    
    /* その他のスタイル（元のコードから流用） */
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    margin: 0 auto;
  }

  /* p要素のスタイル (テキスト中央寄せを適用) */
  #feature_articles .contents_title_inner p {
    height:auto;
    font-size:108%;
    line-height:1.7;
    color:#333;
    margin:12px 0 0;
    padding:0;
    text-align: center; 
  }
}




/* バナー
---------------------------------------------------- */
#feature_articles .uaMain .so_campaign_bnr{
width:960px;
height:auto;
margin:48px auto 0;
padding:0;
}

@media screen and (max-width:750px) { 
#feature_articles .uaMain .so_campaign_bnr{
width:100%;
height:auto;
margin:40px auto 0;
padding:0 16px;
}

#feature_articles .uaMain .so_campaign_bnr img{
width:100%;
height:auto;
}

}


/* 共通
---------------------------------------------------- */
@media screen and (min-width:751px) { 
#feature_articles .contents{
width:1000px;
height:auto;
margin:0 auto;
padding:0 20px;
}
}

@media screen and (max-width:750px) { 
#feature_articles .cmn_unit_80{
margin:80px 0 0;
padding:0;
}
}


/* h2要素全体をFlexコンテナにし、中央揃えにする */
.section-block__title {
  display: flex;
  align-items: center; /* ラインとテキストを上下中央に揃える */
  justify-content: center; /* タイトル全体を左右中央に揃える */
  width: 100%; /* 親要素の幅いっぱいに広げる */
  text-align: center; /* フォールバック（念のため） */
  margin: 30px 0 0 ; /* 上下の余白調整 (必要に応じて変更) */
font-size:167%;
font-weight: bold;
line-height:1.6;
  color: #333; /* テキスト色の調整 (必要に応じて変更) */
  white-space: nowrap; /* タイトルが一行に収まるようにする（必須ではないが推奨） */
}

/* テキストの左側に表示するライン (::before) */
.section-block__title::before {
  content: ""; /* 擬似要素には content が必須 */
  flex-grow: 1; /* 利用可能なスペースを全て占有する */
  height: 1px; /* ラインの高さ */
  background: #a3a3a3; /* ラインの色 */
  margin-right: 20px; /* テキストとの間にスペースを設ける */
}

/* テキストの右側に表示するライン (::after) */
.section-block__title::after {
  content: ""; /* 擬似要素には content が必須 */
  flex-grow: 1; /* 利用可能なスペースを全て占有する */
  height: 1px; /* ラインの高さ */
  background: #a3a3a3; /* ラインの色 */
  margin-left: 20px; /* テキストとの間にスペースを設ける */
}

main p.section-block__subtitle{
width:960px;
font-size:100%;
line-height:1.6;
color:#333;
text-align:center;
margin:2px auto 0;
padding:0;
}

@media screen and (max-width:750px) {
.section-block__title {
font-size:131%;
}

.uaMain p.section-block__subtitle{
width:100%;
}
}

.uaMain .contents .section-block__description{
margin:20px 0 0 0;
padding:0 25px;
}

.uaMain .contents .section-block__description p{
display:block;
font-size:131%;
line-height:1.7;
max-height: 100%;
margin:0 auto;
padding:0;
}

@media screen and (max-width:750px) {
.uaMain .contents .section-block__description{
padding:0;
}

.uaMain .contents .section-block__description p{
font-size:123.1%;
}
}

@media screen and (max-width:750px) {
#feature_articles .section-block{
width:100%;
padding:0 16px;
}
}


@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner{
width:100%;
margin:0 auto;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner{
width:100%;
margin:0 auto;
}
}




/* 特長
---------------------------------------------------- */
#feature_articles .section-block__list-inner ul{
display:flex;
list-style: none;
list-style-type: none;
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner ul.feature-list--col3{
justify-content: center;
gap: 40px;
width:100%;
margin:40px auto 0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner ul{
justify-content: center;
flex-direction: column;
gap: 40px;
width:100%;
margin:40px auto 0;
padding:0;
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner ul.feature-list--col3 li{
width:calc(100% / 3);
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner ul li{
pointer-events: none;
width:100%;
margin:0;
padding:0;
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner ul li .feature-list__image-wrap{
  width: 293px;
  height: 380px;
  overflow: hidden;
  margin: 0 auto; /* 中央寄せしたい場合 */
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner ul li .feature-list__image-wrap{
    width: 90%; /* ビューポートの幅いっぱいに設定 */
    height: 60vw; /* 幅と同じ値（100vw）にすることで正方形を維持 */
    /* ※ 100vw はスクロールバーを含める場合があるため、
       画面幅にぴったり合わせたい場合は、親要素の幅を基準にする方が良い場合もあります。
       その場合は width: 100%; height: 100%; とし、親要素の幅を適切に設定してください。 */
    margin: 0 auto; /* 左右の余白をなくす */
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-wrapper ul.col3 li img{
width:100%;
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-wrapper ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* デフォルトも cover にしておくと汎用性が高い */
  object-position: center;
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner ul li h3{
font-size:131%;
font-weight:bold;
line-height:1.7;
text-align:center;
padding:26px 0 20px 0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner ul li h3{
font-size:123.1%;
font-weight:bold;
line-height:1.7;
text-align:center;
padding:20px 0 10px 0;
}
}

@media screen and (min-width:751px) { 
#feature_articles .section-block__list-inner ul li p{
width:293px;
height:auto;
font-size:116%;
line-height:1.9;
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .section-block__list-inner ul li p{
width: 100%;
height:auto;
font-size:116%;
line-height:1.9;
margin:0;
padding:0;
}
}

















/* ピックアップアイテム
---------------------------------------------------- */
@media screen and (min-width:751px) {
.uaMain .item_area{
display:flex;
flex-wrap: wrap;
width:960px;
margin:0px auto 0;
}
}

@media screen and (max-width:750px) {
.uaMain .item_area{
display:flex;
flex-wrap: wrap;
gap:8px;
width:100%;
margin:0px auto 0;
padding:0 0px;
}
}

@media screen and (min-width:751px) {
.uaMain .item_area .item{
display: flex;
flex-direction: column;
width:240px;
margin:50px 0 0;
padding:0 10px;
}
}

@media screen and (max-width:750px) {
.uaMain .item_area .item{
display: flex;
flex-direction: column;
width:calc((100% - 8px)/2);
margin:34px 0 0;
padding:0 10px;
}
}

@media screen and (min-width:751px) {
.uaMain .item_area .item .item_img{
width:100%;
text-align:center;
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) {
.uaMain .item_area .item .item_img{
width:100%;
text-align:center;
margin:0;
padding:0;
}
}

@media screen and (min-width:751px) {
.uaMain .item_area .item .item_img img{
width:200px;
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) {
.uaMain .item_area .item .item_img img{
width:88%;
margin:0 auto;
padding:0;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_title{
margin:0;
padding:4px 0 0;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_title{
margin:0;
padding:4px 0 0;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_title a{
font-size:116%;
line-height:1.5;
color:#333;
text-decoration:none;
margin:0;
padding:0;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_title a{
font-size: 108%;
line-height:1.5;
color:#333;
text-decoration:none;
margin:0;
padding:0;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_title a:hover{
text-decoration:underline;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_title a:hover{
text-decoration:none;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_txt{
font-size:93%;
line-height:1.5;
margin:0;
padding:4px 0 0;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_txt{
font-size:93%;
line-height:1.5;
margin:0;
padding:4px 0 0;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_price{
font-size:138.5%;
font-weight:bold;
line-height:1.5;

color:#333;
margin:0;
padding:4px 0 0;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_price{
font-size:123.1%;
font-weight:bold;
line-height:1.5;
color:#333;
margin:0;
padding:4px 0 0;
}
}

@media screen and (min-width:751px) {
.uaMain .item .item_price span{
font-size:60%;
}
}

@media screen and (max-width:750px) {
.uaMain .item .item_price span{
font-size:60%;
}
}



@media screen and (min-width:751px) { 
#feature_articles .btm_btn_box{
margin:0px 0 0;
padding:0 0 120px;
}
}

@media screen and (max-width:750px) { 
#feature_articles .btm_btn_box{
margin:0px 0 0;
padding:0 0 120px;
}
}

@media screen and (min-width:751px) { 
#feature_articles .btm_btn_box .btn{
margin:60px 0 0;
padding:0;
}
}

@media screen and (max-width:750px) { 
#feature_articles .btm_btn_box .btn{
margin:40px 0 0;
padding:0;
}
}

#feature_articles .btn a{
display:block;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width:80%;
height:70px;
font-size:146.5%;
font-weight:bold;
line-height:70px;
text-align:center;
text-decoration:none;
margin:0 auto;
}

#feature_articles .c_bl a{
background-color:#2180c2;
color:#FFF;
}

@media screen and (min-width:751px) { 
#feature_articles .c_bl a:hover{
background-color:#2794e0;
}
}

#feature_articles .c_nv a{
background-color:#275e85;
color:#FFF;
}

@media screen and (min-width:751px) { 
#feature_articles .c_nv a:hover{
background-color:#347db0;
}
}

#feature_articles .c_yw a{
background-color:#f7e305;
color:#333;
}

@media screen and (min-width:751px) { 
#feature_articles .c_yw a:hover{
background-color:#f5e961;
}
}

#feature_articles .c_bk a{
background-color:#494949;
color:#FFF;
}

@media screen and (min-width:751px) { 
#feature_articles .c_bk a:hover{
background-color:#6c6c6c;
}
}