@charset "UTF-8";



.list {width: 1160px;margin: auto;}
.list ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.list ul li {
width: calc(30% - 16px);
margin: 0 5% 5% 0;
padding: 0 16px 16px 0;
background:
  linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0 100%),
  repeating-linear-gradient(
    -45deg,
    rgba(55, 128, 192, 0.3) 0px 1px,
    rgba(0, 0, 0, 0) 3px 6px
  );
background-repeat: no-repeat;
background-size: calc(100% - 16px) calc(100% - 16px);
background-position: 0 0, 16px 16px;
}

.list ul li .back_block {background: #fff;}
.list ul li .back {background: rgba(55,128,192,0.1);}
.list ul li .back a {transition: 0.5s;text-decoration: none;}
.list ul li .back a:hover { opacity: 0.75;
transition: 0.5s; }
.list ul li:nth-child(3n) {margin-right: 0;}
.list ul li .list_pic {width: 100%;height: auto;position: relative;}
.list ul li .list_pic::before {
content: '';
display: block;
padding-top: 66.67%;
}
.list ul li .list_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.list_text {padding: 20px;text-align: left;}
.list_text h2 {font-size: 18px;line-height: 1.6;font-weight: 700;color: #3780c0;margin: 0 0 5px;text-decoration: none;}
.list_text p.adress {font-size: 14px;line-height: 20px;position: relative;padding: 0 0 0 20px;text-decoration: none;color: #000;}
.list_text p.adress:before {
content: '';/*何も入れない*/
display: inline-block;
width:18px;/*画像の幅*/
height:18px;/*画像の高さ*/
background-image: url("images/icon01.svg");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%);
}
@media screen and (max-width: 1060px) {


.list {width: 90%;margin: auto;}
.list ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.list ul li {
width: calc(48% - 16px);
margin: 0 4% 4% 0;
padding: 0 16px 16px 0;
background:
linear-gradient(135deg, #FFF 0 100%),
repeating-linear-gradient(-45deg, #3780c0 0px 1px, transparent 3px 6px);
background-repeat: no-repeat;
background-size: calc(100% - 16px) calc(100% - 16px);
background-position: 0 0, 16px 16px;
}
.list ul li .back {background: rgba(55,128,192,0.1);}
.list ul li .back a {transition: 0.5s;text-decoration: none;}
.list ul li .back a:hover { opacity: 0.75;
transition: 0.5s; }
.list ul li:nth-child(3n) {margin-right: 4%;}
.list ul li:nth-child(2n) {margin-right: 0;}
.list ul li .list_pic {width: 100%;height: auto;position: relative;}
.list ul li .list_pic::before {
content: '';
display: block;
padding-top: 66.67%;
}
.list ul li .list_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.list_text {padding: 20px;text-align: left;}
.list_text h2 {font-size: 18px;line-height: 1.6;font-weight: 700;color: #3780c0;margin: 0 0 5px;text-decoration: none;}
.list_text p.adress {font-size: 14px;line-height: 20px;position: relative;padding: 0 0 0 20px;text-decoration: none;color: #000;}
.list_text p.adress:before {
content: '';/*何も入れない*/
display: inline-block;
width:18px;/*画像の幅*/
height:18px;/*画像の高さ*/
background-image: url("images/icon01.svg");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%);
}

}
@media screen and (max-width: 767px) {
.list {width: 90%;margin: auto;}
.list ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.list ul li {
width: calc(100% - 16px);
margin: 0 0 5% 0;
padding: 0 16px 16px 0;
background:
linear-gradient(135deg, #FFF 0 100%),
repeating-linear-gradient(-45deg, #3780c0 0px 1px, transparent 3px 6px);
background-repeat: no-repeat;
background-size: calc(100% - 16px) calc(100% - 16px);
background-position: 0 0, 16px 16px;
}
.list ul li .back {background: rgba(55,128,192,0.1);}
.list ul li .back a {transition: 0.5s;text-decoration: none;}
.list ul li .back a:hover { opacity: 0.75;
transition: 0.5s; }
.list ul li:nth-child(3n) {margin-right: 0;}
.list ul li:nth-child(2n) {margin-right: 0;}
.list ul li .list_pic {width: 100%;height: auto;position: relative;}
.list ul li .list_pic::before {
content: '';
display: block;
padding-top: 66.67%;
}
.list ul li .list_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.list_text {padding: 20px;text-align: left;}
.list_text h2 {font-size: 18px;line-height: 1.6;font-weight: 700;color: #3780c0;margin: 0 0 5px;text-decoration: none;}
.list_text p.adress {font-size: 14px;line-height: 20px;position: relative;padding: 0 0 0 20px;text-decoration: none;color: #000;}
.list_text p.adress:before {
content: '';/*何も入れない*/
display: inline-block;
width:18px;/*画像の幅*/
height:18px;/*画像の高さ*/
background-image: url("images/icon01.svg");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%);
}
}




.list_btn {padding: 20px 0 0;}
.list_btn span {text-align: center;width: 90%;margin: 0 0 0 10%;}
.list_btn p {z-index: 999;
display:inline-flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 10px 0 8px;
background: #3780c0;
color: #fff;
font-size: 14px;
line-height: 1;
font-weight: 600;
transition: 0.3s;
text-decoration: none;
text-align: center;
width: 100%;
}
.list_btn p::after {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
margin: 0 10px 0 10px;
}

@media screen and (max-width: 1060px) {
.list_btn {}
.list_btn span {text-align: center;width: 90%;margin: 0 0 0 5%;}
.list_btn p {z-index: 999;
display:inline-flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 10px 16px 8px;
background: #3780c0;
color: #fff;
font-size: 14px;
line-height: 1;
font-weight: 600;
transition: 0.3s;
text-decoration: none;
text-align: center;
width: 352px;
}
.list_btn p::after {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
margin: 0 0 0 10px;
}
}
@media screen and (max-width: 767px) {
.list_btn {}
.list_btn span {text-align: center;}
.list_btn p {z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 5%;
background: #3780c0;
color: #fff;
font-size: 3vw;
line-height: 1;
font-weight: 600;
transition: 0.3s;
text-decoration: none;
text-align: center;
width: 90%;
box-sizing: content-box;
}
.list_btn p::after {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
margin: 0;
}
}



.pic_back {background: #eee;padding: 0 0 4%;position: relative;}
.pic_back h1.sub_title {display: inline-block; background: #3780c0;padding: 14px 5%; color: #fff; font-size: 24px;line-height: 1.6;font-weight: 700;
margin: 0 0 6%;
width: 90%;

}
.pic {width: 1160px;margin: auto;}
.pic ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.pic ul li {width: 32%;margin: 0 2% 2% 0;}
.pic ul li {}
.pic ul li:nth-child(3n) {margin-right: 0;}
.pic ul li .ditail_pic {width: 100%;height: auto;position: relative;}
.pic ul li .ditail_pic::before {
content: '';
display: block;
padding-top: 66.67%;}
.pic ul li .ditail_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.pic ul li a {transition: 0.5s;text-decoration: none;}
.pic ul li a:hover { opacity: 0.75;
transition: 0.5s; }

@media screen and (max-width: 1060px) {
.pic_back {background: #eee;padding: 0 0 80px;position: relative;}
.pic_back h1.sub_title {display: inline-block; background: #3780c0;padding: 14px 5%; color: #fff; font-size: 24px;line-height: 1.6;font-weight: 700;margin: 0 0 80px;
width: 90%;
}
.pic {width: 90%;margin: auto;}
.pic ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.pic ul li {width: 32%;margin: 0 2% 2% 0;}
.pic ul li {}
.pic ul li:nth-child(3n) {margin-right: 0;}
.pic ul li .ditail_pic {width: 100%;height: auto;position: relative;}
.pic ul li .ditail_pic::before {
content: '';
display: block;
padding-top: 66.67%;}
.pic ul li .ditail_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.pic ul li a {transition: 0.5s;text-decoration: none;}
.pic ul li a:hover { opacity: 0.75;
transition: 0.5s; }
}
@media screen and (max-width: 767px) {
.pic_back {background: #eee;padding: 0 0 4%;position: relative;}
.pic_back h1.sub_title {display: inline-block; background: #3780c0;padding: 12px 5%; color: #fff; font-size: 3.4vw;line-height: 1.6;font-weight: 700;

width: 90%;
margin: 0 auto 6%;

}
.pic {width: 90%;margin: auto;}
.pic ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.pic ul li {width: 48%;margin: 0 4% 4% 0;}
.pic ul li {}
.pic ul li:nth-child(3n) {margin-right: 4%;}
.pic ul li:nth-child(2n) {margin-right: 0;}
.pic ul li .ditail_pic {width: 100%;height: auto;position: relative;}
.pic ul li .ditail_pic::before {
content: '';
display: block;
padding-top: 66.67%;}
.pic ul li .ditail_pic img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: auto;height: auto;max-width: 100%;max-height: 100%;}
.pic ul li a {transition: 0.5s;text-decoration: none;}
.pic ul li a:hover { opacity: 0.75;
transition: 0.5s; }
}




.under_block {width: 800px;margin: auto;padding: 60px 0 0;}
.madori {width: 100%;margin: 0 0 60px;}
.madori img {width: 100%;height: auto;}
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;  /* 比率を固定（4/3等に変更可） */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 必要に応じて contain に変更 */
}
@media screen and (max-width: 1060px) {


}
@media screen and (max-width: 767px) {
.under_block {width: 100%;margin: auto;padding: 10% 0 5%;}
.madori {width: 100%;margin: 0 0 10%;}
}