@charset "utf-8";

/* -------------------------------------------------
	h1
------------------------------------------------- */

h1 span {
	display: block;
}

@media print, screen and (min-width:768px) {
	h1 {
		padding-top: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	h1 .logo {
		width: calc(580 / 1280 * 100%);
		text-align: center;
	}
	h1 .logo img {
		width: calc(390 / 580 * 100%);
	}
	h1 .mv {
		width: calc(700 / 1280 * 100%);
	}
}

@media screen and (max-width:767px) {
	h1 .logo {
		padding: calc(300 / 1280 * 100%) 0 calc(180 / 1280 * 100%);
		text-align: center;
	}
	h1 .logo img {
		width: calc(720 / 1125 * 100vw);
	}
}

/* -------------------------------------------------
	banner1
------------------------------------------------- */

#banner1 {
	width: 100%;
	margin-top: 140px;
	overflow: hidden;
}
#banner1 .slide-wrap {
	width: calc(490 / 1280 * 100vw);
	margin: 0 auto;
}
#banner1 .list--bnr {
	text-align: center;
}
#banner1 .list--bnr a {
	display: block;
	margin: 0 auto;
	width: calc(450 / 1280 * 100vw);
}
#banner1 .list--bnr img {
	width: 100%;
}


.fix-bnr {
	position: fixed;
	bottom: 35px;
	right: 30px;
	width: 110px;
	line-height: 0;
	z-index: 12;
}

@media screen and (max-width:767px) {
	#banner1 {
		margin-top: calc(180 / 1125 * 100vw);
	}
	#banner1 .slide-wrap {
		width: calc(930 / 1125 * 100vw);
	}
	#banner1 .list--bnr a {
		width: calc(880 / 1125 * 100vw);
	}
	
	.fix-bnr {
		bottom: 10vw;
		right: 3vw;
		width: 24vw;
	}
}

/* -------------------------------------------------
	news
------------------------------------------------- */

#news {
	margin-top: 100px;
}
#news ul li {
	border-bottom: solid 1px #e6e6e5;
}
#news ul li a {
	padding: 20px 0;
	display: block;
	position: relative;
}
#news ul li a.new::before {
	content: "";
    width: 60px;
    height: 25px;
	display: block;
	background: url(/static/saucydog/official/common/new.svg) no-repeat 0 0 / contain;
	position: absolute;
	right: 0;
	top: 13px;
}
#news ul li .upper {
	display: flex;
	align-items: center;
	font-family: 'RobotoCondensed';
	font-weight: 700;
}
#news ul li .type {
	width: 80px;
	height: 20px;
	margin-right: 18px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	background: #59768a;
	color: #fff;
	letter-spacing: 0.1em;
}
#news ul li .date {
	font-size: 14px;
}
#news ul li .title {
	margin-top: 0.7em;
	font-size: 14px;
	line-height: 1.66;
	font-weight: bold;
}

@media print, screen and (min-width:768px) {
	#news .h-normal {
		justify-content: center;
	}
}

@media screen and (max-width:767px) {
	#news {
		margin-top: calc(175 / 1125 * 100vw);
	}
	#news ul li {
		border-bottom: solid 1px #e6e6e5;
	}
	#news ul li a {
		padding: calc(40 / 1125 * 100vw) 0;
	}
	#news ul li a.new::before {
		width: calc(160 / 1125 * 100vw);
		height: calc(65 / 1125 * 100vw);
		right: calc(25 / 1125 * 100vw);
		top: calc(25 / 1125 * 100vw)
	}
	#news ul li .type {
		width: calc(150 / 1125 * 100vw);
		height: calc(40 / 1125 * 100vw);
		margin-right: calc(25 / 1125 * 100vw);
		font-size: calc(24 / 1125 * 100vw);
	}
	#news ul li .date {
		font-size: calc(30 / 1125 * 100vw);
	}
	#news ul li .title {
		font-size: calc(36 / 1125 * 100vw);
		line-height: 1.52;
	}
}

/* -------------------------------------------------
	live
------------------------------------------------- */

#live {
	margin-top: 125px;
}
#live ul li {
	border-bottom: solid 1px #e6e6e5;
}
#live ul li a {
	padding: 22px 0;
	position: relative;
	display: flex;
	align-items: center;
}
/*#live ul li a.new::before {
	content: "";
    width: 60px;
    height: 25px;
	display: block;
	background: url(/static/saucydog/official/common/new.svg) no-repeat 0 0 / contain;
	position: absolute;
	right: 0;
	top: 20px;
}*/
#live ul li .date-group {
	width: 255px;
	display: flex;
	align-items: center;
	font-family: 'RobotoCondensed';
	font-weight: 700;
}
#live ul li .date-group::after {
	width: 1px;
	height: calc(100% - 44px);
	content: "";
	display: block;
	background: #e6e6e5;
	position: absolute;
	left: 233px;
	top: 22px;
}
#live ul li .date-group .y {
	margin-left: -10px;
	font-size: 20px;
	transform: rotate(90deg);
}
#live ul li .date-group .d {
	font-size: 50px;
}
#live ul li .date-group .wd {
	margin-left: 18px;
	display: inline-block;
	font-size: 20px;
}
#live ul li .title {
	width: calc(100% - 255px);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
}

@media print, screen and (min-width:768px) {
	#live .h-normal {
		justify-content: center;
	}
}

@media screen and (max-width:767px) {
	#live {
		margin-top: calc(170 / 1125 * 100vw);
	}
	#live ul li a {
		padding: calc(40 / 1125 * 100vw) 0 calc(20 / 1125 * 100vw);
		flex-wrap: wrap;
	}
	/*#live ul li a.new::before {
		width: calc(160 / 1125 * 100vw);
		height: calc(65 / 1125 * 100vw);
		right: calc(20 / 1125 * 100vw);
		top: calc(50 / 1125 * 100vw);
	}*/
	#live ul li .date-group {
		width: calc(400 / 1125 * 100vw);
		border-right: solid 1px #e6e6e5;
	}
	#live ul li .date-group::after {
		display: none;
	}
	#live ul li .date-group .y {
		margin-left: -1.5vw;
		font-size: calc(28 / 1125 * 100vw);
    	letter-spacing: 0.05em;
	}
	#live ul li .date-group .d {
		font-size: calc(75 / 1125 * 100vw);
	}
	#live ul li .date-group .wd {
		margin-left: calc(35 / 1125 * 100vw);
		font-size: calc(28 / 1125 * 100vw);
	}
	#live ul li .title {
		width: 100%;
		margin-top: 0.8em;
		font-size: calc(36 / 1125 * 100vw);
	}
}

/* -------------------------------------------------
	video
------------------------------------------------- */

#video {
	width: 100%;
	margin-top: 165px;
	overflow: hidden;
}
#video .slide-wrap {
	width: calc(724 / 1280 * 100vw);
	margin: 0 auto;
}
#video .item {
	text-align: center;
}
#video .item iframe {
	width: calc(660 / 1280 * 100vw);
	height: calc(660 * 315 / 560 / 1280 * 100vw);
}

#video .list--video li {
	width: 92% !important;
    margin: 0 4%;
	position: relative;
}

#video .thumb {
	width: 100%;
	padding-top: 56.25%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
    top: 0;
    left: 0;
}
#video .thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#video .video {
	width: 100%;
    padding-top: 56.25%;
    position: relative;
}
#video .video .block--youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#video h3 {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: ff-market-web, sans-serif;
    font-weight: 700;
}
#video .date {
    font-family: 'RobotoCondensed';
    font-weight: 700;
    font-size: 16px;
	letter-spacing: 0.02em;
}


@media print, screen and (min-width:768px) {
	#video .h-normal {
		justify-content: center;
	}
}

@media screen and (max-width:767px) {
	#video {
		padding-bottom: calc(200 / 1125 * 100vw);
		margin-top: calc(180 / 1125 * 100vw);
	}
	#video .slide-wrap {
		width: calc(930 / 1125 * 100vw);
	}
	#video .item iframe {
		width: calc(880 / 1125 * 100vw);
		height: calc(880 * 315 / 560 / 1125 * 100vw);
	}
	
	#video h3 {
		font-size: 3.2vw;
		margin-top: 2vw;
		margin-bottom: 1.5vw;
	}
	#video .date {
		font-size: calc(30 / 1125 * 100vw);
	}
}

/* -------------------------------------------------
	fanclub
------------------------------------------------- */

#fanclub {
	margin-top: 110px;
	padding: 80px 0 60px;
	text-align: center;
	background: url(/static/saucydog/official/top/bg_01.png) repeat center center;
}
#fanclub .logo {
	width: 490px;
}
#fanclub .btn-style1 {
}
#fanclub .fc-login {
	display: flex;
    justify-content: center;
	margin: 35px 0 0;
}
#fanclub .fc-login li {
	margin: 0 10px;
}
#fanclub .fc-login .btn-style1 {
    width: 180px;
}

#fanclub .welcome {
	margin: 50px 0 15px;
    font-family: ff-market-web, sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #59768a;
}

#fanclub .name,
#fanclub .mypage-btn {
	display: inline-block;
	background-color: #fff;
	width: 270px;
	height: 60px;
    font-size: 16px;
	line-height: 60px;
    border-radius: 30px;
}

#fanclub .name span {
	font-size: 22px;
    font-weight: bold;
    vertical-align: baseline;
}

#fanclub .mypage {
	display: inline-block;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic Medium", "游ゴシック", "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

#fanclub .mypage-btn {
	background-color: #59768a;
	color: #fff;
	font-family: 'RobotoCondensed';
	font-size: 22px;
    font-weight: 700;
	margin: 0 0 0 2em;
}

@media screen and (max-width:767px) {
	#fanclub {
		margin-top: 0;
		padding: calc(120 / 1125 * 100vw) 0 calc(100 / 1125 * 100vw);
	}
	#fanclub .logo {
		width: calc(800 / 1125 * 100vw);
	}
	
	#fanclub .fc-login {
		margin: 7vw 0 0;
	}
	#fanclub .fc-login li {
		margin: 0 1vw;
	}
	#fanclub .fc-login .btn-style1 {
		width: 40vw;
		height: 12vw;
	}
	
	#fanclub .welcome {
		margin: 8vw 0 4vw;
		font-size: 6vw;
	}
	#fanclub .name,
	#fanclub .mypage-btn {
		width: 68%;
		height: 50px;
		line-height: 50px;
	}

	#fanclub .name {
    	font-size: 3.2vw;
	}
	#fanclub .name span,
	#fanclub .mypage-btn {
		font-size: 4.2vw;
	}

	#fanclub .mypage {
		display: block;
	}
	
	#fanclub .mypage-btn {
		margin: 1em 0 0;
	}
}

/* -------------------------------------------------
	news-and-blog
------------------------------------------------- */

#news-and-blog {
	position: relative;
}

#news-and-blog #fc-news .h-normal .main {
	color: #7383a0;
}

#news-and-blog #blog .h-normal .main {
	color: #f2a384;
}

#news-and-blog ul {
	margin: 0 10px;
}
#news-and-blog ul li a {
	padding: 20px 0;
	display: block;
	position: relative;
}
#news-and-blog ul li a.new::before {
	content: "";
    width: 60px;
    height: 25px;
	display: block;
	background: url(/static/saucydog/official/common/new.svg) no-repeat 0 0 / contain;
	position: absolute;
	right: 0;
	top: 13px;
}

#news-and-blog #blog ul li a {
	display: flex;
	justify-content: space-between;
    padding: 15px 0;
}
#news-and-blog #blog ul li a .thumb {
	width: 20%;
    padding-top: 13.2%;
    position: relative;
	background: url(/static/saucydog/official/blog/blog_noimg.jpg) no-repeat center center;
	background-size: cover;
}
#news-and-blog #blog ul li a .thumb img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
#news-and-blog #blog ul li a .ttl-wrap {
    width: 76%;
}

#news-and-blog ul li .upper {
	display: flex;
	align-items: center;
	font-family: 'RobotoCondensed';
	font-weight: 700;
}
#news-and-blog ul li .type {
	width: 80px;
	height: 20px;
	margin-right: 18px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	background: #7383a0;
	color: #fff;
	letter-spacing: 0.1em;
}
#news-and-blog ul li .date {
	font-size: 14px;
}
#news-and-blog ul li .author {
	padding-left: 45px;
	font-size: 14px;
	color: #f2a384;
	display: inline-block;
	position: relative;
}
#news-and-blog ul li .author::before {
	width: 20px;
	height: 1px;
	display: inline-block;
	background: #e6e6e5;
	content: "";
	position: absolute;
	left: 14px;
	top: 45%;
}
#news-and-blog ul li .title {
	margin-top: 0.7em;
	font-size: 14px;
	line-height: 1.66;
	font-weight: bold;
}

@media print, screen and (min-width:768px) {
	#news-and-blog .pc-two-col {
		padding: 70px 0 60px;
		display: flex;
		justify-content: space-between;
	}
	#news-and-blog .pc-two-col > section {
		width: calc(500 / 1080 * 100%);
	}
	#news-and-blog ul li {
		border-top: solid 1px #e6e6e5;
	}
	
}

@media screen and (max-width:767px) {
	#news-and-blog {
		/*padding: calc(160 / 1125 * 100vw) 0;*/
		padding: 0;		
	}
	#news-and-blog #fc-news {
		background-color: rgba(115,131,160,0.2);
		padding: 6vw;
	}
	#news-and-blog #blog {
		/*margin-top: calc(120 / 1125 * 100vw);*/
		background-color: rgba(242,163,132,0.2);
		padding: 8vw 6vw;
	}
	#news-and-blog ul {
		margin: 0;
	}
	#news-and-blog ul li {
		border-top: solid 1px #fff;
	}
	#news-and-blog ul li a {
		padding: calc(40 / 1125 * 100vw) 0;
	}
	#news-and-blog ul li a.new::before {
		width: calc(160 / 1125 * 100vw);
		height: calc(65 / 1125 * 100vw);
		right: calc(25 / 1125 * 100vw);
		top: calc(25 / 1125 * 100vw)
	}
	#news-and-blog ul li .type {
		width: calc(150 / 1125 * 100vw);
		height: calc(40 / 1125 * 100vw);
		margin-right: calc(25 / 1125 * 100vw);
		font-size: calc(24 / 1125 * 100vw);
	}
	#news-and-blog ul li .date {
		font-size: calc(30 / 1125 * 100vw);
	}
	#news-and-blog ul li .author {
		padding-left: calc(90 / 1125 * 100vw);
		font-size: calc(30 / 1125 * 100vw);
	}
	#news-and-blog ul li .author::before {
		width: calc(40 / 1125 * 100vw);
		left: calc(23 / 1125 * 100vw);
    	background: #fff;
	}
	#news-and-blog ul li .title {
		font-size: calc(36 / 1125 * 100vw);
		line-height: 1.52;
	}
}

/* -------------------------------------------------
	movie-and-photo
------------------------------------------------- */

#movie-and-photo {
	width: 100%;
	background: url(/static/saucydog/official/top/bg_01.png) repeat center center;
	overflow: hidden;
	position: relative;
}
#movie-and-photo #movie .h-normal .main {
	color: #fcd475;
}
#movie-and-photo #movie.radio .h-normal .main {
	color: #7383a0;
}
#movie-and-photo #photo .h-normal .main {
	color: #8cbeb4;
}
#movie iframe {
	width: 480px;
	height: calc(480px * 315 / 560);
}
#movie a {
	display: block;
	position: relative;
}
#movie .thumb {
	display: block;
	width: 100%;
	padding-top: 57.85%;
	position: relative;
    background-color: #fff;
}
#movie .thumb img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 95%;
	height: 93%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


#photo .photo {
	padding: 57.85% 34px 0;
	background: #fff;
	position: relative;
	display: block;
}
#photo .photo.new::before,
#movie .new .movie::before {
	content: "";
    width: 60px;
    height: 25px;
	display: block;
	background: url(/static/saucydog/official/common/new.svg) no-repeat 0 0 / contain;
	position: absolute;
	right: 55px;
	top: 15px;
	z-index: 4;
}
#photo .photo img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 95%;
	height: 93%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#movie-and-photo .tit {
    margin: 15px 15px 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}
#movie-and-photo .date {
    font-family: 'RobotoCondensed';
    font-weight: 700;
    font-size: 14px;
	letter-spacing: 0.02em;
    margin: 0 15px;
    text-align: left;
}

@media print, screen and (min-width:768px) {
	#movie-and-photo .pc-two-col {
		padding: 65px 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#movie-and-photo .pc-two-col > section {
		width: calc(500 / 1080 * 100%);
	}
	#movie-and-photo .pc-two-col > section#photo {
    	margin: 0 auto 0;
	}
	#movie-and-photo .slide-wrap {
		margin: 0 10px;
	}
}

@media print, screen and (min-width:768px) and (max-width:1150px) {
	#movie iframe {
		width: calc(480 / 1150 * 100vw);
		height: calc(480 * 315 / 560 / 1150 * 100vw);
	}
}

@media screen and (max-width:767px) {
	#movie-and-photo {
		background: none;
	}
	#movie-and-photo #movie {
		background-color: rgba(244,200,88,0.2);
		padding: 8vw 6vw 18vw;
	}
	#movie-and-photo #movie.radio {
		background-color: rgba(115,131,160,0.2);
	}
	#movie-and-photo #photo {
		background-color: rgba(140,190,180,0.2);
		padding: 8vw 6vw 18vw;
	}
	#movie-and-photo .slide-wrap {
		width: calc(930 / 1125 * 100vw);
		margin: 0 auto;
	}
	#movie-and-photo .item {
		text-align: center;
	}
	#movie-and-photo .item iframe {
		width: calc(880 / 1125 * 100vw);
		height: calc(880 * 315 / 560 / 1125 * 100vw);
		display: inline-block;
	}
	
	#movie {
		padding: calc(150 / 1125 * 100vw) 0  calc(200 / 1125 * 100vw);
	}
	
	
	
	#photo {
		padding: calc(150 / 1125 * 100vw) 0 calc(200 / 1125 * 100vw);
		background: #fff;
	}
	#movie .new .movie::before,
	#photo .photo.new::before {
		width: calc(160 / 1125 * 100vw);
		height: calc(65 / 1125 * 100vw);
		right: calc(10 / 1125 * 100vw);
		top: calc(-25 / 1125 * 100vw);
	}
	
	#movie-and-photo .tit {
		margin: 3vw 2vw 2vw;
		font-size: 3.4vw;
	}
	#movie-and-photo .date {
		font-size: calc(30 / 1125 * 100vw);
		margin: 0 2vw;
	}
}

/* -------------------------------------------------
	qa
------------------------------------------------- */

#qa {
	padding-top: 85px;
}
#qa ul {
	display: flex;
}
#qa ul li {
	width: calc(94% / 3);
    margin-right: 3%;
}
#qa ul li:last-child { margin-right: 0;}
#qa ul li a {
	padding: 25px 20px;
	background: #f6f6f6;
	position: relative;
	display: block;
}
#qa ul li a.new::before {
	content: "";
    width: 60px;
    height: 25px;
	display: block;
	background: url(/static/saucydog/official/common/new.svg) no-repeat 0 0 / contain;
	position: absolute;
	right: 7px;
	top: -11px;
}
#qa ul li a .date {
	margin-bottom: 0.5em;
	font-size: 13px;
	font-family: 'RobotoCondensed';
	font-weight: 700;
	color: #666767;
	letter-spacing: 1px;
}
#qa ul li a .title {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.66;
}

@media screen and (max-width:767px) {
	#qa {
		width: 100%;
		padding: calc(180 / 1125 * 100vw) 0 calc(240 / 1125 * 100vw);
		overflow: hidden;
		background: url(/static/saucydog/official/top/bg_01.png) repeat center center / 639px auto;
	}
	#qa .list-wrap {
		width: calc(836 / 1125 * 100vw);
		margin-top: -2.5vw;
		padding-top: 2.5vw;
		padding-right: calc(56 / 1125 * 100vw);
	}
	#qa ul {
		display: block;
		white-space: nowrap;
	}
	#qa ul li + li {
		
	}
	#qa ul li a {
		width: calc(780 / 1125 * 100vw);
		padding: calc(65 / 1125 * 100vw) calc(70 / 1125 * 100vw);
		background: #fff;
		box-sizing: border-box;
		display: block;
	}
	#qa ul li a.new::before {
		width: calc(160 / 1125 * 100vw);
		height: calc(65 / 1125 * 100vw);
		right: calc(35 / 1125 * 100vw);
		top: calc(-28 / 1125 * 100vw);
	}
	#qa ul li a .date {
		margin-bottom: 0.7em;
		font-size: calc(30 / 1125 * 100vw);
	}
	#qa ul li a .title {
		font-size: calc(36 / 1125 * 100vw);
		white-space: normal;
	}
}