:root {
   --border: #9b7e7b solid 1px;
   --accent1: #f4eeee;
   --accent2: #efe1d1;
   --accentinverse: #a18881;
   --background: #ffffff;
   --text: #4b4742;
   --text-alt: #9b7e7b;
}


@font-face {
    font-family: "Domaine Display Extrabold";
    src: url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.eot");
    src: url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/93c43529280220afdfc1507540fe9904.svg#Domaine Display Extrabold")format("svg");
}

#image-view {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    background-color: #00000081;
   justify-content: center;
    
}

#displayed-image {   
    max-width: 100vw;
    object-fit: contain;
    caret-color: rgba(0, 0, 0, 0);
    border: none;
}

::selection {
   background-color: #efd2d384;
   color: var(--text);
}

html {
   scrollbar-color: var(--accent1) #7ab3cc;
   scroll-behavior: smooth;
}

body {
   font-family: "Lora";
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: linear-gradient(#a7dee9, #c2e4f2);
   color: var(--text);
}

img {
   max-inline-size: 100%;
   box-sizing: border-box;
   position: relative;
   user-select:none;
}

a {
   text-decoration: none;
   color: var(--text-alt);
}

.mainwrapper {
   height: max-content;
   position: relative;
   width: min(77rem, 97vw);
   background-image: linear-gradient(to bottom, var(--background));
   border: 8px solid transparent;
   border-image: url(assets/paper-border.webp) 60 round;
   border-width: 8px 0;
   padding: 0;
   margin: 1rem 0;
   box-shadow: 0 3px 0 #c2e4f2, 0 -3px 0 #a7dee9,2px 0px 1px #6d466e35;

}


header {
   position: absolute;
   top: 0;
   z-index: 1;
   background-image:url(assets/header-harput.webp), linear-gradient(var(--accent1));
   padding: 2rem 2.5rem 2rem 2.5rem;
   background-size: 100%;
   border-bottom: var(--text-alt) dotted 2px;
   color: hsl(from var(--text-alt) h s 35%);
   text-shadow: var(--accent1) 1px 1px 0;
   background-size: cover;
}

.title {
   position: sticky;
   top: -1.5rem;
   height: max-content;
   background-image:url(assets/header-harput.webp), linear-gradient(var(--accent1));
   background-size: cover;
   padding: 2rem 2.5rem 0 2.5rem;
   z-index: 3;
   color: var(--text-alt);
}

#home {
   position: absolute;
   top: 1.2rem;
   left: 1.9rem;
   font-size: large;
   color: #732b39d1;
   transition: 0.12s;
}

a#home:hover {
   color: #c84760d1;
}

#gototop {
   display: none;
   position: fixed;
   bottom: 1rem;
   right: 1rem;
   z-index: 4;
   --b: 2px;   /* border thickness */
   --s: .45em; /* size of the corner */
   --color: #a9707b;
  
  padding: calc(.4em + var(--s)) calc(.6em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;
   border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  animation: popup 0.3s;
}

#gototop:hover {
   --color:#455a9a;
}

@keyframes popup {
   0%{
      transform: translateY(40px);
   }
   100%{
      transform: translateY(0px);
   }
}

.titlecity {
   font-size: 2rem;
   color: #a9707b81;
}

h1 {
   margin: 1rem 0 0 1rem;
   font-family: "Domaine Display Extrabold";
   color: #a9707b;
}

.undertext {
   padding:0 0 1rem 1rem;
   color: hsl(from var(--text-alt) h s l / 0.8);
}

.introductionfake {
   background-color: transparent;
   padding: 0 2.5rem;
}

.wrapper {
   display: flex;
   position: relative;
   flex-direction: row;
   border: var(--border);
   border-width: 1px 0 0 0;
   padding-top: 4rem;
}

.wrapper::before {
   content:"" ;
   background-color: rgb(168, 225, 237);
   position: absolute;
   top: 1rem;
   left: -1rem;
   width: 2rem;
   height: 2rem;
   border-radius: 1rem;
   z-index: 2;
}

.wrapper::after {
   content:"" ;
   background-color: rgb(168, 225, 237);
   position: absolute;
   top: 1rem;
   right: -1rem;
   width: 2rem;
   height: 2rem;
   border-radius: 1rem;
   z-index: 2;
   box-shadow: inset 2px 0px 1px #6d466e35;
}

nav {
   position: sticky;
   z-index: 2;
   width: 24%;
   height: max-content;
   top:6.9rem;
   z-index: 2;
   box-sizing: border-box;
   padding: 0rem 1.2rem 1rem 0;
   font-family: "Arbutus Slab";

}

.item {
   margin: 0.4rem;
}

.city {
   margin: 0.4rem;
   padding: 0.6rem 1rem;
}

.cityname {
   margin: 0.6rem 0;
   font-size: 1.3rem;
   border-width: 0 0 1px 0;
   padding: 0.4rem 0.9rem;
   border-bottom: var(--border);
   border-color: var(--accentinverse);
   background: linear-gradient(to right, var(--accent2), var(--background));
   border-radius: 2px;
   font-weight: bold;
   color: var(--accentinverse);
   user-select: none;  -webkit-user-select: none;
}

.stamp {
   width: 32%;
   object-fit: contain;
   margin: 0;
   padding: 0.1rem;
}

.name {
   padding: 0.5rem 0;
   display: table;
   font-size: 1.15rem;
   margin: 0.5rem;
}

.namewrapper {
   display: table-cell;
  vertical-align: middle;
}

.item {
   width: 100%;
   display: flex;
   flex-direction: row;
   padding: 0 0.1rem;
   position: relative;
}

.tbd {
   color: var(--text-alt);
   user-select: none;  
   -webkit-user-select: none;
}

.tbd::after {
   content: "";
   position: absolute;
   inset: 0 0 0 0;
   background-color: hsl(from var(--background) h s l / 0.45);
}

main {
   z-index:1;
   width: 76%;
   padding: 0 1vw 1vw 3vw;
   box-sizing: border-box;

}

.photo img {
   margin:0;
   object-fit: contain;
   border-radius: 0.2rem;
   max-width: 100%;
   outline: var(--background) 1px dashed;
   outline-offset: -4px;
   flex: 1;
   row-gap: 0;
   display: block;
   max-height: 100%;
   
}

section {
   margin: 0 2.6rem;
   font-size: 0.95rem;
   border: var(--border);
   border-width: 1px 0 0 0;
   padding: 0.5rem 1rem;
}

.photo {
   justify-content: center;
   background:url(assets/back01.gif);
   border: var(--border);
   border-color: #9f684e65;
   box-sizing:border-box;
   margin:1em 0; /* 中央寄せは0をautoに変更 */
   padding: 1rem;
   margin: 0 9vw;
   margin-bottom: 0;
   border-radius: 0.2rem;
   position: relative;
   display: flex;
}

.photo::after {
   content: "";
   background:none;
   position: absolute;
   height: 100%;
   width: 10rem;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: right;
   left: -11.8rem;
   bottom:0;
 max-height: 26rem;
 width: min(9rem 5vw);
}

.photo::before {
   content: "";
   background: none;
   position: absolute;
   height: 100%;
   width: 10rem;
   background-size: contain;
   background-position: left;
   background-repeat: no-repeat;
   right: -11.8rem;
   bottom:0;
      max-height: 26rem;
      width: min(9rem 5vw);

}

.lale::after {
   background-image: url(assets/lale2.webp);
} 

.lale::before {
   background-image: url(assets/lale1.webp);
} 

.cicek::after {
   background-image: url(assets/cicek1.webp);
   width: 9rem;
   left: -10.5rem;
} 

.cicek::before {
   background-image: url(assets/cicek2.webp);
      width: 9rem;
   
   right: -10.5rem;

} 

.anemon::after {
   background-image: url(assets/anemon1.webp);
   width: 9rem;
   left: -10.5rem;
} 

.anemon::before {
   background-image: url(assets/anemon2.webp);
   width: 9rem;
   right: -10.5rem;
}

.lavanta::after {
   background-image: url(assets/lavanta1.webp);
   left: -10.5rem;
      width: 9rem;

} 

.lavanta::before {
   background-image: url(assets/lavanta2.webp);
   width: 9rem;
   right: -10.5rem;

} 

figure {
   display: flex;
   flex-direction: row;

}

#minare {
   position: absolute;
   top:-10%;
   right:-6%;
   width: 23%;
   transform: rotate(8deg);
   outline: none;
   border: white 10px solid;
   border-radius: 1px;
}

@media screen and (max-width: 1038px) {
    nav{
      display: none;
    }
    main  {
      width: 100%;
    }

    .photo::after {
      display: none;
    }
    .photo::before {
      display: none;
    }

    .photo {
      margin: 0;
      padding: max(2.2vw, 0.8rem);
    }

    .title {
      box-shadow: inset 3px -3px 6px var(--accent1);
    }

   header {
      background-image: linear-gradient(var(--accent1));
   }

   #gototop {
      z-index: -1;
   }
}

@media screen and (max-width: 450px) {
   body {
      font-size: 0.9rem;
   }
   .mainwrapper {
      width: 99vw;
      margin: 0;
   }

   h1 {
      font-size: 1.6rem;
   }
   .titlecity {
   font-size: 1.6rem;
   color: #a9707b81;
}

   main {
      padding-left: 1rem;
      padding-right: 1rem;
   }
}

@media screen and (max-width: 1266px) {
   #gototop {
      right: 2rem;
   }
}