#h1_head p{ background-image: url("../img/title/tit_about.webp");  }

#profile{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 1260px; margin: 0 40px; }
.greeting{width: 60%;}
.profile{width: 40%; text-align: center;}
.profile img{width: 380px; display: block; margin: 0 auto; }
.profile h2{font-size: 1rem; font-weight: normal; text-align: center;}
.profile h2 span{display: block;}

#message{ max-width: 1180px; margin: 80px 40px; padding: 80px; position: relative; }
#message::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0px; top:0px; z-index: -1; background: #ffffff; box-shadow: 3px 3px 6px #b2b2b2; background-image: url("../img/leaf.svg");
background-size: 19% auto; background-repeat: no-repeat; background-position: right 50px bottom 50px; }
#message::before{ content: ""; background-color: var(--bg_green); width: 100%; height: 100%; position: absolute; left: -5px; top:10px; z-index: -1; transform: rotate(-5deg); box-shadow: 3px 3px 6px #b2b2b2; }

#background{ margin: 80px 0 0px 0; padding: 80px 40px; position: relative; background-color: #f4f4ed; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#background h2{width: 120px; padding: 0 40px;}
#background dl{width: calc(100% - 120px); display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
#background dl dt{width: 20%; margin: 5px 0; border-bottom: 1px dotted var(--green);}
#background dl dd{width: 80%; margin: 5px 0; border-bottom: 1px dotted var(--green);}



/*******tablet*******/
@media screen and (orientation: portrait){
#profile{display: block; margin: 80px 40px; }
.greeting{width: 100%; margin-top: 80px;}
.profile{width: 100%;}
#message{ padding: 40px; max-width: 90%;}

#background{padding: 80px 40px; background-color: var(--bg_yellow); }
#background h2{width: 120px; padding: 0 40px;}
#background dl{width: 100% ; display: block;}
#background dl dt{width: 100%; margin: 0; border-bottom:none;}
#background dl dd{width: 100%; margin: 0 0 20px 0; border-bottom: 1px dotted var(--green);}
}

/*******SP*******/
@media screen and (max-width:600px){
#profile{display: block; margin: 0 20px; }
#profile{margin: 80px 20px; }
.profile img{max-width: 60%; }
#message{padding: 20px; }
#background{padding: 80px 20px;}
#message{margin: 80px 20px;}
#message::after{border:var(--bg_green) 4px solid;}
#message::before{ display: none;}
}

/*******Wide*******/
@media screen and (min-width:1260px){
#profile{margin: 0 auto; }
#message{margin: 80px auto; }
#background{ padding: 80px calc(50% - 630px); }
}