@charset "UTF-8";


#slide01 .img_slide{
display: none;
}


/*********** スライド ***********/
.top_text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
color:#fff;
z-index: 9000;
padding: 0px 0 0 0;
}
.top_text img {
}
@media screen and (orientation: landscape) and (max-width:1024px) {
.top_text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
color:#fff;
z-index: 9000;
padding: 80px 0 0 0;
text-align: center;
}
.top_text img {
width: 80%;
height: auto;
text-align: center;
margin: 0px auto 0 auto;
}
}
#slide01 {
position: relative;
width:100%;
background-size: cover;
}
.glid {
position: absolute;
height:100%;
width:100%;
background: url(../img/grid.png);
}
#slide01 form {
position: absolute;
right:30px;
bottom:20px;
z-index: 1000;
}
.block01 {
width:100%;
position: relative;
margin: 0px auto 0px auto;
}


/* --------------------
更新情報
-------------------- */
@media screen and (min-width: 641px),print {
.news-block {
width:100%;
position: relative;
margin-top: -10px;
background-color: #174F9E;
color: #fff;
padding: 40px 0 20px 0;
}
.news-block h2.section_title {
padding: 20px 0;
font-size: 20px;
}
.news-block .news-item {
}
.news-block .news-item ul.news-item-area {
max-width: 1000px;
max-height: 100px;
margin: 0 auto;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
padding-right: 10px;
}
.news-block .news-item ul.news-item-area li {
position: relative;
padding-left: 111px;
border-bottom: 1px solid #5d84bb;
padding-bottom: 7px;
}
.news-block .news-item ul.news-item-area li + li {
margin-top: 7px;
}
.news-block .news-item ul.news-item-area li span {
display: block;
width: 110px;
position: absolute;
top: 0;
left: 0;
}
.news-block .news-item ul.news-item-area li a {
color: #fff;
display: block;
word-break: break-all;
}
.news-block .news-item ul.news-item-area li a:hover {
opacity: 0.8;
}
}

@media screen and (min-width: 0px) and (max-width: 640px) {
.news-block {
width:100%;
float:none;
display: block;
background-color: #174F9E;
color: #fff;
padding: 20px 0 20px 0;
}
.news-block .news-item ul.news-item-area {
max-width: 100%;
height: auto;
max-height: auto;
margin: 0 auto;;
overflow: hidden;
padding-right: 0;
}
}

/* スクロールバー調整 */
.news-block ::-webkit-scrollbar {
width: 10px;
background-color: #e8eef5;
}
.news-block ::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 10px;
}

@media only screen and (max-width:768px) {
.news-block h2.section_title {
font-size:18px;
}
.news-block .news-item {
margin: 0 20px;
padding: 0.5em 0 0 0;
}
.news-block .news-item ul.news-item-area li {
padding: 0 0 1em 0;
font-size:16px;
line-height: 1.5em;
position: relative;
}
.news-block .news-item ul.news-item-area li span {
font-family: Arial, Helvetica, "sans-serif";
width: auto;
position: relative;
font-size:13px;
line-height: 1.2em;
display: block;
}
.news-block .news-item ul.news-item-area li a {
position: relative;
color: #FFF;
display: block;
padding: 0 1.5em 0 0;
}
.news-block .news-item ul.news-item-area li a:after {
content: ">";
position: absolute;
top: 45%;
right: 0;
transform: translateY(-50%);
}
}

#thumb {
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
#thumb:before {
width: 100%;
height: 100%;
content: '';
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
background-image: url(../img/grid.png);
background-size: 3px auto;
background-color: rgba(000,000,000,0.4);
z-index: 11;
}
#thumb div {
width:50%;
float:none;
position: relative;
overflow: hidden;
}
#thumb div:before {
content:"";
display: block;
padding-top: 66%;
}
.cap01,
.cap02,
.cap03,
.cap04{
background: #ccc;
padding: 20px 0 20px 0;
}
.thumb2 .cap01,
.thumb3 .cap03,
.thumb4 .cap04,
.thumb5 .cap02 {
background:url(../img/01.jpg);
background-size:cover;
transition: 0.5s;
}
.thumb1 .cap02,
.thumb3 .cap01,
.thumb4 .cap03,
.thumb5 .cap04 {
background:url(../img/05.jpg);
background-size:cover;
transition: 0.5s;
}
.thumb1 .cap04,
.thumb2 .cap02,
.thumb4 .cap01,
.thumb5 .cap03 {
background:url(../img/01.jpg);
background-size:cover;
transition: 0.5s;
}
.thumb1 .cap03,
.thumb2 .cap04,
.thumb3 .cap02,
.thumb5 .cap01 {
background:url(../img/02.jpg);
background-size:cover;
transition: 0.5s;
}
.thumb1 .cap01,
.thumb2 .cap03,
.thumb3 .cap04,
.thumb4 .cap02 {
background:url(../img/03.jpg);
background-size:cover;
transition: 0.5s;
}

@media screen and (min-width: 0px) and (max-width: 640px) {
.block01 {
width:100%;
float:none;
position: relative;
margin: 0px auto 0 auto;
}
#thumb {
width:100%;
float:none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 10;
}
#thumb div {
width:50%;
float:none;
position: relative;
overflow: hidden;
padding: 20px 0 20px 0;
}
#thumb div:before {
content:"";
display: block;
padding-top: 66%;
}
.cap01,
.cap02,
.cap03,
.cap04{
background: #ccc;
}
.thumb2 .cap01,
.thumb3 .cap03,
.thumb4 .cap04,
.thumb5 .cap02 {
background:url(../img/01.jpg);
background-size:cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
transition: 2s;
}
.thumb1 .cap02,
.thumb3 .cap01,
.thumb4 .cap03,
.thumb5 .cap04 {
background:url(../img/05.jpg);
background-size:cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
transition: 2s;
}
.thumb1 .cap04,
.thumb2 .cap02,
.thumb4 .cap01,
.thumb5 .cap03 {
background:url(../img/01.jpg);
background-size:cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
transition: 2s;
}
.thumb1 .cap03,
.thumb2 .cap04,
.thumb3 .cap02,
.thumb5 .cap01 {
background:url(../img/02.jpg);
background-size:cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
transition: 2s;
}
.thumb1 .cap01,
.thumb2 .cap03,
.thumb3 .cap04,
.thumb4 .cap02 {
background:url(../img/03.jpg);
background-size:cover;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
transition: 2s;
}
}

@media only screen and (max-width:640px) {
/* スライド */
#slide01 {
position: relative;
float:none;
display: block;
width: 100%;
z-index: 1;
line-height: 0;
}
#slide01:before {
position: absolute;
height: 100%;
width: 100%;
background: url(../img/grid.png);
}
.top_text {
width: 50%;
padding: -25% 0 0 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
color:#fff;
position: absolute;
z-index: 10;
line-height: 1;
}

.block01 {

}
.block01 .message {
background-color:#1e519a;
color:#fff;
margin:5% 3%;
padding:20px 15px 25px;
}
.block01 .message p {
text-align:left;
margin-top:20px;
}
.block01 .message .txt_center{
text-align: center;
}
.block01 .message p img {
width:257px;
}
}
@media only screen and (max-width:320px) {
.block01 .message {
padding-left:15px;
padding-right:15px
}
}

/* --------------------
ブロック01
-------------------- */
@media screen and (min-width: 641px),print {
.message01 {
position: absolute;
z-index: 1000;
width:600px;
padding:50px 0 50px 0;
box-sizing: border-box;
background:url(../img/blue.png);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
color:#fff;
}
.section_title {
font-size:23px;
margin: 0px auto 0 auto;
text-align: center;
}
.section_title span {
display: block;
font-size:12px;
margin-top:-2px;
width:100%;
margin-bottom:15px;
background:url(../img/arrow.png);
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom:10px;
text-transform: uppercase;
}
.message01 h3 {
font-size:32px;
margin-bottom:30px;
}
.message01 h4 {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 26px;
line-height: 1.8em;
padding: 1em 0 1.5em 0;
}
.message01 p {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:16px;
line-height: 2em;
}
}

@media only screen and (max-width:640px) {
.message01 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
z-index: 1000;
width:90%;
padding:1em;
box-sizing: border-box;
background:url(../img/blue.png);
text-align: center;
color:#fff;
}
.section_title {
font-size:18px;
font-weight:bold;
text-align:center;
}
.section_title span {
display: block;
font-size:10px;
}
.message .section_title span {
background:none;
padding-bottom:0;
}
.message01 h4 {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 16px;
line-height: 1.2em;
padding: 1em 0 1em 0;
}
.message01 p {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:13px;
line-height: 1.5em;
}
.message01 p br {
display: none;
}
}

/* --------------------
ブロック03
-------------------- */
.block03 {
width: 100%;

}
.top_company a{
display: block;
padding: 205px 0;
text-align: center;
background: url(../img/bg_company.jpg);
background-size: cover;
background-position: center center;
color: #fff;
text-decoration: none;
}
.top_company a:hover{
opacity: 0.9;
}
.banners {
width:890px;
margin:60px auto 0;
}
.banners ul{
display: flex;
justify-content: flex-start;
}
.banners ul li{
padding: 0 10px;
}
.contact .foot_contact li a:hover,
.banners li a:hover{
opacity: 0.8;
}
@media only screen and (max-width:640px) {
.block03 {

}
.block03 .top_company a {
padding:75px;
background-image:url(../img/bg_company_sp.jpg);
}
.block03 .contact {
padding:30px 0;
}
.block03 .contact h3 {
font-size:18px;
font-weight:bold;
}
.block03 .contact p {
font-size:13px;
margin:15px 15px 0;
}
.block03 .contact .foot_contact {
margin-top:30px;
}
.block03 .contact .foot_contact ul {
width:90%;
padding:0 5%;
}
.block03 .contact .foot_contact ul li {
width:100%;
border-bottom:2px solid #fff;
}
.block03 .contact .foot_contact ul li:first-of-type {
border-top:2px solid #fff;
}
.block03 .contact .foot_contact ul li a {
display:block;
font-size:20px;
padding:15px 0;
color:#fff;
font-weight:bold;
line-height:1.3;
}
.block03 .contact .foot_contact ul li:last-of-type a span {
font-size:14px;
font-weight:normal;
display:block;
}
.block03 .contact .banners {
margin-top:30px;
width:100%;
}
.block03 .contact .banners ul{
display: block;
}
.block03 .contact .banners ul li {
width: 100%;
margin: 5px 0;
padding:0 5%;
box-sizing: border-box;
}
}
@media only screen and (max-width:320px) {
.block03 .contact .foot_contact ul li a {
font-size:17px;
}
.block03 .contact .foot_contact ul li:last-of-type a span {
font-size:12px;
}
}

/* 基本レイアウト */
.pager {
display: flex;
justify-content: center;
margin: 24px 0;
font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.pagination {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
margin: 0;
list-style: none;
}
/* 各アイテム */
.page-item {}
/* リンク/ボタン共通 */
.page-link {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.3em 0.5em 0.3em 0.5em;
color: #FFF;
text-decoration: none;
line-height: 1;
font-size: 16px;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* ホバーとフォーカス */
.page-link:hover { background: #f3f4f6;
color: #000;
}
.page-link:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59,130,246,.35);
border-color: #93c5fd;
}
/* アクティブ（現在ページ） */
.page-item.is-active .page-link {
background: #111827;
color: #fff;
cursor: default;
}
/* 無効化（先頭/末尾での < > など） */
.page-item.is-disabled .page-link {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
/* 小さめ端末での折返し */
@media (max-width: 420px) {
.pagination { flex-wrap: wrap; row-gap: 10px; }
.page-link { font-size: 14px; }
}


/* --------------------
動画アーカイブ集バナー
-------------------- */

.bnr-movie {
background-color: #174F9E;
padding: 80px 20px 0;
}
.bnr-movie a {
display: block;
max-width: 1000px;
margin: 0 auto;
}
.bnr-movie a:hover {
opacity: 0.8;
}
@media only screen and (max-width:768px) {
.bnr-movie {
padding-top: 40px;
}
}