@charset "utf-8";

/***************************************************************************

  共通

***************************************************************************/

/*--------------------------------------------------------------------------
タイトル
--------------------------------------------------------------------------*/
.titleBlock {
  height: 230px;
  margin: 0 0 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #EBF6FC;
  background: linear-gradient(90deg, rgba(235, 246, 252, 1) 0%, rgba(207, 236, 251, 1) 100%);
}

main.qa .titleBlock h1,
main.privacy .titleBlock h1,
main.inq .titleBlock h1,
main.links .titleBlock h1,
main.other .titleBlock h1 {
  font-size: 3.8rem;
  font-weight: bold;
  color: #1073E5;
}
main.qa .titleBlock p,
main.inq .titleBlock p {
  margin: 18px 0 0 0;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .titleBlock {
    height: 176px;
    margin: 0 0 32px;
  }
  main.qa .titleBlock h1,
  main.privacy .titleBlock h1,
  main.inq .titleBlock h1,
  main.links .titleBlock h1,
  main.other .titleBlock h1 {
    font-size: 2.6rem;
  }
  main.qa .titleBlock p,
  main.inq .titleBlock p {
    margin: 10px 0 0 0;
  }
}

main.qa h2,
main.inq h2 {
  font-size: 2.6rem;
  font-weight: bold;
  margin: 64px 0 32px;
}

main.links h2 {
  font-size: 3rem;
  font-weight: bold;
  margin: 55px 0 32px;
}

main.privacy h2,
main.other h2 {
  font-size: 3rem;
  font-weight: bold;
  margin: 80px 0 32px;
}
main.privacy h3 {
  margin: 64px 0 32px;
  padding: 0 0 12px;
  font-size: 2.6rem;
  font-weight: bold;
  border-bottom: 1px solid #1073E5;
}

@media screen and (max-width: 767px) {
  main.qa h2,
  main.inq h2 {
    font-size: 2rem;
    margin: 32px 0 16px;
  }

  main.links h2 {
    font-size: 2.2rem;
    margin: 40px 0 20px;
  }

  main.privacy h2,
  main.other h2 {
    font-size: 2.2rem;
    margin: 32px 0 20px;
  }
  main.privacy h3 {
    margin: 32px 0 20px;
    font-size: 2rem;
  }
}


/***************************************************************************

  松山空港について
  /about/

***************************************************************************/
main.about .titleBlock {
  background: url(../img/about/bg_title.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  height: 320px;
  display: flex;
}
main.about .titleBlock::after {
  background: rgba(0, 0, 0, 0.3);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
main.about .titleBlock h1,
main.about .titleBlock p {
  position: relative;
  color: #ffffff !important;
  z-index: 1;
}
main.about .titleBlock h1 {
  font-size: 4.2rem;
  line-height: 1.2;
  font-weight: bold;
}
main.about .titleBlock p {
  margin: 16px 0 0 0;
  font-weight: bold;
}
main.about h2 {
  font-size: 3rem;
  font-weight: bold;
  margin: 0 0 24px;
}
main.about table.lwrCommonTable th {
  width: 246px;
}
main.about table.lwrCommonTable td {
  width: calc(100% - 246px - 24px);
}

@media screen and (max-width: 767px) {
  main.about .titleBlock {
    background: url(../img/about/bg_title-sp.jpg) no-repeat center;
    background-size: cover;
    height: 210px;
  }
  main.about .titleBlock h1 {
    font-size: 2.9rem;
  }
  main.about .titleBlock p {
    margin: 10px 0 0 0;
  }
  main.about h2 {
    font-size: 2.2rem;
  }
  main.about table.lwrCommonTable th {
    width: 100%;
  }
  main.about table.lwrCommonTable td {
    width: 100%;
  }
}


/***************************************************************************

  プライバシーポリシー
  /privacy.html

***************************************************************************/
main.privacy section p {
  margin-bottom: 2rem;
}
main.privacy section p:last-child {
  margin-bottom: 0;
}
main.privacy .boxLineBox strong {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 18px;
}
main.privacy section a[target="_blank"] {
  background: url(../img/icon_blank.png) no-repeat right center;
  background-size: 20px;
  padding-right: 28px;
}

@media screen and (max-width: 767px) {
  main.privacy section p {
    margin-bottom: 1.6rem;
  }
  main.privacy section p:last-child {
    margin-bottom: 0;
  }
  main.privacy .boxLineBox strong {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 18px;
  }
  main.privacy section a[target="_blank"] {
    background: url(../img/icon_blank.png) no-repeat right center;
    background-size: 20px;
    padding-right: 28px;
  }
}


/***************************************************************************

  お問い合わせ
  /inq/

***************************************************************************/
main.inq .boxLineBox dt {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 18px;
}
main.inq .boxLineBox div:last-child a {
  width: 420px;
  padding: 18px 23px;
  display: block;
  color: #ffffff;
  font-weight: bold;
  background: #1D97E8 url(../img/arrow_white-circle-right.png) no-repeat right center;
  background: linear-gradient(90deg, rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.2);
}
main.inq .boxLineBox div:last-child a span {
  display: block;
  background: url(../img/arrow_white-circle-right.png) no-repeat right center;
  background-size: 23px auto;
}
main.inq .boxLineBox div:last-child a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

main.inq table.inqTable {
  width: 100%;
  border-bottom: 1px solid #DEDEDE;
}
main.inq table.inqTable tr {
  border-top: 1px solid #DEDEDE;
}
main.inq table.inqTable th {
  font-weight: bold;
}
main.inq table.inqTable th a {
  text-decoration: underline;
}
main.inq table.inqTable th a:hover {
  text-decoration: none;
}
main.inq table.inqTable a[target="_blank"] {
  background: url(../img/icon_blank.png) no-repeat right center;
  background-size: 20px;
  padding-right: 28px;
}
main.inq table.inqTable td {
  width: 500px;
  padding: 24px 0;
}
main.inq table.inqTable td p {
  margin: 0 0 6px;
}
main.inq table.inqTable td div {
  font-size: 2.4rem;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #1073E5;
  line-height: 1.4;
}
main.inq table.inqTable td div small {
  font-size: 1.4rem;
  font-weight: 400;
  display: block;
  color: #333333;
}
main.inq table.inqTable td .tel {
  padding-left: 54px;
  background: url(../img/icon_tel.png) no-repeat left center;
  background-size: 40px;
}
main.inq table.inqTable td .mail {
  padding-left: 54px;
  background: url(../img/icon_mail.png) no-repeat left center;
  background-size: 40px;
}
main.inq table.inqTable td .link {
  font-size: 1.6rem;
  font-weight: normal;
  color: #333333;
}
main.inq table.inqTable td .link a,
main.inq h2 + p a {
  color: #1073E5;
  text-decoration: underline;
}
main.inq table.inqTable td .link a:hover,
main.inq h2 + p a:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  main.inq .boxLineBox dt {
    margin: 0 0 12px;
  }
  main.inq .boxLineBox div:last-child {
    margin: 24px 0 0 0;
  }
  main.inq .boxLineBox div:last-child a {
    width: 100%;
    font-size: 1.6rem;
    padding: 13px 23px 15px;
  }
  main.inq table.inqTable tr {
    display: flex;
    flex-direction: column;
  }
  main.inq table.inqTable th,
  main.inq table.inqTable td {
    width: 100%;
  }
  main.inq table.inqTable th {
    padding: 24px 0 0;
    font-size: 1.6rem;
  }
  main.inq table.inqTable td {
    padding: 21px 0 24px;
  }
  main.inq table.inqTable td div.mail {
    font-size: 2.1rem;
  }

}


/***************************************************************************

  リンク集
  links.html

***************************************************************************/
main.links .linksBox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
}
main.links .linksBox ul li {
  padding: 24px 0;
  width: calc((100% / 3) - 22px);
  border-top: 1px solid #DEDEDE;
}
main.links .linksBox ul li:nth-child(1),
main.links .linksBox ul li:nth-child(2),
main.links .linksBox ul li:nth-child(3) {
  border-top: none;
  padding-top: 12px;
}
main.links .linksBox ul li a {
  text-decoration: underline;
}
main.links .linksBox ul li a[target="_blank"] {
  background: url(../img/icon_blank.png) no-repeat right center;
  background-size: 20px;
  padding-right: 28px;
}
main.links .linksBox ul li a:hover {
  text-decoration: none;
  transition: 0.3s;
}
main.links .boxLineBox {
  margin: 80px 0 0 0;
}
main.links .boxLineBox dt {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 18px;
}
main.links .boxLineBox dd p {
  margin: 0 0 10px;
}

@media screen and (max-width: 767px) {
  main.links .linksBox ul {
    display: block;
  }
  main.links .linksBox ul li {
    width: 100%;
    padding: 20px 0;
  }
  main.links .linksBox ul li:nth-child(1) {
    padding-top: 0;
  }
  main.links .linksBox ul li:nth-child(2),
  main.links .linksBox ul li:nth-child(3) {
    border-top: 1px solid #DEDEDE;
    padding-top: 20px;
  }
  main.links .boxLineBox {
    margin: 40px 0 0 0;
  }
  main.links .boxLineBox dt {
    margin: 0 0 12px;
  }
}


/***************************************************************************

  よくあるご質問
  q-and-a.html

***************************************************************************/
.qaBox details {
  border-bottom: 1px solid #DEDEDE;
}
.qaBox details:last-child {
  border-bottom: none;
}
.qaBox summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  padding: 24px 0;
  font-weight: bold;
  transform: 0.3s;
}
.qaBox summary::-webkit-details-marker {
  display: none;
}
.qaBox .icon {
  display: block;
  position: relative;
  width: 24px;
  transform-origin: center 43%;
  transition: transform 0.4s;
}
.qaBox .icon::before,
.qaBox .icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  border-radius: 4px;
  background-color: #1073E5;
}
.qaBox .icon::before {
  left: 0;
  transform: rotate(45deg);
}
.qaBox .icon::after {
  right: 0;
  transform: rotate(-45deg);
}
.qaBox details[open] .icon {
  transform: rotate(180deg);
}
.qaBox details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease,
    content-visibility 0.4s ease allow-discrete;
}
.qaBox details[open]::details-content {
  height: auto; /* for unsupported browser */
  height: calc-size(auto, size);
  opacity: 1;
}
.qaBox details div {
  padding: 0 0 32px;
}
.qaBox details div a {
  color: #1073E5;
  text-decoration: underline;
}
.qaBox details div a:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .qaBox summary {
    padding: 20px 0;
  }
  .qaBox h2 + details summary {
    padding-top: 10px;
  }
  .qaBox .icon {
    width: 15.5px;
    transform-origin: center 43%;
  }
  .qaBox .icon::before,
  .qaBox .icon::after {
    width: 10px;
    height: 2px;
  }
  .qaBox details div {
    padding: 0 0 20px;
  }
}


/***************************************************************************

  その他
  /service/coin-locker_caution.html

***************************************************************************/
main.other section p {
  margin-bottom: 2rem;
}
main.other section p:last-child {
  margin-bottom: 0;
}