@charset "UTF-8";

/**********************************************************
*
* PCパーツ
*
**********************************************************/


/* layout
-------------------------------------------*/
.content {
width: 100%;
max-width: 100vw;
padding-inline: 10px;
}
.content-inner {
max-width: 960px;
width: 100%;
margin: 0 auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 54px;
grid-row-gap: 0px;
align-items:center;
}
.grid-item-01 {
grid-area: 1 / 1 / 3 / 2;
}
.grid-item-02 {
grid-area: 1 / 2 / 2 / 3;
}
.grid-item-03 {
grid-area: 2 / 2 / 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: 1.8rem;
font-weight: bold;
padding: 20px;
border: 3px solid #c03;
display: inline-block;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.h2-ttl {
font-size: 2.4rem;
font-weight: bold;
padding: 24px 30px;
width: 100%;
}
.h3-ttl {
font-size: 1.8rem;
padding: 16px;
border: 1px solid #000;
display: inline-block;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1;
}

/* text
-------------------------------------------*/
.txt-common--ttl {
font-size: 2.4rem;
font-weight: bold;
}
.txt-common--read {
font-size: 1.8rem;
}
.txt-common--date {
font-size: 1.6rem;
}
.txt-common--message {
font-size: 1.6rem;
}
.txt-common--description {
font-size: 1.6rem;
}

/* button
-------------------------------------------*/
.btn-wrapper {
text-align: center;
}
.common-btn {
display: inline-block;
line-height: 1;
text-decoration: none;
font-size: 1.8rem;
transition: 0.3s;
border: 2px solid #000;
border-radius: 140px;
padding: 19px 44px 18px;
}
.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.6rem;
text-decoration: underline;
}

/* area-head
-------------------------------------------*/
.area-head {
padding: 46px 16px 0;
}

/* area-message
-------------------------------------------*/
.area-message {
padding-inline: 16px;
}
.area-message-content {
padding: 2.14vw 9.02vw;
}
.area-message-content .col-2 {
display: flex;
align-items: center;
gap: 30px;
width: 100%;
}
.box-staff {
flex-direction: row-reverse;
}
.ico-person {
width: 160px;
height: 160px;
margin-bottom: 20px;
}
.message {
padding: 30px;
}
.box-improve {
padding: 16px 0;
margin-bottom: 32px;
}
.img-improve {
max-width: 200px;
}

/* area-customer-voice
-------------------------------------------*/
.area-customer-voice-content {
padding: 48px 78px;
}
.area-customer-voice-content .ico-person {
width: 160px;
height: 160px;
margin-bottom: 20px;
}

/* area-point
-------------------------------------------*/
.area-point-content {
padding: 48px 80px 64px;
}
.img-point {
width: 100%;
}

/* related-links
-------------------------------------------*/
.related-link {
padding: 40px 0 40px 80px;
background-color: #f4f4f4;
}
.related-link-inner {
max-width: 760px;
}

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