@charset "UTF-8";



/*----------------------------------------------*/
/*----------------------------------------------*/
/*FM COCOLO  [INDEX PAGE]*/
/*----------------------------------------------*/
/*Created: 2015.10.01*/
/*Last Update:	2016.12.14*/
/*----------------------------------------------*/




/*INDEX*/

/*[INDEX PAGE]*/

/*[SP Frame]*/

/*[Main Slide Panel]*/

/*[Main Banners]*/

/*[Topics]*/

/*[Blog Entry]*/

/*[Whole Earth Event]*/

/*[Twitter Timeline]*/

/*[Under Banners]*/











/*----------------------------------------------*/
/*[INDEX PAGE]*/
/*----------------------------------------------*/



/*----------------------------------------------*/
/*[Special Frame]*/
.sp-content {
width:auto;
height:auto;
margin:0;
padding:0;
}
.sp-content .slide-pr {
width:auto;
}
.sp-content .slide-pr > .inner-frame {
width:auto;
margin:0;
}





@media screen and (min-width:360px) and  (max-width:640px) {
.slide-pr > .inner-frame {
width:auto;
max-width:560px;
margin:0 auto 1.5em;
}
#slider-frame-spn .slide-pr > .inner-frame { /*( Add 2016.12.14 )*/
margin:0 auto;
}

.sp-content .main-banners {
float:none;
margin:1.5em auto;
width:350px;
}


}


@media screen and (min-width:641px) and (max-width:1024px) {
#slider-frame-spn.slider-frame {
width:auto;
margin:0 auto;
padding:1.4em 0 0;
}

#slider-frame-spn .slide-pr > .inner-frame {
max-width:560px;
margin:0 auto;
}


}


@media screen and (min-width:1025px) {
.sp-content {
width:auto;
margin:0;
padding:0;
}

.sp-content .slide-pr > .inner-frame {
max-width:560px;
margin-bottom:1.6rem;
}


}
/*----------------------------------------------*/





/*
[Main Slide Panel]
*/

.slide-pr {
width:auto;
height:auto;
margin:0;
padding:0;
display:none;
}
.slide-pr > .inner-frame {
width:auto;
height:auto;
margin:0;
padding:0;
background:#FFF;
}

/*(Slide List)*/
.slide-pr .slide-list {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
position:relative;
}
.slide-pr .slide-list li {
margin:0;
padding:0;
}










/*[Main Banners]*/

/*(Frame)*/
.main-banners {
width:auto;
height:auto;
margin:0;
padding:0;
display:none;
}
.main-banners > .inner-frame {
width:auto;
height:auto;
margin:0 0 2em;
padding:0;
}


/*[ADS and FLASH Banner]*/
.main-banners .ads-box {
width:auto;
height:auto;
margin:0;
padding:0;
}
.main-banners .ads-box > .inner-box {
width:auto;
height:auto;
margin:0 auto 1em;
padding:0;
text-align:center;
}


/*[Filler Banner]*/
.main-banners .filler-box {
width:auto;
height:auto;
margin:0;
padding:0;
}
/*(Filler List)*/
.main-banners .filler-box .fb-list,
.main-banners .filler-box .fb-list li {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.main-banners .filler-box .fb-list li {
text-align:center;
margin-top:.5em;
}
main-banners .filler-box .fb-list li:first-child {
margin-top:0;
}
.main-banners .filler-box .fb-list li img {
width:100%;
}









/*[Each Corner Setting]*/

/*(Corner Frame)*/
.in-content {
width:auto;
height:auto;
margin:0;
padding:0;
}
.in-content >  .inner-frame {
width:auto;
height:auto;
margin:0 0 1.6em;
padding:0;
}



/*
[Corner Header]
*/
/*(Frame)*/
#corner-header.corner-header {
width:auto;
height:auto;
margin:0;
padding:0;
position:relative;
}

/*-- [Text Header] --*/
#corner-header.corner-header > .inner-frame {
width:auto;
height:auto;
margin:0;
padding:1em;
}

/*[Pages Title]*/
#corner-header.corner-header .corner-ttl {
font-size:1.05em;
line-height:1.4em;
font-weight:bold;
margin:0;
padding:0;
}
#corner-header.corner-header .corner-ttl small {
font-size:.75em;
line-height:1.5em;
color:#666;
margin-left:1.6em;
letter-spacing:0;
}
/*[Second Contents]*/
#corner-header.corner-header.corner-sm > .inner-frame {
padding:.9em;
}
#corner-header.corner-header.corner-sm .corner-ttl {
font-size:1em;
}


/*[Extra Buttons]*/
#corner-header.corner-header .btn-box {
position:absolute;
top:1em;
right:1em;
}


@media screen and (min-width:320px) and (max-width:640px) {
.in-content >  .inner-frame {
border:none;
}


}


@media screen and (min-width:320px) and (max-width:480px) {
#corner-header.corner-header > .inner-frame {
padding:.7em;
}

#corner-header.corner-header .corner-ttl small {
display:block;
margin-left:0;
padding-top:.2em;
}


}


@media screen and (min-width:641px) and (max-width:839px) {
#corner-header.corner-header .corner-ttl small {
display:block;
margin-left:0;
padding-top:.3em;
}


}


@media screen and (min-width:900px) and (max-width:1023px) {
#corner-header.corner-header .corner-ttl small {
display:block;
margin-left:0;
padding-top:.3em;
}


}




/*
[Corner Footer]
*/

/*(Frame)*/
#corner-footer.corner-footer {
width:auto;
height:auto;
margin:0;
padding:0;
border-top:none;
}
#corner-footer.corner-footer > .inner-frame {
width:auto;
height:auto;
margin:0;
padding:.5em 1em;
position:relative;
text-align:right;
}


@media screen and (max-width:640px) {
#corner-footer.corner-footer .btn-box .bc-white2 {
border:none;
margin:0;
padding:0;
}


}


/*[Each Content Box Setting]*/
.in-content >  .inner-frame > .inner-box {
width:auto;
height:auto;
margin:0;
padding:1em .7em;
}










/*
[Topics]
*/
/*(Corner Frame)*/
#topics.in-content >  .inner-frame {
background:url(../images/bg_con1.png) repeat 0 0;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
padding-bottom:1em;
}

/*-- [Text Header] --*/
#topics #corner-header.corner-header > .inner-frame {
width:auto;
height:auto;
margin:0;
padding:1em;
background:#0080a7;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
}
/*[Pages Title]*/
#topics #corner-header.corner-header .corner-ttl,
#topics #corner-header.corner-header .corner-ttl small {
color:#FFF;
}


/*[Topics List]*/
/*(List Box)*/
.topics-list,
.topics-list .pl-box {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.topics-list .pl-box {
float:left;
padding:0;
margin:0;
width:33.33333%;
}
/*(Detail Box /Inner Box)*/
.topics-list .pl-box .detail-box {
width:auto;
height:auto;
margin:0 1px 3px;
padding:0;
background:#FFF;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
position:relative;
box-shadow:0 0 2px #EFEFEF;
-webkit-box-shadow:0 0 2px #EFEFEF;
-moz-box-shadow:0 0 2px #EFEFEF;
-ms-box-shadow:0 0 2px #EFEFEF;
-o-box-shadow:0 0 2px #EFEFEF;
}
.topics-list .pl-box:hover {
text-decoration:none;
}


/*(In Box)*/
.topics-list .pl-box .detail-box .in-box {
width:auto;
height:auto;
padding:3px 0 0;
margin:0;
}

/*(Thumbnail)*/
.pl-thumbnail {
text-align:center;
margin:0 3px .8em;
padding:1em .7em;
background:#e0f0f4;
}
.pl-thumbnail img {
width:100%;
max-width:150px;
}


/*(List Header)*/
.pl-category {
width:auto;
height:auto;
padding:.1em .3em;
margin:0 .7em 1em;
font-size:.75em;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
text-transform:uppercase;
float:left;
}
/*(Back Ground)*/
.pl-category.bg-topics {
background:#0080a7;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
}


/*[Date]*/
.pl-date {
clear:both;
font-size:.75em;
padding:0 .7em;
margin-bottom:.4em;
color:#333;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:0;
word-break:break-all;
text-transform:capitalize;
}


/*(List Detail)*/
.topics-list .pl-box .detail-box .in-box dl {
width:auto;
height:auto;
margin:0;
padding:0 .7em 1em;
}
.pl-title {
font-size:.9em;
color:#0080a7;
letter-spacing:0;
min-height:6em;
word-break:break-all;
}
.pl-copy {
border-top:1px dotted #CCC;
padding-top:.8em;
font-size:.8em;
line-height:1.5em;
color:#666666;
letter-spacing:0;
word-break:break-all;
}


.pl-box a:hover {
text-decoration:none;
}
.topics-list .pl-box:hover .pl-title {
color:#603813;
}
.topics-list .pl-box:hover .pl-thumbnail {
background:#f3f5db;
}


/*[New Icon]*/
.icn-new {
width:65px;
height:auto;
margin:0;
padding:0;
position:absolute;
top:0;
right:0;
z-index:2222;
}
.icn-new img {
width:100%;
}


/*[Under Button]*/
.bc-topics {
color:#FFF;
border:2px solid #99ccdc;
background:#0080a7;
}
.bc-topics:hover {
color:#FFF;
text-decoration:none;
}



@media screen and (min-width:320px) and (max-width:480px) {
.topics-list .pl-box {width:50%;}

/*(List Detail)*/
.pl-title {
font-size:.9em;
background:#FFF;
margin:0 0 1em;
min-height:0;
}


}


@media screen and (min-width:481px) and (max-width:640px) {
/*(List Detail)*/
.pl-title {
font-size:.8em;
background:#FFF;
margin:0 0 1.2em;
padding:0;
min-height:0;
}


}


@media screen and (min-width:641px) and (max-width:1024px) {
.topics-list .pl-box {width:50%;}

}


@media screen and (min-width:1025px) {
.topics-list .pl-box {width:33.33333%;}

}


@media screen and (max-width:640px) {
/*-- [Text Header] --*/
#topics #corner-header.corner-header > .inner-frame {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}


}










/*
[Blog Entry]
*/
/*(Corner Frame)*/
#blog_entry.in-content >  .inner-frame {
background:url(../images/bg_con2.png) repeat 0 0;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
padding-bottom:1em;
}

/*-- [Text Header] --*/
#blog_entry #corner-header.corner-header > .inner-frame {
width:auto;
height:auto;
margin:0;
padding:1em;
background:#b96e16;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
}
/*[Pages Title]*/
#blog_entry #corner-header.corner-header .corner-ttl,
#blog_entry #corner-header.corner-header .corner-ttl small {
color:#FFF;
}


/*[Blog Entry List]*/
/*(List Box)*/
.blog-entry-list,
.blog-entry-list .be-box {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.blog-entry-list .be-box {
float:left;
padding:0;
margin:0;
width:33.33333%;
}


/*(Detail Box /Inner Box)*/
.blog-entry-list .be-box .detail-box {
width:auto;
height:auto;
margin:0 1px 3px;
padding:0;
background:#FFF;
border:1px solid #E6E6E6;
letter-spacing:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
position:relative;
box-shadow:0 0 2px #EFEFEF;
-webkit-box-shadow:0 0 2px #EFEFEF;
-moz-box-shadow:0 0 2px #EFEFEF;
-ms-box-shadow:0 0 2px #EFEFEF;
-o-box-shadow:0 0 2px #EFEFEF;
}

/*(In Box)*/
.blog-entry-list .be-box .detail-box .in-box {
width:auto;
height:auto;
padding:0;
margin:0;
border-top:5px solid #0080a7;
}

/*(Thumbnail)*/
.be-thumbnail {
text-align:center;
margin:0 auto .8em;
padding:1em .7.em;
}
.be-thumbnail img {
width:100%;
}


/*[Data]*/
.be-date {
font-size:.75em;
margin-bottom:.3em;
padding:0 12px .7em;
color:#333;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:0;
word-break:break-all;
}


/*(Program Name)*/
.be-program {
width:auto;
height:auto;
padding:0 12px .3em;
margin:0;
font-size:.8em;
line-height:1.2em;
font-weight:bold;
color:#603813;
text-transform:uppercase;
}


/*(List Detail)*/
.blog-entry-list .be-box .detail-box .in-box dl {
width:auto;
height:auto;
margin:0;
padding:0 12px 1em;
}

.be-title {
font-size:.9em;
color:#0080a7;
letter-spacing:0;
margin-bottom:.7em;
word-break:break-all;
}
.blog-entry-list .be-box:hover .be-title {
color:#603813;
text-decoration:none;
}

.be-copy {
font-size:.8em;
line-height:1.5em;
color:#666666;
letter-spacing:0;
word-break:break-all;
}


.be-box a:hover {
text-decoration:none;
}
.blog-entry-list .be-box:hover .detail-box {
background:#f3f5db;
}
.blog-entry-list .be-box:hover .detail-box .in-box {
border-top:5px solid #87aa59;
}
.blog-entry-list .be-box:hover .be-title {
color:#603813;
}


/*[Under Button]*/
.bc-blog-entry {
color:#FFF;
border:2px solid #d5a873;
background:#b96e16;
}
.bc-blog-entry:hover {
color:#FFF;
text-decoration:none;
}


@media screen and (min-width:320px) and (max-width:480px) {
.blog-entry-list .be-box {width:50%;}


}


@media screen and (min-width:320px) and (max-width:640px) {
/*(List Detail)*/
.be-title {
font-size:.9em;
}

.be-copy {
display:none;
}


}


@media screen and (min-width:641px) and (max-width:1024px) {
.blog-entry-list .be-box {width:50%;}


}


@media screen and (min-width:1025px) {
.blog-entry-list .be-box {width:33.33333%;}


}


@media screen and (max-width:640px) {
/*-- [Text Header] --*/
#blog_entry #corner-header.corner-header > .inner-frame {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}


}











/*
[Whole Earth Event]
*/
/*(Corner Frame)*/
#whole-earth-event.in-content >  .inner-frame {
background:url(../images/bg_con3.png) repeat 0 0;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
padding-bottom:1em;
}
#whole-earth-event.in-content >  .inner-frame a:hover {
text-decoration:none;
}

/*-- [Text Header] --*/
#whole-earth-event #corner-header.corner-header > .inner-frame {
width:auto;
height:auto;
margin:0;
background:#69952f url(../../shared/images/gn_icn_arrow_white.png) no-repeat right;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
}
/*[Pages Title]*/
#whole-earth-event #corner-header.corner-header .corner-ttl,
#whole-earth-event #corner-header.corner-header .corner-ttl small {
color:#FFF;
}


/*(Sales List)*/
.sales-list {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.sales-list > li {
width:auto;
height:auto;
margin:0 0 .5em;
padding:0;
}
.sales-list > li:last-child {
margin:0;
}

/*(Sales Box)*/
.sales-list .wes-box {
width:auto;
height:auto;
margin:0;
padding:0;
background:#FFF;
box-shadow:0 0 2px #EFEFEF;
-webkit-box-shadow:0 0 2px #EFEFEF;
-moz-box-shadow:0 0 2px #EFEFEF;
-ms-box-shadow:0 0 2px #EFEFEF;
-o-box-shadow:0 0 2px #EFEFEF;
}
.sales-list .wes-box:hover {
background:#f3f5db;
}
/*[Title/Name]*/
.sales-list .wes-box .wesb-ttl {
font-size:.85em;
font-weight:bold;
margin:0;
padding:.3em .4em;
color:#FFF;
background:#69952f;
}
/*[Image]*/
.sales-list .wes-box .wesb-pics {
width:75px;
height:auto;
margin:0;
padding:0;
float:left;
}
.sales-list .wes-box .wesb-pics img {
width:100%;
}
/*[Detail]*/
.sales-list .wes-box .wesb-list {
width:auto;
height:auto;
margin:0 .5em 0 85px;
padding:.5em .5em .5em 1.2em;
border-top:1px solid #CCC;
}
.sales-list .wes-box .wesb-list:first-child {
border-top:none;
}
.sales-list .wes-box .wesb-list .wesb-list-txt {
font-size:.72em;
line-height:1.4em;
margin:0;
padding:.1em 0;
letter-spacing:0;
color:#333;
word-break:break-all;
}


@media screen and (min-width:641px) and (max-width:839px) {
.corner-header .corner-ttl .logo-wes {width:70%;}


}


@media screen and (min-width:900px) and (max-width:1023px) {
.corner-header .corner-ttl .logo-wes {width:70%;}


}


@media screen and (max-width:768px) {
/*[Title/Name]*/
.sales-list .wes-box .wesb-ttl {font-size:.8em;}


}


@media screen and (max-width:640px) {
/*-- [Text Header] --*/
#whole-earth-event #corner-header.corner-header > .inner-frame {
background-image:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}


}










/*
[Twitter Timeline]
*/
#twitter.in-content > .inner-frame {
border-radius:7px;
padding:8px;
background:#FFF;
}

/*(Timeline)*/
.twitter-timeline {
height:560px;
}


@media screen and (max-width:640px) {
#twitter.in-content {
display:none;
}


}










/*
[FM COCOLO Original Content]
*/
/*(Corner Frame)*/
#service.in-content >  .inner-frame {
background:url(../images/bg_con4.png) repeat 0 0;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
padding-bottom:1em;
}
#service.in-content >  .inner-frame a:hover {
text-decoration:none;
}

/*-- [Text Header] --*/
#service #corner-header.corner-header > .inner-frame {
width:auto;
height:auto;
margin:0;
background:#E39A4E;
border-radius:7px 7px 0 0;
-webkit-border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
-ms-border-radius:7px 7px 0 0;
-o-border-radius:7px 7px 0 0;
}
/*[Pages Title]*/
#service #corner-header.corner-header .corner-ttl,
#service #corner-header.corner-header .corner-ttl small {
color:#FFF;
}


/*(Service List)*/
.service-list,
.service-list li {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.service-list li {
float:left;
width:33.33333%;
}

/*(Service List Box*/
.service-list .service-icon {
width:auto;
height:auto;
margin:.5em;
padding:0;
text-align:center;
}
.service-list .service-icon img {
width:100%;
max-width:100px;
}

.service-list .service-icon a:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}


@media screen and (min-width:480px) and (max-width:567px) {
.service-list li {width:25%;}

}


@media screen and (min-width:568px) and (max-width:640px) {
.service-list li {width:20%;}

}


@media screen and (min-width:641px) and (max-width:767px) {
.service-list li {width:50%;}

}


@media screen and (min-width:901px) and (max-width:1023px) {
.service-list li {width:50%;}

}


@media screen and (max-width:640px) {
/*-- [Text Header] --*/
#service #corner-header.corner-header > .inner-frame {
background-image:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}


}










/*
[Under Banners]
*/

.under-banner {
clear:both;
width:auto;
height:auto;
margin:0 auto;
padding:2em 0 0;
}

/*(Mini Banner Frame)*/
.under-banner .mini-bn-frame {
width:auto;
height:auto;
margin:0;
padding:0 12px;
text-align:center;
}
.under-banner .mini-bn-list {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.under-banner .mini-bn-list li {
display:inline-block;
margin:0 .3em .3em;
padding:0;
}



@media screen and (min-width:960px) {
.under-banner .mini-bn-frame {
width:960px;
height:auto;
margin:0 auto;
padding:0;
}


}


@media screen and (max-width:800px) {
.under-banner .mini-bn-list li {
margin:0 .3em 1em;
}


}


@media screen and (max-width:640px) {
.under-banner {
padding:1.6em 0 1em;
}


}


@media screen and (max-width:480px) {
.under-banner {
padding:1em 0;
}


}


/* yoshida added */
#pickup {
	padding-top: 1.2em !important;
}
.ads-frame.for-mp-under {
	padding: 0 0 1.2em !important;
}

.sphad-banners {
	padding-top: 1.2em !important;
}

.sphad-banners,
.sphad-banners div {
	text-align: center !important;
}