/*
Theme Name:Nanke default
Template:twentytwenty
*/
/*@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;500&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');*/

/*maincolor*/
:root {
  --black: #605a43;
  --applemusic: #1c1c1e;
  --blue:#45b0be;
  --green:#6cb2ae;
  --yellow:#F0DEA1;
  --pink:#f58fa5;
  --purple:#99788c;
  --red:#de4b35;
  --beige:#e8e7d4;
  --gray:#f1f1f1;
  --gold:#d6b22c;
}

.bgBla{ background:var(--black); }
.bgApl{ background:var(--applemusic); }
.bgBlu{ background:var(--blue); }
.bgGre{ background:var(--green); }
.bgGol{ background:var(--gold); }
.bgYel{ background:var(--yellow); }
.bgPin{ background:var(--pink); }
.bgPur{ background:var(--purple); }
.bgRed{ background:var(--red); }
.bgBei{ background:var(--beige); }
.bgGra{ background:var(--gray); }
.bgWhi{ background:#fff; }

.clBla{ color:var(--black); }
.clApl{ color:var(--applemusic); }
.clBlu{ color:var(--blue); }
.clGre{ color:var(--green); }
.clYel{ color:var(--yellow); }
.clPin{ color:var(--pink); }
.clPur{ color:var(--purple); }
.clRed{ color:var(--red); }
.clBei{ color:var(--beige); }
.clWhi{ color:#fff; }
.clGol{ color:var(--gold); }


.op80{ opacity: 0.8;}
.op50{ opacity: 0.5;}
.op30{ opacity: 0.3;}
* {
    min-height: 0vw;
    font-style: normal;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    color:var(--black);
    line-height:2;
    letter-spacing:2;
}
html{
    position:relative;
    overflow-x: hidden;
}
body{
    margin: 0;
    overflow-x: hidden;
}
p,strong{
    margin: 0;
    font-size: 0.8425rem;
    font-size: clamp(0.8425rem, 0.7272727272727273rem + 0.36363636363636365vw, 1rem);
    letter-spacing:2px;
    line-height:2.5;
}
img{
    max-width: 100vw;
    width: 100%;
}
a{ text-decoration: none; }
a:hover{
    cursor:pointer;
    opacity:0.5;
    transition:0.3s;
}
h1,h2{
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

h3,h4,figure{
    margin: 0;

    line-height:0;
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
section{
    padding-left: 8vw;
    padding-right: 8vw;
}
button{
    border: none;
    background: none;
}
.pdAdjuster{    /*端まで表示したい部分につける*/
    width: calc(100% + 16vw);
    margin-left: -8vw;
}
/*フォント*/
.fontDeco{ font-family: "leander-script-pro", sans-serif;}
.fontSerif{ font-family: serif; }

/*フォントサイズ*/
.fs16,td{ /*本文サイズ*/
font-size: 0.8125rem;
font-size: clamp(0.8125rem, 0.7272727272727273rem + 0.36363636363636365vw, 1rem);
}
.fs12{ /*飾りサイズ*/
font-size: clamp(0.75rem, 0.6931818181818182rem + 0.24242424242424243vw, 0.875rem);
}
.fs10px{ font-size:10px}
.fs12px{ font-size:12px}
.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);
}



/*フォントウェイト*/
.fw600{ font-weight: 600; }
.fw400{ font-weight: 400; }
.fw100{ font-weight: 100; }
/*行間・文字間*/
.letSp1{ letter-spacing: 0.1rem; }
.letSp2{ letter-spacing: 0.2rem; }
.letSp5{ letter-spacing: 0.5rem; }
.lineHt0{ line-height: 0; }
.lineHt1{ line-height: 1; }
.lineHt13{ line-height: 1.3; }
.lineHt15{ line-height: 1.5; }
.lineHt17{ line-height: 1.7; }
.lineHt2{ line-height: 2; }
.lineHt25{ line-height: 2.5; }
.palt{
    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; }
.mgTop15M{ margin-top: -15px; }
.mgTop50M{ margin-top: -50px; }
.mgBottom3{ margin-bottom: 3vh; }
.mgBottom1{ margin-bottom: 1vh; }
.mgLeft5{ margin-left: 0.5rem; }
.mgRight5{ margin-right: 0.5rem; }
.mgLeft2W{ margin-left: 2vw; }
.mgRight2W{ margin-right:2vw; }
.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;
}
.pdTop5{ padding-top: 5vh; }
.pdTop10{ padding-top: 10vh; }
.pdBottom10{ padding-bottom: 10vh; }
.pdBottom15{ padding-bottom: 15vh; }
.pdBottom5{ padding-bottom: 5vh; }
.pdBottom3{ padding-bottom: 3vh; }
.pdLeft15{ padding-left: 15px; }

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

/*Display＆Position*/
.dispBlock{ display: block; }
.dispInlineBlock{ display: inline-block; }
.dispFlex{ display: flex; }
.dispTable{ display: table; }
.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; }
.posFixed{ position: fixed; }
.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;}
.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;}

.minH100{ min-height:100vh; }

.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)); }

.objSD{ object-fit:scale-down; }
.objCV{ object-fit:cover; }

.asp32{aspect-ratio: 3 / 2;}
.asp23{aspect-ratio: 3 / 2;}

.buttonDefault{
    text-align: center;
    padding: 5px 0;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2));
    margin-bottom: 1rem;
    border-radius:5px;
}
.instaButton{
    vertical-align: middle;
    width: 20px;
    margin-right: 5px;
}

.blendScreen{ mix-blend-mode: screen; }

.fadeWhite {
    height: 50px;
    background: linear-gradient(#ffffff00, white);
    display: block;
    z-index: 10;
    position: relative;
}

/*navigation*/
.navi{
    top: 20px;
    position:fixed;
    z-index: 100;
    opacity: 0.95;
    height: 100px;
    width: 30px;
    background: #e9d387;
    filter: drop-shadow(2px 4px 6px #5c5c5c30);
}
.naviTitle{
    top: 30px;
    left: 14px;
    transform: rotate(90deg);
    transform-origin: left;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.naviMenu a{ padding:0 2vw; }

.naviIcon{
    top: 15px;
    left: 5px;
}
.naviIcon:before,.naviIcon:after{
    content:'';
    width:20px;
    height:2px;
    background: #fff;
    display:block;
}
.naviIcon:after { margin-top: 8px;}

.modalArea {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modalBg {
  width: 100%;
  height: 100%;
}
.modalWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
}
.modalWrapper li { padding: 10px;}
.modalWrapper>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.modalContents a{
    padding:10px 3vw;
}
#openModal,#closeModal:hover{ cursor:pointer;}
#closeModal .naviIcon:before{
    transform: rotate(45deg);
    margin-bottom: -2px;
}
#closeModal .naviIcon:after{
    transform: rotate(-45deg);
    margin-top: 0;
}

/**/
.stickyButton{
    bottom:0;
}
.stickyButton>a{
    width:50vw;
}

.pc{ display:none; }
.pcFlex{ display:none; }
.sp{ display:block; }
@media screen and (min-width: 769px) {
    .pc{ display:block; }
    .pcFlex{ display:flex; }
    .sp{ display:none; }
}

@media screen and (min-width: 700px) {
    .navi{
        height:115px;
    }
    .aboutWrap>div{
        width:50%;
    }
    .imgSection>div:first-child{
        display:flex;
    }
    .imgSection>div:first-child>div{
        width:50%;
    }
    .imgSection>div:first-child>.dispFlex img{
        width:25vw;
    }
    .DTMSection li{ width:calc(50% - 2vw); }
}



/*Animation*/
.sec1{
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.navi { animation-name: menuSlide; }
@keyframes menuSlide {
    from { transform: translateX(-100px); }
    to { transform: translateX(0); }
}
.stickyButton{ animation-name: stickySlide; }
@keyframes stickySlide {
    from { transform: translateY(50px); }
    to { transform: translateY(0px); }
}
.photo img,.eyecatch img:not(:first-child){ animation: 5s linear 0s infinite alternate photoZoom;}
@keyframes photoZoom {
    0%{ transform:scale(1.0); }
    50%{ transform:scale(1.02); }
    100%{ transform:scale(1.0); }
}
.kirakira{ animation: 17s linear 0s infinite alternate kirakira;}
@keyframes kirakira {
    0%{
        opacity:0.5;
        transform:scale(1.1);
    }
    50%{
        opacity:1;
        transform:scale(1.0);
    }
    100%{
        opacity:0.5;
        transform:scale(1.1);
    }
}
.introKirakira{
    transform: scale(-1.2, -1.2);
    animation: 2s linear 0s infinite alternate introkirakira;
}
@keyframes introkirakira {
    0%{ opacity:0; }
    35%{ opacity:0.4; }
    50%{ opacity:1; }
    80%{ opacity:0.9; }
    100%{ opacity:0; }
}


/******** fadein *****/
.slideBottom {
   opacity: 0;
   transform: translateY(30px);
   transition: all 1.3s 0s ease-out;
}
.slideLeft {
   opacity: 0;
   transform: translateX(-30px);
   transition: all 0.5s 0s ease-out;
}
.slideRight {
   opacity: 0;
   transform: translateX(30px);
   transition: all 0.5s 0s ease-out;
}