@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://use.typekit.net/via6kmm.css");

body {
  color: #413936;
  font-size: 16px;
  font-family: "Zen Old Mincho", YakuHanJP, "Montserrat", "Noto Sans JP", serif;
  font-weight: 100;
  letter-spacing: 0.2em;
}

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

img {
  width: 100%;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: #413936;
  transition: 0.3s ease-in-out;
}

p {
  line-height: 1.6;
}

.content {
  padding-top: 88px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .content {
    padding-top: 68px;
  }
}

@media (max-width: 767px) {
  .content {
    padding-top: 68px;
  }
}

.inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .inner {
    margin: 0;
    padding: 0 15px;
  }
}

@media (max-width: 767px) {
  .inner {
    margin: 0;
    padding: 0 15px;
  }
}

.section {
  padding: 60px 0;
}

@media (max-width: 767px) {
  .section {
    padding: 30px 0;
  }
}

.title {
  margin-bottom: 40px;
  display: inline-block;
}

@media (max-width: 767px) {
  .title {
    margin-bottom: 30px;
  }
}

.title p {
  margin-bottom: 16px;
  color: #8EBDC6;
  font-family: "Futura", "Montserrat", serif;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .title p {
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .title p {
    margin-bottom: 4px;
    font-size: 12px;
  }
}

.title h2 {
  font-size: 2.4rem;
  padding: 15px 30px;
  border: 1px solid #413936;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .title h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .title h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 767px) {
  .title h2 {
    padding: 7.5px 15px;
  }
}

/* page */
.page {
  background: #fff;
}

.pageTitle {
  margin-bottom: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .pageTitle {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .pageTitle {
    margin-bottom: 30px;
  }
}

.pageTitle p {
  margin-bottom: 16px;
  color: #8EBDC6;
  font-family: "Futura", "Montserrat", serif;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .pageTitle p {
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .pageTitle p {
    margin-bottom: 4px;
    font-size: 12px;
  }
}

.pageTitle h1 {
  font-size: 2.4rem;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .pageTitle h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .pageTitle h1 {
    font-size: 1.2rem;
  }
}

.sectionPage-title {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .sectionPage-title {
    margin-bottom: 30px;
  }
}

.sectionPage-title p {
  padding-bottom: 16px;
  color: #8EBDC6;
  font-size: 14px;
  font-family: "Futura", "Montserrat", serif;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .sectionPage-title p {
    padding-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .sectionPage-title p {
    padding-bottom: 4px;
    font-size: 12px;
  }
}

.sectionPage-title h2 {
  color: #8EBDC6;
  font-size: 2rem;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .sectionPage-title h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  .sectionPage-title h2 {
    font-size: 1rem;
  }
}

.button01 {
  display: inline-block;
}

.button01 a {
  color: #8EBDC6;
  background: #fff;
  padding: 10px 30px;
  border: 1px solid #8EBDC6;
  border-radius: 100px;
  transition: 0.3s ease-in-out;
}

.button01 a:hover {
  color: #fff;
  background: #8EBDC6;
}

@media (max-width: 767px) {
  .button01 a {
    padding: 7.5px 22.5px;
    font-size: 14px;
  }
}

.button02 {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 150px;
  /* 3文字150px 4文字180px */
  width: 100%;
  padding: 1em 2em;
  transition: 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .button02 {
    max-width: 120px;
  }
}

.button02::before,
.button02::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}

.button02::before {
  width: 0.5em;
  height: 0.5em;
  left: 1em;
  border-top: solid 2px #fff;
  /* 矢印の色 */
  border-right: solid 2px #fff;
  /* 矢印の色 */
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
}

.button02::after {
  left: 0;
  background: #8EBDC6;
  z-index: 1;
  width: 3em;
  height: 3em;
  border-radius: 3em;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.button02 span {
  position: relative;
  padding-left: 18px;
  transition: all 0.3s;
  z-index: 3;
}

.button02:hover::after {
  right: 0;
  width: 100%;
}

.button02:hover span {
  color: #fff;
}

.button03 {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 42px;
  height: 42px;
  transition: 0.3s ease-in-out;
}

.button03::before,
.button03::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

.button03::before {
  width: 0.5em;
  height: 0.5em;
  left: 1em;
  border-top: solid 2px #8EBDC6;
  border-right: solid 2px #8EBDC6;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}

.button03::after {
  left: 0;
  background: #fff;
  border: 1px solid #8EBDC6;
  z-index: 1;
  width: 3em;
  height: 3em;
  border-radius: 3em;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.button03:hover::before {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}

.button03:hover::after {
  background: #8EBDC6;
}

.navItems {
  display: flex;
}

.navItem:not(:first-child) {
  margin-left: 24px;
}

.navItem a {
  color: #8EBDC6;
}

.navItem a:hover {
  opacity: 0.8;
}

.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .cards {
    display: block;
  }
}

.card {
  width: calc(33.3% - 32px);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .card {
    width: calc(33.3% - 24px);
  }
}

@media (max-width: 767px) {
  .card {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .card:nth-child(3n+2) {
    margin: 0 32px;
  }

  .card:nth-child(n+4) {
    margin-top: 40px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .card:nth-child(3n+2) {
    margin: 0 24px;
  }

  .card:nth-child(n+4) {
    margin-top: 30px;
  }
}

.card a:hover {
  opacity: 0.8;
}

.cardImg {
  width: 100%;
}

.cardTitle {
  font-size: 18px;
}

@media (max-width: 767px) {
  .cardTitle {
    font-size: 16px;
  }
}

.cardDate {
  font-size: 14px;
  color: #9c9c9c;
}

@media (max-width: 767px) {
  .cardDate {
    font-size: 12px;
  }
}

.cardTags {
  display: flex;
}

.cardTag {
  color: #8EBDC6;
  font-size: 14px;
  padding: 5px 15px;
  border: 1px solid #8EBDC6;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .cardTag {
    font-size: 12px;
  }
}

.cardTag:not(:first-child) {
  margin-left: 10px;
}

.cardText p {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .cardText p {
    font-size: 12px;
  }
}

.listInner {
  max-width: 640px;
  width: 100%;
}

.list {
  padding: 40px 0;
  display: flex;
  justify-content: left;
  border-bottom: 1px solid #CFDCDE;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .list {
    padding: 25px 0;
  }
}

@media (max-width: 767px) {
  .list {
    padding: 20px 0;
  }
}

.listTop {
  padding-top: 0;
}

.listTag {
  line-height: 1.6;
}

.listText {
  margin-left: 30px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .listText {
    margin-left: 30px;
    line-height: 1.4;
  }
}

.breadcrumb {
  margin-bottom: 40px;
  text-align: right;
  color: #8EBDC6;
}

.breadcrumb span {
  color: #8EBDC6;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .isPc {
    display: none;
  }
}

@media (max-width: 767px) {
  .isPc {
    display: none;
  }
}

@media (min-width: 1280px) {
  .isTab {
    display: none;
  }
}

@media (max-width: 767px) {
  .isTab {
    display: none;
  }
}

@media (min-width: 1280px) {
  .isSp {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .isSp {
    display: none;
  }
}

/* Loading背景画面設定　*/
.load {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
}

/* Loading画像中央配置　*/
.loadImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
.loadImg img {
  width: 260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
      opacity: 0;
      transform: translateY(100px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/*========= 背景色の動きのCSS ===============*/

/*背景色が伸びて出現 共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

/*--------- 左から --------*/
.bgLRextend::before {
  border-radius: 0 50px 50px 0;
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #8EBDC6;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
      transform-origin: left;
      transform: scaleX(0);
  }

  50% {
      transform-origin: left;
      transform: scaleX(1);
  }

  50.001% {
      transform-origin: right;
  }

  100% {
      transform-origin: right;
      transform: scaleX(0);
  }
}

/*--------- 右から --------*/
.bgRLextend::before {
  border-radius: 50px 0 0 50px;
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #8EBDC6;
}

@keyframes bgRLextendAnime {
  0% {
      transform-origin: right;
      transform: scaleX(0);
  }

  50% {
      transform-origin: right;
      transform: scaleX(1);
  }

  50.001% {
      transform-origin: left;
  }

  100% {
      transform-origin: left;
      transform: scaleX(0);
  }
}

/* header */
.header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 25px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .header {
    padding: 20px 0;
  }
}

@media (max-width: 767px) {
  .header {
    padding: 20px 0;
  }
}

.headerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headerImg img {
  width: 240px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .headerImg img {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .headerImg img {
    width: 180px;
  }
}

.headerImg img:hover {
  opacity: 0.8;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .headerRight {
    display: none;
  }
}

@media (max-width: 767px) {
  .headerRight {
    display: none;
  }
}

.drawerIcon {
  padding: 0 20px;
  align-items: center;
  position: fixed;
  top: 28px;
  right: 12px;
  z-index: 300;
  transition: transform 0.5s ease 0s;
}

@media (min-width: 1280px) {
  .drawerIcon {
    display: none;
  }
}

.drawerIcon.active {
  transform: translateX(-18px);
  top: 28px;
}

.drawerIcon.active .drawerIcon-bar1 {
  transform: rotate(-45deg);
  top: 8px;
}

.drawerIcon.active .drawerIcon-bar2 {
  display: none;
}

.drawerIcon.active .drawerIcon-bar3 {
  transform: rotate(45deg);
  top: 8px;
}

.drawerIcon.active .drawerIcon-bar1,
.drawerIcon.active .drawerIcon-bar2,
.drawerIcon.active .drawerIcon-bar3 {
  background: #fff;
}

.drawerIcon-bars {
  display: block;
  position: relative;
  width: 21px;
  height: 20px;
}

.drawerIcon-bar1,
.drawerIcon-bar2,
.drawerIcon-bar3 {
  position: absolute;
  width: 21px;
  height: 2px;
  background: #8EBDC6;
  border-radius: 3px;
  top: 0;
  right: -11px;
}

.drawerIcon-bar1 {
  top: 0;
}

.drawerIcon-bar2 {
  top: 8px;
}

.drawerIcon-bar3 {
  top: 16px;
}

.drawerContent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(207, 220, 222, 0.85);
  z-index: 299;
  transform: translateX(105%);
  transition: transform 0.5s ease 0s;
}

.drawerContent.active {
  transform: translateX(0);
}

@media (min-width: 1280px) {
  .drawerContent {
    display: none;
  }
}

.drawerItems {
  margin-left: auto;
  padding-top: 120px;
  padding-left: 15px;
  background: #8EBDC6;
  width: 40%;
  height: 100%;
}

.drawerItem {
  margin-bottom: 32px;
}

.drawerItem a {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.5em;
}

/* first view */
.fv {
  width: 100%;
  overflow-x: hidden;
}

.fvInner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.fvInner::after {
  content: "";
  position: absolute;
  background: #CFDCDE;
  border-radius: 0 0 0 50px;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  z-index: -1;
}

@media (max-width: 767px) {
  .fvInner {
    display: block;
  }
}

.fvLeft {
  margin-left: calc(50% - 50vw);
  max-width: 920px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .fvLeft {
    max-width: 72vw;
  }
}

@media (max-width: 767px) {
  .fvLeft {
    max-width: 100%;
  }
}

.fvImg {
  border-radius: 0 0 50px 0;
  overflow: hidden;
}

.fvImg img {
  border-radius: 0 0 50px 0;
}

.swiper-slide-active .slideImg,
.swiper-slide-duplicate-active .slideImg,
.swiper-slide-prev .slideImg {
  -webkit-animation: zoomUp 12s linear 0s 1 normal both;
  animation: zoomUp 12s linear 0s 1 normal both;
}

@-webkit-keyframes zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

.fvRight {
  margin-top: 60px;
  margin-right: 120px;
  /*ここでレイアウトの調整*/
  padding-bottom: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .fvRight {
    margin-right: 90px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .fvRight {
    margin-top: 40px;
    margin-right: 0;
    padding-bottom: 30px;
    align-items: center;
  }
}

.fvTitle {
  max-width: 120px;
  width: 100%;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  position: relative;
}

.fvTitle::after {
  content: "";
  position: absolute;
  background: url(../img/pen.png) no-repeat center center/contain;
  top: 130px;
  right: -270px;
  width: 360px;
  height: 220px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .fvTitle {
    max-width: 90px;
  }

  .fvTitle::after {
    top: 110px;
    right: -180px;
    width: 240px;
    height: 150px;
  }
}

@media (max-width: 767px) {
  .fvTitle {
    max-width: 90px;
  }

  .fvTitle::after {
    display: none;
  }
}

.fvText {
  display: inline-block;
  margin-top: 140px;
  font-size: 16px;
  line-height: 1.8;
  transform: skewX(-20deg);
  position: relative;
  z-index: 3;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .fvText {
    margin-top: 90px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .fvText {
    margin-top: 40px;
    font-size: 12px;
  }
}

.fvText::before {
  content: "";
  position: absolute;
  background: #8EBDC6;
  width: 200px;
  height: 1px;
  transform: skewX(20deg);
  top: 14px;
  left: -220px;
}

.fvText::after {
  content: "";
  position: absolute;
  background: #8EBDC6;
  width: 200px;
  height: 1px;
  transform: skewX(20deg);
  bottom: 14px;
  right: -220px;
}

/* news */
.news {
  padding-top: 120px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .news {
    padding-top: 60px;
  }
}

@media (max-width: 767px) {
  .news {
    padding-top: 30px;
  }
}

.newsInner {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .newsInner {
    display: block;
  }
}

@media (max-width: 767px) {
  .newsInner {
    display: block;
  }
}

.newsTitle {
  margin-bottom: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .newsTitle {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .newsTitle {
    margin-bottom: 30px;
  }
}

.newsRight {
  max-width: 840px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .newsRight {
    margin-top: 40px;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .newsRight {
    margin-top: 30px;
    max-width: 100%;
  }
}

.newsLists {
  width: 100%;
}

.newsList {
  width: 100%;
}

.newsList:not(:first-child) {
  padding-top: 20px;
  border-top: 1px solid #CFDCDE;
}

@media (max-width: 767px) {
  .newsList:not(:first-child) {
    padding-top: 10px;
  }
}

.newsList:not(:last-child) {
  padding-bottom: 20px;
}

@media (max-width: 767px) {
  .newsList:not(:last-child) {
    padding-top: 10px;
  }
}

.newsList-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsCard {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s ease-in-out;
}

.newsCard:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .newsCard-left {
    display: none;
  }
}

.newsCard-img {
  max-width: 120px;
  width: 100%;
}

.newsCard-img img {
  border-radius: 15px;
}

.newsCard-right {
  margin-left: 40px;
}

@media (max-width: 767px) {
  .newsCard-right {
    margin-left: 0;
  }
}

.newsCard-rightTop {
  display: flex;
  align-items: center;
}

.newsCard-date {
  margin-left: 20px;
  color: #9c9c9c;
}

.newsCard-rightBottom {
  margin-top: 16px;
}

.newsCard-title {
  font-size: 18px;
}

@media (max-width: 767px) {
  .newsCard-title {
    font-size: 14px;
  }
}

.newsCard-line {
  margin: 18px 0;
  width: 100%;
  border: 1px solid #CFDCDE;
}

.newsCard-button a:hover {
  opacity: 1;
}

/* about */
.about {
  padding-top: 120px;
  overflow-x: hidden;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .about {
    padding-top: 60px;
  }
}

@media (max-width: 767px) {
  .about {
    padding-top: 30px;
  }
}

.aboutInner {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.aboutInner::after {
  content: "";
  position: absolute;
  background: #CFDCDE;
  border-radius: 0 50px 50px 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 460px;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  z-index: -1;
}

@media (max-width: 767px) {
  .aboutInner {
    display: block;
  }

  .aboutInner::after {
    display: none;
  }
}

.aboutLeft {
  margin-top: 60px;
  padding: 60px;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  background: #fff;
  border-radius: 0 50px 0 0;
}

@media (max-width: 767px) {
  .aboutLeft {
    margin-top: 0;
    padding: 0;
    margin-left: 0;
  }
}

.aboutText {
  max-width: 640px;
  width: 100%;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .aboutText {
    margin-bottom: 30px;
  }
}

.aboutRight {
  margin-top: -60px;
  margin-right: calc(50% - 50vw);
}

@media (max-width: 767px) {
  .aboutRight {
    margin-top: 30px;
  }
}

.aboutImg01 {
  max-width: 560px;
  width: 100%;
}

.aboutImg01 img {
  border-radius: 50px 0 0 50px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .aboutImg01 {
    max-width: 420px;
  }
}

.aboutImg02 {
  margin-left: -60px;
  max-width: 360px;
  width: 100%;
}

.aboutImg02 img {
  border-radius: 50px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .aboutImg02 {
    margin-left: 0;
    max-width: 240px;
  }
}

@media (max-width: 767px) {
  .aboutImg02 {
    margin-left: 0;
  }
}

/* project */
.project {
  overflow-x: hidden;
  padding-bottom: 120px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .project {
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .project {
    padding-bottom: 30px;
  }
}

.projectInner {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.projectInner::after {
  content: "";
  position: absolute;
  background: #CFDCDE;
  border-radius: 50px 0 0 50px;
  top: 0;
  right: 0;
  width: 100%;
  height: 460px;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  z-index: -1;
}

@media (max-width: 767px) {
  .projectInner {
    justify-content: left;
    flex-direction: column-reverse;
  }

  .projectInner::after {
    display: none;
  }
}

.projectLeft {
  margin-top: -60px;
  margin-left: calc(50% - 50vw);
}

@media (max-width: 767px) {
  .projectLeft {
    margin-top: 30px;
  }
}

.projectRight {
  margin-top: 60px;
  padding: 60px;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  background: #fff;
  border-radius: 50px 0 0 0;
}

@media (max-width: 767px) {
  .projectRight {
    margin-top: 0;
    padding: 0;
    margin-right: 0;
  }
}

.projectText {
  max-width: 640px;
  width: 100%;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .projectText {
    margin-bottom: 30px;
  }
}

.projectImg {
  max-width: 560px;
  width: 100%;
}

.projectImg img {
  border-radius: 0 50px 50px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .projectImg {
    max-width: 420px;
  }
}

/* cta */
.cta {
  padding: 60px 0;
  background: url(../img/contactBg.png) no-repeat center center/cover;
  border-radius: 0 50px 0 0;
}

@media (max-width: 767px) {
  .cta {
    padding: 30px 0;
  }
}

.ctaInner {
  display: flex;
  justify-content: left;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .ctaInner {
    display: block;
  }
}

@media (max-width: 767px) {
  .ctaInner {
    display: block;
  }
}

.ctaTitle h2 {
  padding: 0;
  border: none;
}

.ctaRight {
  margin-top: 60px;
}

@media (min-width: 1280px) {
  .ctaRight {
    margin-left: 120px;
  }
}

@media (max-width: 767px) {
  .ctaRight {
    margin-top: 30px;
  }
}

.ctaButton a {
  padding: 15px 90px;
  font-size: 18px;
}

@media (max-width: 767px) {
  .ctaButton a {
    padding: 7.5px 45px;
    font-size: 14px;
  }
}

/* footer */
.footer {
  color: #fff;
  background: #8EBDC6;
  padding: 60px 0;
}

@media (max-width: 767px) {
  .footer {
    padding: 30px 0;
  }
}

.footerImg img {
  width: 240px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .footerImg img {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .footerImg img {
    width: 180px;
  }
}

.footerImg img:hover {
  opacity: 0.8;
}

.footerNav {
  margin-top: 60px;
  justify-content: right;
}

@media (max-width: 767px) {
  .footerNav {
    display: none;
  }
}

.footerItem a {
  color: #fff;
}

.footerInfo {
  margin-top: 60px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .footerInfo {
    margin-top: 30px;
    font-size: 12px;
  }
}

.footerRule {
  margin-top: 40px;
  padding-left: 30px;
  position: relative;
}

@media (max-width: 767px) {
  .footerRule {
    margin-top: 20px;
    padding-left: 15px;
  }
}

.footerRule a {
  color: #fff;
}

.footerRule a:hover {
  opacity: 0.8;
}

.footerRule::before {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 100px;
  width: 18px;
  height: 18px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .footerRule::before {
    width: 9px;
    height: 9px;
  }
}

.copy {
  margin-top: 40px;
  font-size: 12px;
}

@media (max-width: 767px) {
  .copy {
    margin-top: 20px;
  }
}

/* page news */
.pageNews-inner {
  width: 100%;
  margin: 0 auto;
}

.pagination {
  margin-top: 60px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.5em;
}

.pagination span {
  color: #8EBDC6;
}

.pagination a:hover {
  opacity: 0.8;
}

/* page about */
/* message */
.messageCard {
  width: 100%;
  display: flex;
  justify-content: left;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageCard {
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .messageCard {
    display: block;
  }
}

.messageCard:not(:first-child) {
  margin-top: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageCard:not(:first-child) {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .messageCard:not(:first-child) {
    margin-top: 0;
  }
}

.messageImg {
  max-width: 560px;
  width: 100%;
}

.messageImg img {
  border-radius: 50px;
}

.messageImg02 {
  max-width: 280px;
  width: 100%;
}

@media (max-width: 767px) {
  .messageImg02 {
    display: none;
  }
}

.messageImg03 {
  max-width: 280px;
  width: 100%;
  margin-left: 180px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageImg03 {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .messageImg03 {
    display: none;
  }
}

@media (max-width: 767px) {
  .messageImg04 {
    display: none;
  }
}

.messageRight {
  margin-left: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageRight {
    margin-left: 15px;
  }
}

@media (max-width: 767px) {
  .messageRight {
    margin-left: 0;
  }
}

.messageRight-title {
  margin-top: 12px;
  margin-bottom: 28px;
  color: #8EBDC6;
  font-size: 2.8rem;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageRight-title {
    font-size: 2rem;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .messageRight-title {
    margin-top: 30px;
    font-size: 1.4rem;
    margin-bottom: 30px;
  }
}

.messageRight-text {
  margin-top: 12px;
  max-width: 660px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageRight-text {
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  .messageRight-text {
    margin-top: 0;
  }
}

.messageRight-tag {
  margin-top: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageRight-tag {
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .messageRight-tag {
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.messageRight-tag::before {
  content: "";
  position: absolute;
  background: #CFDCDE;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.messageRight-tag::after {
  content: "";
  position: absolute;
  background: #CFDCDE;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}

.messageRight-company {
  padding-left: 12px;
  color: #8EBDC6;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .messageRight-company {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .messageRight-company {
    padding-left: 6px;
    font-size: 12px;
  }
}

.messageRight-name {
  margin-top: 16px;
  padding-left: 12px;
  font-size: 24px;
}

@media (max-width: 767px) {
  .messageRight-name {
    margin-top: 8px;
    padding-left: 6px;
    font-size: 16px;
  }
}

/* company */
.company {
  margin-top: 120px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .company {
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  .company {
    margin-top: 30px;
  }
}

.companyInner {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .companyInner {
    display: block;
  }
}

@media (max-width: 767px) {
  .companyInner {
    display: block;
  }
}

.companyLeft {
  width: 100%;
}

.companyRight {
  max-width: 580px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .companyRight {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .companyRight {
    margin-top: 30px;
  }
}

.map {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 75%;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

/* project */
.pageProject-inner {
  width: 100%;
}

.projectCard-inner {
  padding: 32px 0;
  background: #fff;
  border: 1px solid #CFDCDE;
  border-radius: 15px;
}

@media (max-width: 767px) {
  .projectCard-inner {
    padding: 16px 0;
  }
}

.projectCard-number {
  margin: 0 12px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 60px;
  font-family: "Noto Sans JP", serif;
  -webkit-text-stroke: 2px #8EBDC6;
  text-stroke: 2px #8EBDC6;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .projectCard-number {
    font-size: 42px;
  }
}

@media (max-width: 767px) {
  .projectCard-number {
    font-size: 32px;
    -webkit-text-stroke: 1px #8EBDC6;
    text-stroke: 1px #8EBDC6;
  }
}

.projectCard-title {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  color: #fff;
  background: #8EBDC6;
  border-radius: 0 5px 5px 0;
}

@media (max-width: 767px) {
  .projectCard-title {
    margin-top: 12px;
  }
}

.projectCard-text {
  margin: 0 12px;
  margin-top: 12px;
}

.projectCard-text p {
  font-size: 16px;
}

@media (max-width: 767px) {
  .projectCard-text p {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .projectCard-text {
    margin-top: 8px;
  }
}

.projectCard02 {
  padding-top: 120px;
}

@media (max-width: 767px) {
  .projectCard02 {
    margin-top: 30px;
    padding-top: 0;
  }
}

.projectCard03 {
  padding-top: 240px;
}

@media (max-width: 767px) {
  .projectCard03 {
    margin-top: 30px;
    padding-top: 0;
  }
}

/* entry */
.pageEntry {
  overflow-x: hidden;
}

.entryText01 {
  margin-bottom: 40px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryText01 {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .entryText01 {
    margin-bottom: 30px;
  }
}

.entryText02 {
  text-align: center;
  padding-bottom: 5px;
}

.entryText02 p {
  display: inline-block;
  border-bottom: 2px dotted #8EBDC6;
  font-size: 18px;
}

@media (max-width: 767px) {
  .entryText02 p {
    font-size: 14px;
  }
}

.entryText03 {
  text-align: center;
  margin-top: 30px;
}

.entryText03 p {
  display: inline-block;
  padding: 15px;
  color: #8EBDC6;
  font-weight: 700;
  border: 1px solid #413936;
  font-size: 18px;
}

@media (max-width: 767px) {
  .entryText03 p {
    padding: 7.5px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .entryText03 {
    margin-top: 18px;
  }
}

.entryText04 {
  margin-top: 40px;
  padding: 30px 0;
  padding-left: 12px;
  border-top: 1px solid #CFDCDE;
  border-bottom: 1px solid #CFDCDE;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryText04 {
    margin-top: 30px;
    padding: 20px 0;
  }
}

@media (max-width: 767px) {
  .entryText04 {
    margin-top: 30px;
    padding: 15px 0;
  }
}

.entryText04 span {
  color: #8EBDC6;
  font-size: 18px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .entryText04 span {
    font-size: 16px;
    line-height: 1.6;
  }
}

.entryTop {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .entryTop {
    display: block;
  }
}

.entryLeft {
  margin-top: 12px;
  max-width: 600px;
  width: 100%;
}

@media (max-width: 767px) {
  .entryLeft {
    margin-top: 0;
  }
}

.entryRight {
  margin-right: calc(50% - 50vw);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryRight {
    margin-left: 15px;
  }
}

@media (max-width: 767px) {
  .entryRight {
    margin-top: 30px;
  }
}

.entryImg {
  max-width: 640px;
  width: 100%;
}

.entryImg img {
  border-radius: 50px 0 0 50px;
}

.entryButton {
  max-width: 210px;
  /* 3文字150px 4文字180px */
  width: 100%;
}

@media (max-width: 767px) {
  .entryButton {
    max-width: 180px;
  }
}

.entryBottom {
  margin-top: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryBottom {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .entryBottom {
    margin-top: 30px;
  }
}

.entryCard {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #CFDCDE;
  border-radius: 0 50px 0 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryCard {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .entryCard {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.entryCard-inner {
  padding: 42px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryCard-inner {
    max-width: 720px;
    padding: 28px;
  }
}

@media (max-width: 767px) {
  .entryCard-inner {
    max-width: 320px;
    padding: 20px;
  }
}

.entryLists {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryLists {
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  .entryLists {
    max-width: 280px;
  }
}

.entryList {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 30px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .entryList {
    padding: 20px 0;
  }
}

@media (max-width: 767px) {
  .entryList {
    padding: 15px 0;
  }
}

.entryList:not(:first-child) {
  border-top: 1px solid #CFDCDE;
}

.entryList-img {
  max-width: 42px;
  width: 100%;
}

@media (max-width: 767px) {
  .entryList-img {
    max-width: 24px;
  }
}

.entryList-text {
  margin-left: 36px;
  padding: 12px;
  color: #fff;
  line-height: 1.6;
  background: #8EBDC6;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .entryList-text {
    margin-left: 12px;
    padding: 6px;
  }
}

/* contact */
.contactList {
  display: flex;
  justify-content: left;
  align-items: center;
}

.contactList:not(:first-child) {
  margin-top: 40px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .contactList:not(:first-child) {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .contactList:not(:first-child) {
    margin-top: 30px;
  }
}

.contactText {
  font-size: 18px;
}

.contactText a:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .contactText {
    font-size: 14px;
  }
}

.contactButton {
  margin-left: 12px;
}

/* form */
.formText {
  margin-bottom: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formText {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .formText {
    margin-bottom: 30px;
  }
}

.formBg {
  background: #CFDCDE;
  border-radius: 0 50px 0 0;
  padding: 80px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formBg {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .formBg {
    padding: 40px 0;
  }
}

.formInner {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formInner {
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  .formInner {
    max-width: 320px;
  }
}

.formList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formList {
    display: block;
  }
}

@media (max-width: 767px) {
  .formList {
    display: block;
  }
}

.formList:not(:first-child) {
  margin-top: 32px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formList:not(:first-child) {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .formList:not(:first-child) {
    margin-top: 18px;
  }
}

.formLabel {
  margin-right: 80px;
  display: inline-block;
  font-size: 18px;
  position: relative;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formLabel {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .formLabel {
    margin-right: 0;
    font-size: 14px;
  }
}

.formLabel::after {
  content: "必須";
  background: #8EBDC6;
  position: absolute;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7.5px 15px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .formLabel::after {
    font-size: 12px;
    right: -60px;
    padding: 3.75px 7.5px;
  }
}

.formInput {
  display: block;
  max-width: 680px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formInput {
    margin-top: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formInput {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .formInput {
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .formInput {
    max-width: 100%;
  }
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
  width: 100%;
  border: none;
  padding: 2em 2.6em;
  border-radius: 3px;
}

@media (max-width: 767px) {

  input[type=text],
  input[type=email],
  input[type=tel],
  textarea {
    padding: 1em 1.3em;
  }
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus {
  outline: none;
}

input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.6;
  color: #9c9c9c;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder {
  opacity: 0.6;
  color: #9c9c9c;
}

textarea {
  width: 100%;
  min-height: 360px;
}

.textarea {
  align-items: flex-start;
}

.checkText {
  text-align: center;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .checkText {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .checkText {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .checkText {
    text-align: left;
    line-height: 1.8;
  }
}

.checkText a {
  border-bottom: 1px solid #413936;
}

.checkBoxInner {
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .checkBoxInner {
    display: flex;
  }
}

@media (max-width: 767px) {
  .checkBoxInner {
    display: flex;
    justify-content: left;
  }
}

.checkTag {
  margin-left: 24px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .checkTag {
    margin-left: 16px;
  }
}

@media (max-width: 767px) {
  .checkTag {
    margin-left: 12px;
    font-size: 12px;
  }
}

.formButton-inner {
  text-align: center;
  margin-top: 48px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .formButton-inner {
    margin-top: 36px;
  }
}

@media (max-width: 767px) {
  .formButton-inner {
    margin-top: 24px;
  }
}

.formButton {
  font-family: "Zen Old Mincho", YakuHanJP, "Montserrat", "Noto Sans JP", serif;
  color: #8EBDC6;
  font-size: 16px;
  letter-spacing: 0.2em;
  background: #fff;
  padding: 15px 60px;
  border: 1px solid #8EBDC6;
  border-radius: 100px;
  transition: 0.3s ease-in-out;
}

.formButton:hover {
  color: #fff;
  background: #8EBDC6;
}

@media (max-width: 767px) {
  .formButton {
    padding: 7.5px 30px;
    font-size: 14px;
  }
}

.formMessage {
  text-align: center;
  margin-top: 10px;
  display: none;
  font-size: 20px;
  letter-spacing: 0.2em;
}

/* single */
.singleBg {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #CFDCDE;
  border-radius: 0 50px 0 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleBg {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .singleBg {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.singleInner {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 80px;
  background: #fff;
  border-radius: 15px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleInner {
    max-width: 720px;
    padding: 60px;
  }
}

@media (max-width: 767px) {
  .singleInner {
    max-width: 320px;
    padding: 30px;
  }
}

.singleDate {
  color: #9c9c9c;
}

.singleTitle {
  margin-top: 12px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleTitle {
    margin-top: 8px;
  }
}

.singleTitle h1 {
  font-size: 2rem;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleTitle h1 {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  .singleTitle h1 {
    font-size: 1.2rem;
  }
}

.singleImg {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleImg {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .singleImg {
    margin-top: 20px;
  }
}

.singleImg img {
  border-radius: 50px;
}

@media (max-width: 767px) {
  .singleImg img {
    border-radius: 15px;
  }
}

.singleTags {
  margin-top: 24px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleTags {
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .singleTags {
    margin-top: 12px;
  }
}

.singleContent {
  margin-top: 40px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleContent {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .singleContent {
    margin-top: 20px;
  }
}

.singleContent h2 {
  font-size: 24px;
  padding: 18px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleContent h2 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .singleContent h2 {
    font-size: 20px;
  }
}

.singleContent h3 {
  font-size: 22px;
  padding: 16px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleContent h3 {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .singleContent h3 {
    font-size: 18px;
  }
}

.singleContent h4 {
  font-size: 20px;
  padding: 14px 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .singleContent h4 {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .singleContent h4 {
    font-size: 16px;
  }
}

.singleContent a {
  color: #8EBDC6;
}

.singleContent a:hover {
  opacity: 0.6;
}

/* rule */
.ruleBg {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #CFDCDE;
  border-radius: 0 50px 0 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .ruleBg {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .ruleBg {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.ruleInner {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 80px;
  background: #fff;
  border-radius: 15px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .ruleInner {
    max-width: 720px;
    padding: 60px;
  }
}

@media (max-width: 767px) {
  .ruleInner {
    max-width: 320px;
    padding: 30px;
  }
}

.ruleList-inner {
  max-width: 100%;
}

@media (max-width: 767px) {
  .ruleList {
    display: block;
  }
}

@media (max-width: 767px) {
  .ruleList-text {
    margin-top: 8px;
    margin-left: 0;
  }
}

/* privacy */
.privacyBg {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #CFDCDE;
  border-radius: 0 50px 0 0;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .privacyBg {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .privacyBg {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.privacyInner {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 80px;
  background: #fff;
  border-radius: 15px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .privacyInner {
    max-width: 720px;
    padding: 60px;
  }
}

@media (max-width: 767px) {
  .privacyInner {
    max-width: 320px;
    padding: 40px;
  }
}

.privacyContent h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .privacyContent h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .privacyContent h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }
}

.privacyContent h2:not(:first-child) {
  margin-top: 60px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .privacyContent h2:not(:first-child) {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .privacyContent h2:not(:first-child) {
    margin-top: 30px;
  }
}

/* 404 */
.error404Inner {
  text-align: center;
}

.error404Title {
  color: #8EBDC6;
  font-size: 8rem;
  font-weight: 700;
}
@media (max-width: 767px) {
  .error404Title {
    font-size: 4rem;
  }
}

.error404Text {
  margin-top: 60px;
  font-size: 20px;
}
@media (max-width: 767px) {
  .error404Text {
    margin-top: 30px;
    font-size: 16px;
  }
}

.error404Button {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .error404Button {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}