@charset "utf-8";

/* ベース リセット↓ */
html{
  font-size: 62.5%; /*ユーザー設定の文字サイズを正しく反映*/
}
*{
  box-sizing:border-box; /*余白や線を幅や高さに含める*/
}
img{
  max-width:100%; /*画像が親要素からはみ出すのを防ぐ*/
  height:auto;
}

body {
	font-size:1.6rem;/* 16px*/
	line-height: 2em;
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,Arial,GEORGIA,sans-serif;
}

h1 {
	font-size: 36px;
	font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
	line-height: 1.3;
}
h2 {
	font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
	line-height: 1.3;
}

main {
  width: 100%;
}

.box{
  color: #000000;
  padding: 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
	overflow: hidden;
}

/* 文字の拡大 */
.animoZoom {
	display: inline-block;
	transition:transform .3s;
	cursor: pointer;
}
.animoZoom:hover {
  transform: scale(1.2);
}

/* ぽよぽよ動く */
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/* -- loading -- */
#loading-wrapper { 
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: url(../img/Loading3.gif)
  center/cover rgb(213, 254, 255);
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 9999;
} 

.completed {
  opacity: 0;
  visibility: hidden;
}

/* -- 👇header -- */
#header{
  color: #fff;
  text-align: center;
  align-items: center; /* 中の要素を上下中央に並べる */
  overflow: hidden;
}

/* -------- ↓ 背景スライドショー ---------- */
/* 共通クラス  */
.slider {
  width: 100%;
  height: 100%;
}

.slick__bg {
  padding-bottom: 16.5%;
  width: 100%;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
}

/* 背景部分（1枚ずつ） */
.slick__bg01 {
  background: url(../img/norikura1.jpg)
  bottom/cover;
}
.slick__bg02 {
  background: url(../img/hakone3.jpg)
  bottom/cover;
}
.slick__bg03 {
  background: url(../img/makino1.jpg)
  center/cover;
}
.slick__bg04 {
  background: url(../img/kyoto-morning.jpg)
  center/cover;
}
/* -------- ↑ スライドショー ---------- */

.top {
  position:absolute;
  left: 36%;
  top: 40%;
  color: #fff;
  z-index: 100;
  text-shadow: 6px 6px 8px black;
}

.top h1 {
  font-size: 56px;
}

.title {
  display: flex;
  overflow: hidden;
  color: #ffffff;
}
.title span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.title.-visible span {
  transform: translate(0, 0);
}
.title span:nth-child(2) {
  transition-delay: 0.08s;
}
.title span:nth-child(3) {
  transition-delay: 0.16s;
}
.title span:nth-child(4) {
  transition-delay: 0.24s;
}
.title span:nth-child(5) {
  transition-delay: 0.32s;
}
.title span:nth-child(6) {
  transition-delay: 0.40s;
}
.title span:nth-child(7) {
  transition-delay: 0.48s;
}
.title span:nth-child(8) {
  transition-delay: 0.56s;
}
.title span:nth-child(9) {
  transition-delay: 0.64s;
}
.title span:nth-child(10) {
  transition-delay: 0.72s;
}

.business {
  position: relative;
  display: flex;
  top: -220px;
  left: -20px;
}

#blog1 {
  display: none;
}

/* -- 👇Profile -- */
#box1{
  background: #fff8da;
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;
	justify-content: space-around;
}

#box1 h1 {
  text-align: center;
  margin: 0;
}

.policy, .profile, .qualification {
	text-align: center;
  margin: 8px;
  padding: 8px;
	background: rgb(255, 255, 255);
  box-shadow: 4px 4px 4px #bbbbbb;
}

.policy:hover , .profile:hover , .qualification:hover {
	background: rgb(141, 141, 141);
	color: floralwhite;
}

.policy {
  max-width: 400px;
  height: 180px;
  padding: 8px;
  border-radius: 24px;
}
.policy h2 {
  text-align: left;
}

.profile {
  max-width: 400px;
  height: 160px;
  padding: 8px;
  border-radius: 24px;
}
.profile p {
  text-align: left;
}

.qualification {
  text-align: left;
  padding: 16px 24px;
  border-radius: 24px;
	max-height: 380px;
}

.btn-stitch {
  display: inline-block;
  font-size: 32px;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-radius: 24px;
  box-shadow: 0px 0px 0px 5px #668ad8;
  border: dashed 1px #FFF;
}
.btn-stitch:hover {
  border: dotted 1px #FFF;
}
/* -- end of Profile -- */

/* -- 👇About -- */
#box2{
    background: rgb(252, 231, 230);
}

#box2 h2 {
  margin: 0;
  padding: 40px 0 16px;
  font-size: 40px;
  text-align: center;
}

#box2 h3 {
  margin-top: 40px;
  font-size: 32px;
  text-align: center;
}

/* スライダーの装飾 */
#double-slider{
	width:60%;
	margin: 0 auto;
}
#main-slide {
	margin: 0 auto;
	background: #FFF;
}
#main-slider img {
	width: 400px;
	height: 380px;
	margin-right: 1vw!important;
	margin-left: 1vw!important;
}
#text-slider{
	width: 60%;
	margin: 12px auto;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	border-radius: 20px;
	background: #ffcdee;    
}

/* -- end of About -- */

/* -- 👇work -- */
#box3{
    background: rgb(223, 247, 255);
}
#box3 h2 {
  text-align: center;
  padding: 0 12px;
}

/* .wrap {
  display: flex;
}

.work-area {
  display: grid;
  flex-wrap: wrap;
  width: 70%;
  grid-template-rows: 200px;
  grid-template-columns: 70%;
}

.work-box {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 200px;
  margin: 0 auto;
}

.work-box img {
  justify-content: center; 
}

.work-box p {
  text-align: right;
  margin: 0;
  padding: 0;
}

.work-box img:hover {
  opacity: 0.7;
}

.work-area2 {
  display: grid;
  width: 20%;
  grid-template-rows: 200px;
  grid-template-columns: 33%;
} */

.parent {
  margin-top: -16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 2px;
}

.parent  p {
  margin-top: -12px;
}

.gallery {
  margin: 16px auto 8px;
}

#Gallery-slider {
  margin: 0 -20px 12px;
  width: 100%;
}
#Gallery-slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height: 20vw;
  object-fit: cover;
}
#Gallery-slider ul{
  margin:0;
  padding: 0;
  list-style: none;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
#Gallery-slider .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}
/* -- end of work -- */

/* --  👇contact -- */
#box4{
	text-align: center;
	animation: bgchange 40s linear infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}
#box4 h2 {
  margin: 56px auto 0;
  padding: 40px 0 16px;
  font-size: 32px;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px #8d8d8d;
}

#box4 p {
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 4px #8d8d8d;
  margin-top: 20px;
}

#box4 p:nth-child(2) {
  font-size: 24px;
}

#box4 h3 {
  margin: 0;
  padding: 0;
  font-size: 40px;
  text-align: center;
}

#box4 a {
  color:inherit;
}

/*== ボタン共通設定 */
.btn-bgcenterout {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  /*ボタンの形状*/
  text-decoration: none;
  border-radius: 20px;
  display: inline-block;
  background: #FFF;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #555;/* ボーダーの色と太さ */
  padding: 16px 32px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/   
  transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn-bgcenterout span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.btn-bgcenterout:hover span{
  color:#fff;
}

/*== 背景が流れる（中央から外） */
.btn-bgcenterout:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: #333;
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 0);
  transform-origin:center;
}
/*hoverした際の形状*/
.btn-bgcenterout:hover:before{
  transform:scale(1, 1);
}

@keyframes bgchange{
      0%   {background:#7ca1f1;}/*変化させたい色*/
      18%  {background:#a4c7fc;}/*変化させたい色*/
      25%  {background:#ffbf83;}/*変化させたい色*/
      32%  {background:#ff9360;}/*変化させたい色*/
      39%  {background:#f8f86b;}/*変化させたい色*/
      67%  {background:#ff9360;}/*変化させたい色*/
      74%  {background:#ffbf83;}/*変化させたい色*/
      81%  {background:#a4c7fc;}/*変化させたい色*/
      89% {background:#7ca1f1;}/*変化させたい色*/
      100% {background:#7ca1f1;}/*変化させたい色*/
}
/* -- end of contact -- */

#footer{
  background:#ffffff;
  text-align:center;
}

/*========= ページネーションCSS ===============*/
.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#000000;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}
/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}		
}
/*========= 👆ページネーションCSS ===============*/

/* SP Screen */
@media screen and (max-width: 600px) {/* 600px以下*/
	body {
		line-height: 2;
	}
	h1 {
		font-size: 2.4rem;/* 24px*/
	}
	h2 {
		font-size: 2rem;/* 20px*/
	}

  /* -- header  --*/
  #header{
    width: 100%;
    height: 100%;
  }

  .top {
    left: 10%;
    top: 32%;
    padding: 0;
    margin-bottom: 0;
  }

  .top h2 {
    padding: 0;
    margin: 0;
  }

  .title span{
    font-size: 40px;
  }

  #blog1 {
    display: contents;
    z-index: 100;
  }

  .business {
    position: relative;
    display: flex;
    top: -180px;
    left: -14px;
  }

  /* -- ↑header  --*/

  /* section profile */
  .profile {
    font-size: 12px;
    padding: 4px 4px -20px;
    margin: 4px auto;
    line-height: 1;
  }

  .policy {
    font-size: 12px;
    padding: 4px;
    margin: 4px auto;
    border-radius: 24px;
  }
  .policy h2 {
    text-align: left;
    line-height: 1;
  }

  .qualification {
    font-size: 12px;
    padding: 4px;
  }

  .blog2 {
    display: none;
  }

  /* section About */
  #box2  h2 {
    margin-top: 8px;
    padding-top: 0;
  }
  #box2  h3 {
    font-size: 1.6em;
  }

  #main-slider {
    width: 98vx;
    height: 180px;
  }
  #main-slider img {
    width: 98vx;
    height: 180px;
    margin-right: 0.8vw!important;
    margin-left: 0.8vw!important;
  }
  #text-slider{
    width: 80%;
    font-size: 1.2em;
  }

  /* section work */

  .wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 240px;
  }

  .Work-area1 {
    display: flex;
    flex-direction: column;
  }

  #Gallery-slider {
    height: 300px;
  }

  /* section contact */
  #box4 h2 {
    margin-top: 4px;
    font-size: 28px;
    padding: 8px;
  }
  #box4 p {
    font-size: 12px;
  }
  #box4 h3 {
    padding: 0;
    font-size: 20px;
  }


  /* footer */
  small {
    position: fixed;
    bottom: 16px;
    right: 16px;
    color: black;
    letter-spacing: 0.1em;
    line-height: 1;
  }
}

/* PC Screen */
@media (min-width: 834px) {
  
	section {
    width: 100%;
    height: 100%;
  }

	main {
		width: 84%;
		margin: 0 auto;
		max-width: 1200px;
	}

	/* -- 👇Profile -- */
	#box1 {
		display: block;
		position: relative;
	}
	.policy {
		max-width: 400px;
		height: 300px;
		padding: 16px;
		border-radius: 24px;
		position: absolute;
		left: 2%;
		top: 36%;
	}
	.policy h2 {
		text-align: left;
	}
	.profile {
		max-width: 400px;
		height: 200px;
		padding: 16px;
		border-radius: 24px;
		position: absolute;
		left: 40%;
		top: 2%;
	}
	.profile p {
		text-align: left;
	}
	
	.qualification {
		padding: 16px;
		border-radius: 24px;
		position: absolute;
		right: 1%;
		top: 46%;
	}

	.btn-stitch {
		position: absolute;
		bottom: 4%;
		left: 38%;
	}
	/* -- 👆Profile -- */

  small {
    position: fixed;
    left: 16px;
    top: 40%;
    color: black;
    letter-spacing: 0.1em;
    line-height: 1;
    writing-mode: vertical-rl;
  }
}

@media (min-width: 1244px) {
	#box1{
		background-image: url(../img/Back.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}