@charset "utf-8";

/*-------------------------------------------------------------------
	IDENTIFICATION DIVISION.
	PROGRAM-ID.									ABOUT
	DATE-WRITTEN.								2019-12-23
-------------------------------------------------------------------*/

/*****************************************************
	DATA DIVISION.
	WORKING-STRAGE SECTION.
*****************************************************/

/*-------------------------------------------------------------------
	common
-------------------------------------------------------------------*/ 
#main{
	width:960px;
	background:#FFFFFF;
	position:relative;
	padding:0;
	margin: 0 auto 20px;
	font-family: "Noto Sans JP";
}
#main span.en{
	font-family: "roboto";
}
/*  背景指定  */
#main #whatis,
#main #note{
 	background:#d9efef;
}
#main #flow{
 	background:#f7f8f8;
}
#main #solution{
	background: url(../../../images/cp/designtry/solution_bg.png) 0 100% no-repeat;
}
/*  余白指定  */
#whatis{
 	padding: 110px 125px 0;
}
.contentArea{
 	padding: 75px 0 90px;
}
#note{
	padding-right: 160px;
	padding-left: 160px;
}
#works {
	padding-right: 105px;
	padding-left: 105px;
}
#flow {
	padding-right: 68px;
	padding-left: 68px;
}
#freeInquiry {
	padding-right: 70px;
	padding-left: 70px;
}
/*  共通見出し指定  */
.contentArea h2 {
	font-size: 208%;
	text-align: center;
	color: #fff;
	padding: 15px 55px;
	background: #1bb3b3;
	border-radius: 3px;
	display: inline-block;
	letter-spacing: 0.05em;
	position: relative;
	margin-bottom: 45px;
}
.contentArea h2 em {

	color: #b8e760;
}
.contentArea h2:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
    bottom: -10px;
	border-top: 10px solid #1bb3b3;
}
.contentArea p.subtitle {
	font-size: 125%;
	text-align: center;
}


/*-------------------------------------------------------------------
	#accent
-------------------------------------------------------------------*/
#accent {
	background: url(../../../images/cp/designtry/accent_bg.jpg) 0 0 no-repeat;
	width: 100%;
	height: 421px;
	position: relative;
}
#accent h2 {
	position: absolute;
	bottom: -62px;
	left: 50%;
	transform: translateX(-50%);
}

/*-------------------------------------------------------------------
	#whatis
-------------------------------------------------------------------*/
#whatis h2 {
	font-size: 290%;
	margin-bottom: 50px;
	text-align: center;
}
#whatis h2 span {
	color: #1bb3b3;
	font-size: 74%;
}
#whatis ul {
	overflow: hidden;
}
#whatis ul li {
	width: 218px;
	float: left;
	margin-right: 26px;
}
#whatis ul li:last-child {
	margin-right: 0;
}

/*-------------------------------------------------------------------
	#solution
-------------------------------------------------------------------*/
img{
	display: inline ;
}
#solution {
	padding-bottom: 60px;
}
#solution p {
	text-align: center;
	margin: 0 0 0.8em 0;
}
#solution h2 {
	margin-bottom: 25px;
}
#solution p.txt1 {
	font-size: 266%;
	font-weight: 600;
	line-height: 1.7;
}
#solution p.txt1 span {
	border-bottom: 4px solid #ff4d85;
}
#solution p.txt1 small {
	font-size: 68%;
	font-weight: 500;
	line-height: 1.3;
}
#solution p.txt2 {
	font-size: 325%;
	font-weight: 600;
	color: #ff4d85;
	line-height: 1.7;
}
#solution p.txt2 span {
	border-bottom: 4px dotted #ff4d85;
}

/*-------------------------------------------------------------------
	#note
-------------------------------------------------------------------*/
#note > section {
	background: #fff;
	border: 4px solid #1bb3b3;
	padding: 0 70px 50px;
}
#note > section:first-child {
	margin-bottom: 75px;
}
#note > section h2 {
	margin-top: -25px;
}
#note section#condition p.txt {
	font-size: 250%;
	font-weight: 600;
}
#note section#condition p.txt span.en {
	color: #ff4d85;
	font-size: 170%;
	line-height: 1;
}
#note section#condition p.caution {
	font-size: 125%;
	margin-bottom: 0;
	padding-left:1em;
	text-indent:-1em;
}
#note section#importantPoint dl {
	background: #f7f8f8;
	padding: 30px 30px 30px 90px;
	margin-bottom: 25px;
	position: relative;
}
#note section#importantPoint dl:last-child {
	margin-bottom: 0;
}
#note section#importantPoint dl dt {
	font-size: 150%;
	text-align: left;
	font-weight: 600;
	margin-bottom: 20px;
}
#note section#importantPoint dl dt em {
	color: #ff4d85;
}
#note section#importantPoint dl dt span.en {
	font-size: 194%;
	font-weight: 400;
	font-style: italic;
	color: #1bb3b3;
	position: absolute;
	top: 30px;
	left: 30px;
}
#note section#importantPoint dl dd {
	text-align: left;
}
#note section#importantPoint dl dd ul {
	margin-bottom: 10px;
}
#note section#importantPoint dl dd ul li {
	font-size: 125%;
	font-weight: 600;
	color: #ff4d85;
	text-align: left;
}

/*-------------------------------------------------------------------
	#works
-------------------------------------------------------------------*/
#works h2 {
	margin-bottom: 105px;
}
#works ul.workList dl {
	background: #e0e3e4;
	height: 270px;
	padding: 35px;
	box-sizing: border-box;
	margin-bottom: 105px;
	text-align: left;
	position: relative;
}
#works ul.workList li:last-child dl {
	margin-bottom: 0;
}
#works ul.workList dl dd.instruction {
	position: absolute;
	mix-blend-mode: multiply;
	top: 20px;
	left: 105px;
}
#works ul.workList dl dd.instruction.whiteT {
	top: 70px;
	left: 27px;
}
#works ul.workList dl dd.instruction.yellowT {
	top: 2px;
	left: 122px;
}
#works ul.workList dl dd.instruction.purpleT {
	top: 7px;
	left: 120px;
}
#works ul.workList dl dd.complete {
	position: absolute;
	top: -37px;
	right: 26px;
}
#works ul.workList dl dd.complete:before {
	content: "";
	background: url(../../../images/cp/designtry/works_worklist_arrow.png) 0 0 no-repeat;
	position: absolute;
	width: 73px;
	height: 33px;
	top: 157px;
	left: -50px;

}

/*-------------------------------------------------------------------
	#flow
-------------------------------------------------------------------*/
#flow ul.flowList li {
	width: 170px;
	float: left;
	margin-right: 47px;
}
#flow ul.flowList li:last-child {
	margin-right: 0;
}
#flow ul.flowList li dl {
	position: relative;
}
#flow ul.flowList li dt {
	font-size: 133%;
	font-weight: 600;
	color: #1bb3b3;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #1bb3b3;
	box-sizing: border-box;
	padding: 23px 24px;
	margin: 0 auto 30px;
}
#flow ul.flowList li dt span.en {
	font-size: 118%;
	font-weight: 400;
	color: #a1aab8;
	font-style: italic;
	display: block;
}
#flow ul.flowList li dd.balloon {
	box-sizing: border-box;
	width: 200px;
	background: #fff;
	border: 3px solid #1bb3b3;
	padding: 6px;
	position: absolute;
	bottom: -38px;
	left: -15px;
	border-radius: 5px;
}
#flow ul.flowList li dd.balloon:before {
	content: "";
	background: url(../../../images/cp/designtry/flow_balloon.png) 0 0 no-repeat;
	position: absolute;
	width: 22px;
	height: 21px;
	top: -21px;
	left: 50%;
}

/*-------------------------------------------------------------------
	#freeInquiry
-------------------------------------------------------------------*/
#freeInquiry ul.itemList {
	overflow: hidden;
}
#freeInquiry ul.itemList li {
	width: 18%;
	margin-right: 2.5%;
	float: left;
	margin-bottom: 35px;
}
#freeInquiry ul.itemList li:nth-child(5n) {
	margin-right: 0;
}
#freeInquiry ul.itemList li a {
	color: #393737;
}
#freeInquiry ul.itemList li a:hover {
	text-decoration: none;
}
#freeInquiry ul.itemList li a dt img {
	display: inline-block;
	margin-bottom: 7px;
}
#freeInquiry ul.itemList li a dt {
	margin-bottom: 7px;
}
#freeInquiry ul.itemList li a dd.buttonStyle {
	color: #1bb3b3;
	border: 1px solid #1bb3b3;
	padding: 10px 0;
	text-align: center;
	position: relative;
	border-radius: 25px;
	transition: all 300ms 0s ease;
}
#freeInquiry ul.itemList li a dd.buttonStyle:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 15px;
    border-top: 1px solid #1bb3b3;
    border-right: 1px solid #1bb3b3;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	transition: all 300ms 0s ease;
}
#freeInquiry ul.itemList li a:hover dd.buttonStyle {
	color: #fff;
	background: #1bb3b3;
}
#freeInquiry ul.itemList li a:hover dd.buttonStyle:before {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
.txt-block{
	display: none;
}
p {
    margin: 0 0 0.8em 0;
}
@media screen and (max-width: 640px){
	#main{
		width: 640px;
		font-size: 20px;
	}
	#accent{
		height: 721px;
		padding-top: 7%;
		background: url(../../../images/cp/designtry/accent_bg_sp.jpg) 0 0 no-repeat;
	}
	.contentArea {
		padding: 75px 5% 90px;
		text-align: center;
	}
	#accent h2{
		position: relative;
		bottom: auto;
	}
	#whatis {
		padding: 8% 4% 0;
	}
	#whatis h2{
		font-size: 38px;
	}
	.contentArea h2{
		font-size: 30px;
	}
	#solution p.txt1{
		font-size: 40px;
		margin-bottom: 32px;
	}
	#main #solution {
		background: url(../../../images/cp/designtry/solution_bg_sp.png) 0 100% no-repeat;
	}
	#solution p.txt2{
		font-size: 47px;
	}
	.txt-block{
		display: inline-block;
	}
	#note{
		padding: 75px 5% 90px;
	}
	#note section#condition p.txt span.en{
		font-size: 54px;
	}
	#note section#condition p.txt{
		font-size: 32px;
	}
	#note > section{
		background: #fff;
		border: 4px solid #1bb3b3;
		padding: 0 7% 7%;
	}
	#note section#condition p.caution{
		font-size: 20px;
		text-align: left;
	}
	#note section#importantPoint dl dt span.en{
		font-size: 33.6px;
	}
	#note section#importantPoint dl dt{
		font-size: 24px;
	}
	.txt-none{
		display: none;
	}
	#freeInquiry,
	#flow,
	#works{
		padding: 75px 5% 90px;
	}
	#works ul.workList dl dt {
		position: absolute;
		mix-blend-mode: multiply;
		top: -35px;
		left: 0;
	}
	#works ul.workList dl dd.complete {
		position: absolute;
		top: -44px;
		right: -19px;
		width: 57%;
	}
	#works ul.workList dl dd.instruction {
		position: absolute;
		mix-blend-mode: multiply;
		top: 19px;
		left: 20px;
	}
	#works ul.workList dl dd.instruction.purpleT,
	#works ul.workList dl dd.instruction,
	#works ul.workList dl dd.instruction.yellowT{
		top: 19px;
		left: 20px;
	}
	#flow ul.flowList li dl {
		position: relative;
		display: table;
		width: 100%;
	}
	#flow ul.flowList li{
		width: 100%;
		float: none;
		margin-right: 0;
	}
	#flow ul.flowList li dt {
		font-size: 133%;
		font-weight: 600;
		color: #1bb3b3;
		width: 32%;
		height: 32%;
		border-radius: 50%;
		background: #fff;
		border: 3px solid #1bb3b3;
		box-sizing: border-box;
		padding: 26px 24px;
		margin: 19px auto 0;
		float: left;
	}
	#flow ul.flowList li dd {
		float: right;
	}
	#flow ul.flowList li {
		margin-bottom: 60px;
	}
	#flow ul.flowList li dd.balloon {
		box-sizing: border-box;
		width: 57%;
		background: #fff;
		border: 3px solid #1bb3b3;
		padding: 6px;
		position: absolute;
		top: -20px;
		right: -15px;
		border-radius: 5px;
		bottom: auto;
		left: auto;
	}
	#flow ul.flowList li dd.balloon:before {
		content: "";
		background: url(../../../images/cp/designtry/flow_balloon_sp.png) 0 0 no-repeat;
		position: absolute;
		width: 29px;
		height: 26px;
		bottom: -25px;
		left: 50%;
		top: auto;
	}
	#flow ul.flowList {
		background: url(../../../images/cp/designtry/flow_line.png) 15.5% 43% no-repeat;
	}
	#freeInquiry ul.itemList li {
		width: 31%;
		margin-right: 3.5%;
		margin-bottom: 45px;
	}
	#freeInquiry ul.itemList li:nth-child(3n) {
		margin-right: 0 !important;
	}
	#freeInquiry ul.itemList li a dt img{
		width: 100%;
	}
	#freeInquiry ul.itemList li:nth-child(5n) {
		margin-right: 3.5%;
	}
	#freeInquiry ul.itemList li a dt{
		font-size: 14px;
	}
	#freeInquiry ul.itemList{
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	#solution img{
		width: auto;
	}
	.contentArea p.subtitle{
		margin-bottom: 20px !important;
	}
}