@charset "utf-8";

/* ============================ 大多喜ガスのキャラクター ============================ */
/* 標準width: 1920px */
/* 1920px以上、1536px以下は下方に記載 */
/* ブレイクポイントは
   1920px
   1536px
   1280px
   1024px
   768px
   480px
*/

/* ================== */
/* 大多喜ガスのキャラクター--hero ここから　 */
/* ================== */
.page-character .l-inner {
   width: min(92%, 1200px);
   margin-right: auto;
   margin-left: auto;
}

.character-main .corporate-local-nav {
   margin-bottom: 0;
}

#company-character {
   overflow: hidden;
   background: #fff;
}

.character__insta,
.character__link {
   padding: clamp(50px, 7vw, 90px) 0;
}

.character__link {
   background: #f5f5f5;
}

.character__insta-box .c-arrow-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   padding-right: 2rem;
   color: #111;
   font-weight: 700;
   text-decoration: none;
}

.character__insta-box .c-arrow-link::after {
   content: "";
   position: absolute;
   right: 0;
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 50%;
}

.character__insta-list [hidden] {
   display: none;
}

.insta-load-more {
   position: relative;
   display: block;
   width: 58px;
   height: 58px;
   margin: 0 auto;
   border: 0;
   border-radius: 50%;
   background: #00a291;
   cursor: pointer;
}

.insta-load-more::before,
.insta-load-more::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 2px;
   background: #fff;
   transform: translate(-50%, -50%);
}

.insta-load-more::after {
   transform: translate(-50%, -50%) rotate(90deg);
}

.insta-load-more.is-expanded::after {
   display: none;
}

.insta-load-more:hover,
.insta-load-more:focus-visible {
   background: #008878;
}

.character-hero {
   position: relative;
   overflow: hidden;
}

.character-hero h1 {
   font-size: 54px;
   font-weight: 600;
   padding-top: 30px;
}

.character-hero::before,
.character-hero::after {
   content: "";
   position: absolute;
   right: 50%;
   left: 50%;
   width: auto;
   margin-right: -50vw;
   margin-left: -50vw;
   pointer-events: none;
}

.character-hero::before {
   top: 0;
   height: 33%;
   background-color: #c5e4df;
}

.character-hero::after {
   margin-top: -10px;
   top: 33%;
   height: 11.7vw;
   min-height: 90px;
   background: url(../img/corporate/character/hero__bg.svg) no-repeat center top / 100% 100%;
}

.character-hero .l-inner {
   position: relative;
   z-index: 1;
}

.character-hero__img {
   display: flex;
   align-items: center;
   margin-top: 30px;
}

.character-hero__img img {
   flex: 1 1 0;
   min-width: 0;
   width: auto;
}

.character-hero__img img:nth-child(2) {
   flex-grow: 1.8;
}

.character-hero__desc {
   margin-top: 30px;
}

.character-hero__desc p {
   text-align: center;
   font-weight: 600;
   font-size: 24px;
   line-height: 2.2;
   letter-spacing: .1em;
}

.character-hero__desc span img {
   width: 50px;
   margin: 0 5px;
}

/* ================== */
/* 大多喜ガスのキャラクター--hero ここまで　 */
/* ================== */


/* ================== */
/* 大多喜ガスのキャラクター--Instagram ここから　 */
/* ================== */
.character__insta-box {
   position: relative;
   border: solid 5px #00a291;
   border-radius: 8px;
   padding: 20px 20px 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.character__insta-box::before,
.character__insta-box::after {
   content: "";
   position: absolute;
   background-color: #fff;
   pointer-events: none;
   z-index: 1;
}

.character__insta-box::before {
   top: -5px;
   right: 40px;
   width: 200px;
   height: 5px;
}


.character__insta-deco {
   position: absolute;
   top: -115px;
   right: 30px;
   width: 220px;
   pointer-events: none;
   z-index: 2;
}

.character__insta-box-head img {
   display: block;
   width: 100%;
   max-width: 600px;
   margin: auto;
   padding: 30px;
}

.character__insta-box .c-arrow-link::after {
   background: #ef856d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10' fill='none'%3E%3Cpath d='M2 1.5L5.5 5L2 8.5' stroke='%23fdeff5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px 10px;
}

.character__insta-list {
   display: flex;
   flex-wrap: wrap;
   margin-top: 30px;
   gap: 16px 1.5%;
}

.character__insta-list li {
   flex: 0 0 18.8%;
}

.character__insta-list img {
   display: block;
   width: 100%;
}

.character__insta-box .insta-load-more-wrap {
   position: absolute;
   bottom: -29px;
   left: 0;
   width: 100%;
}

/* ================== */
/* 大多喜ガスのキャラクター--Instagram ここまで　 */
/* ================== */

/* ================== */
/* 大多喜ガスのキャラクター--K&Oエナジーリンク ここから　 */
/* ================== */
.character__link-list {
   display: flex;
   width: 100%;
   gap: 2%;
}

.character__link-item img {
   width: 100%;
}

/* ================== */
/* 大多喜ガスのキャラクター--K&Oエナジーリンク ここまで */
/* ================== */

/* ================== */
/* 大多喜ガスのキャラクター--フッター直上アニメーション ここから */
/* ================== */
.footer-above-animation {
   overflow: hidden;
   width: 100%;
}

.footer-above-animation img {
   display: block;
   width: 150px;
   animation: footerRun 30s linear infinite;
}

@keyframes footerRun {
   0% {
      transform: translateX(-140px);
   }

   100% {
      transform: translateX(100vw);
   }
}

/* ================== */
/* 大多喜ガスのキャラクター--フッター直上アニメーション ここまで */
/* ================== */

/* ============================ レスポンシブ ============================ */
@media screen and (max-width: 768px) {
   .character-hero h1 {
      font-size: clamp(0px, 7vw, 48px);
      padding-top: 15px;
   }


   .character-hero::before {
      height: 43%;
   }

   .character-hero::after {
      top: 43%;
   }

   .character-hero__img {
      flex-wrap: wrap;
      width: 80%;
      margin: 15px auto 0;
   }

   .character-hero__img img {
      flex: 0 0 50%;
      width: 50%;
   }

   .character-hero__img img:nth-child(1) {
      order: 1;
   }

   .character-hero__img img:nth-child(2) {
      order: 3;
      flex-basis: 100%;
      width: 100%;
   }

   .character-hero__img img:nth-child(3) {
      order: 2;
   }

   .character-hero::after {
      margin-top: -20px;
   }

   .character-hero__desc p {
      font-size: 20px;
      line-height: 2;
   }

   .character__insta {
      margin-top: 30px;
   }

   .character__insta-list li {
      flex-basis: 23.875%;
   }
}

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

   .character-hero h1 {
      font-size: clamp(14px, 6vw, 28px);
      padding-top: 15px;
   }

   .character-hero__img {
      width: 90%;
   }

   .character-hero::before {
      height: 38%;
   }

   .character-hero::after {
      top: 38%;
      margin-top: -25px;
   }

   .character__insta-box {
      margin-top: 30px;
   }

   .character-hero__desc p {
      font-size: 16px;
   }

   .character__link-list {
      flex-direction: column;
   }

   .character__insta-list li {
      flex-basis: 32.333%;
   }

   .footer-above-animation img {
      animation: footerRun 10s linear infinite;
   }
}