@charset "utf-8";
/* CSS Document */
.itinerary {
  width: 95%;
  max-width: 950px;
  margin: 0 auto 40px;
	font-family: 'Noto Sans JP', sans-serif;
}
.itinerary .day_unit{
  width: 100%;
  border: 1px solid #CCC;
}
.itinerary .day_unit h3.nday{
  width: 100%;
  text-align: center;
  background: rgba(117,201,231,1.00);
	font-size: 120%;
	padding: 5px;
}
.itinerary .day_unit .nday{
  width: 100%;
  text-align: center;
  background: rgba(117,201,231,1.00);
}
.itinerary .day_unit dl.meal dt{
  width: 100%;
  text-align: center;
  background: rgba(117,201,231,0.4);
	padding: 3px;
}
.itinerary .day_unit dl.meal dd{
  text-align: center;
}
.itinerary .day_unit .center{
  text-align: center;
}
.itinerary .day_unit img.icon{
  width: 25px;
	margin: 0 5px;
}
.itinerary .day_unit dl{
  width: 100%;
}
.itinerary .day_unit dl dt{
  width: 100%;
  /*text-align: center;
  background: #E7E7E7;
  padding: 5px;*/
}
.itinerary .day_unit dl dd{
  width: 100%;
  padding:10px 10px 15px;
  background: #FFFFFF;
  text-align: left;
}
.itinerary .day_unit dl dd.text_center{
  text-align: center;
}

.itinerary .day_unit ul{
  width: 100%;
}
.itinerary .day_unit ul li{
  display:inline;
  line-height: 2.2;
}
.itinerary h4{
  font-size: 100%;
  font-weight: bold;
  display: inline;
  margin-right: 3px;
}
.itinerary .box{
	margin:10px auto 20px 20px;
	width: fit-content;
	border: 1px solid #22BD8A;
	padding: 15px 10px 15px 15px;
}
@media screen and (max-width: 759.9px) {
	.itinerary .box{
		margin:10px auto 20px;
		width: fit-content;
		border: 1px solid #22BD8A;
		padding: 10px 15px;
	}
}
.itinerary .box p{
  line-height: 1.8;
}
.itinerary h4.spot{
	border: 1px solid #CCC;
	padding: 5px 10px;
	border-radius: 5px;
}
.itinerary h4 .spot{
	border: 1px solid #CCC;
	padding: 5px 10px;
	border-radius: 5px;
	margin-right: 5px;
}
.itinerary .day_unit span.time{
  color: #9568EF;
  margin-left: 5px;
  margin-right: 5px;
}
.itinerary .day_unit span.time i{
  margin-right: 2px;
}

.itinerary .day_unit ul li.bold{
  font-weight: bold;
}
.itinerary .day_unit ul li.air::before,
.itinerary .day_unit ul li.air::after{
  content:"----";
  background:url("../images/itinerary/line_dot_air.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.air span{
  background: url("../images/itinerary/icon_air.svg") no-repeat center left #FFFFFF;
  background-size:30px;
  padding-left:30px;
  color: #F19317;
  font-size:90%;
}
.itinerary .day_unit ul li.centerline,
.itinerary .day_unit p.centerline{
  background:url("../images/itinerary/line_center.svg") repeat-x center left;
  background-size:auto;
  padding: 0 30px;
  margin-left: -5px;
}
.itinerary .day_unit ul li.centerline span,
.itinerary .day_unit p.centerline span{
  background:#FFFFFF;
  background-size:auto;
  padding: 0 5px;
}
.itinerary .day_unit ul li.entering::before,
.itinerary .day_unit ul li.entering::after{
  content:"----";
  background:url("../images/itinerary/line_dot_bus.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.entering span.place,
.itinerary .day_unit ul li span.entering{
  color: #A80320;
  font-weight: bold;
  font-size: 110%;
  padding: 0 5px;
  background: #FFFFFF;
}
.itinerary .day_unit ul li.alighting::before,
.itinerary .day_unit ul li.alighting::after{
  content:"----";
  background:url("../images/itinerary/line_dot_bus.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.alighting span.place,
.itinerary .day_unit ul li span.alighting{
  color: #1e90ff;
  font-weight: bold;
  font-size: 110%;
  padding: 0 5px;
  background: #FFFFFF;
}
.itinerary .day_unit ul li.windowview::before,
.itinerary .day_unit ul li.windowview::after{
  content:"----";
  background:url("../images/itinerary/line_double.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.car::before,
.itinerary .day_unit ul li.car::after{
  content:"-------";
  background:url("../images/itinerary/line_double_car.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.car span{
	padding: 0 5px;
}
.itinerary .day_unit ul li.windowview span.place{
  color: #333333;
  font-size: 120%;
  padding: 0 5px;
  background: #FFFFFF;
}
.itinerary .day_unit ul li.shinkansen::before,
.itinerary .day_unit ul li.shinkansen::after{
  content:"----";
  background:url("../images/itinerary/line_shinkansen.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.shinkansen span{
  background: url("../images/itinerary/icon_shinkansen.svg") no-repeat center left #FFFFFF;
  background-size: 40px;
  padding-left:40px;
  color: #333333;
  font-size: 100%;
}
.itinerary .day_unit ul li.ship::before,
.itinerary .day_unit ul li.ship::after{
  content:"----";
  background:url("../images/itinerary/line_wavy.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.ship span{
  background: url("../images/itinerary/icon_ship.svg") no-repeat center left #FFFFFF;
  background-size: 25px;
  padding-left:25px;
  color: #5f9ea0;
}
.itinerary .day_unit ul li span.staytime{
  background: #FFFFFF;
  padding: 0 3px 0 0;
}
.itinerary .day_unit ul li span.highlight{
  background: #F9EF81;
  padding: 2px 5px;
}
.itinerary .day_unit ul li span.emphasis{
  background: #E1082F;
  padding: 0 5px;
  color: #FFFFFF;
}
.itinerary .day_unit ul li.train::before,
.itinerary .day_unit ul li.train::after{
  content:"----";
  background:url("../images/itinerary/line_dot_train.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.train span{
  background: url("../images/itinerary/icon_train.svg") no-repeat center left #FFFFFF;
  background-size: 30px;
  padding-left: 30px;
  color: #87C022;
  font-size:90%;
}
.itinerary .day_unit ul li.walk::before,
.itinerary .day_unit ul li.walk::after{
  content:"----";
  background:url("../images/itinerary/line_dot_walk.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.walk span{
  background: url("../images/itinerary/icon_walk.svg") no-repeat center left #FFFFFF;
  background-size: 20px;
  padding-left:20px;
  color: #C1272D;
  font-size:90%;
}
.itinerary .day_unit ul li.taxi::before,
.itinerary .day_unit ul li.taxi::after{
  content:"----";
  background:url("../images/itinerary/line_dot_taxi.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.taxi span{
  background: url("../images/itinerary/icon_taxi.svg") no-repeat center left #FFFFFF;
  background-size: 25px;
  padding-left:25px;
  color: #2FBBEA;
  font-size:90%;
}
.itinerary .day_unit ul li.bus::before,
.itinerary .day_unit ul li.bus::after{
  content:"----";
  background:url("../images/itinerary/line_dot_bus.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.bus span{
  background: url("../images/itinerary/icon_bus.svg") no-repeat center left #FFFFFF;
  background-size: 30px;
  padding-left:30px;
  color: #41b163;
  font-size:90%;
}
.itinerary .day_unit ul li.free::before,
.itinerary .day_unit ul li.free::after{
  content:"----";
  background:url("../images/itinerary/line_dot_free.svg") repeat-x center;
  background-size:auto;
  color:transparent;
}
.itinerary .day_unit ul li.free span,
.itinerary .day_unit p.free span{
  background:#E0CAB8;
  background-size: 25px;
  padding:2px 5px;
  color: #6D3D19;
  font-size:90%;
}
.itinerary #icon.day_unit{
  width: 100%;
  margin-top: 20px;
}
.itinerary #icon.day_unit ul{
  display:inline;
  margin-right: 20px;
}
.itinerary #icon.day_unit ul{
  display:inline;
  margin-right: 20px;
}
.itinerary #conditions.day_unit ul li{
  text-indent: -1em;
  margin-left: 1em;
}

.itinerary .point_unit{
  width: 100%;
  border: 1px solid #CCC;
  margin-top: 40px;
}
.itinerary .point_unit dl{
  width: 100%;
}
.itinerary .point_unit dl dt{
  width: 100%;
  text-align: center;
  background: #BBF0E3;
  padding: 5px;
}
.itinerary .point_unit dl dd{
  width: 100%;
  padding: 10px 20px;
  background: #FFFFFF;
}
.itinerary .point_unit h4{
  display: block;
  margin-top: 10px;
  font-size: 120%;
}

.itinerary .photo_unit{
  width: 100%;
  display: flex;
  justify-content: center;
}
.itinerary .photo_unit li{
  width: 31.3%;
  margin: 0 1%;
  text-align: center;
}
.itinerary .photo_unit li img{
  width:100%;
}
.itinerary p.caption{
  font-size: 12px;
  margin-top: 3px;
}

@media screen and (max-width: 759.9px) {
	#itinerary .inner {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
  }
  .itinerary p.caption{
    font-size: 10px;
    margin-top: 3px;
  }
}