@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600');

/* Google Fonts
---------------------------------------------*/
.txtArea h2.title,
.txtArea h4,
.profileblock .title,
#copyright,
h4.title,
.popupform h2{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
}
.profileblock h3.name span{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:400;
}

/* 共通
---------------------------------------------*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.wrapper {
	width:700px;
	margin:0 auto;
}
.contents {
	padding-bottom:80px;
	background-color:#FFF;
}
body {
	color:#333;
}
p {
	font-size: 1em;
	line-height:2;
}
h2 {
	color:#333;
	line-height:1.2;
}
h3 {
	color:#333;
	line-height:1.5;
}
a {
	color:#333;
	outline: none;
}
a:hover {
	color:#999;
}

/* ヘッダー
---------------------------------------------*/
#logo img {
	z-index:100;
	position:absolute;
	top:20px;
	left:40px;
	width:127px;
	height:62px;
}


/* トップページ
---------------------------------------------*/
/*多重画像表示*/
section {
    min-height: 400px;
    position: relative;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#story-freext>div:nth-of-type(1),
#story-freext2>div:nth-of-type(1),
#story-freext3>div:nth-of-type(1) {
    margin: 0;
    height: 1600px;
    position:absolute;
    width:100%;
    top:0;left:0;
}
#story-freext>div:nth-of-type(1) {
    background: url(../images/index/mainA.jpg) 50% 0 no-repeat fixed;
}
#story-freext2>div:nth-of-type(1) {
    background: url(../images/index/mainB.jpg) 50% 1250px no-repeat fixed;
}
#story-freext3>div:nth-of-type(1) {
    background: url(../images/index/mainC.jpg) 50% 2700px no-repeat fixed;
}
.imageArea {
	background-image:url(../images/index/mainA.png);
	height:480px;
	left: 50%;
  margin-left: -1000px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
/*IE11で妙な動きになるためIE11のみ修正*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #story-freext>div:nth-of-type(1), #story-freext2>div:nth-of-type(1), #story-freext3>div:nth-of-type(1) { background-attachment:scroll; }
}
.txtblock {
	background-color:#fff;
	padding-top:50px;
}
.txtArea {
}
.txtArea h2.title {
	font-size:2.1em;
	letter-spacing:4px;
	margin-bottom:15px;
}
.txtArea h3.subtitle {
	font-size:1em;
	margin-bottom:25px;
}
.txtArea p {
	margin:25px 0;
}
.txtArea .txt {
	margin-bottom:50px;
}
.txtArea .thumbnailArea {
	margin-bottom:30px;
}
.txtArea .thumbnailArea .thumbnail {
	float:left;
	margin-bottom:40px;
}
.txtArea .thumbnailArea .thumbnail img {
	width:325px;
	height:auto;
	border:1px solid #ccc;
	box-sizing:border-box;
}
.txtArea .thumbnailArea .thumbnail-left {
	margin-right:50px;
}
.txtArea .thumbnailArea .thumbnail figcaption {
	margin-top:10px;
	line-height:1.5;
}
.txtArea .btnArea {
	text-align:center;
	padding-bottom:50px;
}
.btn {
    width:290px;
    text-decoration:none;
	text-align:center;
    display:block;
    padding:15px 0 20px;
    background-color:#fff;
	border:1px solid #ccc;
    border-radius:25px;
	margin:0 auto;
}

/*PROFILE*/
.profileblock {
	background-color:#f5f5f5;
	padding:100px 0;
	margin:0;
}
.profileblock h2.title {
	color:#999999;
	font-size:2.1em;
	letter-spacing:5px;
	text-align:center;
	margin-bottom:60px;
}
.profileblock h3.name {
	font-size:1.1em;
	margin-bottom:20px;
}
.profileblock h3.name span{
letter-spacing:2px;
}

/* 第2階層
---------------------------------------------*/
.imgArea {
	position:relative;
	height:600px;
	overflow:hidden;
}
.imgArea2 {
	position:relative;
	height:300px;
	overflow:hidden;
}
.imgArea img,
.imgArea2 img {
	position:fixed;
    left:50%;
    width:2000px;
	height:auto;
    margin-left:-1000px;
	z-index:-100;
}
/*IE11でposition:fixedが効かないためrelativeに*/
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, .imgArea img, .imgArea2 img { position:relative; }
}
/*edghでも効かないため修正*/
@supports (-ms-ime-align:auto) {
	.imgArea img, .imgArea2 img { position:relative; }
}
.url {
	line-height:1.75;
}
.txtArea h4{
	border-left:1px solid #333;
	padding:8px 15px;
	margin:30px 0;
	font-size:1.4em;
	letter-spacing:1px;
}
h4.title {
	border-top:1px solid #e2e2e2;
	font-size:1.4em;
	letter-spacing:1px;
	padding:50px 0;
	text-align:center;
}
.txtArea .txtimg{
	margin:10px 0;
	width:100%;
	height:auto;
	border:1px solid #d9dfe1;
}
.homebtn {
	font-size:2em;
}

/* お問い合わせ
---------------------------------------------*/
.contactArea{
	margin-top:50px;
}

.contactform{
	text-align:left;
	margin-bottom:100px;
}
.contactform th{
	padding-bottom:8px;
}
.contactform td{
	padding-bottom:15px;
}
.contactform input[type="text"],
.contactform textarea{
	font-size:0.95em;
	margin-bottom:5px;
	border:1px solid #d0d4da;;
	padding:0 8px;
	color:#333;
	background-color:#f4f5f7;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.contactform input[type="text"]{
	width:280px !important;
	height: 36px;
	line-height: 36px;
}
.contactform textarea{
	padding:10px;
	width:500px !important;
}
.contactform input[type="submit"]{
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	background-color:#6b869c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:0 auto;
	font-size:1.1em;
	color:#fff;
	border:none;
	cursor:pointer;
}
.contactform input[type="submit"]:hover{
	background-color:#51697c;
	color:#fff;
}



/* フッター
---------------------------------------------*/
.footerblock {
	background-color:#333;
	padding:100px 0;
}
.footernavi {
	float:left;
	margin-left:50px;
	font-size:0.85em;
	color:#666;
}
.footernavi a{
	color:#999;
	text-decoration:none;
}
.footernavi a:hover{
	color:#fff;
}
#copyright {
	float:right;
	margin-right:50px;
	color:#bbb;
	font-size:0.8em;
	letter-spacing:1px;
}
/*Pagetop*/
#page-top img {
    position: fixed;
    bottom: 50px;
    right: 50px;
	width:25px;
	height:auto;
}

/* トップページ レスポンシブ
---------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
	#story-freext>div:nth-of-type(1) {
    background: url(../images/index/mainA@2x.jpg) 50% 0 no-repeat fixed;
	background-size:1500px auto;
	}
	#story-freext2>div:nth-of-type(1) {
    background: url(../images/index/mainB@2x.jpg) 50% 0 no-repeat fixed;
	background-size:1500px auto;
	}
	#story-freext3>div:nth-of-type(1) {
    background: url(../images/index/mainC@2x.jpg) 50% 0 no-repeat fixed;
	background-size:1500px auto;
	}
}
@media screen and (min-width:601px) and ( max-width:959px) {
	.wrapper {
	width:85%;
	margin:0 auto;
	}
	/*ヘッダー*/
	header {
	background-color:#FFF;
	border-bottom:1px solid #e2e2e2;
	height:80px;
	}
	#logo img {
	top:15px;
	left:20px;
	width:100px;
	height:auto;
	}
	.txtArea .thumbnailArea .thumbnail{
	width:47%;
	}
	.txtArea .thumbnailArea .thumbnail img {
	width:100%;
	height:auto;
	}
	.txtArea .thumbnailArea .thumbnail-left {
	margin-right:6%;
	}
	/*第2階層*/
	.imgArea,
	.imgArea2 {
	margin-top:80px;
	}
	.imgArea img,
	.imgArea2 img {
	position:absolute;
	}
	/*FOOTER*/
	.footerblock{
	text-align:center
	}
	#copyright {
	float: none;
	margin-right:0px;
	}
	.footernavi{
	float: none;
	margin-left:0px;
	margin-bottom:30px;
	}
	/*お問い合わせ*/
	.contactArea{
	margin-top:0px;
	}
}
@media screen and ( max-width:600px ) {
	.wrapper {
	width:85%;
	margin:0 auto;
	}
	/*ヘッダー*/
	header {
	background-color:#FFF;
	border-bottom:1px solid #e2e2e2;
	height:80px;
	}
	#logo img {
	top:15px;
	left:20px;
	width:100px;
	height:auto;
	}
	#story-freext>div:nth-of-type(1),
	#story-freext2>div:nth-of-type(1),
	#story-freext3>div:nth-of-type(1) {
		background-size:1000px;
	}
	.txtArea .thumbnailArea .thumbnail img {
	width:100%;
	height:auto;
	}
	.txtArea .thumbnailArea .thumbnail-left {
	margin-right:0px;
	}
	/*第2階層*/
	.imgArea {
	height:320px;
	margin-top:80px;
	}
	.imgArea2 {
	height:160px;
	margin-top:80px;
	}
	.imgArea img,
	.imgArea2 img {
	position:absolute;
    width:800px;
	height:auto;
    margin-left:-400px;
	}
	.txtArea h4{
	border-left:1px solid #333;
	padding:5px 10px;
	margin:15px 0;
	font-size:1.2em;
	letter-spacing:1px;
	}
	/*FOOTER*/
	.footerblock{
	text-align:center
	}
	#copyright {
	float: none;
	margin-right:0px;
	}
	.footernavi{
	float: none;
	margin-left:0px;
	margin-bottom:30px;
	}
	/*Pagetop*/
	#page-top img {
    bottom: 50px;
    right: 30px;
	}
	/*お問い合わせ*/
	.contactArea{
	margin-top:0px;
	}
	.contactform textarea,
	.contactform input[type="file"]{
	width:280px !important;
	}
	
}