@charset "UTF-8";

.lp{padding-bottom: 0;}
.home-content.support-content{margin-block-start: 0;}

html {
  background: #E4E4E4;
}


/*******************************
UU240412popup
*******************************/
#UU240412popup{
  display: block;
  width: 100%;
  padding: 0 0 calc(120 * (100vw / 750));
  background: #E4E4E4;
  box-sizing: border-box;
  font-family: "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #555555;
}

#UU240412popup *{box-sizing: border-box;}

#UU240412popup picture,
#UU240412popup figure,
#UU240412popup img{
  display: block;
  width: 100%;
  height: auto;
}

#UU240412popup .imgOuter > a,
#UU240412popup figure > a{display: block; width: 100%; height: auto;}

#UU240412popup a:hover{opacity: 1;}

/*******************************
fadeInSetting
*******************************/
#UU240412popup .fadeInBlock,
#UU240412popup .fadeInList .fadeInTarget{
  visibility: hidden;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1.5s ease, transform 1.5s ease;
  pointer-events: none;
}

#UU240412popup .fadeInBlock.view,
#UU240412popup .fadeInList .fadeInTarget.view{
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  pointer-events: inherit;
}

/*******************************
mv
*******************************/
#UU240412popup .mv{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 auto calc(64 * (100vw / 750));
  background: #FFFFFF;
}

#UU240412popup .mv .outer{
  display: block;
}

/*******************************
lpMainTTL
*******************************/
#UU240412popup .lpMainTTL{
  display: block;
  padding-bottom: calc(78 * (100vw / 750));
  margin-bottom: calc(60 * (100vw / 750));
  font-size: calc(37 * (100vw / 750));
  font-weight: 500;
  text-align: center;
  line-height: 2.054054054054054;
  letter-spacing: 0.11em;
  padding-left: calc(5 * (100vw / 750));
  font-feature-settings: 'palt';
  color: #555555;
  position: relative;
}

#UU240412popup .lpMainTTL > span{
  display: block;
  font-family: "jaf-bernino-sans", sans-serif;
  font-weight: 400;
  font-size: calc(29 * (100vw / 750));
  line-height: 1.517241379310345;
  letter-spacing: 0.16em;
  text-align: center;
  padding-top: calc(14 * (100vw / 750));
}

#UU240412popup .lpMainTTL > em{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: calc(155 * (100vw / 750));
  height: calc(41.4691 * (100vw / 750));
  border-top: 1px solid #555555;
  border-bottom: 1px solid #555555;
  padding-bottom: calc(4 * (100vw / 750));
  padding-left: calc(1 * (100vw / 750));
  font-family: "jaf-bernino-sans", sans-serif;
  font-weight: 400;
  font-size: calc(24 * (100vw / 750));
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

#UU240412popup .lpMainTTL > em::before,
#UU240412popup .lpMainTTL > em::after{
  content: '';
  height: calc(100% - 2px);
  width: 1px;
  background: #555555;
  position: absolute;
  top: 1px;
}

#UU240412popup .lpMainTTL > em::before{left: -2px;}
#UU240412popup .lpMainTTL > em::after{right: -2px;}

#UU240412popup .lpMainTTL > em > span{
  font-size: calc(31 * (100vw / 750));
  letter-spacing: 0.12em;
  font-style: normal;
  margin-bottom: calc(-3 * (100vw / 750));
  margin-left: calc(5 * (100vw / 750));
}

/*******************************
lpLede
*******************************/
#UU240412popup .lpLede{
  display: block;
  margin-bottom: calc(146 * (100vw / 750));
  font-size: calc(24 * (100vw / 750));
  font-weight: 500;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt';
}



/*******************************
creditLinks
*******************************/
#UU240412popup .creditLinks{
  display: block;
  padding-top: calc(46 * (100vw / 750));
  font-size: calc(20 * (100vw / 750));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt';
}

#UU240412popup .creditLinks span,
#UU240412popup .creditLinks a{
  display: inline-block;
  white-space: nowrap;
  color: #555555;
  text-decoration: none;
}

#UU240412popup .creditLinks span > em,
#UU240412popup .creditLinks a > em{
  font-size: normal;
  color: #C84B3C;
  font-style: normal;
}

#UU240412popup dl.creditLinks > dt{display: block;}

/*
#UU240412popup dl.creditLinks.inline > dt{ display: inline; margin-right: calc(-8 * (100vw / 750));}
#UU240412popup dl.creditLinks.inline > dd{display: inline;}
*/

#UU240412popup .text > p.creditCaution{
  font-size: calc(20 * (100vw / 750));
  padding-top: calc(10 * (100vw / 750));
  text-align: left;
}

/*******************************
lpTTL
*******************************/
#UU240412popup .lpTTL{
  display: block;
  font-family: "jaf-bernino-sans", sans-serif;
  font-weight: 400;
  font-size: calc(43 * (100vw / 750));
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
  color: #979797;
}


/*******************************
lpTTL
*******************************/
#UU240412popup .quotCatch{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(40 * (100vw / 750)) 0;
  margin: 0 auto;
  text-align: left;
  position: relative;
  margin-bottom: calc(90 * (100vw / 750));
}

#UU240412popup .quotCatch > span{
  display: block;
  width: 100%;
  font-size: calc(32 * (100vw / 750));
  letter-spacing: 0.14em;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: 'palt';
  text-align: left;
  color: #555555;
  white-space: nowrap;
}
#UU240412popup .quotCatch > span:nth-of-type(2){
  text-align: right;
}

#UU240412popup .quotCatch::before{
  content: '';
  display: block;
  width: calc(25 * (100vw / 750));
  height: calc(20 * (100vw / 750));
  background: url("../img/quotation_left.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: calc(-34 * (100vw / 750));
  top: calc(-6 * (100vw / 750));
}

#UU240412popup .quotCatch::after{
  content: '';
  display: block;
  width: calc(25 * (100vw / 750));
  height: calc(20 * (100vw / 750));
  background: url("../img/quotation_right.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: calc(-34 * (100vw / 750));
  bottom: 0;
}

/*******************************
question
*******************************/
#UU240412popup .question{
  display: block;
  margin-bottom: calc(14 * (100vw / 750));
  font-size: calc(24 * (100vw / 750));
  font-weight: 700;
  line-height: 2;
  text-align: left;
  letter-spacing: 0.065em;
  font-feature-settings: 'palt';
  color: #A0B1C0;
}

/*******************************
borderCatch
*******************************/
#UU240412popup .borderCatch{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 calc(20 * (100vw / 750));
  margin-bottom: calc(88 * (100vw / 750));
  width: 100%;
}

#UU240412popup .borderCatch::before,
#UU240412popup .borderCatch::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #555555;
  flex-shrink: 1;
  transform: scale(0,1);
  transition: transform 1.8s ease 0.5s; 
}

#UU240412popup .borderCatch::before{transform-origin: 100%;}
#UU240412popup .borderCatch::after{transform-origin: 0;}

#UU240412popup .view .borderCatch::before,
#UU240412popup .view .borderCatch::after{
  transform: scale(1,1);
}

#UU240412popup .borderCatch > span{
  display: block;
  font-family: "jaf-bernino-sans",sans-serif;
  font-weight: 400;
  font-size: calc(32 * (100vw / 750));
  letter-spacing: 0.145em;
  line-height: 1;
  white-space: nowrap;
}

/*******************************
figImgBox
*******************************/
#UU240412popup .figImgBox{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
}

#UU240412popup .figImgBox .imgOuter{
  display: block;
  width: 100%;
  margin: 0 auto;
  order: 1;
  margin-bottom: calc(68 * (100vw / 750));
}

#UU240412popup .figImgBox .text{
  display: block;
  width: 100.1%;
  order: 2;
}

#UU240412popup .figImgBox.imgLeft .imgOuter{order: 2; margin-bottom: 0;}
#UU240412popup .figImgBox.imgLeft .text{order: 1; margin-bottom: calc(66 * (100vw / 750));}


/*******************************
text
*******************************/
#UU240412popup  .text > p{
  display: block;
  text-align: justify;
  font-size: calc(24 * (100vw / 750));
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 2;
  font-feature-settings: 'palt';
}


/*******************************
sec02TTL
*******************************/
#UU240412popup .sec02TTL{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(30 * (100vw / 750)) 0;
  margin-bottom: calc(56 * (100vw / 750));
  font-weight: 500;
}

#UU240412popup .sec02TTL > span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  height: calc(46 * (100vw / 750));
  padding: calc(2 * (100vw / 750)) 0 0;
  background: #A0B1C0;
  font-size: calc(27 * (100vw / 750));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  font-feature-settings: 'palt';
}

#UU240412popup .sec02TTL > em{
  display: block;
  font-size: calc(32 * (100vw / 750));
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
  color: #555555;
  font-feature-settings: 'palt';
  font-style: normal;
}


/*******************************
sec03TTL
*******************************/
#UU240412popup .sec03TTL{
  display: block;
  text-align: center;
  font-size: calc(32 * (100vw / 750));
  line-height: 1.9375;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #555555;
  font-feature-settings: 'palt';
  margin-bottom: calc(42 * (100vw / 750));
}


/*******************************
#sec01
*******************************/
#sec01{
  display: block;
  width: calc(690 * (100vw / 750));
  margin: 0 auto calc(140 * (100vw / 750));
  padding: calc(130 * (100vw / 750)) 0 calc(114 * (100vw / 750));
  background: #EFEFEF;
  position: relative;
}

#sec01 .ttlBlock .lpTTL{
  position: absolute;
  top: calc(-132 * (100vw / 750));
  left: 50%;
  transform: translate(-50%,-50%);
}

#sec01 .sec01inner{
  width: calc(620 * (100vw / 750));
  margin: 0 auto;
}

#sec01 .sec01inner:nth-of-type(1){
  margin-bottom: calc(70 * (100vw / 750));
}

#sec01 .ttlBlock .quotCatch{
  width: calc(480 * (100vw / 750));
  padding-left: calc(6 * (100vw / 750));
  margin-bottom: calc(86 * (100vw / 750));
}
#sec01 .sec01inner .quotCatch{
  width: calc(522*(100vw / 750));
  padding-left: calc(4*(100vw / 750));
  margin-bottom: calc(86*(100vw / 750));
}


#UU240412popup .figImgBox.sec0101{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 0;
}

#UU240412popup .figImgBox.sec0101 .question{order: 2;}
#UU240412popup .figImgBox.sec0101 .imgOuter{order: 1;}
#UU240412popup .figImgBox.sec0101 .text{order: 3;}


#UU240412popup .figImgBox.sec0104{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 0;
}

#UU240412popup .figImgBox.sec0104 .question{order: 2;}
#UU240412popup .figImgBox.sec0104 .imgOuter{order: 1;}
#UU240412popup .figImgBox.sec0104 .text{order: 3;}


#sec01 .sec01figure{
  display: block;
  width: 100%;
  margin: calc(66 * (100vw / 750)) auto calc(130 * (100vw / 750));
}

#UU240412popup .figImgBox.sec0105{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding-top: calc(66 * (100vw / 750));
  margin-bottom: 0;
}

#UU240412popup .figImgBox.sec0105 .imgOuter{
  order: 1;
  width: calc(520 * (100vw / 750));
  margin-bottom: calc(60 * (100vw / 750));
}
#UU240412popup .figImgBox.sec0105 .text{order: 2; margin-bottom: 0;}





/*******************************
#sec02
*******************************/
#sec02{
  display: block;
  width: calc(660 * (100vw / 750));
  margin: 0 auto calc(140 * (100vw / 750));
  padding: 0 0 0;
  position: relative;
}

#sec02 .ttlBlock .lpTTL{
  margin-bottom: calc(80 * (100vw / 750));
}


#sec02 .sec02Inner + .sec02Inner{padding-top: calc(140 * (100vw / 750));}

#sec02 .sec02figure{
  display: block;
  width: 100%;
  margin: 0 auto calc(70 * (100vw / 750));
}


#UU240412popup .figImgBox.sec0202 .imgOuter{order: 2;}
#UU240412popup .figImgBox.sec0202 .text{order: 1; width: 99.2%;}


#UU240412popup .figImgBox.sec0202 > .imgOuter{
  width: calc(520 * (100vw / 750));
  padding-top: calc(68 * (100vw / 750));
  margin-bottom: 0;
}


#sec02 .sec02Inner:nth-of-type(2) .sec02TTL > span{
  width: calc(396 * (100vw / 750));
}

/*******************************
#sec03
*******************************/
#sec03{
  display: block;
  width: calc(660 * (100vw / 750));
  margin: 0 auto calc(146 * (100vw / 750));
  padding: 0 0 0;
  position: relative;
}

#UU240412popup #sec03 .borderCatch{margin-bottom: calc(72 * (100vw / 750));}

#sec03 .imgOuter{
  display: block;
  width: 100%;
  margin: 0 auto calc(60 * (100vw / 750));
}

#sec03 .sec03Inner + .sec03Inner{
  padding-top: calc(134 * (100vw / 750));
}

#sec03 .sec03Inner .text{
  width: 100%;
}

/*******************************
.presentSection
*******************************/
#UU240412popup .presentSection{
  display: block;
  margin: 0 auto calc(178 * (100vw / 750));
}

#UU240412popup .presentTTL{
  display: block;
  margin-bottom: calc(40 * (100vw / 750));
  text-align: center;
} 

#UU240412popup .presentTTL > em{
  display: inline-block;
  margin-bottom: calc(26 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
  line-height: 1;
  letter-spacing: 0.11em;
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: 'palt';
  position: relative;
}

#UU240412popup .presentTTL > em::before,
#UU240412popup .presentTTL > em::after{
  content: '';
  display: block;
  width: calc(34.641 * (100vw / 750));
  height: 1px;
  background: #555555;
  position: absolute;
  bottom: calc(13 * (100vw / 750));
}

#UU240412popup .presentTTL > em::before{transform: rotate(60deg); left: calc(-34 * (100vw / 750));}
#UU240412popup .presentTTL > em::after{transform: rotate(-60deg); right: calc(-34 * (100vw / 750));}

#UU240412popup .presentTTL > span{
  display: block;
  font-size: calc(32 * (100vw / 750));
  line-height: 1.9375;
  text-align: center;
  letter-spacing: 0.13em;
  font-weight: 500;
  font-feature-settings: 'palt';
}

#UU240412popup .presentImg{
  display: block;
  width: calc(330 * (100vw / 750));
  margin: 0 auto;
  background: #FFFFFF;
}


/*******************************
.presentSection
*******************************/
#UU240412popup .profileSection{
  display: block;
  width: calc(520.001 * (100vw / 750));
  margin: 0 auto;
}

#UU240412popup .profileSection .lpTTL{
  margin-bottom:  calc(62 * (100vw / 750));
}

#UU240412popup .profileBox{
  display: block;
  width: 100%;
}

#UU240412popup .profileBox .profile + .profile{
  margin-top: calc(70 * (100vw / 750));
}

#UU240412popup .profileBox .profile > figure{
  display: block;
  width: calc(320 * (100vw / 750));
  margin: 0 auto calc(45 * (100vw / 750));
}
#UU240412popup .profileBox .profile > figure img{display: block; width: 100%; height: auto;}

#UU240412popup .profileBox .profile > dl{display: block;}

#UU240412popup .profileBox .profile > dl > dt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(32 * (100vw / 750));
  text-align: center;
  letter-spacing: 0.045em;
  line-height: 1;
  font-feature-settings: 'palt';
  width: 100%;
}

#UU240412popup .profileBox .profile > dl > dt  > span{
  display: inline-block;
  padding-right: 0.57em;
  font-size: calc(24 * (100vw / 750));
}

#UU240412popup .profileBox .profile > dl > dd{
  display: block;
  width: 100%;
  margin-top: calc(36 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.05em;
  font-feature-settings: 'palt';
}



/*******************************
.youtubeSection
*******************************/
#UU240412popup .youtubeSection{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: calc(166 * (100vw / 750));
}

#UU240412popup .youtubeSection .lpTTL{
  margin-bottom: calc(80 * (100vw / 750));
}

#UU240412popup .yutuobeOuter{
  display: block;
  width: 100%;
}
#UU240412popup .yutuobeOuter .inner{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

#UU240412popup .yutuobeOuter .inner > iframe{
  width: 100%;
  height: 100%;
}

/*******************************
allItemBtn
*******************************/
#UU240412popup .allItemBtn{
  display: block;
  width: calc(540 * (100vw / 750));
  height: calc(80 * (100vw / 750));
  margin: calc(120 * (100vw / 750)) auto 0;
  background-color: #F1F1F1;
}

#UU240412popup .allItemBtn > a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 calc(14*(100vw / 750));
  width: 100%;
  height: 100%;
  font-size: calc(22*(100vw / 750));
  padding: calc(8*(100vw / 750)) calc(4*(100vw / 750)) 0 0;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #555555;
  text-decoration: none;
  font-feature-settings: 'palt';
}

#UU240412popup .allItemBtn > a::after{
  content: '';
  display: block;
  width: calc(9 * (100vw / 750));
  height: calc(15 * (100vw / 750));
  background: url("../img/icon_btn_arrow.svg") center center no-repeat;
  background-size: 100% auto;
}


/*******************************
figSlider
*******************************/
#UU240412popup .figSlider{
	overflow: hidden;
	position: relative;
}

#UU240412popup .figSlider .container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

#UU240412popup .figSlider .sliderWrapper{}

#UU240412popup .figSlider .slider{
  display: block;
  width: 100%;
}

#UU240412popup .figSlider .slider a{
  display: block;
  width: 100%;
  height: auto;
}

#UU240412popup .figSlider .slider a > img{
  display: block;
  width: 100%;
  height: auto;
}

#UU240412popup .figSlider .slider.swiper-slide-active{
  pointer-events: auto;
}

#UU240412popup .figSlider ul.pager{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: calc(28 * (100vw / 750));
  gap: 0 calc(20 * (100vw / 750));
}

#UU240412popup #sec02 .figSlider ul.pager{justify-content: flex-end;}


#UU240412popup .figSlider ul.pager > li{
  display: block;
  width: calc(12 * (100vw / 750));
  height: calc(12 * (100vw / 750));
  border-radius: 50%;
  margin: 0;
  background: #C1C0C0;
  transition: background 0.3s ease;
  cursor: pointer;
  opacity: 1;
}

#UU240412popup .figSlider ul.pager > li.swiper-pagination-bullet-active{
  background: #656565;
  pointer-events: none;
}

/*******************************
overRide
*******************************/
#UU240412popup .pcView{display: none;}