/*navi*/
#navi_sp #mn_topics { opacity: .6;}
#navi_sp #mn_topics a { cursor: default; pointer-events: none;}

/*h2*/
.h2_sp { display: block; width: 69%;}
/*for_W768-*/
@media all and (min-width: 768px) { 
.h2_sp { width: 48%;}
}

/*	.panel
============================== */
div.panel { text-align: left; margin: 0px auto; padding: 0 3.125vw;}
div.panel ul { display: flex; flex-wrap: wrap;}
div.panel ul li { display: flex; flex-direction: column; position: relative; box-sizing: border-box; border: 1px solid rgba(0, 39, 122, 1); box-shadow: 2px 7px 10px 0 rgba(0, 0, 0, .2); width: -webkit-calc((100% - 3.125vw)/2);  width: calc((100% - 3.125vw)/2);  margin-bottom: 3.125vw;}
div.panel ul li:nth-child(odd) {  margin-right: 3.124vw; }
div.panel ul li a, div.panel ul li a span, div.panel ul li a span img { display: block;}
div.panel ul li a { background-color: rgba(255, 255, 255, 0.85); text-decoration: none; color: #000; /**/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /**/ overflow: hidden; display: flex; flex-direction: column; flex-grow: 1;}
div.panel ul li a:hover { background-color: rgba(255, 255, 255, 0.95);}
div.panel ul li a span.thumb { position: relative; height: 0; padding-top: -webkit-calc(9 / 16 * 100%); padding-top: calc(9 / 16 * 100%); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; margin-bottom: 8px;}
div.panel ul li a span.thumb.lazy-done { -webkit-animation: fadeIn 800ms; animation: fadeIn 800ms;}
div.panel ul li a:hover span.thumb{opacity: 0.85;}
div.panel ul li a span.thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.panel ul li a span.txt-area { display: flex; flex-direction: column; flex-grow: 1; margin: 0 8px 8px; }

div.panel ul li a span.title { /**/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /**/ flex-grow: 1; /**/ font-weight: 700; line-height: 1.4; margin-bottom: 0.25em;}
div.panel ul li a span.txt-area span.title { /**/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /**/ flex-grow: 1; /**/ font-weight: 500; line-height: 1.4; margin-bottom: 0.25em;}
div.panel ul li:first-child a span.title { font-size: 90%;}
div.panel ul li:not(:first-child) a span.title { font-size: 80%;}
div.panel ul li a span.txt-area span.date { line-height: 1.3; margin-bottom: 0.25em; color: rgba(24, 43, 119, 1); font-weight: 700;
 font-family: "oswald", sans-serif;}
div.panel ul li:first-child a span.date { font-size: 120%;}
div.panel ul li:not(:first-child) a span.date { font-size: 90%;}
div.panel ul li a span.txt-area span.category { display: none;}




@media all and (min-width: 992px) { 
div.panel ul li {  width: -webkit-calc((100% - 2*20px)/3);  width: calc((100% - 2*20px)/3);  margin-bottom: 20px; }
div.panel ul li:not(:nth-child(3n)) {  margin-right: 20px; }
div.panel ul li a {  /*border-radius:16px;*/ }
div.panel ul li a span.thumb {  margin-bottom: 16px; }
div.panel ul li a span.txt-area {  margin: 0 16px 16px; }
}

@media all and (min-width: 1200px) { 
div.panel {  max-width: 1000px; }
div.panel ul li a span.txt-area span.title {  line-height: 1.6; }
}

/*	more btn
============================== */
div.panel ul li.hidden { display: none;}
div.btn-more { text-align: center; margin: 1.25em auto;}
div.btn-more a { font-family: "shippori-mincho-b1", sans-serif; font-weight: 800; font-style: normal; color: #fff; background-color: rgba(0, 39, 122, 1); display: block; line-height: 1.25; align-items: center; text-decoration: none; position: relative; left: 0; width: 100%; text-align: center; margin: 0 auto; padding:0.8em 0; transition:0.5s;}
div.btn-more a:before { content: "MORE"; display: inline-block;}
div.btn-more a > span { display: inline-block; width: 1em; height: 1em; position: relative; margin-left: 0.5em; top: .15em;}
div.btn-more a > span:before, div.btn-more a > span:after { content: ""; display: inline-block; background-color: #fff; position: absolute;}
div.btn-more a > span:before { width: .9em; height: 3px; left: 0; top: 49%; margin-top: -3px;}
div.btn-more a > span:after { width: 3px; height: .9em; top: 0; left: 50%; margin-left: -3px;}
div.btn-more a:hover { filter: brightness(1.1);}

@media all and (min-width: 992px) {
div.btn-more {width: 300px;}
div.btn-more a {  font-size: 120%;}
}

@media all and (max-width: 991.98px) { 
div.btn-more {width: 240px;}
div.btn-more a {  font-size: 110%;}
div.btn-more a > span:before {  width: .9em;  height: 2px;  left: 0;  top: 49%;  margin-top: -2px; }
div.btn-more a > span:after {  width: 2px;  height: .9em;  top: 0;  left: 50%;  margin-left: -2px; }
}

/*	.first-large
============================== */
@media all and (min-width: 992px) { 
div.first-large.panel ul li:first-child {  /* margin-bottom:64px; */ }
div.first-large.panel ul li:not(:nth-child(3n)) {  margin-right: 0; }
div.first-large.panel ul li:not(:nth-child(3n+1)) {  margin-right: 20px; }
div.first-large.panel ul li:first-child a span.txt-area {  margin: 0 32px 24px; }
div.first-large.panel ul li:first-child a span.thumb:not(:last-child) {  margin-bottom: 16px; }
div.first-large.panel ul li:first-child a span.txt-area span.txt {  font-size: 175%; }
div.first-large.panel ul li:first-child a span.txt-area span.date {  font-size: 112.5%; }
}

@media all and (max-width: 991.98px) { div.first-large.panel ul li:first-child {  /* margin-bottom:24px; */ }
div.first-large.panel ul li:nth-child(odd) {  margin-right: 0; }
div.first-large.panel ul li:nth-child(even) {  margin-right: 3.125vw;  margin-right: 3.123vw; }
div.first-large.panel ul li:first-child a span.thumb:not(:last-child) {  margin-bottom: 12px; }
div.first-large.panel ul li:first-child a span.txt-area {  margin: 0 24px 12px; }
div.first-large.panel ul li:first-child a span.txt-area span.txt {  font-size: 112.5%; }
div.first-large.panel ul li:first-child a span.txt-area span.date {  font-size: 87.5%; }
div.first-large.panel ul li:first-child a span.txt-area span.outgoing {  font-size: 83%; }
}

@media all and (min-width: 768px) and (max-width: 991.98px) { 
div.first-large.panel ul li:first-child a span.txt-area span.txt {  font-size: 125%; }
div.first-large.panel ul li:first-child a span.txt-area span.date {  font-size: 100%; }
div.first-large.panel ul li:first-child a span.txt-area span.outgoing {  font-size: 87.5%; }
}
div.first-large.panel ul li:first-child { width: 100%; margin-right: 0;}

p.button { position: relative; margin-left: auto;}
p.button a { text-align: center;  margin: 0 auto; padding:0; border:solid 2px #43A1A5; font-family: "shippori-mincho-b1", sans-serif; font-weight: 800; font-style: normal; color: #24A197; transition:0.5s; background-color: #fff; background-image: url(../img/btn_arrow.png); background-repeat: no-repeat; display: table; width: 100%; z-index: 100;}
p.button a:hover { filter: brightness(1.1);}
p.button a span {vertical-align: middle;display: table-cell; line-height: 1.3em; }

@media all and (min-width: 768px) {
#contentsArea .wrap { width: 1000px; padding-bottom: 35px; margin-top: -100px;}
p.button { width: 280px;}
p.button a { height: 60px; font-size: 1.3em; border-radius: 30px;  -webkit-border-radius: 30px;  -moz-border-radius: 30px; background-position:right 17px center; background-size: 20px 20px;}
p.button a span {padding-right: 20px;}
}
@media all and (max-width: 767px) {
#contentsArea .wrap { padding-bottom: 1em; margin-top: -20px;}
p.button { width: 200px;}
p.button a { height: 45px; font-size: 1.05em; border-radius: 23px;  -webkit-border-radius: 23px;  -moz-border-radius: 23px; background-position:right 10px center; background-size: 16px 16px;}
p.button a span {padding-right: 13px;}
}