@charset "UTF-8";

/* ===================================
	File Name   : vissitor.css
	Description : Visitor Page's Layout CSS
	Editor      : Bface Hayakawa
	Last Editor : Bface Otake
	
	Update Description :
  [2025/04/23] Target Page 英語サイトにあわせて体裁を変更
  [2025/03/06] SAKE JAPAN項目追加
  [2025/03/06] Frozenエリアにセミナー登壇者情報追加,
              Wineエリアにpickup_wine_marriageを追加
  [2025/02/18] フローズンオブフューチャー表彰式追加
  [2025/02/13] 無料シャトルバス・タクシー追加
	[2024/12/11] アプリページ修正
	[2023/11/07] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Common Style Setting
	3. Target Page
    - Div [visitor_target_preface] 
    - Section [target_visit] 
    - Section [target_entrance] 
    - Section [target_bus] 
	
====================================== */



/*===== ■1. Individual Redefinition =====*/

#btn_visit {margin-top: 50px;}

#cocoa figure {
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  #btn_visit {
      margin: 8vw 2.67vw 0;
  }
  #cocoa figure {
    margin-top: 2.67vw;
  }

}

/*===== ■2. Common Style Setting =====*/

#visitor_webguide {
  margin: 0 auto 20px;
  padding: 20px;
  background: #fff;
}


@media (max-width: 768px) {
  #visitor_webguide {
    margin: 0 2.67vw 2.67vw;
    padding: 2.67vw;
  }
}

target_visit
.text_ch {
  font-weight: 600;
}

/*===== ■3. Target Page =====*/
#visitor_target #visitor_webguide {
  margin-top: 60px;
}

#visitor_target #visual { background-image: url("../img/visitor/img-visual-target.jpg");}

/*banner*/
#visitor_bnr {
  padding: 20px 0;
  text-align: center;
}

#visitor_bnr img {vertical-align: bottom;}

a#btn_visit02 {
  margin-bottom: 40px;
}

a#btn_merumaga img {
  padding-top: 40px;
}

/* Section [target_visit] */
#target_visit .tit_lines {
  margin-bottom: 20px;
}

#target_visit > div.inner > section {
  padding: 0;
}

#target_visit > div.inner > section > ul > li {
  background: rgba(0, 0, 0, .05);
}

#target_visit ul.flex {
  justify-content: center;
}

#target_visit ul.flex li {
  flex: none;
  width: calc(11.1% - 20px);
  min-width: 50px;
  max-width: 100px;
  margin: 0 10px;
}

#target_visit .notice li:last-child { margin-bottom: 30px;}

#target_visit > div.inner p {
  text-align: center;
}

#visitor_target #target_visit .inner > div:last-of-type {
  border: 2px solid #c00;
}

#visitor_target #target_visit .inner > div:last-of-type > h3 {
  background: #c00;
}

#visitor_target #target_visit .inner > div:last-of-type > ul {
  padding: 0 20px 20px;
}

#visitor_target .inner > p em {
  display: block;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
}

#visitor_target .inner > p em b {
  display: block;
  color: #d71518;
  font-size: 2.2rem;
}

#visitor_target section li { 
  margin-bottom: 10px;
}

#visitor_target section span {
  display: block;
  margin-bottom: 10px;
  text-align: right;
}


/* Section [target_entrance] */
#target_entrance ul.flex {
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}
#target_entrance #entrance_intro { margin-bottom: 40px;}

#target_entrance .flex2 { align-items: flex-start;}
#target_entrance .flex2 figure {
  order: 2;
  width: calc(25% - 20px);
  padding: 20px;
  background: rgba(255, 255, 255, .5);
}

#target_entrance .flex2 > div {
  order: 1;
  width: calc(75% - 20px);
}

#target_entrance .flex2 > div p:not(:last-child){ margin-bottom: 20px;}

#target_entrance div p em {
  display: block;
  margin-bottom: 10px;
  color: #c00;
  font-weight: bold;
  font-size: 1.8rem;
}

#visitor_target #target_entrance .inner > section {
  padding: 0;
}

#visitor_target #target_entrance .inner > section > div.inner {
  padding: 0;
}

#visitor_target #target_entrance .inner > p em {
  margin-bottom: 0;
  font-size: 1.6rem;
	line-height: 1.5;
}

#entrance_howto h3,
#entrance_intro h3 {background: #c00;}

#entrance_howto .inner > p:first-of-type {margin-bottom: 20px;}

#entrance_notice > ul:first-of-type {margin-bottom: 20px;}

#entrance_notice > p {margin-bottom: 10px;}

/* Section [target_bus] */
#target_bus {
  margin-top: -100px;
  padding-top: 100px;
}

#target_bus table th span {
  display: block;
  text-align: center;
  padding: 10px 0 0;
}

#target_bus table > tbody > tr > th,
#target_bus table > tbody > tr > td {
  background: rgba(0, 0, 0, .05);
}

#target_bus .inner dl {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
  width: 100%;
  background: rgba(255, 255, 255, .5);
}

#target_bus .inner > section:nth-child(3) > div {
  background: rgba(255, 255, 255, .5);
}

#target_bus .inner > section:nth-child(3) dl {
  display: flex;
  gap: 23%;
  padding: 20px;
  margin: 0 8vw 0 8vw;
}

#target_bus .inner dl > div > dt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #333;
  color: #fff;
}

#target_bus .inner dl > div > dd img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


@media (max-width: 768px) {
  /*visitor_target*/
  #visitor_target #visitor_webguide {
    margin: 6.67vw 2.67vw 2.67vw;
    padding: 0 2.67vw 2.67vw;
  }

  /*banner*/
  #visitor_bnr {
    padding: 0 2.67vw 2.67vw;
    text-align: center;
  }
  
  a#btn_visit02 {
    margin: 4vw 2.67vw;
  }
  
  /* Section [target_visit] */
  #target_visit ul.flex {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #target_visit ul.flex li {
    width: calc(25% - 2.67vw);
    max-width: none;
    margin: 0 0 1.34vw;
  }
  
  #target_visit .notice li:last-child { margin-bottom: 5.34vw;}

  #visitor_target .inner > p em {
    margin-bottom: 5.34vw;
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: left;
  }
  
  #visitor_target .inner > p em b {
    margin: 2.67vw 0;
    font-size: 1.8rem;
  }

  #visitor_target section li,
  #visitor_target section span { margin-bottom: 1.34vw;}
  
  
  /* Section [target_entrance] */
  #target_entrance ul.flex {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2.67vw;
  }
  #target_entrance ul.flex li {
    width: calc(25% - 2.67vw);
    max-width: none;
    margin: 0 0 1.34vw;
  }
  
  #target_entrance #entrance_intro { margin-bottom: 5.34vw;}
  
  #target_entrance .flex2 figure {
    order: 1;
    width: 100%;
    margin-bottom: 5.34vw;
    padding: 2.67vw;
  }

  #target_entrance .flex2 > div {
    order: 2;
    width: 100%;
  }

  #target_entrance .flex2 > div p:not(:last-child){ margin-bottom: 5.34vw;}
  
  #visitor_target #target_entrance .inner > p em {
    margin-bottom: 2.67vw;
    text-align: left;
    font-size: 1.4rem;
  }

  #visitor_target #target_entrance > div.inner > section > div {
    padding: 0;
  }
  
  #entrance_howto .inner > p:first-of-type {margin-bottom: 4vw;}
  
  #entrance_notice > ul:first-of-type {margin-bottom: 4vw;}

  #entrance_notice > p {margin-bottom: 2.67vw;}

  /* Section [target_bus] */
  #target_bus h2 {
    margin-top: 0px;
    padding-top: 5.34vw;
  }
  #target_bus table th span {padding: 5px 0 0;}

  #target_bus .inner section:nth-child(2) dl,
  #target_bus .inner section:nth-child(4) dl {
    display: block;
    padding: 20px;
    background: rgba(255, 255, 255, .5);
  }
  #target_bus .inner section:nth-child(2) dl > div,
  #target_bus .inner section:nth-child(4) dl > div {
    margin-bottom: 20px;}

    #target_bus .inner dl {
      display: block;
      padding: 0;
      background: rgba(255, 255, 255, .5);
    }
    
    #target_bus .inner dl > div:first-child {
      margin-bottom: 20px;
    }
    
    #target_bus .inner > section:nth-child(3) > div {
      background: rgba(255, 255, 255, .5);
    }
    #target_bus .inner > section:nth-child(3) dl {
      display: block;
      margin: 0;
      padding: 0;
    }
}