@charset "utf-8";

#comment {
margin-bottom: 60px;
}
#comment h1 {
margin-bottom: 10px;
text-align: center;
}
#toto,
#media,
.kindness,
#cambria {
margin-bottom: 80px;
}
.photoBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.photoBox li img {
width: 100%;
}
.bgBox {
background: #eee;
padding: 10px;
border-radius: 5px;
}
#toto .photo01 {
float: right;
width: 30%;
}
#toto .photoBox li {
max-width: 300px;
flex-basis: 24.5%;
}
#toto .bgBox {
width: 60%;
font-weight: 500;
}
#toto .bgBox strong {
color: #ff7500;
font-size: 140%;
font-weight: 400;
}
.kindness .photo {
width: 30%;
float: left;
margin-right: 20px;
}
.kindness .photo.right {
float: right;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
.kindness h2 {
color: #ff7500;
font-size: 120%;
font-weight: 400;
margin-bottom: 5px;
}
.kindness .toggle-accordion {
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.kindness .toggle-accordion:after {
border-right: solid 2px #000;
border-top: solid 2px #000;
content: "";
display: block;
height: 8px;
position: absolute;
right: 25px;
top: 30%;
transform: rotate(135deg);
transition: transform .3s ease-in-out, top .3s ease-in-out;
width: 8px;
}
.kindness .toggle-accordion.open:after {
top: 40%;
transform: rotate(-45deg);
}
.kindness .accordion-content,
.kindness .content {
display: flex;
flex-wrap: nowrap;
padding: 20px 10px;
}
.kindness .accordion-content div:nth-child(1) {
flex-basis: 60%;
}
.kindness .accordion-content img {
width: 100%;
}
.kindness .content img {
flex-basis: 30%;
}
.kindness .accordion-content div:nth-child(2),
.kindness .content div:nth-child(2) {
flex-basis: 40%;
margin-left: 10px;
}
#media .inner {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
#media article {
flex-basis: 48%;
margin-bottom: 30px;
}
#media article h2 {
color: #ff7500;
font-size: 120%;
font-weight: 400;
margin-bottom: 5px;
}
#media article .photo {
float: left;
width: 26%;
margin-right: 4%;
border: 1px solid #ddd;
}
#media article h2,
#media article p {
width: 70%;
float: right;
}
#cambria .subTitle {
color: #ff7500;
font-size: 140%;
font-weight: 500;
margin-bottom: 0.5em
}
#cambria .subTitle span {
font-size: 70%;
}
#cambria .photo {
width: 30%;
float: left;
margin-right: 20px;
} @media screen and (max-width: 1000px) {} @media screen and (max-width: 760px) {
#cambria img {
width: 100%;
}
} @media screen and (max-width: 600px) {
#toto,
#media,
.kindness,
#cambria {
margin-bottom: 40px;
}
#toto .photo01 {
float: none;
width: 100%;
}
#toto .bgBox {
width: 100%;
}
#toto .photoBox li {
flex-basis: 49.5%;
margin-bottom: 5px;
}
.kindness .photo {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 10px;
}
#cambria .photo {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 10px;
}
#media article {
flex-basis: 100%;
margin-bottom: 30px;
}
#media article .photo {
width: 22%;
margin-right: 3%;
}
#media article h2,
#media article p {
width: 75%;
}
.kindness .photo.right {
float: none;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.kindness .content {
flex-wrap: wrap;
padding: 0;
}
.kindness .content div {
flex-basis: 100% !important;
}
.kindness .accordion-content {
flex-direction: column-reverse;
flex-wrap: wrap;
padding: 0;
margin-top: 20px;
}
.kindness .accordion-content div {
flex-basis: 100%;
}
}