/*---------------
css action
---------------*/

/*---------------
	.fadeRight{
		animation-name: fadeRightAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeRightAnime{
		from {
			opacity: 0;
			transform: translateX(100px);
		}
		to {
			opacity: 0;
			transform: translateX(0);
		}
	}
---------------*/


/*---------------
container(pc)
---------------*/
@media screen and (min-width: 1281px){
/*main_area*/
	#main_area {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 160px);
		margin: 0 auto;
	}
	#main_area .main_txt{
		position: relative;
		width: 30%;
		min-width: 350px;
		text-align: right;
	}
	#main_area h2{
		position: absolute;
		bottom: 80px;
		font-family: 'Yu Gothic','sans-serif';
		font-weight: 500;
		font-size: 15px;
		line-height: 2.5em;
		right: 60px;
	}





/*-- contents --*/
	#contents section {
		margin-top: 180px;
		padding-top: 90px;
	}

	#contents .contents_wrapper {
		width: calc(100% - 160px);
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
	}

	#contents .contents_inner {
		width: calc(100% - 200px);	
	}
	#contents .contents_tit {
		width: 200px;
	}
	#contents .contents_tit p {
		display: flex;
		font-size: 24px;
		font-weight: 400;
	}

	.fadeRight{
		animation-name: fadeRightAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeRightAnime{
		from {
			opacity: 0;
			transform: translateX(200px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	



/* blog */
	section#blog{
		margin-top: 60px;
	}
	
	#blog .entry_list{
		display: flex;
	}
	#blog .entry_list{
		position: relative;
		width: 22px;
		margin-right: 4%;
	}
	
	#blog .btn{
		text-align: center;
	}
	

/* about */
	#about .atmosphere {
		display: flex;
		width: 100%;
	}
	
	#about .atmosphere + .atmosphere {
		margin-top: 100px;
	}
	
	#about .atmosphere.reverse {
		flex-direction: row-reverse;
	}
	#about .atmosphere .image_wrapper {
		width: 60%;
		padding-bottom: 5%;
		position: relative;
		overflow: hidden;
	}
	#about .atmosphere .textbox {
		position: relative;
		width: 50%;
		min-width: 300px;
	}

	#about .atmosphere .textbox h3 {
		font-family: 'Noto Sans JP', 'sans-serif';
		font-weight: 300;
		font-size: 15px;
		font-feature-settings: "palt";
		position: absolute;
		bottom: 30px;
		letter-spacing: .3em;
		line-height: 2.5em;
		margin: 0 auto;
		left: 20%;
	}

	#about .atmosphere.reverse .textbox {
		text-align: right;
	}	

	#about .atmosphere.reverse .textbox h3 {
		text-align: right;
		right: 10%;
	}	

	#about .about_image {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 80px);
		margin-top: 120px;	
	}




/* access */
	#access.contents_wrapper {
		margin-top: 130px;
	}
	#access .ac_info {
		display: flex;
		justify-content: space-between;
	}
	#access .ac_map {
		/*height: 0; */
		overflow: hidden;
		padding-bottom: 5%;
		position: relative;
		margin-top: 80px;
	}
	#access .ac_map iframe {
		potision: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
	}
	#access .ac_info {
		display: flex;
		justify-contents: space-between;
	}
	#access .ac_info .photo {
		width: 45%;
	}
	#access .ac_info .info {
		display: flex;
		align-items: center;
		width: 50%;
	}
	#access .ac_info .info table{
		width: 100%;
	}
	#access .ac_info .info table th,
	#access .ac_info .info table td{
		padding: 15px 5px;
		border-bottom: dotted 1px #dedede;
	}


/* stuff */



/* menu */
	#menu .me_list {
		display: flex;
		margin-top: 40px;
		flex-wrap: wrap;
	}
	#menu .me_list li {
		width: 28%;
		margin-right: 5%;
		margin-top: 20px;
		padding-bottom: 20px;
		border-bottom: dotted 1px #dedede;
	}

/* style */
	#style .st_list{
		display: flex;
		flex-wrap: wrap;
	}
	#style .st_list li{
	     width: 16%;
		 margin-right: .8%;
	}
	#style .st_list li:nth-child(6n){
		 margin-right: 0;
	}
	#style .st_list li img{
	     width: 160px;
	     height: 240px;
	}
}


/*---------------
container(smartphone)
---------------*/
@media screen and (min-width: 601px) and (max-width: 900px) {
/*main_area*/
	#main_area {
		position: relative;
		width: 100%;
		height: 100vh;
	}
	#main_area .main_txt {
		position: absolute;
		z-index: 2;
		bottom: 40px;
		left: 40px;
	}
	#main_area h2 {
		font-family: 'Yu Gothic','sans-serif';
		font-weight: 500;
		font-size: 15px;
		font-feature-settings: "palt";
		letter-spacing: .2em;
		line-height: 2em;
		color: #fff;
	}
/*contents_area*/
	#contents {
		position: relative;
	}
	#contents section {
		margin-top: 70px;
		padding-top: 30px;
	}
	#contents .contents_tit {
		display: flex;
		align-items: center;
	}
	#contents .contents_tit p {
		display: flex;
		font-size: 24px;
		margin: 10px 0;
	}
}
	
	

@media screen and (max-width: 600px) {
/*main_area*/
	#main_area {
		display: flex;
		width: 100%;
		flex-direction: column-reverse;
		/*height: calc(100vh - 300px);*/
		top: 60px;
		position: relative;
	}
	#main_area .main_txt {
		position: relative;
		padding: 30px 0 40px;
		text-align: center;
	}
	#main_area h2 {
		font-family: 'Yu Gothic','sans-serif';
		font-weight: 500;
		font-size: 14px;
		font-feature-settings: "palt";
		letter-spacing: .2em;
		line-height: 2em;
	}
	#main_area .main_image_wrapper {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	/*
	#main_area .main_image_wrapper img {
		position: absolute;
	}
	*/
/*contents_area*/
	#contents {
		potision: relative;
	}
	#contents section {
		margin-top: 70px;
		padding-top: 30px;
	}
	#contents .contents_wrapper {
		width: 90%;
		margin: 0 auto;
	}
	#contents .contents_tit {
		display: flex;
		align-items: center;
	}
	#contents .contents_tit p {
		display: flex;
		font-size: 24px;
		margin: 10px 0;
	}
	#contents .contents_inner {
		width: 100%;
		margin-top: 20px;
	}
/*button*/
	#content .btn_more {
		font-weight: 700;
		font-size: 14px;
		display: inline-block;
		line-height: 1;
		cursor: pointer;
		margin: 30px auto 0;
		transition-duration: .3s;
		transition-property: color opacity;
	}
/*blog*/
	#blog btn {
		text-align: center;
	}
/*about*/
	#about .atmosphere {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	#about .atmosphere.reverse {
		flex-direction:row-reverse;
	}
	#about .atmosphere + .atmosphere {
		margin-top: 40px;
	}
	#about .atmosphere .image_wrapper {
		width: 80%;
		padding-bottom: 60%;
		position: relative;
		overflow: hidden;
	}
	#about .atmosphere .image_wrapper img {
		position: absolute;
	}
	#about .atmosphere .textbox {
		margi-top: 20px;
		width: 100%;
	}
	#about .atmosphere .textbox h3 {
		bottom: 60px;
		font-size: 14px;
		font-feature-setting: "palt";
		letter-spacing: .2em;
		line-height: 2.5em;
		margin: 0 auto;
		left: 10%;
		
	}
	#about .atmosphere.reverse .textbox {
		text-align: right;
	}
	#about .atmosphere.reverse .textbox h3 {
		text-align: right;
		right: 10%;
	}
	#about .about_image {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 60px;
	}
	#about .about_image li {
		width: 50%;
	}
/* access */
	#access.contents_wrapper {
		margin-top: 60px;
	}
	#access .ac_map {
		height: 0;
		overflow: hidden;
		padding-bottom: 90%;
		position: relative;
		margin-top: 40px;
	}
	#access .ac_map iframe {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
	}
	#access .ac_info {
		display: flex;
		flex-direction: column;
	}
	#access .ac_info photo {
		width: 100%;
		margin: 0 auto;
	}
	#access .ac_info .info {
		width: 100%;
		margin-top: 30px;
	}
	#access .ac_info .info table {
		width: 100%;
	}
	#access .ac_info .info table th,
	#access .ac_info .info table td {
		padding: 15px 5px;
		border-bottom: dotted 1px #dedede;
	}

/* menu */
	#menu .me_list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20px;
	}
	#menu .me_list li {
		width: 100%;
		margin-top: 15px;
		padding-bottom: 15px;
		border-bottom: dotted 1px #DEDEDE;
	}
	#menu .me_list li dl {
		display: flex;
		width: 100%;
	}
	#menu .me_list li dl dt {
		width: 45%;
		padding-left: 5px;
	}
	#menu .me_list li dl dd {
		width: 55%;
		padding-left: 5px;
	}
/* style */
	#style .st_list {
		display: flex;
		flex-wrap: wrap;
	}
	#style .st_list li {
		display: none;
		opacity: 0;
		transition-duration: 1s;
		transition-property: opacity;
		width: 32%;
		margin-right: 1.8%;
	}
	#style .st_list li a{
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		padding-bottom: 126.7%;
		transition-duration: 4s;
		1transition-property: opacity;	
	}
}