@charset "utf-8";
/* ---------------------------------------------------
 Layout-Midium
--------------------------------------------------- */
@media only screen and (min-width:520px) and (max-width:960px){



	/*--------------------------------------------------------
	　　#header
	--------------------------------------------------------*/
	#header {
		margin: auto;    /* 左右中央（IE以外のブラウザ） */
		height: 65px;
		margin: 0 auto;
		width: 100%;
		position: relative;
		z-index: 40;
		background-color: #fff;/* 背景色 白 */
	}

	/*--------------------------------------------------------
	  固定ヘッダー
	--------------------------------------------------------*/

	#header{
	 position:fixed;
	}

	.headerBlock {
		width: 100%;
		height: 50px;
		margin:0 auto;
		padding: 0;
		position: relative;
		z-index: 40;
	}

	/* ヘッダーロゴ */
	.headerlogo{
		position: absolute;
		width: 300px;/* ロゴ幅 */
		top: 0px;
		left: 0px;
		padding: 30px 30px;
	}

	#nav {
		display: none;
	}


	.pcLayer,
	img.pcImg {
		display: none !important;
	}
	.spLayer,
	img.spImg {
		display: block !important;
	}


	/*========= 二本線　グローバルナビゲーション  クリックしたらナビが左から右に出現 ===============*/
	/*========= ナビ二本線 ===============*/
	.openbtn2{
		display: block;
	  position:fixed;
	  z-index: 9999;/*ボタンを最前面に*/
	  top: 16px;
	  left: 88%;
	  cursor: pointer;
	    width: 60px;
	    height:60px;
	}
	/*--------------------------------------------------------
	  スクロールダウン
	--------------------------------------------------------*/

	/*スクロールダウン全体の場所*/
	.scrolldown1{
	    /*描画位置※位置は調整*/
	  position:absolute;
	  left:15%;
	  bottom:30px;
	    /*全体の高さ*/
	  height:60px;
		z-index: 100;
	}

	/*========= アイコン　fb.twt.insta ===============*/
	.sns-icon-area{
		display: none;
	}
	.sns-icon-sp{
		display: block;

	  position: fixed;
	  top: 8%;
	  right: 6%;

	  z-index: 999;
	}
	.sns-icon{
	  margin-top: 30px;
	}
	.sns-icon-sp-container{
		width: 200px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;

		margin: 0 auto;
	}
	.sns-icon-item{
		width: 20px;
		margin-left: 17px;
	}

	/*--------------------------------------------------------
	  メインビジュアル
	--------------------------------------------------------*/
	#main-hero{
	}

	.main-pc{
		display: block;
	  width: 89%;
	  margin: 0 auto ;
	}

	.main-sp{
		display: none;
	}

	.main-mid{
		display: none;
	}

	.main-figure{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  z-index: 20;
	}
	.main-figure img{
	  opacity: 0.8;
	  width: 450px;
	}

	.main-tx{
	  position: absolute;
	  font-size: 30px;
	  top: 77%;
	  right: 8%;
	  z-index: 10;
	  color: #fff;
	  font-family:'Cormorant Garamond', 'Noto Serif JP', serif;
	  line-height: 1.4em;
	}

	.video-top{
	  width: 100%;
	  height: 90vh;
	  object-fit: cover;

	}
	.top-main-figure{

	  margin-top: -37%;
	  text-align: center;
	}
	.top-main-figure img{
	  width: 500px;
	  opacity: 0.8;
	}
	.main-v{
	      margin: 0 auto;
	  margin-left: 2%;
	  margin-right: 2%;

	}
	/*--------------------------------------------------------
	  スクロールダウン
	--------------------------------------------------------*/

	/*スクロールダウン全体の場所*/
	.scrolldown1{
	    /*描画位置※位置は調整*/
	  position:absolute;
	  left:10%;
	  bottom:50px;
	    /*全体の高さ*/
	  height:60px;
		z-index: 100;
	}
	/*Scrollテキストの描写*/
	.scrolldown1 span{
	    /*描画位置*/
	  position: absolute;
	  left:-15px;
	  top: -15px;
	    /*テキストの形状*/
	  color: #222;
	  font-size: 12px;
	  letter-spacing: 0.05em;
	}

	/* 線の描写 */
	.scrolldown1::after{
	  content: "";
	    /*描画位置*/
	  position: absolute;
	  top: 0;
	    /*線の形状*/
	  width: 1px;
	  height: 60px;
	  background: #222;
	    /*線の動き1.4秒かけて動く。永遠にループ*/
	  animation: pathmove 1.4s ease-in-out infinite;
	  opacity:0;
	}

	/*高さ・位置・透過が変化して線が上から下に動く*/
	@keyframes pathmove{
	  0%{
	    height:0;
	    top:0;
	    opacity: 0;
	  }
	  30%{
	    height:40px;
	    opacity: 1;
	  }
	  100%{
	    height:0;
	    top:60px;
	    opacity: 0;
	  }
	}

	/*========= アイコン　fb.twt.insta ===============*/
	.sns-icon-area{
	  position: fixed;
	  top: 70%;
	  left: 1.2%;
	  z-index: 999;
	  width: 20px;
	  height: 20px;
		display: block;

	}
	.sns-icon{
	  margin-top: 30px;
	}
	.sns-icon-sp{
		display: none;
	}

	/*========= 左 copyright ===============*/
	.main-copyright{
	  position: absolute;
	  top: 40%;
	  left: 1.5%;

	  writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;

	  font-size: 12px;

	}

	/*--------------------------------------------------------
	  concept
	--------------------------------------------------------*/

	#concept-area{
	  width: 100%;
	}
	.concept-container{
	  width: 500px;
	  margin: 100px auto 60px;
	}
	/* 本文 */
	.concept-copy{
	  font-size: 16px;
	  line-height: 2em;
	  text-align: justify;
	}

	/*--------------------------------------------------------
	  サービス
	--------------------------------------------------------*/
	#services-area{
	  margin-top: 50px;
	  height: 840px;
	    width: 100%;
	    background: rgb(230,242,255,);
	    background: linear-gradient(90deg, rgba(230,242,255,1) 0%, rgba(194,217,242,1) 40%, rgba(170,222,230,1) 100%);
	}
	.services-content{
	  width: 100%;
	  margin: 0 auto;
	  padding-top: 20px;
	}
	/* タイトル */
	.services-ttl{
	  padding-top: 40px;
	  width: 90%;
	  margin: 0 auto;
	}

	/* インナー */
	.services-inner{
	  position: relative;
	  margin-top: 40px;
	}
	.services-inner-left{
	  width: 65%;
	    z-index: 10;
	}
	.services-inner-left img{
	  width: 100%;
	  height: 300px;
	  object-fit: cover;
	    z-index: 10;
	}
	.services-inner-right{
	  position: absolute;
	  width: 65%;
	  top: 240px;
	  left: 30%;
	  background: #fff;
	  border-top: solid 6px #007daa;
	  z-index: 20;
	}

	/*----- テーブル設定 -----*/
	.services-index{
	  background: #fff;
	  width: 90%;
	}

	.table-services{
	    margin: 0 auto;
	    margin-top: 20px;
	  width: 100%;
	  border-collapse: collapse;
		margin-left: 20px;
	}

	/*----- th 左項目 アイコン -----*/
	.table-services th{
	  width: 15%;
	  padding: 15px;

	}

	/*----- td 右項目 テキスト -----*/
	.table-services td{
	  font-size: 24px;
	  width: 70%;
	  text-align: left;
	  padding-top: 20px;
	  padding-left: 20px;

	  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	  color: #007daa;
	}

	.services-detail{
	  font-size: 16px;
	  color: #555;
	  margin-top: 10px;
	  font-family: 'Oswald', sans-serif;
	}

	/* more */
	.services-more{
	    padding: 20px;
	    padding-left: 280px;
	    padding-bottom: 40px;
	}
	.services-container-icon{
	  width: 70px;
	}


	/*--------------------------------------------------------
	  強み
	--------------------------------------------------------*/
	#feature-area{
	  width: 100%;
	  height: 700px;
	  margin-top: 100px;
	  position: relative;
	}
	.feature-content{
	  position: relative;
	  width: 90%;
	  margin: 0 auto;

	}
	.feature-ttl{

	}
	.feature-container{
	  width: 100%;
	}
	/* 左　テキスト */
	.feature-left{
	  margin-top: 60px;
	}
	.feature-item{
	  padding: 20px;
		padding-left: 30px;
	  background: #fff;
	  margin: 10px;
	  width: 550px;
	  font-size: 24px;
	  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	  color: #007daa;
	  border-left: solid 6px #ffc06e;
	}
	.feature-item-s{
	  margin-top: 10px;
	  font-size: 16px;
	  color: #555;
	  line-height: 1.8em;
	  font-family: sans-serif;
	}

	/* 右　画像 */
	.feature-right{
	  width: 70%;

	  position: absolute;
	  right: 0;
	  top: -20px;
	  z-index: -10;
	}
	.feature-right img{
	  height: 700px;
	  object-fit: cover;
	  opacity: 0.5;
	}

	.feature-more{
	  margin: 50px auto;
	  margin-bottom: 100px;
	  width: 200px;
	  font-size: 16px;
	}

	/*--------------------------------------------------------
	  メッセージ
	--------------------------------------------------------*/
	#message-area{
	  width: 100%;
	  height: 830px;
	  margin-top: 60px;
	}
	.message-content{
	  position: relative;
	}
	.message-container{
	  width: 100%;
	  margin: 0 auto;

	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: space-between;

	}
	.message-figure{
	  width: 50%;
	}
	.message-ttl{
	  margin: 20px;
	  margin-top: 20px;
	  width: 40%;
	}
	.message-catch{
	  font-size: 20px;
	  margin-top: 20px;
	  line-height: 1.6em;
	  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	  color: #007daa;
	}
	.message-txt{
	  position: absolute;
	  top: 220px;
	  right: 0;
	  background: rgb(230,242,255,);
	  background: linear-gradient(90deg, rgba(230,242,255,0.8) 0%, rgba(194,217,242,0.8) 40%, rgba(170,222,230,0.8) 100%);

	  padding: 30px;
	  width: 60%;
	}
	.message-txt p{
	  font-size: 16px;
	  line-height: 1.8em;
	  width: 100%;
	  text-align: justify;
	  letter-spacing: 0.05em;
	}

	/*--------------------------------------------------------
	  オフィス　イメージ
	--------------------------------------------------------*/
	.office-area{
	  margin-top: 200px;

	}
	.office-container{
	  width: 90%;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: center;

	  margin: 80px auto;
	}
	.office-sight{
	  width: 40%;
	  margin: 20px;
	}

	/*--------------------------------------------------------
	  植物イラスト
	--------------------------------------------------------*/
	.plant-figure{
	  width: 100%;
	  opacity: 0.6;
	  margin-bottom: 50px;

	}
	.plant-figure img{
	  height: 200px;
	  object-fit: cover;
	}

	/*--------------------------------------------------------
	  ニュース
	--------------------------------------------------------*/
	#news-area{
	  width: 100%;
	  height: 500px;
	  margin: 20px auto 50px;
	  position: relative;
	}
	.news-ttl{

		margin-left: 20px;
		margin-bottom: 20px;
	}
	.news-inner{
	  width: 85%;
		margin: 0 auto;
	}
	.news-inner-item{
	  line-height: 4em;
	  background: #fff;
	}
	.more-news{
	  margin: 0 auto;
	  text-align: center;
	  margin-top: 60px;
	  font-size: 16px;
	}
	.news-contents{
	  width: 100%;
	  position: relative;
	  margin: 0 auto;
	}
	.news-block{
	  width: 90%;
	  margin: 40px auto;

	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    justify-content: space-between;
	}
	.news-backimage{
	  position: absolute;
	  top: -60px;
	  z-index: -10;
	    width: 100%;
	}
	.news-backimage img{
	  opacity: 0.2;
	  height: 550px;
	  object-fit: cover;
	}
	/*--------------------------------------------------------
	  instagram
	--------------------------------------------------------*/
	.instagram-container{
	  width: 90%;
		height: 90%;
	  margin: 0 auto;
	}


	/*--------------------------------------------------------
	  実績事例
	--------------------------------------------------------*/

	#colum-area{
	  width: 100%;
	  margin-top: 50px;
	}
	.colum-content{
	  width: 90%;
	  margin: 0 auto;
	}
	.colum-container{
		width: 100%;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  margin: 40px auto;
	}

	.colum-inner{
	  width: 20%;
	  margin: 10px;
	}
	/*　透過　*/
	.colum-inner  img {
		width: 150px;
		height: 150px;
	  opacity:1;
	  transition: .3s ease-in-out;
	}
	.colum-inner:hover img {
		opacity:0.5;
	}

	.colum-inner-tx{
	  text-align: left;
	  margin-top: 20px;
	  font-size: 16px;
		line-height: 1.5em;
	}

	.colum-more{
	  width: 200px;
	  margin: 60px auto;
	  font-size: 16px;
	}


	/*--------------------------------------------------------
	  プロフィール
	--------------------------------------------------------*/

	#profile-area{
	  width: 100%;
	  background: #f6f6f6;
	}
	.profile-container{
	  width: 90%;

	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: center;

	  margin: 40px auto 0 auto;
	  padding-top: 60px;
	  padding-bottom: 40px;

	}
	.profile_block{
	  width: 45%;
	  margin: 10px;
	}
	.profile_pic img{
	  height: 250px;
	  object-fit: cover;
	}
	.profile_ttl{
	  font-size: 24px;
	  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	  color: #333;
	  margin-top: 15px;
	}

	/*　透過　*/
	.profile_block  img {
	  opacity:1;
	  transition: .3s ease-in-out;
	}
	.profile_block:hover img {
		opacity:0.5;
	}


	/*--------------------------------------------------------
	  コンタクト
	--------------------------------------------------------*/
	#top-contact{
	}
	.top-contact_block{
	  width: 500px;
	  margin: 80px auto;
	  background: #ffc06e;
	}

	.top-contact_block:hover{
	  opacity: 0.6;
	}

	.top-contact_ttl{
	  font-size: 24px;
	  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
	  text-align: center;
	  color: #333;
	  padding: 30px;
	  padding-top: 40px;

	}

	/*--------------------------------------------------------
	  フッター
	--------------------------------------------------------*/
	.footer-nav-area{
	  width: 80%;
	  margin: 20px auto 40px;

	}

	/* ナビ項目 */
	#footer-nav {
		height: 25px;    /* 左右中央（IE以外のブラウザ） */
		padding: 0;    /* パディング */
		margin: 0 ;
		top:45px;/* 上の空き */
		right:0px;/* 右の空き */
	}


	#footer-nav ul {
		padding: 0px;
		margin: 0;
		list-style-type: none; /* リストマークの削除 */
	}


	#footer-nav ul li {
		height: 25px; /* リンク領域を広げる */
		margin-right: 15px;
	  margin-left: 15px;
		padding: 0px;
		float: left;
	}

	/* ナビ フォント指示 */
	#footer-nav a {
		display: block;
		padding: 0px;
		text-decoration: none;
		height: 25px; /* リンク領域を広げる */
	  font-family: 'notosansjp', sans-serif;
	  letter-spacing: 0.05em;
	  font-size: 16px;
	}

	#footer-nav a:hover {
		color: #c0c0c0;
	}


	.footer-container{
	  width: 90%;

	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  justify-content: center;

	  margin: 20px auto;
	  }

	.footer-left{
	  width: 45%;
	  margin-top: -5px;
	}
	.footer-logo{
	}

	.footer-right{
	  width: 40%;
	  margin-left: 40px;
	}

	.footer-address{
		line-height: 1.5em;
	  font-size: 16px;
	}

	.footer-tel{
	  font-size: 30px;
	  margin-top: 20px;
	  margin-bottom: 40px;
	  color: #ffc06e;
	  text-align: center;
	}

	.footer-access{
	  text-align: center;
	  font-size: 16px;
	  width: 100%;
	  border-top: solid 1px #ddd;
	  border-bottom: solid 1px #ddd;
	  margin: 40px auto;
	  padding: 20px;
	}

	.footer-copyright{
	  font-size: 14px;
	  letter-spacing: 0.02em;
	  text-align: center;
	  margin-bottom: 60px;
	}



}/* mid */