@charset "utf-8";


#jsgp {
   width: 100%;
	margin:4.2% auto 5%;
}
.page-title{
	width:100%;
	margin: 0 0 5%;
}
.page-title img{
	width:100%;
}
.title-wrap {
	margin: 0 auto 5%;
	padding: 3% 0;
	background-image: url("../img/jsgp/title-bg.jpg");
	text-align: center;
}
.title-wrap .title {
	font-size: 2vw;
	font-weight: 700;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
}
/* section 1 */
#jsgp .sec01 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
.sec01 .top-box {
  margin: 0 auto 10%;
	padding: 5% 0;
  border: 3px solid #002060;
  text-align: center;
  font-size: 1.1vw;
  line-height: 200%; 
}
.sec01 .top-box .subtitle {
	margin: 0 auto;
  color: #002060;
	font-size: 1.8vw;
	font-weight: bold;
    line-height: 170%;
}
.sec01 .top-box .txt01 {
	margin: 0 auto;
}
.sec01 .txt01 {
	text-align: center;
	margin: 0 auto 8%;
}
.sec01 .txt02 {	
	margin: 0 auto 4%;
	text-align: center;
	color: #002060;
	font-size: 1.5vw;
	font-weight: bold;
	line-height: 2;
}
#jsgp .sec01 .btn {
  width: 60%;
	margin: 0 auto;
}

.sec01 .top-box2 {
  margin: 0 auto 10%;
	padding: 5% ;
  border: 3px solid #002060;
  text-align: left;
  font-size: 1vw;
  line-height: 200%; 
}

.top-box2 .box2-title{
 font-size: 1.2vw;
color: #002060;
font-weight: bold;
}

.about_btn {
    width: 46%;
    margin: 4% auto;
}
.about_btn img{
 width: 100%;
}

/* section 2 */
#jsgp .sec02 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
.sec02 .txt01 {
	margin: 0 auto;
	display: table;
	font-size: 1.5vw;
	font-weight: bold;
	line-height: 1.8;
}
.sec02 .gp-color01 {
	color: #a87500;
}
.sec02 .gp-color02 {
	color: #878787;
}
.sec02 .gp-color03 {
	color: #a94113;
}
.sec02 .gp-color04 {
	color: #3a90c7;
}
/* section 3 */
#jsgp .sec03 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
.sec03 .box {
	margin: 0 auto 3%;
}
.sec03 .subtitle {
	font-size: 1.3vw;
	font-weight: bold;
	color: #002060;
}

#jsgp .sec03 .txt02 {
    text-align: center;
    color: #002060;
    font-weight: bold;
    font-size: 1.3vw;
}

#jsgp .sec03 .video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 5%;
}

#jsgp .sec03 .video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

/* section 4 */
#jsgp .sec04 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
.sec04 .box {
	padding: 0 0 10%;
	position: relative;
	text-align: center;
}
.sec04 .box::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  bottom: 10%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border-top: 1.5em solid #d5b215;
  border-right: 1.5em solid transparent;
  border-left: 1.5em solid transparent;
}
.sec04 .box:last-child::after {
  content: '';
  display: none
}
.sec04 .subtitle {
	font-size: 1.3vw;
	font-weight: bold;
	color: #002060;
}

.sec04 .txt{
text-align: center;
}

/* section 5 */
#jsgp .sec05 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
#jsgp .sec05 .txt {
  margin: 0 auto 15%;
}
/* section 6 */
#jsgp .sec06 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
.sec06 .wrap {
	margin: 0 auto 10%;
	display: table;
}
.sec06 .box {
	margin: 0 auto 10%;
}
.sec06 .subtitle {
	font-size: 1.3vw;
	font-weight: bold;
	color: #002060;
}
#jsgp .sec06 .btn {
  width: 60%;
	margin: 0 auto;
}
.sec06 .wrap {
	margin: 0 auto 10%;
	display: table;
}
.sec06 .box {
	margin: 0 auto 10%;
}
.sec06 .subtitle {
	font-size: 1.3vw;
	font-weight: bold;
	color: #002060;
}
#jsgp .sec06 .btn {
  width: 60%;
	margin: 0 auto;
}
/* section 7 */
#jsgp .sec07 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
#jsgp .sec07 .comingsoon {
  text-align: center;
}
/* section 8 */
#jsgp .sec08 {
  width: 48.95833%;
  margin: 0 auto;
  font-size: 1vw;
  line-height: 180%;
  margin-bottom: 5%;
}
#jsgp .sec08 .txt01 {
  margin: 0 auto 10%;
}
.color01 {
  color: #ff0000;
}
.color02 {
  color: #002060;
	font-weight: bold;
	font-size: 1.3vw;
}
#jsgp .sec08 .txt02 {
  text-align: center;
	color: #002060;
	font-weight: bold;
	font-size: 1.3vw;
}
#jsgp .sec08 .video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#jsgp .sec08 .video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/*
=============================================================================================================================================================
　　　　　　　　　　　　　　　　　　　　　　　　　スマホ
========================================================================================================================================================================== */
@media only screen and (max-width: 699px) {
#jsgp {
  width: 100%;
  margin: 0% auto 5%;
}    
#jsgp .sec01 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
.title-wrap .title {
  font-size: 23px;
  padding: 5% 0;
}
.sec01 .top-box .subtitle {
  font-size: 15px;
}
.sec01 .top-box .txt01 {
  font-size: 12px;
  line-height: 2;
}
.sec01 .txt02 {
  font-size: 15px;
  line-height: 1.8;
}
#jsgp .sec01 .btn {
    width: 80%;
    margin: 0 auto;
}
#jsgp .sec02 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
.sec02 .txt01 {
  font-size: 16px;
}
#jsgp .sec03 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
.sec03 .subtitle {
  font-size: 16px;
}
#jsgp .sec04 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
.sec04 .subtitle {
  font-size: 16px;
}
.sec04 .box::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  bottom: 5%;
  border-top: 1em solid #d5b215;
  border-right: 1em solid transparent;
  border-left: 1em solid transparent;
}
#jsgp .sec05 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
#jsgp .sec06 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
.sec06 .wrap {
  display: block;
}
.sec06 .subtitle {
  font-size: 16px;
}
#jsgp .sec06 .btn {
  width: 80%;
  margin: 0 auto;
}
#jsgp .sec07 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
#jsgp .sec07 .comingsoon {
  font-size: 14px;
}
#jsgp .sec08 {
  width: 90%;
  margin: 0 auto 10%;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}
#jsgp .sec08 .txt01 {
  font-size: 14px;
}
#jsgp .sec08 .txt02 {
  font-size: 14px;
}
#jsgp .sec08 .txt01 .color02 {
  font-size: 16px;
}
}

/***************************************************************************************************************************************************************************
　　　　2020-9-26　追加
    ********************************************************************************************************************************************************************************/
#jsgp .sec01-2 {
    width: 48.95833%;
    margin: 0 auto;
    font-size: 1vw;
    line-height: 180%;
    margin-bottom: 5%;
}
    
.sec01-2 .txt01 {
    text-align: left;
    margin: 0 auto 8%;
}  


#jsgp .sec01-2 .btn {
    width: 60%;
    margin: 0 auto 5%;
}

.sec01-2 .txt01#tuka {
    text-align: left;
    width:90%;
    margin: 0 auto 5%;
} 

.sec01-2 .txt02#tuka{
width:90%;
margin: 3% auto;
text-align: left;
    color: #002060;
    font-size: 1.5vw;
    font-weight: bold;
    line-height: 140%;
}
    
.txt02#aka{
width:90%;
margin: 3% auto;
color: #ff0000;
text-align: left;
font-size: 1.5vw;
    font-weight: bold;
    line-height: 140%;
}  

.sec01-2 .txt01#left {
    text-align: left;
    margin: 0 auto 2% ;
    line-height: 150%;
} 
    
.sakuhin-box{
width:100%;
margin-bottom: 4%;
display: flex;
}   

.sakuhin-box#last{
width:100%;
margin-bottom: 10%;
} 

.sakuhin{
width: 30%;
margin-right: 5%;
}

.sakuhin#last{
width: 30%;
margin-right: 0;
}

.saku-txt{
font-size: 0.9vw;
line-height: 160%;
text-align: left;
}
    
.saku-photo {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  margin-bottom: 3%;
}

.saku-photo#hikoukai {
  width: 100%;
  height: auto;
  position: relative;
  padding-top: 0;
  overflow: hidden;
  margin-bottom: 3%;
}

.saku-photo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
} 

.title-wrap#sinsa {
	margin: 0 auto 5%;
	padding: 0;
	background-image: none;
	text-align: center;
}

.sinsabox{
font-size:1vw;
line-height: 170%;
text-align: left;
}

.sinsabox#left{
width:46%;
margin-right: 4%;
}

.sinsabox#right{
width:46%;
margin-right: 0;
}

.sinsabox img{
width:100%;
}

.s-title01{
width:100%;
margin-bottom: 2%;
font-size: 1.6vw;
color: #b48138;
line-height: 165%;
font-weight: bold;
}
.s-title01 img{
width:7.8%;
padding-bottom: 2%;
margin-right: 2%;
}

.s-title02{
width:100%;
margin-bottom: 2%;
font-size: 1.6vw;
color: #b3b3b3;
line-height: 165%;
font-weight: bold;
}
.s-title02 img{
width:7.8%;
padding-bottom: 2%;
margin-right: 2%;
}

.s-title03{
width:100%;
margin-bottom: 2%;
font-size: 1.6vw;
color: #b7703d;
line-height: 165%;
font-weight: bold;
}
.s-title03 img{
width:18.795%;
padding-bottom: 2%;
margin-right: 2%;
}

.s-title04{
width:100%;
margin-bottom: 2%;
font-size: 1.6vw;
color: #c80000;
line-height: 165%;
font-weight: bold;
}
.s-title04 img{
width:18.795%;
padding-bottom: 2%;
margin-right: 2%;
}

.s-title05{
width:100%;
margin:0 auto 2%;
font-size: 1.6vw;
color: #000055;
line-height: 165%;
font-weight: bold;
}

.s-title05 img {
    width: 7.8%;
    padding-bottom: 2%;
    margin-right: 2%;
}

.kekka-box{
width:100%;
margin-bottom: 5%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.moviebox#large{
width:100%;
}

.moviebox#mid{
width:48.4%;
}

.moviebox#mid2{
width:41.5%;
}

.moviebox#small{
width:37.8%;
}

.kekka-mid01-l{
width:48.4%;
margin: 0 3.2% 0 0;
}

.kekka-mid01-r{
width:48.4%;
margin: 0 0 0;
}

.kekka-mid02{
width:41.5%;
margin: 0 1.6%;
}

.kekka-small{
width:37.8%;
margin: 0 1.6% 5%;
}

.txt02-mi{
margin: 3% auto;
text-align: left;
    color: #002060;
    font-size: 1.5vw;
    font-weight: bold;
    line-height: 140%;
}

.s-title07{
width:59%;
margin-bottom: 2%;
}
.s-title07 img{
width:100%;
}


.anvasa-l{
width:59%;
margin-right: 2%;
}
.anvasa-l img{
width:100%;
}

.anvasa-r{
width:39%;
text-align: center;
}

.anvasa-txt-ao{
 color: #002060;
 margin-bottom: 5%;
}

.anvasa-txt-ao .name{
font-size: 1.7vw;
font-weight: bold;
}

.txt-nomal{
color:#000000;
font-size: 1vw;
}

/*
=============================================================================================================================================================
　　　　追加　　　　　　　　　　　　　　　スマホ
========================================================================================================================================================================== */
@media only screen and (max-width: 699px) {

#jsgp .sec01-2 {
    width: 90%;
    margin: 0 auto;
    font-size: 1vw;
    line-height: 180%;
    margin-bottom: 5%;
}

.sec01-2 .txt02#tuka {
    font-size: 16px;
    }

#jsgp .sec01-2 {
    font-size: 14px;
}

.sec01-2 .txt01 {
    text-align: left;
    margin: 0 auto 8%;
}

.txt02#aka {
    font-size: 16px;
    }

.saku-txt {
    font-size: 13px;
    line-height: 160%;
    text-align: left;
}

.sinsabox{
font-size:14px;
line-height: 170%;
text-align: left;
}

.sinsabox#left{
width:48%;
margin-right: 2%;
}

.sinsabox#right{
width:48%;
margin-left: 2%;
}

#jsgp .sec01-2 .btn {
    width: 100%;
    margin: 0 auto 5%;
}

.s-title01 {
    font-size: 20px;
    }
.s-title01 img {
    width: 15%;
    }
    
.s-title02 {
    font-size: 20px;
    }
.s-title02 img {
    width: 15%;
    }
    
.kekka-mid02 {
    width: 48.4%;
    margin: 0 3.2% 0 0;
}
    
.kekka-mid02#right {
    width: 48.4%;
    margin: 0 ;
}  

.s-title03 {
    font-size: 20px;
    }
.s-title03 img {
    width: 32%;
    }
    
.s-title04 {
    font-size: 20px;
    }
.s-title04 img {
    width: 32%;
    }
    
.s-title05 {
    width: 100%;
    font-size: 20px;
    }
    
.kekka-small {
    width: 48.4%;
    margin: 0 3.2% 5% 0;
} 
    
.kekka-small#right {
    width: 48.4%;
    margin: 0 0 5% 0;
} 

.s-title07 {
    width: 100%;
    margin-bottom: 2%;
}

.anvasa-l {
    width: 100%;
    margin-right: 0;
    margin-bottom: 3%;
}

.anvasa-r {
    width: 100%;
    text-align: center;
}

.anvasa-txt-ao .name {
    font-size: 20px;
    font-weight: bold;
}

.txt02-mi {
    font-size: 18px;
    }

.txt-nomal{
color:#000000;
font-size: 14px;
}

.sec01 .top-box2 {
    font-size: 14px;
    line-height: 170%;
}

.top-box2 .box2-title {
    font-size: 16px;
}


.about_btn {
    width: 80%;
    margin: 4% auto;
}






}