@charset "UTF-8";
/***********************************************
TGC CSS information
File Name : base.css
Last modified : :2019
***********************************************/



*{
	margin:0;
	padding:0px;
	}

@media print, screen and (min-width: 770px){
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }



.g-disign-index_head {
	margin:150px 0 0 0;
	padding: 0;
	width:100%; 
                                 height: 130px;
	text-align:center;
	float:left;
}
.g-disign-index_head::after {
                                  content: '';
                                  background-color:#64b4ff;
                                border-bottom: solid 1px #8894a1;
                                  position: absolute;
                                  left: 0;
                                  right: 0;
                                  top: 120px;
                                  bottom: 0;
                                  height: 100px;
}


.g-disign-index_head .head {
	margin:0 30px 0 0;
	font-size:40px;
	line-height:1em;
                                color:#ffffff;
	float:right;
                                position: relative;
                                z-index: 1;
}


.g-disign-index_set1 {
	margin:50px 0 0 0;
	padding:0;
	width:1300px; 
	text-align:left;
	float:left;
}

.g-disign-index_set2,
.g-disign-index_set3 {
	margin:20px 0 0 0;
	padding:0;
	width:1300px; 
	text-align:left;
	float:left;
                                display:flex
}


.g-disign-index_set1 .head{
	margin:0 0 40px 0;
	padding:0 0 10px 0;
	width:100%; 
	text-align: center;
	float:left;
                                background: linear-gradient( #ffffff,#ffffff, #d1d7de);
                                border-bottom: 1px solid #8894a1;
	font-size:32px;
	line-height:1.3em;
                                color:#47607f;
}

.g-disign-index_set1 .copy-hed{
	margin:40px 0 10px 0;
	padding:0;
	width:100%; 
	text-align:left;
	float:left;
	line-height:2em;
	font-size:34px;
                                color:#14517a;
}

.g-disign-index_set1 .copy{
	margin:20px 0 50px 0;
	padding:0 0 5px 0;
	width:100%; 
	text-align:left;
	float:left;
	line-height:2em;
}

.g-disign-index_set2 .pht1{
	margin:20px 50px 0 0;
	padding:0;
	width:45%; 
	text-align:left;
	float:left;
}
.g-disign-index_set2 .pht2{
	margin:20px 50px 0 0;
	padding:0;
	width:20%; 
	text-align:left;
	float:left;
}

.g-disign-index_set3 .pht3{
	margin:20px 50px 0 0;
	padding:0;
	width:18%; 
	text-align:left;
	float:left;
}

.g-disign-index_set2   img,
.g-disign-index_set3   img{
	margin:10px 0 0 0;
	padding:0;
	width:100%; 
}


 .caption{
	font-size:0.7em;
	line-height:1.2em;
}



}



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

/* スマホで見たときは"sp"のclassがついた画像が表示される */

.sp { display: block !important; }
.pc { display: none !important; }

img {
  max-width: 100%;
  height: atuo;
}


.g-disign-index_head {
	margin:0px 0 0 0;
	padding: 0;
	width:100%; 
                                 height:70px;
	text-align:center;
}
.g-disign-index_head::after {
                                  content: '';
                                  background-color:#64b4ff;
                                border-bottom: solid 1px #8894a1;
                                  position: absolute;
                                  left: 0;
                                  right: 0;
                                  top:50px;
                                  bottom: 0;
                                  height: 70px;
}

.g-disign-index_head .head {
                                  left: 0;
                                  right: 0;
                                  top:70px;
                                  bottom: 0;
	font-size:2em;
	line-height:1em;
                                color:#ffffff;
                                position: relative;
                                z-index: 1;
}


.g-disign-index_set1 {
	margin:80px 0 0 2%;
	padding:0;
	width:96%; 
	text-align:center;
}

.g-disign-index_set2 {
	margin:30px 0 0 2%;
	padding:0;
	width:96%; 
	text-align:center;
}
.g-disign-index_set3 {
	margin:30px 0 100px 2%;
	padding:0 0 0 0;
	width:96%; 
	text-align:center;
}


.g-disign-index_set1 .head{
	margin:20px 0 10px 0;
	padding:0 0 5px 0;
	width:100%; 
	text-align:center;
                                background: linear-gradient( #ffffff,#ffffff, #d1d7de);
                                border-bottom: 1px solid #8894a1;
	font-size:1.2em;
	line-height:1.3em;
                                color:#47607f;
}
.g-disign-index_set1 .copy-hed{
	margin:20px 0 10px 0;
	padding:0;
	width:100%; 
	text-align:center;
                                font-weight: 700;
	line-height:2em;
	font-size:1.3em;
                                color:#14517a;
}


.g-disign-index_set1 .copy{
	margin:0;
	padding:0 1% 10px 1%;
	width:98%; 
	text-align:left;
	font-size:0.8em;
	line-height:1.6em;
}

.g-disign-index_set2 .pht1{
	margin:10px 0 0 10%;
	padding:0;
	width:80%; 
	text-align:center;
}
.g-disign-index_set2 .pht2{
	margin:10px 0 0 10%;
	padding:0;
	width:80%; 
	text-align:center;
}

.g-disign-index_set3 .pht3{
	margin:10px 0 0 5%;
	padding:0;
	text-align:left;

}

.g-disign-index_set2   img{
	margin:10px 0 0 0;
	padding:0;
	width:100%; 
}

.g-disign-index_set3   img{
	margin:5px 0 20px 15%;
	padding:0;
	width:70%; 
}


 .caption{
	width:100%; 
	font-size:0.7em;
	line-height:1.2em;
	text-align:center;
}

}