@charset "utf-8";

.h_bar, 
#beltbnr {
	display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

/*--フォント--*/
.jp-m {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.jp-b {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.en-m {
  font-family: 'General Sans', sans-serif;
  font-weight: 400;
}
.en-b {
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
}

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

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

/*--main-visual--*/
.main-visual {
  width: 100%;
  margin: 0 auto 60px;
}

@media only screen and (min-width: 768px) {
  .main-visual {
    width: 900px;
  }
}  

/*--main-text--*/
.main-text {
  width: calc(100% - 72px);
  margin: 0 auto 60px;
  text-align: center;
}
.main-text h2 {
  margin-bottom: 20px;
  font-size: 2.8rem;
  line-height: 1.8;
  color: #EF6A4C;
}
.main-text p:nth-of-type(1) {
  margin: 0 auto 40px;
  font-size: 2rem;
  line-height: 1.8;
  color: #000000;
  text-align: center;
}
.main-text p:nth-of-type(n+2) {
  margin: 0 auto 30px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #000000;
  text-align: justify;
}
.main-text p:last-child {
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .main-text {
    width: 900px;
  }
  .main-text h2 {
    font-size: 3.2rem;
  }
  .main-text p:nth-of-type(1) {
    font-size: 2.4rem;
  }  
  .main-text p:nth-of-type(n+2) {
    text-align: center;
  }
}  

/*--grand-prix--*/
.grand-prix {
  width: 100%;
  margin: 0 auto;
  padding: 60px 36px;
  background: #F8F1E8;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .grand-prix {
    padding: 60px 0;
  }  
  .grand-prix .award-inner {
    width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 358px;
    grid-gap: 40px;
    align-items: center;
  }
}  

/*--second-grand-prix--*/
.second-grand-prix {
  width: 100%;
  margin: 0 auto;
  padding: 60px 36px;
  background: #ffffff;
  text-align: center;
}
.second-grand-prix .award-inner {
  margin: 0 auto 60px;
}
.second-grand-prix .award-inner:last-child {
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .second-grand-prix {
    padding: 60px 0;
  }  
  .second-grand-prix .award-wrapper {
    width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 40px;
    align-items: end;
  }
  .second-grand-prix .award-inner {
    margin: 0 auto;
  }  
}  

/*--warm-award--*/
.warm-award {
  width: 100%;
  margin: 0 auto;
  padding: 60px 36px;
  background: #F8F1E8;
  text-align: center;
}
.warm-award .award-inner {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 20px 30px;
}

@media only screen and (min-width: 768px) {
  .warm-award {
    padding: 60px 0;
  }
  .warm-award .award-inner {
    width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 20px 30px;
  }
}  

/*--grand-prix/second-grand-prix/warm-award共通--*/
.award-title {
  margin: 0 auto 30px;
}
.award-title h3 {
  margin: 0 auto 20px;
}
.grand-prix .award-title h3, 
.second-grand-prix .award-title h3 {
  width: 110px;
}
.warm-award .award-title h3 {
  width: 124px;
}
.award-title p {
  font-size: 3rem;
  line-height: 0.6;
  color: #EF6A4C;
}
.award-title p span {
  font-size: 1.2rem;
  color: #EF6A4C;
}
.award-photo {
  margin: 0 auto 20px;
}
.award-comment h4 {
  margin: 0 auto 20px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #EF6A4C;
}
.award-comment > p {
  margin: 0 10px 0 0;
  font-size: 1.4rem;
  line-height: 20px;
  color: #000000;
  text-align: right;
}
.award-comment > p::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  padding-left: 20px;
  line-height: 20px;
  vertical-align: -5px;
  background-image: url(/campaign/2025/holiday/photoaward/images/icon_insta.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.award-comment .speech-bubble {
  margin: 0 auto 10px;
  position: relative;
}
.award-comment .speech-bubble p {
  margin: 6.98%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3.26vw;
  line-height: 2;
  color: #000000;
  text-align: left;
}

@media only screen and (min-width: 768px) {
  .award-title h3 {
    margin: 0 auto 40px;
  }
  .grand-prix .award-title h3, 
  .second-grand-prix .award-title h3 {
    width: 132px;
  }
  .warm-award .award-title h3 {
    width: 149px;
  }
  .award-title {
    margin: 0 auto 60px;
  }
  .award-title p span {
    margin-left: 5px;
  }
  .award-comment .speech-bubble p {
    font-size: 1.4rem;
  }
  .grand-prix .award-comment .speech-bubble p {
    margin: 30px;
  }
  .second-grand-prix .award-comment .speech-bubble p {
    margin: 25px;
  }
}  


/*--アニメーション--*/
.fadeIn {
  opacity: 0;
}
.fadeIn.active {
  animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.zoomIn {
  transform: translate(100px,100px) scale(0);
}
.zoomIn.active {
  animation: zoomIn 1s ease-in-out forwards;
}
@keyframes zoomIn {
  0%{
    transform: translate(100px,100px) scale(0);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}