@charset "UTF-8";

/* ----------------------
こんなお悩みありませんか？ SP
 ------------------------ */
.problem section h2{
  padding: 3rem 0;  
}
.problem-bg{
  padding: 2rem 1.5rem;
  background: var(--blue);
}
.problem-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.problem-list figure{
  display: block;
  width: 49%;
  margin: 0 0 1rem;
  padding: 1.5rem 1rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 0.5rem;
  background: #f4fbfe;
}
.problem-list figure figcaption{
  padding: 1.5rem 0 0;
}
.problem-list figure figcaption br{
  display: none;
}

/* ----------------------
おすすめ！ SP
 ------------------------ */
.recommend{
  padding: 5rem 0 0;
  background: var(--water);
}
.recommend h2{
  padding: 0 0 3rem;
}
.recommend-list{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.recommend-list article{
  width: auto;
  margin: 0 0 3rem;
}
.recommend-list article h3{
  max-width: 26rem;
  margin: 0 auto 1.5em;
}
.recommend-list article h3.balloon span{
  display: block;
  padding: 0.5rem 1.5rem;
  text-align: center;
  border-radius: 30px;
  color: #fff;
  background: var(--blue);
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
}
.recommend-list article h3.balloon span:before {
  display: block;
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid var(--blue);
}
.recommend-list article figure{
  display: flex;
  flex-direction: row;
}
.recommend-list article figure img,
.recommend-list article figure figcaption{
  display: block;
  width: 50%;
} 
.recommend-list article figure img{
  border-radius: 0.5rem;
}
.recommend-list article figure figcaption{
  padding: 0 0 0 1rem;
  font-size: 1.5rem;
}
.recommend-list article:nth-child(2) figure figcaption{
  padding: 0 0 3rem 1rem;
}

/* 火災保険の見直し SP -------------- */
.recommend-review{
  padding: 5rem 1.5rem 0;
  background: #fff;
  position: relative;
}
.recommend-review div {
  width: 100%;
  margin: 0;
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #aaa 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 3.5em; /* 点線2のサイズ */
  line-height: 3.5em; /* 文字の高さ */
  padding:0 20px 1px;
}
.recommend-review div p{
  font-size: 2.2rem;
  font-weight: 500;
}
.recommend-review div p span{
  display: block;
  font-weight:700;
  color: var(--orange);
}
.recommend-review div + p{
  max-width: 50rem;
  margin: 0 auto;
  padding: 3rem 4rem 0;
  position: static;
}


/* ----------------------
保険会社 SP
------------------------ */
.company{
  background: #f3f3f3;
}
.company section{
  padding: 5rem 1.5rem 0;
}  
.company section h2{
  padding: 0 0 3rem;
}

/* 保険会社 SP -------------- */
.company-list{
  display: flex;
  flex-wrap: wrap;  
  flex-direction: column;
  justify-content: space-between;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 0 3rem;
}
.company-list article{
  width: auto;
  margin: 0 0 1.5rem;
  padding: 6rem 3rem 3rem;
  background: #fff;
  position: relative;
}
.company-list article:last-child{
  margin: 0;
}
.company-list article::before{
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  margin: 0 auto;
  border-radius: 50%;
  position: absolute;
  top: 2rem;
  left: 50%;
}
.company-list article:first-child::before{
  background: #ec7185;
}
.company-list article:nth-child(2)::before{
  background: #0090de;
}
.company-list article:last-child::before{
  background: #00665a;
}

/* 保険会社 ロゴ+テキスト SP -------------- */
.company-list article h3,
.company-list article h3 + p{
  text-align: center;
}
.company-list article h3 + p{
  padding: 1.5rem 0 3rem;
  font-size: 2rem;
  font-weight: 500;
}
.company-list article:first-child h3 + p{
  color: #d1560a;
}
.company-list article:nth-child(2) h3 + p{
  color: #00a4e2;
}
.company-list article:last-child h3 + p{
  color: #00665a;
}

/* 保険会社 ボタン SP -------------- */
.company-list article ul{
  display: flex;
  justify-content: space-between;
}
.company-list article ul.com-ul01{
  border-top: 1px solid #ec7185;
  border-bottom: 1px solid #ec7185;
}
.company-list article ul.com-ul02{
  border-top: 1px solid #00a3e2;
  border-bottom: 1px solid #00a3e2;
}
.company-list article ul.com-ul03{
  border-top: 1px solid #00665a;
  border-bottom: 1px solid #00665a;
}

.company-list article ul li{
  width: 48%;
  padding: 2rem 0;
}
.company-list article ul li a{
  display: block;
  text-align: center;
  border-radius: 25px;
  font-size: 2rem;
  font-weight: 700;
}
/* 01 損害保険ジャパン */
.company-list article ul.com-ul01 li a{
  border: 3px solid #c94b10;
}
.company-list article ul.com-ul01 li:first-child a{
  color: #c94b10;
}
.company-list article ul.com-ul01 li:last-child a{
  color: #fff;
  background:#c94b10;
}
/* 02 東京海上日動 */
.company-list article ul.com-ul02 li a{
  border: 3px solid #0090de;
}
.company-list article ul.com-ul02 li:first-child a{
  color: #0090de;
}
.company-list article ul.com-ul02 li:last-child a{
  color: #fff;
  background:#0090de;
}
/* 03 三井住友海上 */
.company-list article ul.com-ul03 li a{
  border: 3px solid #00665a;
}
.company-list article ul.com-ul03 li:first-child a{
  color: #00665a;
}
.company-list article ul.com-ul03 li:last-child a{
  color: #fff;
  background:#00665a;
}

/* 5% SP ---------------- */
.company-par{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 5rem 0 2rem;
  text-align: center;
  background: #fff;
}
.company-par p:first-child{
  padding: 0;
  font-size: 2rem;
  font-weight: 500;
}
.company-par p:last-child{
  padding: 3rem;
}
.company-par p:last-child img{
  max-width: 40rem;
  margin: 0 auto;
}
.company-par p span{
  font-size: 2.2rem;
}

/* ----------------------
3社共通補償内容の一例 SP
------------------------ */
.example{
  background: #f3f3f3;
}
.example section{
  padding: 5rem 1.5rem 7rem;
}  
.example section h2{
  padding: 0 0 3rem;
}
.example-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.example-list article{
  width: 48%;
  padding: 0 0 3rem;
  border-right:0;
}
.example-list article div{
  border-right: 0;
  border-bottom: 0;
}
.example-list article div p.example-en{
  width: 15rem;
  height: 15rem;
  margin: 0 auto;
  padding: 5rem 0 0;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.example-list article div p.example-en img{
  display: block;
  width: 6rem;
  margin: 0 auto;
}
.example-list article div p.example-en span{
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.3rem 0 0;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 1.8rem;
  font-weight: 700;
  position: absolute;
  bottom: 0;
  left: 5px;
}
.example-list article div h3{
  text-align: center;
  margin: 0 0 1.5rem;
  padding: 1.5rem 0 1rem;
  border-bottom: 1px dashed #aaa;
  font-size: 1.6rem;
  font-weight: 700;
}
.example-list article div h3 + p{
  font-size: 1.4rem;
}
.example-list article div h3 + p span{
  display: block;
  font-size: 1.2rem;
}
.example-ttl{
  text-align: left;
  font-size: 1.2rem;  
}

/* ----------------------
お申し込みの流れ SP
------------------------ */
.flow {
  background: #eef8fd;
}
.flow section {
  max-width: 143rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.flow h2 {
  padding: 0 0 7rem;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}
.flow-step ol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
}
.flow-step li {
  width: auto;
  background: #fff;
  padding: 5rem 0 4rem;
  margin: 0 0 5.5rem;
  position: relative;
}
.flow-step li p.num {
  color: var(--blue);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: -4rem;
  left: 0;
}
.flow-step li p.num span {
  display: block;
  font-weight: 700;
  font-size: 4.8rem;
}
.flow-step li figure {
  text-align: center;
  padding-bottom: 3rem;
}
.flow-step li figure img {
  height: 7.2rem;
}
.flow-step li p.flow-txt {
  width: 26.5rem;
  white-space: nowrap;
  margin: 0 auto;
}
.flow-step li p.flow-txt span {
  color: var(--blue);
  font-weight: 700;
}
.flow-note li {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.flow-note li::before {
  content: "※";
}
.flow-certificate {
  font-size: 1rem;
  color: #666;
}

/* ----------------------
おおさか市民共済とは SP
------------------------ */
.about {
  background-image: url(../img/bg-ill-city.svg) ,url(../img/bg-sky.jpg);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 800px, auto;  
}
.about section {
  max-width: 143rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 7rem;
} 
.about h2 {
  max-width: 34.7rem;
  background: url(../img/note-osaka-bg.svg) no-repeat center center;
  margin: 0 auto 4rem;
  text-align: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.3rem 0;
}
.about-txt {
  padding: 0 0 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.4;
}
.about-txt p {
  margin-bottom: 1.5rem;
}


/* 3枚写真 SP ----------------- */
.about-posi{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.about-img figure:first-child{
  width: 58%;
  padding: 0;
  position: absolute;
  top: 4rem;
  left: 0;
}
.about-posi figure:last-child {
  width: 48%;
  padding: 0;
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 10;
}
.about-img figure.about-last-ph{
  width: 84%;
  margin: 0 0 0 auto;
  padding: 25rem 0 0;
}
.about-img figure p {
  display: none;
}
@media screen and (min-width:420px) {
  .about-img figure.about-last-ph{
    padding: 30rem 0 0;
  }
}
@media screen and (min-width:480px) {
  .about-img figure.about-last-ph{
    padding: 35rem 0 0;
  }
}
@media screen and (min-width:600px) {
  .about-img figure.about-last-ph{
    padding: 40rem 0 0;
  }
}
@media screen and (min-width:680px) {
  .about-img figure.about-last-ph{
    padding: 45rem 0 0;
  }
}


/*----------------------------------------------------
タブレット用 750
----------------------------------------------------*/
@media screen and (min-width:750px) {

  /* ----------------------
  こんなお悩みありませんか？ 750
   ------------------------ */
  .problem-bg{
    padding: 0 1.5rem;
    background: linear-gradient(180deg, #fff 0%, #fff 40%, #008cd6 40%, #008cd6 100%);
  }
  .problem-list{
  }
  .problem-list figure{
    width: 24%;
    margin: 0 0 3rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 1.4rem;
  }
  .problem-list figure figcaption{
    padding: 1.5rem 1rem 0;
  }
  
  /* ----------------------
  おすすめ！ 750
   ------------------------ */
  .recommend-list{
    flex-direction: row;
  }
  .recommend-list article{
    width: 48%;
    margin: 0 0 5rem;
  }
  .recommend-review{
    padding: 5rem 5rem 0;
    background: #fff;
  }
  .recommend-review div p span{
    display: inline;
  }

  /* ----------------------
  保険会社 750
  ------------------------ */
  /* 5% 750 ---------------- */
  .company-par{
    flex-direction: row;
    align-items: center;
    padding: 5rem;
    text-align: left;
  }
  .company-par p:last-child{
    margin: 0;
    padding: 0;
  }
  .company-par p:last-child img{
    display: block;
    width: 35rem;
    margin: 0;
    padding: 0 0 0 2rem;
  }

  /* ----------------------
  3社共通補償内容の一例 750
  ------------------------ */
  .example-ttl{
    text-align: center;
  }

  /* ----------------------
  お申し込みの流れ 750
  ------------------------ */
  .flow section {
    padding: 5rem 1.5rem 7rem;
  }
  .flow-step ol {
    flex-direction: row;
    margin: 7rem auto 0;
  }
  .flow-step li {
    width: 48%;
    margin: 0 0 5.5rem;
  }

  .flow-note {
    background: #fff;
    border-radius: 5rem;
    padding: 5rem 5rem 2rem;
  }
  .flow-note li {
    padding-left: 1em;
    position: relative;
  }
  .flow-note li::before {
    position: absolute;
    top: 0;
    left: 0;
  }
  .flow-certificate ul {
    width: 65rem;
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: space-between;
  }

  /* ----------------------
  おおさか市民共済とは 750
  ------------------------ */
  .about {
    background-image: url(../img/bg-ill-city.svg) ,url(../img/bg-sky.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center top;
    background-size: auto, auto;  
  }
  .about section {
    padding: 5rem 1.5rem;
  }
  .about h2 {
    max-width: 40rem;
    margin: 0 auto 7rem;
    padding: 1.3rem 0;
  }

  .about-detail {
    display: flex;
  }
  .about-txt {
    width: 48%;
    padding: 0;
  }
  .about-txt p {
    margin-bottom: 2rem;
  }

  /* 3枚写真 750 ----------------- */
  .about-img{
    width: 52%;
  }  
  .about-posi{
    flex-direction: row;    
    padding: 0 0 2rem;
  }
  .about-img figure:first-child{
    width: 48%;
    position: static;
  }
  .about-posi figure:last-child {
    width: 42%;
    padding: 10rem 0 0;
    position: static;
  }
  .about-img figure.about-last-ph{
    width: 50%;
    margin: 0 0 0 3rem;
    padding: 0;
  }

}

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

  /* ----------------------
  おすすめ！ 1000
   ------------------------ */
  .recommend{
    padding: 5rem 0;
  }

  /* 火災保険の見直し 1000 -------------- */
  .recommend-review{
    padding: 4rem 5rem 2rem;
  }
  .recommend-review div{
    width: 55%;
    margin: 0 0 0 auto; 
  }
  .recommend-review div p span{
    display: block;
  }
  .recommend-review div + p{
    width: 33rem;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 7%;
    top: -10px;
  }

  /* ----------------------
  保険会社 1000
  ------------------------ */
  /* 保険会社 1000 -------------- */
  .company-list{
    flex-direction: row;
    max-width: 100%;
    margin: 0 0 2.5rem;
    padding: 0;
  }
  .company-list article{
    width: 32.8%;
    margin: 0;
    padding: 8rem 1rem 6rem;
  }

  /* 5% 1000 ---------------- */
  .company-par{
    padding: 5rem 0;
   }
  .company-par p:first-child{
    padding: 1.5rem 0 0;
    font-size: 2.6rem;
  }
  .company-par p:last-child{
    margin: 0;
    padding: 0;
  }
  .company-par p:last-child img{
    display: block;
    width: 40rem;
    margin: 0;
    padding: 0 0 0 2rem;
  }


  /* ----------------------
  3社共通補償内容の一例 1000
  ------------------------ */
  .example section h2{
    padding: 0 0 7rem;
  }
  .example-list article{
    width: 32%;
    margin: 0 0 5rem;
    padding: 0;
    border-bottom: 1px dashed #aaa;
  }
  .example-list article:nth-child(4),
  .example-list article:nth-child(5),
  .example-list article:last-child{
    margin: 0;
    border-bottom: 0;
  }   
  .example-list article div{
    margin: 0 0 5rem;
    padding: 0 2.5rem;
    border-right:1px dashed #aaa;
  }
  .example-list article:last-child div{
    border-right:0;
  }   
  .example-list article:nth-child(3n) div{
    border-right:0;    
  }
  .example-list article div h3{
    margin: 0;
    padding: 2rem 0;
    border-bottom: 0;
  }
  .example-ttl{
    font-size: 1.4rem;  
  }

}

/*----------------------------------------------------
PC用 1200
----------------------------------------------------*/
@media screen and (min-width:1200px) {
  /* ----------------------
  こんなお悩みありませんか？ 1200
   ------------------------ */
  .problem section h2{
    padding: 10rem 0 8rem;  
  }
  .problem-list{
    padding: 0 1.5rem 5rem;
  }
  .problem-list figure{
    width: 24%;
    margin: 0 0 3rem;
    padding: 1.5rem 1.5rem 2rem;
    font-size: 1.8rem;
  }


  /* ----------------------
  おすすめ！ 1200
   ------------------------ */
  .recommend{
    padding: 10rem 0;
  }
  .recommend h2{
    padding: 0 0 8rem;
  }
  .recommend-list{
    justify-content: center;
    padding: 0 1.5rem;
  }
  .recommend-list article{
    width: 30%;
    margin: 0 3.6% 8rem 0;
  }
  .recommend-list article:nth-child(3){
    margin: 0 0 8rem 0;
  }
  .recommend-list article:nth-child(4){
    margin: 0 1.8% 8rem 0;
  }
  .recommend-list article:last-child{
    margin: 0 0 8rem 1.8%;
  }

  .recommend-list article h3{
    max-width: 32rem;
    margin: 0 auto 1em;
  }
  .recommend-list article h3.balloon span{
    padding: 0.5rem 0;
    font-size: 2.1rem;
  }
  .recommend-list article figure{
    flex-direction: column;
  }
  .recommend-list article figure img,
  .recommend-list article figure figcaption{
    width: 100%;
  } 
  .recommend-list article figure figcaption{
    padding: 3rem;
    font-size: 1.8rem;
  }
  .recommend-list article:nth-child(2) figure figcaption{
    padding: 3rem;
  }

  /* 火災保険の見直し 1200 -------------- */
  .recommend-review{
    padding: 5rem 10rem 3rem;
  }
  .recommend-review div {
    width: 65%;
    background-size: 8px 100%, /* 点線1のサイズ */
                     100% 4em; /* 点線2のサイズ */
    line-height: 4em; /* 文字の高さ */
    padding:0 20px 1px;
  }
  .recommend-review div p{
    font-size: 2.4rem;
  }
  .recommend-review div + p{
    left: 7%;
    top: -20px;
  }

  /* ----------------------
  保険会社 1200
  ------------------------ */
  .company section{
    padding: 10rem 1.5rem 0;
  }
  .company section h2{
    padding: 0 0 7rem;
  }
  .company-list article{
     padding: 8rem 3rem 6rem;
  }

  /* ----------------------
  3社共通補償内容の一例 1200
  ------------------------ */
  .example section{
    padding: 10rem 1.5rem 15rem;
  }    
  .example-list article div p.example-en{
    width: 30rem;
    height: 30rem;
    padding: 10rem 0 0;
  }
  .example-list article div p.example-en img{
    width: 12rem;
  }
  .example-list article div p.example-en span{
    width: 7rem;
    height: 7rem;
    padding: 1.4rem 0 0;
    font-size: 2.4rem;
    left: 5px;
  }
  .example-list article div h3{
    padding: 4rem 0;
    font-size: 2.6rem;
  }
  .example-list article div h3 + p{
    font-size: 1.8rem;
  }
  .example-ttl{
    font-size: 1.8rem;  
  }

  /* ----------------------
  お申し込みの流れ 1200
  ------------------------ */
  .flow section {
    padding: 10rem 1.5rem 7rem;
  }
  .flow h2 {
    padding: 0 0 7rem;
    font-size: 3rem;
  }
  .flow-step li {
    width: 24%;
    padding: 5rem 1.5rem 4rem;
  }

  .flow-note {
    max-width: 140rem;
    border-radius: 20rem;
    text-align: center;
  }
  .flow-note ul {
    display: inline-block;
    text-align: left;
  }
  .flow-note li {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
  .flow-certificate {
    font-size: 1.3rem;
  }
  .flow-certificate ul {
    width: 85rem;
  }

  /* ----------------------
  おおさか市民共済とは 1200
  ------------------------ */
  .about h2 {
    max-width: 48rem;
    margin: 0 auto 10rem;
    font-size: 3rem;
    padding: 2rem 0;
  }
  .about section {
    padding: 9rem 1.5rem 15rem;
  }
  .about-txt {
    padding: 6rem 0 0;
    font-size: 2.4rem
  }

  /* 3枚写真 1200 ----------------- */
  .about-posi{
    flex-direction: row;    
    padding: 0 0 3.5rem;
  }
  .about-img figure:first-child{
    width: 48%;
    position: static;
  }
  .about-posi figure:last-child {
    width: 42%;
    padding: 17rem 0 0;
    position: static;
  }
  .about-img figure.about-last-ph{
    width: 50%;
    margin: 0 0 0 3rem;
    padding: 0;
  }

}


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

  .problem-list figure figcaption{
    display: flex;
    justify-content: center;    
    padding: 4rem 0 2rem;
  }  
  .problem-list figure figcaption br{
    display: block;
  }


  /* ----------------------
  お申し込みの流れ 1400
  ------------------------ */
  .flow-step li {
    width:  33rem;
  }

}


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

  /* ----------------------
  おすすめ 1600
  ------------------------ */
  .recommend-list{
    padding: 0;
  }

  /* ----------------------
  保険会社 1600
  ------------------------ */
  .company section{
    padding: 10rem 0 0;
  }  

  /* ----------------------
  3社共通補償内容の一例 1600
  ------------------------ */
  .example section{
    padding: 10rem 0 12rem;
  }    
  .example-list article div p.example-en{
    width: 32rem;
    height: 32rem;
    padding: 11rem 0 0;
  }

}