@charset "shift_jis";

/*==================================================
　基本の設定
===================================*/

html {
  font-size: 62.5%;
}

body {
  color: #444444;
  font-size: 1.0rem;
  font-family: メイリオ;
  line-height: 130%;
  background-color: #fff;
  margin: 0px 0px 0px 0px;
}

div,p,dl,dt,dd,ul,li {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
li {list-style-type: none;}

a {color: #fff;}
a:hover,
a:active {text-decoration: none;}


/*==================================================
スライダーのためのcss
===================================*/
#slider {
  width: 80%;
  height: 30vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  margin: 0px 0px 0px auto;
}

#slider-area {
  position: relative;
  width: 100%;
}

.lead {
  position: absolute;
  height: 15vh;
  top: 40%;
  left: 20px;
  font-family: sans-serif;
  color: #000;
  letter-spacing: 2px;
  background-color: rgba(255, 255, 255, .3);
  padding: 10px 20px 0px 0px;
}
.lead dt {
  font-family: serif;
  font-size: 1.5rem;
  line-height: 180%;
}
.lead dt span {
  font-size: 2.0rem;
}

.lead dd {
  font-family: serif;
  font-size: 1.2rem;
  line-height: 150%;
}

#slider h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.wrapper {position: relative;}
.container {background:#555;}


/*==================================================
　ヘッダーの設定
===================================*/

/*-------- wrapper --------*/
.wrapper{
  position: relative;
  margin: 0px 0px 60px 0px;
}

header {
  width: 100%;
  display: flex;
  background-color: #fff;
}

nav {display: none;}

h1 {
  width: 100%;
  color: #111111;
  font-family: serif;
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 150%;
  text-align: center;
  margin-top: 5px;
}

/*-------- gnavi --------*/
.gnavi{display: none;}

/*-------- t_image --------*/
#t_image {
  width: 100%;
}
#t_image img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

/*==================================================
　フッターの設定
===================================*/

#footer {
  background: #8b0000;
  padding: 5px 0px 10px 0px;
}

#footer ul {display: none;}
#footer .copyright {
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  padding-top: 10px;
}

/*==================================================
　コンテンツの設定
===================================*/

#contents {
  width: 95%;
  display: flex;
  flex-direction: column;
  padding: 20px 0px 40px 0px;
  margin: 0px auto;
}
#ct_left {order: 2;}
#ct_main {order: 1;}
#ct_right {order: 3;}

#ct_left ul,
#ct_left dl {
  width: 100%;
}
#ct_left li {
  text-align: center;
  padding: 5px;
}
#ct_left li img {
  max-width: 70%;
  height: auto;
}

#ct_left dt {
  padding: 5px 0px;
}
#ct_left dd {
  text-align: center;
  padding-bottom: 10px;
}

#ct_main dl {
  width: 100%;
}
#ct_main dl dt{
  font-family: serif;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 150%;
  text-align: center;
  border-style: solid;
  border-color: #8b0000;
  border-width: 2px 0px 2px 0px;
  background: #ede4e1;
  padding: 6px 0px;
}

#ct_right ul {
  width: 80%;
  margin:0px auto;
}
#ct_right li {
  padding: 5px 0px 5px 0px;
}
#ct_right li img {
  max-width: 100%;
  height: auto;
  border: solid silver 1px;
}
#ct_right p {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 60px;
}
#ct_right p img {
  max-width: 60%;
  height: aoto;
}

/*==================================================
　トップページの設定
===================================*/

/*-----　新着記事　-----*/

dl#news {}

dl#news ul {
  width: 100%;
  margin: 0px auto;
}
dl#news li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px 0px 5px 0px;
  border-style: dotted;
  border-color: #8b0000;
  border-width: 0px 0px 1px 0px;
}
dl#news li span {display: inline-block;}
dl#news li span.ph {width: 40%;}
dl#news li span.ttl {width: 55%;}

dl#news li span img {
  max-width: 100%;
  height: auto;
}
dl#news li span.ttl {
  font-size: 1.3rem;
  padding: 5px 0px 2px 0px;
}
dl#news li span.ttl span {
  color: #666;
  font-size: 90%;
  padding-left: 10px;
}

#news li a,
#search a {color: #333;}
#news li a:hover,
#news li a:active,
#search a:hover,
#search a:active {color: #8b0000;}


/*==================================================
　記事検索ページの設定
===================================*/

#search {
  width: 100%;
  padding-top: 20px;
}
#search ul {
  display: flex;
  justify-content: space-around;
  border-style: dotted;
  border-color: #8b0000;
  border-width: 0px 0px 2px 0px;
  padding: 10px 10px 5px 10px;
  margin: 0px auto;
}
#search li.li1 { width:40%;}
#search li.li2 {
  width:55%;
  line-height:150%;
}

#search .li1 img {
  max-width: 100%;
  height: auto;
}
#search .li2 span.sp1 {
  font-size: 1.6rem;
  font-weight: bold;
  padding-bottom: 10px;
}
#search .li2 span.sp2 {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
}

/*==================================================
　記事共通設定
===================================*/

#link_t {
  width: 90%;
  font-size: 1.3rem;
  text-align: right;
  padding-top: 10px;
}

#link_t a {color: #333;}
#link_t a:hover,
#link_t a:active {color: #8b0000;}

/*==================================================
　記事（写真掲載タイプ）の設定
===================================*/
/*-----　gallery　-----*/

dl#gallery,
dl#gallery2 {
  width: 100%;
  margin: 0px auto;
}

#gallery dt,
#gallery2 dt,
#gallery dd.photo {width: 100%;}
#gallery2 dd.photo {
  width: 80%;
  margin: 0px auto;
}
#gallery dd.sum,
#gallery2 dd.sum {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}
#gallery dd.comment,
#gallery2 dd.comment {width: 100%;}

#gallery dt,
#gallery2 dt,
#album dt {
  font-size: 1.8rem;
  text-align: center;
  padding-bottom: 10px;
}
#gallery dd.comment,
#gallery2 dd.comment,
#album dd comment {
  padding: 5px 0px 20px 10px;
}

#gallery dd.sum span,
#gallery2 dd.sum span {
  width: 15%;
  display: block;
}

#gallery dd.photo img,
#gallery dd.sum span img,
#gallery2 dd.photo img,
#gallery2 dd.sum span img {
  max-width: 100%;
  height: auto;
}


/*-----　album　-----*/
#album {
  width: 100%;
}
#album dd.photo2 {
}
#album dd.photo2 img {
  max-width: 100%;
  height: auto;
  padding-bottom: 10px;
}
#album dt span {
  display: block;
  font-size: 70%;
  font-weight: normal;
  padding-top: 10px;
}


/*==================================================
　記事（ユーチューブタイプ）の設定
===================================*/

dl#youtube {
  width: 100%;
}
#youtube dt {
  font-size: 1.8rem;
  text-align: center;
  padding: 0px 0px 10px 0px;
}
#youtube dd.douga {
  text-align: center;
  background: #000;
  border-style: solid;
  border-color: silver;
  border-width:2px;
  padding: 5px;
}
#youtube dd.douga iframe {
  width:300px;
  height: 170px;
}

#youtube dd.comment {
  padding: 10px 0px 20px 10px;
}