@charset "utf-8";

/* CSS Document */




/* -------------------- header -------------------- */

/* 背景色変更 不要な場合は削除 */
header {
  background-color: #fffcf8; 
}



/* -------------------- pagetop -------------------- */

/* ページの上部へ　右下固定版 */

#pagetop--fixed {
  position: fixed;
  bottom: 10vh;
  right: 1vw;
  background: #222;
  opacity: 0.7;
  border-radius: .2rem;
}

#pagetop--fixed a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#pagetop--fixed a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
}




img {
width: 100%;
}






h1 {
    text-align: center;
    font-size: 6em;
    font-weight: 600;
    letter-spacing: 0.1em;
    max-width: 940px;
    margin: 200px auto 0;
    color: #FFF;
}




.container {
    background-color: cadetblue;
}




.intro_image {
}




.intro_text {
    max-width: 960px;
    margin: 0 auto 200px;
	color: #FFF;
    font-size: 1.3em;
    line-height: 2.4;

}


.chapter_text {
    color: #FFF;
    font-size: 15px;
    line-height: 2;
    margin: 2em 0.5em;
}


.section_container {
position: relative;
    padding: 120px 40px;
}



span.underline {
    border-bottom: solid #e9c581;
    color: #e9c581;
    font-weight: 600;
}

@media (max-width:939px) {

h1 {
    text-align: left;
    font-size: 3rem;
	padding: 0 1em;
}


.intro_text {
    width: 100%;
    padding: 2em;
    margin: 0 auto 100px;
}



.section_container {
    padding: 120px 0px;
}

.img_container {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    padding: 0 40px;
}


.chapter_text {
    color: #FFF;
    font-size: 14px;
    line-height: 2;
    margin: 4em 2em;
    text-align: justify;
}


}



/* -------------------- モデル画像 -------------------- */


.main_image {
width: 940px;
margin-left: auto;
margin-right: auto;
}

@media (max-width:939px) {
.main_image {
width:100%;
}

}



.img_container {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
}


.w80 {
    width: 80%;
	min-width: 360px;
	
}

.w70 {
    width: 70%;
	min-width: 360px;
	
}


.w60 {
    width: 60%;
	min-width: 360px;
	
}

.w50 {
    width: 50%;
	min-width: 360px;
	
}

.w40 {
    width: 40%;
	min-width: 360px;
	
}


@media (max-width:939px) {



.img_container {
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}






.w80 {
    width: 100%;
	
}



.w70 {
    width: 100%;
	
}


.w60 {
    width: 100%;
	
}

.w50 {
    width: 100%;
	
}

.w40 {
    width: 100%;
	
}

h1 {
    text-align: left;
    font-size: 3rem;
    padding: 100px 1em 0;
    margin: 0 auto;
}


.intro_image {
    display: none;
}

}








.line_left {
}

.line_right {
 }


/* -------------------- アイテムリスト -------------------- */
.coordinate_item {
    font-size: 11px;
}

.coordinate_item a {
    color: #f1f1f1;
}

/* -------------------- 1 グローバーオール -------------------- */

#chapter1 {
    background-color: cadetblue;
}


.parent1 {
display: grid;
  justify-items: center;
  align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent1 .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent1 .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent1 .div3 { grid-area: 2 / 1 / 3 / 2; }
.parent1 .div4 { grid-area: 2 / 2 / 3 / 3; }



@media (max-width:760px) {


.parent1 {
display: block;
}

}


/* -------------------- 1 グローバーオール  END-------------------- */



/* -------------------- 2 パープルレーベル -------------------- */

#chapter2 {
    background-color: #9b4b0f;
}


.parent2 {
display: grid;
  justify-items: center;
  align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent2 .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent2 .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent2 .div3 { grid-area: 2 / 1 / 3 / 2; }
.parent2 .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent2 .div5 { grid-area: 3 / 1 / 4 / 2; }
.parent2 .div6 { grid-area: 3 / 2 / 4 / 3; }



@media (max-width:760px) {
.parent2 {
display: block;
}

}
/* -------------------- 2 パープルレーベル END -------------------- */



/* -------------------- 3 バブアー -------------------- */

#chapter3 {
    background-color: #63926b;
}


.parent3 {
display: grid;
  justify-items: center;
  align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent3 .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent3 .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent3 .div3 { grid-area: 2 / 1 / 3 / 2; }
.parent3 .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent3 .div5 { grid-area: 3 / 1 / 4 / 2; }
.parent3 .div6 { grid-area: 3 / 2 / 4 / 3; }



@media (max-width:760px) {
.parent3 {
display: block;
}
}

/* -------------------- 3 バブアー END -------------------- */





/* -------------------- 4 skye -------------------- */

#chapter4 {
    background-color: #a84949;
}


.parent4 {
display: grid;
  justify-items: center;
  align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent4 .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent4 .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent4 .div3 { grid-area: 2 / 1 / 3 / 2; }
.parent4 .div4 { grid-area: 2 / 2 / 3 / 3; }



@media (max-width:760px) {


.parent4 {
display: block;
}

}

/* -------------------- 4 skye  END-------------------- */


/* -------------------- 5 humbie -------------------- */


#chapter5 {
    background-color: #50493a;
}


.parent5 {
display: grid;
  justify-items: center;
  align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent5 .div1 { grid-area: 1 / 1 / 2 / 2; }
.parent5 .div2 { grid-area: 1 / 2 / 2 / 3; }
.parent5 .div3 { grid-area: 2 / 1 / 3 / 2; }
.parent5 .div4 { grid-area: 2 / 2 / 3 / 3; }
.parent5 .div5 { grid-area: 3 / 1 / 4 / 2; }
.parent5 .div6 { grid-area: 3 / 2 / 4 / 3; }



@media (max-width:760px) {
.parent5 {
display: block;
}
}


/* -------------------- 5 humbie  END-------------------- */


footer {
    background: cadetblue!important;
}