/*------------------------------
theme name: 2026
version: 251208
author: yamabatosha
author uri: https://yamabatosha.com
------------------------------*/
@charset "utf-8";
@import url(css/reset.css);
/*font-family: 'Zen Kaku Gothic New', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); */
/*------------------------------
base
------------------------------*/
html {
  font-size: 16px;
  overflow-x: hidden;
}

.center {
  text-align: center !important;
}

::selection {
  background: #000;
  color: #fff;
}

* {
  outline: none;
}

/*------------------------------
font
------------------------------*/
.mt0 {
  margin-top: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.ls0 {
  letter-spacing: 0 !important;
}

.sm {
  font-size: .7em;
}

.not-found {
  min-height: calc(100vh - 85px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*------------------------------
grid
------------------------------*/
.col-center,
.col-1,
.col-2,
.col-1-2,
.col-2-1 {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 40px 0;
  margin-top: 40px;
  align-items: start;
}
.pages .col-2 {
  grid-gap: 50px 0;
  margin-top: 50px;
}

.col-1-2,
.col-2-1 {
  grid-gap: 20px;
  margin-top: 48px;
}

/* min-width 1024px
------------------------------*/
@media (min-width: 1024px) {
  .col-center,
  .col-1,
  .col-2,
  .col-1-2,
  .col-2-1 {
    grid-gap: 0 60px;
    margin-top: 45px;
  }

  .col-1 {
    margin-top: 100px;
  }

  .col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .col-1-2 {
    grid-template-columns: 400px 1fr;
    grid-gap: 80px;
    margin-top: 100px;
  }

  .col-2-1 {
    grid-template-columns: 1fr 400px;
    grid-gap: 80px;
    margin-top: 100px;
  }

  .pages .col-2 {
    grid-gap: 60px 50px;
    margin-top: 100px;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }
}

/*------------------------------
style
------------------------------*/
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'YuGothic', 'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: break-all;
}

body {
  animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/*------------------------------
basic
------------------------------*/
p {
  margin-top: 20px;
}

h2,
h3,
h4 {
  line-height: 1;
  font-weight: 400;
  margin-top: 40px;
}


h2 {
  font-size: clamp(1.875rem, 0.972rem + 3.7vw, 3.75rem);
}

h3 {
  font-size: clamp(1.125rem, 0.704rem + 1.73vw, 2rem);
}

h4 {
  font-size: clamp(0.875rem, 0.574rem + 1.23vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
}

div p:first-child,
div h2:first-child,
div h3:first-child,
div h4:first-child,
ol.list:first-child,
ul.list:first-child {
  margin: 0;
}

a {
  transition: .3s;
}

a,
a:hover,
a:active,
a:focus {
  color: #000;
  text-decoration: none;
}

section a img:hover {
  opacity: .9;
}

/* リンク装飾 */
.news a,
.title a,
.access a,
.events-title a,
.article a {
  padding-bottom: clamp(2px, 0.6vw, 4px);
  border-bottom: 1px dashed #707070;
}

.news a:hover,
.title a:hover,
.access a:hover,
.events-title a:hover,
.article a:hover {
  color: #004c6f;
  border-bottom: 1px dashed #004c6f;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  backface-visibility: hidden;
  transition: .3s;
}

hr {
  margin: 40px 0;
  width: 100%;
  border: 0;
  border-top: solid 1px #004c6f;
}

/*------------------------------
list
------------------------------*/
/* ol.list,
ul.list {
  margin-top: 2em;
}

ol.list li,
ul.list li {
  position: relative;
  margin-left: 1.5em;
}

ul.list li {
  list-style: none;
}

ul.list li::after {
  display: block;
  content: '';
  position: absolute;
  top: 1em;
  left: -1em;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 50%;
} */

/*------------------------------
news
------------------------------*/

dl.news dt {
  padding: 16px 0 0;
}

dl.news dt {
  font-weight: 600;
}

/*------------------------------
form
------------------------------*/
form {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: column;
  /* スマホ：縦並び */
  margin-bottom: 20px;
}

.row label {
  margin-bottom: 6px;
  font-weight: 600;
}

.row input,
.row textarea,
.row select {
  flex: 1;
  width: 100%;
  padding: 10px;
}

/* セレクトボックス */
.select-wrap {
  position: relative;
  flex: 1;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: clamp(0.938rem, 0.486rem + 1.85vw, 1.875rem);
  width: clamp(0.5rem, 0.44rem + 0.25vw, 0.625rem);
  height: clamp(0.5rem, 0.44rem + 0.25vw, 0.625rem);
  border-right: 1.5px solid #555;
  border-bottom: 1.5px solid #555;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* .row.file .row-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
} */

.row.file .note {
  line-height: 1;
}

input[type="file"]::-webkit-file-upload-button {
  margin-right: 20px;
}

.row.file input[type="file"] {
  padding: 10px 0 0;
}

/* .row.code .row-inner {
  display: inline-block;
  width: 100%;
  padding: 0;
} */

.row.code .note {
  line-height: 1;
  margin-top: 1em;
}

.row.code .wpcf7-form-control-wrap {
  display: inline-block;
}

.row.code input {
  flex: none;
  width: 120px;
}

/* PC（1024px以上）は横並び */
@media (min-width: 1024px) {
  .row {
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 50px;
  }

  .row label {
    width: 140px;
    margin-bottom: 0;
  }

  .row input,
  .row textarea,
  .row select {
    padding: 20px;
  }

  /* PC 時 note と input を縦に整列 */
  .row.file {
    flex-direction: row;
    align-items: flex-start;
  }

  .row.file .note {
    margin: 0 0 10px 0;
    padding-top: 5px;
  }

  .row.file label {
    padding-top: 5px;
  }

  .row.code input {
    width: 300px;
  }
  button {
    margin: 100px auto 0;
  }
}

/*------------------------------
cf7
------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
  background: #e6edf1;
  color: #000;
  letter-spacing: .05em;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'YuGothic', 'Zen Kaku Gothic New', sans-serif;
  line-height: 1;
}

textarea {
  height: 10em;
  line-height: 1.5;
}

input[type="submit"] {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/*------------------------------
embed
------------------------------*/

/* .embed {
  position: relative;
  width: 100%;
  padding-top: 500px;
}

.embed iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(0.8);
}

.embed-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.embed-video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

video {
  filter: drop-shadow(0px 0px #000);
} */

/*------------------------------
header
------------------------------*/

header {
  position: fixed;
  display: table;
  width: 100%;
  height: 50px;
  background: #fff;
  border-bottom: solid 1px #004c6f;
  top: 0;
  left: 0;
  z-index: 1;
  transition: .5s;
}

header .container {
  margin: 0 auto;
}

/*------------------------------
nav
------------------------------*/
header h1 {
  float: left;
  line-height: 1;
  background: #185AA5;
  width: 50px;
  height: 50px;
}

header h1 a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

header nav ul {
  line-height: 1;
}

header nav ul li {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
}

header nav ul li a:hover,
header nav ul li a.current {
  color: #004c6f;
  opacity: 1;
}

header nav .sns {
  width: auto;
  height: 1em;
  margin: 30px 20px 0 0;
}

#toggle {
  display: none;
}

/* sp */

@media (max-width: 1023px) {
  header nav {
    visibility: hidden;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #99b7c5;
    opacity: 0;
    transition: .3s ease-in-out;
  }

  html.open {
    overflow: hidden;
  }

  .open nav {
    visibility: visible;
    opacity: 1;
  }

  header nav ul {
    position: absolute;
    top: 80px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    padding-bottom: 60px;
  }

  header nav ul li {
    display: block;
    font-size: 50px;
    margin: 20px 0;
    font-weight: 500;
    text-align: left;
  }

  /* toggle
  ------------------------------*/

  #toggle {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 0px;
    z-index: 100;
    cursor: pointer;
  }

  #toggle div {
    position: relative;
  }

  #toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 0;
    transition: 0.3s ease-in-out;
  }

  #toggle span:nth-child(1) {
    top: 5px;
  }

  #toggle span:nth-child(2) {
    top: 14px;
  }

  #toggle span:nth-child(3) {
    top: 23px;
  }

  /* toggle .open */

  .open #toggle span:nth-child(1) {
    top: 14px;
    transform: rotate(45deg);
  }

  .open #toggle span:nth-child(2) {
    opacity: 0;
  }

  .open #toggle span:nth-child(3) {
    top: 14px;
    transform: rotate(-45deg);
  }
}

/*------------------------------
section container
------------------------------*/

/* section {
  margin: 80px auto 0;
} */

.container {
  position: relative;
  width: min(940px, 85%);
  margin: 60px auto;
}

.container.pages {
  margin: 90px auto 60px;
}

@media (min-width: 1024px) {
  /* section {
    margin: 100px auto 0;
  } */

  .container {
    margin: 150px auto;
  }

  .container.pages {
    margin: 230px auto 100px;
  }
}

/*------------------------------
front-page
------------------------------*/

#cover {
  position: relative;
}

#cover img {
  display: block;
  width: 75%;
  margin: 90px 12.5% 60px;

}

.tag {
  font-size: 10px;
  font-weight: 600;
  border: .5px solid #707070;
  display: inline-block;
  line-height: 1;
  padding: 2px 2px 2px 3px;
  margin-top: 20px;
}

.date {
  font-weight: 600;
  line-height: 1;
  margin: 4px 0;
}

.pagelink {
  position: relative;
  margin-top: 40px;
  transition: .3s;
}

.pagelink:hover {
  opacity: .9;
}

.pagelink > img {
  width: 100%;
  max-height: 400px;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 50% 80%;
}

.pagelink div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pagelink div img.logo {
  width: auto;
  height: clamp(4.375rem, 3.773rem + 2.47vw, 5.625rem);
  display: block;
  margin: 0 auto;
}

.pagelink div p {
  margin-top: 30px;
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.pagelink div p a {
  border-bottom: 1px solid;
}

.access img {
  margin-top: 40px;
  width: 100%;
  max-height: 400px;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.access p {
  margin-top: 16px;
  letter-spacing: 0;
}

.black,
.black:hover {
  color: #000;
}

.white,
.white:hover {
  color: #fff;
}

/*------------------------------
pages
------------------------------*/
.pages .article {
  margin-top: 40px;
}

.pages .title {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.more {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  margin-top: 50px;
}

.pages.news .title {
  border: none;
}

.pages hr {
  margin: 40px 0;
}


/* .pages .event */
.pages .article h2 {
  margin: 40px 0 0;
  font-size: clamp(0.875rem, 0.333rem + 2.22vw, 2rem);
  line-height: 1.5;
}

/* .pages .detail */
.pages .article h3 {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.8;
}

.pages .date {
  margin: 20px 0 8px;
  display: inline-block;
}

.pages .article .date {
  display: block;
}

.pages .tag {
  font-size: clamp(0.625rem, 0.444rem + 0.74vw, 1rem);
  font-weight: 600;
  border: .5px solid #707070;
  display: inline-block;
  line-height: 1;
  padding: 2px 2px 2px 3px;
  margin-left: 16px;
}

.pages .events-title {
  margin: 0;
}


.pages h2 {
  margin: 40px 0;
}

.pages h3 {
  margin-top: 20px;
}

.pages h3 a {
  border-bottom: 1px solid transparent;
}

.pages h3 a.current,
.pages h3 a:hover {
  color: #004c6f;
  border-bottom: 1px solid #004c6f;
}

/*------------------------------
footer
------------------------------*/
footer {
  text-align: center;
  color: #000;
  padding: 24px;
  font-size: 20px;
  font-weight: 600;
  border-top: solid 1px #004c6f;
}

/*------------------------------
wp
------------------------------*/
/* キャプション調整 */
.wp-block-image,
.wp-block-image figcaption {
  font-size: .8em;
  margin: 0;
}

/* カラムマージン調整 */
.wp-block-columns {
  margin: 0;
}

/* 引用調整 */
.wp-block-quote {
  border-left: solid 3px #000;
  padding-left: 30px;
}

.wp-block-quote cite a {
  font-style: normal;
  color: #999;
}

/* pagination
------------------------------*/
.page-link,
.pagination {
  text-align: center;
  margin-top: 50px;
  line-height: 1;
  width: 100%;
}

.page-link a,
.pagination .page-numbers {
  color: #000;
  border: none;
  margin: 0 8px;
  transition: .3s;
}

.page-link a.current,
.page-link a:hover,
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
  color: #004c6f;
  border: none;
}

.page-link a,
.page-link a:hover {
  padding-bottom: clamp(2px, 0.6vw, 4px);
  border-bottom: 1px dashed #707070;
}

/*------------------------------
wpcf7
------------------------------*/
span.wpcf7-not-valid-tip {
  display: none;
}

span.wpcf7-not-valid-tip,
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing,
div.wpcf7-response-output,
div.wpcf7-mail-sent-ok {
  border: none !important;
  color: #f98a6a;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'YuGothic', 'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing: antialiased;
}

input[type="submit"] {
  padding: 10px 16px;
  background: #e6edf1;
  cursor: pointer;
  width: 300px;
  max-width: 100%;
  text-align: center;
  display: block;
  margin: 50px auto 0;
  font-weight: 600;
  letter-spacing: .2em;
  transition: .3s;
}

input[type="submit"]:hover {
  background: #004c6f;
  color: #fff;
}

.wpcf7-form-control-wrap {
  display: flex;
  flex: 1;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  text-align: center;
}

div.wpcf7 .ajax-loader {
  display: none;
}

div.wpcf7 .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}

.wpcf7-captchac {
  width: auto;
  height: auto;
  margin-right: 1em;
  vertical-align: middle;
}

/* .wpcf7-captchar {
  width: 180px !important;
} */

/*------------------------------
1024px
------------------------------*/
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }

  p {
    margin-top: 40px;
  }

  h2,
  h3,
  h4 {
    margin-top: 50px;
  }

  hr {
    margin: 60px 0;
  }

  /* header 1024px
  ------------------------------*/
  header {
    height: 100px;
  }

  header h1 {
    width: 100px;
    height: 100px;
  }

  header nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
  }

  header nav ul li {
    line-height: 1;
  }

  header nav .sns {
    height: 1.5em;
    margin: 0 8px;
  }

  /* front-page 1024px
  ------------------------------*/
  #cover img {
    width: 540px;
    height: 406px;
    margin: 230px auto 150px;
  }

  dl.news {
    margin-top: 40px;
  }

  dl.news dt,
  dl.news dd {
    padding: 10px 0;
  }

  dl.news dt {
    float: left;
    padding-right: 2em;
  }

  .tag {
    font-size: 16px;
  }

  /* pages 1024px
  ------------------------------*/

  .pages h2 {
    margin: 100px 0;
  }

  .pages h3 {
    margin-top: 40px;
  }
  
  .pages .title {
    font-size: 24px;
  }

  .pages .article {
    margin-top: 100px;
  }

  /* .pages .detail, */

  /* .pages .event, */
  .pages .article h2 {
    margin-top: 50px 0 0;
  }

  .pages .article h3 {
    font-size: 24px;
    margin-top: 40px;
  }

  .pagelink {
    margin-top: 100px;
  }

  .more {
    font-size: 16px;
    margin-top: 100px;
  }

  .page-link,
  .pagination {
    margin-top: 100px;
  }

  .page-link a,
  .pagination .page-numbers {
    margin: 0 10px;
  }

  .pages hr {
    margin: 100px 0;
  }

  /* .row.file .row-inner {
    padding: 0 20px;
  } */

  footer {
    font-size: 28px;
    padding: 30px;
  }
  .not-found {
    min-height: calc(100vh - 111px);
  }
}


/*------------------------------
display
------------------------------*/
@media (min-width: 1024px) {
  .sp {
    display: none !important
  }

  .sp-center {
    text-align: left;
  }

  .pc-center {
    text-align: center;
  }
}

@media (max-width: 1023px) {
  .pc {
    display: none !important
  }

  .sp-center {
    text-align: center;
  }

  .pc-center {
    text-align: left;
  }
  .about p {
    margin-top: 12px;
  }
}

/*------------------------------------------------------------
カレンダー
------------------------------------------------------------*/

/* メニュー
------------------------------------------------------------*/

header .menu-calendar {
	position: relative;
  cursor: pointer;
}

header .menu-calendar.is-active a::after {
	content: '';
	border-right: 16px solid transparent; 
	border-bottom: 20px solid #fff;
	border-left: 16px solid transparent; 
	position: absolute;
	bottom: -28px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: .5s;
	opacity: 1;
}

header .menu-calendar.is-active a:hover {
	opacity: 1;
}

header .wrap-calendar {
	max-width: 940px;
	margin: 0 auto;
	position: relative;
}

header .wrap-calendar > div {
	padding: 24px 40px;
	width: 640px;
	position: absolute;
	top: -5px;
	right: 0;
	background: #fff;
	font-weight: 500;
	opacity: 0;
	overflow: hidden;
	transition: .2s;
	visibility: hidden;
	z-index: 2;
}

header .wrap-calendar.is-show > div {
	visibility: visible;
	opacity: 1;
	/* top: -50px; */
	top: 0;
  border: 1px solid #004c6f;
	/* box-shadow: 1px 1px #004c6f; */
}

/* カレンダー カスタマイズ
------------------------------------------------------------*/
/* .calendar {
  margin: 40px 0;
}

.calendar p {
  letter-spacing: 0;
  margin: 10px 0;
  line-height: 1;
  font-size: 12px;
}
.calendar .mark {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
  display: inline-block;
} */


.calendar-ttl {
	display: flex;
	justify-content: space-between;
	align-items: end;
	line-height: 1;
}

.calendar-ttl p:last-child {
	font-size: 12px;
}

.calendar-bg {
	background: #fff;
	padding: 20px;
	/* margin-top: 20px; */
}

#sioribi_calendar {
  font-size: 14px;
  margin-bottom: 1em;
}

#sioribi_calendar .other-month,
#sioribi_calendar .holiday-titles,
.xo-event-calendar table.xo-month .month-event-space {
	display: none;
}

#sioribi_calendar.xo-event-calendar .xo-months {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

#sioribi_calendar.xo-event-calendar table.xo-month .month-header {
	margin: 0 0 8px;
}

#sioribi_calendar.xo-event-calendar table.xo-month .month-dayname td div {
	text-align: center;
	line-height: 16px;
	letter-spacing: 0;
	height: 24px;
	border-radius: 50%;
	width: 24px;
	margin: 0 auto;
}

#sioribi_calendar.xo-event-calendar table.xo-month .month-dayname-space {
	height: 32px;
}

#sioribi_calendar.xo-event-calendar table.xo-month>thead {
	height: 28px;
}

#sioribi_calendar.xo-event-calendar table.xo-month>thead th.sunday,
#sioribi_calendar.xo-event-calendar table.xo-month>thead th.saturday {
	color: inherit;
}

#sioribi_calendar.xo-event-calendar table.xo-month,
#sioribi_calendar.xo-event-calendar table.xo-month td, .xo-event-calendar table.xo-month th {
	border: none;
}

.xo-event-calendar table.xo-month .month-dayname td div.today {
	color: inherit;
	font-weight: inherit;
}

/* .holiday-holiday {
	color: #fff;
} */

.calendar-guide p {
	font-size: 14px;
	letter-spacing: .05em;
  margin: 0;
}

.calendar-guide p span {
	font-size: 10px;
	margin-left: 12px;
}

span.mark1,
span.mark2,
span.mark3,
span.mark4 {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 12px;
}

span.mark1 {
  background: #90BFFF;
}
span.mark2 {
  background: #00B237;
}
span.mark3 {
  background: #FFCD6E;
}
span.mark4 {
  background: #FF896E;
}

/* カレンダーSP */
.col-1.calendar p {
  margin-top: 0;
}
.col-1.calendar #sioribi_calendar.xo-event-calendar .xo-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.col-1.calendar #sioribi_calendar.xo-event-calendar .calendar.xo-month-wrap {
  padding: 20px 10px;
  border: 1px solid #004C6F;
  max-width: 440px;
}
@media (min-width: 1024px) {
  .col-1.calendar #sioribi_calendar.xo-event-calendar .xo-months {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 60px;
  }
}