@charset "utf-8";
/* CSS Document */
#planTable {
    width: 100%;
    margin: 10px auto;
    border: 1px solid #f29438;
    border-collapse: collapse;
    overflow: scroll;
}

#planTable th,
#planTable td {
    padding: 10px;
    width: 50%;
}

section.plan {
    margin: 40px 10px 60px;
    padding-bottom: 10px;
}

section.plan h3 {
    padding: 10px;
}

section.plan p, 
section.plan small {
    padding: 0 10px 10px;
}

.premiumPlan {
    background: #444;
    color: #fff;
    border: 2px solid #ffcc66;
}

.premiumPlan img.smartPhoneImg {
    width: 100%;    /* sectionにborderを入れたためhtml直打ちの300px指定だとはみ出してしまうことへの対策 */
    height: auto;
}

.standardPlan, .dayPlan {
    border: 1px solid #ffaa66;
    border-radius: 12px;
/*    box-shadow: 3px 3px 3px #aaa;*/
}

/*
.dayPlan {
    background: #ff8;
    border-radius: 12px;
    box-shadow: 3px 3px 3px #aaa;
}
*/

.studentPlan {
    background: #fff;
    position: relative;
    border-radius: 12px;
    border: 1px solid #aaa;
}

.studentPlan h3 {
    background: #009;
    color: #fff;
    border-radius: 12px 12px 0 0 ;
}

.studentPlan p {
    
}

.sonotsudoPlan {
    position: relative;
    border: 2px solid #ffaa66;
    z-index: 2;
/*    box-shadow: 3px 3px 3px #aaa;*/
}

.sonotsudoPlan::after {
    content: "";
    display: block;
    position: absolute;
    top: -6px;
    left: -6px;
    right: 3px;
    bottom: 3px;
    border: 2px solid #ffff66;
    z-index: -1;
}

p.planCaption {
    font-size: 12px;
}

/* 上マージン解除 */
#plans p.button {
    margin-top: 20px;
}

/* 連携施設モーダル */
#renkei {
    display: none;
}

#renkeiH3 {
    margin-bottom: 20px;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before{
	background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.modaal-content-container {
    padding: 20px 10px;
}

.modaal-container {
    border-radius: 12px;
    width: calc(100% - 40px);
/*    max-width: 60vw;*/
    text-align: center;
}

/* モーダルの中身の装飾。スマホではdl,dt,dd要素で表示 */
.desktopAppear {
    display: none;
}

#renkeiDL dt {
    font-size: 18px;
    border-bottom: 1px solid #f29438;
}

#renkeiDL dd {
    margin-bottom: 40px;
}

/* デスクトップ表示 */
@media screen and (min-width: 768px) {
    #planTable {
        max-width: 800px;
    }
    
    /* モーダルの横幅が大きすぎるので調整 */
    .modaal-container {
        border-radius: 12px;
        width:75vw;
        max-width: 960px;
        text-align: center;
}
    
    /* デスクトップでは連携施設をテーブル表示 */
    dl.smartPhoneAppear {
        display: none;
    }
    
    table.desktopAppear {
        display: block;
    }
    
    #renkeiTable {
        max-width: 660px;
        margin: 0 auto;
    }
    
    #renkeiTable th {
        width: 33%;
    }
    
    #renkeiTable td {
        width: 66%;
        text-align: left;
    }
}