@charset "utf-8";



/* ハマビーズ */


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

#Page_Hama p {
font-size: 15px;
}

#Page_Hama a {
display: block;
color: #000;
text-decoration: none;
}

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

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

.RecommendedMenuCampaign {
margin-bottom: 0 !important;
}

/* 見出し */
#Page_Hama .MdsSec {
margin-bottom: 30px;
padding: 15px 0;
border-radius: 12px;
background: #e60012;
font-size: 26px !important;
font-weight: bold;
text-align: center;
line-height: 1em;
color: #fff;
}

/* 番号リスト */
/*
ol {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}

ol li {
text-indent: -1.3em;
padding-left: 1.3em;
}

ol li:before {
counter-increment: item;
content: counter(item)'.';
}
*/

/* ボタン */
#Page_Hama .Btn {
display: block;
width: 100%;
border-radius: 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
font-size: 15px;
line-height: 1;
font-weight: bold;
text-align: center;
text-decoration: none;
}

#Page_Hama .BtnBuy,
#Page_Hama .BtnBuy2 {
width: 190px;
padding: 10px 0 10px 15px;
border: 2px solid #b8daeb;
background: #f1f8fd url(/images/sp/common/icon/Icon_LinkFwd_Blue.png) no-repeat;
background-size: 17px auto;
background-position: 6% 50%;
font-size: 16px;
color: #3d5fc4;
}

#Page_Hama .BtnBuy2 {
background: #f1f8fd url(/images/sp/common/icon/Icon_LinkDown_Blue.png) no-repeat;
background-size: 17px auto;
background-position: 6% 50%;
}

/* アイロンビーズマジック バナー */
#Page_Hama #BannerIronBeadsMagic {
max-width: 54rem;
margin: 0 auto 6.5rem auto;
}


/* ■ #ハマビーズギャラリー ------------------------------------------------------------------ */

#Page_Hama .SecHamaCP {
margin-bottom: 65px;
}

#Page_Hama .SecHamaCP h2.MdsH2 {
margin-bottom: 5px;	
padding-top: 25px;
border-top: 4px #e60012 solid;
font-size: 26px !important;
line-height: 1.6em;
}

#Page_Hama .SecHamaCP h2.MdsH2 small {
display: block;
margin-bottom: 10px;
font-size: 80% !important;
}

#Page_Hama .SecHamaCP .IndexMenu1 {
margin-bottom: 20px;
}

#Page_Hama .SecHamaCP .IndexMenu1 li {
width: 49%;
margin-right: 2%;
}

#Page_Hama .SecHamaCP .IndexMenu1 li:nth-child(2n) {
margin-right: 0;
}

#Page_Hama .SecHamaCP .IndexMenu1 .Photo img {
width: 100%;
height: auto;
}

#Page_Hama .SecHamaCP .LeadMain1 {
font-size: 16px;
}

#Page_Hama .SecHamaCP .SectionSubIn {
margin-top: 25px;
}

#Page_Hama .SecHamaCP h3.MdsH3 {
position: relative;
padding-left: 21px;
font-size: 19px !important;
line-height: 1.5em;
}

#Page_Hama .SecHamaCP h3.MdsH3:before {
position: absolute;
margin-top: -6px;
left: 0;
top: 50%;
width: 14px;
height: 14px;
background: #e60012;
content: "";
}

#Page_Hama .SecHamaCP .BtnTo.AlignC {
margin-top: 40px;
}

#Page_Hama .SecHamaCP .BtnColor2:link, .BtnColor2:active, .BtnColor2:visited, .BtnColor2:hover {
border: 2px solid #1669ac;
color: #fff !important;
background: #1669ac;
}

#Page_Hama .SecHamaCP .BtnM {
display: inline-block;
position: relative;
width: 380px;
padding: 12px 40px 15px 40px;
border-radius: 50px;
font-weight: 700;
line-height: 1.0em;
text-align: center;
}

#Page_Hama .SecHamaCP .BtnAllowRight:after {
display: block;
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -6px;
border-top: solid 1px;
border-right: solid 1px;
content: '';
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

#Page_Hama .SecHamaCP .BtnColor2:after {
border-color: #fff;
}


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

#Page_Hama .PageTitle {
margin: 0 auto 4.5rem auto;
text-align: center;
}

#Page_Hama .PageTitle img {
width: 100%;
height: auto;
}

#Page_Hama .PageTitle a:hover {
opacity: 1;
}

#Page_Hama .LeadTitle {
width: 790px;
margin: 0 auto 3.5rem auto;
font-size: 1.6rem;
font-weight: bold;
line-height: 2.3em;
}


/* ■ 動画 ------------------------------------------------------------------ */

#Page_Hama .Movie {
width: 940px;
margin: 0 auto 50px auto !important;
}


/* ■ ページ内リンク ------------------------------------------------------------------ */

#Page_Hama .InPageLink {
margin-bottom: 60px;
}

#Page_Hama .InPageLink .IndexMenu1 {
box-sizing: border-box;
border: 4px solid #e60012;
border-radius: 15px;
}

#Page_Hama .InPageLink li {
width: 33.33333%;
box-sizing: border-box;
border-right: 4px solid #e60012;
}

#Page_Hama .InPageLink li:nth-child(3n) {
border-right: none;
}

#Page_Hama .InPageLink a {
display: block;
width: 100%;
padding: 30px 0;
background: url(/images/sp/campaign/hama_sp/icon/Icon_LinkDown_Red.png) no-repeat;
background-position: 93% 50%;
background-size: 26px auto;
font-size: 23px;
font-weight: bold;
text-align: center;
line-height: 1em;
color: #e60012;
}


/* ■ ハマビーズの遊び方 ------------------------------------------------------------------ */

#Page_Hama .Play {
margin-bottom: 65px;
}

#Page_Hama .Play .LeadMain1 {
margin-bottom: 45px;
font-size: 17px;
font-weight: bold;
text-align: center;
}

#Page_Hama .Play .Photo {
margin-bottom: 15px;
}

#Page_Hama .Play li {
width: 290px;
margin-right: 35px;
}

#Page_Hama .Play li:nth-child(3n) {
margin-right: 0;
}


/* ■ 商品一覧 ------------------------------------------------------------------ */

#Page_Hama .LineUp {
margin-bottom: 60px;
}

/* ステップアップ */
#Page_Hama .SectionItemsStep {
margin-bottom: 30px;
padding: 40px 45px;
box-sizing: border-box;
border: 2px solid #e60012;
border-radius: 16px;
}

#Page_Hama .SectionItemsStep h3.Mds {
margin-bottom: 35px;
font-size: 26px;
text-align: center;
line-height: 1em;
color: #e60012;
}

#Page_Hama .ItemsStep li {
box-sizing: border-box;
border-right: 2px solid #e60012;
text-align: center;
}

#Page_Hama .ItemsStep li:nth-child(3n) {
border-right: none;
}

#Page_Hama .ItemsStep li:nth-child(1) {
width: 32%;
padding-right: 5%;
padding-bottom: 25px;
}

#Page_Hama .ItemsStep li:nth-child(2) {
width: 36%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 25px;
}

#Page_Hama .ItemsStep li:nth-child(3) {
width: 32%;
padding-left: 5%;
padding-bottom: 25px;
}

#Page_Hama .ItemsStep h4.Mds {
margin-bottom: 8px;
font-size: 22px;
color: #000;
}

#Page_Hama .ItemsStep .Lead1 {
margin-bottom: 15px;
font-size: 16px;
color: #000;
line-height: 1.6em;
}

#Page_Hama .ItemsStep .MdsAge {
width: 65%;
margin: 0 auto 15px auto;
padding: 8px 0;
border-radius: 35px;
background: #e60012;
font-size: 18px;
line-height: 1em;
color: #fff;
}

#Page_Hama .ItemsStep  .PhotoBox {
position: relative;
}

#Page_Hama .ItemsStep  .PhotoBox span {
display: inline-block;
}

#Page_Hama .ItemsStep  .PhotoBox .IconDiameter {
position: absolute;
right: -20px;
bottom: -20px;
}

#Page_Hama .ItemsStep .BtnBuy,
#Page_Hama .ItemsStep .BtnBuy2 {
margin: 40px auto 0 auto;
}

/* ハマビーズシリーズ */
#Page_Hama .SectionItemsWrap h3.Mds {
padding: 18px 0;
border-radius: 15px 15px 0 0;
background: #5aa615;
font-size: 26px;
text-align: center;
line-height: 1em;
color: #fff;
}

#Page_Hama .SectionItemsWrap h3.Mds span {
display: inline-block;
vertical-align: middle;
}

#Page_Hama .SectionItemsWrap h3.Mds .MdsDiameter {
font-size: 22px;
}

#Page_Hama .SectionItemsWrap h3.Mds .MdsDiameterIn {
position: relative;
padding-left: 34px;
}

#Page_Hama .SectionItemsWrap h3.Mds .MdsDiameterIn:before {
position: absolute;
top: 0;
left: 4px;
width: 25px;
height: 25px;
margin-top: 0px;
background: url(/images/sp/campaign/hama_sp/lineup/Icon_Diameter.png) no-repeat left center;
background-size: 25px 25px;
content: "";
}

#Page_Hama .SectionItemsUnit {
padding: 40px 40px 50px 40px;
border-radius: 0 0 15px 15px;
box-sizing: border-box;
background: #eff7fe;
}

#Page_Hama .LineUp .ItemLink {
margin-bottom: 40px;
}

#Page_Hama .LineUp .ItemLink .IndexMenu1 {
box-sizing: border-box;
background: #fff;
border: 2px solid #5aa615;
border-radius: 15px;
overflow: hidden;
}

#Page_Hama .LineUp .ItemLink li {
width: 25%;
box-sizing: border-box;
border-right: 2px solid #5aa615;
}

#Page_Hama .LineUp .ItemLink li:nth-child(4n) {
border-right: none;
}

#Page_Hama .LineUp .ItemLink a {
display: block;
width: 100%;
padding: 10px 20px 10px 0;
box-sizing: border-box;
background: url(/images/sp/campaign/hama_sp/icon/Icon_LinkDown_Green.png) no-repeat;
background-position: 95% 50%;
background-size: 22px auto;
text-align: center;
}

#Page_Hama .LineUp .ItemLink span {
display: inline-block;
vertical-align: middle;
}

#Page_Hama .LineUp .ItemLink .IconItem img {
width: 50px;
}

#Page_Hama .LineUp .ItemLink .NameItem {
font-size: 18px;
font-weight: bold;
line-height: 1em;
color: #5aa615;
}

/* 各商品セクション */
#Page_Hama .SectionItems#Item1,
#Page_Hama .SectionItems#Item3,
#Page_Hama .SectionItems#Item4 {
margin-top: 70px;
padding-top: 50px;
border-top: 2px solid #5aa615;
}

#Page_Hama .SectionItems .ItemsUnit {
margin-bottom: 40px;
padding: 40px 35px 45px 35px;
border-radius: 16px;
background: #fff;
}

#Page_Hama .SectionItems .ItemsSub {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #b7d6f1;
}

#Page_Hama .SectionItems .ItemsSub.None {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

#Page_Hama .SectionItems .ItemsSub.None2 {
padding-bottom: 0;
border-bottom: none;
}

#Page_Hama .SectionItems .ItemsEach1 li {
margin-bottom: 30px;
padding: 35px 30px;
box-sizing: border-box;
border-radius: 16px;
background: #fff;
}

#Page_Hama .SectionItems .ItemsEach1 li:last-child {
margin-bottom: 0;
}

#Page_Hama .SectionItems .ItemsEach2 li {
width: 11.5%;
margin-bottom: 20px;
margin-right: 1.142857142857143%;
}

#Page_Hama .SectionItems .ItemsEach2 li:nth-child(8n) {
margin-right: 0;
}

#Page_Hama .SectionItems .ItemsEach2 .Photo img {
width: 100%;
height: auto;
}

#Page_Hama .SectionItems .ItemsEach3 li {
width: 270px;
margin-right: 30px;
}

#Page_Hama .SectionItems .ItemsEach3 li:nth-child(2n) {
margin-right: 0;
}

#Page_Hama .SectionItems .ItemsEach2 span,
#Page_Hama .SectionItems .ItemsEach3 span {
display: block;
}

#Page_Hama .SectionItems .ItemsEach2 .Photo,
#Page_Hama .SectionItems .ItemsEach3 .Photo {
margin-bottom: 8px;
}

#Page_Hama .SectionItems .ItemsEach2 .Color,
#Page_Hama .SectionItems .ItemsEach3 .Color {
font-size: 12px;
font-weight: bold;
line-height: 1.6em;
color: #3d5fc4;
}

#Page_Hama .SectionItems .ItemsEach4 li {
width: 410px;
margin-right: 40px;
padding: 30px 0 35px 0;
box-sizing: border-box;
border-radius: 16px;
background: #fff;
text-align: center;
}

#Page_Hama .SectionItems .ItemsEach4 li:nth-child(2n)  {
margin-right: 0;
}

#Page_Hama .SectionItems h4.Mds {
margin-bottom: 40px;
font-size: 28px;
color: #5aa615;
text-align: center;
line-height: 1.4em;
}

#Page_Hama .SectionItems h5.Mds {
font-size: 24px;
text-align: center;
color: #e60012;
}

#Page_Hama .SectionItems .Lead1 {
margin-bottom: 15px;
font-size: 2rem;
font-weight: bold;
text-align: center;
color: #000;
}

#Page_Hama .SectionItems .Lead1 .Item_Price_Yen2 {
display: inline-block;
margin-left: 0.2rem;
margin-right: 0.2rem;
font-size: 1.6rem;
}

#Page_Hama .SectionItems .MsdBox {
margin-bottom: 20px;
}

#Page_Hama .SectionItems .MsdBox h5.Mds,
#Page_Hama .SectionItems .MsdBox .Lead1 {
display: inline-block;
margin: 0;
text-align: left;
vertical-align: middle;
}

#Page_Hama .SectionItems .MsdBox h5.Mds {
margin-right: 4%;
}

#Page_Hama .SectionItems .BtnBuy {
margin: 20px auto 0 auto;
text-align: center;
}


/* ■ レシピ集 ------------------------------------------------------------------ */

#Page_Hama .Product {
margin-bottom: 50px;
}

#Page_Hama .Product img {
width: 100%;
height: auto;
}

/*
#Page_Hama .Product .ProductEach {
margin-bottom: 45px;
}
*/

#Page_Hama .Product .ProductEach li {
width: 23.5%;
margin-right: 2%;
}

#Page_Hama .Product .ProductEach li:nth-child(4n) {
margin-right: 0;
}

#Page_Hama .Product .ProductEach .Photo {
margin-bottom: 5px;
}

#Page_Hama .Product .ProductEach .Lead1 {
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 1.6em;
color: #5aa615;
}

#Page_Hama .Product .BtnGallery {
width: 45%;
margin: 45px auto 0 auto; 
padding: 15px 0 15px 4%;
background: #5aa615 url(/images/sp/common/icon/Icon_LinkFwd_White.png) no-repeat;
background-size: 22px auto;
background-position: 5% 50%;
border-radius: 35px;
font-size: 20px;
line-height: 1em;
color: #fff;
}

/* デザインレシピ */
#Page_Hama .Product .Recipe {
margin-top: 70px;
}

#Page_Hama .Product .Recipe h4.Mds {
padding: 15px 0;
background: #5aa615;
border-radius: 16px 16px 0 0;
font-size: 22px;
text-align: center;
color: #fff;
}

#Page_Hama .Product .RecipeUnit {
padding: 35px 45px;
box-sizing: border-box;
border-left: 2px solid #5aa615;
border-right: 2px solid #5aa615;
border-bottom: 2px solid #5aa615;
border-radius: 0 0 10px 10px;
}

#Page_Hama .Product .Recipe .LeadMain1 {
margin-bottom: 45px;
font-size: 17px;
font-weight: bold;
text-align: center;
}

#Page_Hama .Product .Recipe .ClassEach li {
box-sizing: border-box;
border-right: 2px solid #5aa615;
}

#Page_Hama .Product .Recipe .ClassEach li:nth-child(3n) {
border-right: none;
}

#Page_Hama .Product .Recipe .ClassEach li:nth-child(1) {
width: 32%;
padding-right: 5%;
padding-bottom: 25px;
}

#Page_Hama .Product .Recipe .ClassEach li:nth-child(2) {
width: 36%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 25px;
}

#Page_Hama .Product .Recipe .ClassEach li:nth-child(3) {
width: 32%;
padding-left: 5%;
padding-bottom: 25px;
}

#Page_Hama .Product .ClassEach .MdsClass {
margin-bottom: 15px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #5aa615;
}

#Page_Hama .Product .BtnRecipe {
margin-top: 25px;
padding: 10px 0 10px 7%;
background: #5aa615 url(/images/sp/common/icon/Icon_LinkFwd_White.png) no-repeat;
background-size: 22px auto;
background-position: 5% 50%;
border-radius: 35px;
font-size: 16px;
line-height: 1em;
color: #fff;
}



/* ■ メーカー紹介 ------------------------------------------------------------------ */

#Page_Hama .Maker {
margin-bottom: 70px;
padding: 40px 30px;
box-sizing: border-box;
border: 2px solid #e60012;
border-radius: 15px;
}

#Page_Hama .Maker .Mds {
margin-bottom: 25px;
line-height: 1em;
}

#Page_Hama .Maker .Mds .Main,
#Page_Hama .Maker .Mds .IconFrom {
display: inline-block;
vertical-align: middle;
}

#Page_Hama .Maker .Mds .Main {
margin-top: 7px;
margin-right: 35px;
color: #e60012;
font-size: 24px;
}

#Page_Hama .Maker .LRBox {
width: 880px;
}

#Page_Hama .Maker .LBox {
width: 410px;
}

#Page_Hama .Maker .RBox {
width: 435px;
}

#Page_Hama .Maker .LeadMain1 {
margin-bottom: 25px;
}

#Page_Hama .Maker ol li {
margin-bottom: 10px;
font-size: 13px;
line-height: 1.6em;
}

#Page_Hama .Maker ol li:before {
padding-right: .5em;
font-weight: bold;
color: #e60012;
}

#Page_Hama .Maker ol li:last-child {
margin-bottom: 0;
}

/* ■ 取り扱い店舗案内 ------------------------------------------------------------------ */

#Page_Hama #Shop_Stock_Notice .Lead {
color: #fff;
}


/* ■ SNSシェアボタン ------------------------------------------------------------------------------------ */
.SocialBtn {
display: table;
}

.SocialBtn li {
margin: 0;
padding: 0 0 0 10px;
display: table-cell;
list-style: none;
vertical-align: top;
}

.SocialBtn li:first-child {
padding-left: 0 !important;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}

.SocialBtnCenter {
margin: 75px auto 0 auto;
}