@charset "utf-8";

	#sports2017 {background-color: #fff;}
	#sports2017 img,
	#sports2017 h2 {width: 100%; height: auto;}
	#sports2017 ul {margin: 0; padding: 0; list-style-type: none;}
	.sports2017-top ul {text-align: center;}
	.sports2017-top li {display: inline-block; vertical-align: top; cursor: pointer;}
	#sports2017 .cate h3 {text-align: center;}
	
	.cate-body {
		box-sizing: border-box;
		background-color: #f7f4e8; border-radius: 10px;
		box-shadow: 3px 3px 2px rgba(0,0,0,.25);
		-webkit-box-shadow: 3px 3px 2px rgba(0,0,0,.25);
		-moz-box-shadow: 3px 3px 2px rgba(0,0,0,.25);
		-ms-box-shadow: 3px 3px 2px rgba(0,0,0,.25);
	}
	.cate-body .txt span {font-size: 10px;}
	.recipeArea .recipe a .txt {color: #000;}
	
	/* lead */
	.cate-body .lead .txt {text-align: justify; line-height: 1.8em; font-weight: bold;}
	.cate-body .lead .icon img {width: 100%;}
	#cate1 .cate-body .lead-body .txt {color: #f7546e;}
	#cate2 .cate-body .lead-body .txt {color: #ff972e;}
	#cate3 .cate-body .lead-body .txt {color: #00b5aa;}
	#cate4 .cate-body .lead-body .txt {color: #13aeeb;}
	#cate5 .cate-body .lead-body .txt {color: #bf8c00;}
	#cate6 .cate-body .lead-body .txt {color: #83bd0d;}
	
	#cate7 .cate-body .lead .txt {color: #8f74cf;}
	.cate-body li a {display: block; width: 100%; height: 100%;}
	
	.accordion {cursor: pointer;}
	.accordion + .accordion-body {display: none;}
	
	#cate1 .pickup1 {background: linear-gradient(#fb5414, #cf410f); border: solid 2px #ef3d0b; border-radius: 10px;}
	#cate1 .pickup2 {background: linear-gradient(#85e0e6, #2fbfd6); border: solid 2px #37b5d0; border-radius: 10px;}
	#cate6 .pickup .pickup-body {background: linear-gradient(#ffd71e, #ffb41e); border: solid 2px #eeac0d; border-radius: 10px;}

/* === PC === */
@media screen and (min-width: 641px), print and (min-width: 0px) {
	
	.pc-none {display: none!important;}
	#try {margin: 30px 0; padding-bottom: 30px; background-color: #fff;}
	#try ul {list-style-type: none; margin: 20px 0 0; padding: 0; text-align: center;}
	#try li {display: inline-block; vertical-align: top; width: 410px; hieght: 270px; margin: 0 10px;}
	#try li,
	.cate-body h4,
	.accordion {
		transition: opacity .15s linear;
		-webkit-transition: opacity .15s linear;
	}
	#try li:hover,
	.cate-body h4:hover,
	.accordion:hover {opacity: .7;}
	
	
	#sports2017 {width: 900px; margin: 0 auto;}
	.sports2017-top {margin: 15px 0;}
	.sports2017-top h3,
	.sports2017-top ul {display: inline-block; vertical-align: middle;}
	.sports2017-top h3 {width: 273px; height: 73px;}
	.sports2017-top li {
		position: relative; width: 67px; height: 67px; margin: 0 0 0 15px;
		transition: transform .15s linear;
		-webkit-transition: transform .15s linear;
	}
	.sports2017-top li:nth-oftype(1) {margin-left: 15px;}
	.sports2017-top li:hover {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	#sports2017 .cate {margin-top: 40px;}
	#sports2017 .cate h3 {text-align: center;}
	
	.cate-body {width: 850px; margin: -60px auto 0; padding: 60px 25px 30px;}
	.cate-body li {width: 262px; height: auto;}
	.cate-body li,
	.cate-body .lead h4,
	.cate-body .lead-body {display: inline-block; vertical-align: top;}
	
	/* lead */
	.cate-body .lead {width: 100%; margin-bottom: 20px;}
	.cate-body .lead h4,
	.cate-body .lead-body {width: 380px;}
	.cate-body .lead-body {margin-left: 40px; text-align: justify;}
	.cate-body .lead-body .txt {font-size: 16px;}
	.cate-body .lead-body .icon {width: 130px; margin: 0 auto 20px;}
	.cate-body .lead-body .txt img {display: none;}
	.cate-body li {margin: 0 7px 0 0;}
	.cate-body li:last-child {margin-right: 0;}
	
	/* cate1 */
	#cate1 .sub1 {position: relative; width: 800px; margin: 20px auto 0;}
	#cate1 .sub1 h5 {width: 460px;}
	#cate1 .sub1 .txt {position: absolute; top: 130px; left: 31px; width: 360px; text-align: justify; font-size: 14px;}
	#cate1 .sub1 .ill {position: absolute; right: 0; top: 0; width: 320px;}
	
	#cate1 .pickup1 {width: 850px; margin: 30px auto 0; text-align: center;}
	#cate1 .pickup1 .accordion-body {padding-bottom: 20px;}
	#cate1 .pickup1 .txt {width: 730px; margin: 10px auto 30px; padding: 30px; background-color: #ffd000; border-radius: 10px; box-sizing: border-box; text-align: justify; font-size: 14px;}
	
	#cate1 .pickup2 {width: 850px; margin: 30px auto 0;}
	#cate1 .pickup2 h4 {position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; z-index: 10;}
	#cate1 .pickup2 .pickup2-body {position: relative; width: 800px; margin: 0 auto 25px; padding: 0 25px 50px; box-sizing: border-box; background: url("../img/cate5_sub_base.png") repeat center top; border-radius: 10px; text-align: center;}
	#cate1 .pickup2 .pickup2-body .ill {position: absolute; left: 50px; top: 50px;}
	#cate1 .pickup2 .pickup2-body h5 {position: relative; top: 30px; margin: 0 0 40px; text-align: center;}
	#cate1 .pickup2 .pickup2-body h5.c {top: 0; width: 476px; margin: 0 auto 10px;}
	#cate1 .pickup2 .pickup2-body h5.l,
	#cate1 .pickup2 .pickup2-body .txt.l {margin-left: 210px;}
	#cate1 .pickup2 .pickup2-body .txt {margin-top: 20px; text-align: justify; font-size: 14px; line-height: 1.6em;}
	#cate1 .pickup2 .pickup2-body .txt.l {margin-bottom: 50px;}
	#cate1 .pickup2 .pickup2-body .txt.l img {display: none;}
	#cate1 .pickup2 .pickup2-body ul {margin-bottom: 20px;}
	#cate1 .pickup2 .pickup2-body li {display: inline-block; vertical-align: top; width: 230px; height: auto; margin: 0;}
	#cate1 .pickup2 .pickup2-body li:nth-of-type(2) {margin: 0 30px;}
	#cate1 .pickup2 .pickup2-body .lead {width: 700px; margin: 0 auto;}
	
	/* cate2 */
	#cate2 .sub1 {position: relative; width: 800px; margin: 20px auto 0;}
	#cate2 .sub1 h5 {width: 460px;}
	#cate2 .sub1 .txt {position: absolute; top: 110px; left: 31px; width: 360px; text-align: justify; font-size: 14px;}
	#cate2 .sub1 .ill {position: absolute; right: 30px; top: 20px; width: 296px;}
	
	#cate6 .pickup {width: 850px; margin: 30px auto 0;}
	#cate6 .pickup .pickup-body {text-align: center;}
	#cate6 .pickup ul {padding-bottom: 20px;}
	#cate6 .pickup li {display: inline-block; vertical-align: top; width: 262px; height: auto; margin: 0;}
	#cate6 .pickup li:nth-of-type(2) {margin: 0 6px;}
	
	#fixMenu,
	#sports2017 img.slide-arrow {display: none;}
	
}


/* === SP === */
@media screen and (max-width: 640px) {
	
	.sp-none {display: none!important;}
	#sports2017 {position: relative; width: 94%; margin: 0 auto;}
	#sports2017 img {width: 100%; height: auto; vertical-align: top;}
	#try {padding: 0 0 3%; background-color: #fff;}
	#try ul {width: 90%; list-style-type: none; margin: 0 auto;}
	#try li {width: 100%; hieght: auto; margin: 1rem auto;}
	
	#sports2017 .sports2017-top#pcMenu {margin-top: 1rem;}
	#sports2017 .sports2017-top ul {margin-top: 2rem;}
	.sports2017-top li {width: 4.5rem; height: 4.5rem; margin: 0 .2rem;}
	#sports2017 .sports2017-top#fixMenu ul {margin-top: 0; padding: 0 3%; text-align: left;}
	.sports2017-top#fixMenu li {display: block; width: 100%; height: auto; padding: .5rem 0; border-bottom: solid 1px rgba(251,96,0,1);}
	.sports2017-top#fixMenu li img,
	.sports2017-top#fixMenu li span {display: inline-block; vertical-align: middle;}
	.sports2017-top#fixMenu li img {width: 4rem; height: 4rem; margin: 0;}
	.sports2017-top#fixMenu li span {width: calc(100% - 4rem); padding-left: .5rem; box-sizing: border-box; font-size: 14px;}
	#sports2017 .cate {margin-top: 1rem;}
	.cate-body {width: 94%; margin: -3rem auto 0; padding: 3rem 3% 5%; box-sizing: border-box;}
	
	#sports2017 .cate h3 {width: 100%; margin: 0 auto;}
	
	/* lead */
	.cate-body .lead {display: none!important;}
	.cate-body .lead-body {margin: 1rem 0;}
	.cate-body .lead-body .txt {font-size: 14px; text-align: justify; font-weight: bold;}
	#sports2017 .cate-body .lead-body .txt img {float: left; width: 8rem; height: auto; margin: 0 auto .2rem;}
	
	/* cate1 */
	#cate1 .sub1 {position: relative; margin: 0 auto;}
	#cate1 .sub1 .txt {position: absolute; top: 24%; left: 0; padding: 0 3%; text-align: justify; font-size: 12px;}
	#cate1 .sub1 .ill {width: 80%; margin: .5rem auto 0;}
	
	#cate1 .pickup1 {width: 94%; margin: 1rem auto 0;}
	#cate1 .pickup1 .accordion-body {padding-bottom: 20px;}
	#cate1 .pickup1 .txt {width: 90%; margin: 1rem auto; padding: 5%; background-color: #ffd000; border-radius: 10px; box-sizing: border-box; text-align: justify; font-size: 14px;}
	
	#cate1 .pickup2 {position: relative; width: 94%; margin: 1rem auto;}
	#cate1 .pickup2 h4 {margin: 0 auto; text-align: center;}
	#cate1 .pickup2 .pickup2-body {position: relative; width: 90%; margin: 0 auto 1rem; padding: 0 3% 4%; box-sizing: border-box; background: url("../img/cate5_sub_base.png") repeat center top; border-radius: 10px; text-align: center;}
	#cate1 .pickup2 .pickup2-body .ill {display: none;}
	#cate1 .pickup2 .pickup2-body h5 {margin: 0 0 10px; text-align: center;}
	#cate1 .pickup2 .pickup2-body .txt {margin-top: 20px; text-align: justify; font-size: 13px; line-height: 1.6em;}
	#cate1 .pickup2 .pickup2-body .txt.l {margin-bottom: 2rem;}
	#cate1 .pickup2 .pickup2-body .txt.l img {float: left; width: 30%; margin: 0 3% 3% 0;}
	#cate1 .pickup2 .pickup2-body ul {margin-bottom: 2rem;}
	#cate1 .pickup2 .pickup2-body li {width: 100%; height: auto; margin: 0 auto 2%;}
	#cate1 .pickup2 .pickup2-body .lead {width: 96%; height: auto; margin: 0 auto;}
	
	/* cate2 */
	#cate2 .sub1 {position: relative; margin: 0 auto;}
	#cate2 .sub1 .txt {position: absolute; top: 17%; left: 0; padding: 0 3%; text-align: justify; font-size: 12px;}
	#cate2 .sub1 .ill {width: 80%; margin: .5rem auto 0;}
	
	#cate6 .pickup {width: 94%; margin: 1rem auto 0; box-sizing: border-box;}
	#cate6 .pickup h4 {width: 100%; margin: 0;}
	#cate6 .pickup .pickup-body {position: relative; text-align: center;}
	#cate6 .pickup ul {padding-bottom: 2rem;}
	#cate6 .pickup li {width: 80%; height: auto; margin: 1rem auto 0;}
	
	
	#sports2017 .cate#cate7 {margin-bottom: 1.5rem;}
	
	#fixMenu {position: fixed; right: 0; top: 0; z-index: 100; width: 100%; height: auto;}
	#fixMenu h3,
	#fixMenu ul {display: none;}
	#fixMenu.opened {height: 100%; padding: 70px 0 8%; background-color: rgba(255,255,255,.95); overflow: auto; box-sizing: border-box;}
	#fixMenu.opened h3,
	#fixMenu.opened ul {display: block;}
	/* SP-menu */
	#SP-menu {
		display: none;
		position: fixed;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 200;
		background-color: rgba(251,96,0,.9);
	}
	#sports2017-top-spMenu #SP-menu {position: absolute;}
	
	#SP-menu:after {display: table; vertical-align: middle;}
	#SP-menu span {
		display: block;
		position: absolute;
		left: 50%;
		width: 20px;
		height: 2px;
		margin-left: -10px;
		transition: all .2s;
		-weblit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		background-color: #fff;
	}
	#SP-menu span:first-child {top: 16px;}
	#SP-menu span:nth-child(2) {top: 24px;}
	#SP-menu span:last-child {top: 32px;}

	#SP-menu.opened span:first-child {
		-webkit-transform: translateY(8px) rotate(45deg);
		transform: translateY(8px) rotate(45deg);
		background-color: #fff;
	}

	/* .opened */
	#SP-menu.opened span:nth-child(2) {opacity: 0;}
	#SP-menu.opened span:last-child {
		-webkit-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) rotate(-45deg);
		background-color: #fff;
	}
	
	#sports2017 img.slide-arrow {position: absolute; width: 1.4rem; height: 1.4rem; z-index: 50; cursor: pointer;}
	.slider {padding-bottom: 0;}
	.slider li {padding: 0 1.5rem; box-sizing: border-box;}
	.slider .slick-list {margin: 0;padding: 0;}
	.slick-list li {width: 100%; height: 100%;}
	.slider li img {width: 100%; margin: auto;}
	.slide-arrow {top: 33%;}
	.slide-arrow.prev-arrow {left: -.2rem;}
	.slide-arrow.next-arrow {right: -.2rem;}
	
	/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		slider li {width: 240px!important;}
	}
	
	#pagetop-footer {padding: 0 5% 5%;}
	.pagetop {opacity: 0!important;}
}


@media (max-width: 640px) {
	#sports2017 h2 {
		margin: 0;
	}
	.pickup1 h4 {
		margin: 0;
	}
	#SP-menu {
		margin: 0;
		top: 3em;
	}
	.slider li {
		box-sizing: content-box;
	}
}

@media (min-width: 641px) {
	#cate1 .sub1 h5,
	#cate2 .sub1 h5 {
		margin: 0;
	}
	#try {
		margin-bottom: 0;
	}
}