/**********----- ここから フォント（Font） のスタイル定義 ----**********/

.source-sans-3-font {
  /* 指定したいフォントは source-sans-3 だが、source-sans-3が読み込まれるまでの時間のフォントも考慮して、ベースのフォントも下位の優先順位として設定している。 */
  font-family: "source sans 3", "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,verdana,Osaka;
}

.noto-sans-jp-font {
  /* 指定したいフォントは Noto Sans JP だが、Noto Sans JPが読み込まれるまでの時間のフォントも考慮して、ベースのフォントも下位の優先順位として設定している。 */
  font-family: "Noto Sans JP", "Noto Serif JP","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,verdana,Osaka;
}

/**********----- ここから フォント（Font） のスタイル定義 ----**********/



/**********----- ここから セクション（section） のスタイル定義 ----**********/

.section {
  padding: 90px 0;
}

.section__title {
  position: relative; /* 下線のスタイルでabsoluteを利用するための指定 */
  font-size: 25px;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 300;
  margin-bottom: 55px;
-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 下線用のスタイル */
.section__title::before {
  content: "";
  display: block;
  width: 50px;
  border-bottom: 1px solid #000000;
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  bottom: 0;
}

.contact__address:hover {
	background-color: #383838;
}

/**********----- ここまで セクション（section） のスタイル定義 ----**********/



/**********----- ここから 横幅（Container） のスタイル定義 ----**********/

.container.is-thin-width {
  width: 498px;
  margin: 0 auto;
}

.container.is-wide-width {
  width: 1080px;
  margin: 0 auto;
}

/**********----- ここから 横幅（Container） のスタイル定義 ----**********/



/**********----- ここから 背景画像（background-image） のスタイル定義 ----**********/

.background-image {
  height: 600px;
  width: 100%;
  background-size: cover;
  background-image: url("/images/loading/temporary-image.jpeg");
  opacity: 0;
  transition: opacity 5s;
	transition-timing-function: cubic-bezier(0.33, 0.01, 0.1, 1);
}

.background-image.is-active {
  opacity: 1;
}


/**********----- ここまで 背景画像（background-image） のスタイル定義 ----**********/



/**********----- ここから ヘッダー（header） のスタイル定義 ----**********/

.header {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 0;
  height: 112px;
  transition: background 0.2s;
}

.header.is-deepen {
  background: rgba(255, 255, 255, 1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.header.is-deepen .header__navigation-list-item-link {
  color: #4e4e4e;
}

.header.is-deepen .header__navigation-list-item.is-active::before {
  border-bottom: 1px solid #000;
}

.header.is-deepen .header__logo-image.is-white-logo {
  display: none;
}

.header.is-deepen .header__logo-image.is-color-logo {
  display: inline-block;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__container,
.header__logo-link,
.header__logo {
  height: 100%;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo-image {
  height: 72px;
}

.header__logo-image.is-color-logo {
  display: none;
}

.header__navigation

.header__navigation-list {
  display: flex;
  align-items: center;
}

.header__navigation-list-item + .header__navigation-list-item {
  margin-left: 38px;
}

.header__navigation-list-item.is-active {
  position: relative;
}

.header__navigation-list-item.is-active::before {
  content: "";
  display: block;
  width: 65px;
  border-bottom: 1px solid #FFF;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  position: absolute;
}

.header__navigation-list-item-link {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
	-webkit-font-smoothing: antialiased;
  transition: opacity, 0.2s, color 0.2s;
}

.header__navigation-list-item-link:hover {
  opacity: 0.7;
}

/**********----- ここまで ヘッダー（header） のスタイル定義 ----**********/


/**********----- ここから スライドショー（slide-show） のスタイル定義 ----**********/

.slide-show {
  position: relative;
}

.slide-show__image {
  height: 100vh; /* １ビュー丁度になるよう指定。 */
  background-size: cover;
  background-image: url("/images/loading/temporary-image.jpeg");
	opacity: 0;
  animation: fadeIn 4.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.slide-show__message {
  z-index: 50;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12%;
  background: #FFF;
  padding: 24px;
  border-radius: 3px;
}

.slide-show__message-content {
  font-size: 24px;
  line-height: 2.17;
  letter-spacing: 2.5px;
  font-weight: 500;
	-webkit-font-smoothing: antialiased;
	
}




/*scrolldownの記述*/
.scrolldown{
	position:absolute;
	left:50%;
	bottom: 10px;
	height:90px;
}

/*Scrollテキストの描写*/
.scrolldown span{
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0.05em;
	font-weight:600;
	text-shadow:0px 0px 8px #4A4A4A;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 100px;
	background: #ffffff;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}


@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
/**********----- ここまで スライドショー（slide-show） のスタイル定義 ----**********/

/* 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:130px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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




/**********----- ここから 人物説明（About） のスタイル定義 ----**********/

.about__head {
  display: flex;
  align-items: center;
  margin-bottom: 27px;
}


.about__head-image {
  margin-right: 32px;
  width: 130px;
  height: 130px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.about__head-name {
  font-size: 17px;」
  line-height: 1.40;
  letter-spacing: 1px;
  font-weight: bold;
	text-rendering: optimizeLegibility;
}

.about__introduction {
  font-size: 13px;
  line-height: 2.17;
letter-spacing: 1px;
  margin-bottom: 30px;
  color: #4e4e4e;
	text-rendering: optimizeLegibility;
}

.about__history + .about__history {
  margin-top: 30px;
}

.about__history-title {
  font-size: 14px;
  letter-spacing: 1px;
  color: #555555;
  font-weight: bold;
}

.about__history-list {
  margin-top: 13px;
}

.about__history-list-item {
  display: flex;
  align-items: flex-start;
letter-spacing: 1px;
  margin-bottom: 4px;
}

.about__history-time,
.about__history-text {
  font-size: 13px;
  line-height: 1.70;
  color: #4e4e4e;
}

.about__history-time {
  margin-right: 14px;
  white-space: nowrap;
}


/**********----- ここまで 人物説明（About） のスタイル定義 ----**********/





/**********----- ここから ポートフォリオ （portfolio） のスタイル定義 ----**********/

.portfolio__section + .portfolio__section {
  margin-top: 92px;

}



.portfolio__section-title {
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-weight: bold;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
		
}

.index {
  font-size: 20px;
	font-family: "Instrument Serif", serif;
   color: #555555;
	letter-spacing: 4px;
  font-weight: 400;
	margin-right: 2px;
  display: inline-block;
	
}


.portfolio__horizontal-container-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-left: -47px; /* containerごとにつけた左の余白を打ち消すためのもの */
  margin-bottom: -47px;
}

.portfolio__container + .portfolio__container {
  margin-top: 92px;
}

.portfolio__container.is-horizontal {
  margin-top: 0;
  padding-left: 47px;
  margin-bottom: 47px;
  width: 50%;
}

.portfolio__container-title {
  margin-bottom: 18px;
  color: #555555;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: bold;
}




.photo-portfolio {
  display: flex;
  flex-wrap: wrap;
  margin-left: -3px; /* itemごとにつけた左の余白を打ち消すためのもの */
  margin-top: -10px; /* itemごとにつけた上の余白を打ち消すためのもの */
}

.photo-portfolio__item {
  cursor: pointer;
  width: calc(100% / 8); /* 8分割 */
  padding-left: 5px;
  margin-top: 10px;
  transition: opacity 0.2s;
  max-height: 90px;
  text-align: center;
	transition: opacity 0.2s ease;
}




.photo-portfolio__item:hover {
  opacity: 0.4 !important;
	transition-duration: 0.15s;
}

.photo-portfolio__image {
  border-radius: 1px;
  height: 100%;
}





.video-portfolio__iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-portfolio__iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*** ここから portfolio-image-slide-show に関する記述 ***/

.portfolio-image-slide-show {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.2s, width 0s ease 0.2s;
}

.portfolio-image-slide-show.is-active {
  width: 100vw;
  opacity: 1;
  transition: opacity 0.2s;
}

.portfolio-image-slide-show__close-btn {
  cursor: pointer;
  position: absolute;
  top: -45px;
  right: -45px;
  width: 50px;
  height: 50px;
  padding: 10px;
}

.portfolio-image-slide-show__container {
  position: relative;
}

.portfolio-image-slide-show__container,
.portfolio-image-slide-show__collection {
  height: 80vh;
  max-width: 90vw;
}

.portfolio-image-slide-show__container {
  width: 1300px;
	
}

.portfolio-image-slide-in-js__inner,
.portfolio-image-slide-in-js {
  max-height: 80vh;
}

/* slickの設定の上書き */
.portfolio-image-slide-show .slick-list,
.portfolio-image-slide-show .slick-track {
  height: 80vh;
}

/* slickの設定の上書き */
.portfolio-image-slide-show .slick-track {
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-image-slide-in-js__inner {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-image-slide-in-js img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
}

.portfolio-image-slide-in-js__arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 55px;
  padding: 10px;
}

.portfolio-image-slide-in-js__arrow.is-left {
  left: -42px;
}

.portfolio-image-slide-in-js__arrow.is-right {
  right: -42px;
}





/**********----- ここまで ポートフォリオ （portfolio） のスタイル定義 ----**********/



/**********----- ここから ニュース（news） のスタイル定義 ----**********/

.news__list-item + .news__list-item {
  margin-top: 32px;
}

.news__time-field {
  display: block;
  margin-bottom: 4px;
}

.news__time-field,
.news__text-field {
  font-size: 14px;
  line-height: 2.17;
  letter-spacing: 1px;
  color: #555555;
}

/**********----- ここまで ニュース（news） のスタイル定義 ----**********/



/**********----- ここから 問い合わせ（Contact） のスタイル定義 ----**********/

.contact__description {
  font-size: 14px;
  line-height: 2.17;
  margin-bottom: 25px;
	
}

.contact__address {
	display: block;
	width: 50%;
	margin: 0 auto;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	padding: 8px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #555555;
	transition: 0.3s;
	
	}


	
	





/**********----- ここまで 問い合わせ（Contact） のスタイル定義 ----**********/



/**********----- ここから フッター（footer） のスタイル定義 ----**********/

.footer {
  padding: 32px 0 23px;
  background-color: #d5d5d5;
}

.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  font-size: 12px;
}

.footer__sns {
  display: flex;
  align-items: center;
}

.footer__sns-item + .footer__sns-item {
  margin-left: 10px;
}

/**********----- ここまで フッター（footer） のスタイル定義 ----**********/




/**********----- ここから SP用のスタイル定義 ----**********/

@media all and (max-width: 750px){
	
/**********----- ここからコンテンツ幅のスタイル定義 ----**********/
.container.is-thin-width {
  box-sizing: content-box;
  width: 84%;
	padding-left: 8%;
	padding-right: 8%;
}
	
	.container.is-wide-width {
  box-sizing: content-box;
  width: 100%;
	
}
/**********----- ここまでコンテンツ幅のスタイル定義 ----**********/
	
	
/**********----- ここからポートフォリオのスタイル定義 ----**********/
	
	.portfolio__section-title {
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-weight: bold;
  margin-left: 30px;
  margin-right: 30px; 
}
	
	
	

		
	
	
	.portfolio__container-title {
  margin-bottom: 15px;
  color: #555555;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: bold;
  margin-left: 30px;
  margin-right: 30px;
}
	
	
	
	
	.photo-portfolio__item {
  width: calc(100% / 3); /* 8分割 */
  padding-left: 3px;
		margin-left: 30px;
		margin-right: 30px;
  margin-top: 10px;
  transition: opacity 0.2s;
  max-height: 80px;
  text-align: center;
}
	
	
	
.portfolio__container.is-horizontal {
  margin-top: 0;
  width: 100%;
}
	

	
/**********----- ここまでポートフォリオのスタイル定義 ----**********/
	
.header__container,
.header__logo-link,
.header__logo {
  height: 100%;
	display:flex;
  flex-direction: column;
	
}

.header__logo {
  display: flex;
  align-items: center;
	
}

.header__logo-image {
  height: 55px;
}

.header__logo-image.is-color-logo {
  display: none;
}

.header__navigation

.header__navigation-list {
  display: flex;
  align-items: center;
}

.header__navigation-list-item + .header__navigation-list-item {
  margin-left: 20px;
}

.header__navigation-list-item.is-active {
  position: relative;
}

.header__navigation-list-item.is-active::before {
  content: "";
  display: block;
  width: 20px;
  border-bottom: 1px solid #FFF;
  transform: translateX(-50%);
  left: 40%;
  bottom: 0;
  position: absolute;
}

.header__navigation-list-item-link {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 500;
  transition: opacity, 0.2s, color 0.2s;
}

.header__navigation-list-item-link:hover {
  opacity: 0.7;
}

/**********----- ここからポートフォリオスライドショーのスタイル定義 ----**********/
	
.portfolio-image-slide-in-js img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 2px;
}
.portfolio-image-slide-show__close-btn {
  cursor: pointer;
  position: absolute;
  top: -15px;
  right: -20px;
  width: 45px;
  height: 45px;
  padding: 10px;
}
	
.portfolio-image-slide-in-js__arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 55px;
  padding: 10px;
}

.portfolio-image-slide-in-js__arrow.is-left {
  left: -27px;
}

.portfolio-image-slide-in-js__arrow.is-right {
  right: -27px;
}

	
	
/**********----- ここから スライドショー のスタイル定義 ----**********/
	
	.slide-show__image {
  height: 100vh; /* １ビュー丁度になるよう指定。 */
  background-size: cover;
  background-image: url("/images/loading/temporary-image.jpeg");
	
}
	
	/**********----- ここから メインコピーのスタイル定義 ----**********/

	
.slide-show__message {
  z-index: 50;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 6%;
  background: #FFF;
  padding: 10px;
  border-radius: 3px;
}

.slide-show__message-content {
  font-size: 13px;
  line-height: 2.17;
  letter-spacing: 2px;
  font-weight: 500;
	
}
	
	
	

	

	

/**********----- ここから 人物説明（About） のスタイル定義 ----**********/

.about__head {
  display: flex;
  align-items: center;
  margin-bottom: 27px;
}

.about__head-image {
  margin-right: 32px;
  width: 130px;
  height: 130px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.about__head-name {
  font-size: 15px;
  line-height: 1.70;
  font-weight: bold;
}

.about__introduction {
  font-size: 14px;
  line-height: 2.17;
  margin-bottom: 30px;
  color: #4e4e4e;
}

.about__history + .about__history {
  margin-top: 30px;
}

.about__history-title {
  font-size: 14px;
  letter-spacing: 1px;
  color: #555555;
  font-weight: bold;
}

.about__history-list {
  margin-top: 13px;
}

.about__history-list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
}

.about__history-time,
.about__history-text {
  font-size: 14px;
  line-height: 1.70;
  color: #4e4e4e;
}

.about__history-time {
  margin-right: 15px;
  white-space: nowrap;
}
	
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
	
	.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}
	
	.source-sans-3-<uniquifier> {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
	
	




/**********----- ここまで 人物説明（About） のスタイル定義 ----**********/
	
/**********----- ここから 背景画像（background-image） のスタイル定義 ----**********/

.background-image {
  height: 300px;
  width: 100%;
  background-size: cover;
  background-image: url("/images/loading/temporary-image.jpeg");
  opacity: 0;
  transition: opacity 4s;
}
	

.background-image.is-active {
  opacity: 1;
}
	
	/**********----- ここから フッター（footer） のスタイル定義 ----**********/

.footer {
  padding: 32px 0 23px;
  background-color: #d5d5d5;
}

.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  font-size: 10px;
	margin-left: 30px;
}

.footer__sns {
  display: flex;
  align-items: center;
	margin-right: 30px;
}

.footer__sns-item + .footer__sns-item {
  margin-left: 10px;
}
	
	

/**********----- ここまで フッター（footer） のスタイル定義 ----**********/


	

}