@charset "UTF-8";


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


/*h2の見出し*/
h2 {
  background: #c8e4ff;/*背景色*/
	color: #6bb6ff;/*文字色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  font-family: 'Hachi Maru Pop', cursive;
}



/*h3の見出し*/
.entry-content h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #3c3c3c;/*文字色*/
  background: #f5f5f5;/*背景色*/
}




/*h4のクリア*/
h4:before {
    border-top: 0px solid transparent;
}
h4:after {
    border-top: 0px solid transparent;
}
h4 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
    line-height: initial;
 
    padding: initial;
    box-sizing: border-box;
 
    border:initial; 
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}





/*h4の見出し*/
.entry-content h4 {
  padding: 0.0em 0.0em;/*上下 左右の余白*/
  color: #23466e;/*文字色*/
  background: transparent;/*背景透明に*/
}

/*h5のクリア*/
h5:before {
    border-top: 0px solid transparent;
}
h5:after {
    border-top: 0px solid transparent;
}
h5 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
    line-height: initial;
 
    padding: initial;
    box-sizing: border-box;
 
    border:initial; 
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}



/*h5の見出し*/

h5 {
  /*線の種類（実線） 太さ 色*/
　font-size: 200%;
  border-bottom: solid 3px black;
　padding: 0.5em;/*文字周りの余白*/
}



/*h6のクリア*/
h6:before {
    border-top: 0px solid transparent;
}
h6:after {
    border-top: 0px solid transparent;
}
h6 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
    line-height: initial;
 
    padding: initial;
    box-sizing: border-box;
 
    border:initial; 
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}



/*h6の見出し*/
.entry-content .h6 {
    color: blue;
}


/*関連記事オリジナルカスタマイズ*/
.linkto .tbimg{/*画像*/
    width: 140px;/*画像のサイズ*/
}
.linkto{
    max-width: 100%;/*最大幅*/
    position: relative;/*相対位置*/
    box-shadow: 4px 4px 0px #666;/*影*/
    border: solid 1px #c0c0c0;/*線*/
}

.linkto:before {/*疑似要素（前）*/
    position: absolute;/*基準を元に*/
    content: "関連";/*挿入する文字*/
    top: 10px;/*上からの位置*/
    left: 125px;/*左からの位置*/
    display: inline-block;/*縦横設定できるように*/
    width: 47px;/*横幅*/
    height: 27px;/*縦幅*/
    text-align: center;/*中央揃え*/
    vertical-align: middle;/*縦の中央揃え*/
    background: #23466e;/*背景色*/
    font-size: 14px;/*文字の大きさ*/
    line-height: 28px;/*行の高さ*/
    color: white;/*文字色*/
    letter-spacing: 3px;/*文字間隔*/
    padding-left: 3px;/*内側の余白*/
    border-radius: 2px;/*角丸*/
}
.linkto:after{
    position: absolute;
    font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
    content:'続きを読む \f101';
    right:5px;/*「続きを読む」の位置*/
    bottom: 5px;/*「続きを読む」の位置*/
    padding:1px 10px;/*「続きを読む」の周りのスペース*/
    background:#f78415;/*「続きを読む」の背景色*/
    color:#fff;/*「続きを読む」の文字色*/
    font-size: .8em;/*「続きを読む」の文字サイズ*/
    border-radius:2px;/*「続きを読む」の角丸*/
}
.linkto:hover{/*マウスホバーしたとき*/
    background:#fff;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkto img,
.linkto:hover img {
    box-shadow: none;/*画像の影なし*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 17px 10px 14px 8px;/*内側の余白（上右下左）*/
    font-size: 0.9em;/*文字のサイズ*/
}

@media (min-width:768px) and (max-width:1023px) {
.linkto {
    padding:5px;/*内側の余白*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 19px 0 20px 2px;/*余白*/
    font-size: 0.9em;/*文字のサイズ*/
}
.linkto:before {/*疑似要素（前）*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/

}
.linkto:after {
    right: 4px;/*「続きを読む」の位置*/
    bottom: 4px;/*「続きを読む」の位置*/
}
}

@media (max-width:767px){
.linkto .tbimg{/*画像*/
    width: 120px;/*画像のサイズ*/
}
.linkto {
    padding:3px;/*内側の余白*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 19px 0 20px 2.5px;/*余白*/
    font-size: 0.8em;/*文字のサイズ*/
}	
.linkto:before {/*疑似要素（前）*/
    top: 3.1px;/*上からの位置*/
    left: 125px;/*左からの位置*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/
}
.linkto:after {
    right:2px;/*「続きを読む」の位置*/
    bottom: 2px;/*「続きを読む」の位置*/
}
}



/*囲み枠1*/
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
/*囲み枠1*/



/*囲み枠50*/
.box50 {
    margin: 2em 0;
    background: #dcefff;
}
.box50 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box50 p {
	font-size: 1.8em;
	text-align:center ;
	font-weight: bold;
	margin: 10px auto;
    padding: 15px 20px;
}
/*囲み枠50*/





/*ロゴ画像サイズを変更する*/
#logo, #logo img, .desktop-nav li a, #drawer__open {
    height: 100px;/*スマホ用サイズ*/
    line-height: 100px;/*スマホ用サイズ*/
    object-fit: contain;
}

@media only screen and (min-width: 768px) {
    #logo, #logo img, .desktop-nav li a {
       height: 120px;/*768px〜で見たとき用サイズ*/
       line-height: 120px;/*768px〜で見たとき用サイズ*/
    }
}