@charset "utf-8";
.aspect-a-w {aspect-ratio: 640 / 427;}
.aspect-3-4 {aspect-ratio: 3 / 4;}
.aspect-5-7 {aspect-ratio: 5 / 7;}
.aspect-9-10 {aspect-ratio: 9 / 10;}
.aspect-20-7 {aspect-ratio: 20 / 7;}
.aspect-1-04 {aspect-ratio: 300 / 149;}
.aspect-29-10 {aspect-ratio: 291 / 100;}
.aspect-128-51 {aspect-ratio: 640 / 225;}
.aspect-347-222 {aspect-ratio: 347 / 222;}
.aspect-360-107 {aspect-ratio: 360 / 107;}
.aspect-479-600 {aspect-ratio: 479 / 600;}

.contents-title-bg-mini img.aspect-29-10{width:13rem;right:8%;}
.contents-title-bg-mini img.aspect-1-1{width:18rem;right:8%;}
.contents-title-bg-mini img.aspect-9-10{width:20rem;right:8%;}

.w80rem{
  width: 100%;
  max-width: 80rem;
  margin:3em auto 0;
}

.section-title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media screen and (min-width: 641px) {
  .w80rem .pb-1{padding-bottom: 0;}  
}

.w80rem.text-align-center .notice-txt {
  display: inline-block;
}

.w80rem.text-align-center .list-style-none .notice-txt {
  display:inline-block;
}

.selectbox {
  width: calc(100% - 2em);
  margin:0.5em auto;
  display: block;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 0.2em;
  box-sizing: border-box;
  appearance: none;
  background: #fff;
  position: relative;
  appearance: none;
  padding: 0.6em;
}

.selectbox:after {
  right: 0.5em;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  width: 6px;
  height: 6px;
  border-bottom: solid 2px #b4b3b3;
  border-right: solid 2px #b4b3b3;
  transform: rotate(45deg);
  content: '';
  z-index: 100;
}

.selectbox select {
  width: 100%;
  cursor: pointer;
}

.button_f {
  width: calc(100% - 2em);
  margin:0.5em auto;
}

.button_f button {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0.6em 0.5em;
  display: block;
  border-radius: 3em;
  background-color: #00aeef;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.button_f button::before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  border-top: 0.3rem solid #fff;
  border-right: 0.3rem solid #fff;
  transform: rotate( 45deg );
  content: "";
}

.button_f button {
  transition: all .5s ease;
}

.button_f button:hover {
  opacity: 0.8;
}

.underline {
  text-decoration: underline;
}

.number-log {
  width: 100%;
  max-width: 80rem;
  margin:2em auto 0;
  padding: 1em 0;
  text-align: center;
  border: 2px dashed #00aeef;
  border-radius: 0.5em;
}

.number-log strong {
  position: relative;
  margin: 0 0.1rem 0 0.8em;
  padding: 0;
  color: #b7282d;
  line-height: 1.4;
  letter-spacing: -0.02em;
  z-index: 10;
}

.number-log strong:after {
  position: absolute;
  top: -0.8em;
  left: -2.2em;
  margin: 0;
  width: 108px;
  height: 72px;
  display: block;
  background: url(/funding/common/img/angel.svg) center center no-repeat;
  background-size: contain;
  transform: scale(-1, 1) rotate(20deg);
  animation: angel 2s ease-in-out infinite;
  content: "";
  z-index: -1;
}

@keyframes angel {
  0% { background-position: top center;}
  50% { background-position: bottom center;}
  100% { background-position: top center;}
}

.number-log span {
  position: relative;
  font-weight:bold;
  z-index: 10;
}

.number-log time {
  position: relative;
  margin: 0;
  padding: 0 0.5em;
  line-height: 1.4;
  z-index: 10;
}

.popup-iframe{
  border:0.1rem solid #ccc;
}

.popup-iframe:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  background: url(/funding/common/img/youtube.svg) center center no-repeat;
  content: "";
  z-index: 1;
}

.prsu-dl3 ,
.prsu-dl2 ,
.prsu-dl1 ,
.prsu-dl{
  letter-spacing:-.4em;
}

.prsu-dl1 ,
.prsu-dl{
  padding:1em 2em 2em !important;
}

.prsu-dl3 ,
.prsu-dl2{
  margin: 0 0 2em;
  padding:1em 1em 2em !important;
}

.prsu-dl3 dt,.prsu-dl3 dd,
.prsu-dl2 dt,.prsu-dl2 dd,
.prsu-dl1 dt,.prsu-dl1 dd,
.prsu-dl dt,.prsu-dl dd {
  display: inline-block;
  letter-spacing:normal;
  vertical-align: top;
  margin: 1em 0 0;
}

.prsu-dl3 dt ,
.prsu-dl2 dt ,
.prsu-dl1 dt ,
.prsu-dl dt {
  font-weight: bold;
  text-align: right;
}

.prsu-dl3 dt::after ,
.prsu-dl2 dt::after ,
.prsu-dl1 dt::after ,
.prsu-dl dt::after {
  content: "：";
}

.prsu-dl3 dd,
.prsu-dl2 dd,
.prsu-dl1 dd,
.prsu-dl dd {
  line-height: 1.6;
}

.prsu-dl dt {width: 7em;}
.prsu-dl dd {width: calc(100% - 7em);}

.prsu-dl1 dt {width: 4em;}
.prsu-dl1 dd {width: calc(100% - 4em);}

.prsu-dl2 dt {width: 8em;}
.prsu-dl2 dd {width: calc(100% - 8em);}

.prsu-dl3 dt {width: 11em;}
.prsu-dl3 dd {width: calc(100% - 11em);}

.pro-dt {
  margin: 0;
  padding: 0.6em;
  display: block;
  background-color: #f0f0f0;
  border-top: 0.2rem solid #999;
  border-bottom: 0.2rem dotted #999;
  font-size: var(--font-size-xl);
  line-height: 1.4;
}

.com-dl {
  width: 100%;
  margin:-1em 0 0;
  letter-spacing:-.4em;
}

.com-dl dt,
.com-dl dd {
  display: inline-block;
  letter-spacing:normal;
  vertical-align:middle;
  margin: 1em 0 0;
}

.com-dl dt {
  width: 5.5em;
  font-weight: bold;
}

.com-dl strong::after {
  content: "：";
}

.com-dl dd {
  width: calc(100% - 5.5em);
  line-height: 1.6;
}

.txt-end {
  position: relative;
  margin: 3em auto 4em;
  padding: 0;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(255,255,255,1), 1px 1px 4px rgba(255,255,255,.8), 1px 1px 4px rgba(255,255,255,.8), 0px 0px 4px rgba(255,255,255,.8);
  z-index: 100;
}

.txt-end:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 6em;
  display: block;
  background: url(/funding/img/shampoo/bg_splash.png) center center no-repeat;
  background-size: 80% 90%;
  opacity: 0.25;
  z-index: -2;
  content: "";
}

.txt-end em{ position: relative; display: inline-block;}

.txt-end em:before,
.txt-end em:after{
  position: absolute;
  margin: auto;
  padding: 0;
  width: 8em;
  height: 2.5em;
  display: block;
  background: url(/funding/img/shampoo/star.svg) center center no-repeat;
  background-size: contain;
  opacity: 0.8;
  z-index: -1;
  content: "";
}

.txt-end em:before{ top: -2.5em; left: 0; right: 0;}
.txt-end em:after{ bottom: -2.5em; left: 0; right: 0;  transform: scale(1, -1);}
.txt-end strong{display: block;}

@media screen and (min-width: 641px) {
  .txt-end strong{display:inline;}
  .sp-br {display: none;}
}

.img-border {
  border: 0.1rem solid #ccc;
}

.popup-iframe {
  border:none;
}

.popup-iframe:before {
  position:relative;
  display: none;
}

@media screen and (min-width: 641px) {
  .size-50 .image-size-l {
    width: 95%;
  }
}


.duck-profile-ttl {
  position: relative;
  display: table;
  margin: 1.5em auto 0.5em;
  padding: 0.5em 1.5em;
}

.duck-profile-ttl:before,.duck-profile-ttl:after {
  position: absolute;
  left: 0.5em;
  bottom: 0;
  margin: auto;
  display: block;
  width: 1px;
  height: 80%;
  background-color: #333;
  transform: rotate(-30deg);
  content: "";
}

.duck-profile-ttl:after {
  right: 0.5em;
  left: inherit;
  bottom: 0;
  transform: rotate(30deg);
}

.duck-profile {
  padding: 2em 3em;
  margin: 0.5em auto 2em;
  background-color: #fffcdb;
  border-radius: 1rem;
}

.duck-image .txt {
  text-align: center;
  font-weight: bold;
} 

.profile {
  padding: 1.5em;
  display: block;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0.5rem 0.5rem 0 0 rgba(153,153,153,0.5);
}

.duck-profile dl {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.duck-profile dl:after{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url(/img/home/image_gray_01.svg) right center no-repeat;
  background-size: auto 90%;
  content: "";
  opacity: 0.3;
  z-index: 1;
}

.duck-profile dl dt{
  position: relative;
  margin: 0.5rem 0;
  padding: 0.3em;
  width: 7em;  
  display: block;
  border-radius: 2em;
  background-color: #00aeef;
  color: #fff;
  font-size: var(--font-size-s);
  z-index: 10;
  text-align: center;
}

.duck-profile dl dd{
  position: relative;
  margin: 0.5rem 0;
  padding: 0 0.5em 0;
  width: calc(100% - 7em);  
  display: block;
  line-height: 1.6;
  text-align: left;
  text-shadow: 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.3rem #fff, 0 0 0.3rem #fff, 0 0 0.3rem #fff, 0 0 0.3rem #fff;
  z-index: 10;
}

.profile p.txt{
  margin: 1em 0 0;
  padding: 1em 0 0;
  display: block;
  border-top: 0.2rem dotted #00aeef;
  line-height: 1.6;
  text-align: left;
}

.popup-iframe::after {
  position:absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  margin: auto;
  width: 6rem;
  height:6rem;
  background: url(/funding/common/img/youtube.svg) center center no-repeat;
  content: "";
  z-index: 100;
}

.error_area{
  width: 100%;
  max-width: 80rem;
  margin: 2em auto 0;
  padding:1em;
  text-align: center;
  color: #f00;
  font-size: var(--font-size-m);
  font-weight: bold;
  box-sizing: border-box;
  background-color: #ffeaec;
  border-radius: 0.4em;
  border: 1px solid #d32d26;
}

.item0006 .popup-iframe::after {
  display: none;
}


.hairclip .prsu-dl dt,
.hairtie2 .prsu-dl dt{
 width: 9em;
}


.hairclip .prsu-dl dd,
.hairtie2 .prsu-dl dd { 
 width: calc(100% - 9em);
}

@media screen and (max-width: 641px) {
.hairclip .prsu-dl dt,
.hairtie2 .prsu-dl dt{
  width: 100%;
  text-align: left;
}
.hairclip .prsu-dl dd,
.hairtie2 .prsu-dl dd{ 
  width: 100%;
  margin: 0;
  padding: 0 0 0.5em 0;
  border-bottom: 1px dotted #9d9d9d;
}
.hairclip .lead-txt.text-align-center,
.hairtie2 .lead-txt.text-align-center{text-align: left;}
}

.contents-title-mini {
  margin: 0 0 1em;
}

.swiper.no-item::after {
  position: absolute;
  content: "在庫なし";
  top: 0;
  left: 0;
  background: #ff7070;
  color: #fff;
  font-size: 1.8rem;
  padding: 0.5rem 1.5rem 0 1.5rem;
  z-index: 2;
}

.notice-red{
  text-align: center;
  font-size: var(--font-size-l);
  color: #d32d26;
  font-weight: 800;
}

/* 0023 wig-collaboration-company */
.wig-collaboration-company{
  position: relative;
  margin: 2em;
  padding: 1em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 0 2rem -0.5rem rgba(0,0,0,0.5);
}

.wig-collaboration-company li{
  position: relative;
  margin: 0;
  padding: 1em 2em;
  display: flex;
  align-items: center;
}

.wig-collaboration-company .co-01 img{ max-width: 23.4rem;}
.wig-collaboration-company .co-02 img{ max-width: 20rem;}
.wig-collaboration-company .co-03 img{ max-width: 18rem;}

.wig-collaboration-company .co-01:before,
.wig-collaboration-company .co-02:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 0.1rem;
  height: 2.5rem;
  display: block;
  background-color: #4c4c4c;
  transform: rotate(135deg);
  content: "";
  z-index: 10;
}

.wig-collaboration-company .co-01:after,
.wig-collaboration-company .co-02:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 0.1rem;
  height: 2.5rem;
  display: block;
  background-color: #4c4c4c;
  transform: rotate(45deg);
  content: "";
  z-index: 10;
}

@media screen and (max-width: 800px) {

.wig-collaboration .txt{ text-align: left;}
.wig-collaboration .txt br{ display: none;}

}/* End max 800 */


@media screen and (max-width: 640px) {

.wig-collaboration-company{ margin: 2em auto; width: 94%; flex-direction: column;}

.wig-collaboration-company li{ padding: 1.5em 1em;}
.wig-collaboration-company .co-01{ padding: 1.5em 1em 2em;}
.wig-collaboration-company .co-03{ padding: 2em 1em 1.5em;}

.wig-collaboration-company .co-01:before,
.wig-collaboration-company .co-02:before {
  position: absolute;
  top: inherit;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 2.5rem;
  height: 0.1rem;
}

.wig-collaboration-company .co-01:after,
.wig-collaboration-company .co-02:after {
  position: absolute;
  top: inherit;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 2.5rem;
  height: 0.1rem;
}

}/* End max 640 */

/* 0023 wig-styling */

.wig-styling{
  margin: 0 auto;
  padding: 2em 0 0;
  width: 85%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wig-styling li{
  padding: 0 0 3em;
  width: calc(50% - 2em);
}


.wig-styling .style-name{
  position: relative;
  margin: 2em 1em 1em;
  padding: 0;
  text-align: center;
}

.wig-styling .style-name:before{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  display: block;
  border: solid #4c4c4c 0.1rem;
  border-width: 0.1rem 0.1rem 0 0;
  content: "";
  pointer-events: none;
  z-index: -10;
}

.wig-styling .style-name:after{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width:  calc(100% + 1rem);
  height:  calc(100% + 1rem);
  display: block;
  border: solid #4c4c4c 0.1rem;
  border-width: 0 0 0.1rem 0.1rem;
  content: "";
  pointer-events: none;
  z-index: -10;
}

.wig-styling .style-name a{
  position: relative;
  padding: 1em 0.5em;
  display: block;
  color: #333;
  line-height: 1.5;
  transition: all .5s ease;
  z-index: 1;
}

.wig-styling .style-name a:before{
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  margin: 0;
  padding: 0;
  width: calc(100% - 0.6rem);
  height: calc(100% - 0.6rem);
  display: block;
  background: #4c4c4c;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
  content: "";
  z-index: -1;
}

.wig-styling .photo-link,
.wig-styling .photo-link img{
  position: relative;
  display: block;
  transition: transform 0.5s;
}

.wig-styling .photo-link:before{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #f5f5f5;
  transform: translate(0, 0);
  transition: transform 0.5s;
  opacity: 1;
  content: "";
  z-index: -1;
}



@media screen and (min-width: 641px) {

.wig-styling .style-name a:hover { color: #fff;  opacity: 1;}
.wig-styling .style-name a:hover:before{ background-color: #4c4c4c; transform: scale(1, 1); transform-origin: left top;}

.wig-styling .photo-link:hover{ opacity: 1;}
.wig-styling .photo-link:hover img{ transform: translate(-1rem, -1rem);}
.wig-styling .photo-link:hover:before{ transform: translate(1rem, 1rem);}

}/* End min 641 */




.wig-styling .style-name strong:before{
  position: absolute;
  top: -1em;
  left: -1em;
  margin: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: block;
  border: solid #fff 0.3rem;
  border-color: transparent transparent #fff #fff;
  content: "";
  z-index: -5;
}

.wig-styling .style-name strong:after{
  position: absolute;
  bottom: -1em;
  right: -1em;
  margin: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: block;
  border: solid #fff 0.3rem;
  content: "";
  z-index: -5;
}

@media screen and (max-width: 880px) {

.wig-styling li{
  padding: 0 0 2em;
  width: calc(50% - 1em);
}

}/* End max 880 */


@media screen and (max-width: 480px) {

.wig-styling{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.wig-styling li{ width: 90%;}

}/* End max 880 */

.wig-section.movie-section{
  width: 100%;
  max-width: 100%;
 background-color: #f5f5f5;
}

.wig-section.movie-section .movie-section-inner{
  margin: 0 auto;
  width: 90%;
  max-width: 88rem;
}

 .top-movie-block{
  position: relative;
  margin: auto;
  padding: 0.5em;
  width: 100%;
  max-width: 64rem;
}


/* 0023 button-gray */
.button-gray a{
 position: relative;
  margin: 0.8em auto 1.5em;
  padding: 1em 0.5rem 1em 4rem;
  width: 90%;
  max-width: 62rem;
  display: block;
  border-radius: 3em;
  background-color: #f5f5f5;
  color: #00aeef;
  font-size: 1.6rem;
  border:0.1rem solid #00aeef;
}
.button-gray a::before{
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  border-top: 0.3rem solid #00aeef;
  border-right: 0.3rem solid #00aeef;
  transform: rotate( 45deg );
  content: "";
}/* 0023 button-gray  */

/* 0023 style-title */
.style-title{
  position: relative;
  margin: 0 0 1em 0;
  padding: 0.7em;
  display: block;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center; 
  border-bottom: 1px dotted #333;
}

.txt-size{
	padding: 0.3em;
	font-size: 1.7rem;
	line-height: 1.7;
  text-align: center;
  color:#4c4c4c;
  background-color:#f5f5f5;
}

/* table */

table{
  width: 100%;
}

table th{
  position: relative;
  font-weight: 300;
  text-align: left;
  width: 70%;
}

table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #ccc;
  position: absolute;
  top:calc(50% - 1px);
  right:-15px;
}

table td{
  text-align: left;
  padding:0.5em 0 0.5em 2em;
  width: 30%;
}




/*split*/
.split .split-4-1{ width: calc(25% - 1rem);}

@media screen and (max-width: 640px) {
.split .split-4-1{ width: calc(50% - 1rem);}
}


/* set-item */

.set-item #FUBAR_FORM .selectbox{
  margin: 0.5em 0 1.5em ;
}