@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : layout.css
 Author     : ヒューマンフローラ
 Style Info : about　PCレイアウトCSS設定
=================================================================== */

/*
紺：background:rgba(5,3,104,0.1);#050368;
青：background:rgba(92,167,214,0.1);
*/

/* -------------------------------------------------------
index.html
------------------------------------------------------- */
.about *,
.about *::before,
.about *::after{
box-sizing:border-box;
}
.about{
width:840px;
margin-left:auto;
margin-right:auto;
padding-bottom:3em;
font-size:16px;
line-height:1.8;
background:url(../images/about_img01.png) no-repeat right 1em bottom 2em;
}
.about h2{
display: block;
position: relative;
margin-bottom:0;
padding:1.25em 1em;
text-align:center;
font-weight:300;
font-size:160%;
color:#050368;
font-family:'ヒラギノ丸ゴ Pro W4','ヒラギノ丸ゴ Pro','Hiragino Maru Gothic Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HG丸ｺﾞｼｯｸM-PRO','HGMaruGothicMPRO','Meiryo','メイリオ','ＭＳ Ｐゴシック','ＭＳ ゴシック','Osaka','Osaka-等幅',sans-serif;
}
.about h2::before,
.about h2::after{
content:'';
display:block;
position:absolute;
}
.about h2::before{
top:0;
left:0;
border:solid 2px #050368;
width:100%;
height:100%;
}
.about h2::after{
top:4px;
left:4px;
border:solid 1px #050368;
width:calc(100% - 8px);
height:calc(100% - 8px);
}
.about h3{
margin-top:2em;
font-size:165%;
text-align:center;
font-weight:300;
color:#fa6f6d;
font-family:'ヒラギノ丸ゴ Pro W4','ヒラギノ丸ゴ Pro','Hiragino Maru Gothic Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HG丸ｺﾞｼｯｸM-PRO','HGMaruGothicMPRO','Meiryo','メイリオ','ＭＳ Ｐゴシック','ＭＳ ゴシック','Osaka','Osaka-等幅',sans-serif;
}
.about p+h3{
margin-top:3em;
}
.about h3 strong{
font-size:150%;
}
/*
.about h3{
margin-bottom:1em;
font-size:125%;
}
*/
/*
.about .section+.section{
margin-top:4em;
}
*/
.about .txt{
width:85%;/*---------左寄せ用★*/
font-size:100%;
margin:2em auto 0;/*---------左寄せ用★*/
/*margin-top:2em;---------センタリング用★*/
text-align:left;/*---------左寄せ用★*/
/*text-align:center;---------センタリング用★*/
}
.about .end{
width:85%;
margin:3em auto 0;
text-align:right;
}
.about p+p{
/*margin-top:1.5em;*/
}
.about p strong{
font-weight:600;
color:#B43934;
}
.about em{
font-weight:600;
color:#050368;
}
.about .list li{
font-weight:600;
color:#050368;
}
.about ol li{
list-style:none;
margin:0;
padding:0;
}
.about h4.catch{
margin-top:1.5em;
text-align:center;
font-size:110%;
font-weight:300;
/*font-weight:bold;*/
/*font-style:italic;*/
color:#050368;
font-family:'ヒラギノ丸ゴ Pro W4','ヒラギノ丸ゴ Pro','Hiragino Maru Gothic Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HG丸ｺﾞｼｯｸM-PRO','HGMaruGothicMPRO','Meiryo','メイリオ','ＭＳ Ｐゴシック','ＭＳ ゴシック','Osaka','Osaka-等幅',sans-serif;
}
.about h4.catch strong{
color:#050368;
font-size:125%;
}
/*
.about #sct01 .box_txt{
float:left;
width:50%;
}
*/
.about .section::after{
content:'';
display:block;
clear:both;
}
/*
.about .img{
float:right;
margin-left:2em;
}
*/
.about #kinsample{
float:right;/**/
width:25%;
/*margin:2em 0 0;---------センタリング用★*/
margin:2em 1em 0 0;/*---------左寄せ用★*/
padding:0.5em;
border-radius:0;
}
#kinsample .kinphoto{
display:flex;
flex-wrap:wrap;/**/
justify-content:center;
width:100%;
margin:0;
}
#kinsample .kinphoto li{
width:100%;
padding:0.25em;
text-align:center;
}
#kinsample .kinphoto li span{
font-weight:bold;
font-size:90%;
}
#kinsample .kinphoto li figure{
/*
display:flex;
align-items:flex-start;
*/
width:95%;
margin:0 auto;
overflow:hidden;
}
#kinsample .kinphoto li figure img{
width:100%;
border-radius:10px;
}
#kinsample .kinphoto li figcaption{
display:block;
margin-top:0.25em;
/*padding-left:0.5em;*/
font-size:80%;
line-height:1.2;
}