@charset "UTF-8";

/* ========== ARTICLE ========== */
/* ----- COMMON ----- */
.hd3 { display: block; border-bottom: 2px solid #264993; position: relative; }
.hd3 h3 { color: #264993; font-weight: bold; text-align: center; white-space: nowrap; position: absolute; top: 0; left: 50%; transform: translate(-50%); display: inline-block;  }
.catch { font-weight: bold; }
.catch font { color: #f36e00; }
/* HD */
#hd .title h2 { color: #264993; }
/* SEC2 */
#sec2 { background: #f0f0f0; }
#sec2 ul li { background: #3c3c3c; }
#sec2 ul li h4 { font-weight: bold; text-align: center; }
#sec2 ul li p { color: #ffffff; }
#sec2 h5 { color: #264993; font-weight: bold; text-align: center; }
#sec2 .list { font-weight: bold; text-align: center; }
/* SEC4 */
#sec4 { background: #dee7ef; }
/*#sec4 h4.mov_t { color: #264993; font-weight: bold; background: #ffffff; display: inline-block; border: 3px solid #264993; position: relative; }
#sec4 h4.mov_t .img { position: absolute; }
#sec4 ul li p { font-weight: bold; }
#sec4 ul li .mov { position: relative; width: 100%; padding-top: 56.25%; }
#sec4 ul li .mov iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }*/
/* SEC6 */
#sec6 { background: #f0f0f0; }
#sec6 .inner { position: relative; }
/* SEC7 */
#sec7 { background: #f0f0f0 }
#sec7 ul li { background: #ffffff; }
#sec7 ul li h4 { color: #264993; font-weight: bold; display: block; position: relative; }
#sec7 ul li h4 font { position: absolute; }
/* SEC8 */
#sec8 h3, #sec8 .catch, #sec8 .lead { color: #ffffff; }
/* SEC9 */
#sec9 ul li { background: #f0f0f0; }
#sec9 ul li h4 { color: #ffffff; font-weight: bold; background: #264993; }
#sec9 ul li img { display: block; }

/* ----- CERAMIC ----- */
.ceramic h3 { background: url("images/ceramic/icn_hd2.png") no-repeat; }
/* HD */
.ceramic #hd { background: #c8e7f1; }
.ceramic #hd .title h1 { background: #00aecb; }
/* SEC2 */
.ceramic #sec2 ul li h4 { color: #00aecb; }
/* SEC5 */
.ceramic #sec5 { background: url("images/ceramic/bg_01.png") no-repeat center top; }
/* SEC6 */
/*.ceramic #sec6 { background: #f0f0f0 url("images/ceramic/bg_03.png") no-repeat center bottom; }*/
/* SEC7 */
.ceramic #sec7 ul li { border-bottom: 1px solid #00aecb; }
.ceramic #sec7 ul li h4 { background: #80d6e5; }
.ceramic #sec7 ul li h4 font { color: #00aecb; }
/* SEC8 */
.ceramic #sec8 { background: url("images/ceramic/bg_02.png") no-repeat center top; }
.ceramic #sec8 h3, .ceramic #sec8 .catch, .ceramic #sec8 .lead { color: #ffffff; }

/* ----- GLASS ----- */
.glass h3 { background: url("images/glass/icn_hd2.png") no-repeat; }
/* HD */
.glass #hd { background: #bbe9ad; }
.glass #hd .title h1 { background: #00ad87; }
/* SEC2 */
.glass #sec2 ul li h4 { color: #00ad87; }
/* SEC5 */
.glass #sec5 { background: url("images/glass/bg_01.png") no-repeat center top; }
/* SEC6 */
/*.glass #sec6 { background: #f0f0f0 url("images/glass/bg_03.png") no-repeat; }*/
/* SEC7 */
.glass #sec7 ul li { border-bottom: 1px solid #00ad87; }
.glass #sec7 ul li h4 { background: #80d6c3; }
.glass #sec7 ul li h4 font { color: #33bd9f; }
/* SEC8 */
.glass #sec8 { background: url("images/glass/bg_02.png") no-repeat center top; }
.glass #sec8 .txt { background: rgba(51,189,159,0.6); display: inline-block; }

/* ----- COMPOSITE ----- */
.composite h3 { background: url("images/composite/icn_hd2.png") no-repeat; }
/* HD */
.composite #hd { background: #d8c9f8; }
.composite #hd .title h1 { background: #8a59cb; }
/* SEC2 */
.composite #sec2 ul li h4 { color: #c4ace5; }
.composite #sec2 ol li { text-align: center; }
.composite #sec2 ol p { font-weight: bold; }
/* SEC5 */
.composite #sec5 { background: url("images/composite/bg_01.png") no-repeat center top; }
/* SEC6 */
/*.composite #sec6 { background: #f0f0f0 url("images/composite/bg_03.png") no-repeat; }*/
/* SEC7 */
.composite #sec7 ul li { border-bottom: 1px solid #8a59cb; }
.composite #sec7 ul li h4 { background: #d0bdea; }
.composite #sec7 ul li h4 font { color: #ede6f7; }
/* SEC8 */
.composite #sec8 { background: url("images/composite/bg_02.png") no-repeat center top; }
.composite #sec8 .hd3 { border-color: #ffffff; }


@media screen and (max-width:768px) {
	
	/* ========== ARTICLE ========== */
	/* ----- COMMON ----- */
	.hd3 { height: 30px; margin-bottom: 20px; }
	h3 { font-size: 1.6rem; background-size: auto 40px; height: 40px; padding: 0 50px; }
	.ceramic h3, .glass h3, .composite h3 { background-size: auto 40px; }
	.lead { margin-bottom: 20px; }
	.catch { font-size: 1.6rem; line-height: 1.65; margin-bottom: 10px; }
	/* HD */
	#hd .title { text-align: center; width: 100%; top: 20px; }
	#hd .title h1 { font-size: 1.4rem; padding: 2.5px 10px; }
	#hd .title h2 { font-size: 1.8rem; }
	/* SEC1 */
	#sec1 .img, #sec3 .img, #sec6 .img { padding: 0 15%; margin-bottom: 20px; }
	#sec1 .img img, #sec3 .img img, #sec6 .img img { max-width: 100%; }
	/* SEC2 */
	#sec2 ul li { margin-bottom: 15px; display: flex; }
	#sec2 ul li .img { width: calc(100%/2); }
	#sec2 ul li .img img { display: block; max-height: 100%; }
	#sec2 ul li .txt { width: calc((100%/2) - 20px); padding: 10px; }
	#sec2 ul li .txt h4 { font-size: 1.6rem; }
	#sec2 ul li .txt p { font-size: 1.2rem; }
	#sec2 h5 { margin-bottom: 10px; }
	#sec2 .list, #sec2 .note { font-size: 1.1rem; margin-bottom: 10px; }
	/* SEC4 */
	#sec4 .inner { padding: 30px 10px 20px; }
	/*#sec4 h4 { font-size: 1.6rem; padding: 8px 30px; margin-bottom: 20px; }
	#sec4 h4 .img { width: 50px; height: auto; top: -20px; left: -20px; }*/
	#sec4 ul li { margin-bottom: 20px; }
	/* SEC5 */
	.ceramic #sec5, .ceramic #sec8, .glass #sec5, .glass #sec8 { background-size: cover}
	/* SEC6 */
	.ceramic #sec6, .glass #sec6 { background: #f0f0f0;}
	/* SEC7 */
	#sec7 ul li { margin-bottom: 15px; }
	#sec7 ul li h4 { font-size: 1.8rem; line-height: 1.5; vertical-align: middle; height: 60px; padding-left: 50px; display: grid; align-items: center; }
	#sec7 ul li h4 font { font-family: Helvetica, "sans-serif"; font-weight: normal; font-size: 6.0rem; line-height: 1; width: 50px; text-align: center; left: 0; }
	#sec7 ul li p { padding: 10px; }
	#sec7 ul li .img { padding: 0 10px 10px; }
	#sec7 ul li .img img { max-width: 100%; }
	/* SEC9 */
	#sec9 ul li { display: grid; grid-template-columns: 50% 50%; margin-bottom: 15px; }
	#sec9 ul li img { display: block; }
	#sec9 ul li h4 { font-size: 1.6rem; display: grid; align-items: center; padding: 10px; }
	#sec9 ul li p { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; padding: 10px; }
	
	/* ----- CERAMIC ----- */
	
	/* ----- GLASS ----- */
	/* SEC8 */
	.glass #sec8 .txt { padding: 10px 10px 0; }
	
	/* ----- COMPOSITE ----- */
	.composite #sec2 ul, .composite #sec2 ol { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
	.composite #sec2 ul li, .composite #sec2 ol li { width: calc((100%/2) - 10px); margin: 5px; }
	.composite #sec2 ul li .txt { width: 100%; }
	/*.composite #sec2 ol li { margin-bottom: 10px; }*/
}

@media screen and (min-width:769px) {
	
	/* ========== ARTICLE ========== */
	/* ----- COMMON ----- */
	.hd3 { height: 65px; margin-bottom: 80px; }
	h3 {  font-size: 3.2rem; padding-bottom: 20px; height: 83px; padding: 0 110px; }
	.lead { line-height: 2.0; width: 590px; }
	.catch { font-size: 3.6rem; line-height: 1.65; margin-bottom: 30px; }
	/* HD */
	#hd { margin-bottom: 50px; }
	#hd .title { top: 80px; right: 60px; }
	.glass #hd .title { left: 150px; width: 320px; }
	#hd .title h1 { font-size: 2.2rem; padding: 5px 75px; }
	#hd .title h2 { font-size: 5.8rem; }
	/* SEC1 */
	#sec1 { padding: 0 0 90px; }
	#sec1 .inner, #sec3 .inner { position: relative; }
	#sec1 .img { position: absolute; top: 160px; right: 100px; }
	/* SEC2 */
	#sec2 { padding: 75px 0; }
	#sec2 ul { display: flex; width: 1050px; margin: 0 auto 50px; }
	#sec2 ul li { width: 300px; margin: 0 25px; }
	#sec2 ul li h4 { font-size: 3.0rem; padding: 10px 0 0; }
	#sec2 ul li p { font-size: 1.6rem; padding: 15px 25px 25px; }
	#sec2 h5 { font-size: 2.2rem; margin-bottom: 20px; }
	#sec2 .list { font-size: 2.0rem; line-height: 2; margin-bottom: 20px; }
	/* SEC3 */
	#sec3 { padding: 80px 0; }
	#sec3 p { width: 590px; margin-left: 510px; }
	#sec3 .img { position: absolute; top: 0; left: 100px; }
	/* SEC4 */
	#sec4 { padding: 55px 0 80px; }
	#sec4 { padding: 55px 0 80px; }
	/*#sec4 h4.mov_t { font-size: 3.0rem; padding: 13px 50px; margin-bottom: 50px; }
	#sec4 h4.mov_t .img { top: -20px; left: -20px; }
	#sec4 ul li p { font-size: 30px; }*/
	/* SEC5 */
	#sec5 { padding: 60px 0; }
	#sec5 .inner { text-align: center; }
	/* SEC6 */
	#sec6 { padding: 70px 0 0; }
	#sec6 p { width: 590px; margin-left: 510px; }
	/* SEC7 */
	#sec7 { padding: 70px 0; }
	#sec7 ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
	#sec7 ul li { width: calc((100%/2) - 30px); margin-bottom: 50px; }
	#sec7 ul li h4 { font-size: 3.2rem; line-height: 1.5; vertical-align: middle; height: 110px; padding-left: 100px; display: grid; align-items: center; }
	#sec7 ul li h4 font { font-family: Helvetica, "sans-serif"; font-weight: normal; font-size: 11.2rem; line-height: 1; width: 100px; text-align: center; left: 0; }
	#sec7 ul li p { padding: 20px 45px; }
	#sec7 ul li .img { padding: 0 45px 20px; }
	/* SEC8 */
	#sec8 { padding: 80px 0; }
	/* SEC9 */
	#sec9 { padding: 80px 0 100px; }
	#sec9 ul { margin: 0 70px; }
	#sec9 ul li { display: flex; margin-bottom: 50px; }
	#sec9 ul li h4 { font-size: 2.8rem; width: 225px; height: 250px; padding-left: 25px; display: grid; align-items: center; }
	#sec9 ul li .img { width: 350px; }
	#sec9 ul li p { width: 400px; padding: 30px; }
	
	/* ----- CERAMIC ----- */
	/* SEC2 */
	.ceramic #sec2 .note { width: 800px; margin: 0 auto; }
	/* SEC4 */
	.ceramic #sec4 ul { display: flex; }
	.ceramic #sec4 ul li { width: 560px; }
	.ceramic #sec4 ul li:last-child { margin-left: auto; }
	.ceramic #sec4 ul li p { height: 4em; display: grid; place-items: center; }
	/* SEC6 */
	.ceramic  #sec6 .img { position: absolute; top: 160px; left: 70px; }
	/* SEC8 */
	.ceramic #sec8 p { margin-left: 100px; }
	
	/* ----- GLASS ----- */
	/* SEC2 */
	.glass #sec2 .note { width: 540px; margin: 0 auto; }
	/* SEC4 */
	.glass #sec4 ul li { width: 560px; margin: 0 auto; }
	.glass #sec4 ul li p { margin-bottom: 10px; }
	/* SEC6 */
	.glass  #sec6 .img { position: absolute; top: 60px; left: 30px; }
	/* SEC8 */
	.glass #sec8 .catch { font-size: 3.0rem; }
	.glass #sec8 .hd3 { margin-bottom: 40px; }
	.glass #sec8 .txt { padding: 40px 45px 30px; margin-left: 50px; }

	/* ----- COMPOSITE ----- */
	/* SEC2 */
	.composite #sec2 .note { width: 100%; text-align: center; }
	.composite #sec2 .list { margin-bottom: 40px; }
	.composite #sec2 ul li { width: 250px; margin: 0 10px; }
	.composite #sec2 ol { display: flex; justify-content: center; margin-bottom: 20px; }
	.composite #sec2 ol li { margin: 0 30px; }
	/* SEC4 */
	.composite #sec4 ul li { width: 560px; margin: 0 auto; }
	.composite #sec4 ul li p { margin-bottom: 10px; }
	/* SEC6 */
	.composite #sec6 .img { position: absolute; top: 150px; left: 0; }
	/* SEC8 */
	.composite #sec8 .hd3 { margin-bottom: 40px; }
	.composite #sec8 .txt { padding: 40px 45px 30px; margin-left: 50px; }
	/* SEC6 */
	.composite #sec6 .inner { position: relative; }
	.composite #sec6 .img { position: absolute; top: 150px; left: 0; }
	
	
}