#sec_fv .btn {
margin-top: 5em;
}
.p-feature .p-ttl,
.p-series .p-ttl,
.p-spec .p-ttl {
font-size: 1.8rem;
line-height: 1.4;
text-align: center;
padding: 0.5em 1em;
position: relative;
background: #000;
color: #fff;
}
.c-imgCol.nogap {
gap: 0;
}
.c-imgCol_i.flex_one,
.c-imgCol_t.flex_one {
flex: 1;
}
.c-imgCol_i.flex_one_half,
.c-imgCol_t.flex_one_half {
flex: 1.5;
}
.pc_pl_20 {
padding-left: 20px;
}
.pc_pr_20 {
padding-right: 20px;
}
.padding10 {
padding: 10px;
}
.alc {
align-items: center;
}
.tac {
text-align: center;
}
.frame {
border: 1px solid #aaa;
padding: 1em;
}
.c-btn01._arw a, .c-btn01._arw button, .c-btn01._arw input {
background-image: url(//exgel.jp/jpn/wp-content/themes/exgel-jpn/assets/img/common/arw.svg);
background-repeat: no-repeat;
background-position: right 1.5em center;
background-size: 1.5em auto;
padding-right: 3em;
}
.mb0 {
margin-bottom: 0;
}
.c-images .c-image-left {
margin: 0 0 10px;
}
.c-images .c-image-right {
text-align: right;
}
.p-series {
margin: 0 0 100px;
}
.p-series .wrap {
padding-bottom: 100px;
border-bottom: 1px solid #aaa;
}
.p-series .copy {
font-size: 2.8rem;
line-height: 1.6;
font-weight: 500;
margin: 1em 0;
text-align: center;
margin-top: 100px;
}
.p-series .txt {
font-size: 1.6rem;
line-height: 2;
margin-top: 2em;
text-align: center;
margin-bottom: 2em;
}
.p-series .c-imgCol {
margin-top: 100px;
}
.p-series .c-ttl01 {
font-size: 2rem;
background-color: #F8F8F8;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.p-series .c-ttl01::before {
content: "";
width: 20px;
height: 20px;
background-color: #F8F8F8;
border-left: 1px solid #aaa;
border-bottom: 1px solid #aaa;
position: absolute;
left: 50%;
bottom:-10px;
transform: translateX(-50%) rotate(-45deg);
}
.p-series .c-imgCol_t .txt {
text-align: left;
}
.p-chart {
margin-bottom: 100px;
overflow: scroll;
}
.p-chart-list {
display: flex;
gap: 30px;
}
.p-chart-item {
flex: 1;
border: 1px solid #aaa;
padding: 20px;
}
.p-chart-item figure {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.p-chart-item figcaption {
text-align: center;
}
.p-chart-item figcaption h4 {
font-size: 35px;
font-weight: bold;
margin: 5px 0;
}
.p-chart-item .btn {
text-align: center;
margin: 0 0 20px;
}
.p-chart-item .txt {
padding: 0 0 10px;
border-bottom: 1px solid #aaa;
margin: 0 0 10px;
}
.review-item {
display: flex;
align-items: center;
padding: 0 30px;
}
.performance {
margin: 0 10px 0 0;
width: 70px;
}
.point {
display: flex;
}
.point .point-item {
width: 15px;
height: 15px;
background-color: #DEDEDE;
border-radius: 50%;
margin: 0 10px 0 0;
}
.point .point-item.color {
background-color: #FFD900;
}
.c-imgCol_t h4 {
font-size: 2rem;
border: 1px solid #aaa;
padding: 0.5em 0;
margin-top: 2.5em;
text-align: center;
margin-bottom: 20px;
}
.item-preference {
margin-top: 100px;
}
.item-preference.comparison {
}
.item-preference-inner {
display: flex;
align-items: flex-start;
}
.item-preference-inner .txt {
}
.item-preference.comparison .preference-list {
display: flex;
gap: 0;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 0 30px;
width: 70%;
}
.item-preference.comparison .preference-item {
flex: inherit;
}
.item-preference.comparison .preference-item:nth-child(1) {
width: 100%;
margin: 0 0 30px;
}
.item-preference.comparison .preference-item:nth-child(2),
.item-preference.comparison .preference-item:nth-child(3) {
width: 48%;
}
.item-preference.first {
width: 600px;
}
.item-preference.last .preference-list {
flex-wrap: wrap;
}
.item-preference.last .preference-list .preference-item {
flex: inherit;
}
.item-preference.last .preference-list .preference-item:nth-child(1) {
flex: 1;
}
.item-preference.last .preference-list .preference-item:last-child {
width: 660px;
}
.preference-list {
display: flex;
gap: 30px;
}
.preference-item {
flex: 1;
}
.preference-heading {
padding: 10px;
background-color: #EBEBEB;
margin: 0 0 10px;
font-size: 16px;
}
@media  screen and (max-width: 767px) {
.preference-heading {
text-align: center;
}
}
.preference-ttl {
font-size: 16px;
border: 1px solid #aaa;
padding: 0.5em;
text-align: center;
margin-bottom: 20px;
}
.preferencep-img {
margin-bottom: 10px;
}
.btn_wrap {
display: flex;
justify-content: center;
width: 500px;
margin: 0 auto;
}
.btn_wrap .btn {
flex: 1;
}
.p-target {
margin: 0 0 100px;
}
.p-target h4,
.p-target h2 {
font-size: 1.8rem;
line-height: 1.4;
text-align: center;
padding: 0.5em 1em;
position: relative;
background: #000;
color: #fff;
margin: 0 0 20px;
}
.p-target-txt .txt {
padding: 0 0 30px;
border-bottom: 1px solid #aaa;
}
.p-target .wrap {
display: flex;
}
.p-target-txt {
flex:1;
}
.p-target-list {
flex:2;
padding: 0 0 0 30px;
border-left: 1px dotted #aaa;
margin: 0 0 0 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.p-target-item {
width: 48%;
text-align: center;
border: 1px solid #aaa;
padding: 10px;
margin: 0 0 20px;
}
.p-target-item.color {
background-color: #FFD900;
}
.p-type {
margin-bottom: 10rem;
}
.p-type .p-ttl {
font-size: 1.8rem;
line-height: 1.4;
text-align: center;
padding: 0.5em 1em;
position: relative;
background: #000;
color: #fff;
margin: 0 0 20px;
}
.p-type table {
width: 100%;
border-collapse: collapse;
}
.p-type .vt {
width: 20px;
background-color: #DEDEDE;
position: relative;
}
.p-type .vt.arrow {
clip-path: polygon(50% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}
.p-type .vt span {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
transform: translate(-50%, -50%);
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: mixed;
}
.p-type .hr span {
text-align: center;
display: block;
margin: 0 10px 10px;
padding: 5px 0;
}
.p-type .hr.bl span {
background-color: #C3E8FF;
}
.p-type .hr.gr span {
background-color: #E7F59C;
}
.p-type .hr.or span {
background-color: #FFDBA8;
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}
.p-type .block {
margin: 0 10px 10px;
}
.p-type .block .inner{
display: flex;
padding: 10px 20px;
align-items: center;
}
.p-type .block .inner.bl{
background-color: #EAF7FF;
}
.p-type .block .inner.or{
background-color: #FFEFD8;
}
.p-type .block .inner.yl{
background-color: #F9FFD8;
}
.p-type .block .inner .txt {
margin: 0 0 0 20px;
flex: 1;
}
.p-type .block .inner .txt span {
font-size: 30px;
font-weight: bold;
display: block;
}
.p-type .link {
background-color: #F2F2F2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
}
.logo-txt {
font-size: 32px;
}
@media screen and (min-width: 768px) {
.p-feature .c-imgCol_t {
width: 35%;
flex: 0 1 35%;
min-width: 0;
}
.p-feature .c-imgCol_t50 {
width: 50%;
flex: 0 1 50%;
min-width: 0;
}
.p-feature .c-imgCol_i {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
.p-feature .c-imgCol_i img {
width: 100%;
height: auto;
display: block;
}
}
.p-compare {
display: flex;
gap: 10px;
}
.p-compare_item {
flex: 1;
position: relative;
}
.p-compare_label {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.6rem;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.85);
padding: 2px 8px;
line-height: 1.4;
}
.p-compare_ttl {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
border: 1px solid #aaa;
padding: 6px 10px;
margin: 0 0 10px;
}
.p-compare_cap {
font-size: 1.4rem;
line-height: 1.6;
margin: 10px 0 0;
}
@media only screen and (max-width: 1000px) {
.p-chart .wrap {
width: 1000px;
padding: 0 20px;
max-width: none;
}
}
@media  screen and (max-width: 767px) {
.c-imgCol_i.flex_one, .c-imgCol_t.flex_one {
flex: inherit;
}
.item-preference.first {
width: 100%;
}
.preference-item {
flex: inherit;
}
.item-preference .preference-item {
width: 100%;
text-align: left;
}
.item-preference .preference-item img {
width: 100%;
display: block;
}
.preference-list {
flex-wrap: wrap;
}
.btn_wrap {
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.p-target .wrap {
flex-direction: column  ;
}
.p-target-list {
margin: 30px 0 0;
border-radius: none;
padding: 0;
}
.p-type .table-wrap  {
overflow: scroll;
}
.p-type table {
width: 1000px;
}
.item-preference-inner {
flex-direction: column;
}
.item-preference.comparison .preference-list {
width: 100%;
margin: 30px 0 0;
}
.p-compare {
flex-direction: column;
gap: 20px;
}
.c-ttl04.tal{
text-align: center;
}
}