@charset "UTF-8";
/* CSS Document */

h1{
	font-size: 30px;
	letter-spacing: 0.32em;
	text-align: center;
	color: #231815;
	margin-bottom: 50px;
}
p{
	font-size: 19px;
	letter-spacing: 0.05em;
	line-height: 2.3;
	text-align: justify;
	color: #595757;
}

li{
    list-style: none;
}




.contents_whole{
	width: calc(100%);
	height: auto;
	background-color: #EEECEB;
	padding: 95px 5%;
    
}

.contents_whole_type2{
    width: calc(100%);
	height: auto;
	background-color: #f7f8f8;
	padding: 95px 100px;
}

.contents_whole h1{
	font-size: 25px;
    line-height: 1.5em;
	text-align: left;
	padding: 0px 7%;
	background-color: #fff;
	border-radius: 0px 30px 30px 0px;
	position: relative;
	left: -7%;
    line-height: 2.5em;
    color: #595757;
    font-weight: normal;
    letter-spacing: normal;
    width: fit-content;
}

.contents_whole_type2 h1{
    background: none;
    width: 100%;
    text-align: center;
    padding-top: 2em;
}

.recommended{
	width: 197px;
	height: 34px;
	margin: 43px 0;
	background-color: #E0CA2B;
}

p.recommended{
	text-align: center;
	font-size: 14.4px;
	letter-spacing: 0.17em;
	color: #231815;
}

.recommended_inner{
	display: block;
    overflow: hidden;
	
}
.recommended_inner .l{
    width: 48%;
    float: left;
    margin-right: 30px;
    
}
.recommended_inner .r{
    width: 48%;
    float: left;
}

.item{
	font-size: 19px;
	letter-spacing: 0.1;
	color: #595757;
	margin: 0 0px 10px 0;
}
.condition{
	width: 129px;
	height: 34px;
	margin: 44px 0 24px 0;
	background-color: #231815;
}
p.condition{
	text-align: center;
	font-size: 14.4px;
	letter-spacing: 0.37em;
	color: #fff;
}

.btn_area{
	width: 100%;
	text-align: center;
	margin-top: 70px;
}

button{
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.43em;
	margin-top: 20px;
}

.cp_button03 {
	position: relative;
	z-index: 1;
	display: inline-block;
	box-sizing: border-box;
	width: 196px;
	height: 18px;
	padding: 1em;
	line-height: 0;
	cursor: pointer;
	user-select: none;
	transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
	color: #000;
	border: 1px solid #898989;
	border-radius: 0;
	background: transparent;
}
.cp_button03:hover {
	color: #ffffff;
	border: 1px solid #898989;
	background-color: #898989;
}
.cp_button03:before, .cp_button03:after {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
}

.cp_button03:after {
	top: -5px;
	left: -5px;
	border: 1px solid #898989;
}

.btn_area a{
	width: 245px;
	height: 50px;
	float: right;
	color: #fff;
	background-color: #898989;
	padding-top: 15px;
}

.course_info{
	width: 245px;
	min-height: 50px;
	background-color: #898989;
	position: relative;
	top:-140px;
	z-index: 2;
	margin: 0 0 0 auto;
	text-align: center;
	line-height: 50px;
    
}

.course_info:hover{
	background-color: #595757;
	color: #fff;
	transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.course_info a{
	display: block;
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
}

.course02_info{
	width: 245px;
	min-height: 50px;
	background-color: #fff;
	position: relative;
	top:-120px;
	z-index: 2;
	margin: 0 0 0 auto;
	text-align: center;
	line-height: 50px;
	background-image: url(../img/04/arrow_02.svg);
	background-repeat: no-repeat;
	background-size: 6%;
	background-position: 83% 50%;
}

.course02_info:hover{
	background-color: #595757;
	background-image: url(../img/04/arrow_w02.svg);
	color: #fff;
	transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.course02_info a{
	display: block;
}
/* contents_title */





/*
h1.contents02_title{
	width: 100%;
	max-width: 598px;
	min-height: 63px;
	font-size: 27px;
	text-align: left;
	padding: 16px 0 0 100px;
	background-color: #fff;
	border-radius: 0px 31.61px 31.61px 0px;
	position: relative;
	left: -100px;
}

h1.contents03_title{
	width: calc(100% - 100px);
	font-size: 25px;
    line-height: 1.5em;
	letter-spacing: 0.23em;
	text-align: left;
	padding: 0px 0 0 100px;
	background-color: #fff;
	border-radius: 0px 31.61px 31.61px 0px;
	position: relative;
	left: -100px;
}

h1.contents04_title{
	width: 100%;
	max-width: 1000px;
	min-height: 63px;
	font-size: 25px;
	letter-spacing: 0.23em;
	line-height: 1.5;
	text-align: left;
	padding: 12px 0 10px 100px;
	background-color: #fff;
	border-radius: 0px 31.61px 31.61px 0px;
	position: relative;
	left: -100px;
}

h1.contents05_title{
	width: 100%;
	max-width: 770px;
	min-height: 63px;
	font-size: 25px;
	letter-spacing: 0.23em;
	text-align: left;
	padding: 19px 0 0 100px;
	background-color: #fff;
	border-radius: 0px 31.61px 31.61px 0px;
	position: relative;
	left: -100px;
}
*/


p.contents02_text{
	color: #595757;
	letter-spacing: 0.1em;
	line-height: 1.7;
	margin-bottom: 110px;
    font-size: 19px;
}






.application_contents{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.application_contents h2{
	font-size: 24px;
	letter-spacing: 0.37em;
	color: #fff;
	text-align: center;
	padding-top: 25px;
}

.application_contents h3{
	font-size: 19px;
	letter-spacing: 0.37em;
	color: #fff;
	text-align: center;
	padding-top: 5px;
	margin-top: 40px;
}

.left_info{
	width: 55%;
    margin-right: 5%;
}

.left_info img{
	width: 100%;
	height: auto;	
}

.green{
	width: 100%;
	max-width: 347px;
	height: 74px;
	background-color: #00A29A;
}

.purple{
	width: 100%;
	max-width: 347px;
	height: 74px;
	background-color: #920783;
}

.gray{
	width: 100%;
	max-width: 149px;
	min-height: 33px;
	background-color: #595757;
}

.right_application{
	width: 100%;
	max-width: 330px;
}

.application_contents p{
	margin: 22px 0 58px 0;
	letter-spacing: 0.16em;
	
}
.right_application img{
    width: 100%;
    height: auto;
}

.application_btn{
	width: 100%;
	background-color: #F7F8F8;
	text-align: center;
	margin-top: 30px;
	line-height: 5em;
	color: #595757;
    margin-bottom: 40px;
}



.application_btn a:link,
.application_btn a:visited{
	width: 100%;
	display: block;
	font-size: 22px;
	letter-spacing: 0.22em;
    text-decoration: none;
    color: #595757;
}
.application_btn a:hover{
	color: #fff;
	background-color: #727171;
	transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.info_contents{
	width: 100%;
	margin-top: 0px;
	clear: both;
}

p.qualification{
	width: 127px;
	height: 34px;
	color: #fff;
	font-size: 14.4px;
	text-align: center;
	margin: 44px 0 24px 0;
	background-color: #595757;
}

.qualification_inner {
	width: 100%;
	max-width: 900px;
	
	font-size: 19px;
	letter-spacing: 0.16em;
	color: #595757;
}

.qualification_inner li{
	width: auto;
	height: auto;
	margin: 0 10px 0px 0;
    
}

.qualification_btn{
	max-width: 160px;
	height: 30px;
	font-size: 13px;
	text-align: center;
	line-height: 31px;
	background-color: #fff;
	
	background-image: url(../img/arrow.svg);
	background-repeat: no-repeat;
	background-size: 6%;
	background-position: 90% 50%;
    border-radius: 12px 12px 12px 12px !important;
}



.qualification_btn{
    list-style: none;
}

.qualification_btn a:link,
.qualification_btn a:visited{
	display: block;
    color: #595757;
    background: url(../img/04/arrow.svg) #fff center right 10px no-repeat;
    background-size: 5% auto;
    text-decoration: none;
    border-radius: 12px 12px 12px 12px !important;
    
}
.qualification_btn a:hover{
    color: #ffff;
    background: url(../img/04/arrow_w.svg) #595757 center right 10px no-repeat;
    border: solid 1px #898989;
    
    background-size: 5% auto;
    border-radius: 12px 12px 12px 12px !important;
    
}


/* sp */
@media screen and (max-width: 1025px) {
	.application_contents{
		width: 100%;
		display: block;
		margin: auto;
		text-align: center;
	}
	
	.left_info{
		width: 100%;
        margin-bottom: 40px;
	}
	
	.right_application{
		margin-top: 45px;
        margin-bottom: 35px;
		margin-left: auto;
        margin-right: auto;
        max-width: 100%;
	}
    
}





@media screen and (max-width: 735px) {
    .application_contents img{
        width: 100%;
        height: auto;
        
    }
    .contents_whole,
    .contents_whole_type2{
        width: calc(100%);
        height: auto;
        background-color: #e6e6e6;
        padding: 0px 30px 95px 30px;
    }
    .contents_whole p,
    .contents_whole_type2 p{
        font-size: 16px !important;
        line-height: 1.4em !important;
        margin: 10px 0 5px 0;
        letter-spacing: 0.16em;
        line-height: 1.66;
    }
    .contents_whole h1,
    .contents_whole_type2 h1{
        font-size: 18px;
        line-height: 1.5em;
        text-align: center;
        padding: 0px 0 0 0px;
        background-color: #333333;
        border-radius: 0px;
        position: relative;
        left: 0px;
        line-height: 2.5em;
        color: #fff;
        font-weight: normal;
        letter-spacing: normal;
        width:80%;
        padding: 22px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.2em;
        margin-bottom: 40px;
    }
    .contents_whole img{
        width: 100%;
        height: auto;
        margin: 30px auto;
    }
    p.contents02_text {
        color: #595757;
        letter-spacing: 0.1em;
        line-height: 1.7;
        margin-bottom: 40px;
        font-size: 19px;
    }
    .application_contents {
        width: 100%;
        display: block;
        margin: auto;
        text-align: center;
    }
    .application_contents h2 {
        font-size: 18px;
        height: inherit;
        letter-spacing: 0.1em;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        max-width: 100%;
    }
    
    .info_contents {
        width: 100%;
        margin-top: 6px;
        clear: both;
    }
    p.qualification,
    p.condition,
    .right_application h3{
        width: 100% !important;
        height: auto;
        color: #fff;
        font-size: 14.4px;
        line-height: 1.25em;
        text-align: center;
        margin: 24px 0 24px 0;
        background-color: #595757;
        padding: 1em 0;
    }
    .gray {
        width: 100% !important;
        max-width: 100%;
        min-height: auto;
        background-color: #595757;
        font-size: 14.4px !important;
    }
    p.recommended {
        width: 100%;
        height: auto;
        color: #fff;
        font-size: 14.4px;
        line-height: 1.25em;
        text-align: center;
        margin: 24px 0 24px 0;
        background-color: #e0ca2b;
        padding: 1em 0;
    }
    .qualification_inner li {
        width: 100%;
        height: auto;
        margin: 5px 0px;
        display: block;
        float: none;
        padding: 0.2em 0;
        
    }
    .qualification_inner li:nth-child(even) {
        margin-left: auto;
        
        
    }
    .qualification_inner {
        width: 100%;
        max-width: auto;
        column-count: 1;
        font-size: 19px;
        letter-spacing: 0.16em;
        color: #595757;
    }
    .qualification_btn{
        float: right;
    }
    .qualification_btn a:link, .qualification_btn a:visited {
        display: block;
        color: #595757;
        background: url(../img/04/arrow.svg) #fff center right 10px no-repeat;
        background-size: 5% auto;
        text-decoration: none;
        border-radius: 12px 12px 12px 12px !important;
        font-size: 10px;
    }
    .recommended_inner {
        display: block;
        
        
        font-size: 16px !important;
        line-height: 1.4em !important;
        margin: 10px 0 5px 0;
        letter-spacing: 0.16em;
        line-height: 1.66;
    }
    .item {
        font-size: 16px;
        letter-spacing: 0.15;
        color: #595757;
        margin: 0 10px 10px 0;
        list-style: disc;
    }
    .course_info {
        width: 245px;
        min-height: 50px;
        background-color: #898989;
        position: relative;
        top: 0px;
        z-index: 2;
        margin: 20px auto 40px auto;
        text-align: center;
        line-height: 50px;
    }
    .application_btn {
        width: 100%;
        background-color: #F7F8F8;
        text-align: center;
        margin-top: 0px;
        line-height: 5em;
        color: #595757;
        margin-bottom: 0px;
        font-size: 16px;
    }
    .application_btn a:link, .application_btn a:visited {
        width: 100%;
        display: block;
        font-size: 18px;
        letter-spacing: 0.22em;
        text-decoration: none;
        color: #595757;
    }
    .application_btn a:hover{
        color: #fff
        
    }
    .recommended_inner .l{
        width: 100%;
        float: none;
        margin-right: 30px;
        max-width: 100%;

    }
    .recommended_inner .r{
        width: fit-content;
        float: none;
        max-width: 100%;
    }
    
	
}