@charset "utf-8";

/* html, body */
#wrapper{
background-attachment: fixed;
}

.breadcrumb ul{
  color: #241816;
}

main .topTtl {
     font-weight: bold;
    font-size: 2.5rem;
    text-shadow: 1px 1px 2px #fff;
    position: relative;
    display: inline-block;
    z-index: 2;
    margin: 25px 5px 0;
        color: #3e3a39;
        text-align: center;
        line-height: 1.2;
        
}
/* --------section-list_image----------------- */

#list_image {
    background-position: center;
    background-size: cover;
    margin-bottom: 0px;
    padding: 35px 25px 0;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.list_image_inner {
    max-width: 1064px;
    margin: 0 auto;
    padding: 3rem;
    padding-bottom: 50px;
    text-align: center;
}
main #list_image::after {
    content: "product";
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    font-size: 100px;
    color: #ffffff;
    z-index: 1;
    /* transform: rotate(-45deg); */
    font-family: "Allura", cursive;
    font-weight: 200;
}

.content_inner .breadcrumb {
    color: #000;
}

.content_inner  .breadcrumb ul li:after{
    color: #000;
}

/* -------section_detail_content */

section#content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
}

section#content h3::after{
    display: none;
}

.content_inner {
    max-width: 1064px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 30px 10%;
}

/* ------section_p------ */

.p_container {
    max-width: 1080px;
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 30px auto 0;
}

.p_content {
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.p_image {
    width:40%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    margin-right: 20px;
}

.p_image img {
    width: 100%;
    min-width: 200px;
    border-radius: 8px;
    position: relative;
    object-fit: contain;
    padding: 3rem;
    max-height: 360px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td span {
    font-weight: 700;
}

td:not(.table_header):not(.spacing-row) {
    font-size: 1.4rem;
    font-weight: 400;
}

tr:nth-child(3) td:first-child {
    border-top-left-radius: 5px;
}

tr:nth-child(3) td:last-child {
    border-top-right-radius: 5px;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}

td {
    vertical-align: middle; 
}

td:not(.table_header):not(.spacing-row){
    padding: 2% 0 2% 3%;
}

.table_header {
    background-color: #D90459;
    color: white;
    font-weight: 800;
    text-align: center;
    font-size: 1.8rem;
    white-space: nowrap;
    border-bottom: 3px solid black;
    border-radius: 5px;
}

h1.table_header{
    border-bottom: none;
    text-shadow: none;
}

h1.table_header span {
    font-size: 1.4rem;
}

.p_1280{
    display: none;
}

.spacing-row td {
    height: 10px; 
    background-color: #fff; 
    border: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 16px;
}

.table_header {
    background-color: #000000;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 1% 1.5%;
    border-radius: 10px 10px 0 0;
}

tr:nth-child(odd):not(.table_header):not(.spacing-row) {
    background-color: #ffffff; 
}

tr:nth-child(even):not(.table_header):not(.spacing-row) {
    background-color: #e9e9e9;
}

tr:not(.spacing-row) td:first-child:not(.table_header) {
    border-right: 1px dashed #9d9d9d;
    width: 30%; 
}

tr:not(.spacing-row) td:not(.table_header) {
    width: 70%; 
}

.p_button {
    width: 90%;
    text-align: center;
    margin: 20px auto 0 auto;
}

.p_button br{
    display: none;
}

.p_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #bc505a;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 3% 25%;
    border-radius: 30px;
    font-size: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
    white-space: nowrap;
}

.p_btn:hover {
    background-color: #af3743; 
}

.p_btn .arrow {
    margin: 0 0 0 10px;
    padding: 0;
    font-size: 1.9rem;
    color: #fff;
    font-weight: 700;
    transform: rotate(90deg);
}

/* -------gooods_lower------ */
.p_lower{
    margin: 3% auto 0;
    width: 85%;
    display: flex;
    flex-direction: column;
}


#content h2 {
    position: relative;
    display: inline-block;
    text-align: left;
    color: #000;
    padding: 10px 5px; 
    z-index: 1; 
    border-bottom: 1px solid #000;
}

#content h2 span:not(.same_s), .p_lower span:not(.same_s):not(.p_button span.same_s) :not(.p_worry_inner p:last-of-type span) {
    color: #bc505a;
}

.same_s{
    font-size:1.6rem;
    color: #000;
}

.p_button span.same_s {
    color: #fff;
    font-size: 1rem;
}

.p_lower span{
    font-weight: 600;
}

.p_contact{
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    background-color: #bc505a;
    padding: 0.5% 2%;
    border-radius: 50px;
    text-decoration: none;
}

#p_review {
    margin-top: 9%;
}



.p_lower p {
    margin-top: 2%;
    margin-bottom: 2%;
}

.p_title img {
    position: absolute;
    max-width: 1080px;
    width: 100%;
    bottom: top;
    transform: translateY(-18px);
}

#p_price p {
    line-height: 1.5;
}

#p_import picture {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2% auto;
}

#p_import img {
    width: 75%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    object-fit: cover;
}

.p_import_01 {
    margin-bottom: 2%;
    padding-bottom: 0;
}

.p_import_02{
    padding-top: 0;
    padding-bottom: 0;
}

.p_w_contain{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.p_w_contain h3 {
    background: #2e2e2e;
    width: 75%;
    text-align: center;
    padding: 2% 0;
    font-weight: 600;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.p_lower h3 {
    margin-bottom: 0;
    color: #fff;
}



#p_worry{
    margin-top: 2%;
}

.p_worry_inner {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 3% 3%;
    line-height: 1.7;
    background:rgba(255,255,255,0.5);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    align-items: center;
      box-shadow: 2px 0 4px rgba(0,0,0,.1);
}

.p_worry_inner ul{
    list-style-position: inside;
    padding-left: 8px;
    margin-bottom: 0;
    position: relative;
    left: -50px;
}

.p_worry_inner ul li {
    font-size: 1.5rem;
}
.p_worry_inner ul {
  list-style: none; /* デフォルトのマーカーを消す */
  padding-left: 1.2em; /* マーカー分のスペースを確保 */
}
.p_worry_inner ul li::before {
  content: "〇"; /* ここに絵文字を指定 */
  color: #bc505a; /* 色も変更可能 */
  display: inline-block;
  width: 1.1em;
  margin-left: -1em;
}

.p_solve {
    background: #fff;
    width: 100%;
    padding: 2% 5%;
    border-radius: 5px;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #d7d7d7;
}

.p_worry_inner p{
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
}

.p_solve::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 48vw;
    height: 1px;
    background-color: #a3a3a3;
    transform: translate(-50%, 23px);
    margin-top: 7px;
}


.p_worry_inner p:first-of-type {
    color:#3a3a3a;
    font-weight: 700;
}

.p_worry_inner p:nth-of-type(2){
    padding-top: 2%;
}

.p_worry_inner p:last-of-type{
    font-size: 1.5rem;
    font-weight: 700;
    padding: 2% 0;
    width: 100%;
    max-width: 450px;
}

.p_worry_inner p:last-of-type span {
    color: #fff;
    background: #bc505a;
    margin-right: 4px;
        padding: 0 .3em .1em;
    display: inline-block; 
}

img.p_worry_image {
    position: absolute;
    width: 130px;
    object-fit: cover;
    transform: translate(200px, -64px);
    z-index: 1;
}

p.p_w_02{
    padding-bottom: 0;
}

/* -----------------#p_notice font padding/margin---------- */

#p_notice p:first-of-type {
    padding-bottom: 0;
}

#p_notice p:nth-of-type(2) {
    margin-top: 0;
    padding-bottom: 0;
}

#p_notice p:nth-of-type(3) {
    margin-top: 0;
}

/* -----------------#p_notice font padding/margin---------- */

#p_delivery, #p_usage{
    margin-top: 2%;
}

#p_delivery h3, #p_usage h3{
    color: #fff;
    padding: 2% 3%;
    background: #000;
    border-radius: 5px;
}

#p_delivery h3 span, #p_usage h3 span{
    color: #000;
}

#p_delivery p, #p_usage p{
    margin-top: 1%;
    padding-left: 3%;
}

#p_usage p{
    padding-bottom: 0;
}

/* #p_delivery h3::before, #p_usage h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: url(../images/product/title_pink.svg) no-repeat top;
    background-size: cover; 
    z-index: -1; 
} */

.p_lower h3::after{
    display: none;
}


/* ----------contact-form---------- */
#p_inquiry{
    margin-top: -100px;
    padding-top: 100px;
}

.contactBox {
    max-width: 1080px;
    width: 100%;
    margin: 2rem auto;
    padding: 2rem 3rem;
    background: #fff;
}

.contactBox dl dt{
    width: 300px;
    font-size: 1.3rem;
}

.select option {
    font-size: 1rem;
}

#p_service {
    margin-top: 2%;
    margin-bottom: 15px;
    background-color: #fff;
}

/* --------------service----------------- */

#p_service h2 {
    background: #fff;
}

#p_service h2{
    color: #000;
    padding: 0;
    text-align: center;
    border-bottom: none;
}

#p_service{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: #000 1px solid;
    padding: 2rem 3rem;
}

#p_service p{
    width: 100%;
    text-align: center;
}

#p_service p:first-of-type{
    padding-bottom: 0;
    padding-top: 1.5rem;
}

#p_service p:last-of-type{
    padding-top: 0;
    font-weight: 700;
}

#p_service h2::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 80%;
    height: 1px;
    background-color: #000;
    transform: translate(-50%, 33px);
    margin-top:10px;
}

#p_service strong{
    background: linear-gradient(transparent 50%, #f1efa2 50%);
}

.p_s_inner {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.7;
    margin-top: 2rem;
}

.p_s_inner ul {
    background: #f5f5f5;
    padding: 2%;
    font-size: 1.5rem;
}

.p_s_inner ul li {
    list-style-type: none;
    padding: 1% 0;
    border-radius: 10px;
}

.p_s_inner ul li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../../images/product/p_s_check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    vertical-align: middle;
}

/* ------------responsive--------------- */
@media screen and (min-width: 1440px){
    .p_solve::after{
        width: 504px;
    }
}

@media screen and (max-width: 1280px) {
    #content{
        width: 77%;
    }

    .second-ti{
        text-align: center;
    }

    .p_btn{
        font-size: 1.2rem;
    }

    .p_w_contain h3,.p_worry_inner{
        width: 80%;
    }

    .p_1280{
        display: block;
    }
}

@media screen and (max-width: 1052px) {
    img.p_worry_image{
        transform: translate(185px, -59px);
    }

    .p_content{
        width: 80%;
    }
}

@media screen and (max-width: 990px){
    #content{
        width: 80%;
    }

    .content_inner{
        padding: 0 0 10% 0;
    }

    .p_container{
        width: 90%;
    }

    .p_image{
        width: 40%;
    }

    .p_content{
        width: 80%;
    }

    .spacing-row td{
        height: 7px;
    }

    .second-ti{
        margin-bottom: 2%;
    }

    .p_lower{
        width: 90%;
    }

    img.p_worry_image{
        transform: translate(185px, -53px);
    }

    .p_solve::after{
        width: 55vw;
    }
}

@media screen and (max-width: 810px){
    img.p_worry_image{
        width: 120px;
        transform: translate(175px, -57px);
    }
}

@media screen and (max-width: 768px) {
    #content {
        width: 90%;
    }

    .same_s{
        font-size:1.3rem;
    }

    .content_inner {
        padding: 0 0 10% 0;
    }

    .list_image_inner {
        padding-top: 21%;
        padding-bottom: 5%;
        margin-top: -11%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .p_image {
        margin-right: 30px;
    }

    .second-ti {
        font-size: 1.1rem;
        padding-left: 0;
    }

    #content h2 {
        font-size: 1.6rem;
    }

    #p_import picture {
        margin: 3% auto;
    }

    #p_import img {
        width: 100%;
    }

    .p_worry_inner {
        padding: 3%;
    }

    .p_w_contain h3,
    .p_worry_inner {
        width: 100%;
    }

    td:not(.table_header):not(.spacing-row) {
        font-size: 1.3rem;
    }

    img.p_worry_image {
        width: 120px;
        transform: translate(200px, -54px);
    }

    .p_solve::after {
        width: 80vw;
    }

    .table_header {
        font-size: 1.6rem;
    }

    .footer-nav {
        padding: 0;
    }

    #p_service h2::after{
        width: 100%;
        margin-top:0;
    }

    #p_service p:first-of-type{
        padding-top: 2rem;
    }
}

@media screen and (max-width: 700px){
    .p_container{
        flex-direction: column;
        justify-content: center;
    }

    .p_image {
        margin-right: 0;
        width: 90%;
        height: 200px;
        padding: 0 3.3%;
        border: none;
    }

    .p_image img{
        height: 200px;
        object-fit: contain;
        padding: 1rem;
    }

    .p_content{
        width: 90%;
        margin-top: 25px;
    }

    td:not(.table_header):not(.spacing-row){
        font-size: 13px;
    }

    .p_button{
        margin: 25px auto 0 auto;
    }

    tr:not(.spacing-row) td:first-child:not(.table_header) {
        width: 30%; 
    }
    
    tr:not(.spacing-row) td:not(.table_header) {
        width: 70%; 
    }

    #p_inquiry p:first-of-type{
        padding-bottom: 0;
    }
}

@media screen and (max-width: 580px){
    img.p_worry_image{
        width: 95px;
        transform: translate(170px, -67px);
    }
}

@media screen and (max-width: 520px){

    .p_solve::after{
        transform: translate(-50%, 29px);
    }

    .p_worry_inner p:first-of-type{
        padding-bottom: 2%;
    }
}

@media screen and (max-width: 480px){
    #container{
        margin-top: 15.1%;
    }

    #content h2{
        font-size: 1.5rem;
    }

    .same_s{
        font-size:1.2rem;
    }

    .p_lower h3{
        font-size: 1.4rem;
    }
    
    .p_content{
        margin-top: 15px;
    }

    .p_button{
        margin: 15px auto 0 auto;
    }

    .p_button br{
        display: block;
    }

    .p_btn{
        font-size: 1rem;
    }

    .p_button span.same_s {
        font-size: 0.8rem;
    }

    .table_header{
        border-bottom: 3.5px solid black;
    }

    .spacing-row td {
        height: 5px;
    }

    .p_lower p{
        font-size: 1.4rem;
    }

    #p_service{
        padding: 1rem;
    }

    .p_s_inner{
        width: 100%;
    }

    .p_s_inner ul{
        padding-left: 1rem;
        font-size: 1.4rem;
    }

    img.p_worry_image{
        width: 85px;
        transform: translate(144px, -50px);
    }

    .p_worry_inner p:first-of-type{
        padding-bottom: 4%;
    }

    .table_header{
        font-size: 1.5rem;
    }

    h1.table_header span{
        font-size: 1.2rem;
    }
    .p_worry_inner ul {
    left: -20px;
}
}

@media screen and (max-width: 420px){
    #content{
        width: 90%;
    }

    .p_solve::after {
        transform: translate(-50%, 27px);
    }

    img.p_worry_image{
        width: 75px;
        transform: translate(136px, -32px);
    }

    .p_content{
        width: 100%;
    }
    .p_worry_inner ul {
    left: -5px;
    font-size: 1.5rem;
    }
}

@media screen and (max-width: 390px){
    .p_worry_inner ul{
        margin-bottom: 1%;
    }

    img.p_worry_image{
        width: 60px;
        transform: translate(121px, -16px);
    }
}

@media screen and (max-width: 368px){
    img.p_worry_image{
        width: 45px;
        transform: translate(112px, -14px);
    }

    .contactBox dl dt{
        width: 220px;
    }

    .p_button{
        width: 100%;
    }

    .p_btn{
        font-size: 1rem;
    }

    .table_header {
        font-size: 1.3rem;
    }

    h1.table_header span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 324px){
    .p_btn {
        font-size: 0.9rem;
    }

    .contactBox input, select, textarea{
        min-width: 140px;
    }
}

@media screen and (max-width: 324px){
    .p_worry_image{
        display: none;
    }
}

@media screen and (max-width: 480px){
#p_service{
width:100%;
}
}