@charset "UTF-8";
/*
Theme Name: Norwegian Wood
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/



@import url("style-root.css") print;
@import url("style-nwmaster.css") print; 
@import url("css/event-calendar.css");

/* トップページ */
.slidergrid-template-areas:  {background: var(--main-color-light);}
.three-points {background: var(--main-color-light);}
.three-points .cell {text-align: center;}
.three-points img {padding:3rem;border-radius:50%;}
.three-points .cell .button-group {justify-content: center;}
.top-jisseki  {background: var(--sub-color-light);margin-top:3rem;}
.top-company {padding-bottom: 0;}
.top-company .kabuse, .top-company .image-box  {aspect-ratio: 1/1;}
.top-company .kabuse img {filter: brightness(90%) !important;}
/* タイトルエリア */
.title-area { 
background-position: bottom right;
}

/* 制作実績 */
/* 実績 */
/* 制作実績 */
.device-image.mba {
	background-image: url("images/mba1200760.png");
	background-size: cover;
	max-width: 1200px;
	width:100%;
	margin: 0 auto 2rem;
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	grid-template-rows: 2fr 15fr 2fr; 
}
.device-image.mba img {	grid-column: 2/-2;	grid-row: 2/-2;}

.jisseki-shortcut {	background:var(--gray-color-light);}
.jisseki-shortcut-accordion-title { font-size: .75rem;}
.jisseki-shortcut a, .jisseki-shortcut a:hover {color:var(--text-color) !important;}
.jisseki-category {margin-bottom: 1rem;padding:.5rem 1rem;border-radius:10px;background: var(--gray-color-light);display:flex;flex-wrap:wrap;gap:.25rem;}
.jisseki-category span.label {background: #fff; border:1px solid var(--border-color-dark);padding:0;}
.jisseki-category span.label a {color:var(--text-color) !important;display:block;padding:.5rem .5rem .25rem;transition: all 0.6s ease;}
.jisseki-category span.label a:hover {background: var(--main-color-light);}
/* 公開終了サイト */
#legacy-site {background:var(--gray-color);}
#legacy-site .site-link {display: none;}
#recent-site .site-list .cell:not(.device-image) {padding:1rem;}
#recent-site .site-list > div:first-child {width: calc(100% - 1.875rem);}
#recent-site .site-list > div:first-child {width: calc(100% - 16rem);margin:0 auto 2rem;}


/* 会社概要 */
.about-lookat {background: var(--main-color);}
/* サラダセット */
.salad-sa h3:first-letter { font-size: 3rem;color:#2E7D32;}
.salad-la h3:first-letter { font-size: 3rem;color:#d00;}
.salad-da h3:first-letter { font-size: 3rem;color:#FF6F00;}
/* 流れ */
.flow-chart .arrow {text-align: center;font-size: 3rem;}
.flow-chart .callout {margin-bottom: 0;}
/* 猫紹介 */
.catname {font-family: 'Cherry Bomb One', system-ui; }


/*====================================
ふわっ
===================================*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
	opacity: 0;
  }

  to {
	opacity: 1;
  }
}
/* セクション用 */

.fadeSection{
animation-name:fadeSectionAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeSectionAnime{
  from {
	opacity: 0;
  transform: translateY(50px);
  }

  to {
	opacity: 1;
  transform: translateY(0);
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
	opacity: 0;
  transform: translateY(100px);
  }

  to {
	opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
	opacity: 0;
  transform: translateY(-100px);
  }

  to {
	opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
	opacity: 0;
  transform: translateX(-100px);
  }

  to {
	opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
	opacity: 0;
  transform: translateX(100px);
  }

  to {
	opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
	opacity: 0;
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}

/* ============= ふわっ　end ======================= */

/* ticker用プログレスバー */
.bar {
  position: relative;
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 10px;
  margin: 10px auto 0;
  overflow: hidden;
}
.bar span {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1c469a;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: linear;
}


/*========= 子猫のフワフワ ===============*/
@keyframes fuwafuwa {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-1rem);}
}
.anime-fuwafuwa { animation: 3s fuwafuwa infinite;}

/* ========== Swiper smooth ======= */
.milk-slider .swiper-wrapper{
	transition-timing-function: linear !important;
}