@charset "utf-8";
/*===========================
add
===========================*/

:root {
	--basic-color:#58a91d;
}

/*===========================
title-af-none
===========================*/
.title-af-none{
	text-shadow: none;
}
.title-af-none:after{
	content: none;
}

/*===========================
wf
===========================*/
.wf-t {
	width: fit-content;
	margin: auto;
}

@media screen and (min-width: 769px) {
	ul.wf-t,	ol.wf-t,	.wf-t {
		width: fit-content;
		margin: auto;
	}
}


@media screen and (min-width: 601px) {
	ul.wf-pcONtabletONspOFF {
		width: fit-content !important;
		margin: auto !important;
	}
}


/*===========================
catchsmall
===========================*/
#mainVisual .mainCatch .catchsmall {
	font-size:50% !important;
	line-height:1.4em;
}


/*===========================
tdcolor
===========================*/
.tdcolor{
  background-color: #fdffdd !important;
}


/*===========================
onOff
===========================*/
.pcOFFtabletONspOFF{display: none !important;}
.pcOFFtabletOFFspON{display: none;}

@media screen and (min-width: 769px) {
	.pcOFFtabletONspON{display: none !important;}
}

@media screen and (max-width: 768px) {
	.pcOFFtabletONspOFF{display: block !important;}
	.pcOFFtabletOFFspON{display: none;}
	.pcONtabletOFFspOFF{display: none !important;}
}

@media screen and (max-width: 600px) {
	.pcOFFtabletONspOFF{display: none !important;}
	.pcOFFtabletOFFspON{display: block;}
	.pcONtabletONspOFF{display: none;}
}



/*===========================
box01
===========================*/
.box01{
  margin-top: 60px;
  padding:4vw 2vw;
	background-image:url(../img/content/15.jpg);
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
	background-size:cover;
	background-position:center;
}
@media screen and (max-width: 600px) {
  .box01{
    margin-top: 20px !important;
  }
}


/*===========================
box02
===========================*/

/*detail01------------*/

.box02 .detail01{
	margin-bottom: 10px;
}

.box02 .detail01 .in01{
	background-image: url(../img/content/ai_left.png);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: left center;
}

.box02 .detail01 p {
  position: relative;
  display: inline-block;
  margin: 0.9em 120px;
  padding: 14px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
	font-size: 1.2em;
}

.box02 .detail01 p:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.box02 .detail01 p:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

@media screen and (max-width: 600px) {
	.box02 .detail01 .in01{
		background-size: 80px;
		background-repeat: no-repeat;
		background-position: center top;
		margin-bottom: 20px;
	}

	.box02 .detail01 p {
		position: relative;
		display: inline-block;
		margin: 6em 0 0;
		padding: 14px 20px;
		width: 100%;
		color: #555;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
		font-size: 1em;
	}

	.box02 .detail01 p:before {
		content: "";
		position: absolute;
		top: -12px;
		left: 50%;		
		margin-left: -15px;
		border: 12px solid transparent;
		border-bottom: 12px solid #FFF;
		z-index: 2;
	}

	.box02 .detail01 p:after {
		content: "";
		position: absolute;
		top: -16px;
		left: 50%;		
		margin-left: -17px;
		border: 14px solid transparent;
		border-bottom: 14px solid #555;
		z-index: 1;
	}
}



/*detail02------------*/
.box02 .detail02{
	margin-bottom: 40px;
	padding-bottom: 40px;
	display: inline-block;
	position: relative;
}
.box02 .detail02:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	display: inline-block;
	width: 150px;
	height: 2px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: var(--basic-color);
	border-radius: 2px;
}
.box02 .detail02:last-child{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border: none;
}
.box02 .detail02:last-child:before{
	background: none;
}

@media screen and (min-width: 601px) {
	.box02 .detail02 .in02{
		background-image: url(../img/content/ai_right.png);
		background-size: 100px;
		background-repeat: no-repeat;
		background-position: right center;
	}

	.box02 .detail02 p{
		position: relative;
		display: inline-block;
		margin: 0.9em 120px;
		padding: 14px 20px;
		min-width: 120px;
		max-width: 100%;
		color: #ff4d07;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
		font-size: 1.4em;
	}

	.box02 .detail02 p:before {
		content: "";
		position: absolute;
		top: 50%;
		right: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-left: 12px solid #FFF;
		z-index: 2;
	}

	.box02 .detail02 p:after {
		content: "";
		position: absolute;
		top: 50%;
		right: -30px;
		margin-top: -14px;
		border: 14px solid transparent;
		border-left: 14px solid #555;
		z-index: 1;
	}
}

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

	.box02 .detail02 .in02{
		background-size: 80px;
		background-image: url(../img/content/ai_right.png);
		background-repeat: no-repeat;
		background-position: center top;
	}

	.box02 .detail02 p {
		position: relative;
		display: inline-block;
		margin: 6em 0 0;
		padding: 14px 20px;
		min-width: 120px;
		max-width: 100%;
		color: #ff4d07;
		font-size: 16px;
		background: #FFF;
		border: solid 3px #555;
		box-sizing: border-box;
	}

	.box02 .detail02 p:before {
		content: "";
		position: absolute;
		top: -24px;
		left: 50%;
		margin-left: -15px;
		border: 12px solid transparent;
		border-bottom: 12px solid #FFF;
		z-index: 2;
	}

	.box02 .detail02 p:after {
		content: "";
		position: absolute;
		top: -30px;
		left: 50%;
		margin-left: -17px;
		border: 14px solid transparent;
		border-bottom: 14px solid #555;
		z-index: 1;
	}
}


/*===========================
ullist01
===========================*/
@media screen and (min-width: 769px) {
	.ullist01::after{
		content: "";
		display: block;
		clear: both;
	}

	.ullist01 li{
		float: left;
		margin-right: 30px;
	}

	.ullist01 li:last-child{
		margin-right: 0 !important;
	}
}