@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --header-height:3.5rem;/* =56px */



    /* ======Colors====== */
    /* color mode HSL(hue, saturation, lightness) */
    --hue:152;


    /* --first-color:hsl(var(--hue),24%,32%); */
    /* --first-color:hsl(74, 95%, 22%); */
    /* --first-color:#FF7B54; */
    /* --first-color:#8DCBE6; */
    --first-color:#3B44F6; 


    /* --first-color-alt:hsl(var(--hue),24%,28%); */
    /* --first-color-alt:#6251DA;  */
    /* --first-color-alt:#f9987a; */
    --first-color-alt:#9DF1DF;

    --first-color-light:hsl(var(--hue),24%,66%);
  
 
    /* --first-color-lighten:hsl(var(--hue),24%,92%); */
    /* --first-color-lighten:hsl(60, 88%, 71%); */
    /* --first-color-lighten:#FFD56B; */
    /* --first-color-lighten:#69a8034b; */
    /* --first-color-lighten:#FBFACD; */

    /*ーーーーーー HOMEのバックグラウンドカラー＝＝＝＝＝＝＝＝ */
    --first-color-lighten:#FFEA20; 
    --first-color-lighten:#d1c7bd; 
    

    /* --title-color:hsl(var(--hue),4%,15%); */
    --title-color:#3F497F;
    /* --title-color:red; */
    /* --text-color:hsl(var(--hue),4%,35%); */
    --text-color:#3F497F;
    /* --text-color:red;  */

    --text-color-light:hsl(var(--hue),4%,55%);
    --body-color:hsl(var(--hue),0%,100%);
    --container-color:#FFF;
    /* ======Font and typography========= */
    /* 0.5rem=8px    1rem=16px */
    --body-font:'Poppins', sans-serif;
    --big-font-size:2rem;
    --h2-font-size:1.5rem;
    --h3-font-size:1.25rem;
    --h4-font-size:1rem;
    --normal-font-size:.938rem;
    --small-font-size:.813rem;
    --smaller-font-size:.75rem;
    /* ======Font weight========= */
    --font-medium:500;
    --font-semi-bold:600;
    /* ======Margenens Bottom========= */
     /* 0.5rem=8px    1rem=16px */
     --mb-0-5:.5rem;
     --mb-0-75:.75rem;
     --mb-1:1rem;
     --mb-1-5:1.5rem;
     --mb-2:2rem;
     --mb-2-5:2.5rem;
/* ======Z index========= */
    --z-tooltip:10;
    --z-fixed:100;
/* ======Responsiv typography========= */
}
@media screen and(min-width:968px){
    :root{
    --big-font-size:3.5rem;
    --h2-font-size:2.25rem;
    --h3-font-size:1.5rem;
    --h4-font-size:1.25rem;
    --normal-font-size:1rem;
    --small-font-size:.875rem;
    --smaller-font-size:.813rem;
    }
}

/* ==========BASE========= */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html{
    scroll-behavior: smooth;
}
body,
button,
input,
textarea{
    /* font-family: var(--body-font); */
    /* font-family: 'BhuTuka Expanded One', cursive; */
font-family: 'Poppins', sans-serif;
/* font-family: 'Yuji Syuku', serif; */
    font-size: var(--normal-font-size);
}
body{
    margin: var(--header-height)0 0 0;
    background-color: var(--body-color);
    color: var(--text-color);
    transition: .4s;
}
button{
    cursor: pointer;
    border: none;
    outline: none;
}

h2,h3,h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
}

/* ==========THEME========= */
/* ==========Variables Dark Theme========= */

/* body.dark-theme{ */
    
    /* --first-color:hsl(var(--hue),24%,32%); */
    /* --first-color:hsl(74, 95%, 22%); */
    /* --first-color-dark:hsl(var(--hue),8%,20%); */


    /* --first-color-alt:hsl(var(--hue),24%,28%); */
    /* --first-color-alt:#f9987a; */


    /* --first-color-light:hsl(var(--hue),24%,66%); */


    /* --first-color-lighten:hsl(var(--hue),24%,92%); */
    /* --first-color-lighten:hsl(60, 88%, 71%); */
    /* --first-color-lighten:#FFD56B; */
    /* --first-color-lighten:#939B62; */

    /* --title-color:hsl(var(--hue),4%,95%); */
    /* --text-color:hsl(var(--hue),4%,75%); */
    /* --text-color-light:hsl(var(--hue),4%,55%); */
    /* --body-color:hsl(var(--hue),8%,12%); */
    /* --container-color:hsl(var(--hue),8%,16%); */

    
/* } */




/* ==========BUTTON  Dark/Light========= */
/* .change-theme{ */
    /* color: var(--title-color); */
    /* font-size: 1.15rem; */
    /* cursor: pointer; */
/* } */
/* .nav__btns{ */
    /* display: inline-flex; */
    /* align-items: center; */
    /* column-gap: 1rem; */

/* } */
/* ==========
Color changes in some parts of website,
in Dark Theme========= */
/* 
.dark-theme .steps__bg,
.dark-theme .questions{
    background-color: var(--first-color-dark);
}
.dark-theme .product__circle,
.dark-theme .footer__subscribe{
    background-color: var(--container-color);
}
.dark-theme .scroll-header{
    box-shadow: 0 1px 4px hsla(var(--hue),4%,4%, .3);
}
.dark-theme .home{
    padding: 3.5rem 0 2rem;
    background-color: var(--first-color-dark);
}
.dark-theme .nav li{
    color: #fff;
} */
.steps .button{
    background-color: var(--first-color-alt);
}
.steps .button:hover{
    background-color: var(--first-color);
}

/* ==========Reusable CSS Classes========= */
.section{
    padding: 5.5rem 0 1rem;
}
.section__title,
.section__title-center{
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-2);
    line-height: 140%;
}
.section__title-center{
    text-align: center;
}
.container{
    max-width: 968px;
}
.grid{
    display: grid;
}
.main{
    overflow: hidden;/* for animation */
}

/* ==========Header========= */
.header{
    width: 100%;
    background-color: var(--body-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    transition: .4s;
}

/* .header__logobox{ */
    /* display: flex; */
    /* justify-content: space-around; */
    /* width: 15%; */
/* } */
.header__logobox .logo{
    width: 40px;
    /* margin-right: 0; */
    padding-right: 0;
}
.header__logobox .syamei{
    width: 120px;
    height: 50px;
    /* margin-left: -20px; */
    /* padding-left: -20px; */
}

/* =========  NAV  ========== */
.nav{
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: pink; */
}
.text__en{
    font-size:.5rem;
}

.nav__logo,
.nav__toggle,
.nav__close{
    color: var(--title-color);
    
}
.nav__logo{
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    transition: .3s;
}
.nav__logo-icon{
    font-size: 1.15rem;
    color: var(--first-color);

}
.nav__logo:hover{
    color: var(--first-color);
}
.nav__toggle{
    display: inline-flex;
    font-size: 1.25rem;
    cursor: pointer;
}
@media  screen and (max-width:767px){
    .nav__menu{
        position: fixed;
        background-color: var(--container-color);
        width: 80%;
        height: 100%;
        top: 0;
        right: -100%;
        box-shadow: -2px 0 4px hsla(var(--hue),24%,15%, .1);
        padding: 4rem 0 0 3rem;
        border-radius: 1rem 0 0 1rem;
        transition: .3s;
        z-index: var(--z-fixed);
    }
}
.nav__close{
    font-size: 1.5rem;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    cursor: pointer;
}
.nav__list{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}
.nav__link{
    color: var(--title-color);
    font-weight: var(--font-medium);
    transition: .3s;
}
.nav__link:hover{
    color: var(--first-color);
}


/* ホバーでTEXT文字が変わる @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* 
.text__change{
    position: relative;
    left: 50%;
    top: -30%;
    transform: translate(-50%,-50%);
    transition: all .3s;
    display: inline-block; */
    /* white-space: nowrap; */
    /* text-align: center; */
    /* justify-content: center; */
    /* background-color: aqua; */
    /* }
    .text__ja:hover{ */
        /* background-color: green; */
        /* color: blueviolet; */
        /* opacity: 0;
    }
    .text__ja,
    .text__en{
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-50%) ;
        transition: all .3s;
        display: block;
        white-space: nowrap;
    }
    .text__en{
        opacity: 0;
    }
    .text__change:hover .text__ja{
        opacity: 0;
    }
    .text__change:hover .text__en{
        opacity: 1;
    }
    */
/*======== Show menu=========== */
.show-menu{
    right: 0;
}
/*====== Change Background Header===== */
.scroll-header{
    box-shadow: 0 1px 4px hsla(var(--hue),4%,15%, .1);
}

/* Active Link*/
.active-link{
    position: relative;
    color: var(--first-color);
}
.active-link::after{
    content: '';
    position: absolute;
    bottom: -.5rem;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: var(--first-color);
}






/* ホバーで文字が変わる @@@@@@@@@@@@*/
/* .nav__item .text_change span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all .3s;
    display: block;
    white-space: nowrap;
    /* text-align: center; */
    /* justify-content: center; */
    
    /* .nav__item .text_change span:nth-child(2){
        color: red;
        opacity: 0;
    }
    .nav__item .text_change:hover span:nth-child(1){
        opacity: 0;
    }
    .nav__item .text_change:hover span:nth-child(2){
        opacity: 1;
    } */
    



















/* =========HOME========== */

.home{
    padding: 3.5rem 0 2rem;

       
    
    
    /* padding: 35rem 0 2rem; */
    background-color: var(--first-color-lighten);
    /* background-color: red; */
    /* background: -gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
      /* background: linear-gradient(220.55deg,#d1f9a0 0%,#FFA4F6 100%); */
      /* background: linear-gradient(220.55deg,#27B643 0%,#FFE70B 90%); */
}


.home__container{
    position: relative;
    row-gap: 2rem;
}
.home__img{
    /* width: 17px; */
    justify-self: center;
    border-radius: 10%;

}
.home__title{
    font-size: var(--big-font-size);
    line-height: 140%;
    margin-bottom: var(--mb-1);
}
.home__discription{
    margin-bottom: var(--mb-2-5);
    
}
.home h1{
    margin-bottom: var(--mb-2-5);
    font-weight: 100;
    font-size: .938rem;
}


/* style="font-weight: 100; font-size: .938rem;" */


.home__social{
    position: absolute;
    top: 2rem;
    right: .5rem;
    display: grid;
    justify-items: center;
    row-gap: 3.5rem;
}
.home__social-follow{
    font-weight: var(--font-medium);
    font-size: var(--smaller-font-size);
    color: var(--first-color);
    position: relative;
    transform: rotate(90deg);
}
.home__social-follow::after{
    content: '';
    position: absolute;
    width: 1rem;
    height: 2px;
    background-color: var(--first-color);
    right: -45%;
    top: 50%;
}
.home__social-links{
    display: inline-flex;
    flex-direction: column;
    row-gap: 1.25rem;
}
.home__social-link{
    font-size: 1.5rem;
    color: var(--first-color);
    transition: .3s;

}
.home .home__social-link:hover{
    transform: translateX(.25rem);
}
.home__data .button{
    background-color: green;
}

/* =========BUTTONS========== */
.button{
    display: inline-block;
    background-color: var(--first-color);
    color: #FFF;
    padding: 1rem 1.75rem;
    border-radius: .5rem;
    font-weight: var(--font-medium);
    transition: .3s;
}
.button:hover{
    background-color: var(--first-color-alt);
    /* opacity: .7; */
}
.button__icon{
    transition: .3s;
}
.button:hover .button__icon{
    transform: translateX(.25rem);
}
.button--flex{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
}
.button--link{
    color: var(--first-color);
    font-weight: var(--font-medium);
}
.button--link:hover .button__icon{
    transform: translateX(.25rem);

}
/* =========ABOUT========== */

.about__container{
    row-gap: 2rem;
    padding-bottom: 3rem;
}
.about__img{
    width: 130px;
    justify-self: center;
    border-radius: 50%;
}
.about__title{
    margin-bottom: var(--mb-1);
}
.about__discription{
    margin-bottom: var(--mb-2);
}
.about__details{
    display: grid;
    row-gap: 1rem;
    margin-bottom: var(--mb-2-5);
}
.about__details-description{
    display: inline-flex;
    column-gap: .5rem;
    font-size: var(--small-font-size);
}
.about__details-icon{
    font-size: 1rem;
    color: var(--first-color);
    margin-top: .15rem;
}
/* .about .button--link{
    background-color: aqua;
} */ 
.about .footer__social-links a{
    margin-right: 2rem;
}
.about .footer__social-links a:hover{
    transform: translateY(-.25rem);
}
.about .button{
    background-color: green;
}
.about .button:hover{
    background-color: #9DF1DF;
}
/* =========STEPS========== */
/* .steps .steps__container{ */
    /* padding-top: 50rem; */
    /* margin-top: 50rem; */
/* } */
.steps__bg{
    background-color: var(--first-color);
    padding: 3rem 2rem 2rem;
    border-radius: 1rem;
    /* padding-top: 0; */
    /* margin-top: 30rem; */
}
.steps__container{
    gap: 2rem;
    padding-top: 1rem;
}


/* 
.steps__container {
    gap: 2rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    /* float: left; */
    /* flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between; */
    /* width: 30%; */
    /* gap: 30px; */
  /* } */
   /* */ 

   .steps__container {
    gap: 2rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%; /* 30%から変更 */
  }


.steps__title{
    color: #FFF;
}
.steps__card{
    background-color: var(--container-color);
    padding: 2.5rem 3rem 2rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
}


.steps__card {
    width: calc(30% - 1rem); /* 3つ並べるので50% */
    margin-bottom: 2rem;
  }
  
.steps__card-number{
    display: inline-block;
    background-color: var(--first-color);
    color: #FFF;
    padding: .5rem .75rem;
    border-radius: .25rem;
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1-5);
    transition: .3s;
    width: 23%;
}
.steps__card-title{
    font-size: var(--h4-font-size);
    margin-bottom: var(--mb-0-5);
}
.steps__card-description{
    position: relative;
    font-size: var(--small-font-size);
    margin-bottom: 1rem;
    height: 50px;
    overflow: hidden;
    transition: height .3s ease;
}
.steps__card-description::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rinear-gradient(to top,#fff,transparent); */
    background: linear-gradient(to top,#fff,transparent);
    display: none;

    /* background-color: red; */
}
.steps__card.gradient .steps__card-description::before{
display: block;
}
.steps__card:hover .steps__card-number{
    transform: translateY(-.25rem);
}
.steps .button{
    margin-top: 1rem;
   
}
.steps .btn{
    margin-top: auto;
    align-self: flex-start;
    background-color: var(--first-color);
    transition: .3s;
}
.steps .btn:hover{
    background-color: var(--first-color-alt);
}
/* =========PRODUCTS========== */
.product__description{
    text-align: center;
    
}
.product__container{
    padding: 3rem 0;
    grid-template-columns: repeat(2,1fr);
    gap: 2.5rem 3rem;
}
.product__card{
    display: grid;
    position: relative;
}
.product__card span{
    margin-top: 2rem;
}
.product__img{
    position: relative;
    width: 120px;
    justify-self: center;
    margin-bottom: var(--mb-0-75);
    transition: .3s;
}
.product__title,
.product__price{
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
}
.product__title{
    margin-bottom: .25rem;
}
.product__button{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--first-color);
    color: #FFF;
    padding: .25rem;
    border-radius: .35rem;
    font-size: 1.15rem;
}
.product__button:hover{
    background-color: var(--first-color-alt);
}
.product__circle{
    width: 100px;
    height: 100px;
    background-color: var(--first-color-lighten);
    /* background: linear-gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
    /* background-color: rgba(255, 0, 255, 0.205); */
    border-radius: 50%;
    position: absolute;
    top: -10%;
    left: 5%;
}
.product__card:hover .product__img{
    transform: translateY(-.5rem);
}
.product .button{
width: auto;
/* text-align: center; */
/* margin: 0 auto; */
/* margin-right: auto; */
margin-left: 50%;
transform: translateX(-50%);


}
/* =========QUESTIONS========== */
.questions{
    background-color: var(--first-color-lighten);
    /* background: linear-gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
}
.questions__container{
    gap: 1.5rem;
    padding: 1.5rem 0;
  
}
.questions__button{
    background-color: green;
    transition: .3s;
    /* text-align: center; */
    margin-left: 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.questions__button:hover{
    background-color: var(--first-color-alt);
}

.questions__p {
    /* display: inline-block; */
 text-align: center; 
 margin-bottom: 1rem;
    /* margin: 0 auto; */ 
    /* padding: 0 auto; */
    
}
.questions__group{
    display: grid;
    row-gap: 1.5rem;
}
.questions__item{
    background-color: var(--container-color);
    border-radius: .25rem;
}
.questions__item-title{
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
}
.questions__icon{
    font-size: 1.25rem;
    color: var(--title-color);
}
.questions__description{
    /* font-size: var(--small-font-size); */
    font-size: var(--normal-font-size);
    /* padding: 0 1.25rem 1.25rem 2.5rem; */
    /* padding: 0 16rem; */
    text-align: center;
    padding-left: .5rem;
    padding-right: .5rem;
}
.questions__header{
    display: flex;
    align-items: center;
    column-gap: .5rem;
    padding: .75rem .5rem;
    cursor: pointer;
}
.questions__content{
    overflow: hidden;
    height: 0;
}
.questions__item,
.questions__header,
.questions__item-title,
.questions__icon,
.questions__description,
.questions__content{
    transition: .3s;
}
.questions__description{
    text-align: left;
}
.questions__item:hover{
    box-shadow: 0 2px 8px hsla(var(--hue),4%,15%, .15);
}
/* ==========Rotate icon, change color of titles and background========= */
.accordion-open .questions__header,
.accordion-open .questions__content{
    background-color: var(--first-color);
}
.accordion-open .questions__item-title,
.accordion-open .questions__description,
.accordion-open .questions__icon{
    color: #FFF;
}
.accordion-open .questions__icon{
    transform: rotate(45deg);
}
/* =========CONTACT========== */
/* .contact__container{ */
    /* padding: 3.5rem 0 2rem; */
    /* width: 100vw; */
    /* background-color: var(--first-color-lighten); */
    /* margin-left: -160px;
    margin-right: -160px;
    padding-right: 0;
    padding-left: 150px; */
/* } */
/* .contact__container{
    column-gap: 5rem;
} */


.contact{
    padding: 3.5rem 0 2rem;
  
    padding: 5rem 0 2rem;
    /* background-color: var(--first-color-lighten); */
    /* background-color: red; */

 } 

.contact__box{
    background-color: var(--first-color-lighten);
    /* background: linear-gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
    padding: 2rem 1.5rem 1rem;border-radius: .5rem;

} 



.contact__container{
    row-gap: 3.5rem;
    /* row-gap: rem; */
    column-gap: 5rem;
   /* width: 100%; */
}
/* .contact__socials{
    display: flex;
    justify-content: space-between;
} */
.contact__socials a{
    display: inline-block;
    margin: 1rem .75rem 1rem 1rem;
}
.contact .home__social-link:hover{
    transform: translateY(-.25rem);
}


.home__social-link{
    font-size: 1.5rem;
    color: var(--first-color);
    transition: .3s;

}







.contact__data{
    display: grid;
    row-gap: 2rem;
}
.contact__subtitle{
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
    margin-bottom: var(--mb-0-5);
}
.contact__description{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    color: var(--title-color);
    font-weight: var(--font-medium);
    padding-bottom: 2rem;
}
/* .contact__tel{
    color: var(--first-color);
} */
.contact__data a{
    text-decoration: underline;
}
.contact__tel{
    transition: .2s;
    font-size: 1rem;
    display: inline;
color:var(--first-color);
}

.contact__tel:hover{
    /* color: var(--first-color-light); */
    opacity: .6;
    /* font-size: 1.5rem; */
    /* border-bottom: .3px solid; */

}
.contact__address{
    margin-bottom: .5rem;
}
.contact__icon{
    font-size: 1.25rem;
}







.contact__social-link{
    width: 2rem;
    font-size: 2rem;
}


.contact__map{
    padding-left: 2rem;
    padding-top: 2rem;
}






.contact__inputs{
    display: grid;
    row-gap: 2rem;
    margin-bottom: var(--mb-2-5);
}
.contact__content{
    position: relative;
    height: 3rem;
    border-bottom: 1px solid var(--text-color-light);
}
.contact__input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 1rem 1rem 0;
    background: none;
    border: none;
    outline: none;
    z-index: 1;
    /* color:rgb(142, 142, 3); */
    color: var(--text-color);
    font-size: 1.2rem;
}
.contact__label{
    position: absolute;
    top: .75rem;
    width: 100%;
    font-size: var(--small-font-size);
    columns: var(--text-color-light);
    transition: .3s;
}
.contact__area{
    height: 7rem;

}
.contact__area textarea{
    resize: none;
}
/* .contact__buttons{ */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* grid-template-columns: 45% 45%; */
    /* column-gap: .5rem; */
    /* justify-content: space-between; */
    /* flex-direction: row; */
/* } */
.contact .button{
    /* display: block; */
    margin-top: .5rem;
    /* margin: 0 auto; */
}
/* .contact__buttons .button button--flex:nth-child(1){
    margin-right: 1rem;
} */

/* 
#contact{
    display: block;
    width: 100%;
} */

/* =========FOOTER========== */

/* 

.footer{
    background-color: var(--first-color-lighten);
    height: 0px;
    padding-top: 1rem;
    line-height: 200px;
    
} */


.footer{
    /* background-color: var(--first-color-lighten); */
    height: 0px;
    padding-top: 1rem;
    line-height: 50px;
    padding-bottom: 8rem;
    padding-top: 0rem;
    /* padding-top: 5rem; */
}
.footer__content{
    /* background-color: magenta; */
    /* color: red; */
   
    padding: 0 1rem;
    line-height: 1rem;
    text-align: center;
}









.footer__copy{
    /* background-color: rgb(197, 197, 242); */
    text-align: center;
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    padding-top: 0rem;
    padding-bottom: 0rem;

    /* margin: 5rem 0 1rem; */
    /* margin: 0 auto; */
    margin-top: 0;
    /* margin-bottom: 100px; */
}
.footer__social-links{
    display: flex;
    flex-direction: row;
    /* text-align: center; */
    /* margin: 0 auto; */
    justify-content: center;
}
.footer .home__social-link:hover{
    transform: translateY(-.25rem);
}
/* .footer__copy{
    justify-content: center;
    text-align: center;
    line-height: 100%;
} */
/* .footer__copy {
    display: block;
    left: 50%;
    transform: translateX(-50%);
} */
/* ==========Scroll up========= */
.scrollup{
    position: fixed;
    background-color: var(--first-color);
    right: 1rem;
    bottom: -30%;
    display: inline-flex;
    padding: .5rem;
    border-radius: .25rem;
    z-index: var(--z-tooltip);
    opacity: .8;
    transition: .4s;
    color: #FFF;
}
.scrollup__icon{
    font-size: 1rem;
}
.scrollup:hover{
    background-color: var(--first-color-alt);
    opacity: 1;
}
/* Show scroll up */
.show-scroll{
    bottom: 3rem;
}





/* ========Scroll Bar=========== */
::-webkit-scrollbar{
    width: .6rem;
    /* background: hsl(var(--hue),4%,53%); */
    background-color: var(--first-color-alt);
}
::-webkit-scrollbar-thumb{
    /* background: hsl(var(--hue),4%,29%); */
    background-color: var(--first-color);
    border-radius: .5rem;
}







/* ＝＝＝＝＝メディアクエリー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝====================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================＝＝*/
/* =========Break Points========== */
/* For Small devices */
/* ３１９以下の時 */
@media screen and (max-width:319px){
    /* .home{
        background-color: brown;
    } */
    .home__container{
        padding-left: .5rem;
        padding-right: .5rem;   
    }
    .home__img{
        width: 150px;
    }
    .home__title{
        font-size:1.75rem ;
        /* line-height: 100%; */
        /* margin-bottom: var(--mb-1); */
        margin-bottom: 1rem;
        /* color: aqua; */
    }
    .steps .steps__bg{
        /* background-color: brown; */
        margin-top: -2rem;
        margin-bottom: 4rem;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: .25rem;
        margin-right: .25rem;
        /* column-gap: 0; */
    }
    .about__data{
        padding-left: .5rem;
        padding-right: .5rem;   
    }
    .steps .steps__card{
        /* background-color: purple;
        margin-top: -6rem; */
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .steps__card {
        width: calc(100% - 1rem); /* 1つ並べるので50% */
        margin-bottom: 2rem;
      }
    .questions{
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .questions__group{
        padding-left: .25rem;
        padding-right: .25rem;
    }
    .questions__p{
padding-left: .25rem;
padding-right: .25rem;
    }
    .contact__container{
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .contact__map{
        /* width: 90%; */
        padding-left: .15rem;
        padding-right: .15rem;
    }
    .contact__map iframe{
        width: 100%;
    }
    .product__description{
        text-align: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .product__container{
        padding: 3rem 0;
        grid-template-columns: repeat(1,1fr);
        gap: 2.5rem 3rem;
    }
    .product__card{
        display: grid;
        position: relative;
    }
    .product__img{
        position: relative;
        width: 120px;
        justify-self: center;
        margin-bottom: var(--mb-0-75);
        transition: .3s;
    }
    .product__title,
    .product__price{
        font-size: var(--small-font-size);
        font-weight: var(--font-semi-bold);
        color: var(--title-color);
    }
    .product__title{
        margin-bottom: .25rem;
        text-align: center;
    }
    .product__price{
        text-align: center;
    }
    .lightbox__img .product__price{
        display: block;
        text-align: center;
        /* color: red; */
    }
    .product__button{
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: var(--first-color);
        color: #FFF;
        padding: .25rem;
        border-radius: .35rem;
        font-size: 1.15rem;
    }
    .product__button:hover{
        background-color: var(--first-color-alt);
    }
    .product__circle{
        width: 150px;
        height: 150px;
        /* background-color: var(--first-color-lighten); */
      
        border-radius: 50%;
        position: absolute;
        top: -10%;
        left: 20%;
    }
    .product__card:hover .product__img{
        transform: translateY(-.5rem);
    }
    .product .button{
    width: auto;
    /* text-align: center; */
    /* margin: 0 auto; */
    /* margin-right: auto; */
    margin-left: 50%;
    transform: translateX(-50%);
    }
    
    
    .footer{
        padding-top: 5rem;
        /* padding-bottom: 5rem; */
        margin-bottom: 9rem;
    }
    .footer__copy{
font-size: .4rem;
    }
    .footer h1{
        font-size: .5rem;
    }
}
/* ３２０～５７６の時 ========================================================================--*/
@media screen and (min-width:320px) {
/* 
.home{
        background-color: pink;
    }  */
    .container{
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }
    .home__img{
        width: 250px;
    }
    .home__title{
        /* font-size: var(--h2-font-size); */
        font-size: 2.3rem;
    }
    /* .home__social-follow{
        right: -30px;
    } */
    .home__social{
        right: -20px;
    }
    .steps{
        margin-top: 1.5rem;
    }
    .steps__bg{
        padding: 2rem 1rem;
    }
    .steps__card{
        padding: 1.5rem;
    }
    .steps__card {
        width: calc(100% - 1rem); /* 3つ並べるので50% */
        margin-bottom: 2rem;
      }
    .steps .steps__bg{
        /* background-color: pink; */
        margin-top: -6rem;
        margin-bottom: 4rem;
    }
    .steps__card-description,
    .about__discription{
        letter-spacing: .01rem;
      }
    .questions{
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .product__container{
        grid-template-columns: .6fr;
        justify-content: center;
    }
    .product__circle{
        width: 150px;
        height: 150px;
    }
    .contact__map iframe{
        width: 94%;
    }
    .footer{
        padding-top: 5rem;
        padding-bottom: 15rem;
    }
    }
    

/* For Medium devices */
/* ５７６～７６７の時==========================================================================- */
@media screen and (min-width:576px){
    /* .home{
        background-color: yellow;
        
    }  */
    .home__img{
        width: 300px;
    }
    .home__title{
        /* font-size: var(--h2-font-size); */
        font-size: 3rem;
    }
    /* .home__data{
        margin-top: -7rem;
    } */
    .steps{
        margin-left: .25rem;
        margin-right: .25rem;
        margin-top: 1.5rem;
    }
    .steps__container{
        grid-template-columns: repeat(2,1fr);
       /* margin-top: 5rem; */
       /* margin-left: .5rem; */
    }
    
.steps__card {
    width: calc(50% - 1rem); /* 3つ並べるので50% */
    margin-bottom: 2rem;
  }
    /* .header,
    .home,
    .steps,
    .about,
    .questions,
    .contact,
    .footer{
    padding-left: 1rem; 
    padding-right: 1rem; 
    } */
    .steps .steps__bg{
        /* background-color: yellow; */
        margin-top: -6rem;
        margin-bottom: 5rem;
    }
    .steps__card-description,
    .about__discription{
        letter-spacing: .01rem;
      }
    .product__description{
        padding: 0 4rem;
    }
    .product__container{
        grid-template-columns: repeat(2,170px);
        justify-content: center;
        column-gap: 5rem;
    }
    .footer{
        padding-top: 5rem;
    }
    .footer__subscribe{
        width: 400px;
    }
} 
/* ７６７～９９２の時 =========================================================-----*/
@media screen and (min-width:767px){
    .text__change_2{
        opacity: 0;
    }
    /* .home{
        background-color: purple;
} */
.home__img{
    width: 200px;
}
    .dark-theme .home{
        /* background-color: red; */
        /* padding: 11rem 1rem 0 2rem; */
        padding: 11rem 0rem 4rem 1rem;
    }
    body{
        margin: 0;
    }
    .nav{
        height: calc(var(--header-height) + 1.5rem);
        column-gap: 3rem;
    }
    .nav__close,
    .nav__toggle{
        display: none;
    }
    .nav__list{
        flex-direction: row;
        column-gap: 3rem;
    }
    .nav__menu{
        margin-left: auto;
    }
    .home__container,
    .about__container,
    .questions__group,
    .contact__container,
    .footer__container{
        grid-template-columns: repeat(2,1fr);
    }
    .about__img{
        /* width: 380px; */
        width: 150px;
    }
    .steps .steps__bg{
        /* background-color: purple; */
        margin-top: -6rem;
        margin-bottom: 6rem;
    }
    .steps__card-description,
    .about__discription{
        letter-spacing: .035rem;
      }
    .questions__group{
        column-gap: 1rem;
    }
    .questions__group{
        align-items: flex-start;
    }
    .home{
        padding: 10rem 0 5rem;
        padding-left: 1rem;
    }
    .home__container{
        align-items: center;
    }
    .home__img{
        width: 280px;
        order: 1;
    }
    .home__social{
        top: 30%;
    }
    .product__circle{
        left: -20%;
    }

    .contact__container{
        /* display: inline-flex; */
        /* align-items: center; */
        column-gap: .5rem;
        /* row-gap: .5rem; */
        /* color: var(--title-color); */
        /* font-weight: var(--font-medium); */
        /* padding-bottom: 2rem; */
    }




    .footer__container{
        column-gap: 3rem;

        padding-left: 2rem;
        column-gap: 8rem;



    }
    .footer__subscribe{
        width: initial;
    }

}
/* For Large devices */
/* ９９２～１２００の時 ===============================================--*/
@media screen and (min-width:992px){
    /* .home{
        background-color: red;
} */

    .container{
        margin-left: auto;
        margin-right: auto;
    }


    .home{
        /* background-color: red; */
        /* --first-color-lighten:#efeae4;  */
        margin-top: -5rem;
    }
    .home .home__img{
        width: 340px;
    }
    .home__title{
        /* font-size: var(--h2-font-size); */
        font-size: 3.5rem;
        margin-top: 2rem;
    }
    .dark-theme .home{
        padding: 13rem 0 5rem;
    }   




    .section{
        padding: 8rem 0 1rem;
    }
    .section__title,
    .section__title-center{
        font-size: var(--h2-font-size);

    }
    .home{
        padding: 13rem 0 5rem;
    }
    .home__img{
        width: 250px;
    }
    .home__discription{
        padding-right: 1rem;
    }
    
    .steps {
        /* background-color: purple; */
        margin-top: 4rem;
        /* margin-bottom: 6rem; */
    }
    .about__img{
        /* width: 380px; */
        width: 150px;
    }
    .steps__container{
        grid-template-columns: repeat(3,1fr);
    }
    
    /* .steps__bg{
        padding: 3.5rem 2.5rem;
    } */
    .steps .steps__bg{
        padding: 3.5rem 2.5rem;
        /* background-color: red; */
        margin-top: -10rem;
        margin-bottom: 6rem;
    }
    .steps__card-title{
        font-size: var(--normal-font-size);
    }
    .steps__card {
        width: calc(30% - 1rem); /* 3つ並べるので50% */
        margin-bottom: 2rem;
      }
      .steps__card-description,
      .about__discription{
        letter-spacing: .055rem;
      }
    .product__description,
    .questions__description{
        padding: 0 16rem;
    }
    .product__container{
        padding: 4rem 0;
        grid-template-columns: repeat(3,185px);
        gap: 4rem 6rem;
    }
    .product__img{
        width: 160px;
    }
    .product__circle{
        width: 180px;
        height: 180px;
        left: -10%;
    }
    .product__title,
    .product__price{
        font-size: var(--normal-font-size);
    }
    .questions__container{
        padding: 1rem 0 4rem;
        align-items: flex-start;
    }
    .questions__title{
        text-align: initial;
    }
    .questions__group{
        row-gap: 2rem;
        align-items: flex-start;
    }
    .questions__header{
        padding: 1rem;
    }
    .questions__description{
        padding: 0 3.5rem 2.25rem 2.75rem;
    }
    .footer__logo{
        font-size: var(--h4-font-size);
    }
    .footer__container{
        grid-template-columns: 1fr .5fr .5fr .5fr;
        padding-right: 1rem;
        padding-left: 1rem;
        column-gap: 1rem;
    }
    .footer__copy{
        margin: 7rem 0 2rem;
    }
    .footer{
        padding-top: 0rem;
        padding-bottom: 7rem;
        /* margin-bottom: 3rem; */
    }
    .footer h1{
        padding-bottom: 3rem;
        font-size: var(--smaller-font-size);
    }
}

/* １２００以上の時================================================= */
@media screen and (min-width:1200px){
    
     
    .home__img{
        width: 300px;
    }
    .home__social{
        right: -3rem;
        row-gap: 4.5rem;
    }
    .home__social-follow{
        font-size: var(--small-font-size);
    }
    .home__social-follow::after{
        width: 1.5rem;
        right: -60%;
    }
    .home__social-link{
        font-size: 1.5rem;
    }
    .about__container{
        column-gap: 7rem;
    }
    .about__img{
        width: 200px;
        justify-self: center;
    }
    .steps .steps__bg{
        /* background-color: blue; */
        margin-top: -10rem;
        margin-bottom: 6rem;
    }
    .steps__card {
        width: calc(30% - 1rem); /* 3つ並べるので50% */
        margin-bottom: 2rem;
      }
      .steps__card-description,
      .about__discription{
        letter-spacing: .055rem;
      }
    .product__circle{
        width: 150px;
        height: 150px;
        left: -20%;
    }
    /* .contact__map iframe{
        
        height: 400px;
    } */
    .scrollup{
        right: 3rem;
    }
    .footer__subscribe{
        width: 400px;
    }
    .footer{
        padding-bottom: 10rem;
    }
}


/* =========インプットに入力したら、ラベルがひゅうっと上に上がる========== */

.contact__input:focus + .contact__label{
    top: -.75rem;
    left: 0;
    font-size: var(--smaller-font-size);
    z-index: 10;
    /* color: blue; */
} 
/* =========で、上がったラベルは降りてこない========== */
.contact__input:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{
    top: -.75rem;
    font-size: var(--smaller-font-size);
    z-index: 10;
    /* color: red; */
}