@charset "utf-8";

/*
* 全体共通 設定
*/

/* 
* 画面幅 設定
*/
#container{
    max-width: 1280px;
    margin: 0px auto;
}
.contents{
    max-width: 780px;
    margin: 0px auto;
}

/*共通コンテンツ 設定*/
.div_table_2column{
    background: #f5f5f5;
    margin: 30px 0px;
    padding: 10px;
}

/*共通エリア 設定*/

/*div_table_areaのみ個別設定*/
.div_table_area{
    margin: 10px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}

/*フォント指定*/
body{
    font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Courier',sans-serif;
}

/*パンくず設定*/
.breadcrumb{
    padding-top: 10px;
}
.breadcrumb ol{
    display: flex;
    background: #f5f5f5;
    padding: 5px 0px 5px 5px;
} 
.breadcrumb li{
    list-style: none;
} 
.breadcrumb li:after {
    content: "\03e";
    padding: 0 0.2em;
    color: #555;
} 
.breadcrumb li:last-child:after {
    content: '';
} 
.breadcrumb li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
} 
.breadcrumb li a:hover {
    text-decoration: underline;
}
.breadcrumb .now_li{
    font-weight: bold;
    font-size: 15px;
    padding-top: 2px;
}

/*instructor,photograph 設定*/
.instructor,.photograph{
    background: #f5f5f5;
    margin: 30px 0px;
    padding: 10px;
}
.instructor_area,.photograph_area{
    margin: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}
.instructor_box,.photograph_box{
    display: flex;
    padding: 10px;
    background: #fff;
    border: solid 2px #dcdcdc;
    position:relative;
}
.instructor_box .box_link,.photograph_box .box_link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.instructor_box:hover,.photograph_box:hover{
    border: solid 2px #666;
}
.instructor_images,.photograph_images{
    width: 30%;
    display: flex;
    align-items: center;
}
.instructor_images img,.photograph_images img{
    width: 100%;
}
.instructor_text,.photograph_text{
    flex: 1;
    padding-left: 10px;
}
.instructor_title h3,.photograph_title h3{
    font-weight: bold;
    text-align: center;
}
.instructor_text p,.photograph_text p{
    font-size: 14px;
}

/*instagram設定*/
.instagram{
    background: #f5f5f5;
    margin: 30px 0px;
    padding: 10px;
}
.instagram_area{
    margin: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}
.instagram_box{
    display: flex;
    padding: 10px;
    background: #fff;
    border: solid 2px #dcdcdc;
    position:relative;
}
.instagram_box .box_link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.instagram_box:hover{
    border: solid 2px #666;
}
.instagram_images img{
    width: 100%;
}

/* news 設定 */
.news{
    background: #f5f5f5;
    margin: 30px 0px;
    padding: 10px;
}
.news_area{
    margin: 5px;
}
.news_box{
    display: flex;
    align-items: center;
    border-bottom: solid 1px #dcdcdc;
    margin: 5px;
    background: #fff;
    position:relative;
}
.news_box .info_link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}
.news_box:hover{
    border-bottom: solid 1px #666;
}
.news_top{
    display: flex;
    align-items: center;
    padding: 5px 5px 5px 15px;
}
.news_flag{
    background: #999;
    border-radius: 5px;
    width: 100px;
    text-align: center;
    padding: 3px 0px;
}
.news_flag span{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.news_date{
    margin-left: 10px;
}
.news_title{
    padding: 10px 0px;
    margin-left: 10px;
    flex: 1;
}
.news_title h2{
    font-weight: bold;
    font-size: 18px;
}
.news_index{
    text-align: right;
}
.news_index a{
    font-weight: bold;
    color: #666;
}
.news_index a:hover{
    color: #333;
}
/*
* 見出し設定
*/

/*topの見出し*/
.top_h2{
    font-size: 1.75rem;
    color: #666;
    border-bottom: solid 3px #666;
    max-width: 480px;
    margin-left: 15%;
    margin-top: 40px;
}

/*page_h2,post_h2*/
.page_h2,.post_h2,.page2_h2{
    margin-top: 20px;
    font-size: 1.75rem;
    color: #666;
    border-bottom: solid 3px #666;
    text-align: center;
    font-weight: bold;
}
/*page_h2_span*/
.page_h2_span,.page_h2_span{
    padding-right: 10px;
    font-weight: bold;
}

/*category_h3*/
.category_h3{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.category_sub_h3{
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 14px;
    color: #666;
}

/*child_category_h3*/
.child_category_h3{
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.child_category_sub_h3{
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 15px;
    color: #666;
}
.child_category_p{
    font-size: 14px;
    padding: 0px 10px;
    color: #666;
}

/*pタグの設定*/
.bold_p{
    font-weight: bold;
}
.bold_p_2{
    font-weight: bold;
    padding-top: 15px;
}

/*
* header 設定
*/
.header_logo{
    width: 320px;
    margin: 10px auto;
    text-align: center;
}
.header_logo img{
    width: 80%;
}

/*
* main 設定
*/
#main{
    padding: 10px 20px;
}
.main_top_image{
    max-width: 780px;
    margin: 0px auto;
}
.main_top_image img{
    width: 100%;
}
/*
* footer 設定
*/
footer{
    padding: 70px 70px 30px;
    background: #dcdcdc;
}
.footer_contents{
    padding: 0px 100px;
    background: #fff;
    padding: 20px 10px;
    border-radius: 10px;
}
.footer_box{
    display: flex;
    align-items:flex-end;
    padding: 0px 30px;
}
.footer_images{
    width: 30%;
}
.footer_images img{
    width: 100%;
}
.footer_menu{
    flex: 1;
}
.footer_menu ul{
    display: flex;
    justify-content: end;
    list-style: none;
}
.footer_menu li{
    margin: 0px 5px;
    
}
.footer_menu li a{
    font-weight: bold;
    font-size: 15px;
    color: #666;
}
.copy p{
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #666;
}

/*
* 共通設定
*/

/*各種top 設定*/
.top_text p{
    padding: 20px 10px 0px;
}
.span_bold{
    font-weight: bold;
}
/*２カラム*/
.div_table_box{
    display: flex;
    border: solid 1px #ddd;
}
.div_table_th{
    background: #f4f4f4;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.div_table_th p{
    font-weight: bold;
    color: #666;
}
.div_table_td{
    flex: 1;
    padding: 10px;
}
.div_table_td p{
    color: #666;
}
.div_table_td ul,.div_table_td ol{
    padding: 0px 20px;
    color: #666;
}
/*tos,booking 設定*/
.tos,.booking{
    background: #f5f5f5;
    margin: 30px 0px;
    padding: 10px;
}
.tos_area,.booking_area{
    margin: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}
.tos_box{
    background: #d6cece;
    padding: 20px;
    margin: 10px 20px;
    border-radius: 10px;
}
.booking_box{
    background: #83C7CE;
    padding: 20px;
    margin: 10px 20px;
    border-radius: 10px;
}
.tos_text,.booking_text{
    padding-top: 10px;
}
.tos_text p,.booking_text p{
    color: #fff;
    font-weight: bold;
    text-shadow:  1px 1px #666;
}
.tos_link p,.booking_link p{
    background: #fff;
    width: 180px;
    margin: 30px auto 10px auto;
    border-radius: 10px;
    text-align: center;
}
.tos_link a,.booking_link a{
    display: block;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 20px;
}
.tos_link a:hover,.booking_link a:hover{
    color: #3489CA;
}

/*
* レスポンシブデザイン
*/
@media screen and (min-width:480px) and ( max-width:700px) {
    /* 画面サイズが768pxから1024pxまではここを読み込む */
    .top_h2{
        font-size: 25px;
        margin-left: 0px;
        text-align: center;
    }

    /*２カラム*/
    .div_table_box p{
        font-size: 14px;
    }
    .div_table_td ul li{
        font-size: 14px;
    }

    /*footer*/
    .footer_box{
        flex-direction: column;
    }
    .footer_images{
        width: 60%;
        margin: 0px auto;
    }
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用) */
    .top_h2{
        font-size: 25px;
        margin-left: 0px;
        text-align: center;
    }

    .page_h2{
        margin-top: 10px;
    }
    .page2_h2{
        font-size: 27px;
    }
    #main{
        padding: 10px;
    }
    /*top_text*/
    .top_text{
        padding-top: 10px;
    }
    .top_text p{
        padding: 0px 10px 5px 10px;
        font-size: 14px;
    }

    /*instructor 設定*/
    .instructor,.photograph{
        margin-top: 10px;
    }
    .instructor_area,.photograph_area{
        margin: 0px;
    }
    .instructor_box,.photograph_box{
        flex-direction: column;
    }
    .instructor_images,.photograph_images{
        width: 100%;
    }
    .instructor_text, .photograph_text{
        padding: 0px 5px;
    }
    /*２カラム*/
    .div_table_area{
        padding: 5px;
        margin: 0px;
    }
    .div_table_box p{
        font-size: 14px;
    }
    .div_table_td ul li{
        font-size: 14px;
    }
    .div_table_2column{
        padding: 0px;
    }
    .div_table_th .small_p{
        font-size: 12px;
    }

    /*tos booking設定*/
    .tos,.booking{
        margin: 10px 0px;   
    }
    .tos_area,.booking_area{
        margin: 0px;
    }
    .tos_box,.booking_box{
        margin: 0px;
        padding: 10px;
    }
    .tos_text,.booking_text{
        padding-top: 0px;
    }
    .tos_text p,.booking_text p{
        font-size: 14px;
    }
    .tos_link p, .booking_link p{
        margin-top: 15px;
    }
    /*footer*/
    footer{
        padding: 20px;
    }
    .footer_box{
        flex-direction: column;
        padding: 0px 10px;
    }
    .footer_images{
        width: 60%;
        margin: 0px auto;
    }
    .footer_menu{
        width: 100%;
    }
    .footer_menu ul{
        justify-content: center;
    }
    .footer_menu li a{
        font-size: 14px;
    }
}