 :root {
   --blue: #1e90ff;
   --white: #ffffff;
   --primary: #0B2C3D;
   --primary-haft-oc: rgba(52, 235, 125, 0.5);
   --footer: rgba(47, 218, 115, 0.664);
   --primary-lighter: rgba(52, 235, 125, 0.335);
   --secondary: #1C6BB4;
   --gray: rgba(233, 233, 233, 0.856);
   --yellow-green: #dee24b;
   --dark-blue: #404d61;
   --top-btn: rgba(52, 235, 125, 0.6);
   --black-btn: rgb(0, 0, 0, 0.6);
   --black-hover-btn: rgb(0, 0, 0, 0.8);
   --primary-font: "メイリオ", "Meiryo", sans-serif;
   --primary-color: #603813;
   --ruler-bc: #96E3D4;
   --silver: #F5F5F5;
 }

 body {
   color: var(--primary-color);
   font-family: var(--primary-font);
 }

 /* footer */

 .tool-info ul {
   padding-left: 0 !important;
 }

 .none-td {
   text-decoration: none;
   color: #603813;
 }

 .humbager {
   display: block;
   position: absolute;
   left: 40px !important;
   top: 40px !important;
   z-index: 99;
 }

 .humbager.active.hide {
   left: 40px !important;
   top: 40px !important;
 }

 /* footer-end */

 .head-menu {
   object-fit: cover;
   width: 100%;
   min-height: 400px;
   display: table;
   margin: 0 auto;
   padding-top: 11px;
   /* position: relative; */
   /* background-image: url(../img/top-header-bg.png); */
   /* background-size: contain; */
   /* background-position: center; */
   /* background-position: center top 0; */
   /* background-repeat: repeat-x; */
   background-repeat: no-repeat;
   background-size: cover;
   /* left: -16px; */
   left: 0;
 }

 ol, ul {
   padding-left: 0 !important;
 }

 .list-menu {
   object-fit: cover;
   width: 100%;
   min-height: 132.17px;
   width: 1065.53px;
   width: 100%;
   max-width: 1065.53px;
   background-image: url(../img/list-menu.png);
   background-size: contain;
   background-position: center;
   background-position: center top 0;
   background-repeat: no-repeat;
   background-size: cover;
   display: table;
   margin: 0 auto;
 }

 .avatar {
   background-image: url(../img/avatar.png);
   background-size: contain;
   background-position: center;
   background-position: center top 0;
   background-repeat: no-repeat;
   display: table;
   margin: 0 auto;
   position: relative;
   top: 0;
   width: 355px;
   height: 254px;
 }

 /* .cont {
   max-height: 409px;
 } */

 .text-first {
   max-width: 740px;
   display: table;
   margin: 0 auto;
   font-family: var(--primary-font);
   font-size: 16px;
   letter-spacing: -0.5px;
 }

 .info-head-banner {
   padding-top: 10px;
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   font-size: 0;
   position: relative;
 }

 .row {
   margin-left: 0 !important;
   margin-right: 0 !important;
 }

 .title-img {
   display: table;
   margin: 0 auto;
 }

 .container-body {
   margin: 0;
 }

 .ct-complaints-primary {
   background-image: url(../img/pink-bg.png);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-position: center top 0;
   position: relative;
   width: 740px;
   min-height: 370px;
   display: table;
   margin: 0 auto;
 }

 .ct-complaints-primary__title {
   font-family: var(--primary-font);
   font-weight: bold;
   font-size: 24px;
   text-align: center;
   color: var(--primary-color);
   margin-top: 98px;
   margin-bottom: 20px;
 }

 .ct-complaints-primary__body {
   font-family: var(--primary-font);
   font-size: 16px;
   width: 100%;
   max-width: 600px;
   display: table;
   margin: 0 auto 80px;
   padding-top: 16px;
   color: var(--primary-color);
 }

 .ct-complaints-primary__body .row .col-5 {
   padding-left: 27px;
   line-height: 34px;
   position: relative;
 }

 .ct-complaints-primary__body .row .col-5::after {
   content: '';
   position: absolute;
   right: 4px;
   top: 4px;
   height: 98%;
   width: 1px;
   background-color: var(--primary-color);
 }

 .ct-complaints-primary__body .row .col-7 {
   padding-left: 37px;
 }

 .ct-complaints-primary__body .row .col-7 .ct-complaints-primary__body-first {
   line-height: 34px;
 }

 .ct-complaints-primary__body .row .col-7 .ct-complaints-primary__body-second {
   padding-top: 4px;
 }

 .ct-silver {
   padding: 57px 0 60px;
   background-color: var(--silver);
   min-height: 620px;
 }

 .ct-method {
   max-width: 740px;
   margin: 0 auto;
 }

 .ct-method__title {
   color: var(--primary-color);
   font-weight: bold;
   font-size: 24px;
   text-align: center;
 }

 .step__title {
   text-align: center;
   font-size: 20px;
   padding-top: 31px;
   padding-bottom: 5px;
 }

 .step__details {
   padding-top: 12px;
   font-size: 16px;
   letter-spacing: 1.5px;
   position: relative;
   padding-bottom: 45px;
 }

 .step__details::after {
   position: absolute;
   left: calc(50% - 15px);
   bottom: 0;
   content: '';
   background-image: url(../img/icon/icon1.png);
   background-size: contain;
   background-position: center;
   width: 30px;
   height: 16px;
   background-repeat: no-repeat;
   background-position: center top 0;
 }

 .ct-method__step .step:last-child .step__details::after {
   content: unset;
 }

 .ct-method__step .step:last-child .step__details {
   padding-bottom: 0;
 }

 .ct-list {
   min-height: 500px;
   padding: 60px 0 30px;
   max-width: 740px;
   margin: 0 auto;
 }

 .ct-list__title {
   font-family: var(--primary-font);
   font-weight: bold;
   font-size: 24px;
   text-align: center;
   color: var(--primary-color);
   margin-bottom: 19px;
 }

 .cpl-card {
   padding: 20px 0px;
   color: var(--primary-color);
   font-family: var(--primary-font);
 }

 .cpl-card__title {
   background-color: #FFEBEB;
   padding: 6px 10px 6px 20px;
   font-size: 20px;
   font-weight: bold;
   border-radius: 10px;
 }

 .cpl-card__description-time {
   color: var(--primary-color);
   font-weight: bold;
   font-size: 16px;
   padding-bottom: 20px;
 }

 .cpl-card__description {
   margin-top: 30px;
   color: var(--primary-color);
   font-family: var(--primary-font);
 }

 .cpl-card__description-time {
   padding-left: 20px;
   padding-top: 6px;
   padding-bottom: 7px;
   position: relative;
 }

 .cpl-card__description-time::after {
   position: absolute;
   content: '';
   left: 0;
   top: 0;
   padding-top: 6px;
   padding-bottom: 7px;
   background-color: var(--ruler-bc);
   width: 7px;
   height: 100%;
   border-radius: 25px;
 }

 .cpl-card__description-update-time {
   font-size: 12px;
   padding-top: 3px;
   padding-left: 20px;
 }

 .cpl-card__description-free-entry-f, .no-record {
   font-size: 16px;
   padding-top: 3px;
   padding-left: 20px;
   padding-right: 20px;
 }

 .cpl-card__description-free-entry-f {
   padding-top: 13px;
 }

 .cpl-card__description-time-content {
   font-size: 16px;
   padding-top: 10px;
   padding-left: 20px;
 }

 .active__title {
   font-size: 16px;
   font-weight: bold;
 }

 .active__requester {
   font-size: 16px;
   padding-top: 8px;
 }

 .cpl-card__description-time-content.active {
   background-color: var(--silver);
   padding: 20px;
   margin-top: 20px;
   border-radius: 10px;
 }

 .active__requester-content {
   padding-top: 10px;
   font-size: 16px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px dashed var(--primary-color);
 }

 .result__title {
   font-size: 16px;
   font-weight: bold;
 }

 .result__description {
   font-size: 16px;
 }

 .result__description-processor {
   padding-top: 11px;
 }

 .result__description-content {
   padding-top: 9px;
 }

 .paginate {
   padding-top: 43px;
   padding-bottom: 80px;
 }

 .footer-tse img {
   max-width: 1281px;
   display: table;
   margin: 0 auto;
 }

 .paginate img, .footer-tse img {
   display: table;
   margin: 0 auto;
 }

 .mobile-mode {
   display: none;
 }

 .pc-mode {
   display: inline-block;
 }

 .footer-tse picture {
   width: 100%;
   object-fit: cover;
 }

 .footer-tse picture img {
   width: 100%;
 }

 @media only screen and (min-width: 1101px) {
   .humbager.active {
     display: none;
   }
 }

 @media only screen and (max-width: 768px) {
   .cpl-card__description-free-entry-f {
     padding-left: 4vw;
   }
   .humbager {
     left: 5.4vw!important;
     top: 5.4vw!important;
   }
   .avatar {
     width: 100%;
     top: -34.5px !important;
     width: 355px;
     height: 328px;
   }
   /* menu-icon */
   .humbager img {
     /* margin-top: 2.333vw; */
     left: 40px;
     top: 40px;
   }
   /* menu-icon-end */
   .ct-header {
     position: relative;
   }
   .pc-mode {
     display: none;
   }
   .mobile-mode {
     display: inline-block;
   }
   .bg-white {
     background-color: transparent !important;
   }
   .head-menu {
     position: absolute;
     top: 0;
     left: 0;
     background-image: url(../img/sp/top-bg.png);
     background-size: contain;
     background-position: center top;
     min-height: unset;
     height: 73.6vw;
     width: 100%;
   }
   .list-menu {
     background-image: url(../img/sp/menu-hambuger.png);
     background-size: contain;
     background-position: center;
     width: 12.933333333vw;
     height: 11.066666666vw;
     margin: 3.866666666vw 0 0 5.2vw;
     background-size: unset;
   }
   .avatar {
     background-image: url(../img/sp/avatar.png);
     background-size: contain;
     background-position: center;
     top: 3.5px;
   }
   .bg-white {
     position: relative;
     /* top: -370px; */
     /* top: calc(244px - 80vw); */
   }
   .text-first {
     max-width: unset;
     font-size: 3.733333333vw;
     padding-left: 4vw;
     padding-right: 4vw;
     margin: 0 auto 0;
     padding-top: 300px;
   }
   .ct-complaints-primary__title {
     font-size: 4.266666666vw;
     margin-top: 16vw;
     letter-spacing: 0.4vw;
     margin-bottom: 1.733333333vw;
   }
   .ct-complaints-primary__body {
     width: 90vw;
     max-width: unset;
     padding-top: 0;
     font-size: 3.733333333vw;
     margin-bottom: 13.333333333vw;
   }
   .ct-complaints-primary__body .row .col-5 {
     width: 34vw;
     padding-left: 3.6vw;
     line-height: 15.066666666vw;
     position: relative;
     padding-right: 4vw;
   }
   .ct-method__title {
     font-size: 4.266666666vw;
     letter-spacing: 0.533333333vw;
   }
   .ct-complaints-primary__body .row .col-5::after {
     content: '';
     position: absolute;
     right: 0;
     top: 4.666666666vw;
     height: 92%;
     background-color: var(--primary-color);
   }
   .ct-complaints-primary__body .row .col-7 {
     padding-top: 4.666666666vw;
     padding-left: 4vw;
     width: 54vw;
     padding-right: 0;
   }
   .ct-complaints-primary__body .row .col-7 .ct-complaints-primary__body-first {
     line-height: 5.6vw;
   }
   .ct-complaints-primary__body-first div:last-child, .ct-complaints-primary__body-second {
     padding-top: 4vw !important;
   }
   .ct-complaints-primary {
     width: 100%;
     background-image: url(../img/sp/pink-bg.png);
     background-size: contain;
     background-position: center;
   }
   .step__title {
     font-size: 3.733333333vw;
     padding-top: 5.333333333vw;
     letter-spacing: 1px;
     font-weight: normal !important;
   }
   .step__details {
     font-size: 3.733333333vw;
     padding-left: 4vw;
     padding-right: 4vw;
     letter-spacing: 0.324vw;
     padding-top: 2vw;
     padding-bottom: 11.2vw;
     font-weight: normal !important;
   }
   .ct-method {
     max-width: unset;
   }
   .step__details::after {
     left: calc(50% - 5.426666666vw);
     background-image: url(../img/sp/icon/icon1.png);
     background-size: contain;
     background-position: center;
     width: 10.853333333vw;
     height: 5.786666666vw;
   }
   .ct-list__title {
     font-size: 4.266666666vw;
   }
   .ct-list {
     padding-top: 16vw;
     max-width: unset;
   }
   .cpl-card {
     padding: 5.333333333vw 4vw;
   }
   .cpl-card__title {
     padding: 2.533333333vw 2.666666666vw 1.733333333vw 4vw;
     font-size: 2.666666666vw;
     border-radius: 1.6vw;
     font-size: 4.266666666vw;
   }
   .cpl-card__description-time {
     font-size: 4.267vw;
     padding-left: 4vw;
     padding-top: 1.6vw;
     padding-bottom: 1.2vw;
   }
   .cpl-card__description-time::after {
     height: 96%;
     top: 0.266666666vw;
     width: 1.866666666vw;
   }
   .cpl-card__description-update-time {
     font-size: 3.2vw;
     padding-left: 4vw;
   }
   .cpl-card__description-time-content {
     font-size: 4.267vw;
     padding-left: 4vw;
     padding-top: 1.6vw;
   }
   .cpl-card__description {
     padding-bottom: 0.533333333vw;
   }
   .cpl-card__description-time-content.active {
     padding: 4.26666666667vw 4vw 4vw;
     margin-bottom: 5.06666666667vw;
   }
   .cpl-card__description-time-content.active:last-child {
     margin-bottom: -0.53333333333vw;
   }
   .active__requester {
     font-size: 4.267vw;
     padding-top: 2.66666666667vw;
   }
   .active__requester-content {
     font-size: 4.267vw;
     padding-top: 2.66666666667vw;
     padding-bottom: 4.13333333333vw;
     margin-bottom: 4.13333333333vw;
     border-bottom: 0.26666666666vw dashed var(--primary-color);
   }
   .active__title, .cpl-card__description-free-entry-f, .active__requester, .active__requester-content, .result__title, .result__description {
     font-size: 4.267vw;
   }
   .result__description-processor {
     padding-top: 2.8vw;
   }
   .result__description-content {
     padding-top: 2.66666666667vw;
   }
   .paginate {
     padding-top: 5.06666666667vw;
   }
 }

 @media only screen and (max-width: 480px) {
   .text-first {
     padding-top: 61.833vw;
   }
   .avatar {
     top: -59.5px !important;
     width: 257px;
     height: 328px;
   }
 }