@charset "utf-8";
  section.contents {
	  padding: 2.25em 0 1em;
  }
  
  #CRAFT section.contents.page-lead{
		padding: 4em 0 0;
	}
  
  #CRAFT .contents_title{
	background: url(../image/craft/01/bg.jpg) no-repeat;
	background-size: cover;
	background-position-y: center;
	color: #dd336f; 
  }
  
  .sec-title{
	font-weight: bold;
	margin-bottom: 1.5em;
	padding: 50px 0 0;
  }
	#CRAFT figure{
	  margin: 0;
	  padding: 0;
	}
	
	#CRAFT .container .flex-fp:not(:first-child) {
		margin-top: 2.5em;
	}
	
	.page-lead{
		margin-bottom: 1em;
	}
	
	#CRAFT .column-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	#CRAFT .column-head h2.page-title {
		width: 420px;
		border-bottom: none;
		margin: 0;
		padding: 0;
		text-indent: 0;
	}
	
	#CRAFT h3.page-title.line{
		position: relative;
		color: #15883C;
		font-size: 32px;
		line-height: 1.4;
		padding: 16px 0;
		margin-bottom: 24px; 
	}
	
	#CRAFT h3.page-title.line::before{
		content:"";
		background-image: url(../image/craft/01/line.png);
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		width: 380px;
		height: 7px;
	}
	#CRAFT h3.page-title.line::after{
		content:"";
		background-image: url(../image/craft/01/line.png);
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 380px;
		height: 7px;
	}
	
	#CRAFT .page-web-icon{
		width: 142px
	}
	
	#CRAFT .craft-title-s{
		font-size: 16px;
		line-height: 1;
		border-left: 2px solid #15883C;
		padding-left: 8px;
		margin-bottom: 16px;
	}
	
	#CRAFT h4.cont-title{
		color: #15883C;
		font-size: 1.5em;
		line-height: 1;
		font-weight: 600;
		margin-bottom: 32px;
	}
	
	#CRAFT .txt ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0 32px;
	}
	
	#CRAFT .txt span.txt-small{
		font-size: 14px;
	}
	
	#CRAFT .flex-title{
		display: flex;
		align-items: center;
		gap: 16px;
		color: #15883C;
		font-size: 24px;
		line-height: 1;
		font-weight: 600;
		margin-bottom: 20px;
	}
	
	#CRAFT .flex-title .icon{
		width: 50px;
	}
	
	#CRAFT .point{
		background: #F7F7F0;
		padding: 40px 20px 24px;
		position: relative;
		margin-top: 20px;		
	}
	
	#CRAFT .point-flex{
		display: flex;
		align-items: center;
		gap: 48px
	}
	
	#CRAFT .point-txt{
		width: 658px;
	}
	
	#CRAFT .point-txt p:last-child{
		margin-top: 16px;
	}
	
	#CRAFT .point-img{
		width: 190px;
	}
		
	#CRAFT .point::before{
		content: "";
		background: url(../image/craft/01/point.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		width: 104px;
		height: 28px;
	}
	
	#CRAFT p.flex{
		display: flex;
		align-items: center;
		gap: 32px;
	}
	
	#CRAFT p.flex img{
		width: 226px;
	}
	
	
	@media screen and (min-width: 481px) {
		.flex-fp .txt, .flex-fp figure{
			max-width: calc(50% - 1.25em);
	  	}
	  
	    .flex-fp {
		  justify-content: flex-start;
		  gap: 2.5em;
	    }
		
		.explanation{
		  max-width: calc(50% - 1.25em);
		}
	}
	
	@media (max-width: 480px) {
		.container .flex-fp:not(:first-child).margin-none{
		margin-top: 0
	  }
	  
	  section.contents.profile .names p{
		  min-width: 18em;
		  transform: translateX(-50%);
		  margin-left: 50%;
		  text-align: left;
	  }
	  
	  section.contents .flex-box {
		  gap: 20px;
	  }
	  
	  
	  #CRAFT .contents_title {
		 padding: 40px 20px;
	  }
	  
	  #CRAFT .contents_title .container{
		  margin: 0;
	  }
	  
	  #CRAFT .column-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column-reverse;
		gap: 12px;
	}
	
	#CRAFT .column-head h2.page-title {
		width: 224px;
	}
	
	#CRAFT h3.page-title.line {
		font-size: 2em;
	}
	
	#CRAFT h3.page-title.line::before{
		content: "";
		width: 100%;
	}
	
	#CRAFT h3.page-title.line::after{
		content: "";
		width: 100%;
	}
	
	#CRAFT h4.cont-title {
		margin-bottom: 14px;
	}
	
	#CRAFT .page-web-icon {
		width: 180px;
	}
	
	#CRAFT .point-flex {
		gap: 14px;
		flex-direction: column;
	}
	
	#CRAFT .point-txt {
		width: 100%;
	}
	 
	 #CRAFT .point-img {
		 width: 100px;
	 }
	 
	 #CRAFT p.flex {
		 gap: 14px;
		 flex-direction: column;
	 }
	 
	 #CRAFT .txt ul {
		 gap: 0 26px;
	 }
	 
	 #CRAFT .flex-title .icon {
		 width: 40px;
	 }
	 #CRAFT .flex-title {
		gap: 12px;
		font-size: 1.4em;
	}
	
	#CRAFT section.contents .flex-box {
		flex-direction: column;
	}
	 h3.comp-title {
		max-width: 40%;
	}
	
	#CRAFT .point {
		padding: 36px 16px 16px;
	}
	#CRAFT .point::before {
		content: "";
		width: 92px;
	}
	  
	}