@charset "utf-8";

/* pc
----------------------------------------------- */

@media print, screen and (min-width:768px) {
	#submain section h1.sp_ttl {
   	display: none;}

	/* app_name
	----------------------------------------------- */

	#app_name {
		padding: 55px 0 0;
	}
	#app_name .copy {
		margin:32px auto;
		max-width: 930px;
	}
	#app_name .copy p {
		margin: 0 25px;
		font-size: 1.25em;
		text-align: center;
		line-height: 1.85em;
		color: #727272;
	}
	#app_name .copy figure {
		margin:0 auto 20px;
		max-width: 107px;
	}
	#app_name .copy h2{
    	color: #78282a;
    	font-size: 2.25em;
    	font-weight: 500;
    	margin-bottom: 30px;
    	text-align: center;
    }
	#app_name .bg-gray {
		padding: 60px 0;
		background: #f2f2f2;
	}

	/* cv */
	#app_name .cv {
		margin: 0 auto;
    	max-width: 1250px;
    }
    #app_name .cv_box {
		margin: 0 25px;
    	padding: 25px 70px ;
    	border: 2px solid #6f4949;
			position: relative;
    }
    #app_name .cv_box .left{
    	float: left;
    	max-width:650px;
    }
    #app_name .cv_box .left p{
    	color: #78282a;
    	line-height: 1.9;
    	font-size: 1.25em;
    	font-weight: bold;
    }
    #app_name .cv_box .right{
    	float: right;
    	max-width:300px;
			position: absolute;
			top: 50%;
			right: 100px;
			margin: -25px 0 0;
    }
     #app_name .cv_box .right a{
    	width:300px;
    	/*max-width:300px;*/
    	height: 50px;
    	line-height: 51px;
    	padding:0 1em;
    }

    /* sso plan */
	#app_name .sso_plans {
		margin: 65px auto 0;
		max-width: 1250px;
	}
	#app_name .sso_plans_inner {
		margin: 0 25px;
		padding: 50px 0;
		background: white;
	}
	#app_name .sso_plans h2{
		position: relative;
    	margin: 0 auto 60px;
    	padding: 20px 0 0;
   		max-width: 850px;
    	font-size: 1.7em;
    	font-weight: 500;
    	text-align: center;
    	line-height: 1.75em;
	}
	#app_name .sso_plans h2:after {
		display: block;
		content: "";
		position: absolute;
		left: 50%;
		bottom: -32px;
		width: 120px;
		height: 2px;
		background: #c8b175;
		margin: 0 0 0 -60px;
	}
	#app_name .sso_plans h2.sp_ttl{display: none;}
	#app_name .sso_plan{
		max-width: 916px;
		margin: 0 auto;
	}
	#app_name .sso_plan li{
		border-bottom: #aba8a8 1px solid;
		margin: 0 20px;
		padding: 50px 0;
	}
	#app_name .sso_plan li:last-child{
		border-bottom: none;
	}
	#app_name .sso_plan dl{
		display:table;
	}
	#app_name .sso_plan dl dt{
		display:table-cell;
		vertical-align: middle;
		padding-right: 40px;
	}
	#app_name .sso_plan dl dd.plan_name{
		font-size: 22px;
		margin-bottom: 30px;
	}
	#app_name .sso_plan dl dd.plan_ex{
		font-size: 16px;
		line-height: 1.5;
	}

}

@media screen and (min-width:768px) and (max-width: 1023px) {
	/*@media screen and (min-width:741px) and (max-width: 1199px) {*/

	/* tablet
	----------------------------------------------- */

	/* cv */

    #app_name .cv_box {
		margin: 0 25px;
    	padding: 25px 35px ;
    	border: 2px solid #6f4949;
    }
    #app_name .cv_box .left{
    	max-width: 60%;
    	margin-right: 5%;
    }
    #app_name .cv_box .right{
		max-width: 35%;
		right :50px;
    }
     #app_name .cv_box .right a{
    	max-width:200px;
    }

}

@media screen and (max-width: 1240px) and (min-width: 1024px){
	#app_name .cv_box .left {
			max-width: 60%;
			margin-right: 5px;
	}
}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:767px) {
	#submain section h1 {
   	display: none;
   }
   	#submain section h1.sp_ttl {
   	display: block;
   	color: white;
    font-size: 1.3em;
    text-align: center;
    line-height: 21px;
    padding:20px 0;
	}

	#app_name {
		padding: 30px 0 0;
	}
	#app_name .copy {
		margin:0 35px
	}
	#app_name .copy p {
		font-size: 1em;
		line-height: 1.75em;
		color: #727272;
		margin: 0 20px 40px;
	}
	#app_name .copy figure {
		margin:0 auto 20px;
		max-width: 107px;
	}
	#app_name .copy h2{
    	color: #78282a;
    	font-size: 1.5em;
    	font-weight: 500;
			line-height: 1.5em;
    	margin-bottom: 30px;
    	text-align: center;
    }

	/* cv_box */

	#app_name .cv {
		margin: 0 auto;
    }
    #app_name .cv_box {
		margin: 0 25px;
    	padding: 25px ;
    	border: 2px solid #6f4949;
    }
     #app_name .cv_box .left{
    	float: none;
    	width: 100%;
    }
    #app_name .cv_box .left p{
    	color: #78282a;
    	line-height: 1.9;
    	margin-bottom: 20px;
    	font-size: 1.15em;
    	font-weight: bold;
    }
     #app_name .cv_box .right{
    	float: none;
    	width: 100%;
    	margin: 0 auto;
    }
     #app_name .cv_box .right a{
    	width: 100%;
    	height: 50px;
    	line-height: 51px;
    }

     /* sso plan */
     #app_name .bg-gray {
		padding: 60px 0;
		background: #f2f2f2;
	}

	#app_name .sso_plans {
		margin: 65px auto 0;
		max-width: 1250px;
	}
	#app_name .sso_plans_inner {
		margin: 0 25px;
		padding: 50px 0;
		background: white;
	}
	#app_name .sso_plans h2{
		display:none;
	}
	#app_name .sso_plans h2.sp_ttl{
		display: block;
		position: relative;
    	margin: 2px 0 15px;
    	padding: 20px 20px 0;
    	font-size: 1.2em;
    	font-weight: 500;
    	text-align: center;
    	line-height: 1.5em;
	}
	#app_name .sso_plans h2.sp_ttl:after{
		display: block;
		content: "";
		position: absolute;
		left: 50%;
		bottom: -32px;
		width: 44px;
		height: 1px;
		background: #c8b175;
		margin: 0 0 0 -22px;
	}
	#app_name .sso_plan{
		max-width: 916px;
		margin: 0 auto;
	}
	#app_name .sso_plan li{
		border-bottom: #aba8a8 1px solid;
		margin: 0 40px;
		padding: 50px 0;
	}
	#app_name .sso_plan li:last-child{
		border-bottom: none;
	}
	#app_name .sso_plan dl{
		display:block;
	}
	#app_name .sso_plan dl dt{
		display:block;
		text-align: center;
		margin-bottom: 20px;
	}
	#app_name .sso_plan dl dt figure img{
		width: 40%;
		height:auto;
	}
	#app_name .sso_plan dl dd.plan_name{
		font-size: 1.1em;
		margin-bottom: 20px;
	}
	#app_name .sso_plan dl dd.plan_ex{
		font-size: 1em;
		line-height: 1.85em;
	}

}