@charset "UTF-8";
/* CSS Document */
p{
	font-size: 16px;
	line-height: 28px;
	text-align: left justify;
}
a:hover, a:focus{
	color: #4F4F4F;		
}
.wrap1200{
	margin: 0 auto;
	max-width: 1200px;
    width: 95%;		
}
/*共通CSS*/
.whiteBG{
	background: #FFF;
	padding: 3em;
	margin: 0 auto;
	margin-top: 4em;
}
.section1 h3,
.section2 h3,
.section3 h3,
.section4 h3,
.section5 h3,
.section6 h3,
.section7 h3,
.section8 h3,
.section9 h3{
	color: #555e63;
	font-size: 34px;
	text-align: center;
}
@media screen and (max-width:768px){
	.section1 h3,
	.section2 h3,
	.section3 h3,
	.section4 h3,
	.section5 h3,
	.section6 h3,
	.section7 h3,
	.section8 h3,
	.section9 h3{	
		font-size: 26px;
		line-height: 36px;		
		text-align: center;
		margin-top: 0;
	}
}

/*top image*/
.topImage{
/*	background: #555e63;*/
	background-image: url("../img/tenjikai3-top.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding: 2em;
	height: 300px;
	width: auto;
}
.topText{
	color: #ffffff;
	display: inline-block;
	text-align: center;
	width: 50%;
}
.topText h1{
	font-weight: 600;
	margin-bottom: 1em;
}
.topText h2{
	font-size: 17px;
	line-height: 30px;
	text-align: justify;
	margin-bottom: 2em;
}
.topText a{
	background: #629cca;
	box-shadow: 0.5px 0.5px 10px 0.5px rgba(0,0,0,.1);  
	border-radius: 8px;			
	color: #ffffff;
	font-size: 25px;
	padding: .5em 6em;
}
.topText a:hover{
	background: #477aa3;
	color: #fff;	
}
.topImage img{
	display: inline-block;
	float: right;
	width: 600px;
}

@media screen and (max-width:1381px){
	.topText h1{
		margin-bottom: .5em;
	}
	.topText h2{
		font-size: 16px;
	}
	.topText a{
		font-size: 20px;
		padding: .5em 4em;
	}
	.topImage img{
		width: 500px;
	}	
}
@media screen and (max-width:1131px){
	.topText h1{
		font-size: 25px;
	}	
	.topText h2{
		line-height: 22px;
	}
	.topImage img{
		margin-top: 2em;		
		width: 400px;
	}	
}
@media screen and (max-width:945px){
	.topImage{
		position: relative;
		margin-top: 4em;		
	}
	.topText h1{
		padding-top: 1em;
	}		
	.topImage img{
		width: 380px;
	}	
}
@media screen and (max-width:871px){
	.topImage{
		height: 400px;
	}
	.topText{
		display: block;
		margin: 0 auto;
		width: 90%;
	}		
	.topText h1{
		padding-top: 0;
	}
	.topImage img{
		display: block;
		float: none;
		margin: 0 auto;
		margin-top: 2em;
		width: 380px;
	}	
}
@media screen and (max-width:470px){
	.topText h1{
		font-size: 22px;
		line-height: 30px;
	}
	.topText a{
		font-size: 20px;
		padding: .5em 2em;
	}	
	.topImage img{
		margin-top: 2em;
		width: 300px;
	}	
}

/*メインbody CSS*/
.mainbody{
	background: #f4f6f9;
	display: block;
	padding: 3em 0em 2em;
	text-align: center;
	width: 100%;
}

/*目次*/
.accordion {
	background: #ffffff;	
	border: none;	
	border-left:3px solid #ff7841;	
    cursor: pointer;
    padding: 18px;
    text-align: justify;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	margin: 0 auto;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);	
	width: 100%;	
}
.accordion:hover {
    border-left: 3px solid #31c9a8;
	color: #333333;	
}
.panel {
	color: #333;	
	padding:1em 2em;
/*	display: none;*/
    text-align: justify;	
	overflow: hidden;
}
.panel li{
	line-height: 2em;
}
.panel li a:hover,.panel li a:focus,.panel li a:active {
	color: #333!important;
}
@media screen and (max-width:760px){
	.panel li{
		font-size: 15px;
	}
}
@media screen and (max-width:390px){
	.accordion{
		margin-top: 3em;
	}
	.panel li{
		font-size: 15px;
	}
}

/*section1 & section2*/
.section1, .section2{
	background: #fff;
	box-shadow: 0.5px 0.5px 10px 0.5px rgba(0,0,0,.1);
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 3em;
	margin-top: 4em;
	margin-bottom: 2em;
}
.section1 > span, .section2 > span{
	background: #ffffff;
	color: #31c9a8;
	display: block;
	padding: 0px 30px;
	position: absolute;
	font-size: 70px;
	margin-top: -1em;
	margin-left: .5em;
}
.section2 > span{
	color: #ea9392;
}
.section1 > p, .section2 > p{
    text-align: justify;		
	margin: 2em 0em;
}
.section1Box{
	border: 3px solid #31c9a8;
	display: inline-block;
	min-height: 270px;
	padding: 1em 2em;
	margin-right: 1%;
	margin-left: 1%;	
    text-align: justify;		
	width: 47%;
	vertical-align: text-top;
}
.section2Box{
	border: 3px solid #ea9392;	
	display: inline-block;
	min-height: 260px;
	padding: 1em 2em;
	margin-right: 1%;
	margin-left: 1%;	
    text-align: justify;		
	width: 30%;
	vertical-align: text-top;	
}
.section1Box > span, .section2Box > span{
	font-size: 40px;
	background: #ffffff;
	color: #31c9a8;
	position: absolute;
	margin-top: -1em;
}
.section2Box > span{
	color: #ea9392;
}
.section1Box h4, .section2Box h4{
	padding: 1em 0em;
	border-bottom: 1px solid #31c9a8;	
	font-weight: 600;	
	font-size: 22px;
}
.section2Box h4{
	border-bottom: 1px solid #ea9392;	
}
.section1 h5, .section2 h5{
	font-size: 30px;
	line-height: 45px;
	font-style: italic;
	text-align: center;
	padding: 1em 0em;
}
.section2 > a{
	background: #629cca;
    box-shadow: 0.5px 0.5px 10px 0.5px rgb(0 0 0 / 10%); 
	border-radius: 8px;		
	color: #ffffff;
	display: block;
    font-size: 25px;
    padding: 1em 6em;
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
.section2 > a:hover{
	background: #477aa3;
	color: #fff;		
}
a.smlBtnContact{
	display: none;
}
@media screen and (max-width:986px){
	.section1, .section2{
		padding-top: 5em;
	}
	.section2Box{
		min-height: 280px;
	}
	.section1 > span, .section2 > span{
		font-size: 60px;
		margin-top: -1.5em;
	}
}

@media screen and (max-width:768px){
	.section1 h5, .section2 h5{
		font-size: 22px;
		line-height: inherit;
	}	
	.section1Box{
		min-height: 360px;
	}
	.section2 > a{
		padding: 1em 2em;
		font-size: 20px;
	}	
}
@media screen and (max-width:626px){
	.section1 > span, .section2 > span{
		font-size: 40px;
		margin-left: 0em;
		margin-top: -2em;
	}	
	.section1Box, .section2Box{
		width: 100%;
		min-height: auto;
		margin-bottom: 1.5em;
	}
	.section1Box > span, .section2Box > span{
		font-size: 30px;
	}
	.section1 h5, .section2 h5{
		font-size: 18px;
	}
	a.lgBtnContact{
		display: none;
	}
	a.smlBtnContact{
		display: block;
		padding: 1em;
	}
}

/*section3*/
.section3 h3{
	margin-top: 2em;
}
.appealBox{
	display: inline-block;
	text-align: center;
	margin-top: 2em;
	width: 32%;
	vertical-align: text-top;
}
.appealBox h4{
	font-weight: 600;	
	font-size: 22px;
    line-height: 30px;	
}
.appealBox p{
	background: #ffffff;
	border: 3px solid #fdd77e;   
	border-radius: 100px;		
	font-size: 40px;
	line-height: 30px;
	padding: 1.1em 0em;
	margin: 0 auto;	
	height: 160px;
	width: 160px;
	vertical-align: middle;
}
.appealBox p.singleLine{
	padding-top: 1.5em;
}

.appealBox p span{
	font-size: 25px;
}

@media screen and (max-width:554px){
	.section3 h3{
		padding: 0em 1em;
	}	
	.appealBox p {
		font-size: 30px;
		padding: 1em 0em;
		height: 120px;
		width: 120px;
	}	
	.appealBox p span {
		font-size: 20px;
	}	
	p.singleLine {
		padding-top: 1.4em;
	}	
}

@media screen and (max-width:424px){
	.appealBox {
		width: 49%;
	}
}


/*section4*/
.section4{
	background: #fff;
	box-shadow: 0.5px 0.5px 10px 0.5px rgba(0,0,0,.1);
	display: block;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 3em;
	padding-bottom: 5em;
	margin-top: 4em;
	margin-bottom: 2em;
}
.strengthBox{
	display: inline-block;
	text-align: center;
	margin: 0 auto;		
	width: 33%;
	margin-top: 2em;
	margin-right: 2%;
	margin-left: 2%;	
	max-width: 300px;
	vertical-align: text-top;
}
.strengthBox h5{
	border: 3px solid #31c9a8;    
	border-radius: 100px;		
	font-size: 34px;
	padding: 16px;	
}
.strengthBox h4{
	margin: 1em 0em;
	font-weight: 600;	
	font-size: 22px;
    line-height: 30px;	
}
.strengthBox h4 span{
	color: #31c9a8;
}
.strengthBox p{
	text-align: justify;
}

@media screen and (max-width:1189px){
	.strengthBox {
		max-width: 280px;
		width: 28%
	}
}
@media screen and (max-width:626px){
	.strengthBox {
		display: block;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%
	}	
	.strengthBox h5 {
		border: none;
		border-radius: 0px; 
		background: #31c9a8;
		color: white;			
		font-size: 19px;
		padding: 10px;
		text-align: justify;
	}
	.strengthBox h4{
		text-align: justify;
	}
}
	
/*section5*/
.section5{
	margin-bottom: 4em;
}
.featureBox{
	display: inline-block;
	text-align: center;
	margin: 0 auto;		
	width: 28%;
	margin-top: 2em;
	margin-right: 2%;
	margin-left: 2%;	
	max-width: 300px;
	vertical-align: text-top;
}
.featureBox h4{
	margin: 1em 0em;
	font-weight: 600;	
	font-size: 22px;
	line-height: 30px;
}
.featureBox img{
	height: 100px;
	margin-bottom: 2em;
}
.featureBox p{
	text-align: justify;
}
.featureBox a{
	color: #ff7841;
	display: block;
	text-align: justify;
}
.featureBox a:hover,.featureBox a:focus,.featureBox a:active {
	color: #333
}
@media screen and (max-width:626px){
	.featureBox {
		display: block;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%
	}	
	.featureBox h4{
		border-left: 5px solid #ff7942;
		padding-left: 10px;
		text-align: justify;
	}
}

/*section6*/
.section6{
    border-top: 1px solid #e5e5e5;	
	padding: 3em 0em;	
}
.section6 h3{
	margin-bottom: 1em;	
}
.section6 h4{
	font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    padding: 10px 16px;
    background: #fdd77e;
    margin-top: 1em;
    text-align: justify;			
}
.usageBox{
	display: block;
    text-align: center;		
}
.usageBox h5{
	font-size: 22px;
	border-left: 5px solid #fdd77e;
	padding-left: 10px;
    text-align: justify;			
}
.usageBox p{
    text-align: justify;			
	margin-bottom: 1em;
}
.usageBox img{
	display: inline-block;
	width: 49%;
	max-width: 450px;
	vertical-align: middle;
}
.usageBoxText{
	display: inline-block;
	padding: 1em;
	width: 50%;
	vertical-align: middle;	
}
.rightImgSmaller{
	display: none;
}
@media screen and (max-width:768px){
	.rightImg{
		display: none;
	}
	.rightImgSmaller{
		display: block;
	}
	.usageBox img{
		display: block;
		margin: 0 auto;
		max-width: 255px;
		width: 100%;
	}
	.usageBoxText{
		display: block;
		width: 100%;
	}
}



/*section7*/
.section7{
	background: #F6F6F6;
    background-image: url(../img/handipadbc11.png);
    border: 1px solid #ccc;	
    background-size: 48%;
    background-position: right bottom;
    background-repeat: no-repeat;
    margin: 0 auto;
	margin-bottom: 4em;
	padding: 3em;
}
.section7 > p{
	text-align: center;
	margin: 2em 0em;
}
.sampleText{
/*	border-top:1px solid #e5e5e5;	*/
	background: rgba(255,255,255,.9);
	padding: 2em;
}
.iPadAppSample, .webSample{
	display: inline-block;
	vertical-align: text-top;
    text-align: justify;
    padding: 3em;
    width: 49%;
}
.iPadAppSample{
	border-right:1px solid #e5e5e5;		
}
.user-text{
	display: inline-block;
/*	width: 66%;*/
	width: 100%;
	vertical-align: middle;
}
.sample1{
	display: inline-block;
	width:112px;
	float:left;
}
.dl-button{
	display: block;
	width: 200px;
	margin: 0 auto;
	margin-top: 1em;
}
.dl-button img{
	width: 200px;
}
.webSample img{
	display: block;
	margin: 0 auto;
	margin-top: 1em;
	width: 100px;
}
.sampleText > p{
	margin-top: 3em;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    padding: 0em 1em;
}
.ws-p a{
	color: #ff6600;
	font-weight: bold;
}
@media screen and (max-width: 925px){
	.sampleText{
		padding: 1em;
	}
	.iPadAppSample, .webSample{
		padding: 1em;
	}
	.user-text{
		text-align: center;
	}
	.sample1{
		display: block;
		width: 100%;
	}
}
@media screen and (max-width: 605px){
	.iPadAppSample, .webSample{
		display: block;
		width: 100%;
	}	
	.iPadAppSample{
		border-right: none;
		border-bottom:1px solid #e5e5e5;		
	}
	.sampleText > p {
		margin-top: 2em;
	}	
}
@media screen and (max-width: 424px){
	.section7{
		padding: 2em;
	}
	.sampleText{
		background: none;
		padding: 0;
	}
	.iPadAppSample{
		padding: 0;
		padding-bottom: 2em;
	}		
	.webSample{
		padding: 0;
		padding-top: 1em;
	}
	.sampleText > p {
		background: rgba(255,255,255,.9);
		padding: 1em;
	}	
}

/*section8*/
.flowWrap{
	display: block;
	padding-top: 2em;
	padding-bottom: 4em;		
}
.flowBox{
	background: #f6f6f6;
	padding: 1em;
	display: inline-block;
	text-align: center;
	width: 17%;
	vertical-align: middle;
}
.flowBox.fb-1{
	height: 215px;
}
img.flowArrow{
	display: inline-block;	
	width: 2%;
}
.flowBox h4{
	font-weight: 600;	
	font-size: 22px;
    line-height: 30px;	
}
.flowBox img{
	width: 100px;
}
.flowBox a{
	background: #629cca;
	color: #ffffff;
	font-size: 16px;
	padding: 15px 8px;
    display: block;
    margin-top: 2.5em;
    border-radius: 8px;		
}
.flowBox a:hover{
	background: #477aa3;
	color: #fff;	
}
@media screen and (max-width: 959px){
	.flowBox{
		margin-bottom: 1em;
		width: 30%;
	}	
	.flowBox.fb-1{
		height: 210px;
	}	
	.flowBox h4{
		font-size: 20px;
	}
}
@media screen and (max-width: 552px){
	.flowBox{
		border-bottom: 1px solid rgba(88,156,217,1.00);
		display: block;
		margin-bottom: 0;
		width: 100%;
	}	
	.flowBox#lastFlowBox{
		border-bottom: none;
	}
	img.flowArrow{
		display: none;
	}
	.flowBox h4, .flowBox p{
		display: inline-block;
		margin-left: 1%;
		margin-right: 1%;
		width:33%;
		vertical-align: middle;
	}
	.flowBox.fb-1{
		height: auto;
	}
	.flowBox a{
		margin-top: 0;
		display: inline-block;
		margin-left: 1%;
		margin-right: 1%;
		width:61%;
		vertical-align: middle;		
	}
}
@media screen and (max-width: 475px){
	.flowBox h4{
		display: block;
		margin: 0;
		padding-top: 6px;
		width:100%;
	}	
	.flowBox p{
		width:55%;
	}		
	.flowBox a{
		width: 100%;
	}
	
}

/*section9*/
.section9{
	border-top:1px solid #e5e5e5;	
	padding: 3em 0em;
}
.section9 p{
	text-align: justify;
	margin-top: 2em;
}