/*
Theme Name: PLS 2025
Theme URI: http://underscores.me/
Author: It-pln Corp;
Author URI: http://underscores.me/
Description: 英会話教室PLS様専用のテーマファイルです。Wordpress6.8系統への更新に伴いテーマファイルも更新しました。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pls-2025
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

pls is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*=========================================================================
# detyle
=========================================================================*/

:root {
    --cmn-max-width: 1100px;
}

/* 
.mejs-audio {
    width: 100% !important;
} */

/*=========================================================================
# 共通
=========================================================================*/


/*文字の色*/
.white {
    color: #fff;
}

#content {
    margin: 25px 0 100px;
}

/* 線 */
hr.line {
    border-style: dashed;
}

/* sitebody（index.phpなどで使用）*/
.mainhaba {
    width: 100%;
    max-width: var(--cmn-max-width);
    margin: 0px auto;
}

/* 見出し （single.phpなどで使用）*/
.midashi4 {
    background-color: #61aaa3;
    padding: 10px 10px 10px 15px;
}


@media (max-width:767px) {
    .home .screensize_sp {
        /* display: none; */
    }
}

.breadcrumbs {
    margin-bottom: 20px;
}

#main3 {
    margin: -20px 10px 10px 0px;
}

/*=========================================================================
# サイドバーがある場合の基本の構造
=========================================================================*/

.entry-content>p {
    /* display: none; */
}

#wrap {
    width: 90%;
    max-width: var(--cmn-max-width);
    margin: auto;
}

/* メインコンテンツとサイドバーのwrap */
.mainAndSidebarWrap {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: auto;
}

.mainAndSidebarWrap .sidebar {
    padding: 0;
}

.mainAndSidebarWrap .sidebar {
    min-width: 200px;
    flex: 2.5;
}

.mainAndSidebarWrap main {
    flex: 7.5;

}

/**************************************
* Responsive
***************************************/

/* チェックボックス */
.sidebarCheckBoxLabel,
.sidebarCheckBox {
    display: none;
}

@media (max-width:767px) {


    #main2 {
        width: 100%;
    }

    .sidebarInner {
        height: 0;
        box-sizing: border-box;
        overflow: hidden;
        background-color: #edf7f6;
        margin-top: -10px;
    }

    .mainAndSidebarWrap {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .mainAndSidebarWrap .sidebar {
        width: 100%;
        max-width: 400px;
    }

    .sidebarCheckBoxLabel {
        display: block;
        margin: 0;
    }

    .sidebarCheckBox:checked~.sidebarInner {
        padding: 30px 0px;
        height: 100%;
    }

}

/*=========================================================================
# header.php
=========================================================================*/

/* 一番上の「大阪市　英語の発音スクール・・・」 */
#toptop {
    background-color: #e2e2e2;
    border-bottom: 1px dashed #444;
    text-align: center;
}

#toptop-inne {
    margin: 0 auto;
    overflow: hidden;
    padding: 3px 0;
    text-align: left;
    width: 90%;
    max-width: var(--cmn-max-width);
    font-size: small;
}

/* 幅 */
#headerhaba {
    width: 90%;
    max-width: var(--cmn-max-width);
    margin: 0px auto;
}

/* スピナー */
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}


.home header {
    background-image: url(../images/top_img15.png);
    background-repeat: no-repeat;
    padding-bottom: 50px;
    background-position: 50% 50%;
    background-size: 100% auto;

}

@media (max-width:767px) {
    .home header {
        background-image: url(../images/header_SP8.png);
        background-size: contain;
        padding-bottom: 20px;
    }

    .home .header__logoArea {
        align-items: start;
    }
}

/* 大阪市　英語の発音スクール（堀江教室）：マンツーマン・グループ対面レッスン｜全国・海外から受講できます：ウェブレッスン */
.header__schoolIntroduction {
    background-color: #e2e2e2;
    border-bottom: 1px dashed #444;
    padding: 3px 0;
    text-align: center;
    font-size: small;
    margin-bottom: 20px;
}

.header__schoolIntroduction p {
    width: 90%;
    margin: 0;
    margin: auto;
    max-width: 1100px;
    text-align: left;
}

.header__logoArea {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

/* Accessibility --------------------------------------------------------------*/
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* グローバルナビ (PC) -----------------------------------------------*/
.screensize_sp .menu-toggle {
    display: none !important;
}

.main-navigation,
.main-navigation ul,
.main-navigation ul li,
.main-navigation ul li a {
    box-sizing: border-box;
}

.main-navigation {
    width: 100%;
    text-align: center;
    cursor: default;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    line-height: 1.0;
}

.main-navigation a {
    font-size: 14px;
    padding: 10px;
    color: #175e60;
    width: 100%;
    height: 65px;
    list-style: none !important;
    font-weight: bold;
    text-decoration: none;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
}

/* 親メニュー */
.nav-menu {
    display: flex;
}

.nav-menu>li {
    position: relative;
    width: 100%;
    word-break: auto-phrase;
}

.nav-menu>li>a {
    border-bottom: 5px solid #629b94;
    border-left: 1px solid #333333;
}

.nav-menu>li:last-child>a {
    border-right: 1px solid #333333;
}

.nav-menu a:hover {
    color: #175e60;
    background: #edf7f6;
}


/* 子メニューの表示 */
.nav-menu>li:hover>ul,
.nav-menu>li.focus>ul {
    left: 0;
}

/*▼マーク*/
.menu_left:after {
    content: "▼";
    color: #175e60;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: 10px;
    font-size: 11px;
}

/* 子メニュー */

.sub-menu {
    position: absolute;
    left: 0;
    border-left: 1px solid #000;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    left: -999em;
    z-index: 99999;
    background: #fff;

}

.sub-menu a {
    text-align: left;
    width: 200px;
}

.sub-menu a:hover {
    color: #175e60;
    background: #edf7f6;
    border-bottom: 1px solid #629b94;
}

/* グローバルナビ (スマホ) -----------------------------------------------*/

.accordionNav__list {
    clear: both;
}

.accordionNav__sub {
    display: none;
}

.accordionNav__item.is-open>.accordionNav__sub {
    display: block;
}


/* アコーディオンメニュー */

/* Nav全体 */
.accordionNav {
    clear: both;
}

/* Menuの展開ボタン */
.accordionNav__menuToggleBtn {
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
    background-color: #61AAA3;
    padding: 15px 10px;
}

.accordionNav__menuToggleBtn p {
    margin: 0;
}

.accordionNav__menuToggleBtn-lineWrap {
    display: flex;
    flex-direction: column;
    gap: 5px;

}

.accordionNav__menuToggleBtn-line {
    width: 25px;
    height: 2px;
    background-color: white;
}

/* 親メニュー子メニュー共通 */
.accordionNav__list li:not(:last-child) {
    border-bottom: 1px solid white;
}

.accordionNav li:first-child {
    border-top: 1px solid white;
}

/* ◀ */
.accordionNav .has-children {
    position: relative;
}

.accordionNav .has-children::before {
    content: "";
    background-color: #cecece;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 10px;
    height: 7px;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    transform: translateY(-50%);
}

/* ▼ */
.accordionNav .has-children.is-open::before {
    content: "";
    background-color: #cecece;
    position: absolute;
    right: 10px;
    top: 18px;
    width: 7px;
    height: 10px;
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
    transform: translateY(-50%);
}

/* メニュー */

.accordionNav__list {
    display: none;
    background-color: #61AAA3;
    width: 100%;
    z-index: 1;
}

.accordionNav__list.is-open {
    display: block;
}

.accordionNav__list a {
    box-sizing: border-box;
    text-decoration: none;
    color: #330066;
    width: 100%;
    height: 100%;
    display: block;
    padding: 10px 15px;
    font-size: 12px;
}

.accordionNav__list a:hover {
    color: #993300;
}

.accordionNav__list,
.accordionNav__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.accordionNav__sub {
    background-color: #b3ddda;
}

/* is_home() ------------------------------------------------------------ */

/* ヘッダー */
.home .main-navigation {
    background-color: rgba(255, 255, 255, 0.8);
}

.home .accordionNav {
    padding-top: 44%;
    position: relative;
}

.home .accordionNav__list {
    position: absolute;
}

/* 小さいからこそ1人一人に向き合い(ヘッダー)  */
.top_img_text {
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    text-shadow: 0px 1px 1px white, 1px 1px 1px white, 1px 0px 1px white, 1px -1px 1px white, 1px -2px 1px white, 0px -2px 1px white, -1px -2px 1px white, -2px -2px 1px white, -2px -1px 1px white, -2px 0px 1px white, -2px 1px 1px white, -1px 1px 1px white;
    text-align: center;
    margin-top: 40px;
}

/* 「聞く・話す」の実践に */
.top_img_text_b {
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    text-shadow: 0px 1px 1px black, 1px 1px 1px black, 1px 0px 1px black, 1px -1px 1px black, 1px -2px 1px black, 0px -2px 1px black, -1px -2px 1px black, -2px -2px 1px black, -2px -1px 1px black, -2px 0px 1px black, -2px 1px 1px black, -1px 1px 1px black;

    /* for IE */
    filter: dropshadow(color=black, offx=0, offy=1, positive=1), dropshadow(color=black, offx=1, offy=0, positive=1), dropshadow(color=black, offx=1, offy=-1, positive=1), dropshadow(color=black, offx=0, offy=-2, positive=1), dropshadow(color=black, offx=-1, offy=-2, positive=1), dropshadow(color=black, offx=-2, offy=-1, positive=1), dropshadow(color=black, offx=-2, offy=0, positive=1), dropshadow(color=black, offx=-1, offy=1, positive=1);
    text-align: center;
    margin-top: 15px;
}

/**************************************
* Responsive
***************************************/




@media(max-width:1019px) {
    .top_img_text {
        margin-top: 20px;
    }

    .menu_left:after {
        display: none;
    }

    /* PCサイズ　上部の画像 */
    .header_gazou_2 {
        display: none;
    }
}

@media (min-width: 768px) and (max-width:1019px) {
    .header_gazou {
        display: block;
    }
}

@media (min-width: 768px) {

    /* レスポンシブで表示されるロゴ */
    .header_gazou_3 {
        display: none;
    }

    /* 最上部、灰色背景の下空白 */
    .header_top {
        margin-top: 10px;
    }

    .accordionNav {
        display: none;
    }
}

@media (max-width: 767px) {
    #toptop-inne {
        width: 90%;
    }

    .home .haikei {
        background: #fff url('../images/header_SP8.png') no-repeat center center;
        background-size: 100% auto;
        height: 405px;
    }

    .top_img_text {
        display: none;
    }

    .top_img_text_b {
        display: none;
    }

    /* タブレットのみ-----------------------------------------------*/

    .header__info {
        display: none;
    }

    .main-navigation {
        display: none;
    }

}

/*=========================================================================
# footer.php
=========================================================================*/
footer {
    clear: both;
}

.footer_responsive {
    display: none;
    text-align: right;
}

.site-info ul {
    margin-top: 15px;
    font-size: 9pt;
    display: flex;
    list-style: none;
    padding: 0;
}

.footer_back_color {
    background-color: #61aaa3;
    margin-top: 5px;
}

.footer_1,
.footer_2 {
    width: 90%;
    margin: 0 auto;
    max-width: var(--cmn-max-width);
}

.footer_1 {
    clear: both;
    font-size: 10pt;
}

.footer_1 a {
    text-decoration: none;
}

.footer_1 ul li {
    border-right: 1px solid #61aaa3;
    padding: 0 20px;
    line-height: 1;
}

.footer_1 ul li:first-child {
    border-left: 1px solid #61aaa3;
}

/* 緑背景 */
.footer_2 {
    padding-top: 12px;
    margin: 0px auto;
}

.footer_2 ul {
    margin: 0;
    gap: 25px;
    padding: 0;
}

.footer_2 a {
    text-decoration: none;
    color: white;
}

.footer_2 a:hover,
.footer_2 a:focus,
.footer_2 a:active {
    color: #b3ddda;
}

.site-footer {
    border-top: 1px dashed white;
    margin-top: 40px;
    padding-top: 10px;
}

/* テストサイト側で謎にきいてなかった コピーライト*/
#colophon {
    color: #fff;
    text-align: right;
    font-size: 10pt;
}

/**************************************
* Responsive
***************************************/

/* PCサイトを表示する */
#sidebar-36-parent {
    display: none;
}

/* 白背景 */
.switch {
    background-color: #fff;
    border: 1px solid #61aaa3;
}

@media (max-width: 767px) {
    .footer_responsive {
        display: block;
        clear: both;
    }

    #sidebar-36-parent {
        display: block;
    }

    #sidebar-36-parent a {
        color: #175e60;
        text-decoration: underline;
    }

    .site-footer {
        margin-top: 25px;
    }

    .footer_2 {
        padding-top: 30px;
    }

    #sidebar-36-parent .switch a {
        font-size: 10pt;
    }
}

/*=========================================================================
# index.php
=========================================================================*/

.home .site-content:after {
    display: none !important;
}

/* サイドバー */
#right_menu {
    width: 200px;
}

.top_wig2_margin {
    margin-bottom: 20px;
}

/*メインビジュアル以下-----------------------------------------------*/


/* 青背景アナウンス */
#info {
    float: left;
    width: 100%;
    height: auto;
    background-color: #b3ddda;
    margin: 0px 10px 10px 0px;
}

/* 体験レッスン以下　（共通）-----------------------------------------------*/

/* 見出し */
.top_center_button_font {
    font-size: 27px;
    color: #175e60;
    font-weight: medium;
}

/* 実践練習/発音についての知識 */
.top_center_button_font_m {
    font-size: 17px;
    color: #175e60;
    font-weight: bold;
}

/* 説明文 */
.top_center_button_font_s {
    font-size: 14px;
    color: #175e60;
    font-weight: medium;
}

/* ボタン　内側 */
.top_center_button_1naka {
    border: 2px solid #b3ddda;
    margin: 5px;
    border-radius: 10px;
    padding: 5% 4% 2%;
}


/* 発音教室PLSについて/発音レッスン-----------------------------------------------*/
.top_center_button_1l,
.top_center_button_1r {
    border: #888 solid 1px;
    float: left;
    margin-top: 10px;
    background-image: url("../images/top_center_bottom_img.png");
    background-repeat: no-repeat;
    background-position: right 10% bottom 20%;
    border-radius: 10px;
}

/* 発音教室PLSについて */
.top_center_button_1l {
    width: 48%;
    margin-right: 2%;
    position: relative;
}

.top_center_button_1l .top_center_buttom_link a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999px;
}

/* 発音レッスン */
.top_center_button_1r {
    width: 49%;
}

/* 発音教室PLSについてと発音独トレの間 */
.top_center_button_clear {
    clear: both;
}

/* 発音独トレ-----------------------------------------------*/

#top_center_button_soto {
    border: 1px solid #888;
    border-radius: 10px;
    margin-top: 10px;
}


#top_center_button_naka {
    border: 2px solid #b3ddda;
    margin: 5px;
    border-radius: 10px;
    padding: 2% 2% 1%;
}


/* 発音独トレの中 */
.box_res2 {
    vertical-align: top;
    width: 48%;
    background-image: url("../images/top_center_bottom_img.png");
    background-repeat: no-repeat;
    background-position: 85% bottom;
    float: left;
}

.box_res:first-child {
    margin-right: 10px;

}

.box_res {
    border-right: #175e60 dashed 1px;
}

.appositive-list ul li {
    list-style-type: none;
    margin-bottom: 2.87%;
}

.appositive-list ul li a {
    width: fit-content;
    display: block;
    text-align: center;
    margin: auto;
}

/*whats news -----------------------------------------------*/
#koushin {
    float: left;
    width: 100%;
    font-size: 14px;
}


/*歩くひよこ*/
.walkruby {
    float: left;
    margin: 60px;
    margin-bottom: 0;
}

/**************************************
* Responsive
***************************************/

/* 見出し */
.top_res_mozi {
    color: #888;
    font-size: 14px;
    font-weight: bold;
}

/* 見出し下ライン */
.top_line {
    width: 100%;
    border-top: 1px dashed #f5a722 !important;
}


@media (max-width:767px) {

    .home .screensize_sp {
        display: none;
    }

    .home .mainAndSidebarWrap {
        flex-direction: column;
    }

    .walkruby {
        margin: 60px 0px;
    }

    #right_menu {
        width: 100%;
    }

    #center_menu {
        width: 100%;
    }

    .box_res2 {
        width: 100%;
    }

    .box_res {
        border-right: 0;
        border-bottom: #175e60 dashed 1px;
    }

    .top_center_button_1l,
    .top_center_button_1r {
        width: 100%;
    }

}

/*=========================================================================
# 404.php
=========================================================================*/

/*404にTOPリンクの文字サイズ 09/30追記*/
#p404_topmodoru {
    font-size: 18px;
    font-weight: bold;
}

/*=========================================================================
# 生徒様の声(single.php,page_4,page_5)
=========================================================================*/

/*生徒様の声 (single.phpなど) */
.student_koe_waku {
    border: #61aaa3 solid 1px;
}

.main_student {
    padding: 20px;
}

.student_box3 {
    border: #90EE90 solid 1px;
    padding: 20px;
    padding-bottom: 30px;
    text-align: left;
    min-height: 140px;
}

@media (max-width:767px) {

    .main_student {
        padding: 15px;
    }

    .student_box {
        margin: 0px auto;
        width: 95%;
    }

    .student_box2 {
        text-align: center;
    }

    .student_box3 {
        padding: 5px 0px;
        padding-bottom: 30px;
        border: none;
    }
}


/*=========================================================================
# page_1.php
=========================================================================*/

.box {
    padding: 0 60px;
}

@media (max-width:767px) {
    .box {
        padding: 4%;
    }
}

/*=========================================================================
# single.php
=========================================================================*/

.single .box {
    padding: 6% 60px;
}


/*=========================================================================
# page_5.php
=========================================================================*/

.page5_box {
    padding: 6% 10% 3%;
}

/*=========================================================================
# page_6.php
=========================================================================*/
#maplink>.text {
    display: flex;
    gap: 25px;
    align-items: center;
}

#maplink>.text img {
    min-width: 40px;
}

#maplink .maplink_text {}

/*=========================================================================
# page_7.php
=========================================================================*/
/* 見出し */
#maplink {
    background-color: #61aaa3;
    padding: 10px 20px;
    font-weight: bold;
}

.p7_headingWrap {
    display: flex;
    gap: clamp(10px, 2vw, 20px);
    align-items: center;
}

.maplink_text {
    color: #fff;
}

.minikouza_waku {
    border: #61aaa3 solid 1px;
    margin: 0px auto;
}

.minikouza_waku:not(.item1) {
    margin-top: 20px;
}

/* 2実習練習 3 発音の知識 */
.p7_flex-wrap {
    display: flex;
    justify-content: center;
}

.p7_flex-leftBox,
.p7_flex-rightBox {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.p7_flex-leftBox {
    border-right: #999 dashed 1px;
}

.su-spoiler-title {
    font-size: 16px !important;
}

/*発音記号 母音･子音のボタン*/
.hatuonkigou_icon {
    width: 170px;
    height: 86px;
    margin: 0px 10px 0px 0px;
}

.p7_plactice-hatsuonIconWrap {
    display: flex;
    flex-wrap: wrap
}

/**************************************
* Responsive
***************************************/
@media (max-width:767px) {
    .p7_flex-wrap {
        flex-direction: column;
    }

    .p7_flex-leftBox {
        border-right: none;
        border-bottom: #999 dashed 1px;
    }
}


/*=========================================================================
# page_9.php/15/16/17
=========================================================================*/

/* サイドバー */
@media (min-width:767px) {
    .LG_side {
        border: 10px solid #b3ddda;
    }
}

.LG_side {
    margin-top: 30px;
}

.misashi_LG {
    padding-left: 10px !important;
}

@media (min-width:767px) {
    .p15_sidebar-padding {
        padding-left: 5%;
        padding-bottom: 30%;
    }
}


/*=========================================================================
# サイドバー
=========================================================================*/
/* .textwidgetは「/minikouza/hatuon_map/type_betsu/」などでも使用されており、下記のように記述しないと
想定外の個所で反映されてしまう */

#sidebar-37-parent .textwidget,
#sidebar-35-parent .textwidget {
    padding: 0 10px;
}

@media (max-width:767px) {

    #sidebar-37-parent .textwidget,
    #sidebar-35-parent .textwidget {
        padding: 0;
    }
}