@charset "UTF-8";

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "游ゴシック体","YuGothic","游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}


a:hover {
    opacity: 0.5;
}


/* header */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    height: 100px;
}

.header-logo {
    padding: 20px;

}



.header-info {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
}

.icon {
    width: 20px;
    height: auto;   
}

.number {
    font-size: 33px;
}

img {
    max-width: 100%;
    display: block;
}

.main-visual {
    height: 648px;
    background-image: url(images/mainvisual.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 0 auto;
}
                            


.main-visual h1 {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 15%;
    left: 10%;
    letter-spacing: 0.1em;
    line-height: 1.6;
    z-index: 1;
} 

.about {
    padding: 100px 0;
    text-align: center;
}

h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 50px;
}


.about p {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;

}

.br-sp {
    display: none;
}

.container {
    display: flex;
    justify-content: space-around;
    padding: 34px 0;
    width: 100%;
    font-size: 16px;
    background-color: #ffa15fcc;
    margin-top: 100px;
    font-weight: bold;
}


.clinical-services {
    background-color: #e1dfdb;
    text-align: center;
    padding: 100px 0;
    width: 100%;
    font-size: 16px;
}



.title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 50px;
    text-align:center;
}

.clinical-treatments {
    display: flex;
    justify-content: center;
    background-color: #e1dfdb;
    gap: 20px;

}



.clinical-treatments div {
    width: 220px;
    padding: 20px;

}


.clinical-treatments img {

    margin:auto;
    transition: 0.5s;

}




.clinical-treatments a {

    display:block;

    transition:0.5s;

}

.clinical-treatments p {

    font-size:16px;
   

}

.clinical-treatments a :hover {
    opacity: 0.5;
}

.clinical-services p {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 10px;
}

.clinical-treatments p:hover {
    opacity: 0.5;
}

.btn-area {
    text-align: center;
    margin-top: 20px;
}
    
.btn {
    display: inline-block;
    padding: 16px 31px;
    margin-top: 40px;
    background-color: #ffa15fcc;
    font-size: 16px;
    border-radius: 23px;
    transition: 0.5s;
   
}

.news {
    background-color: #fff;
    text-align: center;
    padding: 100px 20px;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.news-list {
    justify-content: space-around;
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    text-decoration: none;
    border-top: 1px solid #ccc;
}

.news-list a {
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
    align-items: center;
    height: auto;
    padding: 45px 0;
}

.title {
    font-size: 36px;
    margin-bottom: 50px;
    text-align: center;
}

.news-link {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}

.news-list {
    margin-top: 50px;
}

li {
  list-style: none; /* これで文頭の黒丸が消えます */
}


.news-link:hover {
    background-color: rgba(0,0,0,0.03);
}

.date {
    color: #000000;
    width: 180px;
    text-align: left;
    font-size: 16px;
    padding-left: 40px;

}

.content {
    color: #000000;
    flex: 1;
    text-align: left;
    font-size: 16px;
    white-space: nowrap;

}

.access-section {
    padding: 100px 0;
    width: 100%;
    background-color: #e1dfdb;
}

.title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 60px;    
}

.table-wrapper {
    max-width: 800px;
    margin: 0 auto;   
}

.time-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.time-table th {
    background-color: #ffa15fcc;
    border: 1px solid #000;
    padding: 21px 42px;

    border: 1px solid #000;
}

.time-table td {
    padding: 21px 42px;
    text-align: center;
    border: 1px solid #000;
    background-color: #fff;
}

.time-table .time-cell {
    width: 180px;
    text-align: center;
}

.pc-table-area .table-notes {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: left;
    margin-bottom: 20px;
}

.sp-text-area {
  display: none;
}

.table-notes {
    font-size: 16px;
    line-height: 1.8;
}

.map-address-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 90px;
}

.map-area {

    flex: 1;
    max-width: 380px;

    width: 100%;

    height: 223px;

    position: relative;

    overflow:hidden;

}
.map-area iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.address-area {
    flex: 1;
    max-width: 50%;
    text-align: left;
}

.address-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.address-list dt,
.address-list dd {
    font-size: 16px;
    line-height: 1.8;
}

.address-item {
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.address-item dt {
    width: 80px;
}

.address-item dd {
    margin: 0;
    flex: 1;
}

footer {
    background-color: #fff;
    text-align: center;
    padding: 42px 0;
}

.copyright {
    font-size: 14px;
    color: #000;
    letter-spacing: 0.05em;
}

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


.header-container {

    height:70px;
    padding:0 10px;
    left:0;


}



.header-logo img {

    width:160px;

}


.header-info {

    font-size:14px;

    padding:10px;

    gap:8px;


    flex-shrink:1;


}

.icon {
    width:18px;
}

.header-logo {

    flex-shrink:1;

}



.number {
    font-size: 24px;
    white-space: nowrap;
}

.container {

    margin-top:70px;
    padding: 25px 0;

}



.main-visual {

    height:320px;

}



.main-visual h1 {

    font-size:28px;

    left:5%;

}



.title {

    font-size:24px;
    margin-bottom: 30px;

}

.about {
    padding: 60px 0;

}

.clinical-services {
    padding: 60px 0;
}


.clinical-treatments {

    flex-wrap:wrap;

}



.clinical-treatments div {

    width:40%;

}


.btn {
    margin-top: 30px;
}

.news {
    padding: 60px 20px;
    max-width: 80%;
}

.news-list a {
    padding: 35px 0;
}


.access-section {
    padding: 60px 0;
}


.table-wrapper {
    width:90%;
    max-width:800px;
    margin:0 auto;
}


.time-table {
    width:100%;
}


.time-table th,
.time-table td {
    padding:18px 20px;
}

.map-address-wrapper {
    flex-direction:row;
    align-items:flex-start;
    gap:30px;
    width: 90%;
    max-width: 800px;
    margin-top: 10px;
    padding-top: 60px;

}


.address-area {
    flex:1;
    max-width:50%;
    text-align:left;
    padding-top:0;
}

.address-list {
    margin:0;
    padding:0;
}


.map-area,
.address-area {

    width:45%;

    margin: 0;
    

}

.about,
#clinical-services,
#news,
#access {
    scroll-margin-top: 100px;
}

footer {
    padding: 15px 0;
}
  


}





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

.header-logo img {
    width: 100px;
}

.header-logo {
    padding: 5px;
    flex-shrink:1;
}


.header-container {
    height: 60px;
    padding: 0;

}

.container {
    font-size: 13px;
    padding: 12px 0;
    margin-top:0;
}

.header-info {
    font-size: 13px;
    padding: 5px;
    gap:8px;
    flex-shrink:1;
}

.text {
    font-size: 11px;
}

.icon {
    width: 10px;
 
}

.number {
    font-size: 15px;
    white-space: nowrap;
}




.header-info {
    font-size:13px;

}

.header-info a {
    cursor:pointer;
}


.main-visual h1 {
    font-size: 20px;
}

h2 {
    font-size: 20px;
    
}
.title {
    font-size: 20px;
    margin-bottom: 20px;

}
.main-visual {
    height: 260px;
    margin-top: 60px;

} 

.about p {
    font-size: 13px;
}

p {
    font-size: 13px;
}

.about {
    padding: 40px 0;
}

.br-sp {
    display: block;
}

.clinical-services {
    padding: 40px 0;
    
}

.clinical-services p {
    font-size: 13px;
}


.title {
    padding: 0;
}

.btn-area {
    margin-top: 0;
}

.btn {
    font-size: 13px;
    padding: 7px 13px;
}


.clinical-treatments div {

    width: 45%;

}



.news {
    padding: 40px 0;
}

.news-list {
    padding-bottom: 5px;
    max-width: 350px;
}    

.news-list a {
    padding: 20px 0;
}    



.date {
    font-size: 13px;
    width: 28%;
    padding-left: 8px;
}



.content {
    font-size: 13px;

}

.access-section {
    padding: 30px 0;
}


.table-wrapper {

    width: 90%;

    overflow:hidden;

}



.time-table {

    width:100%;

    table-layout:fixed;

    font-size:12px;

}



.time-table th,
.time-table td {

   

    word-break:break-all;
    text-align: center;
    vertical-align: middle;
    padding: 12px 5px;

}



.time-table th {

    font-size:12px;

}



.time-cell {

    width:25%;

    font-size:11px;

}


.table-notes {
    font-size: 13px;
}



.map-address-wrapper {

    flex-direction: column;

    width: 90%;
    gap: 30px;
    padding-top: 30px;

}


.map-area {

    width: 100%;
    max-width: none;
    height: 0;
    padding-top: 56%;

}


.address-area {

    width: 100%;
    max-width: 100%;

}


.address-item {
    font-size: 13px;
}    

.address-list dt,
.address-list dd {
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 5px;
    line-height: 1.2;
    
}

.address-list dd {
    margin-bottom: 5px;
}

.address-list dd:last-child {
    margin-bottom: 0;
}


.address-item dt {
    width: 60px;
}

footer {
    padding: 8px 0;
}

.copyright {
    font-size: 12px;
}


}   

/* ハンバーガーメニュー */

.hamburger {
    display:none;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    position:relative;
}


.hamburger span {

    position:absolute;
    left:7px;
    width:25px;
    height:3px;
    background:#000;
    transition:0.3s;

}


.hamburger span:nth-child(1){
    top:11px;
}


.hamburger span:nth-child(2){
    top:19px;
}


.hamburger span:nth-child(3){
    top:27px;
}


/* クリック後 × */

.hamburger.active span:nth-child(1){

    transform:rotate(45deg);
    top:19px;

}


.hamburger.active span:nth-child(2){

    opacity:0;

}


.hamburger.active span:nth-child(3){

    transform:rotate(-45deg);
    top:19px;

}



/* スマホ */

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


.header-container{

    height:60px;

}


.header-info {
    display:flex;
    font-size:11px;
    padding:0;
    gap:3px;
    cursor:pointer;

}



.header-logo img{

    width:110px;

}

.icon {
    width:12px;
}

.number {
    font-size:13px;
    white-space:nowrap;
}

.address-item {
    margin-bottom: 0;

}

.hamburger{

    display:block;

}


footer {
    padding: 5px 0;
}
 

/* ナビを隠す */

.container{

    display:flex;

    flex-direction:column;

    position:fixed;

    top:60px;

    right:0;

    width:60%;

    height:auto;

    margin-top: 0;

    background:rgba(255,161,95,0.85) + blur(5px);

    text-align:center;

    z-index:998;

    transform:translateX(100%);

    transition:0.3s ease;
    
    padding:0;

    margin:0;

}


.container a{

    padding:25px 10px;

    border-bottom:1px solid #fff;

    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;

}


/* 開いた時 */

.container.active{

    transform:translateX(0);

}


.container.active a{

    display:block;

}

.container a:last-child{
    border-bottom:none;
}

}