@charset "UTF-8";

/* ---------------------------------------------- activity */
#motto {
padding: 50px 0 20px;
}
#motto .txt02 {
text-align: justify;
font-weight: bold;
padding: 0 95px;
margin: 50px 0 65px 0;
font-size: 115%;
line-height: 1.7;
}

#motto .repoWrap {
margin: 0 0 100px 0;
}
#motto .repoWrap .ttlBlock01 {
background: #ffd1cf;
margin: 0 0 60px 0;
}
#motto .repoWrap .ttlBlock01 h3 {
font-size: 143%;
min-height: 75px;
display: flex;
align-items:center;
position: relative;
line-height: 1.6;
padding: 10px 10px 10px 70px;
}
#motto .repoWrap .ttlBlock01 h3:before {
content: "";
display: block;
width: 30px;
height: 30px;
border:3px solid #000;
position: absolute;
top: 17px;
left: 15px;
background: #fff;
}
#motto .repoWrap .ttlBlock01 h3:after{
content: "";
display: block;
border-left:6px solid #e70000;
border-bottom:6px solid #e70000;
width:30px;
height:14px;
transform:rotate(-45deg);
left:22px;
top:16px;
position: absolute;
}
#motto .repoWrap .colum2Wrap {
display: flex;
justify-content:space-between;
padding: 0 60px;
}
#motto .repoWrap .txtBlock01 p {
font-size: 143%;
line-height: 1.8;
font-weight: bold;
}
#motto .repoWrap .txtBlock01 p span {
background: linear-gradient(transparent 50%, #ff0 0%);
font-weight: bold;
}
#motto .repoWrap .txtBlock01 p:before {
content: "";
display: block;
border-top: 3px solid #000;
transform:rotate(-10deg);
margin: 40px 0 0 0;
padding: 80px 0 0 0;
}
#motto .repoWrap .txtBlock01 p:after {
content: "";
display: block;
border-bottom: 3px solid #000;
transform:rotate(10deg);
padding: 0 0 80px 0;
}
#motto .repoWrap .imgBlock {
width: 50vw;
max-width:500px;
margin: 0 0 0 20px;
}
#motto .txtBlock02 {
padding: 50px 60px 0;
}
#motto .txtBlock02 p {
line-height: 2.0;
}
#motto .txtBlock02 .link {
margin: 20px 0 0 0;
font-size: 115%;
}
#motto .txtBlock02 .link a {
text-decoration: underline;
margin: 0 0 0 0.2em;
}
#motto .txtBlock02 .link a:hover {
text-decoration: none;
}

@media screen and (min-width: 721px) and (max-width:990px) {
#motto section {
width: 100%;
}
#motto .repoWrap .ttlBlock01 {
margin-bottom: 30px;
}
#motto .repoWrap .colum2Wrap {
padding: 0 20px;
}
#motto .repoWrap .txtBlock01 p {
font-size:2vw;
}
#motto .repoWrap .txtBlock01 p:before {
margin-top: 5vw;
padding-top: 8vw;
}
#motto .repoWrap .txtBlock01 p:after {
padding-bottom: 8vw;
}
#motto .repoWrap .imgBlock {
margin-left: 10px;
}

#motto .txtBlock02 {
padding: 30px 20px 0;
}
}
@media screen and (min-width: 0px) and (max-width:720px) {
#motto .txt01 {
text-align: left;
font-size: 115%;
}
#motto .txt02 {
padding: 0;
margin: 25px 0 40px;
font-weight: normal;
font-size: 100%;
}
#motto .repoWrap {
margin: 0 0 50px;
}
#motto .repoWrap .ttlBlock01 {
margin: 0 0 25px 0;
}
#motto .repoWrap .ttlBlock01 h3 {
font-size: 129%;
}

#motto .repoWrap section {
width: 100%;
}
#motto .repoWrap .colum2Wrap {
flex-direction:column;
padding: 0;
}
#motto .repoWrap .txtBlock01 p {
position: relative;
text-align: center;
padding: 0 15px 10px;
font-size:108%;
}
#motto .repoWrap .txtBlock01 p:before {
position: absolute;
left:5px;
top: -10px;
padding: 0;
margin: 0;
border-top: none;
border-left: 3px solid #000;
height: 100%;
}
#motto .repoWrap .txtBlock01 p:after {
position: absolute;
right: 5px;
top: -10px;
padding: 0;
border-bottom: none;
border-right: 3px solid #000;
height: 100%;
}
#motto .repoWrap .txtBlock02 p {
line-height: 1.7;
}
#motto .repoWrap .imgBlock {
width: 100%;
max-width: 100%;
margin: 0;
}
#motto .txtBlock02 {
padding: 20px 0px 0;
}
}