@charset "utf-8";



/* お誕生日は10%割引！ */


/*
■ 共通
*/


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

#Page_Birthday {
padding-bottom: 105px;
overflow: hidden;
}

#Page_Birthday .InBox1 {
width: 800px;
margin: 0 auto;
}

#Page_Birthday .InBox2 {
width: 940px;
margin: 0 auto;
}

#Page_Birthday p {
font-size: 15px;
line-height: 2.0em;
}

#Page_Birthday .Photo img {
width: 100%;
height: auto;
}

/* リスト各種 */
.ListDisc li,
.ListDiscS li,
.ListKome li,
.ListKomeS li,
.ListNumS li,
.ListKomeNumS li {
position: relative;
padding-left: 14px;
background-image: none;
color: #000;
}

.ListDisc li:before,
.ListDiscS li:before,
.ListKome li:before,
.ListKomeS li:before,
.ListNumS li:before,
.ListKomeNumS li:before {
display: inline-block;
position: absolute;
}

/* ディスク（ListDisc） */
.ListDisc li:before {
left: 1px;
top: 7px;
width: 7px;
height: 7px;
border-radius: 100%;
background: #000;
content: '';
}

/* ディスク：小（ListDiscS） */
.ListDiscS li:before {
content: '';
}

/* 米印（ListKome） */
.ListKome li:before {
top: 0;
left: 0;
content: '※';
}

/* 米印：小（ListKomeS） */
.ListKomeS li:before {
top: 0;
left: 0;
content: '※';
}

/* 連番：小（ListNumS） */
.ListNumS li:before {
content: counter(ListNum)".";
}

/* 米印連番：小（ListKomeNumS） */
.ListKomeNumS li:before {
content: "※"counter(ListNum);
}

/* ボタン */
#Page_Birthday .Btn {
display: block;
width: 100%;
border-radius: 30px;
box-sizing: border-box;
line-height: 1.0em;
font-weight: bold;
text-align: center;
text-decoration: none;
}

/* 会員登録リンク */
#Page_Birthday .EntryNav li {
width: 49%;
margin-right: 2%;
}

#Page_Birthday .EntryNav li:nth-child(2n) {
margin-right: 0;
}

#Page_Birthday .EntryNav a {
display: block;
width: 100%;
padding: 25px 0;
border-radius: 15px;
box-sizing: border-box;
border: 4px solid;
font-size: 22px;
line-height: 1.0em;
font-weight: bold;
text-align: center;
text-decoration: none;
}

#Page_Birthday .EntryNav .BtnMemberEC {
padding-left: 30px;
border-color: #3d5fc4;
background: url(/images/campaign/birthday_ver2/Icon_LinkFwd1.png) no-repeat;
background-size: 25px auto;
background-position: 18px 50%;
color: #3d5fc4;
}

#Page_Birthday .EntryNav .BtnMemberLine {
padding-left: 48px;
border-color: #00b900;
background: url(/images/campaign/birthday_ver2/Icon_Line.png) no-repeat;
background-size: 44px auto;
background-position: 65px 50%;
color: #00b900;
}

#Page_Birthday .EntryNav.NavTop {
margin-bottom: 70px;
}



/* ■ タイトル ------------------------------------------------------------------ */

#Page_Birthday .PageTitle {
margin-bottom: 65px;
}



/* ■ 導入 ------------------------------------------------------------------ */

#Page_Birthday .Intro {
margin-bottom: 60px;
}

#Page_Birthday .Intro .LeadTitle {
margin-bottom: 30px;
font-size: 18px;
font-weight: bold;
line-height: 2.2em;
}

#Page_Birthday .Intro .IntroUnit {
padding: 30px;
box-sizing: border-box;
border: 3px solid #e6e6e6;
}



/* ■ ご利用方法 ------------------------------------------------------------------ */

#Page_Birthday .CheckUnit {
width: 940px;
margin: 0 auto 50px auto;
}

#Page_Birthday .CheckUnit .SectionBasic {
margin-bottom: 50px;
box-sizing: border-box;
border: 5px solid #eb5b51;
}

#Page_Birthday .CheckUnit .SectionBasic:last-of-type {
margin-bottom: 0;
}

#Page_Birthday .CheckUnit .SectionBasic h2.Mds {
position: relative;
padding: 20px 0 20px 160px;
box-sizing: border-box;
background: url(/images/campaign/birthday_ver2/check/Texture_MdsBg.jpg) no-repeat center top;
background-size: 100% auto;
font-size: 26px !important;
line-height: 1em !important;
color: #fff;
}

#Page_Birthday .CheckUnit .SectionBasic h2.Mds span {
display: inline-block;
}

#Page_Birthday .CheckUnit .SectionBasic h2.Mds .Sub {
position: absolute;
top: -10px;
left: 12px;
}

#Page_Birthday .CheckUnit .SectionBasic h2.Mds .Sub img {
width: 134px;
height: auto;
}

#Page_Birthday .CheckUnit .SectionBasic .LRBox {
width: 100%;
padding: 30px 40px;
box-sizing: border-box;
}

#Page_Birthday .CheckUnit .SectionBasic .LBox {
width: 73%;
}

#Page_Birthday .CheckUnit .SectionBasic .RBox {
width: 22%;
}

#Page_Birthday .CheckUnit .SectionBasic .Lead {
font-size: 20px;
font-weight: bold;
}

#Page_Birthday .CheckUnit .SectionBasic .ListDisc li {
padding-left: 30px;
font-size: 18px;
font-weight: bold;
line-height: 1.9em;
}

#Page_Birthday .CheckUnit .SectionBasic .ListDisc li:before {
left: 1px;
top: 10px;
width: 16px;
height: 16px;
background: #78bde9;
}

#Page_Birthday .CheckUnit .SectionBasic .ListDisc small {
font-size: 14px !important;
font-weight: normal;
}

#Page_Birthday .CheckUnit .SectionBasic .ListKome {
margin-top: 25px;
}



/* ■ 年齢別おすすめ商品 ------------------------------------------------------------------ */

#Page_Birthday .AgeUnit {
width: 940px;
margin: 0 auto 70px auto;
box-sizing: border-box;
border: 5px solid #39a5d8;
overflow: hidden;
}

#Page_Birthday .AgeUnit h2.Mds {
padding: 20px 0;
box-sizing: border-box;
background: url(/images/campaign/birthday_ver2/age/Texture_MdsBg.jpg) no-repeat center top;
background-size: 100% auto;
font-size: 26px !important;
line-height: 1em !important;
text-align: center;
color: #fff;
}

#Page_Birthday .AgeMenu .IndexMenu2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

#Page_Birthday .AgeMenu .IndexMenu2 li {
float: none;
padding: 15px 15px;
border-right: 2px solid #39a5d8;
border-bottom: 2px solid #39a5d8;
box-sizing: border-box;
}

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

#Page_Birthday .AgeMenu .IndexMenu2 li:nth-child(5),
#Page_Birthday .AgeMenu .IndexMenu2 li:nth-child(6) {
border-bottom: none;
}

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

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

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

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

#Page_Birthday .AgeMenu h3 {
font-size: 172% !important;
font-weight: normal;
color: #32a0d3;
}

#Page_Birthday .AgeMenu h3 span {
display: inline-block;
padding-right: 1px;
font-size: 170% !important;
line-height: 0.5em;
}

/* 0歳メニュー */
#Page_Birthday .AgeMenu .FullMenuWrap {
width: 940px;
padding: 40px 0;
border-bottom: 2px solid #39a5d8;
box-sizing: border-box;
}

#Page_Birthday .AgeMenu .FullMenuWrap h3 {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}

#Page_Birthday .AgeMenu .FullMenuWrap .Photo {
display: inline-block;
vertical-align: middle;
}

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

#Page_Birthday .AgeMenu .LBox,
#Page_Birthday .AgeMenu .RBox {
display: table-cell;
float: none;
}

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

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

#Page_Birthday .AgeMenu .BtnArea a {
display: inline-block;
width: 150px;
margin: 0 9px 8px 0;
padding-top: 5px;
padding-bottom: 5px;
background: #3d5fc4 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_Birthday .Shop_Buy_Notice {
width: 940px;
margin: 0 auto 85px auto;
padding: 50px;
box-sizing: border-box;
border-radius: 15px;
background: #2e79c4;
color: #fff;
}

#Page_Birthday .Shop_Buy_Notice h2.Mds {
margin-bottom: 15px;
font-size: 26px !important;
}

#Page_Birthday .Shop_Buy_Notice .Lead {
font-size: 16px;
}

#Page_Birthday .Shop_Buy_Notice .BtnDetail {
width: 260px;
margin-top: 30px;
padding: 15px 0 15px 2%;
border-radius: 25px;
background: #fff url(/images/sp/common/icon/Icon_LinkFwd_Blue.png) no-repeat;
background-size: 20px auto;
background-position: 6% 50%;
font-size: 17px;
color: #2e79c4;
}



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

.RankingMenu {
max-width: 94rem;
margin: 6rem auto 0 auto;
}

.RecommendedMenu h2.Mds {
margin: 20px 0 15px 0;
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 {
max-width: 94rem;
margin: 5rem auto 0 auto;
}

.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);
}


/* 気軽に贈れるオンラインギフト（SectionOnlineGift）--------------------------------------------------- */

#SectionOnlineGift {
margin: 7rem auto 7rem auto;
}


/* ■ 下部バナー お誕生日総合案内 ------------------------------------------------------------------ */

.Banner_Wrap {
margin-top: 7rem;
}


/* ■ おすすめ特集 ------------------------------------------------------------------ */

.RecommendedMenuCampaign {
max-width: 94rem;
margin: 8rem auto 0 auto;
}