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

html {
	scroll-behavior: smooth;
}

body{
	margin: 60px 0 0 0;
	
	color:#707070;
	font-family:  "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	
}

h2{
	font-size: 50px;
	font-family: "bc-alphapipe", sans-serif;
	font-weight: 600;
	font-style: normal;
	margin: 20px 0px;
	text-align: center;
}
h4{
	font-size: 20px;
	font-family:sans-serif;
	font-weight: 600;
	font-style: normal;
	margin: 20px;
	text-align: center;
}

a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color:#707070;
}

#loading {
		background: #fff;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
}
#loading img {	
		height:10%;
		background: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 10;
}

#loading .hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

header {
	width: 100%;
	height: 60px;
	display:flex;
	align-items: center;
	background-color: #eee;
	position: fixed;
	top: 0;
	z-index: 3;
}

main{
	margin-top:60px;

}

.logo{
	margin-top: 10px;
	margin-left:2%;
	margin-right: auto;
	
}

.fadeIn {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:none;/*2で解説*/
animation-duration:3s;/*3で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0.5s;/*6で解説*/
animation-direction:normal;/*7で解説*/
	position: absolute;
}



/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.header ul  {
	margin-right:5%;
	text-align: right;
}

.header li{
	display: inline-block;
    list-style: none;
	margin-right:50px;

}

.hero {
  position: relative;
}

div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
padding:0px;/*ここで動画の周りの余白を調整*/
background: #e6e6e6;/*余白の背景色*/
}

video.vid_main {
width: 100%;
max-width: 100%;/*PC版での最大幅*/
}

.header-title{
	  position: absolute;
  top: 40%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.about{
	margin: 30px;
	text-align: center;
	line-height:200%
}

.about h3{
	font-size:30px;
	line-height:180%
}

@media screen and (max-width: 768px) {
.about h3 {
    font-size: 20px;
  }
}

.service{
	
	text-align: center;
	line-height:180%
}


.service ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 左寄せなら flex-start のままでもOK */
  gap: 20px; /* アイテム間の余白を指定 */
  margin-top: 60px; /* 上だけ余白 */
  padding: 0; /* 内側のズレをリセット */
}


.service ul h2{
	font-size: 25px;
}

.service  ul p{
	font-size:15px;
}

li{
 list-style: none;
  margin:auto;
	

}

li img{
	height: 100px;
}


.work{
	background-image: url(img/LINEsample.webp);
	background-position: center;
 	 background-size: cover;
 	 width: 100%;
 	 height: 100vh;
	
	
}

.contents{
	
	text-align: center;
	width:60%;
	height:60%;
	position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%); /* Safari用 */
   transform: translateY(-50%);


    margin: 0 auto;
	padding:10px;

   background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	
	
}

.text{
	text-align: center;
	position: relative;
    top: 50%;
   -webkit-transform: translateY(-50%); /* Safari用 */
   transform: translateY(-50%);
    margin: 0 auto;
	padding:10px;
}
.text h2{
	margin:-10px;
}



.button a {
    background: #bbbbbb;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	text-decoration: none;
}
.button a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button a:hover {
  background: #8DBEC3;
  color: #FFF;
}
.button a:hover:after {
  right: 1.4rem;
}

.profile{
	margin-top: 150px;
	line-height:180%;
	padding-bottom: 5%;
	text-align: center;

}

.profile h3{
	font-size: 30px;
	line-height:180%;
}






.profile-contents img{
	margin-top:50px;
	width:80%;
}
.price {
  background-color: #8DBEC3;
  color: #ffffff;
  padding: 50px 20px; /* 上下50px、左右20px */
  text-align: center;
}


.price .title{
	padding-top: 5%;
}


.price p {
  margin: 0 auto 30px auto; /* 下だけ余白 */
  max-width: 800px;         /* 横幅を制御して真ん中に */
  padding: 0;
  font-size: 15px;
}


ul.price_list{
  list-style:none;
  column-count: 2;
  column-gap: 40px;
   margin: 0 auto;     /* 自動で中央揃え */
  padding: 0 10px 30px;
  max-width: 800px;   /* 横幅を制御 */
}

ul.price_list li{
  display: inline-flex;
  padding-bottom: 8px;
  border-bottom: #eeeeee 1px dotted;
  margin-bottom: 8px;
  width: 100%;
  color:#ffffff;
}
ul.price_list li strong{
  font-weight:normal;
  color:#ffffff;
  margin-right:auto;
}
@media screen and (max-width: 768px) {
  .price {
    padding: 30px 15px;
  }

  .price p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  ul.price_list {
    column-count: 1; /* 縦並び */
    column-gap: 0;
  }
}


.contact{
	text-align: center;
	margin: 15% 10%;
}
.contact h2{
	margin-bottom: -10px;
}

.contact p{
	margin: 5% 0;
	line-height:180%;
}

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
	background:#eee;
list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#ccc;	
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  z-index: 1;
list-style:none;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}

footer{
	text-align: center;
	background-color: #8DBEC3;
	color: #ffffff;
	padding: 20px;
}