@charset "utf-8";
/* CSS Document */


html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}


/*　　webフォント　コピペ用
------------------------------------------------------------------------------------------------------------*/
/*

font-family: 'Kosugi Maru', sans-serif;　ゴシック
font-family: 'Kosugi Maru', sans-serif;　丸ゴシック

*/




/*　　いろいろ見た目
------------------------------------------------------------------------------------------------------------*/

html, body{
	margin:0;
	padding:0;
	border:0;
	font-size: 14px;
	font-family: 'Numans','Kosugi Maru', sans-serif;
	line-height: 1.5em;
	letter-spacing: 0.02em;
	color: #1D1D1D;
}



.highlight a:hover *{
	 filter: alpha(opacity=50);
	 -moz-opacity:0.5;
	 opacity:0.5;
	 -webkit-transition: all .3s;
	 transition: all .3s;
	 }
	 

img {
	border: none;
}


.contents {
	max-width: 800px;
	margin: 100px auto;
	padding: 0px 10px 10px 10px; 
}




@media screen and (max-width: 768px) {
	
.contents {
	width: 100%;
}
}



a:link {color: #333;}
a:visited {color: #333;}
a:hover {color: #A6124D;}
a:active {color: #333333;}





.cb{
	/* floatを解除 */
	clear: both;
	margin: 0;
	padding: 0;
}





/*　　PCのみ表示、スマホのみ表示の切り替え
------------------------------------------------------------------------------------------------------------*/

.pc { display:inline!important; }
.sp { display:none!important; }

@media screen and (max-width: 768px) {
.pc { display:none!important; }
.sp { display:inline!important; }
	}






/*　　h
------------------------------------------------------------------------------------------------------------*/


h1 {
	width:100%;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: #333333;
	text-align: center;
}









/*　　ヘッダ
------------------------------------------------------------------------------------------------------------*/


.header-ttl {
	width: 1100px;
	margin: 100px auto 50px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0.05em;
}


@media screen and (max-width: 768px) {
	
.header-ttl {
	width: 100%;
	margin: 50px auto;
	font-size: 14px;
}

	
}




/*　　トップページメインイラスト
------------------------------------------------------------------------------------------------------------*/

.top_illust {
	text-align: center;
	margin: 30px auto;
}

.top_illust img {
	max-width: 100%;
}





/*　　ヘッダメニュー
------------------------------------------------------------------------------------------------------------*/



.menu {
	width: 750px;
	margin: 30px auto;
	padding-bottom: 5px;
	letter-spacing: 0.1em;
}


.menu ul{
	padding: 0;
	text-align: center;
}
	
.menu ul li {
	list-style: none;
	margin:0;
	padding:0;
	font-size:14px;
	float: left;
	position: relative;
	
	width: 135px; /*メニューの幅*/
	height: 40px; /*メニューの高さ*/
	line-height: 40px;
	
	background:#FFF; /*メニューの背景色*/
	color: #333; /*メニューの文字色*/
	text-align: center;
}

	
.menu ul li a {
	position: relative;
	display: block;
	text-decoration: none;
}


.menu ul li a::after {
	position: absolute;
	bottom: 1px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px; /*ホバー時のライン高さ*/
	background: #A6124D; /*ホバー時のラインの文字色*/
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	z-index: 200;
}
	

.menu ul li a:hover::after {
	transform: scale(1, 1);
}
	
	
	
		
.menu ul li:hover, .menu ul li a:hover {
	background: #FFF; /*ホバー時のメニューの背景色*/
	color: #A6124D; /*ホバー時のメニューの文字色*/
	font-weight: bold;
}
	
	


.insta {
	display: block;
	width: 55px;
	height: 40px;
	font-size: 30px;
	text-align: center;
	vertical-align: middle;
	float: right;
}


.insta p{
	font-size: 8px;
	text-align: center;
	margin-top: -5px;
	letter-spacing: 0;
	transform: scale(0.8, 1);
}


/*-----　スマホではメニュー隠す　----*/


@media screen and (max-width: 768px){
	.menu {display: none;}
}


	





	


/*　　スマホ用メニュー
-------------------------------------------------------------------------------------------------------*/



sp-nav.globalMenuSp {display: none}
.hamburger {display: none}
	

@media screen and (max-width: 768px){

.hamburger {
	display : block;
	position: fixed;
	z-index : 999;
	right : 13px;
	top   : 12px;
	width : 38px;
	height: 50px;
	cursor: pointer;
	text-align: center;
	font-size: 10px;
	color: #FFFFFF;
	background: rgba(196,196,196,0.89);
	border-radius: 5px;
}
	
.hamburger span {
	display : block;
	position: absolute;
	width   : 25px;
	height  : 2px ;
	left    : 6px;
	background : #FFFFFF;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
}
	
.hamburger span:nth-child(1) {
	top: 22px;
}
.hamburger span:nth-child(2) {
	top: 30px;
}
.hamburger span:nth-child(3) {
	top: 38px;
}


	
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 30px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 30px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}


	
sp-nav.globalMenuSp {
	display: block;
	position: fixed;
	z-index : 99;
	top  : 0;
	left : 0;
	color: #333;
	background: rgba(255,255,255,0.5);
	text-align: center;
	transform: translateX(-100%);
	transition: all 0.6s;
	width: 100%;
	}

sp-nav.globalMenuSp ul {
  background: rgba(195,195,195,0.80);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

sp-nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px dotted #FFFFFF;
}
	
sp-nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
	
sp-nav.globalMenuSp ul li:hover{
  background :#ddd;
}

sp-nav.globalMenuSp ul li a {
  display: block;
  color: #000000;
	font-weight: bold;
  padding: .5em 0;
  text-decoration :none;
}

sp-nav.globalMenuSp ul li img{
	height: 2.5rem;
}	

sp-nav.globalMenuSp ul li table, th, td {
  width: auto !important;
	margin: 0 auto;
	}
	

/* このクラスを、jQueryで付与・削除する */
sp-nav.globalMenuSp.active {
  transform: translateX(0%);
}


}







/*　　フォント
------------------------------------------------------------------------------------------------------------*/


.tx10 {font-size: 10px;}
.tx11 {font-size: 11px;}
.tx12 {font-size: 12px;}
.tx13 {font-size: 13px;}
.tx14 {font-size: 14px;}
.tx15 {font-size: 15px;}
.tx16 {font-size: 16px;}
.tx17 {font-size: 17px;}
.tx18 {font-size: 18px;}
.tx20 {font-size: 20px;}
.tx22 {font-size: 22px;}
.tx24 {font-size: 24px;}
.tx26 {font-size: 26px;}
.tx28 {font-size: 28px;}
.tx30 {font-size: 30px;}
.tx32 {font-size: 32px;}
.tx34 {font-size: 34px;}
.tx36 {font-size: 36px;}
.tx38 {font-size: 38px;}
.tx40 {font-size: 40px;}

.red {color: #C30;}
.blue {color: #336699;}
.green {color: #696;}
.orange {color: #F90;}
.pink {color:#FF6699;}
.brown {color: #624628;}
.gray {color: #999;}
.white {color: #FFF;}



.tx-ss {font-size: 50% !important;}
.tx-s {font-size: 75% !important;}
.tx-m {font-size: 90% !important;}
.tx-l {font-size: 115% !important;}
.tx-ll {font-size: 130% !important;}












/*　　複数列レスポンシブ
------------------------------------------------------------------------------------------------------------*/




/*-=====　2列　幅違い =====*/


.col2_box {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.col-left {
    width: calc(100% - 200px);
  }

.col-right {
    width: 200px;
	position: relative;
  }




@media screen and (max-width: 768px) {
	.col2_box {
		display: flex;
		flex-wrap: wrap;
	}
	
	.col-left,
	.col-right {
		width: 100%;
	}
}





/*-=====　5列 WORK用　=====*/



.col_5-work{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.col_5-work > div{
	width: 20%;
	padding: 10px;
	text-align: center;
}


.col_5-work > div img{
	max-width: 100%;
}


.col_5-work > div > div{
	position: relative;
	overflow: hidden
}


@media screen and (max-width: 960px) {
	.col_5-work > div{
		width: 25%;
	}
}

@media screen and (max-width: 480px) {
	.col_5-work > div{
		width: 33.333%;
	}
}








/*-=====　2列 均等幅　=====*/


.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.col_2 > div{
	width: 50%;
	padding: 5px;
}

@media screen and (max-width: 768px) {
	.col_2 > div{
		width: 100%;
	}
	
	.col_2 > div img{
		max-width: 100%;
	}
}






/*-=====　3列 均等幅　=====*/


.col_3 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding-top: 20px;
}

.col_3 > div{
	width: 33.33333%;
	text-align: center;
	padding: 10px;
}


.col_3 > div img{
	max-width: 100%;
}

@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
		text-align: center;
	}
}

@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 99%;
		text-align: center;
	}
}







/*-=====　4列 均等幅　=====*/



.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
		padding: 5px;
	}
}







/*-=====　5列 均等幅　=====*/



.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}


.col_5 > div img{
	max-width: 100%;
}


.col_5 > div > div{
	position: relative;
	overflow: hidden
}

@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}

@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 50%;
	}
}






/*-=====　6列 均等幅　=====*/


.col_6{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_6 > div{
	width: 16.5%;
	padding: 10px;
}

.col_6 > div img{
	max-width: 100%;
}


.col_6 > div p{
	font-size: 14px;
	line-height: 1.5em;
}

.col_6 > div > div{
	position: relative;
	overflow: hidden
}


@media screen and (max-width: 960px) {
	.col_6 > div{
		width: 20%;
	}
}
@media screen and (max-width: 480px) {
	.col_6 > div{
		width: 33.333%;
	}
	
	.col_6 > div p{
	font-size: 12px;
	line-height: 1.5em;
}
}







/*　　NEWS
------------------------------------------------------------------------------------------------------------*/

.news dl {
	padding: 15px 0;
	font-size: 13px;
}

.news dt {
	padding-bottom: 5px;
	width: 200px;
}

.news dd {
	margin-left: 10px;
	padding-bottom: 30px;
}






/*　　ABOUT
------------------------------------------------------------------------------------------------------------*/


.about_tx {
	font-size: 13px;
	line-height: 3em;
	padding: 30px 0px;
	border-bottom: 1px dotted #CBCBCB;
}


.onepoint_img {
	position: absolute;
	right: 0;
	bottom: 0;
}




@media screen and (max-width: 768px) {
	
.about_tx {
	line-height: 2em;
}
	

.onepoint_img {
	position: static;
	text-align: right;
}

}




/*　　WORK
------------------------------------------------------------------------------------------------------------*/


.work_ttl {
	display: flex;
	align-items: center;
	letter-spacing: 1em;
	margin: 50px 0px 10px;
	font-size: 15px;
}

.work_ttl:after {
	border-top: 1px solid #DCDCDC;
	content: "";
	flex-grow: 1;
}

.work_ttl:after {
	margin-left: 1rem;
}


.work_subttl {
	padding-top: 40px;
	padding-bottom: 5px;
	font-size: 13px;
}






/*　　CONTACT
------------------------------------------------------------------------------------------------------------*/

.contact_tx {
	font-size: 13px;
	line-height: 3.5em;
	padding: 30px 0px;
}






/*　　フッター
------------------------------------------------------------------------------------------------------------*/

.footer {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	padding: 60px 0px;
}





/*　ページトップに戻るボタン
------------------------------------------------------------------------------------------------------------*/



#page_top {
  width: 90px;
  height: 90px;
  position: fixed;
  right: 100px;
  bottom: 40px;
}


#page_top a{
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
  background: #FFA875;
  opacity: 0.6;
  border-radius: 50%;
}


#page_top a:hover{
  opacity: 1.0;
}

#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #ffffff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


@media screen and (max-width: 768px){
	
#page_top{
  width: 50px;
  height: 80px;
  right: 5px;
  bottom: 0px;
}
	
	
#page_top a{
  width: 50px;
  height: 50px;
}
	
	
#page_top a::before{
  font-size: 18px;
  width: 20px;
  height: 20px;
  top: -18px;
}
	
#page_top a::after{
  content: 'TOP';
  font-size: 10px;
  color: #fff;
  position: absolute;
  top: 23px;

}

}