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

header{
	background-image: url("../images/about/h2_about.jpg");
	background-repeat:  no-repeat;
	background-size: cover;
	background-position: center center;
	padding-bottom: 200px;
}
.main{
	margin-top: 0;
	padding: 0;
}

.beginning{
	padding: 80px 40px 80px 0;
	/*text-align: center;*/
	background: url("../images/about/bg_about01.png") no-repeat;
	background-size: auto 100%;
	background-position: right center;
}
.beginning p{
	margin-bottom: 60px;
	font-size: 20px;
	font-family: 'Zen Old Mincho', serif;
}
.reason {
	padding-bottom: 80px;
	transform: translateY(-60px);
}
.reason > p{
	text-align: center;
	margin: 40px 0
}
.reason > p::before{
	display: block;
	content: "";
	width: 1px;
	height: 60px;
	margin: -40px auto 0;
	border-left: 1px solid #404040;
/*	transform: translateY(-20px);*/
	
}


.reason p span{
	color: #A4EBF3;
	font-size: 30px;
}
.bg_three{
	background: linear-gradient(180deg, rgba(255,255,255,1) 4%, rgba(244,245,243,1) 4%, rgba(244,245,243,1) 100%, rgba(255,255,255,1) 100%);
}
.sunny{
	padding: 0 0 40px;
	overflow: hidden;
}
.base{
/*	position: relative;*/
	margin-bottom: -330px;
/*	overflow: hidden;*/
	overflow: hidden;
	
}
.pic_wrap_sunny{
	width: 50%;
}
.pic_wrap_height_sunny{
	width: 100%;
	height: 0;
	padding-bottom: 80%
}
.pic_wrap_sunny .pic_wrap_height_sunny{
	
	background-size: cover;
	background-position: center center;
}
.pic_wrap_sunny .pic_wrap_height_sunny.one{
	background: url("../images/about/pic_sunny.jpg") no-repeat;
}
.pic_wrap_sunny .pic_wrap_height_sunny.two{
	background: url("../images/about/pic_new_bone.png") no-repeat;
}
.pic_wrap_sunny .pic_wrap_height_sunny.three{
	background: url("../images/about/pic_dream.png") no-repeat;
}

.para{
	width: 60%;
	padding: 2vh 60px 20px 20px;
	margin-left: auto;
	background: rgba(244,245,243,.6);
	transform: translateY(-330px);
}
#new_bone .para{
	margin:0 auto 0 0;
	padding: 2vh 20px 20px 60px;
	transform: translateY(-330px);
}
#new_bone .pic_wrap_sunny{
	margin-left: auto;
}
.wrap_new_bone{
	padding: 40px 0;
	background: #B6BAAD;
}
h3.zenkaku_min{
	font-size: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.h3_title ,.h3_num{
	display: block;
}
.h3_num{
	color: #A4EBF3;
	font-family: 'Alex Brush', cursive;
	font-size: 60px;
}

.dream{
	padding-top: 40px;
}

.reason_flex{
	overflow: hidden;
}
.reason img{
	width: 35%;
	min-width: 250px;
	height: auto;
	
}

.reason_flex p{
	width: 100%;
}
.reason .fluid{
	
/*	float: right;*/
/*	padding: 0 0 2rem 2rem;*/
}
.reason .fluid2{
	width: 40%;
	float: left;
	padding: 0 2rem 2rem 0;
}

.my_profile_h3_wrap h3{
	font-size: 4.8rem;
	text-align: center;
}

.head-border{
	font-size: 2.4rem;
	display: flex;
	align-items: center;
}

.head-border::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #D8D8D8;
	margin-left: 2.4rem;
}
 
/*.head-border:before {
    margin-right: 2.4rem;
}*/


.my_profile_wrap{
	width: 80%;
	margin: 0 auto 80px;
}
.my_photo{
	width: 36%;
	
	}
.my_photo img{
	border: 1px solid #D8D8D8;
	padding: 6px;
}
.area_my_profile{
	width: 55%;
}
.my_profile_wrap h4{
	font-size: 30px;
	font-family: 'Zen Old Mincho', serif;
}
.my_profile_wrap h4 .alex{
	padding-left: 20px;
	font-size: 24px;
	color: #B6BAAD;
}
.my_profile_wrap ul{
	list-style-type: disc;
/*	list-style-position: inside;*/
}
.my_profile_wrap li{
	color: #A4EBF3;
	margin-left:  2rem
}

.my_profile_wrap li span {
  color: #404040;
}
.photographer h3{
	font-size: 24px;
}
.photographer {
    width: 80%;
    margin: 0 auto;
	padding: 0;
}

@media (max-width:800px){
	.reason{
		transform: translateY(-50px);
	}
.reason > p {
    margin: 40px 0 80px;
}
	.base{
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

	.bg_three{
	background: rgba(244,245,243,1);
	}
	.pic_wrap_sunny {
	width: 80%;
	margin: 0 auto;
	order: 2;
}
	.para, #new_bone .para{
	order: 1;
	width: 80%;
	margin: 0 auto;
	padding: 0 0 40px 0;
	transform: translateY(0);
}


}/*800*/

@media (max-width:768px){
.my_photo{
	width: 60%;
	margin: 0 auto 20px;
	}
	.my_profile_wrap.flex{
		display: block;
	}
	.area_my_profile{
		width:100%;
		margin: 0 auto;
	}
}/*768*/


@media (max-width:480px){
	.reason > p{
	padding: 0 40px;
}
	.area_my_profile{
		widows: 80%;
		margin: 0 auto;
	}
}/*480*/