/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.mb-20px{
  margin-bottom: 20px!important;
}

body{
  font-family: 'Noto Serif JP', sans-serif;
}
header{
  display: flex;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2;
}
header div.logo {
    padding-top: 22px;
    padding-bottom: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 230px;
}
@media (max-width: 767px) { 
  header div.logo {
    padding-top: 15px;
  }
}
@media (max-width: 575px) { 
  header div.logo {
    max-width: 180px;
  }
}
header nav{
  font-family: 'Noto Serif JP', sans-serif;
  color: #242424;
  font-weight: 900;
}
@media (max-width: 767px) { 
  header nav{
    width: 58%;
    max-width: 490px;
    font-family: 'Noto Serif JP', sans-serif;
    display: none;
    color: #242424;
    font-weight: 900;
  }
}
header a:hover{
  color: rgba(105, 105, 105, 0.45);
}
.header-inner {
  display: flex;
  max-width: 1200px;
  width: 100%;
  justify-content: space-between;
  margin: 0 auto;
}
nav ul{
  display: flex;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}
header nav ul li{
    /* padding-left: 25px; */
    padding-right: 25px;
    white-space:nowrap;
}
@media (max-width: 991px) { 
  header nav.global_menu_pc ul{
    font-size: 14px;
  }
}
@media (max-width: 900px) { 
  header nav.global_menu_pc ul{
    font-size: 12px;
  }
}
.yazirusi_center{
    padding: 5px;
}
.f-logo{
  width: 100%;
  max-width: 200px;
}
nav ul li a {
  text-decoration: none;
  color: #3d3d3d;
}
.kv_back{
  background-image: url("../img/kv_back.jpg");
  display: inline-block;
  width: 100%;
  min-width: 100px;
  vertical-align: top;
  background-position: center; 
  background-size: cover
}
.kv_gara{
  background-image: url("../img/kv_gara.png");
  display: inline-block;
  width: 100%;
  min-width: 100px;
  vertical-align: top;
  background-position: center; 
  background-size: cover;
}

.kv{
    width: 100%;
    max-width: 1000px;
  margin: auto;
  position: relative;
  margin-bottom: 10vw;
}
@media (max-width: 1199px) { 
  .kv{
    width: 100%;
    max-width: 1000px;
    margin: auto;
    position: relative;
    margin-bottom: 6vw;
  }
}
@media (max-width: 414px) { 
.kv{
  width: 100%;
  max-width: 1000px;
  margin: auto;
  position: relative;
  margin-bottom: 6vw;
  display: none;
}
}
.sp_kv{
  display: none;
}
@media (max-width: 414px) { 
.sp_kv{
  width: 100%;
  padding: 4px;
  margin: auto;
  position: relative;
  margin-bottom: 9vw;
  display: block;
}
}
.kv_center{
    text-align: center;
    margin-top: 10%;
}
@media (max-width: 1199px) { 
  .kv_center{
    text-align: center;
    margin-top: 20%;
  }
}

.kv_center .image_frame{
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}
.kv_center .image_frame .btn_brochure{
  text-decoration: none;
  position: absolute;
  z-index: 1;
  top: 433px;
  left: 435px;
  display: block;
  font-weight: bold;
  background: #5c7c3f;
  padding: 15px 35px;
  text-align: center;
  border-radius: 60px;
  color: #6A3906;
  color: white;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
@media (max-width: 1000px) {
  .kv_center .image_frame .btn_brochure{
    left:40vw;
    top:42vw;
    padding: 15px 25px;
  }
}
@media (max-width: 767px) {
  .kv_center .image_frame .btn_brochure{
    left:38vw;
  }
}
@media (max-width: 414px) {
  .kv_center .image_frame .btn_brochure{
    top:70vw;
    left:30vw;
    padding: 15px 45px;
  }
}
.kv_center .image_frame .btn_brochure:after{
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
}
@media (max-width: 414px) {
  .kv_center .image_frame .btn_brochure:after{
    right: 20px;
  }
}
.kv_center .image_frame .btn_brochure .cap1{
  display: block;
  font-size: 13px;
  font-size: clamp(10px, 2.2vw, 13px);
  padding-bottom: 8px;
  line-height: 1.3;
}
.kv_center .image_frame .btn_brochure .cap1 .only_sp{
  display: none;
}
@media (max-width: 414px) {
  .kv_center .image_frame .btn_brochure .cap1{
    font-size: 12px;
  }
  .kv_center .image_frame .btn_brochure .cap1 .only_sp{
    display: block;
  }
}
.kv_center .image_frame .btn_brochure .cap2{
  font-size: 18px;
  font-size: clamp(13px, 3.4vw, 18px);
  font-weight: bold;
}
@media (max-width: 414px) {
  .kv_center .image_frame .btn_brochure .cap2{
    font-size: 17px;
  }
}

.monogatari_back{
background-image: url("../img/monogatari_back.png");
display: inline-block;
width: 100%;
max-width: 2500px;
vertical-align: top;
background-position: inherit; 
background-size: cover;
margin-top: -13vw;
}
@media (max-width: 991px) { 
.monogatari_back{
background-image: url("../img/monogatari_back.png");
display: inline-block;
width: 100%;
max-width: 2500px;
vertical-align: top;
background-position: center; 
background-size: cover;
margin-top: -13vw;
}
}
@media (max-width: 767px) { 
.monogatari_back{
background-image: url("../img/monogatari_back.png");
display: inline-block;
width: 100%;
min-width: 100px;
vertical-align: top;
background-position: center; 
background-size: cover;
margin-top: -18vw;
}
}
@media (max-width: 575px) { 
  .monogatari_back{
    background-image: url("../img/monogatari_back.png");
    display: inline-block;
    width: 100%;
    min-width: 100px;
    vertical-align: top;
    background-position: center; 
    background-size: cover;
    margin-top: -24vw;
    }  
}
.monogatari{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.monogatari_txt{
    width: 100%;
    max-width: 350px;
    padding-left: 10%;
    margin-top: 15%;
}
@media (max-width: 767px) { 
  .monogatari_txt{
    width: 100%;
    max-width: 200px;
    padding-left: 5%;
    margin-top: 20%;
}
}
@media (max-width: 575px) { 
  .monogatari_txt{
    width: 100%;
    max-width: 150px;
    padding-left: 5%;
    margin-top: 30%;
}
}
.text{
    padding-left: 10%;
    color: #fff;
    line-height: 2.1;
    width: 100%;
    max-width: 760px;
    margin-top: 4%;
    /* letter-spacing: 4px; */
    text-shadow: 2px 2px 1px #6a3906, -2px 2px 1px #6a3906, 2px -2px 1px #6a3906, -2px -2px 1px #6a3906, 2px 0px 1px #6a3906, 0px 2px 1px #6a3906, -2px 0px 1px #6a3906, 0px -2px 1px #6a3906;
}
@media (max-width: 767px) {
  .text{
    padding: 6%;
    color: #fff;
    line-height: 2.1;
    width: 100%;
    max-width: 780px;
    margin-top: 2%;
    background: #6a3906;
}
}
@media (max-width: 575px) { 
  .text {
    z-index: 1;
    padding: 6%;
    color: #fff;
    line-height: 2.4;
    font-size: 14px;
    width: 100%;
    max-width: 580px;
    margin-top: 0%;
    background: #6a3906;
}
}
.siro{
    width: 100%;
    max-width: 2500px;
    margin-top: -11%;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) { 
  .siro{
    width: 100%;
    max-width: 1000px;
    margin-top: 3%;
    position: relative;
    z-index: 1;
}
}
@media (max-width: 767px) { 
  .siro{
    width: 100%;
    max-width: 1000px;
    margin-top: 3%;
    position: relative;
    z-index: 1;
    display: none;
}
}
@media (max-width: 575px) { 
  .siro{
    width: 100%;
    max-width: 1000px;
    margin-top: 3%;
    position: relative;
    z-index: 1;
    display: none;
}
}
.sp_siro{
  display: none;
}
@media (max-width: 991px) { 
  .sp_siro{
    display: none;
    width: 100%;
    max-width: 800px;
    margin-top: -5%;
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 767px) { 
  .sp_siro{
    display: block;
    width: 100%;
    max-width: 800px;
    margin-top: -5%;
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 575px) { 
  .sp_siro{
    display: block;
    width: 100%;
    max-width: 580px;
    margin-top: -6%;
    position: relative;
    z-index: 1;
}
}
.kumo{
    width: 100%;
    max-width: 600px;
    vertical-align: bottom;
}
.gara{
    display: flex;
}
.siro_position{
    text-align: right;
}
.tizu_back{
    background-image: url("../img/tizu_back.jpg");
    display: inline-block;
    width: 100%;
    min-width: 100px;
    vertical-align: top;
    background-position: center; 
    background-size: cover;
}
@media (max-width: 767px) {
  .tizu_back{
    background-image: url("../img/tizu_back.jpg");
    display: inline-block;
    width: 100%;
    min-width: 100px;
    vertical-align: top;
    background-position: center; 
    background-size: cover;
}
}
.tizu{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.tizu_position{
    text-align: center;
    width: 100%;
    max-width: 2000px;
    margin: 10% auto 6% auto;
}
@media (max-width: 1199px) { 
  .tizu_position{
    max-width: 900px;
  }
}
@media (max-width: 991px) { 

}
@media (max-width: 767px) {
  .tizu_position{
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 10% auto 6% auto;
    display: none;
  }
}

.tizu_back .related_contents{
  position: relative;
  top: -100px;
}
@media (max-width: 1700px) {
  .tizu_back .related_contents{
    top: -70px;
  }
}
@media (max-width: 1500px) {
  .tizu_back .related_contents{
    top: -30px;
  }
}
@media (max-width: 767px) {
  .tizu_back .related_contents{
    top: -100px;
  }
}
@media (max-width: 575px) {
  .tizu_back .related_contents{
    top: 0px;
  }
}
.tizu_back .related_contents .headline{
  font-size: 28px;
  font-weight: bold;
  color: #6a3906;
  margin: 0 0 10px 0;
  text-align: center;
}
.tizu_back .related_contents .related_buttons{
  list-style: none;
  padding: 0;
  margin: 30px 15px 100px 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 30px;
}
@media (max-width: 575px) {
  .tizu_back .related_contents .headline{
    margin-top: 30px;
  }
  .tizu_back .related_contents .related_buttons{
    margin-bottom: 20px;
    gap: 20px;
  }
}
.tizu_back .related_contents .related_buttons li a{
  text-decoration: none;
  background: #5c7c3f;
  color: white;
  padding: 20px;
  border-radius: 30px;
  font-weight: bold;
  position: relative;
  min-width: 280px;
  display: block;
}
.tizu_back .related_contents .related_buttons li a:after{
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
}

.sp-tizu{
  display: none;
}
@media (max-width: 767px) {
  .sp-tizu{
    display: block;
    text-align: center;
}
}
@media (max-width: 575px) { 
  .sp-tizu{
    display: block;
    text-align: center;
    padding: 0 20px;
}
}
@media (max-width: 767px) {
    .sp-tizu p.explanation{
      display: block;
      text-align: center;
      font-size: 19px;
    line-height: 1.5;
      padding: 15px;
      font-weight: 900;
      color: #473737;
      font-family: 'Noto Serif JP', sans-serif;
  }
}
@media (max-width: 575px) { 
  .sp-tizu p.explanation{
    display: block;
    text-align: center;
    font-size: 15px;
  line-height: 1.5;
    padding: 15px;
    font-weight: 900;
    color: #473737;
    font-family: 'Noto Serif JP', sans-serif;
}
}
@media (max-width: 767px) {
  .sp-tizu div.box{
  border: 2px solid #6a3906;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  padding: 10px 10px;
  margin-top: -2px;
  display: flex;
  justify-content: space-between;
}
}
@media (max-width: 575px) {
  .sp-tizu div.box{
    border: 2px solid #6a3906;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 10px 10px;
    margin-top: -2px;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .sp-tizu .map-title{
  margin: 20% auto 5% auto;
    width: 100%;
    max-width: 300px;
}
}
@media (max-width: 575px) {
    .sp-tizu .map-title{
    margin: 20% auto 5% auto;
      width: 100%;
      max-width: 270px;
  }
}
@media (max-width: 767px) {
  .sp-tizu .lnk{
  width: 100%;
  max-width: 500px;
}
}
@media (max-width: 575px) {
  .sp-tizu .lnk {
    width: 96%;
    max-width: 410px;
    object-fit: contain;
}
}
@media (max-width: 767px) {
  .sp-tizu a:hover{
    color: rgba( 255, 255, 255, 0.45 );
}
}
@media (max-width: 767px) {
  .sp-tizu .sp-lnkbotann{
  width: 100%;
  max-width: 22px;
}
}
@media (max-width: 575px) {
  .sp-tizu .sp-lnkbotann{
    width: 100%;
    max-width: 15px;
  }
}
@media (max-width: 767px) {
.sp-tizu .pamphletbotann{
margin: 10% auto 25% auto;
width: 100%;
max-width: 280px;
}
}
@media (max-width: 575px) { 
  .sp-tizu .pamphletbotann{
    margin: 10% auto 10% auto;
    width: 100%;
    max-width: 240px;
    }
}
.kumo_position{
    margin-top: -24vw;
    display: flex;
    justify-content: space-between;
    
}
@media (max-width: 1199px) { 
  .kumo_position{
    margin-top: -23vw;
    display: flex;
    justify-content: space-between;
}
}
@media (max-width: 991px) { 
  .kumo_position{
    margin-top: -32vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0vw;
}
}
@media (max-width: 767px) {
  .kumo_position{
    margin-top: -43vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: -2vw;
}
}
@media (max-width: 575px) { 
  .kumo_position{
    margin-top: -25vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: -5vw;
}
}
.kumo_2{
    width: 100%;
    max-width: 350px;
    margin-top: 80px;
}
@media (max-width: 1199px) { 
.kumo_2{
    width: 100%;
    max-width: 250px;
    margin-top: 80px;
    position: relative;
    right: 0vw;
}
}
@media (max-width: 991px) { 
  .kumo_2{
    width: 100%;
    max-width: 220px;
    margin-top: 80px;
    position: relative;
    right: 0vw;
}
}
@media (max-width: 575px) { 
 .kumo_2{
    width: 100%;
    max-width: 120px;
    margin-top: 100px;
    position: relative;
    right: 0vw;
} 
}
.kumo_3{
    width: 100%;
    max-width: 250px;
}
@media (max-width: 1199px) { 
  .kumo_3{
    width: 100%;
    max-width: 200px;
    position: relative;
    left: -3vw;
}
}
@media (max-width: 575px) { 
  .kumo_3{
    width: 100%;
    max-width: 85px;
    position: relative;
    left: 0vw;
    margin-top: 60px;
}
}
footer{
  background: #6a3906;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 40px 20px;
}
@media (max-width: 767px) { 
  footer{
    display: block;
    text-align: center;
  }
}

.footer_nav{
  padding-left: 0;
}
.footer_nav ul{
  flex-wrap: wrap;
  margin:0;
}
.footer_nav ul li{
  margin:5px 0;
}
@media (max-width: 991px) {
  .footer_nav{
    font-size: 14px;
  }
}

.footer-inner{
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
@media (max-width: 767px) { 
.footer-inner{
  max-width: 1200px;
  width: 100%;
  display: block;
  align-items: center;
  margin: 0 auto;
}
}
footer div.logo{
  font-family: 'Noto Serif JP', sans-serif;
  min-width: 160px;
}

footer nav{
  padding-left: 35px;
  font-size: 15px;
  font-family: 'Noto Serif JP', sans-serif;
}
@media (max-width: 991px) {
  footer nav{
    padding-left: 30px;
    font-size: 14px;
    font-family: 'Noto Serif JP', sans-serif;
}
}
@media (max-width: 767px) { 
  footer nav{
    display: none;
  }
}
footer nav ul li{
    padding-left: 17px;
    white-space: nowrap;
}
footer p.sizu_txt{
    font-size: 20px;
    margin-bottom: 7%;
}
@media (max-width: 767px) { 
  footer p.sizu_txt{
    font-size: 23px;
    margin-bottom: 3%;
}
}
@media (max-width: 575px) { 
  footer p.sizu_txt{
    font-size: 17px;
    margin-bottom: 4%;
}
}
footer p.copylight{
    font-size: 14px;
    color: #e0d9d4;
    font-family: 'Noto Serif JP', sans-serif;
}
@media (max-width: 575px) { 
  footer p.copylight{
    font-size: 14px;
    color: #e0d9d4;
    font-family: 'Noto Serif JP', sans-serif;
} 
}
footer nav ul li .slash{
padding-left: 15px;
}
footer nav ul li a{
    text-decoration: none;
    color: #fff;
}
footer a:hover{
  color: rgba( 255, 255, 255, 0.45 );
} 
/*モーダルウインドウ*/
.remodal-bg.with-red-theme.remodal-is-opening,
    .remodal-bg.with-red-theme.remodal-is-opened {
     filter: none;
}
div.modalT{
  padding: 10% 0 5% 15%;
}
div.modalT a{
  color: rgba( 255, 255, 255, 0.45 );
  text-decoration: none;
}
div.modalT a:hover{
  color: rgba( 255, 255, 255, 0.45 );
}
.modal1Desc{
  margin-bottom: 6%;
  font-family: 'Noto Serif JP', sans-serif;
  text-align: left;
 font-size: 19px;
 color: #6a3906;
}
.m-yazirusi{
  width: 100%;
  max-width: 10px;
  margin-right: 10px;
  vertical-align: middle;
}
.tizu_back_m{
  background-image: url("../img/tizu_back.jpg");
  display: inline-block;
  width: 100%;
  min-width: 100px;
  vertical-align: top;
  background-position: center; 
  background-size:contain;
}
/*↑モーダルウインドウ終わり*/

/*マップ*/
.m_back{
  background-image: url("../img/map.svg");
  display: inline-block;
  width: 85%;
  max-width: 1000px;
  vertical-align: top;
  background-position: center; 
  background-size: cover;
  height: 55vw;
}
@media (max-width: 2500px) { 
  .m_back{
    width: 100%;
    max-width: 1080px;
    height: 36vw;
    margin-bottom: 10%;
  }
}
@media (max-width: 2300px) { 
  .m_back{
    max-width: 1000px;
    height: 36vw;
    margin-bottom: 8%;
  }
}
@media (max-width: 2000px) { 
  .m_back{
    height: 42vw;
  }
}
@media (max-width: 1920px) { 
  .m_back{
    height: 44vw;
  }
}
@media (max-width: 1700px) { 
  .m_back{
    max-width: 1000px;
    height: 49vw;
  }
}
@media (max-width: 1500px) { 
  .m_back{
    max-width: 920px;
    height: 50vw;
  }
}
@media (max-width: 1330px) { 
  .m_back{
    height: 58vw;
  }
}
@media (max-width: 1199px) { 
  .m_back{
    max-width: 900px;
    height: 65vw;
  }
}
@media (max-width: 991px) {
  .m_back{
    max-width: 1000px;
    height: 73vw;
  }  
}
ul.lnk{
  display: flex;
  width: 100%;
  max-width: 250px;
} 
@media (max-width: 1199px) { 
ul.lnk{
  display: flex;
  width: 100%;
  max-width: 230px;
} 
}
@media (max-width: 991px) { 
ul.lnk{
  display: flex;
  width: 23%;
  max-width: 230px;
} 
}
.no1{
  position: relative;
  top: 15vw;
  right: 3%;
  width: 100%;
  max-width: 190px;
  display: block;
}
@media (max-width: 1199px) { 
.no1{
  position: relative;
  top: 20vw;
  right: 3%;
  width: 80%;
  max-width: 190px;
  display: block;
}  
}
@media (max-width: 991px) {
.no1{
  position: relative;
  top: 25vw;
  right: -10%;
  width: 80%;
  max-width: 190px;
  display: block;
}  
}
.no2{
  position: relative;
  top: 13vw;
  left: 0;
  width: 100%;
  max-width: 200px;
  display: block;
}
@media (max-width: 1199px) { 
.no2{
  position: relative;
  top: 18vw;
  left: 0;
  width: 100%;
  max-width: 200px;
  display: block;
} 
}
@media (max-width: 991px) {
.no2 {
    position: relative;
    top: 21vw;
    left: 16px;
    width: 100%;
    max-width: 160px;
    display: block;
}
}
.no3{
  position: relative;
  top: 15vw;
  left: 0;
  width: 100%;
  max-width: 180px;
  display: block;
}
@media (max-width: 1199px) {
 .no3{
  position: relative;
  top: 19vw;
  left: 0;
  width: 85%;
  max-width: 180px;
  display: block;
} 
}
@media (max-width: 991px) { 
.no3{
  position: relative;
  top: 22vw;
  left: 13px;
  width: 85%;
  max-width: 130px;
  display: block;
}  
}
.no4{
  position: relative;
  top: 19.5vw;
  right: 25%;
  width: 100%;
  max-width: 250px;
  display: block;
}
@media (max-width: 1199px) {
.no4{
  position: relative;
  z-index: 1;
  top: 20vw;
  right: 20%;
  width: 110%;
  max-width: 250px;
  display: block;
}
}
@media (max-width: 991px) { 
.no4{
  position: relative;
  z-index: 1;
  top: 25vw;
  right: -5%;
  width: 110%;
  max-width: 250px;
  display: block;
} 
}
.no5{
  position: relative;
  top: 13.5vw;
  left: 90%;
  width: 100%;
  max-width: 240px;
  display: block;
}
@media (max-width: 1199px) {
.no5{
  position: relative;
  top: 12vw;
  left: 95%;
  width: 100%;
  max-width: 240px;
  display: block;
}
}
@media (max-width: 991px) { 
.no5{
  position: relative;
  top: 17.5vw;
  left: 120%;
  width: 100%;
  max-width: 240px;
  display: block;
}
}
.no6{
  position: relative;
  top: 7vw;
  left: 200%;
  width: 100%;
  max-width: 280px;
  display: block;
}
@media (max-width: 1199px) {
.no6{
  position: relative;
  top: 5vw;
  left: 201%;
  width: 110%;
  max-width: 280px;
  display: block;
}
}
@media (max-width: 991px) { 
.no6{
  position: relative;
  top: 10vw;
  left: 230%;
  width: 110%;
  max-width: 280px;
  display: block;
}  
}
.no7{
  position: relative;
  top: 10vw;
  left: 320%;
  width: 100%;
  max-width: 170px;
  display: block;
}
@media (max-width: 1199px) {
.no7{
  position: relative;
  z-index: 1;
  top: 9vw;
  left: 315%;
  width: 100%;
  max-width: 170px;
  display: block;
}
}
@media (max-width: 991px) {
.no7{
  position: relative;
  z-index: 1;
  top: 12vw;
  left: 350%;
  width: 80%;
  max-width: 130px;
  display: block;
}
}
.no8{
  position: relative;
  top: 7vw;
  left: 300%;
  width: 100%;
  max-width: 240px;
  display: block;
}
@media (max-width: 1199px) {
.no8{
  position: relative;
  top: 7vw;
  left: 266%;
  width: 100%;
  max-width: 240px;
  display: block;
}
}
@media (max-width: 991px) { 
.no8{
  position: relative;
  z-index: 1;
  top: 10vw;
  left: 315%;
  width: 110%;
  max-width: 240px;
  display: block;
} 
}
.no9{
  position: relative;
  top: 6vw;
  left: 300%;
  width: 100%;
  max-width: 210px;
  display: block;
}
@media (max-width: 1199px) {
.no9{
  position: relative;
  top: 6vw;
  left: 279%;
  width: 100%;
  max-width: 210px;
  display: block;
}
}
@media (max-width: 991px) { 
.no9{
  position: relative;
  top: 8vw;
  left: 325%;
  width: 100%;
  max-width: 210px;
  display: block;
}  
}
.no10{
  position: relative;
  top: 6vw;
  left: 270%;
  width: 100%;
  max-width: 320px;
  display: block;
}
@media (max-width: 1199px) {
.no10{
  position: relative;
  top: 6vw;
  left: 265%;
  width: 120%;
  max-width: 300px;
  display: block;
}
}
@media (max-width: 991px) { 
.no10{
  position: relative;
  top: 8vw;
  left: 300%;
  width: 130%;
  max-width: 300px;
  display: block;
}
}
.no11{
  position: relative;
  top: 6vw;
  left: 240%;
  width: 160%;
  max-width: 500px;
  display: block;
}
@media (max-width: 1199px) {
.no11{
  position: relative;
  top: 8vw;
  left: 234%;
  width: 150%;
  max-width: 500px;
  display: block;
}
}
@media (max-width: 991px) { 
.no11 {
    position: relative;
    top: 8vw;
    left: 260%;
    width: 180%;
    max-width: 290px;
    display: block;
}
}