/*

Theme Name: WING-AFFINGER5 Child

Template: affinger5

Description: ver20180831以上対応

Version: 20180831

*/





/*

キーカラー

#FC1A4D  濃いピンク

#FE4F28  濃いオレンジ

#FFEAF0  薄いピンク

#F3EBE4  薄いベージュ

#F6F7F7  薄いグレー

#333333  ブラック

*/



@media only screen and (min-width: 769px) {

    /* PC表示の場合 */

    .br-sp {

        display: none;

    }

    #s-navi {

        display: none;

    }

    .pcnone {

        display: none !important;

    }

    .pp {

        width: 480px;

        margin: 0 auto!important;

        line-height: 1.2em;

        margin-bottom: 5px;

        padding-bottom: 10px!important;

        margin-top: 5px;

        margin-left: 15px;

        text-align: center;

    }

    .pp a:link {

        color: blue!important;

    }

    .pp a:visited {

        color: blue!important;

    }

    .pp p {

        width: auto;

        margin-bottom: 0!important;

    }

    .pp {

        width: auto;

    }

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #s-navi {

        display: block;

    }

    .smanone {

        display: none !important;

    }

    .pp a:link {

        color: blue!important;

    }

    .pp a:visited {

        color: blue!important;

    }

}



.st-hide {

    display: none !important;

}



#wrapper-in > header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 102;

    background-color: #ffffff;

}



#headbox-bg {

    background-color: #ffffff;

}



#headbox {

    display: flex;

    justify-content: space-between;

    height: 106px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #headbox {

        height: 60px;

    }

}



#header-l {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding-bottom: 2px;

}



#header-l #st-icon-logo {

    width: 71px;

    height: 66px;

    margin: 20px 10px 20px 20px;

    padding-right: 0;

}



#header-l #st-icon-logo img {

    width: 71px;

    height: 66px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #header-l #st-icon-logo {

        width: 34px;

        height: 36px;

        margin: 14px 10px 12px 15px;

        padding-right: 0;

        background: url(/wp-content/themes/affinger5-child/images/common/logo_sp.png) no-repeat;

        background-size: 34px 36px;

    }

    #header-l #st-icon-logo img {

        display: none;

    }

}



#header-l #st-text-logo .sitenametop {

    font-size: 10px;

    font-weight: normal;

    line-height: 18px;

    letter-spacing: 0.5px;

    margin: 0;

    padding: 0;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #header-l #st-text-logo {

        padding-top: 12px;

    }

    #header-l #st-text-logo .sitenametop {

        font-size: 12px;

        letter-spacing: 0;

    }

}



#header-l #st-text-logo .sitenametop {

    visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

}



#header-l #st-text-logo .sitenametop::after {

    content: "ワンランク上の結婚相談所";

    visibility: visible;

    position: absolute;

    left: 101px;

    top: 39px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #header-l #st-text-logo .sitenametop::after {

        top: 15px;

        left: 59px;

    }

}



#header-l #st-text-logo .sitename {

    font-size: 16px;

    font-weight: bold;

    line-height: 18px;

    margin-bottom: 8px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #header-l #st-text-logo .sitename::before {

        background: url("/wp-content/themes/affinger5-child/images/common/logo2_sp.png") no-repeat;

        background-size: auto;

        background-size: 115px 19px;

        content: "";

        width: 115px;

        height: 19px;

        display: block;

        margin-top: -4px;

        margin-right: 10px;

        white-space: nowrap;

        text-indent: 100%;

        visibility: visible;

        position: absolute;

        top: 48px;

        left: 59px;

    }

    #header-l #st-text-logo .sitename {

        font-size: 10px;

        font-weight: normal;

        line-height: 18px;

        padding-top: 4px;

    }

}



#header-l #st-text-logo .sitename {

    visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

}



@media only screen and (max-width: 768px) {

    #header-l #st-text-logo .sitename {

        top: -15px;

    }

}



#header-l #st-text-logo .sitename::after {

    content: "ハッピーカムカム";

    visibility: visible;

    position: absolute;

    left: 101px;

    top: 57px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #header-l #st-text-logo .sitename::after {

        /* top: 48px;

         left: 180px;

		 width: 100%; */

    }

}





/* ヘッダー、右サイド */



#header-r {

    width: 280px;

    min-width: 280px;

    height: 106px;

    display: flex;

    flex-wrap: wrap;

    justify-content: end;

    align-items: start;

}





/* ヘッダー、右サイド、ウィジット */



#header-r .textwidget {

    width: 100%;

    height: 100%;

    padding: 0;

    margin: 0;

    background: none;

    font-size: 14px;

}





/* ヘッダー、右サイド、ウィジット、電話番号 */



.hdr_phone {

    width: 280px;

    height: 50px;

    color: #333333;

    background-color: #F3EBE4;

}



.hdr_phone .hdr_phone_number::before {

    content: "";

    display: inline-block;

    width: 22px;

    height: 22px;

    background-image: url("/wp-content/themes/affinger5-child/images/common/icon_hdr_phone.png");

    background-repeat: no-repeat;

    background-size: contain;

    margin-right: -4.5px;

}





/* メニュー部 */



#st-menuwide {

    position: absolute;

    left: 257px;

    top: 18px;

    right: 280px;

    bottom: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

}



#st-menuwide > nav > ul > li {

    display: inline-block;

    height: 37.5px;

    padding-right: 28px;

    position: relative;

}



#st-menuwide > nav > ul > li a {

    text-align: left;

    text-decoration: underline;

    color: #333; //font-size: 14px;

    font-weight: bold;

    height: 37.5px;

    line-height: 37.5px;

}



#st-menuwide > nav > ul > li a:hover {

    background-color: #FFFFFF;

}



#st-menuwide > nav > ul li.menu-item-has-children > a::after {

    content: "";

    display: inline-block;

    width: 0;

    height: 0;

    margin-left: 6px;

    -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;

    transition: opacity .2s ease, -webkit-transform .2s ease;

    transition: transform .2s ease, opacity .2s ease;

    transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    vertical-align: middle;

    border-top: 4px solid;

    border-right: 4px solid transparent;

    border-left: 4px solid transparent;

}





/* サブメニュー */



#st-menuwide > nav > ul > li.menu-item-has-children > ul.sub-menu {

    display: none;

}



#st-menuwide > nav > ul > li.menu-item-has-children > ul.sub-menu {

    position: absolute;

    top: 35px;

    left: 0px;

    width: 240px;

    border: solid 1px #DDDDDD;

    background: #FFFFFF;

    z-index: 999;

}



#st-menuwide > nav > ul > li.menu-item-has-children > ul.sub-menu li {

    width: 100%;

    height: 38px;

    border-bottom: solid 1px #DDDDDD;

    padding-bottom: 1px;

}



#st-menuwide > nav > ul > li.menu-item-has-children > ul.sub-menu li a {

    display: inline-block;

    width: calc(100% - 20px);

    height: 26px;

    text-decoration: none;

    border-top: none;

    line-height: 26px;

    padding: 10px;

}



#st-menuwide > nav > ul > li.menu-item-has-children > ul.sub-menu li a:hover {

    color: #EE8AA7;

    text-decoration: underline;

    background: transparent;

}





/* スマホ、バーガーメニュー部 */



#s-navi {

    position: absolute;

    top: 0;

    right: 0;

}



#s-navi .trigger {

    position: absolute;

    top: 0;

    right: 0;

}



#s-navi .acordion_button .op {

    display: block;

    width: 53px;

    height: 52px;

    font-size: 20px;

    line-height: 52px;

    text-align: center;

}



#s-navi .acordion_button .op:not(.active) i {

    /* メニューを閉じている時 */

    display: none !important;

}



#s-navi .acordion_button .op:not(.active)::before {

    content: "";

    display: block;

    width: 23px;

    height: 10px;

    position: absolute;

    top: 24px;

    right: 15px;

    border-top: solid 2px #000;

    border-bottom: solid 2px #000;

}



#s-navi .acordion_button .op:not(.active)::after {

    content: "";

    display: block;

    width: 23px;

    height: 2px;

    background-color: #000;

    position: absolute;

    top: 30px;

    right: 15px;

}



#s-navi .acordion_button .op.active {

    /* メニューを開いた時 */

    position: relative;

}



#s-navi .acordion_button .op.active i {

    display: none;

}



#s-navi .acordion_button .op.active::before {

    content: "";

    transform: rotate(45deg);

    display: block;

    width: 23px;

    height: 2px;

    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);

    background-color: #000;

    position: absolute;

    top: 30px;

    right: 15px;

}



#s-navi .acordion_button .op.active::after {

    content: "";

    transform: rotate(-45deg);

    display: block;

    width: 23px;

    height: 2px;

    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);

    background-color: #000;

    position: absolute;

    top: 30px;

    right: 15px;

}



#s-navi .acordion_tree {

    display: none;

    position: absolute;

    top: 60px;

    right: 0;

    width: 280px;

    background: #FFFFFF;

}



html.s-navi-active #s-navi .acordion_tree {

    display: block;

}



#s-navi .acordion_tree li {

    border-bottom: 1px solid #DDD;

}



#s-navi .acordion_tree li a {

    display: block;

    width: 100%;

    height: 100%;

    padding: 20px 20px;

}



#s-navi .acordion_tree li a:hover {

    text-decoration: underline;

}



#s-navi .acordion_tree .menu-item-label {

    padding-right: 5px;

}



#s-navi .acordion_tree .sub-menu {

    background: #E95A83;

}



#s-navi .acordion_tree li .sub-menu a:hover {

    border-top: 1px solid #DDD;

    text-decoration: none;

    background: #FFFFFF;

    opacity: 1;

}





/* スマホ表示時のメニュー下部、電話番号や無料相談のボタンを最下部に表示する対応 */





/* 最下部に表示するのをやめる為、コメントアウト化

#s-navi .acordion_tree .st-ac-box-bottom{

	padding-top: 120px;

}

*/





/* スマホ、バーガーメニュー 他コンテンツへのマスク */



:not(html.s-navi-active) .content-w-mask {

    display: none;

}



html.s-navi-active .content-w-mask {

    display: block;

    width: 100%;

    height: 100%;

    background-color: #000;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: .2;

}





/* コンテンツ部 */



#content-w {

    margin-top: 106px;

}



@media only screen and (max-width: 907px) and (min-width: 809px) {

    #content-w {

        margin-top: 146px;

    }

}



@media only screen and (max-width: 808px) and (min-width: 769px) {

    #content-w {

        margin-top: 186px;

    }

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #content-w {

        margin-top: 110px;

    }

}



#breadcrumb {

    display: none;

}





/* フッター部 */



#footer .footer-wbox {

    background-color: #333333;

}



#footer .footer-r {

    width: 100%;

    padding: 0;

    margin: 0;

    line-height: 26px;

}



#footer .footer-r-2 {

    float: none;

    width: 100%;

    padding: 0;

}



#footer p.ftr_txt {

    font-size: 14px;

    margin: 0 0 50px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #footer p.ftr_txt {

        line-height: 22px;

        margin: 0 20px 40px;

    }

}



.ftr_contact_text {

    height: 54px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    .ftr_contact_text {

        height: auto;

    }

}



#footer .ftr_phone .ftr_phone_txt {

    font-size: 14px;

    line-height: 26px;

}



#footer .ftr_phone .ftr_phone_number::before {

    content: "";

    display: inline-block;

    width: 32px;

    height: 34px;

    background-image: url("/wp-content/themes/affinger5-child/images/common/icon_ftr_phone.png");

    background-repeat: no-repeat;

    background-size: contain;

    margin-right: 5px;

}



#footer .footer-r-3 {

    display: flex;

    justify-content: space-around;

    align-items: top;

    width: 100%;

    background-color: #333333;

    color: #FFFFFF;

    padding: 40px 0 10px;

}



@media only screen and (max-width: 768px) {

    /* スマホ表示の場合 */

    #footer .footer-r-3 {

        display: none;

    }

}



#footer .footer-r-3 > div {

    font-size: 14px;

}



#footer .footer-r-3 p {

    font-size: 14px;

    line-height: 36px;

    font-weight: normal;

}



#footer .footer-r-3 .widget_nav_menu .menu {

    padding: 0;

    list-style-type: "- ";

    padding-left: 6px;

}



#footer .footer-r-3 .widget_nav_menu .menu li {

    line-height: 36px;

}



#footer .footer-r-3 a {

    color: #FFFFFF;

    text-decoration: none;

}



#footer .footer-r-3 a:hover {

    opacity: 0.7;

}



#footer .footer-r-3 .widget_custom_html .ftr_banner_l {

    line-height: 26px;

}



#footer .footer-l {

    width: 100%;

    padding: 0 0 60px 0;

    margin: 0;

    background-color: #333333;

    color: #FFFFFF;

}



#footer .footer-l > .footer_changed {

    display: block;

}



#footer .footer-l > .footer_changed p {

    font-size: 14px;

    line-height: 26px;

    margin-bottom: 1em;

}



#footer .footer-l > .footer_changed a {

    color: #FFFFFF;

    text-decoration: none;

}



#footer .footer-l > .footer_changed a:hover {

    opacity: 0.7;

}



#footer .footer-l > .footer_changed .sp_ftr_link {

    width: 200px;

    margin-left: auto;

    margin-right: auto;

}



#footer .footer-l > .footer_changed .sp_ftr_link ul {

    display: flex;

    justify-content: center;

    align-items: top;

    flex-wrap: wrap;

}



#footer .footer-l > .footer_changed .sp_ftr_link ul li {

    padding-left: 0.5em;

    padding-right: 0.5em;

    white-space: nowrap;

}



#footer .footer-l > #st-footer-logo {

    display: none;

}



#footer .footer-l .footer_changed #st-footer-logo {

    display: none;

}



#footer .copyr {

    display: none;

}





/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット

---------------------------------------------------------------------------------------------------*/



@media only screen and (max-width: 959px) {

    /*-- ここまで --*/

}





/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ

---------------------------------------------------------------------------------------------------*/



@media only screen and (min-width: 600px) and (max-width: 959px) {

    /*-- ここまで --*/

}





/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC

---------------------------------------------------------------------------------------------------*/



@media only screen and (min-width: 600px) {

    /*-- ここまで --*/

}





/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ

---------------------------------------------------------------------------------------------------*/



@media print,

screen and (min-width: 960px) {

    /*-- ここまで --*/

}





/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ

---------------------------------------------------------------------------------------------------*/



@media print,

screen and (max-width: 599px) {

    /*-- ここまで --*/

}





/*/////////////////////////////////////////////////

//チャット画面(会話方式)を記事に表示する方法

/////////////////////////////////////////////////*/

.balloon__contener {

  clear: both;

  width: 100%;

  padding: 10px 0;

}



.balloon__contener:after {

  content: ".";

  display: block;

  clear: both;

  height: 0;

  visibility: hidden;

}



.balloon__contener figure {

  width: 60px;

  position: absolute;

  padding: 0;

  margin: 0;

  top: 0;

  /* 正方形を用意 */

}



.balloon__contener figure img {

  border-radius: 50%;

  width: 60px;

  height: 60px;

  border: solid 1px #dddddd;

}



.balloon__contener figure figcaption {

  color: #000000;

  width: 60px;

  position: absolute;

  top: 60px;

  text-align: center;

  font-size: 70%;

  line-height: 100%;

}



.balloon__contener .balloon__left {

  width: 100%;

  position: relative;

  display: block;

  max-width: 80%;

  clear: both;

}



.balloon__contener .balloon__left figure {

  left: 0;

}



.balloon__contener .balloon__left .balloon__text {

  margin-left: 80px;

  position: relative;

  padding: 20px;

  border-radius: 10px;

  background-color: #d8f4f8;

}



.balloon__contener .balloon__left .balloon__text::after {

  content: '';

  position: absolute;

  display: block;

  width: 0;

  height: 0;

  left: -10px;

  top: 12px;

  border-right: 15px solid #d8f4f8;

  border-top: 15px solid transparent;

  border-bottom: 15px solid transparent;

}



.balloon__contener .balloon__right {

  width: 100%;

  position: relative;

  display: block;

  float: right;

  max-width: 80%;

  clear: both;

}



.balloon__contener .balloon__right figure {

  right: 0;

}



.balloon__contener .balloon__right .balloon__text {

  margin-right: 80px;

  position: relative;

  padding: 20px;

  border-radius: 10px;

  background-color: #eeeeee;

  /* 吹き出し */

}



.balloon__contener .balloon__right .balloon__text::after {

  content: '';

  position: absolute;

  display: block;

  width: 0;

  height: 0;

  right: -10px;

  top: 12px;

  border-left: 15px solid #eeeeee;

  border-top: 15px solid transparent;

  border-bottom: 15px solid transparent;

}





@media only screen and (max-width: 767px){

  .balloon__contener .balloon__left,

  .balloon__contener .balloon__right {

    max-width: 100%;

  }

}



html {

  scroll-behavior: smooth;

}


/* 20250807 【モバイル】スムーススクロールの設定 */
#page-top.page-top--sp{
    position: fixed;
    top: auto;
    left: auto;
    bottom: 150px;
    right: 20px;
    width: 40px;
    height: 40px;
}
#page-top.page-top--sp a{
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* 20250807 Googleマップの追加 */
.footer__google-map{
    margin-bottom: 20px;
}
@media screen and (max-width: 768px){
    .footer__google-map{
        width: 330px;
    }        
}