@charset "utf-8";

.pc{
  display: block;
}
.sp{
  display: none;
}
@media only screen and (max-width: 768px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
}

/*--MV--*/
.Section {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1870px;
}
@media not all and (min-width: 768px) { 
  .Section {
    height: 1150px;
  }
}
.Section__Inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, auto, auto, 0);
}
.Section-Image {
  position: fixed;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}
.Section-Content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 32px;
}
.Section-Text {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 32px;
  background-color: rgba(255, 255, 255, 0.8);
}
.OtherSection {
  width: 100%;
  height: 600px;
  background-color: lightgray;
}
/*--MV skeleton--*/
.mv_skeleton {
  width: 100%;
  height: auto;
  background-color: #0000009d;
  position: absolute;
  bottom: 0;
}

.Section2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 650px;
}
.Section2__Inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, auto, auto, 0);
}
.Section2-Image {
  position: fixed;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}
.Section2-Content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 32px;
}
.Section2-Text {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 32px;
  background-color: rgba(255, 255, 255, 0.8);
}
.OtherSection2 {
  width: 100%;
  height: 600px;
  background-color: lightgray;
}
@media not all and (min-width: 768px) { 
  .Section2 {
    width: 100%;
    height: 310px;
  }
}

/*--ツナグ企画室とは？--*/
/*--BG--*/
.Section3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3150px;
}
@media not all and (min-width: 768px) {
  .Section3 {
    height: 3150px;
  }
}
.Section3__Inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, auto, auto, 0);
}
.Section3-Image {
  position: fixed;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}
.Section3-Content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 32px;
}
.Section3-Text {
  width: 100%;
  max-width: 1400px;
  height: 2300px;
  padding: 32px;
  background-color: #fff;
}
@media not all and (min-width: 768px) {
  .Section3-Text {
    height: 2400px;
  }
}
.OtherSection3 {
  width: 100%;
  height: 600px;
  background-color: lightgray;
}

/*-------------------- MV */
#mainvis {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
#mainvis #bg {
  position: fixed;
  z-index: -1;
  top: 0;
  width: 100%!important;
  height:100vh!important;
  background: url("https://tsunagu-wedding.com/img/top/mv1.jpg");
  background-position:center bottom,right top, 0% 0%;
  background-size: cover;
  background-attachment: fixed;
}

/*-------------------- pankuzu */
#pankuzu {
  display: none;
}

/*-------------------- contents */
.sticky {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
h2 {
  margin: 0 auto;
  font-size: 24px;
}

/*-------------------- hako1 */
.hako1 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #ffffff;
}
.hako1 p {
  margin: 0; 
  padding: 0;
}
.hako1 h3 {
  font-size: 20px;
  line-height: 2;
  text-align: center;
}
.hako1 img {
  display: block;
  width: 300px;
  margin-left: auto; display:block; 
}

/*-------------------- hako2 */
.hako2 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #ffffff;
  
}
.hako2 p {
  margin: 0; 
  padding: 0;
}
.hako2 h3 {
  font-size: 20px;
  line-height: 2;
  text-align: center;
}

.wrap2 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.item2 {
  padding: 67px;
  width: 18%;
  background-color: #fff;
}
.item2 p{
  text-align: center;
  font-size: 85%;
}
.item2 img{
  text-align: center;
}

@media not all and (min-width: 768px) {
  .item2 {
    width: 100%;
  }
}

/*-------------------- hako3 */
.hako3 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #ffffff;
  
}
.hako3 p {
  margin: 0; 
  padding: 0;
  text-align: center;
  font-size: 16px;
  color:#fff
}
.hako3 h3 {
  font-size: 20px;
  line-height: 2;
}

.wrap3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item3 {
  padding: 20px;
  width: 30%;
  background-color: #585858ce;
  border-radius: 50px 50px 50px 50px;
}
.item3 p{
  color: #fff;
  text-align: center;
  font-size: 14px;
}

@media not all and (min-width: 768px) {
  .item3 {
    width: 100%;
  }

  .item3:not(:last-child) {
    margin-bottom: 30px;
  }
}

/*-------------------- hako4 */
.hako4 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #7dd5eb;
  border-radius: 75px 75px 75px 75px;
}
.hako4 p {
  margin: 0; 
  padding: 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color:#EA626F
}
.hako4 h3 {
  font-size: 20px;
  line-height: 2;
  img {
    display: block;
    margin: 0 auto;
    width: 400px;
  }
}

.wrap4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item4 {
  padding: 20px;
  width: 30%;
  background-color: #fff;
  border-radius: 75px 75px 75px 75px;
}
.item4 img{
  display: block;
  margin: 0 auto;
  padding: 15px;
  width: 50%;
}
.item4 p{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color:#ff475f
}

@media not all and (min-width: 768px) {
  .item4 {
    width: 100%;
  }

  .item4:not(:last-child) {
    margin-bottom: 30px;
  }
}

/*-------------------- cta_bg */
.cta_bg{
  background: #79C5D9;
  width: 100%;
  height:200px;
  img {
    display: block;
    margin: 0 auto;
    width: 450px;
  }
  p {
    text-align: center;
    color: #fff;
    font-size: 20px;
  }
}
@media (max-width:768px) {
  .cta_bg{
    height:170px;
  }
  .cta_bg img {
    padding-top: 25px;
    display: block;
    margin: 0 auto;
    width: 300px;
  }
  .cta_bg p {
    font-size: 15px;
  }
}
/*-------------------- cta_bg2 */
.cta_bg2{
  background: #fff;
  width: 100%;
  height:35px;
}
@media (max-width:768px) {
  .cta_bg2{
    height:15px;
  }
}

/*-------------------- cta btn */
.ctabtn{
  width: 300px;
  padding: 14px 0 16px 0;
  font-size: 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #fc6d7b;
  line-height: 1;
  border-radius: 50px;
  transition: all .2s;
  border: 2px solid #ffffff;
}
.ctabtn:hover{
  background-color: #fff;
  border-color: #EA626F;
  color: #EA626F;
}


/*-------------------- hyou_box */
.hyou_box img{
  display: flex;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*-------------------- staff_box */
.staff_box img{
  display: flex;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*-------------------- staff_cta */
.staff_cta a{
  text-align: center;
  color: #fff;
}

/*-------------------- fukidashi1 */
.fukidashi1 {
  position: relative;
  width: fit-content;
  padding: 12px 16px;
  border-bottom: 2px solid #333333;
}
.fukidashi1::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -13px;
  width: 30px;
  height: 2px;
  transform: rotate(50deg);
  box-sizing: border-box;
  background-color: #333333;
}
.fukidashi1::after {
  content: "";
  position: absolute;
  right: -23px;
  bottom: -28px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid #ffffff; /* 背景色と同じ色を指定 */
  border-radius: 50%;
  background-color: #333333;
}


/*-------------------- font */
.t_red{
  color: #ff1515;
  font-weight: bold;
  font-size: 1.1rem;
}
.t_pink{
  color: #f77694;
  font-weight: bold;
  font-size: 30px;
}
/*-------------------- design */
.b_yellow{
  background: linear-gradient(transparent 60%, #fcff16 0%);
}


/*-------------------- mv */
.mv {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mv_bg1 {
  width: 100%!important;
  height: 100vh!important;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url("https://tsunagu-wedding.com/img/top/mv1.jpg");
}
.mv_bg1s {
  width: 100%!important;
  height: 100vh!important;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url("https://tsunagu-wedding.com/img/top/mv1s.jpg");
}


/*-------------------- mf0 pc */
.mf0 {
  padding-bottom: 0px;
  margin-top: -10px;
}
.mf0_bg1 {
  width: 100%!important;
  height: 750px!important;
  padding-top: 25px!important;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url("https://tsunagu-wedding.com/img/top/mf0bg.png");
}

.mf0 h2 {
  img {
    display: block;
    margin: 0 auto;
    width: 400px;
    padding-bottom: 20px;
    margin-top: 40px;
  }
}
.no1{
  color:#fff;
  font-size: 34px;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 20px;
  margin-top: 40px;
}
@media (max-width:768px) {
  .no1{
    color:#fff;
    font-size: 22px;
    margin-top: 0px;
  }
}
.no1_offer-wrapper{
  display: flex;
  width: 50%;
  height:400px;
  text-align:center;
  background-color: #ffffff00;
  /* 水平方向の中央揃え */
  margin: 0 auto;
}
.no1_wrap0 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.no1_item0 {
  padding: 20px;
  width: 33%;
  height: 0px;
  background-color: #ffffff00;
}
.no1_item0 img{
  display: block;
  margin: 0 auto;
  padding: 15px;
  width: 100%;
}
.no1_text{
  text-align: center;
  font-size: 14px;
  color:#ffffff;
}
@media (max-width:768px) {
  .no1_text{
    font-size: 10px;
  }
}
@media not all and (min-width: 768px) {
  .no1_mf0 h2 {
    img {
      width: 400px;
    }
  }
  .no1_item0 {
    width: 100%;
    height:295px;
  }
  .no1_item0 img{
    padding: 15px;
    width: 68%;
  }
  .no1_item0:not(:last-child) {
    margin-bottom: 30px;
  }
}

.offer-wrapper{
  display: flex;
  width: 50%;
  height:400px;
  text-align:center;
  background-color: #ffffff00;
  /* 水平方向の中央揃え */
  margin: 0 auto;
}
.wrap0 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item0 {
  padding: 10px;
  width: 30%;
  height:350px;
  background-color: #E8E8E8;
}
@media not all and (min-width: 768px) {
  .item0 {
    height:350px;
  }
}
.item0 img{
  display: block;
  margin: 0 auto;
  padding: 15px;
  width: 75%;
}
.item0 p{
  text-align: center;
  font-size: 16px;
  color:#000000
}
@media not all and (min-width: 768px) {
  .mf0 h2 {
    img {
      width: 400px;
    }
  }
  .item0 {
    width: 100%;
    height:295px;
  }
  .item0 img{
    padding: 15px;
    width: 68%;
  }
  .item0:not(:last-child) {
    margin-bottom: 30px;
  }
}

/*-------------------- mf0 sp */
.mf0_bg1s {
  width: 100%!important;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url("https://tsunagu-wedding.com/img/top/mf0bgs.png");
}
@media (max-width:768px) {
  .mf0_bg1s {
    width: 100%!important;
    height: 330px!important;
  }
}

.mf0_bg1s h2 {
  img {
    width: 100px;
  }
}

/* mf0 poem-------------------- */
.mf0poem p{
  padding : 50px;
  text-align: center;
  font-size: 25px;
  color: #ffffff;
  margin-top: 10px;
  font-family: "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3","YuMincho","Yu Mincho","游明朝体","HiraMinProN-W3","HGS明朝E","MS PMincho","Times New Roman","游明朝",serif;
}
@media not all and (min-width: 768px) {
  .mf0poem p{
    font-size: 17px;
  }
  .mf0 h2 {
    img {
      display: block;
      margin: 0 auto;
      width: 220px;
      padding-bottom: 10px;
      margin-top: 10px;
    }
  }
}

/*-------------------- mf0_1 pc */
.mf0_1 {
  padding-bottom: 0px;
  margin-top: -10px;
}
.mf0_1_bg1 {
  width: 100%;
  height: 700px;
  padding-top: 25px;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #E8E8E8 ;
}

.mf0_1 h2 {
  img {
    display: block;
    margin: 0 auto;
    width: 400px;
    padding-bottom: 20px;
    margin-top: 40px;
  }
}

.offer-wrapper{
  display: flex;
  width: 50%;
  height:400px;
  text-align:center;
  background-color: #ffffff00;
  /* 水平方向の中央揃え */
  margin: 0 auto;
}
.wrap0_1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item0_1 {
  padding: 10px;
  width: 30%;
  height:350px;
  background-color: #E8E8E8;
}
@media not all and (min-width: 768px) {
  .item0_1 {
    height:350px;
  }
}
.item0_1 img{
  display: block;
  margin: 0 auto;
  padding: 15px;
  width: 75%;
}
.item0_1 p{
  text-align: center;
  font-size: 16px;
  color:#000000
}
@media not all and (min-width: 768px) {
  .mf0_1 h2 {
    img {
      width: 400px;
    }
  }
  .item0_1 {
    width: 100%;
    height:295px;
  }
  .item0_1 img{
    padding: 15px;
    width: 95%;
  }
  .item0_1:not(:last-child) {
    margin-bottom: 30px;
  }
}

/*-------------------- mf0 sp */
.mf0_1_bg1s {
  width: 100%;
  /*背景画像の位置を固定する*/
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #E8E8E8;
}
@media (max-width:768px) {
  .mf0_1_bg1s {
    width: 100%;
    height: 900px;
  }
}

.mf0_1_bg1s h2 {
  img {
    width: 100px;
  }
}

/* mf0 poem-------------------- */
.mf0_1poem p{
  padding : 50px;
  text-align: center;
  font-size: 25px;
  color: #ffffff;
  margin-top: 10px;
  font-family: "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3","YuMincho","Yu Mincho","游明朝体","HiraMinProN-W3","HGS明朝E","MS PMincho","Times New Roman","游明朝",serif;
}
@media not all and (min-width: 768px) {
  .mf0_1poem p{
    font-size: 17px;
  }
  .mf0_1 h2 {
    img {
      display: block;
      margin: 0 auto;
      width: 220px;
      padding-bottom: 10px;
      margin-top: 10px;
    }
  }
}


/*-------------------- mf1 */
#mf1 .wrapper {
  display: flex;
  justify-content: flex-start;
  width: 980px;
  padding: 100px 0;
}
#mf1 .cbox {
  width: 100%;
}
#mf1 .ttl {
  margin: 0 80px 0 0;
}
#mf1 h2 {
  width: 100%;
  padding: 0 0 1em 0;
}
#mf1 h2:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #00a199;
}
#mf1 #idNews {
  margin: 0 2em 0 0;
  width: 820px;
  font-size: 14px;
  text-decoration : underline;
}
#mf1 #idNews ul {
  max-height: 13em;
  overflow-x: scroll;
}
#mf1 #idNews ul::-webkit-scrollbar { 
  display: none;
}
#mf1 #idNews li span {
  display: inline-block;
  width: 7em;
}
#mf1 #idNews li{
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: .2em;
}




/*-------------------- mf1_1 */
#mf1_1 {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin-top: 0px;
}
#mf1_1 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 340px;
  }
}
#mf1_1 .mf-frame {
  padding: 100px 0;
  height: 3500px;
}
@media (max-width:768px) {
  #mf1_1 .mf-frame {
    height: 3350px;
  }
}
#mf1_1 h2 {
  margin: 1em 0;
}

.mf1_1_box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.mf1_1_text {
  margin-top: 50px;
  margin-left: 70px;
}
@media (max-width:768px) {
  .mf1_1_text {
    margin-top: 50px;
    margin-left: 0px;
  }
}
.mf1_1_pict {
  width: 30%;
  margin-left: 3%;
}
.mf1_1_pict img {
  width: 100%;
  height:auto;
}
.mf1_1_pict p {
  text-align: center;
}
.mf1_1_title {
  color: #ffffff;
  text-align: center;
  font-size: 25px;
}
@media (max-width:768px) {
  .mf1_1_title {
    font-size: 17px;
  }
}
.mf1_1_title1 {
  color: #ffffff;
  text-align: center;
  font-size: 25px;
}
.mf1_1_title2 {
  margin-top: 10px;
  color: #000000;
  text-align: center;
  font-size: 18px;
}
.mf1_1_title3 {
  color: #000000;
  text-align: center;
  font-size: 18px;
}
@media (max-width:768px) {
  .mf1_1_box {
    flex-direction: column;
  }
  .mf1_1_box:nth-child(even) {
    flex-direction: column;
  }
  .mf1_1_text {
    text-align: left;
  }
  .mf1_1_box:nth-child(even) .text {
    text-align: center;
  }
  .mf1_1_pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .mf1_1_box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .mf1_1_pict img {
    display: block;
    margin: 0 auto;
    width: 200px;
  }
  .mf1_1_title2 {
    font-size: 15px;
  }
  .mf1_1_title3 {
    font-size: 15px;
    margin-top: -10px;
  }
}
#mf1_1 ul {
  display: block;
  margin: 0 auto;
  width: 1200px;
  height: 400px;
  padding-top: 20px; /*リスト上の余白*/
  padding-bottom: 100px; /*リスト下の余白*/
  padding-left: 150px;
  position: relative;
  background-image:url("../img/top/issue_bg.jpg");
}
#mf1_1 li {
  position: relative;
  padding-top: 10px; 
  padding-bottom: 10px;
  font-size: 18px;
}
@media (max-width:768px) {
  #mf1_1 li {
    font-size: 13px;
    margin-top: 10px;
    margin-left: -12px;
  }
}
#mf1_1 li::before {
  content: "";
  display: block;
  position: absolute;
  width: 1rem;
  height: 0.5rem;
  border-left: 2px solid rgb(255, 48, 48);
  border-bottom: 2px solid rgb(255, 48, 48);
  top: 1.3rem;
  left: -2rem;
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) { 
  #mf1_1 ul {
    display: block;
    margin: 0 auto;
    background-image: url("../img/top/");
    padding-left: 30px;
    background-size: 40%;
  }
  #mf1_1 li::before {
    top: 1rem;
    margin-left: -7px;
    margin-top: -2px;
  }
}

/*-------------------- triangle */
#mf1_1 .triangle{
  width: 0px;
  height: 0px;
  border-top: 40px solid #EA626F;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  margin: 0 auto;
  }
.conclusion1_1{
  display: block;
  margin: 0 auto;
  padding-top: 25px; 
  img {
    display: block;
    margin: 0 auto;
    width: 650px;
  }
  p {
    font-size: 25px;
    color:#696969 ;
    text-align: center;
    padding-bottom: 40px; 
  }
}
@media screen and (max-width: 768px) { 
  .conclusion1_1{
    p {
      font-size: 23px; 
    }
  }
}
/*-------------------- mf9 */
#mf9 {
  background: #e7e7e7;
  padding-top: 20px;
  margin-top: -120px;
}
.mf9_bg {
  background: #ffffff;
}
#mf9 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 510px;
  }
}
#mf9 .mf-frame {
  padding: 100px 0;
}
#mf9 h2 {
  margin: 1em 0;
}

.flex-container9 {
  display: flex;
  flex-wrap: wrap;
}
.flex-item9 {
  background-color: rgb(255, 255, 255);
  width: calc((100% - 40px) / 2);
  margin: 10px;
  /*box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);*/
}

@media screen and (max-width: 768px) { 
  .flex-container9 {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-item9 {
    width: 100%;
  }
}

.card-container9{
  background: #ffffff;
  color: #000000;
  display: flex;
  margin: auto;
  width: 100%;
}
.card-container9 a{
  text-decoration: none;
  color: #cddc39;
}
.card-text9{
  width:100%;
  margin: -6px 2px;
}
.card-text9-waku{
  display: inline-block;
	border: solid 1px #afafaf;
  background: #afafaf;
  font-size: 10px;
  color: #ffffff;
}
.card-text9-name{
  font-size: 19px;
  color: #000000;
  margin-top: 10px;
  font-family: "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3","YuMincho","Yu Mincho","游明朝体","HiraMinProN-W3","HGS明朝E","MS PMincho","Times New Roman","游明朝",serif;
}
.card-text9 h2{
  padding-top: 10px;
  font-size: 1em;
}
.card-text9 p{
  font-size: 0.8em;
  margin-top: 10px;
}
.card-img9{
  width: 30%;
    img{
      width:100%;
      height:100%;
      vertical-align:bottom;
    }
}
.hr9 {
  border: 1px solid #afafaf;
  width: 60%;
  margin: 0px 10px;
}



/*-------------------- mf10 */
#mf10 {
  background: #ffffff;
  padding-top: 20px;
  margin-top: -120px;
}
#mf10 .mf-inner { 
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 600px;
  }
}
#mf10 .mf-frame {
  padding: 100px 0;
}
#mf10 h2 {
  margin: 1em 0;
}
.mf10_box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
#mf10 ul {
  display: block;
  margin: 0 auto;
  width: 1200px;
  height: 400px;
  padding-top: 20px; /*リスト上の余白*/
  padding-bottom: 100px; /*リスト下の余白*/
  padding-left: 150px;
  position: relative;
  background-image:url("../img/top/issue_bg.jpg");
}
#mf10 li {
  position: relative;
  padding-top: 10px; 
  padding-bottom: 10px;
  font-size: 18px;
}
#mf10 li::before {
  content: "";
  display: block;
  position: absolute;
  width: 1rem;
  height: 0.5rem;
  border-left: 2px solid rgb(255, 48, 48);
  border-bottom: 2px solid rgb(255, 48, 48);
  top: 1.3rem;
  left: -2rem;
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) { 
  #mf10 ul {
    display: block;
    margin: 0 auto;
    background-image: url("../img/top/issue_bgsp.jpg");
    padding-left: 30px;
    background-size: auto;
  }
  #mf10 li {
    font-size: 16px;
  }
  #mf10 li::before {
    top: 1rem;
  }
}

/*-------------------- triangle */
#mf10 .triangle{
  width: 0px;
  height: 0px;
  border-top: 40px solid #EA626F;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  margin: 0 auto;
  }
.conclusion10{
  display: block;
  margin: 0 auto;
  padding-top: 25px; 
  img {
    display: block;
    margin: 0 auto;
    width: 650px;
  }
  p {
    font-size: 25px;
    color:#696969 ;
    text-align: center;
    padding-bottom: 40px; 
  }
}

/*-------------------- mf11 */
#mf11 {
  background: #ffffff;
  margin-top: -120px;
}
#mf11 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 500px;
  }
}
#mf11 .mf-frame {
  padding: 100px 0;
}
#mf11 h2 {
  margin: 1em 0;
}
#mf11 h3 {
  img{
    margin-left: 0px;
    text-align: right;
    width: 700px;
  }
}
.mf11_box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.mf11_pict {
  width: 25%;
  margin-top: 90px;
  margin-left: 3%;
  img {
    width: 100%;
    height:auto;
  }
}
.mf11_pict p {
  text-align: center;
}
.hr11 {
  border-width:  1px 0 0 0; /*線の太さの指定*/
  border-style: dotted;  /*線の種類の指定*/
  border-color: #000000; /*線の色の指定*/
  margin-top: 10px;
  margin-bottom: 20px;
  }
@media (max-width:768px) {
  .mf11_box {
    flex-direction: column;
  }
  .mf11_box:nth-child(even) {
    flex-direction: column;
  }
  .mf11_text {
    text-align: left;
  }
  .mf11_box:nth-child(even) .text {
    text-align: center;
  }
  .mf11_pict {
    width:100%;
    margin-top: 10px;
    text-align: center;
  }
  .mf11_box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .mf11_pict img {
    display: block;
    margin: 0 auto;
    width: 200px;
  }
}


/*-------------------- mf12 */
#mf12 {
  background: #ffffff;
  margin-top: -120px;
}
#mf12 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 600px;
  }
}
#mf12 .mf-frame {
  padding: 100px 0;
}
#mf12 h2 {
  margin: 1em 0;
}
#mf12 h3 {
  img{
    margin-left: 0px;
    text-align: right;
    width: 700px;
  }
}
.mf12_box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.mf12_pict {
  width: 25%;
  margin-top: 90px;
  margin-left: 3%;
  img {
    width: 100%;
    height:auto;
  }
}
.mf12_pict p {
  text-align: center;
}
.hr12 {
  border-width:  1px 0 0 0; /*線の太さの指定*/
  border-style: dotted;  /*線の種類の指定*/
  border-color: #000000; /*線の色の指定*/
  margin-top: 10px;
  margin-bottom: 20px;
  }
@media (max-width:768px) {
  .mf12_box {
    flex-direction: column;
  }
  .mf12_box:nth-child(even) {
    flex-direction: column;
  }
  .mf12_text {
    text-align: left;
  }
  .mf12_box:nth-child(even) .text {
    text-align: center;
  }
  .mf12_pict {
    width:100%;
    margin-top: 10px;
    text-align: center;
  }
  .mf12_box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .mf12_pict img {
    display: block;
    margin: 0 auto;
    width: 200px;
  }
}
/*-------------------- hako12 */
.hako12 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #ffffff;
  p {
    text-align: center;
    margin: 0; 
    padding: 0;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 600px;
    margin-top: 40px;
  }
}
.hako12 h3 {
  font-size: 20px;
  line-height: 2;
  text-align: center;
}


/*-------------------- mf13 */
#mf13 {
  background: #ffffff;
  height: 2300px;
}
@media (max-width:768px) {
  #mf13 {
    height: 1350px;
  }
}
#mf13 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 510px;
  }
}
#mf13 .mf-frame {
  padding: 100px 0;
}
#mf13 h2 {
  margin: 1em 0;
}

/*----*/
:root {
  --r: 150px;
}
@media (max-width:768px) {
  :root {
    --r: 50px;
  }
}
.chart {
  position: relative;
  width: calc(var(--r) * 4);
  height: calc(var(--r) * 4);
  border-radius: 50%;
  background-image: conic-gradient(
    #e74751 17.9%,
    #f35f69 17.9% 57.4%,
    #FE9098 57.4% 88.7%,
    #ffbcc0 88.7% 100%
  );
  margin: 0 auto;
}

.chart_text {
  color: #ffffff;
  text-align: center;
  font-size: 20px;
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  text-align: center; 
}
@media (max-width:768px) {
  .label {
    font-size: 12px;
  }
}

.label-1 {
  --start: 0;
  --end: 0.2;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}
.label-2 {
  --start: 0.2;
  --end: 0.56;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}
.label-3 {
  --start: 0.56;
  --end: 0.88;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}
.label-4 {
  --start: 0.88;
  --end: 1;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}



.chart2 {
  position: relative;
  width: calc(var(--r) * 4);
  height: calc(var(--r) * 4);
  border-radius: 50%;
  background-image: conic-gradient(
    #e74751 70.0%,
    #f35f69 70.0% 77.5%,
    #FE9098 77.5% 96.7%,
    #ffbcc0 96.7% 100%
  );
  margin: 0 auto;
}

.label2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  text-align: center; 
}
@media (max-width:768px) {
  .label2 {
    font-size: 11px;
  }
}

.label2-1 {
  --start: 0;
  --end: 0.5;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}
.label2-2 {
  --start: 0.72;
  --end: 0.75;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
}
.label2-3 { 
  --start: 0.75;
  --end: 0.95;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
  margin-top: -5px;
}
.label2-4 {
  --start: 0.95;
  --end: 1;
  --percentage: calc((var(--start) + var(--end)) / 2);
  --angle: calc(var(--percentage) * 360deg);
  --deg: calc(-90deg + var(--angle));
  translate: calc(cos(var(--deg)) * var(--r) - 50%) calc(sin(var(--deg)) * var(--r) - 50%);
  color: white;
  margin-top: -20px;
}

/*-------------------- mf1_2 */
#mf1_2 {
  background: #FEFDBF;
  padding-top: 20px;
  margin-top: -120px;
}
#mf1_2 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 510px;
  }
}
#mf1_2 .mf-frame {
  padding: 100px 0;
}
#mf1_2 h2 {
  margin: 1em 0;
}
#mf1_2 .cbox {
  margin: 200px auto 0 0;
  position: relative;
}
#mf1_2 .cbox:first-of-type {
  margin: 150px auto 0 0;
}
#mf1_2 .cbox:nth-last-of-type(odd) {
  margin: 200px 0 0 auto;
}
#mf1_2 .cbox .bgS {
  position: absolute;
  top: -50px;
  right: -70px;
}
#mf1_2 .cbox:nth-last-of-type(odd) .bgS {
  right: auto;
  left: -70px;
}
#mf1_2 .cbox .cboxs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 528px;
  height: 500px;
  background: #fff;
  text-align: center;
  padding: 4em;
  position: absolute;
  top: -30px;
  right: -20px;
}
#mf1_2 .cbox:nth-last-of-type(odd) .cboxs {
  right: auto;
  left: -20px;
}
#mf1_2 .cboxs .ttl {
  font-size: 18px;
  color: #00a199;
  margin: 0 auto 2em;
}
#mf1_2 .cboxs h3 {
  font-size: 36px;
  line-height: 1.3;
}
#mf1_2 .cboxs h3:after {
  content: "";
  display: block;
  width: 1px;
  height: .8em;
  background: #616161;
  margin: .5em auto;
}

/*-------------------- mf2 */
#mf2 {
  background: #F0F7FD;
  margin-top: -100px;
}
#mf2 .mf-frame {
  padding: 100px 0;
}
#mf2 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 410px;
  }
}
#mf2 h2 {
  margin: 1em 0;
}
#mf2 .cbox {
  margin: 200px auto 0 0;
  position: relative;
}
#mf2 .cbox:first-of-type {
  margin: 150px auto 0 0;
}
#mf2 .cbox:nth-last-of-type(odd) {
  margin: 200px 0 0 auto;
}
#mf2 .cbox .bgS {
  position: absolute;
  top: -50px;
  right: -70px;
}
#mf2 .cbox:nth-last-of-type(odd) .bgS {
  right: auto;
  left: -70px;
}
#mf2 .cbox .cboxs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 528px;
  height: 500px;
  background: #fff;
  text-align: center;
  padding: 4em;
  position: absolute;
  top: -30px;
  right: -20px;
}
#mf2 .cbox:nth-last-of-type(odd) .cboxs {
  right: auto;
  left: -20px;
}
#mf2 .cboxs .ttl {
  text-align: center;
  font-size: 25px;
  color: #00a199;
  margin: 0 auto 2em;
}
#mf2 .cboxs h3 {
  font-size: 25px;
  line-height: 1.3;
}
#mf2 .cboxs h3:after {
  content: "";
  display: block;
  width: 1px;
  height: .8em;
  background: #616161;
  margin: .5em auto;
}
#mf2 .cboxs p {
  font-size: 16px;
  line-height: 1.3;
  text-align: left
}
#mf2 .cboxs img {
    display: block;
    margin: 0 auto;
    width: 120px;
}

/*-------------------- mf3 */
#mf3 {
  background: #F0F7FD;
  padding-top: 90px;
  margin-top: -100px;
}
  #mf3 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 600px;
  }
}
#mf3 .mf-frame {
  padding: 100px 0;
}
#mf3 h2 {
  margin: 1em 0;
}
#mf3 .cbox {
  margin: 200px auto 0 0;
  position: relative;
}
#mf3 .cbox:first-of-type {
  margin: 150px auto 0 0;
}
#mf3 .cbox:nth-last-of-type(odd) {
  margin: 200px 0 0 auto;
}
#mf3 .cbox .bgS {
  position: absolute;
  top: -50px;
  right: -70px;
}
#mf3 .cbox:nth-last-of-type(odd) .bgS {
  right: auto;
  left: -70px;
}
#mf3 .cbox .cboxs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 528px;
  height: 500px;
  background: #fff;
  text-align: center;
  padding: 4em;
  position: absolute;
  top: -30px;
  right: -20px;
}
#mf3 .cbox:nth-last-of-type(odd) .cboxs {
  right: auto;
  left: -20px;
}
#mf3 .cboxs .ttl {
  font-size: 18px;
  color: #00a199;
  margin: 0 auto 2em;
}
#mf3 .cboxs h3 {
  font-size: 36px;
  line-height: 1.3;
}
#mf3 .cboxs h3:after {
  content: "";
  display: block;
  width: 1px;
  height: .8em;
  background: #616161;
  margin: .5em auto;
}
#mf3 .mf-inner h3 img{
  display: block;
  margin: 0 auto;
  width: 300px;
}

/*-------------------- mf3 吹き出し*/
.fukidashi-01-06 {
  position: relative;
  margin:0 auto;
  width: fit-content;
  padding: 12px 16px;
  border: 3px solid #EA626F;
  border-radius: 25px;
  background-color: #fff;
  text-align: center;
}
.fukidashi-01-06 p{
  color: #EA626F;
  font-weight: bold;
  font-size: 25px;
}
.fukidashi-01-06::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  background-color: #fff; /* 背景色と同じ色を指定 */
  rotate: 135deg;
  translate: -50%;
}
.fukidashi-01-06::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 3px solid;
  border-color: #EA626F #EA626F transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

/*-------------------- mf5 */
#mf5 {
  background: #fff;
  margin-top: -120px;
}
#mf5 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 480px;
  }
}
#mf5 .mf-frame {
  padding: 100px 0;
}
#mf5 h2 {
  margin: 1em 0;
}

.wrap5 {
  display: flex;
  flex-wrap: wrap;
}

.item5 {
  padding: 30px;
  width: 32%;
  background-color: #fff;
  img {
    display: block;
    margin: 0 auto;
    width: 300px;
  }
}

.item5 p{
  font-size: 18px;
  line-height: 2;
  text-align: center;
}

.item5:not(:nth-child(3n+3)) {
  margin-right: 2%;
}

.item5:nth-child(n+4) {
  margin-top: 30px;
}

@media not all and (min-width: 768px) {
  .item5 {
    width: 100%;
  }

  .item5:not(:nth-child(3n+3)) {
    margin-right: 0;
  }

  .item5:nth-child(n+2) {
    margin-top: 30px;
  }
}


/*-------------------- mf6 */
#mf6 {
  background: #fff;
  padding-top: 90px;
  margin-top: -120px;
}
#mf6 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 340px;
  }
}
#mf6 .mf-frame {
  padding: 100px 0;
}
#mf6 h2 {
  margin: 1em 0;
}

/*-------------------- mf6　横スク */
.wrap6 {
  display: flex;
  align-items: center;
　height: 340px;
　overflow: hidden;
}
.slideshow6 {
  display: flex;
  animation: loop-slide 30s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.content6 {
  width: 300px;
  height: 300px;
}
.content6:nth-child(1) {
  background: url("../img/top/sample_ human.png");
}
.content6:nth-child(2) {
  background-color: orange;
}
.content6:nth-child(3) {
  background-color: blue;
}
.content6:nth-child(4) {
  background-color: green;
}

/*-------------------- mf7 */
#mf7 {
  background: #fff;
  padding-top: 90px;
  margin-top: -120px;
}
#mf7 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 340px;
    margin-top: -120px;
  }
}
#mf7 .mf-frame {
  padding: 100px 0;
}
#mf7 h2 {
  margin: 1em 0;
}

.wrap7 {
  display: flex;
  flex-wrap: wrap;
}
.item7 {
  padding: 30px;
  width: 32%;
  background-color: #fff;
  img {
    display: block;
    margin: 0 auto;
    width: 300px;
  }
}
.item7 p{
  font-size: 18px;
  line-height: 2;
  text-align: center;
}
.item7 a{
  display: block;      /* １．aタグをブロック要素にしてmarginが効くようにする */
  width: fit-content;  /* ２．ブロック要素になり親要素いっぱいになった横幅をテキスト幅に合わせる */
  margin: 0 auto;      /* ３．左右中央寄せにする */
  font-size: 18px;
  line-height: 2;
}
.item7:not(:nth-child(3n+3)) {
  margin-right: 2%;
}
.item7:nth-child(n+4) {
  margin-top: 30px;
}

/* sp版横並び */
.flex-container_sp {
  display: flex;
  flex-wrap: wrap;
}
.flex-item7 {
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  width: calc((100% - 40px) / 2);
  margin: 10px;
}

@media not all and (min-width: 768px) { 
  .item7 {
    width: 100%;
  }
  .item7:not(:nth-child(3n+3)) {
    margin-right: 0;
  }
  .item7:nth-child(n+2) {
    margin-top: 30px;
  }
}


/*-------------------- mf8 */
#mf8 {
  background: #FEFDBF;
}
#mf8 .mf-inner {
  position: relative;
  img {
    display: block;
    margin: 0 auto;
    width: 510px;
  }
}
#mf8 .mf-frame {
  padding: 100px 0;
}
#mf8 h2 {
  margin: 1em 0;
}
#mf8 .cbox {
  margin: 200px auto 0 0;
  position: relative;
}
#mf8 .cbox:first-of-type {
  margin: 150px auto 0 0;
}
#mf8 .cbox:nth-last-of-type(odd) {
  margin: 200px 0 0 auto;
}
#mf8 .cbox .bgS {
  position: absolute;
  top: -50px;
  right: -70px;
}
#mf8 .cbox:nth-last-of-type(odd) .bgS {
  right: auto;
  left: -70px;
}
#mf8 .cbox .cboxs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 528px;
  height: 500px;
  background: #fff;
  text-align: center;
  padding: 4em;
  position: absolute;
  top: -30px;
  right: -20px;
}
#mf8 .cbox:nth-last-of-type(odd) .cboxs {
  right: auto;
  left: -20px;
}
#mf8 .cboxs .ttl {
  font-size: 18px;
  color: #00a199;
  margin: 0 auto 2em;
}
#mf8 .cboxs h3 {
  font-size: 36px;
  line-height: 1.3;
}
#mf8 .cboxs h3:after {
  content: "";
  display: block;
  width: 1px;
  height: .8em;
  background: #616161;
  margin: .5em auto;
}

/*-------------------- Q&A */
.cp_qa04 .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #ffffff;
}
.cp_qa04 .cp_actab input {
  display: none;
}
/* 質問 */
.cp_qa04 .cp_actab label {
  position: relative;
  display: block;
  margin: 0 0.5em 0.5em 2em;
  padding: 1em 0 2em 0;
  cursor: pointer;
  border-radius: 5px;
  background: #7a7a7a;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa04 .cp_actab label span {
  display: block;
  padding: 0 2em 1em 2em;
  border-bottom: 1px solid #ffffff;
}
/* --?アイコン */
.cp_qa04 .cp_actab label::before {
  position: absolute;
  left: -30px;
  content: '？';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 2em;
  font-weight: bold;
  z-index: 99;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #6e6e6e;
}
/* --▼アイコン */
.cp_qa04 .cp_actab label::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  content: '';
  width: 15px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transition: all 0.5s ease;
}
/* 答え */
.cp_qa04 .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 0;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 5em;
  transition: max-height 0.5s ease;
  color: #ffffff;
}
/* --!アイコン */
.cp_qa04 .cp_actab .cp_actab-content::before {
  position: absolute;
  left: 50px;
  content: '！';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 2em;
  font-weight: bold;
  z-index: 99;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #6fb4ec;
}
.cp_qa04 .cp_actab .cp_actab-content p {
  margin: 0.5em 0.5em 0.5em 0;
  padding: 1em 1em 1em 3em;
  border-radius: 0.3em;
  background: #6fb4ec;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa04 .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa04 .cp_actab input[type=checkbox]:checked + label::after {
  transform: scale(1, -1);
}





/*-------------------- mf4 contact*/
#mf4 {
  padding-top: 80px;
  margin-top: -80px;
}
#mf4 .mf-inner {
  position: relative;
}
#mf4 h2 {
  margin: .8em 0 0;
}

#mf4 h2:after {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background: #616161;
  margin: .5em 0 .5em 2em;
}
#mf4 figure {
  position: absolute;
  right: 0;
  top: 0;
}

/*-------------------- form */
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
#mf4 dl {
  margin: 60px auto;
}
#mf4 dt {
  width: 12em;
  text-align: right;
  float: left;
  clear: both;
  padding: 8px 0;
  margin-right: 1.5em;
}
#mf4 dd {
  padding: 7px 0;
}
#mf4 input[type=text] {
  width: 490px;
  padding: 3px .7em;
  border: 1px solid #8e8e8e;
  background: #f2f2f2;
}
#mf4  textarea {
  width: 490px;
  height: 120px;
  padding: 3px .7em;
  border: 1px solid #8e8e8e;
  background: #f2f2f2;
  resize: vertical;
}
#mf4 input[type=text]::placeholder,
#mf4 textarea::placeholder{
  color: #999;
}
#mf4 .consent_area {
  margin: 10px 0 0 13em;
}
#mf4 .consent_area a {
  color:cadetblue;
  text-decoration: underline;
}
#mf4 .consent_area input[type=checkbox] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#mf4 .consent_area input[type="checkbox"] {
    cursor: pointer;
    padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
    vertical-align: middle;
    position: relative;
  }
#mf4 .consent_area input[type="checkbox"]::before,
#mf4 .consent_area input[type="checkbox"]::after {
    content: "";
    display: block; 
    position: absolute;
  }
#mf4 .consent_area input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #616161;
    width: 20px;/*チェックボックスの横幅*/
    height: 20px;/*チェックボックスの縦幅*/
    transform: translateY(-50%);
    top: 50%;
    left: 5px;
  }
#mf4 .consent_area input[type="checkbox"]::after {
    border-bottom: 3px solid #616161;/*チェックの太さ*/
    border-left: 3px solid #616161;/*チェックの太さ*/
    opacity: 0;/*チェック前は非表示*/
    height: 6px;/*チェックの高さ*/
    width: 11px;/*チェックの横幅*/
    transform: rotate(-45deg);
    top: -4px;/*チェック時の位置調整*/
    left: 10px;/*チェック時の位置調整*/
  }
#mf4 .consent_area input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }
#mf4 .agree {
  width: 100%;
  padding: 0 0 0 14em;
  float: none;
  text-align: left;
}
#mf4 .agree a {
  text-decoration-line: underline;
}

input[type="checkbox"] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 2em;
  margin-right: 1.5em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #3E9FD2;
  position: absolute;
  left: 0;
  top: .2em;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  height: 18px;
  top: 0;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#mf4 input[type=submit] {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  margin: 60px auto 100px 30%;
  padding: .8em 2em;
  background: #5fc0c6;
  color: #fff;
  letter-spacing: .3em;
  border-radius: 10px;
  cursor: pointer;
}

@media screen and (max-width: 1400px) {
  #mf2 .cbox {
    width: 88vw;
  }
  #mf2 .bgL img {
    width: 85vw;
  }
  #mf2 .cbox .bgS {
    top: -5vw;
    right: -2vw;
  }
  #mf2 .cbox .cboxs {
    top: -3vw;
    right: 1vw;
  }
  #mf2 .cbox:nth-of-type(odd) .bgS {
    top: -5vw;
    right: auto;
    left: -5vw;
  }
  #mf2 .cbox:nth-of-type(odd) .cboxs {
    top: -3vw;
    right: auto;
    left: -2vw;
  }
  #mf3 iframe {
    width: 100%;
  }
  #mf4 input[type=text],
  #mf4 textarea {
    width: 35vw;
  }
}

@media screen and (max-width: 1200px) {
  #mf1 .wrapper {
    width: 75vw;
  }
  #mf1 #idNews {
    width: 100%;
  }
  #mf2 .cbox {
    margin-top: 12vw !important;
  }
  #mf2 .cbox:nth-last-of-type(odd) {
    margin-right: -4vw;
  }
  #mf3 .wrapper {
    width: 75vw;
  }
  #mf4 figure {
    right: -6vw;
  }
}

@media screen and (max-width: 1024px) {
  body {
    font-size: 2.2vw;
  }
  #mainvis, #mainvis #bg {
    width: 100%;
    height: 80vh !important;
  }
  #mainvis #bg {
    background-size: cover;
    background-position-x: 50%;
  }
  h2 {
    font-size: 3vw;
  }
  #mf1 .ttl img {
    width: 6vw;
  }
  #mf1 #idNews {
    font-size: 2.2vw;
  }
  #mf2 .mf-frame {
    margin: 0;
  }
  #mf2 .ttl img {
    width: 35vw;
  }
  #mf2 .cbox {
    width: 100%;
    margin: 10vw auto 0 !important;
  }
  #mf2 .bgL img {
    width: 100%;
  }
  #mf2 .cbox .cboxs {
    position: relative;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    height: auto;
    padding: 5vw 5vw 0;
  }
  #mf2 .cboxs .ttl {
    font-size: 4.3vw;
  }
  #mf2 .cboxs h3 {
    font-size: 4vw;
  }
  #mf3 .mf-inner {
    margin: 10vw auto 5vw;
  }
  #mf3 h2:before {
    width: 18vw;
    height: 6vw;
  }
  #mf3 .wrapper {
    width: 80vw;
  }
  #mf3 dt {
    float: none;
    text-align: left;
    padding: 0;
  }
  #mf3 dd {
    padding: 0;
    margin-bottom: .7em;
  }
  #mf3 .ttl {
    right: -10vw;
  }
  #mf3 .ttl img {
    width: 10vw;
  }
  #mf4 .mf-inner {
    padding-top: 15vw;
  }
  #mf4 .ttl img {
    width: 45vw;
  }
  #mf4 dt {
    float: none;
    text-align: left;
    padding: 0;
  }
  #mf4 dd {
    padding: 0;
    margin-bottom: .7em;
  }
  #mf4 input[type=text], #mf4 textarea {
    width: 80vw;
  }
  #mf4 figure {
    z-index: -1;
  }
  #mf4 figure img {
    opacity: .5;
  }
  #mf4 .consent_area {
    margin: 2vw 0 0;
  }
  #mf4 .agree {
    padding: 0;
  }
  input[type="checkbox"] + label {
    margin-bottom: 1em;
    padding-left: 1.8em;
  }
  input[type="checkbox"]:checked + label:before {
    width: 0.5em;
    height: 0.8em;
    top: .3em;
    left: .3em;
  }
  #mf4 input[type=submit] {
    margin: 5vw auto 10vw;
  }
}

@media screen and (max-width: 768px) {
  #mainvis, #mainvis #bg {
    height: 120vh;
  }
  #mainvis #bg {
    display: block;
    margin: 0 auto;
    position: fixed;
    z-index: -1;
    top: 0;
    width: 100%;
    height:100vh;
    background: url("https://tsunagu-wedding.com/img/top/mv1s.jpg");
    background-position:left bottom,right top, 0% 0%;
    background-size: cover;
}
}

@media screen and (max-width: 540px) {
  body {
    font-size: 3.4vw;
    line-height: 1.5;
  }
  #mainvis, #mainvis #bg {
    height: 100vh !important;
  }
  h2 {
    font-size: 5.5vw;
  }
  #mf1 .ttl {
    margin: 0 5vw 0 0;
  }
  #mf1 .wrapper {
    width: 85vw;
    padding: 10vw 0;
  }
  #mf1 #idNews {
    font-size: 3.2vw;
  }
  #mf2 .cboxs h3 {
    font-size: 6vw;
  }
  #mf3 h2:before {
    width: 28vw;
    height: 7vw;
    top: 0;
    right: 3vw;
  }
  #mf4 figure img {
    width: 40vw;
  }
  #mf4 .consent_area p {
    white-space: nowrap;
    margin-bottom: .5em;
  }
  #mf4 .consent_area input[type="checkbox"]::after {
    top: calc(50% - 4px);
  }
  #mf4 .agree {
    font-size: 0.95em;
  }
}