@charset "UTF-8";
/*
* style.css
* description : FM COCOLO Got You OSAKA
*
* Created  2020/09/27.
* Last Update 2020/09/27.
*/




/* INDEX */

/*[[[ Wrapper ]]]*/
/*----- [[[ Main Back Ground ]]] -----*/


/*[[[ FM COCOLO Logo ]]]*/


/*[[[ Header ]]]*/
/*----- [[[ Main Header ]]] -----*/
/*----- [[[ Request Button ]]] -----*/


/*[[[ Content ]]]*/
/*----- [[[ Blog ]]] -----*/


/*[[[ Timeline ]]]*/
/*----- [[[ Timeline Size ]]] -----*/
/*----- [[[ Twitter Button ]]] -----*/


/*[[[ Banners ]]]*/
/*----- [[[ Banners Size ]]] -----*/


/*[[[ Footer ]]]*/
/*----- [[[ Main Footer ]]] -----*/
/*----- [[[ Logo ]]] ------*/
/*----- [[[ Social Link Buttons ]]] -----*/
/*----- [[[ Page Top Button ]]] -----*/


/*[[[ Power Movie ]]]*/
/*----- [[[ Power Movie Frame ]]] -----*/





/* IE 11 Bug */
.ie-img {
	flex-basis: 100%;
	width: 100%;
	/*height: auto;*/
}
.ie-flex-b-auto {
	flex-basis: auto;
}





/*
[[[ Wrapper ]]]
*/

.wrapper {
	width: auto;
	height: auto;
}





/*----- [[[ Main Back Ground ]]] -----*/
@media screen and (min-width: 768px) {
	.bg-main {
		background: url(../../images/bg_main_pc.jpg) no-repeat center center;
		background-size: cover;
		background-attachment: fixed;
	}

}/* @media screen and (min-width: 768px) end */


@media screen and (max-width: 767px) {
	.bg-main {
		background: url(../../images/bg_main_spn.jpg) no-repeat center center;
		background-size: cover;
		background-attachment: fixed;
	}

}/* @media screen and (max-width: 767px) end */










/*
[[[ FM COCOLO Logo ]]]
*/

.logo-fmcocolo {
	position: absolute;
}


@media screen and (min-width: 1200px) {
	.logo-fmcocolo {
  top: 28px;
  right: 28px;
		max-width: 92px;
	}

} /* @media screen and (max-width: 1200px) end */


@media screen and (max-width: 1199px) and (min-width: 992px) {
	.logo-fmcocolo {
  top: 22px;
  right: 22px;
		max-width: 82px;
	}

} /* @media screen and (max-width: 1199px) and (min-width: 992px) end */


@media screen and (max-width: 991px) and (min-width: 768px) {
	.logo-fmcocolo {
  top: 20px;
  right: 20px;
		max-width: 72px;
	}

} /* @media screen and (max-width: 991px) end */


@media screen and (max-width: 767px) {
	.logo-fmcocolo {
  top: 12px;
		right: 12px;
		max-width: 45px;
	}

} /* @media screen and (max-width: 767px) end */










/*
[[[ Header ]]]
*/

/*----- [[[ Main Header ]]] -----*/
#main-header,
#main-header .inner-frame {
	position: relative;
	text-align: center;
}


@media screen and (max-width: 991px) and (min-width: 768px) {
 #main-header .main-header-title img {
  width: 540px;
  margin-left: auto;
  margin-right: auto;
 }

} /* @media screen and (max-width: 991px) and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 #main-header > .inner-frame {
  text-align: center;
 }
 #main-header .main-header-title img,
 #main-header .main-header-catch img {
  max-width: 88%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
 }

} /* @media screen and (max-width: 767px) end */




/*----- [[[ Request Button ]]] -----*/
#main-header .btn-main1 {
	padding: 1rem 1.4rem;
	font-size: 0;
	line-height: 1;
	box-shadow: 0 6px 0 rgba(17,17,17,1);
}


@media screen and (min-width: 576px) {
 #main-header .btn-main1 {
  padding: 1.4rem 2rem;
 }

} /* @media screen and (min-width: 576px) end */

@media screen and (max-width: 575px) {
 #main-header .btn-main1 {
  border-radius: 7px !important;
 }
 
} /* @media screen and (max-width: 575px) end */










/*
[[[ Content ]]]
*/

/*----- [[[ Blog ]]] -----*/

.diary-content .diary-content-innerFrame {
 width: auto;
 height: auto;
 background: #ffffff;
 border: 3px solid #111111;
 border-radius: 5px;
 box-sizing: border-box;
}


@media screen and (min-width: 768px) {
 .diary-content .diary-content-innerFrame {
  border: 5px solid #111111;
  border-radius: 7px;
 }

} /* @media screen and (min-width: 768px) end */





/*[[[[[ Diary Frame ]]]]]*/

/*[[[ Frame ]]]*/
.diary-frame {
 position: relative;
}
.diary-frame::after {
 content: "";
 display: block;
 position: relative;
 bottom: 0;
 left: 0;
 width: 100%;
 border-bottom: 3px solid #111111;
 margin-bottom: 2rem;
 background-color: #eee;
}

/*[[[ Date ]]]*/
.diary-frame .diary-frame-innerFrame .diary-frame-date {
 width: auto;
}

.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box {
 width: auto;
 height: auto;
 border: 2px solid #111111;
 border-radius: 5px;
 text-align: center;
 font-family: 'Lato';
 box-sizing: border-box;
 text-align: center;
 padding: .5rem 0 .3rem;
}
.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box div {
 display: inline-block;
}
.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box span {
 font-style: italic;
}

.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--year {
 font-size: 1.2rem;
}
.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--month {
 font-size: 1.8rem;
 line-height: 1;
}
.diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--week {
 font-size: 1.2rem;
 line-height: 1;
 margin-left: .2rem;
}


@media screen and (min-width: 768px) {
 .diary-frame .diary-frame-innerFrame .diary-frame-date {
  width: 150px;
  flex-basis: 150px;
 }

 .diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box {
  width: 120px;
  height: auto;
  padding: 0;

 }
 .diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--year {
  font-size: 1.3rem;
  padding-top: .2rem;
  padding-bottom: .2rem;
 }
 .diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--month {
  width: 100%;
  font-size: 2rem;
  line-height: 1;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-top: 1px solid #111111;
 }
 .diary-frame .diary-frame-innerFrame .diary-frame-date .diary-frame-date-box .b--week {
  font-size: 1.3rem;
  line-height: 1;
  padding-bottom: .6rem;
  margin-left: 0;
 }

} /* @media screen and (min-width: 768px) end */





/*[[[ Base ]]]*/
.diary-frame .diary-frame-innerFrame .diary-frame-base {
 width:auto;
}


/*[ Header ]*/
.diary-frame .diary-frame-innerFrame .diary-frame-base .r--title {
 font-family: 'Noto Sans JP';
}
.diary-frame .diary-frame-innerFrame .diary-frame-base .r--title strong {
 font-weight: 700;
}

/*[ Text ]*/
.diary-frame-base-rich .r--text {
 line-height: 1.72;
}


@media screen and (min-width: 768px) {
 .diary-frame .diary-frame-innerFrame .diary-frame-base {
  width:100%;
  flex-basis: 100%;
 }

 .diary-frame-base-rich .r--text {
  line-height: 2;
 }

} /* @media screen and (min-width: 768px) end */










/*
[[[ Timeline ]]]
*/

/*----- [[[ Timeline Size ]]] -----*/

.timeline > .inner-frame {
 border: 5px solid #111111;
 background: #ffffff;
 border-radius: 7px;
 box-sizing: border-box;
 overflow: hidden;
}
.timeline .twitter-timeline.twitter-timeline-rendered {
 height: 100% !important;
}


/*----- [[[ Twitter Button ]]] -----*/
@media screen and (max-width: 767px) {
 #sub-content .btn-twitter {
  padding: .5rem .8rem;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(17,17,17,1);
 }
 #sub-content .btn-twitter img {
  max-width: 66.6%;
 }
 
} /* @media screen and (max-width: 767px) end */










/*
[[[ Banners ]]]
*/

/*----- [[[ Banners Size ]]] -----*/
.banners {
 width: auto;
 height: auto;
}

.banners ul li:not(:last-child) {
 margin-bottom: 1.2rem;
}


@media screen and (min-width: 768px)  {
	.banners ul li:not(:last-child) {
  margin-bottom: 2rem;
 }

} /* @media screen and (min-width: 768px) end */


@media screen and (max-width: 767px) and (min-width: 360px)  {
	.banners ul li {
  max-width: 82%;
  margin-left: auto;
  margin-right: auto;
 }

} /* @media screen and (min-width: 768px) end */
















/*
[[[ Footer ]]]
*/

/*----- [[[ Main Footer ]]] -----*/
#main-footer {
	position: relative;
}





/*----- [[[ Logo ]]] ------*/
@media screen and (max-width: 767px) {
 #main-footer .main-footer-logo img {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
 }

} /* @media screen and (max-width: 767px) end */







/*----- [[[ Social Link Buttons ]]] -----*/
#main-footer .sns-btns {
	width:auto;
	height: auto;
	margin:;
	padding: 0;
	text-align: center;
}
#main-footer .sns-btns .social {
	display: inline-block;
	line-height: 1;
	vertical-align: top;
}





/*----- [[[ Page Top Button ]]] -----*/
.pagetop {
	width:auto;
	height:auto;
	margin:0;
	padding:0;
	text-align: center;
	margin-top: 3rem;
}
.pagetop a {
	cursor: pointer;
	padding-top: 60px;
	position: relative;
 /*bottom: 20px;*/
 /*left: 50%;*/
 z-index: 2;
 display: inline-block;
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 text-decoration: none;
 text-indent: 0;
 font : normal 400 16px/1 'Lato', sans-serif;
 color: rgba(17,17,17,1);
}
.pagetop a span {
	position: absolute;
 top: 0;
 left: 50%;
 width: 46px;
 height: 46px;
 margin-left: -23px;
 background: rgba(17,17,17,1);
 border-radius: 100%;
 box-sizing: border-box;
}
.pagetop a span::after {
	position: absolute;
 top: 50%;
 left: 50%;
 content: '';
 width: 16px;
 height: 16px;
 margin: -4px 0 0 -8px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 box-sizing: border-box;
}


@media screen and (min-width: 768px) {
	.pagetop {
		display: none;
		margin-top: 0;
		position: fixed;
		bottom:1rem;
		right: 2rem;
	}

} /* @media screen and (min-width: 768px) end */










/*
[[[ Power Movie ]]]
*/

/*----- [[[ Power Movie Frame ]]] -----*/
#power-movie .power-movie-innerFrame {
 background: rgba(255,254,55,0.8);
 border-radius: 12px;
}

/*[[[ Title ]]]*/
#power-movie .power-movie-innerFrame .power-movie-title {
 background: rgba(255, 255, 255, 1);
}

/*[[[ List ]]]*/
#power-movie .power-movie-innerFrame .power-movie-list {
 width: auto;
 height: auto;
}

#power-movie .power-movie-innerFrame .power-movie-list li {
 float: left;
}

@media screen and (min-width: 992px) {
 #power-movie .power-movie-innerFrame .power-movie-list li {
  width: calc(25% - 60px / 4);
  margin: 0 20px 20px 0;
 }
 #power-movie .power-movie-innerFrame .power-movie-list li:nth-child(4n) {
  margin-right: 0;
 }

} /* @media screen and (min-width: 992px) end */


@media screen and (max-width: 992px) and (min-width: 768px) {
 #power-movie .power-movie-innerFrame .power-movie-list li {
  width: calc(33.33333% - 40px / 3);
  margin: 0 20px 20px 0;
 }
 #power-movie .power-movie-innerFrame .power-movie-list li:nth-child(3n) {
  margin-right: 0;
 }

} /* @media screen and (max-width: 992px) and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 #power-movie .power-movie-innerFrame .power-movie-list li {
  width: calc(50% - 20px / 2);
  margin: 0 20px 20px 0;
 }
 #power-movie .power-movie-innerFrame .power-movie-list li:nth-child(2n) {
  margin-right: 0;
 }

} /* @media screen and (max-width: 767px) end */


/*[[[ Movie (iframe) ]]]*/
.power-movie-base {
 margin-bottom: .8rem;
 position: relative;
}
.modal-open {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 6;
}
.power-movie-body {
 max-width: 100%;
 height: auto;
 padding-bottom: 56.25%;
 position: relative;
 overflow: hidden;
}
.power-movie-body iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

#power-movie .modal-body,
#power-movie .modal-content {
 overflow: visible !important;
}

#power-movie .modal-body {
 background: #111111;
 position: relative;
 padding: 8px;
 z-index: 9;
}
#power-movie .modal-body .close.circle {
 position: absolute;
 top: -12px;
 right: -12px;
 z-index: 99999;
}

#power-movie .modal-body .close.circle {
 text-align: center;
 display: block;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 color: #ffffff;
 background: #222222;
 font-size: 2em;
 font-weight: 300;
 padding: 0;
 height: 48px;
 width: 48px;
 opacity: 1;
 text-shadow: none;
}