@charset 'utf-8';

/**********************
root
**********************/
/* 
breakpoint
min-width:540px;
min-width:760px;
*/

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Poppins', sans-serif;
*/

/*
line-height: 1.4;	 18px 26
line-height: 1.6;	 18px 28
line-height: 1.8;	 18px 32
*/

:root {
  --main-font: 'Poppins', 'Noto Sans JP', sans-serif;
  --sub-font: ;
  --weight-regular: 400;
  --main-colour: #000000;
  --font-colour: ;
  --colour-paleblue: ;
  --colour-gray: ;
  --lineheight-18: 1.6;
  --lineheight-28: 1.2;
  --lineheight-15: 1.4;
  --letter-space-005:0.05em;
  --letter-space-01:0.1em;
}

/*****************************
common
*****************************/

body {
  position: relative;
  font-size: 18px;
}

header,
main:not(#top),
#top .outer {
  margin: 0 auto;
}

p,
a,
h1,
h2,
h3,
h4,
h5,
dt,
dd,
input,
textarea {
  font-family: var(--main-font);
  font-weight: ;
  color: ;
}

p{
  font-weight: 400;
  line-height: var(--lineheight-18);
  letter-spacing: var(--letter-space-005);
}

a{
  font-weight: 600;
  letter-spacing: var(--letter-space-005);
  transition: 0.3s;
}

h2 {
  font-size: 28px;
  font-style: italic;
  font-weight: 600;
  line-height: var(--lineheight-28);
}

.small{
  font-size: 14px;
}

@media (min-width: 540px) {
  h2 {
    font-size: 36px;
  }

}

@media (min-width: 760px) {
  h2 {
    font-size: 48px;
  }

}

span {
  display: block;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
}

.scroll_fade_up{
  opacity: 0;
}

/*****************************
header
*****************************/

#top .header_outer{
  width: 100%;
  height: 100vh;
  max-height: 600px;
  background: transparent;
  transition: 0.3s;
  display: flex;
}


/*******
parallax
********/

.parallax {
  width: 100%;
  height: 100%;
  max-height: 600px;
  position: fixed;
  top:0;
  left:0;
  z-index: -9999;
}

.parallax::before {
  content:"";
  background-attachment: fixed;
  background-image: url(../../img/top/avalon_top.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  z-index: -9999;
}

/*******
header_item
********/

#top .header_outer .header_items {
  margin: auto auto;
}

#top .header_outer .logo{
  width: 175px;
  transform-origin: 50% 50%;
  transform: scale(1.1);
  opacity: 0.6;
}

#top .header_outer .arrow {
  display: block;
	width: 50px;
  height: 50px;
	position: relative;
  margin: 30px auto 0;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

#top .header_outer .arrow span {
	position: absolute;
	display: block;
	top: 0%;
	left: 50%;
	width: 23px;
	height: 23px;
	border-right: 6px solid white;
	border-bottom: 6px solid white;
	transform: translate(-50%, -50px)rotate(45deg);
}

@media(min-width:540px){
  #top .header_outer{
    max-height: 750px;
    transition: 0.3s;
  }

  .parallax {
    max-height: 750px;
  }

  #top .header_outer .logo{
    width: 225px;
  }
}

/*
top animation
*/

#top .header_outer .logo.load_minimum.is_show{
  opacity: 1;
  transform: scale(1);
  transition: 1s;
}

#top .header_outer .arrow.load_fade.is_show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%);
}

#top .header_outer .arrow.load_fade.is_show span{
  transform: translate(-50%, 0)rotate(45deg);
  transition: 1s;

}

/*****************************
main
*****************************/

/******
#top_product
******/

#top_product{
  width: 100%;
  background: white;
  padding: 70px 5% 60px;
}

#top_product .container{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#top_product .container .product_info{
  margin-top: 40px;
}

#top_product .container .product_info .info_text{
  margin-top: 10px;
}

#top_product .container .product_info .info_link{
  margin-top: 40px;
  width: 100%;
}

#top_product .container .product_info .info_link a{
  width: 100%;
  height: 53px;
  line-height: 53px;
  font-size: 15px;
  text-align: center;
  color: white;
  background: var(--main-colour);
  border: 1px solid var(--main-colour);
  transition: 0.3s;
}

#top_product .container .product_info .info_link.active a{
  color: var(--main-colour);
  background: white;
  border: 1px solid var(--font-colour);
  transition: 0.3s;
}

@media(min-width:760px){

  #top_product{
    padding: 100px 5% 100px;
  }

  #top_product .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
  }

  #top_product .container .product_img{
    width: 50%;
  }

  #top_product .container .product_info{
    width: 50%;
    margin-top: unset;
  }

  #top_product .container .product_info .info_link{
    width: 150px;
  }
}

/******
#top_insta
******/

#top_insta{
  background-image: url(../../img/top/top_insta.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height:460px;
  padding: 0 5%;
  display: flex;
  position: relative;
}

#top_insta::after {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#top_insta .insta_info{
  margin: auto 0;
  width: 100%;
  max-width: 1000px;
  z-index: 200;
}

#top_insta .insta_info .info_title{
  color: white;
}

#top_insta .insta_info .info_text{
  color: white;
  margin-top: 10px;
}

#top_insta .insta_info .info_link {
  margin-top: 40px;
  width: 100%;
}

#top_insta .insta_info .info_link a{
  width: 100%;
  height: 53px;
  line-height: 53px;
  font-size: 15px;
  text-align: center;
  color: var(--font-colour);
  background: white;
  border: 1px solid white;
  transition: 0.3s;
}

#top_insta .insta_info .info_link.active a{
  color: white;
  background: transparent;
  border: 1px solid white;
  transition: 0.3s;
}

@media(min-width:760px){

  #top_insta .insta_info{
    margin: auto auto;
  }

  #top_insta .insta_info .info_link{
    width: 150px;
  }
}

/*****************************
footer
*****************************/

.footer_outer{
  width: 100%;
  padding: 80px 5% 20px;
  background: var(--main-colour);
  color: white;
}

/******
footer_logo
******/

.footer_outer .footer_logo{
  margin: 0 auto;
  width: 254px;
}

.footer_outer .footer_logo a img{
  transition: 0.3s;
}

.footer_outer .footer_logo a:hover img{
  opacity: 0.6;
  transition: 0.3s;
}

/******
footer_links
******/

.footer_outer .footer_links{
  width: 100%;
  max-width: 500px;
  margin: 30px auto;
}

.footer_outer .footer_links .footer_link{
  width: 100%;
}

.footer_outer .footer_links .footer_link:nth-child(2){
  margin-top: 20px;
}

.footer_outer .footer_links .footer_link a{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid white;
  font-weight: 600;
  letter-spacing: var(--letter-space-01);
  transition: 0.3s;
}

.footer_outer .footer_links .footer_link.active a{
  border: 1px solid white;
  color: var(--main-colour);
  background: white;
  transition: 0.3s;
}

/******
footer_mail
******/

.footer_outer  .footer_mail{
  margin-top: 50px;
  text-align: center;
}

.footer_outer  .footer_mail p:not(.small){
  font-size: 20px;
  transition: 0.3s;
}

.footer_outer  .footer_mail .mail_link{
  margin: 20px auto 0;
  width: 200px;
}
.footer_outer  .footer_mail .mail_link i{
  margin-right: 5px;
}

.footer_outer  .footer_mail .mail_link a{
  width: 100%;
  margin: 20px auto 0;
  height: 56px;
  line-height: 56px;
  border: 1px solid white;
  transition: 0.3s;
}

.footer_outer  .footer_mail .mail_link.active a{
  border: 1px solid white;
  color: var(--main-colour);
  background: white;
  transition: 0.3s;
}

.footer_outer  .footer_mail .fax{
  margin-top: 20px;
  font-size: 20px;
}

/******
footer_copy
******/

.footer_outer  .footer_copy{
  margin-top: 40px;
}

.footer_outer  .footer_copy .copy{
  font-size: 13px;
  text-align: center;
}

@media(min-width:760px){

.footer_outer  .footer_mail p:not(.small){
  font-size: 24px;
}
}