@charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; text-align: left; color: #444; } /* ---------------------------------------------------   Clearfix --------------------------------------------------- */ /* For modern browsers */ .cf::after{ content: ""; display: block; clear: both; } /* ---------------------------------------------------   一般 --------------------------------------------------- */ html{ overflow-y: scroll; display: block; } body{ padding: 0; margin: 0; background-color: #fda; /* background-image: url(images/back.png); background-position: center top; background-attachment:fixed; background-repeat: no-repeat; */ font-size: 16px; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; /* font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif; */ } #container{ width: 740px; min-height: 1300px; margin: 0 auto; height: 100%; padding: 0 30px; background-color: white; } #header{ height: 80px; } #header h1{ text-indent: -10000px; background-image : url(../images/title.gif); background-repeat: no-repeat; background-position: left 16px; height: 70px; width: 325px; border-color: #CCC; float: left; } /* -----------------------------------------------------------   group name ----------------------------------------------------------- */ #group_name{ text-indent: -10000px; height: 120px; background-color: #FFF; margin: 0 0 20px 0; } #home #group_name{ text-indent: 0px; height: 240px; } #intro #group_name{ background-image : url(../images/groupe_name/introduction_gn.jpg); } #teach #group_name{ background-image : url(../images/groupe_name/teaching_gn.jpg); } #event #group_name{ background-image : url(../images/groupe_name/event_gn.jpg); } #student #group_name{ background-image : url(../images/groupe_name/student_gn.jpg); } #info #group_name{ background-image : url(../images/groupe_name/info_gn.jpg); } #uneikyogikai #group_name{ background-image : url(../images/groupe_name/uneikyogikai_gn.jpg); } #shienhonbu #group_name{ background-image : url(../images/groupe_name/shienhonbu_gn.jpg); } #shinseisho #group_name{ background-image : url(../images/groupe_name/shinseisho_gn.jpg); } #other #group_name{ background-image : url(../images/groupe_name/other_gn.jpg); } #rescue #group_name{ background-image : url(../images/groupe_name/other_gn.jpg); } contents{ width: 740px; padding: 2em 0; background-image : url(../images/contents_back.gif); background-repeat: no-repeat; background-position: right 60px; } /* -----------------------------------------------------------   left link ----------------------------------------------------------- */ #left_link{ width: 200px; float: left; } #left_link p{ margin: 0!important; } #left_menu{ width: 200px; float: left; } #left_menu ul{ margin: 0 0 18px 0; } #left_menu li{ line-height: 32px; /* border-bottom: #999 solid 1px; */ list-style: none; } #left_menu li a{ display: block; /* height: 32px; */ background-color: #fff7f7; /* padding: 2px 8px 0;*/ /* margin: 0;*/ /* background-image: url(images/left_menu_back.jpg); */ color: #777; letter-spacing: 0; border: none; box-shadow: inset 0 -1px 1px rgba(200, 200, 200, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-radius: 5px; text-decoration: none; padding: 4px 6px; /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #dddddd), color-stop(1.00, #eee)); background: -webkit-linear-gradient(#dddddd, #fff); background: -moz-linear-gradient(#dddddd, #fff); background: -o-linear-gradient(#dddddd, #fff); background: -ms-linear-gradient(#dddddd, #fff); background: linear-gradient(#dddddd, #fff); */ } #left_menu li a:link, #left_menu a:visited {} #left_menu li a:hover{ margin: 0; background-color: #c99; /* background-image:url(images/left_menu_back_hover.jpg); padding: 2px 8px 0; */ color: #fff; text-decoration: none; } /* -----------------------------------------------------------   footer ----------------------------------------------------------- */ #footer{ margin: 1em 0; padding: 10px 0 0; border-top: solid 1px #999; line-height: 1.5em; float: left; width: 100%; } #footer_left{ width: 400px; float: left; } #footer_right{ width: 340px; float: right; text-align: right; } #footer_right ul{ margin: 0; } #footer_right li{ list-style: none; } #footer_right a{ padding-left: 15px; background-image : url(../images/go_mark.gif); background-repeat: no-repeat; background-position: center left; text-align: right; } /* -----------------------------------------------------------   navi ----------------------------------------------------------- */ #navi{ height: 30px; padding: 0px; margin: 0px auto; font-size: 1em; text-align: center; background-color: #F96; background-image : url(../images/navi_back.gif); line-height: 34px; } #navi ul{ padding: 0; margin: 0 0 0 0; text-align: center; list-style-type: none; } #navi li{ float: left; padding: 0; margin: 0; line-height: 30px; } #navi li.unei{ margin: 0 0 0 1em; } #navi li.shien{ margin: 0 0 0 1em; } #navi a{ padding: 0 8px; margin: 0; } #navi a, #navi a:link, #navi menu a:visited{ text-decoration: none; display: block; color: #fff; } #navi a:hover{ background-color: #C03; background-image : url(../images/navi_back_hover.gif); } .nav_home{ color: #fff; } /* -----------------------------------------------------------   Google feed API 関連 ----------------------------------------------------------- */ #g_feed {} .g_date{ margin: 0 0 16px 0; padding: 0 0 0 8px; border-left: 6px solid #F77; font-weight: bold; line-height: 1.0em; color: #E66; } #g_feed h3{ font-size: 2.0em; font-weight: normal; line-height: 1.2em; margin: 0 0 0.5em 0; padding: 0; border: 0; } #g_feed ul{ margin: 0; padding: 0; list-style-type: none; } #g_feed ul #feed ul{ margin: 0 0 1em 0; padding: 0; border-bottom: #C96 dotted 3px; } #g_feed ul #feed li{ margin: 0; padding: 0.5em 0; } #g_feed ul #feed li li{ margin: 2px 0 0 0; list-style-type: none; } #g_feed ul ul{ margin: 2px 0 0 1em; } #g_feed img{ margin: 10px 0; } /* -----------------------------------------------------------   その他 ----------------------------------------------------------- */ .go_site_map{ text-align: right; height: 30px; margin: 50px 0 0 0; width: 400px; float: right; } .go_site_map a{ padding-left: 15px; background-image : url(../images/go_mark.gif); background-repeat: no-repeat; background-position: center left; text-decoration: none; } .go_header{ background-image : url(../images/go_top_mark.gif); padding: 0 0 0 20px; background-repeat: no-repeat; background-position-y: 3px; float: right; margin: 10px 0 0 50px; font-size: 14px; } .section{ border-bottom: #F77 dotted 2px; padding: 0 0 16px 0; margin: 0 0 24px 0; line-height: 1.5em; } .section h4{ margin: 20px 0 24px 0; position: relative; padding: .3em .65em; background-color: #fff0f0; border-radius: 6px; } .section h4::after{ position: absolute; top: 100%; left: 20px; content: ''; width: 0; height: 0; border: 10px solid transparent; border-top: 15px solid #fff0f0; } .info_date{ font-weight: bold; } a{ color: #a33; } a:link{ text-decoration: none; } a:visited{ text-decoration: none; } a:hover{ text-decoration: underline; } a:active{ text-decoration: none; } h2{ font-size: 1.7em; margin: 0 0 8px 0; font-weight: normal; color: brown; /* font-family: "meiryo"; */ } h3{ font-size: 1.25em; margin: 1.3em 0 16px 0; padding: 0 0 0 8px; /* border-left: #FB9 solid 6px; */ border-radius: 3px; line-height: 1.2em; font-weight: normal; color: #a33; position: relative; padding:0.5em 0.5em 0.4em 1.8em; border: 1px solid #DA9; border-radius: 5px; } h3::after{ position: absolute; top: 50%; left:0.7em; transform:translateY(-50%); content: ''; width: 8px; height:8px; border: solid 2px #DA9; border-radius:100%; } h4{ margin: 20px 0 30px; font-size: 1.1em; color: brown; font-weight: 100; } ul { /* margin: 0 0 0.5em 1em;*/ } p{ color: #555; line-height: 1.5em; margin: 0 0 10px; } pre{ margin-left: 2em; line-height: 1.4em; } dl{ border-bottom: #F77 dotted 1px; margin: 0.5em 0; } dd{ margin: 0.5em 0 0.5em 2em; padding: 0.5em; } .disclaimer{ font-size: 12px; color: #F00; /* line-height: 1.3em; */ } /* -----------------------------------------------------------   下部の「もどる」、「ページの先頭へ」ボタンの設定 ----------------------------------------------------------- */ #bottomNavi{ margin: 18px auto 0; font-size: 0.8em; float: left; width: 740px; } #bottomNaviL{ float: left; } #bottomNaviL a{ background-image : url(../images/go_back_mark.gif); background-position: center left; background-repeat: no-repeat; padding: 0 0 0 18px; } #bottomNaviR{ float: right; text-align: right; } #bottomNaviR a{ background-image : url(../images/go_top_mark.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 18px; } /* -----------------------------------------------------------   定義リストの設定 ----------------------------------------------------------- */ .list_01 dl{ margin: 0; padding: 0; border-bottom: none; } .list_01 dt{ width: 8em; float: left; margin: 0; padding: 0; line-height: 1.5em; text-align: right; } .list_01 dd{ margin: 0 0 0 9em; padding: 0; line-height: 1.5em; } .img_right{ float: right; margin-left: 8px; } .img_left{ float: left; margin-right: 8px; } /* -----------------------------------------------------------   行修飾 ----------------------------------------------------------- */ .text_center{ text-align: center; } .text_right{ text-align: right; } .text_left{ text-align: left; } .go_mark{ padding-left: 19px; background-image : url(../images/go_mark.gif); background-repeat: no-repeat; background-position: 2px center; } .quote{ margin: 0 2em; padding: 40px; border: dotted 1px #FC9; } .strong_red{ font-weight: bold; color: #F00; text-align: left; } /* -----------------------------------------------------------   main content ----------------------------------------------------------- */ #page_title{ width: 500px; float: right; padding: 0 0 4px 0; margin: 0 0 0.5em 0; text-indent: -2px; border-bottom: #F77 dotted 2px; } #main_content{ width: 500px; float: right; } #main_content li{ line-height: 1.5em; margin: 0 0 0.2em 1.5em; list-style: disc; line-height: 1.4em; } #main_content li ul{ margin: 0.5em 0 0.5em 0.5em; } #main_content li ul li{ margin: 0.5em 0 0.5em 1em; list-style: circle; } #main_content ol li{ line-height: 1.5em; font-weight: normal; font-size: 1em; margin: 0.5em 0 0.5em 1.5em; list-style: decimal; } #main_content ol li ul li{ line-height: 1.5em; font-weight: normal; margin: 0.5em 0 0.5em 1em; } #main_content ol ul li{ font-weight: normal; line-height: 1.3em; } #main_content ol ul ul{ line-height: 1.2em; margin: 0.5em 0 0.5em 1em; } #main_content ol ul ul li{ line-height: 1.2em; margin: 0 0 0.3em 1em; font-weight: normal; } /* -----------------------------------------------------------   table ----------------------------------------------------------- */ table{ border-collapse: collapse; } th{ padding: 6px 8px; border: 1px solid #999; background: #FC9; } td{ padding: 6px 8px; border: 1px solid #999; } #intro table{ margin: 10px 0; } #intro table td{ padding: 3px 0; } #intro td p{ font-size: 0.7em; line-height: 1.4em; margin: 0px 2px 0px; } #intro table.history_table{ padding: 0; width: 100%; } #intro .history_table td{ padding: 0px 2px 4px; line-height: 1.3em; font-size: 11px; text-align: left; vertical-align: top; } #intro .history_table td:first-child{ text-align: right; white-space: pre; padding-left : 0px; width: 10px; } #intro .history_table td:nth-child(2){ padding-right: 3px; } #intro .history_table td p{ font-size: 1em; margin: 0; padding: 0; } /* -----------------------------------------------------------   画面の横幅が567pxまで ----------------------------------------------------------- */ @media screen and (max-width:567px) { * { float: initial; } html{ font-size: 16px; } body{ background-image: none; width: 100%; } h1{ width: 100%; height: auto; } h2{ margin: 0 0; padding: 0 0 12px 0px; font-size: 1.6em; } h3{ font-size: 1.15em; line-height: 1.3em; /* border-left: #F96 solid 6px; */ margin: 24px 0; } h4{ font-size: 1.15em; } p{ font-size: 1em; line-height: 1.6em; } table{ width: 100%; } th, td{ padding: 0; } #container{ padding: 0; width: 100%; min-height: 0%; } #header{ display: blcok; height: auto; float: none; } #header h1{ /* background-position: 4px 18px;*/ width: 100%; height: 70px; background-size: 76%; background-position: 6px 14px; } #header a{ margin: 20px 0 0 0; width: 100%; font-size: 0.9em; } .go_site_map{ display: none; margin: 0 5% 0 0; width: 100%; font-size: 1em; } #navi{ padding: 5px 0px; width: 100%; height: auto; font-weight: normal; background-image: none; /* padding: 6px 0 10px 0;*/ /* font-size: 1.1em;*/ float: none; } #navi a{ padding: 4px 6px 0 8px; } /* #navi a, #navi a:link, #navi menu a:visited { padding: 4px 6px 0 8px; } */ #navi a:hover{ background-image: none; background-color: #C03; } #navi ul{ margin: 0 auto; width: 100%; max-width: 380px; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; } #navi li{ margin: 0 0px; line-height: 1.4em; float: none; flex: 0 1 auto; } #navi li.unei{ margin: 0 0 0 0.3em; } #navi li.shien{ margin: 0 0 0 0.3em; } .nav_home{ width: 21px; background-size: 100%; background-image : url(../images/home_icon.png); background-repeat: no-repeat; background-position: -5 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 0; color: #fff; } #group_name{ margin: 0; padding: 0; width: 100%; background-size: 123%; background-position: -11px center; height: 64px; float: none; } #contents{ float: none; } #left_link{ width: 100%; float: left; background-color: #fff6ea; } #left_menu{ margin: 5px 7px; width: 98%; height: auto; float: left; } #left_menu img{ margin: 20px 20% 0; width: 60%; height: auto; } #left_menu ul{ margin: 0; } #left_menu ul::after{ content: ""; display: block; clear: both; } #left_menu li{ float: left; } #left_menu li a{ color: #fff; } #left_menu li a, #left_menu li a:visited, #left_menu li a:hover, #left_menu li a:active{ margin: 2px 1px; padding: 4px 10px; font-size: 0.9em; line-height: 1.5em; background: none; background-color: #d96; box-shadow: none; border-radius: 16px; } #page_title{ margin: 8px 20px; padding: 8px 0px; width: 90%; /* background-color: #fda; border: none;*/ } #page_title h2{ padding: 0 2px; font-size: 1.5em; color: #633; line-height: 1.2em; /* text-shadow: 1px 1px 2px #777;*/ } #main_content{ margin: 0 5% 0; width: 90%; font-size: 1em; float: left; } #main_content h4{ margin: 20px 0; font-size: 1.18em; font-weight: normal; line-height: 1.4me; color: #831; } #main_content li{ line-height: normal; font-size: 1em; } #main_content img{ margin: 0 10%; width: 80%; height: auto; } #main_content a{ margin: 0!important; } #bottomNavi{ margin: 20px 5% 0; width: 90%; font-size: 0.9em; float: none; } #bottomNaviL{ width: 50%; float: left; } #bottomNaviR{ width: 50%; float: right; } #footer{ margin: 10px 5% 0; padding: 0; width: 90%; } #footer_left{ margin: 10px 0 0; width: 100%; font-size: 0.9em; } #footer_right{ margin: 10px 0 0; width: 100%; font-size: 0.8em; } .g_feed li{ font-size: 0.7em!important; } #home #left_link{ margin: 0 5%; width: 90%; } #home #left_link img{ width: 60%; margin: 1px 20% 0; } #home #group_name{ height: auto; } #home #contents { display: flex; flex-direction: column; } #home #left_link{ order: 1; background-color: #fff; } #home #left_link .banner a{ margin: 0 1%; width: 48%; float: left; } #home #left_link .banner img{ margin: 0; padding: 0; width: 100%; height: auto; } #home #main_content p{ font-size: 1em; } #home #main_content h2{ margin: 0 0 11px; padding: 0; font-size: 1.4em; } #home #left_link h3{ margin: 0 0 10px; height: 26px; } #home #left_link h3 a{ width: 100%; } #home #left_link img[src$="blog_image.png"]{ width: 60%; margin: 0 20%; } #home #left_link a{ margin: 0 1%; width: 48%; height: auto; float: left; } #home #left_link img{ margin: 0; padding: 0; width: 100%; height: auto; } /* 未使用 /* * { max-width: 375px; } */ } /* ----- 重要と表示 start --------------------------------- */ h3{ position: relative; /* margin-top: 1em; padding: 1em 2em; border: 1px solid black; */ } .important_headlines{ color: #a33; } .important_headlines::before{ content: "重要"; position: absolute; top: 0; left: 0; border: 1px solid #F00; border-radius: 3px; color: white; font-size: 0.7em; padding: 0 0.5em; margin: 0 0 0px; background-color: #f00; transform: translateY(-70%) translateX(-0.7em); } /* ----- 重要と表示 end --------------------------------- */