@charset "utf-8";

/* ------------------------------------------------------------------------------------------------------------------------/
	reset
/------------------------------------------------------------------------------------------------------------------------ */

* { margin:0; padding:0; }

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
caption,tbody,tfoot,thead,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video {
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    border:0;
    outline:0;
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
	}

nav ul {
    list-style:none;
	}

blockquote,q {
    quotes:none;
	}

blockquote:before,blockquote:after,
q:before,q:after {
    content:'';
    content:none;
	}

a {
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	outline:none !important;
    margin:0;
    padding:0;
	}

p {
	max-height: 100%;
}

ins {
    color:#000000;
    text-decoration:none;
    background-color:#ffff99;
	}

mark {
    color:#000000;
    font-style:italic;
    font-weight:bold;
    background-color:#ffff99;
	}

del {
    text-decoration:line-through;
	}

abbr[title],dfn[title] {
    border-bottom:1px dotted inherit;
    cursor:help;
	}

address {
	font-style:normal;
	}

table {
    border-collapse:collapse;
    border-spacing:0;
	}
	table th,td {
		empty-cells:show;
		}

hr {
    display:none;
	}

input,select {
    vertical-align:middle;
	}

img {
	vertical-align:top;
	}

img.fitimg {
	max-width:100%;
	height:auto;
	}


/* ------------------------------------------------------------------------------------------------------------------------/
	setting
/------------------------------------------------------------------------------------------------------------------------ */

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, span, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-size: 24px;
	letter-spacing:0.8pt;
	line-height:1.5em;
	vertical-align:baseline;
}

article, header, footer, aside, figure, figcaption, nav, section { 
	display:block;
}

body {
	font-family:'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

ol, ul {
	list-style: none;
	list-style-type: none;
}


a:link { color:#1447a0; }
a:visited { color:#91C82C; }
a:hover { color:#FF4B41; }

.fc-red { color:#ff0000; }
.fc-green { color:#85b200; }
.fc-violette { color:#745398; }
.fc-orange { color:#ff9326; }
.fsize20 { font-size:20px; }

.pc { display:none; }
.sp { display:block; }

.js-clingify-placeholder {
	height:0 !important;
}

.pan_container {
	display:none;
}

.cl::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.photo-c {
    display: block;
    line-height: inherit;
    max-width: 100% !important;
    padding-bottom: 20px;
    text-align: center;
}

.photo-l {
    float: left;
    line-height: inherit;
    margin-right: 25px
}

.photo-r {
	float:right;
	line-height: inherit;
    margin-left: 25px;
}

.fc-normal a,
.fc-normal a:visited,
.fc-normal a:hover,
.fc-normal,
.fc-normal:visited,
.fc-normal:hover { color:#232323 !important; text-decoration:none !important; }

a:link { color:#1447a0; }
a:visited { color:#1447a0; }
a:hover { color:#FF4B41; }

.fc-red { color:#ff0000; }
.fc-green { color:#85b200; }
.fc-violette { color:#745398; }
.fc-orange { color:#ff9326; }

.cl::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.photo-c {
    display: block;
    line-height: inherit;
    max-width: 100% !important;
    padding-bottom: 20px;
    text-align: center;
}

.photo-l {
    float: left;
    line-height: inherit;
    margin-right: 25px
}

.photo-r {
	float:right;
	line-height: inherit;
    margin-left: 25px;
}


/* ------------------------------------------------------------------------------------------------------------------------/
	header
/------------------------------------------------------------------------------------------------------------------------ */

header {
	overflow:hidden;
	width:640px;
	height:100px;
	margin:0 auto;
  background-image: url(../image/footer/ft_bg.gif);
}

header h1 {
	float:left;
	margin:26px 0 0 20px;
}

header h1 img {
	width: 340px;
}

header .ani_badge {
	float:left;
	margin:22px 0 0 90px;
}

header .menu_btn {
	position:fixed;
	z-index:3;
	right:0;
	top:0;
	display:block;
	width:100px;
	height:100px;
	background:url(../image/sp/common/menu_btn.gif) top center no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}



/* ------------------------------------------------------------------------------------------------------------------------/
	navi
/------------------------------------------------------------------------------------------------------------------------ */


nav {
	display:none;
	position:fixed;
	z-index:9999;
	top:120px;
	left:20px;
}

nav ul {
	width: 600px;
	padding: 10px 30px 40px;
	position: relative;
	background: #121212;
	box-sizing: border-box;
}

nav ul:after {
	bottom: 100%;
	right: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(18, 18, 18, 0);
	border-bottom-color: #121212;
	border-width: 15px;
	margin-left: -15px;
}

/*
nav ul {
	padding:26px 40px;
}
*/

nav li {
	width:540px;
	height:24px;
	padding:30px 0;
	border-bottom:2px solid #fff;
}

nav a {
	color:#fff;
	text-decoration:none;
	display:block;
	background:no-repeat;
	background-position:left;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

nav .nav01 { background-image:url(../image/sp/common/navi01.png); }
nav .nav02 { background-image:url(../image/sp/common/navi02.png); }
nav .nav03 { background-image:url(../image/sp/common/navi03.png); }
nav .nav04 { background-image:url(../image/sp/common/navi04.png); }
nav .nav05 { background-image:url(../image/sp/common/navi05.png); }
nav .nav06 { background-image:url(../image/sp/common/navi06_02.png); }
nav .nav07 { background-image:url(../image/sp/common/navi07.png); }
nav .nav08 { background-image:url(../image/sp/common/navi08.png); }
nav .nav09 { background-image:url(../image/sp/common/navi09.png); }

nav span {
	display:none;
}


/* ------------------------------------------------------------------------------------------------------------------------/
	contents
/------------------------------------------------------------------------------------------------------------------------ */

.contents {
	width: 640px;
	overflow:hidden;
	margin-bottom:32px;
}


/* ------------------------------------------------------------------------------------------------------------------------/
	subhead
/------------------------------------------------------------------------------------------------------------------------ */

.subhead {
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: top center;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.subhead.works { background-image:url(../image/subhead/works.jpg); }
.subhead.concept { background-image:url(../image/subhead/concept.jpg); }
.subhead.company { background-image:url(../image/subhead/company.jpg); }
.subhead.blog { background-image:url(../image/subhead/blog.jpg); }
.subhead.contact { background-image:url(../image/subhead/contact.jpg); }
.subhead.reserve { background-image:url(../image/subhead/reserve.jpg); }


/* ------------------------------------------------------------------------------------------------------------------------/
	footer
/------------------------------------------------------------------------------------------------------------------------ */

#move-page-top a {
	width:640px;
	height:88px;
	display:block;
	background:url(../image/sp/common/pagetop.gif) top center no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

#facebook-fix {
	position:fixed;
	right:0;
	top:160px;
	z-index:30;
	width:80px;
	height:80px;
    background-color: #fff;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    overflow: hidden;
}
#facebook-fix a {
    transition: .3s all;
}
#facebook-fix a:hover {
    opacity: .7;
}

#instagram-fix {
	position:fixed;
	right:0;
	top:260px;
	z-index:2;
	width:80px;
	height:80px;
    background-color: #fff;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    overflow: hidden;
}
#instagram-fix a {
    transition: .3s all;
}
#instagram-fix a:hover {
    opacity: .7;
}

footer {
	width:640px;
	text-align:center;
    background-image: url(../image/footer/ft_bg.gif);
	padding: 20px 0;
}

footer .ft_contents {
	width:600px;
	padding: 20px;
	box-sizing: border-box;
	overflow:hidden;
    margin: 0 auto 20px;
    color: #fff;
}

footer .ft_title {
	width:404px;
	height:60px;
	display:block;
	background:url("../image/sp/common/ft_title.png?v=2") top center no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	margin: 0 auto;
}

footer .ft_tel {
	display:block;
	width:530px;
	height:60px;
	background:url("../image/sp/common/ft_tel.png?v=2") top center no-repeat;
  background-size: contain;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	margin:20px auto;
}

footer .ft_nav,
footer .ft_contact {
	display:none;
}

footer .copyright {
	color: #fff;
}

footer .ssl {
    width: 600px;
    margin: 1em auto 0;
    overflow: hidden;
}

footer .ssl input {
}

footer .ssl p {
    color: #fff;
    margin-top: 1em;
}


/*------------------------------------------------------------------------------------------------------------------
　Expression
-------------------------------------------------------------------------------------------------------------------*/

.archives-button {
	width: 100%;
	max-width: 600px;
	padding: 0.75em;
	background-color:#4a4a4a;
	transition:0.3s;
	margin: 30px auto;
    box-sizing: border-box;
}

.archives-button:hover {
	opacity:0.8;
}

.archives-button a {
    display: block;
	color:#ffffff;
	text-decoration:none;
	width:100%;
	height:40px;
	text-align:center;
	font-weight:normal;
}