/*PC用*/
@media screen and (min-width:761px) {


  .button04{
    border: 1px solid yellow;
    background-color: white;
    margin-left:3vw;
    font-size: 1vw;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.button04 a{
    text-decoration: none;
    color:black;
}


.button05 {
    border: 1px solid yellow;
    background-color: black;
    margin-left:1vw;
    color:yellow;
    font-size: 1vw;
    width: auto;
    height: auto;
    border-radius: 8px;
}




.button05 a{
    text-decoration: none;
    color:yellow;
}



#g-nav {
  margin-left: 8vw;
}



/*header{
display:flex;
align-items:center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 10px 0;
border-bottom: 1px solid #ccc;
background-image:white;
backdrop-filter:blur(8px);
}*/



.fresh {
  color: yellow;
  width: 20vw;
  height: auto;
  font-size: 1.7vw;
  margin-left: 1.5vw;
  display: flex;
  font-family: "Sawarabi Mincho", serif;
  align-items: center;
  text-decoration: none;
}
.logo {
    align-items: center;
    width: 6vw;
    height: auto;
}

header {
    height: 5vw;
    background-color: black;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 0.1vw solid #ccc;
}






body {
    text-align: center;
    margin: 0;
    background-color: black;
    color: yellow;
}

#g-navi {
    list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    margin-left: 2vw;
    padding-left:0;
}

h1 {
    text-align: left;
    padding-left: 10vw;
}

h1 a {
    padding-left: 0.2vw;
    color: black;
    text-decoration: none;
    font-size: 2.5vw;
}

#g-navi ul {
    display: block;
    width: 100%;
    height: auto;
}

#g-navi li {
    width: 100%;
    height: auto;
    padding-left: 1vw;
}

#g-navi li a {
    font-family: "Sawarabi Mincho", serif;
    width: 16.6666%;
    text-align: center;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 0.5vw 0.5vw;
    display: block;
    font-size: 1.7vw;
    font-weight: bold;
}

#g-navi li a:hover {
    transform: scale(1.1);
    text-decoration: none;
}

footer {
    margin-top:1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
}

footer p{
    font-size:1vw;
    margin:0;
    font-family: "sawarabi Mincho",serif;
}


.rogo {
  margin: auto;
  width: 4vw;
  height: auto;
}



body{
color: yellow;
text-align:center;
margin:0;
background:black;
margin-top:8vw;
}

section{
  padding-top: 0.8vw;
}

.button{
  background-color:transparent;
  border-style:none;
}


.modal,.modal1,.modal2,.modal3,.modal4,.modal5,.modal6,.modal7,.modal8,
.modal9,.modal10,.modal11,.modal12,.modal13,.modal14,.modal15,.modal16{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}







.modal-content,.modal-content1, .modal-content2, .modal-content3, .modal-content4, .modal-content5,
.modal-content6, .modal-content7,.modal-content8, .modal-content9, .modal-content10,
.modal-content11, .modal-content12, .modal-content13, .modal-content14, .modal-content15,.modal-content16{
  margin: 20% auto;
  width: 50%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}






@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen1 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen2 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen3 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen4 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen5 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen6 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen7 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen8 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen9 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen10 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen11 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen12 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen13 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen14 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen15 {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes modalopen16 {
  from {opacity: 0}
  to {opacity: 1}
}



.modal-header,.modal-header1,.modal-header2,.modal-header3,.modal-header4,.modal-header5,.modal-header6,
.modal-header7,.modal-header8,.modal-header9,.modal-header10,.modal-header11,.modal-header12,
.modal-header13,.modal-header14,.modal-header15,.modal-header16{
  margin: 1rem 0;
  height:0;
}





.modalClose:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose1:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose2:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose3:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose4:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose5:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose6:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose7:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose8:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose9:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose10:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose11:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose12:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose13:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose14:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose15:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}

.modalClose16:hover {
  cursor: pointer;
  background: #fff;
  color: #606060;
}


.button:hover {
  background: #D3D3D3;
  cursor: pointer;
  border-radius:20px;
}

.modalClose,.modalClose1,.modalClose2,.modalClose3,.modalClose4,.modalClose5,.modalClose6,
.modalClose7,.modalClose8,.modalClose9,.modalClose10,.modalClose11,.modalClose12,
.modalClose13,.modalClose14,.modalClose15,.modalClose16{
  color:#fff;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin-left:10px;/*スライド左右の余白調整*/
  margin-right: 10px;
  margin-bottom: 32px;
}





.finger::before{

  font-family: "Font Awesome 5 Free";

  content: "\f0a7";

  font-weight: 900;

}


.comment::before{

  font-family: "Font Awesome 5 Free";

  content: "\f4ad";

  font-weight: 900;

}

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
  padding-left: 16vw;
}
.tab li a{
  border:2px solid yellow;
	display: block;
	background:black;
	margin:0 1vw;
	padding:1vw 3vw;
  border-radius: 3vw;
  font-size: 1.2vw;
  
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:black;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/*========= レイアウトのためのCSS ===============*/


ul{
	list-style:none;
}

a{
	color:#333;
	text-decoration: none;
}

.wrapper{
	width:100%;
	max-width: 960px;
	margin:30px auto;
  background:#fefefe;
}


.area li{
	padding: 10px; 
	border-bottom: 1px solid #ddd;
}

.slider{
  padding:0 50px;
}




.fluid{
  margin-left: 600px;
}

.choose{
  font-weight: bold;
  color: yellow;
  font-size: 2vw;
  text-align: left;
  margin-left: 6vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  font-family: "Sawarabi Mincho",serif;
}


#exp p{
  font-size:1.2vw;
}






.in ,.out{
  transition-duration: .4s;
  color: yellow;
  background-color: black;
}
.in:hover,.out:hover{
  transform: scale(1.3);
}



/*見出し*/
.titlezone{
  padding-bottom: 0.25vw;

  }
   
  .PHOTOtitle {
  color: yellow;
  text-align:center;
  font-size:1.2vw;
  font-family: "Sawarabi Mincho", serif;
  }
   
  h2{
  color: yellow;
  font-size:5vw;
  padding-bottom:0.4vw;
  background:yellow;
  font-family: "Sawarabi Mincho", serif;
  line-height: 0.5;/*行の高さ調整*/
  margin: 0;
  }
  h2 span{
    display: block;
    background: black;
    padding-bottom:1vw;
  }
   
   
  .PHOTOtitle p{
  color: yellow;
  font-size:2.5vw;
  }




#MAP,#sotoMAP{
  position: relative;
  padding:0 15%;

}
.mitori{
  padding-top:50px;
  margin:auto;
  position: relative;
}
#pin,#pin1,#pin2,#pin3,#pin4,#pin5,#pin6,#pin7,#pin8,#pin9,#pin10,
#pin11,#pin12,#pin13,#pin14,#pin15,#pin16{
  position: absolute;
}

#pin:hover,#pin1:hover,#pin2:hover,#pin3:hover,#pin4:hover,#pin5:hover,#pin6:hover,#pin7:hover,#pin8:hover,
#pin9:hover,#pin10:hover,#pin11:hover,#pin12:hover,#pin13:hover,#pin14:hover,#pin15:hover,#pin16:hover {
  transform: translateY(-15px);
}



#pin{
  right: 39%;
  bottom: 18%;
}
#pin1{
  right: 30%;
  bottom: 22%;
}
#pin2{
  right: 80%;
  bottom: 20%;
}
#pin3{
  right: 75%;
  bottom: 52%;
}
#pin4{
  right: 25%;
  bottom: 50%;
}
#pin5{
  right: 17%;
  bottom: 40%;
}
#pin6{
  right: 20%;
  bottom: 88%;
}
#pin7{
  right: 47%;
  bottom: 88%;
}
#pin8{
  right: 17%;
  bottom: 62%;
}
#pin9{
  right: 65%;
  bottom: 17%;
}
#pin10{
  right: 19%;
  bottom: 75%;
}
#pin11{
  right: 58%;
  bottom: 40%;
}
#pin12{
  right: 65%;
  bottom: 40%;
}
#pin13{
  right: 62%;
  bottom: 32%;
}
#pin14{
  right: 58%;
  bottom: 52%;
}
#pin15{
  right: 28%;
  bottom: 62%;
}



.cap{
  margin-bottom: 50px;
}

#nav,.modalClose,.modalClose1,.modalClose2,.modalClose3,.modalClose4,.modalClose5,
.modalClose6,.modalClose7,.modalClose8,.modalClose9,.modalClose10,
.modalClose11,.modalClose12,.modalClose13,.modalClose14,.modalClose15,.modalClose16{
  font-family: "Sawarabi Mincho", serif;
}



.tippy-tooltip.light-border-theme{background-color:#584444;font-size:18px;font-weight:600;font-family: 'Sawarabi Mincho', Times, serif;}
.tippy-tooltip.light-border-theme[data-placement^=top]>
.tippy-arrow{border-width:8px 8px 0;border-top-color:#584444}
.tippy-tooltip.light-border-theme[data-placement^=bottom]>
.tippy-arrow{border-width:0 8px 8px;border-bottom-color:#584444}
.tippy-tooltip.light-border-theme[data-placement^=left]>
.tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#D88282}
.tippy-tooltip.light-border-theme[data-placement^=right]>
.tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#D88282}
.tippy-tooltip.light-border-theme>
.tippy-content{padding:4px 7px}
.tippy-tooltip.light-border-theme>
.tippy-backdrop{background-color:#D88282}
.tippy-tooltip.light-border-theme>.tippy-svg-arrow{fill:#D88282}









}























/*スマホ用*/
@media screen and (max-width:760px) {


	
  .fresh {
    font-size: 0vw;

}

.button04 {
    border: 2px solid #ffffff;
    background-color: white;
    font-size: 4vw;
    width: auto;
    height: auto;
    border-radius: 8px;
}


.button05 {
    border: 2px solid #ffffff;
    background-color: black;
    color:yellow;
    font-size: 4vw;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.button04 a{
    text-decoration: none;
    color:black;
}
.button05 a{
    text-decoration: none;
    color:yellow;
}

#g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -120%;
    width: 100%;
    height: 100%;
    /*ナビの高さ*/
    background: black;
    /*動き*/
    transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 0;
}

/*リストのレイアウト設定*/

#g-nav li {
  list-style: none;
  text-align: center;
  font-size: 7vw;
}

#g-nav li a {
  font-family:"Sawarabi Mincho",serif;
  color: yellow;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

/*×に変化*/
.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: yellow;
    width: 45%;
}

.openbtn span:nth-of-type(1) {
    top: 15px;
}

.openbtn span:nth-of-type(2) {
    top: 23px;
}

.openbtn span:nth-of-type(3) {
    top: 31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.logo {
  display: none;
}

.rogo {
    width: 10%;
    height: auto;
}

footer {
    margin-top:2vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: yellow;
}

footer p{
    font-size:2vw;
    font-family: "sawarabi Mincho",serif;
    margin:0;
}
/*ここまで*/

  body{
  
  margin:0;
  background:black;
  
  }
  
  
  section{
    padding-top: 0.8vw;
  }
  

  
  .button{
    background-color:transparent;
    border-style:none;
  }
  
  
  .modal,.modal1,.modal2,.modal3,.modal4,.modal5,.modal6,.modal7,.modal8,
  .modal9,.modal10,.modal11,.modal12,.modal13,.modal14,.modal15,.modal16{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
  }
  
  
  
  
  
  
  
  .modal-content,.modal-content1, .modal-content2, .modal-content3, .modal-content4, .modal-content5,
  .modal-content6, .modal-content7,.modal-content8, .modal-content9, .modal-content10,
  .modal-content11, .modal-content12, .modal-content13, .modal-content14, .modal-content15,.modal-content16{
    margin:auto;
    width: 94%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name: modalopen;
    animation-duration: 1s;
  }
  
  
  
  
  
  
  @keyframes modalopen {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen1 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen2 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen3 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen4 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen5 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen6 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen7 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen8 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen9 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen10 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen11 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen12 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen13 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen14 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen15 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes modalopen16 {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  
  
  .modal-header,.modal-header1,.modal-header2,.modal-header3,.modal-header4,.modal-header5,.modal-header6,
  .modal-header7,.modal-header8,.modal-header9,.modal-header10,.modal-header11,.modal-header12,
  .modal-header13,.modal-header14,.modal-header15,.modal-header16{
    margin: 1rem 0;
    height:0;
  }
  
  

  
  
  .modalClose:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose1:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose2:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose3:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose4:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose5:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose6:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose7:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose8:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose9:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose10:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose11:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose12:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose13:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose14:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose15:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  .modalClose16:hover {
    cursor: pointer;
    background: #fff;
    color: #606060;
  }
  
  
  .button:hover {
    background: #D3D3D3;
    cursor: pointer;
    border-radius:20px;
  }
  
  .modalClose,.modalClose1,.modalClose2,.modalClose3,.modalClose4,.modalClose5,.modalClose6,
  .modalClose7,.modalClose8,.modalClose9,.modalClose10,.modalClose11,.modalClose12,
  .modalClose13,.modalClose14,.modalClose15,.modalClose16{
    color:#fff;
  }
  
  /*==================================================
  スライダーのためのcss
  ===================================*/
  .slider img {
    width:160%;/*スライダー内の画像を横幅100%に*/
    height:auto;
  }
  
  /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
  
  .slider .slick-slide {
    margin-left:10px;/*スライド左右の余白調整*/
    margin-right: 10px;
    margin-bottom: 32px;
  }
  
  
  
  
  
  .finger::before{
  
    font-family: "Font Awesome 5 Free";
  
    content: "\f0a7";
  
    font-weight: 900;
  
  }
  
  
  .comment::before{

    font-family: "Font Awesome 5 Free";
  
    content: "\f4ad";
  
    font-weight: 900;
  
  }
  
  /*tabの形状*/
  .tab{
    display: flex;
    flex-wrap: wrap;
    padding-left: 16vw;
  }
  .tab li a{
    border:2px solid yellow;
    display: block;
    background:black;
    margin:0 1vw;
    padding:1vw 3vw;
    border-radius: 3vw;
    font-size: 3vw;
    
  }
  /*liにactiveクラスがついた時の形状*/
  .tab li.active a{
    background:black;
  }
  
  
  /*エリアの表示非表示と形状*/
  .area {
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
    padding:50px 20px;
  }
  
  /*areaにis-activeというクラスがついた時の形状*/
  .area.is-active {
      display: block;/*表示*/
      animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
      animation-duration: 2s;
      animation-fill-mode: forwards;
  }
  
  @keyframes displayAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  
  
  /*========= レイアウトのためのCSS ===============*/
  
  
  ul{
    list-style:none;
  }
  
  a{
    color:#333;
    text-decoration: none;
  }
  
  .wrapper{
    width:100%;
    max-width: 960px;
    margin:30px auto;
    background:#fefefe;
  }
  
  
  .area li{
    padding: 10px; 
    border-bottom: 1px solid #ddd;
  }
  
  .slider{
    padding:0 50px;
  }
  
  
  
  
  .fluid{
    margin-left: 600px;
  }
  
  .choose{
    font-weight: bold;
    color: yellow;
    font-size: 4vw;
    text-align: left;
    margin-left: 6vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-family: "Sawarabi Mincho",serif;
  }
  
  
  #exp p{
    font-size:1.2vw;
  }
  
  
  
  
  
  
  .in ,.out{
    transition-duration: .4s;
    background-color:black;
    color: yellow;
  }
  .in:hover,.out:hover{
    transform: scale(1.3);
  }
  
  
  
  /*見出し*/
  .titlezone{
    padding-bottom: 0.25vw;
    }
     
    .PHOTOtitle {
    color: yellow;
    text-align:center;
    font-size:5vw;
    font-family: "Sawarabi Mincho", serif;
    padding-top: 15vw;
    }
     
    h2{
    color: yellow;
    font-size:6vw;
    padding-bottom:1vw;
    background: yellow;
    font-family: "Sawarabi Mincho", serif;
    line-height: 1;/*行の高さ調整*/
    margin: 0;
    }
    h2 span{
      display: block;
      background: black;
      padding-bottom:1vw;
    }
     
     
    .PHOTOtitle p{
    color: yellow;
    font-size:4vw;
    }
  
  
  
  
  #MAP,#sotoMAP{
    position: relative;
    padding:0 15%;
  
  }
  .mitori{
    padding-top:50px;
    margin:auto;
    position: relative;
  }
  #pin,#pin1,#pin2,#pin3,#pin4,#pin5,#pin6,#pin7,#pin8,#pin9,#pin10,
  #pin11,#pin12,#pin13,#pin14,#pin15,#pin16{
    position: absolute;
    padding: 3vw;
  }
  
  #pin:hover,#pin1:hover,#pin2:hover,#pin3:hover,#pin4:hover,#pin5:hover,#pin6:hover,#pin7:hover,#pin8:hover,
  #pin9:hover,#pin10:hover,#pin11:hover,#pin12:hover,#pin13:hover,#pin14:hover,#pin15:hover,#pin16:hover {
    transform: translateY(-15px);
  }
  
  #pin{
    right: 39%;
    bottom: 15%;
  }
  #pin1{
    right: 30%;
    bottom: 19%;
  }
  #pin2{
    right: 77%;
    bottom: 17%;
  }
  #pin3{
    right: 72%;
    bottom: 49%;
  }
  #pin4{
    right: 22%;
    bottom: 47%;
  }
  #pin5{
    right: 14%;
    bottom: 37%;
  }
  #pin6{
    right: 17%;
    bottom: 75%;
  }
  #pin7{
    right: 47%;
    bottom: 75%;
  }
  #pin8{
    right: 14%;
    bottom: 54%;
  }
  #pin9{
    right: 63%;
    bottom: 13%;
  }
  #pin10{
    right: 16%;
    bottom: 64%;
  }
  #pin11{
    right: 55%;
    bottom: 32%;
  }
  #pin12{
    right: 63%;
    bottom: 38%;
  }
  #pin13{
    right: 60%;
    bottom: 26%;
  }
  #pin14{
    right: 55%;
    bottom: 44%;
  }
  #pin15{
    right: 25%;
    bottom: 49%;
  }








  
  .cap{
    margin-bottom: 10vw;
    margin-top: 80vw;
  }
  .cap1{
    margin-bottom: 10vw;
  }
  
  .cap img,.cap1 img{
    height:auto;
    text-align: center;
  }
  .cap,.cap1 {
    padding: 0;
  }

  #nav,.modalClose,.modalClose1,.modalClose2,.modalClose3,.modalClose4,.modalClose5,
  .modalClose6,.modalClose7,.modalClose8,.modalClose9,.modalClose10,
  .modalClose11,.modalClose12,.modalClose13,.modalClose14,.modalClose15,.modalClose16{
    font-family: "Sawarabi Mincho", serif;
  }
  
  
  
  .tippy-tooltip.light-border-theme{background-color:#584444;font-size:18px;font-weight:600;font-family: 'Sawarabi Mincho', Times, serif;}
  .tippy-tooltip.light-border-theme[data-placement^=top]>
  .tippy-arrow{border-width:8px 8px 0;border-top-color:#584444}
  .tippy-tooltip.light-border-theme[data-placement^=bottom]>
  .tippy-arrow{border-width:0 8px 8px;border-bottom-color:#584444}
  .tippy-tooltip.light-border-theme[data-placement^=left]>
  .tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#D88282}
  .tippy-tooltip.light-border-theme[data-placement^=right]>
  .tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#D88282}
  .tippy-tooltip.light-border-theme>
  .tippy-content{padding:4px 7px}
  .tippy-tooltip.light-border-theme>
  .tippy-backdrop{background-color:#D88282}
  .tippy-tooltip.light-border-theme>.tippy-svg-arrow{fill:#D88282}
  
  
  
  
  
  
  
  


}