@charset "utf-8";

/* PC用 */
@media screen and (min-width:1200px){
	body{
		font-family: YuGothic,'Yu Gothic','Yu Gothic UI','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
		background: #e9e9e9;
		color: #333333;
	}
	
	main{
		padding: 40px 0;
	}
	
	main h2{
		font-size: 50px;
		line-height: 50px;
		font-family: Oswald, "Noto Sans JP", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-align: center;
	}
	
	main h2 span{
		display: block;
		font-size: 18px;
		line-height: 18px;
		margin-top: 10px;
	}
	
	.wrap{
		width: 1200px;
		margin: 40px auto 0;
		padding: 60px 0;
		background: #ffffff;
	}
	
	/* プロフィール
	-------------------------------------------------- */
	.secInner_flex{
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}
	
	.photo{
		width: 50%;
		text-align: center;
	}
	
	.photo .player img{
		width: 330px;
		height: auto;
	}
	
	.sign{
		display: block;
		width: 180px;
		position: absolute;
		top: 0;
		left: 35%;
	}
	
	.sign img{
		width: 100%;
	}
	
	.detail{
		width: 50%;
	}
	
	.name{
		display: block;
		text-align: center;
		font-size: 24px;
		font-weight: 600;
	}
	
	.alphabet{
		display: block;
		text-align: center;
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	
	.detail ul.sns{
		display: flex;
		justify-content: center;
		margin: 40px 0;
	}
	
	.detail li{
		margin: 0 10px;
	}
	
	.detail li img{
		width: 40px;
		transition: 0.4s;
	}
	
	.detail li a:hover img{
		transform: scale(1.1);
	}
	
	.detail dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.detail dt,
	.detail dd{
		display: block;
		box-sizing: border-box;
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 2em;
	}
	.detail dt{font-weight: 600;}
	.detail dd:before{content: "：";}
	
	/* プレイヤーモデル
	-------------------------------------------------- */
	#model{
		background: #fafafa;
		padding: 60px 0;
	}
	
	.secInner_model h2{
		font-size: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_model h2 span{
		font-size: 16px;
		font-weight: normal;
	}
	
	.playerModel{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	
	.playerModel li{
		box-sizing: border-box;
		margin: 0 10px;
		padding: 20px;
		background: #ffffff;
		border-radius: 20px;
	}
	
	.playerModel li > a{
		display: block;
		box-sizing: border-box;
		border-radius: 20px;
		text-decoration: none;
		color: #5b5fc7;
	}
	
	.playerModel img{
		width: auto;
		height: 100%;
		max-height: 300px;
		margin: 0 auto;
	}
	
	.playerModel li > a:hover img{
		opacity: 0.8;
	}
	
	.itemImg{
		margin-bottom: 20px;
		text-align: center;
	}
	
	.itemName{
		display: block;
		margin-bottom: 10px;
		text-align: left;
		line-height: 1.6em;
		font-weight: 600;
		font-size: 14px;
	}
	.playerModel li a:hover .itemName{
		text-decoration: underline;
	}
	
	.releaseDate{
		color: #cc0000;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 15px;
	}
	
	.itemTxt{
		display: block;
		font-size: 14px;
		line-height: 1.8em;
		text-align: left;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
		flex-grow: 1;
	}
	
	.itemLink a{
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 360px;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		padding: 15px 0;
		margin: 0 auto;
		border-radius: 5px;
		position: relative;
		z-index: 1;
		transition: 0.4s;
		text-decoration: none;
	}
	
	.itemLink a:hover{
		background: #ffffff;
		color: #b60005;
		text-decoration: none;
	}
	
	.itemLink a::after{
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		top: 50%;
		right: 30px;
		-webkit-transform: rotate(45deg) translateY(-50%);
		transform: rotate(45deg) translateY(-50%);
		transition: 0.4s;
	}
	.itemLink a:hover::after{
		border-top: 2px solid #b60005;
		border-right: 2px solid #b60005;
		right: 20px;
	}
	
	.slick-prev {
		height: 30px;
		left: -30px;
		top: 44.5%;
		z-index: 100;
	}
	
	.slick-next {
		height: 30px;
		right: -30px;
		top: 44.5%;
		z-index: 100;
	}
	
	.slick-prev::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		color: #000000;
		line-height: 1;
		width: 1em;
		height: 1em;
		border: 5px solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateX(25%) rotate(-135deg);
		opacity: 1;
	}
	
	.slick-next::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		color: #000000;
		line-height: 1;
		width: 1em;
		height: 1em;
		border: 5px solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateX(-25%) rotate(45deg);
		opacity: 1;
	}
	
	/* スライド3枚未満
	-------------------------------------------------- */
	.playerModel.slideOne{
		display: flex;
		justify-content: center;
	}
	
	.playerModel.slideOne li{
		width: 100%;
		max-width: 314px;
	}
	
	/* セッティング
	-------------------------------------------------- */
	#setting{
		padding: 60px 0;
	}
	
	.secInner_setting h2{
		font-size: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_setting h2 span{
		font-size: 16px;
		font-weight: normal;
	}
	
	ul.setting_list{
		width: 900px;
		margin: 0 auto 60px;
		border-top: 1px solid #cccccc;
	}
	
	ul.setting_list li{
		display: flex;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid #cccccc;
	}
	
	ul.setting_list li a{
		text-decoration: none;
		color: #333333;
		font-weight: 600;
		padding: 5px 20px 5px 70px;
		font-size: 14px;
		letter-spacing: 0.1em;
		display: block;
		width: 100%;
	}
	
	ul.setting_list li:nth-child(1) a{
		background: url("../img/icon_barrel.png") left 20px center no-repeat;
		background-size: 28px;
	}
	
	ul.setting_list li:nth-child(2) a{
		background: url("../img/icon_flight.png") left 20px center no-repeat;
		background-size: 28px;
	}
	
	ul.setting_list li:nth-child(3) a{
		background: url("../img/icon_shaft.png") left 20px center no-repeat;
		background-size: 28px;
	}
	
	ul.setting_list li:nth-child(4) a{
		background: url("../img/icon_tip.png") left 20px center no-repeat;
		background-size: 28px;
	}
	
	ul.setting_list li a:hover{
		text-decoration: underline;
	}
	
	/* グリップ
	-------------------------------------------------- */
	#grip{
		padding: 60px 0;
	}
	
	.secInner_grip h2{
		font-size: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_grip h2 span{
		font-size: 16px;
		font-weight: normal;
	}
	
	.grip_photo{
		display: flex;
		justify-content: space-between;
		width: 1100px;
		margin: 60px auto;
	}
	
	.grip_photo li{
		width: 32%;
		box-sizing: border-box;
		border: 2px solid #cccccc;
	}
	
	.grip_photo li img{
		width: 100%;
	}
	
	/* YouTube
	-------------------------------------------------- */
	#youtube{
		padding: 60px 0;
	}
	
	.secInner_youtube{
		width: 1100px;
		margin: 0 auto;
	}
	
	.secInner_youtube h2{
		font-size: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_youtube h2 span{
		font-size: 16px;
		font-weight: normal;
	}
	
	.flexBlock{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #efefef;
	}
	
	.flexRight{
		box-sizing: border-box;
		width: 100%;
		padding: 20px;
	}
	
	.channel_icon{
		display: block;
		overflow: hidden;
		border-radius: 50%;
		width: 80px;
		margin: 0 auto 10px;
	}
	
	.channel_icon img{
		width: 100%;
	}
	
	.channel_name{
		display: block;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
	
	.channel_info{
		display: block;
		margin-top: 20px;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 2em;
	}
	
	.channel_link a{
		display: block;
		box-sizing: border-box;
		width: 180px;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		line-height: 14px;
		font-weight: 600;
		padding: 13px 0;
		margin: 20px auto 0;
		border-radius: 5px;
		position: relative;
		z-index: 1;
		transition: 0.4s;
		text-decoration: none;
	}
	.channel_link a:hover{
		background: #ffffff;
		color: #b60005;
	}
	
	.channel_link a::after{
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		top: 50%;
		right: 20px;
		margin-top: -1px;
		transform: rotate(45deg) translateY(-50%);
		transition: 0.4s;
	}
	.channel_link a:hover::after{
		border-top: 2px solid #b60005;
		border-right: 2px solid #b60005;
		right: 15px;
	}
}

/* SP用 */
@media screen and (max-width:1199px){
	body{
		font-family: YuGothic,'Yu Gothic','Yu Gothic UI','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
		background: #e9e9e9;
		color: #333333;
	}
	
	main{
		padding: 40px 0;
	}
	
	main h2{
		font-size: 40px;
		line-height: 40px;
		font-family: Oswald, "Noto Sans JP", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-align: center;
	}
	
	main h2 span{
		display: block;
		font-size: 14px;
		line-height: 14px;
		margin-top: 10px;
	}
	
	.wrap{
		width: 90%;
		margin: 40px auto 0;
		padding: 30px 0 0;
		background: #ffffff;
		overflow: hidden;
	}
	
	/* プロフィール
	-------------------------------------------------- */
	.secInner_flex{
		width: 100%;
	}
	
	.player{
		display: block;
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
	
	.player img{
		width: 100%;
		max-width: 330px;
	}
	
	.sign{
		display: block;
		width: 160px;
		margin: 20px auto;
	}
	
	.sign img{
		width: 100%;
	}
	
	.detail{
		width: 100%;
		margin: 10px auto 0;
	}
	
	.name{
		display: block;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
	}
	
	.alphabet{
		display: block;
		text-align: center;
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	
	.detail ul.sns{
		display: flex;
		justify-content: center;
		margin: 40px 0;
	}
	
	.detail li{
		margin: 0 10px;
	}
	
	.detail li img{
		width: 40px;
		transition: 0.4s;
	}
	
	.detail li a:hover img{
		transform: scale(1.1);
	}
	
	.detail dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.detail dt,
	.detail dd{
		display: block;
		box-sizing: border-box;
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 2em;
	}
	.detail dt{font-weight: 600;}
	.detail dd:before{content: "：";}
	
	/* プレイヤーモデル
	-------------------------------------------------- */
	#model{
		background: #fafafa;
		padding: 40px 0;
		margin-top: 40px;
	}
	
	.secInner_model{
		width: 90%;
		margin: 0 auto;
	}
	
	.secInner_model h2{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_model h2 span{
		font-size: 14px;
		font-weight: normal;
	}
	
	.slick-dotted.slick-slider{
		margin-bottom: 0;
	}
	
	.playerModel{
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
	}
	
	.playerModel li{
		box-sizing: border-box;
		padding: 20px;
		background: #ffffff;
		border-radius: 20px;
	}
	
	.playerModel li > a{
		color: #5b5fc7;
		text-decoration: none;
	}
	
	.playerModel img{
		width: auto;
		height: 100%;
		max-height: 200px;
		margin: 0 auto;
	}
	
	.itemImg{
		margin-bottom: 20px;
	}
	
	.itemName{
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		line-height: 1.6em;
		margin-bottom: 10px;
	}
	
	.releaseDate{
		color: #cc0000;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 15px;
	}
	
	.itemTxt{
		display: block;
		font-size: 14px;
		line-height: 1.8em;
		text-align: left;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	
	.itemLink a{
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 360px;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		padding: 15px 0;
		margin: 0 auto;
		border-radius: 5px;
		position: relative;
		z-index: 1;
		transition: 0.4s;
		text-decoration: none;
	}
	
	.itemLink a:hover{
		background: #ffffff;
		color: #b60005;
	}
	
	.itemLink a::after{
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		top: 50%;
		right: 30px;
		-webkit-transform: rotate(45deg) translateY(-50%);
		transform: rotate(45deg) translateY(-50%);
		transition: 0.4s;
	}
	.itemLink a:hover::after{
		border-top: 2px solid #b60005;
		border-right: 2px solid #b60005;
		right: 20px;
	}
	
	.slick-prev {
		height: 30px;
		left: 5%;
		top: 18%;
		z-index: 100;
	}
	
	.slick-next {
		height: 30px;
		right: 5%;
		top: 18%;
		z-index: 100;
	}
	
	.slick-prev::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		color: #000000;
		line-height: 1;
		width: 1em;
		height: 1em;
		border: 5px solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateX(25%) rotate(-135deg);
		opacity: 1;
	}
	
	.slick-next::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		color: #000000;
		line-height: 1;
		width: 1em;
		height: 1em;
		border: 5px solid currentColor;
		border-left: 0;
		border-bottom: 0;
		box-sizing: border-box;
		transform: translateX(-25%) rotate(45deg);
		opacity: 1;
	}
	
	.slick-dots{
		position: static;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}
	
	.slick-dots li{
		background: none;
		padding: 0;
		width: 10px;
		height: 10px;
		margin: 0 5px;
	}
	
	.slick-dots li button{
		padding: 0;
		width: 10px;
		height: 10px;
		background: #000000;
		border-radius: 100%;
	}
	
	.slick-dots li button:before{
		display: none;
	}
	
	.slick-dots .slick-active button{
		background: #cc0000;
	}
	
	/* セッティング
	-------------------------------------------------- */
	#setting{
		padding: 40px 0;
	}
	
	.secInner_setting{
		width: 90%;
		margin: 0 auto;
	}
	
	.secInner_setting h2{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_setting h2 span{
		font-size: 14px;
		font-weight: normal;
	}
	
	ul.setting_list{
		width: 100%;
		margin: 0 auto 40px;
		border-top: 1px solid #cccccc;
	}
	
	ul.setting_list li{
		padding: 20px;
		border-bottom: 1px solid #cccccc;
	}
	
	ul.setting_list li::before{
		content: "";
		display: block;
		width: 25px;
		height: 25px;
		margin-bottom: 10px;
	}
	
	ul.setting_list li:nth-child(1)::before{
		background: url("../img/icon_barrel.png") 0 0 no-repeat;
		background-size: 25px 25px;
	}
	
	ul.setting_list li:nth-child(2)::before{
		background: url("../img/icon_flight.png") 0 0 no-repeat;
		background-size: 25px 25px;
	}
	
	ul.setting_list li:nth-child(3)::before{
		background: url("../img/icon_shaft.png") 0 0 no-repeat;
		background-size: 25px 25px;
	}
	
	ul.setting_list li:nth-child(4)::before{
		background: url("../img/icon_tip.png") 0 0 no-repeat;
		background-size: 25px 25px;
	}
	
	ul.setting_list li a{
		text-decoration: none;
		color: #333333;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	
	/* グリップ
	-------------------------------------------------- */
	#grip{
		padding: 40px 0;
	}
	
	.secInner_grip{
		width: 90%;
		margin: 0 auto;
	}
	
	.secInner_grip h2{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_grip h2 span{
		font-size: 14px;
		font-weight: normal;
	}
	
	.grip_photo{
		width: 100%;
		margin: 40px auto;
	}
	
	.grip_photo li{
		width: 100%;
		box-sizing: border-box;
		border: 2px solid #cccccc;
		margin-bottom: 20px;
	}
	
	.grip_photo li img{
		width: 100%;
	}
	
	/* YouTube
	-------------------------------------------------- */
	#youtube{
		padding: 40px 0;
	}
	
	.secInner_youtube{
		width: 90%;
		margin: 0 auto;
	}
	
	.secInner_youtube h2{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 0.1em;
		margin-bottom: 40px
	}
	
	.secInner_youtube h2 span{
		font-size: 16px;
		font-weight: normal;
	}
	
	.flexBlock{
		align-items: center;
		background: #efefef;
	}
	
	.flexLeft{
		width: 100%;
		position: relative;
		padding-top: 57%;
	}
	.flexLeft iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.flexRight{
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 40px;
	}
	
	.channel_icon{
		display: block;
		overflow: hidden;
		border-radius: 50%;
		width: 80px;
		margin: 20px auto;
	}
	
	.channel_icon img{
		width: 100%;
	}
	
	.channel_name{
		display: block;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}
	
	.channel_info{
		display: block;
		width: 90%;
		margin: 20px auto;
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		letter-spacing: 0.1em;
		line-height: 2em;
	}
	
	.channel_link a{
		display: block;
		box-sizing: border-box;
		width: 180px;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		line-height: 14px;
		font-weight: 600;
		padding: 13px 0;
		margin: 20px auto 0;
		border-radius: 5px;
		position: relative;
		z-index: 1;
		transition: 0.4s;
		text-decoration: none;
	}
	.channel_link a:hover{
		background: #ffffff;
		color: #b60005;
	}
	
	.channel_link a::after{
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		top: 50%;
		right: 20px;
		margin-top: -1px;
		transform: rotate(45deg) translateY(-50%);
		transition: 0.4s;
	}
	.channel_link a:hover::after{
		border-top: 2px solid #b60005;
		border-right: 2px solid #b60005;
		right: 15px;
	}
}