@charset "UTF-8";
/* CSS Document */
:root {
	--ww:375;
  --ww_px:375px;
  --in_w:1296;
  --in_w_px:1296px;
}

.zoomRotAni img{
  opacity: 0;
  transition:
    transform 0.35s ease,
    opacity 0.05s ease;
}
.zoomRotAni.karuta{
	aspect-ratio: 580/812;
}
.zoomRotAni_deg-12 img,
.sp_zoomRotAni_deg-12 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg-12 img,
.zoomRotKey.show.zoomRotAni_deg-12 img,
.zoomRotKey.show .sp_zoomRotAni_deg-12 img,
.zoomRotKey.show.sp_zoomRotAni_deg-12 img{
  opacity: 1;
	transform: scale(1.0) rotate(-12deg);
}
.zoomRotAni_deg12 img,
.sp_zoomRotAni_deg12 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg12 img,
.zoomRotKey.show.zoomRotAni_deg12 img,
.zoomRotKey.show .sp_zoomRotAni_deg12 img,
.zoomRotKey.show.sp_zoomRotAni_deg12 img{
  opacity: 1;
	transform: scale(1.0) rotate(12deg);
}
.zoomRotAni_deg-6 img,
.sp_zoomRotAni_deg-6 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg-6 img,
.zoomRotKey.show.zoomRotAni_deg-6 img,
.zoomRotKey.show .sp_zoomRotAni_deg-6 img,
.zoomRotKey.show.sp_zoomRotAni_deg-6 img{
  opacity: 1;
	transform: scale(1.0) rotate(-6deg);
}
.zoomRotAni_deg6 img,
.sp_zoomRotAni_deg6 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg6 img,
.zoomRotKey.show.zoomRotAni_deg6 img,
.zoomRotKey.show .sp_zoomRotAni_deg6 img,
.zoomRotKey.show.sp_zoomRotAni_deg6 img{
  opacity: 1;
	transform: scale(1.0) rotate(6deg);
}

.zoomRotAni_deg0 img,
.sp_zoomRotAni_deg0 img{ transform: scale(3) rotate(-40deg);}
.zoomRotKey.show .zoomRotAni_deg0 img,
.zoomRotKey.show.zoomRotAni_deg0 img,
.zoomRotKey.show .sp_zoomRotAni_deg0 img,
.zoomRotKey.show.sp_zoomRotAni_deg0 img{
  opacity: 1;
	transform: scale(1.0) rotate(0deg);
}
.kome{
  display: inline-block;
  font-size: 50%;
  vertical-align: top;
  margin-top: 0.35em;
}

#container{padding-top: 60px;}
/*=============================
  main
=============================*/
#main {
  height: calc(100svh - 60px);
  /* min-height: calc((1280/800)*100vw); */
  min-height: 125vw;
  margin-bottom: 25px;
}
#main .copyArea{
  background: #000;
  height: calc((265/712)*100%);
}
#main .copyArea h1{
  aspect-ratio: 286/203;
  width: calc((286/375)*100%);
  max-height: 78%;
  max-width: 95%;
}

#main .picArea {
  height: calc((447/712)*100%);
  background: url(../img/sp_main_bg.webp) no-repeat center center/cover;
  position: relative;
}
#main .picArea::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(36, 86, 165,0.6);
  position: absolute;
  top:0;
  left:0;
  mix-blend-mode:screen;
}
#main .picArea .inner{
  position: relative;
  height: 100%;
}
/* #main .picArea .prodArea li{
  width: calc((385/(var(--ww) - 440 - 50))*100%);
}
#main .picArea .prodArea li.prod01{
  margin-right: auto;
}

#main .picArea .prodArea li .pic{
  aspect-ratio: 160 / 370;
  width: calc((160/385)*100%);
}
#main .picArea .prodArea li.prod01 .pic{
  margin-left: calc((35/385)*100%);
}
#main .picArea .prodArea li.prod02 .pic{
  margin-left: auto;
  margin-right: calc((35/385)*100%);
}
#main .picArea .prodArea li .txt{
  text-align: center;
  font-size: min(calc((20/1366)*100vw),0.2rem);
  letter-spacing: 0.1em;
  padding: 0.75em 1em;
  margin-top: 25px;
  position: relative;
}
#main .picArea .prodArea li .txt span{
  position: relative;
  z-index: 1;
}
#main .picArea .prodArea li .txt::before{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
#main .picArea .prodArea li.prod01 .txt::before{
  background: var(--karuta-blue);
  transform: skewX(-10deg);
}
#main .picArea .prodArea li.prod02 .txt::before{
  background: var(--karuta-darkblue);
  transform: skewX(-10deg);
}


#main .picArea .prodArea li.prod02 .txt{color: #FFF;} */

#main .picArea .karutaArea{
  position: absolute;
  top:50%;
  left:50%;
  aspect-ratio: 285/201;
  width: calc((285/var(--ww))*100%);
  height: auto;
  max-height: 50%;
  transform: translate(-50%,-50%);
}
#main .picArea .karutaArea li{
  aspect-ratio: 143/201;
  width: 50%;
  max-height: 100%;
}
#main .picArea .karutaArea li:nth-child(1){transform: translate(15%,25%); position: relative;z-index: 1;}
#main .picArea .karutaArea li:nth-child(2){transform: translate(-15%,-25%);}
#main .picArea .karutaArea li img{
  -webkit-filter: drop-shadow(5px 5px 0px var(--ULOS-BLUE));
  filter: drop-shadow(5px 5px 0px var(--ULOS-BLUE));
}
#main .picArea .karutaArea li:nth-child(1) img{transition-delay: 0.25s;}
/*=============================
  info
=============================*/
#info{
  padding: 0 30px;
  margin-bottom: 40px;
}
#info > .inner{
}

#info .pic{
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.165, 1.615); /* easeOutBack */
}
#info .pic.show{transform: scale(1);}

#info .txt01{
  text-align: center;
  font-size: 0.2rem;
  line-height: calc(38/20);
  letter-spacing: 0.1em;
}
#info .txt01 span{
  color: var(--karuta-blue);
	transition: background-position 0.5s ease;
  background-image: linear-gradient(90deg, rgba(255, 245, 0, 1) 0%,rgba(255, 245, 0, 1) 50%,rgba(255, 245, 0, 0) 50%,rgba(255, 245, 0, 0) 100%);
	background-size: 200%;
	background-position: 100% 0%;
	background-repeat: no-repeat;
}
#info .txt01.show span{background-position: 0% 0%;}
#info .btList {
  margin-top: 50px;
}
#info .btList li + li{margin-top: 15px;}
#info .btList li a{
  color: #FFF;
  display: block;
  text-align: center;
  font-size: 0.2rem;
  letter-spacing: 0.1em;
  line-height: 1.25;
  padding: 1em 30px;
  position: relative;
}
#info .btList li.bt01 a{
  background: var(--karuta-blue);
}
#info .btList li.bt02 a{
  background: var(--karuta-darkblue);
}
#info .btList li a .icon{
  aspect-ratio: 21/17;
  width: 18px;
  position: absolute;
  top:calc(50% - 6px);
  right:25px;
  background: url(../img/icon_arrow01.svg) no-repeat center center/contain;
}


/*=============================
  bloc
=============================*/
section.bloc{
  color: #FFF;
}
section.bloc > .outer{
  position: relative;
  padding: 45px 15px calc(70px + (55/375)*100vw);
  isolation: isolate;
	border-radius: 35px;
}
#prod01 > .outer{background: var(--karuta-blue);}
#prod02 > .outer{background: var(--karuta-darkblue);}
#prod03 > .outer{
  background: var(--karuta-green);
  padding: 45px 15px calc(35px + (35/375)*100vw);
}
section.bloc > .outer > .inner{
}

section.bloc h2{
  text-align: center;
  font-size: 0.21rem;
  letter-spacing: 0.1em;
  line-height: calc(28/21);
}

section.bloc .karutaArea{
  margin-top: 45px;
  padding: 0 15px;
}
#prod03 .karutaArea{
  max-width: 280px;
  width: 100%;
  margin-left: auto; 
  margin-right: auto;
}
section.bloc .karutaArea li{width: calc(100%/3);}
section.bloc .karutaArea li:nth-child(1) {transform: translateY(30%);}
section.bloc .karutaArea li:nth-child(2) {transform: translateY(0%);}
section.bloc .karutaArea li:nth-child(3) {transform: translateY(60%);}
#prod03 .karutaArea li{width: calc((140/280)*100%);}
#prod03 .karutaArea li:nth-child(1){position: relative;z-index: 1;transform: translate(7%,0%);}
#prod03 .karutaArea li:nth-child(2){transform: translate(-7%,0%);}

section.bloc .karutaArea li:nth-child(1) img{transition-delay: 0s;}
section.bloc .karutaArea li:nth-child(2) img{transition-delay: 0.15s;}
section.bloc .karutaArea li:nth-child(3) img{transition-delay: 0.3s;}
section.bloc .karutaArea p.karuta img{
  -webkit-filter: drop-shadow(20px 20px 6px rgba(0,0,0,0.15));
  filter: drop-shadow(20px 20px 6px rgba(0,0,0,0.15));
}
section.bloc .karutaArea p.karuta{
  max-width: 265px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35vw;
}

section.bloc .prodArea{
  margin-top: 55px;
}
section.bloc .prodArea .txtArea {
}

section.bloc .prodArea .txtArea h3 {
  font-size: 0.26rem;
  line-height: calc(38/26);
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-align: center;
}
section.bloc .prodArea .txtArea .ph{margin-top: 20px;}
section.bloc .prodArea .txtArea .name {
  font-size: 0.27rem;
  line-height: calc(40/27);
  letter-spacing: 0.1em;
  margin-top: 1em;
}
section.bloc .prodArea .txtArea h3,
section.bloc .prodArea .txtArea .ph,
section.bloc .prodArea .txtArea .name{padding: 0 15px;}
section.bloc .prodArea .txtArea .ph{
  width: 100%;
  margin-top: 40px;
}
#prod03 .txtArea .ph {
  width: 206px;
  margin-left: auto;
  margin-right: auto;
}


section.bloc .prodArea .txtArea .kounouList {
  margin-top: 35px;
}
section.bloc .prodArea .txtArea .kounouList li{
  font-size: 0.17rem;
  line-height: calc(23/17);
  text-align: center;
  padding: 0.5em 1em;
  background: #FFF;
}
section.bloc .prodArea .txtArea .kounouList li + li{margin-top: 10px;}
#prod01 .prodArea .txtArea .kounouList li{color: var(--karuta-blue);}
#prod02 .prodArea .txtArea .kounouList li{color: var(--karuta-darkblue);}
#prod03 .prodArea .txtArea .kounouList li{color: var(--karuta-green);}

section.bloc .prodArea .txtArea .emTxtList{margin-top: 1em;}
section.bloc .prodArea .txtArea .emTxtList li{
  font-size: 0.1rem;
  line-height: calc(13/10);
}
section.bloc .prodArea .txtArea .emTxtList li + li{margin-top: 0.25em;}


section.bloc .prodInfo{
  background: #FFF;
  isolation: isolate;
	border-radius: 25px;
  padding: 25px 0 45px;
  margin-top: 55px;
}
section.bloc .prodInfo > .inner{
}
section.bloc .prodInfo .titArea h4{
  text-align: center;
  font-size: 0.2rem;
}
section.bloc .prodInfo .titArea h4 .cTxt{
  transition: background-position 0.5s ease;
  background-image: linear-gradient(90deg, rgba(255, 245, 0, 1) 0%,rgba(255, 245, 0, 1) 50%,rgba(255, 245, 0, 0) 50%,rgba(255, 245, 0, 0) 100%);
	background-size: 200%;
	background-position: 100% 0%;
	background-repeat: no-repeat;
}
section.bloc .prodInfo .titArea h4.show .cTxt{background-position: 0% 0%;}
section.bloc .prodInfo .titArea h4 .fs{font-size: calc((28/36)*100%);}
#prod01 .prodInfo .titArea h4{color: var(--karuta-blue);}
#prod02 .prodInfo .titArea h4{color: var(--karuta-darkblue);}
#prod03 .prodInfo .titArea h4{color: var(--karuta-green);}
#prod02 .prodInfo .titArea h4 img{
  display: inline-block;
  width: 73px;
  vertical-align: bottom;
  margin-right: 10px;
}

section.bloc .prodInfo .titArea h3{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.38rem;
  margin-top: 0.25em;
  position: relative;
}
section.bloc .prodInfo .titArea h3::before{
  content: '';
  position: absolute;
  top:calc(100% + 10px);
  left:0;
  width: 100%;
  height: 12px;
}
#prod01 .prodInfo .titArea h3::before{background: url(../img/prod01_line.svg) no-repeat top left/auto 100%;}
#prod02 .prodInfo .titArea h3::before{background: url(../img/prod02_line.svg) no-repeat top left/auto 100%;}

section.bloc .prodInfo .titArea h3 .fs{font-size: calc((38/65)*100%);}
#prod01 .prodInfo .titArea h3{color: var(--karuta-blue);}
#prod02 .prodInfo .titArea h3{color: var(--karuta-darkblue);}
#prod03 .prodInfo .titArea h3{color: var(--karuta-green);}

#prod01 .prodInfo .titArea h3 img{
  display: inline-block;
  width: 85px;
  vertical-align: bottom;
  margin-right: 10px;
}


section.bloc .prodInfo .infoList{
  padding: 0 25px;
  margin-top: 35px;
  color: #000;
}
section.bloc .prodInfo .infoList li + li{margin-top: 25px;}
section.bloc .prodInfo .infoList li h5{
  font-size: 0.15rem;
  line-height: calc(23/15);
}
section.bloc .prodInfo .infoList li .txt{
  font-size: 0.12rem;
  line-height: calc(17/12);
  margin-top: 0.75em;
}
section.bloc .prodInfo .infoList li .pic{
  aspect-ratio: 378/236;
  width: 100%;
  margin-top: 20px;
}
section.bloc .prodInfo .infoList li .pic span{
  display: block;
  font-size: 0.1rem;
  line-height: calc(16/10);
  margin-top: 1em;
}


section.bloc .prodInfo .box{
  color: #000;
  background: #B9DCF5;
  isolation: isolate;
	border-radius: 14px;
  margin:55px 15px 0;
  padding: 60px 15px 25px;
  position: relative;
}
section.bloc .prodInfo .box h4{
  text-align: center;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  transform: translateY(-30%);
}
section.bloc .prodInfo .box h4 span{
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: var(--karuta-darkblue);
  color: #FFF;
  padding: 0.25em 2em;
  font-size: 0.15rem;
  line-height: calc(23/15);
  isolation: isolate;
	border-radius: 15px;
}

section.bloc .prodInfo .box .list li{}
section.bloc .prodInfo .box .list li+li{margin-top: 35px;}
section.bloc .prodInfo .box .list li h5{
  font-size: 0.14rem;
  line-height: calc(20/14);
}
section.bloc .prodInfo .box .list li .txt{
  font-size: 0.12rem;
  line-height: calc(17/12);
  margin-top: 0.75em;
}
section.bloc .prodInfo .box .list li .pic{
  aspect-ratio: 300/188;
  width: 100%;
  margin-top: 35px;
}
section.bloc .prodInfo .box .list li .pic span{
  display: block;
  font-size: 0.1rem;
  line-height: calc(16/10);
  margin-top: 1em;
}


section.bloc a.bt_more {
  display: block;
  color: #FFF;
  border: 4px solid #FFF;
  isolation: isolate;
	border-radius: 25px;
  padding: 25px 0px calc((95/375)*100vw) 25px;
  margin-top: 60px;
  position: relative;
}
#prod03 a.bt_more {
  margin-top: 30px;
  padding-bottom: 25px;
}
section.bloc a.bt_more .name{
  font-size: 0.26rem;
  line-height: calc(38/24);
  letter-spacing: 0.1em;
}
section.bloc a.bt_more .txt{
  width: fit-content;
  font-size: 0.18rem;
  line-height: calc(33/18);
  letter-spacing: 0.1em;
  position: relative;
  padding-right: 30px;
  margin-top: 5px;
}
section.bloc a.bt_more .txt .icon{
  position: absolute;
  top:calc(50% - 9px);
  right:0;
  display: block;
  aspect-ratio: 19/23;
  width: 17px;
  background: url(../img/icon_arrow01.svg) no-repeat center center/contain;
  transform: rotate(-90deg);
}
section.bloc a.bt_more .ph{
  aspect-ratio: 223/146;
  width: calc((223/375)*100vw);
  position: absolute;
  top:135px;
  right:20px;
}

#prod03 a.bt_more .ph{
  aspect-ratio: 100/161;
  width: calc((100/375)*100vw);
  position: absolute;
  top:25px;
  right:15px;
}

#prod03 .txt01{
  margin-top: 30px;
  font-size: 0.22rem;
  line-height: calc(29/22);
  letter-spacing: 0.1em;
  padding-left: 15px;
}



/*brand
=============================*/
#brand {
  padding: 0 10px;
  margin-top: 80px;
  margin-bottom: 110px;
}
#brand > a{
  position: relative;
  color: var(--karuta-darkgreen);
  background: #FFF;
  aspect-ratio: 345/210;
  width: calc((345/390)*100vw);
  padding-left: 25px;
}
#brand h2{
  margin-top: -10px;
}
#brand h2 img{
  width: 125px;
  height: auto;
}
#brand h2 .txt{
  display: block;
  font-size: 0.19rem;
  line-height: calc(46/31);
  margin-top: 0.5em;
}
#brand .pic{
  aspect-ratio: 582/327;
  width: calc((325/390)*100vw);
  overflow: hidden;
  position: absolute;
  top:75px;
  right:calc((-30/390)*100vw);
}