@charset "utf-8";
/* CSS Document */

/***********セクション１ここから***********/
.gr-fv{
	width: 100%;
	padding-top: 5%
}

/*****************セクション２ここから**********************/
#loco-gr2{
/* margin-bottom: 110%; は不要になります */
  padding: 0; /* 上下に余白を作る */
}

.gr-main-bac{
	/* background-image: url("../img/group/loco-gr-bac.png"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  /* position: absolute; を削除 */
  /* top: 21%; を削除 */
  padding-top: 10%; /* 中の要素に合わせて高さを出す */
}

.gr-main1{
	width: 25%;
  margin: 0 auto; /* 中央寄せ */
  position: relative; /* absoluteではなくrelativeに */
}


.gr-main1 h1{
	position: absolute;
	text-align: center;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全に真ん中に重ねる */
  width: 100%;
  color: #fff;
}
@media screen and (max-width:1050px) {
	.gr-main-bac{
		top: 20%;
	}
}
/*****************セクション２ここから************************/
.gr-main-bac p{
	text-align: center;
	padding-top: 3%;
	color: #00AD97;
}
/*****************セクション３ここから************************/
#loco-gr3{
	 /* position: absolute; を削除 */
  /* top: 33%; を削除 */
  width: 70%;
  margin: 50px auto; /* 前のセクションと適度な間隔をあける */
}
/********グリッドレイアウトここから*********/
.grid-container {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.grid-item {
    color: #000;
    list-style: none;
}

.guide-img{
	width: 100%;
	margin: auto;
}

.guide-title{
	width: 80%;
	margin: 5% auto;
	position: relative;
}

.guide-title h1 {
    text-align: center;
    position: absolute;
    top:30%;
    margin: auto;
    right: 0;
    left: 0;
    color: #fff;
	font-weight: bold;
}

.guide-naiyou{
	text-align: center;
	padding-bottom: 2%;
}

/*****************見出しここから**********************/
#loco-gr3-4{
  padding: 5%; /* 上下に余白を作る */
}

.gr3-4-main-bac{
/*background-image: url("../img/group/loco-gr-bac.png");*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  /* position: absolute; を削除 */
  /* top: 21%; を削除 */
}

.gr3-4-main1{
	width: 30%;
  margin: 0 auto; /* 中央寄せ */
  position: relative; /* absoluteではなくrelativeに */
}

.gr3-4-main1 h1{
	position: absolute;
	text-align: center;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全に真ん中に重ねる */
  width: 100%;
  color: #fff;
}
@media screen and (max-width:1050px) {
	.gr-main-bac{
		top: 20%;
	}
}

/********************セクション4ここから**************************/
.gr4-training{
	display: flex;
	justify-content: left;
	align-items: center;
	position: relative;
}

.gr4-img{
	width: 66%;
}

.gr4-training-txt {
    background-color: #fff;
    position: absolute;
    /*top: 25%;*/
    right: 20%;
    padding: 2%;
}

.gr4-training-txt h1{
	font-family: "din-condensed", sans-serif;
    font-weight: bold;
    font-style: normal;
	margin-bottom: 10%;
}

.gr4-training-txt p{
	margin-bottom: 5% !important;
}

/********************セクション5ここから**************************/

.gr-back-img{
	margin: 0;
}

.gr-flex{
	display: flex;
	justify-content: right;
	align-items: center;
	width: 100%;
	padding: 7% 0;
	position: relative;
}
.gr5-longstay-txt{
	    background-color: #fff;
    padding: 2%;
    position: absolute;
    /*top: 37%;*/
    left: 15%;

}

.gr5-longstay-txt h1{
	    font-family: "din-condensed", sans-serif;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 10%;
}

.gr5-longstay-txt p{
	margin-bottom: 5% !important;
}

/********************セクション6ここから**************************/
#loco-gr6{
	padding-bottom: 6%;
}

.gr6-main-bac p{
	text-align: center;
	color: #00AD97;
}

@media screen and (max-width:1050px) {
	.gr6-main-bac{
		top: 20%;
	}
}

/*****************スマホサイズここから************************/

@media screen and (max-width:750px) {
	.gr-fv{
		padding: 0;
	}
	
	.gr-main-bac {
		top: 7%;
	}
	#loco-gr3 {
		top: 14%;
		width: 80%;
	}
	
	.grid-item{
		padding-bottom: 4%;
	}

	.grid-item p{
		font-size: 3.3vw;
	}
	
	.guide-title {
		width: 80%;
	}
	.guide-title h1 {
		font-size: 4.6vw !important;
	}
	.grid-container {
		display: block;
	}
	.gr-main1 {
		width: 80%;
	}
	.gr-main1 h1 {
		font-size: 4.5vw;
	}
	.gr-main-bac p{
		padding: 4%;
		font-size: 4vw;
	}

	.gr3-4-main1 {
		width: 90%;
	}
	.gr3-4-main1 h1 {
		font-size: 4.5vw;
	}

	.gr4-training{
		display: block;
	}
	.gr4-img {
		width: 100%;
	}
	.gr4-training-txt {
		text-align: left;
		position: static;
		padding: 17% 0 2% 10%;
	}
	.gr4-training-txt p {
		font-size: 4vw;
	}
	.gr4-training-txt h1 {
		font-size: 10vw;
	}
	
	
	.gr-flex{
		flex-direction: column-reverse;
	}
	.gr5-longstay-txt {
		width: 100%;
        text-align: left;
        padding: 17% 0 17% 10%;
    	position: static;
	}
	.gr5-longstay-txt p {
		font-size: 4vw;
	}
	.gr5-longstay-txt h1{
		font-size: 10vw;
	}
	.gr-back-img {
		height: 130vw;
	}

	#loco-gr6{
		padding-top: 35%;
		padding-bottom: 10%;

	}
	.gr6-main-bac p{
		font-size: 5vw;
	}
}