/* ------------------------------------------------------------ piece-bell ------------------------------------------------------------ */

html { height: 100%;  }
body { height: 100%; font-family:"ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; background: #fff;}

#sdgs { padding: 50px; }
#sdgs .header { padding: 0 0 30px; }
#sdgs h1 { font-size: 16px; }
#sdgs h1 span.agree { background:  url(../images/sdgs/line.png) no-repeat right center;}
#sdgs .main { display: flex; }
#sdgs .main .left .keyv { width: 100%; height: auto; }
#sdgs .main .left { padding: 0 50px 0 0 ; width: calc(60% - 50px); }
#sdgs .main .left .company { display: flex; justify-content: center; padding: 50px 0 0;}
#sdgs .main .left .company .logo { width: 30%; }
#sdgs .main .left .company .logo img { width: 80%; height: auto; } 
#sdgs .main .left .company .text { width: 70%; }
#sdgs .main .left .company h3 { font-size: 23px; font-family: "Noto-Sans-JP-Bold"; line-height: 150%; }
#sdgs .main .left .company p { padding: 20px 0 0; line-height: 180%; font-size: 14px;}

#sdgs .main .right { width: 40%; }
#sdgs .main .right .declaration { padding: 30px 0; }
#sdgs .main .right .declaration p { line-height: 180%;font-size: 14px; }
#sdgs .main .right .declaration h3 { font-size: 23px; font-family: "Noto-Sans-JP-Bold"; padding: 0 0 20px; line-height: 150%;}
#sdgs .main .right .attempt h3 { font-size: 20px; color: #fff; background: #000; text-align: center; padding: 10px 0 ;}
#sdgs .main .right .attempt ul li { display: flex; padding: 40px 0 0 ; }
#sdgs .main .right .attempt ul li h4  {  font-size: 18px; font-family: "Noto-Sans-JP-Bold"; padding: 0 0 10px;  }
#sdgs .main .right .attempt ul li .text { padding: 0 0 0 20px; }
#sdgs .main .right .attempt ul li .text p { font-size: 14px; line-height: 180%; }
.sdgslogo {  text-align: center; padding: 50px 0 0 ; }



#enter .btns a,
#enter .btns input[type="submit"] { vertical-align: middle; display: inline-block; color: #fff; width: 280px; border-radius: 30px; border: none;
	background: #ce1e64;
	height: 60px;
	line-height:60px;
	margin: 5px;
	min-width: inherit;
}
#enter .btns a { background: #ce1e64; }
#enter .btns a.back { background: #888888; }

#comming { height: 100%; display: flex; align-items: center; }
.comming { text-align: center; margin: 0 auto; }
.comming h2 { padding: 0 0 20px; } 
.comming p { }


#sdgs .btns a { background: #ce1e64; width: 294px; height: 68px; line-height: 68px; border-radius: 32px; color: #fff; display: inline-block; text-decoration: none;  background: linear-gradient(0deg, rgba(153, 41, 204, 0.7), rgba(108, 222, 245, 0.7));
background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));}
#sdgs .btns {  text-align: center; padding: 50px 0 0 0;}


@media only screen and (max-width: 1100px) {
	#enter section#left ,#enter section#right { width: 50%; }
	#enter section#right h1 { text-align: center; padding: 0 0 30px; font-size: 16px; line-height: 160%;}
	#enter section#right h3 { font-size: 20px; padding: 0 0 20px; line-height: 150%; text-align: center; }
	#enter section#right p { line-height: 200%; font-size: 14px;}
} 

/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {

.PC { display: none; }
#sdgs { padding: 30px 4%; }
#sdgs .header { padding: 0 0 20px; }
#sdgs h1 { font-size: 12px; }
#sdgs h1 img { width: 130px; height: auto; padding: 0 0 10px;}
#sdgs h1 span.agree { background:  url(../images/sdgs/line.png) no-repeat right center;}
#sdgs .main { display: block; }
#sdgs .main .left .keyv { width: 100%; height: auto; }
#sdgs .main .left { padding: 0 0 0 0 ; width: 100%; }
#sdgs .main .left .company { display: block; justify-content: center; padding: 30px 0 0;}
#sdgs .main .left .company .logo { width: 100%; }
#sdgs .main .left .company .logo img { height: 20px; width: auto; }
#sdgs .main .left .company .text { width: 100%; padding: 20px 0 30px;}
#sdgs .main .left .company h3 { font-size: 21px; font-family: "Noto-Sans-JP-Bold"; line-height: 150%;}
#sdgs .main .left .company p { padding: 10px 0 0; line-height: 180%; font-size: 13px;}

#modal .close { filter: brightness(0); }
#sdgs .main .right { width: 100%; }
#sdgs .main .right .declaration { padding: 20px 0; }
#sdgs .main .right  h2 img { width: 60%; height: auto; }
#sdgs .main .right .declaration p { line-height: 180%; font-size: 13px; }
#sdgs .main .right .declaration h3 { font-size: 20px; font-family: "Noto-Sans-JP-Bold"; padding: 0 0 10px; }
#sdgs .main .right .attempt h3 { font-size: 18px; color: #fff; background: #000; text-align: center; padding: 10px 0 ;}
#sdgs .main .right .attempt ul li { display: flex; padding: 20px 0 0 ; }
#sdgs .main .right .attempt ul li h4  {  font-size: 16px; font-family: "Noto-Sans-JP-Bold"; padding: 0 0 10px;  }
#sdgs .main .right .attempt ul li .text { padding: 0 0 0 20px; }
#sdgs .main .right .attempt ul li .text p { font-size: 12px; line-height: 160%; }
.sdgslogo {  text-align: center; padding: 50px 0 0 ; }



.comming h2 img { width: 80%; height: auto; } 

#sdgs .btns a { background: #ce1e64; width: 294px; height: 60px; line-height: 60px; border-radius: 32px; color: #fff; display: inline-block; text-decoration: none;  background: linear-gradient(0deg, rgba(153, 41, 204, 0.7), rgba(108, 222, 245, 0.7));
background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));}
#sdgs .btns {  text-align: center; padding: 50px 0 0 ; }


}