@charset "UTF-8";

/* =============================================
* HOME
* ============================================= */
#mv {
   position: relative;
}

#mv:before {
   content: '';
   width: 100%;
   padding-top: 100%;
   background: url("../img/top/mv-bg.png") no-repeat center top/cover;
   position: absolute;
   top: -100px;
   left: 0;
}

#mv .slider .slide-item {
   -webkit-mask: url('../img/top/mv-mark.png') no-repeat center / 100% auto;
   mask: url('../img/top/mv-mark.png') no-repeat center / 100% auto;
   width: 100%;
   padding-top: 39.5vw;
   position: relative;
}

#mv .slider .slide-item img {
   position: absolute;
   top: 0;
   left: 0;
}

#mv .slider .slick-dots {
   justify-content: center;
   padding-top: 45px;
}

#mv .deco {
   width: 23.5%;
   max-width: 452px;
   position: absolute;
   top: 21.8vw;
   right: 9.6%;
}

#mv h2 {
   width: 36.7%;
   max-width: 705px;
   position: absolute;
   top: 37vw;
   left: 3%;
}

#mv .scroll-down {
   width: 56px;
   margin: 6vw auto 0;
   cursor: pointer;
   text-align: center;
   line-height: 1;
   transition: 0.3s;
}

#mv .scroll-down dd {
   width: 10px;
   margin: 0 auto;
   padding-top: 20px;
   animation: arrowmove 1s ease-in-out infinite;
}

#mv .scroll-down:hover {
   opacity: 0.7;
}

@keyframes arrowmove {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(10px);
   }

   00% {
      transform: translateY(0);
   }
}

@media screen and (max-width: 1200px) {
   #mv:before {
      top: 0;
   }

   #mv .scroll-down {
      margin-top: 10vw;
   }
}

@media screen and (max-width: 1023px) {
   #mv h2 {
      top: 30vw;
   }
}

@media screen and (max-width: 767px) {
   #mv h2 {
      width: 50%;
      top: 27vw;
   }

   #mv .slider .slick-dots {
      padding-top: 8vw;
   }

   #mv .scroll-down {
      margin-top: 12vw;
   }
}

/* -- -- */
#top__message {
   padding: 80px 0 25px;
}

#top__message .wrap {
   padding-top: 60px;
}

#top__message .deco {
   width: 158px;
   position: absolute;
   top: 0;
   left: 45px;
}

#top__message .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 50px;
   padding-top: 86px;
}

#top__message .box h3 {
   line-height: 45px;
}

#top__message .box .txt {
   max-width: 470px;
   padding-top: 35px;
}

#top__message .box .button {
   padding-top: 45px;
}

@media screen and (max-width: 1023px) {
   #top__message {
      padding-top: 0;
   }

   #top__message .deco {
      width: 120px;
      left: 0;
   }

   #top__message .box {
      grid-template-columns: 1fr;
   }

   #top__message .box .txt {
      max-width: 100%;
   }

   #top__message .box h3,
   #top__message .box .button {
      text-align: center;
   }
}

@media screen and (max-width: 767px) {
   #top__message .wrap {
      padding-top: 40px;
   }

   #top__message .deco {
      width: 60px;
      top: -40px;
      left: 10px;
   }

   #top__message .box {
      gap: 30px;
      padding-top: 30px;
   }

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

   #top__message .box .button {
      padding-top: 30px;
   }
}

/* -- -- */
#top__service {
   padding-bottom: 100px;
}

#top__service .wrap {
   display: flex;
   gap: 50px;
   padding-top: 200px;
}

#top__service .deco {
   width: 108px;
   position: absolute;
   top: 0;
   right: 135px;
}

#top__service .col {
   width: 542px;
}

#top__service h2 {
   text-align: left;
}

#top__service h2 img {
   margin: 0;
}

#top__service h2 span {
   padding: 10px 0 0 10px;
}

#top__service .txt {
   padding-top: 55px;
}

#top__service .button {
   padding-top: 65px;
}

#top__service .photo {
   width: 605px;
}

@media screen and (max-width: 1023px) {
   #top__service .wrap {
      flex-direction: column;
   }

   #top__service .photo,
   #top__service .col {
      width: 100%;
   }

   #top__service h2,
   #top__service .button {
      text-align: center;
   }

   #top__service h2 img {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   #top__service {
      padding-bottom: 50px;
   }

   #top__service .deco {
      width: 50px;
      right: 10px;
   }

   #top__service .wrap {
      gap: 30px;
      padding-top: 40px;
   }

   #top__service .txt {
      padding-top: 20px;
   }

   #top__service .button {
      padding-top: 30px;
   }
}

/* -- -- */
#top__safety {
   position: relative;
}

#top__safety .photo-l {
   width: 36.25%;
   max-width: 696px;
   position: absolute;
   top: 0;
   left: 0;
}

#top__safety .wrap {
   padding-top: 160px;
}

#top__safety .deco {
   width: 154px;
   position: absolute;
   top: 210px;
   right: 0;
}

#top__safety h3 {
   line-height: 50px;
   padding-top: 25px;
}

#top__safety .block {
   padding: 90px 0 210px;
}

#top__safety .block .box {
   display: grid;
   grid-template-columns: 1fr 412px;
   align-items: center;
   gap: 60px;
   min-height: 300px;
   background-color: #fff;
   border: 4px solid #EE0000;
   border-radius: 10px;
   padding: 16px 46px;
   position: relative;
}

#top__safety .block hr {
   width: 0;
   height: 72px;
   border-top: 0;
   border-left: 4px solid #EE0000;
   margin: 0 auto;
}

#top__safety .block h4 {
   display: grid;
   grid-template-columns: 92px 1fr;
   align-items: center;
   gap: 16px;
}

#top__safety .block .txt {
   padding: 20px 0 0 30px;
}

#top__safety .block .txt dl {
   display: grid;
   grid-template-columns: 35% 1fr;
   align-items: center;
   gap: 10px;
   line-height: 24px;
}

#top__safety .block .txt dl+dl {
   padding-top: 4px;
}

#top__safety .block .txt dl dt {
   display: grid;
   grid-template-columns: 50px 1fr;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 16px;
}

#top__safety .block .txt dl dt:after {
   content: '';
   display: block;
   border-top: 4px dotted #EE0000;
}

@media screen and (max-width: 1200px) {
   #top__safety .block .box {
      grid-template-columns: 1fr 35%;
      gap: 30px;
      padding: 26px;
   }
}

@media screen and (max-width: 1023px) {
   #top__safety .deco {
      width: 120px;
   }

   #top__safety .block .box {
      grid-template-columns: 1fr;
   }

   #top__safety .block .box figure {
      max-width: 412px;
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   #top__safety .photo-l {
      width: 70%;
      position: static;
   }

   #top__safety .deco {
      width: 60px;
      top: -40px;
   }

   #top__safety .wrap {
      padding-top: 20px;
   }

   #top__safety h3 {
      font-size: 18px;
      line-height: 36px;
      padding-top: 30px;
   }

   #top__safety .block {
      padding: 30px 0 50px;
   }

   #top__safety .block .box {
      gap: 20px;
      padding: 26px 16px;
   }

   #top__safety .block h4 {
      grid-template-columns: 1fr;
      gap: 10px;
      text-align: center;
      font-size: 18px;
   }

   #top__safety .block h4 img {
      max-width: 92px;
      margin: 0 auto;
   }

   #top__safety .block .txt {
      padding: 15px 0 0;
   }

   #top__safety .block .txt dl {
      grid-template-columns: 28% 1fr;
   }

   #top__safety .block hr {
      height: 40px;
   }
}

/* -- -- */
#top__recruit {
   position: relative;
}

#top__recruit .row {
   position: relative;
}

#top__recruit .row:before {
   content: '';
   width: 100%;
   padding-top: 163.6%;
   background: url("../img/top/safety-bg.png") no-repeat center top/cover;
   position: absolute;
   bottom: calc(100% - 40px);
   left: 0;
   z-index: -1;
}

#top__recruit .photos {
   display: flex;
   padding-bottom: 195px;
}

#top__recruit h2 img {
   height: 57px;
}

#top__recruit h3 {
   line-height: 50px;
   padding-top: 56px;
}

#top__recruit .txt {
   padding-top: 56px;
}

#top__recruit .txt p+p {
   padding-top: 56px;
}

#top__recruit .button {
   padding-top: 56px;
}

#top__recruit .deco {
   border-bottom: 5px solid #EE0000;
   padding: 95px 0 0;
   overflow: hidden;
}

#top__recruit .deco img {
   display: block;
   max-width: 185px;
   margin-bottom: -2px;
   animation: marquee 5s linear infinite;
   position: relative;
}

@keyframes marquee {
   0% {
      left: -20%;
   }

   100% {
      left: 100%;
   }
}

@media screen and (max-width: 767px) {
   #top__recruit .photos {
      display: block;
      padding-bottom: 80px;
   }

   #top__recruit .row:before {
      bottom: calc(100% - 30px);
   }

   #top__recruit h2 img {
      height: 45px;
   }

   #top__recruit h3 {
      line-height: 36px;
      padding-top: 30px;
   }

   #top__recruit .txt {
      text-align: justify;
      padding-top: 30px;
   }

   #top__recruit .txt p+p {
      padding-top: 30px;
   }

   #top__recruit .button {
      padding-top: 30px;
   }

   #top__recruit .deco {
      padding: 50px 0 0;
   }

   #top__recruit .deco img {
      max-width: 100px;
   }
}

/*=============================================*
* 会社案内
*=============================================*/
#about {
   padding-bottom: 160px;
}

#about .tb-style {
   padding-top: 90px;
}

#about .tb-style dl dd dl {
   display: grid;
   grid-template-columns: 115px 1fr 142px;
   align-items: center;
}

#about .tb-style dl dd dl+dl {
   border-top: 1px dashed #D6D6D6;
   margin-top: 20px;
   padding-top: 20px;
}

#about .tb-style dl dd dl dt {
   color: #404040;
   font-weight: 600;
   background-color: #F7F7F7;
   text-align: center;
   border-left: 8px solid #EE0000;
   padding: 18px 0;
}

#about .tb-style dl dd dl dd:nth-child(2) {
   padding: 0 35px;
}

#about .tb-style dl dd dl dd:nth-child(3) a {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 30px;
   background-color: #EE0000;
   color: #fff;
   font-weight: 700;
   font-size: 14px;
   position: relative;
   padding: 6px 10px 6px 0;
}

#about .tb-style dl dd dl dd:nth-child(3) a:after {
   content: '';
   width: 18px;
   height: 18px;
   background: url("../img/common/icon-blank.png") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
}

#about .tb-style dl dd dl dd:nth-child(3) a:hover {
   background-color: #000;
   opacity: 1;
}

#about .tb-style dl .list-dot {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
}

#about .list-vehicle {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px 80px;
   text-align: center;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   padding-top: 120px;
}

#about .list-vehicle dt img {
   mix-blend-mode: multiply;
}

#about .list-vehicle dd {
   padding-top: 8px;
}

#about .list-vehicle dd small {
   font-size: 14px;
}

@media screen and (max-width: 1023px) {
   #about .tb-style dl dd dl dd:nth-child(2) {
      padding: 0;
   }

   #about .list-vehicle {
      gap: 30px;
   }
}

@media screen and (max-width: 767px) {
   #about {
      padding-bottom: 80px;
   }

   #about .tb-style {
      padding-top: 30px;
   }

   #about .tb-style dl dd dl {
      display: flex;
      flex-wrap: wrap;
   }

   #about .tb-style dl dd dl dt {
      width: 115px;
      box-sizing: border-box;
      order: 1;
   }

   #about .tb-style dl dd dl dd:nth-child(3) {
      width: 142px;
      order: 2;
   }

   #about .tb-style dl dd dl dd:nth-child(2) {
      width: 100%;
      order: 3;
   }

   #about .tb-style dl .list-dot {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0;
   }

   #about .list-vehicle {
      grid-template-columns: 1fr;
      padding-top: 50px;
   }
}

/*=============================================*
* 事業内容
*=============================================*/
#transportation {
   position: relative;
   padding-bottom: 270px;
}

#transportation h2 img {
   height: 61px;
}

#transportation .desc {
   font-size: 16px;
   padding: 70px 0 55px;
}

#transportation .box {
   display: flex;
   align-items: center;
   gap: 90px;
   padding-top: 75px;
}

#transportation .box figure {
   width: 552px;
}

#transportation .box .col {
   width: 310px;
}

#transportation .box .txt {
   padding-top: 30px;
}

@media screen and (max-width: 1023px) {
   #transportation .box {
      gap: 40px;
   }
}

@media screen and (max-width: 767px) {
   #transportation {
      padding-bottom: 80px;
   }

   #transportation h2 img {
      height: 35px;
   }

   #transportation .desc {
      padding: 20px 0 0;
   }

   #transportation .box {
      flex-direction: column;
      gap: 30px;
      padding-top: 50px;
   }

   #transportation .box figure,
   #transportation .box .col {
      width: 100%;
      text-align: center;
   }
}

/*=============================================*
* Mailform
*=============================================*/
.mailform {
   position: relative;
}

.mailform .form-wrap {
   padding: 0 90px 120px;
}

.mailform .form-row {
   display: grid;
   grid-template-columns: 300px 1fr;
   align-items: flex-start;
   gap: 15px;
   padding-bottom: 50px;
}

.mailform .caption {
   display: flex;
   align-items: center;
   gap: 45px;
   font-size: 16px;
   padding: 12px 0 0;
}

.mailform .caption .required {
   width: 42px;
   background-color: #EE0000;
   color: #fff;
   font-weight: 400;
   font-size: 14px;
   line-height: 22px;
   text-align: center;
   border-radius: 5px;
}

.mailform .caption .required._non {
   background: #404040;
}

.mailform .form-pp {
   border: 1px solid #BABABA;
   padding: 30px;
}

.mailform .form-pp h3 {
   font-weight: 500;
}

.mailform .form-pp .txt {
   overflow-y: auto;
   height: 200px;
   line-height: 35px;
   margin-top: 35px;
}

.mailform .form-pp .txt p+p {
   padding-top: 35px;
}

.mailform .result_txt {
   display: block;
   word-break: break-all;
   white-space: pre-wrap;
}

.mailform .form-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding-top: 120px;
}

.mailform .form-btn p {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 190px;
   height: 64px;
   background: #EE0000;
   color: #fff;
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0;
   line-height: 28px;
   text-transform: uppercase;
   text-align: center;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: 1;
   border-radius: 50px;
   transition: all 0.3s;
}

.mailform .form-btn p:after {
   content: '';
   width: 18px;
   height: 18px;
   background: url("../img/common/btn-arrow.png") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

.mailform .form-btn p:hover {
   background-color: #000;
}

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

.mailform .form-btn .btn-prev {
   background: #ccc;
   color: #000;
}

.mailform .form-btn .btn-prev:hover {
   color: #fff;
}

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

.mailform.confirm .form-row .caption {
   padding: 0;
}

@media screen and (max-width: 1023px) {
   .mailform .form-wrap {
      padding: 0 30px 120px;
   }

   .mailform .form-row {
      grid-template-columns: 250px 1fr;
   }

   .mailform .caption {
      gap: 20px;
   }
}

@media screen and (max-width: 767px) {
   .mailform .form-wrap {
      padding: 0 20px 30px;
   }

   .mailform .form-row {
      grid-template-columns: 1fr;
      gap: 10px;
      padding-bottom: 30px;
   }

   .mailform .caption {
      gap: 10px;
      padding: 0;
   }

   .mailform .form-pp {
      padding: 10px;
   }

   .mailform .form-pp .txt {
      line-height: 28px;
      margin-top: 20px;
   }

   .mailform .form-pp .txt p+p {
      padding-top: 20px;
   }

   .mailform .form-pp .checkbox {
      text-align: left;
   }

   .mailform .form-pp .checkbox .wpcf7-checkbox {
      font-size: 14px;
   }

   .mailform .form-btn {
      padding-top: 30px;
   }
}

/* -- -- */
#thanks {
   text-align: center;
   padding-bottom: 50px;
}

#thanks .txt p+p {
   padding-top: 30px;
}

#thanks .button {
   text-align: center;
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   #thanks {
      padding-bottom: 0;
   }

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

   #thanks .txt p+p {
      padding-top: 20px;
   }

   #thanks .button {
      padding-top: 40px;
   }
}

/*=============================================*
* 採用情報
*=============================================*/
#requirements {
   padding-bottom: 250px;
}

#requirements .tb-style {
   padding-top: 140px;
}

@media screen and (max-width: 767px) {
   #requirements {
      padding-bottom: 80px;
   }

   #requirements h2 img {
      height: 35px;
   }

   #requirements .tb-style {
      padding-top: 30px;
   }
}

/* -- -- */
#faq {
   background-color: #EE0000;
   padding: 80px 0 120px;
   position: relative;
}

#faq:before {
   content: '';
   width: 100%;
   background-color: #fff;
   position: absolute;
   top: 200px;
   bottom: 120px;
   left: 0;
}

#faq h2 {
   padding-bottom: 32px;
}

#faq .box-qa {
   padding: 125px 0;
}

#faq .box-qa dl+dl {
   padding-top: 24px;
}

#faq .box-qa dl dt {
   display: grid;
   grid-template-columns: 42px 1fr 12px;
   align-items: center;
   gap: 10px;
   background-color: #404040;
   color: #fff;
   font-weight: 600;
   font-size: 18px;
   line-height: 26px;
   padding: 19px 30px;
   position: relative;
   cursor: pointer;
}

#faq .box-qa dl dt:before {
   content: '';
   width: 42px;
   height: 42px;
   background: url("../img/common/icon-q.png") no-repeat center top/cover;
   display: block;
}

#faq .box-qa dl dt:after {
   content: '';
   width: 12px;
   height: 8px;
   background: url("../img/common/arrow-down.png") no-repeat center top/100% auto;
   display: block;
   transition: all 0.3s;
}

#faq .box-qa dl dd {
   display: none;
   line-height: 26px;
   position: relative;
   padding: 25px 80px 50px;
}

#faq .box-qa dl dd:before {
   content: '';
   width: 42px;
   height: 42px;
   background: url("../img/common/icon-a.png") no-repeat center top/cover;
   position: absolute;
   top: 25px;
   left: 30px;
}

#faq .box-qa dl.active dt:after {
   transform: rotate(-180deg);
}

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

   #faq:before {
      top: 145px;
      bottom: 50px;
   }

   #faq h2 {
      padding-bottom: 20px;
   }

   #faq .box-qa {
      padding: 50px 0;
   }

   #faq .box-qa dl+dl {
      padding-top: 15px;
   }

   #faq .box-qa dl dt {
      grid-template-columns: 30px 1fr 12px;
      font-size: 15px;
      padding: 15px;
   }

   #faq .box-qa dl dt:before {
      width: 30px;
      height: 30px;
   }

   #faq .box-qa dl dd {
      padding: 15px 15px 15px 60px;
   }

   #faq .box-qa dl dd:before {
      width: 30px;
      height: 30px;
      top: 15px;
      left: 15px;
   }
}

/* -- -- */
#application__form {
   position: relative;
   padding: 180px 0 170px;
}

#application__form:before {
   content: '';
   width: 100%;
   padding-top: 127.3%;
   background: url("../img/top/safety-bg.png") no-repeat center top/cover;
   position: absolute;
   bottom: calc(100% - 215px);
   left: 0;
   z-index: -1;
}

#application__form .desc {
   padding-top: 60px;
}

#application__form .form-wrap {
   background-color: #F7F7F7;
   margin-top: 110px;
   padding-top: 120px;
}

#application__form .form-btn {
   padding-top: 80px;
}

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

   #application__form:before {
      bottom: calc(100% - 75px);
   }

   #application__form .desc {
      padding-top: 20px;
   }

   #application__form .form-wrap {
      margin-top: 50px;
      padding-top: 30px;
      padding-bottom: 50px;
   }

   #application__form .form-btn {
      padding-top: 20px;
   }
}

/*=============================================*
* お問い合わせ
*=============================================*/
#inquiry {
   padding-bottom: 210px;
}

#inquiry:before {
   content: '';
   width: 100%;
   padding-top: 138.1%;
   background: url("../img/top/safety-bg.png") no-repeat center top/cover;
   position: absolute;
   bottom: -190px;
   left: 0;
   z-index: -1;
}

#inquiry .wpcf7 input:not([type="checkbox"], [type="radio"]),
#inquiry .wpcf7 textarea {
   border-color: #F7F8F8;
   background-color: #F7F8F8;
}

#inquiry .tel {
   text-align: center;
   padding-bottom: 230px;
}

#inquiry .tel h3 {
   width: 125px;
   margin: 0 auto;
   padding-bottom: 85px;
}

#inquiry .tel .box {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 156px;
   background-color: #EE0000;
   color: #fff;
}

#inquiry .tel .box a {
   display: inline-block;
   font-weight: 600;
}

#inquiry .tel .box time {
   display: block;
   font-size: 16px;
   line-height: 24px;
   padding-top: 12px;
}

#inquiry h2 {
   padding-bottom: 120px;
}

#inquiry .form-wrap {
   background-color: #fff;
}

#inquiry.confirm .form-wrap {
   padding-top: 120px;
}

@media screen and (max-width: 767px) {
   #inquiry {
      padding-bottom: 50px;
   }

   #inquiry:before {
      bottom: -150px;
   }

   #inquiry .tel {
      padding-bottom: 50px;
   }

   #inquiry .tel h3 {
      width: 80px;
      padding-bottom: 30px;
   }

   #inquiry .tel .box {
      height: 100px;
      padding: 0 20px;
   }

   #inquiry .tel .box time {
      font-size: 14px;
      line-height: 14px;
      padding-top: 0;
   }

   #inquiry h2 {
      padding-bottom: 50px;
   }

   #inquiry.confirm .form-wrap {
      padding-top: 30px;
   }
}

/*=============================================*
* 個人情報保護方針
*=============================================*/
#privacy {
   padding-bottom: 30px;
}

#privacy p+p {
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   .page-id-91 #kv .page-title img {
      height: 35px;
   }

   #privacy {
      padding-bottom: 0;
   }

   #privacy p+p {
      padding-top: 20px;
   }
}

/*=============================================*
* Post type
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   position: relative;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi span,
.wp-pagenavi a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: #b7d9fb;
   color: #fff;
   border-radius: 50%;
   font-weight: 700;
   font-size: 16px;
   letter-spacing: 0;
   padding-bottom: 2px;
   box-sizing: border-box;
}

.wp-pagenavi a:hover {
   background-color: #0071bc;
   opacity: 1;
}

.wp-pagenavi .current {
   pointer-events: none;
   background-color: #0071bc;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
   background: transparent;
   color: #0071bc;
   border-radius: 50%;
   position: relative;
   border-bottom: 0;
   text-align: center;
}

.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover {
   background-color: #0071bc;
   color: #fff;
   opacity: 1;
}

@media screen and (max-width: 767px) {
   .wp-pagenavi .previouspostslink {
      margin-right: 0px;
   }

   .wp-pagenavi .nextpostslink {
      margin-left: 0px;
   }
}

/* -- -- */
.sidebar h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #0071bc;
}

.sidebar h3:after {
   content: "";
   flex: 1 0 0;
   border-top: 1px solid;
}

.sidebar .list {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 10px;
   padding-top: 15px;
}

.sidebar .list a {
   display: inline-block;
   background-color: #fff;
   border: 1px solid #0071bc;
   color: #0071bc;
   border-radius: 50px;
   padding: 0 10px;
}

.sidebar .list a:hover,
.sidebar .list a.current {
   background-color: #0071bc;
   color: #fff;
}

.sidebar .list a[aria-current='page'] {
   background-color: #0071bc;
   color: #fff;
}

.sidebar .category {
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   .sidebar .list {
      padding-top: 10px;
   }

   .sidebar .category {
      padding-top: 30px;
   }
}

/* -- -- */
.article__list .item {
   margin-bottom: 20px;
}

.article__list .item:last-child {
   margin-bottom: 0;
}

.article__list .item a {
   display: grid;
   grid-template-columns: 75% 25%;
   border-radius: 20px;
   padding: 20px 30px;
   background-color: #f0f0f0;
}

.article__list .item a:hover {
   background-color: #eaf8fe;
   opacity: 1;
}

.article__list .txt {
   color: #0071bc;
   padding-right: 20px;
}

.article__list time {
   display: inline-block;
   vertical-align: middle;
   color: #aaa;
   line-height: 20px;
   border-radius: 50px;
   padding-right: 10px;
}

.article__list .cat {
   display: inline-block;
   vertical-align: middle;
   background-color: #74b8f7;
   color: #fff;
   font-weight: 500;
   line-height: 20px;
   border-radius: 50px;
   padding: 0 10px;
}

.article__list .ttl {
   padding-top: 10px;
}

.article__list .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.article__list figure {
   width: 100%;
   padding-top: 66.66%;
   position: relative;
}

.article__list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 767px) {
   .article__list .item a {
      grid-template-columns: 1fr;
      gap: 20px;
      border-radius: 15px;
      padding: 20px;
   }

   .article__list .txt {
      padding-right: 0;
   }
}

/* -- -- */
.cpt-template {
   position: relative;
   padding: 100px 0 0;
}

.cpt-template .wrap {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 80px 7%;
}

.cpt-template .article__list {
   width: 65%;
   order: 1;
}

.cpt-template .sidebar {
   width: 28%;
   order: 2;
}

.cpt-template .wp-pagenavi {
   width: 100%;
   order: 3;
}

@media screen and (max-width: 767px) {
   .cpt-template {
      padding: 50px 0 0;
   }

   .cpt-template .wrap {
      gap: 50px;
   }

   .cpt-template .sidebar {
      width: 100%;
      order: 1;
   }

   .cpt-template .article__list {
      width: 100%;
      order: 2;
   }
}

/* -- -- */
#cpt-detail .contents {
   width: 65%;
   order: 1;
}

#cpt-detail .cate,
#cpt-detail time {
   display: inline-block;
   vertical-align: middle;
   font-weight: 500;
   font-size: 13px;
   line-height: 20px;
}

#cpt-detail time {
   font-weight: 500;
   padding-right: 10px;
}

#cpt-detail .cate a {
   display: inline-block;
   vertical-align: middle;
   background-color: #74b8f7;
   color: #fff;
   border-radius: 50px;
   padding: 0 10px;
}

#cpt-detail .the_title {
   padding-bottom: 20px;
}

#cpt-detail .thumbnail {
   padding-top: 40px;
}

#cpt-detail .the_content {
   padding-top: 40px;
}

#cpt-detail .the_content h2 {
   background-color: #F7F8F8;
   font-weight: 700;
   font-size: 26px;
   line-height: 36px;
   letter-spacing: 0;
   margin: 50px 0 30px;
   padding: 10px 20px;
}

#cpt-detail .the_content h3 {
   font-weight: 700;
   font-size: 22px;
   letter-spacing: 0;
   border-bottom: 2px solid #EE0000;
   margin: 50px 0 30px;
   padding: 0 0 10px;
}

#cpt-detail .the_content h4 {
   font-weight: 700;
   font-size: 20px;
   letter-spacing: 0;
   border-left: 5px solid #EE0000;
   margin: 50px 0 30px;
   padding: 0 0 0 15px;
}

#cpt-detail .the_content h2:first-child,
#cpt-detail .the_content h3:first-child,
#cpt-detail .the_content h4:first-child {
   margin-top: 0;
}

#cpt-detail .the_content h2+h3,
#cpt-detail .the_content h2+h4,
#cpt-detail .the_content h2+h5,
#cpt-detail .the_content h3+h4,
#cpt-detail .the_content h3+h5,
#cpt-detail .the_content h4+h5 {
   margin-top: 0;
}

#cpt-detail .the_content ul {
   list-style: disc;
   padding-left: 30px;
}

#cpt-detail .the_content ol {
   list-style: decimal;
   padding-left: 30px;
}

#cpt-detail .the_content a {
   text-decoration: underline;
}

#cpt-detail .the_content a:hover {
   text-decoration: none;
}

#cpt-detail .the_content p img {
   display: inline-block;
   vertical-align: top;
   margin-right: 20px;
}

#cpt-detail .the_content p img.aligncenter {
   display: block;
   margin: 0 auto;
}

#cpt-detail .the_content p img.alignright {
   display: block;
   margin-left: auto;
}

#cpt-detail .the_content p img:last-child {
   margin-right: 0;
}

#cpt-detail .the_content pre {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: flex-start;
   gap: 20px 66px;
}

#cpt-detail .post-bottom {
   width: 100%;
   order: 3;
}

#cpt-detail .post-nav {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 20px;
   padding-top: 60px;
}

#cpt-detail .post-nav a {
   display: block;
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;
}

#cpt-detail .post-nav .cat {
   display: inline-block;
   background-color: #1e8cca;
   color: #fff;
   padding: 0 10px;
}

#cpt-detail .post-nav .ttl {
   display: block;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 5px;
}

#cpt-detail .post-nav i {
   font-size: 35px;
   color: #aaa;
   position: absolute;
   top: 45%;
   transform: translateY(-50%);
}

#cpt-detail .post-nav .prev a {
   padding-left: 40px;
}

#cpt-detail .post-nav .prev a i {
   left: 0;
}

#cpt-detail .post-nav .next a {
   text-align: right;
   padding-right: 40px;
}

#cpt-detail .post-nav .next a i {
   right: 0;
}

#cpt-detail hr {
   border-top: 1px solid;
}

#cpt-detail .button {
   padding-top: 60px;
}

@media screen and (max-width: 1023px) {
   #cpt-detail .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img:last-child {
      margin: 0 auto;
   }

   #cpt-detail .other {
      gap: 30px;
   }

   #cpt-detail .other:before {
      top: 8%;
   }
}

@media screen and (max-width: 767px) {
   #cpt-detail .contents {
      width: 100%;
      order: 2;
   }

   #cpt-detail time {
      display: block;
   }

   #cpt-detail .the_content {
      padding-top: 30px;
   }

   #cpt-detail .the_content h2 {
      font-size: 22px;
   }

   #cpt-detail .the_content h3 {
      font-size: 20px;
   }

   #cpt-detail .the_content h4 {
      font-size: 18px;
   }

   #cpt-detail .the_content ul,
   #cpt-detail .the_content ol {
      padding-left: 15px;
   }

   #cpt-detail .the_content p img {
      display: block;
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img.alignright {
      margin: 0 auto 15px;
   }

   #cpt-detail .the_content p img:last-child {
      margin: 0 auto !important;
   }

   #cpt-detail .the_content pre {
      grid-template-columns: 1fr;
   }

   #cpt-detail .button {
      padding-top: 40px;
   }

   #cpt-detail .post-nav {
      padding-top: 30px;
   }
}