/* Client-specific Styles */

  #outlook a {
    padding: 0;
}

/* Force Outlook to provide a "view in browser" button. */

body {
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    font-family: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "lucida grande", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
}

.ReadMsgBody {
    width: 100%;
}

.ExternalClass {
    width: 100%;
}

/* Force Hotmail to display emails at full width */

body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
/* Reset Styles */

a:link,
a:visited {
    text-decoration: none;
}

a:hover {
    opacity: 0.75;
}

p {
    margin: 0;
}

img {
    border: 0 none;
    outline: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

ul {
    padding: 0 5%;
}

li {
    list-style: none;
}

h1 {
    margin-top: 0;
}

h2 {
    color: #1D50A2;
    font-size: 6.7vw;
    margin: 0 0 2%;
    font-family: 'Noto Sans JP', sans-serif;
}

h3 {
    color: #1D50A2;
    font-size: 5.3vw;
    margin: 3% 0 4%;
}

h5 {
    color: #000;
    font-size: 1.3vw;
    margin: 1.5% 0 0 0;
    font-weight: 300;
}

.blacktext {
    color: #000 !important;
    font-size: 2vw !important;
}


small {
    color: #606060;
    font-size: 2vw;

}

section {
    margin: 3% 0 0;
    padding-top: 10%;
    /* 調整したい高さ（固定ヘッダーの高さ） */
    margin-top: -10%;
    /* heightと同じ分のネガティブマージン */
}

.main_content {
    text-align: center;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 0 20px;
}

.inner {
    max-width: 800px;
    margin: auto;
    padding: 3% 0;
}

.pointBox {
    border: 1px solid #000;
    box-shadow: 2px 2px 0px 0px #606060;
    margin: 0 3%;
    padding: 5% 4%;
}

.pointBox p {
    font-size: 2.4vw;
    margin: 0 1.5% 4%;
}
.pointBox_txt_b {
  font-size: 0.75rem!important;
  font-weight: 900;
  color: #074597;
}

.btn {
    margin: 2% 15% 5%;
    padding: 1%;
    font-size: 3.5vw;
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #000;
}

.btn:hover {
    color: #fff !important;
}

.bl_btn {
    background: #074597;
}

.r_btn {
    background: #D90000;
    width: 70%;
    margin: 30px auto !important;
}

header {
    /* max-width: 1920px; */
    width: 100%;
    height: 110px;
    margin: auto;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
}

.header__top {
    padding: 0 30%;
    background: #f4f4f4;
    background-position: center;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: inherit;
    position: relative;
    max-width: 1200px;
    margin: auto;
    padding: 0 5%;
}

.header-title {
    width: 200px;
    padding: 5% 4% 4% 8%;
}

/* ヘッダーのロゴ部分 */
.header__title {
    width: 300px;
}


.header__title img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ハンバーガーメニュー */
.header__hamburger {
    width: 60px;
    height: 100%;
    cursor: pointer;
}

.hamburger {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
}

/* ヘッダーのナビ部分 */

.header__nav {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 700px;
    transform: translateY(-200%);
    background-color: rgba(255, 255, 255, 0.9);
    transition: ease .4s;
    z-index: 9999;
}

.nav-items {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    display: block;
    z-index: 9999;
    padding: 100px 0 100px 10%;
    width: 85%;
}

.nav-items li {
    width: 100%;
    height: 70px;
    font-weight: 700;
}

.nav-items li a {
    text-align: left;
    font-size: 1.5em;
    display: flex;
    line-height: 1em;
    align-items: center;
    color: #1d50a2;
}

.nav-item_num {
    color: #00418f;
    margin-right: 5%;
}

.nav-item_img {
    width: 8%;
    margin-right: 5%;
}


.nav-item_subtitle {
    font-size: 0.7em;
}


/* ナビのリンク */
.nav-items__item a {
    color: black;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 20px;
    margin-bottom: 24px;
    color: black;
}

.nav-items__item:last-child a {
    margin-bottom: 0;
}

.contents__title {
    width: 300px;
}


.contents__title img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
    transform: translateY(0);
}

.menu {
    display: block;
}

.close {
    display: none;
}

.active {
    display: block;
}

.inactive {
    display: none;
}

/* chirashi */
.chirashi {
    margin: 5% 3% 8%;
    border: #dddddd solid 3px;
    box-shadow: #c0c0c0 3px 3px 3px;
}

/* point1 */
.mt3 {
    margin-top: 3%;
}

#customer_service .annotation {
    text-align: right;
    margin: 0 2% 2%;
}

/* point2 */
.mb05 {
    margin-bottom: 0.5%;
}

/* point3 */
.mb3 {
    margin-bottom: 3%;
}

.orangetext {
    color: #ff3600 !important;
    font-size: 3.3vw !important;
    margin: 0 1.5% 0% !important;
    font-weight: 700 !important;
}

.bluetext {
    display: block;
    padding: 1.8%;
    color: #1d50a2;
    background-color: #d3edf7;
    font-weight: 700;
    margin: 2% 1.5% 0% !important;
}

/* #warranty .btn,
#same_day .btn,
#point .btn {
    margin: 7%;
} */

.warranty_box {
    margin: 0 auto;
}

nav ul {
    display: flex;
}

nav ul li {
    margin-bottom: 1%;
}


.g-nav1 {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: space-between;
}

.g-nav1 li {
    width: 42%;
    margin: 5px;
    padding: 5px;
}

.warranty_item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.warranty_text_ttl {
    font-size: 1.3vw !important;
    margin-bottom: 0px !important;
    color: #000;
    text-align: center;
}

.double_line {
    display: inline-block;
    position: relative;
    padding: 3.5% 3.5% 3%;
    border: solid 1px #1d50a2;
    margin: 3% 3% 1%;
}

.double_line::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: -4px;
    right: -4px;
    left: 3px;
    border: solid 1px #000000;
    z-index: -1;
}

.double_line_text_ttl {
    font-size: 0.8vw !important;
    margin-bottom: 0px !important;
    color: #000;
    text-align: left;
}

.double_line_text {
    color: #1d50a2;
    font-size: 1vw !important;
}



/* point4 */
.info {
    display: flex;
    padding: 1% 0%;
}

.info-text {
    width: 90%;
}

.info-image {
    width: 10%;
}

.info-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 1% 10%;
    text-align: left;
}

.term {
    display: flex;
    align-items: center;
}

.delivery_text {
    font-size: 1.5vw !important;
}

.delivery_text_orange {
    font-size: 1.8vw !important;
    color: #ff3600;
    font-weight: 700 !important;
}

.glay_center {
    color: #606060;
    text-align: center;
    font-size: 0.8vw !important;

}

.circle {
    background: #1D50A2;
    color: #fff;
    display: inline-block;
    font-size: 5vw;
    line-height: 70px;
    margin: 0 4% 5% 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
}

#same_day ul {
    font-size: 2.8vw;
    margin: 0 0 4%;
}

/* point5 */
.con5_top {
    width: 60%;
    margin: 0 auto!important;
}

#credit,#barcode,#touch,#debit,
#electronic_money,#gift_card {
    margin-top: -100px;
    padding-top: 150px;
}

#point .pointBox {
    padding-bottom: 5%;
}

#point .pointBox .p1 {
    margin-bottom: 0;
}

.p1::after {
    content: '+';
    color: #000;
    display: block;
}

/* バナーコンテナ */
.banner_container {
    margin: 0 10% 7%;
  }
  .banner_inner {
    align-content: center;
    text-align: left;
    margin: 4% 10px;
  }
  /* .banner_txt {
    margin: 4% 10px;
  } */
  .banner_time {
    font-size: 15px;
    color: #b5b5b5;
  }
  .banner_thumb {
    background: #fff;
    padding: 10px;
  }
  .banner_thumb img {
    width: 100%;
  }
  .banner_thumb p {
    /* font-size: 1.2rem; */
    font-weight: bold;
    color: #555;
  }
  .sidelong__article {
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
  }
  .banner_thumb {
    display: grid; 
    grid-template-columns: 35% 1fr;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,3);
  }
  .con5_flex {
    display: flex;
    align-items: flex-end;
    }

    .con5_flex > img {
    max-width: 33.33%;
    height: auto;
    }

  .con5_tou_txt2 {
    font-size: 16px!important;
  }

  .con5_debitImg {
    width: 95%;
    margin: 0 auto 3%;
  }

  .con5_touImg {
    width: 96%;
    margin: 0 auto 3%;
  }

  .con5_tou_txt5 {
    font-size: 16px!important;
    text-align: left;
  }

  .con5_gif_txt2 {
    font-size: 19.5px!important;
  }


  .con5_btn {
    margin: 2% 15% 5%;
    padding: 1%;
    /* font-size: 3.5vw; */
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    /* font-weight: 500; */
    border-radius: 5px;
  }
  

/* point7 */
#reform .pointBox p {
    margin: 4% 1.5% 0% !important;
}

/* point8 */
#parking .pointBox {
    position: relative;
}

#parking .pointBox .annotation {
    position: absolute;
    right: 0;
    bottom: 2%;
}

/* 他サービス */
.mt8 {
    margin-top: 8%;
}

.other .flexArea,
.other .BottomArea {
    margin-top: 6%;
}

.flexArea {
    display: flex;
}

.flexArea .flexBtn .bl_btn {
    font-size: 3vw;
    margin-bottom: 3%;
}

.flexArea .flexBtn p {
    font-size: 3vw;
    font-weight: 900;
    margin-bottom: 7%;
}

.flexArea .flexBtn span {
    color: #FF8552;
}

.BottomArea .BottomBtn .bl_btn {
    font-size: 2vw;
    margin-bottom: 1%;
}

.BottomArea .BottomBtn p {
    font-size: 2vw;
    font-weight: 300;
    margin-bottom: 7%;
}

.BottomArea .BottomBtn span {
    color: #FF8552;
}

/*固定ボタン*/
.btn_area {
    /* background: #fff; */
    /* box-shadow: 0px -3px 2px -2px #606060; */
    padding: 1%;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 99;
}

.btn_area a {
    /* background: #F3981C; */
    border-radius: 25px;
    color: #fff;
    display: block;
    font-size: 5vw;
    font-weight: 900;
    margin: 3%;
    padding: 3% 4%;
    text-align: center;
    text-decoration: none;
}

.btn_area2 {
    display: flex;
}

.btn_area2 a {
    font-size: 2.8vw;
    margin: 0 auto;
    padding: 3% 3%;
}

.btn_area2 .r_btn {
    background: #E50012;
}

.btn_area2 .lb_btn {
    background: #059dde;
}


.fixed_btn1 {
    position: fixed;
    right: 8px;
    padding: 0px 0px;
    top: 100px;
    width: 10%;
}

.fixed_btn2 {
    position: fixed;
    right: 8px;
    padding: 0px 0px;
    top: 190px;
    width: 10%;
}

.fixed_btn3 {
    position: fixed;
    right: 8px;
    padding: 0px 0px;
    top: 280px;
    width: 10%;
}

.fixed_btn4 {
  position: fixed;
  right: 8px;
  padding: 0px 0px;
  top: 370px;
  width: 10%;
}


.flexArea1 {
    display: flex;
    justify-content: space-evenly;
}

.flexBtn {
    margin: 0px 5px;
    width: 50%;
}

.pc {
    display: none;
}

.sp {
    display: block;
}


/*フッター*/
footer {
    margin-top: 0px;
    text-align: center;
    padding: 0 5%;
}

address {
    font-style: normal;
    font-size: 3vw;
    margin-top: 8px;
}

/* ページトップ */
#page-top {
    position: fixed;
    right: 1%;
    bottom: 12%;
    z-index: 999;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
}

#page-top a {
    text-decoration: none;
    border-radius: 5px;
    background: #1D50A3;
    text-align: center;
    color: #FFFFFF;
    display: block;
    overflow: hidden;
    width: 40px;
    height: 40px;
}

#page-top a img {
    width: 60%;
    vertical-align: -webkit-baseline-middle;
}

#payment .flex {
    text-align: left;
    margin-bottom: 20px;
}

.flex {
    display: flex;
    justify-content: center;
    line-height: 1.2;
}

.flex img {
    width: 30%;
}

/* ナビゲーション */
nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav ul li {
    margin-bottom: 1%;
    width: 49%;
}

/*　上に上がる動き　*/
#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}
.icon_box{
flex-wrap: wrap;
gap: 8px 0;
}
.icon_box li{
  width: 33%;
}
.icon_box img{
  width: 80%;
}

.otherArea {
    width: 60%;
    margin: 0 auto;
    text-align: left;
}

.otherBtn {
    padding-top: 40px;
}

.BottomArea {
    width: 100%;
    
}

.iconWrap {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.sns_icon {
    width: 80%;
    margin: 0 3%;
}


@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/
#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(300px);
    }
}

/*PC*/
@media (min-width: 751px) {
    .btn_area a {
        font-size: 1.8rem;
    }

    .same_day_li2 {
        font-size: 2.5vw;
    }

    .btn_area2 a {
        margin: 2% auto;
        padding: 2% 6%;
        font-size: 2.8vw;
    }

    .service_btn {
        width: 70%;
        margin: 0 auto;
        display: block;
    }

    .warranty_text_ttl_br {
        display: none;
    }

    .banner_txt {
        font-size: 1.1rem!important;
    }
}

/* スマホ */
@media (max-width: 750px) {
    .pc {
        display: none;
    }

    .upper_btns {
        width: 100%;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 5.3vw;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 3.3vw;
    }

    .orangetext {
        font-size: 1.5rem !important;
    }

    .blacktext {
        color: #000 !important;
        font-size: 3.5vw !important;
    }

    .delivery_text {
        font-size: 3.3vw !important;
    }

    .delivery_text_orange {
        font-size: 3.5vw !important;
    }

    .or_btn {
        background: #fea750;
        width: 95%;
        border-radius: 40px;
        margin: 30px auto;
    }

    .double_line_text_ttl {
        font-size: 2.2vw !important;
        margin-bottom: 0px !important;
        color: #000;
        text-align: left;
    }

    .double_line_text {
        color: #1d50a2;
        font-size: 2.3vw !important;
    }

    .info-text {
        padding: 4% 1% 4% 8% !important;
    }

    .glay_center {
        color: #606060;
        text-align: center;
        font-size: 2vw !important;

    }

    /* .btn::after {
        position: absolute;
        top: 54%;
        right: 1em;
        width: 0.5em;
        height: 0.5em;
        transform: translateY(-50%) rotate(45deg);
        border-right: 3px solid currentColor;
        border-top: 3px solid currentColor;
        content: "";
    } */

    header {
        height: 55px;

    }

    .header__title {
        width: 180px;
    }

    .header-title {
        width: 150px;
    }

    .header__top {
        padding: 0 0%;
    }

    .header__hamburger {
        width: 50px;
    }

    g-nav1 {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        /* padding: 3% 0; */
    }

    g-nav1 ul {
        display: block;
    }

    .warranty_text_ttl {
        font-size: 3.2vw !important;
    }

    .same_day_li2 {
        font-size: 2.5vw;
    }

    .flexBtn {
        margin: 0px 5px;
        width: 50%;
    }

    #page-top {
        bottom: 5%;
    }

    .reform1 p {
        margin: 0 0 4%;
    }

    .txt_area1 li {
        list-style-type: none;
        margin-left: 0;
        padding: 5px 0px;
        width: 100%;
    }

    .header__nav {
        /* right: 5%; */
        width: 100%;
        height: 450px;
    }

    .contents__title {
        width: 200px;
    }

    .nav-items {
        padding: 50px 5% 0px;
    }


    .nav-items li {
        height: 50px;
    }

    .nav-items li a {
        text-align: left;
        font-size: 1.2em;
        display: flex;
        line-height: 1em;
    }

    .nav-item_subtitle {
        font-size: 0.5em;
    }

    /*    
.content01_ttl h2,
.content02_ttl h2,
.content03_ttl h2,
.content04_ttl h2,
.content05_ttl h2,
.content06_ttl h2,
{
  font-size: 7.3vw;
}
*/
    .content01_ttl h3,
    .content02_ttl h3,
    .content03_ttl h3,
    .content04_ttl h3,
    .content05_ttl h3,
    .content06_ttl h3 {
        font-size: 5.3vw !important;
    }

    .content01_ttl .p {
        font-size: 2vw;
    }

    .content01_ttl .content02_ttl .content03_ttl .content04_ttl .content05_ttl .content06_ttl {
        margin: auto;
        text-align: center;
        width: 80%;
    }

    .read_more,
    .checkpoint,
    .check_other {
        padding: 3% 0;
        width: 70%;
        margin: 3% auto 0;
    }

    .material-symbols-outlined {
        position: absolute;
        right: 5%;
        bottom: 4vw;
        font-variation-settings:
            'FILL'0,
            'wght'400,
            'GRAD'0,
            'opsz'24
    }

    /* .BottomArea .BottomBtn .bl_btn {
        font-size: 4.375vw;
        margin-bottom: 1%;
    }

    .BottomArea .BottomBtn p {
        font-size: 4.375vw;
        font-weight: 300;
        margin-bottom: 7%;
    } */

    .otherBtn p {
        font-size: 2vw;
        letter-spacing: 0.05rem;
    }

    #credit,#barcode,#touch,#debit,
    #electronic_money,#gift_card {
    margin-top: -50px;
    padding-top: 100px;
    }

    .con5_tou_txt2,.con5_gif_txt2,.con5_tou_txt5,
    .banner_time,.con5_tou_sm  {
        font-size: 2vw!important;
      }

}
@media (max-width: 612px) {
    .warranty_text_ttl_br {
        display: block;
    }    
}

@media (min-width: 893px) {
    .btn_con3Card {
        font-size: 3vw;
    }
}

@media (min-width: 927px) {
    .h3_con1 {
        font-size: 4.6vw;
    }
}
@media all and (min-width: 870px) {
    .con5_tou_sm {
    font-size: 1.3rem!important;
  }
}

/*PC*/
@media (min-width: 1025px) {
    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 3rem;
    }

    .h3_con1 {
        font-size: 3rem;
    }

    .pointBox {
        border: 2px solid #000;
        box-shadow: 3px 3px 0px 0px #606060;
    }

    .pointBox p {
        font-size: 1.6rem;
    }
    .pointBox_txt {
      font-size: 1.3rem!important;
     }
  .pointBox_txt_b {
      font-size: 1.2rem!important;
    }
        small {
        font-size: 1.5rem;
    }

    .repair_txt {
        font-size: 1.5rem!important;
        font-weight: 500;
    }

    .btn {
        margin: 2% 20% 5%;
        padding: 15px;
        font-size: 1.5rem;
    }


    .fixed_btn1 {
        top: 120px;
        width: 120px;
    }

    .fixed_btn2 {
        top: 240px;
        width: 120px;
    }

    .fixed_btn3 {
        top: 360px;
        width: 120px;
    }

    .fixed_btn4 {
      top: 480px;
      width: 120px;
  }



    .pc {
        display: block;
    }

    .sp {
        display: none;
    }


    /* point4 */
    .circle {
        font-size: 3rem;
        line-height: 160px;
        margin: 0 3% 3% 0;
        width: 160px;
        height: 160px;
    }

    #same_day ul {
        font-size: 1.7rem;
    }

    .same_day_li2 {
        font-size: 1.6rem;
    }
    /* 他サービス */
    .other {
        margin-bottom: 8%;
    }

    .flexArea {
        display: flex;
    }

    .flexBtn {
        width: 50%;
    }

    .flexArea .flexBtn .bl_btn {
        font-size: 2rem;
    }

    .flexArea .flexBtn p {
        font-size: 2rem;
    }

    /*固定ボタン*/
    .btn_area a {
        font-size: 1.5rem;
        margin: 2% 15%;
        padding: 2%;
    }

    .btn_area2 a {
        margin: 2% auto;
        padding: 2% 6%;
    }

    /*フッター*/
    footer small,
    address {
        font-size: 1rem;
    }

}