/*
  Color tones.
  pink #fffff8 #ffbbb7 #fe9090 #fe55 #fc1b2c
  blue #fefeff #b1d6f9 #83bcf1 #429aeb #0277e3
  gray #fefefe #cfcfcf #b1b1b1 #898989 #606060
  green #e8f8ec #82dd98 #3ac85c #0caf33 #01731c
*/
html {height:100%;}
* {
  margin:0;
  padding:0;
  font-size: 16px;
  line-height: 1.5em;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color:#000;
  background:url(../img/bg_pattern.gif); 
}
 a:link {color:#5f5f5f;} 
 a:hover {color:#c02323;}
 a:visited {color:#5f5f5f;}
 a span {font-size:0.8em;}
ul {list-style: none;}
.clear {
  clear:both;
}

ol {
  list-style:none;
   counter-reset: number;
 }
ol li::before {
   counter-increment: number;
   content: counter(number) ". ";
   padding-right: 5px;
 }

ol li i {
	color:#cc7a7a;
}
.centering {
  text-align: center;
}
h1 {
  display:block;
  width:960px;
  height:240px;
  margin:0 auto;
      text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  background:#ffffff url(../img/cmn/header.png) left no-repeat;
}
h2 {
  display: block;
  width:100%;

  border-bottom: dotted 2px #b1b1b1;
  font-size:1.1em;
  font-weight: 700;
  margin-bottom:8px;
  padding:4px 0;
}
h3 {
	color:#606060;
	font-size: 1em;
	font-weight: bold;
	margin:8px 0;
}
h3.bold {
	font-weight: bold;
}
h4 {}
h5 {
  font-weight: 100;
  font-size: 16px;
}
div#frame {
  width:100%;
  height: 100%;
  clear:both;
  text-align: center;
}
header {
  display:block;
/*   position: fixed; */
  background-color:#ffffff;
  width:100%;
  box-shadow: 0px 1px 1px 2px rgba(0,0,0,0.5);
  z-index: 100;
}
div#content {
  padding-top:8px;
  width:960px;
  height:100%;
  margin:4px auto;
  background-color:#fefefe;

}
div.colum {
  width:100%;
  display:flex;
}
.colum section { 
  display:inline-block;
  text-align: left;
  width: 48%;
  min-height:360px;
  border:solid 1px #dcdcdc;
  border-radius: 5px;
  margin:8px auto;
  padding:8px;
  overflow-y: scroll;
  overflow-x:hidden; 
  position:relative;
}
.col1 section {
  width:100%;
}

.colum .texstyle {
	font-size: 0.8em;
}
.colum p {
  margin:4px 8px 24px 8px;
}
.colum blockquote {
	text-align: left;
	background-color:#eee;
	padding:8px;
	border-radius: 8px;
}
.colum p.info,
p.info {
  width: 100%;
  margin: 16px auto;
  padding:12px;
  border-radius: 8px;
  font-size:0.8em;
  display:inline-block;
  border:dotted 1px #cdcdcd;
  color:#666;
}

.colum blockquote img {
	vertical-align: top;
}
.colum blockquote p {
  margin:8px;
	font-size: 12px;
}
.colum blockquote cite {
  text-align: right;
  font-weight: bold;
  line-height: 16px;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom:16px;
  display: inline-block;
  width: 100%;
}
.colum blockquote p.trans {
  font-size:14px;
}
.colum .photos p{
  display:inline-block;
  width:100%;
  text-align: center;
}
.colum .photos img {
  margin:0 auto;
}

.colum li a {
	text-decoration: none;
}

.img_list {
	margin-bottom: 16px;
}
.img_list li img {
  width:100px;
  height:100px;
  vertical-align: top;
  margin-bottom: 8px;
}
.img_list li {
  display: inline-block;
  width:100%;
  margin:0;
  padding:8px 8px;
}
.img_list li:nth-child(2n) {
  background-color:#ddd;
}
.btn {
  display:inline-block;
  background-color:#40cc71;
  border:solid 2px #fff;
  -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 24px;
  padding:4px 16px;
  color:#fff;
  font-weight: bold;
  font-size:0.8em;
  margin:4px;
  vertical-align: middle;
}

.blue {
	background: #305097;
}
.orange {
	background: #e79600;
}
.red {
	background: #ff0000;
}
a.social {
	width: 28px;
	height: 28px;
}
a.social img#youtube,
a.social img#facebook
{
	width: 28px;
	height: 28px;
	margin:0;
	vertical-align: middle;
	text-decoration: none;
}
p.more {
  display:inline-block;
  width: 95%;
  height:24px;
  text-align: right;
  border-top:dotted 1px #dcdcdc;
  bottom:5px;

}
footer {
  bottom:0;
  display:block;
  width:100%;
  height:60px;
  background-color:rgba(255, 255, 255, 0.4);
  font-size: 0.8em;
  padding-top:24px;
  vertical-align: bottom;
}
@media screen and (max-width:640px) {

}


/*swiper設定*/
.swiper-container {
    width: 100%;
    height: 300px;
}
.swiper-button-prev,
.swiper-button-next {
  color:#858891;
}

.colum section div.swiper-container {
      text-align: center;
}

.swiper-slide.swiper-slide-active {
  //margin:16px;
}

.swiper-slide-duplicate-next,
.swiper-slide-duplicate-prev
 {
  opacity:0.6;
  top:20%;
}