@charset "UTF-8";
/* CSS Document */

#case {
margin-bottom: 60px;
}
#case h2.head {
display: inline-block;
margin: 20px auto 40px 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
  color: #003175;
  padding: 4px 10px;
  background: linear-gradient(0deg, rgb(218, 226, 249) 50%, rgba(255, 255, 255, 1) 50%);
}
#case h2.head span {
font-size: 30px;
}

#case h2.mid1 {
display: inline-block;
margin: 60px auto 20px 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  color: #002F68;
  padding: 4px 10px;
  background: linear-gradient(0deg, rgba(255,241,188,1.00) 50%, rgba(255, 255, 255, 1) 50%);
}

#case h2.mid2 {
display: inline-block;
margin: 60px auto 30px 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  color: #005168;
  padding: 4px 10px;
  background: linear-gradient(0deg, rgb(230, 241, 220) 50%, rgba(255, 255, 255, 1) 50%);
}

#case p {
	font-size: 15px;
	line-height: 1.8;
}

#case p.note {
	font-size: 13px;
	text-align: right;
}

.interview dt {
  display: grid;
  grid-template-columns: 1.5em auto;
  font-size: 18px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
  color: #005168;
  line-height: 1.4;
  letter-spacing: -1px;
}

.interview dd {
  display: grid;
  grid-template-columns: 6em auto;
  margin-top: 10px;
}

.interview dd + dt {
  margin-top: 40px;
}

.img {
margin: auto;
display: grid;
gap: 15px;
align-items: stretch;
}

.img li {
list-style-type: none;
}

.img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.col1-2 { grid-template-columns: 1fr 2fr; }
.col3-2 { grid-template-columns: 3fr 2fr; }
.col2 { grid-template-columns: 1fr 1fr; }
.col3 { grid-template-columns: repeat(3, 1fr); }
.col4 { grid-template-columns: repeat(4, 1fr); }

.vsonic {
margin: 40px auto;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
}
.vsonic img {
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
.vsonic .btn a {
display: block;
}

.vsonic .btn a span {
display: block;
text-align: center;
font-size: 14px;
margin-top: 10px;
}

.gap-y {
margin: 10px auto;
}

.btn {
text-align: center;
margin: 40px 0;
}
.btn a {
display: inline-block;
background-color: #FF7D9D;
color: #FFF;
font-size: 20px;
line-height: 1.4;
padding: 20px 30px;
transition: 0.5s;
border-radius: 10px;
}
.btn a:hover {
background-color: #FF6389;
}
.data {
display: grid;
grid-template-columns: 4em auto;
	font-size: 14px;
}
.data dd {
position: relative;
padding-left: 1em;
}
.data dd::before {
content: "：";
position: absolute;
left: 0;
top: 0;
}

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

.portrait {
float: right;
margin-left: 10px;
}
.portrait img {
display: block;
width: 220px;
margin: auto;
}
.portrait p {
text-align: center;
margin-top: 10px;
line-height: 1.6!important;
font-size: 12px!important;
}