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



.main > .content {
	width: 1000px;
	max-width: calc(100% - 64px);
	margin: 0 auto;
}

.gallery a{
    width: 100px;
    display: block;
    float: left;
    margin-right: 10px;
}
.gallery img{
    width: 100px;
}

#intro h2 img,#one h2 img,#two h2 img,#three h2 img,#contact h2 img{
    width: 600px;
    margin: 50px auto 20px;
}

#two h2 img,#three h2 img,#contact h2 img{
    margin-left: 20%;
}

/*　WEBサイト
--------------------------------------*/
.work_text{
	font-size:12px;
}

#intro .from-right a:hover img{
	opacity: 0.7;
}
#intro .from-left a:hover img{
	opacity: 0.7;
}



/* Original
--------------------------------------*/

/* Box */

.box {
	background: #ffbbbd;
	color: #39454b;
	padding: 32px;
}

.content .box a img{
	width:100%;
}

.content .orig img{
	width:100%;
}

/* Button
---------------------------*/
input[type="button"].style2.down,
input[type="submit"].style2.down,
input[type="reset"].style2.down,
.button.style2.down,
button.style2.down {
	background-image: url("../../img/dark-arrow.svg");
}

/* 背景イラスト
---------------------------*/
#intro,#one,#two,#contact {
    background-image:none;
}


.main.style3.primary {
    background: #c4d23d;
}

/* Gallery
---------------------------*/
.gallery {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
/*    width: 750px;
    max-width: 103%;*/
    margin: 30px auto 32px auto;
}
.gallery article {
	-moz-transition: -moz-transform 1s ease, opacity 1s ease;
	-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
	-ms-transition: -ms-transform 1s ease, opacity 1s ease;
	transition: transform 1s ease, opacity 1s ease;
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	width: 33%;
	position: relative;
	opacity: 1.0;
	padding-bottom: 1%;
}

.gallery .img {
	margin: 0;
	display: block;
	padding-right:10px;
}


.gallery.inactive article {
	opacity: 0;
}

.gallery.inactive article.from-left {
	-moz-transform: translateX(-224px);
	-webkit-transform: translateX(-224px);
	-ms-transform: translateX(-224px);
	transform: translateX(-224px);
}

.gallery.inactive article.from-right {
	-moz-transform: translateX(224px);
	-webkit-transform: translateX(224px);
	-ms-transform: translateX(224px);
	transform: translateX(224px);
}

.gallery.inactive article.from-top {
	-moz-transform: translateY(-112px);
	-webkit-transform: translateY(-112px);
	-ms-transform: translateY(-112px);
	transform: translateY(-112px);
}

.gallery.inactive article.from-bottom {
	-moz-transform: translateY(112px);
	-webkit-transform: translateY(112px);
	-ms-transform: translateY(112px);
	transform: translateY(112px);
}

/* Main
---------------------------*/
.main.dark .button.style2.down {
	background-image: url("../../img/dark-arrow.svg");
}


/* One
---------------------------*/

#one {
	text-align:center;
}

/* 備考欄
---------------------------*/
#remarks{
    background: #3ec3ca;
}
#remarks div{
    width: 1000px;
    margin: 0 auto;
    background: #3ec3ca;
    padding: 30px 0;
}


/*====================================
    SP
======================================*/

@media screen and (max-width: 1920px) {
/* Main
---------------------------*/
	.main .style2 .content {
		width: 79%;
	}

/* Type
---------------------------*/
	body, input, textarea, select {
		font-size: 17pt;
	}

}

@media screen and (max-width: 1680px) {
/* Type
---------------------------*/
	body, input, textarea, select {
		font-size: 15pt;
	}

}

@media screen and (max-width: 1280px) {
/* Main
---------------------------*/
	.main .style2 .content {
		width: 50%;
	}
	
/* Type
---------------------------*/
	body, input, textarea, select {
		font-size: 13pt;
	}

}

@media screen and (max-width: 1000px) {
/* Main
---------------------------*/
	.main .style2 .content {
		width: 60%;
	}
}



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

    .gallery a{
        margin: 5px;
    }

    .main > .content {
        padding-bottom: 50px;
    }  

    #intro h2 img,#one h2 img,#two h2 img,#three h2 img,#contact h2 img{
        width: 80%;
        margin: 10px auto 10px;
    }
    
/* Box
---------------------------*/
	.box {
		padding: 16px;
	}

	.box.style2 {
		padding: 24px 20px 24px 20px;
		background-color: rgba(255, 255, 255, 0.9);
	}
	
	body {
		padding-top: 40px;
	}
/* Main
---------------------------*/
	.main.fullscreen {
		height: auto !important;
	}

	.main.style1 {
		padding: 64px 15px 64px 15px;
	}

	.main.style1 h2 {
		font-size: 48px;
	}

	.main.style2 {
		padding: 96px 15px 96px 15px;
	}

	.main.style2:before, .main.style2:after {
		display: none !important;
	}
/*
	.main.style2 .button.anchored {
		display: none;
	}*/

	.main .style2 .content {
		width: 100%;
		max-width: 100%;
		text-align: center;
		-moz-transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	.main.style3 {
		text-align: center;
		padding: 48px 10px 48px 10px;
	}	
	
/*    #two h2 img,#three h2 img,#contact h2 img{
        margin-left: 0;
    }*/

		
    /* Type
    ---------------------------*/
	body, input, textarea, select {
		font-size: 12pt;
		line-height: 24px;
	}
	
    /* Contact
    ---------------------------*/
	#contact .box {
		padding-bottom: 32px;
	}
    
    /* 備考欄
    ---------------------------*/  
    #remarks div {
        width: 100%;
        padding: 30px;
    }
    
    
}

@media screen and (max-width: 480px) {
/* Main
---------------------------*/
	.main > .content {
		max-width: calc(100% - 24px);
	}
	
/* Gallery
---------------------------*/
	.gallery {
		-moz-flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.gallery article,.gallery {
		width: 100%;
	}


}