@font-face {
  font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
  font-weight: thin;
  font-style: normal; }


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'
}
/*
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
*/
div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, label, a, nav, form {
	box-sizing: border-box;
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'
	/* content-box */
}
ol, ul, li {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	display: inline-block;
}
button {
	border: 0;
	background: transparent;
	cursor: pointer;
    border:0;
}
 *:focus { outline:none; }




.con-wrap{display: flex; -ms-display: flexbox; 
    flex-direction: row; flex-flow: row wrap;
    flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
    justify-content: center;
    -webkit-box-pack: center; 
    -ms-flex-pack: center;

}
.header{ 
    width: 100%;
    height: 100px;
    justify-content: center;
    display: flex;
    padding: 0.3rem 0;
    }
.header img{width: 40%; height: auto; margin: 0 45%; }
.logo{ margin: 0 auto; text-align: center;  }

.side-bar-bg{display: flex; width: 20%; padding-top: 1rem; }
.contents-container{display: flex;  width: 72%;}


/*navi toggle*/
#menu {text-decoration: none; display: hidden;}

button#menu {color: #fff;}
button#menu:after{text-decoration: none;}

#nav{display: block; width: 19%; position: absolute; top: 6.2rem; transition: all 1s linear;}





@media screen and (max-width: 1280px) 
{
    #nav{display: none; width: 96%; padding-left: 1rem; top: 7.2rem; left:0; z-index: 999; background-color: #fff; opacity: .95; transition: 2s ease-in-out;}
    #nav:before{width: 0; transition: 2s;}
    button#menu{display: inline;font-size: 3rem; color: #888; padding-left: 1rem; margin: 0; position: absolute; top:24px;left:0;}
    button#mnenu:hover+#nav{display: inline;}
    .navi-container{width: 20%; padding: 0; }
    .active{width: 95%;}
    button#menu:after{border: 0;}
    button{border: 0;}
}


/*LIST*/
.list{list-style: none; padding-left: 50px; order: 2; }
.li-top{width:100%; background-color: #36518F; text-align: right; padding: 1rem; color: #fff; font-weight: 100; margin-bottom: 16px;}
.list .li-menu{color:#aaa;  }
.li-menu a{text-decoration: none; color: #666; font-size: .85rem; line-height: 1.8rem; font-weight: 400; margin-left: 12px;}
.li-menu a:hover{background-color: #36518F; color:#fff; font-weight: 400;    display: block; width: 170px; transition: .5s; padding-left: 4px; }
.active {background-color: #1e3a70; color:#fff; font-weight: 400;    display: block; width: 100%; transition: .5s; padding-left: 0px; right:2px;}
.active a{color:#fff; font-weight: 400;margin-left: 12px; }

.li-down{padding: 1rem; background-color: #eee; position: relative; margin-top:16px;}
.li-down img{top:18px;right: 16px; position: absolute; }
.li-down a{color: #666; font-size: .9rem; text-decoration: none;} 
.li-down b{color:#36518F; font-size: .8rem;}

.contents-container{display: block;  width: 100%:}
.contents-container .ch-title{display: inline-block; width: 100%;  padding-top: 2rem; }
.ch-title h2{font-weight: 400; color: #153a8c;}

/*slide*/
.cd-slider {
	position: relative;
	width: 100%;
    height: 17.5rem;
	overflow: hidden;
    margin-left: .1rem;
}
.cd-slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	transition: visibility 0s 1s;
  will-change: visibility;
}
.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	clip: rect(0, 80rem, 50rem, 80rem);
	transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
  will-change: clip;
}
.content {
	position: absolute;
    bottom: 0;
	width: 100%;
	height: 100%;
	padding: .5rem 0 0 .5rem;
	font-size: 1rem;
	text-align: right;
    background-color: rgba(0,0,0,0.3);
}
.content h2 {
    color:#fff;
    text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	transform: translateY(-30%);
	opacity: 0;
	transition: transform .5s, opacity .5s;
    will-change: transform, opacity;
    padding-top:1.5rem;
    padding-left: .5rem;

}
.content a {
    color:#fff;
	display: block;
    text-align: left;
	font-size: .9rem;
    line-height: 1.2rem;
    font-weight: 100;
    padding-top:.7rem;
    padding-right: .5rem;
    padding-left: .5rem;
	opacity: 0;
	transform: translateY(100%);
	transition: transform .5s .1s, opacity .5s .1s;
  will-change: transform, opacity;
}
/* Current Slide 
-------------------------------------*/
li.current {
	visibility: visible;
	transition-delay: 0s;
}
li.current .image {
	clip: rect(0, 80rem, 50rem, 0);
}
li.current .content h2 {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 1s;
}
li.current .content a {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 1.1s;
}
/* Prev Slide 
------------------------------------*/
li.prev_slide .image {
	clip: rect(0, 0, 50rem, 0);
}
slidernav {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff;
	z-index: 2;
    padding: .3rem;
}
.nav_arrows{background-color: #153a8c;  }
.prev, .next, .counter {
	vertical-align: middle;
    
}
.prev, .next {
	position: relative;
	display: inline-block;
	height: 1rem;
	width: .1rem;
    border: 0;
    cursor: pointer;
    background: transparent;
}
.prev::before, .next::before {
	content: '';
	position: absolute;
	top: 50%;
    left: 2px;
	transform: translateY(-50%);
	border: .3rem solid transparent;
	border-right-width: .3rem;
	border-right-color: #eee;
	border-left-width: 0;
	width: 0;
	height: 0;
}
.prev::after, .next::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateZ(0);
	left: .1rem;
	background: #eee;
	height: .1rem;
	min-height: 1px;
	width: 0;
	transition: width .3s;
}
.next::before {
	right: 0;
  left: auto;
	border-left-width: .3rem;
    border : .3rem solid transparent;
	border-left-color: #eee;
	border-right-width: 0;
}
.next::after {
	right: .5rem;
	left: auto;
}
.counter {
    color: #fff;
	display: inline-block;
	font-size: .8rem;
	font-family: sans-serif;
    margin-top: -1px;
}
.counter span:last-child::before {
	content: '/';
	margin: 0 .3rem;
}
.prev:hover::after, .next:hover::after {
	width: .0rem;
}
/*
@media screen and ( max-width: 550px ) {
	.image { width: 1000%; }
	.content { padding-right: 2rem; }
	nav { left: 0; right: auto; }
}*/




/*card-top*/
.card {display: grid; display: -ms-grid; }
.card-item{width: 100%; height: 50%; background-size: cover; margin-bottom: 8px; margin-left: 8px;
            }
.card-item:last-child {margin-bottom: 0;}
.card-item .box{background-color: rgba(5, 5, 5, 0.3); width: 100%; height: 100%; top:0;}
.card-item a{padding-top: .3rem; padding-left: .6rem; font-size:.7rem; color: #fff;}
.card-item h3{font-size: 1.5rem; padding-top: 4rem; padding-left: .6rem; color: #fff; font-weight: 100;}


.card-container{position: absolute; top:400px; width: 72.2%;

}

/*card first*/
.card-one {display: flex; -ms-display: flexbox; 
    flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; }
.card-con {display: flex; -ms-display: flexbox; 
    flex-direction: column; 
    -webkit-box-orient: vertical; -ms-flex-direction: column;

    width: 24%; height: 190px; 
    border-bottom: 2px solid #153a8c; padding-bottom: 0px; margin-left: 10px; position: relative;

}
.card-one .card-con:nth-child(1){flex-grow:1; -webkit-flex-grow: 1; text-align: center;}
.card-one .card-con:nth-child(2){flex-grow:1; -webkit-flex-grow: 1; text-align: center;}
.card-one .card-con:nth-child(3){flex-grow:1; -webkit-flex-grow: 1; text-align: center;}
.card-one .card-con:nth-child(4){flex-grow:1; -webkit-flex-grow: 1; text-align: center;}

.card-one .card-con .dark-box{height: 80px;}
.card-con .dark-box{position: absolute; left:0;
    top:0;
	width: 100%; height: 120px;
    padding: .7rem;
    background-color: rgba(0,0,0,0.2);}
.card-con:first-child{margin-left: 0;}
.card-con .imgbox {width: 100%; height:80px;background-size: cover; background-position: center center; margin-bottom: 20px; }
.card-con h3{ font-size: 1rem; font-weight: 400; }
.card-con a{font-size: .6rem; margin-top: 8px; font-weight: 700; color:#153a8c;}




/*card two*/
.card-two{width: 100%;  display: -ms-grid;  display: grid; 
  -ms-flex-wrap: wrap; 
      flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
  -ms-grid-rows: (140px)[4];
  grid-template-rows: repeat(4, 140px);
  -ms-grid-columns: (16.6%)[6];
  grid-template-columns: repeat(130px);
  grid-gap:4px;    
}

/*grid sample*/
.main-content {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  background-image: url("images/p10_1.jpg");
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center center; 
  position: relative;
  
}
.wide-box1 {
  background-color: #666;
  color: #fff;
  padding: 10px;
  -ms-grid-row: 3;
  grid-row: 3 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 4;
  grid-column: 2 / 6;
  background-image: url(/images/p14_1.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center center;
  border: 1px solid #ddd;
  position: relative;

}
.wide-box2 {
  background-color: #666;
  color: #fff;
  padding: 10px;
  -ms-grid-row: 4;
  grid-row: 4 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  background-image: url(/images/p17_1.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center center;
  border: 1px solid #ddd;   
  position: relative;

}

.side {
  background-color: #666;
  color: #fff;
  padding: 20px;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 3 / 5;
  -ms-grid-column: 6;
  -ms-grid-column-span: 6;    
  grid-column: 6 / 6;
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center center;     
  border: 1px solid #ddd;   
  position: relative;
 
}

.small {
  padding: 10px;
  color: white;
  position: relative;
  border: 1px solid #ddd;
}
  
.small__box-1 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 ;
    -ms-grid-column: 5;
    -ms-grid-column-span: 5;
    grid-column: 5 / 6;
  }
  
.small__box-2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
  background-position: center center; 
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 ;
    -ms-grid-column: 6;
    -ms-grid-column-span: 6;
    grid-column: 6 / 7;
  }
  
.small__box-3 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
  background-position: center center; 
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 ;
    -ms-grid-column: 5;
    -ms-grid-column-span: 5;
    grid-column: 5 / 6;

  }
.small__box-4 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
  background-position: center center;
     -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 ;
    -ms-grid-column: 6;
    -ms-grid-column-span: 6;
    grid-column: 6 / 7;
  }
  
.small__box-5 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
  background-position: center center; 
     -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    grid-row: 3 ;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  
.small__box-6 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center; 
     -ms-grid-row: 4;
    -ms-grid-row-span: 4;
    grid-row: 4 ;
    -ms-grid-column: 5;
    -ms-grid-column-span: 5;
}
  
.text-box{position: absolute; 
    left:0;
    top:0;
	width: 100%;
    padding: .7rem;
    width: 100%;
	height: 100%;
    background-color: rgba(0,0,0,0.3);}

.text-up{margin-top: 1rem; top: 3rem; font-size: 1rem;}
.text-down{position: absolute; bottom:.5rem;}
.text-box h3{font-weight: 400; }
.text-box a{font-size: .8rem;}
.text-dark {color: #333; text-shadow: 0px 0px 10px #aaa;}
.text-light {color: #fff; text-shadow: 0px 0px 8px #000;}

/*card three*/
.card-three{display: flex; -ms-display: flexbox; width: 100%; margin-top: 24px; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;

}
.card-three .card-con{ display: flex; height: 220px; margin-bottom: 50px;
    display: -webkit-box; display: -ms-flexbox;
    
}
.card-three .card-con:nth-child(1){
    flex-grow:1;
    -webkit-flex-grow: 1;
    text-align: center;
}
.card-three .card-con:nth-child(2){flex-grow:1;
    -webkit-flex-grow: 1;
    text-align: center;
}
.card-three .card-con:nth-child(3){flex-grow:1;
    -webkit-flex-grow: 1;
    text-align: center;
}
.card-three .card-con:nth-child(4){flex-grow:1;
    -webkit-flex-grow: 1;
    text-align: center;
}
.card-three .imgbox{height: 120px;}
    




@media screen and (max-width: 1200px) 
{
    
    .header img{margin: 0 auto;}    
    .contents-container{width: 100%;}
    .card-container{width: 100%; ;}
    .card-one .card-con{width: 100%; height: 210px; margin: 0;}
    .card-one .card-con .dark-box{height: 100px;}

    
    .card-two{display: flex; -ms-display: flexbox; 
        flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; padding-bottom: 12px;}
    .main-content{width: 100%; height: 120px; margin-bottom: 1rem;}
    .small{width: 100%; height: 120px; margin-bottom: 1rem;}
    .wide-box1{width: 100%; height: 120px; margin-bottom: 1rem;}
    .wide-box2{width: 100%; height: 120px; margin-bottom: 1rem;}
    .side{width: 100%; height: 120px; margin-bottom: 1rem;}
    .sidebar{width: 100%; height: 120px; margin-bottom: 1rem;}
    .text-box{text-align: center;line-height: 1.4rem; position: absolute; padding-top: 2rem;}
    .text-up{position: absolute; }
    
    .card-con{margin-left: 0; }
    .card-con .imgbox{height: 100px; background-size: cover; margin-bottom: 10px;}
    .card-con h3{font-size: 1.2rem; text-align: center;} 
    .card-con a{font-size:.9rem; text-align: center;}
    .card-three .card-con{width: 100%; margin-bottom: 0; height: 210px;}
    .card-con .dark-box{height: 49%;}
    .ch-title h2{text-align: center; font-weight: 700; }

    
    
}



/*-----*/
/*POST CSS*/
/*-----*/
.wrap{position: relative; top: 2rem; background-color: #fff; width: 100%; }
.header-img{width: 100%; display: block; display: -ms-grid;  height: 400px;  background-position: center center; background-size:cover; position: relative;}

.animate-box{width: 80%; margin: 0 auto; display: block; height:8rem;
    margin-top: -10px; z-index: 333; background-color: #fff; }
.meta{display: block;  width: 18%; height: 100%; position: absolute;
    top:-130px; left:7%; text-align: right; padding-right: 5rem;
    padding-top: 1.5rem; padding-left: 1rem;background-color: #fff;}
.meta hr{width: 14%; position: absolute; height: 6px; top:1.4rem; line-height: 22px; background-color: #36518F}
.ch{display: inline; width: 100%; padding-left: 3rem; text-align: right;}
.desc{width: 68%; position: absolute; left: 25%;  top:-130px; background-color: #fff; padding: 0 2rem}
.desc h2{font-size: 2rem; font-weight: 300; color:#36518f; line-height: 3rem;padding-top: 1.4rem; padding-bottom: 3rem;}
.desc h3{font-size: 1.54rem; color:#333;line-height: 2.3rem; font-weight: 600; padding-top: .5rem; padding-bottom: 1rem}
.desc p{font-size: 1rem; color: #666; font-weight: 400; line-height: 1.7rem}
.half-img{width: 49.5%; height: 200px; display: inline-block;}
.text-cap{width: 100%; text-align: center; font-size: .8rem; }
.text-cap-left{width: 100%; text-align: left; font-size: .8rem; }

.link-text{text-decoration: none; color: #666; font-size: 1.3rem;}
blockquote{border-left: 5px solid #ccc; margin:10px; padding: 10px;}
blockquote .bq{font-weight: 200; font-size:1.4rem; line-height: 2rem;}
.bold_pink{color: steelblue;}

/*video*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; 
    overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


@media screen and (max-width: 760px) {
    .contents-container{width: 100%; padding: 1rem;}
    .card-container{padding-right: 1.8rem; justify-content: center;
    -webkit-box-pack: center; 
    -ms-flex-pack: center;}
    .card-one{width: 100%;}
    .header-img{height: 240px;}
    .animate-box{width: 100%;}
    .meta{display: none; width: 100%;}
    .desc{width: 100%; left:0; padding: 1rem;}
    .desc-head{margin-top: 1rem;}
    .desc h2{line-height: 2.5rem; margin-top: 0; padding-bottom: 1rem;}
    .half-img{width: 49.32%; height: 150px;}
}