@charset "UTF-8";

/* reset */
*,*::before,*::after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
img {
  width:100%;
  vertical-align:bottom;
}
a {
  display:block;
  color:inherit;
  text-decoration:none;
}
ul,dl {
  list-style:none;
}

/* general */
:root {
  font-size:62.5%;
}
html {
  scroll-behavior:smooth;
}
body {
  font-size:100%;
  font-family:'Noto Sans JP',sans-serif;;
  font-weight:500;
  line-height:1.7;
  text-align:center;
  color:#000;
  background:#ffb3bd;
}
main,header {
  background:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.10);
}
.fixedWidth {
  margin:auto;
}
.forFlex {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.forBlock {
  display:block;
}
.alignLeft {
  text-align:left;
}
.alignCenter {
  text-align:center;
}
.weightBold {
  font-weight:600;
}
.weightBlack {
  font-weight:900;
}
address {
  font-style:normal;
  font-weight:inherit;
}
main {
  overflow-x:hidden;
}

/*==============================================
header
==============================================*/
header {
  position:fixed;
  z-index:2;
  width:100vw;
}
.toggleMenu {
  position:static;
  z-index:3;
}
.toggleMenu dt {
  position:absolute;
  z-index:3;
  cursor:pointer;
  background:center/contain url(../images/menuIcon.png) no-repeat;
  transition:background .75s;
}
.toggleMenu dt.opened {
  background:center/contain url(../images/menuClose.png) no-repeat;
}
.toggleMenu dd {
  position:relative;
  z-index:2;
  top:0;
  background:#fff;
  display:none;
}
.toggleMenu dd ul li:not(:last-child) {
  border-bottom:2px solid #B40017;
} 
.toggleMenu dd ul li:first-child {
  color:#B40017;
}
/*==============================================
CTA
==============================================*/
.callToActin_inner p {
  display:flex;
  align-items:center;
  justify-content:center;
}
.callToActin_inner p::before,
.callToActin_inner p::after {
  content:"";
  display:block;
  width:1em;
  height:3px;
  background:#000;
}
.callToActin_inner p::before {
  transform:rotate(70deg);
}
.callToActin_inner p::after {
  transform:rotate(-70deg);
}
.callToActin_inner:first-child a {
  color:#fff;
  background:#003cff;
}
.callToActin_inner:last-child a {
  background:#ffe000;
}

/*==============================================
firstView
==============================================*/
h1 span {
  border:1px solid black;
}
/*==============================================
newPlan
==============================================*/
.newPlan dl {
  margin:auto;
}
.threePoints p {
  border:1px solid black;
}
/*==============================================
whatYouCan
==============================================*/
.whatYouCan h2 {
  display:flex;
  align-items:center;
  justify-content:center;
}
.whatYouCan h2::before,
.whatYouCan h2::after {
  content:"";
  display:block;
  width:1em;
  height:3px;
  background:#000;
}
.whatYouCan h2::before {
  transform:rotate(70deg);
}
.whatYouCan h2::after {
  transform:rotate(-70deg);
}
/*==============================================
slick_slider
==============================================*/
.slideItem {
  position:relative;
}
.slideItem p {
  position:absolute;
  z-index:1;
  color:#fff;
}
.slideItem p:first-of-type {
  align-items:center;
}
.slideItem p:first-of-type span {
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  border:3px solid #fff;
  border-radius:50%;
}
.slideItem p:last-child {
  width:100%;
  text-align:center;
}
.slick-arrow:before {
	content:""!important;
  display:block;
  width:22px;
  height:80px;
}
.slick-prev,.slick-next {
  z-index:1;
}
/*==============================================
flow
==============================================*/
.stepText h3 {
  border-bottom:1.5px solid #000;
}
/*==============================================
shopInfo
==============================================*/
.shopName {
  color:#960865;
}
.textBlock p:last-child {
  color:#fff;
  background:#960865;
}
.textBlock p:last-child span {
  letter-spacing:-.5em;
}
.mapBlock iframe {
  vertical-align:bottom;
}
address a.forFlex {
  justify-content:flex-start;
  align-items:center;
}
address a::before {
  content:"";
  display:block;
  background:center/cover url(../images/phoneIcon.png);
}
/*==============================================
footer
==============================================*/
footer {
  background:#000;
  }
footer small {
  color:#fff;
  }

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
styles for Mobile
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:1028px) {
/* general */
.fixedWidth {
  width:90%;
  }
.ctafix {
  position: fixed  position: sticky;
  bottom: 0;
  left: 0;
}
.notSP {
  display:none;
  }
/*==============================================
header for Mobile
==============================================*/
header {
  position:fixed;
  }
.headerInside {
  width:95%;
  height:80px;
  margin:auto;
  align-items:center;
  }
header img {
  width:259px;
  height:auto;
  }
.toggleMenu {
  position:static;
  width:28px;
  height:18px;
  }
.menuIcon {
  width:28px;
  height:18px;
  }
.toggleMenu dd {
  position:absolute;
  width:100vw;
  left:0;
  padding:45px 0;
  }
.toggleMenu dd ul {
  width:266px;
  margin:auto;
  }
.toggleMenu dd ul li:first-child {
  font-size:2.4rem;
  }
.toggleMenu dd ul li:not(:first-child) {
  font-size:2rem;
  line-height:60px;
  }
/*==============================================
firstView for Mobile
==============================================*/
.firstView {
  
  }
.callToAction.fixedWidth {
  width:100%;
  }
.callToActin_inner {
  width:50%;
  }
.callToAction a {
  display:block;
  font-weight:900;
  font-size:2rem;
  line-height:54px;
  }
/*==============================================
main for Mobile
==============================================*/
main {
  padding-top:80px;
  }
/*==============================================
newPlan for Mobile
==============================================*/
.newPlan .fixedWidth {
  width:100%;
  }
.newPlan p:nth-of-type(3) {
  margin-bottom:30px;
  }
/*==============================================
whatYouCan for Mobile
==============================================*/
.whatYouCan {
  padding:36px 0 44px;
  }
.whatYouCan .sectionHeading {
  font-size:3rem;
  margin-bottom:12px;
  }
/*==============================================
slick_slider for Mobile
==============================================*/
.slideItem p:first-of-type {
  top:8px;
  left:12px;
  font-size:2.8rem;
  }
.slideItem p:first-of-type span {
  width:61px;
  height:61px;
  margin-right:8px;
  }
.slideItem p:last-child {
  position:relative;
  padding:15px 0;
  color:#fff;
  background:#000;
  font-size:2rem;
  }
.slick-prev,.slick-next {
  width:28px;
  height:48px;
  transform:translateY(-150%);
  }
.slick-prev {
  left:2.5%;
  }
.slick-next {
  right:2.5%;
  }
.slick-prev:before {
  width:28px;
  height:48px;
  background:url(../images/arrow_previous_SP.png)!important;
  background-size:contain!important;
  background-repeat:no-repeat;
  }
.slick-next:before {
  width:28px;
  height:48px;
  background:url(../images/arrow_next_SP.png)!important;
  background-size:contain!important;
  background-repeat:no-repeat;
  }
.slick-dots {
  transform:translateY(15px);
  }
.slick-dots li {
  margin:0 10px;
  }
.slick-dots li button:before {
  font-size:12px;
  }
.slick-dots li.slick-active button:before {
  color:#b40017;
  }
/*==============================================
routine for Mobile
==============================================*/
.routine {
  padding:0 0 50px;
  }
.routine .fixedWidth {
  width:100%;
  }
.routine h2 {
  margin-bottom:30px;
  }
.routine p:nth-of-type(3) {
  margin-bottom:45px;
  }
/*==============================================
flow for Mobile
==============================================*/
.flow {
  background:top/100% url(../images/redObject_SP.png) no-repeat;
  padding:26px 0 46px;
  }
.flow .sectionHeading {
  font-size:3.2rem;
  line-height:52px;
  color:#fff;
  margin-bottom:71px;
  }
.flowItem {
  width:90%;
  margin:0 auto 12px;
  }
.stepNumber {
  width:56px;
  }
.stepText {
  width:77%;
  }
.stepText h3 {
  font-size:2.8rem;
  }
.stepText p {
  font-size:1.6rem;
  margin-bottom:8px;
  }
p.stepImage {
  width:217px;
  margin:14px auto 0;
  }
.flow p.notice {
  width:90%;
  margin:auto;
  font-size:1.4rem;
  }
.trainingMobileImage {
  background:#eaeaed;
  }
.trainingMobileImage img:first-child {
  margin:8px 0 24px;
  }
.trainingMobileImage img:nth-child(2),
.trainingMobileImage img:nth-child(3) {
  margin:0 0 24px;
  }
/*==============================================
training for Mobile
==============================================*/
.training {
  padding:0 0 50px;
  }
/*==============================================
shopInfo for Mobile
==============================================*/
.shopInfo {
  background:top/100% url(../images/redObject2_SP.png) no-repeat;
  padding:26px 0 32px;
  }
.shopInfo .sectionHeading {
  font-size:3.2rem;
  color:#fff;
  margin-bottom:54px;
  }
.infoBlock {
  flex-direction:column;
  width:90%;
  margin:0 auto;
  }
.mapBlock {
  width:100%;
  margin-bottom:20px;
  }
.mapBlock iframe {
  width:100%;
  height:90vw;
  }
.textBlock img {
  display:block;
  width:168px;
  margin:0 auto 20px;
  }
.shopName {
  text-align:center;
  font-size:2.4rem;
  }
address p {
  font-size:1.5rem;
  line-height:1.5;
  }
address a {
  font-size:3.1rem;
  }
address a::before {
  width:3.1rem;
  height:3.1rem;
  margin-right:8px;
  }
.openInfo {
  font-size:1.5rem;
  margin-bottom:15px;
  }
.textBlock p:last-child {
  padding:8px 0;
  font-size:2.2rem;
  line-height:1.5;
  }
/*==============================================
footer for Mobile
==============================================*/
footer {
  padding:8px 0;
  }
footer small {
  font-size:1.4rem;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
styles for Tablet
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width:500px) {
body {
  background:#fff;
  }
main {
  width:80%;
  margin:auto;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
styles for PC
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width:1029px) {
.fixedWidth {
  width:80%;
  margin:auto;
  }
.fixedInside {
  width:90%;
  margin:auto;
  }
.notPC {
  display:none;
  }
/*==============================================
header for PC
==============================================*/
.headerInside {
  width:95%;
  height:120px;
  margin:auto;
  align-items:center;
  }
header img {
  width:366px;
  }
.toggleMenu {
  width:52px;
  height:64px;
  }
.menuIcon {
  width:52px;
  height:64px;
  }
.toggleMenu dd {
  width:30vw;
  right:280px;
  padding:20px 0 15px 42px;
  }
.toggleMenu dd ul li {
  width:324px;
  }
.toggleMenu dd ul li:first-child {
  font-size:2.8rem;
  }
.toggleMenu dd ul li:not(:first-child) {
  font-size:2.3rem;
  line-height:70px;
  }
/*==============================================
firstView for PC
==============================================*/
.firstView {
  position:relative;
  }
.firstView .callToActin_inner p {
  color:#fff;
  }
.firstView .callToActin_inner p::before,
.firstView .callToActin_inner p::after {
  background:#fff;
  }
/*==============================================
main for PC
==============================================*/
main {
  padding-top:120px;
  }
/*==============================================
CTA for PC
==============================================*/
.callToAction {
  width:1100px;
  padding-right:7px;
  margin:auto;
  }
.callToActin_inner {
  width:516px;
  }
.callToActin_inner p {
  font-size:2.6rem;
  margin-bottom:8px;
  }
.callToActin_inner a {
  font-size:3.7rem;
  line-height:88px;
  box-shadow:7px 7px 0 rgba(0,0,0,.6);
  }
/*==============================================
firstView for PC
==============================================*/
.firstView p img {
  width:1100px;
  }
/*==============================================
newPlan for PC
==============================================*/
.newPlan {
  background:top/100% url(../images/redObject.png) no-repeat;
  padding:52px 0 0;
  }
.newPlan h2 {
  margin-bottom:44px;
  }
.newPlan h2 img {
  width:1590px;
/*  transform:translateX(72px);*/
  }
/*==============================================
whatYouCan for PC
==============================================*/
.whatYouCan {
  padding:72px 0 94px;
  }
.whatYouCan .sectionHeading {
  font-size:4.6rem;
  margin-bottom:35px;
  }
/*==============================================
slick_slider for PC
==============================================*/
.slider_block {
  margin-bottom:112px;
  }
.slideItem {
  margin:0 45px;
  }
.slideItem p:first-of-type {
  top:8px;
  left:8px;
  font-size:5.4rem;
  }
.slideItem p:first-of-type span {
  width:116px;
  height:116px;
  }
.slideItem p:last-child {
  bottom:30px;
  left:0;
  font-size:3.4rem;
  }
.slick-prev {
  left:14vw;
  }
.slick-next {
  right:14vw;
  }
.slick-prev:before {
  background:url(../images/arrow_previous.png)!important;
    background-size:contain!important;
    background-repeat:no-repeat;
}
.slick-next:before {
  background:url(../images/arrow_next.png)!important;
  background-size:contain!important;
  background-repeat:no-repeat;
}
/*==============================================
routine for PC
==============================================*/
.routine {
  background:top/100% url(../images/redObject.png) no-repeat;
  padding:64px 0 150px;
  }
.routine h2 {
  margin-bottom:112px;
  }
.routine p:nth-of-type(3) {
  margin-bottom:119px;
  }
/*==============================================
flow for PC
==============================================*/
.flow {
  background:top/100% url(../images/redObject.png) no-repeat;
  padding:86px 0 95px;
  }
.flow .sectionHeading {
  font-size:5rem;
  color:#fff;
  margin-bottom:151px;
  }
.flow div.fixedInside {
  margin:auto;
  }
.flowItem {
  position:relative;
  }
.flowItem:not(:last-child) {
  margin-bottom:25px;
  }
.flowItem:last-child {
  margin-bottom:45px;
  }
.stepNumber {
  width:120px;
  }
.stepText {
  width:948px;
  }
.stepText h3 {
  font-size:3.2rem;
  }
.stepText p {
  width:580px;
  font-size:2.1rem;
  }
p.stepImage {
  position:absolute;
  top:-40px;
  right:0;
  width:320px;
  }
.flowCTA.callToAction {
  margin-bottom:157px;
  }
/*==============================================
training for PC
==============================================*/
.training {
  background:top/100% url(../images/redObject.png) no-repeat;
  padding:56px 0 150px;
  }
.training h2 {
  margin-bottom:60px;
  }
.training h2 img {
  width:932px;
  }
/*==============================================
shopInfo for PC
==============================================*/
.shopInfo {
  background:top/100% url(../images/redObject.png) no-repeat;
  padding:86px 0 114px;
  }
.shopInfo .sectionHeading {
  font-size:5rem;
  color:#fff;
  margin-bottom:66px;
  }
.infoBlock {
  flex-direction:row-reverse;
  align-items:flex-end;
  width:1100px;
  margin:0 auto 112px;
  }
.mapBlock iframe {
  width:602px;
  height:602px;
  }
.textBlock img {
  width:276.35px;
  transform:translateX(-20px);
  margin-bottom:23px;
  }
.shopName {
  font-size:4rem;
  line-height:1.4;
  margin-bottom:16px;
  }
address p {
  font-size:1.8rem;
  line-height:1.5;
  }
address a {
  font-size:3.4rem;
  }
address a::before {
  width:3.4rem;
  height:3.4rem;
  margin-right:8px;
  }
.openInfo {
  font-size:1.8rem;
  margin-bottom:20px;
  }
.textBlock p:last-child {
  padding:8px 0;
  font-size:2.8rem;
  line-height:1.3;
  }
/*==============================================
footer for PC
==============================================*/
footer {
  padding:8px 0;
  }
footer small {
  font-size:1.4rem;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
styles for notePC
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width:1029px) and (max-width:1611px) {
main {
  width:100vw;
  }
.fixedInside {
  width:74%;
  }
.firstView .callToAction {
  position:absolute;
  width:58vw;
  bottom:3vw;
  left:50%;
  transform:translateX(-50%);
  }
.callToActin_inner {
  width:45%;
  }
.firstView .callToActin_inner p {
  font-size:1.25vw;
  color:#fff;
  }
.firstView .callToActin_inner a {
  font-size:1.8vw;
  line-height:5vw;
  }
.callToActin_inner p {
  font-size:2vw;
  }
.newPlan h2 img {
  width:100%;
  }
.routine h2 {
  width:65%;
  margin-bottom:40px;
  }
.flow {
  padding-top:2.5vw;
  }
.flow .sectionHeading {
  font-size:4vw;
  margin-bottom:70px;
  }
.flow .stepText {
  width:84%;
  }
.stepText p:first-of-type {
  width:55%;
  }
.slideItem p:first-of-type {
  font-size:4vw;
  }
.slideItem p:first-of-type span {
  width:100px;
  height:100px;
  margin-right:6px;
  }
.slideItem p:last-child {
  font-size:2vw;
  }
.infoBlock {
  width:90%;
  }
}

@media screen and (min-width:1461px) and (max-width:1680px) {
.firstView .callToAction {
  position:absolute;
  width:58vw;
  bottom:3vw;
  left:50%;
  transform:translateX(-50%);
  }

.firstView .callToActin_inner a {
  font-size:2.4vw;
  }
.firstView .callToActin_inner {
  width:48%;
  }
}
@media screen and (min-width:1001px) and (max-width:1200px) {
.stepText p:first-of-type {
  width:52%;
  }
.training,
.shopInfo {
  padding-top:3vw;
  }
.training h2 img {
  width:62vw;
  }

.mapBlock iframe {
  width:500px;
  height:500;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
styles for PC_wide
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width:1600px) {
/* general */
main {
  width:100%;
  }
.fixedWidth {
  width:1444px;
  margin:auto;
  }
.fixedInside {
  width:1100px;
  margin:auto;
  }
.firstView .callToAction {
  position:absolute;
  bottom:74px;
  left:50%;
  transform:translateX(-50%);
  }
}
@media screen and (min-width:1920px) {
/* general */
main {
  width:1920px;
  margin:auto;
  }
/*==============================================
header for PC_wide
==============================================*/
.headerInside {
  width:1788px;
  }
/*==============================================
firstView for PC_wide
==============================================*/
.firstView .callToAction {
  position:absolute;
  bottom:74px;
  left:50%;
  transform:translateX(-50%);
  }
/*==============================================
slick_slider for PC_wide
==============================================*/
.slick-prev {
  left:351px;
  }
.slick-next {
  right:351px;
  width:19px;
  }
}