@charset "utf-8"; /* 文字エンコーディングをUTF-8に指定 */

/* 共通項目デザイン */

body {
    font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
    color: #777777; /* 標準文字色 */
    background-image: url(../kyoutuu/mouse_and_mouse.png);
}

header {
    border-top: 10px solid #509999; /* 上ボーダーに10px、実践、エメラルド色（#109999）を指定 */
    width: 940px; /* 全体の幅を940pxに指定 */
    background-color: rgb(233, 248, 250);
    padding: 5px 5px 5px 5px;
    margin: 0 auto 0 auto;
}

header>p {
    font-size: 12px;
    margin: 0 0 0 0;
}

main {
    width: 940px; /* 全体の幅を940pxに指定 */
    padding: 5px 5px 5px 5px;
    margin: 0 auto 0 auto;
    background-color: rgb(233, 248, 250);
}

footer {
    width: 940px; /* 全体の幅を940pxに指定 */
    margin: 0 auto 0 auto;
}

aside, aside > p {
    border-width: 1px;
    border-style: solid;
    border-color: #bbbbbb;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
}

aside {
    margin: 20px 35px 20px 20px;
}

aside > p {
    margin: 20px 20px 20px 20px;
}

#head {
    margin: 5px 30px 5px 15px;
    display: flex;
}

#headerLogo {
    flex-basis: 500px;
}

#tel {
    flex-basis: 400px;
    font-size: 12px;
    margin: 40px 0 0 0;
    text-align: right;
    height: 2em;
}

header h1 {
    margin: 5px 0 5px 0; /* 上5px、右0px、下5px。左0px　のマージンを設定 */
    text-align: left; /* 内容を左ぞろえに */
}

header nav ul { /* リスト */
    padding-left: 0; /* デフォルトスタイルをリセット */
    margin: 0 30px 10px 30px; /* 上　0px。右　auto、下　30px、左　auto */
    list-style-type: none; /* リストマーカーを消す */
    display: flex;
}

header nav ul li { /* リスト項目 */
    text-align: center; /* テキストを中央揃え */
    display: block; /* ブロックレベル表示 */
    flex-basis: 110px;
}

.nul {
    flex-basis: 10px;
    border: 2px;
    border-style: solid;
    border-color: rgb(95, 94, 94);
    border-radius: 10px;
}
.nul_color1,
.nul_color5 {
    background-color: #7eceba;
}
.nul_color2,
.nul_color6 {
    background-color: #d6a1d8;
}
.nul_color3,
.nul_color7 {
    background-color: #e9eb7f;
}
.nul_color4,
.nul_color8 {
    background-color: #7ee9fc;
}

.logo_mousejuku {
    width: 500px;
}

header nav ul li:last-child { /* 最後の項目 */
    margin-right: 0; /* 右マージンを0に指定 */
}

header nav ul li a {
    text-decoration: none; /* 下線を消す */
    background-color: #509999; /* 背景色をエメラルド色に */
    color: #fff; /* 文字の色を白に */
    padding: 10px 0; /* パディング　上下10px、左右0px */
    display: block; /* ブロックレベル表示 */
    border: 2px;
    border-style: solid;
    border-color: rgb(95, 94, 94);
    border-radius: 10px;
}

header nav ul li a:hover, /* マウスポインターを乗せたとき */
header nav ul li a:active, /* クリックしたとき */
header nav ul li.current a { /* 現在のページの時 */
    background-color: #056670;
}

footer {
    background-color: #509999;
    color: #fff;
    padding: 20px 5px;
    text-align: center; /* 中央揃え */
}

footer ul {
    padding: 0;
    margin-bottom: 30px;
}

footer ul li {
    display: inline; /* インライン表示で横並びに */
    margin: 0 10px;
}

footer ul li a {
    color: #fff;
}

footer ul li a:link,
footer ul li a:visited {
    text-decoration: none; /* 下線を消す */
}

footer ui li a:hover,
footer ul li a:hover {
    text-decoration: underline; /* 下線を表示する */
}

main {
    width: 940px;
    margin: 0 auto; /* 横のマージンをautoにして中央に配置 */
}

#topic_path {
    padding-left: 0;
    margin-left: 40px;
}

#topic_path li {
    list-style-type: none;
    display: inline;
    font-size: 80%;
}

#topic_path li:after {
    padding 0 10px;
    content: "\003E"; /* 大なり記号を挿入 */
}

#topic_path li:last-child:after { /* 最後のli要素のうしろ */
    content: none;
}

main a:link,
main a:visited {
    color: #511717;
}

main h1 {
    border-left: 10px solid #511717; /* 左ボーダーを 10px の幅の実線を茶色で */
    border-bottom: 1px solid #511717; /* 下ボーダーを 1px の幅の実線を茶色で */
    padding: 5px 10px; /* 上下 5px 左右 10px のパディング */
    margin-bottom: 30px; /* 下マージンを 30px */
    font-size: 1.8em;
}

main h2 {
    font-size: 1.5em;
    position: relative; /* 基準位置 */
    margin-bottom: 30px;
    margin-right: 50px;
    margin-left: 40px;
    border-left: 10px solid #511717;
    border-bottom: 1px solid #511717;
    padding: 5px 10px;
}

main h3 {
    font-size: 1.2em;
    text-align: center;
    position: relative; /* 基準位置 */
    margin-bottom: 30px;
}

main h2:before,
main h2:after {
    position: absolute; /* 絶対配置 */
    content: ""; /* 空の挿入 */
    border-top: 1px dotted #511717;
    width: 350px;
    top: 50%;
}

main h2:before {
    left: 0;
}

main h2:after {
    right: 0;
}

.page_top {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 10px;    
}

.page_top a {
    padding-top: 4px;
    border-top: 4px solid #511717;
}
.page_top a:before {
    content: "↑"; /* 上向きの矢印 */
}

.page_top a:link,
.page_top a:visited {
    color: #511717;
    text-decoration: none;
}

.lead {
    line-height: 1.8em;
    margin:0 60px 40px 60px;
    font-size: 100%
}

main #dot_line {
    display: block;
    margin: 0 auto;
}

iframe {
    margin: 0 40px 0 40px;
}





/* 各ページデザイン */
/* トップページデザイン index.html */

#main_visual {
    margin-bottom: 0px;
    text-align: center;
}

.top_main {
    display: flex;
}

#main_content {
    flex: 2;
}

#banner {
    flex: 1;
}

.top_main #main_content #info h2,
.top_main #main_content #news h2 {
    margin-right: 0;
}

#home main h2:before,
#home main h2:after {
    border-top: none; /* 挿入してあったボーダーを消す */
}

#news dl, #info p {
    margin-left: 50px;
    margin-bottom: 30px;
    font-size: 14px;
}

#news dt,
#news dd {
    line-height: 1.2; /* 行の高さを揃える */
}

#info p {
    line-height: 1.5; /* 行の高さを揃える */    
}

#news dt {
    width: 8em;
    float: left;
}

#news dd {
    margin-left: 9em;
}

#banner ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#banner ul li {
    margin-bottom: 20px;    
}

aside {
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    padding: 5px;
}

aside ul #banner_img {
    margin-bottom: 1px;
    font-size: 10px;
}

aside ul #banner_text {
    font-size: 10px;
}

#info2 dt {
    width: 5em;
    margin-bottom: 7px;
    text-align: right;
    padding-right: 5px;
    float: left;
    font-size: 14px;
}

#info2 dd {
    margin-left: 6em;
    margin-bottom: 7px;
    text-align: left;
    font-size: 14px;
}

aside > p {
    font-size: 20px;
    text-align: center;
}






/* 目標と方針ページのデザイン policy.html */

#pol_inside {
    display: flex;
    margin-left: 40px;
    margin-right: 40px;
}

.lbox_policy,
.rbox_policy {
    width: 430px;
    padding: 0 20px 0 20px;
    flex: 1;
}

#l_photo,
#r_photo {
    width: 390px;
    height: 292px;
    display: block;
    border: 5px solid #fff;
    box-sizing: border-box; /* 幅の算出にボーダーを含める */
    box-shadow: 0 0 8px rgba(0,0,0,0.22); /* 影を付ける */
} 

#l_text,
#r_text {
    font-size: 5px;
    text-align: center;
    margin-bottom: 50px;
}

.lbox_policy h3
.rbox_policy h3 {
    text-align: center;
    margin: 0 auto;    
}

.p_lead {
    font-size: 0.9em;
    line-height: 1.8;
}





/* 講習内容ページのデザイン program.html */

.pro_upper,
.pro_lower {
    display: flex;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
}

.box_pro {
    flex: 1;
}

.box_pro:last-child { /* 最後の.BOX */
    margin-right: 0;
}

.pro_photo {
    width: 270px;
    height: auto;
    display: block;
    border: 5px solid #fff;
    box-sizing: border-box; /* 幅の算出にボーダーを含める */
    box-shadow: 0 0 8px rgba(0,0,0,0.22); /* 影を付ける */
}

.pro_lead {
    padding-left: 10px;
    padding-right: 10px;
}

.box_program h3 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}





/* 入塾のご案内ページのデザイン entrance.html */
/* テーブルをスタイリング */

table {
    border-collapse: collapse;
    margin: 0 auto 30px;
    border: 1px solid #813737;
}

table th, table td {
    padding: 10px 20px;
}

table th {
    border-right: 1px solid #813737;
    font-weight: normal;
    text-align: left;
}

table td {
    text-align: right;
}

table tr:nth-child(odd) { /* 奇数行ごとに */
    background-color: #e1cfba;    
}

#td_last,#th_last {
    text-align: center;
}

#entrance_ul {
    margin-bottom: 3em;
    margin-left: 20px;
}

ul li {
    list-style-type: none; /* リストマーカーを消す */
}






/* まうす塾情報ページのデザイン information.html */

.info_info {
    width: 500px;
    margin: 0 auto;
    line-height: 1;
    border-collapse: collapse;
    border: 1px solid #813737;
}

.info_info .info_lr td:nth-child(1) {
    width: 100px;
    border-right: 1px solid #813737;
}

.info_info .info_lr td:nth-child(2) {
    width: 400px;
    text-align: left;
}

.info_info tr:nth-child(odd) {
    background-color: #f7ebdd;
}

.info_info tr:nth-child(even) {
    background-color: #e2f7d2;
}





/* リンクページのデザイン link.html */

.link_page {
    margin-bottom: 0;
}

#link_txt /*#banner_link ul li a */ {
    width: 130px;
    line-height: 2em;
    font-size: 2em;
    text-decoration: none; /* 下線を消す */
    color: #fff; /* 文字の色を白に */
    padding: 5px 0; /* パディング　上下5px、左右0px */
    display: block; /* ブロックレベル表示 */
    margin-left: 3.5em;
}

/*#banner_link ul li a:hover, /* マウスポインターを乗せたとき */
#banner_link ul li a:active, /* クリックしたとき */
#banner_link ul li.current a { /* 現在のページの時 */
    background-color: #056670;
}

.l_main {
    display: flex;
    align-items: flex-start;
}

#main_link {
    flex: 2;
    width: 600px;
}

#banner_link {
    flex: 1;
    width: 260px;
    font-size: 12px;
}

.l_main #main_link #news_link h2, 
.l_main #main_link #info_link h2 {
    margin-right: 0;
} 

#news_link dl, #info p {
    margin-bottom: 30px;
    margin-left: 50px;
    font-size: 14px;
}

#news_link dt, #news_link dd,
#info_link p {
    line-height: 1.5; /* 行の高さを揃える */    
}

#info_link p {
    margin-left: 50px;    
}

#news_link dt {
    width: 115px;
    float: left;
    border-top: 1px;
    border-top-style: solid;
}

#news_link dd {
    margin-left: 115px;
    margin-bottom: 20px;
    border-top: 1px;
    border-top-style: solid;
}

#banner_link ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: rgb(233, 248, 250);
}

aside ul li img {
    margin-bottom: 1px;
    text-align: center;
}

aside ul #banner_linktext {
    font-size: 10px;
    margin-bottom: 20px;
}

aside ul #link_text {
    text-align: center;
    margin-bottom: 15px;
}

aside > p {
    font-size: 20px;
    background-color: antiquewhite;
    margin-bottom: 30px;
}

#link_text {
    font-size: 18px;
}

#banner_linkimg {
    margin: 0;
}

.link_img {
    width: 150px;
}





/* お問い合わせページのデザイン contact.html */

#contact form {
    width: 820px;
    margin: 0 auto;
}

#contact dl dt, #contact dl dd {
    line-height: 2em;
    margin-left: 0;
}

#contact dl dt {
    width: 380px;
    float: left;
    text-align: right;
    padding: 10px;
}

#contact dl dd {
    width: 400px;
    float: right;
    padding: 10px;    
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    padding: 5px;
    width: 300px;
}

#contact textarea {
    height: 5em;
}

#contact .button {
    text-align: center;
}

#contact input[type="submit"],
#contact input[type="reset"] {
    background-color: #509999;
    color: #fff;
    padding: 10px 30px;
    margin: 0 30px 0 50px;
    font-family: "Yu Gothic",YuGothic, sans-rerif;
    border: 1px solid #511717;
    cursor: pointer; /* カーソルをポインターに */
}