@charset "UTF-8";

/* --------------- 共通 SP --------------- */
.noteh2{
  margin: 0 0 3rem;
  line-height: 1.5;
  text-align: center;
  color: var(--red);
  font-size: 2.1rem;
  font-weight: bold;
}
.noteh2 span{
  display: block;
  font-size: 1.4rem;
  color: #000;
}

/* --------------- オススメ SP --------------- */
.suggest{
  padding: 5rem 1.5rem 0;
  background: url(../img/bg-pink.jpg);
}
.suggest section{
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 0 25rem;
  background: url(../img/img-suggest_lady-sp.svg) no-repeat center bottom;
  background-size: 32rem;
}
.suggest section h2 + p{
  padding: 0 1rem 2rem;
  text-align: left;
  font-size: 1.4rem;
  font-weight: bold;
}
.suggest section h2 + p span{
  color: #910232;
  font-size: 1.6rem;
}

.suggest-in{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.suggest-in dl{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  margin: 0 0 1rem;
  padding: 2rem 2rem 0 3rem;
  text-align: left;
  border-radius: 2rem;
  background: #fff;
}
.suggest-in dl dt{
  width: 41%;  
}
.suggest-in dl dt span{
  display: block;
  margin: 0;
}
.suggest-in dl:first-child dt span{width: 10rem;}
.suggest-in dl:last-child dt span{width: 9.4rem;}

.suggest-in dl dd{
  width: 59%;
  padding: 0 0 1.2rem;
  line-height: 1.5;
}
.suggest-in dl dd p:first-child{
  padding: 0 0 0.3rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.suggest-in dl dd p:last-child{
  font-size: 1.4rem;
}

/* --------------- 加入例 SP --------------- */
.example{
  background-color: #f9f5f6;
}
.example::after{
  display: block;
  content: url('../img/exa-bg.svg');
}
.bg-exa{
  padding: 5rem 1.5rem 0;
  background-color: #eae1e3;
}
.example section{
  max-width: 140rem;
  margin: 0 auto;
}

.exa-flex{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  max-width: 42rem;
  margin: 0 auto;
}
.example article{
  width: auto;
  background-color: #fff;
  border-radius: 0 30px 0 0;
  text-align: center;
  padding: 4rem 3rem;
  margin-bottom: 3.5rem;
  font-weight: 500;
  position: relative;
  box-shadow: 0 0 2rem rgba(153, 153, 153, .2);
}
.example article:last-child{
  margin-bottom: 0;
}
.example article .exa-icon{
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
}
.example article h3{
  font-size: 2.4rem;
  font-weight: bold;
}
.example article h3 span{
  display: block;
  border-radius: 18px;
  width: 160px;
  margin: 0 auto;
  padding: .3rem 0 0;
  font-size: 1.8rem;
  font-weight: 500;
}
.example article h3 + p{
  font-size: 1.8rem;
  padding-block: 2rem;
  line-height: 1.5;
}

/* 保証額 */
.example article div{
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  margin: 0 auto;
  padding-block: 3rem;
}
.example article div dl{
  width: 49%;
  border-radius: 5px;
  padding-block: 1rem;
  line-height: 1.5;
}
.example article div dl dd span{
  padding: 0 0.1rem;
  font-size: 2.4rem;
  font-weight: bold;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;  
}
/* 2番目 -------------------- */
.example article:nth-child(2) div dl{
  width: 100%;
}


.example article div + p{
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
  padding-block: 1rem;
}
.example article div + p span:first-child{
  font-size: 3rem;
  color: #ffff00;
  padding-inline: .5rem;
}
.example article div + p span:last-child{
  font-size: 2rem;
}


/* カラー01 */
.example .color01 h3{
  color: #C6384F;
}
.example .color01 div + p{
  background-color: #C6384F;
}
.example .color01 h3 span{
  color: #71212e;
  background-color: #f9f5f6;
}
.example .color01 div dl{
  background-color: #f9f5f6;
}
/* カラー02 */
.example .color02 h3{
  color: #e86f16;
}
.example .color02 div + p{
  background-color: #e86f16;
}
.example .color02 h3 span{
  color: #542808;
  background-color: #fcf3ed;
}
.example .color02 div dl{
  background-color: #fcf3ed;
}
/* カラー03 */
.example .color03 h3{
  color: #7cac09;
}
.example .color03  div + p{
  background-color: #7cac09;
}
.example .color03 h3 span{
  color: #354905;
  background-color: #eff5e1;
}
.example .color03 div dl{
  background-color: #eff5e1;
}


/* --------------- 補償例 SP --------------- */
.comp{
  padding: 5rem 0 0;
  background: var(--bgpink);
}
.comp section.comp-main{
  padding: 0 1.5rem 5rem;
}
.comp section h2{
  line-height: 1.8;
}
.comp section .comp-in{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}
.comp section .comp-in article{
  width: auto;
  margin: 0 0 1rem;
  padding: 3rem 2rem;
  background: #fff;
  border-radius: 1rem;
  position: relative;
}
.comp-in article p.comp-no{
  display: none;
}
.comp_no-pc{
  display: none;
}
.comp_no-sp{
  display: block;
}
.comp_no-sp dl{
  display: flex;
  font-weight: bold;
}
.comp_no-sp dl dt{
  width: 38%;
  margin: 0 2rem 0 0;
  border-right: 1px solid #ccc;
}
.comp_no-sp dl dt span{
  display: block;
}
.comp_no-sp dl dd{
  width: 62%;
}
.comp_no-sp dl dd p{
  line-height: 1;
  color: #e8ccd0;
  font-size: 3rem;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;  
}
.comp_no-sp dl dd h3{
  font-size: 2rem;
}
.comp-ttl{
  line-height: 1.6;
  text-align: left;
  padding: 2.5rem 0 0 0;
  font-size: 1.4rem;
}
.comp-ttl.comp-ttl-left{
  text-align: left;
}
.comp-icon1_sp{width: 6.4rem; margin: 0 0 0 1rem;}
.comp-icon2_sp{width: 10rem;}
.comp-icon3_sp{width: 8.2rem;}


/* 補填内容 07-11 SP
-------------------------------------*/
.comp section.comp-sub{
  padding: 5rem 1.5rem 4rem;
  background: #eae1e3 url(../img/comp-icon-arrow.png) no-repeat center top;
}
.comp section.comp-sub h4{
  text-align: center;
  color: var(--red);
  font-size: 2.4rem;
  font-weight: bold;
}
.comp-card{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  padding:3rem 0 0;
}
.comp-card article{
  width: auto;
  margin: 0 0 1rem;
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
}
.comp-card article dl{
  display: flex;  
  align-items: flex-start;
}
.comp-card article dl dt{
  width: 50px;
  line-height: 1;  
  font-size: 3rem;
  font-weight: bold;
  color: #e8ccd0;
}
.comp-card article dl dd{
  width: calc(100% - 50px);
  padding: 0 0 0 1.5rem;
  line-height: 1.4;  
  font-size: 2.1rem;
  font-weight: bold;
  border-left: 1px solid #ccc;
}
.comp-card article dl dd br.br08{
  display: none;
}

.comp-card article ol{
  padding: 2rem 0 0;
  font-weight: bold;
}
.comp-card article ol li:first-child{
  font-size: 1.8rem;
  color: var(--red);
}
.comp-card article ol li:nth-child(2){
  padding: 0 0 1rem;
  font-size: 1.4rem;
  color: #000;
}
.comp-card article ol li:last-child{
  font-size: 1.4rem;
  font-weight: normal;
}

/* --------------- 選ばれるポイント SP --------------- */
.point section{
  padding: 5rem 1.5rem;
}
.point-block{
  padding: 2.5rem 0;
  border-bottom: 1px solid #ccc;
}
.flex-01,.flex-02{
  max-width: 110rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-01 .point-ph,
.flex-01 .point-ttl{
  width: auto;
}
.flex-02 .point-ph,
.flex-02 .point-ttl{
  width: auto;
}

/* 選ばれるポイント 内容 SP --------*/
.point-ttl{
  padding: 2rem 0 0;  
}
.point-ttl dl{
  display: flex;
  align-items: center;
}
.point-ttl dl dt{
  width: 70px;
  margin: 0 2rem 0 0;
  padding: 0.5rem 0 0;
  border-right: 1px solid #ccc;
}
.point-ttl dl dt img{
  display: block;
  width: 5.5rem;
}
.point-ttl dl dd{
  width: calc(100% - 70px);
  line-height: 1.6;
  font-size: 1.8rem;
  font-weight: bold;
}
.point-ttl dl dd br{
  display: block;
}
.point-ttl dl dd span{
  padding: 0 0.1rem;
  font-size: 1.4rem;
  color: var(--red);
}
.point-ttl dl + p{
  padding: 2rem 0 0;
  font-size: 1.4rem;
}
.point-ttl dl + p span{
  display: block;
  padding: 0.5rem 0 0 0;
  font-size: 1.2rem;
}
.point-ttl dl + p span small{
  color: var(--red);  
}
/* テキスト幅調整 */
.point-ttl dl + p.point-ttl-2{
  width: auto;
}

/* ポイント04-05 SP
------------------------------*/
.point-card-wrap{
  display: flex;
  flex-direction: column;
  max-width: 120rem;
  margin: 0 auto;
}
.point-half-1{
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 0 0 2rem;
  border-right: none;
  border-bottom: 1px solid #ccc;
}
.point-half-2{
  width:auto;
  padding: 0;
  border-left: none;
}

/* テキスト幅調整 SP */
.point-ttl dl + p.half-1{
  padding: 2rem 0 0;
}
.point-ttl dl + p.half-2{
  padding: 2rem 0;
}

/* テービル */
.point-tb{
  border-radius: 1rem;
  border: 1px solid #ccc;
  background: var(--bgpink);
  overflow: hidden;  
}
.point-tb table tr:first-child{
  border-bottom: 1px solid #ccc;
}
.point-tb table th{
  width: 25%;  
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.point-tb table td{
  width: 75%;
  padding: 2rem 1rem 2rem 2rem;
  background: #fff;
}
.point-tb table td ol{
  list-style: disc;
  list-style-position: inside;
}
.point-tb table td ol li{
  color: var(--red);
}
.point-tb table td ol li span{
  display: block;
  font-size: 1.4rem;
  color: #333;
}


/* 事例 SP --------*/
.case{
  padding: 5rem 0 0;
  background: url(../img/bg-pink.jpg);
}
.case-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.case-wrap article{
  width: auto;
  margin: 0 0 2rem;
  padding: 5rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
}
.case-wrap article:last-child{
  margin:0;  
}

/* case 事例 見出し SP -------*/
dl.case-no{
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
  padding: 0 0 2rem;
}
dl.case-no dt img{
  display: block;
  width: 5.4rem;
  margin: 0 auto;
}
dl.case-no dd{
  padding: 0 0 0 2rem;  
  border-left: 1px solid #ccc;
}

/* CASE01-02 */
dl.case-no.case-wh1{
  width: 18rem;   
}
dl.case-no.case-wh1 dt{
  width: 45%;
}
dl.case-no.case-wh1 dt img{
  width: 5.4rem;
}
dl.case-no.case-wh1 dd{
  width: 55%;
}

/* CASE03 */
dl.case-no.case-wh2 dt{
  width: 30%;
  padding: 1rem 0 0;
}
dl.case-no.case-wh2 dt img{
  width: 7.4rem;
}
dl.case-no.case-wh2 dd{
  width: 70%;
}

dl.case-no dd p{
  line-height: 1;
  color: var(--pink);
  font-weight: bold;
}
dl.case-no dd h3{
  font-size: 2.4rem;
  font-weight: bold;
}

/* case 家 SP -------*/
.case-home{
  display: flex;
  align-items: flex-start;
  padding: 2rem 1.5rem;
  background: #faf4f5;
  border-radius: 1rem;
}
.case-home p:first-child{
  width: 60px;
  text-align: center;
  color: #fff;
  background: var(--red);
  font-size: 1.6rem;
  font-weight: bold;
}
.case-home p:last-child{
  width: calc(100% - 60px);
  padding: 0 0 0 2rem;
  line-height: 1.6;
  font-size: 1.4rem;
}

/* case 費用 SP -------*/
.case-cost{
  padding: 3rem 0;  
}
.case-cost h4{
  padding: 0 0 1.5rem;
  text-align: center;
  border-bottom: 1px dashed #c76b7a;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--pink);
}
.case-cost dl{
  display: flex;
  padding: 2rem 0;
  border-bottom: 1px dashed #c76b7a;
}
.case-cost dl dt{
  width: 60%;
  line-height: 1.4;
  font-size: 1.4rem;
}
.case-cost dl dt span{
  display: block;
  font-size: 1.2rem;
  color: var(--red);
}
.case-cost dl dd{
  width: 40%;
  position: relative;
}
.case-cost dl dd p.case-par{
  position: absolute;
  right: -1rem;
  top: -1.8rem;
}
/* 吹き出し */
.balloon {
  position: relative;
  display: inline-block;
  text-align: center;
  min-width: 126px;
  max-width: 100%;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1.4rem;
  background: var(--red);
}
.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 15%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 6px solid var(--red);
}

.case-pay {
  text-align: right;
  padding: 0.8rem 0 0;
  font-size: 1.4rem;
}
.case-pay span{
  padding: 0 0.2rem 0 0;
  font-size: 1.8rem;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif; 
  color: #910232; 
}
/* case 費用合計 SP -------*/
.case-total{
  display: flex;
  background: var(--bgpink);
  border-radius: 1rem;
  overflow: hidden;
}
.case-total p:first-child{
  width: 74px;
  padding: 2rem 0 0 0;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  background: var(--red);
}
.case-total p:last-child{
  width: calc(100% - 74px);
  padding: 1.5rem 2rem;
  text-align: right;
  font-size: 1.6rem;
  color: var(--red);
}
.case-total p:last-child span{
  padding: 0 0.2rem 0 0;
  font-size: 2.4rem;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;    
}
/* case テキストと電話 SP -------*/
.case-contact{
  padding: 0 1.5rem 5rem;
}
.case-contact p:first-child{
  padding: 3rem 0;
  text-align: center;
  font-size: 1.4rem;
  color: #000;
}
.case-contact p.case-tel a{
  display: block;
  padding: 3rem;
  text-align: center; 
  background: #fff;
  border-radius: 1rem;
}
.case-contact p.case-tel a img{
  display: block;
  width: 42rem;
  margin: 0 auto;
}

/* case シミュレーション SP -------*/
.case-sl-bg{
  padding: 5rem 2rem 1rem;
  background: var(--red);
}
.case-sl{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 98rem;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.case-sl div{
  width: auto;
  padding: 0 0 3rem;
}
.case-sl div p:first-child{
  font-size: 1.8rem;
}
.case-sl div p:first-child span{
  color: var(--yl);
}
.case-sl div p:first-child span strong{
  font-size: 3rem;
}
.case-sl div p:nth-child(2){
  padding: 0 0 2rem;
  font-size: 2.1rem;
}
.case-sl div p:last-child{
  max-width: 52rem;
  margin: 0 auto;
  border-radius: 10rem;
  background: #fff;
}
.case-sl div p:last-child a{
  display: block;
  padding: 1.5rem 0;
  line-height: 1.4;
  font-size: 2.1rem;
  color: var(--red);  
  background: url(../img/case-arrow.svg) no-repeat 90% center;
  background-size: 9px;
}

.case-sl-ill{
  width: auto;
  padding: 0 1rem;
}


/* --------------------------- 
加入の流れ SP 
------------------------------ */
#flow .flow-wrap{
  background: var(--bgpink);
}
#flow section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 15px;
}
#flow ol li {
  background: #fff;
  padding: 6rem 2.2rem 2rem;
  margin: 6rem auto;
  text-align: center;
  position: relative;
}
#flow ol li:last-child {
  margin-bottom: 3rem;
}
#flow ol li .step {
  background: var(--pink);
  width: 7rem;
  height: 7rem;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  border-radius: 3.5rem;
  padding-top: 1.7rem;
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
}
#flow ol li .step span {
  display: block;
  font-size: 2.4rem;
}
#flow ol li p {
  font-size: 1.4rem;
  margin-top: 2rem;
}
#flow ol li p span {
  display: block;
  font-size: 1.6rem;;
}
#flow ol li::before, #flow ol li::after {
  content: "";
  display: block;
  width: 14px;
  height: 6px;
  background: transparent;
  position: absolute;
  bottom: -2.8rem;
}
#flow ol li::before {
  transform: rotate(30deg) skewX(30deg);
  left: calc(50% - 12px);
}
#flow ol li::after {
  transform: rotate(-30deg) skewX(-30deg);
  left: 50%;
}
#flow ol li:last-child::before, 
#flow ol li:last-child::after {
  display: none;
}

#flow section > p {
  text-align: center;
  font-size: 1.4rem;
}

/* インターネットで加入申込 SP
-------------------------------------*/
.convenient {
  background: #fff url("../img/flow-image.svg") no-repeat center bottom;
  margin: 3rem auto 0;
  padding: 3rem 1.5rem 60%;
  border-radius: 1rem;
}
.convenient h3 {
  color: var(--pink);
  font-size: 2.1rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 0 0 9rem;
  position: relative;
}
.convenient h3 strong {
  display: block;
  width: 8rem;
  height: 8rem;
  padding-top: 1.4rem;
  color: var(--pink);
  font-size: 2.4rem;
  text-align: center;
  white-space: nowrap;
  border: 5px var(--pink) solid;
  border-radius: 4rem;
  position: absolute;
  left: 0;
  top: 0;
}
.convenient h3 strong span {
  font-size: 2.8rem;
  padding-left: 2px;
}
.convenient h3 br{
  display: block;
}

.convenient ul {
  margin: 2.5rem 0 0;  
}
.convenient li {
  background: url("../img/icon-check.svg") no-repeat left 0.5rem;
  background-size: 3rem;
  padding-left: 3.5rem;
  font-size: 1.8rem;
  font-weight: bold;
}
.convenient li:first-child {
  border-bottom: 1px #ccc dashed;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.convenient li:last-child {
  padding-top: 0.5rem;
}
.convenient li strong {
  font-size: 2.4rem;
}
.convenient li span {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
}

/* ----------------------  
よくある質問 SP
-------------------------*/

.faq-wrapper {
  background: var(--bgpink);
  padding: 0 1.5rem 5rem;
}
#faq {
  max-width: 120rem;
  margin: 0 auto;
}

.faq-box {
  margin: 0 0 10px;
  border-radius:10px;
  color:#fff;
  overflow: hidden;
  background: var(--pink);
  border: 1px solid var(--pink);
}

.question {
  padding: 20px 50px;
  color: var(--pink);
  line-height: 1.6;
  cursor: pointer;
  background: #fff;
  font-size: 1.6rem;
  position: relative;
}
.question p {
  position: relative;
  padding: 0 0 0 0.5rem;
}
.question p::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: var(--pink);
  border-radius: 2.3rem;
  position: absolute;
  top: -0.7rem;
  left: -4.2rem;
}
.question p::after {
  content: "Q";
  color: #fff;
  font-size: 2.1rem;
  font-weight: bold;
  position: absolute;
  top: -0.5rem;
  left: -3.1rem;
}
.question::before, .question::after {
  content: "";
  display: block;
  background: var(--pink);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.question::before {
  width: 15px;
  height: 3px;
  right: 2rem;
}
.question::after {
  width: 3px;
  height: 15px;
  right: 2.6rem;
  opacity: 1;
  transition: .3s;
}
.question.active::after {
  opacity: 0;
}

.answer {
  display: none;
  padding: 20px 15px 30px;
  font-size: 1.6rem;
}
.answer p strong {
  color: #fcfc71;
  font-size: 1.4rem;
  font-weight: bold;
}



/* --------------------------- 
神戸市民生協は SP 
------------------------------ */
#about .about-bg{
  padding: 50px 0;
  background: url("../img/kobe-bg_sp.jpg") no-repeat center bottom;
  background-size: 600px;
}
@media screen and (min-width:600px) {
  #about .about-bg{
    background-size:auto;
  }
}

#about .about-bg section{
  padding: 0 15px;
}
#about .about-bg section h2{
  line-height: 1.5;
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--red);
}
#about .about-bg section > p {
  text-align: center;
  font-size: 1.4rem;
  margin: 2rem 0;
}
#about .about-bg section > p:last-of-type {
  padding-bottom: 3rem;
}

#about .about-cta{
  max-width: 470px;
  margin: 0 auto;  
}
#about .about-cta ol{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
#about .about-cta ol li{
  width: auto;
  padding: 0 0 15px;
}

#about .about-cta ol + p a{
  display:block;
  line-height: 1.8;
  text-align: center;
  padding: 20px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}
#about .about-cta ol + p span{
  display: block;
  max-width: 280px;
  margin: 0 auto;

}


/*----------------------------------------------------
SP用 375- 
----------------------------------------------------*/
@media screen and (max-width:374px) {
 
  /* --------------- #flow --------------- */
  #flow section > p {
    font-size: 1.4rem;
  }

}

/* -----------------------------------------------
TB 750
----------------------------------------------- */
@media screen and (min-width:750px) {

  /* --------------- オススメ TB --------------- */
  .suggest{
    padding: 5rem 0 0;
  }
  .suggest section{
    padding: 0;
    background: url(../img/img-suggest_lady-pc.svg) no-repeat left bottom;
    background-size: 34rem;
  }
  .suggest section h2 + p{
    padding: 0 0 3rem;
    text-align: center;
  }

  .suggest-in{
    flex-direction: row;
    margin: 0 0 0 35%;
    padding: 0 0 5rem;
  }
  .suggest-in dl{
    flex-direction: column;
    width: 48%;
    margin: 0;
    padding: 3rem 1rem 4rem;    
    text-align: center;
  }
  .suggest-in dl dt{
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .suggest-in dl dt span{
    margin: 0 auto;
  }  
  .suggest-in dl:last-child dt{
    padding:0;
  }
  .suggest-in dl dd{
    width: auto;
    padding: 2rem 0 0;
  }

  /* --------------- 補償例 TB --------------- */
  .comp section.comp-main{
    padding: 0 1.5rem;
  }
  .comp section .comp-in{
    flex-direction: row;
  }
  .comp section .comp-in article{
    width: 48%;
    margin: 0 0 6rem;
    padding:4rem 2rem 5rem;
  }
  .comp-in article p.comp-no{
    display: block;
    width: 100%;
    position: absolute;
    top:-6rem;
    left: 0;
    color: #e8ccd0;
    font-size: 7rem;
    font-weight: bold;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;  
  }
  .comp_no-sp{
    display: none;
  }
  .comp_no-pc{
    display: block;
  }
  .comp_no-pc h3{
    text-align: center;
    font-size:2.4rem;
    font-weight: bold;
    position: relative;
  }
  .comp_no-pc h3::after{
    content: '';
    width: 80px;
    height: 3px;
    display: inline-block;
    background-color: #000;
    position: absolute;
    bottom: -2px;
    left: calc(50% - 40px)
  }
  .comp_no-pc h3.wh1::after{
    width: 180px;
    left: calc(50% - 90px)
  }
  .comp_no-pc h3.wh2::after{
    width: 250px;
    left: calc(50% - 125px)
  }
  .comp_no-pc h3.wh3::after{
    width: 200px;
    left: calc(50% - 100px)
  }

  .comp_no-pc h3 + p{
    height: 20rem;
    margin:0 auto;
    padding: 4rem 0
  }
  .comp-icon1_pc{width: 11rem;}
  .comp-icon2_pc{width: 18rem;}
  .comp-icon3_pc{width: 15rem;}

  .comp-ttl{
    text-align: center;
    padding: 0;
    font-size: 1.8rem;
  }

  /* 補填内容 07-11 TB
  -------------------------------------*/
  .comp-card{
    flex-direction: row;
  }
  .comp-card article{
    width: 49%;
  }

  /* ポイント04-05 750`
  ------------------------------*/
  .point-card-wrap{
    flex-direction: row;
    align-items: flex-start;
  }
  .point-half-1{
    flex-direction: column-reverse;
    width: 45%;
    padding: 0 4rem 0 0;
    border-bottom: 0;
  }
  .point-half-2{
    width: 55%;
    padding: 0 0 0 5rem;
    border-left: 1px solid #ccc;
  }

  /* テキスト幅調整 SP */
  .point-ttl dl + p.half-1{
    padding: 3rem 0;
  }
  .point-ttl dl + p.half-2{
    padding: 3rem 0;
  }

  .point-ttl dl dd br{
    display: none;
  }

  /* case シミュレーション TB -------*/
  .case-sl{
    flex-direction: row;
    text-align: center;
  }
  .case-sl div{
    width: 60%;
    padding: 0 0 5rem;
  }
  .case-sl-ill{
    width: 36%;
    padding: 3rem 0 0 0;
  }


  /* -------------------------------
  加入までの流れTB 750
   ------------------------------- */
  #flow{
    padding-top:0;
    margin-top:0;
  }
  #flow section {
    max-width: 128rem;
    margin: 0 auto;
  }
  #flow ol {
    display: flex;
    justify-content: space-between;
    padding: 5rem 0 0;
  }
  #flow ol li {
    width: 30%;
    margin:0 0 3rem;
  }
  #flow ol li::before, #flow ol li::after {
    width: 6px;
    height: 14px;
    left: 107%;
  }
  #flow ol li::before {
    transform: rotate(30deg) skewY(-30deg);
    top: 50%;
  }
  #flow ol li::after {
    transform: rotate(-30deg) skewY(30deg);
    top: calc(50% - 12px);
  }
  #flow ol li p {
    display: inline-block;
    text-align: left;
  }
  #flow ol li p span {
    text-align: center;
  }


  /* インターネットで加入申込 TB 750
  -------------------------------------*/
  .convenient {
    background: #fff url("../img/flow-image.svg") no-repeat left bottom;
    background-size: 40%;
    padding: 3rem 1.5rem 1.5rem 45%;
  }
  .convenient h3 {
    font-size: 2.1rem;
    padding: 0.5rem 0 0 9rem;
  }
  .convenient h3 strong {
    width: 7rem;
    height: 7rem;
    padding-top: 1rem;
    font-size: 2.1rem;
  }
  .convenient h3 strong span {
    font-size: 2.4rem;
  }

/* --------------------------- 
よくある質問 TB 750
------------------------------ */
  .question {
    padding: 20px 50px;
  }
  .question p {
    position: relative;
    padding: 0 0 0 20px;
  }
  .question p::before {
    top: -0.7rem;
    left: -3.2rem;
  }
  .question p::after {
    top: -0.5rem;
    left: -2.1rem;
  }

  .answer {
    padding: 20px 30px 30px;
  }

/* --------------------------- 
神戸市民生協は TB 750
------------------------------ */

  #about .about-bg{
    padding: 50px 0;
    background: url("../img/kobe-bg.jpg") no-repeat center bottom;
    background-size: contain;
   }

  #about .about-cta{
    max-width: 980px;
  }
  #about .about-cta ol{
    flex-direction: row;
  }
  #about .about-cta ol li{
    width: 49%;
  }

  #about .about-cta ol + p{
    padding: 15px 0;
  }




}

/* -----------------------------------------------
PC 1000
----------------------------------------------- */
@media screen and (min-width:1000px) {

  /* --------------- 加入例 1000 --------------- */
  .exa-flex{
    flex-direction: row;
    max-width: 100%;
  }
  .example article{
    width: 32%;
    margin-bottom: 0;
  }

  .example article h3{
  font-size: 3rem;
  }
  .example article h3 span{
    font-size: 2rem;
  }
  .example article h3 + p{
    font-size: 2rem;
  }
  .example article ol li{
    font-size: 1.8rem;
  }
  .example article ol li span{
  font-size: 2.8rem;
  }
  .example article div + p{
    font-size: 1.8rem;
  }
  .example article div + p span:first-child{
    font-size: 3.6rem;
  }
  .example article div + p span:last-child{
    font-size: 2.4rem;
  }



/* --------------- 補償内容 1000 --------------- */
  .comp{
    padding: 10rem 0 0;
  }
  .comp section .comp-in article{
    width: 32%;
    padding:4rem 2.5rem 5rem;
  }

  /* --------------- 選ばれるポイント 1000 --------------- */
  .point-block{
    padding: 5rem 0;
  }
  .flex-01{flex-direction: row;}
  .flex-02{flex-direction: row-reverse;}

  .flex-01 .point-ph{width: 32%;}
  .flex-01 .point-ttl{width: 66%;}

  .flex-02 .point-ph{width: 32%;}
  .flex-02 .point-ttl{width: 55%;}


  /* 選ばれるポイント 内容 1000 --------*/
  .flex-01 .point-ttl{
    padding: 2rem 0 0 4rem;  
  }
  .point-ttl dl dt{
    width: 100px;
    padding: 0;
  }
  .point-ttl dl dt img{
    display: block;
    width: 7.4rem;
  }
  .point-ttl dl dd{
    width: calc(100% - 100px);
    line-height: 1.6;
    font-size: 2.4rem;
  }
  .point-ttl dl + p{
    padding: 3.5rem 0 0;
    font-size: 1.8rem;
  }
  .point-ttl dl + p span{
    display: block;
    padding: 0.5rem 0 0 0;
    font-size: 1.4rem;
  }
  /* テキスト幅調整 */
  .point-ttl dl + p.point-ttl-2{
    width: 90%;
  }

  .point-ttl dl dd br{
    display: block;
  }

  /* case シミュレーション 1000 -------*/
  .case-sl div{
    padding: 0;
  }
  .case-sl-ill{
    padding:0;
  }

  /* --------------------------- 
  加入の流れ PC1000 
  ------------------------------ */

  /* インターネットで加入申込 
  -------------------------------------*/
  .convenient {
    background: #fff url("../img/flow-image.svg") no-repeat 10% bottom;
    background-size: 35%;
  }
  .convenient h3 {
    font-size: 2.8rem;
    line-height: 1.5;
    padding: 0rem 5rem 0 10rem;
  }
  .convenient h3 strong {
    width: 8rem;
    height: 8rem;
    padding-top: 1.8rem;
    font-size: 2.4rem;
  }
  .convenient ul {
    margin: 2.5rem 0 1rem;  
  }

  /* --------------------------- 
  よくある質問 PC1000 
  ------------------------------ */
  .question {
    font-size: 1.8rem;
  }
  .answer {
    font-size: 1.8rem;
  }

  .movie-bg{
    padding: 50px 0 25px;
  }

}

/* -----------------------------------------------
PC 1200
----------------------------------------------- */
@media screen and (min-width:1200px) {

  /* --------------- オススメ 1200 --------------- */
  .suggest{
    padding: 10rem 0 0;
  }
  .suggest section{
    background-size: 54rem;
  }
  .suggest section h2 + p{
    padding: 0 0 5rem;
    font-size: 1.8rem;
  }
  .suggest section h2 + p span{
    font-size: 2.1rem;
  }
  .suggest-in{
    margin: 0 0 0 38%;
  }
 .suggest-in dl{
    flex-direction: column;
    width: 48%;
    margin: 0;
    padding: 6rem 0 4rem;    
    text-align: center;
  }
  .suggest-in dl:first-child dt span{width: 14rem;}
  .suggest-in dl:last-child dt span{width: 13rem;}

  .suggest-in dl dd p:first-child{
    padding: 0 0 2rem;
    font-size: 2.1rem;
    font-weight: bold;
  }
  .suggest-in dl dd p:last-child{
    font-size: 1.8rem;
  } 


  /* 補填内容 07-11 1200
  -------------------------------------*/
  .comp section.comp-sub{
    padding: 7rem 0;
  }
  .comp-card{
    flex-direction: row;
    padding:5rem 0 0;
  }
  .comp-card article{
    width: 19.5%;
  }
  .comp-card article dl dd br.br08{
    display: block;
  }


  /* ポイント04-05 1200`
  ------------------------------*/
  .point-half-1{
    padding: 0 6rem 0 0;
    border-right: 1px solid #ccc;    
  }
  .point-half-2{
    border-left:0;
  }

  /* 事例 1200 --------*/
  .case{
    padding: 10rem 0 0;
  }
  .case-wrap{
    flex-direction: row;
    max-width: 140rem;
    margin: 0 auto;
    padding:0;
  }
  .case-wrap article{
    width: 32%;
    margin: 0;
    padding: 5rem 3rem;
  }
  /* CASE03 1200 ---*/
  dl.case-no.case-wh2 dt img{
    width: 8.4rem;
  }
  /* case テキストと電話 1200 ---*/
  .case-contact p:first-child{
    padding: 5rem 0;
  }


}


/* -----------------------------------------------
PC 1400
----------------------------------------------- */
@media screen and (min-width:1400px) {

  /* --------------- 共通 1400 --------------- */
  .noteh2{
    margin: 0 0 5rem;
    font-size: 3.0rem;
  }
  .noteh2 span{
    font-size: 1.6rem;
  }

  /* 補填内容 1400
  -------------------------------------*/
  .comp section h2{
    margin: 0 0 10rem;
    line-height: 1.8;
  }
  .comp section .comp-in article{
    padding:5rem;
  }
  .comp_no-pc h3{
    font-size:3.2rem;
  }

  /* 補填内容 07-11 1400
  -------------------------------------*/
  .comp-card article dl dt{
    font-size: 3.6rem;
  }
  .comp-card article dl dd{
    font-size: 2.4rem;
  }
  .comp-card article ol li:first-child{
    font-size: 2.1rem;
  }
  .comp-card article ol li:nth-child(2){
    font-size: 1.5rem;
  }

  /* 加入例 1400 -------*/
  .example article{
    width: 30%;
  }  
  .bg-exa{
    padding: 10rem 1.5rem 0;
  }
  
  /* case 費用 1400 -------*/
  dl.case-no dd h3{
    font-size: 2.6rem;
  }

  /* case 家 1400 -------*/
  .case-home{
    padding: 2rem;
  }
  .case-home p:last-child{
    line-height: 1.8;
    font-size: 1.6rem;
  }
  .case-cost h4{
    font-size: 2.1rem;
  }
  .case-cost dl dt{
    font-size: 1.6rem;
  }
  .case-cost dl dt span{
    display: block;
    font-size: 1.4rem;
  }
  .case-pay span{
    font-size: 2.1rem;
  }

  .case-total p:first-child{
    width: 100px;
    font-size: 2.1rem;
  }
  .case-total p:last-child{
    width: calc(100% - 100px);
    font-size: 2.4rem;
  }
  .case-total p:last-child span{
    font-size: 3rem; 
  }

  /* インターネットで加入申込 PC1400
  -------------------------------------*/
  /* インターネットで加入申込 
  -------------------------------------*/
  .convenient {
    background: #fff url("../img/flow-image.svg") no-repeat 10% bottom;
    background-size: 36%;
    padding: 5rem 1.5rem 5rem 45%;
  }
  .convenient h3 {
    font-size: 2.8rem;
    line-height: 1.5;
    padding: 2rem 5rem 0 9rem;
  }
  .convenient h3 strong {
    width: 8rem;
    height: 8rem;
    padding-top: 1.8rem;
    font-size: 2.4rem;
  }
  .convenient h3 br{
    display: none;
  }
  .convenient ul {
    margin: 5rem 0 0 3rem;  
  }
  .convenient li {
    background: url("../img/icon-check.svg") no-repeat left 1rem;
    background-size: 3rem;
    padding-left: 4.5rem;
    font-size: 2.1rem;
    font-weight: bold;
  }
  .convenient li strong {
    font-size: 3rem;
  }


  /* ----------------------  
  加入の流れ PC1400
  -------------------------*/
  #flow section {
    padding: 100px 0;
  }

  /* ----------------------  
  よくある質問 PC1400
  -------------------------*/
  .faq-wrapper {
    padding: 0 0 10rem;
  }

  /* ----------------------  
  神戸市民生協は PC1400
  -------------------------*/
  #about .about-bg{
    padding: 100px 0;
    background-size: auto;
  }
  #about .about-bg section h2 {
    font-size: 3.0rem;
    font-weight: bold;
  }

  #about .about-bg section > p {
    line-height: 2;
    text-align: center;
    font-size: 1.8rem;
    margin: 2em 0;
  }
  #about .about-bg section > p:last-of-type {
    padding-bottom: 5rem;
  }

  #about .about-cta ol + p span{
    max-width: 380px;
  }


}