.plan-detail-dialog-wrapper,
.plan-detail-dialog-wrapper * {
  box-sizing:border-box;
}
.plan-detail-dialog-wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  background-color:rgba(0,0,0,0.5);
  z-index:10001;
  transition:all 0.3s;
}

.plan-detail-dialog-wrapper.visible {
  visibility:visible;
  opacity:1;
}

.plan-detail-dialog {
  width:90%;
  height:90%;
  max-width: 1000px;
  max-height: 900px;
  background-color:#fff;
  border-radius:5px;
  padding:0.5em 1em 1em 1em;
  display:flex;
  flex-direction:column;
  transition: all 0.3s;
  transform:translate(0px,-40px);
  border:1px solid rgba(0,0,0,0.5);
}
.plan-detail-dialog-wrapper.visible .plan-detail-dialog{
  transform:translate(0px,0px);
}

.plan-detail-dialog .plan-detail-dialog-header {
  display:flex;
  align-items:center;
}

.plan-detail-dialog .plan-detail-dialog-header > * {
  flex-grow:1;
  flex-shrink:1;
}
.plan-detail-dialog .plan-detail-dialog-header .close-btn {
  flex-grow:0;
  flex-shrink:0;
  width:32px;
  height:32px;
  background-color:transparent;
  border:none;
  outline:none;
  background-repeat:no-repeat;
  background-position:center center;
  background-image:url(../images/closex.png);
  cursor:pointer;
  border-radius:50%;
  transition:all 0.3s;
}
.plan-detail-dialog .plan-detail-dialog-header .close-btn:hover {
  background-color:rgba(64,64,255,0.1);
}

.plan-detail-dialog > * {
  flex-shrink:0;
  flex-grow:0;
}
.plan-detail-dialog .plan-detail-dialog-content-wrapper {
  margin-top:0.5em;
  flex-shrink:1;
  flex-grow:1;
  position:relative;
}
.plan-detail-dialog .plan-detail-dialog-content {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  overflow:auto;
}


.plan-detail-dialog .title {
  font-size:1.5em;
  font-weight:bold;
  line-height: 2;
  overflow: hidden;
  position: relative;
  padding: 5px 0 3px;
  margin-bottom: 10px;
  
}
.plan-detail-dialog .title:before {
    content: "";
    border-bottom: 2px solid rgba(9, 179, 150, 1);
    bottom: 0;
    height: 0;
    position: absolute;
    width: 100px;
    z-index: 1;
}
.plan-detail-dialog .title:after {
  content: "";
    border-bottom: 2px solid #ddd;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.plan-detail-dialog ul{
  margin: 0;
  padding: 0;
  list-style: none;
}


.plan-detail-dialog .detail-info-wrapper {
  display:flex;
}


.plan-detail-dialog .detail-info-wrapper > * {
  flex-grow:1;
  flex-shrink:1;
  margin-bottom:0.5em;
}

.plan-detail-dialog .detail-info-wrapper .detail-info-image {
  flex-grow:0;
  flex-shrink:1;
  padding-right:1em;
  display:flex;
  flex-direction:column;
  
  width:100%;
  max-width:60%;
  height: 40vw;
}


.plan-detail-dialog .detail-info-wrapper .detail-info-image > *{
  flex-grow:1;
  flex-shrink:1;
}


.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-view{
  background-color:rgba(0,0,0,0.1);
  border-radius:3px;
  overflow:hidden;
  padding:3px;
  width:100%;
  height:100%;
}
.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-view img {
  width:100%;
  height:100%;
  object-fit:contain;

}
/*
.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-view img{
  width:50%;
  height:40vw;
  object-fit:contain;
}
*/

.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-thumbs{
  flex-grow:0;
  flex-shrink:0;
  margin-top:8px;
}


.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-thumbs 
.thumb-image-view{
  display:inline-block;
  padding:3px;
  background-color:rgba(0,0,0,0.1);
  border-radius:3px;
  margin-right:2px;
}

.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-thumbs 
.thumb-image-view img{

  width:50px;
  height:50px;
  object-fit:cover;
  cursor:pointer;
  transition: all 0.3s ease-in-out;
}


.plan-detail-dialog .detail-info-wrapper .detail-info-image .image-thumbs 
.thumb-image-view img:hover{
  transform:scale(1.1);
}

@media screen and (max-width: 600px) {
  .plan-detail-dialog .detail-info-wrapper {
    display:block;
  }
  .plan-detail-dialog .detail-info-wrapper .detail-info-image {
    width:100%;
    max-width:100%;
    max-width:auto;
    height:50vh;
    margin-right:0;
  }
}

.plan-detail-dialog .detail-info-content ul {

}


.plan-detail-dialog .detail-info-content ul li{
  border-bottom: solid 1px #eee;
  padding: 0.5rem;
  position: relative;
}


.plan-detail-dialog .detail-info-content ul li strong{
  display: block;
  margin-bottom: 6px;
  font-weight: normal;
  font-size: 0.7em;
  color: #999;
}

.plan-detail-dialog .detail-info-content ul li .price:after {
  content:"円";
}

.plan-detail-dialog .detail-info-content .detail-map-wrapper {
  border: solid 1px #eee;
  position:relative;
  margin-top:3em;
  height:300px;
  width:100%;
}

.plan-detail-dialog .detail-info-content .detail-map-wrapper iframe {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.plan-detail-dialog .detail-info-content .detail-map-wrapper::before {
  content: "アクセス";
  font-size: 0.8em;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: -1.8em;
  left: 0;
  background: #1fa363;
  color: #fff;
  padding: 5px 10px;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.plan-detail-dialog .detail-info-content .catch { font-weight:bold;}

.plan-detail-dialog .detail-info-content .kbn-detail {
  margin-bottom: 1em;
}