.clear{
	clear:both;
}

/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#gmrheader{
    /*headerを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 

#gmrheader:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background:url("https://rootco.itembox.design/item/fut/magreel/gmr-01.jpg") no-repeat center;
  background-size:cover;
}

/*下の被さるエリアの指定*/
#gmrcontainer{
  position: relative;
  z-index:1;
  background:#fff;
  padding:50px 0;
  text-align: center;
}

.gmrsec {
	margin-top: 50px;
	margin-bottom: 80px;
	}


.btn-gmr_b a {
    background-color: #666;
    border: 2px solid #666;
    color: #fff;
    display: block;
    font-size: 0.8rem;
    padding: 11px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    width: 300px;
    margin: 30px auto;
}


.gmr-card_title {
    display: block;
    margin-top: 10px;
	margin-bottom: 50px;
    padding: 10px;
	text-align: center;
    width: 100%;	
}

.gmr-card {
    display: block;
    margin: auto;
    padding: 10px;
	text-align: left;
    width: 60%;
}

.gmr-card_l {
    display: block;
    margin: auto;
    padding: 20px 50px 20px 100px;
	text-align: left;
    width: 100%;
}

.gmr-card_bg {
    display: block;
    background: #e3e3e3;
    margin: 20px auto 50px auto;
    padding: 10px;
    width: 100%;
}



h1.gmr {
	font-size: 4rem;
	color: #fff;
	line-height: 4rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-weight: bold;
	position: fixed;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-shadow: 0 0 15px #666;
	white-space: nowrap;
}

h2.gmr {
	font-size: 1.6rem;
	line-height: 2rem;
	font-weight: bold;
	padding:1rem ;
	position: relative;
	text-align: center;
	margin-top: 10px;
}

h2.gmr:before {
    position: absolute;
    bottom: -10px;
    left: calc(10%);
    width: 80%;
    height: 2px;
    content: '';
    border-radius: 3px;
    background: #000000;
}

h3.gmr {
	font-size: 1.2rem;
	line-height: 2rem;
	padding-bottom: 1rem;
	color: #5C653C;
	position: relative;
	text-align: center;
}

p.gmr {
  font-size:  0.8rem;
  line-height: 2rem;
}

p.gmr_h {
  font-size:  1rem;
  ling-height: 1rem;
	color: #fff;
	position: fixed;
	text-align: center;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: nowrap;
}


p.gmr_s {
  font-size:  0.6rem;
  ling-height: 1rem;
	text-align: center;
}

p.gmr_hs {
  font-size:  0.6rem;
  ling-height: 1rem;
	color: #fff;
	position: fixed;
	text-align: center;
	top: 70%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: nowrap;
}

img.gmr {
	padding-top: 20px;
	padding-bottom: 20pix;
	position: relative;
	display: inline-block;
	}

.gmr_grid {
    display: grid;
    width: 60%;
    grid-template-columns: 1fr 1fr;
    margin: 50px auto;
}

.gmr_grid_text {
	padding-left: 40px;
	text-align: left;
	margin: auto;
}

/*========= ULデザインcss ===============*/

.productlist_gmr {  
	margin-top: 50px;
}
.productlist_gmr ul { 
	display: inline-block;
	list-style:none;  
	width: 20%; 
	margin:0; 
	border:1px solid #f2f3f3;
	padding:8px;
	text-align:center;
	background-color:#FFF;
}

.productlist_gmr ul li {  
	border-bottom:1px dashed #cfd2d2;
	padding:10px 0;
}
.productlist_gmr ul li:first-child { 
}
.productlist_gmr ul li:nth-child(2) { 
	background:#fbfbfb;
	font-size: 0.6rem;
	font-weight: bold;
}
.productlist_gmr ul li:nth-child(n+3) { 
	font-size:0.6rem;
}
.productlist_gmr ul li:last-child a { 
	color:#F0F0F0;
	font-weight:bold;
	display:block;
	border-radius:3px;
	border:1px solid #c4cbcc;
	padding:10px;
	margin:5px 0;
	background: #666666; /* Old browsers */
}

/* FOR smartphone landscape
***********************/
@media screen and (max-width:750px) {

    .dlgmr {
        width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
        border-left: none; /* テーブルの左の線を消す */
        display: block; /* 横並びにさせないようブロック要素にする */
    }
    .dlgmr dt,
    .dlgmr dd {
        border-right: none; /* セルの右の線を消す */
        width: 100%; /* 横幅を幅いっぱいに指定 */
        padding: 8px 10px; /* 各セルに余白を取る */
    }
    .dlgmr dt {
        border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
        padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
    }
	h1.gmr {
	font-size: 2rem;
	padding-top: 1rem;
	padding-bottom: 2rem;
	font-weight: bold;
	}
	.gmr_grid {
		grid-template-columns: 1fr;
		width: 80%;
	}
	.gmr_grid_text {
		order: 2;
		padding-left: 0px;
		padding-top: 20px;
	}
	.gmr_grid_img {order: 1;}
	.productlist_gmr ul { 
	width: 40%;
	}
	.gmr-card {
	width: 90% ;
	}
	.gmr-card_l {
		padding: 20px 0px ;
		width: 80% ;
	}
	
}