section{
    max-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.project_name{
    background-image: url("title.jpg");/*画像圧縮＆パス注意*/
    text-align: center;
    padding-top: 10vh;
    border-radius: 0% 0% 80% 80%/20%;
}

.title{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
background:rgba(235,255,255,.6);
}

.index{
display: flex;
justify-content: space-between;
margin-bottom: 0%;
padding: 2% 4% 4%;
margin-left: 4%;
margin-right: 4%;
}

.hyperlink{
margin-bottom: 2rem;
border: 1px solid #e9ece6;
outline: 2px solid #e9ece6;
outline-offset: 4px;
border-radius: 6px;
padding: .875rem;
position: relative;
width:24%
}

.index_title h2{
margin-top: 0rem;
margin-bottom: 2px;
}

.index_title ul{
margin-top: 2px;
margin-bottom: 2px;
}


.explanation{
margin-bottom: 2rem;
border: 1px solid #e9ece6;
outline: 2px solid #e9ece6;
outline-offset: 4px;
border-radius: 6px;
padding: .875rem;
position: relative;
width:60%
}

.day1_title h3{
margin-top: 0rem;
}

.day1_title{
text-align: center;
background:rgba(235, 255, 238, 0.6);
}

.day1_title i{
color:#82dcf0
}

.caption_day1{
display: flex;
justify-content: space-between;
margin: 0%;
padding: 2rem 2rem 1rem;
}

.image1-1{
width:52%;
text-align: right;
}

.image1-1 img{
width: 100%;
max-height: 90%;
object-fit: cover;
border-radius: 40% 70% 50% 30%/50%;
}

.image1-1 p{
    text-align: center;
}


.subtitle_harbour h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}

.balloon1-1{
position: relative;
margin: 10px 0 10px 10px;
padding: 15px;
background: #f2f9f3;
border-radius: 30px;
width:40%;
height:60%;
border-style: solid;
border-width: 1px;
border-color:black;
}

.balloon1-1:before {
content: "";
position: absolute;
left: -45px;
width: 13px;
height: 12px;
bottom: 0px;
background: #f2f9f3;
border-style: solid;
border-width: 1px;
border-radius: 50%;
border-color: black;
}

.balloon1-1:after {
content: "";
position: absolute;
left: -24px;
width: 20px;
height: 18px;
bottom: 3px;
background: #f2f9f3;
border-style: solid;
border-width: 1px;
border-radius: 50%;
border-color: black;
}

.balloon1-1{
text-align: left;
}


.balloon1-1 iframe{
margin: 0%;
object-position: left top;
overflow: auto;
border:0 ;
}

.balloon1-1 ul{
margin-top: 0px;
}


.parent_day1_harbour {
    display: grid;
    margin: 4vw 4vw;
    grid-template-columns: repeat(2, 45vw);
    grid-template-rows: repeat(4, 30vw);
    gap: 1vw;
    text-align: center;
}
    
.div1_day1 {
    grid-row: span 2 / span 2;
}

.div1_day1 img{
max-width: 100%;
height: 100%;
object-fit: cover;
}

.div2_day1 {
    grid-row: span 2 / span 2;
}

.div2_day1 img{
max-width: 100%;
height: 100%;
object-fit: cover;
}

.div3_day1 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
}

.div3_day1 img{
max-width: 100%;
height: 100%;
object-fit: cover;
}

.div3_day1 p{
margin: 0%;
font-size: 150%;
}


.parent_day1_casino {
    display: grid;
    margin: 4vw 4vw;
    grid-template-columns: repeat(2, 45vw);
    grid-template-rows: repeat(3, 30vw);
    gap: 1vw;
    text-align: center;
}
    


.div3_day1_casino{
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}

.div3_day1_casino img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.day2_title h3{
margin-top: 0rem;
}

.day2_title{
text-align: center;
background:rgba(235, 255, 238, 0.6);
}

.day2_title i{
color: #f0a534;
}

.caption_day2{
display: flex;
justify-content: space-between;
margin: 0%;
padding: 2rem 2rem 1rem;
}
        
.image2-1{
width:40%;
text-align: right;
}

.image2-1 img{
width: 100%;
max-height: 80%;
object-fit: cover;
border-radius: 40% 70% 50% 30%/50%;
}

.image2-1 p{
    text-align: center;
}

.speechBubble {
  width:50%;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #f2f9f3;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  height: fit-content;
}

.speechBubble::before {
  content: "";
  position: absolute;
  top: 66%;
  left: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 66%;
  left: 0;
  border-style: solid;
  border-width: 7.6px 11.4px 7.6px 0;
  border-color: transparent #f2f9f3 transparent transparent;
  translate: -100% -50%;
}

.subtitle_Taronga h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}

.subtitle_Manly h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}

.subtitle_Opera h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}


.parent_day2_taronga {
    display: grid;
    margin: 4vw 4vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
    text-align: center;
}
    
.div1_2t {
    grid-column: span 3 / span 3;
    grid-row: span 1 / span 1;
}

.div1_2t img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div2_2t {
grid-row-start: 2;
}

.div2_2t img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div3_2t {
grid-row-start: 2;
}

.div3_2t img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div4_2t {
grid-row-start: 2;
}
        
.div4_2t img{
width: 100%;
max-height: 100%;
object-fit: cover;
}


.parent_day2_Manly {
    display: grid;
    margin: 4vw 4vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 1vw;
}

.div1_2m img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div2_2m img{
width: 100%;
max-height: 100%;
object-fit: cover;
}


.parent_day2_Opera {
    display: grid;
    margin: 4vw 4vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
}
    
.div3_2o {
    grid-column: span 2 / span 2;
}

.div1_2o img{
width: 100%;
max-height: 100vh;
object-fit: cover;
}

.div2_2o img{
width: 100%;
max-height: 100vh;
object-fit: cover;
}

.div3_2o img{
width: 100%;
max-height: 100vh;
object-fit: cover;
}
        
.day3_title h3{
margin-top: 0rem;
}

.day3_title{
text-align: center;
background:rgba(235, 255, 238, 0.6);
}

.day3_title i{
color: #c6f214;
}

.caption_day3{
display: flex;
justify-content: space-between;
margin: 0%;
padding: 2rem 2rem 1rem;
}
        
.image3-1{
width:60%;
text-align: right;
}

.image3-1 img{
width: 100%;
max-height: 80%;
object-fit: cover;
border-radius: 40% 70% 50% 30%/50%;
}

.image3-1 p{
    text-align: center;
}
        
.speechBubble3 {
  width:30%;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #f2f9f3;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  height: fit-content;
}

.speechBubble3::before {
  content: "";
  position: absolute;
  top: 66%;
  left: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

.speechBubble3::after {
  content: "";
  position: absolute;
  top: 66%;
  left: 0;
  border-style: solid;
  border-width: 7.6px 11.4px 7.6px 0;
  border-color: transparent #f2f9f3 transparent transparent;
  translate: -100% -50%;
}

.subtitle_food h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}

.subtitle_casino2 h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}

.subtitle_airport h1{
font-family: "Pacifico", cursive;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
margin-bottom: 0%;
}


.parent_day3_food {
    margin: 4vw 4vw;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
}
    
.div1_3f {
    grid-column: span 3 / span 3;
}

/*
.div2_3f {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
}
*/

.div3_3f {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
}

.div4_3f {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

.div5_3f {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
}
        

.div1_3f img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

/*
.div2_3f img{
width: 100%;
max-height: 100%;
object-fit: cover;
}
*/

.div3_3f img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div4_3f img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.div5_3f img{
width: 100%;
max-height: 100%;
object-fit: cover;
}

.reference{
background-color: #070f26;
color: #fff;
}