@charset "utf-8";


/* ボブルス */


/* 
TOPページ
詳細ページ
*/


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

#Page_Bobles,
#Page_BoblesDetail {
width: 940px;
margin: 0 auto 80px auto;
}

#Page_Bobles p,
#Page_BoblesDetail p {
font-size: 14px;
line-height: 1.8em;
}

#Page_Bobles a,
#Page_BoblesDetail a {
display: block;
color: #000;
text-decoration: none;
}

/* フォント */
#Page_Bobles .W1,
#Page_BoblesDetail .W1 {
font-family: 'Roboto Condensed', sans-serif;
}

/* ボタン */
#Page_Bobles .Btn,
#Page_BoblesDetail .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_Bobles .Btn1,
#Page_BoblesDetail .Btn1 {
margin-top: 15px;
/* padding: 12px 0 12px 8%; */
padding: 12px 0 12px 3%;
font-size: 16px;
background: #d25183 url(/images/sp/common/icon/Icon_LinkFwd_White.png) no-repeat;
background-position: 6% 50%;
background-size: 20px auto;
color: #fff;
}

#Page_Bobles .Btn2,
#Page_BoblesDetail .Btn2 {
width: 90%;
margin: 0 auto;
padding: 15px 0 15px 2%;
background: #f0f1f1 url(/images/sp/campaign/bobles_ver2_sp/Icon_LinkFwd1.png) no-repeat;
background-size: 26px auto;
background-position: 5% 50%;
border-radius: 80px;
font-size: 18px;
line-height: 1.4em;
color: #000;
}

#Page_Bobles .Btn3,
#Page_BoblesDetail .Btn3 {
width: 90%;
margin: 0 auto;
padding: 12px 0 12px 7%;
background: #f0f1f1 url(/images/sp/campaign/bobles_ver2_sp/Icon_LinkFwd2.png) no-repeat;
background-size: 20px auto;
background-position: 5% 50%;
border-radius: 80px;
font-size: 18px;
line-height: 1.4em;
color: #000;
}

/* NEWアイコン */
#Page_Bobles .IconNew,
#Page_BoblesDetail .IconNew {
position: absolute;
border-radius: 50%;
background: #3a8683;
font-weight: 400;
color: #fff;
text-align: center;
letter-spacing: 0.1em;
}

#Page_Bobles .IconNew span,
#Page_BoblesDetail .IconNew span {
display: inline-block;
}

/* 商品リスト */
#Page_Bobles .ItemsList li {
position: relative;
width: 30%;
margin-right: 5%;
margin-bottom: 70px;
}

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

li:nth-child(3n+1):nth-last-child(-n+3),
#Page_Bobles .ItemsList li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
margin-bottom: 0 !important;
}

#Page_Bobles .ItemsList .Photo img ,
#Page_BoblesDetail .ItemsList .Photo img {
width: 100%;
height: auto;
}

#Page_Bobles .ItemsList .IconNew {
top: 10px;
left: 10px;
width: 60px;
height: 60px;
font-size: 16px;
line-height: 60px;
}

#Page_Bobles .ItemsList .IconNew span {
margin-top: 2px;
margin-left: 2px;
}

#Page_BoblesDetail .ItemsList li {
width: 22%;
margin-right: 4%;
}

#Page_BoblesDetail .ItemsList li:nth-child(4n) {
margin-right: 0;
}

/* 商品ページメニュー */
#Page_BoblesDetail .ItemsNav.Top {
margin-bottom: 55px;
}

#Page_BoblesDetail .ItemsNav.Bottom {
margin-top: 90px;
}

#Page_BoblesDetail .ItemsMenu {
display: flex;
width: 100%;
justify-content: space-between;
}

#Page_BoblesDetail .ItemsMenu li {
float: none;
width: 13.5%;
text-align: center; 
}
 
#Page_BoblesDetail .ItemsMenu a {
display: block;
width: 100%;
padding: 10px 0;
box-sizing: border-box;
color: #000;
background: #f5f5f5;
}

#Page_BoblesDetail .ItemsMenu a:hover,
#Page_BoblesDetail .ItemsMenu .Current {
background: #d4f1f0;
}

#Page_BoblesDetail .ItemsMenu .Name {
font-size: 16px;
font-weight: bold;
line-height: 1em;
}

#Page_BoblesDetail .ItemsMenu .Photo {
margin-bottom: 3px;
}

#Page_BoblesDetail .ItemsMenu .Photo img {
width: 55px;
height: auto;
}



/* ■ TOPページ ------------------------------------------------------------------ */


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

#Page_Bobles .KeyVisual {
width: 940px;
height: 350px;
margin-bottom: 55px;
padding: 70px 0 0 45px;
/* padding: 45px 0 0 45px; */
box-sizing: border-box;
background: #f6f6f6 url(/images/campaign/bobles_ver2/Ph_KeyVisual.jpg?ver=230418) left top;
}

#Page_Bobles .PageTitle span {
display: block;
}

#Page_Bobles .PageTitle .Sub {
margin-bottom: 12px;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}

#Page_Bobles .PageTitle .Main {
font-size: 42px;
line-height: 1.2em;
color: #3a8683;
}

#Page_Bobles .LeadTitle {
width: 770px;
margin: 0 auto 50px auto;
font-size: 20px;
font-weight: bold;
line-height: 1.8em;
}

/* オンライン限定 */
#Page_Bobles .IconLimited {
display: inline-block;
margin-bottom: 10px;
padding: 10px 10px;
border-radius: 24px;
background: #d25183;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 1em;
color: #fff;
}

#Page_Bobles .LinkBelow a {
color: #0059b5;
}


/* デンマークの親子の様子をのぞいてみよう！ ------------------------------------------------------------------ */

#Page_Bobles .SectionLook {
margin-bottom: 30px;
padding: 25px 30px;
box-sizing: border-box;
border: 1px solid #becfce;
}

#Page_Bobles .SectionLook .LBox {
padding: 25px 0 0 20px;
}

#Page_Bobles .SectionLook .RBox {
width: 460px;
}

#Page_Bobles .SectionLook .MdsSub {
position: relative;
display: inline-block;
margin-bottom: 14px;
padding: 9px 10px;
box-sizing: border-box;
background-color: #3a8683;
border-radius: 24px;
font-size: 22px;
text-align: center;
line-height: 1em;
color: #fff;
}

#Page_Bobles .SectionLook .MdsSub:before {
position: absolute;
margin: 0;
left: 32%;
bottom: -8px;
width: 0;
height: 0;
content: "";
border-top: 12px solid #3a8683;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
transform: rotate(-30deg);
}

#Page_Bobles .SectionLook h2.Mds {
margin-bottom: 15px;
font-size: 29px !important;
line-height: 1.3em;
}

#Page_Bobles .SectionLook .Photo {
text-align: center;
}

#Page_Bobles .SectionLook .Movie {
margin: 0 !important;
}


/* 体スクスク・運動プログラム ------------------------------------------------------------------ */

#Page_Bobles .SectionProgram {
margin-bottom: 45px;
padding: 35px 30px;
box-sizing: border-box;
background: #f5f5f5;
}

#Page_Bobles .SectionProgram .MdsSub {
margin-bottom: 15px;
font-weight: bold;
text-align: center;
}

#Page_Bobles .SectionProgram .MdsSub span {
display: inline-block;
position: relative;
font-size: 26px;
line-height: 1.4em;
color: #3a8683;
}

#Page_Bobles .SectionProgram .MdsSub span:before,
#Page_Bobles .SectionProgram .MdsSub span:after {
display: block;
position: absolute;
top: 0px;
width: 3px;
height: 44px;
background: #3a8683;
content: "";
}

#Page_Bobles .SectionProgram .MdsSub span:before {
left: -24px;
transform: rotate(-32deg); 
}

#Page_Bobles .SectionProgram .MdsSub span:after {
right: -21px;
transform: rotate(32deg); 
}

#Page_Bobles .SectionProgram h2.Mds {
margin-bottom: 28px;
font-size: 40px !important;
text-align: center;
line-height: 1em;
}

#Page_Bobles .SectionProgram .DLVert dl {
float: left;
width: 19%;
margin-right: 1.25%;
}

#Page_Bobles .SectionProgram .DLVert dl:nth-child(5n) {
margin-right: 0;
}


#Page_Bobles .SectionProgram .DLVert dt {
margin-bottom: 10px;
}

#Page_Bobles .SectionProgram .DLVert dt div {
text-align: center;
}

#Page_Bobles .SectionProgram .DLVert dt span {
display: block;
line-height: 1em;
}

#Page_Bobles .SectionProgram .DLVert .Icon {
margin-bottom: 20px;
}

#Page_Bobles .SectionProgram .DLVert dt .MdsBox .Main {
margin-bottom: 15px;
font-size:  15px;
line-height: 1em;
color: #3a8683;
}

#Page_Bobles .SectionProgram .DLVert dt .MdsBox .Sub {
margin-bottom: 20px;
font-size:  14px;
line-height: 1.5em;
}

#Page_Bobles .SectionProgram .DLVert dd {
font-size:  13px;
line-height: 1.7em;
}



/* 商品ラインナップ ------------------------------------------------------------------ */

#Page_Bobles .SectionItems {
padding-top: 30px;
border-top: 5px solid #3a8683;
/*
background: url(/images/campaign/bobles_ver2/Ph_Image.jpg?ver=210205) no-repeat;
background-position: 90% 102%;
*/
}

#Page_Bobles .SectionItems h2.Mds {
margin-bottom: 4px;
font-size: 36px !important;
text-align: center;
color: #3a8683;
}

#Page_Bobles .SectionItems .LeadMain {
margin: 0 0 25px 0;
font-size: 22px;
text-align: center;
}

#Page_Bobles .SectionItems h3.Mds {
margin-bottom: 1px;
position: relative;
line-height: 1em;
}

#Page_Bobles .SectionItems h3.Mds span {
display: inline-block;
}

#Page_Bobles .SectionItems h3.Mds .Main {
margin-bottom: 0;
font-size: 19px;
line-height: 1em;
}

#Page_Bobles .SectionItems h3.Mds .Sub {
position: absolute;
top: 0;
right: 0;
margin-top: -12%;
}

#Page_Bobles .SectionItems h3.Mds .Sub img {
width: auto;
height: 70px;
}

#Page_Bobles .SectionItems .Photo {
margin-bottom: 20px;
}

#Page_Bobles .SectionItems .Price {
font-size: 23px;
font-weight: bold;
letter-spacing: 0.05em;
color: #d25183;
}

#Page_Bobles .SectionItems .Price span {
font-size: 14px;
letter-spacing: normal;
}

#Page_Bobles .Btn2 {
width: 45%;
margin: 0 auto;
font-size: 20px;
line-height: 1.4em
}
	
	

/* ボブルス商品一覧はこちら ------------------------------------------------------------------ */

#Page_Bobles .BtnList {
margin-top: 70px;
padding-top: 30px;
border-top: 1px solid #d7d7d7;
}



/* ■ 詳細ページ ------------------------------------------------------------------ */


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

#Page_BoblesDetail .SectionMain {
margin-bottom: 70px;
}

#Page_BoblesDetail .SectionMain .LRBox {
margin-bottom: 45px;
}

#Page_BoblesDetail .SectionMain .LBox {
position: relative;
width: 430px;
}

#Page_BoblesDetail .SectionMain .RBox {
width: 470px;
}

#Page_BoblesDetail .SectionMain .IconNew {
top: 10px;
left: 10px;
width: 70px;
height: 70px;
font-size: 20px;
line-height: 70px;
}

#Page_BoblesDetail .SectionMain .IconNew span {
margin-top: 2px;
margin-left: 3px;
}

#Page_BoblesDetail .SectionMain h1.PageTitle {
margin-bottom: 20px;
color: #3a8683;
}

#Page_BoblesDetail .SectionMain h1.PageTitle span {
display: block;
}

#Page_BoblesDetail .SectionMain h1.PageTitle .Main {
margin-bottom: 15px;
font-size: 40px;
line-height: 1em;
}

#Page_BoblesDetail .SectionMain h1.PageTitle .Sub {
font-size: 22px;
font-weight: normal;
line-height: 1em;
letter-spacing: 0.07em;
}

#Page_BoblesDetail .SectionMain h2.Mds {
margin-bottom: 15px;
font-size: 24px !important;
line-height: 1.5em;
}



/* 商品ラインナップ ------------------------------------------------------------------ */

#Page_BoblesDetail .SectionItems {
padding-top: 25px;
border-top: 4px solid #3a8683;
}

#Page_BoblesDetail .SectionItems h2.Mds {
margin-bottom: 25px;
font-size: 30px !important;
line-height: 1.5em !important;
}

#Page_BoblesDetail .SectionItems h2.Mds span {
display: block;
}

#Page_BoblesDetail .SectionItems .Price {
margin-bottom: 50px;
font-size: 20px;
font-weight: bold;
line-height: 1em;
color: #d25183;
}

#Page_BoblesDetail .SectionItems .Price span {
display: inline-block;
margin: 0 2px 0 0;
font-size: 30px;
letter-spacing: 0.03em;
}

#Page_BoblesDetail .SectionItems a {
color: #000;
}

#Page_BoblesDetail .SectionItems .Color {
text-align: center;
}

#Page_BoblesDetail .SectionItems li {
position: relative;
}

#Page_BoblesDetail .SectionItems .Icon {
position: absolute;
top: -1px;
left: 0;
}

#Page_BoblesDetail .SectionItems .Icon img {
width: 70px;
height: auto;
}

#Page_BoblesDetail .SectionItems .Btn1 {
width: 75%;
margin: 15px auto 0 auto; 
padding: 9px 0 9px 8%;
font-size: 14px;
}

/* なくなり次第終了 */
#Page_BoblesDetail .SectionItems.EndSoonItems {
margin-top: 40px;
padding: 30px 35px 40px 35px;
box-sizing: border-box;
border: 2px solid #3a8683;
}		

/* お品切れ */
#Page_BoblesDetail .SectionItems .SoldOut {
margin-top: 15px;
text-align: center;
font-size: 17px;
font-weight: bold;
color: #e90000;
}



/* 「ボブルス」特集TOPへ ------------------------------------------------------------------ */

#Page_BoblesDetail .BtnList {
margin-top: 45px;
padding-top: 35px;
border-top: 1px solid #d7d7d7;
}

#Page_BoblesDetail .Btn3 {
width: 30%;
margin: 0;
padding-left: 0;
}