@charset "UTF-8";

/* ===== 全体の設定 ===== */
body {
	*text-align: center;/*IE調整用*/
	margin: 0px;
}

/* 全体背景[変更可] */
#wrapper {background: #fff!important; padding: 0;}


/* ===== コンテンツ ===== */
/* コンテンツ リンク色[変更可] */
#content a:link { text-decoration:underline; color:#005799;}
#content a:visited { text-decoration:underline; color:#005799;}
#content a:active { text-decoration:underline; color:#005799;}
#content a:hover { text-decoration:none; color:#005799;}

/* イベント名 リンク色[色変更可] */
#main .blockInEvent .bl-hot a, #bottomBlock .topics .topicsTitle a { text-decoration:none; color:#005799;}

/* ===== コンテンツ[以下に追加] ===== */

#wrapper{
	background:#f0f0f0;
	border-bottom:1px solid #dbdcdc;
}
h2,h3,p,dl,dt,dd{
    margin:0;
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}


#innerWrap{
	margin: 0 auto; overflow: hidden;
	width: auto!important; font-size: 15px; line-height: 1.5;
	padding: 0; background: none!important;
	*text-align: left;/*IE調整用*/
}

.center{
	text-align: center;
}

.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.cf {
  min-height: 1px;
}

* html .cf {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
#innerWrap a:hover img{
	filter:alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
}




.mincho{
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#content_wrap img {
	height: auto;
}
#content_wrap a {
	transition: all  0.3s ease;
}
#content_wrap a:hover {
	opacity: .8;
}

#promoWide #innerWrap{
	background: none;
	width: auto;
	padding: 0;
}

.cow{
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", sans-serif, Helvetica;
}
.cow img{
	vertical-align: bottom;
}
.cow table{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	word-wrap: break-word;
	word-break: break-all;
}
.cow .inner{
	width: 1024px;
	margin: auto;
	box-sizing: border-box;
}
.cow .main{
	position: relative;
	background: url(../img/210126_bg_main.png) no-repeat center / cover;
	padding: 30px 0;
	overflow: hidden;
	text-align: center;
}
.cow .main:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 1109px;
	height: 568px;
	background: url(../img/210126_bg_bara.png) no-repeat center / cover;
}
.cow .main canvas{
	position: absolute;
	top: 0;
	left: 0;
}
.cow .main h1{
	margin: 0 0 -60px;
	position: relative;
}
.cow .main ul {
	position: relative;
}
.cow .main ul li{
	opacity: 0;
}
.cow .main ul li.action{
	opacity: 1;
}
.cow .main ul li:nth-child(1){
	margin: auto;
    width: 503px;
    position: relative;
    right: 180px;
}
.cow .main ul li:last-child {
	position: absolute;
	bottom: 0;
	left: 0;
	right: -520px;
	margin: auto;
    transform: translateY(100px);
}


.cow .main ul li.action:nth-child(1) {
    transition: opacity 1s ease 0s;
    position: relative;
    width: 515px;
    height: 550px;
}
.cow .main ul li p {
	position: absolute;
	top: 278px;
	right: 95px;
	background: #fff;
	margin: auto;
	padding: 8px 10px 8px 30px;
	border-radius: 30px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	border: 1px solid #c9c9c9;
	font-weight: bold;
}
.cow .main ul li p:hover {
	opacity: .7;
}
.cow .main ul li p:before {
	content: "+";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 20px;
	color: #fff;
	line-height: 1;
}
.cow .main ul li.action:nth-child(2) {
	transition: opacity 1s ease 1s, transform 2s ease-out 1s;
	transform: translateY(30px);
}

.cow .result{

}
.cow .result .ttlarea{
	text-align: center;
	background: url(../img/bg_period.png) center;
	position: relative;
}
.cow .result .ttlarea .inner{

}
.cow .result .ttlarea img.thanks{
	position: absolute;
	bottom: 0;
	left: -950px;
	right: 0;
	margin: auto;
}
.cow .result .ttlarea h2 img{
	margin: -20px 0 -30px;
}
.cow .result .congratulation{
	background: url(../img/210126_bg_congratulation.jpg) center;
	padding: 80px 0;
}
.cow .result .congratulation .inner{
	display: flex;
	background: #fff;
}
.cow .result .congratulation .inner div{
	position: relative;
	padding: 20px 30px;
}
.cow .result .congratulation .inner div:before{
	content: "";
	background: url(../img/bg_bloom2.png) no-repeat;
	position: absolute;
	top: 0;
	right: -110px;
	width: 202px;
	height: 190px;

}
.cow .result .congratulation .inner div:after{
	content: "";
	position: absolute;
	bottom: -40px;
	left: -40px;
	width: 92px;
	height: 94px;
	background: url(../img/bg_bloom3.png) no-repeat;
}
.cow .result .congratulation figure{
	margin: 0;
}
.cow .result .congratulation h3{
	margin: 0 0 30px;
}
.cow .result .congratulation p{
	line-height: 1.8;
	font-size: 18px;
}
.cow .result .congratulation p span{
	font-size: 24px;
	font-weight: bold;
	margin: 0 0 20px;
	display: block;
}


.cow .candidate{
	position: relative;
	background: url(../img/bg_candidate.jpg);
	padding: 60px 0 0;
	overflow: hidden;
}
.cow .candidate:before{
	content: "";
	background: url(../img/bg_bloom6.png) no-repeat;
	position: absolute;
	bottom: 40px;
	left: 0;
	right: -820px;
	width: 660px;
	height: 500px;
	margin: auto;
}
.cow .candidate.rankin{
	background: url(../img/210126_bg_rankin.jpg) center;
	padding: 80px 0 0;
}
.cow .candidate.rankin:before{
	background: url(../img/210126_bg_bara2.png) no-repeat;
	position: absolute;
	top: 5px;
	bottom: auto;
	right: -550px;
	width: 289px;
	height: 287px;
}
.cow .candidate h2{








	text-align: center;
	margin: 0 0 50px;
	position: relative;
}
.cow .candidate .text{
	position: relative;
	text-align: center;
	color: #fff;
	font-size: 16px;
	margin: 0 0 60px;
	z-index: 1;
}
.cow .candidate ul{
	display: flex;
	flex-flow: wrap;
	position: relative;
}
.cow .candidate ul li{
	width: 308px;
	text-align: center;
	margin: 0 50px 70px 0;
}
.cow .candidate ul li figure{
	position: relative;
	margin: 0;
}
.cow .candidate ul li figure .number{
	position: absolute;
	bottom: -12px;
	left: 30px;
}
.cow .candidate ul li:nth-child(3n){
	margin: 0 0 70px;
}
.cow .candidate ul li table{
	border: 1px solid #000;
	margin: 30px 0 20px;
}
.cow .candidate ul li table th{
	padding: 10px;
	width: 40px;
	border: 1px solid #000;
	background: #313131;
	color: #a5a5a5;
	text-align: center;
}
.cow .candidate ul li table th span{
	color: #fff;
	position: relative;
	padding: 0 0 0 20px;
}
.cow .candidate ul li table th span:before{
	content: "+";
	position: absolute;
	top: 0;
	left: -5px;
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 20px;
	color: #fff;
	line-height: 1;
}
.cow .candidate ul li table tr:last-child th{
	cursor: pointer;
}
.cow .candidate ul li table td{
	text-align: left;
	padding: 10px;
	border: 1px solid #000;
	background: #fff;
}
.cow .candidate ul li p {
	margin: 0 0 20px;
	color: #fff;
	font-size: 16px;
	background: #000;
	padding: 10px 0;
	line-height: 1;
}
.cow .candidate ul li p span{
	font-size: 24px;
	margin: 0 0 0 20px;
	vertical-align: middle;
}
.cow .candidate ul li a {

}
.cow .candidate ul li a.on{
	pointer-events: none;
}
.cow .candidate ul li a + span{
	display: block;
	color: #fff;
	margin: 5px 0 0;
}
.cow .candidate .modal{

}
.cow .candidate .modal .profile{
	display: flex;
	justify-content: space-between;
	padding: 50px;
	background: url(../img/bg_modal.jpg);
}
.cow .candidate .modal .profile div{
	width: 560px;
}
.cow .candidate .modal .profile h3{
	font-size: 36px;
	line-height: 1;
}
.cow .candidate .modal .profile h3 img{
	margin: 0 45px 0 0;
}
.cow .candidate .modal .profile p{
	margin: 25px 0 30px;
}
.cow .candidate .modal .profile table{
	border: 1px solid #000;
	font-size: 24px;
	background: #fff;
}
.cow .candidate .modal .profile table th{
	padding: 10px;
	width: 120px;
	border: 1px solid #000;
}
.cow .candidate .modal .profile table td{
	padding: 10px 20px;
	border: 1px solid #000;
}
.cow .candidate .modal .staff{
	display: flex;
	background: #fff;
	justify-content: space-between;
	align-items: flex-start;
	padding: 40px 50px;
}
.cow .candidate .modal .staff div{
	width: 430px;
}
.cow .candidate .modal .staff div p{
	margin: 0 0 40px;
	line-height: 1.4;
}
.cow .candidate .modal .staff div p:last-child{
	margin: 0;
}
.cow .candidate .modal .staff div p span{
	display: inline-block;
	color: #fff;
	background: #45b187;
	border-radius: 20px;
	padding: 10px 50px;
	margin: 0 0 30px;
	text-align: center;
	position: relative;
}
.cow .candidate .modal .staff div p span:before{
	content: "";
	position: absolute;
    left: 0;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
	border-top: 8px solid #45b187;
	bottom: -13px;
	right: 0;
	margin: auto;
}
.cow .candidate .over{
	width: 100%;
	margin: 0;
}


.cow .champion{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 180px 50px 100px;
	position: relative;
}
.cow .champion:before{
	content: "";
	position: absolute;
	top: 0;
	left: -800px;
	right: 0;
	margin: auto;
	width: 786px;
	height: 250px;
	background: url(../img/bg_bloom4.png) no-repeat;
}
.cow .champion:after{
	content: "";
	position: absolute;
	top: 100px;
	left: 0;
	right: -1050px;
	margin: auto;
	width: 92px;
	height: 94px;
	background: url(../img/bg_bloom3.png) no-repeat;
}
.cow .champion div{
	text-align: center;
	width: 550px;
	position: relative;
}
.cow .champion h2{
	margin: 0 0 40px;
	font-size: 36px;
	font-weight: bold;
}
.cow .champion figure{

}
.cow .champion p{
	margin: 0 0 60px;
	text-align: left;
	line-height: 2;
}
.cow .champion span{
	font-size: 24px;
	font-weight: bold;
}

.cow .area{
	background: url(../img/bg_area.png) top center;
	padding: 65px 0 70px;
	position: relative;
}
.cow .area h2{
	text-align: center;
	margin: 0 0 60px;
}
.cow .area .arealist{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.cow .area dl{
	width: 48%;
	margin: 0 0 30px;
}
.cow .area dl dt{
	color: #fff;
	padding: 5px 15px;
	display: inline-block;
	line-height: 1;
}
.cow .area dl dt.pink{
	background: #fe4a67;
}
.cow .area dl dt.orange{
	background: #fea74a;
}
.cow .area dl dt.blue{
	background: #348da7;
}
.cow .area dl dd{
	border-bottom: 1px dashed #ccc;
	position: relative;
}
.cow .area dl dd img{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.cow .area dl dd a{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20px 0 0;
	color: #000;
	z-index: 1;
	box-sizing: border-box;
}
.cow .area dl dd p{
	padding: 50px 0 10px;
	color: #555;
}
.cow .area dl + span{
	width: 100%;
}
.cow .area .more{
	display: block;
	width: 400px;
	padding: 20px 0;
	margin: 80px auto 0;
	position: relative;
	text-decoration: none;
	text-align: center;
	border: 1px solid #000;
	border-radius: 30px;
	font-size: 16px;
	color: #333333;
}
.cow .area .more:after{
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    right: 30px;
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cow .modal{display:none;}
.cow .modal_block{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index:10;
	overflow: auto;
	background: rgba(0,0,0,.4);
}
.cow .modal_block .inner{
	margin: 40px auto;
	position: relative;
	z-index: 11;
}
.cow .bg_modal{
	position: fixed;
	top: 0;
	left: 0;
	z-index:9;
	height:100%;
	width:100%;
	background: rgba(0,0,0,.4);
}
.cow .close{
	position: absolute;
	left: 0;
	right: -965px;
	cursor: pointer;
	width: 60px;
	height: 60px;
	margin: auto;
	padding: 38px 0 0;
	background: #0a0b01;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	font-size: 12px;
}
.cow .close:before{
	content: "×";
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	font-size: 42px;
	line-height: 0;
}

/* for responsive */
#slide_menu {
    display: none;
}

.sp_header,
.sp_footer {
    display: none;
}

.shop_link {
    text-align: right;
    font-size: 11px;
    width: 980px;
    margin: 5px auto 0;
}

.spOnly {
    display: none !important;
}