@charset "utf-8";
/*--------- sp ---------*/
.main_title{
	padding-top: 70px;
	height: 240px;
	background-color: #F1F8F9;
	position: relative;
}
.title_inner{
  width: min(90%,1016px);
  margin: clamp(30px,5vw,60px) auto 0;
  padding-left: 18px;
  background-image: url(../images/common/png_20.png);
  background-repeat: repeat-y;
  background-position: left top;
  position: relative;
  z-index: 1;
}
.title_inner h1{
	font-size: clamp(2.4rem,3.5vw,4.5rem);
	font-weight: 700;
	line-height: 1.3;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 3px #fff;
}
.title_inner p{
	font-size: clamp(1.5rem,1.6vw,1.8rem);
	font-weight: 300;
  padding-top: 8px;
}
.title_layer{
	position: absolute;
	top: 100px;
	right: -5px;
	width: min(50%,500px);
}
/*---- 説明 sp ----*/
.web_wrap{
	width: min(90%,1000px);
	margin: 0 auto;
	padding-top: clamp(30px,4vw,60px);
	padding-bottom: clamp(40px,5vw,80px);
}

.web_tx{
	padding-top: 10px;
  position: relative;
  z-index: 1;
}
.introduction{
	width: min(90%,1000px);
	margin: 0 auto;
	padding-top: clamp(30px,4vw,60px);
	padding-bottom: clamp(40px,5vw,80px);
}

.introduction_tx{
	padding-top: 10px;
}
.introduction_100{
	padding-top: 10px;
}
.caption_01{
	font-size: clamp(1.8rem,2.2vw,2.7rem);
	font-weight: 700;
}
/*段落*/
.para_01{
	padding-top: clamp(20px,2.5vw,40px);
	line-height: 1.9;
}
/*段落 spでleft、tabpcでcenter*/
.para_02{
	width: min(90%,768px);
	margin: 0 auto;
	padding-top: clamp(20px,2.5vw,40px);
	padding-bottom: clamp(50px,7vw,100px);
	font-size: clamp(1.5rem,1.6vw,1.8rem);
	line-height: 1.9;
}
.introduction_btn{
	padding-top: clamp(25px,3vw,50px);
	display: flex;
	flex-wrap: wrap;
}
.introduction_btn li{
	margin-right: 10px
}
.introduction_btn li:first-child{
	width: 17em;
}
.introduction_btn li:nth-child(2){
	width: 10em;
}
.introduction_btn li:nth-child(3){
	width: 17em;
}
.introduction_btn li:nth-child(4){
	width: 15em;
}
.introduction_btn li:nth-child(5){
	width: 17em;
}
.introduction_btn .contents_btn{
	margin-top: 8px;
}
/* ウェブサイトについて */
.icon_web{
	position: relative;	
}
.icon_web:before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 15px;
	height: 15px;
	background-image: url("../images/system/web.png");
	background-size: 15px;
	top: calc((100% - 15px) / 2);
	left: calc(50% - 7.1em);
	background-repeat: no-repeat;
	background-position: left center;
}
/* 導入実績 */
.icon_aboutsystem{
	position: relative;	
}
.icon_aboutsystem:before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 18px;
	height: 15px;
	background-image: url("../images/system/system.png");
	background-size: 18px;
	top: calc((100% - 15px) / 2);
	left: calc(50% - 3.5em);
	background-repeat: no-repeat;
	background-position: left center;
}
/* サブスク型プランについて */
.icon_ses{
	position: relative;	
}
.icon_ses:before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 21px;
	height: 15px;
	background-image: url("../images/system/ses.png");
	background-size: 21px;
	top: calc((100% - 15px) / 2);
	left: calc(50% - 7.3em);
	background-repeat: no-repeat;
	background-position: left center;
}
/* 料金プラン */
.icon_price{
	position: relative;	
}
.icon_price:before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 21px;
	height: 21px;
	background-image: url("../images/web/png_01.png");
	background-size: 21px auto;
	top: calc((100% - 21px) / 2);
	left: calc(50% - 6.3em);
	background-repeat: no-repeat;
	background-position: left center;
}
/* サブスク型テンプレート */
.icon_temp{
	position: relative;	
}
.icon_temp:before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 18px;
	height: 15px;
	background-image: url("../images/system/system.png");
	background-size: 18px;
	top: calc((100% - 15px) / 2);
	left: calc(50% - 7em);
	background-repeat: no-repeat;
	background-position: left center;
}
/*---- スペックのシステム開発 sp ----*/
.belong_title{
	background-image: url(../images/web/img_10.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
	padding: clamp(28px,4.5vw,60px) 0;
}
.belong_img{
	width: clamp(25px,3vw,36px);
	margin: 0 auto;
	line-height: 0;
}
h3{
    font-size: clamp(1.8rem,2vw,2.5rem);
	font-weight: 300;	
	text-align: center;
	padding-top: 12px;
}
.belong_title h3{
	position: relative;
	color: #fff;	
}
.belong_title h3:after{
	position: absolute;
	content: '';
	display: inline-block;
	width: 60px;
	bottom: -14px;
	right:  calc((100% - 60px) / 2);
	border-bottom: solid 1px #fff;
}
.belong_title p{
    font-size: clamp(1.5rem,1.7vw,2.0rem);
	font-weight: 300;
	color: #fff;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	padding-top: clamp(40px,5vw,60px);
}
.example{
	width: min(100%,400px);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: clamp(20px,4vw,50px);
}
.example li{
	border: 1px solid #fff;
	padding: 2px 0;
	width: 130px;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	margin: 3px;
	font-weight: 300;
}
/*---- 流れ sp ----*/
.flow_img{
	width: clamp(30px,3.5vw,41px);
	margin: 0 auto;
	line-height: 0;
}
/*---- 料金プラン sp ----*/
/* スクロール可能にするラッパー */
.table-wrap {
  width: 95%;
  overflow-x: auto;
  -ms-overflow-style: none;  /* IE・Edge */
  scrollbar-width: none;     /* Firefox */
  position: relative;
  margin: clamp(30px,5vw,60px) 0 clamp(70px,12vw,150px) 5%;
}
.table-wrap::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}
table.subscription{
  min-width: 700px;
  border: 1px solid #B0C4DE;
	border-collapse: separate;
  border-spacing: 0;
  line-height: 1.4;
  
  th {
    padding: 5px;
    border: 1px solid #fff;
	  background-color: #B0C4DE;
    text-align: center;
  }
  /* 左列（プラン）を固定 */
  th[scope="row"]{
    position: sticky;
    left: 0;
    z-index: 2;
  }
  /* ヘッダーの左列も固定 */
  th[scope="col"]:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  td {
      padding: 5px;
      border: 1px solid #B0C4DE;
  }
}

/*---- サブスク sp ----*/
/*サブスクタイトル*/
.caption_02{
	width: min(90%,1016px);
	padding: 2em 0 0 18px;
    background-image: url(../images/common/png_20.png);
	background-size: 4px auto;
    background-repeat: repeat-y;
    background-position: left top;
	position: relative;
	z-index: 1;
	transition: .5s;
}
.caption_02 h4{
	font-size: clamp(1.7rem,2.2vw,2.7rem);
	font-weight: 700;
	line-height: 1.5;
}
.caption_02 span{
	font-size: clamp(1.1rem,1.2vw,1.4rem);
	color: #1C4592;
	line-height: 1.0;
}
.job{
	width: min(90%,1100px);
	margin: 0 auto;
	padding: clamp(30px,4vw,60px) 0;
}
.job_img{
	width: min(60%,250px);
	position: relative;
	transition: .5s;
	box-shadow: 15px 15px 0px #B0C4DE;
	line-height: 0;
	margin-top: 10px;
	margin-left: auto;
}
.job2{
	width: min(90%,1100px);
	margin: 0 auto;
	padding: clamp(30px,4vw,60px) 0;
}

.job2_img{
	width: min(60%,250px);
	position: relative;
	transition: .5s;
	box-shadow: -15px 15px 0px #B0C4DE;
	line-height: 0;
	margin-top: 10px;
}
/*---- お問い合わせボタン sp ----*/
.contents_contact_btn{
	width: min(90%,450px);
	background-color: #1C4592;
	text-align: center;
	margin: 20px auto clamp(80px,12vw,150px);
	border-radius: 10px;
}
.contents_contact_btn a{
	color: #fff;
	display: block;
	padding: 27px 0 33px 20px;
	position: relative;
}
.contents_contact_btn a:before, .contents_contact_btn a:after{
	display: inline-block;
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
}
.contents_contact_btn a:before{
	background-image: url("../images/common/png_18.png");
	width: 22px;
	height: 13px;
	background-size: 22px;
	bottom: 10px;
	left: calc((100% - 22px) / 2);
}
.contents_contact_btn a:after{
	background-image: url("../images/system/png_04.png");
	width: 18px;
	height: 16px;
	background-size: 18px;
	bottom: 35px;
	left: calc(50% - 7.8em);
}
/*---- WEB制作の紹介 sp ----*/
.belong_web_img{
	width: clamp(20px,2.8vw,30px);
	margin: 0 auto;
	line-height: 0;
}

/*---- web制作実績 sp ----*/
.webgrid_wrap{
	width: min(90%,1490px);
	margin: 0 auto;
	padding-top: clamp(28px,4vw,50px);
	padding-bottom: clamp(65px,10vw,120px);
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-gap: 12px;

  .webg_item{
    border: 1px solid #cccccc;
  }
  .webg_text{
    padding: 8px 14px;
  }
  .webg_text p{
    padding-left: 7px;
    color: #666;
    font-size: clamp(1.1rem,1.2vw,1.4rem);
  }
  figure {
      width: 100%;
    aspect-ratio: 360 / 230;
      position: relative;
      overflow: hidden;
      background: #000;
    outline: 1px solid rgba(255, 255, 255,.5);
      outline-offset: -7px;
    transition: all .1s ease-out;
    margin: 0;
  }
  .webg_img figure img {
      transition: all .5s ease-out;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  figure:hover {
    outline: 2px solid rgb(255, 255, 255);
      outline-offset: -8px;
    transition: all .1s ease-out;
  }
  figure:hover img {
      opacity: .3;
      transform: scale(1.3);
  }
  .webg_img figcaption {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1em;
    letter-spacing: 5px;
    opacity: 0;
    transition: all .2s ease-out .2s;
    text-align: center;
    font-size: clamp(1.2rem,1.6vw,1.8rem);
    font-weight: 400;
  }
  .webg_img figure:hover figcaption {
      letter-spacing: 1px;
      opacity: 1;
  }
  .webg_img a {
    color: #fff;
  }
}
/*---- こんな方におすすめ sp ----*/
.recommendation{
  margin: clamp(50px,5vw,60px) auto clamp(60px,10vw,120px);
  width: min(90%,1100px);
}
.recommend-wrap{
  margin: clamp(30px,5vw,60px) auto 0;
  display:grid;
  gap:15px;
  grid-template-columns:repeat(1,1fr);
}

.rec-card{
  position:relative;
  padding:15px 30px 60px;
  border-radius:var(--radius);color:white;overflow:hidden;
  box-shadow:var(--shadow);
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
  transition:transform .35s ease;
}

/* 強い背景グラデーション */
.rec-1{background:linear-gradient(135deg,#2563eb,#3b82f6);}/* 青 */
.rec-2{background:linear-gradient(135deg,#0ea5e9,#38bdf8);}/* 水 */
.rec-3{background:linear-gradient(135deg,#10b981,#34d399);}/* 緑 */

/* 大きな数字背景（インパクト） */
.big-num{
  position:absolute;
  right:-15px;bottom:-15px;
  font-size:150px;
  font-weight:800;
  color:rgba(255,255,255,0.3);
  line-height:1;
  z-index:-1;
  pointer-events:none;
}
.rec-title{
  font-size: clamp(2.0rem,2vw,2.4rem);
  font-weight:700;
  margin-bottom:12px;
  line-height:1.5;
}
.rec-desc{
  opacity:0.95;
  line-height:1.7;
}
/*---- テンプレートリスト sp ----*/
.webtemp_wrap{
	width: min(90%,1100px);
	margin: 0 auto;
	padding-top: clamp(28px,4vw,50px);
	padding-bottom: clamp(65px,10vw,120px);
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-gap: 12px;

  .webg_item{
    border: 1px solid #cccccc;
  }
  .webg_text{
    padding: 8px 14px;
  }
  .webg_text p{
    padding-left: 7px;
    color: #666;
    font-size: clamp(1.1rem,1.2vw,1.4rem);
  }
  figure {
      width: 100%;
    aspect-ratio: 360 / 230;
      position: relative;
      overflow: hidden;
      background: #000;
    outline: 1px solid rgba(255, 255, 255,.5);
      outline-offset: -7px;
    transition: all .1s ease-out;
    margin: 0;
  }
  .webg_img figure img {
      transition: all .5s ease-out;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  figure:hover {
    outline: 2px solid rgb(255, 255, 255);
      outline-offset: -8px;
    transition: all .1s ease-out;
  }
  figure:hover img {
      opacity: .3;
      transform: scale(1.3);
  }
  .webg_img figcaption {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1em;
    letter-spacing: 5px;
    opacity: 0;
    transition: all .2s ease-out .2s;
    text-align: center;
    font-size: clamp(1.2rem,1.6vw,1.8rem);
    font-weight: 400;
  }
  .webg_img figure:hover figcaption {
      letter-spacing: 1px;
      opacity: 1;
  }
  .webg_img a {
    color: #fff;
  }
}
@media (min-width:480px){
	.webg_item{
		display: flex;
		flex-wrap: wrap;
	}
	.webg_img{
		width: min(40%,360px);
	}
}
@media (min-width:768px){
/*--------- tab ---------*/	
	.main_title{
		height: 410px;
	}
	.title_layer{
		top: 150px;
		right: 80px;
		width: min(63%,580px);
	}
	.title_inner{
		margin: 134px auto 0;
	}
	.para_02{
		text-align: center;
	}
  /*---- 説明 tab ----*/
	.introduction{
		display: flex;
		justify-content: space-between;
    align-items: flex-start;
	}
	.introduction_tx{
		padding-top: 0px;
		width: 50%;
	}
  .introduction_100{
		padding-top: 0px;
		width: 100%;
	}

	/*---- スペックのシステム開発 tab ----*/
	.example{
		width: min(100%,1000px);
	}
	.example li{
		width: 125px;
		margin: 0 5px;
	}
  /*---- こんな方におすすめ tab ----*/
  .recommend-wrap{
    gap:15px;
    grid-template-columns:repeat(3,1fr);
  }
  .rec-card{
    padding:25px 20px 80px;
    justify-content: flex-start;
  }
  /*---- 料金プラン tab ----*/
  /* スクロール可能にするラッパー */
  .table-wrap {
    width: min(95%,1100px);
    margin: clamp(30px,5vw,60px) auto clamp(70px,12vw,150px);
  }
  table.subscription{
    width: 100%;
    
    td {
        padding: 5px 0 5px 15px;
    }
  }
  
	/*---- 開発実績 tab ----*/
	.grid_wrap{
		width: min(94%,1100px);
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-gap: 10px;
	}
	.g_item{
		padding: 10px 18px 15px;
	}
	.h4_title{
		padding-left: 10px;
		font-size: 1.6rem;
	}
	.h4_title:before{
		top: 6px;
		left: 0px;
	}
	.g_item p{
		padding: 8px 0 0;
	}
	.g_item p span{
		margin-right: 8px;
	}
	/*---- お問い合わせボタン tab ----*/	
	.contents_contact_btn a{
		padding: 30px 0 0 37px;
		font-size: 1.8rem;
		height: 100px;
	}
	.contents_contact_btn a:before{
		bottom: 16px;
	}
	.contents_contact_btn a:after{
		background-image: url("../images/system/png_04.png");
		width: 30px;
		height: 24px;
		background-size: 30px;
		bottom: 42px;
		left: calc(50% - 7.7em);
	}

	/*---- web制作実績 tab ----*/
	.webgrid_wrap{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
    grid-gap: 16px;
	
    .webg_img{
      width: min(100%,360px);
    }
  }
  /*---- サブスク tab ----*/
	.job{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.job_img{
		width: min(38%,350px);
	}
	.job_tx{
		width: 58%;
	}
	.job2{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.job2_img{
		width: min(38%,350px);
	}
	.job2_tx{
		width: 58%;
		order: 2;
	}
  
  /*---- テンプレートリスト tab ----*/
	.webtemp_wrap{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
    grid-gap: 16px;
	
    .webg_img{
      width: min(100%,360px);
    }
  }
}
@media (min-width:830px){
/*---- web制作実績 830 ----*/
	.webgrid_wrap{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, auto);
    grid-gap: 20px;
	
    .webg_img{
      width: min(100%,360px);
    }
  }
  /*---- テンプレートリスト 830 ----*/
	.webtemp_wrap{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, auto);
    grid-gap: 20px;
	
    .webg_img{
      width: min(100%,360px);
    }
  }
}
@media (min-width:1024px){
/*--------- pc ---------*/
	.main_title{
		padding-top: 80px;
	}

	/*---- 説明 pc ----*/
  .web_wrap{
		display: flex;
		justify-content: space-between;
    align-items: flex-start;
	}

	.web_tx{
		padding-top: 0px;
		width: 40%;
	}

  .introduction_btn{
    width: 58%;
    padding-top: 61px;
  }
	/*---- スペックのシステム開発 pc ----*/
	.example li{
		width: 170px;
		margin: 0 8px;
	}
	/*---- 流れ pc ----*/
	.flow_time > li dl dd {
		margin-left: 200px;
		margin-top: -60px;
		margin-bottom: 60px;
		padding: 30px 40px 30px 100px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 70px 100%);
	}



 	/*---- サブスク pc ----*/
	.job_img{
		width: min(36%,400px);
		margin-top: 0;
		box-shadow: 20px 20px 0px #B0C4DE;
	}
	.job_tx{
		width: 50%;
		margin-left: 0;
	}
	.job2{
		justify-content: flex-start;
	}
	.job2_img{
		width: min(36%,400px);
		margin-top: 0;
		box-shadow: -20px 20px 0px #B0C4DE;
	}
	.job2_tx{
		width: 50%;
		margin-left: 100px;
	}
}

@media (min-width:1090px){
	/*---- 開発実績 pc ----*/
	.grid_wrap{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, auto);
	}
}
@media (min-width:1280px){
	/*---- スペックのシステム開発 1280 ----*/
	.belong_title{
		height: 380px;
	}

	/*---- 開発実績 1280 ----*/
	.g_item{
		padding: 15px 15px 22px 24px;
	}
	.h4_title{
		padding-left: 12px;
		font-size: 1.8rem;
	}
	.h4_title:before{
		top: 8px;
	}
	.g_item p{
		padding: 10px 0 0;
		font-size: 1.4rem
	}
  /*---- 説明 1280 ----*/
  .web_tx{
		width: 40%;
	}
  .introduction_btn{
    width: 56%;
    padding-top: 77px;
  }
  
	.introduction_tx{
		width: 55%;
	}


  
  /*---- こんな方におすすめ 1280 ----*/
  .recommend-wrap{
    gap:30px;
  }
  .rec-card{
    padding:40px 25px 90px;
  }
  
  /*---- web制作実績 1280 ----*/
	.webgrid_wrap{
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, auto);
    grid-gap: 20px;
	
    .webg_img{
      width: min(100%,360px);
    }
  }

}
@media (min-width:1440px){	
	
	
}