@charset "UTF-8";
/*
Theme Name: shibiriko
Theme URI: 
Description: shibiriko Wordpressテーマ
Author: UMIBE
Author URI: 
Version: 1.0
Tags: responsive, white
*/
@import url("https://fonts.googleapis.com/css2?family=Aguafina+Script&family=Damion&family=Caveat:wght@400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");
/*============================================================================
	TOP
==============================================================================*/
.black-left,
.black-right,
.black-left-02,
.black-right-02,
.black-left-03,
.black-right-03 {
  position: absolute;
  top: 0;
  width: calc((100% - 1280px) / 2); /* 両サイドの余白幅 */
  background-color: #7BC0C0;
  pointer-events: none;
  z-index: 1;
}

.black-left {
  left: 0;
  height: 625px;
  clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
}

.black-left-02 {
  left: 0;
  height: 522px;
  clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
}

.black-left-03 {
  left: 0;
  height: 365px;
  clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
}

.black-right {
  right: 0;
  height: 739px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 99%);
}

.black-right-02 {
  right: 0;
  height: 638px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 99%);
}

.black-right-03 {
  right: 0;
  height: 483px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 99%);
}

.swiper-cont {
  position: relative;
  width: 100%;
  background-color: #139487;
}
.swiper-cont::after {
  content: "";
  position: absolute;
  bottom: -100px; /* 高さの半分 */
  left: 0;
  margin-left: -10%;
  margin-right: -10%;
  width: 120%;
  height: 100px; /* 半円の高さ */
  background-color: #139487;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

.swiper {
  background-color: #139487;
  margin: auto;
  max-width: 1280px;
  width: 100%;
}
.swiper.subpage {
  background-color: transparent;
}
.swiper .swiper-pagination-bullet-active {
  background-color: #222;
}
.swiper img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.catch {
  width: 32vw;
  height: auto;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 999;
}
.catch img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .catch {
    width: 50vw;
    position: absolute;
    top: 20vw;
  }
}

.catch-02 {
  width: 32vw;
  height: auto;
  margin: 20px auto !important;
}
.catch-02 img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .catch-02 {
    width: 50vw;
  }
}

.h1_sub {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 999;
  font-size: 54px;
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.h1_sub img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .h1_sub {
    font-size: 34px;
    position: absolute;
    top: 20vw;
  }
}

.swiper-pagination-bullet-active {
  background-color: #fff !important;
}

.main-swiper-slide figure {
  position: relative;
  height: 55.5555555556vw;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

.concept-cont {
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .concept-cont {
    width: 90%;
    margin: auto;
  }
}
.concept-cont h2 {
  margin-bottom: 15px;
}
.concept-cont p {
  margin-bottom: 15px;
}

a.btn-top {
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 1em 1em;
  width: 35em;
  text-align: center;
  margin: auto;
  position: relative;
  z-index: 1;
  border-radius: 30px;
  color: #139487;
  background-color: #EAEEBE;
  overflow: hidden;
}
a.btn-top::after, a.btn-top::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 50px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
a.btn-top::before {
  background-image: url("img/arrow.svg");
  opacity: 1;
}
a.btn-top::after {
  background-image: url("img/arrow_w.svg");
  opacity: 0;
}
a.btn-top:hover {
  text-decoration: none;
  background-color: #7BC0C0;
  color: #fff;
  opacity: 1;
}
a.btn-top:hover::before {
  opacity: 0;
}
a.btn-top:hover::after {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  a.btn-top {
    padding: 0.6em 1em;
    font-size: 12px;
    width: 90%;
  }
  a.btn-top::before, a.btn-top::after {
    right: 10px;
    width: 30px;
  }
}
a.btn-top:visited, a.btn-top:link {
  color: #139487;
}

.parts-01 {
  z-index: 1;
  position: absolute;
  left: 60px;
  bottom: -80px;
}
@media screen and (max-width: 768px) {
  .parts-01 {
    width: 10vw;
    bottom: -90px;
  }
}

.parts-02 {
  z-index: 1;
  position: absolute;
  right: 60px;
  bottom: -80px;
}
@media screen and (max-width: 768px) {
  .parts-02 {
    width: 10vw;
    bottom: -90px;
  }
}

/*============================================================================
	STORY
==============================================================================*/
.prob-box {
  position: relative;
  width: 1020px;
  margin: 20px auto;
  height: 860px;
}
@media screen and (max-width: 768px) {
  .prob-box {
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }
}
.prob-box .prob-01 {
  position: absolute;
  top: 50px;
  left: 350px;
  display: flex;
  flex-direction: column;
  width: 500px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-01 {
    position: relative;
    align-items: center;
    top: inherit;
    left: inherit;
    width: 100%;
  }
}
.prob-box .prob-01 > dt {
  font-family: "Aguafina Script", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
}
.prob-box .prob-01 dd {
  display: flex;
  margin: 0;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-01 dd {
    flex-direction: column;
    align-items: center;
  }
}
.prob-box .prob-01 dd img {
  width: 200px;
}
.prob-box .prob-01 dd dl {
  flex: 1;
}
.prob-box .prob-01 dd dl dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.prob-box .prob-02 {
  position: absolute;
  top: 320px;
  left: 180px;
  display: flex;
  flex-direction: column;
  width: 300px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-02 {
    position: relative;
    top: inherit;
    left: inherit;
    width: 100%;
    align-items: center;
  }
}
.prob-box .prob-02 > dt {
  font-family: "Aguafina Script", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
}
.prob-box .prob-02 dd {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-02 dd {
    flex-direction: column;
    align-items: center;
  }
}
.prob-box .prob-02 dd img {
  width: 200px;
}
.prob-box .prob-02 dd dl {
  flex: 1;
}
.prob-box .prob-02 dd dl dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.prob-box .prob-03 {
  position: absolute;
  top: 370px;
  right: 100px;
  display: flex;
  flex-direction: column;
  width: 300px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-03 {
    position: relative;
    top: inherit;
    right: inherit;
    width: 100%;
    align-items: center;
  }
}
.prob-box .prob-03 > dt {
  font-family: "Aguafina Script", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
}
.prob-box .prob-03 dd {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .prob-box .prob-03 dd {
    flex-direction: column;
    align-items: center;
  }
}
.prob-box .prob-03 dd img {
  width: 200px;
}
.prob-box .prob-03 dd dl {
  flex: 1;
}
.prob-box .prob-03 dd dl dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.prob-box .prob-tit {
  position: absolute;
  top: 300px;
  left: 400px;
}

.story-box {
  width: 100%;
  max-width: 1020px;
  padding: 40px 0;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .story-box {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .story-box.top {
    margin-top: 80px;
  }
}
.story-box.step-02 {
  position: relative;
}
.story-box.step-02 .h2-cont {
  position: relative;
  z-index: 1;
}
.story-box.step-02 .txt-box {
  position: relative;
  z-index: 1;
}
.story-box.step-02 .bg-story-02 {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.story-box.step-02 .bg-story-03 {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.story-box .h2-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
.story-box .h2-cont span {
  margin-bottom: 10px;
}
.story-box .h2-cont .h2-vertical-tit {
  font-size: 26px;
  writing-mode: vertical-rl;
  letter-spacing: 5px;
}
.story-box .txt-box {
  width: 700px;
  margin: 0 auto 70px auto;
}
@media screen and (max-width: 768px) {
  .story-box .txt-box {
    width: 100%;
  }
}
.story-box .img-box {
  width: 800px;
  margin: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .story-box .img-box {
    width: 100vw;
    left: -5%;
  }
  .story-box .img-box img {
    width: 100%;
  }
}
.story-box .img-box img {
  width: 100%;
  height: auto;
}
.story-box.sub-cont-01 {
  width: 700px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .story-box.sub-cont-01 {
    width: 100%;
  }
}
.story-box.sub-cont-01 .story-sub-cont {
  width: 700px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .story-box.sub-cont-01 .story-sub-cont {
    width: 100%;
  }
}
.story-box.sub-cont-01 .story-sub-cont a {
  color: #139487;
  text-decoration: underline;
}
.story-box.sub-cont-01 .story-sub-cont img {
  width: 100%;
  height: auto;
}
.story-box.sub-cont-01 .story-sub-cont .h3-vertical-tit {
  font-size: 26px;
  writing-mode: vertical-rl;
  letter-spacing: 5px;
}

.circle-link {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #8CD1D1;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  filter: drop-shadow(4px 4px 30px rgba(0, 0, 0, 0.25));
}
.circle-link.link-01 {
  top: -50px;
  left: 270px;
}
@media screen and (max-width: 768px) {
  .circle-link.link-01 {
    top: 0%;
    left: auto;
    right: 20px;
  }
}
.circle-link.link-02 {
  bottom: 0;
  left: -30px;
}
@media screen and (max-width: 768px) {
  .circle-link.link-02 {
    top: 35%;
    left: 20px;
  }
}
.circle-link.link-03 {
  bottom: -20px;
  right: 30px;
}
@media screen and (max-width: 768px) {
  .circle-link.link-03 {
    bottom: 0%;
    right: 20px;
  }
}
.circle-link span {
  font-family: "Damion", cursive;
  font-weight: 400;
  font-style: normal;
  color: #E3FF8F;
}

.circle-link:hover {
  text-decoration: none;
  background-color: #555;
}

.tukuru-box-02 p {
  margin-bottom: 10px;
}

/*============================================================================
	Service
==============================================================================*/
.service-cont {
  margin-bottom: 80px;
}
.service-cont h2 {
  text-align: center;
  margin-bottom: 40px;
}
.service-cont .service-box {
  width: 800px;
  display: flex;
  margin: 0 auto 40px auto;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .service-cont .service-box {
    width: 90%;
    gap: 15px;
  }
}
.service-cont .service-box .txt-cont {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .service-cont .service-box .txt-cont {
    width: 60%;
  }
}
.service-cont .service-box .txt-cont p {
  margin-bottom: 10px;
}
.service-cont .service-box .txt-cont a {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border: 1px solid #139487;
  background-color: #139487;
  color: #fff;
  padding: 2px 30px;
}
.service-cont .service-box .txt-cont a:hover {
  opacity: 1;
  background-color: #fff;
  color: #139487;
}
.service-cont .service-box .img-cont {
  flex: 1;
}
.service-cont .service-box .img-cont img {
  width: 100%;
  height: auto;
}

/*============================================================================
	Amarin
==============================================================================*/
.content-wrap {
  width: 100%;
  max-width: 1020px;
  margin: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .content-wrap {
    width: 90%;
  }
}

.content-flex {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .content-flex.amarin {
    flex-wrap: wrap;
  }
}

.flex-column {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bnr-cont {
  width: 80%;
  margin: 100px auto 80px auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .bnr-cont {
    margin: 60px auto 40px;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
}
.bnr-cont figure {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .bnr-cont figure {
    width: 100%;
  }
}
.bnr-cont figure img {
  width: 100%;
  height: auto;
}

.blog-wrapper {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .blog-wrapper {
    width: 100%;
  }
}
.blog-wrapper h2 {
  text-align: center;
  margin-bottom: 20px;
}
.blog-wrapper .blog-item-cont {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.blog-wrapper .blog-item-cont.blog-archive {
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .blog-wrapper .blog-item-cont {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.blog-wrapper .blog-item-cont .blog_item {
  line-height: 1.2;
  width: calc(25% - 20px);
}
@media screen and (max-width: 768px) {
  .blog-wrapper .blog-item-cont .blog_item {
    width: calc(50% - 10px);
  }
}
.blog-wrapper .blog-item-cont .blog_item figure {
  margin-bottom: 5px !important;
}
.blog-wrapper .blog-item-cont .blog_item figcaption {
  line-height: 1.2;
}
.blog-wrapper .blog-item-cont a {
  color: #139487 !important;
  text-decoration: none;
}
.thum img{
  width:100%;
  height:auto;
}

.img-cont-01 {
  width: 78%;
  margin: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.img-cont-01 .fig-01 {
  width: 30%;
}
.img-cont-01 .fig-01 img {
  margin-top: 170px;
  width: 100%;
  height: auto;
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
}
.img-cont-01 .fig-02 {
  width: 65%;
  display: flex;
  justify-content: center;
  padding-bottom: 10vw;
  background: url("img/bg_01.jpg") no-repeat center bottom/contain;
  background-blend-mode: multiply;
}
.img-cont-01 .fig-02 img {
  width: 80%;
  height: auto;
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  .img-cont-01 .fig-02 img {
    width: 100%;
  }
}

.amarin-txt {
  display: flex;
  font-size: 18px;
  margin-left: 1vw;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .amarin-txt {
    flex: 1;
    margin: 20px 0 40px;
    font-size: 14px;
  }
  .amarin-txt h2 {
    font-size: 14px;
  }
}

/*============================================================================
	Ufirm!
==============================================================================*/
.cont-box {
  width: 90%;
}
.cont-box.flex {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .cont-box.flex {
    flex-wrap: wrap;
  }
}
.cont-box.info h2 {
  margin: 30px 0;
  font-weight: normal;
  font-size: 38px;
}
@media screen and (max-width: 768px) {
  .cont-box.info h2 {
    margin: 20px 0;
    font-size: 24px;
  }
}
.cont-box.contact {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.cont-box.contact .contact-txt {
  width: 68%;
  margin-right: 4vw;
}
@media screen and (max-width: 768px) {
  .cont-box.contact .contact-txt {
    width: 100%;
  }
}
.cont-box.contact .contact-txt h2 {
  margin: 30px 0;
  font-weight: normal;
  font-size: 38px;
}
@media screen and (max-width: 768px) {
  .cont-box.contact .contact-txt h2 {
    margin: 20px 0;
    font-size: 24px;
  }
}
.cont-box .contact-img {
  margin-top: 30px;
  flex: 1;
}

.figure-box-02 {
  display: flex;
  justify-content: space-between;
}
.figure-box-02 figure {
  width: 30%;
}
.figure-box-02 figure img {
  width: 100%;
  height: auto;
}

.figure-box-03 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .figure-box-03 {
    flex-wrap: wrap;
  }
}
.figure-box-03 figure {
  width: 47%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .figure-box-03 figure {
    width: 100%;
    margin-bottom: 20px !important;
  }
}
.figure-box-03 figure figcaption {
  margin-top: 5px;
  font-size: 12px;
}
.figure-box-03 figure img {
  width: 100%;
  height: auto;
}

h3.h3-ufirm {
  font-weight: normal;
  display: inline;
  border-bottom: 1px solid #fff;
  font-size: 13px;
}
h3.h3-ufirm span {
  font-size: 20px;
}

h4.h4-ufirm {
  margin: 30px 0;
  font-weight: normal;
  font-size: 38px;
}
@media screen and (max-width: 768px) {
  h4.h4-ufirm {
    margin: 20px 0;
    font-size: 24px;
  }
}

.list li {
  list-style: disc;
  list-style-position: inside;
}

/*============================================================================
	Awards
==============================================================================*/
.txt-box-l {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .txt-box-l {
    width: 100%;
    margin-bottom: 20px !important;
  }
}

.figure-box-04 {
  width: 300px;
  height: 400px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .figure-box-04 {
    margin: auto;
    width: 90%;
  }
}
.figure-box-04 .fig-img-01 {
  width: 200px;
  z-index: 4;
  position: absolute;
  top: 0;
  right: 0;
}
.figure-box-04 .fig-img-01 img {
  width: 100%;
  height: auto;
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
}
.figure-box-04 .fig-img-02 {
  width: 150px;
  z-index: 5;
  position: absolute;
  top: 180px;
  left: 0;
}
.figure-box-04 .fig-img-02 img {
  width: 100%;
  height: auto;
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
}
.figure-box-04 .fig-img-03 {
  width: 300px;
  z-index: 3;
  position: absolute;
  bottom: -30px;
  right: 0;
}
.figure-box-04 .fig-img-03 img {
  width: 100%;
  height: auto;
}

.figure-box-05 {
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .figure-box-05 {
    width: 100%;
    justify-content: center;
  }
}
.figure-box-05 figure {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .figure-box-05 figure {
    width: 80%;
  }
}
.figure-box-05 figure:nth-child(2n) {
  margin-top: 100px !important;
}
@media screen and (max-width: 768px) {
  .figure-box-05 figure:nth-child(2n) {
    margin-top: 0 !important;
  }
}
.figure-box-05 figure img {
  width: 100%;
  height: auto;
  margin-bottom: 60px;
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
}

/*============================================================================
	INSTAGRAM
==============================================================================*/
.insta-txt a {
  color: #fff;
  text-decoration: underline;
}
.insta-txt a:visited {
  color: #fff;
}

.figure-box-06 {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .figure-box-06 {
    flex-wrap: wrap;
  }
}
.figure-box-06::before {
  width: 20vw;
  height: 20vw;
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  background-image: url("img/bg_04.jpg");
  background-size: cover;
  background-position: center;
}
.figure-box-06 figure {
  box-shadow: 0px 40px 30px 0px rgba(0, 0, 0, 0.25);
  z-index: 1;
  width: 23%;
}
@media screen and (max-width: 768px) {
  .figure-box-06 figure {
    width: 48%;
    margin-bottom: 10px !important;
  }
}
.figure-box-06 figure img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1/1;
}

/*============================================================================
	Sub
==============================================================================*/
.main-visual {
  position: relative;
}
@media screen and (max-width: 768px) {
  .main-visual .visual-inner {
    height: 300px;
  }
  .main-visual .visual-inner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.main-visual h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.about-left {
  width: 60%;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .about-left {
    width: 100%;
    margin-bottom: 20px;
  }
}
.about-left h2 {
  font-size: 40px;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .about-left h2 {
    font-size: 30px;
  }
}
.about-left h3 {
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .about-left h3 {
    font-size: 20px;
  }
}

.about-figure {
  margin-top: 1vw !important;
  flex: 1;
}
@media screen and (max-width: 768px) {
  .about-figure {
    width: 100%;
  }
}

.mes-01 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .mes-01 {
    flex-wrap: wrap;
  }
}
.mes-01 .message-box {
  width: 48%;
}
.mes-01 .message-box figure {
  width: 100%;
  height: auto;
}
.mes-01 .message-box figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px !important;
}
@media screen and (max-width: 768px) {
  .mes-01 .message-box {
    width: 100%;
    margin-bottom: 40px;
  }
}

.info-cont dl {
  display: flex;
}
.info-cont dl dt {
  width: 5em;
}

.contact-list li {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 15px;
}
.contact-list li a {
  text-decoration: underline;
}

.contact-form {
  margin-bottom: 80px;
}
.contact-form dl {
  margin-bottom: 30px;
}
.contact-form dl dt {
  margin: 0;
}
.contact-form dl dd {
  margin: 0;
}
.contact-form dl dd input, .contact-form dl dd textarea {
  width: 100% !important;
}

/*============================================================================
	FOOTER
==============================================================================*/
.footer {
  width: 100%;
  position: relative;
  padding: 30px 0 50px 0;
  background-color: #139487;
}
.footer .f-inner {
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer .f-inner .f_logo {
  width: 160px;
  margin-bottom: 10px;
}
.footer .f-inner .btn-top {
  width: 25em;
}
@media screen and (max-width: 768px) {
  .footer .f-inner {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 40px 0 40px 0;
  }
}

.f_bg {
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
}
.f_bg img {
  width: 100%;
  max-width: 1280px;
  height: auto;
  display: block;
  margin-bottom: 0 auto -5px auto;
}

.copyright {
  position: absolute;
  top: -120px;
  right: 0;
  height: 20em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  writing-mode: vertical-rl;
}

/*============================================================================
	ITEMS
==============================================================================*/
.item-cont {
  width: 80%;
  max-width: 1720px;
  margin: 0 auto 40px auto;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .item-cont {
    width: 90%;
  }
}
.item-cont .item {
  text-align: center;
  width: calc(25% - 0.5em);
  padding: 0 0.5em 1em 0.5em;
}
@media screen and (max-width: 768px) {
  .item-cont .item {
    width: 50%;
  }
}

/*============================================================================
	BRAND
==============================================================================*/
.brand-cont {
  width: 80%;
  max-width: 1720px;
  margin: 0 auto 40px auto;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .brand-cont {
    width: 90%;
  }
}
.brand-cont .item {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: calc(25% - 1em);
  padding: 1.5em;
  border: 1px solid #eee;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .brand-cont .item {
    width: calc(50% - 0.5em);
  }
  .brand-cont .item:nth-child(2n) {
    margin: 0 0 1em 0;
  }
}
.brand-cont .item .br-logo {
  min-height: 7vw;
  max-height: 8em;
}
@media screen and (max-width: 768px) {
  .brand-cont .item .br-logo {
    min-height: 60px;
  }
}
.brand-cont .item .name {
  font-size: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}
.brand-cont .item .name-ja {
  font-size: 10px;
  line-height: 1.4;
}

/*============================================================================
	INSTAGRAM
==============================================================================*/
.insta-cont {
  width: 80%;
  max-width: 1720px;
  margin: 0 auto 40px auto;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .insta-cont {
    width: 90%;
    margin-bottom: 0;
  }
}
.insta-cont .item {
  text-align: center;
  width: 20%;
  padding: 0 0.5em 1em 0.5em;
}
@media screen and (max-width: 768px) {
  .insta-cont .item {
    width: 50%;
  }
}

/*============================================================================
	ACCESS
==============================================================================*/
.access-wrapper #access {
  padding-top: 80px;
  margin-top: -80px;
}
.access-wrapper #access .access-cont .access-txt {
  text-align: center;
  line-height: 2.2em;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .access-wrapper #access .access-cont .access-txt {
    line-height: 1.8em;
  }
}
.access-wrapper #access .access-cont figure img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.access-wrapper #access .access-cont .gm_link {
  text-align: center;
}
.access-wrapper #access .access-cont .gm_link a {
  text-decoration: underline;
}

/*============================================================================
	FOOTER
==============================================================================*/
@media screen and (max-width: 768px) {
  .f-nav {
    width: 100%;
    margin-bottom: 20px;
  }
}
.f-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.f-nav ul li {
  line-height: 1;
}
.f-nav ul li a {
  color: #fff;
  padding: 0 5px;
}
.f-nav ul li:not(:last-child) {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid #fff;
}

.privacy-nav {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .privacy-nav li {
    padding-bottom: 20px;
  }
}
.privacy-nav li a {
  font-size: 11px;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .privacy-nav li a {
    font-size: 9px;
  }
}

/*============================================================================
	SCROLL
==============================================================================*/
/*スクロールダウン全体の場所*/
.scrolldown1 {
  height: 200px;
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  margin-top: 50px;
  /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 30px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}
.scroll {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 1;
  top: 80%;
  right: 15px;
}
.scroll figure img {
  margin-bottom: 10px;
}
.scroll small {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #eee;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  height: 200px;
}

.copy-sp {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1em;
}
.copy-sp figure img {
  padding-right: 10px;
}
.copy-sp small {
  line-height: 1;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #fff;
}

/*============================================================================

	PAGES

==============================================================================*/
.item-page-inner {
  width: 769px;
  margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) {
  .item-page-inner {
    width: 90%;
    margin: auto;
  }
}
.item-page-inner .sub-slider {
  width: 769px;
  margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) {
  .item-page-inner .sub-slider {
    width: 100%;
  }
}
.item-page-inner .sub-thumb {
  width: 769px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .item-page-inner .sub-thumb {
    width: 100%;
  }
}
.item-page-inner .sub-thumb .slick-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100% !important;
}
.item-page-inner .sub-thumb .slick-track .slider {
  width: 16.6666666667% !important;
  padding: 0 5px;
}
@media screen and (max-width: 768px) {
  .item-page-inner .sub-thumb .slick-track .slider {
    width: 25% !important;
  }
}
.item-page-inner .sub-thumb .slick-track .slider figcaption {
  margin-bottom: 10px;
}

.page-section .news-cont {
  width: 80%;
  max-width: 1720px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .page-section .news-cont .archive {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .page-section .news-cont {
    width: 100%;
  }
}
.page-section .news-cont .brand-info-txt {
  padding: 0 1em;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .page-section .news-cont .brand-info-txt {
    padding: 0;
    width: 100%;
  }
}
.page-section .news-cont .news-swiper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .page-section .news-cont .news-swiper {
    flex-wrap: nowrap;
  }
}
.page-section .news-cont .news-swiper .swiper-slide {
  text-align: center;
  width: 25%;
  padding: 0 0.5em;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .page-section .news-cont .news-swiper .swiper-slide {
    width: 100%;
  }
}
.page-section .news-cont .news-swiper .swiper-slide .date {
  font-size: 11px;
  margin-top: 0.5em;
}
.page-section .single-info-txt {
  margin-bottom: 1em;
}

.swiper-pagination.pagenation-02 {
  margin-bottom: -40px;
}

.flex-box {
  display: flex;
}
@media screen and (max-width: 768px) {
  .flex-box {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
.flex-box .left-box {
  width: 60%;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .flex-box .left-box {
    width: 100%;
    padding: 0;
  }
}
.flex-box .right-box {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .flex-box .right-box {
    width: 100%;
    padding-bottom: 10px;
  }
}

.page-inner {
  width: 70%;
  max-width: 1720px;
  margin: 0 auto;
}
.page-inner p {
  line-height: 2.2;
}
@media screen and (max-width: 768px) {
  .page-inner {
    width: 90%;
  }
}

/*============================================================================

	ITEM SINGLE

==============================================================================*/
.shop-url {
  margin: 50px 0 30px 0;
}

/*============================================================================

	ITEM ARCHIVE

==============================================================================*/
.news-cont.item {
  margin-top: -220px;
  padding-top: 220px;
  margin-bottom: 60px;
}

.item-anchor-cont {
  display: block;
  position: sticky;
  top: 80px;
  width: 100%;
  text-align: center;
  margin: 0 auto 60px auto;
  z-index: 3;
}

.item-anchor {
  word-break: keep-all;
  display: inline-block;
  margin: 2px 5px;
  font-size: 80%;
  border-radius: 30px;
  border: 1px solid #000;
  text-decoration: none;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.item-anchor:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .item-anchor {
    display: none;
  }
}

.item-btn-cont {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-btn-cont a.btn-01 {
  margin: 0 2px;
}

/*============================================================================

	CONTACT

==============================================================================*/
.contact-box dl {
  margin-bottom: 40px;
}
.contact-box dl dt {
  margin: 0;
  padding: 0;
}
.contact-box dl dd {
  margin: 0;
  padding: 0;
}
.contact-box dl dd input,
.contact-box dl dd textarea {
  width: 100%;
}
.contact-box .wpcf7 input[type=submit] {
  color: #fff;
  background: #EEEEEE;
  cursor: pointer;
  text-align: center;
  display: block;
  padding: 5px 0;
  margin: 0 auto;
  width: 20em;
  border-radius: inherit;
  border: 1px solid #fff;
  transition: all 0.4s;
  box-shadow: none;
}
.contact-box .wpcf7 input[type=submit]:hover {
  background-color: #fff;
  color: #EEEEEE;
}

.grecaptcha-badge {
  display: none;
}

/*============================================================================

	SINGLE,ARCHIVE

==============================================================================*/
.blog-single-cont {
  width: 1020px;
  margin: auto;
  display: flex;
  gap: 20px;
}
.blog-single-cont .title-cont h1 {
  font-size: 22px;
  margin-bottom: 0;
}
.blog-single-cont .title-cont .date {
  font-size: 12px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .blog-single-cont {
    width: 90%;
    flex-direction: column;
    gap: 20;
  }
}
.blog-single-cont .single-left {
  width: 70%;
}
.blog-single-cont .single-left a {
  color: #139487;
}
@media screen and (max-width: 768px) {
  .blog-single-cont .single-left {
    width: 100%;
  }
}
.blog-single-cont .single-right {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .blog-single-cont .single-right {
    width: 100%;
  }
}
.blog-single-cont .single-right .side-box {
  margin-bottom: 20px;
}
.blog-single-cont .single-right .side-box a {
  color: #139487;
}

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

.pagenate .prev,
.pagenate .next {
  width: 50px;
}

.pagenate .prev a {
  margin-right: 30px;
}

.pagenate .next a {
  margin-left: 30px;
}

.pagenate .prev a,
.pagenate .next a {
  font-size: 20px;
  color: #393939;
  text-decoration: none;
  width: 50px;
}

a.btn-03 {
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid #139487;
  padding-bottom: 5px;
  color: #139487;
}
@media screen and (max-width: 768px) {
  a.btn-03 {
    width: 12px;
  }
}

.wp-pagenavi {
  clear: both;
  width: 100%;
  text-align: center;
  margin: 40px 0;
}

.wp-pagenavi a.page {
  color: #393939;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  width: 44px;
  height: 44px;
  margin: 0 6px;
  transition: 0.2s ease-in-out;
  white-space: nowrap;
  border-radius: 50%;
  border: none;
}

.wp-pagenavi span.current {
  color: #fff;
  background-color: #393939;
  display: inline-block;
  text-align: center;
  line-height: 38px;
  width: 44px;
  height: 44px;
  margin: 0 6px;
  transition: 0.2s ease-in-out;
  white-space: nowrap;
  border-radius: 50%;
  border: none;
}

a.page-numbers:hover {
  opacity: 0.7;
}

span.page {
  color: #fff;
  background-color: #ccc;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  width: 44px;
  height: 44px;
  margin: 0 6px;
  transition: 0.2s ease-in-out;
  white-space: nowrap;
  border-radius: 50%;
}

/*============================================================================

	SERVICE

==============================================================================*/
.h2-blog-tit-cont {
  text-align: center;
}

.news-fl-box {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px dotted #cccccc;
  margin-bottom: 0;
}

.article-l {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}
.article-l h3.title a {
  font-weight: bold;
}
.article-l .title {
  width: 100%;
}

.excerpt {
  width: 100%;
}

.thumb {
  width: 20%;
}
.thumb img {
  width: 100%;
}

.blog-cont {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.blog-item {
  flex-basis: 31%;
  flex-wrap: wrap;
  margin: 0 1% 20px 1%;
}
.blog-item .category {
  margin-right: 10px;
}
.blog-item a.category {
  font-size: 11px;
  font-weight: normal;
  color: #707070;
  text-decoration: none;
  padding: 0 10px;
  border: 1px solid #707070;
}
.blog-item .title a {
  font-weight: bold;
  color: #707070;
  text-decoration: none;
}

.blog-item.news-fl-box {
  border: none;
}

.sub {
  display: flex;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px dotted #ccc;
}
.sub div {
  margin-right: 30px;
  text-align: center;
}
.sub div h4 {
  color: #02326a;
}
.sub div a {
  color: #707070;
}

.wp-pagenavi {
  display: block;
  padding: 60px 0;
  text-align: center;
  width: 100%;
}

.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
  min-height: 20px;
  width: 100%;
}
.pager li {
  display: inline;
}
.pager li > a {
  display: inline-block;
  padding: 2px 14px;
  background-color: #fff;
  border: 1px solid #214490;
  border-radius: 15px;
  transition: all 300ms 0s ease;
  font-size: 14px;
}
.pager li > a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #214490;
  transition: all 300ms 0s ease;
}
.pager li > span {
  display: inline-block;
  padding: 2px 14px;
  background-color: #fff;
  border: 1px solid #214490;
  border-radius: 15px;
  transition: all 300ms 0s ease;
  font-size: 14px;
}
.pager .previous > a {
  float: left;
  color: #214490;
  text-decoration: none !important;
}
.pager .previous > span {
  float: left;
  color: #214490;
  text-decoration: none !important;
}
.pager .next > a {
  float: right;
  color: #214490;
  text-decoration: none !important;
}
.pager .next > span {
  float: right;
  color: #214490;
  text-decoration: none !important;
}

.viewall {
  text-align: center;
  margin: 60px 0;
}

.company-list-cont {
  padding: 20px 0 0 0;
  width: 800px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .company-list-cont {
    width: 90%;
  }
}
.company-list-cont dl {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #139487;
}
.company-list-cont dl:first-child {
  padding-top: 20px;
  border-top: 1px dotted #139487;
}
.company-list-cont dl dt {
  width: 100px;
  font-weight: bold;
  color: #139487;
  margin: 0;
  padding: 0;
}
.company-list-cont dl dd {
  flex: 1;
  margin: 0;
  padding: 0;
}

.sub-tit span {
  font-size: 22px;
}

.submit-btn {
  width: 40%;
  margin: 20px auto 0 auto;
}
.submit-btn .form-btn {
  font-size: 18px;
  width: 100%;
  background: inherit;
  background-color: #222 !important;
  border: 1px solid #222 !important;
  color: #fff;
  cursor: pointer;
  padding: 10px 0;
  transition: all 0.4s;
  text-shadow: none;
}
.submit-btn .form-btn:hover {
  background-color: #fff;
  color: #222;
}

.contact-cont {
  width: 600px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .contact-cont {
    width: 100%;
  }
}
.contact-cont dl {
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 30px;
}
.contact-cont dl dt {
  width: 100%;
  margin-bottom: 5px;
}
.contact-cont dl dt span {
  margin-left: 5px;
  display: inline-block;
  background-color: #139487;
  color: #fff;
  font-size: 12px;
  padding: 1px 5px;
}
.contact-cont dl dd {
  width: 100%;
  margin: 0;
}
.contact-cont dl dd input, .contact-cont dl dd textarea {
  width: 100%;
  max-width: 100%;
}

.contact-btn p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 通常時 */
.wpcf7-submit {
  margin: auto;
  border: 1px solid #139487;
  background-color: #139487; /* 背景色 */
  color: #fff; /* 文字色 */
  border: none; /* 枠線なし */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 色がスムーズに変わる */
}

/* hover 時 */
.wpcf7-submit:hover {
  border: 1px solid #139487;
  background-color: #fff; /* 背景色 */
  color: #139487;
}/*# sourceMappingURL=style.css.map */