@charset "UTF-8";

@media screen and (max-width: 768px) {
}

/*-----------------------------------------------------*/
/*------------------ページタイトル--------------------*/
/*-----------------------------------------------------*/
.p_title{
background-image: url(../img/page_title_img.webp);
background-size: cover;
}


/*-----------------------------------------------------*/
/*------------------囲み--------------------*/
/*-----------------------------------------------------*/
.filming{
margin-top: 50px;
}



/* ドローン */
/* 背景青 */
.ph-txt.drone .back{
height: 60%;
}
@media screen and (max-width: 768px) {
.ph-txt.drone .back{
height: 60%;
}
}

.drone .ph-txt_wrap{
margin-bottom: 30px;
}

.filming .drone-info{
margin-top: 20px;
}
.filming .drone-info .title{
color: var(--color-blue);
}
.filming .drone-info .beta{
background-color: var(--color-blue);
color: var(--color-white);
padding: 3px 5px;
margin: 0 5px 0 0;
border-radius: 5px;
}
.filming .drone-info .txt-en{
color: var(--color-blue);
font-size: var(--s40);
}
@media screen and (max-width: 768px) {
.filming .drone-info .txt-en{
font-size: var(--s30);
}
}

.filming .drone-info .list_maru{
display: flex;
margin-top: 10px;
}
.filming .drone-info .list_maru li{
margin: 0 10px;
}

/* 動画 */
.filming .drone-mov{
padding: 30px;
text-align: center;
background-color: var(--color-gray-light);
}
.filming .drone-mov video{
width: 60%;
}
@media screen and (max-width: 768px) {
.filming .drone-mov{
margin-top: 0;
padding: 0;
background-color:inherit;
}
.filming .drone-mov video{
width: 100%;
}
}







/*--------------------------------------------*/
/*------------------アクセス時間--------------------*/
/*--------------------------------------------*/
.access-time{
background-color: var(--color-blue-thin);
padding: 50px 0;
margin-top: 100px;
}

/* タイトルまわり */
.access-time .access-time-title{
display: flex;
}
@media screen and (max-width: 768px) {
.access-time .access-time-title{
display:block;
}
}

.access-time .access-time-title .title02{
margin: 0 30px 0 0;
}

.access-time .access-time-title p{
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.access-time .access-time-title p{
margin-top: 5px;
}
}


/* MAPと時間 */
.access-time-content{
display: grid;
grid-template-columns: 65% 1fr;
margin-top: 30px;
align-items:center;
}
@media screen and (max-width: 1090px) {
.access-time-content{
grid-template-columns: 50% 1fr;
}
}
@media screen and (max-width: 768px) {
.access-time-content{
display:block;
}
}

.access-time-content .img{
z-index: 2;
}

/* リスト */
.access-time-content .details{
background-color: var(--color-white);
border: 1px solid var(--color-blue);
padding: 30px 30px 30px 32%;
z-index: 1;
margin: 0 0 0 -100px;
position: relative;
}
@media screen and (max-width: 768px) {
.access-time-content .details{
margin: 20px 0 0 0;
padding: 30px;
}
}

.access-time-content .details dl{
  display: flex;
  align-items: center;
margin: 5px 0;
}
.access-time-content .details dl::after {
  content: '';
  border-top: 1px dotted;
  flex: auto;
margin: 0 10px;
display:inline-block;
}
.access-time-content .details dt{
display:inline-block;
}
.access-time-content .details dd{
  order: 1;
display:inline-block;
}
/* 車のイラスト */
.details-img{
position: absolute;
width: 40%;
bottom: 30px;
left:-25%;
}
@media screen and (max-width: 1090px) {
.details-img{
width: 35%;
left:-20%;
}
}
@media screen and (max-width: 768px) {
.details-img{
position:initial;
width: 50%;
margin: 20px auto 0 auto;
}
}

/* 機材ボタン */
.filming-bt{
text-align: center;
margin-top: 50px;
}
.filming-bt .bt03{
padding: 15px 50px 15px 40px;
}