@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* CSS Document */
/*****	story	*****/
/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
}
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/*********** new Design ***********/
/* intro */
.bgStyle01{
	background: url("../../img/common/bg_index01.png") 0 0 repeat;
}

.buttonList{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 40px;
}

.buttonList__item{
	-webkit-box-flex: 0;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
}

.buttonList__item:first-child{
	padding-right: 5px;
}

.buttonList__item:last-child{
	padding-left: 5px;
}

.buttonStyle01 {
	display: block;
	max-width: 300px;
	margin: 0 auto;
	padding: 20px 25px;
	border-radius: 30px;
	border: 1px solid #3e2816;
	color: #3e2816;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
}

.buttonList__item:hover a.buttonStyle01{
	-webkit-animation-name: buttonanimation03;
	animation-name: buttonanimation03;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

a.buttonStyle01:hover {
	color: #fff;
	font-weight: bold;
	background: #3e2816;
	border: 1px solid #3e2816;
}

@media screen and (max-width: 836px) {
	.buttonStyle01 {
		display: block;
		max-width: 300px;
		margin: 0 auto;
		padding: 15px 20px;
		border-radius: 30px;
		border: 1px solid #3e2816;
		color: #3e2816;
		text-decoration: none;
		text-align: center;
		font-weight: bold;
		font-size: 14px;
		font-family: 'Quicksand', sans-serif;
	}
}

@-webkit-keyframes buttonanimation03{
0{
	-webkit-transform : rotate(0deg);
	transform : rotate(0deg);
}
20%{
	-webkit-transform : rotate(-40deg);
	transform : rotate(-40deg);
}
30%{
	-webkit-transform : rotate(-20deg);
	transform : rotate(-20deg);
}
30%{
	-webkit-transform : rotate(-30deg);
	transform : rotate(-30deg);
}
100%{
	-webkit-transform : rotate(360deg);
	transform : rotate(360deg);
}
}

@keyframes buttonanimation03{
0{
	-webkit-transform : rotate(0deg);
	transform : rotate(0deg);
}
20%{
	-webkit-transform : rotate(-40deg);
	transform : rotate(-40deg);
}
30%{
	-webkit-transform : rotate(-20deg);
	transform : rotate(-20deg);
}
30%{
	-webkit-transform : rotate(-30deg);
	transform : rotate(-30deg);
}
100%{
	-webkit-transform : rotate(360deg);
	transform : rotate(360deg);
}
}


.buttonStyle01.buttonStyle01--active {
	color: #fff;
	font-weight: bold;
	background: #3e2816;
	border: 1px solid #3e2816;
}

.introList{
	padding-bottom: 100px;
}

.introList__item{
	margin-top: 80px;
}

.introBlock{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 40px;
}

@media screen and (min-width: 836px) {
	/* tablet pc */
	.introBlock__img + .introBlock__text{
		padding-left: 40px;
	}

	.introBlock__text + .introBlock__img {
		padding-left: 20px;
	}
}

@media screen and (max-width: 836px) {
	/* sp */
	.introBlock{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.introBlock__img + .introBlock__text{
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
	}

	.introBlock__img {
		margin-top: 40px;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}
}

.introBlock__text {
	-webkit-box-flex:1;
	-ms-flex:1 0 50%;
	flex:1 0 50%;
	color: #3e2816;
	font-family: 'Noto Sans Japanese', sans-serif;
	text-shadow:
			2px 1px 0px rgba(255,255,255,0.8),
			2px 3px 5px rgba(0,0,0,0.2);
	font-size: 20px;
	line-height: 1.8;
}

.introBlock__text p + p{
	margin-top: 20px;
}

.introBlock__text--big{
	font-size: 20px;
	text-align: center;
}

.popinqImg{
	display: inline-block;
	margin: 0 10px;
	width: 140px;
	height: auto;
	vertical-align: -6.9px;
}

.introBlock__img--normal{
	-webkit-box-flex: 0;
	-ms-flex: 0 1 35%;
	flex: 0 1 35%;
}
.introBlock__img--big{
	-webkit-box-flex: 0;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
}

.introBlock__img img{
	width: 100%;
	vertical-align: top;
}

.introBlock__img--style01{
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

.introBlock__img--style02{
	-webkit-transform: rotate(2deg);
	transform: rotate(2deg);
}

.titleTopImg{
	width: 100%;
	height: auto;
}

.introSingleImg{
	display: block;
	max-width: 640px;
	width: 100%;
	height: auto;
	margin: 50px auto 0;
}

.introSingleImg img{
	width: 100%;
	height: auto;
}

.introSingleImg--style01{
	-webkit-transform: rotate(2deg);
	transform: rotate(2deg);
}

.nameStyle01{
	display: inline-block;
	margin-right: 5px;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	text-shadow:
			0px 0px 3px rgba(112,50,198,1),
			0px 0px 3px rgba(112,50,198,1),
			0px 0px 6px rgba(112,50,198,1),
			0px 0px 12px rgba(112,50,198,1);
}

.nameStyle02{
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow:
			0px 0px 3px rgba(112,50,198,1),
			0px 0px 3px rgba(112,50,198,1),
			0px 0px 6px rgba(112,50,198,1),
			0px 0px 12px rgba(112,50,198,1);
}

.specialText{
	display: inline-block;
	margin-right: 5px;
	font-size: 34px;
	font-weight: bold;
	color: #fff;
	text-shadow:
			0px 0px 3px #e9cc2b,
			0px 0px 3px #e9cc2b,
			0px 0px 6px #e9cc2b,
			0px 0px 12px #e9cc2b;
}

.topName01{
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow:
			0px 0px 3px #f28b38,
			0px 0px 3px #f28b38,
			0px 0px 6px #f28b38,
			0px 0px 12px #f28b38;
}

.textStyle01{
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow:
			0px 0px 3px #1578ff,
			0px 0px 3px #1578ff,
			0px 0px 6px #1578ff,
			0px 0px 12px #1578ff;
}

.cvName01,
.cvName02,
.cvName03,
.cvName04,
.cvName05{
	display: inline-block;
	padding: 0 10px;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}

.cvName01{
	text-shadow:
			0px 0px 3px #ff7186,
			0px 0px 3px #ff7186,
			0px 0px 6px #ff7186,
			0px 0px 12px #ff7186;
}
.cvName02{
	text-shadow:
			0px 0px 3px #6d8ee6,
			0px 0px 3px #6d8ee6,
			0px 0px 6px #6d8ee6,
			0px 0px 12px #6d8ee6;
}
.cvName03{
	text-shadow:
			0px 0px 3px #ffcf56,
			0px 0px 3px #ffcf56,
			0px 0px 6px #ffcf56,
			0px 0px 12px #ffcf56;
}
.cvName04{
	text-shadow:
			0px 0px 3px #67c7c2,
			0px 0px 3px #67c7c2,
			0px 0px 6px #67c7c2,
			0px 0px 12px #67c7c2;
}
.cvName05{
	text-shadow:
			0px 0px 3px #9e7be5,
			0px 0px 3px #9e7be5,
			0px 0px 6px #9e7be5,
			0px 0px 12px #9e7be5;
}

/* story */

@media screen and (min-width: 836px) {
	/* tablet pc */
	.storyTextArea{
		padding: 60px 10px 0;
		font-size: 22px;
	}
}

@media screen and (max-width: 836px) {
	/* sp */
	.storyTextArea{
		padding: 40px 10px 0;
		font-size: 18px;
	}
}

.storyBlock{
	padding-bottom: 80px;
}

.storyTextArea{
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	line-height: 1.8;
	color: #3e2816;
	text-shadow:
			2px 1px 0px rgba(255,255,255,0.8),
			2px 3px 5px rgba(0,0,0,0.2);
	font-family: 'Noto Sans Japanese', sans-serif;
}

.storyTextArea:first-child{
	padding-top: 80px;
}

.storyTextArea img{
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

.storyImgArea{
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 10px 0;
	box-sizing: border-box;
}

.storyImgArea img{
	display: block;
	margin: 0 auto;
	width: 100%;
}