@charset "UTF-8";
@import url("reset.css");

/***************************************/
/*BASE*/
/***************************************/

html, body {
	overflow-y:scroll;
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	overflow:visible;
}

body {
	margin:0;
	padding:0;
	border:0;
	width:100%;
	min-width:320px;
	height:100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1em;
	line-height:1.4;
	color:#000;
	background:#FFFFFF;
	overflow:hidden;
}

body {
    animation:fadeIn 2s ease 0s 1 normal;
    -webkit-animation:fadeIn 2s ease 0s 1 normal;
    -moz-animation:fadeIn 2s ease 0s 1 normal;
    -ms-animation:fadeIn 2s ease 0s 1 normal;
    -o-animation:fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-ms-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-o-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/***************************************/
/*LINK*/
/***************************************/

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

a:hover {
	text-decoration:none;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-ms-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}

/***************************************/
/*NAVI*/
/***************************************/

#globalNavi {
	width:100%;
	background:#fff;
}

#globalNavi ul li a {
	width:20%;
	float:left;
	padding:10px 0;
	color:#D0B774;
	background:#fff;
	text-align:center;
	text-decoration:none;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	box-sizing:border-box;
}

#globalNavi ul li a:hover {
	color:#fff;
	background:#A850BE;
}

.fixed {
    position:fixed;
    top:0;
    width:100%;
    z-index:10000;
}

@media screen and (max-width: 760px) {
	#globalNavi {
		width:100%;
		background:#fff;
		font-size:0.7em;
	}
}

/***************************************/
/*HEADER*/
/***************************************/

header {
	width:100%;
}

#head-lft {
	width:100%;
	height:590px;
	background:url("../img/top-left.png") left bottom no-repeat;
	text-align:center;
}

#head-rgt {
	width:100%;
	height:590px;
	background:url("../img/top-img.png") center bottom no-repeat;
	text-align:center;
}

h1 {
	padding:65px 0px 0px 0px;
	width:100%;
	height:100%;
	background:url("../img/top-right.png") right top no-repeat;
	text-align:center;
}

h1 p {
	padding:60px 0px 30px 0px;
}

#head-btmlft {
	width:100%;
	height:53px;
	background:url("../img/top-left2.png") #A850BE left top no-repeat;
}

#head-btmrgt {
	width:100%;
	height:53px;
	background:url("../img/top-right2.png") right top no-repeat;
}

/***************************************/
/*MAIN*/
/***************************************/

main {
	flex:1;
}

/***************************************/
/*SERVICE*/
/***************************************/

#s1 {
	background:#A850BE;
}

#s1in {
	margin:0 auto;
	padding:60px 0px 60px 0px;
	width:1000px;
	text-align:center;
}

#s1 h2 {
	float:left;
	width:50%;
	text-align:left;
}

#s1 .web {
	float:left;
	width:50%;
	text-align:left;
}

#s1 .web div {
	float:left;
	padding:170px 20px 0px 20px;
	width:300px;
	height:291px;
	color:#A850BE;
	word-wrap: break-word;
	background:url("../img/s1bg.png") left top no-repeat;
	text-align:left;
}

#s1 .illust {
	float:left;
	margin:40px 0px 0px 0px;
	width:50%;
	text-align:right;
}

#s1 .illust div {
	float:right;
	padding:90px 40px 0px 140px;
	width:300px;
	height:291px;
	color:#A850BE;
	word-wrap: break-word;
	background:url("../img/s1bg2.png") center top no-repeat;
	text-align:left;
}

#s1 .edi {
	float:right;
	margin:40px 0px 0px 0px;
	width:50%;
	text-align:center;
}

@media screen and (max-width: 760px) {
	#s1in {
		margin:0 auto;
		padding:60px 0px 60px 0px;
		width:300px;
		text-align:center;
	}

	#s1 h2 {
		margin:0px 0px 40px 0px;
		clear:both;
		width:100%;
		text-align:center;
	}

	#s1 .web {
		clear:both;
		width:100%;
		text-align:center;
	}

	#s1 .web div {
		clear:both;
		padding:170px 20px 0px 20px;
		width:100%;
		height:291px;
		color:#A850BE;
		word-wrap: break-word;
		background:url("../img/s1bg.png") center top no-repeat;
		text-align:left;
	}

	#s1 .illust {
		margin:40px 0px 0px 0px;
		clear:both;
		width:100%;
		text-align:center;
	}

	#s1 .illust div {
		clear:both;
		padding:90px 40px 0px 140px;
		width:100%;
		height:291px;
		color:#A850BE;
		word-wrap: break-word;
		background:url("../img/s1bg2.png") center top no-repeat;
		text-align:left;
	}

	#s1 .edi {
		clear:both;
		margin:0px 0px 0px 0px;
		width:100%;
		text-align:center;
	}
}

/***************************************/
/*gallery*/
/***************************************/

#s2 {
	padding:80px 0px 80px 0px;
	width:100%;
	background:#D0B774;
	text-align:center;
}

#s2 ul#tab-menu {
	margin:0 auto;
	padding:60px 0px 60px 0px;
	width:360px;
	text-align:center;
}

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

	#s2 ul#tab-menu {
		margin:0 auto;
		padding:60px 0px 60px 0px;
		width:100%;
		text-align:center;
	}

}

.s2in {
	padding:20px 20px 20px 20px;
	color:#D0B774;
	text-align:center;
}

#s2in figure {
	margin:0px;
	padding:0px;
	float:left;
	width:200px;
	height:200px;
	border:1px solid #D0B774;
	background:#fff;
	overflow:hidden;
	text-align:center;
}

#s2in img {
	margin:0px;
	padding:0px;
	border:0px;
	height:200px;
    -moz-transition:-moz-transform 0.7s linear;
    -webkit-transition: -webkit-transform 0.7s linear;
    -o-transition:-o-transform 0.7s linear;
    -ms-transition:-ms-transform 0.7s linear;
    transition:transform 0.7s linear;
}

#s2in img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.glbox {
	position:relative;
}

.glcap {
	padding:10px;
	width:200px;
	height:60px;
	font-size:0.8em;
	color:#fff;
	position:absolute;
	bottom:0;
	background:#000;
	background-color:rgba(0, 0, 0, 0.6);
    filter:alpha(opacity=60);
    -ms-filter:"alpha(opacity=60)";
    -moz-opacity:0.6;
    -khtml-opacity:0.6;
    zoom:1;
	text-align:left;
}

/*tab*/
#tab-menu {
	list-style:none;
}

#tab-menu li {
	display:inline-block;
	border:2px solid #D0B774;
}

#tab-menu li:hover {
	border:2px solid #00B285;
}

#tab-menu li.active {
	color:#fff;
	border:2px solid #A850BE;
}

/* タブの中身 */
#tab-box {
}
#tab-box div {
	display:none;
}
#tab-box div.active {
	display:block;
}

/***************************************/
/*about*/
/***************************************/

#s3 {
	width:100%;
	background:#A850BE;
}

#s3in {
	margin:0 auto;
	padding:80px 0px 80px 0px;
	width:1000px;
	text-align:center;
}

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

	#s3in {
		margin:0 auto;
		padding:80px 0px 80px 0px;
		width:100%;
		text-align:center;
	}

}

#s3 h2 {
	margin:0px 0px 40px 0px;
}

#s3 .kao {
	margin:40px 0px 40px 0px;
}

.more {
	margin:20px 0px 0px 0px;
	width: 100%;
}

.prof {
	height:500px;
	background:url("../img/prof.png") center bottom no-repeat;
}

.toggle {
	padding:10px 20px 10px 20px;
	color:#fff;
	position:relative;
	background:#A850BE;
	border:1px solid #fff;
}

.toggle:hover {
	background:#00B285;
	border:1px solid #00B285;
}

.more a:after {
	padding:10px 0px 10px 0px;
	position:absolute;
}

.more a.active:after{
}

.more div {
	display:none;
	margin:10px 0px 0px 0px;
	padding:20px;
	color:#fff;
}

.sns {
	margin:0 auto;
	padding:20px 0px 0px 0px;
	width:50px;
	text-align:center;
}

.twitter {
	padding:15px;
	width:50px;
	height:50px;
	color:#fff;
	background:#00aced;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

.facebook {
	padding:15px;
	width:50px;
	height:50px;
	color:#fff;
	background:#305097;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

.twitter:hover {
	background:#D0B774;
	-webkit-transition:0.6s;
	-moz-transition:0.6s;
	-ms-transition:0.6s;
	-o-transition:0.6s;
	transition:0.6s;
	border-bottom:0px;
}

.facebook:hover {
	background:#D0B774;
	-webkit-transition:0.6s;
	-moz-transition:0.6s;
	-ms-transition:0.6s;
	-o-transition:0.6s;
	transition:0.6s;
	border-top:0px;
}

/***************************************/
/*contact*/
/***************************************/

#s4 {
	width:100%;
	background:url("../img/s4bg2.png") #D0B774 center 95% repeat-x;
}

#s4in {
	margin:0 auto;
	padding:80px 0px 80px 0px;
	width:1000px;
	text-align:center;
}

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

	#s4in {
		margin:0 auto;
		padding:80px 0px 80px 0px;
		width:100%;
		text-align:center;
	}

}

#s4 h2 {
	margin:0px 0px 20px 0px;
	background:url("../img/s4bg.png") center top no-repeat;
}

#s4 .cttlink {
	background:url("../img/s4img2.png") center top no-repeat;
}

#s4 .cttlink:hover {
	background:url("../img/s4img2b.png") center top no-repeat;
}

#s4form div:nth-child(1) {
	float:left;
	width:50%;
	text-align:right;
}

#s4form input {
	margin:0px 0px 10px 0px;
	padding:10px;
	width:300px;
	border:0px;
}

#s4form select {
	margin:0px 0px 10px 0px;
	padding:10px;
	width:300px;
	border:0px;
}

#s4form textarea {
	padding:10px;
	width:300px;
	border:0px;
}

/***************************************/
/*FOOTER*/
/***************************************/

footer {
	padding:40px 0px 40px 0px;
	width:100%;
	color:#fff;
	font-size:0.9em;
	background:#A850BE;
	text-align:center;
}

footer a {
	color:#fff;
}

footer a:hover {
    color:#E6C257;
}

#copyimg {
	margin:0 auto;
	width:180px;
	height:198px;
	background:url("../img/copy.png") left top no-repeat;
}

#copyimg p:nth-child(1) {
	padding:72px 0px 0px 0px;
	text-align:right;
}

#copyimg p:nth-child(2) {
	margin:30px 0px 0px 0px;
	text-align:right;
}

.copyufo {
	margin:0px 0px 0px 140px;
	width:39px;
	height:19px;
    -webkit-animation:swing 2.5s ease-in-out infinite;
    -moz-animation:swing 2.5s ease-in-out infinite;
    -ms-animation:swing 2.5s ease-in-out infinite;
    -o-animation:swing 2.5s ease-in-out infinite;
    animation:swing 2.5s ease-in-out infinite;
	background:url("../img/copy-ufo.png") left top no-repeat;
}

.copyrl {
	margin:33px 0px 0px 143px;
	width:21px;
	height:21px;
    -webkit-animation:spin 2.5s linear infinite;
    -moz-animation:spin 2.5s linear infinite;
    -ms-animation:spin 2.5s linear infinite;
    -o-animation:spin 2.5s linear infinite;
    animation:spin 2.5s linear infinite;
	background:url("../img/copy-rl.png") left top no-repeat;
}

-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-15deg); }  
    20% { -webkit-transform: rotate(10deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }

    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
    0%,100% { 
        -moz-transform-origin: bottom center; 
    }
    10% { -moz-transform: rotate(-15deg); }  
    20% { -moz-transform: rotate(10deg); }
    30% { -moz-transform: rotate(-5deg); }   
    40% { -moz-transform: rotate(5deg); }    
    50% { -moz-transform: rotate(-3deg); }

    60% { -moz-transform: rotate(2deg); }
    70% { -moz-transform: rotate(-2deg); }
    80% { -moz-transform: rotate(1deg); }
    90% { -moz-transform: rotate(-1deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0%,100% { 
        -ms-transform-origin: bottom center; 
    }
    10% { -ms-transform: rotate(-15deg); }  
    20% { -ms-transform: rotate(10deg); }
    30% { -ms-transform: rotate(-5deg); }   
    40% { -ms-transform: rotate(5deg); }    
    50% { -ms-transform: rotate(-3deg); }

    60% { -ms-transform: rotate(2deg); }
    70% { -ms-transform: rotate(-2deg); }
    80% { -ms-transform: rotate(1deg); }
    90% { -ms-transform: rotate(-1deg); }
    100% { -ms-transform: rotate(0deg); }
}
@-o-keyframes swing {
    0%,100% { 
        -o-transform-origin: bottom center; 
    }
    10% { -o-transform: rotate(-15deg); }  
    20% { -o-transform: rotate(10deg); }
    30% { -o-transform: rotate(-5deg); }   
    40% { -o-transform: rotate(5deg); }    
    50% { -o-transform: rotate(-3deg); }

    60% { -o-transform: rotate(2deg); }
    70% { -o-transform: rotate(-2deg); }
    80% { -o-transform: rotate(1deg); }
    90% { -o-transform: rotate(-1deg); }
    100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
    0%,100% { 
        -o-transform-origin: bottom center; 
    }
    10% { transform: rotate(-15deg); }  
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-5deg); }   
    40% { transform: rotate(5deg); }    
    50% { transform: rotate(-3deg); }

    60% { transform: rotate(2deg); }
    70% { transform: rotate(-2deg); }
    80% { transform: rotate(1deg); }
    90% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

#copytxt {
	margin:20px 0px 0px 0px;
}

/***************************************/
/*TOPBACK*/
/***************************************/

#page-top {
	padding:0px 0px 0px 0px;
    position:fixed;
    bottom:20px;
    right:20px;
	z-index:9999;
	text-align:center;
}

#page-top:hover {
	color:#0199CC;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;
    zoom:1;
}