@import url(https://use.fontawesome.com/releases/v5.4.2/css/all.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, lRoboto Condensed, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
#lovecolle {
	font-size: 16px;
	font-weight: 500;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", 'Roboto Condensed', sans-serif;
	line-height: 1.4;
	width: 100%;
	height: 100%;
	margin: -50px 0px -75px 0px;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	color: #333;
	text-align: left;
}

/* IE10以降ハック */
@media all and (-ms-high-contrast:none) {
#lovecolle {
	font-family: 'メイリオ', 'Meiryo', 'Roboto Condensed',sans-serif;
}
}
ol {
	list-style: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle
}
q, blockquote {
	quotes: none
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none
}
a img {
	border: none
}
a {
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	color: #e14386
}
a:hover {
	text-decoration: none;
	color: #08B1EC
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block
}
strong {
	font-size: 110%;
	font-weight: 600;
}
#lovecolle p {
	font-size: 15px;
	line-height: 1.4;
	margin-bottom: 20px;
}
#lovecolle p.voice {
	font-size: 17px;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: -14px;
}
#lovecolle p.voice:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f3c9";
  font-weight: 900;
  padding-right: 4px;
}
#lovecolle p.voice-txt {
	line-height: 1.4;
	margin-top: -17px;
}
#lovecolle p.voice2 {
	color: #e72580;
	font-size: 20px;
	line-height: 1.4;
	font-weight: bold;
	margin: 7px 0px 3px;
}
#lovecolle p.voice2:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f3c9";
  font-weight: 900;
  padding-right: 4px;
}
#lovecolle p.kome{
	font-size: 12px;
	margin-left: 1em;
	text-indent: -1em;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 0px 5px;
}
#lovecolle p.link {
	color: #e72580;
	font-size: 16px;
	line-height: 1.4;
	font-weight: bold;
}
#lovecolle p.link:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f0a8";
  font-weight: 900;
  padding-right: 4px;
}
.fgimg {
	max-width: 100%;
	height: auto;
}
#lovecolle ul.list {
  border: solid 2px #ffb03f;
  padding: 1em 1em 0.7em 2.3em;
  position: relative;
  margin: -5px 0px 15px 0px;
  background-color: #FFF;
}

#lovecolle ul.list li {
  line-height: 1.3;
  padding: 0.3em 0;
  list-style-type: none!important;/*ポチ消す*/
}

#lovecolle ul.list li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
  font-weight: 900;
}

#lovecolle ul.list2 {
  padding: 1em 1em 0.7em 2.3em;
  position: relative;
  margin: -5px 0px 15px 90px;
}

#lovecolle ul.list2 li {
  line-height: 1.3;
  padding: 0.3em 0;
  list-style-type: none!important;/*ポチ消す*/
}

#lovecolle ul.list2 li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
  font-weight: 900;
}

/* ヘッダー */
.header-nav-wrapper {
	position: relative;
	height: 700px;
}
.header-wrapper-low {
	position: relative;
	height: 200px;
}
/* 見出し */
#lovecolle h1 {
	padding: 35px 24px 24px 24px;
	text-align: right;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 0px 0px 15px 15px;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	float: left;
}
#lovecolle h2 {
	font-weight: 600;
	margin: 0px 0px 15px;
}
#lovecolle h3 {
	color: #08B1EC;
	clear: left;
	font-size: 20px;
	margin: 5px auto 15px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #08B1EC;
}
#lovecolle h4 {
	color: #e72580;
	clear: left;
	font-size: 22px;
	margin: 5px auto 10px 0px;
	text-align: left;
	line-height: 1.3;
	font-weight: 600;
}
#lovecolle h5 {
	color: #FFFFFF;
	background-color: #08B1EC;
	clear: left;
	font-size: 16px;
	font-weight: 600;
	margin: 10px 0px;
	padding: 8px 20px;
	text-align: left;
	line-height: 1.3;
	border-radius: 20px;
}
#lovecolle .ribbon {
	display: inline-block;
	position: relative;
	height: 48px;/*高さ*/
	line-height: 46px;/*高さ*/
	vertical-align: middle;
	text-align: center;
	padding: 2px 40px 0 18px;/*文字の左右の余白*/
	font-size: 18px;/*文字サイズ*/
	background: #e72580;/*背景色*/
	color: #FFF;/*文字色*/
	box-sizing: border-box;
}
#lovecolle .ribbon:after {
	content: " ";
	position: absolute;
	top: 0px;
	left: 100%;
	width: 0;
	border-width: 24px 12px;
	border-style: solid;
	border-color: #e72580;
	border-right-color: transparent;
}
#lovecolle .ribbon2 {
	display: inline-block;
	position: relative;
	height: 56px;/*高さ*/
	line-height: 1.3;
	vertical-align: middle;
	text-align: left;
	padding: 6px 40px 0px 18px;/*文字の左右の余白*/
	font-size: 18px;/*文字サイズ*/
	background: #e72580;/*背景色*/
	color: #FFF;/*文字色*/
	box-sizing: border-box;
}
#lovecolle .ribbon2:after {
	content: " ";
	position: absolute;
	top: 0px;
	left: 100%;
	width: 0;
	border-width: 28px 12px;
	border-style: solid;
	border-color: #e72580;
	border-right-color: transparent;
}
audio{width: 285px; display: block; margin:0px;}

/* 余白の指定 */
.has-padding {
	padding: 30px 0px;
}
.has-padding-2 {
	padding: 20px 0px;
}
.has-padding-3 {
	padding: 10px 0px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mt5 {
	margin-top: 5px;
	margin-bottom: 0px;
}
.mt10 {
	margin-top: 10px;
	margin-bottom: 0px;
}
.mt20 {
	margin-top: 20px;
}



/* 背景の指定 */
.alternate-bg {
	background-image: url(../img/lovec_main.png), url(../img/back_p.jpg);
	background-position: center 30px,  center 0px;
	background-repeat: no-repeat,  repeat;
}
.alternate-bg2 {
	background-color: #fffd7a;
	background: repeating-linear-gradient(45deg, #fffd7a 0px, #fffd7a 12px, #fcfd5b 12px, #fcfd5b 24px);
}
.alternate-bg3 {
	background-color: #FFFFFF;
}
.alternate-bg4 {
	background-image: url(../img/back_2.jpg);
	background-position: 0 -100px;
}
.alternate-bg5 {
	background-color: #e72580
}
.alternate-bg6 {
	background-color: #E4F6FD;
}
.bg-list,.bg-voice,.bg-detail {
	background-position: center 20px,  center 0px;
	background-repeat: no-repeat,  repeat;
}
.bg-list {
	background-image: url(../img/low_tit_1_l.png), url(../img/back_p.jpg);
}
.bg-voice {
	background-image: url(../img/low_tit_2_l.png), url(../img/back_p.jpg);
}
.bg-detail {
	background-image: url(../img/low_tit_3_l.png), url(../img/back_p.jpg);
}

/* スライドショー */
.slick-box div {
	position: relative;
	overflow: hidden;
}
.caption {
	position: absolute;
	background-color: rgba(231, 37, 128, 0.85);
	color: #FFFFFF;
	font-size: 13px;
	padding: 10px 0px 0px 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* トップページお知らせ */
#lovecolle #infomation {
	width: 100%;
	margin: 0px;
	font-size: 100%;
}
#lovecolle #infomation dl {
	clear: left;
}
#lovecolle #infomation dt {
	margin: 7px 15px 0px 0px;
	padding: 0px;
	line-height: 1.5em;
	font-weight: bold;
	color: #08B1EC;
}
#lovecolle #infomation dd {
	padding: 0px 0px 7px;
	border-bottom: 1px solid #E5E7E9;
	line-height: 1.5em;
}
#lovecolle #infomation dd:last-child {
	border-bottom: 0px;
}
#lovecolle #infomation dd a {
	text-decoration: underline;
}
#lovecolle #infomation dd a:hover {
	text-decoration: none;
}
.header-nav-wrapper .logo {
	margin: 7px 0 7px 0px;
	text-align: center;
}

/* キャラクター詳細ページ用指定 */
ol.number  {
	counter-reset: li;
	padding: 0px 4px 8px 4px;
}
ol.number > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
	padding-left: 1.7em; /*li:before分左に余白を。調整可*/
	margin: 4px 0px 4px 0px;
}
ol.number > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1em;
	background: #ffc0cb; /*薄いピンク*/
	color: #ffffff; /*白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.4em; /*幅を決めるheightと同じ数値に*/
	height: 1.4em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: 0em; /*項目の基準、左にあわせる*/
	top: 1px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.4;/*数字の位置あわせで数値を指定*/
}
.frame{
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #D5B200;
	margin-bottom: 20px;}
.frame p{
	padding: 0px 100px;}
#lovecolle .balloon1 {
 	position: relative;
	display: inline-block;
 	margin: 10px 0px 10px 10px;
	padding: 14px 14px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #FFFFFF;
	border-radius: 15px;
}
#lovecolle .balloon1:before{
	content: "";
	position: absolute;
	top: 40%;
	left: -15px;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #FFFFFF;
}
#lovecolle .balloon1 p {
	margin: 0;
	padding: 15px;
}

/*** カード回転用 ****/
.card2 {
    position: relative;
}
.card2 a {
    display: block;
	margin-bottom: 10px;
	background-color: #FFF;
}
.card_ura {
    position: absolute;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.card_omote {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
.card_ura {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
a:hover .card_omote {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
a:hover .card_ura {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}

@media �screen {
}
 @keyframes vjs-spinner-spin {
100% {
transform:rotate(360deg)
}
}
@keyframes vjs-spinner-fade {
0% {
border-top-color:#73859f
}
20% {
border-top-color:#73859f
}
35% {
border-top-color:#fff
}
60% {
border-top-color:#73859f
}
100% {
border-top-color:#73859f
}
}
@-webkit-keyframes vjs-spinner-fade {
0% {
border-top-color:#73859f
}
20% {
border-top-color:#73859f
}
35% {
border-top-color:#fff
}
60% {
border-top-color:#73859f
}
100% {
border-top-color:#73859f
}
}

 @-webkit-keyframes scroll-inner {
from {
margin-top:15%;
opacity:1
}
to {
margin-top:75%;
opacity:0
}
}
/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}


@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 991px) {
.alternate-bg {
	background-size: 110%,auto;
}
.bg-list,.bg-voice,.bg-detail {
	background-position: center 20px,  center 0px;
}
.bg-list {
	background-image: url(../img/low_tit_1_m.png), url(../img/back_p.jpg);
}
.bg-voice {
	background-image: url(../img/low_tit_2_m.png), url(../img/back_p.jpg);
}
.bg-detail {
	background-image: url(../img/low_tit_3_m.png), url(../img/back_p.jpg);
}
.header-wrapper-low {
	height: 180px;
}
}

@media screen and (max-width: 768px) {
#lovecolle {
	margin: 0px 0px 0px 0px;
}
.alternate-bg {
	background-image: url(../img/lovec_main_sp.png), url(../img/back_p.jpg);
	background-position: center 35px,  center 0px;
	background-size: 98%;
}
.bg-list,.bg-voice,.bg-detail  {
	background-position: center 136px,  center 0px;
}
.bg-list {
	background-image: url(../img/low_tit_1_s.png), url(../img/back_p.jpg);
}
.bg-voice {
	background-image: url(../img/low_tit_2_s.png), url(../img/back_p.jpg);
}
.bg-detail {
	background-image: url(../img/low_tit_3_s.png), url(../img/back_p.jpg);
}
#lovecolle h1 {
	padding: 15px 20px 10px 20px;
	background-color: #FFFFFF;
	text-align: center;
	margin: 0px auto;
	width: 200px;
	display: block;
	float: none;
}
.header-nav-wrapper {
	height: 500px;
}
.header-wrapper-low {
	height: 200px;
}
.frame p{
	padding: 0px 20px;
	}
#lovecolle ul.list2 {
  margin: -5px 0px 15px 5px;
}	
}

@media screen and (max-width: 640px) {
#lovecolle h1 {
	width: 180px;
}
.header-nav-wrapper {
	height: 400px;
}
#lovecolle strong {
	font-size: 16px;
}
}

@media screen and (max-width: 480px) {
#lovecolle {
	font-size: 93%;
}
.alternate-bg {
	background-position: center 35px,  center 0px;
	background-size: 120%;
}
.bg-list,.bg-voice,.bg-detail{
	background-position: center 110px,  center 0px;
}
.bg-list {
	background-image: url(../img/low_tit_1_ss.png), url(../img/back_p.jpg);
}
.bg-voice {
	background-image: url(../img/low_tit_2_ss.png), url(../img/back_p.jpg);
}
.bg-detail {
	background-image: url(../img/low_tit_3_ss.png), url(../img/back_p.jpg);
}
#lovecolle h1 {
	width: 160px;
	padding: 12px 20px 7px 20px;
}
#lovecolle h2 {
	margin: 10px 0px 10px -15px;
}
#lovecolle h3 {
	font-size: 19px;
}
#lovecolle h4 {
	font-size: 20px;
}
#lovecolle p {
	font-size: 15px;
}
.header-nav-wrapper {
	height: 300px;
}
.header-wrapper-low {
	height: 170px;
}
.has-padding-2 {
	padding: 10px 0px;
}
#lovecolle .balloon1 {
 	margin: 5px 0px 7px 10px;
}
}

@media screen and (max-width: 360px) {
	#lovecolle h1 {
	width: 140px;
}
}

@media screen and (max-width: 240px) {
}
/* PAGETOP */
/*PCで見た時*/
#lovecolle .pagetop {
	position: fixed;
	bottom: 30%;
	right: 0px;
	z-index: 20;
}
#lovecolle .pagetop a {
	font-size: 24px;
	background: #08B1EC;
	border-radius: 10px 0px 0px 10px;
	padding: 20px 15px;
	color: #FFF;
	text-decoration: none;
}
#lovecolle .pagetop a:hover {
	text-decoration: none;
	background: #CCC;
}
audio{width: 220px;}

/*スマホで見た時*/
@media screen and (max-width: 640px) {
#lovecolle .pagetop a {
	font-size: 16px;
	padding: 10px;
}
}