@charset "utf-8";
@import url("reset.css");
@import url("structure.css");
@import url("layout.css");
@import url(blogStructure.css);
@import url("blogNav_p.css");
@import url("topnav.css");

/*====================================================
------------------------------------------------------
      main.css
------------------------------------------------------
====================================================*/

/*====================================================
    1: - top
====================================================*/

body#top { background: url(../images/top/bg.jpg) 50% 0 no-repeat;}
#top header { height: 400px;}

/*banner*/


/*
.column_5 .bn_seOC a, .column_5 .bn_seOC a,
.column_5 .bn_jrOC a, .column_5 .bn_jrOC a,
.column_5 .bn_elOC a, .column_5 .bn_elOC a,
.column_5 .bn_jumpin a, .column_5 .bn_jumpin a,
.column_5 .bn_trial a, .column_5 .bn_trial a
{ display: block; width: 128px; height: 88px; text-indent: -9876em; overflow: hidden;}
.bn_seOC a { background: url(../images/top/bn_col5_seOC.gif) 0 0;}
.bn_seOC a:hover { background: url(../images/top/bn_col5_seOC.gif) 0 -88px;}
.bn_jrOC a { background: url(../images/top/bn_col5_jrOC.gif) 0 0;}
.bn_jrOC a:hover { background: url(../images/top/bn_col5_jrOC.gif) 0 -88px;}
.bn_elOC a { background: url(../images/top/bn_col5_elOC.gif) 0 0;}
.bn_elOC a:hover { background: url(../images/top/bn_col5_elOC.gif) 0 -88px;}
.bn_jumpin a { background: url(../images/top/bn_col5_jumpin.gif) 0 0;}
.bn_jumpin a:hover { background: url(../images/top/bn_col5_jumpin.gif) 0 -88px;}
.bn_trial a { background: url(../images/top/bn_col5_trial.gif) 0 0;}
.bn_trial a:hover { background: url(../images/top/bn_col5_trial.gif) 0 -88px;}
*/

.bn_icc a { display: block; width: 720px; height: 100px;}
.column_4 a:hover,
.bn_icc a:hover {
filter : alpha(opacity=70);  /* IE7以下用 */
-ms-filter : "alpha(opacity=70)"; /* IE8用 */
opacity : 0.7; /* Firefox 1.5以上, Opera, Safari用 */
}

/*tabs*/
#topics { margin: 20px 0 0 0;}
/*a.btn_act { background: #24116f; border: 1px solid #24116f; padding: 5px 10px; margin: 0; border-radius: 5px; color: #fff;}*/
a.btn_act {background: #24116f;border: 1px solid #24116f;padding: 0;margin: 5px 0;border-radius: 5px;color: #fff;display: inline-block;width: 65px;text-align: center;}
a.active { font-weight: bold; background: #fff; color: #24116f;}
.tabs { margin: 0 0 10px 0; padding: 0 0 15px 0; border-bottom: 2px solid #eee; font-size: 12px;}
.motion { width: 100%; display: none;}
.motion ul + a { display: block; width: 14em; background: url(../images/share/pm_arrow_darkGray.png) 0 .5em no-repeat; margin: 0 0 0 auto; padding: 0 0 0 10px; font-size: 12px;}
.motion ul { list-style: none; margin: 0 0 30px 0;}
.motion ul li { padding: 15px 40px;}
.motion ul li:nth-child(odd) { background: #eee;}
.motion ul li span { padding: 0 30px 0 0; font-size: 12px;}
.motion ul li a:link { color: #24116f; text-decoration: none;}
.motion ul li a:hover { color: #24116f; text-decoration: underline;}
.motion ul li a:visited { color: #666;}
#motion_area1 { display: block;}

/*
** postit
*/
.postit { width: 100%; box-sizing: border-box; background: #0871d9; position : relative; border-radius : 5px; color: #ffffff; padding: 15px 30px 0 30px; margin: 0 auto 20px auto; text-align: center;}
.postit:before{ content: ""; position: absolute; top: -1px; right: -1px; background: rgba(0, 0, 0, .2);
 border: solid 20px; border-color: white white transparent transparent; border-radius: 0 0 0 7px; box-shadow: -2px 2px 1px rgba(0, 0, 0, .1)}
.postit strong { display: block; text-align: center; margin-bottom: 10px; font-size: 170%;}
/*--- 2 column ---*/
.postit .column_2 > div { width: 48%; float: left; margin: 0; padding: 0;}
.postit .column_2 > div:nth-child(2n) { float: right;}
.postit .column_2 > div:nth-child(2n+1) { clear: both;}
.postit .column_2 > div img { display: inline; width: 100%; margin-bottom: 10px;}
.postit .column_2 > div a:hover { opacity: .8;}

.apologies { box-sizing: border-box; display: block; width: 100%; padding: 15px; border: 1px solid #ccc; margin: 0 0 15px 0;}
.apologies dt { border-bottom: 1px; text-align: center; font-weight: bold;}

@media screen and (max-width: 768px){
#top .column_4 { margin: 0;}
#top .column_4 > div { display: inline; width: 48%; float: none;}
#top .column_4 dl a
{ display: block; width: 100%; height: auto;}
body#top { background: none;}
#top header { height: auto;border-bottom: 1px solid #ccc;}
#top main .contents .bn_icc a { width: 100%; height: auto;}


.tabs { line-height: 2.5em; padding-bottom: 5px;}

.motion { width: 100%; display: none;}
.motion ul + a { width: 100%; box-sizing: border-box; background: #24116f url(../images/share/pm_arrow_white.png) 30px center no-repeat; margin: 0 auto; padding: 10px 5px 10px 45px; font-size: 12px; color: #fff; border-radius: 5px;}
.motion ul { margin: 0; padding: 0;}
.motion ul li { padding: 7px; font-size: 14px;}
.motion ul li span.date, .motion ul li span.title { display: block; width: 100%; padding: 0;}

 .postit .column_2 > div { display: block; width: 100%; float: none;}

}

/*====================================================
    2: - greetings
====================================================*/

#greetings .contents figute { display: block; width: 230px; float: left;}
#greetings .contents figcaption { clear: both; display: block; width: 230px; margin: 10px 0 0 0; font-size: 10px; text-align: right;}
#greetings .greetings { width: 460px; float: right; line-height: 200%;}
#greetings .greetings dt { font-size: 24px; margin: 0 0 15px 0;}

@media screen and (max-width: 768px){
#greetings .contents figute,#greetings .greetings { width: 100%; clear: both;}
#greetings .greetings dt { font-size: 16px; margin: 0 0 15px 0; font-weight: bold;}
}


/*====================================================
    3: - about
====================================================*/

#about .contents dl { padding: 10px 30px; border-bottom: 1px solid #ccc; margin: 10px 0; line-height: 160%; font-size: 12px; zoom: 1;}
#about .contents dl:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
#about .contents dl dt { display: block; width: 100px; float: left; color: #C4950F; font-weight: bold;}
#about .contents dl dd { display: block; width: 560px; float: right; color: #666; zoom: 1;}
#about .contents dl dd:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
#about .contents dl dd img { float: right;}

@media screen and (max-width: 768px){
#about .contents dl { padding: 10px 0;}
#about .contents dl dt, #about .contents dl dd { width: 100%; clear: both;}
}


/*====================================================
    4: - organization
====================================================*/

/*====================================================
    5: - education
====================================================*/

#education .contents h2 + p { font-size: 24px; color: #24116f; text-align: center;}
#education .contents .column_2 { font-size: 18px; line-height: 250%;}
#education .contents .column_2 > div { color: #24116f; padding: 0 0 0 10px;}
#education .contents figute { display: block; width: 230px; float: left;}
#education .contents figcaption { clear: both; display: block; width: 230px; margin: 10px 0 0 0; font-size: 10px; text-align: right;}
#education dl.greetings { width: 460px; float: right; line-height: 200%;}
#education dl.greetings dt { font-size: 24px; margin: 0 0 15px 0;}

@media screen and (max-width: 768px){
#education .contents h2 + p { font-size: 18px;}
#education .contents h2 ~ h2 { margin-top: 10px;}
#education .contents .column_2 { font-size: 14px; line-height: 250%;}
}


/*====================================================
    6: - gDesign
====================================================*/
#gDesign .contents figute { text-align: center; margin-bottom: 15px;}
#gDesign .contents figcaption { margin: 10px 0 0 0; font-size: 12px; text-align: right;}

/*====================================================
    7: - infomation
====================================================*/


/*====================================================
    8: - employment
====================================================*/

#employment .contents .none { display: block; width: 300px; border: 1px solid #ccc;  border-radius: 5px; padding: 20px 10px; margin: 30px auto 60px auto; text-align: center; letter-spacing: .1em;}
#employment .contents table { font-size: 12px;}
#employment .contents table strong { font-weight: bold; padding: 0 0 10px 0;}
#employment .contents table td.heading { width: 150px; font-weight: bold;letter-spacing: .2em;}
#employment .contents th {background: #666; color: #fff; padding: 5px 0;}

@media screen and (max-width: 768px){
#employment .contents .none { width: 80%}
}


/*====================================================
    9: - search
====================================================*/
body#search { background: none;}
#search header { height: 100px;}
#search table { width: 100%;line-height: 180%; border : none;}
#search th,#search td { padding: .8em;}
#search th { text-align: center; border: none;}
#search td { border: none;}



/*====================================================
    10: - donation
====================================================*/

#donation .contents p,
#donation .contents table
{ display: block; width:600px; margin: 0 auto 1em auto; line-height: 180%;}

#donation .contents h3 { background: none; border: 1px solid #35296F; font-size: 16px; font-weight: normal;}
#donation .contents h4 { width: 600px; border-bottom: 1px solid #333; margin: 30px auto 15px auto;}
#donation .contents h5 { width: 600px; background: #666; color: #fff; margin: 30px auto 0 auto; text-align: center; padding: 5px 0; font-size: 16px;}
#donation .contents .signing { display: block; width: 600px; text-align: right; font-size: 12px; margin: 20px auto;}

#donation .contents table th, #donation .contents table.type02 th { width: 150px;}
#donation .contents table td, #donation .contents table.type02 td { width: 450px;}
#donation .contents table td dl { }
#donation .contents table td dt { display: block; width: 70px; float: left;}
#donation .contents table td dd { display: block; width: 360px; float: right;}
#donation .contents table td span { display: block; font-size: 12px;}

#donation .contents table.type02 td strong { display: block; width: 400px; background: #35296F; border-radius: 10px; padding: 10px; margin: 10px auto; font-size: 18px; color: #fff; text-align: center;}
#donation .contents table.type02 td span { display: inline; font-size: 18px; font-weight: bold; padding: 0 .5em;}
#donation .contents table.type02 p { width: 450px;font-size: 12px; padding: 0;}
#donation .contents table.type02 ul { display: block; width: 330px; list-style: none; font-size: 12px; margin: 0;}

#donation .contents .num { width: 470px; margin: 0 auto;}
#donation .contents .num dl { display: block; width:470px; padding: .5em 0; border-bottom: 1px dotted #ccc; margin: 0 auto;}
#donation .contents .num dl:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
#donation .contents .num dt { display: block; width: 250px; float: left;}
#donation .contents .num dd { display: block; width: 200px; float: right;}
#donation .contents .num span { display: block; border: 1px solid #ccc; text-align: center; margin: 15px 0;}

#donation .contents .note { display: block; width: 600px; background: #efefef; border-radius: 10px; text-align: center; font-weight: bold; margin: 30px auto; padding: 15px;}
#donation .contents dl.internet { width: 600px; margin: 0 auto; padding: 0;}
#donation .contents .internet dd { padding: 0 0 15px 15px; background: url(../images/share/pm_dgray.png) 0 .5em no-repeat;}


#donation .contents a.bt { display: block; width: 445px; height: 90px; margin: 30px auto 100px auto;}

#donation .contents a.bt:hover {
filter : alpha(opacity=70);  /* IE7以下用 */
-ms-filter : "alpha(opacity=70)"; /* IE8用 */
opacity : 0.7; /* Firefox 1.5以上, Opera, Safari用 */
}

#donation .contents .contact { width: 600px; border: 1px solid #35296F; border-radius: 10px; text-align: center; margin: 80px auto; padding: 0 0 10px 0;}
#donation .contents .contact h3 { background:#35296F; border-radius: 10px 10px 0 0; color: #fff;}

@media screen and (max-width: 768px){
#donation .contents h4 { width: 100%;}
#donation .contents h5 { width: 100%;}


#donation .contents p,
#donation .contents table { display: block; box-sizing: border-box; width:100%;}
#donation .tabs-nav { padding: 0;}
#donation .tabs-nav li { display: block; box-sizing: border-box; width: 90%; margin: 0 auto 10px auto; border: 1px solid #ccc; border-radius: 5px;}
#donation .tabs-panel { padding: 10px 0 0 0;}
#donation .contents .signing { width: 100%;}

#donation .contents table th, #donation .contents table.type02 th { width: 30%;}
#donation .contents table td, #donation .contents table.type02 td { width: 70%;}
#donation .contents table td dl { }
#donation .contents table td dt { width: 100%; clear: both; font-weight: bold;}
#donation .contents table td dd { width: 100%; clear: both;}

#donation .contents .contact { width: 100%; margin: 20px auto;}

#donation .contents table.type02 td strong { width: 100%; box-sizing: border-box; font-size: 14px;}
#donation .contents table.type02 td span { font-size: 16px; }
#donation .contents table.type02 p { width: 100%; }
#donation .contents table.type02 ul { width: 100%;}

#donation .contents .num,
#donation .contents .num dl,
#donation .contents .num dt,
#donation .contents .num dd  { width: 100%; box-sizing: border-box; clear: both;}

#donation .contents .note,
#donation .contents dl.internet,
#donation .contents .internet dd { display: block; width: 100%; box-sizing: border-box; margin: 10px auto;}
 #donation .contents a.bt { width: 100%; height: auto; margin: 0 auto 0 auto;}
 #donation .contents a.bt img { width: 100%; height: auto; margin: 0;}
}

/*====================================================
    11: - bullying
====================================================*/

#bullying a[href$=".pdf"] { background: none; padding: 0; margin: 0;}
#bullying .column_3 { margin: 100px 0;}

@media screen and (max-width: 768px){
#bullying .column_3 { margin: 0;}
 #bullying .column_3 > div { width: 80%; margin: 0 auto; clear: both; float: none;}
}

/*====================================================
    12: - RSS
====================================================*/
ul.rssall li span.SiteTitle, ul.NewsALL li span.SiteTitle{display: inline-block;text-align: center;width: 90px;padding:0;margin-right: 20px;background-color:#373581;color: #fff;border-radius: 3px;}
ul.rssall li span.title{}


/*====================================================
    13: - wish
====================================================*/
.wish ol{margin-left:20px;}
.wish li{list-style: decimal;margin-bottom:15px;}

/*====================================================
    TOP mobile
====================================================*/
#topImg_sp img{display:none;}
@media screen and (max-width: 768px){
#topImg_sp img{display:block;max-width:100%;}
}