@charset "utf-8";

.overflow-x-clip {
overflow-x: clip;
}

.sub-title-border {
color:#0364C6;
}


/*------------------------------------
header
--------------------------------------*/
.test-header {
background: #ecf6fe;
background:image-set(url("../images/Anniversary_bg.webp") type("image/webp"),
url("../images/Anniversary_bg.png") type("image/png")) center bottom no-repeat, linear-gradient(#ffffff, #ecf6fe);
background-size:1200px;
border-bottom:7px solid #74b9eb;
box-sizing: border-box;
overflow: hidden;
height: 140px;
}
@media (min-width: 992px) {
.test-header {
background:image-set(url("../images/Anniversary_bg.webp") type("image/webp"),
url("../images/Anniversary_bg.png") type("image/png")) center bottom no-repeat, linear-gradient(#ffffff, #ecf6fe);
background-size:2300px;
border-bottom:10px solid #74b9eb;
height: 230px;
}
}

/*------------------------------------
contents
--------------------------------------*/
.img-flex {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.img-flex {
width: 67%;
}
}
@media (min-width: 992px) {
.img-flex {
width: 75%;
max-width: 650px;
margin-left:1.5rem;
}
}

.img1 {
width: 250px;
height: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.img1 {
position: absolute;
top:25px;
left: 102%;
}
}
@media (min-width: 992px) {
.img1 {
top:-50px;
width: 350px;
}
}
@media (min-width: 1200px) {
.img1 {
left: 120%;
}
}

.img-flex.flex2 {
margin-left:auto;
margin-right:1.5rem;
}
.img2 {
width: 220px;
height: auto;
}

@media (min-width: 768px) {
.img2 {
position: absolute;
top:-35px;
right: 102%;
margin-left: auto;
}
}
@media (min-width: 992px) {
.img2 {
top:-70px;
width: 320px;
}
}
@media (min-width: 1200px) {
.img2 {
right: 115%;
}
}

.img3 {
width: 260px;
height: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.img3 {
position: absolute;
top: -50px;
left: 103%;
}
}
@media (min-width: 992px) {
.img3 {
width: 340px;
top: -85px;
left: 100%;
}
}
@media (min-width: 1200px) {
.img3 {
left: 115%;
}
}

.jcr-img {
text-align: center;
width: 75vw;
max-width: 300px;
margin: auto;
}
@media (min-width: 992px) {
.jcr-img {
width: 100%;
max-width: 442px;
}
}

/*--- gray box ---*/
.list_area-lgray {
background: #f4f4f4;
border-radius:1.5rem;
margin:auto;
padding:1rem;
width: 100%;
max-width: 400px;
}
@media (min-width: 768px) {
.list_area-lgray {
padding:1.5rem;
max-width: 98%;
}
}
@media (min-width: 1200px) {
.list_area-lgray {
max-width: 94%;
}
}

.list_area-lgray .list-img {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
gap:15px;
margin-bottom:0;
}
@media (min-width: 768px) {
.list_area-lgray .list-img {
flex-direction: row;
}
}

.list_area-lgray .list-inner {
background: #fff;
border-radius: 1.5rem;
padding:2rem 1rem;
width: 100%;
}
@media (min-width: 768px) {
.list_area-lgray .list-inner {
padding:3rem 1.5rem;
width: calc((100% - 15px) / 2);
}
}

/*--- 約定 ---*/
h4.ttl-blue {
text-align: center;
background: #197CD1;
width: 80%;
max-width: 300px;
padding: .4rem 1.5rem;
border-radius: 50rem;
color: #fff;
font-size: 1.7rem;
margin: 0 auto 2rem;
}
@media (min-width: 768px) {
h4.ttl-blue {
font-size: 2rem;
}
}

.data-text {
text-align: center;
font-weight: bolder;
font-size:2.5rem;
}
@media (min-width: 768px) {
.data-text {
font-size:4rem;
}
}
.data-text .ammount {
font-weight: 600;
font-size:3em;
line-height: 100%;
letter-spacing: -2px;
}
.data-text .ammount > span {
font-size:0.9em;
}
.data-text .sub {
font-size:.5em;
font-weight: normal;
}

.list-comment {
text-indent: -1.2rem;
padding-left: 1.2rem;
font-size:.9em;
}


/*--- お客様の声 ---*/
.voice-list {
display: flex;
flex-wrap: wrap;
gap:15px;
padding:0 15px;
}
.voice-list li {
width: 100%;
border: 2px solid #DBDBDB;
border-radius: 1.5rem;
padding: 0;
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
/*margin-bottom: 15px;*/
transition: all 0.4s ease 0s;
}
@media (min-width: 768px) {
.voice-list li {
width: calc((100% - 30px) / 3);
}
}

.voice-list li.is-hidden {
display: none;
visibility: hidden;
opacity: 0;
height: 0;
margin: 0 auto;
padding: 0;
}

.voicelist-label {
display: block;
padding: .5rem 1.5rem;
color:#fff;
line-height: 1.5;
background: #4C9BCD;
}

.v-lbl-ppl {
background:#776CCF;
}
.v-lbl-grn {
background:#5FA661;
}

.voice-ttl {
padding: 1rem;
flex-grow: 1;
}
@media (min-width: 768px) {
.voice-ttl {
padding: 1.5rem;
}
}

.voicelist-date {
font-size: 1.4rem;
color: #888888;
margin-top:auto;
padding: .5rem 1rem 0;
}
@media (min-width: 768px) {
.voice-ttl {
padding: .5rem 1.5rem 0;
}
}



/*--- voicelist-modalbtn ---*/
a.voicelist-modalbtn {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 10px;
padding: 12px 20px 12px 10px;
width: calc(100% - 3rem);
margin:auto;
border-top: 1px solid #DBDBDB;
}
a.voicelist-modalbtn span {
display: block;
position: relative;
background: #006CB9;
width: 24px;
height: 24px;
border-radius: 50%;
line-height: 1;
flex-shrink: 0;
transition: .2s;
}
a.voicelist-modalbtn span::after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
font-size: 1.6rem;
font-weight: normal;
content: "\e912";
color:#fff;
top: 50%;
left: 50%;
transform: rotate(90deg) translate(-50%, 50%);
transition: .2s;
}
a.voicelist-modalbtn:hover {
color: #2E99FD !important;
}
a.voicelist-modalbtn:hover span {
background: #2E99FD;
}


iframe.voice-iframe {
width: 100%;
min-height: 50vh;
}