:root {
  --brown1: #504842;
  --brown2: #81766E;
  --brown3: #ADA49D;
  --brown4: #F0EDEA;
  --brown5: #FAF7F4;
  --brown6: #B09A85;    /*診断ページ*/
  --brown7: #8E7155;    /*診断ページ*/
  --camel1: #BA9B85;    /*featureの文字の部分*/
  --camel2: #D89C85;    /*こだわりの文字の部分*/
  --camel3: #D6A693;    /*お悩み解決の文字*/
  --camel4: #D3B89A;    /*特別公開*/
  --pink1: #CC6A90;     /*キャンペーンピンク*/
  --pink2: #CE9A9A;     /*お悩み解決部分*/
  --pink3: #B65692;     /*PLus service*/
  --pink4: #ffd0d0;     /*PLus service*/
  --blue1: #8591AA;     /*コーデセットの淡い青*/
  --blue2: #1A3956;     /*診断の文字*/
  --blue3: #B7C1D6;     /*Rentstyle文字*/
  --blueTwitter: #1DA1F2;
  --red1: #C95959;        /*ボタン*/
  --red2: #ff5576;        /*ボタン*/
  --yellow1: #F9FFB5;   /*キャンペーンの黄色*/
  --yellow2: #F9D004;   /*キャンペーンの黄色*/
  --purple1: #BE9FC0;
  --purple2: #654a9f;
  --green1: #8DAA9F;   /*キャンペーンの黄色*/
  --greenLine:#00c655;
  --gray1: #707070;   /*診断ページ*/
  --navy1: #1A3956;
  --priceBg1: #c85a58de;
  --priceBg2: #ba9a85c4;
  --priceBg3: #8491aad4;
  --priceBg4: #8ea99ecf;
}
.clWh{ color: #fff; }
.clRe{ color: var(--red1); }
.clBr1{ color: var(--brown1); }
.clBr2{ color: var(--brown2); }
.clBr3{ color: var(--brown3); }
.clBr4{ color: var(--brown4); }
.clBr6{ color: var(--brown6); }
.clBr7{ color: var(--brown7); }
.clCM1{ color: var(--camel1); }
.clCM2{ color: var(--camel2); }
.clCM3{ color: var(--camel3); }
.clCM4{ color: var(--camel4); }
.clPi1{ color: var(--pink1); }
.clPi2{ color: var(--pink2); }
.clPi3{ color: var(--pink3); }
.clBl1{ color: var(--blue1); }
.clBl2{ color: var(--blue2); }
.clBl3{ color: var(--blue3); }
.clBlT{ color: var(--blueTwitter); }
.clYe1{ color: var(--yellow1); }
.clYe2{ color: var(--yellow2); }
.clGrL{ color: var(--greenLine); }
.clGr1{ color: var(--green1); }
.clGray{ color: var(--gray1); }
.clNa{ color:var(--navy1) }
.clGray{ color: var(--gray1); }
.clGray{ color: var(--gray1); }

.bgBr1{ background: var(--brown1); }
.bgBr2{ background: var(--brown2); }
.bgBr3{ background: var(--brown3); }
.bgBr4{ background: var(--brown4); }
.bgBr5{ background: var(--brown5); }
.bgBr6{ background: var(--brown6); }
.bgPi1{ background: var(--pink1); }
.bgBl1{ background: var(--blue1); }
.bgBl4{ background: var(--blueTwitter); }
.bgRe1{ background: var(--red1); }
.bgBl2{ background: var(--blue2); }
.bgYe1{ background: var(--yellow1); }
.bgYe2{ background: var(--yellow2); }
.bgGrL{ background: var(--greenLine); }
.bgPu1{ background: var(--purple1); }
.bgPu2{ background: var(--purple2); }
.bgPi2{ background: var(--pink2); }
.bgPi4{ background: var(--pink4); }
.bgCM1{ background: var(--camel1); }
.bgCM2{ background: var(--camel2); }
.bgCM3{ background: var(--camel3); }
.bgCM4{ background: var(--camel4); }
.bgNa1{ background: var(--navy1); }
.bgWh{ background: #fff; }
.bgNone{ background: none; }


.op80{ opacity: 0.8;}
.op50{ opacity: 0.5;}
.op30{ opacity: 0.3;}
* {
    min-height: 0vw;
}
body{
    font-size: 16px;
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.7613636363636364rem + 0.48484848484848486vw, 1.125rem);
    font-family: sans-serif;
    font-weight: 400;
    margin: 0;
    color: var(--brown1);
}

p{ margin: 0; }
img{
    max-width: 100vw;
    width: 100%;
}
a{ color: var(--red1);}
h1,h2{
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 300;
}

h3,h4{
    margin: 0;
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
section{
    padding-left: 4vw;
    padding-right: 4vw;
}
button{
    border: none;
    background: none;
}
.pdAdjuster{    /*端まで表示したい部分につける*/
    width: calc(100% + 8vw);
    margin-left: -4vw;
}
/*フォント*/
.fontMincho{ font-family: 'Shippori Mincho', serif; }
.fontSansSerif{ font-family: sans-serif; }
.fontAlphabet{ font-family: 'Bodoni Moda', serif; }


/*フォントサイズ*/
.fs16{ /*本文サイズ*/
font-size: 0.875rem;
font-size: clamp(0.875rem, 0.7613636363636364rem + 0.48484848484848486vw, 1.125rem);
}
.fs12{ /*飾りサイズ*/
font-size: clamp(0.75rem, 0.6931818181818182rem + 0.24242424242424243vw, 0.875rem);
}
.fs20{  /*小見出し*/
font-size: 1.125rem;
font-size: clamp(1.125rem, 1.0113636363636365rem + 0.48484848484848486vw, 1.375rem);
}
.fs24{  /*小見出し*/
font-size: 1.25rem;
font-size: clamp(1.25rem, 1.0795454545454546rem + 0.7272727272727273vw, 1.625rem);
}
.fs32{  /*中見出し*/
font-size: 1.75rem;
font-size: clamp(1.75rem, 1.5227272727272727rem + 0.9696969696969697vw, 2.25rem);
}
.fs44{  /* 大見出し*/
font-size: 2.25rem;
font-size: clamp(2.25rem, 2.022727272727273rem + 0.9696969696969697vw, 2.75rem);
}

.fs60{  /* キャンペーンの0円のとこ*/
    font-size: 3.75rem;
    font-size: clamp(3.75rem, 3.522727272727273rem + 0.9696969696969697vw, 4.25rem);
}

.fs72{  /* 特大見出し*/
    font-size: 5rem;
    font-size: clamp(5rem, 4.431818181818182rem + 2.4242424242424243vw, 6.25rem);
}

.fs80{  /* 特大見出し*/
font-size: 4.25rem;
font-size: clamp(4.25rem, 3.625rem + 2.6666666666666665vw, 5.625rem);
}
.fs92{  /* AAlphaabet*/
font-size: 4.875rem;
font-size: clamp(4.875rem, 4.25rem + 2.6666666666666665vw, 6.25rem);
}
.fs160{
font-size: 8.75rem;
font-size: clamp(8.75rem, 8.181818181818182rem + 2.4242424242424243vw, 10rem);
}



/*フォントウェイト*/
.fw400{ font-weight: 400; }
.fw600{ font-weight: 600; }
/*行間・文字間*/
.letSp2{ letter-spacing: 0.2rem; }
.letSp5{ letter-spacing: 0.5rem; }
.lineHt1{ line-height: 1; }
.lineHt13{ line-height: 1.3; }
.lineHt17{ line-height: 1.7; }
.lineHt2{ line-height: 2; }
.lineHt25{ line-height: 2.5; }

.palt{
    font-feature-settings: 'palt';
    -webkit-font-feature-settings: "palt";
}

/*段落*/
.taCenter{ text-align: center; }
.taIni{ text-align: initial; }
.taRight{ text-align: right; }
.taLeft{ text-align: left; }
.vaMiddle{ vertical-align: middle; }

.borderRad5{ border-radius: 5px; }
.borderRad10{ border-radius: 10px; }
.borderRad20{ border-radius: 20px; }
.borderRad50{ border-radius: 150px; }
.writingVertical{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/*マージン*/
.mgTop15{ margin-top: 15vh; }
.mgBottom15{ margin-bottom: 15vh; }
.mgTop10{ margin-top: 10vh; }
.mgBottom10{ margin-bottom: 10vh; }
.mgTop5{ margin-top: 5vh; }
.mgBottom5{ margin-bottom: 5vh; }
.mgTop1{ margin-top: 1vh; }
.mgTop3{ margin-top: 3vh; }
.mgTop10M{ margin-top: -10px; }
.mgTop15M{ margin-top: -15px; }
.mgTop50M{ margin-top: -60px; }
.mgBottom3{ margin-bottom: 3vh; }
.mgBottom1{ margin-bottom: 1vh; }
.mgLeft5{ margin-left: 0.5rem; }
.mgRight5{ margin-right: 0.5rem; }
.mg1{ margin: 1vh; }
.mgauto{
    margin-left: auto;
    margin-right: auto;
}

.pd1{ padding: 1vw; }
.pd3{ padding: 3vw; }
.pdTopBottom3{
    padding-top: 3vh;
    padding-bottom: 3vh;
}
.pdTopBottom5{
    padding-top: 5vh;
    padding-bottom: 5vh;
}
.pdTopBottom10{
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.pdTopBottom15{
    padding-top: 15vh;
    padding-bottom: 15vh;
}
.pdTop3{ padding-top: 3vh; }
.pdTop5{ padding-top: 5vh; }
.pdTop10{ padding-top: 10vh; }
.pdBottom10{ padding-bottom: 10vh; }
.pdBottom5{ padding-bottom: 5vh; }
.pdBottom3{ padding-bottom: 3vh; }

.top0right0{
    top: 0;
    right: 0;
}
.right4{ right: 4vw;}
.top2{ top: 2vw;}
.top0{ top: 0;}
.bottom1{ bottom:1vh; }
.bottom0{ bottom:0; }
.overflowH{
    overflow: hidden;
}
.zIndex0{ z-index:0; }
.zIndex10{ z-index:10; }

/*Display＆Position*/
.dispBlock{ display: block; }
.dispInlineBlock{ display: inline-block; }
.dispFlex{ display: flex; }
.dispTable{ display: table; }
.dispNone{ display: none; }
.dispTableCell{ display: table-cell; }
.justcontBet{ justify-content: space-between; }
.justcontAro{ justify-content: space-around; }
.justcontCent{ justify-content: center; }
.flexDireColm{     flex-direction: column; }
.posRelative{ position: relative; }
.posAbsolu{ position: absolute; }
.alignItemEnd{ align-items: flex-end; }
.alignItemCen{ align-items: center; }
.wrap{ flex-wrap:wrap; }

.width24{ width: 24%; }
.width50{ width: 50%; }
.width50w{ width: 50vw; }
.width100{ width: 100%; }
.width100w{ width: 100vw; }
.width92{ width: 92vw; }
.width90{ width: 90vw; }
.width80{ width: 80vw; }
.width60{ width: 60vw; }
.width55{ width: 55vw; }
.width45{ width: 45vw; }
.width35{ width: 35vw; }
.width25{ width: 25vw; }
.width20{ width: 20vw; }
.width100calc4{ width: calc(100% - 4vw); }
.width100calc6{ width: calc(100% - 6vw); }
.height35w{ height:35vw; }


.maxW100{ max-width: 100px;}
.maxW200{ max-width: 200px;}
.maxW250{ max-width: 250px;}
.maxW300{ max-width: 300px;}
.maxW350{ max-width: 350px;}
.maxW400{ max-width: 400px;}
.maxW550{ max-width: 550px;}
.maxW700{ max-width: 700px;}
.maxW768{ max-width: 768px;}
.maxW1000{ max-width: 1000px;}


.border1{ border: 1px solid;}
.borderNone{ border: none;}
.outlineSet{
    outline-color: #fff;
    outline-width: 3px;
    outline-style: solid;
    outline-offset: -3px;
}
.lineSolid1:before{
    content: '';
    height: 1px;
    display: block;
    margin-top: 2vh;
    margin-bottom: 2vh;
}
.dropShadow3{ filter: drop-shadow(6px 9px 5px rgba(0, 0, 0, 0.3)); }
.dropShadowSet{ filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.3)); }
.dropShadow1{ filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1)); }
.photoAsp235{
    aspect-ratio: 2 / 3.5;
    object-fit: cover;
}
.photoAsp23{
    aspect-ratio: 2 / 3;
    object-fit: cover;
}
.photoAsp811{
    aspect-ratio: 8 / 11;
    object-fit: cover;
}
.photoAsp118{
    aspect-ratio: 11 / 8;
    object-fit: cover;
}



.transition05{ transition: 0.5s; }
.transition1{ transition: 1s; }
.transition15{ transition: 1.5s; }
.transition2{ transition: 2s; }
.transition3{ transition: 3s; }

.scrollFlag25{
    opacity: 0;
}
.fadeIn{
    opacity: 1;
}
.scaleDown{
    transform: scale(1.2);
}
.scaleDown.fadeIn{
    transform: scale(1.0);
}
/*
.changeCl-1{ background: var(--red1);}
.changeCl-2{ background: var(--camel1);}
.changeCl-3{ background: var(--blue1);}
.changeCl-4{ background: var(--green1);}
*/
.changeBgCl-1{ background: var(--red1);}
.changeBgCl-2{ background: var(--camel1);}
.changeBgCl-3{ background: var(--blue1);}
.changeBgCl-4{ background: var(--green1);}

.animToLeft{
    left: 10vw;
    position: relative;
}
.animToLeft.fadeIn{
    left: 0;
}


.waveText{
    display: flex;
    overflow: hidden;
}
.waveText span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.waveText.fadeIn span { transform: translate(0, 0); }
.waveText span:nth-child(2) { transition-delay: 0.06s; }
.waveText span:nth-child(3) { transition-delay: 0.12s; }
.waveText span:nth-child(4) { transition-delay: 0.18s; }
.waveText span:nth-child(5) { transition-delay: 0.24s; }
.waveText span:nth-child(6) { transition-delay: 0.30s; }
.waveText span:nth-child(7) { transition-delay: 0.36s; }
.waveText span:nth-child(8) { transition-delay: 0.42s; }
.waveText span:nth-child(9) { transition-delay: 0.48s; }
.waveText span:nth-child(10) { transition-delay: 0.54s; }
.waveText span:nth-child(11) { transition-delay: 0.6s; }
.waveText span:nth-child(12) { transition-delay: 0.66s; }
.waveText span:nth-child(13) { transition-delay: 0.72s; }
.waveText span:nth-child(14) { transition-delay: 0.78s; }


.slick-active .imgAnimScale{
    animation: 10s imgScale linear both infinite;
}
.animeDelay1{ animation-delay: 1s; }

@keyframes imgScale {
    0%{ transform:scale(1.0); }
    5%{ transform:scale(1.05); }
    100%{ transform:scale(1.0); }
}

.slideInLeft>div {
  transform: translate(105%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.slideInLeft.fadeIn>div {
    transform: translate(0, 0); 
}

/*2つの画像のワイプのような切り替え*/
.img2trAnimScale2{
    animation: 6s 3s imgAnimScale linear both infinite;
}
.img2trAnim{ animation: imgAnim 6s forwards infinite; }
.img2trAnim2{ animation: imgAnim2 6s forwards infinite; }
.img2trZindexAnim{ animation: zIndexAnim 6s forwards infinite,6s imgAnimScale linear both infinite;; }/*z-indexとスケール２つ分*/
.img2trWrap{
    width: 247px;
    height: 370px;
    overflow: hidden;
}
.img2tr{
    object-position: left;
    width: 247px;
    height: 370px;
    object-fit: cover;
}
@keyframes imgAnim {
    0%{ width: 0px; }
    40%{ width: 247px; }
    90%{ width: 247px; }
    100%{ width: 0px; }
}
@keyframes imgAnim2 {
    49%{ width: 247px; }
    50%{ width: 0px; }
    90%{ width: 247px; }
    100%{ width: 247px; }
}
@keyframes zIndexAnim {
    0%{ z-index: 1; }
    40%{ z-index: 1; }
    50%{ z-index: 1; }
    51%{ z-index: -1;}
    99%{ z-index: -1; }
    100%{ z-index: 1; }
}
@keyframes imgAnimScale {
    0%{ transform: scale(1.0); }
    90%{ transform: scale(1.1); }
    100%{ transform: scale(1.0); }
}
@keyframes imgAnimScale2 {
    0%{ transform: scale(1.0); }
    100%{ transform: scale(1.1); }
}
/*FEATURE*/

.featureSection h3{
    height: 3rem;
    padding-left: 3.4rem;
    vertical-align: middle;
}
/*キャンペーン*/
.campaignSection img{
    width: calc(100% - 6vw);
}
.campaignTriangle {
    background-color: #cb6a90;
    width: 40px;
    height: 114px;
    margin-right: -35px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    border: none;
    border-radius: 8px;
}
.buttonDefault {
    width: 80%;
    margin: 0px auto 15px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
}
.stickyButton{
    position: fixed;
    bottom: 0;
    z-index: 20;
    width: 100%;
    background: #ffffff8a;
    padding: 10px 0;
}
.stickyButton a{
    margin-bottom: 0;
}


/* footer  */
footer a{
    text-decoration: none;
}
.pc{ display: none;}
.pcFlex{ display: none;}
.sp{ display: block;}
@media ( min-width: 768px ) {
    .pc{ display: block;}
    .pcFlex{ display: flex;}
    .sp{ display: none;}
    .fs15em{ font-size:1.5em; }
    .fs075em{ font-size:0.75em; }
    .diagnosisSection .pd1{
        padding: 10px;
    }
    /*かスタムセット*/
    .customWrap{
        justify-content: space-around;
    }
}
@media ( min-width: 600px ) {
.limiteCamp>div:first-child{
    width: 150px;
}
.limiteCamp>div:nth-child(2){
    width: 50px;
    margin-right: -86px;
    height: 125px;
}
.limiteCamp>div:last-child{
    width: 350px;
}

}