@charset "utf-8";

/*============================================================
下層共通 css
============================================================*/
/* title -----*/
h4 {  }
@media screen and (max-width:600px){
  h3 { font-size:2.4rem; }
}
@media screen and (max-width:375px){
  h3 { font-size:2.2rem; }
}
/* top --------*/
#top {}
#top h3 { font-size:2.2rem;  line-height:2; max-width:31rem; margin:0 auto; }
#top h3 span { color:#fff; display:block; border-bottom:solid 1px #fff; border-top:solid 1px #fff; font-weight: bold; }
#top .img-area { position:relative; }
#top .img-area .tx { position:absolute; z-index:1; top:5rem; left:50%; transform:translateX(-50%); text-align:center; width:100%; }
#top .img-area .tx p { color:#fff; }
#top .img-area .tx.blk h3 span { color:#231815; border-color:#231815; }
#top .img-area .tx.blk p { color:#231815; }
#top .img-area .tx .t { margin-top:14rem; }
#top .img-area .tx .catch { font-size:3rem; font-weight: bold; margin:8rem 0 1rem; }
#top .img-area .tx .text { max-width:60rem; width:100%; margin:0 auto; text-align:left; font-size:1.8rem; }
#top .img-area .cap { position:absolute; right:1rem; bottom:1rem; color:#fff; font-size:1.4rem; } 

/*
@media screen and (max-width:1600px){
  #top .img-area .tx .text { background:rgba(255,255,255,.6); padding:2rem; }
}
*/
@media screen and (max-width:1200px){
  #top .img-area .tx { top:5rem; }
  #top .img-area .tx .t { width:50%; margin:auto; }
  #top .img-area .tx .catch { font-size:2.4rem; }
  #top .img-area .tx .text { font-size:1.6rem; }
}
@media screen and (max-width:1000px){
  #top .inner { padding:0; }
}
@media screen and (max-width:820px){
  #top .img-area .tx { padding:0 2rem; }
  #top .img-area .tx .t { width:70%; }
  #top .img-area .tx .text {  }
}
@media screen and (max-width:600px){
  #top .img-area .tx { top:3rem; }
  #top .img-area .tx .catch { font-size:2rem; margin:2rem 0; }
  #top .img-area .tx .text { font-size:1.4rem; padding:1rem; }
  #top .img-area .cap { text-shadow:1px 0 10px rgb(0,0,0,.9); }
}

/* catch -----*/
#catch { margin-top:8rem; }
#catch p { font-weight: bold; text-align:center; }
#catch p.tx { max-width:60rem; margin:0 auto; font-size:1.8rem; text-align:left; }

@media screen and (max-width:600px){
  #catch p.tx { font-size:1.6rem; }
}

/*============================================================
販売区画 css
============================================================*/
#hanbai #top .tx p { color:#231815; }
#hanbai #top p.pick { max-width:42rem; margin:6rem auto 1rem; font-size:2.4rem; color:#e60012; font-weight: bold; }
#hanbai #top p.box { max-width:42rem; margin:0 auto; font-size:2rem; background:#0064a7; color:#fff; font-weight: bold; }

/* zentai ----------------------------------------*/
#hanbai #zentai { margin:6rem auto 14rem; }
#hanbai #zentai .img { padding-bottom:5rem; border-bottom:solid 1px #231815; }
#hanbai #zentai .img img { display:block; margin:0 auto; max-width:75rem; width:100%; }
#hanbai #zentai .tx { margin-top:1rem; text-align:center; font-size:1.4rem; margin-bottom:5rem; font-weight: bold; }
#hanbai #zentai .outline { max-width:31rem; margin:0 auto; text-align:center; }

@media screen and (max-width:1000px){
  #hanbai #top .inner { padding:0; }
}
@media screen and (max-width:600px){
  #hanbai #top p.pick { margin-top:0; font-size:2rem; }
}


/*============================================================
location
============================================================*/
/* common ----------------------------------------*/
#location {}
#location ul.tri-list { display:flex; justify-content:space-between; }
#location ul.tri-list li { position:relative; }
#location ul.tri-list li div.t { display:flex; align-items:center; margin-top:1rem; }
#location ul.tri-list li div.t p.tt { font-size:1.8rem; font-weight: bold; }
#location ul.tri-list li .tri {
  position:absolute;
  bottom:0;
  right:-0.5px;
  width:11.5rem;
  height:11.5rem;
  background:#cf736d;
  clip-path:polygon(100% 0, 0% 100%, 100% 100%);
}
#location ul.tri-list li .tri p {
  position:absolute;
  bottom:0.5rem;
  right:0.5rem;
  text-align:right;
  color:#fff;
  line-height:1.2;
  font-weight:bold;
}
#location ul.tri-list li .tri p span { display:block; margin-top:1rem; }
#location ul.tri-list li p.m { position:absolute; top:100%; right:0; }

/* sec01 ----------------------------------------*/
#location #sec01 { margin-top:10rem; }
#location #sec01 ul { display:flex; flex-wrap:wrap; }
#location #sec01 ul li { width:calc(100% / 3 - 3.333rem); margin-right:5rem; }
#location #sec01 ul li:nth-of-type(3n) { margin-right:0; }
#location #sec01 ul li:nth-of-type(n+4) { margin-top:6rem; }
#location #sec01 ul li p.m { text-align:right; }

/* sec02 ----------------------------------------*/
#location #sec02 { margin-top:6rem; }
#location #sec02 .gray { background:#fbf3f1; padding:5rem 7rem; }
#location #sec02 ul.tri-list li div.t p.b { 
  max-width:7rem;
  width:100%;
  color:#fff;
  background:#6c6186;
  text-align:center;
  border-radius:15px;
  margin-right:1rem;
}
#location #sec02 ul.tri-list li .tri { background:#6c6186; }
#location #sec02 ul.list1 {  }
#location #sec02 ul.list1 li { width:calc(100% / 2 - 3rem); }
#location #sec02 ul.list2 { margin-top:5rem; align-items:flex-start; }
#location #sec02 ul.list2 li {}
#location #sec02 ul.list2 li:first-child { width:35%; }
#location #sec02 ul.list2 li:last-child { width:60%; }
#location #sec02 ul.list2 li:last-child p.tx { font-size:1.8rem; padding-bottom:2rem; border-bottom:solid 2px #231815; font-weight: bold; }
#location #sec02 ul.list2 li:last-child ul.list { margin-top:3rem; }
#location #sec02 ul.list2 li:last-child ul.list li { 
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:1.6rem;
  font-weight:bold;
  position:relative;
}
#location #sec02 ul.list2 li:last-child ul.list li:after {
  content:"";
  display:block;
  border-bottom:dotted 3px #231815;
  position:absolute;
  left:50%;
  top:50%;
  width:80%;
  transform:translate(-50%,-50%);
}
#location #sec02 ul.list2 li:last-child ul.list li p { background:#fbf3f1; position:relative; z-index:1; }
#location #sec02 ul.list2 li:last-child ul.list li p span { color:#6c6186; }
#location #sec02 ul.list2 li:last-child ul.list li p:first-child { padding-right:1rem; }
#location #sec02 ul.list2 li:last-child ul.list li p:last-child { padding-left:1rem; }

/* sec03 ----------------------------------------*/
#location #sec03 { margin-top:7rem; margin-bottom:10rem; }
#location #sec03 ul.tri-list { padding-bottom:8rem; }
#location #sec03 ul.tri-list li { width:47%; }
#location #sec03 ul.tri-list .tri { background:#2d8f59; }
#location #sec03 ul.tri-list .tx-area { 
  position:absolute;
  left:0;
  right:0;
  top:100%;
  display:flex;
  justify-content:space-between;
  margin-top:1rem;
}
#location #sec03 ul.tri-list .tx-area .tx { width:70%; font-size:1.4rem; font-weight: bold; }
#location #sec03 ul.tri-list .tx-area .tx-m { word-break:keep-all; font-size:1.4rem; }
#location #sec03 .lst { padding-top:1rem; margin-top:7rem; border-top:solid 2px #231815; }

@media screen and (max-width:1040px){  
  /* sec01 -----*/
  #location #sec01 ul li { width:calc(100% / 2 - 2rem); margin-right:4rem; }
  #location #sec01 ul li:nth-of-type(2n) { margin-right:0; }
  #location #sec01 ul li:nth-of-type(n+3) { margin-top:5rem; }  
}
@media screen and (max-width:880px){
  /* sec02 -----*/
  #location #sec02 .gray { padding:4rem; }
  #location #sec02 ul.list1 li { width:calc(100% / 2 - 1.5rem); }
  #location #sec02 .list2 { display:block; }
  #location #sec02 ul.list2 li { width:100%!important; }
  #location #sec02 ul.list2 > li:first-child { margin-bottom:4rem; }
}
@media screen and (max-width:630px){
  
  #location #top .img-area .tx .text { background:rgb(255,255,255,.5); }
  
  /* sec01 -----*/
  #location #sec01 ul li { width:100%; margin-right:0; }
  #location #sec01 ul li:nth-of-type(n+2) { margin-top:4rem; }
  
  /* sec02 -----*/
  #location #sec02 .gray { padding:3rem; }
  #location #sec02 ul.list1 { display:block; }
  #location #sec02 ul.list1 li { width:100%; }
  #location #sec02 ul.list1 li:first-child { margin-bottom:4rem; }
  #location #sec02 ul.list2 li:last-child ul.list li { font-size:1.4rem; }
  
  /* sec03 -----*/
  #location #sec03 ul.tri-list { display:block; padding-bottom:3rem; }
  #location #sec03 ul.tri-list li { width:100%; margin-bottom:10rem; }
  #location #sec03 ul.tri-list li {  }
  #location #sec03 ul.tri-list .tx-area { display:block; }
  #location #sec03 ul.tri-list .tx-area .tx { width:100%; }
  #location #sec03 ul.tri-list .tx-area .tx-m { text-align:right;}
  
}
@media screen and (max-width:375px){
  #location #sec02 ul.list2 li:last-child p.tx { font-size:1.6rem; }
  #location #sec02 ul.list2 li:last-child ul.list li { font-size:1.2rem; }
  #location #sec02 .gray { padding:2rem; }
}

/*============================================================
map
============================================================*/
/* sec01 ----------------------------------------*/
#map #sec01 { margin-top:8rem; margin-bottom:13rem; }
#map #sec01 .t { max-width:31rem; width:100%; margin:0 auto 4rem; }
#map #sec01 .map { margin-bottom:4rem; text-align:center; }
#map #sec01 .tx { margin-bottom:4rem; text-align:center; font-size:2rem; }
#map #sec01 .tx span { font-weight: bold; }
#map #sec01 .google { max-width:31rem; width:100%; margin:0 auto; text-align:center; }

@media screen and (max-width:600px){
  #map #sec01 { margin-top:4rem; }
}

/*============================================================
concept css
============================================================*/
/* common ----------------------------------------*/
#concept {}
#concept #top .img-area .tx { top:10rem; }
#concept #top .img-area .tx .catch { margin:9rem 0 6rem; }
#concept .kome { font-size:1.4rem; }

/* sec02 ----------------------------------------*/
#concept #sec02 {}
#concept #sec02 .big { margin-top:6rem; }
#concept #sec02 .big.last { margin-bottom:15rem; }
#concept #sec02 ul { display:flex; justify-content:space-between; }
#concept #sec02 ul li { width:48%; }
#concept #sec02 ul li:last-child .title { max-width:33rem; margin:0 auto; padding:2rem 0; }
#concept #sec02 ul li:last-child .tx { margin:4rem 0; font-size:1.8rem; }
#concept #sec02 ul li:last-child .btn { max-width:20rem; width:100%; margin:0 auto; }
#concept #sec02 ul li:last-child .btn img { width:100%; }
#concept #sec02 ul.fst { margin-top:12rem; }
#concept #sec02 ul.fst .kome.sp { display:none!important; }
#concept #sec02 ul.two,#concept #sec02 ul.thr { margin-top:10rem; }
#concept #sec02 ul.two li:first-child { order:2; }


@media screen and (max-width:1000px){
  #concept #sec02 .kome.pc { display:none!important; }
  #concept #sec02 ul.fst .kome.sp { display:block!important; }
}

@media screen and (max-width:600px){
  #concept #top .img-area > img { height:75rem; object-fit:cover;}
  #concept #top .img-area .tx { top:5rem; }
  #concept #top .img-area .tx .t { margin:3rem auto 0; }
  #concept #top .img-area .tx .catch { margin:6rem auto 4rem; }
  #concept #top .img-area .tx .text { background:rgb(0,0,0,.5); }
  #concept #sec02 ul { display:block; }
  #concept #sec02 ul li { width:100%; }
  #concept #sec02 ul li .kome { margin-top:1rem; }
  #concept #sec02 ul li:last-child .title { padding:0; margin-top:3rem; }
  #concept #sec02 ul li:last-child .tx { margin:2rem 0 4rem; }
  #concept #sec02 ul li:last-child .btn { max-width:25rem; }
  #concept #sec02 ul.fst { margin-top:5rem; }
  #concept #sec02 ul.two, #concept #sec02 ul.thr { margin-top:5rem; }
  #concept #sec02 .big img { height:40rem; object-fit:cover; }
  #concept #sec02 .big.last { margin-bottom:6rem; }
}

/*============================================================
access css
============================================================*/
#access {}
#access h3 { text-align:center; }
#access h3 span { display:block; font-weight: bold; margin-top:2rem; font-size:2.6rem; }
#access .h3-sub { max-width:60rem; width:100%; margin:0 auto; font-weight: bold; font-size:1.8rem; }
#access .h3-sub small { vertical-align:top; font-size:50%; opacity:1; }
#access .h3-sub span { display:block; font-size:1.4rem; }
#access .catch h2 { text-align:center; font-size:3rem; font-weight: bold; margin:10rem 0; padding:0 2rem; }
@media screen and (max-width:600px){
  #access .catch h2 { font-size:2.4rem; margin:5rem 0; }
  #access h3 span { font-size:2rem; }
}
@media screen and (max-width:375px){
  #access .catch h2 { font-size:2.2rem; }
  #access h3 span { font-size:2.4rem; }
}
/* buss ----------------------------------------*/
#access #buss { margin-top:5rem; }
#access #buss .img { text-align:center; margin-top:4rem; }
#access #buss .title { background:#00a29a; color:#fff; font-size:2.1rem; padding:0.5rem 5rem; margin-top:6rem; font-weight: bold; }
#access #buss .title.t2 { margin-top:0; background:#0086c1; }
#access #buss ul { display:flex; flex-wrap:wrap; padding:4rem 5rem; }
#access #buss ul li { width:calc(33% - 3.333rem); font-weight: bold; margin-right:5rem; }
#access #buss ul li:nth-of-type(3n) { margin-right:0; }
#access #buss ul li:nth-of-type(n+4) { margin-top:3rem; }
#access #buss ul li p.t { 
  display:flex;
  justify-content:space-between;
  font-size:2.8rem;
  font-weight: bold;
  position:relative;
  padding-bottom:0.5rem;
}
#access #buss ul li p.t span { background:#fff; position:relative; z-index:1; }
#access #buss ul li p.t span:first-child { padding-right:1rem; }
#access #buss ul li p.t span:last-child { padding-left:1rem; }
#access #buss ul li p.t:after { 
  position:absolute;
  width:50%;
  display:block;
  content:"";
  border-top:dotted 4px #231815;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
}
#access #buss ul li span span.min { display:block; line-height:1; font-size:1.4rem; padding:0!important; text-align:center; }
#access #buss ul li .kome { border-top:solid 1px #898989; padding-top:0.5rem; text-indent:-1em; padding-left:1em; font-size:1.4rem; }
#access #buss .last-kome { padding:0 5rem; font-weight: bold; font-size:1.4rem; }

/* train ----------------------------------------*/
#access #train { margin-top:11rem; }
#access #train .img { margin-top:8rem; text-align:center; }
#access #train .title { background:#647eae; color:#fff; font-size:2.1rem; padding:0.5rem 5rem; margin-top:6rem; font-weight: bold; }
#access #train ul.list { display:flex; flex-wrap:wrap; padding:4rem 5rem; }
#access #train ul.list li { width:calc(50% - 3rem); font-weight: bold; margin-right:6rem; }
#access #train ul.list li:last-child { margin-right:0; }
#access #train ul.list li .t { 
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:2.8rem;
  font-weight: bold;
  position:relative;
  padding-bottom:0.5rem;
}
#access #train ul.list li .t:after {
  position:absolute;
  width:50%;
  display:block;
  content:"";
  border-top:dotted 4px #231815;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#access #train ul.list li .t p { background:#fff; position:relative; z-index:1; font-size:4.4rem; line-height:1; }
#access #train ul.list li .t p.num { font-size:5rem; }
#access #train ul.list li .t p.num small { font-size:3rem; }
#access #train ul.list li .t p:first-child { padding-right:1rem; }
#access #train ul.list li .t p:last-child { padding-left:1rem; }
#access #train ul.list li .t p small { font-size:70%; line-height:1rem; font-weight: bold; opacity:1; }
#access #train ul.list li .t p span { display:block; text-align:center; font-size:1.8rem; line-height:1; margin-top:-1rem; }
#access #train ul.list li .minTx { text-align:right; font-size:1.4rem; margin-bottom:5px; }
#access #train ul.list li .tx { padding-top:0.5rem; border-top:solid 1px #898989; font-size:1.4rem; }
#access #train .red { background:#e83828; margin:0 5rem; padding:3rem 4rem; }
#access #train .red ul { display:flex; justify-content:space-between; }
#access #train .red ul li { width:48%; }
#access #train .red ul li.fst p { color:#fff; font-weight: bold; }
#access #train .red ul li.fst p.one { font-size:2.4rem; margin-bottom:2rem; }
#access #train .red ul li.fst p.two { font-size:4.4rem; display:flex; justify-content:space-between; position:relative; line-height:1; }
#access #train .red ul li.fst p.two:after {
  position:absolute;
  width:50%;
  display:block;
  content:"";
  border-top:dotted 5px #fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#access #train .red ul li.fst p.two span { background:#e83828; z-index:1; position:relative; }
#access #train .red ul li.fst p.two span:first-child { padding-right:1rem; }
#access #train .red ul li.fst p.two span:last-child { padding-left:1rem; }
#access #train .red ul li.fst p.two span.num { font-size:5rem; }
#access #train .red ul li.fst p.two span.num small { font-size:3rem; opacity:1; font-weight: bold; line-height:1; }
#access #train .red ul li.second {}
#access #train .red ul li.second .list { display:flex; margin-bottom:2rem; }
#access #train .red ul li.second .list p { background:#fff; padding:0.5rem 2rem; border-radius:30px; font-size:1.8rem; }
#access #train .red ul li.second .list p:first-child { margin-right:1rem; }
#access #train .red ul li.second .tx { font-size:1.4rem; text-indent:-1em; padding-left:1em; color:#fff; font-weight: bold; }
#access #train p.kome { text-indent:-1em; padding-left:1em; font-size:1.4rem; max-width:90rem; margin:auto; font-weight: bold; }
#access #train p.kome.fst { margin-top:3rem; }

/* route ----------------------------------------*/
#access #route { margin-top:11rem; }
#access #route .inner { max-width:94rem; }
#access #route ul.img { display:flex; justify-content:space-between; margin:6rem auto 3rem; }
#access #route ul.img li { width:48%; }
#access #route .kome { font-size:1.4rem; font-weight:bold; }
#access #route ul.time { display:flex; justify-content:space-between; margin:7rem 0 15rem; }
#access #route ul.time li { width:calc(33.33% - 2.6666rem); margin-right:4rem; font-size:1.8rem; font-weight: bold; }
#access #route ul.time li:last-child { margin-right:0; }
#access #route ul.time li .kome { text-indent:-1em; padding-left:1em; font-size:1.4rem; font-weight: bold; }

@media screen and (max-width:1000px){
  #access #train p.kome { margin:0 5rem; }
}
@media screen and (max-width:980px){
  #access #train .red .mid-none { display:none; }
}
@media screen and (max-width:970px){
  #access #buss ul { justify-content:space-between; }
  #access #buss ul li { width:48%; margin-right:0; }
  #access #buss ul li:nth-of-type(n+3) { margin-top:2rem; }  
}
@media screen and (max-width:920px){
  #access #train ul.list { display:block; }
  #access #train ul.list li { width:100%; }
  #access #train ul.list li:last-child { margin-top:2rem; }
  #access #train .red ul { display:block; }
  #access #train .red ul li { width:100%; }
  #access #train .red ul li:last-child { margin-top:2rem; }
}
@media screen and (max-width:700px){
  #access #route ul.time li { margin-right:2rem; width:calc(33.33% - 1.333rem); }
}
@media screen and (max-width:600px){
  #access #buss ul { display:block; }
  #access #buss ul li { width:100%; }
  #access #buss ul li:nth-of-type(n+2) { margin-top:2rem; }
  
  #access #train .red , #access #train p.kome{ margin:0; }
  
  #access #route ul.img { display:block; margin:6rem 0 1rem; }
  #access #route ul.img li { width:100%; }
  #access #route ul.img li:last-child { margin-top:2rem; }
  #access #route ul.time { display:block; margin-bottom:7rem; }
  #access #route ul.time li { width:100%; margin-right:0; font-size:2rem; }
  #access #route ul.time li:nth-of-type(n+2) { margin-top:3rem; }
}


/*============================================================
gallery css
============================================================*/
#gallery {  }
#gallery #contents { margin:8rem 0 20rem; }
#gallery #contents .title { 
  background:#5894af;
  color:#fff;
  font-weight: bold;
  font-size:2.6rem;
  text-align:center;
  width:100vw;
  margin:0 calc(50% - 50vw) 7rem;
  padding:1rem 0;
}
#gallery #contents ul {  }
#gallery #contents ul li { display:flex; align-items:center; }
#gallery #contents ul li:nth-of-type(even) { flex-direction:row-reverse; }
#gallery #contents ul li div { width:50%; font-weight: bold; }
#gallery #contents ul li div.text { padding:0 3rem; }
#gallery #contents ul li div.text .tt { font-size:1.8rem; margin-bottom:1rem; }
#gallery #contents ul li:nth-of-type(even) div.text .tt { text-align:right; }
#gallery {  }

@media screen and (max-width:600px){
  #gallery #contents { margin-bottom:10rem; }
  #gallery #contents .title { font-size:2rem; padding:1rem 2rem; margin-bottom:4rem; }
  #gallery #contents ul li { display:block; }
  #gallery #contents ul li div { width:100%; }
  #gallery #contents ul li div.text { padding:1rem 0 0; margin-bottom: 3rem; }
  #gallery #contents ul li:nth-of-type(even) div.text .tt { text-align:left; }
}