#sainokumi{
background-color: #f9f7f2;
padding-bottom: 145px;
}
@media screen and (max-width: 660px){
#sainokumi{
padding-bottom: 80px;
}
} .sainokumi-inner{
margin: auto;
width: 90%;
max-width: 900px;
}  .sainokumi-main-img, .sainokumi-description-top-img{
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
} .sainokumi-subhead, .sainokumi-portrait-cap, .sainokumi-showcase-copy, .sainokumi-showcase-subhead{
font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", メイリオ, "Meiryo", serif !important;
}
.sainokumi-paragraph, .sainokumi-paragraph-each, .sainokumi-title-note, .sainokumi-showcase-ingredient, .sainokumi-learning-link, .sainokumi-infomation-address{
font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", メイリオ, "Meiryo", serif !important;
}
.sainokumi-showcase-samll-title{
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}
.sainokumi-subhead{
font-size : 34px;
line-height : 1.3;
color : #611111;
font-weight: 500;
margin-bottom: 25px;
}
.sainokumi-paragraph{
font-size : 17px;
line-height : 1.8;
}
.sainokumi-qr{
text-align: center;
padding: 20px 0;
}
@media screen and (max-width: 896px){
.sainokumi-subhead{
font-size : 28px;
}
}
@media screen and (max-width: 480px){
.sainokumi-subhead{
font-size : 22px;
margin-bottom: 18px;
}
.sainokumi-paragraph{
font-size : 14px;
text-align: justify;
}
}    .sainokumi-main-img{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sai-img-main.jpg);
height: 570px;
position: relative;
}
.sainokumi-logo{
position: absolute;
right: 17%;
top: 140px;
}
.sainokumi-about{
position: relative;
margin-bottom: 60px;
}
.sainokumi-ambassador{
position: absolute;
top: -90px;
right: 12%;
text-align: center;
}
.sainokumi-portrait{
width: 256px;
height: 256px;
border-radius: 50%;
margin-bottom: 20px; background-color: #FFFFFF;
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sainokumi-takimoto.png);
background-size: cover;
}
.sainokumi-portrait-cap{
font-size: 16px;
color : #611111;
text-align: center;
line-height: 1.5;
}
.sainokumi-about-explanation{
padding-top: 50px;
}
.sainokumi-about-explanation .sainokumi-paragraph{
width: 70%;
}
@media screen and (max-width: 1024px){
.sainokumi-about-explanation .sainokumi-paragraph{
width: 60%;
}
}
@media screen and (max-width: 896px){
.sainokumi-main-img{
height: 300px;
}
.sainokumi-logo{
width: 42px;
right: 12%;
top: 60px;
}
.sainokumi-ambassador{
top: -100px;
left: 0;
right: 0;
margin: auto;
}
.sainokumi-portrait{
width: 200px;
height: 200px;
margin: 0 auto 20px auto;
}
.sainokumi-about-explanation{
padding-top: 200px;
}
.sainokumi-about-explanation .sainokumi-paragraph{
width: 100%;
margin: 0 auto;
}
}
@media screen and (max-width: 480px){
.sainokumi-about{
margin-bottom: 30px;
}
.sainokumi-ambassador{
top: -80px;
}
.sainokumi-portrait{
width: 160px;
height: 160px;
}
.sainokumi-portrait-cap{
font-size: 12px;
}
.sainokumi-about-explanation{
padding-top: 170px;
}
} .sainokumi-description-top-img{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sai-img-reason.jpg);
height: 380px;
}
.sainokumi-description .sainokumi-subhead{
margin: 65px auto;
line-height: .9;
}
.sainokumi-title-sub{
font-size: 12px;
}
.sainokumi-title-note{
font-size : 13px;
letter-spacing : 0.98px;
color: #000;
}
.sainokumi-paragraph-each{
margin-bottom: 40px;
}
.sainokumi-description-in-img{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sai-img-history.jpg);
max-width: 900px;
height: 340px;
background-position: center -53px;
background-repeat: no-repeat;
background-size: cover;
margin-top: 80px;
}
@media screen and (max-width: 896px){
.sainokumi-description-top-img{
height: 240px;
}　
.sainokumi-description .sainokumi-subhead{
margin: 50px auto;
line-height: 1.1;
}
.sainokumi-paragraph-each{
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px){
.sainokumi-description-top-img{
height: 180px;
}
.sainokumi-description .sainokumi-subhead{
margin: 30px auto;
line-height: 1.3;
}
.sainokumi-paragraph-each{
margin-bottom: 25px;
}
.sainokumi-description-in-img{
height: 180px;
background-position: center -18px;
margin-top: 40px;
}
}  .sainokumi-showcase-title{
margin-top: 75px;
margin-bottom: 60px;
}
.sainokumi-showcase-flex{
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-around;
}
.sainokumi-showcase-title-description{
margin-left: 45px;
}
.sainokumi-showcase-copy{
font-size : 19px;
line-height : 1.8;
}
.sainokumi-showcase-subhead{
font-size : 30px;
line-height : 1.1;
font-weight: 500;
margin-bottom: 20px;
}
.sainokumi-showcase-samll-title{
font-size : 14px;
line-height : 2.2;
letter-spacing : 2.8px;
}
.sainokumi-showcase-ingredient{
font-size : 24px;
}
.sainokumi-showcase-description{
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
.sainokumi-showcase-description-material{
width: 200px;
height: 200px;
border-radius: 50%; background-color: #FFFFFF;
background-size: cover;
background-position: center center;
}
.sainokumi-showcase-description .sainokumi-paragraph{
width: 75%;
}
.sainokumi-showcase-description-material.sainokumi-spacialcare{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sainokumi-photo01.jpg);
}
.sainokumi-showcase-description-material.sainokumi-deepner{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sainokumi-photo02.jpg);
}
.sainokumi-showcase-description-material.sainokumi-dailycare{
background-image: url(//www.yakuzen-cocomi.com/wp-content/themes/cocomi/img/sainokumi/sainokumi-photo03.jpg);
}
@media screen and (max-width: 896px){
.sainokumi-showcase-title{
margin-top: 60px;
margin-bottom: 40px;
}
.sainokumi-showcase-flex{
justify-content: center;
}
.sainokumi-showcase-subhead{
font-size : 27px;
margin-bottom: 15px;
}
.sainokumi-showcase-samll-title{
line-height : 1.5;
}
.sainokumi-showcase-ingredient{
font-size : 20px;
}
.sainokumi-showcase-description{
justify-content: center;
}
.sainokumi-showcase-description-material{
margin-bottom: 30px;
}
.sainokumi-showcase-description .sainokumi-paragraph{
width: 100%;
}
}
@media screen and (max-width: 841px){
.sainokumi-showcase-title-description{
margin: 30px 20px;
}
}
@media screen and (max-width: 480px){
.sainokumi-showcase-title{
margin-top: 45px;
margin-bottom: 30px;
}
.sainokumi-showcase-title-img{
width: 100%;
}
.sainokumi-showcase-title-description{
margin: 20px 0;
}
.sainokumi-showcase-copy{
font-size : 12px;
}
.sainokumi-showcase-subhead{
font-size : 20px;
}
.sainokumi-showcase-samll-title{
font-size : 10px;
}
.sainokumi-showcase-ingredient{
font-size : 16px;
}
.sainokumi-showcase-description-material{
width: 150px;
height: 150px;
margin-bottom: 25px;
}
} .sainokumi-spacialcare.sainokumi-showcase-title{
background-color: #196297;
}
.sainokumi-spacialcare .sainokumi-showcase-title-description{
color: #fff;
}
.sainokumi-deepner.sainokumi-showcase-title{
background-color: #c0ddea;
}
.sainokumi-deepner .sainokumi-showcase-title-description{
color: #0a4451;
}
.sainokumi-dailycare.sainokumi-showcase-title{
background-color: #debac3;
}
.sainokumi-dailycare .sainokumi-showcase-title-description{
color: #611111;
} .sainokumi-learning{
margin-top: 65px;
margin-bottom: 80px;
}
.sainokumi-lecture-lists{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 75px;
}
.sainokumi-learning-link{
font-size: 23px;
font-weight: 600;
letter-spacing : 1.73px;
color: #fff;
background-color: #8b7153;
padding: 22px;
text-align: center;
display: block;
margin: auto;
text-decoration: none;
width: 355px;
}
@media screen and (max-width: 896px){
.sainokumi-lecture-lists{
justify-content: start;
}
.sainokumi-lecture-info{
margin-right: 25px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 644px){
.sainokumi-lecture-lists{
justify-content: center;
}
}
@media screen and (max-width: 444px){ .sainokumi-lecture-info img{
width: 180px;
}
.sainokumi-learning{
margin-top: 30px;
margin-bottom: 40px;
}
.sainokumi-lecture-lists{
margin-bottom: 35px;
}
.sainokumi-learning-link{
font-size: 16px;
padding: 16px;
width: 90%;
}
} .sainokumi-infomation-box{
border: 1px #c4c4c4 solid;
position: relative;
}
.sainokumi-infomation-logo{
background-color: #8b7153;
width: 233px;
height: 221px;
position: relative;
}
.sainokumi-infomation-logo img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
}
.sainokumi-infomation-address{
font-size: 16px;
line-height: 1.75;
position: absolute;
top: 50%;
left: 270px;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
}
.sainokumi-infomation-address address{
margin-top: 30px;
font-style: normal;
}
@media screen and (max-width: 660px){
.sainokumi-infomation-logo{
width: 30%;
height: 160px;
}
.sainokumi-infomation-logo img{
width: 22px;
}
.sainokumi-infomation-address{
font-size: 13px;
left: 200px;
}
.sainokumi-infomation-address address{
margin-top: 20px;
}
}
@media screen and (max-width: 540px){
.sainokumi-infomation-logo{
display: inline-block;
vertical-align: middle;
}
.sainokumi-infomation-address{
font-size: 11px;
display: inline-block;
vertical-align: middle;
position: static;
-webkit-transform: none;
transform: none;
margin-left: 10px;
}
.sainokumi-infomation-address address{
margin-top: 10px;
}
}
@media screen and (max-width: 360px){
.sainokumi-infomation-logo{
width: 100%;
height: 160px;
}
.sainokumi-infomation-address{
margin: 30px;
}
}