@charset "UTF-8";
@import url("global.css");
/* ---------------------------------------------------
Teaser-Setting
---------------------------------------------------- */
.teaser #toptext p.open {
  display: inline-block;
  font-size: 21px;
  margin: 20px 0 0 25px;
  padding: 10px 20px;
  background-color: rgba(55, 67, 96, 0.8);
}
.teaser #toptext p.open span {
  padding-left: 15px;
}
.teaser #toplinelogo {
  bottom: 25px;
}
.teaser #topics {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
}
.teaser #topics ul li {
  border: none;
}

@media only screen and (max-width: 959px) {
  .teaser #toptext p.open {
    margin: 20px 0 0 15px;
  }
  .teaser #toplinelogo {
    bottom: 40px;
  }
}
@media only screen and (max-width: 644px) {
  html {
    height: 100%;
  }
  html .teaser {
    height: 100%;
  }
  html .teaser #main, html .teaser #container, html .teaser #contents {
    height: 100%;
  }
  html .teaser #toparea {
    height: 100%;
  }

  .teaser #toptext p.open {
    font-size: 18px;
    margin: 30px 0 0 10px;
    padding: 15px 25px;
    text-indent: 0;
  }
  .teaser #toptext p.open span {
    padding: 5px 0 0;
    display: block;
  }
}
/* ------------------------------
 Header
------------------------------ */
#header #headerlogo a svg * {
  fill: #fff;
}

/* ------------------------------
 TopSlider
------------------------------ */
#toparea {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#toparea .wrapper {
  position: relative;
}

#slidearea {
  position: relative;
  z-index: 1;
  height: 100%;
}
#slidearea .swiper-container {
  width: 100%;
  height: 100%;
}
#slidearea .swiper-container .swiper-wrapper, #slidearea .swiper-container .swiper-slide, #slidearea .swiper-container .slide-img {
  height: 100%;
  position: relative;
}
#slidearea .swiper-slide-active .slide-img img,
#slidearea .swiper-slide-duplicate-active .slide-img img,
#slidearea .swiper-slide-prev .slide-img img {
  animation: zoomout 7.5s ease-in-out 0s 1;
  animation-fill-mode: both;
}
#slidearea .swiper-pagination {
  position: absolute;
  z-index: 1;
}
#slidearea .swiper-pagination-fraction, #slidearea .swiper-pagination-custom, #slidearea .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 30px;
  width: auto;
}
#slidearea .swiper-pagination-fraction .swiper-pagination-bullet, #slidearea .swiper-pagination-custom .swiper-pagination-bullet, #slidearea .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.7;
}
#slidearea .swiper-pagination-fraction .swiper-pagination-bullet-active, #slidearea .swiper-pagination-custom .swiper-pagination-bullet-active, #slidearea .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

@keyframes zoomout {
  0% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
#toptext {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#toptext p {
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 0 20px rgba(55, 67, 96, 0.3);
}
#toptext p br {
  display: none;
}

#toplinelogo {
  position: absolute;
  max-width: 1230px;
  bottom: -25px;
  right: 0;
  mix-blend-mode: soft-light;
  z-index: 2;
}
#toplinelogo svg * {
  fill: none;
  stroke: #fff;
  stroke-width: 0.2;
}

/* ------------------------------
 Topics
------------------------------ */
#topics {
  background-color: #374360;
  margin-bottom: 120px;
}
#topics ul li {
  border-bottom: rgba(255, 255, 255, 0.4) 1px solid;
}
#topics ul li div, #topics ul li a {
  display: block;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  padding: 16px 0;
}
#topics ul li a::after {
  content: "\f101";
  display: inline-block;
  margin-left: 10px;
  vertical-align: -1px;
  font-family: "Font Awesome 5 free";
  font-size: 18px;
  font-weight: 900;
}
#topics ul li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
#topics ul li span {
  display: inline-block;
}
#topics ul li span.date {
  margin-right: 15px;
  letter-spacing: 0;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}

/* ------------------------------
 Event
------------------------------ */
.section .title {
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
}

.morebutton a, .morebutton .link {
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.morebutton a::after, .morebutton .link::after {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: #ccc 1px solid;
  display: inline-block;
  text-align: center;
  margin-left: 15px;
  background: url("/okinawa/img/arrowb.png") no-repeat center center;
  background-size: 22px auto;
  vertical-align: middle;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.morebutton a:hover {
  color: #374360;
}
.morebutton a:hover::after {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

#event {
  margin-bottom: 110px;
}
#event .wrapper {
  position: relative;
}
#event .morebutton {
  position: absolute;
  right: 0;
  top: -5px;
}
#event .title {
  margin-bottom: 20px;
}
#event .event ul.list {
  overflow: hidden;
}
#event .event ul.list li {
  width: 32%;
  margin: 0 0 30px auto;
}
#event .event ul.list li a {
  display: block;
  line-height: 1.5;
}
#event .event ul.list li a:hover .image::before {
  opacity: .3;
}
#event .event ul.list li a:hover .image figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#event .event ul.list li .image {
  position: relative;
  margin-bottom: 15px;
}
#event .event ul.list li .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  z-index: 2;
}
#event .event ul.list li .image figure {
  height: 0;
  padding-top: 60%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#event .event ul.list li .image figure img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#event .event ul.list li .image .category {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #374360;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
  width: 200px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 3;
}
#event .event ul.list li .image .staff {
  position: absolute;
  border-radius: 50%;
  border: #fff 1px solid;
  overflow: hidden;
  width: 50px;
  height: 50px;
  right: 15px;
  bottom: -15px;
  z-index: 4;
}
#event .event ul.list li .image .staff img {
  border-radius: 50%;
}
#event .event ul.list li .posttitle {
  text-align: justify;
  font-weight: 700;
  font-size: 14px;
  padding: 0 10px;
}
#event .event ul.list li .date {
  margin-top: 15px;
  border-top: #ccc 1px solid;
  border-bottom: #ccc 1px solid;
  padding: 8px 10px;
  font-size: 14px;
}
#event .event ul.list li .date::before {
  content: "開催日";
  font-weight: 700;
  padding-right: 15px;
  display: none;
}
#event .event ul.list li .text {
  display: none;
  font-size: 14px;
  margin-top: 20px;
  padding: 0 20px;
}
#event .event ul.list li:first-of-type {
  width: 60%;
  margin: 0;
  float: left;
}
#event .event ul.list li:first-of-type .image {
  margin-bottom: 30px;
}
#event .event ul.list li:first-of-type .category {
  padding: 8px 10px;
}
#event .event ul.list li:first-of-type .staff {
  width: 68px;
  height: 68px;
  border-width: 2px;
  right: 30px;
  bottom: -20px;
}
#event .event ul.list li:first-of-type .posttitle {
  font-size: 18px;
  padding: 0 20px;
}
#event .event ul.list li:first-of-type .text {
  display: block;
}
#event .event ul.list li:first-of-type .date {
  font-size: 16px;
  margin: 25px 10px 0;
  padding: 15px 10px;
}
#event .event ul.list li:first-of-type .date::before {
  display: inline;
}

/* ------------------------------
 Contents
------------------------------ */
#slidecontents {
  position: relative;
  margin-bottom: 150px;
}
#slidecontents #slideblock {
  width: calc( 50% + 180px );
  margin-left: auto;
}
#slidecontents #slideblock .image {
  height: 620px;
}
#slidecontents #slideblock .textblock {
  max-width: 640px;
  box-sizing: border-box;
  margin-left: 210px;
  text-align: left;
  padding-bottom: 10px;
}
#slidecontents #slideblock .textblock .number {
  font-size: 100px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  margin: -60px 0 15px;
}
#slidecontents #slideblock .textblock .text {
  line-height: 2;
  font-weight: bold;
  text-align: justify;
}
#slidecontents #slideblock .textblock .morebutton {
  margin-top: 30px;
}
#slidecontents #menublock {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -220px;
}
#slidecontents .slidemenu {
  width: 50%;
  background-color: #fff;
  padding: 60px 90px 60px 0;
  box-sizing: border-box;
}
#slidecontents .slidemenu ul#slidemenu {
  border-top: #111 1px solid;
}
#slidecontents .slidemenu ul#slidemenu li {
  border-bottom: #111 1px solid;
}
#slidecontents .slidemenu ul#slidemenu li a {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 150px;
  position: relative;
  height: 78px;
  line-height: 78px;
  box-sizing: border-box;
}
#slidecontents .slidemenu ul#slidemenu li a::before {
  content: "";
  width: 0;
  height: 6px;
  background-color: #111;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -3px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#slidecontents .slidemenu ul#slidemenu li a.active .number {
  color: #111;
}
#slidecontents .slidemenu ul#slidemenu li a.active::before {
  opacity: 1;
  right: -10px;
  width: 20px;
}
#slidecontents .slidemenu ul#slidemenu li span {
  display: block;
}
#slidecontents .slidemenu ul#slidemenu li .number {
  font-size: 68px;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  color: #fff;
  line-height: 1;
  position: absolute;
  left: 40px;
  bottom: -12px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#slidecontents .slidemenu ul#slidemenu li .en {
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
#slidecontents .slidemenu ul#slidemenu li .ja {
  font-size: 22px;
  text-align: right;
}

/* ---------- bxslider-reset ---------- */
.bx-wrapper {
  box-shadow: none;
  border: none;
  background-color: transparent;
  margin-bottom: 0;
  padding: 0;
}

/* ------------------------------
 Works
------------------------------ */
#works {
  position: relative;
  margin-bottom: 140px;
}
#works .titleblock {
  position: absolute;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 20%;
  width: 100px;
  z-index: 2;
}
#works .titleblock .title {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  margin-top: 35px;
}
#works .titleblock .morebutton {
  white-space: nowrap;
  position: absolute;
  bottom: 10px;
  left: 0;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  margin: 0 0 30px -13px;
}
#works ul.carousel li {
  margin-left: 1px;
}
#works ul.carousel li a {
  display: block;
  height: 0;
  padding-top: 65%;
  position: relative;
}
#works ul.carousel li a::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  z-index: 1;
}
#works ul.carousel li a figure {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#works ul.carousel li a .data {
  position: absolute;
  right: 30px;
  bottom: 20px;
  color: #fff;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
  text-align: left;
  z-index: 2;
}
#works ul.carousel li a:hover::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .6;
}

/* ------------------------------
 Realestate
------------------------------ */
#estate {
  margin-bottom: 160px;
}
#estate .wrapper {
  position: relative;
}
#estate .morebutton {
  position: absolute;
  right: 0;
  top: -5px;
}
#estate .title {
  margin-bottom: 40px;
}
#estate ul.estate {
  display: flex;
  margin: 0 -12px;
}
#estate ul.estate li {
  width: 33.33333%;
  margin: 0 12px;
}
#estate ul.estate li a {
  display: block;
}
#estate ul.estate li a .image {
  position: relative;
  height: 0;
  padding-top: 65%;
  margin-bottom: 20px;
}
#estate ul.estate li a .image figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
#estate ul.estate li a .image figure img {
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#estate ul.estate li a .image .category {
  background-color: #374360;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  padding: 5px 10px;
  box-sizing: border-box;
  font-size: 14px;
  z-index: 3;
  text-align: center;
}
#estate ul.estate li a .image::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#estate ul.estate li a .text {
  text-align: justify;
  padding: 0 10px;
}
#estate ul.estate li a .text p:not([class]) {
  font-weight: bold;
  line-height: 1.6;
  font-size: 14px;
}
#estate ul.estate li a .date {
  display: block;
  color: #ccc;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  margin-top: 3px;
}
#estate ul.estate li a:hover .image img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#estate ul.estate li a:hover .image::before {
  opacity: .5;
}

/* ------------------------------
 Instagram
------------------------------ */
#instagram {
  padding: 80px 0;
  background-color: #f3f3f3;
}
#instagram .titleblock {
  margin-bottom: 40px;
}
#instagram .titleblock .title {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  text-align: center;
  line-height: 1;
}
#instagram .titleblock .title i {
  padding-right: 10px;
}
#instagram .instafeed {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
#instagram .instafeed > div {
  width: 25%;
  padding: 10px 10px 0 0;
  position: relative;
  box-sizing: border-box;
}
#instagram .instafeed > div a {
  height: 0;
  padding-top: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
#instagram .instafeed > div a img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#instagram .instafeed > div a::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: #111;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#instagram .instafeed > div a:hover::before {
  opacity: .2;
}
#instagram .instafeed > div a:hover img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#instagram .instafeed > div:first-child::before {
  content: "";
  border-bottom: 6em solid transparent;
  border-left: 6em solid #111;
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 3;
}
#instagram .instafeed > div:first-child::after {
  content: "NEW";
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  top: 24px;
  left: 12px;
  z-index: 4;
}
#instagram .instalink {
  margin-top: 40px;
}
#instagram .instalink .link a {
  width: fit-content;
  padding: 5px 60px;
  margin: 0 auto;
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  background-color: #111;
  border: 1px solid #111;
  border-radius: 50px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#instagram .instalink .link a i {
  padding-right: 10px;
  font-size: 24px;
}
#instagram .instalink .link a:hover {
  color: #111;
  background-color: #fff;
}

/* ------------------------------
 3button
------------------------------ */
ul#button3 {
  display: flex;
  border-bottom: #fff 1px solid;
}
ul#button3 li {
  width: 33.33333%;
  box-sizing: border-box;
  border-right: #fff 1px solid;
}
ul#button3 li:last-of-type {
  border: none;
}
ul#button3 li a {
  display: table;
  position: relative;
  height: 450px;
  color: #fff;
  width: 100%;
}
ul#button3 li a .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
ul#button3 li a .bg img {
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul#button3 li a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #111;
  opacity: .4;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}
ul#button3 li a .inner {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 3;
}
ul#button3 li a .inner p:not([class]) {
  font-size: 22px;
  margin-bottom: 15px;
  line-height: 1.3;
}
ul#button3 li a .inner .morebutton .link::after {
  border: #fff 1px solid;
  background: url("/okinawa/img/arroww.png") no-repeat center center;
  background-size: 22px auto;
}
ul#button3 li a:hover .bg img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
ul#button3 li a:hover::before {
  opacity: .7;
}

/* ------------------------------
 Blog
------------------------------ */
#blog {
  background-color: #374360;
  color: #fff;
  padding: 110px 0 100px;
}
#blog .wrapper {
  display: flex;
  align-items: center;
}
#blog ul.list {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  order: 1;
  margin: 0 40px 0 -30px;
}
#blog ul.list li {
  width: 33.33333%;
  box-sizing: border-box;
  padding-left: 30px;
}
#blog ul.list li a {
  display: block;
  color: #fff;
}
#blog ul.list li a .date {
  color: #ccc;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  text-align: right;
  line-height: 1;
  margin: 0 10px 12px;
  opacity: .7;
}
#blog ul.list li a .image {
  position: relative;
  height: 0;
  padding-top: 65%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}
#blog ul.list li a .image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  z-index: 2;
}
#blog ul.list li a .image img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
#blog ul.list li a .text {
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  padding: 0 10px;
}
#blog ul.list li a:hover .image::before {
  opacity: .4;
}
#blog ul.list li a:hover .image img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#blog .morebutton {
  width: 130px;
  flex-shrink: 0;
  order: 2;
}
#blog .morebutton a {
  color: #fff;
}
#blog .morebutton a::after {
  border: #fff 1px solid;
  background: url("/okinawa/img/arroww.png") no-repeat center center;
  background-size: 22px auto;
}
#blog .titleblock {
  width: 40px;
  margin: -105px 0 0 40px;
  order: 3;
}
#blog .titleblock .title {
  color: #374360;
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

/* ------------------------------
 Csr
------------------------------ */
#csr {
  margin: 160px auto;
  position: relative;
}
#csr .titlearea {
  position: absolute;
  top: 20px;
  left: 50%;
}
#csr .f_inner {
  display: flex;
}
#csr .f_inner .imgarea {
  width: 50%;
  padding-right: 80px;
  position: relative;
  box-sizing: border-box;
}
#csr .f_inner .imgarea .csrimg {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
#csr .f_inner .imgarea .csrimg img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
#csr .f_inner .textarea {
  width: 50%;
  padding-top: 130px;
  padding-bottom: 60px;
}
#csr .f_inner .textarea h3 {
  margin-bottom: 40px;
  font-size: clamp(18px, 4.2vw, 24px);
  font-weight: 500;
}
#csr .f_inner .textarea p + p {
  margin-top: 20px;
}
#csr .f_inner .textarea .morebutton a i {
  padding-left: 10px;
}

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

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  /* ------------------------------
   TopSlider
  ------------------------------ */
  #toptext p {
    /*			margin-left: 30px;*/
  }

  /* ------------------------------
   Event
  ------------------------------ */
  #event {
    margin-bottom: 100px;
  }
  #event .morebutton {
    right: 50px;
  }
  #event .event ul.list li {
    width: 34%;
  }

  /* ------------------------------
   Realestate
  ------------------------------ */
  #estate {
    margin-bottom: 140px;
  }
  #estate .morebutton {
    right: 50px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   TopSlider
  ------------------------------ */
  #toptext p {
    font-size: 48px;
  }

  /* ------------------------------
   Contents
  ------------------------------ */
  #slidecontents {
    margin-bottom: 120px;
  }
  #slidecontents #slideblock .textblock {
    margin: 0 10px 0 200px;
  }
  #slidecontents #slideblock .textblock .number {
    margin: -60px 0 10px;
  }
  #slidecontents #menublock {
    margin-top: -220px;
  }
  #slidecontents .slidemenu {
    padding: 60px 60px 60px 0;
  }
  #slidecontents .slidemenu ul#slidemenu li a {
    display: block;
    padding: 18px 0 0 120px;
    line-height: 1;
  }
  #slidecontents .slidemenu ul#slidemenu li .number {
    left: 10px;
    bottom: -12px;
  }
  #slidecontents .slidemenu ul#slidemenu li .ja {
    font-size: 21px;
    text-align: left;
    margin-top: 8px;
  }

  /* ------------------------------
   Works
  ------------------------------ */
  #works .titleblock {
    left: 10%;
  }

  /* ------------------------------
   Instagram
  ------------------------------ */
  #instagram .instafeed > div:first-child::before {
    border-bottom: 5em solid transparent;
    border-left: 5em solid #111;
  }
  #instagram .instafeed > div:first-child::after {
    top: 22px;
    left: 10px;
  }

  /* ------------------------------
   3button
  ------------------------------ */
  ul#button3 li a {
    height: 400px;
  }

  /* ------------------------------
   Blog
  ------------------------------ */
  #blog ul.list {
    margin: 0 40px 0 -20px;
  }
  #blog ul.list li {
    padding-left: 20px;
  }
  #blog .titleblock {
    margin: -105px 0 0 30px;
  }

  /* ------------------------------
   Csr
  ------------------------------ */
  #csr {
    margin: 100px auto;
  }
  #csr .titlearea {
    top: 0;
  }
  #csr .f_inner .imgarea {
    padding-right: 60px;
  }
  #csr .f_inner .textarea {
    padding-top: 100px;
    padding-bottom: 0px;
  }
  #csr .f_inner .textarea h3 {
    margin-bottom: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Top-slider
  ------------------------------ */
  #toptext p {
    font-size: calc(212.5% + 10 * (100vw - 650px) / 310);
  }

  #toplinelogo {
    bottom: -10px;
    left: -10px;
    right: -10px;
  }
  #toplinelogo svg * {
    stroke-width: 0.3;
  }

  /* ------------------------------
   Topics
  ------------------------------ */
  #topics {
    margin-bottom: 100px;
  }
  #topics ul li a:hover {
    background-color: transparent;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  .morebutton a:hover {
    color: #111;
  }
  .morebutton a:hover::after {
    transform: none;
  }

  #event {
    margin-bottom: 100px;
  }
  #event .morebutton {
    right: 3vw;
  }
  #event .event {
    display: block;
  }
  #event .event ul.list li {
    width: auto;
    margin: 0;
  }
  #event .event ul.list li a {
    text-align: center;
  }
  #event .event ul.list li a:hover .image figure img {
    transform: none;
  }
  #event .event ul.list li .image {
    margin-bottom: 25px;
  }
  #event .event ul.list li .image::before {
    display: none;
  }
  #event .event ul.list li .image .category {
    width: 160px;
  }
  #event .event ul.list li .image .staff {
    width: 60px;
    height: 60px;
    right: 15px;
    bottom: -25px;
    border-width: 2px;
  }
  #event .event ul.list li .posttitle {
    font-size: 16px;
    padding: 0 20px;
    text-align: center;
  }
  #event .event ul.list li .date {
    margin: 25px 0 0;
    padding: 12px 20px;
    font-size: 16px;
  }
  #event .event ul.list li .date::before {
    display: inline;
  }
  #event .event ul.list li .text {
    display: inline-block;
    text-align: justify;
    margin-top: 15px;
    padding: 0 20px;
  }
  #event .event ul.list li:first-of-type {
    width: auto;
  }
  #event .event ul.list li:first-of-type .image {
    margin-bottom: 25px;
  }
  #event .event ul.list li:first-of-type .category {
    padding: 5px 10px;
  }
  #event .event ul.list li:first-of-type .staff {
    width: 60px;
    height: 60px;
    right: 15px;
    bottom: -25px;
  }
  #event .event ul.list li:first-of-type .date {
    margin: 25px 0 0;
    padding: 12px 20px;
    font-size: 16px;
  }
  #event .event ul.list li:first-of-type .posttitle {
    font-size: 16px;
  }
  #event ul.carousel .slick-prev {
    right: calc(-3vw + 10px);
  }
  #event ul.carousel .slick-next {
    left: calc(-3vw + 10px);
  }

  /* ------------------------------
   Contents
  ------------------------------ */
  #slidecontents {
    margin-bottom: 100px;
  }
  #slidecontents #slideblock {
    width: auto;
  }
  #slidecontents #slideblock .image {
    height: 400px;
  }
  #slidecontents #slideblock .textblock {
    max-width: none;
    margin: 0 40px;
    text-align: justify;
  }
  #slidecontents #slideblock .textblock .text {
    line-height: inherit;
  }
  #slidecontents #slideblock .textblock .morebutton {
    margin-top: 20px;
  }
  #slidecontents #menublock {
    position: static;
    margin: 0;
  }
  #slidecontents #menublock .wrapper {
    padding: 0;
  }
  #slidecontents .slidemenu {
    width: auto;
    padding: 0;
  }
  #slidecontents .slidemenu ul#slidemenu li a {
    display: flex;
    padding: 0 40px 0 150px;
    height: 70px;
    line-height: 70px;
    overflow: hidden;
  }
  #slidecontents .slidemenu ul#slidemenu li a::before {
    display: none;
  }
  #slidecontents .slidemenu ul#slidemenu li a.active .number {
    color: #111;
  }
  #slidecontents .slidemenu ul#slidemenu li .number {
    font-size: 68px;
    left: 40px;
    bottom: -14px;
  }
  #slidecontents .slidemenu ul#slidemenu li .ja {
    font-size: 22px;
    text-align: right;
    margin-top: 0;
  }

  /* ------------------------------
   Works
  ------------------------------ */
  #works {
    margin-bottom: 100px;
  }
  #works .titleblock {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 20px;
    padding: 0 3vw;
  }
  #works .titleblock .title {
    transform: none;
    margin-top: 0;
  }
  #works .titleblock .morebutton {
    top: -5px;
    right: 3vw;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
  }
  #works ul.carousel li a::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right bottom, rgba(55, 67, 96, 0) 40%, #374360);
    opacity: .8;
  }
  #works ul.carousel li a .data {
    right: 25px;
    bottom: 15px;
  }
  #works ul.carousel li a:hover::before {
    opacity: .8;
  }

  /* ------------------------------
   Realestate
  ------------------------------ */
  #estate {
    margin-bottom: 100px;
  }
  #estate .morebutton {
    right: 3vw;
  }
  #estate .title {
    margin-bottom: 20px;
  }
  #estate ul.estate {
    margin: 0 -8px;
  }
  #estate ul.estate li {
    margin: 0 8px;
  }
  #estate ul.estate li a .image {
    margin-bottom: 15px;
  }
  #estate ul.estate li a .image .category {
    width: auto;
    padding: 4px 15px;
    font-size: 12px;
  }
  #estate ul.estate li a .image::before {
    display: none;
  }
  #estate ul.estate li a .text {
    padding: 0;
    font-size: 14px;
  }
  #estate ul.estate li a .text p:not([class]) {
    line-height: inherit;
  }
  #estate ul.estate li a:hover .image img {
    transform: none;
  }

  /* ------------------------------
   Instagram
  ------------------------------ */
  #instagram {
    padding: 60px 0;
  }
  #instagram .titleblock {
    margin-bottom: 30px;
  }
  #instagram .titleblock .title {
    font-size: 46px;
  }
  #instagram .instafeed > div {
    padding: 5px 5px 0 0;
  }
  #instagram .instafeed > div:first-child::before {
    border-bottom: 4em solid transparent;
    border-left: 4em solid #111;
    top: 5px;
  }
  #instagram .instafeed > div:first-child::after {
    font-size: 16px;
    top: 12px;
    left: 4px;
  }
  #instagram .instalink .link a {
    padding: 5px 50px;
    font-size: 18px;
  }
  #instagram .instalink .link a i {
    font-size: 22px;
  }

  /* ------------------------------
   3button
  ------------------------------ */
  ul#button3 li a {
    height: 320px;
  }
  ul#button3 li a .inner p:not([class]) {
    font-size: calc(106.25% + 5 * (100vw - 650px) / 310);
  }
  ul#button3 li a:hover .bg img {
    transform: none;
  }
  ul#button3 li a:hover::before {
    opacity: .4;
  }

  /* ------------------------------
   Blog
  ------------------------------ */
  #blog {
    padding: 90px 0 80px;
  }
  #blog .wrapper {
    position: relative;
    align-items: flex-start;
  }
  #blog ul.list {
    width: calc( 100% - 110px );
    flex-grow: 0;
    display: block;
    order: 3;
    margin: 0 20px 0 auto;
  }
  #blog ul.list li {
    width: auto;
    padding-left: 0;
  }
  #blog ul.list li a .image::before {
    display: none;
  }
  #blog ul.list li a .text {
    line-height: inherit;
  }
  #blog ul.list li a:hover .image img {
    transform: none;
  }
  #blog .morebutton {
    width: auto;
    position: absolute;
    left: -22px;
    bottom: 50px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  #blog .titleblock {
    margin: 0;
    order: 1;
  }
  #blog ul.carousel .slick-prev {
    right: -20px;
  }
  #blog ul.carousel .slick-next {
    left: -20px;
  }

  /* ------------------------------
   Csr
  ------------------------------ */
  #csr {
    margin: 80px auto;
  }
  #csr .titlearea {
    margin-bottom: 30px;
    position: relative;
    top: auto;
    left: auto;
  }
  #csr .f_inner {
    display: block;
  }
  #csr .f_inner .imgarea {
    width: 100%;
    padding-right: 0;
    margin-bottom: 30px;
  }
  #csr .f_inner .imgarea .csrimg {
    padding-bottom: 46%;
  }
  #csr .f_inner .textarea {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  #csr .f_inner .textarea h3 {
    margin-bottom: 30px;
    font-size: clamp(18px, 4.2vw, 24px);
    font-weight: 500;
  }
  #csr .f_inner .textarea p + p {
    margin-top: 10px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Top-slider
  ------------------------------ */
  #toparea {
    height: 470px;
  }

  #slidearea .swiper-slide-active .slide-img img,
  #slidearea .swiper-slide-duplicate-active .slide-img img,
  #slidearea .swiper-slide-prev .slide-img img {
    animation: zoomout 7s ease-in-out 0s 1;
    animation-fill-mode: both;
  }

  @keyframes zoomout {
    0% {
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
    }
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }
  #toptext p {
    font-size: calc(214.2% + 11 * (100vw - 360px) / 290);
    text-indent: -.6em;
    padding-left: 10px;
  }
  #toptext p br {
    display: inline;
  }

  #toplinelogo {
    left: -20px;
    right: -20px;
    bottom: -8px;
  }
  #toplinelogo svg * {
    stroke-width: 0.4;
  }

  /* ------------------------------
   Topics
  ------------------------------ */
  #topics {
    margin-bottom: 60px;
  }
  #topics ul li div, #topics ul li a {
    line-height: 18px;
    padding: 16px 20px 16px 20px;
    text-align: left;
  }
  #topics ul li a {
    padding-right: 40px;
    position: relative;
  }
  #topics ul li a::after {
    display: block;
    margin: -10px 0 0 0;
    font-size: 21px;
    position: absolute;
    right: 10px;
    top: 50%;
  }
  #topics ul li span {
    display: block;
  }
  #topics ul li span.date {
    margin: 0;
    width: 90px;
    float: left;
  }
  #topics ul li span.text {
    margin-left: 90px;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  .section .title {
    font-size: 34px;
  }

  .morebutton a, .morebutton .link {
    font-size: 16px;
  }
  .morebutton a::after, .morebutton .link::after {
    width: 40px;
    height: 40px;
    margin-left: 12px;
    background-size: 20px auto;
  }

  #event {
    margin-bottom: 60px;
  }
  #event .morebutton {
    right: 20px;
    top: -2px;
  }
  #event .event ul.list {
    overflow: visible;
  }
  #event .event ul.list li .image .category {
    width: auto;
    max-width: 180px;
    font-size: 12px;
    padding: 5px 30px;
  }
  #event .event ul.list li .image .staff {
    width: 48px;
    height: 48px;
    bottom: -20px;
  }
  #event .event ul.list li .posttitle {
    padding: 0 10px;
  }
  #event .event ul.list li .date {
    font-size: 14px;
    padding: 8px 20px 10px;
  }
  #event .event ul.list li .date::before {
    display: none;
  }
  #event .event ul.list li .text {
    padding: 0;
    font-size: 13px;
  }
  #event .event ul.list li:first-of-type .category {
    padding: 5px 30px;
  }
  #event .event ul.list li:first-of-type .staff {
    width: 48px;
    height: 48px;
    bottom: -20px;
  }
  #event .event ul.list li:first-of-type .posttitle {
    padding: 0 10px;
  }
  #event .event ul.list li:first-of-type .date {
    font-size: 14px;
    padding: 8px 20px 10px;
  }
  #event .event ul.list li:first-of-type .date::before {
    display: none;
  }
  #event .event ul.list li:first-of-type .text {
    padding: 0;
    font-size: 13px;
  }
  #event ul.carousel .slick-prev {
    right: -20px;
  }
  #event ul.carousel .slick-next {
    left: -20px;
  }

  /* ------------------------------
   Contents
  ------------------------------ */
  #slidecontents {
    margin-bottom: 80px;
  }
  #slidecontents #slideblock .image {
    height: 300px;
  }
  #slidecontents #slideblock .textblock {
    margin: 0 20px;
  }
  #slidecontents #slideblock .textblock .number {
    margin: -65px 0 0;
  }
  #slidecontents .slidemenu ul#slidemenu li a {
    padding: 0 20px 0 110px;
    height: 56px;
    line-height: 56px;
  }
  #slidecontents .slidemenu ul#slidemenu li .number {
    font-size: 60px;
    left: 20px;
    bottom: -12px;
  }
  #slidecontents .slidemenu ul#slidemenu li .ja {
    font-size: 16px;
  }

  /* ------------------------------
   Works
  ------------------------------ */
  #works {
    margin-bottom: 80px;
  }
  #works .titleblock {
    padding: 0 20px;
  }
  #works .titleblock .morebutton {
    top: -2px;
    right: 20px;
  }
  #works ul.carousel li {
    margin-left: 0;
  }

  /* ------------------------------
   Realestate
  ------------------------------ */
  #estate {
    margin-bottom: 80px;
  }
  #estate .morebutton {
    top: -2px;
    right: 20px;
  }
  #estate ul.estate {
    display: block;
    margin: 0 -20px;
  }
  #estate ul.estate li {
    width: auto;
    margin: 0;
  }
  #estate ul.estate li a .text {
    padding: 0 20px;
  }

  /* ------------------------------
   Instagram
  ------------------------------ */
  #instagram {
    padding: 40px 0;
    background-color: #f3f3f3;
  }
  #instagram .titleblock .title {
    font-size: 34px;
  }
  #instagram .instafeed > div {
    width: 50%;
  }
  #instagram .instafeed > div:first-child::after {
    font-size: 14px;
  }
  #instagram .instafeed > div:nth-child(n+7) {
    display: none;
  }
  #instagram .instalink .link a i {
    padding-right: 8px;
    font-size: 20px;
  }

  /* ------------------------------
   3button
  ------------------------------ */
  ul#button3 {
    display: block;
  }
  ul#button3 li {
    width: auto;
    border-right: none;
    border-bottom: #fff 1px solid;
  }
  ul#button3 li a {
    height: 280px;
  }
  ul#button3 li a .inner p:not([class]) {
    font-size: 21px;
  }
  ul#button3 li a .inner .morebutton .link::after {
    background-size: 20px auto;
  }

  /* ------------------------------
   Blog
  ------------------------------ */
  #blog {
    padding: 60px 0 60px;
  }
  #blog ul.list {
    width: calc( 100% - 80px );
    flex-shrink: 0;
    margin: 0 10px 0 auto;
  }
  #blog ul.list li a .image {
    border-radius: 8px;
  }
  #blog .morebutton {
    left: -11px;
    bottom: 30px;
  }
  #blog .morebutton a::after {
    background-size: 20px auto;
  }

  /* ------------------------------
   Csr
  ------------------------------ */
  #csr {
    margin: 80px auto;
  }
  #csr .titlearea {
    margin-bottom: 20px;
  }
  #csr .f_inner .imgarea {
    margin-bottom: 20px;
  }
  #csr .f_inner .imgarea .csrimg {
    padding-bottom: 66%;
  }
  #csr .f_inner .textarea h3 {
    margin-bottom: 20px;
  }
  #csr .f_inner .textarea .morebutton a i {
    padding-left: 8px;
  }
}