@charset "UTF-8";

/* INDEX ================*/

.slick-slider {
opacity:0;}
.slick-initialized {
opacity:1 !important;}
.slick-prev {
z-index:100 !important;
left:15px !important;
top:44% !important;}
.slick-next {
z-index:100 !important;
right:15px !important;
top:44% !important;}
.slick-dotted.slick-slider {
margin-bottom:0 !important;}
.slick-dots {
position:absolute !important;
bottom:8px !important;}
.slick-dots li{
margin:0 !important;}

.slick-slide {
width:100%;
max-width:900px;
transition:0.3s ease;}
.slick-slide:not(.slick-current)  {
opacity:0.8;}

@media only screen and (max-width:900px) {

.slick-slide:not(.slick-current)  {
opacity:1;}

}

.index001 {
margin:1px 0 0 0;
background:#000;
box-shadow:1px 1px 2px rgba(0,0,0,0.2);}



.index002 {
padding:48px 0 60px 0;
background:#e9e8e7;}
.index002 ul {
width:100%;
margin:7px 0 30px 0;
text-align:left;}
.index002 li {
width:33.333333%;
padding:5px;}
.index002 li .chinoma-topics {
position:relative;
padding:23px;
background:#f9f9f8;
height:100%;
box-shadow:1px 1px 1px 0 rgba(0,0,0,0.2);}

@media only screen and (max-width: 1023px) {

.index002 {
padding:5% 0;}
.index002 li {
width:50%;}
.index002 li .chinoma-topics {
padding:20px;
min-height:auto;}

}

@media only screen and (max-width: 640px) {

.index002 {
padding:6% 0 8% 0;}
.index002 li {
width:100%;}
.index002 li .chinoma-topics {
padding:5%;}

}

.index002 .ttl01 {
border-bottom:1px solid #333;
padding:0 0px 8px 0;
margin:0 0 24px 0;
position:relative;}
.index002 .ichiran {
position:absolute;
top:50%;
right:-5px;
transform:translateY(-50%);}
.index002 .ichiran a {
display:block;
text-align:center;
color:#555;
box-shadow:0 0 0 1px #555;
font-size:8px;
width:30px;
line-height:30px;
white-space:nowrap;
border-radius:50%;
transition:all 0.2s;}
.index002 .ichiran a:hover {
color:#fff;
box-shadow:0 0 0 1px #ff8800;
background:#ff8800;}
.index002 .img {
float:left;
clear:both;
width:90px;}
.index002 .img img {
height:90px;
width:90px;
box-shadow:0 0 0 1px #fff;}
.index002 .txt {
margin:0 0 0 107px;}
.index002 .ttl02 {
margin:0 0 18px 0;
font-size:130%;
line-height:26px;
font-weight:bold;}
.index002 .ttl02.height2 {
min-height:52px;}

@media only screen and (max-width: 640px) {

.index002 .ttl02.height2 {
min-height:auto;}

}


.index002 .ttl03 {
font-size:90%;
line-height:1.2;
margin:0 0 15px 0;
padding:7px;
background:rgba(0,0,0,0.1);
border-radius:3px;}
.index002 .ttl04 {
text-align:right;
padding:20px 0 0 0;
font-size:90%;
line-height:1.5;
font-weight:bold;}
.index002 .excerpt {
color:#333;
height:49px;
font-size:12px;
line-height:16px;
overflow:hidden;}

.index002 .button {
text-align:right;}
.index002 .button a {
display:inline-block;
color:#000;
padding:0 15px;
border:1px solid #555;
background:#fff;
font-size:90%;
line-height:35px;
margin:15px 0 0 0;
border-radius:3px;
transition:0.3s;}
.index002 .button a:hover {
color:#fff;
background:#555;}



.index003 {
background:#fff;
padding:40px 0 60px 0;}
.index003 li.left {
float:left;
width:50%;
padding:30px 0 10px 0;}
.index003 li.right {
text-align:left;
float:right;
width:38%;
font-size:12px;
line-height:1.2;}
.index003 li.right a {
display:block;
color:#222;
transition:all .3s;}
.index003 li.right a:hover {
color:#ee8800;}
.index003 li.right .ttl {
margin:20px 0 10px 0;
padding:0 0 1px 17px;
font-weight:bold;
font-size:17px;
line-height:17px;
background:url(../../images/index03.png) no-repeat left top;}

@media only screen and (max-width: 1023px) {

.index003 {
padding:8% 3%;}
.index003 li.left {
float:none;
width:100%;
padding:0 4% 0 0;}
.index003 li.right {
float:none;
padding:33px 0 0 0;
width:100%;}

}



.index004 {
margin:44px 0;
text-align:left;}
.index004 .left {
float:left;
width:71%;}
.index004 .right {
float:right;
width:24%;}
.index004 .left ul {
width:100%;
margin:5px 0;}
.index004 .left li {
font-size:10px;
line-height:1.5;
text-align:center;
width:20%;
padding:12px 8px;}
.index004 .left li img {
width:68%;
max-width:160px;
margin:0 0 8px 0;
box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
.index004 .left li a {
display:block;
color:#222;
position:relative;}
.index004 .left li a .new {
position:absolute;
top:0;
left:0;
width:38px;
height:38px;
line-height:38px;
background:#c00;
font-weight:bold;
color:#fff;
overflow:hidden;
border-radius:50%;}

.index004 .banner {
width:100%;}
.index004 .banner li {
text-align:center;
width:100%;
padding:5px 0;}
.index004 .banner li img {
box-shadow:0 0 1px 0 rgba(0,0,0,0.5);}

@media only screen and (max-width: 1023px) {

.index004 .left {
float:none;
width:100%;}
.index004 .right {
float:none;
width:100%;
margin:33px 0 0 0;}
.index004 .banner li {
width:33.333333%;
padding:10px 5px 0;}

}

@media only screen and (max-width: 640px) {

.index004 {
margin:8% 0;}
.index004 .left li {
width:33.333333%;}
.index004 .banner li {
width:50%;}

}

@media only screen and (max-width: 480px) {

.index004 .left li {
width:50%;}

}