@charset "utf-8";


/* 共通 ---------------------------------------------- */

.SP {
display: none;
}

/* バナー */
.Banner_Wrap {
margin-top: 6rem;
}

.BnrCp {
max-width: 54rem;
margin: 6rem auto 2rem;
}

#CampaginBanner1 {
max-width: 54rem;
margin: 0 auto;
}

/* パンくず */
.BreadCrumb_Wrap {
margin-top: 10rem;
padding: 0;
}

.BreadCrumb_Unit {
border-bottom: none;
}


/* 目次ページ ------------------------------------------------------------- */

#Page_Gift {
width: 940px;
margin-top: 40px;
padding-bottom: 2rem;
}

#Page_Gift h1.Mds {
margin-bottom: 15px !important;
font-size: 13px !important;
font-weight: normal;
}

/* キービジュアル */
#Page_Gift .KeyVisual {
width: 940px;
height: 270px;
margin-bottom: 30px;
background: url(/images/campaign/gift/Texture_KeyVisual.jpg?ver=201207B) no-repeat;
}

#Page_Gift .KeyVisual h2 {
margin-left: 40px;
padding-top: 40px;
}

#Page_Gift .KeyVisual .Lead {
width: 495px;
margin: 2rem 0 0 4rem;
font-size: 1.5rem;
line-height: 1.9;
}

/* 年齢別メニュー */
#Page_Gift .AgeMenu {
width: 940px;
margin-bottom: 60px;
border: 4px solid #fec4a7;
border-radius: 18px;
box-sizing: border-box;
overflow: hidden;
}

#Page_Gift .AgeMenu .IndexMenu2 li {
width: 50%;
padding: 15px 15px;
border-right: 4px solid #fec4a7;
border-bottom: 4px solid #fec4a7;
box-sizing: border-box;
}

#Page_Gift .AgeMenu .IndexMenu2 li:nth-child(2n) {
border-right: none;
}

#Page_Gift .AgeMenu .IndexMenu2 li:nth-child(7),
#Page_Gift .AgeMenu .IndexMenu2 li:nth-child(8) {
border-bottom: none;
}

#Page_Gift .AgeMenu .IndexMenu2 li a {
background: url(/images/campaign/gift/age_menu/Icon_LinkFwd2.png) no-repeat right center;
background-size: 26px 26px;
color: #000;
text-decoration: none;
}

#Page_Gift .AgeMenu .IndexMenu2 .IndexWrap {
display: table;
}

#Page_Gift .AgeMenu .IndexMenu2 .IndexWrap .Photo {
display: table-cell;
width: 125px;
padding-right: 20px;
vertical-align: middle;
}

#Page_Gift .AgeMenu .Detail {
display: table-cell;
width: 300px;
vertical-align: middle;
}

#Page_Gift .AgeMenu h2 {
color: #6d1c07;
font-size: 24px !important;
font-weight: normal;
}

#Page_Gift .AgeMenu h2 span {
display: inline-block;
padding-right: 1px;
font-size: 23px !important;
line-height: 0.5em;
}

/* 0歳メニュー */
#Page_Gift .AgeMenu .FullMenuWrap {
width: 940px;
padding: 20px 0;
border-bottom: 4px solid #fec4a7;
box-sizing: border-box;
}

#Page_Gift .AgeMenu .FullMenuWrap h2 {
display: inline-block;
margin-left: 20px;
padding-bottom: 40px;
}

#Page_Gift .AgeMenu .FullMenu {
display: table;
width: 600px;
margin: 0 auto;
}

#Page_Gift .AgeMenu .LBox,
#Page_Gift .AgeMenu .RBox {
display: table-cell;
}

#Page_Gift .AgeMenu .LBox {
width: 250px;
}

#Page_Gift .AgeMenu .BtnArea {
width: 325px;
}

#Page_Gift .AgeMenu .BtnArea a {
display: inline-block;
width: 150px;
margin: 0 9px 8px 0;
padding-top: 5px;
padding-bottom: 5px;
background: #e9611d url(/images/sp/common/icon/Icon_LinkFwd_White.png) no-repeat left center;
background-size: 15px auto;
background-position: 90% 50%;
border-radius: 25px;
color: #fff;
font-size: 15px;
text-align: center;
text-decoration: none;
}


/* 年齢別ページ ------------------------------------------------------------- */

#Page_GiftPage {
margin-top: 40px;
padding-bottom: 2rem;
}

#Page_GiftPage h1.Mds {
margin-bottom: 15px !important;
font-size: 13px !important;
font-weight: normal;
}

#Page_GiftPage .Title {
margin-bottom: 30px;
}

/* 年齢別メニュー（AgeMenu）*/
#Page_GiftPage .AgeMenu {
width: 940px;
height: 70px;
margin: 0 auto;
padding: 0;
}

#Page_GiftPage .AgeMenu .IndexMenu2 {
width: 100%;
}

#Page_GiftPage .AgeMenu li {
width: 11.625%;
margin-right: 1%;
}

#Page_GiftPage .AgeMenu li:last-child {
margin-right: 0;
}

/* CSS Sprite */
#Page_GiftPage .AgeMenu a {
display: block;
width: 100%;
height: 70px;
background: #fedfd0;
border-top-left-radius : 15px;
border-top-right-radius : 15px;
box-sizing: border-box;
color: #6d1c07;
font-size: 21px;
font-weight: bold;
text-align: center;
line-height: 70px;
text-decoration: none;
overflow: hidden;
}

#Page_GiftPage .AgeMenu a:hover, 
#Page_GiftPage .AgeMenu .Current a {
background: #6d1c07;
color: #fff;
}


/* 内容（Contents）------------------------------------------------------------- */

#Page_GiftPage .ContentsWrap {
margin-bottom: 60px;
padding-bottom: 60px;
border: 4px solid #6d1c07;
background: #fff;
}

#Page_GiftPage .Contents {
width: 860px;
margin: 40px auto 0 auto;
}

/* 0歳 月別メニュー（SubMenu）*/
#Page_GiftPage .SubMenu {
width: 860px;
height: 78px;
margin: 0 auto 25px auto;
padding: 0;
}

#Page_GiftPage .SubMenu li {
display: inline;
zoom: 1;
}

/* Image */
#Page_GiftPage .SubMenu li a img {
display: block;
float: left;
}

/* CSS Sprite */
#Page_GiftPage .SubMenu a {
display: block;
position: relative;
z-index: 1000;
float: left;
height: 79px;
color: #000;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 70px;
background: url(/images/campaign/gift/age_pages/SubNav.png?ver=191225) no-repeat;
text-decoration: none;
overflow: hidden;
}

#Page_GiftPage .SubMenu a:hover, 
#Page_GiftPage .SubMenu .Current a {
color: #fff;
}

/* Normal */
#Page_GiftPage .SubMenu .Menu1 a {
width: 218px;
background-position: 0 0;
}

#Page_GiftPage .SubMenu .Menu2 a {
width: 214px;
background-position: -218px 0;
}

#Page_GiftPage .SubMenu .Menu3 a {
width: 214px;
background-position: -432px 0;
}

#Page_GiftPage .SubMenu .Menu4 a {
width: 214px;
background-position: -646px 0;
}

/* Hover */
#Page_GiftPage .SubMenu .Menu1 a:hover {
background-position: 0 -79px;
}

#Page_GiftPage .SubMenu .Menu2 a:hover {
background-position: -218px -158px;
}

#Page_GiftPage .SubMenu .Menu3 a:hover {
background-position: -432px -237px;
}

#Page_GiftPage .SubMenu .Menu4 a:hover {
background-position: -646px -316px;
}

/* Current */
#Page_GiftPage .SubMenu .Menu1.Current a {
width: 218px;
background-position: 0 -79px;
}

#Page_GiftPage .SubMenu .Menu2.Current a {
width: 214px;
background-position: -218px -158px;
}

#Page_GiftPage .SubMenu .Menu3.Current a {
width: 214px;
background-position: -432px -237px;
}

#Page_GiftPage .SubMenu .Menu4.Current a {
width: 214px;
background-position: -646px -316px;
}

/* メイン（Main）*/
#Page_GiftPage .Contents .Main {
width: 860px;
margin-bottom: 25px;
}

#Page_GiftPage .Contents .Main.BorderB {
width: 860px;
margin-bottom: 45px;
padding-bottom: 10px;
border-bottom: 4px solid #6c1c0d;
}

/*
#Page_GiftPage .Contents .Main .LBox {
width: 570px;
}
*/

#Page_GiftPage .Contents .Main .MdsGrow {
display: inline-block;
padding: 6px 16px;
margin-bottom: 10px;
border-radius: 30px;
border: 1px solid #000;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #000;
text-align: center;
}

#Page_GiftPage .Contents .Main h2 {
margin-bottom: 10px;
color: #6d1c07;
font-size: 28px !important;
}

#Page_GiftPage .Contents .Main .LeadMain {
margin: 0 !important;
padding: 0 !important;
font-size: 16px;
line-height: 1.6em;
}

/* 商品一覧埋め込み */
#Page_GiftPage .ItemListCP {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 2rem;
}

#Page_GiftPage .ItemListCP li {
float: none;
width: auto;
margin-right: inherit;
margin-bottom: inherit;
}

/* 商品一覧ボタン */
#Page_GiftPage .BtnItemList {
margin: 40px auto 50px auto;
text-align: center;
}

#Page_GiftPage .BtnItemList a {
display: inline-block;
padding: 1.6rem 3.5rem 1.8rem;
border-radius: 100vh;
font-size: 1.8rem;
text-align: center;
line-height: 1;
text-decoration: none;
color: #fff;
background: #e9611d url(/images/campaign/gift/age_pages/icon/Icon_LinkFwd.png) no-repeat;
background-size: 20px 20px;
background-position: 8% 50%;
}

#Page_GiftPage .BtnItemList a span {
padding-left: 20px;
}


/* コラム ------------------------------------------------------------- */

#Page_GiftPage .Column {
padding: 3.2rem 3.2rem;
border-radius: 10px;
background: #fdf9ed;
overflow: hidden;
}

#Page_GiftPage .Column .Mds {
margin-bottom: 15px;
color: #6d1c07;
font-size: 2.6rem;
line-height: 1.4;
}

#Page_GiftPage .Column .Photo {
width: 40%;
margin-top: -55px;
border-radius: 10px;
overflow: hidden;
}

#Page_GiftPage .Column .Photo img {
width: 100%;
}

#Page_GiftPage .Column .Lead {
line-height: 1.9em;
}


/* 注目の特集・カテゴリ（RecommendedMenu）  --------------------------------------------------- */

.RecommendedMenu {
margin-bottom: 50px;
}

.RecommendedMenu:last-of-type {
margin-bottom: 0;
}

.RecommendedMenu h2.Mds {
margin: 20px 0 15px 0;
font-size: 2.6rem !important;
}

.RecommendedMenu .LeadMain {
margin: 0 0 2.5rem 0;
font-size: 1.5rem;
}

.RecommendedMenu .ListS,
.RecommendedMenu .ItemListCP {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}

.RecommendedMenu .ListS:before,
.RecommendedMenu .ItemListCP:before {
content: "";
display: block;
width: 22.75%;
order:1;
}

.RecommendedMenu .ListS:after,
.RecommendedMenu .ItemListCP:after {
content: "";
display: block;
width: 22.75%;
}

.RecommendedMenu .ListS li,
.RecommendedMenu .ItemListCP li {
display: flex;
align-items: center;
width: 22.75%;
}

.RecommendedMenu .ItemListCP li {
margin: 0 0 2.5% 0 !important;
}

.RecommendedMenu .ListS .Photo,
.RecommendedMenu .ItemListCP .ItemPhoto {
margin-bottom: 10px;
}

.RecommendedMenu .ListS .Photo img,
.RecommendedMenu .ItemListCP .ItemPhoto img {
width: 100%;
height: auto;
border: 1px solid #85a9d8 !important;
/* border-radius: 8px !important; */
overflow: hidden;
}

.RecommendedMenu .ListS li .Lead2 {
font-size: 15px;
line-height: 1.6em;
font-weight: bold;
}

.RecommendedMenu .LinkFwdR {
margin-top: 1rem;
}

.RecommendedMenu .LinkFwdR a {
padding: 0 0 0 18px;
font-size: 1.5rem;
font-weight: bold;
background: url(/images/common/icon/Icon_LinkAllowCircleM.png) no-repeat;
background-position: 0 50%;
}


/* 人気商品（RankingMenu）  --------------------------------------------------- */

.RankingMenu h2.Mds {
font-size: 2.6rem !important;
}

.RankingMenu .Period {
margin-bottom: 2.5rem;
font-size: 1.5rem;
}

.RankingMenu .ItemListCP {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}

.RankingMenu .ItemListCP li {
float: none;
width: auto;
margin-right: inherit;
margin-bottom: inherit;
}


/* 年齢別ランキング（RankingAgeMenu）  --------------------------------------------------- */

.RankingAgeMenu h2.Mds {
margin-bottom: 2rem;
font-size: 2.6rem !important;
}

.RankingAgeMenu .ItemListCP .AgeLead {
font-size: 1.5rem!important;
font-weight: bold;
color: #0059b5;
}

.RankingAgeMenu .RankingAgeMenuList {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1rem;
}

.RankingAgeMenu .RankingAgeMenuList a {
display: block;
padding: 1.6rem 0;
border: 1px solid var(--primary);
border-radius: 8px;
font-size: 1.5rem;
line-height: 1;
text-align: center;
color: var(--base);
}