@charset "UTF-8";
/* CSS Document */


/*  update 22.06.22  */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;500&display=swap');


/*-------------------------------------------------------
BASE
-------------------------------------------------------*/
html { font-size: 62.5%; scroll-behavior: smooth;}
body { font-family:'Noto Sans JP', serif; color: #111; text-align: center; counter-reset: count-number; overflow-x: hidden; line-height: 0; margin: 0; background: #F6F6F6; }

a {	text-decoration: none; outline: none;}
.cf:before,.cf:after {	display: table;	content: " ";}
.cf:after {	clear: both;}

::selection{ background: #111; color: #FFF;}
::-moz-selection{ background: #111; color: #FFF;  }

img { -webkit-backface-visibility: hidden;}
* {
    box-sizing: border-box; 
    margin: 0px; padding: 0px;}


.pc { display: inherit !important; }
.sp { display: none !important; }

a { color: #00afe9; transition: 0.3s; word-break: break-all;}
a:hover { color: #0079e9; transition: 0.3s;}

/*-------------------------------------------------------
COMMON
-------------------------------------------------------*/
#wrapper { width:100%; height: 100vh; text-align: center; background: #F6F6F6; font-size: 1.6rem; line-height: 3.0rem;}


/*----- animation -----*/
.ani-scrl { opacity: 0; transform: translate3d(0, 40px, 0); transition: all 1.8s ease;}
.ani-scrl.active1 { opacity: 1; transform: translate3d(0, 0, 0);}
.ani-scrl-2 { opacity: 0; transform: translate3d(0, 60px, 0); transition: all 1.6s ease;}
.ani-scrl-2.active2 { opacity: 1; transform: translate3d(0, 0, 0);}
.ani-scrl-3 { opacity: 0; transform: translate3d(0, 70px, 0); transition: all 2.2s ease;}
.ani-scrl-3.active3 { opacity: 1; transform: translate3d(0, 0, 0);}
.ani-scrl-4 { opacity: 0; transform: translate3d(0, 80px, 0); transition: all 2.6s ease;}
.ani-scrl-4.active4 { opacity: 1; transform: translate3d(0, 0, 0);}
.ani-scrl-5 { opacity: 0; transform: translate3d(0, 90px, 0); transition: all 3.0s ease;}
.ani-scrl-5.active5 { opacity: 1; transform: translate3d(0, 0, 0);}


/*-------------------------------------------------------
TOP
-------------------------------------------------------*/
#top { position: relative; width: 100%; text-align: center;  padding: 0; background: #F6F6F6;}
#head_nav { position: fixed; min-width: 1200px; width: 100%; top: 20px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0 auto 10px; padding: 10px 0 0; z-index: 3; transition: all .2s ease;}
.nav { position: absolute; top: 0; right:2%; }
.nav_btn { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.8rem; line-height: 3.0rem; position: relative; display: inline-block; overflow: hidden; transition: ease .2s; margin: 0 10px; text-align: center; }
.nav_btn a { color: #111; padding: 10px 30px; } 
.nav_btn a:hover span { color: #FFF; }
.nav_btn span { position: relative; z-index: 3; }
.nav_btn a:before { content: ''; position: absolute; bottom: 0; left: 0; background:  #111; width: 100%; height: 0; transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;}
 .nav_btn a:hover:before{ height: 100%; background: #111; color: #FFF; z-index: 3;} 
.nav_arom { display: inline-block; margin: 0 0 0 10px; font-size: 1.6rem;}
.logo_catch { position: absolute; width: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 100px auto 100px; vertical-align: top;}
.logo { display: inline-block; position: absolute; top: 0; left: 14%; width: 270px; text-align: left; transition: all 1s ease;}
.logo img { width: 100%; height: 100%; transition: all 1s ease;}
.logo.isSmall { display: inline-block; position: absolute; top: -100px; left: 4%; width: 80px; transition: all .8s ease;}
.catch { position: absolute; top: 0; left: 14%; display: inline-block; font-size: 2.4rem; letter-spacing: .5rem; margin: 50px 0 0 350px; vertical-align: top; }

#head_nav:after { content: ""; display: block; min-width: 1200px;}
#head_nav.fixed { top: 10px;}
#head_nav.fixed .nav_btn { font-size: 1.7rem; line-height: 3.0rem; }
#head_nav.fixed .logo_catch { width: 100%;}
#head_nav.fixed .nav_btn { margin: 0;}



.slide_read { width: 100%; height: 100%; margin: 340px 0 0; }
.slide { display: inline-block; width: 55.714%; height: auto; z-index: 1; transition: all .3s; }
.slide img { width: 100%; height: 100%; transition: all .3s;}
.read { width: 46%; text-align: left; margin: 30px 0 0 -5.14%; padding: 50px 40px; background: #FFF; z-index: 2;  transition: ease .2s;}
.r_txt_01 { font-size: 2.8rem; line-height: 3.8rem; margin: 0 0 40px;}
.r_txt_02 { font-size: 1.8rem; line-height: 4.2rem;}
.bg { width: 100%; height: 100%; position: relative; line-height: 0; margin: 0; padding: 0;}
.bg_01 { width: 100%;}



.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from { opacity: 0; position: fixed; top: 10px; left: 4%; width: 50px;transition: ease 1s;}
  to { opacity: 1; transition: ease 1s;}
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration: .4s;
animation-fill-mode:forwards;
opacity:0;}
@keyframes fadeUpAnime {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

.fadeUp2 {
animation-name:fadeUpAnime2;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;}
@keyframes fadeUpAnime2 {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.fadeUp2_2 {
animation-name:fadeUpAnime2_2;
animation-duration: .2s;
animation-fill-mode:forwards;
opacity:0;}
@keyframes fadeUpAnime2_2 {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

.fadeUp3 {
animation-name:fadeUpAnime3;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;}
@keyframes fadeUpAnime3 {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}



.fadeLeft {
animation-name:fadeLeftAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime {
  from { opacity: 1; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeLeft2 {
animation-name:fadeLeftAnime2;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime2 {
  from { opacity: 1; transform: translateX(-200px); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from { opacity: 1; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeRight2{
animation-name:fadeRightAnime2;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime2{
  from { opacity: 1; transform: translateX(200px); }
  to { opacity: 1; transform: translateX(0); }
}




.con_inner { max-width:1200px; margin: 0 auto; text-align: center;}
.con_ttl { font-family: 'Montserrat', sans-serif; font-size: 5.8rem; font-weight: 600; letter-spacing: .2rem;}

/*-------------------------------------------------------
ABOUT
-------------------------------------------------------*/
#about { background: #efeae3; text-align: center; position: relative; }
#about .con_inner {  padding: 10vh 0 20vh;}
#about .con_ttl { text-align: left; margin: 30px 2% 70px;}
.company { text-align: left; margin: 0 0 0 130px; z-index: 2; }
.link { margin: 30px 0 0 240px; padding: 0 0 20px; z-index: 2;}
.con_txt { margin: 10px 0; font-size: 1.8rem; line-height: 2.8rem; text-align: left;}
.sircle_01 { position: absolute; top:24%; right: 0; z-index: 1;}

/*-------------------------------------------------------
BUSINESS
-------------------------------------------------------*/
#business { background: #e7dbcb;  text-align: center; position: relative; }
#business .con_inner { padding:10vh 0 20vh;}
#business .con_ttl { text-align: right; margin: 30px 2% 70px ;}
.works { text-align: right; width: 57%; float: right; z-index: 2;}
.sircle_02 { position: absolute; top:24%; left:4%; z-index: 1;}

/*-------------------------------------------------------
PROJECTS
-------------------------------------------------------*/
#project { background: #f6f6f6; text-align: center; position: relative;}
#project .con_inner { padding:  10vh 0 20vh;}
#project .con_ttl { text-align: left; margin: 30px 2% 70px;}
.arom_img { width: 100%; height: auto;}
.pjt_img { position: relative; width: 32%;}
.pjt_img img { width: 100%; height: 100%;}
.aromdil_logo { position: absolute; width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.aromdil_logo img { width: 1005; height: 100%;}

.arom_dii { display: block; border: solid 1px #b5b5b5; margin: 60px auto 20px; width: 90%;}
.arom_inner { margin: 40px 50px; text-align: left;}
.arom_info_logo { display: inline-block; width: 240px; margin: 30px 80px 0 40px; vertical-align: top; }
.arom_info_logo img { width: 100%; height: 100%;}
.arom_info_txt { display: inline-block; padding-bottom: 30px}
.arom_info { border-top: solid 1px #b5b5b5; padding: 30px 0 0;}
.info_inner { float: right; text-align: left;}
.info_ttl { font-weight: 600;}



.fadeUp3.delay-time02 { animation-delay: 0.2s;}
.fadeUp3.delay-time04{ animation-delay: 0.4s;}

#luxy { padding:  0 0 50vh;}


/*-------------------------------------------------------
CONTACT
-------------------------------------------------------*/
#contact { background: #b8b8b8; text-align: center; position: relative; display: block;}
#contact .con_inner { padding: 20px 0 20vh;}
#contact .con_ttl { margin: 30px 0 30px 0; font-size: 4.8rem;}

#contact .con_txt { text-align: center; font-size: 1.6rem; line-height: 3.4rem;}
#contact a { color: #111; text-decoration: underline; }
#contact a:hover { color: #666; text-decoration: none;}
.copy { font-size:1.3rem; line-height: 2.3rem; margin:  20px auto;}

/*-------------------------------------------------------

Media queries

-------------------------------------------------------*/
@media screen and (max-width: 1024px) {
html{ font-size: 62.5%;}
body{ font-size: 1.6rem; position: relative; left: 0; overflow-x: hidden; min-width:initial; -webkit-text-size-adjust: 100%;}
  
.pc { display: none !important; }
.sp { display: block !important; }

	
/*-------------------------------------------------------
COMMON SP
-------------------------------------------------------*/
#wrapper { font-size: 1.5rem; line-height: 2.5rem;}
	
	
/*-------------------------------------------------------
TOP SP
-------------------------------------------------------*/
#head_nav { position: inherit; top: 20px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); min-width: 100%; width: 100%; margin: 0 auto 10px;}
#head_nav:after { min-width: 100%;}
#navArea { z-index: 999;}

.slide_read { width: 100%; height: 100%; margin: 220px auto 0; }

.logo_catch { position: absolute; display: block; width: 100%; margin: 30px auto 30px; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.logo { display:block; position: absolute; width: 30%; left: 0; right: 0; z-index: 1; text-align: center; margin: 20px auto;}
	
.catch { display:block; position: absolute; top: 80px; left: 0; right: 0; font-size: 1.8rem; letter-spacing: .2rem; margin: 20px auto 20px;　width: 100%;  padding: 0 4%; }

.slide { display: block; width: 100%; }
.read { width: 90%; margin: 30px auto 30px; padding: 20px 5%; text-align: center;}
.r_txt_01 { font-size: 2.2rem; line-height: 3.4rem; margin: 0 0 20px;}
.r_txt_02 { font-size: 1.7rem; line-height: 2.8rem;}
.bg { width: 100%; height: 100%; position: relative; line-height: 0; margin: 0; padding: 0;}

.logo.isSmall { display: inline-block; position: absolute; top: 0; left: 4%; width: 20%; transition: all .8s ease;}
	
	
	
/*============
nav
=============*/
#nav { display: block; position: fixed; top: 0; right: -240px; bottom: 0; background: #FFF; width: 240px; overflow-x: hidden; -webkit-overflow-scrolling: touch; transition: .5s; z-index: 999;}
.open #nav { right: 0; z-index: 4;}
#nav .inner { padding: 25px;}
#nav .inner { list-style: none; margin: 0; padding: 0;}
#nav .inner li { position: relative; margin: 0; border-bottom: 1px solid #333;}
#nav .inner li a { display: block; color: #333; font-size: 14px; padding: 1em; text-decoration: none; transition-duration: 0.2s;}
#nav .inner li a:hover { background: #e4e4e4;}
	
.nav_btn_sp { position: relative; display: block; width: 100%; font-size: 1.8rem; line-height: 2.8rem; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0 auto; overflow: hidden;  transition: ease .2s;}
.nav_btn_sp a { color: #111; padding: 12px 30px; } 
.nav_btn_sp a:hover span { color: #FFF; }
.nav_btn_sp span { position: relative; z-index: 3;}
.nav_btn_sp a:before { content: ''; position: absolute; bottom: 0; left: 0; background:  #111; width: 100%; height: 0; transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;}
.nav_btn_sp a:hover:before{ height: 100%; background: #111; color: #FFF; z-index: 3;}

/*============
@keyframes
=============*/
@keyframes equalizer01 {  
	0% { width: 70%; }
  10% { width: 50%; }
  20% { width: 100%; }
  30% { width: 10%; }
  40% { width: 50%; }
  50% { width: 70%; }
  60% { width: 50%; }
  70% { width: 10%; }
  80% { width: 100%; }
  90% { width: 10%; }
  100% { width: 70%; }
}
@keyframes equalizer02 {
  0% { width: 30%; }
  10% { width: 20%; }
  20% { width: 40%; }
  30% { width: 10%; }
  40% { width: 20%; }
  50% { idth: 30%; }
  60% { width: 20%; }
  70% { width: 10%; }
  80% { width: 40%; }
  90% { width: 10%; }
  100% { width: 30%; }
}
/*============
.toggle_btn
=============*/
.toggle_btn { display: block; position: fixed; top: 10px; right: 4%; width: 50px; height: 30px; transform: translate(0, 0); transition: all .5s; cursor: pointer; z-index: 999;}
.open .toggle_btn { right: 260px;}
.toggle_btn span { display: block; position: absolute; left: 0; width: 30px; height: 2px; background-color: #111; transition: all .5s;}
.toggle_btn span:nth-child(1) { top: 5px;  width: 50px; animation: equalizer01 7000ms infinite;}
.toggle_btn span:nth-child(2) { top: 15px; width: 30px; animation: equalizer02 5000ms infinite; animation-delay: 0.33s;}
.toggle_btn span:nth-child(3) { top: 25px; width: 20px; animation: equalizer02 5000ms infinite;}
.open .toggle_btn span { background-color: #fff;  width: 30px;}
.open .toggle_btn span:nth-child(1) { transform: translate(0, 10px) rotate(-45deg); animation: unset;}
.open .toggle_btn span:nth-child(2) { opacity: 0; animation: unset;}
.open .toggle_btn span:nth-child(3) { transform: translate(0, -10px) rotate(45deg); animation: unset;}

/*============
#mask
=============*/
#mask { display: none;}
.open #mask { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: .8; z-index:3; cursor: pointer; transition: all .5s;}
/*============
main
=============*/
main { padding: 50px;}


	
.fadeLeft {
animation-name:fadeLeftAnime;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeLeft2 {
animation-name:fadeLeftAnime2;
animation-duration:1.6s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime2 {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(0); }
}

.fadeRight2{
animation-name:fadeRightAnime2;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime2{
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(0); }
}
	
	
	
.con_inner { max-width:100%; overflow-wrap: break-word;}
.con_ttl { font-size: 3.6rem; letter-spacing: .2rem;}
.con_txt { margin: 12px 0; font-size: 1.5rem; line-height: 2.5rem; }
	
/*-------------------------------------------------------
ABOUT SP
-------------------------------------------------------*/
#about .con_inner { width: 100%; padding: 30px 0;}
#about .con_ttl { margin: 0 4% 30px;}
.company { margin: 0 4% 0 5%; }
.link { margin: 30px 4% 0 10%; padding: 0 0 20px; }
.sircle_01 { display: none;}

/*-------------------------------------------------------
BUSINESS SP
-------------------------------------------------------*/
#business .con_inner { width: 100%; padding: 30px 4%;}
#business .con_ttl { text-align: left; margin: 0 0 30px;}
.works { text-align: left; width: 100%; float:inherit;}
.sircle_02 { display: none;}

/*-------------------------------------------------------
PROJECTS SP
-------------------------------------------------------*/
#project .con_inner { padding: 30px 4%;}
#project .con_ttl { margin: 0 4% 30px;}
.arom_img { width: 92%; height: auto; margin: auto;}
.pjt_img { position: relative; width: 32%;}
.pjt_img:first-child { width: 100%; margin: 0 0 10px;}
.pjt_img:nth-child(2), .pjt_img:nth-child(3) { width: 48%;}

.aromdil_logo { position: absolute; width: 60%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}


.arom_dii { display: block;  margin: 30px auto 20px; width: 100%;}
.arom_inner { margin: 20px 20px; }
.arom_info_logo { display:  block; width: 80%; margin: 30px auto 40px; text-align: center;}

.arom_info_txt {  padding-bottom: 30px}
.arom_info { padding: 20px 0 0;}





/*-------------------------------------------------------
CONTACT SP
-------------------------------------------------------*/
#contact .con_ttl { margin: 20px 0; font-size: 3.0rem;}
#contact .con_inner { padding: 10px 4% 65vh;}
#contact .con_txt { text-align: center; font-size: 1.4rem; line-height: 2.6rem;}






}