@charset "UTF-8";
/* CSS Document */


/*キーカラー：var(--red-osaka)*/
body{
  color: red!important;
}

.osaka-tour{
	background-image: url("../img/contents/osaka-tour/bg1920.jpg");
	background-attachment: fixed;
	background-size: cover;
  background-color:rgba(255,255,255,.6);
  background-blend-mode:lighten;
}
.osaka-tour .anchor{
	
    padding: 7rem 0 0 0;
    margin: -3rem 0 0 0;
}


.osaka-tour .headerContentsH1:before{
	content: "■ ";
    color: #fff;
}

.osaka-tour h2{
	border-color: var(--red-osaka);
}




.osaka-tour h3{
	color: #fff;
	background-color:var(--red-osaka);
	padding: 3px;
	margin: 0 0 10px;
}
.osaka-tour h4{
	color: var(--red-osaka);
	border: 1px solid var(--red-osaka);
	padding: 3px;
	margin: 0 0 10px;
}
.osaka-tour h5{
	font-size: .9rem;
	margin: 0 0 20px;
	color: var(--red-osaka);
	padding: 0 0 0 1rem;
}
img.img{
    width: 400px;
}


.osaka-tour .sideBar{
	border: 2px solid var(--red-osaka);
}
.osaka-tour .sideBarNav li:not(:last-child){
	border-bottom: 1px dotted var(--red-osaka);
}
.osaka-tour .sideBarNav a{
	color:var(--red-osaka);
}



.osaka-tour .note{
  display: flex;
  gap:16px;
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  .osaka-tour .note{
    padding-left: 2em;
  }
}
.osaka-tour .note + .note{
  margin-top: 16px;
}
@media screen and (max-width: 550px) {
  .osaka-tour .note + .note{
    margin-top: 40px;
  }
}

.osaka-tour .note figure{
  width: min(100%,260px);
}
.osaka-tour .note figure img{
  width: 100%;
  border-radius: 100%;
}
.osaka-tour .note p{
  display: grid;
  place-items:center;
  color:var(--purple-osaka);
  font-style: italic;
  font-weight: bold;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media screen and (max-width: 550px) {
  .osaka-tour .note{
    display: block;
  }
  .osaka-tour .note figure{
    width: min(80%,200px);
    margin: 0 auto;
  }
  .osaka-tour .note p{
    width: min(100% - 4em);
    margin: 1em auto 0;
  }
}


.osaka-tour .feature mark{
  content: url("../img/contents/osaka-tour/title1500.png");
  width: 100%;
}

.osaka-tour .lityBtn .tn{
  width: min(48%,500px);
}

.osaka-tour .about > p{
  margin-top: 16px;
}

.osaka-tour .story{
  text-align: center;
}
.osaka-tour .story img{
  width: min(90%,700px);
}


.osaka-tour .order figure{
  width: 100%;
  text-align: center;
}
.osaka-tour .order img{
  border-radius: 100%;
  width: min(100%,300px);
}

/*
.osaka-tour .recommended li{
  list-style-image: url("../img/contents/osaka-tour/icon-takoyaki40.png");
}
*/
.osaka-tour .recommended li{
  width: calc(100% - 40px);
  position: relative;
  min-height: 50px;
  display: grid;
  align-items: center;
  padding-left: 40px;
}
@media screen and (max-width: 550px) {
  .osaka-tour .recommended li{
    margin: 1em auto 0;
  }
}

.osaka-tour .recommended li::before{
  content: "";
  background-image: url(../img/contents/osaka-tour/icon-takoyaki40.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 30px;
  height: 100%;
  position: absolute;
}


.osaka-tour .review > p:last-of-type{
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 2em;
  margin-top: 2em;
}







@media screen and (max-width: 640px) {
    
  .osaka-tour .gNav ul li{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffa220), color-stop(0.68, var(--red-osaka)), color-stop(0.00, #f9c580));
    background: -webkit-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
    background: -moz-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
    background: -o-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
    background: -ms-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
    background: linear-gradient(to bottom, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
  }
  img.img{
      width: 90%;
  }
  .case img.img{
    width: min(100%,300px);
  }
	
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
	
	.osaka-tour .gNav ul{
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffa220), color-stop(0.68, var(--red-osaka)), color-stop(0.00, #f9c580));
		background: -webkit-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -moz-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -o-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -ms-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: linear-gradient(to bottom, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
	}	

}
 
 @media screen and (min-width: 961px) {

	.osaka-tour #sticky {
		display:none;
		border-bottom:3px solid #FFFADB;

		background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffa220), color-stop(0.68, var(--red-osaka)), color-stop(0.00, #f9c580));
		background: -webkit-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -moz-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -o-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -ms-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: linear-gradient(to bottom, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
	}
	 .osaka-tour .gNavSticky ul li:not(:last-child){
		border-right: 1px solid var(--red-osaka);
	 }
	 .osaka-tour .gNavSticky ul li a{
		 color: var(--red-osaka);
	 }

	.osaka-tour .gNav ul{
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffa220), color-stop(0.68, var(--red-osaka)), color-stop(0.00, #f9c580));
		background: -webkit-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -moz-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -o-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: -ms-linear-gradient(top, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
		background: linear-gradient(to bottom, #f9c580 0%, var(--red-osaka) 68%, #ffa220 100%);
	}
	 .application{
		 display: flex;
		 justify-content: center;
	 }
	 .application .img{
		 width: 500px;
		 height: 500px;
	 }
	 
	.osaka-tour .footer{
		border-top: 2px dotted #fff;
	}
	 .osaka-tour .footer a{
		 color: #fff;
	 }
	.osaka-tour small{
		background-color: var(--red-osaka);
	}
	
	
}