@charset "utf-8";


/* ==================================================================
	plan.css
	
=================================================================== */

/* --------------------------------
   □ accentarea
-------------------------------- */ 
.contents main > .accent{
    background: url(../../images/plan/title_bg.jpg) center / cover;
}

/* --------------------------------
   □  course
--------------------------------*/
#course{
    margin-top: 86px;
    padding-top: 0;
    text-align: left;
}

#course .lv3 .badge{
    font-size: 57.14%;
    font-weight: 400;
    color: #fff;
    background-color: #0388C4;
    padding: 2px 16px;
    border-radius: 20px;    
    display: inline-block;
    text-align: center;
    margin-left: 100px;
}

#course ul.list{
    border-bottom: 1px solid #C7C7C7;
    padding-bottom: 31px;    
}

#course ul.list li{
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 0.8em;
}

#course .pricearea{
    padding-top: 30px;
    margin-bottom: 30px;
}

#course .pricearea p.fee{
    font-size: 112.5%;
    font-weight: 700;
    margin-bottom: 0.5em;
}

#course .pricearea p.fee .number{
    font-size: 155.55%;
    font-weight: 700;
    color: #0388C4;
}

#course .pricearea p.caution{
    line-height: 2;
}

#course p.buttonStyle a{
    width: 100%;
}

#course .imagearea a{
    color: #202020;
    text-decoration: none;
}

#course .imagearea p.image{
    margin-bottom: 0;
    overflow: hidden;
}

#course .imagearea p.image img{
    box-shadow: 1px 1px 5px #c7c7c7;
    box-shadow: 1px 1px 5px #c7c7c7;
    transition: 1s all;
}

#course .imagearea a:hover p.image img{
    transform: scale(1.2,1.2);
    transition: 1s all;
}

    /* --------------------------------
       □  .sub_container
    --------------------------------*/ 
    .sub_container{
        border-bottom: 1px solid #C7C7C7;
        padding: 72px 0;
    }

        .sub_container:first-child{   
            padding-top: 0;
        }

        .sub_container:last-child{   
            border-bottom: none;
            padding-bottom: 0;
        }

        .cf:before, .cf:after{
            content:"";
            display:table
        }

        .cf:after{ clear:both }

/* --------------------------------
   □  place
--------------------------------*/ 
#place{
    padding-bottom: 105px;
}

#place .caution{
    margin-bottom: 10px;
}

#place table.tableStyle{
    width: 523px;
    height: auto;
    margin: 0 50px 0 0;
    float: left;
}

#place table.tableStyle th{
    width: 120px;
    font-size: 137.5%;
    text-align: center;
}

#place table.tableStyle td{
    font-size: 93.75%;  
}

#place table.tableStyle td li{
    margin-bottom: 0.5em;
    text-indent: -1em;
    padding-left: 1em;
}

#place .map{
    width: 537px;
    float: right;
}

#place .sub_container#place1{   
    padding-top: 0;
}

#place .sub_container#place2{   
    border-bottom: none;
    padding-bottom: 0;
}

#place .caution a{
    color: #202020;
}

#place .caution a:hover{
    color: #ccc;
    text-decoration: underline;
}

/* --------------------------------
   □  詳細ページ
-------------------------------- */ 

    /* --------------------------------
       □  overview
    -------------------------------- */ 
    #overview{
        padding-top: 0;
    }

    #overview .lv3.text-center{
        text-align: center;
        margin-bottom: 76px;
    }

    #overview ul.list li{
        line-height: 2;
        text-indent: -1em;
        padding-left: 1em;
        margin-bottom: 0.5em;
    }

    /* --------------------------------
       □  course_detail
    -------------------------------- */ 
    #course_detail .bg_white{
        padding: 67px 50px;
        margin-bottom: 108px;
        border-bottom: none;
    }

        #course_detail .bg_white:last-child{
            margin-bottom: 174px;
        }

    #course_detail .bg_white .lv5{
        text-align: center;            
        margin-bottom: 59px;
    }

    #course_detail .bg_white .lv5 span{
        background: url(../../images/common/title_border.png) no-repeat 50% 100%;
        padding-bottom: 15px;
    }

    #course_detail .bg_white p.big{
        font-size: 112.5%;
        line-height: 2;
        text-align: center;
        margin-bottom: 0;
    }

    #course_detail .bg_white ul.list{
        margin-top: 50px;     
    }

    #course_detail .bg_white ul.list li{
        font-size: 93.75%;
        text-indent: -1em;
        padding-left: 1em;
        margin-bottom: 1em;
        line-height: 1.8;
    }
    
    #course_detail .bg_white table.tableStyle.glay{
        margin: 40px auto 15px;  
    }

    #course_detail .bg_white table.tableStyle.glay th{
        width: 150px;
        min-width: 150px;
    }

    #course_detail .bg_white p.caution{
		margin-bottom: 60px;
	}

    #course_detail .bg_white ul.buttonArea{
        text-align: center;
    }

    #course_detail .bg_white ul.buttonArea li{
        margin-right: 27px;
        display: inline-block;
        width: 216px
    }

        #course_detail .bg_white ul.buttonArea li:last-child{
            margin-right: 0;
        }

    #course_detail .bg_white ul.buttonArea li a{
        padding: 18px 60px;
        width: 100%;
    }

    #course_detail .bg_white .annotation{
        margin-bottom: 55px;
        text-align: center;
    }



@media only screen and
(max-width : 767px) {

    .sub_container {
        padding: 50px 0;
    }
    
    .pagenav_area .pagenav li{
        margin-bottom: 1em;
    }
    
    /* --------------------------------
       □  course
    -------------------------------- */ 
    #course{
       margin-top: 30px; 
    }   
    
    #course .lv3{
        margin: 20px 0 10px 0;
    }
    
    #course .lv3 .badge {
        padding: 2px 10px;        
        margin-left: 10px;
        vertical-align: middle;
    }
    
    #course ul.list {
        border-bottom: none;
        padding-bottom: 10px;
    }
    
    #course .textarea ul.list li{
        font-size: 87.5%;
    }
    
    #course .pricearea {
        padding-top: 0;
    }
    
    #course .pricearea p.fee {
        font-size: 100%;
    }
   
    /* --------------------------------
       □  place
    -------------------------------- */
    #place{
        padding-bottom: 60px;
    }

    #place table.tableStyle{
        width: auto;
        margin-bottom: 20px;
    }
    
    #place table.tableStyle th{
        width: 25%;
        min-width: auto;
        font-size: 100%;
    }
    
    #place table.tableStyle td{
        width: auto;
        min-width: auto;
    }
      
    #place .map{
        width: auto;
        height: auto;
        float: none
    }
        
    /* --------------------------------
    □  詳細ページ
    -------------------------------- */ 

        /* --------------------------------
           □  overview
        -------------------------------- */ 
        #overview .lv3.text-center{            
            margin-bottom: 20px;
            font-size: 150%;
        }
        
        #overview .lv5{            
            margin-bottom: 20px;
            font-size: 125%;
        }
    
        /* --------------------------------
           □  course_detail
        -------------------------------- */     
        #course_detail .bg_white{
            padding: 50px 15px 30px 15px;
            margin-bottom: 60px;
        } 
    
        #course_detail .bg_white:last-child {
            margin-bottom: 0;
        }
    
        #course_detail .bg_white .lv5{            
            margin-bottom: 40px;
            font-size: 125%;
        }
    
        #course_detail .bg_white p.big {
            line-height: 1.6;
        }

        #course_detail .bg_white table.tableStyle.glay{
            width: 100%;
        }

        #course_detail .bg_white table.tableStyle.glay th,
        #course_detail .bg_white table.tableStyle.glay td{
            display: block;
            width: auto;
        }

		#course_detail .bg_white p.caution{
			margin-bottom: 40px;
		}
	
        #course_detail .bg_white ul.list {
            margin-top: 25px;
        }

        #course_detail .bg_white .annotation {
            margin-top: 15px;
            margin-bottom: 0;
            text-align: left;
        }

        #course_detail .bg_white ul.buttonArea{
            width: 100%;
        }

        #course_detail .bg_white ul.buttonArea li{
            display: block;
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }

    
}