/*
Theme Name: HARU
Description:
Author:
Version: 1.0
*/

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

/* ============================================== */
/* グローバルナビ
/* ============================================== */
#menu{
    border-color: #bbbbbb;
    /* z-index: 6; */
}
#menu #dropmenu {
    display: flex;
    justify-content: space-between;
    float: none;
}

#menu #dropmenu li {
    float: none;
    padding-right: 0;
}

#menu #dropmenu li a {
    padding-left: 10px;
    padding-right: 10px;
    color: #555555;
}

#menu #dropmenu li:hover a {
	background-color: #62a1de;
	color: #fff;
}

#menuchange {
	background-color: #0062C4;
}

#menuchange #dropmenu li a {
    padding: 12px 5px;
}

#menuchange #dropmenu li:hover a {
    background-color: #227ad1;
    color: #fff;
}
#menuchange .tel{
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 100%;
	margin-bottom: 0px;
	text-decoration: none;
}
#menuchange .tel a{
	text-decoration: none;
	color:#ffff;
}
#menuchange .toptel2 .desc {
    color: #fff;
    font-size: 12px;
}
.shadow {
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.15);
}

.header-inner .left h1 {
    text-indent: 8px;
}

	.home .header-inner .left h1 .top-only,
.single-symptom .header-inner .left h1 .symptom-only, .page .header-inner .left h1 .top-only, .single .header-inner .left h1 .top-only {
        padding: 0 0 0;
        font-size: 17px;
        font-weight: 600;
        color: #777;
    }

	.home .header-inner .left h1 .symptom-only,
.single-symptom .header-inner .left h1 .top-only {
        display:none;
    }



.header-inner .right {
    padding-top: 26px;
}
img.contact-pc-top {
    padding-top: 10px;
}

/* 続きを読むボタン */
.readmore-button {
    background-color: #1b44c8;
    color: white;
    border-radius: 18px;
    padding: 0.5em;
    display: block;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0 auto;
    width: 10em;
    text-align: center;
    margin-bottom: 30px;
}
.readmore-button.show {
    background-image: linear-gradient( 180deg, rgba(255,255,255,0.5), white );
}

/*=== ヘッダー ===*/
.header-inner {
    z-index: 1;
	padding: 10px 0 15px;
}

/*=== 症状別ページ ===*/
.single-symptom main {
    background: transparent;
    padding-top: 0;
}

.single-symptom main .blog-content {
    width: 100%;
    padding: 0;
}

.single-symptom .blog-container {
    width: 100%;
    float: none;
}

.single-symptom .media-block {
    padding: 0;
    border: none;
}

.single-symptom .inner {
    margin: 0 auto;
}

.single-symptom .inner.fix {
    width: 1000px;
}

.single-symptom h2 {
    /* width: 1000px; */
    /* margin: 15px auto; */
}


@media screen and (max-width: 640px) {
    .single-symptom #voice .voice-block {
        padding-top: 0;
    }
    .single-symptom h2 {
        width: 100%;
    }

    .single-symptom .inner.fix {
        width: 100%;
    }

/*=== フッター ===*/

/* フッターFacebook */

    .fb_iframe_widget {
        overflow: hidden;
        width: 100%;
    }

	header {
        padding-bottom: 21%;
        z-index: 6;
        position: fixed;
        top: 0%;
        left: 0;
        right: 0;
    }
	.header-inner {
        height: auto;
        height: initial;
        padding: 5px 3px 5px;
        box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        display: block !important;
        width: 100%;
    }
	
		.home .header-inner .left h1 .top-only,
.single-symptom .header-inner .left h1 .symptom-only {
        font-size: 14px;
    }
	.header-inner .right {
    padding-top: 0;
}
	.header-inner .left .visible-phone {
        margin: 0 10px 8px;
    }
	
/* グローバルナビ
/* ============================================== */
/* トグルボタン */
.drawer-hamburger {
        z-index: 999 !important;
        padding: 8px 8px !important;
        background-image: linear-gradient(to bottom, #fff, #eee);
        background-color: #eee;
        top: 10px !important;
        right: 10px !important;
        border: 1px solid #bbb !important;
        border-radius: 4px;
        width: 30px !important;
        height: 30px;
        box-sizing: border-box;
        text-align: center;
        color: #555;
        position: fixed; }
	
.drawer-hamburger .caption {
    font-size: 8px;
    display: block;
}

.drawer-hamburger i {
    font-size: 22px;
}

/* トグルボタン（メニューオープン時） */
.drawer-open .drawer-hamburger i::before {
    content: "\f00d";
}

.drawer-open .drawer-hamburger .caption {
    font-size: 0;
}

.drawer-open .drawer-hamburger .caption::before {
    content: 'CLOSE';
    font-size: 8px;
}

.drawer-open .drawer-hamburger {
    right: 16.25rem!important;
    top: 10px!important;
}

/* ナビゲーション部分 */
.drawer-nav {
    z-index: 999!important;
    background: transparent!important;
}

.drawer-menu {
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    background: #fff;
}

.drawer-menu li {
    padding: 0.5em 0.5em 0.5em 2.3em;
    position: relative;
}

.drawer-menu li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.8em;
    transform: translateY(-50%);
    background: #2f6eb4 linear-gradient(to bottom,#4b92f2,#0d5db6);
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
}

.drawer-menu li+li {
    border-top: 1px solid #ddd;
}

.drawer-menu li a {
    color: inherit;
    text-decoration: none;
    display: block;
    font-size: 1rem;
}
	
    #mainvisual {
        margin-top: 127px;
    }
	
    /* 共通 */
    iframe[src^="https://www.youtube.com"] {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    #profile img, .recommend img {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
	
	.isami_suisen_block img {
    width: 100%;
    max-width: 210px;
    height: 100%;
    float: none !important;
    margin: 0px auto 40px;
    display: block;
    }

    #flow .message-container img {
        width: 80px;
    }

    #access .access iframe {
        width: 100%;
    }
}