/* リセットCSS（基本的なブラウザのスタイルをリセット） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ベースのフォント設定 */
html{
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: "Noto Sans JP", Arial, sans-serif;
    line-height: 1.6;
    color: #505050; /* 文字色 */
    margin:0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}



ul{
    list-style: none;
}

img{
    vertical-align:bottom;
}

  

/* ヘッダーのスタイル */
header {    

}

.head_area{
    max-width:1600px;
    margin: auto;
    display: flex;
    padding:1rem 10px;
}

.head_logo{
    /*max-width: 600px;
    display: inline-block;*/
}

.head_logo img{
    width:100%;
}

.head_tel{
    /*max-width:800px;
    display:inline-block;*/
    display: flex;
    justify-content: flex-end;
    flex-basis: 70%;
}

.tel_name{
    font-weight:bold;
}

.tel01,
.tel01_2{
    font-size:30px;
    color:#D7000F;
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
}

.tel01 a,
.tel01_2 a{
    color:#D7000F;
    text-decoration: none;
}

.tel01 span{
    text-indent: 0;
    letter-spacing: -1.6px;
}

.business_hours{
    font-size:14px;
}

.head_tel ul{
    list-style: none;
    max-width:300px;
    display:inline-block;
    line-height:1.2;
    margin: 0 0 0 30px;
    align-content: center;
}

.fa-icon::before {
    content: '\f095';    
    
    padding: 0 7px 0 0
}

.fa-solid {
    font-size:26px;
  }

/* メインコンテンツエリア */
main {
    /*padding: 2rem;*/
    background-color: #fff;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.business_days{
    background-color:#D7000F;
}

.business_days p{
    color:#fff;
    max-width: 1600px;
    margin: auto;
    text-align: right;
    padding: 0 10px;
}

.main_image img{
    width:100%;
}

.catch_area{
    max-width:1400px;
    margin:6rem auto;
    padding: 0 10px;
}

.catch_area img{
    width:100%;
}

.catch_area img.sp{
    display:none;
}

.catch_point{
    margin:80px 0 0;
    list-style: none;
    /*font-weight: bold;*/
}

.catch_point li{
    font-size:36px;
    font-weight: 700;
}

.catch_point li span.number{
    color:#D7000F;
}

.catch_point li span.marker{
    background: linear-gradient(transparent 10%, #C6A75C50 10%);
    background-repeat: repeat-x;
    background-position: 0 .7em;
    /*transition: all 10s ease;*/

}

.item_area{
    background-color:#FAF5F0;
}

hr{
    background-image: url(../img/icon_section.png);
    height: 36px;
    border: none;
}

.item_content{
    /*max-width:1400px;*/
    margin:4rem auto 0;
    padding: 2rem 0 10rem;
    position: relative;
}
/*
.figure01{
    background-image: url(../img/bg_figure01.png);
    background-repeat: no-repeat;
    background-position: right 0 bottom 0;
}
*/
.figure01{
    width: 100%;
    position:relative;
}
.figure01::before{
    background-image: url(../img/bg_figure01.png);
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 190px;
    width: 600px;
    position: absolute;
    right: 0;
}

.figure01::after {
    background-image: url(../img/bg_figure02.png);
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 190px;
    width: 500px;
    position: absolute;
    left:0;
}

.figure02{
    width: 100%;
}

.figure02::before{
    background-image: url(../img/bg_figure02.png);
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 190px;
    width: 600px;
    position: absolute;
    left:0;
}

.figure02 h4,
.figure03 h4{
    padding: 70px 0 20px;
    position: relative;
}

.figure03::before{
    background-image: url(../img/bg_figure01.png);
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 190px;
    width: 600px;
    position: absolute;
    right:0;
}

.mark_point{
    text-align: center;
    padding: 50px 0 0;
}

h3{
    color:#C6A75C;
    font-size:44px;
    /*margin:0 0 140px;*/
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.heading {
    align-items: center; /* 横線を上下中央 */
    display: flex; /* 文字と横線を横並び */
    justify-content: center; /* 文字を中央寄せ */
  }
  .heading::before,
  .heading::after {
    background-color: #C6A75C; /* 横線の色 */
    content: "";
    height: 5px; /* 横線の高さ */
    width: 150px; /* 横線の長さ */
  }
  .heading::before {
    margin-right: 30px; /* 文字との余白 */
  }
  .heading::after {
    margin-left: 30px; /* 文字との余白 */
  }

.item_area h4{    
    font-size:30px;
    text-align:center;
    line-height: 1.0;
    margin: 8rem 0 6rem;
    font-weight: 800;
}

.item_area h4 span{    
    font-size:24px;
    color:#C6A75C;
    font-weight: 800;
}


.item_block01{
    max-width:1400px;
    display:flex;
    flex-wrap: wrap;
    margin:auto;
    gap: 70px;
    justify-content: center;
}

.item_block02{
    max-width:930px;
    display:flex;
    flex-wrap: wrap;
    margin:auto;
    gap: 70px;
    justify-content: center;
}

.item_box{
    max-width: 420px;
}

.item_box img{
    width:100%;
}

.item_box p{
    background-color:#505050;
    color:#fff;
    border-radius: 30px;
    text-align: center;
    margin: 20px auto 0;
    padding: 5px;
    line-height: 1.4;
    width: 300px;
    font-weight: bold;
}

/* purchase_content */

.purchase_content{
    margin:4rem auto 0;
    padding: 2rem 0 10rem;
    position: relative;
}

.purchase_block01{
    max-width:1400px;
    display:flex;
    flex-wrap: wrap;
    margin: 6rem auto 3rem;
    gap: 70px;
    justify-content: center;
}

.purchase_box{
    max-width: 420px;
    background-color:#C6A75C;
    color:#fff;
    border-radius: 20px;
    text-align: center;
    padding: 40px 40px;
}

.purchase_box p{
    margin:10px 0;
}

.purchase_box p strong{
    font-size:2rem;
}

.purchase_box img{
    width:40%;
}

.purchase_txt{
    text-align:left;
}

.purchase_message{
    text-align:center;
    font-size:24px;
    font-weight:bold;
}

/* need_content */

.need_area{
    background-color:#FAF5F0;
}

.need_content{
    margin:4rem auto 0;
    padding: 2rem 0 10rem;
    position: relative;
}

.need_block01{
    max-width:1400px;
    display:flex;
    flex-wrap: wrap;
    margin: 6rem auto 3rem;
    gap: 50px;
    justify-content: center;
}

.need_box{
    max-width: 240px;
    padding: 0;
}

.need_box img{
    width:100%;
}

.need_message{
    text-align:center;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 0;
}

.need_message span{
    font-size:16px;
    font-weight:normal;
}


/* フッターのスタイル */
footer {
    
}

.foot_area{
    max-width: 1250px;
    margin:auto;
}

.foot_button{
    text-align: center;
    margin: 7rem auto;
}

.foot_button a{
    background-color: #D7000F;
    color: #fff;
    width: 45%;
    display: inline-block;
    padding: 20px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

.foot_content{
    display:flex;
    flex-wrap: wrap;
    margin: 3rem 10px 3rem;
    justify-content: center;
}

.foot_block01{
    width:55%;
    padding: 0 10px 10px;
}

.foot_logo{
    margin:0 0 50px;
    max-width: 500px;
}

.foot_logo img{
    width: 100%;
    margin: auto;
    text-align: center;
}

.foot_block01 dl{
    display:flex;
    flex-wrap: wrap;
    margin: 20px 0 0;
}

.foot_block01 dt{
    width:220px;
    font-size: 20px;
    align-content: center;
    font-weight: bold;
}

.foot_block01 dd{
    color:#D7000F;
    font-size: 40px;
    line-height: 1.0;
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
}

.tel02{
    letter-spacing: -2px;
    text-indent: 1px;
}

.foot_block02{
    width: 35%;
    padding: 0 10px 10px;
    align-content: end;    
}

.foot_block02 ul{
    margin:0 0 10px;
}

.foot_block02 p{
    font-size: 15px;
}

.copy{
    background-color: #D7000F;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    margin-top: 2rem;
}


/* メニューアイコンのスタイル */
.menu-icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 15px;
}

/* モバイルメニューのスタイル */
.mobile-menu {
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    padding: 0;
    margin: 0;
}

.mobile-menu ul li a {

}

/* 1024px以下でメニューアイコンを表示 */
@media (max-width: 1024px) {
    .menu-icon {
        display: block;
    }

    .menu-icon .fa-phone{
        background: #D7000F;
        color:#fff;
        border-radius:10px;
        padding: 10px;
        width:46px;
        height:46px;
        text-align: center;
    }

    .menu-icon .fa-times{
        top: 40px;
    }

    
}

/* メニューが開いたときのアイコン変化 */
.menu-icon.active {
    /*transform: rotate(180deg); /* 少し回転させると視覚的にわかりやすい */
}

/* レスポンシブデザイン（タブレット対応） */
@media (max-width: 1024px) {
    .head_tel{
        display:none;
    }

    .head_logo img {
        width: 260px;
    }

    .mobile-menu ul {
        width:45%;
        display: inline-block;
    }
}

/* レスポンシブデザイン（モバイル対応） */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column;
        align-items: center;
    }

    header nav ul li {
        margin: 0 0;
    }

    .head_area{
        display:block;
        padding: 1rem 10px;
    }

    .head_logo{
        margin: 0 0 ; 
    }

    .head_logo img {
        /*width: 50%;*/
    }
    
    .head_tel{
        display:none;
    }

    .link-none{
        pointer-events: none;
    }

    .mobile-menu ul {
        width:100%;
    }

    main {
        padding: 0;
    }

    .business_days p {
        text-align: center;
      }

    .catch_area {
        margin: 50px auto 60px;
    }

    .catch_area img.pc{
        display:none;
    }

    .catch_area img.sp{
        width:100%;
        display: block;
    }

    .catch_point{
        margin:20px 0 0;
    }

    .catch_point li {
        font-size: 15px;
        font-weight: 600;
        line-height: 2.0;
    }

    .mark_point img{
        width:50px;
    }

    h3{
        font-size: 30px;
    }

    .heading::before,
    .heading::after {
        height: 3px; /* 横線の高さ */
        width: 60px; /* 横線の長さ */
    }
    .heading::before {
        margin-right: 10px; /* 文字との余白 */
    }
    .heading::after {
        margin-left: 10px; /* 文字との余白 */
    }

    .item_content{
        margin:0 auto 0;
        padding: 2rem 0 6rem;
    }

    .figure01::before{
        background-size: 40% 40%;
        background-position: right;
    }
    
    .figure01::after {
        background-size: 40% 40%;
        background-position: left;
    }

    .figure02::before{
        background-size: 40% 40%;
        background-position: left;
    }

    .figure03::before{
        background-size: 40% 40%;
        background-position: right;
    }

    .item_area h4{
        margin: 4rem 0 3rem;
        font-size: 26px;
    }

    .item_area h4 span{
        font-size: 22px;
    }

    .item_block01 {
        gap: 30px 15px;
        padding:0 10px;
    }

    .item_box{
        text-align: center;
        max-width: 46%;
    }

    .item_box img {
        width: 100%;
    }

    .item_box p{
        width: 100%;
        font-size:12px;
        margin: 10px auto 0;
    }

    .item_box p span{
        font-size:10px;
    }

    .item_block02 {
        gap: 30px 15px;
        padding:0 10px;
    }

    .purchase_content {
        margin: 0 auto 0;
        padding: 2rem 0 6rem;
    }

    .purchase_block01 {
        margin: 3rem auto 3rem;
        gap: 15px;
        padding:0 10px;
    }

    .purchase_box {
        max-width: 46%;
        padding: 10px 10px;
    }

    .purchase_box p {
        font-size: 14px;
      }

    .purchase_box p strong {
        font-size: 1.4rem;
        position: relative;
      }

    .purchase_message {
        font-size: 20px;
    }

    .need_content {
        margin: 0 auto 0;
        padding: 2rem 0 3rem;
    }

    .need_block01 {
        margin: 2rem auto 2rem;
        gap: 10px;
        padding:0 10px;
    }

     .need_box {
        max-width: 110px;
    } 

    .foot_button {
        margin: 5rem auto;
    }

    .foot_button a{
        width: 80%;
        font-size: 16px;
    }

    .foot_logo img{
        width: 80%;
    }

    .foot_block01{
        width:100%;
        padding: 0 10px 20px;
    }

    .foot_block01 dd a{
        color: #D7000F;
        text-decoration:none;
    }

    .foot_logo{
        margin: auto;
        text-align: center;
    }

    .foot_block02{
        width:100%;
    }
}