@charset "UTF-8";

/*=============================================
 * HOME
*=============================================*/
#mv {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   background: url("../img/index/mv-deco.webp") no-repeat center top/auto 100%, url("../img/index/mv-bg.webp") no-repeat center top/cover;
   width: 100%;
   height: calc(100vh - 75px);
}

#mv h2 {
   width: 100%;
   max-width: 1200px;
   color: #fff;
   font-size: 100px;
   letter-spacing: -0.04em;
   line-height: 1.00;
   margin: 0px 0px 25px 25px;
   text-align: left;
}

@media screen and (max-width: 1120px) {
   #mv h2 {
      font-size: 80px;
   }
}

@media screen and (max-width: 991px) {
   #mv h2 {
      font-size: 70px;
   }
}

@media screen and (max-width: 840px) {
   #mv h2 {
      font-size: 60px;
   }
}

@media screen and (max-width: 690px) {
   #mv {
      height: calc(100vh - 45px);
   }

   #mv:before {
      background-position: 50%;
   }

   #mv h2 {
      font-size: 28px;
      margin: 0px 10px 10px;
   }
}

/* -- --*/
#news {
   padding: 100px 0;
}

#news h2 {
   color: #135fc1ff;
   font-size: 40px;
   margin: 10px 0;
}

#news .slider {
   overflow: hidden;
   padding: 70px 0;
}

#news .infiniteslide {
   display: flex;
   width: max-content;
   gap: 80px;
}

#news .infiniteslide a {
   display: block;
   width: 250px;
}

@media screen and (max-width: 690px) {
   #news {
      padding: 50px 0 0;
   }

   #news .infiniteslide {
      gap: 40px;
   }

   #news .infiniteslide a {
      width: 150px;
   }
}

/* -- --*/
#mission {
   display: flex;
   position: relative;
}

#mission:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/index/misson-deco.webp") no-repeat center top/ auto 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#mission .col-l {
   display: flex;
   justify-content: flex-end;
   width: 30%;
   position: relative;
}

#mission h2 {
   width: 240px;
   color: #135fc1ff;
   font-size: 48px;
   line-height: 1.4;
   text-align: left;
}

#mission .col-r {
   width: 70%;
   padding: 200px 0 150px 120px;
   position: relative;
}

#mission .text {
   color: #135fc1ff;
   font-family: var(--s-font-30b67767);
   font-size: 20px;
   line-height: 2.5;
}

#mission .text p:not(:last-child) {
   padding-bottom: 60px;
}

#mission .last {
   font-size: 32px;
   line-height: 1.4;
}

@media screen and (max-width: 1120px) {
   #mission {
      flex-direction: column;
   }

   #mission .col-l {
      display: block;
      margin-left: 136px;
   }

   #mission .col-r {
      width: 768px;
      padding: 50px 0 150px 136px;
   }
}

@media screen and (max-width: 840px) {
   #mission .col-l {
      margin-left: 50px;
   }

   #mission .col-r {
      padding: 50px 50px 150px;
   }

   #mission .last {
      font-size: 28px;
   }
}

@media screen and (max-width: 767px) {
   #mission .col-l {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: auto;
      height: 150px;
      margin-left: 30px;
   }

   #mission h2 {
      width: 145px;
      font-size: 30px;
   }

   #mission .col-r {
      width: auto;
      padding: 0px 25px 50px 80px;
   }

   #mission .text {
      font-size: 15px;
   }

   #mission .text p:not(:last-child) {
      padding-bottom: 24px;
   }

   #mission .last {
      font-size: 16px;
   }
}

/* -- --*/
#service {
   background: #135fc1ff;
   color: #fff;
   padding: 70px 150px 100px 150px;
}

#service h2 {
   width: max-content;
   font-size: 42px;
   line-height: 1;
   text-align: right;
}

#service h2 span {
   display: block;
   font-size: 80px;
   text-align: left;
}

#service .box-1 {
   width: 80%;
   margin-left: auto;
   padding: 40px 0 100px;
}

#service .box-1 .inner {
   display: flex;
   align-content: flex-start;
   align-items: flex-start;
   flex-wrap: wrap;
   border-top: 1px solid;
   border-bottom: 1px solid;
   padding: 0 15px 30px;
}

#service .box-1 h3 {
   font-size: 48px;
   line-height: 1;
   max-width: calc(100% - 100px);
   margin-right: 100px;
   padding-top: 20px;
}

#service .box-1 h3 span {
   display: block;
   font-size: 24px;
}

#service .box-1 .col {
   flex: 1;
   width: auto;
   max-width: 100%;
   padding-top: 70px;
}

#service .box-1 h4 {
   width: 625px;
   font-size: 26px;
}

#service .box-1 .txt {
   line-height: 2.6;
   padding-top: 25px;
}

#service .box-1 .button {
   text-align: right;
   margin-right: -15px;
   padding-top: 25px;
}

#service .box-1 .button a img {
   max-width: 30px;
}

#service .box-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0 2%;
   padding-bottom: 100px;
}

#service .box-2 .col {
   display: flex;
   flex-direction: column;
   height: 200px;
   background-color: #fff;
   border: 1px solid;
   color: #000;
   padding: 16px 15px;
}

#service .box-2 .col h3 {
   width: max-content;
   text-align: right;
   font-size: 24px;
   line-height: 26px;
   flex: 1 0 0;
}

#service .box-2 .col h3 span {
   display: block;
   font-size: 48px;
   line-height: 51px;
   text-transform: uppercase;
   text-align: left;
}

#service .box-2 .col .note {
   display: flex;
   align-items: center;
   gap: 8px;
   width: max-content;
   height: 40px;
   border-radius: 20px;
   border: 1px solid;
   margin-left: auto;
   padding: 0 30px 0 40px;
}

#service .box-2 .col .note i {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   border: 1px solid;
   font-size: 20px;
   line-height: 1;
}

#service .box-2 a.col {
   background: #fff;
   color: #222;
}

#service .box-2 a.col .note {
   background-color: #fff;
   color: #222;
}

#service .box-2 a.col:hover {
   transform: scale(1.05);
}

#service .box-3 {
   background-color: #fff;
   color: #6a6a6a;
   width: 80%;
   border-radius: 10px;
   margin: 0 auto;
   padding: 20px 0 60px;
}

#service .box-3 .inner {
   width: 85%;
   margin: 0 auto;
}

#service .box-3 h3 {
   border-bottom: 1px solid #393939;
   padding: 40px 0px;
}

#service .box-3 h3 span {
   color: #393939;
   font-size: 32px;
   line-height: 35px;
}

#service .box-3 dl {
   display: grid;
   grid-template-columns: 150px 1fr;
   border-bottom: 1px solid #393939;
   padding: 40px 0;
}

#service .box-3 dl dt {
   padding-left: 20px;
}

body.en #service .box-2 .col .note {
   padding: 0 30px;
}

body.en #service .box-3 dl {
   grid-template-columns: 250px 1fr;
}

@media screen and (max-width: 1120px) {
   #service {
      padding: 70px 100px 100px;
   }

   #service .box-1 {
      width: 100%;
   }

   #service .box-2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }

   #service .box-2 .col {
      width: 600px;
   }
}

@media screen and (max-width: 840px) {
   #service {
      padding: 70px 50px 100px;
   }

   #service h2 {
      font-size: 34px;
   }

   #service h2 span {
      font-size: 60px;
   }

   #service .box-1 h3 {
      font-size: 42px;
   }

   #service .box-1 h4 {
      font-size: 22px;
   }

   #service .box-2 .col {
      width: 100%;
   }

   #service .box-3 {
      width: 100%;
   }
}

@media screen and (max-width: 690px) {
   #service {
      padding: 70px 25px 40px 25px;
   }

   #service h2 {
      font-size: 24px;
   }

   #service h2 span {
      font-size: 40px;
   }

   #service .box-1 {
      padding-bottom: 32px;
   }

   #service .box-1 h3 {
      font-size: 32px;
   }

   #service .box-1 h3 span {
      font-size: 18px;
   }

   #service .box-1 .col {
      padding-top: 40px;
   }

   #service .box-1 h4 {
      width: auto;
      font-size: 15px;
   }

   #service .box-1 .txt {
      padding-top: 20px;
   }

   #service .box-1 .button {
      padding-top: 20px;
   }

   #service .box-1 .button a img {
      max-width: 20px;
   }

   #service .box-2 {
      gap: 10px;
      padding-bottom: 32px;
   }

   #service .box-2 .col {
      height: 150px;
   }

   #service .box-2 .col h3 {
      font-size: 18px;
      line-height: 20px;
   }

   #service .box-2 .col h3 span {
      font-size: 30px;
      line-height: 30px;
   }

   #service .box-2 .col .note {
      height: 25px;
      font-size: 11px;
      padding: 0px 16px 0px 24px;
   }

   #service .box-2 .col .note i {
      width: 20px;
      height: 20px;
      font-size: 14px;
   }

   #service .box-2 a.col .note {
      font-size: 12px;
   }

   #service .box-3 {
      padding: 24px 0 32px;
   }

   #service .box-3 h3 {
      font-size: 12px;
      padding: 0 0 16px;
      padding-bottom: 16px;
   }

   #service .box-3 h3 span {
      font-size: 24px;
   }

   #service .box-3 dl {
      grid-template-columns: 90px 1fr;
      padding: 24px 0;
   }

   #service .box-3 dl dt {
      padding-left: 8px;
   }

   body.en #service .box-2 .col .note {
      padding: 0 16px;
   }

   body.en #service .box-3 dl {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   body.en #service .box-3 dl dt {
      padding-left: 0;
   }
}

/*=============================================
 * 広告代理事業
*=============================================*/
.p-ads {
   background-color: #135fc1ff;
   color: #fff;
}

.p-ads .row-1 {
   padding: 70px 150px 100px;
}

.p-ads .row-1 .inner {
   display: flex;
   align-content: flex-start;
   align-items: flex-start;
   flex-wrap: wrap;
   border-bottom: 1px solid;
   padding: 0px 15px 25px;
}

.p-ads .row-1 h2 {
   font-size: 48px;
   line-height: 1;
   margin-right: 100px;
   padding-top: 20px;
}

.p-ads .row-1 h2 span {
   display: block;
   font-size: 24px;
}

.p-ads .row-1 .col {
   flex: 1;
   width: auto;
   max-width: 100%;
   padding-top: 70px;
}

.p-ads .row-1 h3 {
   width: 625px;
   font-size: 26px;
}

.p-ads .row-1 .txt {
   line-height: 2.6;
   padding-top: 25px;
}

.p-ads .row-2 {
   padding: 0 150px 100px;
}

.p-ads .row-2 h3 {
   padding-bottom: 30px;
}

.p-ads .row-2 h3 span {
   display: inline-block;
   background-color: #fff;
   margin-bottom: 30px;
   padding: 0 3px;
   font-size: 28px;
}

.p-ads .row-2 h3 strong {
   display: inline-block;
   background-color: #fff;
   font-weight: inherit;
   font-size: 28px;
   padding: 0 3px;
}

.p-ads .row-2 .box {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   border: 1px solid #fff;
   padding: 45px 0px;
   font-size: 19px;
   line-height: 2.65;
}

.p-ads .row-3 {
   display: flex;
   flex-direction: column;
   gap: 40px 300px;
   padding: 0 150px 100px;
}

.p-ads .row-3 .box {
   background-color: #fff;
   border-radius: 10px;
   padding: 80px 100px;
   position: relative;
}

.p-ads .row-3 .box:not(:last-child) {
   animation-name: ads-scroll;
   animation-timeline: view();
   animation-timing-function: linear;
   animation-range: cover 0% cover 100%;
   animation-fill-mode: both;
}

.p-ads .row-3 .box h3 {
   font-size: 32px;
   margin: 50px 0;
}

.p-ads .row-3 .box .txt {
   line-height: 2.65;
}

.p-ads .row-4 {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 1135px;
   background-color: #fff;
   padding: 100px 150px;
}

.p-ads .row-4 h3 {
   width: max-content;
   background-color: #145fc1;
   color: #fff;
   padding: 0 3px;
}

.p-ads .row-4 .txt {
   line-height: 2;
   padding: 30px 0;
}

.p-ads .row-4 ul {
   border-top: 1px solid #145fc1;
   font-size: 20px;
   line-height: 2.3;
   letter-spacing: 0.04em;
   padding: 60px 0 45px;
}

.p-ads .row-4 ul li {
   font-feature-settings: normal;
   text-align: left;
   text-decoration: none;
}

@keyframes ads-scroll {
   100% {
      opacity: 0;
   }

   54% {
      translate: 0px 0px;
   }

   80% {
      opacity: 1;
   }

   92% {
      opacity: 0;
      translate: 0px 100%;
   }
}
body.en .p-ads .row-4 ul {
   flex-direction: column;
}
body.en .p-ads .row-4 ul li {
   writing-mode: horizontal-tb;
   text-orientation: inherit;
}

@media screen and (max-width: 1850px) {
   body.en .p-ads .row-2 .box {
      flex-direction: column;
      flex-wrap: nowrap;
      padding: 45px;
   }
}

@media screen and (max-width: 1120px) {
   .p-ads .row-1 {
      padding: 70px 100px 100px;
   }

   .p-ads .row-2 {
      padding: 0 100px 100px;
   }

   .p-ads .row-2 h3 span {
      font-size: 16px;
   }

   .p-ads .row-2 h3 strong {
      font-size: 24px;
   }

   .p-ads .row-2 .box {
      font-size: 12px;
   }

   .p-ads .row-3 {
      padding: 0 100px 100px;
   }

   .p-ads .row-3 .box {
      padding: 80px 70px;
   }

   .p-ads .row-3 .box .txt {
      font-size: 16px;
   }

   .p-ads .row-4 {
      padding: 60px 100px;
   }

   .p-ads .row-4 h3 {
      font-size: 16px;
   }

   body.en .p-ads .row-2 .box {
      line-height: 1.5;
   }

   body.en .p-ads .row-2 .box ul li {
      text-indent: -13px;
      padding-left: 13px;
   }

   body.en .p-ads .row-2 .box ul:not(:last-child),
   body.en .p-ads .row-2 .box ul li:not(:last-child) {
      padding-bottom: 15px;
   }
}

@media screen and (max-width: 840px) {
   .p-ads .row-1 {
      padding: 70px 50px 100px;
   }

   .p-ads .row-1 h2 {
      font-size: 42px;
   }

   .p-ads .row-1 h3 {
      font-size: 22px;
   }

   .p-ads .row-2 {
      padding: 0 50px 100px;
   }

   .p-ads .row-2 h3 span {
      font-size: 18px;
      margin-bottom: 20px;
   }

   .p-ads .row-2 h3 strong {
      font-size: 18px;
   }

   .p-ads .row-2 .box {
      font-size: 13px;
      line-height: 3;
   }

   .p-ads .row-3 {
      padding: 0 50px 100px;
   }

   .p-ads .row-3 .box {
      padding: 60px 40px;
   }

   .p-ads .row-3 .box h3 {
      font-size: 28px;
      margin: 40px 0;
   }

   .p-ads .row-3 .box .txt {
      font-size: 12px;
   }

   .p-ads .row-4 {
      padding: 60px 50px;
   }

   .p-ads .row-4 h3 {
      font-size: 12px;
   }

   .p-ads .row-4 .txt {
      font-size: 14px;
   }

   .p-ads .row-4 ul {
      font-size: 18px;
      line-height: 2.5;
   }
}

@media screen and (max-width: 690px) {
   .p-ads .row-1 {
      padding: 35px 25px 32px;
   }

   .p-ads .row-1 .inner {
      flex-direction: column;
      padding: 20px 15px;
   }

   .p-ads .row-1 h2 {
      font-size: 32px;
      margin-right: 0;
      padding-top: 0;
   }

   .p-ads .row-1 h2 span {
      font-size: 18px;
   }

   .p-ads .row-1 .col {
      padding-top: 40px;
   }

   .p-ads .row-1 h3 {
      width: auto;
      font-size: 15px;
   }

   .p-ads .row-1 .txt {
      padding-top: 20px;
   }

   .p-ads .row-2 {
      padding: 0px 25px 100px;
   }

   .p-ads .row-2 .box {
      font-size: 10.5px;
      padding: 30px 0;
   }

   .p-ads .row-3 {
      padding: 0px 25px 64px;
   }

   .p-ads .row-3 .box {
      padding: 40px 26px;
   }

   .p-ads .row-3 .box:first-child {
      margin-top: 48px;
   }

   .p-ads .row-3 .box .no {
      font-size: 14px;
   }

   .p-ads .row-3 .box h3 {
      font-size: 24px;
      margin: 20px 0;
   }

   .p-ads .row-3 .box .txt {
      font-size: 10px;
      line-height: 2.2;
   }

   .p-ads .row-4 {
      height: 540px;
      padding: 60px 25px;
   }

   .p-ads .row-4 .txt {
      font-size: 11px;
   }

   .p-ads .row-4 ul {
      font-size: 12px;
      line-height: 2;
      padding: 20px 0 0;
   }

   body.en .p-ads .row-2 .box {
      padding: 30px 20px;
   }
}

/*=============================================
 * プライバシーポリシー
*=============================================*/
.p-privacypolicy {
   background: #135fc1;
   color: #fff;
   padding: 85px 40px 104px;
}

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

.p-privacypolicy h2 {
   font-size: 36px;
   padding-bottom: 64px;
   text-align: center;
}

.p-privacypolicy .txt {
   width: 80%;
   font-size: 14px;
   letter-spacing: 0.08em;
   line-height: 2.50;
   margin: 0 auto;
}

.p-privacypolicy .txt h3 {
   font-size: 20px;
   letter-spacing: 0.06em;
   line-height: 1.6;
   margin: 60px 0px 10px 0px;
}

.p-privacypolicy .txt p {
   font-family: var(--s-font-72b12393);
   margin: 10px 0;
}

@media screen and (max-width: 840px) {
   .p-privacypolicy {
      padding-bottom: 80px;
   }

   .p-privacypolicy .txt {
      width: 100%;
   }
}

@media screen and (max-width: 690px) {
   .p-privacypolicy {
      padding: 50px 36px 60px;
   }

   .p-privacypolicy h2 {
      font-size: 20px;
      padding-bottom: 32px;
   }

   .p-privacypolicy .txt {
      width: 100%;
      font-size: 10px;
   }

   .p-privacypolicy .txt h3 {
      font-size: 16px;
   }
}

/*=============================================
 * Mailform
*=============================================*/
.mailform {
   background-color: #135fc1ff;
   color: #fff;
   font-family: var(--s-font-72b12393);
   font-size: 15px;
   padding: 53px 40px 128px;
}

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

.mailform h2 {
   font-size: 40px;
   text-align: center;
   padding-bottom: 32px;
}

.mailform .desc {
   line-height: 2.5;
   text-align: center;
   padding-bottom: 64px;
}

.mailform .wpcf7-form {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.mailform .form-row {
   display: grid;
   grid-template-columns: 31% 1fr;
   align-items: flex-start;
   gap: 32px;
}

.mailform .form-row .caption {
   display: flex;
   align-items: flex-start;
   gap: 4px;
}

.mailform .form-row .caption span {
   font-size: 14px;
}

.mailform .form-row .input {
   font-size: 16px;
}

.mailform .link a {
   text-decoration: underline;
}

.mailform .link a:hover {
   text-decoration: none;
}

.mailform .form-submit {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
}

.mailform .form-submit input,
.mailform .form-submit a {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   cursor: pointer;
}

.mailform .form-submit .wpcf7-spinner {
   display: none;
}

.mailform .form-submit p {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 50px;
   border-radius: 4px;
   background-color: #333;
   color: #fff;
   font-size: 16px;
   box-sizing: border-box;
   position: relative;
   transition: all 0.3s linear;
}

.mailform .form-submit p:hover {
   background-color: #000;
   color: #fff;
   opacity: 1;
}

.mailform .form-submit .btn-back {
   background-color: #086BEB;
}

.mailform.thanks {
   text-align: center;
}

.mailform.thanks .txt {
   line-height: 2;
}

.mailform.thanks .txt p:not(:last-child) {
   padding-bottom: 32px;
}

.mailform.thanks .button {
   padding-top: 32px;
}

@media screen and (max-width: 840px) {
   .mailform .form-row {
      grid-template-columns: 1fr;
      gap: 12px;
   }
}

@media screen and (max-width: 767px) {
   .mailform {
      font-size: 14px;
      padding: 50px 16px 64px;
   }

   .mailform h2 {
      font-size: 20px;
      padding-bottom: 24px;
   }

   .mailform .desc {
      font-size: 10px;
      padding-bottom: 32px;
   }

   .mailform .wpcf7-form {
      gap: 24px;
   }

   .mailform .form-row .input {
      font-size: 14px;
   }

   .mailform .form-submit p {
      height: 35px;
      font-size: 12px;
   }

   .mailform.thanks {
      font-size: 12px;
   }

   .mailform.thanks .txt {
      text-align: justify;
   }

   .mailform.thanks .txt p:not(:last-child) {
      padding-bottom: 24px;
   }

   .mailform.thanks .button {
      padding-top: 24px;
   }
}

/*=============================================
 * NEWS・実績
 *=============================================*/
.pt-case {
   padding: 100px 40px;
}

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

.pt-case h2 {
   font-size: 36px;
   padding-bottom: 64px;
   text-align: center;
}

@media screen and (max-width: 690px) {
   .pt-case {
      padding: 50px 20px;
   }

   .pt-case h2 {
      font-size: 20px;
      padding-bottom: 32px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
.pt-detail {
   position: relative;
   padding: 75px 40px 100px;
}

.pt-detail .inner {
   width: 100%;
   max-width: 1009px;
   margin: 0 auto;
   padding: 0;
}

.pt-detail-meta {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 80px 40px;
   border-bottom: 1px solid #ddd;
}

.pt-detail-no {
   color: #6c6c6c;
   font-family: var(--s-font-30b67767);
   font-size: 36px;
   font-weight: 500;
   letter-spacing: normal;
   line-height: 1.20;
   text-transform: uppercase;
}

.pt-detail-title {
   color: #444;
   font-size: 64px;
   font-weight: 500;
   letter-spacing: normal;
   line-height: 1.20;
   text-align: left;
}

.pt-detail-title-sub {
   color: #444;
   font-size: 36px;
   letter-spacing: normal;
   line-height: 1.20;
   text-align: left;
}

.pt-detail-box {
   display: flex;
   flex-wrap: wrap;
   gap: 0 40px;
   padding: 80px 40px;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 400;
   line-height: 2;
   letter-spacing: 0.03em;
}

.pt-detail-box .txt,
.pt-detail-box figure {
   width: calc(50% - 20px);
	font-family: 'Noto Sans JP', sans-serif;
}

.pt-detail-box figcaption {
   text-align: right;
   font-size: 16px;
   padding-top: 10px;
}

.pt-detail-content {
   font-family: var(--s-font-ec920c82);
   font-size: 19px;
   line-height: 1.8;
}

.pt-detail-content h3 {
	font-family: 'Noto Sans JP', sans-serif;
   color: #3335ff;
   font-weight: bold;
   font-size: 22px;
   margin-bottom: 20px;
	margin-top:90px;
}

.pt-detail-content h4 {
	font-family: 'Noto Sans JP', sans-serif;
   font-size: 16px;
   margin-bottom: 50px;
}

.pt-detail-content h5 {
   font-family: 'Noto Sans JP', sans-serif;
   margin-bottom: 10px;
}

.pt-detail-content ul li {
   margin: 10px 0px 50px 0px;
}

.pt-detail-content mark {
   font-weight: 900;
   background-image: linear-gradient(#fffa00, #fffa00);
   background-size: 100% 20%;
   background-repeat: no-repeat;
   background-position: left bottom 15%;
   background-color: transparent;
}

.pt-detail-content>p,
.pt-detail-content .wp-block-image {
   margin: 10px 0px 90px 0px;
}

.pt-detail-content>p:last-child,
.pt-detail-content .wp-block-image:last-child {
   margin-bottom: 0;
}

.pt-detail-content .wp-caption {
   width: auto !important;
   text-align: center;
}

.pt-detail-content .wp-caption-text {
   text-align: center;
   padding-top: 10px;
}

@media screen and (max-width: 690px) {
   .pt-detail {
      padding: 45px 20px 100px;
   }

   .pt-detail-meta {
      padding: 40px 16px;
   }

   .pt-detail-no {
      font-size: 14px;
   }

   .pt-detail-title {
      font-size: 28px;
   }

   .pt-detail-title-sub {
      font-size: 24px;
   }

   .pt-detail-box {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 40px 16px;
      font-size: 15px;
   }

   .pt-detail-box .txt {
      width: 100%;
   }

   .pt-detail-box figure {
      width: 80%;
   }

   .pt-detail-box figcaption {
      text-align: center;
      font-size: 12px;
   }

   .pt-detail-content {
      font-size: 16px;
   }

   .pt-detail-content h3 {
      font-size: 18px;
   }

   .pt-detail-content ul {
      font-size: 20px;
   }
}

.pt-detail-related {
   padding: 0 40px 100px;
}

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

.pt-detail-related h2 {
   background: var(--s-color-48b8d450);
   color: #fff;
   width: 50%;
   height: 50px;
   margin: 0 auto;
   font-family: var(--s-font-678048d5);
   font-size: 35px;
   line-height: 50px;
   text-align: center;
}

.pt-detail-related .box {
   display: flex;
   justify-content: center;
   gap: 30px;
   padding-top: 50px;
}

.pt-detail-related .box .col {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: calc(33.33% - 20px);
   max-width: 375px;
}

.pt-detail-related .box .col:hover {
   opacity: 0.7;
}

.pt-detail-related .box figure {
   width: 100%;
   padding-top: 65.6%;
   position: relative;
   border-radius: 10px;
   overflow: hidden;
}

.pt-detail-related .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.pt-detail-related .box h3 {
   color: #333;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 500;
   font-size: 24px;
}

.pt-detail-related .box .tag {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 500;
   font-size: 16px;
}

.pt-detail-related .box .txt {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 500;
   font-size: 20px;
}

@media screen and (max-width: 690px) {
   .pt-detail-related {
      padding: 0 16px 100px;
   }

   .pt-detail-related h2 {
      width: auto;
      max-width: max-content;
      font-size: 20px;
      padding: 0 20px;
   }

   .pt-detail-related .box {
      flex-direction: column;
   }

   .pt-detail-related .box .col {
      width: 100%;
      max-width: 100%;
   }

   .pt-detail-related .box .txt {
      font-size: 14px;
   }
}