@charset "utf-8";
/* 変数を宣言し、格納する。 */
:root {
  --white: rgb(255, 255, 255) /*#fff*/;
  --black: rgb(0, 0, 0) /*#000*/;
  --sans_serif: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  --sans_serif_02: 游ゴシック, 游ゴシック体, 'Yu Gothic', YuGothic, sans-serif;
  --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
 }
 
 /* var()関数で変数を呼び出す。 */
 body {
  background-color: ver(--white);
  color: var(--black);
  font-family: var(--sans_serif);
 }
 
/* --------------------------------------------------スマートフォンCSS-------------------------------------------------- */

a{
  text-decoration: none;
  color: #000000;
	font-family: "Kiwi Maru";
	
}
.en{
	font-family: "Kiwi Maru";
}
h1{
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
}
h2{
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}



p{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

section{
  height: auto;
  padding-top: 20px;
  padding-bottom: 50px;
}

/*========= フィードアップアニメーション ===============*/
.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);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
    opacity: 0;
}




/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#ffffff;
text-align:center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
width:300px;
}

/* fadeUpをするアイコンの動き */

.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);
}
}



header {
  display: flex;
  background: #a18989;
  height: 60px;
}
.main-menu {
  margin: 0 auto;
  display: flex;
  width: 1280px;
}
.logo {
  text-align: center;
  padding: 18px;
  font-size: 24px;
  width: 200px;
  background: #a18989;
  color: white;
  p{
    color:white;
  }
}

 /* スマホ用メニュー */
.sp-menu__box {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background: #6d5b5b;
}
.sp-menu__box span,
.sp-menu__box span:before,
.sp-menu__box span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #ffffff;
  position: absolute;
}
.sp-menu__box span:before {
  bottom: 8px;
}
.sp-menu__box span:after {
  top: 8px;
}
#sp-menu__check {
  display: none;
}
#sp-menu__check:checked ~ .sp-menu__box span {
  background:#6d5b5b;
}
#sp-menu__check:checked ~ .sp-menu__box span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#sp-menu__check:checked ~ .sp-menu__box span::after {
  top: 0;
  transform: rotate(-45deg);
}
#sp-menu__check:checked ~ .sp-menu__content {
  left: 0;
}
.sp-menu__content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 80;
  background-color: #a18989;
  transition: all 0.5s;
}
.sp-menu__list {
  padding: 70px 10px 0;
}
.sp-menu__item {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.sp-menu__link {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
}
 /* PCメニュー非表示 */
.pc-menu {
  display: none;
}

/*==================================================
スライダーのためのcss	
===================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*========= レイアウトのためのCSS ===============*/

a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}

#slider h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

#slider h3{
  position: absolute;
  z-index: 2;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: capitalize;
  text-align: center;
  font-size:4vw;
  letter-spacing: 0.1em;
  color: #fff;
}

.wrapper{
  position: relative;
}










/*---------------------- スライドショーCSS ----------------------*/

.carousel-item {
	height: 90vh;
}
.carousel-item > img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-height: none !important;
	max-width: none !important;
	min-height: 100%;
	min-width: 100%;
  object-fit: cover;
}

.carousel-item a {
  display: block;
  width:100%;
}

.carousel-item .show-image {
  display: block;
  width:100%;
}
.carousel-item .img-fluid {
  width:100%;
  height:auto;
}

/*------------------------news-------------------------*/

.inner {
  background-color: #fff;
  margin: auto;
  padding: 30px 0px 50px 0px;
  width: 100%;
}


.sub_ttl {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
}


.news_list {
  margin: 0 5%;
}

.news_list_item { 
  padding: 25px 0;
  border-bottom: 1px solid #E6E6E6;
  color: #000000;
  list-style:none;

}

.news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
.news_list_item a {
 position: relative;
 display: flex;
 padding-right: 0px;
 text-decoration: none;

}

.news_list_date {
  font-size: 15px;
  display: flex;
  margin-right: 15px;
  align-items: center;
}

.news_item {
  background: #F6C6A2;
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 20px;
}
.news p{
	color:#2C2C2C;
}

.arrow {
  width: 25px;
  height: 1px;
  background: #707070;
  position: absolute;
  top: 50%;
  right: 0;
}

.arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 1px;
  background: #707070;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  bottom: 2px;
}

.arrow {
  display: none;
}

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}


/*===================スライダーのためのcss===============================*/


.photo_slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.photo_slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.photo_slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
  margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:5px;/*ドットボタンのサイズ*/
    height:5px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
.slick-track{
	padding-bottom: 30px;
}
.photo_slider ul{
  margin:0;
  padding: 0;
  list-style: none;
}

.photo_slider a{
  color: #333;
}

.photo_slider a:hover,
.photo_slider a:active{
  text-decoration: none;
}

.photo .inner{
	background-color: #EEEEEE;
}

/*-------------------ボタン------------------*/
.btn_17 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 200px;
	margin: auto;
	padding: 1rem 2rem;
	font-weight: bold;
	color: #27acd9;
	background: #e1f3f9;
	transition: 0.3s ease-in-out;
	border: none;
}
.btn_17::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #27acd9;
  transition: 0.2s;
}
.btn_17:hover {
	background: #27acd9;
	color: #fff;
}
.btn_17:hover::before {
  top: 0;
  left: 0;
}
/*========= カード ===============*/

.work_inner{
	display: flex;
}
.card_list{

  width: 80%;
  margin: auto;
  margin-bottom: 50px;

}

.card{
  width: 100%;
  text-align: center;
	display: flex;
	flex-direction: column;
    align-items: center;
}
.card-img-top{
	width: 50%;
}
.card-title{
	border-bottom: #fff;
	border-bottom-style: solid;
}

.circle-1,
.circle-2,
.circle-3 {
  color: #fff;
  padding: 5%;
/*
  width: 180px;
  height: 180px;
*/
  margin: 0 -8px;
  mix-blend-mode: multiply;
}
.circle-1 {
  background: #eb8787;
  border-radius: 30% 40% 20% 70%/20% 60% 70% 60%;
}
.circle-2 {
  background: #ffbb6c;
  border-radius: 90% 30% 50% 90%/20% 20% 30% 40%;
}
.circle-3 {
  background: #ffd856;
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}


/*========= Instagram ===============*/
.insta{
  width: 80%;
  margin: auto;
  margin-bottom: 150px;
}


.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta_icon{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta_icon:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}



/*========= アクセスマップ ===============*/
.map{
  width: 80%;
  margin: auto;
}

/*========= waveを描画するエリア設定 ===============*/


.wave{
  position: relative;
  background: #ffffff;
  height: 20vh;

}

.wave canvas{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;

}


    /* フッター */

footer{
  background-color: #a18989;
  color:#fff;
}


  /*--------------------------------------------------Profile.html--------------------------------------------------*/

  /*========= レイアウトのためのCSS ===============*/


h2,
#container p,
small{
  margin:0 0 30px 0;
}
.area{
  padding: 10px;

}
small{
  display: block;
  text-align: center;
}
/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#wrapper_prof{
  display: block;/*display:flex;を解除*/
}

/*左エリア*/
#fixed-area{
  /*左固定記述*/
  position: -webkit-sticky;/*Safari用*/
  top:0;
  position:relative;
  width:100%;/*横幅を100%にして1列に見せる*/
  height: 40vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
  /*装飾のためのCSS*/
  
  align-items: center;
  background:url(/html_test/img/profile.jpg) no-repeat center;
  background-size:cover;
  color:#fff;
}

section:nth-of-type(2n){
/*装飾のためのCSS*/
  background:#eee;
}

.prof{
  min-height:auto;/*縦を100vh⇒解除*/
}

#container{
  width:100%;/*横幅を100%にして1列に見せる*/
}


/*--------------------------------------------PhotoGallerey.html------------------------------*/
/*==================================================
フォトギャラリーのためのcss
===================================*/
.gallery{
  columns: 2;/*段組みの数*/
  padding:0 15px;/*ギャラリー左右に余白をつける*/
  }
  
  .gallery li {
      margin-bottom: 20px;/*各画像下に余白をつける*/
  }
  
  /*ギャラリー内のイメージは横幅100%にする*/
  .gallery img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
  }
  
  
  /*========= レイアウトのためのCSS ===============*/
  
  ul{
    margin:0;
    padding: 0;
    list-style: none;
  }
  /*
  a{
    color: #333;
  }
  */
  a:hover,
  a:active{
    text-decoration: none;
  }
  
  h1{
    text-align: center;
    font-size:6vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin:30px 0;
  }
  

  
  /*画像を出現させるアニメーションCSS*/
  
  .flipLeft{
  animation-name: flipLeft;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  perspective-origin: left center;
  opacity: 0;
  }
  
  @keyframes flipLeft{
    from {
     transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
    }
  
    to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    }
  }


#Photo_header h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
  text-align: center;
}


/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#Photo_header{
    /*headerを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 

#Photo_header:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background:url("../img/TOP_Slide03.jpg") no-repeat center;
  background-size:cover;
}

/*下の被さるエリアの指定*/
.photo{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#fff;
  text-align: center;
}







/*-----------------------------------------------------work.html-----------------------------------------------------------*/


.work_area{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-items: stretch;
    align-items: stretch;
}
.work_item{
	text-align: center;
}
.work_area a{
	color: #2C2C2C;
}
#work_header h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
  text-align: center;
}


/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#work_header{
    /*headerを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 

#work_header:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background:url("../img/TOP_Slide02.jpg") no-repeat center;
  background-size:cover;
}

/*下の被さるエリアの指定*/
.work{
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  background:#fff;
  text-align: center;
}




/*-----------------------------------------------------contact.html-----------------------------------------------------------*/

/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/

#contact_header{
    /*headerを全画面で見せる*/
  width:100%;
  height: 100vh;
  position: relative;
} 

#contact_header:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background:url("../img/contact.jpg") no-repeat center;
  background-size:cover;
}

#contact_header h1{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
  text-align: center;
}










  /*--------------------------------------------------タブレットCSS--------------------------------------------------*/
@media screen and (min-width: 600px) {
    /* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
   
    .pc-menu {
        display: none;
    }

    .news_list_item a  {
      font-size: 14px;
  }

  .arrow {
    width: 25px;
    height: 1px;
    background: #707070;
    position: absolute;
    top: 50%;
    right: 0;
  }
  
  .arrow::after {
    content: "";
    display: block;
    width: 6px;
    height: 1px;
    background: #707070;
    transform: rotate(45deg);
    position: absolute;
    right: 0px;
    bottom: 2px;
  }
  .arrow {
    display: block;
  }
  #wave canvas{
    height: 300px;
  }

  .card_list{
    display:flex;
    justify-content: center;
  }
	

  /*-----------------------Profile.html----------------------------*/
  
 
  /*左と右を囲う全体のエリア*/
  #wrapper_prof{
    position: relative;/*position stickyの基点にするため relativeをかける*/
      display: flex;/*左エリア、右エリア横並び指定*/
    flex-wrap: wrap;/*ボックスの折り返し可*/
  }

  /*左エリア*/
  #fixed-area{
    /*左固定記述*/
      position: -webkit-sticky;/*Safari用*/
      position: sticky;
    top:0;
    /*横半分50%　縦を100vhにする*/
    width: 50%;
    height: 100vh;
    /*装飾のためのCSS*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-size:cover;
    color:#fff;
  }

  /*右エリア*/
  #container{
    /*横半分50%にする*/
    width:50%;
  }
  /*右各セクション 装飾のためのCSS*/
  .prof{
    min-height: 100vh;
  }

  section:nth-of-type(2n){
  /*装飾のためのCSS*/
    background:#eee;
  }
  


.gallery{
  columns:3;
  } 





} /*タブレットCSS閉じ/





/* --------------------------------------------------PC CSS-------------------------------------------------- */
@media screen and (min-width: 1025px) {
    /* PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述 */
  .sp-menu{
    display: none;
  }
  .pc-menu {
    display: block;
  }
 /* PC用メニュー */
  .pc-menu {
    width: 100%;
  }
  .pc-menu > ul {
    display: flex;
    list-style: none;
  }
  .pc-menu > ul > li {
    text-align: center;
    font-size: 16px;
    width: 25%;
  }
  .pc-menu > ul > li > a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    line-height: 60px;
  }
  .pc-menu > ul > li > a:hover {
    background: #c3a6a6;
  }

  /* PC用news */
  .news_list_item a {
    padding-right: 30px;
  }

  .inner {
    width: 80%;
    background-color: #fff;
    padding: 30px 0 100px;
  }

  /* PC用 */
  .insta{
    width: 60%;
    margin: auto;
  }
  .wave{
    height: 30vh;
  }


  .gallery{
    columns:4;
    } 


}