@charset "UTF-8";
@import "../../../assets/css/page.css";
#intro{
position:relative;
}

#intro p{
font-size:16px;
line-height:1.8;
}

@media screen and (max-width:640px){
#intro p{
font-size:14px
}
}

#intro .img{
width:calc(100% - 460px);
float:right;
}

@media screen and (max-width:768px){
#intro .img{
float:none;
width:auto;
text-align:center
}
}

#intro .txt{
float:left
}

@media screen and (max-width:960px){
#intro{
margin-bottom:100px
}
}

#title{
background:url("../../../assets/img/contents/paint_yellow.png") left 0 no-repeat;
background-size:100% 100%;
display:inline-block;
margin-left:-50px;
margin-top:30px;
padding:45px 20px 50px 45px;
position:relative;
}

@media screen and (max-width:640px){
#title{
background-size:90% 100%;
background-position:center center;
margin-left:0;
display:block;
margin-top:-15px;
padding:40px 10px 40px 20px;
text-align:center
}
}

#title h1{
font-size:24px;
letter-spacing:2px;
}

@media screen and (max-width:640px){
#title h1{
font-size:18px;
letter-spacing:0
}
}

#title .about_ttl{
position:absolute;
top:0;
left:0;
}

@media screen and (max-width:640px){
#title .about_ttl{
width:180px
}
}

.tablet #title .about_ttl{
left:50px
}
#message{
position:relative;
padding-left:120px;
padding-right:70px;
margin-bottom:50px;
}

@media screen and (max-width:640px){
#message{
margin-top:40px;
padding-left:0;
padding-right:0
}
}

#message:before{
content:"";
width:396px;
height:274px;
background:url("../img/bg_red.png") left top no-repeat;
background-size:contain;
display:block;
position:absolute;
top:-100px;
left:-150px;
z-index:0;
}

@media screen and (max-width:640px){
#message:before{
width:300px;
height:180px;
left:calc(50% - 65vw);
top:-40px
}
}

#message h2{
margin-bottom:20px;
}

@media screen and (max-width:640px){
#message h2{
margin-left:50px
}
}

#message h2,#message div,#message img{
position:relative;
z-index:10
}
#message .profile{
float:left;
}
#message .profile:before{
content:"";
width:168px;
height:165px;
background:url("../../../assets/img/contents/paint_ball_yellow.png") left top no-repeat;
background-size:contain;
display:block;
position:absolute;
bottom:-70px;
right:-90px;
z-index:1;
}

@media screen and (max-width:640px){
#message .profile:before{
display:none
}
}

#message .profile img{
width:220px;
}

@media screen and (max-width:640px){
#message .profile img{
width:120px
}
}

#message .profile p{
margin-top:15px;
font-size:24px;
}
#message .profile p span{
font-size:60%;
display:block
}

@media screen and (max-width:640px){
#message .profile p{
font-size:16px;
position:relative;
z-index:5;
margin-top:10px
}
}


@media screen and (max-width:640px){
#message .profile{
float:none;
padding:0 0 40px;
width:200px;
margin:0 auto
}
#message .profile h3{
position:absolute;
top:0;
right:0;
font-size:16px;
line-height:1.7;
letter-spacing:.3rem;
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl
}
}

#message .message{
float:right;
width:calc(100% - 250px);
}
#message .message h3{
font-size:24px;
line-height:1.7;
letter-spacing:.3rem;
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;
float:left;
width:100px;
margin-right:50px
}
#message .message p{
width:calc(100% - 180px);
float:right;
font-size:15px;
line-height:2
}

@media screen and (max-width:768px){
#message .message{
float:none;
width:auto
}
#message .message p{
letter-spacing:1px;
float:none;
width:auto
}
}