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

body {
	width: 960px;
	height: auto;
	margin: 0 auto;
	padding: 0px;
	background-color: #ffffff;
	color: #333333;
	font-size: 12px;
	line-height: 19px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

/*p要素上部の余計な余白削除*/
p {
	margin-top: 0px;
	padding: 0px;
}

/*画像下部の余計な余白削除*/
img {
	vertical-align: 0;
}

/*img:hover {
	opacity: 0.3;
}*/

header {
	width: 960px;
	height: 120px;
	/*header上部０、右左下のマージンを自動設定*/
	margin: 0 auto;
}

.title {
	width: 272px;
	margin-top: 120px;
	display: inline-block;
}

.title img {
	width: 272px;
}

.sns_icons {
	width: 57px;
	height: 26px;
	float: right;
	margin-top: 120px;
}

.instagram_btn img {
	width: 22px;
	height: 22px;
	margin: 0 12px 0 0;
	float: left;
}

.instagram_btn img:hover {
	opacity: 0.3;
	transition: all 0.2s ease;
}

.facebook_btn img {
	width: 22px;
	height: 22px;
	margin: 0 0 0 0;
	float: none;
	transition: all 0.2s ease;
}

.facebook_btn img:hover {
	opacity: 0.3;
}

ul {
	margin: 0 0 78px 0;
	padding: 0px;
}

a {
	color: #333333;
	text-decoration: underline;
}

a:visited {
	color: #333333;
}

.global-nav {
	margin-top: 84px; 
	float: right;
	letter-spacing: 2px;
}

.global-nav li {
	float: left;
	font-size: 14px;
	list-style: none;
}

.global-nav li a {
	text-decoration: none;
}

.global-nav li a:hover {
	transition: all 0.1s ease;
	color: rgba(51,51,51,0.3);
	text-decoration: none;
}






/*work関係*/
.works {
	margin-right: 57px;
}

.works_disabled {
	opacity: 0.3;
	margin-right: 57px;
}

.works_small_title {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	margin-top: 70px;
	margin-bottom: 0px;
}

.explanation {
	margin-bottom: 0px;
	margin-top: 0px;
}

.works_image_W {
	width: 920px;
	margin-bottom: 10px;
}

.works_image_M {
	width: 570px;
	margin-left: auto;
    margin-right: auto;
}
.works_image_M img {
	width: 100%;
	margin-bottom: 10px;
}


.works_image_H {
	width: 400px;
	margin-left: auto;
    margin-right: auto;
}
.works_image_H img {
	width: 100%;
	margin-bottom: 10px;
}

.works_caption {
	text-align: right;
	margin-bottom: 60px;
}

/**/



.news {
	margin-right: 57px;
}

.news_disabled {
	opacity: 0.3;
	margin-right: 57px;
}

.cv {
	margin-right: 57px;
}

.cv_disabled {
	opacity: 0.3;
	margin-right: 57px;
}

.text {
	margin-right: 57px;
}

.text_disabled {
	opacity: 0.3;
	margin-right: 57px;
}

.text_small_title {
	font-size: 20px;
	font-weight: 300;
	line-height: 19px;
}


.content {
	width: 960px;
	margin: 0 auto;
}


.contact_disabled {
	opacity: 0.3;
}


.company_name .name .email .tel .message {
	border: rgba(55,55,55,0.1);
	
}

dd {
    margin: 8px 0px 36px 0px;
}

.alert {
	color:coral;
}

.btn-primary {
	width: 64px;
	margin-right: 10px;
	text-align: center;
	letter-spacing: 2px;
}

.btn-primary:focus {
	width: 64px;
	margin-right: 10px;
	text-align: center;
	letter-spacing: 2px;
}



input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**/
textarea {
	resize: none;
	width: 410px;
	height: 300px;
	font-size: 12px;
	font-weight: 200;
	padding: 10px;
	color: #333333;
	box-shadow: 0 0 0 1000px white inset;
}

textarea:focus {
	width: 410px;
	outline: none;
	resize: none;
	height: 300px;
	font-size: 12px;
	font-weight: 200;
	padding: 10px;
	color: #333333;
}

.form_btn {
	width: 64px;
	height: 24px;
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 12px;
}

.form-control {
	width: 330px;
}

.form-control_textarea {
	width: 410px;
}


#wrap {
	clear: both;
}

.content_title {
	width: 960px;
	height: 64px;
	font-weight: 200;
	font-size: 32px;
	line-height: 16px;
	letter-spacing: 3px;
	margin: 0 auto;
}


.content_box {
	margin: 70px 0px 0px 40px;
	width: 920px;
	font-size: 12px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.5px;
}

.content_box a {
	opacity: 1;
}

.content_box a:hover {
	transition: all 0.1s ease;
	opacity: 0.3;
	text-decoration: none;
}

.content_p {
	margin: 0px;
}


/*pdfリンクのデザインとレイアウト*/
.pdf_file {
		font-size: 12px;
		font-weight: 300;
		color: #333333;
		line-height: 19px;
		letter-spacing: 0.5px;
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0px;
		margin: 0px;
        appearance: none;
		opacity: 1;
		width: auto;
		text-align: left;
		padding-left: 0px;
	    text-decoration: underline;

}

.pdf_file:hover {
		opacity: 0.3;
	    text-decoration: none;
		
}

input {
	color: #333333;
	font-weight: 200;
	font-size: 12px;
	height: 24px;
	padding-left: 8px;
	margin: 0px;
}

input:focus {
	color: #333333;
    outline: none;
	font-weight: 200;
	font-size: 12px;
	height: 24px;
	padding-left: 0px;
	margin: 0px;
}


/*ホームトップの作品一覧*/

.allwork li img {
	margin: 0px;
	width : calc(960px / 3);
	float: left;
}

.allwork li {
	list-style: none;
	text-decoration: none;
	margin: 0px;
}


/*ホバーすると見えるキャプションの設定*/

.work_title {
	width: calc(960px / 3);
	height: 213.5px;
	overflow: hidden;
	position: relative;
	margin: 0px;
	float: left;
}

.work_title .caption {
	font-size: 12px;
	font-weight: 300;
	line-height: 0px;
	padding: 2.6px;
	letter-spacing: 0.5pt;
	background: rgba(255,255,255,1);
	display: inline;
	color: #333333;
}

.work_title .mask {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.2);
	transition: all 0.2s ease;
}

.work_title:hover .mask {
	opacity: 1;	/* マスクを表示する */
}



/* ページトップボタンのレイアウト */
.page_top {
	width: 100%;
	clear: both;
	display: inline-block;
	text-align: center;
}

#scroll-to-top-btn{
	border: none;
	outline: none;
	opacity: 0.3;
	background-color: #ffffff;
	margin-top: 140px;
	margin-bottom: 36px;
}

#scroll-to-top-btn img {
	width: 14px;
	height: 14px;
	margin: 0px;
}

#scroll-to-top-btn img:hover {
	opacity: 0.3;
}



/* ページネーションのレイアウト */

.pagination-container ul{
 width: 100%;
 display: flex;
 justify-content: center;
 text-decoration: none;
 list-style: none;
 font-size: 14px;
 }

.pagination-container li + li{ margin-left: -8px; }
.pagination-container a{
 padding: 0px 16px;
 display: block;
 color: #333333;
 background: #fff;
 text-decoration: none;
 }

.pagination-container .navi-active a{
 color: #333333;
 opacity: 0.3;
 text-decoration: none;
 }

.pagination-container a:hover{
 color: #333333;
 opacity: 0.3;
 text-decoration: none;
 }


/* フッターのレイアウト */
footer {
	width: 960px;
	display: inline-block;
	margin: 38px 0px 58px 0px;
	font-size: 12px;
	text-align: right;
	letter-spacing: 1px;
	float: right;
}


/*
以下、ページネーションの「最大ページ数」の表示切り替えに必要なコードです。
「Works_〇〇.html」の「最大ページ数」の表示が全て一括置換されます。
htmlは触れず、こちらだけ書き換えればOKです。
*/

/*
.pagenation_all:before {
content: '19';
font-size: 12px;
color: #333333;
}
*/

/*
補足：
予め「Works_〇〇.html」の下の方に以下のコードが書かれています。
クラス名"pagenation_all"と紐付いて一括置換されている仕組みです。
こちらの書き換えは不要です。

	<p class="pagenation_all">
	000
	</p>

*/