@charset "UTF-8";
/***********************
          BACE
***********************/
/*root*/ 
:root { 
    --color-default: #5C5555;
    --color-nav: #6A6A6A;
    --color-line:#CCC7D1;
    --color-light-orange:#EFEBE9;
    --color-light-orange2:#F8EFEC;
    --color-orange:#F06E00;
    --color-gray:#918A8A; 
    --color-gray2:#707070; 
    --color-light-gray:#DEDDDD;
    --color-light-gray2:#F7F4F4;
    --color-light-gray3:#E8E8E8;
    --color-light-gray4:#F5F5F5;
    --font-zenkaku: "Zen Kaku Gothic New", sans-serif;
    --font-zenoldmincho: "Zen Old Mincho", serif;
    
}
html.lock {
  overflow-y: hidden;
}
body {
  line-height: 1.78;
  word-wrap: break-word;
  overflow-x: hidden;
  letter-spacing: 0.1em;
  font-family: var(--font-zenkaku);
  position: relative;
  margin: 0;
  color: var(--color-default);
}

a {
    text-decoration: none;
    opacity: 1;
    transition: .2s ease-out;
    color: var(--color-default);
    display: block;
}
a:active, a:hover {
    opacity: .8;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
p {
    font-size: min(3.8vw , 16px);
    line-height: 2.2;
}
h2{
    font-family: var(--font-zenoldmincho);
}
ol,
ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ol.lsNone,
ul.lsNone {
    list-style: none;
}

ul {
    list-style-position: inside;
}
dl {
    margin: 0;
}
dl dd {
    margin-left: 0;
}
iframe {
    border: none;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table td, table th {
    padding: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-break: break-word;
    caret-color: transparent;
}
*::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*figure*/
figure {
    margin: 0;
}
/*container*/
.wide__container,
.container{
    margin: 0 auto;
}


@media (max-width: 990px) {
    .wide__container {
        width: 90vw;
    }
    .container {
         width: 80vw;
    }

}
@media (min-width: 991px) {
    .wide__container {
        width: 960px;
    }
    .container {
         width: 900px;
    }
}
@media (min-width: 1240px) {
    .wide__container {
        width: 1184px;
    }
    .container {
         width: 1088px;
    }
}

/***********************
         SECTION
***********************/
.default__section{
    margin-top: min(18vw , 110px);
}
/***********************
         HEADER
***********************/
header{
    width: 100%;  
    position: absolute;
    top:0;
    left:0;
    z-index: 5;
}
header #header__wrap {
    display: flex;
    align-items: center;
}
header #logo a{
    outline: none;
}
header #logo figure {
    aspect-ratio: 10 / 7;
}
header #logo figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
header .navigation{
    background-color: white;
    position: fixed;
    top:0;
    right:0;
    z-index: 11;
    transition: .3s ease-out;
    transform: translateX(101%);
    height: 100vh;
    display: flex;
    justify-content: center;
}
header .navigation.open{
    transform: translateX(0);
}

header .navigation .nav__wrap{
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}
header .navigation .nav__wrap::-webkit-scrollbar{
    width: 8px;
}
header .navigation .nav__wrap::-webkit-scrollbar-thumb{
    background:#6D6D6D;
    border-radius: 5px;
}
header .navigation .nav__wrap::-webkit-scrollbar-track{
    background:#DDDDDD;
    border-radius: 5px;
}
header .navigation ul li{
    
}
header .navigation ul li + li{
    border-top: 1px solid var(--color-line);
}
header .navigation ul a{
    font-weight: 500;
    color: var(--color-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: min(4vw , 16px);
    padding-top: min(30px , 4vw);
    padding-bottom: min(30px , 4vw);
}
header .navigation ul a::after{
    content: "";
    display: block;
    aspect-ratio:7 / 14;
    width: min(7px , 3vw);
    background: url("../img/default/icon-arrow.webp") no-repeat center / contain;
    transition: .2s ease-out;
    transform: translateX(0);
}
header .navigation ul a:hover::after{
    transform: translateX(5px);
}

header .navigation .sns a{
    display: block;
}
header .navigation .sns a::before{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    background: url("../img/default/icon-insta.webp") no-repeat center / contain;
}
header .menuTrigger{
    cursor: pointer;
    aspect-ratio:24 / 5;
    position: fixed;
    top:0;
    right:0;
    z-index: 12;
}
header .menuTrigger span{
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    transition: .2s ease-in;
    transform: rotate(0);
    transform-origin:50% 50% 0;
}
header .menuTrigger span:first-of-type{
    top:0;
    left: 0;
}
header .menuTrigger span:last-of-type{
    bottom:0;
    left: 0;
}

header .menuTrigger.active span:first-of-type{
    transform: rotate(-45deg) translate(-3px , 3px);
}
header .menuTrigger.active span:last-of-type{
    transform: rotate(45deg) translate(-3px , -2px);
}

body.behind::after{
    position: fixed;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color:rgba(92,85,85,.3);
    top:0;
    let:0;
    z-index: 2;
}

@media (max-width: 767.9px) {

    header #header__wrap{
        padding:0; 
    }
    header #logo{
       width: min(140px , 32vw);
        aspect-ratio:4 / 3;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.home header #logo{
        background-color: rgba(255,255,255,.9);
    }
    header #logo > a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    header #logo > a > figure,
    header #logo > figure{
        width: 83.34%;
    }
    header .menuTrigger{
        width: min(12.8% , 48px);
        top:min(8vw , 30px);
        right: min(4vw , 20px);
    }
    header .navigation{
        padding-top: 87px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(89.3vw + 40px);
        max-width: 600px;
        padding-bottom: min(100px, 20vw);
    }
    header .navigation .nav__wrap{
        max-width: 400px;
        width: 80%;
    }
    header .navigation .sns{
        margin-top: 50px;
    }
    header .navigation .sns a::before{
        width: 18px;
    }
 
}
@media (max-width: 489px) {
    header .navigation{
        width: 89.3vw;
        padding-top: min(170px, 45.5vw);    
    }
    
    header .navigation .nav__wrap{
        padding-left: 20px;
        padding-right: 20px;
        max-width: 440px;
        width: calc(68.5vw + 40px);
    }
    header .navigation .sns{
        margin-top: min(50px , 20vw);
    }
    header .navigation .sns a::before{
        width: min(20px , 5.3vw);
    }
    
}
@media (min-width: 768px) {

    header #header__wrap{
        padding:16px 20px; 
    }
    header #logo{
       width: 120px;
    }
    header .menuTrigger{
        width: 48px;
        top:30px;
        right:20px;
    }
    header .navigation{
        width: 600px;
        padding-bottom: 20px;
        padding-top: 87px;
        align-items: center;
    }
    header .navigation .nav__wrap{
        padding-left: 20px;
        padding-right: 20px;
        max-width: 440px;
        width: calc(80% + 40px );
    }
    header .navigation .sns{
        margin-top: 70px;
    }
    header .navigation .sns a::before{
        width: 20px;
    }
}
@media (min-width: 991px) {
    header #header__wrap{
        height: 145px;
        padding-left:48px; 
        padding-right:48px; 
    }
    header #logo figure {
        width: 150px
    }
    header .navigation{
        width: 42vw;
        max-width: 540px;
        padding-bottom: 25px;
    }
    header .navigation .nav__wrap{
        padding-left: 20px;
        padding-right: 20px;
        max-width: 420px;
        width: 80%;
    }
    header .menuTrigger{
        top:40px;
        right: 48px;
    }
}

/***********************
          FV
***********************/

#fv{
    
    position: relative;
}

#fv .fv__bg{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
}
#fv .fv__bg picture{
    height: 100%;
    width: 100%;
    display: flex;
}
#fv .fv__bg picture img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#fv .fv__info{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center; 
}

#fv .fv__info .fv__cap{
    font-family: var(--font-zenoldmincho);
    font-weight: 500;
}
#fv .fv__info__main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#fv .fv__info__main figure{
    aspect-ratio:30 / 7;
}
#fv .fv__info__main figure img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#fv .fv__info__main p{
    font-weight: 500;
    font-family: var(--font-zenoldmincho);
    letter-spacing: .01em;
    line-height: 1.78em;
}

#fv .fv__banner .fv__banner__item{
    display: flex;
    justify-content: space-between;
}

#fv .fv__banner .fv__banner__item a{
    border-radius: 5px;
    position: relative;
    box-shadow: 0 3px 6px rgba(92,85,85,.2);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: 700;
    color: white;
}
#fv .fv__banner .fv__banner__item a span{
    display: block
}
#fv .fv__banner .fv__banner__item a .fv__banner__item__inner{
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
#fv .fv__banner .fv__banner__item a::after{
    position: absolute;
    content: "";
    display: block;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(92,85,85,.8);
    border-radius: 5px;
    mix-blend-mode: multiply;
    z-index: 2;
}
#fv .fv__banner .fv__banner__item a.fv__banner__program{
    background-image: url("../img/default/banner-program.webp");
}
#fv .fv__banner .fv__banner__item a.fv__banner__movie{
    background-image: url("../img/default/banner-movie.webp");
    letter-spacing: -.05em;
    text-align: center;
    justify-content: center;
}
#fv .fv__banner .fv__banner__item a.fv__banner__recipe{
    background-image: url("../img/default/banner-recipe.webp");
    width: 100%;
}

#fv .fv__banner .fv__banner__item a.fv__banner__movie .fv__banner__item__inner{
    text-align: center;
    justify-content: center;
    
}
#fv .fv__banner .fv__banner__item a.fv__banner__program .fv__banner__item__inner::before{
        content: "";
        display: block;
        height: 1px;
        background-color: white;
    }
#fv .fv__banner .fv__banner__item a.fv__banner__recipe{
    position: relative;
}
#fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner::before{
    content: "";
    display: block;
    height: 1px;
    background-color: white;
}

#fv .fv__banner .fv__banner__item a.fv__banner__movie span{
    line-height: 1.25;
}
#fv .fv__banner .fv__banner__item a.fv__banner__movie span:first-of-type::after{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 55%;
    max-width: 36px;
    background: url("../img/top/ifon-movie.webp") no-repeat center / contain;
    margin-left: auto;
    margin-right: auto;
    margin-top: min(2vw, 3px);
}

@media (max-width: 767.9px) {
    #fv{
        min-height: 580px;
        height: 100svh;
    }
    #fv .fv__bg,
    #fv .fv__info{
        height: 65%
    }
    #fv .fv__info{
        position: relative;
        overflow: hidden;
    }
    #fv .fv__info::after{
        width: 110vw;
        aspect-ratio:20 / 13;
        content: "";
        display: block;
        border-radius: 50%;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50% , -50%);
        z-index: -1;
        opacity: .8;
        background: url("../img/fv/deco-circle.webp") no-repeat center / contain;
    }
    #fv .fv__info .fv__cap{
        font-size: min(17px , 5vw);
    }
    
    #fv .fv__info__main{
        margin-top: min(10px , 7vw);
        
    }
    
    #fv .fv__info__main figure{
        width: min(230px , 61.3vw);
    }
    #fv .fv__info__main p{
        font-size: min(24px , 6vw);
        margin-top: min(4px , 2vw);
    }
    #fv .fv__info__main p span{
        font-size: min(30px , 8vw);
    }
    
    #fv .fv__banner{
        height: 35%;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap:min(10px , 3vw);
        
    }
    #fv .fv__banner .fv__banner__item{
        width: 100%;
        height: 41%;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__program{
        width: 79.4%;
        font-size: min(3.8vw , 20px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__movie{
        width: 19.4%;
        font-size: min(2vw , 10px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__movie span:last-of-type{
        font-size: min(2.5vw , 12px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe{
       ffont-size: min(3.8vw , 20px);
    }
    
    #fv .fv__banner .fv__banner__item a.fv__banner__program .fv__banner__item__inner::before{
        width: min(20px , 5vw);
        margin-right: min(8px , 3vw);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner::before{
        width: min(20px , 5vw);
        margin-right: min(8px , 3vw);
    }
}
@media (max-width: 489px) {
    #fv .fv__bg,
    #fv .fv__info{
        height: 62%
    }
    #fv .fv__banner{
        height: 28%;
    }
    #fv .fv__banner .fv__banner__item a::after{
        background-color: rgba(92,85,85,.6);
    }
}
@media (max-width: 400px) {
    #fv .fv__bg,
    #fv .fv__info{
        height: 78%
    }
    #fv .fv__banner{
        height: 22%;
    }
}
@media (min-width: 768px) {
    #fv{
        height:55vh; 
        min-height: 520px;
    }
    #fv .fv__info{
        padding-bottom: min(5% , 50px);
    }
    
    #fv .fv__info .fv__cap{
        font-size: 22px;
    }
    #fv .fv__info__main{
        margin-top: 80px;
        flex-direction: column-reverse;
    }
    
    #fv .fv__info__main figure{
        width: 360px;
    }
    #fv .fv__info__main p{
        font-size: 22px;
        margin-bottom: 10px;
    }
    #fv .fv__info__main p span{
        font-size: 38px;
    }
    #fv .fv__info__main p br{
        display: none;
    }
    
    #fv .fv__banner{
        position: absolute;
        bottom:25px;
        left: 50%;
        transform: translate(-50% , 0);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:10px;
        width: 100%;
    }
    
    #fv .fv__banner .fv__banner__item{
        width: 47%;
        max-width: 530px; 
    }
    #fv .fv__banner .fv__banner__item a{
        height: 80px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__program{
        width: 82.26%;
        font-size: min(2vw , 24px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__movie{
        width: 17%;
        font-size: min(1.2vw , 12px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe{
       font-size: min(2vw , 24px);
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner{
        justify-content: center;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__program .fv__banner__item__inner::before{
        width: 40px;
        margin-right: 8px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner::before{
        width: 40px;
        position: absolute;
        top:50%;
        left: 0;
        transform: translate(0 , -50%);
    }
}
@media (min-width: 991px) {
    #fv {
        height: 100vh;
        min-height: 680px;
    }
    
    #fv .fv__banner{
        gap:20px;
    }
    #fv .fv__banner .fv__banner__item a{
        height: 90px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__program .fv__banner__item__inner::before{
        width: 50px;
        margin-right: 12px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner::before{
        width: 50px;
    }
}
@media (min-width: 1240px) {
    #fv .fv__banner{
        gap:28px;
    }
    #fv .fv__banner .fv__banner__item a{
        height: 100px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__program .fv__banner__item__inner::before{
        width: 60px;
        margin-right: 14px;
    }
    #fv .fv__banner .fv__banner__item a.fv__banner__recipe .fv__banner__item__inner::before{
        width: 60px;
    }
}

/***********************
      LOWPAGE FV
***********************/

#lowpage{
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#lowpage .page__head{
    text-align: center;
}
#lowpage .page__head > .page__head__cap{
    display: block;
    font-weight: 700;
    line-height: 1;
}

#lowpage .page__head > span.page__head__cap::after{
    content: "";
    display: block;
    height: 3px;
    background-color: var(--color-orange);
    margin-left: auto;
    margin-right: auto;
}
 #lowpage .page__head > .page__head__title{
     font-family:var(--font-zenoldmincho) ;
     font-weight: bold;
     display: block;
}

@media (max-width: 767.9px) {
    #lowpage{
        height: 430px;
    }
    #lowpage .page__head{
        padding-bottom: 30px;
    }
    #lowpage .page__head > .page__head__cap{
        font-size: 16px;
        margin-bottom: 70px;
    }
    #lowpage .page__head > .page__head__cap::after{
        width: 50px;
        margin-top: 10px;
    }
    #lowpage .page__head > .page__head__title{
        font-size: 16px;
    }
}
@media (max-width: 489px) {
    #lowpage{
        min-width: 300px;
        height: 73.8vw;
    }
    #lowpage .page__head{
        padding-bottom: min(25px , 6.7vw);
    }
    #lowpage .page__head > .page__head__cap{
        font-size: 4vw;
        margin-bottom: 13vw;
    }
    #lowpage .page__head > .page__head__cap::after{
        width: 13vw;
        margin-top: 6.3vw;
    }
    #lowpage .page__head > .page__head__title{
        font-size: 3.8vw;
    }
}

@media (min-width: 768px) {
    #lowpage{
        height: 452px;
    }
    #lowpage .page__head{
        padding-bottom: 40px;
    }
    #lowpage .page__head > .page__head__cap{
        font-size: 16px;
        margin-bottom: 90px;
    }
    #lowpage .page__head > .page__head__cap::after{
        width: 50px;
        margin-top: 20px;
    }
    #lowpage .page__head > .page__head__title{
        font-size: 16px;
    }
}

#fv__privacy{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}
@media (max-width: 767.9px) {
    #fv__privacy{
        height: 250px;
        padding-bottom: 8vw;
    }
    #fv__privacy  h1{
        font-size: 16px;
    }
}
@media (max-width: 489px) {
    #fv__privacy{
        height: 46.67vw;
        padding-bottom: 30px;
    }
    #fv__privacy  h1{
        font-size: 4vw;
    }
}
@media (min-width: 768px) {
    #fv__privacy{
        height: 310px;
        padding-bottom: 100px;
    }
    #fv__privacy  h1{
        font-size: 16px;
    }
}

/***********************
          MAIN
***********************/
main {

    
}

/***********************
          TEL
***********************/
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/***********************
          FOOTER
***********************/


.footer__sub > p{
    letter-spacing: .01em;
}
@media (max-width: 990px) {
    footer .footer__main,
    footer .footer__sub{
        padding-right: 2.5vw;
    }
}
@media (max-width: 767.9px) {
    footer .footer__pc {
        display: none !important;
    }
    footer .footer__main{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    footer .footer__main__head,
    footer .footer__main__head__follow{}
    footer .footer__main figure{
        aspect-ratio:10 / 7;
        width: 100px;
    }
    footer .footer__main figure img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    footer .footer__main__head ul{
        margin-top: 40px;
    }
    footer .footer__main__head ul li + li{
        margin-top: 20px;
    }
    footer .footer__main__head ul li a{
        font-size: 14px;
    }
    footer .footer__main__head ul li a span{
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
    }
    footer .footer__main__links{
        text-align: right;
    }
    footer .footer__main__links a.footer__main__links__follow{
        display: block;
        font-size: 14px;
    }
    footer .footer__main__links a.footer__main__links__follow::after{
        content: "";
        display: block;
        aspect-ratio: 1 / 1;
        width: 20px;
        margin-top: 18px;
        margin-left: auto;
        background: url("../img/default/icon-insta.webp") no-repeat center / contain;
    }
    footer .footer__main__links a.footer__main__links__privacy{
        margin-top: 50px;
        display: block;
        font-size: 12px;
    }
    
    
    .footer__sub{
        margin-top: 40px;
    }
    .footer__sub > a{
        display: none;
    }
    
    .footer__sub > p{
        font-size: 12px;
    }
    .footer__sub__wrap > p.copyright{
        text-align: center;
        font-size: 12px;
        margin-top: 29px;
    }
}

@media (max-width: 489px) {
    footer {
        padding-top: 13.3vw;
        padding-bottom: 28vw;
    }
    footer .footer__main figure{
        width: 26.67vw;
    }
    footer .footer__main__head ul{
        margin-top: 10.67vw;;
    }
    footer .footer__main__head ul li + li{
        margin-top: 5.33vw;
    }
    footer .footer__main__head ul li a{
        font-size: 3.6vw;
    }
    footer .footer__main__head ul li a span{
        argin-bottom: 1.3vw;
        font-size: 3.6vw;
    }
    footer .footer__main__links a.footer__main__links__follow{
        display: block;
        font-size: 3.6vw;
    }
    footer .footer__main__links a.footer__main__links__follow::after{
        width: 5.33vw;
        margin-top: 4.8vw;
    }
    footer .footer__main__links a.footer__main__links__privacy{
        margin-top: 13.3vw;
        font-size: 3.2vw;
    }
    .footer__sub{
        margin-top: 10.67vw;
    }
    
    .footer__sub > p{
        font-size: 3.2vw;
    }
    .footer__sub__wrap > p.copyright{
        font-size: 3.2vw;
        margin-top: 7.73vw;
    }
}

@media (min-width: 490px) {
    footer {
      padding-top: 30px;
      padding-bottom: 180px;
    }
}

@media (min-width: 768px) {
    footer {
      padding-bottom: 50px;
    }
    footer .footer__sp {
        display: none !important;
    }
    footer .footer__main{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    footer .footer__main figure{
        aspect-ratio:10 / 7;
        width: 150px;
    }
    footer .footer__main figure img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    footer .footer__main .footer__main__head__follow{
        margin-top: 40px;
    }
    footer .footer__main .footer__main__head__follow a{
        display: block;
        font-size: 16px;
    }
    footer .footer__main .footer__main__head__follow a::after{
        content: "";
        display: block;
        aspect-ratio: 1 / 1;
        width: 20px;
        margin-top: 17px;
        background: url("../img/default/icon-insta.webp") no-repeat center / contain;
    }
    footer .footer__main ul{
        padding-left: 30px;
        display: flex;
        gap:30px 45px;
    }
    footer .footer__main ul li a{
        font-size: 10px;
    }
    footer .footer__main ul li a span{
        display: block;
        margin-bottom: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .footer__sub{
        display: flex;
        justify-content: space-between;
        margin-top: 120px;
    }
    .footer__sub > a{
        font-size: 12px;
        display: block;
    }
    
    .footer__sub > p{
        font-size: 12px;
        max-width: 758px;
        width: 66.3%;
        padding-left: 30px
    }
    .footer__sub__wrap > p.copyright{
        text-align: right;
        font-size: 12px;
        margin-top: 65px;
    }
}
@media (min-width: 991px) {
    footer .footer__main ul{
        gap:50px 70px;
    }
    footer .footer__main ul li a{
        font-size: 12px;
    }
    footer .footer__main ul li a span{
        font-size: 14px;
        margin-bottom: 28px;
    }
}
@media (min-width: 1240px) {
    footer .footer__main,
    footer .footer__sub{
        padding-right: 48px;
    }
    footer .footer__main ul{
        gap:45px 100px;
    }
    footer .footer__main ul li a{
        font-size: 14px;
    }
    footer .footer__main ul li a span{
        font-size: 16px;
    }
}

/***********************
     CONTACT BUTTON
***********************/
#contact__button{
    position: fixed;
    z-index: 4;  
    top:17.5vh;
    right: 0;
    aspect-ratio:6 / 25;
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    border-radius: 5px 0 0 5px;
    overflow: hidden;
}
#contact__button a{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(191deg,rgba(170, 25, 25, 1) 0%, rgba(255, 118, 0, 1) 100%);
    color: white;
    font-weight: 700;
    writing-mode: vertical-rl;
    width: 100%;
    height: 100%;
    
}

#contact__button a::after{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    background: url("../img/default/icon-contact.webp") no-repeat center / contain;
}
@media (max-width: 767.9px) {
    body.home.is-fv-passed #contact__button,
    body:not(.home) #contact__button{
        top:inherit;
        bottom:0;
        width: 100%;
        height: min(15vw , 70px);
        aspect-ratio:inherit;
    }
    body.home.is-fv-passed #contact__button{
        transform: translate(0 , 101%);
        animation: contact__button .2s ease-out forwards;
    }
    
    body.home.is-fv-passed #contact__button a,
    body:not(.home) #contact__button a{
        writing-mode: horizontal-tb;
    }
    
}

@keyframes contact__button {
    0% {
        transform: translate(0 , 101%);
    }
    100% {
        transform: translate(0 , 0);
    }
}


@media (max-width: 489px) {
    #contact__button{
        width: 12.8vw;
        
    }
    #contact__button a{
        font-size: 3.8vw;
    }
    #contact__button a::after{
        margin-top: 1vw;
        width: 5.33vw;
    }
}


@media (min-width: 490px) {
    #contact__button{
        width: 48px;
    }
    #contact__button a{
        font-size: 16px;
    }
    #contact__button a::after{
        margin-top: 5px;
        width: 20px;
    }
}



/***********************
          BUTTN
***********************/

.button{
    margin-left: auto;
    margin-right: auto;
    max-width: 260px;
    
}
.button a{
    padding: min(11px , 3vw);
    text-align: center;
    font-weight: 700;
    color: white;
    background: linear-gradient(325deg,rgba(170, 25, 25, 1) 29%, rgba(255, 118, 0, 1) 100%);
    font-size: min(15px , 6.4vw);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    display: block;
    position: relative;
}
.button a::before{
    content: "";
    display: block;
    height: 1px;
    background-color: white;
    width: 15.38%;
    position: absolute;
    top:50%;
    left: 0;
    transform: translate(0 , -50%);
}
@media (max-width: 489px) {
  .button{
    width: 69.3vw
  }
}
@media (min-width: 490px) {
  .button{
    width: 260px;
  }
}

/***********************
        YOUTUBE
***********************/
.youtube {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  display: none;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.8);
}

.youtube__contents {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 90%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;

  transform: translate(-50%, -50%);
}

.youtube__contents iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

.youtube__close {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10;

  color: #fff;
  font-size: 40px;
  line-height: 1;

  cursor: pointer;
}

@media (max-width: 990px) {
    .spnone{
        display: none;
    }
}
@media (max-width: 1239px) {
    .tabnone{
        display: none;
    }
}

.bgg{
    background-color: var(--color-light-gray2);
}