@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|M+PLUS+Rounded+1c:300,400,700|Roboto+Slab:400,700|Satisfy');

body {
	width:100%;
	font: 100%/1.2;
	font-family: "M PLUS Rounded 1c", sans-serif, "筑紫B丸ゴシック","TsukuBRdGothic-Regular", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif!important;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #000;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
}

a img { 
	border: none;
}

a {outline:none;}

a:link {
	color:#505050;
	text-decoration: none;
}
a:visited {
	color: #9b9b9b;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	color:#7b99a8;
	text-decoration: none;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */
#container{
	width: 100%;
	max-width:960px;
	background-color: #FFF;
	text-decoration: none;
	margin:0 auto;
	padding: 0;
}

/* Responsive */
@media screen and ( max-width : 767px ){
    #container {
		width: 95%;
		margin:0 auto;
		overflow-x: hidden;
		min-width: 300px;
    }
}

/* ヘッダー */
#header{
	width:100%;
	display:flex;
	justify-content:space-between;
	margin:40px auto 20px;
    padding-right: 0;
}


.logo{
		width:20%;
		margin-right: auto;
}

.logo img{
		margin-top:0;
}

/* Responsive */
@media screen and ( max-width : 767px ){
    #header {
	width:90%;
	  overflow-x: hidden;
	  display:block;
	  margin:20px auto;
    }
	.logo{
		width:50%;
		marign:20px auto;
	}
	.logo img{
		width:100%;
		marign:0 auto
	}
}

/* メインナビ */

#globalnav{
	width:60%;
	margin: auto 0 0 auto;
}

#globalnav ul{
	display: flex;
	justify-content: flex-end;
	width:100%;
}

#globalnav li{
	margin: auto 0 auto 20px;
	border-left:dotted #8B7C29 2px;
	padding-left: 20px;
	text-align: center;
	width:16%;
}
#globalnav li img{
	width:100%;
}

#globalnav li:hover{
	opacity:0.7
}

.nav_mail{
	width:14%!important;
}

.nav_mail img{
	width:60%!important;
}

/* Responsive */
@media screen and ( max-width : 767px ){
	#globalnav{
	width:96%;
	margin: 10px auto;
	}
	#globalnav ul{
	justify-content: flex-start;
		flex-wrap: wrap;
	}
	#globalnav li{
	margin: 0 10px 10px 0;
	border-left:dotted #8B7C29 2px;
	padding-left: 20px;
	text-align: center;
	width:24%;
	}
	.nav_mail{
	width:10%!important;
	margin-bottom:auto!important;
	}
	.nav_mail img{
		width:80%!important;
		padding-top:15%;
	}
}


/* メインビジュアル */
.mainvisual{
	width:100%;
	margin:20px 0;
}

.mainvisual ul li{
	width:96%;
	margin: 0 auto;
}

/* Responsive */
@media screen and ( max-width : 767px ){
	.mainvisual{
	}
	.mainvisual ul li{
	width:96%;
	margin: 0 auto;
	}
	.mainvisual ul li img{
	height:50vh;
	object-fit: cover;
	}
}


/*サイカの仕事ここから*/
.work{
	margin: 40px auto 60px;
}
.work_title{
	display: block;
	margin: 20px auto;
	text-align: center;
	color:#64859f;
	font-size: 140%;
	padding-top:10px;
	border-bottom: none!important;
}
.work_title img{
	width:100%;
	margin: 0 auto;
}
.work-detail{
	width:90%;
	margin: 0 auto;
	text-align: center;
	font-size: 120%;
	line-height: 200%;
}

.work-photo{
	display: flex;
	justify-content: space-between;
	margin: 40px 0 20px;
}

ul.work-photo{
	list-style-type: none;
}

.work-photo li{
	width:23%;
	margin: 0;
}

.work-photo li img{
	width:100%;
}

/* Responsive */
@media screen and ( max-width : 767px ){
	.work{
	margin: 100px auto 0;
	}
	.work_title{
	position: relative;
	height: 20px;
	}
	.work_title img{
	position: absolute;
	width:200%;
	top:-20%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	}
	.work-detail{
	width:95%;
	margin: 0 auto;
	font-size: 110%;
}
	.work-photo{
	flex-wrap: wrap;
	}
	.work-photo li{
	width:45%;
	margin: 0 auto 16px;
}
}

/*アクセス*/
.access_white{
	width:100%;
	margin:40px 0 0;
	padding:0;
	display:flex;
	justify-content:space-between;
	flex-direction: row-reverse;
}
.access_left{
	width:30%;
	padding:0;
}

.access_photobox{
	width:100%;
	display:block;
	margin:0 0 10px 0;
} 

.access_right{
	width:68%;
	margin:0 0 0 auto;
}

.text_box{
	color:#386175;
	font-size:110%;
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-color:#386175;
	padding:1em;
	margin:5px 0;
}

/* Responsive */
@media screen and ( max-width : 767px ){
	.access_white{
	display:block;
	}
	.access_left{
	width:70%;
	margin: auto;
	display:flex;
	justify-content:left;
	}
	.access_photobox{
	width:46%;
	margin:20px auto ;
	} 
    .access_right{
	width:95%;
	margin: 10px auto;
	}
	.access_right h3 img{
	width:120%;
	}
}

.cmn_text{
	font-size:100%;
	line-height:200%;
	margin:10px 0px;
}

.cmn_text a{
	text-decoration:none;
	color:#000;
}

.cmn_text a:hover{
	text-decoration:none;
	color:#8b7c29;
}

.cmn_smalltext{
	font-size:80%;
	line-height:160%;
	margin:10px auto;
}
	

.access_map{
	width:100%;
	height:auto;
	padding:0;
	margin:10px 0 0;
}

/* インスタ */
.insta-container{
	width:100%;
	margin: 60px 0;
}

.insta_title{
	width:100%;
}

.insta_title img{
	width:100%
} 

#insta {
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
  }

#insta ul{
    list-style-type:none;
	display: inline-block;
	
}

#insta li {
	list-style-type:none;
    width: 24%;
  }
  
#insta li img{
    width: 100%;
	margin-bottom: auto;
}

@media screen and ( max-width : 767px ){
	.insta-container{
	margin: 40px auto;
	}
	.insta_title{
	position: relative;
	height: 60px;
	}
	.insta_title img{
	position: absolute;
	width:200%;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	}
	#insta li {
    width: 32%;
  	}
}

/*インスタボタン*/
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #333;/*文字色*/
  font-size: 100%;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

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

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  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: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: 45px;/*アイコンサイズ*/
  line-height: 120%;/*高さと合わせる*/
  top:-3px;
}

/*インスタボタンここまで*/


/*改行用のマークアップ*/
.newline{
	display: inline;
}
.alwaysline{
	display: block
}
.largeline{
	display: block
}
/*Responsive*/
@media screen and (max-width: 767px) {
	.newline{
		display: block;
	}
	.largeline{
		display: inline;
}
}

/* ~~ フッター ~~ */
#footer {
	width:100%;
	margin:60px 0 0;
	padding:20px;
	background-color: #518BA8;
}

.footer_container{
	width: 75%;
	max-width:900px;
	margin:20px auto;
	text-decoration: none;
	color:#FFF;
}

/* Responsive */
@media screen and ( min-width : 767px ){
    .footer_container {
	  display:flex;
	justify-content:space-between;
    }
}

/* Responsive */
@media screen and ( max-width : 767px ){
    .footer_container {
	  width: 94%;
	  overflow-x: hidden;
	  margin-left: auto;
	margin-right:auto;
    }
}

.footer_left{
	width:40%;
}

.footer_left_name{
	color:#FFF;
	font-size:90%;
	margin-top:20px;
}

.footer_left_cmn{
	color:#FFF;
	font-size:80%;
	line-height:160%;
	margin-top:10px;
}

.footer_left_cmn a{
	text-decoration:none;
	color:#FFF;
}

.footer_left_cmn a:hover{
	text-decoration:none;
	color:#EFF5A7;
}

.fotter_left_copy{
	color:#EFF5A7;
	font-size:80%;
	margin-top:10px;
}

.fotter_right{
	width:55%;
	padding-right:20px;
}

/* Responsive */
@media screen and ( max-width : 767px ){
    .footer_left{
	width:95%;
	}
	.fotter_right{
	width:95%;
	}
}

.fotter_sitemap{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	margin:0 20px 0 0;
	font-size:90%;
}

.fa-yellow{
	color:#EFF5A7;
}

.fotter_sitemap ul{
	font-size:100%;
	margin:0 10px 20px 10px;
}

.fotter_sitemap li {
	font-size:90%;
	color:#FFF;
	list-style-type: none;
	padding:10px 0 0 10px;
}

.fotter_sitemap li:before {
	content: '';
	width: 4px;
	height: 4px;
	display: inline-block;
	border-radius: 100%;
	background: #EFF5A7;
	position: relative;
	left: -5px;
	top: -3px;
}

.fotter_sitemap a:link{
	color:#FFF;
	text-decoration:none;
}


.fotter_sitemap a:visited{
	color:#FFF;
	text-decoration:none;
}

.fotter_sitemap a:hover{
	color:#eff5a7;
	text-decoration:none;
}

.fotter_sitemap ul li a:link{
	color:#FFF;
	text-decoration:none;
}


.fotter_sitemap ul li a:visited{
	color:#FFF;
	text-decoration:none;
}

.fotter_sitemap ul li a:hover{
	color:#eff5a7;
	text-decoration:none;
}



.fotter_link{
	width:98%;
	display: flex;
	justify-content: start;
	border-top:dotted 1px #EFF5A7;
	padding:20px;
	margin:0 auto;
}

.fotter_link_company{
	margin:0 10px 0 10px;
	height:60px;
	vertical-align: middle;
	font-size:80%;
}

/*インスタボタン*/
.insta_btn_footer {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #333;/*文字色*/
  font-size: 100%;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

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

.insta_btn_footer .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 40px;/*幅*/
  height: 40px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  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_footer .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 50px;/*グラデーションカバーの幅*/
  height: 50px;/*グラデーションカバーの高さ*/
  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_footer .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 36px;/*アイコンサイズ*/
  line-height: 36px;/*高さと合わせる*/
  top:3px;
}

/*インスタボタンここまで*/