@charset "utf-8";
/* sp_lecture */

.f_l {font-size: 130%;}
.f_m {font-size: 110%;}

.f_s {font-size: 90%;}
.f_ss {font-size: 80%;}
.f_sss {font-size: 70%;}
.f_ssss {font-size: 60%;}

.fc_red {color: red;}
.fc_mugreen {color: #00a0c0;}


/* anchor_link

-------------------------*/

.anchor_link {
    display: flex;
    justify-content: center;
    column-gap: 2rem;
    margin-top: 5rem;
}

.anchor_link a {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #00a0c0;
    border-radius: .5rem;
    padding: 1rem;
    width: 22%;
    text-align: center;
}

.anchor_link a::after {
    position: absolute;
    content: "▼";
    color: #00a0c0;
    font-size: 1rem;
    bottom: -.6rem;
    left:50%;
    transform: translateX(-50%); 
}

.anchor_link a:hover {
    background-color: #E1FFFE;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    .anchor_link a {
    width: 30%;
}
    
}


/* pass_record

-------------------------*/

.pass_record {
    display: flex;
    justify-content: center;
    column-gap: 3rem;
    background-color: #d6efe1;
    padding: 2rem;
    margin: 0;
}

.pass_record img {
    width: calc(50% - 2.5rem);
}

.triangle {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.triangle p {
    width:0;
height:0;
border-style:solid;
border-width: 30px 25px 0 25px;
border-color: #D6EFE1 transparent transparent transparent;
}


@media screen and (orientation: portrait) and (max-width: 767px){
    
    .pass_record {
    display: block;
    padding: 1rem;
    margin: 0;
}

.pass_record img {
    width: 100%;
}
}


/* point_3

-------------------------*/
.point_3 h2 {
    margin-bottom: 1rem;
    text-indent: -5.3rem;
    margin-left: 5.3rem;
}

.t_col2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;
    margin-top: 4rem;
}

.t_col2 dl {
    width: calc(50% - 1.5rem);
    margin-bottom: 3rem;
    display: flex;
    column-gap: 2rem;
}

.t_col2 dl dt {
    width: 30%;
}

.t_col2 dl dt figure {
    padding: 0;
}

.t_col2 dl dt figure img {
    width: 100%;
}

.t_col2 dl dt figcaption {
    padding: .2rem .4rem;
    margin: 0;
    background-color: #00a0c0;
    color: #fff;
}

.t_col2 dl dd {
    width: calc(70% - 2rem);
}

.t_col2 dl dd p {
    line-height: 2.4rem;
    margin-bottom: 0;
}


@media screen and (orientation: portrait) and (max-width: 767px){
    
    .t_col2 {
    display: block;
}

.t_col2 dl {
    width: 100%;
    margin-bottom: 3rem;
}
    
}


.other_col2 {
    margin-top: 4rem;
}

.other_col2 h5 {
    font-weight: bold;
    margin-bottom: 1rem;
}

.other_col2 dl {
    display: flex;
    column-gap: 3rem;
}

.other_col2 dl dt {
    width: 35%;
}

.other_col2 dl dt img {
    width: 100%;
}

.other_col2 dl dd {
    width: calc(65% - 1.5rem);
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    .other_col2 dl {
    display: block;
}
    
    .other_col2 dl dt {
    width: 100%;
}
    
    .other_col2 dl dd {
    width: 100%;
}
    
}


/* otoku

-------------------------*/

.otoku .otoku_col4 {
    margin-top: 2rem;
}

.otoku .otoku_col4 ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.otoku .otoku_col4 ul li {
    width: 22%;
    border: 1px solid #555;
    border-radius: 1rem;
    padding: 1.5rem;
}

.otoku .otoku_col4 p {
    text-align: right;
    font-size: 90%;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    .otoku .otoku_col4 ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0rem;
}
    
    .otoku .otoku_col4 ul li {
    width: 48%;
    padding: 1.5rem;
        margin-bottom: 1.5rem;
}
    
    .otoku .otoku_col4 p {
    text-align: left;
    font-size: 85%;
}
    
}


/* course_fee

-------------------------*/

.course_fee table {
    margin-bottom: 2rem;
}

.course_fee table tr,
.course_fee table th,
.course_fee table td {
    border: 1px solid #555;
    padding: .5rem 1rem;
}

.course_fee table th {
    vertical-align: middle;
    text-align: center;
    background-color: #00aebb;
    color: #fff;
}

.course_fee table tr.course_name {
    vertical-align: middle;
    text-align: center;
    background-color: #dbfccb;
}

.course_fee table tr.course_dt {
    vertical-align: top;
    text-align: justify;
    background-color: #dbfccb;
    font-size: 90%;
    line-height: 2.5rem;
}

.course_fee table tr.course_f {
    text-align: center;
}

.course_fee p {
    font-size: 90%;
    text-align: center;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    .course_fee p {
    text-align: left;
}
}


/* contents
 
-------------------------*/

.br_sp {display: none;}
.br_pc {display: block;}

p.u_sub {
    text-align: center;
    line-height: 3rem;
}

.contents {
	letter-spacing: .1rem;
	line-height: 3rem;
}

.contents figure {
	padding-bottom: 2rem;
}

.contents figure p {
    margin: 0 4rem;
    text-align: right;
    font-size: 1.2rem;
}

section.main_message {
	padding: 4rem 0 1rem;
}

section.outline {
	padding-bottom: 2rem;
}

section.outline .toc {
    width: 90%;
	margin: 1rem auto;  
    display: flex;
}

section.outline h2 {
    text-align: center;
    font-weight: bold;
    margin: 2rem 0 4rem;
    font-size: 2rem;
    line-height: 3rem;
}

section.outline h5 {
    text-align: center;
    font-weight: bold;
}

section.outline h6 {
    text-align: center;
    margin: 2rem 0 4rem;
    font-size: 2rem;
}

section.outline .toc .toc_t {
    writing-mode: vertical-rl;
    display: inline-block;
    text-align: center;
    box-shadow: 3px 3px 10px -2px #777777;
    margin-right: 4rem;
    padding: 2rem;
    font-size: 2rem;
}

section.outline .toc .toc_menu {
    display: flex;
    column-gap: 4rem;
    width: 100%;
    font-size: 1.8rem;
}

section.outline .toc .toc_menu ul {
    width: 50%;
}

section.outline .toc .toc_menu ul li {  
    height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

section.outline .toc .toc_menu ul li:nth-of-type(2),
section.outline .toc .toc_menu ul li:nth-of-type(4) {
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    padding: .5rem 0;
}

section.outline .toc .toc_menu ul li span.f_s {
    font-size: 1.4rem;
}

section.outline table {
	width: 90%;
	margin: 4rem auto;
} 

section.outline table th,
section.outline table td {
	padding: 1rem 3rem;
	border: 1px solid gray;
}

section.outline table td span {
		font-size: .9em;
	}

section.outline table td span.asta_link_pdf::after {
    content: "\f1c1";
    font-family: FontAwesome;
}

section.outline table th {
	background-color: #ebeff0;
	font-weight: normal;
	text-align: center;
}



section.outline table td ul.time_table {
	display: flex;
	justify-content: space-between;
}

section.conte_list {
	padding: 4rem 0 3rem;
}

section.conte_list dl {
	margin-bottom: 3rem;
}

section.conte_list dl dt {
	font-size: 1.2em;
	color: #0093bf;
	margin-bottom: .5rem;
	text-indent: -3rem;
	margin-left: 3rem;
}

section.conte_list dl dd {
	margin-left: 3rem;
}

section.benefit .booklet {
	padding: 2rem 0;
	display: flex;
}

section.benefit .booklet dl {

}

section.benefit .booklet dl dt {
	font-size: 1.2em;
	color: #0093bf;
	margin: 1.5rem 0;
}

section.benefit .booklet dl dd {
	text-align: justify;
}

section.benefit .booklet dl dd.asta {
	font-size: .9em;
}

section.benefit .booklet figure {
	margin-left: 3rem;
}

section.benefit .booklet:nth-child(3) figure {
	margin-top: 2rem;
}

section.benefit .booklet figure img {
	max-width: 270px;
}

.apply_early {
    margin: 5rem 0 -2rem 0;
}

.apply_early dl dt {
    background: #E60087;
    background: linear-gradient(90deg,rgba(230, 0, 135, 1) 0%, rgba(255, 161, 0, 1) 100%);
    padding: 1.2rem;
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    margin: 0
}

.apply_early dl dt span {
    font-size: 1.9rem;
    font-weight: bold;
}

.apply_early dl dd {
    width:0;
    height:0;
    border-style:solid;
    border-width: 15px 13px 0 13px;
    border-color: #F35342 transparent transparent transparent;
    margin: 0 auto;
}


@media screen and (orientation: portrait) and (max-width: 767px){
	
	.br_sp {display: block;}
    .br_pc {display: none;}
    
    .contents figure p {
    margin: 0 1rem;
    text-align: left;
    font-size: 1.2rem;
}
	
	section.main_message {
	padding: 1.5rem 0 0rem;
}
    
    section.outline h2 {
    margin: 2rem 0 4rem;
    font-size: 1.7rem;
    line-height: 3rem;
}
    
    section.outline .toc {
        width: 95%;
	margin: 1rem auto;  
    display: block;
}
    
    section.outline .toc .toc_t {
    writing-mode: horizontal-tb;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 3px 8px -2px #777777;
    margin-right: 0rem;
        margin-bottom: 3rem;
    padding: .6rem 0rem;
    font-size: 1.8rem;
}
    
    section.outline .toc .toc_menu {
    display: block;
    font-size: 1.8rem;
}
    
    section.outline .toc .toc_menu ul {
    width: 100%;
}

section.outline .toc .toc_menu ul li {  
    height: auto;   
    padding: 2rem 0;
}
    
    section.outline .toc .toc_menu ul:not(:last-of-type) li:nth-of-type(3) {
    border-bottom: 1px solid #555;
    padding: 2rem 0;
}
    
    section.outline .toc .toc_menu ul li:nth-of-type(2),
section.outline .toc .toc_menu ul li:nth-of-type(4) {
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    padding: 2rem 0;
}
    
    section.outline .toc .toc_menu ul li span.f_s {
    font-size: 1.6rem;
}
	
	section.outline table th,
section.outline table td {
	padding: .5rem 1rem;
}
	
	section.outline table td ul.time_table {
	display: block;
}
	
	section.conte_list {
	padding: 4rem 0 .1rem;
}
	
	section.benefit .booklet {
	padding: 0rem 0;
	display: block;
}
	section.benefit .booklet figure {
	margin-left: 0rem;
		text-align: center;
}

section.benefit .booklet figure img {
	max-width: 250px;
}
	
	
}



/* voice

-------------------------*/

.voice {
    margin: 3rem 0rem 6rem;
}

.voice .col_2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6.8rem;
    margin-top: 6rem;
}

.voice .col_2 dl {
    width: calc(100% / 2 - 3.4rem);
    margin-bottom: 4rem;
    display: flex;
    column-gap: 2rem;
}

.voice .col_2 dl dt {
    width: 30%;
}

.voice .col_2 dl dd {
    width: calc(70% - 1rem);
}

.voice .col_2 dl dd p:first-of-type {
    font-weight: bold;
}

.voice .col_2 dl dd p:last-of-type {
    text-align: justify;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    .voice .col_2 {
    display: block;
}
    
    .voice .col_2 dl {
    width: 100%;
    margin-bottom: 4rem;
}
    
}


/* user_guide

-------------------------*/

.user_guide .ug_col2 {
    display: flex;
    column-gap: 6rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.user_guide .ug_col2 .half_col2 {
    width: calc(50% - 3rem);
}


.ug_col2 .container {
            width: 100%; /* コンテナの幅 */
            overflow: hidden; /* はみ出た部分を隠す */
            transition: max-height 0.3s ease; /* アニメーション効果 */
            margin: 2rem 0;
        }

.ug_col2 .content {
            max-height: 0px; /* 半分だけ表示 */
            overflow: hidden; /* はみ出た部分を隠す */
            transition: max-height 0.3s ease; /* アニメーション効果 */
        }

.ug_col2 .content p {
        text-align: justify;
}

.ug_col2 input[type="checkbox"] {
            display: none; /* チェックボックスを非表示 */
        }

.ug_col2 label {
    position: relative;
            cursor: pointer;
            display: block;
            background-color: #e4fccc;
            padding: 1rem;
            text-align: center;
        }

.ug_col2 label::after {
    position: absolute;
    top: 50%;
    right: 1rem;
    content: "\f13a";
    font-weight: bold;
    font-family: FontAwesome;
    transform: translate(0, -50%);
}

        /* チェックボックスがチェックされたときのスタイル */
.ug_col2 input[type="checkbox"]:checked + label + .content {
            max-height: 300px; /* 全部表示 */
        }



@media screen and (orientation: portrait) and (max-width: 767px){
    
    .user_guide .ug_col2 {
    display: block;
    margin-top: 3rem;
}

.user_guide .ug_col2 .half_col2 {
    width: 100%;
}
    
    .ug_col2 label {
            padding: 1rem;
            text-align: left;
        }
    
    .ug_col2 label::after {
    right: .5rem;
}
    
}