/*--------------------------------------------------- common ---------------------------------------------------*/ #page-contents .title-a { background-image: linear-gradient(to right, #F82811, #F82811 1px, transparent 1px, transparent 1px);} @media (min-width: 768px) { } @media (max-width: 767px) { } /*--------------------------------------------------- overview ---------------------------------------------------*/ #overview {} #overview .title-a {} #overview .area { font-weight: 700; letter-spacing: 0.05em; text-align: center; border-radius: 20px; margin-bottom: 30px;} #overview .area .title { color: #2095E4; font-size: 1.6rem; margin-bottom: 15px;} #overview .area ul { list-style-type: none;} #overview .area ul li { font-size: 1.4rem; font-weight: 700; background-color: #fff; height: 40px; line-height: 40px; border-radius: 20px;} #overview .text { line-height: 1.6;} #overview .lead-a { margin-bottom: 30px;} #overview .f_bold { margin-bottom: 30px;} #overview .l_col-3 {} #overview .l_col-3 p { position: relative; border-radius: 20px; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em; text-align: left; align-items: center; padding-right: 5px; line-height: 1.5;} #overview .l_col-3 p::before , #overview .l_col-3 p::after { content: ""; display: inline-block; width: 20px; height: 2px; background-color: #616161; position: absolute; top: calc(50% - 1px); } #overview .l_col-3 p::after { transform: rotate(90deg);} #overview .l_col-3 p:nth-child(3)::before , #overview .l_col-3 p:nth-child(3)::after { display: none;} #overview .l_col-3 p .img { position: absolute; background-color: #fff; border-radius: 50%; text-align: center;} #overview .l_col-3 p span:not(.img) { font-size: 1.4rem; font-weight: 500; letter-spacing: normal; font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } #overview .l_col-3 + p {} @media (min-width: 768px) { #overview .area { padding: 15px 15px 20px;} #overview .area ul { justify-content: center;} #overview .area ul li { margin-right: 15px; max-width: 110px;} #overview .lead-a { text-align: center;} #overview .f_bold { text-align: center; } #overview .l_col-3 p { height: 100px; padding-left: 95px; width: calc( (100% / 3) - 19px ); padding-top: 25px;} #overview .l_col-3 p::before , #overview .l_col-3 p::after { right: -24px;} #overview .l_col-3 p .img { left: 15px; top: calc(50% - 35px); width: 70px; height: 70px; padding-top: 14px;} #overview .l_col-3 p:first-child { font-size: 2rem; display: inline-flex; align-items: center; padding-top: 10px;} } @media (max-width: 767px) { #overview .area { padding: 20px 20px 10px;} #overview .area ul li { width: calc(50% - 8px); margin-bottom: 10px;} #overview .text { margin-bottom: 0;} #overview .l_col-3 { margin-bottom: 20px; display: block;} #overview .l_col-3 p { height: 70px; margin-left: auto; margin-right: auto; max-width: 280px; padding-left: 76px; padding-top: 12px; margin-bottom: 20px; } #overview .l_col-3 p::before , #overview .l_col-3 p::after { right: 0; left: 0; top: auto; bottom: -11px; margin: auto; width: 10px; } #overview .l_col-3 p:first-child { padding-top: 22px;} #overview .l_col-3 p .img { width: 50px; height: 50px; left: 10px; top: calc(50% - 25px); padding-top: 12px;} #overview .l_col-3 p .img img { width: 28px; height: 27px; } #overview .l_col-3 p span:not(.img) { display: block;} #overview .l_col-3 + p { font-size: 1.4rem;} } /*--------------------------------------------------- other-price ---------------------------------------------------*/ .other-price {} .other-price .title-a { text-align: left;} .other-price .table-wrap { border: 2px solid #ccc; border-radius: 20px; overflow: hidden;} .other-price table { width: 100%; } .other-price table tr {} .other-price table th , .other-price table td { color: #000; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px solid #ccc; padding: 10px 5px;} .other-price table th { background-color: #FFE934;} .other-price table th:first-child { border-right: 1px solid #ccc;} .other-price table td:first-child { background-color: #F5F5F5; border-right: 1px solid #ccc;} .other-price table tr:last-child th, .other-price table tr:last-child td { border-bottom: none; } #business-trip {} #after-hours {} #after-hours .table-wrap { margin-bottom: 10px;} #after-hours .text { text-align: left; font-size: 1.4rem; margin-bottom: 0;} #after-hours figure { max-width: 210px;} #after-hours figure img { width: 100%; height: auto;} @media (min-width: 768px) { #after-hours figure { margin-left: auto;} } @media (max-width: 767px) { #after-hours figure { margin-left: auto; margin-right: auto;} } /*--------------------------------------------------- note ---------------------------------------------------*/ .note { border-radius: 20px; overflow: hidden;} .note .title { background-color: #FFE934; color: #F82811; font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; height: 45px; line-height: 45px;} .note .text { margin-bottom: 0;} .note .text p { font-size: 1.4rem; margin-bottom: 15px;} .note .list-a { padding: 0;} .note .list-a li { font-size: 1.4rem; margin-bottom: 5px; padding-left: 12px;} .note .list-a li::before { top: calc((0.5em * 1.8) - 2.5px);} .note .list-a ul { padding-top: 10px; margin-bottom: 15px; padding-left: 20px;} .note .list-a ul li::before { content: ""; background: none; border: 1px solid #FF9400;} #cancel { margin-bottom: 30px !important;} #attention {} #attention .title { background-color: #F82811; color: #fff;} @media (min-width: 768px) { .note .text { padding: 30px;} } @media (max-width: 767px) { .note .text { padding: 20px;} } /*--------------------------------------------------- price-list ---------------------------------------------------*/ #price-list {} #price-list .title-a { margin-bottom: 10px;} #price-list > .text { margin-bottom: 20px;} #price-list > .text p {} #price-list > .text p img { width: 34px; vertical-align: -9px;} #price-list .price-category { border: 3px solid #F82811; background: #FFF; box-shadow: 0 4px 0 0 #F82811; overflow: hidden; margin-bottom: 30px;} #price-list .head { background-color: #fff; position: relative; transition: background 0.2s; } #price-list .head .title { font-weight: 700; line-height: 1; letter-spacing: 0.1em; } #price-list .head .btn { position: absolute; width: 150px; height: 30px; background-color: #FCFBD2; border-radius: 40px; padding: 0 10px; line-height: 29px; right: 15px; top: 14px; cursor: pointer; } #price-list .head .btn::before { content: ""; position: absolute; width: 30px; height: 30px; background-color: #FFE934; border-radius: 50%; right: 0; top: 0;} #price-list .head .btn span { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; } #price-list .head .btn span::before , #price-list .head .btn span::after { content: ""; display: inline-block; width: 16px; height: 2px; background-color: #333; position: absolute; right: 7px; top: calc(50% - 1px); border-radius: 4px; transition: all 0.2s; } #price-list .head .btn span::after { transform: rotate(90deg); } #price-list .body { margin-bottom: 0; } #price-list .body > div { } #price-list .body > div > .title { color: #F82811; font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 15px; } #price-list .body > div > .title:not(:first-child) { padding-top: 25px;} #price-list dl { margin-bottom: 15px; } #price-list dl .l_col-list { background-color: #FCFBD2; position: relative; min-height: 60px; border-radius: 30px; } #price-list dl .l_col-list .title { font-weight: 700; flex: 0 0 auto;} #price-list dl .l_col-list .amount { font-weight: 700; flex: 0 0 auto; } #price-list dl .l_col-list .note { flex: 1 1 auto; min-width: 0px; font-size: 1.4rem; border-radius: 0;} #price-list dl .l_col-list .modal-btn { background-color: #FFE934; border-radius: 50%; position: absolute; } #price-list dl .l_col-list .modal-btn img {} #price-list dl .l_col-list .modal-btn.off { background-color: #ECECEC;} #price-list .body .text { margin-bottom: 0;} #price-list .body .text p { font-size: 1.4rem;} /*　アニメーション関係 */ #price-list .price-category .body { overflow: hidden; transition: max-height 0.3s ease; max-height: 0; } #price-list .price-category.closed .body { max-height: 0; } #price-list .price-category.active .head { background-color: #FFE934; } #price-list .price-category.active .head .btn::before { background-color: #fff;} #price-list .price-category.active .body {} #price-list .price-category.active .head .btn span::after { transform: rotate(0deg);} #price-list .price-category .head .btn { cursor: pointer; transition: opacity 0.3s ease; } #price-list .price-category .head .btn:hover { opacity: 0.8; } /* モーダル */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; } .modal-content { position: relative; max-width: calc(100% - 40px); max-height: calc(100% - 40px); background: #fff; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; align-items: center; } .modal-close { position: absolute; top: 10px; right: 15px; background: rgba(0, 0, 0, 0.7); color: #fff; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(0, 0, 0, 0.9); } .modal-image { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .modal-image img { width: auto; height: auto; object-fit: contain; display: block; height: auto; width: auto; max-width: 80vw; max-height: 80vh; } .modal-btn { cursor: pointer; } .modal-btn.off { cursor: default; } body.modal-open { overflow: hidden !important; position: fixed !important; width: 100% !important; } .modal-content { max-height: calc(100vh - 40px); } @media (min-width: 768px) { #price-list .price-category { border-radius: 20px; } #price-list .head { padding: 18px 15px; } #price-list .head .title { font-size: 24px;} #price-list .body > div { padding: 30px 15px;} #price-list dl .l_col-list { padding-left: 60px; align-items: center; padding-right: 20px; gap: 8px; flex-wrap: nowrap;} #price-list dl .l_col-list:not(:last-child) { margin-bottom: 15px;} #price-list dl .l_col-list .modal-btn { width: 50px; height: 50px; top: calc(50% - 25px); left: 5px;} } @media (max-width: 767px) { #price-list > .text p { font-size: 1.4rem;} #price-list .price-category { border-radius: 20px;} #price-list .head { padding: 12px 15px 50px;} #price-list .head .title { text-align: center; font-size: 2rem; } #price-list .head .btn { left: 0; right: 0; bottom: 10px; margin: auto; top: auto; } #price-list .body > div { padding: 20px 10px;} #price-list dl .l_col-list { padding-left: 65px; display: block; padding-top: 6px; padding-bottom: 5px; padding-right: 5px; } #price-list dl .l_col-list:not(:last-child) { margin-bottom: 10px;} #price-list dl .l_col-list .modal-btn { width: 45px; height: 45px; top: calc(50% - (45px / 2)); left: 10px;} #price-list dl .l_col-list .modal-btn img { width: 45px; height: auto;} #price-list dl .l_col-list > * { margin-bottom: 0;} .modal-overlay { padding: 10px; } .modal-content { max-width: calc(100% - 20px); max-height: calc(100% - 20px); border-radius: 4px; } .modal-close { top: 5px; right: 10px; width: 25px; height: 25px; font-size: 16px; } } /*--------------------------------------------------- ---------------------------------------------------*/ @media (min-width: 768px) { } @media (max-width: 767px) { }