@charset "utf-8";

p{
  text-align: justify; /
  text-justify: inter-ideograph;
}

/* page title */
h1.page_title{
  margin: -20px 0 0 0;
  padding: 35px 0 0 0;
  font-size: 24px;
  color: #fff;
  text-align: center;
  height: 70px;
  background: #000;
}


/* collection title 「みました！」　*/
h3.title{
    width: 100%;
    margin: 0;
    padding: 10px 0 7px 0;
    background: #636363;
    border-top: solid 1px red;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
}

/* category jump */
ul.category_jump{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px 0 15px 8%;
}
/* メディアクエリ　横幅768px以上のデバイスでのみulタグのwidthを上書きする */
@media print, screen and (min-width: 768px) {
  ul.category_jump{width: 85%;}
}
li.category{
  width:  auto;
  margin: 10px 10px 0 0;
  padding: 7px 20px 5px 20px;
  background: #000;
  font-size: 16px;
  text-align: center;
  border: solid 1px #330066;
  box-shadow: 10px 10px 15px -10px;
  outline-offset: 1px;
}
li.category a{
  color: #fff;
}
li.category a:hover{
  color: #eaf4ff;
}

/* rating stars */
p.stars{
  width: 100%;
  margin: 0px 0 0px 0px;
  padding: 10px 0px 10px 200px;
  background: #eafff4;
  font-size: 14px;
  color: #003300;
  line-height: 1.7;
}
/* rating kugiri sen */
.kugiri{
  margin: 25px 0 0 0;
  text-align: center;
}


/* ---- 分類メニュー 各解説ページにおける ---- */
.setsumei{
   margin: 20px 0 -20px 100px;
   color: #330033;
}

/* 各ナビメニューのデザイン　*/

/* １段目　*/
li.jump_top{
  margin: 0 10px 0 0;
  padding: 5px 20px;
  background: #fff;
  border: solid 1px red;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_top a{
  color: red;
}
li.jump_senso{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_teiko{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_boryoku{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_sabetsu{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_hinkon{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_life{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_kempo{
  margin: 0 0 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}

/* 2段目　*/
li.jump_media{
  margin: 0 10px 0 0;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_kankyo{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_nuclear{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_enzai{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_imin{
  margin: 0 0 0 10px;
  padding: 5px 10px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
  }
li.jump_fun{
  margin: 0 10px;
  padding: 5px 10px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_music{
  margin: 0 0 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}
li.jump_others{
  margin: 0 10px;
  padding: 5px 20px;
  background: #003300;
  border-right: solid 0px #fff;
  box-shadow: 10px 10px 15px -10px;
}



/* セクション　全映画リスト */
section.list{
  width: 90%;
  margin: 0 0 0 40px;
}

/* 映画の全一覧　と　各映画へのジャンプ*/
h3.movies_category{
  width: 100%;
  padding: 15px 0 15px 0;
  margin: 0 0 5px 0;
  background: #dedede;
  font-size: 24px;
  text-align: center;
  border-top: solid 2px #543f32;
  border-bottom: solid 1px #543f32;
  box-shadow: 10px 10px 15px -10px;
}
h3.movies_category a{
  color: #543f32;
  text-decoration: none;
}
h3.movies_category a:hover{
  color: #543f32;
}


/* each item */
ul.all_jump{
  display: flex;
  width: 100%;
  margin: 0px 0 0px 0px;
  padding: 0 40px 0 70px;
  color: #663300;
  font-size: 13px;
  line-height: 1.9;
  border-bottom: dotted 1px #543f32;
}
/* each item with colored background*/
ul.all_jump_bg{
  display: flex;
  width: 100%;
  margin: 0px 0 0px 0px;
  padding: 0 40px 0 70px;
  background: #ebebeb;
  color: #663300;
  font-size: 13px;
  line-height: 1.9;
  border-bottom: dotted 1px #543f32;
}

/* li.all_jump_ratings　は　★評価の有無 */
li.all_jump_ratings{
  width: 3%;
  padding: 6px 0px 5px 0px;
  line-height: 1.6;
}

li.all_jump_catch{
  width: 38%;
  padding: 6px 20px 5px 0px;
  line-height: 1.4;
  font-size: 16px;
}
li.all_jump_title{
  width: 45%;
  padding: 6px 20px 3px 0px;
  line-height: 1.4;
  font-size: 16px;
  text-align: center;
}
li.all_jump_title a{
  color: #006633;
  font-weight: bold;
/*  text-shadow: 0px 0px 1px #808080; */
}
li.all_jump_title a:hover{
  color: green;
  background: #f4fff4;
}
li.all_jump_year{
  width: 35%;
  padding: 6px 0px 0 0;
  line-height: 1.6;
  font-size: 14px;
}

/* 全映画リストにもどる　*/
.return_movielist_each{
  width: 100%;
  padding: 12px 0;
  margin: 0px 0 10px 0;
  background: #bcbace;
  border-bottom: solid 1px #543f32;
  box-shadow: 10px 10px 15px -10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.return_movielist_each a{
  display: block;
}


/* 全映画リスト（テーマ別検索）（カテゴリー別）にもどる　*/
.returns{
  display: flex;
  justify-content: space-between;
}
.return_movielist{
  width: ;
  padding: 10px 13%;
  margin: 10px 0 0px 0;
  background: #bcbace;
  border-bottom: solid 1px #543f32;
  box-shadow: 10px 10px 15px -10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.return_movielist a{
  display: block;
}
.theme a{
  color: #000;
}
.category a{
  color: purple;
}

/* 各カテゴリーTOPへ戻る　*/
h4.return_category_top{
  width: 100%;
  padding: 12px 0;
  margin: 0px 0 15px 0px;
  background: #dedede;
  font-size: 16px;
  text-align: center;
  box-shadow: 10px 10px 15px -10px;
}
h4.return_category_top a{
  display: block;
}
h3.movies_category a{
  color: #543f32;
  text-decoration: none;
}
h3.movies_category a:hover{
  color: #543f32;
}


/* カテゴリー選択に戻る　*/
.return_category_toplist{
  width: 17%;
  margin: 30px 0px 30px 45%;
}
.return_category_toplist img{
  width: 100%;
}

.return_category{
  width: 23%;
  margin: -15px 0 0px 75%;
}
.return_category img{
  width: 85%;
}



/* 以下、mov/xxxxx.htmlと共有CSS */
p.kensaku{
  width: 80%;
  margin: 20px auto 10px;
  line-height: 1.5;
}
/* ----　各カテゴリーの表示　----- */
h2.movies_category{
  width: 100%;
  margin: 0px 0 0;
  padding: 15px 0;
  font-size: 24px;
  font-weight: bold;
  background: #dedede;
  text-align: center;
  border-bottom: solid 1px #543f32;
}




/* -----　各映画の解説　----- */
section.each_movie{
  padding: 0px 20px 15px 60px;
}
.movie_pic{
  display: inline-block;
  width: 15%;
  overflow: hidden;
  margin: 30px 0 20px 30px;
  box-shadow: -4px -4px 5px -1px #606060;
}
.movie_pic img{
  width: 100%;
}
p.pic_copyright{
  width: 100%;
  padding: 0 0 3px 3px;
  font-size: 11px;
  text-align: left;
  line-height: 1.1;
}
.movie_pic_yokonaga{
  display: inline-block;
  width: 36%;
  margin: 30px 0 20px 0px;
  overflow: hidden;
  box-shadow: -4px -4px 5px -1px #606060;
}
.movie_pic_yokonaga02{
  display: inline-block;
  width: 20%;
  margin: 30px 0 0 0;
  overflow: hidden;
  box-shadow: -4px -4px 5px -1px #606060;
}
.movie_pic_yokonarabi{
  display: flex;
}
.movie_pic_yokonarabi img{
  width: 20%;
  margin: 25px 15px;
  overflow: ;
  box-shadow: -4px -4px 5px -1px #606060;
}

.shosai{
  display: inline-block;
  width: 77%;
  padding: 0 0 0px 70px;
  vertical-align: top;
  line-height: 1.5;
}
.shosai_yokonaga{
  display: inline-block;
  width: 95%;
  padding: 0 0 10px 60px;
  vertical-align: top;
  line-height: 1.5;
}
.shosai_yokonaga02{
  display: inline-block;
  width: 79%;
  padding: 0 50px 10px 60px;
  vertical-align: top;
  line-height: 1.5;
}
div.catch{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 0 10px 0;
}
.movie_title{
  color: #660099;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  padding: 25px 0 0px 0;
  margin: -30px 0 0px 0;
  border-bottom: solid 2px gray;
}
.movie_title_violet{
  color: #660099;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  padding-top: 25px;
}
.movie_title a{
  color: #ff0066;
  text-decoration: none;
}
.movie_title a:hover{
  color: #ffcccc;
}
.director{
  font-size: 17px;
  font-weight: bold;
  padding: 5px 0 15px 0;

}
div.contents_background01{
  padding: 20px 30px 20px 30px;
  background: #fff7ef;
  font-size: 16px;
}
.index_indent{
  padding: 0 0 0 60px;
}
p.contents{
  padding: 7px 0;
  font-size: 18px;
  color: #663300;
  font-weight: bold;
}
.yokonarabi{
  display: flex;
}
ul.contents02{
  width: 30%;
  padding: 10px 0 10px 40px;
  border-top: solid 1px #000;
}
ul.contents02 li{
  width: ;
}
p.line{
  padding: 5px 0 15px 0;
  margin: 0 0 15px 0;
  border-bottom: dotted 2px green;
}
span.black{
  color: #000;
}
span.font12{
  font-size: 12px;
}
p.contents_background{
  padding: 30px 0px 30px 35px;
  font-size: 1em;
  line-height: 1.5;
  color: #663300;
  background: #fff7ef;
}
p.links{
  margin: 10px 0 0 0;
  padding: 5px 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: bold;
  background: #eaeaff;
}
hr.hoso_line{
  border: solid 1px #663300;
}
p.contents_black{
  color: #000;
  line-height: 1.5;
}
.contents a{
  color: #660099;
  text-decoration: none;
}
.contents a:hover{
  color: green;
}
ul.contents{
  margin: 20px 0 20px 30px;
}
li.contents{
  padding: 0px 0;
  line-height: 0.2;
  font-size: 16px;
  color: #663300;
  font-weight: bold;
}
ul.contents li{
  padding: 4px 0;
  line-height: 1.1;
  font-size: 16px;
  color: #663300;
  font-weight: bold;
}
ul.contents li.indent{
  text-indent: -20px;
  padding-left: 40px;
  font-size: 15px;
}


/* 映画に関連する画像　*/
.movie_related_image{
  text-align: center;
  margin: 20px 0 20px;
}
.movie_related_image p{
  text-align: center;
}
.coppelia{
  width: 25%;
}

/* 新　リンク*/
.link{
  display: flex;
  margin: 10px 0 50px 25%;
}
/* 予告編　*/
.movie_link{
  position:relative;
  width:60%;
  margin:0px 10px;
}
.movie_link a{
  position:absolute;
  top:0;
  left:0;
  width: 25%;
  height: 45px;
  padding: 15px 10px 0px 10px;
  background-color: #56256e;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
/*　新【みました！】へのリンク*/
.eishaki02{
  position:relative;
  width:60%;
  margin: -30px 0 0 -35%;
}
.eishaki02 a{
  position:absolute;
  top:0;
  left:0;
}
p.mimashita{
  position:relative;
  width: 50%;
  margin: 15px 0 0 -47%;
}
p.mimashita a{
  position:absolute;
  top:0;
  left:0;
}

/*　旧【みました！】へのリンク*/
.rating{
  display: flex;
}
.eishaki{
  margin: 0 0 0 25%;
}
.rating p{
  margin: 45px 0 0 0;
}
p.rating{
  margin: 20px 0 0 26.5%;
}


/* 清水さんの前文 */
section.maeoki{
  width: 86%;
  padding: 0 0 10px 0;
  margin: 20px 0 20px 70px;
  color: #663300;
  line-height: 1.6;
  background: #fff7ef;
}
p.notes_title{
  padding: 30px 30px 0px 50px;
  font-size: 1.3em;
  font-weight: bold;
}
p.notes{
  padding: 10px 40px 10px 50px;
  color: #663300;
  font-weight: bold;
}


/* 移民・難民 */
section.imin{
  margin: 20px 0 20px 0;
}
p.book_imin{
  width: 100%;
  padding: 20px 80px 0px 100px;
  font-size: 16px;
  color: #003300;
  line-height: 1.6;
}
p.book_imin a{
  text-decoration: none;
}
p.imin{
  width: 85%;
  padding: 2px 0 2px 60px;
  font-size: 16px;
  line-height: 1.6;
}
div.background{
width: 84%;
padding: 20px 40px 20px 40px;
margin: 10px 0 0 100px;
font-size: 16px;
color: #663300;
line-height: 1.6;
text-align: justify;
text-justify: inter-ideograph;
background: #fff7ef;
}


/* 『映画でみる移民／難民／レイシズム』の映画リストに戻る　*/
p.imin_list_top{
  font-size: 1em;
  font-weight: bold;
  margin: 20px 0 10px 40px;
}
.imin_list_top a{
  color: #003300;
  text-decoration: none;
}
.imin_list_top a:hover{
   color: #ff0066;
}
p.imin_list_top img{
  width: 5%;
  vertical-align: middle;
}

/* 移民・難民　映画のリスト */
ul.imin{
  width: 70%;
  margin: 20px 0 10px 120px;
}
ul li.imin{
  padding-left: 20px;
  border-top: dotted 1px #543f32;
}
li.imin{
  padding: 5px 0 5px 40px;
  list-style-type: decimal;
  font-size: 0.9em;
  line-height: 1.3;
}
li.imin a{
  text-decoration: none;
}
li.imin a:hover{
  color: green;
}
span.darkpink_bold{
  color: #ff0066;
  font-weight: bold;
}
span.color{
  color: green;
  font-weight: normal;
}
span.darkviolet_bold{
  color: #330066;
  font-weight: bold;
}
span.darkviolet_bold a{
  color: #330066;
  font-weight: bold;
}
span.darkviolet{
  color: #330066;
}
span.darkviolet a{
  color: #330066;
}
span.green{
  color: #009933;
}


/* カテゴリー　移民／難民／レイシズムのトップへ戻る　*/
.imin_category_top{
  font-size: 1em;
  font-weight: bold;
  margin: 0px 0 10px 40px;
}
.imin_category_top a{
  color: #003300;
  text-decoration: none;
}
.imin_category_top a:hover{
   color: #ff0066;
}
p.imin_category_top img{
  width: 5%;
  vertical-align: middle;
}