@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;
	}
	
	.itemName{
		display: block;
		text-align: center;
		margin-bottom: 60px;
	}
	
	.itemName a{
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.itemName a:hover{
		text-decoration: underline;
	}
	
	.itemImg{
		display: block;
		text-align: center;
		margin-bottom: 60px;
	}
	
	.itemImg img{
		width: 100%;
		max-width: 500px;
	}
	
	.itemImg a:hover{
		opacity: 0.8;
	}
	
	.itemTxt{
		font-size: 14px;
		line-height: 2em;
		text-align: center;
		letter-spacing: 0.1em;
		margin-bottom: 60px;
		padding: 0 10%;
	}
	
	.itemLink a{
		display: block;
		box-sizing: border-box;
		width: 360px;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		padding: 20px 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;
	}
	
	/* セッティング
	-------------------------------------------------- */
	#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;
	}
	
	.itemName{
		display: block;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.itemName a{
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	
	.itemImg{
		display: block;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.itemImg a img{
		width: 100%;
		max-width: 500px;
	}
	
	.itemTxt{
		font-size: 14px;
		line-height: 1.8em;
		text-align: left;
		margin-bottom: 40px;
	}
	
	.itemLink a{
		display: block;
		box-sizing: border-box;
		width: 90%;
		background: #b60005;
		border: 1px solid #b60005;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		padding: 10px 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;
	}
	
	/* セッティング
	-------------------------------------------------- */
	#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;
	}
}