/* CSS Document */
#kfm_wap img{
	width:100%;
	max-width: 100%;
	height: auto;
}
#kfm_wap a{
	outline: none;
}
#kfm_wap *:focus {
  outline: none;
}
.kfm_movie img{
	transition: 0.3s;
}
.kfm_movie img:hover{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
#kfm_wap a:hover img {
	-webkit-filter: brightness(130%);	// for Google Chrome and Safari
	-moz-filter: brightness(130%);		// for Firefox
	-o-filter: brightness(130%);			// for Opera
	-ms-filter: brightness(130%);			// for Internet Explorer
	filter: brightness(130%);
}

/* IE用透過 */
/*ie10以下*/
#kfm_wap .kfm_banner a:hover img {
	opacity: 0.8\9;
	filter: alpha(opacity=80)\9;
}
/*ie11*/
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, #kfm_wap .kfm_banner a:hover img {
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
}

#kfm_wap{
	background-color:#ffffff;
	background-size: 100%;
	width:auto;
	margin: 0 auto;
	text-align:center;
	outline: none;
}


/*****************************************************************************
****************** 共通 ******************************************************
*****************************************************************************/
#kfm_allcon{
	padding: 0;
	margin: 0 auto;
	color: #333B47;
}
.cm-anchor-flag{
	margin-bottom: 5%;
}
.kfm_con_main{
	max-width: 960px;
	width:auto;
	margin: 0 auto;
	text-align:center;
	height: 100%;
}
.kfm_con_title{
	background-position:bottom;
	background-repeat:no-repeat;
	font-size: 170%;
	font-weight:bold;
	margin-bottom: 1.5%;
	letter-spacing: 5px;
}
.kfm_title_ribbon{
	background-image:url(../img/subpage/kunitomi_fm/ribbon.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size:10%;
	padding: 6% 0 7% 0;
}
#kfm_wap .kfm_movie{
	padding-bottom:5%;
}
#kfm_wap .kfm_movie img{
	width:60%;
}
.row{
	margin-right: 0;
	margin-left: 0;
}
.kfm_lyrics_spece{
	padding-right: 0;
	padding-left: 0;
}
@media screen and (max-width: 960px) {
	.kfm_con_title {
		font-size: 2.7vw;
	}
}
@media screen and (max-width: 768px) {
	.kfm_title_ribbon{
		background-size:15%;
	}
	.kfm_con_title {
		font-size: 3.5vw;
	}
}
.kfm-what-magazine,
.kfm_story{
	background-image:url(../img/subpage/kunitomi_fm/story_back.jpg);
	background-repeat:repeat;
	background-size: 100% auto;
}
.kfm_story_part{
	line-height:200%;
	font-weight:bold;
	letter-spacing: 2px;
	font-size: 125%;
}
@media screen and (max-width: 960px) {
	.kfm_story_part{
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 768px) {
	.kfm_story_part{
		font-size: 2.8vw;
		font-weight:normal;
	}
}

/*****************************************************************************
****************** フィールドミュージアムとは？ *********************************
*****************************************************************************/
.kfm_what_main{
	background-image:url(../img/subpage/kunitomi_fm/what_back.png);
	background-repeat: no-repeat;
	background-size:100%;
	padding-bottom: 6%;
}
#kfm_wap .kfm_what_main .kfm_logo{
	padding:3% 0 5% 0;
}
#kfm_wap .kfm_what_main .kfm_logo img{
	width:40%;
}
.kfm_what_title {
  background-image:url(../img/subpage/kunitomi_fm/what_character_back.png);
	background-size: 66%;
}
.kfm_what_main .kfm_title_ribbon{
	background-image:url(../img/subpage/kunitomi_fm/ribbon.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:10%;
	padding: 1% 0 5% 0;
}
@media screen and (max-width: 768px) {
	.kfm_what_title {
		background-size: 93%;
	}
}

/*****************************************************************************
****************** クニトミ magazine ******************************************
*****************************************************************************/
.kfm_magazine_main{
	background-image:url(../img/subpage/kunitomi_fm/magazine_back.png);
	background-repeat: round;
	background-size:100%;
}
.kfm_magazine_title {
  background-image:url(../img/subpage/kunitomi_fm/magazine_character_back.png);
	background-size: 30%;
}
#kfm_wap .kfm_magazine_main .kfm_logo{
	padding:4% 0 5% 10%;
}
#kfm_wap .kfm_magazine_main .kfm_logo img{
	width:60%;
	padding-left: 2%;
}
.kfm_magazine-menu{
	margin: 0 auto;
	padding: 4% 0;
}
.kfm_magazine-menu .link{
	padding-top: 2%;
	padding-bottom: 2%;
}
#kfm_wap .kfm_magazine-menu a{
	background-color: #e4a900;
	display: block;
	padding: 4% 0;
	border-radius: 20px;
	color: #ffffff;
	font-weight: bold;
	font-size: 140%;
	letter-spacing: 2px;
}
#kfm_wap .kfm_magazine-menu a:hover{
	text-decoration: none;
	background-color: #ffdc00;
}
.magazine-number {
  position: absolute;
  top: 0%;
  left: 46.7%;
	width: 6.8%;
}
.kfm_magazine_special .magazine-number {
  left: 40.4%;
	width: 19.5%;
}
.kfm_magazine_yorimichi .magazine-number {
	left: 39.5%;
	width: 21.5%;
}
.kfm_magazine01,
.kfm_magazine02,
.kfm_magazine03,
.kfm_magazine04,
.kfm_magazine05,
.kfm_magazine_special,
.kfm_magazine_yorimichi{
	padding: 3.5% 0;
	position: relative;
}
.kfm_magazine_yorimichi{
	margin-top: 2%;
}
.kfm_magazine04-con{
	margin-bottom: 2%;
}
.kfm_magazine01-con,
.kfm_magazine02-con,
.kfm_magazine03-con,
.kfm_magazine04-con,
.kfm_magazine_special-con,
.kfm_magazine_yorimichi-con{
	border: 2px dashed #E4A900;
	background-color: #ffffff;
	padding: 6% 3%;
	margin: 0 5%;
}
#kfm_wap .magazine-book img {
	transition: 0.5s;
	box-shadow: 0 0 0 2px #c3c3c3;
}
#kfm_wap .magazine-book a:hover img {
	-moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
	filter: brightness(100%);
}
.magazine-read{
	padding-top: 5%;
}
.magazine-feature{
	text-align: left;
	overflow: hidden;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
}
.magazine-feature li{
	float: left;
}
.magazine-feature li.img{
	width: 28%;
}
.magazine-feature li.title{
	width: 72%;
	font-size: 210%;
	font-weight: bold;
	line-height: 140%;
	padding-left: 8%;
	letter-spacing: -1px;
}
.magazine-feature li.title span {
	padding: 0 2%;
}
.kfm_magazine01 .magazine-feature li.title span,
.kfm_magazine03 .magazine-feature li.title span,
.kfm_magazine05 .magazine-feature li.title span,
.kfm_magazine_special .magazine-feature li.title span {
  background-image: linear-gradient(transparent 65%, #ffcce7 35%);
}
.kfm_magazine02 .magazine-feature li.title span,
.kfm_magazine04 .magazine-feature li.title span,
.kfm_magazine_yorimichi .magazine-feature li.title span {
  background-image: linear-gradient(transparent 65%, #dabea4 35%);
}
#kfm_wap .magazine-feature img{
	width: 100%;
}
.magazine-feature-word{
	padding: 0 4%;
	padding-top: 2%;
	text-align: left;
}
.magazine-feature-word span{
	color: #E4A900;
}
@media screen and (max-width: 950px) {
	.magazine-feature li.title{
		font-size: 3.1vw;
	}
}
@media screen and (min-width: 768px) {
	.kfm_magazine-menu{
		width: 72%;
	}
}
@media screen and (max-width: 767px) {
	#kfm_wap .kfm_magazine-menu > div > div > div {
		padding-left: 2%;
		padding-right:2%;
	}
	#kfm_wap .kfm_magazine-menu a{
		font-size: 3.5vw;
	}
	.kfm_magazine_title {
		background-size: 45%;
	}
	.magazine-number {
		width: 10%;
	}
	.kfm_magazine_yorimichi .magazine-number {
		left: 37.5%;
		width: 24.5%;
	}
	.kfm_magazine01,
	.kfm_magazine02,
	.kfm_magazine03{
		padding-top: 5%;
	}
	.kfm-magazine-bookread{
		padding: 5% 20%;
	}
	.magazine-feature li.title{
		font-size: 4.1vw;
	}
}

/*****************************************************************************
****************** ストーリー ************************************************
*****************************************************************************/
.kfm_story_main{
	background-image:
		url(../img/subpage/kunitomi_fm/story_left_back.png),
		url(../img/subpage/kunitomi_fm/story_right_back.png);
	background-repeat: no-repeat;
	background-position:
		0 0,
		100% 0;
	background-size:
		27%,
		18%;
}
#kfm_wap .kfm_story .kfm_logo{
	padding:5% 0 2% 0;
}
#kfm_wap .kfm_story .kfm_logo img{
	width:15%;
}
.kfm_story_title {
  background-image:url(../img/subpage/kunitomi_fm/story_character_back.png);
	background-size: 20%;
}
@media screen and (max-width: 768px) {
	.kfm_story_title {
	    background-size: 27%;
	}
}

/*****************************************************************************
****************** ミュージアム **********************************************
*****************************************************************************/
.kfm_museum{

}
.kfm_museum_main{
	max-width: 960px;
	width:auto;
	margin: 0 auto;
	text-align:center;
	padding: 5% 0 0 0;
	background-image:
		url(../img/subpage/kunitomi_fm/museum_left_back.png),
		url(../img/subpage/kunitomi_fm/museum_right_back.png);
	background-repeat: no-repeat;
	background-position:
		5% 5%,
		95% 5%;
	background-size:
		10%,
		9.5%;
}
.kfm_museum_title {
  background-image:url(../img/subpage/kunitomi_fm/museum_character_back.png);
	background-size: 31%;
}

/****************** 歌詞 ************************************/
.kfm_lyrics_title{
	background-image:url(../img/subpage/kunitomi_fm/museum_lyrics_back.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size: 100%;
	margin: 0 3%;
}
.kfm_lyrics_con{
	background-color:#ffffff;
	padding: 2%;
	font-size: 160%;
	font-weight: bold;
}
.kfm_lyrics_con2{
	font-size: 70%;
}
.kfm_lyrics_inside{
	padding: 3% 0;
	line-height:200%;
	font-weight:bold;
	letter-spacing: 2px;
	font-size: 125%;
}
.kfm_lyrics_dl{
	padding-top: 8%;
}
.kfm_lyrics_dl_con{
	background-image:
		url(../img/subpage/kunitomi_fm/dl_back.png),
		url(../img/subpage/kunitomi_fm/coffee.png);
	background-repeat:
		no-repeat;
	background-position:
		center,
		32% center;
	background-size:
		28%,
		5%;
	padding: 1.5% 0;
}
#content .kfm_lyrics_dl a{
	color: #ffffff;
	padding: 2% 4%;
}
#content .kfm_lyrics_dl a:hover{
	color:#E4A900;
	text-decoration:none;
}
.kfm_lyrics_three{
	font-size: 100%;
}
@media screen and (max-width: 960px) {
	.kfm_lyrics_con{
		font-size: 2.5vw;
	}
	.kfm_lyrics_con2{
		font-size: 1.7vw;
	}
	.kfm_lyrics_inside{
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 768px) {
	.kfm_museum_title {
    	background-size: 43%;
	}
	.kfm_lyrics_inside{
		font-size: 3vw;
		font-weight:normal;
	}
	.kfm_lyrics_dl_con{
		background-position:
			center,
			27% center;
		background-size:
			35%,
			6%;
	}
}

/*****************************************************************************
****************** CM ********************************************************
*****************************************************************************/
.kfm_cm{
	background-image:
		url(../img/subpage/kunitomi_fm/banner_back.png),
		url(../img/subpage/kunitomi_fm/cm_back.jpg);
	background-repeat:
		no-repeat,
		repeat-y;
	background-size:100%;
	background-position:
		bottom,
		top;
}
.kfm_cm_main{
	max-width: 960px;
	width:auto;
	margin: 0 auto;
	text-align:center;
	height: 100%;
	padding-bottom: 12%;
	font-size: 125%;
}
.kfm_cm_con{
	width: 70%;
	margin: 0 auto;
}
#content .kfm_cm p{
	color: #ffffff;
	line-height: 200%;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 13%;
}
#content .kfm_cm p.adjustment{	/* スペースが小さい所に使用 */
	padding-top: 5%;
}
.kfm_cm_con span{
	font-size: 80%;
	color: #ffffff;
}
.cm-map{
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#content .kfm_cm p{
		font-size: 3.5vw;
	}
	.kfm_cm_con span{
		font-size: 2.8vw;
	}
}

/*****************************************************************************
****************** バナー ****************************************************
*****************************************************************************/
.kfm_banner{
	background-color:#E4A900;
	padding: 7% 0 6% 0;
}
.kfm_banner_main{
}
.kfm_banner_main p{
	padding:3% 0;
}

/*****************************************************************************
****************** CMアンカー *************************************************
*****************************************************************************/
.cm-anchor {
	position: absolute;
  width: 150px;
  bottom: 20%;
  left: 80%;
}
.cm-anchor a {
    text-decoration: none;
    width: 100%;
    display: block;
    z-index: 9;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.cm-anchor img{
	width: 10%;
}
@media screen and (max-width: 767px) {
	.cm-anchor{
		display: none;
	}
}

/*****************************************************************************
****************** bootstrap調整 *********************************************
*****************************************************************************/
ul{
	margin-bottom:0;
}