.page-profile .contents .owner {
width: 100%;
padding: 100px 0 0;
margin: 0 auto 0;
background-image: url(//www.attic-bike.com/profile/img/photo-01.png);
background-repeat: no-repeat;
background-size: auto 430px;
background-position: 0 100%;
border-bottom: none;
position: relative;
}
.page-profile .contents .owner:before {
content: "";
position: absolute;
display: block;
left: 0;
bottom: 0;
width: 573px;
height: 431px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 60%, white 88%, white);
}
.page-profile .contents .owner .unit {
width: 970px;
padding: 0 0 54px;
margin: 0 auto 0;
position: relative;
}
.page-profile .contents .owner .unit .post {
display: block;
margin: 0 auto 0;
font-size: 13px;
font-size: 1.3rem;
}
.page-profile .contents .owner .unit h3 {
padding: 0;
margin: 0 auto 16px;
border: none;
}
.page-profile .contents .owner .unit h3 .kana {
display: inline-block;
font-size: 12px;
font-size: 1.2rem;
}
.page-profile .contents .owner .unit .lead {
margin: 0 auto 16px;
font-size: 22px;
font-size: 2.2rem;
}
.page-profile .contents .owner .unit .txt p {
margin: 0 auto 20px;
line-height: 1.8;
}
.page-profile .contents .owner .unit .txt p:last-child {
margin: 0 auto 0;
}
.page-profile .contents .owner .unit .txt p a {
text-decoration: underline;
}
.page-profile .contents .owner .unit .txt p a:hover {
text-decoration: none;
}
.page-profile .contents .owner .unit .photo {
width: 420px;
margin: 0 auto 0;
position: absolute;
bottom: 0;
}
.page-profile .contents .owner .box {
padding: 0 0 0 498px;
}
.page-profile .contents .message-01,
.page-profile .contents .message-02 {
width: 100%;
height: 450px;
background-repeat: no-repeat;
position: relative;
}
.page-profile .contents .message-01:before,
.page-profile .contents .message-02:before {
content: "";
position: absolute;
display: block;
}
.page-profile .contents .message-01 .unit,
.page-profile .contents .message-02 .unit {
width: 924px;
padding: 0 0;
margin: 0 auto 0;
position: relative;
}
.page-profile .contents .message-01 .lead,
.page-profile .contents .message-02 .lead {
margin: 0 auto 24px;
font-size: 22px;
font-size: 2.2rem;
}
.page-profile .contents .message-01 .txt p,
.page-profile .contents .message-02 .txt p {
margin: 0 auto 24px;
line-height: 1.8;
}
.page-profile .contents .message-01 .txt p:last-child,
.page-profile .contents .message-02 .txt p:last-child {
margin: 0 auto 0;
}
.page-profile .contents .message-01 {
background-color: #f3f3f3;
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/profile/img/photo-02.png);
background-size: auto 450px;
background-position: 100% 0;
position: relative;
}
.page-profile .contents .message-01 .unit {
padding-right: 460px;
}
.page-profile .contents .message-01:before {
right: 0;
bottom: 0;
width: 710px;
height: 100%;
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 66%, #f3f3f3 92%, #f3f3f3);
}
.page-profile .contents .message-02 {
border-bottom: none;
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/profile/img/photo-03.png);
background-size: auto 450px;
background-position: 0 0;
}
.page-profile .contents .message-02 .unit {
padding-left: 460px;
}
.page-profile .contents .message-02:before {
left: 0;
bottom: 0;
width: 710px;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 51%, #fff 79%, #fff);
}
.page-profile .contents .interview {
width: 924px;
margin: -20px auto 120px;
text-align: right;
}
@media screen and (max-width: 999px) {
.page-profile .contents .owner {
width: 100%;
padding: 0 0 40px;
margin: 0 auto 0;
background: none !important;
}
.page-profile .contents .owner:before {
display: none;
}
.page-profile .contents .owner .unit {
width: 100%;
padding: 0;
margin: 0 auto 0;
position: relative;
}
.page-profile .contents .owner .unit .post,
.page-profile .contents .owner .unit h3 {
display: none;
}
.page-profile .contents .owner .unit .lead {
font-size: 18px;
font-size: 1.8rem;
}
.page-profile .contents .owner .unit .lead br {
display: none;
}
.page-profile .contents .owner .unit .txt p {
margin: 0 auto 20px;
font-size: 12px;
font-size: 1.2rem;
text-align: justify;
line-height: 1.8;
}
.page-profile .contents .owner .unit .txt p:last-child {
margin: 0 auto 0;
}
.page-profile .contents .owner .unit .photo {
width: 100%;
margin: 0 auto 0;
position: relative;
}
.page-profile .contents .owner .unit .photo:before {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 52%, white 79%, white);
}
.page-profile .contents .owner .box {
padding: 0;
}
.page-profile .contents .owner .box .photo-box {
position: relative;
}
.page-profile .contents .owner .box .name-box {
display: inline-block;
width: 194px;
height: 60px;
margin: -30px auto 0;
background-color: rgba(255, 255, 255, 0.84);
position: absolute;
top: 50%;
right: 0;
}
.page-profile .contents .owner .box .name-box p,
.page-profile .contents .owner .box .name-box h3 {
display: inline-block;
padding: 0 0 0 10px;
}
.page-profile .contents .owner .box .name-box p {
margin: 8px auto 0;
font-size: 12px;
font-size: 1.2rem;
}
.page-profile .contents .owner .box .name-box h3 {
margin: 0 auto 0;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.page-profile .contents .owner .box .name-box h3 span {
font-size: 10px;
font-size: 1.0rem;
}
.page-profile .contents .owner .box .sub-ttl {
font-size: 18px;
font-size: 1.8rem;
}
.page-profile .contents .message-01,
.page-profile .contents .message-02 {
height: auto;
padding: 0 0 40px;
margin: 0 auto 0;
background-image: none !important;
}
.page-profile .contents .message-01:before,
.page-profile .contents .message-02:before {
width: 0;
height: 0;
}
.page-profile .contents .message-01 .photo,
.page-profile .contents .message-02 .photo {
position: relative;
}
.page-profile .contents .message-01 .photo:before,
.page-profile .contents .message-02 .photo:before {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, white 96%, white);
}
.page-profile .contents .message-01 .unit,
.page-profile .contents .message-02 .unit {
width: 100%;
padding: 0 0;
margin: 0 auto 0;
}
.page-profile .contents .message-01 .lead,
.page-profile .contents .message-02 .lead {
margin: 0 auto 20px;
font-size: 18px;
font-size: 1.8rem;
}
.page-profile .contents .message-01 .txt p,
.page-profile .contents .message-02 .txt p {
margin: 0 auto 24px;
line-height: 1.8;
}
.page-profile .contents .message-01 .txt p:last-child,
.page-profile .contents .message-02 .txt p:last-child {
margin: 0 auto 0;
}
.page-profile .contents .message-01 {
background-color: #fff;
position: relative;
}
.page-profile .contents .message-01 .unit {
padding-right: 0;
}
.page-profile .contents .message-02 {
padding-bottom: 40px;
margin: 0 auto 40px;
border-bottom: 1px solid #D5D5D5;
position: relative;
}
.page-profile .contents .message-02 .unit {
padding-left: 0;
}
.page-profile .contents .interview {
width: 100%;
padding: 0 20px;
margin: 0 auto 0;
text-align: right;
position: relative;
top: -70px;
}
}