/*===========================================
color setting
===========================================*/
/*===========================================
partner
===========================================*/
@keyframes a-bg-partner {
  0% {
    background-image: url("../images/1.svg");
  }
  33.33% {
    background-image: url("../images/2.svg");
  }
  66.66% {
    background-image: url("../images/3.svg");
  }
  100% {
    background-image: url("../images/1.svg");
  }
}
.wrap-partner .inner-partner {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-image: url(../images/soda-00.svg);
  background-size: 95% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s; }
.wrap-partner .list-partner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }
@media screen and (min-width: 768px) {
  .wrap-partner {
    max-width: 820px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px; }
    .wrap-partner .inner-partner {
      padding-top: 86%;
      background-image: url(../images/soda-00.svg);
      background-size: 85.553% auto; }
      .wrap-partner .inner-partner.active {
        animation: a-bg-partner 2s ease-in infinite; } }

.main-partner {
  width: 35%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }
  .main-partner h3 {
    font-size: 2rem;
    line-height: 1.2; }
  .main-partner p {
    margin-bottom: 10px; }
  .main-partner a {
    font-size: 1.8rem; 
    background-color: #EB6D9A;
    border-radius: 100px;
    margin-top:10px;
    display: inline-block;
    padding:10px 15px;
    color:#fff;
    text-decoration: none;
    }
  .main-partner a:hover{
	  opacity: 0.5
  }
  @media screen and (max-width: 767px) {
	.main-partner h3 {
    font-size: 1.4rem;
    line-height: 1.2; }
    .main-partner {
      font-size: 1rem; } 
    .main-partner a {
    font-size: 1.2rem; 
    margin-top:0px;
    padding:5px 10px;
    }
      
      }
  @media screen and (min-width: 768px) {
    .main-partner h3 {
      font-size: 2.2rem; } }

.item-partner {
  width: 30%;
  position: absolute; }
  .item-partner .inner-item-partner {
    padding-top: 100%;
    width: 100%;
    position: relative;
    background-color: #ffffff;
    border-radius: 50%; }
  .item-partner .content-item-partner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .5s ease;
    text-align: center;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10%;
    background-position: center;
    }
    .item-partner .inner-item-partner .content-item-logo {
      position: absolute;
      width: 100%;
      height: auto;
      background-color: #fff
}

.content-proposal .content-item-logo img{
  height: 100%;
}

.content-proposal .content-item-logo.partner1{
  top: -40%;
  right: 0%;
  translate: 100%;
  padding: 2%;
}

.content-proposal:has(.content-item-logo:hover) .item1,
.content-proposal:has(.content-item-logo:hover) .item1-2,
.content-proposal:has(.content-item-logo:hover) .item2,
.content-proposal:has(.content-item-logo:hover) .item3,
.content-proposal:has(.content-item-logo:hover) .item4,
.content-proposal:has(.content-item-logo:hover) .item5,
.content-proposal:has(.content-item-logo:hover) .item6 {
  opacity: 0.3;
}

/* hover中のやつだけ元に戻す */
.content-proposal:has(.content-item-logo.partner1:hover) .item1,
.content-proposal:has(.content-item-logo.partner1-2:hover) .item1,
.content-proposal:has(.content-item-logo.partner2:hover) .item2,
.content-proposal:has(.content-item-logo.partner3:hover) .item3,
.content-proposal:has(.content-item-logo.partner4:hover) .item4,
.content-proposal:has(.content-item-logo.partner5:hover) .item5,
.content-proposal:has(.content-item-logo.partner6:hover) .item6 {
  opacity: 1;
}

.content-proposal .content-item-logo.partner1-2{
  top: -7%;
  right: 0%;
  translate: 100% 0%;
  padding: 2%;
}

.content-proposal .content-item-logo.partner2{
  top: -30%;
  left: 0%;
  translate: -100% 50%;
  padding: 2%;
}

.content-proposal .content-item-logo.partner3, .content-proposal .content-item-logo.partner6{
  bottom: -10%;
  right: 50%;
  translate: 100% 80%;
}

.content-proposal .content-item-logo.partner3{
 padding: 2%;
}

.content-proposal .content-item-logo.partner6{
  translate: 0% 80%;
}

.content-proposal .content-item-logo.partner4{
 bottom: -15%;
 right: 0%;
 translate: 100% 0%;
  padding: 2%;
}

.content-proposal .content-item-logo.partner5{
 bottom: -15%;
 left: 0%;
 translate: -100% 0%;
 width: 30%;
}

 .item-partner .content-item-partner.item1 h3,.item-partner .content-item-partner.item1 p{
   color:#fff;
   text-shadow: 0px 0px 10px rgba(196, 98, 145, 0.6);
 }
 
  .item-partner .content-item-partner.item2 h3{
    color:#fff;
    text-shadow: 0px 0px 10px rgba(175, 62, 108, 0.6);
  }
  
  .item-partner .content-item-partner.item3 h3{
    color:#fff;
    text-shadow: 0px 0px 10px rgba(9, 150, 146, 0.6);
  }
  
  .item-partner .content-item-partner.item4 h3{
    color:#fff;
    text-shadow: 0px 0px 10px rgba(168, 72, 59, 0.6);
  }
  
  .item-partner .content-item-partner.item5 h3{
    color:#fff;
    text-shadow: 0px 0px 10px rgba(173, 75, 87, 0.6);
  }
  
  .item-partner .content-item-partner.item6 h3{
    color:#fff;
    text-shadow: 0px 0px 10px rgba(104, 48, 127, 0.6);
  }
  
   @media only screen and (max-width: 640px) {
   	.item-partner .content-item-partner h3{
	   font-size:0.8em;
   }
   }
   
   .item-partner .content-item-partner p{
	   color:#fff;
      text-shadow: 0px 0px 20px rgba(90, 90, 90, 0.7);
   }
  .item-partner p {
    font-size: 1.2rem; }
   @media only screen and (max-width: 640px) {
    .item-partner p {
    font-size: 1rem; } 	
   }
   
  .item-partner:nth-child(2) {
    top: 0;
    left: 16%; }
  .item-partner:nth-child(1) {
    top: 0;
    right: 16%; }
    .item-partner:nth-child(1) .inner-item-partner {}
  .item-partner:nth-child(6) {
    left: 0;
    top: 35%; }
    .item-partner:nth-child(6) .inner-item-partner { }
  .item-partner:nth-child(3) {
    right: 0;
    top: 35%; }
    .item-partner:nth-child(3) .inner-item-partner {}
  .item-partner:nth-child(5) {
    bottom: 0;
    left: 16%; }
    .item-partner:nth-child(5) .inner-item-partner { }
  .item-partner:nth-child(4) {
    bottom: 0;
    right: 16%; }
    .item-partner:nth-child(4) .inner-item-partner {}
  @media screen and (min-width: 768px) {
    .item-partner {
      width: 26.410%;
/*       background-color: #fff; */
      border-radius: 50%; }
      .item-partner:nth-child(2), .item-partner:nth-child(5) {
        left: 20.09%; }
      .item-partner:nth-child(1), .item-partner:nth-child(4) {
        right: 20.09%; }
      .item-partner:nth-child(6), .item-partner:nth-child(3) {
        top: 31.982%; }
      .item-partner .inner-item-partner {
        transition: all 0.3s ease-in; }
      .item-partner p {
        font-size: 1.4rem; }
      }

.content-partner {
  padding: 20px; }
  .content-partner h1 {
    margin-top: 0;
    padding: 0; }
  .content-partner .wrap-link,
  .content-partner .wrap-img {
    text-align: center; }
  .content-partner .wrap-img {
    margin-top: 40px;
    margin-bottom: 40px; }
    .content-partner .wrap-img img {
      height: 80px; }
    .content-partner .wrap-img img.mitsuibussan {
      height: 150px; }
  .content-partner p {
    margin-top: 20px; }
  .content-partner a {
    color: #cc0070; }
  .content-partner .link-back {
    cursor: pointer;
    color: #cc0070; }
    .content-partner .link-back::before {
      content: "<";
      display: inline-block;
      margin-right: 10px; }
    .content-partner .link-back:hover {
      text-decoration: underline; }
  @media screen and (min-width: 768px) {
    .content-partner {
      padding: 40px; } }

/*
.h-modal-partner {
  padding: 15px 20px 10px 20px;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 600; }
  .h-modal-partner.p-1 {
    background-color: #F3ABCA; }
  .h-modal-partner.p-2 {
    background-color: #ED7FAF; }
  .h-modal-partner.p-3 {
    background-color: #F7C7C6; }
  .h-modal-partner.p-4 {
    background-color: #F19282; }
  .h-modal-partner.p-5 {
    background-color: #F5B4BA; }
  .h-modal-partner.p-6 {
    background-color: #C2A5CB; }
  .h-modal-partner.p-7 {
    background-color: #AAAEBE; }
  @media screen and (min-width: 768px) {
    .h-modal-partner {
      padding: 15px 40px 10px 40px;
      font-size: 2rem; } }
*/

.mfp-iframe-window .mfp-iframe-holder .mfp-content {
  max-width: 800px !important; }

.wrap-content-partner {
  overflow: hidden; }
  .wrap-content-partner .inner-content-partner {
    display: flex;
    transition: transform 0.3s ease-in; }
    .wrap-content-partner .inner-content-partner .content-partner {
      width: 100%;
      flex-shrink: 0; }
    .wrap-content-partner .inner-content-partner.goto-step2 {
      transform: translateX(-100%); }
    .wrap-content-partner .inner-content-partner .link-content-partner-step2 {
      cursor: pointer; }

.grid-main-content-p {
  margin-top: 20px; }
  @media screen and (max-width: 767px) {
    .grid-main-content-p .img2 {
      margin-top: 20px; } }
  @media screen and (min-width: 768px) {
    .grid-main-content-p {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .grid-main-content-p .img1 {
        order: 1; }
      .grid-main-content-p .img2 {
        order: 2; }
      .grid-main-content-p .img1,
      .grid-main-content-p .img2 {
        width: calc(50% - 10px); }
      .grid-main-content-p .text {
        width: 100%;
        order: 3; } }

.content-proposal {
  max-width: 900px;
  margin: 6vw auto 6vw auto;
  position: relative;
}
  .content-proposal h1 {
    padding-bottom: 10px; }
/*
  .content-proposal p {
    margin-left: 20px; }
*/



.proposal-img{
  position: relative;
  max-width: 1000px;
  margin: auto;
}

#on-proposal{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: 100%;
  z-index: 1;
}

.cls-2{
  opacity: 0;
}
.cls-2 {
  opacity: 0;
  transition: 0.3s;
  fill: #fff;
}

/* =========================
   tennen hover時
========================= */
#on-proposal:has(#tennen1:hover),
#on-proposal:has(#tennen1-2:hover) {
}

#on-proposal:has(#tennen1:hover) .cls-2:not(#tennen-cicle),
#on-proposal:has(#tennen1-2:hover) .cls-2:not(#tennen-cicle) {
  opacity: 0.5;
}

/* =========================
   koryo hover時
========================= */
#on-proposal:has(#koryo:hover) .cls-2:not(#koryo-cicle) {
  opacity: 0.5;
}

/* =========================
   zounenzai hover時
========================= */
#on-proposal:has(#zounenzai:hover) .cls-2:not(#zounenzai-cicle) {
  opacity: 0.5;
}

/* =========================
   nutrition hover時
========================= */
#on-proposal:has(#nutrition:hover) .cls-2:not(#nutrition-cicle) {
  opacity: 0.5;
}

/* =========================
   to-alcohol hover時
========================= */
#on-proposal:has(#to-alcohol:hover) .cls-2:not(#nutrition-cicle-2) {
  opacity: 0.5;
}

/* =========================
   syokuhin hover時
========================= */
#on-proposal:has(#syokuhin:hover) .cls-2:not(#_-cicle) {
  opacity: 0.5;
}

#on-proposal:has(#me:hover) .cls-2:not(#me-circle){
  opacity: .5;
}