@charset "utf-8";
/* CSS Document */
/* ====================================================================================================================
 * common
 * ====================================================================================================================*/
.top_image {
	width: 320px;
	margin: 24px auto 0;
	padding-bottom: 16px;
}
.top_image img {
	width: 100%;
}
.container {
	margin:0 auto 40px;
	width: 300px;
	overflow: hidden;
}
.container_title {
	margin-top: 12px;
}
.container_title h2.ttl {
	background:url(../image/icon/purerose_icon1.png) no-repeat ;
	padding: 12px 0px 0px 32px;
	height: 16px;
    font-size: 18px;
	letter-spacing: 0.04em;
	font-weight:bold;
}
.container hr {
	border: solid 1px #f5ac4f;
	margin-bottom: 16px;
}
/* =================================================================================================
 * button
 * =================================================================================================*/
.button {
    display: inline-block;
    width: 300px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    outline: none;
    /*background-color: #333;*/
    border: 2px solid #555;
    border-radius: 8px;
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.button:hover {
    background-color: #fff;
    border-color: #f5ac4f;
    color: #f5ac4f;
}
/* ====================================================================================================================
 * contact
 * ====================================================================================================================*/
/* ====================================================================================================================
 * sitemap
 * ====================================================================================================================*/
.sitemap_box {
	width: 100%;
	margin: 0 auto;
	background: rgba(255,255,255,0.8);
}
.sitemap_box li {
	padding: 8px 12px;
}
.sitemap_box img {
	padding: 0 4px 2px 0;
}
.sitemap_box a {
    position: relative;
}
.sitemap_box a:hover　{
	color: #f5ac4f;
}
.sitemap_box a:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #f5ac4f;
   -webkit-transform: scaleX(0);
   -ms-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transition: all .3s ease;
   transition: all .3s ease;
}
.sitemap_box a:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}
/* ====================================================================================================================
 * error
 * ====================================================================================================================*/
.error_title {
    text-align: center;
    margin: 32px 0 88px; 
    font-size: 16px;
}
.error_link {
    text-align: center; 
}
.error_link a {
    text-decoration: underline;
}
.error_link a:hover {
    -ms-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #a28686;
    letter-spacing: .3em;
    padding-left: .3em;
}
/* ====================================================================================================================
 * access
 * ====================================================================================================================*/
.map_box1{
	margin-bottom: 48px; 
}
.map_block1 {
	overflow: hidden;
	width: 100%;
	margin-bottom: 24px; 
}
.map_text1{
	margin: 0 auto 24px;
}
.map_text1 h3{
	font-size: 17px;
	margin-bottom: 12px;
	font-weight: bold;
}
.map_text1 img{
	margin:0 6px 4px 0;
}
.map_text1 dt,.map_text1 dd {
	line-height: 32px;
}
.map_text1 dt{
	background: #f5ac4f;
	color: #fff;
	width: 100%;
	text-align: center;
}
.map_text1 dd{
	padding: 4px; 
}
.osaka_map iframe,.hukuyama_map iframe{
	height: 250px;
}
.osaka_view iframe {
	height: 250px;
}
.osaka_info span,.hukuyama_info span{
	color: red;
}
.hukuyama_info a:hover{
	color: #f5ac4f;
	text-decoration: underline;
}
.osaka_info,.hukuyama_info{
	margin-top:16px; 
}
/* ====================================================================================================================
 * campaign
 * ====================================================================================================================*/
.campaign {
	overflow: hidden;
}
.campaign_title dt {
	float: left;
	width: 24px;
	margin-bottom: 16px;
}
.campaign_title dd {
	float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px; 
    margin-bottom: 16px;
}
.campaign_name {
	margin-bottom: 24px; 
}
.campaign_name h3 {
	clear: both;
    font-size: 18px;
    color: #fff;
    background: #f5ac4f;
    margin-bottom: 16px;
    padding: 12px 12px 10px;
    line-height: 20px;
}
.campaign_name span {
	font-size: 15px;
	font-weight: bold;
	color: #d0903e;
}
/* ====================================================================================================================
 * privacy
 * ====================================================================================================================*/
.privacy_box ul{
	line-height: 24px;
	font-size: 16px;
}
.privacy_box img{
	margin: 0 8px 6px 0;
	vertical-align: middle;
}
.privacy_box li{
	margin-bottom: 24px;
}
/* ====================================================================================================================
 * voice
 * ====================================================================================================================*/
.voice_box{
	margin: 0 8px 32px; 
}
.voice_name{
	background: #f5ac4f;
}
.voice_name h3 {
    font-size: 18px;
    color: #674b23;
    background: #d9cbb0;
    margin-bottom: 16px;
    padding: 12px 12px 8px;
    line-height: 20px;
}
.voice_text a:hover{
    color: #d0903e;
}
.color_title{
	color: #d0903e;
	margin: 0 0 12px;
	font-size: 16px;
}
.page_box ul.pageNav01 {
	text-align: center;
}
.page_box ul.pageNav01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}
.page_box ul.pageNav01 li span,
.page_box ul.pageNav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 8px;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}
.page_box ul.pageNav01 li a:hover {
	border-color: #f5ac4f;
}
/* ====================================================================================================================
 * school
 * ====================================================================================================================*/
.school_guide {
	overflow: hidden;
	margin-bottom: 40px;
}
.guide_title {
	background:url(../image/icon/purerose_icon1.png) no-repeat ;
	padding: 12px 0px 0px 32px;
	height: 16px;
    font-size: 18px;
	letter-spacing: 0.04em;
	font-weight:bold;
	margin-top: 12px; 
}
.guide_main {
	overflow: hidden;
}
.guide_img {
	width: 100%;
	margin-bottom: 32px;
}
.guide_img img {
	width: 100%;
}
.school_chara {
	overflow: hidden;
	margin-bottom: 40px;
}
.chara_title {
	background:url(../image/icon/purerose_icon1.png) no-repeat ;
	padding: 12px 0px 0px 32px;
	height: 16px;
    font-size: 18px;
	letter-spacing: 0.04em;
	font-weight:bold;
}
.chara_main {
    width: 100%;
    margin: 0 auto;
}
.form_text {
    line-height: 24px;
    text-align: center;
    margin-bottom: 32px; 
}
.formTable {
    width: 300px;
    margin:0 auto 32px;    
    border-collapse: collapse;
    border: 1px solid #ddd;
    border-bottom: none;
}
.formTable tr{
    display: block;
}
.formTable th {
    display: block;
    border-right: 1px solid #ddd;
    font-weight: normal;
    background: #d9cbb0;
    color: #674b23;
    text-align: left;
    padding: 8px;
}
.formTable td {
    display: block;
    padding: 12px;
    line-height: 24px;
    border-bottom: 1px solid #ddd;
}
.span1 span {
    color: #ab8866;
}
.span2 span {
    display: block;
    color: #f00;
}
.school_course {
	overflow: hidden;
}
.margin {
	overflow: hidden;
	margin-bottom: 20px;
}
.course_box {
    margin-bottom: 40px;
    clear:both;
}
.course_title {
	background:url(../image/icon/purerose_icon1.png) no-repeat ;
	padding: 12px 0px 0px 32px;
	height: 16px;
    font-size: 18px;
	letter-spacing: 0.04em;
	font-weight:bold;
}
.course_main {
    overflow: hidden;
    width: 100%; 
}
.course_info {
	overflow: hidden;
	margin: 0 auto;
}
.course_info dl {
	overflow: hidden;
	width: 100%;
	margin: 0 auto　16px;
}
.course_info dt {
	float: left;
	width: 16px;
	margin-top: 4px; 
}
.course_info dd {
	float: left;
	width: 93%;
	line-height: 24px;
}
.course_info2 {
	clear: both;
	margin-bottom: 24px; 
}
.course_info2 p {
	line-height: 24px;
}
.course_info2 ul {
    margin: 12px 0 0 0;
}
.course_info2 li {
	line-height: 24px;
	border: solid 2px #d9cbb0;
	border-radius: 8px;
	background: #d9cbb0;
	padding: 12px;
	text-align: center;
	margin-bottom: 8px;
	color: #674b23; 
}
.course_info2 img {
	padding: 0 8px 2px 0;
}
.course_info2 h4 {
	margin: 12px 0 16px;
	font-size: 15px;
	color: #d0903e;
}
.course_name {
	overflow: hidden;
}
.course_name h3 {
	clear: both;
    font-size: 16px;
    color: #674b23;
    background: #d9cbb0;
    margin-bottom: 16px;
    padding: 12px;
    line-height: 20px;
}
.course_name dt {
	float: left;
	width: 24px;
	margin-bottom: 16px;
}
.course_name dd {
	float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px; 
    margin-bottom: 16px;
}
.course_lesson {
	font-size: 16px;
	color: #f5ac4f;
	margin: 16px　0;  
}
.course_time {
	font-size: 16px;
	font-weight: normal;
}
.course_price {
	margin-bottom: 8px;
	overflow: hidden;
}
.course_list {
	clear: both;
	width: 100%;
	overflow: hidden;
	margin-bottom: 24px; 	
}
.course_list span {
	display: block;
}
.school1 {
	margin-bottom: 24px; 
}
.course_info {
	clear: both;
}
.course_btn {
	margin: 24px auto 0;
	width: 300px!important;
}
.course_btn a {
	font-size: 13px;
}
/* ====================================================================================================================
 * school3
 * ====================================================================================================================*/
.school3 {
	overflow: hidden;
	margin-bottom: 40px;
}
.school3_title {
	background:url(../image/icon/purerose_icon1.png) no-repeat ;
	padding: 12px 0px 0px 32px;
	height: 16px;
    font-size: 18px;
	letter-spacing: 0.04em;
	font-weight:bold;
	margin-top: 12px; 
}
.school3_main {
	overflow: hidden;
}
.school3_img {
	width: 100%;
	overflow: hidden;
	margin-bottom: 32px;
}
.school3_img img {
	width: 100%;
}
.right_img {
	margin-top: 8px; 
}
.course_lesson {
	margin: 0 0 16px;
	width: 300px;
}
.course_lesson h3 {
	font-size: 16px;
	border: solid 2px #f5ac4f;
	border-radius: 4px;
    padding: 12px 4px 10px;
    line-height: 24px;
}
.formTable2 {
    width: 300px;
    margin:0 auto 16px;    
    border-collapse: collapse;
    border: 1px solid #ddd;
    border-bottom: none;
}
.formTable2 tr{
    display: block;
}
.formTable2 th {
    display: block;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: normal;
    background: #d9cbb0;
    color: #674b23;
    text-align: left;
    padding: 8px;
    text-align: center;
}
.formTable2 td {
    display: block;
    padding: 12px;
    line-height: 24px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}
.center {
	text-align: center!important;
}
.course_curriculum {
    overflow: hidden;
    margin: 0 0 24px;
}
.course_curriculum dl{
	width: 100%;
	overflow: hidden;
}
.course_curriculum dt{
	text-align: center;
    background: #d9cbb0;
    padding: 8px; 
}
.course_curriculum dd{
	text-align: center;
    padding: 4px; 
    border: solid 1px #ccc;
    border-top: none; 
    line-height: 24px;
}
.course_curriculum p {
	clear: both;
	text-align: center;
	margin: 6px 0;
}
.margin2 {
	margin-bottom: 36px; 
}
.last {
	margin-bottom: 0; 
}
@media screen and (min-width:600px){
/* ====================================================================================================================
 * common
 * ====================================================================================================================*/
	.top_image {
		width: 580px;
	}
	.container {
		width: 580px;
		margin-bottom: 60px;
	}
	.none {
		display: none;
	}
/* =================================================================================================
 * button
 * =================================================================================================*/
	.button {
	    width: 250px;
	}
/* ====================================================================================================================
 * contact
 * ====================================================================================================================*/
/* ====================================================================================================================
 * access
 * ====================================================================================================================*/
	.map_text1 h {
		font-size: 18px;
	}
	.map_text1{
		width: 580px;
	}
	.map_text1 dl {
		margin-bottom: 8px;
	}
	.map_text1 dt,.map_text1 dd{
		line-height: 32px;
	}
	.map_text1 dt {
		float: left;
		width: 100px;
		margin-right:8px; 
	}
	.map_text1 dd {
		padding: 0; 
	}
	.osaka_info,.hukuyama_info {
		clear: both;
	}
	.space {
		margin-left: 108px; 
	}

/* ====================================================================================================================
 * privacy
 * ====================================================================================================================*/
/* ====================================================================================================================
 * voice
 * ====================================================================================================================*/
/* ====================================================================================================================
 * school
 * ====================================================================================================================*/
    .chara_main,.formTable {
        width: 100%;
    }
    .form_text {
        line-height: 32px;
    }
    .inline {
        display: inline-block;
    }
    .formTable {
        display: table;
    }   
    .formTable th,.formTable td {
        display: table-cell;
    }   
    .formTable th{
        padding-top: 14px;
        min-width: 200px;
    }    
    .formTable td {
        width: 100%;
    }
    .formTable2 {
        display: table;
        width: 100%;
    }   
    .formTable2 th,.formTable2 td {
        display: table-cell;
    }   
    .formTable2 th{
        padding-top: 14px;
        min-width: 130px;
    }    
    .formTable2 td {
        width: 100%;
        text-align: right;
    }
	.course_list span {
		padding: 0 20px;
	}
	.school1 {
		float: left;
		margin-bottom: 0; 
	}
	.school2 {
	    float: left;
	}
	.course_lesson {
	    width: 280px;
	}
	.curriculum {
		margin: 0 auto 32px;
	}
	.curriculum1 {
		width: 48%;
		float: left;
	}
	.curriculum2 {
		width: 48%;
		float: right;
	}
	.formTable3 {
	    width: 90%
	}
	.course_btn {
		width: 250px!important;
	}
	.course_info2 li {
		display: inline-block;
		padding: 12px 62px; 
	}
	.left_img {
		float: left;
		width: 48%;
	}
	.right_img {
		float: right;
		width: 48%;
		margin-top: 0; 
	}
}
@media screen and (min-width:768px){
/* ====================================================================================================================
 * common
 * ====================================================================================================================*/
	.top_image{
		width: 748px;
	}
	.container{
		width: 748px;
	}
/* =================================================================================================
 * button
 * =================================================================================================*/
	.button {
	    width: 300px;
	}
/* ====================================================================================================================
 * contact
 * ====================================================================================================================*/
/* ====================================================================================================================
 * access
 * ====================================================================================================================*/
	.map_text1{
		width: 320px;
		margin: 0 ;
		width: 50%;
		float:left;
	}
	.clear_both{
		clear: both;
	}
	.osaka_map,.hukuyama_map{
		width: 50%;
		float:right;
	}
	.osaka_map iframe,.hukuyama_map iframe,
	.osaka_view iframe {
		height: 300px;
	}
/* ====================================================================================================================
 * privacy
 * ====================================================================================================================*/
/* ====================================================================================================================
 * voice
 * ====================================================================================================================*/
/* ====================================================================================================================
 * school
 * ====================================================================================================================*/
	.guide_img {
		margin: 0 auto 32px;
	}
	.chara_text dt {
	    float: left;
	    width: 30%; 
	}
	.chara_text dd {
	    float: right;
	    width: 64%; 
	}
	.course_list span {
		padding: 0 36px;
	}
	.course_btn {
		width: 300px!important;
	}
	.course_info2 li {
   		padding: 12px 18px; 
	}
	.course_lesson {
	    width: 360px;
	}
	.left_price {
		float: left;
		width: 48%;
	}
	.right_price {
		float: right;
		width: 48%;
	}
	.school3_img {
		margin: 0 auto 32px;
	}

}

@media screen and (min-width:1024px){
/* ====================================================================================================================
 * common
 * ====================================================================================================================*/
	.top_image{
		width: 900px;
	}
	.container{
		width: 900px;
	}
/* =================================================================================================
 * button
 * =================================================================================================*/
	.button {
	    width: 350px;
	}
/* ====================================================================================================================
 * contact
 * ====================================================================================================================*/
/* ====================================================================================================================
 * access
 * ====================================================================================================================*/
/* ====================================================================================================================
 * privacy
 * ====================================================================================================================*/
/* ====================================================================================================================
 * voice
 * ====================================================================================================================*/
/* ====================================================================================================================
 * school
 * ====================================================================================================================*/
	.guide_img {
		width: 48%;
		float: left;
		margin-bottom: 0; 
	}
	.guide_text {
		width: 48%;
		float: right;
	}
	.course_list span {
		padding: 0 50px;
	}
	.course_btn {
		width: 350px!important;
	}
	.course_info2 li {
   		padding: 12px 37px; 
	}
	.course_lesson {
	    width: 432px;
	}
}