@charset "UTF-8";
/* CSS Document */
:root {
	--ww:1366;
  --ww_px:1366px;
  --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,
.pc_zoomRotAni_deg-12 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg-12 img,
.zoomRotKey.show.zoomRotAni_deg-12 img,
.zoomRotKey.show .pc_zoomRotAni_deg-12 img,
.zoomRotKey.show.pc_zoomRotAni_deg-12 img{
  opacity: 1;
	transform: scale(1.0) rotate(-12deg);
}
.zoomRotAni_deg12 img,
.pc_zoomRotAni_deg12 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg12 img,
.zoomRotKey.show.zoomRotAni_deg12 img,
.zoomRotKey.show .pc_zoomRotAni_deg12 img,
.zoomRotKey.show.pc_zoomRotAni_deg12 img{
  opacity: 1;
	transform: scale(1.0) rotate(12deg);
}
.zoomRotAni_deg-6 img,
.pc_zoomRotAni_deg-6 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg-6 img,
.zoomRotKey.show.zoomRotAni_deg-6 img,
.zoomRotKey.show .pc_zoomRotAni_deg-6 img,
.zoomRotKey.show.pc_zoomRotAni_deg-6 img{
  opacity: 1;
	transform: scale(1.0) rotate(-6deg);
}
.zoomRotAni_deg6 img,
.pc_zoomRotAni_deg6 img{ transform: scale(3) rotate(-52deg);}
.zoomRotKey.show .zoomRotAni_deg6 img,
.zoomRotKey.show.zoomRotAni_deg6 img,
.zoomRotKey.show .pc_zoomRotAni_deg6 img,
.zoomRotKey.show.pc_zoomRotAni_deg6 img{
  opacity: 1;
	transform: scale(1.0) rotate(6deg);
}

.zoomRotAni_deg0 img,
.pc_zoomRotAni_deg0 img{ transform: scale(3) rotate(-40deg);}
.zoomRotKey.show .zoomRotAni_deg0 img,
.zoomRotKey.show.zoomRotAni_deg0 img,
.zoomRotKey.show .pc_zoomRotAni_deg0 img,
.zoomRotKey.show.pc_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: 640px;
  margin-bottom: 75px;
}
#main .copyArea{
  background: #000;
  width: calc((440/var(--ww))*100%);
}
#main .copyArea h1{
  width: calc((350/440)*100%);
}

#main .picArea {
  width: calc(((var(--ww) - 440)/var(--ww))*100%);
  padding: 5% calc((25/(var(--ww) - 440))*100%);
  background: url(../img/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;
  max-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:0;
  left:calc(50% - (500/2)/(var(--ww) - 440)*100%);
  width: calc((500/(var(--ww) - 440))*100%);
}
#main .picArea .karutaArea li{
  width: 50%;
}
#main .picArea .karutaArea li:nth-child(1){transform: translateX(10%);position: relative;z-index: 1;}
#main .picArea .karutaArea li:nth-child(2){transform: translateX(-10%);}
#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 40px;
  margin-bottom: 85px;
}
#info > .inner{
  max-width: var(--in_w_px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-top: 85px;
}

#info .pic{
  position: absolute;
  top:0;
  left:calc((45/var(--in_w))*100%);
  aspect-ratio: 200/118;
  width: 200px;
  z-index: 0;
  transform: scale(0);
	transition: transform 0.35s 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.25rem;
  line-height: calc(60/25);
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
#info .txt01 span{
  padding: 0.25em 0;
  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 {
  max-width: 850px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 65px;
  gap: 35px;
}
#info .btList li.bt01{
  margin-right: auto;
}
#info .btList li a{
  color: #FFF;
  display: block;
  text-align: center;
  font-size: 0.22rem;
  letter-spacing: 0.1em;
  line-height: 1.25;
  padding: 1em 70px;
  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: 21px;
  position: absolute;
  top:calc(50% - 8.5px);
  right:42px;
  background: url(../img/icon_arrow01.svg) no-repeat center center/contain;
}


/*=============================
  bloc
=============================*/
section.bloc{
  padding: 0 40px;
  color: #FFF;
}
section.bloc > .outer{
  max-width: var(--in_w_px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 90px 35px;
  isolation: isolate;
	border-radius: 30px;
}
#prod01 > .outer{background: var(--karuta-blue);}
#prod02 > .outer{background: var(--karuta-darkblue);}
#prod03 > .outer{background: var(--karuta-green);}
section.bloc > .outer > .inner{
  max-width: 1025px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

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

section.bloc .karutaArea{
  margin-top: 100px;
  width: 100%;
  max-width: 745px;
  margin-left: auto;
  margin-right: auto;
  column-gap: 85px;
}
#prod03 .karutaArea{
  max-width: 580px;
  column-gap: 65px;
}
section.bloc .karutaArea li{width: calc((190/745)*100%);}
#prod03 .karutaArea li{width: calc((260/580)*100%);}
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: 350px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 85px;
}

section.bloc .prodArea{
  margin-top: 80px;
  gap: 50px;
}
#prod03 .prodArea{margin-top: 120px;}
section.bloc .prodArea .txtArea {
  width: fit-content;
  padding-left: 25px;
}

section.bloc .prodArea .txtArea h3 {
  font-size: 0.28rem;
  line-height: calc(41/28);
  letter-spacing: 0.1em;
  text-decoration: underline;
}
section.bloc .prodArea .txtArea .name {
  font-size: 0.34rem;
  line-height: calc(51/34);
  letter-spacing: 0.1em;
  margin-top: 1em;
}
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 2em;
  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 .prodArea .phArea {
  width: min(100%,495px);
  margin-left: auto;
}
#prod03 .prodArea .phArea {width: min(100%,550px);}
#prod03 .prodArea .phArea .ph{
  aspect-ratio: 268/433;
  width: calc((268/550)*100%);
  margin-left: auto;
  margin-right: auto;
}


section.bloc .prodInfo{
  background: #FFF;
  isolation: isolate;
	border-radius: 25px;
  padding: 40px 50px 40px;
  margin-top: 60px;
}
section.bloc .prodInfo > .inner{
  max-width: 812px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
section.bloc .prodInfo .titArea h4{
  text-align: center;
  font-size: 0.36rem;
}
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: 92px;
  vertical-align: bottom;
  margin-right: 15px;
}

section.bloc .prodInfo .titArea h3{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.65rem;
  margin-top: 0.25em;
  position: relative;
}
section.bloc .prodInfo .titArea h3::before{
  content: '';
  position: absolute;
  top:calc(100% + 10px);
  left:-15px;
  width: calc(100% + 30px);
  height: 20px;
}
#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: 135px;
  vertical-align: bottom;
  margin-right: 15px;
}


section.bloc .prodInfo .infoList{
  margin-top: 55px;
  color: #000;
}
section.bloc .prodInfo .infoList li{width: calc((378/812)*100%);}
section.bloc .prodInfo .infoList li:nth-child(even){margin-left: auto;}
section.bloc .prodInfo .infoList li h5{
  font-size: 0.16rem;
  line-height: calc(25/16);
}
section.bloc .prodInfo .infoList li .txt{
  font-size: 0.13rem;
  line-height: calc(18/13);
  margin-top: 0.75em;
}
section.bloc .prodInfo .infoList li .pic{
  aspect-ratio: 378/236;
  width: 100%;
  margin-top: 35px;
}
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{
  margin-top: 75px;
  color: #000;
  width: 100%;
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
  background: #B9DCF5;
  isolation: isolate;
	border-radius: 40px;
  padding: 40px calc((80/925)*100%);
  position: relative;
}
section.bloc .prodInfo .box h4{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  transform: translateY(-50%);
}
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);
}

section.bloc .prodInfo .box .list li{width: calc((315/730)*100%);}
section.bloc .prodInfo .box .list li:nth-child(even){margin-left: auto;}
section.bloc .prodInfo .box .list li h5{
  font-size: 0.16rem;
  line-height: calc(25/16);
}
section.bloc .prodInfo .box .list li .txt{
  font-size: 0.13rem;
  line-height: calc(18/13);
  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 {
  color: #FFF;
  border: 3px solid #FFF;
  isolation: isolate;
	border-radius: 25px;
  padding: calc((20/1165)*100%) 30px calc((20/1165)*100%) 50px;
  margin-top: 95px;
  position: relative;
}
#prod03 a.bt_more {
  margin-top: 120px;
  padding: calc((30/1165)*100%) 30px calc((30/1165)*100%) 50px;
}
section.bloc a.bt_more .name{
  order: 1;
  width: 300px;
  font-size: min(calc((25/1165)*100vw),0.25rem);
  line-height: calc(41/23);
  letter-spacing: 0.1em;
}
section.bloc a.bt_more .txt{
  order: 3;
  margin-left: auto;
  width: 260px;
  font-size: min(calc((23/1165)*100vw),0.23rem);
  line-height: calc(35/21);
  letter-spacing: 0.1em;
  text-align: right;
  padding-right: 50px;
  position: relative;
}
section.bloc a.bt_more .txt .icon{
  position: absolute;
  top:calc(50% - 11.5px);
  right:0;
  display: block;
  aspect-ratio: 19/23;
  width: calc((19/200)*100%);
  background: url(../img/icon_arrow01.svg) no-repeat center center/contain;
  transform: rotate(-90deg);
}
section.bloc a.bt_more .ph{
  order: 2;
  width: calc((305/975)*100%);
  margin-right: auto;
  margin-left: auto;
  margin-top: -8%;
}

#prod03 a.bt_more .ph{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: calc((145/1025)*100%);
  margin-top: 0;
}

#prod03 .txt01{
  text-align: center;
  margin-top: 80px;
  font-size: 0.28rem;
}



/*brand
=============================*/
#brand {
  padding: 0 40px;
  margin-top: 100px;
  margin-bottom: 170px;
}
#brand > a{
  max-width: 1064px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  color: var(--karuta-darkgreen);
}
#brand h2{
  aspect-ratio: 766/316;
  width: calc((766/1064)*100%);
  padding: 40px 0px 0px 35px;
  background: #FFF;
  
}
#brand h2 img{
  aspect-ratio: 164/38;
  width: calc((164/731)*100%);
}
#brand h2 .txt{
  display: block;
  font-size: min(calc((31/1144)*100vw),0.31rem);
  line-height: calc(46/31);
  margin-top: 0.5em;
}
#brand .pic{
  aspect-ratio: 582/327;
  width: calc((582/1064)*100%);
  margin-top: calc((85/1064)*100%);
  margin-left: auto;
  overflow: hidden;
}