@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/**********************************************************/
/* Modify                                                 */
/**********************************************************/

/* サイト全体のフォントを変える */
body {
   font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height: 2.0;
    letter-spacing: 0.05em;
}

/* 初期設定でQuicksandが使われている部分を変える */
.dfont {
   font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}


/* 見出しの変更 */
.entry-content h2 {
    color: #ffffff;
    background-color: #33BCF2;
    padding: 0.5em;
    margin-bottom: 0.5em;
    line-height: 2.0;
}

/* ヨメレバ・カエレバ用 */
.kaerebalink-name img , .kaerebalink-image > img{
    display: none;
}
.kaerebalink-name p {
    margin-bottom: 0;
}

.booklink-image > img {
    display: none!important;
}

/*トップページと記事ページの最大幅を揃える*/
/*
@media only screen and (min-width: 1240px) {
.single .wrap, .page .wrap, .archive .wrap, .single #inner-content, .page #inner-content {
    width: 1000px;
}
}
*/

/* 吹き出しの周囲の線を消す */
.entry-content .faceicon img {
    border: none;
}

/* トップのアニメーションをOFFにする */
.home #container .header, #divheader, .cardtype__article:first-child, .cardtype__article:nth-child(2), .sidelong__article:first-child, .sidelong__article:nth-child(2) {
    animation: none;
}

/* wp-polls の設定*/
.wp-polls{
 background-color:#EFEFEF !important;
 padding :1em !important;
 line-height: 2em !important;
}
.wp-polls .Buttons{
  padding : 1.5em !important;
  background-color : #009688 !important;
  color: #FFFFFF !important;
}
.wp-polls strong{
 color : #000000 !important;
}
.wp-polls ul{
margin-bottom: 1em !important;
padding: 0 !important;
border: none !important;
}
/**********************************************************/
/* Add on                                                 */
/**********************************************************/

/* My Row */
.myrow {
  display: -webkit-flex;
  display: flex;
}

.myrow section {
  margin: 0px;
  padding: 0;
  flex: 1;
}

.myrow .col-1{ flex: 1;}
.myrow .col-2{ flex: 2;}
.myrow .col-3{ flex: 3;}
.myrow .col-4{ flex: 4;}
.myrow .col-5{ flex: 5;}
.myrow .col-6{ flex: 6;}

@media screen and (max-width: 700px) {
 .myrow {
   -webkit-flex-direction: column;
   flex-direction: column;
 }
}


/* My Row */
.myrow1240 {
  display: -webkit-flex;
  display: flex;
}
.myrow1240 .block {
  margin: 0px;
  padding: 0;
  flex: 1;
}
.myrow1240 .col-1{ flex: 1;}
.myrow1240 .col-2{ flex: 2;}
.myrow1240 .col-3{ flex: 3;}
.myrow1240 .col-4{ flex: 4;}
.myrow1240 .col-5{ flex: 5;}
.myrow1240 .col-6{ flex: 6;}

@media screen and (max-width: 1240px) {
 .myrow1240 {
   -webkit-flex-direction: column;
   flex-direction: column;
 }
}

/* My Conv */
.myconv {
  display: -webkit-flex;
  display: flex;
}

.myconv section {
  margin: 0px;
  padding: 0;
  flex: 1;
}

.myconv .myconv-voice {
  -webkit-flex: 3.5;
  flex: 3.5;
  align-self : center;
  margin : 0 0.25em;
  -webkit-box-ordinal-group:2;
  -ms-flex-order:2; 
  -webkit-order:2; 
  order:2;
}

.myconv .myconv-face-l {
  -webkit-flex: 1;
  flex: 1;
  align-self : center;
  margin : 0 0.25em;
  -webkit-box-ordinal-group:1;
  -ms-flex-order:1; 
  -webkit-order:1; 
  order:1;
}

.myconv .myconv-face-r {
  -webkit-flex: 1;
  flex: 1;
  align-self : center;
  margin : 0 0.25em;
  -webkit-box-ordinal-group:1;
  -ms-flex-order:3; 
  -webkit-order:3; 
  order:3;
}


@media screen and (max-width: 700px) {
 .myconv {
   -webkit-flex-direction: column;
   flex-direction: column;
 }
 .myconv .myconv-voice{
  -webkit-box-ordinal-group:1; 
  -ms-flex-order:1; 
  -webkit-order:1; 
  order:1;
 }
 .myconv .myconv-face-l {
  -webkit-box-ordinal-group:2; 
  -ms-flex-order:2; 
  -webkit-order:2; 
  order:2;
 }
 .myconv .myconv-face-r {
  -webkit-box-ordinal-group:2; 
  -ms-flex-order:2; 
  -webkit-order:2; 
  order:2;
 }
}

/* My Box */
.mybox-green {
 background-color: #F4FEF4 !important;
 padding: 1em;
 margin-bottom: 1em;
 border: 3px solid #C3F9D1 !important;
}

.mybox-blue {
 background-color: #f4fbfe !important;
 padding: 1em;
 margin-bottom: 1em;
 border: 3px solid #c3e6f9 !important;
}

.mybox-glay {
 background-color: #FAFAF8 !important;
 padding: 1em;
 margin-bottom: 1em;
 border: 3px solid #E2E0DE !important;
}

.mybox-title {
 display: block;
 margin-bottom: 0.5em;
 color: #333;
 font-weight: bold;
 font-size: 1.1em;
}

.mybox-title i{
 position: relative;
 top: 3px;
 font-size: 32px;
 margin-right: 8px; 
}

.mybox-content {
 margin-left: 40px;
 margin-bottom: 0.5em;
}

.mybox-content ul{
 list-style-type: none;
 border: none !important;
 margin: 0;
 padding: 0;
}

.mybox-content li{
 list-style-type: none;
 line-height: 1.5;
}

.mybox-content li:before {
  font-family: FontAwesome;
  content: '\f046';
  margin-right: 6px;
}

.myr12{
 border-radius: 12px;
}

/* My Keypoint */
.mykeypoint {
 padding: 1em;
 margin-top: 1em;
 margin-bottom: 1em;
 background-color: #FAFAF8;
 border: 3px solid #E2E0DE;
}

.mykeypoint-title {
 display: block;
 margin-bottom: 0.5em;
 color: #333;
 font-weight: bold;
 font-size: 1.1em;
}

.mykeypoint-title i{
 position: relative;
 top: 3px;
 font-size: 1.6em;
 margin-right: 8px; 
}

.mykeypoint-content {
 margin-left: 1em;
 margin-bottom: 0.5em;
}

.mykeypoint-content ul{
 list-style-type: none;
 border: none !important;
 margin: 0;
 padding: 0;
}

.mykeypoint-content li{
 list-style-type: none !important;
 line-height: 1.5;
}

.mykeypoint-content li:before {
  font-family: FontAwesome;
  content: '\f046';
  margin-right: 6px;
}

/*mybutton*/

.mybtn-row{
 /*横並びにしたいときに使う*/
}

.mybtn-row br{
 display: none;
}

.mybtn-std{
 background-color: #33BCF2;
 color: #FFFFFF;
 border : none;
 padding: 8px 12px;
 font-size: 14px;
 font-family: inherit;
 margin: 0 0.5em 1em 0;
}
.mybtn-std br{
 display: none;
}

.mybtn-std i{
 padding-right: 0.5em;
}

.mybtn-std:hover{
 background-color: #A4A4A4;
}

/*myref*/
 .myref{
 font-size: 0.8em;
 line-height : 1.5em;
 margin-bottom : 0.5em;
}

/**/
#custom_html-10 {
  background-color: transparent;
}