/*
Theme Name:PORIPU tears for SANGO
Template:sango-theme
Theme Name:sango-theme-poripu
Theme URI:https://oldno07.com/poripu/
Author: マサオカ
Author URI:https://oldno07.com/
Description: SANGOの子テーマです。SANGO親テーマをインストールした状態で、本子テーマを適用してください。使い方は<a href="https://oldno07.com/poripu/">デモサイト</a>を御覧ください。
Version:1.24
/*--------------------------------------
ここから下にCSSを追加してください
--------------------------------------*/

.textwidget .say p{
  margin: 5px 0;
}

.fixed-menu-text{
  position: fixed;
  width: 100%;
  bottom: 0px;
  margin-bottom: 40px;
  left: 0;
  z-index: 98;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.fixed-menu-text p {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #4DB6AC;
}

.fixed-menu ul {
    padding-top: 5px;
    z-index: 97;
}
.fixed-menu ul li {
  width: 25%;
}
.fixed-menu ul li a {
  padding: 15px 0 6px;
}

#bfb_content.bfb_banner.bfb_rb {
    box-shadow: 2px 2px 3px #111111;
}

.catpost-cards .c_linkto {
margin: 0 0 25px 0;
}

.main-bc{
  background-color: #42A5F5;
}

.footer{
    padding-top: 15px;
}

.single-title, .page-title{
    margin: 10px 0 0;
}

.textwidget p {
margin: 0 0 1.5em;
}


.ft_title{
    margin: 0 -10px 0.7em;
    padding: 2px 0 2px 10px;
    border-left: none;
    font-size: 1.4em;
    background: #25A69A;
    color: white;
    text-align: center;
}

/*--------------------------------------
トップページ用CSS
--------------------------------------*/
/*背景色・上部余白調整*/
.home #entry {
background:none;
}
.home .entry-content {
padding-top: 0;
}

/*新着記事用。トップに新着記事を載せない場合はなくても構いません。*/
@media only screen and (min-width: 481px) {


.catpost-cards .c_linkto {
width: 47%;
margin: 0 0 25px 0;
max-width: none;
}
}
.space-between {
justify-content: space-between;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
}

/*カテゴリ見出しカスタマイズ*/
#inner-content .entry-content h2.top-title {
border-left: none;
border-bottom: none;
background: none;
color: #000;
overflow: hidden;
text-align: center;
border-top: none;
}
#inner-content .entry-content .top-title span {
position: relative;
display: inline-block;
margin: 0 0em;
padding: 0 1em;
text-align: left;
}
#inner-content .entry-content h2.top-title span:before,
#inner-content .entry-content h2.top-title span:after {
position: absolute;
top: 50%;
content: '';
width: 400%;
height: 1px;
background-color: #000;
}
#inner-content .entry-content h2.top-title span:before {
right: 100%;
}
#inner-content .entry-content h2.top-title span:after{
left: 100%;
}

/*トップページ記事カード用*/
.popular-posts .cardtype__article-info {
padding-top: 0.5em;
}
.popular-posts .cardtype__link {
padding-bottom: 10px;
}
.popular-posts.cardtype {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.popular-posts .cardtype__article {
width: 48%;
margin: 0 0 25px;
}
.popular-posts .cardtype__article:nth-child(odd){
margin-right: 4%;
}
.popular-posts .cardtype__article p {
margin: 0;
}
.popular-posts.cardtype h3 {
margin: 0 .45em;
font-size: 15px;
color: inherit;
background: none;
border: none;
}

/*画像のふちに余白*/
.c_linkto img,
.cardtype__img img {
padding: .45em .45em 0 .45em;
}

/*--------------------------------------
トップページ用CSSここまで
--------------------------------------*/


.box21{
    margin: 2em 0;
    padding: 1.3em;
    background: linear-gradient(to left, #1E88E5 , #4DD0E1 );
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.13);
    color: #fff;
    font-weight: bold;
}

.box26 p {
    margin-bottom: 10px;
}

/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{
    position: relative;
    padding: 0.6em;
    background: #C1E5E2;
}


.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {
  color: #4EB6AC;/*文字色*/
   padding: 0.5em 0;/*上下の余白*/
   border-top: solid 3px #4EB6AC;/*上線*/
   border-bottom: solid 3px #4EB6AC;/*下線*/
   border-left-style: none;
   line-height: 1.70;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {

}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.wp-embed-featured-image {
    /* margin-bottom: 10px; */
    width: 100px;
    float: left;
    padding-right: 10px;
}
.wp-embed-featured-image img {
    width: 100%;
    height: auto;
    border: none;
}

p.wp-embed-heading {
    /* margin: 0 0 15px; */
    font-weight: 600;
    font-size: 1em;
    /* line-height: 1.3; */
}
.wp-embed p {
    margin: 0;
}
.wp-embed-excerpt {
    display: none;
}
.wp-embed-footer {
    display: none;
}
.wp-embed {
    padding: 15px;
    font-size: 14px;
    font-weight: 400;
    /* font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; */
    line-height: 1.5;
    color: #82878c;
    background: #fff;
    border: 2px solid #e5e5e5;
    box-shadow: 0 2px 2px rgba(0,0,0,.05);
    overflow: auto;
    zoom: 1;
}



.simple-box1 {
    margin: 2em 0;
    padding: 1.5em 1em;
    background: #edf6ff;
    color: #2c2c2f;
    padding-bottom: 1px !important;
}
.simple-box2 {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0;
}
.simple-box3 {
    margin: 2em 0;
    padding: 1.5em 1em;
    border: dashed 2px #6bb6ff;
    background: #edf6ff;
}
.simple-box4 {
    margin: 2em 0;
    padding: 1.5em 1em;
    background: repeating-linear-gradient(-45deg,#f0f8ff,#f0f8ff 3px,#e9f4ff 3px,#e9f4ff 7px);
    padding-bottom: 1px !important;
}
.simple-box5 {
    margin: 2em 10px;
    padding: 1.5em 1em;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
    background: #ffeaea;
    box-shadow: 0 0 0 10px #ffeaea;
    color: #565656;
}
.simple-box6 {
    margin: 2em 0;
    padding: 1.5em 1em;
    border-left: solid 6px #ffc06e;
    background: #fff8e8;
    color: #232323;
    padding-bottom: 1px !important;

}
.simple-box7 {
    margin: 2em 10px;
    padding: 1.5em 1em;
    border: dashed 2px #fff;
    background: #d6ebff;
    box-shadow: 0 0 0 10px #d6ebff;
}
.simple-box8 {
    margin: 1em 0;
    padding: 1.5em 1em;
    border-left: solid 6px #6bb6ff;
    background: #f6f6f6;
    box-shadow: 0 2px 3px rgba(0,0,0,.33);
    padding-bottom: 1px !important;
}
.simple-box9 {
    position: relative;
    margin: 2em 5px;
    padding: 1.5em 1em;
    border: dashed 2px #fff;
    background: #fff0cd;
    box-shadow: 0 0 0 5px #fff0cd;
    color: #454545;
}

.concept-box2 {
    border-color: #f7cf6a!important;
}
.concept-box3 {
    border-color: #86cee8!important;
}
.concept-box4 {
    border-color: #ed8989!important;
}
.concept-box5 {
    border-color: #9e9e9e!important;
}
.concept-box6 {
    border-color: #8eaced!important;

}
.concept-box1 {
    border-color: #85db8f!important;
}

.simple-box1, .simple-box2, .simple-box3, .simple-box4, .simple-box5, .simple-box6, .simple-box7, .simple-box8, .simple-box9, {
    margin-bottom: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    box-sizing: border-box;
}

.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3, .kaisetsu-box4, .kaisetsu-box5, .kaisetsu-box6,
.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6,
.innerlink-box1 {
    margin-bottom: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    padding-top: 0;
    box-sizing: border-box;
}

.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6 {
    position: relative;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 20px 20px 0;
}

span.color-button02 {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-bottom: solid 4px rgba(0,0,0,.27);
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    background-color: #ffbd5b;
    margin: .5em .0 .5em 0;
    text-decoration: none;
    width: 100%;
    text-align: center;
}


.entry-content .color-button02 a {
    color: #fff;
    text-decoration: none;
}

.faceicon {
    line-height: 18px;
}

.faceicon span {
    font-size: 10px;
    font-weight: 700;
}

.ranking01, .ranking02, .ranking03 {
    margin-top: 40px;
    display: block;
}
.ranking01 .ranking-title01, .ranking02 .ranking-title01, .ranking03 .ranking-title01 {
    border-color: #FFCF24;
}
.ranking01 .ranking-title01, .ranking01 .ranking-title02, .ranking01 .ranking-title03, .ranking02 .ranking-title01, .ranking02 .ranking-title02, .ranking02 .ranking-title03, .ranking03 .ranking-title01, .ranking03 .ranking-title02, .ranking03 .ranking-title03 {
    font-size: 26px;
    font-weight: 400;
    text-align: center;
}
.ranking01 .ranking-title01, .ranking01 .ranking-title02, .ranking01 .ranking-title03, .ranking02 .ranking-title01, .ranking02 .ranking-title02, .ranking02 .ranking-title03, .ranking03 .ranking-title01, .ranking03 .ranking-title02, .ranking03 .ranking-title03 {
    border-bottom: 1px solid;
    letter-spacing: 0;
    position: relative;
    margin-bottom: 20px;
}

.entry-content ul, .entry-content ol {
    margin-bottom: 0.5em;
    padding: 0.5em 0.5em 0.5em 1.5em;
    border: solid 0px #e8e8e8;
    border-radius: 3px;
}

.wp-embedded-content {
    width: 100%;
    max-width: 100%;
}

.profile-content {
    padding: 0 15px;
    font-size: 0.95em;
}

#archive_header{
    margin: 0 -4% 2em;
    padding: 10px 15px;
    border-top-width: 3px;
    border-top-style: solid;
    background: #fff;
}


.right .sc {
    background: #EEF7FE; /* ふきだしの中の色 */
    border: solid 2px #EEF7FE; /* ふきだしの線の色 */
    color: #000000; /* 文字の色 */
}

.box22 {
    margin: 1em 0;
    padding: 1.5em 1em;
    border-left: solid 6px #80CBC4;
    background: #f6f6f6;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.33);
}

.box31 .box-title {
    margin: 0 -15px 15px;
    padding: 8px 4px;
    background: #3EBAC8;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.5;
}

.totop {
    background: #4DB6AC;
}

#inner-content .btn {
    margin: 0.5em 0.5em 0.5em 0;
    text-decoration: none;
}

#main .h-undeline {
    position: relative;
    margin: 0;
    padding: 14px 10px;
    font-weight: bold;
    text-align: center;
    background: #E0F2F1;
}

.box33 .box-title {
    background: #FF6E40;
}

.fixed-menu a {
    color: #47A79A;
}

@media only screen and (max-width: 767px){
#archive_header {
    margin: 0 -4% 2em;
    padding: 10px 15px;
    border-top-width: 3px;
    border-top-style: solid;
    background: #fff;
  }

.header {
    height: 80px;
  }
}

@media only screen and (min-width: 1030px){
  #archive_header {
      margin: 0 0 1.5em 0;
      padding: 20px 40px;
  }
}

@media only screen and (min-width: 1030px){
  .d-5of7 {
    float: left;
    width: 69%;
    padding-right: 2em;
  }

}


@media screen and (min-width: 769px) {
    #inner-header {
        display: flex;
        align-items: center;
    }
    #inner-header #logo {
        flex: 1;
    }
    #inner-header #logo img {
        height: auto;
        max-height: 62px;
    }
    #inner-header .header-search {
        position: relative;
        width: 205px;
        height: 37px;
        line-height: 37px;
        order: 2;
    }
    #inner-header .header-search__modal {
        position: relative;
        top: 0;
        display: block;
        padding: 0;
    }
    #inner-header .header-search__modal .searchform {
        margin: 0;
    }
    #inner-header .header-search__modal .searchform:before {
        display: none;
    }
    #inner-header input.searchform__input {
        height: 37px;
        margin-bottom: 0;
        padding-right: 37px;
        font-size: 16px;
    }
    #inner-header .searchform__submit {
        width: 37px;
        height: 37px;
        line-height: 37px;
    }
    #inner-header .searchform__submit i {
        line-height: 37px;
    }
    #inner-header .desktop-nav {
        float: none;
        display: flex;
        justify-content: flex-end;
        padding-right: 15px;
    }
}

.header-search__modal .searchform:before {
  position: absolute;
  top: -25px;
}
.header-search__modal .searchform__submit {
  background: #ffffff;
  color: #4e4e4e;
}

#new-entry p {
    font-size: 1.4em;
}

.cardtype__link {
    padding-bottom: 10px;
}

.cardtype__article-info {
    padding-top: 0.5em;
}
.cardtype__article-info time {
    display: none;
}

.cardtype__article-info h2{
    font-size: 15px;
}

.cardtype__img img {
width: 100%;
height: 220px;
object-fit: cover;
}

#interview .cardtype__link img {
    width: 100%;
    aspect-ratio: 640/400;
}
#new .cardtype__link img  {
    width: 100%;
    aspect-ratio: 640/400;
}




/*  */
/* 2024.12 Append */
/*  */


:root {
  --header: 62px;
  scroll-padding: var(--header);
}


/* header */
.header {
    position: fixed;
    width: 100%;
    top: 0;
}
#inner-header .header-search {
    /* display: none; */
}
#drawer__content .widget_search .searchform {
    position: relative;
}
#drawer #drawer__open {
}
#drawer .fa-bars:after {
}
#drawer__content {
    opacity: 0;
}
#drawer__input:checked ~ #drawer__content {
      opacity: 1;
}
#drawer__content .drawer__title {
      height: 62px;
}
#drawer__content .drawer__title .close {
  padding: 15px 10px;
}
@media only screen and (min-width: 769px) {
    :root {
      --header: 80px;
    }

    #inner-header #logo {
        display: inline-block;
        /*height: 80px;*/
        /*line-height: 80px;*/
        margin: 0 5px 0 0;
        text-align: left;
        width: auto;
    }
    #inner-header #logo img {
        height: auto;
        max-height: 40px;
        vertical-align: middle;
        padding: 0;
    }
    #inner-header .header-search {
        display: block;
        width: auto;
        height: 44px;
        line-height: 44px;
    }
    #inner-header .header-search__modal {
        width: 44px;
        margin-left: auto;
        transition: 0.3s ease-in-out;
    }
    #inner-header .header-search__modal .searchform__input {
        margin-bottom: 0;
        padding-right: 30px;
        width: 100%;
        height: 44px;
        margin-left: auto;
        border-radius: 44px;
    }
    #inner-header .header-search__modal .searchform__input::placeholder {
        opacity: 0;
    }
    #inner-header .header-search__modal .searchform__submit {
        background: transparent;
        color: #26A69A;
        width: 44px;
        height: 44px;
        line-height: 44px;
        pointer-events: none;
    }
    #inner-header .header-search__modal.active {
        width: 205px;
        transition: 0.3s ease-in-out;
    }
    #inner-header .header-search__modal.active .searchform__input {
    }
    #inner-header .header-search__modal.active .searchform__input::placeholder {
        opacity: 1;
    }
    #inner-header .header-search__modal.active .searchform__submit {
        pointer-events: auto;
    }

    #inner-header .desktop-nav li:after {
        display: none;
    }

    #drawer {
        display: none;
    }
}


/* footer */
.footer {
  padding-top: 0;
}
#inner-footer {
    display: none;
}
#footer-menu {
    padding: 20px 10px 40px;
}
#footer-menu-conts > nav {
    width: 100%;
}
#footer-menu-conts .footer-links {
    width: 100%;
}
#footer-menu-conts .footer-links ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
  list-style: none;
}
#footer-menu-conts .footer-links ul li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}
@media only screen and (min-width: 769px) {
    #footerlogo {
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    #footerlogo img {
        height: 40px;
        padding: 0;
    }
    #footer-menu {
        min-height: 250px;
        padding: 60px 10px 10px;
    }
    #footer-menu-conts {
        display: flex;
        flex-wrap: wrap;
        max-width: 1168px;
        min-height: 180px;
        margin: auto;
    }
    #footer-menu-conts > div:first-of-type {
        width: 320px;
        text-align: left;
    }
    #footer-menu-conts > nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 40%;
        max-width: calc(100% - 320px);
        margin-left: auto;
        margin-right: 100px;

    }
    #footer-menu-conts .footer-links ul {
          margin: 0 0 40px;
          line-height: 1;
    }
    #footer-menu-conts .footer-links ul li {
        justify-content: flex-start;
        width: 50%;
        text-align: left;
        margin-bottom: 20px;
    }
}


#container {
    padding-top: 0px!important;
}


/* widget */
.widget .menu {
    padding: 10px;
}
.fixed-sidebar:not(.sidefixed), .fixed-sidebar:not(.sideidled) {
  top: 100px;
}



/* content */
#content {
    padding-top: 62px;
}

#main {
    overflow-x: hidden;
}



.searchform {
    position: relative;
}

.single .entry-content h2 {
    background: #26A69A;
    border-radius: 10px;
    color: #fff;
    padding: 0.6em;
    line-height: 1.4;
}
@media only screen and (min-width: 481px) {
    .single .entry-content h2 {
        padding: 30px 200px 30px 30px;
        box-shadow: 5px 5px 10px 0px rgba(18 114, 105, .16);
    }
    .single .entry-content h2::before {
        content: '';
        position: absolute;
        width: 196px;
        height: 100%;
        top: 0;
        right: 0;
        background-color: #19988C;
        border-radius: 0 10px 10px 0;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 15% 100%);
    }
    .single .entry-content h2::after {
        content: '';
        position: absolute;
        width: 169px;
        height: 122px;
        top: -43px;
        left: auto;
        right: 5px;
        border: none transparent;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url(./library/images/h2_bgImg.svg);
    }
}

#toc_container {
    position: relative;
    max-height: 80vh;
    overflow: hidden;
}
#toc_container #tocToggle2 {
    position: absolute;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(transparent, #fff);
}
#toc_container #tocToggle2::after {
    content: "もっと見る";
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    margin-bottom: 10px;
    background-color: #4db6ac;
    color: #fff;
    border-radius: 30px;
    cursor: pointer;
}
#toc_container.active {
    max-height: 100%;
    padding-bottom: 70px;
}
#toc_container.active #tocToggle2 {
    background: none;
    height: 50px;
}
#toc_container.active #tocToggle2::after {
    content: "折りたたむ";
}
.toc_toggle {
    display: none;
}
@media only screen and (min-width: 481px) {
    #toc_container {
        max-height: 450px;
    }
    #toc_container #tocToggle2 {
    }
}