@charset "utf-8";

/* ============================ ガスを楽しむ--CocoSora ============================ */
/* 標準width: 1920px */
/* 1920px以上、1536px以下は下方に記載 */
/* ブレイクポイントは
   1920px
   1536px
   1280px
   1024px
   768px
   480px
*/

/* ================== */
/* heroここから　 */
/* ================== */
.fan-main--cocosora .fan-hero {
   background: #fdf8f2 url(../img/fan-cocosora/hero-fan-cocosora.png) no-repeat right center / contain;
}

.cocosora-hero__cover {
   display: none;
}

.fan-main--cocosora .fan-hero__description {
   font-size: clamp(15px, 1.3vw, 20px);
}

.cocosora-hero__description-line {
   display: block;
   width: max-content;
   max-width: 100%;
}

/* ドット装飾は残し、リード文の外側へ配置 */
.fan-main--cocosora .fan-hero__content::after {
   top: calc(100% + 8px);
   right: 0;
   width: min(24%, 220px);
}

/* ================== */
/* hero ここまで　 */
/* ================== */

/* ================== */
/* タブ ここから　 */
/* ================== */
.cocosora__tabs-buttons {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   max-width: 1180px;
   margin: 0 auto 34px;
   overflow: hidden;
}

.cocosora__tabs-button {
   min-height: 64px;
   padding: 12px 20px;
   color: #ef856d;
   font-size: 20px;
   font-weight: 700;
   text-align: center;
   border: 2px solid #ef856d;
   border-radius: 4px 4px 0 0;
   transition: background-color 0.2s, color 0.2s;
}

.cocosora__tabs-button+button {
   border-left: 0;
}

.cocosora__tabs-button.is-active {
   background-color: #ef856d;
   color: #fff;
}

.cocosora__tabs-panel {
   max-width: 1180px;
   margin: 0 auto;
}

.cocosora__tabs>.l-inner {
   padding-bottom: clamp(64px, 6vw, 88px);
}

.cocosora__tabs-panel h2 {
   color: #ef856d;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.5;
   text-align: center;
}

.cocosora__tabs-panel h2+p {
   text-align: center;
}

/* ================== */
/* タブ ここまで　 */
/* ================== */

/* ================== */
/* バックナンバー ここから　 */
/* ================== */
.cocosora-backnumber {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 28px;
   margin-top: 12px;
   padding: 24px;
   background-color: #fff;
}

.cocosora-backnumber__label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 62px;
   min-height: 32px;
   margin-top: 26px;
   padding: 6px 14px;
   border-radius: 999px;
   background-color: #ef856d;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0;
}

.cocosora-backnumber li {
   min-width: 0;
}

.cocosora-backnumber>li[hidden],
.cocosora__more-link[hidden] {
   display: none;
}

.cocosora-backnumber>li>p {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.5;
}

.cocosora-backnumber img {
   display: block;
   width: 100%;
   margin-top: 10px;
   aspect-ratio: 781 / 1099;
   object-fit: cover;
   background-color: #f5f5f5;
}

.cocosora__backnumber-files {
   margin-top: 10px;
}

.cocosora__backnumber-files p {
   font-size: 13px;
   font-weight: 700;
   line-height: 1.4;
}

.cocosora__backnumber-files ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   margin-top: 4px;
}

.cocosora__backnumber-files li {
   display: inline-flex;
   align-items: center;
   color: #999;
   font-size: 13px;
   line-height: 1.5;
}

.cocosora__backnumber-files li+li::before {
   content: "|";
   margin: 0 5px;
   color: #999;
}

.cocosora__backnumber-files a {
   font-weight: 700;
   text-decoration: none;
}

.cocosora__more-link {
   width: min(calc(100% - 32px), 300px);
   min-height: 58px;
   margin: 36px auto 0;
   padding-right: 18px;
   padding-left: 22px;
   color: #231815;
   white-space: nowrap;
}

.cocosora__more-link::after {
   background-color: #ef856d;
}

.cocosora-pagination {
   margin-top: 48px;
}

.cocosora-pagination ul.page-numbers {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.cocosora-pagination li {
   margin: 0;
}

.cocosora-pagination a.page-numbers,
.cocosora-pagination span.page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 46px;
   height: 46px;
   padding: 0 12px;
   border: 2px solid #ef856d;
   border-radius: 999px;
   background-color: #fff;
   color: #231815;
   font-size: 15px;
   font-weight: 700;
   line-height: 1;
   text-decoration: none;
}

.cocosora-pagination a.page-numbers {
   transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.cocosora-pagination a.page-numbers:hover,
.cocosora-pagination a.page-numbers:focus-visible,
.cocosora-pagination span.page-numbers.current {
   background-color: #ef856d;
   color: #fff;
}

.cocosora-pagination a.page-numbers:hover {
   transform: translateY(-2px);
}

.cocosora-pagination .prev,
.cocosora-pagination .next {
   min-width: 82px;
}

.cocosora-pagination span.page-numbers.dots {
   min-width: 28px;
   padding: 0;
   border-color: transparent;
   background: transparent;
   color: #777;
}

/* ================== */
/* バックナンバー ここまで　 */
/* ================== */

/* ================== */
/* 広告掲載について ここから　 */
/* ================== */


.cocosora__contact .l-inner {
   padding-top: 10px;
   padding-bottom: 10px;
}


#cocosora .cocosora__contact h2 {
   color: #231815;
   font-size: 20px;
}

.cocosora__ad-intro p {
   line-height: 1.75;
}

.cocosora__ad-intro p+p {
   margin-top: 10px;
}


.cocosola__consults-links {
   display: flex;
   justify-content: center;
   align-items: start;
   gap: 20px;
   margin-top: 16px;
}


.cocosola__consults-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 300px;
   min-height: 54px;
   margin: 0;
   padding: 10px 14px;
   background-color: #ef856d;
   border-color: #ef856d;
   box-shadow: 0 4px 10px rgba(161, 182, 77, 0.22);
   font-size: 15px;
   line-height: 1.4;
   white-space: nowrap;
}


.cocosola__consults-link::after {
   width: 22px;
   height: 22px;
   margin-left: 10px;
}


.cocosola__consults-link--tel::after {
   display: none;
}


.cocosola__consults-icon {
   flex: 0 0 auto;
   width: 26px;
   height: 26px;
}


.cocosola__consults-tel {
   display: grid;
   justify-items: center;
   gap: 14px;
}


.cocosola__consults-tel-info {
   display: grid;
   justify-items: center;
   gap: 3px;
   margin: 0;
   line-height: 1.35;
   text-align: center;
}

.cocosola__consults-tel-info strong {
   font-size: 16px;
   font-weight: 700;
}


.cocosola__consults-tel-info>span {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.35;
}

.cocosola__consults-tel-info .cocosola__consults-hours {
   font-size: 17px;
   line-height: 1;
}


.cocosola__consults-tel-info a {
   margin-top: 3px;
   font-size: 22px;
   font-weight: 400;
   text-decoration: none;
}


.cocosola__consults-tel-info small {
   display: inline;
   font-size: 14px;
   font-weight: 400;
}

.cocosora__ad {
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 38px;
}

.cocosora__ad-wrapper {
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
   gap: 24px;
}

.cocosora__ad-info {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 30px;
}

.cocosora__ad-area {
   display: flex;
   align-items: flex-start;
   gap: 24px;
}

.cocosora__ad-text {
   flex: 1 1 0;
   min-width: 0;
}

.cocosora__ad h3 {
   margin-bottom: 14px;
   color: #231815;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.5;
}

.cocosora__ad hr {
   width: 100%;
   height: 1px;
   border: 1;
}

.cocosora__ad table {
   width: 100%;
}

.cocosora__ad th,
.cocosora__ad td {
   padding: 8px 0;
   line-height: 1.7;
   vertical-align: top;
}

.cocosora__ad th {
   width: 8em;
   font-weight: 700;
   text-align: left;
}

.cocosora__ad small {
   display: block;
   margin-top: 8px;
   line-height: 1.7;
}

.cocosora__ad strong {
   font-size: 32px;
}

.cocosora__ad-map {
   flex: 0 0 min(36%, 421px);
   display: block;
   width: min(36%, 421px);
   height: auto;
   object-fit: contain;
}

.cocosora__ad-layout {
   display: block;
   width: min(100%, 920px);
   height: auto;
}

/* ================== */
/* 広告掲載について ここまで　 */
/* ================== */

/* ============================ レスポンシブ ============================ */
/* ======= PC幅 ====== */
/*  1024px */
@media screen and (max-width: 1024px) {
   .fan-main--cocosora .fan-hero {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
      aspect-ratio: auto;
      padding: 0;
      align-content: normal;
      background: #fdf8f2;
   }

   .fan-main--cocosora .fan-breadcrumb {
      position: static;
      width: min(calc(100% - 48px), 960px);
      max-width: none;
      margin: 0 auto;
      padding: 18px 0;
   }

   .cocosora-hero__cover {
      display: block;
      width: 100%;
      overflow: hidden;
      aspect-ratio: 16 / 6;
   }

   .cocosora-hero__cover img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 48%;
   }

   .fan-main--cocosora .fan-hero>.l-inner {
      width: min(calc(100% - 48px), 960px);
      margin: 0 auto;
      padding: 40px 0 52px;
   }

   .fan-main--cocosora .fan-hero__content {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
   }

   .fan-main--cocosora .fan-hero__content::before,
   .fan-main--cocosora .fan-hero__content::after {
      display: none;
   }

   .fan-main--cocosora .fan-hero__title img {
      width: min(100%, 420px);
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
   }

   .fan-main--cocosora .fan-hero__description {
      text-align: center;
   }

   .cocosora-hero__description-line {
      margin-right: auto;
      margin-left: auto;
      text-align: center;
   }

   .cocosora-backnumber {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

/* ======= タブレット幅 ====== */
/* 768px */
@media screen and (max-width: 768px) {
   .fan-main--cocosora .fan-breadcrumb,
   .fan-main--cocosora .fan-hero>.l-inner {
      width: min(calc(100% - 32px), 720px);
   }

   .cocosora-hero__cover {
      aspect-ratio: 16 / 9;
   }

   .fan-main--cocosora .fan-hero>.l-inner {
      padding-top: 30px;
      padding-bottom: 40px;
   }

   .fan-main--cocosora .fan-hero__description {
      font-size: 15px;
   }

   .cocosora-hero__description-line {
      width: auto;
   }

   .cocosora-hero__description-line>span {
      display: inline-block;
   }

   .cocosora__tabs .l-inner {
      padding-top: 48px;
   }

   .cocosora__tabs-button {
      min-height: 56px;
      font-size: 17px;
   }

   .cocosora__tabs-panel h2 {
      font-size: 28px;
   }

   .cocosora-backnumber {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      padding: 18px;
   }

   .cocosora__ad-wrapper {
      flex-direction: column;
   }

   .cocosora__ad-area {
      gap: 18px;
   }

   .cocosora__ad-map {
      flex-basis: min(40%, 421px);
      width: min(40%, 421px);
   }



   .cocosola__consults-links {
      flex-direction: column;
      align-items: center;
      gap: 14px;
   }


   .cocosola__consults-link {
      width: min(100%, 320px);
   }
}

/* ======= モバイル幅 ====== */
/* 480px */
@media screen and (max-width: 480px) {
   .fan-main--cocosora .fan-breadcrumb {
      padding-top: 14px;
      padding-bottom: 14px;
   }

   .fan-main--cocosora .fan-hero__catch {
      font-size: 14px;
   }

   .fan-main--cocosora .fan-hero__title img {
      width: min(100%, 300px);
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
   }

   .fan-main--cocosora .fan-hero__description {
      font-size: 14px;
      line-height: 1.75;
   }

   .cocosora__tabs-buttons {
      margin-bottom: 28px;
   }

   .cocosora__tabs-button {
      min-height: 50px;
      padding: 10px;
      font-size: 15px;
   }

   .cocosora__tabs-panel h2 {
      font-size: 24px;
   }

   .cocosora-backnumber {
      gap: 14px;
      padding: 14px;
   }

   .cocosora-backnumber p {
      font-size: 12px;
   }

   .cocosora-pagination {
      margin-top: 36px;
   }

   .cocosora-pagination ul.page-numbers {
      gap: 7px;
   }

   .cocosora-pagination a.page-numbers,
   .cocosora-pagination span.page-numbers {
      min-width: 40px;
      height: 40px;
      padding: 0 9px;
      font-size: 14px;
   }

   .cocosora-pagination .prev,
   .cocosora-pagination .next {
      min-width: 68px;
   }

   .cocosora-pagination span.page-numbers.dots {
      min-width: 20px;
   }

   .cocosora__ad {
      gap: 30px;
   }

   .cocosora__ad-area {
      flex-direction: column;
      gap: 14px;
   }

   .cocosora__ad h3 {
      margin-bottom: 12px;
      font-size: 19px;
   }

   .cocosora__ad-map {
      width: min(100%, 360px);
      margin: 0 auto;
   }

   .cocosora__ad th,
   .cocosora__ad td {
      display: block;
      width: 100%;
      padding: 4px 0;
   }

   .cocosora__contact {
      padding: 32px 18px;
   }

   .cocosora__contact h3 {
      font-size: 19px;
   }

   .cocosora__contact p {
      margin-top: 22px;
      font-size: 18px;
   }

   .cocosora__contact a {
      font-size: 22px;
   }
}