/* index.php で使うCSS */

.container{
    max-width:976px;
    margin:0 auto;
}

.fv-container{
    max-width:100%;
    margin:0 auto;
}

#search-view{
    text-align: center;
}

.fv-image{
  margin: 0px auto;
  width: 976px;
}

.search-frame{
    width: 100%;
}

.search-frame iframe{
    width: 100%;
    max-width: 878px;
    height: 200px;
    min-height: 200px;
    border: 0;
}

@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px){
    .search-frame iframe{
        display: block;
        width: 100%;
        height: auto;
        min-height: 350px;
    }

    #main .show-pc {
        display: none;
    }
    
    #main .show-sp {
        display: block;
    }
}

/* コラム記事のリスト表示 */
.column-area {
    margin:10px auto;
    border:1px solid #d8d8d8;
    box-sizing: border-box;
}

.column-contents {
    display: flex;
    flex-direction: row;
    padding: 8px;
    border-bottom: 1px dotted #ccc;
}

.column-contents img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.column-contents p {
    margin: 16px;
}

.column-more{
    text-align:right;
    margin:8px;
}
.column-more > a{
    display:inline-block;
    color:#fff;
    padding:6px 10px;
    background-color:#46abd9;
    border-radius: 4px;
    text-decoration: none;
}
.column-more > a:hover{
    background-color:#ff9b00;
}

@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px){
    .column-area {
        margin:10px auto;
        border:1px solid #d8d8d8;
        box-sizing: border-box;
    }

    .column-contents img {
        width: auto;
        max-width: 160px;
    }

    .column-contents p {
        margin: 8px;
    }
}

/* ドライブコース用レイアウト */
#drive-course {
  width: 976px;
  padding: 1.3vw 0 0;
  margin: 0 auto;
}
#drive-course .topics-link{
  margin-top: 1.3vw;
}
#drive-course .topics-link p:nth-of-type(2) {
  margin: 0.3vw 0;
}

@media screen and (max-width: 975px) {
  #drive-course {
    width: 100%;
    padding: 2.8vw 1vw 0;
  }
  #drive-course img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #drive-course .show-pc {
    display: none;
  }
  #drive-course .show-sp {
    display: block;
  }
  #drive-course .topics-link p:nth-of-type(2) {
    margin: 4vw 0;
  }
}

/* 航空券の都道府県ページ用レイアウト */
#airticket-search {
  width: 976px;
  padding: 3vw 0 0;
  margin: 0 auto;
}
@media screen and (max-width: 975px) {
  #airticket-search {
    width: 100%;
    padding: 2.8vw 1vw 0;
  }
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #airticket-search {
    padding: 6vw 0 0;
  }
}

#airticket-search h2 {
  position: relative;
  padding: 0 0 0 25px;
  line-height: 1.7;
  color: #0E2141;
  border-bottom: 4px solid #4571c1;
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #airticket-search h2 {
    background-color: #204ca0;
    padding: 0.6vw 0 0.6vw 8vw;
    text-align: left;
    color: #fff;
    font-size: 4vw;
    border-bottom: none;
  }
}
#airticket-search h2::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 19px;
  height: 19px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_52_1193)%22%3E%3Cpath%20d%3D%22M22.6704%2011.4731C20.8222%2011.4225%2019.457%2011.4491%2018.9129%2011.4645C18.7533%2011.4691%2018.6044%2011.3844%2018.5269%2011.2448L17.3544%209.13869L18.2873%209.13869C18.5443%209.13869%2018.7528%208.93016%2018.7531%208.67291L18.7531%207.91145C18.7531%207.65441%2018.5445%207.44588%2018.2873%207.44567L16.4115%207.44567L13.6477%202.48104C13.5209%202.2534%2013.2809%202.11207%2013.02%202.11207L12.5232%202.11207C12.4497%202.11207%2012.3955%202.18011%2012.4117%202.25172L14.1486%209.90772C14.1643%209.97723%2014.1698%2010.0482%2014.1652%2010.1192L14.0898%2011.2269C14.0803%2011.3653%2013.9661%2011.4737%2013.8273%2011.4756C12.9232%2011.4884%209.74129%2011.5501%207.93213%2011.8044L5.54715%208.6034C5.46063%208.48706%205.32392%208.41839%205.17881%208.4186L4.63071%208.4186C4.55343%208.4186%204.4961%208.49021%204.5129%208.56581L5.33673%2012.2583C5.35773%2012.3519%205.29305%2012.4431%205.1975%2012.4542C4.7712%2012.5037%204.07126%2012.6581%203.44084%2012.9996C4.07147%2013.3412%204.77141%2013.4956%205.1975%2013.5449C5.29284%2013.5559%205.35773%2013.6472%205.33673%2013.7409L4.5129%2017.4333C4.49609%2017.5089%204.55343%2017.5805%204.63071%2017.5805L5.17881%2017.5805C5.32371%2017.5805%205.46042%2017.5118%205.54715%2017.3957L7.93213%2014.1947C9.7415%2014.4492%2012.9234%2014.5109%2013.8273%2014.5235C13.9661%2014.5254%2014.0803%2014.6338%2014.0898%2014.7722L14.1652%2015.8799C14.17%2015.9507%2014.1645%2016.0221%2014.1486%2016.0914L12.4117%2023.7474C12.3955%2023.819%2012.4497%2023.8871%2012.5232%2023.8871L13.02%2023.8871C13.2808%2023.8871%2013.5209%2023.7457%2013.6477%2023.5181L16.4115%2018.5539L18.2873%2018.5539C18.5443%2018.5539%2018.7528%2018.3453%2018.7531%2018.0881L18.7531%2017.3266C18.7531%2017.0696%2018.5445%2016.8611%2018.2873%2016.8608H17.3544L18.5269%2014.7547C18.6046%2014.6153%2018.7533%2014.5305%2018.9129%2014.5351C19.4568%2014.5506%2020.8222%2014.5771%2022.6704%2014.5265C25.0934%2014.4605%2025.9233%2013.0002%2025.9233%2013.0002C25.9233%2013.0002%2025.0936%2011.5396%2022.6702%2011.4733L22.6704%2011.4731Z%22%20fill%3D%22%231F3D88%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_52_1193%22%3E%3Crect%20width%3D%2218.3849%22%20height%3D%2218.3849%22%20fill%3D%22white%22%20transform%3D%22translate(13.0001)%20rotate(45)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px){
  #airticket-search h2::before {
    left: 1.5%;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_52_1193)%22%3E%3Cpath%20d%3D%22M22.6704%2011.4731C20.8222%2011.4225%2019.457%2011.4491%2018.9129%2011.4645C18.7533%2011.4691%2018.6044%2011.3844%2018.5269%2011.2448L17.3544%209.13869L18.2873%209.13869C18.5443%209.13869%2018.7528%208.93016%2018.7531%208.67291L18.7531%207.91145C18.7531%207.65441%2018.5445%207.44588%2018.2873%207.44567L16.4115%207.44567L13.6477%202.48104C13.5209%202.2534%2013.2809%202.11207%2013.02%202.11207L12.5232%202.11207C12.4497%202.11207%2012.3955%202.18011%2012.4117%202.25172L14.1486%209.90772C14.1643%209.97723%2014.1698%2010.0482%2014.1652%2010.1192L14.0898%2011.2269C14.0803%2011.3653%2013.9661%2011.4737%2013.8273%2011.4756C12.9232%2011.4884%209.74129%2011.5501%207.93213%2011.8044L5.54715%208.6034C5.46063%208.48706%205.32392%208.41839%205.17881%208.4186L4.63071%208.4186C4.55343%208.4186%204.4961%208.49021%204.5129%208.56581L5.33673%2012.2583C5.35773%2012.3519%205.29305%2012.4431%205.1975%2012.4542C4.7712%2012.5037%204.07126%2012.6581%203.44084%2012.9996C4.07147%2013.3412%204.77141%2013.4956%205.1975%2013.5449C5.29284%2013.5559%205.35773%2013.6472%205.33673%2013.7409L4.5129%2017.4333C4.49609%2017.5089%204.55343%2017.5805%204.63071%2017.5805L5.17881%2017.5805C5.32371%2017.5805%205.46042%2017.5118%205.54715%2017.3957L7.93213%2014.1947C9.7415%2014.4492%2012.9234%2014.5109%2013.8273%2014.5235C13.9661%2014.5254%2014.0803%2014.6338%2014.0898%2014.7722L14.1652%2015.8799C14.17%2015.9507%2014.1645%2016.0221%2014.1486%2016.0914L12.4117%2023.7474C12.3955%2023.819%2012.4497%2023.8871%2012.5232%2023.8871L13.02%2023.8871C13.2808%2023.8871%2013.5209%2023.7457%2013.6477%2023.5181L16.4115%2018.5539L18.2873%2018.5539C18.5443%2018.5539%2018.7528%2018.3453%2018.7531%2018.0881L18.7531%2017.3266C18.7531%2017.0696%2018.5445%2016.8611%2018.2873%2016.8608H17.3544L18.5269%2014.7547C18.6046%2014.6153%2018.7533%2014.5305%2018.9129%2014.5351C19.4568%2014.5506%2020.8222%2014.5771%2022.6704%2014.5265C25.0934%2014.4605%2025.9233%2013.0002%2025.9233%2013.0002C25.9233%2013.0002%2025.0936%2011.5396%2022.6702%2011.4733L22.6704%2011.4731Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_52_1193%22%3E%3Crect%20width%3D%2218.3849%22%20height%3D%2218.3849%22%20fill%3D%22white%22%20transform%3D%22translate(13.0001)%20rotate(45)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
  }
}
#airticket-search h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 70%;
  height: 4px;
  background-color: #113d8d;
  z-index: 2;
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #airticket-search h2::after {
    content: none;
  }
}

#airticket-search .topics-link {
  margin: 1vw 0 0 0.3vw;
}
@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #airticket-search .topics-link {
    width: 100%;
    margin: 3vw auto 0;
  }
}

@media screen and (max-width: 480px), screen and (orientation: landscape) and (max-width: 965px) {
  #airticket-search .show-pc {
    display: none;
  }
  #airticket-search .show-sp {
    display: block;
  }
}

#airticket-search .topics-link p:nth-of-type(2) {
  margin: 0.3vw 0;
}
#airticket-search .topics-link p:nth-of-type(5) {
  margin: 4vw 0;
}
@media screen and (max-width: 975px) {
  #airticket-search img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    font-size: 0;
  }
}

.content-img-list{
  display: flex;
  width: 100%;
  margin: 2vw auto 4vw auto;
  justify-content: flex-start;
  list-style-type: none;
}
.content-img-list li{
  flex-basis: 50%;
  margin: auto 1%;
}
.content-img-list li > a{
  display: block;
  box-shadow:0px 4px 3px 0px #d8d8d8;
  box-sizing: border-box;
}