@charset "UTF-8";

/**********************************************************
*
* SMTパーツ
*
**********************************************************/


/* layout
-------------------------------------------*/
.content {
width: 100%;
}
.content-inner {
max-width: 100%;
width: 100%;
margin: 0 auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 5.33vw;
grid-row-gap: 5.33vw;
align-items:center;
}
.grid-item-01 { 
grid-area: 1 / 1 / 2 / 2;
}
.grid-item-02 {
grid-area: 1 / 2 / 2 / 3;
}
.grid-item-03 {
grid-area: 2 / 1 / 3 / 3;
}

/* decoration
-------------------------------------------*/
.border-r-10 {
border-radius: 10px;
}
.border-r-10--top {
border-radius: 10px 10px 0 0;
}
.border-r-10--bottom {
border-radius: 0 0 10px 10px;
}

/* color
-------------------------------------------*/
.color-white {
color: #fff;
}
.color-red {
color: #c03;
}
.bg-white {
background-color: #fff;
}
.bg-red {
background-color: #c03;
}
.bg-pink {
background: #fee;
}
.bg-yellow {
background: #fff1bb;
}

/* heading
-------------------------------------------*/
.h1-ttl {
font-size: 4.26vw;
font-weight: bold;
padding: 4vw;
border: 3px solid #c03;
display: inline-block;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.h2-ttl {
font-size: 4.8vw;
font-weight: bold;
padding: 4.8vw 4vw;
width: 100%;
}  
.h3-ttl {
font-size: 3.73vw;
padding: 3.2vw 2.53vw;
border: 1px solid #000;
display: inline-block;
max-width: 100%;
min-width: 44vw;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
}

/* text
-------------------------------------------*/
.txt-common--ttl {
font-size: 4.8vw;
font-weight: bold;
}
.txt-common--read {
font-size: 4.26vw;
}
.txt-common--date {
font-size: 3.2vw;
}
.txt-common--message {
font-size: 1.3rem;
}
.txt-common--description {
font-size: 1.4rem;
}

/* button
-------------------------------------------*/
.btn-wrapper {
text-align: center;
}
.common-btn {
display: inline-block;
line-height: 1;
text-decoration: none;
font-size: 3.46vw;
transition: 0.3s;
border: 2px solid #000;
border-radius: 140px;
padding: 3.05vw 9.06vw;
}
.common-btn:visited {
color: #000;
}
.common-btn.blank {
position: relative;
display: inline-flex;
justify-content: center;
}
.common-btn.blank .icon-common--blank-image-wa {
position: absolute;
right: 10px;
}

/* link
-------------------------------------------*/
a:hover {
color: initial;
opacity: 0.7;
}
.txt-icon--blank {
color: #272727;
font-size: 1.4rem;
text-decoration: underline;
}
.icon-common--blank-image-wa {
width: 2.4vw;
height: 2.13vw;
}

/* area-head
-------------------------------------------*/
.area-head {
padding-top: 8.53vw;
}
.box-read {
margin: 8.53vw 0 10.6vw;
}

/* area-message
-------------------------------------------*/
.area-message {
margin-bottom: 9.86vw;
}
.area-message-content {
padding: 5.33vw;
}
.area-message-content .col-2 {
display: flex;
align-items: center;
gap: 4vw;
width: 100%;
}
.box-staff {
flex-direction: row-reverse;
}
.area-message .ico-person {
width: 29.3vw;
height: auto;
margin-bottom: 20px;
}
.message {
padding: 4vw;
}
.box-improve {
padding: 2.66vw 0;
margin-bottom: 32px;
}
.img-improve {
width: 40vw;
}

/* area-feedback
-------------------------------------------*/
.area-feedback {
width: 100vw;
margin-left: -20px;
min-width: 320px;
padding: 10.6vw 0;
}

/* area-customer-voice
-------------------------------------------*/
.area-customer-voice-inner {
max-width: 89.3%;
}
.area-customer-voice-content {
padding: 8.53vw 5.33vw;
}
.area-customer-voice-content .ico-person {
width: 29.3vw;
height: auto;
}

/* area-point
-------------------------------------------*/
.area-point-inner {
max-width: 89.3%;
}
.area-point-content {
padding: 8.53vw 5.33vw;
}
.img-point {
width: 100%;
}
.area-point .list-notes__item::before {
font-size: 3.2vw;
}
.area-point .list-notes__item-inner {
font-size: 3.2vw;
}

/* area-btn
-------------------------------------------*/
.area-btn {
margin: 8.53vw 0 15.7vw;
}
.btn-foot:first-of-type {
margin-bottom: 8.26vw;
}

/* related-links
-------------------------------------------*/
.related-link {
width: 100vw;
margin-left: -20px;
min-width: 320px;
padding: 10.6vw;
background-color: #f4f4f4;
}
.related-link-inner {
max-width: 89.3%;
}

/* another css over ride
-------------------------------------------*/
.txt-common--link a {
    font-size: 1.4rem;
}