@charset "UTF-8";


.mbtm150{
	margin-bottom: 150px;
}

.sp-br {
	display: none;
}

@media screen and (max-width: 480px) {
	.sp-br {
		display: block;
	}
}



/*----------------------------------------
	缶バッジのパッケージ・包装
----------------------------------------*/

 
.pom_sectionWrap{
	display: flex;
	flex-direction: row;
}
.pom_sectionWrap .box{
	padding: 20px;
}
.pom_sec{
	width: 45%;
	margin-right: 5%;
}
.pom_sec img{
	width: 100%;
}
.pom_sec_min{
	display: flex;
	flex-direction: row;
}
.pom_sec_min img{
	width: 35%;
}

.pom_sec_daishi{
	display: flex;
	flex-direction: row;
}
.pom_sec_daishi img{
	width: 40%;
}
.pomTxt{
	margin-top: 30px;
	margin-left: 10px;
}


@media screen and (max-width: 860px){
	.pom_sec_min{
		display: flex;
		flex-direction:column;
	}
	.pom_sec_min img{
		width: 100%;
	}
	.pomTxt{
		margin-top: 10px;
		margin-left: 0px;
	}
	.pom_sectionWrap{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pom_sec{
		width: 48%;
		margin-right: 0;
	}
	.pom_sec_min img{
		width: 70%;
	}
}
@media screen and (max-width: 480px){
	.pom_sectionWrap{
		display: flex;
		flex-direction: column;
	}
	.pom_sec{
		width: 100%;
		margin-right: 0;
	}
	.pom_sec_02{
		margin-top: 30px;
	}
	.pom_sp_mtop{
		margin-top: 40px;
	}
	.pom_sec_daishi img{
		width: 50%;
	}
}





/*----------------------------------------
	データ制作ガイド
----------------------------------------*/




.gd-iphone-slider{
	display: flex;
	flex-direction: row;
}
.gd-iphone-slider li{
	width: 11%;
}
.gd-iphone-slider img{
	width: 100%;
}


.gd-iphone-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:85%;
    margin:0 auto;
}



.gd-iphone-slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.gd-iphone-slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}







/*----------------------------------------
	納期について
----------------------------------------*/

.date-caution-list{
	display: flex;
	justify-content: space-around;
}
.date-caution-list li{
	width: 26%;
	text-align: center;
}
.date-caution-img{
	width: 60%;
	max-width: 135px;
	margin: 0 auto;
}
.date-caution-list img{
	width: 100%;
}
.date-caution-list h4{
	font-size: 16px;
	font-weight: bold;
	color: #108ccf;
	margin: 15px 0 5px;
}
.date-caution-list p{
	text-align: left;
	width: 100%;
}

@media screen and (max-width: 750px){
	.date-caution-list{
		flex-wrap: wrap;
		flex-direction: column;
}
	.date-caution-list li{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		margin-bottom: 15px;
	}
	.date-caution-img{
		width: 25%;
	}
	.date-caution-list h4{
		text-align: left;
	}
	.date-caution-txt{
		width: 70%;
	}
}

@media screen and (max-width: 480px){
	.date-caution-list h4{
		margin: 0 0 5px;
	}
	.date-caution-txt{
		width: 70%;
	}
}









/*----------------------------------------
	【llustrator / Photoshop】データ制作ガイド　はじめに
----------------------------------------*/



.guide-data-base-introduction img{
	width: 100%;
}
.mihon-img{
	width: 80%;
}

.gdb-intro-cont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 0;
	border-top: 1px solid #cecece;
}
.gdb-intro-bdr0{
	border-top: none;
	padding-top: 0;
}
.gdb-intro-cont li:first-child{
	width: 35%;
}
.gdb-intro-cont li img{
	width: 100%;
}
.gdb-intro-cont li:last-child{
	width: 60%;
}


@media screen and (max-width: 480px){
	.gdb-intro-cont li:first-child{
		width: 100%;
	}
	.gdb-intro-cont li:last-child{
		width: 100%;
		margin-top: 6%;
	}
}



.gdb-intro-cont02{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 0;
	border-top: 1px solid #cecece;
}
.gdb-intro-cont02 li:first-child{
	width: 50%;
}
.gdb-intro-cont02 li:last-child{
	width: 47%;
	padding-top: 3%;
}




@media screen and (max-width: 480px){
	.gdb-intro-cont02 li:first-child{
		width: 100%;
	}
	.gdb-intro-cont02 li:last-child{
		width: 100%;
		
	}
}





/*----------------------------------------
	【llustrator / Photoshop】データ制作ガイド　作り方
----------------------------------------*/

.guide_data_base_recipe img{
	width: 100%;
}

.gdb-recipe-cont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 40px 0;
	border-top: 1px solid #cecece;
}
.gdb-recipe-cont li{
	width: 48%;
}




.guide-line-ex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 5%;
}
.guide-line-ex li{
	width: 30%;
	margin-top: 3%;
}

@media screen and (max-width:480px){
	.gdb-recipe-cont li{
		width: 100%;
		margin-bottom: 3%;
	}
	.guide-line-ex li{
		width: 100%;
		margin-top: 5%;
	}
}






.gdb-intro-bdr0{
	border-top: none;
	padding-top: 0;
}











.guide-data-base-introduction .link-tab,
.guide_data_base_recipe .link-tab,
.guide_data_list .link-tab{
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: center;
}


.guide-data-base-introduction .link-tab li,
.guide_data_base_recipe .link-tab li,
.guide_data_list .link-tab li{
  width: 24.25%;
  margin-right: 1%;
}

.guide-data-base-introduction .link-tab li a,
.guide_data_base_recipe .link-tab li a,
.guide_data_list .link-tab li a{
  line-height: 120%;
  color: #108ccf;
  border: 1px solid #108ccf;
  text-align: center;
  border-radius: 5px;
  padding: 10px 15px 7px;
  height: 60px;
  font-weight: bold;
  transition : all 0.3s ease 0s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-data-base-introduction .link-tab li:last-child,
.guide_data_base_recipe .link-tab li:last-child,
.guide_data_list .link-tab li:last-child{
  margin-right: 0;
}

.guide-data-base-introduction .link-tab .active a,
.guide_data_base_recipe .link-tab .active a,
.guide_data_list .link-tab .active a{
  color: #fff;
  border: 1px solid #108ccf;  
  background: #108ccf;
  position: relative;
}


.guide-data-base-introduction .link-tab .active a::after,
.guide_data_base_recipe .link-tab .active a::after,
.guide_data_list .link-tab .active a::after{
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #108ccf;
  z-index: 1;
}


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

  
  .guide-data-base-introduction .link-tab li,
	.guide_data_base_recipe .link-tab li,
	.guide_data_list .link-tab li{
    width: 32%;
    margin-right: 2%;
  }

  .guide-data-base-introduction .link-tab li a,
	.guide_data_base_recipe .link-tab li a,
	.guide_data_list .link-tab li a{
    padding: 7px 12px 4px;
    height: 50px;
  }
}




/*----------------------------------------
	【llustrator / Photoshop】データ制作ガイド　入稿前チェックリスト
----------------------------------------*/

.gd-check-ttl{
	background: url("../images/common/checkIcon.png") no-repeat top left;
	min-height: 26px;
	background-size: auto 26px;
	font-weight: bold;
	padding: 4px 0 0 36px;
	margin-bottom: 10px;
	color: #108ccf;
}
.gd-dl-btn{
	background: url("../images/template/dlIcon.png") no-repeat top left;
	background-size: 20px;
	padding-left: 26px;
}

.gd-orange{
	color: #f19503;
}




/*----------------------------------------
	アシストサービス
----------------------------------------*/

.dt-service-list{
	display: flex;
}
.dt-service-list li{
	width: 25%;
}
.dt-service-list li img{
	width: 100%;
}
.dt-service-list2{
	display: flex;
}
.dt-service-list2 li:last-child{
	width: 50%;
	margin-left: 3%;
}
.dt-service-list2 img{
	width: 100%;
	border: 1px solid #E2E2E2;
}


@media screen and (max-width: 750px){
	.dt-service-list2{
		flex-wrap: wrap;
	}
	.dt-service-list2 li:first-child{
		width: 60%;
	}
	.dt-service-list2 li:last-child{
		width: 100%;
		margin-left: 0;
	}
}

@media screen and (max-width: 480px){
	.dt-service-list{
		flex-wrap: wrap;
	}
	.dt-service-list li{
		width: 50%;
	}
	.dt-service-list li:nth-child(3),
	.dt-service-list li:nth-child(4){
		margin-top: 3%;
	}
}





/*----------------------------------------
	データ制作システム
----------------------------------------*/

.guide_datasystem_wrap{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 85%;
	margin: 0 auto;
}


.guide_datasystem_fv{
	padding: 3% 0 5%;
	background: url("../images/guide_datasystem/top-bg.jpg");
}
.guide_datasystem_fv h2{
	width: 50%;
	margin: 0 auto;
	margin-bottom: 3%;
}
.guide_datasystem_fv img{
	width: 100%;
}
.guide_datasystem_chara{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	width: 36%;
	margin: 0 auto;
}
.guide_datasystem_chara li:first-child{
	width: 52%;
}
.guide_datasystem_chara li:last-child{
	width: 48%;
	
}
.guide_datasystem_chara li img{
	width: 100%;
	vertical-align: bottom;
}

.guide_datasystem_fv-txt{
	width: 60%;
	margin: 0 auto;
	border-radius: 20px;
	padding-top: 6%;
}
.guide_datasystem_fv-txt p{
	padding-left: 13px;
	font-size: 18px;
}
.guide_datasystem_fv-txt ul{
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 60px; 
}

.guide_datasystem_fv-txt li:first-child a{
	
}

.gd-orderBtn,.gd-orderBtn-2 {
	width: 46%;
}

.gd-orderBtn a {
  color: #0099E0;
	background: #fff;
	opacity: 1;
  border: 2px solid #0099E0;
  font-weight: bold;
  border-radius: 5px;
  padding: 20px 10px 17px;
  display: block;
  text-align: center;
  position: relative;
  line-height: 120%;
}

.gd-orderBtn a::after {
  content: "";
  position: absolute;
  right: 1.5em;
  top: 50%;
  margin-top: -4px;
  transition: all .2s;
  width: 8px;
  height: 8px;
  border-top: solid 3px #0099E0;
  border-right: solid 3px #0099E0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gd-orderBtn a:hover{
	cursor: pointer;
}
.gd-orderBtn a:hover::after {
  right: 1em;
}

.gd-orderBtn-2 span{
	font-size: 13px;
}
.gd-orderBtn-2 a {
  color: #fff;
	background: #0099E0;
  border: 2px solid #0099E0;
  font-weight: bold;
  border-radius: 5px;
  padding: 20px 10px 17px;
  display: block;
  text-align: center;
  position: relative;
  line-height: 120%;
}

.gd-orderBtn-2 a::after {
  content: "";
  position: absolute;
  right: 1.5em;
  top: 50%;
  margin-top: -4px;
  transition: all .2s;
  width: 8px;
  height: 8px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.gd-orderBtn-2 a:hover{
	cursor: pointer;
}
.gd-orderBtn-2 a:hover::after {
  right: 1em;
}
.gd-red{
	color: red;
}

.gd-safari{
	background: url(../images/guide_datasystem/safari-icon.jpg) no-repeat left;
	padding-left: 23px;
	background-size: 20px auto;
	min-height: 26px;
}
.gd-chrome{
	background: url(../images/guide_datasystem/chrome-icon.jpg) no-repeat left;
	padding-left: 23px;
	background-size: 20px auto;
	min-height: 26px;
}
.gd-firefox{
	background: url(../images/guide_datasystem/firefox-icon.jpg) no-repeat left;
	padding-left: 23px;
	background-size: 20px auto;
	min-height: 26px;
}




@media screen and (max-width: 750px){
	
	
	.guide_datasystem_wrap{
		display: block;
		
		width: 85%;
		margin: 0 auto;
	}
	
	.guide_datasystem_chara{
		width: 36%;
		margin: 0 auto;
		margin-top: 5%;
}
	
	
	
	.guide_datasystem_fv h2{
		width: 70%;
		margin: 0 auto;
		
	}
	.guide_datasystem_fv-txt{
		width: 94%;
	}
	.guide_datasystem_fv-txt ul{
		text-align: center;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 20px; 
	}
	.gd-orderBtn,.gd-orderBtn-2 {
		width: 96%;
	}
	.gd-orderBtn-2{
		margin-top: 2.5%;
	}
	.guide_datasystem_fv-txt p{
		text-align: center;
		font-size: 16px;
	}
}



.guide_datasystem .list4sp2 li:nth-child(odd){
	width: 17.5%;
}
.guide_datasystem .list4sp2 li:nth-child(even){
	width: 10%;
	padding: 0 10px;
	margin-top: 6.25%;
}




.guide_datasystem-flow {
  display: flex;
  justify-content: space-between;
  text-align: center;
}


.guide_datasystem-flow li:nth-child(odd) {
  width: 17.5%;
}

.guide_datasystem-flow li img {
  width: 100%;
}

.guide_datasystem-flow li:nth-child(even) {
  width: 10%;
  padding: 0 10px;
  margin-top: 6.25%;
}

.guide_datasystem-flow li:nth-child(even) img {
  width: 35%;
  max-width: 24px;
}

.guide_datasystem-flow li p {
  font-weight: bold;
  margin-top: 10px;
  line-height: 140%;
}



@media screen and (max-width: 480px) {
	
	.guide_datasystem_fv h2{
		width: 85%;
		margin: 0 auto;
		margin-top: 4%;
	}
	
	.guide_datasystem_chara{
		width: 75%;
		margin: 0 auto;
		margin-top: 7%;
	}
	
	.guide_datasystem_fv-txt{
		width: 100%;
	}
	.guide_datasystem_fv-txt p{
		text-align: center;
		font-size: 13px;
		padding-left: 0;
	}
	.gd-orderBtn,.gd-orderBtn-2 {
		width: 100%;
	}

  .guide_datasystem-flow {
    display: flex;
    justify-content: flex-start;
    text-align: center;
    flex-wrap: wrap;
  }


  .guide_datasystem-flow li:nth-child(odd) {
    width: 45%;
  }


  .guide_datasystem-flow li:nth-child(even) {
    width: 10%;
    padding: 0 10px;
    margin-top: 17.25%;
  }

  .guide_datasystem-flow li:nth-child(4) {
    display: none;
  }
  
  
  .guide_datasystem-flow li:nth-child(1) ,
  .guide_datasystem-flow li:nth-child(3) {
    padding-bottom: 5%;
  }

  .guide_datasystem-flow li:nth-child(even) img {
    width: 100%;
    max-width: 24px;
  }

  .guide_datasystem-flow li p {
    font-weight: bold;
    margin-top: 10px;
    line-height: 140%;
  }
	
	
	
	
	
.gd-safari{
	padding-left: 19px;
	background-size: 17px auto;
	min-height: 17px;
}
.gd-chrome{
	padding-left: 19px;
	background-size: 17px auto;
	min-height: 17px;
}
.gd-firefox{
	padding-left: 19px;
	background-size: 17px auto;
	min-height: 17px;
}

}


/*----------------------------------------
	Illustrator / Photoshopソフトをお持ちの方へ
----------------------------------------*/


.template-page .makeLinkList li a{
	border: none;
	padding: 12px 40px 9px 20px;
	color: #fff;
	margin-top: 30px;
	
}

.template-page .makeLinkList li {
    border: 3px solid #eee;
    display: block;
    padding: 10px 40px 50px;
    color: #333;
}
.template-page .makeLinkList{
	justify-content: space-between;
	flex-wrap: wrap;
}
.template-page .makeLinkList li{
	width: 32%;
}
.template-page .makeLinkList li:first-child{
	margin-right: 0;
}
@media screen and (max-width: 750px){
	.template-page .makeLinkList li{
		width: 49%;
		padding: 10px 15px 50px;
	}
	.template-page .makeLinkList li:last-child{
		margin-top: 15px;
	}
	.template-page .makeLinkList li a{
		width: 170px;
		margin: 30px auto 0;
	}
}
@media screen and (max-width: 480px){
	.template-page .makeLinkList li{
		width: 100%;
		margin: 0 auto;
		padding: 10px 40px 50px;
	}
	.template-page .makeLinkList li:last-child{
		margin-top: 20px;
	}
	.template-page .makeLinkList li:nth-child(2){
		margin-top: 20px;
	}
	.template-page .makeLinkList li a{
		width: 170px;
		margin: 30px auto 0;
	}
}




.tempTtl {
  font-size: 20px;
  margin-bottom: 40px;
  border-left: 5px solid #0099E0;
  line-height: 110%;
  padding: 2px 0 0 10px;
}

.tempList {
  display: flex;
  flex-wrap: wrap;
}

.tempList > li {
  width: 24.25%;
  margin-right: 1%;
  text-align: center;
  display: flex;
  border: 1px solid #f0f0f0;
  border-radius: 10px;  
  transition : all 0.3s ease 0s;    
}

.tempList > li:nth-child(4n) {
  margin-right: 0;
}

.tempList > li:nth-child(n+5) {
  margin-top: 1%;
}

.tempList li a {
  color: #333;
  display: block;
  font-size: 15px;
  width: 100%;
  padding: 15px;
}

.tempList li img {
  width: 100%;
  max-width: 100px;
  transition : all 0.3s ease 0s;    
}

.tempList li h5 {
  font-weight: bold;
  margin: 15px 0 10px;
  transition : all 0.3s ease 0s;  
}

.tempList > li:hover {
  border: 1px solid #0099E0;  
}

.tempList li a:hover {
  opacity: 1;
}

.tempList li a:hover h5 {
  color: #0099E0;
  opacity: 1;
}

.tempList li a:hover img {
  opacity: 0.7;
}

.tempList ul {
  display: flex;
  justify-content: center;
}

.tempList ul li {
  color: #777;
  font-size: 11px;
  border: 1px solid #777;
  border-radius: 6px;
  padding: 4px 0 3px;
  line-height: 120%;
  margin-right: 5px;
  width: 46px;
  text-align: center;
}

.tempList ul li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 750px) {
  .tempTtl {
    font-size: 18px;
    margin-bottom: 30px;
    border-left: 5px solid #0099E0;
    line-height: 110%;
    padding: 2px 0 0 10px;
  }
  
  .tempList > li {
    width: 32.666%;
    margin-right: 1%;
    display: flex;
  }

  .tempList > li:nth-child(4n) {
    margin-right: 1%;
  }

  .tempList > li:nth-child(3n) {
    margin-right: 0;
  }

  .tempList > li:nth-child(n+4) {
    margin-top: 1%;
  }

  .tempList li a {
    font-size: 14px;
    padding: 10px;
  }

  .tempList li img {
    max-width: 80px;
  }

  .tempList li h5 {
    font-weight: bold;
    margin: 10px 0 5px;
  }
}

@media screen and (max-width: 480px) {
  .tempTtl {
    font-size: 16px;
    margin-bottom: 25px;
    border-left: 4px solid #0099E0;
    line-height: 110%;
    padding: 2px 0 0 8px;
  }
  
  .tempList > li {
    width: 49.5%;
    margin-right: 1%;
    display: flex;
  }
  
  .tempList > li:nth-child(3n) {
    margin-right: 1%;
  }  

  .tempList > li:nth-child(even) {
    margin-right: 0;
  }

  .tempList > li:nth-child(n+3) {
    margin-top: 1%;
  }

  .tempList li a {
    font-size: 13px;
    padding: 10px;
  }

  .tempList li img {
    max-width: 70px;
  }

  .tempList li h5 {
    font-weight: bold;
    margin: 10px 0 5px;
  }
  
}






/*----------------------------------------
	データ制作ガイド
----------------------------------------*/


.gd-iphone-slider{
	display: flex;
	flex-direction: row;
}
.gd-iphone-slider li{
	padding-top: 20px;
}
.gd-iphone-slider img{
	width: 85%;
	margin: 0 auto;
}


.gd-iphone-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:85%;
    margin:0 auto;
}
.gd-iphone-slider .slick-dots{
	bottom: -40px;
}


.gd-iphone-slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}
.gd-iphone-slider .slick-slide p{
	opacity: 0.1;
}

.gd-iphone-slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.gd-iphone-slider .slick-slide.slick-center img{
	box-shadow: 2px 2px 10px #c3c3c3;
}
.gd-iphone-slider .slick-slide.slick-center p{
	opacity: 1;
}

.gd-iphone .box{
	padding: 20px 30px;
}


@media screen and (max-width: 480px){
	.gd-iphone-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
		width:95%;
	}
	.gd-iphone-slider img{
		width: 85%;
	}
	.gd-iphone .productTtl{
		
	}
	.gd-iphone-slider .slick-slide.slick-center p{
		margin-top: 20px;
		width: 130%;
		margin-left: -15%;
	}
	.gd-iphone-slider .slick-dots{
		bottom: -25px;
	}
}


@media screen and (max-width: 417px){
	.gd-iphone-step1 .slick-dots{
		bottom: -12%;
	}
	.gd-iphone-step1 .slick-dots li{
		margin: 0 2px;
	}
	.gd-iphone .box{
		margin-top: 120px;
	}
}
@media screen and (max-width: 390px){
	.gd-iphone-step1 .slick-dots{
		bottom: -15px;
	}
	.gd-iphone .box{
		margin-top: 50px;
	}
}


.gd-iphone .link-tab,
.gd-iphone .link-tab,
.gd-iphone .link-tab{
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: center;
}


.gd-iphone .link-tab li,
.gd-iphone .link-tab li,
.gd-iphone .link-tab li{
  width: 24.25%;
  margin-right: 1%;
}

.gd-iphone .link-tab li a,
.gd-iphone .link-tab li a,
.gd-iphone .link-tab li a{
  line-height: 120%;
  color: #108ccf;
  border: 1px solid #108ccf;
  text-align: center;
  border-radius: 5px;
  padding: 10px 15px 7px;
  height: 60px;
  font-weight: bold;
  transition : all 0.3s ease 0s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-iphone .link-tab li:last-child,
.gd-iphone .link-tab li:last-child,
.gd-iphone .link-tab li:last-child{
  margin-right: 0;
}

.gd-iphone .link-tab .active a,
.gd-iphone .link-tab .active a,
.gd-iphone .link-tab .active a{
  color: #fff;
  border: 1px solid #108ccf;  
  background: #108ccf;
  position: relative;
}


.gd-iphone .link-tab .active a::after,
.gd-iphone .link-tab .active a::after,
.gd-iphone .link-tab .active a::after{
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #108ccf;
  z-index: 1;
}


@media screen and (max-width: 750px) {
	.gd-iphone .link-tab li,
	.gd-iphone .link-tab li,
	.gd-iphone .link-tab li{
		width: 32%;
		margin-right: 2%;
	}

	.gd-iphone .link-tab li a,
	.gd-iphone .link-tab li a,
	.gd-iphone .link-tab li a{
		padding: 7px 12px 4px;
		height: 50px;
	}
}




/*----------------------------------------
	白押さえの作り方
----------------------------------------*/

.tabLink2 {
  display: flex;
}

.tabLink2 li {
  width: 50%;
  color: #108ccf;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border: 1px solid #108ccf;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;

}

.tabLink2 li:first-child {
  border-right: 1px solid #108ccf;
}

.tabLink2 li:last-child {
  border-left: 1px solid #108ccf;
}

.tabLink2 li a {
  text-decoration: none;
  line-height: 140%;
  padding: 10px 15px 7px;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.tabLink2 li.active {
  background-color: #108ccf;
}

.tabLink2 li.active::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #108ccf;
}

.tabLink2 li.active a {
  color: #fff;
}

.tabLink2 a:hover {
  opacity: 1;
}




/*----------------------------------------
	カンタン！ 見積り作成ガイド
----------------------------------------*/
.guideInqestBtn {
  display: flex;
  justify-content: space-between;
  max-width: 860px;
  margin: auto;
  text-align: center;
}

.guideInqestBtn li {
  width: 49%;
  border-radius: 10px;
  padding: 30px 30px 100px;
  position: relative;
}

.guideInqestBtn li:first-child {
  background: #e2f5ff;
}

.guideInqestBtn li:last-child {
  background: #FFFCDF;
}

.guideInqestBtn li div {
  position: absolute;
  width: calc(100% - 60px);
  bottom: 20px;
}

.guideInqestBtn li a {
  color: #fff;
  font-weight: bold;
  display: block;
  line-height: 140%;
  padding: 20px 25px 18px;
  border-radius: 5px;
  position: relative;
}

.guideInqestBtn li:first-child a {
  background: #308ccf;
}

.guideInqestBtn li:last-child a {
  background: #F8B500;
}

.guideInqestBtn li a::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 50%;
  margin-top: -4px;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.guideInqestBtn li a:hover::after {
  right: .5em;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;  
}

@media screen and (max-width: 750px) {
	.guideInqestBtn li {
		padding: 20px 20px 90px;
		position: relative;
	}
	.guideInqestBtn li div {
		position: absolute;
		width: calc(100% - 40px);
		bottom: 20px;
	}

	.guideInqestBtn li a {
		line-height: 140%;
		padding: 18px 20px 16px;
	}
	.guideInqestBtn li a::after {
		right: .7em;
	}
	.guideInqestBtn li a:hover::after {
		right: .4em;
	}
}

@media screen and (max-width: 640px) {
	.guideInqestBtn {
		display: block;
		width: 100%;
		max-width: 400px;
	}

	.guideInqestBtn li {
		width: 100%;
		padding: 20px 20px 20px;
		position: relative;
	}

	.guideInqestBtn li:first-child {
		background: #e2f5ff;
		margin-bottom: 15px;
	}

	.guideInqestBtn li:last-child {
		background: #FFFCDF;
	}

	.guideInqestBtn li div {
		position: static;
		width: 100%;
		max-width: 300px;
		bottom: 0;
		margin: 10px auto 0;
	}

	.guideInqestBtn li a {
		color: #fff;
		font-weight: bold;
		display: block;
		line-height: 140%;
		padding: 16px 20px 14px;
		border-radius: 5px;
		position: relative;
	}

	.guideInqestBtn li:first-child a {
		background: #308ccf;
	}

	.guideInqestBtn li:last-child a {
		background: #F8B500;
	}

	.guideInqestBtn li a::after {
		content: "";
		position: absolute;
		right: 1em;
		top: 50%;
		margin-top: -4px;
		transition: all 0.2s ease-in-out;
		display: block;
		width: 6px;
		height: 6px;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.guideInqestBtn li a:hover::after {
		right: .5em;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;  
	}
}







/*----------------------------------------
	Illustrator / Photoshopソフトをお持ちの方へ
----------------------------------------*/


.template-page .makeLinkList li a{
	border: none;
	padding: 12px 40px 9px 20px;
	color: #fff;
	margin-top: 30px;
	
}

.template-page .makeLinkList li {
    border: 3px solid #eee;
    display: block;
    padding: 10px 40px 50px;
    color: #333;
}
.template-page .makeLinkList{
	justify-content: space-between;
	flex-wrap: wrap;
}
.template-page .makeLinkList li{
	width: 32%;
}
.template-page .makeLinkList li:first-child{
	margin-right: 0;
}
@media screen and (max-width: 750px){
	.template-page .makeLinkList li{
		width: 49%;
		padding: 10px 15px 50px;
	}
	.template-page .makeLinkList li:last-child{
		margin-top: 15px;
	}
	.template-page .makeLinkList li a{
		width: 170px;
		margin: 30px auto 0;
	}
}
@media screen and (max-width: 480px){
	.template-page .makeLinkList li{
		width: 100%;
		margin: 0 auto;
		padding: 10px 40px 50px;
	}
	.template-page .makeLinkList li:last-child{
		margin-top: 20px;
	}
	.template-page .makeLinkList li:nth-child(2){
		margin-top: 20px;
	}
	.template-page .makeLinkList li a{
		width: 170px;
		margin: 30px auto 0;
	}
}




.tempTtl {
  font-size: 20px;
  margin-bottom: 40px;
  border-left: 5px solid #0099E0;
  line-height: 110%;
  padding: 2px 0 0 10px;
}

.tempList {
  display: flex;
  flex-wrap: wrap;
}

.tempList > li {
  width: 24.25%;
  margin-right: 1%;
  text-align: center;
  display: flex;
  border: 1px solid #f0f0f0;
  border-radius: 10px;  
  transition : all 0.3s ease 0s;    
}

.tempList > li:nth-child(4n) {
  margin-right: 0;
}

.tempList > li:nth-child(n+5) {
  margin-top: 1%;
}

.tempList li a {
  color: #333;
  display: block;
  font-size: 15px;
  width: 100%;
  padding: 15px;
}

.tempList li img {
  width: 100%;
  max-width: 100px;
  transition : all 0.3s ease 0s;    
}

.tempList li h5 {
  font-weight: bold;
  margin: 15px 0 10px;
  transition : all 0.3s ease 0s;  
}

.tempList > li:hover {
  border: 1px solid #0099E0;  
}

.tempList li a:hover {
  opacity: 1;
}

.tempList li a:hover h5 {
  color: #0099E0;
  opacity: 1;
}

.tempList li a:hover img {
  opacity: 0.7;
}

.tempList ul {
  display: flex;
  justify-content: center;
}

.tempList ul li {
  color: #777;
  font-size: 11px;
  border: 1px solid #777;
  border-radius: 6px;
  padding: 4px 0 3px;
  line-height: 120%;
  margin-right: 5px;
  width: 46px;
  text-align: center;
}

.tempList ul li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 750px) {
  .tempTtl {
    font-size: 18px;
    margin-bottom: 30px;
    border-left: 5px solid #0099E0;
    line-height: 110%;
    padding: 2px 0 0 10px;
  }
  
  .tempList > li {
    width: 32.666%;
    margin-right: 1%;
    display: flex;
  }

  .tempList > li:nth-child(4n) {
    margin-right: 1%;
  }

  .tempList > li:nth-child(3n) {
    margin-right: 0;
  }

  .tempList > li:nth-child(n+4) {
    margin-top: 1%;
  }

  .tempList li a {
    font-size: 14px;
    padding: 10px;
  }

  .tempList li img {
    max-width: 80px;
  }

  .tempList li h5 {
    font-weight: bold;
    margin: 10px 0 5px;
  }
}

@media screen and (max-width: 480px) {
  .tempTtl {
    font-size: 16px;
    margin-bottom: 25px;
    border-left: 4px solid #0099E0;
    line-height: 110%;
    padding: 2px 0 0 8px;
  }
  
  .tempList > li {
    width: 49.5%;
    margin-right: 1%;
    display: flex;
  }
  
  .tempList > li:nth-child(3n) {
    margin-right: 1%;
  }  

  .tempList > li:nth-child(even) {
    margin-right: 0;
  }

  .tempList > li:nth-child(n+3) {
    margin-top: 1%;
  }

  .tempList li a {
    font-size: 13px;
    padding: 10px;
  }

  .tempList li img {
    max-width: 70px;
  }

  .tempList li h5 {
    font-weight: bold;
    margin: 10px 0 5px;
  }
  
}




/*----------------------------------------
	データ不備の解決方法
----------------------------------------*/

.ai-icon-right::after{
	content: '';
	display: inline-block;
	width: 10px;
	background: url("../images/common/icon-ai.png") no-repeat;
	vertical-align: text-bottom;
	background-size: contain;
	padding-left: 26px;
	height: 26px;
	margin-left: 10px;
}


.check-ai-icon-right::after{
	content: '';
	display: inline-block;
	width: 10px;
	background: url("../images/common/icon-ai.png") no-repeat;
	vertical-align: bottom;
	background-size: contain;
	padding-left: 12px;
	height: 26px;
	margin-left: 10px;
}

.dg-sol-sp{
	display: none;
}



@media screen and (max-width: 480px){
	.dg-sol-sp{
		display: block;
	}
}



.gd-sol-w-il .guideCntList,
.gd-sol-w-ph .guideCntList{
	border: none;
}





/*----------------------------------------
	オプション一覧ページ
----------------------------------------*/

.material .link-tab,
.parts .link-tab,
.option .link-tab{
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: center;
}


.material .link-tab li,
.parts .link-tab li,
.option .link-tab li{
  width: 24.25%;
  margin-right: 1%;
}

.material .link-tab li a,
.parts .link-tab li a,
.option .link-tab li a{
  line-height: 120%;
  color: #108ccf;
  border: 1px solid #108ccf;
  text-align: center;
  border-radius: 5px;
  padding: 10px 15px 7px;
  height: 60px;
  font-weight: bold;
  transition : all 0.3s ease 0s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material .link-tab li:last-child,
.parts .link-tab li:last-child,
.option .link-tab li:last-child{
  margin-right: 0;
}

.material .link-tab .active a,
.parts .link-tab .active a,
.option .link-tab .active a{
  color: #fff;
  border: 1px solid #108ccf;  
  background: #108ccf;
  position: relative;
}


.material .link-tab .active a::after,
.parts .link-tab .active a::after,
.option .link-tab .active a::after{
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #108ccf;
  z-index: 1;
}


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

  
	.material .link-tab li,
	.parts .link-tab li,
	.option .link-tab li{
		width: 32%;
		margin-right: 2%;
	}

	.material .link-tab li a,
	.parts .link-tab li a,
	.option .link-tab li a{
		padding: 7px 12px 4px;
		height: 50px;
	}
}


/*----------------------------------------
	データ入稿について
----------------------------------------*/

.gd-submit-border{
	border-top: 3px dotted #D8D8D8;
}


/*----------------------------------------
	ご利用ガイド問い合わせボタン
----------------------------------------*/

.resol-btn-wrapper{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.before-order-btn{
	margin: 30px 18px 0;
	width: 100%;
	max-width: 300px;
}
.before-order-btn a{
	text-decoration: none;
	color: #fff;
  background: #108CCF;
  font-weight: bold;
  padding: 20px 10px 18px;
  display: block;
  text-align: center;
  position: relative;
}
.before-order-btn a::after{
	content: "";
  position: absolute;
  right: 1em;
  top: 50%;
  margin-top: -5px;
  transition: all .2s;
  width: 8px;
  height: 8px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.before-order-btn a:hover::after {
  right: .5em;
}
.before-order-btn a:hover {
  opacity: 0.7;
}


.after-order-btn{
	margin: 30px 18px 0;
	width: 100%;
	max-width: 300px;
}
.after-order-btn a{
	text-decoration: none;
	color: #108CCF;
  background: #fff;
  font-weight: bold;
  padding: 20px 10px 18px;
  display: block;
  text-align: center;
  position: relative;
	border: 1px solid #108CCF;
}
.after-order-btn a::after{
	content: "";
  position: absolute;
  right: 1em;
  top: 50%;
  margin-top: -5px;
  transition: all .2s;
  width: 8px;
  height: 8px;
  border-top: solid 3px #108CCF;
  border-right: solid 3px #108CCF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.after-order-btn a:hover::after {
  right: .5em;
}
.after-order-btn a:hover {
  opacity: 0.7;
}


@media screen and (max-width: 600px){
	.resol-btn-wrapper{
		flex-direction: column;
	}
	.before-order-btn{
		margin: 30px auto 0;
	}
	.after-order-btn{
		margin: 10px auto 0;
	}
}





.gray-bg{
	background: #f6f6f6;
	padding: 5px 15px;
	border-radius: 5px;
}








/*----------------------------------------
	画像をメールで送るだけで簡単入稿
----------------------------------------*/

.dataservice-recommend-ttl{
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	background: #108CCF;
	padding: 8px;
}
.dataservice-recommend{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.dataservice-recommend li{
	width: 33.3333%;
}
.dataservice-recommend li:nth-child(2) br,
.dataservice-recommend li:nth-child(3) br{
	display: none;
}
.dataservice-recommend p{
	font-size: 20px;
}
.dataservice-recommend img{
	width: 100%;
}
.dataservice-flow{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.dataservice-flow li{
	width: 30%;
	font-size: 18px;
}
.dataservice-flow li img{
	width: 100%;
}
.dataservice-draft-data{
	display: flex;
	width: 85%;
}
.dataservice-draft-data li:nth-child(odd){
	width: 28%;
}
.dataservice-draft-data li:nth-child(odd) img{
	width: 100%;
}
.dataservice-draft-data li:nth-child(even){
	width: 8%;
	padding: 0 10px;
	margin-top: 10.25%;
}
.dataservice-draft-data li:nth-child(even) img{
	width: 45%;
}

@media screen and (max-width: 700px){
	.dataservice-flow li{
		width: 47%;
		margin-top: 10px;
		font-size: 1.0rem;
	}
	.dataservice-draft-data li:nth-child(even) img{
		width: 60%;
	}
	.dataservice-draft-data{
		display: flex;
		width: 100%;
	}
}
@media screen and (max-width: 600px){
	.dataservice-recommend-ttl{
		font-size: 1.5rem;
	}
	.dataservice-recommend p{
		font-size: 16px;
	}
	.dataservice-recommend li:nth-child(2) br,
	.dataservice-recommend li:nth-child(3) br{
		display: block;
	}
}
@media screen and (max-width: 500px){
	.dataservice-recommend-ttl{
		font-size: 1.1rem;
	}
	.dataservice-recommend{
		flex-wrap: wrap;
	}
	.dataservice-recommend li{
		
	}
	.dataservice-recommend p{
		font-size: 14px;
	}
	
	.dataservice-flow li{
		font-size: 0.8rem;
	}
	.dataservice-draft-data li:nth-child(even) img{
		width: 100%;
	}
}



/*----------------------------------------
	シミュレーター
----------------------------------------*/

.window .content .inner {
	padding: 3% 0 2%;
	max-width: 100%;
	margin: 0;
}

.simulator-title {
	text-align: center;
	margin-bottom: 15px;
}

.simulator-title img {
	max-width: 100%;
	width: 67%;
	margin: 0 auto;
}

.simulator-main-img {
	max-width: 100%;
	width: 95%;
	margin: 0 auto;
}

.simulator-main-img img {
	width: 100%;
}

.simulator-main-expl {
	text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin-top: 10px;
}

.btn-container {
	display: flex;
    justify-content: space-around;
	flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
    margin-top: 30px;
}

.simulator-btn {
/*	display: inline-block;*/
}

.simulator-btn.use a {
	display: inline-block;
    background: #108ccf;
    padding: 15px;
    width: 350px;
    text-align: center;
    color: #fff;
	border-radius: 6px;
	position: relative;
}

.simulator-btn.use a::after {
	content: "";
    position: absolute;
    right: 1.3em;
    top: 47%;
    margin-top: -4px;
    transition: all .2s;
    width: 8px;
    height: 8px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.simulator-btn.use a:hover::after {
	right: 1rem;
}

.simulator-btn.next {
	margin-top: 12px;
}

.simulator-btn.next a {
	display: inline-block;
    background: #fff;
    padding: 15px;
    width: 350px;
    text-align: center;
    color: #0099e0;
	border:1px solid #108ccf;
	border-radius: 6px;
	position: relative;
}

.simulator-btn.next a::after {
	content: "";
    position: absolute;
    right: 1.3em;
    top: 47%;
    margin-top: -4px;
    transition: all .2s;
    width: 8px;
    height: 8px;
    border-top: solid 2px #108ccf;
    border-right: solid 2px #108ccf;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.simulator-btn.next a:hover::after {
	right: 1rem;
}
.assist_popup .simulator-main-img {width: 84.8%;}

.assist_popup .btn-container {margin-bottom: 20px;}


@media screen and (max-width: 768px) {
	.btn-container {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
		margin-top: 15px;
	}
	
	.simulator-btn.use {
		width: 93%;
	}
	
	.simulator-btn.next {
		width: 93%;
		margin-top: 8px;
	}
	
	.simulator-btn.use a {
		width: 100%;
	}
	
	.simulator-btn.next a {
		width: 100%;
	}
	
}

@media screen and (max-width: 480px) {
	
	.simulator-title img {
		width: 80%;
	}
	
	.simulator-main-img {
		width: 100%;
	}
	
	.simulator-main-expl {
		font-size: 14px;
	}
	.assist_popup .simulator-main-img {width: 95%;}
}








/*----------------------------------------
	注文・入稿の流れ
----------------------------------------*/



.link-tab-shopping {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.link-tab-shopping li {
	width: 50%;
    color: #108CCF;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    border: 1px solid #108CCF;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.link-tab-shopping li a {
	text-decoration: none;
    line-height: 140%;
    padding: 10px 15px 7px;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-tab-shopping li.active a {
	color: #fff;
}

.link-tab-shopping li.active {
	background-color: #108CCF;
}

.link-tab-shopping li:first-child {
	border-right: 1px solid #108CCF;
}

.link-tab-shopping li.active::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #108CCF;
}

.gs-num-list {
	counter-reset: num;
}

.gs-num-list > li {
	position: relative;
    padding: 8px 0 0 50px;
    margin-bottom: 20px;
}

.gs-num-list > li::before {
	counter-increment: num;
    content: counter(num);
    position: absolute;
    top: 0;
    left: 0;
    background: #e2f5ff;
    color: #108CCF;
    display: inline-block;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
}

.step-sub-title {
	background: #fffbe2;
    color: #108CCF;
    font-weight: bold;
    padding: 10px 10px 8px;
    border-radius: 6px;
    text-align: center;
    line-height: 110%;
    width: 100px;
}


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

  
}




.gs-check {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url('../images/guide_shopping/check.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	vertical-align: middle;
}





/*----------------------------------------
	データ制作システム
----------------------------------------*/

.guide-dataservice__top-container {
	background: url("../images/guide_datasystem/top-bg.jpg");
	padding: 70px 0 60px;
}

.guide-dataservice__top-container img {
	max-width: 100%;
}

.guide-dataservice__top-inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	justify-content: center;
}

.guide-dataservice__smp-container {
	width: 35%;
	position: relative;
	height: auto;
}

.guide-dataservice__smp {
	display: block;
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 10%;
	transform: translateX(-50%);
}

.guide-dataservice__title-container {
	width: 55%;
	margin-right: -50px;
	
}

.guide-dataservice__title {
	width: 100%;
}

.guide-dataservice__main-title {
	
}

.guide-dataservice__main-title .renewal {
	width: 25%;
	margin-bottom: 15px;
}

.guide-dataservice__main-title .title {
	width: 100%;
	margin-bottom: 15px;
}

.guide-dataservice__main-title .sub-txt {
	width: 70%;
}

.guide-dataservice__expl {
	margin-top: 30px;
}

.guide-dataservice__btn {
	position: relative;
	width: 300px;
	margin: 70px auto 0;
}

.guide-dataservice__btn img {
	position: absolute;
	top: -50%;
	left: -15%;
	width: 85px;
}

.guide-dataservice__btn a {
	display: inline-block;
	text-align: center;
	background: #108CCF;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 20px;
	border-radius: 10px;
	width: 100%;
}

.guide-dataservice__smp.sp {
	display: none;
}

 
@media screen and (max-width: 1000px) {
	.guide-dataservice__smp {
		bottom: 26%;
	}
}


@media screen and (max-width: 768px) {
	
	.guide-dataservice__top-container {
		padding: 20px 0 20px;
	}
	
	.guide-dataservice__smp-container {
		width: 100%;
		position: relative;
		height: auto;
	}
	
	.guide-dataservice__title {
		width: 85%;
		margin: 0 auto;
	}
	
	.guide-dataservice__main-title .renewal {
		width: 30%;
		margin-bottom: 8px;
	}

	.guide-dataservice__main-title .title {
		width: 100%;
		margin-bottom: 8px;
	}

	.guide-dataservice__main-title .sub-txt {
		width: 70%;
	}
	
	.guide-dataservice__expl {
		text-align: center;
		font-size: 13px;
		margin-top: 20px;
	}
	
	.guide-dataservice__title-container {
		width: 100%;
		margin-right: 0;
	}
	
	.guide-dataservice__smp {
		display: none;
	}
	
	.guide-dataservice__smp.sp {
		display: block;
		position: static;
		transform: translateX(0);
		width: 80%;
		margin: 0 auto;
		margin-top: 25px;
	}
	
	.guide-dataservice__btn {
		position: relative;
		width: 300px;
		margin: 40px auto 0;
	}
	
	.guide-dataservice__btn img {
		position: absolute;
		top: -35%;
		left: -7%;
		width: 65px;
	}
}




.gd__flow-list {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	counter-reset: number 0;
}

.gd__flow-item {
	width: calc((100% / 4) - 1%);
	border: 3px solid #ededed;
	border-radius: 10px;
	padding: 10px;
	position: relative;
}

.gd__flow-item::before {
	counter-increment: number 1;
	content: counter(number) "";
	display: block;
	background: #108CCF;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	text-align: center;
	line-height: 45px;
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
}

.gd__flow-title {
	color: #108CCF;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	margin-top: 18px;
}

.gd__flow-txt {
	font-size: 14px;
	text-align: center;
	margin-top: 7px;
}

.gd__flow-img {
	width: 100%;
	margin-top: 20px;
}


@media screen and (max-width: 940px) {
	.gd__flow-list {
		flex-wrap: wrap;
	}

	.gd__flow-item {
		width: calc((100% / 2) - 1%);
		border: 3px solid #ededed;
		border-radius: 10px;
		padding: 10px;
		position: relative;
	}
	
	.gd__flow-item:nth-child(n+3) {
		margin-top: 50px;
	}
	
	.gd__flow-item::before {
		font-size: 20px;
		width: 45px;
		height: 45px;
		position: absolute;
		top: -8%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.gd__flow-img {
		display: block;
		width: 80%;
		margin: 0 auto;
		margin-top: 20px;
	}
}

@media screen and (max-width: 768px) {
	.gd__flow-item::before {
		top: -9%;
	}
}

@media screen and (max-width: 480px) {
	
	.gd__flow-item {
		width: 100%;
		border: 3px solid #ededed;
		border-radius: 10px;
		padding: 10px;
		position: relative;
	}
	
	.gd__flow-item:nth-child(n+2) {
		margin-top: 40px;
	}
	
	.gd__flow-item:nth-child(n+3) {
		margin-top: 40px;
	}
	
	.gd__flow-item::before {
		top: -8%;
	}
	
	.gd__flow-title {
		font-size: 20px;
		margin-top: 22px;
	}
}




.gd__renewal-item:last-child {
	border-bottom: none;
	padding-top: 30px;
}

.gd__renewal-item {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
/*	border-bottom: 1px solid #dcdcdc;*/
}

.gd__renewal-txt {
    width: 52%;
	margin-top: -30px;
/*	padding-top: 5%;*/
}

.gd__renewal-title {
	font-size: 30px;
	font-weight: bold;
}

.gd__renewal-excl {
	font-size: 18px;
}

.gd__renewal-img {
	width: 30%;
}

.gd__renewal-img img {
	width: 100%;
}



@media screen and (max-width: 980px) {
	
	.gd__renewal-title {
		font-size: 25px;
	}
	
	.gd__renewal-excl {
		font-size: 16px;
	}
}

@media screen and (max-width: 768px) {
	
	.gd__renewal-title {
		font-size: 20px;
		padding-top: 10%;
	}
	
	.gd__renewal-excl {
		font-size: 14px;
	}
	
	.gd__renewal-txt {
		width: 100%;
	}
	
	.gd__renewal-img {
		width: 60%;
		margin-top: 20px;
	}
	
	.gd__renewal-item:last-child {
		flex-wrap: wrap-reverse;
	}
}


.gd-edge{
	background: url(../images/guide_datasystem/edge.png) no-repeat left;
	padding-left: 23px;
	background-size: 20px auto;
	min-height: 26px;
}


@media screen and (max-width: 480px) {
	.gd-edge{
		padding-left: 19px;
		background-size: 17px auto;
		min-height: 17px;
	}
}









/*----------------------------------------
	【お急ぎプラン】缶バッジ
----------------------------------------*/

.title-left-icon {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

.title-left-icon img {
	width: 64px;
}

.oisogi-priceTable__box {
    margin-top: 30px;
}

.oisogi-priceTable__list {
	margin: 0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.oisogi-priceTable__list li {
	margin-right: 0;
	text-align: center;
	background: #fff;
	border: 1px solid #e9e9e9;
    padding: 10px;
    border-radius: 5px;
	width: 23.5%;
}

.oisogi-priceTable__list li img {
	width: 65%;
}

.outofstock {
	background: #EEEEEE;
	padding: 12px 10px 10px;
}


@media screen and (max-width: 1000px) {
	.oisogi-priceTable__box {
		padding: 20px;
	}
}

@media screen and (max-width: 750px) {
	
	.oisogi-priceTable__list {
		justify-content: flex-start;
		gap: 4%;
	}
	
	.oisogi-priceTable__list li {
		width: 48%;
	}
	
	.oisogi-priceTable__list li:nth-child(n+3) {
		margin-right: 0;
		margin-top: 3%;
	}
}


@media screen and (max-width: 480px) {
	
	.title-left-icon img {
		width: 54px;
	}
	
	.title-left-icon span {
		padding-left: 5px;
	}
	
	.oisogi-priceTable__box {
		width: 100%;
		margin-top: 15px;
		padding: 15px;
	}
	
	.oisogi-priceTable__list li:nth-child(n+2) {
		margin-top: 0;
	}
	
	.oisogi-priceTable__list li:nth-child(n+3) {
		margin-top: 3%;
	}
}








/*----------------------------------------
	【お急ぎプラン】受付数オーバー
----------------------------------------*/
.outofstock-caution {
/*
	border: 2px solid red;
	padding: 20px;
*/
}

.outofstock-caution h2 {
	background: #ffeded;
	padding: 10px;
	text-align: center;
	font-weight: bold;
}

.outofstock-caution__inner {
	border: 1px solid red;
	padding: 0 20px;
}

/*
.outofstock-caution__inner a {
	text-decoration: none!important;
}
*/

.acceptable-txt {
	color: #333;
	font-weight: bold;
}



@media screen and (max-width: 750px) {
	.outofstock-mini_red {
		display: block;
	}
}

.outofstock-caution_title {
	margin-top: 25px;
}

.outofstock-caution_list {
	margin-bottom: 25px;
}


/*
.outofstock-estimate_txt {
	text-align: left;
}
*/


/*----------------------------------------
       ペンキ缶バッジガイド
----------------------------------------*/

.penki_sherbetguide .dgCntTbl th{
	width: 40%;
}

.penki_sherbetguide .dgCntImg {
	width: 50%;
	margin-right: 0;
}


@media screen and (max-width: 750px) {
	
	.penki_sherbetguide .dgCntTbl tr {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-wrap: wrap;
	}
	
	.penki_sherbetguide .dgCntTbl th {
		width: 100%;
		border-bottom: none;
		text-align: center;
	}
	
	.penki_sherbetguide .dgCntTbl td {
		width: 100%;
		text-align: center;
	}
	
	.penki_sherbetguide .dgCntImg {
		width: 100%;
	}
	
	.penki_sherbetguide .dgCntImg img {
		max-width: 100%;
	}
}




/*----------------------------------------
       汎用
----------------------------------------*/

.list-column2 {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	gap: 5%;
}

.list-column2 li:nth-child(1) {
	width: 35%;
}

.list-column2 li:nth-child(1) img {
	max-width: 100%;
}

.list-column2 li:nth-child(2) {
	width: 65%;
}


@media screen and (max-width: 750px) {
	.list-column2 {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}
	
	.list-column2 li:nth-child(1),
	.list-column2 li:nth-child(2) {
		width: 100%;
	}
	
	.list-column2 li:nth-child(1) {
		width: 75%;
	}
}