@charset "utf-8";

@import url("header.css");
@import url("nav.css");
@import url("footer.css");


@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

@font-face {
 font-family: "aAccountantSignature";
 src: url("../_font/aAccountantSignature.woff2") format("woff2"),
  url("../_font/aAccountantSignature.woff") format("woff");
}


/*
body * { border:0.02px solid #000000; background:rgba(000,000,000,0.1)}
*/

html,
body {
 width: 100%;
 font-size: 62.5%;
 color: #092c45;
 background-color: #d1dde6;
}

html {}

body {}

#wrap {
 min-width: 960px !important;
 overflow-x: hidden !important;
}

.showPc {}

.showSp {
 display: none;
}

@media only screen and (max-width:960px) {

 html,
 body {
  /*font-size: 55%;*/
 }
}

@media only screen and (max-width:640px) {

 html,
 body {
  width: 640px;
  min-width: 640px;
  font-size: 106.67%;
  font-size: 90%;
 }

 #wrap {
  width: 640px !important;
  min-width: 640px !important;
 }

 .showPc {
  display: none !important;
 }

 .showSp {
  display: block;
 }
}


/* --------------------------------------------

変数設定

---------------------------------------------- */
:root {
 --color-blue: #092c45;
 --color-blue2: rgba(9, 44, 69, 0.3);
 --color-gold: #b08c47;
 --color-white: #fff;
 --shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 --hanten: invert(100) brightness(100);
}


/* --------------------------------------------

fonts

---------------------------------------------- */
body,
input,
select,
select option,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size: 1.4rem;
 line-height: 2;
 line-height: 1.4;
 letter-spacing: 0.05em;
 font-family: "Shippori Mincho", serif;
}

body,
input,
select,
select option,
textarea,
table,
th,
td,
p {
 font-weight: 400;
 font-style: normal;
 font-feature-settings: "palt";
 text-align: justify;
 text-justify: inter-ideograph;
}

p {
 line-height: 1.8;
}

b,
strong {
 font-weight: 600;
}

small {
 display: inline-block;
 font-size: 0.85em;
}

a {
 color: #092c45;
 text-decoration: none;
}

a img {
 /*transition: 0.3s;*/
}

a:hover img {
 /*opacity: 0.6 !important;*/
}

.ff-en {
 font-family: "Alice", serif;
 font-weight: 400;
 font-style: normal;
}

.ff-en2 {
 font-family: 'aAccountantSignature', sans-serif;
 font-weight: 300;
}



/* セレクト時の色指定 */
::selection {
 background: #d6daea;
 color: #092c45;
}

::-moz-selection {
 background: #d6daea;
 /*Firefox*/
 color: #092c45;
}



/* --------------------------------------------

#main

---------------------------------------------- */
#main {
 position: relative;
 min-height: 700px;
 /*margin-top: 120px;
 opacity: 0;
 animation: anime_fadeIn 0.1s ease 0s 1 forwards;
 -webkit-animation: anime_fadeIn 0.1s ease 0s 1 forwards;*/
}


/*--- Responsive ---*/
@media only screen and (max-width:1280px) {
 #main {
  /*margin-top: 90px;*/
 }
}

@media only screen and (max-width:640px) {
 #main {
  /*margin-top: 90px;*/
 }
}










/* --------------------------------------------

リンク

---------------------------------------------- */

/*--- ボタン ---*/
.linkBtn {
 display: inline-block;
 min-width: 280px;
 position: relative;
 padding: 1em 4em 1em 2em;
 text-align: center;
 margin: 0 12px;
 border: 1px solid rgba(9, 44, 69, 1);
 border-width: 0.6px 1.8px;
}

.linkBtn::before {
 content: "";
 width: 3.4em;
 height: 3.4em;
 display: block;
 position: absolute;
 right: 0.5em;
 top: 0.1em;
 background-image: url(../_image/common/linkIcon.svg);
 background-size: 70%;
 background-repeat: no-repeat;
 background-position: center;
}

/*--- 白ver ---*/
.linkBtn-w {
 color: #fff;
 border-color: #fff;
}

.linkBtn-w::before {
 background-image: url(../_image/common/linkIcon-w.svg);
}


/*--- テキストのみ ---*/
.linkBtn-text {
 display: inline-block;
 position: relative;
 font-size: 1.2rem;
 padding: 1em 5em 1em 2em;
 text-align: center;
}

.linkBtn-text::before {
 content: "";
 width: 3.4em;
 height: 3.4em;
 display: block;
 position: absolute;
 right: 0.5em;
 top: 0.1em;
 background-image: url(../_image/common/linkIcon.svg);
 background-size: 70%;
 background-repeat: no-repeat;
 background-position: center;
}

.linkBtn-text-w {
 filter: brightness(100);
}



@media only screen and (max-width:640px) {

 /*--- ボタン ---*/
 .linkBtn {}

 .linkBtn::before {
  content: "";
  width: 2.5em;
  height: 2.5em;
  right: 0.5em;
  top: 0.5em;
 }

 /*--- 白ver ---*/
 .linkBtn-w {
  color: #fff;
  border-color: #fff;
 }

 .linkBtn-w::before {
  background-image: url(../_image/common/linkIcon-w.svg);
 }


 /*--- テキストのみ ---*/
 .linkBtn-text {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  padding: 1em 5em 1em 2em;
  text-align: center;
 }

 .linkBtn-text::before {
  content: "";
  width: 3.4em;
  height: 3.4em;
  display: block;
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  background-image: url(../_image/common/linkIcon.svg);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
 }

 .linkBtn-text-w {
  filter: brightness(100);
 }
}




/* --------------------------------------------

宿泊予約

---------------------------------------------- */
.staySearchWrap {
 padding: 40px 0 20px;
 background: #092c45;
 background: linear-gradient(0deg, #092c45 0%, #002437 80%);
}

.staySearch_widget .inner {
 display: flex;
 width: 100%;
 max-width: 1000px;
 justify-content: space-between;
 flex-wrap: wrap;
 color: #fff;
}

.staySearch_widget section {}

.staySearch_widget section h4 {
 font-size: 1.6rem;
 line-height: 1.8;
}

.staySearch_widget select {
 width: 5em;
 padding: 0 0.8em;
 margin: 0 3px 0 0;
 height: 40px;
 line-height: 1;
 background-color: #ebebeb;
 background-image: url(../_image/common/form-select.svg);
 background-repeat: no-repeat;
 background-position: right center;
 background-size: auto 100%;
}

.staySearch_widget select[name="dt_yyyymm"] {
 width: 8.5em;
}

.staySearch_widget input[type="radio"] {}

.staySearch_widget input[type="radio"] + label {
 display: inline-block;
 height: 40px;
 margin: -0px 0% 0em -15px;
 padding: 0 1em 0 2.6em;
 cursor: pointer;
 font-size: 1.4rem;
 line-height: 40px;
 color: #ffd;
 background-image: url(../_image/common/form-off.svg);
 background-size: auto 100%;
 background-position: right left;
 background-repeat: no-repeat;
 background-color: #6e8296;
}

.staySearch_widget input[type="radio"]:checked + label {
 color: #000;
 background-image: url(../_image/common/form-on.svg);
 background-color: #ebebeb;
}

.staySearch_widget input[type="submit"] {
 min-width: 8em;
 padding: 0 1.6em 0 0;
 text-align: center;
 color: #fff;
 background-color: #001821;
 background-image: url(../_image/common/icon-search.svg);
 background-repeat: no-repeat;
 background-size: 1.6em;
 background-position: right 1.5em center;
 border-width: 1px 2px;
 border-style: solid;
 border-color: rgba(255, 255, 255, 0.5);
}

.staySearch_members.inner {
 justify-content: flex-end;
}

.staySearch_members a {
 font-size: 1.3rem;
 line-height: 3.6;
 text-decoration: underline;
 color: #fff;
}

.staySearch_members a::before {
 content: ">";
 display: inline-block;
 width: 2.8em;
 height: 1.7em;
 vertical-align: middle;
 margin: -0.5em 0 0 1.5em;
 text-align: center;
 line-height: 1.6;
 transform: scale(0.6, 1);
 font-size: 0.7em;
 border: 1px solid #fff;
 border-radius: 50%;
}



@media only screen and (max-width:640px) {
 .staySearchWrap {
  padding: 30px 0px 10px;
 }

 .staySearch_widget .inner {
  justify-content: space-between;
 }

 .staySearch_widget section {
  padding: 0px 20px 15px;
 }

 .staySearch_widget section h4 {
  font-size: 1.4rem;
 }

 .staySearch_widget select {
  width: 7em;
  height: 60px;
 }

 .staySearch_widget select[name="dt_yyyymm"] {
  width: 10em;
 }

 .staySearch_widget input[type="radio"] + label {
  height: 60px;
  line-height: 60px;
 }

 .staySearch_widget input[type="submit"] {
  min-width: 14em;
  margin: 1em auto 0;
  padding: 20px 1.6em 20px 0;
 }

 .staySearch_members.inner {
  justify-content: center;
 }

 .staySearch_members a::before {
  margin: -0.5em 0 0 0.3em;
 }
}





/* --------------------------------------------

下層ページ共通

---------------------------------------------- */

.inner {
 width: 92%;
 max-width: 1080px;
 margin: auto;
}

.mainCtnr {
 margin: 80px auto;
}

.flex {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 margin: auto;
}

@media only screen and (max-width:640px) {
 .mainCtnr {
  margin: 40px auto;
 }
}

/* セクション
---------------------------------------------- */
.section-style {
 margin: 0 0 60px;
}

.section-style > p {
 margin: 10px 0;
}

.section-style > .flex {
 justify-content: flex-start;
}

.section-style > .flex span.bg-blue {
 display: block;
}


@media only screen and (max-width:640px) {}


/* 見出し
---------------------------------------------- */
.ttl-a {
 padding: 0.7em 1.2em;
 margin: 0 0 20px;
 font-size: 1.6rem;
 font-weight: 500;
 background: #fff;
}

.ttl-a span.ff-en {
 display: block;
 font-size: 0.7em;
 opacity: 0.4;
}

.ttl-b {
 display: block;
 padding-left: 0.8em;
 margin: 0 0 15px;
 font-size: 1.6rem;
 font-weight: 500;
 line-height: 1.8;
 border-left: 4px solid var(--color-blue);
}

.ttl-c {
 display: block;
 margin: 0 0 10px;
 padding: 0.2em 0.6em;
 line-height: 1.4;
 font-weight: 500;
 background-color: rgba(9, 44, 69, 0.15);
}

.ttl-d {
 display: block;
 padding: 10px 18px;
 margin: 0 0 5px;
 font-size: 1.4rem;
 font-weight: 500;
 background: rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width:640px) {}

/* 表
---------------------------------------------- */
.tbl-a {
 margin: 10px 0;
}

.tbl-a th,
.tbl-a td {
 padding: 0.25em 1em;
 vertical-align: middle;
 text-align: center;
 font-size: 1.4rem;
 border: 1px solid rgba(9, 44, 69, 0.3);
 border-width: 1px 1.8px;
}

.tbl-a th a,
.tbl-a td a {
 text-decoration: underline;
}

.tbl-a thead th {
 background-color: #c3d2de;
}

.tbl-a thead td {
 background-color: #dfe8ee;
}

.tbl-a tbody th {
 background-color: #c3d2de;
}

.tbl-a-left td {
 text-align: justify;
}

.tbl-left th,
.tbl-left td {
 text-align: justify
}

@media only screen and (max-width:640px) {

 .tbl-a th,
 .tbl-a td {
  padding: 0.25em 0.3em;
 }

 .tbl-a th {
  min-width: 5em;
 }
}


/* 背景色
---------------------------------------------- */
.bg-blue {
 margin: 10px 0 10px;
 padding: 12px 15px;
 background-color: #c3d2de;
}

.bg-blue2 {
 margin: 10px 0 10px;
 padding: 12px 15px;
 background-color: #dfe8ee;
}

.bg-white {
 margin: 10px 0 10px;
 padding: 12px 15px;
 background-color: #fff;
}

@media only screen and (max-width:640px) {}




/* リスト
---------------------------------------------- */
.list-a {
 margin: 10px 0;
}

.list-a li {
 padding: 0.2em 0 0.2em 1em;
 text-indent: -1em;
 text-align: justify;
}

@media only screen and (max-width:640px) {}


/* ページリンクボタン
---------------------------------------------- */
.contentsLinkWrap {
 justify-content: center;
 padding: 50px 0;
 background: #fff;
}

.contentsLinkWrap div a::before {
 background-image: url(../_image/common/linkIcon.svg);
}

.reserveLinkWrap {
 position: relative;
 justify-content: center;
 padding: 50px 4%;
 margin: 5px 0;
 background: rgb(184, 146, 80);
 background: linear-gradient(72deg, rgba(184, 146, 80, 1) 0%, rgba(140, 110, 70, 1) 80%);
}

.reserveLinkWrap::before {
 content: "";
 display: block;
 width: 100%;
 height: calc(100% + 6px);
 position: absolute;
 top: -3px;
 border: 1px solid rgba(255, 255, 255, 0.6);
}

.reserveLinkWrap p {
 width: 100%;
 padding-bottom: 20px;
 text-align: center;
 font-size: 2rem;
 color: #fff;
}

.reserveLinkWrap-stay {
 background: #0e2e47;
 background: linear-gradient(72deg, #0e2e47 0%, #1e3c53 80%);
}

@media only screen and (max-width:640px) {}







/* --------------------------------------------

.breadcrumb　パンくずリスト

---------------------------------------------- */
.breadcrumb {
 margin: 0% 0 0 0.5%;
}

.breadcrumb__list {
 display: flex;
 justify-content: flex-start;
}

.breadcrumb__list li {
 position: relative;
 padding: 0em 1em;
 font-size: 1.1rem;
 line-height: 3;
 white-space: nowrap;
}

.breadcrumb li a {
 display: block;
 text-decoration: underline;
 transition: 0.2s;
}

.breadcrumb li:hover a {
 color: #ADADAD;
}

.breadcrumb li a::after {
 content: "−";
 position: absolute;
 right: -0.5em;
 border-bottom: none;
 transition: 0.2s;
}

.breadcrumb li:hover a::after {
 color: #ADADAD;
}

@media only screen and (max-width:1280px) {
 .breadcrumb {
  top: 100px;
 }
}

@media screen and (max-width:640px) {
 .breadcrumb {
  margin: 0;
 }

 .breadcrumb li {
  font-size: 1.1rem;
 }

 .breadcrumb li:last-of-type {}

 .breadcrumb li:nth-of-type(1) {}
}


/* --------------------------------------------

下層ページタイトル

---------------------------------------------- */
.pageHeader {
 margin: 30px auto 0;
}

.pageHeader h1 {
 text-align: center;
}

.pageHeader h1 span {
 position: relative;
 display: block;
 margin: auto;
 text-align: center;
 font-size: 3.4rem;
 color: var(--color-gold);
}

.pageHeader h1 span::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0.55em;
 left: calc(50% - 2.25em);
 width: 4.5em;
 border-top: 1px solid var(--color-gold);
}

.pageHeader h1 p {
 text-align: center;
 line-height: 2.4;
 font-size: 1.8rem;
}

.pageHeader_image {
 position: relative;
 height: 36vw;
 max-height: 360px;
 margin: 50px 0 0;
 overflow: hidden;
}

.pageHeader_image > img {
 object-position: center;
 object-fit: cover;
 height: 100%;
}

.pageHeader_image_logo {
 position: absolute;
 top: calc(50% - 65px);
 left: 0;
 text-align: center;
 width: 100%;
 height: 150px;
}

.pageHeader_image_logo img {
 height: 100%;
}

.pageHeader_link {
 padding: 20px 15px;
 justify-content: center;
 background: #002437;
 background: linear-gradient(0deg, #092c45 0%, #002437 80%);
}

.pageHeader_link .linkBtn {
 display: inline-block;
 width: auto;
 min-width: 9em;
 margin: 0 4px;
 padding: 1em 4em 1em 1.5em;
}


@media screen and (max-width:640px) {
 .pageHeader {
  margin: 20px auto 0;
 }

 .pageHeader h1 span {
  font-size: 3.4rem;
 }

 .pageHeader h1 p {
  line-height: 1;
 }

 .pageHeader_image {
  margin: 40px 0 0;
 }

 .pageHeader_image_logo {
  top: calc(50% - 60px);
  height: 120px;
 }

 .pageHeader_image_logo img {
  height: 100%;
 }

 .pageHeader_link .linkBtn {
  min-width: 14.7em;
  margin: 4px;
  padding: 1em 0em;
  font-size: 1.4rem;
 }

 .pageHeader_link .linkBtn span {
  display: block;
  text-align: center;
 }

 .pageHeader_link .linkBtn::before {
  display: none;
 }

 .pageHeader_link .linkBtn.linkBtn-keizanlunch {}
}



/* --------------------------------------------

画像のみのシンプルなモーダル

---------------------------------------------- */
.imgModal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 background-color: rgba(255, 255, 255, 0.9);
 cursor: pointer;
 display: none;
 z-index: 9999;
}

.imgModal_bigimg {
 position: absolute;
 width: 90%;
 max-width: 600px;
 top: calc(50vh - 200px);
 left: 0;
 right: 0;
 margin-right: auto;
 margin-left: auto;
 border-radius: 10px;
 overflow: hidden;
}

.imgModal_close {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100vh;
 cursor: pointer;
}

.imgModal_close a {
 display: block;
 position: absolute;
 right: 2%;
 top: 4%;
 width: 50px;
 height: 50px;
 text-align: center;
 font-size: 2rem;
 line-height: 50px;
 color: #fff;
 text-align: center;
 background-color: var(--color-blue);
}

.imgModal_close a:hover {}


@media only screen and (max-width:640px) {
 .imgModal_close a {
  left: calc(50% + 220px);
  top: calc(50vh - 430px);
 }
}








/* --------------------------------------------

animation

---------------------------------------------- */
/*
https://oti.github.io/lp58/

$easeInSine:     cubic-bezier(0.47, 0, 0.745, 0.715);
$easeOutSine:    cubic-bezier(0.39, 0.575, 0.565, 1);
$easeInOutSine:  cubic-bezier(0.445, 0.05, 0.55, 0.95);

$easeInQuad:     cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeOutQuad:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeInOutQuad:  cubic-bezier(0.455, 0.03, 0.515, 0.955);

$easeInCubic:    cubic-bezier(0.55, 0.055, 0.675, 0.19);
$easeOutCubic:   cubic-bezier(0.215, 0.61, 0.355, 1);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);

$easeInQuart:    cubic-bezier(0.895, 0.03, 0.685, 0.22);
$easeOutQuart:   cubic-bezier(0.165, 0.84, 0.44, 1);
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);

$easeInQuint:    cubic-bezier(0.755, 0.05, 0.855, 0.06);
$easeOutQuint:   cubic-bezier(0.23, 1, 0.32, 1);
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

$easeInExpo:     cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeOutExpo:    cubic-bezier(0.19, 1, 0.22, 1);
$easeInOutExpo:  cubic-bezier(1, 0, 0, 1);

$easeInCirc:     cubic-bezier(0.6, 0.04, 0.98, 0.335);
$easeOutCirc:    cubic-bezier(0.075, 0.82, 0.165, 1);
$easeInOutCirc:  cubic-bezier(0.785, 0.135, 0.15, 0.86);

$easeInBack:     cubic-bezier(0.6, -0.28, 0.735, 0.045);
$easeOutBack:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
$easeInOutBack:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
*/


/*
.anime.animeFadeIn,
.anime .animeFadeIn,
.anime.animefadeInZoom,
.anime .animefadeInZoom,
.anime.animeFadeInBottomTop,
.anime .animeFadeInBottomTop,
.anime.animeFadeInLeftRight,
.anime .animeFadeInLeftRight,
.anime.animeFadeInRightLeft,
.anime .animeFadeInRightLeft {
 opacity: 0;
}


.animest.animeFadeIn,
.animest .animeFadeIn {
 animation-name: anime_fadeIn;
 animation-delay: 0.4s;
 animation-duration: 1.8s;
 animation-fill-mode: forwards;
 animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


@keyframes anime_fadeIn {
 0% {
  filter: blur(3px);
  opacity: 0;
  transform: translateY(0px) translateX(0) scale(1);
 }

 100% {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0px) translateX(0) scale(1);
 }
}


.animest.animeFadeInBottomTop,
.animest .animeFadeInBottomTop {
 animation-name: fadeInBottomTop;
 animation-delay: 0.0s;
 animation-duration: 2.5s;
 animation-fill-mode: forwards;
 animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


@keyframes fadeInBottomTop {
 0% {
  filter: blur(3px);
  opacity: 0;
  transform: translateY(40px) translateX(0) scale(0.98);
 }

 100% {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
 }
}



.animest.animeFadeInLeftRight,
.animest .animeFadeInLeftRight {
 animation-name: fadeInLeftRight;
 animation-delay: 0.4s;
 animation-duration: 2.5s;
 animation-fill-mode: forwards;
 animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


@keyframes fadeInLeftRight {
 0% {
  filter: blur(3px);
  opacity: 0;
  transform: translateY(0px) translateX(-40px) scale(1) rotate(0deg);
 }

 100% {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
 }
}

.animest.animeFadeInRightLeft,
.animest .animeFadeInRightLeft {
 animation-name: fadeInRightLeft;
 animation-delay: 0.4s;
 animation-duration: 2.5s;
 animation-fill-mode: forwards;
 animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}


@keyframes fadeInRightLeft {
 0% {
  filter: blur(3px);
  opacity: 0;
  transform: translateY(0px) translateX(40px) scale(1) rotate(0deg);
 }

 100% {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
 }
}
*/


/* --------------------------------------------

Google reCAPTCHA

---------------------------------------------- */
.grecaptcha-badge {
 visibility: hidden;
}

.gRecaptcha {
 font-size: 1.0rem;
 text-align: center;
 opacity: 0.4;
}




/* --------------------------------------------

パスワード保護ページ

---------------------------------------------- */
.post-password-form {
 padding: 100px 0;
 text-align: center;
}

.post-password-form p {
 margin: 50px 0;
 text-align: center;
}

.post-password-form input {
 padding: 10px;
 background-color: #fff;
}

/* --------------------------------------------

校正用　制作中ページ

---------------------------------------------- */


.pendPages {
 position: fixed;
 z-index: 1;
 top: 150px;
 right: 10%;
 width: 80%;
 font-size: 1.8rem;
 color: red;
 font-weight: 500;
 line-height: 50px;
 color: #fff;
 text-align: center;
 border: 2px solid #fff;
 background: rgba(255, 0, 0, 0.65);
 z-index: 10;
}

.pendImage {
 display: block;
 position: relative;
 left: 50%;
 width: 1440px;
 margin-left: -720px;
}

@media only screen and (max-width:640px) {
 .pendImage {
  width: 120vw;
  margin-left: -60vw;
 }
}