@charset "utf-8";



/* ヘッダー下固定タイトルCSS --------------------------------------- */

#header-title_height {
    display: flex;
    width: 100%;
    height: 78px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

@media screen and (max-width: 780px) {

  #header-title_height {
    	width: 100%;
		height: 60px;
    	flex-wrap: wrap;
    	flex-direction: column;
    	justify-content: center;
  	}

}



/* デフォルトの幅固定サイズ(1400px)を上書きするクラス ----------------------- */
.width-org {
    max-width: 1400px;
}



/* メインコンテンツ:スクロール背景とヘッダ下の位置調整 ----------------------- */
#all_bg {
	position: relative;
	top: 60px; /*ヘッダー下タイトルなし*/
	/*background:url(https://amd-heroes.jp/img/bg-board.png) center -224px;*/
	/*background-color: #000000;*/
	/*top: 135px;*/ /*ヘッダー下タイトルあり*/
}



/* メインビジュアルCSS ------------------------------------------ */

#mv-area {
	/*
	background-image: url(../images/heroimage_bg.jpg);
	background-position: 50% 50%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	*/
	background-color: #000000;
}

.wrapper-mv {
    max-width: 1400px;
    margin: 0 auto;
}



/* セクションごとの設定 */

#desc-area {
	padding:0px 0px 30px 0px ;
	background-color: #000000;
	color: #ffffff;
}

@media screen and (max-width: 768px) {

	#desc-area {
		padding:60px 0;

}
}


/* ディスクレーマー */

#desc-area ul {
	font-size: 1.4rem;
}

#desc-area li {
	list-style-type: square;
	margin-left: 40px;
	line-height: 2.0;
}

@media screen and (max-width: 768px) {

	#desc-area ul {
		font-size: 1.2rem;
	}

	#desc-area li {
		margin-right: 10px;
		margin-bottom: 10px;
		margin-left: 20px;
		line-height: 1.5;
	}

}


/* デフォルトフッター：下に固定のフッターを表示させる場合は、padding-bottomを調整すること */

#footer-area {
	padding-bottom: 30px;
}



/* 固定フッター */

.wrapper-footer {
	max-width: 1400px;
	margin: 0 auto;
}

#footer-bg {
    height: auto;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: #000000;
}

@media screen and (max-width: 768px) {


}


/* 追加CSS */


.contentbox {
	width: 100%;
	padding: 2em 2em;
	margin: 0px 0px 0px 0px;
	display: flex;
    	color: #ffffff;
    	background: #330000;
}

.small{
	font-size: smaller ;
}

@media screen and (max-width: 768px) {
	.contentbox {
	margin: -60px 0px 0px 0px;
	display: block;
}
}

.contentbox02 {
	width: 100%;
	display: block;
}

.imagesbox {
	width: 15%;
	
}

@media screen and (max-width: 768px) {
	.imagesbox {
	width: 50%;
	display: block;
	margin: 0px auto 20px auto;
}
}

.textbox {
	font-size: 1.8em;
	text-align: center;
	line-height: 1.5;
	padding:25px 25px 25px 25px ;
	margin: 0px 0px 0px 0px;
	width: 85%;
}


.textbox2 {
	font-size: 1.6em;
	text-align: left;
	line-height: 2;
	padding: 0px 25px 0px 25px ;
	margin: 20px 30px 0px 30px;
}

.textbox3 {
	font-size: 1em;
	text-align: center;
	line-height: ;
	padding:10px 0px 0px 0px ;
	margin: 0px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
	.textbox {
	font-size: 1.5em;
	text-align: center;
	line-height: 1.5;
	display: block;
	padding:0px 0px 0px 0px ;
	margin: auto;
	width: 100%;
}
}

@media screen and (max-width: 768px) {
	.textbox2 {
	font-size: 1.2em;
	text-align: left;
	line-height: 1.5;
	padding: 0px 10px 0px 10px ;
	margin: 0px 0px 0px 0px;
}
}

.imagesbox3 {
	margin: 50px 0px 0px 0px;
	display: flex;
	
}

@media screen and (max-width: 768px) {
	.imagesbox3 {
	width : 500px;
	display: block;
	margin: 0 auto;
}
}


.imagesbox4 {
	margin: 10px 0px 0px 0px;
	display: flex;
	
}

@media screen and (max-width: 768px) {
	.imagesbox4 {
	width : 500px;
	display: block;
	margin: 0 auto;
}}

.photo {
	margin: 5px 10px 5px 10px;
	width: 32%;
	
}

@media screen and (max-width: 768px) {
	.photo {
	display: block;
	width: 100%;
	margin: 5px 0px 5px 0px;
}}


.box4{
	font-size: 2.5em;
	font-family: serif;
	font-weight: 900;
	padding:20px 0px 20px 0px ;
	margin: 30px 55px 0px 55px;
	text-align: center;
    	color: #CAA846;
    	background:;
    	border: solid 3px #CAA846;
}

@media screen and (max-width: 768px) {
	.box4 {
	font-size: 1.5em;
	font-family: serif;
	font-weight: 900;
	padding:15px 0px 15px 0px ;
	margin: 50px 0px 10px 0px;
}}




.box4 p {
    margin: 0; 
    padding: 0;
}

.box5{
	font-size: 2.5em;
	font-family: serif;
	font-weight: 900;
	padding:25px 0px 20px 0px ;
	margin: 50px 0px 0px 0px;
	text-align: center;
    	color: #fff;
    	background:#CAA846;
    	border-bottom: solid 0px #CAA846;
}

.box5 p {
    margin: 0; 
    padding: 0;
}

@media screen and (max-width: 768px) {
.box5 {
	font-size: 1.5em;

}
}

.fflink {
    	background:#000;
	width : 400px;
	text-align: center;
	margin : 20px auto 0px auto;
  	padding: 15px 0px 15px 0px ;
    	border: solid 3px #CAA846;
	border-radius: 10px;

}

.fflink:hover {
    	background:#333333;
}



.amdpic_box {
	width : 1400px;
	background-color: #000;
	background-image:
	repeating-linear-gradient(-45deg,#330000, #330000 5px,transparent 0, transparent 10px);
	margin: 50px 0px 0px 0px;
    	border: solid 5px #CAA846;
	display : flex;
	flex-wrap : wrap;
}

.amdpic_inbox_left {
	width : 900px;
	height :300px;
	background-color: #000;
	margin: 61px 30px 61px 61px;
    	border: solid 5px #CAA846;
	display: flex;
}

.amdpic_inbox_right {
	width : 300px;
	height :300px;
	background-color: #000;
	margin: 61px 61px 61px 30px;
    	border: solid 5px #CAA846;
	display: flex;
}

.amdpic_text {
	font-size: 1.2em;
	text-align: left;
	line-height: 120%;
	width : ;
	height :;
	background-color: ;
	margin: auto;
}



.container {
	width: 100%;
	margin: 0px 0px 0px 0px;
}


/* ★★★★★推奨PC内部エイリア★★★★★ */

.bto_box {
	width : 100%;
	background-color: #000;
	background-image:
	repeating-linear-gradient(-45deg,#330000, #330000 5px,transparent 0, transparent 10px);
	margin: 0px 0px 0px 0px;
 	padding: 2% 2% 0px 2% ;
	border: solid 5px #CAA846;
	display : flex;
	flex-wrap : wrap;
}

@media screen and (max-width: 768px) {
	.bto_box {
	width : 100%;
 	padding: 0px 0px 0px 0px ;
	display : block;

}
}

/*★★★★★ 推奨PC内部エイリア 左★★★★★ */

.bto_inbox_left {
	width : 49%;
	height : ;
	background-color: #000;
    	border: solid 5px #CAA846;
	margin: 0px 1% 30px 0px;
 	padding: 0px 0px 0px 0px ;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
	.bto_inbox_left {
	width: 100% ;
	height :;
    	border: none;
	margin: 0px 0px 50px 0px;
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-wrap: wrap;
}}

.bto_inbox_left > .title {
	width : 100%;
	height : ;
	background-color: #fff;
	padding: 0px 0px 0px 0px;
	margin: 20px 20px 0px 20px;
    	border: solid 0px ;
	display: flex;
}

@media screen and (max-width: 768px) {
.bto_inbox_left > .title {
	width : 100%;
	height :;
	background-color: #fff;
	margin: 5px 5px 5px 5px;
    	border: solid 0px ;
	position: relative;
}}

.bto_inbox_left > .title > .rec {
	width : 15%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.bto_inbox_left > .title >.rec img{
	width : 100%;
	height :auto ;
	padding: 5px 5px 5px 5px;
}

.bto_inbox_left > .title > p {
	width :85%;
	padding: 5% 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	color : #000 ;
	font-size: 20px ; 
	font-weight: 700 ;
}

@media screen and (max-width: 768px) {
.bto_inbox_left > .title > p {
	font-size: 15px ; 
	font-weight: 700 ;
	padding: 2% 0px 0px 0px;
	margin: 0px 0px 0px 0px;

}}

.bto_inbox_left > .ph {
	width : 100%;
	height : ;
	margin: 10px 20px 0px 20px;
}

.bto_inbox_left > .ph img {
	width : 100%;
}

@media screen and (max-width: 768px) {
.bto_inbox_left > .ph {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	position: relative;
	top: 0px;
	left: 0px;
}
}

.bto_inbox_left > .info {
	width: 100%;
	margin: 0px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:right

}

.bto_inbox_left > .info img {
	width: 150px;


}

@media screen and (max-width: 768px) {
.bto_inbox_left > .info {
	width: 100%;
	height: ;
	margin: 0 auto;
	margin-bottom: ;
	position: static;
	text-align : center

}
}

.bto_inbox_left > .info:hover {
	opacity: 0.6;
}


/*★★★★★ 推奨PC内部エイリア 右★★★★★ */

.bto_inbox_right {
	width : 49%;
	height : ;
	background-color: #000;
    	border: solid 5px #CAA846;
	margin: 0px 0px 30px 1%;
 	padding: 0px 0px 0px 0px ;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
	.bto_inbox_right {
	width: 100% ;
	height :;
    	border: none;
	margin: 0px 0px 50px 0px;
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-wrap: wrap;
}}

.bto_inbox_right > .title {
	width : 100%;
	height : ;
	background-color: #fff;
	padding: 0px 0px 0px 0px;
	margin: 20px 20px 0px 20px;
    	border: solid 0px ;
	display: flex;
}

@media screen and (max-width: 768px) {
.bto_inbox_right > .title {
	width : 100%;
	height :;
	background-color: #fff;
	margin: 5px 5px 5px 5px;
    	border: solid 0px ;
	position: relative;
}}

.bto_inbox_right > .title > .rec {
	width : 15%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.bto_inbox_right > .title >.rec img{
	width : 100%;
	height :auto ;
	padding: 5px 5px 5px 5px;
}

.bto_inbox_right > .title > p {
	width :85%;
	padding: 5% 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	color : #000 ;
	font-size: 20px ; 
	font-weight: 700 ;
}

@media screen and (max-width: 768px) {
.bto_inbox_right > .title > p {
	font-size: 15px ; 
	font-weight: 700 ;
	padding: 2% 0px 0px 0px;
	margin: 0px 0px 0px 0px;

}}

.bto_inbox_right > .ph {
	width : 100%;
	height : ;
	margin: 10px 20px 0px 20px;
}

.bto_inbox_right > .ph img {
	width : 100%;
}

@media screen and (max-width: 768px) {
.bto_inbox_right > .ph {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	position: relative;
	top: 0px;
	left: 0px;
}
}

.bto_inbox_right > .info {
	width: 100%;
	margin: 0px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:right

}

.bto_inbox_right > .info img {
	width: 150px;


}

@media screen and (max-width: 768px) {
.bto_inbox_right > .info {
	width: 100%;
	height: ;
	margin: 0 auto;
	margin-bottom: ;
	position: static;
	text-align : center

}
}

.bto_inbox_right > .info:hover {
	opacity: 0.6;
}



/* ■■■推奨PC内部エイリア■■■ 表 */


.bto_inbox_left > table {
	width: 100%;
	margin: 0px 20px 50px 20px;
	border-collapse: collapse;

}

@media screen and (max-width: 768px) {
.bto_inbox_left > table {
	width:100%;
	margin: 10px 10px 50px 10px;
	position: relative;
	top: 0px;
	left: 0px;
}
}

.bto_inbox_right > table {
	width: 100%;
	margin: 0px 20px 50px 20px;
	border-collapse: collapse;

}

@media screen and (max-width: 768px) {
.bto_inbox_right > table {
	width:100%;
	margin: 10px 10px 50px 10px;
	position: relative;
	top: 0px;
	left: 0px;
}
}

table tr {
	  background-color: ;
}

table th,table td {
	padding: .35em 1em;
	border-bottom: 1px solid #eee;
}

table thead th {
	font-size: .85em;
	padding: .3em .3em .3em 11em;
	text-align: left;
}

@media screen and (max-width: 768px) {
table thead th {
	font-size: .85em;
	padding: .3em .3em .3em 7em;
	text-align: left;
}}


table thead tr{
	background-color: #808080;
	color:#fff;
}

table tbody th {
	text-align: center;
	font-size: .8em;
	font-weight: 600 ;
	color: #c0c0c0 ;
}

.txt{
   text-align: left;
   font-size: .75em;
}



/* ★★★★★最下部★★★★★ */


.copy_box {
	font-size: 0.5em;
	line-height: 1.5;
	width : 1400px;
	background-color: #000;
	margin: 100px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
.copy_box {
	margin: 50px 0px 0px 0px;
}}

.footrogo_box {
	width : 1400px;
	background-color: #000;
	margin: 0px 0px 0px 0px;
	display: flex;
}

@media screen and (max-width: 768px) {
.footrogo_box {
	width : 100%;
	height: 200px;
	background-color: #000;
	margin: 0px 0px 0px 0px;
	display: flex;
	flex-wrap : wrap;
}
}

.footrogo_ph {
	width :300px ;
	background-color: #000;
	margin: 40px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
.footrogo_ph {
	width : 380px;
	background-color: #000;
	margin: 0px auto;
}
}

.footrogo_ph02 {
	width : 300px ;
	background-color: #000;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 0px;
}

@media screen and (max-width: 768px) {
.footrogo_ph02 {
	width :300px ;
	background-color: #000;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 0px;
}
}

@media screen and (min-width: 768px){
.br-sp {display: none; }
}