@charset "UTF-8";

.lp-header {
    width: 100%;
    background-image: url(../imgs/lp/lp-header-bg.png);
    background-position: center bottom; 
}
.lp-header.ver21{
	background: none;
}

.lp-header hgroup{
	width:960px;
	margin:0 auto;
	padding:0;
	position:relative;
}
.lp-header.ver21 hgroup{
	width:auto;
	margin:0;
}

.lp-header h1{
	display:block;
	width:960px;
	height:460px;
	margin:0;
	padding:0;
	background:none;
	line-height:1;
	font-size:14px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.lp-header.ver21 h1{
	width:auto;
    height:auto;
    font-size:0;
}
.lp-header h1 .sp{
    display:none;
}


header h1 img{
	margin-bottom:0px;
}
header.ver21 h1 img{
    width: 100%;
    height: auto;
}

section.lp-gl{
	padding-bottom:40px;
}

.lp-gl a img{
	filter: alpha(opacity=100);
	opacity: 1;
}

.lp-gl a:hover img{
	filter: alpha(opacity=65);
	opacity: 0.65;
}

.lp-h{
	background-color:#ef9438;
	margin:0;
	padding:8px;
	color:#fff;
	font-size:18px;
}

#support .first{
    float: none;
    width: auto;
}

section div.full{
    width: auto;
    margin: 0 0 2rem;
    float: none;
}
section div.full table{
    width: 100%;
}
section div.full table th,
section div.full table td{
    width: auto;
}

.in-hospital{
    text-align: center;
}
.in-hospital img{
    max-width: 640px;
    width: 100%;
    height: auto;
}

a.access_btn{
    display: block;
    width: 100%;
    height: 46px;
    line-height: 44px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #ef9438;
    border-bottom: 2px solid #e07e1d;
    border-radius: 4px;
    margin-top: 1rem;
    text-decoration: none;
}

#access_wrap{padding-top: 0;}
.access_list{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -16px;
}
.access_list li{
    width: 50%;
    padding: 0 16px;
    box-sizing: border-box;
    margin: 32px 0 0;
}
.access_list li:nth-child(-n+2){
    margin-top: 0;
}
.access_list li div{
    width: 100%;
    float: none;
    margin: 0;
}
.access_list li div img{
    width: 100%;
    height: auto;
}
.access_list li div p{
    margin: 0;
}

#f_btn{display: none;}

.line_btn{
    margin-top: 20px;
    text-align: center;
}

.online-list{
    width: 100%;
    border: 2px solid #625451;
    padding: 2rem 4rem;
    background-color: #fff;
    float: none;
    margin: 0 0 20px;
    box-sizing: border-box;
}
.online-list ul{
    list-style: none;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.online-list ul li span{
    color: #ef9438;
}
.online-text{
    font-size: 20px;
    text-align: center;
}

@media screen and (max-width: 960px) {
    .lp-header{
        background-size: auto 100%;
    }
    .lp-header hgroup{
        width:auto;
        margin:0;
        padding: 0 1em;
    }
    .lp-header.ver21 hgroup{
        padding: 0;
    }
    .lp-header h1{
        display:block;
        width:auto;
        height:auto;
    }
    section.lp-gl{
        padding-bottom:0;
    }
    .lp-gl a img{
        vertical-align: middle;
    }
    .line_btn img{
        width: auto;
        height: 36px;
    }
}
@media screen and (max-width: 600px) {
    body{padding-bottom: 60px;}
    .lp-header{
        background-image: none;
        background-color: #fff;
    }
    .lp-header.ver21{
        background-color: #fff;
    }
    .lp-header hgroup{
        padding: 0;
    }
    .lp-header h1{
        line-height:0;
        font-size:0;
    }
    .lp-header h1 .pc{
        display: none;
    }
    .lp-header h1 .sp{
        display: block;
    }
    .lp-header h1 .sp a{
        width: 100%;
    }
    .access_list{
        display: block;
        margin: 0;
    }
    .access_list li{
        width: 100%;
        padding: 0;
        margin: 2em 0 0;
    }
    .access_list li:nth-child(-n+2){
        margin: 2em 0 0;
    }
    .access_list li:first-child{
        margin: 0;
    }
    #f_btn{
        display: block;
        z-index: 4;
        width: 100%;
        height: 60px;
        padding: 0 1em;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }
    #f_btn ul{
        margin: 0 -0.5em;
        list-style: none;
    }
    #f_btn ul li{
        float: left;
        width: calc(100% / 3);
        padding: 0.5em;
        box-sizing: border-box;
    }
    #f_btn ul li a{
        display: block;
        width: 100%;
        height: 46px;
        line-height: 44px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        background-color: #ef9438;
        border-bottom: 2px solid #e07e1d;
        border-radius: 4px;
        box-sizing: border-box;
    }
    #f_btn ul li a.f_mail_btn{
        background-color: #75491f;
        border-bottom: 2px solid #683f19;
    }
    #f_btn ul li a.f_line_btn{
        background-color: #00b900;
        border-bottom: 2px solid #00ad00;
    }
    #f_btn ul li a:hover{
        text-decoration: none;
    }
    
    .online-list{
        padding: 1rem;
    }
    .online-list ul{
        font-size: 20px;
    }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }


/* ??????????????????? */
.header-clinic-name {
    display: block; /* ??????????????block? */
    text-align: center; /* ??????? */
    font-size: 16px; 
    font-weight: 700; /* ???? */
    color: #444;
    letter-spacing: 0.1em; /* ???????????????? */
    margin: 10px auto; /* ?????????? */
    padding: 5px 15px;
    background: #f9f9f9; /* ??????????? */
    border-top: 1px solid #ddd; /* ????????????????? */
    border-bottom: 1px solid #ddd;
    width: fit-content; /* ????????? */
    max-width: 90%;
    line-height: 1.4;
}

/* ?????????????? */
.lp-header h1 {
    display: flex;
    flex-direction: column; /* ????????????????? */
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

/* ????????? */
.pc, .sp {
    display: block;
    width: 100%;
    text-align: center;
}

.pc img, .sp img {
    max-width: 100%;
    height: auto;
}

/* ???????? */
@media screen and (max-width: 767px) {
    /* ???????????? */
    .lp-header h1 {
        flex-direction: column !important; 
        align-items: center !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }

    /* ?????????????????? */
    .header-clinic-name {
        display: block !important; /* ????????????? */
        width: 100% !important;
        font-size: 15px !important; /* ??????? */
        margin: 0 0 10px 0 !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid #ddd !important; /* ???????????? */
        text-align: center !important;
        font-weight: bold !important;
    }

    /* ??????????? */
    .sp {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .sp img {
        max-width: 90% !important; /* ??????????? */
        height: auto !important;
        margin: 0 auto !important;
    }
}