@charset "utf-8";
/* CSS Document */
@media screen and (min-width:768px), print {
  /*----------------------------------------------------------------------
PC Style
----------------------------------------------------------------------*/
  /********** メインビュー **********/
  .main_img {
    background: url("../images/sevice/main_img.jpg") no-repeat center / cover;
  }
  /**********  メインエリア ***********/
  .discription {
    display: flex;
    justify-content: space-between;
  }
  .discription.reverse {
    flex-direction: row-reverse;
  }
  .txt_box, .img_box {
    width: 50%;
    position: relative;
  }
  .txt_box {
    padding: 0 90px;
  }
  .txt {
    width: 460px;
    margin-left: auto;
  }
  .reverse .txt {
    margin-left: 0;
    margin-right: 0;
  }
  .txt h3 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0;
  }
  .txt p {
    margin-bottom: 25px;
  }
  .img_box img {
    width: 100%;
    height: 465px;
    object-fit: cover;
  }
  ul.content_menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 120px;
  }
  ul.content_menu li {
    width: 340px;
    background: #FFF url("../images/content_linkarrow.svg") no-repeat center bottom 20px / 50px;
  }
  ul.content_menu li a {
    display: block;
    border: solid 2px #C1C1C1;
    padding: 40px 35px 90px 35px;
    transition: border 0.3s;
  }
  ul.content_menu li a:hover {
    border: solid 2px var(--red);
  }
  ul.content_menu li img {
    height: 101px;
    display: block;
    margin: 0 auto 20px;
  }
  ul.content_menu li dl {}
  ul.content_menu li dl dt {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 15px;
  }
  ul.content_menu li dl dt span {
    font-size: 1.6rem;
  }
  ul.content_menu li dl dd {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
  /* 小荷物便 */
  .package {}
  .package h2:after {
    content: "";
    width: 74px;
    height: 65px;
    background: url("../images/sevice/content_menu_img01.png") no-repeat right bottom 7px / 74px;
    padding-right: 80px;
  }
  .package .discription {
    margin-bottom: 135px;
  }
  .package .discription:last-of-type {
    margin-bottom: 80px;
  }
  .package dl.caution {
    background: #FFF1F1;
    color: var(--red);
    padding: 15px 30px 20px;
  }
  .package dl.caution dt {
    background: url("../images/icon_caution.svg") no-repeat left center / 20px;
    padding-left: 25px;
    font-weight: 700;
  }
  .package dl.caution dd {
    font-size: 1.4rem;
  }
  .package dl.caution dd:before {
    content: "・";
    padding-right: 0.5em;
  }
  .package img.map {
    width: 456px;
    height: 367px;
    position: absolute;
    top: 50%;
    left: 95px;
    transform: translateY(-50%);
  }
  .package .discription.reverse a {
    display: inline-block;
    transition: opacity 0.3s;
  }
  .package .discription.reverse a:hover {
    opacity: 0.6;
  }
  .package img.niigata {
    display: block;
    width: 262px;
    height: 50px;
  }
  .package p.notion {
    font-size: 1.4rem;
  }
  /* 専属･スポット貸切便 */
  .charter {
    background: #F3F3F3;
    padding: 18.631% 0;
  }
  .charter h2:after {
    content: "";
    width: 70px;
    height: 65px;
    background: url("../images/sevice/content_menu_img02.png") no-repeat right bottom 7px / 70px;
    padding-right: 80px;
  }
  .charter .discription {
    margin-bottom: 135px;
  }
  .charter .discription:last-of-type {
    margin-bottom: 80px;
  }
  .charter .caution {
    background: #E8F6FF;
    padding: 15px 30px 20px;
    color: var(--navy);
    margin-bottom: 25px;
  }
  .charter .caution dl {
    margin-bottom: 10px;
  }
  .charter .caution dl dt {
    font-weight: 700;
  }
  .charter .caution dl dd {
    font-size: 1.4rem;
    display: inline-block;
    line-height: 1.5;
  }
  .charter .caution dl dd:before {
    content: "・";
    padding-right: 0.5em;
  }
  .caution p {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 0;
    display: flex;
  }
  .caution p:before {
    content: "※";
  }
  .charter a.linkto {
    color: var(--navy);
    background: url("../images/icon_navy.png") no-repeat left 70px center / 40px, url("../images/icon_white.png") no-repeat left 70px center / 0, url("../images/arrow_navy.svg") no-repeat right 70px center / 48px, url("../images/arrow_white.svg") no-repeat right 70px center / 0;
    border: solid 1px var(--navy);
    padding: 0 130px;
    margin: 0 auto;
    transition: background-color 0.3s;
  }
  .charter a.linkto:hover {
    background: url("../images/icon_navy.png") no-repeat left 70px center / 0, url("../images/icon_white.png") no-repeat left 70px center / 40px, url("../images/arrow_navy.svg") no-repeat right 70px center / 0, url("../images/arrow_white.svg") no-repeat right 70px center / 48px;
    background-color: var(--navy);
  }
  .charter img.bg_top, .charter img.bg_bottom {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .charter img.bg_top {
    top: 0;
  }
  .charter img.bg_bottom {
    bottom: 0;
  }
  /* ラッピングトラック */
  .wrapping {}
  .wrapping h2:after {
    content: "";
    width: 70px;
    height: 65px;
    background: url("../images/sevice/content_menu_img03.png") no-repeat right bottom 8px / 70px;
    padding-right: 78px;
  }
  .wrapping .discription {
    margin-bottom: 100px;
  }
  .wrapping h4 {
    font-size: 2.4rem;
    color: var(--navy);
    font-weight: 700;
    border-bottom: solid 1px var(--navy);
    margin-bottom: 30px;
    line-height: 2.2;
  }
  .wrapping h4 span {
    font-size: 1.4rem;
    display: inline-block;
    padding-left: 25px;
  }
  .work, .fee {
    width: 925px;
    margin: 0 auto 180px;
    display: flow-root;
  }
  /* 施工事例 */
  .work {
    margin-bottom: 100px;
  }
  .work .work-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 30px;
  }
  .work .work-list .work-list__item {
    width: calc(100%/2 - 10px);
  }
  .work .work-list .work-list__item img {
    width: 100%;
  }
  .work .work-list .work-list__item span {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  /* 年間広告料金 */
  .fee h5 {
    width: fit-content;
    height: 32px;
    line-height: 32px;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--navy);
    padding: 0 10px 0 12px;
    margin-bottom: 10px;
    position: relative;
  }
  .fee h5:after {
    content: " ";
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-width: 0px 0px 32px 20px;
    border-style: solid;
    border-color: transparent;
    border-left-color: var(--navy);
  }
  .fee table {
    line-height: 1.6;
    border: 1px solid #DCDCDC;
  }
  .fee table tr:not(:last-child) {
    border-bottom: 1px solid #DCDCDC;
  }
  .fee table tr:last-child {
    color: var(--navy);
  }
  .fee table tr td:nth-of-type(odd), .fee table tr th.part:nth-of-type(even) {
    background-color: #F3F3F3;
  }
  .fee table tr:last-of-type th, .fee table tr:last-of-type td {
    position: relative;
    margin-top: 2px;
    border-top: 1px solid #999;
  }
  .fee table tr:last-of-type th:before, .fee table tr:last-of-type td:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0rem;
    right: 0rem;
    border-top: 2px solid var(--navy);
  }
  .fee table tr:last-of-type td {
    font-size: 2.4rem;
  }
  .fee table th {
    width: 220px;
    padding: 10px 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  .fee table th span {
    font-size: 1.2rem;
    letter-spacing: 0;
    font-weight: 500;
  }
  .fee table th.part {
    height: 250px;
    padding: 20px 10px;
    vertical-align: top;
    text-align: center;
  }
  .fee table th.part dl {
    margin-bottom: 20px;
  }
  .fee table th.part dl dt {}
  .fee table th.part dl dd {
    color: #6D6D6D;
    font-size: 1.4rem;
    font-weight: 400;
  }
  .fee table th.part dl dd span {
    font-size: 1.2rem;
  }
  .fee table th.part img {
    width: 145px;
  }
  .fee table td {
    font-size: 2rem;
    width: 235px;
    padding: 10px;
    text-align: center;
  }
  .fee table td span {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .fee dl.caution {
    width: 440px;
    background: #E8F6FF;
    color: var(--navy);
    padding: 25px 20px;
  }
  .fee dl.caution dt {
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
  }
  .fee dl.caution dd {
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1.8;
    margin-bottom: 5px;
    display: flex;
  }
  .fee dl.caution dd:before {
    content: "※";
    padding-right: 0.2em;
  }
}
@media screen and (max-width:767px) {
  /*----------------------------------------------------------------------
SP Style
----------------------------------------------------------------------*/
  /********** メインビュー **********/
  .main_img {
    background: url("../images/sevice/main_img.jpg") no-repeat center / cover;
    width: 100%;
    height: 150px;
    margin-top: 60px;
    position: relative;
  }
  .main_img .inner {
    width: 90%;
    height: 100%;
    position: relative;
  }
  /**********  メインエリア ***********/
  .content h2 {
    width: 90%;
  }
  .discription {
    display: block;
  }
  .txt_box, .img_box {
    width: 100%;
  }
  .txt_box {
    padding: 0 5%;
  }
  .txt {
    width: 100%;
  }
  .txt h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0;
  }
  .txt p {
    margin-bottom: 15px;
  }
  .img_box img {
    width: 100%;
    object-fit: cover;
  }
  ul.content_menu {
    margin-bottom: 40px;
  }
  ul.content_menu li {
    width: 100%;
    background: #FFF url("../images/content_linkarrow.svg") no-repeat right 20px top 50% / 30px;
    margin-bottom: 12px;
  }
  ul.content_menu li a {
    display: block;
    border: solid 2px #C1C1C1;
    padding: 15px 15px 15px;
    transition: border 0.3s;
  }
  ul.content_menu li a:hover {
    border: solid 2px var(--red);
  }
  ul.content_menu li img {
    display: none;
  }
  ul.content_menu li dl {}
  ul.content_menu li dl dt {
    height: 62px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    padding-left: 80px;
    display: flex;
    align-items: center;
  }
  ul.content_menu li dl dt span {
    font-size: 1.2rem;
  }
  ul.content_menu li:nth-of-type(1) dl dt {
    background: url("../images/sevice/content_menu_img01.png") no-repeat left center / 70px;
  }
  ul.content_menu li:nth-of-type(2) dl dt {
    background: url("../images/sevice/content_menu_img02.png") no-repeat left center / 70px;
  }
  ul.content_menu li:nth-of-type(3) dl dt {
    background: url("../images/sevice/content_menu_img03.png") no-repeat left center / 70px;
  }
  ul.content_menu li dl dd {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
  /* 小荷物便 */
  .package {}
  .package h2:after {
    content: "";
    width: 52px;
    height: 65px;
    background: url("../images/sevice/content_menu_img01.png") no-repeat right center / 52px;
    padding-right: 60px;
  }
  .package .discription {
    margin-bottom: 40px;
  }
  .package .discription:nth-of-type(2) {
    display: flex;
    flex-direction: column-reverse;
  }
  .package .discription:nth-of-type(2) .img_box {
    display: block;
    width: 90%;
    margin: 0 auto 15px;
  }
  .package .discription:last-of-type {
    margin-bottom: 20px;
  }
  .package .discription .txt img {
    margin-bottom: 0;
  }
  .package dl.caution {
    background: #FFF1F1;
    color: var(--red);
    padding: 15px 20px;
  }
  .package dl.caution dt {
    background: url("../images/icon_caution.svg") no-repeat left center / 20px;
    padding-left: 25px;
    font-weight: 700;
  }
  .package dl.caution dd {
    font-size: 1.4rem;
    display: flex;
  }
  .package dl.caution dd:before {
    content: "・";
  }
  .package img.map {
    width: 456px;
    height: 367px;
    position: absolute;
    top: 50%;
    left: 95px;
    transform: translateY(-50%);
  }
  .package img.niigata {
    width: 262px;
  }
  .package p.notion {
    font-size: 1.4rem;
  }
  /* 専属･スポット貸切便 */
  .charter {
    background: #F3F3F3;
    padding: 18.631% 0;
  }
  .charter h2 {
    margin-top: 10px;
  }
  .charter h2:after {
    content: "";
    width: 48px;
    height: 65px;
    background: url("../images/sevice/content_menu_img02.png") no-repeat right bottom 5px / 48px;
    padding-right: 53px;
  }
  .charter .discription {
    margin-bottom: 35px;
  }
  .charter .discription .txt img {
    margin-bottom: 15px;
  }
  .charter .discription:nth-of-type(2) {
    display: flex;
    flex-direction: column-reverse;
  }
  .charter .discription:nth-of-type(2) .img_box {
    display: block;
    width: 90%;
    margin: 0 auto 15px;
  }
  .charter .caution {
    background: #E8F6FF;
    padding: 15px 20px 25px;
    color: var(--navy);
    margin-bottom: 25px;
  }
  .charter .caution dl {
    margin-bottom: 10px;
  }
  .charter .caution dl dt {
    font-weight: 700;
  }
  .charter .caution dl dd {
    font-size: 1.4rem;
    display: inline-block;
    line-height: 1.5;
  }
  .charter .caution dl dd:before {
    content: "・";
    padding-right: 0.5em;
  }
  .caution p {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 0;
    display: flex;
  }
  .caution p:before {
    content: "※";
  }
  .charter a.linkto {
    color: var(--navy);
    background: url("../images/icon_navy.png") no-repeat left 20px center / 40px, url("../images/icon_white.png") no-repeat left 20px center / 0, url("../images/arrow_navy.svg") no-repeat right 20px center / 48px, url("../images/arrow_white.svg") no-repeat right 20px center / 0;
    border: solid 1px var(--navy);
    padding: 0 40px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  .charter a.linkto:hover {
    color: #ffffff;
    background: url("../images/icon_navy.png") no-repeat left 20px center / 0, url("../images/icon_white.png") no-repeat left 20px center / 40px, url("../images/arrow_navy.svg") no-repeat right 20px center / 0, url("../images/arrow_white.svg") no-repeat right 20px center / 48px;
    background-color: var(--navy);
  }
  .charter img.bg_top, .charter img.bg_bottom {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .charter img.bg_top {
    top: 0;
  }
  .charter img.bg_bottom {
    bottom: 0;
  }
  /* ラッピングトラック */
  .wrapping {}
  .wrapping h2:after {
    content: "";
    width: 48px;
    height: 65px;
    background: url("../images/sevice/content_menu_img03.png") no-repeat right bottom 5px / 48px;
    padding-right: 55px;
  }
  .wrapping .discription {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 60px;
  }
  .wrapping .discription .img_box {
    display: block;
    width: 90%;
    margin: 0 auto 15px;
  }
  .wrapping h4 {
    width: 90%;
    font-size: 2.4rem;
    color: var(--navy);
    font-weight: 700;
    border-bottom: solid 1px var(--navy);
    margin: 0 auto 15px;
    line-height: 2.2;
    line-height: 1.8;
  }
  .wrapping h4 span {
    font-size: 1.4rem;
    display: block;
    letter-spacing: 0;
    padding-bottom: 0.5em;
  }
  /* 施工事例 */
  .work {
    margin-bottom: 60px;
  }
  .work .work-list {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    grid-row-gap: 30px;
  }
  .work .work-list .work-list__item span {
    text-align: center;
    display: block;
    font-size: 1.4rem;
    margin-top: 5px;
  }
  /* 年間広告料金 */
  .fee {
    width: 100%;
    margin: 0 auto 60px;
  }
  .fee h5 {
    width: fit-content;
    height: 32px;
    line-height: 32px;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 700;
    background: var(--navy);
    padding: 0 10px 0 12px;
    margin-left: 5%;
    margin-bottom: 10px;
    position: relative;
  }
  .fee h5:last-of-type {
    height: 64px;
  }
  .fee h5:after {
    content: " ";
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-width: 0px 0px 32px 20px;
    border-style: solid;
    border-color: transparent;
    border-left-color: var(--navy);
  }
  .fee h5:last-of-type:after {
    right: -20px;
    width: 0;
    height: 0;
    border-width: 0px 0px 64px 20px;
  }
  .fee .sp_scroll {
    /*中身スクロールします*/
    overflow: auto;
    /*テーブルを入れた場合、セル内の文字を折り返ししないようにします*/
    white-space: nowrap;
    /*惰性を与えてスムーズなスクロールにしますよ*/
    -webkit-overflow-scrolling: touch;
    margin-left: 5%;
    margin-bottom: 50px;
  }
  .fee table {
    width: 563px;
    line-height: 1.6;
    border: 1px solid #DCDCDC;
    margin-bottom: 0;
  }
  .fee table:last-of-type {
    width: 90%;
    margin: 0 auto 40px;
  }
  .fee table tr:not(:last-child) {
    border-bottom: 1px solid #DCDCDC;
  }
  .fee table tr:last-child {
    color: var(--navy);
  }
  .fee table tr td:nth-of-type(odd), .fee table tr th.part:nth-of-type(even) {
    background-color: #F3F3F3;
  }
  .fee table tr:last-of-type th, .fee table tr:last-of-type td {
    position: relative;
    margin-top: 2px;
    border-top: 1px solid #999;
  }
  .fee table tr:last-of-type th:before, .fee table tr:last-of-type td:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0rem;
    right: 0rem;
    border-top: 2px solid var(--navy);
  }
  .fee table tr:last-of-type td {
    font-size: 2.4rem;
  }
  .fee table th {
    width: 170px;
    padding: 10px 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  .fee table th span {
    font-size: 1.2rem;
    letter-spacing: 0;
    font-weight: 500;
  }
  .fee table th.part {
    height: 124px;
    padding: 20px 10px;
    vertical-align: top;
    text-align: center;
  }
  .fee table th.part dl {
    margin-bottom: 20px;
  }
  .fee table th.part dl dt {}
  .fee table th.part dl dd {
    color: #6D6D6D;
    font-size: 1.4rem;
    font-weight: 400;
  }
  .fee table th.part dl dd span {
    font-size: 1.2rem;
  }
  .fee table th.part img {
    width: 97px;
  }
  .fee table td {
    font-size: 2rem;
    width: 124px;
    padding: 10px;
    text-align: center;
  }
  .fee table td span {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .fee dl.caution {
    width: 90%;
    background: #E8F6FF;
    color: var(--navy);
    padding: 25px 20px;
    margin: 0 auto;
  }
  .fee dl.caution dt {
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
  }
  .fee dl.caution dd {
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1.8;
    margin-bottom: 5px;
    display: flex;
  }
  .fee dl.caution dd:before {
    content: "※";
    padding-right: 0.2em;
  }
}